:root {
  color-scheme: light;
  --bg: #f7f9fa;
  --surface: #fff;
  --surface-soft: #f3fafc;
  --text: #17212b;
  --muted: #687582;
  --border: #dce3e7;
  --border-strong: #c8d3d9;
  --accent: #078fac;
  --accent-dark: #05758e;
  --accent-soft: #e7f6fa;
  --success: #25833c;
  --warning: #b76b00;
  --danger: #c83036;
  --shadow: 0 18px 50px rgb(18 45 55 / 14%);
  --radius: 12px;
  --sidebar: 236px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.auth-gate { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at top, #e9f8fb, var(--bg) 48%); }
.auth-card { width: min(440px, 100%); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); padding: 38px; text-align: center; }
.auth-brand { margin-bottom: 34px; font-size: 25px; font-weight: 760; letter-spacing: -.045em; }.auth-brand span { color: var(--accent); }
.auth-card h1 { margin: 0; font-size: 28px; letter-spacing: -.035em; }.auth-card > p:not(.eyebrow, .auth-error) { margin: 12px auto 24px; color: var(--muted); line-height: 1.6; }
.auth-card small { display: block; margin-top: 20px; color: var(--muted); }
.google-sign-in { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: #fff; cursor: pointer; font-weight: 680; }.google-sign-in:hover, .google-sign-in:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(7 143 172 / 12%); outline: none; }.google-sign-in:disabled { cursor: wait; opacity: .65; }.google-sign-in span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: #4285f4; font-weight: 800; }
.auth-error { margin: 16px 0 0; border: 1px solid #efb8ba; border-radius: 8px; background: #fff3f3; padding: 11px 14px; color: #9e252b; font-weight: 600; text-align: left; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; width: var(--sidebar); flex-direction: column; border-right: 1px solid var(--border); background: #fff; padding: 28px 16px 20px; }
.brand { display: inline-flex; gap: 5px; margin: 0 10px 42px; color: var(--text); text-decoration: none; font-size: 23px; font-weight: 760; letter-spacing: -.045em; }
.brand-metasell { color: var(--accent); }
.navigation { display: grid; gap: 7px; }
.navigation a { display: flex; min-height: 50px; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 9px; padding: 0 14px; color: #3b4854; text-decoration: none; font-size: 15px; font-weight: 620; }
.navigation a:hover, .navigation a:focus-visible { background: #f2f5f6; outline: none; }
.navigation a.active { border-color: #b8dfe8; background: var(--accent-soft); color: var(--accent-dark); }
.nav-icon { display: grid; width: 25px; height: 25px; place-items: center; font-size: 22px; font-weight: 400; }
.sidebar-footer { display: flex; gap: 10px; margin-top: auto; border-top: 1px solid var(--border); padding: 18px 10px 0; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { font-size: 12px; }.sidebar-footer span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.environment-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px #e3f3e7; }

.main-content { width: calc(100% - var(--sidebar)); min-width: 0; margin-left: var(--sidebar); padding: 28px 26px 56px; }
.page-header { display: flex; min-height: 91px; align-items: flex-start; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: 11px; font-weight: 760; letter-spacing: .12em; }
.page-header h1 { margin: 0; font-size: clamp(28px, 2.2vw, 38px); line-height: 1.1; letter-spacing: -.035em; }
.page-header h1:focus { outline: none; }
.page-header > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 15px; }
.access-label { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); padding: 9px 14px; color: #4f5c68; font-size: 13px; font-weight: 650; }
.access-dot { width: 8px; height: 8px; border-radius: 50%; background: #7b8792; }
.access-label[data-mode="write"] { border-color: #9dd2de; background: var(--accent-soft); color: var(--accent-dark); }
.access-label[data-mode="write"] .access-dot { background: var(--accent); }
.identity-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }.identity-email { color: var(--muted); font-size: 12px; }

.status-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.status-item { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; white-space: nowrap; }
.status-item + .status-item { border-left: 1px solid var(--border); }
.status-item span { color: var(--muted); }.status-item strong { color: var(--success); font-size: 14px; }.status-item strong.attention { color: var(--danger); }
.load-error, .form-error { border: 1px solid #efb8ba; border-radius: 8px; background: #fff3f3; padding: 11px 14px; color: #9e252b; font-weight: 600; }
.load-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.view { display: grid; gap: 16px; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .7fr); gap: 16px; }
.section-heading, .section-actionbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; }
.section-heading { border-bottom: 1px solid var(--border); }
.section-heading h2, .section-actionbar h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-heading p, .section-actionbar p { margin: 4px 0 0; color: var(--muted); }
.text-button { border: 0; background: transparent; padding: 3px 0; color: var(--accent-dark); cursor: pointer; font-weight: 680; white-space: nowrap; }
.text-button:hover { text-decoration: underline; }
.mode-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
.mode-summary-item { display: grid; grid-template-columns: auto 1fr; gap: 4px 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; padding: 15px; cursor: pointer; text-align: left; }
.mode-summary-item:hover, .mode-summary-item:focus-visible { border-color: var(--border); background: var(--bg); outline: none; }
.mode-summary-item strong { align-self: center; text-align: right; font-size: 24px; line-height: 1; }
.mode-summary-item span:last-child { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.operations-list { margin: 0; padding: 5px 20px 13px; }
.operations-list > div, .detail-list > div, .capability-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding: 10px 0; }
.operations-list > div:last-child, .detail-list > div:last-child, .capability-list > div:last-child { border-bottom: 0; }
dt { color: var(--muted); } dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 680; text-align: right; }
dd.no { color: var(--danger); } dd.yes { color: var(--success); }

.workspace { display: grid; grid-template-columns: minmax(650px, 1.7fr) minmax(310px, .78fr); gap: 16px; min-height: 650px; }
.group-region { align-self: start; }
.table-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 200px auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); padding: 14px 16px; }
.staff-toolbar { grid-template-columns: minmax(260px, 1fr) auto auto; }
.audit-toolbar { grid-template-columns: minmax(280px, 1fr) 190px auto; }
.search-control input, .filter-control select, .dialog-body input, .dialog-body select { width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; padding: 0 12px; color: var(--text); outline: none; }
.search-control input:focus, .filter-control select:focus, .dialog-body input:focus, .dialog-body select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(7 143 172 / 12%); }
.filtered-count { align-self: center; color: #4c5965; font-weight: 650; white-space: nowrap; }
.table-scroll { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 46px; border-bottom: 1px solid var(--border-strong); padding: 0 16px; color: #38434e; font-size: 12px; font-weight: 740; white-space: nowrap; }
td { height: 49px; border-bottom: 1px solid var(--border); padding: 8px 16px; font-size: 12px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #f8fafb; } tbody tr.selected { background: var(--surface-soft); box-shadow: inset 4px 0 0 var(--accent); }
.row-select { width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.row-select strong, .row-select span { display: block; }.row-select strong { font-size: 13px; }.row-select span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.row-select:focus-visible { border-radius: 3px; outline: 2px solid var(--accent); outline-offset: 3px; }
.timestamp { color: var(--muted); white-space: nowrap; }.loading-cell, .empty-cell { height: 140px; color: var(--muted); text-align: center; }

.inspector { align-self: start; min-height: 420px; padding: 22px; overflow: visible; }
.inspector-empty { display: grid; min-height: 360px; place-items: center; color: var(--muted); text-align: center; }
.inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.inspector-heading h2 { max-width: 270px; margin: 0; font-size: 20px; line-height: 1.2; }.secondary-id { margin: 5px 0 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.inspector-section { border-bottom: 1px solid var(--border); padding: 18px 0; }.inspector-section h3 { margin: 0 0 8px; font-size: 13px; }.capability-list, .detail-list { margin: 0; }
.readonly-note { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }

.mode-chip, .state-chip { display: inline-flex; min-width: 68px; min-height: 26px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 999px; background: #f3f5f6; padding: 3px 9px; color: #4e5964; font-size: 10px; font-weight: 780; letter-spacing: .03em; }
.mode-chip[data-mode="SHADOW"] { border-color: #9fcbd5; background: #edf8fa; color: #08738a; }.mode-chip[data-mode="ASSISTED"] { border-color: #8ed0a0; background: #eef9f1; color: #24763a; }.mode-chip[data-mode="CANARY"] { border-color: #ebc277; background: #fff7e7; color: #945e00; }
.state-chip[data-active="true"] { border-color: #8ed0a0; background: #eef9f1; color: #24763a; }.state-chip[data-active="false"] { color: #747e87; }
.primary-button, .secondary-button, .icon-button { min-height: 44px; border-radius: 7px; padding: 0 16px; cursor: pointer; font-weight: 680; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }.primary-button:hover { background: var(--accent-dark); }.primary-button:disabled { cursor: wait; opacity: .65; }.secondary-button { border: 1px solid var(--border-strong); background: #fff; }.icon-button { width: 44px; min-height: 44px; border: 0; background: transparent; padding: 0; font-size: 26px; }.full-width { width: 100%; margin-top: 18px; }
.compact-button { min-height: 34px; flex: 0 0 auto; padding: 0 12px; }

.section-actionbar { align-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }.staff-workspace { min-height: 530px; }
.admin-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; box-shadow: var(--shadow); }.admin-dialog::backdrop { background: rgb(12 30 37 / 46%); backdrop-filter: blur(2px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding: 20px 22px 16px; }.dialog-header h2 { margin: 0; font-size: 21px; }
.dialog-body { display: grid; gap: 16px; padding: 20px 22px; }.dialog-body label { display: grid; gap: 6px; color: #394550; font-size: 12px; font-weight: 680; }.form-hint { color: var(--muted); font-size: 11px; font-weight: 480; }.target-box { display: grid; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 12px 14px; }.target-box strong { font-size: 14px; }.target-box span { margin-top: 2px; color: var(--muted); font-size: 11px; }.confirm-control { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 9px !important; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 11px 12px; font-weight: 560 !important; }.confirm-control input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.confirm-control[hidden] { display: none !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); padding: 14px 22px 18px; }
.form-error { font-size: 12px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 420px; border: 1px solid #94cba2; border-radius: 9px; background: #f0faf3; box-shadow: var(--shadow); padding: 13px 16px; color: #225f31; font-weight: 650; }

@media (max-width: 1100px) {
  :root { --sidebar: 196px; }.overview-grid, .workspace { grid-template-columns: 1fr; }.inspector { min-height: 0; }.inspector-empty { min-height: 120px; }.status-rail { grid-template-columns: repeat(2, 1fr); }.status-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }.status-item:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  :root { --sidebar: 0px; }.sidebar { position: static; width: 100%; padding: 16px; }.brand { margin-bottom: 16px; }.navigation { grid-template-columns: repeat(4, 1fr); }.navigation a { min-height: 44px; justify-content: center; padding: 0 6px; font-size: 12px; }.nav-icon { display: none; }.sidebar-footer { display: none; }.main-content { width: 100%; margin: 0; padding: 20px 14px 42px; }.page-header { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }.access-label { align-self: flex-start; padding: 8px 10px; font-size: 11px; }.status-rail { grid-template-columns: 1fr 1fr; }.status-item { align-items: flex-start; flex-direction: column; gap: 2px; padding: 10px 14px; }.table-toolbar { grid-template-columns: 1fr; }.mode-summary { grid-template-columns: 1fr; }.section-heading, .section-actionbar { align-items: flex-start; flex-direction: column; }.load-error { align-items: stretch; flex-direction: column; }.toast { right: 14px; bottom: 14px; left: 14px; }
  [data-view="groups"] th:nth-child(3), [data-view="groups"] td:nth-child(3), [data-view="groups"] th:nth-child(4), [data-view="groups"] td:nth-child(4), [data-view="staff"] th:nth-child(2), [data-view="staff"] td:nth-child(2), [data-view="staff"] th:nth-child(4), [data-view="staff"] td:nth-child(4) { display: none; }
  [data-view="groups"] th, [data-view="groups"] td, [data-view="staff"] th, [data-view="staff"] td { padding-right: 14px; padding-left: 14px; }
  .recent-table thead, .audit-table thead { display: none; }
  .recent-table tbody, .audit-table tbody { display: grid; gap: 10px; padding: 12px; }
  .recent-table tbody tr, .audit-table tbody tr { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
  .recent-table td, .audit-table td { display: grid; height: auto; min-height: 42px; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 10px; border-bottom: 1px solid var(--border); padding: 10px 12px; overflow-wrap: anywhere; }
  .recent-table td:last-child, .audit-table td:last-child { border-bottom: 0; }
  .recent-table td::before, .audit-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; }
  .recent-table .empty-cell, .audit-table .empty-cell { display: block; min-height: 100px; padding: 38px 12px; text-align: center; }
}