/* ═══════════════════════════════════════════════════════════════
   FinancialDataTools.com — Global Design System
   Single source of truth for site-wide styles.
   Page-specific overrides go in each page's <style> block.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens (pulled from FDT logo palette) ── */
:root {
  --green:#22c55e;          /* primary brand green */
  --green-dark:#16a34a;
  --green-light:#4ade80;
  --yellow:#d4e800;         /* logo yellow-lime */
  --yellow-dark:#a8b800;
  --green-glow:rgba(34,197,94,.12);
  --yellow-glow:rgba(212,232,0,.10);
  --accent-gradient:linear-gradient(135deg, #d4e800 0%, #22c55e 55%, #15803d 100%);
  --accent-gradient-rev:linear-gradient(135deg, #15803d 0%, #22c55e 55%, #d4e800 100%);
  --bg:#080b08;
  --bg-card:#0e1210;
  --bg-raised:#141a14;
  --border:#1c2a1c;
  --border-lit:#27401f;
  --text:#e8f5e9;
  --text-muted:#6b8f6b;
  --radius:12px;
  --radius-lg:16px;
  --radius-full:20px;
  --ok:#22c55e;
  --red:#e05555;
  --warn:#f5a623;
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;background-image:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34,197,94,.05), transparent);padding-top:100px;}
a{color:var(--green);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Focus States ── */
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px;}
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

