:root{
      --hl-primary:#F7AF08; /* amarillo */
      --hl-dark:#060302;    /* negro */
      --hl-bg:#F5F7FA;
      --hl-card:#ffffff;
      --hl-border: rgba(6,3,2,.10);
      --hl-muted: rgba(6,3,2,.55);
      --hl-shadow: 0 18px 50px rgba(6,3,2,.12);
      --hl-shadow-soft: 0 10px 25px rgba(6,3,2,.08);
      --hl-radius: 18px;
    }

    body{
      background: var(--hl-bg);
      color: var(--hl-dark);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    /* App shell */
    .auth-shell{
      min-height: 100vh;
      display:flex;
    }

    /* Left panel (brand/info) */
    .auth-left{
      position:relative;
      overflow:hidden;
      background: radial-gradient(1200px 600px at 10% 0%, rgba(247,175,8,.22), transparent 60%),
                  radial-gradient(900px 500px at 85% 20%, rgba(6,3,2,.10), transparent 55%),
                  linear-gradient(180deg, #0b0b0c 0%, #111113 100%);
      color:#fff;
    }
    .auth-left::before{
      content:"";
      position:absolute;
      inset:-120px auto auto -120px;
      width:360px;height:360px;
      background: radial-gradient(circle, rgba(247,175,8,.35), rgba(247,175,8,0) 62%);
      filter: blur(2px);
      pointer-events:none;
    }
    .auth-left::after{
      content:"";
      position:absolute;
      inset:auto -160px -160px auto;
      width:420px;height:420px;
      background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 65%);
      pointer-events:none;
    }

    .brand-pill{
      display:inline-flex;
      align-items:center;
      
    }
    .brand-dot{
      width:10px;height:10px;border-radius:50%;
      background: var(--hl-primary);
      box-shadow: 0 0 0 7px rgba(247,175,8,.18);
    }

    .feature-card{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      border-radius: 16px;
      padding: 14px 14px;
      backdrop-filter: blur(10px);
    }
    .feature-ic{
      width:38px;height:38px;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(247,175,8,.16);
      border: 1px solid rgba(247,175,8,.22);
      color: #ffd77a;
      flex: 0 0 auto;
    }

    /* Right panel */
    .auth-right{
      background: var(--hl-bg);
    }

    .topbar{
      height:56px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 14px;
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(6,3,2,.06);
      box-shadow: 0 1px 3px rgba(0,0,0,.02);
    }

    .card-auth{
      background: var(--hl-card);
      border:1px solid var(--hl-border);
      border-radius: var(--hl-radius);
      box-shadow: var(--hl-shadow);
    }

    .tab-pill{
      background: rgba(6,3,2,.05);
      border-radius: 14px;
      padding: .35rem;
      display:flex;
      gap:.35rem;
    }
    .tab-pill .btn{
      border-radius: 12px;
      font-weight: 700;
      font-size: .95rem;
    }
    .btn-hl{
      background: var(--hl-primary);
      border-color: var(--hl-primary);
      color: #151515;
      font-weight: 800;
      box-shadow: 0 12px 26px rgba(247,175,8,.25);
    }
    .btn-hl:hover{
      background: #e9a106;
      border-color: #e9a106;
      color:#111;
    }

    .form-control{
      border-radius: 14px;
      border-color: rgba(6,3,2,.12);
      padding: .70rem .90rem;
    }
    .form-control:focus{
      border-color: rgba(247,175,8,.65);
      box-shadow: 0 0 0 .25rem rgba(247,175,8,.18);
    }

    .muted{ color: var(--hl-muted); }
    .tiny{ font-size: .83rem; }

    /* Responsive behavior */
    @media (max-width: 991.98px){
      .auth-left{ display:none; }
      .auth-right{ width:100%; }
    }