/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0e11;
  --surface: #18171c;
  --surface2: #211f27;
  --surface3: #2a2733;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #f0eef8;
  --text-muted: #7b7589;
  --text-dim: #4a4556;
  --accent: #c8b8ff;
  --accent-glow: rgba(200,184,255,0.15);
  --green: #7dd9a8;
  --gold: #f4c97d;
  --coral: #f47d7d;
  --sky: #7dcff4;
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 220px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Светлая тема */
body.light-theme {
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface2: #f5f7fa;
  --surface3: #e8ecf1;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.12);
  --text: #1a1d23;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --accent: #7c3aed;
  --accent-glow: rgba(124,58,237,0.1);
}

body.light-theme .habit-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(139,92,246,0.02)) !important;
  border-color: rgba(124,58,237,0.15) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

body.light-theme .habit-card:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(139,92,246,0.03)) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

body.light-theme .habit-emoji {
  background-color: rgba(124,58,237,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(124,58,237,0.15) !important;
}

body.light-theme .stats-matrix-scroller {
  background: linear-gradient(180deg, rgba(124,58,237,0.04), rgba(139,92,246,0.02)) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

body.light-theme .stats-matrix-corner,
body.light-theme .stats-head-cell,
body.light-theme .stats-habit-title {
  background: rgba(255,255,255,0.95) !important;
}

body.light-theme .stats-head-cell.today {
  background: rgba(124,58,237,0.08) !important;
}

body.light-theme .stats-head-cell.today span,
body.light-theme .stats-head-cell.today small {
  color: #7c3aed !important;
}

body.light-theme .modal {
  background: #ffffff !important;
  border-color: rgba(124,58,237,0.15) !important;
}

body.light-theme .form-input,
body.light-theme .form-select {
  background: #f5f7fa !important;
  border-color: rgba(124,58,237,0.15) !important;
  color: #1a1d23 !important;
}

body.light-theme .form-input::placeholder {
  color: #9ca3af !important;
}

html, body { height: 100%; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ===== LAYOUT ===== */
#app {
  display: flex;
  height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
}

.sidebar-header { margin-bottom: 36px; padding: 0 4px; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  font-size: 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
}

.logo-text {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { background: var(--accent-glow); color: var(--accent); }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

.sidebar-footer { padding-top: 16px; border-top: 1px solid var(--border); }

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--accent);
  color: #1a1625;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 20px rgba(200,184,255,0.25);
}

.add-btn:hover {
  background: #d6c8ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(200,184,255,0.35);
}

.add-icon { font-size: 18px; font-weight: 300; line-height: 1; }

/* ===== MAIN ===== */
.main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* ===== TODAY VIEW ===== */
.main-content {
  display: flex;
  height: 100%;
  gap: 0;
}

/* ===== HABITS PANEL ===== */
.habits-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  overflow: hidden;
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  line-height: 1;
}

.date-arrow:hover { border-color: var(--accent); color: var(--accent); }

.date-display { text-align: center; }
.date-label {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
}
.date-sub {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: capitalize;
}

/* Progress ring */
.progress-ring-wrap {
  position: relative;
  width: 52px;
  height: 52px;
}

.progress-ring { transform: rotate(-90deg); }

.ring-bg {
  fill: none;
  stroke: var(--surface3);
  stroke-width: 4;
}

.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 0 4px var(--accent));
}

.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* Habits List */
.habits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.habits-list::-webkit-scrollbar { width: 4px; }
.habits-list::-webkit-scrollbar-track { background: transparent; }
.habits-list::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }

/* Habit Card */
.habit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.habit-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--habit-color, var(--accent));
  opacity: 0;
  transition: var(--transition);
}

.habit-card:hover { border-color: var(--border2); transform: translateX(2px); }
.habit-card:hover::before { opacity: 1; }
.habit-card.completed { background: var(--surface2); }
.habit-card.completed::before { opacity: 1; }

.habit-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: var(--transition);
}

.habit-info { flex: 1; min-width: 0; }
.habit-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.habit-time {
  font-size: 12px;
  color: var(--text-muted);
}
.habit-goal {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.habit-goal::before { content: '·'; color: var(--text-dim); }

.habit-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  color: transparent;
  font-size: 13px;
}

.habit-card.completed .habit-check {
  background: var(--habit-color, var(--accent));
  border-color: var(--habit-color, var(--accent));
  color: #fff;
  box-shadow: 0 0 12px var(--habit-color, var(--accent));
}

.habit-card.completed .habit-name {
  opacity: 0.5;
}

.habit-streak {
  font-size: 11px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(244,201,125,0.08);
  padding: 2px 7px;
  border-radius: 20px;
}

/* Delete button */
.habit-delete {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.habit-card:hover .habit-delete {
  display: flex;
}

.habit-delete:hover {
  color: var(--coral);
  background: rgba(244,125,125,0.1);
}

/* Empty state */
.empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 12px;
  text-align: center;
}

.empty-state.visible { display: flex; }

.empty-icon {
  font-size: 40px;
  color: var(--text-dim);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.empty-state p {
  color: var(--text-muted);
  font-size: 15px;
}

.empty-add {
  padding: 8px 20px;
  background: var(--accent-glow);
  border: 1px solid rgba(200,184,255,0.2);
  color: var(--accent);
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.empty-add:hover { background: rgba(200,184,255,0.2); }

/* ===== CALENDAR PANEL ===== */
.calendar-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cal-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.cal-arrow:hover { border-color: var(--accent); color: var(--accent); }

.cal-month {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  flex-direction: column;
  gap: 2px;
}

.cal-day:hover { background: var(--surface2); color: var(--text); }
.cal-day.other-month { color: var(--text-dim); }
.cal-day.today {
  color: var(--accent);
  font-weight: 600;
}

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.cal-day.selected {
  background: var(--accent);
  color: #1a1625;
  font-weight: 600;
}

.cal-day.selected::after { display: none; }

.cal-day.has-completions::before {
  content: '';
  position: absolute;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.cal-day.has-completions.selected::before {
  background: rgba(255,255,255,0.6);
}

/* Day detail */
.day-detail {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex: 1;
}

.day-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.day-detail-habits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-habit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
}

.detail-habit-icon {
  font-size: 16px;
}

.detail-habit-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
}

.detail-habit-done {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
}

.detail-habit-done.done {
  background: rgba(125,217,168,0.12);
  color: var(--green);
}

.detail-habit-done.not-done {
  background: var(--surface3);
  color: var(--text-dim);
}

/* ===== STATS VIEW ===== */
.stats-content {
  padding: 32px 36px;
  overflow-y: auto;
  flex: 1;
}

.stats-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}

.stats-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  background: var(--surface);
  padding: 4px;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.stats-tab {
  padding: 7px 20px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.stats-tab.active {
  background: var(--accent);
  color: #1a1625;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  animation: slideIn 0.3s ease forwards;
}

.stat-card-icon { font-size: 26px; margin-bottom: 12px; }
.stat-card-name {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card-count {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
}
.stat-card-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.stat-bar-wrap {
  margin-top: 12px;
  height: 3px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}

.stat-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* Heatmap */
.heatmap-section { margin-top: 8px; }
.heatmap-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: 3px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--surface2);
  transition: var(--transition);
  cursor: default;
  min-width: 10px;
}

.heatmap-cell[data-count="1"] { background: rgba(200,184,255,0.3); }
.heatmap-cell[data-count="2"] { background: rgba(200,184,255,0.5); }
.heatmap-cell[data-count="3"] { background: rgba(200,184,255,0.7); }
.heatmap-cell[data-count="4"] { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

.heatmap-cell:hover { transform: scale(1.3); }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
  margin-bottom: 20px;
}

.modal-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover { border-color: var(--coral); color: var(--coral); }

.modal-body { padding: 0 24px; }

/* Preview */
.habit-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 1px solid var(--border);
  transition: var(--transition);
}

.preview-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--surface3);
  transition: var(--transition);
}

.preview-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.preview-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Form */
.form-group { margin-bottom: 18px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: var(--transition);
}

.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder { color: var(--text-dim); }

input[type="time"].form-input { color-scheme: dark; }
input[type="number"].form-input { width: 70px; }

.form-row { display: flex; gap: 16px; }
.form-half { flex: 1; }

.goal-input-wrap { display: flex; gap: 8px; }

.form-select {
  flex: 1;
  padding: 11px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.form-select:focus { border-color: var(--accent); }

/* Icons grid */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.icon-btn {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--surface2);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.icon-btn:hover { background: var(--surface3); transform: scale(1.1); }
.icon-btn.selected { border-color: var(--accent); background: var(--accent-glow); }

/* Colors */
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 0 0 transparent;
}

.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 12px var(--text); }

/* Toggle */
.toggle { position: relative; display: inline-flex; width: 44px; height: 24px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surface3);
  border-radius: 24px;
  transition: var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: var(--transition);
}

.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #1a1625;
}

/* Modal footer */
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px 24px 24px;
  margin-top: 4px;
}

.btn-cancel {
  flex: 1;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.btn-cancel:hover { color: var(--text); border-color: var(--border2); }

.btn-save {
  flex: 2;
  padding: 12px;
  background: var(--accent);
  border: none;
  color: #1a1625;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(200,184,255,0.3);
}

.btn-save:hover {
  background: #d6c8ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,184,255,0.4);
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 2000;
  pointer-events: none;
}

.toast.show { transform: translateX(-50%) translateY(0); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 5px; }

/* ===== PREMIUM UX OVERRIDE ===== */
:root {
  --bg: #08080b;
  --surface: rgba(24,23,31,0.82);
  --surface2: rgba(255,255,255,0.055);
  --surface3: rgba(255,255,255,0.10);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.16);
  --text: #f7f1e8;
  --text-muted: #aaa0b9;
  --text-dim: #6c6579;
  --accent: #d5b56e;
  --accent-glow: rgba(213,181,110,0.16);
  --gold: #f4c97d;
  --radius: 20px;
  --radius-sm: 12px;
  --sidebar-w: 236px;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(213,181,110,0.20), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(147,122,255,0.14), transparent 34%),
    linear-gradient(145deg, #07070a 0%, #111018 48%, #07070a 100%);
  -webkit-font-smoothing: antialiased;
}

#app { padding: 14px; gap: 14px; }
.sidebar, .habits-panel, .calendar-panel, .stats-content {
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,0.32);
  backdrop-filter: blur(18px);
}
.sidebar { background: linear-gradient(180deg, rgba(24,23,31,0.88), rgba(15,14,20,0.76)); }
.main-content { gap: 14px; }
.habits-panel, .stats-content { background: linear-gradient(180deg, rgba(24,23,31,0.62), rgba(12,12,17,0.55)); padding: 30px; }
.calendar-panel { background: linear-gradient(180deg, rgba(24,23,31,0.80), rgba(14,13,19,0.72)); width: 340px; padding: 24px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #17120a; background: linear-gradient(135deg, #f0d698, #d5b56e);
  box-shadow: 0 0 28px rgba(213,181,110,0.26);
}
.logo-text, .date-label, .cal-month, .stats-title, .modal-title, .stat-card-count, .dash-card strong { letter-spacing: -0.5px; }
.nav-item { border: 1px solid transparent; border-radius: 15px; font-weight: 600; }
.nav-item:hover { border-color: var(--border); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(213,181,110,0.22), rgba(255,255,255,0.055));
  color: #f0d698;
  border-color: rgba(213,181,110,0.30);
}
.add-btn, .btn-save, .stats-tab.active, .cal-day.selected {
  background: linear-gradient(135deg, #f0d698, #d5b56e);
  color: #151008;
  box-shadow: 0 14px 34px rgba(213,181,110,0.24);
}
.panel-header { margin-bottom: 20px; gap: 18px; }
.date-nav { gap: 12px; flex-wrap: wrap; }
.date-display { text-align: left; min-width: 126px; }
.date-label { font-size: clamp(25px, 3vw, 38px); line-height: 1.04; }
.date-arrow, .cal-arrow {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.045);
}
.date-arrow:hover, .cal-arrow:hover { border-color: rgba(213,181,110,0.45); color: #f0d698; background: var(--accent-glow); }
.today-chip {
  height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid rgba(213,181,110,0.28); background: rgba(213,181,110,0.10);
  color: #f0d698; font-size: 12px; font-weight: 800; cursor: pointer; transition: var(--transition);
}
.today-chip:hover { background: rgba(213,181,110,0.24); }
.progress-ring-wrap { width: 58px; height: 58px; }
.progress-ring { width: 58px; height: 58px; }
.progress-text { font-size: 12px; font-weight: 800; }
.daily-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.dash-card {
  min-height: 74px; padding: 13px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.dash-label { display: block; color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px; }
.dash-card strong { display: block; color: var(--text); font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.habits-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 10px; }
.section-kicker { font-size: 12px; color: #f0d698; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.toolbar-note { font-size: 12px; color: var(--text-dim); }
.habits-list { gap: 12px; padding: 2px 5px 2px 1px; }
.habit-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032));
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.habit-card::before { top: 12px; bottom: 12px; width: 4px; border-radius: 99px; opacity: 0.82; }
.habit-card::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background: radial-gradient(circle at 0% 50%, var(--habit-color, var(--accent)) 0%, transparent 28%);
  opacity: 0.04; transition: var(--transition);
}
.habit-card:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.044)); }
.habit-card:hover::after { opacity: 0.09; }
.habit-card.completed { background: linear-gradient(135deg, rgba(125,217,168,0.08), rgba(255,255,255,0.035)); }
.habit-emoji { width: 48px; height: 48px; border-radius: 16px; font-size: 23px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.habit-name { font-weight: 800; }
.habit-check { width: 32px; height: 32px; background: rgba(255,255,255,0.035); font-weight: 900; }
.habit-card.completed .habit-check { color: #111; }
.habit-delete { display: flex; opacity: 0; border: 1px solid transparent; }
.habit-card:hover .habit-delete { opacity: 1; }
.cal-day { border-radius: 13px; font-weight: 700; border: 1px solid transparent; }
.cal-day:hover { border-color: var(--border); }
.cal-day.today { color: #f0d698; border-color: rgba(213,181,110,0.20); }
.cal-day.today::after { bottom: 5px; background: #f0d698; }
.day-detail { border-top-color: var(--border); }
.detail-habit, .stat-card, .habit-preview, .form-input, .form-select, .stats-tabs, .heatmap-section { background: rgba(255,255,255,0.045); border: 1px solid var(--border); }
.stats-tabs { border-radius: 16px; padding: 5px; }
.stats-tab { border-radius: 12px; font-weight: 800; padding: 9px 20px; }
.stat-card { border-radius: 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.heatmap-section { padding: 20px; border-radius: 22px; overflow-x: auto; }
.heatmap { min-width: 690px; }
.heatmap-cell[data-count="1"] { background: rgba(213,181,110,0.28); }
.heatmap-cell[data-count="2"] { background: rgba(213,181,110,0.48); }
.heatmap-cell[data-count="3"] { background: rgba(213,181,110,0.70); }
.heatmap-cell[data-count="4"] { background: var(--accent); box-shadow: 0 0 8px rgba(213,181,110,0.45); }
.modal-overlay { background: rgba(0,0,0,0.66); backdrop-filter: blur(12px); }
.modal { background: linear-gradient(180deg, rgba(24,23,31,0.98), rgba(14,13,19,0.98)); border-radius: 26px; box-shadow: 0 24px 70px rgba(0,0,0,0.46); }
.modal-title { font-size: 25px; }
.form-input:focus, .form-select:focus { border-color: rgba(213,181,110,0.55); box-shadow: 0 0 0 4px var(--accent-glow); }
.icon-grid { grid-template-columns: repeat(7, 1fr); }
.icon-btn { border-radius: 13px; border: 1px solid transparent; background: rgba(255,255,255,0.055); }
.icon-btn.selected { border-color: rgba(213,181,110,0.50); background: var(--accent-glow); }
.toast { background: rgba(24,23,31,0.94); border-radius: 999px; font-weight: 800; backdrop-filter: blur(12px); }

@media (max-width: 980px) {
  body { overflow: auto; }
  #app { min-height: 100vh; height: auto; flex-direction: column; padding: 10px; padding-bottom: 86px; }
  .sidebar { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 10px; width: auto; height: 64px; border-radius: 22px; padding: 8px; flex-direction: row; align-items: center; }
  .sidebar-header { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; gap: 6px; }
  .nav-item { flex: 1; justify-content: center; padding: 11px 8px; }
  .sidebar-footer { padding-top: 0; border-top: none; width: 58px; }
  .add-btn { width: 48px; height: 48px; padding: 0; border-radius: 17px; }
  .add-btn span:last-child { display: none; }
  .main-content { flex-direction: column; height: auto; }
  .habits-panel, .calendar-panel, .stats-content { border-radius: 24px; padding: 20px; }
  .calendar-panel { width: 100%; }
  .main { overflow: visible; }
  .view { height: auto; min-height: calc(100vh - 106px); }
}

@media (max-width: 620px) {
  .panel-header { align-items: flex-start; }
  .date-display { order: -1; flex-basis: 100%; }
  .daily-dashboard { grid-template-columns: 1fr; }
  .habits-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .habit-card { padding: 13px 12px; gap: 11px; }
  .habit-delete { opacity: 1; }
  .icon-grid { grid-template-columns: repeat(6, 1fr); }
  .form-row { flex-direction: column; }
  .stats-tabs { width: 100%; }
  .stats-tab { flex: 1; padding-inline: 8px; }
}

/* ===== UPDATE: ICON, SCHEDULE, EDIT, NOTIFICATIONS ===== */
.logo-mark {
  overflow: hidden;
  padding: 0;
  background: transparent !important;
  box-shadow: 0 0 26px rgba(213,181,110,0.30) !important;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.add-btn {
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(240,214,152,0.42);
  background: linear-gradient(135deg, #f5dda2 0%, #d5b56e 48%, #9f7933 100%) !important;
  color: #151008 !important;
  box-shadow: 0 16px 38px rgba(213,181,110,0.28), inset 0 1px 0 rgba(255,255,255,0.48);
  position: relative;
  overflow: hidden;
}
.add-btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 48%);
  pointer-events: none;
}
.add-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(213,181,110,0.36); }
.add-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 22px;
  font-weight: 900;
  margin-top: -1px;
}

.habit-edit,
.habit-delete {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.035);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  opacity: 0;
}
.habit-card:hover .habit-edit,
.habit-card:hover .habit-delete { opacity: 1; }
.habit-edit:hover { color: #f0d698; background: rgba(213,181,110,0.12); border-color: rgba(213,181,110,0.25); }
.habit-delete:hover { color: var(--coral); background: rgba(244,125,125,0.1); border-color: rgba(244,125,125,0.20); }
.habit-days {
  font-size: 11px;
  color: #f0d698;
  background: rgba(213,181,110,0.09);
  border: 1px solid rgba(213,181,110,0.16);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.schedule-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.schedule-preset,
.weekday-btn {
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.045);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.schedule-preset {
  flex: 1;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}
.schedule-preset.active,
.weekday-btn.selected {
  background: linear-gradient(135deg, rgba(240,214,152,0.24), rgba(213,181,110,0.12));
  color: #f0d698;
  border-color: rgba(213,181,110,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.weekday-btn {
  min-height: 38px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 900;
}
.weekday-btn:hover,
.schedule-preset:hover { border-color: rgba(213,181,110,0.32); color: var(--text); }
.form-hint {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
}
.cal-day.no-habits { opacity: 0.52; }

@media (max-width: 980px) {
  .add-btn {
    align-items: center;
    justify-content: center;
  }
  .add-btn .add-icon {
    width: 100%;
    height: 100%;
    margin: 0;
    transform: translateY(-1px);
  }
}
@media (max-width: 620px) {
  .habit-edit,
  .habit-delete { opacity: 1; width: 30px; height: 30px; }
  .habit-meta { flex-wrap: wrap; }
  .weekday-grid { gap: 5px; }
  .weekday-btn { min-height: 36px; font-size: 11px; }
}


/* ===== UPDATE v3: local-day completions + compact horizontal dashboard ===== */
.daily-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.dash-card {
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 16px;
}
.dash-label {
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.1;
}
.dash-card strong {
  font-size: 18px;
  line-height: 1.15;
}
#nextHabit {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .daily-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 14px;
  }
  .dash-card {
    min-height: 58px;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .dash-label {
    font-size: 9px;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }
  .dash-card strong {
    font-size: 14px;
  }
  #nextHabit {
    font-size: 12px;
  }
}


/* ===== UPDATE v4: force horizontal compact dashboard on mobile - superseded by v8 ===== */
.daily-dashboard {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 8px !important;
}
.daily-dashboard .dash-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .daily-dashboard {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .daily-dashboard .dash-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .daily-dashboard .dash-label {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
  }
  .daily-dashboard .dash-card strong,
  .daily-dashboard #nextHabit {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 620px) {
  .daily-dashboard {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .daily-dashboard .dash-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 8px 8px !important;
  }
  .daily-dashboard .dash-label {
    font-size: 8px !important;
    letter-spacing: 0.04em !important;
  }
  .daily-dashboard .dash-card strong,
  .daily-dashboard #nextHabit {
    font-size: 12px !important;
  }
}


/* ===== UPDATE v5: compact mobile layout, final override ===== */
@media (max-width: 980px) {
  #app {
    padding: 8px !important;
    padding-bottom: 78px !important;
  }
  .habits-panel {
    padding: 14px 14px 16px !important;
    border-radius: 24px !important;
  }
  .panel-header {
    margin-bottom: 12px !important;
    align-items: flex-start !important;
  }
  .date-label {
    font-size: 34px !important;
    line-height: 1 !important;
  }
  .date-sub {
    font-size: 15px !important;
    margin-top: 2px !important;
  }
  .date-nav {
    gap: 8px !important;
  }
  .date-arrow,
  .today-chip {
    height: 34px !important;
  }
  .progress-ring-wrap {
    width: 50px !important;
    height: 50px !important;
    transform: scale(.9) !important;
    transform-origin: top right !important;
  }

  .daily-dashboard,
  #dailyDashboard {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  .daily-dashboard > .dash-card,
  #dailyDashboard > .dash-card {
    display: block !important;
    flex: 1 1 0 !important;
    width: 33.333% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  .daily-dashboard .dash-label,
  #dailyDashboard .dash-label {
    display: block !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    margin: 0 0 4px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .daily-dashboard .dash-card strong,
  #dailyDashboard .dash-card strong,
  #doneCount,
  #bestStreak,
  #nextHabit {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .habits-toolbar {
    margin-bottom: 7px !important;
    gap: 2px !important;
  }
  .section-kicker {
    font-size: 11px !important;
  }
  .toolbar-note {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .habits-list {
    gap: 8px !important;
    padding-top: 0 !important;
  }
  .habit-card {
    min-height: 78px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  .habit-emoji {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 21px !important;
  }
  .habit-name {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }
  .habit-meta {
    gap: 5px !important;
    margin-top: 4px !important;
  }
  .habit-time,
  .habit-goal,
  .habit-days {
    font-size: 12px !important;
  }
  .habit-edit,
  .habit-delete,
  .habit-check {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  .sidebar {
    height: 58px !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 20px !important;
  }
  .nav-item {
    padding: 9px 6px !important;
  }
  .add-btn {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 380px) {
  .daily-dashboard > .dash-card,
  #dailyDashboard > .dash-card {
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px 6px !important;
  }
  .daily-dashboard .dash-card strong,
  #dailyDashboard .dash-card strong,
  #doneCount,
  #bestStreak,
  #nextHabit {
    font-size: 12px !important;
  }
  .daily-dashboard .dash-label,
  #dailyDashboard .dash-label {
    font-size: 7px !important;
  }
}


/* ===== v6 hard mobile override duplicated in CSS ===== */
@media (max-width: 980px){#dailyDashboard.daily-dashboard{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px!important;margin:0 0 12px 0!important;width:100%!important}#dailyDashboard.daily-dashboard>.dash-card{flex:1 1 0!important;width:0!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:7px 8px!important;border-radius:14px!important}.dash-card .dash-label{font-size:7px!important;line-height:1!important;margin:0 0 4px 0!important;white-space:nowrap!important}.dash-card strong,#nextHabit{font-size:12px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.habits-panel{padding:14px!important}.panel-header{margin-bottom:12px!important}.habit-card{min-height:76px!important;padding:10px 11px!important}}


/* ===== UPDATE v8: stable mobile + brand progress ===== */
.header-status { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-progress { position:relative; width:54px; height:54px; border-radius:18px; overflow:hidden; border:1px solid rgba(240,214,152,.34); box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 22px rgba(213,181,110,.18); background:rgba(255,255,255,.05); }
.brand-progress-img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) brightness(.74); }
.brand-progress-mask { position:absolute; left:0; right:0; bottom:0; height:0%; background:linear-gradient(180deg, rgba(255,235,170,.72), rgba(213,181,110,.38)); mix-blend-mode:screen; transition:height 900ms cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.brand-progress::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -12px 22px rgba(0,0,0,.22); pointer-events:none; }

@media (max-width: 980px) {
  .panel-header { gap:10px; }
  .daily-dashboard, #dailyDashboard { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:6px !important; margin-bottom:12px !important; }
  .daily-dashboard > .dash-card, #dailyDashboard > .dash-card { flex:1 1 0 !important; width:0 !important; min-width:0 !important; height:48px !important; min-height:48px !important; padding:7px 8px !important; border-radius:14px !important; }
}


/* ===== FINAL PATCH v11 ===== */
.cal-month { text-transform: none !important; }
.cal-day.selected {
  background: linear-gradient(135deg, #f7e3a6 0%, #d5b56e 62%, #9f7933 100%) !important;
  color: #14100a !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 12px 28px rgba(213,181,110,0.26) !important;
}
.cal-day.selected span {
  color: #14100a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}
.cal-day.has-completions.selected::before {
  background: #fff7d6 !important;
  box-shadow: 0 0 7px rgba(255,247,214,0.85) !important;
}
.habit-edit { color: var(--text-dim); }
.habit-edit .edit-pencil-svg {
  width: 15px;
  height: 15px;
  display: block;
  transform: none;
}
.edit-pencil-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.edit-pencil-tip {
  fill: currentColor;
  opacity: 0.9;
}
.modal-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
}
.modal-overlay.open {
  display: flex !important;
  pointer-events: auto !important;
}


/* ===== v12 INSTALL BANNER ===== */
.install-banner {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(240,214,152,0.32);
  background: linear-gradient(135deg, rgba(31,29,38,0.96), rgba(14,13,19,0.94));
  box-shadow: 0 18px 44px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
}
.install-banner.visible { display: flex; }
.install-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 18px rgba(213,181,110,0.25);
}
.install-banner__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.install-banner__text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.install-banner__text strong {
  font-size: 13px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-banner__text span {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-banner__button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(240,214,152,0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, #f5dda2 0%, #d5b56e 52%, #9f7933 100%);
  color: #151008;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(213,181,110,0.22), inset 0 1px 0 rgba(255,255,255,0.42);
}
.install-banner__close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.install-banner__close:hover { color: var(--text); border-color: rgba(240,214,152,0.28); }
body.install-banner-shown #app { padding-top: 72px; }

@media (min-width: 981px) {
  .install-banner { left: 50%; right: auto; width: min(520px, calc(100vw - 24px)); transform: translateX(-50%); }
}
@media (max-width: 420px) {
  .install-banner { left: 8px; right: 8px; gap: 8px; padding: 9px; border-radius: 16px; }
  .install-banner__icon { width: 34px; height: 34px; border-radius: 12px; }
  .install-banner__button { height: 32px; padding: 0 10px; font-size: 11px; }
  .install-banner__close { width: 28px; height: 28px; }
  body.install-banner-shown #app { padding-top: 64px !important; }
}


/* ===== UPDATE v14: calmer habit list + notification/PWA polish ===== */
.habits-panel {
  background: linear-gradient(180deg, rgba(18,17,24,0.66), rgba(9,9,13,0.58)) !important;
}
.habits-list {
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.habit-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.048), rgba(255,255,255,0.022)) !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.14) !important;
}
.habit-card::before {
  opacity: 0.55 !important;
  filter: saturate(0.78) brightness(0.92) !important;
}
.habit-card::after {
  opacity: 0.025 !important;
}
.habit-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.062), rgba(255,255,255,0.026)) !important;
  box-shadow: 0 9px 20px rgba(0,0,0,0.16) !important;
}
.habit-card.completed {
  background: linear-gradient(135deg, rgba(213,181,110,0.055), rgba(255,255,255,0.024)) !important;
}
.habit-card.completed::after {
  opacity: 0.035 !important;
}
.habit-emoji {
  background-color: rgba(255,255,255,0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.075) !important;
}
.habit-check {
  background: rgba(255,255,255,0.026) !important;
  border-color: rgba(255,255,255,0.13) !important;
  box-shadow: none !important;
}
.habit-card.completed .habit-check {
  background: linear-gradient(135deg, rgba(218,192,125,0.88), rgba(170,131,56,0.82)) !important;
  border-color: rgba(240,214,152,0.50) !important;
  color: #171107 !important;
  box-shadow: 0 0 12px rgba(213,181,110,0.22) !important;
}
.habit-card[style*="#7dd9a8"].completed .habit-check,
.habit-card.completed .habit-check[style*="#7dd9a8"] {
  box-shadow: 0 0 10px rgba(125,217,168,0.18) !important;
}
.habit-name {
  color: rgba(245,241,232,0.86) !important;
}
.habit-card.completed .habit-name {
  opacity: 0.72 !important;
}
.habit-days {
  color: rgba(240,214,152,0.78) !important;
  background: rgba(213,181,110,0.075) !important;
  border-color: rgba(213,181,110,0.18) !important;
}
.habit-edit,
.habit-delete {
  background: rgba(255,255,255,0.026) !important;
}

