*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #080b14;
  --bg2:     #0d1120;
  --bg3:     #121828;
  --border:  #1e2840;
  --indigo:  #6366f1;
  --indigo-soft: rgba(99,102,241,0.12);
  --green:   #10b981;
  --red:     #ef4444;
  --yellow:  #f59e0b;
  --text:    #e2e8f0;
  --dim:     #94a3b8;
  --dimmer:  #475569;
  --mono: ui-monospace,'Cascadia Code','Source Code Pro',monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: #818cf8; }

/* ── UTILITIES ── */
.hidden { display: none !important; }
.view { min-height: 100vh; }

/* ── NOTICES ── */
.notice {
  padding: .75rem 1rem; border-radius: 8px;
  font-size: .85rem; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
}
.notice-ok  { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.notice-warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; }

/* ── AUTH LAYOUT ── */
.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem;
}

.auth-logo {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  color: var(--text); letter-spacing: -.02em; margin-bottom: 2rem;
  display: block; text-decoration: none;
}
.auth-logo em { color: var(--indigo); font-style: normal; }

.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  width: 100%; max-width: 400px; margin-bottom: 1.5rem;
}
.tab {
  flex: 1; padding: .65rem; background: none; border: none;
  font-size: .875rem; cursor: pointer; color: var(--dim);
  border-bottom: 2px solid transparent; transition: all .15s;
  margin-bottom: -1px;
}
.tab.active { color: var(--text); border-bottom-color: var(--indigo); }
.tab:hover:not(.active) { color: var(--text); }

.auth-form {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 1rem;
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .8rem; color: var(--dim); }
.field input {
  padding: .6rem .85rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem;
  transition: border-color .15s; outline: none;
  font-family: var(--sans);
}
.field input:focus { border-color: var(--indigo); }
.field input::placeholder { color: var(--dimmer); }
.hint { font-size: .72rem; color: var(--dimmer); }

.field-check {
  display: flex; align-items: flex-start; gap: .5rem;
}
.field-check input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  accent-color: var(--indigo);
  width: 15px; height: 15px;
}
.field-check label { font-size: .8rem; color: var(--dim); line-height: 1.5; cursor: pointer; }

.gdpr-note {
  font-size: .72rem; color: var(--dimmer); line-height: 1.55;
  padding: .6rem .85rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px;
}

.form-error {
  padding: .55rem .85rem; border-radius: 6px;
  font-size: .8rem; background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3); color: #fca5a5;
}

