/* ==========================================================================
   veflix settings, redesigned. Same markup as app.js's openSettings(); this layer
   only restyles it. Scoped to `html body .dr.set3`. Roll back by removing the <link>.
   ========================================================================== */
html body .dr.set3 { --se: cubic-bezier(.22,1,.36,1); --sf: cubic-bezier(.4,0,.2,1); --ac: var(--accent, #ff8a1f);
  --s-bg: #0b0a09; --s-rail: #070606; --s-card: #121110; --s-line: rgba(255,255,255,.07); --s-mute: #8b867f; --s-ink: #f3f0ea;
  background: rgba(0,0,0,.58) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; backdrop-filter: blur(14px) saturate(120%) !important; transition: opacity .3s var(--sf) !important; }

/* ---- the window ---- */
html body .dr.set3 .panel { width: min(1000px, 100%) !important; height: min(700px, calc(100vh - 48px)) !important; grid-template-columns: 252px minmax(0,1fr) !important;
  background: var(--s-bg) !important; border: 0 !important; border-radius: 26px !important; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform: translateY(18px) scale(.965) !important; opacity: 0; transition: transform .5s var(--se), opacity .3s var(--sf) !important; }
html body .dr.set3.on .panel { transform: none !important; opacity: 1; }

/* ---- left rail: who you are, then sections ---- */
html body .dr.set3 .s3rail { background: var(--s-rail) !important; border-right: 1px solid var(--s-line) !important; padding: 22px 14px !important; display: flex; flex-direction: column; gap: 18px; }
html body .dr.set3 .s3who { display: flex; align-items: center; gap: 12px; padding: 14px !important; border-radius: 18px; border: 0 !important;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 60%), var(--s-card) !important; box-shadow: inset 0 0 0 1px var(--s-line); }
html body .dr.set3 .s3who .av { width: 46px !important; height: 46px !important; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px var(--s-rail), 0 0 0 4px color-mix(in srgb, var(--ac) 70%, transparent) !important; }
html body .dr.set3 .s3who b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--s-ink); }
html body .dr.set3 .s3who small { color: var(--s-mute) !important; font-size: 12.5px; }
html body .dr.set3 .tabs2 { gap: 3px !important; }
html body .dr.set3 .tabs2 button { position: relative; padding: 11px 12px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--s-mute) !important;
  transition: background-color .2s var(--sf), color .2s var(--sf), transform .25s var(--se) !important; }
html body .dr.set3 .tabs2 button svg { width: 18px !important; height: 18px !important; transition: transform .3s var(--se); }
html body .dr.set3 .tabs2 button:hover { color: var(--s-ink) !important; background: rgba(255,255,255,.045) !important; }
html body .dr.set3 .tabs2 button:hover svg { transform: scale(1.1); }
html body .dr.set3 .tabs2 button:active { transform: scale(.98); }
html body .dr.set3 .tabs2 button.on { color: var(--s-ink) !important; background: color-mix(in srgb, var(--ac) 13%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 26%, transparent) !important; }
html body .dr.set3 .tabs2 button.on svg { stroke: var(--ac) !important; }
html body .dr.set3 .tabs2 button.on::before { content: ""; position: absolute; left: -14px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac); animation: s3bar .35s var(--se); }
@keyframes s3bar { from { transform: scaleY(0); } }

/* ---- close ---- */
html body .dr.set3 .close { top: 18px !important; right: 18px !important; width: 38px !important; height: 38px !important; background: rgba(255,255,255,.05) !important; border: 0 !important;
  transition: background-color .2s var(--sf), transform .3s var(--se) !important; }
html body .dr.set3 .close:hover { background: rgba(255,255,255,.11) !important; transform: rotate(90deg); }

/* ---- content ---- */
html body .dr.set3 .ct { padding: 34px 40px 40px !important; animation: s3in .42s var(--se) !important; scroll-behavior: smooth; }
@keyframes s3in { from { opacity: 0; transform: translateY(10px); } }
html body .dr.set3 .ttl2 h1, html body .dr.set3 .ttl2 h2 { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--s-ink); }
html body .dr.set3 .ttl2 p { margin-top: 6px !important; font-size: 14.5px !important; color: var(--s-mute) !important; }
html body .dr.set3 .sgrp { margin-top: 28px !important; }
html body .dr.set3 .sec { margin: 0 0 10px 4px !important; font-size: 13px !important; font-weight: 650 !important; color: var(--s-mute) !important; }
html body .dr.set3 .sbox2 { background: var(--s-card) !important; border: 0 !important; border-radius: 18px !important; padding: 0 20px !important; box-shadow: inset 0 0 0 1px var(--s-line) !important; }
html body .dr.set3 .sbox2 .opt { padding: 17px 0 !important; border-bottom: 1px solid var(--s-line) !important; transition: background-color .2s var(--sf); }
html body .dr.set3 .opt .tx b { font-size: 15px !important; font-weight: 600 !important; color: var(--s-ink); }
html body .dr.set3 .opt .tx small { margin-top: 4px !important; font-size: 13px !important; color: var(--s-mute) !important; line-height: 1.45 !important; }

