/* The Tool Bakery — Fraction → Chart Visualizer (Modern theme) */
#ttb-fv{
  --fv-accent:#3b82f6;
  --fv-accent-2:#60a5fa;
  --fv-bg:#f7f8fb;
  --fv-ink:#0b1220;
  --fv-muted:#6b7280;
  --fv-card:#ffffff;
  --fv-border:#e5e7eb;
  --fv-grid:#e5e7eb;
  background:var(--fv-bg);
  color:var(--fv-ink);
  padding:20px;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05), 0 6px 20px rgba(0,0,0,0.04);
  border:1px solid var(--fv-border);
}

#ttb-fv.theme-contrast{
  --fv-accent:#111;
  --fv-accent-2:#444;
  --fv-bg:#fff;
  --fv-ink:#000;
  --fv-muted:#222;
  --fv-border:#333;
  --fv-grid:#555;
}

#ttb-fv.theme-cb{
  --fv-accent:#0072B2;
  --fv-accent-2:#009E73;
  --fv-bg:#f7f8fb;
  --fv-ink:#0b1220;
  --fv-muted:#6b7280;
  --fv-card:#ffffff;
  --fv-border:#e5e7eb;
  --fv-grid:#e5e7eb;
}

/* Header */
#ttb-fv .ttb-fv-header{margin-bottom:14px}
#ttb-fv .ttb-fv-title{font-size:22px;margin:0 0 4px}
#ttb-fv .ttb-fv-sub{margin:0;color:var(--fv-muted);font-size:14px}

/* Controls */
#ttb-fv .ttb-fv-controls{display:grid;gap:14px;margin-top:8px}
#ttb-fv .ttb-fv-field label{display:block;font-weight:600;margin-bottom:6px}
#ttb-fv .ttb-fv-field input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--fv-border);border-radius:12px;background:#fff;color:var(--fv-ink)}
#ttb-fv .ttb-fv-help{display:block;color:var(--fv-muted);font-size:12px;margin-top:6px}
#ttb-fv .ttb-fv-error{color:#b91c1c;font-weight:600;margin-top:6px}

#ttb-fv .ttb-fv-grid-opts{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
#ttb-fv .ttb-fv-check{display:flex;gap:8px;align-items:center;font-size:14px}
#ttb-fv .ttb-fv-num{display:flex;gap:8px;align-items:center}
#ttb-fv .ttb-fv-num input{width:88px;padding:8px;border:1px solid var(--fv-border);border-radius:10px}
#ttb-fv .ttb-fv-select{display:flex;gap:8px;align-items:center}
#ttb-fv .ttb-fv-select select{padding:8px;border:1px solid var(--fv-border);border-radius:10px;background:#fff}

#ttb-fv .ttb-fv-actions{display:flex;gap:10px}
#ttb-fv .ttb-fv-btn{
  background:var(--fv-accent);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,0.06);
}
#ttb-fv .ttb-fv-btn.ttb-fv-secondary{
  background:#fff;color:var(--fv-ink);border:1px solid var(--fv-border);
}
#ttb-fv .ttb-fv-btn:hover{filter:brightness(0.95)}

/* Results */
#ttb-fv .ttb-fv-results{margin-top:16px;display:block}
#ttb-fv .ttb-fv-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px
}
#ttb-fv .ttb-fv-stat{background:var(--fv-card);border:1px solid var(--fv-border);border-radius:12px;padding:10px 12px}
#ttb-fv .ttb-fv-stat-label{font-size:12px;color:var(--fv-muted);margin-bottom:4px}
#ttb-fv .ttb-fv-stat-value{font-weight:700}

#ttb-fv .ttb-fv-capture{display:grid;gap:14px}
#ttb-fv .ttb-fv-capture-title{margin:4px 0 0 4px;font-size:16px;color:var(--fv-muted)}

#ttb-fv .ttb-fv-card{background:var(--fv-card);border:1px solid var(--fv-border);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
#ttb-fv .ttb-fv-card-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--fv-border)}
#ttb-fv .ttb-fv-card-head h4{margin:0;font-size:14px}
#ttb-fv .ttb-fv-card-body{padding:10px;display:flex;justify-content:center;align-items:center}

#ttb-fv svg{width:100%;height:auto;display:block}

#ttb-fv .ttb-fv-badge{
  display:inline-block;
  background:#fff;
  color:var(--fv-ink);
  border:1px solid var(--fv-border);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
}
#ttb-fv .ttb-fv-badge.mini{padding:2px 8px;font-size:11px}
#ttb-fv .ttb-fv-badge.mini.more{background:var(--fv-accent);border-color:var(--fv-accent);color:#fff}

#ttb-fv .ttb-fv-badges{display:flex;gap:6px;align-items:center}

/* SVG style tokens (also duplicated minimally in export HTML for print/pdf) */
#ttb-fv .ttb-fv-pie-bg{fill:#fff;stroke:var(--fv-grid);stroke-width:2}
#ttb-fv .ttb-fv-pie-fill{fill:var(--fv-accent)}
#ttb-fv .ttb-fv-pie-label{fill:var(--fv-ink);font-size:18px;font-weight:700}
#ttb-fv .ttb-fv-bar-bg{fill:#fff;stroke:var(--fv-grid);stroke-width:2}
#ttb-fv .ttb-fv-bar-grid{stroke:var(--fv-grid);stroke-width:1}
#ttb-fv .ttb-fv-bar-fill{fill:var(--fv-accent)}
#ttb-fv .ttb-fv-line{stroke:var(--fv-ink);stroke-width:3}
#ttb-fv .ttb-fv-tick{stroke:var(--fv-ink);stroke-width:2}
#ttb-fv .ttb-fv-subtick{stroke:var(--fv-muted);stroke-width:1}
#ttb-fv .ttb-fv-tick-label{fill:var(--fv-ink);font-size:12px}
#ttb-fv .ttb-fv-marker{fill:var(--fv-accent-2);stroke:#fff;stroke-width:2}

/* Export row */
#ttb-fv .ttb-fv-export-row{display:flex;gap:10px;justify-content:flex-start;margin-top:10px}

/* Hide export UI during canvas capture */
#ttb-fv.ttb-fv-exporting .ttb-fv-export-row{visibility:hidden}

/* Responsive */
@media (max-width: 900px){
  #ttb-fv .ttb-fv-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  #ttb-fv .ttb-fv-stats{grid-template-columns:1fr}
}

#ttb-fv .ttb-fv-bar-label {
  fill: var(--fv-ink);
  font-size: 14px;
  font-weight: 600;
}