@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #07101e; --ink-2: #0c1729; --ink-3: #112238; --paper: #eef1f4; --muted: #8391a3; --line: rgba(184, 212, 236, .13); --cyan: #5ed6ff; --amber: #f5bf67; --violet: #a891ff; --lime: #b7ec79; --rose: #ff7184; --white: #f6f8fb; --mono: 'DM Mono', monospace; --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; color: var(--white); background: radial-gradient(circle at 65% -10%, #182c48 0, var(--ink) 37rem), var(--ink); font-family: var(--sans); letter-spacing: -.015em; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
[hidden] { display: none !important; }
.rail { position: fixed; inset: 0 auto 0 0; width: 102px; background: rgba(7, 16, 30, .76); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; z-index: 10; backdrop-filter: blur(20px); }
.brand-mark { font: 500 15px var(--mono); letter-spacing: -.08em; margin: 31px 0 57px; color: var(--white); }.brand-mark span { color: var(--cyan); margin-left: 2px; }
.rail-nav { display: grid; gap: 19px; width: 100%; }.rail-bottom { margin-top: auto; margin-bottom: 26px; display: grid; gap: 17px; width: 100%; }
.rail-link { position: relative; width: 100%; min-height: 62px; display: grid; justify-items: center; align-content: center; gap: 6px; color: #6f8094; background: transparent; font-size: 10px; transition: color .2s, background .2s; }.rail-link:hover, .rail-link.active { color: var(--white); }.rail-link.active::before { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; background: var(--cyan); box-shadow: 0 0 16px rgba(94, 214, 255, .7); }.rail-icon { font-size: 23px; line-height: 1; font-weight: 400; }.rail-link b { position: absolute; right: 22px; top: 11px; border-radius: 50%; min-width: 16px; height: 16px; padding: 1px 3px; color: var(--ink); background: var(--amber); font: 500 10px var(--mono); }
.user-chip { display: grid; justify-items: center; gap: 7px; color: #8491a2; background: transparent; font-size: 10px; }.user-chip span:first-child { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink); background: var(--cyan); border-radius: 50%; font: 500 12px var(--mono); }
.main-shell { margin-left: 102px; min-height: 100vh; max-width: 1720px; padding: 0 54px 70px; }.topbar { height: 113px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.eyebrow, .section-kicker, .panel-kicker { font: 500 10px var(--mono); letter-spacing: .12em; color: #77889d; }.eyebrow { display: flex; align-items: center; gap: 8px; }.signal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 11px rgba(183, 236, 121, .8); }.topbar h2 { margin: 9px 0 0; font-size: 18px; font-weight: 600; }.topbar h2 span { color: #536377; margin: 0 7px; }.topbar-actions { display: flex; align-items: center; gap: 23px; }.sync-state { display: grid; grid-template-columns: 7px auto; column-gap: 8px; align-items: center; font-size: 11px; color: #a1afbf; }.sync-pulse { grid-row: span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }.sync-state small { grid-column: 2; color: #64758a; font: 10px var(--mono); margin-top: 2px; }.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: #aab9c8; background: rgba(255,255,255,.02); font-size: 20px; transition: border .2s, transform .2s, color .2s; }.icon-button:hover { color: var(--cyan); border-color: rgba(94,214,255,.6); transform: rotate(25deg); }
.page-section { padding-top: 55px; }.hero-row { display: flex; justify-content: space-between; align-items: end; }.hero-title { margin: 19px 0 40px; font-size: clamp(37px, 4.5vw, 63px); line-height: .98; letter-spacing: -.07em; font-weight: 700; }.hero-title span { color: #8294a8; }.hero-note { display: flex; gap: 13px; margin-bottom: 45px; color: #7c8b9d; font: 11px/1.75 var(--mono); }.note-line { width: 28px; height: 1px; margin-top: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.hero-note p { margin: 0; }
.metric-grid { display: grid; grid-template-columns: 1.42fr 1fr 1fr; gap: 13px; }.metric-card { position: relative; min-height: 206px; padding: 24px 25px; background: linear-gradient(145deg, rgba(24, 43, 67, .8), rgba(13, 25, 42, .75)); border: 1px solid var(--line); overflow: hidden; }.metric-card-primary { background: linear-gradient(135deg, #173b55, #13243c); border-color: rgba(94,214,255,.35); }.metric-card-primary::after { content: ''; position: absolute; inset: auto -10% -60% 40%; height: 130%; background: radial-gradient(circle, rgba(94,214,255,.16), transparent 63%); }.metric-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #aebdca; font-size: 12px; }.live-label, .metric-index { color: var(--cyan); font: 10px var(--mono); letter-spacing: .1em; }.metric-index { color: #65788e; }.metric-value { position: relative; z-index: 1; margin-top: 23px; font: 500 clamp(28px, 3vw, 40px) var(--mono); letter-spacing: -.1em; }.metric-value-small { font-size: 35px; }.metric-value small { color: #7f8fa1; font: 12px var(--sans); letter-spacing: 0; }.metric-foot { position: absolute; left: 25px; bottom: 25px; z-index: 1; display: flex; gap: 11px; align-items: center; color: #728399; font-size: 11px; }.trend-up { color: var(--lime); font: 11px var(--mono); }.metric-rule { position: absolute; bottom: 28px; left: 25px; right: 25px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }.metric-spark { position: absolute; right: 17px; bottom: -1px; width: 44%; height: 70px; opacity: .8; }
.chart-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 13px; margin-top: 13px; }.panel { border: 1px solid var(--line); background: rgba(12, 25, 42, .73); }.chart-panel { min-height: 365px; padding: 26px 27px 18px; }.panel-header { display: flex; justify-content: space-between; align-items: start; }.panel-header h3 { margin: 10px 0 0; font-size: 17px; font-weight: 600; }.month-total { color: var(--cyan); font: 12px var(--mono); margin-top: 4px; }.legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: end; max-width: 58%; }.legend-item { display: flex; gap: 6px; align-items: center; color: #8292a5; font: 10px var(--mono); }.legend-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }.chart-wrap { position: relative; height: 245px; margin-top: 17px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 60px, rgba(176, 207, 232, .08) 61px), linear-gradient(180deg, rgba(23,48,76,.13), transparent); overflow: hidden; }.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }.chart-empty { display: grid; place-items: center; height: 100%; color: #64788e; font: 11px var(--mono); }.axis-caption { display: flex; justify-content: space-between; padding-top: 8px; color: #5f7084; font: 10px var(--mono); }
.site-strip { margin-top: 13px; padding: 25px 27px 23px; }.site-strip-header { align-items: center; }.site-strip-header h3 { margin-top: 7px; }.text-button { color: var(--cyan); background: transparent; font-size: 11px; }.text-button span { margin-left: 8px; font-size: 17px; }.site-pulse-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }.site-pulse { min-width: 0; padding: 15px 16px 14px; border-left: 2px solid var(--accent); background: rgba(255,255,255,.028); }.site-pulse-top { display: flex; justify-content: space-between; gap: 10px; }.site-pulse-name { overflow: hidden; color: #ccd7e1; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.status { display: flex; align-items: center; gap: 6px; color: var(--lime); font: 10px var(--mono); }.status.offline { color: var(--rose); }.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }.site-pulse-value { margin-top: 16px; color: var(--white); font: 15px var(--mono); }.site-pulse-sub { margin-top: 4px; color: #6e8094; font-size: 10px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 37px; }.section-heading h1 { margin: 14px 0 9px; font-size: 42px; letter-spacing: -.06em; }.section-heading p:not(.section-kicker) { margin: 0; color: #75869a; font-size: 13px; }.primary-button { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 14px 17px 14px 19px; color: var(--ink); background: var(--cyan); font-size: 12px; font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s; }.primary-button span { font-size: 18px; line-height: 0; }.primary-button:hover { background: #8de2ff; box-shadow: 0 10px 34px rgba(94,214,255,.18); transform: translateY(-2px); }.primary-button.compact { padding: 12px 15px; }
.ticket-filter { display: flex; padding: 4px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.filter-button { padding: 9px 13px; color: #72849a; background: transparent; font-size: 11px; }.filter-button.active { color: var(--ink); background: var(--white); }.filter-button span { margin-left: 4px; color: var(--rose); font: 10px var(--mono); }.ticket-layout { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(400px, 1.26fr); gap: 13px; min-height: 550px; }.ticket-list { padding: 7px; }.ticket-row { display: block; width: 100%; padding: 18px 16px; text-align: left; color: var(--white); background: transparent; border-bottom: 1px solid rgba(184,212,236,.08); }.ticket-row:hover, .ticket-row.active { background: rgba(94,214,255,.08); }.ticket-row.active { border-left: 2px solid var(--cyan); padding-left: 14px; }.ticket-row-top, .ticket-row-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.ticket-row-subject { margin: 10px 0 9px; color: #dfe7ee; font-size: 13px; font-weight: 600; }.ticket-row-email, .ticket-row-foot { color: #718399; font-size: 10px; }.ticket-row-foot { margin-top: 14px; font-family: var(--mono); }.ticket-site { color: var(--cyan); }.priority { font: 10px var(--mono); }.priority.high { color: var(--rose); }.priority.normal { color: var(--amber); }.priority.low { color: #7f92a6; }.detail-empty { display: grid; place-items: center; align-content: center; height: 100%; min-height: 520px; text-align: center; }.empty-glyph { color: #456078; font-size: 46px; }.detail-empty h3 { margin: 17px 0 4px; font-size: 16px; }.detail-empty p { color: #6f8094; font-size: 12px; }.detail-view { display: flex; flex-direction: column; min-height: 550px; }.detail-header { padding: 24px 25px 20px; border-bottom: 1px solid var(--line); }.detail-header h3 { margin: 9px 0; font-size: 17px; }.detail-header p { margin: 0; color: #72849a; font-size: 11px; }.detail-actions { display: flex; gap: 9px; margin-top: 18px; }.secondary-button, .danger-button { padding: 9px 12px; color: #abc0d2; background: rgba(255,255,255,.06); font-size: 11px; }.danger-button { color: #ff9aa8; background: rgba(255,113,132,.1); }.message-stack { flex: 1; padding: 24px 25px; overflow: auto; }.message { max-width: 74%; margin-bottom: 16px; }.message.admin { margin-left: auto; text-align: right; }.message-bubble { display: inline-block; padding: 11px 13px; color: #cfdce8; background: rgba(255,255,255,.07); font-size: 12px; line-height: 1.65; text-align: left; }.message.admin .message-bubble { color: var(--ink); background: var(--cyan); }.message small { display: block; margin-top: 6px; color: #5f7388; font: 9px var(--mono); }.reply-box { display: flex; gap: 9px; padding: 18px 25px; border-top: 1px solid var(--line); }.reply-box textarea { flex: 1; min-height: 46px; resize: vertical; padding: 12px; color: var(--white); background: rgba(255,255,255,.05); border: 1px solid var(--line); outline: none; font: 12px var(--sans); }.reply-box textarea:focus { border-color: rgba(94,214,255,.6); }.reply-box button { align-self: end; padding: 12px 16px; color: var(--ink); background: var(--cyan); font-size: 11px; font-weight: 700; }
.sites-grid, .settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }.site-card { padding: 21px; }.site-card-top { display: flex; justify-content: space-between; align-items: start; }.site-card h3 { margin: 0; font-size: 16px; }.site-card-domain { margin: 6px 0 25px; color: #73859a; font: 10px var(--mono); }.site-card-stat { display: flex; justify-content: space-between; padding-top: 13px; margin-top: 12px; border-top: 1px solid var(--line); color: #7890a4; font-size: 11px; }.site-card-stat strong { color: var(--white); font: 12px var(--mono); }.site-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }.connection-badge { color: var(--lime); font: 10px var(--mono); }.connection-badge.offline { color: var(--rose); }.small-button { color: #7990a5; background: transparent; font-size: 11px; }.settings-card { padding: 25px; min-height: 220px; }.settings-icon { color: var(--cyan); font-size: 23px; }.settings-card h3 { margin: 19px 0 13px; font-size: 16px; }.settings-card p { max-width: 370px; color: #8597aa; font-size: 12px; line-height: 1.7; }.settings-card strong { color: #dbe6ee; }.muted { color: #61758a !important; font: 10px var(--mono); }
.login-shell { position: relative; display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 70% 38%, #183754 0, #0a1424 35rem), var(--ink); }.login-shell::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(128,191,235,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(128,191,235,.16) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent, #000 33%, #000 70%, transparent); }.login-orbit { position: absolute; width: 690px; height: 690px; border: 1px solid rgba(94,214,255,.13); border-radius: 50%; transform: translate(28%, -8%); box-shadow: 0 0 0 48px rgba(94,214,255,.018), 0 0 0 110px rgba(94,214,255,.012); }.login-card { position: relative; width: min(420px, calc(100% - 42px)); padding: 48px 43px; border: 1px solid rgba(184,212,236,.17); background: rgba(8, 20, 36, .77); box-shadow: 0 28px 80px rgba(0,0,0,.22); backdrop-filter: blur(18px); }.login-card h1 { margin: 36px 0 17px; font-size: 42px; line-height: 1.04; letter-spacing: -.07em; }.login-card h1 em { color: var(--cyan); font-style: normal; }.login-copy { margin: 0 0 36px; color: #8091a5; font-size: 12px; line-height: 1.7; }.login-card label, .dialog label { display: grid; gap: 8px; margin-top: 16px; color: #8497a9; font: 10px var(--mono); }.login-card input, .dialog input { width: 100%; padding: 12px 13px; color: var(--white); background: rgba(255,255,255,.045); border: 1px solid var(--line); outline: none; font: 12px var(--sans); }.login-card input:focus, .dialog input:focus { border-color: rgba(94,214,255,.65); }.login-card .primary-button { width: 100%; margin-top: 25px; }.login-foot { margin-top: 31px; color: #5c7187; font: 10px var(--mono); }.login-foot span { color: var(--cyan); margin: 0 6px; }.form-error { min-height: 15px; margin: 11px 0 0; color: var(--rose); font-size: 11px; }.dialog { width: min(430px, calc(100% - 30px)); padding: 28px; color: var(--white); background: #101f33; border: 1px solid rgba(184,212,236,.2); box-shadow: 0 25px 80px rgba(0,0,0,.45); }.dialog::backdrop { background: rgba(3,9,17,.68); backdrop-filter: blur(5px); }.dialog-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }.dialog h3 { margin: 8px 0 0; font-size: 21px; }.dialog-close { color: #8da0b3; background: transparent; font-size: 25px; }.dialog .primary-button { width: 100%; margin-top: 25px; }.form-hint { margin: 14px 0 0; color: #63768c; font-size: 10px; line-height: 1.6; }.toast { position: fixed; top: 26px; right: 28px; z-index: 50; padding: 12px 15px; color: var(--ink); background: var(--cyan); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 12px; transform: translateY(-20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 1050px) { .main-shell { padding: 0 30px 50px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card-primary { grid-column: span 2; }.chart-grid { grid-template-columns: 1fr; }.sites-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .rail { width: 64px; }.brand-mark { margin: 23px 0 35px; font-size: 12px; }.rail-link { min-height: 56px; font-size: 0; }.rail-link b { right: 6px; }.rail-bottom { margin-bottom: 15px; }.user-chip span:last-child { display: none; }.main-shell { margin-left: 64px; padding: 0 16px 38px; }.topbar { height: 88px; }.topbar h2 { font-size: 15px; }.topbar-actions { gap: 10px; }.sync-state { display: none; }.page-section { padding-top: 33px; }.hero-row { display: block; }.hero-title { margin-bottom: 19px; font-size: 41px; }.hero-note { margin-bottom: 29px; }.metric-grid { display: flex; flex-direction: column; gap: 9px; }.metric-card, .metric-card-primary { min-height: 168px; }.metric-card-primary { order: -1; }.metric-value { margin-top: 15px; }.metric-foot { bottom: 19px; }.chart-panel { min-height: 325px; padding: 21px 18px 16px; }.chart-wrap { height: 214px; }.legend { max-width: 54%; gap: 7px; }.site-pulse-list { grid-template-columns: 1fr 1fr; }.section-heading { display: block; margin-bottom: 23px; }.section-heading h1 { font-size: 35px; }.section-heading .primary-button, .ticket-filter { margin-top: 20px; }.ticket-layout { grid-template-columns: 1fr; }.ticket-detail { min-height: 520px; }.sites-grid, .settings-grid { grid-template-columns: 1fr; }.login-card { padding: 37px 27px; }.login-card h1 { font-size: 37px; } }
/* Ticket workspace: keep both columns independently scrollable on desktop. */
@media (min-width: 721px) {
  .ticket-layout { height: calc(100vh - 270px); min-height: 560px; }
  .ticket-list, .ticket-detail { min-height: 0; overflow: hidden; }
  .ticket-list { overflow-y: auto; overscroll-behavior: contain; }
  .detail-view { height: 100%; min-height: 0; }
  .detail-header, .reply-box { flex: 0 0 auto; }
  .message-stack { min-height: 0; overscroll-behavior: contain; }
}
@media (max-width: 720px) {
  .ticket-layout { height: auto; min-height: 0; }
  .ticket-list { max-height: 520px; overflow-y: auto; }
  .ticket-detail { height: 520px; min-height: 520px; overflow: hidden; }
  .detail-view { height: 100%; min-height: 0; }
  .message-stack { min-height: 0; }
}
.dialog select { width: 100%; padding: 12px 13px; color: var(--white); background: rgba(255,255,255,.045); border: 1px solid var(--line); outline: none; font: 12px var(--sans); }
.dialog select:focus { border-color: rgba(94,214,255,.65); }
.conversation-loading { display: grid; place-items: center; min-height: 120px; color: #6f8094; font: 11px var(--mono); }