/* StreamOrg — single stylesheet, no build step. */

:root,
[data-theme="light"] {
    color-scheme: light;

    --bg:        #f4f5f7;
    --surface:   #ffffff;
    --surface-2: #f8f9fa;

    --border:        #d8dce2;
    --border-soft:   #e8ebef;
    --border-strong: #b9c0ca;

    --text:    #1b2027;
    --text-2:  #414a56;
    --muted:   #6b7684;

    --accent:        #1f5aa6;
    --accent-dark:   #17467f;
    --accent-soft:   #eaf1f9;
    --accent-border: #b9cde4;
    --accent-2:      #3f8ddb;
    --accent-3:      #6fb0e8;
    --accent-rgb:    31, 90, 166;
    --on-accent:     #ffffff;

    --ok:            #1d7a4d;
    --ok-bg:         #e8f4ee;
    --ok-border:     #b4d9c4;
    --ok-ink:        #14593a;
    --warn:          #8a6100;
    --warn-bg:       #fbf2df;
    --warn-border:   #e3cea0;
    --danger:        #a32b2b;
    --danger-bg:     #fbeceb;
    --danger-border: #e6bcba;
    --danger-ink:    #7d2020;
    --danger-hover:  #8a2424;
    --on-danger:     #ffffff;

    --topbar-bg:          rgba(255, 255, 255, .74);
    --topbar-bg-scrolled: rgba(255, 255, 255, .88);
    --topbar-bg-solid:    rgba(255, 255, 255, .97);
    --topbar-border:      rgba(216, 220, 226, .75);

    --scroll-thumb:       #c4cad3;
    --scroll-thumb-hover: #a9b1bd;
    --mask-ink:           rgba(27, 32, 39, .85);
    --shadow-rgb:         20, 28, 40;

    --chart-ink:      #1f5aa6;
    --chart-ink-soft: #4f93d8;
    --chart-grid:     #e8ebef;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .06);
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg:        #14161b;
    --surface:   #1c1f27;
    --surface-2: #232733;

    --border:        #2f3542;
    --border-soft:   #262b36;
    --border-strong: #414a5c;

    --text:    #e7eaf0;
    --text-2:  #b6bdca;
    --muted:   #868f9f;

    --accent:        #5b9bd5;
    --accent-dark:   #7db4e4;
    --accent-soft:   #1b2b3c;
    --accent-border: #2f4d6d;
    --accent-2:      #4f93d8;
    --accent-3:      #6fb0e8;
    --accent-rgb:    91, 155, 213;
    --on-accent:     #10141a;

    --ok:            #4cb98a;
    --ok-bg:         #16281f;
    --ok-border:     #2c5a44;
    --ok-ink:        #8fd9b6;
    --warn:          #d9a343;
    --warn-bg:       #2a2114;
    --warn-border:   #5a4820;
    --danger:        #e0757a;
    --danger-bg:     #2c1a1c;
    --danger-border: #5c3034;
    --danger-ink:    #f0a9ac;
    --danger-hover:  #ec9296;
    --on-danger:     #1a0f10;

    --topbar-bg:          rgba(28, 31, 39, .76);
    --topbar-bg-scrolled: rgba(28, 31, 39, .92);
    --topbar-bg-solid:    rgba(28, 31, 39, .98);
    --topbar-border:      rgba(60, 68, 84, .8);

    --scroll-thumb:       #3b4353;
    --scroll-thumb-hover: #4d576b;
    --mask-ink:           rgba(231, 234, 240, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #3987e5;
    --chart-ink-soft: #d95926;
    --chart-grid:     #2a3040;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .35);
}

[data-theme="contrast"] {
    color-scheme: light;

    --bg:        #ffffff;
    --surface:   #ffffff;
    --surface-2: #f2f2f2;

    --border:        #4a4a4a;
    --border-soft:   #9a9a9a;
    --border-strong: #000000;

    --text:    #000000;
    --text-2:  #1a1a1a;
    --muted:   #3d3d3d;

    --accent:        #0a4488;
    --accent-dark:   #06305f;
    --accent-soft:   #dbe7f5;
    --accent-border: #0a4488;
    --accent-2:      #0a4488;
    --accent-3:      #2f6db5;
    --accent-rgb:    10, 68, 136;
    --on-accent:     #ffffff;

    --ok:            #0c5c33;
    --ok-bg:         #ddf0e5;
    --ok-border:     #0c5c33;
    --ok-ink:        #073f22;
    --warn:          #6b4500;
    --warn-bg:       #faeccb;
    --warn-border:   #6b4500;
    --danger:        #8c0d0d;
    --danger-bg:     #f9dede;
    --danger-border: #8c0d0d;
    --danger-ink:    #5e0808;
    --danger-hover:  #6d0a0a;
    --on-danger:     #ffffff;

    --topbar-bg:          rgba(255, 255, 255, .98);
    --topbar-bg-scrolled: #ffffff;
    --topbar-bg-solid:    #ffffff;
    --topbar-border:      #4a4a4a;

    --scroll-thumb:       #6a6a6a;
    --scroll-thumb-hover: #3d3d3d;
    --mask-ink:           rgba(0, 0, 0, .9);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #2a78d6;
    --chart-ink-soft: #eb6834;
    --chart-grid:     #9a9a9a;
    --chart-label:    #ffffff;

    --radius: 3px;
    --shadow: 0 0 0 1px rgba(var(--shadow-rgb), .18);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 1.25rem; }
h2 { font-size: .95rem; font-weight: 600; margin: 0 0 .85rem; }

code { font-family: "Cascadia Mono", ui-monospace, Consolas, "SF Mono", monospace; font-size: .88em; }

.muted  { color: var(--muted); }
.small  { font-size: .82rem; }
.block  { display: block; }
.hidden { display: none !important; }
.grow   { flex: 1 1 260px; }

[data-theme="sepia"] {
    color-scheme: light;

    --bg:        #f2e9dc;
    --surface:   #fbf6ee;
    --surface-2: #f3ebdf;

    --border:        #d9c9b2;
    --border-soft:   #e8ddcb;
    --border-strong: #bda88b;

    --text:    #38302a;
    --text-2:  #57493c;
    --muted:   #837260;

    --accent:        #8a5320;
    --accent-dark:   #6d4019;
    --accent-soft:   #f2e2cf;
    --accent-border: #d7b68d;
    --accent-2:      #a3652c;
    --accent-3:      #c08a52;
    --accent-rgb:    138, 83, 32;
    --on-accent:     #fff9f1;

    --ok:            #3d6b3f;
    --ok-bg:         #e6efe2;
    --ok-border:     #b6ceb0;
    --ok-ink:        #2b4d2d;
    --warn:          #8a5a10;
    --warn-bg:       #f8ecd2;
    --warn-border:   #dcc08a;
    --danger:        #9c3327;
    --danger-bg:     #f7e3de;
    --danger-border: #dcb3aa;
    --danger-ink:    #6f2118;
    --danger-hover:  #84291f;
    --on-danger:     #fff7f4;

    --topbar-bg:          rgba(251, 246, 238, .80);
    --topbar-bg-scrolled: rgba(251, 246, 238, .92);
    --topbar-bg-solid:    rgba(251, 246, 238, .98);
    --topbar-border:      rgba(217, 201, 178, .8);

    --scroll-thumb:       #cbb89c;
    --scroll-thumb-hover: #b39c7c;
    --mask-ink:           rgba(56, 48, 42, .85);
    --shadow-rgb:         92, 72, 46;

    --chart-ink:      #2a78d6;
    --chart-ink-soft: #eb6834;
    --chart-grid:     #e3d6c1;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .10);
}

[data-theme="midnight"] {
    color-scheme: dark;

    --bg:        #000000;
    --surface:   #0c0f14;
    --surface-2: #141922;

    --border:        #222b38;
    --border-soft:   #181f29;
    --border-strong: #323d50;

    --text:    #e9edf4;
    --text-2:  #b3bcca;
    --muted:   #7e8797;

    --accent:        #62b0f5;
    --accent-dark:   #86c4fa;
    --accent-soft:   #0e1b28;
    --accent-border: #274155;
    --accent-2:      #4d9ff0;
    --accent-3:      #86c4fa;
    --accent-rgb:    98, 176, 245;
    --on-accent:     #04070c;

    --ok:            #45c08c;
    --ok-bg:         #0b1f17;
    --ok-border:     #1f4c39;
    --ok-ink:        #8fe0bb;
    --warn:          #e0a83f;
    --warn-bg:       #211a0e;
    --warn-border:   #4f3f1a;
    --danger:        #ef7b81;
    --danger-bg:     #241214;
    --danger-border: #5a2a2e;
    --danger-ink:    #f7abaf;
    --danger-hover:  #f59aa0;
    --on-danger:     #140b0c;

    --topbar-bg:          rgba(12, 15, 20, .80);
    --topbar-bg-scrolled: rgba(12, 15, 20, .94);
    --topbar-bg-solid:    rgba(12, 15, 20, .99);
    --topbar-border:      rgba(45, 56, 72, .85);

    --scroll-thumb:       #2b3543;
    --scroll-thumb-hover: #3c4859;
    --mask-ink:           rgba(233, 237, 244, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #3987e5;
    --chart-ink-soft: #d95926;
    --chart-grid:     #1b222e;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .5);
}

[data-theme="violet"] {
    color-scheme: dark;

    --bg:        #15121c;
    --surface:   #1d1928;
    --surface-2: #262034;

    --border:        #352d48;
    --border-soft:   #29223a;
    --border-strong: #4a3f62;

    --text:    #ece8f6;
    --text-2:  #bdb4d3;
    --muted:   #8c83a4;

    --accent:        #a78bfa;
    --accent-dark:   #c0aafc;
    --accent-soft:   #241c38;
    --accent-border: #4a3a72;
    --accent-2:      #9b7bf0;
    --accent-3:      #c0aafc;
    --accent-rgb:    167, 139, 250;
    --on-accent:     #17102a;

    --ok:            #4cc08d;
    --ok-bg:         #122720;
    --ok-border:     #28563f;
    --ok-ink:        #92e2ba;
    --warn:          #dfa64a;
    --warn-bg:       #241d12;
    --warn-border:   #53431f;
    --danger:        #ef7d90;
    --danger-bg:     #2a1620;
    --danger-border: #5c2e3d;
    --danger-ink:    #f7abb8;
    --danger-hover:  #f59aa9;
    --on-danger:     #180d12;

    --topbar-bg:          rgba(29, 25, 40, .80);
    --topbar-bg-scrolled: rgba(29, 25, 40, .94);
    --topbar-bg-solid:    rgba(29, 25, 40, .99);
    --topbar-border:      rgba(62, 52, 84, .85);

    --scroll-thumb:       #3a3150;
    --scroll-thumb-hover: #4d4268;
    --mask-ink:           rgba(236, 232, 246, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #9b7bf0;
    --chart-ink-soft: #d95926;
    --chart-grid:     #2d2640;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .45);
}

[data-theme="moss"] {
    color-scheme: light;

    --bg:        #eaefe8;
    --surface:   #f7faf5;
    --surface-2: #eff4ed;

    --border:        #d2ddcc;
    --border-soft:   #e3ebdf;
    --border-strong: #b1c2aa;

    --text:    #1d271f;
    --text-2:  #3b4a3e;
    --muted:   #69786c;

    --accent:        #4a6b1f;
    --accent-dark:   #3a5516;
    --accent-soft:   #eaf0dd;
    --accent-border: #c3d3a4;
    --accent-2:      #5d842a;
    --accent-3:      #7da348;
    --accent-rgb:    74, 107, 31;
    --on-accent:     #ffffff;

    --ok:            #1d7a4d;
    --ok-bg:         #e4f2ea;
    --ok-border:     #aed4c0;
    --ok-ink:        #14593a;
    --warn:          #8a6100;
    --warn-bg:       #f7f0d9;
    --warn-border:   #ddcb9c;
    --danger:        #a32b2b;
    --danger-bg:     #f9eae9;
    --danger-border: #e3bab8;
    --danger-ink:    #7d2020;
    --danger-hover:  #8a2424;
    --on-danger:     #ffffff;

    --topbar-bg:          rgba(247, 250, 245, .78);
    --topbar-bg-scrolled: rgba(247, 250, 245, .90);
    --topbar-bg-solid:    rgba(247, 250, 245, .98);
    --topbar-border:      rgba(210, 221, 204, .8);

    --scroll-thumb:       #c0cdb8;
    --scroll-thumb-hover: #a5b59c;
    --mask-ink:           rgba(29, 39, 31, .85);
    --shadow-rgb:         30, 45, 26;

    --chart-ink:      #2f7d32;
    --chart-ink-soft: #a8338f;
    --chart-grid:     #e3eade;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .07);
}

[data-theme="blush"] {
    color-scheme: light;

    --bg:        #f7edf1;
    --surface:   #fdf8fa;
    --surface-2: #f8eff3;

    --border:        #e6ced7;
    --border-soft:   #f1e0e7;
    --border-strong: #d0a8b8;

    --text:    #2b2026;
    --text-2:  #4d3c44;
    --muted:   #7c6b73;

    --accent:        #9b2f6a;
    --accent-dark:   #7d2353;
    --accent-soft:   #fae4ef;
    --accent-border: #e7b9d1;
    --accent-2:      #b8437f;
    --accent-3:      #cf6b9c;
    --accent-rgb:    155, 47, 106;
    --on-accent:     #ffffff;

    --ok:            #1d7a4d;
    --ok-bg:         #e6f2ec;
    --ok-border:     #b2d7c3;
    --ok-ink:        #14593a;
    --warn:          #8a5c00;
    --warn-bg:       #f9efd9;
    --warn-border:   #dfc99c;
    --danger:        #b3261e;
    --danger-bg:     #fbe9e6;
    --danger-border: #ecb9b3;
    --danger-ink:    #8a1d14;
    --danger-hover:  #99201a;
    --on-danger:     #ffffff;

    --topbar-bg:          rgba(253, 248, 250, .78);
    --topbar-bg-scrolled: rgba(253, 248, 250, .90);
    --topbar-bg-solid:    rgba(253, 248, 250, .98);
    --topbar-border:      rgba(230, 206, 215, .8);

    --scroll-thumb:       #d5b9c4;
    --scroll-thumb-hover: #bf9ca9;
    --mask-ink:           rgba(43, 32, 38, .85);
    --shadow-rgb:         74, 40, 56;

    --chart-ink:      #a8338f;
    --chart-ink-soft: #c26a12;
    --chart-grid:     #f1e1e8;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .07);
}

[data-theme="dim"] {
    color-scheme: dark;

    --bg:        #2f3641;
    --surface:   #3a424f;
    --surface-2: #454e5d;

    --border:        #525c6d;
    --border-soft:   #47505f;
    --border-strong: #6d7889;

    --text:    #f1f3f7;
    --text-2:  #cdd4de;
    --muted:   #adb6c3;

    --accent:        #ec8563;
    --accent-dark:   #f4a186;
    --accent-soft:   #4a3a36;
    --accent-border: #6e4d41;
    --accent-2:      #e0693f;
    --accent-3:      #f4a186;
    --accent-rgb:    236, 133, 99;
    --on-accent:     #2a1109;

    --ok:            #4cb98a;
    --ok-bg:         #2b4238;
    --ok-border:     #3f6b57;
    --ok-ink:        #9fe0c0;
    --warn:          #e0ab4c;
    --warn-bg:       #45392a;
    --warn-border:   #6b5836;
    --danger:        #ef8a90;
    --danger-bg:     #4a3034;
    --danger-border: #70454b;
    --danger-ink:    #f8b6bb;
    --danger-hover:  #f59aa0;
    --on-danger:     #23090c;

    --topbar-bg:          rgba(58, 66, 79, .80);
    --topbar-bg-scrolled: rgba(58, 66, 79, .94);
    --topbar-bg-solid:    rgba(58, 66, 79, .99);
    --topbar-border:      rgba(90, 101, 119, .85);

    --scroll-thumb:       #59647a;
    --scroll-thumb-hover: #6c7890;
    --mask-ink:           rgba(241, 243, 247, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #e0693f;
    --chart-ink-soft: #2fa39b;
    --chart-grid:     #4d5768;
    --chart-label:    #24100a;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .30);
}

[data-theme="harbour"] {
    color-scheme: dark;

    --bg:        #0a1020;
    --surface:   #111a2e;
    --surface-2: #18243c;

    --border:        #26334d;
    --border-soft:   #1c2740;
    --border-strong: #3b4c6c;

    --text:    #e9eef7;
    --text-2:  #b6c2d6;
    --muted:   #8695ad;

    --accent:        #e8c46a;
    --accent-dark:   #f2d68f;
    --accent-soft:   #2a2617;
    --accent-border: #59491f;
    --accent-2:      #d9b355;
    --accent-3:      #f2d68f;
    --accent-rgb:    232, 196, 106;
    --on-accent:     #17130a;

    --ok:            #4cbf8e;
    --ok-bg:         #123026;
    --ok-border:     #275943;
    --ok-ink:        #8fdcb8;
    --warn:          #e0872e;
    --warn-bg:       #33230f;
    --warn-border:   #66471c;
    --danger:        #ef7d86;
    --danger-bg:     #2e161b;
    --danger-border: #5e2f37;
    --danger-ink:    #f7aab0;
    --danger-hover:  #f59a9f;
    --on-danger:     #170a0c;

    --topbar-bg:          rgba(17, 26, 46, .80);
    --topbar-bg-scrolled: rgba(17, 26, 46, .94);
    --topbar-bg-solid:    rgba(17, 26, 46, .99);
    --topbar-border:      rgba(46, 61, 90, .85);

    --scroll-thumb:       #2c3a56;
    --scroll-thumb-hover: #3d4e70;
    --mask-ink:           rgba(233, 238, 247, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #bf8528;
    --chart-ink-soft: #4390e0;
    --chart-grid:     #1e2a45;
    --chart-label:    #140d02;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .45);
}

[data-theme="coral-light"] {
    color-scheme: light;

    --bg:        #f3f4f6;
    --surface:   #ffffff;
    --surface-2: #f6f7f9;

    --border:        #d9dde4;
    --border-soft:   #e9ecf0;
    --border-strong: #bcc3ce;

    --text:    #222831;
    --text-2:  #444d5a;
    --muted:   #6c7685;

    --accent:        #b9472a;
    --accent-dark:   #973820;
    --accent-soft:   #fbebe5;
    --accent-border: #efc2b2;
    --accent-2:      #d9643c;
    --accent-3:      #ec8563;
    --accent-rgb:    185, 71, 42;
    --on-accent:     #ffffff;

    --ok:            #23784f;
    --ok-bg:         #e6f3ec;
    --ok-border:     #b3d8c4;
    --ok-ink:        #18583a;
    --warn:          #8a6100;
    --warn-bg:       #fbf2df;
    --warn-border:   #e3cea0;
    --danger:        #a32b38;
    --danger-bg:     #fbeced;
    --danger-border: #e6bcc1;
    --danger-ink:    #7d2029;
    --danger-hover:  #8a2430;
    --on-danger:     #ffffff;

    --topbar-bg:          rgba(255, 255, 255, .78);
    --topbar-bg-scrolled: rgba(255, 255, 255, .90);
    --topbar-bg-solid:    rgba(255, 255, 255, .97);
    --topbar-border:      rgba(217, 221, 228, .8);

    --scroll-thumb:       #c6ccd5;
    --scroll-thumb-hover: #aab2be;
    --mask-ink:           rgba(34, 40, 49, .85);
    --shadow-rgb:         28, 32, 40;

    --chart-ink:      #d9643c;
    --chart-ink-soft: #2a8f88;
    --chart-grid:     #e9ecf0;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .07);
}

[data-theme="harbour-light"] {
    color-scheme: light;

    --bg:        #f4f1e9;
    --surface:   #fffdf8;
    --surface-2: #f8f4eb;

    --border:        #ddd5c3;
    --border-soft:   #ebe5d7;
    --border-strong: #c2b69c;

    --text:    #142036;
    --text-2:  #34425c;
    --muted:   #66708a;

    --accent:        #855f0e;
    --accent-dark:   #6a4b0a;
    --accent-soft:   #f6ecd2;
    --accent-border: #dfc88e;
    --accent-2:      #a87c1c;
    --accent-3:      #c99a35;
    --accent-rgb:    133, 95, 14;
    --on-accent:     #fffaf0;

    --ok:            #23704d;
    --ok-bg:         #e5f0e8;
    --ok-border:     #b2d0bd;
    --ok-ink:        #185237;
    --warn:          #94530f;
    --warn-bg:       #f9ead6;
    --warn-border:   #e3c59b;
    --danger:        #a3313c;
    --danger-bg:     #f8e5e6;
    --danger-border: #e2b6ba;
    --danger-ink:    #74212a;
    --danger-hover:  #8a2832;
    --on-danger:     #fffaf8;

    --topbar-bg:          rgba(255, 253, 248, .80);
    --topbar-bg-scrolled: rgba(255, 253, 248, .92);
    --topbar-bg-solid:    rgba(255, 253, 248, .98);
    --topbar-border:      rgba(221, 213, 195, .85);

    --scroll-thumb:       #cfc4ab;
    --scroll-thumb-hover: #b6a988;
    --mask-ink:           rgba(20, 32, 54, .85);
    --shadow-rgb:         40, 44, 60;

    --chart-ink:      #1f4f8f;
    --chart-ink-soft: #c99a35;
    --chart-grid:     #e7e0d0;
    --chart-label:    #ffffff;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .08);
}

[data-theme="ember"] {
    color-scheme: dark;

    --bg:        #130f0c;
    --surface:   #1c1613;
    --surface-2: #251e19;

    --border:        #3a2e27;
    --border-soft:   #2c2320;
    --border-strong: #57453b;

    --text:    #f2e9e2;
    --text-2:  #cdbab0;
    --muted:   #9d8b7f;

    --accent:        #e0793f;
    --accent-dark:   #ea9465;
    --accent-soft:   #2f1d12;
    --accent-border: #5e3720;
    --accent-2:      #d16a32;
    --accent-3:      #ea9465;
    --accent-rgb:    224, 121, 63;
    --on-accent:     #1a0b04;

    --ok:            #4cbf8e;
    --ok-bg:         #13291f;
    --ok-border:     #27563f;
    --ok-ink:        #8fdcb8;
    --warn:          #d9b13a;
    --warn-bg:       #2b2311;
    --warn-border:   #574716;
    --danger:        #ef7d86;
    --danger-bg:     #2d1618;
    --danger-border: #5c2e32;
    --danger-ink:    #f7aab0;
    --danger-hover:  #f59a9f;
    --on-danger:     #170a0b;

    --topbar-bg:          rgba(28, 22, 19, .80);
    --topbar-bg-scrolled: rgba(28, 22, 19, .94);
    --topbar-bg-solid:    rgba(28, 22, 19, .99);
    --topbar-border:      rgba(63, 50, 42, .85);

    --scroll-thumb:       #3b2f28;
    --scroll-thumb-hover: #52423a;
    --mask-ink:           rgba(242, 233, 226, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #d96c33;
    --chart-ink-soft: #4394cf;
    --chart-grid:     #2b211c;
    --chart-label:    #1d0c04;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .45);
}

[data-theme="kelp"] {
    color-scheme: dark;

    --bg:        #071518;
    --surface:   #0d1e20;
    --surface-2: #142a2c;

    --border:        #1f3b3d;
    --border-soft:   #172e30;
    --border-strong: #30575a;

    --text:    #e3f0ee;
    --text-2:  #adc4c2;
    --muted:   #7e9794;

    --accent:        #3fcbd6;
    --accent-dark:   #6fdde5;
    --accent-soft:   #0d2b30;
    --accent-border: #23555c;
    --accent-2:      #2fb8c4;
    --accent-3:      #6fdde5;
    --accent-rgb:    63, 203, 214;
    --on-accent:     #04191c;

    --ok:            #5fbe6a;
    --ok-bg:         #16291a;
    --ok-border:     #2f5a35;
    --ok-ink:        #9ddfa4;
    --warn:          #dda63f;
    --warn-bg:       #2a2312;
    --warn-border:   #574719;
    --danger:        #ef7d86;
    --danger-bg:     #2c171a;
    --danger-border: #5a2f34;
    --danger-ink:    #f7aab0;
    --danger-hover:  #f59a9f;
    --on-danger:     #160a0c;

    --topbar-bg:          rgba(13, 30, 32, .80);
    --topbar-bg-scrolled: rgba(13, 30, 32, .94);
    --topbar-bg-solid:    rgba(13, 30, 32, .99);
    --topbar-border:      rgba(38, 66, 69, .85);

    --scroll-thumb:       #23464a;
    --scroll-thumb-hover: #326065;
    --mask-ink:           rgba(227, 240, 238, .85);
    --shadow-rgb:         0, 0, 0;

    --chart-ink:      #22a096;
    --chart-ink-soft: #dd6a3f;
    --chart-grid:     #163133;
    --chart-label:    #04201f;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(var(--shadow-rgb), .45);
}

.topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 1.75rem; height: 58px;

    background: var(--topbar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--topbar-border);
    transition: box-shadow .2s, background .2s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar { background: var(--topbar-bg-solid); }
}

.topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent-2) 28%, var(--accent-3) 46%, transparent 78%);
}

.topbar.scrolled {
    box-shadow: 0 4px 18px rgba(var(--shadow-rgb), .10);
    background: var(--topbar-bg-scrolled);
}

body.has-topbar { padding-top: 58px; }

.brand {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1rem; color: var(--text);
    letter-spacing: -.015em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-word { font-weight: 500; }
.brand-word b { font-weight: 700; color: var(--accent); }

.brand-mark { display: block; color: var(--accent); overflow: visible; }

.brand-mark .so-minute {
    transform-origin: 56px 60px;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.brand:hover .brand-mark .so-minute { transform: rotate(48deg); }

.login-mark {
    display: block; margin: 0 auto 1rem; color: var(--accent); overflow: visible;
}
.login-mark .so-minute {
    transform-origin: 56px 60px;
    animation: so-tick 9s steps(1) infinite;
}
@keyframes so-tick {
    0%, 32%  { transform: rotate(0deg); }
    33%, 65% { transform: rotate(120deg); }
    66%, 99% { transform: rotate(240deg); }
}
@media (prefers-reduced-motion: reduce) {
    .login-mark .so-minute { animation: none; }
    .brand-mark .so-minute { transition: none; }
}

.mainnav { display: flex; gap: .15rem; flex: 1; align-items: center; min-width: 0; }

.mainnav a,
.navtop {
    position: relative;
    display: flex; align-items: center; padding: .4rem .8rem;
    color: var(--text-2); font: inherit; font-size: .875rem; font-weight: 500;
    background: none; border: 0; border-radius: 6px;
    white-space: nowrap; cursor: pointer;
    transition: color .14s, background .14s;
}
.mainnav a:hover,
.navtop:hover { color: var(--accent); text-decoration: none; background: rgba(var(--accent-rgb), .07); }

.mainnav > a.active,
.navgroup.active > .navtop { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.navtop::after {
    content: ''; margin-left: .4rem;
    border: 4px solid transparent; border-top-color: currentColor;
    transform: translateY(2px); opacity: .6;
}
.navgroup[data-open] > .navtop::after { transform: translateY(-2px) rotate(180deg); }

.navgroup { position: relative; }

.navmenu {
    display: none; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50;
    min-width: 200px; padding: .35rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .16);
}
.navgroup[data-open] > .navmenu { display: block; }

.navmenu a {
    display: block; padding: .42rem .65rem; border-radius: 4px;
    font-weight: 500; color: var(--text-2);
}
.navmenu a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.navmenu-grouped { left: auto; right: 0; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: .3rem .6rem; padding: .6rem; }
.navgroup[data-open] > .navmenu-grouped { display: grid; }
.navmenu-group { display: flex; flex-direction: column; }
.navmenu-heading { padding: .35rem .65rem .2rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.navtoggle {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 32px; padding: 0 7px;
    background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.navtoggle span {
    display: block; height: 2px; background: var(--text-2); border-radius: 2px;
    transition: transform .18s, opacity .18s;
}
.navtoggle[aria-expanded="true"] { border-color: var(--accent); }
.navtoggle[aria-expanded="true"] span { background: var(--accent); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.linkish {
    background: none; border: 0; color: var(--muted);
    cursor: pointer; font: inherit; font-size: .82rem; padding: .2rem 0;
}
.linkish:hover { color: var(--accent); text-decoration: underline; }

.avatar {
    --avatar-hue: 215;
    position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
    width: 32px; height: 32px; border-radius: 50%;
    background: hsl(var(--avatar-hue) 55% 46%); color: #fff;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initials { font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.avatar-md { width: 42px; height: 42px; }
.avatar-md .avatar-initials { font-size: .95rem; }
.avatar-xl { width: 96px; height: 96px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.avatar-xl .avatar-initials { font-size: 2rem; }

.usermenu { position: relative; flex-shrink: 0; margin-left: auto; }
.usermenu-button {
    position: relative; display: flex; align-items: center; gap: .6rem;
    padding: .25rem .7rem .25rem .25rem; border-radius: 999px; cursor: pointer;
    background: none; border: 1px solid transparent; font: inherit; color: var(--text-2);
    transition: background .15s, border-color .15s;
}
.usermenu-button:hover, .usermenu-button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.usermenu-name { font-size: .85rem; font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-button::after {
    content: ''; border: 4px solid transparent; border-top-color: currentColor;
    transform: translateY(2px); opacity: .55; transition: transform .15s;
}
.usermenu-button[aria-expanded="true"]::after { transform: translateY(-2px) rotate(180deg); }

.keys-badge {
    position: absolute; left: 22px; bottom: 0; z-index: 1;
    display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
    background: var(--surface); color: var(--muted); box-shadow: 0 0 0 1.5px var(--border-strong);
}
.keys-badge svg { width: 11px; height: 11px; }
.keys-badge .eye-open { display: none; }
.usermenu.keys-on .keys-badge { background: var(--danger); color: var(--on-danger); box-shadow: 0 0 0 2px var(--surface); animation: keys-pulse 2s ease-in-out infinite; }
.usermenu.keys-on .keys-badge .eye-open { display: block; }
.usermenu.keys-on .keys-badge .eye-closed { display: none; }
@keyframes keys-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, var(--danger) 30%, transparent); } }

.usermenu-panel {
    position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60;
    width: 290px; padding: .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(var(--shadow-rgb), .2);
    animation: drop-in .16s var(--ease-out);
}
.usermenu-panel[hidden] { display: none; }
.usermenu-head {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .7rem;
    margin-bottom: .3rem; border-bottom: 1px solid var(--border-soft);
}
.usermenu-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.usermenu-head strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-head small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usermenu-row {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .55rem .6rem; border-radius: 8px; border: 0; background: none;
    font: inherit; font-size: .875rem; color: var(--text-2); text-align: left; cursor: pointer;
}
a.usermenu-row:hover, button.usermenu-row:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.usermenu-icon { display: grid; place-items: center; width: 22px; color: var(--muted); }
.usermenu-icon svg { width: 18px; height: 18px; }
.usermenu-logout { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--border-soft); }
.usermenu-mode { cursor: default; }

.usermenu .reveal-toggle .txt { flex: 1; }
.usermenu .reveal-toggle .switch-track {
    position: relative; width: 34px; height: 20px; border-radius: 999px; flex: none; background: var(--border-strong); transition: background .18s;
}
.usermenu .reveal-toggle .switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease-out);
}
.usermenu .reveal-toggle.on { color: var(--danger); }
.usermenu .reveal-toggle.on .usermenu-icon { color: var(--danger); }
.usermenu .reveal-toggle.on .switch-track { background: var(--danger); }
.usermenu .reveal-toggle.on .switch-thumb { transform: translateX(14px); }

.segmented {
    display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.segmented .segment { margin: 0; }
.segmented .segment input { position: absolute; opacity: 0; pointer-events: none; }
.segmented .segment span,
.segmented > button,
.segmented > a {
    display: block; padding: .38rem .9rem; border-radius: 6px; border: 0; background: none;
    font: inherit; font-size: .85rem; font-weight: 500; color: var(--text-2); cursor: pointer;
    text-transform: none; letter-spacing: 0; margin: 0;
    transition: background .15s, color .15s, box-shadow .15s;
}
.segmented .segment input:checked + span,
.segmented > button[aria-checked="true"],
.segmented > a[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .15); font-weight: 600; }
.segmented .segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented.small { flex: 1; }
.segmented.small > button { flex: 1; padding: .3rem .4rem; font-size: .8rem; }
.segmented > a { text-decoration: none; }
nav.segmented.small { flex: 0 0 auto; }
nav.segmented.small > a { padding: .3rem .75rem; font-size: .8rem; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.section-head-row h2 { margin: 0; }
.bot-messages { margin: .2rem 0 .8rem; }
.bot-messages > summary { cursor: pointer; font-size: .85rem; color: var(--text-2); margin-bottom: .6rem; }
.bot-messages label { margin-bottom: .7rem; }

.drawer-head, .nav-backdrop { display: none; }

@media (max-width: 900px) {
    .topbar { gap: .6rem; padding: 0 .75rem; }
    .navtoggle { display: flex; order: -1; }
    .usermenu-name, .usermenu-button::after { display: none; }
    .usermenu-button { padding: .2rem; }
    .usermenu-panel { position: fixed; top: 64px; right: .6rem; left: auto; width: min(320px, calc(100vw - 1.2rem)); }

    .mainnav {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
        width: min(310px, 86vw); padding: 0 .75rem 1.5rem;
        display: flex; flex-direction: column; align-items: stretch; gap: .15rem;
        overflow-y: auto; overscroll-behavior: contain;
        background: var(--surface); border-right: 1px solid var(--border);
        box-shadow: 12px 0 40px rgba(var(--shadow-rgb), .22);
        transform: translateX(-105%); visibility: hidden;
        transition: transform .26s var(--ease-out), visibility 0s linear .26s;
    }
    body.nav-open .mainnav { transform: none; visibility: visible; transition: transform .26s var(--ease-out); }
    body.nav-open { overflow: hidden; }
    body.nav-open .topbar {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: var(--topbar-bg-solid);
    }

    .drawer-head {
        position: sticky; top: 0; z-index: 1;
        display: flex; align-items: center; justify-content: space-between;
        height: 58px; margin: 0 -.75rem .5rem; padding: 0 .75rem 0 1rem;
        background: var(--surface); border-bottom: 1px solid var(--border-soft);
    }
    .drawer-close {
        display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
        border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer;
    }
    .drawer-close:hover { background: var(--surface-2); color: var(--text); }
    .drawer-head .brand-word { display: inline; }

    .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 35;
        background: rgba(var(--shadow-rgb), .45);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        animation: fade-in .2s ease-out;
    }
    .nav-backdrop[hidden] { display: none; }

    .mainnav > a {
        padding: .7rem .75rem; border-radius: 8px; font-size: .95rem;
    }
    .navgroup { position: static; margin-top: .6rem; }
    .navtop {
        width: 100%; padding: .35rem .75rem; cursor: default; pointer-events: none;
        font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
        background: none;
    }
    .navtop::after { display: none; }
    .navgroup.active > .navtop { background: none; color: var(--accent); }
    .navmenu {
        display: block; position: static; min-width: 0; padding: 0; margin: 0;
        background: none; border: 0; box-shadow: none; animation: none;
    }
    .navmenu a { padding: .65rem .75rem; border-radius: 8px; font-size: .95rem; }
    .navmenu-grouped, .navgroup[data-open] > .navmenu-grouped { display: block; padding: 0; }
    .navmenu-heading { padding: .7rem .75rem .25rem; }
    .navmenu a.active, .mainnav > a.active { background: var(--accent-soft); color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
    .mainnav { transition: none !important; }
    .usermenu.keys-on .keys-badge { animation: none; }
}

main { max-width: 1240px; margin: 0 auto; padding: 1.75rem; }
main.centered { display: grid; place-items: center; min-height: 100vh; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}

.card.narrow { width: min(370px, 92vw); padding: 1.75rem; }
.card.link { display: block; color: inherit; transition: border-color .12s, box-shadow .12s; }
.card.link:hover {
    border-color: var(--accent); text-decoration: none;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .10);
}
.card .big { font-size: 1.6rem; font-weight: 600; margin: .35rem 0 .2rem; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); }
.cards > * { min-width: 0; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem 1rem;
    margin: -.25rem 0 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-soft);
}
.card-head h2 { margin: 0; }
.card-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

.tiles { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); margin-bottom: 1.25rem; }
.tiles > * { min-width: 0; }
.tile {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius); padding: .7rem .9rem; color: inherit;
    box-shadow: var(--shadow);
}
.tile:hover { border-left-color: var(--accent); text-decoration: none; }
.tile.active { border-left-color: var(--accent); background: var(--accent-soft); }
.tile-value { display: block; font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.tile-label {
    display: block; font-size: .7rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: .1rem;
}
.tile.total { border-left-style: dotted; }
.tile-value.warn   { color: var(--warn); }
.tile-value.danger { color: var(--danger); }

label { display: block; margin-bottom: .9rem; }
label > span {
    display: block; font-size: .74rem; color: var(--text-2);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: .3rem;
}
label > span small { text-transform: none; letter-spacing: 0; font-weight: 400; }
label > small { display: block; margin-top: .25rem; font-size: .76rem; }
label.inline { display: flex; align-items: center; gap: .5rem; }
label.inline > span { margin: 0; text-transform: none; letter-spacing: 0; font-size: .875rem; color: var(--text); }

input, select, textarea {
    width: 100%; padding: .45rem .6rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }

.grid { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.grid > label { flex: 1 1 190px; }

.filters { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.filters > label { flex: 1 1 150px; min-width: 0; }
.filters[data-filters] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; align-items: start; }
.filters[data-filters] > .filter-search { grid-column: span 2; }
.filters[data-filters] > .filter-actions { align-self: end; }
@media (max-width: 600px) {
    .filters[data-filters] { grid-template-columns: 1fr 1fr; }
    .filters[data-filters] > .filter-search { grid-column: 1 / -1; }
}
.filter-actions { display: flex; gap: .5rem; margin-bottom: .9rem; padding-top: 1.05rem; }
.filters.auto .filter-actions { padding-top: 0; }
.filters.auto .filter-submit { display: none; }
.filters.auto .filter-actions:not(:has(.filter-clear)) { display: none; }
.filters .filter-clear { display: inline-flex; align-items: center; gap: .35rem; height: 38px; }
.filter-search-box { position: relative; display: block; }
.filter-search-box > .icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color .15s; }
.filter-search-box > input { height: 38px; padding-left: 2.2rem; border-radius: 10px; }
.filter-search-box:focus-within > .icon { color: var(--accent); }
.filters .ts-wrapper .ts-control { min-height: 38px; border-radius: 10px; align-items: center; }
.filters .ts-wrapper { --ts-pr-caret: 1.9rem; }
.filters .ts-wrapper.multi .ts-control { padding: .3rem .45rem; gap: .25rem; }
.filters .ts-wrapper .ts-control::after {
    content: ''; position: absolute; right: .8rem; top: 50%; margin-top: -2px;
    border: 5px solid transparent; border-top-color: var(--muted); border-bottom: 0;
}
.filters .ts-wrapper.dropdown-active .ts-control::after { border-top: 0; border-bottom: 5px solid var(--muted); }
.filters .ts-wrapper.multi .ts-control > .item {
    display: inline-flex; align-items: center; margin: 0; padding: .1rem .15rem .1rem .55rem; overflow: visible; white-space: nowrap; max-width: 100%;
    border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-soft); color: var(--text);
    font-size: .78rem; font-weight: 600; line-height: 1.35;
}
.filters .ts-wrapper.multi .ts-control > .item .remove {
    margin-left: .2rem; padding: 0 .35rem; border: 0; border-radius: 999px; color: var(--muted); font-size: .95rem; line-height: 1.2;
}
.filters .ts-wrapper.multi .ts-control > .item .remove:hover { background: rgba(var(--accent-rgb), .18); color: var(--text); }
.filters .ts-wrapper.multi .ts-control > input { min-width: 4rem; }
.filters .ts-wrapper.multi.has-items .ts-control > input { min-width: 1rem; }
.ts-dropdown .option:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .55rem; }
.ts-dropdown .option > input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.ts-dropdown.multi .option.selected { background: none; }
.ts-dropdown.multi .option.selected.active,
.ts-dropdown.multi .option.active { background: var(--accent-soft); }

.subform { border-top: 1px solid var(--border-soft); padding-top: 1.1rem; margin-top: .25rem; }
.inline-actions { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }

fieldset.inset {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin: 0 0 1.1rem; background: var(--surface-2);
}
fieldset.inset legend {
    padding: 0 .45rem; font-size: .72rem; color: var(--text-2);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

.btn {
    display: inline-block; padding: .45rem .95rem;
    background: var(--surface); color: var(--text-2);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font: inherit; font-size: .85rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn.ghost { background: none; }
.btn.small { padding: .2rem .55rem; font-size: .78rem; }
.btn.wide { width: 100%; text-align: center; padding: .55rem; }
.btn[disabled] { opacity: .5; cursor: default; }

table { width: 100%; border-collapse: collapse; font-size: .855rem; }
th, td { text-align: left; padding: .55rem .65rem; vertical-align: top; }
th {
    color: var(--muted); font-weight: 600; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { border-bottom: 1px solid var(--border-soft); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

.keys .keycell { white-space: nowrap; }

.status-select { width: auto; min-width: 132px; font-size: .8rem; padding: .2rem .4rem; }
.status-available    { border-left: 3px solid var(--ok); }
.status-for_giveaway { border-left: 3px solid var(--accent); }
.status-reserved     { border-left: 3px solid var(--warn); }
.status-used, .status-given_away { border-left: 3px solid var(--border); color: var(--muted); }
.status-expired, .status-revoked { border-left: 3px solid var(--danger); }

td.dates { white-space: nowrap; font-size: .82rem; }

.badge {
    display: inline-block; padding: .08rem .45rem; border-radius: 2px;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
    white-space: nowrap;
}
.badge.early  { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.badge.ok     { border-color: var(--ok-border); background: var(--ok-bg);     color: var(--ok); }
.badge.warn   { border-color: var(--warn-border); background: var(--warn-bg);   color: var(--warn); }
.badge.danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.badge.off    { border-color: var(--border); color: var(--muted); }

.flash {
    padding: .65rem 1rem; border-radius: var(--radius); margin-bottom: 1.1rem;
    border: 1px solid; border-left-width: 3px; font-size: .875rem;
}
.flash-success { border-color: var(--ok-border); border-left-color: var(--ok);     background: var(--ok-bg);     color: var(--ok-ink); }
.flash-error   { border-color: var(--danger-border); border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger-ink); }
.flash-warning { border-color: var(--warn-border); border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

.empty { color: var(--muted); padding: 1.75rem 0; text-align: center; font-size: .875rem; }

.results { display: grid; gap: .4rem; margin-top: .9rem; }
.result {
    display: flex; align-items: center; gap: .85rem;
    padding: .45rem .6rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
}
.result:hover { border-color: var(--border-strong); }
.result img { width: 64px; height: 36px; object-fit: cover; border-radius: 2px; background: var(--surface-2); }
.result .title { flex: 1; font-size: .875rem; }
.result .year { color: var(--muted); font-size: .8rem; }
.result.done { background: var(--ok-bg); border-color: var(--ok-border); }

.provider .card-head h2 { font-size: .95rem; }

body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(var(--shadow-rgb), .45); }

.modal-panel {
    position: relative; width: min(760px, 100%); max-height: 86vh; overflow: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .22);
}

.modal-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.25rem; background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 1rem; }

.modal-close {
    background: none; border: 0; font-size: 1.5rem; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0 .25rem;
}
.modal-close:hover { color: var(--text); }

.modal-body { padding: 1.25rem; }
.modal-body h3 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 1.5rem 0 .6rem; padding-bottom: .35rem;
    border-bottom: 1px solid var(--border-soft);
}
.modal-body h3:first-child { margin-top: 0; }

dl.detail { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: .3rem 1rem; margin: 0; }
dl.detail dt {
    color: var(--muted); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600; padding-top: .12rem;
}
dl.detail dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }

.detail-game {
    border: 1px solid var(--border-soft); border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: .75rem .9rem; margin-bottom: .6rem;
    background: var(--surface-2);
}
.detail-game strong { display: block; margin-bottom: .5rem; font-size: .9rem; }

.detail-problems {
    border: 1px solid var(--danger-border); border-left: 3px solid var(--danger);
    background: var(--danger-bg); color: var(--danger-ink);
    border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: 1.1rem;
}
.detail-problems p { margin: 0 0 .3rem; font-size: .85rem; }
.detail-problems p:last-child { margin-bottom: 0; }

td.rowactions { white-space: nowrap; text-align: left; }
.table-wrap th.col-actions,
.table-wrap td.rowactions { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.table-wrap tbody tr:hover td.rowactions { background: var(--surface-2); }
.table-wrap th.col-actions::before,
.table-wrap td.rowactions::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--wrap-pad, 0px)); width: var(--wrap-pad, 0px); background: inherit; pointer-events: none; }
.table-wrap td.rowactions::before { bottom: -1px; border-bottom: inherit; }
.table-wrap td.rowactions.menu-open { z-index: 80; }
.table-wrap th.col-actions::after,
.table-wrap td.rowactions::after { content: ''; position: absolute; top: 0; right: -10px; bottom: 0; width: 10px; pointer-events: none; opacity: 0; transition: opacity .15s; background: linear-gradient(to right, rgba(0, 0, 0, .12), transparent); }
.table-wrap.scrolled th.col-actions::after,
.table-wrap.scrolled td.rowactions::after { opacity: 1; }
.rowactions-menu { display: contents; }
.row-more { display: none; }
th .th-sort { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
th .th-sort:hover, th .th-sort:focus-visible { color: var(--text); }
th .th-sort::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: .18; transition: opacity .15s, transform .15s; }
th .th-sort:hover::after { opacity: .45; }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--accent); }
th[aria-sort="ascending"] .th-sort::after { opacity: 1; }
th[aria-sort="descending"] .th-sort::after { opacity: 1; transform: rotate(180deg); }
@media (max-width: 640px) {
    td.rowactions.has-menu .row-more { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .45rem; }
    td.rowactions.has-menu .rowactions-menu { display: none; }
    td.rowactions.menu-open .rowactions-menu { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; position: fixed; z-index: 70; min-width: 11rem; max-width: calc(100vw - 16px); padding: .35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); white-space: normal; }
    td.rowactions.menu-open .rowactions-menu .btn,
    td.rowactions.menu-open .rowactions-menu form { display: block; width: 100%; margin: 0; }
    td.rowactions.menu-open .rowactions-menu .btn { text-align: left; justify-content: flex-start; }
}
td.rowactions .btn + .btn { margin-left: .3rem; }
td.rowactions form { display: inline-block; }
td.rowactions form + form { margin-left: .3rem; }

.table-wrap > table { border-collapse: separate; border-spacing: 0 .4rem; margin-top: -.4rem; }
.table-wrap > table > thead th { border-bottom: 0; padding-bottom: .35rem; }
.table-wrap > table > tbody > tr { --row-bg: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); background: none; }
.table-wrap > table > tbody > tr:hover { --row-bg: var(--surface-2); background: none; }
.table-wrap > table > tbody > tr > td {
    padding: .8rem .65rem; vertical-align: middle; border-bottom: 0;
    background-color: var(--row-bg); transition: background-color .15s ease;
}
.table-wrap > table > tbody > tr > td:first-child { border-radius: 10px 0 0 10px; }
.table-wrap > table > tbody > tr > td.cell-last { border-radius: 0 10px 10px 0; }
.table-wrap > table > tbody > tr > td:only-child,
.table-wrap > table > tbody > tr > td:first-child.cell-last { border-radius: 10px; }
.table-wrap > table > tbody > tr > td.rowactions { background: var(--row-bg); }
.table-wrap > table > tbody > tr:hover > td.rowactions { background: var(--row-bg); }
.table-wrap td.rowactions::before { bottom: 0; border-bottom: 0; background: var(--surface); }
.table-wrap > table > tbody > tr.editrow > td { background: var(--surface-2); border-radius: 10px; }

.table-wrap > table > tbody > tr[data-row-art] > td {
    --art-w: 300px;
    --art-veil: 80%;
    background-image:
        linear-gradient(90deg, var(--row-bg), color-mix(in srgb, var(--row-bg) var(--art-veil), transparent) 28px, color-mix(in srgb, var(--row-bg) calc(var(--art-veil) + 9%), transparent) 50%, var(--row-bg)),
        var(--row-art);
    background-repeat: no-repeat;
    background-size: var(--art-w) 100%, var(--art-w) auto;
    background-position: calc(var(--art-x, 0px) - var(--cell-x, -100000px) + 3px) 0, calc(var(--art-x, 0px) - var(--cell-x, -100000px) + 3px) center;
}
.table-wrap > table > tbody > tr[data-row-art] > td:is(.rowactions, .no-art) { background-image: none; }

:is(td.rowactions, .icon-actions) .btn:has(> .btn-label) {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 32px; height: 32px; padding: 0; border-radius: 9px;
    border: 1px solid transparent; background: transparent; color: var(--text-2);
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label):hover,
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label):focus-visible { background: var(--surface); border-color: var(--border); color: var(--text); }
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label):active { transform: scale(.94); }
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label) .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(td.rowactions, .icon-actions) .btn.primary:has(> .btn-label) { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
:is(td.rowactions, .icon-actions) .btn.primary:has(> .btn-label):hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:is(td.rowactions, .icon-actions) .btn:is(.danger-btn, .danger-outline):has(> .btn-label) { color: var(--danger); }
:is(td.rowactions, .icon-actions) .btn:is(.danger-btn, .danger-outline):has(> .btn-label):hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
:is(td.rowactions, .icon-actions) .btn.twitch-push:has(> .btn-label) { color: var(--twitch-ink, #8a3ffc); }
:is(td.rowactions, .icon-actions) .btn.twitch-push:has(> .btn-label):hover { background: rgba(145, 70, 255, .14); border-color: rgba(145, 70, 255, .4); color: var(--twitch-ink, #8a3ffc); }
:is([data-theme="dark"], [data-theme="midnight"], [data-theme="violet"], [data-theme="dim"], [data-theme="harbour"], [data-theme="ember"], [data-theme="kelp"]) { --twitch-ink: #b794ff; }
:is([data-theme="light"], [data-theme="contrast"], [data-theme="sepia"], [data-theme="moss"], [data-theme="blush"], [data-theme="coral-light"], [data-theme="harbour-light"]) .table-wrap > table > tbody > tr[data-row-art] > td { --art-veil: 72%; }
@media (max-width: 640px) {
    .table-wrap > table > tbody > tr[data-row-art] > td { --art-w: 200px; }
}
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label)[disabled] { opacity: .4; }
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label) + .btn,
:is(td.rowactions, .icon-actions) .btn:has(> .btn-label) + form,
:is(td.rowactions, .icon-actions) form:has(.btn-label) + form,
:is(td.rowactions, .icon-actions) form:has(.btn-label) + .btn { margin-left: .15rem; }
:is(td.rowactions, .icon-actions) .btn.is-busy .icon { animation: icon-spin .8s linear infinite; }
:is(td.rowactions, .icon-actions) .btn.is-done { color: var(--ok); }
@keyframes icon-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    td.rowactions.menu-open .rowactions-menu .btn:has(> .btn-label) { display: flex; gap: .55rem; width: 100%; height: auto; padding: .45rem .6rem; justify-content: flex-start; }
    td.rowactions.menu-open .rowactions-menu .btn:has(> .btn-label) .btn-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

.tip {
    position: fixed; z-index: 1000; max-width: min(18rem, calc(100vw - 16px)); padding: .38rem .6rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), .22); font-size: .76rem; font-weight: 600; line-height: 1.35;
    pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.tip.show { opacity: 1; transform: none; }
.tip small { display: block; margin-top: .12rem; color: var(--muted); font-weight: 400; }
.tip::after {
    content: ''; position: absolute; left: var(--tip-arrow, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px;
    background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.tip.below::after { bottom: auto; top: -5px; border-width: 1px 0 0 1px; }

.table-wrap.fade-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 3.5rem); mask-image: linear-gradient(to left, transparent, #000 3.5rem); }
.table-wrap.fade-left:not(:has(td.rowactions)) { -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem); mask-image: linear-gradient(to right, transparent, #000 3.5rem); }
.table-wrap.fade-left.fade-right:not(:has(td.rowactions)) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
}

.card-cover { display: none; }
:root[data-view="cards"] table:has(td[data-label]) { display: block; min-width: 0; font-size: .84rem; }
:root[data-view="cards"] .table-wrap:has(td[data-label]) { overflow: visible; }
:root[data-view="cards"] table:has(td[data-label]) > thead { display: block; }
:root[data-view="cards"] table:not([data-sortable]):has(td[data-label]) > thead { display: none; }
:root[data-view="cards"] table:has(td[data-label]) > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; }
:root[data-view="cards"] table:has(td[data-label]) > thead > tr:hover { background: none; }
:root[data-view="cards"] table:has(td[data-label]) > thead th { position: static; padding: 0; border: 0; background: none; }
:root[data-view="cards"] table:has(td[data-label]) > thead th:not(:has(.th-sort)) { display: none; }
:root[data-view="cards"] table:has(td[data-label]) > thead th::before,
:root[data-view="cards"] table:has(td[data-label]) > thead th::after { content: none; }
:root[data-view="cards"] table:has(td[data-label]) > thead .th-sort { padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .66rem; }
:root[data-view="cards"] table:has(td[data-label]) > thead th[aria-sort] .th-sort { border-color: var(--accent-border); background: var(--accent-soft); }
:root[data-view="cards"] table:has(td[data-label]) > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: .65rem 1rem; min-width: 0;
    padding: .9rem 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px);
    background: color-mix(in srgb, var(--surface-2) 80%, var(--surface)); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, background .15s;
}
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr:hover { background: var(--surface-2); border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .12); }
:root[data-view="cards"] .table-wrap > table > tbody > tr > td,
:root[data-view="cards"] .table-wrap > table > tbody > tr[data-row-art] > td { background: none; border-radius: 0; }
:root[data-view="cards"] .table-wrap > table { border-spacing: 0; margin-top: 0; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td { display: block; flex: 1 1 calc(50% - .5rem); min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-label]:empty { display: none; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .18rem;
    color: var(--muted); font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-card-title] { order: -2; flex-basis: 100%; font-size: .98rem; font-weight: 600; line-height: 1.35; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-card-title]::before { content: none; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-card-title] small,
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td[data-card-title] .badge { font-weight: 400; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td.rowactions {
    order: 99; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .35rem; position: static;
    margin-top: .1rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); background: none;
}
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td.rowactions::before,
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr > td.rowactions::after { content: none; }
:root[data-view="cards"] table:has(td[data-label]) td.rowactions .btn + .btn,
:root[data-view="cards"] table:has(td[data-label]) td.rowactions form + form { margin-left: 0; }
:root[data-view="cards"] table:has(td[data-label]) td.rowactions .rowactions-menu { display: contents; }
:root[data-view="cards"] table:has(td[data-label]) td.rowactions .row-more { display: none; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr.editrow { grid-column: 1 / -1; display: block; padding: 0; }
:root[data-view="cards"] table:has(td[data-label]) > tbody > tr.editrow > td { display: block; padding: 1rem 1.1rem; }
:root[data-view="cards"] table:has(td[data-label]) .keycell { flex-basis: 100%; }
:root[data-view="cards"] table:has(td[data-label]) .keyfield { display: flex; }
:root[data-view="cards"] table:has(td[data-label]) .keyfield .key-field { flex: 1; width: auto; min-width: 0; }
:root[data-view="cards"] table:has(td[data-label]) .status-select { width: 100%; }
:root[data-view="cards"] .has-card-cover > .picker-cover { display: none; }
:root[data-view="cards"] .card-cover {
    display: block; width: calc(100% + 2rem); max-width: none; margin: -.9rem -1rem .7rem;
    aspect-ratio: 460 / 215; object-fit: cover; background: var(--surface-2);
    border-radius: calc(var(--radius) + 5px) calc(var(--radius) + 5px) 0 0;
}

tr.editrow > td { background: var(--surface-2); padding: 1rem 1.1rem; border-bottom: 2px solid var(--border); }
tr.editrow:hover > td { background: var(--surface-2); }
.inline-edit label { margin-bottom: .7rem; }
.editrow-actions { display: flex; align-items: center; gap: .6rem; }

.keyfield { display: inline-flex; align-items: center; gap: .25rem; }
.keyfield .key-field {
    width: 15.5rem; padding: .22rem .5rem;
    font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
    font-size: .82rem; letter-spacing: .04em;
    background: var(--surface-2);
}
.keyfield .key-field.masked { letter-spacing: .16em; }
.keyfield .btn { padding: .18rem .45rem; line-height: 1.3; }

.reveal-toggle[disabled] { opacity: .6; cursor: default; }

.key-area.masked,
.key-field.masked {
    -webkit-text-security: disc;
    text-security: disc;
}

@supports not (-webkit-text-security: disc) {
    .key-area.masked,
    .key-field.masked { color: transparent; text-shadow: 0 0 7px var(--mask-ink); }
}

.keyfield .key-field#inline-key-code { width: 100%; }
label > .keyfield { display: flex; }
label > .keyfield .key-field { flex: 1; }

.confirm-message p { font-size: .92rem; line-height: 1.5; }
.confirm-plain { margin-bottom: 1rem; }
.confirm-plain p { margin: 0; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.btn.danger-btn { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn.danger-btn:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--on-danger); }

.table-wrap {
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

.table-wrap table { min-width: max-content; }
.table-wrap::-webkit-scrollbar { height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.card > .table-wrap { margin: 0 -1.4rem -1.25rem; padding: 0 1.4rem 1.25rem; --wrap-pad: 1.4rem; }

.columns-picker { position: relative; font-size: .8rem; }
.columns-picker > summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text-2); white-space: nowrap;
}
.columns-picker > summary::-webkit-details-marker { display: none; }
.columns-picker > summary::after { content: " ▾"; color: var(--muted); }
.columns-picker > summary:hover { border-color: var(--border-strong); color: var(--text); }
.columns-picker[open] > summary { border-color: var(--accent); color: var(--accent); }

.columns-list {
    position: absolute; right: 0; z-index: 20; margin-top: .3rem;
    min-width: 190px; max-height: 60vh; overflow: auto;
    padding: .6rem .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .16);
}
.columns-list { min-width: 240px; }
.columns-hint { margin: 0 0 .5rem; font-size: .74rem; color: var(--muted); }
.columns-items { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .15rem; }
.columns-items li { display: flex; align-items: center; gap: .35rem; padding: .2rem .25rem; border-radius: 6px; background: var(--surface); }
.columns-items li:hover { background: var(--surface-2); }
.columns-items li.dragging { opacity: .55; outline: 1px dashed var(--accent); }
.columns-items label { flex: 1; margin: 0; min-width: 0; }
.columns-items label > span { font-size: .82rem; }
.col-grip { cursor: grab; color: var(--muted); font-size: .72rem; letter-spacing: -.12em; padding: 0 .1rem; user-select: none; }
.col-move { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-2); font: inherit; font-size: .78rem; line-height: 1; cursor: pointer; }
.col-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.col-move:disabled { opacity: .3; cursor: default; }
.columns-reset { width: 100%; }

.key-peek { cursor: pointer; user-select: none; }
.key-peek.peeking { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }

.modal-panel.modal-form { width: min(820px, 100%); }

.modal-form .modal-body .subform,
.modal-form .modal-body .inline-edit {
    border-top: 0; padding-top: 0; margin-top: 0;
}

.modal-form .modal-body .editrow-actions {
    position: sticky; bottom: 0;
    margin-top: 1.25rem; padding-top: 1rem;
    background: var(--surface); border-top: 1px solid var(--border-soft);
}

.modal-form .modal-body > form > .btn:last-child {
    margin-top: 1.25rem;
}

.ico { width: 14px; height: 14px; display: block; }
.keyfield .btn { display: inline-flex; align-items: center; justify-content: center;
                 padding: .3rem .4rem; }

.streamer-name { display: flex; align-items: flex-start; gap: .55rem; }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

.cast-list { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: .5rem; }
.cast-list:not(:has(.cast-row))::before { content: attr(data-cast-empty); color: var(--muted); font-size: .85rem; padding: .3rem 0; }
.cast-row {
    display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; margin: 0;
    border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft);
    text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text);
}
.cast-avatar {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.cast-name { flex: 1; min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast-role { width: auto; min-width: 104px; font-size: .78rem; padding: .15rem .3rem; }
.cast-remove { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cast-remove:hover { background: var(--danger-bg); color: var(--danger); }
.cast-picker { position: relative; margin: .2rem 0 .5rem; }
.cast-picker input { width: 100%; }
.cast-pick-results {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 2px; padding: .3rem;
    max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .25);
}
.cast-pick-results[hidden] { display: none; }
.cast-pick-option {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .35rem .5rem; border: 0; border-radius: 8px;
    background: none; color: var(--text); font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
}
.cast-pick-option:hover, .cast-pick-option.active { background: var(--accent-soft); }

h2.section-head {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); margin: 1.75rem 0 .75rem;
}
h2.section-head:first-of-type { margin-top: 0; }

.editrow-actions .row-delete { margin-left: auto; }
.btn.small.danger-btn { background: var(--surface); border-color: var(--danger-border); color: var(--danger); }
.btn.small.danger-btn:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.title-area { resize: vertical; min-height: 3.1rem; line-height: 1.4; }

.chart-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}
.chart-grid > * { min-width: 0; }
.chart-grid > .card { margin-bottom: 0; }

.chart { width: 100%; max-width: 424px; height: auto; display: block; overflow: visible; }
.chart path, .chart rect { transition: opacity .12s; }
.chart path:hover, .chart rect:hover { opacity: .82; cursor: default; }

.card > .chart[viewBox^='0 0 640'] { max-width: 100%; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; margin: .8rem 0 0; padding: 0; font-size: .82rem; }
.legend li { display: flex; align-items: center; gap: .4rem; }
.legend .swatch { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.legend .muted { font-variant-numeric: tabular-nums; }

.todo { list-style: none; margin: 0; padding: 0; }
.todo li { border-bottom: 1px solid var(--border-soft); }
.todo li:last-child { border-bottom: 0; }
.todo a {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .6rem .2rem; color: var(--muted); font-size: .875rem;
}
.todo a:hover { text-decoration: none; color: var(--text); }
.todo strong {
    min-width: 2.1rem; font-size: 1.05rem; font-variant-numeric: tabular-nums;
    color: var(--muted); font-weight: 600;
}
.todo li.on strong { color: var(--accent); }
.todo li.on a { color: var(--text-2); }

td.nowrap, .nowrap { white-space: nowrap; }

.langtable td { vertical-align: middle; }
.langtable input[type=text] { min-width: 18rem; }
.langtable .refcell { font-size: .85rem; max-width: 26rem; }
h3.section-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
                  color: var(--muted); margin: 1.1rem 0 .5rem; }

@media (max-width: 600px) {
    .brand-word { display: none; }
    main { padding: 1rem .9rem; }

    .card > .table-wrap { margin: 0; padding: 0 0 2px; --wrap-pad: 0px; }

    .card { padding: 1rem; }
    .tiles { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
    .cards { grid-template-columns: 1fr; }
    .grid > label, .filters > label { flex-basis: 100%; }
    dl.detail { grid-template-columns: 1fr; gap: .1rem .5rem; }
    dl.detail dt { padding-top: .5rem; }
    .modal { padding: 0; }
    .modal-panel { max-height: 100vh; border-radius: 0; }
}

.themes { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.themes > * { min-width: 0; }

.theme-option {
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin: 0;
    padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; background: var(--surface);
}
.theme-option:hover { border-color: var(--border-strong); }
.theme-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-option input { width: auto; align-self: flex-start; }
.theme-name { font-size: .85rem; font-weight: 500; }

.theme-swatch {
    display: block; border-radius: 3px; overflow: hidden;
    border: 1px solid var(--sw-border); background: var(--sw-bg); height: 62px;
}
.theme-swatch .sw-bar { display: block; height: 14px; background: var(--sw-surface); border-bottom: 1px solid var(--sw-border); }
.theme-swatch .sw-body { display: block; padding: 7px; }
.theme-swatch .sw-line { display: block; height: 5px; border-radius: 2px; background: var(--sw-text); opacity: .75; margin-bottom: 4px; }
.theme-swatch .sw-line.short { width: 60%; opacity: .45; }
.theme-swatch .sw-accent { display: block; height: 9px; width: 42%; border-radius: 2px; background: var(--sw-accent); margin-top: 6px; }

.theme-swatch.theme-light    { --sw-bg: #f4f5f7; --sw-surface: #ffffff; --sw-border: #d8dce2; --sw-text: #1b2027; --sw-accent: #1f5aa6; }
.theme-swatch.theme-dark     { --sw-bg: #14161b; --sw-surface: #1c1f27; --sw-border: #2f3542; --sw-text: #e7eaf0; --sw-accent: #5b9bd5; }
.theme-swatch.theme-contrast { --sw-bg: #ffffff; --sw-surface: #ffffff; --sw-border: #000000; --sw-text: #000000; --sw-accent: #0a4488; }
.theme-swatch.theme-sepia    { --sw-bg: #f2e9dc; --sw-surface: #fbf6ee; --sw-border: #d9c9b2; --sw-text: #38302a; --sw-accent: #8a5320; }
.theme-swatch.theme-midnight { --sw-bg: #000000; --sw-surface: #0c0f14; --sw-border: #222b38; --sw-text: #e9edf4; --sw-accent: #62b0f5; }
.theme-swatch.theme-violet   { --sw-bg: #15121c; --sw-surface: #1d1928; --sw-border: #352d48; --sw-text: #ece8f6; --sw-accent: #a78bfa; }
.theme-swatch.theme-moss     { --sw-bg: #eaefe8; --sw-surface: #f7faf5; --sw-border: #d2ddcc; --sw-text: #1d271f; --sw-accent: #4a6b1f; }
.theme-swatch.theme-blush    { --sw-bg: #f7edf1; --sw-surface: #fdf8fa; --sw-border: #e6ced7; --sw-text: #2b2026; --sw-accent: #9b2f6a; }
.theme-swatch.theme-dim      { --sw-bg: #2f3641; --sw-surface: #3a424f; --sw-border: #525c6d; --sw-text: #f1f3f7; --sw-accent: #ec8563; }
.theme-swatch.theme-harbour  { --sw-bg: #0a1020; --sw-surface: #111a2e; --sw-border: #26334d; --sw-text: #e9eef7; --sw-accent: #e8c46a; }
.theme-swatch.theme-ember    { --sw-bg: #130f0c; --sw-surface: #1c1613; --sw-border: #3a2e27; --sw-text: #f2e9e2; --sw-accent: #e0793f; }
.theme-swatch.theme-kelp     { --sw-bg: #071518; --sw-surface: #0d1e20; --sw-border: #1f3b3d; --sw-text: #e3f0ee; --sw-accent: #3fcbd6; }
.theme-swatch.theme-coral-light   { --sw-bg: #f3f4f6; --sw-surface: #ffffff; --sw-border: #d9dde4; --sw-text: #222831; --sw-accent: #b9472a; }
.theme-swatch.theme-harbour-light { --sw-bg: #f4f1e9; --sw-surface: #fffdf8; --sw-border: #ddd5c3; --sw-text: #142036; --sw-accent: #855f0e; }

a.who:hover { text-decoration: none; color: var(--accent); }

.profile-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.subnav {
    display: flex; flex-direction: column; gap: .15rem;
    position: sticky; top: 5rem;
}

.subnav a {
    display: block; padding: .5rem .8rem;
    color: var(--text-2); font-size: .9rem; font-weight: 500;
    border-radius: 6px; border-left: 3px solid transparent;
    transition: color .14s, background .14s;
}
.subnav a:hover { color: var(--accent); text-decoration: none; background: rgba(var(--accent-rgb), .07); }
.subnav a.active {
    color: var(--accent); background: var(--accent-soft); font-weight: 600;
    border-left-color: var(--accent);
}

.profile-body > .card:last-child { margin-bottom: 0; }

table.sessions tr.current td { background: var(--accent-soft); }
:root[data-view="cards"] table.sessions > tbody > tr.current { border-color: var(--accent-border); background: var(--accent-soft); }
:root[data-view="cards"] table.sessions > tbody > tr.current > td { background: none; }
table.sessions .badge { margin-left: .4rem; }
table.sessions form { display: inline; }

@media (max-width: 900px) {
    .profile-layout { grid-template-columns: minmax(0, 1fr); gap: .75rem; }

    .subnav {
        position: static; flex-direction: row; overflow-x: auto;
        border-bottom: 1px solid var(--border); padding-bottom: .35rem;
    }
    .subnav a { white-space: nowrap; border-left: 0; }
    .subnav a.active { box-shadow: inset 0 -2px 0 var(--accent); }
}

.twitch-title { font-weight: 600; margin: .2rem 0; overflow-wrap: anywhere; }
.twitch-over  { color: var(--danger); font-weight: 600; }
.twitch-tags  { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.twitch-tags .twitch-removed { text-decoration: line-through; opacity: .6; }
select.twitch-category { width: 100%; }

td.release-cell small.refresh-note {
    white-space: normal;
    word-break: break-word;
    max-width: 120px;
}

.ts-wrapper { width: 100%; }
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    padding: .45rem .6rem; min-height: 0;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: none; font: inherit; line-height: inherit;
}
.ts-wrapper .ts-control:hover { border-color: var(--border-strong); }
.ts-wrapper.focus .ts-control {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.ts-wrapper .ts-control > input { color: var(--text); font: inherit; }
.ts-wrapper .ts-control > input::placeholder { color: var(--muted); }
.ts-wrapper.single .ts-control::after { border-color: var(--muted) transparent transparent; }
.ts-wrapper.single.dropdown-active .ts-control::after { border-color: transparent transparent var(--muted); }
.ts-wrapper.disabled .ts-control { background: var(--surface-2); color: var(--muted); }

.ts-dropdown {
    margin-top: 2px; z-index: 1100;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .14);
}
.ts-dropdown .ts-dropdown-content { max-height: 320px; }
.ts-dropdown .option,
.ts-dropdown .no-results { padding: .4rem .6rem; }
.ts-dropdown .no-results { color: var(--muted); }
.ts-dropdown .active { background: var(--accent-soft); color: var(--text); }
.ts-dropdown .selected { background: rgba(var(--accent-rgb), .1); }
.ts-dropdown .spinner::after { border-color: var(--accent) transparent var(--accent) transparent; }

.picker-option { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.picker-cover {
    flex: none; width: 46px; height: 22px; border-radius: 3px;
    object-fit: cover; background: var(--surface-2);
}
.picker-text { min-width: 0; }
.picker-title { font-weight: 500; }
.picker-year { color: var(--muted); font-size: .82rem; }
.picker-sub {
    display: block; color: var(--muted); font-size: .76rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single.typing .ts-control > .item { display: none; }

.modal-panel { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.picker-item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.picker-item .picker-cover { width: 40px; height: 19px; }
.game-cell { display: inline-flex; align-items: center; gap: .6rem; }

.planner {
    --fc-border-color: var(--border-soft);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-2);
    --fc-neutral-text-color: var(--muted);
    --fc-today-bg-color: rgba(var(--accent-rgb), .07);
    --fc-highlight-color: rgba(var(--accent-rgb), .16);
    --fc-now-indicator-color: var(--danger);
    --fc-event-bg-color: var(--accent);
    --fc-event-border-color: var(--accent);
    --fc-event-text-color: var(--on-accent);
    --fc-button-text-color: var(--text);
    --fc-button-bg-color: var(--surface);
    --fc-button-border-color: var(--border);
    --fc-button-hover-bg-color: var(--surface-2);
    --fc-button-hover-border-color: var(--border-strong);
    --fc-button-active-bg-color: var(--accent-soft);
    --fc-button-active-border-color: var(--accent);
}

.planner-layout {
    display: grid; gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
}

.planner .fc { font-size: .86rem; }
.planner .fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
.planner .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.planner .fc .fc-button {
    font-size: .8rem; font-weight: 600; padding: .38rem .75rem; box-shadow: none;
    border-radius: 9px; text-transform: capitalize; transition: background .15s, border-color .15s, color .15s;
}
.planner .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--accent); }
.planner .fc .fc-button:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13); }
.planner .fc a { color: inherit; }
.planner .fc .fc-daygrid-day-number,
.planner .fc .fc-col-header-cell-cushion { text-decoration: none; }
.planner .fc .fc-daygrid-day { cursor: pointer; }
.planner .fc .fc-timegrid-slot { height: 1.9em; }
.planner .fc .fc-timegrid-slot-minor { border-top-style: dotted; }


.planner-backlog {
    border-left: 1px solid var(--border-soft); padding-left: 1.25rem;
    position: sticky; top: 5rem;
}
.planner-backlog h3 { margin: 0 0 .25rem; font-size: .95rem; }
.backlog-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; max-height: 560px; overflow: auto; margin-top: .75rem;
    scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

@media (max-width: 900px) {
    .planner-layout { grid-template-columns: minmax(0, 1fr); }
    .planner-backlog { border-left: 0; padding-left: 0; position: static; }
    .planner .fc .fc-toolbar { flex-wrap: wrap; gap: .5rem; }
}


.backlog-item img,
.planner .fc-event img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.backlog-item { user-select: none; }

.detail-art {
    position: relative; height: 170px; margin: -1.25rem -1.25rem 1.1rem;
    background: var(--surface-2) center 30% / cover no-repeat;
    border-bottom: 1px solid var(--border);
}
.detail-art.is-header { overflow: hidden; }
.detail-art.is-header::before {
    content: ''; position: absolute; inset: -24px;
    background: var(--art) center / cover no-repeat;
    filter: blur(18px) brightness(.6);
}
.detail-art.is-header::after { display: none; }
.detail-art-header {
    position: relative; z-index: 1; display: block; height: 100%; margin: 0 auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.detail-art::after {
    content: ''; position: absolute; inset: 40% 0 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .55));
    pointer-events: none;
}
.detail-art-logo {
    position: absolute; left: 1.25rem; bottom: .9rem; z-index: 1;
    max-width: 45%; max-height: 62%; object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}

.detail-with-art { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.detail-with-art.small { grid-template-columns: 64px minmax(0, 1fr); gap: .85rem; margin-bottom: .9rem; }
.detail-boxart {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--radius); border: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .18);
}
.detail-boxart.is-header { aspect-ratio: 460 / 215; }
.detail-game.has-art { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: start; }
.detail-game.has-art.wide-art { grid-template-columns: 160px minmax(0, 1fr); }
.detail-game-art {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
    border-radius: calc(var(--radius) + 2px); box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .25);
}
.detail-game-art.is-header { aspect-ratio: 460 / 215; }
.detail-game-info { min-width: 0; }
.detail-actions { margin-top: 1rem; }

@media (max-width: 600px) {
    .detail-art { height: 120px; }
    .detail-with-art { grid-template-columns: 80px minmax(0, 1fr); }
    .detail-game.has-art, .detail-game.has-art.wide-art { grid-template-columns: minmax(0, 1fr); }
    .detail-game-art { max-width: 110px; }
    .detail-game-art.is-header { max-width: 220px; }
}

.grid > label:has(select[data-picker="games"]) { flex-basis: 100%; }
.ts-wrapper .ts-control > .item {
    flex: none; max-width: calc(100% - 2.5rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-wrapper .clear-button { color: var(--muted); right: 2rem; opacity: 1; }
.ts-wrapper .clear-button:hover { color: var(--danger); }
.ts-wrapper:not(.has-items) .clear-button { display: none; }

html .turbo-progress-bar {
    top: 0; height: 3px; z-index: 50;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), .55), 0 0 2px rgba(var(--accent-rgb), .8);
    border-radius: 0 3px 3px 0;
}
html:has(body.has-topbar) .turbo-progress-bar { top: 57px; }

@media (prefers-reduced-motion: reduce) {
    html .turbo-progress-bar { transition: opacity .15s; }
}


:root {
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
}

@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out     { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise-in      { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sink-out     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes drop-in      { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes slide-in     { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes page-in      { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pulse        { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.modal:not(.hidden) .modal-backdrop { animation: fade-in .18s ease-out both; }
.modal:not(.hidden) .modal-panel    { animation: rise-in .22s var(--ease-out) both; }
.modal.closing .modal-backdrop      { animation: fade-out .17s var(--ease-in) both; }
.modal.closing .modal-panel         { animation: sink-out .17s var(--ease-in) both; }

.navgroup[data-open] > .navmenu { animation: drop-in .16s var(--ease-out); }
.ts-dropdown { animation: drop-in .14s var(--ease-out); }
.columns-picker[open] > .columns-list { animation: drop-in .14s var(--ease-out); }

main { animation: page-in .26s var(--ease-out); }
html[aria-busy="true"] main { opacity: .55; transition: opacity .2s ease .2s; }
.flash { animation: slide-in .3s var(--ease-out); }

.btn { transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary:hover { box-shadow: 0 3px 10px rgba(var(--accent-rgb), .28); }

.card.link,
.tile { transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-out), background .18s; }
.card.link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .14); }
a.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .12); }

tbody tr { transition: background-color .15s ease; }
.navmenu a, .mainnav a, .navtop, .subnav a { transition: color .15s, background .15s; }


.theme-option { transition: border-color .15s, background .15s, transform .15s var(--ease-out); }
.theme-option:hover { transform: translateY(-2px); }

.results .result { animation: fade-in .2s ease-out both; }
.ts-dropdown .option { transition: background .12s; }

input, select, textarea, .ts-wrapper .ts-control { transition: border-color .15s, box-shadow .15s; }

.skeleton {
    display: block; border-radius: var(--radius);
    background: var(--surface-2);
    background: color-mix(in srgb, var(--text) 9%, var(--surface));
    animation: pulse 1.4s ease-in-out infinite;
}
.skeleton-line  { height: .7rem; width: 100%; }
.skeleton-line.short { width: 55%; }
.skeleton-title { display: inline-block; height: 1rem; width: 220px; vertical-align: middle; }
.skeleton-thumb { flex: none; width: 46px; height: 22px; }
.skeleton-banner { height: 170px; margin: -1.25rem -1.25rem 1.1rem; border-radius: 0; }
.skeleton-boxart { width: 120px; aspect-ratio: 2 / 3; }
.skeleton-lines { display: grid; gap: .75rem; align-content: start; flex: 1; min-width: 0; }
.skeleton-detail { display: flex; gap: 1.1rem; }
.skeleton-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; }
.skeleton-row .skeleton-lines { gap: .4rem; }
.skeleton-row:nth-child(2) .skeleton { animation-delay: .15s; }
.skeleton-row:nth-child(3) .skeleton { animation-delay: .3s; }

.skeleton-calendar-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.skeleton-calendar-head .skeleton-line { height: 1.6rem; }
.skeleton-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.skeleton-calendar-grid .skeleton { height: 64px; border-radius: 2px; }
.skeleton-calendar-grid .skeleton:nth-child(7n+2) { animation-delay: .1s; }
.skeleton-calendar-grid .skeleton:nth-child(7n+3) { animation-delay: .2s; }
.skeleton-calendar-grid .skeleton:nth-child(7n+4) { animation-delay: .3s; }
.skeleton-calendar-grid .skeleton:nth-child(7n+5) { animation-delay: .4s; }
.skeleton-calendar-grid .skeleton:nth-child(7n+6) { animation-delay: .5s; }
.skeleton-calendar-grid .skeleton:nth-child(7n)   { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .card.link:hover, a.tile:hover, .backlog-item:hover, .theme-option:hover { transform: none; }
}

.redirect-uri + .redirect-uri { margin-top: .4rem; }

.lang-switch { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .82rem; color: var(--muted); }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--accent); }
.lang-switch strong { color: var(--text); font-weight: 600; }
form.card .lang-switch { margin-top: 1.25rem; }

.login-shell { width: min(390px, 100%); }
main:has(.login-shell) { animation: none; }
body:has(.login-shell) {
    background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(var(--accent-rgb), .13), transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 95%, rgba(var(--accent-rgb), .10), transparent 70%),
        var(--bg);
}

.login-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.6rem 2rem 1.5rem;
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 18px 48px -12px rgba(var(--shadow-rgb), .22);
}
.login-card h1 { text-align: center; margin: 0 0 .3rem; font-size: 1.4rem; }
.login-card > p.muted { text-align: center; margin: 0 0 1.6rem; font-size: .9rem; }
.login-card .btn.wide { margin-top: .4rem; padding: .65rem; font-size: .92rem; }
.login-card .login-mark { margin-bottom: .9rem; }

.login-back {
    position: absolute; top: .85rem; left: .85rem;
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .25rem .55rem .25rem .35rem; border-radius: 999px;
    font-size: .8rem; color: var(--muted);
    transition: color .15s, background .15s;
}
.login-back:hover { color: var(--accent); background: rgba(var(--accent-rgb), .08); text-decoration: none; }

.login-foot { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }

.dash-head { margin-bottom: 1.1rem; }
.dash-head h1 { margin: 0 0 .15rem; font-size: 1.5rem; }
.dash-head p { margin: 0; }

.shortcuts {
    display: grid; gap: .65rem; margin-bottom: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.shortcut {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem .9rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); font-size: .88rem; font-weight: 500;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-out), color .18s;
}
.shortcut svg {
    flex: none; width: 20px; height: 20px; padding: 6px; box-sizing: content-box;
    color: var(--accent); background: var(--accent-soft); border-radius: 8px;
    transition: transform .25s var(--ease-out);
}
.shortcut:hover {
    color: var(--accent); border-color: var(--accent-border); text-decoration: none;
    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--shadow-rgb), .1);
}
.shortcut:hover svg { transform: scale(1.08) rotate(-4deg); }

.today-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.today-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-out);
    animation: rise-in .35s var(--ease-out) both;
}
.today-card:nth-child(2) { animation-delay: .06s; }
.today-card:nth-child(3) { animation-delay: .12s; }
.today-card:nth-child(n+4) { animation-delay: .18s; }
.today-open {
    display: flex; flex-direction: column; flex: 1; padding: 0; text-align: left;
    font: inherit; color: inherit; cursor: pointer; background: none; border: 0;
}
.today-card:hover, .today-card:focus-within {
    border-color: var(--accent-border); transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .14);
}
.today-art {
    position: relative; display: block; aspect-ratio: 460 / 215;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .08));
}
.today-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.today-art::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 55%);
}
.today-time {
    position: absolute; left: .7rem; bottom: .55rem; z-index: 1;
    color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.today-status { position: absolute; right: .6rem; top: .6rem; z-index: 1; background: var(--surface); }
.today-card.status-done .today-art img { filter: grayscale(.6); }
.today-body { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .85rem .85rem; min-width: 0; }
.today-body strong { font-size: .95rem; overflow-wrap: anywhere; }
.today-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.today-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    padding: .6rem .85rem; border-top: 1px solid var(--border-soft); background: var(--surface);
}
.today-when { display: flex; flex-direction: column; line-height: 1.25; }
.today-range { font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }
.today-when small.overdue { color: var(--warn); }
.today-push { display: flex; align-items: center; gap: .5rem; }
.today-sent { display: inline-flex; align-items: center; gap: .2rem; color: var(--ok); }
.today-live {
    position: absolute; right: .6rem; top: .6rem; z-index: 1;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem; border-radius: 999px;
    background: #e5383b; color: #fff; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}
.today-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.today-card.status-live { border-color: rgba(229, 56, 59, .55); }

.day-off { text-align: center; padding: .75rem 1rem 1.25rem; }
.day-off h3 { margin: .5rem 0 .3rem; font-size: 1.1rem; }
.day-off p { margin: 0 auto .35rem; max-width: 30rem; }
.day-off-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.day-off-art { width: 120px; height: 90px; overflow: visible; }
.day-off-art .sun { fill: rgba(var(--accent-rgb), .22); stroke: var(--accent); stroke-width: 2; }
.day-off-art .wave, .day-off-art .palm { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.day-off-art .wave.soft { opacity: .45; }
.day-off-art .sun { animation: day-off-sun 6s ease-in-out infinite; transform-origin: 88px 26px; }
.day-off-art .palm { animation: day-off-sway 5s ease-in-out infinite; transform-origin: 40px 66px; }
@keyframes day-off-sun   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes day-off-sway  { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

.upcoming { list-style: none; margin: 0; padding: 0; }
.upcoming li {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem 0; border-bottom: 1px solid var(--border-soft); font-size: .875rem;
}
.upcoming li:last-child { border-bottom: 0; }
.upcoming-when { flex: none; width: 4.6rem; color: var(--muted); font-size: .8rem; }
.upcoming-when b { color: var(--text-2); font-weight: 600; margin-right: .15rem; }
.upcoming-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.kind-embargo  { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.badge.kind-expiry   { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.badge.kind-content  { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.todo li.on.danger strong { color: var(--danger); }

.pick-time { max-width: 180px; margin-bottom: .4rem; }
.pick-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.pick-item {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .55rem .7rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    transition: border-color .15s, background .15s, transform .15s var(--ease-out);
}
.pick-item:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); }
.pick-item:disabled { opacity: .55; cursor: default; }
.pick-item.busy { opacity: 1; border-color: var(--accent); }
.pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pick-text strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-go { color: var(--accent); font-weight: 600; transition: transform .15s var(--ease-out); }
.pick-item:hover .pick-go { transform: translateX(3px); }

.schedule { display: grid; gap: .35rem; margin-bottom: .75rem; max-width: 520px; }
.schedule-head, .schedule-day {
    display: grid; grid-template-columns: minmax(9rem, 1.3fr) 1fr 1fr; gap: .75rem; align-items: center;
}
.schedule-head span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.schedule-day { padding: .35rem .5rem; border-radius: var(--radius); transition: background .15s; }
.schedule-day.on { background: var(--accent-soft); }
.schedule-day input[type=time] { margin: 0; }
.schedule-day:not(.on) input[type=time] { opacity: .4; }
.schedule-toggle { display: flex; align-items: center; gap: .55rem; margin: 0; cursor: pointer; }
.schedule-toggle span { display: inline; margin: 0; font-size: .9rem; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; }

.planner .fc .fc-non-business { background: rgba(var(--shadow-rgb), .045); }

@media (prefers-reduced-motion: reduce) {
    .today-card:hover, .shortcut:hover, .pick-item:hover:not(:disabled) { transform: none; }
    .shortcut:hover svg { transform: none; }
}

.tracking { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.tracking-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.tracking-head h3 { margin: 0; font-size: .92rem; }
.tracking-log { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.tracking-log li { display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border-soft); }
.tracking-log li:last-child { border-bottom: 0; }
.tracking-log b { font-weight: 600; }
.tracking-log .kind-started b { color: var(--ok); }
.tracking-log .kind-unscheduled b { color: var(--warn); }
.today-onair {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-2);
}
.today-onair .dot { width: 8px; height: 8px; border-radius: 50%; background: #e5383b; animation: pulse 1.2s ease-in-out infinite; }

.code-editor, .code-sample {
    font-family: "Cascadia Mono", ui-monospace, Consolas, "SF Mono", monospace; font-size: .82rem; line-height: 1.5;
}
.code-editor { width: 100%; resize: vertical; tab-size: 2; }
.code-sample {
    margin: 0; padding: .9rem 1rem; overflow-x: auto;
    background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius);
}

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0 auto 0 0; }
.security-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
    color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border);
    transition: border-color .15s, transform .15s var(--ease-out);
}
.security-link:hover { border-color: var(--ok); text-decoration: none; transform: translateY(-1px); }

body.sec-page { background: var(--bg); }
.sec { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; animation: none; }
.sec h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }
.sec-hero { display: flex; gap: 1rem; align-items: flex-start; }
.sec-hero h1 { margin: .1rem 0 .35rem; font-size: 1.45rem; }
.sec-hero > div { flex: 1; }
.sec-lead { margin: 0; color: var(--text-2); line-height: 1.6; }
.sec-shield {
    flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border);
}
.sec-shield svg { width: 28px; height: 28px; }
.sec-close { flex: none; }
.sec-yours {
    margin: 1.25rem 0 0; padding: .7rem .9rem; border-radius: var(--radius);
    background: var(--accent-soft); border: 1px solid var(--accent-border); font-size: .9rem;
}
.sec-points { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.sec-point {
    display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
}
.sec-point h3 { margin: 0 0 .25rem; font-size: .92rem; }
.sec-point p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.sec-icon {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    color: var(--accent); background: var(--accent-soft);
}
.sec-icon svg { width: 20px; height: 20px; }
.sec-modes { font-size: .86rem; width: 100%; table-layout: fixed; }
.sec-modes-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sec-modes th, .sec-modes td { white-space: normal; overflow-wrap: break-word; vertical-align: top; line-height: 1.5; }
.sec-modes thead th:first-child { width: 24%; }
.sec-modes th[scope=row] { color: var(--text-2); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .82rem; }
.sec-honest {
    margin-top: 2rem; padding: .25rem 1.1rem .9rem; border-radius: 10px;
    background: var(--warn-bg); border: 1px solid var(--warn-border);
}
.sec-honest h2 { margin-top: .9rem; }
.sec-honest ul { margin: 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.6; }
.sec-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sec-refs li { display: flex; flex-direction: column; padding: .55rem .8rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-soft); }
.sec-refs a::after { content: " ↗"; font-size: .8em; }
.sec-refs small { font-size: .8rem; }
@media (max-width: 480px) {
    .sec { padding: 1.25rem 1rem 2rem; }
    .sec-modes { font-size: .8rem; }
    .sec-modes thead th:first-child { width: 31%; }
    .sec-modes th, .sec-modes td { padding: .5rem .45rem; }
}

