/* Modern theme */
:root{--bg:#f8f9fb;--surface:#ffffff;--text:#0f1222;--muted:#596072;--border:#e7eaf1;--accent:#0d6efd;--radius:12px;--shadow:0 6px 18px rgba(0,0,0,.06)}
html[data-theme="dark"]{--bg:#0b0d12;--surface:#12151d;--text:#e8ebf2;--muted:#a2acc0;--border:#1e2330;--accent:#4ea3ff;--shadow:0 8px 24px rgba(0,0,0,.45)}
html,body{background:var(--bg);color:var(--text)}
.container{max-width:1160px}.section{padding:80px 0}hr{border-color:var(--border)}
.navbar{border-bottom:1px solid var(--border);background:var(--surface)}.navbar .nav-link{color:var(--muted)!important}.navbar .nav-link:hover{color:var(--text)!important}.navbar .navbar-brand{color:var(--text)!important}
.btn{border-radius:10px}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-outline{border-color:var(--border);color:var(--text);background:transparent}.btn-outline:hover{border-color:var(--accent)}
.card{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.hero{padding:96px 0;background:linear-gradient(140deg,rgba(13,110,253,.08),transparent 40%),linear-gradient(320deg,rgba(111,66,193,.08),transparent 35%)}
.kicker{font-weight:700;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;font-size:.82rem}.hero h1{font-weight:800;letter-spacing:-.02em}.hero .sub{color:var(--muted);font-size:1.1rem}
.feature{display:flex;gap:14px}.feature .icon{flex:0 0 40px;height:40px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.feature h6{margin:0;font-weight:700}.feature p{margin:2px 0 0;color:var(--muted)}
.step{display:flex;gap:14px}.step .num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.step p{margin:0;color:var(--muted)}
.badge{border-radius:999px;padding:.5rem .75rem;font-weight:600;border:1px solid var(--border);background:transparent}.badge-success{color:#1b8f4b;border-color:#1b8f4b33}.badge-danger{color:#c73636;border-color:#c7363633}.badge-warning{color:#b98600;border-color:#b9860033}
.table{color:var(--text)}.table thead th{color:var(--muted);border-bottom-color:var(--border)}.table td,.table th{border-color:var(--border)}
.form-control,.form-select{background:var(--surface);color:var(--text);border-color:var(--border)}.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(13,110,253,.25)}
.strength{height:8px;border-radius:6px;background:linear-gradient(90deg,#ff4d4d,#ffa200,#2ecc71);opacity:.3;position:relative}.strength::after{content:'';position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#ff4d4d,#ffa200,#2ecc71);opacity:1;transition:width .25s ease}
.strength[data-pct="20"]::after{width:20%}.strength[data-pct="40"]::after{width:40%}.strength[data-pct="60"]::after{width:60%}.strength[data-pct="80"]::after{width:80%}.strength[data-pct="100"]::after{width:100%}
footer{border-top:1px solid var(--border);background:var(--surface);color:var(--muted)}
/* ---- Dark mode text enforcement (high specificity) ---- */

/* Base dark text color for everything (except obvious UI pills) */
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card *:not(.btn):not(.badge):not(code) {
  color: var(--text) !important;
}

/* Muted/secondary text tones in dark */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
  color: var(--muted) !important;
}

/* Make sure paragraphs & list items in cards are readable */
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card li {
  color: var(--text) !important;
}

/* Accordion (if present) */
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-body {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Navbar links in dark */
html[data-theme="dark"] .navbar .nav-link { color: var(--muted) !important; }
html[data-theme="dark"] .navbar .nav-link:hover { color: var(--text) !important; }

/* Tables & borders in dark */
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
  border-color: var(--border) !important;
}