/* ===== TIRAVOZ STUDIO — Ultra Elite Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #06060c;
  --bg2: #0a0a14;
  --bg3: #10101c;
  --card: rgba(18,18,28,0.85);
  --card-hover: rgba(25,25,40,0.9);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(6,182,212,0.4);
  --a1: #7c3aed;
  --a2: #9333ea;
  --a3: #06b6d4;
  --cyan: #06b6d4;
  --cyan2: #22d3ee;
  --gold: #f59e0b;
  --ok: #10b981;
  --err: #ef4444;
  --text: #ffffff;
  --muted: #94a3b8;
  --dim: #475569;
  --grad: linear-gradient(135deg, var(--a1), var(--a3));
  --font: 'Outfit', sans-serif;
  --font-h: 'Space Grotesk', sans-serif;
  --r: 16px;
  --t: all 0.4s cubic-bezier(0.16,1,0.3,1);
  --sidebar-w: 240px;
  --topbar-h: 64px;
}

html { font-size:16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124,58,237,0.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(6,182,212,0.08), transparent);
  background-attachment: fixed;
}

::selection { background: var(--a2); color:#fff; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--a1); border-radius:8px; }

/* ===== LAYOUT ===== */
.studio-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}

/* ===== TOPBAR ===== */
.topbar {
  grid-column: 1 / -1;
  background: rgba(8,8,15,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
  position: sticky; top:0;
}
.topbar-logo {
  display: flex; align-items: center; gap:10px;
  font-family: var(--font-h); font-weight:800; font-size:1.2rem;
  color:#fff; text-decoration:none;
  background: linear-gradient(to right, #fff, var(--a3));
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.topbar-logo svg { flex-shrink:0; }
.topbar-right {
  display: flex; align-items:center; gap:16px;
}
.topbar-credits {
  display: flex; align-items:center; gap:8px;
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.2);
  padding: 6px 16px; border-radius:100px;
  font-size:0.85rem; font-weight:700; color:var(--cyan2);
  cursor:pointer; transition: var(--t);
}
.topbar-credits:hover { background: rgba(124,58,237,0.2); }
.topbar-credits svg { color:var(--gold); }
.topbar-avatar {
  width:36px; height:36px; border-radius:50%;
  background: var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:800; cursor:pointer;
  transition: var(--t); border: 2px solid transparent;
}
.topbar-avatar:hover { border-color: var(--cyan); transform:scale(1.1); }

/* ===== SIDEBAR ===== */
.sidebar {
  background: rgba(10,10,18,0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex; flex-direction:column; gap:4px;
  overflow-y: auto;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.sidebar-section {
  margin-top:16px; padding-top:16px;
  border-top: 1px solid var(--border);
}
.sidebar-section:first-child { margin-top:0; padding-top:0; border-top:none; }
.sidebar-label {
  font-size:0.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--dim); padding:4px 12px; margin-bottom:4px;
}
.sidebar-item {
  display: flex; align-items:center; gap:12px;
  padding: 10px 14px; border-radius:12px;
  font-size:0.9rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition: var(--t);
  border:none; background:none; width:100%; text-align:left;
  font-family: var(--font); position:relative;
}
.sidebar-item:hover { background: rgba(255,255,255,0.04); color:#fff; }
.sidebar-item.active {
  background: rgba(124,58,237,0.12); color:#fff;
  box-shadow: inset 3px 0 0 var(--a1);
}
.sidebar-item.active::before {
  content:''; position:absolute; left:0; top:20%; height:60%;
  width:3px; background:var(--grad); border-radius:0 4px 4px 0;
}
.sidebar-item svg { width:20px; height:20px; flex-shrink:0; opacity:0.7; }
.sidebar-item.active svg { opacity:1; color:var(--cyan2); }
.sidebar-tag {
  font-size:0.6rem; padding:2px 6px; border-radius:4px;
  font-weight:800; margin-left:auto;
}
.sidebar-tag.new { background:rgba(16,185,129,0.15); color:var(--ok); }
.sidebar-tag.pro { background:rgba(245,158,11,0.15); color:var(--gold); }

/* ===== WORKSPACE ===== */
.workspace {
  padding: 28px;
  overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
}
.workspace-section { display:none; }
.workspace-section.active { display:block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.ws-title {
  font-family: var(--font-h); font-size:1.8rem; font-weight:900;
  margin-bottom:8px; letter-spacing:-0.03em;
}
.ws-subtitle { color:var(--muted); font-size:0.95rem; margin-bottom:28px; }

/* ===== CARDS ===== */
.s-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  backdrop-filter: blur(10px);
  transition: var(--t);
}
.s-card:hover { border-color: var(--border-hover); }

/* ===== UPLOAD ZONE ===== */
.studio-upload {
  background: var(--card);
  border: 2px dashed rgba(124,58,237,0.2);
  border-radius: 20px;
  padding: 60px 24px;
  text-align:center;
  cursor:pointer;
  transition: var(--t);
  position:relative; overflow:hidden;
}
.studio-upload:hover { border-color: var(--cyan); transform:translateY(-2px); }
.studio-upload-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.15));
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,0.05);
}
.studio-upload h3 { font-size:1.2rem; margin-bottom:6px; }
.studio-upload p { color:var(--muted); font-size:0.9rem; }

