[hidden]{display:none!important}
@font-face{font-family:"NSM";src:url(fonts/NotoSansMyanmar-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-Medium.ttf);font-weight:500;font-display:swap}
:root{--bg:#01123C;--bg2:#021B48;--panel:#06205A;--line:#16337a;--blue:#0C69F8;--sky:#29AFFF;--gold:#F5B83D;--text:#F3F4F7;--muted:#9fb0d6;--red:#ff6b6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 "Poppins","NSM",system-ui,sans-serif}
body{background:radial-gradient(120% 60% at 50% -10%,#0a2a7a 0%,var(--bg) 60%) fixed}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(1,18,60,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}.brand img{width:36px;height:36px;border-radius:9px}
.brand b{display:block;font-size:17px;letter-spacing:.5px}.brand small{display:block;font-size:10px;color:var(--gold);letter-spacing:2px;margin-top:-4px}
main{max-width:640px;margin:0 auto;padding:14px 14px 40px}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
h2{margin:0 0 12px;font-size:17px;display:flex;align-items:center;gap:8px}
.num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#01123C;font-size:14px}
label{display:block;margin:10px 0;color:var(--muted);font-size:13px}
label small{color:#7f91bd}
input,select,textarea{width:100%;margin-top:4px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:#011033;color:var(--text);font:inherit;font-size:15px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky);border-color:transparent}
button,.btnlink,a.primary{font:inherit;border:0;border-radius:12px;padding:11px 16px;cursor:pointer;color:var(--text);background:#0e2c6e;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:disabled{opacity:.5}
.primary,a.primary{background:linear-gradient(180deg,#ffc95c,var(--gold));color:#1b1300!important;font-weight:700;width:100%}
.primary.big{padding:15px;font-size:17px}
.blue{background:var(--blue);width:100%}
.ghost{background:transparent;border:1px solid var(--line)}
.sm{padding:8px 12px;font-size:13px;width:auto}
.btnlink{background:#0e2c6e;border:1px solid var(--line)}
.icon{background:transparent;padding:6px;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted);margin:8px 0}
.note a{color:var(--sky)}
.muted{color:var(--muted);font-size:13px}
.err{color:var(--red);font-size:13px;min-height:1em}
.pick{display:flex;align-items:center;justify-content:center;min-height:86px;border:2px dashed #2b55b5;border-radius:16px;color:var(--text);font-size:16px;cursor:pointer;background:rgba(12,105,248,.08);text-align:center;padding:10px}
.pick.has{border-style:solid;border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:#011033;border:1px solid var(--line);border-radius:12px;padding:3px;margin:8px 0}
.seg button{flex:1;background:transparent;padding:9px 6px;font-size:13.5px}
.seg button.on{background:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chips button{padding:8px 12px;font-size:13px;background:#0b265f;border:1px solid var(--line)}
.chips button.on{background:var(--gold);color:#1b1300;border-color:var(--gold);font-weight:700}
.chips button small{display:block;font-size:10.5px;opacity:.8;font-weight:500}
.lbl{margin-top:14px;font-size:13px;color:var(--muted)}
.rng{display:grid;grid-template-columns:88px 1fr 48px;align-items:center;gap:8px;margin:6px 0;font-size:13px;color:var(--muted)}
.rng input{padding:0;margin:0;accent-color:var(--gold);background:transparent;border:0}
.rng b{color:var(--text);font-weight:500;text-align:right}
.tog{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;margin:8px 0}
.tog input{width:20px;height:20px;margin:0;accent-color:var(--gold)}
.steps{padding-left:20px;margin:8px 0}.steps li{margin:10px 0;color:var(--muted);font-size:13px}
.steps li .sm{margin:6px 6px 0 0}
.log{background:#010b26;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:12px;color:#b8c6ea;max-height:160px;overflow:auto;white-space:pre-wrap;margin-top:10px}
.segItem{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0;background:#011033}
.segHead{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--sky)}
.segHead button{padding:2px 8px;background:transparent;color:var(--muted);font-size:13px}
.segItem textarea{border:0;background:transparent;padding:4px 0;margin:0;min-height:3.2em}
.stageWrap{position:relative;margin-top:12px;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
#stage{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;margin:0 auto}
#stageEmpty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:13px;background:#020d2b}
.bar{height:10px;border-radius:6px;background:#011033;overflow:hidden;margin:12px 0 6px;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--gold));transition:width .3s}
#result video{width:100%;border-radius:14px;margin-top:12px;background:#000;max-height:70vh}
.acts{display:flex;gap:10px;margin-top:10px}.acts>*{flex:1}
.hiddenVideo{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:.01;pointer-events:none}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:#0e2c6e;border:1px solid var(--gold);padding:10px 16px;border-radius:12px;font-size:14px;transition:transform .25s;z-index:9;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
.foot{text-align:center;color:#5a6f9f;font-size:11px}

.top{gap:6px}.top .brand{flex:1;cursor:pointer}
#backBtn{color:var(--text);padding:4px 2px 4px 0}
.stepnav{position:sticky;top:57px;z-index:4;display:flex;gap:6px;padding:8px 14px;background:rgba(1,18,60,.95);border-bottom:1px solid var(--line);max-width:640px;margin:0 auto}
.stepnav button{flex:1;padding:6px 4px;font-size:12px;background:#0b265f;border:1px solid var(--line);flex-direction:column;gap:0;line-height:1.3}
.stepnav button b{display:block;font-size:13px}
.stepnav button.on{background:var(--gold);color:#1b1300;border-color:var(--gold)}
.stepnav button.done:not(.on){border-color:var(--sky)}
.pager{display:flex;gap:10px;margin:4px 0 14px}.pager button{flex:1}
.proj{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#011033;border-radius:14px;padding:10px 12px;margin-top:10px}
.proj .pi{flex:1;min-width:0}.proj b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj small{color:var(--muted);font-size:12px}
.proj button{padding:6px 10px;background:transparent;color:var(--muted)}
.proj .open{background:var(--blue);color:#fff}
#viewer,#viewer2{width:100%;border-radius:12px;margin-top:10px;background:#000;max-height:50vh}
details summary{cursor:pointer;color:var(--sky);font-size:13px;margin:6px 0}
.warnbox{background:rgba(245,184,61,.12);border:1px solid var(--gold);border-radius:12px;padding:10px;font-size:13px;margin-top:10px}
.segHead .tbtn{color:var(--sky);background:transparent;padding:2px 0;font-size:12px}

.top{padding-top:max(10px,env(safe-area-inset-top))}
#iosHint{margin:0 0 12px}