/* ===== WIDGET STYLES - Solara ===== */

/* ===== TOPBAR DROPDOWN =====
   Shared pattern for every popup that opens directly below a top-bar
   button (or a right-side widget header). Calendar, World Clocks,
   Stats, Sound, Bookmarks, Links, Countdown, Habits, Language and
   Weather all inherit from this. No backdrop — the popup just floats
   above the page with a blurred translucent panel. JS positions the
   popup via Utils.positionDropdownBelow() so it always anchors to
   its trigger button and never spills off the viewport.

   Visibility animation: opacity + translateY only, no "all" shorthand
   (shorthand would retrigger on any live-updating text node inside the
   popup and cause per-second flicker for tickers like World Clocks). */
.topbar-dropdown {
  position: fixed;
  top: 60px;
  left: 50px;
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: var(--shadow-lg);
  contain: layout paint;
  will-change: opacity, transform;
}
.topbar-dropdown.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.topbar-dropdown.hidden {
  display: none;
}
/* Hide native scrollbars inside topbar dropdowns — content scrolls
   freely but the scrollbar itself stays out of the blur panel. */
.topbar-dropdown::-webkit-scrollbar {
  width: 6px;
}
.topbar-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.topbar-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

/* Header row used by most dropdowns: title on the left, icon-only
   action buttons on the right (close, add, etc). */
.topbar-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.topbar-dropdown-title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-dropdown-actions {
  display: flex;
  gap: 4px;
}

/* Inline form rendered inside a topbar-dropdown (Links, Countdown,
   Habits add-new inputs). Compact, no backdrop, no separate modal —
   fields stack vertically inside the dropdown body. Toggled via the
   `.hidden` class from JS. */
.inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.inline-form.hidden { display: none; }
.inline-form-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inline-form-input:focus {
  border-color: var(--accent);
  background: var(--hover-bg);
}
.inline-form-input::placeholder {
  color: var(--text-muted);
}
.inline-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 7px;
}

/* Countdown list rows inside the dropdown popup. */
.cd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s ease;
}
.cd-list-row:hover { background: var(--hover-bg); }
.cd-list-row.is-expired { opacity: 0.55; }
.cd-list-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cd-list-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-list-time {
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cd-list-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.12s ease, background 0.12s ease;
  flex-shrink: 0;
}
.cd-list-delete:hover {
  opacity: 1;
  background: var(--danger-soft);
}

/* Edit button — same visual grammar as delete but accent-coloured.
   Sits left of delete so the destructive action stays on the far
   right, matching the rest of the UI. */
.cd-list-edit {
  background: none;
  border: none;
  color: var(--text-secondary, var(--text-primary));
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
  flex-shrink: 0;
}
.cd-list-edit:hover {
  opacity: 1;
  color: var(--accent);
  background: rgba(255,255,255,0.06);
}
/* Row being edited — highlight source so the user sees what the
   inline form is editing. */
.cd-list-row.is-editing {
  background: rgba(249, 115, 22, 0.12);
  border-color: var(--accent);
}

/* Motivation section inside the countdown popup — visually distinct
   "single big goal" editor at the top of the dropdown, separated
   from the event list by a thin divider. Kept narrow so it doesn't
   dominate the popup. */
.cd-motivation-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cd-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.85;
  margin: 2px 0 2px 0;
}
.cd-events-title {
  margin-top: 4px;
}
.cd-section-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0 6px 0;
}

/* Inline row-edit layout. When the user presses ✎ on a countdown
   row, renderEditRow() replaces the row with this form. Vertical
   stacking matches the popup's narrow width; the actions row
   (İptal / Güncelle) right-aligns so Güncelle stays the visual
   primary action. */
.cd-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.cd-edit-form .inline-form-input {
  width: 100%;
}
.cd-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}
/* Editing row gets an accent border + tinted background so the
   source of the edit is obvious. */
.cd-list-row.is-editing {
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.10);
  padding: 10px;
}

/* ===== CLOCK ===== */
#clock-widget {
  text-align: center;
}

.clock-time {
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  /* Tabular (monospaced) numerals so digits don't shift horizontally
     when the minute ticks over — otherwise Inter's proportional 1s and
     0s nudge the whole line left/right every second. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-shadow:
    0 0 20px rgba(255,255,255,0.3),
    0 0 60px rgba(255,255,255,0.1),
    0 4px 30px rgba(0,0,0,0.5);
}

/* The right-hand column next to the main time holds the seconds digits
   on top (superscripted) and the AM/PM label immediately under them.
   Using position: relative on the wrapper and position: absolute on
   the period label means the period never pushes layout sideways —
   it's pinned right below its own seconds digits regardless of how
   wide the AM/PM abbreviation is. */
.clock-right {
  display: inline-block;
  position: relative;
  vertical-align: super;
  margin-left: 4px;
  line-height: 1;
  white-space: nowrap;
}
.clock-right .clock-seconds {
  font-size: clamp(24px, 4vw, 50px);
  font-weight: 600;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
}
.clock-right .clock-period {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 700;
  opacity: 0.55;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
  /* If no seconds are shown (.clock-right has only .clock-period),
     the absolute label still hangs off the top: 100% edge of the
     otherwise zero-height wrapper. Fallback below fixes that case. */
}
/* When seconds are disabled, .clock-right still exists but contains
   only the period. Flip the period back to static rendering so it sits
   inline with the main time at the baseline. */
.clock-right:not(:has(.clock-seconds)) .clock-period {
  position: static;
  margin-top: 0;
  font-size: clamp(14px, 1.8vw, 22px);
  vertical-align: baseline;
  margin-left: 6px;
}

.clock-date {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 500;
  opacity: 0.8;
  margin-top: 8px;
  letter-spacing: 1px;
  text-shadow:
    0 0 10px rgba(255,255,255,0.2),
    0 2px 12px rgba(0,0,0,0.5);
}

/* ===== WORKDAY PROGRESS ===== */
.workday-progress {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.workday-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.workday-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 1s ease;
  box-shadow: 0 0 8px var(--accent);
}

.workday-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
}

/* ===== GREETING ===== */
#greeting-widget {
  text-align: center;
}

.greeting-text {
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow:
    0 0 15px rgba(255,255,255,0.25),
    0 0 50px rgba(255,255,255,0.08),
    0 3px 20px rgba(0,0,0,0.5);
}

/* ===== FOCUS ===== */
#focus-widget {
  text-align: center;
  width: 100%;
  max-width: 560px;
}

.focus-question {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 500;
  margin-bottom: 16px;
  text-shadow:
    0 0 10px rgba(255,255,255,0.15),
    0 2px 12px rgba(0,0,0,0.5);
}

.focus-input {
  width: 100%;
  max-width: 500px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  color: var(--text-primary);
  font-family: inherit;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
  text-align: center;
  padding: 10px 4px;
  outline: none;
  transition: border-color 0.3s ease;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.focus-input:focus {
  border-bottom-color: var(--accent);
}

.focus-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.focus-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.focus-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.focus-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.focus-load-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.focus-pull-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  opacity: 0.8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.focus-pull-btn:hover {
  opacity: 1;
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.focus-goal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.focus-goal-display {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  text-shadow:
    0 0 10px rgba(255,255,255,0.15),
    0 2px 12px rgba(0,0,0,0.5);
}

.focus-goal-check {
  color: var(--success);
  margin-right: 8px;
}

.focus-goal-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.focus-goal-container:hover .focus-goal-actions {
  opacity: 1;
}

.focus-action-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: inherit;
  transition: all 0.15s ease;
  opacity: 0.7;
}

.focus-action-btn:hover {
  opacity: 1;
  background: var(--hover-bg);
}

.focus-complete-btn {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  opacity: 0.9 !important;
}

.focus-complete-btn:hover {
  background: var(--accent) !important;
  color: white !important;
}

.focus-next-btn {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  opacity: 1 !important;
}

.focus-next-btn:hover {
  background: var(--accent) !important;
  color: white !important;
}

/* Task picker dropdown */
.focus-task-picker {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.focus-task-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s ease;
}

.focus-task-option:hover {
  background: var(--hover-bg);
}

/* ===== WEATHER ===== */
#weather-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

#weather-widget:hover {
  background: var(--bg-glass);
}

.weather-icon {
  font-size: 22px;
}

.weather-temp {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.weather-location {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}

.weather-detail-popup {
  position: fixed;
  top: 60px;
  right: 80px;
  width: 300px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
}

.weather-detail-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.weather-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.weather-detail-row:last-child {
  border-bottom: none;
}

.weather-forecast {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.weather-forecast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  font-size: 12px;
  font-weight: 500;
}

/* ===== QUOTE ===== */
#quote-widget {
  max-width: 700px;
}

.quote-text {
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 500;
  font-style: italic;
  opacity: 0.85;
  line-height: 1.6;
  text-shadow:
    0 0 10px rgba(255,255,255,0.1),
    0 2px 12px rgba(0,0,0,0.6);
}

.quote-author {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ===== PRAYER TIMES ===== */
#prayer-widget {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

#prayer-widget:hover {
  background: var(--bg-glass);
}

.prayer-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.prayer-compact.kerahat-active {
  color: var(--warning);
}

.prayer-icon {
  font-size: 16px;
}

.prayer-info {
  display: flex;
  flex-direction: column;
}

