@import url('/css/shared-ui.css?v=20260524h');

@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Suit';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root:not([data-theme]){
  /* Fallback tokens when theme.css is not loaded on a page */
  --bg:#070a10;
  --bg-2:#0e1426;
  --panel: rgba(14, 18, 32, 0.86);
  --panel-strong: rgba(12, 16, 32, 0.72);
  --border: rgba(255, 255, 255, 0.08);
  --stroke: rgba(0, 183, 255, 0.18);
  --text:#e6eaf2;
  --muted:rgba(230,234,242,.65);
  --accent-a:#00b7ff;
  --accent-b:#4bc8ff;
  --glass-blur: 20px;
  --glass-sat: 160%;
  --glass-bright: 108%;
  --glass-edge: rgba(255, 255, 255, 0.30);
  --glass-inner: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 20px 48px rgba(0,0,0,.32);
  --glass-panel: rgba(255,255,255,.12);
  --home-glass: rgba(255, 255, 255, 0.06);
  --home-glass-strong: rgba(255, 255, 255, 0.10);
  --home-border: color-mix(in srgb, var(--border) 62%, rgba(255, 255, 255, 0.34));
  --home-edge: rgba(255, 255, 255, 0.20);
  --home-inner: rgba(255, 255, 255, 0.06);

  /* Legacy aliases mapped to theme.css variables */
  --blue: var(--accent-a);
  --stroke2: var(--border);
  --r:16px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --scrollbar-size: 12px;
  --scrollbar-track: color-mix(in srgb, var(--panel-strong) 84%, rgba(255,255,255,.06));
  --scrollbar-thumb: color-mix(in srgb, var(--accent-a) 38%, rgba(255,255,255,.40));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-a) 52%, rgba(255,255,255,.52));
  --scrollbar-thumb-active: color-mix(in srgb, var(--accent-a) 62%, rgba(255,255,255,.60));
}

:root{
  --home-glass: rgba(255, 255, 255, 0.06);
  --home-glass-strong: rgba(255, 255, 255, 0.10);
  --home-border: color-mix(in srgb, var(--border) 62%, rgba(255, 255, 255, 0.34));
  --home-edge: rgba(255, 255, 255, 0.20);
  --home-inner: rgba(255, 255, 255, 0.06);
  --scrollbar-size: 12px;
  --scrollbar-track: color-mix(in srgb, var(--panel-strong) 84%, rgba(255,255,255,.06));
  --scrollbar-thumb: color-mix(in srgb, var(--accent-a) 38%, rgba(255,255,255,.40));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-a) 52%, rgba(255,255,255,.52));
  --scrollbar-thumb-active: color-mix(in srgb, var(--accent-a) 62%, rgba(255,255,255,.60));
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-ui);
  background: var(--bg);
  transition: background .24s ease, color .2s ease;
}

/* ---------- Global Scrollbar ---------- */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*{
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-thumb:active{
  background: var(--scrollbar-thumb-active);
}
*::-webkit-scrollbar:horizontal{
  height: 8px;
}
*::-webkit-scrollbar-track:horizontal{
  background: transparent;
}
*::-webkit-scrollbar-thumb:horizontal{
  background: transparent;
  border-color: transparent;
}
*::-webkit-scrollbar-corner{
  background: transparent;
}

/* Viewer channel pages should not show the default blue glow. */
body[data-page]{
  background: var(--bg);
}

.globalPageLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, .50);
  backdrop-filter: blur(3px);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  transition: opacity .2s ease;
}

.globalPageLoadingOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}

a{ color:inherit; text-decoration:none; }
button,input{ font-family:inherit; }
button{ -webkit-tap-highlight-color: transparent; }

/* ---------- app layout (dashboard/songs) ---------- */
.app{
  display:grid;
  grid-template-columns: 1fr;
  min-height:calc(100dvh - 24px);
  gap:12px;
  padding:18px;
  width:min(1560px, 100%);
  margin:0 auto;
}

/* Unified width for admin/management pages */
.app.appAdmin{
  width:min(1560px, 100%);
}

.app.appAdmin .grid{
  max-width: 1180px;
  margin: 0 auto;
}

.sidebar{
  display:block;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding:0;
  position:sticky;
  top:8px;
  height:auto;
  border-radius:0;
  box-shadow:none;
  z-index: 20;
}

.brand{
  display:none;
}
.brand .dot{
  width:12px;height:12px;border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent-a) 42%, transparent);
}
.brand .title{ font-weight:800; letter-spacing:.3px; }
.brand .sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap: clamp(16px, 2.2vw, 32px);
  min-height: 64px;
  padding: 0 14px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.nav a{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 0.4rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.nav a:hover{
  color: var(--accent-a);
}
.nav a.active{
  color: var(--accent-a);
}
.nav:has(a:hover) a:not(:hover){
  opacity: 0.3;
}

.sidebar .meta{
  display:none;
}
.metaTextHidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border:0 !important;
}

.main{
  padding:8px 10px 28px;
  position:relative;
  min-width:0;
}

/* Viewer channel pages: reduce unnecessary bottom gap */
body[data-page] .app{
  padding-bottom: 8px;
}
body[data-page] .main{
  padding-bottom: 8px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.hgroup h1{
  font-size:22px;
  margin:0;
  letter-spacing:.2px;
}
.hgroup p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* ---------- Shared UX helpers ---------- */
.uiSectionTabs{
  position: static;
  top: auto;
  z-index: auto;
}
.uiSectionTabs[data-ui-sticky="true"]{
  position: sticky;
  top: 62px;
  z-index: 15;
}
.uiSectionTabs .seg{
  flex-wrap: wrap;
}
.uiSectionTabs .btn{
  white-space: nowrap;
}
.uiTabPanel[hidden]{
  display:none !important;
}

.uiScrollPanel{
  max-height: var(--ui-scroll-height, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

[data-ui-accordion]{
  position: relative;
}
.uiAccordionToggle{
  position: static;
  align-self: flex-end;
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
}
[data-ui-accordion].is-collapsed > :not(.uiAccordionToggle):not([data-ui-accordion-keep]){
  display:none !important;
}

.uiNativeSelectHidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
}

.uiSelect{
  position: relative;
  min-width: 120px;
}
.uiSelectBtn{
  height: 34px;
  min-width: 120px;
  border-radius: 14px;
  border: 1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  color: var(--text);
  padding: 0 32px 0 12px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 74%, transparent),
    0 8px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}
.uiSelectBtn::after{
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: .75;
}
.uiSelectMenu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  border: 1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 74%, transparent),
    0 12px 28px rgba(0,0,0,.24);
  padding: 6px;
  max-height: 280px;
  overflow: auto;
  display: none;
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}
.uiSelect.open .uiSelectMenu{
  display: block;
}
.uiSelectMenu.is-open{
  display: block;
}
.uiSelectMenu.uiSelectMenuPortal{
  position: fixed;
  left: -99999px;
  top: -99999px;
  right: auto;
}
.uiSelectOpt{
  width: 100%;
  border: 0;
  background: color-mix(in srgb, rgba(255,255,255,.02) 80%, transparent);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}
.uiSelectOpt:hover,
.uiSelectOpt.is-active{
  background: color-mix(in srgb, var(--accent-a) 24%, rgba(255,255,255,.10));
}

.uiToastWrap{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000;
  display: grid;
  gap: 8px;
}
.uiToast{
  min-width: 220px;
  max-width: min(420px, calc(100vw - 32px));
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
  color: var(--text);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

.uiAlertMask{
  position: fixed;
  inset: 0;
  z-index: 12010;
  background: color-mix(in srgb, var(--bg) 64%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.uiAlertMask.show{
  display: flex;
}
.uiAlertCard{
  width: min(520px, 92vw);
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background:
    var(--glass-panel),
    color-mix(in srgb, var(--panel-strong) 94%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-inner) 58%, transparent),
    var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  padding: 16px;
}
.uiAlertTitle{
  font-size: 16px;
  font-weight: 800;
}
.uiAlertMsg{
  margin-top: 10px;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}
.uiAlertActions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .card,
  .card2,
  .modalCard,
  .uiAlertCard {
    backdrop-filter: none !important;
    background: color-mix(in srgb, var(--panel-strong) 98%, transparent) !important;
  }
}

/* ---------- common blocks ---------- */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  max-width: 980px;
}

.card{
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  border:1px solid var(--home-border);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 74%, transparent),
    0 12px 28px rgba(0,0,0,.18);
  padding:16px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.muted{ color:var(--muted); }

.pill{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid color-mix(in srgb, var(--border) 70%, rgba(255,255,255,.30));
  color:var(--muted);
  background: color-mix(in srgb, rgba(255,255,255,.08) 72%, transparent);
}

/* Buttons */
.btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 74%, rgba(255,255,255,.22));
  background: color-mix(in srgb, rgba(255,255,255,.06) 80%, transparent);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  backdrop-filter: blur(12px) saturate(122%);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .12s ease;
}
.btn:hover{
  border-color: color-mix(in srgb, var(--stroke) 56%, rgba(255,255,255,.38));
  background: var(--home-glass-strong);
  transform: translateY(-1px);
}
.btn.primary{
  background: color-mix(in srgb, var(--accent-a) 82%, rgba(255,255,255,.16));
  border-color: transparent;
  color:#031018;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent-a) 36%, transparent);
}
.btn.ghost{
  background: color-mix(in srgb, rgba(255,255,255,.06) 80%, transparent);
  border-color: color-mix(in srgb, var(--border) 74%, rgba(255,255,255,.20));
  color: var(--text);
}
.btn.big{
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
}

/* Inputs */
.input{
  background: var(--home-glass);
  border: 1px solid color-mix(in srgb, var(--border) 70%, rgba(255,255,255,.30));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  min-width: 220px;
  backdrop-filter: blur(10px) saturate(118%);
}
.input:focus{
  border-color: color-mix(in srgb, var(--stroke) 52%, rgba(255,255,255,.40));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-a) 16%, transparent);
}

[data-theme-select]{
  min-width: 148px;
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- Switch (toggle) ---------- */
.switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch .track{
  width:46px;
  height:26px;
  border-radius:999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border:1px solid var(--stroke2);
  position:relative;
  transition: background .18s ease, border-color .18s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 18%, transparent);
}
.switch .thumb{
  position:absolute;
  top:50%;
  left:3px;
  transform: translateY(-50%);
  width:20px;
  height:20px;
  border-radius:999px;
  background: color-mix(in srgb, var(--text) 86%, var(--panel-strong));
  transition: left .18s ease, background .18s ease;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--bg) 34%, transparent);
}
.switch input:checked + .track{
  background: color-mix(in srgb, var(--accent-a) 42%, transparent);
  border-color: var(--stroke);
}
.switch input:checked + .track .thumb{
  left:23px;
  background: rgba(230,234,242,.95);
}
.switch input:focus-visible + .track{
  outline: 2px solid color-mix(in srgb, var(--accent-a) 60%, transparent);
  outline-offset: 2px;
}
.switch.small .track{ width:38px; height:22px; }
.switch.small .thumb{ width:16px; height:16px; left:3px; }
.switch.small input:checked + .track .thumb{ left:19px; }

