/* ===== 环仕跨境AI Style v7 — 冰蓝射灯·浮动粒子·高端氛围 ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root {
  --bg: #08183a; --bg2: #0c2248; --bg3: #10284e;
  --text: #dce8f8; --text-secondary: #7a98c0; --text-muted: #4a6888;
  --gold: #30e890; --gold-light: #6af0b0; --gold-dark: #18905c;
  --accent: #30e890; --accent2: #6af0b0;
  --accent-gradient: linear-gradient(135deg, #1858b0, #30e890);
  --green: #30e890; --blue: #70b0f8; --red: #e85d5d;
  --border: #1a3460; --border-gold: rgba(48,232,144,.15);
  --radius: 10px; --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --bg-secondary: #0a1e42;
  --orange: #6af0b0;
  --glow: 0 0 20px rgba(48,232,144,.18);
  --blue-glow: rgba(80,160,255,.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:var(--gold-light); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== 射灯动画 ===== */
@keyframes spotGreen {
  0%{background:conic-gradient(from 135deg at 0% -15%,rgba(48,232,160,.28) 0deg,rgba(48,232,160,.07) 24deg,transparent 44deg)}
  16%{background:conic-gradient(from 160deg at 30% -6%,rgba(48,232,160,.35) 0deg,rgba(48,232,160,.1) 28deg,transparent 50deg)}
  33%{background:conic-gradient(from 180deg at 60% -4%,rgba(48,232,160,.25) 0deg,rgba(48,232,160,.06) 22deg,transparent 40deg)}
  50%{background:conic-gradient(from 195deg at 85% -8%,rgba(48,232,160,.3) 0deg,rgba(48,232,160,.08) 26deg,transparent 46deg)}
  66%{background:conic-gradient(from 180deg at 55% -5%,rgba(48,232,160,.22) 0deg,rgba(48,232,160,.05) 20deg,transparent 38deg)}
  83%{background:conic-gradient(from 150deg at 18% -12%,rgba(48,232,160,.32) 0deg,rgba(48,232,160,.09) 26deg,transparent 48deg)}
  100%{background:conic-gradient(from 135deg at 0% -15%,rgba(48,232,160,.28) 0deg,rgba(48,232,160,.07) 24deg,transparent 44deg)}
}
@keyframes spotBlue {
  0%{background:conic-gradient(from 200deg at 100% -12%,rgba(80,160,255,.26) 0deg,rgba(80,160,255,.06) 22deg,transparent 40deg)}
  16%{background:conic-gradient(from 180deg at 72% -5%,rgba(100,180,255,.32) 0deg,rgba(100,180,255,.08) 26deg,transparent 46deg)}
  33%{background:conic-gradient(from 160deg at 42% -10%,rgba(80,160,255,.22) 0deg,rgba(80,160,255,.05) 20deg,transparent 36deg)}
  50%{background:conic-gradient(from 145deg at 15% -14%,rgba(100,180,255,.28) 0deg,rgba(100,180,255,.07) 24deg,transparent 42deg)}
  66%{background:conic-gradient(from 165deg at 48% -8%,rgba(80,160,255,.24) 0deg,rgba(80,160,255,.06) 22deg,transparent 38deg)}
  83%{background:conic-gradient(from 190deg at 88% -10%,rgba(100,180,255,.3) 0deg,rgba(100,180,255,.08) 26deg,transparent 44deg)}
  100%{background:conic-gradient(from 200deg at 100% -12%,rgba(80,160,255,.26) 0deg,rgba(80,160,255,.06) 22deg,transparent 40deg)}
}
@keyframes spotCyan {
  0%{background:conic-gradient(from 170deg at 50% -6%,rgba(60,220,240,.08) 0deg,transparent 18deg)}
  25%{background:conic-gradient(from 155deg at 25% -10%,rgba(60,220,240,.16) 0deg,transparent 26deg)}
  50%{background:conic-gradient(from 185deg at 75% -4%,rgba(60,220,240,.1) 0deg,transparent 20deg)}
  75%{background:conic-gradient(from 160deg at 35% -12%,rgba(60,220,240,.14) 0deg,transparent 24deg)}
  100%{background:conic-gradient(from 170deg at 50% -6%,rgba(60,220,240,.08) 0deg,transparent 18deg)}
}
@keyframes glowFollow {
  0%{background:radial-gradient(ellipse 400px 550px at 5% 30%,rgba(48,232,160,.1) 0%,transparent 70%)}
  25%{background:radial-gradient(ellipse 450px 600px at 45% 15%,rgba(48,232,160,.15) 0%,transparent 70%)}
  50%{background:radial-gradient(ellipse 400px 550px at 80% 20%,rgba(48,232,160,.1) 0%,transparent 70%)}
  75%{background:radial-gradient(ellipse 450px 600px at 40% 25%,rgba(48,232,160,.13) 0%,transparent 70%)}
  100%{background:radial-gradient(ellipse 400px 550px at 5% 30%,rgba(48,232,160,.1) 0%,transparent 70%)}
}
@keyframes glowFollowB {
  0%{background:radial-gradient(ellipse 380px 500px at 95% 25%,rgba(80,160,255,.1) 0%,transparent 70%)}
  25%{background:radial-gradient(ellipse 420px 560px at 55% 12%,rgba(100,180,255,.16) 0%,transparent 70%)}
  50%{background:radial-gradient(ellipse 380px 500px at 20% 20%,rgba(80,160,255,.1) 0%,transparent 70%)}
  75%{background:radial-gradient(ellipse 420px 560px at 60% 18%,rgba(100,180,255,.14) 0%,transparent 70%)}
  100%{background:radial-gradient(ellipse 380px 500px at 95% 25%,rgba(80,160,255,.1) 0%,transparent 70%)}
}
@keyframes cornerBL { 0%{background:radial-gradient(ellipse 350px 280px at -5% 105%,rgba(48,232,160,.08) 0%,transparent 60%)}50%{background:radial-gradient(ellipse 450px 350px at 5% 100%,rgba(48,232,160,.16) 0%,transparent 60%)}100%{background:radial-gradient(ellipse 350px 280px at -5% 105%,rgba(48,232,160,.08) 0%,transparent 60%)} }
@keyframes cornerBR { 0%{background:radial-gradient(ellipse 400px 300px at 108% 108%,rgba(60,100,220,.12) 0%,transparent 55%)}50%{background:radial-gradient(ellipse 550px 400px at 100% 100%,rgba(60,100,220,.22) 0%,transparent 55%)}100%{background:radial-gradient(ellipse 400px 300px at 108% 108%,rgba(60,100,220,.12) 0%,transparent 55%)} }
@keyframes particle1 { 0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.8}90%{opacity:.8}100%{transform:translateY(-100vh) translateX(40px);opacity:0} }
@keyframes particle2 { 0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(-100vh) translateX(-30px);opacity:0} }
@keyframes particle3 { 0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(-90vh) translateX(20px);opacity:0} }
@keyframes edgePulse { 0%{opacity:.25}50%{opacity:1}100%{opacity:.25} }
@keyframes logoGlow { 0%{box-shadow:0 0 8px rgba(48,232,160,.15)}50%{box-shadow:0 0 18px rgba(48,232,160,.35)}100%{box-shadow:0 0 8px rgba(48,232,160,.15)} }
@keyframes textGlow { 0%{text-shadow:0 0 20px rgba(48,232,160,.35),0 0 50px rgba(48,232,160,.12)}50%{text-shadow:0 0 40px rgba(48,232,160,.65),0 0 80px rgba(48,232,160,.3),0 0 120px rgba(48,232,160,.1)}100%{text-shadow:0 0 20px rgba(48,232,160,.35),0 0 50px rgba(48,232,160,.12)} }
@keyframes dotPulse { 0%{box-shadow:0 0 4px rgba(48,232,160,.3)}50%{box-shadow:0 0 14px rgba(48,232,160,.85)}100%{box-shadow:0 0 4px rgba(48,232,160,.3)} }
@keyframes btnPulse { 0%{box-shadow:0 0 14px rgba(48,232,160,.15),0 0 35px rgba(60,140,240,.08)}50%{box-shadow:0 0 35px rgba(48,232,160,.45),0 0 70px rgba(60,140,240,.2)}100%{box-shadow:0 0 14px rgba(48,232,160,.15),0 0 35px rgba(60,140,240,.08)} }
@keyframes stripGlow { 0%{box-shadow:1px 0 8px rgba(48,232,160,.03)}50%{box-shadow:1px 0 28px rgba(48,232,160,.14)}100%{box-shadow:1px 0 8px rgba(48,232,160,.03)} }
@keyframes cardBorderB { 0%{border-color:rgba(80,160,255,.08)}50%{border-color:rgba(80,160,255,.2)}100%{border-color:rgba(80,160,255,.08)} }
@keyframes spin { to { transform:rotate(360deg); } }