.prayer-next-name {
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.prayer-remaining {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.kerahat-dot {
  font-size: 14px;
  animation: pulse 2s ease infinite;
}

/* ===== HICRI (ISLAMIC CALENDAR + MOON PHASE) WIDGET ===== */
#hicri-widget {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background 0.2s ease;
}
#hicri-widget:hover { background: var(--bg-glass); }
#hicri-widget.hidden { display: none; }

.hicri-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
/* Two-layer moon background matching namazvakti.com: the phase image (N.png)
   is painted on top of the base Moon.png outline so the lit crescent sits
   over the full-moon silhouette exactly like their own markup. */
.hicri-moon {
  width: 28px;
  height: 28px;
  background-size: contain, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
  flex-shrink: 0;
}
.hicri-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hicri-date {
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hicri-label {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
}

.hicri-detail-popup {
  position: fixed;
  top: 60px;
  right: 160px;
  width: 300px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 0 18px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.hicri-detail-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.hicri-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  font-size: 14px;
}
.hicri-detail-body {
  padding: 0 16px;
}
.hicri-detail-moon {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-size: contain, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: drop-shadow(0 4px 16px rgba(255,255,255,0.15));
}
.hicri-detail-date {
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
}
.hicri-detail-day {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
}
.hicri-detail-gregorian {
  font-size: 11px;
  opacity: 0.5;
  margin-top: 6px;
}
.hicri-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.hicri-info-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ===== QIBLA COMPASS MODAL (namazvakti.com-inspired, 2-column) ===== */
.qibla-modal-content {
  max-width: 680px;
  width: 96vw;
  text-align: left;
}
.qibla-modal-content .panel-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.qibla-modal-content .panel-header h3 {
  flex: 1;
  margin: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
}
.qibla-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.qibla-info-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.qibla-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 18px 16px 22px;
}
@media (max-width: 640px) {
  .qibla-body { grid-template-columns: 1fr; }
}
.qibla-left,
.qibla-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.qibla-compass-wrap {
  display: flex;
  justify-content: center;
}
.qibla-compass-svg {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}
.qibla-angles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qibla-angle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
}
.qibla-angle-row.subtle {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.05);
  padding: 8px 12px;
  font-size: 11px;
}
.qibla-angle-label {
  color: #e5e7eb;
  font-weight: 500;
  line-height: 1.3;
}
.qibla-angle-row.subtle .qibla-angle-label {
  color: #c0c5cf;
}
.qibla-angle-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 17px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.qibla-angle-row.subtle .qibla-angle-value {
  font-size: 14px;
  color: #f59e0b;
}
.qibla-angle-geo {
  color: #10d9c4;    /* brighter than compass green so it pops on dark bg */
}
.qibla-angle-compass {
  color: #ff6b6b;    /* matches the red compass needle */
}
.qibla-city {
  font-size: 12px;
  font-weight: 600;
  color: #e5e7eb;
  text-align: center;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.qibla-coords {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #d1d5db;
  text-align: center;
}
.qibla-map-caption {
  font-size: 11px;
  color: #c0c5cf;
  text-align: center;
  line-height: 1.4;
}
.qibla-map {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #1a1a1a;
}
.qibla-map .leaflet-container {
  background: #1a1a1a;
  font-family: inherit;
}

/* Fullscreen mode: the whole map wrap (map + controls + hint) is portaled
   out of the compass modal and into document.body. The modal uses
   backdrop-filter which creates a stacking context, so a nested fixed child
   would be trapped inside the rounded modal borders — portaling to body
   dodges that entirely. */
.qibla-map-wrap.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  margin: 0;
  padding: 0;
}
.qibla-map-wrap.fullscreen .qibla-map,
.qibla-map.fullscreen {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  border: none;
}

/* Map overlay control stack: GPS button on top, fullscreen below. */
.qibla-map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qibla-map-ctrl-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 36, 0.92);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, transform 0.1s ease;
}
.qibla-map-ctrl-btn:hover {
  background: rgba(51, 56, 68, 0.98);
}
.qibla-map-ctrl-btn:active {
  transform: scale(0.94);
}
.qibla-gps-btn.loading {
  pointer-events: none;
  color: transparent;
  position: relative;
}
.qibla-gps-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #10d9c4;
  border-radius: 50%;
  animation: qibla-spin 0.7s linear infinite;
}
@keyframes qibla-spin {
  to { transform: rotate(360deg); }
}

/* Drag hint overlay: small caption floating at the bottom-center of the
   map, nudging the user to drag the pin or use the GPS button. */
.qibla-drag-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(26, 29, 36, 0.85);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.qibla-map-wrap {
  position: relative;
}

.prayer-detail-popup {
  position: fixed;
  top: 60px;
  right: 160px;
  width: 360px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
}

.prayer-detail-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.prayer-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 14px;
}

.prayer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  transition: background 0.1s ease;
}

.prayer-row:hover {
  background: var(--hover-bg);
}

.prayer-row-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
}

/* Fixed-width name column so İmsak / Güneş / Öğle / İkindi / Akşam / Yatsı —
   all of different character lengths — take the same horizontal space. This
   keeps the time and remaining columns anchored at identical positions across
   every row. margin-left:auto on the remaining element pushes the right
   cluster (remaining + time + check) flush to the right edge. */
.prayer-row-name {
  flex: 0 0 auto;
  min-width: 72px;
  font-weight: 500;
}

.prayer-row-time {
  font-weight: 700;
  font-family: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.2px;
  min-width: 54px;
  text-align: right;
  flex-shrink: 0;
}

/* Fixed-width countdown column so the text that updates every second never
   pushes the time column sideways. tabular-nums keeps each digit the same
   width, and min-width reserves space for the longest possible form
   ("23s 59dk 59sn"). Rendered for every row (empty for non-next rows) so
   the time column stays perfectly aligned across the whole table. */
.prayer-row-remaining {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-family: inherit;
  min-width: 86px;
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
}

.prayer-current {
  opacity: 0.5;
}

.prayer-next {
  background: var(--accent-soft);
  border-radius: 8px;
}

.prayer-kerahat-section {
  margin-top: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}

.prayer-kerahat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 4px;
}

.prayer-kerahat-item {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
  opacity: 0.8;
}

/* ===== PHOTO LOCATION ===== */
#photo-location {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ===== TODO ===== */
.todo-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
  cursor: default;
}

.todo-item:hover {
  background: var(--hover-bg);
}

.todo-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.todo-checkbox:hover {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

.todo-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.todo-checkbox.checked::after {
  content: '';
  width: 6px;
  height: 10px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.todo-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.todo-text.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

.todo-settings-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.todo-item:hover .todo-settings-btn {
  opacity: 0.5;
}

.todo-settings-btn:hover {
  opacity: 1 !important;
  color: var(--accent);
}

.todo-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.todo-item:hover .todo-delete {
  opacity: 0.6;
}

.todo-delete:hover {
  opacity: 1 !important;
}

/* Task text + optional description wrapped in a content column so
   the description sits below the title without breaking the flex
   row layout of checkbox + text + badges + buttons. */
.todo-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.todo-desc {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-desc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  resize: vertical;
  min-height: 36px;
  margin-top: 4px;
}
.todo-edit-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary, var(--text-primary));
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.5;
  flex-shrink: 0;
}
.todo-item:hover .todo-edit-btn { display: inline-flex; }
.todo-edit-btn:hover { opacity: 1; color: var(--accent); }
.todo-item.is-editing {
  background: rgba(249, 115, 22, 0.10);
  border-color: var(--accent);
}
.todo-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  flex-shrink: 0;
}
.todo-cancel-btn:hover { border-color: var(--accent); }

.todo-priority {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.todo-priority.high { background: var(--danger); }
.todo-priority.medium { background: var(--warning); }
.todo-priority.low { background: var(--success); }

.todo-add {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.add-task-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 8px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.add-task-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.todo-add-options {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.todo-date-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  flex: 1;
}

.todo-date-input:focus,
.todo-time-input:focus {
  border-color: var(--accent);
}

.todo-time-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  width: 90px;
}

.todo-allday-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  white-space: nowrap;
  color: var(--text-secondary);
}

.todo-allday-toggle:has(input:checked) {
  opacity: 1;
  color: var(--accent);
}

.todo-allday-toggle input {
  display: none;
}

.todo-recur-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.todo-recur-toggle:has(input:checked) {
  opacity: 1;
}

.todo-recur-toggle input {
  display: none;
}

.todo-submit-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.15s;
}

.todo-submit-btn:hover {
  transform: scale(1.1);
}

.todo-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.2s ease;
}

.todo-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.todo-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s ease;
}

.todo-menu-item:hover {
  background: var(--hover-bg);
}

#todo-list-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  outline: none;
  cursor: pointer;
}

/* Task enhancements */
.task-due-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
  flex-shrink: 0;
}

.task-recur-badge {
  font-size: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}

.task-context-menu {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ===== POMODORO ===== */
#pomodoro-widget {
  text-align: center;
  /* No max-height / overflow: the parent #main-content is a centered flex
     column that already clips. A hover-triggered scrollbar was appearing
     here because the 300px ring + controls could slightly exceed our old
     max-height on short viewports. Responsive clamps below keep the
     widget inside the available space between greeting and bottom bar. */
}

/* Pomodoro landscape layout: ring left, controls right */
.pomodoro-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.pomodoro-left {
  flex-shrink: 0;
}

.pomodoro-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pomodoro-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pomodoro-tabs {
  display: flex;
  gap: 8px;
}

.pomodoro-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 16px;
  border-radius: 16px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.pomodoro-tab.active {
  color: var(--text-primary);
  background: var(--bg-glass);
}

.pomodoro-ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
}

.pomodoro-ring {
  width: 100%;
  height: 100%;
}

.pomodoro-ring-progress {
  transition: stroke-dashoffset 1s linear;
}

.pomodoro-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1px;
  /* Fixed-width digits so the countdown doesn't wiggle horizontally
     every second as different-width glyphs swap in. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-shadow: 0 0 15px rgba(255,255,255,0.3), 0 3px 15px rgba(0,0,0,0.5);
}

.pomodoro-focus-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.pomodoro-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.pomodoro-play-btn:hover {
  opacity: 1;
  transform: scale(1.15);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.3));
}

.pomodoro-skip-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.pomodoro-skip-btn:hover {
  color: var(--text-primary);
  background: var(--bg-glass);
}

/* ===== SEARCH ===== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.search-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.search-container {
  display: flex;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 28px;
  width: 640px;
  max-width: 90vw;
  gap: 14px;
  box-shadow: var(--shadow-lg);
}

.search-engine-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  outline: none;
}

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

/* ===== STICKY NOTES (Simple Sticky Notes-inspired) =====
   Two separate surfaces:
   1. #sticky-notes-container — a pointer-events:none overlay that
      hosts floating note cards. Each card re-enables pointer events
      on itself so the rest of the dashboard stays clickable.
   2. #notes-panel — the management side panel (grid of all notes).

   The color palette lives as CSS custom properties on a color-theme
   class so each note can switch palettes without mutating its DOM. */
