: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);
  --ui-font: Arial, Helvetica, sans-serif;
  --ui-control-height: 44px;
  --ui-control-radius: 7px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-text: var(--ui-ink);
  --ui-text-muted: var(--ui-muted);
  --ui-border: var(--ui-line);
  --ui-border-strong: #b9c7c2;
  --ui-line-strong: var(--ui-border-strong);
  --ui-surface-subtle: var(--ui-surface-muted);
  --ui-neutral: #46535e;
  --ui-warning-text: #7b520c;
  --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; font-family: var(--ui-font); }
/* Resolve aliases where the module sets its accent, not only on :root. */
body.ui-page { --ui-accent: var(--module-accent, var(--accent, #46535e)); --ui-accent-strong: var(--module-accent-strong, var(--accent-dark, #303b44)); }
body.area-tasks { --module-accent: #e0aa00; --module-accent-strong: #795a00; --ui-accent-ink: #2d2300; }
body.area-lists { --module-accent: #168064; --module-accent-strong: #0d6650; }
body.area-documents { --module-accent: #6a4fa3; --module-accent-strong: #50387f; }
body.area-calculation { --module-accent: #087e8b; --module-accent-strong: #065b64; }
body.area-calculators { --module-accent: #0b5fae; --module-accent-strong: #08477f; }
body.kiosk-page { --module-accent: #e85a35; --module-accent-strong: #b83e20; }
body { margin: 0; font-family: inherit; }
.ui-page *, .ui-page *::before, .ui-page *::after { box-sizing: border-box; }
.ui-page button:not(.ui-button), .ui-page input:not(.ui-control), .ui-page select:not(.ui-control), .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-quick-list { display: grid; gap: 10px; }
.ui-quick-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--ui-line); border-left: 4px solid var(--ui-muted); border-radius: var(--ui-radius); color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 8px 22px rgba(20, 43, 38, .05); }
.ui-quick-main { min-width: 0; color: inherit; text-decoration: none; }
.ui-quick-actions { display: flex; align-items: flex-start; gap: 8px; }
.ui-quick-action.ui-button, .ui-quick-action { width: 44px; min-height: 44px; padding: 10px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 50%; box-sizing: border-box; }
.ui-quick-action .ui-icon { width: 20px; height: 20px; }
.ui-quick-action-complete { border: 0; color: #fff; background: var(--ui-accent); font-size: 23px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 13px color-mix(in srgb, var(--ui-accent) 24%, transparent); }
.ui-quick-action-complete:hover, .ui-quick-action-complete:focus-visible { background: var(--ui-accent-strong); outline: 3px solid color-mix(in srgb, var(--ui-accent) 18%, transparent); }
.ui-quick-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border-radius: 50%; color: #fff; background: var(--ui-accent); font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.ui-quick-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; color: var(--ui-muted); font-size: 11px; }
.ui-quick-badge { min-height: 24px; padding: 3px 8px; display: inline-flex; align-items: center; border-radius: 999px; color: #42534f; background: #edf3f1; font-size: 11px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .035em; }

.ui-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 18px 0; overflow-x: auto; border-bottom: 1px solid var(--ui-line); scrollbar-width: thin; }
.ui-tab { min-width: 0; min-height: 52px; padding: 10px 8px; display: grid; place-content: center; gap: 3px; border-bottom: 3px solid transparent; color: var(--ui-muted); text-align: center; text-decoration: none; }
.ui-tab:hover { color: var(--ui-accent-strong); background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }
.ui-tab:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--ui-accent) 26%, transparent); outline-offset: -3px; }
.ui-tab.active { border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 800; }
button:not(.ui-button).ui-tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; font: inherit; cursor: pointer; }
button:not(.ui-button).ui-tab.active { border-bottom-color: var(--ui-accent); }
.ui-tab-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 1.2; }
.ui-tab small { color: inherit; font-size: 10px; font-weight: 700; line-height: 1.25; opacity: .82; }
.ui-tab-count { min-width: 22px; height: 22px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; color: #fff; background: var(--ui-accent); font-size: 11px; font-weight: 900; line-height: 1; }
.ui-tab-count.attention { background: var(--ui-warning); }
.ui-module-nav { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.ui-module-nav .ui-tabs { margin-top: 0; }

.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:not(.ui-control), .ui-field select:not(.ui-control), .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 input, .ui-field select{ width: 100%}
.ui-field textarea { min-height: 110px; resize: vertical; }
.ui-page .ui-control { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--ui-control-height); margin: 0; padding: 10px 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-control-radius); color: var(--ui-ink); background: var(--ui-surface); font: 16px/1.35 var(--ui-font); }
.ui-password-field > label { display: block; margin: 0; }
.ui-password-control { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-control-radius); background: var(--ui-surface); }
.ui-page .ui-password-control > input { flex: 1 1 0%; width: 0; min-width: 0; min-height: var(--ui-control-height); margin: 0; border: 0; background: transparent; box-shadow: none; }
.ui-password-control:focus-within { border-color: var(--ui-accent); outline: 2px solid color-mix(in srgb, var(--ui-accent) 22%, transparent); outline-offset: 1px; }
.ui-page .ui-password-control > input:focus { outline: none; }
.ui-page .ui-password-toggle { flex: 0 0 auto; min-height: var(--ui-control-height); padding: 8px 10px; border: 0; border-left: 1px solid var(--ui-line); border-radius: 0 var(--ui-control-radius) var(--ui-control-radius) 0; color: var(--ui-ink); background: var(--ui-surface-muted); font: 700 12px/1.2 var(--ui-font); cursor: pointer; }
.ui-page .ui-password-toggle:hover { background: color-mix(in srgb, var(--ui-accent) 12%, white); }
.ui-page .ui-password-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
.ui-hint { color: var(--ui-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.ui-check { display: flex; align-items: start; gap: 8px; font-size: 14px; line-height: 1.45; }
.ui-check > input { flex: 0 0 20px; width: 20px; min-height: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--ui-accent); }
.ui-filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.ui-filterbar .ui-field { flex: 1 1 180px; }
.ui-field input:not(.ui-control):focus, .ui-field select:not(.ui-control):focus, .ui-field textarea:not(.ui-control):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: var(--ui-control-height); padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); color: var(--ui-ink); background: var(--ui-surface); 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: var(--ui-accent-ink, #fff); background: var(--ui-accent); }
.ui-button.primary:hover, .ui-page .primary-action:hover { border-color: var(--ui-accent-strong); color: #fff; 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.danger:hover, .ui-page .danger-action:hover { background: color-mix(in srgb, var(--ui-danger) 84%, black); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.ui-button.icon-only { width: var(--ui-control-height); min-height: var(--ui-control-height); padding: 9px; flex: 0 0 auto; }
.ui-actions > .danger { margin-right: auto; }
.ui-loading, [aria-busy="true"].is-pending { cursor: progress; }
form.is-pending { pointer-events: none; opacity: .72; }
form.is-pending [aria-disabled="true"] { cursor: progress; }
.ui-loading { padding: 16px; color: var(--ui-muted); }
.ui-table-scroll { max-width: 100%; overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th, .ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--ui-line); text-align: left; vertical-align: top; }
.ui-table th { color: var(--ui-muted); background: var(--ui-surface-muted); font-size: 12px; font-weight: 800; }
.ui-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .ui-control { min-width: 5em; }
.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-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.ui-dialog.wide { width: min(900px, calc(100% - 28px)); }
.ui-dialog.medium { width: min(640px, calc(100% - 28px)); }
.ui-dialog.compact { width: min(430px, calc(100% - 28px)); }
.ui-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--ui-line); }
.ui-dialog-head h2 { margin: 0; }
.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:not(.ui-control) { width: 100%; min-height: var(--ui-control-height); padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); color: var(--ui-ink); background: #fff; }
.ui-page .stack-form input:not(.ui-control):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%; }
.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:not(.ui-control), .ui-page .office-form select:not(.ui-control), .ui-page .office-form textarea:not(.ui-control) { width: 100%; min-height: var(--ui-control-height); margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); color: var(--ui-ink); background: #fff; }
.ui-page .office-form input, .ui-page .office-form select{ width: 100%; margin-top: 6px}
.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:not(.ui-control), .ui-page .form-grid select:not(.ui-control), .ui-page .form-grid textarea:not(.ui-control) { width: 100%; min-height: var(--ui-control-height); margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); background: #fff; }
.ui-page .form-grid input, .ui-page .form-grid select{ width: 100%; margin-top: 6px}
.ui-page .form-hint { margin: 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.ui-page .bottom-sheet { max-height: 88vh; margin: auto; padding: 24px 20px; }
.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; }
  .ui-tabs { margin: 14px 0; }
  .ui-tab { min-height: 48px; padding: 9px 5px; }
}