.app-shell.workbench-shell .main-area:has(> .study-plans-page) {
  background: #f7f7f7 !important;
  padding-bottom: 0;
}

html:has(.study-plans-page) { scroll-padding-bottom: 140px; }

.app-shell.workbench-shell main.page.analytics-page.study-plans-page {
  display: block;
  width: 100%;
  max-width: 1180px;
  min-height: calc(100dvh - 90px);
  margin-inline: auto;
  padding: 28px 40px calc(120px + env(safe-area-inset-bottom));
  background: #f7f7f7 !important;
  color: #242424;
}

.study-plans-page .sp-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 24px;
}

.study-plans-page .sp-page-heading h1 {
  margin: 0;
  color: #252525;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
}

.study-plans-page .sp-page-heading .analytics-mode-tabs { margin: 0; }

.sp,
.sp-dialog {
  --sp-ink: #262626;
  --sp-muted: #777873;
  --sp-line: #e4e5e2;
  --sp-control: #ededeb;
  --sp-motion: cubic-bezier(.22, .8, .24, 1);
  color: var(--sp-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

.sp *, .sp-dialog * { box-sizing: border-box; letter-spacing: 0; }
.sp { min-width: 0; width: 100%; }
.sp :is(h2, h3, p), .sp-dialog :is(h3, p) { margin: 0; }

.sp button,
.sp-dialog button {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: none !important;
  box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.sp button:disabled, .sp-dialog button:disabled { cursor: default; opacity: .42; }
.sp :is(svg, img), .sp-dialog :is(svg, img) { display: block; width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
.sp :is(button, input):focus-visible,
.sp-dialog :is(button, input, textarea):focus-visible {
  outline: 2px solid #646760;
  outline-offset: 4px;
  box-shadow: none;
}

.sp .sp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  margin-bottom: 18px;
}

.sp .sp-title { min-width: 0; }
.sp .sp-eyebrow { display: block; margin-bottom: 4px; color: var(--sp-muted); font-size: 12px; }
.sp .sp-title h2 { font-size: 28px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.sp .sp-toolbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.sp .sp-jump {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--sp-control);
  cursor: pointer;
}
.sp .sp-jump input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sp .sp-jump:focus-within { outline: 2px solid #646760; outline-offset: 3px; }
.sp .sp-today { min-height: 44px; border-radius: 24px; padding: 0 18px; background: var(--sp-control); font-weight: 600; }
.sp .sp-arrows { display: flex; align-items: center; gap: 2px; margin-left: 5px; }
.sp .sp-icon, .sp-dialog .sp-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; place-items: center; }
.sp .sp-icon:hover, .sp-dialog .sp-icon:hover { background: #e8e8e5; }
.sp .sp-today:hover, .sp .sp-jump:hover { background: #e1e2de; }
.sp .sp-status { display: flex; min-height: 22px; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--sp-muted); font-size: 12px; }
.sp .sp-status:empty { min-height: 0; margin-bottom: 0; }
.sp .sp-status.is-error { color: #a64138; }
.sp .sp-stage { position: relative; height: clamp(260px, calc(100dvh - 440px), 600px); min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c6c9c0 transparent; isolation: isolate; }
.sp .sp-view { width: 100%; min-width: 0; backface-visibility: hidden; }
.sp .sp-view-outgoing { position: absolute; inset: 0; pointer-events: none; }
.sp .sp-view-month { display: flex; height: 100%; min-height: 300px; flex-direction: column; }
.sp .sp-view-day { display: flex; height: 100%; min-height: 300px; flex-direction: column; }
.sp .sp-view-day .sp-date-strip, .sp .sp-view-day .sp-all-day { flex-shrink: 0; }
.sp .sp-view-day .sp-all-day { max-height: 95px; overflow-y: auto; }
.sp .sp-view-day .sp-day-scroll { flex: 1; height: auto; min-height: 140px; }
.sp .sp-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 12px; padding-block: 12px; scroll-margin-bottom: 140px; }
.sp .sp-footer :is(button, .sp-views) { scroll-margin-bottom: 140px; }
.sp .sp-count { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); font-size: 12px; }
.sp .sp-count strong { color: #44483e; font-weight: 600; }
.sp .sp-views { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 304px; padding: 5px; border-radius: 32px; background: #e9e9e6; isolation: isolate; }
.sp .sp-view-indicator { position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 4); border-radius: 28px; background: #292a28; transform: translateX(calc(var(--sp-view-index, 0) * 100%)); transition: transform 430ms var(--sp-motion); will-change: transform; }
.sp .sp-views button { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 4px; border-radius: 24px; color: #686a64; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sp .sp-views button span { font-size: 11px; font-weight: 400; opacity: .72; }
.sp .sp-views button[aria-selected="true"] { color: #fff; }
.sp .sp-views button:hover:not([aria-selected="true"]) { color: #242424; background: #ddddda; }
.sp .sp-add { display: flex; align-items: center; justify-content: center; justify-self: end; gap: 8px; min-height: 46px; padding: 0 17px; border-radius: 26px; color: #785440; background: #efd9c9; font-weight: 600; white-space: nowrap; }
.sp .sp-add:hover { background: #e9cbb5; }

.sp .sp-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 9px; }
.sp .sp-weekdays > span { padding: 7px 10px; color: var(--sp-muted); font-size: 12px; text-align: left; }
.sp .sp-month-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--sp-weeks), minmax(0, 1fr)); gap: 4px 5px; }
.sp .sp-month-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 15px; padding: 4px; transition: background-color 170ms ease; }
.sp .sp-month-cell.is-selected { background: #eaece7; }
.sp .sp-date { display: grid; width: 36px; height: 36px; margin-bottom: 2px; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 600; }
.sp .sp-date:hover { background: #e1e4dd; }
.sp .sp-month-cell.is-today .sp-date { color: #fff; background: #2f302d; }
.sp .sp-month-cell.is-outside .sp-date { color: #b4b5b1; }
.sp .sp-month-events { display: grid; min-width: 0; gap: 3px; }
.sp .sp-event { display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; border-radius: 7px; padding: 5px 7px; background: #e5e9df; color: #384233; font-size: 11px; font-weight: 500; line-height: 1.4; }
.sp .sp-event-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .sp-event-time { flex: 0 0 auto; margin-left: auto; font-size: 10px; opacity: .76; white-space: nowrap; }
.sp .sp-month-events .sp-event-time { display: none; }
.sp .sp-more { width: 100%; min-height: 25px; border-radius: 7px; padding: 2px 7px; color: var(--sp-muted); font-size: 10px; }
.sp .sp-more:hover { background: #e6e7e3; }
.sp .sp-month-cell .sp-more { position: absolute; right: 4px; top: 10px; width: auto; min-height: 18px; padding: 0 3px; line-height: 18px; }

.sp .sp-date-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 2px 0 20px; }
.sp .sp-date-strip button { display: grid; align-content: center; justify-items: center; gap: 5px; min-height: 68px; border-radius: 24px; }
.sp .sp-date-strip small { color: #7a7d75; font-size: 11px; }
.sp .sp-date-strip strong { font-size: 19px; font-weight: 600; line-height: 1.25; }
.sp .sp-date-strip button:hover { background: #eceee8; }
.sp .sp-date-strip button.is-today { box-shadow: inset 0 0 0 1px #d7d9d2; }
.sp .sp-date-strip button.is-selected { color: #fff; background: #30322d; }
.sp .sp-date-strip button.is-selected small { color: #e2e5dc; }
.sp .sp-all-day { display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 7px; min-height: 42px; margin-bottom: 13px; }
.sp .sp-all-day > span { padding-top: 7px; color: var(--sp-muted); font-size: 11px; }
.sp .sp-all-day-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sp .sp-all-day-items .sp-event { width: auto; max-width: 100%; min-height: 32px; padding-inline: 12px; border-radius: 11px; font-size: 12px; }
.sp .sp-empty-add { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 8px; border-radius: 10px; color: #8c9182; font-size: 11px; }
.sp .sp-empty-add:hover { background: #eceee7; }
.sp .sp-empty-add img { width: 14px; height: 14px; opacity: .5; }
.sp .sp-day-scroll { height: 420px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c6c9c0 transparent; }
.sp .sp-day-timeline { position: relative; min-height: 1440px; margin-right: 5px; }
.sp .sp-hour { position: absolute; right: 0; left: 0; height: 60px; border-radius: 8px; pointer-events: auto; }
.sp .sp-hour:hover { background: #e9ede555; }
.sp .sp-hour::after { position: absolute; top: 0; right: 0; left: 62px; border-top: 1px dashed #dddeda; content: ""; }
.sp .sp-hour-label { position: absolute; left: 0; top: -8px; color: #8a8c85; font-size: 11px; font-variant-numeric: tabular-nums; }
.sp .sp-timed-event { position: absolute; z-index: 2; display: flex; min-width: 0; flex-direction: column; gap: 3px; overflow: hidden; border-radius: 18px; padding: 10px 14px; background: #dce9cb; color: #35492e; text-align: left; box-shadow: inset 0 1px 0 #ffffff55; }
.sp .sp-timed-event strong { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sp .sp-timed-event span { display: block; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.35; opacity: .8; }
.sp .sp-timed-event .sp-event-title { display: -webkit-box; overflow: hidden; color: inherit; font-size: 14px; font-weight: 600; white-space: normal; opacity: 1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sp .sp-timed-event .sp-event-time { display: block; margin-left: 0; font-size: 11px; }
.sp .sp-now { position: absolute; z-index: 3; right: 0; left: 57px; height: 1px; background: #c9796c; pointer-events: none; }
.sp .sp-now::before { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: inherit; content: ""; }
.sp .sp-now > span { position: absolute; right: 100%; top: -8px; margin-right: 8px; border-radius: 5px; padding: 1px 3px; color: #a86258; background: #f7f7f7; font-size: 10px; font-variant-numeric: tabular-nums; }

.sp .sp-week-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #c6c9c0 transparent; }
.sp .sp-week-content { min-width: 0; }
.sp .sp-time-head { display: flex; justify-content: space-between; margin-left: 69px; margin-bottom: 16px; color: #8a8c85; font-size: 10px; font-variant-numeric: tabular-nums; }
.sp .sp-time-head > span:last-child { text-align: right; }
.sp .sp-week-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 9px; }
.sp .sp-week-date { display: grid; align-content: center; justify-items: center; min-height: 58px; gap: 3px; border-radius: 20px; background: #ebede7; }
.sp .sp-week-date small { color: #7b7d74; font-size: 10px; }
.sp .sp-week-date strong { font-size: 18px; font-weight: 600; line-height: 1.2; }
.sp .sp-week-date.is-selected { color: #fff; background: #30322d; }
.sp .sp-week-date.is-selected small { color: #e2e5dc; }
.sp .sp-week-date.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px #b9bfaf; }
.sp .sp-week-row.is-selected .sp-week-date { color: #fff; background: #30322d; }
.sp .sp-week-row.is-selected .sp-week-date small { color: #e2e5dc; }
.sp .sp-week-row.is-today:not(.is-selected) .sp-week-date { box-shadow: inset 0 0 0 1px #b9bfaf; }
.sp .sp-week-day-content { min-width: 0; }
.sp .sp-week-track { position: relative; min-width: 0; min-height: 44px; border-radius: 20px; background: #edeeea; }
.sp .sp-week-event .sp-event-time { display: none; }
.sp .sp-week-allday { margin-top: 4px; }
.sp .sp-week-event { position: absolute; display: flex; align-items: center; min-width: 0; overflow: hidden; gap: 4px; border-radius: 14px; padding: 6px 9px; background: #dce9cb; color: #35492e; font-size: 11px; line-height: 1.35; }
.sp .sp-week-event strong, .sp .sp-week-event .sp-event-title { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.sp .sp-week-event span:not(.sp-event-title) { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.sp .sp-week-event .sp-event-time { display: none; }
.sp .sp-track-add { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; border-radius: inherit; padding: 14px; opacity: .25; }
.sp .sp-track-add:hover { opacity: .6; }
.sp .sp-week-allday { display: flex; grid-column: 2; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; margin-bottom: 3px; }
.sp .sp-week-allday > small { margin-right: 3px; color: #8a8e81; font-size: 10px; }
.sp .sp-week-allday .sp-event { width: auto; max-width: 100%; border-radius: 8px; padding: 4px 8px; font-size: 10px; }

.sp .sp-year-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp .sp-mini-month { display: block; min-width: 0; border-radius: 23px; padding: 15px 12px; background: #eeeeeb; }
.sp .sp-mini-month:hover { background: #e5e8df; }
.sp .sp-mini-month.is-selected { box-shadow: inset 0 0 0 1px #c4cbb9; }
.sp .sp-mini-month > header { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 0 4px 13px; }
.sp .sp-mini-month > header strong { font-size: 13px; font-weight: 650; }
.sp .sp-mini-month > header small { color: #7b7f72; font-size: 10px; }
.sp .sp-mini-weekdays { display: none; }
.sp .sp-mini-grid { display: grid; max-width: 138px; margin-inline: auto; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 14px; gap: 3px; }
.sp .sp-mini-day { display: block; width: 100%; height: 100%; border-radius: 3px; color: transparent; background: #e4e5e1; font-size: 0; }
.sp .sp-mini-day.is-outside { visibility: hidden; }
.sp .sp-mini-day.heat-1 { background: #f0ddce; color: #806553; }
.sp .sp-mini-day.heat-2 { background: #e7c1a4; color: #74513a; }
.sp .sp-mini-day.heat-3 { background: #dba17a; color: #52351f; }
.sp .sp-mini-day.is-today { color: #fff; background: #34382f; }

.sp .sp-tone-sage, .sp-dialog .sp-tone-sage { background: linear-gradient(145deg, #e0ebd1, #d3e2bd); color: #3b4d2f; }
.sp .sp-tone-sky, .sp-dialog .sp-tone-sky { background: linear-gradient(145deg, #dceaf4, #ccdfeb); color: #36526a; }
.sp .sp-tone-lilac, .sp-dialog .sp-tone-lilac { background: linear-gradient(145deg, #e8def2, #dcd0eb); color: #624c79; }
.sp .sp-tone-peach, .sp-dialog .sp-tone-peach { background: linear-gradient(145deg, #f2e2d6, #edd5c3); color: #765744; }
.sp :is(.sp-event, .sp-timed-event, .sp-week-event):hover { filter: brightness(.97); }
.sp .is-complete :is(.sp-event-title, strong), .sp-dialog .is-complete strong { text-decoration: line-through; text-decoration-color: currentColor; opacity: .66; }

.sp-dialog {
  width: min(480px, calc(100vw - 40px));
  max-width: none;
  max-height: min(760px, 85dvh);
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #fff;
  border-radius: 28px;
  padding: 0;
  color: var(--sp-ink);
  background: #fafbf8;
  box-shadow: 0 24px 100px #252c2326;
  scrollbar-width: thin;
}
.sp-dialog::backdrop { background: #272e2330; backdrop-filter: blur(6px); }
.sp-dialog[open] { animation: sp-dialog-enter 240ms cubic-bezier(.2, .7, .2, 1) both; }
.sp-dialog .sp-dialog-inner { padding: 24px; }
.sp-dialog .sp-dialog-inner > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 3px; }
.sp-dialog h3 { font-size: 21px; font-weight: 650; }
.sp-dialog .sp-dialog-date { display: block; margin-bottom: 22px; color: var(--sp-muted); font-size: 12px; }
.sp-dialog .sp-agenda-list { display: grid; gap: 8px; margin-bottom: 22px; }
.sp-dialog .sp-agenda-item { display: flex; min-height: 62px; align-items: center; gap: 11px; border-radius: 18px; padding: 8px 12px; background: #ecefe7; }
.sp-dialog .sp-complete { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.sp-dialog .sp-complete::before { width: 18px; height: 18px; border: 1.5px solid #809072; border-radius: 50%; content: ""; }
.sp-dialog .sp-complete[aria-pressed="true"]::before { border-color: #526745; background: #526745; box-shadow: inset 0 0 0 4px #e8eedf; }
.sp-dialog .sp-complete:has(:is(svg, img))::before { content: none; }
.sp-dialog .sp-complete[aria-pressed="true"] { background: #ffffff4d; }
.sp-dialog .sp-agenda-open { display: grid; min-width: 0; flex: 1; gap: 4px; padding-block: 5px; }
.sp-dialog .sp-agenda-open strong { overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.sp-dialog .sp-agenda-open small { color: var(--sp-muted); font-size: 11px; }
.sp-dialog .sp-agenda-open p { color: inherit; font-size: 12px; font-weight: 400; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; opacity: .8; }
.sp .sp-empty, .sp-dialog .sp-empty { padding: 26px 14px; color: #8a8e81; font-size: 13px; text-align: center; }
.sp-dialog .sp-form { display: grid; gap: 16px; border-top: 1px solid #e5e7df; padding-top: 20px; }
.sp-dialog .sp-form label { display: grid; min-width: 0; gap: 7px; color: #636a58; font-size: 12px; font-weight: 500; }
.sp-dialog .sp-form input:not([type="checkbox"]):not([type="radio"]), .sp-dialog .sp-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #e0e4d9;
  border-radius: 13px;
  padding: 11px 13px;
  color: #32382d;
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
}
.sp-dialog .sp-form textarea { min-height: 88px; resize: vertical; }
.sp-dialog .sp-form input::placeholder, .sp-dialog .sp-form textarea::placeholder { color: #a0a593; }
.sp-dialog .sp-form-row, .sp-dialog .sp-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-dialog .sp-all-day-toggle { display: flex !important; min-height: 44px; align-items: center; align-self: end; gap: 8px !important; }
.sp-dialog input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: #596b48; }
.sp-dialog .sp-time-fields[hidden] { display: none; }
.sp-dialog .sp-colors { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; border: 0; padding: 0; }
.sp-dialog .sp-colors legend { margin-bottom: 8px; padding: 0; color: #636a58; font-size: 12px; }
.sp-dialog .sp-color-choice { position: relative; display: grid !important; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: transparent; cursor: pointer; }
.sp-dialog .sp-color-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sp-dialog .sp-color-choice span { width: 25px; height: 25px; border: 2px solid #ffffffb3; border-radius: 50%; background: #d3e2bd; }
.sp-dialog .sp-color-choice input[value="sky"] + span { background: #ccdfeb; }
.sp-dialog .sp-color-choice input[value="lilac"] + span { background: #dcd0eb; }
.sp-dialog .sp-color-choice input[value="peach"] + span { background: #edd5c3; }
.sp-dialog .sp-color-choice:has(input:checked) { box-shadow: inset 0 0 0 1.5px #7d856f; }
.sp-dialog .sp-color-choice:has(input:focus-visible) { outline: 2px solid #646760; outline-offset: 2px; }
.sp-dialog .sp-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 7px; }
.sp-dialog .sp-save, .sp-dialog .sp-delete { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border-radius: 24px; padding: 0 19px; font-size: 13px; font-weight: 600; }
.sp-dialog .sp-save { color: #fff; background: #343b2d; }
.sp-dialog .sp-save:hover { background: #49583c; }
.sp-dialog .sp-delete { margin-right: auto; color: #aa5c52; background: #f6e9e5; }
.sp-dialog .sp-delete:hover { background: #eedbd5; }
.sp-dialog .sp-form-error { color: #a64138; font-size: 12px; }
.sp-dialog [hidden], .sp [hidden] { display: none !important; }

@keyframes sp-dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1000px) {
  .app-shell.workbench-shell main.page.analytics-page.study-plans-page { padding-inline: 28px; }
  .sp .sp-stage { height: clamp(260px, calc(100dvh - 480px), 560px); }
  .sp .sp-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sp .sp-mini-month { padding: 7px 12px; }
  .sp .sp-mini-month > header { margin-bottom: 6px; }
  .sp .sp-mini-grid { max-width: 104px; grid-auto-rows: 8px; gap: 2px; }
  .sp .sp-month-events .sp-event-time { display: none; }
  .sp .sp-day-scroll { height: 360px; }
}

@media (max-width: 640px) {
  .app-shell.workbench-shell main.page.analytics-page.study-plans-page { padding: 19px 16px calc(120px + env(safe-area-inset-bottom)); }
  .study-plans-page .sp-page-heading { gap: 12px; margin-bottom: 16px; }
  .study-plans-page .sp-page-heading h1 { font-size: 20px; }
  .study-plans-page .sp-page-heading .analytics-mode-tabs { max-width: 210px; }
  .sp .sp-toolbar { align-items: flex-end; gap: 8px; margin-bottom: 19px; }
  .sp .sp-title h2 { font-size: 22px; }
  .sp .sp-eyebrow { font-size: 11px; }
  .sp .sp-toolbar-actions { gap: 3px; }
  .sp .sp-jump { width: 36px; height: 40px; }
  .sp .sp-today { min-height: 40px; padding-inline: 12px; font-size: 12px; }
  .sp .sp-arrows { gap: 0; margin-left: 0; }
  .sp .sp-arrows .sp-icon { width: 32px; height: 40px; }
  .sp .sp-stage { height: clamp(280px, calc(100dvh - 490px), 440px); }
  .sp .sp-weekdays { margin-bottom: 5px; }
  .sp .sp-weekdays > span { padding: 5px 3px; font-size: 10px; text-align: center; }
  .sp .sp-month-grid { gap: 3px 2px; }
  .sp .sp-month-cell { min-height: 0; padding: 2px 0; border-radius: 11px; }
  .sp .sp-date { width: 27px; height: 27px; margin: 0 auto 2px; font-size: 12px; }
  .sp .sp-event { gap: 2px; padding: 2px 4px; border-radius: 5px; font-size: 9px; line-height: 1.2; }
  .sp .sp-month-cell .sp-more { right: 0; top: 6px; padding: 0; font-size: 8px; }
  .sp .sp-month-cell:has(.sp-more) .sp-date { margin-left: 0; }
  .sp .sp-month-events { gap: 2px; }
  .sp .sp-more { min-height: 23px; padding-inline: 3px; font-size: 9px; text-align: center; }
  .sp .sp-footer { grid-template-columns: 1fr auto; gap: 15px 8px; margin-top: 12px; }
  .sp .sp-count { font-size: 11px; }
  .sp .sp-views { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(304px, 100%); }
  .sp .sp-add { min-height: 42px; padding-inline: 14px; font-size: 12px; }
  .sp .sp-date-strip { gap: 3px; margin-bottom: 16px; }
  .sp .sp-date-strip button { min-height: 60px; border-radius: 19px; }
  .sp .sp-date-strip strong { font-size: 17px; }
  .sp .sp-date-strip small { font-size: 10px; }
  .sp .sp-all-day { grid-template-columns: 43px 1fr; gap: 5px; margin-bottom: 10px; }
  .sp .sp-all-day-items .sp-event { min-height: 31px; padding: 6px 9px; font-size: 11px; }
  .sp .sp-hour::after { left: 48px; }
  .sp .sp-hour-label { font-size: 10px; }
  .sp .sp-timed-event { border-radius: 15px; padding: 9px 10px; }
  .sp .sp-timed-event strong { font-size: 12px; }
  .sp .sp-timed-event span { font-size: 10px; }
  .sp .sp-timed-event .sp-event-title { font-size: 12px; }
  .sp .sp-timed-event .sp-event-time { font-size: 10px; }
  .sp .sp-now { left: 43px; }
  .sp .sp-week-row { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; margin-bottom: 7px; }
  .sp .sp-week-date { min-height: 44px; border-radius: 16px; }
  .sp .sp-week-date strong { font-size: 15px; }
  .sp .sp-time-head { margin-left: 46px; }
  .sp .sp-week-event { padding: 4px; border-radius: 11px; }
  .sp .sp-week-event .sp-event-title { font-size: 10px; }
  .sp .sp-year-grid { gap: 9px; }
  .sp .sp-mini-month { border-radius: 16px; padding: 7px 5px; }
  .sp .sp-mini-month > header { margin: 0 4px 5px; }
  .sp .sp-mini-month > header strong { font-size: 11px; }
  .sp .sp-mini-month > header small { font-size: 9px; }
  .sp .sp-mini-weekdays { font-size: 8px; }
  .sp .sp-mini-grid { max-width: 76px; grid-auto-rows: 6px; gap: 1px; }
  .sp .sp-mini-day { font-size: 0; border-radius: 1px; }
  .sp-dialog { width: 100%; max-height: 88dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .sp-dialog .sp-dialog-inner { padding: 21px 20px 26px; }
  .sp-dialog .sp-form input:not([type="checkbox"]):not([type="radio"]), .sp-dialog .sp-form textarea { font-size: 16px; }
}

@media (max-width: 380px) {
  .app-shell.workbench-shell main.page.analytics-page.study-plans-page { padding-inline: 12px; }
  .sp .sp-toolbar-actions { flex-wrap: wrap; max-width: 151px; justify-content: flex-end; }
  .sp .sp-jump { display: none; }
  .sp .sp-title h2 { font-size: 21px; }
  .sp .sp-year-grid { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp-dialog, .sp-dialog * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}