2579 lines
185 KiB
CSS
2579 lines
185 KiB
CSS
/* 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:'<color>'; inherits:true; initial-value:transparent; }
|
|
@property --rim-bottom { syntax:'<color>'; inherits:true; initial-value:transparent; }
|
|
@property --hairline { syntax:'<color>'; 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;
|
|
}
|
|
}
|