/* ===== 卖爆AI Style v3 ===== */
:root {
  --bg: #0f1117; --bg2: #1a1d27; --bg3: #252836;
  --text: #e8e8f0; --text-secondary: #8b8fa3;
  --accent: #ff4136; --accent2: #ff8c00; --accent-gradient: linear-gradient(135deg, #ff4136, #ff8c00);
  --green: #2ecc71; --blue: #3498db; --border: #2d3045;
  --radius: 10px; --shadow: 0 4px 20px rgba(0,0,0,0.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:var(--accent2); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Toast */
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-80px); padding:12px 24px; border-radius:var(--radius); font-size:14px; z-index:9999; transition:transform .3s ease; white-space:nowrap; }
.toast-ok { background:var(--green); color:#fff; }
.toast-err { background:var(--accent); color:#fff; }
.toast-show { transform:translateX(-50%) translateY(0); }

/* Spinner */
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; vertical-align:middle; }
.loading-spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:none; border-radius:var(--radius); font-size:14px; cursor:pointer; transition:all .2s; font-weight:600; }
.btn-primary { background:var(--accent-gradient); color:#fff; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--accent); }
.btn-full { width:100%; justify-content:center; padding:14px; font-size:15px; margin-top:16px; }
.btn-sm { padding:6px 14px; font-size:13px; background:var(--bg3); color:var(--text); border:1px solid var(--border); }
.btn-sm:hover { border-color:var(--accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Input */
.input-field { width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:14px; outline:none; transition:border-color .2s; }
.input-field:focus { border-color:var(--accent2); }
select.input-field { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b8fa3' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
textarea.input-field { resize:vertical; }

/* Landing */
.landing { min-height:100vh; }
.landing-hero { text-align:center; padding:40px; }
.landing-logo { width:80px; height:80px; background:var(--accent-gradient); border-radius:20px; display:inline-flex; align-items:center; justify-content:center; font-size:42px; font-weight:900; color:#fff; margin-bottom:20px; }
.landing-hero h1 { font-size:36px; margin-bottom:8px; }
.landing-hero p { color:var(--text-secondary); font-size:16px; }
.landing-sub { margin-top:4px; font-size:14px !important; }
.landing-btns { margin-top:32px; display:flex; gap:16px; justify-content:center; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:var(--bg2); padding:32px; border-radius:16px; width:380px; max-width:90vw; position:relative; }
.modal-box h2 { margin-bottom:20px; text-align:center; }
.modal-box .input-field { margin-bottom:12px; }
.modal-switch { text-align:center; margin-top:16px; color:var(--text-secondary); font-size:13px; }
.modal-close { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; }

/* Dashboard Layout */
.dash-layout { display:flex; min-height:100vh; }
.sidebar { width:220px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; }
.sidebar-logo { display:flex; align-items:center; gap:10px; padding:20px 16px; font-size:18px; font-weight:700; }
.sidebar-logo-icon { width:32px; height:32px; background:var(--accent-gradient); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; font-size:16px; }
.sidebar-section { padding:8px 0; }
.sidebar-section-title { padding:8px 20px 4px; font-size:11px; text-transform:uppercase; color:var(--text-secondary); letter-spacing:1px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer; font-size:14px; color:var(--text-secondary); transition:all .15s; border-left:3px solid transparent; }
.sidebar-item:hover { background:var(--bg3); color:var(--text); }
.sidebar-item.active { color:var(--text); background:var(--bg3); border-left-color:var(--accent); }
.sidebar-bottom { margin-top:auto; padding:16px; border-top:1px solid var(--border); }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sidebar-avatar { width:36px; height:36px; background:var(--accent-gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.sidebar-username { font-size:13px; font-weight:600; }
.sidebar-credits { font-size:12px; color:var(--accent2); }
.sidebar-logout { width:100%; padding:8px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary); cursor:pointer; font-size:13px; }
.sidebar-logout:hover { border-color:var(--accent); color:var(--accent); }

.main-content { margin-left:220px; flex:1; display:flex; flex-direction:column; }
.main-header { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; border-bottom:1px solid var(--border); background:var(--bg2); }
.main-header h2 { font-size:18px; }
.header-credits { display:flex; align-items:center; gap:6px; color:var(--accent2); font-size:14px; font-weight:600; }
.main-body { padding:24px 32px; flex:1; overflow-y:auto; }

/* Home Cards */
.home-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.home-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; cursor:pointer; transition:all .2s; }
.home-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.home-card-icon { color:var(--accent); margin-bottom:12px; }
.home-card h3 { font-size:16px; margin-bottom:6px; }
.home-card p { font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.home-card-cost { font-size:12px; color:var(--accent2); font-weight:600; }
.home-balance { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.home-tip { background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.3); border-radius:var(--radius); padding:12px 16px; font-size:13px; }

/* Form */
.form-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.form-info { font-size:13px; color:var(--text-secondary); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:13px; color:var(--text-secondary); font-weight:500; }

/* Tasks */
.tasks-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tasks-tabs { display:flex; gap:4px; }
.tasks-tab { padding:8px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary); cursor:pointer; font-size:13px; transition:all .15s; }
.tasks-tab.active { background:var(--accent-gradient); color:#fff; border-color:transparent; }
.tasks-tab:hover:not(.active) { border-color:var(--accent); }

.task-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:10px; transition:border-color .15s; }
.task-card:hover { border-color:var(--accent); }
.task-card-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.task-card-bottom { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.task-type-badge { font-size:12px; padding:3px 8px; border-radius:4px; font-weight:600; }
.badge-video { background:rgba(52,152,219,.15); color:var(--blue); }
.badge-image { background:rgba(46,204,113,.15); color:var(--green); }
.task-name { font-weight:600; font-size:14px; flex:1; }
.task-detail { font-size:12px; color:var(--text-secondary); }
.task-time { font-size:12px; color:var(--text-secondary); }
.task-download { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--accent2); font-weight:600; padding:4px 10px; background:rgba(255,140,0,.1); border-radius:4px; }
.task-download:hover { background:rgba(255,140,0,.2); text-decoration:none; }
.task-preview { margin-top:10px; border-radius:8px; overflow:hidden; max-width:300px; }
.task-preview img { width:100%; display:block; border-radius:8px; }

.task-status-pending { color:var(--accent2); font-size:13px; }
.task-status-processing { color:var(--blue); font-size:13px; }
.task-status-completed { color:var(--green); font-size:13px; }
.task-status-failed { color:var(--accent); font-size:13px; }

.empty-state { text-align:center; padding:40px; color:var(--text-secondary); font-size:14px; }

/* Recharge */
.recharge-section { max-width:700px; }
.recharge-plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:20px 0; }
.plan-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; position:relative; transition:all .2s; }
.plan-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.plan-card.popular { border-color:var(--accent2); }
.plan-badge { position:absolute; top:-10px; right:12px; background:var(--accent-gradient); color:#fff; font-size:11px; padding:2px 10px; border-radius:10px; font-weight:600; }
.plan-price { font-size:28px; font-weight:700; color:var(--accent); margin:8px 0; }
.plan-credits { font-size:15px; color:var(--accent2); font-weight:600; margin-bottom:8px; }
.plan-card p { font-size:12px; color:var(--text-secondary); }
.recharge-info { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.recharge-info h4 { margin-bottom:12px; }
.recharge-info p { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.qr-placeholder { margin:16px 0; padding:24px; background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius); text-align:center; color:var(--text-secondary); font-size:13px; }
.recharge-tip { background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.3); border-radius:var(--radius); padding:10px 14px; font-size:13px; margin-top:12px; }

/* Account */
.account-section { max-width:700px; }
.account-info { display:flex; align-items:center; gap:16px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.account-avatar { width:48px; height:48px; background:var(--accent-gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; }
.account-phone { font-size:16px; font-weight:600; }
.account-balance { font-size:14px; color:var(--accent2); margin-top:2px; }

/* Credit Table */
.credit-table { width:100%; border-collapse:collapse; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.credit-table th { text-align:left; padding:10px 14px; font-size:12px; color:var(--text-secondary); background:var(--bg3); border-bottom:1px solid var(--border); }
.credit-table td { padding:10px 14px; font-size:13px; border-bottom:1px solid var(--border); }
.credit-pos { color:var(--green); font-weight:600; }
.credit-neg { color:var(--accent); font-weight:600; }

/* ===== Landing Page ===== */
.landing-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(15,17,23,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.logo { font-size:20px; font-weight:800; background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-btns { display:flex; gap:10px; }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); }
.btn-lg { padding:14px 32px; font-size:16px; }
.hero { text-align:center; padding:140px 32px 60px; max-width:800px; margin:0 auto; }
.hero h1 { font-size:42px; font-weight:800; line-height:1.3; margin-bottom:16px; }
.hero h1 span { background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero > p { color:var(--text-secondary); font-size:16px; margin-bottom:32px; }
.steps-section, .pricing-section, .cta-section { padding:60px 32px; max-width:800px; margin:0 auto; text-align:center; }
.section-title { font-size:28px; font-weight:700; margin-bottom:32px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.step-num { width:36px; height:36px; background:var(--accent-gradient); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; margin-bottom:12px; }
.step-card h3 { margin-bottom:6px; }
.step-card p { font-size:13px; color:var(--text-secondary); }
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:500px; margin:0 auto; }
.price-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative; transition:all .2s; }
.price-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.price-card.popular { border-color:var(--accent2); }
.price-name { font-size:14px; color:var(--text-secondary); margin-bottom:4px; }
.price-amount { font-size:32px; font-weight:800; color:var(--accent); margin-bottom:4px; }
.price-credits { font-size:16px; color:var(--accent2); font-weight:600; }
.cta-section h2 { font-size:28px; margin-bottom:12px; }
.cta-section p { color:var(--text-secondary); margin-bottom:24px; }
.footer { text-align:center; padding:32px; color:var(--text-secondary); font-size:13px; border-top:1px solid var(--border); }

/* ===== Auth Pages ===== */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.auth-box { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:36px; width:400px; max-width:90vw; }
.auth-box .logo { text-align:center; font-size:28px; margin-bottom:8px; display:block; }
.auth-subtitle { text-align:center; color:var(--text-secondary); font-size:14px; margin-bottom:24px; }
.auth-footer { text-align:center; margin-top:20px; color:var(--text-secondary); font-size:13px; }
.auth-footer a { color:var(--accent2); cursor:pointer; }
.auth-agree { display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.auth-agree input { margin-top:2px; }
.form-error { color:var(--accent); font-size:13px; display:none; margin-top:4px; padding:8px 12px; background:rgba(255,65,54,.1); border-radius:var(--radius); }
.form-hint { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.form-label { font-size:13px; color:var(--text-secondary); font-weight:500; display:block; margin-bottom:6px; }
.form-input, .form-select, .form-textarea { width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:14px; outline:none; transition:border-color .2s; font-family:inherit; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--accent2); }
.form-select { appearance:auto; }
.form-textarea { resize:vertical; min-height:60px; }

/* ===== Dashboard ===== */
.dashboard { display:flex; min-height:100vh; }
.sidebar-item svg { width:18px; height:18px; flex-shrink:0; }
.sidebar-item.disabled { opacity:.4; cursor:default; pointer-events:none; }
.badge-soon { font-size:10px; background:var(--bg3); color:var(--text-secondary); padding:2px 6px; border-radius:4px; margin-left:auto; }

/* Dashboard Home */
.dash-welcome { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; }
.dash-welcome h3 { font-size:18px; margin-bottom:4px; }
.dash-welcome p { color:var(--text-secondary); font-size:14px; }
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quick-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; cursor:pointer; transition:all .2s; }
.quick-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.quick-card svg { width:24px; height:24px; color:var(--accent); margin-bottom:10px; }
.quick-card h4 { font-size:15px; margin-bottom:4px; }
.quick-card p { font-size:13px; color:var(--text-secondary); }
.quick-card.disabled { opacity:.4; cursor:default; pointer-events:none; }

/* ===== Video / Image Form ===== */
.video-form { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; max-width:800px; }
.cost-notice { font-size:13px; color:var(--text-secondary); margin-bottom:20px; padding:12px 16px; background:rgba(255,140,0,.08); border:1px solid rgba(255,140,0,.2); border-radius:var(--radius); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-row.full { grid-template-columns:1fr; }
.dialogue-text-wrap { max-height:0; overflow:hidden; transition:max-height .3s ease; margin-top:8px; }
.dialogue-text-wrap.show { max-height:200px; }

/* ===== Tasks Page ===== */
.tasks-page { max-width:900px; }
.tasks-table-wrap { overflow-x:auto; margin-bottom:20px; }
.tasks-table { width:100%; border-collapse:collapse; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tasks-table th { text-align:left; padding:10px 14px; font-size:12px; color:var(--text-secondary); background:var(--bg3); border-bottom:1px solid var(--border); }
.tasks-table td { padding:10px 14px; font-size:13px; border-bottom:1px solid var(--border); }
.status-badge { font-size:12px; padding:3px 10px; border-radius:4px; font-weight:600; }
.status-pending { background:rgba(255,140,0,.12); color:var(--accent2); }
.status-processing { background:rgba(52,152,219,.12); color:var(--blue); }
.status-done { background:rgba(46,204,113,.12); color:var(--green); }
.status-failed { background:rgba(255,65,54,.12); color:var(--accent); }
.download-link { color:var(--accent2); font-weight:600; font-size:13px; }
.download-link:hover { text-decoration:underline; }

/* ===== Recharge Page ===== */
.recharge-page { max-width:700px; }
.plan-unit { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.plan-card.selected { border-color:var(--accent2); box-shadow:0 0 12px rgba(255,140,0,.2); }
.recharge-qr-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-top:24px; text-align:center; }
.recharge-qr-section h3 { margin-bottom:8px; }
.recharge-qr-section > p { color:var(--text-secondary); font-size:13px; margin-bottom:16px; }
.qr-image { max-width:200px; border-radius:var(--radius); margin:0 auto 16px; display:block; }
.recharge-steps { list-style:none; text-align:left; max-width:360px; margin:0 auto; }
.recharge-steps li { font-size:13px; color:var(--text-secondary); padding:6px 0; }

/* ===== Account Page ===== */
.account-page { max-width:700px; }
.account-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.account-stat { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; }
.account-stat .label { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.account-stat .value { font-size:18px; font-weight:700; }
.account-stat .value.credits { font-size:28px; color:var(--accent2); }
.records-section { margin-top:20px; }
.records-section h3 { margin-bottom:12px; }
.records-wrap { overflow-x:auto; }
.records-table { width:100%; border-collapse:collapse; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.records-table th { text-align:left; padding:10px 14px; font-size:12px; color:var(--text-secondary); background:var(--bg3); border-bottom:1px solid var(--border); }
.records-table td { padding:10px 14px; font-size:13px; border-bottom:1px solid var(--border); }