/* ---------- Commands list rows ---------- */
.cmdRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:12px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border:1px solid var(--stroke2);
}
.cmdLeft{ flex:1; min-width:0; }
.cmdMeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmdReply{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmdRight{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.cmdToggles{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cmdActions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------- Commands page sections ---------- */
.ccSectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
}
.ccSectionTitle{
  font-weight:700;
  letter-spacing:-0.2px;
}
.ccSectionDesc{
  margin-top:2px;
  font-size:12px;
  color: var(--muted);
}

/* ---------- Shared Promo Slots ---------- */
.promoTopBanner{
  margin-bottom: 14px;
}
.promoSlot{
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  color: color-mix(in srgb, var(--text) 94%, transparent);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 74%, transparent),
    0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}
.promoSlot::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  border-radius: 10px;
  pointer-events: none;
  display:none;
}
.promoImageLink{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events: none;
  cursor: default;
}
.promoArt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.promoTopBanner .promoSlot{
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}
.promoBottomBanner{
  margin-top: 12px;
}
.promoBottomBanner .promoSlot{
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}
.promoPlaceholder{
  width: 100%;
  min-height: inherit;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28);
  background: #000;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 14px;
}
.promoGridShell{
  position: relative;
  display: grid;
  /* Keep content centered regardless of right ad width */
  grid-template-columns: 160px minmax(0, 1180px) 160px;
  gap: 14px;
  align-items: start;
  justify-content: center;
}
.promoContentWrap{
  grid-column: 2;
  min-width: 0;
  max-width: 1180px;
  margin: 0;
  display: grid;
  gap: 14px;
}
.promoContentWrap > *{
  min-width: 0;
}
.promoRail{
  grid-column: 3;
  position: sticky;
  top: 78px;
  display: grid;
  gap: 10px;
  width: 160px;
  margin-left: 0;
}
.promoRail .promoSlot{
  width: 160px;
  aspect-ratio: 160 / 600;
  min-height: 0;
  padding: 0;
  align-items: start;
  justify-items: center;
}
.promoRailNote{
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  text-align: center;
}
@media (max-width: 1540px){
  .promoGridShell{
    grid-template-columns: minmax(0, 1180px) 160px;
    gap: 12px;
  }
  .promoContentWrap{
    grid-column: 1;
  }
  .promoRail{
    grid-column: 2;
  }
}

@media (max-width: 1180px){
  .promoGridShell{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .promoContentWrap{
    grid-column: 1;
  }
  .promoRail{
    grid-column: 1;
    position: static;
    width: 100%;
    margin-left: 0;
    justify-self: stretch;
  }
  .promoRail .promoSlot{
    width: min(100%, 320px);
    margin: 0 auto;
  }
}

/* ---------- minor helpers ---------- */
.spacer{ flex:1; }

/* Share */
.shareBox{
  display:flex;
  gap:10px;
  align-items:center;
}
.shareLink{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border:1px solid var(--stroke2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.blur{ filter: blur(6px); }

/* Queue list (songs/player) */
.queueList{
  display:grid;
  gap:8px;
}
.queueItem{
  padding:10px 12px;
  border-radius:12px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border:1px solid var(--stroke2);
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.queueItem b{
  color: var(--text);
}
.queueItem .sub{
  display:block;
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
}

/* ---------- aliases (player.html uses *2 classes) ---------- */
.card2{ composes: card; } /* harmless if ignored */
.row2{ composes: row; }
.pill2{ composes: pill; }
.muted2{ composes: muted; }

.card2{
  background:
    var(--glass-panel),
    color-mix(in srgb, var(--panel-strong) 92%, transparent);
  border:1px solid var(--stroke2);
  border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--glass-inner) 58%, transparent),
    var(--glass-shadow);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  padding:16px;
}
.row2{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pill2{ padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--stroke2); color:var(--muted); background: color-mix(in srgb, var(--panel) 74%, transparent); }
.muted2{ color:var(--muted); }

.btn2{ border:1px solid var(--stroke2); background: color-mix(in srgb, var(--panel) 72%, transparent); color: color-mix(in srgb, var(--text) 92%, transparent); padding:10px 12px; border-radius:12px; cursor:pointer; }
.btn2:hover{ border-color: var(--stroke); background: color-mix(in srgb, var(--accent-a) 12%, transparent); }
.btn2.primary{ background: linear-gradient(120deg, var(--accent-a), var(--accent-b)); border-color: transparent; color:#06101A; font-weight:900; }

/* ---------- player (no sidebar) ---------- */
body.player-page{
  background: var(--bg);
  transition: background .24s ease, color .2s ease;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body.player-page #bg{
  position: fixed;
  inset: -26%;
  pointer-events: none;
  z-index: -2;
  opacity: .72;
  filter: blur(56px) saturate(1.06);
  background:
    radial-gradient(40% 42% at 18% 22%, rgba(var(--amb1-rgb), .30), transparent 70%),
    radial-gradient(38% 40% at 82% 28%, rgba(var(--amb2-rgb), .24), transparent 72%),
    radial-gradient(46% 44% at 56% 82%, rgba(var(--amb1-rgb), .20), transparent 74%);
  animation: bgWave 22s ease-in-out infinite alternate;
}
body.player-page #bg::before{
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  border-radius: 50%;
  opacity: .56;
  filter: blur(68px);
  background:
    radial-gradient(34% 36% at 70% 24%, rgba(var(--amb2-rgb), .28), transparent 72%),
    radial-gradient(36% 34% at 26% 74%, rgba(var(--amb1-rgb), .24), transparent 74%);
  animation: bgRipple 26s ease-in-out infinite;
}

body.player-page::before,
body.player-page::after{
  content:"";
  position: fixed;
  inset: -30%;
  pointer-events:none;
  z-index:-1;
  mix-blend-mode: screen;
}
body.player-page::before{
  opacity:.26;
  filter: blur(78px);
  background: radial-gradient(40% 38% at 22% 30%, rgba(var(--amb1-rgb), .28), transparent 72%);
  animation: playerWave 24s ease-in-out infinite;
}
body.player-page::after{
  opacity:.20;
  filter: blur(96px);
  background: radial-gradient(36% 34% at 78% 66%, rgba(var(--amb2-rgb), .24), transparent 74%);
  animation: playerWave 30s ease-in-out infinite reverse;
}

@keyframes playerWave{
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1.06);
    border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  }
  25% {
    transform: translate3d(2%, -1%, 0) scale(1.10);
    border-radius: 52% 48% 58% 42% / 48% 56% 44% 52%;
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.12);
    border-radius: 58% 42% 46% 54% / 56% 40% 60% 44%;
  }
  75% {
    transform: translate3d(-1%, 2%, 0) scale(1.08);
    border-radius: 50% 50% 42% 58% / 60% 48% 52% 40%;
  }
  100% {
    transform: translate3d(-4%, -3%, 0) scale(1.06);
    border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  }
}

@keyframes bgWave{
  0% {
    transform: translate3d(-6%, 3%, 0) scale(1.08);
    background-position: 48% 52%, 52% 50%, 50% 54%, 0 0;
  }
  25% {
    transform: translate3d(3%, -3%, 0) scale(1.14);
    background-position: 54% 48%, 46% 54%, 52% 44%, -120px 60px;
  }
  50% {
    transform: translate3d(6%, 4%, 0) scale(1.12);
    background-position: 56% 54%, 44% 48%, 48% 58%, 90px -80px;
  }
  75% {
    transform: translate3d(-2%, -2%, 0) scale(1.10);
    background-position: 50% 46%, 50% 56%, 56% 50%, -60px -40px;
  }
  100% {
    transform: translate3d(-6%, 3%, 0) scale(1.08);
    background-position: 48% 52%, 52% 50%, 50% 54%, 0 0;
  }
}

@keyframes bgRipple{
  0% { transform: translate3d(-4%, 0, 0) scale(1.02); opacity:.58; }
  50% { transform: translate3d(4%, -3%, 0) scale(1.10); opacity:.72; }
  100% { transform: translate3d(-4%, 0, 0) scale(1.02); opacity:.58; }
}

/* Fullscreen/large viewport stabilization:
   reduce expensive blur+blend animation layers that can flicker on some GPUs. */
@media (min-width: 1500px), (min-height: 980px) {
  body.player-page #bg,
  body.player-page #bg::before,
  body.player-page::before,
  body.player-page::after {
    animation: none !important;
    transform: none !important;
  }

  body.player-page #bg {
    filter: blur(42px) saturate(1.02) contrast(1.01);
    background-size: 150% 150%, 145% 145%, 145% 145%, 220px 220px;
    background-position: 50% 50%, 50% 50%, 50% 50%, 0 0;
  }

  body.player-page #bg::before,
  body.player-page::before,
  body.player-page::after {
    mix-blend-mode: normal;
  }

  body.player-page::before {
    opacity: .28;
    filter: blur(44px) saturate(1.04);
  }

  body.player-page::after {
    opacity: .2;
    filter: blur(52px) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-page #bg,
  body.player-page #bg::before,
  body.player-page::before,
  body.player-page::after {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- Player Layout (migrated from inline) ---------- */
body.player-page .sidebar{ display:none !important; }
body.player-page .app{ display:block !important; }
body.player-page .wrap{
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 18px;
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  overflow: visible;
}
body.player-page .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  position: relative;
  z-index: 1200;
  overflow: visible;
}
body.player-page .brand{ display:flex; align-items:center; gap:10px; }
body.player-page .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent-a);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-a) 45%, transparent);
}
body.player-page .title h1{ margin:0; font-size:28px; line-height:1.1; }
body.player-page .title p{ margin:6px 0 0; opacity:.8; }
body.player-page .links{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  position: relative;
  z-index: 1300;
  overflow: visible;
}
body.player-page .links .uiSelect{
  position: relative;
  z-index: 1310;
}
body.player-page .links .uiSelect.open{
  z-index: 1320;
}
body.player-page .top .uiSelectMenu{
  z-index: 1330;
}
body.player-page .layout{
  display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:14px;
  flex:1; min-height:0; height:100%;
  align-items:start;
  position: relative;
  z-index: 1;
}
body.player-page .playerLeft,
body.player-page .playerRight{ min-height:0; }
body.player-page .playerLeft{
  display:grid;
  grid-template-columns:420px minmax(0, 1fr);
  gap:14px;
  overflow:hidden;
  align-items:start;
  height:100%;
}
body.player-page .queueCard{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  height:100%;
  overflow:hidden;
}
body.player-page .playerCard{
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
body.player-page #queueList{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
}
body.player-page .queueRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--border) 68%, rgba(255,255,255,.22));
  background: color-mix(in srgb, rgba(255,255,255,.05) 78%, transparent);
}
body.player-page .queueRow.nowPlaying{
  border-color: color-mix(in srgb, var(--accent-a) 58%, rgba(255,255,255,.28));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a) 28%, transparent);
}
body.player-page .playerRight{
  overflow-y:auto;
  padding-right:4px;
  display:grid;
  gap:14px;
  align-content:start;
}
body.player-page .card{
  width:100%;
  border-radius: var(--r);
  border:1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  padding:12px;
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 74%, transparent),
    0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}