/* ── Skip Nav ── */
.skip-nav{position:absolute;top:-100%;left:0;background:var(--green);color:#fff;padding:.75rem 1.5rem;z-index:9999;font-size:.9rem;font-weight:600;border-radius:0 0 8px 0;transition:top .2s;}
.skip-nav:focus{top:0;outline:2px solid #fff;}

/* ── Cookie Banner ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(8,11,8,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;z-index:10000;font-size:.88rem;color:var(--text-muted);box-shadow:0 -4px 24px rgba(0,0,0,.4);}
.cookie-banner a{color:var(--green);}
.cookie-banner button{padding:.5rem 1.25rem;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;}
.cookie-accept{background:var(--green);color:#fff;}
.cookie-accept:hover{background:var(--green-dark);}
.cookie-decline{background:transparent;border:1px solid var(--border);color:var(--text-muted);}
.cookie-decline:hover{border-color:var(--green);color:var(--green);}

/* ── Header ── */
header{background:rgba(6,9,6,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:.5rem 0;position:fixed;top:0;left:0;right:0;z-index:100;}
.header-content{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:1.5rem;}
.logo-wrap{flex-shrink:0;display:flex;align-items:center;text-decoration:none;}
.fdt-search-bar{flex:1;max-width:600px;display:flex;align-items:center;gap:10px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:.6rem 1rem;cursor:pointer;color:var(--text-muted);font-size:.9rem;font-family:inherit;text-align:left;transition:border-color .2s;margin-left:2rem;}
.fdt-search-bar:hover{border-color:var(--green);}
.fdt-search-bar span{flex:1;}
.fdt-search-bar kbd{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-size:.75rem;color:var(--text-muted);font-family:inherit;}
.hc{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;}
.logo{height:60px;width:auto;}
.logo-text{font-size:1.1rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;}
.back-link,.bl{color:var(--text-muted);font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .85rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:all .2s;}
.back-link:hover,.bl:hover{border-color:var(--green);color:var(--green);text-decoration:none;}
.trust-badges{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto;}
.trust-badge{display:flex;align-items:center;gap:.35rem;padding:.3rem .7rem;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.1);border-radius:8px;font-size:.72rem;font-weight:500;color:var(--text-muted);white-space:nowrap;letter-spacing:.01em;}
.trust-badge .tb-icon{font-size:.8rem;}
@media(max-width:900px){.trust-badges{display:none;}}

/* ── Category Nav ── */
.cat-nav{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:.75rem;flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-pill{padding:.3rem .65rem;font-size:.72rem;font-weight:600;color:var(--text-muted);text-decoration:none;border-radius:6px;white-space:nowrap;transition:all .18s;letter-spacing:.01em;}
.cat-pill:hover{color:var(--text);background:var(--bg-raised);text-decoration:none;}
.cat-pill.active{color:var(--green);background:rgba(34,197,94,.08);text-decoration:none;}
@media(max-width:768px){.cat-nav{display:none;}}

/* ── Header Search Button ── */
.header-search-btn{display:inline-flex;align-items:center;gap:8px;padding:.4rem .9rem .4rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.header-search-btn:hover{border-color:var(--green);color:var(--text);}

/* ── Breadcrumb ── */
.breadcrumb,.bc{max-width:1100px;margin:1.25rem auto 0;padding:0 2rem;font-size:.82rem;color:var(--text-muted);}
.breadcrumb a,.bc a{color:var(--text-muted);transition:color .15s;}
.breadcrumb a:hover,.bc a:hover{color:var(--green);text-decoration:none;}

/* ── Layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:0 2rem 5rem;}

/* ── Hero ── */
.hero{padding:2rem 0 1.5rem;}
.hero h1{font-size:1.85rem;font-weight:800;margin-bottom:.5rem;line-height:1.25;background:linear-gradient(135deg,var(--text) 40%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{color:var(--text-muted);font-size:.95rem;max-width:680px;}

/* ── Hero Stats ── */
.hero-stats{display:inline-flex;align-items:center;gap:2rem;margin-top:1.75rem;padding:1.1rem 2.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);}
.stat-num{font-size:1.5rem;font-weight:700;color:var(--green);line-height:1;}
.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.hero-stat{display:flex;flex-direction:column;align-items:center;gap:.1rem;}
.divider{width:1px;height:2rem;background:var(--border);}
@media(max-width:600px){.hero-stats{padding:.9rem 1.2rem;gap:1.2rem;}.stat-num{font-size:1.2rem;}}

/* ── Tool Box ── */
.tool-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin:1.5rem 0;box-shadow:0 4px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03);}

/* ── Upload Area ── */
.upload-area{border:2px dashed transparent;border-radius:var(--radius-lg);padding:2.5rem;text-align:center;cursor:pointer;transition:all .25s ease;margin-bottom:1.5rem;background:linear-gradient(var(--bg-raised),var(--bg-raised)) padding-box,linear-gradient(135deg,var(--border-lit),var(--border)) border-box;}
.upload-area:hover,.upload-area.drag{background:linear-gradient(var(--bg-raised),var(--bg-raised)) padding-box,var(--accent-gradient) border-box;box-shadow:0 0 30px rgba(34,197,94,.06);}
.upload-icon{font-size:2rem;margin-bottom:.5rem;width:56px;height:56px;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;background:var(--green-glow);border-radius:14px;border:1px solid rgba(34,197,94,.12);}
.upload-area h3{margin-bottom:.4rem;font-size:1rem;}
.upload-area p{color:var(--text-muted);font-size:.85rem;}
input[type=file]{display:none;}

/* ── Buttons ── */
.btn{width:100%;padding:.85rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 2px 12px rgba(34,197,94,.2);letter-spacing:.01em;}
.btn:hover{box-shadow:0 4px 20px rgba(34,197,94,.3);transform:translateY(-1px);}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(34,197,94,.15);}
.btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none;}
.btn.ghost{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);box-shadow:none;}
.btn.ghost:hover{border-color:var(--green);color:var(--green);box-shadow:none;transform:none;}
.btn-row{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;}
.btn-row .btn{width:auto;flex:1;min-width:100px;padding:.7rem 1rem;font-size:.9rem;}
.dl-btn{display:inline-block;padding:.8rem 2rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;text-decoration:none;box-shadow:0 2px 12px rgba(34,197,94,.2);}
.dl-btn:hover{box-shadow:0 4px 20px rgba(34,197,94,.3);transform:translateY(-1px);text-decoration:none;}

/* ── Category Index Grid ── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:2rem;}
.cat-tile{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.35rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:all .25s ease;position:relative;overflow:hidden;}
.cat-tile:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 4px 20px rgba(34,197,94,.06);text-decoration:none;}
.cat-tile div{display:flex;align-items:center;gap:.6rem;}
.cat-tile strong{font-size:.95rem;font-weight:700;}
.cat-tile-icon{font-size:1.6rem;margin-bottom:.15rem;}
.cat-tile-count{font-size:.72rem;color:var(--text-muted);background:var(--bg-raised);padding:.15rem .5rem;border-radius:10px;font-weight:500;}
.cat-tile-desc{font-size:.78rem;color:var(--text-muted);line-height:1.4;}
.cat-tile-arrow{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.9rem;opacity:0;transition:all .2s;}
.cat-tile:hover .cat-tile-arrow{opacity:1;right:1rem;color:var(--green);}
@media(max-width:768px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.cat-grid{grid-template-columns:1fr;}}

/* ── Tool Cards (inside category pages) ── */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem;}
.tool-card{display:block;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;transition:border-color .2s,transform .2s;text-decoration:none;}
.tool-card:hover{border-color:var(--green);transform:translateY(-2px);text-decoration:none;}
.tool-card h3{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.3rem;}
.tool-card p{font-size:.8rem;color:var(--text-muted);line-height:1.4;}

