/* MEDI / CONTROL — locally hosted operations console. */
@layer reset, base, layout, components, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, select { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  svg { flex-shrink: 0; vertical-align: middle; }
  button { color: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    --canvas: #f5f7f8;
    --surface: #fff;
    --surface-subtle: #f8fafb;
    --ink: #172732;
    --muted: #73808c;
    --border: #e5eaee;
    --sidebar: #101e29;
    --sidebar-muted: #8c9ba8;
    --accent: #067c65;
    --accent-hover: #046651;
    --accent-soft: #e9f7f1;
    --mint: #69e3b4;
    --warning: #a16312;
    --warning-soft: #fff7e8;
    --danger: #b44343;
    --danger-soft: #fff0f0;
    --blue: #426bb0;
    --blue-soft: #edf3ff;
    --radius: 12px;
    --shadow: 0 3px 12px #142c3e04, 0 1px 2px #142c3e03;
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body { background: var(--canvas); color: var(--ink); min-width: 320px; }
  ::selection { background: #b6eed7; color: #12382e; }
  :focus-visible { outline: 3px solid #21a784; outline-offset: 3px; }
  button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
  input, select, textarea { color: var(--ink); }
  input::placeholder, textarea::placeholder { color: #98a3ae; }
  code, pre, kbd, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  code { font-size: .88em; }
  kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 10px; line-height: 19px; color: var(--muted); background: white; box-shadow: 0 1px 1px #17273209; }
  small { font-size: 12px; }
  hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
}

@layer layout {
  .app-shell { min-height: 100dvh; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; display: flex; flex-direction: column; z-index: 40; background: var(--sidebar); color: #e8eff3; padding: 30px 18px 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #344550 transparent; }
  .brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 33px; }
  .brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: var(--mint); border: 1px solid #69e3b43b; background: #69e3b40a; font-family: var(--mono); font-size: 21px; font-weight: 600; }
  .brand-mark svg { width: 22px; height: 22px; }
  .brand-copy { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.4; }
  .brand-copy small { font-size: 9px; letter-spacing: 1.7px; font-family: var(--mono); color: var(--sidebar-muted); font-weight: 400; margin-top: 4px; }
  .nav-section { display: grid; gap: 5px; margin-bottom: 28px; }
  .nav-section > .section-label { padding: 0 13px; margin-bottom: 7px; color: #71828f; font-size: 9px; letter-spacing: 1.7px; }
  .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 500; color: #aebbc5; transition: background .15s, color .15s, border-color .15s; }
  .nav-item:hover { background: #ffffff07; color: white; }
  .nav-item.active { color: var(--mint); background: #69e3b40e; border-color: #69e3b41a; }
  .nav-item.active::before { content: ""; position: absolute; left: -19px; height: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mint); }
  .nav-icon { display: inline-flex; justify-content: center; width: 19px; height: 19px; color: #879ba9; }
  .nav-icon svg { width: 18px; height: 18px; stroke-width: 1.65; }
  .active .nav-icon { color: var(--mint); }
  .nav-item .badge, .nav-item .nav-count { margin-left: auto; font-family: var(--mono); color: inherit; background: #ffffff0b; padding: 0 6px; font-size: 10px; border-radius: 4px; }
  .sidebar-footer { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid #ffffff10; color: var(--sidebar-muted); font-size: 11px; }
  .sidebar-footer .environment { display: flex; align-items: center; gap: 8px; color: #bac6ce; font-family: var(--mono); font-size: 10px; letter-spacing: .3px; margin-bottom: 12px; }
  .sidebar-footer .status-dot { box-shadow: 0 0 0 3px #69e3b40a; }
  .sidebar-footer .user-avatar { background: #273744; color: #c9d5de; }
  .main { margin-left: 244px; min-width: 0; }
  .topbar { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 38px; background: #ffffffde; border-bottom: 1px solid var(--border); }
  .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-size: 11px; color: var(--muted); }
  .breadcrumbs a:hover { color: var(--accent); }
  .breadcrumbs .separator { color: #bbc4cc; }
  .breadcrumbs strong, .breadcrumbs [aria-current] { color: #364653; font-weight: 500; }
  .topbar-actions { display: flex; align-items: center; gap: 16px; }
  .topbar-actions .button { font-size: 11px; min-height: 32px; }
  .workspace { max-width: 1600px; margin: 0 auto; padding: 35px 38px 52px; }
  .page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 29px; }
  .eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 500; color: var(--accent); margin-bottom: 8px; }
  .eyebrow::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 1px; }
  .page-title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -1.1px; line-height: 1.4; }
  .page-description { color: var(--muted); font-size: 12px; margin-top: 8px; line-height: 1.8; }
  .heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 2px; flex-shrink: 0; }
  .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 25px; }
  .content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
  .content-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
  .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .detail-grid { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 2fr); gap: 16px 24px; align-items: baseline; }
  .mobile-menu-toggle { display: none; }
}

@layer components {
  .button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; padding: 9px 14px; min-height: 38px; color: #40515f; background: white; font-size: 12px; font-weight: 550; line-height: 1.4; white-space: nowrap; box-shadow: 0 1px 2px #17273203; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
  .button:hover:not(:disabled) { background: #f6f9fa; border-color: #c7d2d9; box-shadow: 0 2px 5px #17273208; }
  .button:active:not(:disabled) { transform: translateY(1px); }
  .button svg { width: 15px; height: 15px; stroke-width: 1.8; }
  .button.primary { color: white; background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 3px #067c6517; }
  .button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
  .button.secondary { background: white; }
  .button.danger { color: var(--danger); border-color: #edd1d1; background: white; }
  .button.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: #d8a4a4; }
  .button.small { min-height: 30px; padding: 6px 10px; font-size: 11px; }
  .button.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--muted); }
  .button.icon-only { width: 35px; min-width: 35px; padding: 8px; }
  .button.link { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: auto; color: var(--accent); }
  .button.link:hover { background: transparent; text-decoration: underline; }
  .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #93a0ac; vertical-align: middle; flex-shrink: 0; }
  .status-dot.healthy { background: #21aa7d; }
  .status-dot.warning { background: #d69b38; }
  .status-dot.danger { background: #d25d5d; }
  .badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; border: 1px solid transparent; padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 550; line-height: 1.4; white-space: nowrap; }
  .badge.success { color: #167456; background: #eaf7ef; border-color: #dcefe2; }
  .badge.warning { color: var(--warning); background: var(--warning-soft); border-color: #f1e7d0; }
  .badge.muted { color: #7a8691; background: #f2f5f7; border-color: #e8edf0; }
  .badge.danger { color: var(--danger); background: var(--danger-soft); border-color: #f4dddd; }
  .badge.info { color: var(--blue); background: var(--blue-soft); border-color: #e0e8f8; }
  .stat-card { position: relative; background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 21px 22px 18px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
  .stat-card::after { content: ""; position: absolute; right: -13px; top: -13px; height: 70px; width: 70px; background-image: radial-gradient(#d6e2e8 1px, transparent 1px); background-size: 7px 7px; opacity: .35; mask-image: linear-gradient(135deg, #000, transparent); pointer-events: none; }
  .stat-label { color: #71808d; font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
  .stat-value { font-size: 30px; letter-spacing: -1.2px; font-weight: 600; line-height: 1.3; margin-top: 12px; font-variant-numeric: tabular-nums; }
  .stat-value .unit { font-size: 13px; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: 4px; }
  .stat-value.compact { font-size: 22px; letter-spacing: -.5px; padding-top: 6px; padding-bottom: 4px; }
  .stat-meta { font-size: 10px; color: #8b97a1; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
  .stat-meta .positive { color: var(--accent); }
  .stat-icon { margin-left: auto; display: grid; place-items: center; color: #7b9893; }
  .stat-icon svg { height: 15px; width: 15px; }
  .panel { min-width: 0; background: white; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 22px; }
  .panel-header { min-height: 73px; padding: 20px 23px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
  .panel-title { font-size: 13px; font-weight: 650; letter-spacing: -.1px; display: flex; align-items: center; gap: 8px; }
  .panel-subtitle { color: var(--muted); font-size: 11px; margin-top: 4px; }
  .panel-body { padding: 24px; }
  .panel-body > :last-child { margin-bottom: 0; }
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 16px 23px; border-bottom: 1px solid var(--border); }
  .toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; width: 100%; }
  .toolbar .search-input { flex: 1 1 240px; max-width: 440px; }
  .search-input { min-height: 37px; width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-size: 11px; background: #fcfdfe; transition: border-color .15s, box-shadow .15s; }
  .search-input:focus, .field input:focus, .field select:focus, .field textarea:focus, .filter-select:focus { border-color: #4aaf92; box-shadow: 0 0 0 3px #20a78312; outline: none; }
  .filter-select { border: 1px solid var(--border); border-radius: 6px; background: white; padding: 8px 30px 8px 11px; min-height: 37px; font-size: 11px; max-width: 100%; }
  .data-table-wrap { width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #d7e0e6 transparent; }
  .data-table { width: 100%; text-align: left; font-size: 11px; }
  .data-table th { padding: 11px 22px; font-size: 10px; font-weight: 500; color: #85919c; background: #fafbfc; border-bottom: 1px solid var(--border); letter-spacing: .1px; white-space: nowrap; }
  .data-table td { padding: 17px 22px; border-bottom: 1px solid #edf1f3; vertical-align: middle; color: #536270; }
  .data-table tbody tr:last-child td { border-bottom: 0; }
  .data-table tbody tr { transition: background .12s; }
  .data-table tbody tr:hover { background: #f9fcfb; }
  .data-table .mono { color: #5a7181; font-size: 10px; }
  .data-table .number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .data-table .cell-title { color: #263d4d; font-size: 11px; font-weight: 550; line-height: 1.6; }
  .data-table a.cell-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .cell-subtitle { color: #8b98a3; font-size: 10px; margin-top: 3px; line-height: 1.6; }
  .row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .row-actions form { margin: 0; }
  .table-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; color: #83919c; }
  .pagination { display: flex; align-items: center; gap: 5px; }
  .pagination a, .pagination button, .pagination > span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 5px; padding: 0 7px; background: white; color: #6c7a87; font-size: 10px; }
  .pagination .active, .pagination [aria-current="page"] { color: var(--accent); background: var(--accent-soft); border-color: #c8e6da; }
  .pagination a:hover { border-color: #adcdc0; color: var(--accent); }
  .pagination .disabled, .pagination [aria-disabled="true"] { opacity: .45; pointer-events: none; }
  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 55px 26px; color: var(--muted); font-size: 12px; gap: 8px; min-height: 240px; }
  .empty-state h2, .empty-state h3, .empty-state strong { color: #425968; font-size: 14px; font-weight: 600; }
  .empty-state p { max-width: 360px; font-size: 11px; line-height: 1.9; }
  .empty-state .button { margin-top: 10px; }
  .empty-icon { display: grid; place-items: center; height: 48px; width: 48px; background: #f1f7f5; color: #83a99d; border: 1px solid #e5eeeb; border-radius: 13px; margin-bottom: 7px; }
  .empty-icon svg { width: 23px; height: 23px; }
  .notice { display: block; border: 1px solid var(--border); border-left-width: 3px; border-radius: 7px; padding: 14px 17px; font-size: 11px; line-height: 1.9; margin-bottom: 22px; background: #f7f9fb; color: #587080; overflow-wrap: anywhere; }
  .notice.success { border-color: #d1e9dd; border-left-color: #369c74; background: #f1faf5; color: #316b54; }
  .notice.warning { border-color: #efdfbd; border-left-color: #cf9b3f; background: #fffbf1; color: #8c6d35; }
  .notice.danger { border-color: #efd2d2; border-left-color: #cd6868; background: #fff6f6; color: #a04a4a; }
  .notice.info { border-color: #d7e3f2; border-left-color: #648eb9; background: #f5f9ff; color: #4d6e92; }
  .notice strong { font-weight: 650; }
  .notice svg { width: 16px; height: 16px; margin-top: 2px; }
  .notice > div { min-width: 0; }
  .notice code { overflow-wrap: anywhere; }
  .field { min-width: 0; }
  .field label, .field > .label { display: block; color: #465b6a; font-size: 11px; font-weight: 550; margin-bottom: 8px; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { display: block; width: 100%; border: 1px solid #dfe6eb; border-radius: 6px; padding: 10px 12px; background: #fff; font-size: 12px; min-height: 40px; transition: border-color .15s, box-shadow .15s; }
  .field input[readonly] { background: #f7f9fa; color: #758592; }
  .field textarea { min-height: 110px; resize: vertical; line-height: 1.8; }
  .field-help { display: block; font-size: 10px; color: #8a98a3; margin-top: 7px; line-height: 1.8; }
  .checkbox-field { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: #4d6270; }
  .checkbox-field input { accent-color: var(--accent); height: 15px; width: 15px; margin: 3px 0 0; flex-shrink: 0; }
  .checkbox-field label { margin: 0; font-weight: 400; cursor: pointer; }
  .field-validation-error, .validation-summary-errors { font-size: 11px; color: var(--danger); }
  .field-validation-error { display: block; margin-top: 6px; }
  .validation-summary-errors { background: var(--danger-soft); border: 1px solid #efd2d2; border-radius: 7px; padding: 12px 16px; margin-bottom: 20px; }
  .validation-summary-errors ul { margin: 0; padding-left: 17px; }
  .input-validation-error { border-color: #d48080 !important; }
  .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding-top: 22px; margin-top: 25px; }
  .catalog-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: white; min-width: 0; box-shadow: var(--shadow); }
  a.catalog-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
  a.catalog-card:hover { border-color: #add5c4; box-shadow: 0 5px 20px #13372b08; transform: translateY(-2px); }
  .catalog-card .badge { position: absolute; right: 20px; top: 22px; }
  .catalog-icon { height: 41px; width: 41px; display: grid; place-items: center; border-radius: 10px; background: #edf7f2; color: #438e74; border: 1px solid #deeee5; margin-bottom: 20px; }
  .catalog-icon svg { height: 21px; width: 21px; }
  .catalog-title { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
  .catalog-meta { color: #84939f; font-size: 11px; margin-top: 6px; line-height: 1.8; }
  .catalog-card .catalog-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 10px; color: #80909c; }
  .timeline { padding: 4px 0; }
  .timeline-item { position: relative; padding: 0 0 24px 24px; border-left: 1px solid #e3eae7; margin-left: 4px; }
  .timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
  .timeline-item::before { content: ""; position: absolute; left: -4px; top: 4px; height: 7px; width: 7px; border-radius: 50%; background: #c4d0d7; box-shadow: 0 0 0 4px white; }
  .timeline-item:first-child::before { background: #279b76; }
  .timeline-item.danger::before { background: #ce7777; }
  .timeline-time { color: #99a4ad; font-family: var(--mono); font-size: 9px; line-height: 1.8; margin-bottom: 4px; }
  .timeline-title { font-size: 11px; color: #3d5362; font-weight: 550; }
  .timeline-detail { font-size: 10px; color: #8b98a3; margin-top: 4px; overflow-wrap: anywhere; line-height: 1.8; }
  .detail-label { font-size: 11px; color: #85939e; }
  .detail-value { font-size: 12px; color: #3b5363; min-width: 0; overflow-wrap: anywhere; }
  .code-block { background: #13242f; color: #b8d3ca; border: 1px solid #1d3542; border-radius: 7px; padding: 18px 20px; font-family: var(--mono); font-size: 11px; line-height: 1.9; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 14px 0; }
  .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; }
  .tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 2px 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 12px; color: #8a97a2; white-space: nowrap; }
  .tab:hover { color: var(--ink); }
  .tab.active, .tab[aria-current="page"], .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  .section-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #8b9ba7; font-weight: 500; margin-bottom: 16px; }
  .section-heading { margin: 30px 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .section-heading h2 { font-size: 14px; font-weight: 650; }
  .user-info { display: flex; align-items: center; gap: 10px; }
  .user-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #eaf0f3; color: #617886; font-size: 10px; font-weight: 650; }
  .user-name { font-size: 11px; font-weight: 550; line-height: 1.4; }
  .user-role { font-size: 9px; color: #94a0aa; font-family: var(--mono); margin-top: 2px; }
  .system-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e1e9e6; border-radius: 8px; background: #f0f6f3; padding: 12px 16px; margin-top: 24px; color: #6d8378; font-size: 10px; }
  .system-strip > span { display: inline-flex; align-items: center; gap: 7px; }
  .progress-track { height: 5px; width: 100%; background: #eef3f1; border-radius: 5px; overflow: hidden; }
  .progress-track > span { display: block; height: 100%; background: #42b48d; border-radius: inherit; }
  .login-shell { min-height: 100dvh; display: grid; place-items: center; padding: 35px; background-color: #eef3f4; background-image: linear-gradient(#92a8b00b 1px, transparent 1px), linear-gradient(90deg, #92a8b00b 1px, transparent 1px); background-size: 32px 32px; }
  .login-card { display: grid; grid-template-columns: 1fr 1fr; width: min(920px, 100%); min-height: 520px; border: 1px solid #dce5e9; border-radius: 18px; background: white; box-shadow: 0 25px 70px #1f3b4910; overflow: hidden; }
  .login-art { position: relative; padding: 42px; background: #11242e; color: #e3eeea; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
  .login-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 65%, #26a27817, transparent 65%), linear-gradient(#77cab909 1px, transparent 1px), linear-gradient(90deg, #77cab909 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
  .login-art > * { position: relative; }
  .login-art .brand { padding: 0; }
  .login-art h1, .login-art h2 { font-size: 30px; letter-spacing: -1px; line-height: 1.6; font-weight: 550; }
  .login-art p { color: #8ca89e; font-size: 12px; margin-top: 17px; line-height: 1.9; }
  .login-art .section-label { color: #6ba68f; font-size: 9px; }
  .login-form { padding: 50px 45px; display: flex; flex-direction: column; justify-content: center; }
  .login-form h1, .login-form h2 { font-size: 24px; font-weight: 650; letter-spacing: -.8px; margin-bottom: 8px; }
  .login-form > p { font-size: 12px; color: var(--muted); margin-bottom: 29px; }
  .login-form .field { margin-bottom: 19px; }
  .login-form .button.primary { width: 100%; min-height: 42px; margin-top: 7px; }
  .login-form .field-help { margin-top: 20px; text-align: center; }
  .command-palette { width: min(540px, calc(100% - 32px)); padding: 0; border: 1px solid #d7e2e5; border-radius: 13px; background: white; box-shadow: 0 25px 80px #12242d35; color: var(--ink); margin: 14vh auto auto; max-height: 72dvh; overflow: auto; }
  .command-palette::backdrop { background: #101e2970; backdrop-filter: blur(4px); }
  .command-header { display: flex; align-items: center; padding: 17px 19px; gap: 11px; border-bottom: 1px solid var(--border); }
  .command-header svg { width: 18px; height: 18px; color: #80949e; }
  #command-query { border: none; outline: none; padding: 3px 0; flex: 1; min-width: 0; font-size: 13px; box-shadow: none; }
  .command-list { display: grid; padding: 8px; gap: 3px; }
  [data-command-item] { display: flex; align-items: center; gap: 11px; font-size: 12px; padding: 12px; border-radius: 6px; color: #526875; }
  [data-command-item]:hover, [data-command-item]:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
  [data-command-item] svg { width: 17px; height: 17px; }
  .command-footer { padding: 11px 19px; border-top: 1px solid var(--border); color: #96a2ac; font-size: 10px; display: flex; gap: 13px; }
  .command-empty { padding: 25px 18px; text-align: center; color: var(--muted); font-size: 12px; }
  .toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100% - 32px)); }
  .toast { display: flex; align-items: center; gap: 10px; border: 1px solid #d7e5df; border-radius: 9px; padding: 13px 17px; background: #fff; box-shadow: 0 8px 32px #153b2e18; color: #325e4c; font-size: 12px; animation: toast-in .2s ease-out; }
  .toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #229f76; flex-shrink: 0; }
  .toast[data-kind="error"] { color: var(--danger); border-color: #efd0d0; }
  .toast[data-kind="error"]::before { background: #c76666; }
  @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* The server-rendered console composes these helpers without a UI framework. */
@layer components {
  .brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 1px; letter-spacing: -3px; font-size: 26px; line-height: 1; padding-bottom: 3px; }
  .brand-mark > span { align-self: flex-start; margin-top: 9px; font-size: 14px; line-height: 1; letter-spacing: 0; }
  .brand-copy { min-width: 0; }
  .brand-copy strong { font-size: inherit; font-weight: 700; white-space: nowrap; }
  .brand-copy small { font-size: 8px; letter-spacing: 1.1px; white-space: nowrap; }
  .sidebar > .nav-section { display: block; padding: 0 13px; font-size: 9px; color: #71828f; letter-spacing: 1.7px; font-family: var(--mono); margin: 0 0 12px; }
  .sidebar > nav { display: grid; gap: 5px; }
  .nav-icon { font-size: 19px; font-family: var(--mono); line-height: 1; align-items: center; }
  .sidebar-status { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 1.1px; color: #9ab5aa; font-family: var(--mono); margin-bottom: 10px; }
  .sidebar-footer > p { color: #768b99; font-size: 10px; margin-bottom: 5px; }
  .sidebar-footer > small { color: #607887; font-size: 9px; }
  .title-dot { color: #1aa97d; margin-left: 2px; }
  .heading-actions > .mono { font-size: 10px; }
  .muted { color: var(--muted); }
  .command-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 21px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px 6px 11px; min-height: 31px; color: #84929d; font-size: 10px; background: #fcfdfe; }
  .command-trigger:hover { background: #f7faf9; border-color: #c3d6ce; }
  .command-trigger kbd { font-size: 9px; line-height: 17px; }
  .environment-badge { display: inline-flex; align-items: center; gap: 6px; color: #6e8c7f; font-size: 8px; letter-spacing: .6px; font-family: var(--mono); white-space: nowrap; }
  .environment-badge::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background: #25a87c; }
  .mobile-menu-toggle { border: 0; border-radius: 6px; padding: 3px 5px; min-width: 30px; min-height: 32px; align-items: center; justify-content: center; background: transparent; font-size: 18px; color: #617a89; }
  .topbar-actions > form { margin: 0; }
  .workspace-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 1px solid #e3e9ec; padding: 23px 0 0; margin-top: 37px; color: #98a4ad; font-size: 9px; letter-spacing: .1px; }
  .workspace-footer > span:first-child { font-size: 9px; font-weight: 550; letter-spacing: .7px; color: #7a8f9c; }
  .workspace-footer .mono { font-size: 9px; font-weight: 400; letter-spacing: 0; margin-left: 10px; color: #9aa8b1; }
  .stat-value > small { font-size: 11px; letter-spacing: 0; font-weight: 400; color: #9aa6ae; margin-left: 6px; }
  .stat-value.compact { font-family: var(--mono); font-size: clamp(16px, 1.35vw, 21px); letter-spacing: -.7px; padding-top: 11px; padding-bottom: 7px; white-space: nowrap; }
  .text-link { color: #688478; font-size: 10px; font-weight: 500; white-space: nowrap; transition: color .15s; }
  .text-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
  .timeline-time { display: block; }
  .timeline-title .badge { margin-left: 6px; font-size: 9px; vertical-align: middle; }
  .empty-icon { font-size: 25px; font-family: var(--mono); }
  .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .feature-grid > div + div { border-left: 1px solid var(--border); padding-left: 26px; }
  .feature-grid .section-label { display: block; color: #6f9b87; font-size: 8px; letter-spacing: 1.3px; margin-bottom: 13px; }
  .feature-grid h3 { font-size: 12px; font-weight: 600; color: #405b6a; margin-bottom: 7px; }
  .feature-grid p { font-size: 10px; line-height: 1.9; max-width: 280px; }
  .workspace > .toolbar { border: 0; padding: 0 0 19px; justify-content: space-between; }
  .workspace > .toolbar p { font-size: 9px; letter-spacing: .6px; }
  .workspace > .toolbar strong { color: #365d4d; font-size: 11px; margin: 0 7px; }
  .catalog-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .catalog-card-top .badge { position: static; margin-top: 5px; font-size: 9px; }
  .catalog-icon { font-size: 24px; font-family: var(--mono); line-height: 1; }
  .catalog-card > .section-label { font-size: 8px; margin-bottom: 6px; color: #899f95; letter-spacing: 1.4px; }
  .catalog-key { color: #99a6af; font-size: 9px; margin-top: 5px; overflow-wrap: anywhere; }
  .catalog-meta { margin-top: 24px; display: grid; gap: 11px; }
  .catalog-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 10px; }
  .catalog-meta strong { font-size: 10px; font-weight: 500; color: #4a6371; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .catalog-meta strong.mono { font-size: 10px; }
  .catalog-actions { display: flex; align-items: center; gap: 7px; margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--border); }
  .catalog-actions > a { flex: 1; min-width: 0; font-size: 10px; }
  .catalog-actions > form { margin: 0; }
  .catalog-actions .button.small { min-width: 35px; min-height: 35px; font-size: 16px; padding: 6px 9px; }
  .search-input:has(> input) { display: flex; align-items: center; gap: 9px; padding: 7px 10px; min-height: 38px; }
  .search-input:has(> input):focus-within { border-color: #4aaf92; box-shadow: 0 0 0 3px #20a78312; }
  .search-input > span { color: #8ca59a; font-size: 19px; line-height: 1; }
  .search-input > input { width: 100%; min-width: 0; border: 0; padding: 2px 0; outline: none; background: transparent; box-shadow: none; font-size: 11px; }
  .search-input > kbd { margin-left: auto; }
  .data-table .cell-title { max-width: 560px; overflow-wrap: anywhere; }
  .detail-panel { border-color: #cadfd4; box-shadow: 0 2px 12px #13734e06; }
  .detail-panel .panel-header { background: #fbfdfc; }
  .detail-panel .section-label { display: block; font-size: 8px; margin-bottom: 7px; color: #7fa38f; }
  .detail-grid:has(> div) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; align-items: stretch; }
  .detail-grid > div { border-bottom: 1px solid #eef2f4; padding: 13px 0; min-width: 0; }
  .detail-grid > div > dt { font-size: 10px; margin-bottom: 6px; }
  .detail-grid > div > dd { margin: 0; font-size: 11px; }
  .detail-grid + details { margin-top: 23px; }
  details > summary { cursor: pointer; }
  details.panel > summary { font-size: 12px; list-style-position: inside; }
  details.panel > summary:hover { background: #fafdfb; }
  details.panel:not([open]) > summary { border-bottom: 0; }
  .schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .schedule-card { border: 1px solid #e3e9ed; border-radius: 9px; background: #fff; padding: 21px; min-width: 0; }
  .schedule-heading, .schedule-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 23px; }
  .schedule-heading h3, .schedule-header h3 { font-size: 13px; font-weight: 600; letter-spacing: -.2px; }
  .schedule-heading .badge { font-size: 9px; }
  .schedule-card .form-grid { gap: 17px 15px; margin-bottom: 19px; }
  .schedule-card .field label { font-size: 10px; }
  .schedule-card .field input, .schedule-card .field select { font-size: 11px; min-height: 37px; padding: 8px 9px; }
  .schedule-card .checkbox-field { font-size: 10px; margin-bottom: 11px; line-height: 1.8; }
  .schedule-card .checkbox-field input { margin-top: 1px; }
  .schedule-card > form > .field-help { margin-top: 17px; color: #91a09a; font-size: 9px; }
  .schedule-card > form > .button { margin-top: 12px; }
  .time-inputs { display: flex; align-items: center; gap: 6px; }
  .time-inputs input { min-width: 0; text-align: center; font-family: var(--mono); }
  .time-inputs > span { color: #9ba7b0; font-family: var(--mono); }
  .schedule-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eaf0ed; }
  .schedule-actions form { margin: 0; }
  .schedule-actions .button { font-size: 10px; }
  .client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; align-items: start; }
  .client-card { border: 1px solid #e0e8ec; border-radius: 10px; padding: 23px; background: #fff; min-width: 0; }
  .client-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
  .client-card-top > div { min-width: 0; }
  .client-card-top h3 { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
  .client-card-top .badge { margin-left: auto; font-size: 9px; }
  .product-mark { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #dbe9e3; border-radius: 10px; background: #f0f7f3; color: #3b8268; font-family: var(--mono); font-size: 18px; font-weight: 600; }
  .client-card:nth-child(even) .product-mark { background: #eff3fa; color: #607ca7; border-color: #dde5f1; }
  .client-card .field { margin-bottom: 18px; }
  .client-card .field label { font-size: 10px; }
  .client-card .field label .muted { font-weight: 400; margin-left: 5px; font-size: 9px; }
  .client-card .field input { font-size: 11px; }
  .client-card .checkbox-field { font-size: 10px; line-height: 1.9; }
  .input-with-action { display: flex; align-items: stretch; gap: 7px; min-width: 0; }
  .input-with-action > input { min-width: 0; flex: 1; }
  .input-with-action > .button { flex-shrink: 0; padding-inline: 12px; }
  .client-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 23px; padding-top: 17px; border-top: 1px solid #eaf0ed; }
  .client-card-footer > .mono { font-size: 8px; }
  .client-card-footer .button { font-size: 10px; }
  [data-command-item] > span:first-child { font-family: var(--mono); color: #829b90; font-size: 18px; width: 22px; text-align: center; }
  [data-command-item] > strong { font-weight: 500; }
  [data-command-item] > span:last-child { margin-left: auto; font-size: 12px; color: #a5b2b9; }
  [data-command-empty] { text-align: center; padding: 24px; color: var(--muted); font-size: 12px; }
  .login-shell:has(> .login-art) { display: grid; grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); place-items: stretch; padding: 0; background: #fff; }
  .login-shell > .login-art { min-height: 100dvh; padding: 50px clamp(35px, 5vw, 90px); }
  .login-shell > .login-art::before { background: radial-gradient(ellipse at 30% 55%, #28a4781a, transparent 62%), linear-gradient(#77cab909 1px, transparent 1px), linear-gradient(90deg, #77cab909 1px, transparent 1px); background-size: auto, 40px 40px, 40px 40px; }
  .login-shell > .login-art > div { margin-block: 65px; }
  .login-shell > .login-art .eyebrow { font-size: 8px; letter-spacing: 1.4px; color: #6abe9b; margin: 0 0 23px; }
  .login-shell > .login-art h1 { font-size: clamp(26px, 2.75vw, 41px); font-weight: 500; letter-spacing: -1.6px; line-height: 1.65; }
  .login-shell > .login-art > div > p:not(.eyebrow) { font-size: 12px; color: #86a297; line-height: 2; margin-top: 22px; }
  .login-shell > .login-art .code-block { background: #0d1c2455; border-color: #33544975; font-size: 10px; line-height: 2.2; color: #81b39c; padding: 21px 23px; margin: 36px 0 0; max-width: 360px; }
  .login-shell > .login-art .code-block .status-dot { margin-right: 6px; }
  .login-shell > .login-art > p.mono { margin: 0; font-size: 8px; letter-spacing: 1px; color: #5f8073; }
  .login-shell > .login-form { padding: 50px clamp(30px, 6vw, 110px); align-items: center; }
  .login-form > .login-card { display: block; width: 100%; max-width: 380px; min-height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .login-form > .login-card > .badge { font-size: 8px; letter-spacing: 1px; padding: 5px 8px; margin-bottom: 32px; }
  .login-form > .login-card > .eyebrow { font-size: 8px; color: #8a9b91; letter-spacing: 1.7px; margin-bottom: 10px; }
  .login-form > .login-card > .eyebrow::before { display: none; }
  .login-form > .login-card > h2 { font-size: 26px; letter-spacing: -1px; }
  .login-form > .login-card > .page-description { font-size: 11px; margin: 9px 0 30px; }
  .login-card form .field { margin-bottom: 19px; }
  .login-card form .field input { min-height: 44px; font-size: 12px; }
  .login-form .button.primary { min-height: 44px; font-size: 12px; justify-content: space-between; padding-inline: 15px; }
  .login-form .notice { display: block; margin: 24px 0 0; font-size: 10px; padding: 11px 14px; }
  .login-form .notice strong { font-size: 10px; }
  .login-form .field-help { font-size: 10px; text-align: left; line-height: 1.9; }
  .login-form > .login-card > .field-help:last-child { border-top: 1px solid var(--border); padding-top: 21px; margin-top: 25px; color: #99a5ae; }
}

@layer responsive {
  @media (max-width: 1100px) {
    .brand-copy { letter-spacing: .8px; }
    .brand-copy small { font-size: 7px; letter-spacing: .7px; }
    .stat-value.compact { font-size: 16px; }
    .schedule-card, .client-card { padding: 18px; }
    .schedule-grid, .client-grid { gap: 16px; }
    .feature-grid { gap: 20px; }
    .feature-grid > div + div { padding-left: 20px; }
    .schedule-card .form-grid { grid-template-columns: 1fr; gap: 13px; }
    .schedule-heading h3 { font-size: 12px; }
    .client-card-top { flex-wrap: wrap; }
    .client-card-top .badge { margin-left: 0; }
  }
  @media (max-width: 800px) {
    .brand-copy { font-size: 14px; letter-spacing: 1.2px; }
    .brand-copy small { font-size: 8px; letter-spacing: 1.1px; }
    .schedule-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .login-shell:has(> .login-art) { grid-template-columns: minmax(270px, 43%) minmax(0, 1fr); }
    .login-shell > .login-art { padding: 34px 28px; }
    .login-shell > .login-form { padding: 36px 28px; }
    .login-shell > .login-art h1 { font-size: 26px; }
    .login-shell > .login-art .code-block { padding: 16px; font-size: 9px; }
  }
  @media (max-width: 600px) {
    .topbar-actions { gap: 9px; }
    .environment-badge, .topbar-actions > .user-avatar { display: none; }
    .topbar-actions .command-trigger { min-width: 30px; width: auto; min-height: 30px; padding: 3px 6px; background: transparent; border-color: transparent; }
    .topbar-actions .command-trigger > span { display: none; }
    .topbar-actions .command-trigger::before { content: "⌕"; font-size: 23px; color: #82968e; line-height: 1; }
    .topbar-actions .button { font-size: 10px; min-height: 29px; padding: 5px 9px; }
    .heading-actions { justify-content: space-between; }
    .heading-actions > .mono { font-size: 9px; }
    .stat-value.compact { font-size: 15px; letter-spacing: -.6px; padding-top: 13px; padding-bottom: 8px; }
    .stat-value > small { font-size: 10px; margin-left: 4px; }
    .feature-grid { grid-template-columns: 1fr; gap: 20px; }
    .feature-grid > div + div { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--border); }
    .feature-grid .section-label { margin-bottom: 8px; }
    .feature-grid p { max-width: none; }
    .workspace-footer { margin-top: 27px; padding-top: 18px; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 8px; }
    .workspace > .toolbar { align-items: flex-start; gap: 12px; }
    .workspace > .toolbar p { font-size: 8px; }
    .workspace > .toolbar > .button { font-size: 10px; min-height: 32px; }
    .schedule-grid, .client-grid { grid-template-columns: 1fr; padding: 15px; gap: 14px; }
    .schedule-card, .client-card { padding: 18px; }
    .schedule-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-heading { margin-bottom: 20px; }
    .schedule-heading h3 { font-size: 13px; }
    .schedule-actions { justify-content: stretch; }
    .schedule-actions > form { flex: 1; }
    .schedule-actions .button { width: 100%; }
    .client-card-top { flex-wrap: nowrap; gap: 8px; }
    .client-card-top .badge { margin-left: auto; }
    .client-card-top h3 { font-size: 12px; }
    .client-card-footer > .mono { font-size: 8px; }
    .detail-grid:has(> div) { grid-template-columns: 1fr; }
    .detail-grid > div { padding: 12px 0; }
    .detail-panel .panel-title { flex-wrap: wrap; }
    .detail-panel .panel-title > .mono { font-size: 10px; }
    .login-shell:has(> .login-art) { display: block; }
    .login-shell > .login-art { min-height: auto; padding: 25px 27px 28px; }
    .login-shell > .login-art > div { margin: 30px 0 0; }
    .login-shell > .login-art h1 { font-size: 26px; letter-spacing: -1px; }
    .login-shell > .login-art .eyebrow { margin-bottom: 11px; font-size: 7px; }
    .login-shell > .login-art > div > p:not(.eyebrow), .login-shell > .login-art .code-block, .login-shell > .login-art > p.mono { display: none; }
    .login-shell > .login-form { padding: 32px 27px 40px; }
    .login-form > .login-card { max-width: 100%; }
    .login-form > .login-card > .badge { margin-bottom: 24px; }
    .login-form > .login-card > h2 { font-size: 23px; }
    .login-form > .login-card > .page-description { margin-bottom: 25px; }
    .login-form .notice { font-size: 10px; }
  }
}

@layer utilities {
  .text-muted { color: var(--muted) !important; }
  .text-success { color: var(--accent) !important; }
  .text-danger { color: var(--danger) !important; }
  .text-right { text-align: right; }
  .text-center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .full-width, .span-full { grid-column: 1 / -1; }
  .stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .stack > .panel { margin-bottom: 0; }
  .inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; left: 16px; top: -80px; z-index: 200; padding: 10px 18px; background: var(--accent); color: white; border-radius: 6px; }
  .skip-link:focus { top: 12px; }
  .mt-0 { margin-top: 0 !important; }
  .mt-4 { margin-top: 16px !important; }
  .mb-0 { margin-bottom: 0 !important; }
  .mb-4 { margin-bottom: 16px !important; }
  .p-0 { padding: 0 !important; }
}

@layer responsive {
  @media (min-width: 1700px) { .workspace { padding-top: 42px; } }
  @media (max-width: 1100px) {
    .sidebar { width: 218px; padding-inline: 13px; }
    .main { margin-left: 218px; }
    .brand { padding-inline: 7px; gap: 9px; }
    .brand-copy { font-size: 12px; }
    .nav-item.active::before { left: -14px; }
    .workspace { padding: 28px 26px 40px; }
    .topbar { padding-inline: 26px; }
    .stats-grid { gap: 12px; }
    .stat-card { padding: 18px 16px 16px; }
    .stat-value { font-size: 25px; }
    .content-grid { grid-template-columns: minmax(0, 1fr); }
    .content-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-heading { align-items: flex-start; }
    .heading-actions { padding-top: 5px; }
    .panel-header, .toolbar { padding-inline: 19px; }
    .data-table td, .data-table th { padding-inline: 18px; }
  }
  @media (max-width: 800px) {
    .sidebar { width: 244px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 15px 0 40px #101e291a; visibility: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); visibility: visible; }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open::after { content: ""; position: fixed; inset: 0; background: #101e295e; backdrop-filter: blur(2px); z-index: 35; }
    .main { margin-left: 0; }
    .mobile-menu-toggle { display: inline-flex; }
    .topbar { min-height: 64px; padding: 13px 24px; }
    .breadcrumbs { margin-right: auto; }
    .topbar-actions { gap: 9px; }
    .workspace { padding: 27px 24px 40px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .stat-card { padding: 20px; }
    .stat-value { font-size: 28px; }
    .page-title { font-size: 26px; }
    .page-description { max-width: 430px; }
    .page-heading { margin-bottom: 24px; }
    .split-panel { grid-template-columns: 1fr; gap: 24px; }
    .login-card { min-height: 470px; grid-template-columns: .85fr 1fr; }
    .login-art { padding: 30px 25px; }
    .login-art h1, .login-art h2 { font-size: 25px; }
    .login-form { padding: 36px 28px; }
  }
  @media (max-width: 600px) {
    :root { font-size: 14px; }
    .topbar { padding: 12px 17px; min-height: 61px; gap: 10px; }
    .topbar-actions { gap: 5px; }
    .topbar-actions .command-trigger { width: 33px; padding: 8px; }
    .command-trigger .command-label, .command-trigger kbd, .topbar-actions .user-info, .topbar .desktop-only { display: none; }
    .breadcrumbs { font-size: 10px; gap: 7px; }
    .workspace { padding: 25px 17px 35px; }
    .page-heading { flex-direction: column; gap: 17px; }
    .heading-actions { width: 100%; padding: 0; }
    .heading-actions > .button { flex: 1; }
    .page-title { font-size: 25px; }
    .eyebrow { font-size: 8px; margin-bottom: 7px; }
    .page-description { font-size: 11px; line-height: 1.9; }
    .stats-grid { gap: 11px; margin-bottom: 20px; }
    .stat-card { padding: 17px 14px 15px; border-radius: 9px; }
    .stat-label { font-size: 10px; }
    .stat-value { font-size: 25px; margin-top: 11px; letter-spacing: -.8px; }
    .stat-value.compact { font-size: 18px; }
    .stat-meta { font-size: 9px; gap: 4px; line-height: 1.7; }
    .stat-icon { display: none; }
    .content-grid, .content-grid.equal { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .panel { margin-bottom: 18px; border-radius: 10px; }
    .panel-header { min-height: 67px; padding: 17px; gap: 10px; }
    .panel-title { font-size: 12px; }
    .panel-subtitle { font-size: 10px; }
    .panel-body { padding: 19px 17px; }
    .toolbar { padding: 13px 15px; gap: 8px; }
    .toolbar form { gap: 8px; }
    .toolbar .search-input { max-width: none; flex-basis: 100%; }
    .toolbar .filter-select { flex: 1; min-width: 0; }
    .data-table { font-size: 11px; }
    .data-table th, .data-table td { padding-inline: 15px; }
    .data-table td { padding-top: 15px; padding-bottom: 15px; }
    .data-table .cell-title { min-width: 140px; }
    .table-footer { padding: 13px 15px; }
    .table-footer > :first-child { width: 100%; }
    .catalog-grid { grid-template-columns: 1fr; gap: 14px; }
    .catalog-card { padding: 21px; }
    .form-grid { grid-template-columns: 1fr; gap: 19px; }
    .form-actions .button { flex: 1; }
    .detail-grid { grid-template-columns: minmax(80px, .65fr) minmax(0, 1.5fr); gap: 14px 14px; }
    .detail-value { font-size: 11px; }
    .notice { padding: 12px 14px; font-size: 11px; }
    .tabs { gap: 19px; margin-bottom: 20px; }
    .tab { font-size: 11px; }
    .system-strip { align-items: flex-start; flex-direction: column; gap: 7px; }
    .login-shell { padding: 18px; }
    .login-card { grid-template-columns: 1fr; min-height: auto; }
    .login-art { padding: 25px; gap: 26px; }
    .login-art h1, .login-art h2 { font-size: 23px; line-height: 1.5; }
    .login-art > .section-label, .login-art p { display: none; }
    .login-form { padding: 29px 25px 32px; }
    .login-form h1, .login-form h2 { font-size: 22px; }
    .toast-region { right: 16px; bottom: 16px; }
    .command-palette { margin-top: 10dvh; }
    .code-block { padding: 14px; font-size: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    .badge, .button, .panel, .stat-card, .catalog-card { border: 1px solid CanvasText; }
    .status-dot { background: CanvasText; }
    .nav-item.active { border-color: Highlight; }
  }
  @media print {
    .sidebar, .topbar, .heading-actions, .toolbar, .row-actions, .toast-region, .command-palette { display: none !important; }
    .main { margin-left: 0; }
    .workspace { padding: 0; }
    body { background: white; }
    .panel, .stat-card { box-shadow: none; break-inside: avoid; }
    .data-table-wrap { overflow: visible; }
    .content-grid { display: block; }
  }
}

@layer responsive {
  @media (max-width: 800px) {
    .login-form > .login-card { min-height: auto; }
  }
  @media (max-width: 600px) {
    .login-shell:has(> .login-art) { padding: 0; }
    .stat-value.compact { font-size: 17px; }
  }
}

/* Operational content stays readable at everyday viewing distances. */
@layer components {
  .nav-item { font-size: 13px; }
  .page-description { font-size: 13px; }
  .panel-title { font-size: 14px; }
  .panel-subtitle { font-size: 12px; }
  .stat-label { font-size: 12px; }
  .stat-meta { font-size: 11px; }
  .button { min-height: 40px; font-size: 13px; }
  .button.small { min-height: 34px; font-size: 12px; }
  .data-table { font-size: 13px; }
  .data-table th { font-size: 12px; }
  .data-table td { font-size: 13px; }
  .data-table .cell-title { font-size: 13px; }
  .data-table .mono { font-size: 11px; }
  .cell-subtitle { font-size: 11px; }
  .text-link { font-size: 12px; }
  .field label, .field > .label { font-size: 12px; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { font-size: 13px; }
  .field-help { font-size: 11px; }
  .checkbox-field { font-size: 13px; }
  .notice { font-size: 13px; line-height: 1.8; }
  .empty-state { font-size: 13px; }
  .empty-state p { font-size: 13px; }
  .empty-state h2, .empty-state h3, .empty-state strong { font-size: 15px; }
  .timeline-title { font-size: 13px; }
  .timeline-time, .timeline-detail { font-size: 11px; }
  .feature-grid h3 { font-size: 14px; }
  .feature-grid p { font-size: 12px; }
  .feature-grid .section-label { font-size: 10px; }
  .catalog-card > .section-label { font-size: 10px; }
  .catalog-key { font-size: 11px; }
  .catalog-meta > div, .catalog-meta strong, .catalog-meta strong.mono { font-size: 12px; }
  .catalog-actions > a { font-size: 12px; }
  .schedule-heading h3, .schedule-header h3 { font-size: 14px; }
  .schedule-card .field label, .client-card .field label { font-size: 12px; }
  .schedule-card .field input, .schedule-card .field select, .client-card .field input { font-size: 13px; }
  .schedule-card .checkbox-field, .client-card .checkbox-field { font-size: 12px; }
  .schedule-card > form > .field-help { font-size: 11px; }
  .schedule-actions .button, .client-card-footer .button { font-size: 12px; }
  .client-card-top h3 { font-size: 14px; }
  .client-card .field label .muted { font-size: 11px; }
  .client-card-footer > .mono { font-size: 10px; }
  .detail-grid > div > dt { font-size: 11px; }
  .detail-grid > div > dd { font-size: 13px; }
  .detail-value { font-size: 13px; }
  .table-footer { font-size: 11px; }
  .pagination a, .pagination button, .pagination > span { min-height: 34px; min-width: 34px; font-size: 12px; }
  .tab { font-size: 13px; }
  [data-command-item] { font-size: 14px; min-height: 48px; }
  .toast { font-size: 13px; }
  .login-form > .login-card > .page-description { font-size: 13px; }
  .login-form .field-help { font-size: 12px; }
  .login-form .notice, .login-form .notice strong { font-size: 12px; }
  .login-form .button.primary { font-size: 14px; }
  .login-card form .field input { font-size: 14px; }
}

@layer responsive {
  @media (max-width: 800px) {
    .nav-item { min-height: 46px; font-size: 14px; }
    .button { min-height: 44px; font-size: 14px; padding-block: 11px; }
    .button.small { min-height: 40px; font-size: 13px; padding-block: 9px; }
    .button.icon-only { min-width: 44px; width: 44px; }
    .mobile-menu-toggle { min-width: 40px; min-height: 40px; }
    .page-description { font-size: 13px; }
    .panel-title { font-size: 14px; }
    .panel-subtitle { font-size: 12px; line-height: 1.8; }
    .stat-label { font-size: 12px; }
    .stat-meta { font-size: 12px; line-height: 1.7; }
    .field label, .field > .label, .schedule-card .field label, .client-card .field label { font-size: 12px; }
    .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea,
    .schedule-card .field input, .schedule-card .field select, .client-card .field input,
    .login-card form .field input { min-height: 44px; font-size: 16px; padding: 10px 12px; }
    .search-input { min-height: 44px; font-size: 16px; }
    .search-input:has(> input) { min-height: 44px; }
    .search-input > input { font-size: 16px; }
    .filter-select { min-height: 44px; font-size: 16px; }
    .field-help, .schedule-card > form > .field-help { font-size: 12px; }
    .checkbox-field, .schedule-card .checkbox-field, .client-card .checkbox-field { font-size: 13px; line-height: 1.8; min-height: 40px; align-items: center; }
    .checkbox-field input, .schedule-card .checkbox-field input { min-width: 18px; width: 18px; height: 18px; margin-top: 0; }
    .schedule-heading h3, .schedule-header h3, .client-card-top h3 { font-size: 14px; }
    .schedule-card .form-grid { grid-template-columns: 1fr; gap: 19px; }
    .schedule-actions .button, .client-card-footer .button { font-size: 13px; }
    .schedule-actions { gap: 10px; }
    .schedule-actions > form { flex: 1 1 140px; }
    .schedule-actions .button { width: 100%; }
    .notice { font-size: 13px; }
    .data-table { font-size: 13px; }
    .data-table td, .data-table .cell-title { font-size: 13px; }
    .data-table th { font-size: 12px; }
    .data-table .mono { font-size: 12px; }
    .text-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }
    .empty-state p { font-size: 13px; }
    .timeline-title { font-size: 13px; }
    .timeline-detail { font-size: 12px; }
    .feature-grid h3 { font-size: 14px; }
    .feature-grid p { font-size: 13px; }
    .catalog-meta > div, .catalog-meta strong, .catalog-meta strong.mono { font-size: 13px; }
    .catalog-actions > a { font-size: 13px; }
    .catalog-actions .button.small { min-width: 44px; min-height: 44px; }
    .detail-grid > div > dt { font-size: 12px; }
    .detail-grid > div > dd, .detail-value { font-size: 13px; }
    .tab { font-size: 14px; min-height: 44px; }
    .pagination a, .pagination button, .pagination > span { min-width: 40px; min-height: 40px; font-size: 13px; }
    .table-footer { font-size: 12px; }
    .topbar-actions .command-trigger { min-width: 40px; min-height: 40px; }
    .topbar-actions .button { min-height: 40px; font-size: 12px; padding: 9px 10px; }
    .login-form .notice, .login-form .notice strong { font-size: 12px; }
    .login-form > .login-card > .page-description { font-size: 13px; }
    .login-form .button.primary { min-height: 46px; font-size: 14px; }
  }
  @media (max-width: 600px) {
    .stat-card { padding: 18px 14px; }
    .stat-meta { min-height: 40px; }
    .stat-value { font-size: 28px; }
    .stat-value.compact { min-height: 47px; display: flex; align-items: center; font-size: 17px; padding-top: 7px; padding-bottom: 3px; }
    .data-table { min-width: 620px; }
    .data-table .cell-title { min-width: 160px; }
    .data-table th, .data-table td { padding: 15px 17px; }
    .catalog-grid { gap: 18px; }
    .schedule-grid, .client-grid { padding: 16px; gap: 17px; }
    .schedule-card, .client-card { padding: 19px 17px; }
    .client-card-top { flex-wrap: wrap; }
    .client-card-top .badge { margin-left: 0; }
    .client-card-top > div { flex: 1; }
    .client-card-footer > .mono { font-size: 10px; }
    .table-footer > :first-child { line-height: 1.8; }
    .workspace-footer { font-size: 10px; line-height: 1.8; }
    .workspace-footer > span:first-child, .workspace-footer .mono { font-size: 10px; }
    #command-query { font-size: 16px; }
    .breadcrumbs { font-size: 11px; }
    .login-form .field-help { font-size: 12px; }
  }
}
@layer components {
  body.record-modal-open {overflow:hidden;}
  .record-dialog {width:min(1080px,calc(100vw - 32px));max-height:88dvh;padding:0;border:1px solid var(--border);border-radius:15px;color:var(--text);background:var(--surface,#fff);box-shadow:0 25px 90px #071d3355;}
  .record-dialog::backdrop {background:#081b32a6;backdrop-filter:blur(4px);}
  .record-modal-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid var(--border);}
  .record-modal-header h2 {font-size:19px;line-height:1.5;}
  .record-modal-header .mono {display:block;margin-top:7px;font-size:12px;}
  .record-modal-body {padding:24px 26px;overflow-y:auto;max-height:calc(88dvh - 120px);overscroll-behavior:contain;}
  .record-modal-body .detail-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;}
  .record-modal-body .detail-value {white-space:pre-wrap;overflow-wrap:anywhere;}
  .record-modal-body .detail-grid>div {padding:14px;background:#f7f9fb;border-radius:8px;}
  .lab-settings {margin-top:22px;}
  .lab-field-options {margin:22px 0;padding:15px 17px;border:1px solid var(--border);border-radius:9px;}
  .lab-field-options summary {cursor:pointer;font-weight:600;}
  .lab-field-actions {display:flex;gap:10px;margin:18px 0;}
  .lab-field-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .lab-field-grid .checkbox-field {line-height:1.7;}
  .lab-query-row {display:flex;gap:12px;align-items:flex-start;}
  .lab-autocomplete {position:relative;flex:1;min-width:0;}
  .lab-autocomplete input {width:100%;min-height:46px;font-size:15px;}
  #lab-suggestions {position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:20;list-style:none;padding:6px;margin:0;max-height:340px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 15px 35px #10233326;}
  #lab-suggestions li {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;cursor:pointer;border-radius:6px;}
  #lab-suggestions li:hover,#lab-suggestions li[aria-selected=true] {background:#e7f6ef;}
  #lab-suggestions strong {font-size:13px;overflow-wrap:anywhere;}
  #lab-suggestions .mono {color:#536c7f;font-size:12px;flex-shrink:0;}
  .lab-status {margin:18px 0;min-height:20px;color:#526a7b;font-size:13px;}
  .lab-metrics {display:flex;flex-wrap:wrap;gap:14px 26px;padding:15px;background:#f4f8fb;border-radius:8px;color:#63798a;font-size:12px;}
  .lab-metrics strong {color:#142f44;margin-left:6px;font-family:var(--font-mono,monospace);}
}
@layer responsive {
  @media(max-width:800px) {
    .record-modal-body .detail-grid,.lab-field-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:600px) {
    .record-dialog {width:calc(100vw - 16px);max-height:94dvh;}
    .record-modal-header {padding:17px;align-items:flex-start;}
    .record-modal-header h2 {font-size:16px;}
    .record-modal-body {padding:17px;max-height:calc(94dvh - 110px);}
    .record-modal-body .detail-grid {grid-template-columns:1fr;gap:12px;}
    .lab-field-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    #lab-suggestions li {align-items:flex-start;flex-direction:column;gap:5px;}
    .lab-query-row {gap:8px;}
    .lab-metrics {gap:12px;}
  }
}

@layer components { [data-search-lab] {overflow:visible;} }

/* Desktop operations layout. */
@layer components {
  .action-group {display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
  .action-group form {margin:0;display:flex;}
  .action-group .button {white-space:nowrap;min-height:40px;}
  .schedule-editor-body {padding:28px;}
  .schedule-inputs {display:grid;grid-template-columns:220px 200px 260px;gap:28px;align-items:end;}
  .schedule-inputs .field {margin:0;}
  .schedule-time,.schedule-interval {display:flex;align-items:center;gap:12px;height:42px;}
  .schedule-time input {width:78px;text-align:center;height:42px;margin:0;}
  .schedule-time>span {color:#8091a0;font-weight:600;}
  .schedule-interval input {width:110px;height:42px;margin:0;}
  .schedule-interval>span {white-space:nowrap;color:#63798a;font-size:13px;}
  .schedule-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:792px;gap:20px;margin-top:28px;}
  .setting-switch {position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:17px 18px;border:1px solid #e1e8ec;border-radius:9px;cursor:pointer;background:#fafcfd;}
  .setting-switch>span:first-child {font-size:13px;font-weight:500;color:#233f52;}
  .setting-switch input {position:absolute;right:18px;width:40px;height:24px;opacity:0;margin:0;}
  .switch-track {display:block;position:relative;width:38px;height:22px;flex-shrink:0;border-radius:20px;background:#cbd5df;transition:background .15s;}
  .switch-track::after {content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:white;border-radius:50%;box-shadow:0 1px 3px #10233333;transition:transform .15s;}
  .setting-switch input:checked+.switch-track {background:#008771;}
  .setting-switch input:checked+.switch-track::after {transform:translateX(16px);}
  .setting-switch input:focus-visible+.switch-track {outline:3px solid #7ed4bd;outline-offset:3px;}
  .setting-switch:has(input:disabled) {cursor:default;opacity:.7;}
  .schedule-editor-footer {display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:#fbfcfd;border-top:1px solid #e6ecef;border-radius:0 0 12px 12px;}
  .next-run {display:flex;align-items:center;gap:14px;color:#718696;font-size:12px;}
  .next-run strong {font-weight:500;color:#3b5567;font-size:13px;}
  .schedule-editor-footer .button {min-width:130px;min-height:42px;}
  .search-workbench {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;}
  .search-workbench-main {min-width:0;}
  .search-console {overflow:visible;}
  .search-console .panel-header {gap:24px;}
  .search-console .panel-header select {width:205px;min-height:38px;margin:0;font-size:13px;}
  .search-console .panel-body {padding:24px;}
  .search-console .lab-query-row {align-items:stretch;gap:10px;}
  .search-console .lab-query-row>.button {min-width:76px;height:48px;}
  .search-console .lab-autocomplete input {height:48px;font-size:15px;padding:12px 15px;}
  .search-feedback {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:17px 0 15px;min-height:22px;}
  .search-feedback p {font-size:12px;color:#657d8d;}
  .search-feedback>span {font-size:12px;font-variant-numeric:tabular-nums;color:#00816d;}
  .search-console .lab-metrics {padding:12px 14px;gap:12px 22px;}
  .search-settings {overflow:visible;}
  .search-settings .panel-header {padding:20px;min-height:66px;}
  .search-settings .panel-body {padding:22px 20px;}
  .search-settings .field {margin:0 0 24px;}
  .search-settings .field>label {font-size:12px;margin-bottom:10px;}
  .search-settings .text-link {font-size:12px;}
  .settings-pair {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .settings-pair .field {margin-bottom:0;}
  .unit-input {display:flex;align-items:center;border:1px solid #dce5eb;border-radius:7px;background:white;height:42px;overflow:hidden;}
  .unit-input input {border:0;width:100%;min-width:0;border-radius:0;height:40px;margin:0;padding:10px 11px;}
  .unit-input>span {padding-right:12px;font-size:12px;color:#78909f;white-space:nowrap;}
  .field-picker {position:relative;}
  .field-picker>summary {display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;border:1px solid #dce5eb;border-radius:7px;padding:12px;font-size:13px;list-style:none;}
  .field-picker>summary::-webkit-details-marker {display:none;}
  .field-picker-popover {position:absolute;top:calc(100% + 7px);right:0;width:320px;padding:14px;background:white;border:1px solid #dce5eb;box-shadow:0 14px 42px #14334826;border-radius:10px;z-index:40;}
  .field-picker-popover>input {width:100%;height:38px;font-size:13px;}
  .field-picker-popover .lab-field-actions {margin:12px 0;gap:8px;}
  .field-picker-popover .lab-field-grid {display:flex;flex-direction:column;gap:0;max-height:300px;overflow-y:auto;}
  .field-picker-popover .checkbox-field {display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:6px;cursor:pointer;font-size:13px;margin:0;}
  .field-picker-popover .checkbox-field:hover {background:#edf7f3;}
  .field-picker-popover .checkbox-field input {margin:0;width:16px;height:16px;}
  .field-picker-popover>p {font-size:13px;padding:15px 4px;color:#718696;}
  .search-empty {padding:38px!important;text-align:center;color:#8395a1;font-size:13px;}
  .request-history>summary {padding:20px 24px;cursor:pointer;font-weight:600;font-size:13px;}
  .request-history>summary span {font-size:12px;font-weight:400;color:#8395a1;margin-left:14px;}
  .request-history[open]>summary {border-bottom:1px solid #e6ecef;}
  .records-panel {overflow:visible;}
  .records-panel .toolbar {border-radius:12px 12px 0 0;}
  .records-panel .search-input {position:relative;max-width:none;min-width:260px;}
  .record-suggestions {position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:400px;z-index:30;list-style:none;background:white;padding:6px;margin:0;border:1px solid #dce5eb;border-radius:9px;box-shadow:0 12px 32px #10233326;max-height:340px;overflow:auto;}
  .record-suggestions li {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;cursor:pointer;border-radius:6px;}
  .record-suggestions li:hover,.record-suggestions li[aria-selected=true] {background:#e7f6ef;}
  .record-suggestions strong {font-size:13px;overflow-wrap:anywhere;}
  .record-suggestions .mono {font-size:12px;color:#6e8495;white-space:nowrap;}
}
@layer utilities {
  [hidden] {display:none!important;}
}
@layer utilities {
  .search-console .panel-header select {appearance:auto;border:1px solid #dce5eb;border-radius:7px;background:#fff;padding:8px 12px;color:#29475a;}
  .search-settings #lab-reset {appearance:none;border:0;background:transparent;color:#54778a;padding:5px 0;font:inherit;font-size:12px;cursor:pointer;}
  .search-settings #lab-reset:hover {color:#00816d;}
  .search-settings .unit-input input {border:0!important;box-shadow:none!important;outline:none!important;}
  .search-settings .unit-input:focus-within {outline:2px solid #008771;outline-offset:2px;}
  .key-issue-form {display:grid;grid-template-columns:minmax(200px,1fr) 160px 120px auto;gap:24px;align-items:end;}
  .key-no-expiry {display:flex;align-items:center;gap:9px;min-height:42px;white-space:nowrap;cursor:pointer;}
  .key-no-expiry input {width:16px;height:16px;accent-color:#00816d;}
  #key-days:disabled {background:#f1f4f6;color:#8b98a3;cursor:not-allowed;}
  .key-issue-form .field {margin:0;}
  .key-issue-form .button {min-height:42px;white-space:nowrap;}
  .key-actions {display:flex;align-items:center;justify-content:flex-end;gap:8px;}
  .key-actions form {margin:0;}
}
@layer utilities {
  #lab-suggestions .suggestion-state,.record-suggestions .suggestion-state {padding:16px;color:#708695;font-size:13px;font-weight:400;cursor:default;display:block;}
  #lab-suggestions .suggestion-state:hover,.record-suggestions .suggestion-state:hover {background:transparent;}
  #lab-suggestions .suggestion-state[data-kind=error] {color:#a34848;}
}
@layer utilities {
  #lab-suggestions li[role=option],.record-suggestions li[role=option] {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:16px;}
  #lab-suggestions li[role=option]>strong,.record-suggestions li[role=option]>strong {min-width:0;font-weight:600;line-height:1.6;}
  .suggestion-description {color:#728795;font-size:12px;line-height:1.6;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap;}
  .result-description,#lab-results td:nth-child(3) {font-size:12px;color:#6a8090;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;max-width:320px;min-width:160px;}
}

.account-panel {max-width:720px;}
.account-password-form {display:grid;gap:22px;}
.account-password-form p {margin:0;}
.account-password-form>.button {justify-self:start;}

@layer utilities {
  #lab-suggestions .suggestion-group {display:block;padding:9px 15px;background:#edf4f7;color:#506979;font-size:11px;font-weight:700;cursor:default;}
  .category-tag {white-space:nowrap;}
}