body.player-page .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
body.player-page .pill{
  display:inline-flex; align-items:center; padding:4px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 70%, rgba(255,255,255,.30));
  background: color-mix(in srgb, rgba(255,255,255,.08) 72%, transparent);
  font-size:12px; opacity:.9;
}
body.player-page .muted{ opacity:.8; color:var(--muted); }
body.player-page .blur{ filter: blur(6px); }
body.player-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 74%, rgba(255,255,255,.22));
  background: color-mix(in srgb, rgba(255,255,255,.06) 80%, transparent);
  color:var(--text); text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:none;
  backdrop-filter: blur(12px) saturate(122%);
  -webkit-backdrop-filter: blur(12px) saturate(122%);
}
body.player-page .btn.primary{
  border-color: transparent;
  background: color-mix(in srgb, var(--accent-a) 82%, rgba(255,255,255,.16));
  color:#06101a;
  font-weight:800;
}
body.player-page .btn.ghost{
  background: color-mix(in srgb, rgba(255,255,255,.06) 80%, transparent);
}
body.player-page .btn:hover{
  background: var(--home-glass-strong);
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40));
}
body.player-page .btn.primary:hover{ filter:brightness(1.04); }
body.player-page .ytWrap{
  position:relative; width:100%; height:360px;
  max-height:min(52vh,420px); border-radius:16px; overflow:hidden;
}
body.player-page #ytPlayer{ position:absolute; inset:0; width:100%; height:100%; }
body.player-page #ytPlayer iframe{ pointer-events:none; }
body.player-page .ytInputBlocker{
  position:absolute; inset:0; z-index:5; background:transparent; cursor:default;
}
body.player-page .stationLoadingBanner{
  position:absolute;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  z-index:9;
  display:none;
  align-items:center;
  justify-content:center;
  min-width:min(90%, 520px);
  max-width:min(94%, 620px);
  padding:12px 18px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent-a) 62%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, #000 28%);
  color: color-mix(in srgb, var(--text) 98%, transparent);
  font-size:18px;
  font-weight:900;
  text-align:center;
  letter-spacing:.2px;
  box-shadow:0 14px 36px rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  pointer-events:none;
}
body.player-page .stationLoadingBanner.is-show{ display:flex; }
body.player-page .streamerPlaylistBox{
  margin-top: 12px;
  border:1px solid color-mix(in srgb, var(--border) 70%, rgba(255,255,255,.30));
  border-radius:12px;
  background: color-mix(in srgb, rgba(255,255,255,.06) 80%, transparent);
  padding:10px;
}
body.player-page .streamerPlaylistTools{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
body.player-page .quickTools{
  margin-top:10px;
  display:grid;
  gap:8px;
}
body.player-page .overlayToolsCard .quickTools{
  margin-top:0;
}
body.player-page .quickToolRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
body.player-page .playerShareRow{
  margin-top: 10px;
}
body.player-page .playerShareRow #shareLink{
  flex: 1 1 260px;
  min-width: 220px;
}
body.player-page .obsPreviewHead{
  margin-top: 10px;
}
body.player-page .obsPreviewFrameWrap{
  margin-top: 8px;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--stroke2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
body.player-page .obsPreviewFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
body.player-page .subsModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  z-index:1200;
}
body.player-page .subsModal.open{ display:flex; }
body.player-page .subsPanel{
  width:min(980px, 96vw);
  min-height:min(80vh, 760px);
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  box-shadow: 0 20px 44px rgba(0,0,0,.34);
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  padding:14px;
}
body.player-page .controlLockMask,
body.player-page .overlayOfflineMask{
  position:fixed;
  inset:0;
  z-index:1300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background: rgba(5, 8, 16, .48);
  backdrop-filter: blur(2px);
}
body.player-page .controlLockCard,
body.player-page .overlayOfflineCard{
  width:min(92vw, 640px);
  border-radius:16px;
  border:1px solid var(--home-border);
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel-strong) 74%, transparent);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .42);
  padding:20px 18px;
}
body.player-page .controlLockTitle,
body.player-page .overlayOfflineTitle{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.45;
}
body.player-page .controlLockSub,
body.player-page .overlayOfflineSub{
  margin-top:8px;
  opacity:.78;
  font-size:13px;
}
body.player-page .overlayOfflineTools{ margin-top:14px; display:grid; gap:8px; }
body.player-page .overlayOfflineToolRow{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:8px;
  align-items:center;
}
body.player-page .overlayOfflineToolRow .value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.player-page.playerLocked .wrap{
  filter: blur(8px);
  pointer-events:none;
  user-select:none;
}
body.player-page.playerLocked .controlLockMask{ display:flex; }
body.player-page.overlayDisconnected .overlayOfflineMask{ display:flex; }

@media (max-width: 980px){
  body.player-page{ overflow:auto; }
  body.player-page .links{ justify-content:flex-start; }
  body.player-page .wrap{ min-height:100vh; height:auto; }
  body.player-page .layout{ grid-template-columns:1fr; }
  body.player-page .playerLeft{ grid-template-columns:1fr; height:auto; overflow:visible; }
  body.player-page .queueCard,
  body.player-page .playerCard{
    grid-column:1;
    grid-row:auto;
    height:auto;
    overflow:visible;
  }
  body.player-page .ytWrap{
    height:auto;
    aspect-ratio:16 / 9;
    max-height:none;
  }
  body.player-page .playerRight{
    overflow:visible;
    padding-right:0;
  }
  body.player-page .overlayOfflineToolRow{
    grid-template-columns:1fr;
  }
}

.playerShell{
  min-height:100vh;
  padding: 18px 22px 26px;
  width:min(1540px, 100%);
  margin:0 auto;
}

.playerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.playerBrand{
  display:flex;
  align-items:center;
  gap:12px;
}
.playerBrand .dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--blue);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent-a) 38%, transparent);
}
.playerBrand .name{ font-weight:900; letter-spacing:.2px; }
.playerBrand .sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.playerTopActions{ display:flex; gap:10px; align-items:center; }

.playerLayout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items:start;
}
.playerRight{ display:grid; gap:14px; }

