/* =============================================
   Font Subsetter Tool - style.css
   Prefix: fst-
   ============================================= */

:root {
  --fst-primary: #8b5cf6;
  --fst-primary-light: #f5f3ff;
  --fst-primary-dark: #7c3aed;
  --fst-accent: #06b6d4;
  --fst-bg: #f8fafc;
  --fst-card: #ffffff;
  --fst-border: #e2e8f0;
  --fst-text: #1e293b;
  --fst-text-muted: #64748b;
  --fst-radius: 12px;
  --fst-radius-sm: 8px;
  --fst-shadow: 0 1px 3px rgba(0,0,0,.08);
  --fst-shadow-lg: 0 4px 16px rgba(0,0,0,.10);
  --fst-transition: .2s ease;
  --fst-font: 'Inter', 'Noto Sans JP', sans-serif;
}

/* ─── Anchor Nav ─── */
.fst-anchor-nav { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px; }
.fst-anchor-link { padding:6px 14px;border-radius:20px;background:var(--fst-primary-light);color:var(--fst-primary);font-size:.82rem;font-weight:600;text-decoration:none;transition:var(--fst-transition);white-space:nowrap; }
.fst-anchor-link:hover { background:var(--fst-primary);color:#fff; }

/* ─── Security Banner ─── */
.fst-security { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px; }
.fst-security-item { display:flex;align-items:center;gap:8px;background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius-sm);padding:10px 14px;flex:1;min-width:160px;margin-top:0!important; }
.fst-security-item > span { font-size:1.4rem; }
.fst-security-item strong { font-size:.82rem;color:var(--fst-text);display:block;margin:0!important; }
.fst-security-item p { font-size:.72rem;color:var(--fst-text-muted);margin:0!important; }
.fst-security > p, .fst-security > br { display:none!important; }
.fst-security-item > div > p { display:block!important; }

/* ─── Upload ─── */
.fst-upload-area { border:2px dashed var(--fst-border);border-radius:var(--fst-radius);padding:32px;text-align:center;cursor:pointer;transition:var(--fst-transition);color:var(--fst-text-muted);font-size:.85rem; }
.fst-upload-area:hover, .fst-upload-area.dragover { border-color:var(--fst-primary);background:var(--fst-primary-light);color:var(--fst-primary); }
.fst-upload-area .material-icons { font-size:36px;display:block;margin-bottom:8px; }

/* ─── Font Info ─── */
.fst-font-info { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:12px;background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius);margin-top:12px; }
.fst-font-info > p, .fst-font-info > br { display:none!important; }
.fst-info-item { text-align:center; }
.fst-info-item * { margin-top:0!important; }
.fst-info-label { font-size:.7rem;color:var(--fst-text-muted);display:block;margin-bottom:2px; }
.fst-info-val { font-size:.95rem;font-weight:700;color:var(--fst-text); }

/* ─── Fields ─── */
.fst-field { margin-bottom:14px; }
.fst-field * { margin-top:0!important; }
.fst-label { display:block;font-size:.78rem;font-weight:600;color:var(--fst-text);margin-bottom:6px!important; }
.fst-input, .fst-select, .fst-textarea { width:100%;padding:8px 12px;border:1px solid var(--fst-border);border-radius:var(--fst-radius-sm);font-size:.85rem;color:var(--fst-text);background:var(--fst-card);transition:var(--fst-transition);font-family:var(--fst-font);box-sizing:border-box; }
.fst-textarea { min-height:80px;resize:vertical;font-family:var(--fst-font); }
.fst-input:focus, .fst-select:focus, .fst-textarea:focus { outline:none;border-color:var(--fst-primary);box-shadow:0 0 0 3px rgba(139,92,246,.15); }

/* ─── Preset Buttons ─── */
.fst-presets { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px; }
.fst-presets > p, .fst-presets > br { display:none!important; }
.fst-preset-btn { padding:4px 12px;border:1px solid var(--fst-border);border-radius:20px;background:var(--fst-card);color:var(--fst-text-muted);cursor:pointer;font-size:.75rem;transition:var(--fst-transition);font-family:var(--fst-font); }
.fst-preset-btn:hover { border-color:var(--fst-primary);color:var(--fst-primary); }
.fst-preset-btn.active { background:var(--fst-primary);color:#fff;border-color:var(--fst-primary); }

/* ─── Preview ─── */
.fst-preview { background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius);padding:20px;min-height:120px; }
.fst-preview-text { font-size:28px;line-height:1.6;word-wrap:break-word; }
.fst-slider-row { display:flex;align-items:center;gap:10px; }
.fst-slider-row * { margin-top:0!important; }
.fst-slider { flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--fst-border);outline:none; }
.fst-slider::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--fst-primary);cursor:pointer; }
.fst-slider-val { min-width:50px;text-align:right;font-size:.8rem;color:var(--fst-text-muted);font-weight:600; }

