/* =========================================================
   AGE YT#7 KARAOKE — Design tokens
   Konsep: "backstage studio malam" — panggung karaoke gelap
   dengan lampu mic magenta & spotlight amber.
   ========================================================= */
:root{
  --bg:#0F0B1E;
  --bg-alt:#150F26;
  --surface:#1A1330;
  --surface-hover:#241A42;
  --border:#2E2450;
  --text:#F5F0FF;
  --text-muted:#9C8FBF;
  --accent-pink:#FF3D81;
  --accent-amber:#FFB347;
  --accent-cyan:#3DDCFF;
  --success:#35D999;
  --error:#FF5C5C;
  --radius:14px;
  --radius-sm:8px;
  --font-display:'Anton', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --gradient-mic: linear-gradient(135deg, var(--accent-pink), var(--accent-amber));
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:radial-gradient(ellipse at top left, #1c1338 0%, var(--bg) 55%);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--font-display); font-weight:400; letter-spacing:.5px;}
p{color:var(--text-muted); line-height:1.6;}
.text-muted{color:var(--text-muted);}

/* ---------- APP SHELL ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:260px;
  flex-shrink:0;
  background:var(--bg-alt);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:24px 18px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{display:flex; align-items:center; gap:12px; padding:0 6px 26px 6px;}
.eq{display:flex; align-items:flex-end; gap:3px; height:22px;}
.eq span{
  width:4px; background:var(--gradient-mic); border-radius:2px;
  animation:eq-bounce 1.1s ease-in-out infinite;
}
.eq span:nth-child(1){height:40%; animation-delay:0s;}
.eq span:nth-child(2){height:100%; animation-delay:.15s;}
.eq span:nth-child(3){height:65%; animation-delay:.3s;}
.eq span:nth-child(4){height:85%; animation-delay:.45s;}
@keyframes eq-bounce{
  0%,100%{transform:scaleY(.4);}
  50%{transform:scaleY(1);}
}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-title{font-family:var(--font-display); font-size:19px; letter-spacing:.5px;}
.brand-title em{font-style:normal; color:var(--accent-pink);}
.brand-sub{font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--text-muted);}

.nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  background:transparent; border:none; color:var(--text-muted);
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:12px 14px; border-radius:var(--radius-sm); cursor:pointer;
  text-align:left; transition:.15s ease;
}
.nav-icon{font-size:16px;}
.nav-item:hover{background:var(--surface-hover); color:var(--text);}
.nav-item.active{
  background:var(--surface);
  color:var(--text);
  box-shadow:inset 3px 0 0 var(--accent-pink);
}

.offline-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px;
}
.offline-toggle-label{display:flex; flex-direction:column; font-size:11px;}
.offline-toggle-label strong{font-size:12px; color:var(--text);}
.offline-toggle-label span{color:var(--text-muted); margin-top:2px;}

.switch{position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:var(--border); border-radius:22px; transition:.2s;
}
.slider::before{
  content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
  background:var(--text); border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{background:var(--gradient-mic);}
.switch input:checked + .slider::before{transform:translateX(16px);}

/* ---------- MAIN CONTENT ---------- */
.content{flex:1; padding:28px 40px 60px; max-width:1080px;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
#topbar-title{font-family:var(--font-display); font-size:22px; letter-spacing:.5px;}
.badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1px;
  padding:6px 12px; border-radius:99px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted);
}
.badge-hidden{display:none;}
.badge-active{display:inline-block; color:var(--bg); background:var(--accent-amber); border-color:var(--accent-amber);}

.view{display:none;}
.view.active{display:block; animation:fade-up .25s ease;}
@keyframes fade-up{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- HERO / DASHBOARD ---------- */
.hero-empty{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%);
  padding:48px 40px; text-align:center;
}
.hero-eq{display:flex; justify-content:center; align-items:flex-end; gap:5px; height:34px; margin-bottom:18px;}
.hero-eq span{width:6px; background:var(--gradient-mic); border-radius:3px; animation:eq-bounce 1.2s ease-in-out infinite;}
.hero-eq span:nth-child(1){height:35%; animation-delay:0s;}
.hero-eq span:nth-child(2){height:70%; animation-delay:.1s;}
.hero-eq span:nth-child(3){height:100%; animation-delay:.2s;}
.hero-eq span:nth-child(4){height:55%; animation-delay:.3s;}
.hero-eq span:nth-child(5){height:85%; animation-delay:.4s;}
.hero-eq span:nth-child(6){height:45%; animation-delay:.5s;}
.hero-empty h1{font-size:28px; max-width:640px; margin:0 auto 12px;}
.hero-empty > p{max-width:520px; margin:0 auto 30px;}

.dropzone{
  max-width:460px; margin:0 auto; border:2px dashed var(--border); border-radius:var(--radius);
  padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:.15s;
}
.dropzone:hover{border-color:var(--accent-pink); background:rgba(255,61,129,.05);}
.dropzone-icon{font-size:26px; margin-bottom:6px;}
.phase-note{margin-top:28px; font-size:13px;}

.placeholder-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:34px; max-width:640px;
}
.placeholder-card p{max-width:480px;}
.chip{
  display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:1px; padding:5px 12px; border-radius:99px;
  background:rgba(255,179,71,.12); color:var(--accent-amber); border:1px solid rgba(255,179,71,.35);
}

