#custom-bg-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#custom-bg-toggle {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(150, 164, 190, 0.25);
  background: #111722;
  color: #f4f7fb;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

#custom-bg-toggle:hover {
  filter: brightness(1.1);
}

#custom-bg-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 288px;
  background: #12182a;
  color: #f4f7fb;
  border: 1px solid rgba(150, 164, 190, 0.16);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45);
  flex-direction: column;
  gap: 4px;
}

.cbg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.cbg-group {
  padding: 10px 0;
  border-top: 1px solid rgba(150, 164, 190, 0.12);
}

.cbg-group:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.cbg-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
}

.cbg-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 52px;
  flex-shrink: 0;
  color: #f4f7fb;
  opacity: 0.55;
  line-height: 1;
}

#cbg-color-input {
  width: 36px;
  height: 30px;
  border: 1px solid rgba(150, 164, 190, 0.3);
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 7px;
  transition: opacity 0.15s ease;
}

/* Shown whenever the color picker isn't the active background source
   (default state, or an image is applied) so a stale black swatch never
   reads as "this color is currently selected". */
#cbg-color-input.cbg-inactive {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.cbg-btn {
  background: rgba(150, 164, 190, 0.14);
  color: #f4f7fb;
  border: 1px solid rgba(150, 164, 190, 0.28);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cbg-btn:hover {
  background: rgba(150, 164, 190, 0.24);
}

.cbg-btn-accent {
  background: #6ee7b7;
  color: #0a0d12;
  border-color: #6ee7b7;
  margin-left: auto;
}

.cbg-btn-accent:hover {
  background: #8dedc4;
  border-color: #8dedc4;
}

#cbg-default-btn {
  margin-left: auto;
}

.cbg-file-hidden {
  display: none;
}

.cbg-file-row {
  padding-left: 62px;
  min-height: auto;
}

.cbg-file-name {
  font-size: 12px;
  color: #f4f7fb;
  opacity: 0.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

#cbg-image-preview-row {
  align-items: center;
  margin-top: 8px;
}

#cbg-image-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(150, 164, 190, 0.28);
}

#cbg-opacity-input {
  flex: 1;
  accent-color: #6ee7b7;
}

.cbg-opacity-value {
  font-size: 12px;
  font-weight: 600;
  width: 34px;
  text-align: right;
  opacity: 0.75;
  flex-shrink: 0;
}

.cbg-seg {
  display: flex;
  gap: 6px;
  flex: 1;
}

