:root{
      --brand:#16a34a; --brand2:#10b981;
      --ink:#0f172a; --muted:#64748b;

      --bgA:#041f1b;
      --bgB:#063b32;
      --bgC:#0b5a4b;

      --card: rgba(255,255,255,.86);
      --stroke: rgba(15, 23, 42, .10);
      --shadow: 0 26px 80px rgba(0,0,0,.38);
      --radius: 24px;
    }

    *{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-sizing:border-box; }

    body{
      min-height:100vh;
      margin:0;
      color:#fff;
      overflow-x:hidden;
      background:
        radial-gradient(900px 600px at 10% 8%, rgba(16,185,129,.14), transparent 60%),
        radial-gradient(900px 600px at 92% 18%, rgba(253,230,138,.10), transparent 55%),
        linear-gradient(135deg, var(--bgA) 0%, var(--bgB) 45%, var(--bgC) 120%);
    }

    .auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px; }

    .auth-shell{
      width:100%;
      max-width:1240px;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(16px);
    }

    .auth-grid{ display:grid; grid-template-columns: 1.15fr .85fr; }
    @media (max-width: 991px){ .auth-grid{ grid-template-columns:1fr; } }

    .left{
      position:relative;
      padding:54px 54px;
      background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
    }

    .right{
      padding:44px 40px;
      background: rgba(255,255,255,.07);
      border-left:1px solid rgba(255,255,255,.12);
    }
    @media (max-width: 991px){
      .right{ border-left:none; border-top:1px solid rgba(255,255,255,.12); }
      .left{ padding:44px 22px; }
      .right{ padding:34px 18px; }
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:700; letter-spacing:.3px;
      font-size:1.08rem;
    }
    .brand i{ color:#d9f99d; }
    .brand b{ color:#d1fae5; }

    .headline{
      margin-top:18px;
      font-size:2.75rem;
      line-height:1.08;
      font-weight:800;
    }
    @media (max-width: 991px){ .headline{ font-size:2.15rem; } }

    .sub{
      margin-top:14px;
      color: rgba(255,255,255,.90);
      font-size:1.12rem;
      max-width: 680px;
      font-weight: 400;
    }

    .list{
      margin-top:18px;
      display:grid;
      gap:12px;
      max-width: 680px;
    }

    .li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      padding:14px 16px;
      transition: box-shadow 0.3s ease;
    }
    .li:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .li i{
      width:40px;height:40px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background: rgba(16,185,129,.22);
      color:#d1fae5;
      flex:0 0 auto;
      font-size:1.05rem;
    }
    .li b{ display:block; font-size:1.02rem; font-weight: 600; }
    .li p{ margin:2px 0 0; color: rgba(255,255,255,.88); font-size:1.02rem; font-weight: 400; }

    .mini-badges{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .mini-badges span{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:.55rem .8rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.10);
      font-size:1.02rem;
      color: rgba(255,255,255,.92);
      font-weight: 500;
    }

    .panel{
      background: var(--card);
      border:1px solid var(--stroke);
      border-radius:20px;
      padding:26px;
      color:var(--ink);
    }
    .panel h3{ margin:0 0 4px; font-weight:700; font-size:1.5rem; }
    .muted{ color:var(--muted); font-size:1.05rem; }

    .logo-badge{
      width:70px;
      height:auto;
      border-radius:16px;
      background:#fff;
      padding:8px;
      border:1px solid rgba(2,6,23,.10);
      box-shadow:0 10px 28px rgba(2,6,23,.12);
    }

    .form-label{ font-weight:700; font-size:1.05rem; margin-bottom: 0;}
    .form-control{
      border-radius:14px;
      border:1px solid rgba(2,6,23,.12);
      padding:.6rem .8rem;
      font-size:1.06rem;
    }
    .form-control:focus{ box-shadow:none; border-color: rgba(16,185,129,.55); }

    .btn-brand{
      background: linear-gradient(135deg, #0c5a4b, #10b981);
      border:none;
      border-radius:14px;
      padding:.9rem 1rem;
      font-weight:700;
      color:#fff;
      font-size:1.06rem;
    }
    .btn-brand:hover{ filter:brightness(.98); }

    .btn-soft{
      background:#fff;
      border:1px solid rgba(2,6,23,.10);
      color:#0f172a;
      border-radius:14px;
      padding:.82rem 1rem;
      font-weight:700;
      font-size:1.02rem;
    }
    .btn-soft:hover{ background:#f8fafc; }

    .orb{
      position:absolute;
      inset:auto auto -180px -180px;
      width:380px;height:380px;border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(16,185,129,.35), transparent 62%),
        radial-gradient(circle at 70% 70%, rgba(253,230,138,.20), transparent 58%);
      opacity:.9;
      pointer-events:none;
    }
    .gridline{
      position:absolute; inset:0;
      background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
      background-size: 18px 18px;
      opacity:.18;
      pointer-events:none;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 62%);
    }