/* Optional Bus designs, based on Yuna A/B/C; system fonts only. */
html[data-design="navy-blue"]:not([data-theme="dark"]){
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-soft:#f7f9fd;
  --surface-hover:#f7f9fd;
  --surface-raised:#ffffff;
  --control-bg:#ffffff;
  --control-soft:#f7f9fd;
  --ink:#182840;
  --text:#34475f;
  --muted:#536479;
  --subtle:#536479;
  --faint:#536479;
  --line:#dce4f0;
  --line-soft:#dce4f0;
  --line-strong:#dce4f0;
  --accent:#245fe6;
  --accent-hover:#174fce;
  --accent-soft:#e9f0ff;
  --accent-soft-border:#dce4f0;
  --accent-faint:#f7f9fd;
  --on-accent:#ffffff;
  --focus:#245fe6;
  --brand-pink:#245fe6;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#142641;
  --nav-soft:#1c3454;
  --nav-text:#d5e0f0;
  --nav-muted:#a4b8d4;
  --nav-heading:#a4b8d4;
  --nav-hover:#1c3454;
  --nav-active:#263e60;
  --nav-active-text:#d2e0ff;
  --nav-line:#1c3454;
  --bus-logo-color:#8ab2ff;
  --bus-motion-glint:#dce9ff;
  --bus-nav-token-n:#8adebb;
  --bus-nav-token-y:#ffacb8;
  --chart-soft:#e9f0ff;
  --chart-current:#245fe6;
  --chart-grid:#dce4f0;
  --green:#13735e;
  --green-soft:#e5f3ed;
  --orange:#885711;
  --orange-soft:#fff2dc;
  --red:#a42e4c;
  --red-soft:#fff0f3;
  --purple:#654394;
  --purple-soft:#eee8fa;
  --overlay:#17253a61;
  --drawer-overlay:#17253a42;
  --toast-bg:#243b4d;
  --toast-ink:#ffffff;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #18284008;
  --modal-shadow:0 30px 100px #18284033;
  --drawer-shadow:-12px 0 55px #18284022;
}
html[data-design="navy-blue"][data-theme="dark"]{
  --bg:#101a2b;
  --surface:#17243a;
  --surface-soft:#1d2e47;
  --surface-hover:#1d2e47;
  --surface-raised:#17243a;
  --control-bg:#17243a;
  --control-soft:#1d2e47;
  --ink:#eef4ff;
  --text:#cedaf0;
  --muted:#a8bbd6;
  --subtle:#a8bbd6;
  --faint:#a8bbd6;
  --line:#364961;
  --line-soft:#364961;
  --line-strong:#364961;
  --accent:#a5c2ff;
  --accent-hover:#bfd3ff;
  --accent-soft:#263e60;
  --accent-soft-border:#364961;
  --accent-faint:#1d2e47;
  --on-accent:#11264d;
  --focus:#a5c2ff;
  --brand-pink:#a5c2ff;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#0d1728;
  --nav-soft:#1a3050;
  --nav-text:#d5e1f4;
  --nav-muted:#a4b8d4;
  --nav-heading:#a4b8d4;
  --nav-hover:#1a3050;
  --nav-active:#263e60;
  --nav-active-text:#c5d7ff;
  --nav-line:#1a3050;
  --bus-logo-color:#a5c2ff;
  --bus-motion-glint:#e4edff;
  --bus-nav-token-n:#8adebb;
  --bus-nav-token-y:#ffacb8;
  --chart-soft:#263e60;
  --chart-current:#a5c2ff;
  --chart-grid:#364961;
  --green:#8ad9bb;
  --green-soft:#173c31;
  --orange:#f0c47b;
  --orange-soft:#3a2d1a;
  --red:#ffa7b8;
  --red-soft:#42232e;
  --purple:#c7b2fa;
  --purple-soft:#302840;
  --overlay:#080d18b8;
  --drawer-overlay:#080d1891;
  --toast-bg:#e7eef8;
  --toast-ink:#18283a;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #00000012;
  --modal-shadow:0 30px 100px #00000066;
  --drawer-shadow:-12px 0 55px #0000003d;
}
html[data-design="warm-green"]:not([data-theme="dark"]){
  --bg:#f5f4ef;
  --surface:#ffffff;
  --surface-soft:#f5f8f4;
  --surface-hover:#f5f8f4;
  --surface-raised:#ffffff;
  --control-bg:#ffffff;
  --control-soft:#f5f8f4;
  --ink:#203c34;
  --text:#344f43;
  --muted:#52665b;
  --subtle:#52665b;
  --faint:#52665b;
  --line:#d8e2da;
  --line-soft:#d8e2da;
  --line-strong:#d8e2da;
  --accent:#08745f;
  --accent-hover:#055c4b;
  --accent-soft:#e1f1e9;
  --accent-soft-border:#d8e2da;
  --accent-faint:#f5f8f4;
  --on-accent:#ffffff;
  --focus:#08745f;
  --brand-pink:#08745f;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#fbfcf8;
  --nav-soft:#edf3ee;
  --nav-text:#29473d;
  --nav-muted:#5c7468;
  --nav-heading:#5c7468;
  --nav-hover:#edf3ee;
  --nav-active:#deeee5;
  --nav-active-text:#075e4e;
  --nav-line:#edf3ee;
  --bus-logo-color:#08745f;
  --bus-motion-glint:#c8efe0;
  --bus-nav-token-n:#13735e;
  --bus-nav-token-y:#9b3453;
  --chart-soft:#e1f1e9;
  --chart-current:#08745f;
  --chart-grid:#d8e2da;
  --green:#13735e;
  --green-soft:#e5f3ed;
  --orange:#885711;
  --orange-soft:#fff2dc;
  --red:#a42e4c;
  --red-soft:#fff0f3;
  --purple:#654394;
  --purple-soft:#eee8fa;
  --overlay:#17253a61;
  --drawer-overlay:#17253a42;
  --toast-bg:#243b4d;
  --toast-ink:#ffffff;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #18284008;
  --modal-shadow:0 30px 100px #18284033;
  --drawer-shadow:-12px 0 55px #18284022;
}
html[data-design="warm-green"][data-theme="dark"]{
  --bg:#10221d;
  --surface:#18352d;
  --surface-soft:#203e35;
  --surface-hover:#203e35;
  --surface-raised:#18352d;
  --control-bg:#18352d;
  --control-soft:#203e35;
  --ink:#ecf7f1;
  --text:#d1e8de;
  --muted:#accbbb;
  --subtle:#accbbb;
  --faint:#accbbb;
  --line:#3a5a4d;
  --line-soft:#3a5a4d;
  --line-strong:#3a5a4d;
  --accent:#8ad9bb;
  --accent-hover:#a4e8cd;
  --accent-soft:#274f40;
  --accent-soft-border:#3a5a4d;
  --accent-faint:#203e35;
  --on-accent:#123b2e;
  --focus:#8ad9bb;
  --brand-pink:#8ad9bb;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#102923;
  --nav-soft:#203e35;
  --nav-text:#d9ede3;
  --nav-muted:#b0cfc0;
  --nav-heading:#b0cfc0;
  --nav-hover:#203e35;
  --nav-active:#2b4b3b;
  --nav-active-text:#bcf3d9;
  --nav-line:#203e35;
  --bus-logo-color:#8ad9bb;
  --bus-motion-glint:#d7ffed;
  --bus-nav-token-n:#8adebb;
  --bus-nav-token-y:#ffacb8;
  --chart-soft:#274f40;
  --chart-current:#8ad9bb;
  --chart-grid:#3a5a4d;
  --green:#8ad9bb;
  --green-soft:#173c31;
  --orange:#f0c47b;
  --orange-soft:#3a2d1a;
  --red:#ffa7b8;
  --red-soft:#42232e;
  --purple:#c7b2fa;
  --purple-soft:#302840;
  --overlay:#080d18b8;
  --drawer-overlay:#080d1891;
  --toast-bg:#e7eef8;
  --toast-ink:#18283a;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #00000012;
  --modal-shadow:0 30px 100px #00000066;
  --drawer-shadow:-12px 0 55px #0000003d;
}
html[data-design="charcoal-indigo"]:not([data-theme="dark"]){
  --bg:#f4f5fa;
  --surface:#ffffff;
  --surface-soft:#f1f3fa;
  --surface-hover:#f1f3fa;
  --surface-raised:#ffffff;
  --control-bg:#ffffff;
  --control-soft:#f1f3fa;
  --ink:#202c40;
  --text:#36445a;
  --muted:#59677d;
  --subtle:#59677d;
  --faint:#59677d;
  --line:#dce1ee;
  --line-soft:#dce1ee;
  --line-strong:#dce1ee;
  --accent:#4057b2;
  --accent-hover:#304392;
  --accent-soft:#e9edfc;
  --accent-soft-border:#dce1ee;
  --accent-faint:#f1f3fa;
  --on-accent:#ffffff;
  --focus:#4057b2;
  --brand-pink:#4057b2;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#172235;
  --nav-soft:#24344f;
  --nav-text:#d9e2f2;
  --nav-muted:#adbad2;
  --nav-heading:#adbad2;
  --nav-hover:#24344f;
  --nav-active:#2c3c60;
  --nav-active-text:#d4dfff;
  --nav-line:#24344f;
  --bus-logo-color:#a1b4ff;
  --bus-motion-glint:#e3eaff;
  --bus-nav-token-n:#8adebb;
  --bus-nav-token-y:#ffacb8;
  --chart-soft:#e9edfc;
  --chart-current:#4057b2;
  --chart-grid:#dce1ee;
  --green:#13735e;
  --green-soft:#e5f3ed;
  --orange:#885711;
  --orange-soft:#fff2dc;
  --red:#a42e4c;
  --red-soft:#fff0f3;
  --purple:#654394;
  --purple-soft:#eee8fa;
  --overlay:#17253a61;
  --drawer-overlay:#17253a42;
  --toast-bg:#243b4d;
  --toast-ink:#ffffff;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #18284008;
  --modal-shadow:0 30px 100px #18284033;
  --drawer-shadow:-12px 0 55px #18284022;
}
html[data-design="charcoal-indigo"][data-theme="dark"]{
  --bg:#101720;
  --surface:#1b2635;
  --surface-soft:#202d3f;
  --surface-hover:#202d3f;
  --surface-raised:#1b2635;
  --control-bg:#1b2635;
  --control-soft:#202d3f;
  --ink:#f0f4fc;
  --text:#d7e0ee;
  --muted:#b3c0d2;
  --subtle:#b3c0d2;
  --faint:#b3c0d2;
  --line:#354357;
  --line-soft:#354357;
  --line-strong:#354357;
  --accent:#a1b4ff;
  --accent-hover:#bdcaff;
  --accent-soft:#2b3c60;
  --accent-soft-border:#354357;
  --accent-faint:#202d3f;
  --on-accent:#152448;
  --focus:#a1b4ff;
  --brand-pink:#a1b4ff;
  --blue:var(--accent);
  --blue-light:var(--accent-soft);
  --nav:#111b27;
  --nav-soft:#203049;
  --nav-text:#d9e2f2;
  --nav-muted:#9dadc5;
  --nav-heading:#9dadc5;
  --nav-hover:#203049;
  --nav-active:#263a5b;
  --nav-active-text:#d3ddff;
  --nav-line:#203049;
  --bus-logo-color:#a1b4ff;
  --bus-motion-glint:#e0e7ff;
  --bus-nav-token-n:#8adebb;
  --bus-nav-token-y:#ffacb8;
  --chart-soft:#2b3c60;
  --chart-current:#a1b4ff;
  --chart-grid:#354357;
  --green:#8ad9bb;
  --green-soft:#173c31;
  --orange:#f0c47b;
  --orange-soft:#3a2d1a;
  --red:#ffa7b8;
  --red-soft:#42232e;
  --purple:#c7b2fa;
  --purple-soft:#302840;
  --overlay:#080d18b8;
  --drawer-overlay:#080d1891;
  --toast-bg:#e7eef8;
  --toast-ink:#18283a;
  --toast-error:#8b2f4b;
  --shadow:0 8px 26px #00000012;
  --modal-shadow:0 30px 100px #00000066;
  --drawer-shadow:-12px 0 55px #0000003d;
  --bus-primary-bg:#526ac9;
  --bus-primary-ink:#ffffff;
  --bus-primary-hover:#6179da;
}
html[data-design="navy-blue"]{--bus-font-family:"Noto Sans KR","Malgun Gothic",sans-serif;--bus-menu-size:16px;--bus-body-size:16px;--bus-table-size:16px;--bus-body-weight:500;--bus-menu-weight:600;--bus-table-weight:500;--bus-title-size:28px;}
html[data-design="warm-green"]{--bus-font-family:"Noto Sans KR","Malgun Gothic",sans-serif;--bus-menu-size:17px;--bus-body-size:17px;--bus-table-size:17px;--bus-body-weight:500;--bus-menu-weight:600;--bus-table-weight:500;--bus-title-size:30px;}
html[data-design="charcoal-indigo"]{--bus-font-family:"Malgun Gothic","Noto Sans KR",sans-serif;--bus-menu-size:16px;--bus-body-size:16px;--bus-table-size:16px;--bus-body-weight:400;--bus-menu-weight:700;--bus-table-weight:700;--bus-title-size:28px;}
/* Account-local design selector. The legacy pink design keeps its typography. */
html[data-design="black-pink"]:not([data-theme="dark"]){--muted:#75687d;--subtle:#75687d;--faint:#75687d}
.bus-design-control{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto}
.account-controls .bus-design-control>label{display:block;font-size:12px;white-space:nowrap;color:var(--text);margin:0}
.account-controls .bus-design-control>select{width:168px;max-width:100%;min-width:0;flex:0 1 auto;font-size:14px;font-weight:600;color:var(--ink);background:var(--control-bg);border:1px solid var(--line-strong);border-radius:8px;min-height:36px;padding:7px 26px 7px 9px}
.bus-design-status{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--text);text-align:right}
.bus-design-status:empty{display:none}
.pagination span{white-space:nowrap;min-width:48px;width:auto;display:inline-flex;align-items:center;justify-content:center;padding:3px 8px}
.topbar .account-controls{min-width:0;max-width:100%;flex:1 1 auto;justify-content:flex-end;row-gap:8px}
.topbar .topbar-left{flex:0 0 auto}.topbar .breadcrumb{white-space:nowrap}
@media(max-width:800px){.account-controls .bus-design-control>select{width:157px;min-height:34px;font-size:14px}.account-controls .bus-design-control>label{font-size:12px}.topbar .account-controls{gap:6px}.topbar .topbar-left{flex:0 0 auto}.bus-design-control{gap:5px}.bus-design-status{text-align:left}}

