:root{
  --bg:#f7f9fc; --card:#ffffff; --text:#141a26; --muted:#5a677a;
  --gold:#caa536; --line:#e6edf4; --btn:#141a26; --btnText:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--text);text-decoration:none}
.header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);z-index:5}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.brand{font-weight:800;font-size:20px}
.brand .gold{color:var(--gold)}
.nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid var(--line);font-weight:600}
.btn.primary{background:var(--btn);color:var(--btnText);border-color:var(--btn)}
.btn.ghost{background:#fff;color:var(--text)}
.hero{padding:28px 0}
.hero h1{font-size:28px;margin:0 0 6px}
.hero p{margin:0 0 14px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.card-head{padding:14px;border-bottom:1px solid var(--line);background:linear-gradient(#fff,#f9fbff)}
.card-head h2{margin:0;color:var(--gold)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
thead th{background:#fafbff;color:#111}
tbody tr:nth-child(odd){background:#fbfdff}
.note{font-size:14px;color:var(--muted);margin:8px 0}
.search{padding:10px 12px;border:1px solid var(--line);border-radius:10px;width:100%;max-width:420px}
.footer{margin:24px 0 40px;color:var(--muted);font-size:14px;text-align:center}
.badge{display:inline-block;background:#f2efe2;color:#6d5400;border:1px solid #e9e2c4;border-radius:999px;padding:6px 10px;font-weight:600;margin-right:8px}
@media (min-width:700px){.hero h1{font-size:34px}}