/* =============================================
   Responsive Image Generator - style.css
   Prefix: rig-
   ============================================= */

:root {
  --rig-primary: #0284c7;
  --rig-primary-light: #f0f9ff;
  --rig-primary-dark: #0369a1;
  --rig-accent: #f59e0b;
  --rig-bg: #f8fafc;
  --rig-card: #ffffff;
  --rig-border: #e2e8f0;
  --rig-text: #1e293b;
  --rig-text-muted: #64748b;
  --rig-radius: 12px;
  --rig-radius-sm: 8px;
  --rig-shadow: 0 1px 3px rgba(0,0,0,.08);
  --rig-transition: .2s ease;
  --rig-font: 'Inter', 'Noto Sans JP', sans-serif;
}

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

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

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

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

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

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

.rig-breakpoints { display:flex;flex-direction:column;gap:8px; }
.rig-breakpoints > p, .rig-breakpoints > br { display:none!important; }
.rig-bp-row { display:flex;gap:8px;align-items:center; }
.rig-bp-row * { margin-top:0!important; }
.rig-bp-row input { flex:1;padding:6px 10px;border:1px solid var(--rig-border);border-radius:var(--rig-radius-sm);font-size:.82rem;box-sizing:border-box; }
.rig-bp-row .rig-bp-remove { width:28px;height:28px;border:none;background:#fee2e2;color:#ef4444;border-radius:4px;cursor:pointer;font-size:.85rem; }
.rig-bp-add { padding:6px 12px;border:1px dashed var(--rig-border);border-radius:var(--rig-radius-sm);background:none;cursor:pointer;color:var(--rig-text-muted);font-size:.8rem;transition:var(--rig-transition); }
.rig-bp-add:hover { border-color:var(--rig-primary);color:var(--rig-primary); }

.rig-preview-grid { display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;justify-content:center; }
.rig-preview-grid > p, .rig-preview-grid > br { display:none!important; }
.rig-preview-item { text-align:center; }
.rig-preview-item * { margin-top:0!important; }
.rig-preview-item img, .rig-preview-item canvas { max-width:100%;border:1px solid var(--rig-border);border-radius:var(--rig-radius-sm);display:block; }
.rig-preview-label { font-size:.7rem;color:var(--rig-text-muted);margin-top:4px!important; }

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

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

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

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

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

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

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

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

@media (max-width:640px) {
  .rig-use-cases { grid-template-columns:1fr; }
  .rig-security { flex-direction:column; }
  .rig-row { flex-direction:column; }
  .rig-output-row { flex-direction:column; }
  .rig-btn { width:100%;justify-content:center; }
  .rig-preview-grid { flex-direction:column;align-items:center; }
}