:root {
  --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8;
  --secondary: #ec4899; --success: #10b981; --warning: #f59e0b;
  --danger: #ef4444; --dark: #1e1e2e; --darker: #11111b;
  --light: #cdd6f4; --muted: #6c7086; --surface: #313244; --overlay: #45475a; --border: #45475a;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --shadow: 0 4px 20px rgba(0,0,0,.3); --r: 12px; --t: all .25s ease;
}

/* ---- 日间模式变量覆盖 ---- */
body.light {
  --dark: #ffffff;
  --darker: #f1f5f9;
  --light: #1e293b;
  --muted: #64748b;
  --surface: #e2e8f0;
  --overlay: #cbd5e1;
  --border: #e2e8f0;
  --shadow: 0 4px 20px rgba(0,0,0,.1);
}
body.light .stats-bar { background:#ffffff; border-color:#e2e8f0; box-shadow:0 18px 50px rgba(15,23,42,.08); }
body.light .stat-cell { border-color: #e2e8f0; }
body.light .feature-card-v2,
body.light .testimonial-card,
body.light .faq-item,
body.light .bottom-cta,
body.light .invite-card,
body.light .profile-card,
body.light .studio-sidebar,
body.light .studio-main,
body.light .studio-result { border-color: #e2e8f0; }
body.light .hero-v2::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.08) 0%, transparent 70%); }
body.light .modal-content { background: #ffffff; }
body.light .form-group input,
body.light .form-group textarea { background: #f1f5f9; color: #1e293b; }
body.light .form-group input:focus,
body.light .form-group textarea:focus { background: #ffffff; }
body.light .upload-area { background: #f8fafc; border-color: #cbd5e1; }
body.light .upload-area:hover { background: rgba(99,102,241,.04); border-color: var(--primary); }
body.light .studio-options textarea { background: #f1f5f9; color: #1e293b; }
body.light .history-item { background: #ffffff; }
body.light .compare-stage { box-shadow: 0 24px 60px rgba(0,0,0,.15); }
body.light ::-webkit-scrollbar-track { background: #f1f5f9; }
body.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* ---- 主题切换按钮 ---- */
.language-toggle {
  min-width:42px; height:36px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid transparent;
  color:var(--light);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:800; letter-spacing:.03em;
  transition:var(--t);
  flex-shrink:0;
}
.language-toggle:hover { background:var(--overlay); border-color:var(--primary-light); color:var(--primary-light); transform:translateY(-1px); }
body.light .language-toggle { background:#ffffff; border-color:#e2e8f0; }

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: none;
  color: var(--light);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: var(--t);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--overlay); transform: rotate(20deg); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui,-apple-system,sans-serif; background:var(--darker); color:var(--light); min-height:100vh; line-height:1.6; }
a { color:var(--primary-light); text-decoration:none; }
input,textarea,select { font-family:inherit; }
.hidden { display:none !important; }

/* --- NAVBAR --- */
.navbar { background:var(--dark); padding:.875rem 2rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; box-shadow:var(--shadow); gap:1rem; flex-wrap:wrap; }
.nav-brand { display:flex; align-items:center; gap:.5rem; font-size:1.25rem; font-weight:700; }
.brand-icon { font-size:1.5rem; }
.brand-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; gap:.25rem; }
.nav-link { padding:.5rem .875rem; border-radius:8px; color:var(--muted); font-weight:500; transition:var(--t); }
.nav-link:hover, .nav-link.active { background:var(--surface); color:var(--primary-light); }
.nav-user { display:flex; align-items:center; gap:1rem; }
.user-guest { display:flex; gap:.5rem; }

/* --- BALANCE --- */
.user-balance { display:flex; align-items:center; gap:.375rem; background:var(--surface); padding:.4rem .875rem; border-radius:20px; cursor:pointer; font-size:.875rem; transition:var(--t); }
.user-balance:hover { background:var(--overlay); }
.balance-value { color:var(--warning); font-weight:700; }


.personal-center-btn {
  display:flex; align-items:center; gap:.75rem;
  border:1px solid rgba(129,140,248,.28);
  background:linear-gradient(135deg,rgba(99,102,241,.24),rgba(236,72,153,.14)), var(--dark);
  color:var(--light); border-radius:999px;
  padding:.42rem .95rem .42rem .42rem;
  cursor:pointer; transition:var(--t);
  box-shadow:0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.personal-center-btn:hover { transform:translateY(-1px); border-color:var(--primary-light); box-shadow:0 18px 42px rgba(99,102,241,.22); }
.personal-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gradient); color:#fff; box-shadow:0 8px 22px rgba(99,102,241,.32); }
.personal-meta { display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; }
.personal-name { max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; font-weight:800; letter-spacing:.01em; }
.personal-balance { color:var(--warning); font-size:.76rem; font-weight:800; }

.personal-center-modal {
  max-width:1040px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(129,140,248,.18);
}
.pc-header {
  position:relative;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:1.45rem 1.6rem 1.25rem;
  margin:0;
  background:
    radial-gradient(circle at 16% 0%, rgba(99,102,241,.38), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(236,72,153,.26), transparent 32%),
    linear-gradient(135deg, rgba(49,50,68,.98), rgba(17,17,27,.96));
  border-bottom:1px solid rgba(129,140,248,.18);
}
.pc-header::after { content:''; position:absolute; left:1.6rem; right:1.6rem; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.pc-header h2 { margin-bottom:.22rem; font-size:1.45rem; letter-spacing:-.02em; color:#fff; }
.pc-header p { color:rgba(205,214,244,.78); font-size:.9rem; }
.pc-header .btn { position:relative; z-index:1; border-color:rgba(255,255,255,.22); color:#fff; background:rgba(255,255,255,.08); }
.pc-header .btn:hover { background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.42); color:#fecaca; }

.pc-balance-grid {
  display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:.9rem;
  padding:1.15rem 1.35rem .75rem;
  margin:0;
  background:linear-gradient(180deg, rgba(99,102,241,.06), transparent 55%);
}
.pc-balance-card {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), var(--surface);
  border:1px solid var(--border); border-radius:18px;
  padding:1.05rem; min-height:124px;
  display:flex; flex-direction:column; gap:.48rem; justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}
.pc-balance-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--primary),var(--secondary)); opacity:.72; }
.pc-balance-card.primary { background:linear-gradient(135deg,rgba(99,102,241,.26),rgba(245,158,11,.14)), var(--surface); border-color:rgba(245,158,11,.38); }
.pc-balance-card.primary::after { content:'DIAMOND'; position:absolute; right:.8rem; bottom:.45rem; font-size:.68rem; font-weight:900; letter-spacing:.14em; color:rgba(245,158,11,.18); }
.pc-balance-card strong { font-size:2rem; line-height:1; color:var(--light); letter-spacing:-.03em; }
.pc-balance-card.primary strong { color:var(--warning); font-size:2.35rem; }
.pc-label { color:var(--muted); font-size:.82rem; font-weight:700; }
.pc-actions { display:flex; justify-content:flex-end; gap:.65rem; flex-wrap:wrap; padding:0 1.35rem 1rem; margin:0; }

.pc-records-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:0 1.35rem 1.35rem; }
.pc-record-card {
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--dark);
  border:1px solid var(--border); border-radius:18px;
  padding:1rem; min-height:310px;
  box-shadow:0 16px 42px rgba(0,0,0,.12);
}
.pc-record-head { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.65rem; padding-bottom:.65rem; border-bottom:1px solid var(--surface); }
.pc-record-head h3 { font-size:1rem; letter-spacing:-.01em; }
.pc-record-head span { color:var(--muted); font-size:.75rem; background:var(--surface); padding:.2rem .55rem; border-radius:999px; }
.pc-record-card .credit-log-item { border-bottom:1px solid var(--surface); padding:.78rem 0; gap:1rem; }
.pc-record-card .credit-log-item:last-child { border-bottom:none; }
.pc-log-desc { font-size:.86rem; color:var(--light); font-weight:650; }
.pc-log-time { font-size:.72rem; color:var(--muted); margin-top:.12rem; }
.pc-record-card .pagination { margin-top:.85rem; flex-wrap:wrap; }
.pc-record-card .page-btn { padding:.36rem .65rem; font-size:.8rem; }
body.light .personal-center-btn { background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(236,72,153,.08)), #fff; box-shadow:0 12px 30px rgba(15,23,42,.08); }
body.light .personal-center-modal { border-color:#e2e8f0; }
body.light .pc-header { background:linear-gradient(135deg,#4f46e5,#ec4899); }
body.light .pc-balance-card { background:#ffffff; box-shadow:0 14px 34px rgba(15,23,42,.06); }
body.light .pc-balance-card.primary { background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(245,158,11,.08)), #fff; }
body.light .pc-record-card { background:#ffffff; box-shadow:0 16px 42px rgba(15,23,42,.06); }
@media(max-width:900px){ .pc-balance-grid,.pc-records-grid { grid-template-columns:1fr; } .pc-actions { justify-content:flex-start; } }
@media(max-width:640px){ .personal-name { max-width:74px; } .personal-balance { font-size:.7rem; } .personal-center-btn { padding:.36rem .58rem .36rem .38rem; gap:.5rem; } .personal-avatar { width:32px; height:32px; } .pc-header { flex-direction:column; padding:1.2rem; } .pc-balance-grid,.pc-actions,.pc-records-grid { padding-left:1rem; padding-right:1rem; } }

/* --- DROPDOWN --- */
.user-dropdown { position:relative; }
.user-avatar { background:var(--gradient); border:none; color:#fff; padding:.5rem 1rem; border-radius:20px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.dropdown-menu { display:none; position:absolute; right:0; top:calc(100% + .5rem); background:var(--dark); border:1px solid var(--surface); border-radius:var(--r); min-width:160px; box-shadow:var(--shadow); z-index:200; overflow:hidden; }
.user-dropdown:hover .dropdown-menu { display:block; }
.dropdown-item { display:block; padding:.75rem 1rem; color:var(--light); transition:var(--t); font-size:.875rem; }
.dropdown-item:hover { background:var(--surface); color:var(--primary-light); }
.dropdown-divider { border-top:1px solid var(--surface); margin:.25rem 0; }
.text-danger { color:var(--danger) !important; }

/* --- LAYOUT --- */
.main-content { max-width:1400px; margin:0 auto; padding:2rem; }
.page { display:none; }
.page.active { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* --- BUTTONS --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.5rem; border:none; border-radius:var(--r); font-size:1rem; font-weight:600; cursor:pointer; transition:var(--t); }
.btn-primary { background:var(--gradient); color:#fff; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(99,102,241,.4); }
.btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary-light); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:.4rem .875rem; font-size:.875rem; }
.btn-lg { padding:1rem 2rem; font-size:1.125rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-loading { display:none; }

/* --- FORMS --- */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; margin-bottom:.5rem; font-weight:500; font-size:.875rem; color:var(--muted); }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:.75rem 1rem; background:var(--surface); border:2px solid transparent;
  border-radius:var(--r); color:var(--light); font-size:1rem; transition:var(--t);
}
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); background:var(--dark); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--muted); }
.input-with-btn { display:flex; gap:.5rem; }
.input-with-btn input { flex:1; }
.form-footer { text-align:center; margin-top:1.25rem; display:flex; justify-content:space-between; font-size:.875rem; }

/* --- HERO --- */
.hero { text-align:center; padding:5rem 2rem 3rem; }
.hero h1 { font-size:3rem; font-weight:800; margin-bottom:1rem; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:1.25rem; color:var(--muted); margin-bottom:2rem; }
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin:3rem 0; }
.feature-card { background:var(--dark); border-radius:var(--r); padding:2rem; text-align:center; border:1px solid var(--surface); transition:var(--t); }
.feature-card:hover { border-color:var(--primary); transform:translateY(-4px); }
.feature-icon { font-size:2.5rem; margin-bottom:1rem; }
.feature-card h3 { margin-bottom:.5rem; }
.feature-card p { color:var(--muted); font-size:.875rem; }
.pricing-section { margin:3rem 0; text-align:center; }
.pricing-section h2 { font-size:2rem; margin-bottom:2rem; }
.pricing-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; }

.email-code-status {
  display:none;
  margin-top:.45rem;
  padding:.55rem .7rem;
  border-radius:10px;
  font-size:.78rem;
  line-height:1.45;
  word-break:break-word;
}
.email-code-status.show { display:block; }
.email-code-status.success { color:var(--success); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.28); }
.email-code-status.error { color:#fecaca; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.32); }
body.light .email-code-status.error { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
body.light .email-code-status.success { color:#047857; background:#ecfdf5; border-color:#a7f3d0; }

/* --- STUDIO --- */
.studio-container { display:grid; grid-template-columns:220px 1fr 320px; gap:1.5rem; min-height:70vh; }
@media(max-width:1100px) { .studio-container { grid-template-columns:1fr; } }
.studio-sidebar, .studio-result { background:var(--dark); border-radius:var(--r); padding:1.5rem; }
.studio-sidebar h3, .studio-result h3 { font-size:1rem; margin-bottom:1.25rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.task-types { display:flex; flex-direction:column; gap:.5rem; }
.task-type-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--surface); border-radius:10px; cursor:pointer; transition:var(--t); border:2px solid transparent; }
.task-type-item input { display:none; }
.task-type-item:has(input:checked), .task-type-item.active { border-color:var(--primary); background:rgba(99,102,241,.1); }
.task-type-item:hover { background:var(--overlay); }
.task-icon { font-size:1.25rem; }
.task-name { flex:1; font-weight:600; font-size:.9rem; }
.task-price { font-size:.75rem; color:var(--warning); }

.studio-main { background:var(--dark); border-radius:var(--r); padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
.upload-area { border:2px dashed var(--overlay); border-radius:var(--r); padding:2.5rem; text-align:center; cursor:pointer; transition:var(--t); background:var(--surface); position:relative; }
.upload-area:hover { border-color:var(--primary); background:rgba(99,102,241,.08); }
.upload-placeholder .upload-icon { font-size:3rem; display:block; margin-bottom:1rem; }
.upload-hint { font-size:.8rem; color:var(--muted); margin-top:.5rem; }
.upload-preview { position:relative; display:inline-block; }
.upload-preview img { max-height:280px; max-width:100%; border-radius:var(--r); }
.btn-remove { position:absolute; top:-8px; right:-8px; width:26px; height:26px; background:var(--danger); border:none; border-radius:50%; color:#fff; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }

.studio-options { display:flex; flex-direction:column; gap:1rem; }
.option-group > label { display:block; margin-bottom:.5rem; font-size:.875rem; color:var(--muted); font-weight:500; }
.quality-options, .scene-options, .model-options, .ratio-options { display:flex; gap:.5rem; flex-wrap:wrap; }
.quality-item, .scene-item, .model-item, .ratio-item { padding:.5rem 1rem; background:var(--surface); border:2px solid transparent; border-radius:8px; cursor:pointer; font-size:.875rem; transition:var(--t); }
.quality-item input, .scene-item input, .model-item input, .ratio-item input { display:none; }
.quality-item:has(input:checked), .scene-item:has(input:checked), .model-item:has(input:checked), .ratio-item:has(input:checked) { border-color:var(--primary); background:rgba(99,102,241,.12); color:var(--primary-light); }
.quality-item.active, .scene-item.active, .model-item.active, .ratio-item.active { border-color:var(--primary); background:rgba(99,102,241,.12); color:var(--primary-light); }
.studio-options textarea { background:var(--surface); border:2px solid transparent; border-radius:var(--r); padding:.75rem 1rem; color:var(--light); width:100%; resize:vertical; transition:var(--t); }
.suite-info { background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.25); border-radius:var(--r); padding:1rem 1.25rem; }
.suite-info-title { font-size:.875rem; font-weight:700; color:var(--primary-light); margin-bottom:.75rem; }
.suite-info-items { display:flex; flex-wrap:wrap; gap:.5rem; }
.suite-chip { display:inline-flex; align-items:center; gap:.3rem; background:var(--surface); border-radius:16px; padding:.3rem .75rem; font-size:.78rem; color:var(--light); }
.suite-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary-light); }
.studio-options textarea:focus { outline:none; border-color:var(--primary); }
.studio-actions { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--surface); }
.cost-preview { font-size:.9rem; color:var(--muted); }
.cost-preview span { color:var(--warning); font-weight:700; font-size:1.1rem; }

