/* Cinema studio theme. Load after the existing account styles.
   Source DOM, text, event handlers and data-v attributes stay intact.
   !important is intentional: the legacy app uses inline colors and a prior
   global override sheet, plus route styles inserted after initial load. */
:root {
  color-scheme: dark;
  --xh-bg: #0a0a0a;
  --xh-bg-subtle: #100e0c;
  --xh-surface: #151311;
  --xh-surface-raised: #211c17;
  --xh-surface-hover: #2a221a;
  --xh-border: #3a3228;
  --xh-border-strong: #806b51;
  --xh-text: #f5f1e8;
  --xh-text-secondary: #c4beb3;
  --xh-text-muted: #b1a798;
  --xh-accent: #d8bb86;
  --xh-accent-hover: #e6cda4;
  --xh-accent-soft: #2d2419;
  --xh-success: #9fc5aa;
  --xh-warning: #e4c18a;
  --xh-danger: #f2a4a4;
  --xh-radius-sm: 3px;
  --xh-radius-md: 4px;
  --xh-radius-lg: 6px;
  --xh-shadow-card: none;
  --xh-shadow-float: 0 22px 64px #0008;
  --bg: var(--xh-bg);
  --surface: var(--xh-surface);
  --surface2: var(--xh-surface-raised);
  --raised: var(--xh-surface-raised);
  --text: var(--xh-text);
  --text2: var(--xh-text-secondary);
  --soft: var(--xh-text-secondary);
  --muted: var(--xh-text-muted);
  --line: var(--xh-border);
  --line2: var(--xh-border-strong);
  --border: var(--xh-border);
  --border2: var(--xh-border-strong);
  --primary: var(--xh-accent);
  --primary-hi: var(--xh-accent-hover);
  --violet: var(--xh-accent);
  --cyan: var(--xh-accent);
  --ok: var(--xh-success);
  --warn: var(--xh-warning);
  --down: var(--xh-danger);
  --danger: var(--xh-danger);
  --radius: 6px;
  --grad: linear-gradient(135deg, #e0c18b, #ad7947);
  --grad2: linear-gradient(135deg, #d8bb86, #ad7947);
  --shadow-card: none;
  --studio-overlay: rgb(16 14 12 / 96%);
  --studio-primary: #f5f1e8;
  --studio-on-primary: #0a0a0a;
}
html, body, #app { background: var(--xh-bg) !important; color: var(--xh-text) !important; }
html { scrollbar-color: var(--xh-border-strong) var(--xh-bg); }
body, button, input, select, textarea {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
body { font-size: 14px !important; line-height: 1.7 !important; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { accent-color: var(--xh-accent); }
input, textarea { caret-color: var(--xh-accent); }
a { color: var(--xh-accent); text-underline-offset: .25em; }
a:hover { text-shadow: none !important; color: var(--xh-accent-hover); }
::selection { background: #d8bb8666; color: #fff; }
*:focus-visible { outline: 2px solid var(--xh-accent) !important; outline-offset: 3px; }
::-webkit-scrollbar-thumb { background: #78644c !important; border-radius: 4px !important; }
::-webkit-scrollbar-track { background: var(--xh-bg) !important; }
.starfield, .aurora, .stars { display: none !important; animation: none !important; }
.grad-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--xh-text) !important; }
h1, h2, h3 { color: var(--xh-text); font-weight: 500 !important; letter-spacing: -.015em; }
.glass, .card, .panel, .box, .a-panel, .a-kpi, .stat-card, .pricing-card,
.dashboard-card, .plan, .pack, .chan, .bal-panel, .modal, .paybox {
  background: var(--xh-surface) !important;
  border: 1px solid var(--xh-border) !important;
  border-radius: 6px !important;
  color: var(--xh-text) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.glass:hover, .card:hover, .a-kpi:hover, .plan:hover, .pack:hover { border-color: var(--xh-border-strong) !important; }
.btn, .btn-primary, button[type="submit"] {
  min-height: 42px;
  border: 1px solid var(--studio-primary) !important;
  border-radius: 3px !important;
  background: var(--studio-primary) !important;
  color: var(--studio-on-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease !important;
}
.btn:hover, .btn-primary:hover, button[type="submit"]:hover { background: var(--xh-accent) !important; color: #0a0a0a !important; border-color: var(--xh-accent) !important; transform: none !important; }
.btn::after { display: none !important; }
.btn.ghost, .btn-ghost { background: transparent !important; color: var(--xh-text-secondary) !important; border: 1px solid var(--xh-border-strong) !important; }
.btn.ghost:hover, .btn-ghost:hover { background: var(--xh-surface-hover) !important; color: var(--xh-text) !important; border-color: var(--xh-accent) !important; }
.btn.sm { min-height: 36px; padding-inline: 13px !important; font-size: 12px !important; }
button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; }
.mini { min-height: 32px; padding: 5px 11px !important; background: var(--xh-surface-raised) !important; color: var(--xh-text-secondary) !important; border: 1px solid var(--xh-border-strong) !important; border-radius: 3px !important; }
.mini:hover { background: var(--xh-surface-hover) !important; color: var(--xh-text) !important; }
.mini.danger, .btn-danger { color: var(--xh-danger) !important; border-color: #91514a !important; background: #311a18 !important; }
.mini.danger:hover, .btn-danger:hover { background: #482320 !important; }
.inp, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  background: var(--xh-surface-raised) !important;
  border: 1px solid var(--xh-border-strong) !important;
  border-radius: 3px !important;
  color: var(--xh-text) !important;
  box-shadow: none !important;
  line-height: 1.6;
}
input::placeholder, textarea::placeholder { color: var(--xh-text-muted) !important; opacity: 1; }
.inp:focus, input:focus, select:focus, textarea:focus { border-color: var(--xh-accent) !important; box-shadow: 0 0 0 2px #d8bb8633 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--xh-accent) !important; }
.field label, .sub, .foot-links, .p-sub, .s-d, .ptxt, .tip, .foot, .desc, .cl, .bl { color: var(--xh-text-secondary) !important; }
.sub, .sec, .grp, .bs, .ulvl, .k-label, .p-sub, .lvl, .pn, .badge, .chip, .tag {
  font-size: max(12px, 1em);
}
.sec, .grp, .bs, .ulvl, .k-label, .lvl, .pn, .badge, .chip, .tag {
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.7;
}
.mono, .num, .k-val, .cv, .bv, .price, .amt, .pp { font-variant-numeric: tabular-nums; }
.mono { font-family: "IBM Plex Mono", monospace !important; letter-spacing: 0; }
.chip, .tag, .pill, .badge, .sb-badge { border-radius: 3px !important; }
.chip.v, .tag.v, .badge, .sb-badge { background: #302519 !important; color: var(--xh-accent) !important; border-color: #6b5439 !important; }
.chip.ok, .tag.g, .tag-g, .pill.up { color: var(--xh-success) !important; background: #1b2b20 !important; border-color: #3e6049 !important; }
.tag.y, .tag-y { color: var(--xh-warning) !important; background: #332719 !important; border-color: #715733 !important; }
.chip.down, .tag.r, .tag-r, .pill.down { color: var(--xh-danger) !important; background: #351d1b !important; border-color: #75423c !important; }
.msg { border-radius: 3px !important; line-height: 1.8; }
.msg.err, .msg-err { background: #331c19 !important; border-color: #8e5046 !important; color: #ffc2b9 !important; }
.msg.ok, .msg-ok { background: #1b2b20 !important; border-color: #42604b !important; color: #c2e0c7 !important; }
.green, .up, .ok-ico { color: var(--xh-success) !important; }
.redc, .dn, .down { color: var(--xh-danger) !important; }
.orb, .mark, .av, .uav, .bal { background: var(--grad) !important; color: #19120b !important; box-shadow: none !important; }
.mark { border-radius: 5px !important; }
.av, .uav { border-radius: 4px !important; }
.bal { border-radius: 3px !important; background: #2d2419 !important; border: 1px solid #6b5439; color: var(--xh-accent) !important; }
.auth-wrap { padding: 76px 24px 56px !important; }
.auth-head { margin-bottom: 28px !important; }
.auth-head .orb { width: 54px !important; height: 54px !important; border-radius: 6px !important; font-size: 27px !important; margin-bottom: 22px !important; }
.auth-head h1 { font-size: 29px !important; line-height: 1.5; }
.auth-head .sub { font-size: 12px !important; line-height: 1.8; letter-spacing: .14em; }
.auth-wrap .card { width: 420px !important; max-width: 100% !important; padding: 30px !important; }
.auth-wrap .back { color: var(--xh-text-secondary) !important; background: var(--studio-overlay); padding: 8px 12px; border-radius: 3px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.foot-links a { color: var(--xh-accent) !important; }
.shell, .ashell { background: var(--xh-bg); }
.side, .aside {
  background: var(--xh-bg-subtle) !important;
  border-color: var(--xh-border) !important;
  color: var(--xh-text-secondary) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
.side { width: 238px !important; padding: 24px 16px !important; }
.aside { width: 244px !important; padding: 24px 16px !important; }
.side .brand, .aside .brand { gap: 12px; padding-bottom: 22px !important; }
.side .u { padding-block: 20px !important; }
.side .uname { font-size: 14px !important; color: var(--xh-text); }
.side .ulvl { margin-top: 4px; font-size: 11px !important; color: var(--xh-text-muted); letter-spacing: .1em; }
.side nav a, .aside nav a { color: var(--xh-text-secondary) !important; background: transparent !important; border-radius: 3px !important; font-weight: 400; padding: 11px 12px !important; }
.side nav a:hover, .aside nav a:hover { color: var(--xh-text) !important; background: var(--xh-surface-raised) !important; }
.side nav a.router-link-exact-active, .aside nav a.on { color: var(--xh-accent) !important; background: var(--xh-accent-soft) !important; box-shadow: inset 1px 0 0 var(--xh-accent) !important; }
.side .sec, .aside .grp { color: var(--xh-text-muted) !important; font-size: 11px !important; margin-top: 23px !important; margin-bottom: 8px !important; }
.aside .bt { font-size: 15px !important; font-weight: 500 !important; }
.aside .bs { color: var(--xh-text-muted); margin-top: 4px; font-size: 10px !important; letter-spacing: .18em; }
.body { min-width: 0; padding: 36px 40px !important; }
.bar { margin-bottom: 30px !important; }
.bar h1 { font-size: 26px !important; font-weight: 500 !important; }
.atop { padding: 22px 32px !important; background: var(--studio-overlay) !important; border-color: var(--xh-border) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.atop h1 { font-size: 23px !important; font-weight: 500 !important; }
.crumb { margin-top: 6px !important; color: var(--xh-text-muted) !important; }
.abody { padding: 28px 32px !important; }
.a-kpis { gap: 16px; margin-bottom: 24px; }
.a-kpi { padding: 22px !important; }
.a-kpi .k-ico, .ci { background: transparent !important; box-shadow: none !important; }
.a-kpi .k-val { font-size: 29px !important; font-weight: 500 !important; letter-spacing: -.02em; margin-top: 14px !important; }
.a-kpi .k-label { font-size: 12px !important; letter-spacing: .12em; }
.a-panel { padding: 24px !important; margin-bottom: 24px; }
.a-panel .p-head { margin-bottom: 22px; }
.a-panel .p-head h3 { font-size: 16px !important; font-weight: 500 !important; }
.a-panel .p-sub { margin-top: 5px; font-size: 12px; line-height: 1.7; }
.a-grid2, .a-grid3 { gap: 22px; }
.a-table, .tbl, table { width: 100%; border-collapse: collapse; border-color: var(--xh-border) !important; }
.a-table th, .a-table td, .tbl th, .tbl td, th, td { border-color: var(--xh-border) !important; }
.a-table th, .tbl th, th { background: #1c1814 !important; color: var(--xh-text-muted) !important; font-weight: 500 !important; padding: 12px 14px !important; font-size: 12px !important; }
.a-table td, .tbl td, td { padding: 14px !important; color: var(--xh-text-secondary); }
.a-table tr:hover td, .tbl tr:hover td { background: #211b15 !important; }
.a-table .actions { align-items: center; gap: 7px; }
.a-tools { gap: 10px; }
.a-tools .inp { min-height: 38px; }
.a-set { padding-block: 18px !important; border-color: var(--xh-border) !important; gap: 20px; }
.a-set .s-l { color: var(--xh-text); font-size: 14px; }
.a-set .s-d { max-width: 48em; font-size: 12px; line-height: 1.8; }
.sw { background: #4d4032 !important; }
.sw.on { background: var(--xh-accent) !important; }
.sw::after { background: #f5f1e8 !important; }
.sw.on::after { background: #17110b !important; }
.spark i { background: var(--grad) !important; border-radius: 2px 2px 0 0 !important; }
.legend .d1 { background: #d8bb86 !important; }
.legend .d2 { background: #ad7947 !important; }
.legend .d3 { background: #f5f1e8 !important; }
.hbar { background: #32271d !important; }
.hbar i.ok { background: #9fc5aa !important; }
.hbar i.warn { background: #d8bb86 !important; }
.hbar i.bad { background: #d89083 !important; }
.plan.hot, .pack.hot { border-color: var(--xh-accent) !important; background: #211b14 !important; transform: none !important; }
.plan .price, .pack .pp, .cv, .bv { color: var(--xh-text) !important; font-weight: 500 !important; }
.plan .price small, .pack .pc, .pack .pc span { color: var(--xh-text-secondary) !important; }
.bal-panel { padding: 24px !important; }
.plan .lvl { color: var(--xh-accent) !important; letter-spacing: .1em; }
.plan, .pack { padding: 25px !important; }
.flow .fi b, .cap-t, .cap-n, .clink { color: var(--xh-accent) !important; }
.flow .fi b { background: #2d2419 !important; border-radius: 3px !important; }
.cap-d, .hn, .hp { color: var(--xh-text-secondary) !important; }
.empty { color: var(--xh-text-secondary) !important; padding: 45px 20px !important; }
.empty p { line-height: 1.9; }
/* Real overlay surfaces: retain backdrop blur even after earlier !important rules. */
.modal-content, .dropdown-menu, .modal, .paybox, .zyxh-pop, .mb-dialog,
[role="dialog"], dialog {
  border: 1px solid var(--xh-border-strong) !important;
  border-radius: 6px !important;
  background: var(--studio-overlay) !important;
  color: var(--xh-text) !important;
  box-shadow: var(--xh-shadow-float) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
.mask, .modal-bg, .modal-mask, .overlay, dialog::backdrop,
#app [style*="position:fixed"][style*="inset:0"],
#app [style*="position: fixed"][style*="inset: 0"] {
  background: rgb(0 0 0 / 76%) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}
.modal-bg { border: 0 !important; box-shadow: none !important; }
.mask .modal, .mask .paybox, .modal-bg .modal { max-height: 88dvh; overflow: auto; }
.zyxh-pop { padding: 20px !important; }
.zyxh-pop > div[style*="rotate(45deg)"] { background: #100e0c !important; border-color: var(--xh-border-strong) !important; }
#floating-canvas-cta { background: var(--studio-primary) !important; color: #0a0a0a !important; border-color: var(--studio-primary) !important; border-radius: 4px !important; height: 44px !important; font-size: 13px !important; box-shadow: 0 10px 32px #0005 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#floating-canvas-cta span { color: #17110b !important; }
#floating-canvas-cta:hover { transform: translateY(-2px) !important; background: var(--xh-accent) !important; }
#app-loading { background: var(--xh-bg) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#app-loading .spinner { border-color: var(--xh-border) !important; border-top-color: var(--xh-accent) !important; }
.nav, .nav-inner, #zyxh-user-bar { color: var(--xh-text) !important; }
.nav { background: var(--studio-overlay) !important; border-color: var(--xh-border) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.nav-inner nav a { color: var(--xh-text-secondary) !important; border-color: var(--xh-border) !important; background: transparent !important; border-radius: 3px !important; }
.nav-inner nav a:hover, .nav-inner nav a.router-link-exact-active { color: var(--xh-accent) !important; background: var(--xh-accent-soft) !important; }
#zyxh-user-bar button, #zyxh-user-bar a { border-radius: 3px !important; }
/* Scope legacy hardcoded accent and panel colors to exact color declarations.
   Text and events are untouched; no whole-page filter is applied. */
[style*="color:#05DFF6" i], [style*="color: #05DFF6" i],
[style*="color: rgb(5, 223, 246)" i], [style*="color:#6366f1" i],
[style*="color: rgb(99, 102, 241)" i], [style*="color:#7c8cff" i],
[style*="color: rgb(124, 140, 255)" i], [style*="color:#c4b5fd" i],
[style*="color: rgb(196, 181, 253)" i] { color: var(--xh-accent) !important; }
[style*="border:" i][style*="5,223,246"],
[style*="border:" i][style*="5, 223, 246"],
[style*="border:" i][style*="124,140,255"],
[style*="border:" i][style*="124, 140, 255"] { border-color: var(--xh-border-strong) !important; }
[style*="background:rgba(5,223,246" i],
[style*="background: rgba(5, 223, 246" i],
[style*="background:rgba(124,140,255" i],
[style*="background: rgba(124, 140, 255" i] { background: var(--xh-accent-soft) !important; }
[style*="background:#212121" i], [style*="background: rgb(33, 33, 33)" i],
[style*="background:#171717" i], [style*="background: rgb(23, 23, 23)" i] { background: var(--studio-overlay) !important; color: var(--xh-text) !important; border-color: var(--xh-border-strong) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
[style*="background:#F7F7F7" i], [style*="background: rgb(247, 247, 247)" i] { background: var(--studio-primary) !important; color: var(--studio-on-primary) !important; border-color: var(--studio-primary) !important; }
[style*="background:rgba(255,255,255,.06)" i],
[style*="background: rgba(255, 255, 255, 0.06)" i] { background: var(--xh-surface-raised) !important; }
[style*="color:rgba(255,255,255,.45)" i],
[style*="color: rgba(255, 255, 255, 0.45)" i],
[style*="color:rgba(255,255,255,.55)" i],
[style*="color: rgba(255, 255, 255, 0.55)" i] { color: var(--xh-text-muted) !important; }
/* Native model manager page is a separate HTML document. */
body:has(> .wrap > #loginCard) .wrap { max-width: 1160px; padding: 42px 28px; }
body:has(> .wrap > #loginCard) h1 { background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 27px; margin-bottom: 30px; }
body:has(> .wrap > #loginCard) .card { padding: 24px; }
.preset-btn { background: var(--xh-surface-raised) !important; border-color: var(--xh-border) !important; border-radius: 3px !important; }
.preset-btn:hover, .fetch-item.selected { background: var(--xh-accent-soft) !important; border-color: var(--xh-accent) !important; }
.preset-btn .pn { color: var(--xh-text) !important; letter-spacing: 0; }
.preset-btn .pu, .row > label span { color: var(--xh-text-muted) !important; }
.fetch-item { border-radius: 3px !important; }
.fetch-item:hover { background: var(--xh-surface-hover) !important; }
/* Late-injected batch dialog CSS is deliberately addressed at matching specificity. */
.mb-dialog { width: min(1120px, 94vw) !important; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif !important; }
.mb-dialog .mb-head, .mb-dialog .mb-foot { border-color: var(--xh-border) !important; }
.mb-dialog .mb-head h2 { font-size: 21px !important; font-weight: 500 !important; }
.mb-dialog .mb-description, .mb-dialog .mb-muted { color: var(--xh-text-secondary) !important; }
.mb-dialog button { background: var(--xh-surface-raised) !important; border-color: var(--xh-border-strong) !important; border-radius: 3px !important; color: var(--xh-text) !important; min-height: 38px; }
.mb-dialog button:hover { background: var(--xh-surface-hover) !important; }
.mb-dialog .mb-primary { background: var(--studio-primary) !important; color: var(--studio-on-primary) !important; border-color: var(--studio-primary) !important; }
.mb-dialog .mb-primary:hover { background: var(--xh-accent) !important; border-color: var(--xh-accent) !important; }
.mb-dialog .mb-danger { background: #7d3029 !important; color: #fff4ee !important; border-color: #c16c5d !important; }
.mb-dialog .mb-danger:hover { background: #984135 !important; }
.mb-dialog .mb-table-wrap { border-color: var(--xh-border) !important; border-radius: 3px !important; }
.mb-dialog th { background: #211b15 !important; color: var(--xh-text-secondary) !important; }
.mb-dialog .mb-status { background: #2b2217 !important; color: var(--xh-text-secondary) !important; border-radius: 3px !important; }
.mb-dialog .mb-status[data-error="true"] { background: #371f1a !important; color: #ffc6b9 !important; }
.mb-dialog .mb-preview-item { border-color: var(--xh-border) !important; }
.mb-dialog .mb-block { color: #ffc1b1 !important; }
.mb-dialog input[type="checkbox"] { accent-color: var(--xh-accent) !important; }
.mb-dialog :focus-visible { outline-color: var(--xh-accent) !important; }
/* PHP-rendered gateway pages. These names come from api/src/layout.php,
   app.css, user.css, admin.css and actual render_header templates. */
:root, [data-theme="light"], [data-theme="dark"], [data-theme="chinese"] {
  --xh-violet: #d8bb86;
  --xh-indigo: #ad7947;
  --xh-blue: #d8bb86;
  --xh-cyan: #d8bb86;
  --xh-magenta: #ad7947;
  --xh-grad: linear-gradient(135deg, #e0c18b, #ad7947);
  --xh-grad-soft: linear-gradient(135deg, #d8bb86, #ad7947);
  --main-bg: #0a0a0a;
  --main-surface: #151311;
  --main-surface-soft: #211c17;
  --sidebar-bg: #100e0c;
  --sidebar-surface: #211c17;
  --sidebar-text: #c4beb3;
  --sidebar-text-hover: #f5f1e8;
  --sidebar-text-active: #d8bb86;
  --sidebar-accent: #d8bb86;
  --sidebar-accent-glow: transparent;
  --sidebar-border: #3a3228;
  --text: #f5f1e8;
  --text-soft: #c4beb3;
  --text-muted: #b1a798;
  --primary: #d8bb86;
  --primary-dark: #ad7947;
  --primary-light: #e6cda4;
  --primary-soft: #2d2419;
  --primary-glow: #d8bb8633;
  --success: #9fc5aa;
  --success-soft: #1b2b20;
  --warning: #e4c18a;
  --warning-soft: #332719;
  --danger: #f2a4a4;
  --danger-soft: #351d1b;
  --line: #3a3228;
  --line-strong: #806b51;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 18px 48px #0006;
  --shadow-xl: 0 22px 64px #0008;
  --shadow-card: none;
  --shadow-elevated: 0 22px 64px #0008;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-xl: 6px;
  --panel-bg: #151311;
  --panel-muted: #211c17;
  --panel-inset: #100e0c;
  --notice-bg: #211b14;
  --notice-border: #78644c;
  --cn-red: #ad7947;
  --cn-red-soft: #302519;
  --cn-gold: #d8bb86;
  --cn-ink: #f5f1e8;
  --cn-paper-line: #3a3228;
  --home-ve-accent: #d8bb86;
  --home-ve-active-text: #d8bb86;
}
body::before, body::after { display: none !important; animation: none !important; }
.app-layout, .main-area, .main-content, #mainArea { background: var(--main-bg) !important; color: var(--text) !important; }
.sidebar, .app-sidebar, aside.sidebar { background: var(--sidebar-bg) !important; border-color: var(--sidebar-border) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.sidebar-nav-item, .sidebar a { color: var(--sidebar-text) !important; border-radius: 3px !important; }
.sidebar-nav-item:hover, .sidebar-action-btn:hover { background: #211c17 !important; color: var(--sidebar-text-hover) !important; box-shadow: none !important; }
.sidebar-nav-item.active, .sidebar-nav-item.is-active { background: #2d2419 !important; color: var(--sidebar-text-active) !important; box-shadow: inset 1px 0 0 #d8bb86 !important; }
.sidebar-nav-section { color: var(--text-muted) !important; font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase; }
.sidebar-brand-mark, .sidebar-logo, .platform-mark, .sidebar .brand-mark,
.sidebar-user-avatar, .uc-avatar, .chat-sidebar-avatar { background: var(--xh-grad) !important; color: #19120b !important; border-radius: 5px !important; box-shadow: none !important; }
.sidebar-brand-text, .sidebar-brand-text strong { color: var(--text) !important; }
.sidebar-user-info, .sidebar-balance, .sidebar-history-copy { color: var(--text-soft) !important; }
.sidebar-footer, .sidebar-header, .sidebar-user, .sidebar-balance { border-color: var(--line) !important; }
.sidebar-action-btn, .sidebar-collapse-btn, .sidebar-toggle { color: var(--text-soft) !important; background: var(--main-surface) !important; border-color: var(--line) !important; border-radius: 3px !important; box-shadow: none !important; }
.sidebar-history-item { border-radius: 3px !important; }
.sidebar-history-item:hover { background: var(--main-surface-soft) !important; }
.sidebar-history-thumb { border-radius: 3px !important; background: var(--main-surface-soft) !important; }
.page-hd { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin-bottom: 28px; }
.page-hd h1, .brand-gradient, .brand-title, .gradient-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important; letter-spacing: -.02em; }
.page-hd h1 { font-size: 28px !important; line-height: 1.5; font-weight: 500 !important; }
.page-hd p, .field-hint, .muted-hint, .muted, .model-capability-summary-text { color: var(--text-muted) !important; }
.badge-balance { border-radius: 3px !important; background: #211b14 !important; border-color: #78644c !important; }
.badge-balance .num, .badge-balance .icon, .balance-icon { color: #d8bb86 !important; }
.badge-balance .label { color: var(--text-soft) !important; }
.card-v3, .section-card, .record-card, .table-wrap, .table-v3, .media-card,
.preview-card, .upload-card, .um-card, .mh-card, .mh-cov .box, .mb-card,
.agent-admin-card, .settings-section, .email-section, .sms-section,
.captcha-section, .signup-section, .pay-section, .builder-card, .update-card,
.channel-card, .notice-card, .invite-section, .invite-copy-box,
.pkg-stat-card, .pkg-create-section, .shop-package, .auth-card {
  background: var(--main-surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.card-v3:hover, .section-card:hover, .record-card:hover, .shop-package:hover,
.stat-card:hover, .dashboard-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--line-strong) !important; }
.card-v3-head, .card-head, .agent-admin-head, .settings-section-header,
.email-section-header, .sms-section-header, .captcha-section-header,
.signup-section-header, .pay-section-header, .builder-card-head,
.notice-card-header { background: #1b1713 !important; border-color: var(--line) !important; color: var(--text) !important; }
.settings-section-icon, .email-section-header .icon, .captcha-section-header .icon,
.signup-section-header .icon, .pay-section-header .icon, .notice-card-icon,
.pkg-stat-card.blue, .pkg-stat-card.green { color: #d8bb86 !important; background: #2d2419 !important; }
.card-head .eyebrow, .auth-card-head .eyebrow, .redeem-head .eyebrow {
  color: #d8bb86 !important; font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase;
}
.button, .um-btn, .mh-btn, .mb-btn, .channel-btn, .pkg-btn, .mc-buy,
.package-buy-btn, .btn-save { border-radius: 3px !important; box-shadow: none !important; font-family: inherit !important; }
.button.primary, .um-btn, .mh-btn, .mb-btn, .channel-btn, .pkg-btn.primary,
.mc-buy, .package-buy-btn, .btn-save { background: #f5f1e8 !important; color: #0a0a0a !important; border: 1px solid #f5f1e8 !important; }
.button.primary:hover, .um-btn:hover, .mh-btn:hover, .mb-btn:hover, .channel-btn:hover,
.pkg-btn.primary:hover, .mc-buy:hover, .package-buy-btn:hover, .btn-save:hover { background: #d8bb86 !important; color: #0a0a0a !important; border-color: #d8bb86 !important; transform: none !important; }
.button.secondary, .btn-secondary, .pkg-btn.outline, .mc-buy.g, .mb-btn.g { background: transparent !important; color: var(--text-soft) !important; border: 1px solid var(--line-strong) !important; }
.button.secondary:hover, .btn-secondary:hover, .pkg-btn.outline:hover, .mc-buy.g:hover { background: #211c17 !important; color: var(--text) !important; }
.button.danger, .button.danger.small { background: #351d1b !important; border: 1px solid #75423c !important; color: #f2a4a4 !important; }
.button.disabled, .button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.admin-nav-bar, .admin-tabs, .tabs, .mc-seg, .mode-toggle { background: var(--main-surface) !important; border-color: var(--line) !important; border-radius: 3px !important; }
.admin-nav-bar a, .admin-tabs a, .tabs a, .mc-seg button, .mc-seg a, .mode-toggle button { color: var(--text-soft) !important; border-radius: 2px !important; }
.admin-nav-bar a.active, .admin-tabs a.active, .tabs a.active, .mc-seg .on,
.mode-toggle .active, .mode-toggle .is-active { background: #2d2419 !important; color: #d8bb86 !important; border-color: #78644c !important; box-shadow: none !important; }
.admin-readonly-banner, .server-flash, .msg-box, .inline-message, .generation-notice { border-radius: 3px !important; border-color: var(--line-strong) !important; background: #241c13 !important; color: var(--text-soft) !important; }
.server-flash.error, .inline-message.error, .record-error, .preview-error { background: #351d1b !important; color: #ffc1b5 !important; }
.table-v3 th, .admin-table th, .mb-table th, .mh-table th, .invite-table th { background: #211b15 !important; color: var(--text-muted) !important; }
.table-v3 td, .admin-table td, .mb-table td, .mh-table td, .invite-table td { color: var(--text-soft); border-color: var(--line) !important; }
.table-v3 tr:hover td, .admin-table tr:hover td, .mb-table tr:hover td { background: #211b15 !important; }
.table-thumb, .record-image, .media-card, .upload-card { border-radius: 4px !important; }
.filter-bar, .filter-row, .user-search, .asset-filter, .chat-search-row,
.batch-cleanup-box, .buy-summary, .uc-stat, .credits-stat, .invite-stat,
.dash-stat, .order-stat, .user-stat, .asset-stat, .chat-stat-box {
  background: var(--main-surface-soft) !important; border-color: var(--line) !important; color: var(--text-soft) !important; border-radius: 4px !important; box-shadow: none !important;
}
.uc-stat .num, .credits-stat .value, .invite-stat .num, .dash-stat .num,
.order-stat .n, .user-stat .n, .asset-stat .n, .chat-stat-box .num { color: var(--text) !important; font-variant-numeric: tabular-nums; font-weight: 500 !important; }
.uc-stat .label, .credits-stat .label, .invite-stat .lbl, .dash-stat .lbl,
.order-stat .l, .user-stat .l, .asset-stat .l, .chat-stat-box .lbl { color: var(--text-muted) !important; font-size: 12px !important; letter-spacing: .12em; }
.uc-header, .uc-section, .mc-cur, .balance-banner { border-color: var(--line) !important; color: var(--text-soft) !important; }
.balance-banner { background: #211b14 !important; box-shadow: none !important; border-radius: 4px !important; }
.balance-banner .value, .balance-banner .icon, .mc-cur strong { color: #d8bb86 !important; }
.mc-tag, .agent-badge, .model-chip, .nav-badge { background: #302519 !important; border-color: #6b5439 !important; color: #d8bb86 !important; border-radius: 3px !important; }
.mc-plans article, .mc-plans .mc-plan, .pricing-row { background: var(--main-surface) !important; border-color: var(--line) !important; border-radius: 5px !important; box-shadow: none !important; }
.mc-plans .hot, .mc-plans .featured, .pricing-row.featured { border-color: #d8bb86 !important; background: #211b14 !important; }
.pkg-name, .pkg-price { color: var(--text) !important; }
.pkg-desc, .pkg-credits { color: var(--text-soft) !important; }
.pay-type-item { background: #211c17 !important; border-color: var(--line-strong) !important; border-radius: 3px !important; }
.pay-type-item.active, .pay-type-item:has(input:checked) { background: #2d2419 !important; border-color: #d8bb86 !important; }
.sidebar-overlay, .redeem-dialog, .record-dialog, .generation-overlay,
.page-notice-overlay, .doc-import-dialog, .api-guide-dialog,
.canvas-media-lightbox, .canvas-help-modal, .canvas-script-modal {
  background: rgb(0 0 0 / 76%) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
.redeem-panel, .record-dialog-panel, .error-dialog-panel, .page-notice-panel,
.doc-import-panel, .api-guide-panel, .theme-menu, .record-action-dropdown,
.canvas-context-menu, .canvas-help-panel, .canvas-script-modal-panel,
.canvas-minimap-panel, .canvas-media-lightbox-shell, .dialog-panel {
  background: var(--studio-overlay) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; border-radius: 5px !important; box-shadow: 0 22px 64px #0008 !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
.theme-menu button, .record-action-dropdown button, .record-action-dropdown a { color: var(--text-soft) !important; }
.theme-menu button:hover, .theme-menu button.active, .record-action-dropdown button:hover,
.record-action-dropdown a:hover { background: #2d2419 !important; color: #d8bb86 !important; }
.dialog-close, .record-dialog-close, .canvas-help-close { color: var(--text-soft) !important; background: #211c17 !important; border-color: var(--line) !important; border-radius: 3px !important; }
.main-area-header, .chat-topbar, .chat-foot, .creation-topbar,
.designer-topbar, .canvas-toolbar, .canvas-node-quickbar, .home-top-brand {
  background: var(--studio-overlay) !important; color: var(--text) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
.chat-sidebar, .creation-sidebar, .canvas-sidebar, .designer-shell,
.agent-drawer, .agent-stage, .chat-input-wrap, .chat-model-picker,
.canvas-panel, .canvas-node-card, .canvas-project-card, .canvas-task-card,
.agent-admin-body, .agent-config-section, .model-pricing-editor,
.model-pricing-generator { background: var(--main-surface) !important; color: var(--text) !important; border-color: var(--line) !important; box-shadow: none !important; }
.chat-conv-item:hover, .chat-conv-item.active, .creation-history-group.active,
.canvas-project-card.active, .canvas-sidebar-tabs .is-active,
.canvas-node-card.selected { background: #2d2419 !important; color: #d8bb86 !important; border-color: #78644c !important; }
.chat-msg-user .chat-msg-body { background: #302519 !important; color: var(--text) !important; border-color: #78644c !important; }
.chat-msg-ai .chat-msg-body { background: var(--main-surface) !important; color: var(--text-soft) !important; border-color: var(--line) !important; }
.chat-msg-err .chat-msg-body { background: #351d1b !important; color: #ffc1b5 !important; }
.chat-send-btn, .chat-new-btn, .canvas-node-run-btn { background: #f5f1e8 !important; color: #0a0a0a !important; border-color: #f5f1e8 !important; border-radius: 3px !important; }
.canvas-node-icon, .canvas-port, .canvas-step-pill, .canvas-project-save-state.is-saving { color: #d8bb86 !important; background: #302519 !important; }
.canvas-project-save-state.is-saved { color: #9fc5aa !important; background: #1b2b20 !important; }
.canvas-project-save-state.is-error { color: #f2a4a4 !important; background: #351d1b !important; }
.canvas-edge-path { stroke: #d8bb86 !important; }
.home-top-mark, .chat-welcome-icon { background: var(--xh-grad) !important; color: #19120b !important; box-shadow: none !important; }
.auth-bg, .auth-card { background: var(--main-surface) !important; color: var(--text) !important; }
.auth-bg::before, .auth-bg::after { display: none !important; }
.cta-primary { background: #f5f1e8 !important; color: #0a0a0a !important; border-color: #f5f1e8 !important; border-radius: 3px !important; box-shadow: none !important; }
.cta-ghost { background: transparent !important; color: var(--text-soft) !important; border-color: var(--line-strong) !important; border-radius: 3px !important; }
@media (max-width: 1180px) {
  .side, .aside { width: 218px !important; padding-inline: 12px !important; }
  .body { padding: 28px !important; }
  .abody { padding: 24px !important; }
  .atop { padding-inline: 24px !important; }
  .plans, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  /* Existing sidebar links stay available without inventing a menu interaction. */
  .ashell { flex-direction: column; }
  .aside { display: flex !important; width: 100% !important; height: auto !important; position: static !important; padding: 16px 22px !important; border-right: 0; border-bottom: 1px solid var(--xh-border); }
  .aside .brand { padding: 0 0 12px !important; }
  .aside nav { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
  .aside nav .grp { width: 100%; margin: 8px 0 0 !important; font-size: 10px !important; }
  .aside nav a { padding: 8px 11px !important; margin: 0; font-size: 12px; }
  .aside .back { margin-top: 14px; padding-top: 12px; }
  .atop { position: static !important; }
  .atools { gap: 10px; flex-wrap: wrap; }
  .a-panel { overflow-x: auto; }
  .a-table { min-width: 670px; }
  .a-grid2, .a-grid3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .shell { flex-direction: column; }
  .side { display: block !important; width: 100% !important; padding: 18px 22px !important; border-right: 0; border-bottom: 1px solid var(--xh-border); }
  .side .brand { padding-bottom: 14px !important; }
  .side .u { padding: 12px 0 !important; }
  .side nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .side nav a { padding: 8px 10px !important; margin: 0; font-size: 12px; }
  .side nav .sec { width: 100%; margin: 12px 0 0 !important; font-size: 10px !important; }
  .body, .abody { padding: 24px 20px !important; }
  .bar h1, .atop h1 { font-size: 23px !important; }
  .bar { gap: 16px; }
  .atop { padding: 20px !important; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .atools { width: 100%; justify-content: space-between; }
  .a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .a-kpi { padding: 18px !important; }
  .a-kpi .k-val { font-size: 25px !important; }
  .a-kpi .k-ico { width: 28px; }
  .a-kpi .k-label { letter-spacing: 0; font-size: 11px !important; }
  .a-panel, .panel { padding: 20px !important; }
  .a-tools { width: 100%; }
  .a-tools > .inp { min-width: 0; width: 100% !important; }
  .a-search { min-width: 0 !important; }
  .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .a-set { align-items: flex-start; }
  .a-set input.inp { max-width: 130px; }
  .plans, .packs { grid-template-columns: 1fr !important; }
  .cards { grid-template-columns: 1fr !important; }
  .bal-panel { gap: 18px; flex-wrap: wrap; }
  .bv { font-size: 26px !important; }
  .auth-wrap { padding: 78px 22px 44px !important; }
  .auth-wrap .card { padding: 26px 22px !important; }
  .auth-wrap .back { top: 16px; left: 14px; }
  .modal, .paybox { max-width: calc(100vw - 32px) !important; padding: 24px !important; }
  .modal .g2 { grid-template-columns: 1fr !important; }
  .zyxh-pop { max-width: calc(100vw - 32px); }
  #floating-canvas-cta { bottom: 16px !important; right: 16px !important; height: 40px !important; padding-inline: 16px !important; }
  body:has(> .wrap > #loginCard) .wrap { padding: 26px 20px; }
  body:has(> .wrap > #loginCard) .card { overflow-x: auto; }
  body:has(> .wrap > #loginCard) table { min-width: 700px; }
  .mb-dialog .mb-head, .mb-dialog .mb-body, .mb-dialog .mb-foot { padding: 16px !important; }
  .mb-dialog .mb-foot { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .modal, .paybox, .zyxh-pop, .mb-dialog, [role="dialog"], dialog, .atop, .nav { background: #100e0c !important; }
}

/* PHP shared layout: outrank the legacy late !important theme without touching Vue or host UI. */
html[data-theme] body[class*="page-"]:has(> .app-layout) {
  background: #0a0a0a !important;
  --main-bg: #0a0a0a; --main-surface: #151311; --main-surface-soft: #211c17;
  --text: #f5f1e8; --text-soft: #c4beb3; --text-muted: #a69c8c;
  --line: #3a3228; --line-strong: #806b51; --sidebar-text: #c4beb3;
  --sidebar-text-hover: #f5f1e8; --sidebar-text-active: #d8bb86;
  --sidebar-accent: #d8bb86; --sidebar-bg: #100e0c;
  --home-bg-image: none; --home-ve-accent: #d8bb86; --home-ve-active-text: #0a0a0a;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) > .app-layout,
html[data-theme] body[class*="page-"] .app-layout > #mainArea {
  background: #0a0a0a !important; color: #f5f1e8 !important;
  background-image: none !important; box-shadow: none !important;
}
html[data-theme] body[class*="page-"] .app-layout > #mainArea::before,
html[data-theme] body[class*="page-"] .app-layout > #mainArea::after,
html[data-theme] body[class*="page-"] #mainArea .home-dashboard::before {
  background-image: none !important; box-shadow: none !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .app-layout > .sidebar {
  background: #100e0c !important; background-image: none !important;
  border-right: 1px solid #3a3228 !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-header,.sidebar-footer) {
  background: transparent !important; border-color: #3a3228 !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-brand,.sidebar-nav-item,.sidebar-history-item,.sidebar-user,.sidebar-balance,.sidebar-action-btn,.sidebar-collapse-btn) {
  background: #151311 !important; color: #c4beb3 !important;
  border: 1px solid #3a3228 !important; border-radius: 4px !important;
  box-shadow: none !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-nav-item,.sidebar-history-item,.sidebar-user,.sidebar-action-btn):hover,
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-nav-item,.sidebar-history-item).active {
  background: #2d2419 !important; color: #d8bb86 !important; border-color: #806b51 !important;
  box-shadow: inset 2px 0 0 #d8bb86 !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .sidebar-nav-item.active :is(svg,.nav-label) { color: #d8bb86 !important; }
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-brand-text h1,.sidebar-user-name,.sidebar-balance strong) { color: #f5f1e8 !important; }
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar :is(.sidebar-brand-text small,.sidebar-nav-section,.sidebar-user-role,.sidebar-balance span) { color: #c4beb3 !important; }
html[data-theme] body[class*="page-"] #mainArea :is(.card,.card-v3,.home-console,.home-console-head,.home-console-body,.home-prompt-shell,.home-balance-card,.uc-stat,.verify-card,.pay-qr-panel) {
  color: #f5f1e8 !important; background: #151311 !important; background-image: none !important;
  border-color: #3a3228 !important; box-shadow: none !important; border-radius: 5px !important;
}
html[data-theme] body[class*="page-"] #mainArea :is(.home-top-brand,.home-top-nav,.home-create-toolbar,.home-mode-tabs) {
  background: #151311 !important; background-image: none !important; color: #c4beb3 !important;
  border-color: #3a3228 !important; box-shadow: none !important;
}
html[data-theme] body[class*="page-"] #mainArea :is(.home-mode-tabs button.active,.home-top-nav a.is-active,.tabs .tab.active) {
  background: #2d2419 !important; color: #d8bb86 !important; border-color: #806b51 !important;
}
html[data-theme] body[class*="page-"] #mainArea :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) {
  background: #100e0c !important; color: #f5f1e8 !important; border-color: #806b51 !important;
  border-radius: 3px !important; box-shadow: none !important;
}
html[data-theme] body[class*="page-"] #mainArea .home-console #homeGenerateButton {
  background: #f5f1e8 !important; color: #0a0a0a !important; border-color: #f5f1e8 !important; box-shadow: none !important;
}
html[data-theme] body[class*="page-"] #mainArea :is(.verify-wrap,.pay-qr-page,.auth-wrap) { background: #0a0a0a !important; }
html[data-theme] body[class*="page-"] #mainArea .field-hint {
  background: transparent !important; border: 0 !important;
  color: #c4beb3 !important; box-shadow: none !important;
}
/* The shared script toggles .theme-picker.is-open in both user and admin layouts. */
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .theme-picker { position: relative; }
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .theme-picker .theme-menu {
  display: none !important; position: absolute !important; z-index: 40 !important;
  inset: auto 0 calc(100% + 8px) auto !important; min-width: 150px;
  padding: 6px !important; background: #151311 !important; color: #c4beb3 !important;
  border: 1px solid #806b51 !important; border-radius: 4px !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .theme-picker.is-open .theme-menu { display: grid !important; gap: 3px; }
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .theme-menu button {
  padding: 9px 12px !important; text-align: left; color: #c4beb3 !important;
  background: transparent !important; border: 0 !important; border-radius: 2px !important;
}
html[data-theme] body[class*="page-"]:has(> .app-layout) .sidebar .theme-menu button:is(:hover,.is-active) { background: #2d2419 !important; color: #d8bb86 !important; }