/* 射灯和粒子容器 */
.ambient-lights { position:fixed; inset:0; pointer-events:none; z-index:0; }
.ambient-lights .light { position:absolute; inset:0; }
.ambient-lights .spot-green { animation:spotGreen 5s ease-in-out infinite; }
.ambient-lights .spot-blue { animation:spotBlue 6s ease-in-out infinite; }
.ambient-lights .spot-cyan { animation:spotCyan 4.5s ease-in-out infinite; }
.ambient-lights .glow-green { animation:glowFollow 5s ease-in-out infinite; }
.ambient-lights .glow-blue { animation:glowFollowB 6s ease-in-out infinite; }
.ambient-lights .corner-bl { animation:cornerBL 6s ease-in-out infinite; }
.ambient-lights .corner-br { animation:cornerBR 7s ease-in-out infinite; }
.ambient-lights .edge-top { position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(80,160,255,.3) 25%,rgba(60,220,240,.25) 50%,rgba(80,160,255,.3) 75%,transparent 95%);animation:edgePulse 3.5s ease-in-out infinite; }
.ambient-lights .edge-bottom { position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(48,232,160,.3) 5%,transparent 35%,transparent 65%,rgba(60,140,240,.25) 95%);animation:edgePulse 4s ease-in-out infinite; }
.ambient-particles { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambient-particles .dot { position:absolute; border-radius:50%; }
.ambient-particles .dot-g { background:rgba(48,232,160,.6); }
.ambient-particles .dot-b { background:rgba(80,160,255,.5); }
.ambient-particles .dot-c { background:rgba(60,220,240,.4); }

/* 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; max-width:90vw; text-align:center; }
.toast-ok { background:var(--gold-dark); color:#fff; }
.toast-err { background:var(--red); 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(--gold); border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }

/* 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; font-family:inherit; position:relative; z-index:1; }
.btn-primary { background:var(--accent-gradient); color:#fff; animation:btnPulse 3s ease-in-out infinite; }
.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(--gold); }
.btn-ghost { background:rgba(48,232,144,.08); color:var(--gold); border:1px solid var(--border-gold); }
.btn-ghost:hover { background:rgba(48,232,144,.15); border-color:var(--gold); }
.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(--gold); }
.btn-lg { padding:14px 32px; font-size:16px; }
.btn:disabled { opacity:.5; cursor:not-allowed; animation:none; }

/* Input */
.input-field, .form-input, .form-textarea, .form-select { width:100%; padding:10px 14px; background:rgba(8,24,58,.8); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:14px; outline:none; transition:border-color .2s; font-family:inherit; backdrop-filter:blur(4px); }
.input-field:focus, .form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(48,232,144,.1); }
select.input-field, .form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237a98c0' 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; background-color:rgba(8,24,58,.8); }
textarea.input-field, .form-textarea { resize:vertical; }