/* Typography is applied only to the three optional designs. No DOM rerender. */
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]){font-family:var(--bus-font-family);font-size:var(--bus-body-size);font-weight:var(--bus-body-weight)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.nav-item,.nav-group-title,.nav-child){font-size:var(--bus-menu-size);font-weight:var(--bus-menu-weight);line-height:1.55}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) h1{font-size:var(--bus-title-size);font-weight:700;letter-spacing:-.8px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(h2,h3){font-weight:700}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table th{font-size:14px;font-weight:var(--bus-menu-weight);padding:14px 12px;line-height:1.55}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table td{font-size:var(--bus-table-size);font-weight:var(--bus-table-weight);padding:14px 12px;line-height:1.6}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table tbody tr{height:65px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table[data-testid="slot-table"]{min-width:1800px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table :is(.cell-id,.cell-title,.table-title,.rank,.bus-editable-keyword,.remaining){font-size:var(--bus-table-size)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table .cell-id{font-weight:var(--bus-table-weight)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table .bus-editable-keyword{min-width:160px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .data-table .pill{font-size:14px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.rank,.cell-title,.table-title,.bus-editable-keyword,.remaining){font-weight:700}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.subtext,.tab,.record-count,.product-metric span,.form-field label,.bus-slot-filters>label,.bus-page-size,.notice,.permission-note,.rule-row p){font-size:14px;line-height:1.65}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.btn,.btn.small,.text-button){font-size:14px;font-weight:600;line-height:1.4}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.form-field input,.form-field select,.form-field textarea,.bus-slot-filters select,.bus-slot-filters input,.searchbox input){font-size:var(--bus-body-size);font-family:inherit;font-weight:var(--bus-body-weight)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.cell-sub,.form-field small,.eyebrow,.table-wrap-caption,.metric-note,.nav-caption,.table-footer){font-size:12px;line-height:1.65}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .role-badge{font-size:12px}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .account-controls .bus-server-control{font-size:12px;white-space:nowrap}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .btn.primary{background:var(--bus-primary-bg,var(--accent));color:var(--bus-primary-ink,var(--on-accent));border-color:var(--bus-primary-bg,var(--accent));box-shadow:none}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .btn.primary:hover{background:var(--bus-primary-hover,var(--accent-hover));color:var(--bus-primary-ink,var(--on-accent));border-color:var(--bus-primary-hover,var(--accent-hover))}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) :is(.nav-item,.nav-group-title,.nav-child):hover{color:var(--nav-text)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .nav-item.active:hover{background:var(--accent);color:var(--on-accent)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .nav-child.active:hover{background:var(--nav-active);color:var(--nav-active-text)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .sidebar .platform-token.n{background:var(--nav-soft);color:var(--bus-nav-token-n)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .sidebar .platform-token.y{background:var(--nav-soft);color:var(--bus-nav-token-y)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .bus-brand{position:relative}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .bus-brand .bus-logo{opacity:0}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .bus-brand::after{content:"";position:absolute;left:24px;top:24px;width:108px;height:47px;background:var(--bus-logo-color);-webkit-mask:url('assets/bus-logo-pink-v2.png') center/contain no-repeat;mask:url('assets/bus-logo-pink-v2.png') center/contain no-repeat;pointer-events:none}

/* Reuse existing motion timings and reduction rules, changing only its colours. */
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .nav-group-title[data-category="유튜브"]:has(> .product-badge){box-shadow:inset 0 0 0 1px var(--accent-soft-border)}
html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .nav-group-title[data-category="유튜브"]:has(> .product-badge)::before{background:conic-gradient(from var(--bus-badge-orbit-angle),transparent 0deg 258deg,var(--accent-hover) 285deg,var(--accent) 310deg,var(--bus-motion-glint) 326deg,transparent 348deg)}
@media(max-width:800px){html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .bus-server-control{font-size:12px;padding:6px 8px}html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) h1{font-size:var(--bus-title-size)}html:is([data-design="navy-blue"],[data-design="warm-green"],[data-design="charcoal-indigo"]) .bus-slot-filters>label{min-width:140px}}