:root {
  --ui-accent: var(--module-accent, var(--accent, #46535e));
  --ui-accent-strong: var(--module-accent-strong, var(--accent-dark, #303b44));
  --ui-ink: #202d29;
  --ui-muted: #65736e;
  --ui-line: #d5dfdb;
  --ui-surface: #fff;
  --ui-surface-muted: #f5f8f7;
  --ui-success: #168064;
  --ui-warning: #b87912;
  --ui-danger: #b83c36;
  --ui-radius: 8px;
  --ui-shadow: 0 12px 30px rgba(25, 40, 34, .08);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --paper: var(--ui-surface);
  --canvas: #eef3f1;
  --accent: #46535e;
  --accent-dark: #303b44;
  --green: var(--ui-success);
  --ci-text: var(--ui-ink);
  --ci-muted: var(--ui-muted);
  --ci-border: var(--ui-line);
  --ci-surface: var(--ui-surface);
  --ci-surface-soft: var(--ui-surface-muted);
  --ci-navy: #17212b;
  --ci-navy-soft: #303f4b;
  --ci-orange: var(--ui-accent);
  --ci-orange-dark: var(--ui-accent-strong);
  --ci-success: var(--ui-success);
  --ci-success-soft: #edf8f4;
  --ci-radius: var(--ui-radius);
  --ci-shadow: none;
  --shadow: var(--ui-shadow);
}

html { min-height: 100%; background: #dfe5e2; }
body.ui-page { margin: 0; font-family: Arial, Helvetica, sans-serif; }
.ui-page *, .ui-page *::before, .ui-page *::after { box-sizing: border-box; }
.ui-page button, .ui-page input, .ui-page select, .ui-page textarea { font: inherit; }
.ui-page [hidden] { display: none !important; }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-page { min-height: 100%; color: var(--ui-ink); background: #eef3f1; }
.ui-shell { width: min(1080px, 100%); margin: 0 auto; padding: 24px 18px 42px; }
.ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.ui-page-head-copy { min-width: 0; }
.ui-eyebrow { margin: 0 0 5px; color: var(--ui-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ui-page-head h1 { margin: 0; color: var(--ui-ink); font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.ui-page-head p { max-width: 720px; margin: 8px 0 0; color: var(--ui-muted); line-height: 1.55; }
.ui-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ui-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-card { min-width: 0; padding: 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: none; }
.ui-card-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; color: var(--ui-ink); text-decoration: none; }
.ui-card-link:hover, .ui-card-link:focus-visible { border-color: var(--ui-accent); outline: 2px solid color-mix(in srgb, var(--ui-accent) 20%, transparent); outline-offset: 1px; }
.ui-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ui-radius); color: #fff; background: var(--ui-accent); }
.ui-card-copy { min-width: 0; }
.ui-card-copy strong, .ui-card-copy small { display: block; overflow-wrap: anywhere; }
.ui-card-copy strong { font-size: 16px; }
.ui-card-copy small { margin-top: 4px; color: var(--ui-muted); line-height: 1.45; }
.ui-card-arrow { color: var(--ui-accent); font-size: 24px; }

.ui-form { display: grid; gap: 14px; }
.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-field { display: grid; gap: 6px; min-width: 0; color: #394741; font-size: 12px; font-weight: 800; }
.ui-field input, .ui-field select, .ui-field textarea { box-sizing: border-box; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #b9c7c2; border-radius: 7px; color: var(--ui-ink); background: #fff; font: inherit; }
.ui-field textarea { min-height: 110px; resize: vertical; }
.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus { border-color: var(--ui-accent); outline: 2px solid color-mix(in srgb, var(--ui-accent) 22%, transparent); outline-offset: 1px; }

.ui-button, .ui-page .primary-action, .ui-page .secondary-action, .ui-page .danger-action { box-sizing: border-box; min-height: 42px; padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.ui-button.primary, .ui-page .primary-action { border-color: var(--ui-accent); color: #fff; background: var(--ui-accent); }
.ui-button.primary:hover, .ui-page .primary-action:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-strong); }
.ui-button.secondary, .ui-page .secondary-action { border-color: #b9c7c2; color: #34423e; background: #fff; }
.ui-button.secondary:hover, .ui-page .secondary-action:hover { border-color: var(--ui-accent); color: var(--ui-accent-strong); }
.ui-button.danger, .ui-page .danger-action { border-color: var(--ui-danger); color: #fff; background: var(--ui-danger); }
.ui-button:focus-visible, .ui-page .primary-action:focus-visible, .ui-page .secondary-action:focus-visible, .ui-page .danger-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent) 26%, transparent); outline-offset: 2px; }

.ui-flash, .ui-page .flash { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--ui-line); border-left: 4px solid var(--ui-accent); border-radius: var(--ui-radius); color: var(--ui-ink); background: #fff; }
.ui-flash.success, .ui-page .flash.success { border-left-color: var(--ui-success); }
.ui-flash.warning, .ui-page .flash.warning { border-left-color: var(--ui-warning); }
.ui-flash.error, .ui-page .flash.error { border-left-color: var(--ui-danger); }
.ui-empty, .ui-page .empty-state { padding: 28px 18px; border: 1px dashed #b9c7c2; border-radius: var(--ui-radius); color: var(--ui-muted); background: var(--ui-surface-muted); text-align: center; }
.ui-empty strong, .ui-empty span { display: block; }
.ui-empty strong { color: var(--ui-ink); }
.ui-empty span { margin-top: 5px; }
.ui-badge { min-height: 26px; padding: 4px 8px; display: inline-flex; align-items: center; border: 1px solid #c8d3cf; border-radius: 999px; color: #46534e; background: #f4f7f6; font-size: 11px; font-weight: 800; }
.ui-badge.success { border-color: #91c5b7; color: #0e6650; background: #edf8f4; }
.ui-badge.warning { border-color: #dfbd78; color: #7b520c; background: #fff8e8; }
.ui-badge.danger { border-color: #dda29e; color: #8d2a25; background: #fff1f0; }
.ui-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); color: var(--ui-ink); background: #fff; box-shadow: var(--ui-shadow); }
.ui-dialog::backdrop { background: rgba(18, 28, 24, .48); }
.ui-dialog-body { padding: 20px; }
.ui-page .eyebrow { margin: 0 0 5px; color: var(--ui-accent-strong); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.ui-page .shell { width: min(1080px, 100%); margin: 0 auto; padding: 28px 18px 48px; }
.ui-page .content-section { margin-bottom: 28px; }
.ui-page .section-title { margin: 0 0 8px; font-size: 28px; letter-spacing: 0; }
.ui-page .back-link { color: var(--ui-accent-strong); font-size: 13px; font-weight: 800; text-decoration: none; }
.ui-page .card-grid { display: grid; gap: 14px; }
.ui-page .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-page .nav-card { min-width: 0; min-height: 94px; padding: 15px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); color: var(--ui-ink); background: #fff; text-decoration: none; }
.ui-page .nav-card:hover, .ui-page .nav-card:focus-visible { border-color: var(--ui-accent); outline: 2px solid color-mix(in srgb, var(--ui-accent) 18%, transparent); outline-offset: 1px; }
.ui-page .card-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--ui-radius); color: #fff; background: var(--ui-accent); }
.ui-page .card-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-page .nav-card strong, .ui-page .nav-card small { display: block; }
.ui-page .nav-card small { margin-top: 4px; color: var(--ui-muted); font-size: 12px; line-height: 1.4; }

.ui-page.auth-body { min-height: 100vh; padding: 20px; display: grid; place-items: center; background: #17212b; }
.ui-page .auth-card { width: 100%; max-width: 410px; padding: 28px; border-radius: var(--ui-radius); background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.ui-page .brand-lockup { margin-bottom: 34px; display: flex; align-items: center; gap: 12px; }
.ui-page .brand-lockup > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px 2px; color: #fff; background: var(--ui-accent); font-size: 25px; font-weight: 900; }
.ui-page .brand-lockup div, .ui-page .brand-lockup small, .ui-page .brand-lockup strong { display: block; }
.ui-page .brand-lockup small { color: var(--ui-muted); font-size: 11px; text-transform: uppercase; }
.ui-page .brand-lockup strong { margin-top: 3px; color: var(--ui-ink); font-size: 18px; }
.ui-page .auth-card h1 { margin: 0 0 8px; font-size: 29px; letter-spacing: 0; }
.ui-page .auth-intro { margin: 0 0 22px; color: var(--ui-muted); font-size: 14px; line-height: 1.55; }
.ui-page .stack-form { display: grid; gap: 14px; }
.ui-page .stack-form label { display: grid; gap: 6px; color: #46534e; font-size: 13px; font-weight: 800; }
.ui-page .stack-form input { width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid #c8d2ce; border-radius: 7px; color: var(--ui-ink); background: #fff; }
.ui-page .stack-form input:focus { border-color: var(--ui-accent); outline: 3px solid color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-page.auth-body .primary-action { width: 100%; min-height: 50px; }
.ui-page .alert { margin-bottom: 16px; padding: 12px 14px; border-left: 4px solid var(--ui-warning); border-radius: var(--ui-radius); color: #77510d; background: #fff8e8; font-size: 13px; line-height: 1.45; }
.ui-page .alert.success { border-left-color: var(--ui-success); color: #0e6650; background: #edf8f4; }
.ui-page .alert.error { border-left-color: var(--ui-danger); color: #8d2a25; background: #fff1f0; }

.ui-page.backend-body { min-height: 100vh; background: #eef3f1; }
.ui-page .backend-shell { width: 100%; min-height: 100vh; margin: 0; background: #eef3f1; }
.ui-page .backend-main { width: min(1080px, 100%); margin: 0 auto; padding: 30px 18px 64px; }
.ui-page .backend-title { margin: 0 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ui-page .backend-title > div:first-child { padding-left: 17px; border-left: 4px solid var(--ui-accent); }
.ui-page .backend-title h1 { margin: 0 0 7px; font-size: 30px; line-height: 1.12; letter-spacing: 0; }
.ui-page .backend-title p { max-width: 760px; margin: 0; color: var(--ui-muted); line-height: 1.5; }
.ui-page .backend-flash { width: calc(min(1080px,100%) - 36px); margin: 18px auto 0; }
.ui-page .backend-stats { margin: 22px 0 26px; display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; }
.ui-page .backend-stat { min-height: 96px; padding: 18px; border: 1px solid var(--ui-line); border-top: 4px solid var(--ui-accent); border-radius: var(--ui-radius); background: #fff; }
.ui-page .backend-stat strong, .ui-page .backend-stat span { display: block; }
.ui-page .backend-stat strong { font-size: 26px; line-height: 1; }
.ui-page .backend-stat span { margin-top: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 800; }
.ui-page .office-form { margin-top: 20px; padding: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: #fff; }
.ui-page .office-form h2, .ui-page .office-form .wide { grid-column: 1 / -1; }
.ui-page .office-form label { min-width: 0; color: var(--ui-ink); font-size: 12px; font-weight: 900; }
.ui-page .office-form input, .ui-page .office-form select, .ui-page .office-form textarea { width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 12px; border: 1px solid #c8d2ce; border-radius: 7px; color: var(--ui-ink); background: #fbfcfb; }
.ui-page .office-form textarea { min-height: 100px; resize: vertical; }
.ui-page .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.ui-page .form-grid .wide { grid-column: 1 / -1; }
.ui-page .form-grid label { color: var(--ui-ink); font-size: 12px; font-weight: 900; }
.ui-page .form-grid input, .ui-page .form-grid select, .ui-page .form-grid textarea { width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 12px; border: 1px solid #c8d2ce; border-radius: 7px; background: #fbfcfb; }
.ui-page .form-hint { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.ui-page .bottom-sheet { width: min(520px,calc(100% - 28px)); max-height: 88vh; margin: auto; padding: 24px 20px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); color: var(--ui-ink); background: #fff; box-shadow: var(--ui-shadow); }
.ui-page .bottom-sheet::backdrop { background: rgba(18,28,24,.5); }
.ui-page .bottom-sheet h2 { margin: 0 42px 20px 0; }
.ui-page .sheet-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--ui-muted); background: var(--ui-surface-muted); font-size: 25px; cursor: pointer; }
.ui-page > .footer { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); color: var(--ui-muted); font-size: 12px; text-align: center; }
.ui-page > .footer a { color: var(--ui-accent-strong); }

.system-nav { margin: 0 0 18px; padding: 6px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: #fff; }
.system-nav a { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; border-radius: 6px; color: #46534e; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.system-nav a:hover, .system-nav a:focus-visible { color: var(--ui-accent-strong); background: var(--ui-surface-muted); outline: 0; }
.system-nav a.active { color: #fff; background: var(--ui-accent); }
.system-summary { margin-bottom: 16px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.system-summary-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--ui-radius); color: #fff; background: var(--ui-success); font-size: 26px; font-weight: 900; }
.system-summary.warn .system-summary-mark { background: var(--ui-warning); }
.system-summary.fail .system-summary-mark { background: var(--ui-danger); }
.system-summary-copy strong { display: block; font-size: 18px; }
.system-summary-copy p { margin: 5px 0 0; color: var(--ui-muted); }
.system-counts { display: flex; gap: 6px; }
.system-counts span { min-width: 58px; padding: 7px; border-radius: 7px; color: var(--ui-muted); background: var(--ui-surface-muted); font-size: 10px; text-align: center; }
.system-counts b { display: block; color: var(--ui-ink); font-size: 18px; }
.system-check-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.system-check { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.system-check-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ui-success); font-weight: 900; }
.system-check.warn .system-check-mark { background: var(--ui-warning); }
.system-check.fail .system-check-mark { background: var(--ui-danger); }
.system-check strong { display: block; }
.system-check p { margin: 5px 0 0; color: var(--ui-muted); font-size: 13px; line-height: 1.45; }
.system-check a { margin-top: 7px; display: inline-flex; color: var(--ui-accent-strong); font-size: 12px; font-weight: 800; }
.system-action-row { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.system-action-row h2 { margin: 0; font-size: 17px; }
.system-action-row p { margin: 5px 0 0; color: var(--ui-muted); line-height: 1.45; }
.system-backup-facts { margin-bottom: 14px; }
.system-backup-facts .ui-card strong, .system-backup-facts .ui-card span { display: block; }
.system-backup-facts .ui-card span { margin-top: 5px; color: var(--ui-muted); font-size: 12px; line-height: 1.45; }
.system-backup-list { display: grid; gap: 8px; }
.system-backup-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ui-line); }
.system-backup-entry:first-child { border-top: 0; }
.system-backup-entry strong, .system-backup-entry span, .system-backup-entry small { display: block; overflow-wrap: anywhere; }
.system-backup-entry span, .system-backup-entry small { margin-top: 3px; color: var(--ui-muted); }
.system-backup-entry small { font-size: 10px; }

@media (max-width: 720px) {
  .ui-shell { padding: 18px 14px 34px; }
  .ui-page-head { align-items: stretch; flex-direction: column; }
  .ui-page-head h1 { font-size: 26px; }
  .ui-page-head .ui-actions { justify-content: stretch; }
  .ui-page-head .ui-actions > * { flex: 1 1 auto; }
  .ui-grid, .ui-grid.three, .ui-form-grid { grid-template-columns: 1fr; }
  .system-summary { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
  .system-summary-mark { width: 46px; height: 46px; }
  .system-counts { grid-column: 1 / -1; }
  .system-counts span { flex: 1; }
  .system-check-grid { grid-template-columns: 1fr; }
  .system-action-row, .system-backup-entry { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .system-action-row .ui-button, .system-backup-entry .ui-button { width: 100%; }
  .ui-page .card-grid.two, .ui-page .form-grid, .ui-page .office-form { grid-template-columns: 1fr; }
  .ui-page .office-form h2, .ui-page .office-form .wide, .ui-page .form-grid .wide { grid-column: auto; }
  .ui-page .backend-title { align-items: stretch; flex-direction: column; }
  .ui-page .backend-main { padding-top: 22px; }
}