.ytCard2{
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
  border:1px solid var(--stroke2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.ytWrap2{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow:hidden;
  background: color-mix(in srgb, var(--bg) 26%, transparent);
  border:1px solid var(--border);
}
#ytPlayer{ position:absolute; inset:0; }
.ytOverlay{ position:absolute; inset:0; background: transparent; }

.titleBlock2{ margin-top: 14px; }
.titleBlock2 .t{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.15;
}
.titleBlock2 .a{
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

/* ? Seek bar */
.seekRow2{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.seekTime{
  width: 52px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

#seekRange{
  flex: 1;
  width: 100%;
}


.ctrlRow2{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.ctrlBtn2{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  font-size: 18px;
  cursor:pointer;
}
.ctrlBtn2:hover{
  border-color: var(--stroke);
  background: color-mix(in srgb, var(--accent-a) 12%, transparent);
}

.vol2{
  margin-left: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
}
.volIcon{ opacity:.85; }
.vol2 input[type="range"]{ width: 100%; }

.modeBtns{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- player controls (current markup) ---------- */
body.player-page .controls{
  display:grid;
  gap:10px;
}
body.player-page .ctrlLeft{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
body.player-page .ctrlBtns{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body.player-page .iconBtn{
  -webkit-appearance:none;
  appearance:none;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--border) 68%, rgba(255,255,255,.30));
  background: var(--home-glass);
  color: color-mix(in srgb, var(--text) 94%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.05);
  cursor:pointer;
}
body.player-page .iconBtn:hover{
  background: var(--home-glass-strong);
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40));
}
body.player-page .seekRow{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:8px;
}
body.player-page .time{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
body.player-page .range{
  width:100%;
  accent-color: color-mix(in srgb, var(--accent-a) 86%, white 14%);
}
body.player-page input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255,255,255,.26));
}
body.player-page input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40));
  background: color-mix(in srgb, var(--accent-a) 88%, #ffffff 12%);
  box-shadow: 0 6px 14px rgba(0,0,0,.26);
  cursor:pointer;
}
body.player-page input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255,255,255,.26));
}
body.player-page input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40));
  background: color-mix(in srgb, var(--accent-a) 88%, #ffffff 12%);
  box-shadow: 0 6px 14px rgba(0,0,0,.26);
  cursor:pointer;
}
body.player-page #obsLink{
  min-width: 280px;
  flex: 1;
  background: var(--home-glass);
  border: 1px solid color-mix(in srgb, var(--border) 68%, rgba(255,255,255,.30));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  backdrop-filter: blur(10px) saturate(118%);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
}
body.player-page .quickToolRow > .input{
  min-width: 180px;
}
body.player-page select.input,
body.player-page select.btn{
  -webkit-appearance:none;
  appearance:none;
  background: var(--home-glass);
  border: 1px solid color-mix(in srgb, var(--border) 70%, rgba(255,255,255,.30));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 34px 10px 12px;
  line-height: 1.2;
}
body.player-page select.input:focus,
body.player-page select.btn:focus{
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-a) 16%, transparent);
  outline: none;
}
body.player-page select.input option,
body.player-page select.btn option{
  background: color-mix(in srgb, var(--panel-strong) 96%, #0f172a 4%);
  color: var(--text);
}

@media (max-width: 900px){
  .app{
    grid-template-columns: 1fr;
    min-height:calc(100dvh - 24px);
    gap: 12px;
    padding: 12px;
  }
  .sidebar{ position:relative; height:auto; }
  .main{ padding: 8px 0 24px; min-width:0; }
  .topbar{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .topbar .actions{
    width:100%;
  }
  .input{
    min-width: 0;
    width: 100%;
  }
  [data-theme-select]{
    min-width: 0;
    width: 100%;
  }
  .playerLayout{ grid-template-columns: 1fr; }
  .thead,.tr{
    min-width: 620px;
  }
  .table{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }
}


/* --- points page additions --- */

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 980px){ .grid2{ grid-template-columns:1fr; } }


.table{
  border:1px solid var(--stroke2);
  border-radius:var(--r);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
}
.thead,.tr{ display:grid; grid-template-columns: 1.4fr 1fr .7fr .8fr; gap:10px; padding:10px 12px; align-items:center; }
.thead{ background:color-mix(in srgb, var(--panel) 84%, transparent); font-weight:600; color:var(--muted); }
.tbody .tr{ border-top:1px solid var(--stroke2); }
.log{ max-height:280px; overflow:auto; padding:10px 12px; border:1px solid var(--stroke2); border-radius:var(--r); background:color-mix(in srgb, var(--panel) 74%, transparent); }
.logline{ display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed color-mix(in srgb, var(--border) 88%, transparent); }
.logline:last-child{ border-bottom:none; }
.logline .t{ color:var(--muted); min-width:170px; }
.muted{ color:var(--muted); }

/* ---------- Modal (assets picker) ---------- */
.modalMask{
  position:fixed; inset:0; z-index:9999;
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modalMask.hidden{ display:none; }
.modalCard{
  width:min(920px, 96vw);
  max-height:80vh;
  overflow:hidden;
  background:
    var(--home-glass),
    color-mix(in srgb, var(--panel) 76%, transparent);
  border:1px solid var(--home-border);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--home-edge),
    inset 0 -1px 0 color-mix(in srgb, var(--home-inner) 72%, transparent),
    0 16px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  display:flex;
  flex-direction:column;
}
.modalHeader{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; border-bottom:1px solid var(--stroke2);
}
.modalTitle{ font-weight:800; letter-spacing:.2px; }
.modalTabs{
  display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--stroke2);
}
.modalTabs .btn{ padding:8px 12px; border-radius:10px; }
.assetBody{
  padding:14px 16px; overflow:auto;
}
.assetTab{ display:none; }
.assetTab.active{ display:block; }
.assetGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.assetItem{
  border:1px solid color-mix(in srgb, var(--border) 68%, rgba(255,255,255,.26));
  background: var(--home-glass);
  border-radius:12px;
  padding:10px;
  text-align:left;
  cursor:pointer;
}
.assetItem.active{
  border-color: color-mix(in srgb, var(--accent-a) 42%, rgba(255,255,255,.24));
  background: color-mix(in srgb, var(--accent-a) 10%, rgba(255,255,255,.06));
}
.assetThumb{
  width:100%; height:90px; border-radius:10px; object-fit:cover;
  background: rgba(0,0,0,.2); border:1px solid var(--border);
}
.assetLabel{
  margin-top:8px; font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.assetRow{
  display:flex; align-items:center; gap:10px; padding:10px;
  border:1px solid var(--stroke2); border-radius:12px; background: color-mix(in srgb, var(--panel) 72%, transparent);
  cursor:pointer;
}
.assetRow.active{
  border-color: color-mix(in srgb, var(--accent-a) 48%, transparent);
  background: color-mix(in srgb, var(--accent-a) 16%, transparent);
}
.assetRow .name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assetRow audio{ width:140px; height:28px; }
.assetUpload{
  display:flex; gap:10px; align-items:center; margin-bottom:12px;
}

/* ---------- Commands Modal Shared ---------- */
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modalBackdrop.show{ display:flex; }
.modalBody{
  padding: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
@media (max-width: 1100px){
  .modalBody{ grid-template-columns: 1fr; }
}
.modalGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 720px){ .modalGrid{ grid-template-columns: 1fr; } }
.modalFooter{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--stroke2);
}
.modalRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.modalSection{
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
}
.modalSectionTitle{
  font-size: 12px;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
.formGroup{ display: grid; gap: 6px; }
.formLabel{ font-size: 13px; font-weight: 700; }
.formHint{ font-size: 12px; color: color-mix(in srgb, var(--text) 88%, transparent); }
.radioGroup{ display: flex; gap: 10px; flex-wrap: wrap; }
.radioItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.radioItem input{ accent-color: var(--blue); }
.input.textarea{
  min-height: 120px;
  line-height: 1.4;
  resize: vertical;
  padding-top: 10px;
  padding-bottom: 10px;
}
.guidePanel{
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  max-height: 500px;
  overflow: auto;
}
.guideTitle{ font-size: 18px; font-weight: 800; margin: 0; }
.guideChips{ display: flex; flex-wrap: wrap; gap: 8px; }
.guideChip{
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  color: color-mix(in srgb, var(--text) 92%, transparent);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.guideChip:hover{
  border-color: color-mix(in srgb, var(--accent-a) 42%, var(--stroke2));
  background: color-mix(in srgb, var(--accent-a) 16%, var(--panel));
}
.fnGuideBackdrop{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 14px;
}
.fnGuideBackdrop.show{ display:flex; }
.fnGuideCard{
  width: min(640px, 95vw);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  display: grid;
  gap: 10px;
}
.fnGuideName{
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.3px;
}
.fnGuideDesc{
  margin: 0;
  color: color-mix(in srgb, var(--text) 88%, transparent);
  line-height: 1.45;
  white-space: pre-line;
  font-size: 18px;
  font-weight: 600;
}
.fnGuideExample{
  margin-top: 2px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: color-mix(in srgb, var(--text) 92%, transparent);
}
.fnGuideBubble{
  display: inline-block;
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
}
.fnGuideResult{
  display: inline-block;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-a) 22%, var(--stroke2));
  background: color-mix(in srgb, var(--accent-a) 14%, var(--panel));
  width: fit-content;
  max-width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.fnGuideClose{
  margin-top: 6px;
  width: 100%;
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}

/* ---------- App Alert Modal ---------- */
.appAlertCard{
  width:min(680px, 92vw);
  max-height: 78vh;
  overflow:auto;
}
.appAlertHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 16px 18px;
  border-bottom:1px solid var(--stroke2);
}
.appAlertTitle{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}
.appAlertBody{
  padding: 20px 18px 22px;
  display:grid;
  gap:14px;
}
.appAlertMsg{
  font-size: 18px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.appAlertActions{
  display:flex;
  justify-content:flex-end;
}
.appAlertActions .btn{
  min-width: 120px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 800;
}




/* ---------- Mobile readability tuning ---------- */
@media (max-width: 900px) {
  .sidebar {
    padding: 0;
    border-radius: 0;
  }

  .brand {
    padding: 8px 8px 12px;
    margin-bottom: 10px;
  }

  .nav {
    gap: 14px;
    min-height: 50px;
    padding: 0 4px;
  }

  .nav a {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .sidebar .meta {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .hgroup h1 {
    font-size: 20px;
  }

  .hgroup p {
    font-size: 12px;
  }

  .card,
  .card2 {
    padding: 14px;
    border-radius: 14px;
  }

  .row,
  .row2,
  .actions {
    gap: 8px;
  }

  .input,
  .btn,
  .btn2,
  [data-theme-select],
  .themeModeBtn {
    min-height: 42px;
  }

  .topbar .actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .topbar .actions [data-theme-select] {
    grid-column: 1 / -1;
  }

  .themeModeToggle {
    margin-left: 0;
  }

  .modalMask {
    padding: 10px;
  }

  .modalCard {
    width: min(920px, 100vw);
    max-height: 88vh;
    border-radius: 14px;
  }
}

/* ---------- Unified Home-style UI for all app-shell pages ---------- */
body.homeUnified {
  position: relative;
  isolation: isolate;
  font-family: "IBM Plex Sans KR", "Space Grotesk", sans-serif;
  background: var(--bg) !important;
}

/* Use the same single-blob background pipeline as shared-ui.css */
body.homeUnified::before {
  content: "";
  position: fixed;
  inset: -32%;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  transform: translate3d(-1.5%, 0, 0) rotate(-12deg) scale(1.08, 1.18);
  filter: blur(38px) saturate(1.26) contrast(1.14);
  opacity: 0.94;
  background:
    radial-gradient(34% 48% at 24% 30%, rgba(var(--amb1-rgb), .90) 0 36%, rgba(var(--amb1-rgb), .64) 46%, transparent 62%),
    radial-gradient(20% 34% at 44% 66%, rgba(var(--amb2-rgb), .52) 0 30%, rgba(var(--amb2-rgb), .30) 40%, transparent 56%);
}

body.homeUnified::after {
  content: none !important;
  display: none !important;
}

body.homeUnified .homeUnifiedBlobs {
  display: none !important;
}

body.homeUnified .homeUnifiedBlob {
  position: absolute;
  width: 38vmax;
  height: 38vmax;
  border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  filter: blur(30px);
  opacity: 0.78;
  mix-blend-mode: normal;
  will-change: transform, border-radius;
}

body.homeUnified .homeUnifiedBlob.a {
  top: -8%;
  left: -8%;
  background: color-mix(in srgb, var(--accent-a) 86%, rgba(255, 255, 255, 0.16));
  animation: homeUnifiedBlobA 22s ease-in-out infinite alternate;
}

body.homeUnified .homeUnifiedBlob.b {
  top: 40%;
  right: -10%;
  width: 33vmax;
  height: 33vmax;
  opacity: 0.72;
  background: color-mix(in srgb, var(--accent-b) 82%, rgba(255, 255, 255, 0.14));
  animation: homeUnifiedBlobB 26s ease-in-out infinite alternate;
}

body.homeUnified .homeUnifiedBlob.c {
  bottom: -16%;
  left: 18%;
  width: 27vmax;
  height: 27vmax;
  opacity: 0.66;
  background: color-mix(in srgb, var(--accent-a) 70%, rgba(255, 255, 255, 0.18));
  animation: homeUnifiedBlobC 28s ease-in-out infinite alternate;
}

body.homeUnified .sidebar,
body.homeUnified .topbar,
body.homeUnified .card,
body.homeUnified .card2,
body.homeUnified .modalCard,
body.homeUnified .uiAlertCard,
body.homeUnified .promoTopBanner .promoSlot,
body.homeUnified .promoRail .promoSlot {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid color-mix(in srgb, var(--border) 58%, rgba(255, 255, 255, 0.42)) !important;
  box-shadow:
    0 14px 34px rgba(4, 11, 46, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
  position: relative;
  z-index: 1;
}

body.homeUnified .sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

body.homeUnified .topbar {
  border-radius: 18px !important;
  padding: 8px 10px !important;
}

body.homeUnified .nav a,
body.homeUnified .pill,
body.homeUnified .input,
body.homeUnified [data-theme-select],
body.homeUnified .btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke),
body.homeUnified .btn2:not(.saveAction) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.42)) !important;
}

body.homeUnified .nav a.active {
  background: rgba(255,255,255,.12) !important;
  border-color: color-mix(in srgb, var(--stroke) 56%, rgba(255,255,255,.44)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, rgba(255,255,255,.24) 70%, transparent) !important;
}

body.homeUnified .btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke):hover,
body.homeUnified .btn2:not(.saveAction):hover,
body.homeUnified .nav a:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255, 255, 255, 0.40)) !important;
}

/* Nav-style top bar for app shell */
body.homeUnified .sidebar .nav a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
  opacity: 1;
}
body.homeUnified .sidebar .nav a:hover{
  color: var(--accent-a) !important;
  background: transparent !important;
  border-color: transparent !important;
}
body.homeUnified .sidebar .nav a.active{
  color: var(--accent-a) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.homeUnified .sidebar .nav:has(a:hover) a:not(:hover){
  opacity: 0.3;
}

body.homeUnified .promoPlaceholder {
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

body.homeUnified .promoSlot::after {
  border-color: color-mix(in srgb, var(--border) 72%, rgba(255,255,255,.30));
  display:none;
}

body.homeUnified .noticeItem {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 66%, rgba(255, 255, 255, 0.28));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.homeUnified .seg,
body.homeUnified .switchTrack,
body.homeUnified .queueItem,
body.homeUnified .log,
body.homeUnified .shareLink {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.40)) !important;
}