.cbg-seg-btn {
  flex: 1;
  background: rgba(150, 164, 190, 0.12);
  color: #f4f7fb;
  border: 1px solid rgba(150, 164, 190, 0.25);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cbg-seg-btn:hover {
  background: rgba(150, 164, 190, 0.2);
}

.cbg-seg-btn.active {
  background: #6ee7b7;
  color: #0a0d12;
  border-color: #6ee7b7;
  font-weight: 700;
}

.cbg-hint {
  font-size: 11.5px;
  min-height: 14px;
  opacity: 0.6;
  line-height: 1.45;
  padding-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Glass mode: once a custom background (color or image) is active,   */
/* the sidebar and every card/panel become translucent + blurred so   */
/* the background shows through the ENTIRE page, not just the gaps    */
/* around content — similar to how Gmail shows a theme image behind   */
/* its translucent panels.                                            */
/*                                                                     */
/* Two tints are supported via [data-cbg-tint]:                       */
/*  - "light" (default): white frosted glass, like Gmail — panel text */
/*    is switched to dark for readability regardless of app theme.    */
/*  - "dark": glass tinted with the app's own dark panel colors.      */
/* ------------------------------------------------------------------ */

html.cbg-active[data-cbg-tint="light"] {
  --cbg-tint-sidebar: #ffffff;
  --cbg-tint-panel: #ffffff;
  --cbg-tint-panel2: #ffffff;
}

html.cbg-active[data-cbg-tint="dark"] {
  --cbg-tint-sidebar: var(--bg-soft);
  --cbg-tint-panel: var(--panel);
  --cbg-tint-panel2: var(--panel-2);
}

html.cbg-active .sidebar {
  background: color-mix(in srgb, var(--cbg-tint-sidebar, var(--bg-soft)) var(--cbg-alpha, 60%), transparent) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}

html.cbg-active .status-label,
html.cbg-active .timeline-step {
  background: color-mix(in srgb, var(--cbg-tint-sidebar, var(--bg-soft)) var(--cbg-alpha, 60%), transparent) !important;
}

html.cbg-active .hero-panel,
html.cbg-active .panel,
html.cbg-active .stat,
html.cbg-active .auth-card,
html.cbg-active .modal,
html.cbg-active .toast,
html.cbg-active thead th,
html.cbg-active .timeline-step > span {
  background: color-mix(in srgb, var(--cbg-tint-panel, var(--panel)) var(--cbg-alpha, 60%), transparent) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

/* hero-panel keeps its subtle accent gradient, just with a translucent base */
html.cbg-active .hero-panel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 45%),
    color-mix(in srgb, var(--cbg-tint-panel, var(--panel)) var(--cbg-alpha, 60%), transparent) !important;
}

html.cbg-active .secondary,
html.cbg-active .icon-btn,
html.cbg-active .pill,
html.cbg-active .status-label,
html.cbg-active .segmented,
html.cbg-active .segmented button,
html.cbg-active .task-card,
html.cbg-active .topic-card,
html.cbg-active .revision-row,
html.cbg-active .schedule-preview span,
html.cbg-active .file-action,
html.cbg-active .day,
html.cbg-active .heat,
html.cbg-active .insight,
html.cbg-active input,
html.cbg-active select,
html.cbg-active textarea,
html.cbg-active nav button:hover,
html.cbg-active .collapse-btn:hover {
  background: color-mix(in srgb, var(--cbg-tint-panel2, var(--panel-2)) var(--cbg-alpha, 60%), transparent) !important;
}

html.cbg-active .task-card,
html.cbg-active .topic-card,
html.cbg-active .revision-row,
html.cbg-active .modal,
html.cbg-active .auth-card,
html.cbg-active .segmented,
html.cbg-active input,
html.cbg-active select,
html.cbg-active textarea {
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html.cbg-active .auth-screen {
  background: transparent !important;
}

/* White tint: re-point the app's own text-color variables inside every  */
/* glass surface so labels/values stay readable on a light background,  */
/* even if the app itself is in dark mode.                              */
html.cbg-active[data-cbg-tint="light"] .sidebar,
html.cbg-active[data-cbg-tint="light"] .hero-panel,
html.cbg-active[data-cbg-tint="light"] .panel,
html.cbg-active[data-cbg-tint="light"] .stat,
html.cbg-active[data-cbg-tint="light"] .auth-card,
html.cbg-active[data-cbg-tint="light"] .modal,
html.cbg-active[data-cbg-tint="light"] .toast,
html.cbg-active[data-cbg-tint="light"] .task-card,
html.cbg-active[data-cbg-tint="light"] .topic-card,
html.cbg-active[data-cbg-tint="light"] .revision-row,
html.cbg-active[data-cbg-tint="light"] .segmented,
html.cbg-active[data-cbg-tint="light"] .insight {
  --text: #16202f;
  --muted: #4b5768;
  --border: rgba(20, 30, 45, 0.14);
}

html.cbg-active[data-cbg-tint="light"] input,
html.cbg-active[data-cbg-tint="light"] select,
html.cbg-active[data-cbg-tint="light"] textarea {
  color: #16202f !important;
}

/* ------------------------------------------------------------------ */
/* Depth: flat translucent cards are hard to tell apart from each     */
/* other and from the background. Add soft elevation shadows, a       */
/* crisper border, and a subtle top glass highlight so each panel     */
/* visibly sits "above" the wallpaper instead of blending into it.    */
/* ------------------------------------------------------------------ */

html.cbg-active[data-cbg-tint="light"] {
  --cbg-elevation: 0 14px 34px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.08);
  --cbg-hairline: rgba(15, 23, 42, 0.16);
  --cbg-glow: rgba(255, 255, 255, 0.65);
}

html.cbg-active[data-cbg-tint="dark"] {
  --cbg-elevation: 0 16px 38px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.28);
  --cbg-hairline: rgba(150, 164, 190, 0.28);
  --cbg-glow: rgba(255, 255, 255, 0.06);
}

