:root{
  --bg:#0f1420;
  --panel:#171d2b;
  --panel-2:#1e2536;
  --border:#2a3245;
  --text:#e8ecf4;
  --text-dim:#8b93a7;
  --accent:#4f7fff;
  --accent-dim:#2c3d6b;
  --green:#3ecf8e;
  --amber:#f5b94b;
  --red:#f0665f;
  --btn-secondary-hover:#232b3f;
  --radius:10px;
}
:root[data-theme="light"]{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#eef1f7;
  --border:#dde3ee;
  --text:#161b26;
  --text-dim:#667085;
  --accent:#3b5fe0;
  --accent-dim:#c3d0f7;
  --green:#1f9d63;
  --amber:#b3790a;
  --red:#d1453c;
  --btn-secondary-hover:#e2e7f0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

.btn{
  border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;
  cursor:pointer;transition:filter .15s ease,transform .05s ease;
}
.btn:active{transform:scale(0.97);}
.btn:disabled{opacity:0.6;cursor:default;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.1);}
.btn-secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--btn-secondary-hover);}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;background:var(--panel-2);color:var(--text-dim);
  border:1px solid var(--border);border-radius:8px;cursor:pointer;flex-shrink:0;
}
.theme-toggle:hover{background:var(--btn-secondary-hover);color:var(--text);}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(240,102,95,0.4);}
.btn-danger:hover{background:rgba(240,102,95,0.1);}
.btn-sm{padding:6px 10px;font-size:12.5px;}
.btn-block{width:100%;}

/* Centered auth/pricing shell */
.center-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.brand-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px;}
.brand-logo{height:28px;width:auto;}
.brand-logo-lg{height:38px;}

.card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:28px;width:100%;max-width:380px;
}
.card h2{margin:0 0 4px;font-size:18px;}
.card p.sub{margin:0 0 20px;color:var(--text-dim);font-size:13px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px;font-weight:600;}
.field input{
  width:100%;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;
  padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none;
}
.field input:focus{border-color:var(--accent);}

.error-box{
  background:rgba(240,102,95,0.1);border:1px solid rgba(240,102,95,0.35);color:var(--red);
  border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;display:none;
}
.error-box.show{display:block;}
.success-box{
  background:rgba(62,207,142,0.1);border:1px solid rgba(62,207,142,0.35);color:var(--green);
  border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;display:none;
}
.success-box.show{display:block;}
.hint{margin-top:16px;text-align:center;font-size:13px;color:var(--text-dim);}

/* Pricing */
.pricing-wrap{width:100%;max-width:820px;}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px;}
.plan-card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;
  display:flex;flex-direction:column;gap:14px;
}
.plan-card.featured{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim);}
.plan-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--accent);}
.plan-desc{color:var(--text-dim);font-size:13.5px;margin:0;}
.plan-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;}
.plan-features li:before{content:"✓ ";color:var(--green);font-weight:700;}
.topbar-shell{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.status-msg{text-align:center;color:var(--text-dim);font-size:13px;margin-top:14px;}

/* Top bar (used in app.html) */
.topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:12px 20px;border-bottom:1px solid var(--border);background:var(--panel);
}
.topbar .who{font-size:13px;color:var(--text-dim);}
.plan-badge{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  padding:3px 9px;border-radius:20px;background:rgba(79,127,255,0.15);color:var(--accent);
}