/* SSO Portal — Stylesheet */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #060810;
  --surface: #0e1120;
  --border:  rgba(124,58,237,.2);
  --accent:  #7c3aed;
  --accent2: #4f46e5;
  --text:    #e2e8f0;
  --muted:   #94a3b8;
  --dim:     #4b5563;
  --sidebar-w: 240px;
}
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: #080a17; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar-brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.25rem 1rem; border-bottom: 1px solid var(--border);
  font-weight: 900; font-size: 1rem; color: var(--text);
}
.brand-dot { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; color: #fff; flex-shrink: 0; }
.brand-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; color: #fff; flex-shrink: 0; }
.sidebar-nav { flex: 1; padding: .75rem 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .6rem 1rem; text-decoration: none; color: var(--muted); font-size: .875rem; font-weight: 500; border-radius: 8px; margin: .1rem .5rem; transition: all .15s; }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item.active { background: rgba(124,58,237,.15); color: var(--accent); }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; }
.nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: .75rem 1rem .25rem; font-weight: 600; }
.sidebar-footer { padding: .85rem 1rem; border-top: 1px solid var(--border); }
.user-row { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .88rem; flex-shrink: 0; }
.user-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .72rem; color: var(--muted); text-transform: capitalize; }
.btn-signout { width: 100%; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; padding: .45rem; border-radius: 7px; font-size: .82rem; cursor: pointer; }
.btn-signout:hover { background: rgba(239,68,68,.2); }
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; padding: 2rem; max-width: calc(1060px + var(--sidebar-w)); }

