/* ============================================================
   BurnVault.online — component layer
   ------------------------------------------------------------
   Written as plain CSS on purpose: the Tailwind utility classes
   used in the markup are generated at runtime by the Play CDN,
   but the Play CDN does NOT process external stylesheets. Anything
   relying on @apply / @layer in a linked file would silently
   never exist, so these components are hand-rolled instead.
   ============================================================ */

:root {
  --ink-50:#f8fafc;  --ink-100:#f1f5f9; --ink-200:#e2e8f0; --ink-300:#cbd5e1;
  --ink-400:#94a3b8; --ink-500:#64748b; --ink-600:#475569; --ink-700:#334155;
  --ink-800:#1e293b; --ink-900:#0f172a; --ink-950:#020617;
  --ember-50:#fff7ed; --ember-100:#ffedd5; --ember-200:#fed7aa; --ember-300:#fdba74;
  --ember-400:#fb923c; --ember-500:#f97316; --ember-600:#ea580c; --ember-700:#c2410c;
  --ember-800:#9a3412; --ember-900:#7c2d12;

  --surface:        #ffffff;
  --surface-sunken: var(--ink-50);
  --surface-muted:  rgba(255,255,255,.7);
  --border:         rgba(226,232,240,.85);
  --border-strong:  var(--ink-200);
  --field-bg:       #ffffff;
  --field-border:   var(--ink-200);
  --text:           var(--ink-700);
  --text-strong:    var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --control-bg:     var(--ink-300);
  --primary-from:   var(--ink-900);
  --primary-to:     var(--ink-800);
  --primary-text:   #ffffff;

  --shadow-lift: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -12px rgb(15 23 42 / .18);
  --shadow-glow: 0 0 0 1px rgb(249 115 22 / .15), 0 18px 45px -18px rgb(249 115 22 / .45);
  --radius: .75rem;
}

.dark {
  --surface:        #111827;
  --surface-sunken: #020617;
  --surface-muted:  rgba(17,24,39,.5);
  --border:         #1e293b;
  --border-strong:  #1e293b;
  --field-bg:       rgba(2,6,23,.6);
  --field-border:   #334155;
  --text:           var(--ink-300);
  --text-strong:    #ffffff;
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-400);
  --control-bg:     #334155;
  --primary-from:   var(--ember-500);
  --primary-to:     var(--ember-600);
  --primary-text:   #ffffff;

  --shadow-lift: 0 1px 2px rgb(0 0 0 / .2), 0 12px 32px -12px rgb(0 0 0 / .5);
  --shadow-glow: 0 0 0 1px rgb(249 115 22 / .2), 0 18px 45px -18px rgb(249 115 22 / .35);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--surface-sunken);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif; }

::selection { background-color: rgb(249 115 22 / .25); }

