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; }
.account-shell { min-height:calc(100vh - 190px); display:grid; place-items:center; padding:2rem 0 4rem; }
.account-card { width:min(100%,460px); padding:2rem; background:#fff; border:1px solid var(--intelli-border); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.08); }
.account-card h1 { margin:.5rem 0 .65rem; font-size:1.75rem; font-weight:500; }
.account-intro { margin-bottom:1.5rem; color:#616161; line-height:1.55; }
.account-validation:empty { display:none; }
.account-validation ul { margin:0 0 1rem; padding-left:1.15rem; }
.account-submit { width:100%; }
.account-footer { margin-top:1.35rem; padding-top:1.15rem; border-top:1px solid #e5e7eb; text-align:center; color:#616161; }
.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; }
.training-countdown { color:var(--intelli-accent); font-variant-numeric:tabular-nums; }
.training-countdown.is-expired { color:#c50f1f; }
.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; }
.question-image-svg { max-height:500px; padding:.5rem; background:#fff; }
.preserve-lines { white-space:pre-line; }
.test-status { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem; }
.test-status .question-meta { grid-column:1; }
.test-timer { grid-column:2; grid-row:1; color:var(--intelli-accent); font-size:1rem; font-variant-numeric:tabular-nums; font-weight:600; }
.test-timer.is-urgent { color:#c50f1f; }
.test-disclaimer { color:#707070; font-size:.75rem; }
.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; }
.question-card + .solution-feedback { margin-top:1rem; }
.solution-feedback > h2 { grid-column:1/-1; margin:0; padding:1rem 1.2rem; background:#fff; font-size:1.15rem; }
.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; }
.training-next { display:flex; justify-content:flex-end; margin-bottom:1.5rem; }
.solution-reason p { margin:.35rem 0 0; line-height:1.55; }
.solution-reason ol,.solution-reason ul { margin:.45rem 0 0; padding-left:1.2rem; line-height:1.5; }
.solution-errors { border-top:1px solid #f1d6a8; }
.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}}

@media (max-width: 575.98px) {
  html { font-size: 14px; }
  body {
    margin-bottom: 48px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body > .container,
  .navbar > .container {
    width: 100%;
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }
  .navbar { margin-bottom: .65rem !important; }
  .navbar-brand { font-size: 1rem; }
  .navbar-toggler { padding: .25rem .45rem; font-size: 1rem; }
  .navbar-collapse { padding-top: .4rem; }
  .nav-link { padding-top: .4rem; padding-bottom: .4rem; }

  .training-shell { width: 100%; margin: .65rem auto 1rem; }
  .question-card { padding: .75rem; border-radius: 7px; }
  .question-card h1 {
    margin-bottom: .65rem;
    font-size: 1rem;
    line-height: 1.3;
  }
  .question-meta {
    gap: .35rem .75rem;
    flex-wrap: wrap;
    margin: 0 0 .45rem;
    font-size: .74rem;
    font-weight: 500;
  }
  .question-image,
  .question-image-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 42svh;
    margin-bottom: .65rem;
    padding: .15rem;
    border-radius: 6px;
    object-fit: contain;
  }
  .answer-options { gap: .4rem; }
  .answer-options span {
    min-height: 40px;
    padding: .4rem .5rem;
    overflow-wrap: anywhere;
  }
  .answer-options strong {
    width: 1.35rem;
    height: 1.35rem;
    margin-right: .35rem;
  }
  .question-card form > .btn { width: 100%; margin-top: .65rem !important; }

  .test-status { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items:center; }
  .test-status .question-meta { min-width: 0; }
  .test-timer { font-size: .9rem; }
  .progress { height: .4rem; margin-bottom: .6rem !important; }
  .test-disclaimer { margin-top: .6rem !important; font-size: .68rem; line-height: 1.3; }

  .solution-feedback { grid-template-columns: 1fr; margin-bottom: .75rem; border-radius: 8px; }
  .solution-feedback > div { padding: .65rem .75rem; }
  .solution-feedback .solution-reason { grid-column: 1; }
  .solution-reason p,
  .solution-reason ol,
  .solution-reason ul { line-height: 1.4; }

  .hero-panel { margin: .65rem 0 1rem; padding: 1.15rem; gap: .65rem; }
  .welcome-panel { margin: 3vh auto 0; padding: 1.25rem; }
  .welcome-actions { flex-direction: column; }
  .welcome-actions .btn { width: 100%; }
  .skill-grid { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .footer { padding-bottom: env(safe-area-inset-bottom); font-size: .75rem; }
}

.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;
}