#camera-view { display: block; }
  #gallery-view {
    display: none;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: #14100f;
    color: #f2ede6;
  }
  
  .viewfinder-card {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #050505;
  }
  video, .placeholder-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
  }
  .placeholder-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    text-align: center;
    padding: 0 40px;
    background: #050505;
  }
  .card-scrim-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0));
    pointer-events: none;
  }

  
  .odometer-wrap {
    position: absolute;
    left: 14px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
  }
  .odometer {
    position: relative;
    height: 56px;
    width: 26px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  }
  .odometer-track { position: absolute; left: 0; right: 0; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
  .odometer-num {
    height: 19px; line-height: 19px; text-align: center;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3);
    font-variant-numeric: tabular-nums;
  }
  .odometer-num.current { font-size: 19px; color: #fff; }
  .odometer-label {
    color: rgba(255,255,255,0.7); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2;
  }

  .control-panel {
    flex-shrink: 0;
    background: #141414;
    border-radius: 22px;
    padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) * 0 + 14px);
  }

  
  .zoom-row { display: flex; justify-content: center; margin-bottom: 14px; }
  .zoom-pill { display: flex; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 4px; gap: 2px; }
  .zoom-opt {
    border: none; background: transparent; color: rgba(255,255,255,0.6);
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  }
  .zoom-opt.active { background: rgba(255,255,255,0.92); color: #111; }

  
  .shutter-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .side-control { display: flex; align-items: center; }
  .side-control.left { justify-content: flex-start; gap: 10px; }
  .side-control.right { justify-content: flex-end; gap: 10px; }

  .flash-btn, .flip-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .flash-btn.on { color: #ffd54f; }
  .flash-btn:disabled { opacity: 0.25; }

  
  .mini-gallery {
    width: 40px; height: 40px;
    position: relative;
    cursor: pointer;
  }
  .mini-gallery .stack-img {
    position: absolute; width: 36px; height: 36px;
    border-radius: 8px; object-fit: cover;
    border: 1.5px solid rgba(255,255,255,0.6);
  }
  .mini-gallery .stack-img:nth-child(1) { transform: rotate(-6deg); left: 0; top: 4px; }
  .mini-gallery .stack-img:nth-child(2) { transform: rotate(5deg); left: 3px; top: 0; }
  .mini-gallery .stack-empty { width: 36px; height: 36px; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,0.3); }

  .shutter-wrap { display: flex; justify-content: center; }
  .shutter {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(255,255,255,0.25);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9) inset;
    cursor: pointer;
  }
  .shutter:active { transform: scale(0.93); }
  .shutter:disabled { background: #555; box-shadow: none; border-color: rgba(255,255,255,0.12); cursor: not-allowed; }

  canvas { display: none; }

.shutter { position: relative; display: grid; place-items: center; }
.shutter-lock { display: none; font-size: 20px; filter: grayscale(1); }
.shutter.quota-locked .shutter-lock { display: block; }
.shutter.camera-warming-lock .shutter-lock { display: block; }
.shutter.camera-warming-lock { opacity: .55; }
.shutter.is-processing { opacity: .72; animation: shutter-processing .8s ease-in-out infinite alternate; }
.quota-summary { max-width: 70px; color: rgba(255,255,255,.42); font-size: 8px; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
@keyframes shutter-processing { from { transform: scale(.96); } to { transform: scale(1); } }