/* ==========================================================================
   DP Stream Player — Design tokens
   Palette derived from the mark: void navy, electric blue, violet-magenta swoosh
   ========================================================================== */
:root{
  --void:        #05070D;
  --panel:       #0B0F1A;
  --panel-2:     #10152400;
  --panel-raised:#131829;
  --line:        #212739;
  --blue:        #2F8FFF;
  --blue-2:      #5CB1FF;
  --violet:      #7C5CFF;
  --magenta:     #C13FE0;
  --cushion:     #34D399;
  --cushion-2:   #22C3A6;
  --text-hi:     #EDF0F8;
  --text-mid:    #A8B0C3;
  --text-low:    #626B80;
  --danger:      #FF5C6C;

  --grad-mark: linear-gradient(120deg, var(--blue) 0%, var(--violet) 55%, var(--magenta) 100%);

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-lift: 0 20px 60px -20px rgba(0,0,0,.6);
}

body[data-theme="light"]{
  --void:        #F4F5F9;
  --panel:       #FFFFFF;
  --panel-raised:#FFFFFF;
  --line:        #E1E4EC;
  --text-hi:     #12141C;
  --text-mid:    #4B5266;
  --text-low:    #8890A2;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  height:100%;
  background:var(--void);
  color:var(--text-hi);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

button, input, select{font-family:inherit; color:inherit;}
button{cursor:pointer; background:none; border:none;}
svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
svg path[d^="M8 5v14l11"],
svg path[d^="M6 6h12v12"],
svg path[d^="M12 21s"],
.ctrl-btn svg path{fill:currentColor; stroke:none;}
.ctrl-btn.primary svg path,
#btn-stop svg path,
#btn-favorite-url svg path,
#btn-play-url ~ svg path{fill:currentColor;}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  border-bottom:1px solid var(--line);
  position:relative; z-index:5;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-logo{width:38px; height:38px; border-radius:9px; object-fit:cover;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em;}
.brand-tagline{font-size:11px; color:var(--text-low); letter-spacing:.02em;}

.topnav{display:flex; gap:6px;}
.nav-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--text-mid); transition:background .15s, color .15s;
}
.nav-btn svg{width:19px; height:19px;}
.nav-btn:hover{background:var(--panel-raised); color:var(--text-hi);}

/* ---------- Stage / Player ---------- */
.stage{
  max-width:1180px; margin:0 auto; padding:28px 20px 60px;
  position:relative; z-index:1;
}

.player-frame{
  position:relative;
  width:100%; aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
#video{width:100%; height:100%; object-fit:contain; background:#000; display:block;}

.player-idle{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(120% 100% at 50% 0%, #0E1526 0%, #05070D 70%);
  pointer-events:none;
}
.idle-glyph{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-mark);
}
.idle-glyph svg{width:26px; height:26px; fill:#fff; stroke:none; margin-left:3px;}
.idle-text{font-family:var(--font-display); font-size:15px; color:var(--text-mid);}
.idle-formats{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--text-low); text-transform:uppercase;}

.player-status{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(5,7,13,.72); backdrop-filter:blur(4px); z-index:3;
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--blue-2);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
#status-text{font-size:13px; color:var(--text-mid); font-family:var(--font-mono);}

/* ---------- Signature: buffer cushion HUD ---------- */
.cushion-hud{
  position:absolute; top:16px; left:16px; right:16px;
  z-index:2; pointer-events:none;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(-6px);
  animation:cushion-in .4s ease forwards;
}
@keyframes cushion-in{to{opacity:1; transform:translateY(0);}}
.cushion-track{
  position:relative; height:5px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.cushion-fill{
  position:absolute; top:0; bottom:0; right:0; width:18%;
  background:var(--grad-mark);
  border-radius:3px;
  transition:width .5s ease;
}
.cushion-edge-marker{
  position:absolute; top:-3px; right:0; width:2px; height:11px;
  background:#fff; border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,.7);
}
.cushion-readout{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.75);
  background:rgba(5,7,13,.55); backdrop-filter:blur(6px);
  width:fit-content; padding:4px 10px 4px 8px; border-radius:20px;
}
.cushion-dot{width:6px; height:6px; border-radius:50%; background:var(--cushion); box-shadow:0 0 6px var(--cushion);}
#cushion-value{color:#fff; font-weight:500;}
.cushion-label{color:rgba(255,255,255,.55);}

/* ---------- Controls overlay ---------- */
.controls-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:10px 16px 14px;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 65%, transparent 100%);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.player-frame:hover .controls-overlay,
.player-frame:focus-within .controls-overlay,
.controls-overlay.pinned{
  opacity:1; transform:translateY(0);
}

