.plan-page{
  max-width:1180px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.plan-hero{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:4px 2px 18px;
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:18px;
}
.plan-hero-tx{flex:1;min-width:220px}
.plan-hero-h1{
  margin:6px 0 4px;
  font-size:calc(22px * var(--fs-scale, 1));
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.35;
  color:var(--text-primary);
}
.plan-hero-sub{
  margin:0;
  color:var(--text-secondary);
  font-size:calc(13px * var(--fs-scale, 1));
  line-height:1.75;
  max-width:52ch;
}
.plan-hero-acts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.plan-reminder-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid var(--border-subtle);
  background:transparent;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:calc(12.5px * var(--fs-scale, 1));
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
}
.plan-reminder-btn:hover{
  color:var(--text-primary);
  border-color:var(--border-strong);
  background:var(--surface-nested);
}
.plan-reminder-btn svg{width:13px;height:13px;flex-shrink:0}
.plan-reminder-off{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:99px;
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  color:var(--warn-ink);
  font-size:calc(11px * var(--fs-scale, 1));
  font-weight:700;
}
.plan-reminder-off svg{width:11px;height:11px;flex-shrink:0}

.plan-add{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) auto;
  gap:8px;
  align-items:stretch;
  padding:8px;
  border-radius:14px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}
.plan-input{
  padding:.55rem .85rem;
  border-radius:10px;
  border:1px solid var(--border-subtle);
  background:var(--surface-recess);
  color:var(--text-primary);
  font-family:inherit;
  font-size:calc(13.5px * var(--fs-scale, 1));
  line-height:1.5;
  outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  min-width:0;
}
.plan-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.plan-input::placeholder{color:var(--text-tertiary)}
.plan-input--date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  cursor:pointer;
  text-align:start;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  color:var(--text-primary);
  min-width:170px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.plan-input--date:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border-subtle));
  background:color-mix(in srgb,var(--accent) 4%,var(--surface-recess));
}
.plan-input--date:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.plan-input--date > svg{
  width:15px;
  height:15px;
  color:var(--accent);
  flex-shrink:0;
}
.plan-date-tx{
  font-size:calc(13px * var(--fs-scale, 1));
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.plan-add .btn{
  padding-inline:16px;
  font-size:calc(13px * var(--fs-scale, 1));
  white-space:nowrap;
  align-self:stretch;
  height:auto;
}

.plan-stats{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}
.plan-stats-lb{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex-shrink:0;
  min-width:120px;
}
.plan-stats-lb b{
  font-size:calc(13.5px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
}
.plan-stats-lb small{
  font-size:calc(11.5px * var(--fs-scale, 1));
  color:var(--text-tertiary);
}
.plan-stats-bar{
  flex:1;
  height:8px;
  border-radius:99px;
  background:color-mix(in srgb,var(--border-strong) 45%,transparent);
  overflow:hidden;
  min-width:80px;
}
.plan-stats-bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--color-green),var(--color-cyan));
  transition:width .5s var(--ease);
}
.plan-stats-pct{
  font-family:var(--font-mono,monospace);
  font-size:calc(14px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  min-width:44px;
  text-align:end;
  flex-shrink:0;
}

.plan-week{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  padding:10px;
  border-radius:14px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}
.plan-week-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 4px;
  border-radius:11px;
  background:var(--surface-recess);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
  font-family:inherit;
  color:inherit;
  text-align:center;
}
.plan-week-cell:hover{
  background:var(--surface-nested);
  transform:translateY(-1px);
}
.plan-week-cell.today{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-recess));
}
.plan-week-cell.is-selected{
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-recess));
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);
}
.plan-week-cell.is-selected .plan-week-day,
.plan-week-cell.is-selected .plan-week-num{
  color:var(--accent);
}
.plan-week-cell.is-selected .plan-week-count{
  background:var(--accent);
  color:var(--accent-ink);
}
.plan-week-cell{
  transition:
    background .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .22s var(--ease),
    transform .18s var(--ease);
}
.plan-week-cell.done{
  background:color-mix(in srgb,var(--color-green) 8%,var(--surface-recess));
}
.plan-week-cell.is-today-quiet .plan-week-num{
  color:var(--accent);
  font-weight:800;
}
.plan-week-cell.is-today-quiet .plan-week-count{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
.plan-week-day{
  font-size:calc(11px * var(--fs-scale, 1));
  font-weight:700;
  color:var(--text-tertiary);
  letter-spacing:.04em;
}
.plan-week-num{
  font-size:calc(16px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.plan-week-count{
  font-size:calc(10.5px * var(--fs-scale, 1));
  font-weight:700;
  color:var(--text-secondary);
  padding:2px 7px;
  border-radius:99px;
  background:var(--surface-nested);
  min-width:24px;
}
.plan-week-count.empty{
  color:var(--text-tertiary);
  background:transparent;
}
.plan-week-cell.today .plan-week-count{
  background:var(--accent);
  color:var(--accent-ink,var(--text-on-accent));
}
.plan-week-cell.done .plan-week-count{
  background:color-mix(in srgb,var(--color-green) 22%,transparent);
  color:var(--color-green);
}

.plan-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:20px;
  align-items:start;
}
@media (max-width:900px){
  .plan-layout{ grid-template-columns:minmax(0,1fr); gap:16px; }
}
.plan-main{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.plan-list{
  display:flex;
  flex-direction:column;
}

.plan-cal{
  display:flex;
  flex-direction:column;
  padding:14px 14px 14px;
  border-radius:14px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}
.plan-cal-h{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-subtle);
}
.plan-cal-h b{
  font-size:calc(13.5px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-.01em;
  margin-inline:2px;
  flex:1;
  text-align:center;
}
.plan-cal-h .btn-icon{
  width:28px;
  height:28px;
  padding:0;
  flex-shrink:0;
}
.plan-cal-h .btn-sm{
  font-size:calc(11.5px * var(--fs-scale, 1));
  padding:4px 8px;
  margin-inline-start:0 !important;
}
.plan-grid-h{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  margin-bottom:6px;
  padding:0 1px;
}
.plan-grid-h span{
  text-align:center;
  font-size:calc(10.5px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-tertiary);
  letter-spacing:.04em;
  padding:3px 0;
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  aspect-ratio:1 / 1;
  animation:planCalIn .32s var(--ease) both;
}
@keyframes planCalIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .plan-grid{animation:none}
  .plan-day,.plan-week-cell{transition:none}
}
.plan-day{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:2px;
  border-radius:8px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.plan-day:hover:not(.plan-day--empty){
  background:var(--surface-nested);
  transform:translateY(-1px);
}
.plan-day--empty{
  cursor:default;
  pointer-events:none;
}
.plan-day--today{
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-recess));
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
}
.plan-day--today .plan-day-n{
  color:var(--accent);
  font-weight:900;
}
.plan-day.is-selected{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);
}
.plan-day.is-selected .plan-day-n{
  color:var(--accent);
  font-weight:900;
}
.plan-day.is-selected .plan-day-c{
  background:var(--accent);
  color:var(--accent-ink);
}
.plan-day{
  transition:
    background .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .22s var(--ease),
    transform .15s var(--ease);
}
.plan-day--has{
  background:var(--surface-recess);
}
.plan-day:disabled,
.plan-day.is-past{
  opacity:.3;
  cursor:not-allowed;
}
.plan-day.is-today-quiet .plan-day-n{
  color:var(--accent);
  font-weight:800;
}
.plan-day.is-today-quiet .plan-day-c{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
.plan-day--done{
  background:color-mix(in srgb,var(--color-green) 10%,var(--surface-recess));
}
.plan-day--done .plan-day-n{
  color:var(--color-green);
}
.plan-day-n{
  font-size:calc(12px * var(--fs-scale, 1));
  font-weight:700;
  color:var(--text-primary);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan-day-c{
  position:absolute;
  bottom:2px;
  font-size:calc(8.5px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--accent);
  line-height:1;
  padding:0 4px;
  border-radius:99px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  min-width:12px;
  text-align:center;
}
.plan-day--done .plan-day-c{
  color:var(--color-green);
  background:color-mix(in srgb,var(--color-green) 14%,transparent);
}

.plan-list{
  padding:14px 16px 16px;
  border-radius:16px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}
.plan-list-h{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle);
}
.plan-list-h h2{
  margin:0;
  font-size:calc(15px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:8px;
}
.plan-list-h h2 svg{width:15px;height:15px;color:var(--accent)}

.plan-sec{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.plan-sec:last-child{margin-bottom:0}
.plan-sec-h{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 2px 6px;
}
.plan-sec-h > svg{
  width:13px;
  height:13px;
  color:var(--text-tertiary);
  flex-shrink:0;
}
.plan-sec-h b{
  font-size:calc(12px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-secondary);
  letter-spacing:.02em;
}
.plan-sec-h .badge{
  margin-inline-start:auto;
  font-size:calc(10.5px * var(--fs-scale, 1));
  padding:1px 8px;
}

.plan-task{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:11px;
  background:var(--surface-recess);
  border:1px solid transparent;
  transition:border-color .15s var(--ease),background .15s var(--ease);
  animation:rise var(--rise-dur,500ms) var(--ease) both;
}
.plan-task:nth-child(1){animation-delay:0ms}
.plan-task:nth-child(2){animation-delay:28ms}
.plan-task:nth-child(3){animation-delay:56ms}
.plan-task:nth-child(4){animation-delay:84ms}
.plan-task:nth-child(5){animation-delay:112ms}
.plan-task:nth-child(n+6){animation-delay:140ms}
@media (prefers-reduced-motion:reduce){
  .plan-task{animation:none}
}
.plan-task:hover{
  border-color:var(--border-strong);
  background:var(--surface-nested);
}
.plan-task.done{
  opacity:.6;
}
.plan-task.done .plan-task-tx b{
  text-decoration:line-through;
  color:var(--text-tertiary);
}
.plan-task.overdue{
  border-inline-start:3px solid var(--color-rose);
}
.plan-task-tx{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.plan-task-tx b{
  font-size:calc(13.5px * var(--fs-scale, 1));
  font-weight:700;
  color:var(--text-primary);
  line-height:1.5;
  overflow-wrap:anywhere;
}
.plan-task-m{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:calc(11.5px * var(--fs-scale, 1));
  color:var(--text-tertiary);
  line-height:1.5;
}
.plan-task-m svg{
  width:11px;
  height:11px;
  flex-shrink:0;
}
.plan-task-m .overdue-tag{
  color:var(--color-rose);
  font-weight:700;
}

.plan-task .task-tick{
  width:22px;
  height:22px;
  border-radius:7px;
  border:1.6px solid var(--border-strong);
  background:transparent;
  display:grid;
  place-items:center;
  flex-shrink:0;
  cursor:pointer;
  margin-top:1px;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.plan-task .task-tick svg{
  width:13px;
  height:13px;
  color:var(--accent-ink,var(--text-on-accent));
  opacity:0;
  transform:scale(.6);
  transition:opacity .18s var(--ease),transform .18s var(--ease-spring);
}
.plan-task.done .task-tick{
  background:linear-gradient(135deg,var(--accent),var(--accent-2,var(--accent)));
  border-color:transparent;
}
.plan-task.done .task-tick svg{
  opacity:1;
  transform:scale(1);
}
.plan-task .task-tick:hover{
  border-color:var(--accent);
}

.plan-task .task-menu{
  width:26px;
  height:26px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-tertiary);
  display:grid;
  place-items:center;
  flex-shrink:0;
  cursor:pointer;
  opacity:.45;
  transition:opacity .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.plan-task .task-menu svg{ width:14px; height:14px; }
.plan-task:hover .task-menu{ opacity:1; }
.plan-task .task-menu:hover{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
@media (hover: none){
  .plan-task .task-menu{ opacity:.7 }
}

.plan-task-tx b.plan-task-text{
  cursor:text;
  transition:color .15s var(--ease);
}
.plan-task-tx b.plan-task-text:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.plan-task-input{
  flex:1;
  min-width:0;
  padding:5px 9px;
  border-radius:7px;
  border:1px solid var(--accent);
  background:var(--surface-nested);
  color:var(--text-primary);
  font-family:inherit;
  font-size:calc(13.5px * var(--fs-scale, 1));
  font-weight:700;
  outline:none;
}

.plan-task-menu{
  position:fixed;
  z-index:200;
  min-width:190px;
  padding:6px;
  border-radius:12px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  box-shadow:0 12px 32px -10px rgba(0,0,0,.35), 0 2px 8px -4px rgba(0,0,0,.2);
  display:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .15s var(--ease), transform .18s var(--ease);
}
.plan-task-menu.open{ display:block; opacity:1; transform:none; }
.plan-task-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:calc(13px * var(--fs-scale, 1));
  font-weight:600;
  text-align:start;
  cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.plan-task-menu button:hover{
  background:var(--surface-nested);
  color:var(--text-primary);
}
.plan-task-menu button.danger:hover{
  background:color-mix(in srgb,var(--color-rose) 12%,transparent);
  color:var(--color-rose);
}
.plan-task-menu svg{ width:14px; height:14px; flex-shrink:0; }

.plan-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:32px 20px;
  text-align:center;
  border-radius:14px;
  border:1px dashed var(--border-subtle);
  background:color-mix(in srgb,var(--surface-recess) 60%,transparent);
}
.plan-empty > svg{
  width:34px;
  height:34px;
  color:var(--text-tertiary);
  opacity:.55;
  margin-bottom:2px;
}
.plan-empty b{
  font-size:calc(14px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--text-primary);
}
.plan-empty span{
  font-size:calc(12.5px * var(--fs-scale, 1));
  color:var(--text-secondary);
  line-height:1.75;
  max-width:32ch;
}

@media (max-width:900px){
  .plan-week{gap:6px}
}
@media (max-width:640px){
  .plan-page{gap:14px}
  .plan-hero{padding:4px 0 16px;margin-bottom:14px}
  .plan-hero-h1{font-size:calc(1.25rem * var(--fs-scale, 1))}
  .plan-hero-sub{font-size:calc(13px * var(--fs-scale, 1))}
  .plan-add{
    grid-template-columns:1fr;
    gap:6px;
    padding:8px;
  }
  .plan-add .btn{
    padding:.7rem 14px;
  }
  .plan-stats{
    flex-wrap:wrap;
    gap:10px 12px;
    padding:12px 14px;
  }
  .plan-stats-bar{
    order:3;
    flex:1 1 100%;
  }
  .plan-stats-pct{
    margin-inline-start:auto;
  }
  .plan-week{
    padding:8px;
    gap:4px;
  }
  .plan-week-cell{
    padding:7px 2px;
    gap:4px;
  }
  .plan-week-num{font-size:calc(14px * var(--fs-scale, 1))}
  .plan-week-count{font-size:calc(10px * var(--fs-scale, 1));padding:1px 5px;min-width:20px}
  .plan-cal{padding:10px 10px 12px}
  .plan-list{padding:12px 12px 14px}
  .plan-day-n{font-size:calc(12px * var(--fs-scale, 1))}
  .plan-day-c{font-size:calc(9px * var(--fs-scale, 1));padding:1px 4px;bottom:2px}
  .plan-task{padding:9px 10px}
}

@media print{
  .plan-page{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  .plan-day,
  .plan-week-cell,
  .plan-task,
  .plan-task .task-tick svg,
  .plan-stats-bar i{
    transition:none;
  }
}