/* RoSint Themes + Music (device-local) */
#rosint-theme-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:#050507;
}
#rosint-theme-bg video, #rosint-theme-bg img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease;
}
#rosint-theme-bg.on video.show, #rosint-theme-bg.on img.show { opacity:1; }
#rosint-theme-bg .bg-dim {
  position:absolute; inset:0; background:rgba(5,5,7,.55);
  transition:background .3s ease;
}
body.has-theme-bg #rosint-theme-bg .bg-dim { background:rgba(5,5,7,.64); }
body > header.top { position:relative; z-index:2; }
body > .shell { position:relative; z-index:1; }
/* mobile: shell must NOT create a stacking context that traps the fixed drawer under .nav-scrim */
@media (max-width: 800px) {
  /* shell is display:block in app.html — keep no stacking trap */
  body > .shell { z-index: auto !important; position: static !important; display: block !important; }
  body > header.top { z-index: 30; position: sticky; }
  body.has-theme-bg nav.side,
  nav.side {
    background: rgba(8,8,11,.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.nav-open header.top { visibility: hidden; pointer-events: none; }
  body > main, .shell > main {
    position: relative;
    z-index: 1;
    width: 100% !important;
  }
}
body.has-theme-bg { background:transparent; }
body.has-theme-bg header.top {
  background:rgba(5,5,7,.72) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
body.has-theme-bg nav.side {
  background:rgba(5,5,7,.52) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body.has-theme-bg main { background:transparent; }
body.has-theme-bg .card,
body.has-theme-bg .price-card,
body.has-theme-bg .auth-card,
body.has-theme-bg .r-card,
body.has-theme-bg .admin-stat,
body.has-theme-bg .prem-gate-card,
body.has-theme-bg .theme-card,
body.has-theme-bg .music-card {
  background:rgba(12,12,16,.72) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* Global accent: Themes color drives the whole UI */
body.theme-on {
  --cyan: var(--theme-accent, #22d3ee);
  --focus: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #22d3ee) 28%, transparent);
  --accent-soft: color-mix(in srgb, var(--theme-accent, #22d3ee) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--theme-accent, #22d3ee) 40%, transparent);
}
/* primary actions */
body.theme-on .btn:not(.ghost):not(.small),
body.theme-on button.btn:not(.ghost):not(.small),
body.theme-on a.btn:not(.ghost):not(.small),
body.theme-on #music-play.btn {
  background: var(--theme-accent, #22d3ee);
  color: var(--theme-accent-contrast, #0a0a0c);
  border-color: transparent;
}
body.theme-on .btn:not(.ghost):hover:not(:disabled),
body.theme-on button.btn:not(.ghost):hover:not(:disabled),
body.theme-on a.btn:not(.ghost):hover:not(:disabled),
body.theme-on #music-play.btn:hover:not(:disabled) {
  /* keep accent bg + contrast text — base .btn:hover was forcing #f4f4f5 (white-on-white) */
  background: var(--theme-accent, #22d3ee) !important;
  color: var(--theme-accent-contrast, #0a0a0c) !important;
  border-color: transparent !important;
  filter: brightness(1.08);
}
body.theme-on .btn.ghost:hover:not(:disabled) {
  border-color: var(--accent-line);
  color: var(--theme-accent, #22d3ee);
  background: var(--accent-soft);
}
/* text / icons that should follow accent */
body.theme-on a:hover,
body.theme-on .tg-verified,
body.theme-on .tg-msg-head .views,
body.theme-on .tg-msg-head a:hover,
body.theme-on .tg-db-nick,
body.theme-on .md-li,
body.theme-on .usr-head .mini,
body.theme-on .chip b,
body.theme-on .tag.ok,
body.theme-on .price-card.best .price-amt,
body.theme-on .price-amt .pc-save,
body.theme-on .p-badge,
body.theme-on nav.side button[data-tab].on .ico,
body.theme-on .music-head .mh-ico,
body.theme-on .theme-sec-label {
  color: var(--theme-accent, #22d3ee);
}
body.theme-on .spinner,
body.theme-on .typing i {
  border-top-color: var(--theme-accent, #22d3ee);
}
/* focus / selection */
body.theme-on input:focus,
body.theme-on select:focus,
body.theme-on textarea:focus,
body.theme-on .frm input:focus,
body.theme-on .frm select:focus,
body.theme-on .frm textarea:focus {
  border-color: var(--accent-line) !important;
  box-shadow: var(--focus) !important;
}
body.theme-on ::selection {
  background: color-mix(in srgb, var(--theme-accent, #22d3ee) 35%, transparent);
}
/* active chrome */
body.theme-on nav.side button[data-tab].on {
  background: var(--accent-soft);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
body.theme-on .login-tabs button.on,
body.theme-on .chip {
  border-color: var(--accent-line);
}
body.theme-on .bar > div,
body.theme-on .progress > div {
  background: var(--theme-accent, #22d3ee);
}
/* pricing / checks */
body.theme-on .price-card.best {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #22d3ee) 18%, transparent),
              0 24px 50px -28px rgba(0,0,0,.85);
}
body.theme-on .price-card.best .pc-cta .btn,
body.theme-on .price-card.best .pc-cta a.btn {
  background: var(--theme-accent, #22d3ee);
  color: var(--theme-accent-contrast, #0a0a0c);
}
body.theme-on .price-card ul li.ok .mark,
body.theme-on .price-card:not(#price-free) ul li .mark {
  color: var(--theme-accent, #22d3ee);
}
body.theme-on .p-badge {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
/* modules with cyan accents */
body.theme-on .r-card:hover,
body.theme-on .card:focus-within {
  border-color: var(--accent-line);
}
body.theme-on .badge.plan:hover {
  border-color: var(--accent-line);
  color: var(--theme-accent, #22d3ee);
}

/* cursors */
html.cur-soft, html.cur-soft * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.2' d='M4 3l7 17 1.5-6.5L19 12z'/%3E%3C/svg%3E") 2 2, auto !important; }
html.cur-dot, html.cur-dot * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='5' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 8 8, auto !important; }
html.cur-ring, html.cur-ring * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23fff'/%3E%3C/svg%3E") 14 14, crosshair !important; }
html.cur-cross, html.cur-cross * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath stroke='%23fff' stroke-width='2' d='M14 4v20M4 14h20'/%3E%3C/svg%3E") 14 14, crosshair !important; }

/* Themes panel */
.theme-card, .music-card {
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius, 14px);
  padding:1.15rem 1.2rem; margin-bottom:1rem;
}
.theme-sec-label {
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#6b6b74; margin:0 0 .75rem;
}
.theme-accent-row { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:.85rem; }
.theme-hex-wrap {
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line); background:#09090c; border-radius:var(--radius-sm, 10px); padding:.35rem .55rem;
}
.theme-hex-swatch {
  width:1.35rem; height:1.35rem; border-radius:6px; border:1px solid rgba(255,255,255,.15);
  background:var(--theme-accent,#6b9dbc);
}
.theme-hex-wrap label { font-size:.68rem; color:#6b6b74; font-weight:650; }
.theme-hex-wrap input {
  all:unset; font-family:var(--mono); font-size:.82rem; color:var(--fg); width:6.5rem;
}
.theme-swatches { display:flex; flex-wrap:wrap; gap:.45rem; }
.theme-swatch {
  width:1.55rem; height:1.55rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; padding:0; background:none;
}
.theme-swatch.on { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.theme-fonts { display:flex; flex-wrap:wrap; gap:.45rem; }
.theme-font {
  all:unset; cursor:pointer; border:1px solid var(--line); border-radius:999px;
  padding:.4rem .75rem; font-size:.78rem; color:var(--muted); background:transparent;
}
.theme-font.on { background:#fff; color:#0a0a0c; border-color:#fff; font-weight:650; }
.theme-cursors {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.55rem;
}
.theme-cursor {
  all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.35rem;
  border:1px solid var(--line); border-radius:var(--radius, 14px); padding:.75rem .5rem; background:#09090c;
  color:var(--muted); font-size:.72rem; text-align:center;
}
.theme-cursor.on { border-color:#fff; color:#fff; }
.theme-cursor .ci { font-size:1.15rem; line-height:1; color:#fff; opacity:.85; }
.theme-bgs {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.65rem;
}
.theme-bg {
  all:unset; cursor:pointer; display:flex; flex-direction:column; gap:.4rem;
  border:1px solid var(--line); border-radius:var(--radius, 14px); padding:.55rem; background:#09090c;
  color:var(--muted); font-size:.72rem;
}
.theme-bg.on { border-color:#fff; color:#fff; }
.theme-bg .thumb {
  height:3.6rem; border-radius:8px; background:#111116 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:.7rem;
}
.theme-bg .thumb.video::after { content:"Video"; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(0,0,0,.45); padding:.15rem .4rem; border-radius:999px; }
.theme-custom-url { display:none; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.music-pl-form { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; align-items:center; }
.music-pl-form input {
  flex:1; min-width:12rem; background:#0a0a0d; border:1px solid var(--line,#2a2a33);
  color:var(--fg,#f4f4f5); border-radius:10px; padding:.55rem .75rem; font:inherit;
}
.music-pl-form input:focus {
  outline:none;
  border-color: color-mix(in srgb, var(--theme-accent, #22d3ee) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, #22d3ee) 28%, transparent);
}
.music-pl-form .btn { flex:none; white-space:nowrap; }
.theme-custom-url.show { display:flex; }
.theme-custom-url input {
  flex:1; min-width:12rem; border:1px solid var(--line); background:#09090c; color:var(--fg);
  border-radius:var(--radius-sm, 10px); padding:.65rem .8rem; font-size:.82rem;
}
.theme-custom-url input:focus { outline:none; border-color:#2a2a33; }

/* Music */
.music-head { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.35rem; }
.music-head .mh-ico {
  width:2.2rem; height:2.2rem; border-radius:var(--radius-sm, 10px); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--theme-accent,#22d3ee);
}
.music-search {
  display:flex; gap:.5rem; margin:1rem 0 .75rem; flex-wrap:wrap;
}
.music-search input {
  flex:1; min-width:14rem; border:1px solid var(--line); background:#09090c; color:var(--fg);
  border-radius:var(--radius, 14px); padding:.75rem .9rem .75rem 2.4rem; font-size:.88rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b6b74' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l3.5 3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.75rem center;
}
.music-search input:focus { outline:none; border-color:#2a2a33; }
.music-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; }
.music-actions .btn { border-radius:var(--radius-sm, 10px); min-height:2.35rem; }
.music-vol { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.music-vol .lbl { font-size:.68rem; font-weight:700; letter-spacing:.08em; color:#6b6b74; }
.music-vol input[type=range] { flex:1; accent-color:var(--theme-accent,#22d3ee); }
.music-vol .pct { font-size:.78rem; color:var(--muted); min-width:2.6rem; text-align:right; }
.music-eq-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  margin-bottom:.75rem;
}
.music-eq-head h3 { font-size:.95rem; font-weight:650; }
.music-toggle {
  position:relative; width:2.6rem; height:1.4rem; border-radius:999px; border:1px solid var(--line);
  background:var(--active, #18181f); cursor:pointer; padding:0;
}
.music-toggle.on { background:var(--theme-accent,#22d3ee); border-color:transparent; }
.music-toggle i {
  position:absolute; top:2px; left:2px; width:1rem; height:1rem; border-radius:999px; background:#fff;
  transition:left .18s ease;
}
.music-toggle.on i { left:calc(100% - 1.1rem); }
.music-eq-sliders {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.55rem;
  border:1px solid var(--line); border-radius:var(--radius, 14px); background:#09090c;
  padding:.9rem .7rem .75rem; margin-bottom:.65rem;
}
.music-eq-sliders.disabled { opacity:.45; pointer-events:none; }
.music-eq-band { display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:0; }
.music-eq-band input[type=range] {
  writing-mode: vertical-lr; direction: rtl;
  width:1.4rem; height:7.5rem; accent-color:var(--theme-accent,#22d3ee);
}
.music-eq-band .hz { font-size:.62rem; color:#6b6b74; letter-spacing:.02em; }
.music-eq-band .db { font-size:.62rem; color:#a1a1aa; font-variant-numeric:tabular-nums; }
.music-eq-note { font-size:.72rem; color:#6b6b74; margin-bottom:.5rem; line-height:1.45; }
.music-player-frame { min-height:280px; }
.music-player-frame {
  width:100%; min-height:220px; border:0; border-radius:var(--radius, 14px); background:#000; margin-bottom:1rem;
}
.music-queue-head, .music-pl-head {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin:1rem 0 .55rem;
}
.music-queue-head h3, .music-pl-head h3 {
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b6b74;
}
.music-queue-list, .music-pl-list { display:flex; flex-direction:column; gap:.4rem; }
.music-q-item, .music-pl-item {
  display:flex; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:var(--radius-sm, 10px);
  padding:.55rem .7rem; background:#09090c; font-size:.82rem;
}
.music-q-item.on { border-color:var(--theme-accent,#22d3ee); }
.music-q-item .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-q-item button, .music-pl-item button {
  all:unset; cursor:pointer; color:#6b6b74; font-size:.72rem; padding:.2rem .35rem;
}
.music-q-item button:hover, .music-pl-item button:hover { color:#fff; }
.music-empty { color:#6b6b74; font-size:.82rem; }
.music-now { font-size:.78rem; color:var(--muted); margin-bottom:.75rem; }
.music-now b { color:var(--fg); }


/* premium unify 2026-09-12 */
.theme-card, .music-card {
  box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(0,0,0,.75));
  transition: border-color 180ms cubic-bezier(.22,.61,.36,1), background 180ms cubic-bezier(.22,.61,.36,1);
}
.theme-card:hover, .music-card:hover {
  border-color: var(--line-strong, rgba(255,255,255,.12));
}
.theme-sec-label {
  color: var(--dim, #71717a);
  letter-spacing: .1em;
}
.theme-font, .theme-cursor, .theme-bg {
  transition: border-color 180ms cubic-bezier(.22,.61,.36,1), color 180ms cubic-bezier(.22,.61,.36,1), background 180ms cubic-bezier(.22,.61,.36,1);
}
.theme-font:hover, .theme-cursor:hover, .theme-bg:hover {
  border-color: var(--line-strong, rgba(255,255,255,.12));
  color: var(--fg, #f4f4f5);
}
.theme-font.on {
  background: #e4e4e7;
  color: #0a0a0c;
  border-color: #e4e4e7;
}
.theme-cursor.on, .theme-bg.on {
  border-color: var(--theme-accent, #22d3ee);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #22d3ee) 35%, transparent);
}
.theme-swatch.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
.music-search input:focus,
.theme-custom-url input:focus {
  border-color: color-mix(in srgb, var(--theme-accent, #22d3ee) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent, #22d3ee) 28%, transparent);
}
.music-player-frame {
  min-height: 240px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: var(--radius, 14px);
  background: #000;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(0,0,0,.75));
}
.music-eq-sliders {
  border-radius: var(--radius, 14px);
  background: #09090c;
  border-color: var(--line, rgba(255,255,255,.08));
}
.music-q-item, .music-pl-item {
  border-radius: var(--radius-sm, 10px);
  transition: border-color 180ms cubic-bezier(.22,.61,.36,1);
}
.music-q-item.on {
  border-color: var(--theme-accent, #22d3ee);
  background: color-mix(in srgb, var(--theme-accent, #22d3ee) 8%, #09090c);
}
.music-head .mh-ico {
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--theme-accent, #22d3ee) 10%, transparent);
}
body.has-theme-bg .theme-card,
body.has-theme-bg .music-card {
  border-color: rgba(255,255,255,.1);
}


/* ===== mobile polish ===== */
@media (max-width: 800px) {
  .theme-card, .music-card { padding: 1rem .9rem; margin-bottom: .85rem; }
  .theme-custom-url input, .music-search input {
    min-width: 0 !important; width: 100%; font-size: 16px !important;
  }
  .theme-custom-url.show { flex-direction: column; }
  .theme-custom-url .btn { width: 100%; }
  .music-pl-form { flex-direction: column; align-items: stretch; }
  .music-pl-form input { min-width: 0; width: 100%; }
  .music-pl-form .btn { width: 100%; }
  .theme-bgs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .theme-cursors { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .theme-fonts .theme-font { font-size: .72rem; padding: .38rem .62rem; }
  /* EQ: stack as horizontal rows — vertical sliders crush on phones */
  .music-eq-sliders {
    display: flex; flex-direction: column; gap: .55rem;
    padding: .75rem .7rem;
  }
  .music-eq-band {
    flex-direction: row; align-items: center; gap: .55rem;
    width: 100%;
  }
  .music-eq-band .hz { min-width: 2.8rem; font-size: .68rem; }
  .music-eq-band .db { min-width: 2.8rem; text-align: right; font-size: .68rem; }
  .music-eq-band input[type=range] {
    writing-mode: horizontal-tb !important; direction: ltr !important;
    width: 100%; height: 1.35rem; flex: 1;
  }
  .music-head { flex-wrap: wrap; }
  .music-vol { gap: .5rem; }
  .music-queue-head, .music-pl-head { flex-wrap: wrap; gap: .5rem; }
  .music-actions { gap: .4rem; }
  .music-actions .btn { flex: 1 1 auto; }
  #rosint-theme-bg video, #rosint-theme-bg img { object-position: center top; }
}
@media (max-width: 480px) {
  .theme-bgs { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .theme-bg .thumb { height: 3rem; }
}


/* Music — compact controls */
.music-actions { gap: .35rem; margin-bottom: .75rem; }
.music-actions .btn {
  min-height: 1.9rem !important;
  padding: .28rem .7rem !important;
  font-size: .76rem !important;
  border-radius: 8px !important;
  line-height: 1.2;
}
.music-search { margin: .75rem 0 .55rem; gap: .4rem; }
.music-search input {
  padding: .55rem .75rem .55rem 2.15rem !important;
  font-size: .82rem !important;
  border-radius: 10px !important;
  min-height: 2.15rem;
}
.music-vol { margin-bottom: .75rem; gap: .55rem; }
.music-eq-head .btn, #music-eq-reset {
  min-height: 1.85rem !important;
  font-size: .72rem !important;
  padding: .25rem .55rem !important;
}
#music-eq-preset {
  min-height: 1.85rem !important;
  font-size: .72rem !important;
  padding: .25rem .45rem !important;
}
.music-queue-head .btn, #music-clear-queue, #music-save-pl {
  min-height: 1.75rem !important;
  padding: .22rem .55rem !important;
  font-size: .72rem !important;
  border-radius: 8px !important;
}
.music-q-item button, .music-pl-item button {
  min-height: 1.65rem !important;
  padding: .2rem .45rem !important;
  font-size: .7rem !important;
  border-radius: 7px !important;
}
.music-player-frame { min-height: 200px !important; }
.music-pl-save input {
  min-height: 2rem !important;
  padding: .4rem .65rem !important;
  font-size: .82rem !important;
}
.music-pl-save .btn {
  min-height: 2rem !important;
  padding: .3rem .7rem !important;
  font-size: .76rem !important;
}
.music-queue-head #music-loop-toggle { flex:none; }
@media (max-width: 800px) {
  .music-actions .btn {
    flex: 1 1 calc(33.33% - .3rem);
    justify-content: center;
    min-height: 2.05rem !important;
  }
}