/* ===== Landing ===== */
.landing { min-height:100vh; position:relative; z-index:1; }
.landing-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; border-bottom:1px solid rgba(80,160,255,.1); background:rgba(8,24,58,.6); backdrop-filter:blur(12px); position:relative; z-index:10; }
.logo { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; color:var(--gold); cursor:pointer; }
.logo-icon { width:36px; height:36px; border-radius:10px; object-fit:contain; animation:logoGlow 3s ease-in-out infinite; }
.nav-btns { display:flex; gap:10px; }

.hero { text-align:center; padding:80px 20px 60px; position:relative; z-index:1;
  background: radial-gradient(ellipse at 20% 50%, rgba(60,100,220,.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(48,232,144,.06) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, rgba(60,220,240,.06) 0%, transparent 50%); }
.hero-badge { display:inline-block; padding:6px 18px; background:rgba(80,160,255,.1); border:1px solid rgba(80,160,255,.15); border-radius:20px; font-size:13px; color:var(--blue); margin-bottom:24px; letter-spacing:2px; }
.hero h1 { font-size:48px; font-weight:900; color:var(--gold); animation:textGlow 3s ease-in-out infinite; margin-bottom:16px; }
.hero p { color:var(--text-secondary); font-size:16px; line-height:1.8; margin-bottom:32px; }

.steps-section { padding:60px 20px; max-width:800px; margin:0 auto; position:relative; z-index:1; }
.section-title { text-align:center; font-size:28px; font-weight:700; margin-bottom:32px; color:var(--gold); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step-card { background:rgba(12,34,72,.6); border:1px solid var(--border); border-radius:16px; padding:32px 24px; text-align:center; transition:all .3s; backdrop-filter:blur(8px); }
.step-card:hover { border-color:var(--border-gold); transform:translateY(-3px); box-shadow:var(--glow); }
.step-num { width:48px; height:48px; background:var(--accent-gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#fff; margin:0 auto 16px; box-shadow:0 0 20px rgba(48,232,144,.3); }
.step-card h3 { margin-bottom:8px; font-size:16px; }
.step-card p { font-size:13px; color:var(--text-secondary); }

.pricing-section { padding:40px 20px; max-width:600px; margin:0 auto; position:relative; z-index:1; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.price-card { background:rgba(12,34,72,.6); border:1px solid var(--border); border-radius:16px; padding:28px 20px; text-align:center; transition:all .3s; backdrop-filter:blur(8px); }
.price-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.price-card.popular { border-color:var(--gold); box-shadow:0 0 24px rgba(48,232,144,.1); position:relative; }
.price-card.popular::after { content:'推荐'; position:absolute; top:-10px; right:12px; background:var(--accent-gradient); color:#fff; font-size:11px; padding:2px 10px; border-radius:10px; font-weight:700; }
.price-name { font-size:14px; color:var(--text-secondary); margin-bottom:8px; }
.price-amount { font-size:36px; font-weight:900; color:var(--gold); margin-bottom:4px; }
.price-credits { font-size:15px; color:var(--gold-light); font-weight:600; }

.contact-card { max-width:420px; margin:0 auto; background:rgba(12,34,72,.6); border:1px solid var(--border-gold); border-radius:16px; padding:32px 24px; backdrop-filter:blur(8px); position:relative; z-index:1; }

.footer { text-align:center; padding:32px; color:var(--text-muted); font-size:13px; border-top:1px solid var(--border); background:rgba(8,24,58,.6); position:relative; z-index:1; }

/* ===== Auth ===== */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; position:relative; z-index:1;
  background: radial-gradient(ellipse at 30% 40%, rgba(60,100,220,.1) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(48,232,144,.06) 0%, transparent 40%); }
.auth-box { background:rgba(12,34,72,.8); border:1px solid var(--border); border-radius:20px; padding:40px 32px; width:400px; max-width:100%; backdrop-filter:blur(12px); }
.auth-box .logo { justify-content:center; margin-bottom:8px; }
.auth-subtitle { text-align:center; color:var(--text-secondary); font-size:14px; margin-bottom:24px; }
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:13px; color:var(--text-secondary); font-weight:500; margin-bottom:6px; }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-error { display:none; color:var(--red); font-size:13px; padding:8px 12px; background:rgba(232,93,93,.1); border-radius:var(--radius); margin-bottom:8px; }
.auth-agree { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); margin:12px 0 16px; cursor:pointer; }
.auth-footer { text-align:center; margin-top:16px; font-size:13px; color:var(--text-secondary); }
.auth-footer a { color:var(--gold); cursor:pointer; }

/* ===== Dashboard Layout ===== */
.dashboard { display:flex; min-height:100vh; position:relative; z-index:1; }
.sidebar { width:230px; background:linear-gradient(180deg, rgba(60,140,240,.06), rgba(8,24,58,.96) 30%, rgba(8,24,58,.96) 75%, rgba(48,232,160,.04)); border-right:1px solid rgba(48,232,160,.1); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; animation:stripGlow 4s ease-in-out infinite; backdrop-filter:blur(8px); }
.sidebar-logo { display:flex; align-items:center; gap:10px; padding:20px 16px; font-size:17px; font-weight:700; color:var(--gold); }
.sidebar-logo .logo-icon { width:32px; height:32px; border-radius:8px; object-fit:contain; flex-shrink:0; animation:logoGlow 3s ease-in-out infinite; }
.sidebar-section { padding:8px 0; }
.sidebar-section-title { padding:8px 20px 4px; font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:1.5px; }
.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 svg { width:18px; height:18px; flex-shrink:0; }
.sidebar-item:hover { background:rgba(48,232,144,.04); color:var(--text); }
.sidebar-item.active { color:var(--gold); background:rgba(48,232,144,.08); border-left-color:var(--gold); }
.sidebar-item.active svg { filter:drop-shadow(0 0 4px rgba(48,232,144,.4)); }
.sidebar-item.disabled { opacity:.4; cursor:not-allowed; }
.badge-free { font-size:10px; padding:2px 6px; border-radius:4px; background:rgba(48,232,144,.1); color:var(--green); margin-left:auto; }
.badge-soon { font-size:10px; padding:2px 6px; border-radius:4px; background:var(--bg3); color:var(--text-muted); margin-left:auto; }
.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(--gold); }
.sidebar-logout { width:100%; padding:8px; background:rgba(16,40,78,.8); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-secondary); cursor:pointer; font-size:13px; font-family:inherit; }
.sidebar-logout:hover { border-color:var(--gold); color:var(--gold); }

.main-content { margin-left:230px; 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:rgba(8,24,58,.7); backdrop-filter:blur(8px); }
.main-header h2 { font-size:18px; }
.header-credits { display:flex; align-items:center; gap:6px; color:var(--gold); font-size:14px; font-weight:600; }
.header-credits svg { width:18px; height:18px; }
.main-body { padding:24px 32px; flex:1; overflow-y:auto; min-height:0; }

/* Dashboard Home */
.dash-welcome { margin-bottom:24px; }
.dash-welcome h3 { font-size:22px; margin-bottom:4px; }
.dash-welcome p { color:var(--text-secondary); font-size:14px; }
.quick-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.quick-card { background:rgba(12,34,72,.5); border:1px solid var(--border); border-radius:14px; padding:24px 20px; cursor:pointer; transition:all .3s; backdrop-filter:blur(6px); animation:cardBorderB 5s ease-in-out infinite; }
.quick-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--glow); }
.quick-card svg { width:28px; height:28px; color:var(--gold); margin-bottom:12px; }
.quick-card h4 { font-size:15px; margin-bottom:6px; }
.quick-card p { font-size:13px; color:var(--text-secondary); }
.quick-card.disabled { opacity:.4; cursor:not-allowed; animation:none; }