@keyframes homeUnifiedBlobA {
  0% { transform: translate(-10vw, -8vh) rotate(-18deg); border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%; }
  100% { transform: translate(20vw, 8vh) rotate(12deg); border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%; }
}
@keyframes homeUnifiedBlobB {
  0% { transform: translate(10vw, -6vh) rotate(10deg); border-radius: 64% 36% 58% 42% / 34% 61% 39% 66%; }
  100% { transform: translate(-18vw, 10vh) rotate(-14deg); border-radius: 39% 61% 36% 64% / 59% 33% 67% 41%; }
}
@keyframes homeUnifiedBlobC {
  0% { transform: translate(-4vw, 8vh) rotate(-12deg); border-radius: 42% 58% 69% 31% / 35% 63% 37% 65%; }
  100% { transform: translate(14vw, -6vh) rotate(10deg); border-radius: 67% 33% 42% 58% / 61% 36% 64% 39%; }
}

@media (max-width: 640px) {
  .app {
    padding: 10px;
    gap: 10px;
    min-height: calc(100dvh - 16px);
  }

  .main {
    padding: 4px 0 18px;
  }

  .topbar {
    margin-bottom: 12px;
    gap: 8px;
  }

  .topbar .actions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .topbar .actions [data-theme-select],
  .topbar .actions .themeModeToggle {
    grid-column: 1 / -1;
  }

  .themeModeToggle {
    display: flex;
    width: 100%;
    gap: 8px;
  }

  .themeModeBtn {
    flex: 1 1 0;
    padding: 0 10px;
    font-size: 13px;
  }

  .btn,
  .btn2 {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ---------- Mobile overflow fix ---------- */
@media (max-width: 900px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .app,
  .main,
  .sidebar,
  .grid,
  .grid2,
  .topbar,
  .card,
  .card2,
  .row,
  .row2,
  .actions {
    max-width: 100%;
    min-width: 0;
  }

  .thead,
  .tr {
    min-width: 520px;
  }

  .logline .t {
    min-width: 120px;
  }
}

body:not(.player-page) .topbar,
body:not(.player-page) .card,
body:not(.player-page) .card2,
body:not(.player-page) .modalCard,
body:not(.player-page) .uiAlertCard {
  background-color: color-mix(in srgb, var(--panel-strong) 90%, rgba(10, 14, 20, 0.82)) !important;
  border-color: color-mix(in srgb, var(--border) 66%, rgba(255, 255, 255, 0.20)) !important;
  box-shadow:
    0 10px 24px rgba(2, 8, 18, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
  position: relative;
  overflow: visible;
}

body:not(.player-page) .card,
body:not(.player-page) .card2 {
  border-radius: 22px !important;
  padding: 24px !important;
}

body:not(.player-page) .cardHeader {
  margin-bottom: 12px;
}

body:not(.player-page) .cardTitle {
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body:not(.player-page) .cardSub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

body:not(.player-page) .pill {
  border-color: color-mix(in srgb, var(--border) 62%, rgba(255, 255, 255, 0.24));
  background: color-mix(in srgb, var(--panel) 88%, rgba(255, 255, 255, 0.08));
}

/* topbar controls (theme select/toggle) must not be clipped */
body:not(.player-page) .topbar,
body:not(.player-page) .topbar .actions{
  overflow: visible !important;
}
body:not(.player-page) .topbar{
  z-index: 600 !important;
}
body:not(.player-page) .topbar .uiSelect{
  position: relative;
}
body:not(.player-page) .topbar .uiSelect.open{
  z-index: 1200;
}
body:not(.player-page) .uiSelectMenu{
  z-index: 1600;
}

body:not(.player-page) .topbar::before,
body:not(.player-page) .card::before,
body:not(.player-page) .card2::before,
body:not(.player-page) .modalCard::before,
body:not(.player-page) .uiAlertCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
}

body:not(.player-page) .topbar > *,
body:not(.player-page) .card > *,
body:not(.player-page) .card2 > *,
body:not(.player-page) .modalCard > *,
body:not(.player-page) .uiAlertCard > * {
  position: relative;
  z-index: 1;
}

/* Promo media keeps its own absolute layout */
body:not(.player-page) .promoSlot {
  background-color: transparent !important;
}

body:not(.player-page) .promoSlot::before {
  content: none !important;
}

body:not(.player-page) .promoSlot > .promoImageLink,
body:not(.player-page) .promoSlot > .promoArt {
  position: absolute !important;
  inset: 0;
  z-index: 2;
}

body:not(.player-page) .btn.primary,
body:not(.player-page) .btn2.primary {
  background-color: color-mix(in srgb, var(--accent-a) 82%, rgba(255, 255, 255, 0.16)) !important;
  background-image: none !important;
}

/* Keep flat cards without forcing every element into global repaint paths. */
body:not(.player-page) .topbar,
body:not(.player-page) .card,
body:not(.player-page) .card2,
body:not(.player-page) .modalCard,
body:not(.player-page) .uiAlertCard,
body:not(.player-page) .promoSlot,
body:not(.player-page) .pill,
body:not(.player-page) .seg,
body:not(.player-page) .input,
body:not(.player-page) [data-theme-select],
body:not(.player-page) .btn,
body:not(.player-page) .btn2,
body:not(.player-page) .nav a {
  background-image: none !important;
}

@media (max-width: 640px) {
  .thead,
  .tr {
    min-width: 430px;
  }

  .logline {
    gap: 6px;
    font-size: 12px;
  }

  .logline .t {
    min-width: 98px;
  }
}

@media (max-width: 900px) {
  .sidebar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    position: relative;
    top: 0;
    padding: 10px;
  }

  .brand {
    padding: 2px 2px 6px;
    margin: 0;
  }

  .nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 2px 0 4px;
  }

  .nav a {
    padding: 8px 11px;
    font-size: 13px;
  }

  .sidebar .meta {
    margin: 0;
    padding: 8px 2px 0;
    border-left: 0;
    border-top: 1px solid var(--stroke2);
    white-space: normal;
    word-break: break-all;
  }

  .mobileTopActions {
    display: block;
    margin: 2px 4px 10px;
  }

  .mobileTopActions .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .mobileTopActions [data-theme-select],
  .mobileTopActions .themeModeToggle,
  .mobileTopActions .btn,
  .mobileTopActions .btn2 {
    width: 100%;
  }

  .mobileTopActions .themeModeToggle {
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}
/* ---------- Theme / Actions (consolidated) ---------- */
.actions [data-theme-mode-toggle],
.themeModeToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.themeModeText {
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  line-height: 1;
}

.themeModeText.is-active {
  color: color-mix(in srgb, var(--text) 96%, transparent);
}

.themeModeSwitch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease, background .2s ease;
}

.themeModeSwitch:hover {
  border-color: color-mix(in srgb, var(--accent-a) 52%, var(--border));
}

.themeModeSwitch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-a) 62%, transparent);
  outline-offset: 2px;
}

.themeModeKnob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 90%, var(--panel));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  transform: translateX(0);
  transition: transform .2s ease, background .2s ease;
}

.themeModeSwitch[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent-a) 34%, transparent);
  border-color: color-mix(in srgb, var(--accent-a) 58%, var(--border));
}

.themeModeSwitch[aria-pressed='true'] .themeModeKnob {
  transform: translateX(20px);
}

.actions [data-theme-select] {
  min-width: 140px;
}

.actions .logoutCompact,
.logoutCompact,
#btnLogout,
#btnViewerLogout {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  border: 1px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.10) !important;
  color: #ef4444 !important;
}

.actions .logoutCompact:hover,
.logoutCompact:hover,
#btnLogout:hover,
#btnViewerLogout:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  color: #dc2626 !important;
}

#btnTokenRevoke {
  border: 1px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.10) !important;
  color: #ef4444 !important;
  font-weight: 800;
}

#btnTokenRevoke:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  color: #dc2626 !important;
}

/* Save button strongest */
.btn.saveAction,
.btn2.saveAction,
button[id*='Save'],
button[id*='save'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: linear-gradient(120deg, var(--accent-a), var(--accent-b)) !important;
  border: 1px solid var(--accent-a) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
  font-weight: 900 !important;
}

.btn.saveAction:hover,
.btn2.saveAction:hover,
button[id*='Save']:hover,
button[id*='save']:hover {
  filter: brightness(1.04);
}

.btn.saveAction:disabled,
.btn2.saveAction:disabled,
button[id*='Save']:disabled,
button[id*='save']:disabled {
  opacity: .82 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(120deg, var(--accent-a), var(--accent-b)) !important;
  border: 1px solid var(--accent-a) !important;
}

/* Other buttons softer accent */
.btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke),
.btn2:not(.saveAction) {
  color: color-mix(in srgb, var(--text) 92%, transparent) !important;
  background: var(--home-glass) !important;
  border: 1px solid color-mix(in srgb, var(--border) 68%, rgba(255,255,255,.30)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.05) !important;
}

.btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke):hover,
.btn2:not(.saveAction):hover {
  color: color-mix(in srgb, var(--text) 98%, transparent) !important;
  background: var(--home-glass-strong) !important;
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.40)) !important;
}

:root[data-mode='light'] .btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke),
:root[data-mode='light'] .btn2:not(.saveAction) {
  color: color-mix(in srgb, #0f172a 90%, transparent) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
  border-color: color-mix(in srgb, var(--border) 72%, rgba(255,255,255,.42)) !important;
}

:root[data-mode='light'] .btn:not(.saveAction):not(#btnLogout):not(#btnViewerLogout):not(#btnTokenRevoke):hover,
:root[data-mode='light'] .btn2:not(.saveAction):hover {
  color: #0b1220 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
  border-color: color-mix(in srgb, var(--stroke) 54%, rgba(255,255,255,.42)) !important;
}

.btn.saveNeeded,
.btn2.saveNeeded {
  position: relative;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-a) 20%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent-a) 28%, transparent) !important;
}

.btn.saveNeeded::after,
.btn2.saveNeeded::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-strong) 90%, transparent);
}

.statusText,
.label,
.desc,
.cardSub {
  color: color-mix(in srgb, var(--text) 88%, transparent);
}

