/* LifeOS mini — same design tokens as the original React artifact,
   reimplemented as plain CSS + CSS variables for server-rendered templates. */

:root {
  --bg: #0C0F14;
  --surface: #131722;
  --surface-2: #1B202C;
  --border: #232838;
  --text: #EDEFF3;
  --text-dim: #8890A3;
  --accent: #4FD1C5;
  --amber: #F5A623;
  --danger: #F87171;
  --heat-0: #1B202C;
  --heat-1: #123935;
  --heat-2: #1B6459;
  --heat-3: #2C9B89;
  --heat-4: #4FD1C5;
}

[data-theme="light"] {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #EEF1F4;
  --border: #E1E4EA;
  --text: #171A21;
  --text-dim: #6B7280;
  --accent: #0D9488;
  --amber: #B45309;
  --danger: #DC2626;
  --heat-0: #EDEFF2;
  --heat-1: #C9EEE7;
  --heat-2: #8CDCCB;
  --heat-3: #45C0A8;
  --heat-4: #0D9488;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  transition: background-color .3s ease, color .3s ease;
  min-height: 100vh;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 48rem; margin: 0 auto; padding: 0 1rem 4rem; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0 .75rem; }
.logo { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.logo span { color: var(--accent); }
.subtitle { font-size: .75rem; color: var(--text-dim); margin-top: .125rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; }

.streak-badge {
  display: flex; align-items: center; gap: .25rem;
  padding: .25rem .625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  background: var(--surface-2); color: var(--amber);
}
.icon-btn {
  padding: .5rem; border-radius: .5rem;
  background: var(--surface-2); color: var(--text-dim);
  border: none; display: flex; align-items: center; justify-content: center;
}

/* Tabs */
.tab-bar { display: flex; gap: .25rem; padding: .25rem; border-radius: .75rem; background: var(--surface); }
.tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem 0; border-radius: .5rem; font-size: .75rem; font-weight: 500;
  color: var(--text-dim); text-decoration: none; transition: background-color .15s, color .15s;
}
.tab.active { background: var(--surface-2); color: var(--accent); }
.tab.disabled { opacity: .35; pointer-events: none; }

/* Cards */
.stack { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stat-label { display: flex; align-items: center; gap: .375rem; color: var(--text-dim); font-size: .75rem; margin-bottom: .5rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-suffix { font-size: .75rem; font-weight: 400; color: var(--text-dim); margin-right: .25rem; font-family: 'Vazirmatn', Tahoma, sans-serif; }

.section-title { font-size: .75rem; font-weight: 500; color: var(--text-dim); margin-bottom: .75rem; }
.section-title-lg { font-size: .875rem; font-weight: 600; margin-bottom: .75rem; }

/* Heatmap */
.heatmap-wrap { overflow-x: auto; }
.heatmap { display: flex; gap: .25rem; direction: ltr; }
.heatmap-labels { display: flex; flex-direction: column; gap: .25rem; margin-left: .25rem; }
.heatmap-labels span { width: .75rem; height: .75rem; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-dim); }
.heatmap-week { display: flex; flex-direction: column; gap: .25rem; }
.heatmap-cell { width: .75rem; height: .75rem; border-radius: 2px; }
.heat-0 { background: var(--heat-0); }
.heat-1 { background: var(--heat-1); }
.heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); }
.heat-4 { background: var(--heat-4); }
.heat-future { background: transparent; }
.heatmap-legend { display: flex; align-items: center; gap: .375rem; margin-top: .75rem; justify-content: flex-end; direction: ltr; }

/* Today view */
.today-item { font-size: .75rem; display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem; }
.today-empty { font-size: .75rem; color: var(--text-dim); margin-bottom: .75rem; }
.quick-actions { display: flex; gap: .5rem; margin-top: .75rem; }

/* Buttons */
.btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem .75rem; border-radius: .5rem; font-size: .75rem; font-weight: 500;
  border: none; text-decoration: none; color: var(--text);
}
.btn-soft { background: var(--surface-2); color: var(--text); }
.btn-accent { background: var(--accent); color: var(--bg); font-weight: 600; }
.btn-block { width: 100%; }
.btn-dashed { background: var(--surface); border: 1px dashed var(--border); color: var(--text-dim); padding: .75rem 0; }

/* Learning: course cards */
.course-card .course-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.course-name { font-size: .875rem; font-weight: 600; }
.course-meta { font-size: .75rem; color: var(--text-dim); margin-bottom: .5rem; }
.progress-track { height: .375rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: .75rem; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.course-streak { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--amber); margin-bottom: .5rem; }

.session-list { border-top: 1px solid var(--border); margin-top: .5rem; padding-top: .5rem; display: flex; flex-direction: column; gap: .375rem; }
.session-row { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--text-dim); gap: .5rem; }
.session-row form { display: flex; }
.session-row button { background: transparent; border: none; color: var(--text-dim); padding: 0; display: flex; }

/* Forms */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.form-inline { background: var(--surface-2); border-radius: .5rem; padding: .75rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.input {
  width: 100%; font-size: .75rem; border-radius: .375rem; padding: .5rem .625rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); outline: none;
  font-family: inherit;
}
.input:focus { border-color: var(--accent); }
select.input { appearance: none; }

.empty-state { font-size: .75rem; text-align: center; padding: 2rem 0; color: var(--text-dim); }

/* Journal: mood picker (radio inputs styled as pill buttons, no JS needed) */
.mood-picker { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: .75rem; }
.mood-picker input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.mood-option {
  flex: 1; min-width: 4.2rem; text-align: center; padding: .4rem 0;
  border-radius: .5rem; font-size: .75rem; font-weight: 500;
  background: var(--surface-2); color: var(--text-dim); cursor: pointer; user-select: none;
  transition: background-color .15s, color .15s;
}
.mood-picker input[type="radio"]:checked + .mood-option { background: var(--accent); color: var(--bg); font-weight: 600; }
.mood-picker input[type="radio"]:focus-visible + .mood-option { outline: 2px solid var(--accent); outline-offset: 1px; }

textarea.input { resize: vertical; min-height: 5.5rem; line-height: 1.6; }

.history-entry summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.history-entry .history-meta { display: flex; align-items: center; gap: .5rem; }
.history-entry .history-date { font-size: .75rem; font-weight: 500; }
.history-entry .history-mood { font-size: .75rem; color: var(--text-dim); }
.history-entry .history-text { font-size: .75rem; margin-top: .625rem; line-height: 1.7; white-space: pre-wrap; }
.history-entry form { display: flex; }
.history-entry .icon-btn-flat { background: transparent; border: none; color: var(--text-dim); padding: .25rem; display: flex; }

/* Theme-toggle icon swap (no JS DOM manipulation needed) */
.icon-sun, .icon-moon { display: none; align-items: center; justify-content: center; }
[data-theme="dark"] .icon-moon { display: flex; }
[data-theme="light"] .icon-sun { display: flex; }

