/* ============================================================
   OFY-TOOLS.CSS — Tools SPA cherry on top of ofy.css

   Two responsibilities:
   1. Compatibility shim: alias legacy CSS variables (used by
      apps/tools/www/css/{app,index,studio}.css and any per-tool
      style.css under apps/tools/www/tools/) to the new ofy.css
      tokens, so existing per-tool CSS keeps rendering without
      a rewrite.
   2. Tools-only logo: apps/tools/www/index.html uses the older
      .logo / .logo__glow / .logo__char / .logo__dash markup
      (different from the .ofy-logo macro used by base.html-
      backed services). Ship the CSS-only build here.

   Loaded AFTER ofy.css so tokens it aliases already exist.
   ============================================================ */

@layer app {

  /* ----- LEGACY TOKEN SHIM ----- */
  [data-service="tools"], html:has(body.tools-spa), body.tools-spa {
    /* Backgrounds */
    --bg-base:     var(--bg-0);
    --bg-deep:     var(--bg-0);
    --bg-surface:  var(--bg-1);
    --bg-elevated: var(--bg-2);
    --bg-hover:    var(--bg-3);

    /* Brand colors — service hue is already cyan via [data-service="tools"] */
    --c-primary:        var(--accent);
    --c-primary-dim:    var(--accent-soft);
    --c-primary-glow:   oklch(from var(--accent) l c h / 0.45);
    --c-secondary:      oklch(0.62 0.22 295);                  /* violet — landing hero */
    --c-secondary-dim:  oklch(0.62 0.22 295 / 0.18);
    --c-secondary-glow: oklch(0.62 0.22 295 / 0.45);
    --c-accent:         var(--accent-strong);
    --c-accent-dim:     var(--accent-soft);

    /* Status */
    --c-success: var(--status-ok);
    --c-error:   var(--status-err);
    --c-warning: var(--status-warn);

    /* Text */
    --text-primary:   var(--fg-0);
    --text-main:      var(--fg-0);
    --text-secondary: var(--fg-1);
    --text-muted:     var(--fg-2);
    --text-inverse:   oklch(0.10 0 0);

    /* Borders */
    --border-subtle:  var(--line-1);
    --border-default: var(--line-2);
    --border-strong:  var(--line-3);

    /* Radii */
    --radius-sm:   var(--r-1);
    --radius-md:   var(--r-2);
    --radius-lg:   var(--r-3);
    --radius-xl:   16px;
    --radius-full: var(--r-pill);

    /* Type */
    --ff-display: var(--ff-sans);
    --ff-body:    var(--ff-sans);

    /* Motion */
    --duration-fast:   var(--d-fast);
    --duration-normal: var(--d-med);
    --duration-slow:   var(--d-slow);
    --ease-fluid:      var(--ease-std);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-width: 1280px;
    --header-height:   56px;

    /* Effects (kept subtle vs the legacy "neon" aesthetic) */
    --glow-primary:   0 0 24px oklch(from var(--accent) l c h / 0.35);
    --glow-secondary: 0 0 24px oklch(0.62 0.22 295 / 0.30);
    --shadow-sm: 0 4px 12px oklch(0 0 0 / 0.30);
    --shadow-md: 0 12px 32px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 24px 56px oklch(0 0 0 / 0.55);
    --glass-blur: var(--glass-blur, blur(14px) saturate(140%));
  }

  /* ============================================================
     LEGACY-AESTHETIC NEUTRALIZERS
     The Tools SPA's app.css/index.css/studio.css were built for the
     2024 cyberpunk-glassmorphism look. The variable shim above maps
     legacy tokens to the new palette, but a handful of declarations
     hardcode neon colors or brutalist hard-shadow effects. Override
     them here to align with the Operator design.
     ============================================================ */

  /* Hero gradient: kill the hardcoded violet, derive everything from --accent */
  .hero {
    background: radial-gradient(
      ellipse at center top,
      oklch(from var(--accent) l c h / 0.06) 0%,
      transparent 60%
    );
    /* Tighten over-generous 4rem/2rem padding so the headline sits closer to the header */
    padding: var(--s-10) var(--s-6) var(--s-8) !important;
  }
  .hero__title {
    background: none !important;
    -webkit-text-fill-color: var(--fg-0) !important;
    color: var(--fg-0) !important;
    font-family: var(--ff-sans) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    /* Legacy rule omitted line-height; body's 1.5 leaked onto the 56px H1
       and produced 84px line boxes with a large floating gap. */
    line-height: 1.05 !important;
    margin-bottom: var(--s-3) !important;
  }
  .hero__title em, .hero__title .accent {
    color: var(--accent) !important;
    font-style: normal;
  }
  .hero__subtitle {
    font-family: var(--ff-sans) !important;
    line-height: 1.55 !important;
    margin-bottom: var(--s-6) !important;
  }

  /* Search box: 2px radius, no full-pill cyber look */
  .search-box {
    border-radius: var(--r-2) !important;
    border-width: 1px !important;
    background: var(--bg-1) !important;
  }
  .search-box:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
  }

  /* Carousel cards / tool cards: flat surfaces, hairline accent.
     Intentionally OMITS .category-block — that's an organizational wrapper
     around a row of tool-cards, not a card itself. Giving it the same
     border + bg as the cards inside produces a "boxes inside boxes"
     visual nest. The category header below (.category-block__header) keeps
     its `border-bottom` as the only divider. */
  .carousel-card,
  .tool-card {
    border-radius: var(--r-2) !important;
    border: 1px solid var(--line-2) !important;
    background: var(--bg-1) !important;
    box-shadow: none !important;
    transition: border-color var(--d-fast), transform var(--d-fast) !important;
  }
  .carousel-card:hover,
  .tool-card:hover {
    border-color: var(--accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
  }
  /* Category-block is a transparent group wrapper — no chrome of its own. */
  .category-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Tool-folder (Studio card) header: legacy gradient was adding a third
     visible layer of "boxiness" on top of the card border. Kill it so the
     card reads as a single flat surface. */
  .tool-folder__header {
    background: transparent !important;
    padding: var(--s-5) !important;
  }
  .tool-folder__content {
    background: transparent !important;
  }
  /* All-Tools section heading: align with the rest of the page (left-edge,
     mono micro-meta), not the marketing-style centered title. */
  .all-tools-title {
    font-family: var(--ff-sans) !important;
    font-size: var(--t-22) !important;
    font-weight: 600 !important;
    color: var(--fg-0) !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 var(--s-5) !important;
    text-align: left !important;
  }
  .category-chip {
    border-radius: var(--r-2) !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line-2) !important;
  }
  .category-chip:hover, .category-chip.active {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* Buttons inside Tools SPA: kill brutalist 4px hard shadows + uppercase Syne styling */
  .btn,
  .btn--primary,
  .btn--secondary,
  .btn--ghost,
  .btn--lg {
    font-family: var(--ff-sans) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    border-radius: var(--r-2) !important;
  }
  .btn--primary {
    background: var(--accent) !important;
    color: oklch(0.10 0 0) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 1px solid var(--accent) !important;
  }
  .btn--primary:hover {
    background: oklch(from var(--accent) calc(l + 0.05) c h) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
  }
  .btn--secondary,
  .btn--ghost {
    box-shadow: none !important;
  }
  .btn--secondary:hover,
  .btn--ghost:hover {
    box-shadow: none !important;
    transform: translateY(-1px) !important;
  }

  /* Cards: flat, symmetric radius, no glow on hover */
  .card {
    border-radius: var(--r-2) !important;
    border: 1px solid var(--line-2) !important;
    border-left-width: 1px !important;
    box-shadow: none !important;
  }
  .card:hover, .card--glow:hover {
    box-shadow: none !important;
    transform: translateY(-1px) translateX(0) !important;
    border-color: var(--accent) !important;
  }

  /* Input/select/textarea: kill backdrop blur + heavy focus glow */
  .input, .select, .tool-input, .tool-textarea, .tool-output {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-1) !important;
    border-radius: var(--r-2) !important;
  }
  .input:focus, .select:focus,
  .tool-input:focus, .tool-textarea:focus {
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    background: var(--bg-0) !important;
    transform: none !important;
  }

  /* Upload zones: thin dashed line, no gigantic radius */
  .upload-zone {
    border-radius: var(--r-2) !important;
    border-width: 1.5px !important;
    backdrop-filter: none !important;
  }
  .upload-zone:hover, .upload-zone--active {
    box-shadow: none !important;
    transform: none !important;
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
  }
  .upload-zone__icon {
    filter: none !important;
    color: var(--accent) !important;
  }

  /* Progress bar: single-color accent, no rainbow gradient */
  .progress__bar {
    background: var(--accent) !important;
    box-shadow: none !important;
  }
  .progress__bar::after { display: none !important; }

  /* Code block: drop heavy shadow, keep flat surface */
  .code-block { box-shadow: none !important; border-radius: var(--r-2) !important; }
  .code-block__header { backdrop-filter: none !important; }

  /* Toast in Tools SPA: align with new theme (was using --ease-bounce) */
  .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--r-2) !important;
    box-shadow: none !important;
    transition: transform var(--d-med) var(--ease-std), opacity var(--d-med) !important;
  }

  /* Theme toggle: align with the SVG moon/sun pair from the new ofy.css */
  .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--r-2) !important;
    background: transparent !important;
    border: 1px solid var(--line-2) !important;
    color: var(--fg-1) !important;
  }
  .theme-toggle:hover {
    background: var(--bg-2) !important;
    border-color: var(--line-3) !important;
    color: var(--fg-0) !important;
  }

  /* ============================================================
     MODERN SIDEBAR (tree-view) — 2026 redesign
     ============================================================
     Patterns drawn from VS Code Explorer (vertical guide lines +
     horizontal connectors), Linear (uppercase mono micro-meta
     section headers + clean rows), and Vercel's dashboard (subtle
     hover + accent left-edge active marker).

     Anatomy:
       .mini-sidebar
         .mini-sidebar__header  ← logo + title + collapse toggle
         .mini-sidebar__search  ← search field
         .mini-sidebar__nav
           .nav-category[ .open ]
             .nav-category__header  ← icon + uppercase name + count + chevron
             .nav-category__tools   ← children, smooth max-height
               .nav-tool[.has-children]  ← Studio parent (clickable link)
               .nav-tool__children       ← Studio tabs (always shown when
                                             the parent category is open)
                 .nav-tool--child        ← individual tabs
     ============================================================ */

  /* Sidebar shell — surface background, hairline divider on the right.
     Width is intentionally NOT overridden here (base 56 px comes from
     legacy app.css). Expanded width (264 px) is handled by the
     unlayered override at the bottom of this file — see the
     "SIDEBAR WIDTH OVERRIDE — UNLAYERED" block for the reasoning. */
  .mini-sidebar {
    background: var(--bg-1) !important;
    border-right: 1px solid var(--line-2) !important;
    transition: width var(--d-med) var(--ease-std), min-width var(--d-med) var(--ease-std) !important;
  }
  .mini-sidebar__header {
    padding: var(--s-3) var(--s-4) !important;
    border-bottom: 1px solid var(--line-2) !important;
    /* Match landing-header total height (12px+40px+12px+1px = 65px) so the
       sidebar's bottom border aligns with the landing-header's bottom border
       (one continuous horizontal rule across the chrome). */
    min-height: 65px !important;
    gap: var(--s-3) !important;
  }
  .mini-sidebar__title {
    font-family: var(--ff-sans) !important;
    font-size: var(--t-14) !important;
    font-weight: 600 !important;
    color: var(--fg-0) !important;
    letter-spacing: -0.01em !important;
  }
  /* Collapsed sidebar: the title is layout-invisible (opacity:0 keeps it in
     flow and pushes the toggle off-center). Drop it from layout and center
     the toggle in the 56px chrome. */
  .mini-sidebar:not(.expanded) .mini-sidebar__header {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mini-sidebar:not(.expanded) .mini-sidebar__title {
    display: none !important;
  }
  .mini-sidebar__toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--r-2) !important;
    background: transparent !important;
    border: 1px solid var(--line-2) !important;
    color: var(--fg-1) !important;
    transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast) !important;
  }
  .mini-sidebar__toggle:hover {
    background: var(--bg-2) !important;
    border-color: var(--line-3) !important;
    color: var(--fg-0) !important;
  }

  /* Search field — flush with sidebar chrome, accent ring on focus */
  .mini-sidebar__search {
    padding: var(--s-3) var(--s-4) !important;
    border-bottom: 1px solid var(--line-2) !important;
  }
  .mini-sidebar__search input {
    width: 100%;
    height: 32px !important;
    padding: 0 var(--s-3) !important;
    background: var(--bg-0) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-2) !important;
    color: var(--fg-0) !important;
    font-family: var(--ff-sans) !important;
    font-size: var(--t-13) !important;
    transition: border-color var(--d-fast), box-shadow var(--d-fast) !important;
  }
  .mini-sidebar__search input::placeholder { color: var(--fg-3) !important; }
  .mini-sidebar__search input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
  }

  /* Scrollable nav region — thin scrollbar, comfortable inner padding */
  .mini-sidebar__nav {
    padding: var(--s-3) var(--s-2) !important;
  }
  .mini-sidebar__nav::-webkit-scrollbar { width: 6px !important; }
  .mini-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--line-2) !important;
    border-radius: 999px !important;
  }
  .mini-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: var(--line-3) !important;
  }

  /* ---- Category groups ---- */
  .nav-category {
    margin-bottom: var(--s-1) !important;
  }
  /* Header row — icon + uppercase mono name + count + chevron */
  .nav-category__header {
    display: grid !important;
    grid-template-columns: 28px 1fr auto auto !important;
    align-items: center !important;
    gap: var(--s-2) !important;
    padding: var(--s-2) var(--s-3) !important;
    border-radius: var(--r-2) !important;
    cursor: pointer !important;
    transition: background var(--d-fast), color var(--d-fast) !important;
    user-select: none;
  }
  .nav-category__header:hover {
    background: var(--bg-2) !important;
  }
  .nav-category__header:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
  }
  .nav-category__icon {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--fg-2) !important;
    background: transparent !important;
    border-radius: var(--r-2) !important;
    transition: color var(--d-fast), background var(--d-fast) !important;
  }
  .nav-category__header:hover .nav-category__icon { color: var(--fg-0) !important; }
  /* When the category contains the active tool, hint the icon (visible
     even when sidebar is collapsed). */
  .nav-category.has-active .nav-category__icon {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
  }
  .nav-category__name {
    font-family: var(--ff-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--fg-1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0;
    transition: opacity var(--d-fast) !important;
  }
  .mini-sidebar.expanded .nav-category__name { opacity: 1 !important; }
  .nav-category__count {
    font-family: var(--ff-mono) !important;
    font-size: 11px !important;
    color: var(--fg-3) !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transition: opacity var(--d-fast) !important;
  }
  .mini-sidebar.expanded .nav-category__count { opacity: 0.7 !important; }
  .nav-category__arrow {
    color: var(--fg-3) !important;
    display: inline-flex;
    align-items: center;
    width: 12px; height: 12px;
    transition: transform var(--d-med) var(--ease-std), color var(--d-fast) !important;
    opacity: 0;
  }
  .mini-sidebar.expanded .nav-category__arrow { opacity: 1 !important; }
  .nav-category.open .nav-category__arrow {
    transform: rotate(90deg) !important;
    color: var(--fg-1) !important;
  }
  .nav-category__header:hover .nav-category__arrow { color: var(--fg-1) !important; }

  /* ---- Tools list (children of a category) ---- */
  /* Visibility toggled by .nav-category.open via the legacy display switch
     (display: none → block). max-height animation was attempted earlier
     but Chromium fails to re-style on class changes for some !important
     interactions involving cascade layers — so keep this simple. The
     children themselves get a subtle fade-in via animation. */
  .nav-category__tools {
    padding: 0 !important;
    margin: 2px 0 var(--s-3) !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-category.open .nav-category__tools > * {
      animation: ofy-tool-fadein 200ms var(--ease-std) both;
    }
    @keyframes ofy-tool-fadein {
      from { opacity: 0; transform: translateY(-2px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }

  /* ---- Studio parent links (Barcode Studio / QR Code Studio / etc.) ----
     These are .nav-tool entries that ALSO have .has-children. They sit
     between the category header and the tool tabs. Treat them as a
     sub-section heading: slightly heavier weight, no left indent. */
  .nav-tool {
    display: flex !important;
    align-items: center !important;
    gap: var(--s-2) !important;
    height: 32px !important;
    padding: 0 var(--s-3) !important;
    margin: 1px 0 !important;
    font-family: var(--ff-sans) !important;
    font-size: var(--t-13) !important;
    font-weight: 500 !important;
    color: var(--fg-1) !important;
    text-decoration: none !important;
    border-radius: var(--r-2) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--d-fast), color var(--d-fast) !important;
  }
  .nav-tool:hover {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
  }
  .nav-tool:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
  }
  .nav-tool.has-children {
    font-weight: 600 !important;
    color: var(--fg-0) !important;
  }
  .nav-tool.has-children::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--fg-3);
    flex-shrink: 0;
    margin-right: 2px;
  }
  .nav-tool.has-children:hover::before { background: var(--accent); }

  /* ---- Tree guides on the nested children ---- */
  .nav-tool__children {
    position: relative;
    margin: 2px 0 var(--s-2) var(--s-4) !important;
    padding-left: var(--s-3) !important;
    border-left: 0 !important;  /* override legacy app.css border */
    display: block !important;
  }
  /* Vertical guide line (replaces legacy border-left so we can use a
     softer accent-line color and let the connector stubs anchor cleanly). */
  .nav-tool__children::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--line-2);
  }

  .nav-tool--child {
    position: relative;
    height: 28px !important;
    padding: 0 var(--s-2) 0 var(--s-3) !important;
    font-size: var(--t-13) !important;
    font-weight: 400 !important;
    color: var(--fg-2) !important;
    justify-content: space-between !important;
  }
  /* Horizontal connector stub from the vertical guide to this row. */
  .nav-tool--child::before {
    content: '';
    position: absolute;
    left: calc(var(--s-3) * -1 + 6px);
    top: 50%;
    width: var(--s-3);
    height: 1px;
    background: var(--line-2);
    transform: translateY(-0.5px);
  }
  .nav-tool--child:hover {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
  }
  .nav-tool--child:hover::before { background: var(--line-3) !important; }
  /* Soft redirect-icon — hidden by default, fades in on hover/active */
  .nav-tool__redirect-icon {
    color: var(--fg-3);
    opacity: 0;
    transition: opacity var(--d-fast), color var(--d-fast);
    flex-shrink: 0;
  }
  .nav-tool--child:hover .nav-tool__redirect-icon { opacity: 0.7; }

  /* ---- Active state — accent-line left edge marker + accent text ---- */
  .nav-tool.active,
  .nav-tool.active-tab,
  .nav-tool--child.active,
  .nav-tool--child.active-tab {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-radius: var(--r-2) !important;
    padding-left: calc(var(--s-3) - 2px) !important;
    box-shadow: inset 2px 0 0 var(--accent) !important;
  }
  .nav-tool--child.active::before,
  .nav-tool--child.active-tab::before {
    background: var(--accent) !important;
  }
  .nav-tool--child.active .nav-tool__redirect-icon,
  .nav-tool--child.active-tab .nav-tool__redirect-icon {
    opacity: 1 !important;
    color: var(--accent) !important;
  }

  /* ---- "Soon" badge (planned-status tools) ---- */
  .nav-tool__soon {
    font-family: var(--ff-mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--fg-3) !important;
    background: var(--bg-2) !important;
    padding: 1px 5px !important;
    border-radius: var(--r-1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-left: auto !important;
  }
  .nav-tool.disabled {
    color: var(--fg-3) !important;
    cursor: default !important;
  }
  .nav-tool.disabled:hover {
    background: transparent !important;
    color: var(--fg-3) !important;
  }

  /* ---- Collapsed-state polish (icon-only rail) ----
     Hide ALL the textual children when the sidebar is collapsed —
     opacity:0 alone left them taking grid space, and switching to a
     single-column grid stacked the four cells on top of each other
     (the "everything everywhere" overlap the user reported). Use
     display:none for full layout removal; the icon column gets the
     full 56 px width and the rail reads as a clean icon list. */
  .mini-sidebar:not(.expanded) .nav-category__header {
    grid-template-columns: 1fr !important;
    justify-items: center;
    padding: var(--s-2) !important;
  }
  .mini-sidebar:not(.expanded) .nav-category__name,
  .mini-sidebar:not(.expanded) .nav-category__count,
  .mini-sidebar:not(.expanded) .nav-category__arrow,
  .mini-sidebar:not(.expanded) .mini-sidebar__title,
  .mini-sidebar:not(.expanded) .mini-sidebar__search {
    display: none !important;
  }
  /* The category-tools container holds Studio parents + their tabs;
     hide entirely so they don't bleed past the 56 px rail. */
  .mini-sidebar:not(.expanded) .nav-category__tools { display: none !important; }
  /* Clip anything that would overflow the icon rail */
  .mini-sidebar:not(.expanded) .mini-sidebar__nav { overflow: hidden !important; }

  /* ---- prefers-reduced-motion: kill all sidebar transitions ---- */
  @media (prefers-reduced-motion: reduce) {
    .mini-sidebar,
    .nav-category__tools,
    .nav-category__arrow,
    .nav-tool,
    .nav-tool--child,
    .nav-tool__redirect-icon,
    .mini-sidebar__toggle,
    .mini-sidebar__search input {
      transition: none !important;
    }
  }

  /* Update banner: solid accent strip across the top, dark text — high contrast.
     Previous override used --accent-soft which made it nearly invisible. */
  .update-banner {
    background: var(--accent) !important;
    color: oklch(0.10 0 0) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 10px var(--s-5) !important;
    font-weight: 500 !important;
  }
  .update-banner__btn {
    background: oklch(0.10 0 0 / 0.20) !important;
    color: oklch(0.10 0 0) !important;
    border: 1px solid oklch(0.10 0 0 / 0.30) !important;
    border-radius: var(--r-2) !important;
    font-family: var(--ff-sans) !important;
    font-weight: 600 !important;
  }
  .update-banner__btn:hover {
    background: oklch(0.10 0 0 / 0.30) !important;
  }
  .update-banner__dismiss {
    color: oklch(0.10 0 0) !important;
    opacity: 0.6;
  }
  .update-banner__dismiss:hover { opacity: 1; }

  /* Modal: flat surface */
  .modal-overlay { backdrop-filter: blur(8px) !important; }
  .modal {
    border-radius: var(--r-2) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* ============================================================
     LANDING-PAGE LAYOUT NORMALIZER
     The legacy css/index.css uses inconsistent centered max-widths
     across sections (1000 / 1200 / 1400) which left the carousel,
     categories grid, and all-tools section sitting on three
     different rails. Unify against --container-width (1280px) so
     every block aligns to the same horizontal axis. Also smooth
     out section vertical padding (32/48 asymmetric → consistent
     --s-8/--s-6 cadence).
     ============================================================ */

  .carousel-section,
  .all-tools-section {
    max-width: var(--container-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .categories-grid {
    max-width: var(--container-width) !important;
  }
  .carousel-section  { padding: var(--s-6) var(--s-6) var(--s-8) !important; }
  .categories-section { padding: var(--s-8) var(--s-6) !important; }
  .all-tools-section  { padding: var(--s-8) var(--s-6) !important; }

  /* Category-block uses margin-bottom: 3rem for inter-block spacing —
     leaves no internal padding which makes adjacent blocks "collide" on
     scroll. Replace with consistent padding-block + the existing margin. */
  .category-block { margin-bottom: var(--s-10) !important; }
  .category-block__header { margin-bottom: var(--s-4) !important; }

  /* Category tools-grid uses auto-fill — when a category has only 2-3 tools
     the cards cluster on the left with the rest of the row reserved as
     phantom columns, leaving giant empty space. auto-fit collapses those
     phantom tracks so the cards stretch to fill the row instead. */
  .tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }

  /* Landing footer alignment — match other sections' horizontal rhythm */
  .tool-main__footer.landing-footer {
    padding: var(--s-5) var(--s-6) !important;
    max-width: var(--container-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Feature pill: flat, square corners */
  .feature-pill {
    border-radius: var(--r-2) !important;
    background: var(--bg-2) !important;
    border-color: var(--line-2) !important;
  }
  .feature-pill:hover {
    border-color: var(--accent) !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--accent) !important;
  }

  /* ============================================================
     TOOL-INFO CHROME (rendered by app.js renderToolPage)
     "About / Execution Protocol / System Capabilities / Related"
     The legacy ofy.css styled .step-num and .tool-info__steps li
     with display:flex + gap, but those rules are gone — the new
     theme needs to provide flat, clean equivalents.
     ============================================================ */

  /* About / Execution / Capabilities / Related — section cards */
  .tool-info {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-6);
    /* Legacy max-width was 1400 — out of line with the 1280 system rail */
    max-width: var(--container-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Same alignment for the tool's main container */
  .tool-container {
    max-width: var(--container-width) !important;
    padding: var(--s-6) !important;
  }
  /* Tool-page outer content padding (NOT the landing page — landing manages
     its own section padding so .landing-content is left edge-to-edge). */
  .tool-main__content:not(.landing-content) {
    padding: var(--s-5) var(--s-6) !important;
  }
  .tool-info__section {
    padding: var(--s-5) var(--s-5) !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-2) !important;
    box-shadow: none !important;
  }
  .tool-info__title {
    display: flex; align-items: center; gap: var(--s-2);
    font-family: var(--ff-sans);
    font-size: var(--t-22) !important;
    font-weight: 600;
    color: var(--fg-0);
    letter-spacing: -0.015em;
    margin-bottom: var(--s-3) !important;
  }
  .tool-info__icon {
    width: 20px; height: 20px;
    color: var(--accent);
    filter: none !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }
  .tool-info__text, .tool-info__text--lead {
    font-size: var(--t-13) !important;
    line-height: 1.6 !important;
    color: var(--fg-1) !important;
    margin-bottom: var(--s-2) !important;
    font-weight: 400 !important;
  }
  .tool-info__text--lead { color: var(--fg-0) !important; font-weight: 500 !important; }

  /* Numbered execution-protocol list — flex row, mono prefix, no double-numbering */
  .tool-info__steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex; flex-direction: column;
    gap: var(--s-3);
  }
  .tool-info__steps li {
    display: flex !important;
    align-items: flex-start;
    gap: var(--s-3) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.55 !important;
  }
  .step-num {
    flex-shrink: 0;
    min-width: 28px;
    padding: 2px 6px;
    font-family: var(--ff-mono) !important;
    font-size: var(--t-12) !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-1);
    text-align: center;
    text-shadow: none !important;
    letter-spacing: 0.02em;
    top: 0 !important;
  }
  .step-text {
    flex: 1;
    color: var(--fg-1);
    font-size: var(--t-13) !important;
  }

  /* Capability pills cluster */
  .tool-info__features-cluster {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .tool-info__features-cluster .feature-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    height: 28px;
    padding: 0 10px !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-2) !important;
    font-family: var(--ff-mono) !important;
    font-size: var(--t-12) !important;
    font-weight: 500 !important;
    color: var(--fg-1) !important;
    transition: border-color var(--d-fast), color var(--d-fast);
  }
  .tool-info__features-cluster .feature-pill svg {
    color: var(--status-ok) !important;
  }

  /* Related-tools grid */
  .related-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--s-3) !important;
  }
  .related-tool-card {
    display: block;
    padding: var(--s-3) var(--s-4) !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-2) !important;
    text-decoration: none;
    transition: border-color var(--d-fast), background var(--d-fast);
  }
  .related-tool-card:hover {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
  }
  .related-tool-card__name {
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--fg-0);
    margin-bottom: 4px;
  }
  .related-tool-card__desc {
    font-size: var(--t-12);
    color: var(--fg-2);
    line-height: 1.4;
  }

  /* Tool header (h1 + description above the actual tool UI) */
  .tool-header { margin-bottom: var(--s-5); }
  .tool-title {
    font-size: var(--t-40) !important;
    font-weight: 700 !important;
    color: var(--fg-0) !important;
    letter-spacing: -0.025em !important;
    margin-bottom: var(--s-2) !important;
    background: none !important;
    -webkit-text-fill-color: var(--fg-0) !important;
  }
  .tool-description {
    font-size: var(--t-14);
    color: var(--fg-1);
    max-width: 60ch;
  }
  .breadcrumb {
    font-family: var(--ff-mono) !important;
    font-size: var(--t-12) !important;
    color: var(--fg-2) !important;
    margin-bottom: var(--s-3) !important;
  }
  .breadcrumb a {
    color: var(--fg-2) !important;
    transition: color var(--d-fast);
  }
  .breadcrumb a:hover { color: var(--accent) !important; }

  /* ============================================================
     MOCK PATTERNS (from design bundle's mocks.css)
     Available for module migration — the QR / Text / Tools-Index
     mockups in OFY-SUITE.zip use these exact classes.
     ============================================================ */

  /* ----- STUDIO SHELL (used by future studio-rewrites of QR/Text/etc.) ----- */
  .studio-shell { padding: var(--s-5) var(--s-6); height: 100%; overflow: auto; }
  .studio-hd { margin-bottom: var(--s-5); }
  .studio-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    border-radius: var(--r-2);
    flex-shrink: 0;
  }
  .studio-tabs { width: max-content; max-width: 100%; overflow-x: auto; }
  .studio-tabs .seg__opt { min-width: 90px; }

  .studio-body {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--s-4);
  }
  @media (max-width: 900px) {
    .studio-body { grid-template-columns: 1fr; }
  }
  .studio-controls { align-self: start; }
  .studio-preview { display: flex; flex-direction: column; gap: var(--s-4); }

  /* ----- SEGMENTED CONTROL (.seg / .seg__opt — different from legacy .segmented-control) ----- */
  .seg {
    display: inline-flex; gap: 2px;
    background: var(--bg-2); padding: 2px;
    border-radius: var(--r-2);
    border: 1px solid var(--line-1);
  }
  .seg--4, .seg--5 { width: 100%; }
  .seg__opt {
    flex: 1; min-height: 26px; padding: 5px 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
    color: var(--fg-2);
    background: transparent;
    border: 0;
    border-radius: 2px;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--d-fast), background var(--d-fast);
  }
  .seg__opt:hover { color: var(--fg-0); }
  .seg__opt--on {
    background: var(--accent);
    color: oklch(0.10 0 0);
  }

  /* ----- COLOR SWATCH ----- */
  .swatch {
    width: 28px; height: 28px;
    border-radius: var(--r-2);
    flex-shrink: 0;
    border: 1px solid var(--line-2);
  }

  /* ----- LOGO DROP ROW (file picker preview) ----- */
  .logo-drop {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
  }
  .logo-drop__thumb {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: var(--bg-0);
    border-radius: var(--r-2);
    flex-shrink: 0;
  }

  /* ----- RANGE SLIDER ----- */
  .range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px;
    background: var(--bg-3); border-radius: 999px;
    cursor: pointer;
  }
  .range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    background: var(--accent); border-radius: 50%; cursor: pointer;
  }
  .range::-moz-range-thumb {
    width: 14px; height: 14px;
    background: var(--accent); border-radius: 50%; cursor: pointer; border: 0;
  }

  /* ----- QR STAGE (white-card preview area) -----
     Tightened up — previous 48 px stage padding + 280 px board was over-large
     for a 200 px QR (default size). Stage now hugs the card; board uses
     intrinsic sizing so the white margin around the QR matches the QR size. */
  .qr-stage {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--s-4) var(--s-4);
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    background-image:
      linear-gradient(var(--line-1) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: -1px -1px;
  }
  .qr-board {
    position: relative;
    width: fit-content; min-width: 220px;
    background: #fff;
    padding: 10px;
    border-radius: var(--r-2);
    border: 1px solid var(--line-2);
  }
  .qr-svg { width: 100%; height: 100%; }
  .qr-logo-overlay {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none;
  }
  .qr-meta {
    display: flex; gap: var(--s-4); margin-top: var(--s-4);
    font-size: var(--t-12); color: var(--fg-2);
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  /* ----- TEXT STUDIO MOCK BODY ----- */
  .text-studio-body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-4);
    min-height: 480px;
  }
  @media (max-width: 900px) {
    .text-studio-body { grid-template-columns: 1fr; }
  }
  .text-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-1);
    border-top: 1px solid var(--line-1);
  }
  .text-stat {
    background: var(--bg-1);
    padding: var(--s-3) var(--s-4);
    display: flex; flex-direction: column; gap: 2px;
  }
  .text-stat__v {
    font-family: var(--ff-mono);
    font-size: var(--t-22);
    font-weight: 600;
    color: var(--fg-0);
    letter-spacing: -0.01em;
  }

  /* ----- TOOLS INDEX SHELL (sidebar + main) ----- */
  .tools-shell { display: grid; grid-template-columns: 240px 1fr; height: 100%; gap: 0; }
  .tools-side {
    border-radius: 0; border: 0; border-right: 1px solid var(--line-2);
    overflow-y: auto;
  }
  .cat-row {
    display: grid; grid-template-columns: 18px 1fr auto;
    align-items: center; gap: var(--s-2);
    padding: 6px 10px; height: 30px;
    text-align: left;
    font-size: var(--t-13); color: var(--fg-1);
    background: transparent;
    border: 0;
    border-radius: var(--r-2);
    cursor: pointer;
    transition: color var(--d-fast), background var(--d-fast);
  }
  .cat-row > svg { color: var(--fg-2); }
  .cat-row:hover { background: var(--bg-2); color: var(--fg-0); }
  .cat-row:hover > svg { color: var(--fg-0); }
  .cat-row--on {
    background: transparent;
    color: var(--accent);
    border-left: 2px solid var(--accent);
    border-radius: 0;
    padding-left: 8px;
  }
  .cat-row--on > svg { color: var(--accent); }
  .cat-row__name { text-transform: lowercase; }
  .cat-row__count {
    font-size: 11px;
    color: var(--fg-2);
    font-family: var(--ff-mono);
  }

  .tools-main { padding: var(--s-5) var(--s-6); overflow: auto; }
  .tools-search {
    display: flex; align-items: center; gap: var(--s-2);
    padding: 0 var(--s-3); height: 40px;
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    margin-bottom: var(--s-3);
    color: var(--fg-2);
  }
  .tools-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .tools-search__input {
    flex: 1; height: 100%;
    background: transparent; border: 0; outline: 0;
    font-size: var(--t-14);
    color: var(--fg-0);
    font-family: var(--ff-sans);
  }
  .tools-search__input::placeholder { color: var(--fg-3); }

  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-3);
  }
  /* Mock tool-card uses different children than legacy index.html */
  .tool-grid .tool-card {
    display: flex !important;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--r-2) !important;
    text-decoration: none;
    transition: border-color var(--d-fast), transform var(--d-fast);
  }
  .tool-grid .tool-card:hover {
    border-color: var(--accent) !important;
    transform: translateY(-1px);
  }
  .tool-card__top { display: flex; justify-content: space-between; align-items: center; }
  .tool-card__icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: var(--r-2);
  }
  .tool-card__id { font-size: 11px; color: var(--fg-2); font-family: var(--ff-mono); }
  .tool-card__name { font-size: var(--t-14); font-weight: 600; color: var(--fg-0); }
  .tool-card__desc { font-size: var(--t-13); color: var(--fg-1); line-height: 1.45; flex: 1; }
  .tool-card__bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--s-2); border-top: 1px solid var(--line-1);
    margin-top: var(--s-2);
  }
  .tool-card__arrow { color: var(--accent); display: inline-flex; }

  /* Sidebar category-count badge — hidden when sidebar is collapsed */
  .nav-category__count {
    font-size: 11px;
    color: var(--fg-2);
    font-family: var(--ff-mono);
    margin-right: var(--s-1);
    opacity: 0;
    transition: opacity var(--d-fast);
  }
  .mini-sidebar.expanded .nav-category__count { opacity: 1; }

  /* ============================================================
     UNIFIED LANDING-HEADER (shared between landing + tool pages)
     The user wants one consistent sticky header across tools.ofy.one.
     The legacy tool-main__header in app.css used different class
     names; this block provides the .landing-header markup with
     new-theme tokens. Tool pages add .has-mobile-toggle to make
     room for the sidebar-toggle button at the brand's leading edge.
     ============================================================ */
  .landing-header {
    padding: var(--s-3) var(--s-5) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    border-bottom: 1px solid var(--line-2) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .landing-header__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--fg-0);
  }
  .landing-header__title {
    font-family: var(--ff-sans);
    font-size: var(--t-14);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-0) !important;
  }
  .landing-header__nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .landing-header__link {
    color: var(--fg-1) !important;
    text-decoration: none;
    font-size: var(--t-13);
    padding: 6px 10px;
    border-radius: var(--r-2);
    transition: color var(--d-fast), background var(--d-fast);
  }
  .landing-header__link:hover {
    color: var(--fg-0) !important;
    background: var(--bg-2);
  }
  /* Tool-page mobile-toggle button (kicks the brand to the right slightly when present) */
  .landing-header .mobile-toggle {
    display: none;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    color: var(--fg-1);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    cursor: pointer;
    transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
  }
  .landing-header .mobile-toggle:hover {
    color: var(--fg-0);
    border-color: var(--line-3);
    background: var(--bg-2);
  }
  /* On narrow viewports OR when a sidebar exists, show the toggle */
  .tool-layout .landing-header .mobile-toggle { display: inline-flex; }

  /* ----- NETWORK STATUS DOT (used in Tools header) ----- */
  .nav-network-status {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fg-3);
    transition: background var(--d-fast), box-shadow var(--d-fast);
    flex-shrink: 0;
  }
  .nav-network-status.online {
    background: var(--status-ok);
    box-shadow: 0 0 6px oklch(from var(--status-ok) l c h / 0.7);
  }
  .nav-network-status.offline {
    background: var(--status-err);
    box-shadow: 0 0 6px oklch(from var(--status-err) l c h / 0.7);
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ofy-status-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.3); opacity: 0.7; }
    }
    .nav-network-status.online { animation: ofy-status-pulse 2s ease-out infinite; }
  }
}

/* ============================================================
   SIDEBAR WIDTH OVERRIDE — UNLAYERED, NO `!important`
   Both width values are unlayered + plain so the browser's normal
   style-invalidation kicks in cleanly when the `.expanded` class
   toggles. Adding `!important` here triggers a Chromium quirk where
   layout doesn't re-flow on class change with cascade layers in play
   (the width gets stuck at the base 56 px even though the cascade
   resolves to 264 px). Specificity (.mini-sidebar.expanded > the
   legacy 260 px) is enough to beat the legacy unlayered rule. */
.mini-sidebar {
  width: 56px;
  min-width: 56px;
}
.mini-sidebar.expanded {
  width: 264px;
  min-width: 264px;
}
.mini-sidebar.expanded ~ .tool-main {
  margin-left: 264px;
}