/* dlnhack26 — design tokens, layout and UI components */
:root {
  color-scheme:dark;
  --bg:#0d0f14; --sidebar:#11141b; --surface:#171b24; --surface-raised:#1b202b;
  --surface-hover:#222635; --input:#12161e; --border:#262b36; --border-soft:#202530;
  --text:#f1f3f8; --muted:#9299aa; --subtle:#798295;
  --accent:#8b7cf6; --accent-hover:#9b8dfb; --accent-soft:#8b7cf614; --accent-text:#b5aafa; --on-accent:#11131b;
  --success:#78c9aa; --success-soft:#78c9aa0d; --warning:#d5b17b; --warning-soft:#d5b17b0d;
  --danger:#e398a4; --danger-soft:#e398a40d;
  --radius:10px; --radius-sm:8px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  /* Existing components share these aliases. */
  --mint:var(--accent); --mint-deep:var(--accent-soft); --line:var(--border); --line-soft:var(--border-soft);
  --brand:var(--accent); --brand-soft:var(--accent-soft); --brand-ink:var(--accent-text); --red:var(--danger);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; font-synthesis:none;
}
:root[data-theme="light"] {
  color-scheme:light; --bg:#f7f8fa; --sidebar:#ffffff; --surface:#ffffff; --surface-raised:#f7f8fb;
  --surface-hover:#eef0f5; --input:#ffffff; --border:#e2e5eb; --border-soft:#edf0f4;
  --text:#242834; --muted:#646d7e; --subtle:#747e8f;
  --accent:#6656cf; --accent-hover:#5848bd; --accent-soft:#6656cf0c; --accent-text:#6050c6; --on-accent:#fff;
  --success:#317d65; --success-soft:#317d6508; --warning:#906b36; --warning-soft:#906b3608;
  --danger:#ae4f60; --danger-soft:#ae4f6008;
}
* { box-sizing:border-box; } [hidden] { display:none!important; }
html { scroll-padding-top:24px; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:var(--bg); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-text); } button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; } button:disabled { color:var(--subtle); opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button,a,input,select { transition:background-color .16s,border-color .16s,color .16s; }
.icon { display:block; width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm { width:16px; height:16px; }.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }
.skip-link { position:fixed; left:252px; top:10px; transform:translateY(-150%); z-index:30; background:var(--surface); border:1px solid var(--accent); border-radius:8px; padding:10px 15px; }.skip-link:focus { transform:none; }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:240px; padding:28px 16px 16px; display:flex; flex-direction:column; background:var(--sidebar); border-right:1px solid var(--border); z-index:10; }
.sidebar-brand,.brand { display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; }.sidebar-brand { padding:0 12px; }.brand-mark { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--accent); color:var(--on-accent); border-radius:9px; font-size:21px; letter-spacing:-1.4px; font-weight:800; flex-shrink:0; }.brand-mark span { font-size:10px; letter-spacing:-.4px; }.brand-name { margin:0; font-size:18px; letter-spacing:-.5px; font-weight:650; line-height:1.3; }.brand-number { color:var(--muted); }.brand-caption { margin:4px 0 0; color:var(--muted); font-size:12px; }.nav-label { margin:34px 12px 10px; color:var(--muted); font-size:12px; font-weight:500; }
.side-nav { display:grid; gap:4px; }.side-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--muted); font-size:14px; font-weight:450; }.side-nav a:hover { background:var(--surface-hover); color:var(--text); }.side-nav a.selected { color:var(--accent-text); background:var(--accent-soft); }.side-nav .icon { width:18px; height:18px; }.sidebar-bottom { margin-top:auto; padding-top:32px; }.sidebar-help { display:flex; align-items:center; gap:10px; padding:12px; color:var(--muted); text-decoration:none; font-size:13px; border-bottom:1px solid var(--border); margin-bottom:12px; }.sidebar-help:hover { color:var(--text); }.sidebar-help .external { margin-left:auto; width:14px; height:14px; }
.user-zone { display:flex; gap:10px; align-items:center; padding:10px 12px; }.user-avatar { display:grid; place-items:center; width:32px; height:32px; color:var(--muted); background:var(--surface-raised); border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; }.user-zone strong { display:block; font-size:13px; font-weight:550; }.user-zone small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.shell { margin-left:240px; padding:0 32px 40px; max-width:1660px; }.masthead { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; border-bottom:1px solid var(--border); }.masthead>.brand { display:none; }.breadcrumb { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }.breadcrumb strong { color:var(--text); font-weight:450; }.breadcrumb .separator { color:var(--subtle); }.header-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.header-divider { width:1px; height:20px; background:var(--border); margin:0 4px; }
.refresh,.reconnect-button,.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:36px; padding:7px 12px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap; }
.refresh:hover:not(:disabled),.reconnect-button:hover:not(:disabled),.btn:hover { background:var(--surface-hover); border-color:var(--subtle); }.btn-primary,#pairingButton,#saveCommand { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }.btn-primary:hover,#pairingButton:hover:not(:disabled),#saveCommand:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); }.icon-button { width:36px; padding:8px; }.btn-ghost { background:transparent; border-color:transparent; color:var(--muted); }.btn-ghost:hover:not(:disabled) { border-color:transparent; color:var(--text); }.theme-toggle [data-theme-label] { display:none; }.theme-toggle .icon { width:17px; height:17px; }.theme-toggle { width:36px; padding:8px; }.mobile-help { display:none; }.reconnect-icon,.refresh-icon { display:inline-flex; }
.connection-badge { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:6px 0; white-space:nowrap; }.connection-dot { width:6px; height:6px; border-radius:50%; background:var(--muted); }.connection-badge.connected { color:var(--success); }.connected .connection-dot { background:var(--success); }.connection-badge.connecting,.connection-badge.reconnecting { color:var(--warning); }.connecting .connection-dot,.reconnecting .connection-dot { background:var(--warning); }.connection-badge.logged_out,.connection-badge.offline,.connection-badge.disconnected,.connection-badge.error { color:var(--danger); }.logged_out .connection-dot,.offline .connection-dot,.disconnected .connection-dot,.error .connection-dot { background:var(--danger); }
.section-nav { display:none; }.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0 24px; }.hero h1 { font-size:30px; font-weight:600; letter-spacing:-.85px; line-height:1.25; margin:0; }.hero .intro { color:var(--muted); font-size:14px; margin:8px 0 0; }.hero-actions { display:flex; align-items:center; gap:16px; }.updated { font-size:12px; color:var(--muted); text-align:right; }.eyebrow { font-size:12px; color:var(--muted); font-weight:500; margin:0 0 8px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 18px; }.stat { position:relative; min-width:0; min-height:130px; padding:18px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }.stat-label { color:var(--muted); font-size:13px; font-weight:450; margin:0; padding-right:22px; }.stat-value { font-size:30px; line-height:1.2; font-weight:600; letter-spacing:-.8px; font-variant-numeric:tabular-nums; margin:12px 0 4px; }.stat-note { font-size:12px; color:var(--muted); margin:0; line-height:1.6; }.stat-icon { position:absolute; top:19px; right:18px; color:var(--muted); }.stat-icon .icon { width:17px; height:17px; }
.state-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 24px; }.state-label { font-size:12px; color:var(--muted); margin-right:4px; }.pill { display:inline-flex; align-items:center; gap:7px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--muted); background:var(--surface); }.pill:before { content:""; width:5px; height:5px; border-radius:50%; background:var(--subtle); }.pill.on { color:var(--success); }.pill.on:before { background:var(--success); }
.notice { display:flex; align-items:center; gap:12px; padding:12px 14px; margin:0 0 20px; color:var(--warning); background:var(--warning-soft); border:1px solid var(--border); border-radius:8px; }.notice .icon { width:17px; height:17px; }.notice p { font-size:13px; margin:0; flex:1; }.notice a { font-size:13px; color:inherit; white-space:nowrap; }.error-notice { color:var(--danger); background:var(--danger-soft); }.error-notice .btn-ghost { color:inherit; }
.workspace { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }.archives-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 20px 16px; }.archives-heading h2 { font-size:19px; font-weight:550; letter-spacing:-.35px; margin:0; }.archives-heading p { color:var(--muted); font-size:13px; margin:5px 0 0; }.archive-exports { display:flex; gap:8px; }.archive-exports .icon { width:15px; height:15px; }.archive-exports .refresh { min-height:32px; padding:5px 10px; font-size:12px; background:transparent; }
.toolbar { display:flex; align-items:center; gap:20px; padding:0 20px 16px; border-bottom:1px solid var(--border); }.tabs { display:inline-flex; gap:2px; padding:3px; background:var(--input); border:1px solid var(--border); border-radius:8px; }.tab { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:32px; border:1px solid transparent; border-radius:6px; padding:5px 11px; color:var(--muted); background:transparent; font-size:13px; white-space:nowrap; }.tab:hover { color:var(--text); }.tab.active { color:var(--text); border-color:var(--border); background:var(--surface-raised); }.tab-count { min-width:19px; padding:0 5px; border-radius:4px; color:var(--muted); background:var(--surface-hover); text-align:center; font-size:11px; font-variant-numeric:tabular-nums; }.search-wrap { position:relative; flex:1; min-width:160px; }.search-icon { position:absolute; top:50%; left:11px; transform:translateY(-50%); color:var(--muted); }.search-icon .icon { width:16px; height:16px; }.search { width:100%; min-height:38px; padding:8px 12px 8px 35px; color:var(--text); background:var(--input); border:1px solid var(--border); border-radius:8px; font-size:13px; }.search::placeholder { color:var(--subtle); }
.filters-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid var(--border); }.filter-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; white-space:nowrap; }.filter-select { min-height:32px; max-width:100%; padding:5px 8px; color:var(--text); background:var(--input); border:1px solid var(--border); border-radius:6px; font-size:12px; }.date-filter { max-width:150px; }.filter-options { display:flex; align-items:center; gap:16px; flex-wrap:wrap; width:100%; }.toggle-label { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; cursor:pointer; }.toggle-label input { width:14px; height:14px; margin:0; accent-color:var(--accent); }.toggle-label.auto { margin-left:auto; }#clearFilters { min-height:28px; font-size:12px; padding:4px 7px; }.list-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px 4px; }.list-title { font-size:13px; font-weight:500; margin:0; }.list-hint { font-size:12px; color:var(--muted); margin:0; text-align:right; }.list { display:grid; gap:10px; padding:14px 16px 16px; }
.empty { display:flex; align-items:center; flex-direction:column; gap:10px; padding:36px 20px; text-align:center; border-radius:8px; color:var(--muted); background:var(--input); border:1px solid var(--border-soft); }.empty-mark { display:grid; place-items:center; width:38px; height:38px; color:var(--muted); margin-bottom:2px; }.empty-mark .icon { width:26px; height:26px; stroke-width:1.5; }.empty strong { font-size:14px; color:var(--text); font-weight:500; }.empty>span:last-of-type { max-width:460px; font-size:13px; line-height:1.7; }.empty .btn { margin-top:6px; min-height:32px; font-size:12px; }
.card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:18px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }.card:hover { border-color:var(--subtle); }.card-main { min-width:0; }.card-top { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }.badge { display:inline-flex; padding:3px 7px; border:1px solid var(--border); border-radius:5px; color:var(--muted); font-size:11px; background:var(--surface-raised); }.badge.deleted { color:var(--warning); }.sender { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; min-width:0; }.avatar { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border-radius:7px; background:var(--surface-hover); color:var(--muted); font-size:11px; }.sender-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.time { color:var(--muted); font-size:12px; }.source { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; color:var(--muted); }.source .icon { width:14px; height:14px; }.body { margin:12px 0 0; font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }.unavailable { color:var(--warning); }.card-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }.card-actions .refresh { min-height:30px; padding:4px 8px; font-size:12px; color:var(--muted); background:transparent; border-color:transparent; }.card-actions .refresh:hover { color:var(--text); background:var(--surface-hover); }.card-actions .icon { width:14px; height:14px; }.media { align-self:center; max-width:min(280px,28vw); max-height:220px; border:1px solid var(--border); border-radius:8px; background:var(--input); }.media.audio { width:260px; max-width:100%; height:42px; border:0; background:transparent; }.file { display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:13px; text-decoration:none; }.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }.pager-controls { display:flex; gap:8px; align-items:center; }.pager .refresh { min-height:30px; padding:4px 8px; font-size:12px; }.footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:12px; padding:14px 20px; border-top:1px solid var(--border-soft); }
.command-settings { display:grid; grid-template-columns:1fr 1.15fr; gap:24px 32px; padding:24px; margin-top:24px; }.command-settings h2 { font-size:19px; font-weight:550; letter-spacing:-.3px; margin:0; }.command-settings .intro { max-width:440px; font-size:13px; color:var(--muted); margin:9px 0 0; line-height:1.75; }.command-current { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); margin-top:14px; }.command-current code { color:var(--text); font-size:12px; font-family:ui-monospace,monospace; background:var(--input); padding:2px 7px; border:1px solid var(--border); border-radius:5px; }.command-settings label { display:block; font-size:13px; font-weight:500; margin-bottom:8px; }.command-input-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.command-input-row input { flex:1 1 130px; width:100px; padding-left:12px; font-family:ui-monospace,monospace; }.command-settings .stat-note { font-size:12px; line-height:1.7; margin-top:9px; }.command-settings>p { grid-column:1/-1; padding-top:16px; border-top:1px solid var(--border); margin:0; }.command-example { font-size:12px; line-height:1.7; color:var(--muted); margin:10px 0 0; }#commandStatus { min-height:20px; color:var(--muted); font-size:12px; margin:6px 0 0; }#commandStatus[data-state=success] { color:var(--success); }#commandStatus[data-state=error] { color:var(--danger); }
.is-loading .refresh-icon .icon,.loading-indicator .icon { animation:spin 1s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }.loading-indicator { display:flex; align-items:center; justify-content:center; gap:10px; min-height:180px; font-size:13px; color:var(--muted); }.loading-indicator .icon { width:17px; height:17px; }
body:not(:has(.app-sidebar)) .shell { width:min(1080px,100% - 48px); margin:0 auto; padding:0 0 40px; }body:not(:has(.app-sidebar)) .masthead>.brand { display:flex; }body:not(:has(.app-sidebar)) h1 { font-size:30px; letter-spacing:-.7px; line-height:1.3; margin:0; }body:not(:has(.app-sidebar)) .hero { padding:28px 0; }body:not(:has(.app-sidebar)) .intro { font-size:14px; color:var(--muted); margin:10px 0 0; max-width:620px; }
.login-page { display:flex; flex-direction:column; min-height:100vh; padding:0 32px; }.login-header { display:flex; align-items:center; justify-content:space-between; width:min(1120px,100%); margin:0 auto; padding:25px 0; }.login-header .sidebar-brand { padding:0; }.login-layout { display:flex; justify-content:center; align-items:center; flex:1; padding:32px 0 56px; }.login-card { width:min(420px,100%); padding:32px; }.login-card .login-lock { display:flex; align-items:center; color:var(--muted); margin-bottom:20px; }.login-card .login-lock .icon { width:23px; height:23px; }.login-card h1 { margin:0 0 8px; font-size:28px; letter-spacing:-.6px; font-weight:550; }.login-card>p { color:var(--muted); font-size:14px; margin:0; }.login-card label { display:block; margin:26px 0 9px; font-size:13px; font-weight:500; }.login-card .search { min-height:42px; padding-left:12px; font-size:14px; }.login-card button[type=submit] { width:100%; margin-top:14px; min-height:40px; }.login-card .err { min-height:20px; font-size:13px; color:var(--danger); margin:10px 0 0; }.login-card .hint { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); line-height:1.75; }.login-footer { width:min(1120px,100%); margin:0 auto; display:flex; gap:16px; justify-content:space-between; padding-bottom:24px; color:var(--muted); font-size:12px; }
.guide-layout { display:grid; grid-template-columns:215px minmax(0,1fr); align-items:start; gap:24px; }.guide-nav { position:sticky; top:24px; display:grid; gap:4px; padding:12px; }.guide-nav a { padding:8px 10px; color:var(--muted); font-size:13px; text-decoration:none; border-radius:6px; }.guide-nav a:hover { color:var(--text); background:var(--surface-hover); }.guide-content { display:grid; gap:20px; }.guide-section { padding:24px; scroll-margin-top:24px; }.guide-section h2 { font-size:19px; font-weight:550; margin:0 0 14px; letter-spacing:-.3px; }.guide-section h3 { font-size:15px; font-weight:550; margin:20px 0 8px; }.guide-section p,.guide-section li { color:var(--muted); font-size:14px; line-height:1.8; }.guide-section li { margin:8px 0; }.guide-section strong { color:var(--text); font-weight:500; }.guide-section code { color:var(--text); background:var(--input); border:1px solid var(--border); border-radius:5px; padding:2px 5px; font-size:12px; overflow-wrap:anywhere; }.table-wrap { overflow-x:auto; }table { width:100%; border-collapse:collapse; text-align:left; }th,td { padding:12px 8px; border-bottom:1px solid var(--border); font-size:13px; }th { font-weight:500; }td { color:var(--muted); }.guide-section details { padding:14px 0; border-bottom:1px solid var(--border); }.guide-section summary { cursor:pointer; font-size:14px; font-weight:500; }.step-label { color:var(--muted); font-size:12px; font-weight:500; margin:0 0 8px; }
@media(min-width:1660px) { .shell { max-width:1380px; margin-left:calc(240px + (100vw - 1620px)/2); } }
@media(max-width:1200px) and (min-width:981px) { .shell { padding-inline:24px; }.hero { align-items:flex-start; }.hero-actions { align-items:flex-end; flex-direction:column; gap:8px; }.stat { padding:16px; }.stat-label { font-size:12px; }.stat-icon { right:14px; top:17px; }.stat-note { font-size:12px; }.command-settings { grid-template-columns:1fr; }.breadcrumb { display:none; }.masthead { justify-content:flex-end; }.toolbar { flex-wrap:wrap; gap:12px; }.search-wrap { min-width:220px; }.header-divider { display:none; } }
@media(max-width:980px) { .app-sidebar { display:none; }.shell { margin:0; padding:0 24px 32px; }.masthead>.brand { display:flex; }.breadcrumb { display:none; }.masthead { min-height:78px; padding-block:18px; flex-wrap:wrap; }.header-controls { gap:6px; }.mobile-help { display:inline-flex; }.section-nav { display:flex; gap:24px; border-bottom:1px solid var(--border); overflow-x:auto; overflow-y:hidden; }.section-nav a { display:block; white-space:nowrap; padding:12px 0; border-bottom:2px solid transparent; color:var(--muted); text-decoration:none; font-size:13px; }.section-nav a.selected { color:var(--text); border-bottom-color:var(--accent); }.hero { padding:24px 0; }.hero-actions { align-items:flex-end; flex-direction:column; gap:8px; }.command-settings { grid-template-columns:1fr; }.skip-link { left:20px; } }
@media(max-width:720px) { .shell { padding:0 16px 28px; }.masthead { gap:16px; padding-block:18px; }.header-controls { width:100%; display:grid; grid-template-columns:32px 32px 32px minmax(0,1fr) 32px; gap:8px; align-items:center; }.header-controls .connection-badge { grid-column:1/-1; margin:0; }#pairingButton { justify-self:end; }.header-divider { display:none; }.connection-badge { font-size:11px; }.header-controls .icon-button,.header-controls .theme-toggle { width:32px; min-height:32px; padding:6px; }#pairingButton { min-height:32px; padding:5px 9px; font-size:12px; }#pairingButton .icon { width:15px; height:15px; }.hero { flex-direction:column; align-items:flex-start; gap:16px; padding:24px 0 20px; }.hero h1 { font-size:28px; }.hero .intro { font-size:13px; line-height:1.7; }.hero-actions { flex-direction:row; align-items:center; justify-content:space-between; width:100%; }.updated { text-align:left; font-size:12px; }.stats { grid-template-columns:1fr 1fr; gap:12px; }.stat { padding:16px; min-height:132px; }.stat-label { font-size:12px; }.stat-value { font-size:28px; }.stat-note { font-size:12px; line-height:1.5; }.stat-icon { top:16px; right:13px; }.stat-icon .icon { width:15px; height:15px; }.state-row { gap:6px; }.state-label { flex-basis:100%; margin-bottom:2px; }.pill { font-size:11px; }.notice { flex-wrap:wrap; gap:8px; }.notice p { flex-basis:calc(100% - 30px); }.notice a { margin-left:27px; }.archives-heading { padding:18px 16px 14px; align-items:flex-start; gap:12px; }.archives-heading p { font-size:12px; }.archive-exports { margin-left:auto; }.toolbar { padding:0 16px 14px; flex-wrap:wrap; gap:12px; }.tabs { width:100%; }.tab { flex:1; padding-inline:8px; font-size:12px; }.search-wrap { flex-basis:100%; }.filters-row { padding:14px 16px; gap:10px 12px; }.filter-label { flex:1 1 130px; justify-content:space-between; }.filter-select { min-width:0; flex:1; }.date-filter { max-width:none; }.filter-options { gap:12px; }.toggle-label.auto { margin-left:0; }#clearFilters { margin-left:auto; }.list-head { flex-direction:column; align-items:flex-start; gap:4px; padding-inline:16px; }.list-hint { text-align:left; font-size:12px; }.list { padding:12px; }.empty { padding:28px 14px; }.empty>span:last-of-type { font-size:13px; }.card { grid-template-columns:1fr; padding:16px; gap:16px; }.media { max-width:100%; width:100%; }.card-top { gap:8px; }.time { font-size:12px; }.pager { padding:12px 16px; gap:14px; }.pager>.filter-label { flex:0 1 auto; }.pager-controls { margin-left:auto; }.pager .icon-button { width:30px; }.footer { padding:12px 16px; font-size:11px; }.command-settings { padding:20px 16px; gap:20px; }.command-input-row input { flex-basis:100%; }.command-settings>p { font-size:12px; }.login-page { padding:0 20px; }.login-header { padding:22px 0; }.login-layout { padding:28px 0 45px; }.login-card { padding:25px; }.login-card h1 { font-size:26px; }.login-footer { font-size:11px; flex-wrap:wrap; }body:not(:has(.app-sidebar)) .shell { width:calc(100% - 32px); }.guide-layout { grid-template-columns:1fr; gap:16px; }.guide-nav { position:static; display:flex; flex-wrap:wrap; padding:8px; gap:3px; }.guide-nav a { font-size:12px; padding:6px 8px; }.guide-section { padding:20px; }.guide-section p,.guide-section li { font-size:14px; }.guide-content { gap:16px; } }
@media(max-width:380px) { .shell { padding-inline:12px; }.header-controls { gap:4px; }.connection-badge { font-size:10px; }#pairingButton { padding-inline:7px; font-size:11px; }.stat { padding:14px; }.stat-label { font-size:12px; padding-right:18px; }.stat-icon { right:11px; top:15px; }.stat-icon .icon { width:13px; height:13px; }.archive-exports .refresh { padding:5px 7px; }.archive-exports { gap:5px; }.pager>.filter-label { flex-basis:100%; }.pager-controls { margin-left:0; }.toggle-label { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; }html { scroll-behavior:auto; } }