.progress-row{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.time-label{font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.8); min-width:52px;}
#time-total{text-align:right;}

.seek-bar, .volume-bar{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; flex:1;
  background:linear-gradient(90deg, var(--blue-2) var(--fill,0%), rgba(255,255,255,.18) var(--fill,0%));
  outline:none;
}
.seek-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(92,177,255,.35); cursor:pointer;
}
.seek-bar::-moz-range-thumb, .volume-bar::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:none; background:#fff; cursor:pointer;
}

.controls-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.controls-left, .controls-right{display:flex; align-items:center; gap:6px;}

.ctrl-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; color:#fff;
}
.ctrl-btn svg{width:17px; height:17px;}
.ctrl-btn:hover{background:rgba(255,255,255,.12);}
.ctrl-btn.primary{
  width:38px; height:38px; background:var(--grad-mark); color:#fff;
}
.ctrl-btn.primary:hover{filter:brightness(1.1);}

.volume-group{display:flex; align-items:center; gap:6px;}
.volume-bar{width:70px;}

.quality-badge{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  color:var(--cushion); border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.08);
  padding:3px 8px; border-radius:20px;
}

.select-chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff;
  font-size:11px; padding:5px 8px; border-radius:8px; font-family:var(--font-mono);
}

/* ---------- URL console ---------- */
.url-console{display:flex; gap:10px; margin-top:16px;}
.url-field{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:0 14px; position:relative;
}
.url-icon{width:16px; height:16px; color:var(--text-low); flex-shrink:0;}
#url-input{
  flex:1; background:none; border:none; outline:none; height:50px;
  font-family:var(--font-mono); font-size:13.5px; color:var(--text-hi);
}
#url-input::placeholder{color:var(--text-low);}
.detected-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blue-2); background:rgba(47,143,255,.1); border:1px solid rgba(47,143,255,.3);
  padding:3px 8px; border-radius:6px; flex-shrink:0;
}

.btn-solid{
  background:var(--grad-mark); color:#fff; font-weight:600; font-size:14px;
  padding:0 26px; border-radius:var(--radius-md); transition:filter .15s, transform .1s;
}
.btn-solid:hover{filter:brightness(1.08);}
.btn-solid:active{transform:scale(.97);}

.btn-ghost{
  width:50px; border:1px solid var(--line); border-radius:var(--radius-md); color:var(--text-mid);
  display:flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s;
}
.btn-ghost svg{width:18px; height:18px;}
.btn-ghost:hover{color:var(--magenta); border-color:rgba(193,63,224,.4);}
.btn-ghost.active{color:var(--magenta);}
.btn-ghost.active svg path{fill:var(--magenta); stroke:none;}
.btn-ghost.full-width{width:100%; height:44px; margin-top:8px; color:var(--danger); border-color:rgba(255,92,108,.3);}
.btn-ghost.full-width:hover{border-color:var(--danger);}

