/* GoJump look & feel — tokens lifted from gojump-oceanside.com bundle.css */
@font-face { font-family:"Gilroy"; font-weight:400; font-display:swap; src:url("/fonts/GcFamily-Regular_e2yejt.woff2") format("woff2"); }
@font-face { font-family:"Gilroy"; font-weight:500; font-display:swap; src:url("/fonts/GcFamily-Medium_qmvmue.woff2") format("woff2"); }
@font-face { font-family:"Gilroy"; font-weight:600; font-display:swap; src:url("/fonts/GcFamily-Semibold_bkdiho.woff2") format("woff2"); }
@font-face { font-family:"Gilroy"; font-weight:700; font-display:swap; src:url("/fonts/GcFamily-Bold_sr9vnr.woff2") format("woff2"); }
@font-face { font-family:"Gilroy"; font-weight:900; font-display:swap; src:url("/fonts/GcFamily-Black_mflcgm.woff2") format("woff2"); }

:root {
  --brand:#ff6100; --brand-dark:#d95200;
  --panel:#101012; --surface-card:#161616; --surface-input:#333131;
  --edge:#2b2b2b; --edge-hair:#1f1f22;
  --text-bright:#f9f9f9; --text-soft:#ececec; --text-muted:#979797;
  --ok:#398f14; --err:#dc3232;
  --radius:10px; --radius-panel:18px; --radius-pill:50px;
  --lift:0 18px 44px rgba(0,0,0,.45);
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--panel); color:var(--text-soft); font:16px/1.5 "Gilroy",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-text-size-adjust:100%; }
.wrap { max-width:560px; margin:0 auto; padding:0 18px 40px; position:relative; z-index:1; }

/* hero: full-bleed sky photo behind everything, fading into the panel colour (as on gojump-oceanside.com) */
.hero { position:relative; min-height:100svh; overflow:hidden; }
.hero-bg, .hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-shade { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(16,16,18,.5) 0%, rgba(16,16,18,.08) 18%, rgba(16,16,18,.2) 40%, rgba(16,16,18,.7) 60%, var(--panel) 80%); }

.brand { display:flex; justify-content:center; padding:calc(26px + env(safe-area-inset-top)) 0 0; }
.brand img { display:block; width:180px; height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }

.intro { text-align:center; padding:min(34vh, 300px) 0 24px; }
.intro h1 { font-size:clamp(28px, 7.5vw, 44px); line-height:1.12; letter-spacing:-.5px; margin:0 0 12px; font-weight:500; color:var(--text-bright); text-shadow:0 2px 18px rgba(0,0,0,.55); }
.intro h1 em { font-style:normal; font-weight:700; color:var(--brand); }
.sub { color:var(--text-soft); margin:0; font-size:17px; text-shadow:0 1px 12px rgba(0,0,0,.6); }

