/* Винил: a 1970s hi-fi receiver. Walnut veneer down the side, brushed aluminium faceplates, amber display glow,
   teal knobs; Jura for the faceplate lettering over Commissioner for reading. The boldness goes to the hero: the
   cover becomes the label of a record that turns while the air plays, next to a glass display glowing amber.
   Light: daylight aluminium. Dark: late-night listening, walnut and amber. */
[data-design="vinyl"] {
  --bg: #d9dad6;
  --side: #5a3b24;
  --card: #eeeeea;
  --card-2: #e2e2dd;
  --line: #b9bab4;
  --text: #1c1b19;
  --muted: #5d5a52;
  --accent: #127475;
  --accent-ink: #fff;
  --accent-soft: rgb(18 116 117 / 0.12);
  --amber: #f5a300;
  --glass: #17110c;
  --danger: #b4361f;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 10px 24px rgb(40 30 20 / 0.18);
  --lv1: #b07400; --lv2: #1f6f8b; --lv3: #6c4fb3; --lv4: #66625a; --lv5: #b4361f;
  --wood: repeating-linear-gradient(97deg, rgb(0 0 0 / 0.13) 0 2px, transparent 2px 7px, rgb(255 255 255 / 0.04) 7px 8px, transparent 8px 13px),
    linear-gradient(180deg, #6e4729, #4c301d);
  --brushed: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 3px);
  color-scheme: light;
}
[data-design="vinyl"][data-theme="dark"] {
  --bg: #1a120c;
  --side: #2c1c11;
  --card: #2a1d14;
  --card-2: #34251a;
  --line: #4a3626;
  --text: #eadcc8;
  --muted: #b49e83;
  --accent: #3fb3ae;
  --accent-ink: #0d1716;
  --accent-soft: rgb(63 179 174 / 0.14);
  --amber: #ffb547;
  --glass: #0e0a07;
  --danger: #ff7a5c;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 12px 28px rgb(0 0 0 / 0.5);
  --lv1: #ffb547; --lv2: #6cc3e0; --lv3: #b9a0f2; --lv4: #b49e83; --lv5: #ff7a5c;
  --wood: repeating-linear-gradient(97deg, rgb(0 0 0 / 0.25) 0 2px, transparent 2px 7px, rgb(255 255 255 / 0.03) 7px 8px, transparent 8px 13px),
    linear-gradient(180deg, #3a2516, #22150c);
  --brushed: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px);
  color-scheme: dark;
}

[data-design="vinyl"] body { font-family: Commissioner, system-ui, sans-serif; background: var(--brushed), var(--bg); }
[data-design="vinyl"] h1, [data-design="vinyl"] h2, [data-design="vinyl"] h3, [data-design="vinyl"] .tile-value,
[data-design="vinyl"] .btn, [data-design="vinyl"] .nav a, [data-design="vinyl"] .seg button, [data-design="vinyl"] .time {
  font-family: Jura, Commissioner, sans-serif;
}
[data-design="vinyl"] h1, [data-design="vinyl"] h2, [data-design="vinyl"] h3 { font-weight: 700; letter-spacing: 0.01em; }