/* Form */
.video-form { max-width:800px; }
.cost-notice { font-size:14px; color:var(--text-secondary); margin-bottom:16px; padding:10px 16px; background:rgba(48,232,144,.04); border:1px solid var(--border-gold); border-radius:var(--radius); }
.cost-notice strong { color:var(--gold); }
.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; margin-top:8px; }
.dialogue-text-wrap.show { max-height:200px; }

/* Tasks */
.tasks-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tasks-header h3 { font-size:16px; }
.tasks-table-wrap { overflow-x:auto; }
.tasks-table { width:100%; border-collapse:collapse; background:rgba(12,34,72,.5); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tasks-table th { text-align:left; padding:10px 12px; font-size:12px; color:var(--text-muted); background:rgba(16,40,78,.6); border-bottom:1px solid var(--border); }
.tasks-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid var(--border); }
.status-badge { font-size:12px; padding:3px 8px; border-radius:4px; font-weight:600; }
.status-pending { background:rgba(48,232,144,.08); color:var(--gold); }
.status-processing { background:rgba(112,176,248,.1); color:var(--blue); }
.status-done { background:rgba(48,232,144,.12); color:var(--green); }
.status-failed { background:rgba(232,93,93,.1); color:var(--red); }
.download-link { color:var(--gold); font-size:12px; font-weight:600; }
.download-link:hover { text-decoration:underline; }
.empty-state { text-align:center; padding:40px; color:var(--text-muted); font-size:14px; }
.home-tip { background:rgba(48,232,144,.05); border:1px solid rgba(48,232,144,.12); border-radius:var(--radius); padding:12px 16px; font-size:13px; }

