/* ==== Brand theme (Stroka) ==== */
:root{
  --bg1:#050607; --bg2:#0a0e10;        /* near-black */
  --card:#0e1517; --line:#1b2b2f;
  --text:#ffffff; --muted:#98a7ac;
  --brand:#50afb0;                      /* Stroka teal */
  --brand-dark:#2a7f80;                 /* deeper teal for contrast */
  --ok:#50afb0; --warn:#ffb547; --err:#ff6b6b;
  --r:16px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  /* subtle brandish background, not blue */
  background:
    radial-gradient(1000px 420px at -10% -10%, rgba(80,175,176,.10), transparent 55%),
    radial-gradient(900px 420px at 120% 120%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* only the kiosk page (body.shell) is scroll-locked */
body.shell{ overflow:hidden }

/* Layout */
.shell{ display:grid; grid-template-rows:auto 1fr; height:100svh; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(16px, 4vw, 32px);
}
.brand{ display:flex; align-items:center; gap:12px }
.badge{
  font: 700 12px/1.2 system-ui; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--brand);
}
.h1{ margin:0; font-weight:800; font-size:clamp(22px, 2.6vw, 34px) }
.actions{ display:flex; gap:8px }

.main{
  max-width: min(1400px, 96vw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 24px;
  display:flex; flex-direction:column; gap:12px;
}
.lead{ color:var(--muted); margin:0 0 6px }

/* Stage card */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(12px, 2vw, 18px);
}
.stage{
  display:grid; gap:12px;
  grid-template-rows:auto 1fr auto;
  height: 90svh;               /* occupy ~90% of the viewport height */
}

/* Controls row */
.controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.status{ color:var(--muted) }

/* Buttons */
.btn{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  background:#0f181a;
  color:#fff;
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease, background .15s;
}
.btn:hover{ filter:brightness(1.06) }
.btn:active{ transform: translateY(1px) scale(.99) }

.btn-primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border:none;
  box-shadow: 0 10px 24px rgba(80,175,176,.28);
}
.btn-outline{
  background: transparent;
  border: 2px solid var(--brand);
  color: #ffffff;
}
.btn-outline:hover{ background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* CTA (unique definition – removed duplicates) */
.btn-cta{
  position: relative; isolation: isolate;
  box-shadow: 0 10px 30px rgba(80,175,176,.35);
  animation: pulseCta 2.2s ease-in-out infinite;
}
.btn-cta::after{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:12px;
  background:
    radial-gradient(60% 140% at 20% 0%, rgba(80,175,176,.45), transparent 60%),
    radial-gradient(60% 140% at 80% 100%, rgba(255,255,255,.18), transparent 60%);
  filter: blur(12px); opacity:.7;
}
@keyframes pulseCta{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.02); } }

/* ===== Mobile form page ===== */
.form-wrap{ max-width: 720px; margin: 18px auto; padding: 0 16px; }
.form-head{ display:flex; align-items:center; gap:12px; margin: 8px 0 6px; }
.form-title{ margin:0; font-weight:900; font-size: clamp(22px,4.8vw,36px); letter-spacing:.2px; }
.form-lead{ color:var(--muted); margin: 2px 0 16px; }

.form-card{
  background:
    radial-gradient(1000px 420px at -10% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 50%),
    radial-gradient(900px 420px at 120% 120%, rgba(255,255,255,.08), transparent 50%),
    var(--card);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.label{ display:block; font-weight:700; margin: 14px 0 8px; }
.input{
  width:100%; font-size:18px; padding:14px 14px;
  border-radius:14px; border:1px solid var(--line);
  background:#0b1214; color:#e9eef3;
  outline: none;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.input::placeholder{ color:#7f9398; }
.input:focus{
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
  background:#0f181a;
}
.checkbox{ width:22px; height:22px; accent-color: var(--brand); }

.form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.form-status{ color:var(--muted); min-height:1.3em; }

/* Success panel after submit */
.success-card{
  margin-top: 14px;
  background: #0b1214;
  border: 1px dashed color-mix(in srgb, var(--brand) 50%, transparent);
  border-radius: 14px;
  padding: 14px;
}

/* Share row (single source of truth) */
.share-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.share-link{
  padding:10px 12px; border-radius:10px;
  border:2px solid var(--brand);
  background:transparent; color:#e9eef3; text-decoration:none; font-weight:700;
}
.share-link:hover{ background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* Video area (16:9, fills width) */
.video-wrap{
  position: relative;
  width: min(100%, calc(90svh * 16 / 9));  /* limit by height so it gets tall */
  aspect-ratio: 16 / 9;
  height: auto;
  margin-inline: auto;          /* center the box */
  border-radius: 12px;
  overflow: hidden;
  background: #0008;
}
video, canvas.overlay{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}
.overlay{ pointer-events:none }

/* QR panel & modal */
.qr{ margin-top:8px; display:none }
.tip{ color:var(--muted); margin:4px 2px 0 }

/* Modal */
.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(3,7,18,.55); backdrop-filter:saturate(160%) blur(6px);
}
.modal-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:20px; width:min(92vw, 520px); text-align:center;
}
.modal-title{ margin:0 0 10px; font-size:clamp(18px,2.2vw,24px) }
.note{ color:var(--muted) }
.modal[hidden]{ display:none !important; }

.card{ width: 100%; }

.privacy-box{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b1214;
}
.privacy-box a{ color:var(--brand); text-decoration:underline; }
/* in public/styles.css */
.req{ color: var(--brand); font-weight: 900; margin-left: 4px; }


.result-card { 
  margin-top: 12px; 
  background: var(--card); 
  border: 1px solid var(--line); 
  border-radius: 14px; 
  padding: 14px; 
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.result-title { 
  margin: 0 0 10px; 
  font-weight: 800; 
  font-size: clamp(18px, 4.5vw, 22px); 
}
.photo-preview { 
  width: 100%; 
  max-width: 560px; 
  display: block; 
  border-radius: 12px; 
  border: 1px solid var(--line); 
  margin: 6px 0 10px; 
}


.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3,7,18,.55);
  backdrop-filter: saturate(160%) blur(6px);
}

.modal-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  width: min(92vw, 480px);   /* was 1200px */
  max-height: 92vh;
  overflow: auto;
}

/* Let preview fill the modal width nicely */
#previewImg{
  width: 100%;
  max-width: 100%;           /* was none */
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto 12px;
}

/* Give QR row some breathing room on wide popups */
.qr-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin: 14px 0 8px;
}

.qr-col .modal-title{
  margin: 0;
}

/* Optional: enlarge QR on large screens */
@media (min-width: 900px){
  #qrImg{ width: 260px; height: 260px; }
}