/* Maroface login: always dark, full-screen. Stand-alone (does not load style.css). */
:root{
  --lg-bg:#02123a; --lg-ink:#f4f8ff; --lg-soft:#b9cdf2; --lg-hint:#8fb0e6;
  --lg-blue:#1a9bff; --lg-blue-2:#0a5cff; --lg-line:rgba(70,150,255,.38);
  --lg-field:rgba(7,30,84,.72);
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body.lg{
  margin:0;min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;
  font:400 1rem/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--lg-ink);
  background:linear-gradient(145deg,#04206b 0%,#02143f 42%,#010a28 100%) fixed;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;flex-direction:column;
}

/* Background: three soft blue discs that bleed off the corners */
.lg-glow{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.lg-glow-a{ /* top right */
  width:62vmax;height:62vmax;right:-40vmax;top:-40vmax;
  background:radial-gradient(circle at 20% 80%,#0a4cd0 0%,#06308f 40%,#03195a 100%);
  box-shadow:inset 0 0 38px 2px rgba(60,165,255,.8),0 0 70px rgba(20,110,255,.4);
}
.lg-glow-b{ /* bottom left, the big sweep */
  width:110vmax;height:110vmax;left:-72vmax;bottom:-84vmax;
  background:radial-gradient(circle at 78% 18%,#05256f 0%,#031a55 40%,#021340 100%);
  box-shadow:inset 0 0 46px 3px rgba(50,155,255,.85),0 0 90px rgba(10,100,255,.35);
}
.lg-glow-c{ /* faint ring, upper left */
  width:70vmax;height:70vmax;left:-52vmax;top:-30vmax;
  border:1px solid rgba(60,140,255,.18);
  background:radial-gradient(circle at 80% 70%,rgba(20,90,220,.22),transparent 70%);
}

.lg-announce{position:relative;z-index:2;margin:0;padding:10px 16px;text-align:center;font-size:.92rem;font-weight:500;background:rgba(10,92,255,.28);border-bottom:1px solid var(--lg-line);color:var(--lg-ink)}

/* Layout: brand on the left, card on the right; stacked on phones */
.lg-wrap{
  position:relative;z-index:1;flex:1;width:100%;max-width:1320px;margin:0 auto;
  padding:clamp(20px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);align-items:center;gap:clamp(32px,6vw,96px);
}
.lg-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.lg-logo{width:clamp(120px,14vw,190px);height:auto;display:block;filter:drop-shadow(0 10px 28px rgba(20,120,255,.45))}
.lg-word{
  margin:14px 0 6px;font:700 clamp(3rem,5.6vw,4.6rem)/1 Montserrat,Figtree,system-ui,sans-serif;letter-spacing:-.025em;color:#fff;
}
.lg-word span{background:linear-gradient(180deg,#27b0ff,#0d7dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-tag{margin:0;display:flex;align-items:center;gap:14px;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;color:#dce8ff;letter-spacing:.01em}
.lg-tag span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#dce8ff;vertical-align:middle;margin-right:14px;opacity:.9}

/* Card */
.lg-card{
  width:100%;padding:clamp(28px,3.8vw,56px);border-radius:30px;
  background:linear-gradient(165deg,rgba(11,50,128,.58),rgba(3,22,72,.78));
  border:1.5px solid rgba(40,130,255,.75);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(80,160,255,.12),0 0 46px rgba(20,100,255,.28),0 34px 80px rgba(0,8,38,.6);
}
.lg-card h1{margin:0;font:700 clamp(2.1rem,3.4vw,2.9rem)/1.1 Montserrat,Figtree,system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.lg-card h1 span{color:var(--lg-blue)}
.lg-sub{margin:10px 0 26px;font-size:1.12rem;color:var(--lg-soft)}

.lg-form{display:flex;flex-direction:column;gap:18px}
.lg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.lg-field{position:relative;display:block}
.lg-field input{
  width:100%;height:60px;padding:0 54px 0 56px;border-radius:18px;
  background:var(--lg-field);border:1px solid var(--lg-line);color:var(--lg-ink);
  font:500 1.02rem Figtree,system-ui,sans-serif;outline:0;transition:border-color .15s,box-shadow .15s,background .15s;
}
.lg-field input::placeholder{color:var(--lg-hint);opacity:1}
.lg-field input:hover{border-color:rgba(110,180,255,.6)}
.lg-field input:focus{border-color:#4db0ff;background:rgba(9,38,104,.85);box-shadow:0 0 0 4px rgba(40,140,255,.28)}
.lg-field input:-webkit-autofill{-webkit-text-fill-color:var(--lg-ink);caret-color:var(--lg-ink);box-shadow:0 0 0 60px #082463 inset;transition:background-color 9999s}
.lg-ico{position:absolute;left:19px;top:50%;width:26px;height:26px;margin-top:-13px;fill:none;stroke:#46b0ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

.lg-eye{
  position:absolute;right:8px;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;
  background:none;border:0;border-radius:12px;color:var(--lg-soft);cursor:pointer;
}
.lg-eye svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lg-eye .e-on{display:none}
.lg-eye[aria-pressed="true"] .e-on{display:block}
.lg-eye[aria-pressed="true"] .e-off{display:none}
.lg-eye:hover{color:#fff;background:rgba(80,160,255,.14)}

.lg-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:2px}
.lg-check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:1rem;color:var(--lg-ink)}
.lg-check input{
  appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;flex:none;border-radius:7px;cursor:pointer;
  background:var(--lg-field);border:1.5px solid rgba(110,180,255,.6);display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s;
}
.lg-check input:checked{background:linear-gradient(180deg,#1a9bff,#0a62ff);border-color:#3aa6ff}
.lg-check input:checked::after{content:"";width:12px;height:7px;margin-top:-3px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.lg-check input:focus-visible{box-shadow:0 0 0 4px rgba(40,140,255,.35)}

.lg-link{color:var(--lg-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500;border-radius:4px}
.lg-link:hover{color:#6cc0ff}

.lg-btn{
  margin-top:8px;height:62px;border:0;border-radius:18px;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;
  font:700 1.2rem Montserrat,Figtree,system-ui,sans-serif;letter-spacing:.005em;
  background:linear-gradient(180deg,#1ba4ff 0%,#0a62ff 100%);
  box-shadow:0 12px 32px rgba(10,100,255,.45),inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter .15s,transform .1s,box-shadow .15s;
}
.lg-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-btn:hover{filter:brightness(1.1);box-shadow:0 14px 38px rgba(10,110,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn[disabled]{filter:saturate(.6) brightness(.85);cursor:progress}

.lg-new{display:flex;align-items:center;gap:16px;margin:26px 0 12px;color:var(--lg-soft);font-size:.98rem}
.lg-new::before,.lg-new::after{content:"";flex:1;height:1px;background:rgba(120,170,255,.3)}
.lg-create{margin:0;text-align:center;font-size:1.12rem}

.lg-link:focus-visible,.lg-eye:focus-visible,.lg-btn:focus-visible{outline:3px solid #7cc4ff;outline-offset:3px}

.lg-msg{margin:0;padding:12px 14px;border-radius:14px;font-size:.98rem;font-weight:500;line-height:1.4}
.lg-err{background:rgba(255,70,95,.14);border:1px solid rgba(255,120,135,.55);color:#ffdadf}
.lg-ok{background:rgba(40,200,140,.14);border:1px solid rgba(80,220,170,.5);color:#d6fff0}

/* Phones and narrow windows: logo and name on top, card below */
@media (max-width:860px){
  .lg-wrap{grid-template-columns:minmax(0,1fr);max-width:520px;align-content:center;gap:26px;padding:clamp(20px,6vw,32px) 18px 28px}
  .lg-logo{width:96px}
  .lg-word{font-size:clamp(2.6rem,12vw,3.4rem);margin-top:10px}
  .lg-tag{font-size:1.02rem;gap:12px}
  .lg-tag span+span::before{margin-right:12px}
  .lg-card{border-radius:26px;padding:26px 22px}
  .lg-sub{font-size:1.02rem;margin-bottom:22px}
  .lg-field input{height:56px;padding-left:52px;font-size:1rem}
  .lg-ico{left:16px;width:24px;height:24px;margin-top:-12px}
  .lg-btn{height:58px;font-size:1.12rem}
  .lg-row{flex-wrap:nowrap;gap:10px;font-size:.94rem}
  .lg-check{gap:10px;font-size:.94rem;white-space:nowrap}
  .lg-row .lg-link{white-space:nowrap}
  .lg-glow-a{width:90vmax;height:90vmax;right:-66vmax;top:-66vmax}
  .lg-glow-b{width:150vmax;height:150vmax;left:-100vmax;bottom:-124vmax}
}
@media (max-width:400px){.lg-row,.lg-check{font-size:.86rem}.lg-check{gap:8px}.lg-card{padding:24px 18px}}
@media (max-height:620px) and (min-width:861px){.lg-wrap{align-items:start}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (forced-colors:active){
  .lg-card,.lg-field input,.lg-btn{border:1px solid CanvasText}
  .lg-word span{background:none;color:inherit}
}

.lg-link{text-decoration:none} .lg-link:hover{text-decoration:underline}

/* ---------- Continue with Google ---------- */
.lg-or{display:flex;align-items:center;gap:16px;margin:20px 0 14px;color:var(--lg-soft);font-size:.98rem}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:rgba(120,170,255,.3)}
.lg-google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 18px;border-radius:999px;border:1px solid #8e918f;background:#131314;color:#e3e3e3;font:500 1.02rem Roboto,Figtree,Arial,sans-serif;text-decoration:none;transition:background .15s,box-shadow .15s}
.lg-google:hover{background:#1f2023;box-shadow:0 0 0 3px rgba(124,196,255,.25)}
.lg-google:focus-visible{outline:3px solid #7cc4ff;outline-offset:3px}
.lg-google svg{width:20px;height:20px;flex:none}

/* ---------- Join page (register.php) ---------- */
.lg-card > .lg-msg{margin-bottom:16px}
.lg-google + .lg-or{margin-top:20px}
.lg-fw{min-width:0}
.lg-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lg-two .lg-field input{padding:0 12px 0 50px}
.lg-two .lg-ico{left:15px;width:24px;height:24px;margin-top:-12px}
.lg-ferr{display:block;margin:6px 4px 0;color:#ffb4bd;font-size:.9rem;font-weight:500;line-height:1.35}
.lg-field input[aria-invalid="true"]{border-color:rgba(255,120,135,.8)}
.lg-field input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(255,90,110,.25)}
@media (max-width:480px){.lg-two{grid-template-columns:1fr;gap:18px}}
a.lg-btn{text-decoration:none}