@media (max-width: 980px) {
  .habit-card {
    box-shadow: 0 7px 16px rgba(0,0,0,0.13) !important;
  }
  .habit-card.completed .habit-check {
    box-shadow: 0 0 10px rgba(213,181,110,0.20) !important;
  }
}


/* ===== UPDATE v14: install banner, premium date, left-to-right heatmap ===== */
.date-label {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: clamp(25px, 4.4vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: lining-nums;
}
.date-sub {
  font-size: 14px !important;
  letter-spacing: 0.01em;
}

.heatmap {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: repeat(52, 10px) !important;
  grid-template-rows: repeat(7, 10px) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 10px !important;
  justify-content: start !important;
  align-content: start !important;
  min-width: 690px;
}
.heatmap-cell {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  aspect-ratio: auto !important;
}

.install-banner {
  top: max(8px, env(safe-area-inset-top)) !important;
  display: none;
}
.install-banner.visible {
  display: flex !important;
}
.install-banner__button {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .date-label {
    font-size: 27px !important;
    line-height: 1.02 !important;
    font-weight: 500 !important;
  }
  .date-sub {
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  .date-label {
    font-size: 25px !important;
  }
  .date-sub {
    font-size: 13px !important;
  }
  body.install-banner-shown #app {
    padding-top: 62px !important;
  }
}


/* ===== UPDATE v15: adaptive install banner text ===== */
.install-banner[data-install-mode="ios-safari"] .install-banner__button,
.install-banner[data-install-mode="ios-chrome"] .install-banner__button,
.install-banner[data-install-mode="android-inapp"] .install-banner__button {
  min-width: 88px;
}
@media (max-width: 420px) {
  .install-banner__text span {
    max-width: 185px;
    white-space: normal;
    line-height: 1.18;
  }
}


/* ===== UPDATE v16: statistics matrix ===== */
.stats-content {
  padding-bottom: 96px !important;
}
.stats-title {
  font-size: clamp(36px, 9vw, 56px) !important;
  line-height: 0.98 !important;
  margin-bottom: 22px !important;
}
.stats-grid {
  display: block !important;
  margin-bottom: 0 !important;
}
.stats-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.stats-matrix-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stats-period-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(213,181,110,0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(213,181,110,0.075), rgba(255,255,255,0.035));
}
.stats-period-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.045);
}
.stats-summary-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stats-period-summary strong {
  display: block;
  color: var(--text);
  font-family: 'Fraunces', serif;
  font-size: 18px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-matrix-scroller {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.024));
  box-shadow: 0 14px 32px rgba(0,0,0,0.20);
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 0;
}
.stats-matrix-scroller::-webkit-scrollbar { height: 5px; width: 5px; }
.stats-matrix-scroller::-webkit-scrollbar-thumb { background: rgba(213,181,110,0.28); border-radius: 999px; }
.stats-matrix {
  --stats-cell: 34px;
  --stats-left: 142px;
  display: grid;
  grid-template-columns: var(--stats-left) repeat(var(--stats-days), var(--stats-cell));
  min-width: calc(var(--stats-left) + (var(--stats-days) * var(--stats-cell)));
  width: max-content;
  align-items: stretch;
}
.stats-col-month .stats-matrix { --stats-cell: 30px; }
.stats-col-year .stats-matrix { --stats-cell: 18px; --stats-left: 132px; }
.stats-matrix-corner,
.stats-head-cell,
.stats-habit-title,
.stats-check-cell {
  min-height: 38px;
  border-right: 1px solid rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.stats-matrix-corner {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #f0d698;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20,19,27,0.98);
  box-shadow: 8px 0 16px rgba(0,0,0,0.14);
}
.stats-head-cell {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--text-muted);
  background: rgba(20,19,27,0.96);
}
.stats-head-cell span {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: capitalize;
}
.stats-head-cell small {
  display: block;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1;
}
.stats-head-cell.today {
  background: rgba(213,181,110,0.13);
}
.stats-head-cell.today span,
.stats-head-cell.today small { color: #f4dfaa; }
.stats-habit-title {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 8px 7px 10px;
  background: rgba(20,19,27,0.98);
  box-shadow: 8px 0 16px rgba(0,0,0,0.14);
}
.stats-habit-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--habit-color, var(--accent));
  opacity: 0.75;
}
.stats-habit-icon { font-size: 17px; text-align: center; }
.stats-habit-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-habit-percent {
  color: #f0d698;
  font-size: 11px;
  font-weight: 900;
}
.stats-check-cell {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-top: none;
  border-left: none;
  background: rgba(255,255,255,0.018);
  color: #171208;
  cursor: pointer;
}
.stats-check-cell:hover { background: rgba(213,181,110,0.08); }
.stats-check-cell::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.stats-check-cell.done::before {
  border-color: rgba(213,181,110,0.88);
  background: linear-gradient(135deg, #f5dda2, #d5b56e 60%, #9f7933);
  box-shadow: 0 0 10px rgba(213,181,110,0.25);
}
.stats-check-cell.done span {
  position: absolute;
  color: #151008;
  font-size: 9px;
  font-weight: 900;
}
.stats-check-cell.inactive {
  cursor: default;
  opacity: 0.36;
  background: rgba(255,255,255,0.006);
}
.stats-check-cell.inactive::before {
  border-color: rgba(255,255,255,0.045);
  background: rgba(255,255,255,0.012);
}
.stats-check-cell.today {
  background: rgba(213,181,110,0.045);
}
.stats-col-year .stats-head-cell span { font-size: 8px; transform: rotate(-45deg); max-width: 22px; }
.stats-col-year .stats-head-cell small { font-size: 7px; }
.stats-col-year .stats-matrix-corner,
.stats-col-year .stats-head-cell,
.stats-col-year .stats-habit-title,
.stats-col-year .stats-check-cell { min-height: 32px; }
.stats-col-year .stats-check-cell::before { width: 9px; height: 9px; border-radius: 3px; }
.heatmap-section { display: none !important; }

@media (max-width: 620px) {
  .stats-content { padding: 18px 14px 96px !important; }
  .stats-title { font-size: 44px !important; margin-bottom: 18px !important; }
  .stats-tabs { width: 100% !important; margin-bottom: 14px !important; }
  .stats-period-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 7px; }
  .stats-period-summary > div { padding: 7px 7px; border-radius: 13px; }
  .stats-period-summary strong { font-size: 14px; }
  .stats-summary-label { font-size: 7px; }
  .stats-matrix { --stats-left: 118px; --stats-cell: 32px; }
  .stats-col-month .stats-matrix { --stats-cell: 28px; }
  .stats-col-year .stats-matrix { --stats-left: 112px; --stats-cell: 16px; }
  .stats-habit-title { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; padding-left: 9px; }
  .stats-habit-name { font-size: 11px; }
  .stats-habit-percent { font-size: 10px; }
}


/* ===== v17: robust install banner visibility ===== */
.install-banner {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 10000 !important;
  display: none;
}
.install-banner.visible {
  display: flex !important;
}
body.install-banner-shown #app {
  padding-top: 76px !important;
}
@media (max-width: 620px) {
  .install-banner {
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 8px !important;
    right: 8px !important;
  }
  body.install-banner-shown #app {
    padding-top: 68px !important;
  }
}

/* ===== UPDATE v18: day period blocks ===== */
.habits-list {
  gap: 14px;
}
.habit-period-block {
  position: relative;
  padding: 14px 12px 12px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.026)),
    radial-gradient(circle at 10% 0%, rgba(213,181,110,0.08), transparent 34%);
  border: 1px solid rgba(255,255,255,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 12px 28px rgba(0,0,0,0.16);
}
.habit-period-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px 0 4px;
}
.habit-period-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.habit-period-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
  line-height: 0;
}
.habit-period-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  transform: none;
}
.habit-period-title {
  margin: 0;
  color: #f0d698;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.08;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.habit-period-range {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}
.habit-period-count {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(213,181,110,0.12);
  border: 1px solid rgba(213,181,110,0.22);
  color: #f0d698;
  font-size: 12px;
  font-weight: 900;
}
.habit-period-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.habit-period-block .habit-card {
  box-shadow: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.022));
}
.habit-period-morning { border-color: rgba(213,181,110,0.18); }
.habit-period-day { border-color: rgba(125,217,168,0.15); }
.habit-period-evening { border-color: rgba(200,184,255,0.15); }
.habit-period-night { border-color: rgba(125,207,244,0.14); }

@media (max-width: 980px) {
  .habit-period-block {
    padding: 12px 9px 10px !important;
    border-radius: 22px !important;
  }
  .habit-period-header {
    margin-bottom: 8px !important;
  }
  .habit-period-title {
    font-size: 13px !important;
  }
  .habit-period-icon {
    width: 52px !important;
    height: 52px !important;
  }
  .habit-period-list {
    gap: 8px !important;
  }
}


