/* SYSTEM v5 — append after every incumbent stylesheet. UI only; no visibility,
 * authentication, permission, data, route or branding changes. The selectors
 * below come from dashboard-02 portal-session/workbench/usability renderers. */
:root {
  color-scheme: light;
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-soft: #f0f3f0;
  --ink: #1c2c27;
  --muted: #596660;
  --line: #dce3dd;
  --line-strong: #8d9f95;
  --action: #1f6654;
  --action-hover: #174e40;
  --action-soft: #e8f1ec;
  --focus: #226bb5;
  --radius: 22px;
  --radius-control: 12px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body { font-family: var(--font-ui); font-size: 16px; line-height: 1.7; }
button, input, select, textarea { font-family: var(--font-ui); }
::selection { background: #cee6da; color: #173f31; }
input, textarea { caret-color: var(--action); }
a { text-underline-offset: 0.22em; }
.system-public, .system-task-ui, dialog { accent-color: var(--action); }
:is(.system-public, .site-header, .system-task-ui, dialog)
  :is(a[href], button, input, select, textarea, summary, [role="button"],
      [tabindex]:not([tabindex="-1"]):not(h1):not(h2)):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  scroll-margin-block: 100px 24px;
}
/* The incumbent global :focus-visible rule also catches programmatically
 * focused route headings. Keep that focus destination, without a control ring. */
:is(.system-public, .system-task-ui, .system-session-status)
  :is(h1, h2)[tabindex="-1"]:focus-visible { outline: none; }
.system-task-ui, .system-public, dialog { font-variant-numeric: lining-nums; }
.console-date, .console-stat-number, .work-count, .day-time, table,
.system-member-facts, .detail-metrics { font-variant-numeric: tabular-nums; }

/* Public pages retain their real service copy, entry button and original logo. */
.site-header { background: var(--surface); }
.system-public-hero { gap: 56px; padding-block: 76px; }
.system-public .hero-title { font-size: 52px; line-height: 1.22; letter-spacing: -0.025em; }
.system-public .hero-lead { margin-top: 24px; max-width: 34em; line-height: 1.85; }
.system-public .hero-trust { max-width: 40em; line-height: 1.75; }
.system-public-product { padding: 32px; border-radius: 24px; box-shadow: 0 12px 36px #243b2e08; }
.system-public-preview-label { font-size: 14px; line-height: 1.7; }
.system-public-flow > * { gap: 16px; padding-block: 22px; }
.system-public-flow p, .system-public-flow small { font-size: 16px; line-height: 1.75; }
.system-public-feature { padding-top: 24px; }
.system-public-feature p { max-width: 30em; line-height: 1.8; }
.system-public .section-sub, .system-public .about-banner p { line-height: 1.8; }

/* A working desk, not a second marketing hero. */
.system-task-ui { --system-secondary: var(--muted); --system-rule: var(--line); }
.system-task-ui .sidebar { background: #fdfefd; }
.system-task-ui .side-nav a { border-radius: 12px; }
.system-task-ui .side-label { font-size: 14px; }
.system-task-ui .portal-main { padding-left: max(36px, var(--bsc-safe-left)); padding-right: max(36px, var(--bsc-safe-right)); }
.system-task-ui .portal-top { margin-inline: -36px; padding-left: max(36px, var(--bsc-safe-left)); padding-right: max(36px, var(--bsc-safe-right)); }
.system-task-ui #page-content { max-width: 1360px; padding-top: 36px; }
.system-task-ui .portal-heading { margin-bottom: 28px; gap: 24px; }
.system-task-ui .portal-heading h1 { font-size: 32px; line-height: 1.4; letter-spacing: -0.02em; }
.system-task-ui .portal-heading p { margin-top: 10px; max-width: 48em; font-size: 16px; line-height: 1.8; }
.system-task-ui .panel { padding: 26px; border-radius: 22px; }
.system-task-ui .panel-title { align-items: center; gap: 16px; margin-bottom: 22px; }
.system-task-ui .panel-title h2 { font-size: 22px; }
.system-task-ui .demo, .system-task-ui .page-intro { font-size: 14px; line-height: 1.8; }
.system-task-ui .reminder { padding: 24px; border-radius: 22px; }
.system-task-ui .reminder p { line-height: 1.75; }

/* Related summary fields belong to one rounded data group. */
.system-task-ui .console-stats { gap: 0; padding: 8px; border-radius: 22px; }
.system-task-ui .console-stat { padding: 18px 16px; border-radius: 14px; gap: 8px 12px; }
.system-task-ui .console-stat-caption { font-size: 14px; line-height: 1.65; }
.system-task-ui .console-stat-number { font-size: 24px; }
.system-task-ui .console-columns, .system-task-ui .console-secondary { gap: 24px; }
.system-task-ui .work-items { gap: 12px; }
.system-task-ui .work-item { padding: 16px; border-radius: 16px; background: var(--surface-soft); }
.system-task-ui .work-item p, .system-task-ui .work-status { font-size: 14px; line-height: 1.7; }
.system-task-ui .work-buttons { gap: 8px; }
.system-task-ui .console-shortcuts a { border-radius: 16px; }

/* Search and long records remain complete; no clipped or hidden error copy. */
.system-task-ui .filter-bar, .system-task-ui .system-filter { border-radius: 18px; }
.system-task-ui .filter-bar { gap: 16px; padding: 22px; }
.system-task-ui .filter-bar > .field { font-size: 15px; gap: 8px; color: var(--ink); }
.system-task-ui .member-tile { padding: 22px 12px; gap: 16px; }
.system-task-ui .member-tile strong { font-size: 17px; line-height: 1.6; }
.system-task-ui .member-tile small { font-size: 14px; line-height: 1.75; color: var(--muted); }
.system-task-ui .member-tile:hover { background: #f2f6f3; }
.system-task-ui .member-tile > span:nth-child(2) { gap: 6px; }
.system-task-ui .table-wrap { border: 1px solid var(--line); border-radius: 16px; }
.system-task-ui table { font-size: 16px; line-height: 1.75; }
.system-task-ui th { font-size: 14px; padding: 14px 16px; background: #f1f4f1; }
.system-task-ui td { padding: 18px 16px; }
.system-task-ui td small { font-size: 14px; line-height: 1.75; }
.system-task-ui .notice-entry { padding-block: 28px; }
.system-task-ui .notice-entry:first-child { padding-top: 0; }
.system-task-ui .notice-entry:last-child { padding-bottom: 0; }
.system-task-ui .notice-body { max-width: 46em; font-size: 16px; line-height: 1.9; }
.system-task-ui .notice-meta { font-size: 14px; gap: 10px; }
.system-task-ui .notice-reading { gap: 12px; margin-top: 20px; }
.system-task-ui .week-grid { gap: 16px; }
.system-task-ui .day-card { padding: 22px; border-radius: 18px; background: #fafcf9; }
.system-task-ui .day-card.my-day { background: #edf5ef; }
.system-task-ui .day-head strong { font-size: 26px; }
.system-task-ui .system-member-facts { gap: 24px; }

/* One control vocabulary across existing forms, native dialogs and pickers. */
.system-task-ui .btn, dialog .btn, .site-header .btn, .system-public .btn,
.system-task-ui .tabs button, .system-select { border-radius: 12px; }
.system-task-ui .btn.small, dialog .btn.small { font-size: 15px; min-height: 44px; }
.system-task-ui .field, dialog .field { font-size: 15px; gap: 8px; line-height: 1.65; }
.system-task-ui .field input:not([type="checkbox"]):not([type="radio"]),
.system-task-ui .field select, .system-task-ui .field textarea,
dialog .field input:not([type="checkbox"]):not([type="radio"]),
dialog .field select, dialog .field textarea { font-size: 16px; border-radius: 12px; }
dialog { padding: 28px; border-radius: 24px; line-height: 1.7; }
dialog .stack { gap: 22px; }
dialog .modal-top { margin-bottom: 28px; }
dialog .modal-top h2 { font-size: 24px; line-height: 1.5; }
dialog .duty-shift-header { padding: 16px; border-radius: 14px; background: #edf5ef; }
dialog .duty-shift-header strong { font-size: 16px; }
dialog .duty-form-section { padding-block: 20px; }
dialog .duty-section-title { margin-bottom: 14px; font-size: 16px; line-height: 1.65; }
dialog .duty-check-row { min-height: 52px; padding: 14px; border-radius: 12px; font-size: 16px; line-height: 1.7; }
dialog .duty-grid-2col { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
dialog .chip-group { gap: 8px; margin-top: 12px; }
dialog .chip-btn { min-height: 44px; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.6; transition-property: background-color, border-color; }
dialog .audience-picker, dialog .file-drop { border-radius: 16px; }
dialog .audience-choice { min-height: 48px; padding: 12px; border-radius: 10px; font-size: 15px; }
dialog .system-submit-error, dialog .system-discard { border-radius: 14px; font-size: 16px; line-height: 1.8; }
dialog .system-field-error { font-size: 14px; line-height: 1.75; }
.system-task-ui .system-inline-error { border-radius: 16px; }
.system-task-ui .btn:disabled, dialog .btn:disabled { color: #536158; background: #e9eeeb; border-color: #c6d0c9; }
.system-task-ui .btn[aria-busy="true"], dialog .btn[aria-busy="true"] { cursor: progress; }

@media (max-width: 1179px) {
  .system-task-ui .portal-main { padding-left: max(28px, var(--bsc-safe-left)); padding-right: max(28px, var(--bsc-safe-right)); }
  .system-task-ui .portal-top { margin-inline: -28px; padding-left: max(28px, var(--bsc-safe-left)); padding-right: max(28px, var(--bsc-safe-right)); }
  .system-public-hero { gap: 36px; padding-block: 60px; }
}
@media (max-width: 959px) {
  .system-public .hero-title { font-size: 46px; }
  .system-task-ui .console-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-task-ui .console-secondary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .system-public .hero-title { font-size: 38px; }
  .system-public-hero { gap: 32px; padding-block: 40px 48px; }
  .system-public-product { padding: 24px 20px; border-radius: 22px; }
  .system-public-flow > * { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-block: 20px; }
  .system-task-ui .portal-main { padding-left: max(20px, var(--bsc-safe-left)); padding-right: max(20px, var(--bsc-safe-right)); }
  .system-task-ui .portal-top { margin-inline: -20px; padding-left: max(14px, var(--bsc-safe-left)); padding-right: max(14px, var(--bsc-safe-right)); }
  .system-task-ui #page-content { padding-top: 28px; }
  .system-task-ui .portal-heading h1 { font-size: 28px; }
  .system-task-ui .panel { padding: 22px 18px; border-radius: 20px; }
  .system-task-ui .panel-title { flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; }
  .system-task-ui .panel-title h2 { font-size: 20px; }
  .system-task-ui .console-stat { padding: 14px 10px; gap: 8px; }
  .system-task-ui .console-stat-top { font-size: 14px; }
  .system-task-ui .console-stat .console-stat-number { font-size: 22px; }
  .system-task-ui .console-stat-caption { font-size: 14px; }
  .system-task-ui .reminder { padding: 20px 18px; }
  .system-task-ui .work-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px 12px; padding: 16px 12px; }
  .system-task-ui .work-item .work-buttons { grid-column: 2; max-width: none; }
  .system-task-ui .work-item .work-buttons .btn { padding-inline: 14px; }
  .system-task-ui .filter-bar { padding: 18px; }
  .system-task-ui .member-tile { padding: 20px 0; gap: 12px; }
  .system-task-ui .member-tile strong { font-size: 17px; }
  .system-task-ui .table-wrap:has(.system-responsive-table) { padding: 0 12px; }
  .system-task-ui .system-responsive-table td { padding: 9px 0; }
  .system-task-ui .notice-entry { padding-block: 24px; }
  .system-task-ui .day-card { padding: 20px; }
  dialog { padding: 24px 18px; border-radius: 20px; }
  dialog .modal-top h2 { font-size: 22px; }
  dialog .duty-grid-2col { grid-template-columns: minmax(0, 1fr); }
  dialog .system-form-actions { flex-wrap: wrap; }
  dialog .system-form-actions .btn { flex: 1 1 130px; }
}
@media (max-width: 374px) {
  .system-public .hero-title { font-size: 34px; }
  .system-task-ui .portal-main { padding-left: max(16px, var(--bsc-safe-left)); padding-right: max(16px, var(--bsc-safe-right)); }
  .system-task-ui .portal-top { margin-inline: -16px; padding-left: max(10px, var(--bsc-safe-left)); padding-right: max(10px, var(--bsc-safe-right)); }
  .system-task-ui .console-stat { grid-template-columns: minmax(0, 1fr); }
  .system-task-ui .console-stat .console-stat-number { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .system-public, .system-task-ui, dialog { scroll-behavior: auto; }
  .system-public .btn, .site-header .btn, .system-task-ui .btn,
  .system-task-ui .tabs button, .system-task-ui .quick, .system-select,
  dialog .btn, dialog .chip-btn, dialog .duty-check-row,
  .system-picker-option, .system-calendar-footer button, #toast {
    transition: none;
    animation: none;
  }
}