/* ---- switch ---- */
html body .dr.set3 .sw { width: 46px !important; height: 28px !important; border-radius: 999px !important; background: #2b2826 !important; transition: background-color .25s var(--sf), box-shadow .25s var(--sf) !important; }
html body .dr.set3 .sw:after { width: 22px !important; height: 22px !important; top: 3px !important; left: 3px !important; background: #f3f0ea !important; box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.3,1.4,.5,1) !important; }
html body .dr.set3 .sw.on { background: var(--ac) !important; box-shadow: 0 0 18px -4px color-mix(in srgb, var(--ac) 70%, transparent) !important; }
html body .dr.set3 .sw.on:after { transform: translateX(18px) !important; background: #fff !important; }
html body .dr.set3 .sw:active:after { width: 26px !important; }

/* ---- segmented choice ---- */
html body .dr.set3 .segs { background: #1a1816 !important; border: 0 !important; border-radius: 12px !important; padding: 3px !important; box-shadow: inset 0 0 0 1px var(--s-line) !important; }
html body .dr.set3 .segs button { padding: 7px 14px !important; border-radius: 9px !important; font-size: 13px !important; color: var(--s-mute) !important;
  transition: background-color .25s var(--sf), color .2s var(--sf), box-shadow .25s var(--sf) !important; }
html body .dr.set3 .segs button:hover { color: var(--s-ink) !important; }
html body .dr.set3 .segs button.on { background: #f3f0ea !important; color: #0b0a09 !important; box-shadow: 0 4px 14px -6px rgba(0,0,0,.8) !important; }

/* ---- quality cards ---- */
html body .dr.set3 .qcards { gap: 10px !important; }
html body .dr.set3 .qcards button { min-height: 82px !important; border-radius: 16px !important; background: #151412 !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--s-line);
  transition: box-shadow .25s var(--sf), background-color .25s var(--sf), transform .3s var(--se) !important; }
html body .dr.set3 .qcards button:hover { background: #1b1917 !important; transform: translateY(-2px); }
html body .dr.set3 .qcards button.on { background: color-mix(in srgb, var(--ac) 9%, #121110) !important; box-shadow: inset 0 0 0 1.5px var(--ac), 0 12px 30px -16px color-mix(in srgb, var(--ac) 80%, transparent) !important; }
html body .dr.set3 .qcards button.on i { border-color: var(--ac) !important; box-shadow: inset 0 0 0 4px #141210, inset 0 0 0 10px var(--ac) !important; }
html body .dr.set3 .qcards small { color: var(--s-mute) !important; }

/* ---- playback header card ---- */
html body .dr.set3 .s3setup { border-radius: 20px !important; border: 0 !important; background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 55%), var(--s-card) !important;
  box-shadow: inset 0 0 0 1px var(--s-line) !important; }
html body .dr.set3 .s3speed b { font-size: 40px !important; font-weight: 800 !important; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
html body .dr.set3 .s3chip { border-radius: 999px !important; }
html body .dr.set3 .s3chip.ok { color: var(--s-ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent) !important; background: color-mix(in srgb, var(--ac) 12%, transparent) !important; }

/* themes and stats tiles */
html body .dr.set3 .thc, html body .dr.set3 .stat div { border-radius: 16px !important; background: var(--s-card) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--s-line);
  transition: transform .3s var(--se), box-shadow .25s var(--sf) !important; }
html body .dr.set3 .thc:hover { transform: translateY(-2px); }

@media (max-width: 700px) {
  html body .dr.set3 .panel { border-radius: 22px 22px 0 0 !important; grid-template-columns: 1fr !important; height: calc(100vh - 40px) !important; }
  html body .dr.set3 .ct { padding: 22px 18px 30px !important; }
  html body .dr.set3 .ttl2 h1 { font-size: 24px !important; }
}
html.reduce body .dr.set3 *, html.reduce body .dr.set3 .panel { transition-duration: .01ms !important; animation-duration: .01ms !important; }

/* ==========================================================================
   v2: pure black, sliding tab highlight, springy tab transitions
   ========================================================================== */
html body .dr.set3 { --s-bg: #000; --s-rail: #000; --s-card: #0a0a0a; --s-line: #1c1c1c; }
html body .dr.set3 .panel { box-shadow: 0 50px 120px -30px #000, 0 0 0 1px #1f1f1f !important; }
html body .dr.set3 .s3who { background: #0a0a0a !important; }
html body .dr.set3 .tabs2 { position: relative; }
html body .dr.set3 .tabs2 .s3ind { position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 12px; background: #141414; box-shadow: inset 0 0 0 1px #262626; pointer-events: none; z-index: 0; }
html body .dr.set3 .tabs2 .s3ind.ready { transition: transform .55s cubic-bezier(.32,1.3,.5,1), height .35s ease; }
html body .dr.set3 .tabs2 .s3ind::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; }
html body .dr.set3 .tabs2 button { z-index: 1; }
html body .dr.set3 .tabs2 button.on { background: transparent !important; box-shadow: none !important; color: #fff !important; }
html body .dr.set3 .tabs2 button.on::before { display: none; }
html body .dr.set3 .tabs2 button.on svg { stroke: #fff !important; }
html body .dr.set3 .ct { animation: s3in2 .55s cubic-bezier(.22,1,.36,1) !important; }
@keyframes s3in2 { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); } }
html body .dr.set3 .sw.on { background: #fff !important; box-shadow: none !important; }
html body .dr.set3 .sw.on:after { background: #000 !important; }
html body .dr.set3 .qcards button { background: #050505 !important; }
html body .dr.set3 .qcards button.on { background: #0c0c0c !important; box-shadow: inset 0 0 0 1.5px #fff !important; }
html body .dr.set3 .qcards button.on i { border-color: #fff !important; box-shadow: inset 0 0 0 4px #0c0c0c, inset 0 0 0 10px #fff !important; }
html body .dr.set3 .segs { background: #000 !important; box-shadow: inset 0 0 0 1px #222 !important; }
html body .dr.set3 .s3setup { background: #0a0a0a !important; }
html body .dr.set3 .s3chip.ok { background: #141414 !important; box-shadow: inset 0 0 0 1px #3a3a3a !important; }