/* ===== UPDATE v19: collapsible day period blocks ===== */
.habit-period-header {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 18px;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.habit-period-header:hover {
  background: rgba(255,255,255,0.035);
}
.habit-period-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.habit-period-toggle {
  min-width: 74px;
  text-align: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.habit-period-chevron {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f0d698;
  background: rgba(213,181,110,0.09);
  border: 1px solid rgba(213,181,110,0.16);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.habit-period-block.collapsed {
  padding-bottom: 12px !important;
}
.habit-period-block.collapsed .habit-period-header {
  margin-bottom: 0 !important;
}
.habit-period-block.collapsed .habit-period-list {
  display: none !important;
}
.habit-period-block.collapsed .habit-period-chevron {
  transform: rotate(-90deg);
}
.habit-period-block.collapsed .habit-period-toggle {
  color: #f0d698;
  background: rgba(213,181,110,0.10);
  border-color: rgba(213,181,110,0.18);
}

@media (max-width: 620px) {
  .habit-period-toggle {
    min-width: 62px;
    padding: 5px 7px;
    font-size: 9px;
  }
  .habit-period-actions { gap: 5px; }
  .habit-period-chevron { width: 20px; height: 20px; font-size: 14px; }
}


/* ===== UPDATE v21: notification diagnostics ===== */
.notification-test-btn {
  margin-top: 10px;
  width: 100%;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(213,181,110,0.34);
  background: rgba(213,181,110,0.10);
  color: #f0d698;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.notification-test-btn:active { transform: translateY(1px); }


/* v22 notification sound selector */
.sound-select-wrap {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.sound-select-wrap .form-select {
  width: 100%;
}


/* v26 sound preview */
.sound-preview-btn {
  margin-top: 10px;
  width: 100%;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(213,181,110,0.32);
  background: rgba(213,181,110,0.10);
  color: #f0d698;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.sound-preview-btn:active { transform: scale(0.99); }


/* ===== DAILY MOTIVATION ===== */
.daily-motivation {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  max-width: 176px;
  flex: 1 1 156px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(213,181,110,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  line-height: 1.18;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.01em;
  text-wrap: balance;
}



/* ===== V37: HEADER MOTIVATION LAYOUT ===== */
@media (max-width: 980px) {
  .panel-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(142px, 41vw, 164px) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }
  .date-nav {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px 34px minmax(86px, 1fr) !important;
    grid-template-rows: auto 34px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .date-display {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    order: initial !important;
  }
  #prevDay { grid-column: 1 !important; grid-row: 2 !important; }
  #nextDay { grid-column: 2 !important; grid-row: 2 !important; }
  #goToday {
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
  }
  .header-status {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
  }
  .daily-motivation {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 18px !important;
    font-size: 10px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
}

/* ===== V37: PERIOD PHOTO ICONS — FULL AREA / CENTERED ===== */
.habit-period-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent !important;
  border: 1px solid rgba(213,181,110,0.28) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.025), 0 6px 16px rgba(0,0,0,0.18);
}
.habit-period-icon-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  vertical-align: top !important;
  transform: scale(1.03);
}
@media (max-width: 980px) {
  .habit-period-icon {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ===== V37: LIGHT THEME — COMPLETE STABLE RENDERING ===== */
body.light-theme {
  --bg: #f7f2e8 !important;
  --surface: #fffaf1 !important;
  --surface2: #f1e8d8 !important;
  --surface3: #e4d7c1 !important;
  --border: rgba(91, 70, 36, 0.15) !important;
  --border2: rgba(91, 70, 36, 0.24) !important;
  --text: #252019 !important;
  --text-muted: #776b5d !important;
  --text-dim: #9b8d7b !important;
  --accent: #c6a055 !important;
  --accent-glow: rgba(198,160,85,0.16) !important;
  background:
    radial-gradient(circle at 10% -8%, rgba(213,181,110,0.24), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(185,154,93,0.16), transparent 34%),
    linear-gradient(145deg, #faf5ec 0%, #f3eadb 52%, #faf6ef 100%) !important;
  color: var(--text) !important;
}

body.light-theme .sidebar,
body.light-theme .habits-panel,
body.light-theme .calendar-panel,
body.light-theme .stats-content,
body.light-theme .modal {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(247,238,223,0.98)) !important;
  border-color: rgba(91,70,36,0.16) !important;
  box-shadow: 0 18px 46px rgba(84,63,30,0.14), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

body.light-theme .logo-text,
body.light-theme .date-label,
body.light-theme .cal-month,
body.light-theme .stats-title,
body.light-theme .modal-title,
body.light-theme .habit-name,
body.light-theme .stats-period-summary strong,
body.light-theme .dash-card strong,
body.light-theme #doneCount,
body.light-theme #bestStreak,
body.light-theme #nextHabit {
  color: #252019 !important;
}

body.light-theme .date-sub,
body.light-theme .toolbar-note,
body.light-theme .habit-time,
body.light-theme .habit-goal,
body.light-theme .habit-days,
body.light-theme .stats-head-cell small,
body.light-theme .stats-summary-label,
body.light-theme .form-hint,
body.light-theme .notification-hint,
body.light-theme .progress-text,
body.light-theme .dash-label {
  color: #7f7162 !important;
}

body.light-theme .section-kicker,
body.light-theme .habit-period-title,
body.light-theme .stats-matrix-corner,
body.light-theme .stats-habit-percent,
body.light-theme .habit-period-block.collapsed .habit-period-toggle {
  color: #9d7938 !important;
}

body.light-theme .today-chip,
body.light-theme .date-arrow,
body.light-theme .habit-period-count,
body.light-theme .habit-period-toggle,
body.light-theme .habit-period-chevron,
body.light-theme .daily-motivation,
body.light-theme .progress-ring-wrap,
body.light-theme .stats-tabs,
body.light-theme .stat-card,
body.light-theme .detail-habit,
body.light-theme .habit-preview,
body.light-theme .heatmap-section,
body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .sound-preview-btn,
body.light-theme .notification-test-btn,
body.light-theme .btn-cancel {
  background: rgba(255,250,241,0.88) !important;
  border-color: rgba(91,70,36,0.16) !important;
  color: #3a3025 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

body.light-theme .daily-motivation {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(241,232,216,0.92)) !important;
  color: #756756 !important;
}

body.light-theme .dash-card,
body.light-theme .stats-period-summary,
body.light-theme .stats-period-summary > div,
body.light-theme .habit-period-block,
body.light-theme .habit-card {
  background: linear-gradient(180deg, rgba(255,251,244,0.96), rgba(239,229,211,0.92)) !important;
  border-color: rgba(91,70,36,0.16) !important;
  box-shadow: 0 8px 20px rgba(91,70,36,0.10), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

body.light-theme .habit-card:hover,
body.light-theme .habit-period-header:hover {
  background: linear-gradient(180deg, rgba(255,252,247,1), rgba(244,235,219,0.98)) !important;
}

body.light-theme .habit-card.completed {
  background: linear-gradient(180deg, rgba(235,244,228,0.98), rgba(224,237,216,0.96)) !important;
}

body.light-theme .habit-emoji,
body.light-theme .habit-edit,
body.light-theme .habit-delete,
body.light-theme .habit-check {
  background: rgba(255,250,241,0.92) !important;
  border-color: rgba(91,70,36,0.16) !important;
  color: #6f6254 !important;
}

body.light-theme .habit-card.completed .habit-check {
  color: #2b2114 !important;
}

body.light-theme .nav-item {
  color: #867865 !important;
}

body.light-theme .nav-item.active {
  background: linear-gradient(135deg, rgba(213,181,110,0.34), rgba(255,251,244,0.90)) !important;
  color: #8f6f36 !important;
  border-color: rgba(161,122,55,0.28) !important;
}

body.light-theme .add-btn,
body.light-theme .btn-save,
body.light-theme .stats-tab.active,
body.light-theme .cal-day.selected {
  background: linear-gradient(135deg, #f1dca5 0%, #d7b86d 55%, #b48c42 100%) !important;
  color: #241b10 !important;
  border-color: rgba(146,106,45,0.34) !important;
  box-shadow: 0 14px 34px rgba(151,112,50,0.22), inset 0 1px 0 rgba(255,255,255,0.68) !important;
}

body.light-theme .stats-tab {
  color: #857764 !important;
}

body.light-theme .stats-matrix-scroller {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(244,235,220,0.94)) !important;
  border-color: rgba(91,70,36,0.16) !important;
  box-shadow: 0 14px 30px rgba(91,70,36,0.12) !important;
}

body.light-theme .stats-matrix-corner,
body.light-theme .stats-head-cell,
body.light-theme .stats-habit-title {
  background: rgba(255,249,239,0.985) !important;
  border-right-color: rgba(91,70,36,0.10) !important;
  border-bottom-color: rgba(91,70,36,0.10) !important;
  box-shadow: 8px 0 16px rgba(91,70,36,0.08) !important;
}

body.light-theme .stats-head-cell span,
body.light-theme .stats-habit-name {
  color: #30281f !important;
}

body.light-theme .stats-head-cell.today,
body.light-theme .stats-check-cell.today {
  background: rgba(213,181,110,0.18) !important;
}

body.light-theme .stats-head-cell.today span,
body.light-theme .stats-head-cell.today small {
  color: #8f6f36 !important;
}

body.light-theme .stats-check-cell {
  background: rgba(255,250,242,0.68) !important;
  border-right-color: rgba(91,70,36,0.10) !important;
  border-bottom-color: rgba(91,70,36,0.10) !important;
}

body.light-theme .stats-check-cell::before {
  border-color: rgba(91,70,36,0.22) !important;
  background: rgba(255,255,255,0.80) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

body.light-theme .stats-check-cell.done::before {
  border-color: rgba(154,112,46,0.78) !important;
  background: linear-gradient(135deg, #f2dfae, #d7b86d 58%, #ae8337) !important;
}

body.light-theme .stats-check-cell.inactive {
  background: rgba(247,239,225,0.44) !important;
  opacity: 0.46 !important;
}

body.light-theme .stats-empty,
body.light-theme .empty-state {
  background: rgba(255,250,241,0.88) !important;
  color: #786b5d !important;
  border-color: rgba(91,70,36,0.16) !important;
}

body.light-theme .ring-bg {
  stroke: rgba(91,70,36,0.16) !important;
}
body.light-theme .ring-fill {
  stroke: #b48c42 !important;
  filter: drop-shadow(0 0 4px rgba(180,140,66,0.28)) !important;
}
body.light-theme .progress-text {
  color: #9d7938 !important;
}
body.light-theme .modal-overlay {
  background: rgba(81,63,36,0.36) !important;
}
body.light-theme .toggle-slider {
  background: #d9c7a7 !important;
}
body.light-theme .toggle input:checked + .toggle-slider {
  background: linear-gradient(135deg, #f0d698, #c6a055) !important;
}
body.light-theme .toggle input:checked + .toggle-slider::before {
  background: #5e4825 !important;
}



/* ===== V38: PERIOD PHOTO ICONS — CENTERED FULL-FILL ===== */
.habit-period-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 1px solid rgba(213,181,110,0.28) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 6px 16px rgba(0,0,0,0.18) !important;
}
.habit-period-icon-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  vertical-align: top !important;
  transform: scale(1.18) !important;
  transform-origin: center center !important;
}



/* ===== V39: PERIOD ICON FULL FILL ===== */
.habit-period-icon {
  width: 52px !important;
  height: 52px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.habit-period-icon-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 999px !important;
  transform: scale(1.00) !important;
  margin: 0 !important;
}


/* ===== V43: Exact reference period icon alignment ===== */
.habit-period-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}
.habit-period-icon-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
  transform: none !important;
}



/* ===== V45: exact reference icon crops ===== */
.habit-period-icon{width:52px!important;height:52px!important;border-radius:50%!important;overflow:hidden!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:0!important;flex-shrink:0!important;}
.habit-period-icon-img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center center!important;border-radius:50%!important;margin:0!important;padding:0!important;transform:none!important;}

/* ===== ALGORITHMS VIEW ===== */
.algo-content {
  padding: 28px 32px;
  overflow-y: auto;
  height: 100%;
  max-width: 1100px;
}

.algo-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--text, #f0eef8);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.algo-subtitle {
  font-size: 14px;
  color: var(--text-muted, #7b7589);
  margin-bottom: 24px;
}

.algo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .algo-content { padding: 16px; }
  .algo-grid { grid-template-columns: 1fr; gap: 14px; }
  .algo-title { font-size: 22px; }
}

.algo-card {
  background: var(--surface, #18171c);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.2s;
}

.algo-card--apply { border-top: 3px solid rgba(125,217,168,0.5); }
.algo-card--think  { border-top: 3px solid rgba(200,184,255,0.5); }

.algo-card:focus-within { border-color: var(--border2, rgba(255,255,255,0.12)); }

.algo-card-header {
  padding: 18px 20px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.algo-card-icon { font-size: 22px; line-height: 1; }

.algo-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #f0eef8);
  margin: 0;
}

.algo-card-hint {
  font-size: 12px;
  color: var(--text-dim, #4a4556);
  flex-basis: 100%;
  margin-top: -6px;
  padding-left: 32px;
}

.algo-textarea {
  flex: 1;
  background: var(--surface2, #211f27);
  border: none;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  color: var(--text, #f0eef8);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  padding: 16px 20px;
  resize: none;
  outline: none;
  min-height: 240px;
  transition: background 0.2s;
}

.algo-textarea::placeholder { color: var(--text-dim, #4a4556); }
.algo-textarea:focus { background: var(--surface3, #2a2733); }

.algo-footer {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  background: var(--surface, #18171c);
}

.algo-saved {
  font-size: 11px;
  color: var(--text-dim, #4a4556);
  transition: opacity 0.3s;
  opacity: 0;
}

.algo-saved.visible { opacity: 1; color: #7dd9a8; }

.algo-clear-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  color: var(--text-muted, #7b7589);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.algo-clear-btn:hover {
  border-color: rgba(244,125,125,0.4);
  color: #f47d7d;
}


/* ===== v47: mobile bottom navigation fit fix ===== */
@media (max-width: 980px) {
  .sidebar-nav {
    min-width: 0;
    gap: 3px;
  }
  .nav-item {
    min-width: 0;
    gap: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .nav-item span:last-child {
    min-width: 0;
    white-space: nowrap;
  }
  .sidebar-footer {
    width: 52px;
    min-width: 52px;
    flex: 0 0 52px;
    display: flex;
    justify-content: flex-end;
  }
}


/* ===== UPDATE v55: structure restore + centered period icons ===== */
@media (max-width: 980px) {
  .habits-panel {
    padding: 16px 14px 20px !important;
  }
  .panel-header {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .daily-dashboard, #dailyDashboard {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .daily-dashboard > .dash-card, #dailyDashboard > .dash-card {
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }
  .dash-card strong, #nextHabit {
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dash-card .dash-label {
    font-size: 8px !important;
    margin-bottom: 5px !important;
  }
  .habits-toolbar {
    margin-bottom: 12px !important;
  }
  .habit-period-block {
    padding: 14px 12px 12px !important;
    border-radius: 24px !important;
  }
  .habit-period-header {
    margin-bottom: 8px !important;
    padding: 0 2px !important;
  }
  .habit-period-title-wrap {
    gap: 12px !important;
    min-width: 0 !important;
  }
  .habit-period-icon {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 0 !important;
  }
  .habit-period-icon-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    border-radius: 50% !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .habit-period-evening .habit-period-icon-img,
  .habit-period-night .habit-period-icon-img {
    object-position: 50% 40% !important;
  }
  .habit-period-title {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .habit-period-range {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .habit-period-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .habit-period-count {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .habit-period-toggle {
    min-width: 86px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  .habit-period-chevron {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
  }
  .sidebar {
    height: 86px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar-nav {
    gap: 6px !important;
  }
  .nav-item {
    padding: 11px 6px !important;
    font-size: 11px !important;
  }
}


/* ===== UPDATE 89-v48-diary-reference-1to1-list: profile + language + compact period blocks ===== */
@media (max-width: 980px) {
  .sidebar { height: 64px !important; padding: 6px !important; }
  .sidebar-nav { gap: 4px !important; }
  .nav-item { flex: 1 1 0 !important; padding: 8px 4px !important; border-radius: 14px !important; }
  .nav-item .nav-icon { font-size: 13px !important; }
  .nav-item span:last-child { font-size: 9px !important; line-height: 1.1 !important; }
  .add-btn { width: 48px !important; height: 48px !important; min-height: 48px !important; border-radius: 16px !important; }
  .habit-period-block { padding: 12px 10px 10px !important; border-radius: 22px !important; }
  .habit-period-header { margin-bottom: 6px !important; }
  .habit-period-icon { width: 54px !important; height: 54px !important; min-width: 54px !important; }
  .habit-period-title { font-size: 13px !important; }
  .habit-period-range { font-size: 10px !important; }
  .habit-period-count { min-width: 26px !important; height: 26px !important; font-size: 12px !important; }
  .habit-period-toggle { min-width: 74px !important; padding: 5px 8px !important; font-size: 9px !important; }
  .habit-period-chevron { width: 22px !important; height: 22px !important; }
  .habit-name { font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
  .habit-meta { margin-top: 2px !important; }
  .habit-time, .habit-goal, .habit-days { font-size: 11px !important; }
}
.habit-period-evening .habit-period-icon-img,
.habit-period-night .habit-period-icon-img { object-position: 50% 40% !important; }
.profile-content { padding-bottom: 24px; }
.profile-subtitle { margin: -8px 0 18px; color: var(--text-muted); font-size: 14px; }
.profile-card { border-radius: 22px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.12); margin-bottom: 14px; }
.profile-card-head h3 { margin: 0 0 4px; font-size: 18px; color: var(--text); }
.profile-card-head p { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; }
.profile-theme-row { display: flex; align-items: center; gap: 12px; }
.profile-theme-label { font-size: 13px; color: var(--text); }
.language-switcher { display: flex; gap: 10px; flex-wrap: wrap; }
.language-btn { border: 1px solid rgba(213,181,110,0.22); background: rgba(255,255,255,0.04); color: var(--text); border-radius: 999px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.language-btn.active { background: rgba(213,181,110,0.18); border-color: rgba(213,181,110,0.42); color: #f0d698; }
@media (max-width: 980px) {
  .profile-card { padding: 16px !important; border-radius: 20px !important; }
  .profile-card-head h3 { font-size: 16px !important; }
  .profile-card-head p, .profile-subtitle, .profile-theme-label { font-size: 12px !important; }
  .language-btn { padding: 9px 12px !important; font-size: 12px !important; }
}
body.light-theme .section-kicker,
body.light-theme .toolbar-note,
body.light-theme .daily-motivation,
body.light-theme .habit-period-title,
body.light-theme .habit-period-range,
body.light-theme .habit-period-toggle,
body.light-theme .habit-period-count,
body.light-theme .profile-subtitle,
body.light-theme .profile-card-head p,
body.light-theme .profile-theme-label,
body.light-theme .nav-item,
body.light-theme .stats-summary-label,
body.light-theme .stats-habit-percent,
body.light-theme .stats-tab {
  color: #2c2924 !important;
}
body.light-theme .language-btn { color: #2c2924 !important; background: rgba(255,255,255,0.72) !important; }
body.light-theme .language-btn.active { color: #181512 !important; background: rgba(213,181,110,0.22) !important; }
body.light-theme .habit-period-block,
body.light-theme .habit-card,
body.light-theme .profile-card,
body.light-theme .dash-card,
body.light-theme .daily-motivation,
body.light-theme .today-chip,
body.light-theme .date-arrow,
body.light-theme .nav-item,
body.light-theme .stats-tab {
  border-color: rgba(66,55,37,0.22) !important;
}


/* ===== UPDATE v57: critical plus fix visuals, compact notes, stable secondary views, light theme text/icon correction ===== */
#openModal, #openModalEmpty { pointer-events: auto !important; }

@media (max-width: 980px) {
  .habit-name {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }
  .habit-meta {
    margin-top: 2px !important;
  }
  .habit-time, .habit-goal, .habit-days {
    font-size: 10.5px !important;
    line-height: 1.12 !important;
  }

  /* Стабильная геометрия вкладок Алгоритмы / Статистика / Профиль */
  .view.active:not(#view-today) {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .algo-content,
  .stats-content,
  .profile-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 92px) !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 18px 14px 118px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  .algo-title,
  .stats-title,
  .profile-content .stats-title {
    font-size: 32px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
  }
  .algo-subtitle,
  .profile-subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
  }
  .algo-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .algo-card,
  .profile-card {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
  .stats-tabs {
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
  }
  .stats-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
  .stats-grid {
    margin-bottom: 18px !important;
  }
  .profile-card-head h3 {
    font-size: 16px !important;
  }
  .profile-card-head p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .profile-theme-row,
  .language-switcher {
    gap: 10px !important;
  }
  .language-btn {
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  /* Нижняя навигация: 4 пункта + плюс без наложений */
  .sidebar {
    height: 70px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .nav-item {
    min-width: 0 !important;
    padding: 7px 2px !important;
    gap: 3px !important;
    border-radius: 14px !important;
  }
  .nav-item .nav-icon {
    font-size: 12px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
  }
  .nav-item span:last-child {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .sidebar-footer {
    flex: 0 0 52px !important;
  }
  .add-btn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
    position: relative !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
  }
}

/* Светлая тема: премиальный тёмный текст вместо коричневого */
body.light-theme,
body.light-theme .date-label,
body.light-theme .date-sub,
body.light-theme .section-kicker,
body.light-theme .toolbar-note,
body.light-theme .daily-motivation,
body.light-theme .habit-period-title,
body.light-theme .habit-period-range,
body.light-theme .habit-period-toggle,
body.light-theme .habit-period-count,
body.light-theme .habit-name,
body.light-theme .habit-time,
body.light-theme .habit-goal,
body.light-theme .habit-days,
body.light-theme .dash-label,
body.light-theme .dash-card strong,
body.light-theme .profile-subtitle,
body.light-theme .profile-card-head h3,
body.light-theme .profile-card-head p,
body.light-theme .profile-theme-label,
body.light-theme .stats-title,
body.light-theme .stats-summary-label,
body.light-theme .stats-habit-name,
body.light-theme .stats-habit-percent,
body.light-theme .cal-month,
body.light-theme .nav-item,
body.light-theme .stats-tab,
body.light-theme .algo-title,
body.light-theme .algo-subtitle,
body.light-theme .algo-card-title,
body.light-theme .algo-card-hint {
  color: #25282d !important;
}
body.light-theme .dash-label,
body.light-theme .habit-period-range,
body.light-theme .toolbar-note,
body.light-theme .profile-subtitle,
body.light-theme .profile-card-head p,
body.light-theme .algo-subtitle,
body.light-theme .algo-card-hint {
  color: #5d626b !important;
}
body.light-theme .nav-item.active,
body.light-theme .stats-tab.active,
body.light-theme .language-btn.active,
body.light-theme .today-chip,
body.light-theme .habit-period-toggle,
body.light-theme .habit-period-count {
  color: #22252a !important;
}

/* В СВЕТЛОЙ теме вечер и ночь подняты внутри круга на 10% */
body.light-theme .habit-period-evening .habit-period-icon-img,
body.light-theme .habit-period-night .habit-period-icon-img {
  object-position: 50% 50% !important;
  transform: translateY(-10%) scale(1.16) !important;
  transform-origin: center center !important;
}


/* ===== v57: guarantee add/edit controls are clickable ===== */
#openModal,
#openModalEmpty,
.habit-edit {
  pointer-events: auto !important;
  position: relative;
  z-index: 80;
}

.modal-overlay {
  z-index: 3000 !important;
}

.modal-overlay.open {
  display: flex !important;
  pointer-events: auto !important;
}


/* ===== v58: compact record cards inside Morning/Day/Evening/Night ===== */
@media (max-width: 980px) {
  /* Цель: записи внутри периодов визуально сопоставимы по масштабу с нижними detail-habit строками календаря */
  .habit-period-list {
    gap: 7px !important;
  }

  .habit-period-block .habit-card {
    min-height: 56px !important;
    height: auto !important;
    padding: 7px 9px !important;
    gap: 8px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  .habit-period-block .habit-card::before {
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
  }

  .habit-period-block .habit-emoji {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }

  .habit-period-block .habit-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .habit-period-block .habit-name {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .habit-period-block .habit-meta {
    margin-top: 2px !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
  }

  .habit-period-block .habit-time,
  .habit-period-block .habit-goal,
  .habit-period-block .habit-days,
  .habit-period-block .habit-streak {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .habit-period-block .habit-days {
    padding: 2px 7px !important;
    border-radius: 999px !important;
  }

  .habit-period-block .habit-edit,
  .habit-period-block .habit-delete,
  .habit-period-block .habit-check {
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    font-size: 12px !important;
  }

  .habit-period-block .edit-pencil-svg {
    width: 14px !important;
    height: 14px !important;
  }

  .habit-period-block .habit-check {
    border-width: 2px !important;
  }
}


/* ===== v59: compact period blocks + week-first calendar ===== */
@media (max-width: 980px) {
  .habits-list { gap: 7px !important; }

  /* Утро / День / Вечер / Ночь: уменьшение примерно на 15% */
  .habit-period-block {
    padding: 9px 9px 8px !important;
    border-radius: 20px !important;
  }

  .habit-period-header {
    margin-bottom: 4px !important;
    padding: 0 1px !important;
  }

  .habit-period-title-wrap { gap: 9px !important; }

  .habit-period-icon {
    width: 49px !important;
    height: 49px !important;
    min-width: 49px !important;
  }

  .habit-period-title {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
  }

  .habit-period-range {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  .habit-period-actions { gap: 5px !important; }

  .habit-period-count {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .habit-period-toggle {
    min-width: 68px !important;
    padding: 4px 7px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  .habit-period-chevron {
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
  }

  /* Календарь: по умолчанию одна неделя */
  .calendar-panel { padding-top: 14px !important; }
  .calendar-header { margin-bottom: 8px !important; }

  .calendar-toggle {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 0 0 8px auto;
    padding: 0 11px;
    border: 1px solid rgba(213,181,110,0.24);
    border-radius: 999px;
    background: rgba(213,181,110,0.08);
    color: var(--gold);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
  }

  .calendar-grid--week { margin-bottom: 4px !important; }
  .calendar-grid--week .cal-day { min-height: 42px; }

  .day-detail {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
}

body.light-theme .calendar-toggle {
  color: #27231d !important;
  border-color: rgba(66,55,37,0.24) !important;
  background: rgba(213,181,110,0.15) !important;
}


/* ===== v60: calendar icon toggle in header, no text button ===== */
.calendar-title-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.calendar-icon-toggle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 12px;
  border: 1px solid rgba(213,181,110,0.28);
  background: rgba(213,181,110,0.08);
  color: var(--gold);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.calendar-icon-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-icon-toggle.is-expanded {
  background: rgba(213,181,110,0.16);
  border-color: rgba(213,181,110,0.46);
}

.calendar-icon-toggle:active {
  transform: scale(0.96);
}

/* Legacy text toggle is no longer used */
.calendar-toggle {
  display: none !important;
}

body.light-theme .calendar-icon-toggle {
  color: #27231d !important;
  border-color: rgba(66,55,37,0.24) !important;
  background: rgba(213,181,110,0.15) !important;
}

@media (max-width: 980px) {
  .calendar-header {
    margin-bottom: 8px !important;
  }
  .calendar-title-group {
    gap: 8px !important;
  }
  .calendar-icon-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
  }
  .calendar-icon-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/* ===== v61: calendar moved to top, Quotes title, header status floating right ===== */
.habits-panel > .calendar-panel {
  width: 100% !important;
  position: relative !important;
  flex-shrink: 0 !important;
  border-left: 0 !important;
  border-radius: 24px !important;
  margin: 0 0 12px 0 !important;
  padding: 18px 16px 16px !important;
  background: linear-gradient(180deg, rgba(24,23,31,0.84), rgba(14,13,19,0.76)) !important;
  border: 1px solid var(--border) !important;
  overflow: visible !important;
}

.calendar-floating-status {
  position: absolute !important;
  top: -8px !important;
  right: 14px !important;
  z-index: 2 !important;
}

.calendar-floating-status .header-status {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.habits-panel > .calendar-panel .calendar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding-right: 126px !important;
  margin-bottom: 8px !important;
}

.habits-panel > .calendar-panel .calendar-title-group {
  order: 1 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.habits-panel > .calendar-panel #calMonth {
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.habits-panel > .calendar-panel #prevMonth {
  order: 2 !important;
  margin-left: auto !important;
}

.habits-panel > .calendar-panel #nextMonth {
  order: 3 !important;
}

.habits-panel > #dailyDashboard {
  margin: 0 0 12px 0 !important;
}

.panel-header {
  margin-top: 2px !important;
}

.panel-header .date-nav {
  align-items: center !important;
}

.panel-header #calendarToggle {
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  .habits-panel > .calendar-panel {
    margin-bottom: 10px !important;
    padding: 15px 12px 12px !important;
    border-radius: 22px !important;
  }

  .calendar-floating-status {
    top: -6px !important;
    right: 10px !important;
  }

  .calendar-floating-status .brand-progress {
    width: 42px !important;
    height: 42px !important;
  }

  .calendar-floating-status .progress-ring-wrap,
  .calendar-floating-status .progress-ring {
    width: 42px !important;
    height: 42px !important;
  }

  .calendar-floating-status .progress-text {
    font-size: 10px !important;
  }

  .habits-panel > .calendar-panel .calendar-header {
    min-height: 36px !important;
    gap: 6px !important;
    padding-right: 98px !important;
    margin-bottom: 6px !important;
  }

  .habits-panel > .calendar-panel #calMonth {
    font-size: 16px !important;
  }

  .habits-panel > #dailyDashboard {
    margin-bottom: 10px !important;
  }

  .panel-header .date-nav {
    gap: 6px !important;
  }

  .panel-header #goToday {
    min-width: auto !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .panel-header #calendarToggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}

body.light-theme .habits-panel > .calendar-panel {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(247,238,223,0.98)) !important;
  border-color: rgba(91,70,36,0.16) !important;
}


/* v62 layout restore */
.calendar-floating-status{display:none!important;}
.habits-panel{display:flex;flex-direction:column;gap:12px;}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:0!important;}
.panel-header .header-status{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.panel-header .date-nav{flex:1 1 auto;}
.quotes-strip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;background:linear-gradient(180deg, rgba(24,23,31,0.84), rgba(14,13,19,0.76));border:1px solid var(--border);box-shadow:var(--shadow-soft);}
.quotes-strip-info{min-width:0;flex:1 1 auto;display:flex;align-items:center;gap:12px;}
.quotes-strip-title{font-family:"DM Serif Display", serif;font-size:22px;line-height:1;color:var(--text);flex:0 0 auto;}
.daily-motivation--quote{margin:0!important;max-width:none!important;flex:1 1 auto;min-height:48px;display:flex;align-items:center;padding:0 16px;font-size:14px;line-height:1.24;}
.quotes-calendar-toggle{flex:0 0 auto;}
.calendar-panel{width:100%!important;position:relative!important;border-left:0!important;border-radius:24px!important;padding:14px 16px!important;margin:0!important;overflow:hidden!important;}
.calendar-panel .calendar-header{padding-right:0!important;min-height:40px!important;margin-bottom:8px!important;}
.calendar-panel .calendar-title-group{justify-content:center;flex:1 1 auto;}
.calendar-panel #calMonth{font-size:16px!important;}
#dailyDashboard{margin:0!important;}
#dayDetail{margin-top:0!important;width:100%!important;}
#dayDetail .day-detail-title{margin-bottom:10px;}
@media (max-width: 980px){
  .habits-panel{gap:10px!important;}
  .panel-header{gap:10px!important;}
  .panel-header .date-nav{gap:8px!important;flex-wrap:wrap!important;}
  .panel-header .date-display{flex-basis:100%!important;order:-1!important;text-align:left!important;}
  .panel-header .header-status{gap:8px!important;}
  .quotes-strip{padding:10px 12px!important;border-radius:20px!important;gap:10px!important;}
  .quotes-strip-info{gap:10px!important;align-items:flex-start!important;flex-direction:column!important;}
  .quotes-strip-title{font-size:20px!important;}
  .daily-motivation--quote{width:100%!important;min-height:42px!important;padding:10px 12px!important;font-size:12px!important;border-radius:18px!important;}
  .quotes-calendar-toggle{width:34px!important;height:34px!important;min-width:34px!important;}
  .calendar-panel{padding:12px!important;border-radius:22px!important;}
  .calendar-panel .calendar-header{min-height:34px!important;margin-bottom:6px!important;}
  .calendar-panel #calMonth{font-size:15px!important;}
}
body.light-theme .quotes-strip{background:linear-gradient(180deg, rgba(255,251,244,0.98), rgba(247,238,223,0.98));border-color:rgba(91,70,36,0.16);}


/* ===== v62: exact 5-row home structure ===== */
.panel-header--utility-hidden {
  display: none !important;
}

.top-primary-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 72px !important;
  margin: 0 0 10px 0 !important;
}

.top-quote-card {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(24,23,31,0.84), rgba(14,13,19,0.76)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

.top-quote-card .quotes-strip-info {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
}

.top-quote-card .quotes-strip-title {
  margin: 0 !important;
  font-family: "DM Serif Display", serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: var(--gold) !important;
}

.top-quote-card .daily-motivation--quote {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  text-align: left !important;
}

.top-calendar-toggle {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  margin: 0 !important;
}

.top-primary-row .header-status {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.top-primary-row .brand-progress {
  width: 48px !important;
  height: 48px !important;
}

.top-primary-row .progress-ring-wrap,
.top-primary-row .progress-ring {
  width: 48px !important;
  height: 48px !important;
}

.top-primary-row .progress-text {
  font-size: 12px !important;
}

.habits-panel > .calendar-panel {
  order: initial !important;
  margin: 0 0 10px 0 !important;
  width: 100% !important;
  position: relative !important;
  padding: 14px 14px 12px !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(24,23,31,0.84), rgba(14,13,19,0.76)) !important;
  box-shadow: var(--shadow-soft) !important;
}

.habits-panel > .calendar-panel .calendar-header {
  min-height: 36px !important;
  margin-bottom: 8px !important;
  padding-right: 0 !important;
  justify-content: space-between !important;
}

.habits-panel > .calendar-panel .calendar-title-group {
  justify-content: center !important;
  flex: 1 1 auto !important;
}

.habits-panel > .calendar-panel #calMonth {
  font-size: 16px !important;
  text-align: center !important;
}

.habits-panel > #dailyDashboard {
  margin: 0 0 10px 0 !important;
}

.habits-panel > .habits-toolbar {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.habits-panel > #habitsList {
  margin-bottom: 10px !important;
}

.habits-panel > #dayDetail {
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
}

body.light-theme .top-quote-card,
body.light-theme .habits-panel > .calendar-panel {
  background: linear-gradient(180deg, rgba(255,251,244,0.98), rgba(247,238,223,0.98)) !important;
  border-color: rgba(91,70,36,0.16) !important;
}

body.light-theme .top-quote-card .daily-motivation--quote {
  color: #2c2924 !important;
}

@media (max-width: 980px) {
  .habits-panel {
    gap: 0 !important;
  }

  .top-primary-row {
    gap: 8px !important;
    min-height: 68px !important;
    margin-bottom: 10px !important;
  }

  .top-quote-card {
    min-height: 68px !important;
    padding: 10px 11px !important;
    border-radius: 20px !important;
  }

  .top-quote-card .quotes-strip-title {
    font-size: 15px !important;
  }

  .top-quote-card .daily-motivation--quote {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  .top-calendar-toggle {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
  }

  .top-primary-row .header-status {
    gap: 6px !important;
  }

  .top-primary-row .brand-progress {
    width: 44px !important;
    height: 44px !important;
  }

  .top-primary-row .progress-ring-wrap,
  .top-primary-row .progress-ring {
    width: 44px !important;
    height: 44px !important;
  }

  .top-primary-row .progress-text {
    font-size: 11px !important;
  }

  .habits-panel > .calendar-panel {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .habits-panel > .calendar-panel #calMonth {
    font-size: 15px !important;
  }
}

/* ===== TIMER FEATURE ===== */
.timer-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.timer-popup {
  background: var(--card-bg, #1e1e2e); border-radius: 20px;
  padding: 32px 28px; min-width: 270px; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.timer-popup-name {
  font-size: 1rem; opacity: 0.65; margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; margin-inline: auto;
}
.timer-display {
  font-size: 3.6rem; font-weight: 700; letter-spacing: 4px;
  margin: 12px 0 20px; font-variant-numeric: tabular-nums;
  color: var(--accent, #d5b56e);
}
.timer-controls { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.btn-timer-action {
  background: var(--accent, #d5b56e); color: #111; border: none;
  border-radius: 12px; padding: 10px 22px; font-size: 0.95rem;
  cursor: pointer; font-weight: 600; transition: opacity 0.15s;
}
.btn-timer-action:hover { opacity: 0.85; }
.btn-timer-close {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 10px; padding: 8px 20px; cursor: pointer;
  color: var(--text-secondary, #888); font-size: 0.85rem;
  transition: opacity 0.15s;
}
.btn-timer-close:hover { opacity: 0.75; }
.habit-timer {
  background: none; border: none; cursor: pointer;
  font-size: 1.05rem; padding: 6px 4px; opacity: 0.6;
  transition: opacity 0.2s; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.habit-timer:hover { opacity: 1; }
.timer-duration-wrap { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.timer-duration-wrap .form-label { margin: 0; white-space: nowrap; }


/* ===== v63: top quote/status layout + calendar icon beside month ===== */
.top-primary-row--quote-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

.top-quote-card--text-only {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 13px 16px !important;
}

.top-quote-card--text-only .quotes-strip-info {
  width: 100% !important;
  min-width: 0 !important;
}

.top-quote-card--text-only .quotes-strip-title {
  display: none !important;
}

.top-quote-card--text-only .daily-motivation--quote {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.34 !important;
  text-align: left !important;
}

.top-primary-row--quote-status .header-status {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  align-self: center !important;
}

.top-primary-row--quote-status .brand-progress,
.top-primary-row--quote-status .progress-ring-wrap,
.top-primary-row--quote-status .progress-ring {
  align-self: center !important;
}

.calendar-title-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.calendar-month-toggle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 11px !important;
  margin: 0 !important;
}

.notification-test-btn,
.sound-preview-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#timerFormGroup,
.timer-duration-wrap,
.habit-timer {
  visibility: visible !important;
}

@media (max-width: 980px) {
  .top-primary-row--quote-status {
    gap: 8px !important;
  }

  .top-quote-card--text-only {
    min-height: 62px !important;
    padding: 11px 12px !important;
  }

  .top-quote-card--text-only .daily-motivation--quote {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .top-primary-row--quote-status .header-status {
    gap: 7px !important;
  }

  .top-primary-row--quote-status .brand-progress {
    width: 44px !important;
    height: 44px !important;
  }

  .top-primary-row--quote-status .progress-ring-wrap,
  .top-primary-row--quote-status .progress-ring {
    width: 44px !important;
    height: 44px !important;
  }

  .calendar-month-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
  }
}


/* ===== v64: reminder toggle restored + modal row stability ===== */
.notification-toggle-row,
.timer-toggle-row {
  width: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.notification-toggle-row .toggle,
.timer-toggle-row .toggle,
.notification-toggle-control,
.timer-toggle-control {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 24px !important;
}

#reminderToggle,
#habitTimerToggle {
  pointer-events: auto !important;
}

#saveHabit {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}


/* ===== v65: requested layout cleanup ===== */
.habits-toolbar {
  display: none !important;
}

/* Top row: quote on left, app icon + progress fully visible and aligned */
.top-primary-row--quote-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: 100% !important;
  overflow: visible !important;
}

.top-primary-row--quote-status .top-quote-card--text-only {
  min-width: 0 !important;
}

.top-primary-row--quote-status .header-status {
  width: 112px !important;
  min-width: 112px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 0 !important;
  transform: translateX(-4px) translateY(2px) !important;
  overflow: visible !important;
}

.top-primary-row--quote-status .brand-progress,
.top-primary-row--quote-status .progress-ring-wrap,
.top-primary-row--quote-status .progress-ring {
  overflow: visible !important;
  align-self: center !important;
}

.top-primary-row--quote-status .progress-ring-wrap {
  transform: translateY(1px) !important;
}

/* Calendar icon slightly farther from the month label */
.calendar-title-group {
  gap: 14px !important;
}

.calendar-month-toggle {
  margin-left: 2px !important;
}

/* Toast must not remain visually after adding/editing a habit */
.toast.v65-hide-after-save,
.toast.v65-hide-after-save.show {
  transform: translateX(-50%) translateY(100px) !important;
  opacity: 0 !important;
}

@media (max-width: 980px) {
  .top-primary-row--quote-status {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    column-gap: 8px !important;
  }

  .top-primary-row--quote-status .header-status {
    width: 104px !important;
    min-width: 104px !important;
    gap: 6px !important;
    transform: translateX(-5px) translateY(2px) !important;
  }

  .calendar-title-group {
    gap: 12px !important;
  }
}


/* ===== v66: timer button, push toggle, icon rounding, calendar spacing ===== */
.habit-timer {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,0.035) !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--transition) !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

.habit-timer:hover,
.habit-timer:active {
  color: #f0d698 !important;
  background: rgba(213,181,110,0.12) !important;
  border-color: rgba(213,181,110,0.25) !important;
}

.notification-toggle-row,
.notification-toggle-row.form-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 32px !important;
  gap: 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.notification-toggle-row .toggle,
.notification-toggle-control {
  display: inline-flex !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#reminderToggle {
  pointer-events: auto !important;
}

.brand-progress {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.brand-progress-img {
  object-fit: contain !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.brand-progress::after,
.brand-progress-mask {
  border-radius: inherit !important;
}

.calendar-title-group {
  gap: 22px !important;
}

.calendar-month-toggle {
  margin-left: 4px !important;
}

@media (max-width: 980px) {
  .calendar-title-group {
    gap: 18px !important;
  }

  .calendar-month-toggle {
    margin-left: 3px !important;
  }
}


/* ===== v68: move quotes below dashboard and move app icon + progress into calendar header ===== */
.quote-inline-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
}
.quote-inline-row .top-quote-card--text-only {
  width: 100% !important;
  min-height: auto !important;
}
.quote-inline-row .daily-motivation--quote {
  white-space: normal !important;
}
.calendar-header--status-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
}
.calendar-header--status-top .calendar-title-group {
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 14px !important;
}
.calendar-header--status-top .calendar-month-toggle {
  margin-left: 8px !important;
}
.calendar-header-status {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}
.calendar-header-status .brand-progress,
.calendar-header-status .progress-ring-wrap,
.calendar-header-status .progress-ring {
  overflow: visible !important;
}
.calendar-hidden-nav,
.calendar-hidden-nav .cal-arrow,
.calendar-header--status-top > #prevMonth,
.calendar-header--status-top > #nextMonth,
.calendar-panel .calendar-header > .cal-arrow {
  display: none !important;
}
@media (max-width: 980px) {
  .calendar-header--status-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
  }
  .calendar-header--status-top .calendar-title-group {
    gap: 12px !important;
  }
  .calendar-header-status {
    gap: 8px !important;
  }
  .quote-inline-row {
    margin-bottom: 10px !important;
  }
}


/* ===== v69: calendar header refinement — centered month, compact right progress, no app icon ===== */
.calendar-header--status-top {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 52px !important;
}

.calendar-header--status-top .calendar-title-group {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: max-content !important;
  max-width: calc(100% - 64px) !important;
  min-width: 0 !important;
  z-index: 1 !important;
}

.calendar-header--status-top .cal-month {
  text-align: center !important;
  white-space: nowrap !important;
}

.calendar-header-status {
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.calendar-header-status .brand-progress,
.calendar-header-status .brand-progress-img,
.calendar-header-status .brand-progress-mask {
  display: none !important;
}

.calendar-header-status .progress-ring-wrap,
.calendar-header-status .progress-ring {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.calendar-header-status .progress-ring-wrap {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.calendar-header-status .progress-ring {
  display: block !important;
}

.calendar-header-status .progress-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    min-height: 50px !important;
    column-gap: 8px !important;
  }

  .calendar-header--status-top .calendar-title-group {
    gap: 12px !important;
    max-width: calc(100% - 58px) !important;
  }

  .calendar-header-status {
    width: 42px !important;
    min-width: 42px !important;
  }

  .calendar-header-status .progress-ring-wrap,
  .calendar-header-status .progress-ring {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .calendar-header-status .progress-text {
    font-size: 9.5px !important;
  }
}


/* ===== v70: progress ring in selected-date row; quotes without day prefix ===== */
.calendar-header--status-top {
  grid-template-columns: minmax(0, 1fr) !important;
}

.calendar-header-status {
  display: none !important;
}

.day-detail-head {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px 0 !important;
}

.day-detail-head .day-detail-title {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.day-detail-progress-slot {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

.day-detail-progress-slot .progress-ring-wrap {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.day-detail-progress-slot .progress-ring {
  display: block !important;
}

.day-detail-progress-slot .progress-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
}

@media (max-width: 980px) {
  .day-detail-head {
    margin-bottom: 10px !important;
    gap: 10px !important;
  }

  .day-detail-progress-slot {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 8px !important;
  }
}


/* ===== v71: strictly centered month + fully visible compact day progress ===== */
.calendar-header--status-top {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
}

.calendar-header--status-top .calendar-title-group {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: center !important;
}

.calendar-header--status-top .cal-month {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.calendar-header--status-top .calendar-month-toggle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) translateX(82px) !important;
}

.day-detail-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: 100% !important;
  padding-right: 2px !important;
  overflow: visible !important;
}

.day-detail {
  overflow: visible !important;
}

.day-detail-head .day-detail-title {
  min-width: 0 !important;
}

.day-detail-progress-slot {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  justify-self: end !important;
  align-self: center !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  overflow: visible !important;
}

.day-detail-progress-slot .progress-ring-wrap {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.day-detail-progress-slot .progress-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top {
    min-height: 50px !important;
  }

  .calendar-header--status-top .calendar-month-toggle {
    transform: translateY(-50%) translateX(76px) !important;
  }

  .day-detail-head {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    column-gap: 6px !important;
    padding-right: 2px !important;
  }

  .day-detail-progress-slot,
  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 6.6px !important;
  }
}


/* ===== v72: calendar week realigned + tighter month icon + smaller day progress ===== */
.calendar-weekdays,
.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
}

.calendar-weekdays span {
  width: 100% !important;
  text-align: center !important;
}

.calendar-grid--week {
  gap: 2px !important;
}

.calendar-grid--week .cal-day {
  width: 100% !important;
  min-height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.calendar-grid--week .cal-day span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.calendar-header--status-top .calendar-month-toggle {
  transform: translateY(-50%) translateX(68px) !important;
}

.day-detail-head {
  grid-template-columns: minmax(0, 1fr) 22px !important;
  column-gap: 6px !important;
}

.day-detail-progress-slot {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.day-detail-progress-slot .progress-ring circle {
  cx: 11 !important;
  cy: 11 !important;
  r: 8.2 !important;
}

.day-detail-progress-slot .progress-text {
  font-size: 5.2px !important;
  font-weight: 700 !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top .calendar-month-toggle {
    transform: translateY(-50%) translateX(60px) !important;
  }

  .calendar-grid--week .cal-day {
    min-height: 44px !important;
  }

  .day-detail-head {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    column-gap: 5px !important;
  }

  .day-detail-progress-slot,
  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 4.9px !important;
  }
}


/* ===== v73: thinner day progress ring + month icon closer ===== */
.calendar-header--status-top .calendar-month-toggle {
  transform: translateY(-50%) translateX(56px) !important;
}

.day-detail-head {
  grid-template-columns: minmax(0, 1fr) 20px !important;
}

.day-detail-progress-slot {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

.day-detail-progress-slot .ring-bg,
.day-detail-progress-slot .ring-fill {
  stroke-width: 1.6 !important;
}

.day-detail-progress-slot .ring-fill {
  filter: drop-shadow(0 0 1.5px rgba(115, 255, 199, 0.45)) !important;
}

.day-detail-progress-slot .progress-ring circle {
  cx: 10 !important;
  cy: 10 !important;
  r: 7.1 !important;
}

.day-detail-progress-slot .progress-text {
  font-size: 4.7px !important;
  letter-spacing: 0 !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top .calendar-month-toggle {
    transform: translateY(-50%) translateX(50px) !important;
  }

  .day-detail-head {
    grid-template-columns: minmax(0, 1fr) 18px !important;
    column-gap: 4px !important;
  }

  .day-detail-progress-slot,
  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .day-detail-progress-slot .progress-ring circle {
    cx: 9 !important;
    cy: 9 !important;
    r: 6.35 !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 4.3px !important;
  }
}


/* ===== v74: progress slot larger/centered, thinner ring, month icon tighter ===== */
.calendar-header--status-top .calendar-month-toggle {
  transform: translateY(-50%) translateX(46px) !important;
}

.day-detail-head {
  grid-template-columns: minmax(0, 1fr) 22px !important;
  column-gap: 4px !important;
}

.day-detail-progress-slot {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  justify-self: end !important;
  align-self: center !important;
  margin-right: 10px !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

.day-detail-progress-slot .ring-bg,
.day-detail-progress-slot .ring-fill {
  stroke-width: 1.55 !important;
}

.day-detail-progress-slot .ring-fill {
  filter: drop-shadow(0 0 1.6px rgba(115, 255, 199, 0.45)) !important;
}

.day-detail-progress-slot .progress-ring circle {
  cx: 11 !important;
  cy: 11 !important;
  r: 7.95 !important;
}

.day-detail-progress-slot .progress-text {
  font-size: 4.8px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top .calendar-month-toggle {
    transform: translateY(-50%) translateX(40px) !important;
  }

  .day-detail-head {
    grid-template-columns: minmax(0, 1fr) 20px !important;
    column-gap: 4px !important;
  }

  .day-detail-progress-slot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-right: 8px !important;
  }

  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .day-detail-progress-slot .progress-ring circle {
    cx: 10 !important;
    cy: 10 !important;
    r: 7.2 !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 4.5px !important;
  }
}

/* ===== v75: tighter month icon + slightly larger day progress ring ===== */
.calendar-header--status-top .calendar-title-group {
  gap: 8px !important;
}

.calendar-header--status-top .calendar-month-toggle {
  transform: translateY(-50%) translateX(20px) !important;
}

.day-detail-progress-slot {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin-right: 10px !important;
}

.day-detail-progress-slot .progress-ring-wrap,
.day-detail-progress-slot .progress-ring {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.day-detail-progress-slot .ring-bg,
.day-detail-progress-slot .ring-fill {
  stroke-width: 1.45 !important;
}

.day-detail-progress-slot .progress-ring circle {
  cx: 12 !important;
  cy: 12 !important;
  r: 8.8 !important;
}

.day-detail-progress-slot .progress-text {
  font-size: 4.9px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top .calendar-title-group {
    gap: 6px !important;
  }

  .calendar-header--status-top .calendar-month-toggle {
    transform: translateY(-50%) translateX(16px) !important;
  }

  .day-detail-progress-slot {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 10px !important;
  }

  .day-detail-progress-slot .progress-ring-wrap,
  .day-detail-progress-slot .progress-ring {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  .day-detail-progress-slot .progress-ring circle {
    cx: 11 !important;
    cy: 11 !important;
    r: 8.05 !important;
  }

  .day-detail-progress-slot .progress-text {
    font-size: 4.6px !important;
  }
}

/* ===== vFinal: calendar icon spacing + bottom nav text-only ===== */
.calendar-header--status-top,
.calendar-panel .calendar-header {
  justify-content: center !important;
}

.calendar-header--status-top .calendar-title-group,
.calendar-panel .calendar-title-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  flex: 0 1 auto !important;
  margin: 0 auto !important;
}

.calendar-header--status-top .cal-month,
.calendar-panel .cal-month {
  margin: 0 !important;
}

.calendar-header--status-top .calendar-month-toggle,
.calendar-panel .calendar-month-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  margin-left: 2px !important;
  flex: 0 0 auto !important;
}

/* text-only bottom nav so labels fit without clipping */
.sidebar-nav .nav-item .nav-icon {
  display: none !important;
}

.sidebar-nav .nav-item {
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 8px 4px !important;
}

.sidebar-nav .nav-item span:last-child {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 9.4px !important;
  line-height: 1.1 !important;
}

@media (min-width: 981px) {
  .sidebar-nav .nav-item span:last-child {
    font-size: 11px !important;
  }
}


/* ===== v76: expanded calendar restored to large/full view ===== */
.calendar-header--status-top .calendar-title-group,
.calendar-panel .calendar-title-group {
  gap: 12px !important;
}

.calendar-header--status-top .calendar-month-toggle,
.calendar-panel .calendar-month-toggle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-color: rgba(213,181,110,0.22) !important;
  margin-left: 4px !important;
}

.calendar-header--status-top .calendar-month-toggle svg,
.calendar-panel .calendar-month-toggle svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.65 !important;
}

.calendar-panel--expanded {
  padding: 18px 16px 18px !important;
}

.calendar-panel--expanded .calendar-header {
  position: relative !important;
  min-height: 58px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.calendar-panel--expanded .calendar-title-group {
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.calendar-panel--expanded .calendar-hidden-nav {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}

.calendar-panel--expanded .calendar-hidden-nav .cal-arrow {
  display: flex !important;
  pointer-events: auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  background: rgba(255,255,255,0.018) !important;
  border-color: rgba(226,220,255,0.10) !important;
}

.calendar-panel--expanded .calendar-weekdays {
  margin-bottom: 12px !important;
}

.calendar-panel--expanded .calendar-weekdays span {
  font-size: 13px !important;
  padding: 6px 0 !important;
  letter-spacing: 0.05em !important;
}

.calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) {
  row-gap: 9px !important;
  column-gap: 4px !important;
}

.calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) .cal-day {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) .cal-day.selected {
  min-height: 54px !important;
  border-radius: 16px !important;
  box-shadow: 0 0 18px rgba(215,184,112,0.20) !important;
}

.calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) .cal-day.has-completions::before {
  top: 4px !important;
  width: 6px !important;
  height: 6px !important;
}

@media (max-width: 980px) {
  .calendar-header--status-top .calendar-title-group,
  .calendar-panel .calendar-title-group {
    gap: 10px !important;
  }

  .calendar-header--status-top .calendar-month-toggle,
  .calendar-panel .calendar-month-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 9px !important;
    margin-left: 3px !important;
  }

  .calendar-header--status-top .calendar-month-toggle svg,
  .calendar-panel .calendar-month-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  .calendar-panel--expanded {
    padding: 16px 14px 16px !important;
  }

  .calendar-panel--expanded .calendar-header {
    min-height: 54px !important;
    margin-bottom: 10px !important;
  }

  .calendar-panel--expanded .calendar-hidden-nav .cal-arrow {
    width: 46px !important;
    height: 46px !important;
    font-size: 22px !important;
  }

  .calendar-panel--expanded .calendar-weekdays {
    margin-bottom: 10px !important;
  }

  .calendar-panel--expanded .calendar-weekdays span {
    font-size: 12px !important;
    padding: 5px 0 !important;
  }

  .calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) {
    row-gap: 8px !important;
    column-gap: 4px !important;
  }

  .calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) .cal-day {
    min-height: 42px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }

  .calendar-panel--expanded .calendar-grid:not(.calendar-grid--week) .cal-day.selected {
    min-height: 50px !important;
    border-radius: 15px !important;
  }
}


/* ===== v77: functional compact inline month arrows in expanded calendar ===== */
.calendar-title-group > .cal-arrow-inline {
  display: none !important;
}

.calendar-panel--expanded .calendar-hidden-nav {
  display: none !important;
}

.calendar-panel--expanded .calendar-header {
  min-height: 50px !important;
}

.calendar-panel--expanded .calendar-title-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 3 !important;
}

.calendar-panel--expanded .calendar-title-group > .cal-arrow-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 9px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  border: 1px solid rgba(213,181,110,0.22) !important;
  background: rgba(255,255,255,0.018) !important;
  color: rgba(240,214,152,0.92) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

.calendar-panel--expanded .calendar-title-group > .cal-arrow-inline:hover,
.calendar-panel--expanded .calendar-title-group > .cal-arrow-inline:active {
  border-color: rgba(213,181,110,0.42) !important;
  background: rgba(213,181,110,0.08) !important;
}

.calendar-panel--expanded .calendar-title-group .cal-month {
  margin: 0 !important;
  white-space: nowrap !important;
}

.calendar-panel--expanded .calendar-title-group .calendar-month-toggle {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  .calendar-panel--expanded .calendar-title-group {
    gap: 7px !important;
  }

  .calendar-panel--expanded .calendar-title-group > .cal-arrow-inline,
  .calendar-panel--expanded .calendar-title-group .calendar-month-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9px !important;
  }

  .calendar-panel--expanded .calendar-title-group > .cal-arrow-inline {
    font-size: 17px !important;
  }
}


/* ===== v78: strict calendar arrow order — < Month Calendar > ===== */
.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 28px max-content 28px 28px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 4 !important;
}

.calendar-panel--expanded #prevMonth.cal-arrow-inline {
  grid-area: prev !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
  order: 0 !important;
}

.calendar-panel--expanded #calMonth.cal-month {
  grid-area: month !important;
  display: inline-block !important;
  margin: 0 !important;
  order: 1 !important;
  white-space: nowrap !important;
}

.calendar-panel--expanded #calendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  order: 2 !important;
}

.calendar-panel--expanded #nextMonth.cal-arrow-inline {
  grid-area: next !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
  order: 3 !important;
}

/* Keep navigation arrows hidden while the compact one-week calendar is collapsed */
.calendar-panel:not(.calendar-panel--expanded) #prevMonth.cal-arrow-inline,
.calendar-panel:not(.calendar-panel--expanded) #nextMonth.cal-arrow-inline {
  display: none !important;
}

@media (max-width: 980px) {
  .calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 28px max-content 28px 28px !important;
    column-gap: 7px !important;
  }
}


/* ===== v79: Diary layout and warm ivory light theme ===== */

/* Expanded calendar arrows: more comfortable tap gap from month text */
.calendar-panel--expanded .calendar-title-group {
  column-gap: 12px !important;
}

/* Diary */
.journal-content {
  width: min(980px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0 110px;
}

.journal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journal-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text);
}

.journal-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

.journal-calendar-panel {
  width: 100%;
}

.journal-editor-card,
.journal-entries-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015));
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.10);
}

.journal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.journal-card-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.journal-card-head p {
  color: var(--text-muted);
  font-size: 13px;
}

.journal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journal-field > span,
.journal-choice-label,
.journal-attachment-head > span,
.journal-font-select-wrap > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journal-input,
.journal-select,
.journal-textarea {
  width: 100%;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.035);
  color: var(--text);
  border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  transition: var(--transition);
}

.journal-input,
.journal-select {
  min-height: 50px;
  padding: 0 14px;
  font-size: 15px;
}

.journal-textarea {
  min-height: 170px;
  padding: 14px;
  resize: vertical;
  line-height: 1.55;
}

.journal-input:focus,
.journal-select:focus,
.journal-textarea:focus {
  outline: none;
  border-color: rgba(213,181,110,0.55);
  box-shadow: 0 0 0 3px rgba(213,181,110,0.12);
}

.journal-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.journal-font-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journal-format-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-tool-btn,
.journal-secondary-btn,
.journal-primary-btn,
.journal-attach-btn,
.journal-entry-actions button {
  border: 1px solid var(--border2);
  border-radius: 14px;
  min-height: 44px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.journal-tool-btn,
.journal-secondary-btn,
.journal-entry-actions button {
  background: rgba(255,255,255,0.035);
  color: var(--text-muted);
}

.journal-tool-btn {
  width: 44px;
  padding: 0;
  font-size: 17px;
}

.journal-tool-btn.active,
.journal-tool-btn:hover,
.journal-secondary-btn:hover,
.journal-entry-actions button:hover {
  color: var(--gold);
  border-color: rgba(213,181,110,0.48);
  background: rgba(213,181,110,0.10);
}

.journal-primary-btn,
.journal-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f0d48f, #d5b56e);
  color: #1f1a13;
  border-color: rgba(245,220,159,0.66);
}

.journal-primary-btn:hover,
.journal-attach-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.journal-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.journal-choice-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-mood-btn,
.journal-color-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.035);
  cursor: pointer;
  transition: var(--transition);
}

.journal-mood-btn {
  font-size: 21px;
}

.journal-mood-btn.active,
.journal-color-btn.active {
  border-color: rgba(213,181,110,0.64);
  box-shadow: 0 0 0 3px rgba(213,181,110,0.14);
  background: rgba(213,181,110,0.12);
}

.journal-color-btn {
  position: relative;
}

.journal-color-btn::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: var(--journal-color);
}

.journal-attachment-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(213,181,110,0.34);
  border-radius: 18px;
  background: rgba(213,181,110,0.05);
}

.journal-attachment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#journalAttachmentInput {
  display: none;
}

.journal-pending-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.035);
  color: var(--text-muted);
  font-size: 12px;
}

.journal-file-chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.journal-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.journal-entries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journal-empty-state {
  border: 1px dashed var(--border2);
  border-radius: 18px;
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
  background: rgba(255,255,255,0.022);
}

.journal-entry-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 15px;
  background: rgba(255,255,255,0.028);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.journal-entry-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--entry-color);
}

.journal-entry-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.journal-entry-mood {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
  font-size: 22px;
}

.journal-entry-main {
  min-width: 0;
  flex: 1;
}

.journal-entry-main h4 {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.journal-entry-copy {
  color: var(--text-muted);
  white-space: pre-wrap;
  line-height: 1.55;
}

.journal-entry-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.journal-entry-file {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 180px;
  color: var(--text-muted);
  font-size: 12px;
}

.journal-entry-file a {
  color: var(--gold);
  text-decoration: none;
}

.journal-entry-image {
  width: 120px;
  height: 88px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  display: block;
}

.journal-entry-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.journal-entry-actions button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

/* Warm Ivory Premium light theme — visual option 1 */
body.light-theme {
  --bg: #f6f1e8 !important;
  --surface: #fcf8f1 !important;
  --surface2: #f4ecdf !important;
  --surface3: #eadcc6 !important;
  --border: rgba(117, 91, 49, 0.18) !important;
  --border2: rgba(117, 91, 49, 0.28) !important;
  --text: #2b2721 !important;
  --text-muted: #6e665c !important;
  --text-dim: #9a8f80 !important;
  --accent: #c79b42 !important;
  --accent-glow: rgba(199,155,66,0.15) !important;
  --green: #63a77f !important;
  --gold: #c79b42 !important;
}

body.light-theme {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.80), rgba(246,241,232,0.92) 36%, #f6f1e8 100%) !important;
}

body.light-theme .habits-panel,
body.light-theme .calendar-panel,
body.light-theme .dash-card,
body.light-theme .top-quote-card,
body.light-theme .quote-inline-row .top-quote-card--text-only,
body.light-theme .period-section,
body.light-theme .detail-habit,
body.light-theme .profile-card,
body.light-theme .stats-content,
body.light-theme .journal-editor-card,
body.light-theme .journal-entries-card,
body.light-theme .journal-entry-card {
  background: linear-gradient(180deg, rgba(255,253,248,0.98), rgba(248,241,229,0.96)) !important;
  border-color: rgba(117,91,49,0.20) !important;
  box-shadow: 0 14px 36px rgba(89,68,36,0.08) !important;
}

body.light-theme .calendar-panel,
body.light-theme .habits-panel {
  outline: 1px solid rgba(117,91,49,0.08);
}

body.light-theme .period-section,
body.light-theme .detail-habit,
body.light-theme .journal-input,
body.light-theme .journal-select,
body.light-theme .journal-textarea,
body.light-theme .journal-empty-state,
body.light-theme .journal-file-chip,
body.light-theme .journal-entry-mood {
  background: rgba(255,253,248,0.92) !important;
  border-color: rgba(117,91,49,0.20) !important;
}

body.light-theme .nav-item.active,
body.light-theme .today-chip,
body.light-theme .calendar-month-toggle.is-expanded,
body.light-theme .journal-tool-btn.active,
body.light-theme .journal-mood-btn.active,
body.light-theme .journal-color-btn.active {
  background: rgba(199,155,66,0.14) !important;
  border-color: rgba(199,155,66,0.46) !important;
  color: #7d5f24 !important;
}

body.light-theme .add-btn,
body.light-theme .journal-primary-btn,
body.light-theme .journal-attach-btn,
body.light-theme .cal-day.selected {
  background: linear-gradient(180deg, #efd38d, #d1a84d) !important;
  border-color: rgba(171,124,35,0.42) !important;
  color: #251d11 !important;
}

body.light-theme .detail-habit-done.done,
body.light-theme .habit-check.done,
body.light-theme .journal-entry-card {
  color: var(--text) !important;
}

body.light-theme .sidebar-nav,
body.light-theme .install-banner,
body.light-theme .modal,
body.light-theme .timer-popup {
  background: rgba(252,248,241,0.98) !important;
  border-color: rgba(117,91,49,0.20) !important;
}

body.light-theme .journal-attachment-box {
  background: rgba(199,155,66,0.08) !important;
  border-color: rgba(199,155,66,0.34) !important;
}

body.light-theme .journal-entry-card::before {
  opacity: 0.92;
}

body.light-theme .journal-entry-copy,
body.light-theme .journal-subtitle,
body.light-theme .journal-card-head p,
body.light-theme .journal-file-chip {
  color: #6e665c !important;
}

@media (max-width: 980px) {
  .journal-content {
    padding: 0 0 104px;
    gap: 14px;
  }

  .journal-editor-card,
  .journal-entries-card {
    padding: 14px;
    border-radius: 24px;
    gap: 14px;
  }

  .journal-toolbar,
  .journal-choice-grid {
    grid-template-columns: 1fr;
  }

  .journal-attachment-head,
  .journal-editor-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .journal-primary-btn,
  .journal-secondary-btn,
  .journal-attach-btn {
    width: 100%;
  }

  .journal-title {
    font-size: 34px;
  }

  .journal-entry-card {
    padding: 14px;
  }
}


/* Diary calendar uses the same strict arrow order as the habit calendar */
.journal-calendar-panel.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 28px max-content 28px 28px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 12px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.journal-calendar-panel.calendar-panel--expanded #journalPrevMonth.cal-arrow-inline {
  grid-area: prev !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}

.journal-calendar-panel.calendar-panel--expanded #journalCalMonth.cal-month {
  grid-area: month !important;
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.journal-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

.journal-calendar-panel.calendar-panel--expanded #journalNextMonth.cal-arrow-inline {
  grid-area: next !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}

.journal-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.journal-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline {
  display: none !important;
}

@media (max-width: 980px) {
  .journal-calendar-panel.calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 28px max-content 28px 28px !important;
    column-gap: 11px !important;
  }
}


