.home-page > .top-bar,
.home-page > .week-strip {
  flex: 0 0 auto;
}

.home-page > .week-strip {
  position: relative;
  z-index: 2;
  min-height: 64px;
  margin-bottom: 14px;
}

.legacy-home-control,
.legacy-home-panel,
.home-page > #tabs,
.home-page > .main-panel,
#addMenu,
#fab {
  display: none !important;
}

.timetable-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 18px 24px;
  overscroll-behavior: contain;
}

.home-page[data-home-view="checklist"] .timetable-view {
  display: none;
}

.timetable-heading,
.checklist-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 18px;
}

.timetable-heading span,
.checklist-heading span {
  color: #849089;
  font-size: 12px;
}

.timetable-heading h1,
.checklist-heading h1 {
  margin: 2px 0 0;
  font-size: 26px;
}

.routine-mode-link {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 9px 14px;
  background: #e8f7ee;
  color: #278554;
  font-weight: 700;
  white-space: nowrap;
}

.clock-wrap {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 48%, transparent 49%), repeating-conic-gradient(from -7.5deg, #edf1ee 0 1deg, transparent 1deg 15deg), #f8faf9;
  box-shadow: inset 0 0 0 1px #dfe7e2, 0 16px 42px #254c3720;
}

.clock-center {
  position: absolute;
  inset: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 22px #254c3717;
  text-align: center;
  z-index: 4;
}

.clock-center b { font-size: clamp(13px, 3.8vw, 18px); }
.clock-center span { color: #87928b; font-size: clamp(10px, 2.8vw, 12px); }

.clock-tick {
  --angle: 0deg;
  position: absolute;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  z-index: 3;
  width: 36px;
  height: 36px;
  color: #516158;
  font-size: 12px;
  transform: rotate(var(--angle)) translateY(calc(-1 * min(42vw, 218px))) rotate(calc(-1 * var(--angle)));
}

.clock-tick span { pointer-events: none; }

.clock-segment {
  --start: 0deg;
  --sweep: 15deg;
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from var(--start), #61c38b 0 var(--sweep), transparent var(--sweep) 360deg);
  clip-path: circle(50%);
  pointer-events: none;
}

.clock-segment::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: #f8faf9;
}

.clock-segment > span {
  position: absolute;
  left: var(--label-x, 50%);
  top: var(--label-y, 5%);
  z-index: 3;
  max-width: 72px;
  overflow: hidden;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #0b3d26;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.timetable-routine-menu { z-index: 24; }
.timetable-routine-menu .danger { color: #d85151; }
.clock-help { margin: 18px 0 0; color: #7b8981; font-size: 12px; text-align: center; }

.timetable-sheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
#repeatModal { position: fixed; z-index: 1100; }
.timetable-sheet.open { pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: #12241b66; opacity: 0; transition: opacity .2s; }
.timetable-sheet.open .sheet-backdrop { opacity: 1; }
.sheet-card { position: absolute; left: 50%; bottom: 0; width: min(100%, 620px); max-height: 90dvh; overflow: auto; padding: 10px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -15px 50px #14251c30; transform: translate(-50%, 105%); transition: transform .26s ease; }
.timetable-sheet.open .sheet-card { transform: translate(-50%, 0); }
.sheet-handle { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 9px; background: #d5ddd8; }
.sheet-card header { display: flex; align-items: center; justify-content: space-between; }
.sheet-card header button { font-size: 25px; }
.sheet-card label { display: flex; flex-direction: column; gap: 7px; margin: 13px 0; font-size: 13px; font-weight: 700; }
.sheet-card input, .sheet-card select { padding: 12px; border: 1px solid #dbe3de; border-radius: 12px; background: #fafcfb; font: inherit; }
.sheet-card .schedule-repeat-row { width: 100%; min-height: 52px; margin: 13px 0; border: 1px solid #dbe3de; border-radius: 12px; background: #fafcfb; }
.sheet-card .schedule-repeat-row .repeat-summary-main { width: 100%; min-height: 50px; padding: 0 12px; text-align: left; }
.sheet-card small { color: #89938d; font-weight: 400; }
.sheet-time-row { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sheet-time-row label, .sheet-time-row input { min-width: 0; }
.sheet-time-row input { width: 100%; }
.sheet-time-controls { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: end; gap: 10px; }
.schedule-notification-toggle { width: 48px; height: 48px; margin-bottom: 13px; border: 1px solid #dbe3de; border-radius: 12px; background: #fafcfb; color: #89938d; font-size: 19px; transition: background .15s, border-color .15s, color .15s; }
.schedule-notification-toggle.active { border-color: #42b978; background: #e9f8f0; color: #17864a; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 20px; }
.sheet-actions button { padding: 14px; border-radius: 13px; font-weight: 700; }
.sheet-actions .primary { background: #42b978; color: #fff; }
.sheet-delete { width: 100%; padding: 12px; border-radius: 12px; background: #fff0f0; color: #c34848; font-weight: 700; }

.bottom-nav {
  position: relative;
  z-index: 10;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 520px) {
  .timetable-view { padding-inline: 2px; }
  .timetable-heading { padding-inline: 2px; }
  .clock-tick { transform: rotate(var(--angle)) translateY(-41vw) rotate(calc(-1 * var(--angle))); }
}

@media (max-width: 374px) {
  .home-page > .week-strip { min-height: 58px; margin-bottom: 12px; }
  .timetable-heading h1 { font-size: 23px; }
  .routine-mode-link { padding: 8px 11px; font-size: 12px; }
}