:focus-visible { outline: none; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ------------------------------------------------------ ambient grid */
.vault-grid {
  background-image:
    linear-gradient(to right,  rgb(15 23 42 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.dark .vault-grid {
  background-image:
    linear-gradient(to right,  rgb(226 232 240 / .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(226 232 240 / .07) 1px, transparent 1px);
}

/* --------------------------------------------------------- surfaces */
.card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .2s ease, background-color .2s ease;
}
.dark .card { box-shadow: none; }

.feature-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  padding: 1.5rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--ember-300);
  box-shadow: var(--shadow-glow);
}
.dark .feature-card:hover { border-color: var(--ember-800); }

.feature-emoji {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.125rem;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  padding: .375rem .75rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- buttons */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-icon,
.stepper {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary:active,
.btn-secondary:active,
.stepper:active { transform: scale(.98); }
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled { opacity: .5; pointer-events: none; }

.btn-primary {
  padding: .625rem 1rem;
  color: var(--primary-text);
  background-image: linear-gradient(to bottom, var(--primary-from), var(--primary-to));
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
.btn-primary:hover { filter: brightness(1.12); }
.dark .btn-primary:hover { filter: brightness(1.15); }

.btn-secondary {
  padding: .625rem 1rem;
  color: var(--text-strong);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgb(15 23 42 / .05);
}
.dark .btn-secondary { box-shadow: none; }
.btn-secondary:hover { background: var(--surface-sunken); border-color: var(--ink-300); }
.dark .btn-secondary:hover { background: #1e293b; border-color: #475569; }

.btn-ghost {
  padding: .5rem .75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--ink-100); color: var(--text-strong); }
.dark .btn-ghost:hover { background: #1e293b; }

.btn-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--ink-100); color: var(--text-strong); }
.dark .btn-icon:hover { background: #1e293b; }

.stepper {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}
.dark .stepper { background: rgba(30,41,59,.6); color: var(--ink-200); }
.stepper:hover { background: var(--surface-sunken); border-color: var(--ink-300); }
.dark .stepper:hover { background: #1e293b; }

/* -------------------------------------------------------------- tabs */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  border-radius: var(--radius);
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab-btn:hover { color: var(--text-strong); }
.tab-btn-active {
  background: var(--ink-900);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
.tab-btn-active:hover { color: #fff; }
.dark .tab-btn-active { background: var(--ink-100); color: var(--ink-900); }
.dark .tab-btn-active:hover { color: var(--ink-900); }

/* ------------------------------------------------------ form fields */
.label {
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  padding: .625rem .875rem;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--ink-400); }
.field:focus {
  border-color: var(--ember-400);
  box-shadow: 0 0 0 4px rgb(249 115 22 / .12);
  outline: none;
}
.dark .field:focus { border-color: var(--ember-500); box-shadow: 0 0 0 4px rgb(249 115 22 / .15); }
.field:disabled { opacity: .6; }
select.field { background-image: none; }

/* ----------------------------------------------------------- switch */
.switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: var(--control-bg);
  cursor: pointer;
  transition: background-color .2s ease;
}
.switch:focus-visible { box-shadow: 0 0 0 4px rgb(249 115 22 / .25); }
.switch-thumb {
  position: absolute;
  top: .125rem;
  left: .125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
  pointer-events: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.switch[aria-checked="true"] { background: var(--ember-500); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(1.25rem); }

/* ------------------------------------------------------------ modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(2 6 23 / .5);
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .2s ease;
}

.modal-panel {
  position: relative;
  z-index: 10;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1rem 1rem 0 0;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .2s ease, transform .2s ease;
}
.dark .modal-panel { box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 24px 60px -20px rgb(0 0 0 / .8); }

@media (min-width: 640px) {
  .modal { align-items: center; padding: 1.5rem; }
  .modal-panel { max-width: 32rem; border-radius: 1rem; }
}

.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-panel {
  opacity: 1;
  transform: none;
  animation: bv-sheet-in .32s cubic-bezier(.2,.8,.2,1) both;
}
.modal.is-closing .modal-backdrop { opacity: 0; }
.modal.is-closing .modal-panel { opacity: 0; transform: translateY(1rem) scale(.985); }

@keyframes bv-sheet-in {
  from { opacity: 0; transform: translateY(1.5rem) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes bv-pop-in {
  from { opacity: 0; transform: translateY(.5rem) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes bv-fade-up {
  from { opacity: 0; transform: translateY(.625rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes bv-spin { to { transform: rotate(360deg); } }
@keyframes bv-ember-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  30%      { transform: scale(1.08) rotate(-2deg); opacity: 1; }
  60%      { transform: scale(.97) rotate(2deg); opacity: .85; }
}

/* --------------------------------------------------------- dropzone */
.dropzone-dragging {
  transform: scale(1.01);
  border-color: var(--ember-500) !important;
  background: rgb(255 247 237 / .8) !important;
  box-shadow: 0 0 0 4px rgb(249 115 22 / .12);
}
.dark .dropzone-dragging { background: rgb(124 45 18 / .25) !important; }

.file-chip {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .625rem .75rem;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  animation: bv-pop-in .28s cubic-bezier(.2,.8,.2,1) both;
}
.dark .file-chip { background: var(--ink-900); }
.file-chip-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .5rem;
  background: rgb(249 115 22 / .1);
  color: var(--ember-500);
  font-size: 10px;
  font-weight: 700;
}

/* ------------------------------------------------------------ toast */
#toasts { z-index: 70; }
.toast {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
  animation: bv-pop-in .28s cubic-bezier(.2,.8,.2,1) both;
}
.dark .toast { box-shadow: 0 12px 30px -12px rgb(0 0 0 / .7); }
.toast-success { border-color: rgb(16 185 129 / .3); background: #ecfdf5; color: #065f46; }
.toast-error   { border-color: rgb(249 115 22 / .35); background: #fff7ed; color: var(--ember-700); }
.toast-info    { border-color: var(--border); background: var(--surface); color: var(--text); }
.dark .toast-success { border-color: rgb(16 185 129 / .25); background: rgba(6,78,59,.7); color: #a7f3d0; }
.dark .toast-error   { border-color: rgb(249 115 22 / .25); background: rgba(124,45,18,.7); color: #fed7aa; }
.dark .toast-info    { border-color: #334155; background: rgba(30,41,59,.8); color: var(--ink-100); }

/* ------------------------------------------------------ viewer bits */
.qr-box svg,
.qr-image { display: block; width: 132px; height: 132px; }
.qr-box { display: flex; align-items: center; justify-content: center; min-height: 148px; }
.burn-flame { animation: bv-ember-flicker 2.4s ease-in-out infinite; }
.scroll-mt-24 { scroll-margin-top: 6rem; }

/* ------------------------------------------------------ offloaded player */
.player-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #05070d;
  overflow: hidden;
}
.player-frame { position: absolute; inset: 0; }
.player-frame.is-hidden { display: none; }
.player-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05070d;
}
.player-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.player-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  border-top: 1px solid var(--border);
  background: var(--ink-50);
}
.dark .player-bar { background: rgba(255, 255, 255, .03); }
.player-bar.is-pending { opacity: .35; pointer-events: none; }
.player-bar[hidden] { display: none; }

.player-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .5rem;
  color: var(--ink-600);
  transition: background .15s ease, color .15s ease;
}
.player-btn:hover { background: rgb(15 23 42 / .07); color: var(--text); }
.dark .player-btn { color: var(--ink-300); }
.dark .player-btn:hover { background: rgb(255 255 255 / .08); color: #fff; }

.player-track-wrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 3rem; }
.player-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: .25rem;
  border-radius: 999px;
  background: rgb(100 116 139 / .35);
  cursor: pointer;
}
.player-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--ember-600);
  box-shadow: 0 1px 4px rgb(0 0 0 / .4);
}
.player-track::-moz-range-thumb {
  width: .75rem;
  height: .75rem;
  border: 0;
  border-radius: 999px;
  background: var(--ember-600);
}
.player-time {
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--ink-500);
  min-width: 2.75rem;
  text-align: right;
}
.dark .player-time { color: var(--ink-400); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}