:root{
  --black:#0a0c10; --ink:#11151c; --ink2:#1a2029; --line:#262d38;
  --blue:#2f7bff; --blue2:#1f5fd6; --blue-soft:#e8f0ff;
  --red:#ef3e46; --red-soft:#fdecec;
  --white:#ffffff; --paper:#f5f7fa; --text:#0f141b; --muted:#5d6878; --dim:#8b95a5;
  --green:#22c55e; --amber:#f5a524;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--text);font:15px/1.55 var(--sans);min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;
  background:#1e4fd0 linear-gradient(160deg,#0f2357 0%,#1d4ed8 40%,#3b82f6 72%,#9cc3ff 100%) fixed}
/* soft drifting clouds behind everything */
body::before,body::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(60px)}
body::before{background:
  radial-gradient(38% 30% at 18% 22%,rgba(255,255,255,.28),transparent 70%),
  radial-gradient(30% 26% at 82% 18%,rgba(200,225,255,.35),transparent 70%),
  radial-gradient(45% 35% at 70% 78%,rgba(255,255,255,.30),transparent 70%),
  radial-gradient(35% 28% at 25% 85%,rgba(190,215,255,.30),transparent 70%);
  animation:drift 40s ease-in-out infinite alternate}
body::after{background:
  radial-gradient(28% 22% at 55% 40%,rgba(255,255,255,.22),transparent 70%),
  radial-gradient(32% 24% at 10% 55%,rgba(220,235,255,.25),transparent 70%),
  radial-gradient(26% 20% at 92% 60%,rgba(239,62,70,.08),transparent 70%);
  animation:drift 60s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-3%,2%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
a{color:var(--blue)}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.accent{color:var(--blue)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:1px solid rgba(120,160,255,.15);background:rgba(5,8,18,.6);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.prompt{font-family:var(--mono);color:var(--blue);background:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.prompt::after{content:"";display:inline-block;width:7px;height:13px;background:var(--red);margin-left:3px;vertical-align:-1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ver{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.topbar-right{display:flex;align-items:center;gap:10px;color:#cfd6e0;font-size:13px}
.topbar-right a{color:#cfd6e0;text-decoration:none}
.pill{font:12px var(--mono);border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:#cfd6e0;display:inline-flex;align-items:center;gap:6px}
.pill-live i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:28px 20px;flex:1}
.grid-2{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:start}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.panel{border-radius:var(--r);padding:26px}
.panel.dark{background:rgba(10,18,40,.80);border:1px solid rgba(120,160,255,.18);color:#dbe2ec;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel.light{background:var(--white);box-shadow:0 20px 60px rgba(0,0,0,.45);border-top:4px solid var(--blue)}
.term-head{display:flex;align-items:center;gap:6px;margin:-8px 0 14px}
.dot{width:11px;height:11px;border-radius:50%}.dot.r{background:var(--red)}.dot.y{background:#f5a524}.dot.b{background:var(--blue)}
.term-head .mono{margin-left:8px;font-size:12px}
h1{color:#fff;font-size:28px;line-height:1.2;margin:4px 0 10px;letter-spacing:-.02em}
h2{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}
.lead{color:#b8c2d0}
.muted{color:var(--muted);margin:0 0 18px}
.steps{list-style:none;padding:0;margin:18px 0}
.steps li{display:flex;gap:14px;padding:12px 0;border-top:1px dashed var(--line)}
.steps .n{font-family:var(--mono);color:var(--blue);font-weight:600;min-width:26px}
.steps a{color:#7fb0ff}
.code{font-family:var(--mono);font-size:12.5px;background:var(--ink2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:#fff;white-space:nowrap}
.term{background:var(--black);border:1px solid var(--line);border-radius:8px;padding:14px;margin:8px 0 0;color:#cfd6e0;font-size:13px;overflow:auto}
.ok{color:var(--green)}
form label{display:block;font-weight:600;font-size:13.5px;margin:0 0 14px}
form label em{color:var(--red);font-style:normal}
input[type=text],input[type=email],input[type=password],input[type=search],select{width:100%;margin-top:6px;padding:11px 12px;border:1.5px solid #d6dce5;border-radius:9px;font:15px var(--sans);color:var(--text);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,123,255,.15)}
input.bad{border-color:var(--red);box-shadow:0 0 0 4px rgba(239,62,70,.12)}
input.mono{font-family:var(--mono);letter-spacing:.04em}
.pw{position:relative}
.pw .eye{position:absolute;right:8px;top:50%;transform:translateY(-35%);border:0;background:var(--paper);color:var(--muted);font:12px var(--mono);padding:4px 8px;border-radius:6px;cursor:pointer}
.check{display:flex!important;gap:10px;font-weight:500!important;align-items:flex-start;color:var(--muted)}
.check input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px}
.err{display:block;color:var(--red);font-weight:500;font-size:12.5px;min-height:0;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:12px 18px;font:600 15px var(--sans);cursor:pointer;text-decoration:none;transition:transform .05s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--black);color:#fff;width:100%;margin-top:6px}
.btn.primary:hover{background:var(--blue2)}
.btn.danger{background:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid #d6dce5}
.btn.sm{padding:7px 12px;font-size:13px}
.btn[disabled]{opacity:.7;cursor:wait}
.spin{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.busy .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.tiny{font-size:12.5px;color:var(--muted);text-align:center;margin:8px 0 0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.foot{text-align:center;color:rgba(255,255,255,.85);font-size:12px;padding:18px}

/* ---------- video ---------- */
.video{margin:18px 0 6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--black)}
.video-head{font-size:12.5px;color:#dbe2ec;padding:9px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.play{color:#fff;background:var(--red);border-radius:5px;padding:0 6px;font-size:11px}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-link{display:block;font-size:12px;padding:8px 12px;color:#7fb0ff!important;text-decoration:none}

/* ---------- admin ---------- */
.admin-wrap{max-width:none;padding:22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;color:#dbe2ec}
.tile b{display:block;font:600 26px var(--mono);color:#fff}
.tile span{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.tile.blue{border-top:3px solid var(--blue)}.tile.red{border-top:3px solid var(--red)}.tile.green{border-top:3px solid var(--green)}.tile.white{border-top:3px solid #fff}
.sheet-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border-bottom:1px solid #e3e8ef;background:var(--paper)}
.toolbar input,.toolbar select{margin:0;width:auto;padding:8px 10px;font-size:14px}
.toolbar input[type=search]{min-width:240px;flex:1}
.toolbar .sp{flex:1}
.sheet-scroll{overflow:auto;max-height:calc(100vh - 300px)}
table.sheet{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.sheet th,.sheet td{border-right:1px solid #e3e8ef;border-bottom:1px solid #e3e8ef;padding:7px 10px;white-space:nowrap;text-align:left}
.sheet thead th{position:sticky;top:0;background:var(--black);color:#fff;font:600 12px var(--mono);cursor:pointer;user-select:none;z-index:2}
.sheet thead th.sorted::after{content:" ▾";color:var(--blue)}
.sheet thead th.sorted.asc::after{content:" ▴"}
.sheet thead tr.letters th{background:var(--ink2);color:var(--dim);font-weight:400;text-align:center;padding:3px;cursor:default}
.sheet td.rn,.sheet th.rn{background:var(--paper);color:var(--dim);text-align:right;font-family:var(--mono);position:sticky;left:0;z-index:1}
.sheet thead th.rn{background:var(--ink2);z-index:3}
.sheet tbody tr:hover td{background:#f2f6ff}
.sheet td.mono{font-family:var(--mono)}
.secret{cursor:pointer;border-radius:4px;padding:1px 4px;background:var(--paper)}
.secret:hover{background:var(--blue-soft)}
.tag{display:inline-block;font:600 11px var(--mono);border-radius:999px;padding:2px 8px}
.tag.v{background:#dcfce7;color:#166534}.tag.u{background:#fef3c7;color:#92400e}.tag.x{background:var(--red-soft);color:#b91c1c}.tag.o{background:var(--blue-soft);color:var(--blue2)}
.del{background:none;border:0;color:var(--red);cursor:pointer;font:12px var(--mono)}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:10px 12px;background:var(--paper);font-size:13px;color:var(--muted)}
.login{max-width:400px;margin:8vh auto;padding:0 16px}
.login .panel.light{padding:28px}
.alert{background:var(--red-soft);color:#b91c1c;border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:14px}
.info{background:var(--blue-soft);color:var(--blue2);border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:13.5px;word-break:break-all}
.copyme{font-family:var(--mono);background:#fff;padding:2px 6px;border-radius:5px}

/* ---------- phones ---------- */
.grid-2>*{min-width:0}
.brand-name{white-space:nowrap}
.prompt{white-space:nowrap}
@media (max-width:600px){
  .topbar{padding:12px 16px}
  .ver,.topbar .pill-live{display:none}
  .wrap{padding:16px}
  .panel{padding:20px}
  h1{font-size:24px}
  .code{white-space:normal;word-break:break-word}
  .admin-wrap{padding:12px}
  .toolbar input[type=search]{min-width:0;width:100%}
}

/* ---------- v1.2 user page ---------- */
.steps li{align-items:flex-start}
.steps .n{min-width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.steps p{margin:4px 0 0;color:#c3ccd9}
.safe{background:rgba(5,8,18,.6);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;display:grid;gap:6px;color:#cfd6e0}
.lead{font-size:16px}
.btn.jump{display:none;background:rgba(47,123,255,.18);color:#fff;border:1px solid rgba(47,123,255,.6);margin:4px 0 6px;font-size:14px;padding:10px 14px}
.hint{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:5px}
.video-head{font-family:var(--sans);font-size:14px;font-weight:600}
.video-link{font-family:var(--sans)}
#form{scroll-margin-top:80px}

/* result boxes: bright and colour-coded so they stand out */
.note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;border-radius:12px;padding:16px;border:2px solid;font-size:15px;line-height:1.5;animation:pop .25s ease-out}
.note[hidden]{display:none}
.note-title{display:block;font-size:16.5px;margin-bottom:2px}
.note-text{margin:0}
.note-icon{flex:0 0 32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff}
.note-ok{background:#e8f9ee;border-color:#22c55e;color:#14532d}.note-ok .note-icon{background:#16a34a}
.note-info{background:#e8f0ff;border-color:var(--blue);color:#0f2f73}.note-info .note-icon{background:var(--blue);font-family:Georgia,serif;font-style:italic}
.note-warn{background:#fff6e0;border-color:#f5a524;color:#6b4300}.note-warn .note-icon{background:#e08a00}
.note-bad{background:#fdecec;border-color:var(--red);color:#7f1d1d}.note-bad .note-icon{background:var(--red)}
.note-wait{background:#eef3ff;border-color:#b9cdfb;color:#0f2f73}
.note-wait .note-icon{background:transparent;border:3px solid #b9cdfb;border-top-color:var(--blue);animation:sp .8s linear infinite}
.note .row{margin-top:12px}
@keyframes pop{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}

/* inputs: 16px stops phones zooming in */
input[type=text],input[type=email],input[type=password]{font-size:16px;padding:12px 13px}
.btn.primary{padding:14px 18px;font-size:16px}

/* tablets */
@media (max-width:1000px){
  .grid-2{grid-template-columns:1fr;max-width:720px;margin:0 auto}
  .btn.jump{display:inline-flex}
}
/* phones */
@media (max-width:600px){
  .panel{padding:18px;border-radius:12px}
  .lead{font-size:15px}
  .note{padding:14px;gap:10px}
  .note .row .btn{flex:1 1 100%}
  .btn.jump{width:100%}
}