:root{
  --bg:#10110f;
  --panel:#171815;
  --gold:#d7a857;
  --gold-light:#d9c49c;
  --text:#f3e4c5;
  --border:rgba(215,168,87,.82);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% -10%,#25231d 0,#11120f 44%,#0b0c0b 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
body{height:100dvh;overscroll-behavior:none}
button,select{font:inherit}
.app-shell{width:min(100%,620px);height:100dvh;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 10px);overflow:hidden}
.page{display:none;height:100%;min-height:0}.page.active{display:flex;flex-direction:column}
.brand{height:70px;flex:0 0 70px;display:flex;align-items:flex-end;gap:9px;margin:0 2px 10px}
.brand-logo{width:66px;height:66px;object-fit:contain;transform:scaleX(-1);filter:drop-shadow(0 5px 10px rgba(0,0,0,.42))}
.brand h1{font-size:18px;line-height:1;font-weight:500;letter-spacing:.035em;color:#dfb873;margin:0 0 10px -2px;white-space:nowrap}
.camera-frame{position:relative;flex:1 1 auto;min-height:0;width:100%;border:2px solid var(--border);border-radius:15px;overflow:hidden;background:#050605;box-shadow:0 8px 24px rgba(0,0,0,.32)}
.camera-frame video,.camera-frame canvas{width:100%;height:100%;display:block;object-fit:cover}
.camera-hint{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;line-height:1.55;color:#cdbb98;background:linear-gradient(145deg,#1d1e1a,#0c0d0c);pointer-events:none}
.controls{flex:0 0 auto}
.select-wrap{position:relative;display:block;margin-top:10px}
.select-wrap select{appearance:none;width:100%;height:52px;border:1.5px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#1a1b18,#11120f);color:#e5b664;padding:0 48px 0 20px;font-size:19px;outline:none}
.select-arrow{position:absolute;right:20px;top:50%;transform:translateY(-53%);color:#dfad59;font-size:22px;pointer-events:none}
.gold-btn{width:100%;height:52px;margin-top:9px;border:0;border-radius:11px;background:linear-gradient(180deg,#ecc883 0,#d09a49 100%);color:#15130f;font-size:20px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 15px rgba(0,0,0,.2)}
.gold-btn:active{transform:translateY(1px)}
.disabled-look,.gold-btn:disabled{background:linear-gradient(180deg,#d9c7a6,#c5ad83);color:rgba(255,250,235,.62);box-shadow:none;opacity:.72}
.preview-topbar{flex:0 0 auto;font-size:20px;color:#ddb36c;margin:2px 0 10px 2px}
.polaroid-wrap{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center}
#resultCanvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:7px;box-shadow:0 14px 38px rgba(0,0,0,.52)}
.preview-actions{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.preview-actions .gold-btn{margin:0}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.65);display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-card{width:min(100%,430px);border:1px solid var(--border);border-radius:18px;background:#1a1b18;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal-card h2{margin:0 0 10px;font-size:22px;color:#edc47e}.modal-card p{margin:0;color:#d8d0c1;line-height:1.65;white-space:pre-line}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.modal-btn{height:48px;border-radius:10px;border:1px solid rgba(215,168,87,.5);font-size:17px}
.modal-btn.secondary{background:#292a26;color:#e6ddcc}.modal-btn.confirm{background:#d3a253;color:#17130d;border-color:#d3a253}
@media (max-height:700px){
  .brand{height:56px;flex-basis:56px;margin-bottom:7px}.brand-logo{width:54px;height:54px}.brand h1{font-size:16.5px;margin-bottom:8px}
  .select-wrap{margin-top:7px}.select-wrap select,.gold-btn{height:46px}.gold-btn{margin-top:7px}
}
/* v1.6: the capture button must always remain gold and interactive. */
#captureBtn,#captureBtn:disabled{opacity:1!important;background:linear-gradient(180deg,#ecc883 0,#d09a49 100%)!important;color:#15130f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 15px rgba(0,0,0,.2)!important;pointer-events:auto!important}
#cameraFrame,#cameraHint{touch-action:manipulation}