:root {
      /* 14.09.2026: page was near-white (#f7f7f5) and cards pure white
         (#ffffff) - a ~2/255 difference, so cards never visually separated
         from the page no matter what border/shadow was added, and the page
         itself read as glaring. Both tones deepened together, cards kept
         a clear step darker than the page so they read as a distinct
         surface (by request). */
      --bg: #eae7e1;
      --graphite: #14161a;
      --brand-accent: #0F6E56;
      --brand-accent-dark: #085041;
      --brand-accent-darkest: #04342C;
      --brand-accent-tint: #E1F5EE;
      --brand-accent-bright: #10B981; /* lighter accent for legibility on dark backgrounds */
      --red: #C23B3B;
      --card-bg: #d7d3ca;
      --border: #c5c0b5;
      --text: #1c1d20;
      --text-muted: #6b6d72;
      --ok-bg: #eef6ee;
      --ok-border: #b9dcb9;
      --ok-text: #2f6b2f;
      --header-dock-height: 90px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      padding-top: var(--header-dock-height);
    }
    /* Sticky footer: site-main grows to fill any leftover viewport height on
       short pages, pushing the footer to the bottom; on long pages it just
       behaves like a normal block and the page scrolls as usual. */
    .site-main {
      flex: 1 0 auto;
    }
    h1, h2 {
      font-family: "Archivo Black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 900;
    }

    /* Header — 15.09.2026: sticky "floating glass" dock, mechanic borrowed
       from the m2x-landing-site header (sticky, rounded, blurred, floats
       off the page edge) - by request, keeping CargoScan's own green
       identity rather than that site's navy/orange, so it doesn't clash
       with every button/accent elsewhere in the app. .header-dock is the
       thing that's actually sticky; it carries the page background color
       so the rounded corners of .site-header (and, when present, the
       toolbar block below it) never show scrolling content peeking
       through the gap around them - the landing site didn't need this
       (uniform dark background everywhere), CargoScan's lighter page
       background does. #action-toolbar's own float-under-header pairing
       lives in the same dock (see templates/base.html's {% block toolbar
       %}) so header and toolbar always scroll together as one unit
       without needing separate sticky offsets. */
    .header-dock {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      background: var(--bg);
      padding: 0;
      /* 06.10.2026: header is a full-width bar now (edge to edge, width:100%
         via left/right:0, never 100vw - that includes the scrollbar and would
         add horizontal scroll); its content sits in the 1100px column
         (.site-header-inner). */
      /* 15.09.2026: Safari can tear/misplace a fixed element that also
         has a blurred child (.site-header's backdrop-filter) during
         scroll - the compositor briefly repaints it a frame late, which
         looks like the header shrinking or page content (e.g. the Close
         button right below it) showing through/behind it mid-scroll.
         Forcing this onto its own GPU layer keeps it stable. */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      will-change: transform;
    }
    .site-header {
      position: relative;
      width: 100%;
    }
    /* 15.09.2026: purely decorative - the "floating glass" look (rounded
       corners, blur, border, shadow), painted BEHIND .site-header-inner
       via position:absolute + z-index rather than wrapping it, so its
       own overflow:hidden (needed to keep the Safari blur inside the
       rounded corners) has nothing of .site-header-inner's to clip.
       .header-right (the mobile dropdown) used to be nested inside a
       wrapper that carried both this background AND overflow:hidden:
       the dropdown's is-open class toggled correctly but it never
       actually painted on screen, clipped away by that overflow:hidden.
       Splitting the background out as its own empty, z-index:0 layer
       fixes that while keeping .header-right a normal flex child of
       .site-header-inner (so it still sits inline in the header row on
       desktop, unaffected by any of this). */
    .site-header-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: var(--graphite);
      background: color-mix(in srgb, var(--graphite) 90%, transparent);
      /* 06.10.2026: full-bleed bar - straight corners, only a bottom edge */
      border-radius: 0;
      overflow: hidden;
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 16px 32px -16px rgba(4, 6, 8, 0.55),
        0 2px 10px rgba(4, 6, 8, 0.3);
    }
    .site-header-inner {
      width: min(100% - 2rem, 1100px);
      margin-inline: auto;
      position: relative; /* anchors .header-right's mobile dropdown (below); also lifts this above .site-header-bg without an explicit z-index, since it comes later in paint order */
      padding: 16px 4px;
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    /* The action toolbar (templates/base.html's {% block toolbar %},
       filled in by pages like result.html) is a second floating card in
       the same dock, directly under the header - same treatment, smaller
       padding since it only ever holds a row of buttons. Pages that don't
       override the block render nothing here (Jinja's default empty
       block), so .header-dock quietly stays header-only everywhere else. */
    .action-toolbar {
      width: min(100% - 2rem, 1100px);
      margin: 8px auto 0;
      background: var(--card-bg);
      background: color-mix(in srgb, var(--card-bg) 92%, transparent);
      border-radius: 14px;
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border: 1px solid var(--border);
      box-shadow: 0 10px 24px -14px rgba(20, 22, 26, 0.35);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .action-toolbar-primary {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .action-toolbar .btn {
      padding: 9px 16px;
      font-size: 0.88rem;
    }
    /* 15.09.2026, by request: .action-toolbar-back is the "leave this
       page" link wherever it sits - on result.html that's "Analyze
       another document", the page's main CTA, not a destructive action,
       so it stays plain .btn green. Actual close controls (driver.html /
       edit_report.html's "Close") use the separate .action-toolbar-close
       modifier below instead, which is where the red lives now - a
       first attempt colored .action-toolbar-back itself red site-wide
       and that reddened "Analyze another document" too, which is why
       this is split into two classes rather than one. */
    /* 15.09.2026, by request: same red as .stop-btn-danger (result.css)
       - every real close control shares the app's one red. Doubled up
       as .btn.action-toolbar-close (not just .action-toolbar-close) so
       it beats plain .btn on specificity regardless of source order in
       this file (a single-class tie is won by whichever rule is later,
       which is how the first attempt at this silently rendered green). */
    .btn.action-toolbar-close {
      background: var(--red);
      color: #ffffff;
      border: none;
      box-shadow: none;
    }
    .btn.action-toolbar-close:hover {
      background: #A12F2F;
      box-shadow: none;
      transform: none;
    }
    .action-toolbar-more {
      position: relative;
      flex: 0 0 auto;
    }
    /* 15.09.2026, by request: filled like every other .btn (was a
       plain outline before) - now that mobile tucks the whole toolbar
       behind it, this is often the ONLY visible action on the page and
       needs to read as a real button, not a subtle outline one. Open
       state uses the same darker shade .btn:hover already does, so
       "expanded" reads as "pressed" rather than a second, different
       color. */
    .action-toolbar-more-btn {
      padding: 9px 16px;
      font-size: 0.88rem;
      font-weight: 800;
      border-radius: 8px;
      border: none;
      background: var(--brand-accent);
      color: #ffffff;
      cursor: pointer;
    }
    .action-toolbar-more-btn:hover { background: var(--brand-accent-dark); }
    .action-toolbar-more-btn[aria-expanded="true"] {
      background: var(--brand-accent-dark);
      color: #fff;
    }
    .action-toolbar-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 220px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 28px -10px rgba(20, 22, 26, 0.3);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 41;
    }
    .action-toolbar-menu[hidden] { display: none; }
    .action-toolbar-menu a,
    .action-toolbar-menu button {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: var(--text);
      font: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 9px 10px;
      border-radius: 6px;
      cursor: pointer;
      text-decoration: none;
    }
    .action-toolbar-menu a:hover,
    .action-toolbar-menu button:hover { background: var(--brand-accent-tint); }
    .action-toolbar-menu .action-status { font-size: 0.75rem; padding-left: 10px; }
    .brand {
      display: flex;
      align-items: baseline;
      gap: 10px;
      color: #fff;
      text-decoration: none;
    }
    .brand-name {
      font-family: "Archivo Black", sans-serif;
      font-size: 1.3rem;
      letter-spacing: -0.01em;
      color: var(--brand-accent-bright);
    }
    .brand-tagline {
      font-size: 0.85rem;
      color: #c7c8cc;
      border-bottom: 2px solid var(--brand-accent);
      padding-bottom: 2px;
    }
    .lang-switcher select {
      background: var(--graphite);
      color: #fff;
      border: 1px solid #3a3d44;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
    }
    .lang-switcher select:hover { border-color: var(--brand-accent-bright); }
    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    /* 15.09.2026, by request: hidden on desktop - .header-right is
       always shown inline there and this has nothing to toggle. Same
       hamburger mechanic the landing site uses for its own nav, redrawn
       in this app's own dropdown language (see .header-right.is-open
       and the media query below) rather than that site's exact panel
       styling - CargoScan keeps its own dark/green header, only the
       "collapse behind a toggle instead of wrapping" idea is borrowed. */
    .header-nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      background: none;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.25); /* Safari gives no default press feedback on a bare <button> - without this a tap that DID register can look like nothing happened */
    }
    /* pointer-events: none - these three bars are decorative; without
       this a tap can land on one bar's own box (the button is built
       from three separate 16x2px children with gaps between them, not
       a single icon) instead of bubbling as a click on the button
       itself in every browser. The button's own background still
       receives every click across its full 44x44 area either way. */
    .header-nav-toggle span {
      display: block;
      width: 16px;
      height: 2px;
      background: #ffffff;
      border-radius: 2px;
      pointer-events: none;
    }
    .auth-nav {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.85rem;
    }
    /* Groups the account link + email together so they move and wrap as
       one unit, separate from the Log out button - see the mobile rule
       below, which puts this group and the button on the same compact
       row instead of three separate stacked lines. */
    .auth-nav-account {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .auth-email {
      color: #c7c8cc;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .auth-link {
      color: var(--brand-accent-bright);
      text-decoration: none;
      font-weight: 600;
    }
    .auth-link:hover { text-decoration: underline; }
    /* 15.09.2026, by request: the red/"voluminous" .nav-link Log out
       button that used to live here is gone - by request it no longer
       lives in the header at all (see the {% if user %} branch in
       base.html and the comment there). Its quiet replacement is
       .account-logout-btn in account.css, on the account page itself. */

    .password-field {
      position: relative;
    }
    .password-field input {
      width: 100%;
      padding-right: 96px;
    }
    .password-toggle {
      position: absolute;
      right: 10px;
      bottom: 8px;
      border: 0;
      background: transparent;
      color: var(--brand-accent-dark);
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 600;
    }

    /* Layout */
    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px 20px 64px;
    }

    /* Cards - "matte glass": translucent fill + blur + soft shadow, not a
       flat opaque box, so a card reads as a distinct surface even though
       --card-bg and --bg (page background) are close in tone (found
       14.09.2026 - cards on /orders/{id}/edit and /orders/{id}/driver were
       barely distinguishable from the page, especially on a phone/glare). */
    .card {
      background: var(--card-bg); /* fallback for browsers without color-mix()/backdrop-filter */
      background: color-mix(in srgb, var(--card-bg) 88%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 26px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(20,22,26,0.06), 0 6px 16px rgba(20,22,26,0.05);
    }
    /* 15.09.2026, by request: .card content is centered with equal padding
       on all sides everywhere (single shared rule above, not per-card
       overrides). Two content types would regress if centered along with
       everything else - typed form-input text and tabular data cells -
       so they're pinned back to left here. */
    .card input,
    .card select,
    .card textarea {
      text-align: left;
    }
    .card table th,
    .card table td {
      text-align: left;
    }
    h2.section-title {
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      margin: 0 0 16px;
      color: var(--graphite);
    }

    /* Standard error banner for form/page errors — light red background +
       accent text, same idea as the risk-flag tags on result.html but for
       errors rather than risks. */
    .error-banner {
      background: #f8ecec;
      color: var(--red);
      border: 1px solid #e0b3b3;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 0.9rem;
      margin-bottom: 20px;
    }
    .error-banner[hidden] { display: none; }

    /* Admin panel (/admin/*) — internal tool, kept plain on purpose. */
    .admin-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .admin-nav a {
      padding: 8px 14px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--text);
      background: var(--card-bg);
      border: 1px solid var(--border);
      font-size: 0.85rem;
      font-weight: 600;
    }
    .admin-nav a.is-active {
      background: var(--graphite);
      color: #fff;
      border-color: var(--graphite);
    }
    .admin-table-wrap { overflow-x: auto; }
    table.admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    table.admin-table th {
      text-align: left;
      color: var(--text-muted);
      font-weight: 700;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      padding: 0 10px 8px 0;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    table.admin-table td {
      padding: 8px 10px 8px 0;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    table.admin-table tr:last-child td { border-bottom: none; }
    .admin-table-totals td {
      border-bottom: 2px solid var(--border);
      background: var(--surface-muted, rgba(0,0,0,0.03));
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .admin-pagination {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      align-items: center;
      font-size: 0.85rem;
      color: var(--text-muted);
    }
    .admin-pagination a { color: var(--brand-accent-dark); text-decoration: none; font-weight: 600; }
    .admin-filter-bar {
      margin-bottom: 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .admin-filter-bar a {
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 0.78rem;
      border: 1px solid var(--border);
      text-decoration: none;
      color: var(--text-muted);
    }
    .admin-filter-bar a.is-active {
      background: var(--brand-accent-tint);
      color: var(--brand-accent-darkest);
      border-color: transparent;
      font-weight: 700;
    }
    .badge-status {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .badge-status--success { background: var(--ok-bg); color: var(--ok-text); }
    .badge-status--api_error, .badge-status--parse_error {
      background: #f8ecec;
      color: var(--red);
    }

    /* Buttons */
    .btn {
      display: inline-block;
      background: var(--brand-accent);
      color: #ffffff;
      text-decoration: none;
      border: none;
      border-radius: 8px;
      padding: 13px 24px;
      font-weight: 800;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .btn:hover {
      background: var(--brand-accent-dark);
      box-shadow: 0 3px 10px rgba(4, 52, 44, 0.25);
      transform: translateY(-1px);
    }
    .btn:disabled {
      background: var(--border);
      color: var(--text-muted);
      cursor: not-allowed;
    }
    .btn:disabled:hover {
      background: var(--border);
      box-shadow: none;
      transform: none;
    }

    .footer-dock {
      padding: 0;
      flex-shrink: 0;
    }
    /* 06.10.2026: full-bleed bar; content stays in .footer-container (1100px) */
    footer.site-footer {
      width: 100%;
      background: #0B1210;
      background: color-mix(in srgb, #0B1210 88%, transparent);
      color: #D3D1C7;
      border-radius: 0;
      overflow: hidden;
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 16px 32px -16px rgba(4, 6, 8, 0.45),
        0 2px 10px rgba(4, 6, 8, 0.25);
    }
    /* 15.09.2026, by request: everything in the footer centers now -
       text, headings, link lists, the copyright line - instead of
       sitting flush against the left edge of each column. Scoped to
       the footer only (text-align here doesn't escape .footer-container
       since nothing inside resets it back to left). */
    .footer-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2.5rem 2rem 1.5rem;
      text-align: center;
    }
    .footer-columns {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 32px;
      margin-bottom: 24px;
      justify-items: center;
      align-items: center;
    }
    .footer-brand-name {
      font-weight: 500;
      font-size: 17px;
      color: #5DCAA5;
      margin: 0 0 8px;
    }
    .footer-tagline {
      font-size: 13px;
      color: #9C9C97;
      line-height: 1.5;
      margin: 0;
    }
    .footer-col-heading {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
      color: #9C9C97;
      margin: 0 0 12px;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .footer-links a,
    .footer-links .footer-link-btn {
      display: inline-block;
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      text-align: center;
      color: #D3D1C7;
      font-size: 13px;
      text-decoration: none;
      cursor: pointer;
    }
    .footer-links a:hover,
    .footer-links .footer-link-btn:hover {
      color: #5DCAA5;
      text-decoration: underline;
    }
    .footer-bottom {
      padding-top: 20px;
      border-top: 1px solid #2A332F;
      font-size: 12px;
      color: #9C9C97;
    }

    @media (max-width: 600px) {
      /* 15.09.2026, by request: was a single stacked column (brand,
         then Product, then Legal, each full-width with only 2-3 short
         links) - tall and mostly empty side space, same complaint as
         the mobile header before it got the same treatment. Brand+
         tagline keeps its own full-width row (it's a paragraph, needs
         the width); Product and Legal now sit side by side in a second
         row instead of stacking, since two short link lists next to
         each other use the width instead of just adding height. */
      .footer-container { padding: 1.75rem 1.25rem 1.25rem; }
      .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 20px 16px;
        margin-bottom: 18px;
      }
      .footer-col:first-child { grid-column: 1 / -1; }
      .footer-col-heading { margin-bottom: 8px; }
      .footer-links { gap: 6px; }
      .footer-bottom { padding-top: 14px; }
    }

    /* Plain legal text pages (/privacy, /terms) — no cards/grids, just
       headings and paragraphs in the site's usual type/color scheme. */
    .legal-page h1 {
      font-size: 1.8rem;
      margin: 0 0 20px;
      color: var(--graphite);
    }
    .legal-page h2 {
      font-size: 1.15rem;
      margin: 32px 0 12px;
      color: var(--graphite);
    }
    .legal-page p,
    .legal-page li {
      color: var(--text);
      line-height: 1.6;
      font-size: 0.95rem;
    }
    .legal-page ul {
      margin: 0 0 12px;
      padding-left: 20px;
    }
    .legal-page li {
      margin-bottom: 6px;
    }
    .legal-page a {
      color: var(--brand-accent);
    }
    .legal-updated {
      margin-top: 40px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 0.85rem;
    }

    /* Generic right-side slide-in panel: shared by the landing page's
       sample-report panel and the chat assistant panel below. Each caller
       adds its own modifier class for width only (.sample-panel /
       .chat-panel) — the mechanics (position, backdrop, open/close
       transition) live here, site-wide, so they're not duplicated. */
    .slide-panel-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0;
      visibility: hidden;
      transition: opacity 280ms ease, visibility 0s linear 280ms;
      z-index: 1000;
    }
    .slide-panel-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity 280ms ease, visibility 0s linear 0s;
    }

    .slide-panel {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      max-width: 100vw;
      background: var(--bg); /* was #ffffff (14.09.2026) - site-wide drawer, same page tone as the compare panel */
      box-shadow: -8px 0 32px rgba(20, 22, 26, 0.18);
      transform: translateX(100%);
      transition: transform 280ms ease;
      z-index: 1001;
      display: flex;
      flex-direction: column;
    }
    .slide-panel.is-open {
      transform: translateX(0);
    }
    /* 15.09.2026, by request: same red as .action-toolbar-close /
       .stop-btn-danger - every real close control in the app shares one
       color, whether it's a link (toolbar) or this round × (drawers/
       overlays: chat panel, sample panel, the compare PDF panel). */
    .slide-panel-close {
      position: absolute;
      top: 12px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--red);
      color: #ffffff;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1002;
    }
    .slide-panel-close:hover {
      background: #A12F2F;
    }

    /* Chat assistant widget — floating button + slide-in panel, site-wide */
    .chat-widget-button {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: none;
      background: var(--brand-accent);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(20, 22, 26, 0.25);
      z-index: 999;
    }
    .chat-widget-button:hover {
      background: var(--brand-accent-dark);
    }

    .chat-panel {
      width: 400px;
    }
    @media (max-width: 480px) {
      .chat-panel {
        width: 100vw;
      }
    }

    .chat-panel-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 52px 16px 20px;
      border-bottom: 1px solid var(--border);
      font-weight: 700;
      color: var(--graphite);
      flex: 0 0 auto;
    }
    .chat-panel-header i {
      color: var(--brand-accent);
      font-size: 1.3rem;
    }

    .chat-messages {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .chat-message {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 0.92rem;
      line-height: 1.4;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .chat-message--assistant {
      align-self: flex-start;
      background: #f0f1f3;
      color: var(--graphite);
      border-bottom-left-radius: 4px;
      /* Renders parsed markdown (see renderMarkdown()) — block elements
         handle their own spacing, so the plain-text pre-wrap above is
         overridden here to avoid doubling up on line breaks. */
      white-space: normal;
    }
    .chat-message--assistant p { margin: 0 0 8px; }
    .chat-message--assistant p:last-child { margin-bottom: 0; }
    .chat-message--assistant ul, .chat-message--assistant ol { margin: 4px 0 8px; padding-left: 20px; }
    .chat-message--assistant li { margin: 2px 0; }
    .chat-message--assistant a { color: var(--brand-accent-dark); }
    .chat-message--assistant code {
      background: rgba(0, 0, 0, 0.06);
      padding: 1px 4px;
      border-radius: 4px;
      font-size: 0.85em;
    }
    .chat-message--assistant pre {
      background: rgba(0, 0, 0, 0.06);
      padding: 8px;
      border-radius: 6px;
      overflow-x: auto;
    }
    .chat-message--user {
      align-self: flex-end;
      background: var(--brand-accent);
      color: #ffffff;
      border-bottom-right-radius: 4px;
    }
    .chat-message--error {
      align-self: center;
      background: #fdecea;
      color: #9c2b1f;
      font-size: 0.85rem;
      text-align: center;
    }

    .chat-typing {
      align-self: flex-start;
      display: flex;
      gap: 4px;
      padding: 10px 14px;
      background: #f0f1f3;
      border-radius: 14px;
      border-bottom-left-radius: 4px;
    }
    .chat-typing span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #9aa0a6;
      animation: chat-typing-bounce 1.2s infinite ease-in-out;
    }
    .chat-typing span:nth-child(2) { animation-delay: 0.15s; }
    .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes chat-typing-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    .chat-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0 20px 12px;
      flex: 0 0 auto;
    }
    .chat-chip {
      border: 1px solid var(--brand-accent);
      color: var(--brand-accent);
      background: var(--bg); /* was #ffffff (14.09.2026) */
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 0.82rem;
      cursor: pointer;
      font-family: inherit;
    }
    .chat-chip:hover {
      background: var(--brand-accent-tint);
    }

    .chat-input-row {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      flex: 0 0 auto;
    }
    .chat-input-row input {
      flex: 1 1 auto;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 16px;
      font-size: 0.92rem;
      font-family: inherit;
    }
    .chat-input-row input:disabled {
      background: #f5f5f5;
    }
    .chat-send-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: var(--brand-accent);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .chat-send-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

    @media (max-width: 768px) {
      /* 15.09.2026, by request: the header row itself never wraps on
         mobile any more (same rule the landing site follows - logo left,
         a single toggle right, one fixed-height row); auth-nav and the
         language switcher move into a dropdown behind .header-nav-toggle
         instead of stacking into extra rows underneath the brand. */
      .header-nav-toggle { display: flex; }
      .header-right {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: -8px;
        right: -8px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        background: var(--graphite);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 10px;
        padding: 12px 16px;
        box-shadow: 0 16px 32px -16px rgba(4, 6, 8, 0.55);
        z-index: 41;
      }
      .header-right.is-open { display: flex; }
      /* 15.09.2026, by request: now that Log out no longer lives here
         (moved to the account page), the account info and the language
         switcher are the only two things left - one compact row, not
         a stretched-full-width language select on its own line below.
         auth-nav shrinks (min-width:0, so the email can ellipsis) to
         leave room for the switcher, which is sized to its own content
         instead of being stretched. */
      .auth-nav { flex: 1 1 auto; min-width: 0; }
      .lang-switcher { flex: 0 0 auto; }
      .lang-switcher select { width: auto; }
      .page { padding: 24px 16px 48px; }
      /* 44x44 minimum tap targets inside the mobile dropdown */
      .auth-link { display: inline-flex; align-items: center; min-height: 44px; }
      .lang-switcher select { min-height: 44px; }
    }