:root{
    --bg:#0A0E17;
    --surface:#12161F;
    --surface-2:#171C28;
    --surface-3:#1D2330;
    --surface-sunken:#0D1119;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.16);
    --ink:#F3F5F7;
    --ink-2:#A6ADBB;
    --muted:#6E7583;
    --faint:#4A5162;
    --brand:#22D3EE;
    --brand-ink:#67E8F9;
    --brand-soft:rgba(34,211,238,0.14);
    --accent:#F59E0B;
    --danger:#F87171;
    --danger-soft:rgba(248,113,113,0.14);
    --ready:#34D399;
    --ready-soft:rgba(52,211,153,0.14);
    --live:#F59E0B;
    --live-soft:rgba(245,158,11,0.16);
    --btn-bg:#F3F5F7;
    --btn-bg-hover:#FFFFFF;
    --btn-text:#0A0E17;
    --radius-sm:10px;
    --radius:16px;
    --radius-lg:22px;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
    --shadow-md:0 10px 28px rgba(0,0,0,0.4);
    --shadow-lg:0 24px 60px rgba(0,0,0,0.55);
    --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Courier New',monospace;
    --topbar-h:60px;
  }
  :root[data-theme="light"]{
    --bg:#F6F7F9;
    --surface:#FFFFFF;
    --surface-2:#F1F2F5;
    --surface-3:#E7E9ED;
    --surface-sunken:#F7F8FA;
    --border:rgba(0,0,0,0.09);
    --border-strong:rgba(0,0,0,0.18);
    --ink:#14161A;
    --ink-2:#4B4F58;
    --muted:#656B76;
    --faint:#989DA6;
    --brand:#0E7490;
    --brand-ink:#0C6478;
    --brand-soft:rgba(14,116,144,0.10);
    --accent:#92400E;
    --danger:#C31C1C;
    --danger-soft:rgba(195,28,28,0.09);
    --ready:#047857;
    --ready-soft:rgba(4,120,87,0.10);
    --live:#92400E;
    --live-soft:rgba(146,64,14,0.12);
    --btn-bg:#14161A;
    --btn-bg-hover:#2E3138;
    --btn-text:#FFFFFF;
    --shadow-sm:0 1px 2px rgba(20,22,26,0.06);
    --shadow-md:0 10px 28px rgba(20,22,26,0.10);
    --shadow-lg:0 24px 60px rgba(20,22,26,0.16);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:var(--font-sans);
    letter-spacing:-0.02em;
    font-weight:800;
    margin:0;
  }
  .mono{font-family:var(--font-mono);}
  a{color:var(--brand-ink);}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  ::selection{background:var(--brand-soft);color:var(--ink);}

  /* ---- backdrop ---- */
  #backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40;
  }
  #backdrop.show{opacity:1;pointer-events:auto;}

  /* ---- topbar (always visible; hamburger only shows on mobile/tablet) ---- */
  #topbar{
    display:flex;position:sticky;top:0;left:0;right:0;height:var(--topbar-h);
    background:var(--surface);border-bottom:1px solid var(--border);
    align-items:center;gap:14px;padding:0 20px;z-index:45;
  }
  #hamburger{
    display:none;background:var(--surface-2);border:1px solid var(--border);width:38px;height:38px;border-radius:var(--radius-sm);
    align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink-2);
  }
  #hamburger:hover{border-color:var(--brand);color:var(--brand);}

  #main-nav{display:flex;align-items:center;gap:22px;margin-left:28px;}
  .nav-link{background:none;border:none;color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer;padding:6px 0;font-family:var(--font-sans);white-space:nowrap;}
  .nav-link:hover{color:var(--brand-ink);}

  #nav-search-btn{
    margin-left:auto;background:var(--surface-2);border:1px solid var(--border);width:38px;height:38px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink-2);
    transition:border-color .15s ease,color .15s ease;
  }
  #nav-search-btn:hover{border-color:var(--brand);color:var(--brand);}

  #theme-toggle{
    background:var(--surface-2);border:1px solid var(--border);width:38px;height:38px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--ink-2);
    transition:border-color .15s ease,color .15s ease;
  }
  #theme-toggle:hover{border-color:var(--brand);color:var(--brand);}

  /* sidebar quick links — Popular Tools / BD Essentials / Contact Us live here
     too (in addition to #main-nav) so mobile users reach them from the same
     hamburger drawer that already hosts category browsing. */
  .sidebar-quicklinks{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border);}
  .quick-link{display:flex;align-items:center;width:100%;background:none;border:none;text-align:left;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-size:13.5px;font-weight:600;font-family:var(--font-sans);}
  .quick-link:hover{background:var(--surface-2);color:var(--ink);}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15.5px;letter-spacing:-0.01em;cursor:pointer;color:var(--ink);}
  .brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#22D3EE,#0891B2);color:#04121A;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;flex-shrink:0;}

  /* ---- layout shell ---- */
  #shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--topbar-h));}

  #sidebar{
    width:272px;
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:20px 16px 24px;
    position:sticky;
    top:var(--topbar-h);
    height:calc(100vh - var(--topbar-h));
    overflow-y:auto;
  }
  #sidebar::-webkit-scrollbar{width:8px;}
  #sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

  .sidebar-close{
    display:none;position:absolute;top:14px;right:14px;background:var(--surface-2);border:1px solid var(--border);
    width:30px;height:30px;border-radius:50%;color:var(--ink-2);font-size:14px;cursor:pointer;
    align-items:center;justify-content:center;
  }

  .sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 16px;font-weight:800;font-size:15px;color:var(--ink);}
  .icon-btn{width:30px;height:30px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
  .icon-btn:hover{border-color:var(--brand);color:var(--brand);}
  /* Homepage sidebar: hide the quicklinks + "Categories" heading (the
     header nav already covers Popular Tools/BD Essentials/Contact Us
     there) so the sidebar starts directly at All Tools. The sidebar
     itself (#nav-tree, .promo-card) is never touched by this. */
  body.is-home .sidebar-quicklinks,
  body.is-home .sidebar-head{display:none;}

  .cat-item{
    display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;text-align:left;
    padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-size:13.5px;
    font-family:var(--font-sans);margin-bottom:2px;transition:background .12s ease,color .12s ease;
  }
  .cat-item:hover{background:var(--surface-2);color:var(--ink);}
  .cat-item.active{background:var(--brand-soft);color:var(--ink);}
  .cat-icon{display:flex;color:var(--muted);flex-shrink:0;}
  .cat-item.active .cat-icon{color:var(--brand);}
  .cat-name{flex:1;}
  .cat-count{background:var(--surface-3);color:var(--ink-2);font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:999px;min-width:22px;text-align:center;flex-shrink:0;}

  .promo-card{margin-top:18px;background:linear-gradient(160deg,var(--surface-2),var(--surface-3));border:1px solid var(--border);border-radius:16px;padding:16px;}
  .promo-icon{font-size:19px;margin-bottom:8px;}
  .promo-card b{display:block;font-size:13.5px;margin-bottom:6px;color:var(--ink);}
  .promo-card p{color:var(--ink-2);font-size:12px;line-height:1.5;margin:0;}

  /* ---- main ---- */
  #main{flex:1;min-width:0;padding:32px 40px 72px;}

  /* ---- tool page layout shell (Phase 1 foundation) ----
     Comfortable centered width by default so small calculators don't
     stretch edge-to-edge; a `.tool-page-grid.is-wide` variant (opt-in,
     set per-tool via reg()'s `extra.wide`) is used for genuinely
     workspace-shaped tools (file tools, OCR, image editors). */
  .tool-page-shell{max-width:1220px;margin:0 auto;}
  .tool-page-grid{display:grid;grid-template-columns:minmax(0,860px) minmax(240px,320px);gap:32px;align-items:start;}
  .tool-page-grid.is-wide{grid-template-columns:1fr;max-width:1400px;}
  .tool-page-main{min-width:0;}
  .tool-page-rail{position:sticky;top:calc(var(--topbar-h) + 20px);}
  .tool-page-rail-bottom{margin-top:24px;}
  @media(max-width:1140px){
    .tool-page-grid{grid-template-columns:1fr;}
    .tool-page-rail{position:static;margin-top:24px;}
  }

  /* ---- ad slots ----
     No ad network wired up yet: intentionally zero border/background/
     min-height so an empty slot never looks like a broken placeholder —
     it just leaves the comfortable margin a future ad will occupy. */
  .ad-slot{width:100%;}
  .ad-slot-rail{min-height:0;}
  .ad-slot-inline{margin:28px 0;}
  .ad-slot-strip{margin:36px 0;}

  /* ---- usage / social-proof indicator ---- */
  .usage-indicator{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:11.5px;font-weight:500;}
  .usage-indicator svg{flex-shrink:0;}

  #toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:28px;}
  #search-box{
    position:relative;flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  #search-box svg{flex-shrink:0;color:var(--muted);}
  #search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
  #search-box input{flex:1;background:transparent;border:none;color:var(--ink);font-size:14px;font-family:var(--font-sans);min-width:0;}
  #search-box input:focus{outline:none;}
  #search-box input::placeholder{color:var(--faint);}

  /* ---- live search-suggestions dropdown (shared by #hero-search-box
     and #search-box via initSearchDropdown in app.js) ---- */
  .search-dropdown-open{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
  .search-dropdown{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);max-height:min(420px,60vh);overflow-y:auto;z-index:60;
    text-align:left;padding:6px;
  }
  .search-sugg-row{
    display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;
  }
  .search-sugg-row:hover,.search-sugg-row.active{background:var(--surface-2);}
  .search-sugg-icon{
    width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    color:#fff;flex-shrink:0;
  }
  .search-sugg-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .search-sugg-cat{flex-shrink:0;font-size:11.5px;color:var(--muted);font-weight:500;}
  .search-see-all-row{
    justify-content:center;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--border);
    border-radius:0;color:var(--brand-ink);font-size:13px;font-weight:600;
  }
  .search-see-all-row:hover,.search-see-all-row.active{background:var(--surface-2);}
  .search-sugg-empty{padding:16px 10px;text-align:center;color:var(--muted);font-size:13px;}

  #pill-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
  .pill{
    flex-shrink:0;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);
    padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
    font-family:var(--font-sans);transition:all .15s ease;
  }
  .pill:hover{border-color:var(--border-strong);color:var(--ink);}
  .pill.active{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);}

  #section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
  #section-head h2{font-size:21px;margin-bottom:5px;}
  #section-head p{color:var(--ink-2);font-size:13.5px;margin:0;}
  .icon-btn-round{
    width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);
    color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
    transition:all .15s ease;
  }
  .icon-btn-round:hover{border-color:var(--brand);color:var(--brand);}

  .tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .tool-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:22px;display:flex;flex-direction:column;cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
  .card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
  .tile{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
  .badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;flex-shrink:0;}
  .badge-ready{background:var(--ready-soft);color:var(--ready);}
  .badge-live{background:var(--live-soft);color:var(--live);}
  .tool-card h3{font-size:15.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink);font-weight:700;}
  .tag-pill{background:var(--surface-3);color:var(--ink-2);font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;}
  .tool-card p{color:var(--ink-2);font-size:13px;line-height:1.5;margin:0 0 18px;flex:1;}
  .card-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border);}
  .card-cat{color:var(--muted);font-size:12px;font-weight:500;}
  .open-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:12.5px;}
  .empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px;font-size:14px;}
  .browse-footnote{color:var(--muted);font-size:12.5px;margin:8px 0 0;}

  /* ---- marketing homepage ---- */
  /* Phase 2.1: compacted — was margin:12px auto 48px / h1 clamp(30,4.5vw,44) / sub margin-bottom 26 / search padding 16 20 */
  .hero{max-width:680px;margin:6px auto 22px;text-align:center;}
  .hero h1{font-size:clamp(24px,3.6vw,34px);margin-bottom:8px;letter-spacing:-0.03em;}
  .hero-sub{color:var(--ink-2);font-size:14px;line-height:1.5;margin:0 auto 14px;max-width:56ch;}
  /* Admin-editable, hidden entirely when the corresponding site_settings
     value is empty (the default) — see applySiteConfigOverrides in app.js. */
  .site-announcement{
    background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:600;
    text-align:center;padding:9px 16px;border-radius:var(--radius-sm);margin:0 auto 18px;max-width:900px;
  }
  .site-banner{
    display:inline-block;background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
    font-size:13.5px;padding:8px 16px;border-radius:999px;margin:0 auto 12px;
  }
  #hero-search-box{
    position:relative;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
    border-radius:14px;padding:12px 18px;box-shadow:var(--shadow-sm);max-width:560px;margin:0 auto;
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  #hero-search-box svg{flex-shrink:0;color:var(--muted);}
  #hero-search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
  #hero-search-box input{flex:1;background:transparent;border:none;color:var(--ink);font-size:15px;font-family:var(--font-sans);min-width:0;}
  #hero-search-box input:focus{outline:none;}
  #hero-search-box input::placeholder{color:var(--faint);}
  .hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;}
  .hero-chip{background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font-sans);}
  .hero-chip:hover{border-color:var(--brand);color:var(--brand-ink);}

  .home-section{margin-bottom:52px;}
  .home-section .section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
  .home-section .section-head h2{font-size:22px;margin-bottom:5px;display:flex;align-items:center;gap:8px;}
  .home-section .section-head p{color:var(--ink-2);font-size:13.5px;margin:0;}

  .category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .category-card{
    display:block;width:100%;text-align:left;font-family:var(--font-sans);
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .category-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
  .category-card h3{font-size:15px;margin:14px 0 6px;color:var(--ink);font-weight:700;}
  .category-card p{color:var(--ink-2);font-size:12.5px;line-height:1.5;margin:0 0 12px;}
  .category-count{color:var(--muted);font-size:11.5px;font-weight:600;}

  /* ---- Phase 2: homepage trust/value strip ---- */
  .trust-section{margin-bottom:52px;}
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .trust-item{text-align:left;}
  .trust-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:12px;}
  .trust-item h3{font-size:14.5px;margin:0 0 6px;color:var(--ink);font-weight:700;}
  .trust-item p{color:var(--ink-2);font-size:12.5px;line-height:1.55;margin:0;}

  /* ---- Phase 2: homepage FAQ (reuses .faq-item from per-tool content) ---- */
  .home-faq{max-width:800px;}
  .home-faq .faq-item a{color:var(--brand-ink);}

  @media(max-width:900px){
    .category-grid{grid-template-columns:repeat(2,1fr);}
    .trust-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:560px){
    .category-grid{grid-template-columns:1fr;}
    .trust-grid{grid-template-columns:1fr;}
    .home-section .section-head{flex-direction:column;}
    #hero-search-box{padding:11px 15px;}
    .hero{margin:4px auto 18px;}
  }

  footer{
    color:var(--muted);
    font-size:12.5px;
    margin-top:44px;
    padding-top:22px;
    border-top:1px solid var(--border);
    line-height:1.6;
  }

  /* ---- shared multi-column site footer ---- */
  .site-footer{margin-top:48px;padding:36px 0 24px;border-top:1px solid var(--border);}
  .footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;}
  .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 14px;font-weight:700;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
  .footer-col a{color:var(--ink-2);font-size:13px;text-decoration:none;cursor:pointer;}
  .footer-col a:hover{color:var(--brand-ink);}
  .footer-brand p{color:var(--ink-2);font-size:13px;line-height:1.6;margin:12px 0 0;max-width:26ch;}
  .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);color:var(--faint);font-size:12px;}
  .footer-bottom-links a{color:var(--faint);text-decoration:none;cursor:pointer;}
  .footer-bottom-links a:hover{color:var(--brand-ink);}
  @media(max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1/-1;}
  }
  @media(max-width:520px){
    .footer-grid{grid-template-columns:1fr;}
  }

  .breadcrumb{
    font-size:13px;
    color:var(--muted);
    margin-bottom:18px;
    font-weight:500;
  }
  .breadcrumb a{cursor:pointer;color:var(--muted);text-decoration:none;}
  .breadcrumb a:hover{color:var(--brand-ink);}

  .bin-label{
    display:inline-flex;
    align-items:center;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.04em;
    padding:4px 10px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:12px;
  }

  .workbench{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px 36px;
    box-shadow:var(--shadow-sm);
  }
  .workbench h1,.workbench h2{font-size:25px;margin-bottom:8px;letter-spacing:-0.02em;}
  .workbench .desc{color:var(--ink-2);font-size:14px;margin-bottom:26px;line-height:1.55;}
  .workbench-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
  .workbench-head .bin-label{margin-bottom:0;}
  .print-header{display:none;}

  .tool-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 36px;margin-top:20px;}
  .tool-content h3{font-size:17px;margin:22px 0 8px;}
  .tool-content h3:first-child{margin-top:0;}
  .tool-content p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0;}
  .faq-item{border-top:1px solid var(--border);padding:12px 0;}
  .faq-item summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);}
  .faq-item p{margin-top:8px;}

  .related-tools{margin-top:20px;}
  .related-tools h3{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;font-weight:700;}
  .related-list{display:flex;flex-wrap:wrap;gap:10px;}

  /* ---- result visualization components ---- */
  .tone-good{--tone-color:var(--ready);--tone-soft:var(--ready-soft);}
  .tone-warn{--tone-color:var(--live);--tone-soft:var(--live-soft);}
  .tone-bad{--tone-color:var(--danger);--tone-soft:var(--danger-soft);}
  .tone-info{--tone-color:var(--brand);--tone-soft:var(--brand-soft);}
  .tone-neutral{--tone-color:var(--muted);--tone-soft:var(--surface-3);}

  .status-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;background:var(--tone-soft);color:var(--tone-color);}

  .result-hero{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-top:16px;text-align:center;}
  .rh-value{font-size:42px;font-weight:800;letter-spacing:-0.03em;color:var(--tone-color);line-height:1.1;}
  .rh-unit{font-size:19px;font-weight:700;margin-left:5px;color:var(--ink-2);}
  .rh-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;font-weight:600;}
  .rh-sub{font-size:12.5px;color:var(--ink-2);margin-top:10px;}
  .result-hero .status-pill{margin-top:10px;}

  .range-gauge{margin-top:20px;}
  .gauge-track{position:relative;height:14px;border-radius:999px;overflow:visible;display:flex;background:var(--surface-3);}
  .gauge-seg{height:100%;background:var(--tone-color);}
  .gauge-seg:first-child{border-radius:999px 0 0 999px;}
  .gauge-seg:last-child{border-radius:0 999px 999px 0;}
  .gauge-marker{position:absolute;top:-5px;transform:translateX(-50%);width:2px;height:24px;background:var(--ink);}
  .gauge-marker::after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--ink);border:2px solid var(--surface-sunken);}
  .gauge-marker-val{position:absolute;top:-27px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;}
  .gauge-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;}
  .gauge-legend-item{font-size:11.5px;color:var(--muted);font-weight:600;position:relative;padding-left:15px;}
  .gauge-legend-item::before{content:'';position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:3px;background:var(--tone-color);}
  .gauge-legend-item.active{color:var(--ink);}

  .donut-chart{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:18px;}
  .donut-center-val{font-family:var(--font-sans);font-size:19px;font-weight:800;fill:var(--ink);}
  .donut-center-lbl{font-family:var(--font-sans);font-size:8.5px;fill:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
  .donut-legend{display:flex;flex-direction:column;gap:9px;}
  .donut-legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);}
  .donut-legend-item .dot{width:10px;height:10px;border-radius:3px;background:var(--tone-color);flex-shrink:0;}
  .donut-legend-item b{margin-left:auto;color:var(--ink);font-family:var(--font-mono);font-weight:700;padding-left:14px;}

  .comparison-bar{margin-top:18px;display:flex;flex-direction:column;gap:14px;}
  .cb-top{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:6px;}
  .cb-label{color:var(--muted);font-weight:600;}
  .cb-value{color:var(--ink);font-family:var(--font-mono);font-weight:700;white-space:nowrap;}
  .cb-track{height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
  .cb-fill{height:100%;background:var(--tone-color);border-radius:999px;transition:width .2s ease;}

  .file-card{display:flex;align-items:center;gap:12px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-top:10px;}
  .file-card-icon{color:var(--tone-color);flex-shrink:0;display:flex;}
  .file-card-info{flex:1;min-width:0;}
  .file-card-name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .file-card-meta{font-size:11.5px;color:var(--muted);margin-top:2px;font-family:var(--font-mono);}
  .file-card-status{flex-shrink:0;}

  .before-after{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
  .ba-pane{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken);}
  .ba-pane img{display:block;width:100%;height:auto;}
  .ba-tag{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.65);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.03em;}

  .unit-flow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
  .unit-flow .field{flex:1;min-width:170px;margin-bottom:0;}
  .flow-arrow{color:var(--muted);padding-bottom:12px;flex-shrink:0;}

  /* ---- CalculatorBoss-style two-panel composition ---- */
  .tool-actionbar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:12px 16px;margin-bottom:22px;font-size:13px;color:var(--ink-2);
  }
  .tool-actionbar .btn{flex-shrink:0;}

  .tool-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:4px;}
  .input-card,.result-card{border-radius:var(--radius);padding:24px;min-width:0;}
  .input-card{background:var(--surface-2);border:1px solid var(--border);}
  .input-card .btn-row{display:flex;gap:10px;margin-top:20px;}
  .result-card{
    background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand);
    box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--topbar-h) + 20px);
  }
  .card-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}

  .swap-btn{
    background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2);
    width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;transition:all .15s ease;
  }
  .swap-btn:hover{border-color:var(--brand);color:var(--brand);}

  .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px;}
  .metric-card{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
  .metric-card.tone-good,.metric-card.tone-warn,.metric-card.tone-bad,.metric-card.tone-info{border-left:3px solid var(--tone-color);}
  .mc-value{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--ink);}
  .mc-label{font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin-top:3px;}

  .data-table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);}
  table.data-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;}
  table.data-table th{background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:10px 14px;position:sticky;top:0;}
  table.data-table td{padding:9px 14px;border-top:1px solid var(--border);color:var(--ink-2);font-family:var(--font-mono);}
  table.data-table tr:first-child td{border-top:none;}

  .breakdown-list{margin-top:16px;border-top:1px solid var(--border);}
  .bd-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
  .bd-label{color:var(--muted);}
  .bd-value{color:var(--ink);font-family:var(--font-mono);font-weight:600;}

  .upload-area{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
    border:2px dashed var(--border-strong);border-radius:var(--radius);padding:36px 20px;cursor:pointer;
    background:var(--surface-sunken);transition:border-color .15s ease,background .15s ease;
  }
  .upload-area:hover,.upload-area.dragover{border-color:var(--brand);background:var(--brand-soft);}
  .upload-area .upload-icon{color:var(--muted);}
  .upload-area .upload-text{font-size:13px;color:var(--ink-2);}
  .upload-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

  .state-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;background:var(--tone-soft);color:var(--tone-color);margin-top:14px;}
  .state-banner .spin svg{animation:fyben-spin 0.8s linear infinite;}
  @keyframes fyben-spin{to{transform:rotate(360deg);}}

  .line-chart{margin-top:16px;}
  .line-chart svg{width:100%;height:auto;display:block;}
  .lc-area{fill:var(--brand-soft);stroke:none;}
  .lc-line{fill:none;stroke:var(--brand);stroke-width:2;}
  .lc-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;}

  .progress-track{height:8px;border-radius:999px;background:var(--surface-3);position:relative;margin-top:14px;overflow:visible;}
  .progress-fill{height:100%;border-radius:999px;background:var(--brand);}
  .progress-marker{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--brand);transform:translateX(-50%);}
  .progress-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;}

  @media print{
    .gauge-seg{border-right:1px solid #fff;}
    .gauge-seg:last-child{border-right:none;}
    .before-after,.donut-chart,.line-chart,.data-table-wrap{page-break-inside:avoid;}
    .tool-actionbar,.upload-area,.swap-btn,.input-card .btn-row{display:none !important;}
    .tool-cols{display:block;}
    .input-card,.result-card{border:1px solid #ccc;box-shadow:none;position:static;}
    .input-card{background:#f7f7f7;margin-bottom:16px;}
    input,select,textarea{border:none !important;background:transparent !important;padding:2px 0 !important;font-weight:600;box-shadow:none !important;}
  }

  @media(max-width:640px){
    .rh-value{font-size:34px;}
    .flow-arrow{display:none;}
    .donut-chart{justify-content:center;}
    .tool-cols{grid-template-columns:1fr;}
    .result-card{position:static;}
    .tool-actionbar{font-size:12.5px;}
  }

  @media print{
    :root{
      --bg:#fff !important; --surface:#fff !important; --surface-2:#f3f3f3 !important; --surface-3:#ececec !important; --surface-sunken:#f7f7f7 !important;
      --border:#999 !important; --border-strong:#666 !important; --ink:#000 !important; --ink-2:#222 !important; --muted:#555 !important; --faint:#777 !important;
      --brand:#000 !important; --brand-ink:#000 !important; --brand-soft:#eee !important; --ready:#000 !important; --ready-soft:#eee !important;
      --danger:#000 !important; --danger-soft:#eee !important; --live:#000 !important; --live-soft:#eee !important;
    }
    #topbar,#sidebar,#backdrop,.breadcrumb,.no-print,.related-tools,footer{display:none !important;}
    body{background:#fff;color:#000;}
    #main{padding:0;max-width:100%;}
    .workbench,.tool-content{box-shadow:none;border:1px solid #ccc;padding:20px;background:#fff;color:#000;}
    .workbench{margin-bottom:20px;}
    .print-header{display:block;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #000;font-family:Arial,Helvetica,sans-serif;color:#000;}
    .print-header b{font-size:16px;}
    .bin-label{background:#eee !important;color:#000 !important;}
  }

  /* ---- PDF export capture mode (mirrors @media print above, applied via
     class instead of a media query so html2canvas rasterizes the same
     print-safe look — see exportElementToPDF() in app.js) ---- */
  :root.pdf-export-mode{
    --bg:#fff !important; --surface:#fff !important; --surface-2:#f3f3f3 !important; --surface-3:#ececec !important; --surface-sunken:#f7f7f7 !important;
    --border:#999 !important; --border-strong:#666 !important; --ink:#000 !important; --ink-2:#222 !important; --muted:#555 !important; --faint:#777 !important;
    --brand:#000 !important; --brand-ink:#000 !important; --brand-soft:#eee !important; --ready:#000 !important; --ready-soft:#eee !important;
    --danger:#000 !important; --danger-soft:#eee !important; --live:#000 !important; --live-soft:#eee !important;
  }
  .pdf-export-mode .no-print{display:none !important;}
  .pdf-export-mode .tool-cols{display:block !important;}
  .pdf-export-mode .workbench{box-shadow:none !important;border:1px solid #ccc;background:#fff;color:#000;}
  .pdf-export-mode .print-header{display:block !important;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #000;font-family:Arial,Helvetica,sans-serif;color:#000;}
  .pdf-export-mode .print-header b{font-size:16px;}
  .pdf-export-mode .bin-label{background:#eee !important;color:#000 !important;}
  .pdf-export-mode input,.pdf-export-mode select,.pdf-export-mode textarea{border:none !important;background:transparent !important;padding:2px 0 !important;font-weight:600;box-shadow:none !important;}

  .field{margin-bottom:16px;}
  .field label{
    display:block;
    font-size:11.5px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:7px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  input[type=text],input[type=number],input[type=date],input[type=password],input[type=datetime-local],
  textarea,select{
    width:100%;
    background:var(--surface-sunken);
    border:1px solid var(--border);
    color:var(--ink);
    padding:10px 12px;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-family:inherit;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  }
  textarea{resize:vertical;min-height:100px;font-family:var(--font-mono);font-size:13px;}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface);}
  .row{display:flex;gap:12px;flex-wrap:wrap;}
  .row .field{flex:1;min-width:140px;}

  .btn{
    background:var(--btn-bg);
    color:var(--btn-text);
    border:none;
    padding:11px 20px;
    border-radius:var(--radius-sm);
    font-weight:600;
    font-size:13.5px;
    cursor:pointer;
    font-family:var(--font-sans);
    box-shadow:var(--shadow-sm);
    transition:background .12s ease,box-shadow .12s ease,transform .1s ease;
  }
  .btn:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-md);}
  .btn:active{transform:scale(.97);}
  .btn.ghost{
    background:transparent;
    color:var(--ink-2);
    border:1px solid var(--border-strong);
    font-weight:500;
    box-shadow:none;
  }
  .btn.ghost:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft);}
  .btn.small{padding:7px 14px;font-size:12.5px;}

  .output{
    margin-top:18px;
    background:var(--surface-sunken);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:16px 18px;
    font-family:var(--font-mono);
    font-size:13px;
    white-space:pre-wrap;
    word-break:break-word;
    min-height:20px;
    color:var(--ink);
  }
  .output.big{font-size:30px;font-family:var(--font-sans);font-weight:800;color:var(--brand-ink);white-space:normal;letter-spacing:-0.02em;}
  .stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
  .stat{background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 18px;min-width:96px;}
  .stat .n{font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--brand-ink);}
  .stat .l{font-size:10.5px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.04em;margin-top:3px;}

  ul.todo,ul.plain{list-style:none;margin:0;padding:0;}
  ul.todo li{
    display:flex;align-items:center;gap:10px;
    padding:10px 4px;border-bottom:1px solid var(--border);
  }
  ul.todo li.done span.txt{text-decoration:line-through;color:var(--muted);}
  ul.todo li button{margin-left:auto;background:none;border:none;color:var(--danger);cursor:pointer;font-size:12px;}
  ul.todo input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);}

  table.diff{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px;}
  table.diff td{padding:4px 8px;vertical-align:top;border-bottom:1px solid var(--border);}
  .add{background:rgba(52,211,153,0.14);}
  .rem{background:rgba(248,113,113,0.14);}

  .swatch-box{width:100%;height:70px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:12px;}
  .color-vals{display:flex;gap:10px;flex-wrap:wrap;}
  .color-vals .field{min-width:120px;}

  .strength-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:10px;}
  .strength-fill{height:100%;transition:width .2s;}

  #qrbox{margin-top:16px;background:#fff;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);display:inline-block;}

  @media(max-width:960px){
    #hamburger{display:flex;}
    #main-nav{display:none;}
    #sidebar{
      position:fixed;top:var(--topbar-h);left:0;height:calc(100vh - var(--topbar-h));width:300px;max-width:86vw;
      transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
      box-shadow:var(--shadow-lg);z-index:50;padding-top:20px;
    }
    #sidebar.open{transform:translateX(0);}
    .sidebar-close{display:flex;}
    #main{padding:24px 20px 64px;}
    .tool-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:640px){
    #main{padding:20px 16px 48px;}
    .workbench{padding:22px 20px;border-radius:var(--radius);}
    .stat{min-width:44%;flex:1;}
    .row{gap:10px;}
    .tool-grid{grid-template-columns:1fr;}
    #section-head h2{font-size:19px;}
  }
  @media(min-width:961px) and (max-width:1180px){
    .tool-grid{grid-template-columns:repeat(2,1fr);}
  }