/* ===== v80: diary mockup UX, minimal layout, tags/search ===== */
#view-algorithms.active {
  display: block !important;
  overflow: hidden !important;
}

.diary-app {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 28px 132px;
  background: var(--bg);
  color: var(--text);
  scrollbar-width: thin;
}

.diary-screen {
  display: none;
  width: min(900px, 100%);
  margin: 0 auto;
}

.diary-screen.active {
  display: block;
}

.diary-icon-btn,
.diary-day-cell,
.diary-floating-add,
.diary-date-pill,
.diary-editor-date-pill,
.diary-summary-color,
.diary-toolbar-btn,
.diary-color-toolbar,
.diary-mood-btn,
.diary-color-btn,
.diary-entry-menu-btn,
.diary-entry-menu button,
.diary-entry-tag,
.diary-filter-chip,
.diary-editor-tag {
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer;
}

.diary-list-topbar {
  display: grid;
  grid-template-columns: 44px 32px minmax(186px, 318px) 32px 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  margin: 0 0 18px;
}

.diary-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  font-size: 38px;
  line-height: 1;
}

.diary-back-btn,
.diary-editor-back {
  justify-self: start;
}

.diary-nav-btn {
  width: 32px;
  height: 44px;
  font-size: 40px;
  color: var(--text);
}

