:root { color-scheme: light; }
.dark { color-scheme: dark; }
body {
            -webkit-tap-highlight-color: transparent;
            font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft JhengHei', sans-serif !important;
        }

        /* 隱藏滾動條 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 移除自訂年月快速選單的預設箭頭，保持極簡清爽視覺 */
        .select-clean {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 4px;
            background: transparent;
            border: none;
        }

        .select-clean::-ms-expand {
            display: none;
        }

        /* 極致奢華的客製化下拉選單 */
        .premium-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.85rem center;
            background-size: 1rem;
            padding-right: 2.2rem !important;
        }

        .dark .premium-select {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        }

        /* 確保下拉選單的選項在明暗模式下都能清晰閱讀 */
        select option {
            background-color: #ffffff;
            color: #1e293b;
        }

        .dark select option {
            background-color: #0b0f19;
            color: #f1f5f9;
        }

        /* 日曆單格（Calendar Cell）樣式重構 */
        .cal-cell {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 當月一般日期 */
        .cal-cell-current {
            border-color: transparent;
            color: #334155;
        }

        .dark .cal-cell-current {
            color: #f1f5f9;
        }

        /* 非當月日期 */
        .cal-cell-other {
            border-color: transparent;
            color: #cbd5e1 !important;
        }

        .dark .cal-cell-other {
            color: #475569 !important;
        }

        /* 今日（Today）狀態 */
        .cal-cell-today {
            border-color: #6366f1 !important;
            background-color: rgba(99, 102, 241, 0.08) !important;
            color: #4f46e5 !important;
            font-weight: 700 !important;
        }

        .dark .cal-cell-today {
            border-color: #818cf8 !important;
            background-color: rgba(129, 140, 248, 0.15) !important;
            color: #a5b4fc !important;
        }

        /* 選定（Selected）狀態 */
        .cal-cell-selected {
            border-color: #8b5cf6 !important;
            background-color: #f5f3ff !important;
            color: #7c3aed !important;
            font-weight: 700 !important;
            box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.15);
        }

        .dark .cal-cell-selected {
            border-color: #a78bfa !important;
            background-color: #1e1b4b !important;
            color: #ddd6fe !important;
            box-shadow: 0 4px 12px -2px rgba(167, 139, 250, 0.3);
        }

        /* 懸浮與點擊效果 */
        .cal-cell:hover:not(.cal-cell-selected) {
            background-color: rgba(0, 0, 0, 0.03);
        }

        .dark .cal-cell:hover:not(.cal-cell-selected) {
            background-color: rgba(255, 255, 255, 0.03);
        }

        /* 模態框平滑動畫 */
        .modal-active {
            transform: translateY(0%);
            opacity: 1;
            pointer-events: auto !important;
            visibility: visible !important;
        }

        .modal-inactive {
            transform: translateY(100%);
            opacity: 0;
            pointer-events: none !important;
            visibility: hidden !important;
        }

        @media (min-width: 768px) {
            .modal-inactive {
                transform: scale(0.95) translate(-50%, -50%);
                opacity: 0;
                pointer-events: none !important;
                visibility: hidden !important;
            }

            .modal-active {
                transform: scale(1) translate(-50%, -50%);
                opacity: 1;
                pointer-events: auto !important;
                visibility: visible !important;
            }
        }

