/* ================================================================
   Webtoolszon — SHARED SITE CSS (raw content)

   Lives in /private/assets/ — private/.htaccess denies all direct
   HTTP access to this folder, so this file can never be requested
   by its own URL. The only way it reaches a browser is through
   /assets/css/webtoolszon-shared.php, which reads and streams it.

   Edit THIS file when the shared design/layout changes — the .php
   loader just serves whatever is here, unchanged.
   ================================================================ */

  /* ============ LIGHT THEME (default) ============ */
  :root,
  :root[data-theme="light"]{
    color-scheme: light;
    --white:       #ffffff;
    --surface:     #f5f6f8;
    --surface-2:   #eceef2;
    --ink:         #14171c;
    --muted:       #667085;
    --muted-2:     #98a1ae;
    --line:        #e5e8ee;
    --navy:        #1f3a5f;
    --navy-ink:    #14293f;
    --amber:       #f5a623;
    --amber-ink:   #b97300;
    --amber-soft:  #fff3de;
    --green-ok:    #2f9e6a;
    --danger:      #c0392b;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;
    --header-h: 68px;
    --shadow-card: 0 1px 2px rgba(20,23,28,.04), 0 8px 24px -12px rgba(20,23,28,.10);
    --shadow-card-hover: 0 4px 10px rgba(20,23,28,.06), 0 16px 32px -12px rgba(20,23,28,.16);
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; overflow-x: hidden; }
  body{ margin:0; overflow-x:hidden; overflow-x:clip; max-width:100vw; font-family: var(--font-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
  body.no-scroll{ overflow:hidden; } /* locks background scroll while the mobile sidebar or search overlay is open */
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  button{ font-family: inherit; cursor:pointer; }
  input,select,textarea{ font-family:inherit; }
  h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.1; letter-spacing:-0.01em; }
  p{ margin:0; }
  :focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

  .eyebrow{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--amber-ink); background: var(--amber-soft); padding:.3rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; }
  .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--amber); }

  .container{ max-width: 1240px; margin-inline:auto; padding-inline: 32px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  .icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
  .icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  /* ============ HEADER ============ */
  .site-header{ position: sticky; top:0; z-index: 60; height: var(--header-h); background: color-mix(in srgb, var(--white) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease; }
  .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(20,23,28,.35); }
  .site-header .inner{ height:100%; display:flex; align-items:center; gap: 22px; }
  .brand{ display:flex; align-items:center; gap:.55rem; font-family: var(--font-display); font-weight:700; font-size:1.15rem; flex-shrink:0; margin-right:6px; }
  .brand-mark{ width:34px; height:34px; border-radius: 9px; background: var(--navy); display:grid; place-items:center; position:relative; flex-shrink:0; }
  .brand-mark .icon{ width:18px; height:18px; color: var(--white); }
  .brand-mark::after{ content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background: var(--amber); border: 2px solid var(--white); }
  .menu-toggle{ display:none; width:38px; height:38px; border-radius: var(--radius-s); border:1px solid var(--line); background: var(--white); align-items:center; justify-content:center; flex-shrink:0; }
  .primary-nav{ display:flex; align-items:center; gap: 2px; }
  .primary-nav a{ font-size:.92rem; font-weight:500; color: var(--muted); padding: .5rem .8rem; border-radius: 999px; transition: color .15s ease, background .15s ease; white-space:nowrap; }
  .primary-nav a:hover{ color: var(--ink); background: var(--surface); }
  .header-search{ flex:1; display:flex; align-items:center; gap:.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; max-width: 360px; margin-left: auto; transition: border-color .15s ease, box-shadow .15s ease; }
  .header-search:focus-within{ border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,58,95,.10); }
  .header-search .icon{ width:17px; height:17px; color: var(--muted-2); flex-shrink:0; }
  .header-search input{ border:0; background:transparent; outline:0; font-size:.88rem; width:100%; min-width:0; color: var(--ink); }
  .header-search input::placeholder{ color: var(--muted-2); }
  .header-search kbd{ font-family: var(--font-mono); font-size:.68rem; color: var(--muted-2); border:1px solid var(--line); background: var(--white); padding: .1rem .35rem; border-radius:5px; flex-shrink:0; }
  .header-actions{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
  .btn{ font-size:.88rem; font-weight:600; padding: .58rem 1.05rem; border-radius: 999px; border: 1px solid transparent; display:inline-flex; align-items:center; gap:.4rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space:nowrap; }
  .btn-ghost{ color: var(--ink); border-color: var(--line); background: var(--white); }
  .btn-ghost:hover{ border-color: var(--navy); }
  .btn-solid{ color: var(--white); background: var(--navy); }
  .btn-solid:hover{ background: var(--navy-ink); box-shadow: 0 8px 18px -8px rgba(31,58,95,.55); }
  .btn-solid .icon{ width:16px; height:16px; }
  .btn-outline{ color: var(--navy); border-color: var(--line); background: var(--white); font-size:.82rem; padding:.5rem .85rem; }
  .btn-outline:hover{ border-color: var(--navy); background: var(--surface); }
  .btn-small{ font-size:.78rem; padding:.45rem .8rem; }

  /* ============ LAYOUT ============ */
  .layout > main{ min-width:0; }
  .layout{ display:grid; grid-template-columns: 250px minmax(0,1fr); gap: 40px; max-width: 1240px; margin-inline:auto; padding-inline: 32px; align-items:start; }
  .sidebar{ position: sticky; top: calc(var(--header-h) + 24px); height: calc(100vh - var(--header-h) - 48px); height: calc(100dvh - var(--header-h) - 48px); display:flex; flex-direction:column; padding: 20px 4px 0; }
  .sidebar-scroll{ flex:1; min-height:0; overflow-y:auto; margin: 0 -4px; padding: 0 4px 16px; scrollbar-width: thin; }
  /* ===== SIDEBAR DOCK: premium / donate / account / settings ===== */
  .sidebar-foot{ position:relative; flex-shrink:0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--white); }
  .sidebar-foot::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:28px; background: linear-gradient(to top, var(--white), transparent); pointer-events:none; }
  .dock{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:2px; padding:4px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
  .dock-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; padding: .65rem .1rem; border-radius: 10px; font-size:.68rem; font-weight:500; letter-spacing:0; text-align:center; color: var(--muted); transition: background .18s ease, color .18s ease, transform .12s ease; }
  .dock-item .icon{ width:22px; height:22px; stroke-width:1.7; color: currentColor; flex-shrink:0; transition: transform .18s ease; }
  .dock-item:hover{ background: color-mix(in srgb, var(--navy) 9%, transparent); color: var(--navy); }
  .dock-item:hover .icon{ transform: translateY(-2px); }
  .dock-item:active{ transform: scale(.96); }
  .dock-item:focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; }
  .dock-label{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dock-item.is-premium .icon{ color: var(--amber-ink); }
  .dock-item.is-premium:hover{ background: var(--amber-soft); color: var(--amber-ink); }

  .ir-inline-note{ margin-top:10px; padding:10px 14px; border-radius:var(--radius-s); background:var(--amber-soft); color:var(--amber-ink); font-size:.82rem; display:none; }
  .dock-item.is-donate:hover .icon{ transform: translateY(-2px) scale(1.12); }
  .dock-avatar{ position:relative; width:22px; height:22px; display:grid; place-items:center; flex-shrink:0; transition: transform .18s ease; }
  .dock-avatar img, .dock-initials{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
  .dock-avatar img[hidden], .dock-initials[hidden]{ display:none; }
  .dock-initials{ display:grid; place-items:center; background: var(--navy); color: var(--white); font-family: var(--font-display); font-size:.6rem; font-weight:700; line-height:1; }
  .dock-item.is-account.is-signed-in{ color: var(--ink); }
  .dock-item.is-account.is-signed-in.has-photo .dock-avatar .icon, .dock-item.is-account.is-signed-in.has-initials .dock-avatar .icon{ display:none; }
  .dock-item.is-account.is-signed-in .dock-avatar::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#22c55e; border:2px solid var(--surface); box-sizing:border-box; }
  .dock-item:hover .dock-avatar{ transform: translateY(-2px); }
  .dock-item:hover .dock-avatar .icon{ transform:none; }
  .dock-crown{ position:absolute; top:-7px; right:-8px; width:15px; height:15px; padding:1px; border-radius:50%; background: var(--amber); color: var(--white); stroke:currentColor; fill:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; box-sizing:border-box; border:1.5px solid var(--surface); pointer-events:none; }
  .dock-crown[hidden]{ display:none; }
  @media (pointer: coarse){ .dock-item{ min-height: 44px; } }
  /* ===== /SIDEBAR DOCK ===== */
  .sidebar-title{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); margin: 0 0 10px 10px; }
  .peg-rail{ position: relative; padding-left: 14px; border-left: 2px dashed var(--line); }
  .cat-link{ position:relative; display:flex; align-items:center; gap:.65rem; padding: .62rem .7rem; border-radius: var(--radius-s); font-size:.86rem; font-weight:500; color: var(--muted); margin-bottom: 2px; transition: background .15s ease, color .15s ease; }
  .cat-link::before{ content:""; position:absolute; left:-16.5px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background: var(--surface-2); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line); transition: background .15s ease, box-shadow .15s ease; }
  .cat-link .icon{ width:17px; height:17px; color: var(--muted-2); transition: color .15s ease; flex-shrink:0; }
  .cat-link:hover{ background: var(--surface); color: var(--ink); }
  .cat-link.is-active{ background: var(--navy); color: var(--white); }
  .cat-link.is-active .icon{ color: var(--white); }
  .cat-link.is-active::before{ background: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
  .sidebar-note{ margin: 22px 10px 0; padding: 14px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
  .sidebar-note strong{ display:block; color: var(--ink); font-size:.85rem; margin-bottom:3px; }
  .sidebar-back{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color: var(--navy); margin: 0 0 18px 10px; }
  .sidebar-back .icon{ width:14px; height:14px; transform:rotate(180deg); }
  .sidebar-backdrop{ display:none; }

  /* ============ BREADCRUMB + PAGE HERO ============ */
  .breadcrumb{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color: var(--muted-2); margin: 24px 0 18px; }
  .breadcrumb a{ color: var(--muted); font-weight:500; }
  .breadcrumb a:hover{ color: var(--navy); }
  .breadcrumb .icon{ width:13px; height:13px; }

  .page-hero{ position: relative; padding: 40px; background-image: radial-gradient(var(--surface-2) 1.4px, transparent 1.4px); background-size: 22px 22px; background-position: -6px -6px; border-radius: var(--radius-l); overflow: hidden; }
  .page-hero-inner{ position:relative; z-index:1; display:flex; align-items:flex-start; gap: 20px; flex-wrap:wrap; justify-content:space-between; }
  .page-hero-text{ max-width: 560px; }
  .page-hero .tool-icon-lg{ width:52px; height:52px; border-radius: 13px; background: var(--white); border: 1px solid var(--line); display:grid; place-items:center; color: var(--navy); box-shadow: var(--shadow-card); }
  .page-hero h1{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-top: 16px; }
  .page-hero p.lead{ font-size: 1rem; color: var(--muted); margin-top: 12px; max-width: 54ch; line-height:1.6; }
  .page-hero-badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 18px; }
  .page-hero-media{ flex: 1 1 320px; max-width: 420px; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: var(--white); }
  .page-hero-media img{ display:block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
  .badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600; color: var(--green-ok); background: color-mix(in srgb, var(--green-ok) 12%, transparent); padding:.35rem .65rem; border-radius:999px; }
  .badge .icon{ width:13px; height:13px; }

  /* ============ Bottom mobile nav ============ */
  .bottom-nav{
    display:none;
    position: fixed; left:0; right:0; bottom:0; z-index: 70;
    background: color-mix(in srgb, var(--white) 96%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -18px rgba(20,23,28,.35);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav-inner{
    display:flex; align-items:stretch; justify-content:space-around;
    max-width: 560px; margin-inline:auto;
  }
  .bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding: 8px 4px 7px;
    font-size:.68rem; font-weight:600; color: var(--muted-2);
    background:transparent; border:0;
    transition: color .15s ease;
  }
  .bottom-nav-item .icon{ width:22px; height:22px; stroke-width:1.7; }
  .bottom-nav-item:hover{ color: var(--ink); }
  .bottom-nav-item.is-active{ color: var(--navy); }
  .bottom-nav-item.is-active .icon{ color: var(--navy); }
  .bottom-nav-avatar{ position:relative; width:22px; height:22px; display:grid; place-items:center; flex-shrink:0; }
  .bottom-nav-avatar img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
  .bottom-nav-avatar img[hidden]{ display:none; }
  .bottom-nav-item.has-photo .bottom-nav-avatar .icon:not(.bottom-nav-crown){ display:none; }
  .bottom-nav-item.is-signed-in .bottom-nav-avatar::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border-radius:50%; background:#22c55e; border:2px solid var(--white); box-sizing:border-box; }
  .bottom-nav-avatar .bottom-nav-crown{ position:absolute; top:-7px; right:-8px; width:15px; height:15px; padding:1px; border-radius:50%; background: var(--amber); color: var(--white); fill: currentColor; stroke-width:2.6; box-sizing:border-box; border:1.5px solid var(--white); pointer-events:none; }
  .bottom-nav-avatar .bottom-nav-crown[hidden]{ display:none; }

  .mobile-search-overlay{
    display:none;
    position: fixed; inset:0; z-index: 85;
    background: var(--white);
    flex-direction:column;
  }
  .mobile-search-overlay.is-open{ display:flex; }
  .mobile-search-head{
    display:flex; align-items:center; gap:.6rem;
    padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--line); flex-shrink:0;
  }
  .mobile-search-back{
    display:flex; align-items:center; gap:.35rem; flex-shrink:0;
    font-size:.85rem; font-weight:600; color: var(--navy);
    background:transparent; border:0; padding: 8px 2px;
  }
  .mobile-search-back .icon{ width:16px; height:16px; transform: rotate(180deg); }
  .mobile-search-field{
    flex:1; display:flex; align-items:center; gap:.55rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .68rem 1rem;
  }
  .mobile-search-field .icon{ width:18px; height:18px; color: var(--muted-2); flex-shrink:0; }
  .mobile-search-field input{ border:0; background:transparent; outline:0; font-size:.95rem; width:100%; color: var(--ink); }
  .mobile-search-results{ flex:1; overflow-y:auto; padding: 8px 12px 24px; }
  .mobile-search-results li a{
    display:flex; align-items:center; gap: 14px;
    padding: 13px 12px; border-radius: var(--radius-m);
  }
  .mobile-search-results li a:active{ background: var(--surface); }
  .mobile-search-results li a .tool-icon{
    width:38px; height:38px; border-radius:10px; background: var(--surface);
    display:grid; place-items:center; color: var(--navy); flex-shrink:0;
  }
  .mobile-search-results li a .tool-icon .icon{ width:18px; height:18px; }
  .mobile-search-results li a span.name{ font-size:.92rem; font-weight:600; color: var(--ink); }
  .mobile-search-empty{ text-align:center; color: var(--muted-2); font-size:.85rem; padding: 40px 20px; }

  /* ============ SECTION HEADERS ============ */
  .section{ padding: 48px 0 8px; scroll-margin-top: calc(var(--header-h) + 20px); }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 22px; flex-wrap:wrap; }
  .section-head h2{ font-size: 1.35rem; margin-top:6px; }
  .section-head p{ color: var(--muted); font-size:.9rem; margin-top:6px; max-width: 46ch; }

  /* ============ WORKSPACE ============ */
  .workspace{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items:start; }
  .panel{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px; position:relative; }
  .panel::before{ content:""; position:absolute; top:-6px; left: 30px; width:11px; height:11px; border-radius:50%; background: var(--white); border: 2px solid var(--amber); }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; flex-wrap:wrap; }
  .panel-head h3{ font-size: 1rem; }
  .panel-head .btn-row{ display:flex; gap:.5rem; }

  /* ---------- SHARED: reusable drop-zone / preview / field-row / stat-grid component CSS ---------- */
  .drop-zone{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
    min-height: 220px; border: 2px dashed var(--line); border-radius: 14px; padding: 24px;
    background: var(--surface); color: var(--muted); cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .drop-zone:hover, .drop-zone.is-dragover{ border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, var(--surface)); }
  .drop-zone .icon{ width:32px; height:32px; color: var(--muted-2); }
  .drop-zone b{ color: var(--ink); font-size:.95rem; }
  .drop-zone span{ font-size:.8rem; color: var(--muted-2); }
  .drop-zone input[type="file"]{ display:none; }

  .img-preview-wrap{ border:1px solid var(--line); border-radius: 14px; overflow:hidden; background: var(--surface); position:relative; min-height: 220px; display:flex; align-items:center; justify-content:center; }
  .img-preview-wrap img, .img-preview-wrap canvas{ display:block; max-width:100%; max-height: 360px; }
  .img-preview-wrap .empty-note{ padding: 40px 20px; }
  .img-preview-remove{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--ink); }
  .img-preview-remove:hover{ border-color: var(--danger); color: var(--danger); }
  .img-preview-remove .icon{ width:14px; height:14px; }

  .field-row{ display:flex; align-items:flex-end; gap: 12px; margin-top: 16px; }
  .field{ flex:1; min-width:0; }
  .field label{ display:block; font-size:.78rem; font-weight:600; color: var(--muted); margin-bottom:6px; }
  .field input[type="number"], .field select{
    width:100%; border:1px solid var(--line); border-radius: var(--radius-s); padding:.6rem .75rem;
    font-size:.92rem; font-family: var(--font-mono); color: var(--ink); background: var(--white); outline:0;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .field select{ font-family: var(--font-body); }
  .field input[type="number"]:focus, .field select:focus{ border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,58,95,.08); }
  .lock-btn{ flex-shrink:0; width:40px; height:40px; border-radius: var(--radius-s); border:1px solid var(--line); background: var(--white); display:grid; place-items:center; color: var(--muted); margin-bottom:1px; }
  .lock-btn .icon{ width:17px; height:17px; }
  .lock-btn.is-active{ border-color: var(--navy); background: var(--navy); color: var(--white); }

  .pct-row{ display:flex; gap:.5rem; margin-top:12px; flex-wrap:wrap; }

  .quality-row{ margin-top:16px; }
  .quality-row label{ display:flex; justify-content:space-between; font-size:.78rem; font-weight:600; color: var(--muted); margin-bottom:6px; }
  .quality-row input[type="range"]{ width:100%; accent-color: var(--navy); }
  .quality-row.is-disabled{ opacity:.45; pointer-events:none; }

  .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; }
  .stat-card b{ display:block; font-family: var(--font-mono); font-size: 1.5rem; color: var(--ink); }
  .stat-card span{ font-size:.76rem; color: var(--muted); }
  .stat-card b.is-down{ color: var(--green-ok); }

  .empty-note{ font-size:.82rem; color: var(--muted-2); padding: 6px 0; }

  /* ---------- SHARED: reusable history-grid / history-card component CSS ---------- */
  .history-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .history-card{ position:relative; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding: 10px; }
  .history-card .hc-thumb{ width:100%; height:100px; object-fit:cover; border-radius:8px; background: var(--surface); display:block; }
  .history-card .hc-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-top:9px; font-size:.72rem; color: var(--muted); }
  .history-card .hc-meta b{ color: var(--ink); font-family: var(--font-mono); font-size:.76rem; }
  .history-card .hc-format{ font-family: var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color: var(--amber-ink); background: var(--amber-soft); padding:.15rem .4rem; border-radius:999px; margin-top:6px; display:inline-block; }
  .history-card .hc-actions{ display:flex; gap:6px; margin-top:9px; }
  .history-card .hc-actions .btn{ flex:1; justify-content:center; padding:.4rem .5rem; font-size:.74rem; }
  .history-card .hc-remove{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--muted); }
  .history-card .hc-remove .icon{ width:11px; height:11px; }
  .history-card .hc-remove:hover{ border-color: var(--danger); color: var(--danger); }
  @media (max-width: 680px){ .history-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px; } }
  .history-card .hc-thumb-placeholder{ width:100%; height:100px; border-radius:8px; background: var(--surface); display:flex; align-items:center; justify-content:center; color: var(--muted-2); }
  .history-card .hc-thumb-placeholder .icon{ width:28px; height:28px; }

  /* ============ MORE TOOLS ============ */
  .tool-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .tool-card{ position:relative; display:flex; flex-direction:column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 18px 14px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .tool-card::before{ content:""; position:absolute; top:-6px; left: 22px; width:11px; height:11px; border-radius:50%; background: var(--white); border: 2px solid var(--amber); transition: background .18s ease; }
  .tool-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(31,58,95,.3); }
  .tool-card:hover::before{ background: var(--amber); }
  .tool-card .tool-icon{ width:44px; height:44px; border-radius: 11px; background: var(--surface); display:grid; place-items:center; color: var(--navy); margin-bottom: 14px; transition: background .18s ease, color .18s ease; }
  .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); }
  .tool-card h3{ font-size: 1.02rem; font-weight:600; font-family: var(--font-body); }
  .tool-card p{ flex:1; font-size:.83rem; color: var(--muted); margin-top:6px; line-height:1.5; }
  /* footer: dashed rule echoes the sidebar peg-rail; arrow chip fills navy on hover */
  .tool-card .tool-use{ margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-size:.8rem; font-weight:600; color: var(--navy); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  .tool-card .tool-arrow{ width:26px; height:26px; border-radius:50%; background: var(--surface); display:grid; place-items:center; transition: background .18s ease, color .18s ease; }
  .tool-card .tool-arrow .icon{ width:13px; height:13px; transition: transform .15s ease; }
  .tool-card:hover .tool-arrow{ background: var(--navy); color: var(--white); }
  .tool-card:hover .tool-arrow .icon{ transform: translateX(2px); }


  .guide-table{ width:100%; border-collapse: collapse; margin-top: 16px; font-size: .86rem; }
  .guide-table th, .guide-table td{ text-align:left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .guide-table th{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted-2); font-weight:600; }
  .guide-table td{ color: var(--ink); }
  .guide-table td:last-child, .guide-table th:last-child{ color: var(--muted); font-weight:400; }
  .guide-table tr:last-child td{ border-bottom:0; }

  .steps-list{ counter-reset: step; margin-top: 16px; display:grid; gap: 12px; }
  .steps-list li{ list-style:none; padding-left: 0; display:flex; gap: 14px; align-items:flex-start; }
  .steps-list li::before{ counter-increment: step; content: counter(step); flex-shrink:0; width: 26px; height:26px; border-radius:50%; background: var(--navy); color: var(--white); font-family: var(--font-mono); font-size:.78rem; display:grid; place-items:center; }
  .steps-list li span{ font-size:.9rem; color: var(--muted); line-height:1.6; padding-top:2px; }


  /* ============ FOOTER ============ */
  .site-footer{ margin-top: 80px; border-top: 1px solid var(--line); background: var(--surface); }
  .footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding: 48px 0 36px; }
  .footer-brand p{ color: var(--muted); font-size:.85rem; margin-top: 12px; line-height:1.6; max-width: 32ch; }
  .footer-social{ display:flex; gap:.5rem; margin-top:18px; }
  .footer-social a{ width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--muted); transition: color .15s ease, border-color .15s ease; }
  .footer-social a:hover{ color: var(--navy); border-color: var(--navy); }
  .footer-social .icon{ width:15px; height:15px; }
  .footer-col h4{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); margin-bottom:14px; }
  .footer-col a{ display:block; font-size:.86rem; color: var(--muted); padding: 6px 0; transition: color .15s ease; }
  .footer-col a:hover{ color: var(--navy); }
  .footer-bottom{ border-top: 1px solid var(--line); padding: 20px 0 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .footer-bottom p{ font-size:.8rem; color: var(--muted-2); }
  .footer-bottom .legal{ display:flex; gap:18px; }
  .footer-bottom .legal a{ font-size:.8rem; color: var(--muted-2); }
  .footer-bottom .legal a:hover{ color: var(--navy); }

  .to-top{ position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 44px; height:44px; border-radius:50%; background: var(--navy); color: var(--white); border:0; display:grid; place-items:center; box-shadow: 0 10px 22px -8px rgba(31,58,95,.55); opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity .2s ease, transform .2s ease, background .15s ease; }
  .to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
  .to-top:hover{ background: var(--navy-ink); }

  /* ============ RESPONSIVE ============ */
  @media (min-width: 1400px){
    .page-hero-media{ max-width: 520px; }
  }
  @media (max-width: 1180px){ .container{ padding-inline: 24px; } .layout{ padding-inline: 24px; gap: 28px; } }
  @media (max-width: 1080px){
    .primary-nav{ display:none; }
    .header-search{ max-width: 260px; }
    .layout{ grid-template-columns: 210px minmax(0,1fr); gap: 24px; }
    .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 32px; }
  }
  @media (max-width: 980px){
    .workspace{ grid-template-columns: 1fr; }
  }
  @media (max-width: 900px){
    .layout{ grid-template-columns: 1fr; padding-inline: 24px; }
    .menu-toggle{ display:inline-flex; }
    .brand{ margin-right: auto; }
    .sidebar{ position: fixed; top:0; left:0; bottom:0; width: min(270px, 82vw); z-index: 90; background: var(--white); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .25s ease; padding: 20px 16px 0; height:auto; overflow:hidden; }
    .sidebar-scroll{ margin: 0 -16px; padding: 0 16px 16px; }
    .sidebar.is-open{ transform: translateX(0); }
    .sidebar-backdrop{ display:block; position: fixed; inset:0; background: rgba(20,23,28,.35); z-index: 80; opacity:0; pointer-events:none; transition: opacity .2s ease; }
    .sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; }
    .header-search{ max-width: none; }
  }
  @media (max-width: 680px){
    .container{ padding-inline: 18px; } .layout{ padding-inline: 18px; }
    .site-header .inner{ gap: 12px; }
    .header-search{ display:none; }
    .header-actions .btn-ghost:not(.theme-toggle){ display:none; }
    .page-hero{ padding: 26px; border-radius: var(--radius-m); }
    .page-hero-media{ max-width: 100%; }
    .panel{ padding: 18px; }
    .stat-grid{ grid-template-columns: 1fr 1fr; }
    .tool-grid{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
    .tool-card{ padding: 16px 14px 12px; }
    .tool-card .tool-use{ margin-top: 12px; padding-top: 10px; font-size:.76rem; }
    .footer-top{ grid-template-columns: 1fr; gap: 28px; padding: 36px 0 24px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap: 12px; }
    .to-top{ right: 16px; bottom: 16px; width: 40px; height: 40px; }
    .bottom-nav{ display:block; }
    body{ padding-bottom: 62px; }
    .to-top{ bottom: 78px; }
  }
  @media (max-width: 420px){
    .brand span:not(.brand-mark){ display:none; }
    .stat-grid{ grid-template-columns: 1fr; }
  }


  /* ============ REVIEWS ============ */
  .reviews-summary{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .reviews-summary .stars{ color: var(--amber); font-size:1.1rem; letter-spacing:2px; }
  .reviews-summary .avg{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; }
  .reviews-summary .count{ color: var(--muted); font-size:.85rem; }
  .reviews-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px; }
  .review-card{ padding: 20px; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); }
  .review-card .stars{ color: var(--amber); font-size:.85rem; letter-spacing:1px; }
  .review-card p{ font-size:.88rem; color: var(--ink); line-height:1.6; margin-top:10px; }
  .review-card .who{ display:flex; align-items:center; gap:.6rem; margin-top:16px; }
  .review-avatar{ width:32px; height:32px; border-radius:50%; background: var(--surface-2); color: var(--navy); display:grid; place-items:center; font-weight:700; font-size:.78rem; font-family: var(--font-display); flex-shrink:0; overflow:hidden; }
  .review-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .review-card .who b{ font-size:.85rem; display:block; }
  .review-card .who span{ font-size:.76rem; color: var(--muted-2); }
  .reviews-empty{ color: var(--muted); font-size:.88rem; padding: 20px 0; }
  @media (max-width: 900px){ .reviews-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 680px){ .reviews-grid{ grid-template-columns: 1fr; } .reviews-summary{ gap:10px; } }

  /* Review modal */
  .review-modal-backdrop{ position:fixed; inset:0; background: rgba(20,23,28,.5); z-index: 200; display:none; align-items:center; justify-content:center; padding: 20px; }
  .review-modal-backdrop.is-open{ display:flex; }
  .review-modal{ width:100%; max-width: 420px; background: var(--white); border-radius: var(--radius-l); padding: 28px; box-shadow: var(--shadow-card-hover); position:relative; max-height: 90vh; overflow-y:auto; }
  .review-modal h3{ font-size:1.2rem; }
  .review-modal p.sub{ color: var(--muted); font-size:.86rem; margin-top:6px; }
  .review-modal-close{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background: var(--surface); display:grid; place-items:center; font-size:14px; }
  .review-modal-close:hover{ background: var(--surface-2); }
  .star-picker{ display:flex; gap:6px; margin: 16px 0 4px; font-size:1.6rem; }
  .star-picker button{ background:none; border:none; padding:0; color: var(--line); line-height:1; transition: color .1s ease; }
  .star-picker button.is-active, .star-picker button:hover, .star-picker button:hover ~ button{ color: var(--amber); }
  .review-field{ margin-top:14px; }
  .review-field label{ font-size:.8rem; font-weight:600; display:block; margin-bottom:6px; }
  .review-field input, .review-field textarea{ width:100%; border:1px solid var(--line); border-radius: var(--radius-s); padding:.65rem .85rem; font-size:.88rem; font-family:inherit; outline:0; background: var(--white); color: var(--ink); transition: border-color .15s ease; }
  .review-field input:focus, .review-field textarea:focus{ border-color: var(--navy); }
  .review-field textarea{ resize: vertical; min-height:90px; }
  .review-modal-actions{ margin-top:18px; display:flex; align-items:center; gap:12px; }
  .review-modal-msg{ font-size:.8rem; margin-top:10px; }
  .review-modal-msg.ok{ color: var(--green-ok); }
  .review-modal-msg.err{ color: var(--danger); }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; overflow:hidden; }
  /* ============ AD SLOTS ============ */
  /* Hidden by default so a disabled/undefined slot reserves zero space —
     ads-loader.js removes [hidden] once it fills a slot with a real ad. */
  /* ---------- Ad slots ---------- */
  .ad-slot{ width:100%; max-width:100%; box-sizing:border-box; margin: 28px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
  .ad-slot[hidden]{ display:none; margin:0; }
  .ad-slot-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); }
  .ad-slot-inner{ width:100%; max-width:100%; box-sizing:border-box; height:90px; max-height:90px; position:relative; display:flex; align-items:center; justify-content:center; background: var(--surface); border:1px dashed var(--line); border-radius: var(--radius-m); overflow:hidden; }
  .ad-slot--leaderboard .ad-slot-inner{ height:90px; max-height:90px; }
  .ad-slot--incontent .ad-slot-inner{ height:250px; max-height:250px; }
  .ad-slot--sidebar .ad-slot-inner{ height:250px; max-height:250px; }
  .ad-unit-group{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .ad-unit-group ins.adsbygoogle{ margin:0 auto; }
  .ad-slot-inner ins.adsbygoogle,
  .ad-slot-inner ins.adsbygoogle iframe{ width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; }
  @media (max-width:680px){
    .ad-slot--leaderboard .ad-slot-inner{ height:50px; max-height:50px; }
    .ad-slot--incontent .ad-slot-inner{ height:100px; max-height:100px; }
    .ad-slot--sidebar .ad-slot-inner{ height:100px; max-height:100px; }
  }

  /* ---------- Bottom-right popup banner ad ---------- */
  .ad-popup{ position: fixed; right:20px; bottom:20px; z-index:150; width:300px; max-width: calc(100vw - 32px); background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card-hover); padding:10px 10px 12px; display:none; flex-direction:column; gap:6px; transform: translateY(16px); opacity:0; transition: transform .25s ease, opacity .25s ease; box-sizing:border-box; }
  .ad-popup[hidden]{ display:none; }
  .ad-popup.is-open{ display:flex; }
  .ad-popup.is-visible{ transform: translateY(0); opacity:1; }
  .ad-popup-head{ display:flex; align-items:center; justify-content:space-between; }
  .ad-popup-close{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background: var(--surface); color: var(--ink); font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
  .ad-popup-close:hover{ background: var(--surface-2); }
  .ad-popup .ad-slot-inner{ height:100px; max-height:100px; border-style:dashed; }
  @media (max-width:420px){ .ad-popup{ right:12px; bottom:12px; left:12px; width:auto; } }
  /* ============ THEME TOGGLE ============ */
  .theme-toggle{ display:flex; align-items:center; justify-content:center; position:relative; width: 38px; height: 38px; padding: 0; border-radius: var(--radius-s); background: var(--white); border: 1px solid var(--line); flex-shrink: 0; }
  .theme-toggle .icon{ position:absolute; width: 18px; height: 18px; transition: opacity .3s ease, transform .3s ease; }
  .theme-toggle .icon-sun{ opacity: 1; transform: rotate(0deg); }
  .theme-toggle .icon-moon{ opacity: 0; transform: rotate(-180deg); }
  .theme-toggle:hover{ border-color: var(--navy); background: var(--surface); }

  

  /* ============ DARK THEME ============ */
  /* Follows the OS setting until the visitor picks a theme with the toggle */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --white:       #0d0d0d;
      --surface:     #262626;
      --surface-2:   #333333;
      --ink:         #ffffff;
      --muted:       #cccccc;
      --muted-2:     #aaaaaa;
      --line:        #555555;
      --navy:        #4adec8;
      --navy-ink:    #5aebd6;
      --amber:       #4adec8;
      --amber-ink:   #5aebd6;
      --amber-soft:  #1a2a3a;
      --green-ok:    #4ade80;
      --danger:      #ff6b6b;
      --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
      --shadow-card-hover: 0 4px 10px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.6);
    }
    :root:not([data-theme="light"]) .theme-toggle .icon-sun{ opacity: 0; transform: rotate(180deg); }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon{ opacity: 1; transform: rotate(0deg); }
    :root:not([data-theme="light"]) .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.8); }
    :root:not([data-theme="light"]) .header-search:focus-within{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
    :root:not([data-theme="light"]) .btn-solid:hover{ box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--navy) 45%, transparent); }
    :root:not([data-theme="light"]) .field input:focus, :root:not([data-theme="light"]) .field select:focus, :root:not([data-theme="light"]) .review-field input:focus, :root:not([data-theme="light"]) .review-field textarea:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); }
    :root:not([data-theme="light"]) .tool-card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .faq-pop{ background: linear-gradient(160deg, #1c1f24 0%, #141618 100%); border-color: #2e3238; }
    :root:not([data-theme="light"]) .tool-card:hover{ border-color: color-mix(in srgb, var(--navy) 55%, transparent); box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--navy) 25%, transparent), var(--shadow-card-hover); }
    :root:not([data-theme="light"]) .tool-card .tool-icon{ background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
    :root:not([data-theme="light"]) .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); }
    :root:not([data-theme="light"]) .review-modal-backdrop, :root:not([data-theme="light"]) .sidebar-backdrop{ background: rgba(0,0,0,.65); }
    :root:not([data-theme="light"]) .to-top, :root:not([data-theme="light"]) .faq-fab{ box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--navy) 35%, transparent); }
  }
  /* Explicit dark theme (toggle / saved choice) */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --white:       #0d0d0d;
    --surface:     #262626;
    --surface-2:   #333333;
    --ink:         #ffffff;
    --muted:       #cccccc;
    --muted-2:     #aaaaaa;
    --line:        #555555;
    --navy:        #4adec8;
    --navy-ink:    #5aebd6;
    --amber:       #4adec8;
    --amber-ink:   #5aebd6;
    --amber-soft:  #1a2a3a;
    --green-ok:    #4ade80;
    --danger:      #ff6b6b;
    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-card-hover: 0 4px 10px rgba(0,0,0,.4), 0 16px 32px -12px rgba(0,0,0,.6);
  }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ opacity: 0; transform: rotate(180deg); }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ opacity: 1; transform: rotate(0deg); }
  :root[data-theme="dark"] .site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.8); }
  :root[data-theme="dark"] .header-search:focus-within{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
  :root[data-theme="dark"] .btn-solid:hover{ box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--navy) 45%, transparent); }
  :root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field select:focus, :root[data-theme="dark"] .review-field input:focus, :root[data-theme="dark"] .review-field textarea:focus{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); }
  :root[data-theme="dark"] .tool-card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .faq-pop{ background: linear-gradient(160deg, #1c1f24 0%, #141618 100%); border-color: #2e3238; }
  :root[data-theme="dark"] .tool-card:hover{ border-color: color-mix(in srgb, var(--navy) 55%, transparent); box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--navy) 25%, transparent), var(--shadow-card-hover); }
  :root[data-theme="dark"] .tool-card .tool-icon{ background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
  :root[data-theme="dark"] .tool-card:hover .tool-icon{ background: var(--navy); color: var(--white); }
  :root[data-theme="dark"] .review-modal-backdrop, :root[data-theme="dark"] .sidebar-backdrop{ background: rgba(0,0,0,.65); }
  :root[data-theme="dark"] .to-top, :root[data-theme="dark"] .faq-fab{ box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--navy) 35%, transparent); }

  /* ============ HEADER FIT ON SMALL PHONES ============ */
  /* Menu + logo + theme toggle + "Explore tools" overflowed the right edge */
  @media (max-width: 520px){
    .header-actions{ gap:.4rem; }
    /* Translated labels (e.g. Portuguese "Todas as ferramentas") run far
       longer than the English "All tools" the button was sized for, so on
       narrow screens it must shrink to fit and truncate with an ellipsis
       instead of overflowing past the edge of the screen. */
    .header-actions .btn-solid{ padding:.5rem .8rem; font-size:.8rem; white-space:nowrap; max-width: 38vw; overflow:hidden; text-overflow:ellipsis; display:inline-block; min-width:0; }
    .header-actions .btn-solid .icon{ display:none; }
  }
  @media (max-width: 360px){
    .header-actions .btn-solid{ max-width: 30vw; padding:.5rem .6rem; }
  }

  /* ============ HERO ACTIONS ============ */
  .page-hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 22px; }

  /* ============ GUIDE (article) ============ */
  .guide{ position:relative; }
  .guide-nav{ position: sticky; top: var(--header-h); z-index: 20; display:flex; gap:.4rem; margin-bottom: 34px; padding: 10px 0; background: color-mix(in srgb, var(--white) 97%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .guide-nav::-webkit-scrollbar{ display:none; }
  .guide-nav a{ flex-shrink:0; font-size:.82rem; font-weight:500; color: var(--muted); background: var(--white); border:1px solid var(--line); padding:.4rem .8rem; border-radius:999px; transition: border-color .15s ease, color .15s ease, background .15s ease; white-space:nowrap; }
  .guide-nav a:hover{ border-color: var(--navy); color: var(--navy); }
  .guide-nav a.is-active{ background: var(--navy); border-color: var(--navy); color: var(--white); }

  .g-sec{ position:relative; padding: 0 0 46px 62px; scroll-margin-top: calc(var(--header-h) + 80px); }
  .g-sec::before{ content:""; position:absolute; left:17px; top:46px; bottom:8px; border-left: 2px dashed var(--line); }
  .g-sec:last-of-type{ padding-bottom: 0; }
  .g-sec:last-of-type::before{ display:none; }
  .g-num{ position:absolute; left:0; top:-3px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: var(--surface); border:1px solid var(--line); color: var(--navy); font-family: var(--font-mono); font-size:.72rem; transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .g-sec.is-active .g-num{ background: var(--navy); border-color: var(--navy); color: var(--white); }
  .g-sec h2{ font-size: 1.45rem; margin-top: 12px; }
  .g-sec h3{ font-family: var(--font-body); font-weight:600; }
  .g-sec p{ font-size:.94rem; color: var(--muted); line-height:1.75; margin-top:12px; }
  .g-sec p.g-lead{ font-size:1.04rem; color: var(--ink); line-height:1.7; }

  .use-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-top:18px; }
  .use-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding:18px 16px 16px; }
  .use-icon{ width:38px; height:38px; border-radius:10px; background: var(--white); border:1px solid var(--line); display:grid; place-items:center; color: var(--navy); }
  .use-icon .icon{ width:18px; height:18px; }
  .use-card h3{ font-size:.98rem; line-height:1.3; margin-top:14px; }
  .use-card p{ font-size:.85rem; line-height:1.6; margin-top:8px; }

  .table-wrap{ margin-top:16px; border:1px solid var(--line); border-radius: var(--radius-m); overflow-x:auto; background: var(--white); }
  .table-wrap .guide-table{ margin-top:0; }
  .table-wrap .guide-table th{ background: var(--surface); }

  .steps-list{ padding-left:0; }
  .steps-list li{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding:14px 16px; align-items:center; }
  .steps-list li span{ padding-top:0; }

  .def-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:20px; }
  .def-card{ position:relative; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding:20px 18px 18px; }
  .def-card::before{ content:""; position:absolute; top:-6px; left:20px; width:11px; height:11px; border-radius:50%; background: var(--white); border:2px solid var(--amber); }
  .def-card h3{ font-size:1rem; }
  .def-card p{ font-size:.87rem; line-height:1.65; margin-top:8px; }

  .flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; }
  .flow span{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .75rem; border-radius:999px; background: var(--amber-soft); color: var(--amber-ink); }
  .flow i{ font-style:normal; color: var(--muted-2); }

  .tip-list{ display:grid; gap:10px; margin-top:16px; }
  .tip-list li{ position:relative; list-style:none; padding:13px 16px 13px 50px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); font-size:.9rem; line-height:1.6; color: var(--muted); }
  .tip-list li::before{ content:""; position:absolute; left:15px; top:14px; width:22px; height:22px; border-radius:50%; background: color-mix(in srgb, var(--navy) 14%, transparent); }
  .tip-list li::after{ content:""; position:absolute; left:15px; top:14px; width:22px; height:22px; background: var(--navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }

  .note-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; }
  .note{ border:1px solid var(--line); border-radius: var(--radius-m); padding:18px; }
  .note h3{ display:flex; align-items:center; gap:.5rem; font-size:1rem; }
  .note h3 .icon{ width:18px; height:18px; }
  .note p{ font-size:.87rem; line-height:1.65; margin-top:10px; }
  .note--privacy{ background: color-mix(in srgb, var(--green-ok) 8%, var(--white)); border-color: color-mix(in srgb, var(--green-ok) 35%, var(--line)); }
  .note--privacy h3 .icon{ color: var(--green-ok); }
  .note--limits{ background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
  .note--limits h3 .icon{ color: var(--amber-ink); }

  @media (max-width: 900px){ .def-grid, .note-grid{ grid-template-columns: 1fr; } }
  @media (max-width: 680px){
    .g-sec{ padding-left: 48px; padding-bottom: 38px; }
    .g-sec::before{ left:14px; top:40px; }
    .g-num{ width:30px; height:30px; font-size:.66rem; }
    .g-sec h2{ font-size:1.25rem; }
    .guide-nav{ margin-bottom: 26px; }
  }

  /* ============ FAQ CHAT WIDGET (bottom right) ============ */
  .faq-fab, .faq-pop, .to-top{ --ad-lift: 0px; }
  /* if the bottom-right banner ad is showing, lift the chat button (and back-to-top) above it */
  .ad-popup.is-open ~ .faq-fab, .ad-popup.is-open ~ .faq-pop, .ad-popup.is-open ~ .to-top{ --ad-lift: 170px; }

  /* --- launcher button --- */
  .faq-fab{ position:fixed; right:24px; bottom: calc(24px + var(--ad-lift)); z-index:60; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background: linear-gradient(145deg, var(--navy), var(--navy-ink)); color: var(--white); cursor:pointer; box-shadow: 0 10px 22px -8px rgba(20,41,63,.6), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .18s ease; }
  .faq-fab:hover{ transform: translateY(-2px) scale(1.05); }
  .faq-fab:active{ transform: scale(.95); }
  .faq-fab:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
  .faq-fab-ic{ grid-area:1/1; width:20px; height:20px; stroke-width:1.8; transition: transform .28s ease, opacity .2s ease; }
  .faq-fab-ic-x{ opacity:0; transform: rotate(-90deg) scale(.6); }
  .faq-fab.is-open .faq-fab-ic-chat{ opacity:0; transform: rotate(90deg) scale(.6); }
  .faq-fab.is-open .faq-fab-ic-x{ opacity:1; transform:none; }
  .faq-fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--navy); opacity:0; pointer-events:none; }
  .faq-fab.has-unread::after{ animation: faqRing 2.4s ease-out infinite; }
  @keyframes faqRing{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.65); opacity:0; } }
  .faq-fab-badge{ position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background: var(--danger); border:2px solid var(--white); }
  .faq-fab:not(.has-unread) .faq-fab-badge{ display:none; }
  .to-top{ bottom: calc(24px + 44px + 12px + var(--ad-lift)); }   /* sits just above the chat button */

  /* --- panel --- */
  .faq-pop{ position:fixed; right:24px; bottom: calc(24px + 44px + 14px + var(--ad-lift)); z-index:160; width: min(380px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 180px)); max-height: min(640px, calc(100dvh - 180px)); display:flex; flex-direction:column; background: var(--white); color: var(--ink); border:1px solid var(--line); border-radius:24px; box-shadow: 0 30px 70px -20px rgba(20,23,28,.5), 0 0 0 1px rgba(20,23,28,.03); overflow:hidden; outline:none; transform-origin: bottom right; animation: faqPop .24s cubic-bezier(.2,.9,.3,1.1); }
  .faq-pop[hidden]{ display:none; }
  @keyframes faqPop{ from{ opacity:0; transform: translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

  /* header */
  .faq-pop-head{ position:relative; display:flex; align-items:center; gap:10px; padding:16px; background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 80%, #000)); color: var(--white); flex-shrink:0; overflow:hidden; }
  .faq-pop-head::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--white) 24%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000); mask-image: linear-gradient(100deg, transparent 35%, #000); opacity:.7; pointer-events:none; }
  .faq-pop-head > *{ position:relative; }
  .faq-pop-avatar{ width:44px; height:44px; border-radius:50%; background: var(--amber); color:#14293f; display:grid; place-items:center; flex-shrink:0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--white) 18%, transparent); }
  .faq-pop-avatar .icon{ width:24px; height:24px; }
  .faq-pop-title{ flex:1; min-width:0; margin-left:2px; }
  .faq-pop-title h2{ font-family: var(--font-display); font-size:1.05rem; line-height:1.2; color: inherit; margin:0; }
  .faq-pop-status{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:.78rem; opacity:.88; }
  .faq-pop-status i{ position:relative; width:8px; height:8px; border-radius:50%; background: var(--green-ok); flex-shrink:0; }
  .faq-pop-status i::after{ content:""; position:absolute; inset:0; border-radius:50%; background: var(--green-ok); animation: faqLive 1.8s ease-out infinite; }
  @keyframes faqLive{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
  .faq-pop-btn{ width:34px; height:34px; border-radius:50%; border:0; background: color-mix(in srgb, var(--white) 16%, transparent); color: inherit; display:grid; place-items:center; flex-shrink:0; cursor:pointer; transition: background .15s ease; }
  .faq-pop-btn:hover{ background: color-mix(in srgb, var(--white) 28%, transparent); }
  .faq-pop-btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
  .faq-pop-btn .icon{ width:16px; height:16px; transition: transform .3s ease; }
  .faq-pop-btn.faq-reset:hover .icon{ transform: rotate(-140deg); }

  /* conversation */
  .faq-chat{ position:relative; flex:1 1 auto; min-height:96px; overflow-y:auto; overscroll-behavior: contain; scroll-behavior:smooth; background: var(--surface); padding:14px 14px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; }
  .faq-day{ align-self:center; padding:3px 10px; border-radius:999px; font-family: var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted-2); background: color-mix(in srgb, var(--line) 60%, transparent); }
  .faq-msg{ display:flex; align-items:flex-end; gap:8px; animation: faqMsgIn .22s ease; }
  .faq-msg.is-user{ justify-content:flex-end; }
  .faq-msg-av{ width:26px; height:26px; border-radius:50%; background: var(--amber); color:#14293f; display:grid; place-items:center; flex-shrink:0; }
  .faq-msg-av .icon{ width:15px; height:15px; }
  .faq-bubble{ position:relative; max-width: calc(100% - 34px); padding:10px 14px; border-radius:18px 18px 18px 6px; background: var(--white); border:1px solid var(--line); color: var(--ink); font-size:.88rem; line-height:1.55; box-shadow: 0 1px 2px rgba(20,23,28,.05); overflow-wrap:anywhere; }
  .faq-time{ margin-top:5px; font-size:.64rem; line-height:1; color: var(--muted-2); }
  .faq-msg.is-user .faq-bubble{ max-width:86%; background: linear-gradient(145deg, var(--navy), color-mix(in srgb, var(--navy) 82%, #000)); border-color: transparent; color: var(--white); border-radius:18px 18px 6px 18px; box-shadow: 0 8px 16px -10px rgba(20,41,63,.7); }
  .faq-msg.is-user .faq-time{ color: inherit; opacity:.6; text-align:right; }
  .faq-typing{ display:inline-flex; gap:4px; padding:5px 2px; }
  .faq-typing span{ width:6px; height:6px; border-radius:50%; background: var(--muted-2); animation: faqDot 1s infinite ease-in-out; }
  .faq-typing span:nth-child(2){ animation-delay:.15s; }
  .faq-typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes faqDot{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }
  @keyframes faqMsgIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

  /* question picker */
  .faq-ask{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; background: var(--white); border-top:1px solid var(--line); min-height:0; box-shadow: 0 -10px 20px -16px rgba(20,23,28,.25); }
  .faq-search{ display:flex; align-items:center; gap:8px; height:42px; padding:0 8px 0 14px; border-radius:999px; background: var(--surface); border:1px solid var(--line); color: var(--muted-2); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
  .faq-search:focus-within{ background: var(--white); border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent); color: var(--navy); }
  .faq-search > .icon{ width:16px; height:16px; flex-shrink:0; }
  .faq-search input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font: inherit; font-size:.88rem; color: var(--ink); }
  .faq-search input::placeholder{ color: var(--muted-2); }
  .faq-search-clear{ width:24px; height:24px; padding:0; border:0; border-radius:50%; background: var(--surface-2); color: var(--muted); display:grid; place-items:center; flex-shrink:0; cursor:pointer; }
  .faq-search-clear:hover{ background: var(--line); color: var(--ink); }
  .faq-search-clear[hidden]{ display:none; }
  .faq-search-clear .icon{ width:12px; height:12px; }
  .faq-ask-label{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family: var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); }
  .faq-chips{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-height: min(180px, 25vh); overflow-y:auto; overscroll-behavior: contain; padding:2px 4px 2px 0; scrollbar-width:thin; }
  .faq-chips.has-more{ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
  .faq-chip{ display:inline-flex; align-items:center; gap:8px; max-width:100%; text-align:left; padding:9px 12px 9px 14px; border-radius:18px; border:1px solid var(--line); background: var(--surface); color: var(--navy); font: inherit; font-weight:600; font-size:.84rem; line-height:1.35; cursor:pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
  .faq-chip:hover{ border-color: var(--navy); background: var(--white); box-shadow: 0 8px 16px -12px rgba(20,41,63,.6); transform: translateY(-1px); }
  .faq-chip:active{ transform:none; }
  .faq-chip:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
  .faq-chip[hidden]{ display:none; }
  .faq-chip .icon{ width:14px; height:14px; flex-shrink:0; opacity:.5; transition: transform .15s ease, opacity .15s ease; }
  .faq-chip:hover .icon{ transform: translateX(2px); opacity:1; }
  .faq-chip-done{ display:none; color: var(--green-ok); }
  .faq-chip.is-asked{ color: var(--muted); font-weight:500; }
  .faq-chip.is-asked .faq-chip-go{ display:none; }
  .faq-chip.is-asked .faq-chip-done{ display:block; opacity:1; }
  .faq-empty{ margin:0; padding:6px 2px; font-size:.84rem; color: var(--muted); }
  .faq-empty[hidden]{ display:none; }
  .faq-link{ padding:0; border:0; background:none; font: inherit; font-weight:600; color: var(--navy); text-decoration:underline; cursor:pointer; }

  @media (max-width: 680px){
    .ad-popup.is-open ~ .faq-fab, .ad-popup.is-open ~ .faq-pop, .ad-popup.is-open ~ .to-top{ --ad-lift: calc(170px + env(safe-area-inset-bottom, 0px)); }
    /* clear the mobile bottom nav */
    .faq-fab{ right:16px; bottom: calc(78px + var(--ad-lift)); width:40px; height:40px; }
    .faq-fab-ic{ width:18px; height:18px; }
    .to-top{ bottom: calc(78px + 40px + 10px + var(--ad-lift)); }
    .faq-pop{ right:16px; width: min(360px, calc(100vw - 32px)); bottom: calc(78px + 40px + 12px + var(--ad-lift)); max-height: min(640px, calc(100vh - 250px)); max-height: min(640px, calc(100dvh - 250px)); }
    .faq-search input{ font-size:16px; }   /* stops iOS zooming in on focus */
  }
  @media (max-height: 560px){ .faq-chips{ max-height:100px; } }
  @media (prefers-reduced-motion: reduce){
    .faq-pop, .faq-msg, .faq-typing span, .faq-pop-status i::after, .faq-fab.has-unread::after{ animation:none; }
    .faq-chat{ scroll-behavior:auto; }
    .faq-fab, .faq-fab-ic, .faq-chip, .faq-pop-btn .icon{ transition:none; }
  }