.diary-add-top {
  justify-self: end;
  font-size: 46px;
  font-weight: 300;
}

.diary-date-pill,
.diary-editor-date-pill {
  width: 100%;
  min-height: 64px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 26px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  white-space: nowrap;
}

.diary-calendar-glyph {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid currentColor;
  font-size: 22px;
  line-height: 1;
  transform: scale(.88);
}

.diary-calendar-glyph::first-letter {
  opacity: 0;
}

.diary-calendar-glyph {
  font-size: 0;
  position: relative;
}

.diary-calendar-glyph::before {
  content: '';
  width: 18px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 7px;
}

.diary-calendar-glyph::after {
  content: '';
  width: 16px;
  height: 2px;
  background: currentColor;
  position: absolute;
  left: 8px;
  top: 13px;
  box-shadow: 3px -6px 0 -0.3px currentColor, 11px -6px 0 -0.3px currentColor;
}

.diary-calendar-shell {
  padding: 14px 0 0;
}

.diary-weekdays,
.diary-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  align-items: center;
  justify-items: center;
}

.diary-weekdays {
  height: 38px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  text-transform: lowercase;
}

.diary-week-grid {
  min-height: 94px;
}

.diary-calendar-grid--month {
  row-gap: 18px;
  padding: 2px 0 10px;
}

.diary-day-cell {
  min-width: 66px;
  min-height: 88px;
  padding: 12px 4px 8px;
  color: var(--text);
  background: transparent;
  border-radius: 26px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 32px;
  line-height: 1;
  position: relative;
  transition: .18s ease;
}

.diary-calendar-grid--month .diary-day-cell {
  min-width: 52px;
  min-height: 58px;
  padding: 8px 4px 6px;
  gap: 8px;
  font-size: 22px;
}

.diary-day-cell.other-month {
  opacity: .35;
}

.diary-day-cell.selected {
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px var(--border), 0 10px 24px rgba(0,0,0,0.08);
}

.diary-day-cell.selected .diary-day-date {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--entry-dot, #d9b260);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

.diary-calendar-grid--month .diary-day-cell.selected .diary-day-date {
  width: 42px;
  height: 42px;
  font-size: 19px;
}

.diary-day-cell .diary-day-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.diary-day-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--entry-dot, #cfcfcf);
}

.diary-day-dot.is-empty {
  opacity: .75;
}

.diary-day-cell:not(.selected) .diary-day-dot.is-empty {
  opacity: .48;
}

.diary-day-summary {
  min-height: 102px;
  margin: 22px 0 28px;
  padding: 0 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 62px 176px 1px 1fr 52px;
  align-items: center;
  gap: 18px;
}

.diary-day-summary__mood {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid #d9b260;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--text);
}

.diary-day-summary__date {
  font-size: 21px;
  color: var(--text);
  white-space: nowrap;
}

.diary-day-summary__divider,
.diary-meta-divider {
  width: 1px;
  height: 52px;
  background: var(--border);
}

.diary-day-summary__dots {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
}

.diary-summary-color {
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 16px;
  cursor: default;
}

.diary-summary-color i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--dot);
}

.diary-tag-search-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 26px;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
}

.diary-tag-filter {
  margin: -14px 0 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.diary-tag-filter[hidden] {
  display: none !important;
}

.diary-tag-filter__row {
  display: grid;
  grid-template-columns: 26px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.diary-tag-filter__prefix {
  font-size: 28px;
  color: var(--text-muted);
}

.diary-tag-filter__input {
  height: 44px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-family: inherit;
}

.diary-tag-filter__input:focus {
  outline: none;
}

.diary-tag-filter-close {
  width: 36px;
  height: 36px;
  font-size: 28px;
  color: var(--text-muted);
}

.diary-tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.diary-filter-chip,
.diary-editor-tag,
.diary-entry-tag {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.diary-filter-chip.active,
.diary-editor-tag,
.diary-entry-tag {
  border-color: rgba(217,178,96,0.52);
  color: var(--text);
}

.diary-entries-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 120px;
}

.diary-empty-note {
  min-height: 110px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.diary-entry-card {
  min-height: 214px;
  padding: 24px 24px 20px;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) 118px;
  gap: 18px;
  position: relative;
}

.diary-entry-mood {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid var(--entry-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  align-self: start;
}

.diary-entry-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.diary-entry-title-row {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) 28px;
  gap: 12px;
  align-items: center;
}

.diary-entry-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--entry-accent);
}

.diary-entry-title-row h3 {
  margin: 0;
  min-width: 0;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diary-entry-menu-btn {
  width: 28px;
  height: 38px;
  background: transparent;
  color: var(--text-muted);
  font-size: 34px;
  line-height: .6;
  padding: 0;
}

.diary-entry-excerpt {
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: 21px;
  line-height: 1.38;
  max-width: 100%;
}

.diary-entry-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted);
  font-size: 16px;
}

.diary-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diary-entry-date {
  color: var(--text-muted);
}

.diary-entry-preview {
  width: 118px;
  height: 118px;
  border-radius: 24px;
  align-self: center;
  justify-self: end;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.diary-entry-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-doc-preview {
  font-size: 44px;
  color: var(--text-muted);
}

.diary-entry-menu {
  position: absolute;
  right: 22px;
  top: 64px;
  z-index: 5;
  width: 160px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diary-entry-menu[hidden] {
  display: none !important;
}

.diary-entry-menu button {
  width: 100%;
  min-height: 38px;
  text-align: left;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.diary-entry-menu button:hover {
  background: rgba(255,255,255,0.08);
}

.diary-floating-add {
  position: fixed;
  z-index: 20;
  right: max(34px, calc((100vw - 900px) / 2 + 34px));
  bottom: 112px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: linear-gradient(180deg, #efcf87, #d9b260);
  color: #fff;
  font-size: 68px;
  line-height: 1;
  box-shadow: 0 18px 40px rgba(177,128,35,0.22);
}

.diary-screen--editor {
  min-height: 100%;
  padding-bottom: 24px;
}

.diary-editor-topbar {
  display: grid;
  grid-template-columns: 52px minmax(220px, 354px) 52px 52px;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  margin-bottom: 30px;
}

.diary-editor-back,
.diary-editor-save,
.diary-editor-menu {
  width: 52px;
  height: 52px;
  font-size: 42px;
}

.diary-editor-save {
  font-size: 42px;
}

.diary-editor-menu {
  font-size: 42px;
}

.diary-editor-date-pill {
  min-height: 72px;
  font-size: 26px;
  gap: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

.diary-editor-date-caret {
  font-size: 34px;
  transform: translateY(-2px);
}

.diary-editor-canvas {
  min-height: 610px;
  padding: 4px 8px 0;
}

.diary-title-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 66px;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.diary-title-input {
  width: 100%;
  min-height: 62px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 42px;
  font-weight: 400;
}

.diary-title-input::placeholder {
  color: var(--text-muted);
}

.diary-title-input:focus,
.diary-body-input:focus,
.diary-tags-input-wrap input:focus {
  outline: none;
}

.diary-aa-inline {
  width: 66px;
  height: 56px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 34px;
  cursor: pointer;
}

.diary-editor-line {
  height: 1px;
  background: var(--border);
  margin-bottom: 18px;
}

.diary-body-input {
  width: 100%;
  min-height: 480px;
  padding: 18px 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 19px;
  line-height: 1.52;
  resize: vertical;
}

.diary-body-input::placeholder {
  color: var(--text-muted);
}

.diary-editor-dock {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0 8px;
}

.diary-format-toolbar {
  min-height: 104px;
  padding: 0 28px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.diary-toolbar-btn,
.diary-attach-label {
  width: 52px;
  height: 52px;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 38px;
  padding: 0;
}

.diary-toolbar-btn.active {
  background: rgba(217,178,96,0.14);
  color: #b68426;
}

.diary-toolbar-divider {
  width: 1px;
  height: 56px;
  background: var(--border);
}

.diary-color-toolbar {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid rgba(217,178,96,0.34);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.diary-color-toolbar span {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #d9b260;
  display: block;
}

.diary-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 19px;
  padding: 0 2px;
}

.diary-attachments-all {
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

#journalAttachmentInput {
  display: none;
}

.diary-attachments-row {
  min-height: 142px;
  display: flex;
  gap: 18px;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 2px;
}

.diary-attachment-add-tile,
.diary-attachment-tile {
  flex: 0 0 auto;
  width: 142px;
  height: 142px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}

.diary-attachment-add-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--text-muted);
  font-size: 46px;
  cursor: pointer;
}

.diary-attachment-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 10px;
}

.diary-attachment-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-attachment-tile button {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.diary-attachment-doc {
  font-size: 40px;
}

.diary-tags-block {
  padding: 18px 0 6px;
  border-top: 1px solid var(--border);
}

.diary-tags-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 10px;
}

.diary-tags-hint {
  font-size: 14px;
}

.diary-tags-input-wrap {
  height: 54px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 22px;
}

.diary-tags-input-wrap input {
  flex: 1;
  height: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
}

.diary-editor-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.diary-editor-tag {
  background: rgba(255,255,255,0.10);
  font-size: 14px;
}

.diary-editor-tag span {
  margin-left: 6px;
}

.diary-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.diary-meta-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.diary-meta-label {
  color: var(--text-muted);
  font-size: 18px;
}

.diary-mood-picker,
.diary-color-picker {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.diary-mood-btn,
.diary-color-btn {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 31px;
  position: relative;
}

.diary-mood-btn.active,
.diary-color-btn.active {
  border-color: #d9b260;
  box-shadow: inset 0 0 0 4px rgba(217,178,96,0.14);
}

.diary-color-btn::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: var(--journal-color);
}

.diary-meta-divider {
  align-self: center;
  height: 100px;
}

body.light-theme .diary-app {
  --diary-bg: #fbfaf8;
  --diary-card: rgba(255,255,255,0.72);
  --diary-line: rgba(48,45,41,0.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.96), rgba(252,250,247,0.96) 48%, rgba(248,245,238,0.98) 100%) !important;
  color: #252321 !important;
}

body.light-theme .diary-icon-btn,
body.light-theme .diary-date-pill,
body.light-theme .diary-editor-date-pill,
body.light-theme .diary-day-cell,
body.light-theme .diary-title-input,
body.light-theme .diary-body-input,
body.light-theme .diary-tag-filter__input,
body.light-theme .diary-tags-input-wrap input {
  color: #252321 !important;
}

body.light-theme .diary-date-pill,
body.light-theme .diary-editor-date-pill,
body.light-theme .diary-day-summary,
body.light-theme .diary-entry-card,
body.light-theme .diary-empty-note,
body.light-theme .diary-format-toolbar,
body.light-theme .diary-attachment-add-tile,
body.light-theme .diary-attachment-tile,
body.light-theme .diary-tags-input-wrap,
body.light-theme .diary-tag-filter,
body.light-theme .diary-tag-search-btn {
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(47,43,39,0.11) !important;
  box-shadow: 0 14px 34px rgba(64,56,47,0.06) !important;
}

body.light-theme .diary-weekdays,
body.light-theme .diary-entry-excerpt,
body.light-theme .diary-entry-bottom,
body.light-theme .diary-attachments-head,
body.light-theme .diary-attachments-all,
body.light-theme .diary-meta-label,
body.light-theme .diary-tags-head,
body.light-theme .diary-title-input::placeholder,
body.light-theme .diary-body-input::placeholder,
body.light-theme .diary-tag-filter__prefix,
body.light-theme .diary-tag-filter__input::placeholder,
body.light-theme .diary-tags-input-wrap,
body.light-theme .diary-tags-input-wrap input::placeholder,
body.light-theme .diary-attachment-tile,
body.light-theme .diary-summary-color,
body.light-theme .diary-empty-note {
  color: #8f8c88 !important;
}

body.light-theme .diary-editor-line,
body.light-theme .diary-toolbar-divider,
body.light-theme .diary-meta-divider,
body.light-theme .diary-tags-block {
  border-color: rgba(47,43,39,0.10) !important;
  background-color: rgba(47,43,39,0.10) !important;
}

body.light-theme .diary-day-cell.selected {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(47,43,39,0.10);
}

body.light-theme .diary-floating-add {
  background: linear-gradient(180deg, #efd28b, #d9b260) !important;
  color: #fff !important;
}

body.light-theme .diary-mood-btn,
body.light-theme .diary-color-btn,
body.light-theme .diary-filter-chip,
body.light-theme .diary-editor-tag,
body.light-theme .diary-entry-tag {
  background: rgba(255,255,255,0.62) !important;
  border-color: rgba(47,43,39,0.16) !important;
}

body.light-theme .diary-entry-menu {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(47,43,39,0.12) !important;
}

body.light-theme .diary-entry-menu button {
  color: #252321 !important;
}

@media (max-width: 980px) {
  .diary-app {
    padding: 14px 16px 122px;
  }

  .diary-screen {
    width: 100%;
  }

  .diary-list-topbar {
    grid-template-columns: 34px 24px minmax(160px, 1fr) 24px 34px;
    gap: 7px;
    min-height: 58px;
    margin-bottom: 12px;
  }

  .diary-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 29px;
  }

  .diary-nav-btn {
    width: 24px;
    height: 34px;
    font-size: 30px;
  }

  .diary-add-top {
    font-size: 36px;
  }

  .diary-date-pill,
  .diary-editor-date-pill {
    min-height: 48px;
    padding: 0 14px;
    gap: 10px;
    font-size: 18px;
  }

  .diary-calendar-glyph {
    width: 28px;
    height: 28px;
    transform: scale(.78);
  }

  .diary-weekdays {
    height: 28px;
    font-size: 12px;
  }

  .diary-week-grid {
    min-height: 68px;
  }

  .diary-day-cell {
    min-width: 42px;
    min-height: 68px;
    gap: 10px;
    font-size: 22px;
    border-radius: 18px;
  }

  .diary-day-cell.selected .diary-day-date {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .diary-day-dot {
    width: 8px;
    height: 8px;
  }

  .diary-day-summary {
    min-height: 76px;
    margin: 14px 0 18px;
    padding: 0 12px;
    border-radius: 18px;
    grid-template-columns: 42px minmax(92px, 1fr) 1px 1fr 38px;
    gap: 9px;
  }

  .diary-day-summary__mood {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .diary-day-summary__date {
    font-size: 14px;
  }

  .diary-day-summary__divider {
    height: 38px;
  }

  .diary-day-summary__dots {
    gap: 6px;
  }

  .diary-summary-color {
    gap: 4px;
    font-size: 11px;
  }

  .diary-summary-color i {
    width: 12px;
    height: 12px;
  }

  .diary-tag-search-btn {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .diary-tag-filter {
    margin: -6px 0 14px;
    padding: 12px;
    border-radius: 16px;
  }

  .diary-entry-card {
    min-height: 150px;
    padding: 14px 12px 12px;
    border-radius: 22px;
    grid-template-columns: 44px minmax(0,1fr) 72px;
    gap: 10px;
  }

  .diary-entry-mood {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .diary-entry-title-row {
    grid-template-columns: 11px minmax(0,1fr) 20px;
    gap: 7px;
  }

  .diary-entry-color-dot {
    width: 10px;
    height: 10px;
  }

  .diary-entry-title-row h3 {
    font-size: 18px;
  }

  .diary-entry-menu-btn {
    width: 20px;
    height: 28px;
    font-size: 25px;
  }

  .diary-entry-excerpt {
    margin: 8px 0 6px;
    font-size: 14px;
    line-height: 1.36;
  }

  .diary-entry-bottom {
    gap: 6px;
    font-size: 11px;
  }

  .diary-entry-preview {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  .diary-doc-preview {
    font-size: 28px;
  }

  .diary-floating-add {
    right: 24px;
    bottom: 108px;
    width: 82px;
    height: 82px;
    font-size: 48px;
  }

  .diary-editor-topbar {
    grid-template-columns: 34px minmax(186px, 1fr) 34px 34px;
    gap: 8px;
    min-height: 62px;
    margin-bottom: 18px;
  }

  .diary-editor-back,
  .diary-editor-save,
  .diary-editor-menu {
    width: 34px;
    height: 34px;
    font-size: 29px;
  }

  .diary-editor-canvas {
    min-height: 360px;
    padding: 0 4px;
  }

  .diary-title-row {
    grid-template-columns: minmax(0,1fr) 42px;
    gap: 8px;
    margin-bottom: 10px;
  }

  .diary-title-input {
    min-height: 46px;
    font-size: 30px;
  }

  .diary-aa-inline {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .diary-body-input {
    min-height: 290px;
    padding: 12px 3px;
    font-size: 18px;
  }

  .diary-editor-dock {
    gap: 14px;
    padding: 0 4px;
  }

  .diary-format-toolbar {
    min-height: 74px;
    padding: 0 12px;
    border-radius: 16px;
    gap: 7px;
  }

  .diary-toolbar-btn,
  .diary-attach-label {
    width: 34px;
    height: 34px;
    font-size: 25px;
  }

  .diary-toolbar-divider {
    height: 34px;
  }

  .diary-color-toolbar {
    width: 36px;
    height: 36px;
  }

  .diary-color-toolbar span {
    width: 25px;
    height: 25px;
  }

  .diary-attachments-head {
    font-size: 14px;
  }

  .diary-attachments-all {
    font-size: 14px;
  }

  .diary-attachments-row {
    min-height: 92px;
    gap: 10px;
  }

  .diary-attachment-add-tile,
  .diary-attachment-tile {
    width: 92px;
    height: 92px;
    border-radius: 14px;
    font-size: 12px;
  }

  .diary-attachment-add-tile {
    font-size: 32px;
  }

  .diary-attachment-doc {
    font-size: 28px;
  }

  .diary-tags-block {
    padding-top: 12px;
  }

  .diary-tags-head {
    font-size: 14px;
  }

  .diary-tags-hint {
    font-size: 11px;
  }

  .diary-tags-input-wrap {
    height: 44px;
    font-size: 18px;
    padding: 0 12px;
  }

  .diary-tags-input-wrap input {
    font-size: 14px;
  }

  .diary-meta-grid {
    grid-template-columns: 1fr 1px 1fr;
    gap: 14px;
    padding-top: 12px;
  }

  .diary-meta-group {
    gap: 10px;
  }

  .diary-meta-label {
    font-size: 14px;
  }

  .diary-mood-picker,
  .diary-color-picker {
    gap: 8px;
  }

  .diary-mood-btn,
  .diary-color-btn {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .diary-color-btn::before {
    inset: 8px;
  }

  .diary-meta-divider {
    height: 74px;
  }
}


/* ===== v81: requested corrections — white light blocks, diary calendar parity, compact editor ===== */

/* 1. Light theme: white cards / blocks across the app */
body.light-theme {
  --bg: #f7f3eb !important;
  --surface: #ffffff !important;
  --surface2: #ffffff !important;
  --surface3: #f4efe5 !important;
  --border: rgba(109, 91, 59, 0.18) !important;
  --border2: rgba(109, 91, 59, 0.26) !important;
  --text: #2b2721 !important;
  --text-muted: #6d655a !important;
  --text-dim: #9a9185 !important;
}

body.light-theme .habits-panel,
body.light-theme .calendar-panel,
body.light-theme .daily-dashboard .dash-card,
body.light-theme .dash-card,
body.light-theme .top-quote-card,
body.light-theme .top-quote-card--text-only,
body.light-theme .period-section,
body.light-theme .period-row,
body.light-theme .detail-habit,
body.light-theme .day-detail-card,
body.light-theme .profile-card,
body.light-theme .stats-content,
body.light-theme .stats-card,
body.light-theme .diary-day-summary,
body.light-theme .diary-tag-filter,
body.light-theme .diary-empty,
body.light-theme .diary-entry-card,
body.light-theme .diary-editor-date-pill,
body.light-theme .diary-format-toolbar,
body.light-theme .diary-attachment-tile,
body.light-theme .diary-attachment-add-tile,
body.light-theme .diary-tags-input-wrap,
body.light-theme .diary-app .calendar-panel,
body.light-theme .journal-entry-card {
  background: #ffffff !important;
  border-color: rgba(109, 91, 59, 0.18) !important;
  box-shadow: 0 10px 26px rgba(90, 72, 40, 0.07) !important;
}

body.light-theme .sidebar-nav,
body.light-theme .mobile-bottom-nav,
body.light-theme .add-btn,
body.light-theme .day-detail-progress-slot,
body.light-theme .habit-emoji,
body.light-theme .journal-entry-mood,
body.light-theme .diary-entry-mood,
body.light-theme .diary-mood-btn,
body.light-theme .diary-color-btn,
body.light-theme .diary-icon-btn,
body.light-theme .cal-arrow-inline,
body.light-theme .calendar-month-toggle {
  background-color: #ffffff !important;
}

body.light-theme .diary-app {
  background: transparent !important;
}

body.light-theme .diary-editor-canvas {
  background: #ffffff !important;
  border-radius: 24px !important;
}

body.light-theme .diary-title-input,
body.light-theme .diary-body-input {
  color: #2b2721 !important;
}

body.light-theme .diary-title-input::placeholder,
body.light-theme .diary-body-input::placeholder {
  color: #9a9185 !important;
}

/* 2. Diary calendar: same calendar block language/style as Habits */
.diary-calendar-panel.calendar-panel {
  width: 100% !important;
  margin: 0 0 18px !important;
}

.diary-calendar-panel .calendar-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.diary-calendar-panel #journalCalendarGrid.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.diary-calendar-panel .cal-day {
  cursor: pointer !important;
}

.diary-calendar-panel.calendar-panel--expanded .calendar-header {
  min-height: 54px !important;
}

.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 32px max-content 32px 32px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 18px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.diary-calendar-panel.calendar-panel--expanded #journalPrevMonth.cal-arrow-inline {
  grid-area: prev !important;
  display: inline-flex !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalMonth.cal-month {
  grid-area: month !important;
  display: inline-block !important;
  margin: 0 !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalNextMonth.cal-arrow-inline {
  grid-area: next !important;
  display: inline-flex !important;
}

/* 4. Main calendar arrows: more distance from month text for easier tapping */
.calendar-panel--expanded .calendar-title-group {
  grid-template-columns: 32px max-content 32px 32px !important;
  column-gap: 18px !important;
}

.calendar-panel--expanded .calendar-title-group > .cal-arrow-inline,
.calendar-panel--expanded .calendar-title-group .calendar-month-toggle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* 2. Remove additional diary add buttons if stale DOM/CSS remains */
#journalOpenEditor,
#journalFloatingAddEntry,
.diary-floating-add,
.diary-add-top {
  display: none !important;
}

/* 3. Diary editor: 20% smaller typography and more compact spacing */
.diary-editor-topbar {
  min-height: 52px !important;
  margin-bottom: 12px !important;
  gap: 8px !important;
}

.diary-editor-canvas {
  min-height: 304px !important;
  padding: 0 2px !important;
}

.diary-title-row {
  grid-template-columns: minmax(0,1fr) 36px !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.diary-title-input {
  min-height: 40px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.diary-aa-inline {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
}

.diary-body-input {
  min-height: 232px !important;
  padding: 10px 3px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}

.diary-editor-dock {
  gap: 10px !important;
  padding: 0 2px !important;
}

.diary-format-toolbar {
  min-height: 58px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  gap: 6px !important;
}

.diary-toolbar-btn,
.diary-attach-label {
  width: 30px !important;
  height: 30px !important;
  font-size: 20px !important;
}

.diary-toolbar-divider {
  height: 28px !important;
}

.diary-color-toolbar {
  width: 32px !important;
  height: 32px !important;
}

.diary-color-toolbar span {
  width: 22px !important;
  height: 22px !important;
}

.diary-attachments-row {
  min-height: 76px !important;
  gap: 8px !important;
}

.diary-attachment-add-tile,
.diary-attachment-tile {
  width: 76px !important;
  height: 76px !important;
  border-radius: 13px !important;
  font-size: 11px !important;
}

.diary-attachment-add-tile {
  font-size: 26px !important;
}

.diary-attachment-doc {
  font-size: 24px !important;
}

.diary-tags-block {
  padding-top: 8px !important;
}

.diary-meta-grid {
  gap: 10px !important;
}

@media (max-width: 980px) {
  .calendar-panel--expanded .calendar-title-group,
  .diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 30px max-content 30px 30px !important;
    column-gap: 16px !important;
  }

  .calendar-panel--expanded .calendar-title-group > .cal-arrow-inline,
  .calendar-panel--expanded .calendar-title-group .calendar-month-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}


/* v81 CTA preservation: plus button remains gold in light theme */
body.light-theme .add-btn,
body.light-theme #openModal {
  background: linear-gradient(180deg, #efd38d, #d1a84d) !important;
  border-color: rgba(171,124,35,0.42) !important;
  color: #251d11 !important;
}


/* ===== v82: diary editor cleanup, compact metadata strip, premium nav icons ===== */

/* 1. Remove the dated pill row from editor; keep only compact utility actions. */
.diary-editor-topbar--compact {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-height: 42px !important;
  margin-bottom: 10px !important;
  padding: 0 4px !important;
}
.diary-editor-topbar--compact .diary-editor-topbar-spacer {
  min-width: 0 !important;
}
.diary-editor-date-pill,
#journalEditorDatePill {
  display: none !important;
}

/* 2. Attachments + tags + mood + color in one compact action row. */
.diary-editor-meta-strip {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 2px !important;
}
.diary-inline-meta-actions {
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.diary-meta-pill {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.diary-meta-pill svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.diary-meta-pill:hover,
.diary-meta-pill:active {
  border-color: rgba(213,181,110,0.58) !important;
  background: rgba(213,181,110,0.11) !important;
  color: var(--gold) !important;
}

/* 3. Wider emotion spectrum, still compact. */
.diary-mood-picker--expanded {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  max-width: 100% !important;
}
.diary-mood-picker--expanded .diary-mood-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  font-size: 20px !important;
}

/* 4. Premium bottom navigation icons: line-based, compact and legible. */
.sidebar-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 7px 3px !important;
}
.sidebar-nav .nav-item .nav-icon {
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  line-height: 1 !important;
}
.sidebar-nav .nav-item .nav-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.sidebar-nav .nav-item .nav-icon--stats svg path {
  fill: none !important;
  stroke: currentColor !important;
}
.sidebar-nav .nav-item span:last-child {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 9px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
}

/* Light theme: maintain clean white chips and darker premium icons. */
body.light-theme .diary-meta-pill {
  background: #ffffff !important;
  border-color: rgba(109,91,59,0.22) !important;
  color: #2b2721 !important;
}
body.light-theme .diary-meta-pill:hover,
body.light-theme .diary-meta-pill:active {
  background: rgba(199,155,66,0.10) !important;
  border-color: rgba(199,155,66,0.48) !important;
  color: #7d5f24 !important;
}
body.light-theme .sidebar-nav .nav-item .nav-icon {
  color: inherit !important;
}

/* Narrow screens */
@media (max-width: 980px) {
  .diary-editor-topbar--compact {
    grid-template-columns: 32px minmax(0, 1fr) 32px 32px !important;
    min-height: 40px !important;
    column-gap: 7px !important;
  }
  .diary-editor-meta-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .diary-inline-meta-actions {
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .diary-meta-pill {
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }
  .diary-mood-picker--expanded .diary-mood-btn {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    font-size: 18px !important;
  }
  .sidebar-nav .nav-item {
    gap: 2px !important;
    padding: 6px 2px !important;
  }
  .sidebar-nav .nav-item .nav-icon,
  .sidebar-nav .nav-item .nav-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
  .sidebar-nav .nav-item span:last-child {
    font-size: 8.2px !important;
  }
}


/* ===== v83: editor title actions, popup-only metadata, toolbar refinement ===== */

/* Editor title lifted to the top. */
.diary-editor-canvas--lifted {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.diary-title-row--premium-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
}

.diary-title-row--premium-actions .diary-title-input {
  min-width: 0 !important;
}

.diary-title-action-cluster {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  align-self: center !important;
}

.diary-title-action {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.diary-title-action svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.diary-title-save {
  border-color: rgba(213,181,110,0.50) !important;
  background: linear-gradient(180deg, rgba(241,214,150,0.24), rgba(213,181,110,0.12)) !important;
  color: var(--gold) !important;
  box-shadow: 0 10px 24px rgba(213,181,110,0.12) !important;
}
.diary-title-save svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.55 !important;
}
.diary-title-action:hover,
.diary-title-action:active {
  transform: translateY(-1px) !important;
  border-color: rgba(213,181,110,0.58) !important;
}

/* Old topbar and displaced title action are not shown in v83. */
.diary-editor-topbar,
.diary-editor-date-pill,
#journalEditorDatePill,
#journalFontQuickToggle,
#journalEditorMenu {
  display: none !important;
}

/* Toolbar contains every function; removed circled persistent block. */
.diary-editor-dock--popup-controls {
  position: relative !important;
  gap: 0 !important;
  padding-top: 8px !important;
}

.diary-format-toolbar--popup {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 6px !important;
  min-height: 62px !important;
  padding: 0 12px !important;
  border-radius: 20px !important;
}

.diary-format-toolbar--popup .diary-toolbar-btn,
.diary-format-toolbar--popup .diary-color-toolbar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 13px !important;
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.diary-format-toolbar--popup .diary-toolbar-btn svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.diary-format-toolbar--popup .diary-toolbar-add svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.1 !important;
}

.diary-format-toolbar--popup .diary-toolbar-btn.active,
.diary-format-toolbar--popup .diary-toolbar-btn[aria-expanded="true"],
.diary-format-toolbar--popup .diary-color-toolbar[aria-expanded="true"],
.diary-format-toolbar--popup .diary-toolbar-btn:hover,
.diary-format-toolbar--popup .diary-color-toolbar:hover {
  background: rgba(213,181,110,0.12) !important;
  border-color: rgba(213,181,110,0.40) !important;
  color: var(--gold) !important;
}

.diary-format-toolbar--popup .diary-color-toolbar span {
  width: 24px !important;
  height: 24px !important;
}

/* Popups are transient controls, not permanent blocks. */
.diary-toolbar-popups {
  position: relative !important;
  height: 0 !important;
  z-index: 18 !important;
}

.diary-toolbar-popup {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 72px !important;
  z-index: 22 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border2) !important;
  background: var(--surface) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,0.20) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  animation: diaryPopupIn .18s ease-out both;
}

.diary-toolbar-popup[hidden] {
  display: none !important;
}

@keyframes diaryPopupIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.diary-popup-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.diary-popup-choice-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.diary-popup-choice {
  min-width: 54px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.diary-popup-choice.active,
.diary-popup-choice:hover {
  border-color: rgba(213,181,110,0.56) !important;
  color: var(--gold) !important;
  background: rgba(213,181,110,0.12) !important;
}

.diary-attachment-popup-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.diary-attachment-popup-actions input {
  display: none !important;
}

.diary-popup-attachment-btn {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.diary-popup-attachment-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.diary-toolbar-popup .diary-tags-input-wrap,
.diary-toolbar-popup .diary-editor-tags,
.diary-toolbar-popup .diary-mood-picker,
.diary-toolbar-popup .diary-color-picker,
.diary-toolbar-popup .journal-pending-files {
  margin: 0 !important;
}

/* Old persistent editor metadata sections are removed from layout even if stale CSS/DOM reappears. */
.diary-editor-meta-strip,
.diary-inline-meta-actions,
.diary-tags-block,
.diary-meta-grid {
  display: none !important;
}

/* Preserve valid popup content */
.diary-toolbar-popup .diary-tags-input-wrap,
.diary-toolbar-popup .diary-editor-tags,
.diary-toolbar-popup .diary-mood-picker,
.diary-toolbar-popup .diary-color-picker,
.diary-toolbar-popup .diary-attachments-row {
  display: flex !important;
}

/* Light theme */
body.light-theme .diary-title-action,
body.light-theme .diary-popup-choice,
body.light-theme .diary-popup-attachment-btn {
  background: #ffffff !important;
  border-color: rgba(109,91,59,0.20) !important;
  color: #2b2721 !important;
}
body.light-theme .diary-title-save {
  background: linear-gradient(180deg, rgba(239,211,141,0.34), rgba(209,168,77,0.18)) !important;
  border-color: rgba(171,124,35,0.34) !important;
  color: #8a6324 !important;
}
body.light-theme .diary-toolbar-popup {
  background: #ffffff !important;
  border-color: rgba(109,91,59,0.20) !important;
  box-shadow: 0 24px 54px rgba(90,72,40,0.15) !important;
}

@media (max-width: 980px) {
  .diary-title-row--premium-actions {
    gap: 8px !important;
  }
  .diary-title-action {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  .diary-title-action svg {
    width: 18px !important;
    height: 18px !important;
  }
  .diary-title-save svg {
    width: 20px !important;
    height: 20px !important;
  }
  .diary-format-toolbar--popup {
    min-height: 58px !important;
    gap: 4px !important;
    padding: 0 8px !important;
    border-radius: 18px !important;
  }
  .diary-format-toolbar--popup .diary-toolbar-btn,
  .diary-format-toolbar--popup .diary-color-toolbar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
  }
  .diary-format-toolbar--popup .diary-toolbar-btn svg {
    width: 19px !important;
    height: 19px !important;
  }
  .diary-format-toolbar--popup .diary-color-toolbar span {
    width: 22px !important;
    height: 22px !important;
  }
  .diary-toolbar-popup {
    bottom: 66px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .diary-popup-choice {
    min-width: 50px !important;
    height: 40px !important;
  }
}


/* ===== v84: diary list interaction polish + light theme parity for habits ===== */

/* Diary menu: title is the edit target. */
.diary-entry-edit-title {
  cursor: pointer !important;
  transition: opacity .16s ease, color .16s ease !important;
}
.diary-entry-edit-title:hover,
.diary-entry-edit-title:active {
  opacity: .76 !important;
}

/* Popup now contains only delete, so make it more compact. */
.diary-entry-menu {
  min-width: 166px !important;
}
.diary-entry-menu button {
  width: 100% !important;
}

/* Remove duplicate color outline around the mood emoji on diary cards. */
.diary-entry-mood {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Light theme is the visual default. Habit page should use the same white-card language as Diary. */
body.light-theme {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), rgba(249,245,236,.90) 31%, rgba(245,238,224,.96) 100%) !important;
}

body.light-theme .habits-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

body.light-theme #view-today .calendar-panel,
body.light-theme #view-today .dash-card,
body.light-theme #view-today .top-quote-card,
body.light-theme #view-today .top-quote-card--text-only,
body.light-theme #view-today .habit-period-block,
body.light-theme #view-today .habit-card,
body.light-theme #view-today .day-detail,
body.light-theme #view-today .day-detail-card,
body.light-theme #view-today .detail-habit,
body.light-theme #view-today .empty-state {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(109,91,59,.18) !important;
  box-shadow: 0 10px 26px rgba(90,72,40,.07) !important;
}

body.light-theme #view-today .habit-card.completed {
  background: #ffffff !important;
  background-image: none !important;
}

body.light-theme #view-today .habit-period-block:hover,
body.light-theme #view-today .habit-card:hover,
body.light-theme #view-today .habit-period-header:hover {
  background: #ffffff !important;
  background-image: none !important;
}

body.light-theme #view-today .habit-period-count,
body.light-theme #view-today .habit-period-toggle,
body.light-theme #view-today .habit-period-chevron,
body.light-theme #view-today .habit-edit,
body.light-theme #view-today .habit-delete,
body.light-theme #view-today .habit-timer,
body.light-theme #view-today .habit-check,
body.light-theme #view-today .day-detail-progress-slot {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(109,91,59,.18) !important;
}

body.light-theme #view-today .calendar-month-toggle,
body.light-theme #view-today .cal-arrow-inline {
  background: #ffffff !important;
  background-image: none !important;
}

body.light-theme #view-today .habit-emoji {
  border-color: rgba(109,91,59,.14) !important;
}



/* ===== v85: rounded daily detail, visible editor attachments, share action, PDF clarity ===== */

/* 1. "18 мая" daily detail container: rounded like the upper cards. */
#view-today .day-detail {
  border-radius: 30px !important;
  background-clip: padding-box !important;
}

body.light-theme #view-today .day-detail {
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid rgba(109,91,59,.18) !important;
  box-shadow: 0 10px 26px rgba(90,72,40,.07) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.light-theme #view-today .day-detail-head,
body.light-theme #view-today .day-detail-habits {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 2. Share action placed beside save. */
.diary-title-action-cluster {
  gap: 7px !important;
}

.diary-title-share {
  border-color: rgba(213,181,110,0.34) !important;
}

.diary-title-share svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.0 !important;
}

