:root { --ink:#151712; --muted:#6e7169; --line:#d8d9d2; --paper:#f3f3ed; --white:#fff; --green:#245f49; --red:#a43d31; --amber:#966b29; --display:"FZLanTingHeiS-DB-GBK","Microsoft YaHei",sans-serif; --mono:"Cascadia Code",monospace; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Aptos","Microsoft YaHei",sans-serif; }
[hidden] { display:none !important; }
.admin-login { display:grid; min-height:100vh; place-items:center; padding:24px; background:radial-gradient(circle at 70% 15%,rgba(213,76,45,.14),transparent 32%),var(--paper); }
.admin-login form { display:grid; width:min(420px,100%); padding:38px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 28px 70px rgba(21,23,18,.12); }
.admin-login img { width:46px; height:46px; margin-bottom:24px; }
.admin-login form>span { color:var(--red); font:700 9px var(--mono); letter-spacing:.14em; }
.admin-login h1 { margin:10px 0 8px; font-size:30px; }
.admin-login p { margin:0 0 24px; color:var(--muted); font-size:12px; line-height:1.7; }
.admin-login label { display:grid; gap:7px; margin-top:14px; color:var(--muted); font-size:10px; }
.admin-login input { width:100%; padding:12px; border:1px solid var(--line); border-radius:6px; outline:0; font:13px var(--mono); }
.admin-login input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,23,18,.08); }
.admin-login button { margin-top:22px; padding:12px; border:0; border-radius:6px; color:#fff; background:var(--ink); cursor:pointer; }
.admin-login button:disabled { opacity:.55; cursor:wait; }
.admin-login small { min-height:18px; margin-top:10px; color:var(--red); font-size:10px; }
.admin-login a { justify-self:start; margin-top:14px; color:var(--muted); font-size:10px; text-decoration:none; }
#admin-shell { min-height:100vh; }
aside { position:fixed; inset:0 auto 0 0; display:flex; width:218px; flex-direction:column; padding:20px 14px; color:#f5f5ef; background:var(--ink); }
.wordmark { display:flex; align-items:center; gap:11px; padding:0 7px 28px; }
.wordmark img { width:36px; height:36px; padding:3px; border-radius:8px; background:#f1eee5; }
.wordmark span { font:650 14px var(--display); }.wordmark em { color:#8e9188; font:600 9px "Aptos",sans-serif; font-style:normal; }.wordmark small { display:block; margin-top:2px; color:#8e9188; font-size:9px; }
nav { display:grid; gap:4px; } nav button { padding:10px 11px; border:0; border-radius:6px; color:#aeb1a8; background:transparent; cursor:pointer; text-align:left; } nav button:hover,nav button.active { color:white; background:#2b2e28; }
aside > a { margin-top:auto; padding:10px; color:#9da097; text-decoration:none; font-size:11px; }
main { margin-left:218px; padding:28px 32px 50px; }
header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:27px; } header p { margin:0 0 6px; color:var(--muted); font:9px var(--mono); letter-spacing:.12em; } h1 { margin:0; font:650 30px var(--display); letter-spacing:-.04em; } header button { padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:white; cursor:pointer; }.header-actions{display:flex;gap:7px}
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:9px; background:var(--white); }
.metrics article { padding:20px; }.metrics article+article { border-left:1px solid var(--line); }.metrics span { display:block; color:var(--muted); font-size:10px; }.metrics strong { display:block; margin-top:14px; font:600 25px var(--mono); }
.data-panel { margin-top:18px; border:1px solid var(--line); border-radius:9px; background:white; }.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:17px 18px; border-bottom:1px solid var(--line); }.panel-heading h2 { margin:0; font:650 14px var(--display); }.panel-heading span { color:var(--muted); font:10px var(--mono); }
.table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th,td { padding:11px 14px; border-bottom:1px solid #ecece7; text-align:left; font-size:11px; } th { color:var(--muted); background:#fafaf7; font:500 9px var(--mono); letter-spacing:.05em; } td code { font:10px var(--mono); } .pill { padding:4px 6px; border-radius:4px; background:#eceee9; font:9px var(--mono); }.pill.paid,.pill.succeeded,.pill.active { color:var(--green); background:#e2eee8; }.pill.failed,.pill.frozen,.pill.refunded { color:var(--red); background:#f3e4e1; }.pill.pending,.pill.running { color:var(--amber); background:#f3ebdc; }
td button { margin-right:5px; padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:white; cursor:pointer; font-size:9px; }
#notice { position:fixed; right:22px; bottom:22px; padding:10px 13px; border-radius:6px; color:white; background:var(--ink); opacity:0; transform:translateY(8px); transition:180ms ease; font-size:10px; }#notice.show { opacity:1; transform:none; }
@media(max-width:850px){aside{width:72px}.wordmark span,aside>a,nav button{font-size:0}.wordmark{padding-left:4px}nav button::first-letter{font-size:11px}main{margin-left:72px;padding:20px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics article:nth-child(3){border-left:0;border-top:1px solid var(--line)}.metrics article:nth-child(4){border-top:1px solid var(--line)}}