:root {
  --bg: #131417;
  --rail: #111216;
  --panel: #1b1d22;
  --panel-2: #20232a;
  --panel-3: #282b33;
  --line: #30333b;
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #f4f6f8;
  --muted: #a1a7b2;
  --subtle: #737986;
  --blue: #5276ef;
  --blue-soft: rgba(82, 118, 239, 0.22);
  --green: #79c870;
  --red: #e36b70;
  --orange: #df8a5a;
  --purple: #ad8af8;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.auth-locked { overflow: hidden; }.auth-locked .app-shell { visibility: hidden; }.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: radial-gradient(circle at 50% 18%, rgba(75, 105, 205, 0.2), transparent 38%), #111216; }.auth-card { width: min(430px, 100%); padding: 32px; border: 1px solid #363c48; border-radius: 16px; background: rgba(28, 31, 38, 0.97); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42); }.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }.auth-brand span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #dbe4ff; background: #304786; font-size: 16px; font-weight: 900; }.auth-brand strong { color: #f2f4f8; font-size: 18px; }.auth-card h1 { margin: 0; color: #f4f6fa; font-size: 28px; }.auth-description { margin: 10px 0 22px; color: #9ba5b6; font-size: 13px; line-height: 1.6; }.auth-loading { margin: 26px 0; color: #aab8dc; font-size: 13px; text-align: center; }.auth-form { display: grid; gap: 15px; }.auth-form input { min-height: 46px; font-size: 14px; }.auth-message { min-height: 20px; margin: -2px 0 0; color: #ffadaf; font-size: 12px; line-height: 1.45; }.auth-submit { width: 100%; min-height: 46px; margin-top: 2px; }.auth-submit:disabled { opacity: 0.58; cursor: wait; }.auth-footnote { margin: 20px 0 0; color: #717b8c; font-size: 10px; text-align: center; }.auth-user { max-width: 110px; overflow: hidden; color: #9ca7ba; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.logout-btn { min-height: 36px; padding: 0 11px; color: #c5ccda; }
.preview-banner { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(240, 189, 115, 0.42); border-radius: 8px; color: #ead2a5; background: rgba(240, 189, 115, 0.09); font-size: 11px; line-height: 1.45; }.preview-banner strong { flex: 0 0 auto; color: #f2d79f; }.preview-banner span { color: #c7b995; }
.preview-mode #openEventDialog, .preview-mode #railAddButton, .preview-mode #todayAddButton, .preview-mode #addWeeklyEventButton, .preview-mode #newTimetableButton, .preview-mode #editTimetableButton, .preview-mode #deleteTimetableButton, .preview-mode #applyTimetableButton, .preview-mode #addCourseButton, .preview-mode #addAcademicTaskButton, .preview-mode #addPartTimeJobButton, .preview-mode #closePayrollButton, .preview-mode #reopenPayrollButton, .preview-mode .event-card-actions, .preview-mode .today-task-check, .preview-mode .academic-task-check, .preview-mode .job-card button, .preview-mode .empty-state button { display: none !important; }.preview-mode .payroll-table tbody tr { cursor: default; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #91adff; outline-offset: 2px; }

.app-shell {
  display: grid;
  grid-template-columns: 56px minmax(620px, 1fr) 356px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #15161a 0 56px, var(--bg) 56px);
  transition: grid-template-columns 180ms ease;
}
.app-shell.full-content-mode { grid-template-columns: 56px minmax(620px, 1fr); }
.app-shell.full-content-mode .schedule-panel { display: none; }
.app-shell.panel-collapsed { grid-template-columns: 56px minmax(620px, 1fr) 0; }
.app-shell.panel-collapsed .schedule-panel { visibility: hidden; padding-right: 0; padding-left: 0; overflow: hidden; border-left: 0; opacity: 0; pointer-events: none; }
.side-panel-backdrop { display: none; }

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  border-right: 1px solid #25272e;
  background: var(--rail);
}

.rail-logo, .rail-btn, .icon-btn {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}

.rail-logo, .rail-btn { width: 36px; height: 36px; }
.rail-btn.rail-btn-labeled { height: 48px; gap: 1px; padding: 4px 0; }
.rail-caption { color: currentColor; font-size: 8px; font-weight: 900; line-height: 1; }
.mobile-caption { display: none; }
.rail-logo { margin-bottom: 8px; color: #c9d7ff; background: #26386b; font-size: 14px; font-weight: 900; }
.rail-btn:hover, .rail-btn.active, .icon-btn:hover { color: #a9c0ff; background: #262d42; }
.rail-btn.bottom { margin-top: auto; }
.icon-btn { width: 36px; height: 36px; border: 1px solid #353943; background: #22252c; }

.calendar-icon, .list-icon, .briefcase-icon, .plus-icon, .search-icon, .bell-icon, .chevron, .send-icon, .x-icon, .spark-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
}
.calendar-icon::before { content: ""; position: absolute; inset: 3px 2px 2px; border: 2px solid currentColor; border-radius: 4px; }
.calendar-icon::after { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 2px; background: currentColor; }
.list-icon::before, .list-icon::after { content: ""; position: absolute; left: 3px; right: 2px; height: 2px; border-radius: 2px; background: currentColor; }
.list-icon::before { top: 5px; box-shadow: 0 4px 0 currentColor; }
.list-icon::after { top: 13px; }
.briefcase-icon::before { content: ""; position: absolute; inset: 5px 1px 2px; border: 2px solid currentColor; border-radius: 3px; }
.briefcase-icon::after { content: ""; position: absolute; top: 2px; left: 6px; width: 6px; height: 5px; border: 2px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }
.plus-icon::before, .plus-icon::after { content: ""; position: absolute; left: 8px; top: 2px; width: 2px; height: 14px; border-radius: 2px; background: currentColor; }
.plus-icon::after { transform: rotate(90deg); }
.search-icon::before { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; width: 7px; height: 2px; right: 1px; bottom: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); transform-origin: right center; }
.bell-icon::before { content: ""; position: absolute; top: 3px; left: 4px; width: 10px; height: 10px; border: 2px solid currentColor; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom: 0; }.bell-icon::after { content: ""; position: absolute; right: 3px; bottom: 3px; left: 3px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 6px 3px 0 -1px currentColor; }
.chevron::before { content: ""; position: absolute; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.chevron.left::before { top: 5px; left: 6px; transform: rotate(-135deg); }
.chevron.right::before { top: 5px; right: 6px; transform: rotate(45deg); }
.send-icon::before { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.x-icon::before, .x-icon::after { content: ""; position: absolute; left: 8px; top: 2px; width: 2px; height: 14px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.x-icon::after { transform: rotate(-45deg); }
.spark-icon::before { content: "✦"; position: absolute; inset: -3px 0 0; color: var(--purple); font-size: 20px; line-height: 1; }

.calendar-shell { display: flex; min-width: 0; min-height: 0; height: 100vh; height: 100dvh; padding: 24px; overflow: hidden; flex-direction: column; }
.calendar-toolbar { display: flex; flex: 0 0 auto; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.heading-group { min-width: 0; }
.eyebrow { margin: 0 0 6px; color: #8791a4; font-size: 10px; font-weight: 900; letter-spacing: 0; }
.month-title { display: flex; align-items: center; gap: 12px; }
.month-title h1, .agenda-heading h2, .panel-header h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.save-status { display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); font-size: 12px; white-space: nowrap; }
.save-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(121, 200, 112, 0.11); }
.toolbar-actions, .month-nav, .view-switch, .legend, .dialog-actions { display: flex; align-items: center; }
.toolbar-actions { justify-content: flex-end; gap: 8px; }
.view-switch { gap: 3px; padding: 3px; border-radius: 9px; background: var(--panel-2); }
.view-switch button { min-width: 48px; height: 30px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.view-switch button.active { color: #fff; background: #3a3f4a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
.month-nav { gap: 4px; }
.month-nav button { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid #353943; border-radius: 8px; color: var(--muted); background: #20232a; }
.month-nav button:hover { color: #fff; background: #2b2f37; }
#todayButton { padding: 0 11px; color: #f4f6f8; font-size: 12px; font-weight: 800; }
.primary-btn, .secondary-btn, .danger-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 0; border-radius: 8px; padding: 0 14px; color: #fff; font-size: 13px; font-weight: 850; }
.primary-btn { background: #3f61d9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.primary-btn:hover { background: #5074f1; }
.secondary-btn { color: #dce0e8; background: #2b2f37; }
.secondary-btn:hover { background: #363b45; }
.danger-btn { color: #ffb8ba; background: rgba(227, 107, 112, 0.13); }
.danger-btn:hover { background: rgba(227, 107, 112, 0.22); }
.primary-btn:disabled, .secondary-btn:disabled, .danger-btn:disabled { cursor: default; opacity: 0.55; }
.notification-trigger { position: relative; }.notification-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 2px solid var(--bg); border-radius: 9px; color: #fff; background: #e45f66; font-size: 8px; font-weight: 900; }

.calendar-card, .agenda-view { min-height: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.calendar-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.calendar-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.context-copy { display: grid; gap: 4px; }
.context-copy strong { font-size: 13px; }
.context-copy span { color: var(--muted); font-size: 12px; }
.legend { flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.work { background: #6aa9ff; }.dot.personal { background: #f48b82; }.dot.social { background: #83d36d; }.dot.focus { background: #b699ff; }.dot.part-time { background: linear-gradient(135deg, #45c7a6 0 35%, #6aa9ff 35% 68%, #b699ff 68%); }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { height: 34px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; }
.weekday-row span { display: grid; place-items: center; border-right: 1px solid var(--line); }
.weekday-row span:last-child { border-right: 0; }
.calendar-grid { grid-auto-rows: minmax(0, 1fr); height: auto; min-height: 0; }
.calendar-card .day-cell { min-height: 0; }
.day-cell { min-width: 0; min-height: 104px; padding: 8px; overflow: hidden; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); background: #1a1c21; text-align: left; transition: background 140ms ease; }
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell:hover { background: #22252c; }
.day-cell.muted { color: #666c78; background: #17191d; }
.day-cell.selected { background: #20283a; box-shadow: inset 0 0 0 1px rgba(103, 139, 255, 0.65); }
.day-cell.today .day-number { color: #fff; background: var(--blue); }
.day-header { position: relative; display: flex; align-items: center; min-height: 24px; }
.day-number { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; color: inherit; font-size: 12px; font-weight: 900; }
.anniversary-label { position: absolute; right: 0; left: 29px; overflow: hidden; color: var(--event-color, #f0bd73); font-size: 11px; font-weight: 850; line-height: 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.event-list { display: grid; gap: 4px; margin-top: 5px; }
.event-pill { display: block; min-width: 0; min-height: 21px; padding: 3px 5px; border-left: 3px solid var(--event-color); border-radius: 4px; color: #f3f5f8; background: var(--event-bg); font-size: 11px; font-weight: 750; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-pill.work, .event-pill.personal, .event-pill.social, .event-pill.focus, .event-pill.part_time { --event-bg: color-mix(in srgb, var(--event-color) 28%, transparent); }
.event-pill.completed, .agenda-item.completed, .timetable-event.completed { opacity: 0.52; text-decoration: line-through; }
.event-more { color: var(--muted); font-size: 11px; font-weight: 700; }

.agenda-view { padding: 0; }
.agenda-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); }
.agenda-heading h2 { font-size: 21px; }.agenda-heading > span { color: var(--muted); font-size: 13px; }
.agenda-view { display: flex; flex-direction: column; }.agenda-list { display: grid; min-height: 0; overflow-y: auto; }.agenda-day { display: grid; grid-template-columns: 94px 1fr; border-bottom: 1px solid var(--line); }.agenda-day:last-child { border-bottom: 0; }
.agenda-date { padding: 17px 14px; color: var(--muted); font-size: 12px; font-weight: 800; }.agenda-date strong { display: block; margin-top: 3px; color: var(--text); font-size: 16px; }
.agenda-items { display: grid; gap: 8px; padding: 10px 14px 10px 0; }.agenda-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border: 1px solid #323640; border-left: 3px solid var(--event-color); border-radius: 6px; background: #20232a; }.agenda-time { min-width: 82px; color: #cad0dc; font-size: 12px; font-weight: 800; }.agenda-item-copy { min-width: 0; flex: 1; }.agenda-item-copy strong, .agenda-item-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.agenda-item-copy strong { font-size: 13px; }.agenda-item-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }

.schedule-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; height: 100dvh; padding: 22px 16px 16px; overflow-y: auto; border-left: 1px solid #282b32; background: #17191d; opacity: 1; transition: opacity 150ms ease, padding 180ms ease; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.panel-header h2 { font-size: 21px; }.panel-header-actions { display: flex; align-items: center; gap: 7px; }.event-section { margin-top: 22px; }
.day-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 0; padding: 10px; border: 1px solid #30343d; border-radius: 8px; background: #20232a; }
.day-summary div { min-width: 0; padding: 2px 5px; }.day-summary span, .day-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.day-summary span { color: var(--muted); font-size: 10px; font-weight: 750; }.day-summary strong { margin-top: 5px; color: #fff; font-size: 13px; }
.event-section { min-height: 0; }.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }.section-heading h3 { margin: 0; font-size: 14px; }.section-heading span { color: var(--muted); font-size: 11px; }
.selected-event-list, .suggestion-list, .anniversary-list { display: grid; gap: 8px; }.event-card { padding: 11px; border: 1px solid #343842; border-left: 3px solid var(--event-color); border-radius: 7px; background: #20232a; }.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.event-card h4 { margin: 0; font-size: 13px; line-height: 1.35; }.event-card-time { margin: 5px 0 0; color: #d4d9e3; font-size: 12px; }.event-card-note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; line-height: 1.45; }.event-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }.text-btn { border: 0; padding: 3px 0; color: #aabfff; background: transparent; font-size: 11px; font-weight: 800; }.text-btn + .text-btn { margin-left: 12px; }.text-btn.danger { color: #ff9d9f; }.anniversary-section { margin-top: 18px; }.anniversary-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(224, 172, 94, 0.35); border-radius: 7px; background: #29251f; }.anniversary-icon { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; color: #ffd690; background: rgba(240, 189, 115, 0.16); font-size: 13px; }.anniversary-copy { min-width: 0; flex: 1; }.anniversary-copy strong, .anniversary-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.anniversary-copy strong { font-size: 12px; }.anniversary-copy span { margin-top: 3px; color: #d4c7af; font-size: 11px; }
.part-time-card-details { display: grid; gap: 4px; margin-top: 9px; padding: 9px; border: 1px solid rgba(69, 199, 166, 0.22); border-radius: 6px; background: rgba(39, 145, 119, 0.09); }.part-time-card-details strong { color: #b8f1e3; font-size: 12px; }.part-time-card-details span { color: #aeb8c5; font-size: 11px; line-height: 1.4; }
.empty-state { padding: 16px 12px; border: 1px dashed #404550; border-radius: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }.empty-state button { margin-top: 9px; border: 0; color: #aabfff; background: transparent; font-size: 12px; font-weight: 850; }
.suggestion-section { margin-top: 20px; }.suggestion-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(109, 137, 236, 0.36); border-radius: 7px; background: #20242e; }.suggestion-mark { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #baa3ff; background: rgba(164, 132, 246, 0.14); }.suggestion-copy { min-width: 0; flex: 1; }.suggestion-copy strong, .suggestion-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.suggestion-copy strong { font-size: 12px; }.suggestion-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }.suggestion-card button { flex: 0 0 auto; min-width: 44px; height: 28px; border: 1px solid #465886; border-radius: 6px; color: #c9d6ff; background: #29314a; font-size: 11px; font-weight: 850; }
.quick-add { margin-top: auto; padding-top: 16px; }.quick-add > label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; }.quick-add > div { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 5px 6px 5px 10px; border: 1px solid #353943; border-radius: 8px; background: #20232a; }.quick-add input { min-width: 0; flex: 1; height: 30px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }.quick-add input::placeholder { color: #737986; }.send-btn { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border: 0; border-radius: 7px; color: #fff; background: #3d5ed3; }

.event-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 32px); }.search-dialog { width: min(470px, calc(100vw - 28px)); }.event-dialog, .search-dialog, .time-picker-dialog { padding: 0; border: 1px solid #3a3f49; border-radius: 10px; background: #1e2128; color: var(--text); box-shadow: var(--shadow); }.event-dialog::backdrop, .search-dialog::backdrop, .time-picker-dialog::backdrop { background: rgba(5, 7, 10, 0.72); }.event-form { max-height: calc(100vh - 34px); overflow-y: auto; }.event-form, .search-modal { display: grid; gap: 14px; padding: 20px; }.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.dialog-header h2 { margin: 0; font-size: 20px; }.dialog-header .eyebrow { margin-bottom: 4px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }.field-label { display: flex; align-items: baseline; gap: 5px; min-height: 15px; }.optional { color: var(--subtle); font-weight: 600; } input, select, textarea { width: 100%; border: 1px solid #3a3e48; border-radius: 7px; padding: 0 11px; color: var(--text); background: #15171c; } input, select { min-height: 40px; } textarea { min-height: 76px; padding-top: 10px; resize: vertical; }.checkbox-field { display: flex; align-items: center; gap: 8px; min-height: 24px; color: #d6dbe4; }.checkbox-field input { width: 16px; min-height: 16px; height: 16px; margin: 0; accent-color: var(--blue); }.checkbox-field span { font-size: 12px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.date-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.date-picker-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid #465886; border-radius: 7px; color: #cbd7ff; background: #242c42; font-size: 12px; font-weight: 850; white-space: nowrap; }.date-picker-button:hover { border-color: #6581dd; background: #2b3654; }.date-picker-button .calendar-icon { width: 16px; height: 16px; }.form-message { min-height: 18px; margin: -2px 0 0; color: #ffaeaf; font-size: 12px; }.dialog-actions { justify-content: flex-end; gap: 8px; }.dialog-actions .danger-btn { margin-right: auto; }.search-input-wrap { position: relative; display: block; }.search-input-wrap .search-icon { position: absolute; top: 11px; left: 11px; color: var(--muted); }.search-input-wrap input { padding-left: 42px; }.search-results { display: grid; gap: 6px; max-height: min(360px, 50vh); overflow: auto; }.search-result { display: grid; grid-template-columns: 58px 1fr; gap: 10px; width: 100%; padding: 10px; border: 1px solid #353943; border-radius: 7px; color: var(--text); background: #20232a; text-align: left; }.search-result:hover { border-color: #5976da; background: #242b3b; }.search-result time { color: #bfc7d6; font-size: 11px; font-weight: 800; }.search-result strong, .search-result span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.search-result strong { font-size: 13px; }.search-result span { margin-top: 3px; color: var(--muted); font-size: 11px; }.search-empty { padding: 24px 10px; color: var(--muted); font-size: 13px; text-align: center; }
.part-time-fields { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid rgba(69, 199, 166, 0.3); border-radius: 8px; background: rgba(35, 117, 98, 0.08); }.part-time-fields legend { padding: 0 7px; color: #91e1cd; font-size: 12px; font-weight: 900; }.input-suffix { position: relative; }.input-suffix input { padding-right: 34px; }.input-suffix span { position: absolute; top: 50%; right: 11px; color: var(--subtle); font-size: 11px; transform: translateY(-50%); pointer-events: none; }.allowance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.allowance-grid .checkbox-field { padding: 9px; border: 1px solid #353b43; border-radius: 7px; background: #181b20; }.field-help { margin: 0; color: #85909f; font-size: 10px; line-height: 1.5; }
.recurrence-fields { display: grid; gap: 13px; margin: 0; padding: 14px; border: 1px solid rgba(82, 118, 239, 0.35); border-radius: 8px; background: rgba(55, 76, 145, 0.09); }.recurrence-fields legend { padding: 0 7px; color: #aabfff; font-size: 12px; font-weight: 900; }.weekday-field, .exclusion-field { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }.weekday-picker label { display: block; }.weekday-picker input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }.weekday-picker span { display: grid; place-items: center; min-height: 36px; border: 1px solid #3a3e48; border-radius: 7px; color: #b8bfcb; background: #181b20; cursor: pointer; }.weekday-picker input:checked + span { border-color: #6581dd; color: #fff; background: #3c5cc8; }.weekday-picker input:focus-visible + span { outline: 2px solid #91adff; outline-offset: 2px; }.excluded-date-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 5px; }.excluded-date-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border: 1px solid #3b4357; border-radius: 999px; color: #c9d3ed; background: #20283a; font-size: 10px; }.excluded-date-chip button { width: 17px; height: 17px; border: 0; padding: 0; border-radius: 50%; color: #aab4c9; background: #30394e; font-size: 12px; line-height: 1; }.recurrence-preview { padding: 11px; border: 1px solid rgba(82, 118, 239, 0.25); border-radius: 7px; color: #b8c5ea; background: rgba(37, 47, 78, 0.5); font-size: 11px; line-height: 1.55; }.recurrence-preview strong { color: #e2e9ff; }.recurrence-preview .preview-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.recurrence-preview .preview-date { padding: 3px 6px; border-radius: 5px; color: #cbd7ff; background: #2a3552; font-size: 10px; }
.selected-job-preview { padding: 11px; border: 1px solid rgba(69, 199, 166, 0.2); border-left: 4px solid var(--job-color, #45c7a6); border-radius: 7px; color: #b7c5c2; background: rgba(23, 45, 40, 0.6); font-size: 11px; line-height: 1.55; }
.time-input-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }.time-picker-open { min-width: 52px; border: 1px solid #465886; border-radius: 7px; color: #cbd7ff; background: #242c42; font-size: 11px; font-weight: 850; }.time-picker-open:hover { border-color: #6581dd; background: #2b3654; }
.time-picker-dialog { width: min(420px, calc(100vw - 28px)); }.time-picker-panel { display: grid; gap: 15px; padding: 20px; }.time-picker-display { display: grid; place-items: center; min-height: 64px; border: 1px solid rgba(82, 118, 239, 0.46); border-radius: 9px; color: #fff; background: rgba(62, 87, 168, 0.18); font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }.time-quick-actions, .time-period-grid, .time-hour-grid, .time-minute-grid { display: grid; gap: 6px; }.time-quick-actions { grid-template-columns: repeat(3, 1fr); }.time-period-grid { grid-template-columns: repeat(2, 1fr); }.time-hour-grid { grid-template-columns: repeat(6, 1fr); }.time-minute-grid { grid-template-columns: repeat(6, 1fr); }.time-quick-actions button, .time-period-grid button, .time-hour-grid button, .time-minute-grid button { min-height: 35px; border: 1px solid #373c47; border-radius: 7px; color: #c7cdd8; background: #191c22; font-size: 12px; font-weight: 800; }.time-quick-actions button:hover, .time-period-grid button:hover, .time-hour-grid button:hover, .time-minute-grid button:hover { border-color: #526dc4; background: #242b3d; }.time-period-grid button.active, .time-hour-grid button.active, .time-minute-grid button.active { border-color: #6581dd; color: #fff; background: #3c5cc8; }.time-picker-section { display: grid; gap: 7px; }.time-picker-section h3 { margin: 0; color: var(--muted); font-size: 11px; }.time-picker-panel .dialog-actions { padding-top: 2px; }

.today-view { min-height: 0; flex: 1 1 auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; overflow: hidden; }
.today-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid rgba(82, 118, 239, 0.35); border-radius: 11px; background: radial-gradient(circle at 14% 20%, rgba(93, 126, 238, 0.2), transparent 36%), linear-gradient(135deg, #1d2436, #1b1e25); }
.today-hero-copy { display: flex; min-width: 0; justify-content: center; flex-direction: column; }.today-hero-copy h2 { margin: 0; font-size: 24px; }.today-hero-copy p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.today-next-card { display: flex; width: min(360px, 42%); min-width: 250px; justify-content: center; flex-direction: column; padding: 14px 16px; border: 1px solid rgba(115, 145, 244, 0.3); border-radius: 9px; background: rgba(32, 40, 63, 0.72); }.today-next-card span, .today-next-card strong, .today-next-card small { display: block; }.today-next-card span { color: #9facce; font-size: 10px; font-weight: 850; }.today-next-card strong { margin-top: 7px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }.today-next-card small { margin-top: 5px; color: #bdc8e6; font-size: 11px; line-height: 1.4; }
.today-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }.today-summary-grid article { min-width: 0; padding: 13px 14px; border: 1px solid #343941; border-radius: 9px; background: #1d2026; }.today-summary-grid article.pay { border-color: rgba(69, 199, 166, 0.35); background: rgba(32, 91, 79, 0.16); }.today-summary-grid span, .today-summary-grid strong, .today-summary-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.today-summary-grid span { color: var(--muted); font-size: 10px; font-weight: 800; }.today-summary-grid strong { margin-top: 7px; font-size: 17px; }.today-summary-grid article.pay strong { color: #a8ebdb; }.today-summary-grid small { margin-top: 4px; color: var(--subtle); font-size: 9px; }
.today-dashboard-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.75fr); gap: 12px; overflow: hidden; }.today-panel { min-height: 0; padding: 14px; overflow: hidden; border: 1px solid #343941; border-radius: 9px; background: #1b1e24; }.today-timeline-panel { display: flex; flex-direction: column; }.today-panel-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.today-panel-heading > div { display: grid; gap: 4px; }.today-panel-heading strong { font-size: 14px; }.today-panel-heading span { color: var(--muted); font-size: 10px; }
.today-timeline { min-height: 0; overflow-y: auto; padding-right: 4px; }.today-timeline-item { display: grid; grid-template-columns: 66px 18px minmax(0, 1fr); min-height: 58px; align-items: stretch; }.today-timeline-item > time { padding-top: 11px; color: #cbd2df; font-size: 11px; font-weight: 850; text-align: right; }.today-timeline-marker { position: relative; }.today-timeline-marker::before { content: ""; position: absolute; top: 15px; left: 7px; z-index: 2; width: 8px; height: 8px; border: 2px solid #1b1e24; border-radius: 50%; background: var(--event-color); box-shadow: 0 0 0 1px var(--event-color); }.today-timeline-marker::after { content: ""; position: absolute; top: 24px; bottom: -15px; left: 10px; width: 1px; background: #343a45; }.today-timeline-item:last-child .today-timeline-marker::after { display: none; }.today-timeline-main { min-width: 0; margin: 3px 0 6px 5px; padding: 9px 11px; border: 1px solid #363b46; border-left: 3px solid var(--event-color); border-radius: 7px; color: var(--text); background: #20232a; text-align: left; }.today-timeline-main:hover { border-color: color-mix(in srgb, var(--event-color) 65%, #363b46); background: #242830; }.today-timeline-main strong, .today-timeline-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.today-timeline-main strong { font-size: 12px; }.today-timeline-main span { margin-top: 4px; color: var(--muted); font-size: 10px; }.today-timeline-item.past { opacity: 0.5; }.today-timeline-item.ongoing .today-timeline-marker::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--event-color) 24%, transparent); }.today-timeline-item.ongoing .today-timeline-main { background: color-mix(in srgb, var(--event-color) 10%, #20232a); }
.today-side-stack { display: grid; min-height: 0; grid-template-rows: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 12px; overflow: hidden; }.today-side-stack .today-panel { display: flex; flex-direction: column; }.today-deadline-list, .today-free-time-list { display: grid; min-height: 0; gap: 7px; overflow-y: auto; align-content: start; padding-right: 3px; }.today-deadline-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid #363b46; border-left: 3px solid var(--event-color); border-radius: 7px; background: #20232a; }.today-deadline-badge { display: grid; flex: 0 0 auto; place-items: center; min-width: 42px; height: 25px; padding: 0 6px; border-radius: 6px; color: #d8e1ff; background: #303c60; font-size: 9px; font-weight: 900; }.today-deadline-badge.overdue { color: #ffc1c3; background: rgba(175, 57, 65, 0.3); }.today-deadline-copy { min-width: 0; flex: 1; border: 0; padding: 0; color: var(--text); background: transparent; text-align: left; }.today-deadline-copy strong, .today-deadline-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.today-deadline-copy strong { font-size: 11px; }.today-deadline-copy span { margin-top: 4px; color: var(--muted); font-size: 9px; }.today-task-check { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border: 1px solid #506078; border-radius: 50%; color: #b9c7e0; background: transparent; font-size: 11px; font-weight: 900; }.today-task-check:hover { border-color: #58b894; color: #fff; background: #32735d; }
.today-free-time-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #343a45; border-radius: 7px; background: #20232a; }.today-free-time-item strong, .today-free-time-item span { display: block; }.today-free-time-item strong { font-size: 11px; }.today-free-time-item span { margin-top: 4px; color: var(--muted); font-size: 9px; }.today-empty { display: flex; min-height: 130px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; padding: 18px; border: 1px dashed #404550; border-radius: 7px; color: var(--muted); font-size: 11px; text-align: center; }.today-empty.compact { min-height: 78px; }

.part-time-view { min-height: 0; flex: 1 1 auto; display: grid; gap: 16px; overflow-y: auto; padding-right: 4px; align-content: start; }
.timetable-view { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.timetable-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }.timetable-heading h2 { margin: 0; font-size: 20px; }.timetable-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; }.weekly-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }.weekly-day-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #292d35; }.weekly-day-toggle button { min-width: 42px; height: 31px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 850; }.weekly-day-toggle button.active { color: #fff; background: #46546f; }
.timetable-grid { --slots: 28; --day-count: 7; display: grid; flex: 1 1 auto; min-width: 790px; min-height: 0; grid-template-columns: 54px repeat(var(--day-count), minmax(104px, 1fr)); grid-template-rows: 44px repeat(var(--slots), 30px); position: relative; overflow: auto; background: #1a1c21; }.timetable-grid::after { content: ""; position: absolute; z-index: 0; top: 44px; right: 0; bottom: 0; left: 54px; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(255, 255, 255, 0.06) 29px 30px); }
.timetable-corner, .timetable-day-header { z-index: 3; display: grid; place-items: center; min-height: 44px; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: #20232a; font-size: 11px; font-weight: 800; }.timetable-corner { grid-column: 1; grid-row: 1; }.timetable-day-header { grid-row: 1; grid-template-columns: auto auto; gap: 6px; border-left: 1px solid var(--line); }.timetable-day-header strong { color: #dce2ee; }.timetable-day-header span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; }.timetable-day-header.today span { color: #fff; background: var(--blue); }
.timetable-time { z-index: 2; padding: 4px 7px 0 0; color: var(--subtle); background: #1a1c21; font-size: 10px; font-weight: 750; text-align: right; }.timetable-lane { z-index: 1; min-width: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); background: transparent; }.timetable-lane:hover { background: rgba(82, 118, 239, 0.06); }
.timetable-event { z-index: 2; min-width: 0; margin: 2px 3px; padding: 6px 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--event-color) 70%, white); border-left: 4px solid var(--event-color); border-radius: 6px; color: #f8f9fc; background: color-mix(in srgb, var(--event-color) 20%, #20232a); text-align: left; }.timetable-event:hover { z-index: 4; filter: brightness(1.17); }.timetable-event strong, .timetable-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.timetable-event strong { font-size: 11px; }.timetable-event span { margin-top: 3px; color: #c9d2e5; font-size: 10px; }.weekly-event { justify-self: start; }.weekly-now-line { z-index: 5; align-self: start; position: relative; height: 2px; margin: 0 3px; pointer-events: none; background: #ff6f76; box-shadow: 0 0 0 1px rgba(255, 111, 118, 0.12); }.weekly-now-line::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff6f76; }.weekly-now-line span { position: absolute; top: -8px; right: 3px; padding: 1px 4px; border-radius: 4px; color: #fff; background: #c94f56; font-size: 8px; font-weight: 900; }
.saved-timetable-view { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 4px; }
.saved-timetable-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid rgba(82, 118, 239, 0.32); border-radius: 10px; background: linear-gradient(135deg, rgba(54, 80, 164, 0.2), rgba(31, 36, 47, 0.86)); }.saved-timetable-hero h2 { margin: 0; font-size: 22px; }.saved-timetable-hero p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.saved-timetable-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid #343941; border-radius: 9px; background: #1b1e24; }.saved-timetable-toolbar > label { width: min(360px, 100%); }.saved-timetable-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.saved-timetable-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 11px 14px; border: 1px solid #343941; border-radius: 8px; color: var(--muted); background: #1d2026; font-size: 11px; }.saved-timetable-summary strong { margin-left: 4px; color: #e7ebf4; }.saved-timetable-summary.empty-state { display: block; padding: 28px; }
.academic-task-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid #343941; border-radius: 9px; background: #1b1e24; }.academic-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.academic-task-heading > div { display: grid; gap: 4px; }.academic-task-heading strong { font-size: 14px; }.academic-task-heading span { color: var(--muted); font-size: 10px; }.academic-task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 8px; }.academic-task-list .empty-state { grid-column: 1 / -1; }
.academic-task-card { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #343a45; border-left: 3px solid var(--event-color); border-radius: 7px; background: #20232a; }.academic-task-card.completed { opacity: 0.58; }.academic-task-check { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; border: 1px solid #566078; border-radius: 50%; color: #fff; background: transparent; font-size: 12px; font-weight: 900; }.academic-task-card.completed .academic-task-check { border-color: #4d9c7f; background: #32735d; }.academic-task-copy { min-width: 0; flex: 1; border: 0; padding: 0; color: var(--text); background: transparent; text-align: left; }.academic-task-copy strong, .academic-task-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.academic-task-copy strong { font-size: 11px; }.academic-task-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; }.event-card.completed { opacity: 0.62; }
.saved-timetable-board { display: flex; min-height: 650px; flex: 1 0 650px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: var(--shadow); }.saved-timetable-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }.saved-timetable-board-heading > div { display: grid; gap: 4px; }.saved-timetable-board-heading strong { font-size: 15px; }.saved-timetable-board-heading span { color: var(--muted); font-size: 10px; }.saved-timetable-board .timetable-grid { min-height: 840px; flex: 1 0 840px; }
.saved-course span { white-space: normal; line-height: 1.3; }
.part-time-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid rgba(69, 199, 166, 0.28); border-radius: 10px; background: linear-gradient(135deg, rgba(41, 132, 111, 0.22), rgba(31, 36, 47, 0.85)); }
.part-time-hero h2 { margin: 0; font-size: 22px; }.part-time-hero p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.job-section-heading, .payroll-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 4px; }
.job-section-heading > div, .payroll-heading > div { display: grid; gap: 4px; }.job-section-heading strong, .payroll-heading strong { font-size: 15px; }.job-section-heading span, .payroll-heading span { color: var(--muted); font-size: 11px; }
.payroll-heading { align-items: center; gap: 14px; }.payroll-heading > div:first-child { min-width: 0; }.payroll-actions { display: flex !important; flex: 0 0 auto; grid-auto-flow: column; align-items: center; gap: 7px !important; }.payroll-actions button { min-height: 34px; padding: 0 11px; }.payroll-status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid #48505f; border-radius: 999px; color: #cbd2de !important; background: #252932; font-size: 10px !important; font-weight: 850; white-space: nowrap; }.payroll-status.closed { border-color: rgba(69, 199, 166, 0.52); color: #9ae6d3 !important; background: rgba(69, 199, 166, 0.12); }.payroll-readiness { margin: -7px 0 0; padding: 10px 12px; border: 1px solid rgba(69, 199, 166, 0.24); border-radius: 7px; color: #9acbbb; background: rgba(69, 199, 166, 0.07); font-size: 10px; line-height: 1.5; }.payroll-readiness.warning { border-color: rgba(240, 189, 115, 0.42); color: #dfc28f; background: rgba(240, 189, 115, 0.08); }
.job-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.job-card, .job-empty { min-height: 170px; padding: 15px; border: 1px solid #343941; border-radius: 9px; background: #1b1e24; }
.job-card { display: flex; flex-direction: column; border-top: 3px solid var(--job-color, #45c7a6); }.job-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.job-card-title strong, .job-card-title span { display: block; }.job-card-title strong { font-size: 14px; }.job-card-title span { margin-top: 4px; color: var(--muted); font-size: 11px; }.job-wage { margin-top: 22px; color: color-mix(in srgb, var(--job-color, #45c7a6) 68%, white); font-size: 19px; }.job-card p { margin: 7px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }.job-card > button { margin-top: auto; }
.job-color-field { display: grid; gap: 9px; padding: 12px; border: 1px solid #353b45; border-radius: 8px; background: #191c22; }.job-color-heading { display: grid; gap: 3px; }.job-color-heading label { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }.job-color-heading span { color: var(--subtle); font-size: 10px; }.job-color-control { display: flex; align-items: center; gap: 9px; }.job-color-control input[type="color"] { flex: 0 0 auto; width: 48px; min-height: 38px; height: 38px; padding: 3px; border-radius: 7px; cursor: pointer; }.job-color-control output { min-width: 65px; color: #d5dbe6; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 800; }.job-color-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }.job-color-presets button { width: 25px; height: 25px; border: 2px solid #1b1e24; border-radius: 50%; background: var(--swatch-color); box-shadow: 0 0 0 1px #4a505b; }.job-color-presets button:hover, .job-color-presets button.active { box-shadow: 0 0 0 2px #eef2ff; transform: scale(1.06); }
.event-color-field { display: grid; gap: 9px; padding: 12px; border: 1px solid #353b45; border-radius: 8px; background: #191c22; }
.event-color-heading { display: grid; gap: 3px; }.event-color-heading label { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }.event-color-heading span { color: var(--subtle); font-size: 10px; }
.event-color-control { display: flex; align-items: center; gap: 9px; }.event-color-control input[type="color"] { flex: 0 0 auto; width: 48px; min-height: 38px; height: 38px; padding: 3px; border-radius: 7px; cursor: pointer; }.event-color-control output { min-width: 65px; color: #d5dbe6; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 800; }
.event-color-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }.event-color-presets button { width: 25px; height: 25px; border: 2px solid #1b1e24; border-radius: 50%; background: var(--swatch-color); box-shadow: 0 0 0 1px #4a505b; }.event-color-presets button:hover, .event-color-presets button.active { box-shadow: 0 0 0 2px #eef2ff; transform: scale(1.06); }
.anniversary-card { border-color: color-mix(in srgb, var(--event-color, #f0bd73) 42%, transparent); border-left: 3px solid var(--event-color, #f0bd73); background: color-mix(in srgb, var(--event-color, #f0bd73) 11%, #20232a); }.anniversary-icon { color: color-mix(in srgb, var(--event-color, #f0bd73) 58%, white); background: color-mix(in srgb, var(--event-color, #f0bd73) 18%, transparent); }
.job-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border-style: dashed; color: var(--muted); text-align: center; }.job-empty strong { color: var(--text); font-size: 14px; }.job-empty span { max-width: 420px; font-size: 11px; line-height: 1.5; }.job-empty button { margin-top: 4px; }
.payroll-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }.payroll-summary article { padding: 15px 16px; border: 1px solid #343941; border-radius: 8px; background: #1d2026; }.payroll-summary article.total { border-color: rgba(69, 199, 166, 0.42); background: rgba(38, 120, 101, 0.14); }.payroll-summary span, .payroll-summary strong { display: block; }.payroll-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }.payroll-summary strong { margin-top: 8px; font-size: 18px; }.payroll-summary .total strong { color: #a8ebdb; }
.payroll-table tr.closed-row { cursor: default; }.payroll-table tr.closed-row:hover td { background: inherit; }
.payroll-table-wrap { min-height: 220px; max-height: clamp(300px, 42vh, 540px); overflow: auto; border: 1px solid #3b414c; border-radius: 10px; background: #1b1e24; scrollbar-gutter: stable; }.payroll-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; font-size: 13px; }.payroll-table th, .payroll-table td { min-height: 54px; padding: 16px 18px; border-bottom: 1px solid #343944; text-align: left; white-space: nowrap; }.payroll-table th { position: sticky; z-index: 2; top: 0; color: #aeb8ca; background: #242830; box-shadow: 0 1px 0 #3b414c; font-size: 12px; font-weight: 850; }.payroll-table tbody tr { cursor: pointer; transition: background 120ms ease; }.payroll-table tbody tr:hover { background: #252b35; }.payroll-table tbody tr:last-child td { border-bottom: 0; }.payroll-table tbody td:first-child { color: #e1e6ef; font-weight: 850; }.payroll-table tbody td:nth-child(2) { color: #f0f3f8; font-weight: 750; }.payroll-total { color: #9ce7d4; font-weight: 900; }.payroll-empty { padding: 44px 30px !important; color: var(--muted); font-size: 13px; text-align: center !important; }
.actual-work-record { display: grid; gap: 11px; padding: 13px; border: 1px solid rgba(69, 199, 166, 0.28); border-radius: 8px; background: rgba(37, 100, 85, 0.09); }.actual-work-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.actual-work-heading > div { display: grid; gap: 3px; }.actual-work-heading strong { font-size: 12px; }.actual-work-heading span { color: var(--muted); font-size: 10px; }.actual-work-time-fields { display: grid; gap: 11px; }.actual-work-heading button:disabled { opacity: 0.4; cursor: default; }.shift-status { font-weight: 850; }.shift-status.scheduled { color: #aeb7c8; }.shift-status.completed { color: #83d9c3; }.shift-status.absent { color: #ef8e91; }.pay-positive { color: #83d9c3; font-weight: 850; }.pay-negative { color: #ef8e91; font-weight: 850; }.shift-absent { opacity: 0.72; }.actual-shift-detail { margin: 5px 0 0; padding: 7px 9px; border-left: 2px solid #45c7a6; border-radius: 4px; color: #bde9dd; background: rgba(69, 199, 166, 0.08); font-size: 10px; }.actual-shift-detail.absent { border-color: #ef8e91; color: #efb5b7; background: rgba(239, 142, 145, 0.08); }
.job-dialog { width: min(620px, calc(100vw - 28px)); }
.notification-dialog { width: min(560px, calc(100vw - 28px)); }.notification-permission { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #384052; border-radius: 8px; background: #202633; }.notification-permission > div { display: grid; gap: 4px; }.notification-permission strong { font-size: 12px; }.notification-permission span { color: var(--muted); font-size: 10px; line-height: 1.4; }.notification-permission button { flex: 0 0 auto; }.notification-list { display: grid; gap: 7px; max-height: min(440px, 52vh); overflow-y: auto; }.notification-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid #363b46; border-left: 3px solid var(--event-color); border-radius: 7px; background: #20232a; }.notification-item.notified { opacity: 0.62; }.notification-item time { color: #c3cbda; font-size: 10px; font-weight: 800; }.notification-item > button { min-width: 0; border: 0; padding: 0; color: var(--text); background: transparent; text-align: left; }.notification-item strong, .notification-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.notification-item strong { font-size: 11px; }.notification-item span { margin-top: 4px; color: var(--muted); font-size: 9px; }.notification-help { margin: 0; color: var(--subtle); font-size: 9px; line-height: 1.5; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; max-width: calc(100vw - 32px); padding: 11px 14px; border: 1px solid #3e4b70; border-radius: 8px; color: #e4ebff; background: #252d42; box-shadow: var(--shadow); font-size: 12px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 160ms ease, transform 160ms ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.is-hidden { display: none !important; }

@media (max-width: 1180px) {
  body { overflow: auto; }
  .app-shell { grid-template-columns: 56px minmax(0, 1fr); height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }.calendar-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }.calendar-card, .agenda-view, .timetable-view, .saved-timetable-view, .part-time-view, .today-view { flex: none; }.today-view { overflow: visible; }.today-dashboard-grid { min-height: 700px; }.timetable-view { overflow-x: auto; }.schedule-panel { grid-column: 2; height: auto; min-height: 0; overflow: visible; border-top: 1px solid #282b32; border-left: 0; }.selected-event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.suggestion-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quick-add { margin-top: 18px; }.calendar-grid { height: 600px; min-height: 0; }
  .payroll-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payroll-heading { align-items: flex-start; flex-direction: column; }.payroll-actions { width: 100%; overflow-x: auto; }
}

@media (max-width: 780px) {
  body { overscroll-behavior-y: none; }
  .app-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .rail { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 8px; z-index: 40; min-height: 58px; justify-content: stretch; gap: 2px; padding: 5px 6px; border-radius: 15px; background: rgba(18, 20, 25, 0.94); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.52); backdrop-filter: blur(16px); }
  .rail-btn, .rail-btn.rail-btn-labeled { flex: 1 1 0; width: auto; min-width: 0; height: 48px; gap: 2px; padding: 4px 0; border-radius: 10px; }
  .rail-btn .calendar-icon, .rail-btn .list-icon, .rail-btn .briefcase-icon, .rail-btn .plus-icon { width: 16px; height: 16px; }
  .rail-caption, .mobile-caption { display: block; font-size: 7px; white-space: nowrap; }
  .calendar-shell { padding: max(12px, env(safe-area-inset-top)) 10px 12px; }
  .calendar-toolbar { gap: 10px; margin-bottom: 12px; }
  .heading-group .eyebrow { margin-bottom: 3px; }
  .month-title { align-items: center; flex-direction: row; gap: 9px; }
  .month-title h1 { font-size: 22px; }
  .save-status { max-width: 130px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .toolbar-actions { gap: 6px; }
  .toolbar-actions .view-switch { display: none !important; }
  .toolbar-actions .auth-user { display: none; }
  .toolbar-actions .logout-btn, .toolbar-actions .install-app-btn { min-height: 34px; padding: 0 9px; font-size: 10px; }
  .toolbar-actions > .primary-btn { min-height: 36px; padding: 0 11px; font-size: 11px; }
  .calendar-context { min-height: 0; padding: 10px; }
  .calendar-context .legend { display: none; }
  .context-copy span { font-size: 10px; }
  .part-time-view, .saved-timetable-view { gap: 12px; padding-right: 0; }
  .part-time-hero, .saved-timetable-hero, .today-hero { padding: 16px; }
  .part-time-hero h2, .saved-timetable-hero h2, .today-hero-copy h2 { font-size: 20px; }
  .payroll-heading { gap: 10px; }
  .payroll-actions { flex-wrap: wrap; width: 100%; overflow: visible; }
  .payroll-actions .payroll-status { margin-right: auto; }
  .payroll-summary article { padding: 12px; }
  .payroll-summary strong { font-size: 16px; }
  .job-list { grid-template-columns: 1fr; }
  .job-card, .job-empty { min-height: 150px; }
  .payroll-table-wrap { min-height: 0; max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; scrollbar-gutter: auto; }
  .payroll-table { display: block; min-width: 0; border-collapse: separate; font-size: 11px; }
  .payroll-table thead { display: none; }
  .payroll-table tbody { display: grid; gap: 9px; }
  .payroll-table tbody tr { display: grid; overflow: hidden; border: 1px solid #3b414c; border-left: 4px solid #647087; border-radius: 10px; background: #1b1e24; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13); }
  .payroll-table tbody tr.shift-completed { border-left-color: #45c7a6; }
  .payroll-table tbody tr.shift-absent { border-left-color: #e36b70; }
  .payroll-table th, .payroll-table td { min-height: 0; padding: 9px 11px; border-bottom: 1px solid #303540; white-space: normal; }
  .payroll-table tbody td { display: grid; grid-template-columns: minmax(76px, 0.42fr) minmax(0, 1fr); align-items: start; gap: 10px; color: #e6eaf1; text-align: right; line-height: 1.45; }
  .payroll-table tbody td::before { content: attr(data-label); color: #8791a3; font-size: 9px; font-weight: 800; text-align: left; }
  .payroll-table tbody td:nth-child(1), .payroll-table tbody td:nth-child(2) { color: #f4f6fa; }
  .payroll-table tbody td:last-child { border-bottom: 0; }
  .payroll-table .payroll-empty { display: block; padding: 28px 18px !important; text-align: center !important; }
  .payroll-table .payroll-empty::before { display: none; }
  .today-view { gap: 10px; }
  .today-summary-grid { gap: 7px; }
  .today-summary-grid article { padding: 11px; }
  .today-dashboard-grid { gap: 9px; }
  .today-timeline-panel, .today-side-stack .today-panel { min-height: 0; }
  .today-timeline, .today-deadline-list, .today-free-time-list { max-height: none; overflow: visible; }
  .today-panel-heading { align-items: flex-start; }
  .agenda-heading, .timetable-heading { padding: 14px; }
  .agenda-day { grid-template-columns: 66px minmax(0, 1fr); }
  .agenda-date { padding: 12px 7px; }
  .timetable-grid { min-width: 680px; touch-action: pan-x pan-y; }
  .saved-timetable-board { min-height: 560px; flex-basis: 560px; }
  .saved-timetable-board .timetable-grid { min-height: 720px; flex-basis: 720px; }
  .event-dialog, .search-dialog, .time-picker-dialog, .job-dialog, .notification-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 12px; }
  .event-form { max-height: calc(100dvh - 14px); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .time-picker-panel { padding: 16px; }
  .time-picker-display { min-height: 54px; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .preview-banner { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 420px) {
  .today-summary-grid, .payroll-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-summary-grid strong { font-size: 15px; }
  .payroll-actions button { flex: 1 1 auto; }
  .payroll-actions .payroll-status { width: 100%; justify-content: center; margin-right: 0; }
  .time-hour-grid, .time-minute-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 780px) {
  .app-shell { display: block; padding-bottom: 68px; }.rail { position: fixed; z-index: 20; right: 12px; bottom: 12px; left: 12px; flex-direction: row; justify-content: space-evenly; gap: 4px; padding: 7px; border: 1px solid #333843; border-radius: 10px; box-shadow: var(--shadow); }.rail-logo, .rail-btn.bottom { display: none; }.rail-btn { width: 42px; height: 38px; }.rail-btn.rail-btn-labeled { height: 42px; }.calendar-shell { padding: 16px 12px; }.calendar-toolbar { align-items: stretch; flex-direction: column; }.toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }.view-switch { order: 4; width: 100%; }.view-switch button { flex: 1; }.primary-btn { margin-left: auto; }.calendar-context { align-items: flex-start; flex-direction: column; }.legend { justify-content: flex-start; }.calendar-grid { height: auto; min-height: 500px; }.day-cell { min-height: 82px; padding: 5px; }.schedule-panel { padding: 18px 12px; }.selected-event-list, .suggestion-list { grid-template-columns: 1fr; }.quick-add { padding-bottom: 0; }.agenda-day { grid-template-columns: 78px 1fr; }.agenda-date { padding: 14px 10px; }.agenda-items { padding-right: 10px; }.agenda-time { min-width: 54px; }.payroll-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.payroll-summary .total { grid-column: span 2; }.payroll-table-wrap { min-height: 260px; max-height: 58vh; }.payroll-table { min-width: 1080px; font-size: 12px; }.payroll-table th, .payroll-table td { padding: 14px 15px; }.part-time-hero { align-items: flex-start; flex-direction: column; }.part-time-hero .primary-btn { margin-left: 0; }.today-hero { align-items: stretch; flex-direction: column; }.today-next-card { width: 100%; min-width: 0; }.today-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.today-dashboard-grid { min-height: 0; grid-template-columns: 1fr; overflow: visible; }.today-timeline-panel { min-height: 420px; }.today-side-stack { grid-template-rows: auto auto; overflow: visible; }.today-side-stack .today-panel { min-height: 220px; }
}

@media (max-width: 480px) {
  .date-picker-row { grid-template-columns: 1fr; }.actual-work-heading { align-items: flex-start; flex-direction: column; }
  .rail-btn { width: 36px; }.rail { gap: 2px; }
  .month-title { align-items: flex-start; flex-direction: column; gap: 5px; }.month-title h1 { font-size: 23px; }.toolbar-actions { gap: 6px; }.month-nav { margin-right: auto; }.calendar-context { padding: 10px; }.context-copy span { line-height: 1.4; }.legend { gap: 8px; }.weekday-row { height: 30px; }.calendar-grid { min-height: 432px; }.day-cell { min-height: 72px; padding: 4px; }.day-number { min-width: 21px; height: 21px; font-size: 11px; }.anniversary-label { left: 24px; font-size: 9px; line-height: 21px; }.event-list { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }.event-pill { width: 6px; min-height: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; color: transparent; }.event-pill.work { background: #6aa9ff; }.event-pill.personal { background: #f48b82; }.event-pill.social { background: #83d36d; }.event-pill.focus { background: #b699ff; }.event-pill.part_time { background: var(--event-color); }.event-more { display: none; }.day-summary { gap: 2px; }.day-summary div { padding: 2px; }.day-summary strong { font-size: 12px; }.agenda-item { gap: 8px; padding: 8px; }.agenda-item-copy strong { font-size: 12px; }.form-row, .allowance-grid { grid-template-columns: 1fr; }.event-dialog, .search-dialog { width: calc(100vw - 20px); }.event-form, .search-modal { padding: 16px; }.dialog-actions { flex-wrap: wrap; }.dialog-actions .danger-btn { margin-right: auto; }.dialog-actions .primary-btn { margin-left: 0; }.job-color-control { align-items: flex-start; flex-wrap: wrap; }.job-color-presets { width: 100%; margin-left: 0; }
}

@media (max-width: 480px) {
  .event-pill.work, .event-pill.personal, .event-pill.social, .event-pill.focus, .event-pill.part_time { background: var(--event-color); }
  .event-color-control { align-items: flex-start; flex-wrap: wrap; }
  .event-color-presets { width: 100%; margin-left: 0; }
  .timetable-heading { align-items: flex-start; flex-direction: column; }.timetable-heading .primary-btn { margin-left: 0; }.weekly-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .saved-timetable-hero, .saved-timetable-toolbar, .saved-timetable-board-heading { align-items: stretch; flex-direction: column; }.saved-timetable-hero .primary-btn { margin-left: 0; }.saved-timetable-toolbar > label { width: 100%; }.saved-timetable-actions { justify-content: stretch; }.saved-timetable-actions button { flex: 1; }
  .academic-task-heading { align-items: stretch; flex-direction: column; }.academic-task-heading .secondary-btn { align-self: flex-start; }
  .notification-permission { align-items: stretch; flex-direction: column; }.notification-permission button { align-self: flex-start; }.notification-item { grid-template-columns: 88px minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .app-shell, .app-shell.panel-collapsed, .app-shell.full-content-mode { grid-template-columns: 56px minmax(0, 1fr); }
  .schedule-panel { position: fixed; z-index: 32; top: 0; right: 0; display: flex; grid-column: auto; width: min(390px, calc(100vw - 24px)); min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; padding: 22px 16px 16px; overflow-y: auto; border-top: 0; border-left: 1px solid #343944; box-shadow: -22px 0 60px rgba(0, 0, 0, 0.42); visibility: visible; opacity: 1; transform: translateX(0); transition: transform 180ms ease, opacity 150ms ease; }
  .app-shell.panel-collapsed .schedule-panel { visibility: hidden; padding: 22px 16px 16px; overflow-y: auto; border-left: 1px solid #343944; opacity: 0; transform: translateX(100%); pointer-events: none; }
  .app-shell:not(.panel-collapsed):not(.full-content-mode) .side-panel-backdrop { position: fixed; z-index: 31; inset: 0; display: block; border: 0; padding: 0; background: rgba(6, 8, 11, 0.54); }
  .app-shell.full-content-mode .schedule-panel { display: none; }
}

/* Final mobile overrides stay last so the compact layout wins over legacy breakpoints. */
@media (max-width: 780px) {
  .app-shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .rail { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 8px; z-index: 40; min-height: 58px; justify-content: stretch; gap: 2px; padding: 5px 6px; border-radius: 15px; background: rgba(18, 20, 25, 0.94); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.52); backdrop-filter: blur(16px); }
  .rail-btn, .rail-btn.rail-btn-labeled { flex: 1 1 0; width: auto; min-width: 0; height: 48px; gap: 2px; padding: 4px 0; }
  .calendar-shell { padding: max(12px, env(safe-area-inset-top)) 10px 12px; }
  .toolbar-actions .view-switch { display: none !important; }
  .calendar-context .legend { display: none; }
  .agenda-day { grid-template-columns: 66px minmax(0, 1fr); }
  .agenda-date { padding: 12px 7px; }
  .payroll-table-wrap { min-height: 0; max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .payroll-table { display: block; min-width: 0; font-size: 11px; }
  .payroll-table th, .payroll-table td { min-height: 0; padding: 9px 11px; white-space: normal; }
  .today-timeline-panel, .today-side-stack .today-panel { min-height: 0; }
}

@media (max-width: 480px) {
  .month-title { align-items: center; flex-direction: row; gap: 9px; }
  .month-title h1 { font-size: 22px; }
  .rail-btn, .rail-btn.rail-btn-labeled { width: auto; height: 48px; }
}