#sticky-notes-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* "Hide all notes" toggle: a single class on the container collapses
   every floating note at once. Pinned state is NOT affected — next
   toggle brings them back in their exact positions. */
#sticky-notes-container.sticky-hidden-all .sticky-note {
  display: none;
}

/* ===== LANGUAGE SWITCHER ===== */
.language-popup {
  position: fixed;
  width: 180px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 80vh;
  overflow-y: auto;
}
.language-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.language-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  transition: background 0.12s ease;
}
.language-item:hover { background: var(--hover-bg); }
.language-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.language-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}
.language-item.is-active .language-code {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.language-name {
  flex: 1;
}
.language-check {
  color: var(--accent);
  font-weight: 700;
}

#btn-language {
  gap: 4px;
  padding: 6px 10px;
}

/* Bottom-right visibility toggle button — two icons share the
   button, one for each state. The "show" icon is the default;
   when notes are hidden, the `notes-hidden` class on body swaps
   to the crossed-out variant. */
#btn-notes-vis .notes-vis-icon-hide { display: none; }
body.notes-hidden #btn-notes-vis .notes-vis-icon-show { display: none; }
body.notes-hidden #btn-notes-vis .notes-vis-icon-hide { display: inline-block; }
body.notes-hidden #btn-notes-vis { opacity: 0.6; }

.sticky-note {
  --note-bg:        #fff3a8;
  --note-bg-accent: #ffeb80;
  --note-border:    #e6c700;
  --note-text:      #3a3200;
  --note-header-bg: rgba(0, 0, 0, 0.08);
  --note-shadow:    0 8px 24px rgba(0, 0, 0, 0.28),
                    0 2px 6px  rgba(0, 0, 0, 0.18),
                    0 0 0 1px rgba(0, 0, 0, 0.08);

  position: absolute;
  width: 240px;
  min-width: 160px;
  min-height: 120px;
  max-width: 700px;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  pointer-events: all;
  background: var(--note-bg);
  color: var(--note-text);
  border-radius: 6px;
  box-shadow: var(--note-shadow);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sticky-note:focus-within {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35),
              0 4px 12px rgba(0, 0, 0, 0.22),
              0 0 0 2px rgba(255, 255, 255, 0.4);
}
.sticky-note.sticky-collapsed {
  height: auto !important;
  min-height: 0;
}
.sticky-note.sticky-collapsed .sticky-body,
.sticky-note.sticky-collapsed .sticky-toolbar,
.sticky-note.sticky-collapsed .sticky-resize {
  display: none;
}

/* Color palette: each variant overrides the CSS variables at the top
   of .sticky-note. The same classes are used on panel cards to keep
   the grid color-coded. */
.sticky-color-yellow {
  --note-bg: #fff3a8; --note-bg-accent: #ffeb80;
  --note-border: #e6c700; --note-text: #3a3200;
  --note-header-bg: rgba(90, 70, 0, 0.12);
}
.sticky-color-pink {
  --note-bg: #ffd1dc; --note-bg-accent: #ffb3c6;
  --note-border: #e6859a; --note-text: #4a1422;
  --note-header-bg: rgba(120, 20, 40, 0.12);
}
.sticky-color-blue {
  --note-bg: #c9e7ff; --note-bg-accent: #a8d5ff;
  --note-border: #5ea8e5; --note-text: #10344f;
  --note-header-bg: rgba(10, 60, 100, 0.12);
}
.sticky-color-green {
  --note-bg: #c8f0c4; --note-bg-accent: #a7e2a2;
  --note-border: #5cb056; --note-text: #123c0f;
  --note-header-bg: rgba(10, 70, 20, 0.12);
}
.sticky-color-orange {
  --note-bg: #ffd4a3; --note-bg-accent: #ffb774;
  --note-border: #e88432; --note-text: #4a2100;
  --note-header-bg: rgba(130, 50, 0, 0.12);
}
.sticky-color-purple {
  --note-bg: #e0cafb; --note-bg-accent: #c9aaf5;
  --note-border: #9872d6; --note-text: #2b0f4e;
  --note-header-bg: rgba(60, 20, 100, 0.12);
}
.sticky-color-white {
  --note-bg: #fafafa; --note-bg-accent: #e8e8e8;
  --note-border: #b0b0b0; --note-text: #1f1f1f;
  --note-header-bg: rgba(0, 0, 0, 0.08);
}

.sticky-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  background: var(--note-header-bg);
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sticky-header:active { cursor: grabbing; }

.sticky-title {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--note-text);
  padding: 2px 4px;
  min-width: 0;
  /* Default: title is a drag handle, not an input. Clicks pass
     through to the header element beneath so drag starts correctly.
     Double-clicking the header adds the `editing` class which
     re-enables input interaction and text selection. */
  pointer-events: none;
  user-select: none;
  cursor: grab;
  caret-color: transparent;
}
.sticky-title.editing {
  pointer-events: auto;
  user-select: text;
  cursor: text;
  caret-color: var(--note-text);
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}
.sticky-title::placeholder { color: rgba(0, 0, 0, 0.35); }

.sticky-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.sticky-btn {
  background: none;
  border: none;
  color: var(--note-text);
  opacity: 0.55;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.sticky-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.sticky-close-btn:hover { background: rgba(231, 76, 60, 0.25); }

.sticky-body {
  flex: 1;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--note-text);
  outline: none;
  overflow-y: auto;
  word-wrap: break-word;
}
.sticky-body:empty::before {
  content: attr(data-placeholder);
  opacity: 0.4;
}
.sticky-body ul { margin: 4px 0 4px 18px; }
.sticky-body p { margin: 0 0 4px 0; }

.sticky-toolbar {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--note-header-bg);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.sticky-note:not(.sticky-collapsed):focus-within .sticky-toolbar { display: flex; }

.sticky-fmt {
  background: none;
  border: none;
  color: var(--note-text);
  opacity: 0.65;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.sticky-fmt:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.sticky-fmt-spacer { flex: 1; }

.sticky-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg,
      transparent 0%, transparent 50%,
      rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25) 60%,
      transparent 60%, transparent 70%,
      rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.25) 80%,
      transparent 80%, transparent 90%,
      rgba(0,0,0,0.25) 90%);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.sticky-note:hover .sticky-resize { opacity: 0.85; }

/* ===== STICKY CONTEXT MENU ===== */
.sticky-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  padding: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: sticky-menu-in 0.15s ease-out;
}
@keyframes sticky-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.sticky-menu-section {
  padding: 4px 6px;
}
.sticky-menu-colors {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  padding: 8px 6px;
}
.sticky-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  background: var(--note-bg);
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.sticky-color-swatch:hover { transform: scale(1.15); }
.sticky-color-swatch.is-active {
  border-color: var(--accent);
  transform: scale(1.1);
}
.sticky-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}
.sticky-menu-item:hover { background: var(--hover-bg); }
.sticky-menu-danger { color: var(--danger); }
.sticky-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ===== NOTES PANEL (management grid) ===== */
.notes-panel-toolbar {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.notes-panel-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.notes-panel-search:focus { border-color: var(--accent); }

.notes-panel-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 20px;
  display: grid;
  /* At the 320 px side-panel width the available space is ~288 px, so
     auto-fill resolves to a single column. On wider panels the grid
     reflows automatically. 160 px minimum so cards don't squish. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  align-content: start;
}
.notes-panel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  max-height: 200px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--note-bg);
  color: var(--note-text);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.notes-panel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.notes-panel-card-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notes-panel-card-preview {
  flex: 1;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.75;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
.notes-panel-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}
.notes-panel-card-date {
  font-size: 10px;
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
}
.notes-panel-card-actions {
  display: flex;
  gap: 2px;
}
.notes-panel-card-actions .icon-btn-sm {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  color: var(--note-text);
  opacity: 0.7;
}
.notes-panel-card-actions .icon-btn-sm:hover { opacity: 1; background: rgba(0, 0, 0, 0.12); }

.notes-panel-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  opacity: 0.6;
}
.notes-panel-empty-icon { font-size: 48px; margin-bottom: 12px; }
.notes-panel-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.notes-panel-empty-sub { font-size: 12px; opacity: 0.7; }

/* ===== SOUND MIXER ===== */
.sound-mixer {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sound-master {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.sound-master-mute {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.sound-master-mute:hover {
  opacity: 0.7;
}

.sound-master-slider {
  flex: 1;
}

.sound-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sound-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.sound-info {
  flex: 1;
}

.sound-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sound-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--slider-track);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.sound-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb);
  cursor: pointer;
  transition: transform 0.15s ease;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

.sound-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.sound-slider.active::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* Ambient Video Links */
.ambient-videos {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ambient-video-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.ambient-video-link:hover {
  background: var(--hover-bg);
}

.ambient-video-link svg {
  opacity: 0.4;
  margin-left: auto;
}

/* ===== CUSTOM SOUNDS / FREESOUND ===== */
.custom-sounds-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.custom-sounds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.custom-sounds-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.5;
}

#custom-sounds-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#custom-sounds-list:not(:empty) {
  margin-bottom: 10px;
}

.cs-delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 10px;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 4px;
}

.custom-sound-item:hover .cs-delete-btn {
  opacity: 0.7;
}

.cs-delete-btn:hover {
  opacity: 1 !important;
}

.freesound-search-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.freesound-search-row .inline-form-input {
  flex: 1;
  font-size: 12px;
}

