:root{
  --bg:     #FAFAF9;
  --panel:  #FFFFFF;
  --sunk:   #F4F4F2;
  --ink:    #1A1A1F;
  --ink-2:  #56565E;
  --ink-3:  #8B8B93;
  --rule:   #E4E4E1;
  --rule-2: #D3D3CF;
  --indigo: #3E63DD;
  --indigo-s:#EDF1FE;
  --danger: #B4231C;
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r:  10px;
  --r-s: 7px;
  --ease: cubic-bezier(.2,.8,.24,1);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
}
.app{ max-width:1220px; margin:0 auto; padding:22px clamp(14px,3vw,34px) 30px; }
.top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
}
.t-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
h1{
  margin:0; font-size:clamp(21px,3vw,27px); font-weight:700; letter-spacing:-.03em;
  min-width:8ch;
}
.stepper{ display:flex; gap:4px; }
.stepper button{
  width:44px; height:44px; font-size:19px; line-height:1;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:var(--r-s); cursor:pointer;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.stepper button:hover{ background:var(--sunk); border-color:var(--ink-3); }
.ghost{
  min-height:44px; padding:0 15px;
  font:500 14px/1 var(--sans); color:var(--ink);
  background:var(--panel); border:1px solid var(--rule-2); border-radius:var(--r-s);
  cursor:pointer; transition:background .14s var(--ease), border-color .14s var(--ease);
}
.ghost:hover{ background:var(--sunk); border-color:var(--ink-3); }
.ghost.quiet{ margin-left:auto; color:var(--ink-3); }
.ghost.quiet:hover{ color:var(--danger); border-color:var(--danger); background:#FCF2F1; }
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--indigo); outline-offset:2px;
}
.body{
  display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:20px;
  padding-top:20px; align-items:start;
}
.dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px;
}
.dow span{
  font:500 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-left:3px;
}
.grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cell{
  position:relative; min-height:clamp(74px,10vw,104px);
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:9px 9px 8px; text-align:left;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  cursor:pointer; font:inherit; color:inherit;
  transition:background .13s var(--ease), border-color .13s var(--ease), transform .13s var(--ease);
}
.cell:hover{ background:var(--sunk); border-color:var(--rule-2); }
.cell:active{ transform:scale(.985); }
.cell.out{ background:transparent; color:var(--ink-3); border-color:transparent; }
.cell.out:hover{ background:var(--sunk); }
.cell .num{ font:500 14px/1 var(--sans); font-variant-numeric:tabular-nums; }
.cell.today .num{
  display:grid; place-items:center; width:25px; height:25px; margin:-4px 0 -4px -4px;
  background:var(--ink); color:#fff; border-radius:999px;
}
.cell.sel{ border-color:var(--indigo); background:var(--indigo-s); box-shadow:0 0 0 1px var(--indigo); }
.pips{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:auto; }
.pips i{ width:7px; height:7px; border-radius:999px; display:block; }
.pips em{ font:500 11px/1 var(--mono); font-style:normal; color:var(--ink-3); }
.legend{
  display:flex; gap:16px; list-style:none; margin:16px 0 0; padding:0;
  font-size:12.5px; color:var(--ink-2);
}
.legend li{ display:flex; align-items:center; gap:7px; }
.legend i{ width:9px; height:9px; border-radius:999px; }
.day{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:18px 18px 20px; position:sticky; top:20px;
}
.d-head{ display:flex; align-items:center; gap:10px; }
.day h2{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.tag:not(:empty){
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:5px 8px; border-radius:999px;
}
.d-meta{ margin:6px 0 16px; font-size:13px; color:var(--ink-3); }
.list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; }
.ev{
  display:grid; grid-template-columns:3px 1fr auto; gap:11px; align-items:center;
  padding:10px 10px 10px 0; background:var(--sunk); border-radius:var(--r-s);
  overflow:hidden;
}
.bar{ align-self:stretch; border-radius:0 3px 3px 0; }
.ev-t{ margin:0; font-size:14.5px; font-weight:500; }
.ev-time{ margin:2px 0 0; font:400 12px/1.4 var(--mono); color:var(--ink-3); }
.ev-acts{ display:flex; gap:4px; }
.mini{
  min-height:44px; padding:0 11px;   
  font:500 12px/1 var(--sans); color:var(--ink-2);
  background:transparent; border:1px solid transparent; border-radius:6px; cursor:pointer;
  transition:background .13s var(--ease), color .13s var(--ease);
}
.mini:hover{ background:var(--panel); color:var(--ink); border-color:var(--rule-2); }
.mini.danger:hover{ color:var(--danger); border-color:var(--danger); }
.empty{ padding:14px 2px; font-size:13.5px; color:var(--ink-3); }
.add{
  width:100%; min-height:44px;
  font:500 14px/1 var(--sans); color:var(--ink);
  background:var(--panel); border:1px dashed var(--rule-2); border-radius:var(--r-s);
  cursor:pointer; transition:background .14s var(--ease), border-color .14s var(--ease);
}
.add:hover{ background:var(--sunk); border-color:var(--indigo); color:var(--indigo); }
.form{ display:grid; gap:11px; padding-top:4px; }
.f-title{ margin:0; font-size:14px; font-weight:600; }
.f-row{ display:grid; gap:5px; }
.f-row span{ font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.f-two{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
input, select{
  min-height:44px; padding:0 11px; width:100%;
  font:400 14.5px/1 var(--sans); color:var(--ink);
  background:var(--bg); border:1px solid var(--rule-2); border-radius:var(--r-s);
}
input:focus, select:focus{ border-color:var(--indigo); }
.f-err:not(:empty){ margin:0; font-size:12.5px; color:var(--danger); }
.f-acts{ display:flex; gap:8px; }
.solid{
  min-height:44px; padding:0 18px;
  font:600 14px/1 var(--sans); color:#fff; background:var(--ink);
  border:0; border-radius:var(--r-s); cursor:pointer;
  transition:background .14s var(--ease);
}
.solid:hover{ background:var(--indigo); }
.foot{ margin-top:22px; padding-top:14px; border-top:1px solid var(--rule); }
.foot p{ margin:0; font:400 12px/1.6 var(--mono); color:var(--ink-3); }
@media (max-width:900px){
  .body{ grid-template-columns:1fr; }
  .day{ position:static; }
  .cell{ min-height:64px; }
}
@media (max-width:520px){
  .cell{ min-height:56px; padding:7px; gap:5px; }
  .cell .num{ font-size:13px; }
  .dow span{ font-size:11px; }
  .legend{ gap:12px; font-size:12px; }
}
@media (prefers-contrast:more){
  :root{ --ink-2:#33333A; --ink-3:#55555C; --rule:#C9C9C5; --rule-2:#A9A9A4; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}