:root {
  --brand: #e3132a;
  --brand-dark: #b50c20;
  --ink: #201d1e;
  --muted: #747176;
  --line: #e9e5e4;
  --page: #f8f7f6;
  --surface: #fff;
  --soft-red: #fff0f1;
  --success: #177a4b;
  --shadow: 0 18px 48px rgba(40, 24, 26, .09);
}

* { box-sizing: border-box; }
body { min-height: 100vh; background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: var(--brand-dark); text-underline-offset: .18em; }
a:hover { color: var(--brand); }
.topline { background: #201d1e; color: #f8f6f5; font-size: .78rem; letter-spacing: .025em; padding: .36rem 0; }
.topline .container { display: flex; justify-content: space-between; gap: 1rem; }
.brand-navbar { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: 0 4px 22px rgba(30,20,20,.04); padding: .55rem 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: .72rem; color: var(--ink) !important; white-space: nowrap; }
.brand-lockup img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid #eee9e7; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.brand-lockup span { display: grid; line-height: 1.15; }
.brand-lockup strong { font-size: 1.03rem; font-weight: 850; letter-spacing: -.025em; }
.brand-lockup small { margin-top: .24rem; color: var(--muted); font-size: .69rem; letter-spacing: .035em; }
.navbar-nav { gap: .28rem; }
.brand-navbar .nav-link { color: #4e494b; font-size: .92rem; font-weight: 650; padding: .6rem .82rem !important; }
.brand-navbar .nav-link:hover { color: var(--brand); }
.btn { min-height: 44px; border-radius: .78rem; font-weight: 720; padding: .62rem 1.08rem; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-brand, .btn-primary { color: #fff !important; background: var(--brand); border-color: var(--brand); box-shadow: 0 8px 18px rgba(227,19,42,.17); }
.btn-brand:hover, .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 10px 22px rgba(227,19,42,.22); }
.btn-outline-primary { color: var(--brand); border-color: #e9a1aa; }
.btn-outline-primary:hover { color: white; background: var(--brand); border-color: var(--brand); }
.btn-success { background: var(--success); border-color: var(--success); }
.navbar-toggler { border-color: #e6dede; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(227,19,42,.16); }
.site-main { max-width: 1180px; min-height: 76vh; padding-top: clamp(1.4rem, 3.5vw, 3rem); padding-bottom: 4rem; }
.site-footer { background: #211e1f; color: #d8d4d3; padding: 1.35rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; }
.footer-brand { color: white; font-weight: 850; text-decoration: none; }
.site-footer a:not(.footer-brand) { color: #ffc0c6; }
h1,h2,h3,h4 { color: var(--ink); font-weight: 820; letter-spacing: -.035em; line-height: 1.16; }
h1 { font-size: clamp(1.9rem, 4.3vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(230px,.6fr); align-items: center; gap: clamp(1rem,4vw,3.5rem); padding: clamp(1.5rem,5vw,4rem) !important; border: 0 !important; border-radius: 1.65rem !important; color: white; background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.19), transparent 30%), linear-gradient(128deg,#1d1a1b 0%,#30292a 55%,#a50e22 100%); box-shadow: var(--shadow); }
.hero::after { position: absolute; content: ""; width: 340px; height: 340px; right: -110px; bottom: -200px; border: 38px solid rgba(255,255,255,.08); border-radius: 50%; z-index: -1; }
.hero h1 { max-width: 720px; color: #fff; font-size: clamp(2.15rem,5.7vw,4.35rem); font-weight: 900; }
.hero p { max-width: 630px; color: rgba(255,255,255,.78); font-size: clamp(1rem,1.8vw,1.18rem); }
.hero .eyebrow { color: #ffb7bf; }
.hero .btn-outline-primary { color: white; border-color: rgba(255,255,255,.55); }
.hero .btn-outline-primary:hover { background: white; border-color: white; color: var(--brand-dark); }
.hero-logo { width: min(100%,270px); aspect-ratio: 1; object-fit: contain; background: white; border: 8px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 20px 60px rgba(0,0,0,.2); justify-self: center; }
.feature-grid, .set-card-grid, .test-set-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 1rem; }
.feature-card,.card,.admin-panel,.set-card,.exam-question,.result-card,.result-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 1.15rem; box-shadow: 0 9px 28px rgba(40,24,26,.045); }
.feature-card { padding: 1.25rem; }
.feature-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .9rem; border-radius: .9rem; background: var(--soft-red); color: var(--brand); font-size: 1.35rem; font-weight: 900; }
.feature-card h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.feature-card p { margin: 0; color: var(--muted); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.4rem 0 1rem; }
.eyebrow { color: var(--brand); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .45rem; }
.admin-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .2rem 0 1.4rem; }
.admin-section-heading h2 { margin-bottom: .4rem; }
.count-pill,.type-pill,.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: .4rem .75rem; font-size: .8rem; font-weight: 760; white-space: nowrap; }
.count-pill,.type-pill { background: var(--soft-red); color: var(--brand-dark); }
.status-active { background: #e6f5eb; color: #14683f; }
.status-inactive { background: #f1efee; color: #615b5b; }
.admin-panel { padding: clamp(1rem,3vw,1.6rem); }
.set-card { padding: 1.2rem; transition: transform .16s ease,box-shadow .16s ease; }
.set-card:hover,.test-set-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.set-card h3,.set-card h2 { margin: .85rem 0 .65rem; font-size: 1.22rem; }
.set-card-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.set-card-image { width:100%; max-height:13rem; object-fit:contain; border-radius:.8rem; margin:.9rem 0 .3rem; background:#faf8f7; }
.set-card-meta { display:flex; flex-wrap:wrap; gap:.48rem .85rem; color:var(--muted); font-size:.88rem; }
.empty-state { display:flex; flex-direction:column; gap:.3rem; padding:1.3rem; border:1px dashed #d1c8c7; border-radius:1rem; background:#fff; color:var(--muted); }
.form-control,.form-select { min-height:48px; border-color:#ddd7d6; border-radius:.75rem; }
.form-control:focus,.form-select:focus { border-color:#ed7d89; box-shadow:0 0 0 .22rem rgba(227,19,42,.12); }
.form-label { color:#433d3e; font-weight:700; }
.auth-panel { max-width: 560px; margin: clamp(1rem,4vw,3rem) auto; padding: clamp(1.2rem,4vw,2.25rem); background: #fff; border: 1px solid var(--line); border-radius: 1.35rem; box-shadow: var(--shadow); }
.auth-panel .btn { width: 100%; }
.text-secondary,.form-text { color:var(--muted) !important; }
.question-picker { max-height:22rem; overflow-y:auto; border:1px solid var(--line); border-radius:.9rem; padding:.4rem .9rem; background:#fcfbfa; }
.question-picker-item { display:flex; align-items:flex-start; gap:.7rem; padding:.65rem 0; border-bottom:1px solid #f0eceb; cursor:pointer; }
.question-picker-item:last-child { border-bottom:0; }
.exam-question { padding:clamp(1rem,3vw,1.6rem); margin-bottom:1rem; }
.exam-question legend { float:none; width:auto; max-width:100%; padding:0 .4rem; font-weight:800; }
.exam-question img { display:block; width:auto; max-width:min(100%,760px); max-height:75vh; object-fit:contain; margin:.7rem auto 1.1rem; border-radius:.75rem; }
.exam-choice { display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem; margin:.5rem 0; border:1px solid var(--line); border-radius:.8rem; background:#fff; cursor:pointer; transition:background .15s,border-color .15s; }
.exam-choice:hover { border-color:#ee9aa3; background:#fff7f7; }
.exam-choice input { width:1.25rem; height:1.25rem; flex:0 0 auto; accent-color:var(--brand); }
.exam-toolbar { position:sticky; top:.5rem; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(40,24,26,.07); }
.progress { height:.55rem; border-radius:99px; background:#f0e9e8; }
.progress-bar { background:var(--brand); }
.result-summary { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:clamp(1.25rem,4vw,2rem); margin-bottom:1.25rem; border:0; color:#fff; background:linear-gradient(125deg,#211d1e,#373032 64%,#a91124); }
.result-summary h1,.result-summary h2,.result-summary p { color:#fff; }
.score-ring { display:grid; place-items:center; min-width:104px; width:104px; height:104px; border:7px solid rgba(255,255,255,.35); border-right-color:#ff5b6d; border-radius:50%; font-size:1.4rem; font-weight:900; }
.correction-list { display:grid; gap:1rem; }
.correction-card { overflow:hidden; padding:clamp(1rem,3vw,1.4rem); }
.correction-card.correct { border-left:5px solid #218453; }
.correction-card.incorrect { border-left:5px solid var(--brand); }
.correction-image { display:block; width:auto; max-width:min(100%,760px); max-height:65vh; object-fit:contain; margin:.7rem auto 1rem; border-radius:.8rem; background:#faf8f7; }
.correction-choice { display:flex; align-items:flex-start; gap:.65rem; padding:.6rem .75rem; margin:.35rem 0; border-radius:.65rem; background:#f8f7f6; }
.correction-choice.is-correct { color:#135d38; background:#eaf6ee; }
.correction-choice.is-selected-wrong { color:#8a1626; background:#fff0f1; }
.choice-mark { flex:0 0 auto; font-weight:900; }
.correction-explanation { margin-top:.75rem; padding:.85rem 1rem; border-radius:.75rem; background:#f6f3f2; color:#4a4545; }
.table-responsive { overflow:hidden; border:1px solid var(--line); border-radius:.9rem; }
.table-responsive .table th { background:#f7f4f3; color:#494244; font-size:.88rem; }
.table { --bs-table-bg:#fff; vertical-align:middle; margin-bottom:0; }
.alert { border:0; border-radius:.9rem; }

@media (max-width: 700px) {
  .hero { grid-template-columns:1fr; }
  .hero-logo { width:min(54vw,190px); grid-row:1; }
  .site-main { padding-top:1.25rem; }
  .exam-toolbar { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 575px) {
  .topline .container span { display:none; }
  .brand-lockup img { width:46px; height:46px; }
  .brand-lockup strong { font-size:.93rem; }
  .brand-lockup small { font-size:.62rem; }
  .navbar-nav { align-items:stretch !important; padding:.5rem 0 .2rem; }
  .brand-navbar .nav-link { padding:.6rem .35rem !important; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .result-summary { align-items:flex-start; flex-direction:column-reverse; }
  .score-ring { width:84px; min-width:84px; height:84px; font-size:1.1rem; }
}