.freesound-results {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fs-loading {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  opacity: 0.5;
}

.fs-result {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.fs-result:hover {
  background: var(--hover-bg);
}

.fs-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs-result-info {
  flex: 1;
  min-width: 0;
}

.fs-result-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.fs-result-meta {
  font-size: 10px;
  opacity: 0.5;
}

.fs-result-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.fs-preview-btn,
.fs-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

.fs-preview-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.fs-preview-btn:hover {
  background: var(--hover-bg);
  transform: scale(1.1);
}

.fs-preview-btn.playing {
  background: var(--accent);
  color: white;
  animation: fs-pulse 1.2s ease-in-out infinite;
}

@keyframes fs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent); }
  50% { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3); }
}

.fs-add-btn {
  background: var(--accent);
  color: white;
  font-size: 16px;
  font-weight: 700;
}

.fs-add-btn:hover:not(.added) {
  transform: scale(1.1);
}

.fs-add-btn.added {
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: default;
  font-size: 12px;
}

.fs-player {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}

.fs-player-time,
.fs-player-duration {
  font-size: 9px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

.fs-player-duration {
  text-align: right;
}

.fs-player-bar {
  flex: 1;
  height: 4px;
  background: var(--slider-track, rgba(255,255,255,0.15));
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fs-player-progress {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  transition: width 0.1s linear;
}

.fs-player-vol {
  width: 50px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--slider-track, rgba(255,255,255,0.15));
  border-radius: 2px;
  outline: none;
  flex-shrink: 0;
}

.fs-player-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.freesound-no-key {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.5;
}

/* ===== HELP MODAL ===== */
.help-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.help-toggle-btn:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.5);
}

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: helpFadeIn 0.2s ease;
}

@keyframes helpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.help-modal {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 600px;
  max-width: 92vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.help-header h2 {
  font-size: 18px;
  font-weight: 700;
}

.help-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.help-section {
  margin-bottom: 24px;
}

.help-section h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.5;
  margin-bottom: 12px;
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.help-key {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}

.help-key kbd {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  min-width: 90px;
  text-align: center;
  white-space: nowrap;
}

.help-key span {
  font-size: 13px;
  opacity: 0.8;
}

.help-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.help-feat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.help-feat-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.help-feat strong {
  font-size: 13px;
  font-weight: 600;
}

.help-feat p {
  font-size: 11px;
  opacity: 0.5;
  line-height: 1.4;
  margin: 0;
}

.help-about {
  text-align: center;
  font-size: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-features { grid-template-columns: 1fr; }
  .help-modal { border-radius: 14px; }
}

/* (Old .notes-tabs / .notes-editor styles removed — the Notes widget
    now uses a grid of cards in .notes-panel-grid, see styles above.) */

/* ===== LINKS ===== */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 16px;
  padding: 20px;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  padding: 14px 8px;
  border-radius: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.link-item:hover {
  background: var(--hover-bg);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.link-favicon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.link-favicon img {
  width: 28px;
  height: 28px;
}

.link-name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-edit-btn {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: white;
  font-size: 10px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.link-delete-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  border: none;
  color: white;
  font-size: 11px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.link-item:hover .link-edit-btn,
.link-item:hover .link-delete-btn {
  display: flex;
}

/* ===== COUNTDOWN ===== */
.countdown-widget {
  position: fixed;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}

.countdown-item {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  min-width: 100px;
  position: relative;
}

.countdown-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--panel-bg);
  color: white;
  font-size: 9px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.countdown-item:hover .countdown-delete {
  display: flex;
}

.countdown-name {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.countdown-time {
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.countdown-negative {
  color: var(--danger, #ef4444);
}

.countdown-expired {
  opacity: 0.8;
}

/* ===== BREATHING ===== */
.breathing-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}

.breathing-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.breathing-container {
  text-align: center;
  position: relative;
  z-index: 1;
}

body.breathing-active #top-bar,
body.breathing-active #bottom-bar,
body.breathing-active #clock-widget,
body.breathing-active #greeting-widget,
body.breathing-active #focus-widget,
body.breathing-active #countdown-widget,
body.breathing-active .todo-panel,
body.breathing-active .notes-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}

/* Minimize + Stop controls at the top-right corner of the overlay.
   Matches the qibla modal's map-control button style so the UX feels
   consistent across the extension. */
.breathing-controls {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 10px;
  z-index: 10;
}
.breathing-ctrl-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: #f5f5f5;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.breathing-ctrl-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  transform: scale(1.06);
}
.breathing-ctrl-btn:active {
  transform: scale(0.94);
}

.breathing-circle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40px;
  background: rgba(255,255,255,0.03);
  position: relative;
  box-shadow: 0 0 30px var(--accent-soft);
}

.breathing-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.9) 0%, rgba(168,85,247,0.7) 50%, rgba(236,72,153,0.5) 100%);
  opacity: 0.5;
  box-shadow: 0 0 40px rgba(99,102,241,0.4), 0 0 80px rgba(168,85,247,0.2);
  transition: box-shadow 0.5s ease;
}

.breathing-inner.inhale,
.breathing-inner.hold {
  box-shadow: 0 0 60px rgba(99,102,241,0.6), 0 0 120px rgba(168,85,247,0.3);
}

.breathing-text {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 12px;
  min-height: 48px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  color: white;
}

.breathing-timer {
  font-size: 48px;
  font-weight: 200;
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===== SETTINGS ===== */
.settings-content {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-section {
  margin-bottom: 16px;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 4px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.info-icon:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.settings-section-title .info-icon {
  vertical-align: middle;
  margin-left: 6px;
}

.setting-description {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--checkbox-bg);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Settings Input */
.setting-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  width: 160px;
  outline: none;
  text-align: right;
}

.setting-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.setting-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}

/* Fix dropdown options in dark mode */
.setting-select option,
#todo-list-select option,
select option {
  background: #1a1a1a;
  color: #ffffff;
}

[data-theme="light"] .setting-select option,
[data-theme="light"] #todo-list-select option,
[data-theme="light"] select option {
  background: #ffffff;
  color: #1a1a1a;
}

.setting-range {
  width: 120px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--slider-track);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.setting-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 6px var(--accent-soft);
}

/* Settings Buttons */
.settings-btn-group {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.settings-export-btn,
.settings-import-btn,
.settings-reset-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-export-btn:hover,
.settings-import-btn:hover {
  background: var(--hover-bg);
}

.settings-reset-btn {
  border-color: var(--danger);
  color: var(--danger);
}

.settings-reset-btn:hover {
  background: var(--danger-soft);
}

/* ===== FOCUS TIMER DISPLAY ===== */
#focus-timer-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.8;
  padding: 8px 12px;
  border-radius: 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.focus-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

/* ===== HABITS WIDGET =====
   Rewritten from scratch: onboarding empty state, week-by-week nav,
   per-habit detail view with monthly grid, color-themed per-habit
   tinting. See js/widgets/habits.js for the logic. */
.habits-content {
  padding: 14px 18px 18px;
  overflow-y: auto;
}

/* ----- Empty state ----- */
.habits-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px 8px;
}
.habits-empty-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 10px;
}
.habits-empty-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.habits-empty-sub {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.75;
  max-width: 380px;
  margin-bottom: 18px;
}
.habits-empty-suggestions-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.55;
  margin-bottom: 8px;
}
.habits-empty-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 14px;
}
.habit-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.habit-suggestion:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.habit-suggestion-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.habit-suggestion-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.habits-empty-hint {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 4px;
}

/* ----- Week navigation bar ----- */
.habits-weeknav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 14px;
}
.habits-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.habits-nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}
.habits-weeknav-title {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  min-width: 220px;
  text-align: center;
}
.habits-today-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: all 0.15s ease;
}
.habits-today-btn:hover { filter: brightness(1.1); }

/* ----- Day header row (M T W T F S S + dates) ----- */
.habits-day-header {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(7, 1fr) 40px;
  gap: 4px;
  align-items: end;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}
.habits-day-head {
  text-align: center;
  padding: 4px 0;
  border-radius: 6px;
}
.habits-day-head.is-today {
  background: rgba(var(--accent-rgb, 249, 115, 22), 0.16);
}
.habits-day-head.is-future {
  opacity: 0.35;
}
.habits-day-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}
.habits-day-head.is-today .habits-day-label {
  opacity: 1;
  color: var(--accent);
}
.habits-day-num {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.habits-day-head.is-today .habits-day-num {
  color: var(--accent);
}

/* ----- Habit rows (week view) ----- */
.habits-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(7, 1fr) 40px;
  gap: 4px;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.habits-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.habits-name-col {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 6px;
}
.habits-name-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  min-width: 0;
  transition: background 0.15s ease;
}
.habits-name-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.habits-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.habits-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.habits-stats-col {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  opacity: 0.75;
}
.habits-streak {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ----- Habit cells (shared between week row + detail month grid) ----- */
.habits-cell {
  aspect-ratio: 1;
  min-height: 28px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.15s ease;
  position: relative;
}
.habits-cell:hover:not([disabled]) {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
}
.habits-cell.is-done {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.55);
  color: rgba(220, 255, 225, 1);
}
.habits-cell.is-done:hover:not([disabled]) {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.8);
}
.habits-cell.is-today {
  box-shadow: 0 0 0 2px var(--accent);
}
.habits-cell.is-future {
  opacity: 0.25;
  cursor: not-allowed;
}
.habits-cell.is-locked {
  opacity: 0.35;
  cursor: not-allowed;
}
.habits-cell[disabled] { pointer-events: none; }

