/* Shared design tokens + components for the NETQO ID auth pages
   (login / register / forgot-password / reset-password / verify-email /
   account). Deliberately reuses the exact tokens, fonts, and starfield
   background from the NETQO homepage (public/index.html) so these feel like
   the same product, not a bolted-on "SaaS template" auth flow. */

:root{
  --bg: #050506;
  --ink: #f5f5f7;
  --ink-dim: #b9b9c2;
  --ink-faint: #7a7a86;
  --line: rgba(255,255,255,0.14);
  --panel: rgba(255,255,255,0.05);
  --panel-2: rgba(255,255,255,0.09);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); min-height:100%; }
body{
  font-family:'Be Vietnam Pro','Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,.brand,.display{ font-family:'Orbitron','Be Vietnam Pro',sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:#fff; color:#000; }

#starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.04), transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(255,255,255,0.05), transparent 55%),
    #050506;
}
#starCanvas{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* Fixed, full-bleed bar that gets a blurred background once the page
   scrolls — identical behavior/markup split to the homepage's <header>/.wrap
   (public/index.html), so the language switch sits in exactly the same
   spot and looks/behaves the same on every NETQO page. */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:20px 0;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(5,5,6,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar .logo-img{ height:26px; width:auto; }
.topbar-right{ display:flex; align-items:center; gap:14px; }

/* ---------- language switch (shared with the homepage) ---------- */
.lang-switch{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line); color:var(--ink);
  font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.lang-btn:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.35); }
.lang-btn svg{ transition:transform .2s ease; }
.lang-switch.open .lang-btn svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:rgba(8,8,10,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:14px; padding:6px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:60;
}
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-option{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px;
  background:transparent; border:none; color:var(--ink-dim); font-family:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.lang-option:hover{ background:rgba(255,255,255,0.08); color:var(--ink); }
.lang-option.active{ color:#fff; }
.lang-option.active::before{ content:'\2713  '; }

.auth-wrap{
  position:relative; z-index:2; flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:140px 20px 64px;
}
.auth-card{
  width:100%; max-width:420px; background:rgba(12,12,15,0.72);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px 34px 34px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  animation:fadeUp .7s ease both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

.auth-card .logo-img{ height:24px; width:auto; margin-bottom:26px; }
.auth-card h1{ font-size:23px; font-weight:800; margin:0 0 8px; letter-spacing:-0.2px; }
.auth-card p.sub{ color:var(--ink-dim); font-size:14px; margin:0 0 26px; line-height:1.6; }

.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  padding:14px 18px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--ink); font-weight:700; font-size:14.5px; cursor:pointer; margin-bottom:12px;
  transition:background .2s ease, border-color .2s ease, transform .15s ease; font-family:inherit;
}
.oauth-btn:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.35); }
.oauth-btn:active{ transform:scale(0.98); }
.oauth-btn svg{ width:19px; height:19px; flex-shrink:0; }
.oauth-btn:disabled{ opacity:.4; cursor:not-allowed; }