@media (max-width: 420px) {
  .stat-value { font-size: 1.25rem; }
}


/* Task Manager — compact LifeOS visual language */
.tasks-page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.eyebrow { color:var(--accent); font-size:.58rem; font-weight:700; letter-spacing:.14em; margin-bottom:.25rem; }
.tasks-page-title { margin:0; font-size:1.15rem; letter-spacing:-.025em; }
.tasks-page-date { margin:.3rem 0 0; color:var(--text-dim); font-size:.7rem; }
.add-task-trigger { flex:0 0 auto; min-width:8.5rem; box-shadow:0 6px 18px rgba(79,209,197,.12); }

.task-overview { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; }
.task-overview-main { flex:1; min-width:0; }
.task-overview-label { color:var(--text-dim); font-size:.68rem; margin-bottom:.3rem; }
.task-overview-line { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.task-overview-line strong { font-size:.85rem; }
.task-percent { color:var(--accent); font-size:.68rem; }
.task-progress-track { height:.3rem; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:.55rem; }
.task-progress-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .25s ease; }
.task-overview-side { min-width:4.5rem; padding-right:.85rem; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:.2rem; }
.overview-mini-label { color:var(--text-dim); font-size:.6rem; }
.task-overview-side strong { font-size:.8rem; }

.task-filters { display:flex; gap:.2rem; background:var(--surface); padding:.25rem; border:1px solid var(--border); border-radius:.65rem; }
.task-filter { flex:1; text-align:center; padding:.52rem .2rem; border-radius:.45rem; text-decoration:none; color:var(--text-dim); font-size:.68rem; transition:background-color .15s,color .15s; }
.task-filter:hover { color:var(--text); }
.task-filter.active { background:var(--surface-2); color:var(--accent); font-weight:600; }

.tasks-section { margin-top:.15rem; }
.tasks-section-head { display:flex; align-items:end; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.tasks-section-head .section-title-lg { margin-bottom:.15rem; }
.tasks-section-sub { margin:0; color:var(--text-dim); font-size:.62rem; line-height:1.6; }
.task-count { min-width:1.65rem; height:1.65rem; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--surface-2); color:var(--text-dim); font-size:.65rem; }

