:root{
      --bg:#0f1724;
      --bg2:#182233;
      --panel:#121b29ee;
      --panel-2:#182436;
      --line:#2a3950;
      --text:#e8edf4;
      --muted:#9fb0c5;
      --primary:#4f7cff;
      --primary-2:#3d67e6;
      --accent:#1fbb9b;
      --danger:#ff6b6b;
      --shadow:0 18px 40px rgba(2,10,23,.38);
      --radius:18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(79,124,255,.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(31,187,155,.10), transparent 26%),
        linear-gradient(135deg, var(--bg), var(--bg2));
      color:var(--text);
      min-height:100vh;
    }
    .page{
      min-height:100vh;
      display:grid;
      grid-template-columns: 1.06fr .94fr;
      align-items:stretch;
    }
    .showcase{
      position:relative;
      padding:42px 46px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      font-weight:700;
      letter-spacing:.2px;
    }
    .brand-mark{
      width:48px;height:48px;border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      display:grid;place-items:center;
      color:white;font-size:22px;font-weight:800;
      box-shadow:0 10px 20px rgba(79,124,255,.26);
    }
    .brand-title{font-size:28px;line-height:1.05}
    .brand-sub{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:3px;letter-spacing:.8px;text-transform:uppercase}
    .hero h1{
      margin:24px 0 12px;
      font-size:46px;
      line-height:1.1;
      font-weight:800;
      max-width:640px;
    }
    .hero p{
      margin:0;
      color:var(--muted);
      font-size:17px;
      line-height:1.7;
      max-width:610px;
    }
    .feature-grid{
      margin-top:30px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      max-width:760px;
    }
    .feature{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      border-radius:16px;
      padding:16px 16px 15px;
      backdrop-filter: blur(12px);
    }
    .feature .icon{
      width:38px;height:38px;border-radius:12px;
      display:grid;place-items:center;
      background:rgba(79,124,255,.15);
      color:#cfe0ff;
      font-weight:700;
      margin-bottom:10px;
    }
    .feature h3{margin:0 0 6px;font-size:15px}
    .feature p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
    .footer-note{
      color:#90a0b6;
      font-size:13px;
      display:flex;gap:12px;flex-wrap:wrap;
    }
    .footer-note span{
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }

    .login-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px;
    }
    .login-card{
      width:min(100%, 500px);
      background:linear-gradient(180deg, rgba(18,27,41,.98), rgba(20,31,47,.96));
      border:1px solid rgba(255,255,255,.07);
      border-radius:24px;
      padding:28px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .login-card::before{
      content:"";
      position:absolute;inset:-120px auto auto -80px;
      width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle, rgba(79,124,255,.14), transparent 65%);
      pointer-events:none;
    }
    .card-header{
      margin-bottom:20px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;
      background:rgba(79,124,255,.12);
      color:#d7e3ff;font-size:12px;font-weight:600;
      border:1px solid rgba(79,124,255,.18);
      margin-bottom:14px;
    }
    .card-header h2{margin:0 0 8px;font-size:28px}
    .card-header p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{margin-bottom:14px}
    label{
      display:block;font-size:13px;font-weight:600;
      margin-bottom:7px;color:#d8e0ea;
    }
    .req{color:#8fc3ff}
    .control, select{
      width:100%;height:46px;
      border-radius:13px;
      background:#111a27;
      border:1px solid var(--line);
      color:var(--text);
      outline:none;
      padding:0 14px;
      font-size:14px;
      transition:.2s ease;
    }
    textarea.control{height:auto;min-height:86px;padding:12px 14px;resize:vertical}
    .control::placeholder{color:#7f90a6}
    .control:focus, select:focus{
      border-color:#5483ff;
      box-shadow:0 0 0 3px rgba(79,124,255,.14);
    }
    .password-wrap{position:relative}
    .password-wrap button{
      position:absolute;right:10px;top:50%;transform:translateY(-50%);
      background:none;border:none;color:#92a4bb;font-size:13px;font-weight:700;cursor:pointer;
    }
    .row{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      margin:6px 0 18px;
    }
    .check{
      display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);
      cursor:pointer;
    }
    .check input{accent-color:var(--primary);width:16px;height:16px}
    .link{color:#bdd0ff;text-decoration:none;font-size:13px;font-weight:600}
    .link:hover{text-decoration:underline}
    .btn{
      width:100%;height:48px;border:none;border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:white;font-size:15px;font-weight:700;cursor:pointer;
      box-shadow:0 14px 26px rgba(79,124,255,.24);
      transition:.2s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .support{
      display:grid;grid-template-columns:1fr 1fr;gap:12px;
      margin-top:16px;
    }
    .mini-card{
      padding:13px 14px;border-radius:14px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.03);
    }
    .mini-card strong{display:block;font-size:13px;margin-bottom:4px}
    .mini-card span{font-size:12px;color:var(--muted);line-height:1.5}
    .copyright{
      margin-top:16px;text-align:center;color:#8ea0b5;font-size:12px;
    }
    @media (max-width: 1080px){
      .page{grid-template-columns:1fr}
      .showcase{padding:28px 24px 14px}
      .hero h1{font-size:34px}
      .feature-grid{grid-template-columns:1fr 1fr}
      .login-wrap{padding:18px 24px 28px}
    }
    @media (max-width: 640px){
      .grid,.support,.feature-grid{grid-template-columns:1fr}
      .showcase{padding:22px 18px 8px}
      .login-wrap{padding:14px 16px 22px}
      .login-card{padding:22px 18px}
      .hero h1{font-size:28px}
      .row{flex-direction:column;align-items:flex-start}
    }

    /* Login panel only: soft blue. Left branding panel remains unchanged. */
    .login-card{
      background:#d9e7fa;
      border:1px solid #c4d6ee;
      color:#18314d;
      box-shadow:0 18px 42px rgba(2,10,23,.20);
    }
    .login-card::before{background:radial-gradient(circle,rgba(79,124,255,.10),transparent 65%)}
    .login-card .card-header h2{color:#152c49}
    .login-card .card-header p,.login-card .check,.login-card .mini-card span,.login-card .copyright{color:#4c6684}
    .login-card label{color:#233e5c}
    .login-card .eyebrow{background:#c7d9f5;color:#244a83;border-color:#b6cef1}
    .login-card .control,.login-card select{background:#f7faff;border-color:#b6cbe4;color:#18314d}
    .login-card .control::placeholder{color:#69809a}
    .login-card .control:focus,.login-card select:focus{border-color:#4f7cff;box-shadow:0 0 0 3px rgba(79,124,255,.15)}
    .login-card .password-wrap button{color:#365b8b}
    .login-card .link{color:#225bb4}
    .login-card .mini-card{background:#edf4ff;border:1px solid #c4d5eb}
    .login-card .mini-card strong{color:#203a58}
    .login-card .btn{color:white}
    /* One-step larger font in the login form, as previously requested. */
    .login-card label,.login-card .check,.login-card .link{font-size:14px}
    .login-card .control,.login-card select,.login-card .card-header p{font-size:15px}
    .login-card .mini-card strong{font-size:14px}
    .login-card .mini-card span,.login-card .copyright{font-size:13px}
    .login-card .btn{font-size:16px}
  
/* Server-side integration only: maintain the approved two-panel visual design. */
.login-card .error{color:#a12238;background:#fff0f2;border:1px solid #f3bfca;padding:9px 12px;border-radius:9px;margin:10px 0}
.login-card .login-warning{color:#684c13;background:#fff5d7;padding:8px;border-radius:8px}
.login-card .language-switch{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.login-card .language-switch button{border:1px solid #afc7e5;background:#edf4ff;color:#214c82;border-radius:7px;padding:7px 11px;cursor:pointer}
.login-card select option[hidden]{display:none}
.login-card .control:disabled{opacity:.7;cursor:not-allowed}
@media(max-width:640px){.login-card .language-switch{justify-content:flex-start}}