/* ── Category page ── */
.category{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:border-color .25s;display:flex;flex-direction:column;gap:1.5rem;}
.category:hover{border-color:var(--border-lit);}
.cat-header{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap;}
.cat-header h2{font-size:1.15rem;font-weight:600;color:var(--green);display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.learn-link{font-size:.85rem;color:var(--text-muted);border:1px solid var(--border);border-radius:20px;padding:.25rem .75rem;transition:border-color .2s,color .2s;white-space:nowrap;}
.learn-link:hover{border-color:var(--green);color:var(--green);text-decoration:none;}
.cat-intro{font-size:.92rem;color:var(--text-muted);line-height:1.75;margin:.25rem 0 0;}

/* ── Popular Section ── */
.popular-section{margin-top:2.5rem;}

/* ── Tag ── */
.tag{display:inline-block;padding:.2rem .65rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:6px;font-size:.72rem;font-weight:600;color:var(--green);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem;}

/* ── Progress ── */
.progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:1rem 0;display:none;}
.progress-fill{height:100%;background:var(--accent-gradient);width:0%;transition:width .3s;}

/* ── Status Bar ── */
.status-bar{display:none;padding:.65rem 1rem;border-radius:var(--radius);font-size:.85rem;margin-top:.75rem;}
.status-bar.show{display:block;}
.status-bar.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#4ade80;}
.status-bar.error{background:rgba(224,85,85,.08);border:1px solid rgba(224,85,85,.2);color:#e05555;}

/* ── Options ── */
.options{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.5rem;}
.opt-row{margin-bottom:.85rem;}
.opt-row:last-child{margin:0;}
.opt-row label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.35rem;}
.opt-row select,.opt-row input[type=number],.opt-row input[type=text]{width:100%;padding:.5rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;transition:border-color .2s;}
.opt-row select:focus,.opt-row input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow);}

/* ── Callout / CTA ── */
.callout{background:var(--bg-card);border:1px solid var(--border-lit);border-left:3px solid var(--green);border-radius:var(--radius);padding:1rem 1.25rem;margin:1.5rem 0;}
.callout p{margin:0;font-size:.93rem;}
.cta{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.cta p{margin:0;font-size:.93rem;color:var(--text-muted);}

/* ── TOC ── */
.toc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;margin:1.5rem 0;}
.toc h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.65rem;margin-top:0;}
.toc ol{margin:0;padding-left:1.2rem;}
.toc li{margin-bottom:.3rem;font-size:.88rem;}

/* ── Related Grid ── */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-top:1rem;}
.rel-link{display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text-muted);transition:.15s;}
.rel-link:hover{border-color:var(--green);color:var(--green);text-decoration:none;}

/* ── Blog prose ── */
h1{font-size:2rem;font-weight:800;line-height:1.25;margin-bottom:.6rem;}
.byline{font-size:.88rem;color:var(--text-muted);margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
h2{font-size:1.35rem;font-weight:700;margin:2.5rem 0 .75rem;}
h3{font-size:1.05rem;font-weight:600;margin:1.75rem 0 .5rem;color:var(--green);}
p{color:var(--text-muted);margin-bottom:1.1rem;font-size:.97rem;}
ul,ol{color:var(--text-muted);padding-left:1.5rem;margin-bottom:1.1rem;}
li{margin-bottom:.45rem;font-size:.97rem;}
strong{color:var(--text);}
code{background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:.15em .4em;font-family:'JetBrains Mono',monospace;font-size:.86em;color:var(--green);}
pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;overflow-x:auto;margin:1.25rem 0;}
pre code{background:none;border:none;padding:0;color:var(--text);font-size:.88rem;line-height:1.65;}
blockquote{border-left:3px solid var(--green);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--bg-card);border-radius:0 var(--radius) var(--radius) 0;}
blockquote p{margin:0;font-style:italic;}
table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;}
th{text-align:left;padding:.6rem .9rem;border-bottom:2px solid var(--border);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-raised);}
td{padding:.6rem .9rem;border-bottom:1px solid var(--border);color:var(--text-muted);}
td:first-child{color:var(--text);}
tr:last-child td{border-bottom:none;}

