/* Εστία — κοινό στυλ pre-login (login + εγγραφή). Φουτουριστικό AI περιβάλλον. */
:root{ --cyan:#38bdf8; --cyan2:#22d3ee; }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 20px 70px;
  color:#e7f1f7; position:relative; overflow:hidden;
  background:radial-gradient(1200px 700px at 75% -10%, #1c4a5e 0%, rgba(28,74,94,0) 55%),
             radial-gradient(900px 600px at 10% 110%, #123747 0%, rgba(18,55,71,0) 55%),
             linear-gradient(160deg, #0a1620 0%, #0e2330 45%, #0a1a24 100%);
}
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }
.orb{ position:fixed; border-radius:50%; filter:blur(60px); opacity:.35; z-index:0; pointer-events:none; animation:float 14s ease-in-out infinite; }
.orb.a{ width:340px; height:340px; top:-80px; right:-60px; background:radial-gradient(circle, var(--cyan) 0%, transparent 70%); }
.orb.b{ width:300px; height:300px; bottom:-40px; left:-70px; background:radial-gradient(circle, #1c4a5e 0%, transparent 70%); animation-delay:-6s; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(26px) } }

.langbar{ position:fixed; top:16px; right:18px; z-index:6; }
.lang-btn{ display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; cursor:pointer; color:#cfe6f2; font-size:13px;
  background:rgba(18,33,44,.5); border:1px solid rgba(120,180,210,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lang-btn:hover{ background:rgba(18,33,44,.72); }
.lang-btn i.ti-world{ font-size:17px; }
.lang-btn .chev{ font-size:13px; opacity:.7; transition:transform .2s; }
.langbar.open .chev{ transform:rotate(180deg); }
.lang-pop{ position:absolute; top:48px; right:0; min-width:188px; padding:6px; display:none; z-index:7;
  background:rgba(14,28,38,.94); border:1px solid rgba(120,180,210,.2); border-radius:14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 18px 44px rgba(0,0,0,.5); }
.langbar.open .lang-pop{ display:block; }
.lang-opt{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:#dceaf2; text-decoration:none; font-size:13.5px; }
.lang-opt:hover{ background:rgba(56,189,248,.12); }
.lang-opt.on{ color:#7fd3f5; font-weight:600; }
.lang-opt .fl{ font-size:17px; }

.card{
  position:relative; z-index:2; width:100%; max-width:410px; padding:40px 38px;
  background:linear-gradient(180deg, rgba(18,33,44,.72), rgba(12,24,33,.66));
  border:1px solid rgba(120,180,210,.22); border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px) scale(.98) } to{ opacity:1; transform:none } }
.card::before{ content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, rgba(56,189,248,.55), rgba(0,0,0,0) 42%, rgba(0,0,0,0) 58%, rgba(56,189,248,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; }

.logo-wrap{ display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.logo-wrap img{ display:block; height:88px; max-width:240px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(56,189,248,.30)); }
.brandname{ text-align:center; font-family:var(--auth-font, 'Space Grotesk',-apple-system,sans-serif); font-size:23px; font-weight:600; letter-spacing:.5px; color:#fff; }
.tagline{ text-align:center; font-family:var(--auth-font, 'Space Grotesk',-apple-system,sans-serif); font-size:13.5px; font-weight:300;
  letter-spacing:.6px; color:#a9cfe1; margin-top:7px; }
.badge-ai{ display:flex; width:max-content; margin:13px auto 0; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#bfe6f5; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.3); padding:4px 10px; border-radius:999px; }
.badge-ai .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan2); box-shadow:0 0 8px var(--cyan2); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.logo-block{ margin-bottom:24px; }

.form-group{ margin-bottom:15px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
label{ display:block; font-size:12.5px; font-weight:500; color:#a8c6d6; margin-bottom:7px; letter-spacing:.2px; }
input, select{ width:100%; padding:12px 14px; border:1.5px solid rgba(120,170,200,.28); border-radius:12px; font-size:15px;
  color:#eaf4fa; background:rgba(8,18,26,.55); transition:border-color .2s, box-shadow .2s; }
input::placeholder{ color:#6f8a9b; }
select{ color:#cfe6f2; }
input:focus, select:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(56,189,248,.16); background:rgba(8,18,26,.8); }
.hint{ font-size:11px; color:#7e9aab; margin-top:4px; }
button[type=submit]{ width:100%; padding:14px; border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer;
  color:#06222e; margin-top:8px; letter-spacing:.3px; background:linear-gradient(100deg, var(--cyan) 0%, var(--cyan2) 100%);
  box-shadow:0 10px 26px rgba(56,189,248,.35); transition:transform .12s, box-shadow .2s, filter .2s; }
button[type=submit]:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(56,189,248,.5); transform:translateY(-1px); }
button[type=submit]:active{ transform:translateY(0); }

.oauth{ display:flex; flex-direction:column; gap:10px; }
.oauth-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(150,200,225,.2); color:#eaf4fa; font-size:14px; font-weight:500; }
.oauth-btn:hover{ background:rgba(255,255,255,.12); }
.oauth-btn i{ font-size:19px; }
.oauth-btn.google i{ color:#ea4335; }
.divider{ display:flex; align-items:center; gap:12px; color:#6f8a9b; font-size:12px; margin:16px 0; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:rgba(150,200,225,.18); }

.msg{ border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:15px; text-align:center; }
.error{ background:rgba(220,60,60,.14); color:#ffb4b4; border:1px solid rgba(220,60,60,.4); }
.ok{ background:rgba(34,197,94,.14); color:#9af0bf; border:1px solid rgba(34,197,94,.4); }
.link{ text-align:center; margin-top:18px; font-size:13px; }
.link a{ color:var(--cyan); font-weight:600; text-decoration:none; }

.auth-foot{ position:fixed; left:0; right:0; bottom:0; z-index:4; padding:13px 22px; display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:#7e9aab; border-top:1px solid rgba(150,200,225,.12);
  background:linear-gradient(0deg, rgba(8,18,26,.6), rgba(8,18,26,0)); }
.auth-foot .cright a{ color:#9fc0d2; text-decoration:none; }
.auth-social{ display:flex; gap:16px; font-size:17px; }
.auth-social a{ color:#9fc0d2; opacity:.78; transition:color .2s, opacity .2s; }
.auth-social a:hover{ color:#fff; opacity:1; }

.toast{ position:fixed; left:50%; bottom:72px; transform:translateX(-50%) translateY(20px); z-index:120; background:#15242f; color:#eaf4fa;
  padding:10px 18px; border-radius:10px; font-size:13px; border:1px solid rgba(120,180,210,.2); box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:480px){
  .auth-foot{ flex-direction:column; gap:8px; text-align:center; }
  .card{ padding:32px 24px; }
}