/* ─── Results ─── */
.fst-results { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0; }
.fst-results > p, .fst-results > br { display:none!important; }
.fst-result-card { background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius);padding:16px;text-align:center; }
.fst-result-card * { margin-top:0!important; }
.fst-result-label { font-size:.72rem;color:var(--fst-text-muted);margin-bottom:4px!important; }
.fst-result-val { font-size:1.2rem;font-weight:700;color:var(--fst-primary); }
.fst-result-val.reduction { color:#10b981; }

/* ─── Buttons ─── */
.fst-btn { padding:10px 20px;border-radius:var(--fst-radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:var(--fst-transition);display:inline-flex;align-items:center;gap:6px;font-family:var(--fst-font); }
.fst-btn--primary { background:var(--fst-primary);color:#fff; }
.fst-btn--primary:hover { background:var(--fst-primary-dark); }
.fst-btn--secondary { background:var(--fst-card);color:var(--fst-primary);border:1px solid var(--fst-primary); }
.fst-btn--secondary:hover { background:var(--fst-primary-light); }
.fst-btn--sm { padding:6px 14px;font-size:.78rem; }
.fst-output-row { display:flex;gap:10px;flex-wrap:wrap;margin-top:12px; }
.fst-output-row > p, .fst-output-row > br { display:none!important; }

/* ─── Code Block ─── */
.fst-code-block { background:#1e293b;color:#e2e8f0;padding:16px;border-radius:var(--fst-radius-sm);font-size:.78rem;font-family:'JetBrains Mono','Courier New',monospace;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all;position:relative; }
.fst-code-copy { position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:4px;background:rgba(255,255,255,.12);color:#e2e8f0;border:none;cursor:pointer;font-size:.72rem;transition:var(--fst-transition); }
.fst-code-copy:hover { background:rgba(255,255,255,.25); }

/* ─── Toast ─── */
.fst-toast { position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:#1e293b;color:#fff;padding:12px 28px;border-radius:30px;font-size:.85rem;font-weight:600;opacity:0;transition:all .3s ease;z-index:9999;pointer-events:none; }
.fst-toast.show { transform:translateX(-50%) translateY(0);opacity:1; }

/* ─── SEO ─── */
.fst-steps { display:flex;gap:16px;flex-wrap:wrap;margin:12px 0; }
.fst-steps > p, .fst-steps > br { display:none!important; }
.textContent .fst-steps { margin-top:12px!important; }
.fst-step { flex:1;min-width:180px;background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius);padding:16px;margin-top:0!important; }
.fst-step * { margin-top:0!important; }
.fst-step h4 { font-size:.9rem;color:var(--fst-text);margin-bottom:6px!important; }
.fst-step p { font-size:.8rem;color:var(--fst-text-muted); }

.fst-faq { margin:0;padding:0; }
.fst-faq dt { font-weight:700;font-size:.9rem;color:var(--fst-text);margin-top:16px!important; }
.fst-faq dd { font-size:.85rem;color:var(--fst-text-muted);margin:4px 0 0 0!important;padding:0!important; }

.fst-use-cases { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.fst-use-cases > p, .fst-use-cases > br { display:none!important; }
.fst-use-case { display:flex;gap:10px;background:var(--fst-card);border:1px solid var(--fst-border);border-radius:var(--fst-radius);padding:14px;margin-top:0!important; }
.fst-use-case * { margin-top:0!important; }
.fst-use-case-icon { font-size:1.5rem;flex-shrink:0; }
.fst-use-case h4 { font-size:.85rem;color:var(--fst-text);margin-bottom:4px!important; }
.fst-use-case p { font-size:.78rem;color:var(--fst-text-muted); }

.fst-related-tools { display:flex;gap:8px;flex-wrap:wrap; }
.fst-related-tools > p, .fst-related-tools > br { display:none!important; }

.fst-compare-table { width:100%;border-collapse:collapse;margin:12px 0;font-size:.82rem; }
.fst-compare-table th, .fst-compare-table td { padding:8px 12px;border:1px solid var(--fst-border);text-align:left; }
.fst-compare-table th { background:var(--fst-primary-light);font-weight:600;color:var(--fst-text); }

/* ─── Responsive ─── */
@media (max-width:640px) {
  .fst-use-cases { grid-template-columns:1fr; }
  .fst-security { flex-direction:column; }
  .fst-font-info { grid-template-columns:repeat(2,1fr); }
  .fst-output-row { flex-direction:column; }
  .fst-btn { width:100%;justify-content:center; }
}