.result-placeholder { text-align:center; padding:4rem 2rem; color:var(--muted); }
.result-placeholder span { font-size:3rem; display:block; margin-bottom:1rem; opacity:.4; }
.result-content { width:100%; }
.result-status { padding:.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; background:rgba(99,102,241,.1); color:var(--primary-light); display:flex; align-items:center; gap:.5rem; }
.result-status.processing { background:rgba(245,158,11,.1); color:var(--warning); }
.result-status.done { background:rgba(16,185,129,.1); color:var(--success); }
.result-status.error { background:rgba(239,68,68,.1); color:var(--danger); }
.result-images { display:flex; flex-direction:column; gap:1rem; }
.result-images img { width:100%; border-radius:var(--r); border:1px solid var(--surface); }
.result-download { width:100%; margin-top:1rem; }
.spinner { width:20px; height:20px; border:2px solid var(--overlay); border-top-color:var(--warning); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* --- HISTORY --- */
.history-container { max-width:900px; margin:0 auto; }
.history-container h2 { margin-bottom:1.5rem; }
.history-list { display:grid; gap:1rem; }
.history-item { background:var(--dark); border-radius:var(--r); padding:1.25rem; display:grid; grid-template-columns:80px 1fr auto; gap:1rem; align-items:center; cursor:pointer; transition:var(--t); border:1px solid transparent; }
.history-item:hover { border-color:var(--primary); }
.history-thumb { width:80px; height:80px; border-radius:8px; object-fit:cover; background:var(--surface); }
.history-thumb-placeholder { width:80px; height:80px; border-radius:8px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.history-type { font-weight:600; margin-bottom:.25rem; }
.history-meta { font-size:.8rem; color:var(--muted); }
.status-badge { padding:.3rem .7rem; border-radius:20px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.status-completed { background:rgba(16,185,129,.2); color:var(--success); }
.status-processing { background:rgba(245,158,11,.2); color:var(--warning); }
.status-pending { background:rgba(99,102,241,.2); color:var(--primary-light); }
.status-failed { background:rgba(239,68,68,.2); color:var(--danger); }

/* --- PROFILE --- */
.profile-container { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1000px; margin:0 auto; }
@media(max-width:768px){ .profile-container { grid-template-columns:1fr; } }
.profile-card { background:var(--dark); border-radius:var(--r); padding:1.5rem; }
.profile-card h2 { font-size:1.25rem; margin-bottom:1.5rem; padding-bottom:.75rem; border-bottom:1px solid var(--surface); }
.info-item { display:flex; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--surface); }
.info-item label { width:80px; color:var(--muted); font-size:.875rem; flex-shrink:0; }
.info-item span { flex:1; }
.info-item input { flex:1; background:var(--surface); border:2px solid transparent; border-radius:8px; padding:.5rem .75rem; color:var(--light); transition:var(--t); }
.info-item input:focus { outline:none; border-color:var(--primary); }
.credit-log-item { display:flex; justify-content:space-between; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--surface); font-size:.875rem; }
.credit-amount.positive { color:var(--success); }
.credit-amount.negative { color:var(--danger); }

/* --- INVITE --- */
.invite-container { max-width:600px; margin:0 auto; }
.invite-card { background:var(--dark); border-radius:var(--r); padding:2rem; }
.invite-card h2 { margin-bottom:.75rem; }
.invite-card > p { color:var(--muted); margin-bottom:2rem; }
.invite-code-box { background:var(--surface); border-radius:var(--r); padding:1.5rem; margin-bottom:2rem; }
.invite-code-box label { display:block; font-size:.875rem; color:var(--muted); margin-bottom:.75rem; }
.code-display { display:flex; align-items:center; gap:1rem; }
.code-display span { font-size:2rem; font-weight:800; letter-spacing:.25em; color:var(--primary-light); font-family:monospace; }
.invite-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.stat-item { background:var(--surface); border-radius:var(--r); padding:1.25rem; text-align:center; }
.stat-value { display:block; font-size:2rem; font-weight:700; color:var(--primary-light); }
.stat-label { font-size:.8rem; color:var(--muted); margin-top:.25rem; display:block; }

/* --- MODAL --- */
.modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal.open { display:flex; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.modal-content { position:relative; background:var(--dark); border-radius:var(--r); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:2rem; box-shadow:var(--shadow); animation:modalIn .25s ease; }
.modal-content.modal-lg { max-width:620px; }
@keyframes modalIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.modal-content h2 { margin-bottom:1.5rem; font-size:1.5rem; }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--muted); font-size:1.75rem; cursor:pointer; line-height:1; padding:.25rem; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--light); background:var(--surface); }