/* the walnut side panel */
[data-design="vinyl"] .side { background: var(--wood); border-right: 1px solid rgb(0 0 0 / 0.35); box-shadow: inset -6px 0 12px rgb(0 0 0 / 0.25); }
[data-design="vinyl"] .logo.only-light { display: none; } /* the walnut is dark in both themes: the white logo always */
[data-design="vinyl"] .logo.only-dark { display: inline; }
[data-design="vinyl"] .nav a { color: #e9d7bb; font-weight: 600; font-size: 16px; border-radius: 6px; }
[data-design="vinyl"] .nav a:hover { background: rgb(0 0 0 / 0.22); color: #fff3df; }
[data-design="vinyl"] .nav a.on { background: rgb(0 0 0 / 0.38); color: var(--amber); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.5); text-shadow: 0 0 10px rgb(255 181 71 / 0.55); }
[data-design="vinyl"] .side-foot, [data-design="vinyl"] .side-foot .ext-link { color: #cdb699; }

/* faceplates: aluminium cards with a crisp top edge */
[data-design="vinyl"] .card, [data-design="vinyl"] .tile, [data-design="vinyl"] .faq-item, [data-design="vinyl"] .pl,
[data-design="vinyl"] .hint, [data-design="vinyl"] .quick-row, [data-design="vinyl"] .me, [data-design="vinyl"] .seg, [data-design="vinyl"] .design-card {
  background: var(--brushed), var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
[data-design="vinyl"] .hint .ic, [data-design="vinyl"] .tile > .ic, [data-design="vinyl"] .quick-row > .ic { color: var(--accent); }
[data-design="vinyl"] .tile-value { color: var(--text); }
[data-design="vinyl"] .faq-item[open] { border-color: var(--accent); }
[data-design="vinyl"] .faq-item p { color: var(--text); opacity: 0.85; line-height: 1.7; }

/* keys: the receiver's push buttons */
[data-design="vinyl"] .btn {
  border-radius: 5px; border: 1px solid color-mix(in srgb, var(--line) 80%, #000);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 70%, #fff), var(--card-2));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 2px 0 rgb(0 0 0 / 0.18); font-weight: 600; letter-spacing: 0.02em;
}
[data-design="vinyl"][data-theme="dark"] .btn { background: linear-gradient(180deg, #3d2c1f, #2a1d14); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 2px 0 rgb(0 0 0 / 0.45); }
[data-design="vinyl"] .btn:hover { border-color: var(--accent); }
[data-design="vinyl"] .btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3) inset; }
[data-design="vinyl"] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 70%, #000); }
[data-design="vinyl"] .input { border-radius: 5px; background: color-mix(in srgb, var(--card) 60%, #fff); border-color: var(--line); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12); }
[data-design="vinyl"][data-theme="dark"] .input { background: #1f160f; }
[data-design="vinyl"] .seg { border-radius: 6px; }
[data-design="vinyl"] .seg button { border-radius: 4px; }
[data-design="vinyl"] .seg button.on { background: var(--glass); color: var(--amber); text-shadow: 0 0 8px rgb(255 181 71 / 0.6); }

/* the hero: a record turning on the left, the receiver's glass display on the right */
[data-design="vinyl"] .hero {
  background: var(--brushed), linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, #fff), var(--card-2));
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); grid-template-columns: minmax(170px, 260px) 1fr;
}
[data-design="vinyl"][data-theme="dark"] .hero { background: var(--brushed), linear-gradient(180deg, #33251a, #24180f); }
[data-design="vinyl"] .hero-bg { display: none; }
[data-design="vinyl"] .cover-wrap {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #151515 0 1.4px, #222 1.4px 2.8px);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.35), 0 0 0 4px #0b0b0b;
}
[data-design="vinyl"] .cover-wrap::before { /* the sheen: it stays put while the record turns */
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2;
  background: conic-gradient(from 30deg, transparent 0 12%, rgb(255 255 255 / 0.12) 16%, transparent 22% 58%, rgb(255 255 255 / 0.09) 63%, transparent 70%);
}
[data-design="vinyl"] .cover-wrap::after { /* the spindle */
  content: ''; position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #f2f2ee, #8d8d88 60%, #4b4b47);
}
[data-design="vinyl"] .hero .cover {
  width: 40%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px #0b0b0b; animation: vinyl-turn 3.6s linear infinite;
}
[data-design="vinyl"] .hero .cover.placeholder { padding: 8%; background: #e9dcc4; }
[data-design="vinyl"] .hero.paused .cover { animation-play-state: paused; }
@keyframes vinyl-turn { to { transform: rotate(360deg); } }
[data-design="vinyl"] .hero-info {
  padding: 18px 22px; border-radius: 8px; background: var(--glass); color: #e9dcc8;
  box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.5);
}
[data-design="vinyl"] .hero h2 { color: var(--amber); font-family: Jura, sans-serif; font-weight: 700; text-shadow: 0 0 14px rgb(255 181 71 / 0.45); }
[data-design="vinyl"] .hero .sub { color: #cdb99c; }
[data-design="vinyl"] .eyebrow { color: #7fe0d9; letter-spacing: 0.12em; }
[data-design="vinyl"] .hero .time { color: var(--amber); text-shadow: 0 0 8px rgb(255 181 71 / 0.5); }
[data-design="vinyl"] .hero .ext-link { color: #cdb99c; }
[data-design="vinyl"] .hero .actions .btn:not(.primary):not(.danger) { background: linear-gradient(180deg, #3b2e24, #241a12); color: #ead9bf; border-color: #4e3b2b; }
[data-design="vinyl"] .radio-down { color: #ff9b7a; }

/* lists and the rest */
[data-design="vinyl"] .row:hover { background: rgb(0 0 0 / 0.04); }
[data-design="vinyl"][data-theme="dark"] .row:hover { background: rgb(255 255 255 / 0.04); }
[data-design="vinyl"] .row.mine { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--amber); }
[data-design="vinyl"] .thumb { border-radius: 4px; }
[data-design="vinyl"] .ch.has-bot { background: var(--accent-soft); border-color: var(--accent); }
[data-design="vinyl"] .menu { border-radius: 8px; background: var(--card); }
[data-design="vinyl"] .badge { border-radius: 4px; }
[data-design="vinyl"] .pl-art { border-radius: 50%; background: repeating-radial-gradient(circle, #151515 0 1.4px, #222 1.4px 2.8px); color: var(--amber); }
[data-design="vinyl"] .pl-art img { border-radius: 50%; width: 46%; height: 46%; }
[data-design="vinyl"] .pl-art.collage { display: grid; border-radius: 8px; }
[data-design="vinyl"] .pl-art.collage img { border-radius: 0; width: 100%; height: 100%; }
[data-design="vinyl"] .design-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
[data-design="vinyl"] .thank > .ic { color: var(--danger); }
[data-design="vinyl"] .thank a { color: var(--accent); }

/* the bar: the receiver's black front, amber digits, one big teal knob */
[data-design="vinyl"] .bar { background: linear-gradient(180deg, #1d1712, #120e0a); border-top: 1px solid #000; color: #e9dcc8; }
[data-design="vinyl"] .bar .t-sub { color: #b49e83; }
[data-design="vinyl"] .center .time { color: var(--amber); text-shadow: 0 0 8px rgb(255 181 71 / 0.55); font-size: 14px; }
[data-design="vinyl"] .listen {
  width: 54px; height: 54px; background: radial-gradient(circle at 40% 35%, #5fd3cd, var(--accent) 55%, #0b4a4b);
  color: #fff; box-shadow: 0 0 0 4px #2a241e, 0 0 0 6px #4a4038, 0 6px 14px rgb(0 0 0 / 0.6);
}
[data-design="vinyl"] .right { color: #b49e83; }
[data-design="vinyl"] .right input { accent-color: var(--amber); }
[data-design="vinyl"] .toast { border-radius: 8px; background: var(--glass); color: var(--amber); border-color: #3a2c1f; }

@media (max-width: 860px) {
  [data-design="vinyl"] .hero { grid-template-columns: 100%; justify-items: center; }
  [data-design="vinyl"] .hero-info { width: 100%; }
  [data-design="vinyl"] .tabs { background: var(--wood); border-top: 1px solid #000; }
  [data-design="vinyl"] .tabs a { color: #e9d7bb; }
  [data-design="vinyl"] .tabs a.on { color: var(--amber); }
}
[data-design="vinyl"] .quick-row .input, [data-design="vinyl"] .quick-row .input:focus { border: 0; outline: none; background: none; box-shadow: none; }