/* ── Public pages ──────────────────────────────────────────────────────────── */
.bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(124,58,237,.12), transparent); }
.public-page, .auth-page { background: var(--bg); }
.public-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: .75rem 2rem; background: rgba(6,8,16,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-brand { font-weight: 800; color: var(--text); }
.nav-brand .brand-dot { display: inline-flex; width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg,var(--accent),var(--accent2)); align-items: center; justify-content: center; font-size: .7rem; font-weight: 900; color: #fff; vertical-align: middle; margin-right: 4px; }
.nav-actions { display: flex; gap: .75rem; }
.landing-hero { min-height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1; }
.hero-inner { max-width: 640px; padding: 2rem; }
.hero-badge { background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); border-radius: 99px; padding: .3rem .9rem; font-size: .8rem; color: #a78bfa; display: inline-block; margin-bottom: 1.5rem; }
.hero-inner h1 { font-size: clamp(2.4rem,6vw,3.8rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; }
.gradient-text { background: linear-gradient(135deg,var(--accent),#818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-inner p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.features-section { position: relative; z-index: 1; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.section-inner { max-width: 960px; margin: 0 auto; padding: 4rem 2rem; }
.section-title { font-size: 1.8rem; font-weight: 800; text-align: center; margin-bottom: 2.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1.25rem; }
.feature-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 1.5rem; }
.feat-icon { font-size: 2rem; margin-bottom: .75rem; }
.feature-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: .4rem; }
.feature-card p  { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.services-section { position: relative; z-index: 1; }
.services-row { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.service-pill { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); border-radius: 99px; padding: .5rem 1.25rem; font-size: .9rem; font-weight: 600; color: #a78bfa; text-decoration: none; transition: background .15s; }
.service-pill:hover { background: rgba(124,58,237,.2); }
.site-footer { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.06); padding: 2.5rem 2rem; }
.footer-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-brand { font-weight: 800; color: var(--accent); }
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: .84rem; }
.footer-copy { font-size: .8rem; color: var(--dim); }

/* ── Auth pages ────────────────────────────────────────────────────────────── */
.auth-page { display: flex; min-height: 100vh; }
.auth-container { margin: auto; width: 100%; max-width: 460px; padding: 2rem; position: relative; z-index: 1; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; margin-bottom: 1rem; }
.auth-brand { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg,var(--accent),var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.3rem; color: #fff; margin: 0 auto 1.5rem; }
.auth-title { font-size: 1.5rem; font-weight: 900; text-align: center; margin-bottom: .35rem; }
.auth-sub   { font-size: .88rem; color: var(--muted); text-align: center; margin-bottom: 1.75rem; }
.auth-form  { display: flex; flex-direction: column; gap: 1rem; }
.auth-footer { text-align: center; font-size: .84rem; color: var(--muted); margin-top: 1.25rem; }
.auth-footer a { color: var(--accent); text-decoration: none; }
.auth-services { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2); border-radius: 12px; padding: 1.1rem 1.25rem; }
.auth-services-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); margin-bottom: .6rem; }
.services-row-sm { display: flex; gap: .5rem; flex-wrap: wrap; }
.service-chip { background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.25); border-radius: 99px; padding: .25rem .7rem; font-size: .78rem; color: #a78bfa; }
.register-perks { list-style: none; }
.register-perks li { font-size: .85rem; color: var(--muted); padding: .25rem 0; }
.register-perks li::before { content: ""; }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.75rem; }
.page-title  { font-size: 1.5rem; font-weight: 800; }
.page-sub    { color: var(--muted); font-size: .88rem; margin-top: .25rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon  { font-size: 1.75rem; }
.stat-value { font-size: 1.35rem; font-weight: 800; }
.stat-label { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.panel-header h2 { font-size: .9rem; font-weight: 700; }
.panel-danger { border-color: rgba(239,68,68,.25); }
.list-row { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.list-row:last-child { border-bottom: none; }
.list-icon { font-size: 1.2rem; flex-shrink: 0; }
.list-title { font-size: .88rem; font-weight: 600; }
.list-meta  { font-size: .75rem; color: var(--muted); }
.activity-row { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.activity-row:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; }
.activity-desc { font-size: .85rem; }
.activity-time { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: 1rem; }
.quick-card { display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: .65rem .85rem; text-decoration: none; color: var(--text); font-size: .82rem; font-weight: 600; transition: border-color .15s; }
.quick-card:hover { border-color: rgba(124,58,237,.4); }
.qc-icon { font-size: 1.1rem; }
.empty-sm { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .85rem; }
.empty-state { text-align: center; padding: 3.5rem 2rem; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.empty-state p  { font-size: .88rem; color: var(--muted); }

/* ── Settings ──────────────────────────────────────────────────────────────── */
.settings-panels { max-width: 700px; }
.settings-form { padding: 1.25rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.info-row { display: flex; padding: .7rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.info-row:last-child { border-bottom: none; }
.info-label { width: 150px; flex-shrink: 0; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: .05rem; }
.info-value { font-size: .88rem; }
.mono { font-family: monospace; font-size: .8rem; color: var(--muted); }

/* ── Credits ───────────────────────────────────────────────────────────────── */
.balance-hero { margin-bottom: 1.5rem; }
.balance-card { display: flex; align-items: center; gap: 1.5rem; background: linear-gradient(135deg,rgba(124,58,237,.15),rgba(79,70,229,.08)); border: 1px solid rgba(124,58,237,.3); border-radius: 16px; padding: 2rem 2.5rem; flex-wrap: wrap; }
.balance-icon { font-size: 3rem; }
.balance-amount { font-size: 2.5rem; font-weight: 900; }
.balance-label { font-size: .88rem; color: var(--muted); }
.plan-badge { display: inline-block; font-size: .75rem; font-weight: 800; padding: .25rem .7rem; border-radius: 99px; letter-spacing: .06em; }
.plan-user    { background: rgba(255,255,255,.08); color: var(--muted); }
.plan-premium { background: rgba(245,158,11,.15); color: #fbbf24; }
.plan-admin   { background: rgba(16,185,129,.15); color: #34d399; }
.packages-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1.1rem; }
.package-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; text-align: center; position: relative; }
.package-card.featured { border-color: rgba(124,58,237,.5); box-shadow: 0 0 30px rgba(124,58,237,.12); }
.pkg-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; padding: .2rem .75rem; border-radius: 99px; white-space: nowrap; }
.pkg-name { font-size: .9rem; color: var(--muted); margin-bottom: .35rem; }
.pkg-tokens { font-size: 2rem; font-weight: 900; }
.pkg-tokens-label { font-size: .75rem; color: var(--muted); margin-bottom: .75rem; }
.pkg-price { font-size: 1.4rem; font-weight: 800; margin-bottom: 1rem; }
.pkg-btn { width: 100%; }
.tiers-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.1rem; }
.tier-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; }
.tier-card.current { border-color: rgba(124,58,237,.5); }
.tier-name { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; }
.tier-price { font-size: 1.6rem; font-weight: 900; margin-bottom: 1rem; }
.price-period { font-size: .85rem; color: var(--muted); font-weight: 400; }
.tier-features { list-style: none; margin-bottom: 1.25rem; }
.tier-features li { font-size: .84rem; color: var(--muted); padding: .25rem 0; }
.tier-features li::before { content: "✓ "; color: var(--accent); }
.tier-btn { width: 100%; }
.current-badge { display: block; text-align: center; font-size: .82rem; color: var(--accent); font-weight: 700; padding: .5rem; border: 1px solid rgba(124,58,237,.3); border-radius: 7px; }
.payment-note { font-size: .82rem; color: var(--muted); margin-top: 1.5rem; }
.payment-note a { color: var(--accent); }

/* ── History / Activity ────────────────────────────────────────────────────── */
.history-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.history-row:last-child { border-bottom: none; }
.hist-icon { font-size: 1.5rem; flex-shrink: 0; }
.hist-body  { flex: 1; }
.hist-title { font-size: .9rem; font-weight: 600; }
.hist-meta  { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.activity-row-full { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.activity-row-full:last-child { border-bottom: none; }
.act-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(124,58,237,.7); margin-top: 5px; flex-shrink: 0; }
.act-body { flex: 1; }
.act-desc { font-size: .88rem; }
.act-meta  { font-size: .75rem; color: var(--muted); margin-top: .15rem; }

/* ── Services ──────────────────────────────────────────────────────────────── */
.service-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.service-row:last-child { border-bottom: none; }
.svc-icon { font-size: 1.5rem; flex-shrink: 0; }
.svc-body  { flex: 1; }
.svc-name  { font-size: .9rem; font-weight: 600; }
.svc-meta  { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.svc-badge { font-size: .72rem; background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25); padding: .2rem .55rem; border-radius: 99px; }
.available-services { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
.avail-service { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .75rem 1rem; text-decoration: none; color: var(--text); flex: 1; min-width: 180px; transition: border-color .15s; }
.avail-service:hover { border-color: rgba(124,58,237,.4); }
.avail-icon { font-size: 1.5rem; }
.avail-name { font-size: .88rem; font-weight: 600; }
.avail-url  { font-size: .75rem; color: var(--muted); }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.field-hint { font-weight: 400; font-size: .75rem; color: var(--dim); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; color: var(--text); padding: .6rem .85rem; font-size: .9rem;
  transition: border-color .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field input::placeholder { color: var(--dim); }
.auth-form .field { gap: .4rem; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary { background: linear-gradient(135deg,var(--accent),var(--accent2)); color: #fff; padding: .6rem 1.4rem; border: none; border-radius: 8px; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity .15s; }
.btn-primary:hover { opacity: .9; }
.btn-primary.btn-full { width: 100%; text-align: center; }
.btn-primary.btn-lg { padding: .75rem 2rem; font-size: 1rem; }
.btn-secondary { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--text); padding: .6rem 1.4rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .9rem; display: inline-block; }
.btn-secondary.btn-lg { padding: .75rem 2rem; font-size: 1rem; }
.btn-danger { background: rgba(239,68,68,.12); color: #fca5a5; padding: .5rem 1.25rem; border: 1px solid rgba(239,68,68,.25); border-radius: 8px; font-size: .88rem; cursor: pointer; }
.btn-sm { font-size: .8rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--muted); padding: .3rem .75rem; border-radius: 6px; text-decoration: none; cursor: pointer; white-space: nowrap; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert-error   { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; border-radius: 8px; padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1rem; }
.alert-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #34d399; border-radius: 8px; padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1rem; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.link-sm { font-size: .8rem; color: var(--accent); text-decoration: none; }
.link-sm:hover { text-decoration: underline; }