/* ---------- Side panels ---------- */
.side-panel{
  position:fixed; top:0; right:-380px; width:360px; height:100%;
  background:var(--panel); border-left:1px solid var(--line);
  z-index:20; transition:right .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.side-panel.open{right:0;}

.side-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px; border-bottom:1px solid var(--line);
}
.side-panel-title{font-family:var(--font-display); font-weight:600; font-size:15px;}
.side-tabs{display:flex; gap:4px;}
.side-tab{
  font-size:13px; font-weight:500; color:var(--text-low); padding:7px 12px; border-radius:8px;
}
.side-tab.active{color:var(--text-hi); background:var(--panel-raised);}
.close-btn{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--text-low); border-radius:8px;}
.close-btn svg{width:15px; height:15px;}
.close-btn:hover{color:var(--text-hi); background:var(--panel-raised);}

.side-panel-body{flex:1; overflow-y:auto; padding:14px;}

.entry-list{list-style:none; display:flex; flex-direction:column; gap:6px;}
.entry-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.entry-item:hover{background:var(--panel-raised); border-color:var(--line);}
.entry-icon{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-mark); color:#fff;
}
.entry-icon svg{width:13px; height:13px; fill:#fff; stroke:none;}
.entry-meta{flex:1; min-width:0;}
.entry-url{font-size:12.5px; font-family:var(--font-mono); color:var(--text-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.entry-sub{font-size:10.5px; color:var(--text-low); margin-top:1px;}
.entry-fav{width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--text-low); flex-shrink:0;}
.entry-fav svg{width:14px; height:14px;}
.entry-fav.active{color:var(--magenta);}
.entry-fav.active svg path{fill:var(--magenta); stroke:none;}

.empty-hint{font-size:12.5px; color:var(--text-low); text-align:center; padding:30px 10px;}

/* ---------- Settings ---------- */
.settings-body{display:flex; flex-direction:column; gap:22px;}
.setting-group{display:flex; flex-direction:column; gap:9px;}
.setting-label{font-size:13px; font-weight:500; color:var(--text-hi); display:flex; justify-content:space-between; align-items:center;}
.setting-value{font-family:var(--font-mono); font-size:11px; color:var(--blue-2);}
.setting-hint{font-size:11.5px; color:var(--text-low); line-height:1.5;}
.setting-hint code{
  font-family:var(--font-mono); font-size:10.5px; color:var(--blue-2);
  background:rgba(47,143,255,.1); padding:1px 5px; border-radius:4px;
}

.segmented{display:flex; background:var(--panel-raised); border:1px solid var(--line); border-radius:10px; padding:3px;}
.segmented button{flex:1; padding:8px; border-radius:7px; font-size:12.5px; color:var(--text-mid);}
.segmented button.active{background:var(--grad-mark); color:#fff;}

.toggle{position:relative; display:inline-block; width:42px; height:24px;}
.toggle input{opacity:0; width:0; height:0;}
.toggle-track{
  position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background .2s;
}
.toggle-thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .2s;
}
.toggle input:checked + .toggle-track{background:var(--grad-mark);}
.toggle input:checked + .toggle-track .toggle-thumb{transform:translateX(18px);}

.select-full, .input-full{
  width:100%; height:42px; padding:0 12px; border-radius:10px;
  background:var(--panel-raised); border:1px solid var(--line); color:var(--text-hi); font-size:13px;
}

input[type="range"]{-webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:var(--line); outline:none;}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--blue-2); cursor:pointer;
  box-shadow:0 0 0 4px rgba(47,143,255,.18);
}

.scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:15;}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .topbar{padding:14px 16px;}
  .brand-tagline{display:none;}
  .stage{padding:16px 12px 40px;}
  .url-console{flex-wrap:wrap;}
  .url-field{width:100%; order:1;}
  .btn-solid{flex:1; order:2;}
  .btn-ghost{order:3;}
  .side-panel{width:100%; right:-100%;}
  .controls-overlay{opacity:1; transform:none; position:absolute;}
  .volume-bar{width:46px;}
  .select-chip{display:none;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important;}
}