:root{--bg:#070b16;--panel:#0d1424;--panel2:#111b30;--line:rgba(88,145,255,.18);--line2:rgba(88,145,255,.32);--text:#e8f0ff;--muted:#8ea0c0;--cyan:#22d3ee;--blue:#3b82f6;--violet:#8b5cf6;--green:#34d399;--amber:#fbbf24;--red:#fb7185;--shadow:0 20px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box;margin:0;padding:0}
.hidden{display:none!important}
body{background:radial-gradient(circle at 12% -10%,rgba(34,211,238,.13),transparent 35%),radial-gradient(circle at 90% 0%,rgba(139,92,246,.13),transparent 32%),var(--bg);color:var(--text);font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}
button{font-family:inherit}
.app{max-width:1240px;margin:0 auto;padding:28px 22px 48px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;font-weight:900}
.brand h1{font-size:21px;letter-spacing:.3px}
.brand .sub{font-size:12px;color:var(--muted);margin-top:4px}
.userbar{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.userbar strong{color:var(--text)}
.hero{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:linear-gradient(180deg,rgba(17,26,46,.94),rgba(13,20,36,.94));border:1px solid var(--line);border-radius:18px;padding:18px}
.stat .label{font-size:12px;color:var(--muted);margin-bottom:10px}
.stat .value{font-size:24px;font-weight:800;letter-spacing:.4px}
.stat .value small{font-size:12px;color:var(--muted);font-weight:500}
.card{background:linear-gradient(180deg,rgba(17,26,46,.94),rgba(13,20,36,.94));border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:18px}
.card h2{font-size:16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .desc{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid .card{margin-bottom:0}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px}
.field label{font-size:11px;color:var(--muted)}
input,select,textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 12px;color:var(--text);outline:none;width:100%;font-family:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
select option,select optgroup{background:#0d1424;color:#e8f0ff}
select optgroup{color:#8ea0c0}
button{border:0;border-radius:12px;padding:11px 14px;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-weight:700;cursor:pointer;font-size:14px}
button:hover{filter:brightness(1.08)}
button.ghost{background:rgba(255,255,255,.06);color:var(--muted)}
button.success{background:linear-gradient(135deg,#10b981,#0ea5e9)}
button.danger{background:linear-gradient(135deg,#ef4444,#ec4899)}
button.warn{background:linear-gradient(135deg,#f59e0b,#ef4444)}
button:disabled{opacity:.45;cursor:not-allowed}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:12px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.table th{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.3px}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge.green{background:rgba(52,211,153,.14);color:var(--green)}
.badge.amber{background:rgba(251,191,36,.14);color:var(--amber)}
.badge.red{background:rgba(251,113,133,.14);color:var(--red)}
.badge.blue{background:rgba(59,130,246,.14);color:var(--cyan)}
.badge.gray{background:rgba(255,255,255,.08);color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:34px 10px;font-size:13px}
.toast{position:fixed;right:22px;bottom:22px;max-width:380px;display:flex;flex-direction:column;gap:10px;z-index:99}
.toast-item{background:#111b30;border:1px solid var(--line2);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px;line-height:1.5}
.mobile-phone{max-width:430px;margin:0 auto}
.scan-panel{max-width:430px;margin:0 auto;text-align:center}
.scan-panel .qr{font-size:64px;display:block;margin:18px auto}
.login-wrap{max-width:420px;margin:70px auto;background:linear-gradient(180deg,rgba(17,26,46,.96),rgba(13,20,36,.96));border:1px solid var(--line);border-radius:24px;padding:32px}
.login-wrap h1{font-size:22px;margin-bottom:8px}
.login-wrap .sub{color:var(--muted);font-size:13px;margin-bottom:24px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.tabs button{background:rgba(255,255,255,.05);color:var(--muted);font-size:13px}
.tabs button.active{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
@media (max-width:980px){.hero{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}}
@media (max-width:620px){.hero{grid-template-columns:1fr}.app{padding:18px 14px 36px}.topbar{align-items:flex-start;flex-direction:column}}
.promo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.promo-media{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center}
.promo-img{max-width:230px;max-height:230px;border-radius:12px;background:#fff;display:block;margin:0 auto}
.promo-media .guide{color:var(--muted);font-size:12px;line-height:1.7;margin-top:12px;text-align:left}
.promo-media .link-box{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;font-size:12px;word-break:break-all;color:var(--cyan);text-align:left}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.channel-warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);color:var(--amber);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.6;margin-bottom:12px}

.flow-state{text-align:center}
.redpacket-box{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(239,68,68,.14));border:1px solid rgba(251,191,36,.32);display:grid;place-items:center;font-size:42px;margin:18px auto}