/* ===== PROJECTS GRID ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; margin-top:20px;
}
.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  cursor:pointer;
  transition: var(--t);
  position:relative; overflow:hidden;
}
.project-card:hover { border-color:var(--a1); transform:translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.project-wave {
  width:100%; height:48px; border-radius:8px;
  background: rgba(0,0,0,0.3); margin-bottom:12px;
  overflow:hidden;
}
.project-wave canvas { width:100%; height:100%; display:block; }
.project-name { font-weight:700; font-size:0.95rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-meta { font-size:0.78rem; color:var(--dim); display:flex; gap:12px; }
.project-type {
  position:absolute; top:12px; right:12px;
  font-size:0.6rem; padding:3px 8px; border-radius:6px;
  font-weight:800; text-transform:uppercase;
}
.project-type.vocal { background:rgba(124,58,237,0.15); color:var(--a2); }
.project-type.stem { background:rgba(6,182,212,0.15); color:var(--cyan2); }

/* ===== PROCESSING ===== */
.proc-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.proc-file-row {
  display:flex; align-items:center; gap:14px;
  padding-bottom:20px; margin-bottom:20px;
  border-bottom: 1px solid var(--border);
}
.proc-file-icon {
  width:48px; height:48px; border-radius:12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(168,85,247,0.2));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.proc-file-name { font-weight:700; font-size:1rem; }
.proc-file-meta { font-size:0.82rem; color:var(--dim); }
.proc-remove {
  margin-left:auto; background:rgba(239,68,68,0.1);
  border:1px solid rgba(239,68,68,0.2); color:var(--err);
  padding:6px 14px; border-radius:100px; cursor:pointer;
  font-size:0.8rem; font-weight:600; transition:var(--t);
  font-family:var(--font);
}
.proc-remove:hover { background:rgba(239,68,68,0.2); }