/* ── Author Bio ── */
.author-bio{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem 2rem;margin:3rem 0 2rem;}
.author-bio-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.author-bio-avatar{width:52px;height:52px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:#fff;flex-shrink:0;}
.author-bio-name{font-size:1.1rem;font-weight:700;color:var(--text);}
.author-bio-role{font-size:.85rem;color:var(--text-muted);}
.author-bio p{font-size:.92rem;color:var(--text-muted);margin-bottom:.85rem;line-height:1.7;}

/* ── Trust Bar ── */
.trust-bar{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem;padding:.65rem 0;font-size:.78rem;color:var(--text-muted);opacity:.7;}
.trust-bar span{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}

/* ── Footer ── */
footer{background:#050705;border-top:1px solid var(--border);padding:3rem 2rem 2rem;margin-top:4rem;}
.footer-wrap{max-width:1100px;margin:0 auto;}
.footer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-col h3{color:var(--green);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:.3rem;}
.footer-col a{color:var(--text-muted);font-size:.85rem;display:block;padding:.1rem 0;transition:color .15s;}
.footer-col a:hover{color:var(--green);text-decoration:none;}
.footer-bottom{padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;color:var(--text-muted);font-size:.82rem;}
.footer-links{display:flex;gap:1.2rem;font-size:.82rem;}
.footer-links a{color:var(--text-muted);transition:color .15s;}
.footer-links a:hover{color:var(--green);text-decoration:none;}

/* ── 404 / Utility ── */
.center-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:3rem 2rem;}
.center-hero h1{font-size:5rem;font-weight:900;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;}

/* ── Responsive ── */
@media(max-width:768px){
  .wrap{padding:0 1rem 4rem;}
  .hero h1{font-size:1.45rem;}
  .breadcrumb,.bc{padding:0 1rem;}
  .tools-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .tools-grid{grid-template-columns:1fr;}
}

/* AMAZON-STYLE TWO-ROW HEADER */

/* ── Body offset for 2-row header ── */
body { padding-top: 104px; }

/* ── Header row 1 already handled; meatball btn ── */
.meatball-btn {
  width: 44px; height: 44px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .2s, background .2s;
  margin-right: .75rem;
}
.meatball-btn:hover { border-color: var(--yellow); background: rgba(212,232,0,.06); }
.meatball-btn span {
  display: block; width: 4px; height: 4px;
  background: var(--text-muted); border-radius: 50%;
  transition: background .2s;
}
.meatball-btn:hover span { background: var(--yellow); }

/* ── Category bar (row 2) ── */
.header-cat-bar {
  background: rgba(14,18,16,.98);
  border-bottom: 1px solid var(--border);
  position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
  display: flex; align-items: center; gap: 0;
  padding: 0 2rem;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.header-cat-bar::-webkit-scrollbar { display: none; }
.header-cat-bar a {
  padding: .55rem .9rem;
  font-size: .78rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  white-space: nowrap; letter-spacing: .01em;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.header-cat-bar a:hover { color: var(--text); border-bottom-color: var(--green); text-decoration: none; }
.header-cat-bar a.active { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ── Meatball overlay backdrop ── */
.meatball-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
.meatball-overlay.open { display: block; }

/* ── Meatball panel ── */
.meatball-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  padding: 1.5rem;
}
.meatball-overlay.open .meatball-panel { transform: translateX(0); }

.meatball-close {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.meatball-close-btn {
  background: var(--bg-raised); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
  width: 36px; height: 36px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.meatball-close-btn:hover { border-color: var(--green); color: var(--green); }

.meatball-section { margin-bottom: 1.5rem; }
.meatball-section-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  padding: .4rem 0; border-bottom: 1px solid var(--border);
  margin-bottom: .6rem;
}
.meatball-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
}
.meatball-links a {
  font-size: .78rem; color: var(--text-muted); text-decoration: none;
  padding: .3rem .5rem; border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meatball-links a:hover { background: var(--bg-raised); color: var(--green); text-decoration: none; }

@media(max-width:768px){
  .header-cat-bar { top: 60px; padding: 0 1rem; }
  .meatball-panel { width: 100vw; }
}