/* --- RECHARGE --- */
.recharge-plans { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem; }
.recharge-plan { background:var(--surface); border:2px solid transparent; border-radius:var(--r); padding:1.25rem; cursor:pointer; transition:var(--t); position:relative; text-align:center; }
.recharge-plan:hover { background:var(--overlay); }
.recharge-plan.active { border-color:var(--primary); }
.plan-tag { position:absolute; top:-10px; right:10px; background:var(--secondary); color:#fff; font-size:.7rem; padding:.2rem .5rem; border-radius:4px; font-weight:700; }
.plan-popular { position:absolute; top:-10px; left:10px; background:var(--warning); color:var(--dark); font-size:.7rem; padding:.2rem .5rem; border-radius:4px; font-weight:700; }
.plan-amount { font-size:1.75rem; font-weight:800; color:var(--warning); }
.plan-amount small { font-size:.875rem; }
.plan-name { font-size:.875rem; color:var(--muted); margin:.25rem 0; }
.plan-credits { font-size:1rem; font-weight:600; }
.plan-bonus { font-size:.8rem; color:var(--success); margin-top:.25rem; }
.recharge-selected { display:flex; justify-content:space-between; background:var(--surface); border-radius:var(--r); padding:1rem; margin-bottom:1rem; font-size:.9rem; }
.recharge-tip { text-align:center; font-size:.8rem; color:var(--muted); margin-top:.75rem; }

/* --- 充值画质 tab --- */
.recharge-tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.recharge-tab { padding:.4rem 1rem; border-radius:20px; background:var(--surface); border:2px solid transparent; color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--t); }
.recharge-tab small { font-weight:400; opacity:.75; margin-left:.25rem; }
.recharge-tab.active { border-color:var(--primary); background:rgba(99,102,241,.12); color:var(--primary-light); }
.recharge-tab:hover:not(.active) { background:var(--overlay); color:var(--light); }
.recharge-plan.hidden-plan { display:none; }