/* Shared layout and accessible interaction rules. */
body { background-image: radial-gradient(ellipse at 90% 0%, #ede9fe70, transparent 42%); }
body > main { padding-top: 2.5rem; padding-bottom: 3rem; }
h2 { line-height: 1.4 !important; }
button, input, select { min-height: 44px; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, label:has(input:focus-visible) { outline: 3px solid #8b5cf6; outline-offset: 3px; }
input, select, .min-w-0 { min-width: 0; }
input, select { max-width: 100%; }
label { line-height: 1.5; }
.dark .text-slate-500 { color: #94a3b8; }
.text-slate-400 { color: #64748b; }
.dark .text-slate-400 { color: #94a3b8; }
.welcome-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.75rem; border: 1px solid #ddd6fe; border-radius: 24px; background: linear-gradient(110deg, #f5f3ff, #fff 85%); }
.welcome-card.hidden, .analytics-empty.hidden { display: none; }
.welcome-card > div:nth-child(2) { flex: 1; }
.welcome-card h3 { font-size: 1.25rem; font-weight: 750; margin: .25rem 0 .5rem; }
.welcome-card p:not(.eyebrow) { color: #64748b; font-size: .875rem; line-height: 1.8; }
.welcome-symbol { background: #ede9fe; color: #7c3aed; padding: 1rem; border-radius: 20px; }
.welcome-symbol svg { width: 30px; height: 30px; }
.eyebrow { color: #7c3aed; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.primary-action { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; background: #7c3aed; color: white; padding: .75rem 1rem; border-radius: 12px; font-size: .875rem; font-weight: 650; flex-shrink: 0; }
.primary-action:hover { background: #6d28d9; }
.dark .welcome-card { background: linear-gradient(110deg, #241b43, #0b0f19); border-color: #463166; }
.dark .welcome-card p:not(.eyebrow) { color: #aab5c6; }
.dark .eyebrow { color: #c4b5fd; }
.empty-state { grid-column: 1 / -1; border: 1px dashed #cbd5e1; border-radius: 24px; padding: 2.5rem 1.5rem; text-align: center; }
.empty-state > svg { margin: 0 auto 1rem; width: 36px; height: 36px; color: #8b5cf6; }
.empty-state h3 { font-size: 1.15rem; font-weight: 700; }
.empty-state p { color: #64748b; font-size: .875rem; margin: .75rem 0 1.25rem; }
.dark .empty-state { border-color: #475569; }
.dark .empty-state p { color: #94a3b8; }
.filter-info { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #64748b; font-size: .875rem; }
.filter-info button { color: #7c3aed; font-weight: 600; }
.dark .filter-info, .dark .filter-info button { color: #c4b5fd; }
.shift-summary { padding: .85rem 1rem; border-radius: 12px; background: #f5f3ff; color: #6d28d9; font-weight: 700; font-size: .9rem; }
.dark .shift-summary { background: #241b43; color: #ddd6fe; }
.storage-notice { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; padding: 1rem; border-radius: 12px; line-height: 1.7; }
#shift-modal, #job-modal { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
#confirm-modal { visibility: hidden; }
#confirm-modal[aria-hidden=false] { visibility: visible; }
#toast-container { z-index: 120; }
#toast-container > div { min-width: 0; width: 100%; overflow-wrap: anywhere; }
#recent-shifts-container > div, #selected-day-shifts > div { gap: 1rem; }
#recent-shifts-container > div > div:first-child, #selected-day-shifts > div > div:first-child { min-width: 0; flex: 1; }
#recent-shifts-container h5, #jobs-list-container h3, #shifts-list-container h4, #shifts-list-container p { overflow-wrap: anywhere; }
#recent-shifts-container > div > div:first-child > div:last-child { min-width: 0; }
#recent-shifts-container > div > div:first-child > div:last-child > div { flex-wrap: wrap; }
#jobs-list-container > div > div:first-child > div:first-child { min-width: 0; }
#jobs-list-container > div > div:first-child > div:last-child { flex-shrink: 0; }
#shifts-list-container .space-y-1 { min-width: 0; }
#shifts-list-container .space-y-1 > div:first-child { flex-wrap: wrap; }
#tab-shifts > div:first-child { align-items: stretch; flex-direction: column; }
#tab-shifts > div:first-child > div:last-child { width: 100%; }
#filter-search { flex: 1; }
.analytics-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; color: #64748b; font-size: .875rem; pointer-events: none; }
#tab-analytics canvas { position: relative; }
#tab-analytics .h-72, #tab-analytics .h-64 { position: relative; }
[id^=stat-] { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#tab-dashboard > .grid > div > p { padding-right: 1.8rem; min-height: 2.5em; }
#tab-dashboard > .grid > div:first-child > p { padding-right: 0; }
#tab-dashboard > .grid > div > .absolute { pointer-events: none; }
.cal-cell-current { color: #334155; }
.dark .cal-cell-current { color: #f1f5f9; }
@media (max-width: 767px) {
  body > main { padding-top: 1.5rem; padding-bottom: 7rem; }
  body > nav { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  body > button { bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
  body > header { padding-top: max(.75rem, env(safe-area-inset-top)); }
  #shift-modal, #job-modal { max-height: calc(100dvh - .75rem); padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)); }
  input:not([type=radio]), select { font-size: 16px !important; }
  #tab-dashboard h2 { font-size: 1.5rem; }
  .welcome-card { padding: 1.25rem; flex-wrap: wrap; gap: 1rem; }
  .welcome-symbol { display: none; }
  .welcome-card .primary-action { width: 100%; }
  #tab-dashboard > .grid { gap: .75rem; }
  #tab-dashboard > .grid > div { padding: 1rem; border-radius: 20px; }
  #tab-dashboard > .grid h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
  #recent-shifts-container > div { flex-wrap: wrap; }
  #recent-shifts-container > div > div:last-child { margin-left: auto; }
  #calendar-grid { gap: .25rem; min-height: 0; }
  .cal-cell { min-height: 42px; border-radius: 12px; }
  #filter-search { flex-basis: 100%; width: 100%; }
  #filter-date, #filter-job, #filter-status { flex: 1; min-width: 130px; }
  #tab-jobs > div:first-child { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
  #tab-shifts .sm\:justify-end { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.install-button { display: flex; gap: .6rem; justify-content: center; align-items: center; width: 100%; color: #7c3aed; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 12px; font-size: .875rem; font-weight: 600; padding: .6rem; }
.install-panel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; border: 1px solid #ddd6fe; border-radius: 24px; padding: 1.5rem; background: #f5f3ff; }
.install-panel h3 { font-size: 1.1rem; font-weight: 700; }
.install-panel p { font-size: .875rem; line-height: 1.8; color: #64748b; margin-top: .4rem; }
.install-panel #offline-status { color: #047857; font-size: .75rem; }
#offline-retry { color: #7c3aed; text-decoration: underline; }
.dark .install-panel, .dark .install-button { background: #241b43; border-color: #463166; color: #ddd6fe; }
.dark .install-panel p { color: #cbd5e1; }
.dark .install-panel #offline-status { color: #6ee7b7; }
[data-install-app]:disabled { opacity: .65; cursor: default; }
#install-modal { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.install-instructions { margin: 1rem 0; }
.install-instructions > div { padding: 1rem 0; border-bottom: 1px solid #e2e8f0; }
.dark .install-instructions > div { border-color: #334155; }
.install-instructions h4 { font-weight: 700; margin-bottom: .4rem; }
.install-instructions p { color: #64748b; font-size: .875rem; line-height: 1.8; }
.dark .install-instructions p { color: #cbd5e1; }
.update-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: 12px; background: #ede9fe; color: #5b21b6; font-size: .875rem; }
.update-notice.hidden { display: none; }
.update-notice button { font-weight: 700; text-decoration: underline; flex-shrink: 0; }
@media (max-width: 767px) { .install-panel > button { width: 100%; } .update-notice { flex-wrap: wrap; } }