.divider{
  display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--ink-faint);
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
}
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-dim); margin-bottom:8px; letter-spacing:.3px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"]{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,0.04); color:var(--ink); font-size:14.5px; font-family:inherit;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus{ outline:none; border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.07); }
.field input::placeholder{ color:var(--ink-faint); }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin:18px 0 22px; }
.checkbox-row input{ margin-top:3px; accent-color:#fff; width:16px; height:16px; flex-shrink:0; }
.checkbox-row label{ font-size:13px; color:var(--ink-dim); line-height:1.6; }
.checkbox-row a{ color:var(--ink); font-weight:600; text-decoration:underline; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-weight:700; font-size:14.5px;
  cursor:pointer; border:1px solid transparent; transition:transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-family:inherit; white-space:nowrap; width:100%;
}
.btn:active{ transform:scale(0.98); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:#fff; color:#000; }
.btn-primary:hover:not(:disabled){ box-shadow:0 0 0 1px #fff, 0 0 26px rgba(255,255,255,0.4); }
.btn-ghost{ background:rgba(255,255,255,0.04); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.35); }

.form-links{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:13px; }
.form-links a{ color:var(--ink-dim); font-weight:600; }
.form-links a:hover{ color:var(--ink); }

.foot-line{ text-align:center; font-size:13.5px; color:var(--ink-dim); margin-top:26px; }
.foot-line a{ color:var(--ink); font-weight:700; text-decoration:underline; }

.alert{
  padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.6; margin-bottom:18px;
  border:1px solid var(--line); display:none;
}
.alert.show{ display:block; }
.alert-error{ background:rgba(255,90,90,0.08); border-color:rgba(255,90,90,0.35); color:#ffb4b4; }
.alert-success{ background:rgba(120,255,180,0.08); border-color:rgba(120,255,180,0.35); color:#b8ffd4; }
.alert-info{ background:rgba(255,255,255,0.06); border-color:var(--line); color:var(--ink-dim); }

.spinner{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(0,0,0,0.25); border-top-color:#000;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- account page ---------- */
.account-wrap{ position:relative; z-index:2; flex:1; max-width:640px; margin:0 auto; width:100%; padding:140px 20px 80px; }
.account-header{ display:flex; align-items:center; gap:18px; padding:28px 0 8px; }
.avatar-circle{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #fff, #b7b7bf 55%, #6d6d78 100%);
  display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:22px; color:#0a0a0c; overflow:hidden;
  box-shadow:0 0 30px rgba(255,255,255,0.15);
}
.avatar-circle img{ width:100%; height:100%; object-fit:cover; }
.account-header h1{ font-size:21px; font-weight:800; margin:0 0 4px; }
.account-header .meta{ color:var(--ink-dim); font-size:13.5px; }

.account-section{
  margin-top:28px; padding:26px 24px; border-radius:var(--radius-md);
  background:var(--panel); border:1px solid var(--line);
}
.account-section h2{ font-size:15px; font-weight:800; margin:0 0 18px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-dim); }
.provider-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
}
.provider-row:first-of-type{ border-top:none; padding-top:0; }
.provider-row .p-name{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:14.5px; }
.provider-row .p-name svg{ width:19px; height:19px; }
.provider-badge{
  font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; border:1px solid var(--line);
}
.provider-badge.linked{ background:rgba(120,255,180,0.08); border-color:rgba(120,255,180,0.3); color:#b8ffd4; }
.provider-btn{
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.provider-btn:hover:not(:disabled){ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.35); }
.provider-btn:disabled{ opacity:.35; cursor:not-allowed; }
.provider-btn.danger:hover:not(:disabled){ border-color:rgba(255,90,90,0.5); color:#ffb4b4; }

.logout-row{ margin-top:32px; text-align:center; }
.logout-row button{
  background:none; border:none; color:var(--ink-faint); font-size:13.5px; font-weight:600;
  cursor:pointer; text-decoration:underline;
}
.logout-row button:hover{ color:var(--ink); }

@media (max-width:520px){
  .auth-card{ padding:30px 22px 26px; }
}

/* ---------- account page: dashboard redesign ---------- */
.account-wrap{ max-width:760px; }

.profile-head{ display:flex; align-items:center; gap:20px; padding:8px 0 4px; flex-wrap:wrap; }
.avatar-frame{
  position:relative; width:84px; height:84px; border-radius:50%; flex-shrink:0;
  padding:4px; display:flex; align-items:center; justify-content:center;
}
.avatar-frame .avatar-circle{ width:100%; height:100%; margin:0; box-shadow:none; }
.avatar-frame-none{ background:rgba(255,255,255,0.1); }
.avatar-frame-gold{ background:conic-gradient(from 0deg,#ffd76a,#fff3c4,#c9922c,#fff3c4,#ffd76a); }
.avatar-frame-neon{ background:conic-gradient(from 0deg,#5ef1ff,#7a5cff,#ff5ec4,#7a5cff,#5ef1ff); }
.avatar-frame-galaxy{ background:conic-gradient(from 0deg,#2b1055,#7597de,#c9d6ff,#7597de,#2b1055); }
.avatar-frame-emerald{ background:conic-gradient(from 0deg,#0ba360,#3cba92,#a8ff78,#3cba92,#0ba360); }
.avatar-frame-ruby{ background:conic-gradient(from 0deg,#8e0e00,#ff6a00,#ffd200,#ff6a00,#8e0e00); }
.avatar-edit-btn{
  position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%;
  background:#fff; color:#000; border:2px solid var(--bg); display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.profile-head h1{ font-size:21px; font-weight:800; margin:0 0 4px; }
.profile-head .meta{ color:var(--ink-dim); font-size:13.5px; }

.tabbar{ display:flex; gap:6px; margin:26px 0 22px; border-bottom:1px solid var(--line); }
.tab-btn{
  background:none; border:none; color:var(--ink-dim); font-family:inherit; font-weight:700; font-size:14px;
  padding:10px 4px; margin-right:20px; cursor:pointer; position:relative; top:1px;
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--ink); border-bottom-color:#fff; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .4s ease both; }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.stat-card{
  padding:18px 16px; border-radius:var(--radius-md); background:var(--panel); border:1px solid var(--line);
}
.stat-card .stat-label{ font-size:12px; color:var(--ink-dim); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.stat-card .stat-value{ font-family:'Orbitron',sans-serif; font-size:22px; font-weight:700; }
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

.dash-actions{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.dash-actions .btn{ width:auto; padding:11px 22px; }

.tx-list{ margin-top:6px; }
.tx-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-top:1px solid var(--line); font-size:13.5px;
}
.tx-row:first-child{ border-top:none; }
.tx-row .tx-note{ color:var(--ink-dim); }
.tx-row .tx-amount.positive{ color:#b8ffd4; font-weight:700; }
.tx-row .tx-amount.pending{ color:#ffe08a; font-weight:700; }
.tx-empty{ color:var(--ink-faint); font-size:13.5px; padding:6px 0; }

.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .app-grid{ grid-template-columns:1fr; } }
.app-card{
  display:block; padding:20px; border-radius:var(--radius-md); background:var(--panel); border:1px solid var(--line);
  transition:border-color .2s ease, background .2s ease;
}
.app-card:not(.disabled):hover{ border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.08); }
.app-card.disabled{ opacity:.5; cursor:default; }
.app-card .app-cat{ font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-faint); font-weight:800; margin-bottom:8px; }
.app-card .app-name{ font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; margin-bottom:8px; }
.app-card .app-desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; }

.settings-block{ margin-bottom:30px; }
.settings-block h2{ font-size:15px; font-weight:800; margin:0 0 16px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-dim); }
.name-form{ display:flex; gap:10px; }
.name-form input{ flex:1; }
.name-form .btn{ width:auto; padding:13px 20px; }

.frame-picker{ display:flex; gap:12px; flex-wrap:wrap; }
.frame-swatch{
  width:44px; height:44px; border-radius:50%; padding:3px; cursor:pointer; border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
}
.frame-swatch.selected{ border-color:#fff; }
.frame-swatch-inner{ width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.08); }
.frame-swatch.avatar-frame-gold{ background:conic-gradient(from 0deg,#ffd76a,#fff3c4,#c9922c,#fff3c4,#ffd76a); }
.frame-swatch.avatar-frame-neon{ background:conic-gradient(from 0deg,#5ef1ff,#7a5cff,#ff5ec4,#7a5cff,#5ef1ff); }
.frame-swatch.avatar-frame-galaxy{ background:conic-gradient(from 0deg,#2b1055,#7597de,#c9d6ff,#7597de,#2b1055); }
.frame-swatch.avatar-frame-emerald{ background:conic-gradient(from 0deg,#0ba360,#3cba92,#a8ff78,#3cba92,#0ba360); }
.frame-swatch.avatar-frame-ruby{ background:conic-gradient(from 0deg,#8e0e00,#ff6a00,#ffd200,#ff6a00,#8e0e00); }

.modal-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.65); display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
.modal-overlay.show{ display:flex; }
.modal-card{
  width:100%; max-width:420px; background:rgba(14,14,17,0.96); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; animation:fadeUp .3s ease both;
}
.modal-card h3{ font-size:18px; font-weight:800; margin:0 0 6px; }
.modal-card .modal-sub{ color:var(--ink-dim); font-size:13px; margin:0 0 20px; line-height:1.6; }
.amount-quick{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.amount-quick button{
  padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,0.04);
  color:var(--ink); font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.amount-quick button.selected{ background:#fff; color:#000; border-color:#fff; }
.method-row{ display:flex; gap:8px; margin:4px 0 16px; flex-wrap:wrap; }
.method-row label{
  display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px; border:1px solid var(--line);
  font-size:12.5px; cursor:pointer; color:var(--ink-dim);
}
.method-row input{ accent-color:#fff; }
.modal-close{
  position:absolute; top:20px; right:20px; background:none; border:none; color:var(--ink-faint);
  font-size:18px; cursor:pointer; line-height:1;
}
.modal-card{ position:relative; }