html{ scroll-behavior:smooth; }
  body{ background:#f7f9fb; } /* soft page bg */

  /* Sticky top bar */
  .page-head{
    top:0; z-index:10;
    backdrop-filter: saturate(1.2) blur(6px);
    background: color-mix(in oklab, #f7f9fb 70%, transparent);
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* Meta chip (subject • ID) */
  .meta-chip{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.25rem .6rem; border-radius:999px;
    background:#e9f2ff; color:#0d6efd; font-weight:600;
  }

  /* Page-scoped accessibility contrast overrides */
  .answer-page{
    color:#1f2937;
  }
  .answer-page .page-head{
    background: color-mix(in oklab, #eef3f8 88%, transparent);
    border-bottom-color: rgba(15,23,42,.14);
  }
  .answer-page .meta-chip{
    background:#deebff;
    color:#0b3f91;
    border:1px solid #a8c5f8;
  }
  .answer-page .meta-chip strong{
    color:#082f70;
  }
  .answer-page .btn-outline-secondary{
    --bs-btn-color:#334155;
    --bs-btn-border-color:#64748b;
    --bs-btn-hover-color:#ffffff;
    --bs-btn-hover-bg:#475569;
    --bs-btn-hover-border-color:#475569;
    --bs-btn-focus-shadow-rgb:71,85,105;
    --bs-btn-active-color:#ffffff;
    --bs-btn-active-bg:#334155;
    --bs-btn-active-border-color:#334155;
    --bs-btn-disabled-color:#6b7280;
    --bs-btn-disabled-border-color:#94a3b8;
  }
  .answer-page .btn-outline-primary{
    --bs-btn-color:#0b3f91;
    --bs-btn-border-color:#0b3f91;
    --bs-btn-hover-color:#ffffff;
    --bs-btn-hover-bg:#0b3f91;
    --bs-btn-hover-border-color:#0b3f91;
    --bs-btn-focus-shadow-rgb:11,63,145;
    --bs-btn-active-color:#ffffff;
    --bs-btn-active-bg:#082f70;
    --bs-btn-active-border-color:#082f70;
    --bs-btn-disabled-color:#6b7280;
    --bs-btn-disabled-border-color:#94a3b8;
  }
  .answer-page .alert-light{
    color:#1f2937;
    background:#edf2f7;
    border-color:#cbd5e1;
  }
  .answer-page .text-muted{
    color:#4b5563 !important;
  }

  /* Banners */
  .banner{ border:0; box-shadow: 0 5px 18px rgba(0,0,0,.06); }

  /* Solution surface */
  .solution-surface{
    background:#fff !important;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
  }
  .solution-header{
    display:flex; justify-content:space-between; align-items:center;
    gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid rgba(0,0,0,.06);
    background:linear-gradient(180deg,#e9f2ff, transparent);
  }
  .solution-body{
    padding: clamp(1rem, 1.25vw + .75rem, 1.5rem)
             clamp(1.2rem, 2.8vw + .8rem, 2.4rem)
             clamp(1.2rem, 1.6vw + .8rem, 1.8rem);
  }

  .vote-surface{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    overflow:hidden;
  }
  .vote-head{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.85rem 1rem;
    border-bottom:1px solid rgba(0,0,0,.06);
    background:linear-gradient(180deg,#f4f8ff,transparent);
  }
  .vote-stats{
    display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
    font-size:.86rem; font-weight:600;
  }
  .badge-score,.badge-up,.badge-down{
    padding:.18rem .55rem; border-radius:999px; border:1px solid rgba(0,0,0,.08);
    background:#fff;
  }
  .badge-up{ color:#116b3c; border-color:#cde8db; background:#eefaf3; }
  .badge-down{ color:#8c2f2f; border-color:#f0d2d2; background:#fff3f3; }
  .vote-body{ padding:1rem; }
  .vote-inline-note{
    margin:.65rem 1rem 0;
    padding:.45rem .7rem;
    border-radius:.55rem;
    font-size:.9rem;
    border:1px solid rgba(0,0,0,.08);
    background:#f8f9fa;
  }
  .vote-inline-note.ok{
    color:#0f5132;
    background:#eafaf1;
    border-color:#c9e9d8;
  }
  .vote-inline-note.warn{
    color:#664d03;
    background:#fff8e6;
    border-color:#f0dfaa;
  }
  .vote-inline-note.err{
    color:#842029;
    background:#fdebec;
    border-color:#f4c8cb;
  }
  .vote-btn{
    min-width:120px; font-weight:600;
    border:1px solid rgba(0,0,0,.14);
    background:#fff;
  }
  .vote-btn.up:hover{ background:#ecf9f1; border-color:#bfe5cf; }
  .vote-btn.down:hover{ background:#fff1f1; border-color:#f0caca; }
  .vote-btn.up.active{
    color:#116b3c;
    border-color:#9ad3b4;
    background:#dcf4e7;
    box-shadow:0 0 0 0.15rem rgba(17,107,60,.16);
  }
  .vote-btn.down.active{
    color:#8c2f2f;
    border-color:#e5a9a9;
    background:#fbe2e2;
    box-shadow:0 0 0 0.15rem rgba(140,47,47,.14);
  }
  .vote-btn[disabled],
  .vote-btn.is-loading{
    opacity:.65;
    cursor:not-allowed;
    pointer-events:none;
  }
  .vote-note{ font-size:.9rem; }

  /* Readable article */
  .solution-article{ line-height:1.68; font-size:1.05rem; }
  .solution-article :is(p,ul,ol,pre,table,blockquote){ margin:.7rem 0; }
  .solution-article ul, .solution-article ol{ padding-left:1.25rem; }
  .solution-article blockquote{
    border-left:4px solid #e9f2ff; padding:.35rem .85rem; background:#fafcff; border-radius:8px;
  }
  .solution-article code{ background:rgba(108,117,125,.12); padding:.15rem .35rem; border-radius:.25rem; }
  .solution-article pre{ background:rgba(108,117,125,.12); border-radius:.6rem; padding:.85rem 1rem; overflow:auto; }
  .solution-article table{ width:100%; border-collapse:collapse; }
  .solution-article th,.solution-article td{ border:1px solid rgba(108,117,125,.25); padding:.5rem .65rem; }
  .solution-article thead th{ background:rgba(108,117,125,.12); }

  .correct-pill{
    display:inline-flex; align-items:center; gap:.4rem; font-weight:700;
    padding:.25rem .65rem; border-radius:999px; background:#fff; color:#000;
    border:1px solid rgba(0,0,0,.08);
  }

  /* Elevated card */
  .card-elev{
    background:#fff; border:1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-radius: 14px;
  }
  .comments-header{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.9rem 1.1rem; border-bottom:1px solid rgba(0,0,0,.06);
    background:linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  }

  /* Floating quick actions */
  .fab{
    position:fixed; right:18px; bottom:18px; z-index:1030;
    display:flex; gap:.5rem; flex-direction:column;
  }
  .fab .btn{ border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,.18); }

  /* Comment toolbar & list */
  .comment-toolbar{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:.5rem 0 1rem; }
  .comment-list{ display:flex; flex-direction:column; gap:.75rem; }

  /* Comment card */
  .comment-card{
    display:flex; gap:.8rem; padding:.75rem .9rem;
    background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  }
  @media (prefers-color-scheme: dark){
    .comment-card{ background:#0f141b; border-color:rgba(255,255,255,.07); }
  }
  .comment-card .avatar{
    width:40px; height:40px; border-radius:50%; object-fit:cover;
    border:1px solid rgba(0,0,0,.08);
  }
  .comment-meta{ font-size:.9rem; display:flex; flex-wrap:wrap; gap:.5rem; }
  .comment-name{ font-weight:700; color:inherit; }
  .comment-body{ margin-top:.35rem; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }

  /* Clamp long comments (toggleable) */
  .clamp-8{ display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
  .toggle-clamp{ border:0; background:transparent; color:#0d6efd; padding:0; }
  .toggle-clamp:hover{ text-decoration:underline; }

  /* Ghost buttons used in tools row */
  .btn-ghost{
    border:1px solid rgba(0,0,0,.08); background:transparent;
    padding:.2rem .5rem; border-radius:8px; line-height:1;
  }
  .btn-ghost:hover{ background: rgba(13,110,253,.06); border-color: rgba(13,110,253,.15); }

  /* Composer hint + counter */
  .comment-form .hint{ color:#6c757d; font-size:.88rem; min-width:0; } /* allow truncation in flex */
  .char-counter{ font-variant-numeric: tabular-nums; color:#6c757d; white-space:nowrap; }

  /* --- Image surface --- */
  .image-surface{
    --img-bg:#f5f7fb;
    --img-toolbar-inset:10px;
    --img-toolbar-gap:10px;
    --img-toolbar-pad:6px;
    --img-toolbar-btn:44px;
    --img-chip-size:18px;
    position:relative;
    background:var(--img-bg);
    border:1px solid rgba(0,0,0,.06);
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
  }
  .image-surface img{ display:block; width:100%; height:auto; border-radius:10px; background:transparent; }

  /* Desktop: make the image narrower but keep the container full width */
@media (min-width: 768px) {
  .answer-page .image-surface img{
    /* pick your bounds; these keep it centered and smaller */
    width: auto;                              /* don't stretch to container */
    max-width: clamp(520px, 75%, 820px);      /* min 520px, prefer 70% of container, cap 820px */
    margin-inline: auto;                      /* center inside the full-width container */
    display: block;                           /* ensure margins work */
  }
}


  /* background options via data attribute */
  .image-surface[data-bg="slate"]{ --img-bg:#f5f7fb; }
  .image-surface[data-bg="white"]{ --img-bg:#ffffff; }
  .image-surface[data-bg="warm"] { --img-bg:#fff7f0; }

  /* toolbar with tiny color chips (fixed top-right) */
  .img-toolbar{
    position:absolute; top:var(--img-toolbar-inset); right:var(--img-toolbar-inset); z-index:2;
    display:flex; gap:var(--img-toolbar-gap); padding:var(--img-toolbar-pad);
    box-sizing:border-box;
    border-radius:999px;
    background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.06);
  }
  .img-bg{
    --chip-size:var(--img-chip-size);
    width:var(--img-toolbar-btn); height:var(--img-toolbar-btn);
    border:0;
    border-radius:999px;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    box-sizing:border-box;
    flex:0 0 auto;
    cursor:pointer;
    touch-action:manipulation;
  }
  .img-bg::before{
    content:"";
    width:var(--chip-size); height:var(--chip-size);
    border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
    background:var(--chip-color, #ffffff);
  }
  .img-bg[data-set-bg="slate"]{ --chip-color:#f5f7fb; }
  .img-bg[data-set-bg="white"]{ --chip-color:#ffffff; }
  .img-bg[data-set-bg="warm"] { --chip-color:#fff7f0; }
  .img-bg.sel::before{ outline:2px solid rgba(13,110,253,.35); outline-offset:2px; }
  .img-bg:focus-visible{
    outline:2px solid rgba(13,110,253,.55);
    outline-offset:2px;
  }

  @media (prefers-color-scheme: dark){
    .image-surface{ border-color:rgba(255,255,255,.08); box-shadow:0 10px 28px rgba(0,0,0,.35); }
    .img-toolbar{ background:rgba(20,26,33,.55); border-color:rgba(255,255,255,.08); }
    .img-bg::before{ border-color:rgba(255,255,255,.18); }
  }

  @media (max-width: 767.98px) {
    .answer-page .image-surface.has-img-nav .img-toolbar{
      top:auto;
      right:auto;
      left:50%;
      bottom:6px;
      transform:translateX(-50%);
    }
  }

  /* ===== Responsive tweaks (scoped) ===== */
  .answer-page .page-head { padding-top:.25rem; padding-bottom:.25rem; }

  @media (max-width: 575.98px) {
    /* Top bar */
    .answer-page .meta-chip { font-size:.9rem; line-height:1.2; }
    .answer-page .page-head .container-lg { padding-left:.75rem; padding-right:.75rem; }

    /* Image surface + toolbar */
    .answer-page .image-surface {
      padding:12px;
      border-radius:12px;
      --img-toolbar-inset:6px;
      --img-toolbar-gap:6px;
      --img-toolbar-pad:4px;
      --img-toolbar-btn:40px;
      --img-chip-size:16px;
    }

    /* Solution header: let the pill drop to next line and center */
    .answer-page .solution-header { flex-wrap:wrap; }
    .answer-page .solution-header .correct-pill { width:100%; justify-content:center; order:2; }
    .answer-page .vote-head{ flex-wrap:wrap; }

    /* Action toolbar: ensure full width when stacking */
    .answer-page .mb-4 .btn { max-width:100%; }

    /* Comment toolbar inputs full width */
    .answer-page .comment-toolbar .form-control,
    .answer-page .comment-toolbar .form-select { min-width:0; width:100%; }

    /* Comment card spacing */
    .answer-page .comment-card { padding:.7rem .8rem; }
    .answer-page .comment-card .avatar { width:36px; height:36px; }
    .answer-page .comment-meta { gap:.4rem; }
    .answer-page #comments .comment-meta .tools { margin-top:.25rem; }
  }

  /* Slightly larger canvas for Math/solution on md+ */
  @media (min-width: 768px) {
    .answer-page .solution-body { padding-left:2.2rem; padding-right:2.2rem; }
  }

  /* Responsive width helper used in markup: w-100 on xs, auto from sm+ */
  @media (min-width: 576px) { .answer-page .w-sm-auto { width:auto !important; } }
  
  .solution-preview-text { line-height: 1.25; }
  .solution-preview-text br + br { display: block; content: ""; } /* keeps double-breaks readable */

  /* Success theme for the correct pill */
.correct-pill.ok{
  --ok-bg: #eafaf1;      /* light mint */
  --ok-fg: #0f5132;      /* success-emphasis */
  --ok-br: #cbead9;      /* soft border */
  --ok-ac: #16a34a;      /* accent green for icon/letter */

  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .6rem; border-radius:999px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--ok-bg), #fff 25%), var(--ok-bg));
  color:var(--ok-fg);
  border:1px solid var(--ok-br);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 18px rgba(22,163,74,.12);
  font-weight:600;
}

.correct-pill.ok .ok-icon{ color:var(--ok-ac); }
.correct-pill.ok .label{ opacity:.9; }

/* Letter chip */
.correct-pill.ok .opt{
  display:inline-grid; place-items:center;
  width:1.25rem; height:1.25rem; border-radius:999px;
  background:var(--ok-ac); color:#fff; font-weight:800; font-size:.82rem;
  line-height:1; letter-spacing:.2px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .correct-pill.ok{
    --ok-bg:#072b1a; --ok-fg:#b7f0cf; --ok-br:#0d3c26; --ok-ac:#22c55e;
    background: linear-gradient(180deg, color-mix(in oklab, var(--ok-bg), #000 10%), var(--ok-bg));
    box-shadow: 0 0 0 1px rgba(34,197,94,.25) inset, 0 8px 24px rgba(0,0,0,.4);
  }
}

mjx-container {
  max-width: 100%;
  overflow-x: auto; 
  overflow-y: hidden;
}

/* Table style */
/* table {
      width: 80%;
      border-collapse: collapse;
      margin: 0 auto;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      background: white;
    }

    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background: #4b6cb7;
      background: linear-gradient(135deg, #4b6cb7, #182848);
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    tr:hover {
      background-color: #f1f5ff;
    }

    caption {
      caption-side: top;
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 10px;
    } */