/* --- 充值中心 顶部大 tab --- */
.topup-tabs { display:flex; gap:.75rem; margin-bottom:1.5rem; }
.topup-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.875rem 1rem; border-radius:var(--r); background:var(--surface); border:2px solid transparent; cursor:pointer; transition:var(--t); }
.topup-tab:hover:not(.active) { background:var(--overlay); }
.topup-tab.active { border-color:var(--primary); background:rgba(99,102,241,.12); }
.topup-tab-title { font-size:1rem; font-weight:700; color:var(--light); }
.topup-tab.active .topup-tab-title { color:var(--primary-light); }
.topup-tab-sub { font-size:.72rem; color:var(--muted); }

/* --- TOAST --- */
.toast-container { position:fixed; top:1.25rem; right:1.25rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
.toast { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; border-radius:var(--r); color:#fff; font-weight:500; min-width:260px; box-shadow:var(--shadow); animation:slideIn .3s ease; transition:opacity .3s,transform .3s; }
@keyframes slideIn { from { opacity:0; transform:translateX(80px); } to { opacity:1; transform:translateX(0); } }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
.toast.warning { background:var(--warning); color:var(--dark); }
.toast.info { background:var(--primary); }

/* --- EMPTY STATE --- */
.empty-state { text-align:center; padding:3rem; color:var(--muted); }
.empty-state span { font-size:3rem; display:block; margin-bottom:1rem; opacity:.4; }

/* --- PAGINATION --- */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.page-btn { padding:.5rem .875rem; background:var(--surface); border:none; border-radius:8px; color:var(--light); cursor:pointer; transition:var(--t); }
.page-btn.active, .page-btn:hover { background:var(--primary); color:#fff; }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--darker); }
::-webkit-scrollbar-thumb { background:var(--overlay); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ============================================================
   新首页商业化改版
   ============================================================ */

/* --- HERO 重写 --- */
.hero-v2 { position:relative; text-align:center; padding:5rem 2rem 4rem; overflow:hidden; }
.hero-v2::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.18) 0%, transparent 70%); pointer-events:none; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.3); border-radius:20px; padding:.35rem 1rem; font-size:.8rem; font-weight:600; color:var(--primary-light); letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.5rem; }
.hero-eyebrow span { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--primary-light); animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.hero-v2 h1 { font-size:clamp(2.2rem,5vw,3.75rem); font-weight:900; line-height:1.1; margin-bottom:1.25rem; letter-spacing:-.02em; }
.hero-v2 h1 .line-plain { display:block; color:var(--light); }
.hero-v2 h1 .line-grad { display:block; background:linear-gradient(135deg,#818cf8,#ec4899,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-v2 .hero-sub { font-size:1.1rem; color:var(--muted); max-width:540px; margin:0 auto 2rem; line-height:1.7; }
.hero-cta-row { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.hero-cta-note { font-size:.8rem; color:var(--muted); }


/* --- HERO CARD REWORK --- */
.hero-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:2rem; align-items:center; max-width:1180px; margin:0 auto; text-align:left; }
.hero-copy { position:relative; z-index:1; }
.hero-copy .hero-sub { margin-left:0; margin-right:0; }
.hero-copy .hero-cta-row { justify-content:flex-start; }
.hero-proof-card { position:relative; justify-self:end; width:min(100%, 500px); border-radius:28px; padding:1rem; background:linear-gradient(180deg, rgba(17,17,27,.96), rgba(30,30,46,.92)); border:1px solid rgba(129,140,248,.18); box-shadow:0 28px 80px rgba(0,0,0,.35); overflow:hidden; }
.hero-proof-glow { position:absolute; inset:-20% -10% auto auto; width:220px; height:220px; background:radial-gradient(circle, rgba(236,72,153,.28), transparent 65%); filter:blur(8px); pointer-events:none; }
.hero-proof-main { position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4 / 5; background:#141421; }
.hero-proof-main img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.hero-proof-badge { position:absolute; left:1rem; bottom:1rem; padding:.35rem .75rem; border-radius:999px; background:rgba(17,17,27,.78); color:#fff; font-size:.78rem; font-weight:700; backdrop-filter:blur(12px); }
.hero-proof-float { position:absolute; right:1.1rem; bottom:4.75rem; width:34%; max-width:145px; border-radius:18px; padding:.65rem; background:rgba(17,17,27,.78); border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 36px rgba(0,0,0,.28); backdrop-filter:blur(12px); }
.hero-proof-float img { width:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:center; border-radius:14px; display:block; margin-bottom:.5rem; }
.hero-proof-float span { display:block; text-align:center; color:var(--light); font-size:.72rem; font-weight:700; }
.hero-proof-caption { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-top:1rem; padding:.2rem .2rem .1rem; }
.hero-proof-caption strong { font-size:1rem; color:var(--light); }
.hero-proof-caption span { font-size:.82rem; color:var(--muted); }
.hero-trust-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.2rem; }
.hero-trust-row span { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:.8rem; }
.hero-trust-row span::before { content:'\2713'; color:var(--success); font-weight:700; }

@media(max-width:960px) {
  .hero-layout { grid-template-columns:1fr; text-align:center; }
  .hero-copy { max-width:760px; margin:0 auto; }
  .hero-copy .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-copy .hero-cta-row { justify-content:center; }
  .hero-proof-card { justify-self:center; width:min(100%, 460px); }
  .hero-trust-row { justify-content:center; }
}

@media(max-width:640px) {
  .hero-v2 { padding:3.5rem 1rem 2.5rem; }
  .hero-layout { gap:1.25rem; }
  .hero-proof-card { padding:.85rem; border-radius:22px; }
  .hero-proof-float { width:38%; right:.85rem; bottom:4.25rem; }
  .hero-proof-caption { flex-direction:column; align-items:flex-start; gap:.3rem; }
}

/* --- STATS BAR --- */
.stats-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; max-width:1100px; margin:0 auto 1rem; background:linear-gradient(180deg, rgba(30,30,46,.94), rgba(17,17,27,.92)); border:1px solid rgba(129,140,248,.16); border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.stat-cell { padding:1.5rem 2rem; text-align:center; border-right:1px solid var(--surface); }
.stat-cell:last-child { border-right:none; }
.stat-cell-value { font-size:1.75rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; line-height:1.1; }
.stat-cell-label { font-size:.78rem; color:var(--muted); margin-top:.25rem; display:block; }

/* --- COMPARE SLIDER SECTION --- */
.compare-section { padding:4rem 0; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-label { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-light); margin-bottom:.75rem; }
.section-header h2 { font-size:clamp(1.6rem,3vw,2.5rem); font-weight:800; color:var(--light); margin-bottom:.75rem; letter-spacing:-.02em; }
.section-header p { color:var(--muted); font-size:1rem; max-width:480px; margin:0 auto; }

.compare-tabs { display:flex; justify-content:center; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.compare-tab { padding:.5rem 1.25rem; border-radius:20px; background:var(--surface); border:2px solid transparent; color:var(--muted); font-size:.875rem; font-weight:600; cursor:pointer; transition:var(--t); }
.compare-tab.active { border-color:var(--primary); background:rgba(99,102,241,.12); color:var(--primary-light); }

.compare-stage { position:relative; width:min(100%, 430px); aspect-ratio:2 / 3; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); user-select:none; background:#1a1a26; }
.compare-stage .img-before,
.compare-stage .img-after { width:100%; height:100%; display:block; object-fit:cover; object-position:center; background:#1a1a26; }
.compare-stage .img-after { position:absolute; inset:0; clip-path:inset(0 50% 0 0); transition:none; }
@media(max-width:600px){ .compare-stage { width:min(100%, 360px); } }
.compare-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; z-index:3; }
.compare-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:4; cursor:ew-resize; }
.compare-handle svg { width:18px; height:18px; color:#1e1e2e; }
.compare-label { position:absolute; bottom:16px; padding:.3rem .75rem; border-radius:6px; font-size:.75rem; font-weight:700; letter-spacing:.04em; z-index:5; pointer-events:none; }
.compare-label.before { left:16px; background:rgba(0,0,0,.6); color:#fff; }
.compare-label.after { right:16px; background:rgba(99,102,241,.85); color:#fff; }

/* --- STEPS --- */
.steps-section { padding:4rem 0; }
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; position:relative; }
.steps-grid::before { content:''; position:absolute; top:40px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,transparent,var(--surface),var(--surface),transparent); pointer-events:none; }
@media(max-width:700px){ .steps-grid::before { display:none; } }
.step-item { text-align:center; padding:2rem 1.5rem; position:relative; }
.step-num { width:56px; height:56px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:800; color:#fff; margin:0 auto 1.25rem; position:relative; z-index:1; box-shadow:0 0 0 8px rgba(99,102,241,.1); }
.step-icon { font-size:1.5rem; margin-bottom:.75rem; display:block; }
.step-item h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.step-item p { font-size:.85rem; color:var(--muted); line-height:1.6; }

/* --- FEATURES GRID V2 --- */
.features-v2 { padding:4rem 0; }
.features-grid-v2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }

/* --- 套图对比卡片 --- */
.suite-compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
.suite-col { background:var(--dark); border:1px solid var(--surface); border-radius:16px; padding:2rem 1.75rem; transition:var(--t); position:relative; }
.suite-col.featured { border-color:var(--primary); box-shadow:0 16px 40px rgba(99,102,241,.15); }
.suite-col-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gradient); color:#fff; font-size:.72rem; font-weight:700; padding:.25rem .875rem; border-radius:20px; }
.suite-col-icon { font-size:1.75rem; }
.suite-col-name { font-size:1.15rem; font-weight:800; margin:.5rem 0 .25rem; }
.suite-col-count { font-size:.82rem; color:var(--primary-light); font-weight:600; margin-bottom:.25rem; }
.suite-col-price { font-size:.8rem; color:var(--warning); font-weight:600; margin-bottom:1.25rem; }
.suite-col-list { display:flex; flex-direction:column; gap:.6rem; }
.suite-col-list div { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.suite-col-list div::before { content:'✓'; color:var(--success); font-weight:700; flex-shrink:0; }
.feature-card-v2 { background:var(--dark); border:1px solid var(--surface); border-radius:16px; padding:2rem; transition:var(--t); position:relative; overflow:hidden; }
.feature-card-v2::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 0% 0%, rgba(99,102,241,.08) 0%, transparent 60%); pointer-events:none; transition:var(--t); }
.feature-card-v2:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 16px 40px rgba(99,102,241,.15); }
.feature-card-v2:hover::before { background:radial-gradient(circle at 0% 0%, rgba(99,102,241,.15) 0%, transparent 60%); }
.fv2-icon { font-size:2rem; margin-bottom:1rem; display:block; }
.fv2-title { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.fv2-desc { font-size:.875rem; color:var(--muted); line-height:1.65; }
.fv2-badge { display:inline-block; margin-top:1rem; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:4px; background:rgba(16,185,129,.15); color:var(--success); letter-spacing:.04em; }

/* --- TESTIMONIALS --- */
.testimonials-section { padding:4rem 0; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.testimonial-card { background:var(--dark); border:1px solid var(--surface); border-radius:16px; padding:1.75rem; transition:var(--t); }
.testimonial-card:hover { border-color:var(--overlay); }
.tcard-stars { color:var(--warning); font-size:1rem; margin-bottom:1rem; letter-spacing:.1em; }
.tcard-text { font-size:.9rem; color:var(--light); line-height:1.7; margin-bottom:1.25rem; }
.tcard-author { display:flex; align-items:center; gap:.75rem; }
.tcard-avatar { width:36px; height:36px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:700; color:#fff; flex-shrink:0; }
.tcard-name { font-size:.875rem; font-weight:600; }
.tcard-role { font-size:.78rem; color:var(--muted); }

/* --- FAQ --- */
.faq-section { padding:4rem 0; max-width:720px; margin:0 auto; }
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:var(--dark); border:1px solid var(--surface); border-radius:12px; overflow:hidden; transition:var(--t); }
.faq-item.open { border-color:var(--primary); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:1.125rem 1.5rem; cursor:pointer; font-weight:600; font-size:.95rem; gap:1rem; }
.faq-q:hover { color:var(--primary-light); }
.faq-chevron { flex-shrink:0; width:20px; height:20px; transition:transform .25s; color:var(--muted); }
.faq-item.open .faq-chevron { transform:rotate(180deg); color:var(--primary-light); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease; padding:0 1.5rem; color:var(--muted); font-size:.9rem; line-height:1.7; }
.faq-item.open .faq-a { max-height:300px; padding-bottom:1.25rem; }

/* --- BOTTOM CTA --- */
.bottom-cta { margin:4rem 0 2rem; background:var(--dark); border:1px solid var(--surface); border-radius:20px; padding:3.5rem 2rem; text-align:center; position:relative; overflow:hidden; }
.bottom-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 80% at 50% 100%, rgba(99,102,241,.12) 0%, transparent 70%); pointer-events:none; }
.bottom-cta h2 { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; margin-bottom:.75rem; }
.bottom-cta p { color:var(--muted); margin-bottom:2rem; font-size:1rem; }
.bottom-cta .cta-badges { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.cta-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); }
.cta-badge::before { content:'✓'; color:var(--success); font-weight:700; }


