/* ═══════════════════════════════════════════════════════════
   LEGEND WIRE  •  ULTIMATE EDITION  —  Login  v3
   Layout : Centered Card  |  Clean Premium Dark
   Default : Day / Light
   ═══════════════════════════════════════════════════════════ */

/* ── Variables — Light (day) ── */
:root {
  color-scheme: light;

  --ac:        #6d5efc;
  --ac2:       #9b6dff;
  --ac-grad:   linear-gradient(135deg,#6d5efc 0%,#9b6dff 100%);
  --ac-glow:   0 10px 36px rgba(109,94,252,.38);
  --ac-ring:   rgba(109,94,252,.24);
  --ac-soft:   rgba(109,94,252,.10);

  /* Background */
  --page-bg:   #f5f3ff;
  --orb-a:     rgba(109,94,252,.18);
  --orb-b:     rgba(155,109,255,.13);

  /* Card */
  --card-bg:   #ffffff;
  --card-bdr:  rgba(109,94,252,.18);
  --card-sh:   0 24px 72px rgba(109,94,252,.14), 0 2px 8px rgba(0,0,0,.06);

  /* Text */
  --tx:        #1a1535;
  --tx-sub:    #5b538a;
  --tx-muted:  #9088c2;
  --tx-faint:  #c0b8e8;
  --tx-hint:   #a099cc;
  --lbl:       #2d2460;

  /* Input */
  --in-bg:     #f4f1ff;
  --in-bdr:    rgba(109,94,252,.20);
  --in-hover:  rgba(109,94,252,.44);
  --in-tx:     #1a1535;
  --in-ph:     #b4acdb;
  --in-ic:     #9b6dff;

  /* Divider */
  --dvd:       rgba(109,94,252,.12);

  /* Status */
  --err-tx:    #b91c1c; --err-bg:rgba(239,68,68,.08); --err-bdr:rgba(239,68,68,.28);
  --ok-tx:     #15803d;  --ok-bg:rgba(34,197,94,.08);  --ok-bdr:rgba(34,197,94,.26);

  --ui:        'Inter',system-ui,-apple-system,sans-serif;
  --brand:     'Manrope','Inter',system-ui,sans-serif;
}

/* ── Variables — Dark (night) ── */
html[data-theme="dark"] {
  color-scheme: dark;

  --page-bg:   #07071a;
  --orb-a:     rgba(109,94,252,.20);
  --orb-b:     rgba(155,109,255,.13);

  --card-bg:   rgba(14,13,30,.90);
  --card-bdr:  rgba(139,120,255,.18);
  --card-sh:   0 32px 80px rgba(0,0,0,.70), 0 0 0 1px rgba(139,120,255,.14);

  --tx:        #edeaff;
  --tx-sub:    #9e96c8;
  --tx-muted:  #6a638c;
  --tx-faint:  #3d3860;
  --tx-hint:   #514a72;
  --lbl:       #cbc6f0;

  --in-bg:     rgba(109,94,252,.07);
  --in-bdr:    rgba(139,120,255,.20);
  --in-hover:  rgba(139,120,255,.44);
  --in-tx:     #edeaff;
  --in-ph:     #4f4870;
  --in-ic:     #9b6dff;

  --dvd:       rgba(139,120,255,.12);

  --err-tx:#fca5a5; --err-bg:rgba(239,68,68,.09);  --err-bdr:rgba(239,68,68,.30);
  --ok-tx: #86efac;  --ok-bg:rgba(34,197,94,.09);   --ok-bdr:rgba(34,197,94,.28);
}

/* ══════════════════════════════
   Reset
══════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh; min-height:100dvh;
  font:14px/1.6 var(--ui);
  color:var(--tx);
  background:var(--page-bg);
  transition:background .3s;
  overflow-x:hidden;
}
::selection{background:rgba(109,94,252,.28);color:#fff}

/* ══════════════════════════════
   Background — smooth glow only, NO grid
══════════════════════════════ */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 10%  5%,  var(--orb-a) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90%  95%, var(--orb-b) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 55%  45%, rgba(109,94,252,.07) 0%, transparent 65%);
  transition:background .3s;
}

/* ══════════════════════════════
   Gate wrapper
══════════════════════════════ */
.gate{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
          max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  gap:20px;
}

/* ══════════════════════════════
   Theme toggle — fixed top-right
══════════════════════════════ */
.theme-seg{
  position:fixed;top:20px;right:20px;z-index:100;
  display:inline-flex;align-items:center;gap:3px;
  padding:4px;border-radius:12px;
  background:var(--card-bg);
  border:1px solid var(--card-bdr);
  box-shadow:0 4px 16px rgba(109,94,252,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.seg-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin:0;padding:6px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--tx-muted);
  font:600 11px/1 var(--ui);letter-spacing:.01em;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s,box-shadow .15s;
}
.seg-ic{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.seg-btn[aria-pressed="true"]{background:var(--ac-grad);color:#fff;box-shadow:var(--ac-glow)}
.seg-btn:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}
@media(max-width:420px){.seg-btn span{display:none}.seg-btn{padding:7px}}

/* ══════════════════════════════
   Card
══════════════════════════════ */
.card{
  width:min(100%,420px);
  background:var(--card-bg);
  border:1px solid var(--card-bdr);
  border-radius:24px;
  box-shadow:var(--card-sh);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  overflow:hidden;
  animation:card-up .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes card-up{
  from{opacity:0;transform:translateY(32px) scale(.97)}
  to  {opacity:1;transform:none}
}

/* Accent top bar */
.card-accent{
  height:3px;
  background:var(--ac-grad);
}

/* ══════════════════════════════
   Card inner padding wrapper
══════════════════════════════ */
.card-body{padding:36px 36px 32px}

/* ══════════════════════════════
   Brand block
══════════════════════════════ */
.brand{
  display:flex;align-items:center;gap:16px;
  margin-bottom:32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--dvd);
}

/* Logo */
.brand-logo{
  display:block;flex:none;
  width:60px;height:60px;
  object-fit:contain;
  border-radius:16px;
  padding:7px;
  background:var(--ac-soft);
  border:1px solid var(--card-bdr);
  box-shadow:0 0 0 5px rgba(109,94,252,.08), 0 8px 24px rgba(109,94,252,.20);
  transition:box-shadow .3s;
}
.brand-logo:hover{box-shadow:0 0 0 7px rgba(109,94,252,.14), 0 12px 32px rgba(109,94,252,.34)}

/* Brand text */
.brand-info{min-width:0}
.brand-name{
  margin:0;
  font:900 18px/1.2 var(--brand);
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--tx);
}
.brand-name em{
  font-style:normal;
  background:var(--ac-grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.brand-edition{
  display:block;margin-top:5px;
  font:600 9.5px/1.3 var(--ui);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ac);
  opacity:.80;
}

/* ══════════════════════════════
   Heading section
══════════════════════════════ */
.form-head{margin-bottom:26px}
.form-head h1{
  margin:0 0 8px;
  font:800 24px/1.25 var(--brand);
  letter-spacing:-.02em;
  color:var(--tx);
}
.form-head p{
  margin:0;
  font:400 13.5px/1.65 var(--ui);
  color:var(--tx-sub);
}

/* ══════════════════════════════
   Form
══════════════════════════════ */
form{margin:0}
.f-label{
  display:block;
  margin-bottom:8px;
  font:600 11px/1.4 var(--ui);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--lbl);
  transition:color .2s;
}
.f-wrap:focus-within .f-label{color:var(--ac)}
.input-wrap{position:relative}
.input-ic{
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%);
  width:17px;height:17px;fill:var(--in-ic);
  opacity:.50;pointer-events:none;flex:none;
  transition:opacity .2s;
}
.input-wrap:focus-within .input-ic{opacity:1}

input[type=text]{
  display:block;width:100%;min-height:52px;
  padding:13px 16px 13px 44px;
  background:var(--in-bg);color:var(--in-tx);
  border:1.5px solid var(--in-bdr);border-radius:12px;
  font:500 15px/1.4 var(--ui);letter-spacing:.01em;
  appearance:none;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
input[type=text]::placeholder{color:var(--in-ph);font-weight:400;font-size:14px}
input[type=text]:hover{border-color:var(--in-hover)}
input[type=text]:focus{
  border-color:var(--ac);
  box-shadow:0 0 0 4px var(--ac-ring);
}
input[type=text][aria-invalid="true"]{border-color:var(--err-bdr);box-shadow:0 0 0 4px rgba(239,68,68,.14)}
input[type=text]:-webkit-autofill{
  -webkit-text-fill-color:var(--in-tx);
  box-shadow:0 0 0 100px var(--in-bg) inset;
}
#cf_token{display:none}
.f-hint{
  margin:7px 0 0;font:400 12px/1.6 var(--ui);
  color:var(--tx-hint);
}

/* Turnstile */
.turnstile-wrap{display:flex;justify-content:center;margin:20px 0;min-height:65px}
.turnstile-wrap:empty{opacity:.4}

/* ══════════════════════════════
   Submit button
══════════════════════════════ */
.submit{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;
  padding:13px 20px;margin-top:20px;
  border:0;border-radius:14px;
  background:var(--ac-grad);color:#fff;
  font:700 14.5px/1.4 var(--brand);letter-spacing:.03em;
  cursor:pointer;touch-action:manipulation;
  box-shadow:var(--ac-glow);
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
/* Shimmer */
.submit::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .55s ease;
}
.submit:hover:enabled::after{transform:translateX(130%)}
.submit:hover:enabled{transform:translateY(-2px);box-shadow:0 18px 48px rgba(109,94,252,.50)}
.submit:active:enabled{transform:translateY(1px);box-shadow:0 4px 16px rgba(109,94,252,.28)}
.submit:focus-visible{outline:3px solid var(--ac2);outline-offset:4px}
.submit:disabled{opacity:.40;cursor:wait;transform:none;box-shadow:none}

.btn-arr{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.18);flex:none;
  transition:transform .2s;
}
.btn-arr svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.submit:hover:enabled .btn-arr{transform:translateX(3px)}

form[aria-busy="true"] .submit::before{
  content:"";width:15px;height:15px;
  border:2.5px solid rgba(255,255,255,.30);
  border-top-color:#fff;border-radius:50%;
  animation:spin .75s linear infinite;flex:none;
}
form[aria-busy="true"] .btn-arr,
form[aria-busy="true"] .btn-lbl{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════
   Status
══════════════════════════════ */
#status{
  display:none;margin-top:16px;padding:12px 15px;
  border-radius:12px;font:400 13px/1.7 var(--ui);
  overflow-wrap:anywhere;animation:spop .22s ease both;
}
@keyframes spop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#status.show{display:block}
#status.error{color:var(--err-tx);background:var(--err-bg);border:1px solid var(--err-bdr)}
#status.ok   {color:var(--ok-tx); background:var(--ok-bg); border:1px solid var(--ok-bdr)}

/* ══════════════════════════════
   Card footer
══════════════════════════════ */
.card-foot{
  display:flex;align-items:center;gap:9px;
  margin-top:28px;padding-top:22px;
  border-top:1px solid var(--dvd);
  color:var(--tx-hint);font:400 12px/1.65 var(--ui);
}
.card-foot svg{
  width:14px;height:14px;flex:none;
  fill:none;stroke:var(--ac2);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.70;
}

/* ══════════════════════════════
   Gate footer text
══════════════════════════════ */
.gate-foot{
  color:var(--tx-faint);
  font:500 10.5px/1.5 var(--ui);
  letter-spacing:.10em;text-transform:uppercase;
}
.gate-foot span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--tx-muted)}

/* ══════════════════════════════
   Responsive
══════════════════════════════ */
@media(max-width:460px){
  .card-body{padding:28px 22px 24px}
  .brand{margin-bottom:24px;padding-bottom:22px}
  .form-head h1{font-size:21px}
}
@media(max-height:640px){
  .gate{justify-content:flex-start;padding-block:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}