body.light-theme .diary-title-share {
  background: #ffffff !important;
  border-color: rgba(109,91,59,0.20) !important;
  color: #2b2721 !important;
}

/* 3. Files remain visible inside opened entry without restoring the old bulky controls. */
.diary-editor-file-strip {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 4px 0 10px !important;
  padding: 0 2px !important;
}

.diary-editor-file-strip[hidden] {
  display: none !important;
}

.diary-editor-file-strip-title {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.diary-editor-file-strip-items {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.diary-editor-file-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  max-width: 220px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
}

.diary-editor-file-chip b {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  color: var(--gold) !important;
}

.diary-editor-file-chip em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.diary-editor-file-chip button {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: rgba(0,0,0,.08) !important;
  color: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.light-theme .diary-editor-file-chip {
  background: #ffffff !important;
  border-color: rgba(109,91,59,.20) !important;
  color: #2b2721 !important;
}

/* 4. PDF/doc previews and entry file thumbnails become clear click targets. */
.diary-entry-preview {
  cursor: pointer !important;
}

.diary-doc-preview--pdf {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(213,181,110,.46) !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}

body.light-theme .diary-doc-preview--pdf {
  color: #8a6324 !important;
  border-color: rgba(171,124,35,.42) !important;
}

/* Existing PDF tiles inside attachment popup. */
.diary-attachment-doc {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
}

@media (max-width: 980px) {
  #view-today .day-detail,
  body.light-theme #view-today .day-detail {
    border-radius: 26px !important;
  }

  body.light-theme #view-today .day-detail-head,
  body.light-theme #view-today .day-detail-habits {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .diary-title-action-cluster {
    gap: 5px !important;
  }

  .diary-title-share svg {
    width: 18px !important;
    height: 18px !important;
  }

  .diary-editor-file-chip {
    max-width: 180px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
  }
}



/* ===== v86: share chooser reliability, inline PDF viewer, attachment removal, day-detail spacing ===== */

/* Share icon: black three-node symbol as requested. */
.diary-title-share {
  color: #111111 !important;
  background: #ffffff !important;
}
.diary-title-share svg circle {
  fill: currentColor !important;
  stroke: none !important;
}
.diary-title-share svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
}

/* The rounded "18 мая" block must have free bottom space; internal cards cannot touch/cut at the rounded edge. */
#view-today .day-detail,
body.light-theme #view-today .day-detail {
  overflow: visible !important;
  padding-bottom: 18px !important;
}
body.light-theme #view-today .day-detail-habits {
  padding-bottom: 2px !important;
}

/* Inline attachments shown inside the opened diary entry. */
.diary-editor-attachment-viewer {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 10px 0 6px !important;
}
.diary-editor-attachment-viewer[hidden] {
  display: none !important;
}
.diary-editor-attachment-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10) !important;
}
body.light-theme .diary-editor-attachment-card {
  background: #ffffff !important;
  border-color: rgba(109,91,59,.20) !important;
  box-shadow: 0 12px 26px rgba(90,72,40,.09) !important;
}
.diary-editor-attachment-remove {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(109,91,59,.22) !important;
  background: #ffffff !important;
  color: #29251f !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  z-index: 4 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
}
.diary-editor-attachment-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.diary-editor-attachment-head b {
  flex: 0 0 auto !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(213,181,110,.16) !important;
  color: #8a6324 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
}
.diary-editor-attachment-head span {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.diary-editor-pdf-frame {
  width: 100% !important;
  height: 340px !important;
  border: 1px solid rgba(109,91,59,.18) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}
.diary-editor-image-preview {
  display: block !important;
  width: 100% !important;
  max-height: 360px !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}
.diary-editor-attachment-open {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(171,124,35,.32) !important;
  background: rgba(213,181,110,.14) !important;
  color: #8a6324 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.diary-editor-file-fallback {
  padding: 12px !important;
  border-radius: 14px !important;
  background: rgba(213,181,110,.10) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Existing file chips also show a removable cross. */
.diary-editor-file-chip {
  position: relative !important;
}
.diary-editor-file-chip button {
  font-size: 15px !important;
}

/* Entries previews are explicitly tappable: they open the entry/editor. */
.diary-entry-preview {
  cursor: pointer !important;
}

@media (max-width: 980px) {
  #view-today .day-detail,
  body.light-theme #view-today .day-detail {
    padding-bottom: 16px !important;
  }
  .diary-editor-pdf-frame {
    height: 280px !important;
  }
  .diary-editor-attachment-card {
    padding: 12px !important;
    border-radius: 18px !important;
  }
}



/* ===== v87: active share binding, compact focus text, calendar arrow spacing/color ===== */

/* Focus text must fit inside the narrow summary card. */
#nextHabit,
body.light-theme #nextHabit {
  font-size: 11px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Month arrows: more tap distance from month label / calendar button. */
.calendar-panel--expanded .calendar-title-group,
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  grid-template-columns: 32px max-content 32px 32px !important;
  column-gap: 26px !important;
}

/* Use visibly dark arrows in light theme. */
body.light-theme .cal-arrow-inline,
body.light-theme #view-today .cal-arrow-inline,
body.light-theme .diary-calendar-panel .cal-arrow-inline {
  color: #252019 !important;
  border-color: rgba(37,32,25,.24) !important;
  background: #ffffff !important;
  background-image: none !important;
  font-weight: 800 !important;
}

body.light-theme .cal-arrow-inline:hover,
body.light-theme .cal-arrow-inline:active {
  color: #15120e !important;
  border-color: rgba(37,32,25,.42) !important;
}

@media (max-width: 980px) {
  #nextHabit,
  body.light-theme #nextHabit {
    font-size: 10px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  .calendar-panel--expanded .calendar-title-group,
  .diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 30px max-content 30px 30px !important;
    column-gap: 22px !important;
  }
}


/* ===== v88: diary list variant 2 + full-card open + taller editor writing area ===== */

/* Diary entry list: premium minimalist Variant 2.
   No mood emoji on the card; only the selected day-color dot remains. */
.diary-entry-card {
  min-height: 152px !important;
  padding: 18px 18px 16px 20px !important;
  border-radius: 26px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  align-items: stretch !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.diary-entry-card:hover,
.diary-entry-card:active {
  transform: translateY(-1px) !important;
}

.diary-entry-card--no-preview {
  grid-template-columns: minmax(0, 1fr) !important;
}

.diary-entry-mood {
  display: none !important;
}

.diary-entry-content {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: 1 !important;
}

.diary-entry-title-row {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) 20px !important;
  gap: 9px !important;
  align-items: center !important;
}

.diary-entry-color-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  align-self: center !important;
}

.diary-entry-title-row h3,
.diary-entry-edit-title {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  letter-spacing: -0.018em !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.diary-entry-menu-btn {
  width: 20px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #6f6a62 !important;
  font-size: 25px !important;
  line-height: .58 !important;
  align-self: center !important;
  z-index: 2 !important;
}

.diary-entry-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 8px 0 8px 19px !important;
  min-height: 0 !important;
  max-width: 100% !important;
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.38 !important;
  letter-spacing: -0.006em !important;
}