/* ----- Color theme variants ----- */
.habit-color-blue   .habits-cell.is-done { background: rgba(59, 130, 246, 0.22); border-color: rgba(59, 130, 246, 0.55); color: rgba(220, 235, 255, 1); }
.habit-color-blue   .habits-cell.is-done:hover:not([disabled]) { background: rgba(59, 130, 246, 0.35); border-color: rgba(59, 130, 246, 0.8); }
.habit-color-purple .habits-cell.is-done { background: rgba(168, 85, 247, 0.22); border-color: rgba(168, 85, 247, 0.55); color: rgba(240, 225, 255, 1); }
.habit-color-purple .habits-cell.is-done:hover:not([disabled]) { background: rgba(168, 85, 247, 0.35); border-color: rgba(168, 85, 247, 0.8); }
.habit-color-orange .habits-cell.is-done { background: rgba(251, 146, 60, 0.22); border-color: rgba(251, 146, 60, 0.55); color: rgba(255, 235, 215, 1); }
.habit-color-orange .habits-cell.is-done:hover:not([disabled]) { background: rgba(251, 146, 60, 0.35); border-color: rgba(251, 146, 60, 0.8); }
.habit-color-teal   .habits-cell.is-done { background: rgba(20, 184, 166, 0.22); border-color: rgba(20, 184, 166, 0.55); color: rgba(220, 250, 245, 1); }
.habit-color-teal   .habits-cell.is-done:hover:not([disabled]) { background: rgba(20, 184, 166, 0.35); border-color: rgba(20, 184, 166, 0.8); }
.habit-color-indigo .habits-cell.is-done { background: rgba(99, 102, 241, 0.22); border-color: rgba(99, 102, 241, 0.55); color: rgba(225, 230, 255, 1); }
.habit-color-indigo .habits-cell.is-done:hover:not([disabled]) { background: rgba(99, 102, 241, 0.35); border-color: rgba(99, 102, 241, 0.8); }
.habit-color-green  .habits-cell.is-done { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.55); }

/* ----- Summary footer ----- */
.habits-summary {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.habits-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.habits-summary-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}
.habits-summary-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- Detail view (one habit, monthly grid) ----- */
.habits-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.habits-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.habits-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}
.habits-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.habits-icon-lg {
  font-size: 22px;
  line-height: 1;
}
.habits-delete-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgba(252, 165, 165, 1);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.habits-delete-btn:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fff;
}

.habits-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.habits-stat-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.habits-stat-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.habits-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.65;
}

.habits-detail-monthnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.habits-detail-monthtitle {
  font-size: 13px;
  font-weight: 600;
  min-width: 160px;
  text-align: center;
}

.habits-detail-daygrid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.habits-detail-dayhead {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.5;
}
.habits-detail-daygrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.habits-cell-blank {
  aspect-ratio: 1;
}
.habits-cell-big .habits-cell-num {
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 4px;
  left: 6px;
  opacity: 0.75;
}
.habits-cell-big .habits-cell-check {
  font-size: 18px;
}

/* ===== CALENDAR ===== */
.calendar-popup {
  position: fixed;
  top: 60px;
  right: 50px;
  width: 260px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
}

