:root{
  --orange:#e5a23d;
  --cream:#eee7d8;
  --black:#090909;
  --metal1:#bdb5a6;
  --metal2:#8f887c;
  --leather:#10100f;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:#050505;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
.camera-shell{position:relative;width:100%;height:100dvh;min-height:100vh;overflow:hidden;background:#111;isolation:isolate}
.metal-panel,.leather-panel{position:absolute;left:0;right:0}
.metal-panel{top:0;height:44%;background:
  linear-gradient(90deg,rgba(255,255,255,.10),transparent 18%,rgba(0,0,0,.08) 50%,transparent 82%,rgba(255,255,255,.09)),
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.018) 1px 3px),
  linear-gradient(145deg,#c3bcaf,#8f897f 52%,#b8b0a3)}
.leather-panel{top:43%;bottom:0;background:
  radial-gradient(circle at 18% 22%,rgba(255,255,255,.035) 0 1px,transparent 1.8px),
  radial-gradient(circle at 74% 63%,rgba(255,255,255,.025) 0 1px,transparent 1.7px),
  repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.025) 2px 4px),
  linear-gradient(#161615,#090909)}
.camera-content{position:relative;z-index:1;height:100%;padding:calc(var(--safe-top) + 8px) clamp(14px,5vw,25px) calc(var(--safe-bottom) + 8px);display:flex;flex-direction:column;align-items:center}
.viewfinder-frame{position:relative;width:min(90vw,390px);aspect-ratio:3/4;border-radius:25px;padding:8px;background:linear-gradient(145deg,#181818,#030303 55%,#252525);box-shadow:0 12px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);overflow:hidden;flex:0 1 auto;min-height:240px}
#cameraVideo{
  position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  object-fit:cover;border-radius:18px;background:#000;opacity:.001;pointer-events:none
}
#previewCanvas{
  position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  object-fit:cover;border-radius:18px;background:#000;display:block;z-index:1
}
.camera-placeholder{position:absolute;inset:8px;border-radius:18px;background:linear-gradient(160deg,#1c1d1b,#080808);display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;color:#e9e3d8;padding:24px;z-index:3}
.camera-placeholder.hidden{display:none}
.placeholder-icon{font-size:38px;color:var(--orange)}
.camera-placeholder span{font-size:12px;color:#aaa}
.start-camera{border:1px solid rgba(229,162,61,.65);background:rgba(229,162,61,.12);color:var(--orange);border-radius:999px;padding:10px 15px;font-weight:750;font-size:12px;letter-spacing:.9px;margin-top:6px}
.hud{position:absolute;inset:17px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.85);font-size:11px;font-weight:700;letter-spacing:.5px;z-index:4}
.hud-top,.hud-bottom{position:absolute;left:0;right:0;display:flex;justify-content:space-between}
.hud-top{top:0}.hud-bottom{bottom:0}.accent{color:var(--orange)}
.focus-ring{position:absolute;width:58px;height:58px;border:1.5px solid var(--orange);border-radius:3px;transform:translate(-50%,-50%);opacity:0;z-index:5;pointer-events:none;transition:opacity .18s}
.focus-ring.show{opacity:.95}
.shutter-flash{position:absolute;inset:8px;border-radius:18px;background:#fff;opacity:0;z-index:7;pointer-events:none}
.shutter-flash.fire{animation:flashBlink .13s ease-out}
@keyframes flashBlink{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
.rail{width:min(90vw,390px);margin-top:7px}
.rail-title-row{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:800;letter-spacing:1.3px;color:#272522;padding:0 5px 4px}
.zoom-stops{height:36px;border-radius:13px;background:linear-gradient(#6f6b64,#b8b1a5);box-shadow:inset 0 2px 5px rgba(0,0,0,.38),0 1px rgba(255,255,255,.25);display:flex;align-items:center;justify-content:space-around;padding:4px 6px}
.zoom-stops button{border:0;background:rgba(15,15,15,.36);color:#eee;border-radius:9px;padding:7px 8px;min-width:48px;font-size:10px;font-weight:800;transition:.15s}
.zoom-stops button.active{background:#151515;color:var(--orange);box-shadow:inset 0 0 0 1px rgba(229,162,61,.65)}
.exposure-track{position:relative;height:45px;border-radius:13px;background:linear-gradient(#777168,#b8b0a4);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px rgba(255,255,255,.25);padding:2px 12px 0}
#exposureSlider{width:100%;height:25px;margin:0;accent-color:#171717}
.ev-labels{display:flex;justify-content:space-between;color:#2c2925;font-size:9px;font-weight:800;padding:0 3px}
.lower-controls{width:min(94vw,405px);display:grid;grid-template-columns:95px 1fr 72px;align-items:center;gap:15px;flex:1;min-height:166px;padding:8px 2px 0}
.film-window{width:92px;height:128px;border-radius:20px;background:#050505;border:1.7px solid rgba(229,162,61,.92);box-shadow:inset 0 0 18px rgba(0,0,0,.9),0 8px 18px rgba(0,0,0,.3);position:relative;overflow:hidden;padding:7px}
.film-marker{position:absolute;top:5px;left:50%;width:3px;height:14px;background:var(--orange);border-radius:99px;transform:translateX(-50%);z-index:2}
.film-canister{position:absolute;inset:15px 8px 8px;border-radius:7px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:9px 7px;color:#111;text-align:left;background:linear-gradient(90deg,#222 0 10%,#cfb24c 10% 82%,#2a2011 82%);box-shadow:inset 0 1px rgba(255,255,255,.4)}
.film-canister::after{content:"";position:absolute;right:-5px;top:14%;width:13px;height:75%;background:repeating-linear-gradient(0deg,#5d311c 0 7px,#180f0a 7px 10px)}
.film-brand{font-size:10px;font-weight:800}.film-canister b{font-size:28px;line-height:.9}.film-canister small{font-size:5px;font-weight:900;line-height:1.2;margin-top:5px}
.film-original{background:linear-gradient(90deg,#202020 0 10%,#d7d4ca 10% 82%,#222 82%)}
.film-m200{background:linear-gradient(90deg,#132217 0 10%,#78986e 10% 82%,#1d251d 82%)}
.film-m400{background:linear-gradient(90deg,#241e10 0 10%,#d5ad3f 10% 82%,#2a2110 82%)}
.film-m800{background:linear-gradient(90deg,#25100e 0 10%,#b94b32 10% 82%,#281310 82%)}
.film-bw{background:linear-gradient(90deg,#0e0e0e 0 10%,#c8c8c4 10% 82%,#1b1b1b 82%)}
.shutter-button{justify-self:center;width:112px;height:112px;border-radius:50%;border:0;background:#050505;padding:7px;box-shadow:0 9px 18px rgba(0,0,0,.38)}
.shutter-button>span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 27%,#f3efe8 0 16%,#b9b6b0 41%,#6e6961 70%,#d8d3ca 85%,#59534c 100%);border:2px solid rgba(15,15,15,.48);box-shadow:inset 0 0 0 9px rgba(255,255,255,.15),inset 0 0 0 11px rgba(0,0,0,.14)}
.shutter-button:active{transform:scale(.96)}
.side-controls{display:flex;flex-direction:column;gap:14px}
.round-control{border:0;background:transparent;color:#e9e3d8;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.round-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:linear-gradient(145deg,#252525,#080808);border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 12px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.09);font-size:20px}
.round-control small{font-size:7px;font-weight:800;letter-spacing:1px;color:#d2cabb}
.round-control.active .round-icon{color:var(--orange);border-color:rgba(229,162,61,.6)}
.bottom-controls{width:min(94vw,405px);display:grid;grid-template-columns:72px 1fr 72px;align-items:end;padding-bottom:4px}
.bottom-round .round-icon{width:39px;height:39px;font-size:16px}
.mifilm-wordmark{text-align:center;color:var(--orange);font-size:13px;letter-spacing:3.5px;padding-bottom:15px;opacity:.92}

.sheet-backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.58);backdrop-filter:blur(7px);display:flex;align-items:flex-end}
.sheet-backdrop.hidden,.viewer.hidden,.toast.hidden{display:none}
.sheet{width:100%;max-height:84dvh;overflow:auto;padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 24px);background:linear-gradient(180deg,#1b1b1a,#0b0b0b);border-radius:28px 28px 0 0;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -20px 40px rgba(0,0,0,.35)}
.sheet-handle{width:44px;height:5px;border-radius:99px;background:#5a5a58;margin:0 auto 17px}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.sheet-header small{color:var(--orange);font-weight:800;letter-spacing:1.6px;font-size:8px}
.sheet-header h2{margin:3px 0 0;font-size:25px}
.sheet-close,.viewer-close{border:0;background:#2d2d2c;color:#eee;border-radius:50%;width:34px;height:34px;font-size:23px}
.film-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.film-choice{position:relative;border:1px solid rgba(255,255,255,.09);background:#121212;border-radius:18px;padding:13px;color:#fff;text-align:left;min-height:105px;overflow:hidden}
.film-choice.active{border-color:rgba(229,162,61,.7);box-shadow:inset 0 0 0 1px rgba(229,162,61,.25)}
.film-choice strong{display:block;font-size:17px}.film-choice small{color:#999;font-size:9px;letter-spacing:.5px}.film-swatch{height:10px;border-radius:10px;margin-top:16px}
.gallery-sheet{min-height:58dvh}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.gallery-item{padding:0;border:0;background:#111;aspect-ratio:3/4;border-radius:6px;overflow:hidden}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.empty-state{text-align:center;color:#777;margin:70px 20px}
.viewer{position:fixed;inset:0;z-index:50;background:#050505;padding:calc(env(safe-area-inset-top,0px) + 16px) 14px calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column}
.viewer-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 15px);right:15px;z-index:2;background:rgba(25,25,25,.85)}
#viewerImage{width:100%;height:calc(100% - 110px);object-fit:contain;border-radius:13px}
.viewer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px 0}
.viewer-meta small{display:block;color:#777;margin-top:3px}
.viewer-actions{display:flex;gap:6px}.viewer-actions button{border:0;border-radius:99px;padding:9px 10px;font-size:9px;font-weight:800;background:#262626;color:#eee}.viewer-actions .danger{color:#ff6c64}
.settings-list{display:flex;flex-direction:column;gap:10px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#151515;border-radius:15px;border:1px solid rgba(255,255,255,.06)}
.setting-row span{display:block;max-width:78%}.setting-row b{font-size:14px}.setting-row small{display:block;color:#777;margin-top:3px;font-size:10px;line-height:1.35}
.setting-row input{width:24px;height:24px;accent-color:var(--orange)}
.install-card,.capability-card{background:#151515;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:15px}
.install-card small,.capability-card small{color:var(--orange);font-weight:800;letter-spacing:1.3px;font-size:8px}
.install-card b{display:block;margin-top:6px}.install-card p,.capability-card p{font-size:11px;color:#aaa;line-height:1.5;margin:6px 0 0}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:100;transform:translateX(-50%);padding:10px 14px;background:rgba(20,20,20,.92);border:1px solid rgba(255,255,255,.12);border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 10px 25px rgba(0,0,0,.4)}
@media (max-height:760px){
  .camera-content{padding-top:calc(var(--safe-top) + 4px)}
  .viewfinder-frame{width:min(72vw,310px)}
  .rail{width:min(86vw,360px);margin-top:4px}
  .zoom-stops{height:32px}.exposure-track{height:39px}
  .lower-controls{min-height:138px;transform:scale(.9);transform-origin:center top;margin-bottom:-18px}
  .bottom-controls{transform:scale(.92);transform-origin:center bottom}
}
@media (min-width:700px){
  .camera-shell{max-width:500px;margin:0 auto;border-left:1px solid #252525;border-right:1px solid #252525}
}


/* MiFilm v2 — portrait behavior */
.landscape-guard{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:
    radial-gradient(circle at 50% 36%,rgba(229,162,61,.10),transparent 30%),
    #090909;
  color:#eee7d8;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
}
.landscape-guard-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:330px;
}
.landscape-guard strong{font-size:22px}
.landscape-guard span{font-size:12px;color:#aaa;line-height:1.45}
.rotate-phone{
  display:grid;
  place-items:center;
  width:70px;height:70px;
  border:1px solid rgba(229,162,61,.55);
  color:#e5a23d;
  border-radius:20px;
  font-size:38px;
  margin-bottom:4px;
  background:rgba(229,162,61,.07);
}

@media (orientation: landscape){
  .landscape-guard{display:flex}
  body{overscroll-behavior:none}
}

/* keep HUD and focus above the processed preview canvas */
.hud{z-index:4}
.focus-ring{z-index:5}
.shutter-flash{z-index:7}
.camera-placeholder{z-index:8}


/* ============================================================
   MiFilm v5 — continuous shooting + real landscape capture layout
   ============================================================ */
.viewer-save-hint{
  color:#9b9b99;
  font-size:11px;
  line-height:1.4;
  text-align:center;
  padding:8px 10px 2px;
}
.viewer-save-hint b{color:#e9e3d8}

#galleryIcon.has-thumb{
  background-size:cover !important;
  background-position:center !important;
  color:transparent !important;
  overflow:hidden;
}

/* v5 no longer blocks landscape */
.landscape-guard{display:none !important}

@media (orientation: landscape){
  html,body{overflow:hidden;background:#070707}
  .camera-shell{
    width:100vw;
    max-width:none;
    height:100dvh;
    min-height:100dvh;
    margin:0;
    border:0;
    background:#0b0b0a;
  }
  .metal-panel{display:none}
  .leather-panel{top:0;background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.03) 0 1px,transparent 1.8px),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.025) 2px 4px),
    linear-gradient(#151514,#080808)}

  .camera-content{
    height:100dvh;
    width:100vw;
    padding:calc(env(safe-area-inset-top,0px) + 7px)
            calc(env(safe-area-inset-right,0px) + 12px)
            calc(env(safe-area-inset-bottom,0px) + 7px)
            calc(env(safe-area-inset-left,0px) + 12px);
    display:grid;
    grid-template-columns:minmax(0,1fr) 174px;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:7px 12px;
    align-items:center;
  }

  .viewfinder-frame{
    grid-column:1;
    grid-row:1 / 5;
    width:min(calc(100vw - 205px), calc((100dvh - 18px) * 1.333333));
    max-width:none;
    height:auto;
    max-height:calc(100dvh - 18px);
    aspect-ratio:4 / 3;
    justify-self:center;
    align-self:center;
    border-radius:20px;
  }

  .zoom-section,.exposure-section{
    width:100%;
    margin:0;
  }
  .zoom-section{grid-column:2;grid-row:1}
  .exposure-section{grid-column:2;grid-row:2}
  .rail-title-row{color:#bdb6a9;padding-bottom:3px}

  .zoom-stops{
    height:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3px;
    padding:4px;
  }
  .zoom-stops button{
    min-width:0;
    padding:6px 3px;
    font-size:9px;
  }
  .exposure-track{height:42px;padding-left:8px;padding-right:8px}

  .lower-controls{
    grid-column:2;
    grid-row:3;
    width:100%;
    min-height:0;
    padding:0;
    display:grid;
    grid-template-columns:72px 1fr;
    grid-template-rows:1fr auto;
    gap:6px 8px;
    align-items:center;
  }
  .film-window{
    width:70px;height:92px;
    border-radius:15px;
    grid-column:1;
    grid-row:1;
    justify-self:center;
  }
  .film-canister{inset:13px 6px 6px;padding:6px 5px}
  .film-canister b{font-size:21px}
  .film-canister small{font-size:4.5px}
  .shutter-button{
    width:82px;height:82px;
    grid-column:2;
    grid-row:1;
  }
  .side-controls{
    grid-column:1 / 3;
    grid-row:2;
    flex-direction:row;
    justify-content:center;
    gap:18px;
  }
  .side-controls .round-icon{width:38px;height:38px;font-size:17px}

  .bottom-controls{
    grid-column:2;
    grid-row:4;
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:center;
    padding:0;
  }
  .bottom-controls .mifilm-wordmark{display:none}
  .bottom-controls .round-icon{width:38px;height:38px}

  .hud{font-size:10px}
}