.diary-entry-bottom {
  margin-top: auto !important;
  margin-left: 19px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.diary-entry-tags {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.diary-entry-tag {
  min-height: 25px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(47,43,39,.14) !important;
  color: #37322c !important;
}

.diary-entry-preview {
  grid-column: 2 !important;
  width: 82px !important;
  height: 96px !important;
  align-self: center !important;
  justify-self: end !important;
  border-radius: 19px !important;
  border: 1px solid rgba(109,91,59,.17) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 8px 18px rgba(90,72,40,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.diary-entry-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.diary-doc-preview {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #8a6324 !important;
  line-height: 1 !important;
}

.diary-doc-preview svg {
  width: 27px !important;
  height: 27px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.diary-doc-preview em {
  font-style: normal !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.diary-doc-preview--pdf,
.diary-doc-preview--file {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.diary-entry-menu {
  right: 16px !important;
  top: 48px !important;
}

/* Editing: use the empty vertical space by growing the writing canvas and lowering the toolbar. */
.diary-screen--editor.active {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100dvh - 174px) !important;
}

.diary-editor-canvas,
.diary-editor-canvas--lifted {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: clamp(560px, calc(100dvh - 330px), 960px) !important;
}

.diary-body-input {
  flex: 1 1 auto !important;
  min-height: clamp(420px, calc(100dvh - 470px), 760px) !important;
  resize: vertical !important;
}

.diary-editor-dock,
.diary-editor-dock--popup-controls {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* Light theme refinements for the diary cards. */
body.light-theme .diary-entry-card,
body.light-theme .diary-entry-preview {
  background: #ffffff !important;
}

body.light-theme .diary-entry-menu-btn {
  color: #6a6258 !important;
}

@media (max-width: 980px) {
  .diary-entry-card {
    min-height: 136px !important;
    padding: 16px 16px 14px 18px !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 12px !important;
  }

  .diary-entry-title-row {
    grid-template-columns: 9px minmax(0, 1fr) 18px !important;
    gap: 8px !important;
  }

  .diary-entry-color-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .diary-entry-title-row h3,
  .diary-entry-edit-title {
    font-size: 17px !important;
  }

  .diary-entry-menu-btn {
    width: 18px !important;
    height: 26px !important;
    font-size: 23px !important;
  }

  .diary-entry-excerpt {
    margin: 7px 0 7px 17px !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  .diary-entry-bottom {
    margin-left: 17px !important;
    gap: 6px !important;
    font-size: 10.5px !important;
  }

  .diary-entry-tag {
    min-height: 24px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  .diary-entry-preview {
    width: 72px !important;
    height: 88px !important;
    border-radius: 17px !important;
  }

  .diary-doc-preview svg {
    width: 25px !important;
    height: 25px !important;
  }

  .diary-doc-preview em {
    font-size: 10px !important;
  }

  .diary-entry-menu {
    right: 14px !important;
    top: 44px !important;
  }

  .diary-screen--editor.active {
    min-height: calc(100dvh - 158px) !important;
  }

  .diary-editor-canvas,
  .diary-editor-canvas--lifted {
    min-height: clamp(540px, calc(100dvh - 292px), 880px) !important;
  }

  .diary-body-input {
    min-height: clamp(400px, calc(100dvh - 418px), 700px) !important;
  }
}


/* ===== v89: diary list 1:1 refinement to approved reference ===== */

/* Reference diary list does not show the interim daily-summary card. */
#view-algorithms .diary-day-summary {
  display: none !important;
}

/* Journal calendar: month arrows are visible in compact week view, same arrangement as the reference. */
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
.diary-calendar-panel .calendar-title-group {
  display: grid !important;
  grid-template-columns: 32px max-content 32px 32px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 16px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline,
.diary-calendar-panel #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel #journalNextMonth.cal-arrow-inline {
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}

.diary-calendar-panel #journalPrevMonth.cal-arrow-inline { grid-area: prev !important; }
.diary-calendar-panel #journalCalMonth.cal-month {
  grid-area: month !important;
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.diary-calendar-panel #journalCalendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}
.diary-calendar-panel #journalNextMonth.cal-arrow-inline { grid-area: next !important; }

/* List gap and cards match approved visual more closely. */
.diary-entries-list,
.journal-entries-list {
  gap: 10px !important;
  padding-top: 0 !important;
}

/* Card visual: tighter, denser, like the approved reference. */
.diary-entry-card {
  min-height: 132px !important;
  padding: 15px 15px 13px 18px !important;
  border-radius: 25px !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  gap: 12px !important;
}

.diary-entry-card--no-preview {
  min-height: 128px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.diary-entry-title-row {
  grid-template-columns: 8px minmax(0, 1fr) 18px !important;
  gap: 8px !important;
}

.diary-entry-color-dot {
  width: 7px !important;
  height: 7px !important;
}

.diary-entry-title-row h3,
.diary-entry-edit-title {
  font-size: 17px !important;
  line-height: 1.14 !important;
  font-weight: 780 !important;
  letter-spacing: -0.02em !important;
}

.diary-entry-menu-btn {
  width: 18px !important;
  height: 24px !important;
  font-size: 23px !important;
  line-height: .56 !important;
}

.diary-entry-excerpt {
  margin: 7px 0 7px 16px !important;
  font-size: 12.7px !important;
  line-height: 1.34 !important;
  -webkit-line-clamp: 3 !important;
}

.diary-entry-bottom {
  margin-left: 16px !important;
  gap: 6px !important;
  font-size: 10.5px !important;
}

.diary-entry-tag {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

.diary-entry-preview {
  width: 58px !important;
  height: 70px !important;
  border-radius: 16px !important;
}

.diary-doc-preview svg {
  width: 21px !important;
  height: 21px !important;
}

.diary-doc-preview em {
  font-size: 9.5px !important;
}

/* Entries with images retain a premium rounded preview. */
.diary-entry-preview img {
  border-radius: inherit !important;
}

/* Keep dropdown within compact card. */
.diary-entry-menu {
  right: 12px !important;
  top: 38px !important;
}

body.light-theme .diary-entry-card {
  box-shadow: 0 10px 24px rgba(90,72,40,.07) !important;
}

/* Mobile alignment exactly for phone screenshots. */
@media (max-width: 980px) {
  .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
  .diary-calendar-panel .calendar-title-group {
    grid-template-columns: 28px max-content 28px 28px !important;
    column-gap: 13px !important;
  }

  .diary-calendar-panel #journalPrevMonth.cal-arrow-inline,
  .diary-calendar-panel #journalNextMonth.cal-arrow-inline,
  .diary-calendar-panel #journalCalendarToggle.calendar-month-toggle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .diary-entry-card {
    min-height: 122px !important;
    padding: 14px 14px 12px 16px !important;
    border-radius: 23px !important;
    grid-template-columns: minmax(0, 1fr) 54px !important;
    gap: 11px !important;
  }

  .diary-entry-card--no-preview {
    min-height: 118px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .diary-entry-title-row {
    grid-template-columns: 7px minmax(0, 1fr) 17px !important;
    gap: 7px !important;
  }

  .diary-entry-color-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .diary-entry-title-row h3,
  .diary-entry-edit-title {
    font-size: 16.5px !important;
  }

  .diary-entry-menu-btn {
    width: 17px !important;
    height: 23px !important;
    font-size: 22px !important;
  }

  .diary-entry-excerpt {
    margin: 6px 0 6px 14px !important;
    font-size: 12.2px !important;
    line-height: 1.33 !important;
  }

  .diary-entry-bottom {
    margin-left: 14px !important;
    gap: 5px !important;
    font-size: 10px !important;
  }

  .diary-entry-tag {
    min-height: 21px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  .diary-entry-preview {
    width: 52px !important;
    height: 64px !important;
    border-radius: 15px !important;
  }

  .diary-doc-preview svg {
    width: 20px !important;
    height: 20px !important;
  }

  .diary-doc-preview em {
    font-size: 9px !important;
  }

  .diary-entry-menu {
    right: 11px !important;
    top: 36px !important;
  }
}


/* ===== v90: requested habit progress / diary header / diary menu refinements ===== */

/* 1) Completed daily progress badge becomes clearly green at 100%. */
.day-detail-progress-slot.is-complete {
  background: rgba(125, 217, 168, .14) !important;
  border-color: rgba(73, 168, 116, .42) !important;
  box-shadow: 0 0 0 1px rgba(73, 168, 116, .12), 0 8px 18px rgba(73, 168, 116, .16) !important;
}
.day-detail-progress-slot.is-complete .ring-fill {
  stroke: #49a874 !important;
  filter: drop-shadow(0 0 4px rgba(73, 168, 116, .42)) !important;
}
.day-detail-progress-slot.is-complete .progress-text {
  color: #49a874 !important;
  font-weight: 800 !important;
}
body.light-theme #view-today .day-detail-progress-slot.is-complete {
  background: rgba(125, 217, 168, .16) !important;
  border-color: rgba(73, 168, 116, .44) !important;
}

/* 2 + 5) Diary month line: no month arrows in compact state, search icon at the far right. */
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
  grid-template-columns: max-content 32px 32px !important;
  grid-template-areas: "month toggle search" !important;
  column-gap: 16px !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline {
  display: none !important;
}
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  grid-template-columns: 32px max-content 32px 32px 32px !important;
  grid-template-areas: "prev month toggle search next" !important;
  column-gap: 16px !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel.calendar-panel--expanded #journalNextMonth.cal-arrow-inline {
  display: inline-flex !important;
}
.diary-calendar-panel #journalPrevMonth.cal-arrow-inline { grid-area: prev !important; }
.diary-calendar-panel #journalCalMonth.cal-month { grid-area: month !important; }
.diary-calendar-panel #journalCalendarToggle.calendar-month-toggle { grid-area: toggle !important; }
.diary-calendar-panel #journalNextMonth.cal-arrow-inline { grid-area: next !important; }
.diary-calendar-panel .diary-header-search-btn {
  grid-area: search !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(109,91,59,.22) !important;
  background: #fff !important;
  color: #252019 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.diary-calendar-panel .diary-header-search-btn svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.diary-calendar-panel .diary-header-search-btn:hover,
.diary-calendar-panel .diary-header-search-btn:active {
  border-color: rgba(109,91,59,.40) !important;
}
body:not(.light-theme) .diary-calendar-panel .diary-header-search-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--text) !important;
}

/* Search panel is now initiated from the calendar header. */
#view-algorithms .diary-tag-filter {
  margin-top: 12px !important;
}

/* 3) Entry menu is always pinned to the upper-right card corner, with or without PDF/attachment. */
.diary-entry-title-row {
  grid-template-columns: 8px minmax(0, 1fr) !important;
  padding-right: 28px !important;
}
.diary-entry-menu-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 4 !important;
  align-self: auto !important;
}
.diary-entry-menu {
  right: 12px !important;
  top: 39px !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
    grid-template-columns: max-content 28px 28px !important;
    grid-template-areas: "month toggle search" !important;
    column-gap: 13px !important;
  }
  .diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 28px max-content 28px 28px 28px !important;
    grid-template-areas: "prev month toggle search next" !important;
    column-gap: 13px !important;
  }
  .diary-calendar-panel .diary-header-search-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 11px !important;
  }
  .diary-calendar-panel .diary-header-search-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  .diary-entry-title-row {
    grid-template-columns: 7px minmax(0, 1fr) !important;
    padding-right: 26px !important;
  }
  .diary-entry-menu-btn {
    top: 13px !important;
    right: 13px !important;
  }
  .diary-entry-menu {
    right: 11px !important;
    top: 37px !important;
  }
}


/* ===== v91: round day progress, diary calendar aligned to habits, focus text tuning ===== */

/* 1) Habit day progress must stay purely circular without square container chrome. */
#view-today .day-detail-progress-slot,
body.light-theme #view-today .day-detail-progress-slot,
#view-today .day-detail-progress-slot.is-complete,
body.light-theme #view-today .day-detail-progress-slot.is-complete {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
#view-today .day-detail-progress-slot .progress-ring-wrap,
body.light-theme #view-today .day-detail-progress-slot .progress-ring-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#view-today .day-detail-progress-slot.is-complete .ring-fill,
body.light-theme #view-today .day-detail-progress-slot.is-complete .ring-fill {
  stroke: #49a874 !important;
  filter: drop-shadow(0 0 3px rgba(73,168,116,.30)) !important;
}
#view-today .day-detail-progress-slot.is-complete .progress-text,
body.light-theme #view-today .day-detail-progress-slot.is-complete .progress-text {
  color: #49a874 !important;
  font-weight: 800 !important;
}

/* 2 + 3) Diary header calendar must visually match the habits page; search stays pinned at the far right. */
.diary-calendar-panel .calendar-header {
  position: relative !important;
}
.diary-calendar-panel .calendar-title-group,
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 52px) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline {
  display: none !important;
}
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 28px max-content 28px 28px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 52px) !important;
  margin: 0 auto !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalPrevMonth.cal-arrow-inline {
  grid-area: prev !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}
.diary-calendar-panel #journalCalMonth.cal-month {
  grid-area: month !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.diary-calendar-panel #journalCalendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalNextMonth.cal-arrow-inline {
  grid-area: next !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}
.diary-calendar-panel .diary-header-search-btn {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.diary-calendar-panel .diary-header-search-btn svg {
  width: 17px !important;
  height: 17px !important;
}

/* 4) Keep first two summary cards identical; only shrink focus content so long labels fit cleanly. */
#dailyDashboard .dash-card strong,
body.light-theme #dailyDashboard .dash-card strong {
  font-size: 12px !important;
  line-height: 1.08 !important;
}
#dailyDashboard #nextHabit,
body.light-theme #dailyDashboard #nextHabit {
  font-size: 9px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel .calendar-title-group,
  .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
    gap: 6px !important;
    max-width: calc(100% - 48px) !important;
  }
  .diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
    grid-template-columns: 28px max-content 28px 28px !important;
    column-gap: 7px !important;
    max-width: calc(100% - 48px) !important;
  }
  .diary-calendar-panel .diary-header-search-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 11px !important;
  }
  .diary-calendar-panel .diary-header-search-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  #dailyDashboard .dash-card strong,
  body.light-theme #dailyDashboard .dash-card strong {
    font-size: 12px !important;
  }
  #dailyDashboard #nextHabit,
  body.light-theme #dailyDashboard #nextHabit {
    font-size: 8px !important;
    line-height: 1.02 !important;
  }
}


/* ===== v92: restore diary calendar toggle and pin search to far right ===== */

/* Diary header must reserve a dedicated slot on the far right for search. */
.diary-calendar-panel .calendar-header,
.diary-calendar-panel.calendar-panel--expanded .calendar-header {
  position: relative !important;
  padding-right: 44px !important;
}

/* Keep the month + calendar (and arrows when expanded) centered as one group. */
.diary-calendar-panel .calendar-title-group,
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  position: static !important;
  margin: 0 auto !important;
}

/* Collapsed: month + calendar only. */
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 44px) !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle {
  display: inline-flex !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

/* Expanded: < month calendar > centered; search stays outside at far right. */
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 28px max-content 28px 28px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 44px) !important;
}

/* Search button always pinned at the end of the row. */
.diary-calendar-panel .diary-header-search-btn {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel .calendar-header,
  .diary-calendar-panel.calendar-panel--expanded .calendar-header {
    padding-right: 40px !important;
  }
  .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
  .diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
    max-width: calc(100% - 40px) !important;
  }
}


/* ===== v93: diary calendar header aligned 1:1 to habits reference ===== */
/* The diary month line must mirror the habits screen: centered "May 2026" text,
   calendar icon in the same visual position, identical sizing/styling, and the
   search icon pinned independently at the far right. */

/* Base diary header geometry mirrors the habits header. */
.diary-calendar-panel .calendar-header.calendar-header--status-top {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding-right: 0 !important;
}

/* Collapsed diary header: exact same centering model as habits page. */
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: center !important;
  margin: 0 !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalMonth.cal-month {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-family: 'Fraunces', serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  color: var(--text) !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateY(-50%) translateX(82px) !important;
  margin: 0 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-color: rgba(213,181,110,0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.65 !important;
}
.diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline {
  display: none !important;
}

/* Expanded diary header: same visual system as expanded habits header, but search remains separate. */
.diary-calendar-panel.calendar-panel--expanded .calendar-header.calendar-header--status-top {
  min-height: 58px !important;
  margin-bottom: 12px !important;
}
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  display: grid !important;
  grid-template-columns: 28px max-content 28px 28px !important;
  grid-template-areas: "prev month toggle next" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalPrevMonth.cal-arrow-inline {
  grid-area: prev !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalMonth.cal-month {
  grid-area: month !important;
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-family: 'Fraunces', serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-color: rgba(213,181,110,0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.65 !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalNextMonth.cal-arrow-inline {
  grid-area: next !important;
  display: inline-flex !important;
  position: static !important;
  margin: 0 !important;
}

/* Search is independent and pinned to the far right end of the row. */
.diary-calendar-panel .diary-header-search-btn {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  margin: 0 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  border-color: rgba(109,91,59,.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  box-shadow: none !important;
}
.diary-calendar-panel .diary-header-search-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2 !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel .calendar-header.calendar-header--status-top {
    min-height: 52px !important;
  }
  .diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle {
    transform: translateY(-50%) translateX(82px) !important;
  }
  .diary-calendar-panel .diary-header-search-btn {
    right: 18px !important;
  }
}


/* ===== v94: fix search/calendar overlap in diary header ===== */
/* Root cause: search button was absolutely positioned inside a positioned
   .calendar-title-group, so it anchored to the title group and overlapped
   the calendar icon. Both controls must anchor to the diary calendar header. */

.diary-calendar-panel .calendar-header.calendar-header--status-top {
  position: relative !important;
}

/* Remove the unintended positioning context for search. */
.diary-calendar-panel .calendar-title-group,
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  position: static !important;
}

/* Collapsed: calendar icon remains in the same visual spot as the habits header,
   now positioned from the header itself rather than from the title group. */
.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateY(-50%) translateX(82px) !important;
  z-index: 4 !important;
}

/* Search is pinned to the actual far-right side of the header and no longer
   overlaps the calendar icon. */
.diary-calendar-panel .diary-header-search-btn {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

/* Expanded state keeps calendar/arrow layout untouched while search stays right. */
.diary-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle {
  position: static !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel .diary-header-search-btn {
    right: 18px !important;
  }
}


/* ===== v95: light-theme popup contrast + white statistics surface ===== */

/* 1) Toast/pop-up notifications in light theme must not render as black pills.
   Applies to theme-change confirmation and any other toast messages. */
body.light-theme .toast {
  background: rgba(255,255,255,0.98) !important;
  background-image: none !important;
  border: 1px solid rgba(109,91,59,0.22) !important;
  color: #2b2721 !important;
  box-shadow: 0 14px 32px rgba(90,72,40,0.16) !important;
  backdrop-filter: blur(12px) !important;
}

/* 2) Keep other app popups readable in light theme as a preventive correction. */
body.light-theme .timer-popup,
body.light-theme .diary-toolbar-popup,
body.light-theme .diary-entry-menu,
body.light-theme .modal,
body.light-theme .install-banner {
  background: rgba(255,255,255,0.98) !important;
  background-image: none !important;
  border-color: rgba(109,91,59,0.20) !important;
  color: #2b2721 !important;
  box-shadow: 0 18px 42px rgba(90,72,40,0.14) !important;
}

body.light-theme .timer-popup-name,
body.light-theme .diary-entry-menu button,
body.light-theme .diary-toolbar-popup,
body.light-theme .modal-title {
  color: #2b2721 !important;
}

/* 3) Statistics page in light theme: remove yellow/gold surface fills.
   Use the same white card language as the rest of the interface. */
body.light-theme .stats-content,
body.light-theme .stats-card,
body.light-theme .stats-period-summary,
body.light-theme .stats-period-summary > div,
body.light-theme .stats-tabs,
body.light-theme .stats-matrix-scroller,
body.light-theme .stats-empty,
body.light-theme .stat-card,
body.light-theme .heatmap-section {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(109,91,59,0.18) !important;
  box-shadow: 0 10px 26px rgba(90,72,40,0.07) !important;
}

/* Inner matrix cells stay white/light-neutral instead of ivory-gold. */
body.light-theme .stats-matrix-corner,
body.light-theme .stats-head-cell,
body.light-theme .stats-habit-title,
body.light-theme .stats-check-cell {
  background: #ffffff !important;
  background-image: none !important;
  border-right-color: rgba(109,91,59,0.10) !important;
  border-bottom-color: rgba(109,91,59,0.10) !important;
}

/* Today highlight remains visible but neutral, not yellow-filled. */
body.light-theme .stats-head-cell.today,
body.light-theme .stats-check-cell.today {
  background: rgba(243,239,231,0.88) !important;
  background-image: none !important;
}

/* Tabs: normal state white, active state gently accented without full gold flood. */
body.light-theme .stats-tab {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(109,91,59,0.16) !important;
  color: #6d655a !important;
}

body.light-theme .stats-tab.active {
  background: rgba(239,211,141,0.18) !important;
  background-image: none !important;
  border-color: rgba(171,124,35,0.28) !important;
  color: #8a6324 !important;
  box-shadow: none !important;
}

/* Completed marks keep accent, but the statistics surface remains white. */
body.light-theme .stats-check-cell.done::before {
  border-color: rgba(154,112,46,0.58) !important;
}


/* ===== v96: diary calendar icon inline next to month title ===== */
/* Collapsed diary header must mirror the habits header visually: 
   'May 2026' with the calendar icon immediately to its right, while the 
   search icon stays independently pinned at the far-right edge. */

.diary-calendar-panel .calendar-header.calendar-header--status-top {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Compact diary state: keep month + calendar as one centered inline row. */
.diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: calc(100% - 72px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalMonth.cal-month {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.diary-calendar-panel:not(.calendar-panel--expanded) #journalCalendarToggle.calendar-month-toggle {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
}

.diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth.cal-arrow-inline,
.diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth.cal-arrow-inline {
  display: none !important;
}

/* Search remains at the far right and no longer affects month/calendar alignment. */
.diary-calendar-panel .diary-header-search-btn {
  position: absolute !important;
  right: 18px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

/* Expanded state: preserve expanded calendar layout. */
.diary-calendar-panel.calendar-panel--expanded .calendar-title-group {
  position: static !important;
}
.diary-calendar-panel.calendar-panel--expanded #journalCalendarToggle.calendar-month-toggle {
  position: static !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
    gap: 8px !important;
    max-width: calc(100% - 66px) !important;
  }
  .diary-calendar-panel .diary-header-search-btn {
    right: 18px !important;
  }
}


/* ===== v97: dark diary parity with habits + compact entry cards/PDF ===== */

/* Dark diary should use the same restrained black/navy + gold language as Habits. */
body:not(.light-theme) #view-algorithms .diary-calendar-panel.calendar-panel {
  background:
    linear-gradient(180deg, rgba(18,17,24,0.90), rgba(10,10,15,0.88)) !important;
  border-color: rgba(255,255,255,0.095) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 14px 34px rgba(0,0,0,0.24) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-card,
body:not(.light-theme) #view-algorithms .diary-empty-note {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.022)),
    radial-gradient(circle at 10% 0%, rgba(213,181,110,0.060), transparent 34%) !important;
  border-color: rgba(255,255,255,0.095) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 12px 28px rgba(0,0,0,0.18) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-title-row h3,
body:not(.light-theme) #view-algorithms .diary-entry-edit-title {
  color: rgba(245,241,232,0.94) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-excerpt {
  color: rgba(194,187,203,0.84) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-bottom,
body:not(.light-theme) #view-algorithms .diary-entry-date {
  color: rgba(176,169,187,0.82) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-menu-btn {
  color: rgba(198,187,164,0.56) !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-color-dot {
  box-shadow: 0 0 0 1px rgba(213,181,110,0.14) !important;
}

/* Make tags blend with the same dark/gold palette instead of pale gray chips. */
body:not(.light-theme) #view-algorithms .diary-entry-tag {
  background: rgba(213,181,110,0.12) !important;
  border-color: rgba(213,181,110,0.22) !important;
  color: rgba(237,215,160,0.95) !important;
}

/* Calendar and search controls in diary should match dark Habits styling. */
body:not(.light-theme) #view-algorithms #journalCalendarToggle.calendar-month-toggle,
body:not(.light-theme) #view-algorithms .diary-header-search-btn {
  background: rgba(255,255,255,0.035) !important;
  background-image: none !important;
  border-color: rgba(213,181,110,0.22) !important;
  color: #e7ca86 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

body:not(.light-theme) #view-algorithms .diary-header-search-btn {
  color: rgba(244,239,230,0.92) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* Entry blocks: materially smaller and denser. */
#view-algorithms .diary-entry-card {
  min-height: 108px !important;
  padding: 13px 14px 12px 16px !important;
  border-radius: 23px !important;
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 10px !important;
}

#view-algorithms .diary-entry-card--no-preview {
  min-height: 104px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#view-algorithms .diary-entry-title-row {
  grid-template-columns: 8px minmax(0, 1fr) 18px !important;
  gap: 8px !important;
}

#view-algorithms .diary-entry-title-row h3,
#view-algorithms .diary-entry-edit-title {
  font-size: 16px !important;
  line-height: 1.12 !important;
}

#view-algorithms .diary-entry-excerpt {
  margin: 5px 0 5px 16px !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
}

#view-algorithms .diary-entry-bottom {
  margin-left: 16px !important;
  gap: 6px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
}

#view-algorithms .diary-entry-menu-btn {
  width: 18px !important;
  height: 22px !important;
  font-size: 22px !important;
  line-height: .54 !important;
}

/* PDF/file tile: compact, aligned, and visually integrated with dark theme. */
#view-algorithms .diary-entry-preview {
  width: 44px !important;
  height: 54px !important;
  border-radius: 13px !important;
  align-self: center !important;
  justify-self: end !important;
  margin-right: 1px !important;
}

body:not(.light-theme) #view-algorithms .diary-entry-preview {
  background: rgba(213,181,110,0.075) !important;
  border-color: rgba(213,181,110,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 8px 18px rgba(0,0,0,0.18) !important;
}

body:not(.light-theme) #view-algorithms .diary-doc-preview {
  color: rgba(226,194,116,0.90) !important;
}

#view-algorithms .diary-doc-preview {
  gap: 3px !important;
}

#view-algorithms .diary-doc-preview svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.65 !important;
}

#view-algorithms .diary-doc-preview em {
  font-size: 7.5px !important;
  letter-spacing: .035em !important;
}

/* Keep compact cards proportional on phones. */
@media (max-width: 980px) {
  #view-algorithms .diary-entry-card {
    min-height: 106px !important;
    padding: 12px 13px 11px 15px !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    gap: 9px !important;
  }

  #view-algorithms .diary-entry-card--no-preview {
    min-height: 102px !important;
  }

  #view-algorithms .diary-entry-preview {
    width: 42px !important;
    height: 52px !important;
    border-radius: 13px !important;
  }
}


/* ===== v98: focus text fit + PDF tile position correction ===== */

/* Focus block: compact sans-serif text that fits “22:00 · Отбой” without clipping. */
#dailyDashboard #nextHabit,
body.light-theme #dailyDashboard #nextHabit {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9.2px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* PDF/file preview in diary: shift left and slightly down so it never collides with the top-right menu. */
#view-algorithms .diary-entry-preview {
  transform: translate(-8px, 8px) !important;
}

@media (max-width: 980px) {
  #dailyDashboard #nextHabit,
  body.light-theme #dailyDashboard #nextHabit {
    font-size: 8.8px !important;
    letter-spacing: -0.04em !important;
  }

  #view-algorithms .diary-entry-preview {
    transform: translate(-8px, 8px) !important;
  }
}
\n\n/* ===== v99: focused fixes only ===== */\n/* Focus text must remain fully readable inside the narrow third dashboard card. */\n#dailyDashboard #nextHabit,\nbody.light-theme #dailyDashboard #nextHabit {\n  font-family: 'DM Sans', sans-serif !important;\n  font-size: 7.4px !important;\n  line-height: 1.02 !important;\n  font-weight: 850 !important;\n  letter-spacing: -0.055em !important;\n  white-space: nowrap !important;\n  overflow: visible !important;\n  text-overflow: clip !important;\n}\n\n@media (max-width: 980px) {\n  #dailyDashboard #nextHabit,\n  body.light-theme #dailyDashboard #nextHabit {\n    font-size: 6.8px !important;\n    letter-spacing: -0.06em !important;\n  }\n}\n