.btn-submit {
  padding: .7rem; border-radius: 8px;
  background: var(--indigo); border: none; color: #fff;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-submit:hover { background: #4f46e5; }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; }

/* ── PENDING VERIFICATION ── */
.pending-card {
  width: 100%; max-width: 400px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 2rem;
  text-align: center;
}
.pending-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.pending-card h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.pending-card p { font-size: .875rem; color: var(--dim); margin-bottom: .5rem; }
.pending-sub { font-size: .78rem; }
.btn-outline {
  display: inline-block; margin-top: 1.5rem;
  padding: .6rem 1.5rem; border-radius: 8px;
  border: 1px solid var(--border); color: var(--dim);
  font-size: .85rem; transition: all .15s; text-decoration: none;
}
.btn-outline:hover { border-color: var(--indigo); color: var(--indigo); }

/* ── DASHBOARD ── */
.dash-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,11,20,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-user { display: flex; align-items: center; gap: 1rem; }
.dash-email-label { font-size: .8rem; color: var(--dim); font-family: var(--mono); }
.btn-logout {
  padding: 5px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  color: var(--dim); font-size: .8rem; cursor: pointer;
  transition: all .15s;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

.dash-main { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.dash-hero { margin-bottom: 2rem; }
.dash-hero h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .4rem; }
.dash-hero p  { font-size: .9rem; color: var(--dim); }

/* ── PLANS ROW ── */
.plans-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.plans-row.slim { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.plan-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.plan-card.featured { border-color: var(--indigo); background: rgba(99,102,241,.05); }
.plan-tag {
  font-family: var(--mono); font-size: .68rem;
  color: var(--indigo); background: var(--indigo-soft);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 100px; padding: 2px 9px; width: fit-content;
}
.plan-name { font-size: .88rem; font-weight: 600; }
.plan-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }
.plan-price small { font-size: .75rem; font-weight: 400; color: var(--dim); }
.plan-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.plan-list li {
  font-size: .78rem; color: var(--dim);
  display: flex; gap: .4rem; align-items: flex-start;
}
.plan-list li::before { content: '✓'; color: var(--green); font-size: .7rem; margin-top: 2px; flex-shrink: 0; }

.btn-plan-cta {
  display: block; width: 100%; text-align: center;
  padding: 8px; border-radius: 8px; margin-top: .25rem;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: none;
  color: var(--dim); transition: all .15s; text-decoration: none;
}
.btn-plan-cta:hover, .btn-plan-cta:not(.primary):not(.link):hover { border-color: var(--indigo); color: var(--indigo); }
.btn-plan-cta.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn-plan-cta.primary:hover { background: #4f46e5; }
.btn-plan-cta.link { color: var(--dim); }
.btn-plan-cta:disabled { opacity: .5; cursor: not-allowed; }

/* ── LICENSE GRID ── */
.license-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-bottom: 2rem;
}
@media (max-width: 640px) { .license-grid { grid-template-columns: 1fr; } }

.lic-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem;
}
.lic-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.lic-row:last-child { border-bottom: none; }
.lic-label { color: var(--dim); }

.badge {
  font-family: var(--mono); font-size: .72rem;
  padding: 3px 10px; border-radius: 100px;
  background: var(--indigo-soft); color: var(--indigo);
  border: 1px solid rgba(99,102,241,.3);
  text-transform: uppercase;
}
.badge-ok { background: rgba(16,185,129,.1); color: #6ee7b7; border-color: rgba(16,185,129,.3); }

.action-card { display: flex; flex-direction: column; gap: .75rem; }
.action-card h3 { font-size: .95rem; font-weight: 600; }

.action-downloads { display: flex; flex-direction: column; gap: 1.25rem; }
.action-download-item { display: flex; flex-direction: column; gap: .5rem; }
.action-download-item p { font-size: .8rem; color: var(--dim); line-height: 1.5; }

.download-note  { font-size: .72rem; color: var(--dimmer); }

.btn-download {
  padding: .65rem 1.1rem; border-radius: 8px;
  background: var(--indigo); border: none; color: #fff;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .15s; align-self: flex-start;
}
.btn-download:hover { background: #4f46e5; }
.btn-download:disabled { opacity: .5; cursor: not-allowed; }

.btn-download-src {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--dim);
}
.btn-download-src:hover { background: var(--bg2); border-color: var(--indigo); color: var(--indigo); }

/* ── UPGRADE SECTION ── */
.upgrade-section { margin-top: 2rem; }
.upgrade-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--dim); }

/* ── ACCOUNT HERO ── */
.account-hero {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.5rem 2rem;
  margin-bottom: 1.5rem; gap: 1rem;
  flex-wrap: wrap;
}
.account-identity { display: flex; align-items: center; gap: 1rem; }
.account-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--indigo-soft); border: 2px solid rgba(99,102,241,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.2rem; font-weight: 700;
  color: var(--indigo); flex-shrink: 0; text-transform: uppercase;
}
.account-meta { display: flex; flex-direction: column; gap: .4rem; }
.account-email-main { font-family: var(--mono); font-size: .9rem; color: var(--text); font-weight: 600; }
.badge-plan { font-size: .68rem; }
.btn-create-secret {
  padding: .65rem 1.4rem; border-radius: 9px;
  background: var(--indigo); border: none; color: #fff;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s; flex-shrink: 0;
}
.btn-create-secret:hover { background: #4f46e5; color: #fff; }

/* ── SAAS BANNER ── */
.saas-banner {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2);
  border-radius: 12px; padding: 1rem 1.5rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.saas-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.saas-banner-body { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 180px; }
.saas-banner-body strong { font-size: .9rem; color: var(--text); }
.saas-banner-body span  { font-size: .8rem; color: var(--dim); }
.btn-app-link {
  padding: .55rem 1.2rem; border-radius: 8px;
  border: 1px solid rgba(16,185,129,.35); color: #6ee7b7;
  font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: all .15s; flex-shrink: 0;
}
.btn-app-link:hover { background: rgba(16,185,129,.1); color: #6ee7b7; }

/* ── SECTION DIVIDER ── */
.section-divider {
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.section-divider h2 { font-size: 1rem; font-weight: 600; margin-bottom: .2rem; }
.section-divider p  { font-size: .8rem; color: var(--dim); }