/* --- RESULT EXPERIENCE --- */
.result-status small { display:block; color:inherit; opacity:.75; font-size:.78rem; line-height:1.4; margin-top:.15rem; }
.progress-panel { width:100%; background:var(--surface); border:1px solid var(--overlay); border-radius:var(--r); padding:1rem; }
.progress-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.86rem; margin-bottom:.75rem; }
.progress-head span { color:var(--light); }
.progress-head strong { color:var(--warning); white-space:nowrap; }
.progress-track { height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; min-width:4%; border-radius:999px; background:var(--gradient); transition:width .35s ease; }
.progress-tip { margin-top:.65rem; color:var(--muted); font-size:.78rem; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.85rem; }
.result-card { background:var(--surface); border:1px solid var(--overlay); border-radius:var(--r); overflow:hidden; }
.result-card img { width:100%; aspect-ratio:1/1; object-fit:cover; border:0; border-radius:0; display:block; }
.result-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem .75rem; font-size:.78rem; }
.result-card-footer span { color:var(--light); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-card-footer a { color:var(--primary-light); font-weight:700; flex-shrink:0; }
.result-actions { grid-column:1/-1; display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.25rem; }
.result-actions .btn { flex:1; min-width:140px; }
.history-thumb-wrap { position:relative; width:80px; height:80px; }
.history-thumb-wrap span { position:absolute; right:4px; bottom:4px; background:rgba(17,17,27,.82); color:#fff; border-radius:999px; padding:.12rem .45rem; font-size:.68rem; font-weight:700; }
.history-type { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.history-type em { font-style:normal; font-size:.68rem; color:var(--primary-light); background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.25); border-radius:999px; padding:.08rem .45rem; }

@media(max-width:768px) {
  .navbar { padding:.75rem 1rem; }
  .main-content { padding:1rem; }
  .studio-container { gap:1rem; }
  .studio-sidebar, .studio-main, .studio-result { padding:1rem; }
  .task-types { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .task-type-item { padding:.65rem .75rem; }
  .studio-actions { align-items:stretch; flex-direction:column; }
  #resourceBar { flex-direction:column; align-items:flex-start !important; gap:.45rem !important; }
  #resourceBar a { margin-left:0 !important; }
  .history-item { grid-template-columns:64px 1fr; align-items:start; }
  .history-thumb, .history-thumb-placeholder, .history-thumb-wrap { width:64px; height:64px; }
  .status-badge { grid-column:2; justify-self:start; }
}

@media(max-width:520px) {
  .task-types { grid-template-columns:1fr; }
  .quality-options, .scene-options, .model-options, .ratio-options { display:grid; grid-template-columns:1fr 1fr; }
  .result-grid { grid-template-columns:1fr 1fr; }
  .result-actions { flex-direction:column; }
}



/* --- PRODUCT LIBRARY & PROMPT TEMPLATES --- */
.product-library-panel { background:rgba(99,102,241,.06); border:1px solid rgba(99,102,241,.18); border-radius:var(--r); padding:1rem; }
.product-library-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.product-library-head strong { display:block; color:var(--light); font-size:.95rem; }
.product-library-head span { display:block; color:var(--muted); font-size:.76rem; margin-top:.1rem; }
.product-library-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.product-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.65rem; max-height:210px; overflow:auto; padding-right:.15rem; }
.product-empty { grid-column:1/-1; color:var(--muted); font-size:.82rem; padding:.75rem; background:var(--surface); border-radius:10px; text-align:center; }
.product-card { position:relative; display:grid; grid-template-columns:48px 1fr; gap:.6rem; align-items:center; padding:.5rem; border-radius:10px; background:var(--surface); border:1px solid transparent; cursor:pointer; transition:var(--t); min-width:0; }
.product-card:hover { border-color:var(--primary); background:rgba(99,102,241,.12); }
.product-card img { width:48px; height:48px; object-fit:cover; border-radius:8px; background:var(--darker); }
.product-card strong { display:block; color:var(--light); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:1.1rem; }
.product-card span { display:block; color:var(--muted); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-card button { position:absolute; top:.25rem; right:.25rem; width:20px; height:20px; border:0; border-radius:50%; background:rgba(239,68,68,.12); color:var(--danger); cursor:pointer; line-height:20px; }
.product-card button:hover { background:var(--danger); color:#fff; }
.prompt-template-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.prompt-template-chip { padding:.42rem .75rem; border-radius:999px; border:1px solid rgba(129,140,248,.26); background:rgba(99,102,241,.08); color:var(--primary-light); font-size:.78rem; font-weight:700; cursor:pointer; transition:var(--t); }
.prompt-template-chip:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-1px); }
body.light .product-library-panel { background:rgba(99,102,241,.05); border-color:rgba(99,102,241,.18); }
body.light .product-card img { background:#f1f5f9; }

@media(max-width:640px) {
  .product-library-head { align-items:flex-start; flex-direction:column; }
  .product-library-actions { width:100%; justify-content:flex-start; }
  .product-list { grid-template-columns:1fr; max-height:260px; }
}

/* --- RESULT PREVIEW --- */
.modal-preview { max-width:980px !important; }
.preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-right:2rem; margin-bottom:1rem; }
.preview-heading h2 { margin:.35rem 0 0; }
.preview-mode-tabs { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
.preview-mode-btn { border:1px solid var(--overlay); background:var(--surface); color:var(--muted); border-radius:999px; padding:.45rem .8rem; font-size:.78rem; cursor:pointer; transition:var(--t); }
.preview-mode-btn:hover, .preview-mode-btn.active { color:#fff; border-color:var(--primary); background:var(--primary); }
.preview-panel { background:var(--darker); border:1px solid var(--surface); border-radius:var(--r); min-height:360px; display:flex; align-items:center; justify-content:center; padding:1rem; }
.preview-panel img { max-width:100%; max-height:68vh; object-fit:contain; border-radius:8px; display:block; }
.preview-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.preview-compare-item { background:var(--darker); border:1px solid var(--surface); border-radius:var(--r); padding:.75rem; }
.preview-compare-item > span { display:block; color:var(--muted); font-size:.78rem; margin-bottom:.65rem; }
.preview-compare-item img { width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:8px; background:var(--surface); display:block; }
.preview-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.preview-footer > span { color:var(--muted); font-size:.78rem; }

@media(max-width:650px) {
  .preview-heading { flex-direction:column; padding-right:2rem; }
  .preview-mode-tabs { justify-content:flex-start; }
  .preview-compare { grid-template-columns:1fr; }
  .preview-footer { align-items:stretch; flex-direction:column; }
  .preview-footer .btn { width:100%; text-align:center; }
}


/* --- FAVORITES & PLATFORM EXPORT --- */
.product-card-actions { position:absolute; top:.25rem; right:.25rem; display:flex; gap:.25rem; }
.product-card .product-card-actions button { position:static; width:20px; height:20px; border:0; border-radius:50%; background:rgba(17,17,27,.65); color:#fff; cursor:pointer; line-height:20px; font-size:.78rem; }
.product-card .product-card-actions button:hover { background:var(--primary); color:#fff; }
.product-card .product-card-actions button:last-child:hover { background:var(--danger); }
.product-card .product-card-actions .product-fav.active { background:var(--warning); color:#11111b; }
.result-card-actions { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
.result-card-actions button { border:0; background:rgba(99,102,241,.12); color:var(--primary-light); border-radius:999px; padding:.25rem .5rem; font-size:.72rem; font-weight:700; cursor:pointer; }
.result-card-actions button:hover, .result-card-actions button.active { background:var(--primary); color:#fff; }
.favorites-container { max-width:1100px; margin:0 auto; }
.favorites-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.favorites-heading h2 { font-size:2rem; margin:.25rem 0 .35rem; }
.favorites-heading p { color:var(--muted); }
.favorites-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.favorites-tab { border:1px solid var(--surface); background:var(--dark); color:var(--muted); border-radius:999px; padding:.5rem 1rem; cursor:pointer; font-weight:700; transition:var(--t); }
.favorites-tab.active, .favorites-tab:hover { color:#fff; background:var(--primary); border-color:var(--primary); }
.favorites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.favorite-card { background:var(--dark); border:1px solid var(--surface); border-radius:var(--r); overflow:hidden; }
.favorite-image { aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:2rem; }
.favorite-image img { width:100%; height:100%; object-fit:cover; display:block; }
.favorite-body { padding:.85rem .9rem; }
.favorite-body strong { display:block; color:var(--light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.favorite-body span { display:block; color:var(--muted); font-size:.78rem; margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.favorite-actions { display:flex; gap:.5rem; padding:0 .9rem .9rem; flex-wrap:wrap; }
.favorite-actions .btn { flex:1; min-width:80px; }
.modal-content.modal-export { max-width:720px; }
.export-subtitle { color:var(--muted); margin:-.75rem 0 1rem; }
.export-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; }
.export-preset { text-align:left; padding:1rem; border-radius:var(--r); border:1px solid var(--surface); background:var(--surface); color:var(--light); cursor:pointer; transition:var(--t); }
.export-preset:hover { transform:translateY(-2px); border-color:var(--primary); background:rgba(99,102,241,.12); }
.export-preset strong { display:block; margin-bottom:.25rem; }
.export-preset span { color:var(--muted); font-size:.8rem; }
body.light .favorite-card, body.light .favorites-tab { border-color:#e2e8f0; }

@media(max-width:640px) {
  .favorites-heading { align-items:flex-start; flex-direction:column; }
  .favorites-grid { grid-template-columns:1fr; }
  .result-card-actions { justify-content:flex-start; }
}

/* --- BRAND KIT / BATCH / COPYWRITING --- */
.product-card.selected { border-color:var(--primary); background:rgba(99,102,241,.14); box-shadow:0 0 0 1px rgba(129,140,248,.28); }
.product-select { position:absolute; left:.45rem; top:.45rem; z-index:2; display:inline-flex; align-items:center; gap:.2rem; color:var(--muted); font-size:.64rem; cursor:pointer; background:rgba(17,17,27,.72); border-radius:999px; padding:.15rem .35rem; }
.product-select input { accent-color:var(--primary); margin:0; }
.product-card > img { margin-left:2.1rem; }
.product-select span { display:inline; color:inherit; font-size:inherit; }
.batch-panel { margin-top:.75rem; padding:.85rem; background:var(--surface); border:1px solid var(--overlay); border-radius:var(--r); }
.batch-panel-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.batch-panel-head strong { color:var(--light); font-size:.86rem; }
.batch-panel-head span { color:var(--muted); font-size:.72rem; }
.batch-empty { color:var(--muted); font-size:.78rem; padding:.5rem 0; }
.batch-task-list { display:grid; gap:.45rem; }
.batch-task-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .65rem; border-radius:9px; background:var(--dark); border:1px solid transparent; }
.batch-task-row.processing { border-color:rgba(245,158,11,.35); }
.batch-task-row.completed { border-color:rgba(34,197,94,.35); }
.batch-task-row.failed { border-color:rgba(239,68,68,.35); }
.batch-task-main { min-width:0; display:flex; align-items:center; gap:.55rem; }
.batch-task-main strong { color:var(--light); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.batch-task-main span { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.batch-task-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.batch-task-actions small { color:var(--danger); font-size:.7rem; max-width:180px; }
.copywriting-panel { margin-top:.85rem; padding:1rem; background:rgba(99,102,241,.055); border:1px solid rgba(99,102,241,.18); border-radius:var(--r); }
.copywriting-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.copywriting-head strong { display:block; color:var(--light); font-size:.92rem; }
.copywriting-head span { display:block; color:var(--muted); font-size:.72rem; margin-top:.15rem; }
.copywriting-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-bottom:.55rem; }
.copywriting-form input, .copywriting-form select, .copywriting-panel > textarea { min-width:0; width:100%; }
.copywriting-result { margin-top:.75rem; display:grid; gap:.55rem; }
.copy-result-item, .copy-keywords { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.7rem; background:var(--dark); border:1px solid var(--surface); border-radius:9px; }
.copy-result-item > div { min-width:0; }
.copy-result-item strong, .copy-keywords strong { display:block; color:var(--primary-light); font-size:.72rem; margin-bottom:.25rem; }
.copy-result-item p, .copy-keywords span { color:var(--light); font-size:.78rem; line-height:1.6; margin:0; }
.copy-pre { white-space:pre-wrap; }
.copy-keywords { align-items:center; flex-wrap:wrap; }
.copy-keywords span { flex:1; min-width:180px; color:var(--muted); }
.copy-loading, .copy-error { color:var(--muted); font-size:.78rem; padding:.5rem 0; }
.copy-error { color:var(--danger); }
.profile-card-desc { color:var(--muted); font-size:.82rem; margin:-.9rem 0 1rem; }
.brand-kit-form { display:grid; gap:.7rem; }
.brand-form-row { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.brand-form-row > label { color:var(--muted); font-size:.8rem; min-width:72px; }
.brand-form-row > input[type=text], .brand-form-row > select { flex:1; min-width:180px; }
.brand-form-row > input[type=color] { width:42px; height:32px; padding:2px; border:1px solid var(--surface); border-radius:7px; background:var(--surface); }
.brand-form-row > input[type=range] { flex:1; accent-color:var(--primary); }
.brand-logo-tools { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.brand-logo-preview { display:flex; align-items:center; gap:.75rem; padding:.65rem; border-radius:9px; background:var(--surface); }
.brand-logo-preview img { width:72px; height:42px; object-fit:contain; border-radius:6px; background:#fff; }
.brand-logo-preview span { color:var(--muted); font-size:.75rem; }
body.light .batch-task-row, body.light .copy-result-item, body.light .copy-keywords { background:#fff; border-color:#e2e8f0; }
body.light .product-select { background:rgba(255,255,255,.9); }

@media(max-width:640px) {
  .copywriting-form { grid-template-columns:1fr; }
  .copywriting-head, .batch-panel-head { align-items:flex-start; flex-direction:column; }
  .batch-task-row { align-items:flex-start; flex-direction:column; }
  .batch-task-actions { justify-content:flex-start; }
  .brand-color-row { align-items:center; }
}

/* --- COPYWRITING POLISH --- */
.copywriting-panel { position:relative; overflow:hidden; padding:1.1rem; background:linear-gradient(135deg, rgba(99,102,241,.16), rgba(34,197,94,.07)); border:1px solid rgba(129,140,248,.28); box-shadow:0 18px 45px rgba(0,0,0,.12); }
.copywriting-glow { position:absolute; right:-70px; top:-80px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(129,140,248,.28), transparent 68%); pointer-events:none; }
.copywriting-head { position:relative; margin-bottom:1rem; }
.copywriting-title-wrap { display:flex; align-items:center; gap:.75rem; min-width:0; }
.copywriting-icon { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:13px; background:linear-gradient(135deg, var(--primary), var(--primary-light)); color:#fff; box-shadow:0 10px 25px rgba(99,102,241,.28); }
.copywriting-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }
.copy-price-badge { display:inline-flex; align-items:center; gap:.25rem; padding:.38rem .7rem; border-radius:999px; background:rgba(245,158,11,.14); color:var(--warning); border:1px solid rgba(245,158,11,.28); font-size:.76rem; font-weight:800; white-space:nowrap; }
.copywriting-form label, .copy-selling-label { display:grid; gap:.32rem; min-width:0; }
.copywriting-form label > span, .copy-selling-label > span { color:var(--muted); font-size:.72rem; font-weight:700; }
.copywriting-form input, .copywriting-form select, .copy-selling-label textarea { background:rgba(17,17,27,.72); border:1px solid rgba(129,140,248,.18); }
.copywriting-form input:focus, .copywriting-form select:focus, .copy-selling-label textarea:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(99,102,241,.13); }
.copywriting-tip { margin-top:.55rem; color:var(--muted); font-size:.72rem; }
.copy-loading-card, .copy-error-card, .copy-success-head { display:flex; align-items:center; gap:.75rem; justify-content:space-between; padding:.8rem .9rem; border-radius:12px; background:rgba(17,17,27,.78); border:1px solid rgba(129,140,248,.18); }
.copy-loading-card { justify-content:flex-start; }
.copy-loading-card strong, .copy-error-card strong, .copy-success-head strong { display:block; color:var(--light); font-size:.88rem; }
.copy-loading-card span, .copy-error-card span, .copy-success-head span { display:block; color:var(--muted); font-size:.72rem; margin-top:.12rem; }
.copy-error-card { border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); }
.copy-error-card strong { color:var(--danger); }
.copy-success-head { border-color:rgba(34,197,94,.32); background:rgba(34,197,94,.08); }
.copy-success-head strong { color:var(--success); }
.copy-result-item.featured { border-color:rgba(129,140,248,.35); background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(17,17,27,.9)); }
.copy-result-item .btn, .copy-keywords .btn { flex:0 0 auto; }
body.light .copywriting-panel { background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,197,94,.05)); box-shadow:0 18px 45px rgba(15,23,42,.08); }
body.light .copywriting-form input, body.light .copywriting-form select, body.light .copy-selling-label textarea { background:#fff; border-color:#dbe3ef; }
body.light .copy-loading-card, body.light .copy-error-card, body.light .copy-success-head { background:#fff; border-color:#e2e8f0; }
body.light .copy-result-item.featured { background:linear-gradient(135deg, rgba(99,102,241,.08), #fff); }

@media(max-width:640px) {
  .copywriting-actions { width:100%; justify-content:flex-start; }
  .copy-success-head { align-items:flex-start; flex-direction:column; }
}
.copy-price-badge.vision { background:rgba(34,197,94,.14); color:var(--success); border-color:rgba(34,197,94,.28); }
.copy-analysis-card { padding:.9rem; border-radius:12px; background:rgba(99,102,241,.1); border:1px solid rgba(129,140,248,.24); }
.copy-analysis-title { color:var(--primary-light); font-size:.78rem; font-weight:900; letter-spacing:.04em; margin-bottom:.65rem; }
.copy-analysis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-bottom:.65rem; }
.copy-analysis-grid span { display:block; min-width:0; color:var(--light); font-size:.76rem; padding:.5rem .6rem; border-radius:8px; background:rgba(17,17,27,.55); }
.copy-analysis-grid strong { display:block; color:var(--muted); font-size:.66rem; margin-bottom:.18rem; }
.copy-analysis-card p { margin:.4rem 0 0; color:var(--light); font-size:.76rem; line-height:1.6; }
.copy-analysis-card p.muted { color:var(--muted); }
body.light .copy-analysis-card { background:rgba(99,102,241,.06); border-color:rgba(99,102,241,.18); }
body.light .copy-analysis-grid span { background:#fff; border:1px solid #e2e8f0; }
@media(max-width:640px) { .copy-analysis-grid { grid-template-columns:1fr; } }