tr.user-inactive td { color: var(--muted); }
tr.user-inactive td strong { text-decoration: line-through; text-decoration-color: var(--border-strong); }
label > span code.confirm-name { text-transform: none; letter-spacing: 0; font-size: .85rem; padding: 0 .3rem; border-radius: 3px; background: var(--danger-bg); color: var(--danger-ink); }

.switch {
    display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .1rem;
    background: none; border: 0; font: inherit; font-size: .82rem; color: var(--muted); cursor: pointer;
}
.switch-track {
    position: relative; width: 34px; height: 20px; border-radius: 999px; flex: none;
    background: var(--border-strong); transition: background .18s;
}
.switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease-out);
}
.switch.on { color: var(--ok); }
.switch.on .switch-track { background: var(--ok); }
.switch.on .switch-thumb { transform: translateX(14px); }
.switch:focus-visible .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.testimonial-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.testimonial-list li {
    display: flex; align-items: center; gap: .8rem; padding: .6rem 0;
    border-bottom: 1px solid var(--border-soft); transition: opacity .18s;
}
.testimonial-list li:last-child { border-bottom: 0; }
.testimonial-list li.off img, .testimonial-list li.off .testimonial-initial, .testimonial-list li.off .testimonial-text { opacity: .45; }
.testimonial-list.section-off { opacity: .6; }
.testimonial-list img, .testimonial-initial {
    flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
}
.testimonial-initial { display: grid; place-items: center; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.testimonial-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.testimonial-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.code-labels input { margin: 0; }
.code-labels input.needs-label { border-color: var(--warn-border); background: var(--warn-bg); }
.code-labels .file-label { color: var(--muted); font-size: .85rem; }

.appearance h2.appearance-themes { margin-top: 1.75rem; }
.appearance .themes { margin-bottom: 1.25rem; }
.theme-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.theme-pair .theme-swatch { margin: 0; }

.avatar-edit { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1; min-width: 220px; }
.avatar-actions form { margin: 0; }
.avatar-actions p { flex-basis: 100%; margin: .2rem 0 0; }
.avatar-upload label.btn { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.avatar-upload label.btn > span { display: inline; margin: 0; font-size: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.avatar-upload input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.avatar-upload label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.twitch-btn { display: inline-flex; align-items: center; gap: .4rem; color: #7c3aed; border-color: rgba(145, 70, 255, .45); }
.btn.twitch-btn:hover { background: rgba(145, 70, 255, .08); border-color: #9146ff; color: #6d28d9; }
[data-theme="dark"] .btn.twitch-btn, [data-theme="midnight"] .btn.twitch-btn, [data-theme="ember"] .btn.twitch-btn, [data-theme="kelp"] .btn.twitch-btn,
[data-theme="violet"] .btn.twitch-btn, [data-theme="dim"] .btn.twitch-btn, [data-theme="harbour"] .btn.twitch-btn { color: #b794ff; }
td.user-cell .avatar { width: 26px; height: 26px; margin-right: .45rem; vertical-align: middle; box-shadow: none; }
td.user-cell .avatar-initials { font-size: .66rem; }

.picker-cover.boxart { width: 26px; height: 36px; }

.login-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin: 1rem 0 1.2rem;
    border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}
.login-tabs a {
    display: block; padding: .45rem .5rem; border-radius: 7px; text-align: center;
    font-size: .88rem; font-weight: 500; color: var(--text-2);
}
.login-tabs a:hover { text-decoration: none; color: var(--text); }
.login-tabs a.active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .15); }
.login-intro { text-align: center; font-size: .9rem; margin: 0 0 1.2rem; }
.login-note { margin: .8rem 0 0; text-align: center; }
.login-foot { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.login-privacy { font-size: .78rem; color: var(--muted); }

.btn.twitch-signin {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    background: #9146ff; border-color: #9146ff; color: #fff; font-weight: 600;
}
.btn.twitch-signin:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; box-shadow: 0 3px 10px rgba(145, 70, 255, .35); }



.winner-list, .entry-list { list-style: none; margin: 0; padding: 0; }


.page-actions { margin: 0; }
.page-actions form { margin: 0; }
.page-head h1 .badge { vertical-align: middle; margin-left: .4rem; }

.giveaway-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.giveaway-card { display: flex; flex-direction: column; gap: .45rem; margin: 0; }
.giveaway-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.giveaway-card-head strong { font-size: 1rem; }
.giveaway-counts { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--text-2); }
.giveaway-card.status-finished, .giveaway-card.status-cancelled { opacity: .7; }
.badge.giveaway-status-open { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.badge.giveaway-status-planned { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.badge.giveaway-status-cancelled { color: var(--muted); }

.giveaway-summary dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.giveaway-summary dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.giveaway-summary dd { margin: .15rem 0 0; font-size: .9rem; }
.giveaway-rules { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--border-soft); white-space: normal; line-height: 1.55; font-size: .9rem; }

.prize-pick { display: grid; gap: .3rem; max-height: 50vh; overflow-y: auto; margin: .5rem 0 1rem; }
.prize-option { padding: .4rem .5rem; border-radius: 6px; margin: 0; }
.prize-option:hover { background: var(--surface-2); }
.prize-option span { display: flex; flex-direction: column; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); margin: 0; }

.winner-list li {
    display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(220px, 2fr) auto;
    gap: .5rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border-soft);
}
.winner-list li:last-child { border-bottom: 0; }
.winner-list li.state-cancelled { opacity: .55; }
.winner-who, .winner-state { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.winner-state .badge { align-self: flex-start; }
.winner-link { display: flex; gap: .4rem; min-width: 0; }
.winner-link .copy-field { font-size: .78rem; min-width: 0; }
.winner-actions { display: flex; gap: .4rem; }
.winner-actions form { margin: 0; }
.badge.winner-claimed { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.badge.winner-waiting { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.badge.winner-expired { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.badge.winner-removed { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.winner-removed-reason { font-style: italic; overflow-wrap: anywhere; }
.btn.danger-outline { border-color: var(--danger-border); color: var(--danger); }
.btn.danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.winners-admin tr.state-removed td { opacity: .75; }
.remove-prize-summary { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); font-size: .88rem; }
.remove-prize-summary dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.remove-prize-summary dd { margin: 0; }
.remove-outcome { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.remove-outcome legend { font-size: .88rem; font-weight: 600; margin-bottom: .5rem; }
.remove-outcome label.choice { display: flex; gap: .65rem; align-items: flex-start; margin: 0; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.remove-outcome label.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.remove-outcome label.choice input { margin-top: .2rem; width: auto; }
.remove-outcome label.choice > span { display: grid; gap: .15rem; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .9rem; color: var(--text); }
.remove-outcome label.choice small { font-size: .8rem; }
.removal-list { list-style: none; margin: 0; padding: 0; }
.removal-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border-soft); }
.removal-list li:last-child { border-bottom: 0; }
.removal-reason { margin: .25rem 0 0; font-size: .88rem; color: var(--text-2); overflow-wrap: anywhere; }
.removal-meta { display: grid; justify-items: end; align-content: start; gap: .25rem; flex-shrink: 0; }
@media (max-width: 640px) { .removal-list li { flex-direction: column; } .removal-meta { justify-items: start; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.error-tiles .tile { border-left: 3px solid var(--border); }
.error-tiles .tile.level-fatal { border-left-color: var(--danger); }
.error-tiles .tile.level-error { border-left-color: #d9622b; }
.error-tiles .tile.level-warning { border-left-color: var(--warn); }
.error-tiles .tile.level-notice { border-left-color: var(--muted); }
.badge.error-level.level-fatal { border-color: var(--danger); background: var(--danger); color: var(--on-danger, #fff); }
.badge.error-level.level-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.badge.error-level.level-warning { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.badge.error-level.level-notice { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.error-bulk { display: inline-flex; align-items: center; gap: .7rem; }
.error-bulk label.inline { margin: 0; }
.error-list { list-style: none; margin: 0; padding: 0; }
.error-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .2rem; border-bottom: 1px solid var(--border-soft); }
.error-item:last-child { border-bottom: 0; }
.error-item.resolved { opacity: .65; }
.error-item.focus { background: var(--accent-soft); border-radius: 8px; padding-inline: .5rem; }
.error-check { margin-top: .45rem; width: auto; flex-shrink: 0; }
.error-check-spacer { width: 13px; flex-shrink: 0; }
.error-item details { flex: 1; min-width: 0; }
.error-item summary { display: grid; gap: .3rem; cursor: pointer; list-style: none; padding: .15rem 0; }
.error-item summary::-webkit-details-marker { display: none; }
.error-head { display: flex; gap: .55rem; align-items: baseline; min-width: 0; }
.error-head .badge { flex-shrink: 0; }
.error-message { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; background: none; padding: 0; }
.error-item details[open] .error-message { white-space: normal; overflow-wrap: anywhere; }
.error-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; font-size: .78rem; color: var(--muted); }
.error-where { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.error-count { font-weight: 700; color: var(--text-2); }
.error-detail { margin-top: .6rem; padding: .8rem .9rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.error-detail dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 .7rem; font-size: .86rem; }
.error-detail dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.error-detail dd { margin: 0; overflow-wrap: anywhere; }
.error-full, .error-trace { margin: 0 0 .7rem; padding: .6rem .7rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-soft); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; }
.error-detail .card-actions { margin: 0; }
.error-empty { display: grid; justify-items: center; gap: .4rem; padding: 2.5rem 1rem; color: var(--ok); }
.error-empty svg { width: 42px; height: 42px; }
.error-empty p { color: var(--muted); margin: 0; }
.error-clear { text-align: right; margin-top: .8rem; }

.domain-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.domain-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border-soft); }
.domain-list li:last-child { border-bottom: 0; }
.domain-list label.inline { margin: 0; }
.domain-name { display: grid; gap: .1rem; }

.usermenu-badge { margin-left: auto; min-width: 1.25rem; padding: 0 .35rem; border-radius: 99px; background: var(--accent); color: var(--on-accent, #fff); font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.support-lead { max-width: 760px; margin-top: -.6rem; margin-bottom: 1.2rem; }
.support-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.support-way { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1.2rem 1.25rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.support-way:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--shadow-rgb, 0, 0, 0), .1); text-decoration: none; }
.support-way strong { font-size: 1.05rem; }
.support-way > span:not(.support-way-icon):not(.support-way-badge) { color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.support-way-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: .3rem; }
.support-way-icon svg { width: 24px; height: 24px; }
.way-bug .support-way-icon { background: var(--danger-bg); color: var(--danger); }
.way-survey .support-way-icon { background: var(--accent-soft); color: var(--accent); }
.way-feedback .support-way-icon { background: var(--ok-bg); color: var(--ok); }
.support-way-badge { position: absolute; top: 1rem; right: 1rem; min-width: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: var(--warn); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.5rem; text-align: center; }
.support-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 0 1.25rem; align-items: start; }
.support-list { list-style: none; margin: 0; padding: 0; }
.support-list li + li { border-top: 1px solid var(--border-soft); }
.support-list a { display: flex; align-items: center; gap: .7rem; padding: .7rem .3rem; color: var(--text); text-decoration: none; border-radius: 8px; }
.support-list a:hover { background: var(--surface-2); text-decoration: none; }
.support-item-main { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.support-item-main strong { font-weight: 500; overflow-wrap: anywhere; }
.support-list li.is-new strong { font-weight: 700; }
.support-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; vertical-align: middle; margin-right: .3rem; }

.badge.bug-new { border-color: var(--accent-border, var(--border)); background: var(--accent-soft); color: var(--accent); }
.badge.bug-confirmed { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.badge.bug-in_progress { border-color: #8b5cf6; background: rgba(139, 92, 246, .12); color: #7c3aed; }
.badge.bug-need_info { border-color: var(--warn); background: var(--warn); color: #fff; }
.badge.bug-fixed { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.badge.bug-closed, .badge.bug-wont_fix, .badge.bug-duplicate { border-color: var(--border); color: var(--muted); }
.badge.impact-blocking, .badge.prio-urgent { border-color: var(--danger); background: var(--danger); color: var(--on-danger, #fff); }
.badge.impact-annoying, .badge.prio-high { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.badge.impact-cosmetic, .badge.prio-low { border-color: var(--border); color: var(--muted); }
.badge.prio-normal { border-color: var(--border); color: var(--text-2); }
.badge.survey-draft { border-color: var(--border); color: var(--muted); }
.badge.survey-open { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.badge.survey-closed { border-color: var(--border); background: var(--surface-2); color: var(--text-2); }

.bug-form { padding: 1.4rem 1.5rem; display: grid; gap: 1.4rem; max-width: 820px; }
.bug-step { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; }
.bug-step-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; }
.bug-step-body > label:last-child { margin-bottom: 0; }
.bug-step-body .field-label { display: block; font-size: .74rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: .3rem; }
.bug-step-body .field-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bug-steps { margin: .4rem 0 .5rem; padding-left: 1.6rem; display: grid; gap: .35rem; }
.bug-steps li { padding-left: .2rem; }
.bug-steps li::marker { color: var(--accent); font-weight: 700; }
.bug-steps li { display: list-item; }
.bug-steps li > * { vertical-align: middle; }
.bug-steps input { width: calc(100% - 2.6rem); }
.bug-step-remove { width: 2rem; height: 2rem; margin-left: .3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1rem; }
.bug-step-remove:hover { color: var(--danger); border-color: var(--danger-border); }
.impact-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .6rem; }
.impact-choice { margin: 0; cursor: pointer; }
.impact-choice input { position: absolute; opacity: 0; pointer-events: none; }
.impact-choice > span { display: grid; gap: .2rem; height: 100%; padding: .8rem .9rem; border: 1.5px solid var(--border); border-radius: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); margin: 0; transition: border-color .15s, background .15s; }
.impact-choice > span svg { width: 22px; height: 22px; color: var(--muted); }
.impact-choice > span small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.impact-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.impact-choice.impact-blocking input:checked + span { border-color: var(--danger); background: var(--danger-bg); }
.impact-choice.impact-blocking input:checked + span svg { color: var(--danger); }
.impact-choice.impact-annoying input:checked + span { border-color: var(--warn); background: var(--warn-bg); }
.impact-choice.impact-annoying input:checked + span svg { color: var(--warn); }
.impact-choice input:checked + span svg { color: var(--accent); }
.impact-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bug-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.bug-submit p { margin: 0; max-width: 480px; }

.shot-uploader { display: grid; gap: .6rem; }
.shot-drop { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.shot-drop:hover, .shot-uploader.dragging .shot-drop { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.shot-drop svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--accent); }
.shot-drop span { display: grid; gap: .15rem; }
.shot-drop small { color: var(--muted); font-size: .8rem; }
.shot-uploader.compact .shot-drop { padding: .55rem .8rem; border-width: 1.5px; }
.shot-uploader.compact .shot-drop svg { width: 22px; height: 22px; }
.shot-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; }
.shot-thumbs:empty { display: none; }
.shot-thumb { position: relative; width: 132px; height: 92px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border); background: var(--surface-2); }
.shot-thumb.open { border-color: var(--accent); }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.shot-thumb.uploading img { opacity: .4; filter: grayscale(1); }
.shot-thumb.uploading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 3px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.shot-thumb-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; }
.shot-thumb-point { position: absolute; left: 4px; bottom: 4px; padding: .1rem .45rem; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; font: inherit; font-size: .7rem; cursor: pointer; }
.shot-thumb.uploading .shot-thumb-point { display: none; }
.shot-thumb-pins { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.shot-board { padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); display: grid; gap: .6rem; }
.shot-board-hint { margin: 0; font-size: .82rem; color: var(--text-2); }
.shot-stage { position: relative; display: inline-block; justify-self: start; max-width: 100%; cursor: crosshair; line-height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.shot-stage img { max-width: 100%; max-height: 70vh; display: block; }
.shot-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; color: #fff; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none; }
.shot-pins { margin: 0; padding-left: 1.6rem; display: grid; gap: .35rem; }
.shot-pins:empty { display: none; }
.shot-pins li::marker { color: var(--danger); font-weight: 700; }
.shot-pins input { width: calc(100% - 2.4rem); }
.shot-pin-remove { width: 1.9rem; height: 1.9rem; margin-left: .3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; }
.shot-board > .btn { justify-self: start; }
.shot-error { margin: 0; color: var(--danger); font-size: .85rem; }

.bug-progress { list-style: none; display: flex; margin: 0 0 1.1rem; padding: 0; counter-reset: none; }
.bug-progress li { flex: 1; display: grid; justify-items: center; gap: .35rem; position: relative; font-size: .8rem; color: var(--muted); text-align: center; }
.bug-progress li::before { content: ''; position: absolute; top: 14px; left: -50%; right: 50%; height: 3px; background: var(--border); z-index: 0; }
.bug-progress li:first-child::before { display: none; }
.bug-progress li.done::before, .bug-progress li.current::before { background: var(--accent); }
.bug-progress-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border); font-weight: 700; font-size: .8rem; }
.bug-progress li.done .bug-progress-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.bug-progress li.current .bug-progress-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bug-progress li.current { color: var(--text); font-weight: 600; }
.bug-facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.bug-facts dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.bug-facts dd { margin: 0; overflow-wrap: anywhere; }
.bug-section { margin: 1.1rem 0 .4rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bug-text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.bug-steps-list { margin: 0; padding-left: 1.4rem; line-height: 1.6; }
.bug-steps-list li::marker { color: var(--accent); font-weight: 700; }
.bug-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .8rem; margin-top: .5rem; }
.bug-shot { margin: 0; }
.bug-shot-frame { position: relative; display: block; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.bug-shot-frame img { width: 100%; height: auto; display: block; }
.bug-shot figcaption ol { margin: .4rem 0 0; padding-left: 1.4rem; font-size: .84rem; }
.bug-shot figcaption li::marker { color: var(--danger); font-weight: 700; }
.bug-env { margin-top: 1rem; font-size: .84rem; }
.bug-env summary { cursor: pointer; color: var(--muted); }
.bug-env dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.bug-env dt { color: var(--muted); }
.bug-env dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.bug-timeline { display: grid; gap: .7rem; margin: 1rem 0; }
.bug-event { display: flex; align-items: center; gap: .6rem; justify-content: center; padding: .2rem 0; }
.bug-event::before, .bug-event::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--border); }
.bug-comment { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); max-width: 760px; }
.bug-comment.from-team { border-color: var(--accent-border, var(--accent)); background: var(--accent-soft); margin-left: auto; }
.bug-comment.internal { border-style: dashed; border-color: var(--warn); background: var(--warn-bg); }
.bug-comment header, .chat-message header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .4rem; font-size: .88rem; }
.bug-comment header time, .chat-message header time { margin-left: auto; font-size: .78rem; }
.bug-comment p, .chat-message p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.bug-comment .avatar { width: 26px; height: 26px; }
.bug-callout { border-left: 4px solid var(--accent); }
.bug-callout h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.bug-callout p { margin: 0 0 .8rem; color: var(--text-2); }
.callout-fixed { border-left-color: var(--ok); background: var(--ok-bg); }
.callout-info { border-left-color: var(--warn); background: var(--warn-bg); }
.bug-fix-answer { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.bug-still { flex: 1 1 280px; }
.bug-still > summary { list-style: none; display: inline-block; }
.bug-still > summary::-webkit-details-marker { display: none; }
.bug-still[open] > summary { margin-bottom: .6rem; }
.bug-reply, .chat-reply { display: grid; gap: .6rem; max-width: 760px; }
.bug-reply > .btn, .chat-reply > .btn { justify-self: start; }
.bug-admin { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.bug-admin-side { position: sticky; top: 76px; display: grid; gap: 1rem; }
.bug-manage h2, .bug-reporter h2 { margin: 0 0 .7rem; font-size: 1rem; }
.bug-manage { display: grid; gap: .2rem; }
.bug-manage.is-note { border-color: var(--warn); }
.bug-manage > .btn { justify-self: stretch; margin-top: .4rem; }
.bug-quick { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.bug-quick .quick-fixed { border-color: var(--ok-border); color: var(--ok); }
.bug-internal { margin: .1rem 0 .3rem; }
.bug-reporter p { margin: 0 0 .25rem; }
@media (max-width: 1000px) { .bug-admin { grid-template-columns: 1fr; } .bug-admin-side { position: static; } }
.bug-table-title { font-weight: 500; }
.bug-table tr.is-new .bug-table-title { font-weight: 700; }

.feedback-form { display: grid; gap: .4rem; max-width: 760px; }
.feedback-form > .btn { justify-self: start; }
.category-choices { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .3rem; }
.category-choice { margin: 0; cursor: pointer; }
.category-choice input { position: absolute; opacity: 0; pointer-events: none; }
.category-choice > span { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border: 1.5px solid var(--border); border-radius: 99px; font-size: .88rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-2); margin: 0; }
.category-choice > span svg { width: 17px; height: 17px; }
.category-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.category-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedback-bug-hint { margin: 0 0 .8rem; }
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; flex-shrink: 0; background: var(--muted); }
.cat-dot.cat-idea { background: #eab308; }
.cat-dot.cat-praise { background: #ec4899; }
.cat-dot.cat-problem { background: var(--danger); }
.cat-dot.cat-question { background: var(--accent); }

.chat { display: grid; gap: .7rem; margin: 1rem 0; }
.chat-message { max-width: min(680px, 88%); padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.chat-message.mine { margin-left: auto; border-color: var(--accent-border, var(--accent)); background: var(--accent-soft); border-bottom-right-radius: 4px; }
.chat-message.from-team, .chat-message.from-user { border-bottom-left-radius: 4px; }

.inbox { display: grid; grid-template-columns: 190px minmax(260px, 360px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.inbox-boxes { display: grid; gap: .1rem; position: sticky; top: 76px; }
.inbox-boxes a { display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; border-radius: 8px; color: var(--text-2); font-size: .9rem; text-decoration: none; }
.inbox-boxes a:hover { background: var(--surface-2); text-decoration: none; }
.inbox-boxes a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.inbox-count { margin-left: auto; font-size: .76rem; font-weight: 700; }
.inbox-label { margin: .9rem .65rem .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.inbox-list { padding: 0; overflow: hidden; }
.inbox-search { padding: .6rem; border-bottom: 1px solid var(--border-soft); }
.inbox-list ul { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 220px); overflow: auto; }
.inbox-list li { border-bottom: 1px solid var(--border-soft); }
.inbox-list li a { display: flex; gap: .6rem; padding: .7rem .8rem; color: var(--text); text-decoration: none; }
.inbox-list li a:hover { background: var(--surface-2); text-decoration: none; }
.inbox-list li.current a { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.inbox-list .avatar { width: 32px; height: 32px; flex-shrink: 0; }
.inbox-item { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.inbox-item-top { display: flex; align-items: baseline; gap: .35rem; font-size: .86rem; }
.inbox-item-top strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item-top time { margin-left: auto; font-size: .74rem; white-space: nowrap; }
.inbox-star { color: #eab308; }
.inbox-subject { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-snippet { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list li.unread .inbox-item-top strong, .inbox-list li.unread .inbox-subject { font-weight: 700; }
.inbox-list li.unread a { box-shadow: inset 3px 0 0 var(--accent); }
.inbox-thread { min-height: 300px; }
.inbox-pick { display: grid; justify-items: center; gap: .5rem; padding: 4rem 1rem; color: var(--muted); }
.inbox-pick svg { width: 40px; height: 40px; opacity: .5; }
.inbox-thread-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border-soft); }
.inbox-thread-head h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.inbox-thread-head > div:first-of-type { flex: 1; min-width: 0; }
.inbox-thread-head p { margin: 0; }
.inbox-back { display: none; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.inbox-actions form { margin: 0; }
.inbox-chat .chat-message { max-width: 92%; }
.inbox-reply { display: grid; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.inbox-reply-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
@media (max-width: 1100px) {
    .inbox { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
    .inbox-boxes { grid-column: 1 / -1; position: static; display: flex; flex-wrap: wrap; gap: .25rem; }
    .inbox-label { display: none; }
}
@media (max-width: 760px) {
    .inbox { grid-template-columns: 1fr; }
    .inbox.has-thread .inbox-list, .inbox.has-thread .inbox-boxes { display: none; }
    .inbox:not(.has-thread) .inbox-thread { display: none; }
    .inbox-back { display: inline-flex; }
    .inbox-list ul { max-height: none; }
}

.survey-form { max-width: 820px; }
.survey-progress { position: sticky; top: 62px; z-index: 5; height: 6px; margin-bottom: 1rem; border-radius: 99px; background: var(--border-soft); overflow: hidden; }
.survey-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .25s; }
.survey-group h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.survey-group > p { margin: 0 0 .8rem; }
.survey-question { margin: 0; padding: 1rem 0; border: 0; box-shadow: inset 0 1px 0 var(--border-soft); min-width: 0; }
.survey-group > .survey-question:first-of-type, .survey-group h2 + .survey-question, .survey-group p + .survey-question { box-shadow: none; }
.survey-question legend { display: flex; gap: .5rem; align-items: baseline; padding: 0; margin-bottom: .55rem; font-weight: 600; font-size: .98rem; line-height: 1.4; }
.survey-question legend + p { margin: -.3rem 0 .6rem; }
.survey-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .3rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: .76rem; font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.survey-question.is-answered .survey-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.survey-required { color: var(--danger); }
.survey-question.has-error { padding-left: .8rem; box-shadow: inset 3px 0 0 var(--danger); }
.survey-error { margin: .4rem 0 0; color: var(--danger); font-size: .85rem; }
.survey-choices { display: grid; gap: .35rem; }
.survey-choices.inline { display: flex; flex-wrap: wrap; gap: .5rem; }
.survey-choice { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .8rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.survey-choice input { width: auto; margin: 0; accent-color: var(--accent); }
.survey-choice span { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--text); }
.survey-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.survey-scale { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.survey-scale-label { font-size: .82rem; color: var(--muted); }
.survey-scale-points { display: flex; gap: .3rem; flex-wrap: wrap; }
.survey-scale-points label { margin: 0; cursor: pointer; }
.survey-scale-points input { position: absolute; opacity: 0; pointer-events: none; }
.survey-scale-points span { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--border); border-radius: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text); margin: 0; }
.survey-scale-points input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.survey-scale-points input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.survey-number, .survey-date { max-width: 220px; }
.survey-submit { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .8rem 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }

.survey-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
.survey-card { display: grid; gap: .3rem; align-content: start; margin: 0; }
.survey-card header { display: grid; gap: .4rem; justify-items: start; }
.survey-card h2 { margin: 0; font-size: 1.05rem; }
.survey-card h2 a { color: var(--text); }
.survey-card p { margin: 0; }
.survey-meter { height: 8px; border-radius: 99px; background: var(--border-soft); overflow: hidden; margin-top: .4rem; }
.survey-meter span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.survey-card .card-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.survey-card .card-actions form { margin: 0; }

.survey-builder { max-width: 900px; display: grid; gap: 1rem; }
.survey-builder > .card { margin: 0; }
.survey-settings h2 { margin: 0 0 .8rem; font-size: 1rem; }
.survey-audience { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; gap: .35rem; }
.survey-audience legend { font-size: .74rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: .3rem; padding: 0; }
.survey-users { margin-top: .3rem; }
.survey-sections { display: grid; gap: 1rem; }
.builder-section { display: grid; gap: .5rem; margin: 0; border-top: 4px solid var(--accent); }
.builder-section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.builder-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.builder-section-title { font-size: 1.05rem; font-weight: 600; }
.builder-section-desc { min-height: 2.2rem; }
.builder-questions { display: grid; gap: .6rem; margin: .3rem 0 .4rem; }
.builder-question { display: grid; gap: .45rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.builder-question:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.builder-question-head { display: flex; align-items: center; gap: .5rem; }
.builder-question-head select { width: auto; min-width: 190px; }
.builder-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.builder-tools { display: inline-flex; gap: .2rem; margin-left: auto; }
.builder-icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font: inherit; font-size: .85rem; cursor: pointer; }
.builder-icon:hover { border-color: var(--accent); color: var(--accent); }
.builder-icon.danger:hover { border-color: var(--danger); color: var(--danger); }
.builder-icon.small { width: 26px; height: 26px; font-size: .8rem; }
.builder-question-label { font-weight: 500; }
.builder-help { font-size: .85rem; }
.builder-options { display: grid; gap: .35rem; }
.builder-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.builder-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.builder-choices li { display: flex; align-items: center; gap: .45rem; }
.builder-choices input { flex: 1; }
.builder-choice-mark { width: 14px; height: 14px; border: 2px solid var(--border-strong, var(--border)); flex-shrink: 0; }
.builder-choice-mark.radio { border-radius: 50%; }
.builder-choice-mark.checkbox { border-radius: 3px; }
.builder-choice-mark.select { border: 0; width: auto; height: auto; }
.builder-choice-mark.select::before { content: '▸'; color: var(--muted); }
.builder-options > .btn { justify-self: start; }
.builder-scale { grid-template-columns: auto auto 1fr 1fr; align-items: end; gap: .5rem; }
.builder-scale label { margin: 0; }
.builder-scale select { width: auto; }
.builder-required { margin: 0; }
.builder-empty { margin: .2rem 0; }
.survey-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); }
.survey-savebar [data-survey-state] { margin-right: auto; }
.survey-save-error { flex-basis: 100%; margin: 0; color: var(--danger); font-size: .86rem; text-align: right; }
@media (max-width: 640px) { .builder-scale { grid-template-columns: 1fr 1fr; } .builder-question-head select { min-width: 0; flex: 1; } }

.results-group { margin: 1.4rem 0 .6rem; font-size: 1.05rem; }
.result-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.result-card h3 { margin: 0; font-size: 1rem; flex: 1; min-width: 200px; }
.result-average { margin: 0 0 .6rem; }
.result-average strong { font-size: 1.6rem; color: var(--accent); }
.result-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.result-bars li { display: grid; grid-template-columns: minmax(90px, 220px) 1fr auto; align-items: center; gap: .7rem; font-size: .9rem; }
.result-label { overflow-wrap: anywhere; }
.result-bar { height: 12px; border-radius: 99px; background: var(--border-soft); overflow: hidden; }
.result-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; min-width: 2px; }
.result-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 360px; overflow: auto; }
.result-texts li { padding: .55rem .75rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.result-texts p { margin: 0 0 .2rem; overflow-wrap: anywhere; }

.entry-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.entry-list li { padding: .2rem .55rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-soft); font-size: .84rem; }
.danger-zone { margin-top: 1rem; text-align: right; }

@media (max-width: 760px) {
    .winner-list li { grid-template-columns: 1fr; }
}
.sec-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; font-size: .9rem; line-height: 1.55; color: var(--text-2); }

.prize-safety {
    display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem .9rem;
    border-radius: 10px; background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-ink); font-size: .88rem;
}
.prize-safety > svg { flex: none; margin-top: .1rem; color: var(--ok); }
.prize-safety p { margin: 0; line-height: 1.5; }
.prize-safety .card-actions { margin-top: .6rem; }
.prize-safety .card-actions form { margin: 0; }
.prize-safety.pending { background: var(--accent-soft); border-color: var(--accent-border); color: var(--text-2); }
.prize-safety.pending > svg { color: var(--accent); }
.prize-safety .flash { margin: .6rem 0 0; }
.finish-hint { margin-top: 1rem; }
.badge.giveaway-status-finished { color: var(--muted); }

.nudge {
    display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; padding: 1.1rem 1.25rem;
    border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border);
    animation: rise-in .35s var(--ease-out) both;
}
.nudge.nudge-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.nudge-icon { font-size: 1.9rem; line-height: 1; flex: none; margin-top: .1rem; }
.nudge h2 { margin: 0 0 .3rem; font-size: 1rem; }
.nudge p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.nudge .card-actions { margin-top: .8rem; }
.nudge .card-actions form { margin: 0; }
.nudge .flash { margin: .8rem 0 0; }
.badge.twitch-cat { border-color: rgba(145, 70, 255, .35); background: rgba(145, 70, 255, .08); color: #7c3aed; }
[data-theme="dark"] .badge.twitch-cat, [data-theme="midnight"] .badge.twitch-cat, [data-theme="ember"] .badge.twitch-cat, [data-theme="kelp"] .badge.twitch-cat,
[data-theme="violet"] .badge.twitch-cat, [data-theme="dim"] .badge.twitch-cat, [data-theme="harbour"] .badge.twitch-cat { color: #c4b5fd; }

.input-suffix { display: flex; align-items: center; gap: .5rem; }
.input-suffix input { max-width: 8rem; }
.prefix-rows { display: grid; gap: .4rem; margin-bottom: .5rem; max-width: 520px; }
.prefix-row { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; }
.prefix-default { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.prefix-default input { width: auto; margin: 0; }
.affix-kind { display: inline-flex; padding: .15rem; border-radius: 7px; background: var(--border-soft); }
.affix-kind label { margin: 0; cursor: pointer; }
.affix-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.affix-kind span { display: block; padding: .2rem .55rem; border-radius: 5px; font-size: .78rem; color: var(--muted); white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; }
.affix-kind input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.affix-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.prefix-option.is-suffix { border-style: dashed; }
.title-prefix-row { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .5rem; align-items: start; }
.planner-bar { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span { display: inline-flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--surface-2); color: var(--muted); font-family: ui-monospace, monospace; }
.input-prefix input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bot-command { margin-bottom: 1rem; }
.bot-command h3 { margin: 0; font-size: 1rem; }
.bot-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.bot-log li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .3rem .5rem; border-radius: var(--radius); }
.bot-log time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bot-log .level-warn { background: var(--warn-bg); }
.bot-log .level-error { background: var(--danger-bg); }
.notice { padding: .6rem .8rem; border: 1px solid var(--warn-border); border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); }
.bot-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin: .75rem 0; }
.bot-way { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.bot-way.done { border-color: var(--ok-border, var(--border)); }
.bot-way h3 { margin: 0 0 .35rem; font-size: .95rem; }
.bot-way p { margin: 0 0 .6rem; }
.bot-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.bot-tabs a { padding: .5rem .9rem; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; margin-bottom: -1px; }
.bot-tabs a:hover { color: var(--text); }
.bot-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.page-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1.1rem; border-bottom: 1px solid var(--border); }
.page-tabs button {
    padding: .55rem 1rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
    color: var(--muted); font: inherit; font-weight: 500; cursor: pointer;
}
.page-tabs button:hover { color: var(--text); }
.page-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
[data-tab-panel][hidden] { display: none !important; }
.bot-reply { max-width: 32rem; overflow-wrap: anywhere; }
td.nowrap { white-space: nowrap; }

.notify { position: relative; flex-shrink: 0; margin-left: auto; }
.notify + .usermenu { margin-left: .35rem; }
.notify-button {
    position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
    background: none; border: 1px solid transparent; color: var(--text-2); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.notify-button svg { width: 21px; height: 21px; }
.notify-button:hover, .notify-button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.notify-count {
    position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center; font-size: .68rem; font-weight: 700; line-height: 1;
    background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface);
}
.notify-count[hidden] { display: none; }
.notify-panel {
    position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60;
    width: min(380px, calc(100vw - 24px)); max-height: min(560px, 75vh); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(var(--shadow-rgb), .2);
    animation: drop-in .16s var(--ease-out); overflow: hidden;
}
.notify-panel[hidden] { display: none; }
.notify-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .9rem; border-bottom: 1px solid var(--border-soft); }
.notify-loading { display: grid; place-items: center; padding: 2rem; }
.notify-list { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; }
.notify-all { display: block; padding: .65rem; text-align: center; font-size: .85rem; border-top: 1px solid var(--border-soft); }
.notify-empty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.notify-empty svg { width: 34px; height: 34px; opacity: .6; }
.notify-empty p { margin: 0; }
.link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: .82rem; cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.note { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .7rem; border-radius: 10px; color: var(--text); text-decoration: none; }
a.note:hover { background: var(--surface-2); text-decoration: none; }
.note.unread { background: var(--accent-soft); }
a.note.unread:hover { background: var(--accent-soft); filter: brightness(.98); }
.note-icon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.note-icon svg { width: 19px; height: 19px; }
.note-icon.level-info { background: var(--accent-soft); color: var(--accent); }
.note-icon.level-news { background: var(--ok-bg); color: var(--ok); }
.note-icon.level-success { background: var(--ok-bg); color: var(--ok); }
.note-icon.level-warning { background: var(--warn-bg); color: var(--warn); }
.note-icon.level-news svg { transform: rotate(-8deg); }
.note-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.note-text strong { font-size: .92rem; line-height: 1.3; }
.note-body { font-size: .84rem; color: var(--text-2); overflow-wrap: anywhere; }
.note-text time { font-size: .74rem; color: var(--muted); }
.note-dot { position: absolute; top: .9rem; right: .8rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.note-page { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.note-page .note.card { padding: 1rem 1.1rem; margin: 0; }
.note-page .note-text strong { font-size: 1rem; }
.note-page .note-body { font-size: .92rem; line-height: 1.55; }
.note-page .note-link { margin-left: auto; align-self: center; flex-shrink: 0; }
.note-page.sent .note { flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: .9rem .2rem; }
.note-page.sent .note:last-child { border-bottom: 0; }
.note-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-left: calc(34px + .7rem); }
.note-meta form { margin-left: auto; }
.notify-page-empty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; color: var(--muted); }
.notify-page-empty svg { width: 46px; height: 46px; opacity: .55; }

.note-body.rich { display: block; }
.note-body.rich > * { margin: 0 0 .5rem; }
.note-body.rich > :last-child { margin-bottom: 0; }
.note-body.rich h4 { font-size: .98rem; color: var(--text); margin-top: .2rem; }
.note-body.rich ul, .note-body.rich ol { padding-left: 1.3rem; }
.note-body.rich ul { list-style: disc; }
.note-body.rich ol { list-style: decimal; }
.note-body.rich li + li { margin-top: .15rem; }
.note-body.rich strong { color: var(--text); font-size: inherit; }
.note-body.rich blockquote { padding: .35rem .8rem; border-left: 3px solid var(--accent); background: var(--surface-2, var(--bg)); border-radius: 0 6px 6px 0; }
.note-body.rich code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; padding: .05rem .3rem; border-radius: 4px; background: var(--surface-2, var(--bg)); border: 1px solid var(--border-soft); }
.note-body.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.rich-field { margin-bottom: .9rem; }
.rich-field .field-label { display: block; font-size: .74rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: .3rem; }
.rich-field .field-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .3rem; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-2, var(--bg)); }
.rich-tool { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: .92rem; cursor: pointer; }
.rich-tool:hover, .rich-tool:focus-visible { background: var(--accent-soft, var(--border-soft)); color: var(--text); }
.rich-tool:disabled { opacity: .4; cursor: default; background: none; }
.rich-tabs { margin-left: auto; display: inline-flex; gap: .1rem; padding: .15rem; border-radius: 7px; background: var(--border-soft); }
.rich-tabs button { padding: .2rem .65rem; border: 0; border-radius: 5px; background: none; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.rich-tabs button.active { background: var(--surface, #fff); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.rich-field textarea, .rich-preview { display: block; width: 100%; border-radius: 0 0 8px 8px; }
.rich-field textarea { resize: vertical; line-height: 1.5; }
.rich-preview { min-height: 9.4rem; padding: .6rem .75rem; border: 1px solid var(--border); background: var(--surface, #fff); font-size: .92rem; line-height: 1.55; }
.rich-preview:empty::before { content: attr(data-empty); color: var(--muted); }
.rich-field [hidden] { display: none; }
.rich-hint { display: block; margin-top: .3rem; font-size: .76rem; }
.rich-hint code { font-size: .74rem; }

.lang-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
.lang-tabs button { padding: .5rem .9rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.lang-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.lang-filled { color: var(--ok); margin-left: .25rem; }
.note-levels, .note-audience { border: 0; padding: 0; margin: 0; }
.note-levels legend, .note-audience legend { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .4rem; }
.note-levels { display: flex; flex-wrap: wrap; gap: .4rem; }
.note-level { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.note-level span { text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 500; color: var(--text); margin: 0; }
.note-audience label.inline { margin-right: 1.2rem; display: inline-flex; }
.notify-compose { display: grid; gap: .9rem; }
.notify-compose .lang-panel { display: grid; gap: .7rem; }
.notify-compose .lang-panel[hidden] { display: none; }
.note-level input { width: auto; margin: 0; }
.note-level:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.note-users { margin-top: .5rem; max-width: 560px; }
.note-users[hidden] { display: none; }
.center { text-align: center; }
.note-levels { align-items: center; align-content: flex-start; }
.note-level { height: auto; align-self: center; line-height: 1.2; }
.notify-compose > button[type="submit"] { justify-self: start; }

.help-link {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
    color: var(--accent); background: var(--accent-soft); border: 1px solid transparent;
    transition: border-color .15s, transform .15s var(--ease-out);
}
.help-link:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.page-head .help-link, .dash-head .help-link { align-self: center; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.help-badge { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.help-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.help .sec-hero { margin-bottom: 1.5rem; }
.help-step {
    display: grid; grid-template-columns: 220px 1fr; gap: 1.4rem; align-items: center;
    padding: 1.1rem; margin-bottom: .9rem; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border-soft);
}
.help-step.flip { grid-template-columns: 1fr 220px; }
.help-step.flip .help-art { order: 2; }
.help-art { margin: 0; border-radius: 10px; background: var(--surface-2); padding: .5rem; }
.help-art .ha { display: block; width: 100%; height: auto; }
.help-words { position: relative; }
.help-words h2 { margin: 0 0 .4rem; font-size: 1.02rem; }
.help-words p { margin: 0; color: var(--text-2); line-height: 1.6; font-size: .92rem; }
.help-num {
    display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: .45rem;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 700;
}
.help-points { margin: .55rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; line-height: 1.5; color: var(--text-2); }
.help-tips { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--accent-soft); }
.help-tips h2 { margin: 0 0 .5rem; color: var(--accent); }
.help-tips ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; line-height: 1.55; font-size: .9rem; }
@media (max-width: 640px) {
    .help-step, .help-step.flip { grid-template-columns: 1fr; }
    .help-step.flip .help-art { order: 0; }
    .help-art { max-width: 320px; }
}

.ha .ha-panel { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.ha .ha-bg { fill: var(--surface-2); stroke: var(--border-soft); stroke-width: 1; }
.ha .ha-line { fill: var(--border); }
.ha .ha-text { fill: var(--muted); opacity: .55; }
.ha .ha-accent { fill: var(--accent); }
.ha .ha-accent-dark { fill: var(--accent-dark); }
.ha .ha-soft { fill: var(--accent-soft); }
.ha .ha-ok { fill: var(--ok); }
.ha .ha-okbg { fill: var(--ok-bg); }
.ha .ha-warn, .ha .ha-warn-fill { fill: var(--warn); }
.ha .ha-warnbg { fill: var(--warn-bg); }
.ha .ha-danger { fill: var(--danger); }
.ha .ha-dangerbg { fill: var(--danger-bg); }
.ha .ha-twitch { fill: #9146ff; }
.ha .ha-twitchbg { fill: rgba(145, 70, 255, .16); }
.ha .ha-white-fill { fill: var(--surface); }
.ha [class*="ha-stroke"] { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha .ha-stroke { stroke: var(--muted); }
.ha .ha-stroke-accent { stroke: var(--accent); }
.ha .ha-stroke-white { stroke: var(--surface); }
.ha .ha-stroke-ok { stroke: var(--ok); }
.ha .ha-stroke-danger { stroke: var(--danger); }
.ha .ha-stroke-twitch { stroke: #9146ff; }
.ha .ha-stroke-dash { stroke: var(--muted); stroke-dasharray: 4 4; opacity: .7; }
.ha .ha-stroke-accent-dash { stroke: var(--accent); stroke-dasharray: 5 5; }
.ha .ha-danger-ring { fill: none; stroke: var(--danger); stroke-width: 2; }

.prefix-row { grid-template-columns: auto 1fr auto auto auto; }
.counter-rows { display: grid; gap: .4rem; margin-bottom: .5rem; max-width: 520px; }
.counter-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; }
.counter-name { display: flex; align-items: center; gap: .15rem; font-family: ui-monospace, monospace; color: var(--muted); }
.counter-name input { font-family: ui-monospace, monospace; }
.counter-value { display: flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
.counter-value span { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 500; color: var(--muted); margin: 0; }
.counter-value input { width: 7rem; }


.title-block { flex: 1 1 100%; grid-column: 1 / -1; margin-bottom: .6rem; }
.title-editor-wrap { display: grid; gap: .35rem; }
.title-editor { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.title-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.title-editor-wrap.over .title-editor { border-color: var(--danger); }
.title-highlight, .title-editor .title-input {
    margin: 0; border: 0; padding: .6rem .75rem;
    font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: .92rem; line-height: 1.6; letter-spacing: 0; tab-size: 4;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.title-highlight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--text); }
.title-editor .title-input {
    position: relative; display: block; width: 100%; min-height: calc(1.6em + 1.2rem);
    background: transparent; color: transparent; caret-color: var(--text);
    resize: none; overflow: hidden; box-shadow: none; outline: none;
}
.title-editor .title-input::placeholder { color: var(--muted); }
.title-editor .title-input::selection { background: rgba(120, 160, 255, .35); color: transparent; }
.title-highlight span { border-radius: 3px; }
.tok-prefix { color: var(--accent); background: var(--accent-soft); }
.tok-counter { color: var(--warn); background: var(--warn-bg); }
.tok-collab { color: #9a5cff; background: rgba(145, 70, 255, .14); }
.tok-devpub { color: var(--ok); background: var(--ok-bg); }
.tok-sponsor { color: #d6409f; background: rgba(214, 64, 159, .13); }
.tok-suffix { color: var(--accent); background: none; box-shadow: inset 0 -2px 0 var(--accent-border); }
.tok-game { color: #0e9fb3; background: rgba(14, 159, 179, .14); }
.tok-text { color: var(--text); }
.title-editor-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.title-prefix-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.title-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; font-size: .78rem; color: var(--muted); }
.title-hint .tok-counter { font-family: ui-monospace, monospace; padding: 0 .3rem; border-radius: 4px; }
.title-hint .tok-counter.undated { border: 1px dashed var(--warn-border); cursor: help; }
.title-count { font-variant-numeric: tabular-nums; }
.title-count.over { color: var(--danger); font-weight: 600; }
.title-order { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.title-order-hint { font-size: .72rem; }
.title-legend { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .72rem; }
.title-legend li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem .15rem .4rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600;
    cursor: grab; user-select: none; transition: border-color .15s, transform .1s, opacity .15s;
}
.title-legend li::before { content: ""; width: .65rem; height: .65rem; border-radius: 3px; background: currentColor; }
.title-legend li.tok-text::before { background: var(--muted); }
.title-legend li:hover, .title-legend li:focus-visible { border-color: currentColor; outline: none; }
.title-legend li.dragging { opacity: .45; cursor: grabbing; }

.content-form .form-section {
    margin: 0 0 1rem; padding: .9rem 1rem .2rem; border: 1px solid var(--border-soft); border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}
.content-form .form-section > legend {
    padding: 0 .4rem; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.content-form .form-section .title-block { margin-bottom: .9rem; }
.content-form .form-section fieldset.inset { background: var(--surface); }
.when-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
.when-grid > label { min-width: 0; }
.content-form label > .duration-field, .content-form label > .input-with-action { margin: 0; color: inherit; font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; }
.input-with-action, .duration-field {
    display: flex; align-items: stretch; height: 40px; min-width: 0;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.input-with-action:hover, .duration-field:hover { border-color: var(--border-strong); }
.input-with-action:focus-within, .duration-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13); }
.input-with-action > input { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: none; box-shadow: none !important; }
.joined-action, .dur-step {
    flex: none; padding: 0 .75rem; border: 0; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
    color: var(--text-2); font: inherit; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.joined-action { border-left: 1px solid var(--border); }
.joined-action:hover, .dur-step:hover { background: var(--accent-soft); color: var(--accent); }
.joined-action:active, .dur-step:active { background: rgba(var(--accent-rgb), .22); }
.joined-action:focus-visible, .dur-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dur-step { padding: 0 .6rem; }
.dur-step + .dur-step { border-left: 1px solid var(--border-soft); }
.dur-step:nth-child(2) { border-right: 1px solid var(--border); }
.dur-value + .dur-step { border-left: 1px solid var(--border); }
.dur-value { flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 5.2rem; padding: 0 .5rem; }
.dur-value input {
    width: 3.4rem; min-width: 0; height: 100%; padding: 0; border: 0; background: none; box-shadow: none !important;
    color: var(--text); font-size: .95rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield;
}
.dur-value input::-webkit-outer-spin-button, .dur-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dur-unit { color: var(--muted); font-size: .74rem; font-weight: 600; }
.dur-human { display: block; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.when-end input:disabled { opacity: .55; }
@media (max-width: 560px) {
    .when-grid { grid-template-columns: 1fr; }
    .content-form .form-section { padding: .8rem .75rem .1rem; }
}
.prefix-option {
    padding: .18rem .6rem; border-radius: 999px; border: 1px dashed var(--border-strong); background: none;
    color: var(--text-2); font: inherit; font-size: .8rem; cursor: pointer;
}
.prefix-option:hover { border-color: var(--accent); color: var(--accent); }
.collab-prefix .collab-prefix-example { text-transform: none; letter-spacing: 0; font-weight: 500; font-family: ui-monospace, monospace; color: #9a5cff; }
.collab-prefix input { max-width: 10rem; }

.page-head-actions { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.together-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.together-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem .75rem; border: 1px solid var(--border-soft); border-radius: 10px; }
.together-list li.needs-you { border-color: var(--warn-border); background: var(--warn-bg); }
.together-link { display: flex; flex-direction: column; flex: 1 1 14rem; min-width: 0; color: var(--text); text-decoration: none; }
.together-link:hover strong { text-decoration: underline; }
.together-time { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .88rem; }
.together-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-color: var(--accent); background: var(--accent-soft); }
.together-invite h2 { margin: 0 0 .3rem; }
.together-invite p { margin: 0; }
.together-badge { text-decoration: none; }
.together-note { margin: 0 0 .6rem; flex-basis: 100%; }
.fc-event.is-together { box-shadow: inset 3px 0 0 #9a5cff; }
@keyframes spin { to { transform: rotate(360deg); } }
.bug-manage [hidden], .survey-builder [hidden], .inbox [hidden] { display: none !important; }
.survey-builder > *, .survey-audience, .survey-settings .grid > * { min-width: 0; }
.survey-sections > *, .builder-questions > *, .builder-question > *, .builder-options > * { min-width: 0; }
@media (max-width: 640px) { .builder-question-head { flex-wrap: wrap; } .builder-question-head select { order: 3; flex-basis: 100%; } .builder-scale { grid-template-columns: 1fr 1fr; } }
.survey-question legend { float: left; width: 100%; }
.survey-question legend + * { clear: both; }
.survey-langbar { position: sticky; top: 62px; z-index: 6; display: flex; flex-wrap: wrap; gap: .3rem; padding: .35rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .05); }
.survey-langbar button { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: .9rem; cursor: pointer; }
.survey-langbar button:hover { background: var(--surface-2); }
.survey-langbar button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lang-count { min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-size: .72rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.lang-count.missing { background: var(--warn-bg); color: var(--warn); }
.survey-lang-hint { margin: -.4rem 0 0; }
.survey-builder .untranslated { border-color: var(--warn-border); background: var(--warn-bg); }
.survey-builder .untranslated::placeholder { color: var(--warn); opacity: .85; font-style: italic; }
.survey-langs { display: flex; flex-wrap: wrap; gap: .25rem; }
.err-page { display: grid; place-items: center; min-height: calc(100vh - 220px); padding: 2rem 0; }
.err-card { width: min(560px, 100%); padding: 2.4rem 2rem 2rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 18px 50px rgba(var(--shadow-rgb, 0, 0, 0), .1); text-align: center; animation: rise-in .35s ease-out; }
.err-art { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 1rem; }
.err-code { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent); opacity: .09; user-select: none; }
.err-art svg { position: relative; width: 112px; height: 112px; padding: 14px; border-radius: 50%; background: var(--accent-soft); }
.err-art .err-line { stroke: var(--text-2); stroke-width: 5; }
.err-art .err-accent { stroke: var(--accent); stroke-width: 6; }
.err-art .err-accent-fill { fill: var(--accent); }
.err-art .err-spark { stroke: var(--warn); stroke-width: 4; }
.err-500 .err-art svg { background: var(--danger-bg); }
.err-500 .err-art .err-accent { stroke: var(--danger); }
.err-500 .err-code { color: var(--danger); }
.err-403 .err-art svg, .err-419 .err-art svg { background: var(--warn-bg); }
.err-403 .err-art .err-accent, .err-419 .err-art .err-accent { stroke: var(--warn); }
.err-403 .err-art .err-accent-fill { fill: var(--warn); }
.err-card h1 { margin: 0 0 .5rem; font-size: 1.55rem; }
.err-text { margin: 0 auto 1.4rem; max-width: 420px; color: var(--text-2); line-height: 1.55; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.err-actions [hidden] { display: none; }
.err-help { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border-soft); display: grid; gap: .55rem; justify-items: center; }
.err-help p { margin: 0; font-size: .9rem; color: var(--muted); }
.err-report { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1.5px dashed var(--danger-border); border-radius: 99px; color: var(--danger); font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
.err-report:hover { background: var(--danger-bg); border-color: var(--danger); text-decoration: none; }
.err-report svg { width: 18px; height: 18px; }
.err-ref { font-size: .8rem !important; }
.err-ref code { padding: .05rem .35rem; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border-soft); }
.bug-from-error { max-width: 820px; margin-bottom: 1rem; }
.bug-linked-error { border-left: 4px solid var(--danger); }
.bug-linked-error h2 { margin: 0 0 .3rem; font-size: 1rem; }
.bug-linked-error p { margin: 0 0 .6rem; }
@media (max-width: 600px) { .err-card { padding: 1.8rem 1.2rem 1.5rem; } .err-code { font-size: 5.5rem; } }
.badge.on-streamorg { border-color: var(--accent-border, var(--accent)); background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.badge.on-streamorg::before { content: '●'; margin-right: .3rem; font-size: .6em; vertical-align: .15em; }
.cast-add { margin: .2rem 0 .6rem; }
.cast-add-panel { margin-top: .5rem; padding: .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); display: grid; gap: .5rem; }
.cast-add-panel[hidden] { display: none; }
.cast-add-results { display: grid; gap: .3rem; max-height: 300px; overflow: auto; }
.cast-add-result { display: flex; align-items: center; gap: .6rem; padding: .35rem .45rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border-soft); }
.cast-add-result img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--border-soft); }
.cast-add-name { flex: 1; min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.cast-add-result.done { border-color: var(--ok-border); background: var(--ok-bg); }
.cast-row.just-added { animation: rise-in .3s ease-out; }
.cast-name .badge { font-size: .66rem; margin-left: .2rem; }
.badge[hidden] { display: none !important; }
.usermenu-version { margin: .35rem 0 0; padding: .45rem .75rem 0; border-top: 1px solid var(--border-soft); font-size: .72rem; color: var(--muted); text-align: right; }

.overlay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.overlay-list .card { margin: 0; }
.overlay-item .card-head { flex-wrap: wrap; gap: .4rem; justify-content: flex-start; }
.overlay-item .card-head h2 { flex: 1 1 100%; font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
.overlay-item .card-actions form { display: inline; }
.overlay-link { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; }
.overlay-link input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .8rem; }
.overlay-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; align-items: start; }
.overlay-editor .card { margin: 0 0 1rem; }
.overlay-side { position: sticky; top: 5rem; }
.overlay-form .overlay-field { margin-bottom: .9rem; }
.overlay-form .overlay-field label > small { display: block; margin-top: .25rem; }
.overlay-enabled { align-self: end; padding-bottom: .55rem; }
.overlay-roles { border: 0; padding: 0; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.overlay-roles legend { padding: 0; margin-bottom: .45rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); float: left; width: 100%; }
.overlay-roles label.inline { margin-bottom: .2rem; }
.overlay-form input[type="color"] { width: 5rem; height: 2.4rem; padding: .2rem; cursor: pointer; }
.overlay-roles legend + * { clear: both; }
.overlay-media-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; }
.overlay-media-pick > label { flex: 1 1 170px; margin: 0; }
.overlay-media-pick > label[hidden] { display: none; }
.overlay-media-pick input[type="range"] { width: 100%; padding: 0; }
.overlay-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: var(--checker, var(--surface-2)); }
.overlay-thumb[hidden] { display: none; }
.overlay-preview { position: relative; width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background-color: #20242c; background-image: linear-gradient(45deg, #2a2f39 25%, transparent 25%, transparent 75%, #2a2f39 75%), linear-gradient(45deg, #2a2f39 25%, transparent 25%, transparent 75%, #2a2f39 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.overlay-preview iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: transparent; color-scheme: normal; }
.media-drop { display: grid; gap: .2rem; justify-items: center; padding: 1.2rem; margin-bottom: .8rem; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.media-drop:hover, .media-drop:focus-visible, .media-drop.dragging { border-color: var(--accent); background: var(--accent-soft); color: var(--text); outline: none; }
.media-error { margin: 0 0 .8rem; color: var(--danger); font-size: .85rem; }
.media-error[hidden] { display: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; align-items: start; }
.media-item { display: grid; gap: .6rem; align-content: start; padding: .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.media-item.uploading { color: var(--muted); font-size: .85rem; animation: pulse 1.2s ease-in-out infinite; }
.media-item .card-actions { margin-top: 0; }
.media-head { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.media-thumb { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.media-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; }
.media-title { display: grid; gap: .2rem; min-width: 0; flex: 1; }
.media-title strong { overflow-wrap: anywhere; }
.media-title input { width: 100%; }
.media-audio { width: 100%; height: 36px; }
.media-segments summary { cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--text-2); }
.media-segments[open] summary { margin-bottom: .4rem; }
.media-segments p { margin: 0 0 .5rem; }
.segment-rows { display: grid; gap: .45rem; margin-bottom: .5rem; }
.segment-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; padding: .4rem; border-radius: 8px; background: var(--surface-2); }
.segment-row > input[type="text"] { flex: 1 1 100%; min-width: 0; }
.segment-time { display: inline-flex; align-items: center; gap: .2rem; }
.segment-time small { font-size: .72rem; }
.segment-time input { width: 5.2rem; }
.segment-row .btn.small { padding: .2rem .45rem; }
.segment-row.readonly { flex-wrap: nowrap; }
.segment-row.readonly span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
    .overlay-editor { grid-template-columns: minmax(0, 1fr); }
    .overlay-side { position: static; order: -1; }
}
.overlay-tests { display: grid; gap: .4rem; margin-top: 1rem; }
.overlay-test { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.overlay-test > span { flex: 1 1 8rem; font-size: .85rem; color: var(--text-2); }
.mode-switch { display: inline-flex; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-switch .btn { border: 0; border-radius: 0; }
.mode-switch .btn.active, .mode-switch .btn:disabled { background: var(--accent); color: var(--on-accent); opacity: 1; cursor: default; }
.code-field textarea { width: 100%; font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: .8rem; line-height: 1.45; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; resize: vertical; }
.ini-warnings { margin: -.4rem 0 1rem; padding: .6rem .8rem; border: 1px solid var(--warn-border); border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); font-size: .82rem; }
.ini-warnings[hidden] { display: none; }
.ini-warnings ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.css-reference { margin: -.4rem 0 1rem; font-size: .82rem; }
.css-reference summary { cursor: pointer; color: var(--text-2); }
.css-reference pre { margin: .5rem 0 0; padding: .7rem; border-radius: 8px; background: var(--surface-2); font-size: .76rem; white-space: pre-wrap; }
.bot-status { display: block; margin-top: .25rem; font-size: .76rem; color: var(--ok); }
.bot-status.off, .bot-status.unavailable { color: var(--warn); }
.overlay-rules { border: 0; padding: 0; margin: 0 0 .9rem; }
.overlay-rules legend { padding: 0; margin-bottom: .3rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); float: left; width: 100%; }
.overlay-rules legend + * { clear: both; }
.overlay-rules > small { display: block; margin-bottom: .5rem; }
.rule-rows { display: grid; gap: .6rem; margin-bottom: .6rem; }
.rule-rows:empty { display: none; }
.rule-row { display: grid; gap: .5rem; padding: .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rule-row > label { margin: 0; }
.rule-row .overlay-media-pick { margin: 0; }
.rule-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.form-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.form-tabs button { padding: .5rem .8rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text-2); font: inherit; font-size: .9rem; cursor: pointer; }
.form-tabs button:hover { color: var(--accent); }
.form-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.form-tabs .badge { margin-left: .25rem; }
[data-form-panel][hidden] { display: none; }
[data-form-panel="viewers"] .overlay-rules legend { display: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1rem; }
.chip-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.chip-filter .chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .82rem; text-decoration: none;
}
.chip-filter .chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip-filter .chip.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip-count { font-size: .7rem; padding: 0 .4rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.chip.active .chip-count { background: var(--surface); color: var(--accent); }
.events-table td { vertical-align: middle; }
.event-badge-follow, .event-badge-raid { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.event-badge-sub, .event-badge-resub, .event-badge-gift_sub, .event-badge-community_gift,
.event-badge-gift_upgrade, .event-badge-prime_upgrade { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.event-badge-cheer, .event-badge-bits_badge, .event-badge-charity { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.event-badge-unfollow { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.danger-text { color: var(--danger); }
.data-tabs small { margin-left: .2rem; }
.section-title { margin: 1.25rem 0 .6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.admin-tiles { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.admin-tiles .tile { color: inherit; text-decoration: none; }
.admin-tiles .tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.tile.tile-danger { border-left-color: var(--danger); }
.tile.tile-danger .tile-value { color: var(--danger); }
.tile.tile-warn { border-left-color: var(--warn); }
.tile.tile-warn .tile-value { color: var(--warn); }
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; }
.admin-columns .card { margin: 0; }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.admin-list li { min-width: 0; overflow-wrap: anywhere; }
.admin-list .badge { margin-right: .3rem; }
.admin-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.tile.tile-text .tile-value { font-size: 1.05rem; padding: .2rem 0 .15rem; overflow-wrap: anywhere; }
.admin-group { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.admin-group h3 { margin: 0 0 .4rem; font-size: .95rem; }
.admin-group a { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; color: var(--text-2); }
.admin-group a:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.page-head .page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.twitch-pick label[hidden] { display: none; }
.twitch-pick-chosen { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin-bottom: .5rem; border: 1px solid var(--accent-border, var(--border)); border-radius: 8px; background: var(--accent-soft); }
.twitch-pick-chosen[hidden] { display: none; }
.twitch-pick-chosen img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.twitch-pick-chosen img[hidden] { display: none; }
.twitch-pick-chosen span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.twitch-pick-option { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.twitch-pick-option:hover, .twitch-pick-option:focus-visible { background: var(--surface-2); }
.twitch-pick-results { margin-bottom: .4rem; }
.prize-group { margin: .5rem 0 .1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prize-group:first-child { margin-top: 0; }
.prize-option.is-marked { background: var(--accent-soft); border-left: 3px solid var(--accent); }

.undated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 27rem; overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.undated-row {
    --row-bg: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
    --art-w: 220px; --art-veil: 80%;
    display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .45rem .5rem .45rem .85rem;
    border-radius: 10px; background-color: var(--row-bg); transition: background-color .15s ease;
}
.undated-row:hover { --row-bg: var(--surface-2); }
.undated-row[data-row-art] {
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--row-bg) var(--art-veil), transparent), color-mix(in srgb, var(--row-bg) calc(var(--art-veil) + 9%), transparent) 50%, var(--row-bg)),
        var(--row-art);
    background-repeat: no-repeat;
    background-size: var(--art-w) 100%, var(--art-w) auto;
    background-position: 0 0, 0 center;
}
:is([data-theme="light"], [data-theme="contrast"], [data-theme="sepia"], [data-theme="moss"], [data-theme="blush"], [data-theme="coral-light"], [data-theme="harbour-light"]) .undated-row[data-row-art] { --art-veil: 72%; }
.undated-open {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; padding: 0; border: 0;
    background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.undated-open > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undated-game { color: var(--muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.undated-title { font-size: .86rem; font-weight: 600; }
.undated-open:hover .undated-title, .undated-open:focus-visible .undated-title { color: var(--accent); }
.undated-due { flex: none; font-size: .66rem; }
.undated-row.leaving { opacity: 0; transform: translateX(12px); transition: opacity .2s ease, transform .2s ease; }

tr.page-hidden { display: none !important; }
.list-more { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; color: var(--muted); font-size: .8rem; }
.list-more.done .btn { display: none; }
.hashtag-confirm { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }

.planner .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; gap: .6rem; }
.planner .fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.planner .fc .fc-button-group { gap: 0; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.planner .fc .fc-button-group > .fc-button { border: 0; border-radius: 8px !important; background: none; margin: 0; }
.planner .fc .fc-button-group > .fc-button:hover { background: var(--surface); }
.planner .fc .fc-button-group > .fc-button.fc-button-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .18); }
.planner .fc .fc-today-button { margin-left: .4rem !important; }
.planner .fc .fc-today-button:disabled { opacity: .45; }

.planner .fc .fc-scrollgrid { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.planner .fc-theme-standard td, .planner .fc-theme-standard th { border-color: var(--border-soft); }
.planner .fc .fc-scrollgrid-section > * { border-right: 0; border-bottom: 0; }
.planner .fc .fc-col-header { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.planner .fc .fc-col-header-cell { padding: .55rem 0; border-left: 0; border-right: 0; }
.planner .fc .fc-col-header-cell-cushion { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.planner .fc tbody tr:hover { background: none; }

.planner .fc .fc-daygrid-day { transition: background-color .15s ease; }
.planner .fc .fc-daygrid-day:hover { background-color: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.planner .fc .fc-daygrid-day.fc-day-sat, .planner .fc .fc-daygrid-day.fc-day-sun { background-color: color-mix(in srgb, var(--surface-2) 35%, transparent); }
.planner .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top { opacity: .4; }
.planner .fc .fc-daygrid-day-frame { min-height: 6.4rem; padding: .2rem .25rem .3rem; }
.planner .fc .fc-daygrid-day-top { flex-direction: row; justify-content: flex-start; }
.planner .fc .fc-daygrid-day-number {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem;
    margin: .15rem; border-radius: 999px; color: var(--text-2); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.planner .fc .fc-day-today { background-color: rgba(var(--accent-rgb), .06) !important; }
.planner .fc .fc-day-today .fc-daygrid-day-number { background: var(--accent); color: var(--on-accent); }
.planner .fc .fc-highlight { background: rgba(var(--accent-rgb), .14); }

.planner .fc .fc-daygrid-event-harness { margin: 0 .15rem .22rem; }
.planner .fc .fc-daygrid-more-link {
    display: inline-block; margin: .1rem .3rem; padding: .05rem .5rem; border-radius: 999px;
    background: var(--surface-2); color: var(--text-2); font-size: .7rem; font-weight: 700;
}
.planner .fc .fc-daygrid-more-link:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.planner .fc .fc-popover { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .28); }
.planner .fc .fc-popover-header { padding: .5rem .7rem; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .8rem; }
.planner .fc .fc-popover-body { padding: .45rem; }

.planner .fc .fc-timegrid-slot { height: 2.1em; border-color: var(--border-soft); }
.planner .fc .fc-timegrid-slot-minor { border-top-style: dashed; border-top-color: color-mix(in srgb, var(--border-soft) 60%, transparent); }
.planner .fc .fc-timegrid-slot-label-cushion, .planner .fc .fc-timegrid-axis-cushion { color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.planner .fc .fc-timegrid-col.fc-day-today { background-color: rgba(var(--accent-rgb), .045) !important; }
.planner .fc .fc-timegrid-now-indicator-line { border-color: var(--danger); border-width: 2px 0 0; }
.planner .fc .fc-timegrid-now-indicator-arrow { border-color: var(--danger); border-top-color: transparent; border-bottom-color: transparent; }
.planner .fc .fc-non-business { background: rgba(var(--shadow-rgb), .03); }

.planner .fc-event {
    --event-bar: var(--accent);
    cursor: grab; border: 0; border-radius: 8px; overflow: hidden; padding: 0;
    background: color-mix(in srgb, var(--event-bar) 18%, var(--surface)); color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-bar) 28%, transparent), 0 1px 2px rgba(var(--shadow-rgb), .12);
    transition: transform .12s var(--ease-out), box-shadow .15s;
}
.planner .fc-event:hover {
    background: color-mix(in srgb, var(--event-bar) 28%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-bar) 45%, transparent), 0 4px 14px rgba(var(--shadow-rgb), .25); transform: translateY(-1px);
}
.planner .fc-event .fc-event-main { color: inherit; padding: 0; }
.planner .fc-event.status-live { --event-bar: var(--ok); }
.planner .fc-event.status-done { --event-bar: var(--muted); opacity: .62; cursor: pointer; }
.planner .fc-event.status-cancelled { --event-bar: var(--muted); opacity: .5; cursor: pointer; }
.planner .fc-event.status-cancelled .planner-event-title { text-decoration: line-through; }
.planner .fc-event.has-warning { --event-bar: var(--danger); }
.planner .fc-event.is-together { --event-bar: #9a5cff; }
.planner .fc-event.fc-event-dragging { box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .35); }

.planner-event {
    position: relative; display: flex; align-items: flex-start; gap: .4rem; min-width: 0; height: 100%; overflow: hidden;
    padding: .3rem .45rem;
}
.planner-event::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: .3rem; border-radius: 50%; background: var(--event-bar); }
.planner-event.is-compact::before { margin-top: 0; align-self: center; }
.planner-event.is-compact { padding: .14rem .4rem; }
.planner-event-text { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.planner-event.is-compact .planner-event-text { flex-direction: row; align-items: baseline; gap: .35rem; }
.planner-event-time { flex: none; color: var(--text-2); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.planner-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: .78rem; }
.planner-event-games { color: var(--muted); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner .fc-timegrid-event .planner-event-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.planner .fc-event img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

.planner-backlog { padding: 1rem; border: 1px solid var(--border-soft); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
.planner-backlog h3 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 700; }
.planner-backlog .backlog-list { gap: .4rem; max-height: 620px; padding-right: .2rem; }
.backlog-item { cursor: grab; user-select: none; padding: .45rem .6rem .45rem .8rem; transition: background-color .15s, transform .15s var(--ease-out), box-shadow .15s; }
.backlog-item:hover { transform: translateX(2px); box-shadow: 0 3px 10px rgba(var(--shadow-rgb), .15); }
.backlog-item:active { cursor: grabbing; }
.backlog-item .undated-open { cursor: inherit; }
.fc-event-dragging .undated-row, .backlog-item.fc-event-dragging { box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .35); }

@media (max-width: 900px) {
    .planner-backlog { position: static; border-left: 1px solid var(--border-soft); padding: 1rem; }
}
@media (max-width: 600px) {
    .planner .fc .fc-daygrid-day-frame { min-height: 4.6rem; }
    .planner .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: stretch; }
    .planner .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
    .planner .fc .fc-daygrid-event-harness { margin: 0 .2rem .2rem; }
    .planner .fc .fc-daygrid-event { min-height: 7px; border-radius: 4px; box-shadow: inset 0 0 0 999px var(--event-bar); opacity: .85; }
    .planner-event.is-compact { padding: 0; height: 7px; }
    .planner-event.is-compact .planner-event-text,
    .planner-event.is-compact::before { display: none; }
    .planner .fc .fc-daygrid-more-link { margin: 0 .1rem; padding: 0 .3rem; font-size: .62rem; }
}
.together-hero {
    --row-bg: var(--surface); --art-w: 520px;
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem;
    padding: 1.4rem 1.5rem; min-height: 9.5rem; background-color: var(--surface);
}
.together-hero[data-row-art] {
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--row-bg) var(--hero-veil, 74%), transparent), color-mix(in srgb, var(--row-bg) 90%, transparent) 45%, var(--row-bg) 75%),
        var(--row-art);
    background-repeat: no-repeat; background-size: 100% 100%, var(--art-w) auto; background-position: 0 0, left center;
}
:is([data-theme="light"], [data-theme="contrast"], [data-theme="sepia"], [data-theme="moss"], [data-theme="blush"], [data-theme="coral-light"], [data-theme="harbour-light"]) .together-hero { --hero-veil: 80%; }
.together-hero-main { min-width: 0; flex: 1 1 20rem; }
.together-hero h1 { margin: .35rem 0 .45rem; font-size: 1.6rem; }
.together-back { color: var(--text-2); font-size: .8rem; font-weight: 600; text-decoration: none; }
.together-back:hover { color: var(--accent); }
.together-hero-when { margin: 0; font-size: 1.02rem; }
.together-hero-when strong::first-letter { text-transform: uppercase; }
.together-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.together-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.together-status { padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; cursor: help; }

.together-needs {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    border-color: var(--warn-border); background: color-mix(in srgb, var(--warn-bg) 70%, var(--surface));
}
.together-needs.is-waiting { border-color: var(--border); background: var(--surface); }
.together-needs-text { min-width: 0; flex: 1 1 22rem; }
.together-needs-label { color: var(--warn); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.together-needs.is-waiting .together-needs-label { color: var(--muted); }
.together-needs h2 { margin: .2rem 0 .35rem; font-size: 1.05rem; }
.together-needs p { margin: 0; }
.together-change { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0 .7rem !important; }
.together-old { color: var(--muted); text-decoration: line-through; }
.together-votes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.together-votes li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem .2rem .25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .8rem; }
.together-votes li.yes { border-color: var(--ok-border); }
.together-vote-mark { display: inline-flex; color: var(--muted); }
.together-vote-mark .icon { width: 14px; height: 14px; }
.together-votes li.yes .together-vote-mark { color: var(--ok); }

.together-section-title { margin: 1.4rem 0 .7rem; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.together-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; align-items: start; }
.plan-card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.plan-card.is-mine { border-color: var(--accent-border); }
.plan-card.state-declined, .plan-card.state-left { opacity: .6; }
.plan-card.state-invited .plan-card-art { filter: grayscale(.8); opacity: .6; }
.plan-card-art { display: block; width: 100%; aspect-ratio: 460 / 160; object-fit: cover; background: var(--surface-2); }
.plan-card-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem .2rem; min-width: 0; }
.plan-card-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plan-card-who strong, .plan-card-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.plan-card-body { padding: .5rem 1rem .9rem; min-width: 0; }
.plan-card-game { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-card-title { margin: .25rem 0 0; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.plan-card-empty { margin: 0; padding: .5rem 1rem 1rem; font-size: .85rem; }
.plan-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding: .7rem 1rem; border-top: 1px solid var(--border-soft); }

.together-leave { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
.together-leave .danger-link { color: var(--danger); }
.together-leave .danger-link:hover { background: var(--danger-bg); border-color: var(--danger-border); }
@media (max-width: 600px) {
    .together-hero { --art-w: 360px; padding: 1.1rem; }
    .together-hero-side { align-items: flex-start; }
    .together-hero-actions { justify-content: flex-start; }
}
.together-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 1.25rem; align-items: start; }
.together-main { min-width: 0; }
.together-chat { position: sticky; top: 5rem; margin: 1.4rem 0 0; display: flex; flex-direction: column; max-height: calc(100vh - 7rem); }
.together-chat .card-head { margin-bottom: .5rem; }
.chat-log { flex: 1; min-height: 12rem; max-height: 30rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; padding: .25rem .2rem .5rem 0; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.chat-empty { margin: auto; text-align: center; }
.chat-msg { display: flex; align-items: flex-end; gap: .45rem; margin-top: .5rem; }
.chat-msg.cont { margin-top: .1rem; }
.chat-msg.cont .chat-face { visibility: hidden; }
.chat-msg.cont .chat-head { display: none; }
.chat-msg.mine { flex-direction: row-reverse; }
.chat-face { flex: none; display: inline-flex; }
.chat-bubble { max-width: 82%; padding: .4rem .65rem .45rem; border-radius: 12px 12px 12px 4px; background: var(--surface-2); }
.chat-msg.mine .chat-bubble { border-radius: 12px 12px 4px 12px; background: var(--accent-soft); }
.chat-head { display: flex; align-items: baseline; gap: .35rem; font-size: .72rem; }
.chat-head small { color: var(--muted); }
.chat-msg.mine .chat-head strong { display: none; }
.chat-text { margin: .1rem 0 0; font-size: .86rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-form { display: flex; align-items: flex-end; gap: .45rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); }
.chat-form textarea { flex: 1; min-height: 38px; resize: none; overflow-y: hidden; border-radius: 10px; line-height: 1.4; scrollbar-width: thin; }
.chat-form .btn { display: inline-flex; align-items: center; gap: .35rem; height: 38px; }
.chat-readonly { margin: 0; padding-top: .7rem; border-top: 1px solid var(--border-soft); }
@media (max-width: 960px) {
    .together-body { grid-template-columns: minmax(0, 1fr); }
    .together-chat { position: static; max-height: none; }
}
.together-body.no-chat { grid-template-columns: minmax(0, 1fr); }
.together-send { width: 100%; }
.together-send > p { margin: .2rem 0 .9rem; }
.together-send .btn { display: inline-flex; align-items: center; gap: .45rem; }
.overlay-test-name { margin: .9rem 0 .4rem; }
.overlay-test-name .input-prefix input { max-width: none; }
.overlay-test-stop { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--border-soft); }
.overlay-test-stop .btn, .rule-test { display: inline-flex; align-items: center; gap: .35rem; }
.overlay-test-stop .btn .icon, .rule-test .icon { width: 13px; height: 13px; }

.game-draw-info > p:first-child { margin: 0 0 .8rem; }
.game-draw-controls { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.game-draw-controls .btn, .game-draw-link { display: inline-flex; align-items: center; gap: .4rem; }
.game-draw-controls .btn .icon, .game-draw-link .icon { width: 14px; height: 14px; }
.game-draw-controls [data-game-fullscreen] { margin-left: auto; }
.game-draw-message { margin: .8rem 0 0; padding: .5rem .75rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); }
.game-draw-message.error { background: var(--danger-bg); color: var(--danger); }
.game-draw-stage { margin: 0 0 1.1rem; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; width: 100%; }
.game-draw-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-draw-options .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); align-items: start; }
.game-texts-head > p { margin: 0 0 .8rem; }
.game-texts-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.game-texts-add label { max-width: 14rem; margin: 0; }
.game-text-needs { display: block; margin-top: .2rem; font-family: "Cascadia Mono", ui-monospace, Consolas, monospace; }
.prize-table .col-order { width: 1px; white-space: nowrap; }
.prize-table .col-round { text-align: center; white-space: nowrap; min-width: 5.5rem; }
.prize-table .col-round input { width: 18px; height: 18px; }
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px; padding: 0; margin-right: .2rem; border: 0; border-radius: var(--radius); background: none; color: var(--text-2); cursor: grab; touch-action: none; vertical-align: middle; }
.drag-handle:hover, .drag-handle:focus-visible { background: var(--surface-2); color: var(--text); }
.drag-handle .icon { width: 16px; height: 16px; }
.prize-pos {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 .4rem;
    border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent);
    font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle;
}
.prize-table td.rowactions, .prize-table th.col-actions { position: static; }
.prize-table td.rowactions::before, .prize-table td.rowactions::after,
.prize-table th.col-actions::before, .prize-table th.col-actions::after { content: none; }
.prize-table tr.dragging { opacity: .6; outline: 2px dashed var(--accent-border); outline-offset: -2px; }
.prize-table tr.dragging .drag-handle { cursor: grabbing; }
.prize-order-hint { margin: 0 0 .6rem; }
.game-draw-round { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.game-draw-round p { margin: 0 0 .4rem; }
.game-draw-round ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.game-draw-round li { display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem .3rem .2rem; border-radius: var(--radius); background: var(--surface-2); }
.game-draw-round li .prize-pos { min-width: 26px; height: 26px; font-size: .85rem; }
.game-draw-round li.dragging { opacity: .7; outline: 2px dashed var(--accent-border); }
.game-draw-round li.done { color: var(--text-2); }
.game-draw-round li.done > span:last-child { text-decoration: line-through; }
.game-draw-round li.done .drag-handle { visibility: hidden; }
.game-draw-round-hint { margin: .4rem 0 0; }
.round-pick { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; }
.round-pick > span { display: none; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr { position: relative; overflow: hidden; }
:root[data-view="cards"] .prize-table:has(td[data-label]) .card-cover { aspect-ratio: 460 / 160; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td:is(.col-order, .col-round) {
    position: absolute; top: .6rem; z-index: 1; flex: none; width: auto; min-width: 0;
    display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .4rem;
    border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(var(--shadow-rgb), .25);
}
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.col-order { left: .6rem; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.col-round { right: .6rem; padding: .3rem .7rem; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.col-round:not(:has(input)) { display: none; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.col-round::before { content: none; }
:root[data-view="cards"] .prize-table:has(td[data-label]) .round-pick > span { display: inline; font-size: .78rem; font-weight: 600; color: var(--text); }
:root[data-view="cards"] .prize-table:has(td[data-label]) .drag-handle { margin: 0; height: 26px; width: 22px; }
:root[data-view="cards"] .prize-table:has(td[data-label]) .prize-pos { min-width: 26px; height: 26px; font-size: .88rem; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.cell-last { flex: 1 1 calc(100% - 3rem); }
:root[data-view="cards"] .prize-table:has(td[data-label]) .badge { white-space: normal; overflow-wrap: anywhere; }
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr > td.rowactions {
    order: 100; flex: none; align-self: flex-end; margin: 0 0 0 auto; padding: 0; border-top: 0;
}
:root[data-view="cards"] .prize-table:has(td[data-label]) > tbody > tr.dragging { opacity: .7; outline: 2px dashed var(--accent-border); outline-offset: 2px; }
.badge-picker { margin: -.3rem 0 1rem 1.6rem; padding: .7rem .8rem; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); }
.badge-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-options:empty { display: none; }
.badge-option { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .88rem; }
.badge-option:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text); }
.badge-option img, .badge-chip img { width: 18px; height: 18px; image-rendering: auto; }
.badge-status { margin: .4rem 0 0; }
.badge-picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: .6rem; }
.badge-picker-foot .btn { display: inline-flex; align-items: center; gap: .35rem; }
.badge-picker-foot .btn .icon { width: 13px; height: 13px; }
.giveaway-badges dd { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.badge-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem .15rem .35rem; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-soft); font-size: .85rem; }
p.giveaway-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: -.3rem 0 .9rem; }
label.badge-option > span { display: inline; margin: 0; font-size: .88rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
.giveaway-summary .giveaway-badges { grid-column: 1 / -1; }
.badge-chip { white-space: nowrap; }
.badge-group { margin: 0 0 .35rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.badge-roles-title { margin-top: .85rem; }
.badge-roles { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.badge-roles label.inline { margin: 0; }