@media (max-width: 700px) {
    .wrap { padding: 16px; }
    header.hero { padding: 24px 18px; }

    /* === Compact mobile layout for the sticky top area ===
       Target: roughly 95 to 105px fixed height. Action buttons collapse behind
       the hamburger toggle; only the search input and the 3 mini progress bars
       stay visible. Pressing the toggle reveals all actions inline within the
       sticky area (no overlay or dropdown). */

    .sticky-bar {
      margin: 12px 0 14px;
      gap: 8px;
    }

    /* Force fully opaque sticky surfaces on mobile. The backdrop-filter blur
       was letting page content bleed through and made the underlying titles
       and labels unreadable. A solid surface-2 fill preserves visual
       separation and is cheaper to paint on low-end devices. */
    .sticky-bar > .toolbar,
    .sticky-bar > .progress-card {
      background: var(--surface-2);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* Toolbar: search input and the hamburger button share a single row. */
    .toolbar {
      grid-template-columns: 1fr auto;
      grid-template-rows: auto;
      gap: 8px;
      padding: 8px;
    }
    .search { padding: 7px 12px; }
    .search input { font-size: 14px; }

    /* Hamburger actions toggle */
    .actions-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      flex-shrink: 0;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .actions-toggle:hover { background: var(--surface-3); }
    .actions-toggle:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .toolbar.actions-open .actions-toggle {
      background: var(--accent);
      color: #0b0f17;
      border-color: var(--accent);
    }
    .toolbar.actions-open .actions-toggle .icon-menu { display: none; }
    .toolbar.actions-open .actions-toggle .icon-close { display: inline-block; }

    /* Action buttons: hidden by default; when the toggle is open they flow
       onto a second row below the search input. */
    .actions {
      display: none;
      grid-column: 1 / -1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 6px;
      padding-top: 8px;
      margin-top: 4px;
      border-top: 1px solid var(--border);
      animation: actionsSlideIn 0.18s ease;
    }
    .toolbar.actions-open .actions { display: flex; }

    @keyframes actionsSlideIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Collapse the .action-group wrapper on mobile via display: contents so
       all buttons become direct children of the .actions flex container and
       wrap as many per row as will fit. The role="group" / aria-label
       attributes remain in the DOM for assistive technology. */
    .action-group {
      display: contents;
    }
    .action-group + .action-group::before { display: none; }
    .action-group + .action-group { border-top: 0; }
    .actions > .action-group > .btn {
      flex: 0 1 auto;
      min-width: 0;
      font-size: 11.5px;
      padding: 6px 9px;
      white-space: nowrap;
    }

    /* === Progress card: 3-column compact alignment === */
    .progress-card {
      padding: 9px 12px;
    }
    .progress-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px 12px;
      align-items: start;
    }
    .progress-block { min-width: 0; }
    .progress-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      margin-bottom: 5px;
      line-height: 1.15;
    }
    .progress-label > span:first-child {
      font-size: 9.5px;
      letter-spacing: 0.06em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .progress-label .num {
      font-size: 11px;
      white-space: nowrap;
    }
    .progress-label .lbl-extra { display: none; }
    .bar { height: 5px; }

    /* === Hero controls: vertical stack on mobile === */
    .hero-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .level-filters {
      justify-content: stretch;
    }
    .level-filter-pill {
      flex: 1 1 auto;
      justify-content: center;
      padding: 10px 12px;
    }
    .hero-project-pill {
      justify-content: center;
      padding: 10px 14px;
    }
    .hero-project-pill .proj-pill-name {
      max-width: 120px;
    }
    .hero-controls-right {
      display: flex;
      gap: 8px;
    }
    .hero-controls-right > .hero-lang-pill {
      flex: 0 0 auto;
      padding: 10px 12px;
    }
    .hero-controls-right > .hero-project-pill {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* === Footer title: drop the decorative side rules and use balanced wrap === */
    footer .foot-title::before,
    footer .foot-title::after {
      display: none;
    }
    footer .foot-title {
      font-size: 15px;
      text-wrap: balance;
      padding: 0 12px;
      line-height: 1.35;
    }

    /* === Remaining mobile tweaks (unchanged from prior behaviour) === */
    .cat-header { padding: 18px; flex-wrap: wrap; }
    .cat-header .num { width: 100%; }
    .cat-progress { margin-left: 0; text-align: left; }
    .feature { padding: 16px 18px; }
    .level { grid-template-columns: 24px auto 1fr; padding: 12px; gap: 8px; }
    .level-tag { min-width: 72px; font-size: 9.5px; padding: 2px 7px; }
  }

  /* ==================== PRINT: PAGE BOX ====================
     Top/bottom and left/right margins for the @page box. The 1.6cm vertical
     and 1.4cm horizontal margins are tuned for readable density on A4: they
     leave enough breathing room around the content while still fitting a
     useful amount of checklist items per page. */
  @page {
    margin: 1.6cm 1.4cm;
  }

  /* Print-only footer band. Hidden in the normal viewport; the @media print
     block below promotes it to a table-footer-group so the browser repeats
     it on every printed page. */
  .print-footer {
    display: none;
  }

  @media print {
    /* Force the browser to keep declared colours when printing (otherwise
       most engines strip backgrounds and recolour text for ink saving). */
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }

    /* Restructure body as a CSS table so the print-footer can act as a
       table-footer-group and repeat at the bottom of every printed page. */
    html, body {
      background: white !important;
      color: #000 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body {
      display: table !important;
      width: 100% !important;
    }
    .wrap {
      display: table-row-group !important;
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Footer band: repeats at the bottom of every printed page. */
    .print-footer {
      display: table-footer-group !important;
      text-align: center;
      font-size: 9pt;
      font-style: italic;
      color: #374151 !important;
      padding: 10px 12px 4px;
      border-top: 1px solid #d1d5db;
    }

    /* Hide all interactive chrome (controls, banners, modals, toasts). */
    .sticky-bar,
    .toolbar, .cat-nav, .actions, .progress-card,
    .install-banner,
    .feature-note-toggle, .feature-note,
    .feature-ai-copy, .feature-ai-wrap,
    .presentation-controls, .pres-context-bar,
    .modal, .toast-container,
    .cat-header .chevron {
      display: none !important;
    }

    /* Even if presentation mode is active, fall back to normal layout for
       print so every section is visible in the document, not just one slide. */
    body.presentation-mode {
      overflow: visible !important;
    }
    body.presentation-mode section.category {
      display: block !important;
      padding: 0 !important;
      min-height: auto !important;
      animation: none !important;
    }
    body.presentation-mode .feature-head h3,
    body.presentation-mode .feature-desc,
    body.presentation-mode .level-text,
    body.presentation-mode .cat-header .title h2,
    body.presentation-mode .cat-header .title p {
      font-size: revert !important;
    }
    body.presentation-mode header.hero,
    body.presentation-mode .progress-card {
      display: block !important;
    }
    /* Force collapsed categories to render expanded when printing. */
    .category.collapsed .feature-list {
      display: block !important;
    }
    .cat-header {
      cursor: default !important;
    }

    /* Force all body text to black for maximum print legibility. */
    h1, h2, h3, h4, p, span, strong, li, td, th,
    .feature-desc, .feature-head h3,
    .progress-label, .progress-label .num,
    .cat-header .title h2, .cat-header .title p,
    .cat-progress, .cat-progress .pct,
    .level-text, footer, footer strong {
      color: #000 !important;
    }

    /* Keep brand accent (orange) on emphasis chrome. */
    .eyebrow,
    .cat-header .num {
      color: #ea580c !important;
    }

    /* Flatten the gradient text inside H1 to a solid orange for print. */
    h1 em {
      background: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      -webkit-text-fill-color: #ea580c !important;
      color: #ea580c !important;
    }

    /* Feature ID and hint text use dark grey instead of pure black to keep
       the hierarchy readable without dominating the page. */
    .feature-head .id {
      color: #4b5563 !important;
    }
    .level-text .hint {
      color: #374151 !important;
    }

    /* Make inline <code> readable on paper: black text on light grey fill. */
    code {
      color: #000 !important;
      background: #f3f4f6 !important;
      border: 1px solid #e5e7eb !important;
    }

    /* MVP badge: green palette. */
    .level.mvp .level-tag {
      color: #15803d !important;
      background: #ecfdf5 !important;
      border-color: #86efac !important;
    }
    .level.mvp {
      border-left: 3px solid #16a34a !important;
    }

    /* Release badge: blue palette. */
    .level.release .level-tag {
      color: #1d4ed8 !important;
      background: #eff6ff !important;
      border-color: #93c5fd !important;
    }
    .level.release {
      border-left: 3px solid #2563eb !important;
    }

    /* Checkbox boxes: keep their MVP/Release colours when checked. */
    .check {
      background: white !important;
      border-color: #9ca3af !important;
    }
    .level.checked.mvp .check {
      background: #16a34a !important;
      border-color: #16a34a !important;
    }
    .level.checked.release .check {
      background: #2563eb !important;
      border-color: #2563eb !important;
    }
    .level.checked .check::after {
      border-color: #fff !important;
    }

    /* Checked rows: very light tinted background so the row stands out. */
    .level.checked.mvp {
      background: #ecfdf5 !important;
    }
    .level.checked.release {
      background: #eff6ff !important;
    }

    /* Container styling: flat white surfaces with light borders for print. */
    header.hero {
      background: white !important;
      border: 1px solid #d1d5db !important;
    }
    header.hero::before {
      display: none !important;
    }

    /* Page-break rules: let categories break naturally so content flows
       through the document instead of forcing every category to a new page. */
    section.category {
      page-break-inside: auto !important;
      break-inside: auto !important;
      border: 1px solid #d1d5db !important;
      background: white !important;
    }

    /* Keep a single feature card on one page; never split mid-card. */
    .feature {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      border-bottom: 1px solid #e5e7eb !important;
    }

    /* Prevent a category header from ending up alone at the bottom of a
       page with no content under it (orphan control). */
    .cat-header {
      page-break-after: avoid !important;
      break-after: avoid !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      background: #f9fafb !important;
      border-bottom: 1px solid #d1d5db !important;
    }

    /* Keep the feature title and description glued to their level list so
       a heading never gets separated from its content. */
    .feature-head,
    .feature-desc,
    h2, h3 {
      page-break-after: avoid !important;
      break-after: avoid !important;
    }

    /* A single level row (MVP/Release badge + text) stays unbroken. */
    .level {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
      background: white !important;
      border: 1px solid #e5e7eb !important;
    }

    /* Hero (cover) stays on a single page. */
    header.hero {
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }

    /* Hide hero controls (level filter pills + framework picker) on print. */
    .hero-controls { display: none !important; }

    /* Feature title and ID layout: render inline so the heading reflows
       cleanly without odd line breaks between the ID and the title. */
    article.feature .feature-head {
      display: block !important;
      margin-bottom: 8px !important;
      flex-wrap: wrap !important;
    }
    article.feature .feature-head .id {
      display: inline !important;
      margin-right: 6px !important;
      color: #4b5563 !important;
    }
    article.feature .feature-head h3 {
      display: inline !important;
      flex: none !important;
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      font-size: 13pt !important;
      line-height: 1.4 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
      white-space: normal !important;
      color: #000 !important;
    }

    /* Category header: allow safe wrapping to avoid mid-word overflow. */
    .cat-header {
      flex-wrap: wrap !important;
    }
    .cat-header .title {
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }
    .cat-header .title h2 {
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      min-width: 0 !important;
    }

    /* Slightly reduce feature padding so more usable margin remains. */
    .feature {
      padding: 14px 16px !important;
    }
  }

  /* ==================== HOW-TO PDF MODE ====================
     When the user picks "How-To Guide" from the print modal, JS adds the
     .print-howto class to <body> and then calls window.print(). This block
     only activates in that mode: the card front (checklist levels, checkbox,
     etc.) is hidden and the card back (the how-to guide) is reformatted for
     paper. Normal checklist printing is not affected; the @media print block
     above keeps working independently.

     DESIGN GOAL: fit a lot of items per page, render each item as a clearly
     bounded rounded card (border + radius), keep pages visually full, and
     avoid repeating the "Prepared by" line. Fonts and spacing are noticeably
     tighter here than in the regular checklist print. */
  @media print {
    body.print-howto * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      color-adjust: exact !important;
    }

    /* Override the 3D flip backface hiding: in this mode we want the back
       face (the how-to guide) visible and positioned in normal flow. */
    body.print-howto .feature-inner > .feature-back {
      display: block !important;
      position: static !important;
      transform: none !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
    }
    body.print-howto .feature-inner > .feature-front {
      display: none !important;
    }
    body.print-howto .feature-inner {
      transform: none !important;
      transition: none !important;
      height: auto !important;
      display: block !important;
    }

    /* Hide everything not useful in the how-to PDF: the flip button, the
       "Ask AI" / "Add note" actions, the inline notes, the front-face level
       list, the per-category progress percent, and the repeating footer. */
    body.print-howto .feature-flip-btn,
    body.print-howto .feature-actions,
    body.print-howto .feature-note,
    body.print-howto .levels,
    body.print-howto .cat-progress,
    body.print-howto .print-footer {
      display: none !important;
    }

    /* The footer "PREPARED BY / Ozcan" pill plus the table-footer print band
       below it duplicated the same line on every page (most visibly on the
       last page). We hide the print-footer here; the pill inside the regular
       footer is enough. */

    /* ----- Hero (cover): shrink for the how-to PDF ----- */
    body.print-howto header.hero {
      padding: 14px 18px !important;
      margin: 0 0 12px !important;
    }
    body.print-howto header.hero h1 {
      font-size: 18pt !important;
      line-height: 1.15 !important;
      margin: 6px 0 4px !important;
    }
    body.print-howto .eyebrow {
      font-size: 8pt !important;
      letter-spacing: 0.12em !important;
    }
    body.print-howto .instructor-pill {
      font-size: 8.5pt !important;
      padding: 5px 12px !important;
    }
    body.print-howto .hero-controls,
    body.print-howto .progress-overall,
    body.print-howto .progress-meta {
      display: none !important;
    }

    /* ----- Category: no outer box; the header becomes a thin banner ----- */
    body.print-howto section.category {
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
      margin: 0 0 12px !important;
      overflow: visible !important;
    }
    body.print-howto .cat-header {
      background: #f9fafb !important;
      border: 1px solid #d1d5db !important;
      border-radius: 6px !important;
      padding: 8px 12px !important;
      margin: 0 0 8px !important;
      gap: 10px !important;
      page-break-after: avoid !important;
      break-after: avoid !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    body.print-howto .cat-header .num {
      font-size: 8.5pt !important;
      width: auto !important;
      letter-spacing: 0.14em !important;
    }
    body.print-howto .cat-header .title h2 {
      font-size: 11.5pt !important;
      line-height: 1.25 !important;
      margin: 0 !important;
    }
    body.print-howto .cat-header .title p {
      font-size: 8.5pt !important;
      margin: 1px 0 0 !important;
      line-height: 1.35 !important;
    }
    body.print-howto .feature-list {
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }

    /* ----- Feature cards: prominent border + rounded corners, compact ----- */
    body.print-howto .feature {
      padding: 9px 12px !important;
      border: 1px solid #d1d5db !important;
      border-radius: 6px !important;
      background: white !important;
      margin: 0 !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    body.print-howto .feature:last-child {
      border-bottom: 1px solid #d1d5db !important;
    }

    /* Compact feature heading on the back face. */
    body.print-howto .feature-back .feature-head {
      margin-bottom: 6px !important;
      display: block !important;
    }
    body.print-howto .feature-back .feature-head h3 {
      color: #000 !important;
      font-size: 11pt !important;
      line-height: 1.3 !important;
      display: inline !important;
      margin: 0 !important;
    }
    body.print-howto .feature-back .feature-head .id {
      color: #4b5563 !important;
      font-size: 8pt !important;
      margin-right: 5px !important;
      display: inline !important;
    }

    /* How-To grid: tight 2-column layout (tag column + text column). */
    body.print-howto .howto-body {
      margin-top: 2px !important;
    }
    body.print-howto .howto-grid {
      display: grid !important;
      grid-template-columns: 64px 1fr !important;
      gap: 6px 10px !important;
      margin-top: 2px !important;
      align-items: start !important;
    }
    body.print-howto .howto-grid > .howto-text:nth-child(n+3) {
      padding-top: 7px !important;
      border-top: 1px solid #e5e7eb !important;
    }
    body.print-howto .howto-grid > .howto-tag:nth-child(n+3) {
      margin-top: 8px !important;
    }

    /* MVP / Release chips: compact pill sizing for the PDF. */
    body.print-howto .howto-tag {
      height: 18px !important;
      line-height: 16px !important;
      font-size: 8pt !important;
      padding: 0 8px !important;
      min-width: 56px !important;
      align-self: start !important;
      letter-spacing: 0.05em !important;
    }
    body.print-howto .howto-tag.mvp {
      color: #15803d !important;
      background: #ecfdf5 !important;
      border: 1px solid #86efac !important;
    }
    body.print-howto .howto-tag.release {
      color: #1d4ed8 !important;
      background: #eff6ff !important;
      border: 1px solid #93c5fd !important;
    }

    /* ----- How-to body text and step lists ----- */
    body.print-howto .howto-text {
      font-size: 9pt !important;
      line-height: 1.4 !important;
      color: #000 !important;
    }
    body.print-howto .howto-text strong {
      color: #000 !important;
      font-weight: 600 !important;
    }
    body.print-howto .howto-text code {
      color: #000 !important;
      background: #f3f4f6 !important;
      border: 1px solid #e5e7eb !important;
      font-size: 8.5pt !important;
      padding: 0 4px !important;
    }
    body.print-howto .howto-text .hint {
      display: block !important;
      margin-top: 6px !important;
      padding: 5px 8px !important;
      background: #f9fafb !important;
      border-left: 2px solid #94a3b8 !important;
      font-size: 8.5pt !important;
      color: #475569 !important;
      font-style: italic !important;
      border-radius: 0 4px 4px 0 !important;
    }
    body.print-howto .howto-step-intro {
      margin: 0 0 5px !important;
      font-size: 9pt !important;
      color: #374151 !important;
      line-height: 1.4 !important;
    }
    body.print-howto .howto-steps {
      list-style: none !important;
      counter-reset: howtostep !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body.print-howto .howto-steps > li {
      counter-increment: howtostep !important;
      position: relative !important;
      padding: 0 0 0 24px !important;
      margin: 0 0 3px !important;
      line-height: 1.4 !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    body.print-howto .howto-steps > li:last-child {
      margin-bottom: 0 !important;
    }
    body.print-howto .howto-steps > li::before {
      content: counter(howtostep) !important;
      position: absolute !important;
      left: 0 !important;
      top: 1px !important;
      width: 17px !important;
      height: 17px !important;
      line-height: 17px !important;
      text-align: center !important;
      border-radius: 999px !important;
      background: #f3f4f6 !important;
      color: #1d4ed8 !important;
      font-size: 8pt !important;
      font-weight: 700 !important;
      border: 1px solid #d1d5db !important;
    }
    /* Checked step: renders as a "done" tick in the PDF, with the marker
       coloured by the step's level (MVP green, Release blue). */
    body.print-howto .howto-steps > li.checked::before {
      content: "✓" !important;
      color: #fff !important;
      border-color: transparent !important;
      font-size: 9pt !important;
    }
    body.print-howto .howto-steps.howto-steps-mvp > li.checked::before {
      background: #16a34a !important;
    }
    body.print-howto .howto-steps.howto-steps-release > li.checked::before {
      background: #2563eb !important;
    }
    body.print-howto .howto-steps > li.checked {
      color: #6b7280 !important;
      text-decoration: line-through !important;
      text-decoration-color: #9ca3af !important;
    }
    body.print-howto .howto-steps > li.checked strong,
    body.print-howto .howto-steps > li.checked code {
      color: #6b7280 !important;
    }

    /* "No guide available" placeholder message. */
    body.print-howto .howto-empty {
      font-size: 8.5pt !important;
      color: #6b7280 !important;
      font-style: italic !important;
      margin: 2px 0 0 !important;
    }

    /* Optimise downward page flow: keep container rules relaxed so the
       browser can break freely between categories, while individual feature
       cards stay tightly protected against mid-card splits. */
    body.print-howto section.category {
      page-break-inside: auto !important;
      break-inside: auto !important;
    }
  }

  /* ==================== REDUCED MOTION (prefers-reduced-motion) ====================
     When the user has the OS-level "reduce motion" preference enabled
     (Windows: Settings > Accessibility > Visual effects; macOS: System
     Settings > Accessibility > Display > Reduce motion), all transitions
     and animations become effectively instantaneous. Visual feedback
     (hover, focus, checked state) is preserved; only the movement is
     removed. This block lives in the last-loaded stylesheet so it
     overrides every prior motion rule. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    /* Card flip (front to back): collapse the 3D rotateY animation to an
       instant swap. transform-style and backface-visibility stay in effect;
       only the duration is zeroed. The height transition also becomes
       instant so the JS-driven explicit-height step is never visible. */
    .feature-inner {
      transition-duration: 0.01ms !important;
    }
  }

  /* ==================== ACCESSIBILITY PRIMITIVES ====================
     skip-link: lets keyboard and screen-reader users jump past the menus
     and straight to the main content. Sits off-screen visually and only
     becomes visible once it receives focus. Satisfies WCAG 2.4.1 Bypass
     Blocks. */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--accent, #f97316);
    color: #0b0f17;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: top 0.18s ease;
  }
  .skip-link:focus {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* noscript fallback: banner shown when JavaScript is disabled. Kept
     bilingual (Turkish + English) because the app's language-switching
     logic itself requires JS, so the message has to cover both audiences
     up front. */
  .noscript-banner {
    margin: 16px auto;
    max-width: 720px;
    padding: 18px 22px;
    background: #fef3c7;
    color: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.55;
  }