:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --bg:#f3f6fb; --card:#fff; --text:#1e293b;
  --muted:#64748b; --border:#e2e8f0; --green:#059669; --orange:#d97706; --red:#dc2626; --radius:12px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--text); min-height:100vh}
a{text-decoration:none; color:inherit}

.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px; padding:0 24px; height:60px;
  background:#fff; border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,.04)}
.brand{font-size:20px; font-weight:800; color:var(--primary); white-space:nowrap}
.nav{display:flex; gap:4px; flex:1; overflow-x:auto}
.nav a{padding:8px 14px; border-radius:8px; color:var(--muted); font-size:14px; white-space:nowrap}
.nav a.active{background:var(--primary); color:#fff; font-weight:600}
.userbox{font-size:13px; color:var(--muted); white-space:nowrap}

#app{max-width:1200px; margin:0 auto; padding:24px 20px 60px}
.footer{text-align:center; color:var(--muted); font-size:12px; padding:20px}
.loading{text-align:center; padding:80px; color:var(--muted)}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-table{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}

h1{font-size:28px; margin-bottom:6px}
h2{font-size:22px; margin:24px 0 12px}
h3{font-size:17px; margin-bottom:10px}
.subtitle{color:var(--muted); margin-bottom:20px}
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; background:#eef2ff; color:var(--primary)}
.badge.green{background:#ecfdf5; color:var(--green)}
.badge.orange{background:#fffbeb; color:var(--orange)}
.badge.red{background:#fef2f2; color:var(--red)}
.price{font-size:22px; font-weight:800; color:var(--primary)}
.price small{font-size:12px; color:var(--muted); font-weight:400}
.desc{color:var(--muted); font-size:13px; margin:8px 0}
.muted{color:var(--muted); font-size:13px}

.btn{display:inline-block; padding:8px 18px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
  font-size:14px; transition:.15s}
.btn:hover{background:#f1f5f9}
.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-sm{padding:4px 10px; font-size:13px}
.btn-green{background:var(--green); color:#fff; border-color:var(--green)}

table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top}
th{background:#f8fafc; color:var(--muted); font-weight:600; white-space:nowrap}
tr:hover td{background:#f8fafc}
.tbl-wrap{overflow-x:auto; background:#fff; border:1px solid var(--border); border-radius:var(--radius)}

.stat-box{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center}
.stat-num{font-size:26px; font-weight:800; color:var(--primary)}
.stat-label{color:var(--muted); font-size:13px; margin-top:4px}

.modal{position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:100}
.modal.hidden{display:none}
.modal-box{background:#fff; border-radius:16px; padding:24px; width:400px; max-width:92vw; max-height:90vh; overflow:auto}
.form-row{margin-bottom:12px}
.form-row label{display:block; font-size:13px; color:var(--muted); margin-bottom:4px}
.form-row input,.form-row select{width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.msg{margin-top:10px; font-size:13px; color:var(--green)}
.msg.err{color:var(--red)}

.hero{background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff; border-radius:16px; padding:36px; margin-bottom:20px}
.hero h1{font-size:32px}
.hero p{opacity:.9; margin-top:10px; line-height:1.7}
.chip{display:inline-block; background:rgba(255,255,255,.15); padding:4px 12px; border-radius:20px; font-size:12px; margin:4px 4px 0 0}

.tool-card{display:flex; flex-direction:column; gap:8px}
.tool-card .actions{margin-top:auto; display:flex; gap:8px; padding-top:10px}
.pill{font-size:12px; padding:2px 8px; border-radius:6px; background:#eef2ff; color:var(--primary)}
.pill.tier{background:#ecfdf5; color:var(--green)}