:root {
      --bg: #f6f7f9;
      --panel: #ffffff;
      --line: #dde3ea;
      --text: #172026;
      --muted: #66727f;
      --teal: #0f766e;
      --teal-strong: #0b5f59;
      --indigo: #4f46e5;
      --amber: #b7791f;
      --red: #b42318;
      --soft-teal: #e6f4f1;
      --soft-indigo: #eef2ff;
      --soft-amber: #fff7e6;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    a { color: var(--teal); }
    .skip-link {
      position: fixed; top: 8px; left: 8px; z-index: 1000;
      transform: translateY(-160%); padding: 10px 14px; border-radius: 7px;
      background: #fff; color: var(--teal-strong); box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    }
    .skip-link:focus { transform: translateY(0); }
    :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
    button, input, select, textarea { font: inherit; }
    button {
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--text);
      border-radius: 7px;
      min-height: 36px;
      padding: 0 12px;
      cursor: pointer;
    }
    button.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
    button.primary:hover { background: var(--teal-strong); }
    button.danger { border-color: #e6b4ae; color: var(--red); }
    button.ghost { background: transparent; }
    button.mini { min-height: 30px; padding: 0 10px; font-size: 12px; }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 7px;
      min-height: 38px;
      padding: 0 10px;
      background: #fff;
      color: var(--text);
    }
    textarea { padding: 9px 10px; resize: vertical; }
    input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: #dc8f86; }
    button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .58; }
    label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
    .shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
    .sidebar {
      border-right: 1px solid var(--line);
      background: #fbfcfd;
      padding: 22px 16px;
      position: sticky;
      top: 0;
      height: 100vh;
    }
    .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
    .mark {
      width: 34px; height: 34px; border-radius: 8px;
      display: grid; place-items: center;
      background: var(--teal); color: #fff; font-weight: 700;
    }
    .brand h1 { font-size: 17px; margin: 0; }
    .brand p { font-size: 12px; margin: 2px 0 0; color: var(--muted); }
    .nav { display: grid; gap: 6px; }
    .nav button {
      justify-content: flex-start; text-align: left;
      border-color: transparent; background: transparent; color: var(--muted); width: 100%;
    }
    .nav button.active { background: var(--soft-teal); color: var(--teal-strong); }
    .nav-spaced { margin-top: 16px; }
    .sidebar-field { margin-top: 20px; }
    .navlink { display: block; padding: 9px 12px; border-radius: 7px; color: var(--indigo); text-decoration: none; font-size: 14px; margin-top: 10px; border: 1px solid var(--soft-indigo); }
    .main { padding: 24px; min-width: 0; }
    .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
    .topbar h2 { margin: 0; font-size: 24px; }
    .topbar p { margin: 4px 0 0; color: var(--muted); }
    .grid { display: grid; gap: 14px; }
    .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
    .panel h3 { margin: 0 0 12px; font-size: 16px; }
    .panel h4 { margin: 4px 0 10px; font-size: 14px; }
    .panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
    .panel-title h3 { margin-bottom: 3px; }
    .panel-title p { margin: 0; font-size: 13px; }
    .section-head { border: 0; padding: 0; }
    .section-head h3 { margin: 0; }
    .section-list { margin-top: 12px; }
    .stack-top { margin-top: 14px; }
    .muted { color: var(--muted); }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #edf0f4; padding: 11px 0; }
    .row:first-child { border-top: 0; padding-top: 0; }
    .row:last-child { padding-bottom: 0; }
    .value { overflow-wrap: anywhere; text-align: right; }
    .badge { display: inline-flex; align-items: center; border-radius: 999px; min-height: 24px; padding: 0 9px; font-size: 12px; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
    .badge.ok { background: var(--soft-teal); border-color: #b9ddd6; color: var(--teal-strong); }
    .badge.info { background: var(--soft-indigo); border-color: #c7d2fe; color: var(--indigo); }
    .badge.warn { background: var(--soft-amber); border-color: #f2d394; color: var(--amber); }
    .badge.danger { background: #fff5f3; border-color: #e6b4ae; color: var(--red); }
    .list { display: grid; gap: 10px; }
    .item { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; min-width: 0; }
    .item .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .item .head > div { min-width: 0; }
    .item .head .muted { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
    .item strong { display: block; overflow-wrap: anywhere; }
    .item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
    .inline-control { width: auto; min-height: 30px; }
    .member-controls { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
    .propagation-deliveries { margin-top: 10px; }
    .auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
    .auth-visual {
      display: flex; align-items: flex-end; padding: 48px;
      background: linear-gradient(rgba(8, 47, 73, .28), rgba(15, 118, 110, .42)), url("/assets/login-background.aa56518065ee.svg");
      background-size: cover; background-position: center; color: #fff;
    }
    .auth-visual h1 { font-size: 42px; margin: 0 0 10px; }
    .auth-visual p { max-width: 620px; line-height: 1.7; margin: 0; }
    .auth-panel { display: grid; align-content: center; gap: 16px; padding: 34px; background: #fff; }
    .tabs { display: flex; gap: 8px; }
    .tabs button { flex: 1; }
    .tabs button.active { border-color: var(--teal); color: var(--teal); background: var(--soft-teal); }
    .form { display: grid; gap: 12px; }
    .message { min-height: 22px; color: var(--red); font-size: 13px; }
    .message.ok { color: var(--teal-strong); }
    .message.error { color: var(--red); }
    .message.compact { min-height: 0; margin-bottom: 14px; }
    .notice { border: 1px solid #e6b4ae; background: #fff5f3; color: var(--red); border-radius: 8px; padding: 11px 13px; margin-bottom: 14px; font-size: 13px; }
    .notice.ok { border-color: #b9ddd6; background: var(--soft-teal); color: var(--teal-strong); }
    .toolbar { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(130px, 1fr)) auto auto; align-items: end; gap: 10px; margin-bottom: 14px; }
    .toolbar.compact { grid-template-columns: minmax(120px, 160px) minmax(190px, 1fr) auto auto; margin: 12px 0 0; }
    .audit-toolbar { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
    .check { display: flex; align-items: center; gap: 8px; }
    .check input { width: auto; min-height: auto; }
    .checkbox-inline { width: auto; min-height: auto; }
    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 12px; }
    .loading { border: 1px dashed var(--line); background: #fbfcfd; color: var(--muted); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
    .table-wrap { overflow: auto; max-height: 560px; }
    .table-wrap.tall { max-height: 680px; }
    .detail-grid { border-top: 1px solid var(--line); padding-top: 12px; }
    .compact-list .item { padding: 9px 10px; }
    .code-box { border: 1px dashed #b7bfd0; border-radius: 8px; padding: 14px; background: #f8fafc; overflow-wrap: anywhere; }
    code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
    code.metadata { display: block; max-width: 320px; max-height: 72px; overflow: auto; white-space: pre-wrap; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th, td { text-align: left; border-bottom: 1px solid #edf0f4; padding: 10px 8px; vertical-align: top; overflow-wrap: anywhere; }
    th { color: var(--muted); font-weight: 600; }
    .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;
    }
    .hidden { display: none !important; }
    @media (max-width: 920px) {
      .shell { grid-template-columns: 1fr; }
      .sidebar { height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid.two, .grid.three { grid-template-columns: 1fr; }
      .toolbar, .toolbar.compact, .audit-toolbar { grid-template-columns: 1fr; }
      .auth-wrap { grid-template-columns: 1fr; }
      .auth-visual { min-height: 240px; padding: 28px; }
      .auth-panel { padding: 24px; }
      .panel-title, .item .head, .topbar { align-items: flex-start; flex-wrap: wrap; }
      .member-controls { justify-content: flex-start; width: 100%; }
      .member-controls .inline-control { flex: 1 1 130px; }
    }
    @media (max-width: 600px) {
      .main { padding: 16px; }
      .sidebar { padding: 16px; }
      .nav { grid-template-columns: 1fr; }
      .topbar > div { flex: 1 1 100%; }
      .tabs { flex-wrap: wrap; }
      .tabs button { flex: 1 1 calc(50% - 8px); min-height: 44px; }
      button, input, select { min-height: 44px; }
      button.mini { min-height: 38px; }
      .auth-visual { min-height: 190px; padding: 22px; }
      .auth-visual h1 { font-size: 32px; }
      .auth-panel { padding: 20px 16px; }
      .panel { padding: 14px; }
      .row { align-items: flex-start; flex-direction: column; }
      .value { text-align: left; }
      .pager { justify-content: space-between; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }