html {
  font-size: 14px;
}

:root {
  --intelli-accent: #0f6cbd;
  --intelli-accent-hover: #115ea3;
  --intelli-surface: #ffffff;
  --intelli-canvas: #f5f5f5;
  --intelli-border: #d1d1d1;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: var(--intelli-canvas);
  color: #242424;
  font-size: .875rem;
}

.navbar { --bs-navbar-padding-y:.35rem; }
.navbar-brand { font-size:1rem; font-weight:500; }
.nav-link { font-size:.875rem; }
.btn { font-size:.875rem; }
.btn-lg { --bs-btn-padding-y:.45rem; --bs-btn-padding-x:.85rem; --bs-btn-font-size:.9rem; }
.btn-primary { --bs-btn-bg:var(--intelli-accent); --bs-btn-border-color:var(--intelli-accent); --bs-btn-hover-bg:var(--intelli-accent-hover); --bs-btn-hover-border-color:var(--intelli-accent-hover); }
.hero-panel { display:flex; justify-content:space-between; align-items:end; gap:1.25rem; padding:2rem; border-radius:12px; background:linear-gradient(135deg,#0f548c,#0f6cbd); color:white; margin:1.25rem 0 1.75rem; }
.hero-panel h1 { max-width:680px; font-size:clamp(1.55rem,3vw,2.5rem); font-weight:500; line-height:1.15; margin:.4rem 0 .65rem; }
.hero-panel p { max-width:650px; font-size:.9rem; color:#dbeafe; }
.welcome-panel { max-width:720px; margin:8vh auto 0; padding:3rem; text-align:center; background:#fff; border:1px solid var(--intelli-border); border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.welcome-panel h1 { margin:.55rem 0 .8rem; font-size:2rem; font-weight:500; }
.welcome-panel p { max-width:560px; margin:0 auto; color:#616161; font-size:1rem; line-height:1.55; }
.welcome-actions { display:flex; justify-content:center; gap:.65rem; margin-top:1.5rem; }
.eyebrow { font-size:.7rem; font-weight:600; letter-spacing:.12em; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:1.25rem; }
.profile-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.55rem; color:#64748b; }
.profile-actions form { margin:0; }
.btn-reset-statistics { padding:.25rem .55rem; font-size:.75rem; line-height:1.25; white-space:nowrap; }
.section-heading h2 { font-size:1.25rem; font-weight:500; }
.skill-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.skill-card,.question-card { background:var(--intelli-surface); border:1px solid var(--intelli-border); border-radius:8px; padding:1rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.skill-card h3 { font-size:.92rem; font-weight:500; min-height:2rem; }
.skill-card p { margin:.75rem 0 0; color:#64748b; }
.training-shell { max-width:820px; margin:1.5rem auto; }
.question-meta { display:flex; justify-content:space-between; color:#64748b; font-size:.9rem; font-weight:500; margin:0 .35rem .65rem; }
.question-card h1 { font-size:1.12rem; font-weight:500; line-height:1.4; margin-bottom:1rem; }
.question-image { display:block; width:100%; max-height:620px; object-fit:contain; object-position:top; background:#fafafa; border:1px solid #e2e8f0; border-radius:12px; margin-bottom:1.5rem; }
.answer-options { display:grid; gap:.65rem; }
.answer-options label { cursor:pointer; }
.answer-options input { position:absolute; opacity:0; }
.answer-options span { display:block; padding:.55rem .7rem; border:1px solid var(--intelli-border); border-radius:4px; }
.answer-options input:checked + span { border-color:var(--intelli-accent); background:#ebf3fc; box-shadow:0 0 0 1px var(--intelli-accent); }
.answer-options strong { display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; margin-right:.5rem; border-radius:50%; background:#e2e8f0; font-weight:600; text-transform:uppercase; }
.solution-feedback { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; margin-bottom:1.5rem; border:1px solid #f1c27d; border-radius:14px; background:#f1c27d; }
.solution-feedback > div { padding:1rem 1.2rem; background:#fffaf0; }
.solution-feedback strong { display:block; margin-top:.25rem; font-size:1rem; font-weight:500; }
.solution-feedback .solution-reason { grid-column:1/-1; background:#fff; }
.solution-feedback-correct { border-color:#9acdb5; background:#9acdb5; }
.solution-feedback-correct > div { background:#f2fbf6; }
.solution-feedback-correct .solution-reason { background:#fff; }
.solution-feedback-correct .feedback-label { color:#166534; }
.solution-reason p { margin:.35rem 0 0; line-height:1.55; }
.feedback-label { display:block; color:#92400e; font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
@media(max-width:700px){.hero-panel{padding:2rem;align-items:start;flex-direction:column}.question-card{padding:1rem}.section-heading,.profile-actions{align-items:flex-start;flex-direction:column}}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}