:root { font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; color: #24292f; background: #f5f6f8; font-size: 14px; letter-spacing: 0; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; border: 1px solid #d4d8df; background: #fff; color: #303640; border-radius: 4px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
button:hover { background: #f0f3f7; border-color: #b3bac5; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #306ca9; outline-offset: 2px; }
.primary { background: #215f9d; border-color: #215f9d; color: white; }
.primary:hover { background: #184e83; border-color: #184e83; }
.primary .icon, .danger .icon { filter: invert(1); }
.danger { background: #b9343e; color: white; border-color: #b9343e; }
.danger:hover { background: #9a2430; border-color: #9a2430; }
.danger-text { color: #b02734; }
.icon { width: 17px; height: 17px; flex: 0 0 17px; object-fit: contain; }
.icon-only { width: 34px; height: 34px; padding: 7px; flex: 0 0 34px; }
.subtle { border-color: transparent; background: transparent; color: #215f9d; }
input, select, textarea { border: 1px solid #cbd1da; background: white; color: #24292f; border-radius: 4px; min-height: 36px; padding: 7px 10px; max-width: 100%; }
input:disabled, select:disabled { color: #576170; background: #f4f5f7; }
input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; margin: 0; accent-color: #215f9d; }
h1, h2, p { margin-top: 0; }
h1 { font-size: 23px; line-height: 1.35; margin-bottom: 0; }
h2 { font-size: 18px; line-height: 1.4; margin: 0; }
.muted { color: #707a87; }
.small { font-size: 12px; }
.workspace { display: grid; grid-template-columns: 222px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid #dde2e8; padding: 22px 14px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 25px; }
.brand img, .login-brand img { object-fit: contain; flex-shrink: 0; }
.brand strong { display: block; font-size: 16px; }
.brand span { display: block; margin-top: 4px; color: #77818e; font-size: 12px; }
nav { display: grid; gap: 5px; }
.nav-item { width: 100%; justify-content: flex-start; min-height: 42px; gap: 12px; border-color: transparent; color: #515b68; }
.nav-item.selected { color: #174f85; background: #eaf1f8; font-weight: 600; }
.body-column { min-width: 0; }
.topbar { min-height: 62px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 28px; background: #fff; border-bottom: 1px solid #e0e4ea; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 100%; min-width: 0; }
.account-name { max-width: 160px; overflow-wrap: anywhere; }
.role-badge { border: 1px solid #c6dfd5; color: #30644e; padding: 3px 7px; border-radius: 4px; font-size: 12px; background: #f3faf6; }
.main { padding: 28px; min-width: 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.toolbar { display: flex; align-items: center; padding-bottom: 18px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; }
.search { display: flex; gap: 6px; margin-right: auto; }
.search input { width: 300px; }
.records { background: #fff; border-top: 1px solid #d7dde5; border-bottom: 1px solid #d7dde5; }
.table-scroll { overflow-x: auto; min-height: 360px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #edf0f4; color: #596371; font-weight: 600; text-align: left; white-space: nowrap; height: 45px; }
th, td { padding: 12px 14px; border-bottom: 1px solid #e6e9ee; }
td { height: 66px; line-height: 1.55; max-width: 300px; overflow-wrap: anywhere; }
td:last-child { white-space: nowrap; }
tbody tr:hover { background: #f8fafc; }
.stacked { display: grid; gap: 3px; min-width: 140px; }
.identifier { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #7c8490; font-size: 12px; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: #336753; background: #edf7f0; padding: 3px 8px; border-radius: 4px; }
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.suspended { color: #946513; background: #fff6dc; }
.status.revoked { color: #a1434c; background: #fceef0; }
.row-actions { display: flex; gap: 4px; }
.row-actions .icon-only { width: 30px; height: 30px; min-height: 30px; flex-basis: 30px; border-color: transparent; background: transparent; }
.row-actions .icon-only:hover { background: #eaf0f7; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; }
.pager-controls { display: flex; align-items: center; gap: 9px; }
.page-count { min-width: 55px; text-align: center; font-variant-numeric: tabular-nums; }
.pager select { min-height: 32px; font-size: 12px; }
.empty { height: 300px; text-align: center; color: #86909d; }
.loading, .load-error { padding: 60px 20px; min-height: 360px; text-align: center; color: #747e8b; }
.load-error button { margin-left: 15px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { background: #fff; width: 400px; max-width: 100%; border: 1px solid #d9dfe7; border-radius: 8px; padding: 32px; }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.login-brand h1 { font-size: 21px; margin-bottom: 4px; }
.login-brand span { font-size: 12px; }
.field { display: grid; gap: 7px; min-width: 0; margin-bottom: 17px; font-size: 13px; }
.field input, .field select { width: 100%; }
.otp-input { font-family: ui-monospace, Consolas, monospace; font-size: 18px; }
.full { width: 100%; min-height: 40px; }
.form-error { color: #ad3340; font-size: 13px; min-height: 18px; overflow-wrap: anywhere; }
.notice { position: fixed; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 40px)); background: #285e49; color: white; padding: 13px 18px; border-radius: 6px; box-shadow: 0 4px 18px #0002; opacity: 0; pointer-events: none; z-index: 100; }
.notice.visible { opacity: 1; }
.notice.error { background: #a22d3b; }
.dialog { width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid #ced5df; border-radius: 8px; padding: 0; box-shadow: 0 14px 50px #0003; }
.dialog::backdrop { background: #18202b66; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; border-bottom: 1px solid #e2e6ec; }
.dialog-body { padding: 22px; }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.dialog-footer button { min-width: 80px; }
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 18px; }
.span-two { grid-column: 1 / -1; }
.feature-set { border: 0; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.feature-set legend { font-size: 13px; margin-bottom: 10px; }
.feature-set label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.secret-code { width: 100%; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; resize: none; line-height: 1.6; }
.confirm-message { margin: 0; line-height: 1.8; overflow-wrap: anywhere; }
.inventory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 0; }
.inventory-grid dt { color: #707a87; font-size: 12px; margin-bottom: 5px; }
.inventory-grid dd { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.release-version { min-width: 130px; max-width: 230px; white-space: normal; overflow-wrap: anywhere; }
.breakable { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 450px) { .inventory-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .workspace { grid-template-columns: 190px minmax(0,1fr); } .sidebar { padding: 20px 10px; } .brand { gap: 7px; padding-left: 0; } .brand strong { font-size: 14px; } .main { padding: 22px 18px; } .topbar { padding: 10px 18px; } table { min-width: 820px; } .search input { width: 245px; } }
@media (max-width: 650px) { .workspace { display: block; } .sidebar { border-right: 0; border-bottom: 1px solid #dde2e8; padding: 13px 14px; } .brand { padding: 0 0 13px; } .brand span { display: none; } nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(54px,1fr)); gap: 2px; } .nav-item { justify-content: center; padding: 7px 2px; font-size: 12px; gap: 4px; min-height: 36px; } .nav-item .icon { display: none; } .topbar { min-height: 50px; padding: 9px 14px; } .account { gap: 8px; font-size: 12px; } .main { padding: 20px 14px; } .page-heading { margin-bottom: 18px; align-items: baseline; } h1 { font-size: 21px; } .toolbar-actions { gap: 8px; } .search { width: calc(100% - 44px); margin: 0; } .search input { min-width: 0; width: 100%; } .toolbar-actions>.primary { margin-top: 2px; } .pager { padding: 12px 8px; font-size: 12px; flex-wrap: wrap; } .pager-controls { gap: 5px; } .form-grid { grid-template-columns: 1fr; } .span-two { grid-column: 1; } .dialog-header,.dialog-body { padding: 17px; } .login-panel { padding: 26px; } }