/* Omneth Admin — login page (same design language as omneth.com) */
:root{
  --bg:#07060f; --bg-2:#0c0a1a;
  --surface:rgba(255,255,255,.035); --surface-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#eeecff; --text-soft:#b9b6d6; --muted:#8b88a8;
  --brand:#7c6cff; --brand-2:#c04fd0; --accent:#3ee0ff; --ok:#4ade80; --err:#fb7185;
  --serif:'Instrument Serif', Georgia, serif;
  --shine:linear-gradient(100deg, #a99bff 0%, #f0c3ff 25%, #7de8ff 50%, #c04fd0 75%, #a99bff 100%);
}
html[data-theme="light"]{
  --bg:#f7f6fc; --bg-2:#efedf9;
  --surface:rgba(30,20,90,.035); --surface-2:rgba(30,20,90,.065);
  --line:rgba(30,20,90,.09); --line-2:rgba(30,20,90,.16);
  --text:#16122e; --text-soft:#4a4569; --muted:#6d6890;
  --brand:#6a55ff; --brand-2:#b43ad0; --err:#e11d48;
  --shine:linear-gradient(100deg, #5b3cff 0%, #b43ad0 25%, #0891b2 50%, #7c3aed 75%, #5b3cff 100%);
  color-scheme:light;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
svg{ display:block; }
::selection{ background:rgba(124,108,255,.45); color:#fff; }
:focus-visible{ outline:2px solid #b3a9ff; outline-offset:3px; border-radius:8px; }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important;
}
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.shine{ background-image:var(--shine); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 8s linear infinite; }
@keyframes shine{ to{ background-position:200% center; } }

.login{ display:grid; grid-template-columns: 1.12fr 1fr; min-height:100vh; }

/* ---------- visual side ---------- */
.visual{
  position:relative; overflow:hidden; isolation:isolate; margin:14px 0 14px 14px; border-radius:28px;
  background:linear-gradient(160deg, #120d2e, #0a0818 60%); border:1px solid rgba(255,255,255,.08);
  --text:#eeecff; --text-soft:#b9b6d6; --muted:#8b88a8; color:var(--text);
  --shine:linear-gradient(100deg, #a99bff 0%, #f0c3ff 25%, #7de8ff 50%, #c04fd0 75%, #a99bff 100%);
}
.aurora{ position:absolute; inset:0; z-index:-2; }
.aurora i{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.6; mix-blend-mode:screen; animation:drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1){ width:520px; height:520px; left:-140px; top:-120px; background:#5b3cff; }
.aurora i:nth-child(2){ width:460px; height:460px; right:-140px; top:30%; background:#b43ad0; animation-duration:22s; animation-delay:-6s; }
.aurora i:nth-child(3){ width:380px; height:380px; left:25%; bottom:-160px; background:#0ea5c6; opacity:.35; animation-duration:26s; animation-delay:-12s; }
@keyframes drift{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(50px,40px) scale(1.1); } 100%{ transform:translate(-30px,70px) scale(.95); } }
.grid-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 65% at 40% 40%, #000 20%, transparent 80%); mask-image:radial-gradient(75% 65% at 40% 40%, #000 20%, transparent 80%);
}
#net{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.v-inner{ position:relative; height:100%; display:flex; flex-direction:column; padding:40px 48px; gap:40px; }

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em; text-decoration:none; }
.mark{
  width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(from 200deg, #7c6cff, #c04fd0, #3ee0ff, #7c6cff); box-shadow:0 0 24px -4px rgba(124,108,255,.8);
}
.mark svg{ width:17px; height:17px; }

.v-copy{ margin-top:auto; max-width:520px; }
.kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#b3a9ff; margin-bottom:16px; }
.kicker::before{ content:''; width:18px; height:1px; background:linear-gradient(90deg, transparent, #b3a9ff); }
.v-copy h2{ font-size:clamp(38px, 4.4vw, 62px); line-height:1.02; letter-spacing:-.045em; margin:0 0 18px; font-weight:800; }
.v-copy p{ font-size:17px; line-height:1.65; color:var(--text-soft); margin:0; max-width:440px; }

.stack{ position:relative; height:250px; max-width:520px; }
.glass{
  position:absolute; border-radius:18px; padding:16px 18px;
  background:rgba(18,14,40,.62); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  animation:float 7s ease-in-out infinite;
}
.g1{ left:0; top:0; width:78%; }
.g2{ right:0; top:118px; width:62%; display:flex; gap:12px; align-items:center; animation-delay:-2.3s; }
.g3{ left:6%; top:186px; width:56%; display:flex; gap:12px; align-items:center; animation-delay:-4.6s; }
@keyframes float{ 50%{ transform:translateY(-8px); } }
.g-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-soft); }
.g-head .pill{ margin-left:auto; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff; background:linear-gradient(135deg, #7c6cff, #c04fd0); }
.spark{ width:100%; height:70px; margin-top:10px; }
.spark .ln{ stroke-dasharray:420; stroke-dashoffset:420; animation:draw 2.4s cubic-bezier(.4,0,.2,1) .4s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.gi{ width:38px; height:38px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #7c6cff, #c04fd0); }
.gi svg{ width:18px; height:18px; color:#fff; }
.glass b{ display:block; font-size:14px; margin-bottom:2px; }
.glass span{ display:block; font-size:12.5px; color:var(--muted); }
.dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.dot.ok{ background:var(--ok); box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2s ease-out infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } }
.v-foot{ font-size:12.5px; color:var(--muted); }

/* ---------- form side ---------- */
.side{ position:relative; display:flex; flex-direction:column; padding:28px 40px; min-height:100vh; }
.side::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 40% at 70% 20%, rgba(124,108,255,.12), transparent 70%);
}
.side-top{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.brand-m{ display:none; margin-right:auto; }
.theme-toggle{
  position:relative; width:40px; height:40px; border-radius:50%; cursor:pointer; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.theme-toggle:hover{ background:var(--surface-2); transform:rotate(-12deg); }
.theme-toggle svg{ position:absolute; width:18px; height:18px; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.theme-toggle .sun{ opacity:0; transform:translateY(20px) rotate(-90deg); }
html[data-theme="light"] .theme-toggle .sun{ opacity:1; transform:none; }
html[data-theme="light"] .theme-toggle .moon{ opacity:0; transform:translateY(-20px) rotate(90deg); }

.form-wrap{ width:100%; max-width:400px; margin:auto; padding:40px 0; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--text-soft); background:var(--surface); border:1px solid var(--line-2); margin-bottom:22px; }
h1{ font-size:clamp(34px, 3.4vw, 46px); line-height:1.05; letter-spacing:-.04em; margin:0 0 10px; font-weight:800; }
.sub{ color:var(--text-soft); font-size:16px; margin:0 0 30px; }

.error{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; margin-bottom:20px; font-size:14px; font-weight:500;
  color:var(--err); background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); animation:shake .4s ease;
}
.error svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
@keyframes shake{ 20%,60%{ transform:translateX(-5px); } 40%,80%{ transform:translateX(5px); } }

form{ display:grid; gap:18px; }
.field{ display:grid; gap:8px; }
.lbl{ font-size:13.5px; font-weight:600; color:var(--text-soft); }
.ctrl{
  position:relative; display:flex; align-items:center; border-radius:14px;
  background:var(--surface); border:1px solid var(--line-2); transition:border-color .2s, box-shadow .2s, background .2s;
}
.ctrl > svg{ width:18px; height:18px; margin-left:15px; color:var(--muted); flex:0 0 auto; transition:color .2s; }
.ctrl:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(124,108,255,.18); background:var(--surface-2); }
.ctrl:focus-within > svg{ color:var(--brand); }
.ctrl.invalid{ border-color:var(--err); box-shadow:0 0 0 4px rgba(251,113,133,.15); }
.ctrl input{
  flex:1; min-width:0; font:inherit; font-size:15.5px; color:var(--text); background:transparent; border:0; outline:none; padding:15px 14px 15px 12px;
}
.ctrl input::placeholder{ color:var(--muted); opacity:.7; }
.ctrl input:-webkit-autofill{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 100px transparent inset; transition:background-color 9999s; }
.peek{ position:relative; width:44px; height:44px; margin-right:4px; border:0; background:none; color:var(--muted); cursor:pointer; border-radius:10px; }
.peek:hover{ color:var(--text); }
.peek svg{ position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); }
.peek .eye-off, .peek.on .eye{ display:none; }
.peek.on .eye-off{ display:block; }
.caps{ display:none; font-size:12.5px; font-weight:600; color:#fbbf24; }
.caps.show{ display:block; }

.submit{
  position:relative; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px 20px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-size:16px; font-weight:600; color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 12px 30px -10px rgba(124,108,255,.9), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.submit:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(192,79,208,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.submit .arrow{ width:17px; height:17px; transition:transform .2s; }
.submit:hover .arrow{ transform:translateX(3px); }
.submit .spin{ display:none; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; }
.submit.loading{ opacity:.85; cursor:progress; transform:none; }
.submit.loading .arrow{ display:none; }
.submit.loading .spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.secure{ display:flex; gap:10px; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.secure svg{ width:17px; height:17px; flex:0 0 auto; color:var(--ok); }

.side-foot{ display:flex; justify-content:space-between; gap:16px; font-size:13.5px; }
.side-foot a{ display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); text-decoration:none; font-weight:500; }
.side-foot a:hover{ color:var(--text); }
.side-foot svg{ width:15px; height:15px; transition:transform .2s; }
.side-foot a:hover svg{ transform:translateX(-3px); }

/* light theme tweaks */
html[data-theme="light"] .ctrl{ background:#fff; }
html[data-theme="light"] .badge{ background:#fff; }
html[data-theme="light"] .visual{ border-color:rgba(30,20,90,.1); box-shadow:0 30px 60px -30px rgba(40,30,110,.45); }

/* responsive */
@media (max-width: 960px){
  .login{ grid-template-columns:1fr; }
  .visual{ display:none; }
  .brand-m{ display:inline-flex; }
  .side{ padding:20px 20px 24px; }
  .side::before{ background:radial-gradient(70% 35% at 20% 0%, rgba(124,108,255,.28), transparent 70%), radial-gradient(60% 30% at 100% 10%, rgba(192,79,208,.22), transparent 70%); }
  .form-wrap{ padding:48px 0 32px; }
}
@media (max-height: 760px) and (min-width: 961px){
  .stack{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .spark .ln{ stroke-dashoffset:0; }
}

/* 2FA step */
.code-input{ font-family:var(--mono, ui-monospace, Consolas, monospace) !important; font-size:20px !important; letter-spacing:.25em; }
.hint2{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.hint2 code{ font-size:12px; padding:1px 6px; border-radius:6px; background:var(--surface); border:1px solid var(--line-2); }
.cancel2{ display:block; margin-top:14px; text-align:center; font-size:13.5px; color:var(--muted); text-decoration:none; }
.cancel2:hover{ color:var(--text); }
.notice.warnish{ color:#fbbf24; background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.3); }

/* ---------- support portal additions (appended to the shared login.css) ---------- */
span.brand{ cursor:default; }
.notice{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; margin-bottom:20px; font-size:14px; font-weight:500; color:var(--ok); background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); }
.notice svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.row-between{ display:flex; justify-content:space-between; align-items:center; margin-top:-6px; }
.link{ color:var(--brand); font-weight:600; font-size:13.5px; text-decoration:none; }
.link:hover{ text-decoration:underline; }
.secure .link{ font-size:13px; }
.gtext{ margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-soft); }
.who{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line-2); }
.who .avatar{ width:38px; height:38px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; text-transform:uppercase; background:linear-gradient(135deg, var(--brand), var(--brand-2)); }
.who b{ display:block; font-size:14.5px; }
.who span{ display:block; font-size:12.5px; color:var(--muted); }
a.submit{ text-decoration:none; }