.calendar-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.cal-header {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

.cal-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
  margin-bottom: 6px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.cal-day {
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: default;
}

.cal-day.empty {
  visibility: hidden;
}

.cal-today {
  background: var(--accent);
  color: white;
  font-weight: 700;
  border-radius: 50%;
}

.cal-has-event {
  position: relative;
}

.cal-dots-row {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.cal-dots-row > span,
.cal-dot-islamic,
.cal-dot-holiday,
.cal-dot-task {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: block;
}

.cal-dot-islamic { background: #22c55e; }
.cal-dot-holiday { background: #3b82f6; }
.cal-dot-task { background: var(--accent, #f97316); }

/* ===== FULL CALENDAR MODAL ===== */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cal-modal-overlay.visible { opacity: 1; }

.cm-container {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 780px;
  max-width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm-nav-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cm-nav-btn:hover { background: var(--hover-bg); }

.cm-title {
  font-size: 16px;
  font-weight: 700;
  min-width: 160px;
  text-align: center;
}

.cm-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-today-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: none;
  color: var(--accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cm-today-btn:hover { background: var(--hover-bg); }

.cm-close-btn {
  width: 32px; height: 32px;
  border: none; background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-body {
  display: flex;
  overflow-y: auto;
  flex: 1;
}

.cm-calendar-side {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  min-width: 0;
}

.cm-detail-side {
  width: 280px;
  flex-shrink: 0;
  padding: 16px;
  overflow-y: auto;
}

.cm-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
  margin-bottom: 6px;
}

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

.cm-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  gap: 2px;
}
.cm-day:hover { background: var(--hover-bg); }
.cm-empty { cursor: default; }
.cm-empty:hover { background: none; }

.cm-day-num {
  font-size: 13px;
  font-weight: 500;
}

.cm-today .cm-day-num {
  background: var(--accent);
  color: white;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.cm-selected {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--accent);
}

.cm-dots {
  display: flex;
  gap: 2px;
  height: 5px;
}
.cm-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cm-dot-islamic { background: #22c55e; }
.cm-dot-holiday { background: #3b82f6; }
.cm-dot-task { background: var(--accent); }
.cm-dot-prayer-partial { background: #a855f7; }
.cm-dot-prayer-full { background: #6d28d9; }

.cm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cm-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  opacity: 0.6;
}

/* Detail side */
.cm-detail-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cm-detail-date strong { font-size: 16px; }
.cm-detail-hijri { font-size: 12px; opacity: 0.5; }

.cm-detail-section { margin-bottom: 14px; }
.cm-detail-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.5;
  margin-bottom: 6px;
}

.cm-detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 0;
}

.cm-evt-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cm-evt-islamic .cm-evt-dot { background: #22c55e; }
.cm-evt-holiday .cm-evt-dot { background: #3b82f6; }

.cm-task-item { opacity: 0.9; }
.cm-task-done { text-decoration: line-through; opacity: 0.4; }

.cm-add-task-btn {
  width: 100%;
  padding: 6px;
  margin-top: 6px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.cm-add-task-btn:hover { background: rgba(255,255,255,0.03); }

.cm-task-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cm-form-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  resize: none;
}

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

.cm-form-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-form-time {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

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

.cm-form-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.cm-form-cancel, .cm-form-save {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.cm-form-cancel {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}

.cm-form-save {
  background: var(--accent);
  color: white;
}

.cm-task-card {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--accent);
  margin-bottom: 4px;
  font-size: 12px;
}

.cm-task-card.cm-task-done {
  opacity: 0.4;
  text-decoration: line-through;
  border-left-color: var(--text-muted);
}

.cm-task-header { font-weight: 500; }
.cm-task-time { font-size: 10px; opacity: 0.6; margin-top: 2px; }
.cm-task-desc { font-size: 10px; opacity: 0.5; margin-top: 2px; line-height: 1.4; }

.cm-prayer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cm-prayer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.cm-prayer-item:hover { border-color: var(--border); }
.cm-prayer-done {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.cm-prayer-check {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}

.cm-kaza-info {
  margin-top: 6px;
  font-size: 11px;
  color: var(--danger, #ef4444);
  opacity: 0.8;
}

.cm-kaza-summary {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
}

.cm-kaza-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger, #ef4444);
  margin-bottom: 4px;
}

.cm-kaza-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cm-kaza-item {
  font-size: 10px;
  opacity: 0.7;
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 4px;
}

.cal-expand-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.cal-expand-btn:hover { color: var(--accent); }

/* View tabs */
.cm-view-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 2px;
}
.cm-view-tab {
  padding: 4px 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.cm-view-tab.active { background: var(--accent); color: white; }
.cm-view-tab:hover:not(.active) { background: rgba(255,255,255,0.08); }

/* ===== WEEK VIEW ===== */
.cw-container { width: 100%; overflow-x: auto; }
.cw-header {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 1;
}
.cw-time-col { padding: 8px 4px; font-size: 10px; opacity: 0.4; }
.cw-day-col {
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
}
.cw-today-col { color: var(--accent); opacity: 1; }
.cw-grid { max-height: 60vh; overflow-y: auto; }
.cw-row {
  display: grid;
  grid-template-columns: 50px repeat(7, 1fr);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  min-height: 32px;
}
.cw-time-label {
  padding: 4px;
  font-size: 9px;
  opacity: 0.3;
  text-align: right;
  padding-right: 8px;
}
.cw-cell {
  border-left: 1px solid rgba(255,255,255,0.03);
  padding: 2px;
  min-height: 32px;
}
.cw-today-cell { background: rgba(249,115,22,0.04); }
.cw-task {
  font-size: 10px;
  padding: 2px 4px;
  background: var(--accent);
  color: white;
  border-radius: 3px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== DAY VIEW ===== */
.cd-container { width: 100%; padding: 16px; overflow-y: auto; max-height: 70vh; }
.cd-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cd-date-big {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.cd-date-month { font-size: 16px; font-weight: 600; }
.cd-date-hijri { font-size: 12px; opacity: 0.5; }
.cd-events { margin-bottom: 12px; }
.cd-prayer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.cd-all-tasks { margin-bottom: 16px; }
.cd-timeline { border-top: 1px solid var(--border); padding-top: 8px; }
.cd-hour-row {
  display: flex;
  min-height: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.cd-hour-label {
  width: 50px;
  font-size: 10px;
  opacity: 0.3;
  padding: 4px;
  text-align: right;
  flex-shrink: 0;
}
.cd-hour-content { flex: 1; padding: 2px 8px; }
.cd-task-block {
  background: var(--accent);
  color: white;
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 2px;
  font-size: 12px;
}
.cd-task-title { font-weight: 600; }
.cd-task-time { font-size: 10px; opacity: 0.8; }
.cd-task-desc { font-size: 10px; opacity: 0.7; margin-top: 2px; }

@media (max-width: 700px) {
  .cm-body { flex-direction: column; }
  .cm-calendar-side { border-right: none; border-bottom: 1px solid var(--border); }
  .cm-detail-side { width: 100%; }
  .cm-container { border-radius: 14px; }
  .cm-view-tabs { display: none; }
}

.cal-events {
  padding: 6px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 4px;
  opacity: 0.8;
}

.cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-event-islamic .cal-event-dot { background: #22c55e; }
.cal-event-holiday .cal-event-dot { background: #3b82f6; }

/* Hijri date banner at the bottom of the calendar popup. Uses the same
   two-layer moon composition (phase image over Moon.png base silhouette)
   as the hicri widget, in a horizontal strip with the Hijri date label. */
.cal-hijri-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(249, 115, 22, 0.08) 100%);
  border-radius: 0 0 16px 16px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.cal-hijri-moon {
  width: 40px;
  height: 40px;
  background-size: contain, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

.cal-hijri-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.cal-hijri-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cal-hijri-label {
  font-size: 10px;
  opacity: 0.55;
  margin-top: 2px;
}

/* ===== STATS ===== */
.stats-popup {
  position: fixed;
  top: 60px;
  right: 90px;
  width: 320px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  box-shadow: var(--shadow-lg);
}

.stats-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.stats-header {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stats-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 2px;
}

.stats-tab {
  padding: 3px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.stats-tab.active {
  background: var(--accent);
  color: white;
}

.stats-tab:hover:not(.active) {
  background: rgba(255,255,255,0.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Secondary info line underneath the big stat value (e.g. "🔥 4 · 🏆 12"
   under habits, "3/114 suras · 0 hatim" under Quran). Kept small and
   muted so the main value stays dominant. */
.stat-sub {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.2px;
}

/* The Quran stat card gets a touch more horizontal room when present so
   long numbers ("1,234/6,236") don't wrap awkwardly inside a tight 2x2. */
.stat-card-quran {
  grid-column: span 2;
}

/* ===== WORLD CLOCKS =====
   Two fixes for the "one-frame flicker every second" problem:
     1. transition: all → transition: opacity/transform only.
        `all` retriggers on any property change including backdrop-
        filter re-composite, which text updates indirectly cause.
     2. contain: layout paint + will-change: opacity keeps the popup
        on its own composite layer so text ticks don't invalidate the
        blur behind it on Chrome. */
.worldclock-popup {
  position: fixed;
  top: 60px;
  right: 50px;
  width: 300px;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: var(--shadow-lg);
  contain: layout paint;
  will-change: opacity;
}

.worldclock-popup.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.wc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.wc-row {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  /* Transition only the hover background — not "all". With `all` the
     text updates in .wc-time every second briefly triggered a CSS
     recompute that bled into a visible flicker. */
  transition: background-color 0.1s ease;
}

.wc-row:hover {
  background: var(--hover-bg);
}

.wc-city {
  flex: 1;
}

.wc-city-name {
  font-weight: 600;
  font-size: 13px;
}

.wc-city-date {
  font-size: 10px;
  opacity: 0.5;
}

.wc-time {
  /* Match the main clock / prayer / hicri widgets — inherit the base
     Inter font family instead of using a separate monospace face. The
     tabular-nums feature keeps digits a consistent width so the second
     ticker doesn't jitter horizontally without needing a full
     monospace font. */
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.2px;
  /* Isolate the live-updating text into its own composite layer. The
     surrounding popup uses backdrop-filter: blur(24px), and in Chrome
     a text node change inside a backdrop-filter region triggers a
     whole-layer repaint — which shows up as a visible one-frame
     flicker every second. Promoting this element with contain +
     translateZ hint confines the repaint to the time cell itself. */
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.wc-city-date {
  contain: layout style paint;
}

.wc-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s;
}

.wc-row:hover .wc-delete { opacity: 0.7; }
.wc-delete:hover { opacity: 1 !important; }

/* ===== QUOTE FAVORITE ===== */
.quote-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.quote-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: all 0.2s ease;
  padding: 2px;
}

.quote-fav-btn:hover, .quote-fav-btn.faved {
  opacity: 1;
  transform: scale(1.2);
}

/* ===== ACCENT COLOR PICKER ===== */
.accent-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.accent-color-btn:hover {
  transform: scale(1.2);
}

.accent-color-btn.active {
  border-color: white;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* ===== LOCATION SEARCH AUTOCOMPLETE ===== */
.location-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
  z-index: 200;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.location-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s ease;
}

.location-suggestion:hover {
  background: var(--hover-bg);
}

.loc-flag {
  font-size: 18px;
  flex-shrink: 0;
}

.loc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.loc-name {
  font-size: 13px;
  font-weight: 600;
}

.loc-detail {
  font-size: 11px;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Prayer tracking */
.prayer-check {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 8px;
}

.prayer-check input {
  display: none;
}

.prayer-checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* Reserves the exact same space as .prayer-check + .prayer-checkmark so that
   non-trackable rows (Sunrise, Ishraq) keep the time column aligned with
   trackable rows, even when the checkbox is absent. */
.prayer-check-placeholder {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  flex-shrink: 0;
}

.prayer-check input:checked + .prayer-checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.prayer-check input:checked + .prayer-checkmark::after {
  content: '\2713';
  color: white;
  font-size: 12px;
  font-weight: 700;
}

/* ===== AYAH / HADITH / QUOTE BOTTOM STRIP =====
   Three cards live side-by-side at the bottom of the new tab: ayah,
   hadith, quote. The user wants all three legible, equal visual weight,
   tightly gapped but with a soft invisible boundary so they don't bleed
   into each other. Strategy:
     - equal flex, each widget gets its own slot with a min/max width
     - centered container with a little internal padding
     - soft left-border on hadith + quote to act as the invisible boundary
     - bigger fonts across the board (Arabic 22, translation 15, ref 12)
     - multi-line truncation via -webkit-line-clamp so long passages don't
       shove the row taller when they wrap */
.bottom-center {
  gap: 32px;
  justify-content: center;
  align-items: stretch;
}
#ayah-widget,
#hadith-widget,
#quote-widget {
  flex: 1 1 0;
  min-width: 260px;
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* No visible dividers between cards — the user prefers a clean strip
   where all three blend into the background without any border lines. */

.ayah-container,
.hadith-container,
.dua-container,
.quote-container {
  text-align: center;
  padding: 4px 10px;
  max-width: 100%;
  margin: 0 auto;
}

.ayah-arabic,
.hadith-arabic,
.dua-arabic {
  font-size: 22px;
  line-height: 1.9;
  direction: rtl;
  font-family: 'Amiri', 'Traditional Arabic', serif;
  color: var(--text-primary);
  opacity: 1;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  /* Clamp very long passages to 2 lines so the bottom strip height stays
     predictable — the full ayah is still accessible by tapping through to
     the prayer overlay (future: Quran modal). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ayah-translation,
.hadith-translation,
.dua-translation {
  font-size: 15px;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.55;
  opacity: 0.92;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* User explicitly requested that the ayah card NEVER truncate the
   verse or its translation — both must always be shown in full,
   regardless of length. We override the generic .ayah-* rules above
   (which also apply to hadith / dua and intentionally clamp to 2
   lines to keep the bottom strip height predictable).
   The ayah-container gets `overflow: visible` so a tall verse grows
   downward without being clipped by its parent slot. */
.ayah-container .ayah-arabic,
.ayah-container .ayah-translation {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ayah-container {
  overflow: visible;
}
/* Let the bottom strip expand around a long ayah rather than cap its
   height at a single row. The shared #ayah-widget / #hadith-widget /
   #quote-widget row uses center alignment; switching to flex-start
   here keeps the card top-aligned when it grows taller than its
   neighbours so the translation never visually jumps. */
#ayah-widget {
  align-items: flex-start;
  max-width: none;
}

.ayah-reference,
.hadith-source,
.dua-occasion {
  font-size: 12px;
  color: var(--text-primary);
  opacity: 0.6;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* Quote card matches the other two now — the user wants all three equally
   legible. We keep a slightly softer opacity so it still reads as
   secondary to the religious texts. */
.quote-container .quote-text {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.92;
  color: var(--text-primary);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote-container .quote-author {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

/* ===== AYAH READING CARD =====
   The ayah card in the bottom strip is the sequential Quran reader's
   inline surface. It stacks:
     - header    → location + cumulative counter ("Al-Fatiha 1:1 · 127/6236 · 2.0%")
     - arabic    → styled by the shared .ayah-arabic rule above
     - translation → shared rule
     - progress  → thin bar fed by quran.reading.totalRead
     - controls  → prev / mark-read / next buttons (hover-revealed)
*/
.ayah-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.75;
}
.ayah-location {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Inline sura + ayah picker. At rest the selects look like plain text
   (no borders, no backgrounds) so the header reads as a clean location
   label; a tiny caret hints that it's interactive. On card hover the
   controls fade in full borders + backgrounds so the user knows they
   can click. The grid button is completely hidden until hover. */
.ayah-location-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ayah-select {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
  /* Native caret is hidden by `appearance: none`; we draw a subtle
     chevron via background-image so the user still knows it opens. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px;
}
.ayah-select.ayah-select-sura { max-width: 180px; }
.ayah-select.ayah-select-aya  { max-width: 80px; }
.ayah-select option {
  background: #1a1a1a;
  color: #fff;
}

/* The grid-open button is kept completely out of the resting layout —
   no border, no background, opacity 0. Hover on the card reveals it. */
.ayah-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  pointer-events: none;
}

/* Hover reveal — both the header controls AND the bottom controls come
   alive together so the widget has a single "interactive" state. */
#ayah-widget:hover .ayah-select,
#ayah-widget:focus-within .ayah-select {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
#ayah-widget:hover .ayah-select:hover,
#ayah-widget:focus-within .ayah-select:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.38);
}
#ayah-widget:hover .ayah-nav-btn,
#ayah-widget:focus-within .ayah-nav-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
#ayah-widget:hover .ayah-nav-btn:hover,
#ayah-widget:focus-within .ayah-nav-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}
.ayah-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-primary);
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Progress bar is hidden in the bottom-strip card — the numeric counter
   in the header already surfaces "127/6236 · 2.0%" so the extra line
   just adds visual noise. Settings still shows the full progress text. */
.ayah-progress-bar { display: none; }

/* Controls are hidden until hover so the card stays clean in the resting
   state — matches the behavior the user asked for. Small fade + rise on
   hover-in. */
.ayah-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  flex-wrap: nowrap;
}
#ayah-widget:hover .ayah-controls,
#ayah-widget:focus-within .ayah-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ayah-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

/* Icon-only nav buttons (first / suraStart / prev / next / suraEnd / last)
   are tight squares so all seven controls fit inside the bottom-strip card
   without wrapping. Only the center "Okudum" button keeps a label. */
.ayah-ctrl.ayah-icon {
  padding: 4px 6px;
  min-width: 26px;
}
.ayah-ctrl:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}
.ayah-ctrl:active { transform: translateY(0); }
.ayah-ctrl svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Read button gets an accent color; when the current verse is already
   marked read, the button flips to a muted "already read" look so users
   can tell at a glance that clicking it again un-marks. */
.ayah-read {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.5);
}
.ayah-read:hover {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.75);
}
.ayah-read.is-read {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Loading skeleton placeholder: very subtle, just keeps layout stable. */
.ayah-loading-state .ayah-arabic,
.ayah-loading-state .ayah-translation {
  opacity: 0.4;
}

/* When the card represents an already-read verse in sequential mode,
   lightly desaturate the background so the user perceives "done, move
   on" at a glance. The controls still work normally. */
.ayah-container.is-read .ayah-arabic,
.ayah-container.is-read .ayah-translation {
  opacity: 0.72;
}

/* ===== QURAN NAVIGATOR MODAL =====
   Full-screen overlay panel launched from the ayah widget's header
   button. Two columns: scrollable sura list on the left, ayah grid for
   the selected sura on the right. Read/unread state drives the cell
   tint so the user can see at a glance where they are in each sura. */
#quran-navigator-panel.quran-navigator-panel {
  width: min(1100px, 92vw);
  max-width: 1100px;
  height: min(720px, 88vh);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
#quran-navigator-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#quran-navigator-panel .panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.qnav-overall {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  justify-content: center;
  font-size: 12px;
  opacity: 0.8;
  font-family: 'JetBrains Mono', monospace;
}
.qnav-overall-counter { font-weight: 600; }
.qnav-overall-percent { opacity: 0.7; }
.qnav-overall-hatim {
  color: rgba(34, 197, 94, 0.95);
  font-weight: 600;
}
.qnav-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sura list — left column */
.qnav-sura-list {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 8px 6px;
}
.qnav-sura-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "num names meta"
    "num bar   bar";
  align-items: center;
  gap: 2px 10px;
  padding: 8px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.qnav-sura-row:hover {
  background: var(--hover-bg);
}
.qnav-sura-row.is-active {
  background: var(--hover-bg);
  border-color: var(--accent);
}
.qnav-sura-num {
  grid-area: num;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  text-align: right;
}
.qnav-sura-names {
  grid-area: names;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.qnav-sura-tname {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qnav-sura-arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 14px;
  opacity: 0.75;
  direction: rtl;
}
.qnav-sura-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 10px;
  opacity: 0.65;
  white-space: nowrap;
}
.qnav-sura-type {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
}
.qnav-sura-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.qnav-sura-bar {
  grid-area: bar;
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.qnav-sura-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}
.qnav-sura-row.is-started .qnav-sura-tname { color: rgba(251, 191, 36, 0.95); }
.qnav-sura-row.is-done { background: rgba(34, 197, 94, 0.08); }
.qnav-sura-row.is-done .qnav-sura-tname { color: rgba(34, 197, 94, 1); }
.qnav-sura-row.is-done .qnav-sura-bar-fill { background: rgba(34, 197, 94, 0.9); }

/* Ayah grid — right column */
.qnav-ayah-grid-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qnav-grid-header {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.qnav-grid-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.qnav-grid-sura-num {
  font-size: 14px;
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
}
.qnav-grid-sura-label {
  font-size: 15px;
  font-weight: 600;
}
.qnav-grid-sura-meaning {
  font-size: 12px;
  opacity: 0.55;
  font-style: italic;
}
.qnav-grid-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}
.qnav-ayah-grid {
  padding: 16px 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.qnav-ayah-cell {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 8px 0;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: center;
}
.qnav-ayah-cell:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.qnav-ayah-cell.is-unread {
  opacity: 0.55;
}
.qnav-ayah-cell.is-read {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.5);
  color: rgba(220, 255, 225, 1);
  opacity: 1;
}
.qnav-ayah-cell.is-read:hover {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.75);
}
.qnav-ayah-cell.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ===== PRAYER AYAH OVERLAY =====
   When the user taps a prayer time and the detail popup opens, the whole
   center column of the page (clock, date, greeting, focus goal, pomodoro,
   search, countdown, motivation) is hidden — see body.prayer-overlay-active
   below — so the ayah has a clean stage. The bottom strip (ayah / hadith
   / quote) and the namaz-vakitleri detail panel on the right stay visible.

   Horizontal centering trick: the prayer detail popup lives at fixed
   right: 160px, width: 360px → its left edge sits 520 px from the right
   edge. To keep the overlay *visually* centered in the remaining area
   and never overlap the panel, we give both sides the same 544 px inset
   (520 panel offset + 24 breathing room). The overlay then stretches
   between those two insets and its text is geometrically centered in the
   shrunken band — not in the full viewport — so it no longer drifts
   towards the panel side. */
.prayer-ayah-overlay {
  position: fixed;
  left: 544px;
  right: 544px;
  top: 14vh;
  bottom: 16vh;
  padding: 32px 56px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 150;
  overflow-y: auto;
  /* Flex centering so the verse sits on the visual midline of the cleared
     center column. Long passages fall back to top-aligned scroll. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Hide the scrollbar — the overlay is pointer-events:none so the user
     can't drag it anyway, we just want overflow to clip gracefully. */
  scrollbar-width: none;
}
.prayer-ayah-overlay::-webkit-scrollbar { display: none; }

/* Readability scrim lives on a dedicated ::before pseudo so the mask/fade
   only affects the darkening layer, not the text above it. Previously the
   scrim was set on the overlay itself and the radial mask also clipped
   the Arabic + translation children, causing the text to fade at the
   overlay edges. Splitting the scrim out fixes that: text stays pin-sharp
   everywhere while the darken+blur backdrop fades organically. */
.prayer-ayah-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at center,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.42) 20%,
    rgba(0, 0, 0, 0.32) 40%,
    rgba(0, 0, 0, 0.20) 60%,
    rgba(0, 0, 0, 0.08) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Mask only the pseudo, not the overlay children. Same gradual fade as
     the darken layer above; no flat plateau, no visible box edge. */
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at center,
    black 0%,
    rgba(0,0,0,0.98) 20%,
    rgba(0,0,0,0.88) 40%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.25) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at center,
    black 0%,
    rgba(0,0,0,0.98) 20%,
    rgba(0,0,0,0.88) 40%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.25) 80%,
    transparent 100%
  );
}

/* Responsive fallback — on narrower viewports (< 1400 px) the symmetric
   544 px insets would leave no room at all. Fall back to a tight inset
   and let text scroll if it has to; long verses auto-shrink via the
   length-* buckets anyway. */
@media (max-width: 1400px) {
  .prayer-ayah-overlay {
    left: 24px;
    right: 544px;
  }
}

/* While the overlay is up, hide every center-column widget so the ayah
   stands alone. These widgets live inside #main-content (see newtab.html);
   hiding #main-content entirely is cleaner than per-widget rules and also
   covers pomodoro / motivation / search which may swap in. The bottom
   bar and prayer detail popup are NOT affected — they live outside
   #main-content. */
body.prayer-overlay-active #main-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#main-content {
  transition: opacity 0.35s ease;
}

.prayer-ayah-overlay.hidden { display: none; }
.prayer-ayah-overlay.visible {
  opacity: 1;
  transform: translateY(0);
}
.prayer-ayah-overlay:not(.visible) {
  transform: translateY(12px);
}

.prayer-ayah-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.prayer-ayah-arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  direction: rtl;
  line-height: 1.8;
  color: #fff;
  font-weight: 500;
  /* Layered shadows create a soft dark halo around every glyph so the
     Arabic reads cleanly over bright backgrounds (white mosques, clouds,
     the Kaaba). The first three layers sharpen near each glyph; the
     larger ones bleed outward like a lamp, adding contrast without a
     visible box. */
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.85),
    0 4px 28px rgba(0,0,0,0.75),
    0 0 60px rgba(0,0,0,0.55);
  max-width: 100%;
  /* Font-size comes from the length bucket modifier class below. */
}

.prayer-ayah-translation {
  font-style: italic;
  color: #fff;
  line-height: 1.55;
  max-width: 1100px;
  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 1px 3px rgba(0,0,0,0.9),
    0 2px 10px rgba(0,0,0,0.8),
    0 4px 20px rgba(0,0,0,0.6);
}

.prayer-ayah-reference {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.4px;
  text-shadow:
    0 0 2px rgba(0,0,0,0.9),
    0 1px 3px rgba(0,0,0,0.85),
    0 2px 8px rgba(0,0,0,0.7);
}

/* Length buckets — short verses (Fatiha 1:5, ~40 chars) use the biggest
   font; xlong passages (Muzzemmil 73:20, ~700 chars) drop so they still
   fit the cleared center band. With the main content hidden the overlay
   owns most of the viewport height, so sizes can go bigger than before. */
.prayer-ayah-overlay.length-short .prayer-ayah-arabic {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.75;
}
.prayer-ayah-overlay.length-short .prayer-ayah-translation {
  font-size: clamp(18px, 1.6vw, 26px);
}

.prayer-ayah-overlay.length-medium .prayer-ayah-arabic {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.8;
}
.prayer-ayah-overlay.length-medium .prayer-ayah-translation {
  font-size: clamp(16px, 1.4vw, 22px);
}

.prayer-ayah-overlay.length-long .prayer-ayah-arabic {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.85;
}
.prayer-ayah-overlay.length-long .prayer-ayah-translation {
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}

.prayer-ayah-overlay.length-xlong .prayer-ayah-arabic {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.85;
}
.prayer-ayah-overlay.length-xlong .prayer-ayah-translation {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
  max-width: 1300px;
}
.prayer-ayah-overlay.length-xlong {
  padding: 12px 48px;
}

/* Site Blocker */
.blocked-site-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  margin-bottom: 4px;
}

.blocked-site-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}

.blocked-site-remove:hover {
  background: rgba(239,68,68,0.15);
}

/* Bookmarks */
.bookmark-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 12px;
  transition: background 0.15s;
}

.bookmark-item:hover {
  background: var(--hover-bg);
}

.bookmark-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-folder {
  padding: 8px 12px 4px;
  font-size: 12px;
  opacity: 0.6;
}

/* ===== MOTIVATION COUNTDOWN =====
   Same visual grammar as .countdown-item below so the motivation
   pill carries equal weight with the Yeni Yıl / Tatil pills instead
   of looking like a lightweight afterthought. Two rows: uppercase-
   ish top line with emoji + goal, larger bold bottom line with the
   countdown value. Kept as a pill (glass panel + rounded 10) so the
   three pills sit in one visual family. */
.motivation-widget {
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-top: 8px;
}
.motivation-pill {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  min-width: 140px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.motivation-widget:hover .motivation-pill {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.motivation-name {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.motivation-time {
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Empty state still a pill but dashed + muted so the user
   recognises it as an "add new" affordance rather than a populated
   counter. Dashes turn solid + accent-coloured on hover. */
.motivation-pill.motivation-empty {
  border-style: dashed;
  opacity: 0.75;
}
.motivation-widget:hover .motivation-pill.motivation-empty {
  opacity: 1;
}
.motivation-pill.motivation-empty .motivation-time {
  color: var(--text-primary);
  opacity: 0.85;
}
.motivation-pill.motivation-done .motivation-time {
  color: var(--success, #22c55e);
}

/* ===== DEVELOPER DUA WIDGET ===== */
.devdua-widget {
  position: relative;
  margin-bottom: 4px;
}

.devdua-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.2s;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
}

.devdua-toggle:hover {
  opacity: 1;
  background: var(--bg-glass);
}

.devdua-icon {
  font-size: 16px;
}

.devdua-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 340px;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 100;
}

.devdua-popup.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.devdua-popup.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.devdua-arabic {
  font-size: 18px;
  line-height: 2;
  direction: rtl;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.devdua-text {
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 6px;
}

.devdua-source {
  font-size: 10px;
  text-align: center;
  opacity: 0.4;
  margin-bottom: 14px;
}

.devdua-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.devdua-amin-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.devdua-amin-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.devdua-counter {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.devdua-counter #devdua-count {
  font-weight: 700;
  color: var(--accent);
  font-size: 16px;
}

.devdua-reset-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.2s;
  padding: 2px 4px;
}

.devdua-reset-btn:hover {
  opacity: 1;
}

.devdua-next {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 4px 8px;
  border-radius: 6px;
}

.devdua-next:hover {
  opacity: 1;
  background: var(--hover-bg);
}

.devdua-credit {
  font-size: 9px;
  text-align: center;
  opacity: 0.3;
  font-style: italic;
}

/* ===== GLOBAL MODAL SYSTEM ===== */
.solara-modal-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.solara-modal-btn.primary {
  background: var(--accent);
  color: white;
}

.solara-modal-btn.primary:hover {
  filter: brightness(1.1);
}

.solara-modal-btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.solara-modal-btn.secondary:hover {
  background: var(--hover-bg);
}

.solara-modal-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ===== BACKUP REMINDER WIDGET ===== */
/* Top-bar icon button, sits between the language switcher and
   settings gear. Shares the same .icon-btn footprint as every
   other top-bar button so it aligns visually. The icon swaps to
   an amber/alert variant when a backup is overdue. */
#btn-backup {
  position: relative;
  transition: color 0.2s ease;
}
#btn-backup.backup-overdue {
  color: #f59e0b;
  animation: backupPulse 2.4s ease-in-out infinite;
}
#btn-backup.backup-overdue::after {
  /* Tiny amber dot in the upper-right corner of the icon so the
     overdue state is legible even when the amber tint alone
     doesn't register (e.g. against a warm background photo). */
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px var(--bg, rgba(0, 0, 0, 0.3));
}
@keyframes backupPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.55)); }
}

/* ===== Backup dropdown popup =====
   Follows the .topbar-dropdown pattern shared by Calendar, World
   Clocks, Stats, Sound — so margins, shadow, header styling and
   open/close animation come from that base class. Only the
   content-specific bits live here. */
#backup-popup {
  width: 320px;
  max-width: calc(100vw - 24px);
}
.backup-popup-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Last-backup summary strip. Flips to a subtle amber background
   when the user is overdue to echo the button state. */
.backup-summary {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.backup-summary.is-overdue {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
}
.backup-summary-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 2px;
}
.backup-summary-value {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Action groups: Data / Git Sync / Reminder. Each has a tiny
   uppercase caption and contains either a row of buttons or
   label+control pairs. */
.backup-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.backup-group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  font-weight: 600;
}
.backup-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.backup-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.backup-action:hover { background: var(--hover-bg, rgba(255, 255, 255, 0.1)); }
.backup-action:active { transform: translateY(1px); }
.backup-action:disabled { opacity: 0.5; cursor: not-allowed; }
.backup-action.primary {
  background: var(--accent);
  color: white;
  border-color: transparent;
}
.backup-action.primary:hover { filter: brightness(1.1); background: var(--accent); }
.backup-action.ghost {
  background: transparent;
  border-style: dashed;
  justify-content: center;
}

.backup-git-missing .backup-action { width: 100%; }

/* Reminder-row: label on the left, input on the right. */
.backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
}
.backup-row select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}
.backup-row select:focus { outline: none; border-color: var(--accent); }
.backup-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ===== Settings panel — backup subsection =====
   The backup block inside Settings → Data. Aligns with the rest of
   the settings-section styling (same row heights, gap, label font
   size) instead of the ad-hoc inline styles the first draft used. */