html.cbg-active .hero-panel,
html.cbg-active .panel,
html.cbg-active .stat,
html.cbg-active .auth-card,
html.cbg-active .modal,
html.cbg-active .toast,
html.cbg-active .task-card,
html.cbg-active .topic-card,
html.cbg-active .revision-row,
html.cbg-active .insight {
  border-color: var(--cbg-hairline) !important;
  box-shadow: var(--cbg-elevation), inset 0 1px 0 var(--cbg-glow) !important;
}

html.cbg-active .sidebar {
  border-right-color: var(--cbg-hairline) !important;
  box-shadow: 6px 0 30px rgba(15, 23, 42, 0.1) !important;
}

html.cbg-active .stat {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

html.cbg-active .stat:hover {
  transform: translateY(-2px);
}

/* Slightly firmer separation for smaller chips/badges so they don't */
/* wash out against the frosted cards behind them.                   */
html.cbg-active .status-label,
html.cbg-active .pill,
html.cbg-active .schedule-preview span {
  border-color: var(--cbg-hairline) !important;
}

/* ------------------------------------------------------------------ */
/* Status colors: "Done"/"Overdue"/"Due Today" already had their own   */
/* fixed colors (green/red/amber) via --good/--warn/--danger, which    */
/* are never touched by the tint overrides above, so they already     */
/* survive any background. "Not Done" and "Ignored" had no color of    */
/* their own and fell back to --muted, which *is* one of the variables */
/* the white-tint mode overrides — so give them their own fixed,       */
/* always-on colors too, independent of theme, tint or background.     */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* The status dropdown (Not Done / Done / Ignored) is a native <select>, */
/* so it wasn't reached by any of the color rules above, which only     */
/* target the read-only status chip next to it. The three options are   */
/* always rendered in this fixed order (see the app's status list), so  */
/* nth-child reliably maps each option to its state. Chrome also carries*/
/* an <option>'s color into the closed select box once it's selected,   */
/* so this colors both the open list and the collapsed dropdown.        */
/* ------------------------------------------------------------------ */
/* The select's own closed-box background (set further below) otherwise */
/* bleeds into the open dropdown list in most browsers, making every    */
/* option look like the same solid color block. Force a neutral, always */
/* the same background on the options themselves so only the text      */
/* carries each option's color — a clean list, not a wall of color.     */
select[aria-label^="Status for"] option {
  background: #151c28 !important;
}

select[aria-label^="Status for"] option:nth-child(1) {
  color: #fb7185; /* Not Done — red */
}

select[aria-label^="Status for"] option:nth-child(2) {
  color: #49d17d; /* Done — green */
}

select[aria-label^="Status for"] option:nth-child(3) {
  color: #f2bd5c; /* Ignored — gold */
}

/* ------------------------------------------------------------------ */
/* The dropdown itself ("the whole button/bulge") should carry its     */
/* status color, not just its text. :has(option:checked) reads which   */
/* option is actually selected right now, so this tracks the live      */
/* value directly rather than guessing from the card's computed status */
/* (which can differ — e.g. a card can show "Overdue" while its raw    */
/* status is still "Not Done"). !important guards this against the    */
/* glass-mode background rules above, so it holds with any background */
/* set, any tint, any theme.                                           */
/* ------------------------------------------------------------------ */
select[aria-label^="Status for"] {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

select[aria-label^="Status for"]:has(option:nth-child(1):checked) {
  background: color-mix(in srgb, #fb7185 30%, var(--panel-2)) !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 12px color-mix(in srgb, #fb7185 45%, transparent) !important;
}

select[aria-label^="Status for"]:has(option:nth-child(2):checked) {
  background: color-mix(in srgb, #49d17d 30%, var(--panel-2)) !important;
  border-color: #49d17d !important;
  box-shadow: 0 0 12px color-mix(in srgb, #49d17d 45%, transparent) !important;
}

select[aria-label^="Status for"]:has(option:nth-child(3):checked) {
  background: color-mix(in srgb, #f2bd5c 30%, var(--panel-2)) !important;
  border-color: #f2bd5c !important;
  box-shadow: 0 0 12px color-mix(in srgb, #f2bd5c 45%, transparent) !important;
}

/* The pill/chip ("✓ Done" / "○ Not Done") next to the dropdown gets the */
/* same treatment — a filled tint of its status color plus a matching   */
/* border, instead of just tinted text.                                 */
.status-label.done {
  background: color-mix(in srgb, #49d17d 32%, var(--panel-2)) !important;
  border-color: #49d17d !important;
  color: #eafff2 !important;
}

.status-label.not-done {
  background: color-mix(in srgb, #fb7185 32%, var(--panel-2)) !important;
  border-color: #fb7185 !important;
  color: #fff0f1 !important;
}

.status-label.ignored {
  background: color-mix(in srgb, #f2bd5c 32%, var(--panel-2)) !important;
  border-color: #f2bd5c !important;
  color: #1b1302 !important;
}

/* ------------------------------------------------------------------ */
/* The round status icon (the circle to the left of each task) had no   */
/* transition or animation at all, and "Not Done"/"Ignored" had no      */
/* color of their own (only Done/Overdue/Due Today did in the app's own */
/* CSS). Give every state a glowing ring in its own color plus a smooth */
/* transition, so switching states is both distinct and animated.       */
/* ------------------------------------------------------------------ */
.status-dot {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  border-width: 2px;
}

.done .status-dot {
  background: var(--bg-soft) !important;
  border-color: #49d17d !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #49d17d 20%, transparent), 0 0 16px color-mix(in srgb, #49d17d 65%, transparent);
  animation: cbg-status-pop 0.3s ease;
}

.not-done .status-dot {
  background: var(--bg-soft) !important;
  border-color: #fb7185 !important;
  color: #fb7185 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fb7185 20%, transparent), 0 0 16px color-mix(in srgb, #fb7185 65%, transparent);
}

.ignored .status-dot {
  background: #f2bd5c !important;
  border-color: #f2bd5c !important;
  color: #1b1302 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f2bd5c 25%, transparent), 0 0 16px color-mix(in srgb, #f2bd5c 65%, transparent);
}

@keyframes cbg-status-pop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ------------------------------------------------------------------ */
/* The per-topic revision timeline (the "1 Day / 3 Day / 7 Day..." row  */
/* inside a topic card on Tasks & Revisions) is built differently from  */
/* the Dashboard's "Upcoming" list: its icon <span> carries NO class    */
/* name at all (only the parent ".timeline-step" has the status class),*/
/* and its <select>'s aria-label reads "... day status" instead of      */
/* "Status for ...". None of the rules above can reach either element,  */
/* so target them directly here with the same color/glow/transition.    */
/* ------------------------------------------------------------------ */
.timeline-step > span {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  border-width: 2px;
}

.timeline-step.done > span {
  background: var(--bg-soft) !important;
  border-color: #49d17d !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #49d17d 20%, transparent), 0 0 16px color-mix(in srgb, #49d17d 65%, transparent) !important;
  animation: cbg-status-pop 0.3s ease;
}

.timeline-step.not-done > span {
  background: var(--bg-soft) !important;
  border-color: #fb7185 !important;
  color: #fb7185 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fb7185 20%, transparent), 0 0 16px color-mix(in srgb, #fb7185 65%, transparent) !important;
}

.timeline-step.ignored > span {
  background: #f2bd5c !important;
  border-color: #f2bd5c !important;
  color: #1b1302 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f2bd5c 25%, transparent), 0 0 16px color-mix(in srgb, #f2bd5c 65%, transparent) !important;
}

.timeline-step.done em {
  color: #49d17d !important;
}

.timeline-step.not-done em {
  color: #fb7185 !important;
}

.timeline-step.ignored em {
  color: #f2bd5c !important;
}

select[aria-label$="day status"] {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

select[aria-label$="day status"] option {
  background: #151c28 !important;
}

select[aria-label$="day status"] option:nth-child(1) {
  color: #fb7185;
}

select[aria-label$="day status"] option:nth-child(2) {
  color: #49d17d;
}

select[aria-label$="day status"] option:nth-child(3) {
  color: #f2bd5c;
}

select[aria-label$="day status"]:has(option:nth-child(1):checked) {
  background: color-mix(in srgb, #fb7185 30%, var(--panel-2)) !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 12px color-mix(in srgb, #fb7185 45%, transparent) !important;
}

select[aria-label$="day status"]:has(option:nth-child(2):checked) {
  background: color-mix(in srgb, #49d17d 30%, var(--panel-2)) !important;
  border-color: #49d17d !important;
  box-shadow: 0 0 12px color-mix(in srgb, #49d17d 45%, transparent) !important;
}

select[aria-label$="day status"]:has(option:nth-child(3):checked) {
  background: color-mix(in srgb, #f2bd5c 30%, var(--panel-2)) !important;
  border-color: #f2bd5c !important;
  box-shadow: 0 0 12px color-mix(in srgb, #f2bd5c 45%, transparent) !important;
}

/* ------------------------------------------------------------------ */
/* Custom status dropdown: the real <select> is kept in the DOM        */
/* (invisible) so the app's own state/onChange logic is untouched, but  */
/* is visually replaced by this fully custom button + floating panel,   */
/* since native <option> lists can't have rounded corners, spacing      */
/* between items, or an open animation on any website.                  */
/* ------------------------------------------------------------------ */
.cbg-native-select-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cbg-fakeselect {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.cbg-fakeselect:hover {
  transform: translateY(-1px);
}

.cbg-fakeselect-arrow {
  opacity: 0.7;
  font-size: 0.75em;
  transition: transform 0.2s ease;
}

.cbg-fakeselect[aria-expanded="true"] .cbg-fakeselect-arrow {
  transform: rotate(180deg);
}

.cbg-fakeselect-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cbg-fakeselect[data-status="Not Done"] {
  background: color-mix(in srgb, #fb7185 30%, var(--panel-2));
  border-color: #fb7185;
  color: #fff0f1;
  box-shadow: 0 0 12px color-mix(in srgb, #fb7185 45%, transparent);
}

.cbg-fakeselect[data-status="Done"] {
  background: color-mix(in srgb, #49d17d 30%, var(--panel-2));
  border-color: #49d17d;
  color: #eafff2;
  box-shadow: 0 0 12px color-mix(in srgb, #49d17d 45%, transparent);
}

.cbg-fakeselect[data-status="Ignored"] {
  background: color-mix(in srgb, #f2bd5c 30%, var(--panel-2));
  border-color: #f2bd5c;
  color: #1b1302;
  box-shadow: 0 0 12px color-mix(in srgb, #f2bd5c 45%, transparent);
}

.cbg-fakeselect-panel {
  position: fixed;
  z-index: 999998;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #151c28;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.96) translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.cbg-fakeselect-panel.cbg-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.cbg-fakeselect-option {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.14s ease, transform 0.14s ease;
}

.cbg-fakeselect-option:hover,
.cbg-fakeselect-option:focus-visible {
  transform: translateX(2px);
}

.cbg-fakeselect-option.cbg-selected {
  background: rgba(255, 255, 255, 0.09);
}

.cbg-fakeselect-option[data-value="Not Done"] {
  color: #fb7185;
}

.cbg-fakeselect-option[data-value="Not Done"]:hover {
  background: color-mix(in srgb, #fb7185 20%, transparent);
}

.cbg-fakeselect-option[data-value="Done"] {
  color: #49d17d;
}

.cbg-fakeselect-option[data-value="Done"]:hover {
  background: color-mix(in srgb, #49d17d 20%, transparent);
}

.cbg-fakeselect-option[data-value="Ignored"] {
  color: #f2bd5c;
}

.cbg-fakeselect-option[data-value="Ignored"]:hover {
  background: color-mix(in srgb, #f2bd5c 20%, transparent);
}

/* ------------------------------------------------------------------ */
/* Mobile compactness: collapse each topic's 5-day timeline down to the */
/* single most relevant day, with a toggle to expand — the biggest      */
/* source of "too big/bulky" on small screens. Desktop/tablet widths    */
/* are untouched (the JS only marks these classes under ~760px).        */
/* ------------------------------------------------------------------ */
.cbg-timeline-toggle {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cbg-timeline-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

@media (max-width: 760px) {
  .timeline.cbg-timeline-collapsed {
    display: block;
  }

  .timeline.cbg-timeline-collapsed .timeline-step {
    display: none;
  }

  .timeline.cbg-timeline-collapsed .timeline-step.cbg-timeline-default {
    display: grid;
  }
}

/* ------------------------------------------------------------------ */
/* General mobile/tablet tightening: smaller padding, tighter type,     */
/* less whitespace, so the app reads as "compact" instead of "blown up  */
/* desktop layout" on phones and tablets.                               */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .main {
    padding: 14px 12px 72px;
  }

  .topbar h1 {
    font-size: 1.5rem;
  }

  .eyebrow {
    font-size: 0.78rem;
  }

  .hero-panel {
    padding: 16px;
    min-height: auto;
    border-radius: 16px;
  }

  .hero-panel h2 {
    font-size: 1.5rem;
  }

  .panel {
    padding: 14px;
    border-radius: 14px;
  }

  .panel h2, .panel h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }

  .stat {
    padding: 12px;
    border-radius: 12px;
  }

  .stat strong {
    font-size: 1.35rem;
  }

  .topic-card {
    padding: 12px;
    border-radius: 12px;
  }

  .topic-card h3, .topic-card strong {
    font-size: 1rem;
  }

  .timeline {
    gap: 8px;
  }

  .timeline-step {
    padding: 9px;
    border-radius: 11px;
  }

  .timeline-step > span {
    width: 24px;
    height: 24px;
  }

  .task-card {
    padding: 10px;
    border-radius: 12px;
  }

  .filters {
    gap: 8px;
  }

  .section-head {
    margin-bottom: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Header: previously sat directly on the raw wallpaper with no panel  */
/* of its own, so its text color (set by the current theme) could      */
/* lose all contrast against a light custom background/image. Give it  */
/* the same frosted-glass treatment as every other panel, and force    */
/* readable text on top of it in both tint modes — not just "light" —  */
/* since the header has no theme-matched panel color to fall back on.  */
/* ------------------------------------------------------------------ */
html.cbg-active .topbar {
  background: color-mix(in srgb, var(--cbg-tint-panel, var(--panel)) var(--cbg-alpha, 60%), transparent) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--cbg-hairline) !important;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--cbg-elevation), inset 0 1px 0 var(--cbg-glow) !important;
}

html.cbg-active[data-cbg-tint="light"] .topbar {
  --text: #16202f;
  --muted: #4b5768;
}