/* ===== MIXER ===== */
.mixer-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  overflow-x:auto;
}
.mixer-timeline {
  width:100%; height:40px; background:rgba(0,0,0,0.3);
  border-radius:10px; margin-bottom:20px; position:relative;
  border: 1px solid var(--border);
}
.mixer-timeline canvas { width:100%; height:100%; display:block; border-radius:10px; }
.mixer-playhead {
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--err); z-index:2;
  box-shadow: 0 0 8px var(--err);
}
.mixer-channels {
  display: flex; gap:8px; justify-content:center;
  min-width:min-content;
}
.mixer-channel {
  width:80px; display:flex; flex-direction:column;
  align-items:center; gap:8px;
  padding:16px 8px; border-radius:14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  transition: var(--t);
}
.mixer-channel:hover { border-color: rgba(255,255,255,0.1); }
.mixer-ch-label {
  font-size:0.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; text-align:center;
}
.mixer-fader-wrap {
  width:8px; height:140px; background:rgba(255,255,255,0.05);
  border-radius:10px; position:relative; cursor:pointer;
}
.mixer-fader-fill {
  position:absolute; bottom:0; width:100%; border-radius:10px;
  transition: height 0.15s;
}
.mixer-fader-thumb {
  position:absolute; width:24px; height:10px;
  left:50%; transform:translateX(-50%);
  background:#fff; border-radius:3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor:grab;
}
.mixer-fader-thumb:active { cursor:grabbing; }
.mixer-vu {
  width:6px; height:80px; background:rgba(255,255,255,0.05);
  border-radius:6px; position:relative; overflow:hidden;
}
.mixer-vu-fill {
  position:absolute; bottom:0; width:100%;
  background: linear-gradient(to top, var(--ok), var(--gold), var(--err));
  border-radius:6px; transition: height 0.05s;
}
.mixer-btn-row { display:flex; gap:4px; }
.mixer-btn {
  width:28px; height:22px; border-radius:4px; border:none;
  font-size:0.6rem; font-weight:900; cursor:pointer;
  transition: var(--t); font-family:var(--font);
}
.mixer-btn.solo { background:rgba(245,158,11,0.15); color:var(--gold); }
.mixer-btn.solo.on { background:var(--gold); color:#000; }
.mixer-btn.mute { background:rgba(239,68,68,0.15); color:var(--err); }
.mixer-btn.mute.on { background:var(--err); color:#fff; }
.mixer-pan {
  width:40px; height:4px; background:rgba(255,255,255,0.1);
  border-radius:4px; position:relative; cursor:pointer;
}
.mixer-pan-dot {
  width:10px; height:10px; border-radius:50%;
  background:#fff; position:absolute; top:50%;
  transform:translate(-50%,-50%); left:50%;
  box-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* ===== MIXER TRANSPORT ===== */
.mixer-transport {
  display:flex; align-items:center; gap:16px;
  padding:16px 0; margin-top:16px;
  border-top: 1px solid var(--border);
  justify-content:center;
}
.mixer-play-btn {
  width:48px; height:48px; border-radius:50%;
  background:#fff; color:#000; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--t);
  box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.mixer-play-btn:hover { transform:scale(1.1); }
.mixer-time {
  font-size:0.9rem; font-weight:600;
  font-variant-numeric: tabular-nums; color:var(--muted);
}
.mixer-seek {
  flex:1; max-width:300px; height:4px;
  -webkit-appearance:none; background:rgba(255,255,255,0.1);
  border-radius:4px; outline:none; cursor:pointer;
}
.mixer-seek::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:#fff; cursor:pointer;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--grad); color:#fff; border:none;
  padding:12px 24px; border-radius:12px;
  font-size:0.95rem; font-weight:700; cursor:pointer;
  transition: var(--t); font-family:var(--font);
  box-shadow: 0 4px 15px rgba(124,58,237,0.3);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(124,58,237,0.5); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

.btn-secondary {
  background: rgba(255,255,255,0.05); color:var(--text);
  border: 1px solid var(--border); padding:10px 20px;
  border-radius:12px; font-size:0.9rem; font-weight:600;
  cursor:pointer; transition:var(--t); font-family:var(--font);
}
.btn-secondary:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); }

/* ===== STATS ===== */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:14px; margin-bottom:28px;
}
.stat-card {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--r); padding:20px;
}
.stat-card-label { font-size:0.75rem; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.stat-card-value { font-size:1.8rem; font-weight:900; margin-top:4px; font-family:var(--font-h); }
.stat-card-value.cyan { color:var(--cyan2); }
.stat-card-value.gold { color:var(--gold); }
.stat-card-value.green { color:var(--ok); }

/* ===== CREDITS PAGE ===== */
.credits-plans {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px; margin-top:20px;
}
.credit-plan {
  background: var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:24px;
  transition:var(--t); cursor:pointer; position:relative;
}
.credit-plan:hover { border-color:var(--a1); transform:translateY(-3px); }
.credit-plan.popular { border-color:var(--cyan); }
.credit-plan.popular::after {
  content:'POPULAR'; position:absolute; top:-10px; right:16px;
  background:var(--grad); color:#fff; padding:3px 10px;
  border-radius:6px; font-size:0.6rem; font-weight:900;
}
.credit-plan-name { font-weight:800; font-size:1rem; margin-bottom:4px; }
.credit-plan-price { font-size:2rem; font-weight:900; font-family:var(--font-h); }
.credit-plan-price sup { font-size:0.9rem; color:var(--muted); }
.credit-plan-desc { font-size:0.82rem; color:var(--dim); margin-top:8px; }

/* ===== TOAST ===== */
.s-toast {
  position:fixed; bottom:24px; right:24px;
  background:rgba(18,18,28,0.95); border:1px solid var(--border);
  border-radius:14px; padding:14px 20px; font-size:0.9rem; font-weight:600;
  display:flex; align-items:center; gap:10px; z-index:999;
  transform:translateY(100px); opacity:0; transition:var(--t);
  max-width:360px; backdrop-filter:blur(20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.s-toast.show { transform:translateY(0); opacity:1; }
.s-toast.ok { border-left:3px solid var(--ok); }
.s-toast.er { border-left:3px solid var(--err); }

/* ===== MOBILE MENU ===== */
.mobile-toggle { display:none; background:none; border:none; color:#fff; cursor:pointer; padding:8px; }

/* ===== MODAL ===== */
.s-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px); z-index:500;
  align-items:center; justify-content:center; padding:20px;
}
.s-overlay.show { display:flex; }
.s-modal {
  background: var(--card); border:1px solid var(--border);
  border-radius:20px; padding:32px; max-width:440px; width:100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.s-modal h3 { font-size:1.3rem; font-weight:800; margin-bottom:8px; }
.s-modal p { color:var(--muted); font-size:0.9rem; margin-bottom:20px; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  .studio-layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr 60px;
  }
  .sidebar {
    position:fixed; bottom:0; left:0; right:0;
    height:60px; flex-direction:row;
    justify-content:space-around;
    padding:4px 8px; gap:0;
    border-right:none; border-top:1px solid var(--border);
    z-index:100;
    overflow-x:auto; overflow-y:hidden;
  }
  .sidebar-label, .sidebar-section { display:none; }
  .sidebar-item {
    flex-direction:column; gap:2px;
    padding:6px 10px; font-size:0.6rem;
    min-width:56px; justify-content:center;
    text-align:center;
  }
  .sidebar-item svg { width:18px; height:18px; }
  .sidebar-item.active::before { display:none; }
  .sidebar-item.active { box-shadow:none; border-radius:10px; }
  .sidebar-tag { display:none; }
  .workspace { padding:16px; height:calc(100vh - var(--topbar-h) - 60px); }
  .ws-title { font-size:1.4rem; }
  .mixer-channels { gap:4px; }
  .mixer-channel { width:60px; padding:10px 4px; }
  .mixer-fader-wrap { height:100px; }
  .mixer-vu { height:50px; }
  .topbar-logo span { display:none; }
  .projects-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .credits-plans { grid-template-columns:1fr; }
}

@media(max-width:375px) {
  .workspace { padding:12px; }
  .mixer-channel { width:50px; }
  .stat-card-value { font-size:1.4rem; }
}

/* ===== PREMIUM EFFECTS ===== */
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 15px rgba(124,58,237,0.2)} 50%{box-shadow:0 0 30px rgba(124,58,237,0.4)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.glow-pulse { animation: pulseGlow 3s ease-in-out infinite; }
.spin { animation: spin 1s linear infinite; }

.stat-card {
  position:relative; overflow:hidden;
  transition: var(--t);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: shimmer 4s ease-in-out infinite;
}
.stat-card:hover { transform:translateY(-2px); border-color:rgba(124,58,237,0.3); }

.studio-upload::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(124,58,237,0.05), transparent 70%);
  pointer-events:none;
}
.studio-upload.drag-over {
  border-color:var(--cyan2); background:rgba(6,182,212,0.05);
  transform:scale(1.01);
}