.task-list { display:flex; flex-direction:column; gap:.4rem; }
.task-card { display:flex; align-items:center; gap:.65rem; min-height:4.1rem; padding:.7rem .75rem; background:var(--surface); border:1px solid var(--border); border-radius:.7rem; transition:opacity .2s, transform .15s, border-color .15s, background-color .15s; }
.task-card:hover { border-color:color-mix(in srgb, var(--accent) 25%, var(--border)); background:var(--surface-2); }
.task-card.is-completed { opacity:.48; background:var(--surface); }
.task-check-form { display:flex; flex:0 0 auto; }
.task-check { width:1.45rem; height:1.45rem; border-radius:.45rem; border:1px solid var(--border); background:var(--surface-2); color:var(--bg); display:flex; align-items:center; justify-content:center; padding:0; transition:background-color .15s,border-color .15s; }
.task-check:hover { border-color:var(--accent); }
.task-card.is-completed .task-check { border-color:var(--accent); background:var(--accent); }
.task-card-main { flex:1; min-width:0; text-decoration:none; }
.task-card-title-row { display:flex; align-items:center; gap:.45rem; min-width:0; }
.task-title { font-size:.78rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-card.is-completed .task-title { text-decoration:line-through; color:var(--text-dim); }
.task-priority { flex:0 0 auto; padding:.14rem .38rem; border-radius:999px; font-size:.55rem; line-height:1.2; }
.priority-high { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.task-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-top:.32rem; color:var(--text-dim); font-size:.59rem; }
.task-card-meta span { display:inline-flex; align-items:center; gap:.18rem; }
.task-type-badge { color:var(--accent); }
.priority-dot { color:var(--text-dim); }
.priority-medium-dot { color:var(--amber); }
.task-description { margin-top:.3rem; color:var(--text-dim); font-size:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-edit-link { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; color:var(--text-dim); text-decoration:none; border-radius:.4rem; }
.task-edit-link:hover { color:var(--accent); background:var(--surface-2); }

.empty-task-state { text-align:center; padding:2.2rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.empty-task-icon { width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; border-radius:.7rem; background:var(--surface-2); color:var(--accent); margin-bottom:.2rem; }
.empty-task-title { font-size:.8rem; font-weight:600; }
.empty-task-sub { color:var(--text-dim); font-size:.65rem; margin-bottom:.5rem; }

/* Modal */
body.modal-open { overflow:hidden; }
.task-modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; }
.task-modal.is-open { display:flex; }
.task-modal-backdrop { position:absolute; inset:0; background:rgba(4,7,12,.72); backdrop-filter:blur(5px); }
.task-modal-dialog { position:relative; width:min(100%,30rem); max-height:min(90vh,42rem); overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow:0 24px 70px rgba(0,0,0,.35); animation:taskModalIn .16s ease-out; }
@keyframes taskModalIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.task-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:.8rem; margin-bottom:.1rem; border-bottom:1px solid var(--border); }
.task-modal-head h2 { margin:0; font-size:.95rem; }
.modal-close { border:0; background:var(--surface-2); color:var(--text-dim); width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:.5rem; }
.modal-close:hover { color:var(--text); }
.task-form { display:flex; flex-direction:column; gap:.48rem; }
.task-title-input { font-size:.82rem; padding:.65rem .7rem; }
.field-label { color:var(--text-dim); font-size:.64rem; margin-top:.15rem; }
.field-label span { opacity:.65; }
.task-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.task-form-grid > div { min-width:0; }
.task-modal-actions { display:flex; gap:.55rem; margin-top:.35rem; }
.task-modal-actions .btn { flex:1; }
.form-errors { color:var(--danger); font-size:.64rem; line-height:1.5; }
.edit-task-card { max-width:30rem; margin:0 auto; }

@media (max-width:520px) {
  .tasks-page-title { font-size:1.02rem; }
  .add-task-trigger { min-width:auto; padding:.55rem .7rem; }
  .add-task-trigger span { display:none; }
  .task-overview { padding:.75rem; }
  .task-overview-side { min-width:4rem; }
  .task-card { padding:.65rem; }
  .task-form-grid { grid-template-columns:1fr; }
  .tasks-section-sub { max-width:16rem; }
}

/* Task recurrence controls */
.recurrence-panel { padding:.85rem; margin-top:.15rem; border:1px solid var(--border); background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-radius:.8rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.recurrence-panel[hidden] { display:none; }
.recurrence-panel-head { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.7rem; }
.recurrence-panel-head strong { display:block; font-size:.72rem; }
.recurrence-panel-head small { display:block; margin-top:.18rem; color:var(--text-dim); font-size:.57rem; line-height:1.55; }
.recurrence-all-btn { border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); color:var(--accent); border-radius:.55rem; padding:.42rem .65rem; font:inherit; font-size:.58rem; cursor:pointer; white-space:nowrap; transition:.16s ease; }
.recurrence-all-btn:hover,.recurrence-all-btn.is-active { border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); transform:translateY(-1px); }
.weekday-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.42rem; }
.weekday-option, .month-day-option { position:relative; display:flex; align-items:center; justify-content:center; min-height:2.15rem; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); border-radius:.58rem; font-size:.59rem; cursor:pointer; transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; user-select:none; }
.weekday-option:hover, .month-day-option:hover { border-color:color-mix(in srgb,var(--accent) 42%,var(--border)); color:var(--text); transform:translateY(-1px); }
.weekday-option input, .month-day-option input { position:absolute; opacity:0; pointer-events:none; }
.weekday-option span, .month-day-option span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:inherit; }
.weekday-option span::before, .month-day-option span::before { content:""; width:.32rem; height:.32rem; border-radius:50%; margin-left:.28rem; background:var(--border); transition:.16s ease; }
.weekday-option:has(input:checked), .month-day-option:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 62%,var(--border)); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--text); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent); }
.weekday-option:has(input:checked) span::before, .month-day-option:has(input:checked) span::before { background:var(--accent); box-shadow:0 0 0 .2rem color-mix(in srgb,var(--accent) 12%,transparent); }
.month-days-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.34rem; }
.month-day-option { min-height:2rem; font-variant-numeric:tabular-nums; }
.jalali-date-input { direction:ltr; text-align:center; letter-spacing:.04em; }
.jalali-date-input::placeholder { color:var(--text-dim); opacity:.7; }
.task-repeat-hint { margin-top:.28rem; color:var(--accent); font-size:.54rem; }
.task-card-actions { display:flex; align-items:center; gap:.15rem; flex:0 0 auto; }
.task-delete-form { display:flex; }
.task-delete-link { border:0; background:transparent; color:var(--text-dim); width:1.7rem; height:1.7rem; border-radius:.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.task-delete-link:hover { color:#ef6b73; background:var(--surface-2); }
@media (max-width:600px) { .weekday-grid { grid-template-columns:repeat(2,1fr); } .month-days-grid { grid-template-columns:repeat(7,1fr); } }


/* Persian Jalali date picker */
.jalali-picker-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.jalali-picker-field .jalali-date-input,
.jalali-picker-field .calendar-date-input {
  width: 100%;
  padding-left: 2.75rem;
  cursor: pointer;
}
.jalali-picker-trigger {
  position: absolute;
  left: .35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: .45rem;
  background: transparent;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transition: background-color .15s, color .15s;
}
.jalali-picker-trigger:hover,
.jalali-picker-field.is-open .jalali-picker-trigger {
  background: var(--surface-2);
  color: var(--accent);
}
.jalali-picker-popover {
  position: absolute;
  z-index: 1005;
  top: calc(100% + .5rem);
  right: 0;
  width: min(21rem, calc(100vw - 2rem));
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--surface);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.28);
  direction: rtl;
}
.jalali-picker-popover[hidden] { display: none; }
.jalali-picker-header {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
  text-align: center;
}
.jalali-picker-header strong {
  font-size: .82rem;
  font-weight: 700;
}
.jalali-picker-nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
}
.jalali-picker-nav:hover { color: var(--accent); border-color: var(--accent); }
.jalali-picker-weekdays,
.jalali-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}
.jalali-picker-weekdays {
  margin-bottom: .25rem;
}
.jalali-picker-weekdays span {
  height: 1.7rem;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  font-size: .65rem;
  font-weight: 600;
}
.jalali-picker-day {
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: .72rem;
  transition: background-color .12s, border-color .12s, color .12s, transform .12s;
}
.jalali-picker-day:not(.is-empty):hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--accent);
  transform: translateY(-1px);
}
.jalali-picker-day.is-selected {
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
}
.jalali-picker-day.is-today:not(.is-selected) {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.jalali-picker-day.is-empty { pointer-events: none; }
.jalali-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  border-top: 1px solid var(--border);
  margin-top: .7rem;
  padding-top: .65rem;
}
.jalali-picker-today,
.jalali-picker-clear {
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: .7rem;
  padding: .4rem .6rem;
}
.jalali-picker-today { color: var(--accent); font-weight: 700; }
.jalali-picker-today:hover,
.jalali-picker-clear:hover {
  background: var(--surface-2);
  color: var(--text);
}


/* Task scheduler / sync controls */
.tasks-page-actions { display:flex; align-items:center; gap:.55rem; }
.task-sync-form { margin:0; }
.task-sync-btn { display:inline-flex; align-items:center; gap:.4rem; }
.sync-icon { display:inline-grid; place-items:center; width:1rem; height:1rem; font-size:1.05rem; line-height:1; transition:transform .35s ease; }
.task-sync-btn:hover .sync-icon { transform:rotate(180deg); }
@media (max-width: 640px) {
  .tasks-page-actions { width:100%; }
  .tasks-page-actions > * { flex:1; }
  .tasks-page-actions .btn { width:100%; justify-content:center; }
}

