* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --metal-1:#5b5d60;
  --metal-2:#303236;
  --metal-3:#17181a;
  --red:#d80016;
  --green:#71f25a;
  --amber:#ff8a00;
  --lcd:#ff6a00;
}
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#070707; }
body {
  font-family:"Courier New", Courier, monospace;
  color:#222;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  background:
    radial-gradient(circle at 50% 20%, rgba(120,120,130,.18), transparent 35%),
    radial-gradient(circle at center, #2a2c2f 0%, #121314 68%, #050505 100%);
}
.app-shell { width:100vw; height:100dvh; display:flex; align-items:center; justify-content:center; padding: max(10px, env(safe-area-inset-top)) 10px max(30px, env(safe-area-inset-bottom)); }
.camera-body {
  width:min(96vw, 540px);
  max-height: calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--metal-1) 0%, var(--metal-2) 48%, var(--metal-3) 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.72), 0 0 0 2px #111, 0 0 0 6px #3b3c3f, 0 24px 55px rgba(0,0,0,.75);
  transition: all .22s ease;
}
.camera-body.fullscreen { width:100vw; height:100dvh; max-height:none; border-radius:0; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); gap:10px; box-shadow:none; }
.camera-brand { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding-bottom:6px; border-bottom:2px solid #202124; color:#101112; font-weight:900; font-size:14px; letter-spacing:.4px; text-shadow:-1px -1px 0 rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.15); }
#brand-subtitle { font-size:11px; opacity:.8; }
.viewfinder-wrapper { position:relative; width:100%; aspect-ratio:320/200; min-height:180px; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 0 0 4px #121212, 0 0 0 9px #2a2a2a, inset 0 0 24px #000, 0 6px 14px rgba(0,0,0,.55); }
.camera-body.fullscreen .viewfinder-wrapper { flex:1; min-height:0; aspect-ratio:auto; border-radius:14px; }
#viewfinder, #osd-canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:auto; }
#viewfinder { z-index:1; filter:blur(.18px); }
#osd-canvas { z-index:3; pointer-events:none; display:block; }
.screen-effects { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at 48% 42%, rgba(150,160,255,.035) 0%, rgba(0,0,0,.02) 52%, rgba(0,0,0,.16) 100%), repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 3px); mix-blend-mode:screen; opacity:.7; }
.tap-hint { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; color:#ff6600; font-weight:900; font-size:18px; text-shadow:2px 2px 0 #000; letter-spacing:1px; pointer-events:none; animation:blink 1s steps(2,end) infinite; }
.tap-hint.hidden { display:none; }
@keyframes blink { 50% { opacity:.25; } }
.camera-controls { display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px; }
.top-row { gap:8px; }
.main-row { gap:10px; }
.dial-container { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:45px; }
.dial-container span { font-size:9px; font-weight:900; color:#999; text-shadow:-1px -1px 0 #111, 1px 1px 0 rgba(255,255,255,.1); }
.btn { border:none; outline:none; cursor:pointer; font-family:inherit; font-weight:900; transition:transform .08s ease, filter .08s ease, box-shadow .08s ease; }
.btn:active { transform:scale(.95); filter:brightness(.9); }
.pill { min-height:38px; padding:0 12px; border-radius:10px; background:linear-gradient(to bottom,#f3f3f3,#a9a9a9); color:#222; text-shadow:0 1px 0 #fff; box-shadow:0 3px 5px rgba(0,0,0,.35); font-size:11px; }
#power-btn.active { background:linear-gradient(to bottom,#dfffce 0%,#61d844 100%); color:#113c08; box-shadow:0 0 16px rgba(113,242,90,.5), 0 3px 5px rgba(0,0,0,.35); }
.dial { width:46px; height:46px; border-radius:50%; background:conic-gradient(from 45deg,#d4d4d4,#fff,#858585,#d4d4d4,#fff,#858585,#d4d4d4); color:#202020; font-size:8px; text-shadow:0 1px 0 rgba(255,255,255,.8); box-shadow:0 3px 6px rgba(0,0,0,.38); }
.dial.wide { width:54px; border-radius:22px; }
.shutter { width:66px; height:66px; flex:0 0 66px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff7b80 0%, var(--red) 42%,#71000b 100%); box-shadow:0 0 0 2px #111, 0 0 0 7px #dcdcdc, 0 5px 10px rgba(0,0,0,.55); }
.shutter:disabled { opacity:.55; filter:grayscale(.4); }
.shutter.recording { border-radius:20%; transform:scale(.85); background:radial-gradient(circle at 35% 30%,#ff4d51 0%,#a80011 42%,#510008 100%); animation:recpulse .8s infinite alternate; }
@keyframes recpulse { from { box-shadow:0 0 0 2px #111, 0 0 0 7px #dcdcdc, 0 5px 10px rgba(0,0,0,.55); } to { box-shadow:0 0 0 2px #111, 0 0 0 7px #dcdcdc, 0 0 24px rgba(255,0,20,.7); } }
.camera-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:18px; color:#101010; font-size:11px; font-weight:900; text-shadow:1px 1px 0 rgba(255,255,255,.12); }
#raw-video { display:none; }
.credit { position:fixed; left:0; right:0; bottom:6px; text-align:center; font:11px Arial,sans-serif; color:#777; pointer-events:none; }
.credit a { color:#999; text-decoration:none; pointer-events:auto; }
.review-panel, .roll-panel { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.hidden { display:none !important; }
.review-card, .roll-card { width:min(94vw, 520px); max-height:88dvh; overflow:auto; border-radius:22px; padding:14px; background:linear-gradient(145deg,#36383b,#171819); color:#eee; box-shadow:0 0 0 2px #000, 0 0 0 5px #444, 0 26px 60px rgba(0,0,0,.85); }
.review-header, .roll-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; color:var(--lcd); font-weight:900; text-shadow:2px 2px 0 #000; }
.review-header { font-size:13px; }
#review-file, .roll-head small { display:block; color:#aaa; font-size:10px; text-align:right; }
#review-image { width:100%; display:block; border-radius:8px; background:#000; image-rendering:auto; box-shadow:0 0 0 4px #080808, 0 0 0 7px #252525; }
.review-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px; }
.panel-btn { min-height:42px; padding:0 12px; border-radius:11px; background:linear-gradient(to bottom,#f2f2f2,#a9a9a9); color:#181818; box-shadow:0 3px 5px rgba(0,0,0,.45); }
.panel-btn.hot { background:linear-gradient(to bottom,#ffd6d8,#e31b2e); color:#fff; text-shadow:1px 1px 0 #600; }
.roll-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.roll-item { border:0; padding:0; background:#060606; border-radius:9px; overflow:hidden; box-shadow:0 0 0 2px #333; color:#bbb; text-align:left; }
.roll-item img { width:100%; display:block; aspect-ratio:320/200; object-fit:cover; image-rendering:auto; }
.roll-item span { display:block; padding:6px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.roll-empty { color:#aaa; text-align:center; margin:28px 0 10px; font-size:13px; }
@media (max-width:390px) {
  .camera-body { padding:14px; gap:12px; }
  .camera-brand { font-size:12px; }
  #brand-subtitle { display:none; }
  .pill { padding:0 9px; font-size:10px; }
  .dial { width:42px; height:42px; }
  .dial.wide { width:50px; }
  .shutter { width:60px; height:60px; flex-basis:60px; }
}