:root {
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --selected: #EFF6FF;
  --page: #F3F7FC;
  --surface: #FFFFFF;
  --surface-soft: #F8FAFC;
  --text: #1E293B;
  --muted: #64748B;
  --muted-on-bg: #526176;
  --line: #E2E8F0;
  --success: #15803D;
  --success-bg: #F0FDF4;
  --success-line: #BBF7D0;
  --warning: #A16207;
  --warning-bg: #FFFBEB;
  --warning-line: #FDE68A;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --danger-line: #FECACA;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 2px 8px rgb(15 23 42 / 3%);
  --shadow-md: 0 12px 42px rgb(30 41 59 / 4%);
  --shadow-modal: 0 24px 90px rgb(15 23 42 / 18%);
  --focus: 0 0 0 3px rgb(37 99 235 / 14%);
  --sidebar-width: 244px;
  color-scheme: light;
  font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}
button:hover:not(:disabled) { border-color: #BFDBFE; background: var(--selected); color: var(--primary-hover); }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
button.primary { background: var(--primary); border-color: var(--primary); color: #FFF; box-shadow: 0 2px 3px rgb(37 99 235 / 10%); }
button.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); color: #FFF; }
button.danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
button.danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); border-color: #FCA5A5; }
button.subtle, button.icon-button { background: transparent; border-color: transparent; box-shadow: none; }
button.icon-button { width: 40px; flex: 0 0 40px; padding: 9px; }
input, textarea, select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin-top: var(--space-2); padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 13px; font-weight: 400; line-height: 1.6; transition: border-color 150ms, box-shadow 150ms; }
input:hover, textarea:hover, select:hover { border-color: #CBD5E1; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus); outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; flex: 0 0 18px; accent-color: var(--primary); cursor: pointer; }
input[type="hidden"] { display: none; }
label { display: block; min-width: 0; margin: 19px 0; font-size: 13px; font-weight: 600; }
label small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 1.65; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, p, small, strong, span { overflow-wrap: anywhere; }
h1, h2, h3 { color: var(--text); }
h1 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 650; letter-spacing: -.5px; }
h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.6; font-weight: 650; }
h3 { margin: 0 0 8px; font-size: 14px; line-height: 1.6; font-weight: 600; }
p { margin: 8px 0; }
small, .muted { color: var(--muted); }
small { font-size: 12px; }
code { padding: 3px 6px; border-radius: 4px; color: #475569; background: #F1F5F9; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { width: 20px; height: 20px; display: block; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon.icon-module { fill: none; stroke: none; overflow: visible; }
.eyebrow { display: block; color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.card { min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.card > h2 + .muted { margin-top: 4px; }
.card > .muted:last-child { margin-bottom: 0; }
.stack { display: grid; gap: 22px; min-width: 0; }
.error { color: var(--danger); white-space: pre-line; }
.error:empty, .notice:empty, .form-status:empty { display: none; }

.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
.login-intro { display: flex; flex-direction: column; min-width: 0; padding: 46px clamp(34px, 5vw, 84px) 28px; background: #EDF4FF; border-right: 1px solid #DFE9F7; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 650; line-height: 1.45; }
.brand > span:last-child { min-width: 0; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .12em; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 11px; color: #FFF; background: var(--primary); }
.brand-mark .icon { width: 23px; height: 23px; }
.login-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.login-intro-copy { width: min(100%, 400px); margin: auto 0; padding: 65px 0; }
.login-intro-copy h2 { margin: 18px 0 20px; font-size: clamp(28px, 3.3vw, 44px); font-weight: 650; line-height: 1.4; letter-spacing: -1px; }
.login-intro-copy > p { margin-bottom: 34px; color: var(--muted-on-bg); font-size: 14px; line-height: 1.9; }
.login-feature { display: flex; align-items: center; gap: 15px; margin-top: 22px; }
.feature-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; }
.feature-icon .icon-module { width: 40px; height: 40px; flex-basis: 40px; }
.login-feature strong { display: block; font-size: 13px; font-weight: 600; }
.login-feature small { display: block; margin-top: 3px; color: var(--muted-on-bg); font-size: 12px; }
.login-intro-footer { margin: 0; color: var(--muted-on-bg); font-size: 12px; }
.login-brand small { color: var(--muted-on-bg); }
.login-panel { display: grid; place-items: center; position: relative; min-width: 0; padding: 72px 24px; }
.login-display-control { position: absolute; top: 22px; right: 24px; color: var(--muted-on-bg); font-size: 12px; }
.login-display-control .icon { width: 17px; height: 17px; flex-basis: 17px; }
.login-card { width: min(100%, 420px); padding: var(--space-6); border-color: #E4EAF2; box-shadow: var(--shadow-md); }
.login-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; }
.login-symbol .icon-module { width: 46px; height: 46px; flex-basis: 46px; }
.login-card h1 { margin: 8px 0 10px; font-size: 25px; }
.login-description { margin-bottom: 26px; color: var(--muted); font-size: 13px; }
.login-card label { margin: 20px 0; }
.login-card input { min-height: 46px; }
.login-card .primary { width: 100%; min-height: 46px; margin: 6px 0 0; }
.login-card .primary .icon { width: 17px; height: 17px; flex-basis: 17px; }
.login-card .error { padding: 10px 12px; border: 1px solid var(--danger-line); border-radius: 8px; background: var(--danger-bg); font-size: 12px; }
.login-security { display: flex; align-items: flex-start; gap: 7px; margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.login-security .icon { width: 15px; height: 15px; flex-basis: 15px; margin-top: 2px; color: #94A3B8; }

#shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100svh; }
#sidebar { display: flex; flex-direction: column; min-width: 0; height: 100svh; position: sticky; top: 0; z-index: 40; padding: 27px var(--space-4) 18px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; min-height: 43px; gap: 10px; margin: 0 6px 17px; }
#menu-close { display: none; }
nav { min-width: 0; }
.nav-group { display: block; margin: 24px 14px 9px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .09em; }
nav button { display: flex; justify-content: flex-start; gap: var(--space-3); width: 100%; min-height: 43px; margin: var(--space-1) 0; padding: 11px 13px; border-color: transparent; border-radius: var(--radius-md); color: #526176; background: transparent; font-size: 13px; font-weight: 500; text-align: left; }
nav button .icon { width: 24px; height: 24px; flex-basis: 24px; }
nav button > span { min-width: 0; }
nav button:hover:not(:disabled) { color: var(--text); background: var(--surface-soft); border-color: transparent; }
nav button.active { color: var(--primary); background: var(--selected); font-weight: 600; }
nav button.active .icon { color: var(--primary); }
nav button.active:hover:not(:disabled) { color: var(--primary-hover); background: #E6F0FF; }
.aside-note { margin: auto 6px 0; padding: 16px 11px 0; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; line-height: 1.85; }
.aside-note-title { display: flex; align-items: center; gap: 7px; color: #475569; font-weight: 600; }
.aside-note .icon { width: 15px; height: 15px; flex-basis: 15px; color: var(--primary); }
.aside-note p { margin: 7px 0 0; }
.workspace { min-width: 0; }
.toolbar { display: flex; align-items: center; gap: var(--space-4); min-height: 86px; padding: 17px 30px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--surface); }
.toolbar-heading { min-width: 0; }
.toolbar-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.toolbar-breadcrumb > span:first-child { color: #CBD5E1; }
.toolbar h1 { margin: 0; font-size: 20px; line-height: 1.5; letter-spacing: -.2px; }
.toolbar-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 9px; margin-left: auto; }
.toolbar-actions button { padding: 8px 10px; min-height: 38px; color: #526176; font-size: 12px; }
.toolbar-actions .icon { width: 17px; height: 17px; flex-basis: 17px; }
.toolbar-divider { width: 1px; height: 26px; margin: 0 7px; background: var(--line); }
.toolbar-user { display: flex; align-items: center; gap: 9px; color: #475569; font-size: 12px; font-weight: 550; }
.user-avatar { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px; border: 1px solid #DBEAFE; border-radius: 50%; background: var(--selected); color: var(--primary); font-size: 12px; }
.toolbar-user small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
#menu-toggle { display: none; }
#menu-backdrop { display: none; }
#content { min-width: 0; max-width: 1450px; margin: 0 auto; padding: var(--space-5) var(--space-6) 60px; outline: none; }
#content:focus-visible { outline: 2px solid var(--primary); outline-offset: -5px; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 24px; }
.page-intro-copy { min-width: 0; }
.page-intro h2 { margin-bottom: 5px; font-size: 22px; font-weight: 650; letter-spacing: -.3px; }
.page-intro p { max-width: 700px; margin: 0; color: var(--muted-on-bg); font-size: 12px; line-height: 1.8; }
.page-intro-label { padding: 6px 10px; flex: 0 0 auto; border: 1px solid #DBEAFE; border-radius: 7px; color: var(--primary); background: #F8FBFF; font-size: 11px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.metric { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 24px; }
.metric-copy { min-width: 0; }
.metric small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.metric strong { display: block; margin-top: 10px; font-size: 32px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: -.7px; }
.metric-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; }
.metric-icon .icon-module { width: 40px; height: 40px; flex-basis: 40px; }
.overview-notice { display: flex; align-items: flex-start; gap: 15px; padding: 21px 24px; border-color: #DBEAFE; background: #F8FBFF; box-shadow: none; }
.overview-notice > .icon { width: 23px; height: 23px; flex-basis: 23px; margin-top: 2px; color: var(--primary); }
.overview-notice h2 { font-size: 14px; }
.overview-notice p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 -6px; }
.section-heading h2 { margin: 0; font-size: 16px; }
.section-heading small { color: var(--muted-on-bg); font-size: 11px; }
.provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.provider-card { display: flex; flex-direction: column; padding: 23px 24px 19px; }
.provider-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.provider-card-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.provider-card-title h2 { margin: 0; font-size: 15px; }
.provider-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; }
.provider-icon .icon-module { width: 36px; height: 36px; flex-basis: 36px; }
.provider-card-meta { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 18px; margin-bottom: 20px; }
.provider-card-meta p { display: grid; gap: 4px; margin: 0; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.provider-card-meta small { color: var(--muted); font-size: 11px; }
.provider-card > button { justify-content: space-between; width: 100%; min-height: 37px; margin-top: auto; padding: 11px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--primary); background: transparent; font-size: 12px; }
.provider-card > button:hover:not(:disabled) { border-color: var(--line); background: transparent; color: var(--primary-hover); }
.provider-card > button .icon { width: 16px; height: 16px; flex-basis: 16px; }
.boundary-card > p { font-size: 12px; line-height: 1.9; }
.two-columns { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .85fr); gap: 22px; align-items: start; }
.provider-form-card > h2 { padding-bottom: 16px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
.provider-form > label:first-child { margin-top: 18px; }
.provider-status > .status { margin: 4px 0 18px; }
.key-value-list { display: grid; gap: 14px; margin: 0; }
.key-value-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #F1F5F9; }
.key-value-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.key-value-list dt { min-width: 0; color: var(--muted); font-size: 12px; }
.key-value-list dd { min-width: 0; margin: 0; text-align: right; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.instruction-card > p { color: var(--muted); font-size: 12px; line-height: 1.9; white-space: pre-line; }
.instruction-steps { margin: 16px 0 18px; padding: 14px; border: 1px solid #E4ECFA; border-radius: 8px; background: #F8FBFF; }
.status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 3px var(--space-2); border: 1px solid #E8ECF2; border-radius: var(--radius-sm); color: #64748B; background: #F8FAFC; font-size: 10px; font-weight: 500; line-height: 1.5; white-space: normal; }
.status::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.status.good { border-color: var(--success-line); color: var(--success); background: var(--success-bg); }
.status.warning { border-color: var(--warning-line); color: var(--warning); background: var(--warning-bg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.provider-form > .actions { padding-top: 20px; border-top: 1px solid var(--line); }
.provider-form > .actions button { flex: 0 1 auto; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.switch { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font-size: 12px; font-weight: 500; line-height: 1.7; }
.switch input { margin-top: 1px; }
.switch span { min-width: 0; }
.notice { padding: 13px 15px; border: 1px solid #DBEAFE; border-radius: 8px; color: #365A92; background: var(--selected); font-size: 12px; line-height: 1.8; white-space: pre-line; }
.warning-note { color: var(--warning); border-color: var(--warning-line); background: var(--warning-bg); }
.form-status { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #DBEAFE; border-radius: 8px; background: #F8FBFF; color: #365A92; font-size: 12px; white-space: pre-line; }
.divider { border-top: 1px solid var(--line); margin: 22px 0; }
.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin-top: 17px; }
.categories label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; min-height: 44px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; cursor: pointer; }
.categories label:hover { border-color: #BFDBFE; background: #FAFCFF; }
.categories label:has(input:checked) { border-color: #BFDBFE; color: var(--primary-hover); background: var(--selected); }
.categories input { margin-top: 1px; }
.table-wrap { width: 100%; max-width: 100%; min-width: 0; margin-top: 19px; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; overscroll-behavior-x: contain; }
.table-wrap:has(> .empty) { border-style: dashed; background: #FCFDFE; }
table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12px; text-align: left; }
thead { background: var(--surface-soft); }
th { color: #64748B; font-size: 11px; font-weight: 550; white-space: nowrap; }
th, td { padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FAFCFF; }
td { color: #475569; overflow-wrap: anywhere; }
td strong { font-size: 12px; font-weight: 600; color: var(--text); }
td small { display: block; margin-top: 4px; font-size: 11px; overflow-wrap: anywhere; }
td button { min-height: 33px; margin: 3px 4px 3px 0; padding: 6px 10px; font-size: 11px; }
table.sites { table-layout: fixed; }
table.sites th:first-child { width: 34%; }
table.sites th:nth-child(2) { width: 17%; }
table.sites th:nth-child(3) { width: 25%; }
table.sites th:last-child { width: 24%; }
.filter-bar { display: flex; align-items: center; gap: 11px; margin-top: 23px; padding: 15px; border: 1px solid #E9EEF5; border-radius: 9px; background: #FBFCFE; }
.filter-bar input, .filter-bar select { min-height: 40px; margin: 0; background: var(--surface); }
.filter-bar input { flex: 1 1 220px; }
.filter-bar select { flex: 0 1 160px; width: 160px; }
.filter-bar button { min-height: 40px; flex: 0 0 auto; color: var(--primary); border-color: #BFDBFE; background: #F8FBFF; }
.empty { display: grid; justify-items: center; gap: 12px; margin: 0; padding: 46px 22px; color: var(--muted); font-size: 12px; text-align: center; }
.empty::before { content: ""; width: 35px; height: 27px; border: 1.5px solid #B7C8DE; border-radius: 5px; background: #F1F6FE; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 13px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.pagination button { min-height: 34px; padding: 6px 11px; font-size: 11px; }
.pagination span { text-align: center; }
.download-card { margin-top: 20px; padding: 18px; border: 1px solid var(--success-line); border-radius: 9px; background: #FBFFFC; }
.download-card > strong { display: block; margin-bottom: 8px; color: var(--success); font-size: 13px; }
.download-card p { font-size: 12px; line-height: 1.85; }
.download-card button { margin: 8px 0; color: var(--success); border-color: var(--success-line); }
.release-form { margin-top: 20px; padding: 0 19px 19px; border: 1px solid #E8EEF7; border-radius: 9px; background: #FBFCFF; }
.legacy-card > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.legacy-card > summary::-webkit-details-marker { display: none; }
.legacy-card > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; }
.legacy-card[open] > summary::after { content: "−"; }
.legacy-card > p { margin-top: 15px; font-size: 12px; }
.audit-table { table-layout: fixed; }
.audit-table th:first-child { width: 31%; }
.audit-table th:nth-child(2) { width: 34%; }
.audit-table th:last-child { width: 35%; }
.account-card { max-width: 800px; }
.account-form { max-width: 510px; margin-top: 25px; }
.account-form > button { margin-top: 8px; }
.account-card > p { font-size: 12px; }
.mobile-label { display: none; }
.loading { display: grid; justify-items: center; gap: 15px; margin: 0; padding: 70px 18px; color: var(--muted-on-bg); font-size: 13px; text-align: center; }
.loading::before { content: ""; width: 26px; height: 26px; border: 2px solid #DBEAFE; border-top-color: var(--primary); border-radius: 50%; animation: loading-spin 850ms linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; z-index: 1000; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 13px 19px; border: 1px solid #334155; border-radius: 10px; box-shadow: 0 8px 25px rgb(15 23 42 / 14%); color: #FFF; background: #1E293B; transform: translateX(-50%); font-size: 12px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
dialog { width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100svh - 48px); padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text); background: var(--surface); box-shadow: var(--shadow-modal); overflow-y: auto; }
dialog::backdrop { background: rgb(15 23 42 / 35%); }
.dialog-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 11px; color: var(--primary); background: var(--selected); }
dialog h2 { font-size: 18px; }
dialog p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.9; white-space: pre-line; }
dialog .actions { justify-content: flex-end; gap: 9px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

:root[data-display-mode="dark"] { --primary: #93B9FF; --primary-hover: #B5D0FF; --selected: #183258; --page: #101923; --surface: #182331; --surface-soft: #1E2B3C; --text: #E4ECF7; --muted: #ACBAD0; --muted-on-bg: #BAC8DC; --line: #334257; --success: #86EFAC; --success-bg: #18382C; --success-line: #315A46; --warning: #FCD34D; --warning-bg: #3D331C; --warning-line: #65542B; --danger: #FCA5A5; --danger-bg: #40252B; --danger-line: #704049; --shadow-sm: none; --shadow-md: none; color-scheme: dark; }
:root[data-display-mode="dark"] button.primary { color: #FFF; background: #2563EB; border-color: #2563EB; }
:root[data-display-mode="dark"] button.primary:hover:not(:disabled) { color: #FFF; background: #1D4ED8; border-color: #1D4ED8; }
:root[data-display-mode="dark"] :is(button:hover:not(:disabled), nav button.active:hover:not(:disabled)) { background: var(--selected); border-color: #415B80; }
:root[data-display-mode="dark"] .brand-mark { color: #FFF; background: #2563EB; }
:root[data-display-mode="dark"] .login-intro { background: #14253C; border-color: #293E5B; }
:root[data-display-mode="dark"] .login-card { border-color: var(--line); }
:root[data-display-mode="dark"] :is(.page-intro-label, .user-avatar) { color: var(--primary); background: #1A3050; border-color: #314B70; }
:root[data-display-mode="dark"] :is(nav button, .aside-note-title, .toolbar-actions button, .toolbar-user) { color: #C0CCE0; }
:root[data-display-mode="dark"] nav button.active { color: var(--primary); }
:root[data-display-mode="dark"] nav button:hover:not(:disabled) { color: var(--text); background: var(--surface-soft); }
:root[data-display-mode="dark"] :is(.overview-notice, .instruction-steps, .form-status) { background: #182D49; border-color: #304B70; }
:root[data-display-mode="dark"] .notice { color: #BED5FF; background: #182D49; border-color: #304B70; }
:root[data-display-mode="dark"] .warning-note { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-line); }
:root[data-display-mode="dark"] .form-status { color: #BED5FF; }
:root[data-display-mode="dark"] :is(.key-value-list > div, table.sites td + td) { border-color: var(--line); }
:root[data-display-mode="dark"] .status { color: var(--muted); background: var(--surface-soft); border-color: var(--line); }
:root[data-display-mode="dark"] .status.good { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
:root[data-display-mode="dark"] .status.warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-line); }
:root[data-display-mode="dark"] :is(.filter-bar, .release-form) { background: #142030; border-color: var(--line); }
:root[data-display-mode="dark"] .filter-bar button { color: var(--primary); background: #1A3050; border-color: #314B70; }
:root[data-display-mode="dark"] :is(.table-wrap:has(> .empty), .download-card) { background: var(--surface); }
:root[data-display-mode="dark"] :is(th, td, .provider-card-meta p) { color: #C3CEE0; }
:root[data-display-mode="dark"] th { color: var(--muted); }
:root[data-display-mode="dark"] :is(tbody tr:hover, .categories label:hover) { background: #1B2C43; }
:root[data-display-mode="dark"] .categories label:has(input:checked) { color: #C5DAFF; background: var(--selected); border-color: #496F9F; }
:root[data-display-mode="dark"] .empty::before { background: #1A3050; border-color: #597292; }
:root[data-display-mode="dark"] code { color: #C6D5EB; background: #233248; }

@media (min-width: 1500px) {
  .provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .provider-card-heading { flex-wrap: wrap; }
  .provider-card-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 1100px) {
  :root { --sidebar-width: 224px; }
  #sidebar { padding-right: 12px; padding-left: 12px; }
  .brand { font-size: 13px; gap: 9px; }
  .brand-mark { width: 35px; height: 35px; flex-basis: 35px; }
  .toolbar { padding-right: 22px; padding-left: 22px; }
  .toolbar-user { display: none; }
  #content { padding: 24px 22px 50px; }
  .two-columns { grid-template-columns: minmax(0, 1fr); }
  .two-columns > .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .metrics { gap: 14px; }
  .metric { padding: 20px 18px; }
  .metric-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .metric-icon .icon-module { width: 38px; height: 38px; flex-basis: 38px; }
  .metric strong { font-size: 29px; }
}
@media (max-width: 760px) {
  body { min-width: 280px; }
  body.menu-open { overflow: hidden; }
  button { min-height: 42px; }
  .login-layout { grid-template-columns: minmax(0, 1fr); }
  .login-intro { padding: 22px 22px 23px; border-right: 0; border-bottom: 1px solid #DFE9F7; }
  .login-intro-copy, .login-intro-footer { display: none; }
  .login-brand { font-size: 15px; }
  .login-panel { align-content: start; padding: 76px 18px 45px; }
  .login-display-control { top: 17px; right: 18px; }
  .login-card { max-width: 430px; padding: 27px 25px; }
  .login-symbol { margin-bottom: 20px; }
  .login-card h1 { font-size: 24px; }
  #shell { display: block; }
  #sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(284px, calc(100vw - 42px)); height: 100svh; padding: calc(22px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); visibility: hidden; transform: translateX(-100%); transition: transform 180ms ease, visibility 180ms; box-shadow: 16px 0 40px rgb(15 23 42 / 12%); }
  #sidebar.open { visibility: visible; transform: translateX(0); }
  .sidebar-brand { margin: 0 2px 13px; }
  .sidebar-brand .brand { font-size: 13px; }
  #menu-close { display: inline-flex; width: 40px; min-height: 44px; flex-basis: 40px; padding: 10px; }
  #menu-close .icon { width: 18px; height: 18px; flex-basis: 18px; }
  #menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: rgb(15 23 42 / 34%); cursor: default; }
  .aside-note { margin-top: 30px; }
  .toolbar { gap: 9px; min-height: 75px; padding: calc(12px + env(safe-area-inset-top)) 13px 12px; }
  #menu-toggle { display: inline-flex; width: 44px; min-height: 44px; flex-basis: 44px; padding: 12px; }
  .toolbar-heading { flex: 1 1 auto; }
  .toolbar h1 { font-size: 16px; line-height: 1.5; }
  .toolbar-breadcrumb { gap: 6px; margin-bottom: 3px; font-size: 9px; }
  #page-context, .toolbar-breadcrumb > span:first-child { display: none; }
  .toolbar-actions { gap: 3px; margin-left: 0; }
  .toolbar-actions button { gap: 5px; min-height: 44px; padding: 8px; font-size: 11px; }
  .toolbar-actions #refresh, .toolbar-actions #display-mode-toggle { width: 44px; padding: 12px; }
  .toolbar-actions #refresh > span, .toolbar-actions #display-mode-toggle > span, .toolbar-actions .logout-button > .icon, .toolbar-divider { display: none; }
  #content { padding: 22px 16px calc(36px + env(safe-area-inset-bottom)); }
  .card { padding: 20px; border-radius: 10px; }
  .stack { gap: 18px; }
  .page-intro { gap: 12px; margin-bottom: 20px; }
  .page-intro h2 { font-size: 20px; }
  .page-intro p { font-size: 11px; }
  .page-intro-label { padding: 5px 7px; font-size: 10px; }
  .metrics { gap: 10px; }
  .metric { display: block; padding: 15px 12px; }
  .metric-icon { display: none; }
  .metric small { font-size: 10px; line-height: 1.7; }
  .metric strong { margin-top: 8px; font-size: 25px; }
  .overview-notice { gap: 12px; padding: 18px; }
  .overview-notice > .icon { width: 20px; height: 20px; flex-basis: 20px; }
  .provider-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .provider-card { padding: 20px; }
  .provider-card-heading { gap: 10px; }
  .provider-card-title h2 { font-size: 14px; }
  .provider-card-meta { gap: 12px; }
  .two-columns { gap: 18px; }
  .two-columns > .stack { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .provider-form > .actions { gap: 8px; }
  .provider-form > .actions button { flex: 1 1 calc(50% - 8px); min-height: 44px; padding-right: 8px; padding-left: 8px; font-size: 11px; }
  .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .categories label { padding: 11px 9px; font-size: 11px; }
  .filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 20px; padding: 12px; }
  .filter-bar input { grid-column: 1 / -1; }
  .filter-bar select { width: 100%; }
  .filter-bar input, .filter-bar select, .filter-bar button { min-height: 42px; }
  .table-wrap:has(table.sites) { border: 0; border-radius: 0; overflow: visible; }
  table.sites thead { display: none; }
  table.sites, table.sites tbody, table.sites tr, table.sites td { display: block; width: 100%; }
  table.sites tr { margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
  table.sites tr:last-child { margin-bottom: 0; }
  table.sites td { display: grid; grid-template-columns: minmax(75px, .5fr) minmax(0, 1fr); gap: 7px 12px; padding: 9px 0; border: 0; font-size: 12px; }
  table.sites td + td { border-top: 1px solid var(--line); }
  table.sites td::before { content: attr(data-label); color: var(--muted); font-size: 11px; line-height: 1.8; }
  .cell-value { min-width: 0; }
  .cell-value .status { margin-top: 1px; }
  td button { min-height: 36px; margin-top: 0; font-size: 11px; }
  td small { margin-top: 5px; }
  .pagination { justify-content: space-between; gap: 8px; font-size: 10px; }
  .pagination button { min-height: 36px; padding: 7px 10px; }
  .release-form { padding: 0 14px 15px; }
  .legacy-card > summary { font-size: 13px; }
  .legacy-card > summary::after { flex: 0 0 auto; }
  .audit-table th, .audit-table td { padding: 13px 9px; font-size: 11px; }
  .audit-table th { font-size: 10px; white-space: normal; }
  .audit-table th:first-child { width: 34%; }
  .audit-table th:nth-child(2), .audit-table th:last-child { width: 33%; }
  .toast { bottom: calc(18px + env(safe-area-inset-bottom)); padding: 12px 16px; }
  dialog { padding: 22px; }
  dialog .actions button { min-height: 42px; min-width: 80px; }
}
@media (max-width: 360px) {
  .toolbar { padding-right: 10px; padding-left: 10px; gap: 6px; }
  .toolbar h1 { font-size: 14px; }
  .toolbar-actions button { padding-right: 5px; padding-left: 5px; font-size: 10px; }
  #content { padding-right: 12px; padding-left: 12px; }
  .card { padding: 17px; }
  .metrics { gap: 7px; }
  .metric { padding: 13px 10px; }
  .metric strong { font-size: 23px; }
  .page-intro-label { display: none; }
  .provider-card-heading { flex-wrap: wrap; }
  .provider-card-heading > .status { margin-left: 48px; }
  table.sites tr { padding: 11px; }
  table.sites td { grid-template-columns: 69px minmax(0, 1fr); gap: 7px; }
  .login-card { padding: 25px 21px; }
  .categories { grid-template-columns: minmax(0, 1fr); }
}
.canada-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.canada-tabs button { flex: 1 1 150px; border-color: transparent; background: transparent; }
.canada-tabs button.active { color: var(--primary); border-color: var(--line); background: var(--selected); }
.canada-settings-form { display: grid; min-width: 0; gap: 18px; }
.canada-savebar { position: sticky; top: 85px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.canada-savebar > div { min-width: 0; }
.canada-savebar strong, .canada-savebar span { display: block; }
.canada-savebar span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.canada-savebar button { flex: 0 0 auto; }
.canada-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.canada-fields label { margin: 12px 0; }
.canada-fields .switch { margin-top: 35px; }
.canada-item-list { display: grid; min-width: 0; gap: 14px; margin-top: 18px; }
.canada-item { min-width: 0; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.canada-item > summary { padding: 14px 16px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.canada-item[open] > summary { border-bottom: 1px solid var(--line); }
.canada-item-body { min-width: 0; padding: 0 16px 16px; }
.canada-item-tools { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.canada-asset-field { min-width: 0; margin: 18px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.canada-asset-field > label { margin-top: 0; }
.canada-asset-field > .muted { font-size: 11px; }
.canada-asset-preview { display: grid; align-items: center; justify-items: start; min-height: 80px; max-width: 100%; margin: 10px 0; overflow: hidden; }
.canada-asset-preview img { display: block; max-width: 100%; width: auto; max-height: 200px; border-radius: 7px; object-fit: contain; }
.canada-asset-preview audio { display: block; width: min(100%, 360px); max-width: 100%; }
.canada-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.canada-upload-row input[type="file"] { margin: 0; padding: 8px; font-size: 11px; }
.canada-upload-row button { min-height: 44px; }
.canada-room-options { display: flex; flex-wrap: wrap; gap: 9px 16px; margin: 18px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.canada-room-options legend { padding: 0 6px; color: var(--muted); font-size: 12px; }
.canada-room-options label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 400; }
.canada-odds-wrap { margin: 0; border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.canada-odds-table { width: 100%; table-layout: fixed; }
.canada-odds-table th:first-child { width: 20%; }
.canada-odds-table th:not(:first-child) { width: 40%; }
.canada-odds-table label { margin: 0; font-size: 0; }
.canada-odds-table input { margin: 0; }
.canada-audio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
@media (max-width: 760px) {
 .canada-tabs button { flex-basis: calc(50% - 8px); padding: 9px 8px; font-size: 12px; }
 .canada-savebar { top: calc(74px + env(safe-area-inset-top)); gap: 10px; padding: 12px; }
 .canada-savebar strong { font-size: 12px; }
 .canada-savebar span { font-size: 10px; }
 .canada-savebar button { max-width: 44%; padding: 9px 10px; font-size: 12px; }
 .canada-fields, .canada-audio-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
 .canada-audio-grid { gap: 18px; }
 .canada-fields .switch { margin-top: 12px; }
 .canada-upload-row { grid-template-columns: minmax(0, 1fr); }
 .canada-upload-row button { justify-self: start; }
 .canada-item-body { padding-right: 11px; padding-left: 11px; }
 .canada-odds-table th, .canada-odds-table td { padding: 8px 5px; font-size: 10px; }
 .canada-odds-table input { padding: 9px 5px; font-size: 12px; }
 .canada-asset-field { padding: 10px; }
}

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