@media (max-width: 900px) {
  .mobileTopActions {
    display: block;
    margin: 2px 4px 10px;
  }

  .mobileTopActions .actions,
  .topbar .actions.mobileActionsInSidebar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .mobileTopActions .actions [data-theme-select],
  .topbar .actions.mobileActionsInSidebar [data-theme-select] {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .mobileTopActions .actions [data-theme-mode-toggle],
  .topbar .actions.mobileActionsInSidebar [data-theme-mode-toggle] {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  .mobileTopActions .actions .logoutCompact,
  .topbar .actions.mobileActionsInSidebar .logoutCompact {
    grid-column: 2;
    justify-self: end;
    margin-left: 0;
    width: auto !important;
  }
}





/* ---------- Migrated Inline Styles: viewer.html ---------- */
    body.viewer-page .viewerShell{ max-width: 1180px; margin: 0 auto; }
    body.viewer-page .viewerTitle{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    body.viewer-page .viewerList .queueItem{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
    body.viewer-page .viewerChanInfo{ display:flex; align-items:center; gap:12px; min-width:0; }
    body.viewer-page .viewerChanInfo img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
    body.viewer-page .viewerChanName{ font-weight:800; }
    body.viewer-page .viewerChanSub{ font-size:12px; color: var(--muted); margin-top:2px; }
    body.viewer-page .viewerSearch{ width:100%; max-width:320px; }
    body.viewer-page .viewerTools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    body.viewer-page .viewerRefreshAt{ font-size:12px; color: var(--muted); }
    body.viewer-page .viewerManualRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    body.viewer-page .viewerManualInput{ flex:1 1 260px; min-width:220px; }
    body.viewer-page .viewerSearchResult{ margin-top:10px; display:grid; gap:8px; }
    body.viewer-page .viewerSearchItem{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border:1px solid var(--stroke2); border-radius:12px; background: var(--surface); }
    body.viewer-page .viewerSearchMeta{ min-width:0; }
    body.viewer-page .viewerSearchName{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    body.viewer-page .viewerSearchSub{ font-size:12px; color:var(--muted); }
    body.viewer-page .viewerModalBack{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px); display:none; align-items:center; justify-content:center; z-index:1000; }
    body.viewer-page .viewerModalBack.show{ display:flex; }
    body.viewer-page .viewerModalCard{ width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; border-radius:16px; border:1px solid var(--stroke2); background:var(--panel); padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.35); }
    body.viewer-page .noticeCard{ padding:18px; border-radius:18px; }
    body.viewer-page .noticeTitle{ font-size:18px; font-weight:900; margin:0; }
    body.viewer-page .noticeList{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
    body.viewer-page .noticeItem{ margin:6px 0; }
    body.viewer-page .noticeDate{ font-weight:700; color: var(--text); margin-right:6px; }
  
/* ---------- End Migrated Inline Styles: viewer.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel.html ---------- */
    body[data-page="listen"] .viewerShell{ max-width: 1480px; margin: 0 auto; }
    body[data-page="listen"] .listenToolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
    body[data-page="listen"] .listenDock{ display:grid; grid-template-columns: 1.85fr .95fr; gap:12px; }
    body[data-page="listen"] .dockCard{
      border:1px solid var(--border);
      border-radius:14px;
      background: rgba(255,255,255,.03);
      padding:10px;
      min-height: 72vh;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    body[data-page="listen"] .dockTitle{ font-size:13px; font-weight:800; opacity:.92; }
    body[data-page="listen"] .dockFrame{
      width:100%;
      flex:1 1 auto;
      min-height: 64vh;
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      background:#070a12;
    }
    body[data-page="listen"] .playlistActions{ display:flex; gap:8px; flex-wrap:wrap; }
    body[data-page="listen"] .playlistInput{
      width:100%;
      border:1px solid rgba(255,255,255,.14);
      border-radius:10px;
      background: rgba(255,255,255,.04);
      color: var(--text);
      padding:8px 10px;
    }
    body[data-page="listen"] .playlistList{ display:grid; gap:8px; max-height: 40vh; overflow:auto; padding-right:4px; }
    body[data-page="listen"] .playlistItem{
      border:1px solid rgba(255,255,255,.10);
      border-radius:10px;
      background: rgba(255,255,255,.03);
      padding:8px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    body[data-page="listen"] .playlistMeta{ font-size:12px; opacity:.72; }
    body[data-page="listen"] .playlistBtns{ display:flex; gap:6px; }
    body[data-page="listen"] .tinyBtn{
      border:1px solid rgba(255,255,255,.14);
      border-radius:9px;
      background: rgba(255,255,255,.06);
      color: var(--text);
      padding:5px 8px;
      font-size:12px;
      cursor:pointer;
    }
    body[data-page="listen"] .tinyBtn:disabled{ opacity:.45; cursor:default; }
    body[data-page="listen"] .dockEmpty{
      border:1px dashed rgba(255,255,255,.20);
      border-radius:12px;
      padding:10px 12px;
      color: var(--muted);
      font-size:12px;
    }
    @media (max-width: 1180px){
      body[data-page="listen"] .listenDock{ grid-template-columns: 1fr; }
      body[data-page="listen"] .dockCard{ min-height: 54vh; }
      body[data-page="listen"] .dockFrame{ min-height: 48vh; }
    }
  
/* ---------- End Migrated Inline Styles: viewer_channel.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel_help.html ---------- */
    body[data-page="help"] .viewerShell{ max-width: 980px; margin: 0 auto; }
    body[data-page="help"] .helpList{ display:grid; gap:10px; }
    body[data-page="help"] .helpCard{ border:1px solid var(--stroke2); border-radius:12px; background: rgba(255,255,255,.02); padding:12px; }
    body[data-page="help"] .helpTitle{ font-weight:800; margin-bottom:8px; }
    body[data-page="help"] .helpSteps{ margin:0; padding-left:18px; color:var(--muted); display:grid; gap:6px; }
    body[data-page="help"] .helpLink{ word-break:break-all; }
    body[data-page="help"] .noticeCard{ padding:18px; border-radius:18px; }
    body[data-page="help"] .noticeTitle{ font-size:18px; font-weight:900; margin:0; }
    body[data-page="help"] .noticeList{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
    body[data-page="help"] .noticeItem{ margin:6px 0; }
    body[data-page="help"] .noticeDate{ font-weight:700; color: var(--text); margin-right:6px; }
  
/* ---------- End Migrated Inline Styles: viewer_channel_help.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel_points.html ---------- */
    body[data-page="points"] .viewerShell{ max-width: 980px; margin: 0 auto; }
    body[data-page="points"] .sectionTitle{ font-weight:800; margin-bottom:8px; }
    body[data-page="points"] .sectionDesc{ font-size:12px; color: var(--muted); margin-top:-4px; }
    body[data-page="points"] .list{ display:grid; gap:8px; }
    body[data-page="points"] .miniRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="points"] .chip{ font-size:12px; color: var(--muted); }
    body[data-page="points"] .historyItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="points"] .historyItem .name{ font-weight:700; }
    body[data-page="points"] .noticeCard{ padding:18px; border-radius:18px; }
    body[data-page="points"] .noticeTitle{ font-size:18px; font-weight:900; margin:0; }
    body[data-page="points"] .noticeList{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
    body[data-page="points"] .noticeItem{ margin:6px 0; }
    body[data-page="points"] .noticeDate{ font-weight:700; color: var(--text); margin-right:6px; }
  
/* ---------- End Migrated Inline Styles: viewer_channel_points.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel_point_support.html ---------- */
    body[data-page="point-support"] .viewerShell { max-width: 980px; margin: 0 auto; }
    body[data-page="point-support"] .supportStatus { font-size: 12px; color: var(--muted); min-height: 18px; }
    body[data-page="point-support"] .noticeCard { padding: 18px; border-radius: 18px; }
    body[data-page="point-support"] .noticeTitle { font-size: 18px; font-weight: 900; margin: 0; }
    body[data-page="point-support"] .noticeList { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
    body[data-page="point-support"] .noticeItem { margin: 6px 0; }
    body[data-page="point-support"] .noticeDate { font-weight: 700; color: var(--text); margin-right: 6px; }
  
/* ---------- End Migrated Inline Styles: viewer_channel_point_support.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel_roulette.html ---------- */
    body[data-page="roulette"] .viewerShell{ max-width: 1240px; margin: 0 auto; }
    body[data-page="roulette"] .sectionTitle{ font-weight:800; margin-bottom:8px; }
    body[data-page="roulette"] .sectionDesc{ font-size:12px; color: var(--muted); margin-top:-4px; }
    body[data-page="roulette"] .list{ display:grid; gap:8px; }
    body[data-page="roulette"] .miniRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="roulette"] .chip{ font-size:12px; color: var(--muted); }
    body[data-page="roulette"] .historyItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="roulette"] .historyItem .name{ font-weight:700; }
    body[data-page="roulette"] .noticeCard{ padding:18px; border-radius:18px; }
    body[data-page="roulette"] .noticeTitle{ font-size:18px; font-weight:900; margin:0; }
    body[data-page="roulette"] .noticeList{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
    body[data-page="roulette"] .noticeItem{ margin:6px 0; }
    body[data-page="roulette"] .noticeDate{ font-weight:700; color: var(--text); margin-right:6px; }
    body[data-page="roulette"] .viewerSplit{ display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .72fr); gap:12px; align-items:start; }
    body[data-page="roulette"] .leftStack,
    body[data-page="roulette"] .rightStack{ display:grid; gap:12px; }
    body[data-page="roulette"] .rightStack .card{ padding:12px; }
    body[data-page="roulette"] .historyCompact{ max-height: 62vh; overflow:auto; padding-right:4px; }
    @media (max-width: 1080px){
      body[data-page="roulette"] .viewerSplit{ grid-template-columns: 1fr; }
      body[data-page="roulette"] .historyCompact{ max-height: none; }
    }
  
/* ---------- End Migrated Inline Styles: viewer_channel_roulette.html ---------- */

/* ---------- Migrated Inline Styles: viewer_channel_stationery.html ---------- */
    body[data-page="stationery"] .viewerShell{ max-width: 1240px; margin: 0 auto; }
    body[data-page="stationery"] .sectionTitle{ font-weight:800; margin-bottom:8px; }
    body[data-page="stationery"] .sectionDesc{ font-size:12px; color: var(--muted); margin-top:-4px; }
    body[data-page="stationery"] .list{ display:grid; gap:8px; }
    body[data-page="stationery"] .miniRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="stationery"] .chip{ font-size:12px; color: var(--muted); }
    body[data-page="stationery"] .historyItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    body[data-page="stationery"] .historyItem .name{ font-weight:700; }
    body[data-page="stationery"] .noticeCard{ padding:18px; border-radius:18px; }
    body[data-page="stationery"] .noticeTitle{ font-size:18px; font-weight:900; margin:0; }
    body[data-page="stationery"] .noticeList{ margin:10px 0 0; padding-left:18px; color: var(--muted); }
    body[data-page="stationery"] .noticeItem{ margin:6px 0; }
    body[data-page="stationery"] .noticeDate{ font-weight:700; color: var(--text); margin-right:6px; }
    body[data-page="stationery"] .viewerSplit{ display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .72fr); gap:12px; align-items:start; }
    body[data-page="stationery"] .leftStack,
    body[data-page="stationery"] .rightStack{ display:grid; gap:12px; }
    body[data-page="stationery"] .rightStack .card{ padding:12px; }
    body[data-page="stationery"] .historyCompact{ max-height: 62vh; overflow:auto; padding-right:4px; }
    @media (max-width: 1080px){
      body[data-page="stationery"] .viewerSplit{ grid-template-columns: 1fr; }
      body[data-page="stationery"] .historyCompact{ max-height: none; }
    }
  
/* ---------- End Migrated Inline Styles: viewer_channel_stationery.html ---------- */

/* ---------- Migrated Inline Styles: points.html ---------- */
    body.points-page .main > section{
      display: grid;
      gap: 14px;
    }
    body.points-page .main > section + section{
      margin-top: 14px;
    }
    body.points-page .ledgerListScroll{
      max-height: 380px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
      display: grid;
      gap: 8px;
    }
    body.points-page .listRow{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 72%, transparent);
      border: 1px solid var(--stroke2);
    }
    body.points-page .listMain{ min-width: 0; }
    body.points-page .pill.small{
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 999px;
    }
    @media (max-width: 900px){
      body.points-page .listRow{ grid-template-columns: 1fr; }
    }
    body.points-page .adminAdjustLayout{
      display:grid;
      grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr) 240px;
      gap:12px;
      align-items:start;
    }
    body.points-page .adminSelectedCard{
      border:1px solid var(--stroke2);
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
      border-radius: 12px;
      padding: 12px;
      display:grid;
      gap:6px;
    }
    body.points-page .adminPointValue{
      font-size: 28px;
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1.1;
    }
    body.points-page .userSearchRow{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:10px;
      align-items:center;
      padding: 10px 12px;
      border-radius: 10px;
      border:1px solid var(--stroke2);
      background: color-mix(in srgb, var(--panel) 72%, transparent);
      cursor:pointer;
      transition: border-color .15s ease, background .15s ease;
    }
    body.points-page .userSearchRow + .userSearchRow{ margin-top:8px; }
    body.points-page .userSearchRow:hover{
      border-color: color-mix(in srgb, var(--accent-a) 32%, transparent);
      background: color-mix(in srgb, var(--accent-a) 10%, transparent);
    }
    body.points-page .userSearchRow.selected{
      border-color: color-mix(in srgb, var(--accent-a) 48%, transparent);
      background: color-mix(in srgb, var(--accent-a) 14%, transparent);
    }
    body.points-page .pill.balance{
      font-weight:700;
      min-width: 84px;
      text-align:center;
    }
    @media (max-width: 1100px){
      body.points-page .adminAdjustLayout{
        grid-template-columns: 1fr;
      }
    }
      body.points-page .adminModalBody{
      padding: 14px 16px 16px;
      display: grid;
      gap: 12px;
    }
    body.points-page .adminModalActions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      margin-top:6px;
    }
    body.points-page .adminAdjustModalCard{
      width:min(1120px, 96vw);
      border-color: color-mix(in srgb, var(--accent-a) 24%, var(--stroke2));
      background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
    }  
