:root {
  --bg: #07111a;
  --panel: #111c27;
  --panel2: #152331;
  --line: #263847;
  --muted: #91a6b7;
  --soft: #bbccd7;
  --cyan: #35d5e6;
  --violet: #77a9ff;
  --morning: #37cee5;
  --rest: #4bd3a0;
}
.brand-mark { background: linear-gradient(145deg, #42dce4, #72aaff); box-shadow: 0 4px 22px #35d5e644; }
.welcome h1 span { background: linear-gradient(100deg, #53dce4, #81adff); -webkit-background-clip: text; background-clip: text; }
.today-card { background: linear-gradient(118deg, #142c3b, #172737 58%, #20283b); border-color: #315064; }
.today-card:after { background: #4edee522; }
.live-dot { background: #35d5e6; box-shadow: 0 0 13px #35d5e6aa; }
.calendar { touch-action: pan-y; }
.view-controls { display:flex; align-items:center; gap:5px; padding:4px; margin:0 0 10px; border:1px solid #263644; border-radius:13px; background:#0c151e; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.view-controls::-webkit-scrollbar { display:none; }
.view-controls button { flex:none; border:0; border-radius:9px; background:transparent; color:#92a5b5; padding:8px 12px; font:600 10px 'DM Sans',sans-serif; white-space:nowrap; cursor:pointer; transition:background .18s,color .18s,transform .18s; }
.view-controls button:hover { color:#d5f5f5; }
.view-controls button.active { background:linear-gradient(110deg,#1f6978,#315f9c); color:#f3fdff; box-shadow:0 2px 12px #227ba733; }
.range-control { display:flex; align-items:center; gap:11px; margin:0 4px 12px; color:#8295a7; font-size:9px; }
.range-control input { appearance:none; min-width:55px; flex:1; height:4px; border:0; border-radius:5px; padding:0; background:linear-gradient(90deg,#39cad8,#659af5); accent-color:#50d5e0; cursor:pointer; }
.range-control input::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border-radius:50%; border:2px solid #eafaff; background:#35cfdd; box-shadow:0 0 0 4px #35cfdd25; }
.range-control input::-moz-range-thumb { width:11px; height:11px; border-radius:50%; border:2px solid #eafaff; background:#35cfdd; box-shadow:0 0 0 4px #35cfdd25; }
.range-control output { min-width:42px; text-align:right; color:#bfdde5; font-weight:700; font-size:9px; }
.is-month-view .range-control { display:none; }
.range-list { display:grid; gap:6px; }
.range-day { width:100%; min-height:57px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:7px 12px; border:1px solid #263342; border-radius:13px; background:linear-gradient(100deg,#111a24,#121d28); color:var(--white); text-align:left; cursor:pointer; transition:transform .18s,border-color .18s,background .18s,box-shadow .18s; }
.range-day:hover { transform:translateX(2px); border-color:#41647b; background:#172431; }
.range-day.selected { border-color:#43c5d4; box-shadow:0 0 0 1px #43c5d422,inset 0 0 22px #1cbaca0b; }
.range-day.today .range-date { background:#163640; border-color:#39bed0; }
.range-date { width:39px; height:39px; border:1px solid #303d4d; border-radius:12px; background:#192431; display:grid; align-content:center; justify-items:center; gap:1px; }
.range-date small { font-size:8px; line-height:10px; text-transform:capitalize; color:#9aafc0; }
.range-date strong { font:700 15px 'Manrope',sans-serif; line-height:17px; }
.range-shift { display:grid; gap:2px; min-width:0; }
.range-shift strong { font:700 12px 'Manrope',sans-serif; }
.range-shift small { font-size:9px; color:#9aabba; }
.range-shift.M strong { color:#75e4ed; }
.range-shift.P strong { color:#ffd18d; }
.range-shift.N strong { color:#ff9caf; }
.range-shift.R strong { color:#78dfad; }
.range-status { border-radius:8px; padding:6px 8px; background:#1a2531; color:#9fb0bf; font-size:9px; font-weight:600; white-space:nowrap; }
.range-day.completed { border-color:#285a4c; background:linear-gradient(100deg,#11251f,#13231f); }
.range-day.completed .range-status { background:#1b4938; color:#9ae5bd; }
.day-completed .badge { opacity:.68; }
.completed-mark { position:absolute; right:3px; top:3px; z-index:2; width:12px; height:12px; border:1px solid #9ef0c0; border-radius:50%; background:#23764d; color:#edfff4; font:700 8px/10px 'DM Sans',sans-serif; }
.done-button { margin-top:13px; width:100%; min-height:39px; display:flex; justify-content:center; align-items:center; gap:8px; border:1px solid #49bdce; border-radius:12px; background:linear-gradient(110deg,#173d4a,#1a3a52); color:#d8fbff; font:700 11px 'DM Sans',sans-serif; cursor:pointer; transition:transform .17s,filter .17s,border-color .17s,background .17s; }
.done-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.14); }
.done-button:disabled { cursor:default; opacity:.55; border-color:#3a4954; background:#18212a; color:#91a0ad; }
.done-button.is-done { border-color:#399b72; background:linear-gradient(110deg,#174a3b,#1c5143); color:#b8f5d1; }
.done-check { width:17px; height:17px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:10px; }
.completion-save-note { display:block; color:#ffd18d; font-size:9px; margin-top:6px; text-align:center; }
.completion-save-note:empty { display:none; }
.previous-night-button { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; padding:9px 4px 0; border:0; background:transparent; color:#9bc8d0; font:500 9px 'DM Sans',sans-serif; cursor:pointer; }
.previous-night-button strong { color:#b6e9e8; font-weight:700; }
.previous-night-button[hidden] { display:none; }
.progress-card { padding:15px 16px; background:linear-gradient(135deg,#122a30,#13202c); }
.progress-head { display:flex; align-items:center; gap:10px; }
.progress-symbol { width:31px; height:31px; border-radius:11px; background:#1d514a; color:#83e5c2; display:grid; place-items:center; font-size:15px; }
.progress-head .eyebrow { margin-bottom:3px; }
.progress-head h2 { font:700 13px 'Manrope',sans-serif; margin:0; }
.progress-stats { display:flex; align-items:center; gap:13px; margin-top:15px; }
.progress-stats>div:not(.stat-divider) { display:grid; gap:3px; }
.progress-stats strong { font:700 17px 'Manrope',sans-serif; color:#e9f8f5; }
.progress-stats span { font-size:9px; color:#9bb0b8; }
.stat-divider { height:27px; width:1px; background:#38505a; }
.swipe-enter { animation:swipe-in .25s cubic-bezier(.2,.75,.25,1); }
@keyframes swipe-in { from { opacity:.4; transform:translateX(var(--swipe-x)); } to { opacity:1; transform:translateX(0); } }
@media(max-width:560px) {
  .view-controls { width:100%; justify-content:space-between; }
  .view-controls button { padding:8px 9px; font-size:9px; }
  .range-control { margin-bottom:10px; }
  .range-day { min-height:58px; }
  .progress-stats { justify-content:space-between; }
  .range-status { font-size:8px; padding:5px 7px; }
}
@media(min-width:900px) and (max-width:1199px) {
  .months { grid-template-columns:1fr; }
  .month-block { padding:12px 14px 10px; }
  .month-block .day { min-height:55px; }
  .month-block .badge { font-size:9px; line-height:14px; }
  .month-block .badge small { font-size:8px; line-height:11px; }
}
@media(prefers-reduced-motion:reduce) { .swipe-enter { animation:none; } }