/* ===== v100: fixed diary editor dock, robust attachments, focus text fit ===== */
@media (max-width: 980px) {
  #nextHabit {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    font-size: 9.5px !important;
    line-height: 1.03 !important;
    max-height: 2.08em !important;
  }

  .diary-screen--editor.active {
    position: relative !important;
    min-height: calc(100dvh - 160px) !important;
    padding-bottom: 232px !important;
    overflow-x: hidden !important;
    scroll-padding-bottom: 232px !important;
  }

  .diary-editor-canvas,
  .diary-editor-canvas--lifted {
    min-height: auto !important;
    padding-bottom: 10px !important;
  }

  .diary-body-input {
    min-height: clamp(360px, calc(100dvh - 490px), 620px) !important;
    padding-bottom: 10px !important;
  }

  .diary-editor-dock,
  .diary-editor-dock--popup-controls {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(102px + env(safe-area-inset-bottom)) !important;
    z-index: 120 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .diary-format-toolbar--popup {
    margin: 0 !important;
  }

  .diary-toolbar-popups {
    margin-bottom: 10px !important;
  }

  .diary-toolbar-popup {
    max-height: min(42vh, 320px) !important;
    overflow: auto !important;
  }

  .journal-pending-files,
  .diary-attachments-row {
    min-height: 110px !important;
    gap: 10px !important;
  }

  .diary-attachment-add-tile,
  .diary-attachment-tile {
    width: 108px !important;
    height: 108px !important;
    border-radius: 16px !important;
  }

  .diary-attachment-add-tile {
    font-size: 36px !important;
  }

  .diary-attachment-tile {
    padding: 8px !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .diary-attachment-doc {
    font-size: 28px !important;
  }
}


/* ===== v101: authoritative editor dock, attachment preview and focus fit ===== */
body.journal-editor-open .diary-editor-dock--popup-controls {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: var(--journal-dock-bottom, 102px) !important;
  width: auto !important;
  max-width: none !important;
  z-index: 10000 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body:not(.journal-editor-open) .diary-editor-dock--popup-controls {
  position: relative !important;
}

body.journal-editor-open .diary-toolbar-popups {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  z-index: 10001 !important;
  margin: 0 !important;
}

body.journal-editor-open .diary-toolbar-popup {
  max-height: min(44dvh, 330px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body.journal-editor-open .diary-screen--editor.active {
  padding-bottom: 210px !important;
  scroll-padding-bottom: 210px !important;
}

/* Force the focus value to fit in the narrow third summary cell. */
body #dailyDashboard .dash-card #nextHabit {
  display: block !important;
  width: 122% !important;
  max-width: 122% !important;
  font-family: Arial, 'DM Sans', sans-serif !important;
  font-size: 8px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  transform: scaleX(.82) !important;
  transform-origin: left center !important;
}

/* Stable image and file preview rendering. */
.diary-editor-image-preview {
  display: block !important;
  width: 100% !important;
  max-height: 220px !important;
  object-fit: contain !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 12px !important;
}

.diary-editor-file-fallback {
  overflow-wrap: anywhere !important;
}

@media (max-width: 980px) {
  body #dailyDashboard .dash-card #nextHabit {
    font-size: 7.5px !important;
    width: 128% !important;
    max-width: 128% !important;
    transform: scaleX(.78) !important;
  }
}


/* ===== v102: photo persistence + adaptive centered Focus text ===== */
body #dailyDashboard .dash-card #nextHabit,
body.light-theme #dailyDashboard .dash-card #nextHabit {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: none !important;
  transform-origin: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.05 !important;
}

#dailyDashboard .dash-card:last-child {
  text-align: center !important;
}

.diary-entry-preview img,
.diary-editor-image-preview,
.diary-attachment-tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== v103: single attachment + restrained light background ===== */
/* Attachment popup: remove separate Photo/File actions; keep only the universal + tile. */
.diary-attachment-popup-actions--single {
  display: none !important;
}
#journalAttachmentPopup .diary-attachments-row {
  margin-top: 0 !important;
}

/* Light theme: restrained neutral premium background, less sand/yellow. */
body.light-theme {
  --bg: #f3f3f1 !important;
  --surface: #ffffff !important;
  --surface2: #f7f7f5 !important;
  --surface3: #ececea !important;
  background: linear-gradient(180deg, #f7f7f5 0%, #f1f1ef 55%, #ededeb 100%) !important;
}
body.light-theme #app,
body.light-theme .app-shell,
body.light-theme .main-content {
  background: transparent !important;
}


/* ===== v104: icon-only attachments + visible attachment count + premium light palette ===== */

/* Attachment previews: no PDF/FILE/PHOTO labels, icon only. */
.diary-doc-preview em,
.diary-editor-file-chip b,
.diary-attachment-doc,
.diary-entry-preview .diary-doc-preview em {
  display: none !important;
}

.diary-entry-preview {
  position: relative !important;
}

.diary-entry-attachment-count {
  position: absolute !important;
  right: -7px !important;
  bottom: -7px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #161616 !important;
  background: linear-gradient(180deg, #e8cf91, #cfae62) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.24) !important;
  z-index: 4 !important;
}

/* Light theme: restrained premium neutral palette. Structure and spacing unchanged. */
body.light-theme {
  --bg: #eef0f2 !important;
  --surface: #ffffff !important;
  --surface2: #f7f8f9 !important;
  --surface3: #eceff2 !important;
  --border: rgba(34,39,45,.12) !important;
  --border2: rgba(34,39,45,.20) !important;
  --text: #20242a !important;
  --text-muted: #6f7680 !important;
  --text-dim: #9299a3 !important;
  --accent: #b99043 !important;
  --accent-glow: rgba(185,144,67,.12) !important;
  --gold: #b99043 !important;
  background: linear-gradient(180deg, #f5f6f7 0%, #eef0f2 54%, #e8ebee 100%) !important;
}

body.light-theme #app,
body.light-theme .app-shell,
body.light-theme .main-content,
body.light-theme .view {
  background: transparent !important;
}

body.light-theme .habits-panel,
body.light-theme .calendar-panel,
body.light-theme .stats-content,
body.light-theme .profile-content,
body.light-theme .diary-entry-card,
body.light-theme .diary-empty-note,
body.light-theme .diary-calendar-panel,
body.light-theme .profile-card,
body.light-theme .heatmap-section,
body.light-theme .stats-card,
body.light-theme .stats-period-summary,
body.light-theme .stats-tabs,
body.light-theme .stats-matrix-scroller,
body.light-theme .day-detail,
body.light-theme .habit-period-block,
body.light-theme .dash-card,
body.light-theme .top-quote-card,
body.light-theme .diary-format-toolbar,
body.light-theme .diary-toolbar-popup {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.98)) !important;
  background-image: none !important;
  border-color: rgba(34,39,45,.12) !important;
  box-shadow: 0 12px 30px rgba(39,44,51,.075) !important;
}

body.light-theme .detail-habit,
body.light-theme .habit-card,
body.light-theme .journal-entry-card,
body.light-theme .diary-entry-preview,
body.light-theme .stats-check-cell,
body.light-theme .stats-head-cell,
body.light-theme .stats-habit-title,
body.light-theme .stats-matrix-corner,
body.light-theme .diary-attachment-tile,
body.light-theme .diary-attachment-add-tile,
body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .diary-tags-input-wrap,
body.light-theme .diary-title-action,
body.light-theme .calendar-month-toggle,
body.light-theme .diary-header-search-btn {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(34,39,45,.13) !important;
  box-shadow: 0 6px 18px rgba(39,44,51,.055) !important;
}

body.light-theme .habit-card.completed,
body.light-theme .nav-item.active,
body.light-theme .stats-tab.active,
body.light-theme .today-chip,
body.light-theme .habit-period-toggle,
body.light-theme .habit-period-count,
body.light-theme .calendar-month-toggle.is-expanded,
body.light-theme .language-btn.active {
  background: rgba(185,144,67,.11) !important;
  background-image: none !important;
  border-color: rgba(185,144,67,.30) !important;
  color: #7c622e !important;
  box-shadow: none !important;
}

body.light-theme .daily-motivation,
body.light-theme .quotes-strip {
  background: linear-gradient(180deg, rgba(250,248,243,.96), rgba(246,244,239,.96)) !important;
  border-color: rgba(84,76,62,.12) !important;
  box-shadow: 0 8px 20px rgba(39,44,51,.045) !important;
}

body.light-theme .sidebar,
body.light-theme .mobile-bottom-nav {
  background: rgba(248,249,250,.94) !important;
  background-image: none !important;
  border-color: rgba(34,39,45,.13) !important;
  box-shadow: 0 -6px 24px rgba(39,44,51,.10) !important;
  backdrop-filter: blur(18px) !important;
}

body.light-theme .nav-item {
  color: #4f5660 !important;
}

body.light-theme .cal-day,
body.light-theme .habit-time,
body.light-theme .habit-goal,
body.light-theme .habit-days,
body.light-theme .date-sub,
body.light-theme .toolbar-note,
body.light-theme .profile-subtitle,
body.light-theme .diary-entry-excerpt,
body.light-theme .diary-entry-bottom,
body.light-theme .stats-summary-label,
body.light-theme .stats-head-cell small,
body.light-theme .dash-label {
  color: #767d86 !important;
}

body.light-theme .habit-name,
body.light-theme .cal-month,
body.light-theme .stats-title,
body.light-theme .profile-card-head h3,
body.light-theme .diary-entry-title-row h3,
body.light-theme .dash-card strong,
body.light-theme #doneCount,
body.light-theme #bestStreak,
body.light-theme #nextHabit {
  color: #20242a !important;
}

body.light-theme .ring-bg {
  stroke: rgba(34,39,45,.10) !important;
}

body.light-theme .diary-entry-attachment-count {
  color: #ffffff !important;
  background: #9c7a3d !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(39,44,51,.18) !important;
}


/* ===== v105: diary dock visibility + attachment count reliability ===== */
body:not(.journal-editor-open) > .diary-editor-dock--popup-controls {
  display: none !important;
}

body.journal-editor-open > .diary-editor-dock--popup-controls {
  display: flex !important;
}


/* ===== v106: attachment count visibility without increasing badge size ===== */
.diary-entry-attachment-count {
  right: 2px !important;
  bottom: 2px !important;
  color: #111318 !important;
  background: #f0cf79 !important;
  border: 1px solid rgba(16,18,22,.82) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.38), 0 4px 10px rgba(0,0,0,.38) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  z-index: 12 !important;
}
body.light-theme .diary-entry-attachment-count {
  color: #111318 !important;
  background: #d6b45f !important;
  border-color: rgba(28,31,36,.72) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 4px 10px rgba(31,35,40,.24) !important;
}


/* ===== v107: compact premium calendar (reference variant 1) + clickable Focus ===== */

/* Focus acts as a direct completion control without changing dashboard geometry. */
#focusHabitCard {
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
#focusHabitCard:not(.is-empty):active {
  transform: scale(.985) !important;
}
#focusHabitCard:not(.is-empty):hover,
#focusHabitCard:not(.is-empty):focus-visible {
  border-color: rgba(185,144,67,.34) !important;
  box-shadow: 0 8px 20px rgba(185,144,67,.10) !important;
  outline: none !important;
}
#focusHabitCard.is-empty {
  cursor: default !important;
}

/* Collapsed week calendar: compact 1:1 visual system for Today and Diary. */
@media (max-width: 980px) {
  #view-today .calendar-panel:not(.calendar-panel--expanded),
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 13px 14px 12px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-header,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-title-group,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-title-group {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    max-width: calc(100% - 46px) !important;
    margin: 0 auto !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .cal-month,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .cal-month {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-month-toggle,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-month-toggle {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 10px !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-month-toggle svg,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-month-toggle svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.8 !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .cal-arrow-inline,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) #journalPrevMonth,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) #journalNextMonth {
    display: none !important;
  }

  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .diary-header-search-btn {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    z-index: 4 !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-weekdays,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0,1fr)) !important;
    gap: 2px !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    min-height: 16px !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-weekdays span,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-weekdays span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 16px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: .055em !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0,1fr)) !important;
    gap: 2px !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day {
    width: 100% !important;
    max-width: 42px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.selected,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.selected {
    width: 42px !important;
    max-width: 42px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 13px !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.selected span,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.selected span {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #view-today .calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.has-completions::before,
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) .calendar-grid--week .cal-day.has-completions::before {
    top: 5px !important;
  }
}

/* Keep the same compact proportions on larger screens without altering expanded calendar logic. */
@media (min-width: 981px) {
  #view-today .calendar-panel:not(.calendar-panel--expanded),
  #view-algorithms .diary-calendar-panel:not(.calendar-panel--expanded) {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
}


/* ===== v108: week stats fit, adaptive names, profile guide, subtle diary tags ===== */

/* Week view: all 7 days fit inside the statistics card without horizontal scrolling. */
.stats-matrix-scroller.stats-col-week {
  overflow-x: hidden !important;
}
.stats-col-week .stats-matrix {
  --stats-left: 104px !important;
  --stats-cell: 1fr !important;
  grid-template-columns: 104px repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.stats-col-week .stats-matrix-corner {
  padding-inline: 8px !important;
  font-size: 9.5px !important;
  letter-spacing: .045em !important;
}
.stats-col-week .stats-habit-title {
  grid-template-columns: 18px minmax(0,1fr) auto !important;
  gap: 4px !important;
  padding: 6px 5px 6px 8px !important;
}
.stats-col-week .stats-habit-icon {
  font-size: 15px !important;
}
.stats-col-week .stats-habit-name {
  min-width: 0 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}
.stats-col-week .stats-habit-percent {
  font-size: 8.8px !important;
  letter-spacing: -.02em !important;
}
.stats-col-week .stats-head-cell span {
  font-size: 9.5px !important;
}
.stats-col-week .stats-head-cell small {
  font-size: 8px !important;
}
.stats-col-week .stats-check-cell::before {
  width: 11px !important;
  height: 11px !important;
  border-radius: 4px !important;
}

/* Profile guide. */
.profile-guide-card {
  margin-bottom: 0 !important;
}
.profile-guide-list {
  display: grid;
  gap: 10px;
}
.profile-guide-item {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: start;
  gap: 9px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.42;
}
.profile-guide-item b {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(213,181,110,.10);
  border: 1px solid rgba(213,181,110,.22);
  font-size: 10px;
  line-height: 1;
}
body.light-theme .profile-guide-item {
  color: #6f7680 !important;
}
body.light-theme .profile-guide-item b {
  color: #7c622e !important;
  background: rgba(185,144,67,.10) !important;
  border-color: rgba(185,144,67,.22) !important;
}

/* Diary tags: subtle, readable, aligned at the lower-right edge of each entry. */
.diary-entry-card {
  position: relative !important;
}
.diary-entry-tags {
  position: absolute !important;
  right: 16px !important;
  bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  max-width: 46% !important;
  overflow: hidden !important;
  z-index: 3 !important;
}
.diary-entry-card.has-attachments .diary-entry-tags {
  right: 112px !important;
  max-width: 36% !important;
}
.diary-entry-tag {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(190,181,165,.62) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  font-weight: 450 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}
body.light-theme .diary-entry-tag {
  color: rgba(90,87,82,.52) !important;
}

@media (max-width: 620px) {
  .stats-col-week .stats-matrix {
    grid-template-columns: 96px repeat(7, minmax(0, 1fr)) !important;
  }
  .stats-col-week .stats-habit-title {
    grid-template-columns: 17px minmax(0,1fr) auto !important;
    gap: 3px !important;
    padding-left: 7px !important;
  }
  .stats-col-week .stats-habit-percent {
    font-size: 8px !important;
  }
  .stats-col-week .stats-head-cell span {
    font-size: 8.8px !important;
  }
  .stats-col-week .stats-check-cell::before {
    width: 10px !important;
    height: 10px !important;
  }
  .profile-guide-item {
    font-size: 11.5px !important;
  }
}


/* ===== v109: reliable diary tags + opaque editor toolbar ===== */
/* The fixed formatting dock must stay fully opaque over photos and files. */
body.journal-editor-open > .diary-editor-dock--popup-controls .diary-format-toolbar--popup,
body.journal-editor-open .diary-format-toolbar--popup {
  background: #17171c !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

body.light-theme.journal-editor-open > .diary-editor-dock--popup-controls .diary-format-toolbar--popup,
body.light-theme.journal-editor-open .diary-format-toolbar--popup {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(38,42,48,.16) !important;
  box-shadow: 0 14px 34px rgba(39,44,51,.16) !important;
}

/* Popup sheets opened from the dock are opaque as well. */
body.journal-editor-open .diary-toolbar-popup {
  background: #17171c !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.light-theme.journal-editor-open .diary-toolbar-popup {
  background: #ffffff !important;
  background-image: none !important;
}

/* Preserve subtle, readable tag placement on entry cards. */
.diary-entry-tags:not(:empty) {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ===== v113: restored layout from before static bottom navigation changes ===== */
.profile-guide-launch-card { padding: 0 !important; overflow: hidden !important; }
.profile-guide-launch {
  width: 100%; min-height: 76px; padding: 18px 20px; border: 0; background: transparent;
  color: var(--text); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-align: left; cursor: pointer;
}
.profile-guide-launch-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-guide-launch-copy b { font-size: 17px; line-height: 1.15; }
.profile-guide-launch-copy small { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.profile-guide-launch-arrow { font-size: 30px; line-height: 1; color: var(--accent); }

.profile-guide-modal-overlay {
  position: fixed; inset: 0; z-index: 2200; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.58); backdrop-filter: blur(10px);
}
.profile-guide-modal-overlay.open { display: flex; }
.profile-guide-modal {
  width: min(560px, 100%); max-height: min(78dvh, 720px); overflow: auto;
  border: 1px solid var(--border); border-radius: 26px; padding: 22px;
  background: linear-gradient(180deg, rgba(24,23,31,.99), rgba(13,12,18,.99));
  color: var(--text); box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.profile-guide-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.profile-guide-modal-head h2 { margin: 0 0 5px; font-family: 'Fraunces',serif; font-size: 27px; }
.profile-guide-modal-head p { margin: 0; color: var(--text-muted); font-size: 13px; }
.profile-guide-modal-close {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(255,255,255,.05); color: var(--text); font-size: 24px;
}
.profile-guide-modal-list { display: grid; gap: 10px; }
.profile-guide-modal-item {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px; align-items: start;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.profile-guide-modal-item span {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent); font-weight: 800; font-size: 12px;
}
.profile-guide-modal-item p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); }
body.light-theme .profile-guide-modal {
  background: #fff !important; color: #252932 !important; border-color: rgba(87,93,104,.18) !important;
  box-shadow: 0 24px 70px rgba(40,45,55,.18) !important;
}
body.light-theme .profile-guide-modal-item { background: #f7f8fa !important; border-color: rgba(87,93,104,.14) !important; }
body.light-theme .profile-guide-modal-close { background: #f7f8fa !important; color: #252932 !important; }
body.light-theme .profile-guide-modal-head p { color: #767d89 !important; }

@media (max-width: 980px) {
  .profile-guide-modal-overlay { align-items: flex-end; padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  .profile-guide-modal { max-height: 72dvh; border-radius: 24px; padding: 18px; }
}


/* ===== v114: static mobile bottom navigation only; no global layout changes ===== */
@media (max-width: 980px) {
  .sidebar {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
  }
}


/* ===== v115: authoritative mobile centering + fixed bottom navigation ===== */
/* Root cause protection: prevent any page-specific oversized element from moving
   the document horizontally, and make every active view size from the viewport. */
@media (max-width: 980px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    margin: 0 !important;
  }

  #app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  .main,
  .view,
  .view.active,
  .main-content,
  .habits-panel,
  .calendar-panel,
  .stats-content,
  .algo-content,
  .profile-content,
  .diary-app,
  .diary-screen,
  .diary-screen.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Fixed navigation is laid out independently from the page content. */
  .sidebar {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    align-items: center !important;
    column-gap: 6px !important;
    overflow: hidden !important;
  }

  .sidebar-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .sidebar-nav .nav-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .sidebar-footer {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sidebar-footer .add-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 !important;
  }
}

/* v-next: per-page themes and priority habits */
.profile-page-theme-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-theme-field { display: flex; flex-direction: column; gap: 7px; }
.profile-theme-field > span { font-size: 12px; color: var(--muted); font-weight: 700; }
.profile-theme-field .form-select { width: 100%; }
.priority-form-group { border-top: 1px solid var(--border); padding-top: 16px; }
.priority-toggle-row { justify-content: space-between; }
.priority-value-wrap { align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.priority-input-wrap { display: flex; align-items: center; gap: 8px; width: 116px; }
.priority-input-wrap .form-input { width: 84px; text-align: center; }
.priority-input-wrap > span { font-weight: 800; color: var(--muted); }
.priority-stats-block { margin-bottom: 16px; padding: 16px; border: 1px solid rgba(213,181,110,.28); border-radius: 20px; background: linear-gradient(145deg, rgba(213,181,110,.10), rgba(255,255,255,.02)); }
.priority-stats-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.priority-stats-head h3 { margin:0; font-size:16px; }
.priority-stats-head > span { min-width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:rgba(213,181,110,.16); font-size:12px; font-weight:800; }
.priority-stats-list { display:flex; flex-direction:column; gap:8px; }
.priority-stats-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:15px; background:var(--card); border:1px solid var(--border); }
.priority-stats-main { display:flex; align-items:center; gap:10px; min-width:0; }
.priority-stats-icon { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--habit-color) 18%, transparent); }
.priority-stats-main div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.priority-stats-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.priority-stats-main small { color:var(--muted); font-size:11px; }
.priority-weight { flex:0 0 auto; padding:6px 9px; border-radius:999px; color:var(--habit-color); background:color-mix(in srgb, var(--habit-color) 14%, transparent); font-size:12px; font-weight:900; }
body.light-theme .priority-stats-block { background:linear-gradient(145deg, rgba(213,181,110,.14), rgba(255,255,255,.72)); }
@media (max-width: 620px) { .profile-page-theme-controls { grid-template-columns:1fr; } .priority-stats-block { padding:12px; } }


/* v117: priority persistence fix and visual marker */
.habit-card.priority-habit {
  border-color: #d5b56e !important;
  box-shadow: inset 0 0 0 1px rgba(213, 181, 110, .78), 0 0 0 1px rgba(213, 181, 110, .18);
}
.habit-card.priority-habit.completed {
  border-color: #d5b56e !important;
}

/* v118: compact priority statistics block */
.priority-stats-block {
  margin-bottom: 14px;
  padding: 10px;
  border-color: #d5b56e !important;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(213, 181, 110, .78), 0 0 0 1px rgba(213, 181, 110, .18);
}
.priority-stats-head { margin-bottom: 8px; }
.priority-stats-head h3 { font-size: 12px; line-height: 1.2; }
.priority-stats-head > span {
  min-width: 22px;
  height: 22px;
  font-size: 10px;
}
.priority-stats-list { gap: 6px; }
.priority-stats-item {
  gap: 8px;
  padding: 7px 9px;
  border-radius: 13px;
}
.priority-stats-main { gap: 7px; }
.priority-stats-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 9px;
  font-size: 14px;
}
.priority-stats-main div { gap: 2px; }
.priority-stats-main strong { font-size: 11px; }
.priority-stats-main small { font-size: 9px; }
.priority-weight {
  padding: 4px 7px;
  font-size: 10px;
}
@media (max-width: 620px) {
  .priority-stats-block { padding: 9px; }
}


/* v119: priority stats inline priority and completion badge */
.priority-stats-main {
  flex: 1 1 auto;
  min-width: 0;
}
.priority-stats-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.priority-stats-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.priority-stats-title-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.priority-inline-weight {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--habit-color);
  white-space: nowrap;
}
.priority-stats-text small {
  color: var(--muted);
  font-size: 9px;
}
.priority-weight {
  min-width: 44px;
  text-align: center;
}


/* v120: refined priority statistics hierarchy */
.priority-stats-block {
  margin-bottom: 12px;
  padding: 8px;
}
.priority-stats-head {
  margin-bottom: 6px;
  padding: 0 2px;
}
.priority-stats-head h3 {
  font-size: 11px;
}
.priority-stats-head > span {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.priority-stats-list {
  gap: 5px;
}
.priority-stats-item {
  gap: 7px;
  padding: 6px 8px;
  border-radius: 12px;
}
.priority-stats-main {
  gap: 6px;
}
.priority-stats-icon {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 8px;
  font-size: 13px;
}
.priority-stats-title-row {
  gap: 5px;
}
.priority-inline-weight {
  order: -1;
  color: #d5b56e;
  font-size: 10px;
  font-weight: 900;
}
.priority-stats-title-row strong {
  font-size: 10px;
}
.priority-stats-text small {
  font-size: 8px;
}
.priority-completion {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
body.light-theme .priority-completion {
  background: rgba(0,0,0,.035);
}
@media (max-width: 620px) {
  .priority-stats-block { padding: 8px; }
}


/* v121: aligned priority values, readable completion and average */
.priority-stats-block {
  padding: 10px;
}
.priority-stats-head {
  margin-bottom: 8px;
  padding: 0 3px;
}
.priority-stats-head h3 {
  font-size: 12px;
}
.priority-stats-head > span {
  color: #d5b56e;
  font-size: 10px;
  font-weight: 800;
}
.priority-stats-list {
  gap: 6px;
}
.priority-stats-item {
  min-height: 58px;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 13px;
}
.priority-stats-main {
  gap: 8px;
}
.priority-stats-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 14px;
}
.priority-stats-text {
  flex: 1 1 auto;
  min-width: 0;
}
.priority-stats-title-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
}
.priority-inline-weight {
  order: 0;
  flex: 0 0 42px;
  width: 42px;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
}
.priority-stats-title-row strong {
  flex: 1 1 auto;
  font-size: 11px;
}
.priority-stats-text small {
  font-size: 9px;
}
.priority-completion {
  min-width: 84px;
  padding: 5px 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--text);
  font-size: 9px;
  line-height: 1;
}
.priority-completion b {
  color: #d5b56e;
  font-size: 11px;
  font-weight: 900;
}
.priority-completion em {
  color: var(--muted);
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
}
@media (max-width: 420px) {
  .priority-inline-weight {
    flex-basis: 40px;
    width: 40px;
  }
  .priority-completion {
    min-width: 80px;
    padding-inline: 7px;
  }
}


/* v120: statistics list mode tabs */
.stats-list-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}
.stats-list-tab {
  width: 100%;
  min-width: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.stats-list-tab.active {
  color: #17130b;
  background: linear-gradient(135deg, #f4d98f, #d5b56e);
  box-shadow: 0 8px 20px rgba(213,181,110,.18), inset 0 1px 0 rgba(255,255,255,.45);
}
body.light-theme .stats-list-tabs {
  background: rgba(255,255,255,.72);
}