/* ---------- End Migrated Inline Styles: points.html ---------- */

/* ---------- Migrated Inline Styles: roulette.html ---------- */
    /* Roulette page small additions (style.css 기반) */
    /* 좌(편집) / 우(설정+미리보기) 비율 조정 */
    /* NOTE: minmax(0,1fr)로 overflow(겹침) 방지 */
    body.roulette-page .gridRoulette{ display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap:14px; max-width: 1280px; margin-top:14px; }
    body.roulette-page .gridRoulette > *{ min-width:0; }
    @media (max-width: 1100px){ .gridRoulette{ grid-template-columns: 1fr; } }

    /* 오버레이 프리뷰 16:9 프레임 */
    body.roulette-page .overlayFrameWrap{ width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--stroke2); background: rgba(255,255,255,.03); }
    body.roulette-page .overlayFrame{ width:100%; height:100%; border:0; display:block; }

    body.roulette-page .select{
      background: rgba(0,0,0,.22);
      border: 1px solid var(--stroke2);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      outline: none;
      min-width: 200px;
    }
    body.roulette-page .select:focus{
      border-color: var(--stroke);
      box-shadow: 0 0 0 1px rgba(0,183,255,.10);
    }

    body.roulette-page .itemRow{
      display:grid;
      grid-template-columns: 1fr minmax(240px, 1fr) 120px 84px;
      gap:10px;
      align-items:center;
      padding:10px 10px;
      border-radius:12px;
      background: rgba(255,255,255,.02);
      border:1px solid var(--stroke2);
    }
    body.roulette-page .itemRow > *{ min-width: 0; }
    body.roulette-page .weightCell{
      display:grid;
      grid-template-columns: 1fr 72px;
      gap:8px;
      align-items:center;
      min-width: 0;
    }
    body.roulette-page .weightRange{
      width:100%;
      min-width: 0;
      accent-color: var(--accent-a);
    }
    body.roulette-page .weightInput{
      width:72px;
      min-width:72px;
      max-width:72px;
      text-align:right;
      font-variant-numeric: tabular-nums;
      overflow:hidden;
    }
    body.roulette-page .weightSummary{
      margin-left:auto;
      font-size:12px;
      color: var(--muted);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      white-space: nowrap;
    }
    body.roulette-page .weightSummary.over{
      color:#ff8383;
      border-color: rgba(255,131,131,.55);
      background: rgba(255,70,70,.1);
    }
    body.roulette-page .weightSummary.full{
      color: var(--text);
      border-color: var(--stroke);
      background: rgba(0,183,255,.1);
    }
