:root { color-scheme: light; --ink:#152238; --muted:#708097; --line:#e5eaf0; --blue:#246bfe; --blue-dark:#1257e5; --surface:#fff; --canvas:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 15% 10%,#e4edff 0,transparent 38%),var(--canvas); }
.login-card { width:min(100%,420px); padding:42px 40px 32px; border:1px solid #e9eef5; border-radius:20px; background:var(--surface); box-shadow:0 24px 70px #1c3c6812; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; color:#fff; border-radius:14px; background:linear-gradient(145deg,#3982ff,#1556e9); box-shadow:0 8px 18px #246bfe38; font-size:21px; font-weight:700; }
.brand-mark.small { width:31px; height:31px; border-radius:10px; font-size:16px; }
.eyebrow { margin:26px 0 9px; color:var(--blue); font-size:10px; font-weight:700; letter-spacing:.16em; }
h1,h2,p { margin-top:0; }
.login-card h1 { margin-bottom:7px; font-size:28px; letter-spacing:-.04em; }
.muted { color:var(--muted); font-size:14px; }
form label { display:block; margin:23px 0 8px; font-size:13px; font-weight:600; }
form input:not([type="hidden"]) { width:100%; height:46px; padding:0 13px; color:var(--ink); border:1px solid var(--line); border-radius:9px; outline:none; background:#fff; transition:border-color .15s,box-shadow .15s; }
form input:focus,.link-row input:focus { border-color:#77a4ff; box-shadow:0 0 0 3px #246bfe18; }
.button { min-height:42px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; text-decoration:none; transition:.15s ease; }
.button.primary { color:#fff; background:var(--blue); box-shadow:0 5px 14px #246bfe24; }
.button.primary:hover { color:#fff; background:var(--blue-dark); transform:translateY(-1px); }
.button.full { width:100%; margin-top:25px; min-height:47px; }
.button.quiet { color:#53647c; background:transparent; }
.button.quiet:hover { color:var(--blue); background:#edf3ff; }
.alert { margin-top:18px; padding:11px 13px; color:#a33d36; border-radius:8px; background:#fff0ee; font-size:13px; }
.login-foot { margin:27px 0 0; color:#9ba7b6; text-align:center; font-size:11px; }
.topbar { height:70px; padding:0 max(28px,calc((100vw - 1080px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e9eef4; background:#ffffffd9; backdrop-filter:blur(12px); }
.topbar form { margin:0; }
.wordmark { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:16px; font-weight:700; letter-spacing:-.03em; }
.dashboard { width:min(100% - 40px,1080px); margin:52px auto 0; }
.welcome .eyebrow { margin:0 0 11px; }
.welcome h1 { display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:32px; letter-spacing:-.045em; }
.welcome>.muted { margin-bottom:28px; }
.online-dot { width:8px; height:8px; border-radius:50%; background:#20b77a; box-shadow:0 0 0 4px #20b77a1e; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.info-card { min-height:132px; padding:21px 23px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.card-label,.card-note { color:var(--muted); font-size:12px; }
.info-card strong { font-size:18px; letter-spacing:-.02em; }
.card-note { margin-top:auto; font-size:11px; }
.location-value { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.03em; }
.flag { font-size:23px; }
.methods { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:17px; }
.method-card { min-width:0; padding:26px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.method-qr { grid-column:1/-1; }
.method-head { display:flex; align-items:flex-start; gap:14px; border-bottom:1px solid #eef1f5; padding-bottom:17px; }
.method-head .eyebrow { margin:3px 0 5px; }
.method-head h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.method-number { color:#9eacbd; font-size:12px; font-weight:700; letter-spacing:.08em; }
.method-body { padding-top:20px; }
.qr-method-body { display:grid; grid-template-columns:1fr 230px; gap:24px; align-items:center; }
.steps { margin:0; padding-left:20px; color:#56667d; font-size:13px; line-height:2; }
.steps b { color:var(--blue); }
.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.qr-wrap img { width:194px; height:194px; padding:10px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.tip { margin:16px 0 0; color:#8896a8; font-size:11px; line-height:1.65; }
.link-row { display:flex; gap:9px; margin-top:18px; }
.link-row input { flex:1; min-width:0; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:8px; outline:none; color:#52637a; background:#f9fbfd; font-size:11px; }
.link-row .button { flex:0 0 auto; }
.copy-status { display:block; min-height:17px; margin-top:5px; color:#19865e; font-size:11px; }
.split-body { display:grid; grid-template-columns:1fr 190px; gap:24px; align-items:center; }
.split-body .button { margin-top:19px; }
.file-note { min-height:130px; padding:18px; display:flex; flex-direction:column; justify-content:center; gap:8px; border:1px dashed #cbd8ea; border-radius:11px; background:#f7faff; }
.file-note strong { font-size:12px; word-break:break-all; }
.file-note span:last-child { color:var(--muted); font-size:10px; line-height:1.5; }
.file-icon { color:var(--blue); font-size:26px; font-weight:700; }
.manual-intro { color:#56667d; font-size:13px; }
.params-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:17px; }
.param { position:relative; min-width:0; padding:12px 42px 11px 13px; border:1px solid var(--line); border-radius:9px; background:#fbfcfe; }
.param span { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; }
.param strong { display:block; overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.icon-copy { position:absolute; right:8px; bottom:10px; padding:4px; color:var(--blue); border:0; background:transparent; cursor:pointer; font-size:10px; }
.icon-copy:hover { color:var(--blue-dark); }
.security-note { margin:14px 0 50px; color:#8896a8; font-size:11px; }
footer { padding:0 20px 25px; color:#9aa6b4; text-align:center; font-size:9px; font-weight:700; letter-spacing:.14em; }
footer span { padding:0 6px; }
@media (max-width:740px) {
  .dashboard { margin-top:34px; }
  .summary-grid,.methods { grid-template-columns:1fr; gap:10px; }
  .method-qr { grid-column:auto; }
  .info-card { min-height:104px; }
  .qr-method-body,.split-body { grid-template-columns:1fr; gap:16px; }
  .qr-wrap { grid-row:1; }
  .qr-wrap img { width:184px; height:184px; }
  .welcome h1 { font-size:27px; }
  .topbar { padding:0 18px; }
}
@media (max-width:480px) {
  .login-card { padding:34px 25px 27px; }
  .dashboard { width:min(100% - 28px,1080px); }
  .method-card { padding:20px 17px; }
  .link-row { align-items:stretch; flex-direction:column; }
  .link-row input { flex:none; }
  .params-grid { grid-template-columns:1fr; }
}