:root{
  --bg:#f7fafc; --surface:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0;
  --primary:#2563eb; --primary-600:#1d4ed8; --accent:#10b981; --ring:rgba(37,99,235,.25);
  --radius:16px; --shadow:0 10px 25px rgba(2,6,23,.06); --max:1100px;
  --weak:#ef4444; --fair:#f59e0b; --strong:#10b981; --great:#059669;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--max); margin:0 auto; padding:0 20px }

/* Header (app.css already includes most styles; these are safe duplicates) */
header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 2px 10px rgba(2,6,23,.04) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px }
.logo{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#60a5fa,#34d399); box-shadow:inset 0 0 16px rgba(255,255,255,.6) }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:800; letter-spacing:.2px }
.btn.primary{ background:var(--primary); color:#fff; padding:12px 16px; border-radius:14px; box-shadow:0 6px 20px rgba(37,99,235,.18); transition:.2s transform,.2s box-shadow }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(37,99,235,.24); background:var(--primary-600) }
.btn.ghost{ background:transparent; color:var(--primary); padding:10px 14px; border-radius:12px; border:1px solid var(--primary) }
.btn.neutral{ background:#0f172a; color:#fff; padding:12px 16px; border-radius:14px }
.btn.icon{ background:transparent; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-weight:800 }

/* Layout */
.section{ padding:40px 0 }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }
.muted{ color:var(--muted) }

.form-shell{ max-width:820px; margin:0 auto }
.form-wrapper{ padding:26px }
h1{ margin:0 0 10px; font-size:clamp(24px,3.5vw,34px); font-weight:900 }
label{ display:block; margin-top:14px; font-weight:800 }
input,select,textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); outline:none; margin-top:6px }
input:focus,select:focus,textarea:focus{ box-shadow:0 0 0 6px var(--ring); border-color:var(--primary) }
textarea{ min-height:110px; resize:vertical }

.input-wrap{ position:relative }
.toggle-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%) }
.hint{ font-size:12px; color:#475569; margin-top:6px }
.bad{ color:#b91c1c }
.good{ color:#065f46 }

/* Strength meter */
.meter{ margin-top:8px }
.meter-track{ height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden }
.meter-bar{ height:100%; width:0%; transition:width .25s ease; background:var(--weak) }
.meter-label{ font-size:12px; font-weight:800; margin-top:6px }
.meter-weak .meter-bar{ background:var(--weak) }
.meter-fair .meter-bar{ background:var(--fair) }
.meter-strong .meter-bar{ background:var(--strong) }
.meter-great .meter-bar{ background:var(--great) }

.child-group{ border:1px solid var(--border); padding:14px; margin-top:14px; border-radius:12px; background:#f8fafc }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .row{ grid-template-columns:1fr } }

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }

/* Billing */
.billing{ border:1px solid var(--border); background:#fcfcfc; border-radius:12px; padding:16px; margin-top:18px }
.billing h3{ margin:0 0 6px }
.plan{ display:flex; align-items:center; gap:8px; margin:6px 0; font-weight:700 }
.plan input{ width:auto; margin:0 }

/* Modals */
.modal-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.40); display:none; align-items:center; justify-content:center; padding:16px; z-index:1000 }
.modal{ background:#fff; border-radius:12px; max-width:560px; width:100%; padding:20px; box-shadow:0 20px 50px rgba(2,6,23,.20); border:1px solid var(--border) }
.modal h2{ margin:0 0 8px }
.modal p{ margin:0 0 16px; color:#334155 }
.modal .actions{ display:flex; justify-content:flex-end; gap:10px }

/* Loading */
.loading-backdrop{ position:fixed; inset:0; background:rgba(255,255,255,.8); display:none; align-items:center; justify-content:center; z-index:2000 }
.spinner{ width:50px; height:50px; border:5px solid rgba(2,6,23,.15); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

.top-note{ display:flex; align-items:center; gap:8px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:8px 12px; border-radius:12px; font-weight:800; margin-bottom:10px }