/* * Prizma web cabinet — design system (plan 2026-09-23 D1/D2/D4/D10). * Layers: 1 tokens → 2 base → 3 layout → 4 components → 5 pages → 6 utilities → 7 responsive/motion. * Colour tokens are RGB triplets (TaskBook globals.css convention) → use as rgb(var(--x) / a). * Theme: .dark on (set before paint by the inline script in _layout.html). * Contrast of every text/background pair is asserted by tests/test_web_ui_redesign.py (AC2). */ /* ── 1. TOKENS ─────────────────────────────────────────────────────────── */ :root { --canvas: 249 249 248; --paper: 255 255 255; --paper-2: 244 244 242; --ink: 26 26 26; /* D1 lists 115; tightened to 107 so muted text keeps ≥ 4.5:1 on paper-2 (4.84 vs 4.32). */ --muted: 107 107 107; --line: 229 229 227; --accent: 29 78 216; --success: 22 163 74; --danger: 239 68 68; --priority: 245 158 11; --ring: 59 130 246; /* Text-safe variants of status hues (the raw hues are < 4.5:1 on white). */ --success-ink: 21 115 52; --danger-ink: 185 28 28; --priority-ink: 146 64 14; --accent-ink: 29 78 216; /* Primary button */ --primary-bg: 29 78 216; --primary-fg: 255 255 255; --danger-bg: 185 28 28; --danger-fg: 255 255 255; /* Extra chart hues */ --violet: 109 40 217; --teal: 13 148 136; --teal-ink: 15 118 110; --violet-ink: 109 40 217; --slate: 148 148 140; /* Retention heatmap: accent mixed into paper at 6/16/30/48/68/88 % + readable text */ --heat-0: 241 244 253; --heat-1: 219 227 249; --heat-2: 187 202 243; --heat-3: 147 170 236; --heat-4: 101 135 228; --heat-5: 56 99 221; --heat-fg-0: 26 26 26; --heat-fg-1: 26 26 26; --heat-fg-2: 26 26 26; --heat-fg-3: 26 26 26; --heat-fg-4: 26 26 26; --heat-fg-5: 255 255 255; --badge-tint: 0.1; --font-sans: "Inter", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgb(26 26 26 / 0.04); --shadow: 0 1px 2px rgb(26 26 26 / 0.04), 0 4px 16px -6px rgb(26 26 26 / 0.08); --shadow-lg: 0 24px 48px -16px rgb(26 26 26 / 0.22), 0 2px 6px rgb(26 26 26 / 0.06); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 150ms; --sidebar-w: 240px; --z-sticky: 10; --z-sidebar: 20; --z-popover: 40; --z-toast: 60; --z-tooltip: 70; color-scheme: light; } .dark { --canvas: 16 15 14; --paper: 26 24 22; --paper-2: 34 31 28; --ink: 236 232 226; --muted: 158 150 140; --line: 52 48 44; --accent: 134 174 255; --success: 72 210 120; --danger: 240 100 100; --priority: 240 180 40; --ring: 158 186 255; --success-ink: 72 210 120; --danger-ink: 240 100 100; --priority-ink: 240 180 40; --accent-ink: 134 174 255; /* fix_dark_coloristics Step 1: inverse primary (ink background + canvas text) */ --primary-bg: 236 232 226; --primary-fg: 16 15 14; --danger-bg: 240 100 100; --danger-fg: 16 15 14; --violet: 180 150 255; --teal: 70 200 190; --teal-ink: 70 200 190; --violet-ink: 180 150 255; --slate: 120 113 105; --heat-0: 35 36 41; --heat-1: 45 51 64; --heat-2: 61 72 97; --heat-3: 80 99 138; --heat-4: 102 129 185; --heat-5: 123 159 232; --heat-fg-0: 236 232 226; --heat-fg-1: 236 232 226; --heat-fg-2: 236 232 226; --heat-fg-3: 236 232 226; --heat-fg-4: 16 15 14; --heat-fg-5: 16 15 14; --badge-tint: 0.14; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px -8px rgb(0 0 0 / 0.5); --shadow-lg: 0 24px 60px -12px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.4); color-scheme: dark; } /* ── 2. BASE ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; -webkit-text-size-adjust: 100%; background: rgb(var(--canvas)); } body { margin: 0; min-height: 100vh; min-height: 100dvh; color: rgb(var(--ink)); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at top left, rgb(var(--accent) / 0.08), transparent 32%), radial-gradient(circle at bottom right, rgb(var(--priority) / 0.09), transparent 30%), rgb(var(--canvas)); background-attachment: fixed; overflow-x: hidden; } .dark body { background: radial-gradient(circle at top left, rgb(var(--accent) / 0.10), transparent 32%), radial-gradient(circle at bottom right, rgb(var(--priority) / 0.14), transparent 30%), linear-gradient(180deg, rgb(22 20 18), rgb(var(--canvas))); background-attachment: fixed; } h1, h2, h3, h4, p { margin: 0; } a { color: rgb(var(--accent-ink)); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } code, kbd, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; } .mono { font-size: 0.93em; letter-spacing: -0.01em; } b, strong { font-weight: 600; } ::selection { color: #fff; background: rgb(29 78 216 / 0.85); } .dark ::selection { color: rgb(16 15 14); background: rgb(var(--accent) / 0.72); } :focus { outline: none; } :focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; border-radius: 4px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .icon-fill { fill: currentColor; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--radius); background: rgb(var(--ink)); color: rgb(var(--paper)); font-weight: 600; } .skip-link:focus { top: 12px; } /* ── 3. LAYOUT ─────────────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: var(--z-sidebar); display: flex; flex-direction: column; gap: 20px; padding: 18px 12px 14px; background: rgb(var(--paper) / 0.86); backdrop-filter: blur(12px); border-right: 1px solid rgb(var(--line)); overflow-y: auto; } .brand { display: inline-flex; align-items: center; gap: 10px; padding: 2px 8px; color: rgb(var(--ink)); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--ink)); color: rgb(var(--paper)); box-shadow: inset 0 -8px 16px -10px rgb(var(--accent) / 0.9); } .brand-mark .icon { width: 18px; height: 18px; stroke-width: 1.7; } .sidebar-section { display: flex; flex-direction: column; gap: 6px; } .sidebar-label { padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--muted)); } .sidebar-empty { padding: 0 10px; color: rgb(var(--muted)); font-size: 13px; } .channel-list, .nav { display: flex; flex-direction: column; gap: 2px; } .channel-item, .nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius); background: transparent; color: rgb(var(--ink)); font-size: 14px; font-weight: 500; text-align: left; transition: background-color var(--dur) ease, color var(--dur) ease; } .channel-item:hover, .nav-item:hover { background: rgb(var(--paper-2)); text-decoration: none; } .nav-item .icon { color: rgb(var(--muted)); } .nav-item.is-active, .channel-item.is-active { background: rgb(var(--ink)); color: rgb(var(--paper)); } .dark .nav-item.is-active, .dark .channel-item.is-active { color: rgb(var(--canvas)); } .nav-item.is-active .icon { color: inherit; } .channel-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .channel-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-item-sub { font-size: 11.5px; color: rgb(var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-item.is-active .channel-item-sub { color: inherit; opacity: 0.78; } .channel-item.is-active .avatar { background: rgb(var(--paper) / 0.16); color: inherit; border-color: transparent; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid rgb(var(--line)); } .main-wrap { min-width: 0; display: flex; flex-direction: column; } .main { flex: 1; min-width: 0; outline: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 32px 56px; } .topbar { display: none; } .bottom-nav { display: none; } /* Page header */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-header-main { display: flex; align-items: center; gap: 14px; min-width: 0; } .page-header-text { min-width: 0; } .page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; } .page-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; color: rgb(var(--muted)); font-size: 13px; } .meta-copy { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; margin-left: -6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgb(var(--muted)); font-size: 12.5px; } .meta-copy:hover { background: rgb(var(--paper-2)); color: rgb(var(--ink)); } .meta-copy .icon { width: 13px; height: 13px; } .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: rgb(var(--line)); } .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tab-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 18px; border-top: 1px solid rgb(var(--line)); } .tab-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .tab-sub { color: rgb(var(--muted)); font-size: 13px; } .content { display: flex; flex-direction: column; gap: 16px; } /* ── 4. COMPONENTS ─────────────────────────────────────────────────────── */ /* Avatar */ .avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgb(var(--line)); background: rgb(var(--paper-2)); color: rgb(var(--ink)); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .avatar-sm { width: 26px; height: 26px; font-size: 10.5px; border-radius: 50%; } .avatar-lg { width: 44px; height: 44px; font-size: 15px; border-radius: 12px; background: rgb(var(--ink)); color: rgb(var(--paper)); border-color: transparent; } .dark .avatar-lg { color: rgb(var(--canvas)); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease; } .btn:hover { text-decoration: none; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; } .btn-primary { background: rgb(var(--primary-bg)); color: rgb(var(--primary-fg)); box-shadow: var(--shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.12); } .btn-primary:hover:not(:disabled) { background: rgb(var(--primary-bg) / 0.9); } .btn-secondary { background: rgb(var(--paper)); color: rgb(var(--ink)); border-color: rgb(var(--line)); box-shadow: var(--shadow-sm); } .btn-secondary:hover:not(:disabled) { background: rgb(var(--paper-2)); } .btn-ghost { background: transparent; color: rgb(var(--ink)); } .btn-ghost:hover:not(:disabled) { background: rgb(var(--paper-2)); } .btn-danger { background: rgb(var(--danger-bg)); color: rgb(var(--danger-fg)); } .btn-danger:hover:not(:disabled) { background: rgb(var(--danger-bg) / 0.9); } .btn-sm { min-height: 32px; padding: 0 11px; font-size: 13px; } .btn-lg { min-height: 44px; padding: 0 20px; font-size: 15px; } .btn-block { width: 100%; } .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(var(--primary-fg) / 0.35); border-top-color: rgb(var(--primary-fg)); animation: spin 700ms linear infinite; } .btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: rgb(var(--ink) / 0.25); border-top-color: rgb(var(--ink)); } .icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: rgb(var(--muted)); transition: background-color var(--dur) ease, color var(--dur) ease; } .icon-btn:hover { background: rgb(var(--paper-2)); color: rgb(var(--ink)); text-decoration: none; } .icon-btn[aria-expanded="true"] { background: rgb(var(--paper-2)); color: rgb(var(--ink)); border-color: rgb(var(--line)); } .icon-btn-xs { width: 24px; height: 24px; border-radius: var(--radius-sm); } .icon-btn-xs .icon { width: 14px; height: 14px; } .is-copied { color: rgb(var(--success-ink)) !important; } .tip-wrap { display: inline-flex; border-radius: var(--radius); } /* Hint "?" */ .hint { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: rgb(var(--muted)); vertical-align: middle; cursor: help; } .hint .icon { width: 14px; height: 14px; } .hint:hover, .hint:focus-visible { color: rgb(var(--accent-ink)); background: rgb(var(--accent) / 0.1); } .tooltip { position: fixed; z-index: var(--z-tooltip); max-width: 280px; padding: 8px 10px; border-radius: var(--radius); background: rgb(var(--ink)); color: rgb(var(--paper)); font-size: 12.5px; font-weight: 450; line-height: 1.45; box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease, transform 120ms var(--ease-out); } .dark .tooltip { color: rgb(var(--canvas)); } .tooltip.is-visible { opacity: 1; transform: none; } /* Badges & chips */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; } .badge .icon { width: 12px; height: 12px; } .badge-ok { background: rgb(var(--success) / var(--badge-tint)); color: rgb(var(--success-ink)); } .badge-danger { background: rgb(var(--danger) / var(--badge-tint)); color: rgb(var(--danger-ink)); } .badge-warn { background: rgb(var(--priority) / var(--badge-tint)); color: rgb(var(--priority-ink)); } .badge-info { background: rgb(var(--accent) / var(--badge-tint)); color: rgb(var(--accent-ink)); } .badge-accent { background: rgb(var(--accent) / var(--badge-tint)); color: rgb(var(--accent-ink)); } .badge-muted { background: rgb(var(--paper-2)); color: rgb(var(--muted)); box-shadow: inset 0 0 0 1px rgb(var(--line)); } .badge-premium { background: rgb(var(--priority) / var(--badge-tint)); color: rgb(var(--priority-ink)); height: 20px; padding: 0 7px; font-size: 11px; } .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid rgb(var(--line)); background: rgb(var(--paper-2)); color: rgb(var(--ink)); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--dot, rgb(var(--muted))); box-shadow: 0 0 0 2px rgb(var(--paper)); } /* Segmented control */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgb(var(--paper-2)); border: 1px solid rgb(var(--line)); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } /* Segmented controls: ui.js toggles .has-more-right while content overflows to the right, so a soft fade tells the user there is more to scroll (masks are safe here: no popovers inside). */ .has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } .seg-item { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: rgb(var(--muted)); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease; } .seg-item:hover { color: rgb(var(--ink)); text-decoration: none; } .seg-item.is-active { background: rgb(var(--paper)); color: rgb(var(--ink)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(var(--line)); } .seg-sm .seg-item { min-height: 26px; padding: 0 9px; font-size: 12.5px; } .seg-count { font-size: 11px; color: rgb(var(--muted)); } /* Cards */ .card { background: rgb(var(--paper)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; } .chart-card { padding: 16px 18px 14px; display: flex; flex-direction: column; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .card-head-pad { padding: 14px 16px 0; margin-bottom: 12px; } .card-title { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .card-note { margin-top: 8px; color: rgb(var(--muted)); font-size: 12px; } .table-card { overflow: hidden; } .card-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid rgb(var(--line)); } .toolbar-spacer { flex: 1; } .chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .span-2 { grid-column: span 2; } .chart-box { position: relative; height: 240px; width: 100%; } .chart-box-lg { height: 280px; } .chart-box canvas { position: absolute; inset: 0; } .chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: rgb(var(--muted)); font-size: 13px; text-align: center; border: 1px dashed rgb(var(--line)); border-radius: var(--radius); background: rgb(var(--paper-2) / 0.5); } .chart-empty[hidden] { display: none; } .legend-inline { display: inline-flex; gap: 14px; font-size: 12px; color: rgb(var(--muted)); } .lg { display: inline-flex; align-items: center; gap: 6px; } .lg::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; } .lg-accent::before { background: rgb(var(--accent)); } .lg-danger::before { background: rgb(var(--danger)); } /* KPI */ .kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgb(var(--paper)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; } .kpi-head { display: flex; align-items: center; gap: 6px; } .kpi-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgb(var(--paper-2)); color: rgb(var(--muted)); } .kpi-icon .icon { width: 13px; height: 13px; } .kpi-label { font-size: 12.5px; font-weight: 500; color: rgb(var(--muted)); } .kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; } .kpi-sub { font-size: 12px; color: rgb(var(--muted)); } .kpi-good .kpi-value { color: rgb(var(--success-ink)); } .kpi-bad .kpi-value { color: rgb(var(--danger-ink)); } /* Meter (Осталось %) */ .meter { display: inline-flex; align-items: center; gap: 8px; min-width: 116px; } .meter-track { position: relative; flex: 1; min-width: 44px; height: 6px; border-radius: 999px; background: rgb(var(--paper-2)); box-shadow: inset 0 0 0 1px rgb(var(--line)); overflow: hidden; } .meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; } .meter-good .meter-fill { background: rgb(var(--success)); } .meter-mid .meter-fill { background: rgb(var(--priority)); } .meter-bad .meter-fill { background: rgb(var(--danger)); } .meter-text { font-size: 12.5px; min-width: 52px; text-align: right; } .meter-good .meter-text { color: rgb(var(--success-ink)); } .meter-mid .meter-text { color: rgb(var(--priority-ink)); } .meter-bad .meter-text { color: rgb(var(--danger-ink)); } .meter-block { display: flex; width: 100%; } .meter-block .meter-track { height: 6px; } /* Forms */ .form { display: flex; flex-direction: column; gap: 14px; } .fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .fieldset:disabled { opacity: 0.55; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: rgb(var(--muted)); } .field-note { margin-left: auto; font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .req { color: rgb(var(--danger-ink)); } .counter { margin-left: auto; font-size: 11.5px; font-weight: 500; } .counter.is-over, .counter.is-near { color: rgb(var(--danger-ink)); } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .field-help { font-size: 12px; color: rgb(var(--muted)); } .field-help.is-active { color: rgb(var(--priority-ink)); } .field-check { justify-content: flex-end; } .input { width: 100%; min-height: 36px; padding: 7px 11px; border: 1px solid rgb(var(--line)); border-radius: var(--radius); background: rgb(var(--paper)); color: rgb(var(--ink)); font-size: 14px; transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease; } .input::placeholder { color: rgb(var(--muted)); opacity: 1; } .input:hover { border-color: rgb(var(--muted) / 0.55); } .input:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.16); } .input:disabled { background: rgb(var(--paper-2)); } .textarea { min-height: 140px; resize: vertical; line-height: 1.55; font-size: 13px; } select.input { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--muted)) 50%), linear-gradient(135deg, rgb(var(--muted)) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } .dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); } .switch { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 14px; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch-ui { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; background: rgb(var(--line)); transition: background-color var(--dur) ease; } .switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--paper)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 180ms var(--ease-out); } .switch input:checked + .switch-ui { background: rgb(var(--accent)); } .switch input:checked + .switch-ui::after { transform: translateX(16px); } .switch input:focus-visible + .switch-ui { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; } .switch input:disabled ~ * { opacity: 0.5; cursor: not-allowed; } .cb { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; } .cb input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .cb span { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgb(var(--muted) / 0.7); background: rgb(var(--paper)); transition: background-color var(--dur) ease, border-color var(--dur) ease; } .cb input:checked + span { border-color: rgb(var(--accent)); background: rgb(var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .cb input:focus-visible + span { outline: 2px solid rgb(var(--ring)); outline-offset: 2px; } .search { position: relative; display: inline-flex; align-items: center; min-width: 220px; flex: 0 1 300px; } .search .icon { position: absolute; left: 10px; color: rgb(var(--muted)); pointer-events: none; } .search .input { padding-left: 32px; min-height: 34px; } .search-form { display: contents; } /* Notices */ .notice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.45; } .notice .icon { margin-top: 1px; } .notice-warn { background: rgb(var(--priority) / var(--badge-tint)); color: rgb(var(--priority-ink)); } .notice-danger { background: rgb(var(--danger) / var(--badge-tint)); color: rgb(var(--danger-ink)); } .notice-inline { margin-top: 4px; } /* Empty states */ .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; text-align: center; } .empty-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: rgb(var(--paper-2)); border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); } .empty-icon .icon { width: 20px; height: 20px; } .empty-title { font-size: 15px; font-weight: 600; } .empty-text { max-width: 440px; color: rgb(var(--muted)); font-size: 13px; } .empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .empty-inline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; color: rgb(var(--muted)); font-size: 13px; } .empty-inline[hidden] { display: none; } /* Tables */ .table-wrap { width: 100%; overflow: auto; overscroll-behavior-x: contain; } .table-wrap-tall { max-height: min(68vh, 620px); } .table-wrap-short { max-height: 280px; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .table th, .table td { padding: 10px 12px; border-bottom: 1px solid rgb(var(--line)); text-align: left; vertical-align: middle; } .table thead th { position: sticky; top: 0; z-index: 2; background: rgb(var(--paper-2)); color: rgb(var(--muted)); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; white-space: nowrap; vertical-align: bottom; } .th-sub { font-weight: 500; text-transform: none; } .table tbody th { font-weight: 500; } .table tbody tr { transition: background-color var(--dur) ease; } .table tbody tr:hover > *:not(.heat) { background-color: rgb(var(--paper-2) / 0.7); } .table tbody tr:last-child > * { border-bottom: 0; } .table .num { text-align: right; white-space: nowrap; } .table-compact th, .table-compact td { padding: 8px 14px; } .table th[data-sort] { cursor: pointer; user-select: none; } .table th[data-sort]:hover { color: rgb(var(--ink)); } .table th[aria-sort="ascending"]::after { content: " ↑"; color: rgb(var(--accent-ink)); } .table th[aria-sort="descending"]::after { content: " ↓"; color: rgb(var(--accent-ink)); } .table tfoot td, .table tfoot th { position: sticky; bottom: 0; z-index: 2; background: rgb(var(--paper-2)); border-top: 1px solid rgb(var(--line)); border-bottom: 0; font-weight: 600; } /* sticky first columns (checkbox + name) */ .sticky-first .col-check { position: sticky; left: 0; z-index: 1; width: 40px; min-width: 40px; padding-right: 0; background: rgb(var(--paper)); } .sticky-first .col-name { position: sticky; left: 0; z-index: 1; background: rgb(var(--paper)); min-width: 180px; max-width: 260px; } .sticky-first .col-check + .col-name { left: 40px; } .sticky-first thead .col-check, .sticky-first thead .col-name { z-index: 3; background: rgb(var(--paper-2)); } .sticky-first tfoot .col-check, .sticky-first tfoot .col-name { z-index: 3; background: rgb(var(--paper-2)); } .sticky-first .col-name { box-shadow: 1px 0 0 rgb(var(--line)); } .cell-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .row-none .cell-name { color: rgb(var(--muted)); font-style: italic; } .col-meter { min-width: 150px; } .txt-good { color: rgb(var(--success-ink)); } .txt-bad { color: rgb(var(--danger-ink)); } /* Toolbar */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; } .toolbar-group { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; } .toolbar-label { font-size: 12.5px; color: rgb(var(--muted)); font-weight: 500; } /* Filter bar */ .filterbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 10px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--paper)); /* BUG_FIX_CONTEXT: no backdrop-filter/transform/filter/mask here — any of them makes this bar the containing block + stacking context of its position:fixed popovers (they were offset by the bar's position and painted under later cards). */ position: relative; } /* Mobile: the filter row scrolls horizontally; ui.js sets .is-scrollable-right on the bar while more controls are hidden to the right, and this overlay (not a mask — masks clip fixed popovers) fades them. */ .filterbar.is-scrollable-right::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: linear-gradient(to right, rgb(var(--paper) / 0), rgb(var(--paper))); pointer-events: none; } .filterbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filterbar-reset { margin-left: auto; color: rgb(var(--muted)); } .pop { position: relative; display: inline-flex; } .filter-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid rgb(var(--line)); border-radius: var(--radius); background: rgb(var(--paper)); color: rgb(var(--ink)); font-size: 13px; font-weight: 500; white-space: nowrap; transition: border-color var(--dur) ease, background-color var(--dur) ease; } .filter-btn:hover { background: rgb(var(--paper-2)); } .filter-btn[aria-expanded="true"] { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.12); } .filter-btn.is-set { border-color: rgb(var(--accent) / 0.55); background: rgb(var(--accent) / 0.06); } .filter-btn .icon { color: rgb(var(--muted)); } .filter-btn .chev { width: 14px; height: 14px; margin-left: -2px; } .filter-btn-sub { color: rgb(var(--muted)); font-size: 12px; } .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgb(var(--primary-bg)); color: rgb(var(--primary-fg)); font-size: 11px; font-weight: 700; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; } .fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: 999px; background: rgb(var(--accent) / var(--badge-tint)); color: rgb(var(--ink)); font-size: 12.5px; } .fchip-dim { color: rgb(var(--accent-ink)); font-weight: 600; font-size: 11.5px; } .fchip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(var(--muted)); } .fchip-x:hover { background: rgb(var(--paper)); color: rgb(var(--ink)); } .fchip-x .icon { width: 12px; height: 12px; } /* Popovers & menus (positioned by ui.js with position: fixed so tables never clip them) */ .popover { position: fixed; z-index: var(--z-popover); min-width: 220px; max-width: min(340px, calc(100vw - 16px)); max-height: min(420px, calc(100vh - 24px)); overflow: auto; padding: 8px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--paper)); box-shadow: var(--shadow-lg); transform-origin: top left; animation: pop-in 140ms var(--ease-out); } .popover[hidden] { display: none; } .popover-form { width: 320px; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .popover-list { width: 280px; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 8px; } .popover-menu { min-width: 210px; padding: 6px; } .popover-title { padding: 0 6px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--muted)); } .popover-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid rgb(var(--line)); } .popover-empty { padding: 8px 6px; font-size: 12.5px; color: rgb(var(--muted)); } .search-mini { position: relative; display: flex; } .search-mini .icon { position: absolute; left: 9px; top: 10px; color: rgb(var(--muted)); } .search-mini .input { padding-left: 30px; min-height: 32px; font-size: 13px; } .check-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; } .check { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; } .check:hover { background: rgb(var(--paper-2)); } .check input { width: 15px; height: 15px; margin: 0; accent-color: rgb(var(--accent)); flex: none; } .check-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .check-note { margin-left: auto; font-size: 11px; color: rgb(var(--muted)); } .check[hidden] { display: none; } .muted-strong { color: rgb(var(--muted)); font-weight: 500; } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 9px; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgb(var(--ink)); font-size: 13.5px; text-align: left; } .menu-item .icon { color: rgb(var(--muted)); } .menu-item:hover:not(:disabled), .menu-item:focus-visible { background: rgb(var(--paper-2)); text-decoration: none; outline: none; } .menu-item.is-active { font-weight: 600; } .menu-item:disabled { opacity: 0.55; } .menu-item-danger, .menu-item-danger .icon { color: rgb(var(--danger-ink)); } .menu-item-danger:hover:not(:disabled) { background: rgb(var(--danger) / var(--badge-tint)); } .menu-sep { height: 1px; margin: 4px 2px; background: rgb(var(--line)); } .popover-menu form { margin: 0; } /* Modals */ .modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: rgb(var(--ink)); overflow: visible; } .modal-sm { width: min(420px, calc(100vw - 24px)); } .modal-lg { width: min(680px, calc(100vw - 24px)); } .modal::backdrop { background: rgb(16 15 14 / 0.42); backdrop-filter: blur(4px); } .modal[open] { animation: modal-in 150ms var(--ease-out); } .modal[open]::backdrop { animation: fade-in 150ms ease; } .modal-card { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid rgb(var(--line)); border-radius: var(--radius-xl); background: rgb(var(--paper)); box-shadow: var(--shadow-lg); } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 4px; } .modal-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .modal-sub { margin-top: 4px; color: rgb(var(--muted)); font-size: 13px; } .modal-body { padding: 14px 20px 0; } .modal-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 4px -20px 0; padding: 14px 20px 18px; background: rgb(var(--paper)); } .modal-card > .modal-foot { margin: 0; } .confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 20px; } .confirm-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 10px; background: rgb(var(--danger) / var(--badge-tint)); color: rgb(var(--danger-ink)); } .confirm-icon .icon { width: 19px; height: 19px; } .steps { margin: 0; padding: 12px 14px 12px 32px; border-radius: var(--radius); background: rgb(var(--paper-2)); font-size: 13px; display: flex; flex-direction: column; gap: 4px; } .steps li::marker { color: rgb(var(--muted)); font-family: var(--font-mono); font-size: 12px; } .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: rgb(var(--paper-2)); border: 1px solid rgb(var(--line)); } .stat-label { font-size: 11.5px; color: rgb(var(--muted)); } .stat-value { font-size: 20px; font-weight: 600; } .stat-bad .stat-value { color: rgb(var(--danger-ink)); } .import-summary { margin: 12px 0 0; font-size: 13px; color: rgb(var(--muted)); } .import-summary b { color: rgb(var(--ink)); font-family: var(--font-mono); } .import-errors { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; } .import-errors li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); background: rgb(var(--danger) / var(--badge-tint)); color: rgb(var(--danger-ink)); font-size: 12.5px; overflow-wrap: anywhere; } .import-errors .icon { margin-top: 1px; } /* Toasts */ .toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(400px, calc(100vw - 24px)); pointer-events: none; } .toast { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 12px 12px 14px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-lg); background: rgb(var(--paper)); color: rgb(var(--ink)); box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.45; pointer-events: auto; overflow: hidden; animation: toast-in 150ms var(--ease-out); } .toast.is-leaving { animation: toast-out 150ms ease forwards; } .toast-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; } .toast-icon .icon { width: 15px; height: 15px; } .toast-success .toast-icon { background: rgb(var(--success) / var(--badge-tint)); color: rgb(var(--success-ink)); } .toast-error .toast-icon { background: rgb(var(--danger) / var(--badge-tint)); color: rgb(var(--danger-ink)); } .toast-warning .toast-icon { background: rgb(var(--priority) / var(--badge-tint)); color: rgb(var(--priority-ink)); } .toast-info .toast-icon { background: rgb(var(--accent) / var(--badge-tint)); color: rgb(var(--accent-ink)); } .toast-body { flex: 1; min-width: 0; padding-top: 1px; } .toast-text { font-weight: 500; overflow-wrap: anywhere; } .toast-details { margin-top: 3px; color: rgb(var(--muted)); font-size: 12.5px; overflow-wrap: anywhere; } .toast-details.mono { font-size: 12px; } .toast-close { margin: -4px -4px 0 0; width: 28px; height: 28px; } .toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: rgb(var(--muted) / 0.35); animation: toast-progress linear forwards; } .toast:hover .toast-progress { animation-play-state: paused; } /* Theme toggle */ .theme-toggle { position: relative; } .theme-icons { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; } .theme-icons .icon { position: absolute; inset: 0; opacity: 0; transform: rotate(-60deg) scale(0.7); transition: opacity 180ms ease, transform 220ms var(--ease-out); } .nav-item .theme-icons .icon { color: rgb(var(--muted)); } [data-theme-pref="light"] .ti-light, [data-theme-pref="dark"] .ti-dark, [data-theme-pref="system"] .ti-system, html:not([data-theme-pref]) .ti-system { opacity: 1; transform: none; } /* ── 5. PAGES ──────────────────────────────────────────────────────────── */ /* Links list */ .links-table .col-link { min-width: 280px; width: 38%; } .links-table .col-tags { min-width: 160px; } .links-table .col-status { white-space: nowrap; } .links-table .col-actions { width: 48px; text-align: right; padding-left: 4px; } .links-table tbody td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; } .links-table tbody td.num, .links-table .col-status, .links-table .col-actions { padding-top: 14px; } .links-table tr.is-revoked .link-title { color: rgb(var(--muted)); } .link-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .link-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .link-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-url-row { display: flex; align-items: center; gap: 2px; min-width: 0; } .link-url { color: rgb(var(--muted)); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-meta { font-size: 12px; color: rgb(var(--muted)); } .link-meta .mono { font-size: 11.5px; white-space: nowrap; } .links-table tr[hidden] { display: none; } /* Audience */ .person { display: flex; align-items: center; gap: 10px; min-width: 0; } .person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .person-name { font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .person-handle { font-size: 12px; } a.person-handle { color: rgb(var(--accent-ink)); } .cell-link { display: flex; flex-direction: column; gap: 4px; min-width: 160px; } .cell-link-name { font-weight: 500; } .people-table td { white-space: nowrap; } .people-table td:last-child { white-space: normal; } .series-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: rgb(var(--muted)); vertical-align: 0; } /* Audience: «База по источникам» per-row include/exclude toggle feeding the «Распределение» donut */ .breakdown-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; } .breakdown-check, .breakdown-check-all { accent-color: rgb(var(--accent)); flex: none; cursor: pointer; } .breakdown-toggle .series-dot { margin-right: 0; } /* .breakdown-toggle's flex `gap` already spaces it */ tr.is-excluded { opacity: .45; } tr.is-excluded .series-dot { background: rgb(var(--muted)) !important; } /* Audience: «Распределение» donut + HTML legend (source · % · count), filled by charts.js renderDonutLegend */ .donut-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 16px; align-items: center; } .donut-legend { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .donut-legend:empty { display: none; } .donut-legend-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid rgb(var(--line)); } .donut-legend-item:last-of-type { border-bottom: 0; } .donut-legend-dot { width: 8px; height: 8px; border-radius: 2px; } .donut-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend-pct { font-weight: 600; text-align: right; } .donut-legend-count { color: rgb(var(--muted)); text-align: right; min-width: 3.5ch; } .donut-legend-more { padding: 6px 0 0 16px; font-size: 12px; color: rgb(var(--muted)); } @media (max-width: 720px) { .donut-layout { grid-template-columns: minmax(0, 1fr); } } /* Audience: «Имя» column — fixed width, ellipsis by default, scrolls horizontally on hover/focus */ .people-table .col-person { max-width: 200px; width: 200px; } /* BUG_FIX_CONTEXT: max-width on a is ignored by auto table layout, so the cell grew to the full name's min-content; the cap must sit on the content block (200px − 2×12px cell padding). */ .people-table .col-person .person { min-width: 0; max-width: 176px; } .people-table .col-person .person-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .people-table .col-person .person-name:hover, .people-table .col-person .person-name:focus { overflow-x: auto; text-overflow: clip; scrollbar-width: thin; outline: none; } .pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid rgb(var(--line)); } .pagination-links { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .page-num { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--radius); color: rgb(var(--ink)); font-size: 12.5px; } .page-num:hover { background: rgb(var(--paper-2)); text-decoration: none; } .page-num.is-active { background: rgb(var(--ink)); color: rgb(var(--paper)); } .dark .page-num.is-active { color: rgb(var(--canvas)); } /* Cohort heatmap */ .heatmap td.heat { text-align: center; font-size: 12px; font-weight: 500; min-width: 64px; border-bottom: 2px solid rgb(var(--paper)); border-right: 2px solid rgb(var(--paper)); padding: 8px 6px; } .heatmap .heat-col { text-align: center; } .heat-0 { background: rgb(var(--heat-0)); color: rgb(var(--heat-fg-0)); } .heat-1 { background: rgb(var(--heat-1)); color: rgb(var(--heat-fg-1)); } .heat-2 { background: rgb(var(--heat-2)); color: rgb(var(--heat-fg-2)); } .heat-3 { background: rgb(var(--heat-3)); color: rgb(var(--heat-fg-3)); } .heat-4 { background: rgb(var(--heat-4)); color: rgb(var(--heat-fg-4)); } .heat-5 { background: rgb(var(--heat-5)); color: rgb(var(--heat-fg-5)); } .heat-na { color: rgb(var(--muted)); background: rgb(var(--paper-2) / 0.6); } .heatmap tbody tr:hover > td.heat { filter: brightness(0.97); } .dark .heatmap tbody tr:hover > td.heat { filter: brightness(1.08); } .heat-legend { display: inline-flex; align-items: center; gap: 3px; } .heat-legend-label { font-size: 11px; color: rgb(var(--muted)); margin: 0 4px; } .heat-swatch { width: 18px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(var(--line) / 0.6); } /* Auth pages */ .auth-top { position: fixed; top: 14px; right: 14px; z-index: 5; } .auth-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 64px 16px; } .auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px; background: rgb(var(--paper)); border: 1px solid rgb(var(--line)); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .brand-auth { padding: 0; margin-bottom: 4px; } .auth-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } .auth-text { color: rgb(var(--muted)); font-size: 14px; } .auth-actions { display: flex; gap: 8px; flex-wrap: wrap; } .auth-foot { max-width: 400px; color: rgb(var(--muted)); font-size: 12.5px; text-align: center; } .steps-compact { font-size: 13px; } .kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid rgb(var(--line)); background: rgb(var(--paper-2)); font-size: 12.5px; color: rgb(var(--ink)); } /* ── 6. UTILITIES ──────────────────────────────────────────────────────── */ .muted { color: rgb(var(--muted)); } .small { font-size: 12.5px; } /* ── 7. MOTION ─────────────────────────────────────────────────────────── */ .page-enter { animation: page-fade 150ms ease; } /* no fill-mode: a filling opacity animation would keep a stacking context that traps fixed popovers under the bottom nav */ @keyframes page-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } } @keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .toast-progress { display: none; } } /* ── 8. RESPONSIVE ─────────────────────────────────────────────────────── */ @media (max-width: 1279px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Tablet: icon rail */ @media (max-width: 1023px) { :root { --sidebar-w: 72px; } .sidebar { padding: 16px 10px; align-items: center; } .brand-name, .sidebar-label, .channel-item-text, .nav-label, .theme-toggle-label { display: none; } .sidebar .brand { padding: 0; } .channel-item, .nav-item { justify-content: center; width: 44px; height: 44px; padding: 0; } .sidebar-foot { align-items: center; width: 100%; } .container { padding: 24px 22px 48px; } .chart-grid { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: auto; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile: top bar + bottom navigation */ @media (max-width: 767px) { body { font-size: 14px; } input, textarea, select { font-size: max(16px, 1em) !important; } .shell { display: block; } .sidebar { display: none; } .topbar { position: sticky; top: 0; z-index: var(--z-sidebar); display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px 0 12px; background: rgb(var(--paper) / 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--line)); } .brand-compact { padding: 0; } .brand-compact .brand-mark { width: 28px; height: 28px; } .topbar-channel { min-width: 0; flex: 1; } .topbar-channel-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--radius); background: transparent; font-weight: 600; } .topbar-channel-btn:hover { background: rgb(var(--paper-2)); } .topbar-channel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; gap: 2px; margin-left: auto; } .topbar-actions .icon-btn { width: 40px; height: 40px; } .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sidebar); display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: rgb(var(--paper) / 0.94); backdrop-filter: blur(12px); border-top: 1px solid rgb(var(--line)); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: var(--radius); color: rgb(var(--muted)); font-size: 10.5px; font-weight: 500; } .bottom-nav-item .icon { width: 20px; height: 20px; } .bottom-nav-item:hover { text-decoration: none; color: rgb(var(--ink)); } .bottom-nav-item.is-active { color: rgb(var(--ink)); font-weight: 600; } .bottom-nav-item.is-active .icon { stroke-width: 2; color: rgb(var(--accent-ink)); } .container { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); } .page-header { gap: 12px; margin-bottom: 16px; } .page-header-main .avatar-lg { display: none; } .page-title { font-size: 19px; } .page-actions { width: 100%; } .page-actions .btn, .page-actions .tip-wrap { flex: 1; } .page-actions .tip-wrap .btn { width: 100%; } .tab-head { padding-top: 14px; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi { padding: 12px; } .kpi-value { font-size: 22px; } .kpi:last-child:nth-child(odd) { grid-column: span 2; } .chart-box { height: 220px; } .chart-box-lg { height: 250px; } .chart-card { padding: 14px 12px 12px; } .filterbar { padding: 8px; } .filterbar-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; } .filterbar-row::-webkit-scrollbar { display: none; } .filterbar-row > * { flex: none; } .filterbar-reset { margin-left: 0; } /* Filter popovers become bottom sheets */ .popover.is-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-width: none; max-height: 75vh; border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); animation: sheet-in 180ms var(--ease-out); z-index: calc(var(--z-sidebar) + 30); /* Dimmed page behind the sheet; a tap on it is an "outside click" → ui.js closes the sheet. */ box-shadow: 0 -12px 40px rgb(0 0 0 / 0.18), 0 0 0 100vmax rgb(16 15 14 / 0.38); } .popover.is-sheet .check-list { max-height: 45vh; } .toolbar { flex-direction: column; align-items: stretch; } .toolbar-group { flex-direction: column; align-items: flex-start; gap: 6px; } .toolbar .btn { align-self: flex-start; } .card-toolbar { padding: 10px; } .search { min-width: 0; flex: 1 1 100%; } .field-grid, .field-row { grid-template-columns: minmax(0, 1fr); } .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Links → cards */ /* Links and people tables stay tables on phones (one parameter = one column); they scroll horizontally inside .table-wrap with a sticky first column. */ .sticky-first .col-name { min-width: 130px; max-width: 150px; } .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; align-items: stretch; } .auth-card { padding: 22px; } .modal { width: calc(100vw - 16px); } .modal-head { padding: 16px 16px 2px; } .modal-body { padding: 12px 16px 0; } .modal-foot { margin: 4px -16px 0; padding: 12px 16px 16px; } .modal-foot .btn { flex: 1; } } @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* Segmented control rendered with