:root{
  --bg:#0A0F25;
  --panel:#0F1533;
  --ink:#E8ECF4;
  --muted:#9AA3B2;
  --accent:#00C8FF;
  --accent2:#9D7CFF;
  --card:#101936;
  --glow:0 10px 35px rgba(0,200,255,.18);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,"Poppins","Segoe UI",Roboto,Arial,sans-serif;
}

/* Header */
.header{
  width:100%;
  background:linear-gradient(90deg,#0A0F25 0%,#0E1330 60%,#0A0F25 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-left{
  display:flex;
  gap:16px;
  align-items:center;
}
.brand-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.4px;
}
.brand-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.brand-foot{
  font-size:11px;
  color:var(--muted);
}
.header-right{
  font-size:16px;
  color:#DDE6FF;
  opacity:.95;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Layout */
.wrap{
  max-width:1200px;
  margin:24px auto;
  padding:0 24px 64px;
}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr;}
}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--glow);
}
.card h3{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.3px;
}
.small{
  color:var(--muted);
  font-size:12px;
  margin:6px 0 12px;
}

/* Controls */
.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
input[type="file"],
select,
input[type="range"],
input[type="number"],
input[type="text"]{
  background:#0C1430;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
input[type="range"]{width:220px;}

.button{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#081021;
  border:none;
  padding:12px 16px;
  font-weight:800;
  border-radius:14px;
  cursor:pointer;
  box-shadow:var(--glow);
}
.button.secondary{
  background:#131B3B;
  color:#EAF2FF;
  border:1px solid rgba(255,255,255,.1);
}
.mt{margin-top:10px;}

.kpi{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.kpi .pill{
  background:#0E1636;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

pre.log{
  background:#091026;
  color:#B9D4FF;
  border-radius:12px;
  padding:12px;
  font-size:12px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  max-height:240px;
}

audio,video{
  max-width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}

.footer{
  max-width:1200px;
  margin:24px auto 80px;
  padding:0 24px;
  color:var(--muted);
  font-size:12px;
  opacity:.8;
}

header .logo {
    height: 135px;   /* originally ~45px → now 3× bigger */
    width: auto;
}

/* ==========================================
   MOBILE – STACKED CARDS + FULL WIDTH
   ========================================== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }

  .wrap {
    max-width: 100%;
    margin: 16px auto 48px;
    padding: 0 12px 48px;   /* less side padding on mobile */
  }

  .grid {
    grid-template-columns: 1fr;  /* single column */
    gap: 20px;
  }

  .card {
    width: 100%;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .kpi {
    flex-direction: column;
    gap: 8px;
  }

  .row {
    flex-wrap: wrap;
  }

  audio,
  video {
    width: 100%;
    max-width: 100%;
  }
}


/* --- DreamTube Phoenix UI – button feedback --- */
.button {
  position: relative;
  transition:
    transform 0.08s ease-out,
    box-shadow 0.08s ease-out,
    opacity 0.08s ease-out;
}

/* physical press on mouse/touch */
.button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}

/* async “working” state controlled from JS */
.button.is-busy {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
  opacity: 0.7;
  cursor: progress;
}

.button.is-busy::after {
  content: "…";
  margin-left: 0.35rem;
  font-weight: 600;
}