.settings-subsection {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-subsection .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  font-size: 13px;
}
.settings-subsection .settings-row label {
  color: var(--text-primary);
  font-weight: 500;
}
.settings-subsection .settings-row-meta {
  opacity: 0.7;
  font-size: 12px;
  padding-top: 2px;
}
.settings-subsection .setting-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
  color: var(--text-primary);
  font-size: 12px;
  min-width: 110px;
}
.settings-subsection .settings-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}
.settings-subsection .settings-btn:hover {
  background: var(--accent-soft, var(--hover-bg));
  border-color: var(--accent);
}

/* ===== RESPONSIVE — WIDGET SCALING =====
   Makes the dashboard usable on phones (360px), Nest Hub (1024x600),
   tablets, and eventually Electron at arbitrary window sizes. Uses
   clamp()-based fluid scaling where possible so we don't need a
   breakpoint per device — the few @media blocks below handle edge
   cases (hiding elements, changing layouts, etc.). */

/* ---- Fluid clock scaling ---- */
/* Default clock clamp min is 80px which is too large for <500px
   viewports. Override to a viewport-aware minimum. */
@media (max-width: 800px) {
  .clock-time { font-size: clamp(48px, 14vw, 120px); letter-spacing: -1px; }
  .clock-right .clock-seconds { font-size: clamp(16px, 4vw, 36px); }
  .clock-date { font-size: clamp(11px, 2.5vw, 16px); }
  #greeting-widget { font-size: clamp(16px, 4.5vw, 28px); }
  #focus-widget { font-size: clamp(13px, 3vw, 18px); }
  .motivation-pill { min-width: 100px; padding: 4px 10px; }
  .motivation-name { font-size: 8px; max-width: 160px; }
  .motivation-time { font-size: 12px; }
  .countdown-item { min-width: 80px; padding: 4px 10px; }
  .countdown-name { font-size: 8px; }
  .countdown-time { font-size: 12px; }
}

