:root{
  --ink:#EDEAE3;
  --ink-dim:#9A9A93;
  --paper:#1B1D21;
  --card:#232529;
  --card-line: rgba(237,234,227,0.08);
  --grid-dot: rgba(237,234,227,0.05);
  --accent:#E4572E;
  --today-ring:#F2B134;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1px) 0 0/22px 22px,
    var(--paper);
  min-height:100vh;
}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 60px;}

header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--card-line);}
.title-block h1{font-size:30px;margin:0 0 4px;letter-spacing:-0.02em;font-weight:700;}
.title-block h1 .pin{color:var(--accent);}
.title-block p{margin:0;color:var(--ink-dim);font-size:13.5px;}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.year-nav{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:4px 6px;}
.year-nav button{background:none;border:none;color:var(--ink);font-size:16px;cursor:pointer;padding:4px 9px;border-radius:6px;}
.year-nav button:hover{background:rgba(255,255,255,0.06);}
.year-nav span{font-variant-numeric:tabular-nums;font-weight:600;min-width:48px;text-align:center;}

select, input[type=text]{
  background:var(--card);border:1px solid var(--card-line);color:var(--ink);
  border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit;
}
.whoami{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:6px 10px;}
.whoami label{font-size:12px;color:var(--ink-dim);}

.view-toggle{display:flex;gap:2px;background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:4px;}
.view-toggle button{background:none;border:none;color:var(--ink-dim);font-size:12.5px;padding:6px 11px;border-radius:7px;cursor:pointer;font-family:inherit;}
.view-toggle button.active{background:rgba(255,255,255,0.09);color:var(--ink);font-weight:600;}
.view-toggle button:hover:not(.active){color:var(--ink);}

.today-btn{
  background:none;border:1px solid var(--card-line);color:var(--ink-dim);
  border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;
}
.today-btn:hover{color:var(--ink);border-color:rgba(255,255,255,0.2);}

.add-row{display:flex;gap:6px;}
.add-row button{
  background:var(--accent);border:none;color:#1B1D21;font-weight:700;border-radius:8px;
  padding:8px 12px;cursor:pointer;font-size:13px;
}
.add-row button:hover{filter:brightness(1.08);}

.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:22px;font-size:12.5px;color:var(--ink-dim);}
.legend .item{display:flex;align-items:center;gap:6px;}
.swatch{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;}

.months{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.months.view-quarter{grid-template-columns:repeat(3,1fr);}
.months.view-month{grid-template-columns:1fr;max-width:560px;margin:0 auto;}
@media (max-width:980px){.months.view-year{grid-template-columns:repeat(2,1fr);} .months.view-quarter{grid-template-columns:1fr;}}
@media (max-width:560px){.months{grid-template-columns:1fr;}}

.month{background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:12px 12px 14px;}
.month h3{margin:2px 4px 10px;font-size:13.5px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--ink);}
.months.view-month .month h3{font-size:17px;}
.dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.dow span{font-size:9.5px;color:var(--ink-dim);text-align:center;}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.day{
  position:relative;min-height:40px;border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:2px 1px;cursor:pointer;
  font-size:9.5px;color:var(--ink-dim);background:rgba(255,255,255,0.02);
  transition:background .12s;
}
.day.pad{visibility:hidden;cursor:default;}
.day:hover{background:rgba(255,255,255,0.07);}
.day.today{box-shadow:inset 0 0 0 1.5px var(--today-ring);color:var(--ink);}
.day.expanded{min-height:84px;padding:6px 5px;align-items:stretch;font-size:12px;}
.day.expanded > span:first-child{align-self:flex-start;}
.chips{display:flex;flex-wrap:wrap;gap:1.5px;justify-content:center;margin-top:2px;width:100%;}
.chip{
  font-size:7.5px;line-height:1;font-weight:700;color:#14161A;
  padding:2.5px 3px;border-radius:4px;white-space:nowrap;
}
.day.expanded .chips{flex-direction:column;align-items:stretch;gap:3px;margin-top:5px;}
.day.expanded .chip{font-size:10.5px;padding:4px 6px;text-align:left;border-radius:5px;white-space:normal;}

/* --- Status picker modal --- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,10,12,0.6);
  align-items:center;justify-content:center;z-index:50;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--card);border:1px solid var(--card-line);border-radius:14px;
  padding:20px;width:100%;max-width:320px;
}
.modal h4{margin:0 0 2px;font-size:15px;}
.modal .modal-sub{margin:0 0 16px;font-size:12.5px;color:var(--ink-dim);}
.status-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.status-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--card-line);background:rgba(255,255,255,0.02);
  color:var(--ink);border-radius:10px;padding:10px 12px;font-size:13.5px;cursor:pointer;
  font-family:inherit;
}
.status-btn:hover{background:rgba(255,255,255,0.07);}
.status-btn.active{border-color:currentColor;background:rgba(255,255,255,0.09);}
.status-btn .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;}
.modal-footer button{
  border:none;border-radius:8px;padding:8px 14px;font-size:12.5px;cursor:pointer;font-family:inherit;
}
.btn-clear{background:transparent;color:var(--ink-dim);border:1px solid var(--card-line) !important;}
.btn-clear:hover{color:var(--ink);}
.btn-cancel{background:rgba(255,255,255,0.08);color:var(--ink);}

.legend-group{margin-bottom:6px;}
.legend-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-dim);margin-right:8px;}

footer{margin-top:26px;color:var(--ink-dim);font-size:12px;text-align:center;}
.loading{padding:60px;text-align:center;color:var(--ink-dim);}
.error-banner{background:#4a2323;border:1px solid #7a3535;color:#f3d0d0;padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px;}