/* ===== 基础 ===== */
:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#e8ecf4;
    --primary:#2563eb;
    --primary-d:#1d4ed8;
    --primary-l:#eff4ff;
    --green:#16a34a;
    --green-l:#ecfdf3;
    --red:#dc2626;
    --red-l:#fef2f2;
    --amber:#d97706;
    --amber-l:#fffbeb;
    --radius:14px;
    --shadow:0 1px 3px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);color:var(--text);
    font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:.2px}
p{margin:0 0 10px}
code{background:#f1f5f9;padding:2px 6px;border-radius:5px;font-size:12px}
.container{max-width:1140px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.flex{display:flex}.between{justify-content:space-between}.middle{align-items:center}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.grow{flex:1}
.hide{display:none!important}

/* ===== 顶栏 ===== */
.topbar{
    position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:700;font-size:16px;flex:0 0 auto}
.brand:hover{opacity:1;color:var(--primary)}
.brand-mark{
    width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--primary),#6366f1);color:#fff;
}
.brand-logo{width:32px;height:32px;border-radius:9px;object-fit:cover}
.nav{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-a{
    display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;
    color:var(--muted);font-size:13.5px;white-space:nowrap;
}
.nav-a:hover{background:#f4f6fb;color:var(--text);opacity:1}
.nav-a.on{background:var(--primary-l);color:var(--primary);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.vip-chip{
    font-size:12px;padding:5px 11px;border-radius:20px;background:#f1f5f9;color:var(--muted);
    border:1px solid var(--line);white-space:nowrap;
}
.vip-chip.on{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border-color:#fcd34d;font-weight:600}
.avatar-link{display:block;line-height:0}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* ===== 主体 ===== */
.main{padding:26px 0 48px;min-height:calc(100vh - 62px - 90px)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:21px}
.page-head .sub{color:var(--muted);font-size:13px;margin-top:4px}

/* ===== 卡片 ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-size:15px;font-weight:600}
.card-body{padding:20px}
.card-body.tight{padding:0}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2}

/* ===== 统计卡 ===== */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-24px;top:-24px;width:78px;height:78px;border-radius:50%;background:var(--primary-l);opacity:.7}
.stat-label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;position:relative}
.stat-value{font-size:27px;font-weight:700;letter-spacing:-.5px;margin-top:6px;position:relative}
.stat-value small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px}
.stat-hint{font-size:12px;color:var(--muted);margin-top:2px;position:relative}

/* ===== 按钮 ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 18px;border-radius:9px;border:1px solid transparent;font-size:13.5px;
    font-weight:500;cursor:pointer;background:#eef2f8;color:var(--text);transition:.15s;
    white-space:nowrap;font-family:inherit;
}
.btn:hover{opacity:.92}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.22)}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--text)}
.btn-danger{background:var(--red-l);color:var(--red);border-color:#fecaca}
.btn-success{background:var(--green-l);color:var(--green);border-color:#bbf7d0}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn-link{background:none;border:0;color:var(--primary);padding:0;cursor:pointer;font-size:13px}

/* ===== 表单 ===== */
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-item{margin-bottom:14px}
.form-item label{display:block;font-size:13px;color:#475569;margin-bottom:6px;font-weight:500}
.form-item .hint{font-size:12px;color:var(--muted);margin-top:5px}
.input,select.input,textarea.input{
    width:100%;padding:10px 12px;border:1px solid #dbe3ef;border-radius:9px;font-size:13.5px;
    background:#fff;color:var(--text);outline:none;font-family:inherit;transition:.15s;
}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.input:disabled{background:#f8fafc;color:var(--muted)}
textarea.input{resize:vertical;min-height:80px}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#475569;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--primary)}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{
    padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;
    font-size:13px;color:var(--muted);cursor:pointer;user-select:none;
}
.chip.on{background:var(--primary-l);border-color:#bfd3ff;color:var(--primary);font-weight:500}

/* ===== 表格 ===== */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
    text-align:left;padding:12px 16px;background:#fafbfe;color:var(--muted);
    font-weight:500;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:13px 16px;border-bottom:1px solid #f1f4fa;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#fcfdff}
.table-wrap{overflow-x:auto}

/* ===== 徽标 ===== */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 9px;border-radius:20px;background:#f1f5f9;color:var(--muted);white-space:nowrap}
.badge-ok{background:var(--green-l);color:var(--green)}
.badge-bad{background:var(--red-l);color:var(--red)}
.badge-warn{background:var(--amber-l);color:var(--amber)}
.badge-vip{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-weight:600}
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ===== 提示条 ===== */
.alert{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px;border:1px solid transparent}
.alert.ok{background:var(--green-l);color:#15803d;border-color:#bbf7d0}
.alert.bad{background:var(--red-l);color:#b91c1c;border-color:#fecaca}

/* ===== 空状态 ===== */
.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty .ico{width:56px;height:56px;border-radius:50%;background:#f1f5f9;color:#94a3b8;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.empty h4{font-size:15px;color:var(--text);margin-bottom:6px}

/* ===== 公告 ===== */
.notice-list{display:flex;flex-direction:column}
.notice-item{padding:14px 20px;border-bottom:1px solid #f1f4fa}
.notice-item:last-child{border-bottom:0}
.notice-item h4{font-size:14px;margin-bottom:5px}
.notice-item .content{font-size:13px;color:var(--muted);line-height:1.8}
.notice-item .time{font-size:12px;color:#9ca3af;margin-top:6px}

/* ===== 快捷入口 ===== */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quick a{
    display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);
    border-radius:12px;background:#fff;color:var(--text);transition:.15s;
}
.quick a:hover{border-color:#c7d6f5;background:#fbfcff;transform:translateY(-1px);opacity:1}
.quick .qi{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--primary-l);color:var(--primary);flex:0 0 auto}
.quick strong{display:block;font-size:13.5px}
.quick span{font-size:12px;color:var(--muted)}

/* ===== 商品卡 ===== */
.price-card{
    border:1px solid var(--line);border-radius:13px;padding:18px;background:#fff;position:relative;
    transition:.15s;cursor:pointer;
}
.price-card:hover{border-color:#bcd0f7;box-shadow:0 6px 20px rgba(37,99,235,.08);transform:translateY(-1px)}
.price-card.hot{border-color:#bfd3ff;background:linear-gradient(180deg,#f7faff,#fff)}
.price-card .tag{position:absolute;top:-9px;right:12px;font-size:11px;background:var(--primary);color:#fff;padding:2px 9px;border-radius:10px}
.price-card .pname{font-size:14px;font-weight:600}
.price-card .pval{font-size:12.5px;color:var(--muted);margin-top:2px}
.price-card .pprice{margin-top:12px;font-size:23px;font-weight:700;color:var(--primary)}
.price-card .pprice small{font-size:12px;font-weight:500;color:var(--muted)}
.price-card .pbtn{margin-top:12px}

/* ===== 对比表 ===== */
.compare{width:100%;border-collapse:collapse;font-size:13.5px}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid #f1f4fa;text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{background:#fafbfe;font-size:13px;color:var(--muted);font-weight:500}
.compare .vip-col{background:#fffdf5}

/* ===== 邀请 ===== */
.invite-box{display:flex;gap:10px;align-items:center}
.invite-box .input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.invite-code{
    font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:3px;
    font-weight:700;color:var(--primary);background:var(--primary-l);padding:12px 20px;
    border-radius:12px;text-align:center;
}

/* ===== 分类页签 ===== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{
    padding:10px 16px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;
    cursor:pointer;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit;
}
.tab.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ===== 弹窗 ===== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.modal-box{
    position:relative;background:#fff;border-radius:16px;width:100%;max-width:520px;
    max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(15,23,42,.25);
    animation:pop .18s ease-out;
}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:16px}
.modal-x{background:none;border:0;font-size:24px;line-height:1;color:#94a3b8;cursor:pointer;padding:0 4px}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

/* ===== 轻提示 ===== */
.toast{
    position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:300;
    background:#111827;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:80vw;
}
.toast[hidden]{display:none}
.toast.ok{background:#15803d}
.toast.bad{background:#b91c1c}

/* ===== 分页 ===== */
.pager{display:flex;gap:6px;align-items:center;padding:14px 20px;flex-wrap:wrap;font-size:13px}
.pager a,.pager span{padding:5px 11px;border-radius:7px;border:1px solid var(--line);color:var(--muted);background:#fff}
.pager a:hover{border-color:#c7d6f5;color:var(--primary);opacity:1}
.pager .cur{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.pager .info{border:0;background:none;color:#9ca3af;margin-left:auto}

/* ===== 键值 ===== */
.kv{display:flex;padding:11px 0;border-bottom:1px dashed #eef1f6;font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv b{width:112px;flex:0 0 auto;color:var(--muted);font-weight:500}

/* ===== 落地页 ===== */
.hero{
    background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#4f46e5);
    border-radius:20px;color:#fff;padding:52px 44px;margin-bottom:24px;position:relative;overflow:hidden;
}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero h1{font-size:31px;line-height:1.35;letter-spacing:-.5px;position:relative}
.hero p{color:#dbeafe;margin-top:12px;font-size:14.5px;max-width:560px;position:relative}
.hero .actions{display:flex;gap:12px;margin-top:26px;position:relative}
.hero .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff}
.feature .fi{width:42px;height:42px;border-radius:12px;background:var(--primary-l);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.feature h4{font-size:14.5px;margin-bottom:6px}
.feature p{font-size:13px;color:var(--muted);margin:0}

/* ===== 账号行 ===== */
.acc-name{display:flex;align-items:center;gap:9px}
.acc-ico{width:34px;height:34px;border-radius:9px;background:#f1f5f9;color:#64748b;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.acc-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ===== 进度 ===== */
.progress{height:8px;border-radius:6px;background:#eef2f8;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#6366f1);border-radius:6px;transition:width .4s}

/* ===== 抽屉式列表（移动端） ===== */
.m-list{display:none}

/* ===== 页脚 ===== */
.footer{border-top:1px solid var(--line);background:#fff;padding:20px 0}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.footer-in .muted{margin-left:8px}
.footer-links{display:flex;gap:16px}

/* ===== 响应式 ===== */
@media (max-width:900px){
    .cols-4{grid-template-columns:repeat(2,1fr)}
    .cols-3{grid-template-columns:repeat(2,1fr)}
    .feature-grid{grid-template-columns:1fr}
    .quick{grid-template-columns:1fr}
}
@media (max-width:680px){
    .topbar-in{height:56px;gap:12px}
    .nav-a span{display:none}
    .nav-a{padding:8px 10px}
    .brand-text{font-size:15px}
    .main{padding:18px 0 80px}
    .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .stat{padding:15px 16px}
    .stat-value{font-size:23px}
    .card-body{padding:16px}
    .page-head h1{font-size:18px}
    .hero{padding:34px 22px}
    .hero h1{font-size:23px}
    .modal-box{max-width:100%;max-height:92vh}
    .table th,.table td{padding:10px 12px}
    .footer-in{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ===== 登录 / 注册 ===== */
.auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;max-width:960px;margin:12px auto}
.auth-card{overflow:hidden}
.auth-card .card-body{padding:32px 34px}
.auth-side{
    padding:36px 32px;border-radius:var(--radius);color:#fff;
    background:linear-gradient(150deg,#1e3a8a,#2563eb 60%,#4f46e5);position:relative;overflow:hidden;
}
.auth-side::after{content:"";position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.09)}
.auth-side h3{font-size:17px;margin-bottom:10px}
.auth-side p{color:#dbeafe;font-size:13.5px;line-height:1.9}
.auth-side ul{margin:14px 0 0;padding-left:18px;color:#dbeafe;font-size:13px;line-height:2}
.auth-links{margin-top:18px;display:flex;gap:8px;align-items:center;font-size:13px}
.captcha{
    height:42px;width:128px;border-radius:9px;border:1px solid var(--line);
    cursor:pointer;object-fit:cover;background:#f8fafc;flex:0 0 auto;
}

/* ===== FAQ ===== */
.faq{border-bottom:1px solid #f1f4fa}
.faq:last-child{border-bottom:0}
.faq summary{
    padding:14px 0;font-size:14px;font-weight:500;cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#94a3b8;font-size:18px;font-weight:400}
.faq[open] summary::after{content:"−"}
.faq[open] summary{color:var(--primary)}
.faq-body{padding:2px 0 16px;font-size:13.5px;color:#475569;line-height:1.9}
.faq-body p{margin:0 0 8px}

@media (max-width:820px){
    .auth-wrap{grid-template-columns:1fr;gap:16px}
    .auth-side{order:-1;padding:26px 22px}
    .auth-card .card-body{padding:24px 20px}
}