@media (max-width: 500px) {
  .clock-time { font-size: clamp(36px, 16vw, 64px); }
  .clock-right .clock-seconds { font-size: clamp(14px, 5vw, 24px); }
  .clock-date { font-size: clamp(10px, 3vw, 13px); }
  #greeting-widget { font-size: clamp(14px, 5vw, 22px); }
  #focus-widget { font-size: clamp(11px, 3.5vw, 16px); }
  #quote-widget, #hadith-widget { font-size: 12px; padding: 0 8px; }
  #ayah-widget { font-size: 12px; }
  .ayah-text { font-size: 16px; }
}

/* ---- Short viewport (Nest Hub 600px, landscape phone) ---- */
@media (max-height: 650px) {
  .clock-time { font-size: clamp(36px, 8vh, 80px); }
  .clock-right .clock-seconds { font-size: clamp(14px, 3vh, 28px); }
  .clock-date { font-size: clamp(10px, 1.8vh, 14px); margin-top: 0; }
  #greeting-widget { font-size: clamp(14px, 3vh, 22px); }
  #focus-widget { font-size: clamp(11px, 2vh, 16px); }
  #main-content { gap: 1px; }
  .motivation-pill { padding: 3px 8px; }
  .motivation-name { font-size: 7px; }
  .motivation-time { font-size: 11px; }
  .countdown-item { padding: 3px 8px; }
  .countdown-name { font-size: 7px; }
  .countdown-time { font-size: 11px; }
  #quote-widget, #hadith-widget, #dua-widget { font-size: 11px; }
}

/* ---- Very short (Nest Hub landscape, phone landscape) ---- */
@media (max-height: 450px) {
  .clock-time { font-size: clamp(28px, 10vh, 48px); }
  #greeting-widget { font-size: clamp(12px, 3vh, 18px); }
  #clock-widget .clock-date { display: none; }
  .motivation-widget { margin-top: 2px; }
  #quote-widget, #hadith-widget, #dua-widget,
  .devdua-widget, #ayah-widget { display: none; }
}