/* ==========================================================================
      STYLE.CSS
      Layout & komponen. Warna/font diambil dari theme.css (CSS variables).
      Tema: Streetwear (hijau-putih-hitam) — border tebal, hard shadow ala
      stiker, background grid/graph paper, tipografi poster kondensasi.
      ========================================================================== */

    *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
    html{ height:-webkit-fill-available; } /* fallback iOS Safari lama yg belum dukung 100dvh */
    html,body{
      margin:0; padding:0; height:100%;
      background:var(--bg-page-pattern), var(--bg-page);
      font-family: var(--font-body);
      color: var(--ink);
      overflow: hidden;
    }

    .sparkles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
    .sparkles i{
      position:absolute; width:3px; height:3px; border-radius:50%; background:var(--film-yellow);
      box-shadow:0 0 6px 1px var(--gold-glow); opacity:0; animation:twinkle 3.6s ease-in-out infinite;
    }
    @keyframes twinkle{ 0%,100%{opacity:0; transform:scale(0.6);} 50%{opacity:0.9; transform:scale(1.15);} }

    #app{ position:relative; width:100%; height:100vh; height:-webkit-fill-available; height:100dvh; max-width:520px; margin:0 auto; overflow:hidden;}

    .screen{ position:absolute; inset:0; display:none; flex-direction:column; padding:0; }
    .screen.active{ display:flex; }

    /* ---------- shared bits ---------- */
    .brand{
      font-family: var(--font-display);
      font-weight:400;
      letter-spacing:0.5px;
      color:var(--film-yellow);
      -webkit-text-stroke: 1px var(--ink);
    }
    .ornament{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; opacity:0.9; }
    .ornament .line{ height:2px; width:36px; background:var(--ink); }
    .ornament .mark{
      color:var(--ink); background:var(--film-yellow); font-size:11px; font-weight:700;
      border:2px solid var(--ink); border-radius:999px; width:22px; height:22px; line-height:1;
      display:flex; align-items:center; justify-content:center; transform:rotate(-8deg);
    }

    /* ---------- NAME SCREEN ---------- */
    #screen-name, #screen-code, #screen-token{
      align-items:center; justify-content:center; text-align:center; padding:32px; position:relative;
      background:transparent;
    }
    #screen-token .namecard{
      margin-top:10px;
      padding-top: 26px;
    }
    #screen-token .namecard #guestTokenDisplay{
      display: inline-block;
      width: 100%;
      margin: 0 auto 18px;
      padding: 6px 10px 4px;
      font-family: "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 700;
      letter-spacing: 4px;
      color: var(--ink);
      background: rgba(174, 255, 77, 0.18);
      border: 2px solid var(--ink);
      border-radius: 10px;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
      text-transform: uppercase;
      line-height: 1.2;
      font-variant-ligatures: none;
      font-feature-settings: "zero" 1, "tnum" 1;
    }
    .namecard{
      position:relative; width:100%; max-width:340px; z-index:1; background:var(--paper);
      border:3px solid var(--ink); border-radius:20px; padding:28px 24px; box-shadow: 7px 7px 0 var(--ink);
    }
    .brand-logo-top{ display:block; height:clamp(44px, 14vw, 56px); width:auto; max-width:100%; object-fit:contain; margin:0 auto 10px; }
    .namecard h1{
      font-family: var(--font-display); font-weight:400; font-size:30px; line-height:1.15; color:var(--ink);
      margin:0 0 8px; letter-spacing:0.3px; text-transform:uppercase;
      text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:5px; text-decoration-color:var(--film-yellow);
    }
    .namecard .sub{ font-family: var(--font-body); font-weight:600; font-size:14px; color:var(--plastic-grey); margin-bottom:22px; text-transform:uppercase; letter-spacing:1px;}
    #screen-token .namecard .sub{
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--ink);
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    #screen-token .namecard h1{
      margin-bottom: 10px;
    }
    .namecard p.desc{ font-size:13.5px; line-height:1.7; color:var(--plastic-grey); margin-bottom:26px;}
    #guestNameInput{
      width:100%; padding:14px 16px; border-radius:12px; border:2.5px solid var(--ink);
      background:var(--paper); color:var(--ink); font-family: var(--font-body); font-size:15px; font-weight:600;
      outline:none; text-align:center; margin-bottom:16px; letter-spacing:0.2px;
      box-shadow:3px 3px 0 var(--ink);
    }
    #guestNameInput::placeholder{ color:#9CA89F; font-weight:500; }
    .btn-primary{
      width:100%; padding:16px; border:2.5px solid var(--ink); border-radius:999px; background:var(--flash-red); color:var(--paper);
      font-family: var(--font-body); font-weight:700; font-size:15px; letter-spacing:0.6px; text-transform:uppercase; cursor:pointer;
      box-shadow:4px 4px 0 var(--film-yellow); transition:transform .08s ease, box-shadow .08s ease;
    }
    .btn-primary:active{ transform:translate(3px, 3px); box-shadow:1px 1px 0 var(--film-yellow); }
    .btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
    .hint{ margin-top:14px; font-size:11.5px; color:var(--plastic-grey); letter-spacing:0.3px;}

    /* ---------- CODE GATE SCREEN ---------- */
    .code-screen-icon{
      width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
      background:var(--film-yellow); display:flex; align-items:center; justify-content:center;
      font-size:24px; border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); flex-shrink:0;
      transform:rotate(-4deg);
    }
    #accessCodeInput{
      width:100%; padding:16px 14px; border-radius:12px; border:2.5px solid var(--ink);
      background:var(--paper); color:var(--ink); font-family: var(--font-body), monospace; font-weight:700;
      font-size:22px; letter-spacing:8px; text-align:center; outline:none; margin-bottom:16px; box-sizing:border-box;
      box-shadow:3px 3px 0 var(--ink); transition: box-shadow .12s ease, transform .12s ease;
      -webkit-appearance:none; appearance:none;
    }
    #accessCodeInput:focus{ box-shadow:3px 3px 0 var(--film-yellow-deep), 0 0 0 3px var(--gold-glow); }
    #accessCodeInput::placeholder{ letter-spacing:normal; font-weight:500; font-size:14.5px; color:#9CA89F; }

    .namecard.shake{ animation: shakeCard .4s ease; }
    @keyframes shakeCard{
      0%,100%{ transform:translateX(0); }
      20%{ transform:translateX(-8px); }
      40%{ transform:translateX(7px); }
      60%{ transform:translateX(-5px); }
      80%{ transform:translateX(4px); }
    }

    .btn-primary .btn-spinner{
      display:inline-block; width:15px; height:15px; border-radius:50%;
      border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; vertical-align:-3px; margin-right:8px;
      animation: btnspin .7s linear infinite;
    }
    @keyframes btnspin{ to{ transform:rotate(360deg); } }

    .code-error{ margin-top:14px; color:#DC2626; font-size:13px; text-align:center; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;}
    .filmtag{
      margin-top:12px; font-family: var(--font-body), monospace; font-size:10px; letter-spacing:2.5px;
      color:var(--ink); background:var(--film-yellow); display:inline-block; padding:3px 10px; border-radius:999px;
      border:1.5px solid var(--ink); opacity:1; text-transform:uppercase; font-weight:700;
    }

    /* ---------- CAMERA SCREEN ---------- */
    #screen-camera{ background:transparent; }
    .cam-body{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; padding:max(14px, env(safe-area-inset-top)) 14px 0; }
    .cam-topbar{
      display:flex; align-items:center; justify-content:space-between; padding:2px 6px 12px;
      font-size:11px; color:var(--ink); font-weight:700; letter-spacing:1.5px;
    }
    .cam-topbar-left{ display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
    .cam-topbar .brandmini{ font-family: var(--font-display); font-weight:400; font-size:16px; letter-spacing:0.5px; text-transform:uppercase;}
    .brandmini-with-logo{ display:flex; align-items:center; gap:8px; }
    .brandmini-logo{ height:clamp(16px, 4vw, 18px); width:auto; max-width:25vw; display:block; object-fit:contain; }
    .cam-guest-code{
      display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px;
      background:linear-gradient(135deg, rgba(174,255,77,0.92), rgba(127,217,97,0.88));
      border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); color:var(--ink);
      font-size:8.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
      white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
      line-height:1.2;
    }
    .cam-guest-dot{
      width:6px; height:6px; border-radius:50%; background:var(--ink); display:inline-block;
      box-shadow:0 0 0 2px rgba(255,255,255,0.5);
    }
    .cam-topbar-right{ display:flex; align-items:center; gap:8px; }
    .icon-btn-sm{
      width:30px; height:30px; border-radius:50%; border:2px solid var(--ink); background:var(--paper); color:var(--ink);
      font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer;
      box-shadow:2px 2px 0 var(--ink); flex-shrink:0;
    }
    .icon-btn-sm:active{ transform:translate(1px, 1px); box-shadow:1px 1px 0 var(--ink); }
    .icon-btn-sm.active-flash{ background:var(--film-yellow); color:var(--ink); }

    /* ---------- timer mundur (self-timer): tombol + menu pilihan durasi ---------- */
    .timer-btn-wrap{ position:relative; }
    .timer-badge{
      position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
      border-radius:999px; background:var(--ink); color:var(--paper); font-size:9px; font-weight:700;
      display:flex; align-items:center; justify-content:center; border:1.5px solid var(--paper);
    }
    .timer-menu{
      position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
      background:var(--paper); border:2px solid var(--ink); border-radius:12px; box-shadow:3px 3px 0 var(--ink);
      padding:6px; display:flex; flex-direction:column; gap:2px; z-index:10; min-width:80px;
      opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
    }
    .timer-menu.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
    .timer-option{
      padding:8px 14px; border-radius:8px; border:none; background:transparent; color:var(--ink);
      font-family:var(--font-body); font-weight:700; font-size:12.5px; cursor:pointer; text-align:center;
    }
    .timer-option.active{ background:var(--film-yellow); }
    .timer-option:active{ transform:translate(1px,1px); }

    /* ---------- overlay hitung mundur di dalam viewfinder ---------- */
    .timer-countdown{
      position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center;
      background:rgba(10,10,15,0.4); cursor:pointer;
    }
    .timer-countdown.show{ display:flex; }
    .timer-countdown #timerCountdownNum{
      font-family:var(--font-display); font-weight:400; font-size:96px; color:var(--paper); line-height:1;
      text-shadow:0 4px 16px rgba(0,0,0,0.5);
    }
    .timer-countdown #timerCountdownNum.pulse{ animation:timerPulse 1s ease-out; }
    @keyframes timerPulse{ 0%{ transform:scale(1.6); opacity:0.35; } 100%{ transform:scale(1); opacity:1; } }
    .timer-countdown-hint{
      position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:11px;
      color:var(--paper); opacity:0.85; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
    }

    .exposure-count{
      display:flex; align-items:center; gap:6px; font-family: var(--font-body); font-weight:700;
      background:var(--film-yellow); border:2px solid var(--ink); border-radius:999px; padding:4px 10px;
    }
    .exposure-dot{ width:6px; height:6px; border-radius:50%; background:var(--ink);}

    .viewfinder-wrap{
      position:relative; flex:1; min-height:0; border-radius:16px; overflow:hidden;
      background:#000; border:3px solid var(--ink);
      box-shadow: 6px 6px 0 var(--film-yellow);
    }
    #video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; transition: filter .25s ease; }
    .cam-msg{
      position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:24px; gap:14px; background:rgba(10,10,15,0.9); font-size:14px; color:var(--paper);
    }
    .cam-msg button{ margin-top:6px; }

    .viewfinder-frame{ position:absolute; inset:0; pointer-events:none; border: 16px solid transparent;
      box-shadow: inset 0 0 0 2px rgba(174,255,77,0.55); }
    .corner-marks span{ position:absolute; width:16px; height:16px; border-color:var(--film-yellow); }
    .corner-marks span:nth-child(1){ top:12px; left:12px; border-top:2.5px solid; border-left:2.5px solid;}
    .corner-marks span:nth-child(2){ top:12px; right:12px; border-top:2.5px solid; border-right:2.5px solid;}
    .corner-marks span:nth-child(3){ bottom:12px; left:12px; border-bottom:2.5px solid; border-left:2.5px solid;}
    .corner-marks span:nth-child(4){ bottom:12px; right:12px; border-bottom:2.5px solid; border-right:2.5px solid;}

    .flash-overlay{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }

    /* tekstur grain film -- cuma dipakai utk feedback visual di viewfinder saat
      filter 'Analog' aktif (hasil foto sebenarnya diberi grain sungguhan lewat
      canvas per-piksel di camera.js, ini hanya preview live-nya) */
    .grain-overlay{
      position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0;
      mix-blend-mode:overlay; transition:opacity .2s ease;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      background-size:180px 180px;
    }
    .grain-overlay.active{ opacity:0.35; }
    .flash-overlay.fire{ animation:flashfire 320ms ease-out; }
    .flash-overlay.fire-strong{ animation:flashfireStrong 480ms ease-out; }
    @keyframes flashfire{ 0%{opacity:0;} 12%{opacity:0.95;} 100%{opacity:0;} }
    @keyframes flashfireStrong{ 0%{opacity:0;} 10%{opacity:1;} 40%{opacity:0.85;} 100%{opacity:0;} }

    /* ---------- filter strip (warna + grain 'Analog') ---------- */
    .filter-strip{
      display:flex; gap:8px; overflow-x:auto; padding:10px 2px 4px; margin-bottom:2px;
      scrollbar-width:none;
    }
    .filter-strip::-webkit-scrollbar{ display:none; }
    .filter-chip{
      flex:0 0 auto; padding:7px 14px; border-radius:999px; border:2px solid var(--ink);
      background:var(--paper); color:var(--ink); font-size:11.5px; font-family: var(--font-body);
      font-weight:700; letter-spacing:0.3px; cursor:pointer; white-space:nowrap; text-transform:uppercase;
    }
    .filter-chip.active{ background:var(--film-yellow); color:var(--ink); border-color:var(--ink); box-shadow:2px 2px 0 var(--ink); }

    .cam-controls{ display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; padding:14px 10px calc(18px + env(safe-area-inset-bottom)); }
    .icon-btn{
      width:clamp(44px, 12vw, 52px); height:clamp(44px, 12vw, 52px); border-radius:50%; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
      font-size:clamp(16px, 4.5vw, 20px); display:flex; align-items:center; justify-content:center; cursor:pointer;
      box-shadow:3px 3px 0 var(--ink); flex-shrink:0;
    }
    .icon-btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink); }
    .icon-btn.active-flash{ background:var(--film-yellow); color:var(--ink); }

    .shutter-btn{
      width:clamp(62px, 18vw, 76px); height:clamp(62px, 18vw, 76px); border-radius:50%; background:var(--film-yellow);
      border:3px solid var(--ink); box-shadow:0 0 0 3px var(--paper), 4px 4px 0 var(--ink); cursor:pointer; flex-shrink:0;
    }
    .shutter-btn:active{ transform:translate(2px, 2px); box-shadow:0 0 0 3px var(--paper), 2px 2px 0 var(--ink); }
    .shutter-btn:disabled{ background:var(--plastic-grey); border-color:#9CA3AF; box-shadow:0 0 0 3px var(--paper); cursor:not-allowed; }

    .gallery-tab-btn{
      display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; color:var(--ink);
      font-size:clamp(9px, 2.6vw, 11px); font-weight:700; letter-spacing:0.3px; cursor:pointer; text-transform:uppercase;
    }
    .gallery-tab-btn .ic{ font-size:clamp(19px, 5.5vw, 23px); }

    /* ---------- DEVELOPING SCREEN ---------- */
    #screen-develop{ align-items:center; justify-content:center; background:transparent; padding:26px; text-align:center; position:relative;}
    .print-frame{
      position:relative; width:100%; max-width:320px; background:var(--print-paper); border-radius:18px; padding:12px 12px 48px;
      box-shadow:6px 6px 0 var(--ink);
      border:3px solid var(--ink);
      transform:rotate(-1.5deg);
    }
    .print-photo-wrap{ position:relative; width:100%; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:#000;}
    .print-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block;
      filter: blur(18px) grayscale(1) brightness(2.1) contrast(0.7); opacity:0.35;
      transition: filter 2.6s ease, opacity 2.6s ease;
    }
    .print-photo-wrap img.developed{ filter:none; opacity:1; }
    .developing-label{ margin-top:20px; font-size:13px; letter-spacing:2px; color:var(--ink); font-weight:700; font-family: var(--font-body); text-transform:uppercase;}
    .dots span{ animation:blinkdot 1.4s infinite; opacity:0;}
    .dots span:nth-child(2){ animation-delay:0.2s;}
    .dots span:nth-child(3){ animation-delay:0.4s;}
    @keyframes blinkdot{ 0%{opacity:0;} 30%{opacity:1;} 60%{opacity:0;} }

    .caption-panel{ width:100%; max-width:320px; margin-top:24px; display:none; }
    .caption-panel.show{ display:block; animation:fadeup .5s ease; }
    @keyframes fadeup{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
    #captionInput{
      width:100%; padding:12px 14px; border-radius:12px; border:2.5px solid var(--ink);
      background:var(--paper); color:var(--ink); font-family: var(--font-body); font-weight:600; font-size:16px;
      outline:none; margin-bottom:12px; text-align:center; box-shadow:3px 3px 0 var(--ink);
    }
    .develop-actions{ display:flex; gap:10px; }
    .voice-note-controls{ width:100%; margin:0 0 12px; text-align:left; }
    .voice-note-heading{ margin-bottom:6px; color:var(--plastic-grey); font-size:10px; font-weight:800; text-transform:uppercase; }
    .voice-note-row{ display:flex; align-items:center; gap:8px; }
    .voice-note-row .voice-note-icon-btn{
      display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center;
      width:44px; height:44px; padding:0; font-size:20px; line-height:1;
      touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
    }
    .voice-note-icon-btn.is-requesting{ background:var(--film-yellow); opacity:0.72; }
    .voice-note-icon-btn.is-recording{ background:var(--flash-red); color:#fff; box-shadow:0 0 0 3px var(--film-yellow), 3px 3px 0 var(--ink); }
    .voice-note-timer{ flex:0 0 auto; min-width:54px; font-size:10px; font-weight:700; color:var(--plastic-grey); text-align:right; }
    .voice-note-controls audio{ display:block; width:100%; height:38px; margin-top:8px; }
    .voice-note-controls audio[hidden]{ display:none; }
    .voice-note-status{ min-height:14px; margin-top:4px; color:var(--plastic-grey); font-size:10px; }
    .btn-secondary{
      flex:1; padding:13px; border-radius:999px; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
      font-family: var(--font-body); font-weight:700; font-size:13px; letter-spacing:0.3px; cursor:pointer; text-transform:uppercase;
    }
    .develop-actions .btn-primary{ flex:1.4; padding:13px; font-size:13px; letter-spacing:0.5px;}

    /* ---------- GALLERY SCREEN ---------- */
    #screen-gallery{ background:transparent; }
    .gal-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px; }
    .gal-top .brandmini{ font-family: var(--font-display); font-weight:400; font-size:18px; color:var(--ink); text-transform:uppercase;}
    .gal-top-right{ display:flex; align-items:center; gap:10px; }
    .gal-count{ font-size:11px; color:var(--plastic-grey); letter-spacing:0.4px; font-weight:600;}
    .gallery-frame-btn{
      width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center;
      border:2px solid var(--ink); border-radius:10px; background:var(--film-yellow); color:var(--ink);
      box-shadow:2px 2px 0 var(--ink); font-size:21px; line-height:1; cursor:pointer;
    }
    .gallery-frame-btn:active{ transform:translate(2px, 2px); box-shadow:none; }
    .gal-toolbar{
      display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:0 12px 8px; flex-wrap:nowrap; overflow-x:auto;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .gal-toolbar::-webkit-scrollbar{ display:none; }
    .gal-select-all{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
    .gal-select-all input{ width:13px; height:13px; accent-color:var(--accent); }
    .gallery-action-btn{
      border:2px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink);
      font-weight:700; font-size:10px; letter-spacing:0.3px; text-transform:uppercase; padding:7px 10px; cursor:pointer;
      white-space:nowrap; flex:0 0 auto;
    }
    .gallery-action-btn.secondary{ background:var(--film-yellow); }
    .gallery-action-btn:disabled{ opacity:0.5; cursor:not-allowed; }
    .gallery-action-btn.danger{ background:var(--flash-red); color:var(--paper); }
    #selectAllWrap[hidden]{ display:none; }
    .gal-scroll{ flex:1; overflow-y:auto; padding:6px 16px calc(90px + env(safe-area-inset-bottom)); }
    .gal-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px; padding-top:10px; }
    @media (max-width: 640px){
      .gal-grid{ gap:14px 10px; }
      .polaroid{ padding:6px 6px 22px; }
      .polaroid .photo-select-wrap{ top:8px; left:8px; }
    }
    .polaroid{
      background:var(--print-paper); border-radius:14px; padding:8px 8px 30px;
      box-shadow:4px 4px 0 var(--ink); border:2.5px solid var(--ink); cursor:pointer; position:relative; transform:rotate(-1.4deg);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      max-width:220px; width:100%; justify-self:center;
    }
    .polaroid.selected{ border-color:var(--flash-red); box-shadow:4px 4px 0 var(--flash-red); }
    .polaroid:nth-child(even){ transform:rotate(1.4deg); }
    .polaroid .thumb-wrap{ position:relative; }
    .polaroid .photo-select-wrap{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,0.84); border:2px solid var(--ink); border-radius:8px; padding:2px; z-index:2; }
    .polaroid .photo-select-toggle{ width:16px; height:16px; accent-color:var(--flash-red); cursor:pointer; }
    .polaroid img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; display:block; background:#111;}
    .polaroid .cap{ font-family: var(--font-body); font-weight:700; font-size:13px; color:var(--print-ink); margin-top:8px; text-align:center; line-height:1.2;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .polaroid .who{ font-size:8.5px; color:var(--print-caption-sub); text-align:center; margin-top:2px; letter-spacing:1px; text-transform:uppercase; font-weight:700;}
    .polaroid .photo-owner-tag{ display:inline-block; margin-top:8px; padding:4px 8px; border-radius:99px; background:rgba(24,24,24,0.08); color:var(--ink); font-size:8px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; }
    .polaroid .photo-owner-tag.mine{ background:var(--film-yellow); }
    .gal-empty{ text-align:center; margin-top:80px; color:var(--plastic-grey); font-size:14px; padding:0 30px; line-height:1.6;}

    .lightbox{ position:fixed; inset:0; background:rgba(8,6,14,0.94); display:none; align-items:center; justify-content:center; z-index:50; padding:30px;}
    .lightbox.show{ display:flex; }
    .lightbox-inner{
      position:relative; max-width:340px; width:100%; background:var(--print-paper); border-radius:18px; padding:12px 12px 26px;
      border:3px solid var(--ink); box-shadow:7px 7px 0 var(--film-yellow);
    }
    .lightbox-inner img{ width:100%; border-radius:10px; display:block;}
    .lightbox-inner .cap{ font-family: var(--font-body); font-weight:700; font-size:17px; color:var(--print-ink); margin-top:12px; text-align:center;}
    .lightbox-inner .who{ font-size:10px; color:var(--print-caption-sub); text-align:center; margin-top:3px; letter-spacing:1px; text-transform:uppercase; font-weight:700;}
    .lightbox-voice-note{ display:block; width:100%; height:40px; margin-top:12px; }
    .lightbox-close{
      position:absolute; top:16px; right:16px; background:var(--film-yellow); border:2px solid var(--ink); border-radius:50%;
      width:34px; height:34px; color:var(--ink); font-size:16px; font-weight:700; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
    }
    .lightbox-download{
      margin-top:16px; width:100%; padding:14px; border-radius:999px; border:2.5px solid var(--ink);
      background:var(--flash-red); color:var(--paper);
      font-family: var(--font-body); font-weight:700; font-size:13.5px; letter-spacing:0.3px; cursor:pointer; text-transform:uppercase;
      display:flex; align-items:center; justify-content:center; gap:8px;
      box-shadow:3px 3px 0 var(--film-yellow);
    }
    .lightbox-download:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--film-yellow); }
    .lightbox-download:disabled{ opacity:0.55; cursor:not-allowed; }

    .bottom-nav{
      position:absolute; left:0; right:0; bottom:0; display:flex; background:var(--paper);
      border-top:3px solid var(--ink); padding:10px 20px calc(10px + env(safe-area-inset-bottom));
      justify-content:space-around;
    }

    .toast{
      position:absolute; left:50%; bottom:96px; transform:translateX(-50%) translateY(10px);
      background:var(--film-yellow); border:2px solid var(--ink); color:var(--ink); font-weight:700;
      font-size:12.5px; padding:10px 16px; border-radius:8px; opacity:0; pointer-events:none;
      transition:opacity .25s ease, transform .25s ease; z-index:20; max-width:80%; text-align:center;
      box-shadow:3px 3px 0 var(--ink);
    }
    .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

    canvas{ display:none; }

    @media (max-width:600px) and (max-height:760px){
      .cam-topbar,
      .filter-strip,
      .cam-controls{ flex-shrink:0; }
      .cam-topbar{ padding-bottom:8px; }
      .filter-strip{ padding-top:6px; }
      .cam-controls{ padding-top:8px; padding-bottom:calc(12px + max(env(safe-area-inset-bottom), 8px)); }
      #screen-develop{
        justify-content:flex-start;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:max(10px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
      }
      #screen-develop .print-frame{ width:min(250px, 70vw); padding:8px 8px 34px; }
      #screen-develop .developing-label{ margin-top:8px; font-size:11px; }
      #screen-develop .caption-panel{ margin-top:10px; flex:0 0 auto; }
      #screen-develop .voice-note-controls{ margin-bottom:8px; }
      #screen-develop .voice-note-heading{ margin-bottom:4px; }
      #screen-develop .voice-note-row .voice-note-icon-btn{ width:40px; height:40px; flex-basis:40px; }
      #screen-develop .voice-note-controls audio{ height:34px; margin-top:4px; }
      #screen-develop .voice-note-status{ margin-top:2px; }
      #screen-develop #captionInput{ padding:10px 12px; margin-bottom:8px; }
      #screen-develop .develop-actions .btn-secondary,
      #screen-develop .develop-actions .btn-primary{ padding:10px 8px; font-size:11px; }
    }

    @media (max-width:600px) and (max-height:680px){
      #screen-develop .print-frame{ width:min(218px, 62vw); padding-bottom:28px; }
    }