/* Generated, do not edit. sha256:d875d85b0d41e419eb6bae7090608b0914629b07925648a2d82dc7a8e8eb4309 */ :root { --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M 46.108 37.099 L 79.826 68.032 L 113.068 37.288 L 142.067 37.244 L 92.564 85.773 L 92.367 123.544 L 80.04 135.851 L 67.262 123.517 L 67.425 85.773 L 17.176 37.092 L 46.108 37.099 Z'/%3E%3Cpath d='M 49.901 91.273 L 0 43.722 L 0 24.666 L 64.78 87.731 L 64.689 118.25 L 50.234 105.711 L 49.901 91.273 Z'/%3E%3Cpath d='M 95.221 87.779 L 160 24.149 L 160 43.383 L 109.554 93.918 L 109.584 105.756 L 94.924 118.584 L 95.221 87.779 Z'/%3E%3C/svg%3E"); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; --font-base: 'Inter', -apple-system, sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --table-vh-offset: 9.5rem; --table-row-lines: 2; --table-line-h: 1.35em; --table-cell-py: 0.85rem; --table-actions-w: 6.8rem; --table-exp-w: 2.2rem; --table-exp-pad: 0.55rem; --sig-chrome: 7.7rem; --main-pad-y: 1.7rem; --main-pad-x: var(--sidebar-pad); --page-head-h: 4.25rem; --aside-vh-offset: 5.9rem; --year-box-w: 4.4rem; --year-box-h: 2.6rem; --page-aside-w: calc(var(--sidebar-w) * 1.65); --hint-line-x: var(--sidebar-w); --sidebar-w: 240px; --sidebar-pad: 1.5rem; --nav-line-cap: 10px; --nav-line-top: 1.7rem; --nav-line-bottom: 1.7rem; --sig-green:var(--pos); --sig-yellow:#ffd93d; --sig-red:var(--neg); --sig-blue:#5b9bff; --sig-green-zone:rgba(57,255,138,0.12); --sig-yellow-zone:rgba(255,217,61,0.10); --sig-red-zone:rgba(255,69,69,0.10); } [data-theme="light"] { --sig-yellow:#c98a00; --sig-green-zone:rgba(0,122,72,0.12); --sig-yellow-zone:rgba(201,138,0,0.10); --sig-red-zone:rgba(204,34,34,0.10); } [data-theme="dark"][data-accent="neutral"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#a3a3a3; --accent-soft:rgba(255,255,255,0.08); --accent-mid:rgba(255,255,255,0.14); --accent-glow:rgba(255,255,255,0.10); --accent-text:#a3a3a3; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="neutral"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#888; --accent-soft:rgba(0,0,0,0.05); --accent-mid:rgba(0,0,0,0.10); --accent-glow:rgba(0,0,0,0.08); --accent-text:#888; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="orange"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#FF6B00; --accent-soft:rgba(255,107,0,0.16); --accent-mid:rgba(255,107,0,0.26); --accent-glow:rgba(255,107,0,0.30); --accent-text:#FF8124; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="dark"][data-accent="blue"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#3B82F6; --accent-soft:rgba(59,130,246,0.16); --accent-mid:rgba(59,130,246,0.26); --accent-glow:rgba(59,130,246,0.30); --accent-text:#6AA1FF; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="orange"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#E05500; --accent-soft:rgba(224,85,0,0.08); --accent-mid:rgba(224,85,0,0.16); --accent-glow:rgba(224,85,0,0.22); --accent-text:#E05500; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="light"][data-accent="blue"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#2563EB; --accent-soft:rgba(37,99,235,0.08); --accent-mid:rgba(37,99,235,0.16); --accent-glow:rgba(37,99,235,0.22); --accent-text:#2563EB; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="lila"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#B388FF; --accent-soft:rgba(179,136,255,0.16); --accent-mid:rgba(179,136,255,0.26); --accent-glow:rgba(179,136,255,0.30); --accent-text:#C7A6FF; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="lila"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#7C3AED; --accent-soft:rgba(124,58,237,0.08); --accent-mid:rgba(124,58,237,0.16); --accent-glow:rgba(124,58,237,0.22); --accent-text:#7C3AED; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="teal"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#14B8A6; --accent-soft:rgba(20,184,166,0.16); --accent-mid:rgba(20,184,166,0.26); --accent-glow:rgba(20,184,166,0.30); --accent-text:#2DD4BF; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="teal"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#0D9488; --accent-soft:rgba(13,148,136,0.08); --accent-mid:rgba(13,148,136,0.16); --accent-glow:rgba(13,148,136,0.22); --accent-text:#0D9488; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="magenta"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#E24DAE; --accent-soft:rgba(226,77,174,0.16); --accent-mid:rgba(226,77,174,0.26); --accent-glow:rgba(226,77,174,0.30); --accent-text:#F072C4; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="magenta"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#BE2A86; --accent-soft:rgba(190,42,134,0.08); --accent-mid:rgba(190,42,134,0.16); --accent-glow:rgba(190,42,134,0.22); --accent-text:#BE2A86; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="indigo"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#818CF8; --accent-soft:rgba(129,140,248,0.16); --accent-mid:rgba(129,140,248,0.26); --accent-glow:rgba(129,140,248,0.30); --accent-text:#A5B4FC; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="indigo"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#4F46E5; --accent-soft:rgba(79,70,229,0.08); --accent-mid:rgba(79,70,229,0.16); --accent-glow:rgba(79,70,229,0.22); --accent-text:#4F46E5; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="cyan"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#22D3EE; --accent-soft:rgba(34,211,238,0.16); --accent-mid:rgba(34,211,238,0.26); --accent-glow:rgba(34,211,238,0.30); --accent-text:#67E8F9; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="cyan"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#0E7490; --accent-soft:rgba(14,116,144,0.08); --accent-mid:rgba(14,116,144,0.16); --accent-glow:rgba(14,116,144,0.22); --accent-text:#0E7490; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="slate"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#94A3B8; --accent-soft:rgba(148,163,184,0.16); --accent-mid:rgba(148,163,184,0.26); --accent-glow:rgba(148,163,184,0.30); --accent-text:#B4C0D0; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="slate"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#475569; --accent-soft:rgba(71,85,105,0.08); --accent-mid:rgba(71,85,105,0.16); --accent-glow:rgba(71,85,105,0.22); --accent-text:#475569; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } [data-theme="dark"][data-accent="sand"] { --bg:#080808; --bg-elevated:#181818; --bg-raised:#242424; --bg-overlay:#303030; --border:rgba(255,255,255,0.18); --border-mid:rgba(255,255,255,0.28); --text-primary:#f2f2f2; --text-sec:#a3a3a3; --text-ter:#6a6a6a; --accent:#C8B89E; --accent-soft:rgba(200,184,158,0.16); --accent-mid:rgba(200,184,158,0.26); --accent-glow:rgba(200,184,158,0.30); --accent-text:#DDD0BA; --pos:#39FF8A; --pos-bg:rgba(57,255,138,0.16); --neg:#ff5a5a; --neg-bg:rgba(255,69,69,0.18); --neutral-bg:rgba(255,255,255,0.08); --input-bg:#1c1c1c; --scrollbar:#2c2c2c; } [data-theme="light"][data-accent="sand"] { --bg:#fff; --bg-elevated:#f7f7f7; --bg-raised:#f0f0f0; --bg-overlay:#e8e8e8; --border:rgba(0,0,0,0.12); --border-mid:rgba(0,0,0,0.18); --text-primary:#0a0a0a; --text-sec:#888; --text-ter:#bbb; --accent:#7A6650; --accent-soft:rgba(122,102,80,0.08); --accent-mid:rgba(122,102,80,0.16); --accent-glow:rgba(122,102,80,0.22); --accent-text:#7A6650; --pos:#007a48; --pos-bg:rgba(0,149,90,0.08); --neg:#cc2222; --neg-bg:rgba(204,34,34,0.08); --neutral-bg:rgba(0,0,0,0.04); --input-bg:#f5f5f5; --scrollbar:#ddd; } :root { --surface: var(--bg-elevated); --surface-inset: var(--bg-raised); --surface-blur: 0px; --surface-sat: 100%; --edge: none; --ambient: none; --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05); --shadow-2: 0 12px 44px rgba(0,0,0,0.35); --shadow-3: 0 24px 60px rgba(0,0,0,0.40); --lift-shadow: var(--shadow-2); --hover-shadow: var(--lift-shadow); } [data-theme="light"] { --lift-shadow:0 8px 22px -14px rgba(0,0,0,0.14); --hover-shadow:0 10px 26px -12px rgba(0,0,0,0.20); } [data-theme="dark"] { --shadow-1:0 1px 2px rgba(0,0,0,0.30); } [data-depth="deep"] { --surface-blur:16px; --surface-sat:135%; } [data-depth="deep"][data-theme="dark"] { --surface: color-mix(in srgb, #1c1c1c 78%, transparent); --surface-inset: color-mix(in srgb, #262626 76%, transparent); --edge: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%); --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -18px rgba(0,0,0,0.9); } [data-depth="deep"][data-theme="light"] { --surface: color-mix(in srgb, #ffffff 72%, transparent); --surface-inset: color-mix(in srgb, #f2f2f2 74%, transparent); --edge: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 46%); } [data-depth="deep"]:not([data-glow="off"]) { --ambient: radial-gradient(58rem 34rem at 8% -8%, var(--accent-glow), transparent 62%), radial-gradient(46rem 30rem at 102% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%); } @media (prefers-reduced-transparency: reduce) { [data-depth="deep"] { --surface:var(--bg-elevated); --surface-inset:var(--bg-raised); --surface-blur:0px; --surface-sat:100%; } } @media (prefers-reduced-motion: reduce) { body::before, .card, .table-frame { transition:none; } } :root { --frost: transparent; --surface-tint: var(--surface-inset); --row-line: color-mix(in srgb, var(--border) 50%, transparent); --row-hover: var(--neutral-bg); --lit: none; --lift: none; --slider-track: var(--bg-raised); --slider-track-edge: inset 0 0 0 1px var(--border); --slider-fill: linear-gradient(var(--accent), var(--accent)); --slider-thumb: var(--text-primary); --slider-thumb-edge: 0 0 0 2px var(--bg), 0 1px 3px rgba(0,0,0,0.5); } [data-theme="light"] { --slider-thumb: #ffffff; --slider-thumb-edge: 0 0 0 1px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.2); } :root[data-profile="glass"] { --surface-blur:36px; --float-blur:calc((100 - var(--dialog-transparency, 30)) * 0.4px); } :root { --ring-seam:0; --ring-sheen:0; } :root[data-profile="glass"] { --ring-seam:2; --ring-sheen:1; } :root[data-profile="glass"][data-theme="dark"] { --surface: color-mix(in srgb, #161616 calc(100% - var(--glass-transparency, 65%)), transparent); --surface-inset: color-mix(in srgb, #262626 calc(100% - var(--glass-transparency, 65%)), transparent); --surface-tint: rgba(255,255,255,0.035); --surface-sat: 165%; --frost: color-mix(in srgb, #ffffff var(--glass-frost, 3%), transparent); --edge: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 55%, rgba(255,255,255,0)); --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 24px 60px -28px rgba(0,0,0,0.85); --glans: inset 0 0 0 transparent; --glans-on: inset 0 0 0 transparent; --hover-shadow: 0 18px 40px -22px rgba(0,0,0,0.7); --select-shadow: 0 14px 44px -18px var(--accent-glow); --frame-border: rgba(255,255,255,0.10); --frame-top: rgba(255,255,255,0.12); --row-line: rgba(255,255,255,0.07); --row-hover: rgba(255,255,255,0.05); --row-sel: rgba(255,255,255,0.09); --row-sel-hover: rgba(255,255,255,0.13); --rim-top: rgba(255,255,255,0.18); --rim-bottom: rgba(255,255,255,0.05); --rim-hover: rgba(255,255,255,0.55); --rim-hover-bottom: rgba(255,255,255,0.16); --hairline: rgba(255,255,255,0.60); --hairline-hover: rgba(255,255,255,0.95); --hover-fill: rgba(255,255,255,0.04); --chip-on: rgba(255,255,255,0.12); --chip-on-edge: inset 0 1px 0 rgba(255,255,255,0.16); --float-bg: color-mix(in srgb, var(--bg-raised) calc(100% - var(--dialog-transparency, 30) * 1%), transparent); --slider-track: rgba(255,255,255,0.07); --slider-track-edge: inset 0 1px 2px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06); --slider-fill: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); --slider-thumb: radial-gradient(circle at 35% 30%, #ffffff, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.55)); --slider-thumb-edge: inset 0 0 0 1px rgba(255,255,255,0.7), 0 2px 10px rgba(0,0,0,0.55), 0 0 14px -2px var(--accent-glow); } :root[data-profile="glass"][data-theme="light"] { --surface: color-mix(in srgb, #ffffff calc(100% - var(--glass-transparency, 65%)), transparent); --surface-inset: color-mix(in srgb, #f4f4f4 calc(100% - var(--glass-transparency, 65%)), transparent); --surface-tint: rgba(0,0,0,0.025); --surface-sat: 160%; --frost: color-mix(in srgb, #ffffff calc(var(--glass-frost, 3%) * 2), transparent); --edge: linear-gradient(155deg, rgba(255,255,255,0.7), rgba(255,255,255,0.12) 60%); --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 10px 28px -20px rgba(0,0,0,0.10); --glans: inset 0 1px 0 rgba(255,255,255,0.9); --glans-on: inset 0 0 0 transparent; --hover-shadow: 0 10px 26px -12px rgba(0,0,0,0.20); --select-shadow: 0 8px 24px -14px color-mix(in srgb, var(--accent) 22%, transparent); --frame-border: rgba(0,0,0,0.12); --frame-top: rgba(255,255,255,0.9); --row-line: rgba(0,0,0,0.06); --row-hover: rgba(0,0,0,0.035); --row-sel: rgba(255,255,255,0.6); --row-sel-hover: rgba(255,255,255,0.75); --rim-top: rgba(0,0,0,0.14); --rim-bottom: rgba(0,0,0,0.07); --rim-hover: rgba(0,0,0,0.28); --rim-hover-bottom: rgba(0,0,0,0.14); --hairline: rgba(0,0,0,0.22); --hairline-hover: rgba(0,0,0,0.42); --hover-fill: rgba(255,255,255,0.35); --chip-on: rgba(255,255,255,0.75); --chip-on-edge: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.08); --float-bg: color-mix(in srgb, #ffffff calc(100% - var(--dialog-transparency, 30) * 1%), transparent); --slider-track: rgba(0,0,0,0.06); --slider-track-edge: inset 0 1px 2px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.9); --slider-fill: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); --slider-thumb: radial-gradient(circle at 35% 30%, #ffffff, #f5f5f5 55%, #e6e6e6); --slider-thumb-edge: inset 0 0 0 1px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.18), 0 0 14px -2px var(--accent-glow); } :root[data-profile="glass"]:not([data-glow="off"]) { --ambient: radial-gradient(58rem 34rem at 8% -8%, var(--accent-glow), transparent 62%), radial-gradient(46rem 30rem at 102% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%); } :root[data-profile="glass"]:not([data-render="real"]) :is(.card, .table-frame) { backdrop-filter:none; -webkit-backdrop-filter:none; } @media (prefers-reduced-transparency: reduce) { :root[data-profile="glass"][data-theme] { --surface:var(--bg-elevated); --surface-inset:var(--bg-raised); --surface-tint:var(--bg-raised); --surface-blur:0px; --surface-sat:100%; --frost:transparent; } } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent; } body { font-family:var(--font-base); background:var(--bg); color:var(--text-primary); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background 0.25s, color 0.25s; } a { color:var(--accent); } a:visited { color:var(--accent); } body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--ambient); transition:background 0.3s; } .page { position:relative; z-index:1; display:flex; min-height:100vh; } .page, .mobile-topbar { opacity:0; } html[data-app="ready"] .page, html[data-app="ready"] .mobile-topbar { opacity:1; transition:opacity 0.3s var(--ease-out); } .sidebar { width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; padding:var(--nav-line-top) var(--sidebar-pad) 2rem; scrollbar-width:none; display:flex; flex-direction:column; transition:border-color 0.25s, background 0.25s; } .sidebar::-webkit-scrollbar { display:none; } #splash { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:var(--bg); transition:opacity 0ms ease; } html[data-splash="on"] #splash { display:flex; } #splash.is-done { opacity:0; pointer-events:none; } .splash-stage { display:flex; flex-direction:column; align-items:center; gap:2.4rem; padding:1rem; } .splash-band { display:flex; align-items:center; gap:clamp(1.2rem, 4vmin, 2.6rem); } .splash-logo { width:clamp(9rem, 38vmin, 17rem); aspect-ratio:1; background:var(--text-primary); -webkit-mask:var(--logo-mask) center / contain no-repeat; mask:var(--logo-mask) center / contain no-repeat; animation:splashLogo 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .splash-wing { display:flex; flex-direction:column; gap:0.55rem; } .splash-wing--l { align-items:flex-end; } .splash-wing--r { align-items:flex-start; } .splash-wing span { position:relative; display:block; height:1px; width:clamp(4rem, 17vw, 15rem); background:var(--border-mid); transform:scaleX(0); animation:splashDraw 0.8s cubic-bezier(0.25, 0.8, 0.3, 1) 0.55s both; } .splash-wing span:nth-child(2) { height:3px; } .splash-wing span:nth-child(1), .splash-wing span:nth-child(3) { width:clamp(2.4rem, 10.5vw, 9.5rem); } .splash-wing--l span { transform-origin:right center; } .splash-wing--r span { transform-origin:left center; } .splash-wing span::after { content:""; position:absolute; inset:0; background:var(--accent); opacity:0; animation:splashIgnite 0.9s linear 1.35s both; } .splash-title { white-space:nowrap; font-size:clamp(1rem, 3.2vmin, 1.5rem); font-weight:300; letter-spacing:0.42em; padding-left:0.42em; text-transform:uppercase; color:var(--text-primary); animation:splashTitle 0.9s ease 0.9s both; } @keyframes splashLogo { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } } @keyframes splashDraw { to { transform:scaleX(1); } } @keyframes splashIgnite { 0% { opacity:0; } 8% { opacity:0.9; } 14% { opacity:0.1; } 26% { opacity:0.75; } 34% { opacity:0.2; } 48% { opacity:1; } 100% { opacity:1; } } @keyframes splashTitle { from { opacity:0; letter-spacing:0.6em; } to { opacity:1; letter-spacing:0.42em; } } .splash-portfolio { margin-top:0.9rem; font-size:clamp(0.8rem, 2vmin, 0.95rem); font-weight:300; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-sec); animation:splashTitle 0.9s ease 1.4s both; } .splash-portfolio::after { content:var(--portfolio-name, ""); } html:not([data-portfolio]) .splash-portfolio { display:none; } .splash-quote { display:none; max-width:min(34rem, 82vw); min-height:7.7em; text-align:center; font-size:clamp(0.85rem, 2.2vmin, 1rem); font-weight:300; font-style:italic; letter-spacing:0.06em; line-height:1.9; color:var(--text-sec); } #splash.is-manual .splash-quote { display:block; } .splash-quote-caret { display:inline-block; width:1px; height:1em; margin-left:2px; background:currentColor; vertical-align:-0.15em; animation:splashCaret 1s steps(1) infinite; } #splash.is-typed .splash-quote-caret { display:none; } @keyframes splashCaret { 50% { opacity:0; } } @media (prefers-reduced-motion: reduce) { #splash { transition:none; } #splash .splash-logo, #splash .splash-wing span, #splash .splash-title, #splash .splash-portfolio { animation:none; transform:none; opacity:1; } #splash .splash-wing span::after { animation:none; opacity:1; } #splash .splash-quote-caret { animation:none; } } .login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--bg); } .login-form { display:flex; flex-direction:column; align-items:center; gap:0.7rem; width:min(22rem, 88vw); animation:loginRise 0.7s ease 1.5s both; } .login-row { display:flex; align-items:stretch; justify-content:center; gap:0.5rem; width:100%; } .login-row .btn { flex:0 0 auto; } @media (max-width:768px) { .login-row { flex-direction:column; } .login-row .btn { width:100%; } } .login-input { flex:1 1 auto; } .login-error { min-height:1.1em; margin:0; text-align:center; } @keyframes loginRise { from { opacity:0; transform:translateY(0.6rem); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .login-page .splash-logo, .login-page .splash-wing span, .login-page .splash-title, .login-page .splash-portfolio, .login-form { animation:none; transform:none; opacity:1; } .login-page .splash-wing span::after { animation:none; opacity:1; } } .sidebar-logo { font-size:1rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:2rem; display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-align:center; cursor:pointer; } .sidebar-portfolio { margin-top:-1.4rem; margin-bottom:2rem; text-align:center; font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-sec); } .sidebar-portfolio::after { content:var(--portfolio-name, ""); } html:not([data-portfolio]) .sidebar-portfolio { display:none; } .mobile-topbar-portfolio { font-size:0.6rem; font-weight:600; line-height:1.2; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mobile-topbar-portfolio::after { content:var(--portfolio-name, ""); } html:not([data-portfolio]) .mobile-topbar-portfolio { display:none; } .sidebar-logo-icon { width:40px; height:40px; background:var(--accent); border-radius:10px; display:grid; align-content: end; place-items:center; flex-shrink:0; transition:background 0.45s var(--ease-out); } .sidebar-logo-icon::before { content:""; width:30px; height:30px; background:#fff; -webkit-mask:var(--logo-mask) center / contain no-repeat; mask:var(--logo-mask) center / contain no-repeat; transform:translateY(2px); } [data-theme="dark"] .sidebar-logo-icon::before { background:#000; } .sidebar-logo .sidebar-logo-icon { width:56px; height:45px; border-radius:8px; } .sidebar-logo .sidebar-logo-icon::before { width:46px; height:46px; } .mobile-topbar-logo .sidebar-logo-icon { width:40px; height:32px; border-radius:6px; } .mobile-topbar-logo .sidebar-logo-icon::before { width:33px; height:33px; transform:translateY(1px); } .sidebar-section-title { text-align:right; padding:1.4rem 0.6rem 0.5rem 0; } .sidebar-section-title:first-child { padding-top:0; } #nav { display:flex; flex-direction:column; flex:1; padding-bottom:1rem; } .nav-spacer { flex:1 1 auto; min-height:1.8rem; } .sidebar a { display:block; font-size:0.92rem; font-weight:600; letter-spacing:0.01em; color:var(--text-sec); text-decoration:none; padding:0.32rem 0.6rem; text-align:right; transition:color 0.15s; margin:1px 0; cursor:pointer; } .sidebar a:hover { color:var(--text-primary); } .sidebar a.active { color:var(--accent-text); } .sidebar a.has-attention { display:flex; align-items:center; justify-content:flex-end; gap:0.4rem; } .sidebar a.is-customizable { display:flex; align-items:center; justify-content:flex-end; gap:0.4rem; } .sidebar a .nav-attention { order:-1; } .sidebar a .nav-edit-toggle { order:-2; } .nav-edit-toggle { flex:none; display:inline-flex; align-items:center; color:var(--text-sec); opacity:0; cursor:pointer; padding:0.12rem; border-radius:var(--radius-sm); transition:opacity 0.12s, color 0.12s, background 0.12s; } .sidebar a.is-customizable:hover .nav-edit-toggle { opacity:0.5; } .sidebar a.is-customizable .nav-edit-toggle.is-on { opacity:1; color:var(--accent); } .sidebar a.is-customizable .nav-edit-toggle:hover { opacity:1; color:var(--accent); background:var(--accent-soft); } .sidebar a .nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; } .nav-attention { --attn-c:var(--accent); display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--attn-c); vertical-align:middle; } .nav-attention.is-problem { --attn-c:var(--sig-red); } .nav-attention.is-dim { opacity:0.4; box-shadow:none; animation:none; } @media (prefers-reduced-motion: no-preference) { .nav-attention { animation:attn-pulse 2s ease-in-out infinite; } } .controls { margin-top:auto; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:0.75rem; } .pill-toggle { display:flex; background:var(--pill-track, var(--bg-raised)); border-radius:var(--radius-full); padding:3px; gap:2px; } .slider { -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:0; background:transparent; cursor:pointer; --pct:50%; } .slider::-webkit-slider-runnable-track { height:6px; border-radius:var(--radius-full); background:var(--slider-fill) 0 0 / var(--pct) 100% no-repeat, var(--slider-track); box-shadow:var(--slider-track-edge); } .slider::-moz-range-track { height:6px; border-radius:var(--radius-full); background:var(--slider-track); box-shadow:var(--slider-track-edge); } .slider::-moz-range-progress { height:6px; border-radius:var(--radius-full); background:var(--slider-fill); } .slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px; border:0; border-radius:50%; background:var(--slider-thumb); box-shadow:var(--slider-thumb-edge); transition:transform 0.15s var(--ease-out), box-shadow 0.15s; } .slider::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:var(--slider-thumb); box-shadow:var(--slider-thumb-edge); transition:transform 0.15s var(--ease-out), box-shadow 0.15s; } .slider:hover::-webkit-slider-thumb { transform:scale(1.1); } .slider:hover::-moz-range-thumb { transform:scale(1.1); } .slider:active::-webkit-slider-thumb { transform:scale(1.18); box-shadow:var(--slider-thumb-edge), 0 0 0 6px var(--accent-soft); } .slider:active::-moz-range-thumb { transform:scale(1.18); box-shadow:var(--slider-thumb-edge), 0 0 0 6px var(--accent-soft); } .slider:focus-visible { outline:none; } .slider:focus-visible::-webkit-slider-thumb { box-shadow:var(--slider-thumb-edge), 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); } .slider:focus-visible::-moz-range-thumb { box-shadow:var(--slider-thumb-edge), 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); } .slider-row { display:grid; grid-template-columns:7.5rem minmax(0, 1fr) 3.2rem; align-items:center; gap:0.75rem; font-size:0.8rem; color:var(--text-sec); } .slider-row output { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-primary); } .slider-row--wide { grid-template-columns:10rem minmax(0, 1fr) 3.2rem; } [data-theme="dark"] :is(.dialog, .card) { --pill-track:rgba(0,0,0,0.30); } [data-theme="light"] :is(.dialog, .card) { --pill-track:rgba(0,0,0,0.06); } .accent-dots { display:flex; flex-wrap:wrap; gap:0.5rem; } .accent-dots button { width:22px; height:22px; padding:0; border-radius:50%; border:2px solid transparent; background:var(--accent); background-clip:padding-box; box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:border-color 0.15s, transform 0.15s; } .accent-dots button:hover { transform:scale(1.12); } .accent-dots button.on { border-color:var(--text-primary); } .accent-dots button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .pill-toggle button { flex:1; border:none; background:transparent; color:var(--text-sec); font-family:var(--font-base); font-size:0.75rem; font-weight:500; padding:0.3rem 0.5rem; border-radius:var(--radius-full); cursor:pointer; transition:all 0.2s; white-space:nowrap; } .pill-toggle button.on { background:var(--accent); color:#fff; } [data-theme="dark"] .pill-toggle button.on { color:#000; } .controls { gap:0.5rem; } .controls .pill-toggle { padding:2px; } .controls .pill-toggle button { font-size:0.66rem; padding:0.2rem 0.4rem; } .main { flex:1; padding:var(--main-pad-y) var(--main-pad-x); max-width:none; min-width:0; } .main::before, .page-aside::after { content:""; position:fixed; pointer-events:none; top:var(--nav-line-top); bottom:var(--nav-line-bottom); width:var(--nav-line-cap); border:1px solid var(--border-mid); border-left:none; border-top-right-radius:calc(var(--nav-line-cap) - 1px); border-bottom-right-radius:calc(var(--nav-line-cap) - 1px); transition:border-color 0.25s; } .main::before { left:calc(var(--sidebar-w) - var(--nav-line-cap)); } .sidebar a.active { position:relative; } .sidebar a.active::after { content:""; position:absolute; z-index:1; top:0; bottom:0; right:calc(-1 * var(--sidebar-pad) - 1px); width:3px; border-radius:2px; background:var(--accent); } .page-layout { display:flex; align-items:flex-start; gap:2rem; } html:has(.page-layout--narrow) { --page-aside-w:var(--sidebar-w); } html:has(.page-layout > .page-aside) { --hint-line-x:calc(var(--sidebar-w) + var(--page-aside-w)); } html:has(.page-layout > .page-aside) { --aside-vh-offset:1.7rem; } .page-aside { flex:0 0 var(--page-aside-w); width:var(--page-aside-w); margin-left:calc(-1 * var(--main-pad-x)); padding:0 var(--sidebar-pad) 2rem; position:sticky; top:var(--aside-vh-offset); height:calc(100vh - var(--aside-vh-offset) - var(--main-pad-y)); overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:1.6rem; z-index:20; } .page-aside::-webkit-scrollbar { display:none; } .page-aside .tabset { flex-direction:column; gap:0.1rem; padding:0; margin:0 0 0.2rem; border-bottom:none; } .page-aside .tabset::before { display:none; } .page-aside .tabset-tab { position:relative; text-align:right; padding:0.5rem 0.2rem; margin:0; border-bottom:none; border-radius:var(--radius-sm); } .page-aside .tabset-tab.is-on::after { content:""; position:absolute; z-index:1; top:0; bottom:0; right:calc(-1 * var(--sidebar-pad) - 1px); width:3px; border-radius:2px; background:var(--accent); } .page-aside::after { left:calc(var(--sidebar-w) + var(--page-aside-w) - var(--nav-line-cap)); } .page-body { flex:1; min-width:0; } @media (max-width:1280px) { html:has(.page-layout > .page-aside) { --hint-line-x:var(--sidebar-w); } .page-layout { --page-aside-w:auto; display:block; } .page-aside { position:relative; top:auto; width:auto; height:auto; overflow:visible; margin:0 0 1.8rem; padding:0; } .page-aside::after { display:none; } .page-aside .tabset { flex-direction:row; flex-wrap:wrap; gap:0.5rem; } .page-aside .tabset-tab { text-align:left; border-bottom:2px solid transparent; } .page-aside .tabset-tab.is-on { border-bottom-color:var(--accent); } .page-aside .tabset-tab.is-on::after { display:none; } } .page-header { display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; } .page-title { font-size:1.4rem; font-weight:700; letter-spacing:-0.02em; } .page-title svg { width:1.15em; height:1.15em; vertical-align:-0.18em; margin-right:0.35em; } html[data-pagetitle="off"] .page-header:has(> h1.page-title) { display:none; } html[data-pagetitle="off"] { --table-vh-offset:5.3rem; --sig-chrome:3.5rem; --aside-vh-offset:1.7rem; --page-head-h:0rem; } html[data-pagetitle="off"] .dashboard-grid { margin-top:0; } .t-h3 { font-size:1.1rem; font-weight:600; letter-spacing:-0.01em; line-height:1.3; } .t-h4 { font-size:0.9rem; font-weight:600; line-height:1.4; } .t-body { font-size:0.93rem; font-weight:400; line-height:1.65; color:var(--text-primary); } .t-body-sm { font-size:0.82rem; line-height:1.6; color:var(--text-sec); } .t-caption { font-size:0.72rem; line-height:1.5; color:var(--text-sec); } .t-label { font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-sec); } .t-label--ter { color:var(--text-ter); } .t-mono { font-size:0.82rem; font-family:var(--font-mono); color:var(--accent); } .t-num-lg { font-size:2.4rem; font-weight:700; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } .t-num-md { font-size:1.4rem; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; } .t-pos { color:var(--pos); } .t-neg { color:var(--neg); } .t-muted { color:var(--text-sec); } .t-accent { color:var(--accent); } .delta { display:inline-block; width:max-content; padding:0.05rem 0.45rem; border-radius:var(--radius-full); font-weight:600; font-variant-numeric:tabular-nums; } .delta.t-pos { background:var(--pos-bg); } .delta.t-neg { background:var(--neg-bg); } .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border:none; cursor:pointer; font-family:var(--font-base); font-weight:600; letter-spacing:-0.01em; transition:opacity 0.15s, transform 0.1s, box-shadow 0.2s; white-space:nowrap; text-decoration:none; } .btn:active { transform:scale(0.97); } .btn:disabled { opacity:0.35; cursor:not-allowed; } .btn:disabled:active { transform:none; } .btn-lg { font-size:0.9rem; padding:0.85rem 1.8rem; border-radius:var(--radius-md); } .btn-md { font-size:0.82rem; padding:0.65rem 1.3rem; border-radius:var(--radius-md); } .btn-sm { font-size:0.75rem; padding:0.45rem 0.9rem; border-radius:var(--radius-sm); } .btn-xs { font-size:0.68rem; padding:0.3rem 0.7rem; border-radius:var(--radius-sm); } .btn--field { padding-block:0.65rem; font-size:0.88rem; } .btn-new { width:var(--tctl-h); height:var(--tctl-h); padding:0; align-self:center; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); color:var(--accent); background:var(--neutral-bg); border:1px solid var(--border); transition:color 0.15s, background 0.15s, border-color 0.15s; } .btn-new:hover { background:var(--accent); border-color:var(--accent); color:#fff; } [data-theme="dark"] .btn-new:hover { color:#000; } .tx-link { position:absolute; left:0.4rem; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:50%; background:var(--text-ter); opacity:0; cursor:pointer; transition:opacity 0.12s var(--ease-out), transform 0.12s var(--ease-out), background 0.15s; } .tx-link::before { content:''; position:absolute; inset:-7px; border-radius:var(--radius-full); } .tx-link.is-matched { opacity:1; background:var(--accent); } tbody tr:hover .tx-link, .mv-row:hover .tx-link, .tx-link.is-open, .tx-link:focus-visible { opacity:1; transform:translateY(-50%) scale(1.9); outline:none; } .match-pop { position:fixed; z-index:1000; min-width:280px; max-width:340px; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:0.5rem; font-size:0.82rem; } [data-theme="dark"] .match-pop { background:var(--bg-raised); } .conv-pop { position:fixed; z-index:1000; min-width:210px; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:0.7rem; font-size:0.82rem; } [data-theme="dark"] .conv-pop { background:var(--bg-raised); } .conv-head { margin-bottom:0.55rem; } .conv-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.45rem; } .conv-label { flex:0 0 4.5rem; color:var(--text-sec); } .conv-row .input { flex:1; min-width:0; } .conv-apply { width:100%; margin-top:0.25rem; } .new-menu { position:fixed; z-index:1000; min-width:190px; max-width:92vw; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:0.4rem; display:flex; flex-direction:column; gap:0.2rem; } [data-theme="dark"] .new-menu { background:var(--bg-raised); } .new-menu .btn { margin:0; padding:0.55rem 0.9rem; border-radius:var(--radius-sm); transition:color 0.15s, background 0.15s, border-color 0.15s; } .new-menu .btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; } [data-theme="dark"] .new-menu .btn:hover { color:#000; } .new-menu .new-menu-item { display:block; width:100%; text-align:left; white-space:nowrap; } .merge-menu { width:260px; max-width:92vw; padding:0.75rem; gap:0.5rem; } .merge-menu .t-label { margin:0; } .merge-menu .input { width:100%; } .merge-menu [data-merge-status] { white-space:normal; line-height:1.35; } .conv-field { position:relative; } .conv-field .input { width:100%; padding-right:1.7rem; } .conv-trigger { position:absolute; top:50%; right:0.3rem; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; padding:0; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--text-sec); cursor:pointer; opacity:0; transition:opacity .12s, color .15s, background .15s; } .conv-field:hover .conv-trigger, .conv-field:focus-within .conv-trigger { opacity:1; } .conv-trigger:hover { color:var(--accent); background:var(--bg-overlay); } .table-wrap input[type="number"] { appearance:textfield; -moz-appearance:textfield; } .table-wrap input[type="number"]::-webkit-outer-spin-button, .table-wrap input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .input[type="number"] { appearance:textfield; -moz-appearance:textfield; } .input[type="number"]::-webkit-outer-spin-button, .input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .match-pop-head { padding:0.3rem 0.35rem 0.45rem; } .match-pop-link { display:flex; align-items:flex-start; gap:0.5rem; padding:0.5rem 0.4rem; } .match-pop-cand { display:flex; align-items:flex-start; gap:0.5rem; padding:0.55rem 0.4rem; border-radius:var(--radius-sm); cursor:pointer; } .match-pop-cand:hover { background:var(--neutral-bg); } .match-pop-main { flex:1; min-width:0; } .match-pop-main .l1 { font-weight:600; line-height:1.3; } .match-pop-main .l2 { color:var(--text-sec); font-size:0.74rem; line-height:1.35; margin-top:0.1rem; } .match-pop-method { display:inline-block; margin-top:0.3rem; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-ter); } .match-pop-x { flex-shrink:0; border:none; background:none; color:var(--text-ter); cursor:pointer; font-size:1.05rem; line-height:1; padding:0.1rem 0.35rem; border-radius:var(--radius-sm); } .match-pop-x:hover { color:var(--neg); background:var(--neg-bg); } .match-pop-sep { border-top:1px solid var(--border-mid); margin:0.4rem 0; } .match-pop-filter { margin:0.15rem 0 0.5rem; } .match-pop-list { max-height:240px; overflow-y:auto; } .match-pop-empty { color:var(--text-ter); padding:0.5rem 0.35rem; } .btn-primary { background:var(--accent); color:#fff; } [data-theme="dark"] .btn-primary { color:#000; } .btn-primary:hover { opacity:0.88; } [data-theme="dark"][data-accent="green"] .btn-primary { box-shadow:0 0 20px var(--accent-glow); } [data-theme="dark"][data-accent="lila"] .btn-primary { box-shadow:0 0 20px var(--accent-glow); } .btn-secondary { background:var(--bg-raised); color:var(--text-primary); border:1px solid var(--border-mid); } .btn-secondary:hover { background:var(--bg-overlay); } .btn-ghost { background:transparent; color:var(--text-primary); border:1px solid var(--border-mid); } .btn-ghost:hover { background:var(--neutral-bg); } .btn-danger { background:var(--neg-bg); color:var(--neg); } .btn-danger:hover { opacity:0.8; } .badge { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.7rem; font-weight:600; padding:0.25rem 0.65rem; border-radius:var(--radius-full); letter-spacing:0.02em; border:1px solid color-mix(in srgb, currentColor 30%, transparent); } .badge svg { width:0.95em; height:0.95em; flex-shrink:0; } .badge-icon { width:28px; height:28px; padding:0; justify-content:center; } .badge-icon svg { width:15px; height:15px; } .badge-accent { background:var(--accent-soft); color:var(--accent-text); } .badge-pos { background:var(--pos-bg); color:var(--pos); } .badge-neg { background:var(--neg-bg); color:var(--neg); } .badge-neutral { background:var(--neutral-bg); color:var(--text-sec); } .badge-outline { background:transparent; color:var(--text-sec); border:1px solid var(--border-mid); } .conn-frame { margin-bottom:1.4rem; } .conn-usedby { margin:0.2rem 0 1rem; } .connp-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:0.8rem; margin-bottom:1.1rem; } .connp { position:relative; min-width:0; padding:0.95rem 1.15rem 2.7rem; border:1px solid var(--border-mid); border-radius:var(--radius-md); background:var(--bg-raised); cursor:pointer; transition:border-color 0.15s, background 0.15s; } .connp:hover { border-color:var(--text-ter); } .connp.is-active { border-color:var(--accent); background:var(--accent-soft); } .connp-dot { position:absolute; top:0.75rem; right:0.75rem; width:8px; height:8px; border-radius:50%; background:var(--border-mid); } .connp-dot.dot-ok { background:var(--pos); } .connp-dot.dot-fail { background:var(--neg); } .connp-name { font-weight:600; padding-right:1.4rem; } .connp-url { font-family:var(--font-mono); font-size:0.75rem; color:var(--text-ter); margin-top:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .connp-hover { position:absolute; right:0.55rem; bottom:0.55rem; display:flex; gap:0.3rem; opacity:0; transition:opacity 0.15s; } .connp:hover .connp-hover, .connp:focus-within .connp-hover { opacity:1; } .connp-mini { border:1px solid var(--border-mid); background:var(--bg-elevated); color:var(--text-sec); border-radius:var(--radius-sm); width:1.7rem; height:1.7rem; display:grid; place-items:center; cursor:pointer; font-size:0.78rem; } .connp-mini:hover { color:var(--text-primary); } .conn-foot { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; } .conn-result { font-size:0.82rem; color:var(--text-sec); opacity:1; transition:opacity 0ms ease; } .conn-result.is-fading { opacity:0; } .conn-result.is-ok { color:var(--pos); } .conn-result.is-fail { color:var(--neg); } .card { position:relative; background:var(--surface); --radius:var(--radius-lg); --padding:1.8rem; --padding-x:var(--padding); border-radius:var(--radius); padding:var(--padding); box-shadow:var(--shadow-1); backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-sat)); -webkit-backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-sat)); transition:background 0.25s, box-shadow 0.25s; } [data-theme="light"] .card { border:1px solid var(--border); } [data-theme="dark"] .card { border:1px solid var(--border); } .card::before { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--edge); pointer-events:none; } .card > * { position:relative; } .card-flat { background:var(--surface); border:1px solid var(--border); --radius:var(--radius-lg); --padding:1.4rem; border-radius:var(--radius); padding:var(--padding); } .card > .card, .card > .card-flat, .card > .table-wrap, .card-flat > .card, .card-flat > .table-wrap, .card .alert, .card .input, .card-flat .input, .card .btn, .card-flat .btn, .field .btn, .card .label-combo-btn, .card-flat .label-combo-btn, .field .field-input { border-radius: max(4px, calc(var(--radius) - var(--padding))); } .t-value { font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); letter-spacing:-0.025em; } .card-cols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; align-items:start; } .card-stack { display:flex; flex-direction:column; gap:1.5rem; align-items:stretch; } @media (max-width:1040px) { .card-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:700px) { .card-cols { grid-template-columns:1fr; } } .dashboard-grid { --dash-gap:1.5rem; display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--dash-gap); row-gap:var(--dash-gap); grid-auto-rows:3rem; align-items:start; margin-top:0.5rem; } .dashboard-cell { min-width:0; min-height:0; display:flex; flex-direction:column; } .dashboard-grid > .dashboard-cell.is-sized { align-self:stretch; } .dashboard-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; } .dashboard-body > * { flex:1 1 auto; } .net-card, .card.clockw, .metrics-card, .standing-card { display:flex; flex-direction:column; } .net-card > #net-body { margin-top:auto; margin-bottom:auto; } .standing-card > #standing-body { margin-top:auto; margin-bottom:auto; } .card.clockw > .clockw-world { margin-top:auto; } .card.clockw > .clockw-list { margin-bottom:auto; } .card.clockw.clockw--no-ex > .clockw-world { margin-bottom:auto; } .metrics-card > .metrics-strip { margin-top:auto; } .metrics-card > :last-child { margin-bottom:auto; } .metrics-strip { display:flex; flex-wrap:wrap; gap:0.6rem 1.25rem; } .metric-tile { display:flex; align-items:center; gap:0.5rem; min-width:5rem; } .metric-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--text-ter); } .metric-dot.is-ok { background:var(--sig-green); } .metric-dot.is-warn { background:var(--sig-yellow); } .metric-dot.is-bad { background:var(--sig-red); } .metric-meta { line-height:1.15; } .clockw { display:flex; flex-direction:column; } .clockw-world { display:flex; justify-content:center; align-items:flex-start; gap:0.6rem; flex-wrap:nowrap; margin:0.3rem 0 0.7rem; } @media (min-width:769px) { .dashboard-cell[data-w="1"] .clockw-world, .dashboard-cell[data-w="2"] .clockw-world { flex-direction:column; align-items:center; gap:0.5rem; } .dashboard-cell[data-w="1"] .clockw-world .clockw-clock, .dashboard-cell[data-w="2"] .clockw-world .clockw-clock { flex:0 0 auto; width:100%; max-width:84px; } } .clockw-clock { flex:1 1 0; min-width:0; max-width:104px; display:flex; flex-direction:column; align-items:center; gap:0.3rem; } .clockw-clock .clockw-face { width:100%; height:auto; } .clockw-clock-cap { text-align:center; line-height:1.15; min-width:0; max-width:100%; } .clockw-clock-name { display:block; font-size:0.68rem; color:var(--text-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clockw-clock.is-local .clockw-clock-name { color:var(--text-primary); font-weight:600; } .clockw-clock-time { display:block; font-family:var(--font-mono); font-size:0.78rem; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; } .clockw-clock-date { display:block; font-size:0.62rem; color:var(--text-ter); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clockw-face { display:block; } .clockw-dial { fill:var(--bg-elevated); stroke:var(--border); stroke-width:1.5; transition:stroke 0.3s, filter 0.3s; } .clockw-tick { stroke:var(--text-ter); stroke-width:0.8; } .clockw-tick.is-major { stroke:var(--text-sec); stroke-width:1.6; } .clockw-hand { stroke-linecap:round; } .clockw-hour { stroke:var(--text-primary); stroke-width:3; } .clockw-min { stroke:var(--text-primary); stroke-width:2; } .clockw-sec { stroke:var(--accent); stroke-width:1; } .clockw-cap { fill:var(--text-primary); } .clockw-face.is-open .clockw-dial { stroke:var(--sig-green); stroke-width:2; } .clockw-list { display:flex; flex-direction:column; } .clockw-list-head { margin:0.9rem 0 0.4rem; padding:0 0.3rem; } .clockw-row { display:flex; align-items:center; gap:0.7rem; padding:0.5rem 0.3rem; border-radius:var(--radius-sm); } .clockw-mini { flex:none; display:inline-flex; } .clockw-mini .clockw-face { width:32px; height:32px; } .clockw-ex-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.05rem; } .clockw-ex-name { min-width:0; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clockw-ex-sub { font-size:0.74rem; color:var(--text-ter); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clockw-open { flex:none; font-size:0.8rem; font-variant-numeric:tabular-nums; color:var(--text-ter); white-space:nowrap; } @media (prefers-reduced-motion: no-preference) { .clockw-row.is-flash { animation:clockw-open-flash 1.5s ease-out 1; } } @keyframes clockw-open-flash { 0% { background:var(--sig-green-zone); } 100% { background:transparent; } } .dash-settings { position:absolute; top:2.5rem; left:50%; transform:translateX(-50%); z-index:4; min-width:210px; max-width:88%; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,0.35); padding:0.55rem 0.6rem; max-height:280px; overflow:auto; } [data-theme="dark"] .dash-settings { background:var(--bg-raised); } .dash-settings[hidden] { display:none; } .amount-second { margin-left:0.6em; color:var(--text-sec); } .dash-settings.dash-settings--wide { width:max-content; max-width:calc(100vw - 2rem); } .dash-set-row { display:flex; flex-direction:column; gap:0.3rem; } .dash-set-row + .dash-set-row { margin-top:0.6rem; padding-top:0.55rem; border-top:1px solid var(--border); } .dash-set-select { font-size:0.8rem; padding:0.28rem 0.45rem; } .dashboard-cell.is-settings-open .dash-edit-grip, .dashboard-cell.is-settings-open .dash-edit-wsel-wrap, .dashboard-cell.is-settings-open .dash-edit-x { opacity:0.35; pointer-events:none; } .dashboard-cell.is-settings-open .dash-edit-cfg { color:var(--accent); } .clockw-settings-title { margin-bottom:0.4rem; } .clockw-check { display:flex; align-items:center; gap:0.6rem; padding:0.25rem 0.15rem; font-size:0.85rem; color:var(--text-primary); cursor:pointer; } .clockw-check-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .clockw-settings-sep { border-top:1px solid var(--border); margin:0.45rem 0; } .net-ladder { display:flex; align-items:center; justify-content:flex-end; gap:0.4rem; font-weight:600; color:var(--text-primary); } .net-quote { margin-top:0.5rem; font-style:italic; color:var(--text-sec); line-height:1.5; } .net-quote strong { font-style:normal; font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; } .net-card { position:relative; overflow:hidden; } .net-watermark { position:absolute; top:0.4rem; right:-0.7rem; z-index:0; font-size:8rem; line-height:1; opacity:0.09; filter:grayscale(1); pointer-events:none; user-select:none; } .net-card .t-label, .net-card #net-body { position:relative; z-index:1; } @media (max-width:768px) { .dashboard-grid { grid-auto-rows:auto !important; } .dashboard-grid > .dashboard-cell { grid-column:1 / -1 !important; grid-row:auto !important; } .dashboard-grid > .dashboard-cell .dashboard-body { overflow:visible; } } #dashboard-root { position:relative; } .dashboard-grid { transition:opacity 0.2s var(--ease-out); } .dashboard-grid.is-loading { opacity:0; } .dashboard-skeleton { position:absolute; inset:0; z-index:1; } .dashboard-skel-grid { --dash-gap:1.5rem; display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--dash-gap); align-items:start; } @media (max-width:768px) { .dashboard-skel-grid > .dashboard-skel-cell { grid-column:1 / -1 !important; } } .dashboard-cell { position:relative; } .page-tools { display:flex; align-items:center; gap:0.5rem; margin-left:auto; align-self:center; } .page-tools:empty { display:none; } .dashboard-grid.is-editing > .dashboard-cell { border-radius:var(--radius-lg); isolation:isolate; } .dashboard-grid.is-editing > .dashboard-cell::before { content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none; border:1.5px solid var(--accent-mid); border-radius:calc(var(--radius-lg) + 6px); background:transparent; transition:border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s var(--ease-out); } .dashboard-grid.is-editing > .dashboard-drop-preview { z-index:2; pointer-events:none; border-radius:var(--radius-lg); border:2px dashed var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); } .dashboard-grid.is-editing > .dashboard-cell.is-drop-swap::before { border-color:var(--accent); border-width:2px; box-shadow:0 0 0 1px var(--accent), 0 8px 26px var(--accent-glow); background:var(--accent-soft); } .dashboard-grid.is-editing > .dashboard-cell.is-dragging { opacity:0.4; } .dashboard-grid.is-editing > .dashboard-cell.is-dragging::before { border-color:var(--border); box-shadow:none; background:transparent; } .dashboard-grid.is-dragging-active { user-select:none; -webkit-user-select:none; } .dash-edit-grip { cursor:grab; touch-action:none; color:var(--text-ter); display:inline-flex; align-items:center; padding:0.15rem; border-radius:3px; line-height:0; } .dash-edit-grip:hover { color:var(--accent); background:var(--neutral-bg); } .dashboard-cell.is-dragging .dash-edit-grip { cursor:grabbing; } .dashboard-drag-ghost { position:fixed; z-index:1000; pointer-events:none; opacity:0.92; transform:rotate(-1.5deg); filter:drop-shadow(0 14px 30px rgba(0,0,0,0.38)); } .dashboard-drag-ghost > .card { margin:0; outline:1.5px solid var(--accent); outline-offset:2px; } .dash-edit-bar { position:absolute; top:0.6rem; left:50%; right:auto; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:0.1rem; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); padding:0.15rem 0.3rem; box-shadow:0 2px 10px rgba(0,0,0,0.2); } [data-theme="dark"] .dash-edit-bar { background:var(--bg-raised); } .dash-edit-bar button { background:none; border:0; cursor:pointer; color:var(--text-sec); display:inline-flex; align-items:center; padding:0.15rem; border-radius:3px; line-height:0; } .dash-edit-bar button:hover { color:var(--accent); background:var(--neutral-bg); } .dash-edit-bar .chev-btn { padding:0.15rem; } .dash-edit-wsel-wrap { display:inline-flex; align-items:center; gap:1px; } .dash-edit-wsel { appearance:none; -webkit-appearance:none; background:var(--bg-raised); border:1px solid var(--border-mid); border-radius:3px; color:var(--text-primary); font:inherit; font-size:0.7rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; padding:0.12rem 0.3rem; cursor:pointer; text-align:right; } .dash-edit-wsel option { text-align:right; } .dash-edit-wsel:hover { border-color:var(--accent); } .dash-edit-wsel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); } .dash-edit-x:hover { color:var(--neg, #e5484d) !important; background:none !important; } .dash-profiles { display:flex; flex-direction:column; gap:0.25rem; min-width:9rem; max-width:14rem; } .dash-profile-list { display:flex; flex-direction:column; background:var(--bg-raised); border:1px solid var(--border-mid); border-radius:var(--radius-sm); padding:0.15rem; max-height:9rem; overflow:auto; } .dash-profile-item { display:block; width:100%; text-align:left; background:none; border:0; border-radius:3px; cursor:pointer; color:var(--text-primary); font:inherit; font-size:0.78rem; padding:0.28rem 0.45rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-profile-item:hover { background:var(--neutral-bg); } .dash-profile-item.is-active { background:var(--accent-soft); color:var(--accent); font-weight:600; } .dash-profile-actions { display:flex; justify-content:center; gap:0.25rem; } .dash-profile-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border-mid); border-radius:var(--radius-sm); color:var(--text-sec); cursor:pointer; padding:0.3rem 0.6rem; line-height:0; } .dash-profile-btn:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); } .dash-profile-btn[data-act="profile-delete"]:hover { color:var(--neg, #e5484d); border-color:var(--neg, #e5484d); } .dash-profile-btn:disabled { opacity:0.4; cursor:default; } .nav-tools .dash-profiles { max-width:none; } .nav-tools .dash-profile-actions { justify-content:stretch; } .nav-tools .dash-profile-btn { flex:1 1 0; } .dash-add-bar { display:flex; align-items:center; justify-content:center; z-index:2; color:var(--accent); background:var(--accent-soft); border:1.5px dashed var(--accent); border-radius:var(--radius-lg); cursor:pointer; } .dash-add-bar[hidden] { display:none; } .dash-add-bar-plus { display:inline-flex; line-height:0; padding:0.3rem; border-radius:50%; } .dash-add-bar:hover .dash-add-bar-plus { background:var(--accent-mid); } .dash-add-bar-plus svg { width:26px; height:26px; } .dash-add-room { visibility:hidden; pointer-events:none; } .dash-add-pop { position:fixed; top:auto; right:auto; margin-top:0; z-index:60; width:max-content; max-width:min(20rem, calc(100vw - 1rem)); } .dash-add-mobile { display:none; } @media (max-width:768px) { .dash-add-bar, .dash-add-room { display:none !important; } .dash-add-mobile { display:block; margin-top:1rem; padding:0.6rem; border:1.5px dashed var(--accent); border-radius:var(--radius-lg); } .dash-add-mobile > .t-label { margin:0 0 0.3rem 0.5rem; } } .dashboard-add-menu { position:absolute; top:100%; right:0; margin-top:0.35rem; min-width:220px; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,0.35); padding:0.3rem; z-index:20; display:none; max-height:340px; overflow:auto; } [data-theme="dark"] .dashboard-add-menu { background:var(--bg-raised); } .dashboard-add-menu.is-open { display:block; } .dashboard-add-item { display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--text-primary); font-size:0.82rem; padding:0.4rem 0.5rem; border-radius:3px; } .dashboard-add-item:hover { background:var(--accent-soft); color:var(--accent); } .dashboard-add-empty { font-size:0.78rem; color:var(--text-sec); padding:0.4rem 0.5rem; font-style:italic; } .nav-tools { display:flex; flex-direction:column; gap:0.3rem; margin:0.35rem 0 0.7rem; padding:0 0.6rem; } .nav-tools:empty { display:none; } .nav-tools .btn { width:100%; } .nav-edit-group { position:relative; padding-bottom:0.5rem; } .nav-edit-group > .nav-tools { margin:0.3rem 0 0; } .nav-edit-group > a.active::after { display:none; } .nav-edit-group::after { content:""; position:absolute; z-index:1; top:0; bottom:0; right:calc(-1 * var(--sidebar-pad) - 1px); width:3px; border-radius:2px; background:var(--accent); } .spot-card { display:flex; flex-direction:column; justify-content:center; padding:1rem 1.1rem; --padding:1rem; --padding-x:1.1rem; } .spot-head-row { align-items:baseline; } .spot-head { display:flex; align-items:center; gap:0.35rem; } .spot-price { font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); } .spot-sub { align-items:center; margin-top:0.2rem; min-height:1.1rem; } .spark-change { font-size:0.8rem; font-weight:600; font-variant-numeric:tabular-nums; } .spark-change.delta { padding:0.1rem 0.45rem 0; } .momentum-dot { position:relative; display:inline-block; width:5px; height:5px; margin-left:0.35em; border-radius:50%; vertical-align:0.12em; } .momentum-dot::after { content:''; position:absolute; inset:-6px; } .momentum-dot.is-up { background:var(--pos); } .momentum-dot.is-down { background:var(--neg); } .range-cycle { display:flex; justify-content:flex-end; gap:0.1rem; } .range-cycle .range-cycle-btn { border-radius:var(--radius-md); } .spot-spark-wrap { margin-top:0.5rem; height:38px; } .spot-spark-empty { height:38px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:var(--text-sec); font-style:italic; } .spark-mini { position:relative; width:100%; height:100%; } .spark-mini.is-up { color:var(--pos); } .spark-mini.is-down { color:var(--neg); } .spark-mini.is-accent { color:var(--accent); } .spark-mini-svg { display:block; width:100%; height:100%; } .spark-mini-svg .spark-grad-top { stop-color:currentColor; stop-opacity:0.28; } .spark-mini-svg .spark-grad-bot { stop-color:currentColor; stop-opacity:0; } .spark-mini-clip { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .spark-mini-vline { position:absolute; top:0; bottom:0; width:1px; transform:translateX(-0.5px); background:var(--text-primary); opacity:0.5; pointer-events:none; } .spark-mini-dot { position:absolute; left:var(--spark-x, 50%); width:8px; height:8px; border-radius:50%; background:currentColor; border:2px solid var(--bg-elevated); transform:translate(-50%, -50%); pointer-events:none; } .spark-mini-mark { position:absolute; left:var(--spark-x, 50%); width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 1.5px var(--bg-elevated); transform:translate(-50%, -50%); pointer-events:none; } .spark-mini-mark.is-sell { background:var(--bg-elevated); box-shadow:0 0 0 1.5px currentColor; } .spark-mini-cmp { opacity:0.4; } .spot-spark-wrap, .sigw-spark, .wealth-spark { width:calc(100% + 2 * var(--padding-x, 0px)); margin-left:calc(-1 * var(--padding-x, 0px)); } .spark-mini-label { position:absolute; z-index:2; transform:translate(-50%, calc(-100% - 9px)); background:var(--bg-elevated); color:var(--text-sec); border:1px solid var(--border-mid); border-radius:var(--radius-sm); padding:0.2rem 0.45rem; font-size:0.7rem; font-weight:500; line-height:1.35; font-variant-numeric:tabular-nums; white-space:pre-line; width:max-content; max-width:calc(100% - 8px); pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,0.25); } .spark-mini-label::first-line { color:var(--text-primary); font-weight:700; } .spark-mini-label.is-below { transform:translate(-50%, 9px); } .spark-mini-vline[hidden], .spark-mini-dot[hidden], .spark-mini-label[hidden] { display:none; } .dash-tables { display:flex; flex-direction:column; margin-top:0.6rem; } .dash-trow { display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem; padding:0.32rem 0; border-bottom:1px solid var(--border); font-size:0.86rem; } .dash-trow:last-child { border-bottom:0; } .dash-trow .tname { color:var(--text-sec); } .dash-trow .n { font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-primary); text-align:right; } .stw-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-right:0.5rem; vertical-align:middle; flex:none; } .stw-today { font-size:0.8rem; color:var(--text-sec); font-variant-numeric:tabular-nums; margin-bottom:0.15rem; } .stw-today-row { font-size:0.75rem; margin-right:1.2rem; font-variant-numeric:tabular-nums; } .stw-grid { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; } .stw-grid > .dash-trow { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; gap:0; } .standing-card .dash-trow { border-bottom:0; } .stw-grid .tname { min-width:0; padding-right:0.8rem; } .stw-today-cell { text-align:right; } .stw-grid .n.po-host:has(.po-btn)::before { content:''; display:inline-block; width:1rem; transition:width 0.12s; } .stw-grid .n.po-host:hover::before, .stw-grid .n.po-host:has(.po-btn:focus-visible)::before { width:0; } .notify-list { margin:0.35rem calc(-1 * var(--padding-x, 0.5rem)) 0; container-type:inline-size; } .notify-row { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"count kind side" "count detail side"; align-items:baseline; column-gap:0.75rem; row-gap:0.1rem; padding:0.55rem var(--padding-x, 0.5rem); cursor:pointer; transition:background 0.15s; } .notify-count { grid-area:count; align-self:center; } .notify-kind { grid-area:kind; } .notify-detail { grid-area:detail; } .notify-side { grid-area:side; align-self:center; } .notify-row:hover, .notify-row:focus-visible { background:var(--row-hover); outline:none; } .notify-row:focus-visible { box-shadow:inset 2px 0 0 var(--accent); } .notify-count { display:grid; place-items:center; min-width:1.75rem; height:1.75rem; padding:0 0.3rem; border:1px solid var(--accent); border-radius:999px; background:transparent; color:var(--accent-text); font:inherit; font-size:0.76rem; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; transition:background 0.15s, color 0.15s, transform 0.1s; } .notify-count > * { grid-area:1 / 1; display:inline-flex; transition:opacity 0.15s; } .notify-check { opacity:0; } .notify-check svg { width:14px; height:14px; } .notify-count:is(:hover, :focus-visible) { background:var(--accent); color:#fff; outline:none; } [data-theme="dark"] .notify-count:is(:hover, :focus-visible) { color:#000; } .notify-count:is(:hover, :focus-visible) .notify-n { opacity:0; } .notify-count:is(:hover, :focus-visible) .notify-check { opacity:1; } .notify-count:active { transform:scale(0.94); } .notify-kind { font-size:0.82rem; font-weight:600; color:var(--text-primary); line-height:1.3; overflow-wrap:break-word; } .notify-detail { font-size:0.74rem; color:var(--text-sec); line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .notify-side { display:flex; align-items:center; gap:0.35rem; } .notify-date { font-size:0.7rem; color:var(--text-ter); font-variant-numeric:tabular-nums; white-space:nowrap; } .notify-go { display:inline-flex; color:var(--text-ter); transition:color 0.15s; } .notify-go svg { width:14px; height:14px; } .notify-row:is(:hover, :focus-visible) .notify-go { color:var(--accent-text); } @container (max-width: 18rem) { .notify-row { grid-template-areas:"count kind go" "count detail go" "count date go"; } .notify-side { display:contents; } .notify-date { grid-area:date; } .notify-go { grid-area:go; align-self:center; } } .imp-conflict { margin-bottom:0.8rem; } .imp-switch { display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer; } .imp-switch-label { font-size:0.72rem; font-weight:600; color:var(--text-sec); min-width:5.5rem; text-align:right; } .imp-diff { width:100%; border-collapse:collapse; margin-top:0.6rem; font-size:0.8rem; } .imp-diff th { color:var(--text-ter); padding:0.2rem 0.55rem; border-bottom:1px solid var(--border); } .imp-diff td { padding:0.32rem 0.55rem; border-bottom:1px solid var(--border); vertical-align:top; } .imp-diff tr:last-child td { border-bottom:0; } .imp-diff-field { color:var(--text-sec); } .imp-diff-new { color:var(--accent-text); font-weight:600; } .imp-multi { margin-bottom:0.8rem; } .imp-cands { margin-top:0.4rem; } .imp-cand { padding:0.55rem 0; border-top:1px solid var(--border); } .imp-cand:first-child { border-top:0; } .empty-state { font-size:0.93rem; color:var(--text-sec); line-height:1.6; padding:0.9rem 0; } .empty-state-why { color:var(--text-ter); } .task-card-head { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-bottom:0.6rem; } .task-card-empty { display:flex; align-items:center; margin-top:0.7rem; } .task-card-empty-icon { display:inline-flex; color:var(--accent); opacity:0.85; } .task-card-empty-icon svg { width:28px; height:28px; } .rec-wiz-nav { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-bottom:0.6rem; } .rec-item { padding:0.55rem 0.6rem; border-bottom:1px solid var(--border); border-radius:var(--radius-sm); } .rec-item:last-child { border-bottom:0; } .rec-item-row { display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; justify-content:space-between; } .rec-item-meta { min-width:0; font-size:0.86rem; } .rec-wiz-item { border:1px solid var(--border-mid); background:var(--bg-elevated); padding:0.9rem 1rem; } .rec-item.is-current { border-left:3px solid var(--accent); background:var(--bg-elevated); } .rec-hover { opacity:0; transition:opacity 0.15s; } .rec-item:hover .rec-hover, .rec-item:focus-within .rec-hover, .rec-item:has(.prop-form:not(.hidden)) .rec-hover { opacity:1; } .rec-bulk { display:flex; gap:0.5rem; margin-top:0.6rem; } .sigw-price { font-size:2rem; font-weight:700; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; margin:0.35rem 0 0.5rem; } .sigw-sub { margin-bottom:0.35rem; } .sigw-spark { position:relative; height:120px; margin-bottom:0.6rem; } .sigw-lights { display:grid; grid-template-columns:repeat(3, 1fr); gap:0.55rem; } .sigw-lights .sig-card { text-decoration:none; color:inherit; flex-direction:column; align-items:flex-start; gap:0.45rem; padding:0.7rem 0.7rem; border-radius:var(--radius-md); } .sigw-lights .sig-card-val { white-space:normal; font-size:0.78rem; } .sigw-card { display:flex; flex-direction:column; } .sigw-card > .sigw-lights { margin-top:auto; } .tax-card { padding:1.1rem 1.2rem; overflow-x:auto; } .tax-group-switch { margin-bottom:0.8rem; } .tax-card-title { margin-bottom:0.8rem; } .tax-card-wrap + .tax-card-wrap { margin-top:1.2rem; } .tax-main-head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; } .tax-all { display:inline-flex; align-items:center; cursor:pointer; } .tax-card-wrap { position:relative; } .ai-sec > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; } .ai-sec > summary::-webkit-details-marker { display:none; } .ai-sec[open] > summary .chev-btn { transform:rotate(180deg); } .ai-stats { display:flex; align-items:flex-start; gap:1.6rem; margin-left:auto; flex-wrap:wrap; } .ai-stat { display:flex; flex-direction:column; line-height:1.3; } .ai-schuiven { display:flex; align-items:flex-start; gap:1.6rem; flex-wrap:wrap; } .ai-schuiven > .ai-stat { min-width:5.2rem; align-items:center; text-align:center; } .ai-stats > .ai-tellers { display:flex; align-items:flex-start; gap:1.6rem; } .ai-stat > .toggle-switch { margin-top:0.55rem; } .tax-sec { margin-top:1.4rem; } .tax-sec > summary { cursor:pointer; list-style:none; padding:0.4rem 0.2rem; display:flex; align-items:center; gap:0.45rem; } .tax-sec > summary::-webkit-details-marker { display:none; } .tax-sec[open] > summary .chev-btn { transform:rotate(180deg); } .tax-sec > .card { margin-top:0.6rem; } .tax-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:0.86rem; font-variant-numeric:tabular-nums; } .tax-table th { padding:0.6rem 0.7rem; border-bottom:1px solid var(--border-mid); overflow:hidden; text-overflow:ellipsis; } .tax-table th.num, .tax-table td.num { text-align:right; } .tax-table td { padding:0.55rem 0.7rem; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tax-table tr:last-child td { border-bottom:none; } .tax-table td.cap { color:var(--text-sec); } .tax-label { font-weight:600; } .tax-expand { margin-right:0.35rem; vertical-align:middle; } .tax-sub { display:none; } .tax-sub.visible { display:table-row; } .tax-sub td { font-size:0.78rem; } .tax-sub td.cap { padding-left:1.6rem; } .tax-totals td { font-weight:700; border-top:1px solid var(--border-mid); padding-top:0.75rem; padding-bottom:0.75rem; } .tax-strong td { font-weight:700; } .tax-pct { font-size:0.74rem; font-weight:600; margin-right:0.5rem; } .tax-perf { display:flex; flex-wrap:wrap; gap:0.45rem; justify-content:flex-end; margin-top:0.2rem; } .tax-perf .tax-pct { margin-right:0; } .tax-table td[title] { cursor:pointer; } .tax-pct-lbl { color:var(--text-sec); font-weight:700; font-size:0.66rem; letter-spacing:0.03em; margin-right:0.25rem; } .tax-colsub { text-transform:none; letter-spacing:0; font-weight:400; margin-top:0.1rem; } .form-group { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.2rem; } .form-label { font-size:0.78rem; font-weight:600; color:var(--text-primary); } .form-hint { font-size:0.72rem; color:var(--text-sec); margin-top:0.3rem; } .form-error { font-size:0.72rem; color:var(--neg); margin-top:0.3rem; } .input { background:var(--input-bg); border:1px solid var(--border-mid); border-radius:var(--radius-md); padding:0.65rem 0.9rem; font-family:var(--font-base); font-size:0.88rem; color:var(--text-primary); outline:none; transition:border-color 0.15s, box-shadow 0.15s; width:100%; } .input::placeholder { color:var(--text-ter); } .input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .input.error { border-color:var(--neg); } .input.error:focus { box-shadow:0 0 0 3px var(--neg-bg); } select.input { appearance:none; cursor:pointer; } [data-theme="dark"] select { color-scheme:dark; } [data-theme="light"] select { color-scheme:light; } select option, select optgroup { background-color:var(--bg-elevated); color:var(--text-primary); } .select-label { position:relative; display:inline-flex; align-items:center; min-width:0; color:var(--text-sec); } .select-label select { appearance:none; -webkit-appearance:none; border:0; background:transparent; box-shadow:none; padding:0.1rem 1.3rem 0.1rem 0; margin:0; font:inherit; font-size:0.9rem; font-weight:500; color:inherit; cursor:pointer; outline:none; text-overflow:ellipsis; min-width:0; } .select-label svg { position:absolute; right:0; width:1rem; height:1rem; pointer-events:none; } .select-label:hover, .select-label:focus-within { color:var(--accent-text); } .select-label select:focus-visible { box-shadow:0 0 0 2px var(--accent-soft); border-radius:var(--radius-sm, 4px); } textarea.input { resize:vertical; min-height:5.5rem; } .toggle-switch { position:relative; width:40px; height:22px; flex-shrink:0; display:inline-block; } .toggle-switch input { opacity:0; width:0; height:0; position:absolute; } .toggle-track { position:absolute; inset:0; background:var(--bg-overlay); border-radius:var(--radius-full); cursor:pointer; transition:background 0.2s; border:1px solid var(--border-mid); } .toggle-switch input:checked ~ .toggle-track { background:color-mix(in srgb, var(--accent) 45%, var(--bg-overlay)); border-color:color-mix(in srgb, var(--accent) 55%, var(--bg-overlay)); } .toggle-track::after { content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform 0.2s var(--ease-out); } .toggle-switch input:checked ~ .toggle-track::after { transform:translateX(18px); } .table-frame { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--edge), var(--surface); box-shadow:var(--shadow-1); backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-sat)); -webkit-backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-sat)); transition:background 0.25s, box-shadow 0.25s; } .table-frame--plain { --surface-blur:0px; } [data-theme="light"] .table-frame { box-shadow:0 1px 3px rgba(0,0,0,0.04); } .table-wrap { width:100%; max-height:calc(100vh - var(--table-vh-offset)); overflow:auto; } @supports selector(::-webkit-scrollbar) { .table-wrap { --head-fill:var(--bg-elevated); --head-line:var(--border-mid); scrollbar-color:auto; scrollbar-width:auto; } .table-wrap::-webkit-scrollbar { width:8px; height:8px; } .table-wrap::-webkit-scrollbar:vertical { background:linear-gradient(var(--head-fill) calc(var(--sticky-row-top, 0px) - 1px), var(--head-line) 0 var(--sticky-row-top, 0px), transparent 0); } .table-wrap::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:var(--radius-full); } .table-wrap::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-corner { background:transparent; } .table-wrap::-webkit-scrollbar-track:vertical { margin-top:var(--sticky-row-top, 0px); } } table { width:100%; border-collapse:collapse; font-size:0.85rem; font-variant-numeric:tabular-nums; } thead { position:sticky; top:0; z-index:3; } thead tr:last-child > th { box-shadow:inset 0 -1px 0 var(--border-mid); } th { padding:0.75rem 1.1rem; text-align:left; font-size:0.67rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-sec); white-space:nowrap; background:var(--bg-elevated); transition:background 0.25s, color 0.25s; } th.num, td.num { text-align:right; } th.center, td.center { text-align:center; } .table-wrap :is(th, td):nth-last-child(1 of :not(.actions-cell, [colspan])) { text-align:right; } tbody tr { position:relative; border-bottom:1px solid color-mix(in srgb, var(--border) 50%, transparent); transition:background 0.1s; } tbody tr:last-child { border-bottom:none; } tbody tr:hover { background:var(--neutral-bg); } td { padding:var(--table-cell-py) 1.1rem; vertical-align:middle; color:var(--text-primary); white-space:nowrap; transition:color 0.25s, background 0.25s; } .t-muted-cell { color:var(--text-sec); font-size:0.8rem; } .t-subline { display:block; min-height:1.2em; } .asset-name { color:var(--text-primary); } .table-wrap td.text, .table-wrap th.text { white-space:normal; overflow-wrap:anywhere; min-width:7rem; } .table-wrap td { height:calc(var(--table-row-lines) * var(--table-line-h) + 2 * var(--table-cell-py)); } .table-wrap td.text > .cell-clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--table-row-lines); overflow:hidden; } .table-controls-bar { padding:0.6rem 0.7rem; background:var(--bg-elevated); } .tbl-title { padding:0.15rem 0.15rem 0.6rem; } .table-controls { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; --tctl-h:2.5rem; } .table-controls .input { height:var(--tctl-h); } .tbl-search { width:auto; min-width:150px; max-width:240px; } .table-controls .tbl-group-select { width:auto; min-width:140px; } .row-editing .tbl-textarea, .edit-expand-row .tbl-textarea { resize:vertical; width:100%; } .edit-expand-row .edit-expand-fields { flex-wrap:wrap; align-items:flex-end; } .edit-expand-row .edit-expand-field { margin-bottom:0; min-width:200px; flex:1; } .edit-expand-row .edit-expand-field.is-full { min-width:auto; flex:1 0 100%; } .edit-expand-row .edit-expand-error { margin-top:0.6rem; } .edit-expand-row .edit-actions { justify-content:flex-start; } .edit-expand-row :is(.edit-expand-fields, .edit-expand-error) + .edit-actions { margin-top:0.8rem; } .t-caption.mt-sm { text-align:center; } .table-controls label { font-size:0.72rem; font-weight:600; color:var(--text-sec); } .tbl-filter { justify-content:center; flex:1 1 auto; min-width:0; } .tbl-empty-spacer td { height:18px; padding:0; } .tbl-count { flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; height:var(--tctl-h); min-width:2.6rem; padding:0 0.7rem; border-radius:var(--radius-md); border:1px solid var(--border-mid); background:var(--bg-elevated); color:var(--text-sec); font-size:0.8rem; font-weight:600; font-variant-numeric:tabular-nums; } th.th-sort { cursor:pointer; user-select:none; } th.th-sort:hover { color:var(--text-primary); } .sort-arrow { font-size:0.55rem; margin-left:0.3rem; opacity:0.7; } .group-row > td { background:var(--bg-elevated); padding:0.5rem 1.1rem; box-shadow:inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border); } .group-header { display:flex; align-items:center; gap:0.6rem; font-size:0.86rem; font-weight:700; color:var(--accent); margin:0; } .group-header .group-count { color:var(--text-sec); font-weight:500; background:var(--neutral-bg); padding:0.05rem 0.5rem; border-radius:var(--radius-full); font-size:0.72rem; } .group-row td { padding:0; border:none; background:transparent; } .group-row:hover td { background:transparent; } .group-row .group-header { margin:1.2rem 1.1rem 0.4rem; } .table-wrap.has-exp .group-row .group-header { margin-left:var(--table-exp-pad); } .group-header[data-gcollapse] { cursor:pointer; user-select:none; } .group-header .chev-btn { flex:0 0 auto; } .group-header .group-summary { color:var(--text-sec); font-weight:500; font-variant-numeric:tabular-nums; font-size:0.78rem; margin-left:0.2rem; } .fbar-item.is-collapsed { opacity:0.6; font-style:italic; } tbody tr[data-row-id] { cursor:pointer; } tbody tr.row-selected td { background:var(--accent-soft); } tbody tr.row-selected:hover td { background:var(--accent-mid); } tbody tr.row-selected td:first-child { box-shadow:inset 3px 0 0 var(--accent); } .actions-cell { text-align:right; width:var(--table-actions-w); white-space:nowrap; } .exp-cell { width:var(--table-exp-w); text-align:left; padding-left:var(--table-exp-pad); padding-right:0; } .exp-cell .chev-btn { vertical-align:middle; } tbody tr[data-row-id]:hover .exp-cell .chev-btn { color:var(--accent); } .row-actions { display:inline-flex; gap:0.4rem; justify-content:flex-end; } @media (min-width:1201px) { .table-frame > .table-wrap:has(> table > thead .actions-cell) { container-type:inline-size; } .table-frame > .table-wrap :is(th, td).actions-cell { width:0; padding:0; } .table-frame > .table-wrap tr.row-selected > td.actions-cell { position:sticky; right:0; z-index:2; } .table-frame > .table-wrap tr.row-selected > td.actions-cell > .row-actions { position:absolute; top:50%; right:50cqw; transform:translate(50%, -50%); padding:0.3rem; border:1px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius:var(--radius-md); background:var(--bg-raised); box-shadow:0 6px 18px rgba(0,0,0,0.35); } .table-frame > .table-wrap tr.row-selected > td.actions-cell > .row-actions:empty { display:none; } :root[data-profile="glass"] .table-frame > .table-wrap tr.row-selected > td.actions-cell > .row-actions { background:var(--float-bg); backdrop-filter:blur(var(--float-blur)); -webkit-backdrop-filter:blur(var(--float-blur)); } :root[data-profile="glass"] .table-frame > .table-wrap tbody tr.row-selected > td.actions-cell { backdrop-filter:none; -webkit-backdrop-filter:none; } } .row-expansion > td { padding:0; background:var(--bg-raised); box-shadow:inset 3px 0 0 var(--accent); transition:background 0.25s; } .row-expansion:hover > td { background:var(--bg-raised); } .src-drawer { padding:1rem 1.2rem 1.1rem; } .ai-gesprek { padding:0.5rem 0 0.5rem 1.1rem; } .src-drawer-title { margin-bottom:0.7rem; } .row-expansion .table-wrap { border:none; border-radius:0; box-shadow:none; overflow:visible; max-height:none; } .row-expansion thead { position:static; } .row-expansion .table-controls { margin-bottom:0.6rem; } .row-expansion th { background:transparent; } .row-expansion tbody tr:last-child { border-bottom:none; } .ip-box { margin-top:1.5rem; display:flex; flex-direction:column; gap:1.2rem; } .ip-box-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.3rem 1rem; } .ip-acc + .ip-acc { border-top:1px solid var(--border); padding-top:1.2rem; } .ip-acc-name { font-weight:600; color:var(--text-primary); margin-bottom:0.7rem; } .ip-sched + .ip-sched, .ip-sched + .ip-due { margin-top:1.1rem; } .ip-sched-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.2rem 0.8rem; margin-bottom:0.5rem; } .ip-sched-name { font-weight:600; color:var(--text-primary); } .ip-figs { display:grid; grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); gap:0.6rem; } .ip-fig { padding:0.65rem 0.85rem; border-radius:var(--radius-sm); background:var(--surface-tint); } .ip-fig > .t-label { white-space:nowrap; } .ip-fig-value { font-size:1.05rem; margin:0.2rem 0 0.1rem; } @media (max-width:700px) { .ip-figs { grid-template-columns:1fr; gap:0.4rem; } .ip-fig { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:0.8rem; padding:0.5rem 0.75rem; } .ip-fig-value { margin:0; } .ip-fig > .t-body-sm { flex-basis:100%; text-align:right; } } .ip-num { font-variant-numeric:tabular-nums; text-align:right; } .ip-upcoming { margin-top:0.55rem; } .ip-upcoming > summary { display:inline-flex; align-items:center; gap:0.35rem; cursor:pointer; list-style:none; color:var(--text-sec); } .ip-upcoming > summary::-webkit-details-marker { display:none; } .ip-upcoming[open] > summary .chev-btn { transform:rotate(180deg); } .ip-upcoming-list { display:grid; grid-template-columns:repeat(auto-fill, 11rem); gap:0.25rem 1.5rem; margin-top:0.5rem; } .ip-up { display:flex; justify-content:space-between; gap:0.8rem; font-size:0.82rem; } .ip-due .t-label { margin-bottom:0.3rem; } .ip-due-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.3rem 1.2rem; padding:0.25rem 0; } .ip-due-row > :first-child { min-width:11rem; } .ip-due-row > .ip-num { min-width:5.5rem; } .ip-due-btns { display:flex; gap:0.4rem; } .table-wrap.sticky-sel tbody tr.row-selected > td { position:sticky; top:var(--sticky-row-top, 2.7rem); z-index:2; background:color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)); } .table-wrap.sticky-sel tbody tr.row-selected:hover > td { background:color-mix(in srgb, var(--accent) 30%, var(--bg-elevated)); } .cmd-bar { position:fixed; left:50%; bottom:1.8rem; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:0.9rem; padding:0.75rem 1.1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--accent); box-shadow:0 6px 24px rgba(0,0,0,0.25); font-size:0.95rem; } .cmd-bar-text { white-space:nowrap; } .cmd-bar-buttons { display:flex; align-items:center; gap:0.5rem; } .cmd-bar-buttons .btn-primary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .tabset { position:relative; display:flex; gap:0.3rem; margin-bottom:1.1rem; padding-left:1.3rem; border-bottom:1px solid transparent; } .tabset::before { content:""; position:absolute; bottom:0; left:0; right:0; height:8px; border-bottom:1px solid var(--border-mid); border-left:1px solid var(--border-mid); border-right:1px solid var(--border-mid); border-bottom-left-radius:7px; border-bottom-right-radius:7px; } .tabset-tab { appearance:none; border:none; cursor:pointer; background:transparent; color:var(--text-sec); font-family:var(--font-base); font-size:0.78rem; font-weight:600; letter-spacing:0.01em; padding:0.45rem 0.9rem; border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin-bottom:-1px; border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s; } .tabset-tab:hover { color:var(--text-primary); } .tabset-tab.is-on { color:var(--accent-text); border-bottom-color:var(--accent); } .tabset--lg { gap:0.5rem; margin-bottom:1.6rem; padding-left:2.2rem; } .tabset--lg::before { height:12px; border-bottom-left-radius:11px; border-bottom-right-radius:11px; } .tabset--lg .tabset-tab { font-size:0.92rem; padding:0.7rem 1.4rem; border-bottom-width:3px; } @media (min-width:769px) { .tabset--lg.tabset--rows { --tabset-row-gap:0.6rem; display:grid; grid-template-columns:repeat(var(--tabset-cols), minmax(0, 1fr)); grid-auto-rows:1fr; gap:var(--tabset-row-gap) 0; padding-right:2.2rem; } .tabset--lg.tabset--rows .tabset-tab { padding-inline:0.4rem; } .tabset--lg.tabset--rows::before { top:calc((100% - var(--tabset-row-gap)) / 2 - 12px); bottom:auto; right:auto; width:12px; border-right:none; border-bottom-right-radius:0; } .tabset--lg.tabset--rows::after { content:""; position:absolute; top:calc((100% - var(--tabset-row-gap)) / 2 - 1px); bottom:0; left:0; right:0; border:1px solid var(--border-mid); border-radius:11px; pointer-events:none; mask:linear-gradient(transparent calc(100% - 12px), #000 0) 0 0 / 12px 100% no-repeat, linear-gradient(#000, #000) 12px 0 / calc(100% - 12px) 100% no-repeat; } } @media (max-width:768px) { .tabset { flex-wrap:wrap; gap:0.4rem; padding-left:0; border-bottom:none; } .tabset::before { display:none; } .tabset-tab { margin-bottom:0; border:1px solid var(--border-mid); border-radius:999px; } .tabset-tab.is-on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); } .tabset--lg { gap:0.45rem; padding-left:0; } .tabset--lg .tabset-tab { font-size:0.85rem; padding:0.5rem 1.1rem; border-bottom-width:1px; } } .fbar { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; } .fbar-item { appearance:none; cursor:pointer; border:1px solid var(--border-mid); background:var(--bg-elevated); color:var(--text-sec); font-family:var(--font-base); transition:border-color .15s, background .15s, color .15s; } .fbar-item:hover { color:var(--text-primary); border-color:var(--text-ter); } .fbar-item.is-on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); } .fbar-item:disabled { opacity:0.5; cursor:default; } .fbar--chip .fbar-item { padding:0.3rem 0.7rem; border-radius:var(--radius-full); font-size:0.76rem; font-weight:600; letter-spacing:0.02em; } .fbar-act { color:var(--text-ter); } .fbar-act:hover { color:var(--text-primary); } .fbar--tctl .fbar-item { width:5.5rem; height:var(--tctl-h); text-align:center; font-size:0.8rem; font-weight:500; line-height:calc(var(--tctl-h) - 2px); padding:0 0.4rem; border-radius:var(--radius-md); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mtr-chart { margin:0.2rem 0 1rem; } .mtr-chart-h { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.35rem; } .mtr-dot { width:8px; height:8px; border-radius:2px; display:inline-block; flex-shrink:0; } .spark { width:100%; height:46px; display:block; background:var(--bg-raised); border-radius:var(--radius-sm); } .ilog-last { display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem; margin:0.3rem 0 0.6rem; } .ilog-filter { max-width:16rem; } .ilog-scroll { overflow-x:auto; } .ilog-table { border-collapse:collapse; width:100%; font-size:0.82rem; } .ilog-table th { text-align:left; font-weight:500; color:var(--text-sec); padding:0.3rem 0.8rem 0.3rem 0; border-bottom:1px solid var(--border); white-space:nowrap; } .ilog-table td { padding:0.3rem 0.8rem 0.3rem 0; border-bottom:1px solid var(--border); vertical-align:top; } .ilog-table td.num { text-align:right; } .ilog-nowrap { white-space:nowrap; } .ilog-id { font-size:0.75rem; white-space:nowrap; } .trk-block { display:flex; flex-direction:column; gap:0.5rem; min-width:0; } .trk-act { appearance:none; cursor:pointer; flex:0 0 auto; padding:0.32rem 0.75rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:transparent; color:var(--text-ter); font-family:var(--font-base); font-size:0.72rem; font-weight:600; letter-spacing:0.02em; } .trk-act:hover { color:var(--text-primary); border-color:var(--text-ter); } .trk-acct-foot { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; } .trk-selection { min-width:0; font-size:0.72rem; line-height:1.3; } .trk-scan-status { text-align:right; font-size:0.72rem; line-height:1.35; } .trk-scan-log { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:0.15rem; max-height:14rem; overflow-y:auto; scrollbar-width:none; font-size:0.72rem; line-height:1.35; } .trk-scan-log:empty { display:none; } .trk-scan-log::-webkit-scrollbar { display:none; } .trk-scan-group { display:flex; flex-direction:column; gap:0.1rem; } .trk-scan-group + .trk-scan-group { margin-top:0.4rem; } .trk-scan-acct { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .trk-scan-acct:empty { display:none; } .trk-scan-wallets { list-style:none; margin:0; padding:0 0 0 0.6rem; display:flex; flex-direction:column; gap:0.15rem; } .trk-scan-row { display:flex; justify-content:space-between; gap:0.6rem; min-width:0; } .trk-scan-name { color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .trk-scan-out { flex:0 0 auto; text-align:right; white-space:nowrap; } .trk-accounts { flex:0 1 auto; min-height:6rem; } .trk-acct-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(7.5rem, 1fr)); gap:0.4rem; align-content:start; flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; } .trk-acct-list::-webkit-scrollbar { display:none; } .trk-acct { appearance:none; cursor:pointer; width:100%; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:0.35rem; min-height:4rem; padding:0.55rem 0.7rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-sec); font-family:var(--font-base); transition:border-color .15s, background .15s, color .15s; } .trk-acct:hover { color:var(--text-primary); border-color:var(--text-ter); } .trk-acct.is-on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); } .trk-acct-name { font-size:0.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .trk-acct-line { display:flex; align-items:baseline; justify-content:space-between; gap:0.4rem; } .trk-acct-sub { font-size:0.66rem; color:var(--text-ter); white-space:nowrap; } .trk-acct-amt { font-size:0.85rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .trk-total { align-items:center; text-align:center; gap:0.15rem; } .trk-total-amt { display:flex; flex-direction:column; gap:0.1rem; text-align:right; min-width:0; } .trk-total .t-num-lg { font-size:1.9rem; line-height:1.15; } .trk-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem 1.4rem; margin-top:0.9rem; } .trk-stat { min-width:4.5rem; text-align:right; } .trk-scan { align-items:flex-end; gap:0.4rem; } .trk-scan-when { text-align:right; } @media (max-width:1280px) { .trk-accounts { min-height:0; } .trk-acct-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); overflow:visible; min-height:0; } .trk-total, .trk-total-amt { align-items:flex-start; text-align:left; } .trk-stats { max-width:30rem; } .trk-stat, .trk-scan-when, .trk-scan-status { text-align:left; } .trk-scan { align-self:flex-start; align-items:flex-start; } .trk-scan-log { max-width:30rem; } .trk-acct-foot { justify-content:flex-start; } } .wealth-years { position:relative; z-index:6; } .wealth-year-boxes { display:flex; flex-wrap:wrap; justify-content:center; gap:0.35rem; padding:0 2rem; } .wealth-year-menu::before { content:""; position:absolute; left:0; right:0; top:-0.55rem; height:0.55rem; } .wealth-year-menu { position:absolute; top:calc(100% + 0.55rem); right:0; left:0; z-index:6; max-height:calc(100vh - var(--aside-vh-offset) - var(--year-box-h) - var(--main-pad-y) - 1.1rem); overflow-y:auto; padding:0.5rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity 0.15s, transform 0.15s, visibility 0.15s; } .wealth-years:hover .wealth-year-menu, .wealth-years:focus-within .wealth-year-menu { opacity:1; visibility:visible; transform:translateY(0); } .wealth-year-grid { display:grid; grid-template-columns:repeat(auto-fill, var(--year-box-w)); gap:0.35rem; justify-content:center; } .wealth-year-chip, .wealth-year { box-sizing:border-box; width:var(--year-box-w); height:var(--year-box-h); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:0.1rem; padding:0 0.3rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:transparent; color:var(--text-sec); font-family:var(--font-base); font-size:0.82rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; text-align:center; transition:background 0.15s, color 0.15s, border-color 0.15s; } .wealth-year-pct { font-size:0.72rem; font-weight:500; font-variant-numeric:tabular-nums; } .wealth-year { cursor:pointer; } .wealth-year:hover { background:var(--bg-raised); color:var(--text-primary); border-color:var(--text-ter); } .wealth-year-chip, .wealth-year.is-on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); } button.wealth-year-chip { cursor:pointer; } button.wealth-year-chip:hover { background:var(--accent-mid); } .wealth-year-tip { margin:0.3rem 0.6rem 0.1rem; } .wealth-header-stats { display:flex; flex-direction:column; align-items:flex-end; gap:0.8rem; margin-top:1.1rem; } .wealth-header-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.8rem 4rem; width:auto; } .wealth-header-stats .wealth-stat { text-align:right; } .wealth-header-note { margin-top:0.5rem; max-width:34rem; text-align:left; } .wealth-header-rings { display:flex; flex-direction:column; gap:1.2rem; min-width:0; flex:1 1 0; min-height:0; } .wealth-ring { margin:0; min-width:0; display:flex; flex-direction:column; gap:0.4rem; align-items:center; flex:1 1 0; min-height:0; } .wealth-ring-plot { width:100%; min-width:0; flex:1 1 0; min-height:6rem; } .wealth-aside-total { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.15rem; } .wealth-aside-head { display:flex; align-items:center; gap:0.25rem; } .wealth-all { margin:0 0.25rem; display:inline-flex; align-items:center; cursor:pointer; } @media (max-width:1280px) { .wealth-aside-total, .wealth-header-stats { align-items:flex-start; text-align:left; } .wealth-header-stats .wealth-stat { text-align:left; } .wealth-year-boxes { justify-content:flex-start; } .wealth-header-rings { flex-direction:row; flex-wrap:wrap; flex:0 0 auto; } .wealth-ring { flex:1 1 16rem; } .wealth-ring-plot { height:min(11rem, 16vh); flex:0 0 auto; } } .pf-blok + .pf-blok { margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--border); } .pf-blok:first-of-type { margin-top:1rem; } .wealth-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap:1.2rem; align-items:stretch; } .gap-list { max-height:16rem; overflow-y:auto; margin-top:0.4rem; } .gap-row { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding:0.25rem 0; border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent); } .gap-row .gap-fill { padding:0.25rem 0.4rem; line-height:0; opacity:0; pointer-events:none; transition:opacity 0.15s ease; } .gap-row:hover .gap-fill, .gap-row:focus-within .gap-fill { opacity:1; pointer-events:auto; } .gap-row.is-focus { background:var(--accent-soft); box-shadow:0 0 0 0.4rem var(--accent-soft); border-radius:var(--radius-sm); } .ph-weak-row .gap-fill { padding:0.25rem 0.4rem; line-height:0; opacity:0; pointer-events:none; transition:opacity 0.15s ease; } .ph-weak-row:hover .gap-fill, .ph-weak-row:focus-within .gap-fill { opacity:1; pointer-events:auto; } .ph-ignored { margin-top:1.2rem; } .ph-ignored > summary { display:flex; align-items:center; gap:0.35rem; cursor:pointer; list-style:none; color:var(--text-sec); font-weight:500; } .ph-ignored > summary::-webkit-details-marker { display:none; } .ph-ignored > summary svg { transition:transform 0.15s ease; } .ph-ignored[open] > summary svg { transform:rotate(90deg); } .ph-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); grid-auto-rows:1fr; gap:1rem; margin-bottom:1.2rem; } .ph-card { display:flex; flex-direction:column; } .ph-counts { display:flex; flex-wrap:wrap; gap:0.2rem 0.8rem; margin-top:0.3rem; } .ph-count { display:inline-flex; align-items:center; gap:0.3rem; } .ph-dot { display:inline-block; width:0.55rem; height:0.55rem; border-radius:2px; } .ph-notices { display:flex; flex-wrap:wrap; gap:0.1rem 0.9rem; min-height:1.2rem; margin-top:0.2rem; } .ph-notice { display:inline-flex; align-items:center; gap:0.35rem; } .ph-notice .nav-attention { margin:0; animation:none; } .ph-finding { padding:0.5rem 0; border-top:1px solid var(--border); } .ph-finding:first-child { border-top:0; } .ph-proposal { margin-top:0.4rem; } .ph-gaps-head { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; } .ph-filter { margin-bottom:0.6rem; } .ph-confirm, .ph-outcome { margin:0.6rem 0; padding:0.6rem 0.8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-raised); } .ph-confirm-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.5rem; } .ph-outcome { margin-top:0; } .ph-spark-wrap { margin-top:auto; } .ph-detail-chart { padding:0; } .ph-detail-chart .ph-strip { height:1rem; margin-top:0.4rem; } .ph-detail-plot { position:relative; height:min(16rem, 30vh); } .dialog:has(.ph-detail) { max-width:min(90rem, 100%); } .wealth-detail-tabs > [role="tabpanel"]:has(> .ph-prices) { display:flex; flex-direction:column; overflow:hidden; } .ph-prices { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .wealth-detail-tabs > [role="tabpanel"]:has(> .notes) { display:flex; flex-direction:column; overflow:hidden; } .notes { display:flex; flex-direction:column; gap:0.6rem; flex:1 1 auto; min-height:0; padding-bottom:0.2rem; } .notes-add { display:flex; gap:0.6rem; } .notes-when { flex:0 0 auto; width:auto; } .notes-line { flex:1 1 auto; min-width:0; } textarea.notes-body { flex:1 1 auto; min-height:8rem; resize:none; line-height:1.55; font-family:inherit; } .notes-status { min-height:1.2em; } .ph-prices > .table-frame { display:flex; flex-direction:column; min-height:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .ph-prices .table-controls-bar { padding:0 0 0.6rem; background:none; } .ph-detail .ph-prices .table-wrap { flex:0 1 auto; min-height:0; overflow:auto; } .wealth-detail-tabs > [role="tabpanel"]:has(> .ph-prov) { display:flex; flex-direction:column; overflow:hidden; } .ph-prov { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .ph-detail .ph-prov .table-wrap { flex:0 1 auto; min-height:0; overflow:auto; margin-top:0.8rem; } .ph-spark { height:3rem; } .ph-strip { height:0.35rem; margin-top:0.2rem; } .ph-strip svg { display:block; width:100%; height:100%; } .ph-card .ph-strip { width:calc(100% + 2 * var(--padding-x, 0px)); margin-left:calc(-1 * var(--padding-x, 0px)); } .wealth-detail .gap-list { max-height:none; overflow:visible; } .ph-k-close { fill:var(--accent); background:var(--accent); opacity:0.35; } .ph-k-manual { fill:var(--sig-blue); background:var(--sig-blue); } .ph-k-live { fill:var(--accent); background:var(--accent); } .ph-k-spot { fill:var(--sig-yellow); background:var(--sig-yellow); } .ph-k-carried { fill:var(--text-sec); background:var(--text-sec); opacity:0.6; } .ph-k-none { fill:var(--sig-red); background:var(--sig-red); } .wealth-card { display:flex; flex-direction:column; } .wealth-card .wealth-spark-wrap { margin-top:auto; } .wealth-stat.is-leeg { visibility:hidden; } .wealth-card { width:100%; cursor:pointer; border:0; } .wealth-card:hover { box-shadow:var(--hover-shadow); } .wealth-detail-btn { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; padding:0; border:0; border-radius:50%; background:none; color:var(--text-ter); cursor:pointer; } .wealth-detail-btn:hover, .wealth-detail-btn:focus-visible { background:var(--accent-soft); color:var(--accent-text); } .wealth-detail-btn svg { display:block; } .wealth-detail-btn--inline { width:1.2rem; height:1.2rem; margin-left:0.15rem; vertical-align:middle; } .wealth-detail-btn--inline svg { width:0.85rem; height:0.85rem; } .return-view { display:flex; flex-direction:column; gap:0.9rem; min-width:0; } .dialog-title-aside [data-return-data] { max-width:16rem; } .dialog:has(.return-view--dialog) { max-width:min(84rem, 100%); overflow:hidden; } .dialog-body--rich:has(> .return-view--dialog) { overflow:visible; max-height:none; } .return-view--dialog .return-plot { height:min(26rem, 46vh); margin:0 calc(-1 * var(--dialog-pad-x)) calc(-1 * var(--dialog-pad-y)); } .return-periods { display:grid; grid-template-columns:repeat(auto-fit, minmax(7rem, 1fr)); gap:0.4rem; } .return-period { display:flex; flex-direction:column; align-items:center; gap:0.15rem; padding:0.45rem 0.4rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:transparent; color:var(--text-sec); font-family:var(--font-base); font-variant-numeric:tabular-nums; cursor:pointer; transition:background 0.15s, border-color 0.15s; } .return-period:not(.is-on):not(:disabled):hover { background:var(--bg-raised); border-color:var(--text-ter); } .return-period.is-on { border-color:var(--accent); background:var(--accent-soft); } .return-period.is-on:hover { background:var(--accent-mid); } .return-period:disabled { opacity:0.5; cursor:default; } .return-period-label { font-size:0.78rem; font-weight:600; } .return-period-amount { font-size:0.95rem; font-weight:700; } .return-period-pct { font-size:0.72rem; min-height:1em; } .return-plot { position:relative; height:16rem; } .wealth-detail.is-return .wealth-detail-spark { display:none; } .wealth-detail.is-return .wealth-detail-tabs > [role="tabpanel"] { overflow:hidden; margin-left:calc(-1 * var(--dialog-pad-x)); margin-right:calc(-1 * var(--dialog-pad-x)); } .wealth-return-tab { display:flex; flex-direction:column; gap:0.9rem; height:100%; } .wealth-return-years { flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 var(--dialog-pad-x); } .wealth-return-tab .return-view { flex:0 0 auto; } .wealth-detail .return-periods { padding:0 var(--dialog-pad-x); } .return-w-amount { margin:0.4rem 0 0.1rem; color:var(--text-sec); } .return-w-pct { font-size:0.85rem; font-variant-numeric:tabular-nums; } .return-view--widget { margin-top:0.6rem; } .return-view--widget .return-plot { height:8rem; margin:0 calc(-1 * var(--padding-x)) calc(-1 * var(--padding)); overflow:hidden; border-radius:0 0 var(--radius) var(--radius); } .wealth-detail .return-plot { height:min(12rem, 22vh); } .wealth-card .wealth-detail-btn { position:absolute; margin:0; top:calc(0.8rem - var(--padding)); right:calc(0.8rem - var(--padding-x)); } .wealth-head .wealth-detail-btn { opacity:0; pointer-events:none; transition:opacity 0.15s ease, background 0.15s ease; } .wealth-card:hover .wealth-detail-btn, .wealth-card:focus-within .wealth-detail-btn { opacity:1; pointer-events:auto; } .card-go-btn, .card-go-btn:visited { color:var(--text-ter); text-decoration:none; } .card-go-btn:hover, .card-go-btn:focus-visible { color:var(--accent-text); } .card-go-btn { position:absolute; margin:0; top:calc(0.8rem - var(--padding)); right:calc(0.8rem - var(--padding-x)); opacity:0; pointer-events:none; transition:opacity 0.15s ease, background 0.15s ease; } .card:hover .card-go-btn, .card:focus-within .card-go-btn { opacity:1; pointer-events:auto; } .wealth-card { transition:box-shadow 0.15s ease; } .wealth-card:hover, .wealth-card:focus-within { z-index:3; } .wealth-card.is-linked { box-shadow:inset 0 0 0 2px var(--accent), var(--lift-shadow); } .wealth-card.is-selected { box-shadow:inset 0 0 0 2px var(--accent), var(--lift-shadow); background:var(--accent-soft); } [data-theme="light"] .wealth-card:is(.is-linked, .is-selected)::before { opacity:0; } .wealth-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; margin-top:1rem; } .wealth-spark-wrap { margin-top:1.1rem; } .wealth-noprice { margin-top:0.9rem; } #page-hint { position:fixed; z-index:120; top:var(--nav-line-top); left:calc(var(--hint-line-x) - 1.85rem); } html[data-pagehint="off"] #page-hint { display:none; } .hint { position:relative; } .hint-btn { display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; padding:0; border:none; border-radius:50%; background:transparent; color:var(--text-sec); opacity:0.55; cursor:pointer; transition:opacity 0.15s, color 0.15s; } .hint-btn:hover, .hint-btn:focus-visible { opacity:1; color:var(--accent-text); } html:has(.po-btn.is-warn) #page-hint .hint-btn { opacity:1; color:var(--sig-yellow); } #page-hint .hint-warn { display:none; } html:has(.po-btn.is-warn) #page-hint .hint-warn { display:flex; } #page-hint .hint.is-fallback { display:none; } html:has(.po-btn.is-warn) #page-hint .hint.is-fallback { display:block; } .hint-warn .hint-sample { color:var(--sig-yellow); } .hint-warn .hint-sample svg { width:0.8rem; height:0.8rem; } .hint-panel { position:fixed; top:var(--nav-line-top); right:calc(100% - var(--hint-line-x) + 1.4rem); left:auto; width:min(44rem, calc(var(--hint-line-x) - 2.8rem)); max-height:calc(100vh - var(--nav-line-top) - 2rem); overflow-y:auto; padding:0.9rem 1rem; border-radius:var(--radius-md); background:var(--bg-elevated); border:1px solid var(--border); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity 0.15s, transform 0.15s, visibility 0.15s; pointer-events:none; } html:not(:has(.page-layout > .page-aside)) .hint-panel { right:auto; left:calc(var(--hint-line-x) + 1.4rem); width:min(44rem, calc(100vw - var(--hint-line-x) - 2.8rem)); } .hint:hover .hint-panel, .hint-btn:focus-visible + .hint-panel { opacity:1; visibility:visible; transform:translateY(0); } @media (min-width:769px) { #page-hint .hint-panel.is-wide { right:auto; left:calc(var(--hint-line-x) + 1.4rem); width:min(64rem, calc(100vw - var(--hint-line-x) - 2.8rem)); column-count:2; column-gap:1.8rem; } #page-hint .hint-panel.is-wide > .t-label:first-child { column-span:all; } #page-hint .hint-panel.is-wide :is(.hint-row, .hint-heading) { break-inside:avoid; } } .hint-heading { margin-top:1rem; } .hint-heading:first-of-type { margin-top:0.8rem; } .hint-row { display:flex; align-items:baseline; gap:0.6rem; margin-top:0.55rem; font-size:0.78rem; color:var(--text-sec); line-height:1.45; } .hint-sample { flex:0 0 1.4rem; } .hint-row > span:last-child > div { margin-top:0.2rem; } .hint-line { display:inline-block; width:1.4rem; height:0; border-top:2px solid var(--accent); transform:translateY(-0.25rem); } .hint-line.is-dashed { border-top-style:dashed; opacity:0.5; } .hint-dot { display:inline-block; width:0.4rem; height:0.4rem; margin-left:0.5rem; border-radius:50%; background:var(--accent); transform:translateY(-0.1rem); } .hint-dot.is-open { background:var(--bg-elevated); box-shadow:0 0 0 1.5px var(--accent); } .hint-ring { display:inline-block; width:0.75rem; height:0.75rem; margin-left:0.3rem; border-radius:50%; border:3px solid var(--accent); transform:translateY(0.1rem); } .wealth-spark { height:4.5rem; margin-top:0.3rem; color:var(--accent); } .wealth-stat { min-width:0; } .wealth-stats .wealth-stat:nth-child(even) { text-align:right; } .wealth-head { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; } .wealth-head .wealth-detail-btn { margin-left:auto; } .acc-total { font-size:2rem; font-weight:700; letter-spacing:-0.025em; line-height:1.15; font-variant-numeric:tabular-nums; margin-top:0.5rem; } .acc-card .acc-lines { margin-top:auto; padding-top:1rem; } .acc-interest { margin-top:0.3rem; font-size:0.8rem; } .acc-interest > span { white-space:nowrap; } .acc-card .acc-spark-wrap { margin-top:0.8rem; } .acc-pulse { height:4rem; margin:0.2rem 0 1rem; color:var(--accent); } .acc-pulse .spark-mini-area { display:none; } .acc-detail-plot { height:5rem; color:var(--accent); } .spark-mini.is-pickable { cursor:pointer; } .spark-mini-mark.is-agreement { background:var(--bg-elevated); box-shadow:0 0 0 1.5px currentColor; } .spark-mini-mark.is-account { width:4px; height:4px; opacity:0.6; } .spark-mini-mark.is-reservation { background:var(--bg-elevated); box-shadow:0 0 0 1.5px currentColor; border-radius:1px; } .spark-mini-mark.is-now { width:8px; height:8px; } .spark-mini-mark.is-now::before, .spark-mini-mark.is-now::after { content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid currentColor; opacity:0; animation:spark-now-ring 3s ease-out infinite; } .spark-mini-mark.is-now::after { animation-delay:1.5s; } @keyframes spark-now-ring { 0% { transform:scale(1); opacity:0.75; } 100% { transform:scale(3.4); opacity:0; } } @media (prefers-reduced-motion: reduce) { .spark-mini-mark.is-now::before, .spark-mini-mark.is-now::after { animation:none; } } .acc-lines { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.8rem; } .acc-line-main, .acc-line-sub { display:flex; justify-content:space-between; gap:0.8rem; } .acc-card .acc-line-main > span, .acc-card .acc-line-sub > span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .acc-line-sub { font-size:0.8rem; } .acc-filter { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 1.2rem; } .acc-grid { grid-auto-rows:1fr; } .dialog-body--rich:has(> .wealth-detail.acc-detail) { height:calc(100vh - 9rem); } .acc-detail { --table-row-lines:2; } .wealth-detail.acc-detail .group-header { justify-content:flex-start; } .wealth-detail.acc-detail .group-header .group-summary { margin-left:0.2rem; } .acc-summary { flex:0 0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:0.6rem; padding:0 var(--dialog-pad-x); margin-bottom:0.9rem; } .acc-summary > .acc-interest { grid-column:1 / -1; margin-top:0; } .acc-detail [role="tabpanel"]:not(:has(> #sched)) { display:flex; flex-direction:column; overflow:hidden; } .acc-detail [role="tabpanel"] > #tbl { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .acc-detail .table-frame { display:flex; flex-direction:column; min-height:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .acc-detail .table-controls-bar { padding:0 0 0.6rem; background:none; } .acc-detail [role="tabpanel"]:not(:has(> #sched)) > #tbl .table-wrap { flex:0 1 auto; min-height:0; overflow:auto; } .wealth-detail.acc-detail .table-wrap { overflow-x:auto; } @media (min-width:1201px) { .acc-detail td.actions-cell:has(> .row-actions) { position:sticky; right:0; z-index:1; } :root:not([data-profile="glass"]) .acc-detail td.actions-cell:has(> .row-actions) { background:var(--bg-elevated); } :root[data-profile="glass"] .acc-detail td.actions-cell:has(> .row-actions) { backdrop-filter:blur(var(--float-blur)); -webkit-backdrop-filter:blur(var(--float-blur)); } } .dialog-title-aside:has(.acc-total) { display:inline-flex; align-items:center; gap:0.6rem; } .dialog-title-aside .acc-total { margin:0; font-size:inherit; } .wealth-group, .wealth-filter { flex:none; justify-content:center; } .acc-pick { display:flex; flex-direction:column; gap:0.3rem; } .acc-single { grid-column:1 / -1; display:flex; align-items:center; gap:0.8rem; } .acc-anchor-btn { align-self:flex-end; } .acc-line--pick { display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; background:transparent; border:1px solid var(--border); border-radius:var(--radius-md); padding:0.5rem 0.7rem; } .acc-line--pick:hover { border-color:var(--border-mid); } .acc-line--pick.is-on { border-color:var(--accent); background:var(--accent-soft); } .dialog:has(.wealth-detail) { padding:var(--dialog-pad-y) 0 0; overflow:hidden; } .dialog:has(.wealth-detail) .dialog-title { padding:0 var(--dialog-pad-x); } .dialog-body--rich:has(> .wealth-detail) { display:flex; overflow:hidden; padding:0; height:min(78vh, calc(100vh - 12rem)); max-height:none; } .wealth-detail { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; min-height:0; } .wealth-detail-tabs { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding:0 var(--dialog-pad-x); } .wealth-detail-cijfers { padding:0 0 0.9rem; } .wealth-detail-stats { display:flex; flex-wrap:wrap; gap:0.6rem 2.4rem; } .wealth-detail-beheerd { margin-bottom:0.9rem; } .wealth-detail-beheerd table { width:100%; } .wealth-detail-tabs > [role="tabpanel"] { flex:1 1 auto; min-height:0; overflow-y:auto; margin-top:0.9rem; } .wealth-detail-spark { flex:0 0 auto; margin-top:0.6rem; position:relative; z-index:0; } .dialog:has(.wealth-detail) { position:relative; } .wealth-detail-plot { height:min(18rem, 34vh); color:var(--accent); } .wealth-detail-leeg { display:flex; align-items:center; justify-content:center; height:100%; } .wealth-detail { --table-row-lines:1; --table-cell-py:0.45rem; } .wealth-detail .table-wrap { max-height:none; overflow:visible; } .dialog-body--rich:has(> .wealth-overview) { display:flex; overflow:hidden; } .wealth-overview { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; min-height:0; --table-row-lines:1; --table-cell-py:0.45rem; } .wealth-overview .table-wrap { max-height:none; flex:1 1 auto; min-height:0; overflow:auto; } .wealth-overview-plot { flex:0 0 auto; height:min(16rem, 30vh); margin-bottom:0.8rem; } .wealth-detail-periode { position:absolute; top:calc(var(--dialog-pad-y) + 0.95rem); left:50%; transform:translate(-50%, -50%); z-index:2; pointer-events:none; border-color:var(--border-mid); background:transparent; color:var(--text-sec); } .wealth-detail-spark .wealth-detail-plot { position:relative; z-index:1; } .wealth-detail .group-header { justify-content:space-between; } .wealth-detail .group-header .group-summary { margin-left:auto; } .wealth-trade-leeg > td { color:var(--text-ter); font-style:italic; } tr[data-trade].is-active > td { background:var(--accent-soft); } .spark-mini-mark.is-active { width:11px; height:11px; box-shadow:0 0 0 2px var(--bg-elevated), 0 0 0 3.5px currentColor; z-index:1; } .oca-grid { display:flex; align-items:flex-start; gap:1.5rem; --cols:1; } @media (min-width:1000px) { .oca-grid { --cols:2; } } @media (min-width:2100px) { .oca-grid { --cols:3; } } @media (min-width:2900px) { .oca-grid { --cols:4; } } .masonry-col { display:flex; flex-direction:column; gap:1.5rem; flex:1 1 0; min-width:0; } .oca-source { position:relative; min-width:0; --wallet-pad:1.3rem; --padding:var(--wallet-pad); } .oca-source-head { display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; } .oca-source-meta { flex:1; min-width:0; } .oca-source-acct { font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-ter); margin-top:0.15rem; } .oca-source-name { font-size:1.25rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .oca-source-total { flex:1; text-align:right; } .oca-wallet-tags { flex:0 0 auto; display:flex; justify-content:center; gap:0.4rem; } .oca-movements { --padding:0.4rem; margin:0.9rem calc(-1 * var(--wallet-pad)) calc(-1 * var(--wallet-pad)); border-top:1px solid var(--row-line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; } .mv-group { display:flex; flex-direction:column; } .mv-group + .mv-group { border-top:1px solid var(--row-line); } .mv-date { font-size:0.72rem; font-weight:600; letter-spacing:0.04em; color:var(--text-sec); padding:0.5rem var(--wallet-pad) 0; } .mv-empty { padding:0.7rem var(--wallet-pad); } .oca-source { --mv-linked:color-mix(in srgb, var(--accent) 3.5%, transparent); } [data-theme="dark"] .oca-source { --mv-linked:color-mix(in srgb, var(--accent) 5.5%, transparent); } .mv-row:has(> .mv-mid > .tx-link.is-matched) { background:var(--mv-linked); } .mv-card:not(:has(.tx-link:not(.is-matched))) > .mv-date { background:var(--mv-linked); } .mv-row:not(:hover) .tx-link.is-matched:not(.is-open, :focus-visible) { opacity:0; } .mv-row { position:relative; display:flex; align-items:center; gap:0.9rem; padding:0.5rem var(--wallet-pad); } .mv-dir { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-mid); border-radius:50%; color:var(--text-sec); } .mv-mid { flex:1; min-width:0; } .mv-label { font-weight:600; cursor:pointer; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-label:hover { color:var(--accent); } .mv-addr { font-family:var(--font-mono); font-size:0.8rem; color:var(--text-ter); cursor:pointer; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-mid { display:flex; align-items:center; gap:0.45rem; } .mv-mid > .mv-label, .mv-mid > .mv-addr { min-width:0; } .copy-btn { flex-shrink:0; border:none; background:none; padding:0 0.15rem; color:var(--text-ter); cursor:pointer; font-size:0.9rem; line-height:1; opacity:0; transition:opacity 0.12s, color 0.15s; vertical-align:middle; } tbody tr:hover .copy-btn, .mv-row:hover .copy-btn, .card-flat:hover .copy-btn { opacity:1; } .copy-btn:hover, .copy-btn:focus-visible { opacity:1; color:var(--accent); outline:none; } .copy-btn.is-copied { opacity:1; color:var(--pos); } .mv-grp > summary { list-style:none; } .mv-grp > summary::-webkit-details-marker { display:none; } .mv-grp > summary.mv-row { cursor:pointer; } .mv-chev { flex-shrink:0; color:var(--accent); font-size:1rem; line-height:1; transition:transform 0.15s; } .mv-grp[open] .mv-chev { transform:rotate(90deg); } .mv-sub .mv-row { padding-left:calc(var(--wallet-pad) + 1.2rem); } .mv-addr:hover { color:var(--accent); } .mv-mid .label-combo { width:100%; } .mv-amounts { display:flex; align-items:flex-start; gap:0.9rem; flex-shrink:0; } .mv-amt { width:8rem; text-align:right; flex-shrink:0; } .mv-fee { width:6.5rem; text-align:right; flex-shrink:0; opacity:0.75; } .mv-amt .num, .mv-fee .num { font-weight:600; font-variant-numeric:tabular-nums; } .mv-feecap { font-size:0.7em; font-weight:600; color:var(--text-ter); margin-right:0.15rem; } .alert { display:flex; gap:0.8rem; align-items:flex-start; padding:1rem 1.2rem; border-radius:var(--radius-md); font-size:0.84rem; margin-bottom:0.75rem; } .alert-icon { font-size:1rem; flex-shrink:0; margin-top:0.05rem; } .alert-content { flex:1; min-width:0; } .alert-title { font-weight:600; margin-bottom:0.1rem; } .alert-body { color:var(--text-sec); font-size:0.8rem; } .alert-info { background:var(--accent-soft); color:var(--accent-text); } .alert-success { background:var(--pos-bg); color:var(--pos); } .alert-error { background:var(--neg-bg); color:var(--neg); } .alert-neutral { background:var(--neutral-bg); color:var(--text-sec); border:1px solid var(--border); } .divider { height:1px; background:var(--border); margin:2rem 0; } .code { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.2rem 1.4rem; font-family:var(--font-mono); font-size:0.8rem; color:var(--accent); overflow-x:auto; line-height:1.7; } .codeblock { position:relative; width:fit-content; max-width:100%; margin:0.8rem 0; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; } .codeblock > pre { margin:0; padding:1rem 1.2rem; padding-right:6.5rem; overflow-x:auto; font-family:var(--font-mono); font-size:0.8rem; line-height:1.6; } .codeblock-tools { position:absolute; top:0.45rem; right:0.6rem; display:flex; align-items:stretch; gap:0.35rem; } .codeblock-tag { display:inline-flex; align-items:center; font-size:0.62rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-ter); background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 0.4rem; pointer-events:none; } .codeblock-copy { display:inline-flex; align-items:center; justify-content:center; padding:0.2rem 0.3rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-sec); cursor:pointer; opacity:0; transition:opacity 0.15s, color 0.15s, border-color 0.15s; } .codeblock:hover .codeblock-copy, .codeblock-copy:focus-visible { opacity:1; } .codeblock-copy:hover { color:var(--text-primary); border-color:var(--border-mid); } .codeblock-copy.is-done { color:var(--pos); border-color:var(--pos); opacity:1; } @media (hover: none) { .codeblock-copy { opacity:1; } } .skeleton { background:linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-overlay) 50%, var(--bg-raised) 75%); background-size:200% 100%; animation:shimmer 1.6s infinite; border-radius:var(--radius-sm); } @keyframes shimmer { to { background-position:-200% 0; } } .mt-sm { margin-top:0.5rem; } .mt-md { margin-top:1rem; } .mt-lg { margin-top:1.5rem; } .gap-sm { gap:0.5rem; } .gap-md { gap:1rem; } .flex { display:flex; align-items:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; } .hidden { display:none !important; } .price-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.2rem; } .price-label { margin-bottom:0.35rem; display:flex; align-items:center; gap:0.5rem; } .price-val { font-size:2.1rem; letter-spacing:-0.03em; line-height:1.1; } .price-meta { font-size:0.72rem; color:var(--text-ter); margin-top:0.35rem; } .conv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0.9rem; } .field { display:flex; flex-direction:column; gap:0.6rem; background:var(--bg-elevated); border:1px solid var(--border); --radius:var(--radius-lg); --padding:1.1rem; border-radius:var(--radius); padding:1.1rem 1.2rem; transition:border-color 0.15s, background 0.25s; } .field:focus-within { border-color:var(--accent); } .field-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .field-name { font-size:0.9rem; font-weight:600; } .field-input { background:var(--input-bg); border:1px solid var(--border-mid); border-radius:var(--radius-md); padding:0.6rem 0.85rem; font-family:var(--font-base); font-size:1.05rem; font-weight:600; color:var(--text-primary); outline:none; width:100%; text-align:right; font-variant-numeric:tabular-nums; transition:border-color 0.15s, box-shadow 0.15s; } .field-input::placeholder { color:var(--text-ter); font-weight:400; } .field-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .field-hint { font-size:0.7rem; color:var(--text-sec); font-variant-numeric:tabular-nums; } .info { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.3rem 1.4rem; margin-top:1.2rem; } .info-title { margin-bottom:0.8rem; } .info-body { font-size:0.82rem; color:var(--text-sec); line-height:1.8; font-variant-numeric:tabular-nums; } .info-body strong { color:var(--text-primary); font-weight:600; } .info-note { margin-top:0.7rem; font-size:0.8rem; color:var(--text-sec); } .conv-footer { margin-top:1.5rem; text-align:center; font-size:0.72rem; color:var(--text-ter); } @media (max-width:560px) { .price-hero { flex-direction:column; align-items:stretch; } .conv-grid { grid-template-columns:1fr; } .price-val { font-size:1.8rem; } } .lock-panel { max-width:44rem; padding:1.4rem 1.6rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-raised); } .lock-panel-head { display:flex; align-items:center; gap:0.5rem; font-weight:600; margin-bottom:0.6rem; } .lock-panel-what { margin:0 0 0.9rem; color:var(--text-sec); line-height:1.55; } .lock-panel-more { margin:0; } .lock-icon { font-size:0.9em; opacity:0.75; } .settings-cols { display:grid; gap:1.5rem; align-items:start; grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 32.5rem)); } .lic-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; } .lic-card p { margin:0 0 0.8rem; overflow-wrap:break-word; } .lic-drop { display:grid; gap:0.2rem; place-items:center; padding:1.6rem; border:1px dashed var(--border-mid); border-radius:var(--radius-md); cursor:pointer; transition:border-color 0.15s, background 0.15s; } .lic-drop:hover, .lic-drop:focus-visible { border-color:var(--accent); } .lic-drop.is-over { border-color:var(--accent); background:var(--accent-soft); } .lic-layout { display:grid; gap:1.5rem; align-items:start; grid-template-columns:minmax(20rem, 28rem) minmax(0, 1fr); } .lic-side, .lic-main { display:flex; flex-direction:column; gap:1.5rem; min-width:0; } .lic-hero { display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:1.6rem; } .lic-feat { margin-bottom:0.8rem; } .lic-feat-row { display:grid; grid-template-columns:minmax(0, 1fr) 5rem 5rem; align-items:center; justify-items:center; padding:0.4rem 0.5rem; border-radius:var(--radius-sm); cursor:default; } .lic-feat-row > :first-child { justify-self:start; } .lic-feat-row[data-feature]:hover, .lic-feat-row[data-feature]:focus-visible, .lic-feat-row.is-on { background:var(--neutral-bg); outline:none; } .lic-feat-cols { font-weight:500; color:var(--text-sec); font-size:0.8rem; padding-top:0; } .lic-group + .lic-group { border-top:1px solid var(--border); } .lic-group > summary { list-style:none; cursor:pointer; padding:0.7rem 0.5rem; font-size:1.05rem; font-weight:500; } .lic-group > summary::-webkit-details-marker { display:none; } .lic-group-name { display:inline-flex; align-items:center; gap:0.5rem; } .lic-group[open] > summary .chev-btn { transform:rotate(180deg); } .lic-feat-sub { list-style:none; margin:0 0 0.5rem; padding:0; font-size:0.88rem; color:var(--text-sec); } .lic-feat-sub .lic-feat-row > :first-child { padding-left:1.6rem; } .lic-feat-yes { color:var(--pos); display:inline-flex; } .lic-feat-yes svg { width:1.4rem; height:1.4rem; } .lic-feat-sub .lic-feat-yes svg { width:1.1rem; height:1.1rem; } .lic-feat-no, .lic-feat-open { color:var(--text-sec); font-size:1.2rem; line-height:1; } .lic-feat-part { color:var(--text-sec); font-size:0.8rem; font-weight:400; } .lic-feat-shot[hidden] { display:none; } .lic-feat-shot { position:fixed; z-index:1000; width:min(34rem, calc(100vw - 1rem)); aspect-ratio:16 / 10; display:grid; place-items:center; padding:0.6rem; text-align:center; overflow:hidden; pointer-events:none; background:var(--bg-raised); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:0 12px 40px rgba(0,0,0,0.35); } .lic-feat-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-sm); }.lic-section { border-top:1px solid var(--border); margin-top:1.2rem; padding-top:1.2rem; } .lic-card .lic-drop { padding:0.8rem; margin-bottom:0.6rem; } .lic-apps { margin:0.2rem 0 0.8rem; } .lic-apps .t-caption { margin-bottom:0.3rem; } .lic-card .lic-apps p { margin:0 0 0.4rem; } .lic-more summary { cursor:pointer; color:var(--text-sec); margin-top:0.4rem; } .lic-more[open] summary { margin-bottom:0.8rem; } .lic-chat-card { position:sticky; top:0; display:flex; flex-direction:column; height:calc(100vh - 11rem); min-height:30rem; } .lic-chat-card[hidden] { display:none; } .lic-chat { flex:1; display:flex; flex-direction:column; gap:0.8rem; min-height:8rem; overflow-y:auto; padding:0.25rem 0.25rem 0.5rem; margin-bottom:1rem; } @media (max-width:1100px) { .lic-layout { grid-template-columns:minmax(0, 1fr); } .lic-chat-card { position:static; height:auto; } .lic-chat { flex:none; max-height:28rem; } } .lic-msg { display:flex; flex-direction:column; gap:0.2rem; max-width:75%; } .lic-msg.is-mine { align-self:flex-end; align-items:flex-end; } .lic-msg.is-theirs { align-self:flex-start; } .lic-bubble { display:flex; flex-direction:column; gap:0.5rem; padding:0.6rem 0.85rem; border-radius:var(--radius-md); background:var(--neutral-bg); } .lic-msg.is-mine .lic-bubble { background:var(--accent-soft); } .lic-card .lic-bubble p { margin:0; white-space:pre-wrap; } .lic-shot { display:block; max-width:100%; max-height:16rem; border-radius:var(--radius-sm); border:1px solid var(--border); } .lic-pending { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.75rem; margin-top:0.5rem; } .lic-pending .lic-shot { max-height:7rem; } @media (max-width:768px) { .lic-msg { max-width:90%; } } .lock-note { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; margin:0 0 0.8rem; font-size:0.82rem; color:var(--text-sec); } .lock-counter { margin-left:0.5rem; font-size:0.78rem; color:var(--text-ter); } .tbl-note { align-self:center; font-size:0.78rem; color:var(--text-ter); } .mobile-topbar { display:none; position:sticky; top:0; z-index:300; background:var(--bg); border-bottom:1px solid var(--border); padding:0.9rem 1.2rem; align-items:center; justify-content:space-between; gap:0.5rem; transition:background 0.25s, border-color 0.25s; } .mobile-topbar-logo { font-weight:700; font-size:0.75rem; display:flex; align-items:center; gap:0.5rem; margin-right:auto; min-width:0; cursor:pointer; } .mobile-topbar-names { display:flex; flex-direction:column; justify-content:center; gap:0.1rem; min-width:0; } .mobile-topbar-logo #mobile-logo-text { line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mobile-menu-btn { background:var(--bg-raised); border:1px solid var(--border); color:var(--text-primary); border-radius:var(--radius-sm); padding:0.4rem 0.7rem; font-size:1rem; cursor:pointer; } @media (max-width:768px) { .sidebar { display:none; } .sidebar.open { display:flex; position:fixed; inset:0; width:100%; z-index:200; height:100vh; overflow-y:auto; padding-top:4.5rem; background:var(--bg); } .sidebar-logo { display:none; } .mobile-topbar { display:flex; } #sb-slot-desktop { display:none; } .main::before { display:none; } .sidebar a.active::after, .nav-edit-group::after { display:none; } #page-hint { top:4.4rem; left:auto; right:1rem; } #page-hint .hint-panel { top:4.4rem; left:auto; right:1rem; width:min(44rem, calc(100vw - 2rem)); } .sidebar a.active { background:var(--accent-soft); border-radius:var(--radius-sm); } .nav-edit-group { background:var(--accent-soft); border-radius:var(--radius-md); } .nav-edit-group > a.active { background:transparent; } .sidebar a { text-align:left; } .sidebar a.has-attention, .sidebar a.is-customizable { justify-content:flex-start; } .sidebar a .nav-attention, .sidebar a .nav-edit-toggle { order:0; } .sidebar a .nav-edit-toggle { margin-left:auto; } .sidebar-section-title { text-align:left; padding-right:0; } .main { padding:2rem 1.2rem 4rem; max-width:100%; } :root { --table-vh-offset: 13rem; } .page { flex-direction:column; } .t-num-lg { font-size:1.8rem; } .oca-header { flex-direction:column; align-items:stretch; } .oca-header-right { align-items:stretch; } .oca-total { text-align:left; } .oca-header-right .btn { width:100%; } .page-actions { flex-wrap:wrap; } } @media (max-width:520px) { .main { padding:1.5rem 1rem 4rem; } .mv-row { gap:0.5rem; padding:0.4rem var(--wallet-pad); } .mv-dir { width:32px; height:32px; } .mv-amounts { gap:0.55rem; } .mv-amt { width:6.5rem; } .mv-fee { width:5.4rem; } .mv-amt .num, .mv-fee .num { font-size:0.78rem; } .mv-date { font-size:0.68rem; } .oca-source-name { font-size:1.1rem; } } .act-block { display:flex; flex-direction:column; gap:0.15rem; align-items:flex-end; text-align:right; } .act-block .t-num-lg { font-size:2.2rem; line-height:1.15; } .act-jump { display:flex; flex-direction:column; gap:0.3rem; } .act-jump-item { appearance:none; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding:0.55rem 0.7rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-sec); font-family:var(--font-base); font-size:0.85rem; font-weight:600; text-align:left; transition:border-color .15s, background .15s, color .15s; } .act-jump-item:hover { color:var(--text-primary); border-color:var(--text-ter); } .act-jump-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .act-jump-count { flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--accent-text); } .act-jump-item.is-done { color:var(--text-ter); } .act-jump-item.is-done .act-jump-count { color:var(--pos); } .act-jump-count svg { display:block; } @media (max-width:1280px) { .act-block { align-items:flex-start; text-align:left; } } .guide-section { max-width:46rem; padding-top:var(--guide-top); } html { --guide-top:0rem; } html[data-pagetitle="off"] { --guide-top:1.2rem; } .guide-body { margin-top:0.8rem; } .guide-body p, .guide-body ul { margin:0 0 0.8rem; } .guide-body ul { padding-left:1.2rem; } .guide-body li { margin-bottom:0.4rem; } .guide-body > p:first-child { font-size:1rem; color:var(--text-sec); } .guide-body .guide-h { margin:1.6rem 0 0.6rem; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-ter); } .guide-terms { display:grid; grid-template-columns:minmax(7rem, 11rem) 1fr; gap:0.55rem 1.2rem; margin:0 0 1rem; } .guide-terms dt { font-weight:600; color:var(--text-primary); text-align:right; padding-right:1.2rem; border-right:1px solid var(--border-mid); } .guide-terms dd { margin:0; } @media (max-width:700px) { .guide-terms { grid-template-columns:1fr; gap:0.15rem; } .guide-terms dt { text-align:left; padding-right:0; border-right:0; margin-top:0.5rem; } } .guide-note { margin:0 0 1rem; padding:0.65rem 0.9rem; border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--accent-soft); color:var(--text-primary); } .guide-body a, .guide-related a { color:var(--accent-text); } .guide-code { margin:0 0 0.8rem; padding:0.6rem 0.8rem; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:var(--bg-overlay); font-family:var(--font-mono); font-size:0.82rem; white-space:pre-wrap; word-break:break-word; user-select:all; } .guide-foot { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.8rem; margin-top:1.8rem; padding-top:1rem; border-top:1px solid var(--border-mid); font-size:0.85rem; } .guide-goto { margin-left:auto; gap:0.25rem; padding-right:0.55rem; transition:color 0.15s, border-color 0.15s, background 0.15s; } .guide-goto svg { width:14px; height:14px; } .guide-goto:hover, .guide-goto:focus-visible { color:var(--accent-text); border-color:var(--accent); background:var(--accent-soft); } .guide-aside .guide-sections .tabset-tab { font-size:0.85rem; padding:0.42rem 0.2rem; } .guide-aside .guide-groups { margin-top:calc(var(--page-head-h) + var(--guide-top)); } .guide-body .guide-icon { display:inline-flex; vertical-align:-0.2em; color:var(--accent-text); } .guide-body .guide-icon svg { width:1em; height:1em; } .guide-aside .guide-groups .tabset { flex-direction:row; justify-content:flex-end; gap:1.6rem; margin:0; padding-bottom:0.15rem; border-bottom:1px solid var(--border-mid); } .guide-aside .guide-groups .tabset-tab { font-size:0.85rem; padding:0.3rem 0.1rem; } .guide-aside .guide-groups .tabset-tab.is-on::after { top:auto; bottom:calc(-0.15rem - 2px); left:0; right:0; width:auto; height:2px; } .guide-aside .guide-sections { margin-top:0.5rem; } @media (max-width:1280px) { .guide-aside .guide-groups { margin-top:0; } .guide-aside .guide-groups .tabset { justify-content:flex-start; } } .sig-aside .sig-bar { display:flex; flex-direction:column; gap:0.35rem; margin:auto 0 0; } .sig-aside .sig-card { padding:0.6rem 0.8rem; gap:0.7rem; } .sig-aside .sig-card-val { white-space:normal; } .sig-aside .tabset--lg .tabset-tab { font-size:0.85rem; padding:0.42rem 0.2rem; } .sig-aside .tabset { margin-top:calc(var(--page-head-h) + 5.2rem); } .sig-panel-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; margin-bottom:1rem; } .sig-panel-btns { display:flex; flex-wrap:wrap; gap:0.4rem; } @media (max-width:1280px) { .sig-aside .tabset { margin-top:0; } } .sig-card { display:flex; align-items:center; gap:0.9rem; text-align:left; width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0.85rem 1.1rem; cursor:pointer; transition:border-color 0.2s, background 0.2s; font-family:var(--font-base); } .sig-card:hover { border-color:var(--border-mid); background:var(--bg-raised); } .sig-light { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--bg-overlay); transition:all 0.4s; } .sig-bar .sig-light { width:14px; height:14px; } .sig-light.green { background:var(--sig-green); } .sig-light.yellow { background:var(--sig-yellow); } .sig-light.red { background:var(--sig-red); } .sig-card-text { display:flex; flex-direction:column; min-width:0; } .sig-card-val { font-family:var(--font-mono); font-size:0.82rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sig-panel > .card { display:flex; flex-direction:column; height:calc(100vh - var(--sig-chrome)); min-height:22rem; } .sig-canvas { position:relative; flex:1 1 auto; min-height:280px; } .sig-canvas canvas { width:100% !important; } .sig-canvas:fullscreen { height:100vh; background:var(--bg); padding:1rem; } .sig-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:var(--bg-elevated); z-index:5; transition:opacity 0.3s; } .sig-loading.hidden { display:none; } .sig-spinner { width:38px; height:38px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .sig-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--neg); font-family:var(--font-mono); font-size:0.85rem; text-align:center; padding:1rem; } .skel { display:inline-block; background:var(--bg-raised); border-radius:var(--radius-sm); position:relative; overflow:hidden; } .skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--accent-soft), transparent); animation:skel-shimmer 1.4s ease-in-out infinite; } @keyframes skel-shimmer { 100% { transform:translateX(100%); } } .skel-line { height:0.7rem; border-radius:999px; } .skel-block { display:block; } .skel-cell { display:inline-block; height:0.8rem; border-radius:999px; } .skel-wrap { display:block; } .skel-row { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; margin-bottom:0.55rem; } .skel-row:last-child { margin-bottom:0; } .skel-row-l { display:flex; align-items:center; gap:0.6rem; flex:1 1 auto; min-width:0; } .skel-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem 1.1rem; } .skel-card-body { margin-top:0.9rem; } .skel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; } .skel-table { display:flex; flex-direction:column; gap:0.55rem; } .skel-trow { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1rem; align-items:center; } .skel-td { display:flex; } .skel-spin-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem; padding:2.5rem 1rem; } .skel-spinner { width:30px; height:30px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; } .skel-error { padding:1.5rem 0; } @media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } .skel-spinner { animation:none; } } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (max-width:900px) { .sig-bar { grid-template-columns:1fr; } .sig-info-grid { grid-template-columns:1fr; } :root { --sig-chrome:23.6rem; } } .label-combo { display:inline-flex; align-items:center; gap:4px; } .label-combo-input { width:auto; min-width:140px; padding:0.4rem 0.6rem; font-size:0.82rem; } .label-combo-btn { display:none; width:30px; height:30px; flex-shrink:0; align-items:center; justify-content:center; border:1px solid var(--border-mid); border-radius:var(--radius-sm); background:var(--bg-raised); color:var(--text-sec); font-size:1rem; line-height:1; cursor:pointer; transition:color .15s, background .15s; } .label-combo-btn:hover { color:var(--text-primary); background:var(--bg-overlay); } .label-combo-btn:disabled { opacity:0.35; cursor:not-allowed; } .label-combo:focus-within .label-combo-btn { display:inline-flex; } .dialog-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(0,0,0,0.55); animation:dlg-fade 0.12s ease-out; } .dialog-overlay--stacked { z-index:2001; background:rgba(0,0,0,0.3); } .dialog { --dialog-pad-y:1.5rem; --dialog-pad-x:1.6rem; width:100%; max-width:420px; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-lg); padding:var(--dialog-pad-y) var(--dialog-pad-x); box-shadow:var(--shadow-3); } [data-theme="dark"] .dialog { background:var(--bg-raised); } .dialog-title { font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:0.6rem; } .dialog-title:has(.dialog-title-aside) { display:flex; align-items:center; gap:0.7rem; } .dialog-title:has(.dialog-title-aside) .dialog-title-text { min-width:0; } .dialog:has(.dialog-close) .dialog-title { padding-right:2.2rem; } .dialog-eye { display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.7rem; height:1.7rem; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-ter); cursor:pointer; } .dialog-eye:hover, .dialog-eye:focus-visible { background:var(--accent-soft); color:var(--accent-text); } .dialog-eye svg { width:1rem; height:1rem; } .dialog:not(:has(.val)) .dialog-eye { display:none; } .dialog:has(.dialog-close) { position:relative; } .dialog-close { position:absolute; top:0.65rem; right:0.65rem; z-index:3; display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-ter); cursor:pointer; opacity:0; pointer-events:none; transition:opacity 0.15s, background 0.15s, color 0.15s; } .dialog:hover .dialog-close, .dialog-close:focus-visible { opacity:1; pointer-events:auto; } .dialog-close:hover { background:var(--accent-soft); color:var(--accent-text); } .dialog-close:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .dialog-body { font-size:0.9rem; color:var(--text-sec); line-height:1.5; white-space:pre-line; } .dialog--wide { max-width:min(72rem, 100%); } .dialog--wide.dialog--xl { max-width:min(110rem, 100%); } .dialog-body--rich { white-space:normal; max-height:min(78vh, calc(100vh - 12rem)); overflow-y:auto; } .dialog-actions { display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.4rem; } @keyframes dlg-fade { from { opacity:0; } to { opacity:1; } } .dialog-overlay--focus { background:rgba(0,0,0,0.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .dialog--wide.dialog-stepper { width:min(56rem, 100%); max-width:min(56rem, 100%); height:min(34rem, calc(100vh - 3rem)); display:flex; flex-direction:column; --dialog-pad-y:2.2rem; --dialog-pad-x:2.4rem; } .dialog-stepper .dialog-body { flex:1; min-height:0; max-height:none; } .stepper-title { font-size:1.5rem; font-weight:600; letter-spacing:-0.01em; color:var(--text-primary); margin-bottom:1.6rem; } .stepper-actions .stepper-skip { margin-right:auto; } .setup-choices { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:0.8rem; } .setup-choice { display:flex; flex-direction:column; gap:0.25rem; text-align:left; padding:1.1rem 1.2rem; border:1px solid var(--border-mid); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text-sec); font:inherit; cursor:pointer; transition:border-color 0.15s, background 0.15s; } .setup-choice:hover { border-color:var(--text-ter); } .setup-choice.is-on { border-color:var(--accent); background:var(--accent-soft); } .setup-choice:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .setup-choice-name { font-weight:600; color:var(--text-primary); } .setup-choice-sub { font-size:0.75rem; color:var(--text-ter); font-family:var(--font-mono); } .dialog--wide.dialog-stepper--hero { width:min(60rem, 100%); max-width:min(60rem, 100%); height:min(44rem, calc(100vh - 3rem)); } .stepper-hero { padding-bottom:2rem; } .dialog-stepper--hero .stepper-title { text-align:center; } .dialog-stepper--hero .setup-choices { max-width:40rem; margin-inline:auto; } .splash-mini { display:flex; flex-direction:column; align-items:center; gap:1.2rem; } .splash-mini .splash-logo { width:clamp(4.5rem, 13vmin, 7rem); } .splash-mini .splash-wing span { width:clamp(2.5rem, 9vw, 8rem); } .splash-mini .splash-wing span:nth-child(1), .splash-mini .splash-wing span:nth-child(3) { width:clamp(1.5rem, 5.5vw, 5rem); } .splash-mini .splash-title { font-size:clamp(0.85rem, 2.4vmin, 1.1rem); } @media (prefers-reduced-motion: reduce) { .splash-mini .splash-logo, .splash-mini .splash-wing span, .splash-mini .splash-title { animation:none; transform:none; opacity:1; } .splash-mini .splash-wing span::after { animation:none; opacity:1; } } .chev-btn { display:inline-flex; align-items:center; justify-content:center; padding:0; border:none; background:none; color:var(--text-ter); cursor:pointer; transition:opacity 0.15s, color 0.15s, transform 0.15s; transform-origin:center; } .chev-btn svg { display:block; } .chev-btn:hover { color:var(--accent); } .chev-btn.is-open { transform:rotate(180deg); } .chev-btn.is-accent { color:var(--accent); } .oca-collapse { position:absolute; top:0.4rem; left:0; right:0; margin:0 auto; width:1.6rem; height:1.6rem; z-index:2; opacity:0; } .oca-source:hover .oca-collapse, .oca-collapse:focus-visible { opacity:1; } .oca-source.is-collapsed .oca-movements { display:none; } .val { transition:filter 0.12s; } [data-blur="on"] .val { filter:blur(max(10px, 0.55em)); } [data-blur="on"] .val:hover { filter:none; } .statusbar-eye { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:0.25rem; border:none; background:none; color:var(--text-ter); cursor:pointer; border-radius:var(--radius-sm); transition:color 0.15s; } .statusbar-eye:hover { color:var(--text-primary); } .statusbar-eye.is-on { color:var(--accent); } .statusbar-eye svg { display:block; } .po-btn { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; border:0; background:none; color:var(--text-sec); cursor:default; opacity:0; max-width:0; padding:0; margin:0; overflow:hidden; pointer-events:none; transition:max-width 0.12s, opacity 0.12s, margin 0.12s; } .po-btn svg { width:0.8rem; height:0.8rem; flex:none; } td:hover .po-btn, .po-host:hover .po-btn, .po-btn:focus-visible { opacity:1; max-width:0.8rem; margin-left:0.2rem; pointer-events:auto; } @media (min-width:1201px) { td:not(.num):has(> .po-btn)::after, td:not(.num) :has(> .po-btn)::after, td.num:has(> .po-btn)::before, td.num :has(> .po-btn)::before { content:''; display:inline-block; width:1rem; transition:width 0.12s; } td:hover:has(> .po-btn)::after, td:hover :has(> .po-btn)::after, td:hover:has(> .po-btn)::before, td:hover :has(> .po-btn)::before { width:0; } } .po-btn:hover, .po-btn:focus-visible { color:var(--accent-text); outline:none; } td:hover .po-btn, .po-host:hover .po-btn { color:var(--accent-text); } .po-btn.is-warn, td:hover .po-btn.is-warn, .po-host:hover .po-btn.is-warn, .po-btn.is-warn:hover { color:var(--sig-yellow); } .po-pop { position:fixed; z-index:1000; max-width:22rem; padding:0.55rem 0.75rem; font-size:0.78rem; line-height:1.45; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:var(--shadow-2); pointer-events:none; } [data-theme="dark"] .po-pop { background:var(--bg-raised); } .ring-tip { position:fixed; z-index:2100; display:flex; flex-direction:column; gap:0.05rem; padding:0.3rem 0.55rem; line-height:1.3; font-size:0.72rem; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-primary); background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:var(--shadow-2); transform:translate(-50%, calc(-100% - 10px)); pointer-events:none; opacity:0; transition:opacity 0.12s ease; } [data-theme="dark"] .ring-tip { background:var(--bg-raised); } .ring-tip.is-visible { opacity:1; } .ring-tip-label { font-weight:600; } .ring-tip-row { display:flex; gap:0.35rem; } .ring-tip-pct { color:var(--text-sec); } .ring-tip-row--sub { padding-left:0.7rem; font-size:0.92em; } .po-pop .po-head { font-weight:600; font-variant-numeric:tabular-nums; } .po-pop .po-line { color:var(--text-sec); } .tax-table td.num .copy-btn { opacity:0; max-width:0; padding:0; overflow:hidden; transition:max-width 0.12s, opacity 0.12s, padding 0.12s; } .tax-table td.num:hover .copy-btn { opacity:1; max-width:1.5rem; padding:0 0.15rem; margin-left:0.2rem; } .statusbar { display:grid; grid-template-columns:var(--sb-vak,3rem) 1px var(--sb-vak,3rem) 1px var(--sb-vak,3rem); align-items:center; gap:0.5rem; height:2.4rem; padding:0 0.55rem; background:color-mix(in srgb, var(--neutral-bg) 90%, transparent); border-radius:var(--radius-sm); } .statusbar-slot { display:flex; align-items:center; min-width:0; } #sb-slot-desktop { margin:0 0 1.5rem; } #sb-slot-desktop .statusbar { width:100%; grid-template-columns:1fr 1px 1fr 1px 1fr; } #sb-slot-mobile .statusbar { gap:0.35rem; padding:0 0.35rem; max-width:100%; grid-template-columns:var(--sb-vak,3rem) 1px minmax(0.6rem, var(--sb-vak,3rem)) 1px var(--sb-vak,3rem); } .statusbar-div { width:1px; height:1.5rem; background:var(--bg); justify-self:center; } .statusbar-dots { display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--sb-rows,2),1fr); gap:5px; align-content:center; justify-content:center; } .statusbar-dot { width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--bg); opacity:1; cursor:pointer; transition:background 0.2s, opacity 0.3s, box-shadow 0.3s, transform 0.2s; } .statusbar-dot:hover { background:var(--text-ter); opacity:0.7; } .statusbar-dot.is-active.is-ok { background:var(--sig-green); opacity:1; } .statusbar-dot.is-active.is-fail { background:var(--sig-red); opacity:1; } .statusbar-dot.is-active { animation:sb-blip 0.6s ease-out; } .statusbar-labels { display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; } .statusbar-label { font-family:var(--font-mono); font-size:0.62rem; line-height:1.25; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; } .statusbar-label.is-flash { animation:sb-label 2.6s var(--ease-out) forwards; } .statusbar-blur { display:flex; align-items:center; justify-content:center; } @keyframes sb-blip { 0% { transform:scale(0.6); } 50% { transform:scale(1.35); } 100% { transform:scale(1); } } @keyframes sb-label { 0% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; } } @keyframes attn-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } } @media (prefers-reduced-motion: reduce) { .statusbar-dot.is-active { animation:none; } .statusbar-label.is-flash { animation:none; opacity:1; } .nav-attention { animation:none; } .statusbar-attn.is-shown { animation:none; } } .statusbar-labels { position:relative; } .statusbar-attn { position:absolute; inset:0; margin:auto; width:14px; height:14px; padding:0; border:none; border-radius:50%; display:grid; place-items:center; --attn-c:var(--accent); background:var(--attn-c); color:#000; font-size:0.62rem; font-weight:800; line-height:1; cursor:pointer; opacity:0; transform:scale(0.6); pointer-events:none; transition:opacity 0.25s, transform 0.25s; } .statusbar-attn.is-shown { opacity:1; transform:scale(1); pointer-events:auto; animation:attn-pulse 2s ease-in-out infinite; } .statusbar-attn.is-shown.is-dim { opacity:0.45; animation:none; } .statusbar-attn.is-problem { --attn-c:var(--sig-red); } .statusbar-attn:hover { filter:brightness(1.1); } .statusbar-attn.is-count { width:auto; min-width:16px; height:16px; padding:0 3px; border-radius:8px; } .attn-menu { position:fixed; min-width:15rem; max-width:22rem; padding:0.35rem; background:var(--bg-elevated); border:1px solid var(--border-mid); border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,0.3); z-index:1000; } [data-theme="dark"] .attn-menu { background:var(--bg-raised); } .attn-menu-title { padding:0.3rem 0.5rem 0.4rem; } .attn-menu-item { display:block; width:100%; text-align:left; background:none; border:none; border-radius:var(--radius-sm); padding:0.45rem 0.5rem; font-size:0.8rem; color:var(--text-primary); cursor:pointer; } .attn-menu-item:hover { background:var(--neutral-bg); } .int-section + .int-section { margin-top:1.6rem; } .mx-card { display:flex; flex-direction:column; gap:0.9rem; padding:1.1rem 1.2rem 1.2rem; } .mx-card-head { display:flex; flex-direction:column; gap:0.2rem; } .mx-stand { color:var(--text-ter); } .mx-wrap { overflow:hidden; } .mx-table { --mx-rank:1.5rem; border-collapse:separate; border-spacing:0 0.3rem; width:100%; table-layout:fixed; font-size:0.8rem; } .mx-table thead { position:static; } .mx-table th, .mx-table td { padding:0.6rem 0.4rem; border:0; background:none; box-shadow:none; text-align:center; vertical-align:middle; white-space:nowrap; color:var(--text-primary); } .mx-table tr, .mx-table tbody tr, .mx-table tr:hover, .mx-table tbody tr:hover, .mx-table tr:hover > td, .mx-table tbody tr:hover > td { border:0; background:none; box-shadow:none; } .mx-table thead th { font-size:0.7rem; font-weight:500; color:var(--text-sec); line-height:1.2; padding-bottom:0.5rem; } .mx-table thead tr:last-child th { border-bottom:1px solid var(--border); } .mx-table .mx-cur-row th { padding-top:0; height:1.4rem; line-height:0.9rem; } .mx-name { display:block; overflow:hidden; text-overflow:ellipsis; } .mx-table .mx-lab { width:5.5rem; text-align:left; padding-left:0; font-weight:500; color:var(--text-sec); } .mx-cur { font-size:0.65rem; color:var(--text-ter); } .mx-cell { cursor:pointer; border-radius:var(--radius-sm); transition:background 0.12s; } .mx-table tbody tr > td.mx-cell:hover { background:var(--accent-soft); } .mx-pick { display:inline-grid; place-items:center; width:var(--mx-rank); height:var(--mx-rank); vertical-align:middle; color:var(--text-ter); font-weight:700; opacity:0; transition:opacity 0.12s, color 0.12s; } .mx-table tbody td { height:calc(var(--mx-rank) + 1.2rem); } .mx-rank { vertical-align:middle; } .mx-card:hover .mx-pick { opacity:0.45; } .mx-card .mx-cell:hover .mx-pick { opacity:1; color:var(--accent-text); } .mx-empty { font-size:0.78rem; color:var(--text-ter); } .mx-rank { display:inline-grid; place-items:center; width:var(--mx-rank); height:var(--mx-rank); border-radius:50%; font-size:calc(var(--mx-rank) * 0.48); font-weight:700; font-variant-numeric:tabular-nums; background:var(--accent-soft); color:var(--accent-text); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .mx-rank-1 { background:var(--accent); color:#fff; border-color:var(--accent); } [data-theme="dark"] .mx-rank-1 { color:#000; } .mx-rank.is-proposed { box-shadow:0 0 0 2px var(--sig-yellow); } .mx-svc { cursor:default; } .mx-rank.is-service { border-style:dashed; } .mx-rank.is-off, [data-theme="dark"] .mx-rank.is-off { background:var(--bg-elevated); color:var(--text-ter); border-color:var(--border); } .mx-col.is-off { color:var(--text-ter); } .cov-lines { --cov-line:1.6rem; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:1rem; align-content:center; } .cov-line { display:flex; align-items:center; min-height:var(--cov-line); min-width:0; } .cov-line:last-child:nth-child(odd) { grid-column:1 / -1; } .mx-rank.is-empty { background:transparent; color:var(--text-ter); border:1px dashed var(--border-mid); } .mx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); grid-auto-rows:1fr; gap:1.25rem; align-items:stretch; margin-top:1rem; } .mx-filter { margin:0.2rem 0 1.3rem; } @media (max-width:520px) { .mx-table { --mx-rank:1.25rem; font-size:0.72rem; } } @media (max-width:1200px) { .table-wrap { max-height:none; overflow:visible; } .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display:block; width:auto; } .table-wrap thead { display:none; } .table-wrap tbody tr { border:none; } .table-wrap tbody tr[data-row-id] { border:none; border-top:1px solid var(--border-mid); background:transparent; margin:0 0 0.4rem; } .table-wrap tbody tr[data-row-id]:hover { background:transparent; } .table-wrap tbody tr[data-row-id].row-alt, .table-wrap tbody tr[data-row-id].row-alt:hover { background:color-mix(in srgb, var(--text-primary) 6%, transparent); } .table-wrap tbody tr[data-row-id]:has(+ tr.row-expansion) { margin-bottom:0; } .table-wrap tbody tr.row-expansion { margin:0 0 1.1rem; } .table-wrap tbody tr.group-row + tr[data-row-id] { border-top:none; } .table-controls .tbl-filter { justify-content:flex-start; } .table-wrap tbody tr.row-selected { box-shadow:none; } .table-wrap tbody tr.row-selected > td { background:transparent; box-shadow:inset 3px 0 0 var(--accent); } .table-wrap td[data-label] { display:flow-root; text-align:right; white-space:normal; overflow-wrap:anywhere; padding:0.5rem 0.9rem; border:none; border-top:1px solid var(--border); } .table-wrap td { height:auto; } .table-wrap td.text > .cell-clamp { display:block; -webkit-line-clamp:none; overflow:visible; } .table-wrap tr > td[data-label]:first-child, .table-wrap tr > td.exp-cell + td[data-label] { border-top:none; } .table-wrap td[data-label]::before { content:attr(data-label); float:left; margin-right:1rem; text-align:left; line-height:1.5; font-size:0.66rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-sec); } .table-wrap td:not([data-label]):not(.actions-cell):empty { display:none; } .table-wrap td.exp-cell, .table-wrap th.exp-cell { display:none; } .table-wrap .group-row > td, .table-wrap .row-expansion > td, .table-wrap .edit-expand-row > td { display:block; } .table-wrap .actions-cell { display:flex; align-items:center; justify-content:flex-end; width:auto; min-height:2.6rem; padding:0.35rem 0.9rem; } .table-wrap tr.row-editing > .actions-cell:empty { display:none; } .table-wrap tr.row-editing td[data-label] { display:block; text-align:left; } .table-wrap tr.row-editing td[data-label]::before { float:none; display:block; margin:0 0 0.25rem; } .table-wrap tr.row-editing td[data-label] .input, .table-wrap tr.row-editing td[data-label] .conv-field { width:100%; } .table-wrap.sticky-sel tbody tr.row-selected > td { position:static; } } .health-start { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; margin-bottom:0.6rem; } .health-rows { list-style:none; margin:0.4rem 0 0; padding:0; } .health-rows li { display:flex; gap:0.45rem; align-items:baseline; padding:0.15rem 0; font-size:0.86rem; overflow-wrap:anywhere; } .health-rows li > span { min-width:0; } .health-rows li .btn { flex-shrink:0; } .health-findings { display:flex; flex-direction:column; gap:0.9rem; } .health-accepted:not(:empty) { margin-top:1.6rem; } .card.health-warn { background:var(--neg-bg); border-color:color-mix(in srgb, var(--neg) 35%, transparent); } .card.health-info { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, transparent); } .health-finding .task-card-head { justify-content:flex-start; gap:0.7rem; } @property --rim-top { syntax:''; inherits:true; initial-value:transparent; } @property --rim-bottom { syntax:''; inherits:true; initial-value:transparent; } @property --hairline { syntax:''; inherits:true; initial-value:transparent; } :root[data-profile="glass"] :is(.card, .card-flat) { position:relative; background:var(--lift), var(--lit), linear-gradient(var(--frost), var(--frost)), var(--card-fill, var(--surface)); border-color:transparent; box-shadow:var(--shadow-1), var(--glans); transition:background-color 0.25s, box-shadow 0.25s, --rim-top 0.25s, --rim-bottom 0.25s, --hairline 0.25s; } :root[data-profile="glass"] :is(.card, .card-flat)::after { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background: linear-gradient(90deg, transparent 14%, var(--hairline) 50%, transparent 86%) top / 100% 1px no-repeat, linear-gradient(180deg, var(--rim-top), var(--rim-bottom)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :root[data-profile="glass"] .tax-card { border-color:var(--frame-border); box-shadow:var(--shadow-1), inset 0 1px 0 var(--frame-top); } :root[data-profile="glass"] .tax-card::after { content:none; } :root[data-profile="glass"] .net-card::after, .net-card > .attn { inset:0; } :root[data-profile="glass"] :is(.card, .card-flat) :is(.card, .card-flat) { --card-fill:var(--surface-tint); --frost:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-profile="glass"] .card.health-warn { --card-fill:var(--neg-bg); } :root[data-profile="glass"] .card.health-info { --card-fill:var(--accent-soft); } :root[data-profile="glass"] .wealth-card:hover { --rim-top:var(--rim-hover); --rim-bottom:var(--rim-hover-bottom); --hairline:var(--hairline-hover); --lift:linear-gradient(var(--hover-fill), var(--hover-fill)); box-shadow:var(--shadow-1), var(--glans), var(--hover-shadow); } :root[data-profile="glass"] .wealth-card.is-linked { --rim-top:color-mix(in srgb, var(--accent) 65%, transparent); --rim-bottom:color-mix(in srgb, var(--accent) 18%, transparent); --hairline:var(--accent-text); --glans:var(--glans-on); box-shadow:var(--shadow-1), var(--glans); } :root[data-profile="glass"] .wealth-card.is-selected { --rim-top:color-mix(in srgb, var(--accent) 85%, transparent); --rim-bottom:color-mix(in srgb, var(--accent) 30%, transparent); --hairline:var(--accent-text); --glans:var(--glans-on); --lit:radial-gradient(120% 85% at 50% -12%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%); box-shadow:var(--shadow-1), var(--glans), var(--select-shadow); } :root[data-profile="glass"] :is(.sig-card, .connp, .setup-choice) { background:linear-gradient(var(--frost), var(--frost)), var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] :is(.sig-card, .connp, .setup-choice):hover { background:linear-gradient(var(--hover-fill), var(--hover-fill)), var(--surface-tint); border-color:var(--rim-hover); } :root[data-profile="glass"] .setup-choice.is-on { background:var(--accent-soft); border-color:var(--accent); } :root[data-profile="glass"] .connp.is-active { background:var(--accent-soft); border-color:var(--accent); } :root[data-profile="glass"] .table-frame { background:var(--edge), linear-gradient(var(--frost), var(--frost)), var(--surface); border-color:var(--frame-border); box-shadow:var(--shadow-1), inset 0 1px 0 var(--frame-top); } :root[data-profile="glass"] thead th { background:var(--surface-tint); } :root[data-profile="glass"] tbody th { background:transparent; } :root[data-profile="glass"] .tax-table thead { position:static; } :root[data-profile="glass"] .tax-table thead th { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } :root[data-profile="glass"] table.mx-table thead th { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } :root[data-profile="glass"] thead tr:last-child > th { box-shadow:inset 0 -1px 0 var(--frame-border); } :root[data-profile="glass"] .table-wrap { --head-fill:var(--surface-tint); --head-line:var(--frame-border); } :root[data-profile="glass"] tbody tr { border-bottom-color:var(--row-line); } :root[data-profile="glass"] tbody tr:hover { background:var(--row-hover); } :root[data-profile="glass"] :is(.row-expansion > td, .row-expansion:hover > td) { background:var(--surface-tint); } :root[data-profile="glass"] tbody tr.row-selected td { background:transparent; } :root[data-profile="glass"] tbody tr.row-selected:hover td { background:var(--row-hover); } :root[data-profile="glass"] tbody tr.row-selected td:first-child { box-shadow:inset 2px 0 0 var(--accent), inset 14px 0 18px -14px var(--accent-glow); } :root[data-profile="glass"] tbody tr.row-selected { background:linear-gradient(192deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 45%, transparent 85%); } :root[data-profile="glass"][data-rowsel="tint"] tbody tr.row-selected { background:var(--row-sel); } :root[data-profile="glass"][data-rowsel="tint"] tbody tr.row-selected:hover { background:var(--row-sel-hover); } :root[data-profile="glass"][data-rowsel="tint"] tbody tr.row-selected:hover td { background:transparent; } :root[data-profile="glass"][data-rowsel="tint"] tbody tr.row-selected td:first-child { box-shadow:inset 3px 0 0 var(--accent); } :root[data-profile="glass"][data-rowsel="pill"] .table-wrap table { border-collapse:separate; border-spacing:0; } :root[data-profile="glass"][data-rowsel="pill"] .table-wrap tbody td { border-bottom:1px solid var(--row-line); } :root[data-profile="glass"][data-rowsel="pill"] .table-wrap tbody tr:last-child > td, :root[data-profile="glass"][data-rowsel="pill"] .table-wrap tbody tr.row-selected > td, :root[data-profile="glass"][data-rowsel="pill"] .table-wrap tbody tr:has(+ tr.row-selected) > td { border-bottom-color:transparent; } :root[data-profile="glass"][data-rowsel="pill"] tbody tr.row-selected { background:none; } :root[data-profile="glass"][data-rowsel="pill"] tbody tr.row-selected td { background:color-mix(in srgb, var(--accent) 8%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 18%, transparent); } :root[data-profile="glass"][data-rowsel="pill"] tbody tr.row-selected td:first-child { border-radius:10px 0 0 10px; box-shadow:inset 1px 1px 0 color-mix(in srgb, var(--accent) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 18%, transparent); } :root[data-profile="glass"][data-rowsel="pill"] tbody tr.row-selected td:nth-last-child(1 of :not(.actions-cell)) { border-radius:0 10px 10px 0; box-shadow:inset -1px 1px 0 color-mix(in srgb, var(--accent) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 18%, transparent); } :root[data-profile="glass"] .table-wrap.sticky-sel { --sel-fill:color-mix(in srgb, var(--accent) 10%, transparent); --sel-fill-hover:color-mix(in srgb, var(--accent) 16%, transparent); } :root[data-profile="glass"][data-rowsel="tint"] .table-wrap.sticky-sel { --sel-fill:var(--row-sel); --sel-fill-hover:var(--row-sel-hover); } :root[data-profile="glass"][data-rowsel="pill"] .table-wrap.sticky-sel { --sel-fill:color-mix(in srgb, var(--accent) 8%, transparent); --sel-fill-hover:color-mix(in srgb, var(--accent) 13%, transparent); } :root[data-profile="glass"] .table-wrap.sticky-sel tbody tr.row-selected { background:none; } :root[data-profile="glass"] .table-wrap.sticky-sel tbody tr.row-selected > td { background:linear-gradient(var(--sel-fill), var(--sel-fill)); backdrop-filter:blur(var(--float-blur)); -webkit-backdrop-filter:blur(var(--float-blur)); } :root[data-profile="glass"] .table-wrap.sticky-sel tbody tr.row-selected:hover > td { background:linear-gradient(var(--sel-fill-hover), var(--sel-fill-hover)); } :root[data-profile="glass"]:not([data-rowsel="tint"], [data-rowsel="pill"]) .table-wrap.sticky-sel tbody tr.row-selected > td { background-image:linear-gradient(192deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 45%, transparent 85%); background-size:var(--row-w, 100%) 100%; background-position:calc(-1 * var(--cell-x, 0px)) 0; background-repeat:no-repeat; transition:background-color 0.25s; } :root[data-profile="glass"]:not([data-rowsel="tint"], [data-rowsel="pill"]) .table-wrap.sticky-sel tbody tr.row-selected:hover > td { background-image:linear-gradient(var(--row-hover), var(--row-hover)), linear-gradient(192deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 45%, transparent 85%); background-size:100% 100%, var(--row-w, 100%) 100%; background-position:0 0, calc(-1 * var(--cell-x, 0px)) 0; } :root[data-profile="glass"] .pill-toggle { background:var(--surface-tint); box-shadow:inset 0 0 0 1px var(--row-line); } :root[data-profile="glass"] .btn-secondary { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] .btn-secondary:hover { background:var(--row-hover); border-color:var(--rim-hover); } :root[data-profile="glass"] :is(.input, .field-input, .dash-profile-list) { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] :is(.input, .field-input):focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), 0 0 18px -4px var(--accent-glow); } :root[data-profile="glass"] .field { background:linear-gradient(var(--frost), var(--frost)), var(--surface); border-color:var(--frame-border); } :root[data-profile="glass"] .field:focus-within { border-color:var(--accent); } :root[data-profile="glass"] .label-combo-btn { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] :is(.label-combo-btn, .conv-trigger):hover { background:var(--row-hover); } :root[data-profile="glass"] .wealth-year:hover { background:var(--row-hover); border-color:var(--rim-hover); } :root[data-profile="glass"] .toggle-switch input:not(:checked) ~ .toggle-track { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] :is(.fbar-item, .trk-acct, .act-jump-item, .tbl-count, .guide-code) { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] :is(.fbar-item, .trk-acct, .act-jump-item):hover { background:var(--row-hover); border-color:var(--rim-hover); } :root[data-profile="glass"] :is(.fbar-item, .trk-acct).is-on { background:var(--accent-soft); border-color:var(--accent); } :root[data-profile="glass"] :is(.trk-act, .btn-new) { border-color:var(--frame-border); } :root[data-profile="glass"] :is(.trk-act, .btn-new):hover { border-color:var(--rim-hover); } :root[data-profile="glass"] .btn-new:hover { border-color:var(--accent); } :root[data-profile="glass"] .table-controls-bar { background:var(--surface-tint); } :root[data-profile="glass"] :is(.connp-mini, .dash-edit-wsel, .rec-wiz-item, .spark, .code, .codeblock, .codeblock-tag, .codeblock-copy, .info, .lock-panel, .mobile-menu-btn, .skel) { background:var(--surface-tint); border-color:var(--frame-border); } :root[data-profile="glass"] .skel-card { background:linear-gradient(var(--frost), var(--frost)), var(--surface); border-color:var(--frame-border); } :root[data-profile="glass"] .btn-primary { box-shadow:inset 0 1px 0 rgba(255,255,255,0.25); } :root[data-profile="glass"][data-theme="dark"] .btn-primary { box-shadow:0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25); } :root[data-profile="glass"] :is(.hint-panel, .match-pop, .conv-pop, .new-menu, .attn-menu, .dash-settings, .dashboard-add-menu, .wealth-year-menu, .po-pop, .ring-tip, .cmd-bar) { background:linear-gradient(var(--frost), var(--frost)), var(--float-bg); border-color:var(--frame-border); box-shadow:var(--shadow-2), inset 0 1px 0 var(--frame-top); backdrop-filter:blur(var(--float-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--float-blur)) saturate(150%); } :root[data-profile="glass"] .cmd-bar { border-color:var(--accent); } :root[data-profile="glass"] :is(.dash-edit-bar, .spark-mini-label) { background:var(--float-bg); border-color:var(--frame-border); backdrop-filter:blur(var(--float-blur)); -webkit-backdrop-filter:blur(var(--float-blur)); } :root[data-profile="glass"] .mobile-topbar { background:color-mix(in srgb, var(--bg) 60%, transparent); border-bottom-color:var(--frame-border); backdrop-filter:blur(var(--float-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--float-blur)) saturate(150%); } :root[data-profile="glass"] .dialog-overlay { background:transparent; } :root[data-profile="glass"] .dialog-overlay::before { content:''; position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,0.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } :root[data-profile="glass"][data-theme="light"] .dialog-overlay::before { background:rgba(0,0,0,0.18); } :root[data-profile="glass"] .dialog { position:relative; isolation:isolate; background:none; border-color:var(--frame-border); box-shadow:var(--shadow-3); } :root[data-profile="glass"] .dialog::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(var(--frost), var(--frost)), var(--float-bg); box-shadow:inset 0 1px 0 var(--frame-top); backdrop-filter:blur(var(--float-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--float-blur)) saturate(150%); } :root[data-profile="glass"] .lic-feat-shot { background:linear-gradient(var(--frost), var(--frost)), var(--float-bg); border-color:var(--frame-border); backdrop-filter:blur(var(--float-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--float-blur)) saturate(150%); } :root[data-profile="glass"] .dialog .table-frame { background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-profile="glass"] .dialog .table-controls-bar { background:none; } .aurora { display:none; position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } :root[data-profile="glass"]:not([data-glow="off"]) .aurora { display:block; } :root[data-profile="glass"] body:has(> .aurora)::before { display:none; } .blob { position:absolute; border-radius:50%; translate:-50% -50%; will-change:transform; transition:transform var(--drift-dur, 24s) cubic-bezier(0.45, 0.05, 0.25, 1), opacity 2.5s; } .blob::before, .blob::after { content:''; position:absolute; border-radius:50%; pointer-events:none; transition:opacity var(--drift-dur, 24s) ease-in-out; } .blob::before { inset:0; background:var(--spot); } .blob::after { left:50%; top:50%; width:var(--core-size); height:var(--core-size); translate:-50% -50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) var(--core-hi), transparent), color-mix(in srgb, var(--accent) var(--core-lo), transparent) 30%, transparent 70%); opacity:0; } .blob.is-core::before { opacity:0.35; } .blob.is-core::after { opacity:1; } .blob-a { left:8%; top:-8%; width:116rem; height:68rem; --spot:radial-gradient(closest-side, var(--accent-glow), transparent 62%); --core-size:74rem; --core-hi:40%; --core-lo:13%; } .blob-b { left:102%; top:4%; width:92rem; height:60rem; --spot:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%); --core-size:62rem; --core-hi:24%; --core-lo:8%; } .blob-c { left:50%; top:100%; width:124rem; height:84rem; --spot:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%); --core-size:66rem; --core-hi:24%; --core-lo:8%; opacity:0; } [data-theme="light"] .blob-a { --core-hi:26%; --core-lo:9%; } [data-theme="light"] :is(.blob-b, .blob-c) { --core-hi:16%; --core-lo:5%; } :is([data-motion="step"], [data-motion="always"]) .blob-c { opacity:1; } [data-motion="always"] .blob { transition:opacity 2.5s; } [data-motion="always"] .blob-a { animation:drift-a calc(24s * var(--drift-mult, 2)) ease-in-out infinite alternate; } [data-motion="always"] .blob-b { animation:drift-b calc(30s * var(--drift-mult, 2)) ease-in-out infinite alternate; } [data-motion="always"] .blob-c { animation:drift-c calc(36s * var(--drift-mult, 2)) ease-in-out infinite alternate; } @keyframes drift-a { 50% { transform:translate(20vw, 6vh) rotate(10deg) scale(1.15, 0.9); } 100% { transform:translate(42vw, 14vh) rotate(-6deg) scale(0.95, 1.15); } } @keyframes drift-b { 50% { transform:translate(-24vw, 12vh) rotate(-12deg) scale(0.9, 1.15); } 100% { transform:translate(-52vw, 18vh) rotate(8deg) scale(1.1, 0.95); } } @keyframes drift-c { 40% { transform:translate(-32vw, -30vh) rotate(8deg) scale(1.15, 0.9); } 75% { transform:translate(30vw, -18vh) rotate(-10deg) scale(0.95, 1.12); } 100% { transform:translate(10vw, 80vh) rotate(-4deg) scale(1, 1); } } @media (prefers-reduced-motion: reduce) { .blob { transition:opacity 2.5s; animation:none; transform:none !important; } .blob.is-core::before { opacity:1; } .blob.is-core::after { opacity:0; } } .bands { display:none; position:absolute; inset:0; opacity:0; transition:opacity 5s ease-in-out; -webkit-mask-image:radial-gradient(farthest-corner at 100% 0%, #000 15%, rgba(0,0,0,0.45) 55%, transparent 95%); mask-image:radial-gradient(farthest-corner at 100% 0%, #000 15%, rgba(0,0,0,0.45) 55%, transparent 95%); } :root[data-glowshape="bands"] .bands { display:block; } .bands.is-shown { opacity:var(--band-alpha); } [data-theme="dark"] { --band-ink:color-mix(in srgb, var(--accent) 60%, #ffffff); --band-alpha:0.55; } [data-theme="light"] { --band-ink:color-mix(in srgb, var(--accent) 85%, #000000); --band-alpha:0.32; } .band { position:absolute; left:50%; top:50%; width:calc(100vw + 30vh + 60px); height:calc(100vh + 30vw + var(--tile-h, 0px) + 60px); background:var(--band-ink); -webkit-mask-image:linear-gradient(transparent, transparent); mask-image:linear-gradient(transparent, transparent); -webkit-mask-repeat:repeat; mask-repeat:repeat; will-change:transform; animation:band-fall calc(var(--band-dur, 20s) * var(--drift-mult, 2) / 2) linear infinite paused; } .bands.is-falling .band { animation-play-state:running; } @keyframes band-fall { from { transform:translate(-50%, -50%) rotate(var(--tilt)) translateY(calc(var(--tile-h) * -0.5)); } to { transform:translate(-50%, -50%) rotate(var(--tilt)) translateY(calc(var(--tile-h) * 0.5)); } } :root[data-glowshape="bands"] .blob { animation:none; transform:none !important; } :root[data-glowshape="bands"] .blob-c { opacity:0; } @media (prefers-reduced-motion: reduce) { .band { animation-play-state:paused !important; } } .attn { position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; overflow:hidden; opacity:0; transition:opacity 0.8s; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .card > .attn { position:absolute; } .attn-spin { position:absolute; left:50%; top:50%; width:var(--attn-d, 800px); height:var(--attn-d, 800px); margin:calc(var(--attn-d, 800px) / -2) 0 0 calc(var(--attn-d, 800px) / -2); background:conic-gradient(from 0deg, transparent 0 52%, color-mix(in srgb, var(--accent) 45%, transparent) 70%, var(--accent-text) 82%, transparent 94%); animation:attn-spin 3.5s linear infinite; animation-play-state:paused; } .is-attention > .attn { opacity:1; } .is-attention > .attn .attn-spin { animation-play-state:running; will-change:transform; } .is-attention { box-shadow:var(--shadow-1), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 16px 48px -20px var(--accent-glow); } @keyframes attn-spin { to { transform:rotate(1turn); } } @media (prefers-reduced-motion: reduce) { .attn-spin { animation:none; background:var(--accent); } } @media (prefers-reduced-transparency: reduce) { :root[data-profile="glass"] :is(thead th, .hint-panel, .match-pop, .conv-pop, .new-menu, .attn-menu, .dash-settings, .dashboard-add-menu, .wealth-year-menu, .po-pop, .ring-tip, .cmd-bar, .dash-edit-bar, .spark-mini-label, .mobile-topbar, .dialog) { background:var(--bg-elevated); backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-profile="glass"] .dialog::before { background:var(--bg-elevated); backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-profile="glass"] .table-wrap { --head-fill:var(--bg-elevated); } :root[data-profile="glass"] .table-wrap.sticky-sel tbody tr.row-selected > td { background:color-mix(in srgb, var(--accent) 20%, var(--bg-elevated)); backdrop-filter:none; -webkit-backdrop-filter:none; } }