:root{
  --bg:#f2f2f7; --card:#ffffff; --label:#000; --label2:rgba(60,60,67,.6);
  --fill:rgba(120,120,128,.16); --fill2:rgba(120,120,128,.24); --sep:rgba(60,60,67,.29);
  --blue:#007aff; --green:#34c759; --orange:#ff9500; --red:#ff3b30;
  --bar:rgba(249,249,249,.82); --seg-sel:#fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000; --card:#1c1c1e; --label:#fff; --label2:rgba(235,235,245,.6);
    --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.36); --sep:rgba(84,84,88,.6);
    --blue:#0a84ff; --green:#30d158; --orange:#ff9f0a; --red:#ff453a;
    --bar:rgba(22,22,23,.82); --seg-sel:#636366;
  }
}
:root[data-theme="dark"]{
  --bg:#000; --card:#1c1c1e; --label:#fff; --label2:rgba(235,235,245,.6);
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.36); --sep:rgba(84,84,88,.6);
  --blue:#0a84ff; --green:#30d158; --orange:#ff9f0a; --red:#ff453a;
  --bar:rgba(22,22,23,.82); --seg-sel:#636366;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

header{padding:calc(env(safe-area-inset-top) + 8px) 16px 10px;background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);z-index:2}
.nav{display:flex;align-items:center;justify-content:space-between;height:32px}
.nav h1{font-size:17px;font-weight:600;margin:0;letter-spacing:-.4px}
.navbtn{background:none;border:0;color:var(--blue);font:inherit;font-size:17px;padding:4px 0;min-width:60px;cursor:pointer}
.navbtn.left{text-align:left}.navbtn.right{text-align:right}
.navbtn:disabled{opacity:0;pointer-events:none}

.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;margin-top:8px;position:relative}
.seg button{flex:1;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--label);
  padding:6px 0;border-radius:7px;cursor:pointer;position:relative;z-index:1}
.seg button.on{background:var(--seg-sel);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
.seg button:disabled{opacity:.3;cursor:default}
.seg.hidden{display:none}

#stage{flex:1;position:relative;background:#000;overflow:hidden;touch-action:none}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#loupe{position:absolute;width:160px;height:160px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 8px 28px rgba(0,0,0,.45);display:none;z-index:3;background:#000}

#start{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:6px}
#start .icon{width:84px;height:84px;border-radius:20px;background:linear-gradient(160deg,#c2338f,#7a1d6b);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 10px 30px rgba(160,30,120,.3)}
#start h2{font-size:28px;font-weight:700;letter-spacing:-.6px;margin:0}
#start p{font-size:15px;color:var(--label2);margin:4px 0 26px;max-width:300px;line-height:1.35}
.big{width:100%;max-width:340px;height:50px;border-radius:12px;border:0;font:inherit;font-size:17px;font-weight:600;cursor:pointer;margin-top:10px}
.big.primary{background:var(--blue);color:#fff}
.big.secondary{background:var(--fill);color:var(--blue)}
.big:active,.tb:active{opacity:.6}

#working{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:4}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

footer{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);z-index:2}
footer.hidden{display:none}
#hint{font-size:13px;color:var(--label2);text-align:center;min-height:18px;margin-bottom:10px;line-height:1.35}
.tools{display:flex;gap:10px;align-items:center}
.tb{height:44px;border-radius:12px;border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer;padding:0 14px;
  background:var(--fill);color:var(--blue);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.tb.primary{background:var(--blue);color:#fff;flex:1}
.tb.danger{color:var(--red)}
.tb svg{width:20px;height:20px}
.tb[hidden]{display:none}

#sheetWrap{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-end;justify-content:center;z-index:10}
#sheetWrap.open{display:flex}
.sheet{width:100%;max-width:520px;background:var(--bg);border-radius:14px 14px 0 0;
  padding:0 16px calc(env(safe-area-inset-bottom) + 20px);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .nav{height:56px}
.group{background:var(--card);border-radius:10px;overflow:hidden;margin-top:6px}
.row{display:flex;align-items:center;min-height:44px;padding:0 16px;gap:12px;position:relative}
.row + .row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.row label{width:84px;font-size:17px;flex:none}
.row input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:17px;color:var(--label);outline:none;padding:11px 0;
  -webkit-user-select:text;user-select:text}
.row input::placeholder{color:var(--label2)}
.foot{font-size:13px;color:var(--label2);padding:8px 16px 0}

#preview{position:fixed;inset:0;background:var(--bg);z-index:11;display:none;flex-direction:column}
#preview.open{display:flex}
#preview header{padding-bottom:6px}
#preview .imgwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#000}
#preview img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;border-radius:4px}
#preview footer{display:flex;flex-direction:column;gap:10px}
#preview .hint{font-size:13px;color:var(--label2);text-align:center;line-height:1.35}
.navbtn.strong{font-weight:600}
.navspacer{min-width:60px}
.tb.grow{flex:1}