body.roulette-page .itemRow .btn{
      width:84px;
      min-width:84px;
      padding-left:0;
      padding-right:0;
    }
    @media (max-width: 980px){
      body.roulette-page .itemRow{ grid-template-columns: 1fr; }
    }

    body.roulette-page .smallHint{ margin-top:8px; color:var(--muted); font-size:12px; line-height:1.45; }
    body.roulette-page .rightStack{ display:grid; gap:12px; align-self:start; position: sticky; top: 14px; }
    @media (max-width: 1100px){ .rightStack{ position: static; } }

    body.roulette-page .topGrid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:14px; margin-top:14px; }
    body.roulette-page .topGrid > *{ min-width:0; }
    @media (max-width: 1100px){ .topGrid{ grid-template-columns: 1fr; } }

    body.roulette-page .historyList{ display:grid; gap:8px; max-height: 320px; overflow:auto; padding-right:6px; }
    body.roulette-page .historyRow{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding:10px; border-radius:12px; background: rgba(255,255,255,.02); border:1px solid var(--stroke2); }
    body.roulette-page .historyLeft{ display:grid; gap:2px; }
    body.roulette-page .historyMeta{ color:var(--muted); font-size:12px; }
    body.roulette-page .chip{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke2); background: rgba(255,255,255,.03); color: var(--muted); font-size:12px; }
    body.roulette-page .seg{ display:flex; gap:8px; }
    body.roulette-page .seg .btn{ padding:8px 10px; }

    /* 인풋+버튼 라인: 좁을 때 보기 좋게 */
    body.roulette-page .overlayRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    body.roulette-page .overlayRow .input{ flex:1; min-width: 240px; }

    body.roulette-page .defaultMediaGrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; }
    @media (max-width: 1100px){ .defaultMediaGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    body.roulette-page .defaultMediaBtn{
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      border-radius: 12px;
      padding: 8px;
      display:grid;
      gap:6px;
      cursor:pointer;
      text-align:center;
      color: var(--muted);
      font-size: 12px;
    }
    body.roulette-page .defaultMediaBtn img{
      width:100%;
      height:90px;
      object-fit: contain;
      border-radius: 8px;
      background: rgba(0,0,0,.2);
    }
    body.roulette-page .defaultMediaBtn.active{
      border-color: var(--stroke);
      box-shadow: 0 0 0 1px rgba(0,183,255,.12);
      color: var(--text);
    }
    body.roulette-page .sfxDefaults{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    body.roulette-page .sfxDefaults .sfxBtn{
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
    }
    body.roulette-page .sfxDefaults .sfxBtn.active{
      border-color: var(--stroke);
      color: var(--text);
      box-shadow: 0 0 0 1px rgba(0,183,255,.12);
    }
    body.roulette-page .sfxVolumeRow{
      display:grid;
      grid-template-columns: 1fr 84px;
      gap:10px;
      align-items:center;
    }
    body.roulette-page .sfxVolumeRange{
      width:100%;
      accent-color: var(--accent-a);
    }

    /* 상단 룰렛 선택 영역 정렬 */
    body.roulette-page .topSelectRow{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    body.roulette-page .topSelectRow .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
    body.roulette-page .topSelectRow .right{ display:flex; gap:10px; flex-wrap:wrap; }
    body.roulette-page #rouletteSelect{ flex:1; min-width: 220px; }
    body.roulette-page .btnRouletteCreate{
      font-size: 16px;
      font-weight: 800;
      padding: 12px 18px;
      border-width: 2px;
      box-shadow: 0 0 0 2px rgba(0,183,255,.16), 0 8px 18px rgba(0,0,0,.22);
    }
    body.roulette-page .rouletteCreateGuide{
      margin-top: 10px;
      border: 1px dashed var(--stroke);
      border-radius: 10px;
      padding: 8px 10px;
      color: var(--muted);
      font-size: 12px;
      background: rgba(0,183,255,.06);
    }
    body.roulette-page .rouletteCreateGuide.urgent{
      color: var(--text);
      border-color: rgba(0,183,255,.55);
      background: rgba(0,183,255,.14);
    }

    body.roulette-page .rewardRow{
      display:grid;
      grid-template-columns: 1fr 1fr 120px 120px 120px 140px 170px;
      gap:10px;
      align-items:center;
      padding:10px;
      border-radius:12px;
      background: rgba(255,255,255,.02);
      border:1px solid var(--stroke2);
    }
    body.roulette-page .rewardRow.pendingUse{
      border-color: rgba(255, 96, 96, 0.55);
      background: rgba(255, 64, 64, 0.16);
      box-shadow: inset 0 0 0 1px rgba(255, 96, 96, 0.25);
    }
    body.roulette-page .rewardRow .muted{ font-size:12px; }
    body.roulette-page .pendingDelete{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    @media (max-width: 1100px){
      body.roulette-page .rewardRow{ grid-template-columns: 1fr; }
    }
    body.roulette-page .mediaPickerRow{
      display:flex;
      gap:10px;
      align-items:center;
    }
    body.roulette-page .themeGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      align-items:center;
    }
    body.roulette-page .themeGrid .input[type="color"]{
      width:100%;
      height:34px;
      padding:2px 4px;
      border-radius:10px;
      border:1px solid var(--stroke2);
      background: rgba(0,0,0,.22);
    }
    @media (max-width: 900px){
      body.roulette-page .themeGrid{ grid-template-columns: 1fr; }
    }
    body.roulette-page .currentMediaThumb{
      width:72px;
      height:72px;
      border-radius:10px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,.04);
      object-fit: cover;
      display:none;
      flex: 0 0 auto;
    }
  
/* ---------- End Migrated Inline Styles: roulette.html ---------- */
    body.roulette-page.roulette-embed-cards .app{
      width: 100%;
      max-width: none;
      min-height: 100dvh;
      padding: 0;
      gap: 0;
    }
    body.roulette-page.roulette-embed-cards .sidebar,
    body.roulette-page.roulette-embed-cards .topbar,
    body.roulette-page.roulette-embed-cards .promoTopBanner,
    body.roulette-page.roulette-embed-cards .promoRail{
      display: none !important;
    }
    body.roulette-page.roulette-embed-cards .main{
      padding: 10px;
    }
    body.roulette-page.roulette-embed-cards .promoGridShell{
      display: block;
    }
    body.roulette-page.roulette-embed-cards .promoGridShell > .promoContentWrap{
      display: grid;
      gap: 12px;
    }
    body.roulette-page .itemRow{
      grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) 120px 84px;
    }
    body.roulette-page .itemRow .row{
      flex-wrap: nowrap;
    }
    body.roulette-page .itemRow .btn{
      z-index: 1;
    }
    body.points-page.points-embed-cards .app,
    body.point-support-page.point-support-embed-cards .app,
    body.stationery-page.stationery-embed-cards .app{
      width: 100%;
      max-width: none;
      min-height: 100dvh;
      padding: 0;
      gap: 0;
    }
    body.points-page.points-embed-cards .sidebar,
    body.points-page.points-embed-cards .topbar,
    body.points-page.points-embed-cards .promoTopBanner,
    body.points-page.points-embed-cards .promoRail,
    body.point-support-page.point-support-embed-cards .sidebar,
    body.point-support-page.point-support-embed-cards .topbar,
    body.point-support-page.point-support-embed-cards .promoTopBanner,
    body.point-support-page.point-support-embed-cards .promoRail,
    body.stationery-page.stationery-embed-cards .sidebar,
    body.stationery-page.stationery-embed-cards .topbar,
    body.stationery-page.stationery-embed-cards .promoTopBanner,
    body.stationery-page.stationery-embed-cards .promoRail{
      display: none !important;
    }
    body.points-page.points-embed-cards .main,
    body.point-support-page.point-support-embed-cards .main,
    body.stationery-page.stationery-embed-cards .main{
      padding: 10px;
    }
    body.points-page.points-embed-cards .promoGridShell,
    body.point-support-page.point-support-embed-cards .promoGridShell,
    body.stationery-page.stationery-embed-cards .promoGridShell{
      display: block;
    }
    body.points-page.points-embed-cards .promoGridShell > .promoContentWrap,
    body.point-support-page.point-support-embed-cards .promoGridShell > .promoContentWrap,
    body.stationery-page.stationery-embed-cards .promoGridShell > .promoContentWrap{
      display: grid;
      gap: 12px;
    }

/* ---------- Migrated Inline Styles: stationery.html ---------- */
    /* style.css 기반 + 페이지 전용 */
    body.stationery-page .gridStationery{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 420px;
      gap:14px;
      max-width: 1280px;
      margin-top:14px;
    }
    body.stationery-page .gridStationery > *{ min-width:0; }

    body.stationery-page .select{
      background: rgba(0,0,0,.22);
      border: 1px solid var(--stroke2);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      outline: none;
      width: 100%;
    }
    body.stationery-page .select:focus{
      border-color: var(--stroke);
      box-shadow: 0 0 0 1px rgba(0,183,255,.10);
    }

    body.stationery-page .twoCol{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px; }
    @media (max-width: 980px){ .twoCol{ grid-template-columns: 1fr; } }

    :root{
      --stationery-item-cols: 72px minmax(180px, 1fr) minmax(170px, 1fr) 96px 96px 72px 60px;
    }
    body.stationery-page .itemRow{
      display:grid;
      grid-template-columns: var(--stationery-item-cols);
      gap:10px;
      align-items:center;
      padding:10px 10px;
      border-radius:12px;
      background: rgba(255,255,255,.02);
      border:1px solid var(--stroke2);
    }
    body.stationery-page .itemRow > *{ min-width:0; }
    body.stationery-page .itemHead{
      display:grid;
      grid-template-columns: var(--stationery-item-cols);
      gap:10px;
      align-items:center;
      padding: 0 10px;
      color: var(--muted);
      font-size: 12px;
    }
    body.stationery-page .orderBtns{
      display:grid;
      grid-template-columns: 1fr;
      gap:6px;
    }
    body.stationery-page .orderBtns .btn{
      min-width: 0;
      padding: 6px 8px;
      line-height: 1;
      font-weight: 700;
    }
    body.stationery-page .itemRow .input{
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    body.stationery-page .weightCell{
      display:grid;
      grid-template-columns: 1fr 72px;
      gap:8px;
      align-items:center;
      min-width: 0;
    }
    body.stationery-page .weightRange{
      width: 100%;
      min-width: 0;
      accent-color: var(--accent-a);
    }
    body.stationery-page .weightInput{
      width: 72px;
      min-width: 72px;
      max-width: 72px;
      text-align:right;
      font-variant-numeric: tabular-nums;
      overflow:hidden;
    }
    body.stationery-page .weightSummary{
      margin-left:auto;
      font-size:12px;
      color: var(--muted);
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,.03);
      white-space: nowrap;
    }
    body.stationery-page .weightSummary.over{
      color:#ff8383;
      border-color: rgba(255,131,131,.55);
      background: rgba(255,70,70,.1);
    }
    body.stationery-page .weightSummary.full{
      color: var(--text);
      border-color: var(--stroke);
      background: rgba(0,183,255,.1);
    }
    body.stationery-page .rankBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,.06);
      font-size:12px;
      font-weight:700;
      color: var(--text);
    }
    body.stationery-page .itemRow .btn{
      width:84px;
      min-width:84px;
      padding-left:0;
      padding-right:0;
    }
    @media (max-width: 1500px){
      body.stationery-page .itemRow{ grid-template-columns: 1fr; }
      body.stationery-page .itemHead{ display:none; }
      body.stationery-page .rankBadge{ justify-self:start; }
    }

    body.stationery-page .historyList{ display:grid; gap:8px; max-height: 520px; overflow:auto; padding-right:6px; }
    body.stationery-page .historyRow{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding:10px; border-radius:12px; background: rgba(255,255,255,.02); border:1px solid var(--stroke2); }
    body.stationery-page .historyLeft{ display:grid; gap:2px; }
    body.stationery-page .historyMeta{ color:var(--muted); font-size:12px; }
    body.stationery-page .chip{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke2); background: rgba(255,255,255,.03); color: var(--muted); font-size:12px; }

    body.stationery-page .rightStack{
      display:grid;
      gap:12px;
      align-self:start;
      grid-column: 2;
      grid-row: 2;
      position: static;
      top: auto;
    }
    body.stationery-page .leftStack{
      display: contents;
    }
    body.stationery-page .leftStack > .card:first-child{
      grid-column: 1 / -1;
      grid-row: 1;
    }
    body.stationery-page .leftStack > .card:nth-child(2){
      grid-column: 1;
      grid-row: 2;
    }
    @media (max-width: 1100px){
      body.stationery-page .gridStationery{ grid-template-columns: 1fr; }
      body.stationery-page .rightStack{
        grid-column: auto;
        grid-row: auto;
        position: static;
      }
      body.stationery-page .leftStack{ display:grid; gap:12px; }
      body.stationery-page .leftStack > .card:first-child,
      body.stationery-page .leftStack > .card:nth-child(2){
        grid-column: auto;
        grid-row: auto;
      }
    }

    body.stationery-page .smallHint{ margin-top:8px; color:var(--muted); font-size:12px; line-height:1.45; }
    body.stationery-page .stationeryConfigCard{
      display: block;
    }
    body.stationery-page .stationeryInlineHistory{
      float: right;
      width: 420px;
      margin: 0 0 12px 14px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.02);
    }
    body.stationery-page .stationeryConfigCard::after{
      content: "";
      display: block;
      clear: both;
    }
    @media (max-width: 1380px){
      body.stationery-page .stationeryConfigCard{
        display: block;
      }
      body.stationery-page .stationeryInlineHistory{
        float: none;
        width: 100%;
        margin: 12px 0;
      }
    }
    body.stationery-page .colorGrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
    body.stationery-page .colorField{ display:grid; grid-template-columns: 1fr 64px; gap:8px; align-items:center; }
    body.stationery-page .colorPicker{
      width: 64px;
      height: 40px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid var(--stroke2);
      background: transparent;
      cursor: pointer;
    }
    @media (max-width: 980px){ .colorGrid{ grid-template-columns: 1fr; } }

    body.stationery-page .overlayFrameWrap{ width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--stroke2); background: rgba(255,255,255,.03); }
    body.stationery-page .overlayFrame{ width:100%; height:100%; border:0; display:block; }
    body.stationery-page .overlayRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    body.stationery-page .overlayRow .input{ flex:1; min-width: 240px; }

    body.stationery-page .topbar{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px 16px;
      flex-wrap:wrap;
    }
    body.stationery-page .topbar .hgroup{
      flex:1 1 420px;
      min-width: 260px;
    }

    /* Top actions: keep controls from collapsing/overlapping on some widths/zoom levels */
    body.stationery-page .topbar .actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      row-gap:8px;
      flex-wrap:wrap;
      min-width: 0;
      margin-left:auto;
      max-width:100%;
    }
    body.stationery-page .topbar .actions > *{
      flex: 0 0 auto;
      min-width: 0;
    }
    body.stationery-page .topbar .actions .themeModeToggle{
      white-space: nowrap;
      flex-shrink: 0;
    }
    @media (max-width: 1320px){
      body.stationery-page .topbar{
        align-items:flex-start;
      }
      body.stationery-page .topbar .actions{
        justify-content:flex-start;
      }
    }

    body.stationery-page .rewardRow{
      display:grid;
      grid-template-columns: 1fr 1fr 100px 100px 100px 140px 220px;
      gap:10px;
      align-items:center;
      padding:10px;
      border-radius:12px;
      background: rgba(255,255,255,.02);
      border:1px solid var(--stroke2);
    }
    body.stationery-page .rewardRow.pendingUse{
      border-color: rgba(255, 96, 96, 0.55);
      background: rgba(255, 64, 64, 0.16);
      box-shadow: inset 0 0 0 1px rgba(255, 96, 96, 0.25);
    }
    body.stationery-page .rewardRow .muted{ font-size:12px; }
    body.stationery-page .pendingDelete{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    @media (max-width: 1100px){
      body.stationery-page .rewardRow{ grid-template-columns: 1fr; }
    }
  
/* ---------- End Migrated Inline Styles: stationery.html ---------- */

/* ---------- Global Workbench Hub ---------- */
.workbenchHub{
  margin-bottom:12px;
}

/* Performance fallback for software rendering (e.g. Chrome SwiftShader) */
html[data-perf-mode="lite"] * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.08s !important;
}

html[data-perf-mode="lite"] .card,
html[data-perf-mode="lite"] .card2,
html[data-perf-mode="lite"] .topbar,
html[data-perf-mode="lite"] .sidebar,
html[data-perf-mode="lite"] .modalCard,
html[data-perf-mode="lite"] .subsPanel,
html[data-perf-mode="lite"] .uiAlertCard,
html[data-perf-mode="lite"] .uiToast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
}

html[data-perf-mode="lite"] #bg,
html[data-perf-mode="lite"] .promoArt,
html[data-perf-mode="lite"] .card::before,
html[data-perf-mode="lite"] .card::after {
  filter: none !important;
}
.workbenchHead{
  display:grid;
  gap:4px;
}
.workbenchTitle{
  font-size:15px;
  font-weight:800;
  color:var(--text);
}
.workbenchSub{
  font-size:12px;
  color:var(--muted);
}
.workbenchControls{
  margin-top:10px;
  display:grid;
  grid-template-columns:auto minmax(180px, 1fr) auto auto;
  gap:8px;
  align-items:center;
}
.workbench-active{
  border-color: color-mix(in srgb, var(--acc) 55%, var(--stroke) 45%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent), var(--shadow-soft);
}
.workbench-hidden{
  display:none !important;
}
@media (max-width: 860px){
  .workbenchControls{
    grid-template-columns: 1fr 1fr;
  }
  .workbenchControls [data-workbench-select]{
    grid-column: 1 / -1;
  }
}