.sidebar-item { transition: all 0.2s ease; }
.sidebar-item:hover svg { transform:scale(1.15); transition:transform 0.2s; }

.topbar { box-shadow: 0 1px 20px rgba(0,0,0,0.3); }
.sidebar { box-shadow: 1px 0 20px rgba(0,0,0,0.2); }

.btn-primary { position:relative; overflow:hidden; }
.btn-primary::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,0.15);
  transform:translate(-50%,-50%);
  transition: width 0.4s, height 0.4s;
}
.btn-primary:active::after { width:300px; height:300px; }

.mixer-channel { transition: all 0.3s ease; }
.mixer-channel:hover {
  background:rgba(255,255,255,0.04);
  box-shadow: 0 0 20px rgba(124,58,237,0.1);
}

.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:0; transition:opacity 0.3s;
}
.project-card:hover::before { opacity:1; }

/* Scrollbar sidebar */
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:4px; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius:8px;
}

/* Credit plan hover glow */
.credit-plan:hover {
  box-shadow: 0 10px 40px rgba(124,58,237,0.15);
}
.credit-plan.popular:hover {
  box-shadow: 0 10px 40px rgba(6,182,212,0.2);
}

/* Smooth section transitions */
.workspace-section.active {
  animation: slideUp 0.35s cubic-bezier(0.16,1,0.3,1);
}

/* ===== FX RACK & NEON SCANNER ===== */
.mixer-fx-rack {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%;
  border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px;
}
.fx-k {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.fx-lbl {
  font-size: 0.55rem; font-weight: 800; color: var(--dim); width: 22px; text-align: left;
}
.fx-rng {
  flex: 1; -webkit-appearance: none; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; outline: none; cursor: pointer;
}
.fx-rng::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; background: var(--cyan2); border-radius: 50%; cursor: pointer; transition: 0.2s;
}
.fx-rng::-webkit-slider-thumb:hover {
  transform: scale(1.3); box-shadow: 0 0 10px var(--cyan2);
}
.mixer-timeline { overflow: hidden; }
.mixer-playhead {
  width: 2px; background: #fff; box-shadow: 0 0 15px var(--cyan2), 0 0 30px #fff;
}