.card { background:rgba(16,16,18,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--edge); border-radius:var(--radius-panel); padding:22px 20px; box-shadow:var(--lift); }
label { display:block; font-weight:600; margin-bottom:8px; color:var(--text-bright); font-size:15px; }
input[type=text] { width:100%; font:inherit; font-size:18px; padding:15px 16px; border-radius:var(--radius); border:1px solid var(--edge); background:var(--surface-input); color:var(--text-bright); }
input[type=text]::placeholder { color:var(--text-muted); }
input[type=text]:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:transparent; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700; font-size:16px; padding:17px 22px; border-radius:var(--radius); border:1px solid #fff; background:transparent; color:#fff; cursor:pointer; text-decoration:none; transition:.3s ease all; }
.btn:hover { background:#fff; color:#000; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; width:100%; margin-top:16px; }
.btn.primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn.big { padding:20px; font-size:18px; margin-top:0; }
.btn:disabled { opacity:.6; cursor:default; }
.btn:focus-visible, input:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.error { color:#ff6b6b; margin:8px 0 0; font-size:15px; }
.greeting { margin:0 0 16px; font-size:17px; }
.greeting strong { color:var(--text-bright); }
.hint { color:var(--text-muted); font-size:14px; margin:12px 0 0; text-align:center; }

.queue { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.item { background:rgba(255,255,255,.04); border:1px solid var(--edge); border-radius:var(--radius); padding:12px 14px; }
.item-top { display:flex; justify-content:space-between; gap:12px; font-size:15px; font-weight:600; }
.item-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-bright); }
.item-status { flex:none; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.item[data-state=uploading] .item-status { color:var(--brand); }
.item[data-state=done] .item-status { color:#6cc94a; }
.item[data-state=error] .item-status { color:#ff6b6b; }
.bar { height:6px; background:var(--edge); border-radius:var(--radius-pill); overflow:hidden; margin:9px 0 6px; }
.fill { height:100%; width:0; background:var(--brand); border-radius:var(--radius-pill); transition:width .2s linear; }
.item[data-state=done] .fill { background:var(--ok); }
.item[data-state=error] .fill { background:var(--err); }
.item-meta { color:var(--text-muted); font-size:13px; display:flex; gap:10px; }
.link { font:inherit; font-size:13px; font-weight:700; background:none; border:0; color:var(--brand); padding:0; cursor:pointer; text-decoration:underline; }
.summary { margin-top:20px; text-align:center; }
.done { font-size:18px; margin:0 0 12px; color:var(--text-bright); }
.done span { color:var(--brand); font-weight:700; }
.foot { text-align:center; color:var(--text-muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:34px 0 0; }

/* out-of-space warning */
.notice { background:rgba(220,50,50,.16); border:1px solid rgba(220,50,50,.55); color:#ffd9d9; border-radius:var(--radius); padding:14px 16px; margin:0 0 14px; font-weight:600; text-align:center; backdrop-filter:blur(10px); }

/* entrance: logo, headline, card rise in sequence */
@media (prefers-reduced-motion: no-preference) {
  .brand, .intro, .card, .foot { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .intro { animation-delay:.12s; } .card { animation-delay:.24s; } .foot { animation-delay:.36s; }
  @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
}

/* admin */
.topbar { padding:calc(14px + env(safe-area-inset-top)) 16px 14px; border-bottom:1px solid var(--edge-hair); background:#0b0b0d; }
.topbar .inner { max-width:1100px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar img { display:block; height:24px; width:auto; }
.topbar .tag { color:var(--text-muted); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
body.admin .wrap { max-width:1100px; }
header.head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:22px 0 18px; }
header.head h1 { margin:4px 0; font-size:1.6rem; font-weight:900; color:var(--text-bright); }
.muted { color:var(--text-muted); font-size:14px; }
.back { color:var(--brand); text-decoration:none; font-size:14px; font-weight:700; }
.list { display:grid; gap:8px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface-card); border:1px solid var(--edge); border-radius:var(--radius); padding:14px 16px; color:inherit; text-decoration:none; transition:.2s ease border-color; }
.row strong { color:var(--text-bright); font-size:17px; }
.row:active, .row:hover { border-color:var(--brand); }
.row-main, .row-side { display:flex; flex-direction:column; }
.row-side { text-align:right; flex:none; font-weight:600; }
.empty { color:var(--text-muted); text-align:center; padding:40px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.tile { margin:0; background:var(--surface-card); border:1px solid var(--edge); border-radius:var(--radius); overflow:hidden; }
.tile > a { display:block; aspect-ratio:1; background:#000; position:relative; overflow:hidden; }
.tile img, .tile video { width:100%; height:100%; object-fit:cover; display:block; }
.placeholder { display:grid; place-items:center; height:100%; color:var(--text-muted); font-weight:900; }
.tile figcaption { padding:8px 10px; font-size:13px; display:grid; gap:2px; }
.tile .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-bright); }
.tile .dl { color:var(--brand); text-decoration:none; font-weight:700; }

/* admin lightbox */
.tile .play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:34px; text-shadow:0 2px 12px rgba(0,0,0,.7); pointer-events:none; }
body.lb-open { overflow:hidden; }
.lightbox[hidden] { display:none; }
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.94); display:grid; grid-template-rows:1fr auto; }
.lb-stage { display:grid; place-items:center; min-height:0; padding:calc(56px + env(safe-area-inset-top)) 12px 12px; }
.lb-stage img, .lb-stage video { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:var(--lift); }
.lb-stage video { width:100%; }
.lb-close, .lb-nav { position:absolute; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-pill); cursor:pointer; font:inherit; display:grid; place-items:center; transition:.2s ease background; }
.lb-close:hover, .lb-nav:hover { background:var(--brand); border-color:var(--brand); }
.lb-close { top:calc(12px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; font-size:18px; z-index:2; }
.lb-nav { top:50%; transform:translateY(-50%); width:48px; height:64px; font-size:40px; line-height:1; padding-bottom:6px; }
.lb-prev { left:10px; } .lb-next { right:10px; }
.lb-bar { display:flex; align-items:center; gap:14px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:#0b0b0d; border-top:1px solid var(--edge-hair); }
.lb-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-bright); font-weight:600; }
.lb-dl.btn { padding:10px 16px; font-size:14px; }
@media (max-width:600px) { .lb-nav { display:none; } .lb-stage { padding-top:calc(64px + env(safe-area-inset-top)); } }