/* Recurrence lifecycle */
.recurrence-duration-panel,.recurrence-lifecycle-card{padding:.85rem;margin-top:.15rem;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface));border-radius:.8rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.recurrence-duration-panel[hidden]{display:none}
.recurrence-duration-head,.lifecycle-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:.65rem}
.recurrence-duration-head strong,.lifecycle-head strong{display:block;font-size:.72rem}.recurrence-duration-head small,.lifecycle-head small{display:block;color:var(--text-dim);font-size:.57rem;line-height:1.55;margin-top:.18rem}
.recurrence-duration-options ul{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;list-style:none;padding:0;margin:0}.recurrence-duration-options li{margin:0}.recurrence-duration-options label{display:flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:.42rem .5rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface);color:var(--text-dim);font-size:.6rem;cursor:pointer;transition:.15s ease}.recurrence-duration-options label:has(input:checked){border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}.recurrence-duration-options input{accent-color:var(--accent)}
.recurrence-duration-input{margin-top:.55rem}.recurrence-duration-input[hidden]{display:none}.field-help{display:block;color:var(--text-dim);font-size:.55rem;margin-top:.25rem}
.task-status-badge{display:inline-flex;align-items:center;padding:.12rem .38rem;border-radius:999px;font-size:.52rem;border:1px solid var(--border)}.status-active{color:var(--accent)}.status-paused{color:#e5b86a}.status-finished{color:var(--text-dim)}
.lifecycle-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;margin-bottom:.65rem}.lifecycle-stats>div{padding:.5rem .55rem;border-radius:.55rem;background:var(--surface);border:1px solid var(--border)}.lifecycle-stats span{display:block;color:var(--text-dim);font-size:.54rem;margin-bottom:.18rem}.lifecycle-stats strong{font-size:.7rem}.lifecycle-actions{display:flex;gap:.45rem}.lifecycle-btn{flex:1}.btn-danger-soft{border:1px solid color-mix(in srgb,#ef6b73 35%,var(--border));background:color-mix(in srgb,#ef6b73 7%,var(--surface));color:#ef8a91}.btn-danger-soft:hover{background:color-mix(in srgb,#ef6b73 14%,var(--surface));border-color:color-mix(in srgb,#ef6b73 55%,var(--border))}
@media (max-width:600px){.recurrence-duration-options ul{grid-template-columns:1fr}.lifecycle-actions{flex-direction:column}}

/* Lifecycle actions use independent forms so they never nest inside the edit form. */
.lifecycle-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.lifecycle-form { margin:0; flex:1 1 10rem; display:flex; }
.lifecycle-form .lifecycle-btn { width:100%; }

/* Cross-domain dashboard/statistics/project additions */
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.section-subtitle { color:var(--text-dim); font-size:.62rem; margin-top:.25rem; line-height:1.6; }
.today-item { display:flex; align-items:center; gap:.4rem; padding:.48rem 0; border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent); font-size:.68rem; }
.today-item:last-of-type { border-bottom:0; }
.today-item-done { color:var(--text-dim); text-decoration:line-through; }
.stat-period-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.activity-table-wrap { overflow:auto; }
.activity-table { width:100%; border-collapse:collapse; font-size:.62rem; }
.activity-table th,.activity-table td { padding:.55rem .45rem; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
.activity-table th { color:var(--text-dim); font-weight:500; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.project-card { min-width:0; }
.project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.project-name { font-size:.82rem; font-weight:650; }
.project-status,.project-meta { margin-top:.22rem; color:var(--text-dim); font-size:.59rem; }
.project-description { margin:.65rem 0; color:var(--text-dim); font-size:.62rem; line-height:1.7; }
.project-actions { display:flex; gap:.4rem; margin-top:.7rem; }
.project-form { display:grid; gap:.45rem; }
.project-form .task-modal-actions { display:flex; }
@media (max-width:700px) { .stat-period-grid,.project-grid { grid-template-columns:1fr; } .page-heading { align-items:stretch; } }

/* Statistics v2 */
.stats-summary-card { overflow:hidden; }
.stats-summary-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.stats-summary-note { color:var(--text-dim); font-size:.58rem; margin-top:.25rem; }
.stats-streak { min-width:7rem; padding:.55rem .7rem; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:.7rem; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); text-align:center; }
.stats-streak span { display:block; color:var(--text-dim); font-size:.52rem; }
.stats-streak strong { display:block; margin-top:.2rem; color:var(--accent); font-size:.8rem; }
.stats-period-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:.75rem; }
.stats-period-table { width:100%; min-width:31rem; border-collapse:separate; border-spacing:0; font-size:.65rem; }
.stats-period-table th,.stats-period-table td { padding:.72rem .75rem; border-bottom:1px solid var(--border); text-align:center; }
.stats-period-table thead th { background:var(--surface-2); color:var(--text-dim); font-size:.57rem; font-weight:600; }
.stats-period-table thead th:first-child { text-align:right; }
.stats-period-table tbody th { text-align:right; color:var(--text-dim); font-weight:500; }
.stats-period-table tbody td { font-family:var(--font-mono, ui-monospace, monospace); font-weight:700; color:var(--text); }
.stats-period-table tbody tr:last-child th,.stats-period-table tbody tr:last-child td { border-bottom:0; }
.stats-period-table tbody tr:hover th,.stats-period-table tbody tr:hover td { background:color-mix(in srgb,var(--accent) 4%,transparent); }
.activity-table-rich td { vertical-align:middle; }
.activity-number { display:inline-flex; min-width:1.65rem; height:1.65rem; padding:0 .35rem; align-items:center; justify-content:center; border-radius:.45rem; background:color-mix(in srgb,var(--accent) 11%,var(--surface)); color:var(--accent); font-weight:700; }
.empty-stat-state { padding:1.2rem .5rem; text-align:center; color:var(--text-dim); font-size:.65rem; }
.stats-percent { color:var(--accent); font-weight:700; }
@media (max-width:600px) { .stats-summary-head { align-items:stretch; flex-direction:column; } .stats-streak { width:100%; } }

/* Projects v2: visible progress is a first-class card section, while editing stays unchanged. */
.project-progress-block { margin-top:.85rem; padding:.7rem; border:1px solid var(--border); border-radius:.7rem; background:var(--surface-2); }
.project-progress-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.45rem; }
.project-progress-label { color:var(--text-dim); font-size:.55rem; }
.project-progress-value { color:var(--accent); font-family:var(--font-mono,ui-monospace,monospace); font-size:.7rem; font-weight:800; }
.project-progress-track { height:.55rem; border-radius:999px; overflow:hidden; background:var(--border); }
.project-progress-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,white)); transition:width .25s ease; }
.project-footer { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.6rem; color:var(--text-dim); font-size:.55rem; }
.project-status-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .45rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); }


/* Course session quick-log modal opened after completing a course task. */
.course-session-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.course-session-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(5px); }
.course-session-dialog { position:relative; width:min(35rem,100%); max-height:min(90vh,42rem); overflow:auto; padding:1.2rem; border:1px solid var(--border); border-radius:1rem; background:var(--surface); box-shadow:0 1.5rem 4rem rgba(0,0,0,.35); }
.course-session-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.course-session-head h2 { margin:.2rem 0 .35rem; font-size:1.15rem; }
.course-session-head p { margin:0; color:var(--text-dim); font-size:.68rem; line-height:1.7; }
.course-session-head .modal-close { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:.55rem; border:1px solid var(--border); color:var(--text-dim); text-decoration:none; font-size:1.25rem; }
.course-session-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.course-session-note { grid-column:1 / -1; }
.course-session-form .input { width:100%; }
.course-session-actions { display:flex; justify-content:flex-end; gap:.55rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--border); }
@media (max-width:600px) { .course-session-grid { grid-template-columns:1fr; } .course-session-note { grid-column:auto; } .course-session-actions { flex-direction:column-reverse; } .course-session-actions .btn { width:100%; justify-content:center; } }

/* Settings / calendar preference */
.badge { display:inline-flex; align-items:center; padding:.25rem .55rem; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); font-size:.65rem; }
.form-success { color:var(--accent); font-size:.72rem; padding:.55rem .7rem; border:1px solid var(--border); border-radius:.6rem; background:var(--surface-2); }


