:root {
  --bg: #0b0e13;
  --fg: #ebf0f6;
  --muted: #a6b3c5;
  --accent: #6fb1ff;
  --card: #121721;
  --outline: #223046;
  --ghost: #101622;
}

html[data-theme="light"] {
  --bg: #ffffff;
  --fg: #0c1020;
  --muted: #4b5a72;
  --accent: #1e6bff;
  --card: #f3f6fa;
  --outline: #d9e2ef;
  --ghost: #eef3fb;
}

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding: 8px; /* slight margin around the page */
}

/* Utilities */
.spacer { flex: 1; }
.hide-sm { display: none; }
@media (min-width: 720px) {
  .hide-sm { display: inline-flex; }
}

/* Top bar */
.topbar {
  position: sticky; top: 8px; z-index: 12; /* respect body padding */
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 85%, transparent));
  border: 1px solid var(--outline);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  margin-bottom: 8px;
}
.brand { font-weight: 800; letter-spacing: 0.6px; color: var(--accent); }
.menu { display: flex; align-items: center; gap: 8px; width: 100%; }

/* Buttons */
.btn {
  appearance: none; border: 1px solid var(--outline);
  background: var(--accent); color: white; padding: 10px 12px;
  border-radius: 12px; font-weight: 700; cursor: pointer; line-height: 1;
}
.btn.ghost {
  background: var(--ghost); color: var(--fg);
  border: 1px solid var(--outline);
}
.btn.primary { background: var(--accent); color: #fff; border: 0; }
.btn.icon { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
.btn.small { padding: 8px 10px; font-weight: 600; }
.btn.wide { min-width: 280px; justify-content: space-between; display: inline-flex; gap: 8px; }
.btn:hover { filter: brightness(1.04); }

/* Dropdown (desktop) */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 110%; left: 0; min-width: 360px; /* wider menu */
  background: var(--card); border: 1px solid var(--outline);
  border-radius: 12px; padding: 6px; display: none; max-height: 60vh; overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--fg);
  border: 0; padding: 12px 12px; border-radius: 10px; cursor: pointer; font-size: 15px;
}
.dropdown-item:hover { background: color-mix(in oklab, var(--accent) 15%, var(--card)); }

/* Mobile dropdown => bottom sheet */
@media (max-width: 719px) {
  .dropdown[data-behavior="sheet"] .dropdown-menu {
    position: fixed; left: 0; right: 0; bottom: -60vh; top: auto;
    display: block; border-radius: 16px 16px 0 0; padding: 8px 10px 14px;
    max-height: 60vh; background: var(--card); border: 1px solid var(--outline);
    transform: translateY(0); transition: bottom .22s ease-out;
    margin: 0 auto;
  }
  .dropdown[data-behavior="sheet"] .dropdown-menu.open { bottom: 0; }
  .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); display: none; z-index: 11; }
  .sheet-backdrop.open { display: block; }
}

/* Stage */
.stage {
  display: grid; grid-template-rows: 1fr auto;
  height: calc(100dvh - 58px - 8px); /* account for topbar and body padding */
  border: 1px solid var(--outline); border-radius: 14px; overflow: hidden;
  background: color-mix(in oklab, var(--bg) 90%, var(--card));
}
.image-wrap { position: relative; display: grid; place-items: center; padding: 8px; }
#hero {
  max-width: 100vw;
  max-height: calc(100% - 12px);
  width: auto; height: auto; object-fit: contain; border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--outline);
  box-shadow: 0 8px 26px rgba(0,0,0,.15);
}
.loading {
  position: absolute; inset: auto auto 16px 16px;
  background: rgba(0,0,0,.35); color: #fff; padding: 6px 10px;
  border-radius: 8px; font-size: 12px; display: none;
}
html[data-theme="light"] .loading { background: rgba(0,0,0,.15); color: #111; }

/* Mobile FAB play button */
.fab-play {
  position: absolute; inset: auto 16px 18px auto;
  width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--accent); color: white; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.35);
  cursor: pointer; opacity: .95;
}
@media (min-width: 720px) { .fab-play { display: none; } }

/* Slider */
.scrubber { padding: 8px 12px 16px; display: grid; place-items: center; border-top: 1px solid var(--outline); }
#slider { width: min(1000px, 92vw); -webkit-appearance: none; appearance: none; background: transparent; }
#slider::-webkit-slider-runnable-track { height: 10px; background: var(--outline); border-radius: 999px; }
#slider::-moz-range-track { height: 10px; background: var(--outline); border-radius: 999px; }
#slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -7px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--accent); border: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
#slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}