/* Version 2.0.4 - Login CSS */
    :root {
      --grey-light: #f1f1f1;
      --blu-cobalto: #1e213d;
      --white: #fff;
      --blu-dodger: rgb(0, 170, 255);
      --black: #000;
      --gainsboro: #dedede;
      --soft-sage : #E0E1C1;
      --grey: #dedede;
      --green-light : #d4edda;
      --red-light : #FF0000;
      --orange-light : #fff3cd;
      --red: #FF0000;

      --a:#00aaff;
      --b:#00ffaa;
      --bg:#0b1a23;
      --ink:#0b2030;
      --muted:#5f778a;
      --card:#ffffffee;
      --stroke:#d8e1e8;

      --blu-dodger-dark: #0284c7;
      --blue-soft: #e5f2ff;
      --green-strong: #28a745;
      --error-bg-soft: #fff3f3;
      --error-border-soft: #ffd6d6;
      --invalid-bg: #f8d7da;
      --text-muted-strong: #6b7280;
      --brand-foot: #b9d2de;
      --input-border-hover: #cbd9e2;
    }

    /* Login */
    body#login.cf-split{
      margin:0;
      min-height:100vh;
      font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color:var(--ink);
      background: var(--bg);
      display:grid;
      place-items: stretch;
    }
    .cf-shell{
      display:grid;
      grid-template-columns: minmax(340px, 48%) 1fr;
      min-height:100vh;
    }
    .cf-brand{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-rows: 1fr auto;
      background: radial-gradient(1200px 1200px at 0% 100%, rgba(0,255,170,.18) 0%, transparent 60%),
                  radial-gradient(1000px 1000px at 100% 0%, rgba(0,170,255,.20) 0%, transparent 60%),
                  linear-gradient(135deg, var(--bg), var(--ink));
      color:#e7f7ff;
    }
    .cf-brand .cf-mesh{
      position:absolute; inset: -20% -10%;
      filter: blur(40px) saturate(130%);
      background:
        radial-gradient(40% 35% at 25% 40%, rgba(0,170,255,.85) 0%, transparent 60%),
        radial-gradient(45% 40% at 70% 60%, rgba(0,255,170,.85) 0%, transparent 60%);
      animation: meshMove 18s ease-in-out infinite alternate;
    }
    @keyframes meshMove{
      0%   { transform: translate3d(-2%, -2%, 0) scale(1); }
      50%  { transform: translate3d(3%, 1%, 0)  scale(1.05); }
      100% { transform: translate3d(-1%, 3%, 0) scale(1); }
    }

    .cf-brand-content{
      z-index:1;
      align-self:center;
      justify-self:center;
      text-align:center;
      padding: 40px 20px;
    }
    .cf-logo{
      height:200px;
      filter: drop-shadow(0 12px 26px rgba(0,0,0,.25));
      margin-bottom:14px;
    }
    .cf-foot{
      z-index:1;
      padding: 16px 24px;
      font-size:12px;
      color:var(--brand-foot);
      opacity:.9;
    }
    .cf-foot a {
      z-index: 1;
      font-size: 12px;
      color: var(--brand-foot);
      opacity: .9;
    }
    .cf-form-pane{
      display:grid;
      place-items:center;
      padding: clamp(20px, 4vw, 48px);
      background:
        radial-gradient(800px 800px at 80% 0%, rgba(0,170,255,.08) 0%, transparent 60%),
        radial-gradient(900px 900px at 10% 80%, rgba(0,255,170,.08) 0%, transparent 60%),
        linear-gradient(180deg, #f7fbff, #edf5ff);
    }
    .login-container.cf-card{
      width:100%;
      max-width: 460px;
      padding: 2px;
      border-radius: 22px;
      background:
        conic-gradient(from 180deg at 85% 0%, rgba(0,170,255,.35), rgba(0,255,170,.35), rgba(255,255,255,0) 35%),
        linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.25));
      position:relative;
      clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 0 100%);
    }
    .login-box{
      background: var(--card);
      border-radius: 20px;
      padding: 42px 34px 32px;
      backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }
    .logo-area {
      margin-bottom: 0;
    }
    .cf-form-title{
      margin:0 0 4px;
      font-weight:900;
      font-size:24px;
      color:var(--ink);
    }
    .cf-form-sub{
      margin:0 0 18px;
      color:var(--muted);
      font-size:13px;
    }
    .login-error{
      background:var(--error-bg-soft);
      color:var(--red);
      border:1px solid var(--error-border-soft);
      padding:10px 12px;
      border-radius:12px;
      font-size:14px;
      margin-bottom:16px;
    }
    .login-form .input-group{ margin-bottom:16px; }
    .login-form label{
      display:block; font-size:13px; color:var(--muted); margin:0 0 6px;
    }
    .login-form input{
      width:100%; height:48px; padding:12px 14px;
      border:1px solid var(--stroke);
      border-radius:12px; font-size:15px; background:#fff; outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, transform .02s;
    }
    .login-form input:hover{
      border-color:var(--input-border-hover);
    }
    .login-form input:focus{
      border-color:var(--a);
      box-shadow:0 0 0 4px rgba(0,170,255,.18);
    }
    .input-with-toggle{ position:relative; }
    .input-with-toggle input{ padding-right:44px; }
    .pw-toggle{
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      border:0; background:transparent; padding:6px; cursor:pointer;
      border-radius:10px; font-size:18px; line-height:0;
      color:var(--text-muted-strong);
    }
    .pw-toggle.on{ color:var(--a); }
    .btn-login{
      width:100%; height:48px; border:0; border-radius:14px;
      font-weight:900; letter-spacing:.2px; font-size:16px; color:#fff; cursor:pointer;
      background:linear-gradient(90deg, var(--a), var(--b));
      box-shadow: 0 14px 30px rgba(0,170,255,.28);
      transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-login:hover{
      transform: translateY(-1px);
      box-shadow: 0 20px 40px rgba(0,170,255,.34);
      filter: saturate(1.05);
    }
    .btn-login:active{ transform: translateY(0); }
    .info-text{
      text-align:center; color:var(--muted); font-size:12.5px; margin-top:14px;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .cf-shell {
        grid-template-columns: 1fr;
      }
      .cf-brand {
        display: none;
      }
    }