/* ---------- SETTINGS / API KEY MANAGER ---------- */
.settings-intro{max-width:640px; margin-bottom:26px;}
.settings-intro p{font-size:13px;}

.provider-category{margin-bottom:34px;}
.provider-category-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.provider-category-head h3{font-family:var(--font-display); font-weight:400; font-size:17px; margin:0;}
.provider-category-head span{font-size:12px; color:var(--text-muted);}

.provider-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:18px 20px; margin-bottom:12px;
}
.provider-card.is-offline{opacity:.4; pointer-events:none;}
.provider-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.provider-head-left{display:flex; align-items:center; gap:10px;}
.provider-name{font-weight:700; font-size:15px;}
.provider-desc{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.provider-status{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.5px; padding:4px 10px;
  border-radius:99px; border:1px solid var(--border); white-space:nowrap;
}
.status-empty{color:var(--text-muted);}
.status-active{color:var(--success); border-color:rgba(53,217,153,.4); background:rgba(53,217,153,.08);}
.status-error{color:var(--error); border-color:rgba(255,92,92,.4); background:rgba(255,92,92,.08);}

.key-list{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.key-row{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 10px;
}
.key-row input[type="text"]{
  flex:1; background:transparent; border:none; color:var(--text);
  font-family:var(--font-mono); font-size:13px; outline:none;
}
.key-row .key-label{font-family:var(--font-mono); font-size:11px; color:var(--text-muted); width:60px;}
.key-row button{
  background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:14px;
  padding:4px 6px; border-radius:6px;
}
.key-row button:hover{color:var(--error); background:rgba(255,92,92,.1);}

.provider-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.btn{
  font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.3px;
  padding:8px 16px; border-radius:99px; border:1px solid var(--border); cursor:pointer;
  background:transparent; color:var(--text); transition:.15s;
}
.btn:hover{border-color:var(--accent-pink); color:var(--accent-pink);}
.btn-primary{background:var(--gradient-mic); color:#170B1E; border:none;}
.btn-primary:hover{filter:brightness(1.08); color:#170B1E;}
.btn-ghost{color:var(--text-muted); border-color:transparent;}
.btn-ghost:hover{color:var(--accent-cyan);}
.provider-link{font-size:11.5px; color:var(--accent-cyan); text-decoration:none;}
.provider-link:hover{text-decoration:underline;}

.no-key-note{font-size:12px; color:var(--text-muted); font-style:italic;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .app-shell{flex-direction:column;}
  .sidebar{
    width:100%; height:auto; position:relative; flex-direction:row; align-items:center;
    padding:14px 16px; gap:16px; overflow-x:auto;
  }
  .brand{padding:0 10px 0 0;}
  .nav{flex-direction:row;}
  .nav-item{white-space:nowrap;}
  .offline-toggle{display:none;}
  .content{padding:20px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .eq span, .hero-eq span{animation:none;}
}