/* ===== PAGE-SPECIFIC (CSS vars/theme/reset → see styles.css) ===== */
    body { overflow-x:hidden; }

    /* ===== NETWORK BACKGROUND ===== */
    .bg-canvas {
      position:fixed; inset:0; z-index:0;
      pointer-events:none;
    }
    #networkCanvas {
      width:100%; height:100%;
    }
    /* Subtle vignette */
    .bg-vignette {
      position:fixed; inset:0; z-index:1; pointer-events:none;
      background: radial-gradient(ellipse at center, transparent 40%, var(--bg) 100%);
    }

    /* ===== LAYOUT ===== */
    .auth-layout {
      position:relative; z-index:1;
      min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      padding:24px;
    }
    .auth-container {
      width:100%; max-width:920px;
      display:grid; grid-template-columns:1fr 1fr;
      gap:0; border-radius:24px; overflow:hidden;
      box-shadow:var(--shadow-lg);
      animation:fadeUp .5s ease;
    }

    /* ===== LEFT PANEL (BRAND) ===== */
    .auth-brand {
      background:var(--gradient);
      padding:48px 40px;
      display:flex; flex-direction:column; justify-content:center;
      position:relative; overflow:hidden;
    }
    .auth-brand::before {
      content:''; position:absolute; top:-80px; right:-80px;
      width:300px; height:300px; border-radius:50%;
      background:rgba(255,255,255,0.06);
    }
    .auth-brand::after {
      content:''; position:absolute; bottom:-100px; right:40px;
      width:200px; height:200px; border-radius:50%;
      background:rgba(255,255,255,0.04);
    }
    .brand-logo { display:flex; align-items:center; gap:12px; margin-bottom:40px; position:relative; z-index:1; }
    .brand-icon {
      border-radius:12px;
    }
    .brand-name { font-family:'Noto Serif SC',serif; font-size:20px; color:#fff; font-weight:400; }
    .brand-name span { opacity:0.85; }
    .brand-title { font-family:'Noto Serif SC',serif; font-size:26px; font-weight:300; color:#fff; line-height:1.4; margin-bottom:16px; position:relative; z-index:1; }
    .brand-title strong { font-weight:700; }
    .brand-desc { font-size:14px; color:rgba(255,255,255,0.75); line-height:1.7; max-width:280px; position:relative; z-index:1; }
    .brand-features { margin-top:40px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
    .brand-feature { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.9); font-size:13px; }
    .brand-feature svg { width:20px; height:20px; flex-shrink:0; }
    .brand-footer { margin-top:auto; padding-top:40px; position:relative; z-index:1; }
    .brand-stat { display:flex; gap:24px; }
    .brand-stat-item { text-align:center; }
    .brand-stat-n { font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:#fff; }
    .brand-stat-l { font-size:11px; color:rgba(255,255,255,0.65); margin-top:4px; }

    /* ===== RIGHT PANEL (FORM) ===== */
    .auth-form-panel {
      background:var(--bg-card);
      padding:48px 40px;
      display:flex; flex-direction:column; justify-content:center;
      border:1px solid var(--border);
      transition:background .3s, border-color .3s;
    }
    .form-header { margin-bottom:32px; }
    .form-title { font-family:'Noto Serif SC',serif; font-size:22px; font-weight:600; color:var(--text); margin-bottom:6px; }
    .form-sub { font-size:13px; color:var(--text-2); }
    .form-sub a { color:var(--blue); text-decoration:none; font-weight:500; }
    .form-sub a:hover { text-decoration:underline; }

    /* ===== TABS ===== */
    .auth-tabs { display:flex; gap:4px; margin-bottom:28px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:4px; }
    .auth-tab {
      flex:1; padding:9px 16px; border-radius:9px;
      font-size:13px; font-weight:500; cursor:pointer;
      text-align:center; border:none; background:transparent;
      color:var(--text-2); transition:all .25s;
    }
    .auth-tab.active {
      background:var(--bg-card);
      color:var(--text);
      box-shadow:0 1px 4px rgba(0,0,0,0.08);
    }
    .auth-tab:not(.active):hover { color:var(--text); }

    /* ===== FORM ELEMENTS ===== */
    .form-group { margin-bottom:18px; }
    .form-label { display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:7px; letter-spacing:.04em; text-transform:uppercase; }
    .form-input-wrap { position:relative; }
    .form-input {
      width:100%; padding:11px 14px; border-radius:10px;
      border:1.5px solid var(--border); background:var(--bg);
      font-size:14px; color:var(--text);
      font-family:'Inter',sans-serif;
      transition:all .2s;
      outline:none;
    }
    .form-input:focus { border-color:var(--blue); background:var(--bg-card); box-shadow:0 0 0 3px var(--blue-pale); }
    .form-input::placeholder { color:var(--text-3); }
    .form-input.has-suffix { padding-right:44px; }
    .input-suffix {
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      color:var(--text-3); cursor:pointer; font-size:16px;
      transition:color .2s;
    }
    .input-suffix:hover { color:var(--blue); }
    .input-eye { display:block; }
    .input-eye-slash { display:none; }
    .form-input:valid:not(:placeholder-shown) ~ .input-suffix .input-eye { display:none; }
    .form-input:valid:not(:placeholder-shown) ~ .input-suffix .input-eye-slash { display:block; }

    /* OTP INPUT */
    .otp-inputs { display:flex; gap:10px; justify-content:center; margin:16px 0; }
    .otp-digit {
      width:48px; height:52px; border-radius:12px;
      border:1.5px solid var(--border); background:var(--bg);
      font-size:20px; font-family:'Space Mono',monospace; font-weight:700;
      color:var(--text); text-align:center; outline:none;
      transition:all .2s;
    }
    .otp-digit:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale); }
    [data-theme="dark"] .otp-digit { background:var(--bg-card); }

    /* ===== TWO-COL FIELD ===== */
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    /* ===== SELECT ===== */
    .form-select {
      width:100%; padding:11px 14px; border-radius:10px;
      border:1.5px solid var(--border); background:var(--bg);
      font-size:14px; color:var(--text);
      font-family:'Inter',sans-serif;
      appearance:none; cursor:pointer; outline:none;
      transition:all .2s;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 14px center;
      padding-right:36px;
    }
    .form-select:focus { border-color:var(--blue); background-color:var(--bg-card); box-shadow:0 0 0 3px var(--blue-pale); }

    /* ===== CHECKBOX ===== */
    .form-check { display:flex; align-items:flex-start; gap:10px; margin:16px 0 24px; }
    .form-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--blue); cursor:pointer; margin-top:2px; flex-shrink:0; }
    .form-check label { font-size:12px; color:var(--text-2); line-height:1.6; cursor:pointer; }
    .form-check label a { color:var(--blue); text-decoration:none; }
    .form-check label a:hover { text-decoration:underline; }

    /* ===== BUTTONS ===== */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:all .25s; text-decoration:none; width:100%; }
    .btn-primary { background:var(--gradient); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,0.3); }
    .btn-primary:hover { box-shadow:0 6px 20px rgba(37,99,235,0.4); transform:translateY(-1px); }
    .btn-primary:active { transform:translateY(0); }
    .btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
    .btn-outline { background:transparent; color:var(--blue); border:1.5px solid var(--blue-border); }
    .btn-outline:hover { background:var(--blue-pale); }
    .btn-wechat { background:#07c160; color:#fff; box-shadow:0 4px 14px rgba(7,193,96,0.25); }
    .btn-wechat:hover { background:#06a355; box-shadow:0 6px 20px rgba(7,193,96,0.35); transform:translateY(-1px); }
    .btn-ghost { background:transparent; color:var(--text-2); border:1.5px solid var(--border); }
    .btn-ghost:hover { border-color:var(--border-h); color:var(--text); }

    /* ===== DIVIDER ===== */
    .divider { display:flex; align-items:center; gap:16px; margin:20px 0; }
    .divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .divider span { font-size:12px; color:var(--text-3); white-space:nowrap; }

    /* ===== ALERT ===== */
    .alert { padding:12px 16px; border-radius:10px; font-size:13px; display:none; margin-bottom:16px; }
    .alert.show { display:block; animation:fadeIn .3s; }
    .alert-error { background:var(--error-bg); border:1px solid var(--error); color:var(--error); }
    .alert-success { background:var(--success-bg); border:1px solid var(--success); color:var(--success); }
    .alert-warning { background:var(--warning-bg); border:1px solid var(--warning); color:var(--warning); }

    /* ===== FORGOT LINK ===== */
    .forgot-link { text-align:right; margin-top:-8px; margin-bottom:20px; }
    .forgot-link a { font-size:12px; color:var(--blue); text-decoration:none; }
    .forgot-link a:hover { text-decoration:underline; }

    /* ===== VERIFY PANEL (hidden by default) ===== */
    .verify-panel { display:none; }
    .verify-panel.active { display:block; }
    .send-code-btn {
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      padding:6px 12px; border-radius:8px;
      background:var(--blue-pale); color:var(--blue);
      border:1px solid var(--blue-border);
      font-size:12px; font-weight:600; cursor:pointer;
      font-family:'Inter',sans-serif;
      transition:all .2s; white-space:nowrap;
    }
    .send-code-btn:hover { background:var(--blue); color:#fff; }
    .send-code-btn:disabled { opacity:0.5; cursor:not-allowed; }

    /* ===== STEP INDICATOR ===== */
    .step-indicator { display:flex; justify-content:center; gap:8px; margin-bottom:24px; }
    .step-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all .3s; }
    .step-dot.active { background:var(--blue); width:24px; border-radius:4px; }
    .step-dot.done { background:var(--success); }

    /* ===== BOTTOM LINK ===== */
    .auth-bottom { text-align:center; margin-top:24px; font-size:13px; color:var(--text-2); }
    .auth-bottom a { color:var(--blue); text-decoration:none; font-weight:500; }
    .auth-bottom a:hover { text-decoration:underline; }

    /* ===== THEME TOGGLE (small) ===== */
    .theme-float {
      position:fixed; top:20px; right:20px; z-index:100;
      width:38px; height:38px; border-radius:10px;
      border:1px solid var(--border); background:var(--bg-card);
      display:flex; align-items:center; justify-content:center;
      font-size:17px; cursor:pointer;
      box-shadow:var(--shadow);
      transition:all .25s;
    }
    .theme-float:hover { border-color:var(--border-h); background:var(--blue-pale); }
    [data-theme="dark"] .theme-float .icon-sun { display:block; }
    [data-theme="dark"] .theme-float .icon-moon { display:none; }
    [data-theme="light"] .theme-float .icon-sun { display:none; }
    [data-theme="light"] .theme-float .icon-moon { display:block; }

    /* ===== SVG ICON BASE ===== */
    .svg-icon { width:1em; height:1em; display:inline-block; vertical-align:middle; flex-shrink:0; }
    .svg-icon-20 { width:20px; height:20px; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px) {
      .auth-container { grid-template-columns:1fr; max-width:440px; }
      .auth-brand { display:none; }
      .auth-form-panel { padding:36px 28px; }
      .form-row { grid-template-columns:1fr; }
      .otp-digit { width:40px; height:46px; font-size:18px; }
    }