:root {
  --accent: #22d3ee;          /* cyan neon */
  --accent-dim: rgba(34, 211, 238, 0.7);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.20);
  --ink: #eafcff;
  --ink-dim: rgba(234, 252, 255, 0.7);
  --shutter-glow: 0 0 20px 1px rgba(34, 211, 238, 0.85), 0 0 0 3px rgba(34, 211, 238, 0.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e0a22; color: var(--ink);
  font-family: -apple-system, "SF Pro Display", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { position: relative; }

/* Camera fills the whole viewport; chrome floats over it. */
.stage { position: absolute; inset: 0; overflow: hidden; background: #0e0a22; }
#video { width: 100%; height: 100%; object-fit: cover; display: block; }
#capture-canvas { display: none; }

/* ---- top bar (glass) ---- */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 10px; }
.order-row { display: flex; gap: 8px; }
#order-input {
  flex: 1; min-width: 0; height: 44px; font-size: 16px; font-weight: 500; color: var(--ink);
  padding: 0 14px; border-radius: 13px; border: 1px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); letter-spacing: .2px;
}
#order-input::placeholder { color: var(--ink-dim); }
#order-input:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px rgba(34,211,238,0.22); }

.iconbtn {
  flex: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--ink); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.iconbtn:hover { background: var(--glass-strong); }
.iconbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,0.3); }
#connect-drive { border-color: var(--accent-dim); color: var(--accent); box-shadow: 0 0 14px -3px var(--accent-dim); }

#recent-orders {
  width: 100%; margin-top: 8px; height: 38px; padding: 0 10px; font-size: 14px; color: var(--ink);
  border-radius: 11px; border: 1px solid var(--glass-border); background: rgba(14,10,34,0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#recent-orders:empty { display: none; }

/* ---- live watermark preview overlay ---- */
.wm-overlay { position: absolute; left: 14px; bottom: calc(env(safe-area-inset-bottom) + 108px);
  z-index: 15; max-width: 74%; padding: 9px 12px; border-radius: 10px; white-space: pre-wrap;
  background: rgba(14, 10, 34, 0.5); border: 1px solid rgba(34, 211, 238, 0.35); color: #fff;
  font-size: 14px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- bottom control bar (glass) ---- */
.controls { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 20; height: 84px; border-radius: 24px; border: 1px solid var(--glass-border);
  background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center; }

#flip { position: absolute; left: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.10); color: var(--ink);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, box-shadow .2s; }
#flip:hover { background: var(--glass-strong); }
#flip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,211,238,0.3); }

.shutter { width: 66px; height: 66px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #eafcff; border: 3px solid var(--accent); box-shadow: var(--shutter-glow);
  transition: transform .12s ease, box-shadow .2s; }
.shutter:active { transform: scale(0.94); }
.shutter:disabled { opacity: .55; cursor: default; box-shadow: none; }
.shutter:focus-visible { outline: none; box-shadow: var(--shutter-glow), 0 0 0 5px rgba(34,211,238,0.35); }

.status { position: absolute; right: 16px; max-width: 92px; text-align: right;
  font-size: 11.5px; line-height: 1.3; color: var(--accent); text-shadow: 0 0 8px rgba(34,211,238,0.6);
  word-break: break-all; }

/* ---- landscape: controls dock to the right edge, shutter vertically centered ---- */
@media (orientation: landscape) {
  .topbar { right: calc(env(safe-area-inset-right) + 108px); } /* clear the right-docked control bar */
  .controls { left: auto; top: 12px; bottom: 12px; right: calc(env(safe-area-inset-right) + 12px);
    width: 84px; height: auto; flex-direction: column; }
  #flip { left: 50%; top: 18px; transform: translateX(-50%); }
  #flip:hover { transform: translateX(-50%); }
  .status { right: 50%; bottom: 16px; transform: translateX(50%); left: auto;
    max-width: 76px; text-align: center; }
  .wm-overlay { bottom: 14px; left: calc(env(safe-area-inset-left) + 14px); max-width: 60%; }
}

/* ---- settings dialog (dark glass) ---- */
dialog#settings-panel { border: 1px solid var(--glass-border); border-radius: 16px; padding: 22px;
  background: #171331; color: var(--ink); max-width: 300px; }
dialog#settings-panel::backdrop { background: rgba(0,0,0,0.55); }
dialog#settings-panel label { display: block; font-size: 15px; }
dialog#settings-panel input { display: block; margin-top: 8px; width: 100%; height: 42px;
  font-size: 16px; padding: 0 12px; color: var(--ink); border-radius: 11px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.08); }
dialog#settings-panel input:focus { outline: none; border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.22); }
dialog#settings-panel menu { margin: 18px 0 0; padding: 0; display: flex; justify-content: flex-end; }
dialog#settings-panel button { height: 40px; padding: 0 20px; font-size: 15px; font-weight: 500; cursor: pointer;
  color: #06202b; background: var(--accent); border: none; border-radius: 11px; }
dialog#settings-panel button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,211,238,0.4); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}