*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#0D1117;color:#C9D1D9;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;display:flex;flex-direction:column;overflow:hidden}
button,select{font:inherit;color:inherit}
.bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#161B22;border-bottom:1px solid #30363D;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:#E6EDF3;margin-right:auto}
.brand b{color:#3FB950}
.brand a{display:flex}
.sv{color:#8B949E;font-size:12.5px;white-space:nowrap}
.sv.bad{color:#F85149;cursor:help}
.btn{background:#21262D;border:1px solid #30363D;border-radius:8px;padding:7px 12px;cursor:pointer;min-height:36px}
.btn:hover{border-color:#8B949E}
.btn.on{background:#1F6FEB;border-color:#1F6FEB;color:#fff}
.btn.go{background:#238636;border-color:#2EA043;color:#fff;font-weight:600}
.btn.danger{background:#DA3633;border-color:#F85149;color:#fff;font-weight:600}
select.btn{padding-right:6px;max-width:100%}
.acts{display:flex;align-items:center;gap:10px}
.main{flex:1;min-height:0;display:flex}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.ed{flex:1.1;border-right:1px solid #30363D}
.pv{flex:1;background:#0A0E13;align-items:center}
.tabs{display:flex;align-items:flex-end;background:#161B22;border-bottom:1px solid #30363D;overflow-x:auto;flex:none}
.tab{display:flex;align-items:center;gap:6px;padding:9px 14px;color:#8B949E;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px}
.tab.on{color:#E6EDF3;border-bottom-color:#3FB950;background:#0D1117}
.tab i{font-style:normal;color:#8B949E;padding:0 2px}
.tab i:hover{color:#F85149}
.tab.add{color:#3FB950}
.code{position:relative;flex:1;min-height:0;display:flex;background:#0D1117}
.gut{flex:none;overflow:hidden;padding:12px 8px 32px 10px;text-align:right;color:#6E7681;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:20px;user-select:none;background:#0D1117;border-right:1px solid #21262D}
.gut div.err{color:#fff;background:#DA3633;border-radius:3px}
.gut div.warn{color:#0D1117;background:#D29922;border-radius:3px}
.edw{position:relative;flex:1;min-width:0;min-height:0}
.hl,textarea{position:absolute;inset:0;margin:0;border:0;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:20px;white-space:pre;tab-size:4;letter-spacing:0;word-spacing:0;font-variant-ligatures:none}
.hl{overflow:hidden;pointer-events:none;padding-bottom:32px;color:#C9D1D9;background:#0D1117}
.hl code{font:inherit}
textarea{width:100%;height:100%;resize:none;outline:0;overflow:auto;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#E6EDF3}
textarea::selection{background:rgba(56,139,253,.4);-webkit-text-fill-color:transparent}
.hl .c{color:#6E7681;font-style:italic}
.hl .s{color:#A5D6FF}
.hl .n{color:#79C0FF}
.hl .kw{color:#FF7B72}
.hl .op{color:#FF7B72}
.hl .v{color:#56D4DD}
.hl .e{color:#8B949E}
.hl .p{color:#8B949E}
.hl .tn{color:#7EE787}
.hl .an{color:#D2A8FF}
.hl .a{color:#FF7B72}
.hl .k{color:#79C0FF}
.hl .b{color:#FF7B72}
.hl .cl{color:#7EE787}
.hl .id{color:#79C0FF}
.hl .ps{color:#D2A8FF}
.hl .tg{color:#FFA657}
.hl .f{color:#D2A8FF}
.hl .pv{color:#79C0FF}
.probs{flex:none;max-height:32%;overflow:auto;background:#161B22;border-top:1px solid #30363D;font-size:13.5px}
.probs .h{padding:6px 12px;color:#8B949E;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;background:#161B22}
.pr{display:flex;gap:10px;padding:7px 12px;cursor:pointer;border-top:1px solid #21262D}
.pr:hover{background:#1C2128}
.pr b{flex:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;color:#F85149}
.pr.w b{color:#D29922}
.pr small{display:block;color:#8B949E;margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}
.ok{padding:8px 12px;color:#3FB950}
.pvh{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;color:#8B949E;font-size:13px;flex:none}
.stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:12px}
.phone{height:100%;max-height:720px;aspect-ratio:9/17;max-width:100%;border:8px solid #2A313C;border-radius:30px;background:#fff;overflow:hidden;box-shadow:0 20px 60px -20px rgba(31,111,235,.4)}
.phone iframe{width:100%;height:100%;border:0;background:#fff;display:block}
.eng{color:#D29922}
.mtabs{display:none}
.ov{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(1,4,9,.72)}
.ov[hidden]{display:none}
.dlg{width:100%;max-width:400px;background:#161B22;border:1px solid #30363D;border-radius:12px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.dlg h2{margin:0 0 6px;font-size:17px;color:#E6EDF3}
.dlg p{margin:0 0 12px;color:#8B949E;line-height:1.45;white-space:pre-wrap}
.dlg input{width:100%;background:#0D1117;border:1px solid #30363D;border-radius:8px;padding:9px 10px;color:#E6EDF3;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;outline:0}
.dlg input:focus{border-color:#1F6FEB}
.derr{color:#F85149;font-size:13px;min-height:18px;margin-top:6px}
.dact{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#21262D;border:1px solid #30363D;color:#E6EDF3;padding:8px 14px;border-radius:8px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1}
@media(max-width:820px){
  .main{flex-direction:column}
  .ed,.pv{flex:1;border:0}
  .mtabs{display:flex}
  body[data-v=code] .pv{display:none}
  body[data-v=view] .ed{display:none}
  .phone{max-height:none}
  .bar{gap:8px 10px}
  .brand{flex:1 1 auto;min-width:0}
  .acts{flex:1 1 100%;gap:8px}
  .acts .btn{flex:1 1 0;min-width:0;padding:7px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acts select.btn{flex:1.4 1 0}
}