:root {
  color-scheme: light;
  --bg: #f7f5f0;
  --surface: rgba(255,255,255,.78);
  --text: #202124;
  --muted: #6b6b73;
  --line: rgba(32,33,36,.09);
  --purple: #7f37d6;
  --cyan: #00bcd4;
  --shadow: 0 20px 56px rgba(42,43,47,.1);
  --max: 1180px;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(123,196,189,.22), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(139,92,246,.13), transparent 28rem),
    linear-gradient(180deg, #fafaf7, var(--bg) 54%, #f3f0ea);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
.page { width: min(100% - 40px, var(--max)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(250,250,247,.82);
  backdrop-filter: blur(18px);
}
.nav { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 760; text-decoration: none; }
.brand-mark { display: grid; width: 32px; gap: 5px; }
.brand-mark span { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg,#b16cf0,#13bdbd); }
.brand-mark span:nth-child(1){width:30px}.brand-mark span:nth-child(2){width:20px}.brand-mark span:nth-child(3){width:26px}.brand-mark span:nth-child(4){width:12px}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.button, .status-chip {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255,255,255,.72); color: var(--text); font-size: 14px; text-decoration: none;
}
.button { cursor: pointer; font-weight: 680; }
.button.primary { border-color: transparent; background: linear-gradient(135deg,#7f37d6,#b15fea); color: #fff; }
.status-chip { gap: 8px; border-radius: 999px; color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
main { padding: 42px 0 76px; }
.hero {
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px;
  align-items: stretch; margin-bottom: 18px;
}
.hero > div, .routine-panel, .create-panel, .today-log-panel {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}
.hero > div:first-child { padding: 34px; background: linear-gradient(135deg,rgba(255,255,255,.9),rgba(238,231,255,.55)); }
.eyebrow, .section-kicker { margin: 0 0 10px; color: #6f52bb; font-size: 12px; font-weight: 760; text-transform: uppercase; }
.hero h1 { margin: 0 0 14px; font-size: clamp(42px,7vw,76px); line-height: .98; }
.hero p:last-child { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.7; }
.progress-card { display: flex; padding: 24px; flex-direction: column; justify-content: center; }
.progress-card > span { color: var(--muted); font-size: 13px; }
.progress-card strong { margin: 8px 0 14px; font-size: 48px; line-height: 1; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(32,33,36,.08); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--purple),var(--cyan)); transition: width .2s ease; }
.progress-card small { margin-top: 10px; color: var(--muted); }
.routine-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; }
.routine-sidebar { display: grid; align-content: start; gap: 18px; }
.routine-panel, .create-panel, .today-log-panel { padding: 24px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h2 { margin: 0; font-size: 25px; }
.section-head time { color: var(--muted); font-size: 13px; }
.weekly-routine { min-width: 0; overflow-x: auto; }
.week-grid {
  display: grid;
  min-width: 760px;
  grid-template-columns: minmax(210px,1.4fr) repeat(7,minmax(54px,.42fr)) 74px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.62);
}
.week-cell {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.week-grid > :nth-child(9n) { border-right: 0; }
.week-grid > :nth-last-child(-n + 9) { border-bottom: 0; }
.week-head {
  min-height: 52px;
  flex-direction: column;
  gap: 3px;
  background: rgba(248,247,251,.82);
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}
.week-head:first-child { align-items: flex-start; padding: 0 14px; }
.week-head strong { color: var(--text); font-size: 12px; }
.week-head.today { background: rgba(238,231,255,.7); color: #6f52bb; }
.routine-copy-cell { align-items: flex-start; justify-content: center; flex-direction: column; padding: 10px 14px; }
.routine-copy-cell strong, .routine-copy-cell small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine-copy-cell strong { font-size: 14px; }
.routine-copy-cell small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.day-check { position: relative; background: rgba(255,255,255,.4); }
.day-check.today { background: rgba(238,231,255,.25); }
.day-check.future { background: rgba(32,33,36,.025); }
.check-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(32,33,36,.13);
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
  font-weight: 800;
}
.day-check.done .check-mark { border-color: transparent; background: var(--cyan); color: #fff; }
.day-check.future .check-mark { width: 6px; height: 6px; border: 0; background: rgba(32,33,36,.08); }
.weekly-count { flex-direction: column; gap: 3px; color: var(--muted); font-size: 10px; }
.weekly-count strong { color: var(--text); font-size: 16px; }
.empty { padding: 34px 20px; border: 1px dashed rgba(32,33,36,.16); border-radius: 8px; color: var(--muted); text-align: center; line-height: 1.65; }
.routine-distribution { margin-top: 24px; overflow-x: auto; }
.routine-distribution-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.routine-distribution-head h3 { margin: 0; font-size: 20px; }
.routine-distribution-head > span {
  flex-shrink: 0; color: var(--muted); font-size: 12px; font-weight: 720;
}
.routine-duration-chart {
  min-width: 760px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 8px; background: rgba(255,255,255,.58);
}
.routine-duration-axis,
.routine-duration-row {
  display: grid; grid-template-columns: minmax(150px,.7fr) minmax(460px,2.6fr);
  gap: 12px; align-items: center;
}
.routine-duration-axis {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: rgba(248,247,251,.82); color: var(--muted);
  font-size: 10px; font-weight: 760;
}
.routine-duration-axis > div,
.routine-duration-bars {
  display: grid; grid-template-columns: repeat(var(--day-count), minmax(8px,1fr)); gap: 4px;
}
.routine-duration-axis > div span {
  display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 1px;
}
.routine-duration-axis small { font-size: 9px; font-weight: 720; }
.routine-duration-chart.is-long-range .routine-duration-axis > div,
.routine-duration-chart.is-long-range .routine-duration-bars { gap: 2px; }
.routine-duration-chart.is-long-range .routine-duration-axis > div span { font-size: 9px; }
.routine-duration-chart.is-long-range .routine-duration-axis small { font-size: 8px; }
.routine-duration-axis > span:last-child { text-align: right; }
.routine-duration-rows { display: grid; }
.routine-duration-row {
  min-height: 92px; padding: 14px; border-bottom: 1px solid var(--line);
}
.routine-duration-row:last-child { border-bottom: 0; }
.routine-duration-label { min-width: 0; }
.routine-duration-label strong,
.routine-duration-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine-duration-label strong { font-size: 14px; }
.routine-duration-label span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.routine-duration-plot { min-width: 0; }
.routine-duration-bars {
  position: relative;
  box-sizing: border-box;
  height: 58px; align-items: end; padding: 0 2px;
  border-bottom: 1px solid rgba(32,33,36,.1);
  background: linear-gradient(180deg,transparent 0 48%,rgba(32,33,36,.025) 48% 50%,transparent 50%);
}
.routine-reference-line {
  position: absolute; left: 0; right: 0; z-index: 2;
  height: 0; border-top: 1px dashed rgba(74,85,104,.42); pointer-events: none;
}
.routine-reference-line--max { bottom: var(--max-line); border-color: rgba(15,23,42,.42); }
.routine-reference-line--avg { bottom: var(--avg-line); border-color: rgba(20,115,134,.42); }
.routine-reference-line b {
  position: absolute; padding-left: 4px; background: rgba(255,255,255,.9);
  color: #64748b; font-size: 9px; font-weight: 760;
  line-height: 1.2; white-space: nowrap;
}
.routine-reference-line--max b {
  right: 2px; bottom: 3px;
}
.routine-reference-line--avg b {
  left: 0; top: 3px;
}
.routine-duration-bar {
  position: relative; display: flex; height: 100%; min-width: 0; align-items: end; justify-content: center;
}
.routine-duration-bar i {
  display: block; width: min(100%, 18px); min-height: 0; border-radius: 3px 3px 0 0;
  background: rgba(32,33,36,.08);
}
.routine-duration-bar.has-value i {
  min-height: 8px; background: #b8c0c8;
  box-shadow: none;
}
.routine-duration-bar.has-value.is-completed i { background: #4d97e8; }
.routine-duration-bar.has-value.is-incomplete i { background: #b8c0c8; }
.calendar-distribution { padding-top: 4px; border-top: 1px solid var(--line); }
.calendar-duration-label { display: grid; justify-items: start; }
.calendar-row-axis {
  display: grid; grid-template-columns: repeat(var(--day-count), minmax(18px,1fr));
  gap: 4px; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 760;
}
.calendar-row-axis span {
  display: flex; min-width: 0; align-items: center; justify-content: center;
  gap: 2px; white-space: nowrap;
}
.calendar-row-axis small { font-size: 8px; font-weight: 720; }
.calendar-row-axis.is-long-range,
.calendar-duration-chart .routine-duration-bars.is-long-range { gap: 2px; }
.calendar-plan-kind {
  display: inline-flex !important; width: fit-content; margin: 0 0 6px !important;
  padding: 3px 7px; border-radius: 999px; font-size: 9px !important;
  font-weight: 780; line-height: 1; letter-spacing: .02em;
}
.calendar-plan-kind.is-study { background: rgba(127,55,214,.1); color: #7132bd; }
.calendar-plan-kind.is-repeat { background: rgba(0,188,212,.12); color: #087f8d; }
.calendar-duration-bar.has-value.is-study i { background: #8d55d7; }
.calendar-duration-bar.has-value.is-repeat i { background: #12aabd; }
.bar-label-max {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding-bottom: 2px; white-space: nowrap; font-size: 9px; font-weight: 720;
  color: #44464f; pointer-events: none; line-height: 1;
}
.routine-duration-dates {
  display: grid; grid-template-columns: repeat(var(--day-count), minmax(8px,1fr));
  gap: 4px; padding: 0 2px; margin-top: 3px;
  color: var(--muted); font-size: 10px; font-weight: 760; text-align: center;
}
.routine-duration-dates span {
  display: flex; min-width: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 1px;
}
.routine-duration-dates small { font-size: 9px; font-weight: 720; }
.routine-duration-chart.is-long-range .routine-duration-dates { gap: 2px; }
.routine-duration-chart.is-long-range .routine-duration-dates span { font-size: 9px; }
.routine-duration-chart.is-long-range .routine-duration-dates small { font-size: 8px; }
.routine-distribution-empty {
  padding: 24px; color: var(--muted); font-size: 13px;
  text-align: center; border: 1px dashed rgba(32,33,36,.12); border-radius: 8px;
}
.create-panel h2 { margin-bottom: 20px; }
.guide-copy { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.guide-list { display: grid; gap: 10px; margin-bottom: 20px; }
.guide-list span { display: flex; align-items: center; gap: 9px; color: #44464f; font-size: 13px; }
.guide-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.create-button {
  display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 15px;
  border: 0; border-radius: 7px; background: linear-gradient(135deg,var(--purple),#a558e5); color: #fff; cursor: pointer; font-weight: 720; text-decoration: none;
}
.today-log-panel { overflow: hidden; }
.today-log-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.today-log-head h3 { margin: 0; font-size: 20px; }
.today-log-count {
  flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
  background: rgba(127,55,214,.1); color: var(--purple); font-size: 12px; font-weight: 720;
}
.today-log-list { display: grid; gap: 8px; }
.today-log-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.62);
}
.today-log-icon {
  flex-shrink: 0; display: grid; width: 32px; height: 32px;
  place-items: center; border-radius: 50%;
}
.today-log-body { min-width: 0; padding-top: 1px; }
.today-log-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.today-log-body small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.today-log-empty {
  padding: 20px; color: var(--muted); font-size: 13px;
  text-align: center; border: 1px dashed rgba(32,33,36,.12); border-radius: 8px;
}
.iqr-section {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
}
.iqr-title { margin: 0 0 12px; font-size: 16px; }
.iqr-list { display: grid; gap: 14px; }
.iqr-row { display: grid; gap: 6px; }
.iqr-row-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0;
}
.iqr-row-head strong {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iqr-label { flex-shrink: 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.iqr-track-wrap { display: grid; gap: 4px; }
.iqr-track { position: relative; height: 3px; border-radius: 999px; background: rgba(32,33,36,.14); }
.iqr-range {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 12px; border-radius: 999px; background: var(--purple);
}
.iqr-range.is-study { background: #8d55d7; }
.iqr-range.is-repeat { background: #12aabd; }
.iqr-ends {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 10px; font-weight: 720;
}
@media (max-width: 820px) {
  .hero, .routine-layout { grid-template-columns: 1fr; }
  .nav { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .nav-actions { width: 100%; flex-wrap: wrap; }
  .status-chip { max-width: 160px; }
  .button { flex: 1; }
}
@media (max-width: 520px) {
  .page { width: min(100% - 28px,var(--max)); }
  .hero > div:first-child, .routine-panel, .create-panel, .today-log-panel { padding: 20px; }
  .section-head { align-items: flex-start; flex-direction: column; }
}