:root {
  font:14px/1.55 "Segoe UI","Microsoft YaHei",sans-serif;
  color:#263449; background:#f4f6f9; color-scheme:light;
  --blue:#315fae; --ink:#172b49; --muted:#64748b; --line:#e4e9f0;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; -webkit-font-smoothing:antialiased; }
.site-footer { padding:0 20px 24px; text-align:center; font-size:12px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.topbar { height:68px; padding:0 max(28px,calc((100vw - 1360px)/2)); display:flex; justify-content:space-between; align-items:center; gap:20px; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.brand img { padding:3px; border-radius:8px; background:#fff; }
.brand strong { font-size:20px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.brand > span:last-child { color:var(--muted); font-size:13px; }
.brand-divider { width:1px; height:18px; background:var(--line); margin:0 5px; }
.topbar button.quiet { color:var(--muted); }
.topbar button.quiet:hover { background:#f4f6fa; border-color:transparent; }
main { max-width:1416px; padding:36px 28px 48px; margin:0 auto; }
h1,h2,h3,p { margin:0; }
h1 { font-size:27px; line-height:1.35; letter-spacing:-.03em; font-weight:650; color:var(--ink); }
h2 { font-size:17px; line-height:1.5; font-weight:600; color:var(--ink); }
h3 { font-size:16px; }
.muted,.fine { color:var(--muted); }
.fine { font-size:12px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:25px; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
button,input,textarea,select { font:inherit; }
button { border:1px solid #d5dde7; border-radius:7px; padding:8px 17px; min-height:40px; background:#fff; color:#40516b; cursor:pointer; white-space:nowrap; transition:background-color .15s,border-color .15s,box-shadow .15s; }
button:hover:not(:disabled) { background:#f6f8fc; border-color:#afbdd0; }
button.primary { color:#fff; background:#2563eb; border-color:#2563eb; font-weight:600; box-shadow:0 2px 3px #182f4f12; }
button.primary:hover:not(:disabled) { background:#1d4ed8; border-color:#1d4ed8; }
button.quiet { color:var(--muted); background:transparent; border-color:transparent; box-shadow:none; }
button.danger { color:#ac3544; border-color:#e8c8ce; background:#fff; }
button.danger:hover:not(:disabled) { background:#fff4f5; border-color:#d99ca7; }
button:disabled { opacity:.44; cursor:default; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.table-scroll:focus-visible { outline:3px solid #87ace5; outline-offset:3px; }
input,textarea,select { width:100%; min-height:42px; border:1px solid #d8e0e9; border-radius:7px; padding:10px 13px; color:#263449; background:#fff; transition:border-color .15s; }
input:hover,textarea:hover,select:hover { border-color:#afbdd0; }
input::placeholder,textarea::placeholder { color:#7d8a9d; }
textarea { resize:vertical; min-height:104px; }
label { display:block; font-weight:500; margin:22px 0 9px; color:#34465e; }
.required { color:var(--muted); font-size:11px; font-weight:400; margin-left:7px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:26px; border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; box-shadow:0 3px 12px #182c4503; }
button.stat { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:20px 28px 22px; border:0; border-radius:0; text-align:left; white-space:normal; background:transparent; color:var(--muted); }
button.stat + button.stat { border-left:1px solid var(--line); }
.stat > span { font-size:12px; letter-spacing:.02em; }
.stat strong { color:#253a58; font:500 34px/1.15 "Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.04em; margin-top:10px; }
button.stat.active { background:#f7faff; box-shadow:inset 0 -3px #315fae; }
.stat.active strong,.stat.active > span { color:#244f99; }
button.stat:hover:not(:disabled) { background:#f7f9fc; }
button.stat:focus-visible { outline-offset:-4px; }
.card { border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 4px 18px #1d314b04; }
.records { overflow:hidden; }
.records-heading { padding:22px 26px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.count-label { display:inline-block; color:#65758b; background:#f0f3f7; border-radius:5px; font-size:11px; font-weight:500; padding:2px 7px; margin-left:9px; vertical-align:middle; }
.count-label:empty { display:none; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:24px; }
.search-field { flex:1 1 220px; max-width:360px; min-width:160px; }
.filters input { background:#f8fafc; }
.filters select { min-width:128px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
.license-table { min-width:620px; }
th { color:#66758a; background:#f9fafc; font-size:12px; font-weight:500; white-space:nowrap; padding:13px 20px; border-block:1px solid #e9edf3; }
td { padding:18px 20px; border-bottom:1px solid #edf0f5; vertical-align:middle; }
th:first-child,td:first-child { padding-left:26px; }
th:last-child,td:last-child { text-align:right; padding-right:26px; }
.license-table tbody tr { transition:background-color .12s; }
.license-table tbody tr:hover { background:#f8fafd; }
.license-table tbody tr:last-child td { border-bottom:0; }
.customer-name { display:block; color:#263b56; font-size:14px; font-weight:550; overflow-wrap:anywhere; max-width:350px; }
.row-secondary { display:block; color:#718097; font-size:11px; letter-spacing:.025em; margin-top:5px; }
.row-date { color:#53647b; white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
.policy-label { color:#53647b; font-size:12px; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; border:1px solid transparent; border-radius:5px; padding:3px 9px; font-size:11px; font-weight:500; white-space:nowrap; }
.badge.inactive { color:#7b6131; background:#fbf6ea; border-color:#f0e7d2; }
.badge.enabled { color:#2b6b57; background:#eef7f2; border-color:#d9eade; }
.badge.disabled { color:#95525e; background:#fcf2f4; border-color:#f0dfe3; }
.row-action { color:#315c9e; padding:5px 12px; min-height:32px; font-size:12px; background:transparent; border-color:transparent; }
.row-action:hover:not(:disabled) { background:#edf3fc; border-color:transparent; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 26px; border-top:1px solid var(--line); font-size:12px; }
.pagination button { padding:5px 12px; min-height:32px; font-size:12px; }
#page { min-width:42px; text-align:center; color:#5d6d83; font-variant-numeric:tabular-nums; }
.empty-state { padding:56px 20px; text-align:center; }
.empty-state h3 { font-size:17px; font-weight:500; margin-bottom:8px; }
.empty-state p { color:var(--muted); font-size:13px; margin-bottom:20px; }
.notice { padding:12px 16px; color:#315889; background:#eff5ff; border:1px solid #cfddf2; border-radius:7px; margin-bottom:18px; overflow-wrap:anywhere; font-size:13px; }
.notice.error { color:#993b4a; background:#fff3f5; border-color:#edcdd4; }
.inline-feedback { padding:8px 26px 16px; color:var(--muted); font-size:13px; }
.login { max-width:440px; margin:70px auto; padding:36px; }
.login > img { margin-bottom:20px; }
.login h1 { font-size:24px; }
.login .muted { margin-top:8px; }
.login .fine { margin-top:18px; }
.captcha-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.captcha-row img { border:1px solid var(--line); border-radius:6px; max-width:calc(100% - 80px); height:auto; min-height:52px; }
.captcha-row button { padding:7px; }
.full { width:100%; margin-top:24px; }
.code { font-family:Consolas,monospace; overflow-wrap:anywhere; font-size:12px; }
dialog { padding:30px; width:calc(100% - 32px); max-width:520px; max-height:calc(100dvh - 40px); overflow:auto; color:inherit; background:#fff; border:1px solid #e4e9f0; border-radius:12px; box-shadow:0 24px 80px #0b1c3930; }
dialog::backdrop { background:#0f20395c; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.dialog-heading h2 { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.dialog-heading .quiet { padding-right:8px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:26px; }
.policy-box { padding:14px 16px; border:1px solid #e4eaf3; border-radius:7px; background:#f7f9fc; color:#465c7b; font-size:13px; }
.policy-box strong { font-weight:500; }
.success-banner { padding:16px; border-radius:8px; color:#2b6b57; background:#f0f8f3; }
.success-banner strong { font-size:18px; font-weight:600; }
.success-banner p { margin-top:5px; font-size:13px; }
#created-sn,.sn-value { font:17px/1.8 Consolas,monospace; background:#f8fafc; resize:none; min-height:86px; }
#created-note { margin:12px 0 6px; overflow-wrap:anywhere; }
.drawer { margin:0 0 0 auto; width:min(620px,100%); max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; padding:0; }
.drawer[open] { display:flex; flex-direction:column; }
.drawer > .dialog-heading { padding:26px 30px; margin:0; border-bottom:1px solid var(--line); }
.drawer-body { padding:25px 30px; overflow:auto; flex:1; min-height:0; }
.detail-note { font-size:16px; font-weight:550; color:#2c405d; overflow-wrap:anywhere; margin-bottom:14px; }
.detail-summary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; font-size:12px; }
.detail-summary button { margin-left:auto; padding:5px 8px; min-height:30px; font-size:12px; }
.tabs { display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tabs button { padding:11px 0; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:13px; }
.tabs button[aria-selected="true"] { color:#264e87; box-shadow:inset 0 -2px #315fae; font-weight:600; }
dl { display:grid; grid-template-columns:94px minmax(0,1fr); gap:20px 24px; font-size:13px; margin:26px 0; }
dt { color:var(--muted); }
dd { margin:0; overflow-wrap:anywhere; }
.drawer-footer { padding:20px 30px; border-top:1px solid var(--line); background:#fbfcfe; }
.drawer-footer .actions { justify-content:flex-end; }
.audit-list { list-style:none; margin:0; padding:0; }
.audit-list li { padding:18px 0; border-bottom:1px solid var(--line); }
.audit-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; }
.audit-list time { color:var(--muted); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.audit-list p { font-size:13px; margin-top:7px; overflow-wrap:anywhere; }
.audit-meta { color:var(--muted); font-size:12px !important; }
.audit-list details { margin-top:8px; color:var(--muted); font-size:12px; }
.audit-list summary { cursor:pointer; }
.warning-box { padding:15px 16px; color:#805b28; background:#fff8eb; border-radius:7px; margin:18px 0; font-size:13px; }
.confirm-dialog h2 { font-size:22px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:900px) {
  main { padding:28px 20px 40px; }
  button.stat { padding:20px; }
}
@media(max-width:600px) {
  .topbar { height:62px; padding:0 18px; }
  .brand { gap:9px; } .brand strong { font-size:19px; } .brand-divider { margin:0 1px; }
  .brand > span:last-child { font-size:12px; }
  main { padding:25px 14px 32px; } h1 { font-size:24px; }
  .page-heading { flex-wrap:wrap; gap:14px; margin-bottom:20px; }
  .page-heading .actions { gap:7px; } .page-heading button { padding:7px 13px; min-height:38px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:20px; }
  button.stat { padding:17px 20px; }
  button.stat:nth-child(3) { border-left:0; }
  button.stat:nth-child(n+3) { border-top:1px solid var(--line); }
  .stat strong { font-size:29px; margin-top:8px; }
  .records-heading { padding:18px 18px 14px; flex-wrap:wrap; }
  .filters { padding:18px; flex-wrap:wrap; gap:8px; }
  .search-field { flex-basis:100%; max-width:none; }
  .filters select { min-width:140px; }
  .pagination { padding:15px 18px; flex-wrap:wrap; }
  dialog { padding:24px; }
  .dialog-heading { margin-bottom:22px; }
  .drawer { padding:0; }
  .drawer > .dialog-heading { padding:22px; }
  .drawer-body { padding:22px; } .drawer-footer { padding:18px 22px; }
  dl { grid-template-columns:80px minmax(0,1fr); gap:18px 14px; }
  .login { margin:30px auto; padding:28px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }
.date-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.date-filter label { margin:0 4px 0 0; color:var(--muted); font-size:12px; }
.date-filter input { width:148px; padding:9px; font-size:12px; }
.date-filter > span { color:var(--muted); font-size:12px; }
.customer-heading,.sn-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.customer-heading .detail-note { margin:0; }
.customer-heading { margin-bottom:18px; }
.customer-heading button { flex-shrink:0; }
.sn-heading label { margin:0; }
.sn-value { margin-top:8px; width:100%; }
.note-actions { display:flex; justify-content:flex-end; gap:8px; margin:10px 0 20px; }
.badge.reviewing { color:#315fae; background:#eff5ff; }
.badge.due { color:#995500; background:#fff5e2; }
.badge.replacement { color:#7752a8; background:#f5f0fc; }
.row-date { font-size:13px; }
.customer-name { font-weight:500; }
@media(max-width:600px) { .date-filter { flex-basis:100%; } .date-filter label { flex-basis:100%; } .date-filter input { flex:1; width:125px; min-width:0; } }