*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Segoe UI,Arial,sans-serif;background:#0b1220;color:#e6edf7}
a{color:#8ab4ff;text-decoration:none}
button{cursor:pointer;font-family:inherit}
.gradient-bg{background:radial-gradient(1200px 600px at 10% -10%,#1f3fbf30,transparent 60%),radial-gradient(1000px 500px at 100% 0%,#7c3aed33,transparent 60%),linear-gradient(180deg,#0b1220,#0a0f1c)}

/* ===== 顶栏 ===== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(11,18,32,.7);border-bottom:1px solid #1e2a44}
.nav-inner{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.brand-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.nav-links{display:flex;gap:6px;margin-left:16px}
.nav-links button{background:transparent;color:#c5d0e6;border:0;padding:8px 14px;border-radius:8px;font-size:14px}
.nav-links button.active{background:#1a2542;color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.chip{background:#1a2542;padding:6px 12px;border-radius:100px;font-size:13px;color:#bfd0ff}
.btn{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:0;padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#1a2542;color:#e6edf7}
.btn.danger{background:linear-gradient(135deg,#dc2626,#f59e0b)}
.btn.sm{padding:6px 12px;font-size:12px}

.container{max-width:1280px;margin:0 auto;padding:28px 24px}

/* ===== 卡片 ===== */
.card{background:linear-gradient(180deg,#111a2f,#0e1628);border:1px solid #1e2a44;border-radius:16px;padding:22px;margin-bottom:18px}
.card h2{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 .dot{width:6px;height:6px;border-radius:50%;background:#8ab4ff}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:linear-gradient(180deg,#152040,#0f1830);border:1px solid #24345c;border-radius:14px;padding:18px}
.stat .l{color:#8695b8;font-size:12px;margin-bottom:8px}
.stat .v{font-size:26px;font-weight:800;background:linear-gradient(135deg,#a78bfa,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #1e2a44}
th{color:#8695b8;font-weight:600;background:#0f1830}
tr:hover td{background:#131e3a}

/* 表单 */
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-row label{font-size:13px;color:#8695b8}
input,select,textarea{background:#0e1628;border:1px solid #24345c;color:#e6edf7;padding:10px 12px;border-radius:8px;font-size:14px;font-family:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:#6366f1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* 状态 */
.badge{display:inline-block;padding:3px 8px;border-radius:100px;font-size:11px;font-weight:600}
.badge.normal{background:#065f46;color:#a7f3d0}
.badge.freeze{background:#7c2d12;color:#fed7aa}
.badge.cancel{background:#7f1d1d;color:#fecaca}
.badge.pending{background:#78350f;color:#fde68a}
.badge.approved{background:#065f46;color:#a7f3d0}
.badge.rejected{background:#7f1d1d;color:#fecaca}
.badge.applying{background:#1e40af;color:#bfdbfe}

/* 虚拟卡视觉 */
.vc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.vc{aspect-ratio:1.6;background:linear-gradient(135deg,#312e81,#7c3aed 60%,#ec4899);border-radius:18px;padding:20px;position:relative;overflow:hidden;color:#fff;box-shadow:0 20px 40px -20px rgba(124,58,237,.6);cursor:pointer;transition:transform .2s}
.vc:hover{transform:translateY(-4px)}
.vc.freeze{background:linear-gradient(135deg,#334155,#64748b);opacity:.75}
.vc.cancel{background:linear-gradient(135deg,#475569,#334155);opacity:.5}
.vc::before{content:"";position:absolute;top:-40%;right:-20%;width:70%;height:180%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.vc .scheme{font-weight:800;font-size:18px;letter-spacing:1px}
.vc .no{font-family:"SF Mono",Menlo,monospace;font-size:20px;letter-spacing:3px;margin-top:38px}
.vc .foot{display:flex;justify-content:space-between;align-items:end;margin-top:18px;font-size:12px;opacity:.9}
.vc .bal{font-size:24px;font-weight:800;margin-top:6px}

/* Landing */
.hero{padding:80px 24px 40px}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{font-size:52px;font-weight:800;line-height:1.15;background:linear-gradient(135deg,#fff,#a5b4fc 60%,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:17px;color:#a3b0cc;margin:20px 0 32px;max-width:520px;line-height:1.6}
.hero-actions{display:flex;gap:12px}
.hero-visual{position:relative;height:420px}
.hero-visual .vc{position:absolute;width:340px;transform:rotate(-6deg);top:20px;left:20px}
.hero-visual .vc:nth-child(2){transform:rotate(6deg);top:80px;left:120px;background:linear-gradient(135deg,#0ea5e9,#22d3ee,#84cc16)}
.hero-visual .vc:nth-child(3){transform:rotate(-2deg);top:160px;left:60px;background:linear-gradient(135deg,#f43f5e,#f97316,#fbbf24)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:40px 24px 60px;max-width:1200px;margin:0 auto}
.feature{background:linear-gradient(180deg,#111a2f,#0e1628);border:1px solid #1e2a44;border-radius:16px;padding:24px}
.feature .icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#a855f7);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.feature h3{font-size:16px;margin-bottom:8px}
.feature p{font-size:13px;color:#a3b0cc;line-height:1.6}

/* Modal */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.modal{background:#0e1628;border:1px solid #24345c;border-radius:16px;padding:26px;width:520px;max-width:92vw;max-height:90vh;overflow:auto}
.modal h3{margin-bottom:16px;font-size:18px}
.modal-close{float:right;background:transparent;border:0;color:#8695b8;font-size:22px;line-height:1}

/* Toast */
#toast{position:fixed;top:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:#1a2542;border:1px solid #24345c;padding:10px 16px;border-radius:8px;color:#e6edf7;font-size:14px;box-shadow:0 10px 30px -10px #000;min-width:220px;animation:slideIn .25s ease}
.toast.err{border-color:#dc2626;background:#3b1720}
.toast.ok{border-color:#16a34a;background:#0f2a1e}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid #1e2a44}
.tabs button{background:transparent;color:#8695b8;border:0;padding:12px 20px;font-size:14px;border-bottom:2px solid transparent}
.tabs button.active{color:#fff;border-bottom-color:#6366f1}

.empty{padding:40px;text-align:center;color:#6b7897}
code{background:#0a0f1c;padding:2px 6px;border-radius:4px;font-size:12px;color:#a5b4fc}
.mono{font-family:"SF Mono",Menlo,monospace}

@media (max-width:768px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .features{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}