/* Weekly dashboard planner */
.weekly-planner-card{overflow:hidden}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.planner-subtitle{font-size:.58rem;color:var(--text-dim);margin-top:.2rem}.weekly-planner{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem;margin-top:.8rem}.week-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:.22rem;min-height:5.7rem;padding:.55rem .3rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface-2);color:var(--text-dim);cursor:pointer;transition:.16s ease}.week-day:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--text)}.week-day.is-today{border-color:color-mix(in srgb,var(--accent) 70%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}.week-day-name{font-weight:700;font-size:.7rem}.week-day-date{font-size:.56rem}.week-day-count{font-size:.52rem;color:var(--text-dim)}.shift-pill{margin-top:auto;padding:.16rem .38rem;border-radius:999px;font-size:.48rem}.shift-day{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}.shift-night{background:color-mix(in srgb,#7b61ff 13%,var(--surface));color:#a996ff}.planner-modal{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:1rem}.planner-modal.is-open{display:flex}.planner-modal-backdrop{position:absolute;inset:0;background:rgba(4,7,12,.72);backdrop-filter:blur(5px)}.planner-modal-dialog{position:relative;width:min(100%,34rem);max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:0 24px 70px rgba(0,0,0,.35)}.planner-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);padding-bottom:.8rem}.planner-modal-head h2{margin:.2rem 0 0;font-size:1rem}.planner-shift-panel{display:flex;align-items:center;justify-content:center;min-height:7rem;margin:1rem 0;border-radius:.85rem;background:var(--surface-2);border:1px solid var(--border);font-size:1.1rem;font-weight:800;color:var(--text-dim)}.planner-shift-panel.day{background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 13%,var(--surface-2)),var(--surface-2));color:var(--accent)}.planner-shift-panel.night{background:linear-gradient(to top,color-mix(in srgb,#7b61ff 13%,var(--surface-2)),var(--surface-2));color:#a996ff}.planner-task-list{display:flex;flex-direction:column;gap:.4rem}.planner-task{display:flex;align-items:center;gap:.55rem;padding:.65rem .7rem;border:1px solid var(--border);border-radius:.65rem;background:var(--surface-2);font-size:.68rem}.planner-task.done{opacity:.62}.planner-check{font-size:.8rem;color:var(--accent)}
.task-library-trigger{display:inline-flex;align-items:center;gap:.4rem}.task-library-dialog{width:min(100%,42rem)}.task-library-list{display:flex;flex-direction:column;gap:.45rem}.library-task-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.65rem;padding:.7rem;border:1px solid var(--border);border-radius:.7rem;background:var(--surface-2)}.library-task-title{font-size:.72rem;font-weight:700}.library-task-meta,.library-next{font-size:.54rem;color:var(--text-dim);margin-top:.2rem}.library-task-side{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}.course-option-group{padding:1rem;margin-top:.5rem;border:1px solid var(--border);border-radius:.8rem;background:var(--surface-2)}.course-option-title{font-weight:700;margin-bottom:.65rem}.course-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.course-type-option{position:relative;display:flex;align-items:stretch;min-height:4.3rem;cursor:pointer}.course-type-option input{position:absolute;opacity:0;pointer-events:none}.course-type-option span{display:flex;flex-direction:column;justify-content:center;gap:.25rem;width:100%;padding:.65rem .7rem;border:1px solid var(--border);border-radius:.7rem;background:var(--surface);transition:.16s ease}.course-type-option:hover span{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateY(-1px)}.course-type-option:has(input:checked) span{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent)}.course-type-option strong{font-size:.66rem}.course-type-option small{font-size:.52rem;color:var(--text-dim);line-height:1.5}.study-weekday-grid{margin-top:.3rem}.study-weekday-grid .weekday-option{min-height:2.4rem}
@media (max-width:800px){.weekly-planner{grid-template-columns:repeat(4,1fr)}.course-type-grid{grid-template-columns:1fr}.library-task-card{grid-template-columns:1fr auto}}
@media (max-width:500px){.weekly-planner{grid-template-columns:repeat(2,1fr)}.week-day{min-height:5.1rem}.library-task-card{grid-template-columns:1fr}.library-task-side{align-items:flex-start}}

.settings-stack{display:flex;flex-direction:column;gap:1rem}.settings-card{padding:1rem}.settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.settings-head h2{margin:0 0 .3rem;font-size:1rem}.settings-message{margin-bottom:.8rem}.shift-planner-form{display:flex;flex-direction:column;gap:.8rem}.shift-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.shift-mode-option{position:relative;cursor:pointer}.shift-mode-option input{position:absolute;opacity:0;pointer-events:none}.shift-mode-option span{display:flex;flex-direction:column;gap:.25rem;min-height:4.2rem;justify-content:center;padding:.7rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface-2);transition:.16s ease}.shift-mode-option:hover span{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.shift-mode-option:has(input:checked) span{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}.shift-mode-option strong{font-size:.66rem}.shift-mode-option small{font-size:.52rem;color:var(--text-dim)}.shift-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;align-items:end}.shift-fields .field-label{display:flex;flex-direction:column;gap:.35rem}.shift-list-head{display:flex;justify-content:space-between;align-items:center;margin:1.2rem 0 .6rem}.shift-list{display:flex;flex-direction:column;gap:.35rem;max-height:24rem;overflow:auto}.shift-row{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--border);border-radius:.65rem;background:var(--surface-2)}.shift-row-day{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent)}.shift-row-night{background:color-mix(in srgb,#7b61ff 12%,var(--surface-2));color:#a996ff}.library-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;align-items:end;margin:.8rem 0}.library-toolbar label{display:flex;flex-direction:column;gap:.3rem;font-size:.55rem;color:var(--text-dim)}.library-result-count{font-size:.56rem;color:var(--text-dim);margin-bottom:.55rem}.library-task-card-detailed{grid-template-columns:1fr auto}.library-task-title-row{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.library-task-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .7rem;margin-top:.45rem;font-size:.55rem;color:var(--text-dim)}.library-task-details strong{color:var(--text)}.library-task-description{margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--border);font-size:.58rem;line-height:1.8;color:var(--text-dim);white-space:pre-wrap}.library-pagination{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.8rem}.library-page-indicator{font-size:.58rem;color:var(--text-dim)}.study-all-days-option{display:block;position:relative;cursor:pointer}.study-all-days-option>input{position:absolute;opacity:0;pointer-events:none}.study-all-days-card{position:relative;display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface);transition:.16s ease}.study-all-days-card strong{font-size:.68rem}.study-all-days-card small{font-size:.53rem;color:var(--text-dim)}.study-toggle-mark{margin-right:auto;width:1.4rem;height:1.4rem;display:grid;place-items:center;border:1px solid var(--border);border-radius:.45rem;color:transparent}.study-all-days-option>input:checked+.study-all-days-card{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}.study-all-days-option>input:checked+.study-all-days-card .study-toggle-mark{background:var(--accent);border-color:var(--accent);color:var(--surface)}
@media(max-width:800px){.shift-mode-grid{grid-template-columns:repeat(2,1fr)}.shift-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.library-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.library-task-details{grid-template-columns:1fr}}

/* Shift calendar: compact month grid + compact picker */
.shift-calendar-card{padding:1rem}.shift-calendar-head{align-items:center}.shift-month-nav{display:flex;align-items:center;gap:.55rem}.shift-month-nav strong{min-width:7rem;text-align:center;font-size:.72rem}.shift-month-btn{display:inline-flex;align-items:center;justify-content:center;padding:.38rem .6rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface-2);color:var(--text);font-size:.58rem;text-decoration:none;white-space:nowrap}.shift-month-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.shift-calendar-form{display:flex;flex-direction:column;gap:.65rem}.shift-weekdays,.shift-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}.shift-weekdays{margin-top:.1rem}.shift-weekdays span{text-align:center;font-size:.58rem;font-weight:700;color:var(--text-dim);padding:.25rem 0}.shift-day-empty{min-height:3.7rem}.shift-day-cell{min-height:3.7rem;padding:.4rem .25rem;border:1px solid var(--border);border-radius:.65rem;background:var(--surface-2);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:.15s ease}.shift-day-cell:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.shift-day-number{font-size:.72rem;font-weight:800}.shift-day-state{font-size:.52rem;color:var(--text-dim)}.shift-day-cell.shift-day{background:color-mix(in srgb,var(--accent) 11%,var(--surface-2));border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}.shift-day-cell.shift-day .shift-day-state{color:var(--accent)}.shift-day-cell.shift-night{background:color-mix(in srgb,#7b61ff 11%,var(--surface-2));border-color:color-mix(in srgb,#7b61ff 38%,var(--border))}.shift-day-cell.shift-night .shift-day-state{color:#a996ff}.shift-day-cell.shift-off{background:color-mix(in srgb,var(--text-dim) 8%,var(--surface-2));border-style:dashed}.shift-save-btn{align-self:center;padding:.5rem 1.1rem;font-size:.62rem}.shift-picker-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:1rem}.shift-picker-modal.is-open{display:flex}.shift-picker-backdrop{position:absolute;inset:0;background:rgba(4,7,12,.68);backdrop-filter:blur(4px)}.shift-picker-dialog{position:relative;width:min(22rem,calc(100vw - 2rem));padding:.8rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface);box-shadow:0 20px 55px rgba(0,0,0,.3)}.shift-picker-head{display:flex;align-items:center;justify-content:space-between;padding:0 .15rem .65rem;border-bottom:1px solid var(--border);font-size:.7rem}.shift-picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding-top:.65rem}.shift-choice{min-height:2.45rem;padding:.4rem .55rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface-2);color:var(--text);font:inherit;font-size:.6rem;font-weight:700;cursor:pointer}.shift-choice:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateY(-1px)}.shift-choice-day{color:var(--accent)}.shift-choice-night{color:#a996ff}.shift-choice-off{color:var(--text)}.shift-choice-clear{grid-column:1 / -1;color:var(--text-dim);min-height:2.2rem}
@media(max-width:700px){.shift-calendar-head{align-items:flex-start;flex-direction:column}.shift-month-nav{width:100%;justify-content:space-between}.shift-month-nav strong{min-width:0}.shift-weekdays,.shift-month-grid{gap:.25rem}.shift-day-cell{min-height:3.1rem}.shift-day-empty{min-height:3.1rem}.shift-day-number{font-size:.64rem}.shift-day-state{font-size:.46rem}}

.library-card-actions{display:flex;align-items:center;gap:.25rem}.task-delete-modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;padding:1rem}.task-delete-modal.is-open{display:flex}.task-delete-backdrop{position:absolute;inset:0;background:rgba(4,7,12,.68);backdrop-filter:blur(4px)}.task-delete-dialog{position:relative;width:min(25rem,calc(100vw - 2rem));padding:.9rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface);box-shadow:0 20px 55px rgba(0,0,0,.3)}.task-delete-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.6rem;border-bottom:1px solid var(--border);font-size:.7rem}.task-delete-dialog p{font-size:.62rem;color:var(--text-dim);line-height:1.8;margin:.75rem 0}.task-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.task-delete-actions form{margin:0}.task-delete-actions .btn{width:100%;font-size:.58rem;padding:.5rem .55rem}

