:root{--navy:#001a33;--navy2:#0a2a4a;--ink:#fff;--muted:rgba(214,232,255,.78);--cyan:#3fd6ff;--orange:#fc8600;--line:rgba(80,190,255,.35);--err:#ff9a9a;--ok:#5fe08a;
  --f:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#05345c,#001a33 40%,#00122a) fixed;color:var(--ink);font:400 16px/1.5 var(--f)}
.wrap{max-width:640px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 20px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px));display:grid;gap:18px}
.brand{margin:0;color:var(--cyan);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
h1{margin:4px 0 6px;font-size:26px;line-height:1.2;text-wrap:balance}
h2{margin:0 0 8px;font-size:20px}
.lead,.note,.foot{color:var(--muted);margin:0}
.note{font-size:14px}
.tabs{display:flex;gap:8px}
.tabs button,button{font:600 16px/1.2 var(--f);border-radius:12px;border:1px solid var(--line);padding:12px 16px;cursor:pointer;color:var(--ink);background:var(--navy2)}
.tabs button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}
button[type="submit"],#copyCode{background:var(--orange);border-color:var(--orange)}
button.ghost{background:transparent}
button:disabled{opacity:.55;cursor:progress}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
form{display:grid;gap:14px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:14px;margin:0;display:grid;gap:12px;background:rgba(0,18,42,.5)}
legend{padding:0 6px;color:var(--cyan);font-weight:600}
label{display:grid;gap:6px;font-weight:500}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
label.check input{width:22px;height:22px;flex:none;accent-color:var(--orange);margin-top:2px}
input,textarea{width:100%;font:400 16px/1.4 var(--f);color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
textarea{min-height:96px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.status{margin:0;min-height:1.4em}
.status.err{color:var(--err)}
.status.ok{color:var(--ok)}
.card{border:1px solid var(--line);border-radius:14px;padding:16px;background:rgba(0,18,42,.6);display:grid;gap:10px}
.card p{margin:0}
.code{font:700 20px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--cyan);word-break:break-all;user-select:all}
.warn{border-left:4px solid var(--orange);padding-left:10px}
.timeline{margin:0;padding-left:20px;display:grid;gap:8px}
.timeline span{color:var(--muted)}
.pill{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:2px 10px;font-weight:600}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.foot{font-size:13px}