/* --ui-scale is driven by the display-scale slider in Settings. zoom scales
   layout and text together, which is what "scale tampilan dan teks" needs;
   viewport units are immune to it, so anything sized in vh divides it back out. */
:root{ --ui-scale:1; --bg:#06080c; --surface:#0b0f16; --surface-2:#0f151e; --border:#202937; --text:#f1f4f5; --muted:#8a939e; --soft:#c9d0d5; --green:#46d78c; --cyan:#529de8; --amber:#ffb248; --red:#ff7070; --violet:#a590ff; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:"Cascadia Mono", "JetBrains Mono", Consolas, monospace; font-size:12px; letter-spacing:-.02em; overflow-x:hidden; }
button,input{ font:inherit; } button{ cursor:pointer; } .app-shell{ display:flex; min-height:calc(100vh / var(--ui-scale,1)); zoom:var(--ui-scale,1); background:radial-gradient(ellipse at 58% 0%,#111720 0%,#070a0e 46%,#06080c 100%); }
.sidebar{ position:sticky; top:0; width:224px; height:100vh; padding:22px 14px 14px; border-right:1px solid var(--border); background:linear-gradient(180deg,#070a0e,#0a0e14); display:flex; flex-direction:column; }
.brand{ color:var(--text); text-decoration:none; display:flex; align-items:center; gap:9px; padding:0 12px 27px; font-weight:800; letter-spacing:.08em; line-height:.9; font-size:14px; } .brand em{ color:var(--cyan); font-style:normal; font-size:10px; letter-spacing:.25em; } .brand-mark{ color:var(--cyan); font-size:26px; text-shadow:0 0 24px #529de866; }
.nav-list{ display:grid; gap:5px; } .nav-item{ width:100%; border:1px solid transparent; background:transparent; color:#aab1b8; border-radius:7px; padding:11px 10px; text-align:left; display:flex; align-items:center; gap:11px; transition:.2s; } .nav-item span{ font-size:15px; width:14px; text-align:center; } .nav-item b{ margin-left:auto; color:var(--cyan); font-size:10px; } .nav-item .alert-count{ color:var(--amber); } .nav-item:hover,.nav-item.active{ color:#0e131a; background:#edf1f2; border-color:#fff; box-shadow:0 0 18px #ffffff24; } .nav-item.active span{ color:#0b5daf; }
.sidebar-bottom{ margin-top:auto; display:grid; gap:13px; }.system-card{ border:1px solid #1f2c40; border-radius:8px; background:#0b1015; padding:11px; }.system-line{ color:#8f9aa4; font-size:9px; }.status-dot,.online-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); margin-right:6px; }.system-value{ margin:7px 0 3px; color:var(--green); font-weight:700; letter-spacing:.12em; font-size:11px; }.system-meta{ font-size:9px; color:var(--muted); }.user-row{ border-top:1px solid var(--border); padding:13px 5px 0; display:flex; align-items:center; gap:8px; }.user-row strong,.user-row small{ display:block; }.user-row small{ color:var(--muted); font-size:9px; margin-top:3px; }.user-row .online-dot{ margin-left:auto; margin-right:0; }
.main-content{ flex:1; min-width:0; max-width:1800px; margin-inline:auto; padding:0 30px 38px; }.topbar{ height:78px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }.breadcrumb,.eyebrow,.panel-kicker{ margin:0; color:var(--muted); font-size:9px; letter-spacing:.12em; }.breadcrumb span{ padding:0 4px; color:#59626b; }.topbar h1{ font-size:15px; margin:7px 0 0; letter-spacing:-.05em; }.top-actions{ display:flex; align-items:center; gap:10px; }.search-box{ display:flex; align-items:center; gap:8px; width:220px; border:1px solid var(--border); background:#0e141d; border-radius:5px; padding:7px 9px; color:#82909a; }.search-box input{ background:none; border:0; outline:0; color:var(--text); width:100%; font-size:10px; }.icon-button{ position:relative; width:30px; height:30px; color:#bfc8cf; border:1px solid var(--border); background:#0f151d; border-radius:5px; }.icon-button i{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--amber); top:6px; right:6px; }.avatar{ width:31px; height:31px; display:grid; place-items:center; border-radius:5px; color:#080e14; background:linear-gradient(135deg,#e9f4ed,#5096dd); font-weight:800; font-size:10px; }.avatar-small{ width:27px; height:27px; font-size:9px; }
.overview-heading{ display:flex; justify-content:space-between; align-items:end; padding:28px 0 19px; }.overview-heading h2{ font-size:24px; margin:7px 0 5px; letter-spacing:-.08em; }.subtle{ margin:0; color:var(--muted); font-size:10px; line-height:1.55; }.period-picker{ border:1px solid var(--border); border-radius:5px; padding:3px; background:#0b0f16; }.period-picker button{ padding:6px 10px; color:var(--muted); background:none; border:0; border-radius:4px; font-size:9px; }.period-picker button.active{ color:#111; background:#e9edef; }
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.metric-card,.panel{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,#0e141d,#0a0e13); }.metric-card{ padding:15px; min-height:126px; }.metric-card p{ margin:13px 0 5px; color:var(--muted); font-size:9px; letter-spacing:.08em; }.metric-card strong{ display:block; font-size:23px; letter-spacing:-.09em; }.metric-card small{ display:block; margin-top:8px; color:var(--muted); font-size:9px; }.metric-icon{ width:25px; height:25px; border-radius:7px; display:grid; place-items:center; font-size:13px; }.green{ color:var(--green); background:#46d78c18; }.cyan{ color:var(--cyan); background:#529de819; }.amber{ color:var(--amber); background:#ffb24819; }.violet{ color:var(--violet); background:#a590ff19; }.up{ color:var(--green); }.warm{ color:var(--amber); }.scanline{ position:absolute; left:15px; right:15px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#eff7ff9c,transparent); opacity:.35; }
.dashboard-grid{ display:grid; grid-template-columns:1.65fr 1fr; gap:12px; margin-top:12px; }.panel{ padding:17px; min-height:230px; }.panel-header{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.panel-header h3{ font-size:14px; margin:5px 0 0; letter-spacing:-.06em; }.text-button{ border:0; background:transparent; color:var(--cyan); padding:2px 0; font-size:9px; }.legend{ display:flex; gap:10px; color:var(--muted); font-size:9px; }.legend-dot{ display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; }.actual{ background:#f0f3f6; box-shadow:0 0 8px #fff; }.forecast{ border:1px solid var(--cyan); }
.load-panel{ min-height:288px; }.load-title h3{ margin:6px 0 4px; font-size:25px; letter-spacing:-.1em; }.load-title h3 span{ color:#b9c2c7; font-size:12px; letter-spacing:-.04em; }.load-title h3 small{ color:#7fa5cb; font-size:10px; margin-left:7px; letter-spacing:-.03em; }.load-subtitle{ margin:0; color:#7e8993; font-size:9px; }.load-period-picker{ border:1px solid #283548; border-radius:999px; padding:3px; display:flex; background:#0f151d; }.load-period-picker button{ border:0; background:none; color:#8f9aa3; border-radius:999px; padding:6px 8px; font-size:9px; }.load-period-picker button.active{ color:#121720; background:#f0f2f1; box-shadow:0 1px 4px #0006; }.chart-scale{ position:absolute; left:17px; top:108px; height:145px; display:flex; flex-direction:column; justify-content:space-between; color:#5c6771; font-size:8px; }.wave-chart{ position:relative; height:165px; margin:17px 2px 0 31px; border-bottom:1px solid #253040; background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,#171f2c 36px); padding:0 2px; }.wave-columns{ position:absolute; inset:0 2px 20px; display:grid; grid-template-columns:repeat(56,minmax(0,1fr)); column-gap:2px; align-items:end; }.wave{ display:block; width:100%; background-image:radial-gradient(circle,#f5f7f6 1.55px,transparent 1.75px); background-size:8px 8px; background-position:center bottom; filter:drop-shadow(0 0 2px #ffffff8a); }.wave:nth-child(5n+2),.wave:nth-child(5n){ background-image:radial-gradient(circle,#78b1eb 1.45px,transparent 1.65px); }.wave-day-labels{ position:absolute; bottom:0; left:2px; right:2px; height:17px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; text-align:center; }.wave-day-labels small{ color:#9ba6ad; font-size:8px; }.h-2{height:29px}.h-3{height:42px}.h-4{height:55px}.h-5{height:68px}.h-6{height:81px}.h-7{height:94px}.h-8{height:107px}.h-9{height:120px}.h-10{height:132px}.h-11{height:143px}.chart-footer{ display:flex; justify-content:space-between; color:#7c858d; padding:13px 1px 0 31px; font-size:9px; }.pulse{ display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.reference-chart{ height:190px; margin:12px 0 0; overflow:visible; }.dot-plot{ display:block; width:100%; max-width:1240px; margin-inline:auto; height:190px; overflow:visible; }.plot-grid{ stroke:#18212f; stroke-width:.8; stroke-dasharray:2 3; }.plot-y-label,.plot-day-label{ fill:#75818a; font-family:inherit; font-size:9px; letter-spacing:.01em; }.plot-day-label{ fill:#a5afb5; font-size:9px; }.plot-dot{ fill:#f4f7f7; filter:drop-shadow(0 0 2px #ffffff75); }.plot-dot.accent{ fill:#59a1e9; filter:drop-shadow(0 0 3px #59a1e9); }
.resolution-main{ display:flex; gap:15px; align-items:center; margin:21px 0 16px; }.ascii-ring{ width:88px; height:88px; padding:5px; border-radius:50%; background:conic-gradient(var(--green) 0deg 333deg,#273345 333deg 360deg); position:relative; }.ascii-ring:before{ content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface); border:1px dashed #4d5c5d; }.ascii-ring span{ position:absolute; inset:0; display:grid; place-content:center; font-size:17px; font-weight:800; letter-spacing:-.1em; z-index:1; }.ascii-ring small{ color:var(--green); font-size:8px; margin-left:1px; }.resolution-main strong{ font-size:11px; }.progress-block{ margin-top:10px; }.progress-block div:first-child{ display:flex; justify-content:space-between; color:#aeb8bf; font-size:9px; }.progress{ margin-top:5px; height:6px; background:#1f2938; border-radius:999px; overflow:hidden; }.progress i{ display:block; height:100%; background:repeating-linear-gradient(135deg,var(--green) 0,var(--green) 3px,#248e57 3px,#248e57 5px); }.progress.muted i{ background:var(--amber); }
.badge{ color:#16120a; background:var(--amber); font-size:8px; padding:2px 5px; border-radius:9px; vertical-align:2px; }.case-list{ margin-top:12px; }.case-item{ width:100%; display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; padding:10px 0; background:none; border:0; border-bottom:1px solid #1b2431; text-align:left; color:var(--text); }.case-item:last-child{ border:0; }.case-priority{ width:6px; height:6px; border-radius:50%; }.case-priority.high{ background:var(--red); box-shadow:0 0 8px #ff7070; }.case-priority.medium{ background:var(--amber); }.case-item strong,.case-item small{ display:block; }.case-item strong{ font-size:10px; }.case-item small{ margin-top:4px; color:#75808a; font-size:8px; }.case-item em{ color:var(--amber); border:1px solid #7e5923; border-radius:3px; padding:3px 4px; font-style:normal; font-size:7px; }
.topic-list{ list-style:none; padding:2px 0 0; margin:12px 0 0; display:grid; gap:13px; }.topic-list li{ display:grid; grid-template-columns:21px 1fr 22px; gap:9px; align-items:center; }.topic-list li>span{ color:#5d6872; font-size:9px; }.topic-list strong{ font-size:10px; }.topic-list b{ color:var(--cyan); text-align:right; font-size:10px; }.micro-bar{ margin-top:6px; width:100%; height:4px; background:#1c2636; }.micro-bar i{ display:block; height:100%; background:repeating-linear-gradient(90deg,#4995e1 0,#4995e1 3px,transparent 3px,transparent 5px); }
.live-panel{ margin-top:12px; min-height:0; }.live-dot{ display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; box-shadow:0 0 10px var(--green); margin-right:5px; }.call-table{ margin-top:13px; }.table-row{ display:grid; grid-template-columns:1.15fr 1fr .65fr 1fr auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #1b2431; color:#d3dce0; font-size:10px; }.table-row:last-child{ border-bottom:0; }.table-label{ color:#73808b; font-size:8px; letter-spacing:.08em; padding-top:0; }.caller-icon{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; margin-right:7px; color:#090e14; font-size:8px; font-style:normal; background:#66d79d; }.caller-icon.secondary{ background:#67a7e8; }.caller-icon.third{ background:#bc9df3; }.mono{ color:#afb9c0; }.table-row em{ font-size:8px; font-style:normal; }.answering{ color:var(--green); }.searching{ color:var(--cyan); }.take-button{ border:1px solid #2e3d54; color:#c9d1d6; background:#111822; padding:5px 8px; border-radius:4px; font-size:8px; }.take-button:hover{ border-color:var(--cyan); color:var(--cyan); }
.screen-stage{ padding:28px 0 42px; }.screen-heading{ display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:21px; }.screen-heading h2{ font-size:25px; margin:7px 0 5px; letter-spacing:-.08em; }.primary-button,.outline-button{ border:1px solid #4c96e1; color:#070e16; background:#569ce3; border-radius:5px; padding:9px 12px; font-size:9px; box-shadow:0 0 20px #529de81c; }.outline-button{ color:#cfdbe6; background:#101722; border-color:#3d4e60; box-shadow:none; }.primary-button:hover,.outline-button:hover{ filter:brightness(1.12); }.screen-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }.screen-stat{ border:1px solid var(--border); border-radius:7px; background:linear-gradient(145deg,#0e141d,#090d13); padding:13px 15px; min-height:107px; position:relative; }.screen-stat p{ color:#7c8790; font-size:8px; letter-spacing:.1em; margin:5px 0 7px; }.screen-stat strong{ display:block; font-size:21px; letter-spacing:-.09em; }.screen-stat small{ color:#8b969d; font-size:9px; display:block; margin-top:7px; }.stat-mark{ display:block; width:6px; height:6px; border-radius:50%; box-shadow:0 0 9px currentColor; }.stat-mark.green{ color:var(--green); background:var(--green); }.stat-mark.cyan{ color:var(--cyan); background:var(--cyan); }.stat-mark.amber{ color:var(--amber); background:var(--amber); }.stat-mark.violet{ color:var(--violet); background:var(--violet); }.stat-mark.red{ color:var(--red); background:var(--red); }.two-column-screen,.knowledge-grid,.analytics-grid,.settings-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }.table-panel{ border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,#0e141d,#0a0e13); padding:17px; }.table-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.table-panel-head h3{ font-size:14px; margin:5px 0 0; letter-spacing:-.06em; }.status-pill{ border-radius:999px; padding:5px 8px; font-size:8px; }.live-pill{ color:var(--green); background:#46d78c15; border:1px solid #307c551c; }.signal{ color:var(--cyan); font-size:9px; }.live-call-cards{ margin-top:14px; }.live-call-card{ display:grid; grid-template-columns:27px 1.3fr .5fr .75fr auto; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #1c2634; }.live-call-card:last-child{ border:0; }.live-call-card div:nth-child(2) strong,.live-call-card div:nth-child(2) span{ display:block; }.live-call-card div:nth-child(2) strong{ font-size:10px; }.live-call-card div:nth-child(2) span{ color:#7f8b94; font-size:9px; margin-top:4px; }.live-call-card>b{ color:#aeb8bd; font-size:10px; }.live-call-card em{ font-size:8px; font-style:normal; }.live-call-card button,.row-action{ border:1px solid #2e3d53; border-radius:4px; color:#c8d2d6; background:#111720; padding:5px 7px; font-size:8px; }.live-call-card button:hover,.row-action:hover{ border-color:var(--cyan); color:var(--cyan); }.transcript-panel{ display:flex; flex-direction:column; }.transcript{ border:1px solid #1d2737; background:#0a0e13; border-radius:6px; margin:15px 0 13px; padding:12px; flex:1; }.transcript-line{ margin-bottom:13px; }.transcript-line:last-child{ margin-bottom:0; }.transcript-line small{ color:var(--cyan); font-size:8px; }.transcript-line.caller small{ color:var(--amber); }.transcript-line p{ color:#d5dce0; font-size:10px; line-height:1.55; margin:5px 0 0; }.filter-pills{ border:1px solid #253142; border-radius:5px; padding:2px; display:flex; }.filter-pills button{ border:0; background:transparent; color:#78858e; padding:5px 8px; font-size:8px; border-radius:3px; }.filter-pills button.active{ background:#eaf0f0; color:#0e131a; }.data-table{ margin-top:15px; }.data-row{ display:grid; grid-template-columns:1.05fr 1fr 1.5fr .45fr .7fr auto; gap:11px; align-items:center; min-height:48px; padding:8px 0; border-bottom:1px solid #1b2431; color:#d2d9dc; font-size:9px; }.data-row:last-child{ border:0; }.data-row>span:first-child b,.data-row>span:first-child small{ display:block; }.data-row>span:first-child small{ color:#72808a; font-size:8px; margin-top:3px; }.data-head{ color:#72808a; min-height:31px; font-size:8px; letter-spacing:.08em; }.data-head span:first-child{ color:#72808a; }.case-id{ color:var(--cyan); font-weight:600; }.data-row em{ font-style:normal; border-radius:3px; padding:3px 5px; font-size:7px; }.priority-high{ color:var(--red); border:1px solid #834343; }.priority-medium{ color:var(--amber); border:1px solid #7f5e2b; }.priority-low{ color:#98a5ad; border:1px solid #48535b; }.resolved,.source-live{ color:var(--green); border:1px solid #317c55; }.mono{ color:#aeb8be; }.screen-search{ display:flex; align-items:center; gap:6px; border:1px solid #243041; border-radius:4px; padding:6px 8px; color:#8c999f; }.screen-search input{ width:145px; border:0; outline:0; color:#dbe4e5; background:transparent; font-size:9px; }.knowledge-grid{ grid-template-columns:1.35fr .65fr; }.source-list .table-panel-head{ margin-bottom:8px; }.source-item{ display:grid; grid-template-columns:28px 1fr auto auto; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #1b2431; }.source-item:last-child{ border:0; }.source-item strong,.source-item small{ display:block; }.source-item strong{ font-size:9px; }.source-item small{ color:#77848d; margin-top:4px; font-size:8px; }.file-icon{ width:27px; height:27px; display:grid; place-items:center; border-radius:5px; font-size:7px; }.file-icon.pdf{ background:#ff70701c; color:var(--red); }.file-icon.faq{ background:#529de81c; color:var(--cyan); }.source-review{ color:var(--amber); border:1px solid #7f5e2b; padding:3px 5px; border-radius:3px; font-size:7px; font-style:normal; }.health-score{ margin:23px 0 22px; }.health-score strong{ font-size:35px; letter-spacing:-.1em; }.health-score span{ color:#7e8993; font-size:10px; }.health-bars>div{ display:grid; grid-template-columns:1fr auto; gap:5px; margin:13px 0; color:#adb7bd; font-size:9px; }.health-bars i{ grid-column:1 / span 2; display:block; height:5px; background:#1f2939; border-radius:9px; overflow:hidden; }.health-bars i em{ display:block; height:100%; background:var(--cyan); }.screen-period{ margin:0; }.analytics-grid{ grid-template-columns:1.25fr .75fr; }.analytics-chart{ min-height:287px; }.muted-label{ color:#73808b; font-size:8px; }.mini-bars{ height:190px; display:flex; align-items:end; gap:8px; margin:18px 5px 0; padding:0 10px; border-bottom:1px solid #242f3f; background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,#161f2c 38px); }.mini-bars i{ flex:1; max-width:22px; background:repeating-linear-gradient(135deg,var(--cyan) 0,var(--cyan) 3px,transparent 3px,transparent 6px); opacity:.9; }.mini-axis{ display:flex; justify-content:space-between; color:#7c8790; font-size:8px; padding:9px 9px 0; }.rank-list{ list-style:none; padding:5px 0 0; margin:7px 0 0; }.rank-list li{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; padding:14px 0; border-bottom:1px solid #1b2431; font-size:10px; }.rank-list li span{ color:#6d7a84; }.rank-list li b{ color:var(--cyan); }.workflow-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid #1e2939; }.workflow-toolbar h3{ font-size:13px; margin:5px 0 0; }.canvas-tools{ display:flex; align-items:center; gap:7px; color:#8f9aa2; font-size:9px; }.canvas-tools button{ width:24px; height:24px; color:#c8d0d4; background:#121924; border:1px solid #27354b; border-radius:4px; }.settings-grid{ grid-template-columns:1fr 1fr; }.settings-panel{ min-height:277px; }.setting-row{ display:flex; justify-content:space-between; gap:15px; padding:16px 0; border-bottom:1px solid #1b2431; }.setting-row strong,.setting-row small{ display:block; }.setting-row strong{ color:#d9e1e3; font-size:10px; }.setting-row small{ color:#7f8a93; font-size:8px; margin-top:5px; line-height:1.5; }.setting-row input{ accent-color:var(--cyan); width:17px; }.field-label{ display:block; color:#8b969e; font-size:9px; margin-top:15px; }.field-label select{ display:block; width:100%; margin-top:7px; color:#d6dfe2; background:#0e131b; border:1px solid #253144; border-radius:4px; padding:8px; font-size:9px; }
.toast{ position:fixed; right:25px; bottom:25px; transform:translateY(70px); opacity:0; pointer-events:none; padding:11px 13px; background:#eaeef2; color:#0e131b; border-radius:5px; font-size:10px; transition:.25s; box-shadow:0 15px 40px #0008; }.toast.visible{ transform:translateY(0); opacity:1; }.nav-item.active{ position:relative; }.nav-item.active:after{ content:""; position:absolute; right:7px; width:4px; height:4px; border-radius:50%; background:var(--green); }.workflow-toolbar{ min-width:1000px; }
@media(max-width:1050px) { .sidebar{ width:190px; }.main-content{ padding:0 20px 30px; }.metric-grid{ grid-template-columns:repeat(2,1fr); }.dashboard-grid{ grid-template-columns:1fr; }.resolution-panel,.escalation-panel,.topic-panel{ min-height:0; }.topic-panel{ grid-column:auto; }}
@media(max-width:720px) { .app-shell{ display:block; }.sidebar{ position:relative; width:100%; height:auto; padding:15px; }.brand{ padding-bottom:12px; }.nav-list{ grid-template-columns:repeat(2,1fr); }.sidebar-bottom{ display:none; }.main-content{ width:100%; padding:0 14px 24px; }.topbar{ height:auto; padding:17px 0; gap:14px; }.search-box{ display:none; }.overview-heading{ align-items:flex-start; gap:15px; }.period-picker{ white-space:nowrap; }.metric-grid{ grid-template-columns:1fr 1fr; gap:8px; }.metric-card{ min-height:112px; padding:12px; }.metric-card strong{ font-size:20px; }.table-row{ grid-template-columns:1fr 1fr auto; }.table-row>span:nth-child(3),.table-row>span:nth-child(4),.table-label>span:nth-child(3),.table-label>span:nth-child(4){ display:none; }.chart-footer{ padding-left:0; }.chart-scale{ display:none; }.wave-chart{ margin-left:0; }.wave-columns{ column-gap:1px; }.wave{ background-size:5px 8px; } .wave-day-labels small{ font-size:7px; } .load-title h3 small{ display:block; margin:3px 0 0; }}

/* Keep the live chart glow while avoiding a full blur filter on every dot. */
.plot-dot{ filter:drop-shadow(0 0 1px #ffffff45); }
.dot-plot{ contain:layout paint; }

/* Smooth operational motion: animated dot-wave, soft entrances, and live-state cues. */
@keyframes dotWave {
  0%,100% { transform:scale(.92); opacity:.72; }
  50% { transform:scale(1.16); opacity:1; }
}
@keyframes accentPulse {
  0%,100% { opacity:.75; filter:drop-shadow(0 0 2px #59a1e9); }
  50% { opacity:1; filter:drop-shadow(0 0 7px #59a1e9); }
}
@keyframes surfaceEnter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes scanSweep {
  0% { transform:translateX(-120%); opacity:0; }
  18%,72% { opacity:.65; }
  100% { transform:translateX(120%); opacity:0; }
}
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 0 #46d78c00; }
  50% { box-shadow:0 0 0 5px #46d78c15; }
}
@keyframes ringBreathe {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 0 #46d78c00); }
  50% { transform:scale(1.035); filter:drop-shadow(0 0 9px #46d78c3d); }
}
@keyframes barReveal {
  from { transform:scaleX(0); opacity:.35; }
  to { transform:scaleX(1); opacity:1; }
}
@keyframes liveRow {
  0%,100% { background-color:transparent; }
  50% { background-color:#529de806; }
}

.plot-dot{
  transform-box:fill-box;
  transform-origin:center;
  animation:none;
}
.plot-dot.accent{ animation:none; filter:drop-shadow(0 0 4px #59a1e9); }
.metric-card,.panel,.table-panel,.screen-stat{
  animation:surfaceEnter .55s cubic-bezier(.2,.75,.25,1) both;
}
.metric-card:nth-child(2),.screen-stats>*:nth-child(2){ animation-delay:.06s; }
.metric-card:nth-child(3),.screen-stats>*:nth-child(3){ animation-delay:.12s; }
.metric-card:nth-child(4),.screen-stats>*:nth-child(4){ animation-delay:.18s; }
.metric-card,.table-panel,.screen-stat{ transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.metric-card:hover,.table-panel:hover,.screen-stat:hover{ transform:translateY(-3px); border-color:#3c6996; box-shadow:0 14px 32px #0008,0 0 20px #529de80d; }
.metric-icon,.stat-mark{ animation:livePulse 2.8s ease-in-out infinite; }
.scanline{ overflow:hidden; }
.scanline::before{ content:""; display:block; width:35%; height:100%; background:#dfefff; filter:blur(1px); animation:scanSweep 4.2s ease-in-out infinite; }
.live-pill{ animation:livePulse 2.4s ease-in-out infinite; }
.status-dot,.online-dot{ animation:livePulse 2.1s ease-in-out infinite; }
.ascii-ring{ animation:ringBreathe 3.8s ease-in-out infinite; }
.progress i,.micro-bar i{ transform:scaleX(0); transform-origin:left center; animation:barReveal 1.15s cubic-bezier(.18,.75,.24,1) .3s both; }
.progress-block + .progress-block .progress i{ animation-delay:.46s; }
.topic-list li:nth-child(2) .micro-bar i{ animation-delay:.42s; }
.topic-list li:nth-child(3) .micro-bar i{ animation-delay:.54s; }
.live-panel .table-row:not(.table-label){ animation:liveRow 3.6s ease-in-out infinite; }
.live-panel .table-row:nth-child(3){ animation-delay:1.2s; }
.live-panel .table-row:nth-child(4){ animation-delay:2.4s; }
.primary-button,.outline-button{ transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; }
.primary-button:hover,.outline-button:hover{ transform:translateY(-2px); box-shadow:0 8px 22px #529de826; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }}
@media(max-width:1050px) {.two-column-screen,.knowledge-grid,.analytics-grid,.settings-grid{ grid-template-columns:1fr; }.data-row{ min-width:760px; }.table-panel:has(.data-table){ overflow-x:auto; }}

/* ── Virtual Office ─────────────────────────────────────────────────────────
   The pixel-art call-centre floor. Sprite credits: app/static/assets/office/ATTRIBUTION.md */
.office-mount{ min-height:520px; }
.office-layout{ display:grid; grid-template-columns:1fr 268px; gap:12px; align-items:start; }
.office-stage-panel{ border:1px solid var(--border); border-radius:8px; background:#090c11; overflow:hidden; min-width:0; }
.workflow-toolbar{ min-width:0; }
.office-tools{ flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.tool-group{ display:flex; align-items:center; gap:4px; border:1px solid #253142; border-radius:5px; padding:2px; }
.tool-group button{ width:auto; min-width:24px; height:24px; padding:0 7px; border:0; background:transparent; color:#8a949c; font-size:8px; border-radius:3px; }
.tool-group button:hover{ color:var(--cyan); }
.tool-group button.active{ background:#eaf0f0; color:#0e131a; }
.office-scale{ min-width:26px; text-align:center; color:#aeb8be; font-size:9px; }
.office-tools .outline-button{ padding:6px 9px; }
.office-tools .outline-button.active{ border-color:var(--amber); color:var(--amber); }

/* The 36x17 room needs 1152x576 device pixels to draw at 2x. The floor is 576
   art pixels tall, so the minimum height is set to keep that whole scale rather
   than let a short viewport drop the office to an unreadable 1x. */
.office-canvas-wrap{ position:relative; height:calc(clamp(576px,62vh,860px) / var(--ui-scale,1)); background:#06080c; border-bottom:1px solid #17202e; touch-action:none; }
#office-canvas{ display:block; width:100%; height:100%; image-rendering:pixelated; cursor:grab; }

.office-hud{ position:absolute; top:12px; left:12px; display:flex; gap:8px; pointer-events:none; }
.office-clock,.office-shift-box{ border:1px solid #1f2c3f; border-radius:6px; background:#0a0e15e8; padding:7px 10px; }
.office-clock strong{ display:block; font-size:16px; letter-spacing:-.06em; }
.office-clock small{ display:block; margin-top:3px; color:#7f8b93; font-size:8px; }
.office-sim-note{ color:var(--amber)!important; letter-spacing:.06em; }
.office-shift-box{ display:flex; flex-direction:column; justify-content:center; }
.office-shift{ font-style:normal; font-size:9px; letter-spacing:.08em; }
.office-shift.on{ color:var(--green); }
.office-shift.off{ color:var(--amber); }
.office-shift-box small{ margin-top:4px; color:#7f8b93; font-size:8px; }

.office-metrics{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:#17202e; }
.office-chip{ background:linear-gradient(145deg,#0e141d,#090d13); padding:11px 13px; }
.office-chip p{ margin:5px 0 6px; color:#7c8790; font-size:8px; letter-spacing:.1em; }
.office-chip strong{ display:block; font-size:17px; letter-spacing:-.08em; }
.office-chip small{ display:block; margin-top:5px; color:#8b969d; font-size:8px; }

.office-side{ display:grid; gap:12px; }
.office-side .table-panel{ padding:14px; }
.office-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #19222f; font-size:9px; color:#8b969e; }
.office-row:last-child{ border-bottom:0; }
.office-row b{ color:#dbe3e6; font-weight:600; text-align:right; }
.office-row em{ font-style:normal; font-size:7px; padding:3px 5px; border-radius:3px; }
.office-detail-panel #office-detail{ margin-top:10px; }
.office-transcript{ margin:12px 0 0; padding:10px; }
.office-transcript .transcript-line{ margin-bottom:9px; }
.office-transcript p{ font-size:9px; }
.office-hint{ margin:10px 0 0; font-size:9px; line-height:1.6; }

.office-legend{ display:grid; gap:7px; margin:12px 0; padding:11px; border:1px solid #19222f; border-radius:6px; background:#0a0e13; color:#8b969e; font-size:8px; line-height:1.5; }
.legend-dot{ display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.legend-dot.ai{ background:var(--cyan); box-shadow:0 0 8px #529de866; }
.legend-dot.human{ background:var(--amber); box-shadow:0 0 8px #ffb24866; }
.legend-dot.inbox{ background:#e8dcc6; }

.office-queue-panel .case-list{ margin-top:10px; }
.office-case{ width:100%; }
.office-log{ margin-top:10px; display:grid; gap:1px; }
.office-log-line{ display:grid; grid-template-columns:38px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid #161e2a; font-size:9px; }
.office-log-line:last-child{ border-bottom:0; }
.office-log-line span{ color:#66727b; font-size:8px; }
.office-log-line p{ margin:0; color:#b9c3c8; line-height:1.45; }
.office-log-line.escalated p{ color:var(--amber); }
.office-log-line.closed p{ color:var(--green); }
.office-log-line.shift p{ color:var(--cyan); }
.off-pill{ color:var(--amber); background:#ffb2480f; border:1px solid #7f5e2b40; }

.office-editor-bar{ position:absolute; left:12px; right:12px; bottom:12px; display:grid; gap:7px; padding:11px 12px; border:1px solid #313e51; border-radius:7px; background:#0a0e15f2; backdrop-filter:blur(2px); }
/* `display:grid` above outranks the UA rule for [hidden], so restate it. */
.office-editor-bar[hidden],.editor-row[hidden]{ display:none; }
.editor-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.editor-label{ min-width:62px; color:#7f8b93; font-size:8px; letter-spacing:.1em; }
.editor-palette-row{ align-items:flex-start; }
/* One scrolling strip of real sprite swatches: picking furniture from a text
   dropdown meant reading names for things you can simply look at. */
.editor-palette{ flex:1; min-width:0; display:flex; gap:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.editor-palette::-webkit-scrollbar{ height:6px; }
.editor-palette::-webkit-scrollbar-thumb{ background:#27354b; border-radius:3px; }
.palette-group{ display:grid; gap:5px; }
.palette-heading{ color:#66727b; font-size:7px; letter-spacing:.12em; }
.palette-items{ display:flex; gap:5px; }
.palette-item{ width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid #253142; border-radius:5px; background:#0e131b; }
.palette-item canvas{ image-rendering:pixelated; }
.palette-item:hover{ border-color:var(--cyan); background:#131c26; }
.palette-item.active{ border-color:var(--amber); background:#0f151e; box-shadow:0 0 0 1px #ffb24840; }
.editor-actions{ justify-content:space-between; }
.editor-actions .outline-button{ padding:5px 9px; }
.editor-status{ font-size:8px; }
.editor-status.ok{ color:var(--green); }
.editor-status.warn{ color:var(--amber); }

/* Below ~1700px the side panel costs the canvas the 1152px it needs for a 2x
   floor, so it moves under the office rather than beside it. */
@media(max-width:1700px) {.office-layout{ grid-template-columns:1fr; }.office-side{ grid-template-columns:repeat(3,1fr); }}
@media(max-width:1050px) {.office-side{ grid-template-columns:1fr; }.office-metrics{ grid-template-columns:repeat(2,1fr); }.office-canvas-wrap{ height:calc(clamp(360px,52vh,520px) / var(--ui-scale,1)); }}
/* Display-scale control (Settings → Skala tampilan) */
.display-scale-panel .subtle{ margin:14px 0 4px; }
.scale-slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:18px 0 8px; border-radius:999px; background:#232f42; outline:0; }
.scale-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%; background:var(--cyan); border:2px solid #0a0e13; box-shadow:0 0 12px #529de8aa; cursor:pointer; }
.scale-slider::-moz-range-thumb{ width:15px; height:15px; border:2px solid #0a0e13; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px #529de8aa; cursor:pointer; }
.scale-ticks{ display:flex; justify-content:space-between; color:#72808a; font-size:8px; }
.scale-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.scale-presets button{ border:1px solid #2e3d53; border-radius:4px; color:#c8d2d6; background:#111720; padding:6px 9px; font-size:8px; }
.scale-presets button:hover{ border-color:var(--cyan); color:var(--cyan); }

.outline-button.icon-only{ width:30px; padding:9px 0; text-align:center; }

/* Licence credit under the office floor. Small, but it has to be on the page:
   the Modern Interiors licence requires a visible link back to the author. */
.office-credit {
  margin: 10px 2px 0;
  font-size: 11px;
  line-height: 1.5;
}

.office-credit a {
  color: var(--accent-cyan, #529de8);
}