:root {
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #203d32;
  background: #f5f5ef;
  font-synthesis: none;
  --ink: #203d32;
  --muted: #6e7d70;
  --green: #285d46;
  --line: #e1e6d9;
  --cream: #f5f5ef;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button {
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  padding: 11px 17px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #8cbaa5;
  outline-offset: 3px;
}
.primary { background: var(--green); color: #fff; }
.primary:hover:not(:disabled) { background: #1b4936; }
.secondary { color: #365b42; background: #edf1e6; border: 1px solid #d8e0cf; }
.secondary:hover:not(:disabled) { background: #e2eadb; }
.quiet { background: transparent; color: inherit; }
h1, h2, p { margin: 0; }
h1 { font-size: 32px; letter-spacing: -1px; line-height: 1.3; }
h2 { font-size: 18px; letter-spacing: -.2px; line-height: 1.5; }
p { line-height: 1.7; color: var(--muted); }
.eyebrow { display: block; letter-spacing: 1.6px; font-size: 10px; font-weight: 650; margin-bottom: 13px; color: #7a8c75; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
input, textarea, select { padding: 11px 12px; border: 1px solid #d8dfd1; border-radius: 6px; background: #fff; min-width: 0; color: var(--ink); width: 100%; }
input:disabled, textarea:disabled, select:disabled { background: #edf0e8; color: #718177; }
textarea { resize: vertical; line-height: 1.6; }
select { cursor: pointer; padding-right: 30px; }
input[type="checkbox"] { width: 17px; height: 17px; padding: 0; accent-color: var(--green); flex: 0 0 auto; }
small, .hint { font-size: 11px; font-weight: 400; color: #798777; line-height: 1.65; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.08fr 1fr; max-width: 1600px; margin: auto; }
.login-intro { position: relative; background: #1e4233; color: #f3f6e9; padding: clamp(45px, 8vw, 125px) 13%; overflow: hidden; }
.login-intro::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid #5e7a5355; border-radius: 50%; right: -240px; bottom: 10%; pointer-events: none; }
.login-intro .eyebrow { color: #b9c9ac; font-size: 10px; }
.login-intro h1 { font-size: clamp(38px, 4.2vw, 62px); line-height: 1.32; margin: 80px 0 25px; font-weight: 600; letter-spacing: -2px; }
.login-intro p { color: #b8c8b0; font-size: 14px; line-height: 1.9; }
.stamp { margin-top: 60px; width: 76px; height: 76px; border: 1px solid #8e9d73; display: grid; place-items: center; border-radius: 15px; font-family: serif; font-size: 48px; color: #d5dcb6; }
.intro-caption { display: block; font-size: 10px; color: #93ab8b; letter-spacing: 4px; margin-top: 22px; }
.login-card { display: flex; flex-direction: column; gap: 22px; align-self: center; width: min(410px, 80%); margin: 45px auto; }
.login-card .eyebrow { margin-bottom: -11px; }
.login-card h2 { font-size: 27px; margin-bottom: 8px; font-weight: 600; }
.login-card button { display: flex; justify-content: space-between; padding: 14px 18px; margin-top: 2px; }
.data-note { background: #eaf0e3; border: 1px solid #dce5d3; padding: 16px 18px; border-radius: 8px; }
.data-note strong { font-size: 11px; font-weight: 650; }
.data-note p { font-size: 11px; margin-top: 7px; }
.workspace { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 100vh; }
aside { background: #1e4233; color: #d9e4ce; padding: 30px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; padding: 3px 12px 15px; letter-spacing: 1px; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 40px; border: 1px solid #8e9d73; border-radius: 8px; font-family: serif; font-size: 26px; font-weight: 400; color: #d5dcb6; }
.brand small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 4px; margin-top: 5px; color: #98b18d; }
nav { margin-top: 26px; display: grid; gap: 5px; }
.nav-label { padding: 0 13px 10px; color: #88a580; font-size: 10px; letter-spacing: 2px; }
.nav-label.second { padding-top: 23px; }
.nav { display: flex; justify-content: space-between; gap: 10px; background: transparent; color: #b8cdb0; text-align: left; padding: 13px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav span { font-size: 10px; opacity: .55; font-weight: 400; }
.nav:hover { background: #37583e; }
.nav.active { background: #e4ead6; color: #284b33; }
.aside-footer { margin-top: auto; padding: 35px 12px 0; display: grid; gap: 9px; font-size: 12px; }
.connection-label { color: #8ca584; font-size: 10px; }
.aside-footer strong { font-weight: 500; overflow-wrap: anywhere; }
.aside-footer button { border: 1px solid #537052; font-size: 11px; margin-top: 8px; text-align: left; padding: 10px 12px; }
.aside-footer button:hover { background: #37583e; }
main { padding: 39px clamp(22px, 3.3vw, 54px) 25px; width: 100%; max-width: 1880px; }
.page-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 31px; }
.page-header .eyebrow { margin-bottom: 9px; }
.page-header p { font-size: 12px; margin-top: 8px; }
.page-header > button { white-space: nowrap; font-size: 12px; }
.page-header > button span { font-size: 16px; margin-right: 4px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-bottom: 24px; }
.metrics article, .card { background: #fffef9; border: 1px solid var(--line); border-radius: 10px; }
.metrics article { padding: 21px 24px; position: relative; }
.metrics article::after { content: ""; position: absolute; width: 26px; height: 3px; right: 24px; bottom: 29px; background: #a7b99a; }
.metrics article:last-child::after { background: #d8bf9b; }
.metrics span { font-size: 11px; color: #7c8875; }
.metrics strong { display: block; margin-top: 10px; font-size: 34px; font-weight: 500; color: #35523b; line-height: 1.2; }
.card { padding: 24px; margin-bottom: 23px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.card-heading p { font-size: 11px; margin-top: 6px; max-width: 760px; }
.card-heading > button { font-size: 12px; white-space: nowrap; }
.filter-label { font-size: 10px; flex: 0 0 185px; gap: 5px; }
.filter-label select { font-size: 12px; padding: 9px 12px; padding-right: 26px; }
.context-note { padding: 12px 15px; background: #f1f4e9; color: #6d7c62; border-radius: 6px; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; margin-bottom: 14px; }
.load-state { min-height: 17px; margin-bottom: 10px; font-size: 10px; color: #95a08c; line-height: 1.7; }
.load-error { color: #a55341; background: #faf0e8; padding: 9px 12px; border-radius: 5px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 12px; }
th { font-weight: 500; font-size: 10px; color: #79866e; background: #f0f3e8; white-space: nowrap; }
th, td { padding: 14px 12px; border-bottom: 1px solid #e9eddf; vertical-align: top; line-height: 1.7; }
td:first-child { font-weight: 500; }
tr:last-child td { border-bottom-color: #e2e8d8; }
.cell-title { display: block; white-space: nowrap; }
.cell-subtitle { display: block; font-size: 10px; margin-top: 4px; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.network-list { white-space: pre-line; font-size: 11px; min-width: 110px; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 4px; background: #e9f0dd; color: #507143; font-size: 10px; white-space: nowrap; }
.badge.inactive { background: #f6ece0; color: #9c714a; }
.pill { display: inline-block; padding: 7px 10px; border: 1px solid #dce4cf; border-radius: 5px; color: #768464; background: #f7f8ee; font-size: 10px; white-space: nowrap; }
.risk-text { display: block; color: #aa7446; font-size: 10px; margin-top: 6px; white-space: nowrap; }
.row-actions { display: flex; gap: 5px; white-space: nowrap; padding-top: 1px; }
.row-actions button, .row-actions-cell button { font-size: 10px; padding: 6px 8px; background: #eef2e6; color: #557347; white-space: nowrap; }
.row-actions button:hover:not(:disabled), .row-actions-cell button:hover:not(:disabled) { background: #e2ead8; }
.row-actions .danger, .row-actions-cell .danger { color: #a05b4a; background: #f9eee7; }
.row-actions .danger:hover:not(:disabled), .row-actions-cell .danger:hover:not(:disabled) { background: #f2e0d5; }
.empty { padding: 38px 12px; text-align: center; font-size: 12px; color: #8b977f; }
.after-table { margin-top: 18px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 20px; color: #7e8a73; font-size: 10px; }
.pager > div { display: flex; gap: 8px; }
.pager button { font-size: 10px; padding: 7px 11px; }
summary { color: #527248; cursor: pointer; font-size: 11px; overflow-wrap: anywhere; min-width: 80px; }
.detail-list { display: grid; grid-template-columns: auto minmax(130px, 1fr); gap: 6px 12px; font-size: 10px; margin: 13px 0 3px; min-width: 260px; max-width: 440px; }
.detail-list dt { color: #859078; }
.detail-list dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 400; color: #567047; overflow-wrap: anywhere; }
.audit-detail { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 180px; max-width: 460px; margin: 12px 0 0; }
.subject { max-width: 230px; overflow-wrap: anywhere; }
.policy-card { max-width: 900px; }
.settings-form { display: grid; gap: 24px; }
.settings-form > label:first-child input { max-width: 260px; }
.check-label { flex-direction: row; gap: 11px; align-items: flex-start; line-height: 1.65; }
.check-label input { margin: 2px 0 0; }
.check-label small { display: block; margin-top: 3px; }
.form-end { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 20px; }
.form-end button { font-size: 12px; white-space: nowrap; }
.publish-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: end; margin-bottom: 18px; }
.publish-grid input { font-size: 11px; padding: 9px; }
.publish-grid button { align-self: end; font-size: 12px; white-space: nowrap; }
footer { font-size: 10px; color: #929d88; padding: 4px 0; line-height: 1.8; }
#notice { position: fixed; right: 24px; bottom: 24px; max-width: min(480px, calc(100vw - 40px)); background: #294e38; color: white; padding: 15px 21px; border-radius: 8px; box-shadow: 0 6px 26px #112d3322; font-size: 12px; line-height: 1.7; z-index: 10; overflow-wrap: anywhere; }
#notice.error { background: #925141; }
dialog { border: 1px solid #d3dcc8; border-radius: 13px; padding: 26px; width: min(610px, 94vw); max-height: calc(100vh - 40px); color: var(--ink); background: #fffef9; }
dialog::backdrop { background: #16332477; backdrop-filter: blur(3px); }
dialog form { display: grid; gap: 20px; }
.dialog-heading, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.dialog-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
.dialog-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 20px; gap: 10px; }
.dialog-actions button { font-size: 12px; }
.dialog-heading .close { padding: 2px 8px; background: transparent; font-size: 26px; color: #839275; }
.form-columns { display: grid; grid-template-columns: 1.15fr 1fr; gap: 17px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1700px) { .workspace { grid-template-columns: 235px minmax(0, 1fr); } aside { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 1100px) { .workspace { grid-template-columns: 184px minmax(0, 1fr); } aside { padding: 25px 12px; } .brand { font-size: 17px; gap: 9px; padding-left: 9px; } .brand-mark { width: 30px; height: 35px; font-size: 24px; } main { padding: 30px 22px; } .card { padding: 20px; } .publish-grid { grid-template-columns: 1fr 1fr; } .publish-grid button { grid-column: 1 / -1; justify-self: start; } .card-heading p { max-width: 530px; } }
@media (max-width: 760px) { .login-screen { grid-template-columns: 1fr; } .login-intro { padding: 30px; } .login-intro h1 { font-size: 34px; margin: 28px 0 12px; } .login-intro p { font-size: 12px; } .stamp, .intro-caption { display: none; } .login-card { margin: 35px auto; width: min(410px, 86%); } .workspace { display: block; } aside { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr auto; padding: 18px; gap: 14px; } .brand { padding: 0; } .brand small { font-size: 9px; } nav { grid-column: 1 / -1; grid-row: 2; display: flex; overflow-x: auto; margin: 0 -4px; gap: 5px; padding: 3px 4px 5px; } .nav-label, .nav span { display: none; } .nav { padding: 10px 13px; font-size: 11px; } .aside-footer { margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; } .connection-label { display: none; } .aside-footer strong { font-size: 11px; max-width: 100px; } .aside-footer button { margin: 0; font-size: 10px; padding: 7px 9px; } main { padding: 26px 18px; } .page-header { align-items: flex-start; gap: 12px; margin-bottom: 25px; } h1 { font-size: 27px; } .page-header .eyebrow { font-size: 8px; letter-spacing: 1px; } .page-header p { font-size: 11px; } .page-header > button { font-size: 10px; padding: 8px 10px; } .metrics { gap: 10px; } .metrics article { padding: 17px; } .metrics article::after { display: none; } .metrics strong { font-size: 29px; } .card { padding: 18px; } .card-heading { align-items: flex-start; flex-wrap: wrap; gap: 14px; } .filter-label { flex-basis: 100%; } .filter-label select { max-width: 280px; } .card-heading > .pill { display: none; } .card-heading > button { padding: 9px 12px; } .publish-grid { grid-template-columns: 1fr; } .publish-grid button { grid-column: auto; } .form-columns { grid-template-columns: 1fr; } .form-end { align-items: flex-start; flex-direction: column; } .pager { gap: 10px; flex-wrap: wrap; } dialog { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }