/* ========================================
   AI Story Club — Common Components CSS
   Source: public/static/css/common.css
   Generated: 2026-06-19
   ======================================== */

/* --- AI 生成页组件 (generate.php) --- */
.ai-generate-section { animation:fadeIn 0.5s ease-out; }
.generate-card { background:white;border-radius:20px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:2px solid transparent;transition:all 0.3s; }
.generate-card:hover { border-color:var(--coral);box-shadow:0 8px 32px rgba(255,107,74,0.12); }
[data-theme="dark"] .generate-card { background:var(--gray-800);border-color:var(--gray-700); }
.g-input { width:100%;padding:12px 16px;border:2px solid var(--gray-200);border-radius:12px;font-size:0.95rem;transition:all 0.2s;background:white;color:var(--text);box-sizing:border-box; }
.g-input:focus { outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,74,0.1); }
[data-theme="dark"] .g-input { background:var(--gray-700);border-color:var(--gray-600);color:var(--text); }
.g-submit { width:100%;padding:16px;border:none;border-radius:14px;font-size:1.1rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--coral),#e55a3a);color:white;transition:all 0.3s; }
.g-submit:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,74,0.35); }
.g-submit:disabled { opacity:0.6;cursor:not-allowed;transform:none; }
.g-placeholder { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-light); }
.g-result-box { flex:1;padding:20px;background:var(--gray-50);border-radius:12px;line-height:1.8;color:var(--text);font-size:0.95rem;overflow-y:auto;max-height:500px;white-space:pre-wrap; }
[data-theme="dark"] .g-result-box { background:var(--gray-700);color:var(--text); }
.g-result-actions { display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-200); }
.g-act-btn { padding:10px 20px;border:none;border-radius:10px;font-weight:600;font-size:0.88rem;cursor:pointer;transition:all 0.2s; }
.g-act-btn:hover { transform:translateY(-1px); }
.g-spinner { width:48px;height:48px;border:4px solid var(--gray-200);border-top-color:var(--coral);border-radius:50%;animation:spin 0.8s linear infinite; }

/* --- AI 工具侧栏 (create.php) --- */
.ai-tool-card { background:white;border:1px solid var(--gray-200);border-radius:12px;padding:14px;margin-bottom:12px;transition:all 0.2s; }
.ai-tool-card:hover { border-color:#6366f1; }
[data-theme="dark"] .ai-tool-card { background:var(--gray-800);border-color:var(--gray-700); }
.ai-tool-title { font-weight:600;font-size:0.9rem;color:var(--text);margin-bottom:4px; }
.ai-tool-desc { font-size:0.8rem;color:var(--text-light);margin-bottom:10px; }
.ai-tool-btn { width:100%;padding:8px 0;border-radius:8px;font-size:0.85rem;font-weight:600;border:2px solid #6366f1;background:white;color:#6366f1;cursor:pointer;transition:all 0.2s; }
.ai-tool-btn:hover { background:#6366f1;color:white; }
.ai-tool-btn:disabled { opacity:0.5;cursor:not-allowed; }
.story-form-card { background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.06); }
[data-theme="dark"] .story-form-card { background:var(--gray-800);border-color:var(--gray-700); }
.story-form-card-head { display:flex;align-items:center;gap:10px;padding:18px 24px;background:linear-gradient(135deg,var(--coral),var(--coral-dark));color:white;font-weight:600;font-size:1.05rem; }
.story-form-card-icon { font-size:1.3rem; }
.story-form-card-body { padding:24px; }

/* --- Toast 通知 --- */
.ai-toast { position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:12px 24px;background:#166534;color:white;border-radius:10px;font-size:0.9rem;font-weight:600;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,0.2);animation:fadeIn 0.3s; }

/* --- 范围滑条 --- */
input[type="range"] { -webkit-appearance:none;appearance:none;background:var(--gray-200);border-radius:4px;height:4px;outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--coral);cursor:pointer; }

/* --- 供应商选择 (admin) --- */
.provider-radio:hover { border-color:var(--coral) !important; }

/* --- 动画 --- */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to { transform:rotate(360deg) } }