:root{--bg:#f4f1ec;--card:#fff;--ink:#2b2b2b;--sub:#8a857c;--accent:#2f7d6b;--accent2:#c9743a;--line:#e3ded5;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;font-size:16px;overscroll-behavior:none}
[hidden]{display:none!important}
.screen{display:none;min-height:100dvh;padding:var(--sat) var(--sar) var(--sab) var(--sal)}
.screen.on{display:block}
.pad{padding:8px 14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint{font-size:12px;color:var(--sub)}
.err{color:#c0392b;min-height:1.4em}

input,textarea,select{font:inherit;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);-webkit-appearance:none}
input[type=range]{padding:0;border:0;background:none;-webkit-appearance:auto;appearance:auto}
input[type=checkbox]{width:auto}
.chk{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}

.btn{font:inherit;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.ghost{background:transparent;border-color:transparent;color:var(--accent);padding:10px 8px}
.btn.danger{color:#c0392b}
.btn.big{padding:14px 20px;font-size:17px}
.btn.small{padding:7px 12px;font-size:14px}
.btn.light{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.btn.ghost.light{background:transparent;border-color:transparent}
.btn:disabled{opacity:.4}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.bar h1{flex:1;margin:0;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.login{max-width:340px;margin:20vh auto 0;display:grid;gap:14px;padding:0 20px;text-align:center}
.login h1{font-size:24px;color:var(--accent)}

.list{padding:0 14px 24px;display:grid;gap:8px}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer}
.item .nm{font-weight:600}
.item .sb{font-size:12px;color:var(--sub)}
.item .grow{flex:1;min-width:0}
.item.off{opacity:.5}
.empty{color:var(--sub);text-align:center;padding:30px}

.gallery{padding:8px 12px 150px}
.day{margin:14px 0 4px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.day .chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;background:#e7f1ee;color:var(--accent);border:0;border-radius:14px;padding:4px 10px;font-weight:600}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.th{position:relative;aspect-ratio:3/4;background:#ddd;border-radius:8px;overflow:hidden}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th .tag{position:absolute;left:4px;bottom:4px;font-size:11px;background:#000a;color:#fff;border-radius:6px;padding:1px 6px}
.th .tag.a{background:var(--accent2)}
.th.selB,.th.selA{outline:3px solid var(--accent2);outline-offset:-3px}
.th.selB{outline-color:#3b6fd6}

.tray{position:fixed;left:0;right:0;bottom:0;padding:8px 12px calc(8px + var(--sab));background:#fffe;backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;z-index:6}
.tray .slot{width:56px;height:74px;border:2px dashed var(--line);border-radius:8px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;font-size:10px;color:var(--sub);background:#fff}
.tray .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tray .slot span{position:relative;background:#fffc;padding:0 4px;border-radius:4px}
.tray .btn.primary{flex:1;padding:14px}

/* camera */
#s-camera{background:#000;color:#fff;height:100dvh;overflow:hidden}
#s-camera.on{display:flex;flex-direction:column}
.stage{position:relative;flex:1;min-height:0;background:#000;overflow:hidden}
.stage video,.stage #ghost,.stage #frozen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage #ghost{pointer-events:none;opacity:.4}
.stage #frozen{background:#000}
.grid{position:absolute;inset:0;pointer-events:none;display:none;
  background:linear-gradient(#fff6,#fff6) 50%/1px 100% no-repeat,linear-gradient(#fff6,#fff6) 0 33.3%/100% 1px no-repeat,linear-gradient(#fff6,#fff6) 0 66.6%/100% 1px no-repeat}
.grid.on{display:block}
.camMsg{position:absolute;inset:auto 0 50% 0;text-align:center;padding:0 20px;color:#ddd}
.ctrl{padding:6px 12px calc(10px + var(--sab));background:#111;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ctrl>*{min-width:0}
.ctrlTop{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#ccc}
.seg{display:flex;border:1px solid #fff4;border-radius:10px;overflow:hidden}
.seg button{flex:1;font:inherit;font-size:15px;padding:9px 0;background:transparent;color:#fff;border:0;border-right:1px solid #fff3}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);font-weight:700}
#phaseSeg button[data-phase=after].on{background:var(--accent2)}
.refRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.refRow #btnRef{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.refRow input[type=range]{flex:1;min-width:80px}
.shutterRow{display:flex;align-items:center;justify-content:space-around;gap:10px}
.shutterRow .btn.big{flex:1}
#shutter{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:#ffffff33;box-shadow:inset 0 0 0 4px #111;padding:0}
#shutter:active{background:#fff}
@media (orientation:landscape){
  #s-camera.on{flex-direction:row}
  .ctrl{width:min(300px,38vw);overflow-y:auto;padding:calc(6px + var(--sat)) calc(12px + var(--sar)) calc(10px + var(--sab)) 12px;align-content:start}
  .shutterRow{margin-top:6px}
  .gallery{padding-bottom:110px}
}

/* modal */
.modal{position:fixed;inset:0;z-index:20;background:#000a;display:flex;align-items:center;justify-content:center;padding:var(--sat) var(--sar) var(--sab) var(--sal)}
.sheet{background:var(--card);border-radius:14px;padding:16px;width:min(560px,94vw);max-height:92dvh;overflow:auto;display:grid;gap:10px}
.sheet h2{margin:0;font-size:17px}
.sheet label{font-size:13px;color:var(--sub);display:grid;gap:4px}
.sheet .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.viewer img.full{width:100%;max-height:62dvh;object-fit:contain;background:#000;border-radius:8px}
.result{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.result img.ba{max-width:100%;max-height:60dvh;border-radius:8px;box-shadow:0 2px 10px #0004}
.result .qr{text-align:center;font-size:13px;color:var(--sub)}
.result .qr canvas,.result .qr img{width:190px;height:190px;background:#fff;padding:8px;border-radius:8px}
@media (orientation:landscape){.result img.ba{max-height:78dvh;max-width:64vw}.sheet{width:min(1000px,96vw)}}
.pickGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}

.toast{position:fixed;left:50%;bottom:calc(90px + var(--sab));transform:translateX(-50%);background:#222e;color:#fff;padding:10px 18px;border-radius:20px;z-index:40;font-size:14px}
.busy{position:fixed;inset:0;background:#0006;z-index:50;display:flex;align-items:center;justify-content:center;color:#fff}
.busy div{background:#222;padding:14px 26px;border-radius:12px}

.promoBar{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--sub)}
.promoBar.ng{background:#fbe9e7;color:#a33}
.promoBar .btn{margin-left:auto}
.ngTag{font-size:11px;background:#fbe9e7;color:#a33;border-radius:8px;padding:1px 7px;margin-left:6px;white-space:nowrap}
#camPromo.ng{background:#a33;border-color:#a33}
.warn{color:#a33;font-size:13px;text-align:center}