/* =============================================
   Sprite Animation Generator - style.css
   Prefix: sag-
   ============================================= */

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

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

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

/* ─── wpautop fix ─── */
.sag-container > p, .sag-container > br { display:none!important; }

/* ─── Mode Tabs ─── */
.sag-mode-tabs { display:flex;gap:0;border-bottom:2px solid var(--sag-border);margin-bottom:16px; }
.sag-mode-tabs > p, .sag-mode-tabs > br { display:none!important; }
.sag-mode-tab { padding:10px 20px;border:none;background:none;color:var(--sag-text-muted);font-size:.85rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--sag-transition);white-space:nowrap;font-family:var(--sag-font); }
.sag-mode-tab:hover { color:var(--sag-text); }
.sag-mode-tab.active { color:var(--sag-primary);border-bottom-color:var(--sag-primary); }
.sag-mode-panel { display:none; }
.sag-mode-panel.active { display:block; }

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

/* ─── Frame Settings ─── */
.sag-field { margin-bottom:14px; }
.sag-field * { margin-top:0!important; }
.sag-label { display:block;font-size:.78rem;font-weight:600;color:var(--sag-text);margin-bottom:6px!important; }
.sag-input, .sag-select { width:100%;padding:8px 12px;border:1px solid var(--sag-border);border-radius:var(--sag-radius-sm);font-size:.85rem;color:var(--sag-text);background:var(--sag-card);transition:var(--sag-transition);font-family:var(--sag-font);box-sizing:border-box; }
.sag-input:focus, .sag-select:focus { outline:none;border-color:var(--sag-primary);box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.sag-slider-row { display:flex;align-items:center;gap:10px; }
.sag-slider-row * { margin-top:0!important; }
.sag-slider { flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--sag-border);outline:none; }
.sag-slider::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sag-primary);cursor:pointer; }
.sag-slider-val { min-width:50px;text-align:right;font-size:.8rem;color:var(--sag-text-muted);font-weight:600; }

.sag-row { display:flex;gap:12px; }
.sag-col { flex:1; }

/* ─── Preview Area ─── */
.sag-preview-wrap { display:flex;flex-direction:column;align-items:center;gap:12px; }
.sag-preview-stage { background:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50%/16px 16px;border:1px solid var(--sag-border);border-radius:var(--sag-radius);padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative;overflow:hidden; }
.sag-sprite-preview { background-repeat:no-repeat; }
.sag-preview-controls { display:flex;gap:8px;align-items:center; }
.sag-preview-controls > p, .sag-preview-controls > br { display:none!important; }

.sag-bg-options { display:flex;gap:4px; }
.sag-bg-options > p, .sag-bg-options > br { display:none!important; }
.sag-bg-btn { padding:4px 10px;border:1px solid var(--sag-border);border-radius:4px;background:var(--sag-card);color:var(--sag-text-muted);cursor:pointer;font-size:.72rem;transition:var(--sag-transition); }
.sag-bg-btn.active { background:var(--sag-primary);color:#fff;border-color:var(--sag-primary); }

/* ─── Timeline ─── */
.sag-timeline { display:flex;gap:6px;flex-wrap:wrap;padding:12px;background:var(--sag-card);border:1px solid var(--sag-border);border-radius:var(--sag-radius);overflow-x:auto; }
.sag-timeline > p, .sag-timeline > br { display:none!important; }
.sag-frame-thumb { width:64px;height:64px;border:2px solid var(--sag-border);border-radius:6px;overflow:hidden;cursor:pointer;position:relative;transition:var(--sag-transition);flex-shrink:0;background:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50%/8px 8px; }
.sag-frame-thumb.active { border-color:var(--sag-primary); }
.sag-frame-thumb.disabled { opacity:.3; }
.sag-frame-thumb canvas { width:100%;height:100%;display:block; }
.sag-frame-num { position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:.6rem;text-align:center;padding:1px; }
.sag-frame-toggle { position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:3px;background:rgba(0,0,0,.4);color:#fff;border:none;cursor:pointer;font-size:.65rem;display:flex;align-items:center;justify-content:center;line-height:1; }

/* ─── Code Block ─── */
.sag-code-block { background:#1e293b;color:#e2e8f0;padding:16px;border-radius:var(--sag-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; }
.sag-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(--sag-transition); }
.sag-code-copy:hover { background:rgba(255,255,255,.25); }

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

/* ─── Tabs ─── */
.sag-tabs { display:flex;gap:0;border-bottom:2px solid var(--sag-border);margin-bottom:16px; }
.sag-tabs > p, .sag-tabs > br { display:none!important; }
.sag-tab-btn { padding:8px 16px;border:none;background:none;color:var(--sag-text-muted);font-size:.82rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--sag-transition);font-family:var(--sag-font); }
.sag-tab-btn.active { color:var(--sag-primary);border-bottom-color:var(--sag-primary); }
.sag-tab-panel { display:none; }
.sag-tab-panel.active { display:block; }

/* ─── Toast ─── */
.sag-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; }
.sag-toast.show { transform:translateX(-50%) translateY(0);opacity:1; }

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

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

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

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

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

/* ─── Responsive ─── */
@media (max-width:640px) {
  .sag-use-cases { grid-template-columns:1fr; }
  .sag-security { flex-direction:column; }
  .sag-row { flex-direction:column; }
  .sag-output-row { flex-direction:column; }
  .sag-btn { width:100%;justify-content:center; }
  .sag-mode-tabs { overflow-x:auto;-webkit-overflow-scrolling:touch; }
}