:root{
      --bg-primary:#eef4fd;
      --bg-card:rgba(255,255,255,.78);
      --border-card:rgba(37,99,235,.10);
      --border-field:rgba(37,99,235,.12);
      --blue-deep:#0f2557;
      --blue-royal:#1a3a8a;
      --blue-bright:#2563eb;
      --blue-mid:#3b82f6;
      --sky:#0ea5e9;
      --gold:#c8a84e;
      --gold-bright:#e8c84e;
      --gold-deep:#8a6d20;
      --green:#22c55e;
      --text-primary:#0f172a;
      --text-secondary:#475569;
      --text-muted:#94a3b8;
      --text-on-accent:#fff;
      --font-display:Outfit,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --font-body:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --font-mono:"SFMono-Regular","Cascadia Code",Consolas,monospace;
      --radius-xl:28px;
      --radius-md:14px
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{
      min-height:100vh;
      font-family:var(--font-body);
      background:var(--bg-primary);
      color:var(--text-primary);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeSpeed
    }

    #particleCanvas{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      opacity:.96
    }

    .scene{
      position:fixed;
      inset:0;
      z-index:0;
      overflow:hidden;
      background:linear-gradient(155deg,#eef4fd 0%,#dde8fa 35%,#dbeafe 78%,#f0f6ff 100%)
    }

    .scene__orb{position:absolute;border-radius:50%;filter:blur(54px);pointer-events:none}
    .scene__orb--1{width:520px;height:520px;top:-18%;left:-12%;background:radial-gradient(circle,rgba(37,99,235,.085) 0%,transparent 65%)}
    .scene__orb--2{width:380px;height:380px;bottom:-13%;right:-8%;background:radial-gradient(circle,rgba(200,168,78,.065) 0%,transparent 60%)}
    .scene__orb--3{width:310px;height:310px;top:30%;right:20%;background:radial-gradient(circle,rgba(34,197,94,.045) 0%,transparent 55%)}
    .scene__grid{
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(37,99,235,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.022) 1px,transparent 1px);
      background-size:54px 54px;
      mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black,transparent);
      -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black,transparent)
    }

    .page{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
    .login-wrap{width:min(520px,100%);animation:revealUp .45s cubic-bezier(.16,1,.3,1) both}
    @keyframes revealUp{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

    .card{
      position:relative;
      background:var(--bg-card);
      border:1px solid var(--border-card);
      border-radius:var(--radius-xl);
      backdrop-filter:blur(26px) saturate(1.25);
      -webkit-backdrop-filter:blur(26px) saturate(1.25);
      overflow:visible;
      box-shadow:0 8px 24px rgba(37,99,235,.05),0 24px 58px rgba(15,23,42,.055)
    }

    .card__topbar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
    .card__topbar::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,var(--sky),var(--blue-bright),var(--gold),var(--green),var(--gold-bright),var(--blue-mid),var(--sky));
      background-size:220% 100%;
      animation:barShimmer 8s linear infinite
    }
    @keyframes barShimmer{to{background-position:-220% 0}}

    .card__header{padding:40px 36px 24px;text-align:center;position:relative}
    .card__header::after{
      content:"";
      position:absolute;
      bottom:0;
      left:36px;
      right:36px;
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(37,99,235,.07),rgba(200,168,78,.05),transparent)
    }

    .logo-wrap{position:relative;width:220px;height:220px;margin:0 auto 22px;display:grid;place-items:center}
    .logo-ring-outer{
      position:absolute;
      inset:-10px;
      border-radius:50%;
      border:2px solid transparent;
      border-top-color:rgba(37,99,235,.22);
      border-right-color:rgba(200,168,78,.18);
      animation:ringRotate 15s linear infinite
    }
    .logo-ring-mid{
      position:absolute;
      inset:-4px;
      border-radius:50%;
      border:1.5px solid transparent;
      border-bottom-color:rgba(14,165,233,.18);
      border-left-color:rgba(34,197,94,.13);
      animation:ringRotate 18s linear infinite reverse
    }
    @keyframes ringRotate{to{transform:rotate(360deg)}}

    .logo-glow{
      position:absolute;
      width:176px;
      height:176px;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:radial-gradient(circle,rgba(37,99,235,.09) 0%,rgba(200,168,78,.05) 40%,transparent 70%);
      filter:blur(16px)
    }

    .logo-core{
      width:200px;
      height:200px;
      border-radius:50%;
      overflow:hidden;
      position:relative;
      z-index:2;
      box-shadow:0 4px 20px rgba(37,99,235,.10),0 8px 36px rgba(200,168,78,.055),inset 0 1px 0 rgba(255,255,255,.5);
      border:2px solid rgba(255,255,255,.68);
      background:#fff
    }

    .logo-img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;background:#fff}

    .badge{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:7px 22px;
      border-radius:100px;
      background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(200,168,78,.04));
      border:1px solid rgba(37,99,235,.08);
      margin-bottom:14px
    }

    .badge__dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--gold));box-shadow:0 0 10px rgba(37,99,235,.35)}
    .badge__text{font-family:var(--font-mono);font-weight:700;font-size:.58rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue-royal)}

    .title{font-family:var(--font-display);font-weight:900;font-size:1.85rem;margin-bottom:6px;letter-spacing:-.02em}
    .title .t-john{background:linear-gradient(135deg,var(--blue-bright),var(--blue-royal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .title .t-andrews{background:linear-gradient(135deg,var(--gold-deep),var(--gold),var(--gold-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .subtitle{color:var(--text-secondary);font-size:.85rem}
    .subtitle strong{color:var(--blue-bright);font-weight:700}

    .card__body{padding:22px 36px 36px}
    .sec-divider{display:flex;align-items:center;gap:14px;margin-bottom:18px}
    .sec-divider__line{flex:1;height:1px;background:linear-gradient(90deg,rgba(37,99,235,.08),transparent)}
    .sec-divider__line:last-child{background:linear-gradient(270deg,rgba(37,99,235,.08),transparent)}
    .sec-divider__text{font-family:var(--font-mono);font-size:.55rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}

    .tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
    .tab-btn{
      padding:15px 16px;
      border-radius:var(--radius-md);
      border:1.5px solid rgba(37,99,235,.08);
      background:rgba(255,255,255,.55);
      color:var(--text-secondary);
      font-family:var(--font-body);
      font-weight:700;
      font-size:.88rem;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
      position:relative
    }

    .tab-btn:hover{border-color:rgba(37,99,235,.18);transform:translateY(-1px)}
    .tab-btn.is-active{
      border-color:var(--blue-bright);
      background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(14,165,233,.03));
      color:var(--blue-deep);
      box-shadow:0 2px 12px rgba(37,99,235,.10),0 0 0 3px rgba(37,99,235,.04)
    }

    .tab-icon{font-size:1.18rem;line-height:1}
    .mode-description{color:var(--text-muted);font-size:.78rem;line-height:1.6;margin:8px 0 0;padding:0 2px}
    .footer-text{margin-top:28px;text-align:center;font-family:var(--font-mono);font-size:.52rem;letter-spacing:3.5px;color:var(--text-muted);opacity:.35}

    .swal2-popup{
      background:rgba(255,255,255,.98)!important;
      border:1px solid rgba(37,99,235,.08)!important;
      border-radius:24px!important;
      color:var(--text-primary)!important;
      backdrop-filter:blur(16px)!important;
      box-shadow:0 24px 80px rgba(15,23,42,.12),0 4px 20px rgba(37,99,235,.06)!important
    }

    .swal2-title{font-family:var(--font-display)!important;color:var(--text-primary)!important;font-weight:800!important}
    .swal2-html-container{color:var(--text-secondary)!important}
    .swal2-input{
      background:rgba(240,246,255,.78)!important;
      border:1.5px solid rgba(37,99,235,.12)!important;
      color:var(--text-primary)!important;
      border-radius:14px!important;
      font-family:var(--font-body)!important
    }
    .swal2-input:focus{border-color:var(--blue-bright)!important;box-shadow:0 0 0 3px rgba(59,130,246,.10)!important}
    .swal2-confirm{
      background:linear-gradient(135deg,var(--blue-royal),var(--blue-bright))!important;
      color:#fff!important;
      border-radius:12px!important;
      font-family:var(--font-display)!important;
      font-weight:800!important;
      box-shadow:0 2px 8px rgba(37,99,235,.20)!important
    }
    .swal2-cancel{
      background:rgba(241,245,249,.95)!important;
      color:var(--text-secondary)!important;
      border-radius:12px!important;
      font-family:var(--font-display)!important;
      font-weight:700!important;
      border:1px solid rgba(37,99,235,.08)!important
    }

    .login-popup-wrap{padding:2px 4px 0;text-align:left}
    .login-popup-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin:0 0 14px;border-radius:14px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);color:#dc2626;font-size:.82rem;font-weight:700;line-height:1.45}
    .login-popup-subtitle{text-align:center;margin:-3px 0 16px;color:var(--text-secondary);font-size:.88rem;line-height:1.55}
    .login-modal-field{position:relative;margin-bottom:13px}
    .login-modal-symbol{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:1rem;opacity:.72}
    .login-modal-input{
      width:100%;
      height:54px;
      padding:0 48px 0 50px;
      border-radius:16px;
      border:1.5px solid rgba(37,99,235,.13);
      background:rgba(240,246,255,.72);
      outline:none;
      color:var(--text-primary);
      font-family:var(--font-body);
      font-size:.94rem;
      font-weight:700;
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
    }
    .login-modal-input::placeholder{color:var(--text-muted);font-weight:600}
    .login-modal-input:focus{border-color:var(--blue-bright);background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.08)}
    .login-modal-toggle{
      position:absolute;
      right:7px;
      top:50%;
      transform:translateY(-50%);
      width:40px;
      height:40px;
      border:0;
      background:transparent;
      color:var(--text-muted);
      cursor:pointer;
      border-radius:11px;
      display:grid;
      place-items:center;
      font-size:1.05rem
    }
    .login-modal-toggle:hover{background:rgba(37,99,235,.06);color:var(--blue-bright)}
    .login-popup-hint{text-align:center;color:var(--text-muted);font-size:.74rem;line-height:1.5;margin-top:12px}
    .login-swal-popup{width:min(440px,calc(100vw - 28px))!important}
    .login-swal-actions{margin-top:18px!important}
    .login-swal-confirm{width:100%;min-height:48px!important;text-transform:uppercase!important;letter-spacing:.6px!important}
    .login-swal-cancel{min-height:45px!important}

    @media(max-width:540px){
      .page{padding:14px 10px}
      .card__header{padding:30px 20px 22px}
      .card__body{padding:18px 20px 28px}
      .tabs{grid-template-columns:1fr}
      .logo-wrap{width:178px;height:178px}
      .logo-core{width:162px;height:162px}
      .logo-ring-outer{inset:-7px}
      .logo-ring-mid{inset:-3px}
      .title{font-size:1.55rem}
      .card{border-radius:22px}
      .login-swal-popup{width:calc(100vw - 22px)!important}
      #particleCanvas{opacity:.78}
      .scene__orb{filter:blur(42px)}
    }

    @media(max-width:380px){
      .logo-wrap{width:155px;height:155px}
      .logo-core{width:142px;height:142px}
      .card__header{padding:26px 18px 18px}
      .card__body{padding:16px 18px 24px}
      .badge__text{letter-spacing:2px;font-size:.52rem}
    }

    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition:none!important}
      #particleCanvas{display:none!important}
      .logo-ring-outer,.logo-ring-mid{display:none}
    }