/* Recharge */
.recharge-page { max-width:700px; }
.recharge-plans { display:grid; gap:14px; margin:20px 0; }
.plan-card { background:rgba(12,34,72,.5); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; cursor:pointer; transition:all .3s; backdrop-filter:blur(6px); }
.plan-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--glow); }
.plan-card.popular { border-color:var(--gold); }
.plan-card.selected { border-color:var(--gold); box-shadow:0 0 0 2px rgba(48,232,144,.2); }
.plan-price { font-size:28px; font-weight:900; color:var(--gold); margin:8px 0; }
.plan-credits { font-size:15px; color:var(--gold-light); font-weight:600; margin-bottom:4px; }
.plan-unit { font-size:12px; color:var(--text-muted); }
.recharge-qr-section { margin-top:24px; }
.recharge-qr-section h3 { font-size:16px; margin-bottom:8px; }
.recharge-qr-section p { font-size:13px; color:var(--text-secondary); }
.recharge-steps { list-style:none; margin-top:16px; }
.recharge-steps li { font-size:13px; color:var(--text-secondary); padding:4px 0; }

/* Account */
.account-page { max-width:700px; }
.account-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.account-stat { background:rgba(12,34,72,.5); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; backdrop-filter:blur(6px); }
.account-stat .label { font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.account-stat .value { font-size:24px; font-weight:700; }
.account-stat .value.credits { color:var(--gold); }
.records-section { margin-top:20px; }
.records-section h3 { font-size:16px; margin-bottom:12px; }
.records-wrap { overflow-x:auto; overflow-y:auto; max-height:400px; }
.records-table { width:100%; border-collapse:collapse; background:rgba(12,34,72,.5); 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-muted); background:rgba(16,40,78,.6); border-bottom:1px solid var(--border); }
.records-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(--red); font-weight:600; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); }
.modal-box { background:rgba(12,34,72,.95); padding:32px; border-radius:16px; width:380px; max-width:90vw; position:relative; border:1px solid var(--border); backdrop-filter:blur(12px); }

/* ===== Responsive ===== */
@media(max-width:768px) {
  .sidebar { width:0; overflow:hidden; }
  .main-content { margin-left:0; }
  .steps-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .account-stats { grid-template-columns:1fr; }
  .hero h1 { font-size:32px; }
}