:root {
      color-scheme: light;
      --bg: #f6f7f9;
      --panel: #ffffff;
      --line: #d9dee7;
      --text: #1f2937;
      --muted: #6b7280;
      --accent: #0f766e;
      --accent-soft: #e6f3f1;
      --warn: #b45309;
      --bad: #b91c1c;
      --good: #047857;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.5;
    }

    body.signed-out {
      min-height: 100vh;
      background:
        linear-gradient(90deg, rgba(238, 246, 248, 0.10) 0%, rgba(238, 246, 248, 0.18) 45%, rgba(238, 246, 248, 0.72) 68%, rgba(238, 246, 248, 0.94) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(226, 236, 240, 0.28)),
        url("/static/login-medical-equipment.a8f38ca627c67671.webp?v=a8f38ca627c67671") left center / cover no-repeat fixed;
    }

    header {
      background: var(--panel);
      border-bottom: 1px solid var(--line);
      padding: 18px 24px;
    }

    body.signed-out header {
      background: transparent;
      border-bottom: 0;
      padding-top: 24px;
    }

    body.signed-out .meta,
    body.signed-out #health {
      display: none;
    }

    body.signed-out h1 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #263746;
      font-size: 30px;
      font-weight: 650;
      letter-spacing: 0;
      text-shadow: none;
    }

    body.signed-out h1::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 34px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      max-width: 1280px;
      margin: 0 auto;
    }

    h1 {
      margin: 0;
      font-size: 22px;
      font-weight: 650;
    }

    .meta {
      color: var(--muted);
      margin-top: 4px;
    }

    main {
      max-width: 1280px;
      margin: 0 auto;
      padding: 20px 24px 32px;
    }

    .app-version {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px 18px;
      color: var(--muted);
      font-size: 12px;
      text-align: right;
    }

    body.signed-out main {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-height: calc(100vh - 92px);
      max-width: none;
      padding: 24px clamp(24px, 8vw, 120px);
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .schedule-tools-body {
      --schedule-align-span: 522px;
      display: grid;
      gap: 12px;
      width: 100%;
    }

    .toolbar.schedule-filter-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      justify-content: stretch;
      margin-bottom: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .schedule-content-filter {
      display: flex;
      align-items: center;
    }

    .schedule-filter-top-row,
    .schedule-filter-fields {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .schedule-filter-fields {
      display: grid;
      grid-template-columns: 250px 260px 200px 190px minmax(200px, 1fr);
      align-items: center;
    }

    .tabs.compact-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: var(--schedule-align-span);
    }

    .compact-tabs .tab {
      width: auto;
      min-width: 0;
      padding: 8px 12px;
    }

    .schedule-filter-fields > .filters {
      min-width: 0;
      justify-content: space-between;
    }

    .schedule-filter-fields > .filters select {
      min-width: 0;
      flex: 1;
    }

    #monthFilter {
      grid-column: 1;
    }

    #scheduleTypeFilter {
      grid-column: 2;
    }

    #holidayNameFilter {
      grid-column: 3;
    }

    #personFilter {
      grid-column: 4;
    }

    .schedule-download-actions {
      display: flex;
      gap: 8px;
      grid-column: 5;
      justify-self: end;
      margin-left: 0;
    }

    .active-filter-summary {
      padding: 9px 12px;
      border-left: 3px solid var(--accent);
      border-radius: 0 6px 6px 0;
      background: #f1f8f7;
      color: var(--muted);
      font-size: 14px;
    }

    .mobile-collapse-summary {
      display: none;
    }

    .tabs {
      display: inline-flex;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 8px;
      overflow: hidden;
    }

    .tab {
      border: 0;
      border-right: 1px solid var(--line);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      padding: 9px 14px;
      min-width: 92px;
      font: inherit;
    }

    .tab:last-child {
      border-right: 0;
    }

    .tab.active {
      background: var(--accent);
      color: white;
    }

    .filters {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
    }

    select {
      height: 36px;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 6px;
      padding: 0 10px;
      font: inherit;
      color: var(--text);
    }

    select[multiple] {
      height: 132px;
      padding: 8px 10px;
    }

    button.primary {
      height: 36px;
      border: 0;
      border-radius: 6px;
      background: var(--accent);
      color: white;
      cursor: pointer;
      padding: 0 12px;
      font: inherit;
      font-weight: 650;
    }

    button.secondary {
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
      cursor: pointer;
      padding: 0 12px;
      font: inherit;
      font-weight: 650;
    }

    button.primary:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }

    #summaryPanel {
      margin-top: 14px;
    }

    .summary-panel-heading { cursor: pointer; list-style: none; }
    .summary-panel-heading::-webkit-details-marker { display: none; }
    .summary-panel-heading #summaryCount { margin-left: auto; }
    .summary-panel-heading::after { content: "展开"; font-size: 13px; font-weight: 650; }
    #summaryPanel[open] > .summary-panel-heading::after { content: "收起"; }
    #summaryPanel:not([open]) > .summary-panel-heading { border-bottom: 0; }

    .login-panel {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.8fr) minmax(320px, 1.1fr);
      align-items: stretch;
      gap: 12px;
      margin-bottom: 14px;
      padding: 10px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .login-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .login-group-title {
      width: 100%;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }

    .login-group .filters {
      min-width: 0;
    }

    .login-group select,
    .login-group input {
      background: var(--panel);
    }

    .login-year-group {
      align-content: start;
    }

    .login-account-group {
      align-content: start;
    }

    .login-action-group {
      align-content: start;
      justify-content: flex-end;
    }

    .draw-result-row {
      grid-column: 1 / -1;
      display: block;
      min-height: 46px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafafa;
    }

    .login-account-panel {
      min-width: 0;
    }

    .current-account-display {
      display: none;
    }

    body:not(.signed-out) .login-panel {
      grid-template-columns: minmax(620px, 1fr) 420px;
      gap: 14px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body:not(.signed-out) .login-group {
      background: #ffffff;
    }

    body:not(.signed-out) .login-year-group {
      display: grid;
      grid-template-rows: 18px auto;
      min-height: 146px;
      padding: 12px 14px;
      border-radius: 8px;
      align-content: start;
      gap: 10px;
    }

    body:not(.signed-out) .login-year-group .login-group-title {
      color: #6b7280;
      font-size: 14px;
      font-weight: 700;
      line-height: 18px;
      min-height: 18px;
    }

    body:not(.signed-out) .login-year-group .filters {
      display: grid;
      grid-template-columns: 52px 220px;
      align-items: center;
      gap: 12px;
      color: #6b7280;
      font-size: 14px;
      font-weight: 650;
    }

    body:not(.signed-out) .login-year-group select {
      width: 220px;
      height: 36px;
      font-size: 15px;
      font-weight: 650;
    }

    body:not(.signed-out) .login-year-group select,
    body:not(.signed-out) .official-primary-row select,
    body:not(.signed-out) .official-primary-row button,
    body:not(.signed-out) .official-manual-row button,
    body:not(.signed-out) #drawButton {
      box-sizing: border-box;
      height: 36px;
      min-height: 36px;
      line-height: 36px;
      padding-top: 0;
      padding-bottom: 0;
    }

    body:not(.signed-out) .official-data-actions {
      display: grid;
      align-content: start;
      gap: 10px;
      min-width: 0;
    }

    body:not(.signed-out) .official-primary-row,
    body:not(.signed-out) .official-manual-row {
      display: grid;
      grid-template-columns: 52px minmax(150px, 180px) repeat(3, minmax(136px, 160px));
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    body:not(.signed-out) .official-primary-row select {
      width: 100%;
    }

    body:not(.signed-out) .official-manual-row {
      margin-left: 0;
    }

    body:not(.signed-out):not(.is-admin) .official-manual-row {
      display: none;
    }

    body:not(.signed-out):not(.is-admin) .official-primary-row {
      grid-template-columns: 52px minmax(150px, 220px) minmax(136px, 160px);
    }

    body:not(.signed-out):not(.is-admin) .login-year-group {
      grid-template-rows: 18px 36px;
      align-content: start;
      min-height: 74px;
    }

    body:not(.signed-out):not(.is-admin) .official-data-actions {
      align-content: start;
    }

    body:not(.signed-out):not(.is-admin) .login-account-panel {
      grid-template-rows: 18px 36px;
      min-height: 74px;
    }

    body:not(.signed-out):not(.is-admin) .official-primary-row,
    body:not(.signed-out):not(.is-admin) .login-action-group {
      height: 36px;
      align-self: start;
    }

    body:not(.signed-out) .official-field-label {
      color: #6b7280;
      font-size: 14px;
      font-weight: 650;
    }

    body:not(.signed-out) .official-data-actions button,
    body:not(.signed-out) .login-action-group button {
      height: 36px;
      min-height: 36px;
      line-height: 36px;
      min-width: 0;
      width: 100%;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 650;
      padding-top: 0;
      padding-bottom: 0;
      white-space: nowrap;
    }

    body:not(.signed-out) #fetchOfficialHolidaysButton {
      min-width: 0;
    }

    body:not(.signed-out) .login-account-panel {
      min-height: 146px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      display: grid;
      grid-template-rows: 18px 36px;
      align-content: start;
      gap: 10px;
      box-shadow: 0 8px 22px rgba(31, 41, 55, 0.045);
    }

    body:not(.signed-out) .current-account-display {
      display: block;
      color: #6b7280;
      font-size: 14px;
      font-weight: 700;
      line-height: 18px;
      min-height: 18px;
      text-align: left;
    }

    body:not(.signed-out) .login-account-group {
      display: none;
    }

    body:not(.signed-out) .login-action-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 10px;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body:not(.signed-out) .login-action-group .login-group-title {
      display: none;
    }

    body:not(.signed-out) #drawButton {
      min-width: 0;
      width: 100%;
      justify-content: center;
    }

    body:not(.signed-out) #drawButton:not(.drawn) {
      background: var(--accent);
      color: #ffffff;
      opacity: 1;
    }

    body:not(.signed-out) #drawButton.drawn {
      background: #9ca3af;
      color: #ffffff;
      opacity: 1;
      cursor: not-allowed;
    }

    body:not(.signed-out) .draw-result-row {
      padding: 20px 26px;
      border-radius: 10px;
      background: #ffffff;
      min-height: 116px;
    }

    .login-panel.signed-out {
      grid-template-columns: 1fr;
      width: min(380px, 100%);
      margin: 0;
      padding: 26px;
      gap: 16px;
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(255, 255, 255, 0.76);
      box-shadow: 0 24px 72px rgba(15, 42, 52, 0.18);
      backdrop-filter: blur(14px) saturate(1.08);
    }

    .login-panel.signed-out .login-group {
      padding: 0;
      border: 0;
      background: transparent;
    }

    .login-panel.signed-out .login-account-panel {
      display: block;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .login-panel.signed-out .login-account-group {
      align-items: stretch;
      flex-direction: column;
    }

    .login-panel.signed-out .login-action-group {
      display: block;
    }

    .login-panel.signed-out .login-group-title {
      display: none;
    }

    .login-panel.signed-out .filters {
      align-items: stretch;
      flex-direction: column;
      gap: 6px;
    }

    .login-panel.signed-out select,
    .login-panel.signed-out input,
    .login-panel.signed-out button {
      width: 100%;
    }

    .login-panel.signed-out .draw-result {
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: center;
    }

    .login-panel.signed-out .draw-result:empty {
      display: none;
    }

    .login-panel.signed-out .login-helper-links {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: var(--muted);
      font-size: 13px;
    }

    .login-panel.signed-out .login-link {
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      padding: 0;
      font-size: 13px;
      font-weight: 500;
    }

    .login-panel.signed-out .login-link:hover {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .password-field {
      position: relative;
      width: 100%;
    }

    .password-field input {
      padding-right: 42px;
    }

    .password-toggle {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 17px;
      line-height: 1;
    }

    .login-panel.signed-out .password-toggle {
      width: 30px;
    }

    .password-toggle:hover {
      background: var(--soft);
      color: var(--text);
    }

    .keep-signed-in {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      user-select: none;
    }

    .keep-signed-in input {
      width: auto;
      margin: 0;
    }

    .login-panel.signed-out .keep-signed-in input {
      width: auto;
    }

    html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; }
    html { scrollbar-gutter: stable; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.42);
    }

    .modal {
      width: min(380px, 100%);
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    }

    .modal h2 {
      margin: 0 0 14px;
      font-size: 18px;
    }

    .modal .filters {
      align-items: stretch;
      flex-direction: column;
      margin-bottom: 10px;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .modal-message {
      min-height: 18px;
      margin-top: 8px;
      color: var(--danger);
      font-size: 13px;
    }

    body.manual-holiday-open { overflow: hidden; }
    .manual-holiday-modal {
      display: flex;
      flex-direction: column;
      width: min(1080px, 100%);
      max-height: calc(100dvh - 40px);
      padding: 0;
      overflow: hidden;
    }
    .manual-holiday-content { padding: 0 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
    .manual-holiday-status { color: var(--text); font-weight: 650; }
    .manual-holiday-help { color: var(--muted); font-size: 13px; line-height: 1.7; }
    #manualHolidayFields { margin: 0; padding: 0; border: 0; min-width: 0; }
    .manual-holiday-paste { padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin: 16px 0; }
    .manual-holiday-paste summary { cursor: pointer; font-weight: 650; }
    .manual-holiday-paste label { display: block; margin: 12px 0 6px; font-size: 13px; }
    .manual-holiday-paste textarea { width: 100%; margin-bottom: 8px; resize: vertical; }
    .manual-holiday-entry { padding: 14px; border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; }
    .manual-holiday-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
    .manual-holiday-entry label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--muted); }
    .manual-holiday-entry input { min-width: 0; width: 100%; height: 36px; }
    .manual-holiday-entry button { min-height: 36px; }
    .manual-workdays { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .manual-workdays label { width: 170px; }
    .manual-workday-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .manual-workday-chip { background: #fff3df; color: #855111; border: 1px solid #efd7ae; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
    #manualHolidayMessage, .manual-holiday-warning { white-space: pre-line; line-height: 1.7; }
    .manual-holiday-warning { padding: 12px; border-radius: 8px; background: #fff6e7; color: #855111; font-size: 13px; }
    .manual-holiday-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: 12px 0; }
    .manual-holiday-legend .holiday, .manual-calendar-days .holiday { background: #e5f4ed; color: #146644; }
    .manual-holiday-legend .workday, .manual-calendar-days .workday { background: #fff0d6; color: #80500c; }
    .manual-holiday-legend span { padding: 4px 7px; border-radius: 4px; }
    .manual-holiday-calendar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .manual-calendar-month { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
    .manual-calendar-month h4 { margin: 0 0 10px; font-size: 14px; }
    .manual-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; font-size: 12px; }
    .manual-calendar-days b { color: var(--muted); font-weight: 400; padding: 4px 0; }
    .manual-calendar-days span { min-height: 35px; padding: 3px 0; border-radius: 4px; }
    .manual-calendar-days small { display: block; font-size: 9px; line-height: 1; }
    .manual-holiday-confirm { display: flex; gap: 8px; align-items: start; font-size: 14px; line-height: 1.6; margin-top: 18px; }
    .manual-holiday-confirm input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
    .manual-holiday-footer { flex-shrink: 0; }
    .manual-holiday-footer > span { font-size: 12px; color: var(--muted); }
    @media (max-width: 700px) {
      #manualHolidayDialog { padding: 8px; }
      .manual-holiday-modal { max-height: calc(100dvh - 16px); }
      .manual-holiday-modal .official-holiday-preview-header { padding: 14px; }
      .manual-holiday-modal h2 { font-size: 16px; }
      .manual-holiday-content { padding: 0 12px 12px; }
      .manual-holiday-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
      .manual-holiday-range label:first-child { grid-column: 1 / -1; }
      .manual-holiday-range button { justify-self: start; }
      .manual-holiday-entry { padding: 10px; }
      .manual-holiday-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .manual-calendar-month { padding: 6px; }
      .manual-calendar-days { gap: 1px; font-size: 11px; }
      .manual-holiday-footer { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px; }
      .manual-holiday-footer .modal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
      .manual-holiday-footer button { padding: 8px 4px; font-size: 12px; }
    }

    .image-preview-modal {
      width: min(440px, 100%);
    }

    .official-holiday-preview-modal {
      display: flex;
      flex-direction: column;
      width: min(900px, 100%);
      max-height: calc(100vh - 40px);
      padding: 0;
      overflow: hidden;
      border-radius: 10px;
    }

    .official-holiday-preview-header,
    .official-holiday-preview-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 20px;
    }

    .official-holiday-preview-header {
      border-bottom: 1px solid var(--line);
    }

    .official-holiday-preview-header h2 {
      margin: 0;
      font-size: 20px;
    }

    .official-holiday-preview-header-actions {
      display: flex;
      align-items: stretch;
      gap: 10px;
    }

    .official-holiday-preview-source-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 9px;
      border: 1px solid #9bcac2;
      border-radius: 6px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
    }

    .official-holiday-preview-close {
      min-height: 32px;
      padding: 0 10px;
      font-size: 12px;
    }

    .official-holiday-preview-content {
      display: grid;
      gap: 14px;
      min-height: 0;
      padding: 16px 20px;
      overflow-y: auto;
    }

    .official-holiday-preview-source {
      padding: 13px 14px;
      border: 1px solid #b7d9d2;
      border-radius: 8px;
      background: var(--accent-soft);
    }

    .official-holiday-preview-source h3,
    .official-holiday-preview-comparison h3 {
      margin: 0;
      font-size: 15px;
    }

    .official-holiday-preview-source h3 {
      color: var(--accent);
    }

    .official-holiday-preview-source p {
      margin: 4px 0;
      color: var(--text);
    }

    .official-holiday-preview-source a {
      color: var(--accent);
      font-weight: 650;
      text-decoration: none;
    }

    .official-holiday-preview-source a:hover {
      text-decoration: underline;
    }

    .official-holiday-preview-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
      padding: 2px 0 14px;
    }

    .official-holiday-preview-summary > div {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      border-right: 1px solid var(--line);
    }

    .official-holiday-preview-summary > div:last-child {
      border-right: 0;
    }

    .official-holiday-preview-summary strong {
      color: var(--accent);
      font-size: 22px;
      line-height: 1.2;
    }

    .official-holiday-preview-table-wrap {
      max-height: 300px;
      overflow: auto;
      border-bottom: 1px solid var(--line);
    }

    .official-holiday-preview-table {
      min-width: 0;
    }

    .official-holiday-preview-table th:first-child,
    .official-holiday-preview-table td:first-child {
      width: 30%;
    }

    .official-holiday-preview-table th,
    .official-holiday-preview-table td {
      padding: 8px 10px;
    }

    .official-holiday-preview-adjusted {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 14px;
      padding: 10px 12px;
      border: 1px solid #b7d9d2;
      border-radius: 8px;
      background: var(--accent-soft);
    }

    .official-holiday-preview-adjusted strong {
      color: var(--accent);
    }

    .official-holiday-preview-comparison {
      display: grid;
      gap: 10px;
    }

    .official-holiday-preview-differences {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .official-holiday-preview-differences > div {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 5px;
      border-right: 1px solid var(--line);
    }

    .official-holiday-preview-differences > div:last-child {
      border-right: 0;
    }

    .official-holiday-preview-differences strong {
      font-size: 18px;
    }

    .official-holiday-preview-differences .added strong {
      color: var(--good);
    }

    .official-holiday-preview-differences .removed strong {
      color: var(--bad);
    }

    .official-holiday-preview-differences .unchanged strong {
      color: var(--muted);
    }

    .official-holiday-preview-warning {
      margin: 0;
      padding: 10px 12px;
      border: 1px solid #e6c481;
      border-radius: 8px;
      background: #fff8e8;
      color: var(--warn);
      font-weight: 650;
    }

    .official-holiday-preview-warning.has-impact {
      border-color: #efb4b4;
      background: #fff1f1;
      color: var(--bad);
    }

    .official-holiday-preview-footer {
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }

    .official-holiday-preview-footer .modal-actions {
      margin-top: 0;
    }

    .image-preview-box {
      margin: 12px 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--soft);
    }

    .image-preview-box img {
      display: block;
      width: 100%;
      max-height: 62vh;
      object-fit: contain;
      background: #ffffff;
    }

    .image-save-hint {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .original-image-viewer {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: flex;
      flex-direction: column;
      background: #0f172a;
    }

    .original-image-viewer.hidden {
      display: none;
    }

    .original-image-viewer img {
      -webkit-touch-callout: default;
      display: block;
      width: 100%;
      flex: 1;
      min-height: 0;
      object-fit: contain;
      background: #ffffff;
    }

    .admin-subpanel {
      margin: 8px 0 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .admin-subpanel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .pushplus-panel {
      box-sizing: border-box;
      margin-bottom: 14px;
      padding: 14px;
      background: var(--panel);
    }

    .pushplus-panel.collapsed .pushplus-panel-body {
      display: none;
    }

    .pushplus-panel.collapsed .pushplus-title-row {
      margin-bottom: 0;
    }

    .pushplus-panel-body {
      min-width: 0;
    }

    #pushPlusToggleButton {
      flex: 0 0 auto;
    }

    .pushplus-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding: 12px 14px;
    }

    .pushplus-title-row > div {
      min-width: 0;
    }

    .pushplus-title-main {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--text);
      font-size: 16px;
      font-weight: 750;
    }

    .pushplus-title-meta {
      display: flex;
      margin-top: 8px;
    }

    .pushplus-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 0 10px;
      background: #e6f6f3;
      color: var(--accent);
      font-size: 12px;
      font-weight: 750;
      max-width: min(100%, 420px);
      text-align: center;
      white-space: normal;
    }

    .pushplus-summary {
      margin: -2px 0 14px;
      color: var(--muted);
      line-height: 1.55;
    }

    .switch-field {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
    }

    .pushplus-inline-switch {
      justify-content: flex-start;
      min-height: 42px;
    }

    .staff-pushplus-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 260px;
    }

    .staff-pushplus-cell input[type="text"] {
      min-width: 0;
      flex: 1 1 auto;
    }

    .staff-pushplus-switch {
      flex: 0 0 auto;
      min-height: 34px;
    }

    .staff-pushplus-switch .switch-track {
      width: 46px;
      height: 26px;
    }

    .staff-pushplus-switch .switch-track::after {
      width: 18px;
      height: 18px;
    }

    .staff-pushplus-switch input:checked + .switch-track::after {
      transform: translateX(20px);
    }

    .pushplus-toggle-field {
      align-content: end;
    }

    .switch-field input,
    .pushplus-field .switch-field input {
      position: absolute;
      width: 1px;
      height: 1px;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .switch-track {
      position: relative;
      width: 56px;
      height: 30px;
      border-radius: 999px;
      background: #cbd5e1;
      transition: background 0.18s ease;
      flex: 0 0 auto;
    }

    .switch-track::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.20);
      transition: transform 0.18s ease;
    }

    .switch-field input:checked + .switch-track {
      background: var(--accent);
    }

    .switch-field input:checked + .switch-track::after {
      transform: translateX(26px);
    }

    .pushplus-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px 16px;
      align-items: end;
      margin-bottom: 14px;
    }

    .pushplus-field {
      display: grid;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .pushplus-field input,
    .pushplus-field select {
      width: 100%;
    }

    .pushplus-field-wide {
      grid-column: span 2;
    }

    .pushplus-task-grid {
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr);
    }

    .pushplus-time-action {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
    }

    .pushplus-time-action input {
      min-width: 0;
    }

    button.pushplus-send-button {
      min-width: 72px;
      height: auto;
      color: var(--accent);
      background: #ecf7f5;
      border: 1px solid var(--accent);
      border-radius: 8px;
      white-space: nowrap;
    }

    button.pushplus-send-button:hover:not(:disabled) {
      background: #d9efeb;
    }

    .pushplus-config-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pushplus-test {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .pushplus-test h3 {
      margin: 0 0 12px;
      font-size: 14px;
    }

    .pushplus-save-actions {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
    }

    .pushplus-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-bottom: 14px;
    }

    .pushplus-actions .pushplus-field {
      min-width: 260px;
    }

    .pushplus-manual {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .pushplus-manual-title {
      display: grid;
      gap: 3px;
      min-width: 0;
      color: var(--text);
      font-weight: 750;
    }

    .pushplus-manual-title span:last-child {
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }

    .pushplus-help {
      padding: 10px 12px;
      border: 1px solid #fde68a;
      border-radius: 8px;
      background: #fffbeb;
      color: var(--muted);
      line-height: 1.55;
    }

    .pushplus-help strong {
      color: #b45309;
      margin-right: 8px;
    }

    .reset-request-list {
      display: grid;
      gap: 8px;
    }

    .reset-request-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
    }

    .reset-request-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .swap-panel {
      margin-bottom: 14px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
      overflow: hidden;
    }

    .swap-panel-body {
      display: grid;
      gap: 10px;
      padding: 12px 14px;
      align-items: center;
    }

    #swapPanel .swap-panel-body {
      grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(180px, 1fr));
    }

    #compTimePanel .swap-panel-body {
      grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(200px, 0.8fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr);
    }

    .swap-panel .filters {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      align-items: center;
      min-width: 0;
    }

    .swap-panel select,
    .swap-panel input,
    .swap-panel button {
      width: 100%;
    }

    #swapRequestButton {
      grid-column: -2 / -1;
    }

    #downloadCompTimeButton {
      grid-column: auto;
    }

    .swap-list {
      grid-column: 1 / -1;
      line-height: 1.5;
    }

    .admin-panel {
      box-sizing: border-box;
      max-width: 100%;
      min-width: 0;
      margin-bottom: 14px;
      padding: 12px 14px;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .admin-panel.collapsed .admin-panel-body {
      display: none;
    }

    .admin-panel-body {
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      padding-top: 12px;
    }

    .admin-head-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .admin-form-row {
      display: grid;
      align-items: center;
      column-gap: 12px;
      row-gap: 10px;
      margin-bottom: 10px;
    }

    .admin-form-row .admin-field {
      display: contents;
      color: var(--muted);
      font-weight: 650;
    }

    .admin-form-row .admin-field > span {
      align-self: center;
      color: var(--muted);
      white-space: nowrap;
    }

    .admin-form-row select,
    .admin-form-row input,
    .admin-form-row button {
      width: 100%;
    }

    .admin-transfer-row {
      grid-template-columns: 88px 320px 88px 200px 88px 170px 150px;
      justify-content: start;
    }

    .date-picker { min-width: 0; }

    .date-picker-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      height: 36px;
      min-width: 0;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .date-picker-trigger:focus-visible,
    .date-picker-trigger[aria-expanded="true"] {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    .date-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
    .date-picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .date-picker-chevron {
      flex: 0 0 6px;
      height: 6px;
      margin: -3px 2px 0 0;
      border: solid var(--muted);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg);
    }

    .date-picker-popup {
      --date-picker-columns: 16px 88px 38px 74px 64px;
      position: fixed;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      width: 366px;
      max-width: calc(100vw - 16px);
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      box-shadow: 0 6px 20px #1f293724;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
    }

    .date-picker-popup[hidden] { display: none; }
    .date-picker-anchor {
      --date-picker-columns: 16px 88px 38px 74px;
      width: 286px;
    }
    .date-picker-person-first { --date-picker-columns: 16px 64px 88px 38px 74px; }
    .swap-summary { grid-column: 1 / -1; color: var(--accent); }

    .date-picker-row {
      display: grid;
      grid-template-columns: var(--date-picker-columns);
      align-items: center;
      column-gap: 10px;
      min-height: 30px;
      padding: 4px 8px;
      white-space: nowrap;
    }

    .date-picker-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .date-picker-heading {
      flex: none;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .date-picker-list {
      min-height: 0;
      max-height: 300px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    .date-picker-option { cursor: pointer; border-radius: 4px; }
    .date-picker-option + .date-picker-option { border-top: 1px solid #edf0f4; }
    .date-picker-option[aria-selected="true"] { background: var(--accent-soft); }
    .date-picker-option:hover,
    .date-picker-option.active { background: var(--accent-soft); outline: 1px solid #0f766e40; outline-offset: -1px; }
    .date-picker-check { color: var(--accent); visibility: hidden; }
    .date-picker-option[aria-selected="true"] .date-picker-check { visibility: visible; }
    .date-picker-date { font-variant-numeric: tabular-nums; }
    .date-picker-three { display: inline-grid; grid-template-columns: repeat(3, 1em); }
    .date-picker-three > span { text-align: center; }

    @media (max-width: 900px) {
      /* This desktop-only section must not leave a detached popup on mobile. */
      #departmentSchedulePanel, .date-picker-popup:not(.date-picker-mobile) { display: none !important; }
      .date-picker-mobile.date-picker-person-first { --date-picker-columns: 14px 42px 84px 28px 1fr; }
      .date-picker-mobile.date-picker-anchor { --date-picker-columns: 14px 84px 28px 1fr; }
      .date-picker-mobile .date-picker-row { column-gap: 6px; padding-inline: 6px; min-height: 40px; }
      .date-picker-mobile .date-picker-heading { min-height: 28px; }
    }

    .admin-transfer-row button {
      grid-column: 7;
    }

    .admin-generate-row {
      grid-template-columns: 88px 320px 88px 200px 88px 170px 150px;
    }

    .admin-adjust-row {
      grid-template-columns: 88px 320px 88px 200px 88px 170px 150px;
    }

    .staff-table input[type="text"] {
      width: 150px;
    }

    .staff-table input[type="checkbox"] {
      height: auto;
    }

    .swap-list {
      grid-column: 1 / -1;
      color: var(--muted);
    }

    .swap-list ul {
      display: grid;
      gap: 8px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .swap-list li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      color: var(--text);
      background: #fafafa;
    }

    .comp-time-request-row {
      flex-wrap: nowrap;
    }

    .comp-time-request-text {
      flex: 1 1 auto;
      min-width: 0;
    }

    #compTimeList .comp-time-cancel-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: auto;
      min-width: 72px;
      padding-inline: 14px;
    }

    input {
      height: 36px;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 6px;
      padding: 0 10px;
      font: inherit;
      color: var(--text);
    }

    .draw-result {
      grid-column: 1 / -1;
      color: var(--muted);
    }

    .draw-result ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .draw-result li {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 9px;
      color: var(--text);
      background: #fafafa;
    }

    #myNightPanel.hidden { display: none; }

    #myNightTitle {
      color: var(--text);
      font-size: var(--section-title-size, 15px);
      font-weight: 600;
    }

    .personal-night-panel ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .personal-night-panel li {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 9px;
      color: var(--text);
      background: #fafafa;
      white-space: nowrap;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
    }

    .my-overview-panel {
      margin-bottom: 14px;
      border-radius: 10px;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .my-overview-count {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    .my-overview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 14px;
    }

    .my-duty-card {
      display: grid;
      align-content: start;
      gap: 8px;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfd;
    }

    .my-duty-card.next {
      border-color: #b7d9d2;
      background: #f3fbf9;
    }

    .my-duty-card-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .my-duty-date {
      color: #111827;
      font-size: 21px;
      font-weight: 800;
      line-height: 1.2;
    }

    .my-duty-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .my-duty-detail {
      min-height: 20px;
      color: #475569;
      font-size: 13px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .my-duty-empty {
      color: var(--muted);
    }

    .table-wrap {
      overflow: auto;
      max-height: calc(100vh - 180px);
    }

    /* Personnel lists grow with the page; only wide tables scroll sideways. */
    #adminPanel .table-wrap {
      max-height: none;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .calendar-wrap {
      padding: 14px;
      max-height: none;
      overflow: visible;
    }

    .calendar-month {
      margin-bottom: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
    }

    .calendar-month:last-child {
      margin-bottom: 0;
    }

    .calendar-month-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      background: #f9fafb;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .calendar-month-count {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(112px, 1fr));
      min-width: 820px;
    }

    .calendar-weekday {
      padding: 8px 10px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #ffffff;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .calendar-weekday:nth-child(7n) {
      border-right: 0;
    }

    .calendar-day {
      min-height: 118px;
      padding: 8px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #ffffff;
    }

    .calendar-day:nth-child(7n) {
      border-right: 0;
    }

    .calendar-day.is-empty {
      background: #f8fafc;
    }

    .calendar-day.is-weekend {
      background: #f8fbff;
    }

    .calendar-day.has-holiday {
      background: #fff8f1;
    }

    .calendar-day.has-weekday {
      background: #f7fbfa;
    }

    .calendar-date {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      color: var(--text);
      font-weight: 700;
    }

    .calendar-date-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #eef2f7;
    }

    .calendar-date-week {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .calendar-duty-list {
      display: grid;
      gap: 6px;
    }

    .calendar-duty {
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .calendar-duty.holiday {
      border-color: #f3c38b;
      background: #fffaf3;
    }

    .calendar-duty.weekend {
      border-color: #b9d8ff;
      background: #f5f9ff;
    }

    .calendar-duty.weekday {
      border-color: #a7d7c8;
      background: #f3fbf8;
    }

    .calendar-duty-person {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      font-weight: 700;
    }

    .calendar-avatar {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
    }

    .calendar-duty-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 5px;
    }

    .calendar-tag {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      border-radius: 999px;
      padding: 1px 7px;
      font-size: 12px;
      font-weight: 650;
      background: #eef2f7;
      color: #475569;
    }

    .calendar-tag.holiday {
      background: #ffedd5;
      color: #9a3412;
    }

    .calendar-tag.weekend {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .calendar-tag.weekday {
      background: #ccfbf1;
      color: #0f766e;
    }

    .calendar-substitute {
      display: grid;
      gap: 4px;
      margin-top: 6px;
      color: #475569;
      font-size: 12px;
    }

    .calendar-substitute-group-title {
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
    }

    .calendar-substitute-select {
      width: 100%;
      height: 30px;
      padding: 0 7px;
      font-size: 12px;
      background: #ffffff;
    }

    .calendar-substitute-control {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .calendar-substitute-select-row {
      display: block;
      min-width: 0;
    }

    .calendar-substitute-call {
      display: none;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #ffffff;
      font-size: 12px;
      font-weight: 750;
      text-decoration: none;
      white-space: nowrap;
    }

    .calendar-substitute-call.disabled {
      border-color: #cbd5e1;
      background: #e5e7eb;
      color: #94a3b8;
      pointer-events: none;
    }

    .calendar-substitute-text {
      display: grid;
      gap: 1px;
      min-width: 0;
      line-height: 1.35;
    }

    .calendar-substitute-phone {
      color: #64748b;
      overflow-wrap: anywhere;
    }

    .calendar-substitute-phone-row {
      display: block;
      min-width: 0;
    }

    .calendar-call-link {
      display: none;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--accent);
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
    }

    .calendar-note {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      white-space: normal;
    }

    .schedule-note-panel {
      display: grid;
      gap: 8px;
      padding: 12px 14px 14px;
      border-top: 1px solid var(--line);
      background: #fbfcfd;
    }

    .schedule-night-panel {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 12px 14px;
      border-top: 1px solid var(--line);
      background: #fbfcfd;
    }

    .schedule-night-label {
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
    }

    .schedule-night-editor {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      min-width: 0;
    }

    .schedule-night-summary {
      margin: 0;
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--text);
      font-size: 15px;
      line-height: 1.6;
    }

    .is-night-admin .schedule-night-summary { display: none; }

    .schedule-night-panel select {
      min-width: 180px;
    }

    .schedule-note-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .schedule-note-panel textarea {
      width: 100%;
      min-height: 74px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      color: var(--text);
      background: var(--panel);
      font: inherit;
    }

    .schedule-note-panel textarea:disabled {
      color: var(--muted);
      background: #f8fafc;
    }

    .schedule-note-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    #saveScheduleNoteButton {
      font-size: 14px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 860px;
    }

    th,
    td {
      border-bottom: 1px solid var(--line);
      padding: 9px 10px;
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f9fafb;
      color: #374151;
      font-weight: 650;
    }

    tr:hover td {
      background: #fafafa;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border-radius: 999px;
      padding: 2px 8px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 600;
    }

    .status-ok {
      color: var(--good);
      font-weight: 650;
    }

    .status-wait {
      color: var(--warn);
      font-weight: 650;
    }

    .status-bad {
      color: var(--bad);
      font-weight: 650;
    }

    .empty {
      padding: 34px 16px;
      color: var(--muted);
      text-align: center;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 720px) {
      header,
      main {
        padding-left: 14px;
        padding-right: 14px;
      }

      .app-version {
        padding: 0 16px 14px;
        font-size: 11px;
      }

      .header-inner {
        align-items: flex-start;
        flex-direction: column;
      }

      .toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .login-panel {
        grid-template-columns: 1fr;
      }

      body:not(.signed-out) .login-panel,
      body:not(.signed-out) .login-year-group {
        grid-template-columns: 1fr;
      }

      body:not(.signed-out) .official-primary-row,
      body:not(.signed-out) .official-manual-row {
        grid-template-columns: 1fr;
      }

      body:not(.signed-out) .login-action-group {
        flex-wrap: wrap;
        justify-content: flex-start;
      }

      body:not(.signed-out) .login-group {
        min-height: 0;
      }

      body:not(.signed-out) .login-year-group .filters,
      body:not(.signed-out) .login-account-group .filters {
        width: 100%;
      }

      .login-action-group {
        justify-content: flex-start;
      }

      .swap-panel-body {
        grid-template-columns: 1fr !important;
      }

      #downloadCompTimeButton {
        grid-column: 1;
      }

      .admin-actions {
        flex-direction: column;
      }

      .admin-form-row {
        grid-template-columns: 1fr;
        padding-left: 0;
      }

      .calendar-wrap {
        padding: 10px;
      }

      .calendar-grid {
        grid-template-columns: repeat(7, minmax(88px, 1fr));
        min-width: 680px;
      }

      .calendar-day {
        min-height: 106px;
      }

      .tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
      }

      .tab {
        min-width: 0;
      }
    }

    @media (max-width: 900px) {
      body {
        font-size: 15px;
        background: #f7fafc;
        overflow-x: hidden;
      }

      body.signed-out {
        background:
          linear-gradient(180deg, rgba(239, 247, 248, 0.92), rgba(247, 250, 252, 0.98)),
          url("/static/login-medical-equipment.a8f38ca627c67671.webp?v=a8f38ca627c67671") center / cover no-repeat fixed;
      }

      header {
        padding: 14px 14px 10px;
      }

      body.signed-out header {
        padding-top: 20px;
      }

      .header-inner {
        gap: 8px;
      }

      h1,
      body.signed-out h1 {
        font-size: clamp(24px, 7vw, 32px);
        line-height: 1.18;
      }

      body.signed-out h1::before {
        height: 30px;
      }

      main,
      body.signed-out main {
        display: block;
        min-height: auto;
        padding: 12px 12px 24px;
      }

      .login-panel,
      body:not(.signed-out) .login-panel,
      .login-panel.signed-out {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
      }

      .login-panel.signed-out {
        margin: 8px auto 0;
        padding: 22px;
        border-radius: 14px;
      }

      body:not(.signed-out) .login-year-group,
      body:not(.signed-out) .login-account-panel {
        min-height: 0;
        padding: 12px;
        border-radius: 10px;
      }

      body:not(.signed-out) .login-year-group,
      body:not(.signed-out):not(.is-admin) .login-year-group {
        grid-template-rows: auto;
        height: auto;
        overflow: hidden;
      }

      .login-group,
      body:not(.signed-out) .login-year-group,
      body:not(.signed-out) .login-account-panel,
      body:not(.signed-out) .official-data-actions,
      body:not(.signed-out) .official-primary-row,
      body:not(.signed-out) .official-manual-row,
      body:not(.signed-out) .login-action-group,
      .toolbar,
      .toolbar > .filters,
      .admin-panel,
      .admin-form-row,
      .admin-form-row .admin-field,
      .swap-panel,
      .swap-panel-body,
      .swap-panel .filters,
      .panel,
      .calendar-wrap,
      .calendar-month,
      .calendar-duty-list,
      .calendar-duty {
        max-width: 100%;
        min-width: 0;
      }

      body:not(.signed-out) .official-primary-row,
      body:not(.signed-out) .official-manual-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      body:not(.signed-out):not(.is-admin) .official-primary-row,
      body:not(.signed-out):not(.is-admin) .login-action-group {
        min-height: 42px;
      }

      body:not(.signed-out) .login-year-group .filters,
      body:not(.signed-out) .official-primary-row,
      body:not(.signed-out) .official-manual-row {
        width: 100%;
      }

      body:not(.signed-out) .login-year-group select,
      body:not(.signed-out) .official-primary-row select,
      body:not(.signed-out) .official-primary-row button,
      body:not(.signed-out) .official-manual-row button,
      body:not(.signed-out) #drawButton,
      #yearSelect {
        height: 42px;
        min-height: 42px;
        line-height: 42px;
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      body:not(.signed-out) .official-field-label {
        grid-column: 1 / -1;
      }

      body:not(.signed-out):not(.is-admin) .official-field-label {
        display: none;
      }

      body:not(.signed-out):not(.is-admin) .official-primary-row {
        grid-template-columns: minmax(170px, 1.45fr) minmax(112px, 0.85fr);
      }

      body:not(.signed-out) .official-manual-row span {
        display: none;
      }

      body:not(.signed-out) .login-action-group {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      body:not(.signed-out) #logoutButton {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 42px;
        line-height: 42px;
        padding-top: 0;
        padding-bottom: 0;
      }

      body:not(.signed-out):not(.is-admin) .login-panel,
      body:not(.signed-out):not(.is-admin) .login-account-panel {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      body:not(.signed-out):not(.is-admin) .official-primary-row,
      body:not(.signed-out):not(.is-admin) .login-action-group {
        height: auto;
      }

      body:not(.signed-out) .draw-result-row {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 14px;
        border-radius: 10px;
      }

      .draw-result ul {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }

      .draw-result li {
        max-width: 100%;
        overflow-wrap: anywhere;
        border-radius: 8px;
        padding: 7px 10px;
      }

      .toolbar {
        padding: 10px;
        border: 1px solid var(--line);
        border-top: 0;
        border-radius: 0 0 12px 12px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: none;
      }

      .schedule-tools-body {
        gap: 10px;
      }

      .schedule-filter-toolbar,
      .schedule-filter-top-row,
      .schedule-filter-fields,
      .schedule-content-filter,
      .schedule-download-actions {
        width: 100%;
        min-width: 0;
      }

      .schedule-filter-top-row,
      .schedule-content-filter,
      .schedule-filter-fields {
        align-items: stretch;
        flex-direction: column;
      }

      .schedule-filter-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        border: 0;
        border-radius: 0;
      }

      .schedule-content-filter .tabs {
        width: 100%;
      }

      .schedule-download-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: 0;
      }

      .schedule-download-actions button {
        width: 100%;
      }

      .compact-tabs .tab {
        width: auto;
        min-width: 0;
      }

      .tabs.compact-tabs {
        width: 100%;
      }

      .schedule-filter-fields {
        display: flex;
      }

      #monthFilter,
      #scheduleTypeFilter,
      #holidayNameFilter,
      #personFilter,
      .schedule-download-actions {
        grid-column: auto;
      }

      .active-filter-summary {
        margin: 0 10px 10px;
      }

      .mobile-collapse {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        overflow: hidden;
      }

      .mobile-collapse-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 0 14px;
        color: var(--text);
        font-weight: 750;
        list-style: none;
        cursor: pointer;
      }

      .mobile-collapse-summary::-webkit-details-marker {
        display: none;
      }

      .mobile-collapse-summary::after {
        content: "展开";
        color: var(--muted);
        font-size: 13px;
        font-weight: 650;
      }

      .mobile-collapse[open] > .mobile-collapse-summary {
        border-bottom: 1px solid var(--line);
      }

      .mobile-collapse[open] > .mobile-collapse-summary::after {
        content: "收起";
      }

      .toolbar-collapse {
        background: transparent;
      }

      .toolbar-collapse[open] > .schedule-tools-body {
        padding-top: 10px;
      }

      .tabs {
        border-radius: 10px;
      }

      .tab {
        padding: 10px 6px;
        font-size: 14px;
      }

      .toolbar > .filters {
        display: grid;
        grid-template-columns: 76px 1fr;
        width: 100%;
      }

      .schedule-filter-fields > .filters {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        width: 100%;
      }

      .schedule-filter-fields > .filters.hidden {
        display: none;
      }

      .toolbar > button {
        width: 100%;
      }

      .pushplus-title-row {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
      }

      .pushplus-panel {
        padding: 10px;
      }

      #pushPlusToggleButton {
        align-self: flex-end;
      }

      .pushplus-grid,
      .pushplus-actions,
      .pushplus-manual {
        grid-template-columns: 1fr;
      }

      .pushplus-field-wide {
        grid-column: auto;
      }

      .pushplus-actions .pushplus-field {
        min-width: 0;
      }

      .pushplus-actions button,
      .pushplus-manual button {
        width: 100%;
      }

      .filters,
      .swap-panel .filters {
        align-items: stretch;
      }

      select,
      input,
      button.primary,
      button.secondary {
        min-height: 42px;
        height: 42px;
        border-radius: 9px;
      }

      select,
      input,
      input[type="date"],
      button {
        max-width: 100%;
        min-width: 0;
      }

      /* Prevent iOS Safari from retaining its sub-16px focus zoom after login. */
      input,
      select,
      textarea {
        font-size: 16px !important;
      }

      .admin-panel,
      .swap-panel,
      .my-overview-panel,
      .panel {
        border-radius: 12px;
      }

      .my-overview-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
      }

      .my-duty-card {
        border-radius: 10px;
        padding: 12px;
      }

      .my-duty-date {
        font-size: 19px;
      }

      .admin-panel {
        padding: 10px;
      }

      .mobile-managed-collapse {
        display: block;
        margin-bottom: 12px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        overflow: hidden;
      }

      .mobile-managed-collapse.hidden {
        display: none;
      }

      #pushPlusPanel,
      #departmentSchedulePanel,
      #adminPanel {
        display: none !important;
      }


      .panel-head {
        align-items: flex-start;
        padding: 12px;
      }

      .mobile-managed-summary {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 0 14px;
        border-bottom: 0;
        color: var(--text);
        cursor: pointer;
      }

      .mobile-managed-collapse:not(.collapsed) > .mobile-managed-summary {
        border-bottom: 1px solid var(--line);
      }

      .mobile-managed-collapse .admin-panel-body,
      .mobile-managed-collapse .pushplus-panel-body {
        padding: 12px;
      }

      .mobile-managed-toggle {
        flex: 0 0 auto;
        align-self: center;
        height: auto;
        min-width: auto;
        border: 0;
        background: transparent;
        color: var(--muted);
        padding: 0;
        font-size: 13px;
        font-weight: 650;
      }

      button.mobile-managed-toggle,
      #pushPlusToggleButton.mobile-managed-toggle,
      #adminToggleButton.mobile-managed-toggle {
        align-self: center;
        height: auto;
        min-height: auto;
        min-width: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        padding: 0;
      }

      .pushplus-title-row.mobile-managed-summary {
        flex-direction: row;
        margin-bottom: 0;
      }

      .admin-head-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .admin-actions,
      .admin-form-row,
      .admin-transfer-row,
      .admin-generate-row,
      .admin-adjust-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .admin-form-row .admin-field {
        display: grid;
        grid-template-columns: 86px 1fr;
        align-items: center;
        gap: 10px;
      }

      .admin-transfer-row button,
      .admin-form-row button {
        grid-column: auto;
      }

      .admin-subpanel {
        padding: 12px;
        border-radius: 10px;
      }

      .reset-request-item,
      .swap-list li {
        align-items: stretch;
        flex-direction: column;
      }

      #compTimeList .comp-time-request-row {
        align-items: stretch;
        flex-direction: column;
      }

      #compTimeList .comp-time-cancel-button {
        display: inline-flex;
        align-self: flex-end;
        width: auto;
      }

      .table-wrap {
        max-height: none;
        border: 1px solid var(--line);
        border-radius: 10px;
      }

      table {
        min-width: 720px;
      }

      .staff-table input[type="text"] {
        width: 120px;
      }

      .swap-panel {
        padding: 0;
        overflow: hidden;
      }

      .swap-panel[open] {
        padding-bottom: 0;
      }

      .swap-panel-body {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px;
      }

      .swap-panel > .mobile-collapse-summary + .swap-panel-body {
        padding-top: 12px;
      }

      .swap-panel .filters {
        grid-template-columns: 68px minmax(0, 1fr);
        width: 100%;
        overflow: hidden;
      }

      .swap-panel select,
      .swap-panel input,
      .swap-panel button,
      #compAnchorDateInput,
      #compLeaveDateInput {
        box-sizing: border-box;
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      #compTimePanel .filters {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        width: 100%;
      }

      #compTimePanel input[type="date"] {
        display: block;
        box-sizing: border-box;
        height: 42px;
        inline-size: 100%;
        line-height: 42px;
        max-inline-size: 100%;
        min-inline-size: 0;
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
        -webkit-appearance: none;
        appearance: none;
      }

      #compTimePanel input[type="date"]::-webkit-date-and-time-value {
        min-height: 42px;
        line-height: 42px;
        text-align: left;
      }

      #swapRequestButton,
      #downloadCompTimeButton {
        grid-column: auto;
      }

      .calendar-wrap {
        overflow: visible;
        max-height: none;
        padding: 10px;
      }

      .calendar-month {
        overflow: visible;
        border-radius: 12px;
      }

      .calendar-month-title {
        position: static;
      }

      .calendar-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
      }

      .calendar-weekday {
        display: none !important;
      }

      .calendar-day {
        display: none !important;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px;
        border-right: 0;
      }

      .calendar-day.is-weekend,
      .calendar-day.has-holiday,
      .calendar-day.has-weekday {
        display: grid !important;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
      }

      .calendar-day.is-empty {
        display: none !important;
      }

      .calendar-date {
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        margin-bottom: 0;
        padding-top: 2px;
      }

      .calendar-date-number {
        width: 34px;
        height: 34px;
        font-size: 15px;
      }

      .calendar-date-week {
        display: block;
        font-size: 12px;
      }

      .calendar-duty {
        padding: 8px;
        border-radius: 9px;
      }

      .calendar-duty-person {
        align-items: center;
        flex-direction: row;
        gap: 6px;
        font-size: 14px;
      }

      .calendar-avatar {
        width: 20px;
        height: 20px;
        font-size: 11px;
      }

      .calendar-duty-meta {
        gap: 4px;
      }

      .calendar-tag {
        min-height: 18px;
        padding: 1px 5px;
        font-size: 11px;
      }

      .calendar-substitute-select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 34px;
      }

      .calendar-substitute-control {
        display: grid;
        gap: 4px;
      }

      .calendar-substitute-select-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .calendar-substitute-call {
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 34px;
      }

      .calendar-call-link {
        display: inline-flex;
        flex: 0 0 auto;
      }

      .calendar-substitute-phone-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .calendar-substitute-phone-row .calendar-substitute-phone {
        flex: 1 1 auto;
        min-width: 0;
      }

      .schedule-note-panel {
        padding: 12px;
      }

      .schedule-night-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
      }

      .schedule-night-panel select {
        width: 100%;
      }

      .schedule-note-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .schedule-note-actions button {
        width: 100%;
      }

      #saveScheduleNoteButton {
        font-size: 15px;
      }

      .modal-backdrop {
        align-items: flex-end;
        padding: 12px;
      }

      .modal {
        border-radius: 14px;
      }

      .modal-actions {
        flex-direction: column-reverse;
      }

      .modal-actions button,
      .modal-actions a.secondary {
        width: 100%;
      }

      .official-holiday-preview-modal {
        max-height: calc(100vh - 24px);
      }

      .official-holiday-preview-header,
      .official-holiday-preview-footer {
        align-items: stretch;
        padding: 14px;
      }

      .official-holiday-preview-header {
        align-items: center;
      }

      .official-holiday-preview-content {
        gap: 12px;
        padding: 14px;
      }

      .official-holiday-preview-summary span {
        display: block;
        font-size: 11px;
      }

      .official-holiday-preview-summary > div {
        display: block;
        text-align: center;
      }

      .official-holiday-preview-table th,
      .official-holiday-preview-table td {
        white-space: normal;
      }

      .official-holiday-preview-table-wrap {
        max-height: none;
        overflow: visible;
      }

      .official-holiday-preview-adjusted {
        grid-template-columns: 1fr;
        gap: 4px;
      }

      .official-holiday-preview-footer {
        flex-direction: column;
      }

    .modal-actions a.secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      font-weight: 650;
      text-decoration: none;
    }
    }

    @media (max-width: 900px) {
      body {
        color-scheme: light;
        --bg: #f2f4f8;
        --panel: rgba(255, 255, 255, 0.64);
        --line: rgba(60, 80, 110, 0.12);
        --text: #1c1c1e;
        --muted: #687385;
        --accent: #007aff;
        --accent-soft: rgba(0, 122, 255, 0.15);
        --warn: #946000;
        --bad: #c73838;
        --good: #16805d;
        --soft: rgba(255, 255, 255, 0.72);
        --danger: #c73838;
        --glass-surface: rgba(255, 255, 255, 0.64);
        --glass-elevated: rgba(255, 255, 255, 0.72);
        --glass-card: rgba(255, 255, 255, 0.78);
        --glass-border: rgba(255, 255, 255, 0.86);
        --glass-border-soft: rgba(60, 80, 110, 0.06);
        --glass-shadow: 0 6px 24px rgba(54, 77, 112, 0.04);
        background-color: #f2f4f8;
        background-image: url("/static/silver-glass-atmosphere.c01d0ab2d9c40ec9.webp?v=c01d0ab2d9c40ec9");
        background-position: right top;
        background-repeat: repeat-y;
        background-size: 100% auto;
        background-attachment: fixed;
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
      }

      body.signed-out {
        background-color: #f2f4f8 !important;
        background-image: url("/static/silver-glass-atmosphere.c01d0ab2d9c40ec9.webp?v=c01d0ab2d9c40ec9") !important;
        background-position: right top !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
        background-attachment: fixed !important;
      }

      header,
      body.signed-out header {
        border-bottom-color: var(--glass-border-soft);
        background: rgba(245, 248, 252, 0.5);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      h1,
      body.signed-out h1 {
        color: #1c1c1e;
      }

      body.signed-out h1::before {
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(60, 80, 110, 0.06);
      }

      .meta,
      .app-version,
      .filters,
      .draw-result,
      .swap-list,
      .schedule-note-actions,
      .image-save-hint {
        color: var(--muted);
      }

      .login-panel,
      .login-panel.signed-out,
      .login-group,
      body:not(.signed-out) .login-group,
      body:not(.signed-out) .login-year-group,
      body:not(.signed-out) .login-account-panel,
      body:not(.signed-out) .draw-result-row,
      .panel,
      .swap-panel,
      .admin-panel,
      .pushplus-panel,
      .mobile-managed-collapse,
      .mobile-collapse,
      .modal,
      .admin-subpanel,
      .reset-request-item {
        border-color: var(--glass-border);
        background: var(--glass-surface);
        box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      .login-group,
      body:not(.signed-out) .login-group,
      body:not(.signed-out) .login-year-group,
      body:not(.signed-out) .login-account-panel,
      body:not(.signed-out) .draw-result-row,
      .admin-subpanel,
      .reset-request-item {
        background: var(--glass-elevated);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .login-panel.signed-out {
        background: var(--glass-surface);
        border-color: var(--glass-border);
        box-shadow: 0 12px 40px rgba(54, 77, 112, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      .login-panel.signed-out .login-group,
      .login-panel.signed-out .login-account-panel,
      .login-panel.signed-out .login-action-group,
      body:not(.signed-out) .login-action-group {
        background: transparent;
      }

      .login-group-title,
      .current-account-display,
      body:not(.signed-out) .current-account-display,
      body:not(.signed-out) .login-year-group .login-group-title,
      body:not(.signed-out) .login-year-group .filters,
      body:not(.signed-out) .official-field-label,
      .keep-signed-in,
      .login-panel.signed-out .login-helper-links,
      .login-panel.signed-out .login-link {
        color: var(--muted);
      }

      .login-panel.signed-out .login-link:hover,
      .login-panel.signed-out .login-link:focus-visible {
        color: var(--accent);
      }

      select,
      input,
      textarea,
      .login-group select,
      .login-group input,
      .calendar-substitute-select,
      .schedule-note-panel textarea,
      .schedule-note-panel textarea:disabled {
        border-color: rgba(60, 80, 110, 0.12);
        background: var(--glass-elevated);
        color: #1c1c1e;
      }

      select:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      button:focus-visible,
      a:focus-visible,
      summary:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      input::placeholder,
      textarea::placeholder {
        color: #778292;
      }

      input[type="checkbox"],
      input[type="radio"] {
        accent-color: var(--accent);
      }

      input[type="date"]::-webkit-calendar-picker-indicator {
        filter: none;
      }

      button.primary,
      body:not(.signed-out) #drawButton:not(.drawn),
      .tab.active {
        border-color: var(--accent);
        background: var(--accent);
        color: #ffffff;
      }

      button.primary:hover,
      body:not(.signed-out) #drawButton:not(.drawn):hover,
      .tab.active:hover {
        background: #0068db;
      }

      button.secondary,
      a.secondary,
      .modal-actions a.secondary {
        border-color: rgba(60, 80, 110, 0.12);
        background: var(--glass-elevated);
        color: var(--muted);
      }

      button.secondary:hover,
      a.secondary:hover,
      .modal-actions a.secondary:hover {
        border-color: rgba(0, 122, 255, 0.25);
        background: rgba(255, 255, 255, 0.94);
        color: var(--accent);
      }

      button.primary:disabled,
      button.secondary:disabled,
      input:disabled,
      select:disabled,
      textarea:disabled {
        opacity: 0.5;
      }

      body:not(.signed-out) #drawButton.drawn {
        background: rgba(60, 80, 110, 0.08);
        color: var(--muted);
      }

      .password-toggle {
        color: var(--muted);
      }

      .password-toggle:hover {
        background: rgba(60, 80, 110, 0.06);
        color: var(--accent);
      }

      .draw-result-row,
      body:not(.signed-out) .draw-result-row,
      .draw-result li,
      .swap-list li {
        border-color: rgba(60, 80, 110, 0.08);
        background: var(--glass-elevated);
        color: var(--text);
      }

      .tabs {
        border-color: var(--glass-border-soft);
        background: rgba(118, 128, 148, 0.10);
      }

      .tab {
        border-color: var(--glass-border-soft);
        background: transparent;
        color: var(--muted);
      }

      .tab:not(.active):hover {
        background: rgba(60, 80, 110, 0.06);
        color: var(--accent);
      }

      .toolbar,
      .toolbar.schedule-filter-toolbar {
        border-color: var(--glass-border);
        background: var(--glass-surface);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      .active-filter-summary {
        border-left-color: var(--accent);
        background: var(--glass-elevated);
        color: var(--muted);
      }

      .mobile-collapse-summary,
      .mobile-managed-summary,
      .panel-head {
        border-color: var(--line);
        color: var(--text);
      }

      .mobile-collapse-summary::after,
      .mobile-managed-toggle,
      button.mobile-managed-toggle,
      #pushPlusToggleButton.mobile-managed-toggle,
      #adminToggleButton.mobile-managed-toggle {
        color: var(--muted);
      }

      .my-overview-panel {
        box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .my-duty-card,
      .my-duty-card.next {
        border-color: rgba(60, 80, 110, 0.12);
        background: var(--glass-card);
      }

      .my-duty-card.next {
        border-color: rgba(0, 122, 255, 0.24);
        background: rgba(231, 241, 255, 0.76);
      }

      .my-duty-date {
        color: #1c1c1e;
      }

      .my-duty-detail {
        color: var(--muted);
      }

      .calendar-month {
        border-color: var(--glass-border);
        background: var(--glass-surface);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }

      .calendar-month-title,
      .calendar-weekday,
      .calendar-day,
      .calendar-day.is-empty,
      .calendar-day.is-weekend,
      .calendar-day.has-holiday,
      .calendar-day.has-weekday {
        border-color: var(--glass-border-soft);
        background: var(--glass-elevated);
        color: var(--text);
      }

      .calendar-day.is-empty {
        background: rgba(245, 248, 252, 0.55);
      }

      .calendar-date-number,
      .calendar-avatar {
        background: rgba(60, 80, 110, 0.06);
        color: #1c1c1e;
      }

      .calendar-duty,
      .calendar-duty.holiday,
      .calendar-duty.weekend,
      .calendar-duty.weekday {
        border-color: rgba(60, 80, 110, 0.08);
        background: var(--glass-card);
      }

      .calendar-tag {
        background: rgba(60, 80, 110, 0.06);
        color: var(--muted);
      }

      .calendar-tag.weekend {
        background: rgba(0, 122, 255, 0.15);
        color: #007aff;
      }

      .calendar-tag.weekday {
        background: rgba(22, 128, 93, 0.15);
        color: #16805d;
      }

      .calendar-tag.holiday {
        background: rgba(194, 130, 0, 0.15);
        color: #946000;
      }

      .calendar-substitute,
      .calendar-substitute-phone,
      .calendar-substitute-group-title {
        color: var(--muted);
      }

      .calendar-substitute-call,
      .calendar-call-link {
        border-color: var(--accent);
        background: var(--accent);
        color: #ffffff;
      }

      .calendar-substitute-call.disabled {
        border-color: rgba(60, 80, 110, 0.10);
        background: rgba(60, 80, 110, 0.06);
        color: var(--muted);
      }

      .schedule-note-panel,
      .schedule-night-panel {
        border-color: var(--glass-border-soft);
        background: var(--glass-elevated);
      }

      .table-wrap {
        border-color: var(--line);
      }

      th {
        background: var(--glass-elevated);
        color: var(--muted);
      }

      th,
      td {
        border-color: var(--line);
      }

      tr:hover td {
        background: rgba(0, 122, 255, 0.04);
      }

      .pushplus-status-pill,
      .pill {
        background: rgba(60, 80, 110, 0.06);
        color: var(--muted);
      }

      .pushplus-manual,
      .pushplus-help {
        border-color: var(--glass-border-soft);
        background: var(--glass-card);
        color: var(--muted);
      }

      .pushplus-help strong {
        color: #946000;
      }

      .switch-track {
        background: rgba(60, 80, 110, 0.12);
      }

      .switch-track::after {
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      }

      .switch-field input:checked + .switch-track {
        background: #007aff;
      }

      .modal-backdrop {
        background: rgba(32, 44, 62, 0.28);
      }

      .official-holiday-preview-source,
      .official-holiday-preview-adjusted {
        border-color: rgba(0, 122, 255, 0.22);
        background: rgba(0, 122, 255, 0.08);
      }

      .official-holiday-preview-source-badge {
        border-color: rgba(0, 122, 255, 0.35);
      }

      .official-holiday-preview-warning {
        border-color: rgba(194, 130, 0, 0.28);
        background: rgba(194, 130, 0, 0.09);
        color: #946000;
      }

      .official-holiday-preview-warning.has-impact {
        border-color: rgba(199, 56, 56, 0.3);
        background: rgba(199, 56, 56, 0.09);
        color: #c73838;
      }

      .image-preview-box {
        border-color: var(--glass-border);
        background: rgba(245, 248, 252, 0.95);
      }

      .status-ok {
        color: #16805d;
      }

      .status-wait {
        color: #946000;
      }

      .status-bad,
      .modal-message {
        color: #c73838;
      }
    }
    .system-update-panel {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      margin: 12px 0 0;
      padding: 16px;
    }
    .system-update-panel.hidden { display: none; }
    .system-update-title { margin: 0; padding-right: 24px; border-right: 1px solid var(--line); font-size: 17px; font-weight: 700; line-height: 44px; white-space: nowrap; }
    .system-update-body { min-width: 0; }
    .system-update-body p { margin: 0; overflow-wrap: anywhere; }
    #systemUpdateStatus { font-weight: 600; }
    .system-update-actions { display: flex; justify-content: flex-end; gap: 10px; }
    .system-update-panel > .system-update-actions button { min-height: 36px; padding: 7px 14px; white-space: nowrap; }
    .system-update-help { margin-top: 4px !important; font-size: 13px; color: var(--muted); }
    .system-update-dialog {
      max-width: min(520px, calc(100vw - 32px));
      box-sizing: border-box;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--text);
      background: var(--bg);
      box-shadow: 0 20px 65px rgba(0, 0, 0, .22);
    }
    .system-update-dialog::backdrop { background: rgba(25, 35, 45, .45); }
    .system-update-dialog h2 { margin-top: 0; font-size: 20px; }
    .system-update-dialog p { line-height: 1.65; }
    .comp-time-confirm-dialog { width: min(520px, calc(100vw - 32px)); max-height: 90dvh; overflow-y: auto; }
    #compTimeConfirmSummary { white-space: pre-wrap; overflow-wrap: anywhere; }
    .comp-time-confirm-dialog label { display: block; margin: 18px 0 8px; font-weight: 600; }
    #compTimeNoteInput { display: block; width: 100%; box-sizing: border-box; min-height: 55px; margin-bottom: 20px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; line-height: 1.6; resize: vertical; }
    @media (max-width: 720px) {
      .system-update-panel { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
      .system-update-title { border-right: 0; padding-right: 0; line-height: 1.5; }
      .system-update-dialog { padding: 20px; }
      .system-update-actions button { flex: 1; }
    }

    body.manual-duty-open { overflow: hidden; }
    .manual-duty-modal { width: min(720px, 96vw); max-height: 90dvh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    .manual-duty-content { padding: 16px 22px; overflow-y: auto; min-height: 0; }
    #manualHolidayDutyHint { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 0; }
    .manual-duty-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .manual-duty-row label { font-weight: 600; }
    .manual-duty-row small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; }
    .manual-duty-row select { width: 100%; min-width: 0; }
    .manual-duty-row.locked { color: var(--muted); }
    .manual-duty-row.locked select { opacity: 0.8; }
    @media (max-width: 600px) {
      .manual-duty-content { padding: 12px 16px; }
      .manual-duty-modal .official-holiday-preview-header { gap: 8px; }
      .manual-duty-modal h2 { font-size: 19px; }
      .manual-duty-row { gap: 10px; grid-template-columns: 1fr 1fr; }
      .manual-duty-row select { font-size: 16px; padding: 10px 5px; }
    }

    /* Frequently used time-off form and its responsive history list. */
    .comp-time-panel { --comp-time-control-height: 36px; margin-bottom: 16px; }
    .comp-time-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: inherit; font-weight: 400; color: var(--muted); cursor: pointer; list-style: none; }
    .comp-time-summary::-webkit-details-marker { display: none; }
    .comp-time-summary::after { content: "展开"; color: var(--muted); font-size: 13px; font-weight: 650; }
    .comp-time-panel[open] > .comp-time-summary::after { content: "收起"; }
    .comp-time-panel[open] > .comp-time-summary { border-bottom: 1px solid var(--line); }
    .comp-time-body { padding: 12px 14px; }
    .comp-time-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(150px, .72fr); gap: 12px; align-items: end; }
    .comp-time-field { display: flex; flex-direction: column; min-width: 0; gap: 6px; font-weight: 400; color: var(--muted); }
    .comp-time-field input { width: 100%; min-width: 0; height: var(--comp-time-control-height); padding: 0 10px; box-sizing: border-box; font: inherit; color: var(--text); }
    .comp-time-period { min-width: 0; margin: 0; padding: 0; border: 0; }
    .comp-time-period legend { padding: 0; margin-bottom: 6px; font-weight: 400; color: var(--muted); }
    .comp-time-period-options { display: flex; height: var(--comp-time-control-height); }
    .comp-time-period-options label { position: relative; flex: 1; min-width: 0; cursor: pointer; }
    .comp-time-period-options input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
    .comp-time-period-options span { display: flex; align-items: center; justify-content: center; height: var(--comp-time-control-height); border: 1px solid var(--line); border-right-width: 0; background: var(--panel); }
    .comp-time-period-options label:first-child span { border-radius: 6px 0 0 6px; }
    .comp-time-period-options label:last-child span { border-radius: 0 6px 6px 0; border-right-width: 1px; }
    .comp-time-period-options input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
    .comp-time-period-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; position: relative; z-index: 1; }
    #compLeavePeriodSelect[hidden] { display: none; }
    .comp-time-form > #downloadCompTimeButton { height: var(--comp-time-control-height); width: 100%; white-space: nowrap; }
    .comp-time-history { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 10px; }
    .comp-time-history-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
    .comp-time-history-toggle { color: var(--accent); background: transparent; border: 0; padding: 6px 0 6px 16px; min-height: 36px; font: inherit; font-weight: 600; }
    .comp-time-history-toggle[hidden] { display: none; }
    #compTimeList { color: var(--muted); overflow-wrap: anywhere; }
    .comp-time-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; color: var(--text); }
    .comp-time-table th { color: var(--muted); font-weight: 600; background: var(--bg); }
    .comp-time-table th, .comp-time-table td { padding: 12px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--line); }
    .comp-time-table th:nth-child(1) { width: 16%; }
    .comp-time-table th:nth-child(2) { width: 10%; }
    .comp-time-table th:nth-child(3) { width: 34%; }
    .comp-time-table th:nth-child(4) { width: 14%; }
    .comp-time-table th:nth-child(5) { width: 26%; }
    .comp-time-table tr:last-child td { border-bottom: 0; }
    .comp-time-date, .comp-time-period-text { white-space: nowrap; }
    .comp-time-duty { white-space: normal; overflow-wrap: anywhere; }
    .comp-time-status { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
    .comp-time-status.is-canceled { color: var(--muted); background: var(--bg); }
    .comp-time-duty-label { display: none; }
    .comp-time-row-actions { display: flex; align-items: center; gap: 12px; }
    #compTimeList .comp-time-row-actions button { border: 0; border-radius: 0; background: transparent; width: auto; min-width: 0; padding: 0; color: var(--accent); font-weight: 500; white-space: nowrap; }
    #compTimeList .comp-time-row-actions .comp-time-cancel-button { border-left: 1px solid var(--line); padding-left: 12px; color: var(--bad); }
    @media (min-width: 901px) and (max-width: 1100px) {
      .comp-time-form { gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) 140px; }
      .comp-time-table th, .comp-time-table td { padding: 10px; }
    }
    @media (max-width: 900px) {
      .comp-time-panel { --comp-time-control-height: 42px; }
      .comp-time-body { padding: 12px 14px; }
      .comp-time-summary { min-height: 44px; padding: 0 14px; font-weight: 750; color: var(--text); }
      .comp-time-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
      .comp-time-field, .comp-time-period legend { font-size: inherit; }
      .comp-time-field input { color: var(--text); }
      #compTimePanel input[type="date"] { color-scheme: light; }
      #compTimePanel input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
      .comp-time-period-options { gap: 8px; }
      .comp-time-period-options label span { border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: inherit; }
      .comp-time-period-options label:first-child span, .comp-time-period-options label:last-child span { border-radius: 8px; }
      .comp-time-period-options input:checked + span { background: rgba(87, 193, 255, .12); border-color: #8dbaff; box-shadow: inset 0 0 0 1px #8dbaff; color: var(--text); }
      .comp-time-period-options input:focus-visible + span { outline-color: #8dbaff; }
      .comp-time-form > #downloadCompTimeButton { margin-top: 4px; }
      .comp-time-history-toggle { color: #8dbaff; }
      .comp-time-table, .comp-time-table tbody { display: block; width: 100%; border: 0; border-radius: 0; }
      .comp-time-table thead { display: none; }
      #compTimeList .comp-time-request-row { display: grid; grid-template-columns: max-content 1fr auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
      #compTimeList .comp-time-request-row:last-child { margin-bottom: 0; }
      .comp-time-table td { display: block; padding: 0; border: 0; }
      .comp-time-date { grid-area: 1 / 1; font-size: inherit; font-weight: 600; }
      .comp-time-period-text { grid-area: 1 / 2; font-size: inherit; font-weight: 600; }
      .comp-time-status-cell { grid-area: 1 / 3; }
      .comp-time-status { border-radius: 6px; padding: 3px 8px; color: var(--good); background: rgba(22, 128, 93, .10); }
      .comp-time-status.is-canceled { background: rgba(156, 156, 157, .15); }
      .comp-time-duty { grid-area: 2 / 1 / 3 / -1; color: var(--muted); line-height: 1.6; }
      .comp-time-duty-label { display: inline; }
      .comp-time-actions-cell { grid-area: 3 / 1 / 4 / -1; }
      .comp-time-actions-cell:has(.comp-time-no-actions) { display: none; }
      .comp-time-row-actions { gap: 10px; margin-top: 4px; }
      #compTimeList .comp-time-row-actions button { flex: 1; min-height: 40px; border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; color: var(--text); }
      #compTimeList .comp-time-row-actions .comp-time-cancel-button { padding: 6px 10px; border-color: var(--bad); color: var(--bad); }
    }


    /* Keep signed-in account actions beside the page title. */
    body:not(.signed-out) > header { position: relative; z-index: 5; }
    body:not(.signed-out) .header-inner { max-width: 1232px; }
    .header-status { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
    .header-status .meta { margin-top: 0; }
    .header-status .pill { padding: 2px 8px; font-size: 12px; }
    .header-account { display: flex; align-items: center; align-self: flex-start; gap: 18px; flex-shrink: 0; }
    .header-account.hidden, body.signed-out .header-account { display: none; }
    .header-account-name { font-weight: 400; }
    .header-account .login-link { font: inherit; color: var(--accent); white-space: nowrap; border: 0; background: transparent; padding: 6px 0; cursor: pointer; }
    .header-account #logoutButton { width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 0 14px; font-weight: 400; }
    .header-mobile-account { display: none; }
    body:not(.signed-out) .login-account-panel { display: none; }
    body:not(.signed-out) #loginPanel { grid-template-columns: minmax(0, 1fr); }
    body:not(.signed-out) #drawResult:empty { display: none; }
    @media (max-width: 900px) {
      body:not(.signed-out) .header-inner { flex-direction: column; align-items: stretch; gap: 12px; }
      .header-account { width: 100%; justify-content: space-between; gap: 12px; }
      .header-account-name, .header-password-button { display: none; }
      .header-mobile-account { display: block; min-width: 0; overflow-wrap: anywhere; }
      .header-account #logoutButton { flex-shrink: 0; height: 36px; min-height: 36px; line-height: normal; }
      .header-status { flex-wrap: wrap; gap: 4px 10px; }
    }


    /* Year selector and completed draw status share a compact header. */
    body:not(.signed-out) #yearLoginGroup { display: block; padding: 0; min-height: 0; height: auto; border-radius: 8px; overflow: visible; }
    #yearLoginGroup.hidden { display: none; }
    .year-settings-header { display: flex; align-items: center; gap: 20px; padding: 12px 14px; }
    .year-official-check { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
    .year-settings-title { margin: 0; padding-right: 20px; border-right: 1px solid var(--line); font: inherit; font-weight: 600; white-space: nowrap; }
    .year-settings-select { display: flex; align-items: center; gap: 12px; color: var(--muted); }
    body:not(.signed-out) #yearLoginGroup #yearSelect { width: 130px; height: 36px; min-height: 36px; font: inherit; }
    .year-draw-control { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
    .year-draw-label { color: var(--muted); }
    .year-draw-status { padding: 4px 10px; border-radius: 6px; color: var(--muted); background: var(--bg); }
    body:not(.signed-out) #yearLoginGroup #drawButton { width: auto; padding: 0 12px; font-weight: 500; }
    #yearLoginGroup #drawButton.hidden, .year-draw-status.hidden, .year-admin-actions.hidden { display: none; }
    .year-admin-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 16px 14px; border-top: 1px solid var(--line); }
    .year-action-group { min-width: 0; }
    .year-action-group + .year-action-group { padding-left: 24px; border-left: 1px solid var(--line); }
    .year-action-group h3 { margin: 0 0 10px; font: inherit; color: var(--muted); }
    .year-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    #yearLoginGroup .year-action-buttons button { width: 100%; min-width: 0; height: 36px; padding: 0 10px; font: inherit; color: var(--accent); border-color: var(--accent); white-space: nowrap; }
    #yearLoginGroup .year-action-buttons button:disabled { opacity: .5; cursor: not-allowed; }
    #yearLoginGroup .year-action-buttons #resetYearScheduleButton { color: var(--bad); border-color: var(--bad); }
    @media (max-width: 900px) {
      .year-settings-header { flex-wrap: wrap; gap: 10px 16px; padding: 12px; }
      .year-settings-title { width: 100%; padding: 0; border: 0; }
      .year-settings-select { gap: 8px; }
      body:not(.signed-out) #yearLoginGroup #yearSelect { width: 92px; height: 42px; min-height: 42px; }
      .year-draw-control { gap: 8px; }
      .year-draw-label { display: none; }
      body:not(.signed-out) #yearLoginGroup #drawButton { height: 42px; min-height: 42px; padding: 0 10px; }
      .year-admin-actions { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 12px; }
      .year-action-group + .year-action-group { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
      .year-action-buttons { gap: 10px; }
      #yearLoginGroup .year-action-buttons button { height: auto; min-height: 42px; padding: 8px 6px; line-height: 1.4; white-space: normal; }
      .year-draw-status { background: rgba(156, 156, 157, .15); }
      #yearLoginGroup .year-action-buttons button { color: var(--text); border-color: var(--line); }
      #yearLoginGroup .year-action-buttons #resetYearScheduleButton { color: var(--bad); border-color: var(--bad); }
    }

    /* Silver glass mobile theme, matched to the approved Apple-style mockup. */
    @media (max-width: 900px) {
      header { background: transparent; border-bottom: 0; }
      h1, body.signed-out h1 { font-size: 24px; font-weight: 650; letter-spacing: -.5px; }
      .header-account { color: var(--muted); }
      .header-account #logoutButton { color: var(--accent); border-radius: 12px; background: var(--glass-elevated); }
      .panel, .swap-panel, .mobile-managed-collapse, .mobile-collapse, .modal,
      body:not(.signed-out) #yearLoginGroup, body:not(.signed-out) .draw-result-row { border-radius: 16px; }
      body:not(.signed-out) #yearLoginGroup, body:not(.signed-out) .draw-result-row {
        background: var(--glass-surface);
        border-color: var(--glass-border);
        -webkit-backdrop-filter: saturate(160%) blur(20px);
        backdrop-filter: saturate(160%) blur(20px);
      }
      .year-settings-header { padding: 14px 12px; gap: 12px; }
      .year-settings-title, .comp-time-summary, .mobile-collapse-summary { font-size: 15px; font-weight: 600; }
      .year-draw-status { background: rgba(118, 128, 148, .1); border-radius: 9px; }
      select, input, textarea, button.primary, button.secondary { border-radius: 10px; }
      .draw-result { color: var(--text); }
      .draw-result > div:first-child { font-weight: 600; }
      .draw-result ul { gap: 0; margin-bottom: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 12px; background: rgba(255, 255, 255, .28); }
      .draw-result li { border: 0; border-radius: 0; padding: 7px 10px; background: transparent; }
      .draw-result li + li { border-top: 1px solid var(--line); }
      .comp-time-summary::after, .mobile-collapse-summary::after,
      .mobile-managed-toggle, button.mobile-managed-toggle,
      #pushPlusToggleButton.mobile-managed-toggle, #adminToggleButton.mobile-managed-toggle { color: var(--accent); font-weight: 500; }
      .comp-time-panel[open] > .comp-time-summary { border-bottom: 0; }
      .comp-time-body { padding-top: 6px; }
      .comp-time-form { gap: 8px; }
      .comp-time-history:not(:has(table)) { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; }
      .comp-time-history:not(:has(table)) .comp-time-history-toolbar { flex-shrink: 0; margin: 0; }
      .comp-time-history:not(:has(table)) #compTimeList { font-size: 13px; }
      .comp-time-field { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 6px; }
      .comp-time-period legend { float: left; width: 78px; line-height: 42px; margin: 0; }
      .comp-time-period-options { margin-left: 78px; gap: 0; padding: 3px; border-radius: 11px; background: rgba(118, 128, 148, .12); }
      .comp-time-period-options label span { height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
      .comp-time-period-options label:first-child span, .comp-time-period-options label:last-child span { border-radius: 9px; }
      .comp-time-period-options input:checked + span { color: var(--text); background: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(42, 58, 82, .12), 0 0 1px rgba(42, 58, 82, .12); }
      .comp-time-period-options input:focus-visible + span { outline-color: var(--accent); }
      .comp-time-history-toggle { color: var(--accent); }
      #compTimeList .comp-time-row-actions button { color: var(--accent); }
      .system-update-dialog { background: rgba(250, 252, 255, .96); border-color: var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
      .system-update-dialog::backdrop { background: rgba(32, 44, 62, .28); }
      .switch-field input:checked + .switch-track { background: #34c759; }
    }

    /* Desktop sizing tokens keep existing sections and form groups in place. */
    @media (min-width: 901px) {
      body:not(.signed-out) {
        --desktop-control-height: 36px;
        --desktop-button-short: 88px;
        --desktop-button-standard: 128px;
        --desktop-button-long: 176px;
        --desktop-panel-inset: 20px;
      }

      body:not(.signed-out) :is(button.primary, button.secondary) {
        min-height: var(--desktop-control-height);
        height: var(--desktop-control-height);
        padding: 0 12px;
        border-radius: 6px;
        line-height: normal;
        white-space: nowrap;
      }

      /* Short controls, ordinary actions and long management actions have tiers. */
      body:not(.signed-out) :is(.mobile-managed-toggle, .pushplus-send-button,
        #saveScheduleNoteButton, #systemUpdateCheck, #systemUpdateApply) {
        min-width: var(--desktop-button-short);
      }
      body:not(.signed-out) :is(.admin-actions, .modal-actions,
        .schedule-download-actions, .pushplus-actions, .pushplus-save-actions) > button {
        min-width: var(--desktop-button-standard);
      }
      body:not(.signed-out) #transferAdminButton {
        min-width: var(--desktop-button-long);
      }
      .year-action-buttons {
        grid-template-columns: repeat(2, var(--desktop-button-long));
        gap: 8px;
      }
      #yearLoginGroup .year-action-buttons button { padding-inline: 12px; }

      /* Use a common inset without adding a second inset to nested headings. */
      body:not(.signed-out) :is(.year-settings-header, .year-admin-actions,
        .draw-result-row, .comp-time-summary, .comp-time-body, .swap-panel-body,
        .panel-head, .my-overview-grid, .schedule-filter-toolbar,
        .calendar-wrap, .schedule-night-panel, .schedule-note-panel,
        .system-update-panel, .year-official-check) {
        padding-inline: var(--desktop-panel-inset);
      }
      .pushplus-panel, .admin-panel { padding-inline: var(--desktop-panel-inset); }
      .pushplus-title-row,
      body:not(.signed-out) .admin-panel > .panel-head { padding-inline: 0; }

      .comp-time-form {
        grid-template-columns: repeat(3, minmax(0, 1fr)) var(--desktop-button-standard);
        gap: 16px;
      }
      #swapPanel .swap-panel-body {
        grid-template-columns: repeat(2, minmax(0, 1.25fr)) minmax(0, 1fr) var(--desktop-button-standard);
        gap: 12px 16px;
      }
      #swapPanel #swapRequestButton {
        width: var(--desktop-button-standard);
        justify-self: end;
      }

      /* Keep both pairs of reminders; match switch and time-control baselines. */
      .pushplus-grid { gap: 16px; }
      .pushplus-inline-switch { min-height: var(--desktop-control-height); }
      .pushplus-time-action {
        grid-template-columns: minmax(0, 1fr) var(--desktop-button-short);
        gap: 8px;
      }
      .pushplus-field :is(input:not([type="checkbox"]), select) {
        height: var(--desktop-control-height);
        min-height: var(--desktop-control-height);
        border-radius: 6px;
      }
      .pushplus-actions, .pushplus-save-actions { gap: 8px; }

      /* Shared flexible tracks replace fixed columns wider than the panel. */
      .admin-transfer-row, .admin-generate-row, .admin-adjust-row {
        grid-template-columns: 84px minmax(0, 1fr) 64px minmax(0, 1fr)
          64px minmax(0, 1fr) var(--desktop-button-long);
        gap: 12px;
      }
      .admin-form-row :is(input, select) { min-width: 0; }

      /* Preserve the tab row and filter row, sharing widths between filters. */
      .schedule-filter-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        gap: 16px;
      }
      .schedule-filter-fields > .filters { white-space: nowrap; }
      .schedule-download-actions { gap: 8px; }
      .compact-tabs .tab { height: var(--desktop-control-height); padding-block: 0; }
    }

    @media (min-width: 901px) and (max-width: 1199px) {
      /* Keep the existing desktop groups usable on smaller laptop windows. */
      #swapPanel .swap-panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .admin-transfer-row, .admin-generate-row, .admin-adjust-row {
        grid-template-columns: 76px minmax(0, 1fr) 64px minmax(0, 1fr)
          64px minmax(0, 1fr) var(--desktop-button-long);
        gap: 8px;
      }
      .schedule-filter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .schedule-download-actions { grid-column: 1 / -1; }
    }

    /* Shared section hierarchy; body text and form sizing remain independent. */
    :root { --section-title-size: 15px; --section-title-weight: 600; }
    .year-settings-title,
    .comp-time-summary,
    .mobile-collapse-summary,
    .panel-head > span:first-child,
    .pushplus-title-main,
    .admin-head-title > span:first-child,
    .draw-result > div:first-child,
    .system-update-title {
      font-size: var(--section-title-size);
      font-weight: var(--section-title-weight);
      color: var(--text);
    }
    @media (max-width: 900px) {
      :root { --section-title-size: 16px; }
      #yearAdminActions,
      #schedulePanel .schedule-note-panel,
      #summaryPanel {
        display: none;
      }
      .schedule-night-editor { display: none; }
      .is-night-admin .schedule-night-summary { display: block; }
      /* Extend the hit areas without enlarging the white segmented pills. */
      .comp-time-period-options label {
        height: 44px;
        margin-block: -4px;
        padding-block: 4px;
      }
      .comp-time-history-toggle { min-height: 44px; margin-block: -4px; }
    }

    /* Switch the signed-out card in place; hidden login content retains its size. */
    .change-password-account { display: none; }
    .login-panel.signed-out.changing-password { position: relative; }
    .login-panel.signed-out.changing-password > .login-account-panel,
    .login-panel.signed-out.changing-password > .draw-result { visibility: hidden; }
    .login-panel.signed-out.changing-password > #changePasswordDialog {
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: inherit;
      background: transparent;
      border-radius: inherit;
    }
    .login-panel.signed-out.changing-password #changePasswordForm {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .changing-password .change-password-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
    .changing-password .change-password-heading h2 { margin: 0; font-size: 18px; }
    .changing-password .change-password-account { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .changing-password #changePasswordForm .filters { margin: 0; flex: 0 0 auto; }
    .changing-password .change-password-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .changing-password #changePasswordForm .modal-message { flex: 1; margin: 0; min-height: 18px; font-size: 12px; line-height: 1.4; }
    .changing-password #changePasswordForm .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }

/* Preserve panel geometry while native fieldsets protect pending forms. */
.load-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
[id$="LoadStatus"]:empty { display: none; }