:root{
  --blue:#28A0D8; --blue-deep:#1B7FB0; --navy:#0E2A42;
  --orange:#F07830; --orange-deep:#D9631C;
  --ink:#303030; --muted:#8595a6;
  --bg0:#0b1622; --bg1:#0f2033; --line:rgba(255,255,255,.08);
  --card:#ffffff; --field:#f4f7fa; --field-bd:#dce4ec;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:#e9f0f7; background:var(--bg0);
  position:relative; overflow-x:hidden;
}
.bg-layer{position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(1200px 800px at 82% -10%, rgba(40,160,216,.18), transparent 60%),
    radial-gradient(1000px 700px at -5% 110%, rgba(240,120,48,.14), transparent 55%),
    linear-gradient(160deg,#0b1622 0%,#0d1c2c 45%,#0b1622 100%);}
.bg-noise{position:fixed;inset:0;z-index:-2;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.bg-mark{position:fixed;right:-120px;top:60px;z-index:-1;width:640px;opacity:.05;
  transform:rotate(-8deg);pointer-events:none;filter:grayscale(.2)}
.bg-grid{position:fixed;inset:0;z-index:-2;opacity:.35;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 75%)}

header.top{display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;max-width:1400px;margin:0 auto;gap:20px;flex-wrap:wrap}
header.top .brand{display:flex;align-items:center;gap:14px}
header.top img.logo{height:38px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
header.top .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line);padding-left:14px}
header.top .pill{font-size:12px;color:#bcd; background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}

/* nav tabs */
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:4px}
.tabs a{font-size:13px;font-weight:700;color:#aebfce;text-decoration:none;padding:8px 16px;border-radius:9px;transition:.15s;white-space:nowrap}
.tabs a:hover{color:#fff;background:rgba(255,255,255,.05)}
.tabs a.active{color:#fff;background:linear-gradient(100deg,var(--blue),var(--blue-deep));box-shadow:0 8px 18px -10px rgba(40,160,216,.7)}

.wrap{max-width:1400px;margin:0 auto;padding:8px 40px 60px;
  display:grid;grid-template-columns:minmax(420px,520px) 1fr;gap:34px;align-items:start}
@media (max-width:1040px){.wrap{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(8px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.panel .hd{padding:22px 26px 6px}
.panel h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.panel .sub{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}

form{padding:14px 26px 26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:0.7fr 1fr 1fr;gap:14px}
.fld{margin-top:14px;display:flex;flex-direction:column;gap:6px}
label{font-size:12.5px;font-weight:600;color:#c5d4e2;letter-spacing:.01em}
label .req{color:var(--orange)}
input,select,textarea{width:100%;background:rgba(255,255,255,.9);color:#12212f;
  border:1px solid var(--field-bd);border-radius:11px;padding:11px 13px;font:inherit;font-size:14px;
  outline:none;transition:.15s}
input::placeholder{color:#9fb0c0}
input:focus,select:focus,textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(40,160,216,.18);background:#fff}
.hint{font-size:11.5px;color:var(--muted)}

.parts{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.part{display:flex;gap:8px;align-items:center}
.part input{flex:1}
.part .num{width:26px;text-align:center;color:var(--muted);font-size:13px;font-weight:700}
.part button, .addp{border:1px solid var(--field-bd);background:#fff;color:#12212f;border-radius:10px;
  cursor:pointer;font:inherit;font-weight:600}
.part button{width:38px;height:40px;font-size:18px;line-height:1;color:#c0392b;border-color:#f0c9c2;background:#fff5f3}
.addp{margin-top:10px;padding:9px 14px;font-size:13px;display:inline-flex;gap:8px;align-items:center;
  color:var(--blue-deep);border-color:#bfe0f0;background:#f0f9fe}

.go{margin-top:22px;width:100%;border:0;cursor:pointer;border-radius:13px;padding:15px;
  font:inherit;font-weight:800;font-size:15.5px;color:#fff;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--blue) 0%,var(--blue-deep) 45%,var(--orange) 130%);
  box-shadow:0 14px 30px -12px rgba(40,160,216,.6);transition:.15s}
.go:hover{filter:brightness(1.05);transform:translateY(-1px)}
.go:disabled{opacity:.55;cursor:not-allowed;transform:none}

.pv{position:sticky;top:20px}
.pv .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.pv .bar h2{margin:0;font-size:15px;font-weight:700}
.pv .bar .st{font-size:12.5px;color:var(--muted)}
.dl{border:0;border-radius:11px;padding:10px 18px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
  color:#fff;background:linear-gradient(100deg,var(--orange),var(--orange-deep));box-shadow:0 10px 22px -12px rgba(240,120,48,.7)}
.dl:disabled{opacity:.4;cursor:not-allowed;background:#7a8794;box-shadow:none}
.frame-wrap{padding:18px;min-height:60vh}
iframe#pv{width:100%;height:78vh;border:1px solid var(--line);border-radius:12px;background:#20303f}
.empty{height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.empty svg{opacity:.5}

.banner{margin:0 26px;border-radius:12px;padding:12px 15px;font-size:13px;line-height:1.5;display:none;gap:10px;align-items:flex-start}
.banner.warn{display:flex;background:#3a2410;border:1px solid #7a4a12;color:#ffd9a8}
.banner.err{display:flex;background:#3a1414;border:1px solid #7a1f1f;color:#ffb4b4}
.banner.ok{display:flex;background:#0f2e22;border:1px solid #1c6b4a;color:#a7f0cf}
.banner b{font-weight:700}
.banner .ov{margin-left:auto;white-space:nowrap;text-decoration:underline;cursor:pointer;color:inherit;font-weight:700}

.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.foot{max-width:1400px;margin:0 auto;padding:6px 40px 30px;color:var(--muted);font-size:12px}

/* ---- auth gate ---- */
body:not(.authed) header.top, body:not(.authed) .wrap, body:not(.authed) .foot{display:none}
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}
body.authed #gate{display:none}
#netbg{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  background:radial-gradient(1100px 760px at 78% -10%, rgba(40,160,216,.16), transparent 60%),
    radial-gradient(900px 640px at 0% 110%, rgba(240,120,48,.12), transparent 55%),
    linear-gradient(160deg,#0a1420 0%,#0c1c2e 48%,#0a1420 100%)}
#gate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(600px 480px at 50% 50%, transparent 20%, rgba(7,13,20,.55) 80%)}
.gcard{position:relative;z-index:2;width:100%;max-width:400px;
  background:linear-gradient(180deg,rgba(16,28,42,.72),rgba(12,22,34,.66));
  border:1px solid var(--line);border-radius:20px;padding:34px 30px;backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);text-align:center}
.gcard img{height:40px;margin-bottom:18px}
.gcard h2{margin:0 0 4px;font-size:20px;font-weight:800}
.gcard p{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.5}
.gcard .fld{text-align:left}
.gcard .go{margin-top:20px}
.gerr{display:none;margin-top:14px;background:#3a1414;border:1px solid #7a1f1f;color:#ffb4b4;
  border-radius:10px;padding:10px 13px;font-size:12.5px}
.gerr.show{display:block}
.userchip{display:flex;align-items:center;gap:10px}
.userchip .who{font-size:12px;color:#bcd;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px}
.userchip .cpw{font-size:12px;color:#bcd;background:rgba(40,160,216,.1);border:1px solid #1f6f96;
  border-radius:999px;padding:7px 13px;cursor:pointer;font-weight:600}
.userchip .cpw:hover{background:rgba(40,160,216,.2)}
.userchip .out{font-size:12px;color:#ffb4b4;background:rgba(255,80,80,.08);border:1px solid #7a1f1f;
  border-radius:999px;padding:7px 13px;cursor:pointer;font-weight:600}
.remember{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:#c5d4e2;cursor:pointer;text-align:left}
.remember input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}

/* ---- change-password modal ---- */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,12,20,.72);backdrop-filter:blur(4px)}
.modal.show{display:flex}
.mcard{width:100%;max-width:380px;background:#0f2033;border:1px solid var(--line);border-radius:18px;
  padding:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.mcard h3{margin:0 0 16px;font-size:18px;font-weight:800}
.mrow{display:flex;gap:10px;margin-top:18px}
.mbtn{border:1px solid var(--field-bd);background:#fff;color:#12212f;border-radius:11px;padding:13px 16px;
  font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.mrow .go{margin-top:0;flex:1}