/* ================================================================
   Mobile responsiveness pass
   Keep the compact LifeOS layout intact below 600px without
   introducing accidental wrapping or horizontal page overflow.
   ================================================================ */
html, body { max-width:100%; overflow-x:hidden; }
.container { width:100%; min-width:0; }
.tab-bar { min-width:0; overflow:hidden; }
.tab { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 600px) {
  .container { padding-left:.65rem; padding-right:.65rem; padding-bottom:2.5rem; }
  .header { padding-top:1rem; gap:.65rem; }
  .header > div:first-child { min-width:0; }
  .logo, .subtitle { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .header-actions { flex:0 0 auto; }
  .tab-bar { gap:.12rem; padding:.18rem; }
  .tab { gap:.22rem; padding:.46rem .18rem; font-size:.62rem; }
  .tab svg { flex:0 0 auto; }

  /* Dashboard weekly planner: always one horizontal row on phones. */
  .weekly-planner-card { overflow:hidden; }
  .weekly-planner {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding:.05rem .05rem .35rem;
    margin-left:-.05rem;
    margin-right:-.05rem;
  }
  .week-day {
    flex:0 0 7.2rem;
    min-width:7.2rem;
    min-height:5.25rem;
  }
  .week-day-name { white-space:nowrap; font-size:.62rem; }
  .week-day-date, .week-day-count { white-space:nowrap; }

  /* Tasks header: never let the title/buttons collapse into broken lines. */
  .tasks-page-head { flex-direction:column; align-items:stretch; gap:.65rem; }
  .tasks-page-head > div:first-child { min-width:0; }
  .tasks-page-title { white-space:nowrap; font-size:.95rem; }
  .tasks-page-date { white-space:nowrap; }
  .tasks-page-actions { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
  .tasks-page-actions > *, .tasks-page-actions .btn { min-width:0; width:100%; }
  .tasks-page-actions .btn { padding:.5rem .3rem; font-size:.56rem; white-space:nowrap; }
  .task-library-trigger span, .add-task-trigger span, .task-sync-btn span:not(.sync-icon) { display:inline !important; }
  .task-library-trigger, .add-task-trigger, .task-sync-btn { overflow:hidden; text-overflow:ellipsis; }
  .task-library-trigger svg, .add-task-trigger svg, .task-sync-btn .sync-icon { flex:0 0 auto; }
  .task-card { min-width:0; }
  .task-card-main { min-width:0; }
  .task-title { white-space:normal; overflow-wrap:anywhere; }
  .task-description { white-space:nowrap; }

  /* Statistics: make tables genuinely fit the viewport instead of forcing
     a second horizontal scroll area. */
  .stats-period-table-wrap, .activity-table-wrap { overflow:visible; }
  .stats-period-table, .activity-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
  }
  .stats-period-table { font-size:.53rem; }
  .stats-period-table th, .stats-period-table td {
    padding:.48rem .24rem;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .stats-period-table th:first-child { width:34%; }
  .activity-table { font-size:.5rem; }
  .activity-table th, .activity-table td {
    padding:.4rem .18rem;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .activity-table th:first-child, .activity-table td:first-child { width:21%; }
  .activity-number { min-width:1.35rem; height:1.35rem; }
  .stats-summary-head { gap:.65rem; }
  .stats-summary-note { line-height:1.7; }

  /* Heatmap: scale cells down enough for the complete 24-week grid to fit
     without clipping or requiring horizontal scrolling. */
  .heatmap-wrap { width:100%; overflow:hidden; }
  .heatmap { width:100%; min-width:0; gap:.12rem; }
  .heatmap-labels { gap:.12rem; margin-left:.12rem; flex:0 0 .55rem; }
  .heatmap-labels span { width:.55rem; height:.55rem; font-size:7px; }
  .heatmap-week { flex:1 1 0; min-width:0; gap:.12rem; }
  .heatmap-cell { width:100%; height:auto; aspect-ratio:1; border-radius:1.5px; min-width:0; }
  .heatmap-legend { flex-wrap:wrap; gap:.25rem; }

  /* Shift picker: all four actions are one vertical stack. */
  .shift-picker-dialog { width:min(19rem,calc(100vw - 1.4rem)); padding:.7rem; }
  .shift-picker-options { display:flex; flex-direction:column; gap:.35rem; }
  .shift-choice, .shift-choice-clear {
    width:100%;
    min-height:2.15rem;
    padding:.35rem .5rem;
    font-size:.58rem;
  }
  .shift-choice-clear { grid-column:auto; }

  /* Shift calendar navigation must stay on one clean line. */
  .shift-calendar-head { gap:.65rem; }
  .shift-month-nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.3rem; width:100%; }
  .shift-month-nav strong { min-width:0; white-space:nowrap; font-size:.65rem; }
  .shift-month-btn { min-width:0; padding:.34rem .42rem; white-space:nowrap; font-size:.53rem; }
  .shift-weekdays, .shift-month-grid { gap:.18rem; }
  .shift-weekdays span { font-size:.47rem; white-space:nowrap; }
  .shift-day-cell { min-height:2.9rem; padding:.25rem .12rem; }
  .shift-day-number { font-size:.6rem; }
  .shift-day-state { font-size:.42rem; }

  /* Task/library cards and controls should never exceed the viewport. */
  .task-library-dialog, .task-modal-dialog, .course-session-dialog { width:calc(100vw - 1.2rem); max-width:none; }
  .library-toolbar { grid-template-columns:1fr 1fr; }
  .library-task-details { grid-template-columns:1fr; }
  .library-pagination { flex-wrap:wrap; }
  .library-pagination .btn { flex:1 1 8rem; min-width:0; }
  .task-delete-actions { grid-template-columns:1fr; }

  /* General grids/forms used by Learning/Projects/Journal. */
  .stat-grid { gap:.5rem; }
  .stat-value { font-size:1.2rem; }
  .card { padding:.75rem; }
  .quick-actions { flex-direction:column; }
  .quick-actions .btn { width:100%; }
  .course-head, .course-card .course-head { gap:.5rem; }
  .course-name { min-width:0; overflow-wrap:anywhere; }
  .session-row { align-items:flex-start; }
  .session-row > * { min-width:0; }
  .page-heading { flex-direction:column; gap:.5rem; }
  .settings-head { flex-direction:column; align-items:stretch; }
  .shift-save-btn { width:100%; }
  .course-type-grid { grid-template-columns:1fr; }
  .course-type-option { min-height:3.8rem; }
  .weekday-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .month-days-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
}

@media (max-width: 380px) {
  .container { padding-left:.5rem; padding-right:.5rem; }
  .tab { font-size:.56rem; padding-left:.08rem; padding-right:.08rem; }
  .tasks-page-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tasks-page-actions .btn { font-size:.51rem; padding-left:.18rem; padding-right:.18rem; }
  .week-day { flex-basis:6.8rem; min-width:6.8rem; }
  .stats-period-table { font-size:.49rem; }
  .activity-table { font-size:.46rem; }
  .shift-month-btn { font-size:.49rem; }
}


/* ================================================================
   Final mobile polish
   - Weekly dashboard stays one row and FITS the viewport (no scroll).
   - Dashboard heatmap uses the same compact responsive sizing as Stats.
   - Date picker is always centered in the viewport.
   - Mobile navigation gets comfortable spacing instead of crushed tabs.
   ================================================================ */

.jalali-picker-popover[data-centered-picker="true"] {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(21rem, calc(100vw - 1.25rem));
  max-height: min(32rem, calc(100vh - 1.25rem));
  overflow-y: auto;
  margin: 0;
}

@media (max-width: 600px) {
  /* Seven days always remain in a single row.
     Cards shrink to the available width; day names may wrap inside
     their own cell, but the planner itself never scrolls horizontally. */
  .weekly-planner-card {
    overflow:hidden;
  }

  .weekly-planner {
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    width:100%;
    min-width:0;
    gap:.16rem;
    overflow:visible;
    padding:.05rem 0 .1rem;
    margin:0;
  }

  .week-day {
    width:100%;
    min-width:0;
    min-height:4.7rem;
    flex:none;
    padding:.32rem .12rem;
    gap:.12rem;
    overflow:hidden;
  }

  .week-day-name {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.35;
    text-align:center;
    font-size:clamp(.43rem, 2vw, .58rem);
  }

  .week-day-date,
  .week-day-count {
    white-space:normal;
    line-height:1.3;
    font-size:clamp(.4rem, 1.8vw, .52rem);
    text-align:center;
  }

  .week-day .shift-pill {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(.36rem, 1.65vw, .47rem);
    padding:.12rem .18rem;
  }

  /* Dashboard heatmap: exactly the same fit-to-viewport strategy
     used by the Statistics heatmap. */
  .dashboard-heatmap-card .heatmap-wrap {
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .dashboard-heatmap-card .heatmap {
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    gap:.12rem;
  }

  .dashboard-heatmap-card .heatmap-labels {
    flex:0 0 .55rem;
    width:.55rem;
    min-width:0;
    gap:.12rem;
    margin-left:.12rem;
  }

  .dashboard-heatmap-card .heatmap-labels span {
    width:.55rem;
    height:.55rem;
    font-size:7px;
  }

  .dashboard-heatmap-card .heatmap-week {
    flex:1 1 0;
    min-width:0;
    gap:.12rem;
  }

  .dashboard-heatmap-card .heatmap-cell {
    width:100%;
    height:auto;
    aspect-ratio:1;
    min-width:0;
    border-radius:1.5px;
  }

  /* Navigation: use a comfortable 3-column grid instead of seven
     crushed flex items. Full labels remain visible. */
  .tab-bar {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.22rem;
    padding:.22rem;
    overflow:visible;
  }

  .tab {
    min-width:0;
    width:100%;
    padding:.48rem .2rem;
    gap:.24rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.62rem;
  }

  .tab svg {
    flex:0 0 auto;
  }
}

@media (max-width: 380px) {
  .weekly-planner {
    gap:.1rem;
  }

  .week-day {
    min-height:4.55rem;
    padding:.25rem .08rem;
  }

  .tab-bar {
    gap:.16rem;
    padding:.16rem;
  }

  .tab {
    padding:.44rem .12rem;
    font-size:.57rem;
  }
}


/* ================================================================
   FINAL HEATMAP + MOBILE NAV + WEEKLY PLANNER FIX
   Heatmap cells NEVER resize. Only the heatmap viewport scrolls.
   ================================================================ */

/* Keep the desktop heatmap geometry exactly fixed. */
.heatmap-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.heatmap {
  display: flex;
  width: max-content;
  min-width: max-content;
  gap: .25rem;
}

.heatmap-labels {
  flex: 0 0 .75rem;
  width: .75rem;
  min-width: .75rem;
  gap: .25rem;
  margin-left: .25rem;
}

.heatmap-labels span {
  flex: 0 0 .75rem;
  width: .75rem;
  height: .75rem;
}

.heatmap-week {
  flex: 0 0 .75rem;
  width: .75rem;
  min-width: .75rem;
  gap: .25rem;
}

.heatmap-cell {
  flex: 0 0 .75rem;
  width: .75rem;
  min-width: .75rem;
  height: .75rem;
  min-height: .75rem;
  max-width: .75rem;
  max-height: .75rem;
  aspect-ratio: auto;
}

@media (max-width: 600px) {
  /* The wrapper owns horizontal overflow. The cells keep desktop size. */
  .heatmap-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .15rem;
  }

  .heatmap {
    width: max-content;
    min-width: max-content;
    gap: .25rem;
  }

  .heatmap-labels {
    flex: 0 0 .75rem;
    width: .75rem;
    min-width: .75rem;
    gap: .25rem;
    margin-left: .25rem;
  }

  .heatmap-labels span,
  .heatmap-cell {
    width: .75rem;
    min-width: .75rem;
    max-width: .75rem;
    height: .75rem;
    min-height: .75rem;
    max-height: .75rem;
  }

  .heatmap-week {
    flex: 0 0 .75rem;
    width: .75rem;
    min-width: .75rem;
    gap: .25rem;
  }

  /* Bottom navigation on phones. */
  body {
    padding-bottom: 4.5rem;
  }

  .tab-bar {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-radius: .9rem .9rem 0 0;
    padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,.12);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.3rem;
    overflow:hidden;
  }

  .tab {
    min-width:0;
    width:100%;
    min-height:2.35rem;
    padding:.45rem .2rem;
    border-radius:.55rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Give the three pieces inside each weekly day visibly more breathing room. */
  .weekly-planner {
    gap:.2rem;
  }

  .week-day {
    gap:.48rem;
    padding:.45rem .18rem;
    min-height:5.4rem;
  }

  .week-day-name {
    line-height:1.45;
    margin-bottom:.08rem;
  }

  .week-day-date {
    line-height:1.45;
    margin-bottom:.08rem;
  }

  .week-day-count {
    line-height:1.45;
  }
}

@media (max-width:380px) {
  .tab-bar {
    gap:.2rem;
    padding-left:.3rem;
    padding-right:.3rem;
  }

  .tab {
    min-height:2.25rem;
    padding:.4rem .12rem;
    font-size:.58rem;
  }

  .week-day {
    gap:.52rem;
  }
}


/* ================================================================
   FINAL RESPONSIVE HEATMAP GEOMETRY
   One shared component for Dashboard + Statistics.
   Cells never grow/shrink on mobile; only the wrapper scrolls.
   ================================================================ */
.heatmap-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.heatmap {
  display: flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  gap: .25rem !important;
  direction: ltr;
}
.heatmap-labels {
  display: flex !important;
  flex: 0 0 .75rem !important;
  width: .75rem !important;
  min-width: .75rem !important;
  max-width: .75rem !important;
  gap: .25rem !important;
  margin-left: .25rem !important;
}
.heatmap-labels span {
  flex: 0 0 .75rem !important;
  width: .75rem !important;
  min-width: .75rem !important;
  max-width: .75rem !important;
  height: .75rem !important;
  min-height: .75rem !important;
  max-height: .75rem !important;
  box-sizing: border-box;
}
.heatmap-week {
  display: flex !important;
  flex: 0 0 .75rem !important;
  width: .75rem !important;
  min-width: .75rem !important;
  max-width: .75rem !important;
  gap: .25rem !important;
}
.heatmap-cell {
  flex: 0 0 .75rem !important;
  width: .75rem !important;
  min-width: .75rem !important;
  max-width: .75rem !important;
  height: .75rem !important;
  min-height: .75rem !important;
  max-height: .75rem !important;
  aspect-ratio: auto !important;
  box-sizing: border-box;
}

/* Dashboard uses exactly the same heatmap geometry. */
.dashboard-heatmap-card .heatmap-wrap,
.dashboard-heatmap-card .heatmap,
.dashboard-heatmap-card .heatmap-labels,
.dashboard-heatmap-card .heatmap-week,
.dashboard-heatmap-card .heatmap-cell {
  /* intentionally inherit the shared component above */
}

/* Final shared Heatmap alignment: Dashboard is the same component as Statistics. */
.dashboard-heatmap-card .heatmap-wrap {
  direction: ltr;
  text-align: left;
}
.dashboard-heatmap-card .heatmap {
  direction: ltr;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: auto;
}

/* Authentication screen — isolated from the existing application UI. */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: min(420px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 18px;
  background: var(--surface, #161a22);
  border: 1px solid var(--border, #2b313d);
  box-sizing: border-box;
}
.auth-brand {
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
}
.auth-brand span { opacity: .55; font-weight: 500; }
.auth-subtitle { text-align: center; margin: 8px 0 22px; opacity: .7; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { font-size: .88rem; margin-top: 6px; }
.auth-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2b313d);
  background: transparent;
  color: inherit;
  font: inherit;
}
.auth-submit { width: 100%; margin-top: 10px; }
.auth-error {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(220, 70, 70, .12);
  border: 1px solid rgba(220, 70, 70, .25);
  font-size: .88rem;
}