:root {
  --bg: #1b1813;
  --bg-accent: radial-gradient(circle at 15% 25%, rgba(255, 185, 120, 0.12) 0, transparent 32%),
                 radial-gradient(circle at 78% 18%, rgba(122, 197, 173, 0.16) 0, transparent 34%),
                 radial-gradient(circle at 35% 82%, rgba(180, 122, 82, 0.12) 0, transparent 36%),
                 #1b1813;
  --panel: rgba(255, 240, 214, 0.08);
  --panel-border: rgba(255, 240, 214, 0.12);
  --text: #f6efe3;
  --muted: #c9b8a5;
  --accent: #f0a202;
  --accent-2: #8fd0b4;
  --error: #ff7b7b;
  --shadow: 0 15px 40px rgba(0, 0, 0, 0.38);
  --cassette-cream: #f4e9d2;
  --cassette-dark: #1d262c;
  --cassette-sticker: #e7d8bd;
  --control-bg: #1f1a16;
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg-accent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-accent);
  color: var(--text);
  line-height: 1.6;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.brand { display: flex; gap: 12px; align-items: center; }
.brand h1 { margin: 0; letter-spacing: 0.5px; }
.brand .eyebrow { margin: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.brand .logo { width: 100px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)); border-radius: 8px;}

.layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}

.cassette-panel {
  background: linear-gradient(145deg, rgba(46, 39, 30, 0.9), rgba(32, 28, 23, 0.92));
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.panel-title { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.status { color: var(--accent); font-weight: 600; }

.cassette-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.cassette {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--cassette-cream);
  color: #0f1628;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cassette:hover { transform: translateY(-2px); box-shadow: 0 18px 35px rgba(0,0,0,0.28); }
.cassette:active { transform: translateY(0); }

.cassette .screws::before,
.cassette .screws::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #c8bda7;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}
.cassette .screws::before { top: 8px; left: 8px; }
.cassette .screws::after { top: 8px; right: 8px; }

.cassette .label {
  background: var(--cassette-sticker);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cassette .title { font-weight: 700; font-size: 16px; }
.cassette .meta { color: #4d4a3f; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.cassette .window {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9e3d4;
  border-radius: 10px;
  padding: 10px 12px;
}

.cassette .reel { width: 34px; height: 34px; border-radius: 50%; border: 6px solid #d5c7ae; position: relative; }
.cassette .reel::after { content: ''; position: absolute; inset: 7px; background: #0f1628; border-radius: 50%; }
.cassette .tape { height: 8px; flex: 1; background: repeating-linear-gradient(90deg, #0f1628 0 16px, #c6b89e 16px 24px); border-radius: 4px; margin: 0 10px; }

.cassette.theme-sea { background: linear-gradient(145deg, #d7f0e2, #a9d7c0); }
.cassette.theme-sunset { background: linear-gradient(145deg, #ffe3c4, #f3b57c); }
.cassette.theme-ink { background: linear-gradient(145deg, #e6dfd5, #c7b8a4); }

.deck {
  position: relative;
  background: linear-gradient(145deg, #2e251d, #1f1a16);
  border-radius: 24px;
  padding: 18px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  display: grid;
  gap: 14px;
}

.deck-face {
  background: radial-gradient(circle at 20% 20%, rgba(240,162,2,0.08), transparent 42%), #221b16;
  border-radius: 18px;
  border: 1px solid rgba(255,240,214,0.08);
  padding: 16px;
}

.deck-window {
  background: #1a1410;
  border-radius: 14px;
  border: 1px solid rgba(255,240,214,0.07);
  padding: 12px;
  position: relative;
  overflow: hidden;
  min-height: 160px;
}

.cassette-shell {
  background: var(--cassette-cream);
  color: #0f1628;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  transform-origin: center;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.deck.inserting .cassette-shell { animation: insertTape 0.7s ease forwards; }
.deck.playing .cassette-shell { filter: drop-shadow(0 0 10px rgba(91,227,192,0.25)); }

.cassette-shell .label { background: var(--cassette-sticker); border-radius: 10px; padding: 10px; }
.cassette-shell .title { font-weight: 700; font-size: 17px; display: block; }
.cassette-shell .subtitle { font-size: 12px; color: #4d4a3f; text-transform: uppercase; letter-spacing: 0.8px; }

.cassette-shell .reels { display: flex; align-items: center; gap: 16px; margin-top: 12px; justify-content: center; }
.cassette-shell .reel { width: 46px; height: 46px; border-radius: 50%; border: 7px solid #d5c7ae; position: relative; }
.cassette-shell .reel::after { content: ''; position: absolute; inset: 10px; background: #0f1628; border-radius: 50%; }
.cassette-shell .spool { position: absolute; inset: 4px; border-radius: 50%; border: 3px dashed rgba(15,22,40,0.5); animation: spin 1.2s linear infinite; }
.deck.paused .spool, .deck.idle .spool { animation-play-state: paused; }

.meters { margin-top: 14px; }
.meter { height: 8px; width: 100%; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.15s ease; }
.timecodes { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-family: 'Space Mono', monospace; font-size: 13px; }

.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.control {
  background: var(--control-bg);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.control:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }
.control:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes insertTape {
  0% { transform: translateY(-60%) rotateX(35deg); opacity: 0; }
  60% { transform: translateY(4%) rotateX(-6deg); opacity: 1; }
  100% { transform: translateY(0) rotateX(0); }
}

@media (max-width: 960px) {
  body { padding: 18px; }
  .layout { grid-template-columns: 1fr; }
  .cassette-panel { order: 2; }
  .deck { order: 1; }
}

@media (max-width: 620px) {
  body { padding: 16px; }
  .cassette-shell { max-width: 100%; }
  .deck { padding: 16px; }
  .deck-window { min-height: 200px; }
  .cassette-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}