:root { color-scheme: light; --ink:#18202b; --muted:#657084; --line:#dfe4eb; --surface:#fff; --wash:#f3f5f9; --brand:#6257ff; --danger:#c73a4a; font-family:Inter,Segoe UI,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--wash); }
button,input,a { font:inherit; }
button { cursor:pointer; }
.button { border:0; border-radius:14px; padding:13px 18px; background:#e9ecf2; color:var(--ink); text-decoration:none; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
.button.primary { background:var(--brand); color:#fff; }
.button.danger { color:var(--danger); }
.button:disabled { opacity:.55; cursor:not-allowed; }
.admin { max-width:1080px; margin:auto; padding:32px 20px 60px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; }
.topbar h1,.album-header h1 { margin:4px 0; }
.eyebrow { color:var(--muted); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; margin-bottom:18px; }
.active-panel { border-left:5px solid var(--brand); display:flex; justify-content:space-between; gap:20px; align-items:center; }
.active-panel h2 { margin:3px 0; }
.muted { color:var(--muted); }
.event-row { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
.event-row:last-child { border:0; }
.event-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:10px; }
.section-heading h2,.section-heading p { margin-top:0; }
.totem-row { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }
.totem-row:last-child { border:0; }
.totem-info { display:flex; align-items:center; gap:11px; }
.status-dot { flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:#a4a9b3; }
.status-dot.online { background:#24b47e; box-shadow:0 0 0 5px #24b47e20; }
.totem-controls { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; }
.totem-select { min-width:220px; padding:12px 38px 12px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.pairing-code { margin:16px 0; font-size:3rem; letter-spacing:.18em; text-align:center; color:var(--brand); }
.pairing-dialog p { color:var(--muted); line-height:1.55; }
.dialog-backdrop { position:fixed; inset:0; background:#1118; display:grid; place-items:center; padding:20px; }
.dialog-backdrop[hidden] { display:none; }
.dialog { width:min(100%,440px); background:#fff; border-radius:22px; padding:24px; }
.dialog input { width:100%; padding:15px; border:1px solid var(--line); border-radius:12px; margin:12px 0 18px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.qr-box { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.qr-box img { width:180px; background:#fff; }
.kiosk-body { min-height:100vh; background:radial-gradient(circle at 15% 8%,#9124b855 0,transparent 28%),radial-gradient(circle at 90% 22%,#235ed955 0,transparent 30%),linear-gradient(145deg,#100b20,#151528 55%,#090d18); color:#fff; overflow:hidden; position:relative; }
.kiosk-body:before,.kiosk-body:after { content:""; position:fixed; border-radius:50%; filter:blur(2px); opacity:.8; pointer-events:none; }
.kiosk-body:before { width:12px; height:12px; background:#ff55cf; top:12%; left:9%; box-shadow:72vw 9vh 0 #8f7cff,84vw 68vh 0 #ffca5c,7vw 72vh 0 #5ce1e6; }
.kiosk-body:after { width:6px; height:6px; background:#fff; top:27%; left:4%; box-shadow:88vw -14vh 0 #fff,92vw 42vh 0 #fff,12vw 52vh 0 #fff; }
.kiosk { height:100vh; height:100dvh; min-height:0; display:flex; flex-direction:column; max-width:700px; margin:auto; padding:20px 24px 24px; position:relative; z-index:1; font-family:"Trebuchet MS","Segoe UI",sans-serif; }
.kiosk-head { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:4px 4px 18px; }
.camera-frame { flex:0 0 auto; height:min(calc(100vh - 245px),calc((100vw - 48px) * 16 / 9)); height:min(calc(100dvh - 245px),calc((100vw - 48px) * 16 / 9)); max-width:100%; aspect-ratio:9/16; align-self:center; position:relative; border-radius:30px; overflow:hidden; background:#252b36; border:1px solid #ffffff24; box-shadow:0 24px 70px #0007,0 0 45px #694cff22; }
.camera-frame video,.camera-frame img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transform:scaleX(-1); }
.camera-frame img { transform:none; }
.countdown { position:absolute; inset:0; display:grid; place-items:center; font-size:8rem; font-weight:800; color:#fff; background:radial-gradient(circle,#8b5cf655 0,transparent 42%),#0007; text-shadow:0 0 18px #fff8,0 0 55px #d946c7; }
.countdown[hidden] { display:none; }
.countdown.tick { animation:countdown-flash .95s ease-out both; }
@keyframes countdown-flash {
  0% { opacity:0; font-size:4rem; filter:blur(8px); background-color:#d946c755; }
  24% { opacity:1; font-size:10rem; filter:blur(0); }
  48% { font-size:8rem; }
  82% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(.72); }
}
.kiosk-message { text-align:center; padding:18px 10px 14px; }
.kiosk-message h1 { margin:0 0 5px; font-weight:800; letter-spacing:-.025em; }
.kiosk-message p { margin:0; color:#b8c0ce; }
.kiosk-actions { display:flex; gap:10px; justify-content:center; width:100%; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.kiosk-actions .button { flex:0 1 250px; min-width:0; min-height:54px; padding:12px 20px; font-size:.95rem; font-weight:700; letter-spacing:.045em; border-radius:16px; }
.kiosk-actions .button.primary { background:linear-gradient(135deg,#7c4dff,#d946c7); box-shadow:0 10px 28px #a63bcd55; }
#reviewActions .button { flex-basis:190px; }
#reviewActions .button:not(.primary) { background:#ffffff18; color:#fff; border:1px solid #ffffff28; }
.status { position:fixed; left:16px; bottom:12px; font-size:.78rem; color:#aeb7c7; }
.success-overlay { position:fixed; z-index:20; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:28px; text-align:center; color:#fff; background:radial-gradient(circle at center,#8b3fdacc 0,#25123eef 42%,#090d18f7 78%); backdrop-filter:blur(12px); }
.success-overlay[hidden] { display:none !important; }
.success-overlay.show { animation:success-screen 3.2s ease both; }
.success-overlay strong { font-size:clamp(2rem,7vw,4.4rem); line-height:1; text-shadow:0 0 28px #ff62d8aa; animation:success-title .8s cubic-bezier(.2,.9,.25,1.25) both; }
.success-overlay span { font-size:clamp(1.05rem,3vw,1.55rem); color:#eee9fa; animation:success-copy .7s .28s ease both; }
.success-burst { width:96px; height:96px; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; font-size:3.4rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#7c4dff,#d946c7); box-shadow:0 0 0 12px #ffffff12,0 0 70px #d946c799; animation:success-check .8s cubic-bezier(.2,.9,.25,1.3) both; }
@keyframes success-screen { 0% { opacity:0; } 12%,84% { opacity:1; } 100% { opacity:0; } }
@keyframes success-check { 0% { opacity:0; transform:scale(.2) rotate(-25deg); } 70% { transform:scale(1.12) rotate(4deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes success-title { 0% { opacity:0; transform:translateY(24px) scale(.75); } 100% { opacity:1; transform:none; } }
@keyframes success-copy { 0% { opacity:0; transform:translateY(14px); } 100% { opacity:1; transform:none; } }
.album-body { min-height:100vh; color:#f8f7ff; background:radial-gradient(circle at 10% 2%,#9a2eb544,transparent 24rem),radial-gradient(circle at 92% 12%,#315ed84d,transparent 22rem),linear-gradient(160deg,#100a1e,#111728 58%,#090c15); }
.album-body.viewer-open { overflow:hidden; }
.album { max-width:1040px; margin:auto; padding:0 16px calc(70px + env(safe-area-inset-bottom)); }
.album-header { text-align:center; padding:38px 12px 30px; }
.album-brand { font-weight:700; letter-spacing:.14em; margin-bottom:28px; }
.album-label { color:#c8bee8; font-size:.74rem; letter-spacing:.18em; }
.album-header h1 { margin:9px 0 14px; font-size:clamp(2rem,8vw,3.5rem); line-height:1.05; }
.album-header p { color:#b5b8c7; margin:16px 0 0; }
.album-meta { display:flex; justify-content:center; align-items:center; gap:8px; }
.album-meta span { padding:7px 11px; border-radius:999px; background:#ffffff12; border:1px solid #ffffff18; font-size:.82rem; }
.album-meta .live-dot:before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#5ee5a7; box-shadow:0 0 10px #5ee5a7; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.photo-card { appearance:none; border:0; padding:0; position:relative; display:block; width:100%; aspect-ratio:9/16; overflow:hidden; border-radius:16px; background:#232738; box-shadow:0 8px 24px #0003; cursor:pointer; }
.photo-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .25s ease; }
.photo-card:active img { transform:scale(.98); }
.empty { grid-column:1/-1; min-height:320px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:60px 20px; color:#b9bbca; border:1px dashed #ffffff22; border-radius:22px; }
.empty span { font-size:2rem; color:#d95ad4; }
.empty strong { color:#fff; font-size:1.15rem; margin-top:10px; }
.empty p { margin:7px 0 0; }
.photo-viewer { position:fixed; z-index:100; inset:0; padding:max(60px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom)); background:#080a11ee; backdrop-filter:blur(14px); display:flex; flex-direction:column; justify-content:center; align-items:center; }
.photo-viewer[hidden] { display:none !important; }
.photo-viewer img { max-width:min(100%,900px); max-height:calc(100vh - 180px); object-fit:contain; border-radius:16px; box-shadow:0 22px 80px #000a; }
.viewer-close { position:absolute; top:max(14px,env(safe-area-inset-top)); right:16px; width:44px; height:44px; border:1px solid #ffffff22; border-radius:50%; color:#fff; background:#ffffff13; font-size:1.8rem; line-height:1; }
.viewer-actions { display:flex; gap:9px; width:min(100%,500px); padding-top:14px; }
.viewer-button { flex:1; min-height:48px; border:1px solid #ffffff24; border-radius:14px; background:#ffffff13; color:#fff; text-decoration:none; display:flex; align-items:center; justify-content:center; font:inherit; }
.viewer-button.primary { border:0; background:linear-gradient(135deg,#7c4dff,#d946c7); }
.viewer-hint { max-width:500px; margin:10px 0 0; color:#afb2c1; font-size:.78rem; text-align:center; }
.login-body { min-height:100vh; margin:0; padding:24px; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 15% 10%,#9124b855,transparent 30%),radial-gradient(circle at 90% 25%,#235ed955,transparent 32%),linear-gradient(145deg,#100b20,#111827); }
.login-box { width:min(100%,430px); padding:36px; border:1px solid #ffffff20; border-radius:26px; background:#151625e8; box-shadow:0 24px 80px #0007; }
.login-brand { font-weight:700; letter-spacing:.14em; margin-bottom:28px; }
.login-box h1 { margin:8px 0; }
.login-box p { color:#b9bdcb; margin:0 0 24px; }
.login-box label { display:block; margin-bottom:8px; }
.login-box input { width:100%; padding:15px; border:1px solid #ffffff24; border-radius:13px; background:#ffffff0d; color:#fff; margin-bottom:12px; }
.login-box .button { width:100%; min-height:50px; }
.login-error { min-height:22px; color:#ff9eaa; margin-top:12px; text-align:center; }
.setup-code { text-align:center; font-size:2rem; font-weight:700; letter-spacing:.22em; }
.projection-body { margin:0; overflow:hidden; background:#080610; color:#fff; }
.projection-screen { position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; isolation:isolate; background:#080610; font-family:"Trebuchet MS","Segoe UI",sans-serif; }
.projection-backdrop { position:absolute; z-index:-3; inset:-7%; background-position:center; background-size:cover; filter:blur(34px) saturate(1.35) brightness(.58); transform:scale(1.12); transition:background-image .7s ease; }
.projection-shade { position:absolute; z-index:-2; inset:0; background:radial-gradient(circle at center,transparent 0 24%,#08061080 68%,#080610e8 100%),linear-gradient(135deg,#43105a55,#09234a44); }
.projection-brand { position:absolute; z-index:5; top:4vh; left:4vw; font-weight:700; letter-spacing:.16em; text-shadow:0 3px 24px #000; }
.projection-new-photo { position:absolute; z-index:9; top:5vh; left:50%; padding:9px 16px; border-radius:999px; background:linear-gradient(135deg,#7c4dff,#d946c7); box-shadow:0 10px 35px #d946c766; opacity:0; transform:translate(-50%,-24px); transition:.4s ease; }
.projection-new-photo.visible { opacity:1; transform:translate(-50%,0); }
.projection-photos { position:absolute; z-index:2; top:4vh; right:29vw; bottom:19vh; left:29vw; display:flex; justify-content:center; align-items:center; gap:3vw; }
.projection-photo { display:block; height:100%; max-width:100%; object-fit:contain; border:1px solid #ffffff45; border-radius:2.2vh; box-shadow:0 3vh 9vh #000c,0 0 5vh #b146cd44; }
.projection-photo.secondary { display:none; }
.projection-screen.mosaic .projection-photos { right:18vw; left:18vw; }
.projection-screen.mosaic .projection-photo { display:block; width:42%; height:78%; object-fit:cover; }
.projection-screen.mosaic .projection-photo.primary { transform:rotate(-4deg); }
.projection-screen.mosaic .projection-photo.secondary { transform:rotate(4deg); }
.projection-empty { display:flex; flex-direction:column; align-items:center; gap:12px; color:#d7cfe0; text-align:center; }
.projection-empty span { font-size:3rem; color:#d946c7; }
.projection-footer { position:absolute; z-index:5; left:0; right:0; bottom:0; min-height:15vh; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:2vh 4vw; border-top:1px solid #ffffff28; background:linear-gradient(90deg,#120b25f7,#25113bee 58%,#101327ed); backdrop-filter:blur(14px); }
.projection-event h1 { margin:.5vh 0 0; font-size:clamp(1.7rem,3vw,3.7rem); line-height:1; }
.projection-live { display:inline-flex; align-items:center; gap:10px; color:#f1eaf8; font-size:clamp(1rem,1.35vw,1.5rem); font-weight:700; letter-spacing:.15em; }
.projection-live:before { content:""; width:13px; height:13px; border-radius:50%; background:#42e38f; box-shadow:0 0 0 6px #42e38f22,0 0 22px #42e38f; }
.projection-album-qr { display:flex; align-items:center; gap:12px; color:#ded5e8; }
.projection-album-qr img { width:min(10vh,92px); height:min(10vh,92px); padding:5px; border-radius:10px; background:#fff; }
.projection-album-qr span { line-height:1.3; }
.projection-screen.photo-enter .projection-photo.primary { animation:projection-slide .9s cubic-bezier(.2,.8,.2,1); }
.projection-screen.new-arrival .projection-photo.primary { animation:projection-new 1s cubic-bezier(.2,.8,.2,1); }
@keyframes projection-slide { 0% { opacity:0; transform:translateX(4vw) scale(.94); } 100% { opacity:1; transform:none; } }
@keyframes projection-new { 0% { opacity:0; transform:translateY(5vh) scale(.82) rotate(-2deg); } 65% { opacity:1; transform:translateY(-1vh) scale(1.025) rotate(.4deg); } 100% { transform:none; } }
@media (max-aspect-ratio:4/3) { .projection-photos { right:22vw; left:22vw; bottom:20vh; } .projection-screen.mosaic .projection-photos { right:8vw; left:8vw; } .projection-footer { min-height:17vh; } }
@media (prefers-reduced-motion:reduce) { .projection-screen * { animation:none !important; transition:none !important; } }
@media (max-width:680px) { .active-panel,.topbar,.section-heading { align-items:stretch; flex-direction:column; } .event-row,.totem-row { grid-template-columns:1fr; } .event-actions,.totem-controls { justify-content:flex-start; } .totem-select { width:100%; } .gallery { grid-template-columns:repeat(2,1fr); gap:7px; } .photo-card { border-radius:11px; } .album { padding-left:9px; padding-right:9px; } .album-header { padding-top:28px; } .kiosk { padding:12px 14px 20px; } .camera-frame { height:min(calc(100dvh - 225px),calc((100vw - 28px) * 16 / 9)); } .kiosk-head { padding-bottom:12px; } .kiosk-message { padding:14px 8px 12px; } .kiosk-actions .button { min-height:50px; padding:10px 14px; } }
@media (max-height:720px) { .kiosk { padding-top:10px; } .kiosk-head { padding-bottom:8px; } .camera-frame { min-height:260px; } .kiosk-message { padding:10px 8px; } .kiosk-message h1 { font-size:1.45rem; } .kiosk-actions .button { min-height:48px; } }