/* =================================================================
   Dashboard Plugin — Multi-Theme Design System
   ================================================================= */

/* ===== Aurora Gradient Animation ===== */
@keyframes db-aurora-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* =================================================================
   THEME VARIABLE DEFINITIONS
   ================================================================= */

/* ----- 1. AURORA (宝莉 / Pony) — night sky + rainbow, MLP-inspired ----- */
/* Neutral glass surfaces carry the content; saturation lives in the drifting
   rainbow aurora, the per-section pony hues, and the candy progress gradient. */
.apex-dashboard-root[data-theme="aurora"] {
	--db-bg: #0b1226;
	--db-bg-section: rgba(255, 255, 255, 0.035);
	--db-bg-card: rgba(255, 255, 255, 0.06);
	--db-bg-card-hover: rgba(255, 255, 255, 0.10);
	--db-bg-sidebar: rgba(255, 255, 255, 0.04);
	--db-bg-input: rgba(255, 255, 255, 0.05);
	--db-bg-btn: rgba(53, 195, 255, 0.06);
	--db-bg-btn-hover: rgba(53, 195, 255, 0.12);
	--db-bg-banner: rgba(53, 195, 255, 0.10);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(255, 255, 255, 0.05);
	--db-bg-hover-strong: rgba(255, 255, 255, 0.09);
	--db-bg-add-section: rgba(255, 255, 255, 0.02);
	--db-bg-drop-indicator: rgba(53, 195, 255, 0.10);

	--db-border: rgba(255, 255, 255, 0.08);
	--db-border-card: rgba(255, 255, 255, 0.10);
	--db-border-section: rgba(255, 255, 255, 0.07);
	--db-border-sidebar: rgba(255, 255, 255, 0.07);
	--db-border-input: rgba(255, 255, 255, 0.08);
	--db-border-input-focus: rgba(53, 195, 255, 0.6);
	--db-border-btn: rgba(53, 195, 255, 0.16);
	--db-border-add-section: rgba(53, 195, 255, 0.18);

	--db-text: #eaf2ff;
	--db-text-muted: #9db2d8;
	--db-text-faint: #5d7195;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.55);

	/* Rainbow Dash cyan — bright accent, light enough that CTAs flip to dark text */
	--db-accent: #35c3ff;
	--db-accent-light: #7ad9ff;
	--db-danger: #ff4d6d;

	--db-shadow-card: 0 2px 12px rgba(2, 8, 26, 0.4);
	--db-shadow-card-hover: 0 6px 24px rgba(2, 8, 26, 0.5), 0 0 18px rgba(53, 195, 255, 0.10);
	--db-backdrop-blur: blur(12px);

	--db-radius-sm: 8px;
	--db-radius-md: 14px;
	--db-radius-lg: 18px;

	--db-font: 'Outfit', 'LXGW WenKai', var(--font-interface);
	/* Candy gradient: Pinkie pink flowing into Rainbow Dash cyan */
	--db-progress-from: #ff5fb0;
	--db-progress-to: #35c3ff;
	--db-checkbox: #35c3ff;
	--db-quote-border: #ff5fb0;
	--db-link: #35c3ff;

	/* Opaque modal surfaces — without these a light Obsidian base theme paints
	   dialogs white under the near-white aurora text (same trap neon/onyx hit). */
	--db-bg-modal: #0e1530;
	--db-bg-modal-raised: rgba(255, 255, 255, 0.06);

	/* Per-section pony hue fallback (unset types inherit Rainbow Dash cyan). */
	--db-sec-hue: #35c3ff;
	--db-sec-glow: rgba(53, 195, 255, 0.14);

	/* Rainbow aurora — two full candy-band cycles so any resting frame shows
	   four-plus hues across the screen while the drift sweeps the full rainbow */
	--db-aurora-bg: linear-gradient(135deg,
			#0b1226 0%,
			rgba(255, 77, 126, 0.16) 8%,
			rgba(255, 152, 56, 0.15) 17%,
			rgba(255, 217, 61, 0.13) 25%,
			rgba(62, 224, 127, 0.15) 33%,
			rgba(53, 195, 255, 0.20) 42%,
			rgba(157, 107, 255, 0.15) 50%,
			rgba(255, 77, 126, 0.16) 58%,
			rgba(255, 152, 56, 0.15) 67%,
			rgba(255, 217, 61, 0.13) 75%,
			rgba(62, 224, 127, 0.15) 83%,
			rgba(53, 195, 255, 0.20) 92%,
			#0b1226 100%);
	--db-aurora-size: 220% 220%;
	--db-aurora-speed: 12s;
}

/* Ponyville daytime — cotton-candy sky, white glass, deepened accents */
.theme-light .apex-dashboard-root[data-theme="aurora"] {
	--db-bg: #f2f6ff;
	--db-bg-section: rgba(255, 255, 255, 0.55);
	--db-bg-card-hover: rgba(255, 255, 255, 0.85);
	--db-bg-sidebar: rgba(255, 255, 255, 0.50);
	--db-bg-input: rgba(255, 255, 255, 0.65);
	--db-bg-btn: rgba(2, 132, 199, 0.08);
	--db-bg-btn-hover: rgba(2, 132, 199, 0.14);
	--db-bg-banner: rgba(2, 132, 199, 0.08);
	--db-bg-hover: rgba(42, 60, 105, 0.06);
	--db-bg-hover-strong: rgba(42, 60, 105, 0.11);
	--db-bg-add-section: rgba(255, 255, 255, 0.40);
	--db-bg-drop-indicator: rgba(2, 132, 199, 0.10);
	--db-border: rgba(42, 60, 105, 0.10);
	--db-border-card: rgba(42, 60, 105, 0.12);
	--db-border-section: rgba(42, 60, 105, 0.08);
	--db-border-sidebar: rgba(42, 60, 105, 0.08);
	--db-border-input: rgba(42, 60, 105, 0.12);
	--db-border-input-focus: rgba(2, 132, 199, 0.5);
	--db-border-btn: rgba(2, 132, 199, 0.16);
	--db-text: #1e2a4a;
	--db-text-muted: #47597e;
	--db-text-faint: #8a99b8;
	--db-accent: #0284c7;
	--db-accent-light: #38bdf8;
	--db-shadow-card: 0 2px 12px rgba(31, 45, 90, 0.08);
	--db-shadow-card-hover: 0 8px 32px rgba(31, 45, 90, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05);
	--db-progress-from: #e0218a;
	--db-progress-to: #0284c7;
	--db-checkbox: #0284c7;
	--db-quote-border: #e0218a;
	--db-link: #0284c7;
	--db-bg-modal: #ffffff;
	--db-bg-modal-raised: rgba(42, 60, 105, 0.05);
	--db-sec-hue: #0284c7;
	--db-sec-glow: rgba(2, 132, 199, 0.14);
	--db-aurora-bg: linear-gradient(135deg,
			#f2f6ff 0%,
			rgba(53, 195, 255, 0.12) 18%,
			rgba(157, 107, 255, 0.10) 38%,
			rgba(255, 95, 176, 0.10) 58%,
			rgba(255, 217, 61, 0.12) 78%,
			#f2f6ff 100%);
}

/* --- Per-section pony hues (dark): each section type gets its own Mane-Six
   color. memo=Pinkie, sticky=Rarity lavender, todo=Applejack,
   projects=Rainbow Dash, library=Twilight; the rest round out the rainbow. --- */
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #c084fc; --db-sec-glow: rgba(192, 132, 252, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="projects"] { --db-sec-hue: #40b5ff; --db-sec-glow: rgba(64, 181, 255, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="library"] { --db-sec-hue: #a06bff; --db-sec-glow: rgba(160, 107, 255, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="weread"] { --db-sec-hue: #2fd6b5; --db-sec-glow: rgba(47, 214, 181, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="ticktick"] { --db-sec-hue: #4ade80; --db-sec-glow: rgba(74, 222, 128, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="calendar"] { --db-sec-hue: #ff7a6b; --db-sec-glow: rgba(255, 122, 107, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="heatmap"] { --db-sec-hue: #ff6b81; --db-sec-glow: rgba(255, 107, 129, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="dataview"] { --db-sec-hue: #35e0e8; --db-sec-glow: rgba(53, 224, 232, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="web"] { --db-sec-hue: #7f8cff; --db-sec-glow: rgba(127, 140, 255, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="rss"] { --db-sec-hue: #ffb454; --db-sec-glow: rgba(255, 180, 84, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="pipeline"] { --db-sec-hue: #a3e635; --db-sec-glow: rgba(163, 230, 53, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="skills"] { --db-sec-hue: #f472b6; --db-sec-glow: rgba(244, 114, 182, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="pm"] { --db-sec-hue: #38bdf8; --db-sec-glow: rgba(56, 189, 248, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="images"] { --db-sec-hue: #ff4d7e; --db-sec-glow: rgba(255, 77, 126, 0.16); }
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="videos"] { --db-sec-hue: #e879f9; --db-sec-glow: rgba(232, 121, 249, 0.16); }

/* --- Light-mode pony hues: same identities, deepened for contrast on the
   cotton-candy sky (butter yellow in particular must go amber). --- */
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #a21caf; --db-sec-glow: rgba(162, 28, 175, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="projects"] { --db-sec-hue: #0369a1; --db-sec-glow: rgba(3, 105, 161, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="library"] { --db-sec-hue: #7c3aed; --db-sec-glow: rgba(124, 58, 237, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="weread"] { --db-sec-hue: #0d9488; --db-sec-glow: rgba(13, 148, 136, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="ticktick"] { --db-sec-hue: #16a34a; --db-sec-glow: rgba(22, 163, 74, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="calendar"] { --db-sec-hue: #ea580c; --db-sec-glow: rgba(234, 88, 12, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="heatmap"] { --db-sec-hue: #dc2626; --db-sec-glow: rgba(220, 38, 38, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="dataview"] { --db-sec-hue: #0e7490; --db-sec-glow: rgba(14, 116, 144, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="web"] { --db-sec-hue: #4f46e5; --db-sec-glow: rgba(79, 70, 229, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="rss"] { --db-sec-hue: #b45309; --db-sec-glow: rgba(180, 83, 9, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="pipeline"] { --db-sec-hue: #4d7c0f; --db-sec-glow: rgba(77, 124, 15, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="skills"] { --db-sec-hue: #be185d; --db-sec-glow: rgba(190, 24, 93, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="pm"] { --db-sec-hue: #1d4ed8; --db-sec-glow: rgba(29, 78, 216, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="images"] { --db-sec-hue: #e11d48; --db-sec-glow: rgba(225, 29, 72, 0.14); }
.theme-light .apex-dashboard-root[data-theme="aurora"] .dashboard-section-row[data-section-type="videos"] { --db-sec-hue: #c026d3; --db-sec-glow: rgba(192, 38, 211, 0.14); }

/* --- Rainbow identity consumption: the title wears its hue and cards glow
   the same color on hover (the crown hairline was tried and retired — the
   title color alone carries the per-section identity). Selectors outrank the
   base .dashboard-section-row/.dashboard-card rules, so placement before them
   in the file is safe. --- */
.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row .dashboard-section-title {
	color: var(--db-sec-hue);
}

.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row .dashboard-card:hover {
	border-color: var(--db-sec-glow);
	box-shadow: var(--db-shadow-card-hover), 0 0 18px var(--db-sec-glow);
}


/* ----- 2. EARTH (托斯卡纳暖阳) — parchment + slow warm sunlight ----- */
/* Afternoon sun drifting across a plaster wall: honey, terracotta and olive
   washes breathe behind warm-glass sections; cards stay solid cream. */
.apex-dashboard-root[data-theme="earth"] {
	--db-bg: #f3ecdf;
	--db-bg-section: rgba(250, 244, 232, 0.55);
	--db-bg-card: #FBF7EE;
	--db-bg-card-hover: #FFFDF7;
	--db-bg-sidebar: rgba(250, 244, 232, 0.45);
	--db-bg-input: rgba(188, 90, 52, 0.05);
	--db-bg-btn: rgba(188, 90, 52, 0.08);
	--db-bg-btn-hover: rgba(188, 90, 52, 0.14);
	--db-bg-banner: rgba(217, 119, 6, 0.10);
	--db-bg-overlay: linear-gradient(135deg, rgba(60,30,10,0.5) 0%, rgba(60,30,10,0.2) 100%);
	--db-bg-hover: rgba(188, 90, 52, 0.06);
	--db-bg-hover-strong: rgba(188, 90, 52, 0.10);
	--db-bg-add-section: rgba(250, 244, 232, 0.40);
	--db-bg-drop-indicator: rgba(188, 90, 52, 0.12);

	--db-border: rgba(146, 116, 82, 0.18);
	--db-border-card: rgba(146, 116, 82, 0.22);
	--db-border-section: rgba(146, 116, 82, 0.12);
	--db-border-sidebar: rgba(146, 116, 82, 0.12);
	--db-border-input: rgba(146, 116, 82, 0.25);
	--db-border-input-focus: #bc5a34;
	--db-border-btn: rgba(146, 116, 82, 0.20);
	--db-border-add-section: rgba(188, 90, 52, 0.35);

	--db-text: #38291c;
	--db-text-muted: #6d5646;
	--db-text-faint: #a08770;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	/* Terracotta pottery */
	--db-accent: #bc5a34;
	--db-accent-light: #d98a5f;
	--db-danger: #dc2626;

	--db-shadow-card: 0 2px 8px rgba(160, 110, 70, 0.10);
	--db-shadow-card-hover: 0 6px 20px rgba(160, 110, 70, 0.16), 0 0 18px rgba(217, 119, 6, 0.10);
	--db-backdrop-blur: none;

	--db-radius-sm: 10px;
	--db-radius-md: 14px;
	--db-radius-lg: 18px;

	--db-font: 'Merriweather', 'Noto Serif SC', var(--font-interface);
	--db-progress-from: #d97706;
	--db-progress-to: #65a30d;
	--db-checkbox: #65a30d;
	--db-quote-border: #bc5a34;
	--db-link: #bc5a34;

	/* Opaque modal surfaces matching the cream cards */
	--db-bg-modal: #FBF7EE;
	--db-bg-modal-raised: rgba(188, 90, 52, 0.05);

	/* Warm sunlight washes */
	--db-aurora-bg: linear-gradient(135deg,
		#f3ecdf 0%,
		rgba(217, 119, 6, 0.16) 16%,
		rgba(194, 96, 61, 0.15) 34%,
		rgba(255, 244, 214, 0.26) 52%,
		rgba(120, 144, 90, 0.14) 70%,
		rgba(217, 150, 90, 0.16) 86%,
		#f3ecdf 100%);
	--db-aurora-size: 250% 250%;
	--db-aurora-speed: 32s;
}
.theme-dark .apex-dashboard-root[data-theme="earth"] {
	/* Dark soil with ember glows */
	--db-bg: #221b11;
	--db-bg-section: rgba(48, 39, 25, 0.55);
	--db-bg-card: #2b2315;
	--db-bg-card-hover: #362c1a;
	--db-bg-sidebar: rgba(48, 39, 25, 0.45);
	--db-bg-input: rgba(232, 160, 104, 0.06);
	--db-bg-btn: rgba(232, 160, 104, 0.06);
	--db-bg-btn-hover: rgba(232, 160, 104, 0.12);
	--db-bg-banner: rgba(232, 160, 104, 0.06);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(255, 255, 255, 0.04);
	--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
	--db-bg-add-section: rgba(232, 160, 104, 0.05);
	--db-bg-drop-indicator: rgba(232, 160, 104, 0.10);

	--db-border: rgba(120, 90, 55, 0.28);
	--db-border-card: rgba(120, 90, 55, 0.32);
	--db-border-section: rgba(120, 90, 55, 0.20);
	--db-border-sidebar: rgba(120, 90, 55, 0.20);
	--db-border-input: rgba(120, 90, 55, 0.35);
	--db-border-input-focus: #e8a068;
	--db-border-btn: rgba(120, 90, 55, 0.30);
	--db-border-add-section: rgba(232, 160, 104, 0.30);

	--db-text: #ece0cf;
	--db-text-muted: #c4b099;
	--db-text-faint: #94825f;
	--db-accent: #e8a068;
	--db-accent-light: #f0bc8f;
	--db-danger: #f87171;
	--db-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
	--db-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 18px rgba(217, 119, 6, 0.12);
	--db-progress-from: #d97706;
	--db-progress-to: #e8a068;
	--db-checkbox: #e8a068;
	--db-quote-border: #d97706;
	--db-link: #e8a068;
	--db-bg-modal: #2b2315;
	--db-bg-modal-raised: rgba(232, 160, 104, 0.06);
	--db-aurora-bg: linear-gradient(135deg,
		#221b11 0%,
		rgba(217, 119, 6, 0.15) 18%,
		rgba(194, 96, 61, 0.12) 40%,
		rgba(143, 184, 130, 0.10) 62%,
		rgba(255, 200, 130, 0.11) 80%,
		#221b11 100%);
}


/* ----- 5. NORDIC (极夜峡湾) — frost aurora over cool white ----- */
/* The land of aurora borealis: icy cyan, frost blue and mint washes drifting
   behind cool-glass sections. Tight radii keep the minimal identity. */
.apex-dashboard-root[data-theme="nordic"] {
	--db-bg: #f7fafc;
	--db-bg-section: rgba(255, 255, 255, 0.60);
	--db-bg-card: #ffffff;
	--db-bg-card-hover: #fdfeff;
	--db-bg-sidebar: rgba(255, 255, 255, 0.50);
	--db-bg-input: rgba(43, 187, 215, 0.05);
	--db-bg-btn: rgba(23, 125, 149, 0.08);
	--db-bg-btn-hover: rgba(23, 125, 149, 0.14);
	--db-bg-banner: rgba(43, 187, 215, 0.10);
	--db-bg-overlay: linear-gradient(135deg, rgba(30,58,95,0.5) 0%, rgba(30,58,95,0.2) 100%);
	--db-bg-hover: rgba(43, 187, 215, 0.06);
	--db-bg-hover-strong: rgba(43, 187, 215, 0.12);
	--db-bg-add-section: rgba(255, 255, 255, 0.50);
	--db-bg-drop-indicator: rgba(43, 187, 215, 0.12);

	--db-border: rgba(100, 125, 165, 0.16);
	--db-border-card: rgba(100, 125, 165, 0.20);
	--db-border-section: rgba(100, 125, 165, 0.12);
	--db-border-sidebar: rgba(100, 125, 165, 0.12);
	--db-border-input: rgba(100, 125, 165, 0.24);
	--db-border-input-focus: #177d95;
	--db-border-btn: rgba(100, 125, 165, 0.18);
	--db-border-add-section: rgba(100, 125, 165, 0.35);

	--db-text: #16233c;
	--db-text-muted: #48586f;
	--db-text-faint: #8b9bb0;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	/* Glacier teal #2BBBD7 — darkened to #177d95 in light mode for text contrast */
	--db-accent: #177d95;
	--db-accent-light: #2bbbd7;
	--db-danger: #ef4444;

	--db-shadow-card: 0 1px 3px rgba(43, 187, 215, 0.10);
	--db-shadow-card-hover: 0 4px 12px rgba(43, 187, 215, 0.12), 0 0 16px rgba(103, 232, 249, 0.12);
	--db-backdrop-blur: none;

	--db-radius-sm: 6px;
	--db-radius-md: 8px;
	--db-radius-lg: 10px;

	--db-font: 'DM Sans', 'Noto Sans SC', var(--font-interface);
	--db-progress-from: #177d95;
	--db-progress-to: #22d3ee;
	--db-checkbox: #177d95;
	--db-quote-border: #0ea5e9;
	--db-link: #177d95;

	/* Opaque modal surfaces */
	--db-bg-modal: #ffffff;
	--db-bg-modal-raised: rgba(43, 187, 215, 0.05);

	/* Frost aurora washes */
	--db-aurora-bg: linear-gradient(135deg,
		#f7fafc 0%,
		rgba(147, 197, 253, 0.18) 16%,
		rgba(103, 232, 249, 0.14) 34%,
		rgba(165, 180, 252, 0.12) 52%,
		rgba(167, 243, 208, 0.10) 70%,
		rgba(147, 197, 253, 0.14) 86%,
		#f7fafc 100%);
	--db-aurora-size: 250% 250%;
	--db-aurora-speed: 26s;
}
.theme-dark .apex-dashboard-root[data-theme="nordic"] {
	/* Fjord night with cold aurora */
	--db-bg: #101828;
	--db-bg-section: rgba(30, 41, 59, 0.55);
	--db-bg-card: #1a2436;
	--db-bg-card-hover: #223049;
	--db-bg-sidebar: rgba(30, 41, 59, 0.45);
	--db-bg-input: rgba(43, 187, 215, 0.06);
	--db-bg-btn: rgba(43, 187, 215, 0.06);
	--db-bg-btn-hover: rgba(43, 187, 215, 0.12);
	--db-bg-banner: rgba(43, 187, 215, 0.10);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(43, 187, 215, 0.06);
	--db-bg-hover-strong: rgba(43, 187, 215, 0.12);
	--db-bg-add-section: rgba(43, 187, 215, 0.05);
	--db-bg-drop-indicator: rgba(43, 187, 215, 0.12);

	--db-border: rgba(88, 130, 190, 0.16);
	--db-border-card: rgba(88, 130, 190, 0.20);
	--db-border-section: rgba(88, 130, 190, 0.12);
	--db-border-sidebar: rgba(88, 130, 190, 0.12);
	--db-border-input: rgba(88, 130, 190, 0.24);
	--db-border-input-focus: #2bbbd7;
	--db-border-btn: rgba(88, 130, 190, 0.18);
	--db-border-add-section: rgba(88, 130, 190, 0.35);

	--db-text: #e5edf8;
	--db-text-muted: #9db0c8;
	--db-text-faint: #64748b;
	--db-accent: #2bbbd7;
	--db-accent-light: #63d6e8;
	--db-danger: #f87171;
	--db-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
	--db-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 16px rgba(43, 187, 215, 0.14);
	--db-progress-from: #2bbbd7;
	--db-progress-to: #22d3ee;
	--db-checkbox: #2bbbd7;
	--db-quote-border: #22d3ee;
	--db-link: #2bbbd7;
	--db-bg-modal: #1a2436;
	--db-bg-modal-raised: rgba(43, 187, 215, 0.06);
	--db-aurora-bg: linear-gradient(135deg,
		#101828 0%,
		rgba(34, 211, 238, 0.13) 16%,
		rgba(96, 165, 250, 0.12) 34%,
		rgba(129, 140, 248, 0.10) 52%,
		rgba(52, 211, 153, 0.10) 70%,
		rgba(43, 187, 215, 0.14) 86%,
		#101828 100%);
}


/* Earth + Nordic: drifting wash backgrounds */
.apex-dashboard-root[data-theme="earth"],
.apex-dashboard-root[data-theme="nordic"] {
	background: var(--db-aurora-bg);
	background-size: var(--db-aurora-size);
	animation: db-aurora-shift var(--db-aurora-speed) ease-in-out infinite;
	transition: color 0.3s ease;
	will-change: background-position;
	backface-visibility: hidden;
}

/* ----- 6. ISLAND (动物森友会 — 淡彩无人岛) ----- */
.apex-dashboard-root[data-theme="island"] {
	/* 背景：奶油白底，区块/侧栏用淡绿淡蓝 */
	--db-bg: #f8f8f0;
	--db-bg-section: #e6f4e8;
	--db-bg-card: #faf6ee;
	--db-bg-card-hover: #fefefa;
	--db-bg-sidebar: #e8f6ea;
	--db-bg-input: rgba(25, 200, 185, 0.04);
	--db-bg-btn: rgba(25, 200, 185, 0.08);
	--db-bg-btn-hover: rgba(25, 200, 185, 0.14);
	--db-bg-banner: rgba(111, 186, 44, 0.08);
	--db-bg-overlay: linear-gradient(135deg, rgba(30,60,40,0.40) 0%, rgba(40,80,60,0.15) 100%);
	--db-bg-hover: rgba(25, 200, 185, 0.06);
	--db-bg-hover-strong: rgba(25, 200, 185, 0.10);
	--db-bg-add-section: rgba(25, 200, 185, 0.06);
	--db-bg-drop-indicator: rgba(25, 200, 185, 0.10);

	/* 边框：暖灰+绿色调 */
	--db-border: #c8dcc5;
	--db-border-card: #b5d4b0;
	--db-border-section: #b8d8b5;
	--db-border-sidebar: #b0d0ac;
	--db-border-input: #b5d4b0;
	--db-border-input-focus: #ffcc00;
	--db-border-btn: rgba(25, 200, 185, 0.22);
	--db-border-add-section: #19c8b9;

	/* 文字：森林棕绿（非纯棕） */
	--db-text: #4a6741;
	--db-text-muted: #5a7247;
	--db-text-faint: #8aaa80;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	/* 强调色：薄荷青+草绿双主色 */
	--db-accent: #19c8b9;
	--db-accent-light: #6fba2c;
	--db-danger: #e05a5a;

	/* 阴影：3D 按键感 */
	--db-shadow-card: 0 4px 0 0 #a8c8a5, 0 4px 10px rgba(74, 103, 65, 0.12);
	--db-shadow-card-hover: 0 5px 0 0 #a8c8a5, 0 8px 24px rgba(74, 103, 65, 0.15);
	--db-backdrop-blur: none;

	/* 圆角：最大最圆润 */
	--db-radius-sm: 12px;
	--db-radius-md: 18px;
	--db-radius-lg: 20px;

	/* 字体：Nunito 圆体 */
	--db-font: 'Nunito', 'Noto Sans SC', 'Zen Maru Gothic', -apple-system, 'PingFang SC', var(--font-interface);

	/* 进度条/复选框：薄荷→草绿渐变 */
	--db-progress-from: #19c8b9;
	--db-progress-to: #6fba2c;
	--db-checkbox: #6fba2c;
	--db-quote-border: #82d5bb;
	--db-link: #19c8b9;
}
.theme-dark .apex-dashboard-root[data-theme="island"] {
	--db-bg: #1a2a1e;
	--db-bg-section: #223428;
	--db-bg-card: #263830;
	--db-bg-card-hover: #2e4438;
	--db-bg-sidebar: #1e3024;
	--db-bg-input: rgba(255, 255, 255, 0.04);
	--db-bg-btn: rgba(61, 212, 198, 0.06);
	--db-bg-btn-hover: rgba(61, 212, 198, 0.12);
	--db-bg-banner: rgba(25, 200, 185, 0.06);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(25, 200, 185, 0.06);
	--db-bg-hover-strong: rgba(25, 200, 185, 0.10);
	--db-bg-add-section: rgba(25, 200, 185, 0.05);
	--db-border: #3a5a3e;
	--db-border-card: #3a5a3e;
	--db-border-section: #3a5a3e;
	--db-border-sidebar: #3a5a3e;
	--db-border-input: #3a5a3e;
	--db-border-input-focus: #ffcc00;
	--db-text: #c8e0c4;
	--db-text-muted: #98b894;
	--db-text-faint: #688864;
	--db-accent: #3dd4c6;
	--db-accent-light: #86d67a;
	--db-danger: #e05a5a;
	--db-shadow-card: 0 4px 0 0 #2a4a2e, 0 4px 10px rgba(0, 0, 0, 0.25);
	--db-shadow-card-hover: 0 5px 0 0 #2a4a2e, 0 8px 24px rgba(0, 0, 0, 0.25);
	--db-progress-from: #3dd4c6;
	--db-progress-to: #86d67a;
	--db-checkbox: #86d67a;
	--db-quote-border: #3dd4c6;
	--db-link: #3dd4c6;
}

/* ----- 7. TUNDRA (苔原 — Earth clone, transparent sections) ----- */
.apex-dashboard-root[data-theme="tundra"] {
	--db-bg: #eef0ec;
	--db-bg-section: transparent;
	--db-bg-card: #FAF6F0;
	--db-bg-card-hover: #FFFFFF;
	--db-bg-sidebar: transparent;
	--db-bg-input: rgba(120, 80, 40, 0.04);
	--db-bg-btn: rgba(217, 119, 6, 0.08);
	--db-bg-btn-hover: rgba(217, 119, 6, 0.14);
	--db-bg-banner: rgba(217, 119, 6, 0.1);
	--db-bg-overlay: linear-gradient(135deg, rgba(60,30,10,0.5) 0%, rgba(60,30,10,0.2) 100%);
	--db-bg-hover: rgba(120, 80, 40, 0.06);
	--db-bg-hover-strong: rgba(120, 80, 40, 0.1);
	--db-bg-add-section: rgba(217, 119, 6, 0.06);
	--db-bg-drop-indicator: rgba(217, 119, 6, 0.1);

	--db-border: #D5C8B5;
	--db-border-card: #D5C8B5;
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: #D5C8B5;
	--db-border-input-focus: #d97706;
	--db-border-btn: rgba(217, 119, 6, 0.22);
	--db-border-add-section: #d97706;

	--db-text: #3D2B1F;
	--db-text-muted: #6B5040;
	--db-text-faint: #8B7060;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	--db-accent: #d97706;
	--db-accent-light: #65a30d;
	--db-danger: #dc2626;

	--db-shadow-card: 0 2px 8px rgba(60, 40, 20, 0.08);
	--db-shadow-card-hover: 0 6px 20px rgba(60, 40, 20, 0.14);
	--db-backdrop-blur: none;

	--db-radius-sm: 8px;
	--db-radius-md: 14px;
	--db-radius-lg: 18px;

	--db-font: 'Merriweather', 'Noto Serif SC', var(--font-interface);
	--db-progress-from: #6b8f5e;
	--db-progress-to: #a3b899;
	--db-checkbox: #6b8f5e;
	--db-quote-border: #a3b899;
	--db-link: #6b8f5e;

	/* Tundra aurora + avocado green */
	--db-aurora-bg: linear-gradient(135deg,
		#eef0ec 0%,
		rgba(134, 168, 120, 0.12) 18%,
		rgba(160, 190, 140, 0.08) 36%,
		rgba(120, 155, 110, 0.10) 54%,
		rgba(145, 178, 130, 0.06) 72%,
		#eef0ec 100%);
	--db-aurora-size: 400% 400%;
	--db-aurora-speed: 14s;
}
.theme-dark .apex-dashboard-root[data-theme="tundra"] {
	--db-bg: #141816;
	--db-bg-section: transparent;
		--db-bg-card: rgba(107, 143, 94, 0.10);
		--db-bg-card-hover: rgba(107, 143, 94, 0.18);
	--db-bg-sidebar: transparent;
		--db-bg-input: rgba(107, 143, 94, 0.06);
		--db-bg-btn: rgba(143, 184, 130, 0.10);
		--db-bg-btn-hover: rgba(143, 184, 130, 0.18);
		--db-bg-banner: rgba(143, 184, 130, 0.06);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(255, 255, 255, 0.04);
	--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
	--db-bg-add-section: rgba(143, 184, 130, 0.05);
		--db-border: rgba(143, 184, 130, 0.12);
		--db-border-card: rgba(143, 184, 130, 0.18);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(143, 184, 130, 0.12);
	--db-border-input-focus: #8fb882;
	--db-text: #e8ddd0;
	--db-text-muted: #b8a890;
	--db-text-faint: #887868;
		--db-accent: #8fb882;
		--db-accent-light: #b8d4ae;
	--db-danger: #ef4444;
	--db-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
		--db-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.25);
		--db-progress-from: #8fb882;
		--db-progress-to: #b8d4ae;
		--db-checkbox: #8fb882;
		--db-quote-border: #b8d4ae;
		--db-link: #8fb882;

		/* Tundra aurora dark: deep gray + avocado green glow */
		--db-aurora-bg: linear-gradient(135deg,
			#141816 0%,
			rgba(80, 130, 70, 0.18) 18%,
			rgba(50, 90, 45, 0.22) 36%,
			#141816 50%,
			rgba(70, 120, 60, 0.20) 64%,
			#161a18 82%,
			#141816 100%);
		--db-aurora-size: 400% 400%;
		--db-aurora-speed: 14s;
}

/* ----- 9. BLOSSOM (芭比 — Barbie gelato parlor, opaque ice-cream surfaces) ----- */
/* Formerly a rose-glass Prism clone; rebuilt on the capsule skeleton in
   Barbie pink: berry-night ground, SUNKEN syrup trays (sections), RAISED
   scoops of dense raspberry-cream (cards). Every surface opaque, zero blur —
   the creaminess is layered pillow shadows + satin sheen, never
   translucency. Dimensional treatments + per-section gelato flavors live in
   the BLOSSOM chapter near the AQUA block (design: /tmp/blossom-barbie-design.html). */
.apex-dashboard-root[data-theme="blossom"] {
	--db-bg: #220d1c;
	--db-bg-section: #1b0916;
	--db-bg-card: #3c1e32;
	--db-bg-card-hover: #47243b;
	/* Transparent like aqua: --db-bg-sidebar also feeds the INNER
	   .dashboard-section — an opaque value here paints box-in-box over the
	   tray. Sidebar widgets sit straight on the berry ground. */
	--db-bg-sidebar: transparent;
	--db-bg-input: #2c1123;
	--db-bg-btn: rgba(255, 111, 181, 0.12);
	--db-bg-btn-hover: rgba(255, 111, 181, 0.20);
	--db-bg-banner: #2e1225;
	--db-bg-overlay: linear-gradient(135deg, rgba(10, 2, 8, 0.62) 0%, rgba(10, 2, 8, 0.32) 100%);
	--db-bg-hover: rgba(255, 140, 196, 0.07);
	--db-bg-hover-strong: rgba(255, 140, 196, 0.12);
	--db-bg-add-section: #2a0f20;
	--db-bg-drop-indicator: rgba(255, 111, 181, 0.12);

	--db-border: rgba(255, 175, 208, 0.14);
	--db-border-card: rgba(255, 182, 213, 0.17);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(255, 175, 208, 0.16);
	--db-border-input-focus: #ff6fb5;
	--db-border-btn: rgba(255, 111, 181, 0.26);
	--db-border-add-section: rgba(255, 111, 181, 0.28);

	--db-text: #fce8f2;
	--db-text-muted: #cf9ab4;
	--db-text-faint: #96627b;
	--db-text-inverse: rgba(255, 255, 255, 0.96);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.55);

	/* Bright bubblegum — pops on berry surfaces; CTAs pair it with the
	   white --db-text-inverse like every pink theme in the family. */
	--db-accent: #ff6fb5;
	--db-accent-light: #ffa3cf;
	--db-danger: #f2545b;

	/* Scoop: satin sheen + dense base + pillow drop, all opaque. */
	--db-shadow-card: inset 0 1px 0 rgba(255, 196, 224, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(12, 2, 8, 0.45), 0 12px 28px rgba(12, 2, 8, 0.32);
	--db-shadow-card-hover: inset 0 1px 0 rgba(255, 196, 224, 0.18), inset 0 -3px 8px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(12, 2, 8, 0.5), 0 16px 36px rgba(12, 2, 8, 0.38);
	--db-backdrop-blur: none;

	--db-radius-sm: 10px;
	--db-radius-md: 16px;
	--db-radius-lg: 22px;

		--db-font: 'Quicksand', 'ZCOOL KuaiLe', var(--font-interface);
	--db-progress-from: #ff6fb5;
	--db-progress-to: #ffb1d6;
	--db-checkbox: #ff6fb5;
	--db-quote-border: #ff6fb5;
	--db-link: #ff6fb5;

	/* Opaque modal surfaces — without these dialogs borrow the base theme's
	   deep-blue defaults (the same trap the dark neon/onyx family hit). */
	--db-bg-modal: #2a1224;
	--db-bg-modal-raised: #38182e;

	/* Default flavor: cotton candy. Per-section gelato flavors below in the
	   BLOSSOM chapter. */
	--db-sec-hue: #ff85bd;
	--db-sec-glow: rgba(255, 111, 181, 0.16);

	/* Strawberry night: dense berry milk, static (no aurora drift on blossom). */
	--db-aurora-bg: linear-gradient(160deg,
		#2b1023 0%,
		#200c1b 45%,
		#2c1226 78%,
		#251020 100%);
	--db-aurora-size: 400% 400%;
	--db-aurora-speed: 14s;
}
.theme-light .apex-dashboard-root[data-theme="blossom"] {
	--db-bg: #fdd9ea;
	--db-bg-section: #fbcfe4;
	--db-bg-card: #fffaf7;
	--db-bg-card-hover: #ffffff;
	/* Transparent like aqua — see the dark block note (box-in-box guard). */
	--db-bg-sidebar: transparent;
	--db-bg-input: #ffe6f0;
	--db-bg-btn: rgba(224, 33, 138, 0.08);
	--db-bg-btn-hover: rgba(224, 33, 138, 0.14);
	--db-bg-banner: #fbd0e5;
	--db-bg-overlay: linear-gradient(135deg, rgba(74, 16, 48, 0.45) 0%, rgba(74, 16, 48, 0.18) 100%);
	--db-bg-hover: rgba(224, 33, 138, 0.06);
	--db-bg-hover-strong: rgba(224, 33, 138, 0.11);
	--db-bg-add-section: #ffe2ee;
	--db-bg-drop-indicator: rgba(224, 33, 138, 0.12);

	--db-border: rgba(190, 24, 110, 0.14);
	--db-border-card: rgba(190, 24, 110, 0.16);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(190, 24, 110, 0.18);
	--db-border-input-focus: #e0218a;
	--db-border-btn: rgba(224, 33, 138, 0.20);
	--db-border-add-section: rgba(224, 33, 138, 0.28);

	--db-text: #4a1030;
	--db-text-muted: #93507b;
	--db-text-faint: #bd88a5;

	/* True Barbie pink — deep enough for the white CTA text pairing. */
	--db-accent: #e0218a;
	--db-accent-light: #f062ab;
	--db-danger: #d92b4b;

	/* Scoop: vanilla-cream pillow on the strawberry tray. */
	--db-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -3px 6px rgba(224, 33, 138, 0.05), 0 3px 10px rgba(190, 24, 110, 0.09), 0 12px 28px rgba(190, 24, 110, 0.08);
	--db-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -3px 8px rgba(224, 33, 138, 0.06), 0 6px 16px rgba(190, 24, 110, 0.14), 0 16px 36px rgba(190, 24, 110, 0.12);
	--db-backdrop-blur: none;

	--db-progress-from: #e0218a;
	--db-progress-to: #ffa8cf;
	--db-checkbox: #e0218a;
	--db-quote-border: #e0218a;
	--db-link: #e0218a;

	--db-bg-modal: #fff7fb;
	--db-bg-modal-raised: rgba(224, 33, 138, 0.05);

	--db-sec-hue: #e0218a;
	--db-sec-glow: rgba(224, 33, 138, 0.16);

	/* Strawberry milk: dense opaque blend, vanilla drifting through. */
	--db-aurora-bg: linear-gradient(135deg,
		#fdd3e7 0%,
		#ffe4ef 30%,
		#ffedf2 55%,
		#fff0ea 78%,
		#ffe0ee 100%);
}

/* Blossom: static gradient background */
.apex-dashboard-root[data-theme="blossom"] {
	background: var(--db-aurora-bg);
	transition: color 0.3s ease;
}

/* Tundra: aurora animation — cold gray + avocado green */
.apex-dashboard-root[data-theme="tundra"] {
	background: var(--db-aurora-bg);
	background-size: var(--db-aurora-size);
	animation: db-aurora-shift var(--db-aurora-speed) ease-in-out infinite;
	transition: color 0.3s ease;
	will-change: background-position;
}

/* ===== Shared: transparent sections for tundra, matcha =====
   (blossom left this cluster for its opaque Barbie-gelato rebuild — its
   sections are syrup trays now.)
   NOTE: each group MUST keep its own block. A 3.7.3 lilac-removal edit left
   the section-row/section/kanban selector lists blockless, so they merged
   into the trailing `overflow: visible` rule — which flipped the kanban to
   overflow-y:visible on these themes and froze the board's vertical scroll
   (3.7.4 regression: "right side cannot scroll, sidebar still can"). */
.apex-dashboard-root[data-theme="tundra"] .dashboard-section-row,
.apex-dashboard-root[data-theme="matcha"] .dashboard-section-row {
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 6px;
}

.apex-dashboard-root[data-theme="tundra"] .dashboard-section,
.apex-dashboard-root[data-theme="matcha"] .dashboard-section {
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Tighter kanban gap for transparent-section themes */
.apex-dashboard-root[data-theme="tundra"] .dashboard-kanban,
.apex-dashboard-root[data-theme="matcha"] .dashboard-kanban {
	--db-kanban-gap: 8px;
}

/* Allow card hover translate without clipping top border */
.apex-dashboard-root[data-theme="tundra"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="matcha"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="neon"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="volt"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="magma"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="onyx"] .dashboard-section-cards,
.apex-dashboard-root[data-theme="mono"] .dashboard-section-cards {
	overflow: visible;
}

	/* ----- 13. MATCHA (抹茶·茶碗) — cream ceramic bowl, deep matcha accent ----- */
/* The old sage-on-sage palette collapsed bg into accent. Now the bowl itself
   is warm sage/cream and the tea is DEEP matcha green with gold notes —
   distinct lightness, distinct role. Washes drift at tea-ceremony pace. */
.apex-dashboard-root[data-theme="matcha"] {
	--db-bg: #98a184;
	--db-bg-section: transparent;
	--db-bg-card: rgba(243, 239, 226, 0.88);
	--db-bg-card-hover: rgba(248, 245, 235, 0.96);
	--db-bg-sidebar: transparent;
	--db-bg-input: rgba(79, 112, 40, 0.06);
	--db-bg-btn: rgba(74, 106, 36, 0.08);
	--db-bg-btn-hover: rgba(74, 106, 36, 0.14);
	--db-bg-banner: rgba(200, 169, 106, 0.12);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(79, 112, 40, 0.06);
	--db-bg-hover-strong: rgba(79, 112, 40, 0.11);
	--db-bg-add-section: rgba(243, 239, 226, 0.25);
	--db-bg-drop-indicator: rgba(110, 148, 52, 0.14);

	--db-border: rgba(90, 100, 65, 0.20);
	--db-border-card: rgba(90, 100, 65, 0.24);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(90, 100, 65, 0.28);
	--db-border-input-focus: #4f7028;
	--db-border-btn: rgba(90, 100, 65, 0.22);
	--db-border-add-section: rgba(79, 112, 40, 0.30);

	--db-text: #333d28;
	--db-text-muted: #5c6848;
	--db-text-faint: #8a9478;
	--db-text-inverse: rgba(255, 255, 255, 0.95);
	--db-text-inverse-muted: rgba(255, 255, 255, 0.55);

	/* Deep matcha — clearly darker and yellower than the sage bowl */
	--db-accent: #4a6a24;
	--db-accent-light: #6e9434;
	--db-danger: #c9184a;

	--db-shadow-card: 0 2px 10px rgba(80, 95, 55, 0.14);
	--db-shadow-card-hover: 0 8px 28px rgba(80, 95, 55, 0.20), 0 0 18px rgba(110, 148, 52, 0.12);
	--db-backdrop-blur: none;

	--db-radius-sm: 10px;
	--db-radius-md: 16px;
	--db-radius-lg: 20px;

	--db-font: 'Nunito', 'LXGW WenKai', var(--font-interface);
	/* Tea-ceremony duo: matcha into gold */
	--db-progress-from: #6e9434;
	--db-progress-to: #c8a96a;
	--db-checkbox: #4f7028;
	--db-quote-border: #b08d4f;
	--db-link: #4f7028;

	/* Opaque modal surfaces matching the cream cards */
	--db-bg-modal: #f1edde;
	--db-bg-modal-raised: rgba(79, 112, 40, 0.05);

	/* Tea garden washes: matcha, gold, cream, deep tea */
	--db-aurora-bg: linear-gradient(135deg,
		#98a184 0%,
		rgba(110, 148, 52, 0.18) 16%,
		rgba(200, 169, 106, 0.16) 34%,
		rgba(245, 240, 222, 0.18) 52%,
		rgba(79, 112, 40, 0.14) 70%,
		rgba(200, 169, 106, 0.12) 86%,
		#98a184 100%);
	--db-aurora-size: 250% 250%;
	--db-aurora-speed: 26s;
}

/* Evening matcha — deep tea base for DARK Obsidian (Rae: the light-only
   palette left filenames dark-on-dark wherever Obsidian's own dark chrome
   bled through translucent surfaces). Deep tea green bg, cream text, the
   same matcha-gold accent family. */
.theme-dark .apex-dashboard-root[data-theme="matcha"] {
	--db-bg: #1a2014;
	--db-bg-section: transparent;
	--db-bg-card: rgba(110, 148, 52, 0.10);
	--db-bg-card-hover: rgba(110, 148, 52, 0.18);
	--db-bg-sidebar: transparent;
	--db-bg-input: rgba(110, 148, 52, 0.06);
	--db-bg-btn: rgba(110, 148, 52, 0.10);
	--db-bg-btn-hover: rgba(110, 148, 52, 0.18);
	--db-bg-banner: rgba(200, 169, 106, 0.08);
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
	--db-bg-hover: rgba(255, 255, 255, 0.04);
	--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
	--db-bg-add-section: rgba(110, 148, 52, 0.06);
	--db-bg-drop-indicator: rgba(110, 148, 52, 0.14);

	--db-border: rgba(184, 212, 174, 0.12);
	--db-border-card: rgba(184, 212, 174, 0.18);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(184, 212, 174, 0.12);
	--db-border-input-focus: #b8d4ae;
	--db-border-btn: rgba(184, 212, 174, 0.14);
	--db-border-add-section: rgba(184, 212, 174, 0.20);

	--db-text: #ece7d5;
	--db-text-muted: #c2bda6;
	--db-text-faint: #8f8b74;
	--db-text-inverse: rgba(30, 36, 22, 0.92);
	--db-text-inverse-muted: rgba(30, 36, 22, 0.55);

	--db-accent: #a4c86a;
	--db-accent-light: #c8e096;
	--db-danger: #ff5c7a;

	--db-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
	--db-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.25);
	--db-backdrop-blur: none;

	--db-radius-sm: 10px;
	--db-radius-md: 16px;
	--db-radius-lg: 20px;

	--db-font: 'Nunito', 'LXGW WenKai', var(--font-interface);
	--db-progress-from: #a4c86a;
	--db-progress-to: #c8a96a;
	--db-checkbox: #a4c86a;
	--db-quote-border: #c8a96a;
	--db-link: #a4c86a;

	--db-bg-modal: #20261a;
	--db-bg-modal-raised: rgba(255, 255, 255, 0.04);

	--db-aurora-bg: linear-gradient(135deg,
		#1a2014 0%,
		rgba(110, 148, 52, 0.16) 18%,
		rgba(200, 169, 106, 0.10) 38%,
		#1a2014 52%,
		rgba(79, 112, 40, 0.18) 70%,
		#1c2316 86%,
		#1a2014 100%);
	--db-aurora-size: 250% 250%;
	--db-aurora-speed: 26s;
}

/* Morning matcha latte — rice-paper base, green only where the tea is */
.theme-light .apex-dashboard-root[data-theme="matcha"] {
	--db-bg: #f1efe3;
	--db-bg-section: transparent;
	--db-bg-card: rgba(255, 254, 248, 0.85);
	--db-bg-card-hover: rgba(255, 255, 252, 0.95);
	--db-bg-sidebar: transparent;
	--db-bg-input: rgba(79, 112, 40, 0.05);
	--db-bg-btn: rgba(74, 106, 36, 0.08);
	--db-bg-btn-hover: rgba(74, 106, 36, 0.14);
	--db-bg-banner: rgba(110, 148, 52, 0.08);
	--db-bg-overlay: linear-gradient(135deg, rgba(30,40,30,0.4) 0%, rgba(30,40,30,0.15) 100%);
	--db-bg-hover: rgba(79, 112, 40, 0.05);
	--db-bg-hover-strong: rgba(79, 112, 40, 0.09);
	--db-bg-add-section: rgba(255, 254, 248, 0.50);
	--db-bg-drop-indicator: rgba(79, 112, 40, 0.10);

	--db-border: rgba(70, 84, 50, 0.14);
	--db-border-card: rgba(70, 84, 50, 0.18);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: rgba(70, 84, 50, 0.22);
	--db-border-input-focus: #4f7028;
	--db-border-btn: rgba(70, 84, 50, 0.16);
	--db-border-add-section: rgba(70, 84, 50, 0.25);

	--db-text: #2c3520;
	--db-text-muted: #57624a;
	--db-text-faint: #94a088;

	--db-accent: #4a6a24;
	--db-accent-light: #6e9434;
	--db-danger: #d6336c;

	--db-shadow-card: 0 2px 10px rgba(110, 148, 52, 0.10);
	--db-shadow-card-hover: 0 8px 28px rgba(110, 148, 52, 0.14), 0 0 18px rgba(200, 169, 106, 0.10);

	--db-progress-from: #4f7028;
	--db-progress-to: #c8a96a;
	--db-checkbox: #4f7028;
	--db-quote-border: #b08d4f;
	--db-link: #4f7028;

	--db-bg-modal: #ffffff;
	--db-bg-modal-raised: rgba(79, 112, 40, 0.05);

	--db-aurora-bg: linear-gradient(135deg,
		#f1efe3 0%,
		rgba(110, 148, 52, 0.14) 18%,
		rgba(200, 169, 106, 0.12) 38%,
		rgba(150, 162, 132, 0.12) 58%,
		rgba(245, 240, 222, 0.18) 78%,
		#f1efe3 100%);
}

/* Matcha: slow tea-garden washes drifting behind the cream cards */
.apex-dashboard-root[data-theme="matcha"] {
	background: var(--db-aurora-bg);
	background-size: var(--db-aurora-size);
	animation: db-aurora-shift var(--db-aurora-speed) ease-in-out infinite;
	transition: color 0.3s ease;
	will-change: background-position;
	backface-visibility: hidden;
}


/* ----- 14. NEON (霓虹) — Near-black + neon magenta, identical in light & dark ----- */
	.apex-dashboard-root[data-theme="neon"] {
		--db-bg: #0a0a0c;
		/* Opaque modal-layer surface: dialogs render outside this root where the
		   near-black gradient behind doesn't exist, so --db-bg-card (transparent)
		   would leave them floating on the scrim alone. */
		--db-bg-modal: #130f17;
		--db-bg-modal-raised: rgba(255, 255, 255, 0.06);
		--db-bg-section: transparent;
		--db-bg-card: transparent;
		--db-bg-card-hover: rgba(255, 46, 136, 0.05);
		--db-bg-sidebar: transparent;
		--db-bg-input: rgba(255, 46, 136, 0.04);
		--db-bg-btn: rgba(255, 46, 136, 0.06);
		--db-bg-btn-hover: rgba(255, 46, 136, 0.12);
		--db-bg-banner: rgba(255, 46, 136, 0.05);
		--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
		--db-bg-hover: rgba(255, 255, 255, 0.04);
		--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
		--db-bg-add-section: rgba(255, 46, 136, 0.03);
		--db-bg-drop-indicator: rgba(255, 46, 136, 0.10);

		--db-border: rgba(255, 255, 255, 0.08);
		--db-border-card: rgba(255, 46, 136, 0.14);
		--db-border-section: transparent;
		--db-border-sidebar: transparent;
		--db-border-input: rgba(255, 46, 136, 0.12);
		--db-border-input-focus: #ff2e88;
		--db-border-btn: rgba(255, 46, 136, 0.16);
		--db-border-add-section: rgba(255, 46, 136, 0.18);

		--db-text: #FAFAFA;
		--db-text-muted: #A8A8A8;
		--db-text-faint: #5C5C5C;
		--db-text-inverse: rgba(255, 255, 255, 0.96);
		--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

		--db-accent: #ff2e88;
		--db-accent-light: #ff5ca8;
		--db-danger: #ffb020;

		--db-shadow-card: none;
		--db-shadow-card-hover: 0 0 0 1px rgba(255, 46, 136, 0.22), 0 8px 24px rgba(0, 0, 0, 0.6);
		--db-backdrop-blur: none;

		--db-radius-sm: 4px;
		--db-radius-md: 8px;
		--db-radius-lg: 12px;

		--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
		--db-progress-from: #ff2e88;
		--db-progress-to: #ff5ca8;
		--db-checkbox: #ff2e88;
		--db-quote-border: #ff2e88;
		--db-link: #ff2e88;
	}
	/* Neon: near-black with a whisper of magenta at the top — identical in light & dark */
	.apex-dashboard-root[data-theme="neon"] {
		background:
			radial-gradient(ellipse at 50% 0%, rgba(255, 46, 136, 0.05) 0%, transparent 45%),
			linear-gradient(180deg, #0d0a0f 0%, #0a0a0c 70%);
		transition: color 0.3s ease;
	}

	/* ----- 16. VOLT (电光) — Near-black + electric cyan, identical in light & dark ----- */
	.apex-dashboard-root[data-theme="volt"] {
		--db-bg: #090a0e;
		--db-bg-modal: #0e1218;
		--db-bg-modal-raised: rgba(255, 255, 255, 0.06);
		--db-bg-section: transparent;
		--db-bg-card: transparent;
		--db-bg-card-hover: rgba(0, 194, 255, 0.05);
		--db-bg-sidebar: transparent;
		--db-bg-input: rgba(0, 194, 255, 0.04);
		--db-bg-btn: rgba(0, 194, 255, 0.06);
		--db-bg-btn-hover: rgba(0, 194, 255, 0.12);
		--db-bg-banner: rgba(0, 194, 255, 0.05);
		--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
		--db-bg-hover: rgba(255, 255, 255, 0.04);
		--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
		--db-bg-add-section: rgba(0, 194, 255, 0.03);
		--db-bg-drop-indicator: rgba(0, 194, 255, 0.10);

		--db-border: rgba(255, 255, 255, 0.08);
		--db-border-card: rgba(0, 194, 255, 0.14);
		--db-border-section: transparent;
		--db-border-sidebar: transparent;
		--db-border-input: rgba(0, 194, 255, 0.12);
		--db-border-input-focus: #00c2ff;
		--db-border-btn: rgba(0, 194, 255, 0.16);
		--db-border-add-section: rgba(0, 194, 255, 0.18);

		--db-text: #FAFAFA;
		--db-text-muted: #A8A8A8;
		--db-text-faint: #5C5C5C;
		--db-text-inverse: rgba(0, 0, 0, 0.85);
		--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

		--db-accent: #00c2ff;
		--db-accent-light: #4dd6ff;
		--db-danger: #ff5c5c;

		--db-shadow-card: none;
		--db-shadow-card-hover: 0 0 0 1px rgba(0, 194, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.6);
		--db-backdrop-blur: none;

		--db-radius-sm: 4px;
		--db-radius-md: 8px;
		--db-radius-lg: 12px;

		--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
		--db-progress-from: #00c2ff;
		--db-progress-to: #4dd6ff;
		--db-checkbox: #00c2ff;
		--db-quote-border: #00c2ff;
		--db-link: #00c2ff;
	}
	/* Volt: cool near-black with a whisper of cyan at the top — identical in light & dark */
	.apex-dashboard-root[data-theme="volt"] {
		background:
			radial-gradient(ellipse at 50% 0%, rgba(0, 194, 255, 0.05) 0%, transparent 45%),
			linear-gradient(180deg, #0b0e14 0%, #090a0e 70%);
		transition: color 0.3s ease;
	}

	/* ----- 17. MAGMA (熔岩) — Warm near-black + lava orange, identical in light & dark ----- */
	.apex-dashboard-root[data-theme="magma"] {
		--db-bg: #0c0a08;
		--db-bg-modal: #161009;
		--db-bg-modal-raised: rgba(255, 255, 255, 0.06);
		--db-bg-section: transparent;
		--db-bg-card: transparent;
		--db-bg-card-hover: rgba(255, 107, 26, 0.05);
		--db-bg-sidebar: transparent;
		--db-bg-input: rgba(255, 107, 26, 0.04);
		--db-bg-btn: rgba(255, 107, 26, 0.06);
		--db-bg-btn-hover: rgba(255, 107, 26, 0.12);
		--db-bg-banner: rgba(255, 107, 26, 0.05);
		--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
		--db-bg-hover: rgba(255, 255, 255, 0.04);
		--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
		--db-bg-add-section: rgba(255, 107, 26, 0.03);
		--db-bg-drop-indicator: rgba(255, 107, 26, 0.10);

		--db-border: rgba(255, 255, 255, 0.08);
		--db-border-card: rgba(255, 107, 26, 0.14);
		--db-border-section: transparent;
		--db-border-sidebar: transparent;
		--db-border-input: rgba(255, 107, 26, 0.12);
		--db-border-input-focus: #ff6b1a;
		--db-border-btn: rgba(255, 107, 26, 0.16);
		--db-border-add-section: rgba(255, 107, 26, 0.18);

		--db-text: #FAFAFA;
		--db-text-muted: #A8A8A8;
		--db-text-faint: #5C5C5C;
		--db-text-inverse: rgba(255, 255, 255, 0.96);
		--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

		--db-accent: #ff6b1a;
		--db-accent-light: #ff9448;
		--db-danger: #ff5c5c;

		--db-shadow-card: none;
		--db-shadow-card-hover: 0 0 0 1px rgba(255, 107, 26, 0.22), 0 8px 24px rgba(0, 0, 0, 0.6);
		--db-backdrop-blur: none;

		--db-radius-sm: 4px;
		--db-radius-md: 8px;
		--db-radius-lg: 12px;

		--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
		--db-progress-from: #ff6b1a;
		--db-progress-to: #ff9448;
		--db-checkbox: #ff6b1a;
		--db-quote-border: #ff6b1a;
		--db-link: #ff6b1a;
	}
	/* Magma: warm near-black with a whisper of lava glow at the top — identical in light & dark */
	.apex-dashboard-root[data-theme="magma"] {
		background:
			radial-gradient(ellipse at 50% 0%, rgba(255, 107, 26, 0.05) 0%, transparent 45%),
			linear-gradient(180deg, #120d09 0%, #0c0a08 70%);
		transition: color 0.3s ease;
	}

	/* ----- 18. ONYX (曜黑) — Pure black + lemon, identical in light & dark ----- */
	.apex-dashboard-root[data-theme="onyx"] {
		--db-bg: #000000;
		--db-bg-modal: #0e0e0e;
		--db-bg-modal-raised: rgba(255, 255, 255, 0.06);
		--db-bg-section: transparent;
		--db-bg-card: transparent;
		--db-bg-card-hover: rgba(233, 255, 64, 0.05);
		--db-bg-sidebar: transparent;
		--db-bg-input: rgba(233, 255, 64, 0.04);
		--db-bg-btn: rgba(233, 255, 64, 0.06);
		--db-bg-btn-hover: rgba(233, 255, 64, 0.12);
		--db-bg-banner: rgba(233, 255, 64, 0.05);
		--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
		--db-bg-hover: rgba(255, 255, 255, 0.04);
		--db-bg-hover-strong: rgba(255, 255, 255, 0.07);
		--db-bg-add-section: rgba(233, 255, 64, 0.03);
		--db-bg-drop-indicator: rgba(233, 255, 64, 0.10);

		--db-border: rgba(255, 255, 255, 0.08);
		--db-border-card: rgba(233, 255, 64, 0.14);
		--db-border-section: transparent;
		--db-border-sidebar: transparent;
		--db-border-input: rgba(233, 255, 64, 0.12);
		--db-border-input-focus: #e9ff40;
		--db-border-btn: rgba(233, 255, 64, 0.16);
		--db-border-add-section: rgba(233, 255, 64, 0.18);

		--db-text: #FAFAFA;
		--db-text-muted: #A8A8A8;
		--db-text-faint: #5C5C5C;
		--db-text-inverse: rgba(0, 0, 0, 0.85);
		--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

		--db-accent: #e9ff40;
		--db-accent-light: #f5ff8a;
		--db-danger: #ff5c5c;

		--db-shadow-card: none;
		--db-shadow-card-hover: 0 0 0 1px rgba(233, 255, 64, 0.22), 0 8px 24px rgba(0, 0, 0, 0.6);
		--db-backdrop-blur: none;

		--db-radius-sm: 4px;
		--db-radius-md: 8px;
		--db-radius-lg: 12px;

		--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
		--db-progress-from: #e9ff40;
		--db-progress-to: #f5ff8a;
		--db-checkbox: #e9ff40;
		--db-quote-border: #e9ff40;
		--db-link: #e9ff40;
	}
	/* Onyx: pure black with a whisper of lemon at the top — identical in light & dark */
	.apex-dashboard-root[data-theme="onyx"] {
		background:
			radial-gradient(ellipse at 50% 0%, rgba(233, 255, 64, 0.04) 0%, transparent 45%),
			linear-gradient(180deg, #0A0A0A 0%, #000000 70%);
		transition: color 0.3s ease;
	}

	/* ----- 19. MONO (朱砂 / Vermilion) — sumi ink on rice paper, seal-red accent ----- */
/* Pure neutral black/white read funereal. The fix keeps the ink/paper pairing:
   warm rice-paper ground, blue-undertone sumi ink, a whisper of ink-wash
   drift, and ONE cinnabar seal accent like the red stamp on a scroll. */
.apex-dashboard-root[data-theme="mono"] {
	--db-bg: #faf9f4;
	--db-bg-section: transparent;
	--db-bg-card: #fefdf9;
	--db-bg-card-hover: #f5f3ea;
	--db-bg-sidebar: transparent;
	--db-bg-input: #f3f1e8;
	--db-bg-btn: rgba(192, 68, 46, 0.08);
	--db-bg-btn-hover: rgba(192, 68, 46, 0.14);
	--db-bg-banner: #f1efe6;
	--db-bg-overlay: linear-gradient(135deg, rgba(20,24,28,0.55) 0%, rgba(20,24,28,0.25) 100%);
	--db-bg-hover: #f2f0e7;
	--db-bg-hover-strong: #e9e7dc;
	--db-bg-add-section: #f6f4ec;
	--db-bg-drop-indicator: rgba(192, 68, 46, 0.08);

	--db-border: #dedcd2;
	--db-border-card: #dedcd2;
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: #dedcd2;
	--db-border-input-focus: #c0442e;
	--db-border-btn: rgba(192, 68, 46, 0.22);
	--db-border-add-section: #cfcdc2;

	--db-text: #1d2126;
	--db-text-muted: #4e5658;
	--db-text-faint: #9aa3a6;
	--db-text-inverse: #ffffff;
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	/* Cinnabar seal — the single red stamp on the ink painting */
	--db-accent: #c0442e;
	--db-accent-light: #d96a4f;
	--db-danger: #dc2626;

	--db-shadow-card: 0 1px 2px rgba(29, 33, 38, 0.05);
	--db-shadow-card-hover: 0 4px 16px rgba(29, 33, 38, 0.08);
	--db-backdrop-blur: none;

	--db-radius-sm: 4px;
	--db-radius-md: 8px;
	--db-radius-lg: 12px;

	--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
	/* Seal vermilion dissolving into ink */
	--db-progress-from: #c0442e;
	--db-progress-to: #4e5658;
	--db-checkbox: #c0442e;
	--db-quote-border: #1d2126;
	--db-link: #c0442e;

	/* Opaque modal surfaces */
	--db-bg-modal: #fefdf9;
	--db-bg-modal-raised: rgba(29, 33, 38, 0.04);

	/* 墨分五色: barely-there ink stains diffusing across the paper */
	--db-aurora-bg: linear-gradient(135deg,
		#faf9f4 0%,
		rgba(78, 86, 88, 0.045) 18%,
		rgba(29, 33, 38, 0.03) 40%,
		rgba(157, 163, 166, 0.05) 58%,
		rgba(29, 33, 38, 0.035) 80%,
		#faf9f4 100%);
	--db-aurora-size: 250% 250%;
	--db-aurora-speed: 40s;
}
.theme-dark .apex-dashboard-root[data-theme="mono"] {
	/* Night ink — lifted off pure black, warm paper-white text */
	--db-bg: #111417;
	--db-bg-section: transparent;
	--db-bg-card: #171b1f;
	--db-bg-card-hover: #1f2429;
	--db-bg-sidebar: transparent;
	--db-bg-input: #1a1f24;
	--db-bg-btn: rgba(224, 91, 69, 0.06);
	--db-bg-btn-hover: rgba(224, 91, 69, 0.12);
	--db-bg-banner: #16191d;
	--db-bg-overlay: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 100%);
	--db-bg-hover: #1c2126;
	--db-bg-hover-strong: #262c32;
	--db-bg-add-section: #16191d;
	--db-bg-drop-indicator: rgba(224, 91, 69, 0.10);

	--db-border: #262b30;
	--db-border-card: #262b30;
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: #262b30;
	--db-border-input-focus: #e05b45;
	--db-border-btn: rgba(224, 91, 69, 0.22);
	--db-border-add-section: #2e343a;

	--db-text: #f4f2ea;
	--db-text-muted: #b8b5aa;
	--db-text-faint: #6b6f73;
	--db-text-inverse: #ffffff;
	--db-text-inverse-muted: rgba(255, 255, 255, 0.55);

	--db-accent: #e05b45;
	--db-accent-light: #ef8a70;
	--db-danger: #ef4444;

	--db-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
	--db-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5);

	--db-progress-from: #e05b45;
	--db-progress-to: #b8b5aa;
	--db-checkbox: #e05b45;
	--db-quote-border: #f4f2ea;
	--db-link: #e05b45;

	--db-bg-modal: #171b1f;
	--db-bg-modal-raised: rgba(244, 242, 234, 0.05);

	--db-aurora-bg: linear-gradient(135deg,
		#111417 0%,
		rgba(244, 242, 234, 0.05) 20%,
		rgba(157, 163, 166, 0.04) 45%,
		rgba(244, 242, 234, 0.035) 70%,
		#111417 100%);
}

/* Mono: ink-wash drift — monochrome, the slowest of all themes */
.apex-dashboard-root[data-theme="mono"] {
	background: var(--db-aurora-bg);
	background-size: var(--db-aurora-size);
	animation: db-aurora-shift var(--db-aurora-speed) ease-in-out infinite;
	transition: color 0.3s ease;
	will-change: background-position;
	backface-visibility: hidden;
}


/* ===== Shared: transparent sections for neon, volt, magma, onyx, mono ===== */
.apex-dashboard-root[data-theme="neon"] .dashboard-section-row,
.apex-dashboard-root[data-theme="volt"] .dashboard-section-row,
.apex-dashboard-root[data-theme="magma"] .dashboard-section-row,
.apex-dashboard-root[data-theme="onyx"] .dashboard-section-row,
.apex-dashboard-root[data-theme="mono"] .dashboard-section-row {
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 6px;
}

.apex-dashboard-root[data-theme="neon"] .dashboard-section,
.apex-dashboard-root[data-theme="volt"] .dashboard-section,
.apex-dashboard-root[data-theme="magma"] .dashboard-section,
.apex-dashboard-root[data-theme="onyx"] .dashboard-section,
.apex-dashboard-root[data-theme="mono"] .dashboard-section {
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Tighter kanban gap for neon, volt, magma, onyx */
.apex-dashboard-root[data-theme="neon"] .dashboard-kanban,
.apex-dashboard-root[data-theme="volt"] .dashboard-kanban,
.apex-dashboard-root[data-theme="magma"] .dashboard-kanban,
.apex-dashboard-root[data-theme="onyx"] .dashboard-kanban,
.apex-dashboard-root[data-theme="mono"] .dashboard-kanban {
	gap: 8px;
}

/* =================================================================
   COMPONENT STYLES
   ================================================================= */

/* Reset Obsidian view-content padding for dashboard */
.workspace-leaf-content[data-type="apex-dashboard-view"] .view-content {
	padding: 0 !important;
}

/* ===== Root ===== */
.apex-dashboard-root {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	isolation: isolate;
	/* contain:paint makes this box the containing block for FIXED descendants
	   (the immersive poster layer). Without it the fixed poster anchored to
	   the VIEWPORT and, whenever the left sidebar collapsed, washed over the
	   nav strip — "the navigation took our background color". */
	contain: paint;
	background: var(--db-bg);
	color: var(--db-text);
	font-family: var(--db-font);
	transition: background 0.3s ease, color 0.3s ease;
}

/* ===== User background-image layer (Appearance Studio) =====
   Painted directly on the root, behind all content. Glass surfaces
   (backdrop-filter: var(--db-backdrop-blur)) auto-frost over it. */
.apex-dashboard-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
}
.apex-dashboard-bg-scrim {
	position: absolute;
	inset: 0;
}
/* Lift dashboard content above the background layer.
   Banner sits one level above main so its collapsed bookmark tab — which pokes
   downward past the 4px collapsed banner into main's area — stays clickable. */
.apex-dashboard-root > .dashboard-banner {
	position: relative;
	z-index: 2;
}
.apex-dashboard-root > .dashboard-main,
.apex-dashboard-root > .dashboard-mobile-widget-bar {
	position: relative;
	z-index: 1;
}

/* ===== Settings Footer ===== */
/* Section host in the declarative (1.13+) settings tab: one definition row
 * turned into a plain block container so its many Setting rows stack
 * vertically, matching the pre-1.13 fallback layout. Higher specificity than
 * the stock .setting-item flex rules. */
.setting-item.dashboard-settings-section {
	display: block;
	padding: 0;
	border: none;
}

/* Obsidian's app.css gives every .setting-item's first child a 16px
 * inline-end margin (spacing for the standard info|control row). Our section
 * rows start with full-width blocks — the first card / first setting row —
 * which that margin shrinks by 16px and pushes 16px off the right edge.
 * Neutralize it so the first card (微信读书 / 番茄钟) and the first setting
 * (language dropdown) line up with everything below. */
.setting-item.dashboard-settings-section > *:first-child {
	margin-inline-end: 0;
}

/* Sections on an inactive tab. !important: themes restyle .setting-item with
 * their own display rules, which would resurrect hidden rows. */
.setting-item.dashboard-settings-section.dashboard-settings-page-hidden {
	display: none !important;
}

.dashboard-settings-footer {
	text-align: center;
	padding: 30px 0 10px;
	margin-top: 20px;
	font-size: 0.8em;
	color: var(--text-faint);
	opacity: 0.5;
	letter-spacing: 0.03em;
	user-select: none;
	pointer-events: none;
}

/* ===== Settings: visual layout picker =====
 * Two miniature board diagrams (side rail vs stacked strip) with a centered
 * radio circle under each. The settings pane has no --db-* theme scope, so
 * every token falls back to Obsidian's own variables (the established
 * var(--db-x, var(--obsidian-x)) pattern).
 *
 * The preview mocks read top-down in three zones — banner bar, widget zone
 * (rail / strip, strong accent tint), main sections (soft tint) — so the two
 * layouts differ at a glance. The preview box is fixed-height with overflow
 * hidden and generous bottom clearance: nothing inside may ever crowd the
 * label row below (the old mock's flex bars could overflow onto it). */
.dashboard-layout-picker {
	display: flex;
	gap: 12px;
	margin: 4px 0 14px 0;
	flex-wrap: wrap;
}

.dashboard-layout-option {
	flex: 1 1 150px;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 10px 10px 10px;
	background: var(--db-bg-card, var(--background-primary));
	border: 1.5px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-md, 10px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-layout-option:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-layout-option--active {
	border-color: var(--db-accent, var(--interactive-accent));
	box-shadow: 0 0 0 1px var(--db-accent, var(--interactive-accent));
}

.dashboard-layout-preview {
	width: 122px;
	height: 88px;
	box-sizing: border-box;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 auto;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 5%, var(--background-secondary));
}

/* Zone 1: the banner bar spanning the full mock width. */
.dashboard-layout-preview .lp-banner {
	height: 12px;
	flex-shrink: 0;
	border-radius: 3px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 32%, transparent);
}

/* Zone 2a (side): body row with the widget rail on the LEFT. */
.dashboard-layout-preview .lp-main {
	flex: 1;
	min-height: 0;
	display: flex;
	gap: 5px;
}

.dashboard-layout-preview .lp-rail {
	width: 26%;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Widget blocks — the strong tint, so the widget zone pops from the sections. */
.dashboard-layout-preview .lp-widget {
	flex: 1;
	min-height: 4px;
	border-radius: 2.5px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 42%, transparent);
}

/* Zone 2b (stacked): the widget strip under the banner. */
.dashboard-layout-preview--stacked .lp-strip {
	height: 18px;
	flex-shrink: 0;
	display: flex;
	gap: 3px;
}

.dashboard-layout-preview--stacked .lp-strip .lp-widget {
	flex: 1;
	min-height: 0;
}

/* Zone 3: main sections — the soft tint, stacked as rows. */
.dashboard-layout-preview .lp-board {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.dashboard-layout-preview .lp-board .lp-section {
	flex: 1;
	min-height: 4px;
	border-radius: 2.5px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 16%, transparent);
}

/* Zone 2c (immersive): the poster washes the whole mock (no banner strip),
   unequal glass tiles float on it in a tiny free grid. */
.dashboard-layout-preview--immersive {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #10131a),
		color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, #10131a));
}
.dashboard-layout-preview--immersive .lp-grid {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 3px;
}
.dashboard-layout-preview--immersive .lp-grid .lp-cell {
	border-radius: 2.5px;
	background: color-mix(in srgb, #ffffff 30%, transparent);
	border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
	min-height: 4px;
}

.dashboard-layout-option-label {
	font-size: 0.82em;
	color: var(--text-normal);
	text-align: center;
}

/* The radio circle is THE click target — a real button element, with theme
   button chrome fully reset so no theme can give it a box or a fixed height
   that overflows the card (the failure mode of the old button-bar card). */
.dashboard-layout-radio {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	box-sizing: border-box;
	border-radius: 50% !important;
	border: 1.5px solid var(--text-muted) !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.dashboard-layout-radio:hover {
	border-color: var(--db-accent, var(--interactive-accent)) !important;
}

.dashboard-layout-radio-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: transparent;
	transition: background 0.15s ease;
}

.dashboard-layout-option--active .dashboard-layout-radio {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-layout-option--active .dashboard-layout-radio-dot {
	background: var(--db-accent, var(--interactive-accent));
}

/* ===== Settings fallback tab bar (pre-1.13 builds) =====
 * 1.13+ renders the three pages via Obsidian's native navigable definitions;
 * this bar only exists in the display() fallback. */
.dashboard-settings-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--db-radius-md, 8px);
	background: var(--background-modifier-hover);
	border: 1px solid var(--background-modifier-border);
	margin-bottom: 16px;
}

.dashboard-settings-tab {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	border-radius: var(--db-radius-sm, 6px);
	font-size: 0.85em;
	font-weight: 500;
	color: var(--text-muted);
	transition: color 0.15s ease, background 0.15s ease;
}

/* Icon sized to the tab's text so it never dwarfs the label, and vertically
   centered by the flex row above. */
.dashboard-settings-tab-icon {
	display: inline-flex;
	align-items: center;
}

.dashboard-settings-tab-icon svg {
	width: 1em;
	height: 1em;
}

.dashboard-settings-tab:hover {
	color: var(--text-normal);
}

.dashboard-settings-tab.active {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-text-inverse, var(--text-on-accent, #fff));
	font-weight: 600;
}

/* ===== About Author page ===== */
.dashboard-about {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0 24px;
}

.dashboard-about-intro-line1 {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--text-normal);
	margin-bottom: 4px;
}

.dashboard-about-intro-line {
	font-size: 0.85em;
	color: var(--text-muted);
	line-height: 1.6;
}

.dashboard-about-divider {
	height: 1px;
	background: var(--background-modifier-border);
	margin: 20px auto 6px;
	max-width: 320px;
}

.dashboard-about-section {
	margin-top: 18px;
}

/* Section headings render as accent-tinted pills — a colored frame that sets
   them apart from the body text below (theme accent, light/dark adaptive). */
.dashboard-about-section-title {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 3px 16px;
	margin-bottom: 12px;
	border-radius: 999px;
	color: var(--db-accent, var(--text-accent));
	background: color-mix(in srgb, var(--db-accent, #8b5cf6) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-accent, #8b5cf6) 28%, transparent);
}

.dashboard-about-project {
	line-height: 1.9;
	font-size: 0.85em;
}

.dashboard-about-project-name {
	font-weight: 600;
	color: var(--text-normal);
}

.dashboard-about-project-sep {
	color: var(--text-faint);
	margin: 0 6px;
}

.dashboard-about-project-desc {
	color: var(--text-muted);
}

.dashboard-about-follow-name {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--text-normal);
	margin-bottom: 4px;
}

.dashboard-about-follow-platforms {
	font-size: 0.8em;
	color: var(--text-muted);
}

.dashboard-about-contact-row {
	line-height: 2;
	font-size: 0.85em;
}

.dashboard-about-contact-label {
	color: var(--text-muted);
}

.dashboard-about-code {
	font-family: var(--font-monospace);
	background: var(--background-modifier-hover);
	border-radius: 4px;
	padding: 1px 6px;
	cursor: pointer;
}

.dashboard-about-code:hover {
	background: var(--background-modifier-active-hover);
}

.dashboard-about-link {
	color: var(--db-accent, var(--text-accent));
	text-decoration: none;
}

.dashboard-about-link:hover {
	text-decoration: underline;
}

.dashboard-about-support-thanks {
	font-size: 0.85em;
	color: var(--text-muted);
	margin-bottom: 12px;
}

.dashboard-about-support-img {
	max-width: 100%;
	border-radius: var(--db-radius-md, 10px);
	cursor: zoom-in;
	border: 1px solid var(--background-modifier-border);
}

/* ===== Workspace settings (registry rows) ===== */
/* Standalone divider before the workspace group. NOT a border on the heading
   .setting-item — themes give setting items rounded backgrounds and clip any
   border we draw there; a separate element keeps a straight, square line with
   spacing under our control. */
.dashboard-settings-divider {
	height: 1px;
	background: var(--background-modifier-border);
	margin: 18px 0 10px;
}

.dashboard-workspace-row .dashboard-workspace-drag-handle {
	align-self: center;
	display: flex;
	color: var(--text-faint);
	opacity: 0.5;
	cursor: grab;
}

.dashboard-workspace-row .dashboard-workspace-drag-handle:hover {
	opacity: 1;
}

.dashboard-workspace-row--dragging {
	opacity: 0.45;
}

/* Drop indicators: box-shadow instead of border so native row separators
   and layout are untouched. */
.dashboard-workspace-row--drop-before {
	box-shadow: 0 -2px 0 0 var(--interactive-accent);
}

.dashboard-workspace-row--drop-after {
	box-shadow: 0 2px 0 0 var(--interactive-accent);
}

.dashboard-workspace-path-input {
	width: 160px;
}

/* Aurora gradient animation for aurora theme only */
.apex-dashboard-root[data-theme="aurora"] {
	background: var(--db-aurora-bg);
	background-size: var(--db-aurora-size);
	animation: db-aurora-shift var(--db-aurora-speed) ease-in-out infinite;
	transition: color 0.3s ease;
	will-change: background-position;
	backface-visibility: hidden;
}

/* Respect reduced-motion: stop the aurora drift for users who disable animation */
@media (prefers-reduced-motion: reduce) {
	.apex-dashboard-root[data-theme="aurora"],
	.apex-dashboard-root[data-theme="tundra"],
	.apex-dashboard-root[data-theme="earth"],
	.apex-dashboard-root[data-theme="nordic"],
	.apex-dashboard-root[data-theme="matcha"],
	.apex-dashboard-root[data-theme="mono"] {
		animation: none;
		/* Pin to the animation's start frame — without this the 400%-sized
		   gradient falls back to background-position 0% 0% (top-left corner),
		   which renders darker and misplaces the glow band. */
		background-position: 0% 50%;
	}
}

/* Mobile: stop the aurora background drift. The animated background-position
   forces a full-root repaint every frame; on phones (iOS WKWebView in
   particular) this competes with scrolling and janks the whole dashboard.
   Pinning the gradient to the animation's start frame keeps the theme's look
   (the glow band sits exactly where the drift starts); desktop keeps the drift. */
@media (max-width: 640px) {
	.apex-dashboard-root[data-theme="aurora"],
	.apex-dashboard-root[data-theme="tundra"],
	.apex-dashboard-root[data-theme="earth"],
	.apex-dashboard-root[data-theme="nordic"],
	.apex-dashboard-root[data-theme="matcha"],
	.apex-dashboard-root[data-theme="mono"] {
		animation: none;
		background-position: 0% 50%;
		will-change: auto;
	}
}

/* Aurora: disable card backdrop-blur.
   The animated gradient root behind translucent cards forces the browser to
   re-blur every frame, which strobes/flickers on many systems. Removing the
   blur eliminates the strobe while keeping the gradient look. */
.apex-dashboard-root[data-theme="aurora"] {
	--db-backdrop-blur: none;
}
.apex-dashboard-root[data-theme="aurora"] .dashboard-card,
.apex-dashboard-root[data-theme="aurora"] .dashboard-section {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ===== Banner ===== */
.dashboard-banner {
	position: relative;
	height: 120px;
	background-size: cover;
	background-position: center;
	border-radius: var(--db-radius-lg);
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--db-bg-banner);
	/* Bottom margin keeps the collapsed state's workspace pills (14px tall,
	   hanging from the 4px collapsed bar) clear of the sidebar date below. */
	margin: 0 16px 8px 16px;
}

.dashboard-banner-overlay {
	position: absolute;
	inset: 0;
	background: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 48px;
}

.dashboard-banner-content {
	text-align: center;
	position: relative;
}

.dashboard-banner-quote {
	font-size: 1.2em;
	font-style: italic;
	color: var(--db-text-inverse);
	margin: 0 0 8px 0;
	line-height: 1.4;
	border: none;
	padding: 0;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.4),
		0 0 12px rgba(0, 0, 0, 0.15);
}

.dashboard-banner-author {
	font-size: 0.8em;
	color: var(--db-text-inverse-muted);
	font-style: normal;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dashboard-banner-quote--fading,
.dashboard-banner-author--fading {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.dashboard-banner-quote,
.dashboard-banner-author {
	transition: opacity 0.4s ease;
}

.dashboard-banner--fading {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.dashboard-banner {
	transition: opacity 0.6s ease, height 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dashboard-banner-edit-btn {
	position: absolute;
	bottom: 8px;
	right: 10px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.4);
	padding: 2px;
	font-size: 0.55em;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease;
	display: flex;
	align-items: center;
	line-height: 1;
	outline: none;
}

.dashboard-banner:hover .dashboard-banner-edit-btn {
	opacity: 1;
	color: rgba(255, 255, 255, 0.8);
}

.dashboard-banner-edit-btn:hover,
.dashboard-banner-edit-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

/* --- Banner bookmark toggle --- */
.dashboard-banner-pin-btn {
	position: absolute;
	top: 8px;
	right: 10px;
	left: auto;
	z-index: 10;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.4);
	padding: 4px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

.dashboard-banner:hover .dashboard-banner-pin-btn {
	opacity: 1;
	color: rgba(255, 255, 255, 0.8);
}

.dashboard-banner-pin-btn:hover,
.dashboard-banner-pin-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	transform: scale(1.15);
}

/* --- Workspace switcher (banner top-left corner) ---
   Sits in the dead strip ABOVE the stats content: the left stat column's
   hero number starts at y=18 (panel padding 10px + 8px hero offset), so an
   18px-tall pill row at top:0 ends exactly at its top edge — the
   numbers neither move nor get covered. nowrap so a long row extends right
   along the same strip instead of wrapping down over the content.
   Faint at rest (barely-there), full opacity on hover/focus. */
.dashboard-workspace-switcher {
	position: absolute;
	top: 0;
	left: 8px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 3px;
	padding: 1px 4px;
	z-index: 10;
	opacity: 0.25;
	transition: opacity 0.2s ease;
}

.dashboard-workspace-switcher:hover,
.dashboard-workspace-switcher:focus-within {
	opacity: 1;
}

.dashboard-workspace-btn {
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--db-radius-sm, 6px);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.6em;
	line-height: 1;
	cursor: pointer;
	outline: none;
	box-shadow: none !important;
}

.dashboard-workspace-btn:hover,
.dashboard-workspace-btn:active {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.4);
}

.dashboard-workspace-btn.active {
	background: var(--db-accent, #6366f1);
	border-color: transparent;
	color: #ffffff;
}

.dashboard-workspace-add-btn {
	padding: 0;
	width: 18px;
}

/* --- Banner collapsed state (desktop only) --- */
@media (min-width: 641px) {
	.dashboard-banner--collapsed {
		height: 4px !important;
		min-height: 0 !important;
		overflow: visible !important;
		background-image: none !important;
		background-color: transparent !important;
	}

	.dashboard-banner--collapsed > *:not(.dashboard-banner-pin-btn):not(.dashboard-workspace-switcher):not(.dashboard-sidebar-pin-btn) {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.15s ease;
	}

	/* Switcher stays usable on the 4px collapsed bar: pills hang below the
	   edge, mirroring the bookmark tab's re-anchor on the right. Shifted
	   right to clear the sidebar pin, which re-anchors onto the same left
	   edge in this state (pin box spans roughly x 10-29). */
	.dashboard-banner--collapsed .dashboard-workspace-switcher {
		top: 2px;
		left: 36px;
		opacity: 0.85;
	}

	/* Bookmark tab: anchors at top edge, extends downward. The bottom point
	   is a border-triangle ::after instead of a polygon cut, which the
	   marketplace checker flags as only partially supported on 1.7.4.
	   Half-hidden at rest (fades in on banner hover, full on its own hover)
	   so the collapsed strip stays visually quiet. */
	.dashboard-banner--collapsed .dashboard-banner-pin-btn {
		top: 0;
		left: auto;
		right: 16px;
		width: 28px;
		height: 25px;
		padding: 0;
		opacity: 0.35;
		/* Telescoping: at rest the tab retracts upward over the strip edge
		   (about half its height), like a bookmark slipped back into the book;
		   banner hover lets it extend down naturally. */
		transform: translateY(-13px);
		--dashboard-pin-tail: var(--db-bg-card);
		background: var(--db-bg-card) !important;
		border: none !important;
		border-radius: 4px 4px 6px 6px;
		color: var(--db-text-faint);
		transition: opacity 0.25s ease, color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
	}

	.dashboard-banner--collapsed:hover .dashboard-banner-pin-btn {
		opacity: 0.75;
		transform: translateY(0);
	}

	.dashboard-banner--collapsed .dashboard-banner-pin-btn::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -5px;
		width: 0;
		height: 0;
		margin-left: -3px;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 5px solid var(--dashboard-pin-tail);
	}

	.dashboard-banner--collapsed .dashboard-banner-pin-btn:hover {
		opacity: 1;
		color: var(--db-text);
		--dashboard-pin-tail: var(--db-bg-hover);
		background: var(--db-bg-hover) !important;
		transform: translateY(0) scaleY(1.06);
	}
}

/* ===== File Suggest Dropdown ===== */
.dashboard-file-suggest {
	background: color-mix(in srgb, var(--db-bg-sidebar) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--db-border);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	max-height: 240px;
	overflow-y: auto;
	z-index: 200;
}

.dashboard-file-suggest-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 0.8em;
	gap: 8px;
}

.dashboard-file-suggest-item:hover,
.dashboard-file-suggest-item.active {
	background: var(--db-accent, #6366f1);
}

.dashboard-file-suggest-name {
	color: var(--db-text);
	flex-shrink: 0;
}

.dashboard-file-suggest-item.active .dashboard-file-suggest-name {
	color: white;
}

.dashboard-file-suggest-path {
	color: var(--db-text-faint);
	font-size: 0.85em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-file-suggest-item.active .dashboard-file-suggest-path {
	color: rgba(255, 255, 255, 0.7);
}

/* ===== Wikilink (clickable [[link]]) ===== */
.dashboard-wikilink {
	color: var(--db-accent, #6366f1);
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

.dashboard-wikilink:hover {
	color: var(--db-accent-light, #818cf8);
}

/* ===== External Link (clickable [text](url)) ===== */
.dashboard-external-link {
	color: var(--db-accent, #6366f1);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dashboard-external-link:hover {
	color: var(--db-accent-light, #818cf8);
}

/* ===== Mobile Drawer (hidden on desktop) ===== */
.dashboard-mobile-actions {
	display: none;
}

.dashboard-mobile-widget-bar {
	display: none;
}

.dashboard-mobile-drawer {
	display: none;
}

/* ===== Main Layout ===== */
.dashboard-main {
	display: flex;
	flex: 1;
	overflow: hidden;
	gap: 10px;
	/* Top gap is intentionally tighter than the sides: banner already carries
	   an 8px bottom margin (clearance for the collapsed state's hanging pills),
	   so 8px here reads as one ~16px gap instead of the old 20px band. */
	padding: 8px 16px 0 16px;
}

/* ===== Section navigation rail (normal workspace, right edge) =====
   One semi-transparent dash per section, vertically centered on the
   positioned root (scrolls with nothing — it overlays). The dash of the
   section owning the most viewport height stays lit; hover slides the
   section's name out to the left. pointer-events pass through the gaps so
   the rail never blocks section chrome beneath it. */
.dashboard-section-rail {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	/* Many sections squeeze the dashes (flex shrink on the items) instead of
	   overflowing the viewport. */
	max-height: 82%;
	gap: 5px;
	z-index: 30;
	pointer-events: none;
}

.dashboard-section-rail-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 1 auto;
	/* Desktop hit zone stays slim — the rail floats over section toolbars
	   and resize handles, so wide corridors would block their right-edge
	   buttons. Phones widen it in the media block below. */
	min-height: 12px;
	padding: 2px 4px 2px 4px;
	cursor: pointer;
	pointer-events: auto;
}

.dashboard-section-rail-dash {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	/* Neutral faint gray (Rae: column-color tints read as visual noise —
	   the rail must stay quiet). Theme-text-based so it adapts to light and
	   dark themes; the hover/active states step the same gray up. */
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 18%, transparent);
	transition: width 0.15s ease, background-color 0.15s ease;
}

.dashboard-section-rail-item:hover .dashboard-section-rail-dash {
	width: 20px;
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 50%, transparent);
}

.dashboard-section-rail-item.is-active .dashboard-section-rail-dash {
	width: 20px;
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 68%, transparent);
}

/* Hover label: the section's name slides out left of the dash. */
.dashboard-section-rail-item::after {
	content: attr(data-name);
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
	white-space: nowrap;
	font-size: 0.72em;
	padding: 2px 8px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--db-bg-section, rgb(20, 20, 26)) 92%, transparent);
	border: 1px solid var(--db-border-section, rgba(128, 128, 128, 0.25));
	color: var(--db-text, var(--text-normal));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.dashboard-section-rail-item:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Auto-hide on pointer-capable devices (Rae): fully invisible until the
   cursor rides the right-edge reveal strip (JS proximity check in
   section-rail) or keyboard focus enters. Touch keeps it permanently
   visible — no mouse to trigger the reveal. */
@media (hover: hover) {
	.dashboard-section-rail {
		opacity: 0;
		transition: opacity 0.22s ease;
	}

	.dashboard-section-rail.is-revealed {
		opacity: 1;
	}

	/* Invisible means unclickable: no phantom hit zones over section
	   chrome while hidden. */
	.dashboard-section-rail:not(.is-revealed) .dashboard-section-rail-item {
		pointer-events: none;
	}
}

/* ===== Sidebar ===== */
.dashboard-sidebar {
	/* Width is user-draggable (side layout): the render applies the persisted
	   value as an inline --db-sidebar-w on this element, the stylesheet
	   default below keeps hand-built DOM and pre-feature data at 220. The
	   variable is UNITLESS so one value drives both the width (× 1px) and the
	   proportional content scale (÷ 220, see .dashboard-sidebar-widgets) with
	   no twin to keep in sync. The collapsed state overrides the width with a
	   literal 15px (source order wins). */
	--db-sidebar-w: 220;
	width: calc(var(--db-sidebar-w, 220) * 1px);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

/* While a resize drag is live: kill the width/max-height transitions (the
   rail's 0.4s spring would lag every pointer frame) and stop text selection
   from painting across the board. Added/removed by the drag handlers. */
.dashboard-sidebar--resizing {
	transition: none !important;
	user-select: none;
}

/* Side-layout width drag handle: a slim col-resize strip riding the sidebar's
   right edge. INSIDE the box (right: 0, not -5px): the expanded state is
   overflow-y: auto, which computes overflow-x to auto too and would clip a
   negative offset. As a direct sidebar child it is auto-hidden in the
   collapsed state by the `> *:not(.slim-indicator)` rule, so the 15px rail
   stays click-to-expand. */
.dashboard-sidebar-width-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 8px;
	cursor: col-resize;
	z-index: 6;
	touch-action: none;
}

.dashboard-sidebar-width-handle::before {
	content: '';
	position: absolute;
	top: 50%;
	/* Flush with the sidebar's right edge (into the widgets-area's 4px dead
	   zone), NOT further in: the cards' right borders sit 4px from the edge
	   (padding 0 4px on .dashboard-sidebar-widgets), so a 2px offset landed
	   the pill ON TOP of them. At right:0 the pill clears the border band and
	   reads as the pane divider. It cannot go past the edge — the expanded
	   sidebar's overflow-y:auto computes overflow-x to auto, which clips
	   anything beyond the padding box. */
	right: 0;
	transform: translateY(-50%);
	width: 3px;
	height: 40px;
	border-radius: 2px;
	background: var(--db-text-faint);
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
	pointer-events: none;
}

.dashboard-sidebar-width-handle:hover::before,
.dashboard-sidebar--resizing .dashboard-sidebar-width-handle::before {
	opacity: 0.65;
	background: var(--db-accent, var(--interactive-accent));
}

@media (max-width: 640px) {
	.dashboard-sidebar-width-handle {
		display: none;
	}

	/* Bigger touch corridors and slimmer dashes on phones; right-8 would sit
	   under the root's scrollbar gutter, hug the edge instead. */
	.dashboard-section-rail {
		right: 3px;
		gap: 3px;
	}

	.dashboard-section-rail-item {
		min-height: 16px;
		padding-left: 16px;
	}

	.dashboard-section-rail-dash {
		width: 11px;
	}

	.dashboard-section-rail-item:hover .dashboard-section-rail-dash,
	.dashboard-section-rail-item.is-active .dashboard-section-rail-dash {
		width: 15px;
	}
}

.dashboard-sidebar-scroll {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 0;
}

.dashboard-sidebar-scroll::-webkit-scrollbar {
	width: 0;
}

/* ===== Sidebar Widgets ===== */
.dashboard-sidebar-widgets {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 4px;
}

/* Proportional content scaling (side layout): widget internals are em-based,
   so tying the area's root font-size to the dragged sidebar width scales
   every card's type together — 220 (the default width) is exactly the 1.0
   baseline, so the stock render is pixel-identical. The clamp keeps the
   smallest labels (0.65em tiers) legible at the 180 floor and stops
   headlines ballooning at the 420 ceiling. Fixed-px internals (book covers,
   the pomodoro ring, paddings) deliberately stay put — only type breathes.
   The stacked strip ignores this: its columns are a fixed 240px and the
   ratio input (--db-sidebar-w) only moves in the side layout. */
.dashboard-sidebar-widgets[data-layout="side"] {
	font-size: calc(1em * clamp(0.92, var(--db-sidebar-w, 220) / 220, 1.12));
}

.dashboard-sidebar-widget {
	background: var(--db-bg-card);
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-md);
	padding: 12px;
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
	cursor: grab;
}

.dashboard-sidebar-widget--dragging {
	opacity: 0.4;
}

.dashboard-sidebar-widget--drag-over-top {
	border-top: 2px solid var(--db-accent) !important;
}

.dashboard-sidebar-widget--drag-over-bottom {
	border-bottom: 2px solid var(--db-accent) !important;
}

/* Single-button toolbar dropdown (view switcher / card size): pill shows the
 * current selection (icon or letter) plus a tiny caret hinting the menu. */
.dashboard-toolbar-dropdown {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.dashboard-toolbar-dropdown {
	/* Both dropdown flavors share one box: the icon glyphs render 16px tall
	   (setIcon default), so the button gets that fixed content height — the
	   S/M/L letter button then matches the view button's size exactly. */
	min-height: 16px;
}

.dashboard-toolbar-dropdown-text {
	font-size: 0.82em;
	font-weight: 700;
	height: 16px;
	line-height: 16px;
	min-width: 16px;
	text-align: center;
}

/* ===== Widget card backgrounds (per-widget decorative images) ===== */
/* The layer is absolutely positioned with z-index:-1 inside an isolation
   context on the card: it paints above the card's own background (which
   shows through the image's opacity) but below all content, without
   repositioning any child. ::before carries the image (blurred + over-scaled
   so the blur edge never bleeds visibly); ::after is the black dimming
   overlay that keeps text readable over busy photos. */
.dashboard-sidebar-widget--has-bg {
	isolation: isolate;
}

/* Foreground scheme: redirect the card's theme text tokens to the chosen
   color so text AND icons (accent-driven) flip together over the photo.
   Muted/faint derive from the same color so the hierarchy survives. */
.dashboard-sidebar-widget--has-bg.dashboard-sidebar-widget--fg-set {
	--db-text: var(--wbg-fg, var(--db-text));
	--db-text-muted: color-mix(in srgb, var(--wbg-fg, var(--db-text)) 72%, transparent);
	--db-text-faint: color-mix(in srgb, var(--wbg-fg, var(--db-text)) 50%, transparent);
	--db-accent: var(--wbg-fg, var(--db-accent));
	/* Re-anchor INHERITED text color on the card: descendants without their
	   own color rule (quick-action labels, titles) inherit the ancestor's
	   already-resolved color, which bypasses the token overrides above —
	   setting `color` here makes the flip reach them too. */
	color: var(--db-text);
}

.dashboard-widget-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.dashboard-widget-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--wbg-image);
	background-size: cover;
	background-position: center;
	opacity: var(--wbg-opacity, 1);
	filter: blur(var(--wbg-blur, 0px));
	transform: scale(var(--wbg-scale, 1));
}

.dashboard-widget-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--wbg-dim, 0));
}

/* Glass inner frame on background-image cards (not the quick-actions card —
   its buttons already wear that treatment). The pane must read as a SEPARATE
   sheet of glass PRESSED ONTO the photo ("glass is glass, image is image"),
   not a tint fused with it, so unlike the buttons it carries:
   - its own frost (blur+saturate) instead of the theme's button blur (mostly
     none) — the photo visibly refracts under the pane;
   - a substantial fill: the theme's CARD surface token (much more present
     than the ~6% button tint), softened to 65% so the photo still shows;
   - a lit top edge + soft drop shadow — the classic glass-sheet highlight.
   Theme tokens keep every theme adapted; the phone CSS block disables
   backdrop-filter wholesale, where this degrades to the tinted fill. */
.dashboard-widget-frame {
	position: absolute;
	inset: 6px;
	z-index: -1;
	pointer-events: none;
	border-radius: calc(var(--db-radius-md, 10px) - 4px);
	background: color-mix(in srgb, var(--db-bg-card, rgba(127, 127, 127, 0.25)) 65%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 28%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 2px 10px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(7px) saturate(1.15);
	-webkit-backdrop-filter: blur(7px) saturate(1.15);
}

/* Half-hidden gear button at a card's top-right corner (the countdown
   settings-button recipe): invisible at rest, faint on card hover, full on
   its own hover. */
.dashboard-sidebar-widget--cfg,
.dashboard-sidebar-widget--has-bg {
	position: relative;
}

.dashboard-widget-cfg-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	visibility: hidden;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar-widget:hover .dashboard-widget-cfg-btn {
	visibility: visible;
	opacity: 0.5;
}

.dashboard-sidebar-widget:hover .dashboard-widget-cfg-btn:hover {
	opacity: 1;
	color: var(--db-accent);
}

.dashboard-widget-cfg-btn svg {
	width: 13px;
	height: 13px;
}

/* ===== Unified widget header buttons =====
 * Every icon button on a widget card's top-right — the per-widget header
 * buttons (habit/music/expense/pomodoro stats, quick-actions palette/add)
 * plus the config gears — shares one size (20x20 box, 13px glyph) and one
 * visibility scheme: hidden at rest, half-lit on card hover, full accent on
 * its own hover. Card-scoped (not layout-scoped): both layouts behave the
 * same. Specificity beats each widget's own rules; the QA !important chrome
 * resets are untouched (they only cover background/border/shadow). */
.dashboard-sidebar-widget .dashboard-sidebar-habit-icon-btn,
.dashboard-sidebar-widget .dashboard-sidebar-music-icon-btn,
.dashboard-sidebar-widget .dashboard-sidebar-expense-icon-btn,
.dashboard-sidebar-widget .dashboard-sidebar-pomodoro-stats-btn,
.dashboard-sidebar-widget .dashboard-widget-inline-cfg-btn,
.dashboard-quick-actions .dashboard-qa-btn-group button {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0;
	color: var(--db-text-muted);
	transition: opacity 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar-widget .dashboard-sidebar-habit-icon-btn svg,
.dashboard-sidebar-widget .dashboard-sidebar-music-icon-btn svg,
.dashboard-sidebar-widget .dashboard-sidebar-expense-icon-btn svg,
.dashboard-sidebar-widget .dashboard-sidebar-pomodoro-stats-btn svg,
.dashboard-sidebar-widget .dashboard-widget-inline-cfg-btn svg,
.dashboard-quick-actions .dashboard-qa-btn-group button svg {
	width: 13px;
	height: 13px;
}

.dashboard-sidebar-widget:hover .dashboard-sidebar-habit-icon-btn,
.dashboard-sidebar-widget:hover .dashboard-sidebar-music-icon-btn,
.dashboard-sidebar-widget:hover .dashboard-sidebar-expense-icon-btn,
.dashboard-sidebar-widget:hover .dashboard-sidebar-pomodoro-stats-btn,
.dashboard-sidebar-widget:hover .dashboard-widget-inline-cfg-btn,
.dashboard-quick-actions:hover .dashboard-qa-btn-group button {
	opacity: 0.5;
}

.dashboard-sidebar-widget .dashboard-sidebar-habit-icon-btn:hover,
.dashboard-sidebar-widget .dashboard-sidebar-music-icon-btn:hover,
.dashboard-sidebar-widget .dashboard-sidebar-expense-icon-btn:hover,
.dashboard-sidebar-widget .dashboard-sidebar-pomodoro-stats-btn:hover,
.dashboard-sidebar-widget .dashboard-widget-inline-cfg-btn:hover,
.dashboard-quick-actions .dashboard-qa-btn-group button:hover {
	opacity: 1;
	color: var(--db-accent);
}

/* Habit card exception: its header keeps buttons ALWAYS visible — the left
   title + list leave the top-right corner empty otherwise. Covers the icon
   buttons AND the background-settings gear that joins their cluster. */
.dashboard-sidebar-habit .dashboard-sidebar-habit-icon-btn,
.dashboard-sidebar-habit .dashboard-widget-inline-cfg-btn {
	opacity: 0.55;
}

/* Inline gear that joins a header row's existing icon-button cluster (habit,
   music, quick actions) instead of a corner button that would overlap them.
   Ghost at rest like its siblings, accent on hover. */
.dashboard-widget-inline-cfg-btn {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--db-text-muted);
	opacity: 0.55;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.dashboard-widget-inline-cfg-btn:hover {
	opacity: 1;
	color: var(--db-accent);
}

.dashboard-widget-inline-cfg-btn svg {
	width: 13px;
	height: 13px;
}

/* ===== Stacked layout (desktop/tablet only) ===== */
/* Top-bottom board: widget strip under the banner, sections below. Guarded by
   the exact inverse of the phone block's @media (max-width: 640px) so the two
   ranges are disjoint and phone CSS keeps winning by construction. Phones
   render data-layout="side" anyway (isStackedLayout excludes them). Not a
   container query on purpose: laying containment on the root would affect its
   position:fixed descendants (.dashboard-scroll-top); narrow desktop PANES are
   fine — the strip scrolls horizontally at any pane width and the board adapts
   via its own container query. (At viewport widths <=640px the phone treatment
   takes over instead: the sidebar is hidden and widgets live in the mobile
   bar.) */
@media (min-width: 641px) {
	/* Column board: widget strip on top, sections below. */
	[data-layout="stacked"] .dashboard-main {
		flex-direction: column;
	}

	/* The quick-notes work bar (hoisted out of the kanban by view.ts) rides
	   above the widget strip. Its base flex-basis 100% means WIDTH inside the
	   kanban's row layout but HEIGHT in this column layout — neutralize to
	   auto so the bar keeps its natural single-row height. */
	[data-layout="stacked"] .dashboard-main > .dashboard-quicknote {
		flex: 0 0 auto;
	}

	/* Shared scroll region: the quick-notes bar above stays pinned while the
	   widget deck AND the board scroll together through this one viewport.
	   Thin auto-hiding scrollbar, same recipe as the sections. */
	[data-layout="stacked"] .dashboard-scroll-region {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	[data-layout="stacked"] .dashboard-scroll-region:hover {
		scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
	}

	/* The sidebar stops being a fixed-width hover rail and becomes a full-width
	   strip host INSIDE the scroll region: natural height (the deck's grid
	   caps itself), no internal scrolling. The rail state classes keep strip
	   semantics: collapsed = slim horizontal bar, pinned = always open. The
	   generous max-height cap exists so the collapse animation has a numeric
	   start value (none->16px cannot interpolate). */
	[data-layout="stacked"] .dashboard-sidebar {
		width: auto;
		flex-shrink: 0;
		max-height: 2000px;
		overflow: hidden;
		transition: max-height 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.25s ease;
		/* Widget strip unit height (the 6-row grid unit). Declared HERE, not on
		   the strip row: a custom property declared on the row itself would
		   shadow the value the drag handle / render writes inline on the
		   sidebar, and the row's grid-template-rows reads it through
		   inheritance. The renderer (view.applySidebarSizing) and the strip
		   height drag both write this same property on this same element.
		   Below ~300px the calendar card grows an internal scrollbar (cards
		   scroll internally by design); the drag floor is 240px. */
		--db-widget-unit-h: 300px;
	}

	[data-layout="stacked"] .dashboard-sidebar-scroll {
		overflow: visible;
		padding: 0;
	}

	/* Strip height drag handle: a centered pill riding the strip's bottom
	   edge. INSIDE the sidebar box (bottom: 0, not -5px) because the stacked
	   sidebar is overflow: hidden — a negative offset would be clipped. As a
	   direct sidebar child it is auto-hidden in the collapsed state by the
	   rail's `> *:not(.slim-indicator)` rule. The 72px center zone overlaps a
	   sliver of the strip's hover scrollbar — an accepted trade for keeping
	   the grip out of the cards' click area. */
	[data-layout="stacked"] .dashboard-sidebar-strip-handle {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 72px;
		height: 10px;
		cursor: ns-resize;
		z-index: 6;
		touch-action: none;
	}

	[data-layout="stacked"] .dashboard-sidebar-strip-handle::before {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 2px;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		border-radius: 2px;
		background: var(--db-text-faint);
		opacity: 0.45;
		transition: opacity 0.2s ease, background 0.2s ease;
	}

	[data-layout="stacked"] .dashboard-sidebar-strip-handle:hover::before {
		opacity: 0.95;
		background: var(--db-accent, var(--interactive-accent));
	}

	/* The board unrolls to natural height inside the region — the kanban's
	   own scroller (base rule) is neutralized; sections keep their per-type
	   max-heights and internal card scrolling. */
	[data-layout="stacked"] .dashboard-kanban-wrapper {
		overflow: visible;
	}

	[data-layout="stacked"] .dashboard-kanban {
		overflow: visible;
		flex: 0 0 auto;
	}

	/* Collapsed strip: slim bar mirroring the rail's 15px sliver. The rail's
	   child-hiding rule (> *:not(slim-indicator)) applies unchanged. */
	[data-layout="stacked"] .dashboard-sidebar--collapsed {
		max-height: 16px;
		cursor: pointer;
		overflow: hidden;
	}

	/* Slim indicator becomes a horizontal pill on the strip. */
	[data-layout="stacked"] .dashboard-sidebar--collapsed .dashboard-sidebar-slim-indicator {
		width: 40px;
		height: 4px;
	}

	/* Stacked mode hides the week-calendar row and the recent-docs block. */
	[data-layout="stacked"] .dashboard-sidebar-week-calendar,
	[data-layout="stacked"] .dashboard-recent {
		display: none;
	}

	/* Quick actions as the pinned leftmost card in the strip grid: neutralize
	   the base fixed 180px height (the grid span owns sizing) and lay the
	   buttons out VERTICALLY (single column). It exits the reorder system in
	   stacked mode (renderer skips its DnD wiring), hence the default cursor. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="quickActions"] {
		grid-row: span 6;
		height: auto;
		cursor: default;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-quick-actions .dashboard-qa-list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The widget deck (built by renderSidebarWidgets in stacked mode): a
	   6-row grid flowing COLUMN-MAJOR. Height ratios are exact fractions of
	   one unit: full = 6 rows, two-thirds = 4, half = 3, third = 2 — 4+2,
	   3+3 and 2+2+2 all tile one column exactly. Columns are a fixed width
	   so cards stay uniform at any window size; overflow columns scroll
	   horizontally. Row heights derive from the unit so the fractions never
	   drift: 6 rows of calc((unit-h - 5*gap) / 6). Cards scroll internally
	   when their content outgrows the fraction (habit lists, music panel).

	   Per-type rules key off [data-widget-key], NOT the widget class: the
	   in-place data-widget refresh (view.refreshDataWidget) re-mounts
	   lunar/pomodoro/reading inside a bare wrapper that inherits the key, so
	   class-keyed child selectors would silently lose their span after a
	   refresh and collapse the card to one row.

	   TIERED cards (habit / reading / album-*) read their span from the
	   inline --db-widget-span variable the renderer writes after adaptive
	   column packing ("preferred tier, downshift to exactly fill a column
	   when it would otherwise misfit" — see src/widget-span.ts). The fallback
	   in each var() is the card's historical default tier, so a missing
	   variable reproduces the pre-feature layout. FIXED cards keep the
	   hardcoded spans below, mirrored by STACKED_FIXED_SPANS in
	   src/widget-span.ts — update both together. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row {
		--db-widget-unit: 240px;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: var(--db-widget-unit);
		/* --db-widget-unit-h is declared on the stacked sidebar (see the
		   comment there): the drag handle and render write it inline on the
		   sidebar and the row inherits it. The 300px fallback covers a missing
		   variable (e.g. hand-built DOM in tests). */
		grid-template-rows: repeat(6, calc((var(--db-widget-unit-h, 300px) - 30px) / 6));
		grid-row-gap: 6px;
		grid-column-gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		/* Scrollbar mirrors the .dashboard-section-cards / quicknote-nav
		   recipe: standard props on Chromium 121+ render the slim native pill
		   and neutralize theme-level ::-webkit-scrollbar hijacks. Invisible at
		   rest, accent-tinted on hover — the strip stays quiet until aimed at. */
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	[data-layout="stacked"] .dashboard-sidebar-widgets-row:hover {
		scrollbar-color: color-mix(in srgb, var(--db-accent) 18%, transparent) transparent;
	}
	[data-layout="stacked"] .dashboard-sidebar-widgets-row::-webkit-scrollbar {
		width: 0;
		height: 4px;
	}
	[data-layout="stacked"] .dashboard-sidebar-widgets-row::-webkit-scrollbar-track {
		background: transparent;
	}
	[data-layout="stacked"] .dashboard-sidebar-widgets-row::-webkit-scrollbar-thumb {
		background: transparent;
		border-radius: 3px;
		transition: background 0.2s ease;
	}
	[data-layout="stacked"] .dashboard-sidebar-widgets-row:hover::-webkit-scrollbar-thumb {
		background: color-mix(in srgb, var(--db-accent) 18%, transparent);
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key] {
		box-sizing: border-box;
		grid-row: span 6;
		overflow-y: auto;
		overflow-x: hidden;
		/* Fully invisible card scrollbar (hover/wheel still scrolls): the
		   standard property both hides the bar and frees its gutter on
		   Chromium 121+, and — the reason this beats a ::-webkit override —
		   neutralizes theme-level scrollbar hijacks (the project recipe, see
		   the quicknote bar). Inner scrollers (reading scroll) already hide
		   their own. */
		scrollbar-width: none;
	}

	/* Descendant (not child) so a refresh mount's inner widget keeps the
	   tightened padding and fills the mount's grid slot. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-widget {
		padding: 10px;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row > .dashboard-sidebar-widget-mount > .dashboard-sidebar-widget {
		height: 100%;
		box-sizing: border-box;
	}

	/* Two-thirds height: pairs with a third below to tile one column. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="weather"] {
		grid-row: span 4;
	}

	/* Tiered: the renderer writes the packed span inline; the fallback is the
	   historical default tier (two-thirds pairs with a third to tile a column). */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="habit"] {
		grid-row: span var(--db-widget-span, 4);
	}

	/* Half height: two stack to fill one column. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="pomodoro"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="expense"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="music"] {
		grid-row: span 3;
	}

	/* Tiered: fallback = the historical half-height default. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="reading"] {
		grid-row: span var(--db-widget-span, 3);
	}

	/* Third height: three stack to fill one column. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="lunar"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key^="countdown-"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="yearProgress"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key^="anniversary-"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="quickCapture"],
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="fileSearch"] {
		grid-row: span 2;
	}

	/* Album cards take their span from the per-instance --db-widget-span
	   (set inline by the renderer from each entry's heightRatio, carried onto
	   the refresh mount by refreshDataWidget). Inside the fixed-height card
	   the frame fills the body instead of keeping its aspect-ratio box, so
	   smaller fractions crop the photos (layers are object-fit: cover)
	   rather than overflowing. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key^="album-"] {
		grid-row: span var(--db-widget-span, 6);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-album-body {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-album-frame,
	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-album-placeholder {
		aspect-ratio: auto;
		flex: 1;
		min-height: 0;
	}

	/* The calendar defines the unit height but must never pay for it with an
	   internal scrollbar: its content flexes to fill the fixed card (nav and
	   weekday rows stay fixed, the month grid host takes the rest and only
	   scrolls if a theme inflates it past the card). */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > [data-widget-key="calendar"] {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* Pomodoro compacted for the half-height card (content was ~44px over):
	   smaller progress ring, tighter gaps and button padding. Side layout
	   keeps the roomy proportions. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro {
		gap: 2px;
		/* Center the cluster vertically: the compact content leaves slack and
		   top-anchoring read head-heavy with a dead band at the bottom. */
		justify-content: center;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro-ring-wrap {
		width: 62px;
		height: 62px;
	}

	/* Size the svg through the wrap (attribute width=72 would otherwise win
	   in engines that drop the class) and keep it fully inside. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro-ring-wrap svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro-time {
		font-size: 0.95em;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro-dots {
		bottom: 7px;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-pomodoro-main-btn {
		padding: 1px 14px 0;
		font-size: 0.7em;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-widget.dashboard-sidebar-pomodoro {
		padding-top: 8px;
		padding-bottom: 4px;
	}

	/* Expense compacted for the half-height card: tighter paddings/gaps and
	   slightly smaller form text/buttons so a titled card with entries fits
	   without an internal scrollbar. Side layout keeps the roomy spacing. */
	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-expense-top {
		margin-bottom: 4px;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-expense-form {
		gap: 4px;
		font-size: 0.92em;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-widget.dashboard-sidebar-expense {
		padding-top: 8px;
		padding-bottom: 6px;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-expense-row-main {
		gap: 4px;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row [data-widget-key="calendar"] > .dashboard-calendar-content,
	[data-layout="stacked"] .dashboard-sidebar-widgets-row > .dashboard-sidebar-calendar > .dashboard-calendar-content {
		flex: 1;
		min-height: 0;
	}

	[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-calendar-host {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
}

/* Habit Widget */
.dashboard-sidebar-habit-top {
	display: flex;
	align-items: center;
	/* Never wrap (the four icon buttons stay right-peeking on one line);
	   instead the row COMPRESSES as the sidebar narrows: the gap ramps
	   6px -> 2px across the 220 -> 180px drag range (one linear calc off the
	   same unitless --db-sidebar-w that drives the width and the content
	   scale; 220 is the default and the stacked/mobile fallback, where the
	   full 6px applies). */
	gap: clamp(2px, calc((var(--db-sidebar-w, 220) - 180) / 10 * 1px + 2px), 6px);
	width: 100%;
	margin-bottom: 6px;
}

.dashboard-sidebar-habit-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--db-accent);
	user-select: none;
	white-space: nowrap;
	/* Yield first in the compression chain: the row's fixed furniture (count
	   + four buttons) is protected, the title gives back width and its text
	   ellipsizes (icon never clips — flex-shrink:0 below). */
	min-width: 0;
	overflow: hidden;
}

.dashboard-sidebar-habit-title-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-habit-title-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.85;
}

.dashboard-sidebar-habit-title-icon svg {
	width: 12px;
	height: 12px;
}

.dashboard-sidebar-habit-count {
	font-size: 0.65em;
	color: var(--db-text-muted);
	user-select: none;
}

.dashboard-sidebar-habit-top-spacer {
	flex: 1;
}

.dashboard-sidebar-habit-icon-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.3;
	color: var(--db-text-muted);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dashboard-sidebar-habit-icon-btn:hover {
	opacity: 0.75;
}

.dashboard-sidebar-habit-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-sidebar-habit-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 5px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
}

.dashboard-sidebar-habit-item:hover {
	background: var(--db-bg-hover);
}

.dashboard-sidebar-habit-check {
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--db-text-muted);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color 0.15s, background 0.15s;
}

.dashboard-sidebar-habit-check--done {
	background: var(--db-accent);
	border-color: var(--db-accent);
	/* Check glyph tinted with the panel base so it contrasts with both
	   bright (dark themes) and deep (light themes) accents. */
	color: var(--db-bg);
}

.dashboard-sidebar-habit-check--done svg {
	width: 10px;
	height: 10px;
}

.dashboard-sidebar-habit-count-mode {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--db-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
}
.dashboard-sidebar-habit-count-mode:hover { color: var(--db-accent); }
.dashboard-sidebar-habit-count-mode svg { width: 14px; height: 14px; }

.dashboard-sidebar-habit-counter {
	min-width: 24px;
	height: 20px;
	padding: 0 5px;
	margin-left: auto;
	border: 1px solid var(--db-border);
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--db-accent);
	font-size: 0.7em;
	font-variant-numeric: tabular-nums;
}

.dashboard-sidebar-habit-name {
	flex: 1;
	font-size: 0.75em;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-sidebar-habit-item--done .dashboard-sidebar-habit-name {
	color: var(--db-text-muted);
	text-decoration: line-through;
}

.dashboard-sidebar-habit-streak {
	font-size: 0.62em;
	color: var(--db-text-muted);
	flex-shrink: 0;
	user-select: none;
}

.dashboard-sidebar-habit-empty {
	font-size: 0.68em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 8px 0;
	opacity: 0.7;
}

/* Habit backfill modal (retro check-in, yesterday only). Row/check styling
   mirrors the sidebar widget's tap-to-toggle language inside a modal. */
.dashboard-habit-backfill-hint {
	font-size: 0.78em;
	color: var(--db-text-muted);
	margin-bottom: 10px;
}

.dashboard-habit-backfill-empty {
	font-size: 0.85em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 14px 0;
}

.dashboard-habit-backfill-selectall {
	background: none;
	border: none;
	box-shadow: none;
	padding: 2px 6px;
	font-size: 0.72em;
	color: var(--db-accent);
	cursor: pointer;
}

.dashboard-habit-backfill-selectall:hover {
	opacity: 0.8;
}

.dashboard-habit-backfill-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
}

.dashboard-habit-backfill-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
}

.dashboard-habit-backfill-item:hover {
	background: var(--db-bg-hover);
}

/* Locked rows (already done yesterday): informational only — no hover, no
   pointer, dimmed so the tickable rows read as the actionable set. */
.dashboard-habit-backfill-item--locked {
	cursor: default;
	opacity: 0.6;
}

.dashboard-habit-backfill-item--locked:hover {
	background: none;
}

.dashboard-habit-backfill-check {
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--db-text-muted);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color 0.15s, background 0.15s;
}

.dashboard-habit-backfill-check--done {
	background: var(--db-accent);
	border-color: var(--db-accent);
	/* Check glyph tinted with the panel base so it contrasts with both
	   bright (dark themes) and deep (light themes) accents. */
	color: var(--db-bg);
}

.dashboard-habit-backfill-check--done svg {
	width: 10px;
	height: 10px;
}

.dashboard-habit-backfill-name {
	flex: 1;
	font-size: 0.85em;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-habit-backfill-done-badge {
	font-size: 0.68em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

/* Expense Widget */
.dashboard-sidebar-expense-top {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-bottom: 6px;
}

.dashboard-sidebar-expense-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--db-accent);
	user-select: none;
	white-space: nowrap;
}

.dashboard-sidebar-expense-title-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.85;
}

.dashboard-sidebar-expense-title-icon svg {
	width: 12px;
	height: 12px;
}

.dashboard-sidebar-expense-count {
	font-size: 0.65em;
	color: var(--db-text-muted);
	user-select: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dashboard-sidebar-expense-top-spacer {
	flex: 1;
}

.dashboard-sidebar-expense-icon-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.3;
	color: var(--db-text-muted);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dashboard-sidebar-expense-icon-btn:hover {
	opacity: 0.75;
}

.dashboard-sidebar-expense-form {
	display: flex;
	flex-direction: column;
	gap: 7px;
	/* The sidebar marks widgets draggable; the entry form is a form, not a grip. */
	cursor: default;
}

/* Single-line row: label leads the amount, today's total trails the
   category select (the former two-line head+main doubled the height). */
.dashboard-sidebar-expense-row-label {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 0.68em;
	color: var(--db-text-muted);
	user-select: none;
	flex-shrink: 0;
}

.dashboard-sidebar-expense-row-label-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.dashboard-sidebar-expense-row-label-icon svg {
	width: 11px;
	height: 11px;
}

.dashboard-sidebar-expense-row--expense .dashboard-sidebar-expense-row-label-icon {
	color: var(--db-danger, #e74c3c);
}

.dashboard-sidebar-expense-row--income .dashboard-sidebar-expense-row-label-icon {
	color: #2ecc71;
}

/* Tighter floor than the shared widget card: the note row is the form's
   last line and shouldn't float (user-tuned). */
.dashboard-sidebar-widget.dashboard-sidebar-expense {
	padding-bottom: 6px;
}

.dashboard-sidebar-expense-row-main {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.dashboard-sidebar-expense-currency {
	font-size: 0.7em;
	color: var(--db-text-muted);
	flex-shrink: 0;
	user-select: none;
}

/* Ledger-style underline beneath ¥ + amount: the number reads as written on
   a line. Accent-tinted while typing (focus-within), faint rule at rest. */
.dashboard-sidebar-expense-amount-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--db-border-card) 85%, transparent);
	transition: border-color 0.15s;
}

.dashboard-sidebar-expense-amount-wrap:focus-within {
	border-bottom-color: var(--db-accent);
}

.dashboard-sidebar-expense-amount {
	/* Kill the native input chrome: iOS WKWebView draws its own rounded field
	   background from -webkit-appearance even when background/border are none
	   (desktop Chromium doesn't). Any author-side appearance declaration beats
	   the UA sheet, so no !important needed here. */
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text);
	font-size: 0.82em;
	padding: 3px 0;
	outline: none;
	font-family: var(--db-font);
	font-variant-numeric: tabular-nums;
	flex: 1 1 auto;
	min-width: 0;
	width: 0;
	text-align: left;
}

.dashboard-sidebar-expense-amount::placeholder {
	color: var(--db-text-faint);
	opacity: 0.5;
}

/* Foreign-input-hijack shield: other plugins ship GLOBAL rules like
   `body.their-theme input[type="text"] { padding: 12px 24px; border-radius:
   999px; border: 1.5px solid ... }` with !important (language-made-easy's
   mindful-oasis style does, static + runtime-injected). At (0,2,2) that beats
   the single-class rules above: the pill border reads as a stray frame and
   the forced 24px side padding clips this ~50px flex field to an invisible
   sliver — placeholder AND typed digits vanish. Four classes + !important
   (0,4,0) out-ranks any body-prefixed two-class hijack and the :where()
   dark-mode variants (0,3,1) without touching the normal cascade. */
.dashboard-sidebar-widget.dashboard-sidebar-expense .dashboard-sidebar-expense-form .dashboard-sidebar-expense-amount,
.dashboard-sidebar-widget.dashboard-sidebar-expense .dashboard-sidebar-expense-form .dashboard-sidebar-expense-note {
	border: none !important;
	border-radius: 0 !important;
	padding: 3px 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--db-font) !important;
}

/* ── Obsidian core form-field paint, re-anchored ─────────────────────────
   Obsidian's core sheet paints every input[type='text']/[search]/… at rest
   and every textarea/input :hover with var(--background-modifier-form-field
   [-hover]) — a variable OWNED BY THE OBSIDIAN APPEARANCE (pure white under
   Minimal light). Those selectors out-specify the plugin's single-class
   field rules (the same class of loss the immersive color defense
   documents), so a board field flips white the moment the cursor hovers it
   while typing. Re-anchoring both variables on the dashboard root makes ANY
   winning rule paint the dashboard's own input token instead — hover can
   never change a field's base. The hijack shield below is untouched: its
   backgrounds already use --db-bg-input with this variable as fallback. */
.apex-dashboard-root {
	--background-modifier-form-field: var(--db-bg-input);
	--background-modifier-form-field-hover: var(--db-bg-input);
	/* Core CONTROL paint (buttons, native selects/dropdowns, .mod-cta) rides a
	   different token set than form fields: Obsidian paints buttons with
	   --interactive-normal and selects with --dropdown-background, both owned
	   by the appearance (pure white under Border light — see app.css
	   `button:not(.clickable-icon)` / `select, .dropdown`). Left alone they
	   render as white chips on the dark-glass immersive board, and dialogs
	   mirroring the tokens (applyModalTheme → the .dashboard-themed-surface
	   block) inherited the same whites: the agent-target and scope selects in
	   the skill-button configs showed light-on-white text. Re-anchoring the
	   control family keeps every Obsidian-styled control following the
	   dashboard palette wherever the dashboard is present. */
	--interactive-normal: var(--db-bg-btn);
	--interactive-hover: var(--db-bg-btn-hover);
	--interactive-accent: var(--db-accent);
	--interactive-accent-hover: var(--db-accent-light, var(--db-accent));
	--dropdown-background: var(--db-bg-input);
	--dropdown-background-hover: var(--db-bg-input);
	--text-on-accent: var(--db-text-inverse, #fff);
}

/* ── Foreign global-input-hijack shield, consolidated ─────────────────────
   Some plugins ship GLOBAL `body.their-theme input[type="text"] { ... !important }`
   rules (language-made-easy's mindful-oasis does — static styles.css plus a
   runtime-injected <style>, at (0,2,2) with a (0,2,3) :focus twin). Single-class
   rules lose to that EVEN WITH !important: narrow flex fields clip to an
   invisible sliver (see the expense shield above) and wide ones become
   foreign-font pills. Every selector below carries three-plus classes with
   !important so it out-ranks the hijacks; values mirror each family's own base
   rule exactly, so nothing changes when no hijack is present. Textareas and
   selects are untouched (the hijacks only target text/search inputs). */

/* Boxed modal inputs — the .dashboard-modal-input family (config modals,
   backfill, studio, banner editor) plus the settings-tab path/folder fields
   and the prompt dialog. Excludes the section-name special case two blocks
   below, which deliberately uses card border tokens. */
.dashboard-library-config-modal .dashboard-modal-input.dashboard-modal-input:not(.dashboard-section-name-input):is(input[type='text'], input[type='search']),
.modal--dashboard .dashboard-modal .dashboard-modal-input.dashboard-modal-input:not(.dashboard-section-name-input):is(input[type='text'], input[type='search']),
.modal-container .dashboard-workspace-path-input.dashboard-workspace-path-input,
.modal-container .dashboard-settings-folder-input.dashboard-settings-folder-input {
	border: 1px solid var(--db-border-input, var(--background-modifier-border)) !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	padding: 8px 12px !important;
	background: var(--db-bg-input, var(--background-modifier-form-field)) !important;
	box-shadow: none !important;
	font-family: var(--db-font, var(--font-interface)) !important;
	color: var(--db-text, var(--text-normal)) !important;
}

.dashboard-library-config-modal .dashboard-modal-input.dashboard-modal-input:is(input[type='text'], input[type='search']):focus,
.modal--dashboard .dashboard-modal .dashboard-modal-input.dashboard-modal-input:is(input[type='text'], input[type='search']):focus,
.modal-container .dashboard-workspace-path-input.dashboard-workspace-path-input:focus,
.modal-container .dashboard-settings-folder-input.dashboard-settings-folder-input:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent)) !important;
	box-shadow: none !important;
}

/* Prompt dialog input (body-level confirm-card, not the modal skeleton). */
.dashboard-confirm-overlay .dashboard-confirm-card .dashboard-prompt-input.dashboard-prompt-input {
	padding: 8px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
	font-family: var(--db-font, var(--font-interface)) !important;
}

/* Borderless inline fields inside the dashboard (task add-rows). */
.apex-dashboard-root .dashboard-task-input.dashboard-task-input {
	padding: 4px 0 !important;
	border-radius: 0 !important;
	font-family: var(--db-font) !important;
}

/* Boxed search/inline-edit fields inside the dashboard — grouped by shared
   geometry so each line restores its own rhythm. */
.apex-dashboard-root .dashboard-library-search.dashboard-library-search,
.apex-dashboard-root .dashboard-library-table-edit-input.dashboard-library-table-edit-input,
.apex-dashboard-root .dashboard-dataview-search.dashboard-dataview-search,
.apex-dashboard-root .dashboard-expense-ledger-search.dashboard-expense-ledger-search {
	padding: 4px 10px !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08)) !important;
	font-family: var(--db-font, var(--font-interface)) !important;
}

.apex-dashboard-root .dashboard-library-table-edit-input.dashboard-library-table-edit-input {
	padding: 2px 4px !important;
	border-radius: 3px !important;
	border: 1px solid var(--db-accent, var(--interactive-accent)) !important;
}

.apex-dashboard-root .dashboard-dataview-search.dashboard-dataview-search {
	padding: 3px 8px !important;
}

.apex-dashboard-root .dashboard-expense-ledger-search.dashboard-expense-ledger-search {
	padding: 4px 8px !important;
}

.apex-dashboard-root .dashboard-section-rename-input.dashboard-section-rename-input,
.apex-dashboard-root .dashboard-title-edit-input.dashboard-title-edit-input {
	padding: 2px 6px !important;
	border-radius: var(--db-radius-sm) !important;
	border: 1px solid var(--db-border-input-focus) !important;
	font-family: var(--db-font) !important;
}

.apex-dashboard-root .dashboard-ticktick-rename-input.dashboard-ticktick-rename-input {
	padding: 1px 4px !important;
	border-radius: 4px !important;
	border: 1px solid var(--db-accent, var(--interactive-accent)) !important;
}

.apex-dashboard-root .dashboard-media-filter-date.dashboard-media-filter-date {
	padding: 4px 6px !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08)) !important;
}

.apex-dashboard-root .dashboard-media-filter-folder.dashboard-media-filter-folder {
	padding: 4px 8px !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08)) !important;
}

/* Sidebar music widget fields (boxed on the section surface). */
.apex-dashboard-root .dashboard-sidebar-music-search-input.dashboard-sidebar-music-search-input,
.apex-dashboard-root .dashboard-sidebar-music-import-input.dashboard-sidebar-music-import-input {
	padding: 5px 8px !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	border: 1px solid var(--db-border-card) !important;
	background: var(--db-bg-section, rgba(127, 127, 127, 0.08)) !important;
	font-family: var(--db-font) !important;
}

/* Quick-note capture pill (body-level bar; padding already had !important but
   lost on specificity — see the block comment). */
.dashboard-quicknote .dashboard-quicknote-capture .dashboard-quicknote-capture-input.dashboard-quicknote-capture-input {
	padding: 0 10px 0 32px !important;
	border-radius: var(--db-radius-sm) !important;
	border: none !important;
	font-family: var(--db-font, var(--font-interface)) !important;
}

/* Reading-widget book fields (overlay panel). */
.modal--dashboard .dashboard-reading-book-input.dashboard-reading-book-input,
.apex-dashboard-root .dashboard-reading-book-input.dashboard-reading-book-input {
	padding: 8px 12px !important;
	border-radius: 8px !important;
	border: 1px solid var(--db-border, rgba(0, 0, 0, 0.15)) !important;
	font-family: var(--db-font) !important;
}

.modal--dashboard .dashboard-reading-book-manual-input.dashboard-reading-book-manual-input,
.apex-dashboard-root .dashboard-reading-book-manual-input.dashboard-reading-book-manual-input {
	padding: 4px 8px !important;
	border-radius: 6px !important;
	border: 1px solid var(--db-border, rgba(0, 0, 0, 0.15)) !important;
	font-family: var(--db-font) !important;
}

.apex-dashboard-root .dashboard-reading-end-page-input.dashboard-reading-end-page-input {
	padding: 8px 10px !important;
	border-radius: 8px !important;
	border: 1px solid var(--db-border, rgba(0, 0, 0, 0.15)) !important;
	font-family: var(--db-font) !important;
}

/* Document-search field (quick-actions config modal, roomier rhythm). */
.modal--dashboard .dashboard-docsearch-input.dashboard-docsearch-input {
	padding: 10px 14px !important;
	border-radius: var(--db-radius-sm, 6px) !important;
	border: 1px solid var(--db-border-input, var(--background-modifier-border)) !important;
	font-family: var(--db-font, var(--font-interface)) !important;
}

.dashboard-sidebar-expense-invalid {
	color: var(--db-danger, #e74c3c) !important;
	animation: dashboard-expense-shake 0.3s;
}

@keyframes dashboard-expense-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

.dashboard-sidebar-expense-category {
	/* Borderless, shadowless and backgroundless to match the panel's underline
	   minimalism; the chevron is painted as a background SVG since a styled
	   <select> can't hold pseudo-elements. iOS falls back to menulist further
	   down (see there). */
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
	box-shadow: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='rgba(128, 128, 128, 0.65)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 3px center;
	padding: 3px 14px 3px 4px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	font-size: 0.68em;
	font-family: var(--db-font);
	outline: none;
	flex: 0 1 auto;
	max-width: 42%;
	min-width: 0;
	/* Clip long category names inside the box: a styled <select> cannot
	   ellipsize its selected option, so hidden overflow is the safe stop when
	   the sidebar is dragged narrow. */
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* iOS WKWebView renders an appearance:none <select> arrow-less (see the
   countdown time select); keep the native menulist look there. */
@supports (-webkit-touch-callout: none) {
	.dashboard-sidebar-expense-category {
		-webkit-appearance: menulist;
		appearance: menulist;
		background-image: none;
		padding-right: 4px;
	}
}

.dashboard-sidebar-expense-category:focus {
	color: var(--db-text);
}

/* Note input + Log button share one line: input stretches, button hugs right. */
.dashboard-sidebar-expense-note-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-sidebar-expense-note {
	flex: 1;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	font-size: 0.72em;
	padding: 3px 0;
	outline: none;
	font-family: var(--db-font);
}

/* Flat text button (quicknote-chip idiom): Obsidian's native button styles
   would otherwise win over theme tokens on a <button>, so background/shadow/
   border are forced off. Accent text stays readable on the panel surface in
   every theme — no accent-fill contrast handling needed. */
.dashboard-sidebar-expense-submit {
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-accent) !important;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.4;
	padding: 3px 8px;
	cursor: pointer;
	font-family: var(--db-font);
	border-radius: var(--db-radius-sm, 6px);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.dashboard-sidebar-expense-submit:hover {
	background-color: var(--db-bg-hover, rgba(128, 128, 128, 0.1)) !important;
}

.dashboard-sidebar-expense-submit:active {
	background-color: var(--db-bg-hover-strong, rgba(128, 128, 128, 0.16)) !important;
}

.dashboard-sidebar-expense-note::placeholder {
	color: var(--db-text-faint);
	opacity: 0.5;
}

.dashboard-sidebar-expense-note:focus {
	color: var(--db-text);
}

@media (max-width: 640px) {
	.dashboard-sidebar-expense-category {
		max-width: 45%;
	}
}

/* Expense backfill dialog (themed config-modal skeleton) */
.dashboard-expense-backfill-date {
	width: 140px;
	box-sizing: border-box;
	/* Native calendar picker follows the light/dark mode. */
	color-scheme: light dark;
}

.dashboard-expense-backfill-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.dashboard-expense-backfill-currency {
	flex-shrink: 0;
	color: var(--db-text-muted);
}

.dashboard-expense-backfill-amount {
	flex: 1 1 auto;
	min-width: 0;
}

.dashboard-expense-backfill-category {
	/* menulist keeps the native dropdown arrow on iOS WKWebView. */
	-webkit-appearance: menulist;
	appearance: menulist;
	flex: 0 1 auto;
	width: 38%;
	min-width: 0;
}

/* Countdown Widget */
.dashboard-sidebar-countdown {
	position: relative;
	text-align: center;
}

.dashboard-sidebar-countdown-settings-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	visibility: hidden;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar-countdown-settings-btn svg {
	width: 13px;
	height: 13px;
}

.dashboard-sidebar-countdown:hover .dashboard-sidebar-countdown-settings-btn {
	visibility: visible;
	opacity: 0.5;
}

.dashboard-sidebar-countdown-settings-btn:hover {
	opacity: 1 !important;
}

.dashboard-sidebar-countdown-content {
	padding: 4px 0;
}

/* Anniversary widget: a compact title + elapsed value + source date. Same
   family as the countdown card (muted label, accent value); centered — the
   card is narrow in the stacked deck and centered reads like a keepsake. */
.dashboard-sidebar-anniversary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 2px;
}

.dashboard-sidebar-anniversary-title {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-anniversary-value {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--db-accent);
}

.dashboard-sidebar-anniversary-date {
	font-size: 0.68em;
	color: var(--db-text-muted);
}

/* Anniversary modal — lunar date entry: year input + month/day selects in one
   tight row inside the Setting's control area. Only one of the solar / lunar
   date rows is visible at a time (toggled with .is-hidden). */
.dashboard-anniversary-solar-setting.is-hidden,
.dashboard-anniversary-lunar-setting.is-hidden {
	display: none;
}

.dashboard-anniversary-lunar-setting .setting-item-control {
	justify-content: flex-end;
}

.dashboard-anniversary-lunar-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-anniversary-lunar-year {
	width: 72px;
}

.dashboard-anniversary-lunar-select {
	min-width: 0;
}

.dashboard-sidebar-countdown-until {
	font-size: 0.8em;
	color: var(--db-text-muted);
	margin-bottom: 6px;
}

.dashboard-sidebar-countdown-flip {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	perspective: 200px;
}

.dashboard-sidebar-countdown-value {
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
	color: var(--db-accent);
	transform-origin: center bottom;
}

.dashboard-sidebar-countdown-value--flip {
	animation: countdown-flip 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes countdown-flip {
	0% {
		transform: rotateX(0deg);
		opacity: 1;
	}
	40% {
		transform: rotateX(-90deg);
		opacity: 0;
	}
	60% {
		transform: rotateX(90deg);
		opacity: 0;
	}
	100% {
		transform: rotateX(0deg);
		opacity: 1;
	}
}

.dashboard-sidebar-countdown-unit {
	font-size: 0.85em;
	color: var(--db-text-muted);
}

.dashboard-sidebar-countdown-placeholder {
	color: var(--db-text-muted);
	font-size: 0.85em;
	padding: 12px 0;
	cursor: pointer;
}

.dashboard-sidebar-countdown-expired {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--db-text-secondary);
	padding: 8px 0;
}

/* Album Widget */
.dashboard-sidebar-album-frame {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--db-radius-sm);
	overflow: hidden;
}

/* Two ping-pong photo layers. The transition lives on the base layer (banner
   house pattern); per-mode start states pin the incoming layer before the run
   pass, --instant suppresses transitions during that setup. */
.dashboard-sidebar-album-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease, transform 0.6s ease;
	user-select: none;
	pointer-events: none;
}

.dashboard-sidebar-album-layer--instant {
	transition: none !important;
}

.dashboard-sidebar-album-layer--top {
	z-index: 2;
}

.dashboard-sidebar-album-layer--bottom {
	z-index: 1;
}

.dashboard-sidebar-album-layer--start-fade {
	opacity: 0;
}

.dashboard-sidebar-album-layer--start-zoom {
	opacity: 0;
	transform: scale(1.06);
}

.dashboard-sidebar-album-layer--start-slide-in-right {
	transform: translateX(100%);
}

.dashboard-sidebar-album-layer--start-slide-in-left {
	transform: translateX(-100%);
}

.dashboard-sidebar-album-layer--run-slide-out-left {
	transform: translateX(-100%);
}

.dashboard-sidebar-album-layer--run-slide-out-right {
	transform: translateX(100%);
}

.dashboard-sidebar-album-index {
	position: absolute;
	right: 6px;
	bottom: 6px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 0.65em;
	padding: 1px 7px;
	border-radius: 999px;
	pointer-events: none;
	user-select: none;
}

.dashboard-sidebar-album-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	box-shadow: none;
}

.dashboard-sidebar-album-nav:hover {
	background: rgba(0, 0, 0, 0.6);
}

.dashboard-sidebar-album-nav svg {
	width: 14px;
	height: 14px;
}

.dashboard-sidebar-album-nav--prev {
	left: 0;
	border-radius: 0 var(--db-radius-sm) var(--db-radius-sm) 0;
}

.dashboard-sidebar-album-nav--next {
	right: 0;
	border-radius: var(--db-radius-sm) 0 0 var(--db-radius-sm);
}

.dashboard-sidebar-album-frame:hover .dashboard-sidebar-album-nav {
	opacity: 0.9;
	visibility: visible;
}

/* Single photo: no rotation, hide the nav buttons and index badge. */
.dashboard-sidebar-album--single .dashboard-sidebar-album-nav,
.dashboard-sidebar-album--single .dashboard-sidebar-album-index {
	display: none;
}

/* Portrait panels: 3:4 frame and placeholder instead of the 1:1 default. */
.dashboard-sidebar-album--ratio-3-4 .dashboard-sidebar-album-frame,
.dashboard-sidebar-album--ratio-3-4 .dashboard-sidebar-album-placeholder {
	aspect-ratio: 3 / 4;
}

.dashboard-sidebar-album-placeholder {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px dashed var(--db-border-card);
	border-radius: var(--db-radius-sm);
	color: var(--db-text-muted);
	font-size: 0.75em;
	user-select: none;
}

.dashboard-sidebar-album-placeholder-icon {
	display: flex;
	opacity: 0.5;
}

.dashboard-sidebar-album-placeholder-icon svg {
	width: 22px;
	height: 22px;
}

.dashboard-sidebar-album-placeholder-text {
	padding: 0 10px;
	text-align: center;
}

/* Countdown Modal */
.dashboard-modal-countdown-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.dashboard-modal-countdown-label {
	font-size: 0.85em;
	color: var(--text-muted);
}

.dashboard-modal-countdown-hint {
	font-size: 0.75em;
	color: var(--text-faint);
}

.dashboard-modal-countdown-select {
	height: auto;
	min-height: 36px;
	-webkit-appearance: menulist;
	appearance: menulist;
}

.dashboard-countdown-date-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.dashboard-countdown-date-trigger:hover {
	border-color: var(--interactive-accent);
}

.dashboard-countdown-time-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dashboard-countdown-time-select {
	width: 70px;
	min-width: 70px;
	height: 36px;
	padding: 0 4px;
	line-height: 36px;
	text-align: center;
	-webkit-appearance: menulist;
	appearance: menulist;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.04));
	color: var(--db-text, var(--text-normal));
	font-size: 0.95em;
	font-family: var(--db-font, var(--font-interface));
	box-sizing: border-box;
}

.dashboard-countdown-time-sep {
	font-size: 1.1em;
	font-weight: 700;
	padding: 0 2px;
}

/* Weather Widget */
.dashboard-sidebar-weather-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-sidebar-weather-icon {
	font-size: 2em;
	line-height: 1;
}

.dashboard-sidebar-weather-temp {
	font-size: 1.8em;
	font-weight: 700;
	color: var(--db-text);
	line-height: 1;
}

.dashboard-sidebar-weather-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 4px;
	/* Both children shrink-to-ellipsis instead of overflowing the card when
	   the user drags the sidebar narrow (min-width:0 lifts the flex
	   min-content floor). */
	min-width: 0;
	gap: 6px;
}

.dashboard-sidebar-weather-city {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--db-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-sidebar-weather-desc {
	font-size: 0.75em;
	color: var(--db-text-faint);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-sidebar-weather-details {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.dashboard-sidebar-weather-detail {
	font-size: 0.7em;
	color: var(--db-text-muted);
	flex: 1;
	/* Let the three columns shrink below their longest word at narrow sidebar
	   widths; the labels wrap (CJK per-character) instead of overflowing. */
	min-width: 0;
	text-align: center;
	padding: 3px 0;
	background: var(--db-bg-hover);
	border-radius: var(--db-radius-sm);
}

.dashboard-sidebar-weather-forecast {
	display: flex;
	gap: 4px;
	border-top: 1px solid var(--db-border);
	margin-top: 8px;
	padding-top: 8px;
}

.dashboard-sidebar-weather-fday {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 2px;
	border-radius: var(--db-radius-sm);
	transition: background 0.15s;
}

.dashboard-sidebar-weather-fday:hover {
	background: var(--db-bg-hover);
}

.dashboard-sidebar-weather-fday-name {
	font-size: 0.65em;
	color: var(--db-text-faint);
	font-weight: 500;
}

.dashboard-sidebar-weather-fday-icon {
	font-size: 0.875em;
	line-height: 1;
}

.dashboard-sidebar-weather-fday-temps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}

.dashboard-sidebar-weather-fday-high {
	font-size: 0.7em;
	font-weight: 600;
	color: var(--db-text);
}

.dashboard-sidebar-weather-fday-low {
	font-size: 0.65em;
	color: var(--db-text-faint);
}

.dashboard-sidebar-weather-loading,
.dashboard-sidebar-weather-error {
	text-align: center;
	color: var(--db-text-faint);
	font-size: 0.9em;
	padding: 8px 0;
}

/* Heatmap Widget */
.dashboard-sidebar-heatmap {
	overflow: hidden;
}

.dashboard-sidebar-heatmap-grid {
	display: grid;
	overflow: hidden;
}

.dashboard-sidebar-heatmap-cell--empty {
	background-color: var(--db-bg-hover) !important;
	opacity: 0.3 !important;
}

.dashboard-sidebar-heatmap-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.dashboard-sidebar-heatmap-summary {
	font-size: 0.7em;
	color: var(--db-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.dashboard-sidebar-heatmap-icon {
	font-size: 0.9em;
	line-height: 1;
}

.dashboard-sidebar-heatmap-header {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.dashboard-sidebar-heatmap-title {
	font-size: 0.8em;
	font-weight: 600;
	cursor: pointer;
}

.dashboard-heatmap-title-edit {
	font-size: 0.8em;
	width: 100%;
	max-width: 160px;
}

.dashboard-sidebar-heatmap-scroll {
	overflow-x: auto;
	padding-bottom: 2px;
}

.dashboard-sidebar-heatmap-months {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.dashboard-sidebar-heatmap-month-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-sidebar-heatmap-month-label {
	font-size: 0.6em;
	color: var(--db-text-muted);
	width: 28px;
	flex-shrink: 0;
}

.dashboard-sidebar-heatmap-month-cells {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

/* Pomodoro Timer Widget */
.dashboard-sidebar-pomodoro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.dashboard-sidebar-pomodoro-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	position: relative;
}

/* Three-zone top row (today-hint is absolute, outside the flow): equal-basis
   side zones flank the activity selector so it centers on the card whatever
   the button cluster's width; the zones collapse first (min-width 0). */
.dashboard-sidebar-pomodoro-top-spacer {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.dashboard-sidebar-pomodoro-top-right {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.dashboard-sidebar-pomodoro-title {
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--db-accent);
	text-align: center;
	flex: 1;
	user-select: none;
}

.dashboard-sidebar-pomodoro-stats-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.25;
	color: var(--db-text-muted);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dashboard-sidebar-pomodoro-stats-btn:hover {
	opacity: 0.7;
}

/* ===== Activity Selector (Pomodoro Widget) ===== */
.dashboard-pomodoro-activity-selector {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.dashboard-pomodoro-activity-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 3px 10px;
	border-radius: 10px;
	transition: background 0.15s, opacity 0.15s;
	max-width: 100%;
}

.dashboard-pomodoro-activity-trigger:hover {
	background: var(--db-bg-hover);
}

.dashboard-pomodoro-activity-trigger--set {
	font-size: 0.7em;
	color: var(--db-text);
	font-weight: 500;
}

.dashboard-pomodoro-activity-trigger--set span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100px;
}

.dashboard-pomodoro-activity-placeholder {
	font-size: 0.65em;
	color: var(--db-accent);
}

.dashboard-pomodoro-activity-color-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Activity panel (popup) */
.dashboard-pomodoro-activity-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: 8px;
	padding: 8px;
	width: 180px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	margin-top: 4px;
}

.dashboard-pomodoro-activity-panel-input {
	width: 100%;
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 0.75em;
	color: var(--db-text);
	outline: none;
}

.dashboard-pomodoro-activity-panel-input:focus {
	border-color: var(--db-accent);
}

.dashboard-pomodoro-activity-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.dashboard-pomodoro-activity-chip {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 10px;
	background: var(--db-bg-hover);
	font-size: 0.65em;
	color: var(--db-text);
	cursor: pointer;
	transition: opacity 0.15s;
	max-width: 100%;
}

.dashboard-pomodoro-activity-chip:hover {
	opacity: 0.75;
}

.dashboard-pomodoro-activity-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-sidebar-pomodoro-stats-hint {
	font-size: 0.6em;
	color: var(--db-text-faint);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	pointer-events: none;
}

.dashboard-sidebar-pomodoro-phase {
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--db-accent);
}

.dashboard-sidebar-pomodoro-phase--break {
	color: var(--db-text-muted);
}

.dashboard-sidebar-pomodoro-ring-wrap {
	position: relative;
	width: 80px;
	height: 80px;
}

.dashboard-sidebar-pomodoro-ring {
	width: 80px;
	height: 80px;
}

.dashboard-sidebar-pomodoro-ring-bg {
	stroke: var(--db-bg-hover);
}

.dashboard-sidebar-pomodoro-ring-progress {
	stroke: var(--db-accent);
	transition: stroke-dashoffset 0.3s linear;
}

.dashboard-sidebar-pomodoro-time {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.1em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--db-text);
	line-height: 1;
}

.dashboard-sidebar-pomodoro-dots {
	display: flex;
	gap: 3px;
	justify-content: center;
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
}

/* Stopwatch mode: the interval dots narrate countdown cycles, so they hide. */
.dashboard-sidebar-pomodoro-dots.is-hidden {
	display: none;
}

.dashboard-sidebar-pomodoro-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--db-bg-hover);
}

.dashboard-sidebar-pomodoro-dot--filled {
	background: var(--db-accent);
}

.dashboard-sidebar-pomodoro-main-btn {
	background: none !important;
	background-color: transparent !important;
	color: var(--db-accent);
	border: none !important;
	box-shadow: none !important;
	border-radius: var(--db-radius-md);
	/* Tight vertical padding: the ring above and the card edge below read as
	   one compact cluster (user-tuned — was 5px 16px 1px). */
	padding: 2px 16px 0;
	font-size: 0.75em;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

/* The widget card's 12px padding is shared by every sidebar widget; the
   pomodoro card wants a tighter floor so the start button doesn't float. */
.dashboard-sidebar-widget.dashboard-sidebar-pomodoro {
	padding-bottom: 6px;
}

.dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.7;
}

.dashboard-sidebar-pomodoro-main-btn--running {
	color: var(--db-text-muted);
}

.dashboard-sidebar-pomodoro-main-btn--running:hover {
	opacity: 0.85;
}

/* ===== Pomodoro Stats Modal ===== */
.dashboard-pomodoro-stats-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dashboard-pomodoro-stats-modal {
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-lg, 12px);
	padding: 20px;
	max-width: 380px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dashboard-pomodoro-stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.dashboard-pomodoro-stats-header-title {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--db-text);
}

.dashboard-pomodoro-stats-close {
	cursor: pointer;
	color: var(--db-text-muted);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.15s;
}

.dashboard-pomodoro-stats-close:hover {
	background: var(--db-bg-hover);
}

.dashboard-pomodoro-stats-summary {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.dashboard-pomodoro-stats-card {
	flex: 1;
	background: var(--db-bg-hover);
	border-radius: 8px;
	padding: 10px 8px;
	text-align: center;
}

.dashboard-pomodoro-stats-card-value {
	font-size: 1em;
	font-weight: 700;
	color: var(--db-accent);
}

.dashboard-pomodoro-stats-card-label {
	font-size: 0.65em;
	color: var(--db-text-muted);
	margin-top: 2px;
}

.dashboard-pomodoro-stats-section {
	/* Spacing between cards comes from the column flex gap alone (see
	 * .dashboard-pomodoro-mid-col / -right-col) — no extra bottom margin. */
	margin-bottom: 0;
}

/* Sections whose content is data-dependent (e.g. the time-distribution
 * donut hides when there is nothing to distribute). */
.dashboard-pomodoro-stats-section--hidden {
	display: none;
}

.dashboard-pomodoro-stats-section-title {
	font-size: 0.7em;
	font-weight: 600;
	color: var(--db-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

/* Range toggle */
.dashboard-pomodoro-range-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-hover);
	border-radius: 6px;
	padding: 2px;
}

.dashboard-pomodoro-range-btn {
	flex: 1;
	text-align: center;
	font-size: 0.82em;
	font-weight: 500;
	color: var(--db-text-muted);
	padding: 5px 12px;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.dashboard-pomodoro-range-btn--active {
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	color: var(--db-accent);
	font-weight: 700;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Donut chart */
.dashboard-pomodoro-donut-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.dashboard-pomodoro-donut-svg {
	display: block;
}

.dashboard-pomodoro-donut-bg {
	stroke: var(--db-bg-hover);
}

.dashboard-pomodoro-donut-center-value {
	fill: var(--db-text);
	font-size: 0.875em;
	font-weight: 700;
}

.dashboard-pomodoro-donut-center-label {
	fill: var(--db-text-muted);
	font-size: 0.5625em;
}

.dashboard-pomodoro-donut-empty {
	font-size: 0.75em;
	color: var(--db-text-faint);
	text-align: center;
	padding: 24px 0;
}

/* Donut legend */
.dashboard-pomodoro-donut-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.dashboard-pomodoro-donut-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-pomodoro-donut-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dashboard-pomodoro-donut-legend-name {
	font-size: 0.7em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-donut-legend-pct {
	font-size: 0.65em;
	font-weight: 600;
	color: var(--db-text);
	width: 32px;
	text-align: right;
	flex-shrink: 0;
}

.dashboard-pomodoro-donut-legend-time {
	font-size: 0.6em;
	color: var(--db-text-muted);
	width: 48px;
	text-align: right;
	flex-shrink: 0;
}

.dashboard-pomodoro-stats-record-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dashboard-pomodoro-stats-record-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--db-bg-hover);
}

.dashboard-pomodoro-stats-record-row:last-child {
	border-bottom: none;
}

.dashboard-pomodoro-stats-record-date {
	font-size: 0.6em;
	color: var(--db-text-faint);
	width: 65px;
	flex-shrink: 0;
}

.dashboard-pomodoro-stats-record-activity {
	font-size: 0.7em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-stats-record-duration {
	font-size: 0.6em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

/* ===== Wide stats modal (landscape) ===== */
.dashboard-pomodoro-stats-modal--wide {
	max-width: 1040px;
	width: 94%;
	max-height: 86vh;
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	/* Size container for the 1-column collapse below: the breakpoint must
	   track the MODAL's own width, which follows the pane the dashboard lives
	   in (split panes, sidebars, phones) — a viewport @media never fires in
	   narrow desktop panes. Old engines keep the @media fallback further
	   down. */
	container-type: inline-size;
}

.dashboard-pomodoro-stats-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Desktop: hug the right edge next to the close button (the close moved
	   out of this group so mobile can drop it below the title — see the
	   container/media collapse blocks). */
	margin-left: auto;
}

.dashboard-pomodoro-stats-body {
	display: grid;
	/* Desktop: one row, three columns; the row is capped so tall columns
	   scroll inside the body instead of stretching the modal. Collapsed
	   (below) every row MUST become auto — with the 1fr row kept, the two
	   implicit auto rows eat all the free space, the KPI row collapses to
	   zero height, and its content paints over the mid column. */
	grid-template-columns: 230px minmax(0, 1fr) 300px;
	grid-template-rows: minmax(0, 1fr);
	gap: 18px;
	overflow-y: auto;
	min-height: 0;
	flex: 1;
	padding-top: 4px;
}

/* Left column — KPIs */
.dashboard-pomodoro-kpi-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dashboard-pomodoro-kpi-trophy {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, rgba(241, 196, 15, 0.14), rgba(230, 126, 34, 0.10));
	border: 1px solid rgba(241, 196, 15, 0.25);
	border-radius: 10px;
	padding: 10px 12px;
}

.dashboard-pomodoro-kpi-trophy-icon {
	color: #f1c40f;
	display: flex;
}

.dashboard-pomodoro-kpi-trophy-text {
	display: flex;
	flex-direction: column;
}

.dashboard-pomodoro-kpi-trophy-value {
	font-size: 0.95em;
	font-weight: 700;
	color: var(--db-text);
}

.dashboard-pomodoro-kpi-trophy-label {
	font-size: 0.62em;
	color: var(--db-text-muted);
	margin-top: 1px;
}

.dashboard-pomodoro-stats-modal--wide .dashboard-pomodoro-stats-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

/* Value on its own centered line; the comparison chip wraps to a second
   centered line — it never squeezes the number and never leaves the card. */
.dashboard-pomodoro-stats-card-value-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.dashboard-pomodoro-stats-card-delta {
	font-size: 0.58em;
	font-weight: 600;
	padding: 1px 4px;
	border-radius: 4px;
}
.dashboard-pomodoro-stats-card-delta--up {
	color: #2ecc71;
	background: rgba(46, 204, 113, 0.12);
}
.dashboard-pomodoro-stats-card-delta--down {
	color: #e74c3c;
	background: rgba(231, 76, 60, 0.12);
}

/* Mid column */
.dashboard-pomodoro-mid-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.dashboard-pomodoro-donut-wrap {
	display: flex;
	justify-content: center;
}

.dashboard-pomodoro-donut-container--wide {
	align-items: stretch;
}

.dashboard-pomodoro-donut-segment {
	cursor: pointer;
	transition: stroke-width 0.12s;
}

.dashboard-pomodoro-donut-legend--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px 14px;
}

.dashboard-pomodoro-trend-container {
	min-height: 176px;
}

.dashboard-pomodoro-trend-svg {
	display: block;
}

.dashboard-pomodoro-trend-bar {
	transition: opacity 0.12s;
}
.dashboard-pomodoro-trend-bar:hover {
	opacity: 0.75;
}

.dashboard-pomodoro-trend-tick {
	fill: var(--db-text-faint);
	font-size: 0.5em;
}

/* Right column */
.dashboard-pomodoro-right-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Collapse to one column when the modal itself gets narrow (narrow desktop
   panes, phones): columns stack in source order kpi → mid → right and every
   row sits at its content height so nothing paints over its neighbour; the
   body scrolls as a whole. Breakpoint in container px (content-box of the
   modal). */
@container (max-width: 900px) {
	/* Header wraps: title + close on the first line, the range toggle and
	   settings button drop to a full-width row below so they stop squeezing
	   the title. */
	.dashboard-pomodoro-stats-header {
		flex-wrap: wrap;
	}

	.dashboard-pomodoro-stats-header-titlewrap {
		order: 1;
		flex: 1;
	}

	.dashboard-pomodoro-stats-header .dashboard-pomodoro-stats-close {
		order: 2;
	}

	.dashboard-pomodoro-stats-header-right {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	.dashboard-pomodoro-stats-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.dashboard-pomodoro-donut-legend--grid {
		grid-template-columns: 1fr;
	}
}

.dashboard-pomodoro-stats-section-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.dashboard-pomodoro-stats-section-hint {
	font-size: 0.6em;
	color: var(--db-text-faint);
}

.dashboard-pomodoro-rank-row {
	margin-bottom: 7px;
}

.dashboard-pomodoro-rank-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
}

.dashboard-pomodoro-rank-name {
	font-size: 0.68em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-rank-time {
	font-size: 0.6em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

.dashboard-pomodoro-rank-bar-wrap {
	height: 6px;
	border-radius: 3px;
	background: var(--db-bg-hover);
	overflow: hidden;
}

.dashboard-pomodoro-rank-bar {
	height: 100%;
	border-radius: 3px;
}

.dashboard-pomodoro-heatmap-container {
	/* Holds the wrapping div grid (banner heatmap pattern): cells fill the
	   column width at a fixed pitch — replaces the fixed-canvas SVG whose
	   width:100% + aspect-ratio dance could still collapse on first paint
	   and whose 168px drawing huddled mid-column. */
	line-height: 0;
}

/* Wrapping cell strip: oldest→today, fills the right column's width. */
.dashboard-pomodoro-heatmap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 12px);
	grid-auto-rows: 12px;
	gap: 3px;
	justify-content: center;
	width: 100%;
}

.dashboard-pomodoro-heatmap-cell {
	border-radius: 3px;
	background: var(--db-bg-hover);
}

.dashboard-pomodoro-recent-container {
	max-height: 190px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dashboard-pomodoro-recent-container::-webkit-scrollbar {
	display: none;
}

/* ===== Habit stats modal ===== */
.dashboard-habit-stats-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dashboard-habit-stats-modal {
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-lg, 12px);
	padding: 20px;
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dashboard-habit-stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.dashboard-habit-stats-title {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--db-text);
}

.dashboard-habit-stats-close {
	cursor: pointer;
	color: var(--db-text-muted);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.15s;
}

.dashboard-habit-stats-close:hover {
	background: var(--db-bg-hover);
}

.dashboard-habit-stats-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dashboard-habit-stats-empty {
	font-size: 0.85em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 24px 0;
	opacity: 0.75;
}

.dashboard-habit-stats-card {
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	border-radius: 8px;
	padding: 12px;
}

.dashboard-habit-stats-card-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.dashboard-habit-stats-card-name {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-habit-stats-card-head-spacer {
	flex: 1;
}

/* Drag handle: arms reordering only when grabbed, so the head buttons and
   name stay clickable (quick-note cfg grip pattern). */
.dashboard-habit-stats-grip {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 16px;
	cursor: grab;
	color: var(--db-text-muted);
	opacity: 0.45;
	touch-action: none;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.dashboard-habit-stats-grip:hover { opacity: 1; color: var(--db-text); }
.dashboard-habit-stats-grip:active { cursor: grabbing; }
.dashboard-habit-stats-grip svg { width: 14px; height: 14px; display: block; }
.dashboard-habit-stats-card--dragging { opacity: 0.4; }
.dashboard-habit-stats-card--drop-before { box-shadow: 0 -2px 0 0 var(--db-accent); }
.dashboard-habit-stats-card--drop-after { box-shadow: 0 2px 0 0 var(--db-accent); }
.dashboard-habit-stats-card--ghost { pointer-events: none; }

.dashboard-habit-stats-icon-btn {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.72;
	color: var(--db-text-muted);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dashboard-habit-stats-mode-btn {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	color: inherit;
	font: inherit;
}
.dashboard-habit-stats-mode-btn:hover,
.dashboard-habit-stats-mode-btn:focus-visible,
.dashboard-habit-stats-mode-btn:active {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.dashboard-habit-stats-icon-btn:hover {
	opacity: 1;
}

.dashboard-habit-stats-icon-btn--danger:hover {
	color: var(--text-error, #e5484d);
	opacity: 0.9;
}

.dashboard-habit-stats-chips {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.dashboard-habit-stats-chip {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--db-bg-card);
	border-radius: 7px;
	padding: 6px 8px;
}

.dashboard-habit-stats-chip-icon {
	display: flex;
	align-items: center;
	color: var(--db-accent);
	flex-shrink: 0;
}

.dashboard-habit-stats-chip-icon svg {
	width: 13px;
	height: 13px;
}

.dashboard-habit-stats-chip-value {
	font-size: 0.82em;
	font-weight: 700;
	color: var(--db-text);
	line-height: 1.15;
}

.dashboard-habit-stats-chip-label {
	font-size: 0.6em;
	color: var(--db-text-muted);
	line-height: 1.15;
}

.dashboard-habit-stats-heatmap-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-habit-stats-heatmap-head {
	display: flex;
	justify-content: flex-end;
}

.dashboard-habit-stats-heatmap-hint {
	font-size: 0.62em;
	color: var(--db-text-muted);
	opacity: 0.7;
}

.dashboard-habit-stats-heatmap-wrap {
	position: relative;
	width: 100%;
}

/* Wrapping cell strip (banner heatmap pattern): cells flow oldest→today and
   fill the card width — no fixed-canvas center-huddle, no SVG sizing traps. */
.dashboard-habit-stats-heatmap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 12px);
	grid-auto-rows: 12px;
	gap: 3px;
	justify-content: center;
	width: 100%;
}

.dashboard-habit-stats-heatmap-cell {
	border-radius: 3px;
	background: rgba(128, 128, 128, 0.14);
}

.dashboard-habit-stats-heatmap-cell--done {
	background: var(--db-accent);
}

.dashboard-habit-stats-heatmap-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65em;
	color: var(--db-text-muted);
	opacity: 0.75;
	text-align: center;
	pointer-events: none;
}

/* ===== Tag manager modal ===== */
.dashboard-pomodoro-tagmanager {
	max-width: 560px;
}

.dashboard-pomodoro-tagmanager-hint {
	font-size: 0.7em;
	color: var(--db-text-muted);
	margin: -8px 0 12px;
}

.dashboard-pomodoro-tagmanager-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 46vh;
	overflow-y: auto;
	padding-right: 2px;
}

.dashboard-pomodoro-tagmanager-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Bubble chip */
.dashboard-pomodoro-tagmanager-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	max-width: 100%;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.dashboard-pomodoro-tagmanager-chip:hover {
	border-color: var(--db-accent);
	background: var(--db-bg-hover-strong, var(--db-bg-hover));
}

.dashboard-pomodoro-tagmanager-chip--pinned {
	border-color: color-mix(in srgb, var(--db-accent) 45%, transparent);
	background: color-mix(in srgb, var(--db-accent) 10%, var(--db-bg-hover));
}

.dashboard-pomodoro-tagmanager-chip-name {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-tagmanager-chip-pin {
	color: var(--db-accent);
	display: flex;
	opacity: 0.85;
}

/* Action bar — revealed when the row is open */
.dashboard-pomodoro-tagmanager-actions {
	display: none;
	gap: 6px;
	flex-wrap: wrap;
	padding-left: 4px;
}

.dashboard-pomodoro-tagmanager-row--open .dashboard-pomodoro-tagmanager-actions {
	display: flex;
}

.dashboard-pomodoro-tagmanager-action {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	font-size: 0.68em;
	font-weight: 500;
	color: var(--db-text-muted);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.dashboard-pomodoro-tagmanager-action:hover {
	border-color: var(--db-accent);
	color: var(--db-text);
}

.dashboard-pomodoro-tagmanager-action--danger:hover {
	border-color: var(--db-danger, #e74c3c);
	color: var(--db-danger, #e74c3c);
}

.dashboard-pomodoro-tagmanager-action-icon {
	display: flex;
}

.dashboard-pomodoro-tagmanager-action-label {
	white-space: nowrap;
}

.dashboard-pomodoro-tagmanager-prompt {
	margin-top: 12px;
	padding: 12px;
	background: var(--db-bg-hover);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-pomodoro-tagmanager-prompt-label {
	font-size: 0.72em;
	color: var(--db-text);
}

.dashboard-pomodoro-tagmanager-prompt-input,
.dashboard-pomodoro-tagmanager-prompt-select {
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: 6px;
	color: var(--db-text);
	font-size: 0.75em;
	padding: 6px 8px;
	outline: none;
	width: 100%;
}
.dashboard-pomodoro-tagmanager-prompt-input:focus,
.dashboard-pomodoro-tagmanager-prompt-select:focus {
	border-color: var(--db-accent);
}

.dashboard-pomodoro-tagmanager-prompt-error {
	font-size: 0.65em;
	color: var(--db-danger, #e74c3c);
	min-height: 0;
}

.dashboard-pomodoro-tagmanager-prompt-btns {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.dashboard-pomodoro-tagmanager-prompt-cancel,
.dashboard-pomodoro-tagmanager-prompt-ok {
	border: none;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 0.72em;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}
.dashboard-pomodoro-tagmanager-prompt-cancel {
	background: var(--db-bg-hover);
	color: var(--db-text-muted);
}
.dashboard-pomodoro-tagmanager-prompt-ok {
	background: var(--db-accent);
	color: var(--background-primary, #fff);
}
.dashboard-pomodoro-tagmanager-prompt-ok--danger {
	background: var(--db-danger, #e74c3c);
}
.dashboard-pomodoro-tagmanager-prompt-cancel:hover,
.dashboard-pomodoro-tagmanager-prompt-ok:hover {
	opacity: 0.85;
}

/* ===== Pomodoro settings modal (the card gear) ===== */
/* Wider than the compact default so tag chips and the reminder row breathe;
   the body scrolls when the tag list grows (chips keep their own inner
   scroll from the tagmanager block above). */
.dashboard-pomodoro-settings {
	width: 520px;
	max-width: 92vw;
}

.dashboard-pomodoro-settings .dashboard-modal-body {
	max-height: 68vh;
	overflow-y: auto;
}

.dashboard-pomodoro-settings-section {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
}

.dashboard-pomodoro-settings-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dashboard-pomodoro-settings-section h3 {
	margin: 0 0 4px;
	font-size: 1em;
}

.dashboard-pomodoro-settings-desc {
	margin: 0 0 10px;
	font-size: 0.8em;
	color: var(--db-text-muted);
	opacity: 0.85;
}

/* Reminder minutes: a short numeric field, not a full-width input. */
.dashboard-pomodoro-settings-reminder {
	width: 90px;
}

/* Background row: current image path grows, edit button pins right. */
.dashboard-pomodoro-settings-bg-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-pomodoro-settings-bg-desc {
	flex: 1;
	min-width: 0;
	font-size: 0.75em;
	color: var(--db-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== Insight v2 additions ===== */

/* Header insight line */
.dashboard-pomodoro-stats-header-titlewrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dashboard-pomodoro-insight {
	font-size: 0.8em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 520px;
}

/* Activity filter bar */
.dashboard-pomodoro-filterbar {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
}

.dashboard-pomodoro-filterbar--visible {
	display: flex;
}

.dashboard-pomodoro-filterbar-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 0.68em;
	color: var(--db-text);
}

.dashboard-pomodoro-filterbar-clear {
	cursor: pointer;
	color: var(--db-text-muted);
	display: flex;
	padding: 2px;
	border-radius: 4px;
}
.dashboard-pomodoro-filterbar-clear:hover {
	color: var(--db-text);
	background: var(--db-bg-hover);
}

/* KPI groups */
.dashboard-pomodoro-kpi-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-pomodoro-kpi-group-title {
	font-size: 0.6em;
	font-weight: 700;
	color: var(--db-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 2px;
}

.dashboard-pomodoro-kpi-group--hist {
	opacity: 0.92;
}

.dashboard-pomodoro-kpi-group--hist .dashboard-pomodoro-stats-card-value {
	font-size: 0.85em;
}

/* Hero goal card */
.dashboard-pomodoro-kpi-hero {
	position: relative;
	background: var(--db-bg-hover);
	border-radius: 10px;
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-pomodoro-kpi-hero--gauge {
	align-items: center;
}

.dashboard-pomodoro-kpi-hero-gauge {
	display: block;
}

.dashboard-pomodoro-kpi-hero-gauge-value {
	fill: var(--db-text);
	font-size: 1.15em;
	font-weight: 800;
}

.dashboard-pomodoro-kpi-hero-label {
	font-size: 0.62em;
	color: var(--db-text-muted);
	text-align: center;
}

/* Goal editor entry: a small pencil pinned to the hero card's top-right
   corner (was an oversized inline button beside the "/ N" denominator that
   pushed the centered numbers off balance). */
.dashboard-pomodoro-kpi-hero-edit {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--db-text-faint);
	border-radius: 5px;
	transition: color 0.15s, background 0.15s;
}
.dashboard-pomodoro-kpi-hero-edit svg { width: 11px; height: 11px; }
.dashboard-pomodoro-kpi-hero-edit:hover {
	color: var(--db-accent);
	background: var(--db-bg);
}

.dashboard-pomodoro-goal-editor {
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dashboard-pomodoro-goal-editor-label {
	font-size: 0.68em;
	color: var(--db-text);
	font-weight: 600;
}

.dashboard-pomodoro-goal-editor-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-pomodoro-goal-editor-step {
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	color: var(--db-text);
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s;
}
.dashboard-pomodoro-goal-editor-step:hover {
	border-color: var(--db-accent);
	color: var(--db-accent);
}

.dashboard-pomodoro-goal-editor-value {
	font-size: 1em;
	font-weight: 800;
	color: var(--db-accent);
	min-width: 26px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Streak row with encouragement */
.dashboard-pomodoro-kpi-streak {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, rgba(231, 124, 47, 0.12), rgba(241, 196, 15, 0.08));
	border: 1px solid rgba(231, 124, 47, 0.22);
	border-radius: 10px;
	padding: 9px 12px;
}

.dashboard-pomodoro-kpi-streak-icon {
	color: #e67e22;
	display: flex;
}

.dashboard-pomodoro-kpi-streak-value {
	font-size: 1.15em;
	font-weight: 800;
	color: var(--db-text);
	line-height: 1;
}

.dashboard-pomodoro-kpi-streak-label {
	font-size: 0.62em;
	color: var(--db-text-muted);
}

.dashboard-pomodoro-kpi-streak-hint {
	font-size: 0.62em;
	color: #e67e22;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* Card state modifiers */
.dashboard-pomodoro-stats-card--good .dashboard-pomodoro-stats-card-value {
	color: #2ecc71;
}

.dashboard-pomodoro-stats-card--warn .dashboard-pomodoro-stats-card-value {
	color: #e67e22;
}

/* Goal gauge */
.dashboard-pomodoro-gauge-value {
	fill: var(--db-text);
	font-size: 1.625em;
	font-weight: 800;
}

.dashboard-pomodoro-gauge-hint {
	text-align: center;
	font-size: 0.7em;
	color: var(--db-text-muted);
	margin-top: 6px;
}

.dashboard-pomodoro-gauge-hint--good {
	color: #2ecc71;
	font-weight: 600;
}

/* Trend goal baseline + drill-down */
.dashboard-pomodoro-trend-goal-line {
	stroke: var(--db-text-faint);
	stroke-width: 1;
	opacity: 0.7;
}

.dashboard-pomodoro-trend-goal-label {
	fill: var(--db-text-faint);
	font-size: 0.5625em;
}

.dashboard-pomodoro-trend-bar--clickable {
	cursor: pointer;
}

/* Hour distribution strip */
.dashboard-pomodoro-hour-section {
	margin-bottom: 0;
}

.dashboard-pomodoro-hour-container {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 68px;
	padding-top: 4px;
}

.dashboard-pomodoro-hour-cell {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.dashboard-pomodoro-hour-bar {
	width: 100%;
	max-width: 14px;
	border-radius: 2px;
	background: var(--db-accent);
	opacity: 0.55;
	transition: opacity 0.12s;
}

.dashboard-pomodoro-hour-cell--peak .dashboard-pomodoro-hour-bar {
	opacity: 1;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--db-accent) 40%, transparent);
}

.dashboard-pomodoro-hour-bar--empty {
	background: var(--db-bg-hover);
}

.dashboard-pomodoro-hour-cell:hover .dashboard-pomodoro-hour-bar {
	opacity: 1;
}

.dashboard-pomodoro-hour-tick {
	font-size: 0.52em;
	color: var(--db-text-faint);
	height: 10px;
}

/* Ranking rows clickable/active */
.dashboard-pomodoro-rank-row {
	cursor: pointer;
	border-radius: 6px;
	padding: 2px 4px;
	margin: 0 -4px 7px;
	transition: background 0.12s;
}

.dashboard-pomodoro-rank-row:hover {
	background: var(--db-bg-hover);
}

.dashboard-pomodoro-rank-row--active {
	background: var(--db-bg-hover);
	outline: 1px solid var(--db-accent);
}

/* Heatmap gradient + legend + empty hint */
.dashboard-pomodoro-heatmap-wrap {
	position: relative;
}

.dashboard-pomodoro-heatmap-legend {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 5px;
	justify-content: flex-end;
}

.dashboard-pomodoro-heatmap-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 2.5px;
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
}

.dashboard-pomodoro-heatmap-legend-label {
	font-size: 0.55em;
	color: var(--db-text-faint);
	margin: 0 2px;
}

.dashboard-pomodoro-heatmap-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--db-bg) 55%, transparent);
	border-radius: 8px;
	font-size: 0.7em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 0 12px;
}

/* Today timeline */
.dashboard-pomodoro-timeline-container {
	display: flex;
	flex-direction: column;
	max-height: 230px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dashboard-pomodoro-timeline-container::-webkit-scrollbar {
	display: none;
}

.dashboard-pomodoro-timeline-item {
	position: relative;
	padding: 0 0 10px 0;
	margin-left: 5px;
	border-left: 2px solid var(--db-bg-hover);
	padding-left: 12px;
}

.dashboard-pomodoro-timeline-item:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.dashboard-pomodoro-timeline-item::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--db-accent);
}

.dashboard-pomodoro-timeline-head {
	display: flex;
	align-items: center;
	gap: 7px;
}

.dashboard-pomodoro-timeline-time {
	font-size: 0.62em;
	color: var(--db-text-faint);
	width: 38px;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.dashboard-pomodoro-timeline-activity {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-variant: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-timeline-activity span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pomodoro-timeline-duration {
	font-size: 0.62em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

.dashboard-pomodoro-timeline-done {
	color: #2ecc71;
	display: flex;
	flex-shrink: 0;
}

.dashboard-pomodoro-timeline-sub {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.6em;
	color: var(--db-text-muted);
	margin-top: 3px;
	padding-left: 45px;
}

.dashboard-pomodoro-timeline-sub-icon {
	display: flex;
	opacity: 0.7;
}

.dashboard-pomodoro-timeline-interruptions {
	color: #e67e22;
}

.dashboard-pomodoro-timeline-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 0 12px;
}

.dashboard-pomodoro-timeline-empty-text {
	font-size: 0.7em;
	color: var(--db-text-faint);
}

.dashboard-pomodoro-timeline-start {
	border: none;
	border-radius: 8px;
	background: var(--db-accent);
	color: var(--background-primary, #fff);
	font-size: 0.72em;
	font-weight: 600;
	padding: 7px 18px;
	cursor: pointer;
	transition: opacity 0.15s;
}
.dashboard-pomodoro-timeline-start:hover {
	opacity: 0.85;
}

/* Day drill-down floating panel */
.dashboard-pomodoro-drilldown {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: min(420px, 90%);
	max-height: 60%;
	overflow-y: auto;
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-lg, 12px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	padding: 14px 16px;
	z-index: 10;
}

.dashboard-pomodoro-drilldown-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.dashboard-pomodoro-drilldown-title {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--db-text);
}

.dashboard-pomodoro-stats-record-interruptions {
	font-size: 0.6em;
	color: #e67e22;
	flex-shrink: 0;
}

/* Responsive fallback: below 900px VIEWPORT (phones, and narrow desktop
   panes on old engines without container queries) collapse to one column.
   grid-template-rows: auto is the load-bearing part — the single 1fr row
   from the desktop layout makes the KPI column collapse to zero height and
   its content overlap the mid column once the columns stack. */
@media (max-width: 900px) {
	/* Header wraps: title + close on the first line, the range toggle and
	   settings button drop to a full-width row below (mirror of the
	   container-query block above for engines without container queries). */
	.dashboard-pomodoro-stats-header {
		flex-wrap: wrap;
	}

	.dashboard-pomodoro-stats-header-titlewrap {
		order: 1;
		flex: 1;
	}

	.dashboard-pomodoro-stats-header .dashboard-pomodoro-stats-close {
		order: 2;
	}

	.dashboard-pomodoro-stats-header-right {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	.dashboard-pomodoro-stats-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.dashboard-pomodoro-stats-modal--wide {
		max-width: 420px;
		max-height: 80vh;
	}

	.dashboard-pomodoro-donut-legend--grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Expense Stats Modal ===== */
.dashboard-expense-stats-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dashboard-expense-stats-modal {
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-lg, 12px);
	padding: 20px;
	max-width: 380px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dashboard-expense-stats-modal--wide {
	max-width: 1040px;
	width: 94%;
	max-height: 86vh;
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	/* Size container for the 1-column collapse below: the breakpoint must
	   track the MODAL's own width, which follows the pane the dashboard lives
	   in (split panes, sidebars) — a viewport @media never fires there. Old
	   engines without container queries keep the @media fallback at the
	   bottom of this block. */
	container-type: inline-size;
}

.dashboard-expense-stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	gap: 10px;
	flex-wrap: wrap;
}

.dashboard-expense-stats-header-titlewrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dashboard-expense-stats-header-title {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--db-text);
}

.dashboard-expense-insight {
	font-size: 0.72em;
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-stats-header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Range toggle (week/month/year/history) */
.dashboard-expense-range-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-hover);
	border-radius: 6px;
	padding: 2px;
}

.dashboard-expense-range-btn {
	text-align: center;
	font-size: 0.82em;
	font-weight: 500;
	color: var(--db-text-muted);
	padding: 5px 12px;
	border-radius: 5px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.dashboard-expense-range-btn--active {
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	color: var(--db-accent);
	font-weight: 700;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Year navigation (history range only) */
.dashboard-expense-year-nav {
	display: none;
	align-items: center;
	gap: 2px;
}

.dashboard-expense-year-nav--visible {
	display: flex;
}

.dashboard-expense-year-nav-btn {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--db-text-muted);
	border-radius: 5px;
	transition: background 0.15s, color 0.15s;
}

.dashboard-expense-year-nav-btn:hover {
	background: var(--db-bg-hover);
	color: var(--db-text);
}

.dashboard-expense-year-nav-btn--disabled {
	opacity: 0.25;
	pointer-events: none;
}

.dashboard-expense-year-nav-label {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--db-text);
	min-width: 48px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	/* Clickable: opens the period dropdown (native Menu). Padding leaves room
	   for the chevron; border-radius + hover match the ‹ › buttons. */
	padding: 3px 14px 3px 6px;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	transition: background 0.15s;
}

.dashboard-expense-year-nav-label:hover {
	background: var(--db-bg-hover);
}

/* Dropdown affordance chevron, drawn with borders so no icon node is needed
   (the label's centered text geometry stays untouched). */
.dashboard-expense-year-nav-label::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-65%);
	border: 4px solid transparent;
	border-top-color: var(--db-text-muted);
	border-bottom-width: 0;
	pointer-events: none;
}

/* Wide variant for the week span (e.g. 2026-09-14 ~ 2026-09-20); the
   header-right row wraps, so a long label never squeezes the toggles. */
.dashboard-expense-year-nav-label--wide {
	min-width: 172px;
	white-space: nowrap;
}

/* History granularity sub-toggle: week/month/year inside the history range
   (type-toggle in miniature). */
.dashboard-expense-subrange-toggle {
	display: none;
	gap: 2px;
	background: var(--db-bg-input, rgba(128, 128, 128, 0.12));
	border-radius: var(--db-radius-sm, 6px);
	padding: 2px;
}

.dashboard-expense-subrange-toggle--visible {
	display: flex;
}

.dashboard-expense-subrange-btn {
	cursor: pointer;
	padding: 3px 8px;
	border-radius: 4px;
	color: var(--db-text-muted);
	font-size: 0.7em;
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-expense-subrange-btn:hover {
	color: var(--db-text);
}

.dashboard-expense-subrange-btn--active {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-accent);
	font-weight: 600;
}

/* Donut aggregation granularity: plain categories vs primary groups. */
.dashboard-expense-level-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-input, rgba(128, 128, 128, 0.12));
	border-radius: var(--db-radius-sm, 6px);
	padding: 2px;
}

.dashboard-expense-level-btn {
	cursor: pointer;
	padding: 2px 7px;
	border-radius: 4px;
	color: var(--db-text-muted);
	font-size: 0.66em;
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-expense-level-btn:hover {
	color: var(--db-text);
}

.dashboard-expense-level-btn--active {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-accent);
	font-weight: 600;
}

/* Expense/income type toggle (library view toggle, miniature) */
.dashboard-expense-type-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-input, rgba(128, 128, 128, 0.12));
	border-radius: var(--db-radius-sm, 6px);
	padding: 2px;
}

.dashboard-expense-type-btn {
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 4px;
	color: var(--db-text-muted);
	font-size: 0.75em;
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-expense-type-btn:hover {
	color: var(--db-text);
}

.dashboard-expense-type-btn--active {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-accent);
	font-weight: 600;
}

.dashboard-expense-stats-close {
	cursor: pointer;
	color: var(--db-text-muted);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.15s;
	flex-shrink: 0;
}

.dashboard-expense-stats-close:hover {
	background: var(--db-bg-hover);
}

/* Body grid, two areas: records column left; every chart section right —
   分类占比 → 分类排名 (mid) then 每日趋势 → 收支对比 (right) stack in the
   second column, so all sections share one straight edge. Rows are auto: each
   track sizes to its content (the old minmax(0,1fr) row compressed tracks
   below their content and let one zone paint over the next); the body itself
   scrolls when the whole thing outgrows the modal. */
.dashboard-expense-stats-body {
	display: grid;
	grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"kpi mid"
		"kpi right";
	gap: 18px;
	overflow-y: auto;
	/* The tall chart column makes this always scrollable; the bar along the
	   modal edge reads as clutter — scroll stays, chrome doesn't. */
	scrollbar-width: none;
	min-height: 0;
	flex: 1;
	padding-top: 4px;
}

.dashboard-expense-stats-body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Collapse to one column when the modal itself gets narrow (narrow panes,
   phones): the chart column drops below the records column. Breakpoint in
   container px (content-box of the modal). */
@container (max-width: 700px) {
	.dashboard-expense-stats-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"kpi"
			"mid"
			"right";
	}
}

/* Left column — KPIs + record table */
.dashboard-expense-kpi-col {
	grid-area: kpi;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* A touch more air between the KPI cards and the record list below them. */
.dashboard-expense-kpi-col > .dashboard-expense-stats-section {
	margin-top: 6px;
}

.dashboard-expense-stats-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.dashboard-expense-stats-card {
	background: var(--db-bg-hover);
	border-radius: 8px;
	padding: 10px 8px;
	text-align: center;
	min-width: 0;
}

/* Value on its own centered line; the comparison chip wraps to a second
   centered line — it never squeezes the number and never leaves the card
   (same layout as the pomodoro stats cards). */
.dashboard-expense-stats-card-value-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.dashboard-expense-stats-card-value {
	font-size: 1em;
	font-weight: 700;
	color: var(--db-accent);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-stats-card-delta {
	font-size: 0.58em;
	font-weight: 600;
	padding: 1px 4px;
	border-radius: 4px;
	white-space: nowrap;
}
.dashboard-expense-stats-card-delta--up {
	color: #2ecc71;
	background: rgba(46, 204, 113, 0.12);
}
.dashboard-expense-stats-card-delta--down {
	color: #e74c3c;
	background: rgba(231, 76, 60, 0.12);
}

.dashboard-expense-stats-card-label {
	font-size: 0.65em;
	color: var(--db-text-muted);
	margin-top: 2px;
}

/* Sections */
.dashboard-expense-stats-section {
	margin-bottom: 14px;
}

.dashboard-expense-stats-section-title {
	font-size: 0.7em;
	font-weight: 600;
	color: var(--db-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.dashboard-expense-stats-section-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
}

.dashboard-expense-stats-section-hint {
	font-size: 0.6em;
	color: var(--db-text-faint);
	white-space: nowrap;
}

/* "View all" link on the records title row → the full ledger overlay */
.dashboard-expense-records-viewall {
	display: flex;
	align-items: center;
	gap: 1px;
	font-size: 0.62em;
	font-weight: 600;
	color: var(--db-accent);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	opacity: 0.85;
	transition: opacity 0.15s;
}

.dashboard-expense-records-viewall:hover {
	opacity: 1;
}

.dashboard-expense-records-viewall-icon {
	display: flex;
	align-items: center;
}

.dashboard-expense-records-viewall-icon svg {
	width: 12px;
	height: 12px;
}

/* Mid + right columns (both live in the second grid area's column) */
.dashboard-expense-mid-col {
	grid-area: mid;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.dashboard-expense-right-col {
	grid-area: right;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Donut chart */
.dashboard-expense-donut-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.dashboard-expense-donut-wrap {
	display: flex;
	justify-content: center;
}

.dashboard-expense-donut-svg {
	display: block;
	/* Shrink with the column instead of overflowing into the neighbours
	   (fixed 200px attrs stay as the cap/aspect source via viewBox). */
	width: 100%;
	max-width: 200px;
	height: auto;
}

.dashboard-expense-donut-bg {
	stroke: var(--db-bg-hover);
}

.dashboard-expense-donut-segment {
	cursor: pointer;
}

.dashboard-expense-donut-center-value {
	fill: var(--db-text);
	font-size: 0.875em;
	font-weight: 700;
}

.dashboard-expense-donut-center-label {
	fill: var(--db-text-muted);
	font-size: 0.5625em;
}

.dashboard-expense-donut-empty {
	font-size: 0.75em;
	color: var(--db-text-faint);
	text-align: center;
	padding: 24px 0;
}

.dashboard-expense-donut-legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.dashboard-expense-donut-legend--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 12px;
}

.dashboard-expense-donut-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.dashboard-expense-donut-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dashboard-expense-donut-legend-name {
	font-size: 0.7em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-expense-donut-legend-pct {
	font-size: 0.65em;
	font-weight: 600;
	color: var(--db-text);
	width: 32px;
	text-align: right;
	flex-shrink: 0;
}

.dashboard-expense-donut-legend-amount {
	font-size: 0.6em;
	color: var(--db-text-muted);
	text-align: right;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* Trend bars */
.dashboard-expense-trend-container {
	min-height: 140px;
	position: relative;
}

.dashboard-expense-trend-svg {
	display: block;
}

.dashboard-expense-trend-bar {
	transition: opacity 0.12s;
}
.dashboard-expense-trend-bar:hover {
	opacity: 0.75;
}

.dashboard-expense-trend-tick {
	fill: var(--db-text-faint);
	font-size: 0.5em;
}

/* Comparison line chart (income vs expense) */
.dashboard-expense-lines-container {
	min-height: 140px;
	position: relative;
}

.dashboard-expense-lines-svg {
	display: block;
}

.dashboard-expense-lines-legend {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 4px;
}

.dashboard-expense-lines-legend-item {
	gap: 5px;
}

.dashboard-expense-lines-legend-name {
	font-size: 0.65em;
	color: var(--db-text-muted);
	white-space: nowrap;
}

.dashboard-expense-lines-baseline {
	stroke: var(--db-border-card);
	stroke-width: 1;
}

.dashboard-expense-lines-line {
	fill: none;
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.dashboard-expense-lines-dot {
	stroke: none;
}

.dashboard-expense-lines-slot {
	fill: transparent;
	/* Guarantee hit-testing even where the UA treats transparent as unpainted. */
	pointer-events: all;
}

.dashboard-expense-lines-guide {
	stroke: var(--db-text-faint);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	opacity: 0;
	transition: opacity 0.1s;
}

.dashboard-expense-lines-guide--visible {
	opacity: 0.7;
}

/* Shared hover tooltip for the hand-rolled charts */
.dashboard-expense-chart-tip {
	position: absolute;
	pointer-events: none;
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	color: var(--db-text);
	font-size: 0.62em;
	line-height: 1.35;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid var(--db-border-card);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.1s;
}

.dashboard-expense-chart-tip--visible {
	opacity: 1;
}

/* Category ranking */
.dashboard-expense-rank-row {
	margin-bottom: 7px;
}

.dashboard-expense-rank-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
}

.dashboard-expense-rank-name {
	font-size: 0.68em;
	color: var(--db-text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-expense-rank-amount {
	font-size: 0.62em;
	color: var(--db-text-muted);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-rank-bar-wrap {
	height: 4px;
	border-radius: 2px;
	background: var(--db-bg-hover);
	overflow: hidden;
}

.dashboard-expense-rank-bar {
	height: 100%;
	border-radius: 2px;
}

/* Record table */
.dashboard-expense-records-scroll {
	max-height: 500px;
	overflow: auto;
	scrollbar-width: thin;
}

.dashboard-expense-records-table {
	width: 100%;
	border-collapse: collapse;
}

.dashboard-expense-records-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	font-size: 0.6em;
	font-weight: 600;
	color: var(--db-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 4px 6px;
	border-bottom: 1px solid var(--db-border-card);
	white-space: nowrap;
}

.dashboard-expense-records-table th:nth-child(2) {
	text-align: right;
}

.dashboard-expense-records-table td {
	font-size: 0.68em;
	padding: 5px 6px;
	border-bottom: 1px solid color-mix(in srgb, var(--db-border-card) 50%, transparent);
	vertical-align: middle;
	white-space: nowrap;
}

.dashboard-expense-records-table tbody tr:hover td {
	background: var(--db-bg-hover);
}

.dashboard-expense-records-type {
	width: 20px;
}

.dashboard-expense-records-type > div {
	display: flex;
	align-items: center;
}

.dashboard-expense-records-type svg {
	width: 12px;
	height: 12px;
}

.dashboard-expense-records-type--expense {
	color: var(--db-danger, #e74c3c);
}

.dashboard-expense-records-type--income {
	color: #2ecc71;
}

.dashboard-expense-records-amount {
	text-align: right;
	font-weight: 600;
	color: var(--db-text);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-records-amount--income {
	color: #2ecc71;
}

.dashboard-expense-records-category {
	color: var(--db-text-muted);
	/* Wide enough for 4-6 character custom category names; the date column
	   below shrinks to its content (MM-DD) to fund the width. */
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-expense-records-note {
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--db-text-faint);
}

.dashboard-expense-records-date {
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
	/* Shrink-to-content hint: the usual MM-DD stays as narrow as its digits,
	   leaving the spare width to the category column. */
	width: 1%;
}

.dashboard-expense-records-actions {
	width: 26px;
}

.dashboard-expense-records-delete {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--db-text-faint);
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.dashboard-expense-records-table tbody tr:hover .dashboard-expense-records-delete,
.dashboard-expense-records-delete:focus-visible {
	opacity: 1;
}

.dashboard-expense-records-delete:hover {
	color: var(--db-danger, #e74c3c);
	background: rgba(231, 76, 60, 0.10);
}

.dashboard-expense-records-delete svg {
	width: 12px;
	height: 12px;
}

/* Responsive: old-engine fallback for the container collapse above (no
   container-query support → collapse on narrow VIEWPORTS instead; narrow
   panes on old engines keep the squeezed two-column behavior). */
@media (max-width: 900px) {
	.dashboard-expense-stats-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"kpi"
			"mid"
			"right";
	}

	.dashboard-expense-stats-modal--wide {
		max-width: 420px;
		max-height: 80vh;
	}

	.dashboard-expense-donut-legend--grid {
		grid-template-columns: 1fr;
	}

	/* Touch has no hover: keep delete buttons visible. */
	.dashboard-expense-records-delete {
		opacity: 0.6;
	}
}

@media (max-width: 640px) {
	.dashboard-expense-stats-modal--wide {
		width: 96%;
		padding: 16px;
	}

	.dashboard-expense-stats-header {
		justify-content: flex-start;
	}

	.dashboard-expense-records-note {
		max-width: 90px;
	}
}

/* ===== Expense ledger overlay ("view all" full table) ===== */

/* Native edit modal opened from inside the overlays: Obsidian ships modals
   at z 100, under both overlays — raise this one above them (stats 1000 /
   ledger 1010), still below the confirm/prompt cards (9999). */
.modal-container.dashboard-modal--above-overlay {
	z-index: 1015;
}

.dashboard-expense-ledger-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1010;
}

.dashboard-expense-ledger-modal {
	background: var(--db-bg-modal, var(--background-primary, var(--db-bg)));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-lg, 12px);
	max-width: 1080px;
	width: 94%;
	max-height: 86vh;
	padding: 18px 20px 14px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Toolbar: filters left, actions right; wraps on narrow panes */
.dashboard-expense-ledger-toolbar {
	display: flex;
	align-items: center;
	gap: 10px 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.dashboard-expense-ledger-filters {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}

.dashboard-expense-ledger-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.dashboard-expense-ledger-select {
	-webkit-appearance: menulist;
	appearance: menulist;
	background: var(--db-bg-input, var(--background-modifier-form-field));
	border: 1px solid var(--db-border-input, rgba(128, 128, 128, 0.25));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	font-size: 0.72em;
	font-family: var(--db-font);
	padding: 4px 6px;
	outline: none;
	cursor: pointer;
	max-width: 150px;
}

.dashboard-expense-ledger-select:focus {
	color: var(--db-text);
	border-color: var(--db-accent);
}

.dashboard-expense-ledger-select--category {
	max-width: 130px;
}

.dashboard-expense-ledger-date {
	width: 118px;
	box-sizing: border-box;
	background: var(--db-bg-input, var(--background-modifier-form-field));
	border: 1px solid var(--db-border-input, rgba(128, 128, 128, 0.25));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	font-size: 0.72em;
	font-family: var(--db-font);
	padding: 4px 6px;
	outline: none;
	/* Native calendar picker follows the light/dark mode. */
	color-scheme: light dark;
}

.dashboard-expense-ledger-search {
	width: 150px;
	background: var(--db-bg-input, var(--background-modifier-form-field));
	border: 1px solid var(--db-border-input, rgba(128, 128, 128, 0.25));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text);
	font-size: 0.72em;
	font-family: var(--db-font);
	padding: 4px 8px;
	outline: none;
}

.dashboard-expense-ledger-search:focus {
	border-color: var(--db-accent);
}

.dashboard-expense-ledger-btn {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	border: 1px solid var(--db-border-btn, color-mix(in srgb, var(--db-accent) 30%, transparent));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-accent);
	font-size: 0.72em;
	font-weight: 600;
	font-family: var(--db-font);
	padding: 4px 12px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, opacity 0.15s;
}

.dashboard-expense-ledger-btn:hover:not(:disabled) {
	background: var(--db-bg-btn-hover, rgba(139, 92, 246, 0.18));
}

.dashboard-expense-ledger-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.dashboard-expense-ledger-btn--ghost {
	background: transparent;
	color: var(--db-text-muted);
	border-color: var(--db-border-card);
}

.dashboard-expense-ledger-btn--ghost:hover {
	color: var(--db-text);
}

.dashboard-expense-ledger-btn--danger {
	background: rgba(231, 76, 60, 0.10);
	border-color: rgba(231, 76, 60, 0.35);
	color: var(--db-danger, #e74c3c);
}

.dashboard-expense-ledger-btn--danger:hover:not(:disabled) {
	background: rgba(231, 76, 60, 0.18);
}

.dashboard-expense-ledger-file {
	display: none;
}

/* Excel-style grid: full cell borders, sticky header, zebra rows. Fixed
   layout with per-column th widths — auto layout spread spare width across
   every column and made the date column read oversized; now only the note
   column flexes. */
.dashboard-expense-ledger-wrap {
	flex: 1;
	min-height: 0;
	overflow: auto;
	scrollbar-width: thin;
	border: 1px solid color-mix(in srgb, var(--db-border-card) 70%, transparent);
	border-radius: var(--db-radius-sm, 6px);
}

.dashboard-expense-ledger-table {
	width: 100%;
	min-width: 730px;
	border-collapse: collapse;
	table-layout: fixed;
}

.dashboard-expense-ledger-th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--db-bg-modal-raised, var(--background-primary, var(--db-bg)));
	color: var(--db-text-muted);
	font-size: 0.66em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 6px 8px;
	border: 1px solid color-mix(in srgb, var(--db-border-card) 60%, transparent);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.dashboard-expense-ledger-th:hover {
	color: var(--db-text);
}

.dashboard-expense-ledger-th-check,
.dashboard-expense-ledger-th-actions {
	cursor: default;
	width: 34px;
}

/* Fixed-layout column widths (the note column takes whatever remains). */
.dashboard-expense-ledger-th-date {
	width: 92px;
}

.dashboard-expense-ledger-th-amount {
	width: 100px;
	text-align: right;
}

.dashboard-expense-ledger-th-type {
	width: 84px;
}

.dashboard-expense-ledger-th-primary {
	width: 92px;
}

.dashboard-expense-ledger-th-category {
	width: 118px;
}

.dashboard-expense-ledger-th-actions {
	width: 58px;
}

.dashboard-expense-ledger-sort {
	margin-left: 3px;
	color: var(--db-accent);
}

.dashboard-expense-ledger-td-check,
.dashboard-expense-ledger-td-date,
.dashboard-expense-ledger-td-type,
.dashboard-expense-ledger-td-primary,
.dashboard-expense-ledger-td-category,
.dashboard-expense-ledger-td-amount,
.dashboard-expense-ledger-td-note,
.dashboard-expense-ledger-td-actions {
	font-size: 0.72em;
	padding: 5px 8px;
	border: 1px solid color-mix(in srgb, var(--db-border-card) 45%, transparent);
	vertical-align: middle;
	white-space: nowrap;
}

.dashboard-expense-ledger-table tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--db-bg-hover) 45%, transparent);
}

.dashboard-expense-ledger-table tbody tr:hover td {
	background: var(--db-bg-hover);
}

.dashboard-expense-ledger-row--selected td {
	background: color-mix(in srgb, var(--db-accent) 10%, transparent) !important;
}

.dashboard-expense-ledger-check {
	accent-color: var(--db-accent);
	width: 13px;
	height: 13px;
	cursor: pointer;
}

.dashboard-expense-ledger-td-date {
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-ledger-type-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 4px;
	vertical-align: middle;
}

.dashboard-expense-ledger-type-icon svg {
	width: 12px;
	height: 12px;
}

.dashboard-expense-ledger-td-amount {
	text-align: right;
	font-weight: 600;
	color: var(--db-text);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-ledger-td-primary {
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--db-text-muted);
}

.dashboard-expense-ledger-td-category {
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-expense-ledger-td-note {
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--db-text-faint);
}

.dashboard-expense-ledger-td-actions {
	width: 56px;
	text-align: right;
	white-space: nowrap;
}

.dashboard-expense-ledger-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--db-text-faint);
	opacity: 0.55;
	vertical-align: middle;
	transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.dashboard-expense-ledger-table tbody tr:hover .dashboard-expense-ledger-action,
.dashboard-expense-ledger-action:focus-visible {
	opacity: 1;
}

.dashboard-expense-ledger-action:hover {
	background: var(--db-bg-hover);
	color: var(--db-text);
}

.dashboard-expense-ledger-action svg {
	width: 13px;
	height: 13px;
}

/* Touch has no hover: keep the row actions visible. */
@media (hover: none) {
	.dashboard-expense-ledger-action {
		opacity: 0.7;
	}
}

.dashboard-expense-ledger-empty {
	text-align: center;
	color: var(--db-text-faint);
	font-size: 0.75em;
	padding: 36px 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Footer: filtered totals left, pager right */
.dashboard-expense-ledger-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.dashboard-expense-ledger-footer-info {
	font-size: 0.68em;
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
}

.dashboard-expense-ledger-pager {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-expense-ledger-pager-btn svg {
	width: 14px;
	height: 14px;
}

.dashboard-expense-ledger-pager-label {
	font-size: 0.68em;
	color: var(--db-text-muted);
	min-width: 72px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.dashboard-expense-ledger-modal {
		width: 96%;
		padding: 14px;
	}

	.dashboard-expense-ledger-search {
		width: 120px;
	}

	.dashboard-expense-ledger-table {
		min-width: 670px;
	}
}

/* ===== Expense category manager (confirm-card overlay) ===== */
.dashboard-expense-catmgr {
	text-align: left;
	max-width: 460px;
	align-items: stretch;
}

.dashboard-expense-catmgr-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: 50vh;
	overflow-y: auto;
	margin: 0 0 14px;
}

.dashboard-expense-catmgr-section-title {
	font-size: 0.72em;
	font-weight: 600;
	color: var(--db-text-muted);
	margin-bottom: 6px;
}

/* Subsection labels: categories (secondary) vs primary groups. */
.dashboard-expense-catmgr-subtitle {
	font-size: 0.66em;
	font-weight: 600;
	color: var(--db-text-faint);
	margin: 8px 0 2px;
}

.dashboard-expense-catmgr-empty {
	font-size: 0.72em;
	color: var(--db-text-faint);
	margin-bottom: 6px;
}

.dashboard-expense-catmgr-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	border-radius: 4px;
}

/* Drag grip (settings-workspace pattern): the row only turns draggable while
   the grip is held, so the row's select and buttons stay interactive. */
.dashboard-expense-catmgr-grip {
	display: flex;
	align-items: center;
	color: var(--db-text-faint);
	opacity: 0.5;
	cursor: grab;
	flex-shrink: 0;
}

.dashboard-expense-catmgr-grip:hover {
	opacity: 1;
}

.dashboard-expense-catmgr-grip svg {
	width: 12px;
	height: 12px;
}

.dashboard-expense-catmgr-row--dragging {
	opacity: 0.45;
}

/* Drop indicators: box-shadow instead of border so row layout is untouched. */
.dashboard-expense-catmgr-row--drop-before {
	box-shadow: 0 -2px 0 0 var(--db-accent);
}

.dashboard-expense-catmgr-row--drop-after {
	box-shadow: 0 2px 0 0 var(--db-accent);
}

.dashboard-expense-catmgr-name {
	flex: 1;
	min-width: 0;
	font-size: 0.8em;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Per-row primary-group select (compact; new groups arrive via its trailing
   "+ New primary…" sentinel). */
.dashboard-expense-catmgr-primary {
	flex-shrink: 0;
	max-width: 118px;
	font-size: 0.68em;
	padding: 2px 4px;
	box-sizing: border-box;
	color: var(--db-text-muted);
}

.dashboard-expense-catmgr-usage {
	flex-shrink: 0;
	font-size: 0.66em;
	color: var(--db-text-faint);
	font-variant-numeric: tabular-nums;
}

/* Up/down movers: touch fallback (HTML5 drag never fires on mobile); they
   commit through the same reorder path as dragging. */
.dashboard-expense-catmgr-move {
	display: flex;
	gap: 1px;
	flex-shrink: 0;
}

.dashboard-expense-catmgr-move-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	cursor: pointer;
	color: var(--db-text-faint);
	transition: color 0.15s, background 0.15s;
}

.dashboard-expense-catmgr-move-btn:hover {
	color: var(--db-text);
	background: var(--db-bg-hover);
}

.dashboard-expense-catmgr-move-btn svg {
	width: 11px;
	height: 11px;
}

.dashboard-expense-catmgr-move-btn--disabled {
	opacity: 0.2;
	pointer-events: none;
}

.dashboard-expense-catmgr-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 4px;
	cursor: pointer;
	color: var(--db-text-faint);
	transition: color 0.15s, background 0.15s;
}

.dashboard-expense-catmgr-delete:hover {
	color: var(--db-danger, #e74c3c);
	background: rgba(231, 76, 60, 0.10);
}

.dashboard-expense-catmgr-delete svg {
	width: 12px;
	height: 12px;
}

.dashboard-expense-catmgr-add {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.dashboard-expense-catmgr-input {
	flex: 1;
	min-width: 0;
	font-size: 0.8em;
	padding: 5px 8px;
	box-sizing: border-box;
}

/* ===== Reading Widget ===== */
.dashboard-sidebar-reading {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 !important;
}

/* Title row */
.dashboard-reading-title-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px 6px;
}

.dashboard-reading-title {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--db-text);
}

.dashboard-reading-title-spacer {
	flex: 1;
}

.dashboard-reading-add-btn {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	padding: 2px;
}
.dashboard-sidebar-reading:hover .dashboard-reading-add-btn {
	opacity: 0.25;
}
.dashboard-reading-add-btn:hover {
	opacity: 0.6 !important;
}

.dashboard-reading-stats-btn {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	padding: 2px;
}
.dashboard-sidebar-reading:hover .dashboard-reading-stats-btn {
	opacity: 0.25;
}

/* Scroll area for book cards */
.dashboard-reading-scroll {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 240px;
	overflow-y: auto;
	padding: 0 10px 10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dashboard-reading-scroll::-webkit-scrollbar {
	display: none;
}

/* Individual book card */
.dashboard-reading-book-card {
	position: relative;
	display: flex;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	background: var(--db-bg-hover, rgba(0,0,0,0.03));
	border: 1px solid var(--db-border, rgba(0,0,0,0.06));
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
}

.dashboard-reading-book-card--active {
	background: var(--db-bg-active, rgba(108, 92, 231, 0.06));
	border-color: var(--db-accent, #6c5ce7);
}

/* Book cover */
.dashboard-reading-book-card-cover-wrap {
	width: 48px;
	height: 64px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.dashboard-reading-book-card-cover-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--db-accent, #6c5ce7) 0%, var(--db-accent-dim, #a29bfe) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55em;
	font-weight: 600;
	color: #fff;
	text-align: center;
	padding: 4px 3px;
	line-height: 1.3;
	word-break: break-all;
	overflow: hidden;
}

/* Book info area */
.dashboard-reading-book-card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	overflow: hidden;
	min-width: 0;
}

.dashboard-reading-book-card-title {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.dashboard-reading-book-card-author {
	font-size: 0.65em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Timer row */
.dashboard-reading-book-card-timer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	gap: 6px;
}

.dashboard-reading-book-card-time {
	font-size: 0.72em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--db-text-muted);
	letter-spacing: 0.3px;
}

.dashboard-reading-book-card-time--active {
	color: var(--db-accent, #6c5ce7);
	font-size: 0.8em;
}

/* Action buttons */
.dashboard-reading-book-card-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dashboard-reading-book-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
	flex-shrink: 0;
}

.dashboard-reading-book-card-btn--play {
	background: var(--db-accent, #6c5ce7);
	color: #fff;
}
.dashboard-reading-book-card-btn--play:hover {
	opacity: 0.85;
	transform: scale(1.05);
}
.dashboard-reading-book-card-btn--play svg {
	color: #fff;
	width: 12px;
	height: 12px;
	margin-left: 1px;
}

.dashboard-reading-book-card-btn--pause {
	background: var(--db-text-muted, #999);
	color: #fff;
}
.dashboard-reading-book-card-btn--pause:hover {
	opacity: 0.85;
}
.dashboard-reading-book-card-btn--pause svg {
	color: #fff;
	width: 11px;
	height: 11px;
}

.dashboard-reading-book-card-btn--stop {
	background: transparent;
	border: 1.5px solid var(--db-border, rgba(0,0,0,0.15));
	color: var(--db-text-muted);
}
.dashboard-reading-book-card-btn--stop:hover {
	border-color: var(--db-danger, #e74c3c);
	color: var(--db-danger, #e74c3c);
}
.dashboard-reading-book-card-btn--stop svg {
	color: inherit;
	width: 10px;
	height: 10px;
}

/* Edit & Remove book buttons */
.dashboard-reading-book-card-edit,
.dashboard-reading-book-card-remove {
	position: absolute;
	top: 4px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
}
.dashboard-reading-book-card-edit {
	left: 4px;
}
.dashboard-reading-book-card-remove {
	right: 4px;
}
.dashboard-reading-book-card:hover .dashboard-reading-book-card-edit,
.dashboard-reading-book-card:hover .dashboard-reading-book-card-remove {
	opacity: 0.4;
}
.dashboard-reading-book-card-edit:hover,
.dashboard-reading-book-card-remove:hover {
	opacity: 1 !important;
}
.dashboard-reading-book-card-edit svg,
.dashboard-reading-book-card-remove svg {
	width: 10px;
	height: 10px;
	color: var(--db-text-muted);
}

/* Book search modal */
.dashboard-reading-book-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dashboard-reading-book-modal {
	background: var(--db-bg-modal, var(--background-secondary, #fff));
	border-radius: var(--db-radius-lg, 12px);
	width: 90%;
	max-width: 400px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.dashboard-reading-book-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--db-border, rgba(0,0,0,0.1));
}

.dashboard-reading-book-header-title {
	font-size: 0.9em;
	font-weight: 600;
}

.dashboard-reading-book-close {
	cursor: pointer;
	opacity: 0.5;
	padding: 4px;
}
.dashboard-reading-book-close:hover {
	opacity: 1;
}

.dashboard-reading-book-input-area {
	padding: 10px 16px;
}

.dashboard-reading-book-input {
	width: 100%;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--db-border, rgba(0,0,0,0.15));
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	color: var(--db-text);
	font-size: 0.85em;
	outline: none;
}
.dashboard-reading-book-input:focus {
	border-color: var(--db-accent, #6c5ce7);
}

.dashboard-reading-book-results {
	flex: 1;
	overflow-y: auto;
	padding: 0 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-reading-book-searching,
.dashboard-reading-book-no-results {
	font-size: 0.75em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 16px 0;
}

.dashboard-reading-book-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
}
.dashboard-reading-book-item:hover {
	background: var(--db-bg-hover, rgba(0,0,0,0.04));
}

.dashboard-reading-book-item-cover {
	width: 32px;
	height: 42px;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.dashboard-reading-book-item-nocover {
	width: 32px;
	height: 42px;
	border-radius: 3px;
	background: var(--db-bg-hover, rgba(0,0,0,0.06));
	flex-shrink: 0;
}

.dashboard-reading-book-item-info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dashboard-reading-book-item-title {
	font-size: 0.8em;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-reading-book-item-author {
	font-size: 0.7em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-reading-book-manual {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--db-border, rgba(0,0,0,0.08));
	margin-top: 4px;
}

.dashboard-reading-book-manual-label {
	font-size: 0.7em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

.dashboard-reading-book-manual-input {
	flex: 1;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid var(--db-border, rgba(0,0,0,0.15));
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	color: var(--db-text);
	font-size: 0.75em;
	outline: none;
}
.dashboard-reading-book-manual-input:focus {
	border-color: var(--db-accent, #6c5ce7);
}

.dashboard-reading-book-manual-btn {
	padding: 4px 10px;
	border-radius: 6px;
	border: none;
	background: var(--db-accent, #6c5ce7);
	color: #fff;
	font-size: 0.7em;
	cursor: pointer;
	flex-shrink: 0;
}

/* Reading book list in stats */
.dashboard-reading-book-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-reading-book-list-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.dashboard-reading-book-list-cover {
	width: 24px;
	height: 32px;
	border-radius: 2px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.dashboard-reading-book-list-nocover {
	width: 24px;
	height: 32px;
	border-radius: 2px;
	background: var(--db-bg-hover, rgba(0,0,0,0.06));
	flex-shrink: 0;
}

.dashboard-reading-book-list-info {
	flex: 1;
	overflow: hidden;
}

.dashboard-reading-book-list-title {
	font-size: 0.7em;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-reading-book-list-author {
	font-size: 0.6em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-reading-book-list-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
}

.dashboard-reading-book-list-duration {
	font-size: 0.7em;
	font-weight: 500;
}

.dashboard-reading-book-card-sessions {
	font-size: 0.6em;
	color: var(--db-text-muted);
}

/* Progress bar on book card */
.dashboard-reading-book-card-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.dashboard-reading-book-card-progress-bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--db-border, rgba(0,0,0,0.08));
	overflow: hidden;
}

.dashboard-reading-book-card-progress-fill {
	height: 100%;
	border-radius: 2px;
	background: var(--db-accent, #6c5ce7);
	transition: width 0.3s ease;
}

.dashboard-reading-book-card-progress-fill--done {
	background: #2ecc71;
}

.dashboard-reading-book-card-progress-text {
	font-size: 0.55em;
	color: var(--db-text-muted);
	flex-shrink: 0;
	min-width: 30px;
	text-align: right;
}

/* End reading modal */
.dashboard-reading-end-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.dashboard-reading-end-modal {
	background: var(--db-bg-modal, var(--background-secondary, #fff));
	border-radius: var(--db-radius-lg, 14px);
	width: 88%;
	max-width: 380px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.dashboard-reading-end-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 12px;
}

.dashboard-reading-end-title {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--db-text);
}

.dashboard-reading-end-close {
	cursor: pointer;
	opacity: 0.4;
	padding: 2px;
}
.dashboard-reading-end-close:hover {
	opacity: 1;
}

.dashboard-reading-end-body {
	padding: 0 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dashboard-reading-end-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-reading-end-label {
	font-size: 0.8em;
	color: var(--db-text-muted);
}

.dashboard-reading-end-value {
	font-size: 0.8em;
	font-weight: 500;
	color: var(--db-text);
}

.dashboard-reading-end-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-reading-end-section-title {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text);
}

.dashboard-reading-end-mode-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-hover, rgba(0,0,0,0.04));
	border-radius: 6px;
	padding: 2px;
	margin-bottom: 4px;
}

.dashboard-reading-end-mode-btn {
	flex: 1;
	text-align: center;
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 0.7em;
	color: var(--db-text-muted);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.dashboard-reading-end-mode-btn--active {
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	color: var(--db-text);
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.dashboard-reading-end-inputs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-reading-end-page-readonly {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--db-bg-hover, rgba(0,0,0,0.04));
	color: var(--db-text-muted);
	font-size: 0.85em;
	text-align: center;
}

.dashboard-reading-end-page-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-reading-end-page-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-reading-end-page-label {
	font-size: 0.7em;
	color: var(--db-text-muted);
}

.dashboard-reading-end-page-input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--db-border, rgba(0,0,0,0.15));
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	color: var(--db-text);
	font-size: 0.85em;
	text-align: center;
	outline: none;
	-moz-appearance: textfield;
}
.dashboard-reading-end-page-input::-webkit-inner-spin-button,
.dashboard-reading-end-page-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.dashboard-reading-end-page-input:focus {
	border-color: var(--db-accent, #6c5ce7);
}

.dashboard-reading-end-page-input--total {
	max-width: 80px;
}

.dashboard-reading-end-page-arrow {
	color: var(--db-text-muted);
	font-size: 0.85em;
	flex-shrink: 0;
	margin-top: 16px;
}

.dashboard-reading-end-total-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-reading-end-finished {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-reading-end-checkbox {
	width: 16px;
	height: 16px;
	accent-color: var(--db-accent, #6c5ce7);
	cursor: pointer;
}

.dashboard-reading-end-checkbox-label {
	font-size: 0.78em;
	color: var(--db-text);
	cursor: pointer;
}

.dashboard-reading-end-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--db-border, rgba(0,0,0,0.06));
}

.dashboard-reading-end-btn {
	padding: 7px 16px;
	border-radius: 8px;
	border: none;
	font-size: 0.8em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.dashboard-reading-end-btn--cancel {
	background: transparent;
	color: var(--db-text-muted);
}
.dashboard-reading-end-btn--cancel:hover {
	color: var(--db-text);
}

.dashboard-reading-end-btn--discard {
	background: transparent;
	color: var(--db-text-muted);
	border: 1px solid var(--db-border, rgba(0,0,0,0.12));
}
.dashboard-reading-end-btn--discard:hover {
	border-color: var(--db-danger, #e74c3c);
	color: var(--db-danger, #e74c3c);
}

.dashboard-reading-end-btn--confirm {
	background: var(--db-accent, #6c5ce7);
	color: #fff;
}
.dashboard-reading-end-btn--confirm:hover {
	opacity: 0.9;
}

.dashboard-reading-end-btn--delete {
	background: transparent;
	color: var(--db-danger, #e74c3c);
	border: 1px solid rgba(231, 76, 60, 0.3);
	margin-left: auto;
}
.dashboard-reading-end-btn--delete:hover {
	background: var(--db-danger, #e74c3c);
	color: #fff;
	border-color: var(--db-danger, #e74c3c);
}

/* Reading Stats (card-style sections) */
.dashboard-reading-stats-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 14px 16px;
	overflow-y: auto;
	max-height: calc(70vh - 52px);
}

.dashboard-reading-stats-card {
	background: var(--db-bg-hover, rgba(0,0,0,0.03));
	border-radius: 10px;
	padding: 12px;
	border: 1px solid var(--db-border, rgba(0,0,0,0.05));
}

.dashboard-reading-stats-card-title {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text);
	margin-bottom: 10px;
}

.dashboard-reading-stats-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.dashboard-reading-stats-summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	border-radius: 8px;
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	gap: 2px;
}

.dashboard-reading-stats-summary-value {
	font-size: 1em;
	font-weight: 700;
	color: var(--db-text);
	line-height: 1.3;
}

.dashboard-reading-stats-summary-label {
	font-size: 0.6em;
	color: var(--db-text-muted);
}

.dashboard-reading-stats-range {
	display: flex;
	gap: 2px;
	background: var(--db-bg-modal-raised, var(--background-primary, #fff));
	border-radius: 6px;
	padding: 2px;
	margin-bottom: 8px;
}

.dashboard-reading-stats-range-btn {
	flex: 1;
	text-align: center;
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 0.68em;
	color: var(--db-text-muted);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.dashboard-reading-stats-range-btn--active {
	background: var(--db-accent, #6c5ce7);
	color: #fff;
	font-weight: 500;
}

.dashboard-reading-stats-empty {
	font-size: 0.72em;
	color: var(--db-text-muted);
	text-align: center;
	padding: 12px 0;
}

.dashboard-reading-stats-record {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--db-border, rgba(0,0,0,0.04));
}

.dashboard-reading-stats-record:last-child {
	border-bottom: none;
}

.dashboard-reading-stats-record-date {
	font-size: 0.68em;
	color: var(--db-text-muted);
	flex-shrink: 0;
	min-width: 56px;
}

.dashboard-reading-stats-record-book {
	font-size: 0.72em;
	font-weight: 500;
	color: var(--db-text);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-reading-stats-record-dur {
	font-size: 0.68em;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

.dashboard-reading-stats-record-del,
.dashboard-reading-book-list-row .dashboard-reading-stats-record-del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
	flex-shrink: 0;
}
.dashboard-reading-stats-record:hover .dashboard-reading-stats-record-del,
.dashboard-reading-book-list-row:hover .dashboard-reading-stats-record-del {
	opacity: 0.5;
}
.dashboard-reading-stats-record-del:hover {
	opacity: 1 !important;
	background: rgba(231, 76, 60, 0.1);
}
.dashboard-reading-stats-record-del svg {
	width: 12px;
	height: 12px;
	color: #e74c3c;
}

/* ===== Lunar Calendar Widget ===== */
.dashboard-sidebar-lunar {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ===== Year Progress widget ===== */
.dashboard-sidebar-year-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-sidebar-year-progress-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.dashboard-sidebar-year-progress-year {
	font-size: 1.15em;
	font-weight: 600;
	color: var(--db-text-primary);
}

.dashboard-sidebar-year-progress-percent {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--db-accent);
	font-variant-numeric: tabular-nums;
}

/* "Days left" label sits in the header (top-right); keep it a quiet secondary
   label so it doesn't compete with the year. */
.dashboard-sidebar-year-progress-left {
	font-size: 0.8em;
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
}

.dashboard-sidebar-year-progress-bar {
	margin-bottom: 0;
}

.dashboard-sidebar-year-progress-bar .dashboard-progress-bar {
	height: 8px;
}

.dashboard-sidebar-year-progress-sub {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.78em;
	color: var(--db-text-muted);
	font-variant-numeric: tabular-nums;
}

.dashboard-sidebar-lunar-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.dashboard-sidebar-lunar-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	font-size: 0.8em;
	color: var(--db-text-muted);
}

.dashboard-sidebar-lunar-ganzhi,
.dashboard-sidebar-lunar-zodiac {
	opacity: 0.85;
}

.dashboard-sidebar-lunar-jieqi {
	color: var(--db-accent);
	font-weight: 500;
	opacity: 1;
}

.dashboard-sidebar-lunar-date {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--db-accent);
	letter-spacing: 0.04em;
	text-align: center;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.dashboard-sidebar-lunar-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.dashboard-sidebar-lunar-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--db-radius-sm, 8px);
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.4;
}

.dashboard-sidebar-lunar-badge--holiday {
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
}

.dashboard-sidebar-lunar-badge--inline {
	font-size: 0.55em;
	flex-shrink: 0;
}

.dashboard-sidebar-lunar-badge--festival {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.dashboard-sidebar-lunar-badge--work {
	background: rgba(99, 102, 241, 0.12);
	color: var(--db-accent);
}

.dashboard-sidebar-lunar-badge--weekend {
	background: rgba(34, 197, 94, 0.12);
	color: #22c55e;
}

.dashboard-sidebar-lunar-almanac {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.dashboard-sidebar-lunar-almanac-text {
	font-size: 0.85em;
	color: var(--db-text-muted);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

/* ===== Fortune Stick Button ===== */
.dashboard-sidebar-lunar {
	position: relative;
}

.dashboard-sidebar-lunar-fortune-btn {
	position: absolute;
	top: 10px;
	left: 6px;
	font-size: 1.1em;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s, transform 0.2s;
	line-height: 1;
	z-index: 1;
}

.dashboard-sidebar-lunar-fortune-btn:hover {
	opacity: 1;
	transform: scale(1.15);
}

/* ===== Sidebar Calendar Widget ===== */
.dashboard-sidebar-calendar {
	position: relative;
	overflow: hidden;
}

/* The nav's toolbar spacer fights the label's flex:1 for the leftover width,
   carving a wide dead gap between the view toggle and the today button (right
   side reads asymmetric against the left). The label alone owns the slack:
   [prev][label stretches][next][toggle][today] packs both edges evenly. */
.dashboard-sidebar-calendar .dashboard-library-toolbar-spacer {
	display: none;
}

.dashboard-sidebar-calendar .dashboard-calendar-content {
	padding: 0;
}

.dashboard-sidebar-calendar .dashboard-calendar-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 6px;
}

.dashboard-sidebar-calendar .dashboard-calendar-nav-label {
	flex: 1;
	/* flex:1 alone floors at min-content — with nowrap the month label ("2026
	   年 9 月") refuses to shrink below its text and pushes the nav 20px past
	   the card at the 180px sidebar floor. min-width:0 lets the ellipsis do
	   its job. */
	min-width: 0;
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-calendar .dashboard-calendar-nav-btn {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar-calendar .dashboard-calendar-nav-btn:hover {
	background: var(--db-bg-hover);
	color: var(--db-text);
}

.dashboard-sidebar-calendar .dashboard-calendar-nav-btn svg {
	width: 14px;
	height: 14px;
}

/* Icon-only button (maximize): strip Obsidian's default `button` chrome —
   background-color + inset box-shadow read as a filled, bordered chip next to
   the div-based view toggle, which never receives that chrome. Same
   !important reset pattern as .dashboard-qa-pin-btn / .dashboard-qa-add-btn. */
.dashboard-sidebar-calendar .dashboard-calendar-today-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-sidebar-calendar .dashboard-calendar-today-btn:hover {
	/* !important to clear the base rule's !important reset, keeping the same
	   hover tint as the nav/view buttons. */
	background: var(--db-bg-hover) !important;
	color: var(--db-accent);
}

.dashboard-sidebar-calendar .dashboard-calendar-today-btn svg {
	width: 14px;
	height: 14px;
}

/* Phone manual-load state: refresh button under the hint text. Mirrors the
   today-btn styling; resets Obsidian's `.is-tablet button` padding (harmless
   on phones — no .is-tablet there) and the base `button` padding/height so
   it stays a compact square. */
.dashboard-calendar-refresh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: 4px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
	color: var(--db-text-muted);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dashboard-calendar-refresh-btn:hover {
	background: var(--db-bg-hover);
	color: var(--db-accent);
	border-color: var(--db-accent);
}

.dashboard-calendar-refresh-btn svg {
	width: 14px;
	height: 14px;
}

/* Compact the month/week toggle for the narrow sidebar. Single switch button:
   shows the view you'd switch TO (no active state needed). */
.dashboard-sidebar-calendar .dashboard-calendar-view-toggle {
	flex-shrink: 0;
}

.dashboard-sidebar-calendar .dashboard-library-view-btn {
	padding: 3px 5px;
}

.dashboard-sidebar-calendar .dashboard-library-view-btn svg {
	width: 13px;
	height: 13px;
}

/* Dot-mode month grid: equal square-ish cells, number + a single accent dot */
.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0;
	min-height: 0;
	border-radius: var(--db-radius-sm, 6px);
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell-num {
	font-size: 0.78em;
	line-height: 1;
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell.is-clickable {
	cursor: pointer;
	transition: background 0.12s ease;
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell.is-clickable:hover {
	background: var(--db-bg-hover);
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell.is-today {
	background: color-mix(in srgb, var(--db-accent) 22%, transparent);
	color: var(--db-text);
	font-weight: 700;
}

.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-cell.is-outside {
	opacity: 0.4;
}

/* The dot shown under the day number when the day has tasks (dotMode only) */
.dashboard-calendar-cell-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--db-accent);
	flex-shrink: 0;
}

/* ===== Hover day preview (dotMode only) =====
   Lives on document.body, positioned by JS next to the hovered cell. High
   z-index so it floats over the sidebar and kanban; no backdrop-filter to stay
   safe on mobile/iOS crash-prone contexts (the popup only ever shows on desktop). */
.dashboard-calendar-day-preview {
	position: fixed;
	z-index: 9000;
	min-width: 180px;
	max-width: 360px;
	max-height: min(60vh, 420px);
	display: flex;
	flex-direction: column;
	/* Guaranteed-opaque surface. --db-bg-card is translucent on most themes
	   (cards float over a bg image) and color-mix with it still let the dashboard
	   bg bleed through, making the text unreadable. --background-primary is
	   Obsidian's own opaque editor surface, so it stays solid regardless of theme
	   or user background image. Themes whose --db-bg-card is transparent
	   (neon/volt/magma/onyx) define an opaque --db-bg-modal for exactly this
	   case; it reaches this body-level popup via applyModalTheme mirroring.
	   We avoid backdrop-filter here (crash-prone on iOS,
	   and this popup is desktop-only anyway). */
	background: var(--db-bg-modal, var(--background-primary));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-md);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
	color: var(--db-text, var(--text-normal));
	font-size: 1em;
	line-height: 1.45;
	overflow: hidden;
	pointer-events: none;
	animation: dashboard-day-preview-in 0.12s ease;
}

@keyframes dashboard-day-preview-in {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dashboard-calendar-day-preview-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Reuse the calendar event-row look inside the preview — but readable: the
 * base .dashboard-calendar-event font (0.5625em) is sized for compact sidebar
 * grid cells, way too small for this body-level popup. */
.dashboard-calendar-day-preview-list .dashboard-calendar-event {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	padding: 5px 7px;
	border-radius: var(--db-radius-sm, 6px);
	border-left: 3px solid transparent;
}

.dashboard-calendar-day-preview-list .dashboard-calendar-event.prio-high { border-left-color: var(--db-prio-high, #ef4444); }
.dashboard-calendar-day-preview-list .dashboard-calendar-event.prio-medium { border-left-color: var(--db-prio-medium, #f59e0b); }
.dashboard-calendar-day-preview-list .dashboard-calendar-event.prio-low { border-left-color: var(--db-prio-low, #3b82f6); }

.dashboard-calendar-day-preview-list .dashboard-calendar-event.is-overdue {
	background: color-mix(in srgb, var(--db-prio-high, #ef4444) 16%, transparent);
}

.dashboard-calendar-day-preview-list .dashboard-calendar-event.is-done .dashboard-calendar-event-text {
	text-decoration: line-through;
	opacity: 0.6;
}

.dashboard-calendar-day-preview-list .dashboard-calendar-event-time {
	font-size: 0.92em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.dashboard-calendar-day-preview-list .dashboard-calendar-event-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-calendar.is-compact .dashboard-calendar-cell-list,
.dashboard-sidebar-calendar .dashboard-calendar.is-compact .dashboard-calendar-more {
	display: none;
}

/* Settings panel: excluded-folder chips + add row (shared, lightweight) */
.dashboard-settings-folder-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 6px;
}

.dashboard-settings-folder-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px 3px 8px;
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--db-border-card);
	border-radius: 999px;
	font-size: var(--font-ui-smaller);
}

.dashboard-settings-folder-chip-remove {
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	padding: 0;
	border-radius: 50%;
}

.dashboard-settings-folder-chip-remove:hover {
	color: var(--text-normal);
}

.dashboard-settings-folder-chip-remove svg {
	width: 12px;
	height: 12px;
}

.dashboard-settings-folder-add {
	display: flex;
	gap: 4px;
	align-items: center;
	width: 100%;
	margin-top: 4px;
}

.dashboard-settings-folder-input {
	flex: 1;
	min-width: 0;
}

.dashboard-settings-folder-browse,
.dashboard-settings-folder-add-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.dashboard-settings-folder-browse svg {
	width: 14px;
	height: 14px;
}

/* ===== Fortune Stick Modal — Traditional Parchment ===== */
.fortune-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fortune-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 36px 28px 28px;
	min-width: 260px;
	max-width: 300px;
	margin: 0 auto;
	background: linear-gradient(160deg, #f7f1e3 0%, #efe6d0 40%, #f2ead8 100%);
	border: 2px solid #c9a96e;
	border-radius: 4px;
	box-shadow:
		0 2px 12px rgba(139, 69, 19, 0.15),
		inset 0 0 30px rgba(139, 69, 19, 0.04);
	color: #2c1810;
	position: relative;
}

.fortune-card::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border: 1px solid rgba(201, 169, 110, 0.4);
	border-radius: 2px;
	pointer-events: none;
}

.fortune-card-title {
	font-size: 1.5em;
	font-weight: 700;
	color: #8B2500;
	margin-bottom: 6px;
	letter-spacing: 0.12em;
	text-align: center;
}

.fortune-card-subtitle {
	font-size: 0.85em;
	color: #6b5a42;
	margin-bottom: 24px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Category Grid */
.fortune-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
}

.fortune-category-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	border-radius: 4px;
	background: rgba(255, 252, 245, 0.7);
	border: 1.5px solid #c9a96e;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
	color: #2c1810;
}

.fortune-category-btn:hover {
	background: rgba(196, 30, 58, 0.08);
	border-color: #8B2500;
	transform: translateY(-2px);
	box-shadow: 0 2px 8px rgba(139, 37, 0, 0.12);
}

.fortune-category-emoji {
	font-size: 1.5em;
	line-height: 1;
}

.fortune-category-label {
	font-size: 0.9em;
	color: #2c1810;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* ===== Fortune Result Card ===== */
.fortune-card--result {
	padding: 32px 24px 24px;
	min-width: 240px;
	max-width: 280px;
	animation: fortune-fade-in 0.3s ease;
}

/* Seal Stamp Badge */
.fortune-result-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 16px;
}

.fortune-result-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2.5px solid #B22222;
	border-radius: 50%;
	color: #B22222;
	font-size: 0.85em;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	transform: rotate(-8deg);
	position: relative;
}

.fortune-result-seal::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 1px solid rgba(178, 34, 34, 0.3);
	border-radius: 50%;
	pointer-events: none;
}

.fortune-result-seal--super {
	background: rgba(178, 34, 34, 0.08);
}

.fortune-result-seal--good {
	background: rgba(178, 34, 34, 0.05);
	border-color: #C41E3A;
	color: #C41E3A;
}

.fortune-result-seal--good::after {
	border-color: rgba(196, 30, 58, 0.3);
}

.fortune-result-seal--medium {
	background: rgba(107, 90, 66, 0.08);
	border-color: #6b5a42;
	color: #6b5a42;
}

.fortune-result-seal--medium::after {
	border-color: rgba(107, 90, 66, 0.3);
}

.fortune-result-category {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 0.75em;
	color: #8b7355;
	font-weight: 500;
	letter-spacing: 0.04em;
	z-index: 2;
}

.fortune-result-divider {
	width: 80%;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a96e, transparent);
	margin: 0 auto 20px;
}

/* Vertical Verse */
.fortune-result-verse {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 1.2em;
	line-height: 2.2;
	color: #2c1810;
	font-weight: 600;
	letter-spacing: 0.08em;
	height: 180px;
	margin: 0 auto 20px;
	text-align: start;
	padding: 0 8px;
}

/* Flip Card */
.fortune-flip-container {
	perspective: 1000px;
	width: 100%;
}

.fortune-flip-card {
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.fortune-flip-card--flipped {
	transform: rotateY(180deg);
}

.fortune-flip-front {
	backface-visibility: hidden;
}

.fortune-flip-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 0 4px;
	overflow-y: auto;
}

/* Reveal Button */
.fortune-result-reveal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border: 2px solid #B22222;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
	background: transparent;
	color: #B22222;
	letter-spacing: 0.1em;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
	transform: rotate(-2deg);
}

.fortune-result-reveal-btn:hover {
	background: #B22222;
	color: #f7f1e3;
}

.fortune-result-reveal-btn--hidden {
	opacity: 0;
	pointer-events: none;
}

.fortune-result-reveal-btn--show {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.5s ease;
}

/* Back Face Content */
.fortune-back-title {
	font-size: 1.1em;
	font-weight: 700;
	color: #8B2500;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

.fortune-back-interpretation {
	width: 100%;
	font-size: 0.95em;
	line-height: 2;
	color: #2c1810;
	padding: 16px;
	background: rgba(255, 252, 245, 0.6);
	border-radius: 4px;
	border: 1px solid #C41E3A;
}

/* Typewriter Effect */
.fortune-verse-char {
	opacity: 0;
	animation: fortune-char-appear 0.3s ease forwards;
}

@keyframes fortune-char-appear {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fortune-result-back-btn {
	margin-top: 20px;
	font-size: 0.8em;
	color: #8b7355;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
	text-decoration: underline;
	text-underline-offset: 2px;
	letter-spacing: 0.04em;
}

.fortune-result-back-btn:hover {
	opacity: 1;
	color: #8B2500;
}

@keyframes fortune-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Week Calendar Strip */
.dashboard-sidebar-week-calendar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 4px;
	min-height: calc(1.6em + 16px);
}

.dashboard-sidebar-week-cell {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 2px 6px;
	border-radius: var(--db-radius-sm);
	transition: background 0.15s ease;
}

.dashboard-sidebar-week-cell--today {
	background: var(--db-accent);
	border-radius: var(--db-radius-sm);
}

.dashboard-sidebar-week-day {
	font-size: 0.65em;
	color: var(--db-text-faint);
	line-height: 1;
	margin-bottom: 4px;
	letter-spacing: 0.02em;
}

.dashboard-sidebar-week-cell--today .dashboard-sidebar-week-day {
	color: rgba(255, 255, 255, 0.7);
}

.dashboard-sidebar-week-date {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--db-text);
	line-height: 1;
}

.dashboard-sidebar-week-cell--today .dashboard-sidebar-week-date {
	color: #fff;
}

/* On light accents (e.g. 墨白/mono, 曜黑/onyx) white text is unreadable, so use the
   theme's body text color for contrast instead. */
.dashboard-sidebar-week-cell--today-on-light .dashboard-sidebar-week-day {
	color: rgba(0, 0, 0, 0.55);
}

.dashboard-sidebar-week-cell--today-on-light .dashboard-sidebar-week-date {
	color: rgba(0, 0, 0, 0.85);
}

/* Settings widget card */
.dashboard-widget-settings-card {
	border: 1px solid var(--background-modifier-border);
	border-radius: 8px;
	padding: 4px 0;
	margin-bottom: 12px;
}

.dashboard-widget-settings-card > .setting-item:first-child {
	padding-top: 12px;
}

.dashboard-widget-settings-card > .setting-item:last-child {
	padding-bottom: 12px;
}

/* --- Collapsed: clean slim bar --- */
.dashboard-sidebar--collapsed {
	width: 15px;
	cursor: pointer;
	overflow: hidden;
}

.dashboard-sidebar--collapsed > *:not(.dashboard-sidebar-slim-indicator) {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.dashboard-sidebar--collapsed:hover {
	background: var(--db-bg-hover);
}

/* Slim indicator: a subtle vertical line that hints the bar is interactive */
.dashboard-sidebar-slim-indicator {
	display: none;
}

.dashboard-sidebar--collapsed .dashboard-sidebar-slim-indicator {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 40px;
	border-radius: 2px;
	/* Always-visible resting state: use the readable text color at full strength
	   so the grip is obvious even without hovering. */
	background: var(--db-text-faint);
	opacity: 0.65;
	transition: opacity 0.2s ease, background 0.2s ease;
	pointer-events: none;
}

.dashboard-sidebar--collapsed:hover .dashboard-sidebar-slim-indicator {
	opacity: 0.95;
}

/* --- Expanded --- */
.dashboard-sidebar--expanded {
	width: calc(var(--db-sidebar-w, 220) * 1px);
	opacity: 1;
	cursor: default;
	overflow-y: auto;
}

/* --- Pinned: permanent sidebar --- */
.dashboard-sidebar--pinned {
	width: calc(var(--db-sidebar-w, 220) * 1px);
	opacity: 1;
}

/* --- Sidebar pin button (banner bottom-left corner) ---
   Desktop-only. The quick-buttons block became a hideable sidebar widget, so
   the sidebar pin moved out of its header to the banner's bottom-left corner.
   Distinct from .dashboard-banner-pin-btn (the top-right banner-collapse
   bookmark). Faint at rest, full opacity on hover, accent when the sidebar is
   pinned. */
.dashboard-sidebar-pin-btn {
	position: absolute;
	left: 10px;
	bottom: 8px;
	z-index: 5; /* above the stats panel (z-index 1) */
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
	line-height: 1;
	outline: none;
}

.dashboard-sidebar-pin-btn svg {
	width: 15px;
	height: 15px;
}

.dashboard-banner:hover .dashboard-sidebar-pin-btn {
	opacity: 1;
	color: rgba(255, 255, 255, 0.85);
}

.dashboard-sidebar-pin-btn:hover,
.dashboard-sidebar-pin-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
	transform: scale(1.15);
}

.dashboard-sidebar-pin-btn--active {
	opacity: 0.6;
	color: var(--db-accent, #ffffff);
}

/* Collapsed banner keeps the pin reachable, tucked at the thin bar's left edge. */
@media (min-width: 641px) {
	.dashboard-banner--collapsed > .dashboard-sidebar-pin-btn {
		opacity: 0.5;
		bottom: auto;
		top: -3px;
		padding: 2px;
	}
}

.dashboard-section {
	background: var(--db-bg-sidebar);
	border: 1px solid var(--db-border-sidebar);
	border-radius: var(--db-radius-lg);
	padding: 16px;
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
}

.dashboard-section > .dashboard-section-title {
	font-size: 0.85em;
	font-weight: 600;
	margin: 0 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--db-border);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* ===== Recent Docs ===== */
.dashboard-recent-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-recent-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--db-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
	gap: 8px;
}

.dashboard-recent-item:hover {
	background: var(--db-bg-hover);
}

.dashboard-recent-name {
	font-size: 0.9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.dashboard-recent-time {
	font-size: 0.78em;
	opacity: 0.5;
	white-space: nowrap;
}

/* ===== Quick Links (Glass Buttons) ===== */
.dashboard-qa-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 8px;
}

.dashboard-qa-item {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 6px 7px;
	border-radius: 50px;
	background: var(--db-bg-btn);
	border: 1px solid var(--db-border-btn);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
	position: relative;
}

.dashboard-qa-item:hover {
	background: var(--db-bg-btn-hover);
	border-color: var(--db-accent);
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

.dashboard-qa-item:active {
	transform: scale(0.95);
	box-shadow: 0 0 10px color-mix(in srgb, var(--db-accent) 25%, transparent);
	border-color: var(--db-accent);
}

.dashboard-qa-name {
	font-size: 0.75em;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.2;
	max-width: 70px;
}

.dashboard-qa-remove {
	background: var(--db-bg-btn) !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 0;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: absolute;
	top: -5px;
	right: -5px;
	border-radius: 50%;
	width: 18px;
	height: 18px;
}

.dashboard-qa-remove:hover {
	color: var(--db-danger);
}

.dashboard-qa-remove svg {
	width: 11px;
	height: 11px;
	display: block;
}

.dashboard-qa-item:hover .dashboard-qa-remove {
	opacity: 1;
}

.dashboard-qa-edit {
	background: var(--db-bg-btn) !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 0;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: absolute;
	top: -5px;
	left: -5px;
	border-radius: 50%;
	width: 18px;
	height: 18px;
}

.dashboard-qa-edit:hover {
	color: var(--db-accent);
}

.dashboard-qa-edit svg {
	width: 11px;
	height: 11px;
	display: block;
}

.dashboard-qa-item:hover .dashboard-qa-edit {
	opacity: 1;
}

/* Phones only: Obsidian adds .is-mobile on phones AND tablets, but tablets
   carry .is-tablet and drive a pointer (trackpad/mouse), so they keep the
   desktop hover-reveal. Phones have no reliable hover, so keep the
   edit/remove affordances visible instead of stranding them at opacity:0
   (which read as empty deformed blobs). */
.is-mobile:not(.is-tablet) .dashboard-qa-edit,
.is-mobile:not(.is-tablet) .dashboard-qa-remove {
	opacity: 1;
}

/* Tablet reset — same trap as the scroll-top / quicknote-chip fixes elsewhere
   in this file: Obsidian ships `.is-tablet button:not(.clickable-icon)
   { padding: var(--size-4-1) var(--size-4-5) }` (specificity 0,2,1 since
   :not() counts its argument), which beats every plain-class `padding` below
   (0,1,0). Under the app stylesheet's global border-box, any compact icon
   button narrower than the 40px combined padding gets inflated into a pill
   and its flex-centered svg (default flex-shrink) collapses to zero width —
   the blank-icon-button bug seen on tablets: deformed ovals for quick-action
   edit/remove, empty browse buttons in the path-picker rows, and the same
   crush for every other fixed-width icon button below. Qualify with `button`
   to tie at 0,2,1 and win by source order (plugin styles load after app.css).
   Phones carry .is-mobile without .is-tablet and desktop matches neither, so
   both keep the base styles. */
.is-tablet button.dashboard-qa-remove,
.is-tablet button.dashboard-qa-edit,
.is-tablet button.dashboard-quicknote-cfg-icon-btn,
.is-tablet button.dashboard-quicknote-cfg-del,
.is-tablet button.dashboard-library-table-delete,
.is-tablet button.dashboard-library-card-delete,
.is-tablet button.dashboard-pipeline-skill-btn,
.is-tablet button.dashboard-pipeline-col-add,
.is-tablet button.dashboard-pipeline-cfg-icon-btn,
.is-tablet button.dashboard-focal-picker-reset,
.is-tablet button.dashboard-media-delete,
.is-tablet button.dashboard-media-icon-btn,
.is-tablet button.dashboard-weread-cfg-op,
.is-tablet button.dashboard-weread-notebook-import,
.is-tablet button.dashboard-theme-studio-color-clear,
.is-tablet button.dashboard-pmsec-action,
.is-tablet button.dashboard-pmsec-star,
.is-tablet button.dashboard-pmsec-remind,
.is-tablet button.dashboard-pmsec-file-unlink,
.is-tablet button.note-popover-btn {
	padding: 0;
}

/* Compact buttons whose intended padding is non-zero: restore each inset
   rather than flattening to 0. Card action buttons (edit/save/color/delete,
   top-right of todo and memo cards) were the reported tablet gap: Obsidian's
   20px side padding turned each into a wide pill, spacing the icons far
   apart; restoring the base 2px keeps them tight and right-aligned. */
.is-tablet button.dashboard-card-btn { padding: 2px; }
.is-tablet button.dashboard-card-btn--size { padding: 2px 5px; }
.is-tablet button.dashboard-section-add-btn { padding: 2px 4px; }
.is-tablet button.dashboard-pmsec-foot-btn { padding: 3px 10px; }
.is-tablet button.dashboard-qa-add-btn,
.is-tablet button.dashboard-qa-palette-btn { padding: 2px 4px; }
.is-tablet button.dashboard-weread-pager-btn { padding: 0 6px; }
.is-tablet button.dashboard-workspace-btn { padding: 0 3px; }
.is-tablet button.dashboard-workspace-add-btn { padding: 0; }
.is-tablet button.dashboard-banner-pin-btn { padding: 4px; }

.dashboard-qa-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 6px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--db-border);
}

.dashboard-qa-btn-group {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.dashboard-qa-header .dashboard-section-title {
	font-size: 0.85em;
	font-weight: 600;
	margin: 0;
	padding-bottom: 0;
	border-bottom: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.dashboard-qa-add-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint);
	cursor: pointer;
	padding: 2px 4px;
	font-size: 0.65em;
	display: flex;
	align-items: center;
	gap: 3px;
	transition: opacity 0.2s ease, color 0.15s ease;
	line-height: 1;
	opacity: 0;
	outline: none;
}

/* Palette button (background-color picker), same hover-reveal idiom as add. */
.dashboard-qa-palette-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint);
	cursor: pointer;
	padding: 2px 4px;
	font-size: 0.65em;
	display: flex;
	align-items: center;
	transition: opacity 0.2s ease, color 0.15s ease;
	line-height: 1;
	opacity: 0;
	outline: none;
}

.dashboard-qa-header:hover .dashboard-qa-btn-group .dashboard-qa-palette-btn {
	opacity: 1;
}

.dashboard-qa-palette-btn:hover {
	color: var(--db-text) !important;
}

.dashboard-qa-palette-btn svg {
	width: 13px;
	height: 13px;
}

/* Palette popup: preset swatches, custom color input, reset. */
.dashboard-qa-palette-popup {
	padding: 10px;
	gap: 6px;
	min-width: 224px;
}

.dashboard-qa-picker-label {
	font-size: 0.65em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dashboard-qa-picker-divider {
	height: 1px;
	background: var(--db-border-card, rgba(128, 128, 128, 0.25));
	margin: 2px 0;
}

.dashboard-qa-swatch-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.dashboard-qa-swatch {
	height: 22px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.35));
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-qa-swatch:hover {
	transform: scale(1.08);
}

.dashboard-qa-swatch.active {
	box-shadow: 0 0 0 2px var(--db-accent, #6366f1);
}

.dashboard-qa-swatch-custom {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-qa-color-input {
	width: 34px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.35));
	border-radius: var(--db-radius-sm, 6px);
	background: none;
	cursor: pointer;
}

.dashboard-qa-swatch-custom-label {
	font-size: 0.7em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-qa-swatch-reset {
	margin-top: 2px;
	padding: 4px 10px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.35));
	background: none;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.7em;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.dashboard-qa-swatch-reset:hover {
	color: var(--db-text, var(--text-normal));
	border-color: var(--db-accent, #6366f1);
}

.dashboard-qa-header:hover .dashboard-qa-btn-group .dashboard-qa-add-btn {
	opacity: 1;
}

.dashboard-qa-add-btn:hover {
	color: var(--db-text) !important;
}

.dashboard-sidebar--collapsed .dashboard-qa-add-btn {
	display: none;
}

/* Quick Links: fixed height with internal scroll */
.dashboard-quick-actions {
	height: 180px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.dashboard-quick-actions .dashboard-qa-list {
	overflow-x: clip;
	overflow-y: auto;
	margin-bottom: 0;
}

.dashboard-qa-list::-webkit-scrollbar {
	width: 0;
	display: none;
}

/* Quick Actions: icon, badge, preset */
.dashboard-qa-icon {
	display: flex;
	align-items: center;
	color: var(--db-accent);
	flex-shrink: 0;
	opacity: 0.7;
}

.dashboard-qa-icon svg {
	width: 12px;
	height: 12px;
}

/* --- Quick-buttons sidebar widget: compact grid styling ---
   Scoped to .dashboard-sidebar-widgets so the mobile drawer keeps its
   historical layout: 2 equal columns, minimal radius, hidden scrollbar,
   tightened header spacing. */
.dashboard-sidebar-widgets .dashboard-quick-actions {
	padding: 8px 12px 14px;
}

.dashboard-sidebar-widgets .dashboard-qa-header {
	margin: 0 0 2px 0;
	padding-bottom: 2px;
}

/* Compact widget title: smaller than the stock section title. */
.dashboard-sidebar-widgets .dashboard-qa-header .dashboard-section-title {
	font-size: 0.72em;
}

.dashboard-sidebar-widgets .dashboard-qa-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	/* Hide the scrollbar: scrollbar-width beats any theme's webkit pseudo
	   styling on current Chromium. */
	scrollbar-width: none;
}

.dashboard-sidebar-widgets .dashboard-qa-list::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
}

.dashboard-sidebar-widgets .dashboard-qa-item {
	border-radius: 4px;
	min-width: 0;
	/* User-picked button color (palette popup) rides on --qa-btn-bg, set
	   inline on the widget root; falls back to the theme button color. */
	background: var(--qa-btn-bg, var(--db-bg-btn));
}

.dashboard-sidebar-widgets .dashboard-qa-item:hover {
	background: var(--qa-btn-hover, var(--db-bg-btn-hover));
}

.dashboard-sidebar-widgets .dashboard-qa-name {
	flex: 1;
	min-width: 0;
	max-width: none;
}

.dashboard-qa-item--preset {
	opacity: 0.85;
}

.dashboard-qa-item--preset:hover {
	opacity: 1;
}

.dashboard-qa-item--dragging {
	opacity: 0.35;
	transform: scale(0.9);
}

.dashboard-qa-item--drag-over {
	border-color: var(--db-accent) !important;
	box-shadow: 0 0 8px color-mix(in srgb, var(--db-accent) 30%, transparent) !important;
	transform: scale(1.05);
}

.dashboard-preset-actions {
	flex-shrink: 0;
}

.dashboard-preset-actions .dashboard-qa-list {
	margin-bottom: 0;
}

/* Quick Actions: Add Action Modal tabs */
.dashboard-action-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
}

.dashboard-action-tab {
	flex: 1;
	padding: 8px;
	border: 1px solid var(--db-border-btn);
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-btn);
	color: var(--db-text-muted);
	cursor: pointer;
	font-size: 0.85em;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-action-tab:hover {
	background: var(--db-bg-btn-hover);
}

.dashboard-action-tab.active {
	background: var(--db-accent);
	color: var(--db-text-on-accent);
	border-color: var(--db-accent);
}

/* ===== Kanban ===== */
.dashboard-kanban-wrapper {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative; /* anchor for the floating workspace switcher */
}

/* Row + wrap (not column): full-width rows (flex-basis 100%) stack one per
   line exactly as before, while paired half-width rows share a line. The
   section DOM order still equals the columns array order — no wrapper
   elements, so :scope > [data-column] queries and dnd index math hold.
   align-content flex-start keeps wrapped lines top-anchored (default stretch
   would grow the rows to eat leftover vertical space). inline-size container
   so paired rows can fall back to full width in narrow panes (split panes
   track the pane, not the viewport — same rationale as the quicknote bar). */
.dashboard-kanban {
	--db-kanban-gap: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--db-kanban-gap);
	flex: 1;
	overflow-y: auto;
	scrollbar-width: none;
	padding: 0;
	container-type: inline-size;
}

.dashboard-kanban::-webkit-scrollbar {
	width: 0;
}

.dashboard-section-row {
	background: var(--db-bg-section);
	border: 1px solid var(--db-border-section);
	border-radius: var(--db-radius-lg);
	/* Vertical padding tightened from 16px (title-to-edge, content-to-handle)
	   to buy content space; horizontal stays 16px so the half-row pairing
	   basis and card gutters are untouched. */
	padding: 12px 16px;
	transition: border-color 0.2s ease, background 0.2s ease;
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
	max-height: 500px;
	display: flex;
	flex-direction: column;
	/* One full-width row per line in the wrap container; the shorthand's 0
	   shrink also keeps a resized sibling from squishing others (the kanban
	   scrolls instead). border-box is load bearing: without it the 16px padding
	   + 1px border ride on top of the percentage basis and two halves would no
	   longer fit one line. */
	box-sizing: border-box;
	flex: 0 0 100%;
	/* Load bearing since the board went row+wrap (section pairing): a row-main
	   flex item defaults to min-width:auto = content min-size, so a nowrap
	   card deck (sticky/memo/todo/projects) inflated the row past its 100%
	   basis — the cards area stopped overflowing (its horizontal scrollbar
	   vanished) and the whole board stretched instead. 0 clamps the row back
	   to its basis so the card area owns the overflow again. */
	min-width: 0;
}

/* Paired half row (drag a section beside another). Grow fills the line when
   an orphan half slips through (hand-edited file mid-normalization); with a
   partner the two bases exactly fill the line, so grow never engages.
   --db-pair-basis carries a dragged split (left member's share, set inline by
   renderer.ts); 50% default keeps the historical even split. */
.dashboard-section-row--half {
	/* The 0.5px-per-side slack is load-bearing: bases summing to EXACTLY the
	   line (x% + (100-x)% - gap + gap) sit on the wrap razor edge, and
	   subpixel rounding (Windows 125-150% scaling, odd splits like 39/61)
	   tips them over into stacked full-width rows — the "pair drag breaks"
	   bug. Staying 1px under lets flex-grow (1 1 above) absorb the slack
	   invisibly while the pair can never wrap. */
	flex: 1 1 calc(var(--db-pair-basis, 50%) - var(--db-kanban-gap, 10px) / 2 - 0.5px);
	min-width: 0;
}

/* The left half member anchors the pair's divider handle (absolute, spanning
   the gutter between the halves). */
.dashboard-section-row--pair-left {
	position: relative;
}

/* Pair divider: invisible col-resize strip straddling the board gutter; a
   centered accent line surfaces on hover and for the whole drag. */
.dashboard-pair-width-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Half the gutter plus half the strip: the strip's center sits exactly in
	   the gutter's center. */
	right: calc(-1 * (var(--db-kanban-gap, 10px) / 2 + 5px));
	width: 10px;
	cursor: col-resize;
	z-index: 6;
}

.dashboard-pair-width-handle::before {
	content: '';
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	border-radius: 2px;
	background: transparent;
	transition: background 0.2s ease;
}

.dashboard-section-row:hover > .dashboard-pair-width-handle::before,
.dashboard-section-row--resizing > .dashboard-pair-width-handle::before {
	background: color-mix(in srgb, var(--db-accent, #6366f1) 55%, transparent);
}

/* Narrow pane (split view, side-by-side panes): two cramped 40%-width rows
   read worse than stacked full rows. Queries the kanban container itself —
   the pane width, not the viewport. */
@container (max-width: 620px) {
	.dashboard-section-row--half {
		flex-basis: 100%;
	}

	/* Halves stack here — a width divider has nothing to divide. */
	.dashboard-pair-width-handle {
		display: none;
	}
}

.dashboard-section-row[data-section-type="projects"] {
	max-height: none;
}

.dashboard-section-row[data-section-type="library"] {
	max-height: 800px;
}

.dashboard-section-row[data-section-type="weread"],
.dashboard-section-row[data-section-type="ticktick"],
.dashboard-section-row[data-section-type="heatmap"],
.dashboard-section-row[data-section-type="dataview"],
.dashboard-section-row[data-section-type="web"],
.dashboard-section-row[data-section-type="rss"],
.dashboard-section-row[data-section-type="pipeline"],
.dashboard-section-row[data-section-type="skills"],
.dashboard-section-row[data-section-type="pm"] {
	max-height: 800px;
}

/* Web section: definite height (memo's fixed-height pattern) so the embedded
   frame fills the row and drag-resize can GROW it, not just clamp it —
   content-sized rows cannot be enlarged via max-height alone. Mobile
   overrides this with 70vh in the mobile media block. */
.dashboard-section-row[data-section-type="web"] {
	height: 480px;
}

.dashboard-section-row[data-section-type="images"],
.dashboard-section-row[data-section-type="videos"] {
	max-height: none;
}

.dashboard-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	flex-shrink: 0;
}

.dashboard-section-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-section-toggle {
	width: 26px;
	height: 24px;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	transition: transform 0.2s ease;
	opacity: 0.7;
}

.dashboard-section-toggle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--section-color, var(--db-text-muted));
	transition: border-top-color 0.15s ease;
}

.dashboard-section-toggle:hover {
	opacity: 1;
}

.dashboard-section-row[data-section-type="projects"] .dashboard-section-toggle::before {
	border-top-color: #10b981;
}

.dashboard-section-row--collapsed > .dashboard-section-header .dashboard-section-toggle {
	transform: rotate(-90deg);
}

/* Section reorder grip handle (desktop only) */
.dashboard-section-grip {
	display: flex;
	align-items: center;
	cursor: grab;
	color: var(--db-text-faint, var(--text-faint));
	opacity: 0.4;
	transition: opacity 0.15s ease, color 0.15s ease;
	padding: 0 2px;
}

.dashboard-section-grip:hover {
	opacity: 1;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-section-grip:active {
	cursor: grabbing;
}

.dashboard-section-grip svg {
	width: 16px;
	height: 16px;
}

.dashboard-section-row--dragging {
	opacity: 0.5;
}

.dashboard-section-row--section-drag-over {
	box-shadow: 0 -2px 0 0 var(--db-accent, var(--interactive-accent));
}

.dashboard-section-row--section-drag-over[data-section-drop-pos="after"] {
	box-shadow: 0 2px 0 0 var(--db-accent, var(--interactive-accent));
}

/* Side drops (pairing): vertical accent line on the target's near edge. */
.dashboard-section-row--section-drag-over[data-section-drop-pos="left"] {
	box-shadow: -3px 0 0 0 var(--db-accent, var(--interactive-accent));
}

.dashboard-section-row--section-drag-over[data-section-drop-pos="right"] {
	box-shadow: 3px 0 0 0 var(--db-accent, var(--interactive-accent));
}

/* Section resize handle (desktop only) — transparent border revealed on hover,
   mirroring the memo card resize handle. Sits at the bottom via flex order.
   position+z-index keep the strip hit-testable above an embedded web frame in
   edge cases where the frame's surface ends up over the row's bottom edge. */
.dashboard-section-resize-handle {
	order: 999;
	align-self: stretch;
	height: 8px;
	margin-top: 2px;
	cursor: ns-resize;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
	position: relative;
	z-index: 2;
}

/* Drag shield: while any section is being height-dragged, embedded frames
   must not eat pointer input — the OS routes mouse events over an
   iframe/webview to the guest page, so mousemove/mouseup on the document
   stop arriving the moment the cursor crosses one, freezing the drag. */
.dashboard-frames-muted iframe,
.dashboard-frames-muted webview {
	pointer-events: none;
}

/* Viewport-wide drag shield mounted on body for the lifetime of a guarded
   drag (pair divider, section height): sits above the entire app so every
   pointermove/pointerup lands in this document — embedded frames and
   Windows webview surface overflow included — while pointer capture on it
   makes the stream hit-test-proof. */
.dashboard-drag-shield {
	position: fixed;
	inset: 0;
	z-index: var(--layer-drag-shield, 9999);
	background: transparent;
	touch-action: none;
}

.dashboard-section-row:hover > .dashboard-section-resize-handle,
.dashboard-section-row--resizing > .dashboard-section-resize-handle {
	border-bottom-color: var(--db-border-card, rgba(255, 255, 255, 0.10));
}

.dashboard-section-resize-handle:hover {
	border-bottom-color: var(--db-text-muted, var(--text-muted)) !important;
}

.dashboard-section-row--resizing {
	user-select: none;
}

/* When collapsed, hide every direct child except the header (covers cards,
   library content, media/calendar/heatmap/weread bodies, and the resize handle). */
.dashboard-section-row--collapsed > *:not(.dashboard-section-header) {
	display: none;
}

.dashboard-section-row--collapsed {
	height: auto !important;
	/* A collapsed member of a pair opts out of the line's equal-height
	   stretch — otherwise it renders as a tall empty box next to its
	   expanded partner. */
	align-self: flex-start;
}

.dashboard-section-row .dashboard-section-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0;
	border-bottom: none;
	padding-bottom: 0;
}

.dashboard-section-add-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint);
	cursor: pointer;
	padding: 2px 4px;
	font-size: 0.65em;
	display: flex;
	align-items: center;
	gap: 3px;
	transition: opacity 0.2s ease, color 0.15s ease;
	line-height: 1;
	opacity: 0;
	outline: none;
}

.dashboard-section-header:hover .dashboard-section-add-btn {
	opacity: 1;
}

.dashboard-section-add-btn:hover {
	color: var(--db-text) !important;
}

.dashboard-section-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.dashboard-add-section-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-add-section-row .dashboard-task-input {
	flex: 1;
	min-width: 0;
}

.dashboard-section-type-picker {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.dashboard-section-type-btn {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.7em;
	cursor: pointer;
	background: transparent !important;
	color: var(--db-text-faint);
	border: 1px solid var(--db-border) !important;
	box-shadow: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
	outline: none;
	white-space: nowrap;
}

.dashboard-section-type-btn:hover {
	color: var(--db-text);
	border-color: var(--db-accent) !important;
}

.dashboard-section-type-btn.active {
	color: var(--db-accent) !important;
	border-color: var(--db-accent) !important;
	background: color-mix(in srgb, var(--db-accent) 10%, transparent) !important;
}

.dashboard-section-confirm-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	cursor: pointer;
	background: transparent !important;
	color: var(--db-text-faint);
	border: 1px solid var(--db-border) !important;
	box-shadow: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
	outline: none;
	padding: 0;
}

.dashboard-section-confirm-btn:hover {
	color: var(--db-accent) !important;
	border-color: var(--db-accent) !important;
}

.dashboard-section-cards {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.dashboard-section-cards > .dashboard-card {
	flex: 1 1 200px;
	min-width: 200px;
	max-height: 100%;
}

/* Notes, Sticky & Projects: horizontal scroll, no wrap */
.dashboard-section-row[data-section-type="sticky"] .dashboard-section-cards,
.dashboard-section-row[data-section-type="projects"] .dashboard-section-cards {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
}

/* Notes & Projects: fixed card width, overflow scrolls horizontally */
.dashboard-section-row[data-section-type="projects"] .dashboard-section-cards > .dashboard-card {
	flex: 0 0 280px;
	min-width: 200px;
	max-width: 500px;
}

/* Sticky ("便利贴") cards (memo + todo flavors) */
.dashboard-section-row[data-section-type="sticky"] .dashboard-section-cards > .dashboard-card {
	flex: 0 0 260px;
	min-width: 200px;
	max-width: 500px;
}

/* Card size button (dashboard widgets only) */
.dashboard-card-btn--size {
	font-size: 0.7em;
	font-weight: 600;
	min-width: 22px;
	padding: 2px 5px;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* Memo card resize handle (desktop only) */
.dashboard-card-resize-handle {
	position: absolute;
	top: 4px;
	right: 0;
	bottom: 4px;
	width: 8px;
	cursor: ew-resize;
	z-index: 10;
	border-right: 2px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card:hover .dashboard-card-resize-handle,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--resizing .dashboard-card-resize-handle,
.dashboard-section-row[data-section-type="projects"] .dashboard-card:hover .dashboard-card-resize-handle,
.dashboard-section-row[data-section-type="projects"] .dashboard-card--resizing .dashboard-card-resize-handle {
	border-right-color: var(--db-border-card);
	box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
}

.dashboard-card-resize-handle:hover {
	border-right-color: var(--db-text-muted) !important;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25) !important;
}

.dashboard-card--resizing {
	user-select: none;
}

/* ===== Sticky ("便利贴") section: memo + todo cards in one todo-style row =====
   Container follows the todo section (see the grouped rules above); these only
   restore each card flavor's internals, which the memo/todo section-scoped
   rules would otherwise provide. */
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--generic,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--note {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 10px 16px 10px 12px;
	flex-shrink: 0;
	min-height: 200px;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--generic .dashboard-card-body,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--note .dashboard-card-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--generic .dashboard-memo-textarea,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--note .dashboard-memo-textarea {
	resize: none;
	flex: 1;
	min-height: 0;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--generic .dashboard-card-header,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--note .dashboard-card-header {
	flex-shrink: 0;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--task .dashboard-card-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--task .dashboard-task-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dashboard-section-row[data-section-type="sticky"] .dashboard-card--task .dashboard-task-add,
.dashboard-section-row[data-section-type="sticky"] .dashboard-card--task .dashboard-progress {
	flex-shrink: 0;
}

/* Full-line anchor: these are flex items of the wrap kanban now and would
   otherwise shrink to content width. position+z-index keep the button
   clickable/painted above an embedded web frame in edge cases where the
   frame's surface ends up over the line below it. */
.dashboard-add-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	flex: 0 0 100%;
	/* Desktop bottom breathing room (Rae, 2026-10-19): with only 60px the
	   last section could not scroll clear of the workspace's bottom edge —
	   a bottom-docked Claudian chat window sits over it and over this
	   button. ~200px lifts the scrolled-to-end content above that band.
	   Phones keep their own media-block clearance (native bottom bar +
	   safe-area); immersive layout overrides to 0 (grid tile geometry). */
	margin-bottom: 200px;
	background: var(--db-bg-add-section);
	border: 2px dashed var(--db-border-add-section);
	border-radius: var(--db-radius-lg);
	color: var(--db-text-muted);
	font-size: 0.82em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
	z-index: 2;
}

.dashboard-add-section:hover {
	background: var(--db-bg-hover-strong);
	border-color: var(--db-accent);
}

/* ===== Scroll-to-top floating button ===== */
/* position:fixed anchors to the viewport. Kept below the mobile drawer/modal
   stacks (z-index 100/9999) so overlays correctly cover it. The .apex-dashboard-root
   has isolation:isolate, so this sits in the view's own stacking context. */
.dashboard-scroll-top {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--db-accent) 45%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--db-accent) 45%, transparent);
	color: var(--db-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.9);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background 0.15s ease;
}

.dashboard-scroll-top--visible {
	opacity: 0.82;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, background 0.15s ease;
}

.dashboard-scroll-top:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--db-accent) 70%, transparent);
}

.dashboard-scroll-top:active {
	transform: translateY(1px) scale(0.96);
}

.dashboard-scroll-top svg {
	width: 16px;
	height: 16px;
}

/* Tablet fix: Obsidian's own stylesheet ships `.is-tablet button:not(.clickable-icon)
   { padding: 4px 20px }` — specificity 0,2,1, since :not() counts its argument.
   That beats this plugin's plain-class `padding: 0` (0,1,0), inflating the 36px
   round scroll-top button into a wide pill that pushes its arrow glyph out of
   view, and eating ~80px of task-text width on every todo row (delete +
   reminder buttons). Qualify with `button` to reach 0,2,1 and win by source
   desktop matches neither — both stay on the base styles. */
.is-tablet button.dashboard-scroll-top,
.is-tablet button.dashboard-task-delete,
.is-tablet button.dashboard-task-reminder-btn,
.is-tablet button.dashboard-calendar-refresh-btn,
.is-tablet button.dashboard-calendar-today-btn {
	padding: 0;
}

/* Todo action buttons keep their intended 2px side padding (14px glyph +
   padding = compact footprint), instead of Obsidian's 20px tablet padding. */
.is-tablet button.dashboard-task-delete,
.is-tablet button.dashboard-task-reminder-btn {
	padding: 0 2px;
}

/* Add-section modal type picker (icon+label grid, mobile-friendly) */
.dashboard-add-section-grid {
	display: grid;
	/* Fixed 5 columns on desktop so the option ORDER reads as deliberate
	   rows (sticky & data / agent boards & calendar-RSS / media & web /
	   reading & tasks) — an auto-fill grid reflows with modal width and
	   scrambles the layout. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

/* Phones: back to fluid columns — five 66px cards don't fit a 350px sheet. */
.is-mobile .dashboard-add-section-grid {
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.dashboard-add-section-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 6px;
	border-radius: var(--db-radius-md, 10px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
	text-align: center;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dashboard-add-section-card:hover {
	border-color: var(--db-accent, var(--interactive-accent));
	transform: translateY(-1px);
}

.dashboard-add-section-card.active {
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

.dashboard-add-section-card-icon svg {
	width: 20px;
	height: 20px;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-add-section-card.active .dashboard-add-section-card-icon svg {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-add-section-card-name {
	font-size: 0.6875em;
	line-height: 1.2;
}

.dashboard-add-section-card.active .dashboard-add-section-card-name {
	color: var(--db-accent, var(--interactive-accent));
	font-weight: 600;
}

.dashboard-section-name-input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 7px 10px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.18));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, var(--background-modifier-form-field));
	color: var(--db-text, var(--text-normal));
	font-size: 0.9em;
}

.dashboard-section-name-input:focus {
	outline: none;
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-modal-btn.is-disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* ===== Cards ===== */
.dashboard-card {
	background: var(--db-bg-card);
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-md);
	padding: 16px;
	box-shadow: var(--db-shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	cursor: grab;
	position: relative;
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dashboard-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--db-shadow-card-hover);
	background: var(--db-bg-card-hover);
}

.dashboard-card[draggable="true"]:active {
	cursor: grabbing;
}

.dashboard-card--dragging {
	opacity: 0.4;
	transform: rotate(2deg);
	transition: none;
}

.dashboard-card--ghost,
.dashboard-card--ghost * {
	transition: none;
}

.dashboard-section-row--drag-over {
	border-color: var(--db-accent);
	background: var(--db-bg-drop-indicator);
}

.dashboard-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* User-tuned: one step below the section title's size — was 1.0em/10px,
	   which read as heavy and left a wide band above the card's items. */
	margin-bottom: 6px;
	flex-shrink: 0;
}

.dashboard-card-title {
	font-size: 0.875em;
	font-weight: 600;
	margin: 0;
	flex: 1;
	line-height: 1.3;
}

.dashboard-title-edit-input {
	width: 100%;
	background: var(--db-bg-input);
	border: 1px solid var(--db-border-input-focus);
	border-radius: var(--db-radius-sm);
	color: var(--db-text);
	font-size: 1em;
	font-weight: 600;
	font-family: var(--db-font);
	padding: 2px 6px;
	outline: none;
}

.dashboard-section-rename-input {
	width: 100%;
	background: var(--db-bg-input);
	border: 1px solid var(--db-border-input-focus);
	border-radius: var(--db-radius-sm);
	color: var(--db-text);
	font-size: 1em;
	font-weight: 700;
	font-family: var(--db-font);
	padding: 2px 6px;
	outline: none;
}

.dashboard-card-actions {
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.dashboard-card:hover .dashboard-card-actions {
	opacity: 1;
}

.dashboard-card-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 2px;
	font-size: 0.85em;
	transition: color 0.15s ease;
	line-height: 1;
	outline: none;
}

.dashboard-card-btn:hover {
	color: var(--db-text) !important;
}

.dashboard-card-btn--danger:hover {
	color: var(--db-danger) !important;
}

/* Per-card "new note" (notes/projects sections): accent tint on hover so it
   reads as a create action next to neutral edit and danger delete. */
.dashboard-card-btn--newnote:hover {
	color: var(--db-accent) !important;
}

.dashboard-card-body {
	font-size: 0.95em;
	color: var(--db-text-muted);
	line-height: 1.3;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.dashboard-card-body--doc-drop {
	outline: 2px dashed var(--db-border-accent);
	outline-offset: -2px;
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-card-hover);
}

.dashboard-card--file-drop {
	outline: 2px dashed var(--db-border-accent);
	outline-offset: -4px;
	background: var(--db-bg-card-hover);
}

.dashboard-card-body::-webkit-scrollbar {
	width: 0;
}

/* ===== Tasks ===== */
.dashboard-task-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Standing hoverable zone on an empty task list (mirrors
   .dashboard-project-docs:empty). Without it the empty list is 0px tall, the
   list-level dragover/drop fallback can never be hovered, and the
   --drop-target min-height below only applies after that dragover — a
   chicken-and-egg that left empty todo cards unable to receive dragged
   tasks. */
.dashboard-task-list:empty {
	min-height: 32px;
}

.dashboard-task-list--drop-target {
	min-height: 40px;
	border: 2px dashed var(--db-border-accent);
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-card-hover);
}

.dashboard-task-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--db-radius-sm);
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-card);
	cursor: grab;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dashboard-task-item:hover {
	background: var(--db-bg-card-hover);
}

.dashboard-task-item:hover .dashboard-task-delete {
	opacity: 1;
}

.dashboard-task-item:active {
	cursor: grabbing;
}

.dashboard-task-item--dragging {
	opacity: 0.4;
	transform: rotate(1deg);
}

.dashboard-task-item--drag-over {
	border-color: var(--db-accent);
	background: var(--db-bg-drop-indicator);
}

.dashboard-task-item--child {
	border-left: 2px solid var(--db-border-card);
}

/* Direct DOM hide for collapsed descendants — avoids a full re-render on
   every chevron toggle. The renderer toggles this class in place. */
.dashboard-task-item--hidden,
.dashboard-project-doc-item--hidden {
	display: none !important;
}

.dashboard-task-item {
	position: relative;
	transition: transform 0.12s ease;
}

.dashboard-task-item--drag-top::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--db-accent);
	border-radius: 1px;
}

.dashboard-task-item--drag-bottom::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--db-accent);
	border-radius: 1px;
}

.dashboard-task-item--drag-nest {
	box-shadow: inset 0 0 0 2px var(--db-accent);
	background: color-mix(in srgb, var(--db-accent) 12%, transparent);
}

.dashboard-task-checkbox {
	accent-color: var(--db-checkbox);
	flex-shrink: 0;
	transform: scale(1.0);
}

.dashboard-task-toggle {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--db-text-muted);
}

.dashboard-task-toggle--active {
	cursor: pointer;
	border-radius: var(--db-radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
}

.dashboard-task-toggle--active:hover {
	color: var(--db-text);
	background: var(--db-bg-card-hover);
}

.dashboard-task-toggle svg {
	width: 12px;
	height: 12px;
}

.dashboard-task-text {
	font-size: 0.95em;
	flex: 1;
	min-width: 0;
	line-height: 1.2;
	/* Long task text wraps instead of pushing action buttons off-screen. */
	overflow-wrap: anywhere;
	/* Multi-line task text (Shift+Enter in the inline editor) renders its
	   line breaks instead of collapsing them to a single space. */
	white-space: pre-wrap;
}

.dashboard-task-text--done {
	text-decoration: line-through;
	opacity: 0.5;
}

.dashboard-task-edit-textarea {
	width: 100%;
	min-height: 1.5em;
	max-height: 8em;
	font-size: 0.95em;
	line-height: 1.2;
	font-family: inherit;
	resize: none;
	background: var(--db-bg-hover);
	border: 1px solid var(--db-border-card);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--db-text-primary);
	overflow-y: auto;
}

.dashboard-task-delete {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 0 3px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.dashboard-task-delete:hover {
	color: var(--db-text) !important;
}

.dashboard-task-delete svg {
	width: 14px;
	height: 14px;
}

/* Mobile: shrink the action buttons so the task text keeps usable width.
   The reminder button is always rendered (even without a reminder), so both
   action glyphs compete with the text — tighten their footprint on phones. */
@media (max-width: 640px) {
	.dashboard-task-delete,
	.dashboard-task-reminder-btn {
		padding: 0 1px;
	}

	.dashboard-task-delete svg,
	.dashboard-task-reminder-btn svg {
		width: 12px;
		height: 12px;
	}

	.dashboard-task-text {
		font-size: 0.9em;
	}
}

.dashboard-task-add {
	margin-top: 6px;
	border-top: 1px solid var(--db-border);
	padding-top: 6px;
}

.dashboard-task-input {
	width: 100%;
	/* Kill the native input chrome: iOS WKWebView draws its own rounded field
	   background from -webkit-appearance even when background/border are none
	   (desktop Chromium doesn't), which turned the mobile add-task input into
	   a rounded box. Any author-side appearance declaration beats the UA sheet,
	   so no !important needed here. */
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	font-size: 0.9em;
	padding: 4px 0;
	outline: none;
	font-family: var(--db-font);
}

.dashboard-task-input::placeholder {
	color: var(--db-text-faint);
	opacity: 0.5;
}

.dashboard-task-input:focus {
	color: var(--db-text);
}

/* ===== Note ===== */
.dashboard-note-quote {
	border-left: 3px solid var(--db-quote-border);
	padding: 4px 0 4px 12px;
	margin: 0 0 8px 0;
	font-style: italic;
	opacity: 0.85;
	font-size: 0.95em;
	line-height: 1.6;
}

/* ===== Memo ===== */
.dashboard-memo-textarea {
	width: 100%;
	min-height: 90px;
	background: var(--db-bg-input);
	border: 1px solid var(--db-border-input);
	border-radius: var(--db-radius-sm);
	color: var(--db-text);
	font-size: 0.95em;
	font-family: var(--db-font);
	padding: 10px;
	resize: none;
		overflow-y: auto;
	line-height: 1.6;
	outline: none;
	transition: border-color 0.15s ease;
}

.dashboard-memo-textarea:focus {
	border-color: var(--db-border-input-focus);
}

.dashboard-memo-textarea::placeholder {
	color: var(--db-text-faint);
	opacity: 0.5;
}

.dashboard-memo-view {
	width: 100%;
	min-height: 90px;
	background: var(--db-bg-input);
	border: 1px solid transparent;
	border-radius: var(--db-radius-sm);
	color: var(--db-text);
	font-size: 0.95em;
	font-family: var(--db-font);
	padding: 10px;
	line-height: 1.6;
	cursor: pointer;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-y: auto;
	transition: border-color 0.15s ease;
}

.dashboard-memo-view:hover {
	border-color: var(--db-border-input);
}

.dashboard-memo-view--empty {
	color: var(--db-text-faint);
	opacity: 0.5;
}

/* Markdown-rendered memo view. Obsidian's renderer emits bare document-level
   elements with full margins; compact them to memo-card scale. pre-wrap must
   come off or the renderer's own newlines would double-space every block. */
.dashboard-memo-view--md {
	white-space: normal;
	cursor: default;
}
.dashboard-memo-view--md > *:first-child { margin-top: 0; }
.dashboard-memo-view--md > *:last-child { margin-bottom: 0; }
.dashboard-memo-view--md p { margin: 0 0 0.35em; }
.dashboard-memo-view--md h1, .dashboard-memo-view--md h2, .dashboard-memo-view--md h3,
.dashboard-memo-view--md h4, .dashboard-memo-view--md h5, .dashboard-memo-view--md h6 {
	margin: 0.45em 0 0.2em;
	font-size: 1em;
	font-weight: 600;
	color: var(--db-text);
}
.dashboard-memo-view--md ul, .dashboard-memo-view--md ol {
	margin: 0.2em 0 0.35em;
	padding-left: 1.35em;
}
.dashboard-memo-view--md li { margin: 0.1em 0; }
.dashboard-memo-view--md blockquote {
	margin: 0.25em 0;
	padding: 2px 0 2px 10px;
	border-left: 3px solid var(--db-quote-border, var(--db-accent, var(--interactive-accent)));
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-memo-view--md code {
	font-size: 0.88em;
	padding: 1px 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 10%, transparent);
}
.dashboard-memo-view--md pre {
	margin: 0.25em 0;
	padding: 6px 8px;
	font-size: 0.85em;
	overflow-x: auto;
	border-radius: var(--db-radius-sm, 6px);
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 8%, transparent);
}
.dashboard-memo-view--md pre code { padding: 0; background: none; }
.dashboard-memo-view--md a { color: var(--db-link, var(--db-accent, var(--interactive-accent))); cursor: pointer; }
.dashboard-memo-view--md img { max-width: 100%; border-radius: var(--db-radius-sm, 6px); }
/* Task checkboxes stay display-only: clicks pass through to the card, whose
   whole-view click still switches into edit mode. */
.dashboard-memo-view--md input[type="checkbox"] { pointer-events: none; }
.dashboard-memo-view--md hr { margin: 0.5em 0; border-color: var(--db-border, var(--background-modifier-border)); }

.theme-light .dashboard-memo-textarea {
	color: var(--db-text);
}

/* ===== Link ===== */
.dashboard-link-url {
	color: var(--db-link);
	text-decoration: none;
	font-size: 0.95em;
	word-break: break-all;
}

.dashboard-link-url:hover {
	text-decoration: underline;
}

/* ===== Project ===== */
.dashboard-project-docs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}

.dashboard-project-docs:empty {
	min-height: 32px;
}

.dashboard-project-docs--drop-target {
	min-height: 40px;
	border: 2px dashed var(--db-border-accent);
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-card-hover);
}

.dashboard-project-doc-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 10px;
	border-radius: var(--db-radius-sm);
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-card);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.dashboard-project-doc-item--child {
	border-left: 2px solid var(--db-border-card);
}

.dashboard-project-doc-item:hover {
	background: var(--db-bg-card-hover);
}

.dashboard-project-doc-item:hover .dashboard-project-doc-remove {
	opacity: 1;
}

.dashboard-project-doc-name {
	font-size: 0.95em;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.dashboard-project-doc-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--db-accent);
	opacity: 0.75;
	margin-right: 4px;
}

.dashboard-project-doc-icon svg {
	width: 13px;
	height: 13px;
}

.dashboard-project-doc-remove {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 0 3px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
}

.dashboard-project-doc-item:hover .dashboard-project-doc-remove {
	opacity: 1;
}

.dashboard-project-doc-remove:hover {
	color: var(--db-text) !important;
}

.dashboard-project-doc-remove svg {
	width: 14px;
	height: 14px;
}

.dashboard-project-add-doc {
	margin-top: 6px;
	border-top: 1px solid var(--db-border);
	padding-top: 6px;
	position: relative;
}

.dashboard-project-doc-results {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: 150px;
	overflow-y: auto;
	background: var(--db-bg-card);
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	z-index: 1;
}

.dashboard-project-doc-results:empty {
		display: none;
	}

	.dashboard-project-doc-result {
	padding: 5px 8px;
	font-size: 0.88em;
	cursor: pointer;
	color: var(--db-text-muted);
	transition: background 0.1s ease;
}

.dashboard-project-doc-result:hover {
	background: var(--db-bg-hover);
	color: var(--db-text);
}

/* ===== Progress ===== */
.dashboard-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.dashboard-progress-bar {
	flex: 1;
	height: 6px;
	background: var(--db-bg-hover);
	border-radius: 3px;
	overflow: hidden;
}

.dashboard-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--db-progress-from), var(--db-progress-to));
	border-radius: 3px;
	transition: width 0.3s ease;
}

.dashboard-progress-text {
	font-size: 0.82em;
	opacity: 0.7;
	min-width: 36px;
	text-align: right;
}

/* ===== Habit ===== */
.dashboard-habit-streak {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.95em;
	margin-bottom: 6px;
}

.dashboard-habit-icon {
	font-size: 1.1em;
}

/* ===== Type Badges ===== */
.dashboard-card-type-badge {
	position: absolute;
	bottom: 6px;
	right: 8px;
	font-size: 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.3;
	font-weight: 500;
}

.dashboard-card-type-badge--task { color: var(--db-accent); }
.dashboard-card-type-badge--note { color: var(--db-accent-light); }
.dashboard-card-type-badge--link { color: var(--db-link); }
.dashboard-card-type-badge--project { color: var(--db-progress-from); }
.dashboard-card-type-badge--habit { color: var(--db-checkbox); }
.dashboard-card-type-badge--generic { color: var(--db-text-muted); }

/* ===== Due Date ===== */
.dashboard-card-due {
	font-size: 0.82em;
	opacity: 0.6;
	margin-top: 8px;
	flex-shrink: 0;
}

/* ===== Memo Color Accent ===== */
.dashboard-card[data-has-color="true"] {
	position: relative;
}

.dashboard-card[data-has-color="true"]::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--db-card-accent, var(--db-accent));
	opacity: 0.12;
	pointer-events: none;
}

/* ===== Project Cover Image ===== */
.dashboard-project-cover {
	height: 100px;
	background-size: cover;
	background-position: center;
	border-radius: var(--db-radius-md) var(--db-radius-md) 0 0;
	margin: -16px -16px 12px -16px;
	position: relative;
	overflow: hidden;
}

.dashboard-project-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
}

.dashboard-project-cover--default {
	background: linear-gradient(135deg, var(--db-accent) 0%, var(--db-bg-card-hover) 50%, var(--db-bg-card) 100%);
}

.dashboard-card.dashboard-card--cover {
	padding-top: 0;
	overflow: hidden;
}

/* ===== Drop Indicator ===== */
.dashboard-drop-indicator {
	height: 3px;
	background: var(--db-accent);
	border-radius: 2px;
	margin: 2px 0;
	opacity: 0.6;
}

/* ===== Modal ===== */
.dashboard-modal {
	border-radius: var(--db-radius-lg, 12px);
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	/* --db-bg-modal is the opaque dialog surface for themes whose --db-bg-card
	   is transparent (neon/volt/magma/onyx rely on the root's near-black
	   gradient, which doesn't exist behind body-level dialogs). */
	background: var(--db-bg-modal, var(--db-bg-card, var(--background-secondary))) !important;
	backdrop-filter: var(--db-backdrop-blur, blur(24px));
	-webkit-backdrop-filter: var(--db-backdrop-blur, blur(24px));
	color: var(--db-text, var(--text-normal));
	padding: 28px 32px 24px;
}

/* Tighter padding for modals whose content is grouped into cards (e.g. the
   library/database config and banner editor), so the card layout doesn't sit
   inside an oversized white margin. */
.dashboard-modal.dashboard-modal--compact {
	padding: 18px 20px 16px;
}

/* ── Modal-layer input legibility (the dialog twin of the in-board fix) ──
   Dialogs mirror the opening board's tokens (applyModalTheme), so an
   immersive-opened dialog carries dark-glass surfaces and a LIGHT --db-text
   — but Obsidian's own field rules (`input[type='text'] { color:
   var(--text-normal) }`) out-specify the plugin's per-input colors and paint
   black text on that dark glass (the widget-background URL field, every
   workflow-config input). Force the MIRRORED token on every themed surface:
   light boards mirror dark text (no visual change), immersive mirrors
   light. The marker class rides applyModalTheme, so body-level popovers and
   floating panels (music search, confirm dialogs) are covered too. */
.dashboard-themed-surface input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']),
.dashboard-themed-surface textarea,
.dashboard-themed-surface select {
	color: var(--db-text, var(--text-normal)) !important;
}

.dashboard-themed-surface input::placeholder,
.dashboard-themed-surface textarea::placeholder {
	color: var(--db-text-muted, var(--text-faint)) !important;
	opacity: 1;
}

/* Native <select> dropdown lists render with the APP's own chrome (a white
   popup in a light session) — pin the options there so the mirrored light
   color never lands on it; only the closed box follows the dialog surface. */
.dashboard-themed-surface select option {
	color: var(--text-normal);
	background: var(--background-primary);
}

/* Obsidian Setting rows inside dialogs: their name/description tokens
   (--text-normal/--text-muted) also out-specify the mirrored surface on a
   dark-glass dialog — re-anchor them to the dialog's own text pair. */
.dashboard-themed-surface .setting-item-name {
	color: var(--db-text, var(--text-normal));
}

.dashboard-themed-surface .setting-item-description {
	color: var(--db-text-muted, var(--text-muted));
}

/* ── Modal-layer CONTROL legibility (the button/select twin of the fixes
   above) ── Core-styled controls inside a mirrored dialog paint with the
   appearance's own tokens, NOT the mirrored --db-* set: `select`/`.dropdown`
   get --dropdown-background and buttons get --interactive-normal (both white
   under Border light), while the input rule above already forced light field
   text — so the agent-target (Claudian/Codex/…) and scope (作用于卡片/整列)
   selects in every skill-button config rendered light-on-white. Re-anchor
   the same control family the root block maps, resolved from the INLINE
   mirrored tokens applyModalTheme copied onto this very element (no
   mirror-list change needed; the marker class only exists once they were
   mirrored). Deliberately NOT mapping --text-normal/--text-muted here: the
   `select option` pin above must keep painting the APP's chrome for the
   native dropdown list, and Setting rows already carry their own pair. Plain
   buttons get their text via --text-color instead; .mod-cta/.mod-warning
   keep core behavior on the mapped --text-on-accent. --input-shadow becomes
   a palette border ring so glass controls read as controls. */
.dashboard-themed-surface {
	--interactive-normal: var(--db-bg-btn, var(--background-modifier-hover));
	--interactive-hover: var(--db-bg-btn-hover, var(--background-modifier-hover));
	--interactive-accent: var(--db-accent, var(--text-accent));
	--interactive-accent-hover: var(--db-accent-light, var(--db-accent));
	--dropdown-background: var(--db-bg-input, var(--background-modifier-form-field));
	--dropdown-background-hover: var(--db-bg-input, var(--background-modifier-form-field));
	--text-on-accent: var(--db-text-inverse, #fff);
	--input-shadow: inset 0 0 0 1px var(--db-border-btn, var(--background-modifier-border));
	--input-shadow-hover: inset 0 0 0 1px var(--db-border-btn, var(--background-modifier-border));
}

.dashboard-themed-surface button:not(.clickable-icon):not(.mod-cta):not(.mod-warning) {
	--text-color: var(--db-text, var(--text-normal));
}

.dashboard-modal.modal,
.modal.modal--dashboard {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Glass modal: override Obsidian's stock .modal box.
   LOAD-BEARING selector shape: modals add `modal--dashboard` to their
   CONTAINER element (.modal-container), so the box inside must be targeted
   through it — the historical `.modal.modal--dashboard` form never matched
   (dead code), the height cap + inner scroll never engaged, and tall
   dialogs (card editor, widget configs) overflowed the viewport with their
   bottom half unreachable — the "modal content not fully visible" bug. */
.modal-container.modal--dashboard .modal,
.modal.modal--dashboard {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	border-radius: var(--db-radius-lg, 12px);
	overflow-y: auto;
	max-height: 85vh;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.modal-container.modal--dashboard .modal::-webkit-scrollbar,
.modal.modal--dashboard::-webkit-scrollbar {
	width: 4px;
}

.modal-container.modal--dashboard .modal::-webkit-scrollbar-track,
.modal.modal--dashboard::-webkit-scrollbar-track {
	background: transparent;
}

.modal-container.modal--dashboard .modal::-webkit-scrollbar-thumb,
.modal.modal--dashboard::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.modal-container.modal--dashboard .modal::-webkit-scrollbar-thumb:hover,
.modal.modal--dashboard::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 35%, transparent);
}

.modal-bg.modal-bg--dashboard {
	background: rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.modal.modal--dashboard > .modal-close-button,
.modal.modal--dashboard .modal-close-button,
.modal-container.modal--dashboard .modal-close-button {
	color: var(--db-text-muted) !important;
}

.dashboard-modal h2 {
	color: var(--db-accent, var(--text-normal));
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
	padding-bottom: 10px;
	margin-bottom: 4px;
}

.dashboard-modal .dashboard-modal-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

/* Card-style module backgrounds inside configuration/stats modals.
   Mirrors the reading-stats card treatment so grouped settings feel separated
   which uses its own fortune-* classes. */
.dashboard-library-config-section,
.dashboard-pomodoro-stats-section,
.dashboard-modal-quotes,
.dashboard-modal-images,
.dashboard-modal-quote-color {
	background: var(--db-bg-hover, rgba(0, 0, 0, 0.03));
	border: 1px solid var(--db-border, rgba(0, 0, 0, 0.05));
	border-radius: 10px;
	padding: 12px;
}

.dashboard-modal-form label {
	font-size: 0.9em;
	font-weight: 500;
	display: block;
	margin-bottom: 4px;
	color: var(--db-text, var(--text-normal));
}

.dashboard-modal-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--db-border-input, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, var(--background-modifier-form-field));
	color: var(--db-text, var(--text-normal));
	font-size: 0.95em;
	font-family: var(--db-font, var(--font-interface));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-modal-input:focus {
	outline: none;
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 8px;
}

.dashboard-modal-actions button {
	border-radius: var(--db-radius-sm, 6px);
	font-family: var(--db-font, var(--font-interface));
}

/* ===== Library-dialect footer & buttons =====
   Standard action bar for card-grouped config modals (the header/body/footer
   skeleton used by every config dialog). Primary action sits rightmost;
   --confirm is solid accent with the theme's accent-appropriate inverse text
   color, neutral/cancel buttons use the accent-tinted ghost treatment. */
.dashboard-modal-footer {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--db-border, var(--background-modifier-border));
}

.dashboard-modal-btn {
	padding: 6px 16px;
	border-radius: var(--db-radius-sm, 6px);
	font-family: var(--db-font, var(--font-interface));
	font-size: 0.9em;
	cursor: pointer;
	background: var(--db-bg-btn, var(--background-modifier-hover));
	border: 1px solid var(--db-border-btn, var(--background-modifier-border));
	color: var(--db-text, var(--text-normal));
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dashboard-modal-btn:hover {
	background: var(--db-bg-btn-hover, var(--background-modifier-hover));
}

.dashboard-modal-btn--cancel {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-modal-btn--confirm {
	background: var(--db-accent, var(--interactive-accent));
	border-color: transparent;
	color: var(--db-text-inverse, var(--text-on-accent));
	font-weight: 500;
}

.dashboard-modal-btn--confirm:hover {
	background: var(--db-accent, var(--interactive-accent));
	opacity: 0.88;
}

.dashboard-modal-btn--danger {
	background: var(--db-danger, #e5484d);
	border-color: transparent;
	color: #fff;
	font-weight: 500;
}

.dashboard-modal-btn--danger:hover {
	opacity: 0.88;
}

/* Banner Quotes List */
.dashboard-modal-quotes {
	margin-bottom: 12px;
}

.dashboard-modal-quotes-label {
	display: block;
	margin-bottom: 6px;
}

.dashboard-modal-quotes-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 340px;
	overflow-y: auto;
	padding: 2px 0;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-modal-quotes-list::-webkit-scrollbar {
	width: 4px;
}

.dashboard-modal-quotes-list::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-modal-quotes-list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.dashboard-modal-quote-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 8px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
}

.dashboard-modal-quote-fields {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.dashboard-modal-quote-input {
	min-height: 40px !important;
	resize: vertical;
}

.dashboard-modal-author-input {
	flex: 1;
}

.dashboard-modal-quote-delete {
	flex-shrink: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.3));
	cursor: pointer;
	padding: 2px 4px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
}

.dashboard-modal-quote-item:hover .dashboard-modal-quote-delete {
	opacity: 1;
}

.dashboard-modal-quote-delete:hover {
	color: var(--db-danger, #ef4444) !important;
}

.dashboard-modal-quote-delete svg {
	width: 14px;
	height: 14px;
}

.dashboard-modal-quote-add {
	margin-top: 6px;
	background: var(--db-bg-btn, rgba(255, 255, 255, 0.06)) !important;
	border: 1px dashed var(--db-border-btn, rgba(255, 255, 255, 0.12)) !important;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, rgba(255, 255, 255, 0.5));
	padding: 6px 14px;
	cursor: pointer;
	font-family: var(--db-font, var(--font-interface));
	font-size: 0.85em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	width: fit-content;
}

.dashboard-modal-quote-add:hover {
	background: var(--db-bg-btn-hover, rgba(255, 255, 255, 0.10)) !important;
	border-color: var(--db-border-btn-hover, rgba(255, 255, 255, 0.2)) !important;
	color: var(--db-text, rgba(255, 255, 255, 0.8));
}

/* Banner Images List */
.dashboard-modal-images {
	margin-bottom: 12px;
}

.dashboard-modal-images-label {
	display: block;
	margin-bottom: 6px;
}

.dashboard-modal-images-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 200px;
	overflow-y: auto;
	padding: 2px 0;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-modal-images-list::-webkit-scrollbar {
	width: 4px;
}

.dashboard-modal-images-list::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-modal-images-list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.dashboard-modal-image-item {
	display: flex;
	align-items: center;
	gap: 6px;
	/* The focal-point picker wraps onto its own full-width line below. */
	flex-wrap: wrap;
}

.dashboard-modal-image-focal {
	flex-basis: 100%;
	min-width: 0;
}

.dashboard-modal-image-input {
	flex: 1;
	min-width: 0;
}

.dashboard-modal-image-delete {
	flex-shrink: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.3));
	cursor: pointer;
	padding: 2px 4px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
}

.dashboard-modal-image-item:hover .dashboard-modal-image-delete {
	opacity: 1;
}

.dashboard-modal-image-delete:hover {
	color: var(--db-danger, #ef4444) !important;
}

/* ===== Focal-point picker (banner + card-cover config modals, 方案 B) =====
   A cover-cropped preview at the target's approximate aspect ratio; the
   crosshair marks the focal point (where the image's picked point lands in
   the crop). Drag anywhere inside via pointer events — touch included, with
   touch-action: none so the drag never scrolls the modal. */
.dashboard-focal-picker {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 2px 0 4px;
}

/* Reset + delete stack vertically beside the preview (delete BELOW reset). */
.dashboard-focal-picker-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 auto;
}

.dashboard-focal-picker-delete {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.35));
	cursor: pointer;
	padding: 3px;
	min-height: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease;
}

.dashboard-focal-picker-delete:hover {
	color: var(--db-danger, #ef4444) !important;
}

.dashboard-focal-picker-delete svg {
	width: 13px;
	height: 13px;
}

.dashboard-focal-picker-box {
	flex: 1;
	min-width: 0;
	position: relative;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(127, 127, 127, 0.15));
	background-color: var(--db-bg-card-hover, rgba(127, 127, 127, 0.1));
	background-size: cover;
	background-position: center;
	cursor: crosshair;
	overflow: hidden;
	touch-action: none;
}

.dashboard-focal-picker-box--dragging {
	cursor: grabbing;
	border-color: var(--db-accent, var(--interactive-accent));
}

/* No/invalid path: a quiet disabled strip instead of an image. */
.dashboard-focal-picker-box--empty {
	cursor: default;
	opacity: 0.55;
}

.dashboard-focal-picker-marker {
	position: absolute;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.dashboard-focal-picker-marker::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--db-accent, #8b5cf6);
}

.dashboard-focal-picker-reset {
	flex-shrink: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.35));
	cursor: pointer;
	padding: 3px;
	min-height: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--db-radius-sm, 6px);
}

.dashboard-focal-picker-reset:hover {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-focal-picker-reset svg {
	width: 15px;
	height: 15px;
}

.dashboard-modal-image-delete svg {
	width: 14px;
	height: 14px;
}

.dashboard-modal-image-add {
	margin-top: 6px;
	background: var(--db-bg-btn, rgba(255, 255, 255, 0.06)) !important;
	border: 1px dashed var(--db-border-btn, rgba(255, 255, 255, 0.12)) !important;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, rgba(255, 255, 255, 0.5));
	padding: 6px 14px;
	cursor: pointer;
	font-family: var(--db-font, var(--font-interface));
	font-size: 0.85em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	width: fit-content;
}

.dashboard-modal-image-add:hover {
	background: var(--db-bg-btn-hover, rgba(255, 255, 255, 0.10)) !important;
	border-color: var(--db-border-btn-hover, rgba(255, 255, 255, 0.2)) !important;
	color: var(--db-text, rgba(255, 255, 255, 0.8));
}

/* Banner Quote Color */
.dashboard-modal-quote-color {
	margin-bottom: 12px;
}

.dashboard-modal-quote-color-label {
	display: block;
	margin-bottom: 6px;
}

/* Second label (font) follows the color row, not the card top. */
.dashboard-modal-quote-color-row + .dashboard-modal-quote-color-label {
	margin-top: 10px;
}

.dashboard-modal-quote-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Banner Quote Font: Obsidian's native .dropdown flexes inside the color row
 * layout while the reset button keeps its natural width. */
.dashboard-modal-quote-font-select {
	flex: 1;
	min-width: 0;
}

.dashboard-modal-color-input {
	width: 40px;
	height: 32px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-sm, 6px);
	background: none;
	cursor: pointer;
	padding: 2px;
}

.dashboard-modal-color-input::-webkit-color-swatch-wrapper {
	padding: 0;
}

.dashboard-modal-color-input::-webkit-color-swatch {
	border: none;
	border-radius: 4px;
}

.dashboard-modal-color-reset {
	background: var(--db-bg-btn, rgba(255, 255, 255, 0.06)) !important;
	border: 1px solid var(--db-border-btn, rgba(255, 255, 255, 0.12)) !important;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, rgba(255, 255, 255, 0.5));
	padding: 6px 14px;
	cursor: pointer;
	font-family: var(--db-font, var(--font-interface));
	font-size: 0.85em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dashboard-modal-color-reset:hover {
	background: var(--db-bg-btn-hover, rgba(255, 255, 255, 0.10)) !important;
	color: var(--db-text, rgba(255, 255, 255, 0.8));
}

/* Modal Document Search */
.dashboard-modal-docs-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
	margin-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-modal-docs-list::-webkit-scrollbar {
	width: 4px;
}

.dashboard-modal-docs-list::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-modal-docs-list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.dashboard-modal-docs-empty {
	opacity: 0.5;
	font-size: 0.85em;
	padding: 8px 0;
}

.dashboard-modal-doc-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
}

.dashboard-modal-doc-name {
	font-size: 0.9em;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-modal-doc-remove {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted, rgba(255, 255, 255, 0.5));
	cursor: pointer;
	padding: 0 4px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
}

.dashboard-modal-doc-item:hover .dashboard-modal-doc-remove {
	opacity: 1;
}

.dashboard-modal-doc-remove:hover {
	color: var(--db-text) !important;
}

.dashboard-modal-doc-remove svg {
	width: 14px;
	height: 14px;
}

.dashboard-modal-search-results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 150px;
	overflow-y: auto;
	margin-top: 4px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-modal-search-results::-webkit-scrollbar {
	width: 4px;
}

.dashboard-modal-search-results::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-modal-search-results::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.dashboard-modal-search-hint {
	padding: 12px;
	text-align: center;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.3));
	font-size: 0.85em;
}

.dashboard-modal-search-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
	transition: background 0.1s ease;
}

.dashboard-modal-search-item:hover {
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

.dashboard-modal-search-name {
	font-size: 0.9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-modal-search-path {
	font-size: 0.78em;
	color: var(--db-text-faint, rgba(255, 255, 255, 0.3));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 12px;
}

.dashboard-modal-search-item.is-selected {
	background: var(--db-bg-hover-strong, rgba(255, 255, 255, 0.09));
}

.dashboard-modal-search-check {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	border-radius: 4px;
	border: 1.5px solid var(--db-border, rgba(255, 255, 255, 0.15));
	color: var(--db-accent, #22d3ee);
	font-size: 0.75em;
}

.dashboard-modal-search-item.is-selected .dashboard-modal-search-check {
	border-color: var(--db-accent, #22d3ee);
	background: var(--db-accent, #22d3ee);
	color: var(--db-bg, #0c0e1a);
}

.dashboard-modal-search-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	min-width: 0;
}

.dashboard-modal-batch-add {
	width: 100%;
	margin-top: 8px;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* ===== Doc Search ===== */
.dashboard-docsearch {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.dashboard-docsearch-input {
	font-size: 1em;
	padding: 10px 14px;
}

.dashboard-docsearch-results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-docsearch-results::-webkit-scrollbar {
	width: 4px;
}

.dashboard-docsearch-results::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-docsearch-results::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.dashboard-docsearch-hint {
	padding: 16px;
	text-align: center;
	color: var(--db-text-faint);
	font-size: 0.9em;
}

.dashboard-docsearch-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	transition: background 0.1s ease;
}

.dashboard-docsearch-item:hover {
	background: var(--db-bg-hover);
}

.dashboard-docsearch-icon {
	font-size: 1em;
	flex-shrink: 0;
}

.dashboard-docsearch-info {
	flex: 1;
	overflow: hidden;
}

.dashboard-docsearch-name {
	font-size: 0.9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-docsearch-path {
	font-size: 0.78em;
	color: var(--db-text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-docsearch-cancel {
	margin-top: 8px;
	align-self: flex-end;
}

/* ===== Add Action — confirm view (custom name & icon) ===== */
.dashboard-qa-confirm-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 14px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-md, 8px);
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.03));
}

.dashboard-qa-confirm-preview-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dashboard-qa-confirm-field {
	margin-bottom: 12px;
}

.dashboard-qa-confirm-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85em;
	color: var(--db-text-muted);
}

.dashboard-qa-icon-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-qa-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
	gap: 6px;
	max-height: 168px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-md, 8px);
	scrollbar-width: thin;
}

.dashboard-qa-icon-option {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
	color: var(--db-text-muted);
	transition: background 0.1s ease, color 0.1s ease;
}

.dashboard-qa-icon-option:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
	color: var(--db-text);
}

.dashboard-qa-icon-option--selected {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-bg, #fff);
}

/* ===== Empty & Loading ===== */
.dashboard-empty {
	opacity: 0.5;
	font-size: 0.85em;
}

.dashboard-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0.5;
}

/* ===== Scrollbar ===== */
.dashboard-kanban::-webkit-scrollbar,
.dashboard-sidebar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.dashboard-section-cards::-webkit-scrollbar {
	width: 0;
	height: 4px;
}

.dashboard-kanban::-webkit-scrollbar-track,
.dashboard-sidebar::-webkit-scrollbar-track,
.dashboard-section-cards::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-kanban::-webkit-scrollbar-thumb,
.dashboard-sidebar::-webkit-scrollbar-thumb,
.dashboard-section-cards::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
	transition: background 0.2s ease;
}

.dashboard-section-cards:hover::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 18%, transparent);
}

.dashboard-section-cards::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 30%, transparent);
}

/* Firefox */
.dashboard-section-cards {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-section-cards:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent) 18%, transparent) transparent;
}

/* ===== Theme-specific enhancements ===== */

/* Aurora: modal — frosted glass with cyan glow */

/* Earth: modal — warm organic, rounded */

/* Nordic: modal — clean minimal with blue accent */

/* -- Aurora: rainbow glow, soft rounded -- */
/* The memo textarea lives inside a section row, so --db-sec-glow resolves to
   that section's pony hue. Modal inputs live OUTSIDE the dashboard root —
   --db-sec-* is not in the applyModalTheme mirror list there, so they derive
   the glow from --db-accent (which is mirrored) instead. */
.apex-dashboard-root[data-theme="aurora"] .dashboard-memo-textarea:focus {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 16px var(--db-sec-glow);
}

.apex-dashboard-root[data-theme="aurora"] .dashboard-modal-input:focus {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 16px color-mix(in srgb, var(--db-accent) 18%, transparent);
}

.apex-dashboard-root[data-theme="aurora"] .dashboard-section-row--drag-over {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 20px var(--db-sec-glow);
}

.apex-dashboard-root[data-theme="aurora"] .dashboard-add-section {
	border-radius: var(--db-radius-lg, 14px);
	border-color: var(--db-border-add-section);
}

.apex-dashboard-root[data-theme="aurora"] .dashboard-add-section:hover {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 12px var(--db-sec-glow);
}

/* -- Earth: pill-shaped, warm terracotta -- */

.apex-dashboard-root[data-theme="earth"] .dashboard-add-section {
	border-radius: 16px;
	border-color: rgba(188, 90, 52, 0.35);
}

.apex-dashboard-root[data-theme="earth"] .dashboard-add-section:hover {
	border-color: #bc5a34;
	box-shadow: 0 0 12px rgba(217, 119, 6, 0.12);
}

/* -- Nordic: clean minimal with subtle accent border -- */
.apex-dashboard-root[data-theme="nordic"] .dashboard-card {
	border: 1px solid rgba(43, 187, 215, 0.14);
}

.theme-dark .apex-dashboard-root[data-theme="nordic"] .dashboard-card {
	border-color: rgba(43, 187, 215, 0.18);
}

.apex-dashboard-root[data-theme="nordic"] .dashboard-add-section {
	border-color: rgba(100, 125, 165, 0.4);
	border-radius: 8px;
}

.theme-dark .apex-dashboard-root[data-theme="nordic"] .dashboard-add-section {
	border-color: rgba(88, 130, 190, 0.35);
}

.apex-dashboard-root[data-theme="nordic"] .dashboard-add-section:hover {
	border-color: #177d95;
}

/* -- Island: Animal Crossing — forest greens, ocean accents, 3D press -- */
.apex-dashboard-root[data-theme="island"] .dashboard-card {
	border: 2px solid var(--db-border-card);
	box-shadow: 0 4px 0 0 #a8c8a5;
	transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.apex-dashboard-root[data-theme="island"] .dashboard-card:hover {
	box-shadow: 0 5px 0 0 #98b894, 0 8px 24px rgba(74, 103, 65, 0.15);
	transform: translateY(-2px);
	border-color: #82b87e;
}

.theme-dark .apex-dashboard-root[data-theme="island"] .dashboard-card {
	box-shadow: 0 4px 0 0 #2a4a2e;
}

.theme-dark .apex-dashboard-root[data-theme="island"] .dashboard-card:hover {
	box-shadow: 0 5px 0 0 #2a4a2e, 0 6px 16px rgba(0, 0, 0, 0.2);
}

.apex-dashboard-root[data-theme="island"] .dashboard-memo-textarea:focus {
	border-color: #ffcc00;
	box-shadow: 0 3px 0 0 #e0b800, 0 0 0 3px rgba(255, 204, 0, 0.15);
}

.apex-dashboard-root[data-theme="island"] .dashboard-modal-input:focus {
	border-color: #ffcc00;
	box-shadow: 0 3px 0 0 #e0b800, 0 0 0 3px rgba(255, 204, 0, 0.15);
}

.apex-dashboard-root[data-theme="island"] .dashboard-section-row--drag-over {
	border-color: #19c8b9;
	box-shadow: 0 0 0 2px rgba(25, 200, 185, 0.15);
}

.apex-dashboard-root[data-theme="island"] .dashboard-note-quote {
	border-left-color: #82d5bb;
}

.apex-dashboard-root[data-theme="island"] .dashboard-add-section {
	border-radius: 50px;
	border: 2px dashed rgba(25, 200, 185, 0.35);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.apex-dashboard-root[data-theme="island"] .dashboard-add-section:hover {
	border-color: #19c8b9;
	background: rgba(25, 200, 185, 0.06);
	transform: translateY(-1px);
	box-shadow: 0 4px 0 0 #a8c8a5;
}

.theme-dark .apex-dashboard-root[data-theme="island"] .dashboard-add-section:hover {
	box-shadow: 0 4px 0 0 #2a4a2e;
}

/* Island: modal — cream parchment, green-tinted */

/* Island: checkbox — grass green */
.apex-dashboard-root[data-theme="island"] .task-checkbox:checked {
	accent-color: #6fba2c;
}

/* Island: banner — forest frame */
.apex-dashboard-root[data-theme="island"] .dashboard-banner {
	border-radius: 20px;
	border: 2px solid #b5d4b0;
}

/* Neon: banner — solid dark frame + scrim so the image and white quote read clearly */
.apex-dashboard-root[data-theme="neon"] .dashboard-banner {
	background-color: #0a0a0c;
	border: 1px solid rgba(255, 46, 136, 0.16);
}
.apex-dashboard-root[data-theme="neon"] .dashboard-banner-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.apex-dashboard-root[data-theme="neon"] .dashboard-banner-quote {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.4);
}
.apex-dashboard-root[data-theme="neon"] .dashboard-banner-author {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Volt: banner — solid dark frame + scrim so the image and white quote read clearly */
.apex-dashboard-root[data-theme="volt"] .dashboard-banner {
	background-color: #090a0e;
	border: 1px solid rgba(0, 194, 255, 0.16);
}
.apex-dashboard-root[data-theme="volt"] .dashboard-banner-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.apex-dashboard-root[data-theme="volt"] .dashboard-banner-quote {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.4);
}
.apex-dashboard-root[data-theme="volt"] .dashboard-banner-author {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Magma: banner — solid dark frame + scrim so the image and white quote read clearly */
.apex-dashboard-root[data-theme="magma"] .dashboard-banner {
	background-color: #0c0a08;
	border: 1px solid rgba(255, 107, 26, 0.16);
}
.apex-dashboard-root[data-theme="magma"] .dashboard-banner-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.apex-dashboard-root[data-theme="magma"] .dashboard-banner-quote {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.4);
}
.apex-dashboard-root[data-theme="magma"] .dashboard-banner-author {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Onyx: banner — solid dark frame + scrim so the image and white quote read clearly */
.apex-dashboard-root[data-theme="onyx"] .dashboard-banner {
	background-color: #0a0a0a;
	border: 1px solid rgba(233, 255, 64, 0.16);
}
.apex-dashboard-root[data-theme="onyx"] .dashboard-banner-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.apex-dashboard-root[data-theme="onyx"] .dashboard-banner-quote {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.4);
}
.apex-dashboard-root[data-theme="onyx"] .dashboard-banner-author {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Island: card title — round, friendly */
.apex-dashboard-root[data-theme="island"] .dashboard-card-title {
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #4a6741;
}

/* Island: section headers — forest accent */
.apex-dashboard-root[data-theme="island"] .dashboard-section-header {
	color: #4a6741;
}

/* Island: sidebar links — ocean tint on hover */
.apex-dashboard-root[data-theme="island"] .dashboard-quick-link:hover {
	background: #e4f0f8;
}

/* Island: NookPhone-style pastel tints on memo cards */
.apex-dashboard-root[data-theme="island"] .dashboard-card[data-type="memo"] {
	border-left: 4px solid #82d5bb;
}

.apex-dashboard-root[data-theme="island"] .dashboard-card[data-type="todo"] {
	border-left: 4px solid #6fba2c;
}

.apex-dashboard-root[data-theme="island"] .dashboard-card[data-type="project"] {
	border-left: 4px solid #889df0;
}

.apex-dashboard-root[data-theme="island"] .dashboard-card[data-type="link"] {
	border-left: 4px solid #f8a6b2;
}

.apex-dashboard-root[data-theme="island"] .dashboard-card[data-type="notes"] {
	border-left: 4px solid #f7cd67;
}

/* Island: progress bar — teal to grass green gradient */
.apex-dashboard-root[data-theme="island"] .dashboard-progress-fill {
	background: linear-gradient(90deg, #19c8b9, #6fba2c);
}

/* -- Tundra: pill-shaped, warm organic (cloned from Earth) -- */

.apex-dashboard-root[data-theme="tundra"] .dashboard-add-section {
	border-radius: 16px;
	border-color: rgba(217, 119, 6, 0.25);
}

.apex-dashboard-root[data-theme="tundra"] .dashboard-add-section:hover {
	border-color: #d97706;
}

/* Tundra: modal — warm organic, rounded */

/* -- Blossom: Barbie gelato — pink hover edges + candy focus rings (the
   scoop shadows themselves live in the --db-shadow-card tokens; the
   dimensional chapter sits next to the AQUA block) -- */
.apex-dashboard-root[data-theme="blossom"] .dashboard-card:hover {
	border-color: rgba(224, 33, 138, 0.24);
}

.apex-dashboard-root[data-theme="blossom"] .dashboard-memo-textarea:focus {
	border-color: rgba(224, 33, 138, 0.45);
	box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.10);
}

.apex-dashboard-root[data-theme="blossom"] .dashboard-modal-input:focus {
	border-color: rgba(224, 33, 138, 0.45);
	box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.10);
}

/* Drag-over REPLACES the tray's inset shadow (higher specificity), so the
   syrup-tray insets ride along inside the candy ring. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row--drag-over {
	border-color: rgba(224, 33, 138, 0.45);
	box-shadow:
		0 0 0 3px rgba(224, 33, 138, 0.10),
		inset 0 2px 6px rgba(190, 24, 110, 0.10),
		inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.theme-dark .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row--drag-over {
	box-shadow:
		0 0 0 3px rgba(255, 111, 181, 0.12),
		inset 0 2px 6px rgba(0, 0, 0, 0.35),
		inset 0 -1px 0 rgba(255, 182, 213, 0.07);
}

.apex-dashboard-root[data-theme="blossom"] .dashboard-add-section {
	border-radius: var(--db-radius-lg, 22px);
	border-color: rgba(224, 33, 138, 0.28);
}

.apex-dashboard-root[data-theme="blossom"] .dashboard-add-section:hover {
	border-color: rgba(224, 33, 138, 0.55);
	box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.10);
}

/* Blossom: modal — rose glass with warm glow */

/* -- Matcha: deep matcha + gold tea glow -- */
.apex-dashboard-root[data-theme="matcha"] .dashboard-card:hover {
	box-shadow: 0 6px 24px rgba(80, 95, 55, 0.18), 0 0 16px rgba(110, 148, 52, 0.12);
	border-color: rgba(110, 148, 52, 0.30);
}
.apex-dashboard-root[data-theme="matcha"] .dashboard-memo-textarea:focus {
	border-color: rgba(79, 112, 40, 0.45);
	box-shadow: 0 0 16px rgba(110, 148, 52, 0.12);
}
.apex-dashboard-root[data-theme="matcha"] .dashboard-modal-input:focus {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 16px color-mix(in srgb, var(--db-accent) 18%, transparent);
}
.apex-dashboard-root[data-theme="matcha"] .dashboard-section-row--drag-over {
	border-color: var(--db-border-input-focus);
	box-shadow: 0 0 20px color-mix(in srgb, var(--db-accent) 14%, transparent);
}
.apex-dashboard-root[data-theme="matcha"] .dashboard-add-section {
	border-radius: var(--db-radius-lg, 14px);
	border-color: rgba(79, 112, 40, 0.30);
}
.apex-dashboard-root[data-theme="matcha"] .dashboard-add-section:hover {
	border-color: #4a6a24;
	box-shadow: 0 0 12px rgba(110, 148, 52, 0.14);
}
/* Matcha: modal — soft green glass */

/* -- Lilac: wisteria + rose garden glow -- */

/* Lilac: modal — soft purple glass */

/* -- Dusk: dreamy cloud-soft modal -- */

/* -- Sakura: soft petal glow modal -- */

/* -- Moonlight: ethereal silver modal -- */

/* -- Neon: near-black + neon magenta modal (same in light & dark) -- */
[data-theme="neon"] .dashboard-add-section {
	border-radius: 6px;
	border-color: rgba(255, 46, 136, 0.20);
	letter-spacing: 0.02em;
}
[data-theme="neon"] .dashboard-add-section:hover {
	border-color: rgba(255, 46, 136, 0.45);
	box-shadow: 0 0 10px rgba(255, 46, 136, 0.08);
}

/* -- Neon: high-contrast buttons (legible in both light & dark) -- */
/* Pomodoro Start/Stop — solid magenta pill with white text */
[data-theme="neon"] .dashboard-sidebar-pomodoro-main-btn {
	background: #ff2e88 !important;
	background-color: #ff2e88 !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: none !important;
}
[data-theme="neon"] .dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.85;
	background: #ff5ca8 !important;
	background-color: #ff5ca8 !important;
}
[data-theme="neon"] .dashboard-sidebar-pomodoro-main-btn--running {
	background: rgba(255, 255, 255, 0.10) !important;
	background-color: rgba(255, 255, 255, 0.10) !important;
	color: #ff2e88 !important;
	border: 1px solid rgba(255, 46, 136, 0.40) !important;
}

/* Banner modal Add-Quote / Add-Image — magenta text on a dark chip */

/* -- Volt: near-black + electric cyan modal (same in light & dark) -- */
[data-theme="volt"] .dashboard-add-section {
	border-radius: 6px;
	border-color: rgba(0, 194, 255, 0.20);
	letter-spacing: 0.02em;
}
[data-theme="volt"] .dashboard-add-section:hover {
	border-color: rgba(0, 194, 255, 0.45);
	box-shadow: 0 0 10px rgba(0, 194, 255, 0.08);
}

/* -- Volt: high-contrast buttons (legible in both light & dark) -- */
/* Pomodoro Start/Stop — solid cyan pill with black text */
[data-theme="volt"] .dashboard-sidebar-pomodoro-main-btn {
	background: #00c2ff !important;
	background-color: #00c2ff !important;
	color: #001018 !important;
	border: none !important;
	box-shadow: none !important;
}
[data-theme="volt"] .dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.85;
	background: #4dd6ff !important;
	background-color: #4dd6ff !important;
}
[data-theme="volt"] .dashboard-sidebar-pomodoro-main-btn--running {
	background: rgba(255, 255, 255, 0.10) !important;
	background-color: rgba(255, 255, 255, 0.10) !important;
	color: #00c2ff !important;
	border: 1px solid rgba(0, 194, 255, 0.40) !important;
}

/* Banner modal Add-Quote / Add-Image — cyan text on a dark chip */

/* -- Magma: warm near-black + lava orange modal (same in light & dark) -- */
[data-theme="magma"] .dashboard-add-section {
	border-radius: 6px;
	border-color: rgba(255, 107, 26, 0.20);
	letter-spacing: 0.02em;
}
[data-theme="magma"] .dashboard-add-section:hover {
	border-color: rgba(255, 107, 26, 0.45);
	box-shadow: 0 0 10px rgba(255, 107, 26, 0.08);
}

/* -- Magma: high-contrast buttons (legible in both light & dark) -- */
/* Pomodoro Start/Stop — solid lava-orange pill with black text */
[data-theme="magma"] .dashboard-sidebar-pomodoro-main-btn {
	background: #ff6b1a !important;
	background-color: #ff6b1a !important;
	color: #180a00 !important;
	border: none !important;
	box-shadow: none !important;
}
[data-theme="magma"] .dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.85;
	background: #ff9448 !important;
	background-color: #ff9448 !important;
}
[data-theme="magma"] .dashboard-sidebar-pomodoro-main-btn--running {
	background: rgba(255, 255, 255, 0.10) !important;
	background-color: rgba(255, 255, 255, 0.10) !important;
	color: #ff6b1a !important;
	border: 1px solid rgba(255, 107, 26, 0.40) !important;
}

/* Banner modal Add-Quote / Add-Image — orange text on a dark chip */

/* -- Onyx: pure black + lemon modal (same in light & dark) -- */
[data-theme="onyx"] .dashboard-add-section {
	border-radius: 6px;
	border-color: rgba(233, 255, 64, 0.20);
	letter-spacing: 0.02em;
}
[data-theme="onyx"] .dashboard-add-section:hover {
	border-color: rgba(233, 255, 64, 0.45);
	box-shadow: 0 0 10px rgba(233, 255, 64, 0.08);
}

/* -- Onyx: high-contrast buttons (legible in both light & dark) -- */
/* Pomodoro Start/Stop — solid lemon pill with black text */
[data-theme="onyx"] .dashboard-sidebar-pomodoro-main-btn {
	background: #e9ff40 !important;
	background-color: #e9ff40 !important;
	color: #000000 !important;
	border: none !important;
	box-shadow: none !important;
}
[data-theme="onyx"] .dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.85;
	background: #f5ff8a !important;
	background-color: #f5ff8a !important;
}
[data-theme="onyx"] .dashboard-sidebar-pomodoro-main-btn--running {
	background: rgba(255, 255, 255, 0.10) !important;
	background-color: rgba(255, 255, 255, 0.10) !important;
	color: #e9ff40 !important;
	border: 1px solid rgba(233, 255, 64, 0.40) !important;
}

/* Banner modal Add-Quote / Add-Image — lemon text on a dark chip */

/* ===================================================================
   MONO (墨白) overrides — solid, no glass/gradient/shadow
   =================================================================== */
/* Mono: banner — solid dark frame + flat scrim, white quote (both modes) */
[data-theme="mono"] .dashboard-banner {
	border-radius: var(--db-radius-lg, 12px);
	border: 1px solid var(--db-border-card);
}
[data-theme="mono"] .dashboard-banner-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.60) 100%);
}
[data-theme="mono"] .dashboard-banner-quote {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
[data-theme="mono"] .dashboard-banner-author {
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Mono: modal — flat, line-bordered, no blur */
[data-theme="mono"] .dashboard-add-section {
	border-radius: 6px;
	border: 1px solid var(--db-border-add-section);
}
[data-theme="mono"] .dashboard-add-section:hover {
	border-color: var(--db-accent);
	box-shadow: none;
}

/* Mono: pomodoro Start/Stop — solid accent pill with inverse text */
[data-theme="mono"] .dashboard-sidebar-pomodoro-main-btn {
	background: var(--db-accent) !important;
	background-color: var(--db-accent) !important;
	color: var(--db-text-inverse) !important;
	border: none !important;
	box-shadow: none !important;
}
[data-theme="mono"] .dashboard-sidebar-pomodoro-main-btn:hover {
	opacity: 0.8;
}
[data-theme="mono"] .dashboard-sidebar-pomodoro-main-btn--running {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--db-accent) !important;
	border: 1px solid var(--db-accent) !important;
}

/* Mono: banner modal Add-Quote / Add-Image — flat chip, monochrome */

/* =================================================================
   MOBILE LAYOUT (phones only, <=640px)
   Tablets (>=641px) keep the desktop layout unchanged.
   ================================================================= */
/* Hide memo color picker on Obsidian mobile app (color input doesn't work) */
.is-mobile .dashboard-card-btn--color {
	display: none;
}

@media (max-width: 640px) {
	/* Disable ALL backdrop blur on mobile. backdrop-filter is iOS WKWebView's
	   heaviest GPU/memory operation; a single first-tap :hover repaint across
	   many stacked blur layers can crash the render process (Obsidian then
	   restarts). The var covers panels referencing --db-backdrop-blur; the
	   wildcard catches hardcoded blur() that ignores the var (file-suggest,
	   heatmap popup, etc.); the modal rules catch body-mounted modals and
	   theme overrides. Frost degrades to flat translucent fills; desktop is
	   completely untouched. */
	.apex-dashboard-root[data-theme] {
		--db-backdrop-blur: none;
	}
	.apex-dashboard-root,
	.apex-dashboard-root * {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	.dashboard-modal,
	[data-theme] .dashboard-modal,
	.theme-light [data-theme] .dashboard-modal,
	.theme-dark [data-theme] .dashboard-modal,
	.modal--dashboard,
	.modal-container.modal--dashboard .modal,
	.modal-bg--dashboard {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* Hide sidebar widgets on mobile */
	.dashboard-sidebar-widgets {
		display: none !important;
	}

	/* Sidebar pin follows the sidebar onto mobile: hidden. Platform.isMobile
	   already skips rendering it; this also covers narrow desktop windows. */
	.dashboard-sidebar-pin-btn {
		display: none !important;
	}

	/* Root: allow vertical scrolling */
	.apex-dashboard-root {
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* Release paint containment on phones. The base rule's contain:paint (kept
	   for the immersive poster layer) makes the root a containing block for
	   FIXED descendants — on phones the ROOT is the scroller, so the fixed
	   scroll-top button and the in-root stats overlays rode inside the
	   scrolled layer and drifted off-screen (regression since 3.7.3). Phones
	   never render the immersive poster, so fixed descendants can anchor to
	   the viewport again here. */
	.apex-dashboard-root {
		contain: none;
	}

	/* Banner: compact */
	.dashboard-banner {
		height: 90px;
		margin: 8px;
		border-radius: var(--db-radius-md);
	}

	.dashboard-banner-overlay {
		padding: 12px 20px;
	}

	.dashboard-banner-quote {
		font-size: 0.95em;
		margin: 0 0 4px 0;
	}

	.dashboard-banner-quote-decor {
		font-size: 2em;
		top: -12px;
		left: -14px;
	}

	.dashboard-banner-author {
		font-size: 0.7em;
	}

	/* Main: stack vertically, allow scroll */
	.dashboard-main {
		flex-direction: column;
		gap: 8px;
		padding: 8px;
		overflow: visible;
	}

	/* Sidebar: hidden on phone */
	.dashboard-sidebar {
		display: none;
	}

	/* Mobile action buttons on banner */
	.dashboard-mobile-actions {
		display: flex;
		gap: 8px;
		position: absolute;
		bottom: 4px;
		left: 10px;
		z-index: 1;
	}

	/* Workspace switcher pills: same top-left strip, slightly larger for
	   touch targets; no hover on touch, so keep them visible. */
	.dashboard-workspace-switcher {
		gap: 3px;
		top: 2px;
		left: 6px;
		padding: 1px 3px;
		opacity: 0.85;
	}

	.dashboard-workspace-btn {
		min-width: 22px;
		height: 22px;
		font-size: 0.65em;
	}

	.dashboard-workspace-add-btn {
		width: 22px;
	}

	.dashboard-mobile-action-btn {
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		color: rgba(255, 255, 255, 0.35);
		padding: 2px;
		cursor: pointer;
		transition: opacity 0.2s ease;
		outline: none;
	}

	.dashboard-mobile-action-btn:active {
		color: rgba(255, 255, 255, 0.7);
	}

		/* Mobile widget bar: sits below the banner */
		.dashboard-mobile-widget-bar {
			display: block;
			position: relative;
			z-index: 5;
			margin-top: 0;
			margin-bottom: 0;
			padding: 0 16px;
		}

		/* Collapsed strip: thin interactive bar below the banner */
		.dashboard-mobile-widget-strip {
			height: 8px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.2s ease;
		}

		.dashboard-mobile-widget-strip-hint {
			width: 32px;
			height: 3px;
			border-radius: 1.5px;
			background: var(--db-border-card);
			opacity: 0.5;
			transition: opacity 0.2s ease, width 0.2s ease, background 0.2s ease;
			pointer-events: none;
		}

		.dashboard-mobile-widget-strip:active .dashboard-mobile-widget-strip-hint,
		.dashboard-mobile-widget-strip--active .dashboard-mobile-widget-strip-hint {
			opacity: 0.9;
			width: 40px;
			background: var(--db-text-faint);
		}

		/* Tab row: hidden by default, drops down when strip is tapped */
		.dashboard-mobile-widget-tabs {
			display: flex;
			gap: 6px;
			justify-content: center;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			            opacity 0.2s ease,
			            padding 0.25s ease;
			padding: 0;
		}

		.dashboard-mobile-widget-tabs--open {
			max-height: 50px;
			opacity: 1;
			padding: 4px 0 2px 0;
		}

		.dashboard-mobile-widget-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 28px;
			background: var(--db-bg-card) !important;
			border: 1px solid var(--db-border-card) !important;
			border-radius: var(--db-radius-sm);
			padding: 0;
			color: var(--db-text-faint);
			cursor: pointer;
			transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
			outline: none;
			box-shadow: none;
			line-height: 1;
		}

		.dashboard-mobile-widget-btn svg {
			width: 16px;
			height: 16px;
		}

		.dashboard-mobile-widget-btn.active {
			color: var(--db-text);
			background: var(--db-bg-card-hover) !important;
			border-color: var(--db-border) !important;
			height: 30px;
		}

		/* Expandable widget panel */
		.dashboard-mobile-widget-panel {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.dashboard-mobile-widget-panel--open {
			max-height: 400px;
			overflow-y: auto;
			margin-top: 4px;
			-webkit-overflow-scrolling: touch;
		}

		.dashboard-mobile-widget-panel .dashboard-sidebar-widget {
			background: var(--db-bg-card);
			border: 1px solid var(--db-border-card);
			border-radius: var(--db-radius-md);
			backdrop-filter: var(--db-backdrop-blur);
			-webkit-backdrop-filter: var(--db-backdrop-blur);
		}

		/* Hide banner edit btn on mobile by default */
	.dashboard-banner .dashboard-banner-edit-btn {
		opacity: 0 !important;
		pointer-events: none;
	}

	/* Show edit btn only when hovering/tapping right half of banner on mobile */
	.dashboard-banner-overlay:hover .dashboard-banner-edit-btn {
		opacity: 0 !important;
		pointer-events: none;
	}

	.dashboard-banner-edit-btn--mobile-visible {
		opacity: 1 !important;
		pointer-events: auto !important;
		color: rgba(255, 255, 255, 0.8) !important;
	}

	/* Banner collapse: never on mobile */
	.dashboard-banner-pin-btn {
		display: none !important;
	}

	.dashboard-banner--collapsed {
		height: 90px !important;
		min-height: 90px !important;
		overflow: hidden !important;
		background-image: revert !important;
		background-color: revert !important;
	}

	.dashboard-banner--collapsed > * {
		opacity: revert !important;
		pointer-events: revert !important;
		visibility: revert !important;
	}

	/* Mobile drawer overlay */
	.dashboard-mobile-drawer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		display: flex;
		pointer-events: auto;
	}

	.dashboard-mobile-drawer-content {
		width: 80%;
		height: 100%;
		background: var(--db-bg);
		border-right: 1px solid var(--db-border);
		border-top: 1px solid var(--db-border);
		border-top-right-radius: 12px;
		overflow-y: auto;
		padding: 16px;
		transform: translateX(-100%);
		transition: transform 0.25s ease-out;
	}

	.dashboard-mobile-drawer-content--open {
		transform: translateX(0);
	}

	.dashboard-mobile-drawer-title {
		font-size: 0.85em;
		font-weight: 700;
		margin: 0 0 12px 0;
		color: var(--db-text);
	}

		/* Mobile drawer: quick actions fill available space */
		.dashboard-mobile-drawer-content .dashboard-quick-actions {
			height: auto;
			flex: 1;
		}

		/* Mobile drawer: style add button as dashed-border row */
		.dashboard-mobile-drawer-content .dashboard-qa-header {
			border-bottom: none;
			margin: 0 0 6px 0;
			justify-content: center;
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-section-title {
			display: none;
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-btn-group {
			width: 100%;
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-add-btn {
			opacity: 1;
			width: 100%;
			padding: 10px 0;
			font-size: 0.85em;
			border: 1px dashed var(--db-border) !important;
			border-radius: 8px;
			justify-content: center;
			color: var(--db-text-faint);
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-add-btn::after {
			content: 'Add action';
			margin-left: 6px;
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-add-btn:lang(zh)::after {
			content: '添加操作';
		}

		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-add-btn:hover,
		.dashboard-mobile-drawer-content .dashboard-qa-header .dashboard-qa-add-btn:active {
			background: var(--db-bg-secondary) !important;
			color: var(--db-text) !important;
		}

		.dashboard-mobile-drawer-content > .dashboard-recent > .dashboard-section-title {
			display: none;
		}

		.dashboard-mobile-drawer-content .dashboard-qa-list {
			max-height: none;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

	.dashboard-mobile-drawer-backdrop {
		width: 20%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
	}

	/* Kanban: full width, allow scroll */
	.dashboard-kanban-wrapper {
		overflow: visible;
		flex: none;
		width: 100%;
	}

	.dashboard-kanban {
		overflow: visible;
		gap: 8px;
	}

	/* Section rows: fixed height at 50vh (Memo keeps 30vh via own rule) */
	.dashboard-section-row {
		height: 50vh;
		flex-shrink: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding: 10px;
	}

	/* Web sections: taller than the default row — the frame IS the content,
	 * and the desktop drag-height is ignored on mobile (see renderer), so the
	 * height must come from CSS here. */
	.dashboard-section-row[data-section-type="web"] {
		height: 70vh;
	}

	/* Library/folder: taller than the default row — these are the
	 * vault-browsing workhorses. At 50vh the toolbar (search + controls)
	 * leaves room for barely two grid cards on mainstream phones; 60vh
	 * clears three to four (cards run 80-100px with property badges).
	 * max-height:none lifts the desktop 500px generic clamp (folder) and
	 * the 800px library clamp so the 60vh height is the only ruler. */
	.dashboard-section-row[data-section-type="library"],
	.dashboard-section-row[data-section-type="folder"] {
		height: 60vh;
		max-height: none;
	}

	/* RSS: same workhorse height as library — the list is the content. */
	.dashboard-section-row[data-section-type="rss"] {
		height: 60vh;
		max-height: none;
	}

	/* PM: workhorse height too — the project list is the content, and the
	 * desktop 500px generic clamp must lift so 60vh is the only ruler. The
	 * list scrolls internally (pmsec-list overflow-y). */
	.dashboard-section-row[data-section-type="pm"] {
		height: 60vh;
		max-height: none;
	}

	/* PM card's hover-only destructive pair (archive/delete): touch has no
	 * hover — always visible, the card-delete convention. Specificity beats
	 * the base .dashboard-pmsec-actions rule, which sits later in the file
	 * (media queries add none). */
	.dashboard-pmsec-card .dashboard-pmsec-actions {
		opacity: 1;
		pointer-events: auto;
		top: 4px;
		right: 4px;
	}

	.dashboard-pmsec-action {
		width: 28px;
		height: 28px;
	}

	.dashboard-section-header {
		flex-shrink: 0;
		margin-bottom: 8px;
	}

	/* All section cards: horizontal scroll */
	.dashboard-section-cards {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		flex: 1;
		min-height: 0;
		gap: 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dashboard-section-cards::-webkit-scrollbar {
		display: none;
	}

	/* All cards: fixed width for horizontal scroll */
	.dashboard-section-cards > .dashboard-card {
		flex: 0 0 70vw !important;
		min-width: 70vw !important;
		max-width: 70vw !important;
		overflow-y: auto;
		scrollbar-width: thin;
	}

	/* Sticky: mixed memo/todo cards — todo lists need a bit less than the
	   generic 50vh (compact memo cards dominate), tuned to 45vh. Desktop drag
	   heights don't clamp it here; renderSection skips them on mobile. */
	.dashboard-section-row[data-section-type="sticky"] {
		height: 45vh;
	}

	/* Cards: compact */
	.dashboard-card {
		padding: 12px;
	}

	.dashboard-card:hover {
		transform: none;
	}

	/* Card actions: hidden by default on mobile, shown on tap */
	.dashboard-card-actions {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
	}

	.dashboard-card-header--touched .dashboard-card-actions {
		opacity: 1;
		pointer-events: auto;
	}

	/* Project cover: shorter */
	.dashboard-project-cover {
		height: 70px;
		margin: -12px -12px 8px -12px;
		border-radius: var(--db-radius-md) var(--db-radius-md) 0 0;
	}

	/* Add section: compact + extra bottom clearance for the native bottom bar */
	.dashboard-add-section {
		padding: 10px;
		flex-shrink: 0;
		margin-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
	}

	/* Scroll-to-top: lift clear of the Obsidian mobile bottom action bar */
	.dashboard-scroll-top {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
		width: 38px;
		height: 38px;
	}

	/* Memo textarea: compact */
	.dashboard-memo-textarea {
		font-size: 0.88em;
		padding: 8px;
	}

	/* Task items: compact */
	.dashboard-task-item {
		padding: 2px 8px;
		gap: 4px;
	}

	.dashboard-task-delete {
		opacity: 1;
	}

	/* Task input: compact */
	.dashboard-task-input {
		font-size: 0.85em;
		padding: 3px 0;
	}

	/* Project doc items: compact */
	.dashboard-project-doc-item {
		padding: 2px 8px;
	}

	.dashboard-project-doc-remove {
		opacity: 1;
	}

	/* Section add button: always visible */
	.dashboard-section-add-btn {
		opacity: 1;
	}

	/* Modal: full width on mobile */
	.dashboard-modal {
		border-radius: var(--db-radius-md);
	}

	/* Quick link remove: always visible on touch-sized layouts, but tablets
	   (even in a narrow split pane) keep the hover reveal. */
	body:not(.is-tablet) .dashboard-qa-remove {
		opacity: 1;
	}

	/* Quick action buttons: compact but touch-friendly */
	.dashboard-qa-item {
		padding: 6px 12px;
	}

	/* Hide memo resize handle on mobile */
	.dashboard-card-resize-handle {
		display: none;
	}

	/* Hide section reorder grip and resize handle on mobile (desktop only) */
	.dashboard-section-grip,
	.dashboard-section-resize-handle {
		display: none;
	}

	/* Hide memo color picker on mobile (color input doesn't work on mobile) */
	.dashboard-card-btn--color {
		display: none;
	}
}

/* ===== Task Reminder ===== */
.dashboard-task-reminder-btn {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 0 2px;
	min-height: 0;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.dashboard-task-reminder-btn svg {
	width: 14px;
	height: 14px;
}

.dashboard-task-item:hover .dashboard-task-reminder-btn {
	opacity: 1;
}

.dashboard-task-reminder-btn:hover {
	color: var(--db-text) !important;
}

.dashboard-task-reminder-btn--active {
	opacity: 0.6;
	color: var(--db-accent) !important;
}

.dashboard-task-item:hover .dashboard-task-reminder-btn--active {
	opacity: 0.8;
}

.dashboard-task-reminder-btn--overdue {
	opacity: 1 !important;
	color: var(--db-danger, #ef4444) !important;
	animation: reminder-pulse 2s ease-in-out infinite;
}

@keyframes reminder-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.dashboard-task-reminder-popup {
	background: var(--db-bg, #1e1e2e);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-md, 10px);
	padding: 12px;
	z-index: 10000;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 240px;
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
}

/* Countdown calendar popup — body-level, themed via applyModalTheme mirroring
   (see countdown-modal.ts), so --db-* tokens resolve on it. */
.dashboard-countdown-calendar-popup {
	background: var(--db-bg-modal, var(--background-primary));
	color: var(--db-text, var(--text-normal));
	border-color: var(--db-border-card, var(--background-modifier-border));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-day {
	color: var(--db-text, var(--text-normal));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-day--today {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-day--selected {
	background: var(--db-accent, var(--interactive-accent)) !important;
	color: var(--db-text-inverse, var(--text-on-accent)) !important;
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-day--other-month {
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-nav span {
	color: var(--db-text, var(--text-normal));
}

/* The month label doubles as a button toggling the year-month panel. */
.dashboard-countdown-calendar-popup .dashboard-countdown-cal-label {
	flex: 1;
	text-align: center;
	color: var(--db-text, var(--text-normal));
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: var(--db-radius-sm, 6px);
}

.dashboard-countdown-calendar-popup .dashboard-countdown-cal-label:hover {
	background: var(--db-bg-hover, var(--background-modifier-hover));
}

/* Year-month panel: 12 month cells in a 3-column grid. The top nav above it
   shows the year and its arrows step by years while this panel is open. */
.dashboard-countdown-ym-panel {
	padding: 2px 0 4px;
}

.dashboard-countdown-ym-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	padding: 4px 0;
}

.dashboard-countdown-ym-cell {
	padding: 6px 4px;
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, var(--background-secondary));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	cursor: pointer;
}

.dashboard-countdown-ym-cell:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-countdown-ym-cell.dashboard-task-reminder-calendar-day--selected {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-text-inverse, var(--text-on-accent));
	border-color: transparent;
}

/* Time row inside the calendar popup (date and time commit together). */
.dashboard-countdown-popup-time {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0 6px;
}

.dashboard-countdown-popup-time-label {
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.75em;
}

.dashboard-countdown-popup-time .dashboard-countdown-time-sep {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-nav button {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-calendar-nav button:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, var(--background-modifier-hover));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-popup-btns button {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-modal-raised, var(--background-secondary));
	border-color: var(--db-border, var(--background-modifier-border));
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-popup-btns button:hover {
	background: var(--background-modifier-hover);
}

.dashboard-countdown-calendar-popup .dashboard-task-reminder-popup-btns button.mod-cta {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}

/* Calendar popup on body (outside theme scope) */
.dashboard-library-calendar-popup,
.dashboard-task-reminder-popup.dashboard-library-calendar-popup {
	/* Opaque surface chain, kept in sync with the inline style TS sets — the
	   old glass --db-bg-card let the page bleed through behind the dates. */
	background: var(--db-bg-modal, var(--db-bg, var(--background-primary)));
	color: var(--db-text, var(--text-normal));
	border-color: var(--db-border-card, var(--background-modifier-border));
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-day {
	color: var(--db-text, var(--text-normal)) !important;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-day--today {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-day--selected {
	background: var(--db-accent, var(--interactive-accent)) !important;
	/* Follow the theme's accent-contrast text (bright accents like onyx's
	   lemon need dark text — a hardcoded #fff was unreadable there). */
	color: var(--db-text-inverse, var(--text-on-accent)) !important;
}

/* Days between the range edges: accent-tinted band, square corners so the
   highlight reads as one continuous strip between the two selected days. */
.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-day--in-range {
	background: color-mix(in srgb, var(--db-accent, #8b5cf6) 20%, transparent) !important;
	border-radius: 0;
}

/* Current pick state under the grid ("start ~ …" while choosing). */
.dashboard-library-calendar-status {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	text-align: center;
}

/* Config-modal filter value chips: cap the chip cloud so a property with many
   distinct values scrolls instead of stretching the modal. */
.dashboard-library-value-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-day--other-month {
	color: var(--db-text-muted, var(--text-faint));
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-nav span {
	color: var(--db-text, var(--text-normal)) !important;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-nav button {
	color: var(--db-text-muted, var(--text-muted)) !important;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-calendar-nav button:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.08));
}

.dashboard-library-calendar-popup .dashboard-task-reminder-popup-btns button {
	color: var(--db-text, var(--text-normal)) !important;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-popup-btns button.mod-cta {
	color: #fff;
}

.dashboard-library-calendar-popup .dashboard-task-reminder-time {
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-calendar-popup .dashboard-task-reminder-time select {
	background: var(--db-bg-input, var(--db-bg-card));
	color: var(--db-text, var(--text-normal));
	border-color: var(--db-border-input, var(--db-border-card));
}

.dashboard-task-reminder-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.dashboard-task-reminder-calendar-nav span {
	font-size: 0.75em;
	font-weight: 500;
}

.dashboard-task-reminder-calendar-nav button {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--db-text-muted);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.875em;
}

.dashboard-task-reminder-calendar-nav button:hover {
	color: var(--db-text);
	background: var(--db-bg-card-hover);
}

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

.dashboard-task-reminder-calendar-header {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-faint));
	padding: 4px 0;
	font-weight: 500;
}

.dashboard-task-reminder-calendar-day {
	font-size: 0.75em;
	padding: 5px 2px;
	border-radius: 4px;
	cursor: pointer;
	border: none;
	background: none;
	color: var(--db-text);
	transition: background 0.1s;
}

.dashboard-task-reminder-calendar-day:hover {
	background: var(--db-bg-card-hover);
}

.dashboard-task-reminder-calendar-day--today {
	font-weight: 700;
	color: var(--db-accent);
}

.dashboard-task-reminder-calendar-day--selected {
	background: var(--db-accent) !important;
	color: var(--db-text-inverse, var(--text-on-accent)) !important;
}

.dashboard-task-reminder-calendar-day--other-month {
	opacity: 0.3;
}

.dashboard-task-reminder-time {
	display: flex;
	gap: 4px;
	align-items: center;
	font-size: 0.75em;
	margin-top: 4px;
}

.dashboard-task-reminder-time select {
	padding: 4px 6px;
	border: 1px solid var(--db-border-card);
	border-radius: 4px;
	background: var(--db-bg-card);
	color: var(--db-text);
	font-size: 0.75em;
}

.dashboard-task-reminder-popup-btns {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.dashboard-task-reminder-popup-btns button {
	padding: 5px 12px;
	border-radius: var(--db-radius-sm);
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-card);
	color: var(--db-text);
	cursor: pointer;
	font-size: 0.75em;
	transition: background 0.1s;
}

.dashboard-task-reminder-popup-btns button:hover {
	background: var(--db-bg-card-hover);
}

.dashboard-task-reminder-popup-btns button.mod-cta {
	background: var(--db-accent);
	color: white;
	border-color: var(--db-accent);
}

.dashboard-task-reminder-popup-btns button.mod-cta:hover {
	opacity: 0.9;
}

.dashboard-task-reminder-popup-btns .dashboard-task-reminder-clear {
	color: var(--db-text-muted);
}

/* ===== Dashboard Section (Charts) ===== */
.dashboard-section-row[data-section-type="dashboard"] .dashboard-section-cards {
	flex-wrap: wrap;
	gap: 12px;
}

.dashboard-section-row[data-section-type="dashboard"] .dashboard-section-cards > .dashboard-card {
	flex: 0 0 200px;
	min-width: 180px;
	max-width: 240px;
	cursor: default;
	padding: 16px;
}

.dashboard-section-row[data-section-type="dashboard"] .dashboard-card:hover {
	transform: none;
	box-shadow: var(--db-shadow-card);
}

/* ===== Confirm Dialog ===== */
.dashboard-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.dashboard-confirm-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 340px;
	width: 90%;
	padding: 24px 28px 20px;
	text-align: center;
	/* Opaque theme-aware background guarantees readable text. The previous
	   rgba(255,255,255,0.06) glass relied entirely on backdrop-filter and became
	   an unreadable transparent card wherever blur is unavailable/disabled.
	   --db-bg-modal is the opaque dialog surface the dark constant themes
	   (neon/volt/magma/onyx) define; other themes keep Obsidian's surface. */
	background: var(--db-bg-modal, var(--background-secondary, #1e1e1e));
	border: 1px solid var(--db-border-card, var(--background-modifier-border, rgba(255, 255, 255, 0.1)));
	border-radius: var(--db-radius-lg, 12px);
	color: var(--db-text, var(--text-normal));
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.dashboard-confirm-title {
	margin: 0 0 8px;
	font-size: 1.1em;
	color: var(--db-text, var(--text-normal));
	border-bottom: none;
}

.dashboard-confirm-message {
	margin: 0 0 20px;
	font-size: 0.9em;
	color: var(--db-text-muted, var(--text-muted, var(--text-normal)));
	line-height: 1.5;
}

.dashboard-confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.dashboard-confirm-cancel,
.dashboard-confirm-delete {
	padding: 7px 20px;
	border-radius: 8px;
	font-size: 0.9em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-confirm-cancel {
	background: var(--db-bg-modal-raised, var(--background-modifier-hover, rgba(255, 255, 255, 0.06)));
	border: 1px solid var(--db-border, var(--background-modifier-border, rgba(255, 255, 255, 0.10)));
	color: var(--db-text, var(--text-normal));
}

.dashboard-confirm-cancel:hover {
	background: var(--db-bg-hover-strong, var(--background-modifier-border-hover, var(--background-modifier-hover)));
}

.dashboard-confirm-delete {
	background: var(--db-danger, #f43f5e);
	border: 1px solid transparent;
	color: #fff;
}

.dashboard-confirm-delete:hover {
	opacity: 0.85;
}

.dashboard-confirm-primary {
	background: var(--db-accent, var(--interactive-accent));
	border: 1px solid transparent;
	color: var(--db-text-inverse, var(--text-on-accent));
}

.dashboard-confirm-primary:hover {
	opacity: 0.88;
}

/* Widget Type Selector Modal */
.widget-type-row {
	display: flex;
	gap: 12px;
	padding: 16px 0;
}

.widget-type-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 12px;
	border-radius: var(--db-radius-md, 12px);
	background: var(--db-bg-hover);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.widget-type-btn:hover {
	border-color: var(--db-accent);
	transform: translateY(-2px);
}

.widget-type-btn-icon {
	color: var(--db-accent);
	width: 28px;
	height: 28px;
}

.widget-type-btn-name {
	font-weight: 600;
	font-size: 0.875em;
	color: var(--db-text);
}

.widget-type-btn-desc {
	font-size: 0.6875em;
	color: var(--db-text-faint);
	text-align: center;
	line-height: 1.4;
}

/* Weather Card */
.dashboard-weather {
	padding: 4px 0;
}

.dashboard-weather-current {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.dashboard-weather-temp-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-weather-temp {
	font-size: 2em;
	font-weight: 700;
	color: var(--db-accent);
	line-height: 1;
}

.dashboard-weather-icon {
	font-size: 1.75em;
	line-height: 1;
}

.dashboard-weather-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-weather-city {
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--db-text);
}

.dashboard-weather-desc {
	font-size: 0.75em;
	color: var(--db-text-muted);
}

.dashboard-weather-wind {
	font-size: 0.6875em;
	color: var(--db-text-faint);
}

.dashboard-weather-forecast {
	display: flex;
	gap: 4px;
	border-top: 1px solid var(--db-border);
	padding-top: 10px;
}

.dashboard-weather-day {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 2px;
	border-radius: 6px;
	transition: background 0.15s;
}

.dashboard-weather-day:hover {
	background: var(--db-bg-hover);
}

.dashboard-weather-day-name {
	font-size: 0.625em;
	color: var(--db-text-faint);
	font-weight: 500;
}

.dashboard-weather-day-icon {
	font-size: 1em;
	line-height: 1;
}

.dashboard-weather-day-temps {
	font-size: 0.625em;
	color: var(--db-text-muted);
	white-space: nowrap;
}

.dashboard-weather-loading {
	text-align: center;
	padding: 24px;
	color: var(--db-text-faint);
	font-size: 0.8125em;
}

.dashboard-weather-error {
	text-align: center;
	padding: 16px;
	color: var(--db-text-faint);
	font-size: 0.75em;
}

/* Weather Config Modal */
.weather-city-results {
	margin-top: 4px;
	max-height: 160px;
	overflow-y: auto;
	border-radius: 6px;
}

.weather-city-result-item {
	padding: 8px 10px;
	cursor: pointer;
	font-size: 0.8125em;
	color: var(--db-text);
	border-radius: 4px;
	transition: background 0.15s;
}

.weather-city-result-item:hover {
	background: var(--db-bg-hover);
}

.weather-coords-wrap {
	margin-top: 8px;
}

/* Tracker Card */
.dashboard-tracker {
	padding: 4px 0;
}

.dashboard-tracker-sparkline {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}

.dashboard-tracker-stats {
	display: flex;
	gap: 8px;
	justify-content: space-between;
}

.dashboard-tracker-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.dashboard-tracker-stat-label {
	font-size: 0.625em;
	color: var(--db-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.dashboard-tracker-stat-value {
	font-size: 0.875em;
	font-weight: 600;
	color: var(--db-accent);
}

.dashboard-tracker-empty {
	text-align: center;
	padding: 20px;
	color: var(--db-text-faint);
	font-size: 0.75em;
}

/* ===== Chart.js Canvas Base ===== */
.dashboard-chart-canvas {
	display: block;
	width: 100% !important;
	max-width: 100%;
}

/* ===== Tracker Widget Size Variants ===== */
.dashboard-tracker--S .dashboard-tracker-compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
.dashboard-tracker--S .dashboard-tracker-compact-value {
	font-size: 1.8em;
	font-weight: 700;
	color: var(--db-accent);
}
.dashboard-tracker--S .dashboard-tracker-compact-label {
	font-size: 0.65em;
	color: var(--db-text-faint);
}
.dashboard-tracker-trend {
	font-size: 1.2em;
	font-weight: 700;
}
.dashboard-tracker-trend--up { color: #22c55e; }
.dashboard-tracker-trend--down { color: #ef4444; }
.dashboard-tracker-trend--flat { color: var(--db-text-muted); }

.dashboard-tracker-chart {
	position: relative;
}
.dashboard-tracker--M .dashboard-tracker-chart { height: 50px; }
.dashboard-tracker--L .dashboard-tracker-chart { height: 80px; }

/* ===== Tracker Heatmap ===== */
.dashboard-tracker-heatmap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-tracker-heatmap-grid {
	display: grid;
	overflow: hidden;
}

.dashboard-tracker-heatmap-cell {
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.dashboard-tracker-heatmap-cell:hover {
	transform: scale(1.3);
	z-index: 1;
	position: relative;
}

.dashboard-tracker-heatmap-cell--empty {
	background-color: var(--db-bg-hover) !important;
	opacity: 0.3 !important;
}

.dashboard-tracker-heatmap-labels {
	display: grid;
	grid-template-rows: repeat(7, 14px);
	gap: 2px;
	margin-right: 4px;
}

.dashboard-tracker-heatmap-day-label {
	font-size: 0.5em;
	color: var(--db-text-faint);
	display: flex;
	align-items: center;
	line-height: 1;
}

/* Tracker Config Modal */
.tracker-key-hint {
	font-size: 0.6875em;
	color: var(--text-faint);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
}

.tracker-key-tag {
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--db-bg-modal-raised, var(--background-modifier-hover));
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.6875em;
	cursor: pointer;
	border: none;
	line-height: 1.6;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.tracker-key-tag:hover {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

/* Dashboard Section: CSS Grid Layout */
.dashboard-section-row[data-section-type="dashboard"] .dashboard-section-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	gap: 12px;
	overflow: visible;
}

.dashboard-section-row[data-section-type="dashboard"] .dashboard-section-cards > .dashboard-card {
	min-width: 0;
	min-height: 0;
	flex: none;
}

/* ===== Template Modal ===== */
.template-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.template-modal-header h2 {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
	flex: 1;
}

.template-modal-manage-btn,
.template-modal-back-btn {
	background: transparent;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	font-size: 0.85em;
	padding: 4px 12px;
	cursor: pointer;
	font-family: var(--db-font, var(--font-interface));
}

.template-modal-manage-btn:hover,
.template-modal-back-btn:hover {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-text, var(--text-normal));
}

.template-modal-empty {
	text-align: center;
	padding: 40px 0;
	color: var(--db-text-muted);
}

.template-modal-empty button {
	margin-top: 16px;
}

.template-modal-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.template-modal-list::-webkit-scrollbar {
	width: 4px;
}

.template-modal-list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	border-radius: 4px;
}

.template-modal-item {
	padding: 12px 16px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-md, 8px);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.template-modal-item:hover {
	border-color: var(--db-accent, rgba(255, 255, 255, 0.2));
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.03));
}

.template-modal-item--selected {
	border-color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
	box-shadow: 0 0 0 1px var(--db-accent, var(--interactive-accent));
	/* Selection should feel instant — skip the transition on click */
	transition: none;
}

.template-modal-item-name {
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: 2px;
}

.template-modal-item-count {
	font-size: 0.8em;
	color: var(--db-text-muted);
}

.template-modal-item-preview {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.template-modal-item-preview-task {
	font-size: 0.82em;
	color: var(--db-text-muted);
	padding-left: 12px;
	position: relative;
}

.template-modal-item-preview-task::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 1px;
	background: var(--db-text-muted);
}

.template-modal-item-preview-more {
	font-size: 0.8em;
	color: var(--db-text-muted);
	opacity: 0.6;
	padding-left: 12px;
}

.template-modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

.template-modal-actions button {
	border-radius: var(--db-radius-sm, 6px);
	font-family: var(--db-font, var(--font-interface));
}

.template-modal-manage-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.template-modal-manage-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
}

.template-modal-manage-name {
	flex: 1;
	font-weight: 500;
}

.template-modal-manage-count {
	font-size: 0.8em;
	color: var(--db-text-muted);
}

.template-modal-manage-edit,
.template-modal-manage-delete {
	background: transparent;
	border: none;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
}

.template-modal-manage-edit:hover {
	color: var(--db-accent, var(--interactive-accent));
}

.template-modal-manage-delete:hover {
	color: var(--db-danger, #ef4444);
}

.template-modal-create-btn {
	width: 100%;
	padding: 10px;
	border-radius: var(--db-radius-md, 8px);
}

.template-modal-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.template-modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.template-modal-field label {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
}

.template-modal-task-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.template-modal-task-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.template-modal-task-row .template-modal-input {
	flex: 1;
}

.template-modal-task-remove {
	background: transparent;
	border: none;
	color: var(--db-text-muted);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	flex-shrink: 0;
}

.template-modal-task-remove:hover {
	color: var(--db-danger, #ef4444);
}

.template-modal-add-task {
	background: transparent;
	border: 1px dashed var(--db-border-input, rgba(255, 255, 255, 0.1));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted);
	padding: 6px 12px;
	cursor: pointer;
	font-size: 0.9em;
	text-align: left;
	font-family: var(--db-font, var(--font-interface));
}

.template-modal-add-task:hover {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-text, var(--text-normal));
}

.template-modal-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.template-modal-form-actions button {
	border-radius: var(--db-radius-sm, 6px);
	font-family: var(--db-font, var(--font-interface));
}

/* Mobile: tap task item to reveal delete/reminder buttons */
@media (max-width: 640px) {
	.dashboard-task-item .dashboard-task-delete,
	.dashboard-task-item .dashboard-task-reminder-btn {
		opacity: 0;
		pointer-events: none;
	}

	.dashboard-task-item.dashboard-task-item--touched .dashboard-task-delete,
	.dashboard-task-item.dashboard-task-item--touched .dashboard-task-reminder-btn {
		opacity: 1;
		pointer-events: auto;
	}
}

/* =================================================================
   LIBRARY SECTION
   ================================================================= */

/* Section overrides for library type */
.dashboard-section-row[data-section-type="library"] .dashboard-section-cards {
	display: none;
}

.dashboard-library-content {
	padding: 0 0 8px 0;
	flex: 1;
	min-height: 0;
	/* min-width:0 lets this flex item shrink so the kanban child can overflow and
	   scroll horizontally instead of the whole section stretching wide. */
	min-width: 0;
	/* Flex column: toolbar/pagination stay pinned while the files area receives a
	   bounded height and scrolls. */
	display: flex;
	flex-direction: column;
}

/* Toolbar and pagination stay fixed; only the files area scrolls. */
.dashboard-library-toolbar,
.dashboard-library-pagination {
	flex-shrink: 0;
}

/* Files area: vertical scroll container for grid/list/table, and a bounded-
   height host for the kanban (Trello-style columns that scroll internally). */
.dashboard-library-files {
	min-width: 0;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent) 25%, transparent) transparent;
}

/* Themed vertical scrollbar (grid/list/table), matching the rest of the dashboard. */
.dashboard-library-files::-webkit-scrollbar {
	width: 8px;
}
.dashboard-library-files::-webkit-scrollbar-track {
	background: transparent;
}
.dashboard-library-files::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 20%, transparent);
	border-radius: 4px;
	transition: background 0.2s ease;
}
.dashboard-library-files::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 38%, transparent);
}

/* Kanban view: the wrapper stops scrolling vertically; the kanban fills the
   bounded height and each column scrolls its own cards, so the board row — and
   its horizontal scrollbar — always stays inside the viewport. */
.dashboard-library-files[data-view-mode="kanban"] {
	overflow: hidden;
}
.dashboard-library-files[data-view-mode="kanban"] .dashboard-library-kanban {
	height: 100%;
	overflow-y: hidden;
}

/* Toolbar grouping (grid/gallery/list/table): one collapsible header + body
   per folder/property bucket, mirroring the media section's grouped mode. */
.dashboard-library-group-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 4px;
	margin: 10px 0 6px 0;
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
	cursor: pointer;
	user-select: none;
	border-radius: var(--db-radius-sm, 4px);
	transition: background 0.15s ease;
}
.dashboard-library-group-header:hover { background: var(--db-bg-hover, rgba(255, 255, 255, 0.05)); }
.dashboard-library-group-chevron {
	display: flex;
	color: var(--db-text-faint, var(--text-faint));
	flex-shrink: 0;
}
.dashboard-library-group-chevron svg { width: 12px; height: 12px; }
.dashboard-library-group-name {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dashboard-library-group-header.is-nogroup .dashboard-library-group-name {
	color: var(--db-text-muted, var(--text-muted));
	font-style: italic;
}
.dashboard-library-group-count {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.06));
	padding: 0 7px;
	border-radius: 999px;
}
.dashboard-library-group-header.is-collapsed { opacity: 0.75; }
.dashboard-library-group-body.is-hidden { display: none; }
.dashboard-library-files .dashboard-library-group-header:first-child { margin-top: 0; }

/* Progressive load-more pill (in-group and per-kanban-column) — borrows the
   pagination button's capsule recipe so it reads as the same control family. */
.dashboard-library-load-more {
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--db-radius-sm, 6px);
	font-size: 0.75em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	transition: background 0.1s ease;
	user-select: none;
}
.dashboard-library-load-more:hover {
	background: var(--db-bg-btn-hover, rgba(139, 92, 246, 0.18));
}
/* Group bodies are block flow: center the pill under the grid/list/table. */
.dashboard-library-group-body .dashboard-library-load-more {
	width: fit-content;
	margin: 8px auto 2px;
}
/* Kanban columns are flex columns: a full-width footer button instead. */
.dashboard-library-kanban-col .dashboard-library-load-more {
	width: 100%;
	text-align: center;
	margin-top: 2px;
	flex-shrink: 0;
}

/* Progressive-render load-more (pipeline / PM sections reuse the library
   pill). Pipeline stage columns are flex columns: full-width footer. */
.dashboard-pipeline-cards .dashboard-library-load-more {
	width: 100%;
	text-align: center;
	margin-top: 2px;
	flex-shrink: 0;
}

/* PM content is block flow: centered under the list/kanban. */
.dashboard-pmsec-content .dashboard-library-load-more {
	width: fit-content;
	margin: 8px auto 2px;
}

/* Render-ceiling notice (grouped + kanban paths only; see RENDER_CEILING). */
.dashboard-library-render-cap {
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	padding: 6px 10px;
	margin: 0 0 8px 0;
}
/* Kanban + cap: the board normally fills its overflow-hidden host, so the
   sibling notice needs its height reserved or the column bottoms get clipped. */
.dashboard-library-files.is-capped .dashboard-library-kanban {
	max-height: calc(100% - 40px);
}

/* Toolbar */
.dashboard-library-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	border-radius: var(--db-radius-md, 10px);
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.dashboard-library-search {
	flex: 1;
	min-width: 120px;
	max-width: 240px;
	padding: 4px 10px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
}

.dashboard-library-search:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-library-search::placeholder {
	color: var(--db-text-muted, var(--text-muted));
}

/* Mobile: unify section search inputs — every search box (library, media and
   dataview sections) takes its own full toolbar row, so all read the same
   width instead of the desktop flex-grow vs fixed-110px split. */
.is-mobile .dashboard-library-search,
.is-mobile .dashboard-dataview-search {
	flex: 1 1 100%;
	width: auto;
	min-width: 0;
	max-width: none;
}
/* Dataview toolbar is nowrap on desktop; on mobile let the search box wrap to
   its own row (count / page-size / view toggle flow to a second row) and align
   its horizontal inset with the library toolbar's card padding. */
.is-mobile .dashboard-dataview-toolbar {
	flex-wrap: wrap;
	padding-left: 8px;
	padding-right: 8px;
}

/* Phone toolbar diet: count + page-size + spacer push the controls onto a
   third toolbar row (~34px of vertical space — a third of a grid card).
   Phones keep every control that picks WHAT you see (sort/view/size/filter);
   page-count still shows in the pagination footer, and paging works there.
   Tablets (.is-tablet rides along with .is-mobile) have room, so they keep
   the full toolbar. */
.is-mobile:not(.is-tablet) .dashboard-library-toolbar .dashboard-library-toolbar-spacer,
.is-mobile:not(.is-tablet) .dashboard-library-toolbar .dashboard-library-count,
.is-mobile:not(.is-tablet) .dashboard-library-toolbar .dashboard-library-page-size {
	display: none;
}

.dashboard-library-sort {
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	cursor: pointer;
	outline: none;
}

.dashboard-library-sort:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-library-sort-dir {
	cursor: pointer;
	padding: 4px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
}

.dashboard-library-sort-dir:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

/* View toggle */
.dashboard-library-view-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	border-radius: var(--db-radius-sm, 6px);
	padding: 2px;
}

.dashboard-library-view-btn {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
	font-size: 0.75em;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-library-view-btn:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

.dashboard-library-view-btn.active {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-accent, var(--interactive-accent));
}

/* Grouping-mode toggle inside a config modal (folder section): the toolbar
   variant reused as a two-option switch, with modal-appropriate spacing. */
.dashboard-library-config-view-toggle {
	margin: 8px 0 4px 0;
}

.dashboard-library-config-groupby-controls.is-hidden,
.dashboard-library-config-hint.is-hidden {
	display: none;
}

.dashboard-library-toolbar-spacer {
	flex: 1;
}

.dashboard-library-count {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	/* First element of the toolbar's right cluster (count / page size /
	   settings). The flex-1 spacer can't cross a wrap line — when the toolbar
	   narrows and this cluster drops to the second row, the auto margin keeps
	   it pinned right on whichever line it lands. On a single line it simply
	   takes over the spacer's job (auto margins resolve before flex-grow). */
	margin-left: auto;
}

.dashboard-library-page-size {
	padding: 3px 6px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.6875em;
	font-family: var(--db-font, var(--font-interface));
	cursor: pointer;
	outline: none;
}

.dashboard-library-page-size:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-library-config-btn {
	cursor: pointer;
	padding: 4px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
}

.dashboard-library-config-btn:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

/* Toolbar "new note" button — same quiet icon affordance as the config gear. */
.dashboard-library-newnote-btn {
	cursor: pointer;
	padding: 4px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
}

.dashboard-library-newnote-btn:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

/* Quick filter button */
.dashboard-library-filter-btn {
	cursor: pointer;
	padding: 4px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-library-filter-btn:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

.dashboard-library-filter-btn.active {
	color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
}

/* Filter tags */
.dashboard-library-filter-tags {
	display: flex;
	gap: 4px;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	flex: 0 1 auto;
	overflow: hidden;
}

.dashboard-library-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.6875em;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-accent, var(--interactive-accent));
	border: 1px solid transparent;
	white-space: nowrap;
	max-width: 160px;
	min-width: 0;
}

.dashboard-library-filter-tag-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.dashboard-library-filter-tag-x {
	cursor: pointer;
	font-size: 0.875em;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.dashboard-library-filter-tag-x:hover {
	opacity: 1;
}

/* Filter popup */
.dashboard-library-filter-popup {
	position: relative;
	margin-top: 4px;
	padding: 12px;
	border-radius: var(--db-radius-md, 10px);
	border: 1px solid var(--db-border-card, #e0e0e0);
	background: var(--db-bg-modal, var(--db-bg, var(--background-primary)));
	max-width: 320px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	z-index: 10000;
	color: var(--db-text, #1a1a1a);
}

/* Quick-filter popup internals (title row, property+range row, preset row). */
.dashboard-library-quickfilter-title {
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	margin-bottom: 8px;
}

.dashboard-library-quickfilter-row {
	margin-bottom: 8px;
}

.dashboard-library-quickfilter-label {
	display: block;
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 4px;
}

.dashboard-library-quickfilter-row--main {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-library-quickfilter-row--main .dashboard-library-filter-popup-prop {
	flex: 1;
	min-width: 0;
}

.dashboard-library-filter-range-btn {
	flex-shrink: 0;
	white-space: nowrap;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-library-filter-popup-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: flex-start;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.06));
}

.dashboard-library-filter-popup-row:last-of-type {
	border-bottom: none;
	margin-bottom: 4px;
	padding-bottom: 0;
}

.dashboard-library-filter-popup-prop {
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #f5f5f5;
	color: #333;
	font-size: 0.75em;
	outline: none;
	min-width: 120px;
}

.dashboard-library-filter-popup-dates {
	display: flex;
	gap: 4px;
	align-items: center;
}

.dashboard-library-filter-date-btn {
	cursor: pointer;
	padding: 4px 10px;
	border: 1px solid var(--db-border-card, #ddd);
	border-radius: 6px;
	background: var(--db-bg-card, #f5f5f5);
	color: var(--db-text-muted, #888);
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-library-filter-date-btn:hover {
	border-color: var(--db-accent, var(--interactive-accent, #7c3aed));
	color: var(--db-text, #333);
}

.dashboard-library-filter-date-btn.has-value {
	color: var(--db-accent, var(--interactive-accent, #7c3aed));
	border-color: var(--db-accent, var(--interactive-accent, #7c3aed));
	background: color-mix(in srgb, var(--db-accent, #8b5cf6) 10%, transparent);
}

.dashboard-library-filter-popup-values {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 320px;
}

.dashboard-library-filter-popup-remove {
	cursor: pointer;
	padding: 2px;
	border-radius: 4px;
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.dashboard-library-filter-popup-remove:hover {
	opacity: 1;
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-filter-popup-add {
	cursor: pointer;
	padding: 4px 10px;
	border: 1px dashed var(--db-border-input, rgba(255, 255, 255, 0.15));
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-library-filter-popup-add:hover {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-accent, var(--interactive-accent));
}

/* Empty state */
.dashboard-library-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.8125em;
}

/* ===== Grid View ===== */
.dashboard-library-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}

/* Card size variants (toolbar S/M/L toggle) shared by grid and gallery.
   'medium' is the un-suffixed default above. */
.dashboard-library-grid.dashboard-library-cards--small {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.dashboard-library-grid.dashboard-library-cards--large {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dashboard-library-card {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-md, 10px);
	padding: 10px 12px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Anchor for the hover-reveal delete button (top-right). */
	position: relative;
}

/* ===== Gallery view (card grid with frontmatter-driven covers) ===== */
.dashboard-library-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.dashboard-library-gallery.dashboard-library-cards--small {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Small gallery cards square their covers (1:1) for a tighter, uniform wall;
   medium/large keep the wider 16:10 default set on .dashboard-library-card-cover. */
.dashboard-library-gallery.dashboard-library-cards--small .dashboard-library-card-cover {
	aspect-ratio: 1 / 1;
}

.dashboard-library-gallery.dashboard-library-cards--large {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* The S/M/L selector only applies to the card views; hidden elsewhere. */
.dashboard-library-size-toggle.is-hidden {
	display: none;
}

/* Group pill is meaningless in kanban (it has its own config-modal grouping);
   page-size is meaningless while grouped (pagination is skipped). */
.dashboard-library-group-toggle.is-hidden,
.dashboard-library-collapse-toggle.is-hidden,
.dashboard-media-collapse-toggle.is-hidden,
.dashboard-library-page-size.is-hidden,
.dashboard-library-cols-btn.is-hidden {
	display: none;
}

/* Table-columns picker (eye button): vertical list, one row per property —
   drag handle to reorder, eye toggle to show/hide. */
.dashboard-table-cols-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 46vh;
	overflow-y: auto;
	padding-right: 2px;
}
.dashboard-table-cols-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
}
.dashboard-table-cols-row.is-dragging {
	opacity: 0.6;
	outline: 1px dashed var(--db-accent, var(--interactive-accent));
}
.dashboard-table-cols-row.is-off .dashboard-table-cols-name {
	color: var(--db-text-muted, var(--text-muted));
	text-decoration: line-through;
	text-decoration-color: var(--db-text-faint, var(--text-faint));
}
.dashboard-table-cols-handle {
	cursor: grab;
	color: var(--db-text-faint, var(--text-faint));
	display: flex;
	align-items: center;
	touch-action: none; /* pointer drag owns the gesture on touch */
	flex-shrink: 0;
}
.dashboard-table-cols-handle:active { cursor: grabbing; }
.dashboard-table-cols-handle svg { width: 14px; height: 14px; }
.dashboard-table-cols-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8125em;
}
.dashboard-table-cols-eye {
	cursor: pointer;
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	align-items: center;
	padding: 3px;
	border-radius: 4px;
	flex-shrink: 0;
	transition: color 0.15s ease, background 0.15s ease;
}
.dashboard-table-cols-eye:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}
.dashboard-table-cols-eye svg { width: 15px; height: 15px; }
.dashboard-table-cols-eye.is-off { color: var(--db-text-faint, var(--text-faint)); }


.dashboard-library-card-cover {
	aspect-ratio: 16 / 10;
	flex: none;
	border-radius: var(--db-radius-sm, 6px);
	background-color: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Placeholder for notes without any cover info (or whose cover failed to
   resolve): the bundled default image when present, otherwise a faint image
   icon over a soft accent wash — both follow the theme tokens. */
.dashboard-library-card-cover--placeholder {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--db-accent, #8b5cf6) 14%, transparent),
		var(--db-bg-card-hover, rgba(127, 127, 127, 0.10))
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-library-card-cover--placeholder svg {
	width: 26%;
	height: 26%;
	opacity: 0.5;
}

.dashboard-library-card:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
	border-color: var(--db-accent, var(--interactive-accent));
	transform: translateY(-1px);
}

.dashboard-library-card-title {
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-library-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-library-card-path {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.dashboard-library-card-date {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	flex-shrink: 0;
}

.dashboard-library-card-tags {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.dashboard-library-card-tag {
	padding: 1px 6px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.1));
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.625em;
	line-height: 16px;
	white-space: nowrap;
	flex-shrink: 0;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-library-card-tag--more {
	background: transparent;
	padding: 1px 0;
	max-width: none;
}

.dashboard-library-value-search {
	width: 100%;
	/* Cap at the toolbar search width so it doesn't stretch across the whole
	   filter-header row; chips below stay reachable by eye. */
	max-width: 240px;
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	outline: none;
}

.dashboard-library-value-search:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-library-config-hint {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 6px;
}

.dashboard-library-card-preview {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-top: 2px;
}

/* Badges */
.dashboard-library-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 4px;
}

.dashboard-library-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 0.625em;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-text-muted, var(--text-muted));
	max-width: 100%;
	overflow: hidden;
}

.dashboard-library-badge-key {
	font-weight: 500;
	color: var(--db-accent, var(--interactive-accent));
	white-space: nowrap;
}

.dashboard-library-badge-key::after {
	content: ':';
	margin-right: 2px;
}

.dashboard-library-badge-val {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== List View ===== */
.dashboard-library-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-library-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 10px;
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
	transition: background 0.1s ease;
}

.dashboard-library-list-item:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
}

.dashboard-library-list-name {
	font-size: 0.8125em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-library-list-props {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-library-list-spacer {
	flex: 1;
	min-width: 20px;
}

.dashboard-library-list-date {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	flex-shrink: 0;
}

/* ===== Table View ===== */
.dashboard-library-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75em;
}

.dashboard-library-table th {
	text-align: left;
	padding: 6px 10px;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
	font-size: 0.6875em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	white-space: nowrap;
}

.dashboard-library-table th:hover {
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-table td {
	padding: 6px 10px;
	color: var(--db-text, var(--text-normal));
	border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.04));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.dashboard-library-table tr {
	cursor: pointer;
	transition: background 0.1s ease;
}

.dashboard-library-table tbody tr:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
}

.dashboard-library-table-name {
	font-weight: 500;
}

.dashboard-library-table-empty {
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.4;
}

.dashboard-library-table-editable {
	cursor: text;
}

.dashboard-library-table-editable:hover {
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}

/* Action column (delete button) — narrow, non-interactive header */
.dashboard-library-table-op-col {
	width: 34px;
	padding: 6px 4px;
	cursor: default;
}

.dashboard-library-table-op {
	padding: 4px;
	text-align: center;
	/* Override the default td clamping so the round button isn't clipped */
	max-width: none;
	overflow: visible;
	white-space: nowrap;
}

.dashboard-library-table-delete {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	padding: 0;
	min-height: 0;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dashboard-library-table-delete svg {
	width: 14px;
	height: 14px;
}

.dashboard-library-table tr:hover .dashboard-library-table-delete {
	opacity: 1;
}

.dashboard-library-table-delete:hover {
	background: rgba(220, 50, 50, 0.85);
	color: #fff;
}

/* Card delete (grid / gallery / kanban): pinned to the card's top-right
   corner, fully hidden — and click-through — until the card is hovered, the
   media grid's hover-reveal affordance. Dark scrim + white icon reads over
   both covers and title rows in light and dark themes alike. */
.dashboard-library-card-delete {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 0;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	z-index: 2;
	transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dashboard-library-card-delete svg {
	width: 12px;
	height: 12px;
}

.dashboard-library-card:hover .dashboard-library-card-delete,
.dashboard-library-kanban-card:hover .dashboard-library-card-delete,
.dashboard-library-card-delete:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.dashboard-library-card-delete:hover {
	background: rgba(220, 50, 50, 0.85);
	color: #fff;
}

/* Phones have no hover: keep the affordance visible (and reachable) instead
   of stranding it at opacity 0 — same call as the qa-edit/qa-remove buttons.
   Tablets drive a pointer and keep the hover reveal. */
.is-mobile:not(.is-tablet) .dashboard-library-card-delete {
	opacity: 1;
	pointer-events: auto;
}

.dashboard-library-table-edit-input {
	width: 100%;
	padding: 2px 4px;
	border: 1px solid var(--db-accent, var(--interactive-accent));
	border-radius: 3px;
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
	box-sizing: border-box;
}

/* ===== Kanban View ===== */
.dashboard-library-kanban {
	display: flex;
	/* Tight inter-group gutters: the columns' translucent background barely
	   reads as a box in most themes, so the perceived group gap is padding +
	   gap + padding — keep all three small. */
	gap: 5px;
	overflow-x: auto;
	/* Cap the board to its bounded-height host (.dashboard-library-files).
	   Without this the board grows to its tallest column, the host scrolls
	   the whole board instead, and each column never scrolls internally —
	   which strands the columns' sticky titles (position: sticky sticks to
	   the column's own scrollport; a column that never scrolls never pins
	   them, so titles scroll away with the board). */
	max-height: 100%;
	/* Lets the row shrink inside its parent so the columns actually overflow and
	   the horizontal scrollbar engages. */
	min-width: 0;
	padding-bottom: 8px;
	/* Thin, ALWAYS-visible themed bar — the kanban's horizontal scroll is a
	   primary affordance, so it stays visible (unlike the hover-reveal bars used
	   by the todo section and other views). */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent) 24%, transparent) transparent;
}

.dashboard-library-kanban::-webkit-scrollbar {
	height: 3px;
}

.dashboard-library-kanban::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-library-kanban::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 24%, transparent);
	border-radius: 2px;
	transition: background 0.2s ease;
}

.dashboard-library-kanban::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 38%, transparent);
}

.dashboard-library-kanban-col {
	min-width: 180px;
	max-width: 260px;
	flex-shrink: 0;
	background: var(--db-bg-section, rgba(255, 255, 255, 0.02));
	border-radius: var(--db-radius-md, 10px);
	/* See the board's gap note: column padding contributes to the perceived
	   distance between groups, so it stays tight alongside it. */
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Trello-style: each column is capped to the board's height and scrolls its
	   own cards, so a long list no longer pushes the board's horizontal
	   scrollbar off-screen. min-height:0 lets the column shrink below its
	   content so overflow engages. */
	min-height: 0;
	overflow-y: auto;
	/* Hide the per-column vertical scrollbar (wheel/trackpad still scroll) so a
	   row of many groups doesn't show a clutter of gutters. */
	scrollbar-width: none;
}

.dashboard-library-kanban-col::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.dashboard-library-kanban-col-title {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	padding: 4px 6px;
	border-bottom: 2px solid var(--db-accent, var(--interactive-accent));
	margin-bottom: 4px;
	/* Stay pinned at the top of the column while its cards scroll. The theme's
	   section bg can be translucent (rgba) in some themes, which would let
	   cards bleed through — layer it over the opaque page bg (--db-bg) so the
	   pinned title looks identical to the column but is fully opaque. */
	position: sticky;
	top: 0;
	z-index: 1;
	background:
		linear-gradient(var(--db-bg-section, rgba(255, 255, 255, 0.02)), var(--db-bg-section, rgba(255, 255, 255, 0.02))),
		var(--db-bg, var(--background-primary));
	flex-shrink: 0;
}

.dashboard-library-kanban-card {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-sm, 6px);
	padding: 8px 10px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
	/* Anchor for the hover-reveal delete button (top-right). */
	position: relative;
}

.dashboard-library-kanban-card:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-library-kanban-card-title {
	font-size: 0.75em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-library-kanban-card-date {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	margin-top: 2px;
}

/* Optional kanban covers (per-section toggle): the gallery view's
   .dashboard-library-card-cover classes carry the aspect ratio, background
   sizing and the placeholder treatment — the kanban companion class only
   insets the cover inside the card's own padding with a gap before the title
   and rounds it slightly tighter to match the card. */
.dashboard-library-kanban-card-cover {
	margin-bottom: 6px;
	border-radius: 4px;
}

/* ===== Library folder-kanban drag & drop (desktop) ===== */
.dashboard-library-kanban-card[draggable="true"] {
	cursor: grab;
}

.dashboard-library-kanban-card[draggable="true"]:active {
	cursor: grabbing;
}

.dashboard-library-kanban-card--dragging {
	opacity: 0.4;
	transform: rotate(2deg);
	transition: none;
}

.dashboard-library-kanban-col--drag-over {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, var(--db-bg-section, transparent));
	outline: 2px dashed var(--db-accent, var(--interactive-accent));
	outline-offset: -2px;
}

/* ===== Library Config Modal ===== */
.dashboard-library-config-modal {
	padding: 0;
}

.dashboard-library-config-section {
	margin-bottom: 16px;
}

.dashboard-library-config-section-title {
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	margin-bottom: 8px;
}

.dashboard-library-config-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-library-config-inline-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.dashboard-library-config-inline-label {
	font-size: 0.75em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-config-checkbox {
	margin: 0;
	cursor: pointer;
}

.dashboard-library-config-number {
	width: 64px;
	/* Explicit height: Obsidian's app.css inflates native number inputs past
	   the compact select/text controls these sit beside in the config modals. */
	height: 26px;
	padding: 0 6px;
	box-sizing: border-box;
	font-size: 0.75em;
	background: var(--db-bg-input, var(--background-modifier-form-field));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-filter-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
}

.dashboard-library-filter-header {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-library-filter-header .dashboard-library-filter-property {
	max-width: 160px;
	flex-shrink: 0;
}

.dashboard-library-filter-header .dashboard-library-value-search {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}

.dashboard-library-filter-header .dashboard-library-filter-remove {
	flex-shrink: 0;
}

.dashboard-library-filter-property {
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
	max-width: 200px;
}

.dashboard-library-filter-property:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

/* Operator select (equals / contains / not equals): same input skin as the
   property select, but compact — it shares a row with the property select,
   the value search box and the remove button. */
.dashboard-library-filter-operator {
	flex-shrink: 0;
	max-width: 96px;
	padding: 4px 6px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
}

.dashboard-library-filter-operator:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-folder-input-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.dashboard-folder-path-input {
	flex: 1;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8125em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
}

.dashboard-folder-path-input:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-folder-browse-btn {
	flex-shrink: 0;
	padding: 6px 12px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	cursor: pointer;
}

.dashboard-folder-browse-btn:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.12));
}

/* Tag-filter search (folder config modal): capped at the toolbar search
   width instead of stretching full-row, with breathing room before chips. */
.dashboard-library-tag-search-row {
	margin-bottom: 8px;
}

.dashboard-library-tag-search {
	max-width: 240px;
}

.dashboard-library-filter-values {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-height: 120px;
	overflow-y: auto;
}

.dashboard-library-filter-chip {
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.6875em;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, transform 0.1s ease;
	border: 1px solid transparent;
}

.dashboard-library-filter-chip:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-library-filter-chip.active {
	background: var(--db-accent, var(--interactive-accent));
	color: white;
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-library-filter-more,
.dashboard-library-filter-empty {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	padding: 2px 4px;
}

.dashboard-library-filter-remove {
	align-self: flex-end;
	padding: 2px 6px;
	border: none;
	background: none;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.dashboard-library-filter-remove:hover {
	color: var(--db-danger, #ef4444);
	background: rgba(239, 68, 68, 0.1);
}

.dashboard-library-add-filter-btn {
	padding: 6px 12px;
	border: 1px dashed var(--db-border, rgba(255, 255, 255, 0.15));
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-library-add-filter-btn:hover {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-accent, var(--interactive-accent));
}

/* ===== Library Pagination ===== */
.dashboard-library-pagination {
	padding: 4px 0 0 0;
}

.dashboard-library-pagination-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 0;
}

.dashboard-library-pagination-btn {
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--db-radius-sm, 6px);
	font-size: 0.75em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, transform 0.1s ease;
	user-select: none;
}

.dashboard-library-pagination-btn:hover {
	background: var(--db-bg-btn-hover, rgba(139, 92, 246, 0.18));
}

.dashboard-library-pagination-btn.disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.dashboard-library-pagination-page {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
	background: transparent;
	transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, transform 0.1s ease;
	min-width: 28px;
	text-align: center;
	user-select: none;
}

.dashboard-library-pagination-page:hover {
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-text, var(--text-normal));
}

.dashboard-library-pagination-page.active {
	background: var(--db-accent, var(--interactive-accent));
	color: white;
	font-weight: 600;
	cursor: default;
}

.dashboard-library-pagination-ellipsis {
	padding: 4px 4px;
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
	user-select: none;
}

/* Library config modal header */
.dashboard-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.dashboard-modal-title {
	font-size: 1em;
	font-weight: 600;
}

/* Reminder notice modal */
.dashboard-reminder-modal {
	padding: 24px 28px 20px;
	min-width: 280px;
}

.dashboard-reminder-message {
	font-size: 0.9375em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	margin-bottom: 20px;
	line-height: 1.5;
}

.dashboard-reminder-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.dashboard-reminder-actions button {
	padding: 6px 16px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8125em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-reminder-actions button:hover {
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.1));
}

.dashboard-reminder-dismiss {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-reminder-snooze {
	background: var(--db-accent, #6366f1) !important;
	color: #fff !important;
	border-color: transparent !important;
	font-weight: 500;
}

.dashboard-reminder-snooze:hover {
	opacity: 0.9;
}

/* ===== Quick Notes first-run guide modal ===== */
.dashboard-quicknote-guide-modal {
	padding: 24px 28px 20px;
	max-width: 440px;
}

.dashboard-quicknote-guide-title {
	margin: 0 0 10px;
	font-size: 1.125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-quicknote-guide-intro {
	margin: 0 0 16px;
	font-size: 0.875em;
	line-height: 1.6;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-quicknote-guide-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.dashboard-quicknote-guide-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-quicknote-guide-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-accent-soft, rgba(99, 102, 241, 0.15));
	color: var(--db-accent, #6366f1);
}

.dashboard-quicknote-guide-feature-icon svg {
	width: 15px;
	height: 15px;
}

.dashboard-quicknote-guide-hint {
	margin: 0 0 18px;
	font-size: 0.75em;
	line-height: 1.5;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-quicknote-guide-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.dashboard-quicknote-guide-actions button {
	padding: 6px 16px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8125em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dashboard-quicknote-guide-actions button:hover {
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.1));
}

.dashboard-quicknote-guide-dismiss {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-quicknote-guide-enable {
	background: var(--db-accent, #6366f1) !important;
	color: #fff !important;
	border-color: transparent !important;
	font-weight: 500;}

.dashboard-quicknote-guide-enable:hover {
	opacity: 0.9;
}

/* ===== Dataview announcement + community-group modal ===== */
.dashboard-dataview-guide-modal {
	padding: 24px 28px 20px;
	max-width: 560px;
}

.dashboard-dataview-guide-title {
	margin: 0 0 10px;
	font-size: 1.125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

/* LME promo card (lower half of the modal): free-download message above the
   full-width artwork, rounded to match the modal, preserves its aspect ratio
   (no fixed height). Click = full size. */
.dashboard-dataview-guide-promo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	margin-bottom: 18px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
}

.dashboard-dataview-guide-promo-title {
	font-size: 0.875em;
	font-weight: 600;
	text-align: center;
	color: var(--db-text, var(--text-normal));
}

.dashboard-dataview-guide-banner {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--db-radius-md, 10px);
	margin-bottom: 0;
	cursor: zoom-in;
}

.dashboard-dataview-guide-intro {
	margin: 0 0 16px;
	font-size: 0.875em;
	line-height: 1.6;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-dataview-guide-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}

.dashboard-dataview-guide-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-dataview-guide-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-accent-soft, rgba(99, 102, 241, 0.15));
	color: var(--db-accent, #6366f1);
}

.dashboard-dataview-guide-feature-icon svg {
	width: 15px;
	height: 15px;
}

/* Community group card: centered title + QR + fallback line */
.dashboard-dataview-guide-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 12px;
	margin-bottom: 18px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
}

.dashboard-dataview-guide-group-title {
	font-size: 0.875em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-dataview-guide-qr-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.dashboard-dataview-guide-qr {
	width: 200px;
	height: auto;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	cursor: zoom-in;
	display: block;
}

.dashboard-dataview-guide-group-fallback {
	font-size: 0.75em;
	color: var(--db-text-faint, var(--text-faint));
	text-align: center;
}

.dashboard-dataview-guide-actions {
	display: flex;
	justify-content: flex-end;
}

.dashboard-dataview-guide-gotit {
	padding: 6px 16px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid transparent;
	background: var(--db-accent, #6366f1);
	color: #fff;
	font-size: 0.8125em;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.dashboard-dataview-guide-gotit:hover {
	opacity: 0.9;
}

/* ===== Note popover modal — in-place edit popup for hover-previewed links =====
   The modal lives on document.body (outside .apex-dashboard-root), so it uses
   Obsidian's global theme vars rather than the dashboard's --db-* vars. The
   embedded MarkdownView renders with the app's native note theme. */

.note-popover-modal-wrap {
	width: calc(var(--file-line-width, 700px) + 56px);
	max-width: 94vw;
	height: 80vh;
	max-height: 86vh;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* The popover header has its own close button in the actions row; hide the
   native modal close button so only one is shown. Obsidian 1.13+ desktop
   renders it as .modal-header-button (older/mobile builds: .modal-close-button)
   — the TS side also removes the node (removeNativeModalCloseButton); this CSS
   is the belt-and-suspenders fallback. */
.note-popover-modal-wrap .modal-close-button,
.note-popover-modal-wrap .modal-header-button {
	display: none;
}

.note-popover-modal {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.note-popover-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	background: var(--background-secondary);
}

.note-popover-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 600;
	font-size: var(--font-ui-medium);
	color: var(--text-normal);
}

.note-popover-title span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.note-popover-title svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--text-muted);
}

.note-popover-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.note-popover-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
}

.note-popover-btn:hover {
	background: var(--background-modifier-hover);
	color: var(--text-normal);
}

.note-popover-btn svg {
	width: 16px;
	height: 16px;
}

.note-popover-editor {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* A detached leaf has no inherent height, so every level from the host down to
   CodeMirror / the reading view must stretch to fill the modal. */
.note-popover-editor > .workspace-leaf,
.note-popover-editor .workspace-leaf-content,
.note-popover-editor .view-content {
	height: 100%;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.note-popover-editor .markdown-source-view,
.note-popover-editor .cm-editor,
.note-popover-editor .markdown-reading-view {
	height: 100%;
	flex: 1;
	min-height: 0;
}

.note-popover-editor .cm-scroller {
	overflow: auto;
}

/* Comfortable inset so the readable-width text isn't flush to the edges. The
   modal width itself tracks Obsidian's --file-line-width, so readable line
   length is left on and the text width is unchanged. */
.note-popover-editor .view-content {
	padding: 12px 20px 20px;
}

/* ===== Media sections (images / videos) ===== */
.dashboard-media-content {
	padding: 4px 0;
	min-height: 540px;
}

.dashboard-media-area {
	min-height: 460px;
}

/* Grouped rendering (toolbar group-by): one collapsible header + body per
   folder/tag bucket. Header mirrors the kanban column title's size level. */
.dashboard-media-group-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 4px;
	margin: 10px 0 6px 0;
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
	cursor: pointer;
	user-select: none;
	border-radius: var(--db-radius-sm, 4px);
	transition: background 0.15s ease;
}
.dashboard-media-group-header:hover { background: var(--db-bg-hover, rgba(255, 255, 255, 0.05)); }
.dashboard-media-group-chevron {
	display: flex;
	color: var(--db-text-faint, var(--text-faint));
	flex-shrink: 0;
}
.dashboard-media-group-chevron svg { width: 12px; height: 12px; }
.dashboard-media-group-name {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dashboard-media-group-count {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.06));
	padding: 0 7px;
	border-radius: 999px;
}
.dashboard-media-group-header.is-collapsed { opacity: 0.75; }
.dashboard-media-group-body.is-hidden { display: none; }
.dashboard-media-area .dashboard-media-group-header:first-child { margin-top: 0; }
/* The empty-state min-height applies to the flat wall; grouped mode sizes by content. */
.dashboard-media-area:has(.dashboard-media-group-header) { min-height: 0; }

.dashboard-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
}
.dashboard-media-grid--small {
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 6px;
}
.dashboard-media-grid--large {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.dashboard-media-item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--db-radius-md, 8px);
	overflow: hidden;
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.dashboard-media-item:hover {
	transform: translateY(-2px);
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-media-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--db-bg-card-hover, rgba(0, 0, 0, 0.2));
}

.dashboard-media-thumb--broken {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
}

/* Static placeholder for video tiles (mobile always; desktop until the lazy
   <video> mounts). Avoids creating a media decoder per thumbnail. */
.dashboard-media-thumb--video-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--db-bg-card-hover, rgba(0, 0, 0, 0.25));
	color: var(--db-text-muted, rgba(255, 255, 255, 0.55));
}
.dashboard-media-thumb-icon svg {
	width: 30%;
	height: 30%;
	opacity: 0.7;
}
.dashboard-media-size-badge {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 1px 5px;
	font-size: 0.625em;
	line-height: 1.4;
	border-radius: 4px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	pointer-events: none;
}
/* Once a real <video> is lazily mounted into a tile, hide its placeholder. */
.dashboard-media-item.is-video-mounted > .dashboard-media-thumb--video-placeholder,
.dashboard-media-list-thumb.is-video-mounted > .dashboard-media-thumb--video-placeholder {
	display: none;
}
/* Size badge hidden inside the tiny list-view thumb (40x40) */
.dashboard-media-list-thumb .dashboard-media-size-badge { display: none; }

.dashboard-media-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px 8px 6px;
	font-size: 0.6875em;
	line-height: 1.2;
	color: var(--db-text, #fff);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.dashboard-media-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
}

.dashboard-media-play svg {
	width: 18px;
	height: 18px;
}

/* Grid delete button (top-left of thumbnail, mirrors qa-remove positioning) */
.dashboard-media-delete {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 0;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 2;
}
.dashboard-media-delete svg { width: 12px; height: 12px; }
.dashboard-media-item:hover .dashboard-media-delete { opacity: 1; }
.dashboard-media-item .dashboard-media-delete:hover { background: rgba(220, 50, 50, 0.85); }

/* List view */
.dashboard-media-list { display: flex; flex-direction: column; gap: 4px; }
.dashboard-media-list-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
}
.dashboard-media-list-row:hover { background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.08)); }
.dashboard-media-list-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--db-radius-sm, 6px);
	overflow: hidden;
	background: var(--db-bg-card-hover, rgba(0, 0, 0, 0.2));
	cursor: pointer;
}
.dashboard-media-list-thumb video { width: 100%; height: 100%; object-fit: cover; }
.dashboard-media-list-thumb:hover { outline: 2px solid var(--db-accent, var(--interactive-accent)); }
.dashboard-media-list-info { flex: 1; min-width: 0; }
.dashboard-media-list-name {
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: text;
}
.dashboard-media-list-name.dashboard-media-table-name-cell:hover {
	color: var(--db-accent, var(--interactive-accent));
}
.dashboard-media-list-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 3px;
}
.dashboard-media-list .dashboard-media-delete--list:hover {
	background: rgba(220, 50, 50, 0.12);
	color: var(--db-danger, rgb(220, 50, 50));
}
.dashboard-media-list-meta {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Backlink chips (list/table) */
.dashboard-media-backlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.dashboard-media-backlink {
	padding: 1px 7px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.1));
	color: var(--db-accent, var(--interactive-accent));
	font-size: 0.625em;
	line-height: 16px;
	white-space: nowrap;
	cursor: pointer;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-media-backlink:hover {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-bg, #fff);
}
.dashboard-media-backlink--more {
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: default;
}
.dashboard-media-backlink--more:hover {
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-media-no-links {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
}

/* ---- Media tags ---- */

/* Tile/list/table tag chips */
.dashboard-media-tile-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 3px;
}
.dashboard-media-tile-tag {
	padding: 0 6px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.1));
	color: var(--db-accent, var(--interactive-accent));
	font-size: 0.625em;
	line-height: 16px;
	white-space: nowrap;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-media-tile-tag--more {
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
}

/* Grid tag button (mirrors the delete button, sits to its right) */
.dashboard-media-tagbtn {
	left: 30px;
}
.dashboard-media-tagbtn svg { width: 12px; height: 12px; }
.dashboard-media-tagbtn:hover {
	background: rgba(0, 0, 0, 0.75);
}
/* Mobile: hover states don't exist — always show the tag button */
body.is-mobile .dashboard-media-item .dashboard-media-tagbtn { opacity: 1; }

/* Unified neutral icon button for list rows and the table's op column
   (open / delete / tag): same 26x26 box, same icon size, so the pairs
   always render consistently. */
.dashboard-media-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	min-height: 0;
	border: none;
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.dashboard-media-icon-btn svg { width: 13px; height: 13px; display: block; }
.dashboard-media-icon-btn:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.1));
	color: var(--db-text, var(--text-normal));
}

/* Lightbox tag bar — sits below the caption (media above, tags under it),
   wrapping onto multiple rows when the pills don't fit one line. */
.dashboard-media-lightbox-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	max-width: min(720px, 86vw);
	padding: 0 16px;
}
.dashboard-media-lightbox-tag {
	padding: 2px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 0.75em;
	line-height: 18px;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-media-lightbox-tag--add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px dashed rgba(255, 255, 255, 0.55);
	background: transparent;
	cursor: pointer;
	color: #fff;
}
.dashboard-media-lightbox-tag--add:hover { background: rgba(255, 255, 255, 0.15); }
.dashboard-media-lightbox-tag-icon { display: inline-flex; align-items: center; }
.dashboard-media-lightbox-tag-icon svg { width: 11px; height: 11px; }

/* Tag edit modal */
.dashboard-media-tagedit-path {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	margin-top: -6px;
	margin-bottom: 10px;
	word-break: break-all;
}
.dashboard-media-tagedit-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0;
}
.dashboard-media-tagedit-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.1));
	color: var(--db-accent, var(--interactive-accent));
	font-size: 0.75em;
}
.dashboard-media-tagedit-chip-x {
	cursor: pointer;
	font-weight: 700;
	color: var(--db-text-muted, var(--text-muted));
	padding: 0 2px;
}
.dashboard-media-tagedit-chip-x:hover { color: var(--db-danger, rgb(220, 50, 50)); }
.dashboard-media-tagedit-add { margin-top: 6px; }
.dashboard-media-tagedit-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0;
}

/* Media filter popup inputs (reuses library filter-popup shell) */
.dashboard-media-filter-dates { display: flex; gap: 6px; flex-wrap: wrap; }
.dashboard-media-filter-date {
	padding: 4px 6px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	outline: none;
}
.dashboard-media-filter-folder {
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	outline: none;
}
.dashboard-media-folder-input-row {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-top: 4px;
}
.dashboard-media-folder-input-row .dashboard-media-filter-folder {
	flex: 1;
	min-width: 0;
	width: auto;
	margin-top: 0;
}
.dashboard-media-folder-browse {
	flex-shrink: 0;
	padding: 4px 10px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	cursor: pointer;
}
.dashboard-media-folder-browse:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.12));
}

/* ===== Media lightbox ===== */
.dashboard-media-lightbox-container {
	background: rgba(0, 0, 0, 0.92) !important;
	padding: 0 !important;
	opacity: 1 !important;
}

/* The modal layer (Obsidian's .modal) — override default max-width/padding/border
   so the lightbox truly fills the viewport and centers its media. */
.dashboard-media-lightbox-modal {
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	max-height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.dashboard-media-lightbox {
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	max-height: 100vh !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.dashboard-media-lightbox-stage {
	max-width: 90vw;
	max-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-media-lightbox-img,
.dashboard-media-lightbox-video {
	max-width: 90vw;
	max-height: 74vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.dashboard-media-lightbox-caption {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125em;
	text-align: center;
	margin-top: 10px;
	pointer-events: none;
}

.dashboard-media-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}

.dashboard-media-lightbox-nav svg {
	width: 24px;
	height: 24px;
}

.dashboard-media-lightbox-nav--prev { left: 20px; }
.dashboard-media-lightbox-nav--next { right: 20px; }

.dashboard-media-lightbox-nav.is-disabled {
	opacity: 0.3;
	cursor: default;
}

/* ---------- All-tasks section (vault task aggregation) ---------- */
.dashboard-alltasks-content { display: flex; flex-direction: column; gap: 10px; }
.dashboard-alltasks-area { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }

.dashboard-alltasks-status .dashboard-library-view-btn {
	font-size: 0.6875em;
	padding: 2px 8px;
}

.dashboard-alltasks-list { display: flex; flex-direction: column; gap: 4px; }

.dashboard-alltasks-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
}
.dashboard-alltasks-row:hover { background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.08)); }
.dashboard-alltasks-row.is-done .dashboard-alltasks-text { text-decoration: line-through; opacity: 0.55; }

.dashboard-alltasks-check {
	flex-shrink: 0;
	margin-top: 3px;
	cursor: pointer;
	accent-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-alltasks-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dashboard-alltasks-text {
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
	word-break: break-word;
	line-height: 1.4;
}
.dashboard-alltasks-text .dashboard-wikilink,
.dashboard-alltasks-text a {
	color: var(--db-accent, var(--text-accent));
	cursor: pointer;
}
.dashboard-alltasks-reminder {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-alltasks-source {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.dashboard-alltasks-chip {
	font-size: 0.6875em;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.08));
	color: var(--db-text-muted, var(--text-muted));
	max-width: 160px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-alltasks-chip:hover { color: var(--db-accent, var(--text-accent)); }
.dashboard-alltasks-date { font-size: 0.625em; color: var(--db-text-muted, var(--text-muted)); opacity: 0.7; }

/* Priority badge */
.dashboard-alltasks-prio {
	flex-shrink: 0;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625em;
	font-weight: 700;
	color: #fff;
}
.dashboard-alltasks-prio--high { background: #ef4444; }
.dashboard-alltasks-prio--medium { background: #f59e0b; }
.dashboard-alltasks-prio--low { background: #64748b; }

/* Due date pill */
.dashboard-alltasks-due {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.06));
	padding: 1px 6px;
	border-radius: 999px;
}
.dashboard-alltasks-due.is-overdue { color: #fff; background: #ef4444; }

/* Grouped list (date / priority buckets) */
.dashboard-alltasks-groups { display: flex; flex-direction: column; gap: 8px; }
.dashboard-alltasks-group { display: flex; flex-direction: column; gap: 4px; }
.dashboard-alltasks-group-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px;
	cursor: pointer;
	user-select: none;
	border-radius: var(--db-radius-sm, 6px);
}
.dashboard-alltasks-group-header:hover { background: var(--db-bg-hover, rgba(255, 255, 255, 0.05)); }
.dashboard-alltasks-group-chevron { color: var(--db-text-muted, var(--text-muted)); display: flex; }
.dashboard-alltasks-group-chevron svg { width: 14px; height: 14px; }
.dashboard-alltasks-group-title { font-size: 0.75em; font-weight: 600; color: var(--db-text, var(--text-normal)); }
.dashboard-alltasks-group-count {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.06));
	padding: 0 6px;
	border-radius: 999px;
}
.dashboard-alltasks-group.is-collapsed .dashboard-alltasks-list { display: none; }

/* "+N more" hint (grouped view hit the render cap) */
.dashboard-alltasks-group-more {
	padding: 4px 8px;
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	font-style: italic;
}
.dashboard-alltasks-kanban-more {
	margin-top: 4px;
	font-size: 0.6875em;
	text-align: center;
	color: var(--db-text-muted, var(--text-muted));
	font-style: italic;
}
/* Cap notice shown when the grouped view exceeds the render cap */
.dashboard-alltasks-cap-notice {
	margin-top: 8px;
	padding: 6px 10px;
	font-size: 0.75em;
	text-align: center;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.04));
	border-radius: var(--db-radius-sm, 6px);
}

/* Kanban board (alltasks) */
.dashboard-alltasks-kanban {
	display: flex;
	/* Matches the library board's tight group gutters (shared columns). */
	gap: 5px;
	overflow-x: auto;
	min-width: 0;
	padding-bottom: 4px;
	/* Thin, ALWAYS-visible themed bar (see .dashboard-library-kanban). */
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent) 24%, transparent) transparent;
}

.dashboard-alltasks-kanban::-webkit-scrollbar {
	height: 3px;
}
.dashboard-alltasks-kanban::-webkit-scrollbar-track {
	background: transparent;
}
.dashboard-alltasks-kanban::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 24%, transparent);
	border-radius: 2px;
	transition: background 0.2s ease;
}
.dashboard-alltasks-kanban::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 38%, transparent);
}
.dashboard-alltasks-kanban .dashboard-library-kanban-col { min-width: 200px; flex: 1; max-width: 280px; }
.dashboard-alltasks-kanban-empty {
	justify-content: center;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.75em;
	opacity: 0.5;
}
.dashboard-alltasks-card { padding: 6px 8px; }
.dashboard-alltasks-card.is-done .dashboard-alltasks-card-title { text-decoration: line-through; opacity: 0.55; }
.dashboard-alltasks-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.dashboard-alltasks-card-title { font-size: 0.75em; line-height: 1.35; word-break: break-word; }
.dashboard-alltasks-card-open {
	margin-left: auto;
	color: var(--db-text-muted, var(--text-muted));
	display: flex;
	cursor: pointer;
}
.dashboard-alltasks-card-open svg { width: 13px; height: 13px; }
.dashboard-alltasks-card-open:hover { color: var(--db-accent, var(--text-accent)); }
.dashboard-alltasks-card-source {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.7;
	margin-left: 6px;
}

/* Config modal: exclude-folders chips */
.dashboard-alltasks-exclude-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dashboard-alltasks-exclude-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.08));
	color: var(--db-text, var(--text-normal));
}
.dashboard-alltasks-exclude-chip-x { cursor: pointer; opacity: 0.6; font-weight: 700; }
.dashboard-alltasks-exclude-chip-x:hover { opacity: 1; color: #ef4444; }

/* ---------- Multi-select folder picker (calendar excluded folders etc.) ---------- */
.dashboard-folder-multi-list {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	margin-top: 8px;
}
.dashboard-folder-multi-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	cursor: pointer;
	border-radius: var(--db-radius-sm, 6px);
}
.dashboard-folder-multi-row:hover { background: var(--db-bg-hover, rgba(255, 255, 255, 0.08)); }
.dashboard-folder-multi-row.is-checked .dashboard-folder-multi-row-name {
	color: var(--db-accent, var(--interactive-accent));
	font-weight: 600;
}
.dashboard-folder-multi-row.is-covered { opacity: 0.45; cursor: default; }
.dashboard-folder-multi-row.is-covered:hover { background: transparent; }
.dashboard-folder-multi-row input[type='checkbox'] { pointer-events: none; flex-shrink: 0; margin: 0; }
.dashboard-folder-multi-row-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75em;
	color: var(--db-text, var(--text-normal));
}
.dashboard-folder-multi-covered-note {
	flex-shrink: 0;
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-folder-multi-count {
	margin-top: 6px;
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
}

/* ---------- Calendar section (month grid) ---------- */
.dashboard-calendar-content { display: flex; flex-direction: column; gap: 8px; }
.dashboard-calendar-nav { display: flex; align-items: center; gap: 6px; }
.dashboard-calendar-nav-btn {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: var(--db-radius-sm, 6px);
	cursor: pointer; color: var(--db-text-muted, var(--text-muted));
}
.dashboard-calendar-nav-btn:hover { background: var(--db-bg-hover, rgba(255,255,255,0.08)); color: var(--db-text, var(--text-normal)); }
.dashboard-calendar-nav-btn svg { width: 16px; height: 16px; }
.dashboard-calendar-nav-label { font-size: 0.8125em; font-weight: 600; color: var(--db-text, var(--text-normal)); min-width: 90px; text-align: center; }
.dashboard-calendar-today-btn {
	font-size: 0.6875em; padding: 3px 10px; border-radius: 999px;
	background: var(--db-bg-hover, rgba(255,255,255,0.08)); color: var(--db-text-muted, var(--text-muted));
	cursor: pointer; display: flex; align-items: center;
}
.dashboard-calendar-today-btn:hover { color: var(--db-accent, var(--text-accent)); }
.dashboard-calendar-today-btn svg { width: 13px; height: 13px; }
.dashboard-calendar-host { overflow-x: auto; }

.dashboard-calendar { display: flex; flex-direction: column; gap: 4px; }
.dashboard-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dashboard-calendar-weekday { font-size: 0.625em; text-align: center; color: var(--db-text-muted, var(--text-muted)); padding: 2px 0; }
.dashboard-calendar-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

/* Full-screen month with continuous multi-day bars: the body becomes a stack of
   week blocks, each a bar strip (same 7-column template as the day cells below
   it, so bars and cells share exact column edges) + the day cells. */
.dashboard-calendar-body--bars { display: flex; flex-direction: column; gap: 2px; }
.dashboard-calendar-week { display: flex; flex-direction: column; gap: 2px; }
.dashboard-calendar-barlayer {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	column-gap: 2px;
	row-gap: 2px;
	/* Keep in sync with MAX_BAR_LANES sizing: one lane = 20px bar + 2px row gap. */
	--dashboard-bar-lane: 22px;
	height: calc(var(--bar-lanes, 0) * var(--dashboard-bar-lane));
}
.dashboard-calendar-barlayer:empty { height: 0 !important; }
.dashboard-calendar-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.dashboard-calendar-bar {
	display: flex; align-items: center; gap: 3px; min-width: 0;
	height: 20px; padding: 0 6px;
	grid-column: var(--bar-cs, 1) / span var(--bar-len, 1);
	grid-row: var(--bar-row, 1);
	border-radius: 999px; overflow: hidden;
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.08));
	border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 40%, transparent);
	color: var(--db-text, var(--text-normal));
	font-size: 0.5625em; line-height: 1.2; white-space: nowrap;
	cursor: pointer; user-select: none;
}
.dashboard-calendar-bar:hover { background: var(--db-bg-hover-strong, var(--db-bg-hover, rgba(255, 255, 255, 0.14))); }
.dashboard-calendar-bar:focus-visible { outline: 1px solid var(--db-accent, var(--interactive-accent)); outline-offset: 1px; }
.dashboard-calendar-bar-time { flex-shrink: 0; font-weight: 600; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-calendar-bar-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dashboard-calendar-bar.is-done { opacity: 0.5; }
.dashboard-calendar-bar.is-done .dashboard-calendar-bar-text { text-decoration: line-through; }
.dashboard-calendar-bar.prio-high { background: color-mix(in srgb, var(--db-prio-high, #ef4444) 18%, transparent); border-color: color-mix(in srgb, var(--db-prio-high, #ef4444) 55%, transparent); }
.dashboard-calendar-bar.prio-medium { background: color-mix(in srgb, var(--db-prio-medium, #f59e0b) 18%, transparent); border-color: color-mix(in srgb, var(--db-prio-medium, #f59e0b) 55%, transparent); }
.dashboard-calendar-bar.prio-low { background: color-mix(in srgb, var(--db-prio-low, #3b82f6) 18%, transparent); border-color: color-mix(in srgb, var(--db-prio-low, #3b82f6) 55%, transparent); }
.dashboard-calendar-bar.is-cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; margin-left: -1px; }
.dashboard-calendar-bar.is-cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; margin-right: -1px; }

/* Day-origin markers (scheduled ⏳ / completed ✅) on calendar task rows. */
.dashboard-calendar-mark { display: flex; flex-shrink: 0; color: var(--db-text-muted, var(--text-muted)); opacity: 0.7; }
.dashboard-calendar-mark svg { width: 11px; height: 11px; }
.dashboard-calendar-mark--done { opacity: 0.8; }

/* Dot mode: a day whose only entries are completed tasks gets a muted dot. */
.dashboard-calendar-cell-dot.is-done { background: var(--db-text-faint, var(--db-text-muted, var(--text-muted))); opacity: 0.55; }

/* Phones: keep bars tappable and readable at narrow widths. */
.is-phone .dashboard-calendar-bar { font-size: 0.5rem; padding: 0 4px; gap: 2px; }
.is-phone .dashboard-calendar-bar-time { display: none; }

.dashboard-calendar-cell {
	min-width: 0; border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255,255,255,0.03));
	border: 1px solid var(--db-border-card, rgba(255,255,255,0.06));
	padding: 3px; display: flex; flex-direction: column; gap: 2px;
}
.dashboard-calendar-cell.is-outside { opacity: 0.4; }
.dashboard-calendar-cell.is-today { border-color: var(--db-accent, var(--interactive-accent)); box-shadow: 0 0 0 1px var(--db-accent, var(--interactive-accent)) inset; }
.dashboard-calendar-cell-num { font-size: 0.625em; font-weight: 600; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-calendar-cell.is-today .dashboard-calendar-cell-num { color: var(--db-accent, var(--text-accent)); }
.dashboard-calendar-cell-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; }

/* Compact (in-column) sizing */
.dashboard-calendar.is-compact .dashboard-calendar-cell { min-height: 64px; }
.dashboard-calendar.is-compact .dashboard-calendar-cell.has-tasks { cursor: pointer; }
.dashboard-calendar.is-compact .dashboard-calendar-cell.has-tasks:hover { background: var(--db-bg-card-hover, rgba(255,255,255,0.08)); }

/* Full (modal) sizing. Every cell gets an explicit light border (mixed from the
   theme's text color, so it stays light-on-dark and dark-on-light across
   palettes); today's cell takes an accent-tinted background with an
   accent-colored, bolder date number. The --db-* vars resolve via the copy onto
   the modal box in calendar-modal.ts (the modal sits outside the theme root).
   Cells cap at a viewport-scaled height so a busy day scrolls inside its list
   instead of stretching the cell (and its whole week row). */
.dashboard-calendar.is-full .dashboard-calendar-cell {
	height: clamp(104px, 16vh, 200px);
	border-color: color-mix(in srgb, var(--db-text, rgba(232, 240, 248, 0.9)) 16%, transparent);
}
.dashboard-calendar.is-full .dashboard-calendar-cell.is-today {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 16%, transparent);
	border-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-calendar.is-full .dashboard-calendar-cell.is-today .dashboard-calendar-cell-num {
	color: var(--db-accent, var(--text-accent));
	font-weight: 700;
}
/* Full-screen month: the day number opens the day agenda (add tasks) */
.dashboard-calendar.is-full .dashboard-calendar-cell-num.is-clickable {
	cursor: pointer; border-radius: 4px; margin: -2px -5px; padding: 2px 5px;
	align-self: flex-start;
}
.dashboard-calendar.is-full .dashboard-calendar-cell-num.is-clickable:hover {
	background: var(--db-bg-hover, rgba(255,255,255,0.06));
	color: var(--db-text, var(--text-normal));
}
.dashboard-calendar.is-full .dashboard-calendar-cell-num.is-clickable:focus-visible {
	outline: 2px solid var(--db-accent, var(--interactive-accent));
	outline-offset: 1px;
}

/* Week view: vertical list of 7 day rows (distinct from the month grid) */
.dashboard-calendar.dashboard-calendar--week { display: flex; flex-direction: column; gap: 4px; }
.dashboard-calendar-week-row {
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255,255,255,0.03));
	border: 1px solid var(--db-border-card, rgba(255,255,255,0.06));
	padding: 4px 6px;
}
.dashboard-calendar-week-row.is-today {
	border-color: var(--db-accent, var(--interactive-accent));
	box-shadow: 0 0 0 1px var(--db-accent, var(--interactive-accent)) inset;
}
.dashboard-calendar-week-row-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.dashboard-calendar-week-row-namewrap { display: flex; align-items: baseline; gap: 5px; }
.dashboard-calendar-week-row-name { font-size: 0.6875em; font-weight: 600; color: var(--db-text, var(--text-normal)); }
.dashboard-calendar-week-row.is-today .dashboard-calendar-week-row-name { color: var(--db-accent, var(--text-accent)); }
.dashboard-calendar-week-row-date { font-size: 0.625em; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-calendar-week-row-count {
	margin-left: auto;
	font-size: 0.625em; color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(255,255,255,0.06));
	padding: 0 6px; border-radius: 999px;
}
.dashboard-calendar-week-row-list { gap: 3px; }
.dashboard-calendar-week-row-head.is-clickable { cursor: pointer; border-radius: 4px; margin: -2px -4px; padding: 2px 4px; }
.dashboard-calendar-week-row-head.is-clickable:hover { background: var(--db-bg-hover, rgba(255,255,255,0.06)); }

.dashboard-calendar-event {
	display: flex; align-items: center; gap: 3px;
	font-size: 0.5625em; line-height: 1.2;
	padding: 1px 4px; border-radius: 4px;
	background: var(--db-bg-hover, rgba(255,255,255,0.06));
	color: var(--db-text, var(--text-normal));
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dashboard-calendar.is-full .dashboard-calendar-event { font-size: 0.8125em; padding: 3px 6px; line-height: 1.45; }
.dashboard-calendar-event.is-done { opacity: 0.5; text-decoration: line-through; }
/* Time-of-day label shown on week-view tasks and the day agenda */
.dashboard-calendar-event-time {
	flex-shrink: 0;
	font-size: 0.5625em;
	font-variant-numeric: tabular-nums;
	color: var(--db-text-muted, var(--text-muted));
	background: rgba(0, 0, 0, 0.2);
	padding: 0 3px;
	border-radius: 3px;
	min-width: 28px;
	text-align: center;
}
.dashboard-calendar.is-full .dashboard-calendar-event-time { font-size: 0.8125em; }
.dashboard-alltasks-row .dashboard-calendar-event-time { font-size: 0.6875em; }

/* Add-task row in the day agenda modal (title + Add -> note destination) */
.dashboard-cal-day-add { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
/* Equal heights for the add-task row: Chromium renders input[type=time]
   intrinsically taller than the sibling text input; pin both to the button
   height so the row lines up. */
.dashboard-cal-day-add-title {
	height: 34px;
	padding: 0 10px;
	box-sizing: border-box;
}
.dashboard-cal-day-add-title { flex: 1; min-width: 0; }
.dashboard-cal-day-add-btn { flex-shrink: 0; }

/* Optional time groups under the add row: start / deadline / scheduled, each
   date + time. Wraps on narrow panes; every input stays short enough that the
   three groups share one line on desktop. */
.dashboard-cal-day-times { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.dashboard-cal-day-times-group { display: flex; align-items: center; gap: 4px; }
.dashboard-cal-day-times-label {
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
	flex-shrink: 0;
}
.dashboard-cal-day-times-date,
.dashboard-cal-day-times-time {
	height: 30px;
	padding: 0 6px;
	box-sizing: border-box;
}
.dashboard-cal-day-times-date { width: 132px; }
.dashboard-cal-day-times-time { width: 86px; }

/* Google-style week time grid (full-screen modal). Hour rows are 48px; day
   column height is 24*48 = 1152px — keep in sync with TIMEGRID_HOUR_PX. */
.dashboard-calgrid { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dashboard-calgrid-head {
	display: grid; grid-template-columns: 52px repeat(7, 1fr);
	border-bottom: 1px solid var(--db-border-card, rgba(255,255,255,0.08));
}
.dashboard-calgrid-dayhead { text-align: center; padding: 6px 0 4px; }
.dashboard-calgrid-dayhead-wd { font-size: 0.6875em; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-calgrid-dayhead-date { font-size: 0.9375em; font-weight: 600; color: var(--db-text, var(--text-normal)); }
.dashboard-calgrid-dayhead.is-today .dashboard-calgrid-dayhead-date { color: var(--db-accent, var(--interactive-accent)); }
/* Week time grid: the day header opens the day agenda (add tasks) */
.dashboard-calgrid-dayhead.is-clickable { cursor: pointer; border-radius: 4px; }
.dashboard-calgrid-dayhead.is-clickable:hover { background: var(--db-bg-hover, rgba(255,255,255,0.06)); }
.dashboard-calgrid-dayhead.is-clickable:focus-visible {
	outline: 2px solid var(--db-accent, var(--interactive-accent));
	outline-offset: 1px;
}
.dashboard-calgrid-allday {
	display: grid; grid-template-columns: 52px repeat(7, 1fr);
	border-bottom: 1px solid var(--db-border-card, rgba(255,255,255,0.08));
	min-height: 22px;
}
.dashboard-calgrid-allday-corner { font-size: 0.5625em; color: var(--db-text-muted, var(--text-muted)); padding: 3px 4px; align-self: center; }
.dashboard-calgrid-allday-cell { padding: 2px 1px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dashboard-calgrid-allday-chip {
	font-size: 0.5625em; line-height: 1.2;
	background: var(--db-bg-hover, rgba(255,255,255,0.06));
	border-radius: 3px; padding: 0 3px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-calgrid-allday-chip.is-done { opacity: 0.5; text-decoration: line-through; }
.dashboard-calgrid-allday-more { font-size: 0.5625em; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-calgrid-scroll { flex: 1; min-height: 0; overflow-y: auto; max-height: calc(100vh - 180px); }
.dashboard-calgrid-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); position: relative; }
.dashboard-calgrid-hours { border-right: 1px solid var(--db-border-card, rgba(255,255,255,0.08)); }
.dashboard-calgrid-hour {
	height: 48px; font-size: 0.625em; color: var(--db-text-muted, var(--text-muted));
	text-align: right; padding: 0 4px; box-sizing: border-box;
}
.dashboard-calgrid-daycol {
	position: relative; height: 1152px; min-width: 0;
	border-right: 1px solid var(--db-border-card, rgba(255,255,255,0.06));
	background-image: linear-gradient(to bottom, var(--db-border-card, rgba(255,255,255,0.06)) 1px, transparent 1px);
	background-size: 100% 48px; background-position: 0 0;
}
.dashboard-calgrid-daycol.is-today { background-color: var(--db-bg-banner, rgba(168,85,247,0.06)); }
.dashboard-calgrid-event {
	position: absolute; left: 2px; right: 2px;
	border-radius: 5px; padding: 3px 6px; overflow: hidden;
	background: var(--db-bg-card-hover, rgba(255,255,255,0.08));
	border-left: 3px solid var(--db-accent, var(--interactive-accent));
	font-size: 0.6875em; line-height: 1.25; cursor: pointer;
	color: var(--db-text, var(--text-normal));
}
.dashboard-calgrid-event.is-done { opacity: 0.5; text-decoration: line-through; }
.dashboard-calgrid-event.prio-high { border-left-color: var(--db-danger, #f43f5e); }
.dashboard-calgrid-event.prio-medium { border-left-color: var(--db-accent-light, #6366f1); }
.dashboard-calgrid-event-check { margin-right: 3px; }
.dashboard-calgrid-event-time { font-size: 0.5625em; color: var(--db-text-muted, var(--text-muted)); font-variant-numeric: tabular-nums; }
.dashboard-calgrid-event-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-calgrid-nowline {
	position: absolute; left: 52px; right: 0; height: 2px;
	background: var(--db-danger, #f43f5e); z-index: 5; pointer-events: none;
}
.dashboard-calgrid-nowline::before {
	content: ''; position: absolute; left: -4px; top: -3px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--db-danger, #f43f5e);
}
.dashboard-calendar-event.is-overdue { background: rgba(239,68,68,0.25); }
.dashboard-calendar-event.prio-high { border-left: 2px solid #ef4444; }
.dashboard-calendar-event.prio-medium { border-left: 2px solid #f59e0b; }
.dashboard-calendar-event.prio-low { border-left: 2px solid #64748b; }
.dashboard-calendar-event.is-multi { background: var(--db-bg-hover, rgba(255,255,255,0.1)); }
.dashboard-calendar-event-text { overflow: hidden; text-overflow: ellipsis; }
.dashboard-calendar.is-full .dashboard-calendar-event-text .dashboard-wikilink { pointer-events: none; }
.dashboard-calendar-event.is-multi .dashboard-calendar-multi-mark { margin-left: auto; flex-shrink: 0; display: flex; opacity: 0.7; }
.dashboard-calendar-event.is-multi .dashboard-calendar-multi-mark svg { width: 9px; height: 9px; }
.dashboard-calendar-check { width: 11px; height: 11px; flex-shrink: 0; margin: 0; accent-color: var(--db-accent, var(--interactive-accent)); }
.dashboard-calendar-more { font-size: 0.5625em; color: var(--db-text-muted, var(--text-muted)); padding: 0 4px; }
/* Click-to-jump affordances (calendar task rows/chips wired to onOpenNote) */
.dashboard-calendar-event.is-jumpable { cursor: pointer; }
.dashboard-calgrid-allday-chip.is-jumpable { cursor: pointer; }
.dashboard-calgrid-allday-chip.is-jumpable:hover { background: var(--db-bg-card-hover, rgba(255,255,255,0.14)); }
.dashboard-alltasks-row.is-jumpable { cursor: pointer; }

/* Fullscreen modal */
.dashboard-calendar-fullscreen-modal { width: 92vw; max-width: 1100px; height: 88vh; }
.dashboard-calendar-fullscreen-inner { width: 100%; height: 100%; display: flex; flex-direction: column; }
.dashboard-calendar-fullscreen-body { flex: 1; min-height: 0; overflow: auto; }
/* Fullscreen calendar: task filter button (header). Active (non-'all') filters
   tint icon + label with the accent so the narrowed state is visible at a glance. */
.dashboard-calendar-filter-btn { display: inline-flex; align-items: center; gap: 4px; }
.dashboard-calendar-filter-btn svg { width: 13px; height: 13px; }
.dashboard-calendar-filter-btn.is-filtered {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-calendar-filter-caret { display: inline-flex; align-items: center; }
.dashboard-calendar-filter-caret svg { width: 12px; height: 12px; }
/* Narrow screens: the header now carries nav + view toggle + today + filter —
   let it wrap instead of clipping controls. */
.dashboard-calendar-fullscreen-inner .dashboard-modal-header { flex-wrap: wrap; row-gap: 8px; }
/* Busy days scroll inside their capped cell. Standard scrollbar properties only
   (theme hijacks ::-webkit-scrollbar pseudo-elements on some setups). */
.dashboard-calendar-fullscreen-body .dashboard-calendar.is-full .dashboard-calendar-cell-list {
	flex: 1;
	gap: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 30%, transparent) transparent;
}

/* Calendar section: the full-screen calendar embedded as a board section.
   Mirrors the modal's inner layout (wrap-capable nav row + scrollable grid
   body); grid internals reuse the global calendar/calgrid styles above. */
.dashboard-section-row[data-section-type="calendar"] {
	max-height: 800px;
}
.dashboard-calendar-section {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.dashboard-calendar-section-nav {
	flex-wrap: wrap;
	row-gap: 8px;
	margin-bottom: 8px;
}
.dashboard-calendar-section-nav .dashboard-calendar-nav-label {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashboard-calendar-section-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
}
/* Section month view: shorter day cells than the full-screen modal. The modal
   is 88vh tall, so its clamp(104px, 16vh, 200px) rows fit; the section caps at
   800px, where those rows push the grid deep into scrolling. A tighter clamp
   lets the whole month fit inside the section. */
.dashboard-calendar-section-body .dashboard-calendar.is-full .dashboard-calendar-cell {
	height: clamp(64px, 9vh, 120px);
}
/* Busy days scroll inside their capped cell (same recipe as the modal). */
.dashboard-calendar-section-body .dashboard-calendar.is-full .dashboard-calendar-cell-list {
	flex: 1;
	gap: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 30%, transparent) transparent;
}

/* Prompt dialog (text-input variant of the confirm dialog) */
.dashboard-prompt-input {
	width: 100%;
	margin: 0 0 20px;
	padding: 8px 12px;
	font-size: 0.95em;
	color: var(--text-normal);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}
.dashboard-prompt-input:focus {
	outline: none;
	border-color: var(--interactive-accent);
}
.dashboard-confirm-confirm {
	padding: 7px 20px;
	border-radius: 8px;
	font-size: 0.9em;
	cursor: pointer;
	background: var(--interactive-accent);
	border: 1px solid transparent;
	color: var(--text-on-accent);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dashboard-confirm-confirm:hover {
	opacity: 0.85;
}

/* ===== Weread section ===== */
.dashboard-weread-widgets {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dashboard-weread-widget {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-weread-widget-title {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

.dashboard-weread-pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-weread-pager-btn:hover:not(:disabled) {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-pager-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.dashboard-weread-pager-info {
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-cfg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.dashboard-weread-cfg-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 8px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
}

.dashboard-weread-cfg-main {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	flex-wrap: wrap;
}

.dashboard-weread-cfg-title {
	flex: 1;
	min-width: 100px;
}

.dashboard-weread-cfg-filter {
	width: auto;
	min-width: 90px;
}

.dashboard-weread-cfg-ops {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.dashboard-weread-cfg-op {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	border: none;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-weread-cfg-op:hover:not(:disabled) {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-cfg-op:disabled {
	opacity: 0.35;
	cursor: default;
}

.dashboard-weread-cfg-add {
	margin-top: 4px;
}

.dashboard-weread-content {
	min-height: 60px;
}

.dashboard-weread-groups {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dashboard-weread-group {
	--weread-group-accent: var(--db-accent, var(--interactive-accent));
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.dashboard-weread-group--finished,
.dashboard-weread-group--ideas {
	--weread-group-accent: var(--color-green, #2f9e73);
}

.dashboard-weread-group--notStarted,
.dashboard-weread-group--never,
.dashboard-weread-group--none {
	--weread-group-accent: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-group--audio,
.dashboard-weread-group--recent30 {
	--weread-group-accent: var(--color-orange, #d38345);
}

.dashboard-weread-group--article,
.dashboard-weread-group--highlights {
	--weread-group-accent: var(--color-cyan, #318f9f);
}

.dashboard-weread-group-head {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 5px 9px 5px 7px;
	border-left: 3px solid var(--weread-group-accent);
	border-radius: 0 var(--db-radius-sm, 6px) var(--db-radius-sm, 6px) 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--weread-group-accent) 12%, transparent), transparent 78%);
}

.dashboard-weread-group-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	color: var(--weread-group-accent);
	background: color-mix(in srgb, var(--weread-group-accent) 12%, transparent);
}

.dashboard-weread-group-icon svg {
	width: 14px;
	height: 14px;
}

.dashboard-weread-group-name {
	font-size: 0.78em;
	font-weight: 650;
	letter-spacing: 0.01em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-weread-group-count {
	min-width: 22px;
	padding: 1px 7px;
	border: 1px solid color-mix(in srgb, var(--weread-group-accent) 28%, transparent);
	border-radius: 999px;
	font-size: 0.64em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--weread-group-accent);
}

.dashboard-heatmap-section-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dashboard-weread-hint {
	padding: 20px 8px;
	text-align: center;
}

.dashboard-weread-hint-title {
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
	margin-bottom: 4px;
}

.dashboard-weread-hint-desc {
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}

.dashboard-weread-book {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-weread-book-cover {
	width: 100%;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	border-radius: var(--db-radius-sm, 6px);
	background-color: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
}

.dashboard-weread-book-cover--placeholder {
	background-image: none;
	display: flex;
}

.dashboard-weread-book-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-weread-book-title {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dashboard-weread-book-author {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-weread-book-pct {
	font-size: 0.65em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-book-meta,
.dashboard-weread-progress-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
}

.dashboard-weread-book-kind,
.dashboard-weread-book-notes,
.dashboard-weread-book-state {
	font-size: 0.61em;
	line-height: 1.35;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-book-kind {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
}

.dashboard-weread-book-notes {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-weread-progress {
	height: 3px;
	border-radius: 2px;
	background: var(--db-bg-btn, rgba(255, 255, 255, 0.10));
	overflow: hidden;
	margin-top: 2px;
}

.dashboard-weread-progress-fill {
	height: 100%;
	background: var(--db-accent, var(--interactive-accent));
	border-radius: 2px;
}

/* Integrated stat panel, three columns: shelf-distribution donut (tinted
   left), read-days heatmap (middle), time + daily average stacked (right).
   One card, internal hairlines only. Donut/heatmap colors follow the shelf
   groups and banner-heatmap conventions. */
.dashboard-weread-stat-panel {
	display: grid;
	grid-template-columns: minmax(172px, 0.78fr) minmax(0, 1.75fr) minmax(128px, 0.62fr);
	align-items: stretch;
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	overflow: hidden;
	min-width: 0;
}

.dashboard-weread-stat-panel-shelf {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 12px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, var(--db-bg-card, rgba(255, 255, 255, 0.06)));
	border-right: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
}

.dashboard-weread-stat-panel-mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 14px;
	min-width: 0;
	border-right: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
}

/* Rolling 365-day heatmap (banner-heatmap visual language): column-major
   weeks — 7 rows, one column per week; column count comes from inline style.
   Cells are square via aspect-ratio and shrink with the zone width. */
.dashboard-weread-heatmap {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(7, auto);
	gap: 2px;
	width: 100%;
	align-content: stretch;
}

.dashboard-weread-heatmap-cell {
	aspect-ratio: 1;
	border-radius: 2px;
	min-width: 0;
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.12));
}

.dashboard-weread-heatmap-cell--l1 { background: var(--db-accent, var(--interactive-accent)); opacity: 0.35; }
.dashboard-weread-heatmap-cell--l2 { background: var(--db-accent, var(--interactive-accent)); opacity: 0.55; }
.dashboard-weread-heatmap-cell--l3 { background: var(--db-accent, var(--interactive-accent)); opacity: 0.78; }
.dashboard-weread-heatmap-cell--l4 { background: var(--db-accent, var(--interactive-accent)); opacity: 1; }

.dashboard-weread-heatmap-cell--today {
	box-shadow: 0 0 0 1.5px var(--db-text, var(--text-normal));
}

/* Alignment blanks before the window starts — invisible placeholders. */
.dashboard-weread-heatmap-cell--blank {
	background: transparent;
}

.dashboard-weread-stat-panel-right {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dashboard-weread-stat-panel-cell {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 10px;
	min-width: 0;
}

.dashboard-weread-stat-panel-cell + .dashboard-weread-stat-panel-cell {
	border-top: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
}

.dashboard-weread-donut-wrap {
	position: relative;
	width: 108px;
	height: 108px;
	flex-shrink: 0;
}

.dashboard-weread-donut-svg {
	display: block;
}

.dashboard-weread-donut-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	pointer-events: none;
}

.dashboard-weread-donut-total {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--db-text, var(--text-normal));
	line-height: 1.1;
}

.dashboard-weread-donut-unit {
	font-size: 0.6em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-donut-seg--finished {
	stroke: var(--color-green, #2f9e73);
}

.dashboard-weread-donut-seg--reading {
	stroke: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-donut-seg--notStarted {
	stroke: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-legend {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	max-width: 138px;
}

.dashboard-weread-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.dashboard-weread-legend-dot--finished,
.dashboard-weread-legend-dot--reading,
.dashboard-weread-legend-dot--notStarted {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dashboard-weread-legend-dot--finished {
	background: var(--color-green, #2f9e73);
}

.dashboard-weread-legend-dot--reading {
	background: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-legend-dot--notStarted {
	background: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-legend-label {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-weread-legend-count {
	font-size: 0.68em;
	font-weight: 700;
	color: var(--db-text, var(--text-normal));
	font-variant-numeric: tabular-nums;
}

.dashboard-weread-kpi-value-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 0;
}

.dashboard-weread-kpi-caption-extra {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
}

.dashboard-weread-stat-value {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-stat-label {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	text-align: center;
}

/* Narrow panes/phones: the three columns stack vertically; the right zone's
   two cells pair up horizontally to save height. Container query tracks the
   PANE width (split panes, sidebars) — a plain @media never fires there; the
   @media copy below is the old-engine fallback. */
@container (max-width: 520px) {
	.dashboard-weread-stat-panel {
		grid-template-columns: 1fr;
	}

	.dashboard-weread-stat-panel-shelf,
	.dashboard-weread-stat-panel-mid {
		border-right: none;
		border-bottom: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	}

	.dashboard-weread-stat-panel-right {
		flex-direction: row;
	}

	.dashboard-weread-stat-panel-cell + .dashboard-weread-stat-panel-cell {
		border-top: none;
		border-left: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	}
}

@media (max-width: 520px) {
	.dashboard-weread-stat-panel {
		grid-template-columns: 1fr;
	}

	.dashboard-weread-stat-panel-shelf,
	.dashboard-weread-stat-panel-mid {
		border-right: none;
		border-bottom: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	}

	.dashboard-weread-stat-panel-right {
		flex-direction: row;
	}

	.dashboard-weread-stat-panel-cell + .dashboard-weread-stat-panel-cell {
		border-top: none;
		border-left: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	}
}

/* ===== Reading stats widget (period toggle + 6 KPIs + trend + top/prefer) ===== */
.dashboard-weread-stats-wrap {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	/* Size container so the KPI bento can re-flow on the PANE's width (split
	   panes, sidebars), not the viewport — a plain @media never fires there.
	   Old engines without container queries keep the @media fallback below. */
	container-type: inline-size;
}

.dashboard-weread-stats-toggle {
	display: flex;
	gap: 2px;
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.12));
	border-radius: 8px;
	padding: 2px;
	width: fit-content;
	/* Right-aligned: the period switch sits at the row's end, out of the
	   content's reading line. */
	margin-left: auto;
}

.dashboard-weread-stats-toggle-btn {
	border: none;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.72em;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	box-shadow: none;
}

.dashboard-weread-stats-toggle-btn:hover {
	color: var(--db-text, var(--text-normal));
}

.dashboard-weread-stats-toggle-btn.active {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.10));
	color: var(--db-text, var(--text-normal));
	font-weight: 600;
}

.dashboard-weread-stats-body {
	/* Blocks flow two per row (双排); the KPI overview spans the full row
	   (six cards want the width) and the loading/error hint centers itself
	   across both columns. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	min-width: 0;
}

.dashboard-weread-stats-body > .dashboard-weread-hint {
	grid-column: 1 / -1;
}

.dashboard-weread-stats-block {
	min-width: 0;
}

.dashboard-weread-stats-block--wide {
	grid-column: 1 / -1;
}

/* Phones: one block per row — half-width charts and lists get too cramped. */
@media (max-width: 640px) {
	.dashboard-weread-stats-body {
		grid-template-columns: 1fr;
	}
}

.dashboard-weread-stat-delta {
	font-size: 0.62em;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 4px;
	margin-top: 2px;
}

.dashboard-weread-stat-delta--up {
	color: #2ecc71;
	background: rgba(46, 204, 113, 0.12);
}

.dashboard-weread-stat-delta--down {
	color: #e74c3c;
	background: rgba(231, 76, 60, 0.12);
}

.dashboard-weread-stats-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.dashboard-weread-stats-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.dashboard-weread-stats-section-title {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-weread-streak {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.dashboard-weread-trend-svg {
	display: block;
	width: 100%;
	height: auto;
}

.dashboard-weread-trend-bar {
	fill: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-trend-tick {
	font-size: 9px;
	fill: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-topread {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-weread-topread-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
}

.dashboard-weread-topread-meta {
	min-width: 0;
}

.dashboard-weread-topread-title {
	font-size: 0.74em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-weread-topread-author {
	font-size: 0.64em;
	color: var(--db-text-muted, var(--text-muted));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-weread-topread-time {
	font-size: 0.68em;
	color: var(--db-accent, var(--interactive-accent));
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.dashboard-weread-prefercat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-weread-prefercat-row {
	display: grid;
	grid-template-columns: minmax(56px, 88px) 1fr auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.dashboard-weread-prefercat-name {
	font-size: 0.7em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-weread-prefercat-bar-wrap {
	height: 6px;
	border-radius: 3px;
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.12));
	overflow: hidden;
}

.dashboard-weread-prefercat-bar {
	height: 100%;
	border-radius: 3px;
	background: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-prefercat-val {
	font-size: 0.64em;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.dashboard-weread-notebooks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-weread-notebook {
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
	overflow: hidden;
}

.dashboard-weread-notebook-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
}

.dashboard-weread-notebook-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	margin-right: auto;
}

.dashboard-weread-notebook-count {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-weread-notebook-chevron {
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.8em;
}

.dashboard-weread-notebook-detail {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 6px 10px 10px;
}

.dashboard-weread-notebook-detail--open {
	display: flex;
}

.dashboard-weread-highlight {
	font-size: 0.75em;
	line-height: 1.5;
	color: var(--db-text, var(--text-normal));
	border-left: 2px solid var(--db-accent, var(--interactive-accent));
	padding: 2px 0 2px 8px;
}

.dashboard-weread-option {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: var(--db-radius-md, 10px);
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.dashboard-weread-option:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-option.active {
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

.dashboard-weread-option-label {
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
}

/* ===== TickTick section ===== */
.dashboard-ticktick-widgets,
.dashboard-ticktick-content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dashboard-ticktick-widgets {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.dashboard-ticktick-content {
	gap: 0;
	min-height: 40px;
}

.dashboard-ticktick-widget {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-ticktick-widget-title {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-hint {
	padding: 14px 8px;
	text-align: center;
}

.dashboard-ticktick-hint-title {
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-ticktick-hint-desc {
	font-size: 0.72em;
	color: var(--db-text-muted, var(--text-muted));
	margin-top: 4px;
}

.dashboard-ticktick-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dashboard-ticktick-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 6px 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
}

.dashboard-ticktick-prio {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 7px;
	flex-shrink: 0;
}

.dashboard-ticktick-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	flex-shrink: 0;
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-ticktick-check svg {
	width: 16px;
	height: 16px;
}

.dashboard-ticktick-check--done {
	color: #10b981;
}

.dashboard-ticktick-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.dashboard-ticktick-title-line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.dashboard-ticktick-title {
	font-size: 0.82em;
	line-height: 1.3;
	color: var(--db-text, var(--text-normal));
}

.dashboard-ticktick-title--done {
	text-decoration: line-through;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-badge {
	font-size: 0.62em;
	padding: 1px 6px;
	border-radius: 8px;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-meta {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 6px;
}

.dashboard-ticktick-group-head {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-ticktick-proj-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dashboard-ticktick-group-name {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-ticktick-group-count {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-cfg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.dashboard-ticktick-cfg-row {
	/* shares .dashboard-weread-cfg-row styling */
}

.dashboard-weread-book-cat {
	font-size: 0.65em;
	color: var(--db-text-muted, var(--text-muted));
	margin-top: 1px;
}

.dashboard-ticktick-login-status {
	min-height: 18px;
	margin: 6px 0;
}

.dashboard-ticktick-login-info {
	font-size: 0.78em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-ticktick-login-error {
	font-size: 0.78em;
	color: var(--db-danger, #ef4444);
}

.dashboard-ticktick-manual {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.08));
}

.dashboard-weread-notebook-import {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	background-image: none;
	box-shadow: none;
	border: none;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-weread-notebook-import:hover:not(:disabled) {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-notebook-import:disabled {
	opacity: 0.5;
	cursor: default;
}

.dashboard-weread-cfg-filter-group {
	width: 100%;
}

.dashboard-weread-cfg-grouping {
	display: grid;
	grid-template-columns: minmax(90px, auto) minmax(140px, 1fr);
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}

.dashboard-weread-cfg-grouping .dashboard-weread-cfg-filter-label {
	margin-bottom: 0;
}

.dashboard-weread-cfg-filter-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px 14px;
	width: 100%;
	margin-top: 4px;
	padding: 10px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-md, 10px);
	background: color-mix(in srgb, var(--db-bg-card, var(--background-secondary)) 82%, transparent);
}

.dashboard-weread-cfg-filter-panel-title {
	grid-column: 1 / -1;
	font-size: 0.72em;
	font-weight: 650;
	color: var(--db-text, var(--text-normal));
}

.dashboard-weread-cfg-filter-label {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 4px;
}

.dashboard-weread-cfg-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 10px;
	font-size: 0.72em;
	cursor: pointer;
	background: var(--db-bg-btn, rgba(139, 92, 246, 0.10));
	color: var(--db-text-muted, var(--text-muted));
	border: 1px solid transparent;
	transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.dashboard-weread-cfg-chip:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-cfg-chip.active {
	background: var(--db-accent, var(--interactive-accent));
	color: #fff;
	border-color: var(--db-accent, var(--interactive-accent));
}

/* Stats-block editor rows: drag handle + checkbox + label, one block each. */
.dashboard-weread-cfg-stats-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 6px;
}

.dashboard-weread-cfg-stats-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	position: relative;
}

.dashboard-weread-cfg-stats-row--hidden {
	opacity: 0.55;
}

.dashboard-weread-cfg-stats-row--dragging {
	opacity: 0.4;
}

.dashboard-weread-cfg-stats-row--drop-before::before,
.dashboard-weread-cfg-stats-row--drop-after::after {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	height: 2px;
	border-radius: 1px;
	background: var(--db-accent, var(--interactive-accent));
}

.dashboard-weread-cfg-stats-row--drop-before::before {
	top: -2px;
}

.dashboard-weread-cfg-stats-row--drop-after::after {
	bottom: -2px;
}

.dashboard-weread-cfg-stats-handle {
	display: inline-flex;
	align-items: center;
	color: var(--db-text-muted, var(--text-muted));
	cursor: grab;
	flex-shrink: 0;
}

.dashboard-weread-cfg-stats-handle:active {
	cursor: grabbing;
}

.dashboard-weread-cfg-stats-handle--placeholder {
	visibility: hidden;
	cursor: default;
}

.dashboard-weread-cfg-stats-check {
	margin: 0;
	flex-shrink: 0;
}

.dashboard-weread-cfg-stats-label {
	font-size: 0.8em;
	color: var(--db-text, var(--text-normal));
}

@media (max-width: 600px) {
	.dashboard-weread-cfg-filter-panel {
		grid-template-columns: 1fr;
	}

	.dashboard-weread-cfg-grouping {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* Heatmap year grid: month labels on top, week columns below. */
.dashboard-heatmap-grid .dashboard-sidebar-heatmap-cell {
	border-radius: 3px;
}

.dashboard-heatmap-year {
	width: 100%;
	margin-top: 4px;
	padding-left: 20px;
	--hm-cell: 13px;
}

.dashboard-heatmap-months-top {
	display: grid;
	height: 16px;
	margin-bottom: 4px;
	gap: 3px;
	padding-left: 20px;
	width: 100%;
	justify-content: flex-start;
}

.dashboard-heatmap-month-label-top {
	font-size: 0.6em;
	line-height: 16px;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	overflow: visible;
}

/* GitHub-style matrix: cells fill down a 7-row column (Mon→Sun) then the next
   week column. Layout lives in CSS (not setCssProps) so grid-auto-flow reliably
   applies; cell size via the --hm-cell variable. */
.dashboard-heatmap-grid {
	display: grid;
	grid-template-rows: repeat(7, var(--hm-cell, 13px));
	grid-auto-flow: column;
	grid-auto-columns: var(--hm-cell, 13px);
	gap: 3px;
	justify-content: flex-start;
	width: 100%;
	overflow-x: auto;
	padding-bottom: 2px;
}

/* TickTick interactivity */
.dashboard-ticktick-row {
	transition: background 0.1s ease;
}

.dashboard-ticktick-check {
	cursor: pointer;
}

.dashboard-ticktick-list--reorder .dashboard-ticktick-row {
	cursor: grab;
}

.dashboard-ticktick-list--reorder .dashboard-ticktick-row:active {
	cursor: grabbing;
}

.dashboard-ticktick-row--dragging {
	opacity: 0.4;
}

.dashboard-ticktick-edit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	opacity: 0;
	transition: opacity 0.12s ease;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-ticktick-row:hover .dashboard-ticktick-edit-btn {
	opacity: 0.8;
}

.dashboard-ticktick-edit-btn:hover {
	color: var(--db-accent, var(--interactive-accent));
	opacity: 1 !important;
}

.dashboard-ticktick-edit-btn svg {
	width: 14px;
	height: 14px;
}

.dashboard-ticktick-rename-input {
	width: 100%;
	font-size: 0.82em;
	font-family: inherit;
	padding: 1px 4px;
	background: var(--db-bg-input, var(--background-modifier-form-field));
	border: 1px solid var(--db-accent, var(--interactive-accent));
	border-radius: 4px;
	color: var(--db-text, var(--text-normal));
}

/* Modal named inputs (e.g. new-section name) must show a visible border.
   Overrides .dashboard-task-input's !important borderless style via higher specificity. */
.dashboard-modal .dashboard-section-name-input {
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.22)) !important;
	background: var(--db-bg-input, var(--background-modifier-form-field)) !important;
	box-shadow: none !important;
}

.dashboard-modal .dashboard-section-name-input:focus {
	border-color: var(--db-accent, var(--interactive-accent)) !important;
}

/* TickTick projects: each list/folder as a card */
.dashboard-ticktick-proj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

.dashboard-ticktick-proj-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-top: 3px solid var(--proj-color, var(--db-accent, #6366f1));
	min-height: 0;
}

.dashboard-ticktick-proj-card-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}

.dashboard-ticktick-proj-card .dashboard-ticktick-list {
	max-height: 360px;
	overflow-y: auto;
}

.dashboard-ticktick-readonly-hint {
	padding: 6px 10px;
	margin-bottom: 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.35);
	color: #f59e0b;
	font-size: 0.72em;
	line-height: 1.4;
}

/* Heatmap stats: above the grid, left-aligned */
.dashboard-heatmap-section-body .dashboard-sidebar-heatmap-stats {
	justify-content: flex-start;
	margin-top: 4px;
	margin-bottom: 10px;
}

/* Add-section modal: extra gap between name input and footer buttons */
.dashboard-add-section-name-row {
	margin-bottom: 18px;
}

/* Section header view-toggle active state (TickTick today/lists) */
.dashboard-section-header-actions .dashboard-section-add-btn.active {
	color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

/* TickTick lists view: horizontal scroll row (like todo section cards) */
.dashboard-ticktick-proj-row {
	display: flex;
	gap: 10px;
	flex: 1;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-ticktick-proj-row:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent) 18%, transparent) transparent;
}

.dashboard-ticktick-proj-row .dashboard-ticktick-proj-card {
	flex: 0 0 280px;
	min-width: 280px;
	max-width: 400px;
	position: relative;
}

.dashboard-ticktick-card-resize {
	position: absolute;
	top: 4px;
	right: 0;
	bottom: 4px;
	width: 6px;
	cursor: ew-resize;
	z-index: 10;
	border-right: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.dashboard-ticktick-proj-card:hover .dashboard-ticktick-card-resize,
.dashboard-ticktick-card--resizing .dashboard-ticktick-card-resize {
	border-right-color: var(--db-border-card, rgba(255, 255, 255, 0.12));
}

.dashboard-ticktick-card-resize:hover {
	border-right-color: var(--db-text-muted, var(--text-muted)) !important;
}

.dashboard-ticktick-card--resizing {
	user-select: none;
}

/* Heatmap: grid left + stats right, horizontal layout */
.dashboard-heatmap-layout {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 100%;
}

.dashboard-heatmap-layout > .dashboard-heatmap-year {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}

.dashboard-heatmap-stats-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	white-space: nowrap;
}

.dashboard-heatmap-stat-row {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-heatmap-stat-icon svg {
	width: 14px;
	height: 14px;
	color: var(--db-accent, var(--interactive-accent));
}

/* Heatmap stats popup (floating, from header button) */
.dashboard-heatmap-stats-popup {
	width: 160px;
	padding: 10px 12px;
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.12));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dashboard-heatmap-stats-popup-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 0.82em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-heatmap-stats-popup-row + .dashboard-heatmap-stats-popup-row {
	border-top: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.06));
}

.dashboard-heatmap-stats-popup-icon svg {
	width: 15px;
	height: 15px;
	color: var(--db-accent, var(--interactive-accent));
}

/* ===== Appearance Studio (Theme Studio modal) ===== */
.dashboard-theme-studio {
	max-width: 520px;
}
.dashboard-theme-studio-hint {
	margin: 4px 0 12px;
	font-size: 0.82em;
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.85;
}
.dashboard-theme-studio-section {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
}
.dashboard-theme-studio-section:last-child {
	border-bottom: none;
}
.dashboard-theme-studio-section h3 {
	margin: 0 0 4px;
	font-size: 1em;
}
.dashboard-theme-studio-desc {
	margin: 0 0 10px;
	font-size: 0.8em;
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.85;
}
.dashboard-theme-studio-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.dashboard-theme-studio-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--db-border, var(--background-modifier-border));
	transition: transform 0.12s ease;
}
.dashboard-theme-studio-swatch:hover {
	transform: scale(1.12);
}
.dashboard-theme-studio-color-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}
.dashboard-theme-studio-color-row,
.dashboard-theme-studio-slider-row,
.dashboard-theme-studio-size-row,
.dashboard-theme-studio-fontscale-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Text-size segmented control (Small / Medium / Large). */
.dashboard-theme-studio-fontscale {
	display: inline-flex;
	gap: 4px;
}
.dashboard-theme-studio-fontscale-btn {
	padding: 4px 12px;
	border: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 999px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.82em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dashboard-theme-studio-fontscale-btn:hover {
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.05));
}
.dashboard-theme-studio-fontscale-btn.active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 14%, transparent);
}
.dashboard-theme-studio-color-label {
	flex: 1;
	font-size: 0.88em;
}

/* Color rows carry an extra mode dropdown (follow theme / light / dark /
   custom); let the controls wrap under the label when the compact modal
   gets too narrow instead of overflowing. */
.dashboard-theme-studio-color-row {
	flex-wrap: wrap;
}

/* Mode dropdown per color row: same recipe as .dashboard-theme-studio-size —
   auto width so the closed state never clips, explicit height + line-height +
   appearance:menulist so raw <select> renders fully under Obsidian/Electron —
   but sized to the picker/slider row (28px). */
.dashboard-theme-studio-color-mode {
	flex: 0 0 auto;
	width: auto;
	min-width: 84px;
	height: 28px;
	padding: 0 8px;
	line-height: 26px;
	box-sizing: border-box;
	font-size: 0.82em;
	-webkit-appearance: menulist;
	appearance: menulist;
}

/* Follow-theme / light / dark modes drive the value, so the picker + alpha
   slider sit disabled-but-visible as a preview of the resulting color. */
.dashboard-theme-studio-color-row input:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Alpha slider rides between the swatch and the clear button: slim, accent-
   tinted, with a small fixed span so eight rows align. */
.dashboard-theme-studio-alpha-slider {
	width: 90px;
	height: 4px;
	appearance: none;
	-webkit-appearance: none;
	background: color-mix(in srgb, var(--db-text, var(--text-normal)) 18%, transparent);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-theme-studio-alpha-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--db-accent, var(--interactive-accent));
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dashboard-modal-color-input {
	width: 38px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}
.dashboard-theme-studio-color-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-theme-studio-color-clear svg {
	width: 14px;
	height: 14px;
}
.dashboard-theme-studio-reset {
	font-size: 0.82em;
}
.dashboard-theme-studio-image-row {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.dashboard-theme-studio-image-input {
	flex: 1;
}
.dashboard-theme-studio-browse,
.dashboard-theme-studio-image-clear {
	white-space: nowrap;
}
.dashboard-theme-studio-slider {
	flex: 2;
}
.dashboard-theme-studio-size {
	/* Auto-size to the widest option so closed-state text isn't clipped
	   (overrides .dashboard-modal-input width:100%). Explicit height +
	   line-height + appearance:menulist keep the selected value fully
	   visible (raw <select> under Obsidian/Electron clips vertically without them). */
	flex: 0 0 auto;
	width: auto;
	min-width: 150px;
	height: 36px;
	padding: 0 10px;
	line-height: 36px;
	box-sizing: border-box;
	-webkit-appearance: menulist;
	appearance: menulist;
}
.dashboard-theme-studio-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.dashboard-theme-studio-header h2 {
	margin: 0;
}
.dashboard-theme-studio-resetall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82em;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-theme-studio-resetall-icon svg {
	width: 13px;
	height: 13px;
}
.dashboard-theme-studio-slider-hint {
	font-size: 0.72em;
	color: var(--db-text-faint, var(--text-faint));
	font-style: italic;
	min-width: 64px;
}

/* ===== Appearance Studio — my themes (saved snapshots) ===== */
.dashboard-theme-studio-mythemes-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-theme-studio-mytheme-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
	border: 1px solid var(--db-border, var(--background-modifier-border));
}

.dashboard-theme-studio-mytheme-item.is-active {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-theme-studio-mytheme-name {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
}

.dashboard-theme-studio-mytheme-base {
	font-size: 0.78em;
	color: var(--db-text-faint, var(--text-faint));
	text-transform: capitalize;
}

.dashboard-theme-studio-mytheme-apply {
	flex-shrink: 0;
	font-size: 0.75em;
	padding: 3px 10px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-btn, var(--background-modifier-border));
	background: var(--db-bg-btn, transparent);
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	font-family: var(--db-font, var(--font-interface));
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dashboard-theme-studio-mytheme-apply:hover {
	background: var(--db-bg-btn-hover, rgba(128, 128, 128, 0.12));
	color: var(--db-text, var(--text-normal));
}

.dashboard-theme-studio-mytheme-item.is-active .dashboard-theme-studio-mytheme-apply {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-theme-studio-mytheme-delete {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-faint, var(--text-faint));
	cursor: pointer;
	border-radius: var(--db-radius-sm, 6px);
	transition: color 0.15s ease, background 0.15s ease;
}

.dashboard-theme-studio-mytheme-delete:hover {
	color: var(--db-danger, #ef4444) !important;
	background: var(--db-bg-hover-strong, rgba(128, 128, 128, 0.16)) !important;
}

.dashboard-theme-studio-mytheme-delete svg {
	width: 13px;
	height: 13px;
}

/* Footer's save-as-theme sits left of Done (margin-right auto on the
   flex-end footer keeps the confirm button right-aligned). */
.dashboard-theme-studio-savetheme {
	margin-right: auto;
}

/* ===== Quick Notes region — single-line accent navbar (masthead strip) =====
   One equal-height bar split into two zones, both vertically centered:
   · left  — .dashboard-quicknote-nav      : scrollable chip group
   · right — .dashboard-quicknote-actions   : capture pill + config cog
   Border/background use theme tokens (auto dark/light); no hardcoded gray.
   Every interactive control shares one radius (--db-radius-sm) and one
   accent-tinted hover, so chips and the capture pill read as one family. */
.dashboard-quicknote {
	display: flex;
	/* Vertically centered at rest so the capture pill sits mid-bar beside the
	   chips (on phones the bar's em-based min-height outgrows the fixed 26px
	   pill, and top-anchoring left the pill floating at the bar's upper edge).
	   While the capture field auto-grows past one line, the JS-toggled
	   --capture-expanded class re-anchors to flex-start: the box then extends
	   DOWNWARD only and the chips row stays put, instead of the centered
	   layout pushing everything up as the box grows. */
	align-items: center;
	gap: 10px;
	padding: 5px 8px;
	min-height: calc(1.6em + 18px);
	/* No extra margin: the kanban's --db-kanban-gap (10px) is itself the bar-to-
	   first-section distance, and it deliberately equals the sidebar's
	   inter-widget gap so the first section top aligns with the first sidebar
	   widget top. (Was margin-bottom: -6px to shave the old 16px gap down to
	   10px — if the kanban gap ever changes again, revisit this comment.) */
	box-sizing: border-box;
	flex: 0 0 100%;
	background: color-mix(in srgb, var(--db-accent) 6%, var(--db-bg-section));
	border: 1px solid color-mix(in srgb, var(--db-accent) 14%, var(--db-border-section));
	border-radius: var(--db-radius-md);
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
}
/* Auto-grow state (mirrored from the capture field by resize()): top-anchor
   so the growing box extends downward and the first line keeps its place. */
.dashboard-quicknote--capture-expanded {
	align-items: flex-start;
}
/* Size container for the capture field's cqw widths: they must track the
   PANE (this bar's width — split panes, sidebars, tablets), not the viewport
   that vw tracks. inline-size only, so the auto-growing block axis still
   depends on content. Old engines without container queries simply keep the
   vw fallback row below. */
.dashboard-quicknote {
	container-type: inline-size;
}
/* Left zone: chip group — fills remaining width and scrolls when crowded.
   basis 0 + a 104px floor: the chips never fully vanish, and when the bar is
   squeezed it is the capture field that yields first (see the chain below). */
.dashboard-quicknote-nav {
	flex: 1 1 0;
	min-width: 104px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	overflow-x: auto;
	/* Scrollbar mirrors the .dashboard-section-cards recipe (~line 8076):
	   standard props take over on Chromium 121+, which both renders the slim
	   native pill AND neutralizes theme-level ::-webkit-scrollbar hijacks
	   (e.g. Border) — those rules simply stop applying to this element.
	   ::-webkit rules below are the old-engine fallback, same as sections.
	   Invisible at rest, accent-tinted on hover. */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.dashboard-quicknote-nav:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent) 18%, transparent) transparent;
}
.dashboard-quicknote-nav::-webkit-scrollbar {
	width: 0;
	height: 4px;
}
.dashboard-quicknote-nav::-webkit-scrollbar-track {
	background: transparent;
}
.dashboard-quicknote-nav::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
	transition: background 0.2s ease;
}
.dashboard-quicknote-nav:hover::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 18%, transparent);
}
.dashboard-quicknote-nav::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 30%, transparent);
}
.dashboard-quicknote-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 1px 4px;
	font-size: 0.85em;
	color: var(--db-text-muted) !important;
	white-space: nowrap;
}
.dashboard-quicknote-empty-btn {
	font-size: 0.82em;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--db-accent) 14%, transparent) !important;
	border-color: color-mix(in srgb, var(--db-accent) 30%, transparent) !important;
	color: var(--db-text) !important;
}
.dashboard-quicknote-empty-btn:hover { background: color-mix(in srgb, var(--db-accent) 24%, transparent) !important; }
.dashboard-quicknote-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	font-size: 0.85em;
	white-space: nowrap;
	border: none;
	background: transparent !important;
	box-shadow: none !important;
	/* !important: chips are <button>s, and Obsidian's button color would
	   otherwise win over the theme token (cards work only because they're
	   <div>s that inherit). Matches the token the readable card text uses. */
	color: var(--db-text) !important;
	cursor: pointer;
	transition: color 0.15s ease;
}
.dashboard-quicknote-chip:hover { color: var(--db-accent) !important; }
/* Flat text-nav look: a thin separator before every chip after the first.
   --db-text-muted is always opaque, so the line stays visible in every theme. */
.dashboard-quicknote-chip + .dashboard-quicknote-chip::before {
	content: "";
	width: 1px;
	height: 13px;
	background: color-mix(in srgb, var(--db-text-muted) 30%, transparent);
}
.dashboard-quicknote-icon { display: inline-flex; flex-shrink: 0; color: var(--db-text-muted) !important; transition: color 0.15s ease; }
.dashboard-quicknote-icon svg { width: 13px; height: 13px; }
.dashboard-quicknote-chip:hover .dashboard-quicknote-icon { color: var(--db-accent) !important; }
.dashboard-quicknote-today { color: var(--db-accent) !important; font-weight: 600; }
.dashboard-quicknote-today .dashboard-quicknote-icon { color: var(--db-accent) !important; }
.dashboard-quicknote-pin .dashboard-quicknote-icon svg { color: var(--db-text-muted) !important; }

/* Right zone: groups the capture field and the config cog. Top-anchored so
   the cog stays beside the FIRST line when the capture field grows tall.
   Shrinkable (was flex-shrink: 0): under squeeze this zone yields before the
   chips' 104px floor, via the chain actions → capture → input. */
.dashboard-quicknote-actions {
	flex-shrink: 1;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}
/* Cog (22px) aligns with the 26px single-line pill; margin keeps it centered
   against the first line instead of hugging the row's top edge. */
.dashboard-quicknote-cog {
	margin-top: 2px;
}
/* Capture field — no wrapper chrome: the pencil sits *inside* the input
   (absolutely positioned over its left padding), so the field is one box.
   flex chain: won't grow past its content, but yields (down to the input's
   26px pencil-only floor) when the bar is narrower than everything at rest. */
.dashboard-quicknote-capture {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}
.dashboard-quicknote-capture-icon {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	pointer-events: none;
	color: var(--db-text-muted) !important;
	transition: color 0.15s ease, top 0.18s ease, transform 0.18s ease;
}
.dashboard-quicknote-capture-icon svg { width: 13px; height: 13px; display: block; }
.dashboard-quicknote-capture:focus-within .dashboard-quicknote-capture-icon { color: var(--db-accent) !important; }
/* When the field grows past one line, pin the pencil to the first line
   instead of floating mid-box; the transition above animates the move. */
.dashboard-quicknote-capture--expanded .dashboard-quicknote-capture-icon {
	top: 8px;
	transform: none;
}
.dashboard-quicknote-capture-input {
	/* Two-row width (vw fallback first, cqw override second): old engines
	   without container queries keep the viewport-relative row and behave as
	   before; modern engines size the field against the PANE (cqw resolves
	   against .dashboard-quicknote's inline size), so a tablet split pane or
	   dashboard sidebar no longer keeps a viewport-wide field starving the
	   chip zone. Full 160px from ~890px of PANE width up; 96px floor on
	   narrow panes before the flex chain below takes over. */
	width: clamp(108px, 18vw, 160px);
	width: clamp(96px, 18cqw, 160px);
	/* Extreme-squeeze floor: flex shrink (capture box min-width: 0) can push
	   the field down to a bare 26px pencil — still tappable; focusing expands
	   it again via the :focus width below. Never shrinks to nothing. */
	min-width: 26px;
	height: 26px;
	min-height: 26px;
	max-height: 160px;
	line-height: 26px;
	resize: none;
	overflow-y: auto;
	/* !important defeats Obsidian's input[type=text] padding so the pencil keeps
	   its clearance. box-sizing keeps the 160px width padding-inclusive. */
	padding: 0 10px 0 32px !important;
	box-sizing: border-box;
	border: none;
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text) !important;
	font-size: 0.82em;
	font-family: var(--db-font, var(--font-interface));
	transition: background 0.15s ease, box-shadow 0.15s ease, height 0.18s ease, width 0.18s ease;
}
.dashboard-quicknote-capture-input:focus {
	outline: none;
	/* Widen while typing so wrapped lines stay readable; height itself is driven
	   by JS (auto-grow) and animates via the height transition above. Same
	   vw-then-cqw two-row pattern as the resting width. Cap 220px — 320 made
	   the focused field swallow the bar; it only needs room for a wrapped
	   thought, and Enter captures right away. */
	width: min(220px, 40vw);
	width: min(220px, 45cqw);
	background: color-mix(in srgb, var(--db-accent) 12%, var(--db-bg-input, rgba(255, 255, 255, 0.05)));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--db-accent) 42%, transparent);
}
/* Full-opacity muted token keeps placeholder contrast WCAG-friendly and lets
   the theme brighten it automatically in dark mode (no faint default). */
.dashboard-quicknote-capture-input::placeholder {
	color: var(--db-text-muted) !important;
	opacity: 1;
}

/* ── Search mode: results dropdown under the pill ───────────────────────
   Anchored to the pill's right edge (the bar hugs the page's right side, so
   left-anchoring could push it off-viewport); reuses the docsearch row
   classes for the items themselves. Hidden unless .is-open (results exist
   AND focus inside). */
.dashboard-quicknote-capture--search {
	position: relative;
}
.dashboard-quicknote-search-pop {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 40;
	width: min(320px, 78vw);
	max-height: 300px;
	overflow-y: auto;
	flex-direction: column;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-md);
	/* Layered SOLID surface: the card tint painted over the opaque modal
	   base. Glass themes' translucent card color alone let board text bleed
	   through the results ("文字看不清楚") — the opaque under-layer fixes it
	   while keeping the theme's tint. */
	background:
		linear-gradient(var(--db-bg-card, rgba(255, 255, 255, 0.06)), var(--db-bg-card, rgba(255, 255, 255, 0.06))),
		var(--db-bg-modal, var(--db-bg, #14161a));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}
.dashboard-quicknote-search-pop.is-open {
	display: flex;
}
.dashboard-quicknote-search-pop .dashboard-docsearch-item {
	border-radius: var(--db-radius-sm);
}
.dashboard-quicknote-search-pop .dashboard-docsearch-item.is-active,
.dashboard-quicknote-search-pop .dashboard-docsearch-item:hover {
	background: color-mix(in srgb, var(--db-accent) 12%, transparent);
}
.dashboard-quicknote-cog {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: var(--db-radius-sm);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-muted) !important;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dashboard-quicknote-cog:hover {
	opacity: 1;
	color: var(--db-accent) !important;
	background: color-mix(in srgb, var(--db-accent) 14%, transparent);
}
.dashboard-quicknote-cog svg { width: 14px; height: 14px; }

/* ── Mobile bar corrections ────────────────────────────────────────────
   Phones and tablets keep the single-row layout: crowded chips scroll
   sideways inside the nav (the base .dashboard-quicknote-nav already sets
   flex-wrap: nowrap + overflow-x: auto) instead of wrapping the bar onto
   multiple lines. The capture field's responsive width (clamp above) keeps
   the chip zone a usable share of a narrow screen, so no phone-specific
   overrides are needed anymore.

   Tablet-only reset: Obsidian's own stylesheet ships `.is-tablet
   since :not() counts its argument — which beats the chips' plain
   `padding: 3px 0` (0,1,0) and the cog's `padding: 0`, inflating every chip
   into a ~40px-wider pill that starves the row down to a couple of buttons.
   Same trap as the scroll-top / task-button fix earlier in this file:
   qualify with `button` to tie at 0,2,1 and win by source order (plugin
   styles load after app.css). Phones have no .is-tablet class and desktop
   matches neither — both stay on the base styles. */
.is-tablet button.dashboard-quicknote-chip { padding: 3px 0; }
.is-tablet button.dashboard-quicknote-cog { padding: 0; }

/* Quick Notes config modal */
.dashboard-quicknote-config { max-width: 540px; }
.dashboard-skill-input { min-height: 96px; resize: vertical; }
.dashboard-skill-preview {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 180px;
	overflow: auto;
	padding: 10px;
	border: 1px solid var(--db-border-input, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, var(--background-modifier-form-field));
}
.dashboard-quicknote-cfg-section {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border, var(--background-modifier-border));
}
.dashboard-quicknote-cfg-section:last-child { border-bottom: none; }
.dashboard-quicknote-cfg-section h3 { margin: 0 0 4px; font-size: 1em; }
.dashboard-quicknote-cfg-desc { margin: 0 0 10px; font-size: 0.8em; color: var(--db-text-muted); opacity: 0.85; }
.dashboard-quicknote-cfg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.dashboard-quicknote-cfg-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--db-border-input);
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-input);
}
.dashboard-quicknote-cfg-top { display: flex; gap: 6px; align-items: center; }
/* Drag handle: arms reordering only when grabbed, so text inputs stay editable. */
.dashboard-quicknote-cfg-grip {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 16px;
	cursor: grab;
	color: var(--db-text-muted);
	opacity: 0.45;
	touch-action: none;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.dashboard-quicknote-cfg-grip:hover { opacity: 1; color: var(--db-text); }
.dashboard-quicknote-cfg-grip:active { cursor: grabbing; }
.dashboard-quicknote-cfg-grip svg { width: 14px; height: 14px; display: block; }
.dashboard-quicknote-cfg-item--dragging { opacity: 0.4; }
.dashboard-quicknote-cfg-item--drop-before { box-shadow: 0 -2px 0 0 var(--db-accent); }
.dashboard-quicknote-cfg-item--drop-after { box-shadow: 0 2px 0 0 var(--db-accent); }
.dashboard-quicknote-cfg-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 30px;
	padding: 0;
	flex: 0 0 36px;
	border: 1px solid var(--db-border-input);
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-input);
	color: var(--db-text);
	cursor: pointer;
}
.dashboard-quicknote-cfg-icon-btn:hover { color: var(--db-accent); border-color: var(--db-accent); }
.dashboard-quicknote-cfg-icon-btn svg { width: 16px; height: 16px; }

/* Path input row: text input + the browse button from path-picker-modal */
.dashboard-quicknote-cfg-path-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}
.dashboard-quicknote-cfg-path-row .dashboard-modal-input { flex: 1; min-width: 0; }
.dashboard-pathpicker-btn { flex: 0 0 36px; }

/* Vault path picker modal (compact) */
.dashboard-pathpicker-body { display: flex; flex-direction: column; gap: 8px; }
.dashboard-pathpicker-search { width: 100%; }
.dashboard-pathpicker-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 320px;
	overflow-y: auto;
}
.dashboard-pathpicker-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 8px;
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
}
.dashboard-pathpicker-item:hover, .dashboard-pathpicker-item:focus-visible {
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.06));
	outline: none;
}
.dashboard-pathpicker-name {
	font-size: 0.8125em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dashboard-pathpicker-parent {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 1;
}
.dashboard-pathpicker-more {
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	padding: 4px 8px;
}

/* Icon picker (FuzzySuggestModal suggestions) */
.dashboard-icon-picker-item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dashboard-icon-picker-glyph {
	display: inline-flex;
	color: var(--db-text);
}
.dashboard-icon-picker-glyph svg { width: 18px; height: 18px; }
.dashboard-icon-picker-name { font-family: var(--db-font, monospace); font-size: 0.9em; }
.dashboard-quicknote-cfg-label { flex: 1; }
.dashboard-quicknote-cfg-del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	flex: 0 0 30px;
	border-radius: var(--db-radius-sm);
	color: var(--db-danger, var(--db-text-muted));
}
.dashboard-quicknote-cfg-del svg { width: 15px; height: 15px; }
.dashboard-quicknote-cfg-add { font-size: 0.85em; }
.dashboard-quicknote-cfg-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dashboard-quicknote-cfg-toggle label { font-size: 0.88em; cursor: pointer; }
/* Insert-position options: small heading + indented check rows (the old
   <select> clipped its closed-state text in the narrow modal). */
.dashboard-quicknote-cfg-pos-head { font-size: 0.88em; margin: 2px 0 6px; }
.dashboard-quicknote-cfg-toggle--sub { margin: 0 0 2px 18px; }
.dashboard-quicknote-cfg-cmd-id {
	font-size: 0.78em;
	color: var(--db-text-muted);
	word-break: break-all;
	margin-top: 2px;
}

/* ==========================================================================
   Banner — Statistics mode (three-column data panel)
   ========================================================================== */
.dashboard-banner--stats {
	/* Dark fallback base when no poster image is set. With an image, the inline
	   background-image shows through the blur scrim below. */
	background-color: #16161d;
	background-size: cover;
	background-position: center;
}
.dashboard-banner--stats .dashboard-banner-overlay { display: none; }

/* Blur + darken scrim over the poster image so white text reads clearly while
   the photo stays visible (blurred). Falls back to a plain dark gradient where
   backdrop-filter is unavailable.
   NOTE: border-radius: inherit is required — Chromium does not clip a
   backdrop-filter layer by the ancestor's overflow:hidden + border-radius
   (the composited blur surface escapes the rounded clip), so without this the
   scrim shows as square corners sticking out past the rounded poster. */
.dashboard-banner--stats::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(10, 10, 18, var(--banner-scrim, 0.55));
	backdrop-filter: blur(var(--banner-blur, 6px)) brightness(var(--banner-bright, 0.6));
	-webkit-backdrop-filter: blur(var(--banner-blur, 6px)) brightness(var(--banner-bright, 0.6));
	pointer-events: none;
	z-index: 0;
}
/* Accent tint on top of the scrim. Same radius inheritance so the gradient
   never overhangs the poster's rounded corners either. */
.dashboard-banner--stats::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, var(--banner-stat-accent, var(--db-accent, #a78bfa)), transparent 62%);
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.dashboard-banner-stats {
	position: absolute;
	inset: 0;
	z-index: 1; /* above the ::before/::after scrim pseudos (z-index:0) */
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* Outer gutters = the visible left/right margins (20px / 35px). The outer
	   columns zero their outer-side padding so this is exact; the right gutter
	   also houses the hover edit/pin buttons. */
	padding: 10px 35px 10px 20px;
	color: var(--db-text-inverse);
	pointer-events: none; /* let clicks fall through to the corner buttons */
}
/* Keep the corner buttons above the stats content. */
.dashboard-banner--stats .dashboard-banner-pin-btn { z-index: 2; }

/* ---- Column shell (shared) ---- */
.dashboard-banner-stat-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 8px 10px;
	pointer-events: auto;
}
.dashboard-banner-stat-col--left   { flex: 1 1 0; align-items: flex-start; justify-content: flex-start; text-align: left; padding-left: 0; }
.dashboard-banner-stat-col--center { flex: 3 1 0; align-items: center;     justify-content: flex-start; text-align: center; }
.dashboard-banner-stat-col--right  { flex: 1 1 0; align-items: stretch;    justify-content: center;     text-align: left; gap: 5px; padding-right: 0; }

/* Vertical gradient divider between columns. */
.dashboard-banner-stat-col + .dashboard-banner-stat-col::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* ---- Numbers / labels (shared) ---- */
.dashboard-banner-stat-num {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	line-height: 1;
}
.dashboard-banner-stat-label {
	font-size: 0.7em;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.02em;
}
.dashboard-banner-stat-col:hover .dashboard-banner-stat-num { transform: translateY(-1px); transition: transform 0.2s ease; }

/* ---- Left column: big number + bottom strip ---- */
.dashboard-banner-stat-col--left .dashboard-banner-stat-num { font-size: 1.7em; }
.dashboard-banner-stat-label--inline { margin-top: 0; } /* label inline next to the number */
.dashboard-banner-stat-strip {
	margin-top: auto; /* push to the bottom, mirroring the center heatmap */
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.62em;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.2;
}
.dashboard-banner-stat-strip-item {
	display: flex;
	align-items: center;
	gap: 4px;
}
.dashboard-banner-stat-strip-icon {
	color: var(--banner-stat-accent, var(--db-accent, #a78bfa));
	display: flex;
	align-items: center;
	opacity: 0.85;
}
.dashboard-banner-stat-strip-icon svg { width: 12px; height: 12px; }

/* ---- Center column: streak hero + 14-day chart ---- */
.dashboard-banner-stat-hero {
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: 1;
}
.dashboard-banner-stat-col--center .dashboard-banner-stat-num { font-size: 1.7em; }
.dashboard-banner-stat-icon {
	color: var(--banner-stat-accent, var(--db-accent, #a78bfa));
	display: flex;
	align-items: center;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.dashboard-banner-stat-icon svg { width: 20px; height: 20px; }
.dashboard-banner-stat-sub {
	margin-top: 4px;
	font-size: 0.62em;
	color: rgba(255, 255, 255, 0.62);
}
.dashboard-banner-stat-chart {
	margin-top: auto; /* pin heatmap to the bottom, aligning with the left strip */
	width: 100%;
	display: flex;
	justify-content: center;
}
/* Horizontal contribution strip: cells flow left→right and wrap, filling the
   center column width so the heatmap is wide and short. */
.dashboard-banner-heatmap {
	display: grid;
	grid-template-columns: repeat(auto-fill, 9px);
	grid-auto-rows: 9px;
	gap: 2px;
	justify-content: center;
	width: 100%;
}
.dashboard-banner-heatmap-cell {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.1);
}
.dashboard-banner-heatmap-cell--l1 { background: var(--banner-stat-accent, var(--db-accent, #a78bfa)); opacity: 0.35; }
.dashboard-banner-heatmap-cell--l2 { background: var(--banner-stat-accent, var(--db-accent, #a78bfa)); opacity: 0.55; }
.dashboard-banner-heatmap-cell--l3 { background: var(--banner-stat-accent, var(--db-accent, #a78bfa)); opacity: 0.78; }
.dashboard-banner-heatmap-cell--l4 { background: var(--banner-stat-accent, var(--db-accent, #a78bfa)); opacity: 1; }
.dashboard-banner-heatmap-cell--today { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75); }

/* ---- Right column: progress rows ---- */
.dashboard-banner-stat-prog {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dashboard-banner-stat-prog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.dashboard-banner-stat-prog-title {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.64em;
	color: rgba(255, 255, 255, 0.78);
}
.dashboard-banner-stat-prog-icon {
	color: var(--banner-stat-accent, var(--db-accent, #a78bfa));
	display: flex;
	align-items: center;
}
.dashboard-banner-stat-prog-icon svg { width: 14px; height: 14px; }
.dashboard-banner-stat-prog-val {
	font-size: 0.82em;
	font-weight: 700;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}
.dashboard-banner-stat-prog-label {
	font-size: 0.6em;
	color: rgba(255, 255, 255, 0.65);
}
.dashboard-banner-stat-prog-track {
	height: 4px;
	margin-top: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.dashboard-banner-stat-prog-fill {
	height: 100%;
	border-radius: 2px;
	background: var(--banner-stat-accent, var(--db-accent, #a78bfa));
	transition: width 0.6s ease;
}

@media (max-width: 640px) {
	.dashboard-banner-stats {
		padding: 8px 12px;
		justify-content: center;
		gap: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.dashboard-banner-stats::-webkit-scrollbar { display: none; }
	/* On phones only the center (Activity) column fits — the left/right columns
	   would clip at this width, so hide them and let the center fill the banner. */
	.dashboard-banner-stat-col--left,
	.dashboard-banner-stat-col--right { display: none; }
	.dashboard-banner-stat-col--center { flex: 1 1 auto; max-width: none; }
	/* Drop the dividers on narrow screens. */
	.dashboard-banner-stat-col + .dashboard-banner-stat-col::before { display: none; }
	.dashboard-banner-stat-col--center .dashboard-banner-stat-num { font-size: 1.5em; }
	/* Denser heatmap cells on narrow screens so it wraps to fewer rows. */
	.dashboard-banner-heatmap { grid-template-columns: repeat(auto-fill, 7px); grid-auto-rows: 7px; gap: 1px; }
	.dashboard-banner-heatmap-cell { width: 7px; height: 7px; }
	/* Stats mode has no overlay, so the tap-to-reveal path is gone; keep the
	   edit button discoverable on touch. */
	.dashboard-banner--stats .dashboard-banner-edit-btn { opacity: 0.55; }
}

/* Collapsed banner (stats) — hide the scrim pseudos too (the rest is hidden by
   the shared collapsed rule). */
@media (min-width: 641px) {
	.dashboard-banner--collapsed.dashboard-banner--stats::before,
	.dashboard-banner--collapsed.dashboard-banner--stats::after { opacity: 0; }
}

/* ==========================================================================
   Banner edit modal — mode toggle + statistics config
   ========================================================================== */
/* Mode header — explains the toggle below it. */
.dashboard-modal-mode-header { margin-bottom: 8px; }
.dashboard-modal-mode-title { font-weight: 600; font-size: 0.95em; color: var(--db-text, var(--text-normal)); }
.dashboard-modal-mode-hint { font-size: 0.8em; color: var(--db-text-faint, var(--text-faint)); margin-top: 2px; }

.dashboard-modal-mode-toggle {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	padding: 4px;
	background: var(--db-bg-hover, rgba(0, 0, 0, 0.05));
	border-radius: 10px;
}
.dashboard-modal-mode-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 10px;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	font-size: 0.92em;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-modal-mode-btn svg { width: 16px; height: 16px; }
.dashboard-modal-mode-btn.active {
	background: var(--db-bg-modal-raised, var(--db-bg-card, var(--background-primary)));
	color: var(--db-accent, var(--text-normal));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	font-weight: 600;
}

.dashboard-modal-stats-cols,
.dashboard-modal-stats-appear,
.dashboard-modal-stats-daily,
.dashboard-modal-stats-sub {
	margin-bottom: 16px;
}
.dashboard-modal-stats-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--db-text, var(--text-normal));
}
.dashboard-modal-stats-inline-label {
	flex: 0 0 auto;
	font-size: 0.88em;
	color: var(--db-text-muted, var(--text-muted));
	min-width: 48px;
}

/* Column visibility + per-column stat picker. */
.dashboard-modal-stats-col-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.dashboard-modal-stats-col-row--top { align-items: flex-start; }
.dashboard-modal-stats-vis {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 0.9em;
	color: var(--db-text, var(--text-normal));
	flex: 0 0 auto;
	min-width: 56px;
}
.dashboard-modal-stats-vis input { margin: 0; }
.dashboard-modal-stats-select { flex: 1; width: 100%; min-width: 0; }
.dashboard-modal-stats-right-metrics {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dashboard-modal-stats-right-title {
	font-size: 0.8em;
	color: var(--db-text-faint, var(--text-faint));
	margin-bottom: 2px;
}

/* Appearance: sliders + accent. */
.dashboard-modal-stats-slider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.dashboard-modal-stats-range {
	flex: 1;
	margin: 0;
	accent-color: var(--db-accent, #a78bfa);
}
.dashboard-modal-stats-slider-val {
	flex: 0 0 auto;
	min-width: 34px;
	text-align: right;
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-modal-stats-accent-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dashboard-modal-stats-hint {
	margin-top: 6px;
	font-size: 0.8em;
	color: var(--db-text-faint, var(--text-faint));
}
.dashboard-modal-stats-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 0.92em;
	color: var(--db-text, var(--text-normal));
}
.dashboard-modal-stats-checkbox input { margin: 0; }

/* =========================================================================
   Dataview Section — DQL query results (TABLE / LIST / TASK / CALENDAR).
   Reuses the library-section table & list tokens for visual consistency.
   ========================================================================= */

.dashboard-dataview-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 0;
	/* Fill the section row's column flex so the result body can take the
	   remaining bounded height and scroll (mirrors .dashboard-library-content). */
	flex: 1;
	min-height: 0;
	min-width: 0;
}

/* Paginated layout: count header pinned, body scrolls, pagination pinned. */
.dashboard-dataview-pages {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.dashboard-dataview-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent) 25%, transparent) transparent;
}

.dashboard-dataview-body::-webkit-scrollbar {
	width: 8px;
}
.dashboard-dataview-body::-webkit-scrollbar-track {
	background: transparent;
}
.dashboard-dataview-body::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent) 20%, transparent);
	border-radius: 4px;
}
.dashboard-dataview-body::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--db-accent) 38%, transparent);
}

.dashboard-dataview-count,
.dashboard-dataview-pagination {
	flex-shrink: 0;
}

/* Result toolbar: count | (spacer) | filter input | page-size select. */
.dashboard-dataview-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 2px 0;
}
.dashboard-dataview-toolbar-spacer {
	flex: 1;
}

.dashboard-dataview-count {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.6875em;
	color: var(--db-text-muted, var(--text-muted));
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0 2px;
	white-space: nowrap;
}

.dashboard-dataview-search {
	width: 110px;
	flex-shrink: 1;
	padding: 3px 8px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 11.5px;
	outline: none;
}
.dashboard-dataview-search:focus {
	border-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-dataview-search::placeholder {
	color: var(--db-text-faint, var(--text-faint));
}

/* TABLE header sort: clickable th with a direction indicator. */
.dashboard-dataview-table th.is-sortable {
	cursor: pointer;
	user-select: none;
}
.dashboard-dataview-table th.is-sortable:hover {
	color: var(--db-text, var(--text-normal));
}
.dashboard-dataview-sort-ind {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 4px;
	opacity: 0.45;
}
.dashboard-dataview-sort-ind svg {
	width: 11px;
	height: 11px;
}
.dashboard-dataview-table th.is-sorted-asc .dashboard-dataview-sort-ind,
.dashboard-dataview-table th.is-sorted-desc .dashboard-dataview-sort-ind {
	opacity: 1;
	color: var(--db-accent, var(--interactive-accent));
}

/* Sticky table header: stays pinned while the result body scrolls. The theme's
   section bg can be translucent (rgba) in some themes, which lets rows bleed
   through — so it is layered over the opaque page bg (--db-bg), giving an
   opaque result that still looks exactly like the section. Inset bottom
   shadow replaces the border (collapse + sticky drops borders in some
   browsers). No backdrop-filter (mobile GPU). */
.dashboard-dataview-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background:
		linear-gradient(var(--db-bg-section, var(--background-secondary)), var(--db-bg-section, var(--background-secondary))),
		var(--db-bg, var(--background-primary));
	box-shadow: inset 0 -1px 0 var(--db-border, rgba(255, 255, 255, 0.08));
}

/* Numeric cells right-aligned (classic database layout). */
.dashboard-dataview-table td.is-numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Row-number column: narrow, muted, right-aligned. */
.dashboard-dataview-rownum-head,
.dashboard-dataview-rownum {
	width: 34px;
	min-width: 34px;
	max-width: 34px;
	padding-left: 4px;
	padding-right: 8px;
	text-align: right;
	color: var(--db-text-faint, var(--text-faint));
	font-variant-numeric: tabular-nums;
	cursor: default;
}

/* Zebra stripes (opt-in): even rows tinted; hover wins over stripes. */
.dashboard-dataview-table.is-striped tbody tr:nth-child(even) {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.03));
}
.dashboard-dataview-table.is-striped tbody tr:hover,
.dashboard-dataview-table tbody tr:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.10));
}
.dashboard-dataview-list.is-striped > .dashboard-dataview-list-item:nth-child(even) {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.03));
}
.dashboard-dataview-tasklist.is-striped > .dashboard-dataview-task:nth-child(even) {
	background: var(--db-bg-card, rgba(255, 255, 255, 0.03));
}

/* Compact density: halved vertical paddings. */
.dashboard-dataview-table.is-compact td {
	padding-top: 3px;
	padding-bottom: 3px;
}
.dashboard-dataview-table.is-compact th {
	padding-top: 4px;
	padding-bottom: 4px;
}
.dashboard-dataview-list.is-compact > .dashboard-dataview-list-item {
	padding-top: 2px;
	padding-bottom: 2px;
}
.dashboard-dataview-tasklist.is-compact > .dashboard-dataview-task {
	padding-top: 2px;
	padding-bottom: 2px;
}

/* Density chips in the config modal (reuses the sample-chip look). */
.dashboard-dataview-density-chips {
	display: flex;
	gap: 6px;
}
.dashboard-dataview-density-chip.active {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-bg, var(--text-on-accent));
	border-color: transparent;
}

/* TASK checkbox column: narrow fixed slot at the table's start. */
.dashboard-dataview-check-col {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	padding: 4px 0 4px 6px;
	vertical-align: top;
}
.dashboard-dataview-table thead th.dashboard-dataview-check-head {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	padding: 4px 0 4px 6px;
}

/* Source-note columns (table mode): muted path/date, note keeps link styling. */
.dashboard-dataview-table th.is-source-col {
	cursor: default;
}
.dashboard-dataview-src-path,
.dashboard-dataview-src-created {
	color: var(--db-text-muted, var(--text-muted));
	font-size: 12.5px;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Source summary line under each list item (list mode). */
.dashboard-dataview-list-item {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}
.dashboard-dataview-list-main {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}
.dashboard-dataview-list-main.dashboard-dataview-task-row {
	align-items: center;
}
.dashboard-dataview-list-source {
	font-size: 11px;
	color: var(--db-text-faint, var(--text-faint));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 2px;
}
.dashboard-dataview-list-sep {
	color: var(--db-text-faint, var(--text-faint));
	margin: 0 2px;
}

/* View-mode segmented toggle in the dataview toolbar (reuses library classes;
   tightened for the compact toolbar). */
.dashboard-dataview-view-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

/* Result count header */
.dashboard-dataview-capped {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

/* TABLE — extends the library table look.
   Fixed layout: column widths are deterministic instead of content-driven, so
   a long path or title can never squeeze the date column into wrapping.
   Narrow utility columns (rownum, checkbox) get fixed px; source columns get
   capped widths; value columns share the remainder equally. */
.dashboard-dataview-table {
	table-layout: fixed;
	word-break: break-word;
	/* Lift cells off the inherited library-table 0.75em: that sat a step below
	   every other section's row text (0.85em typical). Scoped to the dataview
	   table so the library section's own table keeps its size. */
	font-size: 0.85em;
}
.dashboard-dataview-table td {
	white-space: normal;
	max-width: none;
	vertical-align: top;
	line-height: 1.5;
}
/* Two-line clamp lives on an INNER div — td must stay display:table-cell or
   the fixed table layout breaks (cells stop aligning to <col> widths). */
.dashboard-dataview-table td .dashboard-dataview-cell {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
/* Created-date column: single line, never wraps (dates break ugly). Left-
   aligned like the other text columns; tabular-nums keeps digits even. */
.dashboard-dataview-table td.dashboard-dataview-src-created,
.dashboard-dataview-table th.is-datetime {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}
.dashboard-dataview-table th {
	cursor: default;
	/* Library headers compound their ratio against the table base (0.6875em x
	   0.75em = ~8px here). Keep the muted-uppercase look but at a legible size
	   relative to the larger cell font. */
	font-size: 0.75em;
}
.dashboard-dataview-table tr:not(.is-clickable) {
	cursor: default;
}
.dashboard-dataview-null {
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.4;
}
.dashboard-dataview-group-key {
	font-weight: 600;
	color: var(--db-accent, var(--interactive-accent));
}
.dashboard-dataview-group-member {
	padding: 1px 0;
}

/* LIST */
.dashboard-dataview-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dashboard-dataview-list-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 8px;
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text, var(--text-normal));
	font-size: 0.85em;
	transition: background 0.1s ease;
}
.dashboard-dataview-list-item:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
}
.dashboard-dataview-list-group {
	font-weight: 600;
	color: var(--db-accent, var(--interactive-accent));
	margin-bottom: 2px;
}
.dashboard-dataview-list-members {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 12px;
}
.dashboard-dataview-list-member {
	color: var(--db-text, var(--text-normal));
	opacity: 0.9;
}

/* ---------- FREE view (native Dataview shape: bullet list + group headers) ---------- */
.dashboard-dataview-free-list {
	margin: 0;
	padding: 2px 4px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--db-text, var(--text-normal));
	font-size: 0.85em;
}
.dashboard-dataview-free-list.is-nested {
	padding-left: 14px;
	margin-top: 3px;
}
.dashboard-dataview-free-item {
	display: flex;
	align-items: baseline;
	padding: 3px 6px;
	border-radius: var(--db-radius-sm, 6px);
	transition: background 0.1s ease;
}
.dashboard-dataview-free-item:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
}
.dashboard-dataview-free-item::before {
	content: '•';
	flex-shrink: 0;
	margin-right: 7px;
	color: var(--db-accent, var(--interactive-accent));
	line-height: 1;
}
.dashboard-dataview-free-main {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	min-width: 0;
}
.dashboard-dataview-free-sep {
	color: var(--db-text-muted, var(--text-muted));
	opacity: 0.7;
}
.dashboard-dataview-free-group {
	display: flex;
	flex-direction: column;
}
.dashboard-dataview-free-group-title {
	font-weight: 600;
	color: var(--db-accent, var(--interactive-accent));
	padding: 3px 6px;
}

/* Inline markdown inside dataview values */
.dashboard-dataview-code {
	font-family: var(--font-monospace, monospace);
	font-size: 0.92em;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--db-bg-hover, rgba(255, 255, 255, 0.08));
	color: var(--db-text, var(--text-normal));
}
.dashboard-dataview-mark {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 28%, transparent);
	color: inherit;
	padding: 0 2px;
	border-radius: 3px;
}
.dashboard-dataview-cell em { font-style: italic; }
.dashboard-dataview-cell strong { font-weight: 600; }

/* TASK (Phase 3 — read-only for now) */
.dashboard-dataview-tasklist {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dashboard-dataview-task {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 8px;
	border-radius: var(--db-radius-sm, 6px);
}
.dashboard-dataview-task:hover {
	background: var(--db-bg-card-hover, rgba(255, 255, 255, 0.06));
}
.dashboard-dataview-task-checkbox {
	margin: 0;
	flex-shrink: 0;
	transform: translateY(1px);
}
.dashboard-dataview-task-text {
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
}

/* Empty + error + scanning states */
.dashboard-dataview-empty,
.dashboard-dataview-error,
.dashboard-dataview-scanning {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 16px;
	text-align: center;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.8125em;
}
.dashboard-dataview-empty-icon {
	width: 32px;
	height: 32px;
	opacity: 0.3;
	background: currentColor;
	-webkit-mask: var(--icon-search) center / contain no-repeat;
	mask: var(--icon-search) center / contain no-repeat;
}
.dashboard-dataview-empty-hint {
	font-size: 0.6875em;
	opacity: 0.7;
}
.dashboard-dataview-error {
	color: var(--text-error, #e06c75);
}
.dashboard-dataview-error-icon svg {
	width: 22px;
	height: 22px;
}
.dashboard-dataview-error-text {
	max-width: 360px;
	word-break: break-word;
}
.dashboard-dataview-spinner {
	animation: dashboard-dataview-spin 0.9s linear infinite;
}
.dashboard-dataview-spinner svg {
	width: 18px;
	height: 18px;
}
@keyframes dashboard-dataview-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ==== Web section — embedded page (iframe / desktop webview) ==== */

/* Fill the section row's column flex so the frame takes the remaining
   bounded height and scrolls itself (mirrors .dashboard-dataview-content).
   overflow + radius clip the frame's square corners to the theme's. */
.dashboard-web-content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	min-width: 0;
	border-radius: var(--db-radius-md);
	overflow: hidden;
}
.dashboard-web-open-external {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 30px;
	height: 30px;
	border: 1px solid var(--background-modifier-border);
	border-radius: var(--radius-s);
	background: var(--background-primary);
	color: var(--text-muted);
	opacity: 0.75;
}
.dashboard-web-open-external:hover { opacity: 1; color: var(--text-normal); }

/* Painted backdrop avoids a transparent flash in dark themes while the frame
   loads. No sandbox is set on the frame itself (login-walled apps need
   cookies) — that lives in web-section.ts. */
.dashboard-web-frame {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border: 0;
	display: block;
	background: var(--background-primary);
}

/* Configure-me guide state (no URL yet). */
.dashboard-web-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 12px;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-web-empty-icon svg,
.dashboard-web-fallback-icon svg {
	width: 28px;
	height: 28px;
}
.dashboard-web-empty-text {
	font-size: 0.95em;
}
.dashboard-web-empty-hint {
	font-size: 0.85em;
	opacity: 0.75;
}

/* Fallback card: site refused framing (mobile) or page failed to load. */
.dashboard-web-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 16px;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-web-fallback-text {
	text-align: center;
}
.dashboard-web-fallback-host {
	font-weight: 600;
	word-break: break-all;
}
.dashboard-web-fallback-url {
	font-size: 0.85em;
	opacity: 0.7;
	word-break: break-all;
}
.dashboard-web-fallback-btn {
	margin-top: 8px;
	padding: 6px 14px;
	border: 1px solid var(--db-accent, var(--text-accent));
	border-radius: var(--db-radius-sm, 8px);
	background: transparent;
	color: var(--db-accent, var(--text-accent));
	font-size: 0.9em;
	cursor: pointer;
}
.dashboard-web-fallback-btn:hover {
	background: var(--db-accent, var(--text-accent));
	color: var(--db-bg-section, var(--background-primary));
}

/* Web config modal — zoom preset chips (single-select, with a visible active
   state — the dataview sample chips have none and read as dead buttons when
   reused as a selector). */
.dashboard-web-zoom-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dashboard-web-zoom-chip {
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11.5px;
	cursor: pointer;
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-card, var(--background-modifier-hover));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	transition: background 0.12s ease, border-color 0.12s ease;
}
.dashboard-web-zoom-chip:hover {
	background: var(--db-bg-hover, var(--background-modifier-hover));
	border-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-web-zoom-chip.active {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-bg, var(--text-on-accent));
	border-color: transparent;
}

/* External (http) links rendered from field values */
.dashboard-dataview-extlink {
	color: var(--db-accent, var(--text-accent));
	text-decoration: underline;
}

/* Config modal */
.dashboard-dataview-query-input {
	width: 100%;
	min-height: 140px;
	padding: 10px 12px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	background: var(--db-bg, var(--background-secondary));
	color: var(--db-text, var(--text-normal));
	font-family: var(--font-monospace, monospace);
	font-size: 12.5px;
	line-height: 1.6;
	resize: vertical;
	box-sizing: border-box;
}
.dashboard-dataview-query-input:focus {
	outline: none;
	border-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-dataview-validation {
	min-height: 18px;
	font-size: 11.5px;
}
.dashboard-dataview-validation.is-error {
	color: var(--text-error, #e06c75);
}
.dashboard-dataview-validation-ok {
	color: var(--color-green, #4caf50);
}
.dashboard-dataview-sample-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dashboard-dataview-sample-chip {
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11.5px;
	cursor: pointer;
	color: var(--db-text, var(--text-normal));
	background: var(--db-bg-card, var(--background-modifier-hover));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	transition: background 0.12s ease, border-color 0.12s ease;
}
.dashboard-dataview-sample-chip:hover {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--db-bg, var(--text-on-accent));
	border-color: transparent;
}

/* Dataview TASK: done state + calendar grid */
.dashboard-dataview-task.is-done .dashboard-dataview-task-text {
	text-decoration: line-through;
	opacity: 0.55;
}

/* CALENDAR query — month grid */
.dashboard-dataview-calendar {
	padding: 4px 2px;
}
.dashboard-dataview-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.dashboard-dataview-calendar-nav {
	background: transparent;
	border: none;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
}
.dashboard-dataview-calendar-nav:hover {
	color: var(--db-accent, var(--interactive-accent));
}
.dashboard-dataview-calendar-title {
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}
.dashboard-dataview-calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
}
.dashboard-dataview-calendar-wd {
	text-align: center;
	font-size: 0.625em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	text-transform: uppercase;
}
.dashboard-dataview-calendar-cells {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.dashboard-dataview-calendar-cell {
	min-height: 36px;
	padding: 3px 4px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card, rgba(255,255,255,0.04));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
}
.dashboard-dataview-calendar-cell.is-blank {
	border-color: transparent;
}
.dashboard-dataview-calendar-cell.has-dots {
	cursor: pointer;
	background: var(--db-bg-card, rgba(255,255,255,0.04));
}
.dashboard-dataview-calendar-cell.has-dots:hover {
	background: var(--db-bg-card-hover, rgba(255,255,255,0.10));
}
.dashboard-dataview-calendar-day {
	font-size: 0.625em;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-dataview-calendar-cell.has-dots .dashboard-dataview-calendar-day {
	color: var(--db-text, var(--text-normal));
	font-weight: 600;
}
.dashboard-dataview-calendar-dots {
	display: flex;
	align-items: center;
	gap: 2px;
}
.dashboard-dataview-calendar-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--db-accent, var(--interactive-accent));
}
.dashboard-dataview-calendar-more {
	font-size: 0.5625em;
	color: var(--db-text-muted, var(--text-muted));
}

/* Mobile GPU safety override.
   Keep this near the end of the stylesheet so later feature/theme blocks cannot
   re-enable expensive blur/filter layers on iOS/Android WebView. Obsidian
   reloads plugins after a renderer crash, so these effects can look like
   repeated plugin loads on phones. Desktop/tablet-wide layouts keep the full
   glass treatment. */
@media (max-width: 640px) {
	.is-mobile .apex-dashboard-root,
	.is-mobile .apex-dashboard-root *,
	.is-mobile .dashboard-modal,
	.is-mobile [data-theme] .dashboard-modal,
	.is-mobile .theme-light [data-theme] .dashboard-modal,
	.is-mobile .theme-dark [data-theme] .dashboard-modal,
	.is-mobile .modal--dashboard,
	.is-mobile .modal-bg--dashboard,
	.is-mobile .dashboard-banner--stats::before,
	.is-mobile .dashboard-heatmap-stats-popup,
	.is-mobile .dashboard-pomodoro-stats-overlay,
	.is-mobile .dashboard-habit-stats-overlay,
	.is-mobile .dashboard-confirm-overlay,
	.is-mobile .fortune-overlay,
	.is-mobile .file-suggest-container,
	.is-mobile .suggestion-container {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		filter: none !important;
	}

	.is-mobile .apex-dashboard-root {
		--db-backdrop-blur: none !important;
	}

	.is-mobile .apex-dashboard-bg {
		filter: none !important;
		transform: none !important;
	}
}

/* ===== Floating Pomodoro Mini Panel ===== */
/* Body-level pill: theme vars arrive via applyModalTheme, so every rule
 * carries a stock-theme fallback for when no dashboard root is active.
 * No backdrop-filter on purpose (mobile crash history + readability). */
.dashboard-pomodoro-mini {
	position: fixed;
	right: 16px;
	bottom: 40px;
	z-index: var(--layer-popover, 30);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 7px;
	background: var(--db-bg-modal, var(--background-secondary));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-lg, 12px);
	box-shadow: var(--db-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.25));
	font-family: var(--db-font, inherit);
	color: var(--db-text, var(--text-normal));
	user-select: none;
	cursor: grab;
	/* Claim the gesture so dragging never scrolls the page behind. */
	touch-action: none;
	/* Size is frozen in JS at mount; never let content spill it. */
	overflow: hidden;
	/* Idle-fold: gap/padding/chrome animate toward the silent tomato-only
	 * state (.dashboard-pomodoro-mini--silent) and back. */
	transition: gap 0.2s ease, padding 0.2s ease, border-radius 0.2s ease,
		background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-floating-mini--dragging {
	cursor: grabbing;
	opacity: 0.92;
}

.dashboard-pomodoro-mini-ring-wrap {
	position: relative;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.dashboard-pomodoro-mini-ring {
	width: 28px;
	height: 28px;
	display: block;
}

.dashboard-pomodoro-mini-ring-bg {
	stroke: var(--db-border-card, var(--background-modifier-border));
	opacity: 0.8;
}

.dashboard-pomodoro-mini-ring-progress {
	stroke: var(--db-accent, var(--interactive-accent));
	transition: stroke-dashoffset 0.9s linear;
}

.dashboard-pomodoro-mini--break .dashboard-pomodoro-mini-ring-progress {
	stroke: var(--db-accent-light, var(--db-accent, var(--interactive-accent)));
}

.dashboard-pomodoro-mini-tomato {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
}

.dashboard-pomodoro-mini-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 44px;
	overflow: hidden;
	transition: width 0.2s ease, opacity 0.15s ease, visibility 0s;
}

.dashboard-pomodoro-mini-time {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.dashboard-pomodoro-mini-phase {
	font-size: 9px;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.dashboard-pomodoro-mini--paused .dashboard-pomodoro-mini-time {
	opacity: 0.65;
}

.dashboard-pomodoro-mini-btn {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 50%;
	background: var(--db-bg-btn, transparent);
	border: 1px solid var(--db-border-btn, var(--background-modifier-border));
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
	transition: width 0.2s ease, opacity 0.15s ease, border-width 0.2s ease,
		background 0.15s ease, transform 0.1s ease, visibility 0s;
}

.dashboard-pomodoro-mini-btn:hover {
	background: var(--db-bg-hover, var(--background-modifier-hover));
}

.dashboard-pomodoro-mini-btn:active {
	transform: scale(0.92);
}

.dashboard-pomodoro-mini-btn svg {
	width: 10px;
	height: 10px;
}

.dashboard-pomodoro-mini-btn--ghost {
	border-color: transparent;
	color: var(--db-text-muted, var(--text-muted));
}

@media (max-width: 640px) {
	.dashboard-pomodoro-mini {
		right: 12px;
		/* Clear the mobile tab bar plus the home-indicator safe area. */
		bottom: calc(64px + env(safe-area-inset-bottom, 0px));
		padding: 4px 6px;
		gap: 5px;
	}

	.dashboard-pomodoro-mini-time {
		font-size: 13px;
	}

	.dashboard-pomodoro-mini-btn {
		width: 28px;
		height: 28px;
	}

	.dashboard-pomodoro-mini-btn svg {
		width: 13px;
		height: 13px;
	}
}

/* Idle-fold ("silent") state: after ~10s without pointer activity on the
 * pill it collapses to just the tomato + its progress ring (the ring keeps
 * ticking); any hover, tap or key focus unfolds it again. Double-class
 * selectors so these override the mobile block above. */
.dashboard-pomodoro-mini.dashboard-pomodoro-mini--silent {
	gap: 0;
	padding: 5px;
	border-radius: 999px;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.dashboard-pomodoro-mini.dashboard-pomodoro-mini--silent .dashboard-pomodoro-mini-info {
	width: 0 !important; /* overrides the mount-time frozen inline width */
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	/* Stay in the a11y tree until the fold finishes; unfold shows instantly. */
	transition: width 0.2s ease, opacity 0.15s ease, visibility 0s 0.2s;
}

.dashboard-pomodoro-mini.dashboard-pomodoro-mini--silent .dashboard-pomodoro-mini-btn {
	width: 0;
	min-width: 0;
	border-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: width 0.2s ease, opacity 0.15s ease, border-width 0.2s ease,
		visibility 0s 0.2s;
}

/* ===== Floating Reading Mini Timer ===== */
/* Tiny top-right pill mirroring the pomodoro mini panel conventions: theme
 * vars via applyModalTheme, stock-theme fallbacks, no backdrop-filter. */
.dashboard-reading-mini {
	position: fixed;
	/* Below the workspace header's per-pane action buttons (top-right). */
	top: 46px;
	right: 12px;
	z-index: var(--layer-popover, 30);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	background: var(--db-bg-modal, var(--background-secondary));
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-md, 8px);
	box-shadow: var(--db-shadow-card, 0 4px 16px rgba(0, 0, 0, 0.25));
	font-family: var(--db-font, inherit);
	color: var(--db-text, var(--text-normal));
	user-select: none;
	cursor: grab;
	/* Claim the gesture so dragging never scrolls the page behind. */
	touch-action: none;
	/* Size is frozen in JS at mount; never let content spill it. */
	overflow: hidden;
}

.dashboard-reading-mini-icon {
	display: flex;
	align-items: center;
	color: var(--db-accent, var(--interactive-accent));
	flex-shrink: 0;
}

.dashboard-reading-mini-icon svg {
	width: 12px;
	height: 12px;
}

.dashboard-reading-mini-time {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
	/* Cell width is frozen in JS at the h:mm:ss size; keep digits centered
	 * while sessions shorter than an hour show the narrower m:ss form. */
	text-align: center;
}

.dashboard-reading-mini--paused .dashboard-reading-mini-time {
	opacity: 0.6;
}

.dashboard-reading-mini-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--db-bg-btn, transparent);
	border: 1px solid var(--db-border-btn, var(--background-modifier-border));
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.dashboard-reading-mini-btn:hover {
	background: var(--db-bg-hover, var(--background-modifier-hover));
}

.dashboard-reading-mini-btn:active {
	transform: scale(0.92);
}

.dashboard-reading-mini-btn svg {
	width: 9px;
	height: 9px;
}

@media (max-width: 640px) {
	.dashboard-reading-mini {
		/* Below the mobile header row (back / title / more-menu). */
		top: 52px;
		right: 10px;
		padding: 4px 6px;
	}

	.dashboard-reading-mini-btn {
		width: 26px;
		height: 26px;
	}

	.dashboard-reading-mini-btn svg {
		width: 11px;
		height: 11px;
	}
}

/* Dragged floating panels switch from their stylesheet right/bottom anchor
 * to inline left/top. This class cancels the anchors; it must stay AFTER the
 * .dashboard-*-mini blocks (including their mobile media queries) so it wins
 * the same-specificity cascade everywhere. */
.dashboard-floating-mini--pinned {
	right: auto;
	bottom: auto;
}

/* Music Widget (NetEase free playback, desktop only) */
.dashboard-sidebar-music-top {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-bottom: 8px;
}

.dashboard-sidebar-music-title-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.85;
	/* Theme accent, matching the other widgets' title icons (habit etc.). */
	color: var(--db-accent);
}

.dashboard-sidebar-music-title-icon svg {
	width: 12px;
	height: 12px;
}

.dashboard-sidebar-music-top-spacer {
	flex: 1;
}

.dashboard-sidebar-music-icon-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.35;
	color: var(--db-text-muted);
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.dashboard-sidebar-music-icon-btn:hover {
	opacity: 0.8;
}

.dashboard-sidebar-music-icon-btn svg {
	width: 13px;
	height: 13px;
}

.dashboard-sidebar-music-play {
	opacity: 0.65;
	color: var(--db-text);
}

.dashboard-sidebar-music-play:hover {
	opacity: 0.95;
}

.dashboard-sidebar-music-play svg {
	width: 16px;
	height: 16px;
}

.dashboard-sidebar-music-now {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.dashboard-sidebar-music-cover {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--db-radius-sm, 6px);
	overflow: hidden;
	background: var(--db-bg-section, rgba(127, 127, 127, 0.08));
}

.dashboard-sidebar-music-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dashboard-sidebar-music-cover-glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--db-text-muted);
	opacity: 0.4;
}

.dashboard-sidebar-music-cover-glyph svg {
	width: 18px;
	height: 18px;
}

.dashboard-sidebar-music-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-sidebar-music-name {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-music-artist {
	font-size: 0.65em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-music-lyric {
	flex: 1;
	min-width: 0;
	font-size: 0.68em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}

.dashboard-sidebar-music-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.dashboard-sidebar-music-time {
	font-size: 0.6em;
	color: var(--db-text-muted);
	min-width: 28px;
	user-select: none;
	font-variant-numeric: tabular-nums;
}

.dashboard-sidebar-music-progress .dashboard-sidebar-music-time:last-child {
	text-align: right;
}

.dashboard-sidebar-music-bar {
	flex: 1;
	cursor: pointer;
	min-width: 0;
}

.dashboard-sidebar-music-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.dashboard-sidebar-music-vol-area input[type='range'] {
	width: 58px;
	accent-color: var(--db-accent);
}

/* Floating panel: a body-level popover anchored under the music card (see
   music-widget.ts openPanel) — reads as an EXTENSION of the card: same width,
   same material, a 6px seam. Body-level so no ancestor overflow (immersive
   tiles are overflow:hidden fixed-height boxes) can clip the list; the
   viewport clamp + internal results scroll keep it on screen when the card
   sits near the bottom. --db-* tokens are mirrored inline by applyModalTheme
   (the popover lives outside .apex-dashboard-root where they are declared). */
.dashboard-sidebar-music-popover {
	position: fixed;
	z-index: 900; /* above tiles/chrome (<100), below overlays (1000+) */
	display: flex;
	flex-direction: column;
	max-height: min(440px, 70vh);
	background: var(--db-bg-modal, var(--db-bg-card));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-md);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
	backdrop-filter: var(--db-backdrop-blur);
	-webkit-backdrop-filter: var(--db-backdrop-blur);
	padding: 10px;
	overflow: hidden;
}
.dashboard-sidebar-music-popover-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}
/* In the popover the list flexes within the clamped panel height (the fixed
   200px cap was for the old in-card layout). min-height 0 lets the list give
   way when the viewport clamp squeezes the panel — a floor here would defeat
   the clamp and push the panel off screen. */
.dashboard-sidebar-music-popover .dashboard-sidebar-music-results {
	flex: 1;
	min-height: 0;
	max-height: none;
}
.dashboard-sidebar-music-icon-btn--active {
	color: var(--db-accent);
	background: color-mix(in srgb, var(--db-accent) 14%, transparent);
	border-radius: var(--db-radius-sm, 6px);
	opacity: 0.9;
}

.dashboard-sidebar-music-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: var(--db-radius-sm, 6px);
	cursor: pointer;
}

.dashboard-sidebar-music-row:hover {
	background: var(--db-bg-card-hover, rgba(127, 127, 127, 0.1));
}

.dashboard-sidebar-music-row--active {
	background: color-mix(in srgb, var(--db-accent) 12%, transparent);
}

.dashboard-sidebar-music-row--active .dashboard-sidebar-music-row-name {
	color: var(--db-accent);
}

.dashboard-sidebar-music-row--vip {
	opacity: 0.45;
	cursor: default;
}

.dashboard-sidebar-music-row-play {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--db-accent);
}

.dashboard-sidebar-music-row-play svg {
	width: 10px;
	height: 10px;
}

.dashboard-sidebar-music-row-label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.dashboard-sidebar-music-row-name {
	font-size: 0.7em;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-music-row-sub {
	font-size: 0.6em;
	color: var(--db-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-sidebar-music-vip-badge {
	flex-shrink: 0;
	font-size: 0.55em;
	font-weight: 700;
	padding: 1px 4px;
	border-radius: 4px;
	color: var(--db-bg-card, #fff);
	background: color-mix(in srgb, var(--db-accent) 65%, var(--db-text-muted));
	user-select: none;
}

.dashboard-sidebar-music-row-del {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	opacity: 0.25;
	color: var(--db-text-muted);
}

.dashboard-sidebar-music-row-del:hover {
	opacity: 0.75;
}

.dashboard-sidebar-music-row-del svg {
	width: 11px;
	height: 11px;
}

.dashboard-sidebar-music-results {
	max-height: 200px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 4px;
}

.dashboard-sidebar-music-search-input,
.dashboard-sidebar-music-import-input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: var(--db-bg-section, rgba(127, 127, 127, 0.08));
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-sm, 6px);
	color: var(--db-text);
	font-size: 0.68em;
	padding: 5px 8px;
	outline: none;
}

.dashboard-sidebar-music-search-input:focus,
.dashboard-sidebar-music-import-input:focus {
	border-color: var(--db-accent);
}

.dashboard-sidebar-music-search-input::placeholder,
.dashboard-sidebar-music-import-input::placeholder {
	color: var(--db-text-muted);
}

.dashboard-sidebar-music-import-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
}

.dashboard-sidebar-music-import-input {
	flex: 1;
	width: auto;
}

.dashboard-sidebar-music-text-btn {
	flex-shrink: 0;
	font-size: 0.62em;
	padding: 4px 9px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
	color: var(--db-text);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.dashboard-sidebar-music-text-btn:hover {
	border-color: var(--db-accent);
	color: var(--db-accent);
}

.dashboard-sidebar-music-empty {
	font-size: 0.65em;
	color: var(--db-text-muted);
	padding: 10px 4px;
	text-align: center;
	user-select: none;
}

.dashboard-sidebar-music-panel-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

/* ======================================================================
   IMMERSIVE LAYOUT (desktop/tablet only, >=641px)
   Full-bleed poster background; widget cards and section cards mixed in
   one free 12-column grid; every card is dark glass with light text.

   Guards mirror the stacked block: the whole chapter sits inside
   @media (min-width: 641px), the exact inverse of the phone block's
   max-width: 640px, and phones never receive data-layout="immersive"
   (resolveEffectiveLayout pins them to 'side') — so the phone CSS keeps
   winning by construction and the iOS backdrop-filter kill-switch stays
   untouched.
   ====================================================================== */
@media (min-width: 641px) {

	/* --- Token overrides: light text + guaranteed glass --------------------
	   Three identical blocks beat every theme layer by specificity + source
	   order: the base pair matches .apex-dashboard-root[data-theme="x"]
	   (0,2,0); the .theme-light/.theme-dark pairs (0,3,0) match the theme
	   polarity variant blocks. Source order (end of file) settles any tie.
	   Theme identity survives through --db-accent and the per-section
	   --db-sec-hue; the SURFACE tokens flip to translucent white so every
	   content surface inside a tile (cards, inputs, buttons, hovers) becomes
	   glass over the poster instead of opaque theme fills — flipping only the
	   text tokens would put white text on near-white cards. Inline
	   custom-color overrides (Appearance Studio) still win over all three —
	   an accepted, documented behavior.
	   backdrop-blur is deliberately NONE here: a dozen tiles each blurring
	   18px over a position:fixed poster re-rasterizes everything on every
	   scroll frame — the GPU pressure read as flicker and occasionally
	   blank tiles (the classic Chromium backdrop-filter pathology; iframes
	   worst). The glass look comes from the stronger fills instead; real
	   blur stays available as an opt-in via the glassBlur setting, which
	   re-emits this token inline on the root. */
	.apex-dashboard-root[data-layout="immersive"],
	.theme-light .apex-dashboard-root[data-layout="immersive"],
	.theme-dark .apex-dashboard-root[data-layout="immersive"] {
		--db-text: rgba(255, 255, 255, 0.96);
		--db-text-muted: rgba(255, 255, 255, 0.74);
		--db-text-faint: rgba(255, 255, 255, 0.52);
		--db-border-card: rgba(255, 255, 255, 0.24);
		--db-border-section: rgba(255, 255, 255, 0.24);
		/* Control borders too: the capture bar (quick-capture / file-search
		   widgets) and in-tile buttons draw --db-border-input / --db-border-btn,
		   which light themes define as SOLID light strokes (mono/Vermilion:
		   #dedcd2) — on the dark glass they read as a hard white ring instead
		   of glass. Same translucent-white family as the card borders. */
		--db-border-input: rgba(255, 255, 255, 0.24);
		--db-border-btn: rgba(255, 255, 255, 0.24);
		--db-border-add-section: rgba(255, 255, 255, 0.24);
		--db-backdrop-blur: none;
		/* Page-background token: the board is ALWAYS dark glass here, but the
		   theme's own --db-bg (e.g. nordic in a light Obsidian session is
		   near-white) used to fall through — the kanban column titles layer
		   --db-bg-section over --db-bg for their sticky opaque backdrop, so
		   they rendered white-on-white. Pin it dark with the scrim family. */
		--db-bg: #0e1116;
		/* Surface family: static glass — no blur dependency, stronger fills
		   (the scrim behind keeps the composite dark, light text reads on
		   every layer). */
		--db-bg-card: rgba(255, 255, 255, 0.10);
		--db-bg-card-hover: rgba(255, 255, 255, 0.16);
		--db-bg-section: rgba(255, 255, 255, 0.10);
		--db-bg-input: rgba(255, 255, 255, 0.14);
		--db-bg-btn: rgba(255, 255, 255, 0.12);
		--db-bg-btn-hover: rgba(255, 255, 255, 0.20);
		--db-bg-hover: rgba(255, 255, 255, 0.10);
		--db-bg-hover-strong: rgba(255, 255, 255, 0.16);
		--db-bg-add-section: rgba(255, 255, 255, 0.08);
		--db-bg-overlay: rgba(255, 255, 255, 0.12);
		/* Dialogs live OUTSIDE the root but mirror these tokens
		   (applyModalTheme): give them solid dark surfaces so white text on
		   mirrored translucent surfaces stays readable — the "modal opens
		   but its content is invisible" bug. */
		--db-bg-modal: #171a21;
		--db-bg-modal-raised: #1f232c;
	}

	/* --- Input legibility on the dark-glass board -------------------------
	   Obsidian's own field rules (`textarea, input[type='text'] { color:
	   var(--text-normal) }`) out-specify the plugin's per-input color rules,
	   so in a LIGHT Obsidian session every board input went dark-text-on-
	   dark-glass (typed text invisible — sticky-card task inputs, expense
	   fields). The immersive board is always dark glass with light text;
	   force the pair at the root so app.css cannot flip it per-field. */
	[data-layout="immersive"] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
	[data-layout="immersive"] textarea,
	[data-layout="immersive"] select {
		color: rgba(255, 255, 255, 0.92) !important;
	}
	[data-layout="immersive"] input::placeholder,
	[data-layout="immersive"] textarea::placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1;
	}

	/* Grouped library/folder headers: an explicit dark strip keeps the title
	   readable whatever glass/poster composite sits behind the tile — on a
	   bright poster the translucent white glass washed out to near-white and
	   swallowed the light title text. */
	[data-layout="immersive"] .dashboard-library-group-header {
		background: rgba(8, 10, 14, 0.38);
		border-bottom-color: rgba(255, 255, 255, 0.22);
		padding-left: 8px;
		padding-right: 8px;
	}
	[data-layout="immersive"] .dashboard-library-group-header .dashboard-library-group-name,
	[data-layout="immersive"] .dashboard-library-group-header .dashboard-library-group-count {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	/* --- Shell -------------------------------------------------------------- */
	[data-layout="immersive"] .dashboard-imm {
		position: relative; /* anchor for the corner controls */
		z-index: 1;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}

	/* --- Scrollbars: fully invisible on the immersive page ----------------
	   The board reads as a fixed poster composition; any scrollbar tint —
	   even macOS overlay thumbs — reads as a color defect at the right edge.
	   Kill BOTH scrollbar renderings (standard scrollbar-width, Chromium
	   121+, and the classic ::-webkit-scrollbar path) on the root and every
	   descendant. Wheel, trackpad and keyboard scrolling are untouched. This
	   chapter sits after every other ::-webkit-scrollbar rule in the file, so
	   it also wins any specificity tie against them. */
	[data-layout="immersive"],
	[data-layout="immersive"] * {
		scrollbar-width: none;
	}
	[data-layout="immersive"]::-webkit-scrollbar,
	[data-layout="immersive"] *::-webkit-scrollbar {
		display: none;
	}
	/* Exception: the workflow board's horizontal scrollbar is functional
	   signage — columns overflow to the right and the bar is how you tell.
	   Restore it with the wrap's own hover-reveal recipe (transparent until
	   hover, accent thumb), the same rhythm it uses in the normal layout. */
	[data-layout="immersive"] .dashboard-pipeline-wrap {
		scrollbar-width: auto;
	}
	[data-layout="immersive"] .dashboard-pipeline-wrap::-webkit-scrollbar {
		display: block;
	}

	/* The poster layer: banner image, full-bleed and fixed. The banner
	   rotator (startBannerImageRotation) drives it, including the shared
	   .dashboard-banner--fading crossfade. z-index -1: a POSITIONED sibling at
	   z-index 0 would paint AFTER static in-flow content (CSS painting order)
	   and swallow the board — negative keeps it behind everything while
	   staying inside .dashboard-imm's own stacking context. */
	[data-layout="immersive"] .dashboard-imm-bg {
		position: fixed;
		inset: 0;
		z-index: -1;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: opacity 0.6s ease;
	}
	/* Readability scrim: keeps the mid-dark average that light text needs,
	   whichever poster is up. Slightly stronger at the top so the centered
	   week calendar and capture field read cleanly. */
	[data-layout="immersive"] .dashboard-imm-bg-scrim {
		position: absolute;
		inset: 0;
		background: linear-gradient(rgba(8, 10, 14, 0.42), rgba(8, 10, 14, 0.30) 30%, rgba(8, 10, 14, 0.38));
	}

	/* --- Top region: clock centered, quick-notes bar re-flowed ---------------- */
	/* Top region spans the FULL page width; each row manages its own
	   measure (the input row centers at 440px, the chips row runs wide). */
	/* The top region lives INSIDE the scroll region: horizontal rails come
	   from the scroll region's padding; only the top breathing room is its
	   own. Everything scrolls away together. */
	[data-layout="immersive"] .dashboard-imm-top {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		width: 100%;
		box-sizing: border-box;
		padding: 28px 0 8px;
	}
	/* Didot — the same editorial serif the banner quotes default to. Its
	   high-contrast strokes read as a proper magazine masthead at clock
	   scale (macOS ships Didot; Windows falls to Bodoni MT/Georgia). */
	[data-layout="immersive"] .dashboard-imm-clock-time {
		font-family: var(--dashboard-imm-clock-font, Didot, 'Bodoni MT', 'Playfair Display', Georgia, serif);
		font-size: 5em;
		font-weight: 500;
		letter-spacing: 0.07em;
		line-height: 1;
		color: var(--dashboard-imm-clock-color, rgba(255, 255, 255, 0.97));
		text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
		font-variant-numeric: lining-nums;
		margin-left: 0.07em; /* optical centering against the tracking */
	}

	/* The quick-notes work bar flips from its side/stacked row (chips left,
	   capture right) into a centered column: capture field on top, chips
	   below — pure CSS re-flow, the DOM/render path is untouched.
	   Chrome-start-page styling: NO container panel — the capture field is a
	   wide translucent pill floating on the poster and the chips are ghost
	   buttons; the bar itself is fully transparent. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		background: none;
		border: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		padding: 0;
		box-sizing: border-box;
		/* Theme tray shadows (e.g. Capsule's sunken quick bar) must NOT paint
		   here: this container spans the FULL board width with zero radius —
		   an inset shadow reads as one huge rectangle around the input area. */
		box-shadow: none !important;
	}
	/* Capture field row first: the pill stretches the full bar width. */
	/* The input row keeps the compact 440px measure, centered; the chips
	   row below spans the FULL width and is not capped by the input. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-actions {
		order: 0;
		justify-content: center;
		gap: 5px;
		width: 100%;
		max-width: 440px;
		margin: 0 auto;
	}
	/* The capture field is a CARD-matched input: the same radius language as
	   the board tiles, no pencil icon up front, whitespace carried by the
	   textarea's own padding, nothing pre-rendered inside. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-capture {
		flex: 1 1 auto;
		background: color-mix(in srgb, rgba(8, 10, 14, 0.72) 78%, var(--db-bg-card));
		border: 1px solid rgba(255, 255, 255, 0.16);
		backdrop-filter: var(--db-backdrop-blur);
		-webkit-backdrop-filter: var(--db-backdrop-blur);
		border-radius: var(--db-radius-lg, 12px);
		padding: 0;
		overflow: hidden;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-capture:focus-within {
		border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 65%, rgba(255, 255, 255, 0.3));
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 22%, transparent);
	}
	/* The pencil goes away entirely (the field is a clean card). */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-capture-icon {
		display: none;
	}
	/* Kill the narrow cqw sizing: the field fills the card, its own padding
	   is the whitespace. Both the resting and focus-width rules of the base
	   bar are overridden. */
	/* The doubled class mirrors the base !important rule's specificity trick
	   (quick-note-config overrides carry the doubled class), so the immersive
	   padding wins the !important-vs-!important fight. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote .dashboard-quicknote-capture .dashboard-quicknote-capture-input.dashboard-quicknote-capture-input,
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-capture-input:focus {
		width: 100%;
		min-width: 0;
		height: 42px;
		min-height: 42px;
		line-height: 22px;
		padding: 10px 14px !important;
		background: transparent;
		font-size: 0.92em;
	}
	/* Cog: a proper card-matched button, sized to be an easy target. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-cog {
		width: 42px;
		height: 42px;
		flex: 0 0 42px;
		margin-top: 0;
		background: color-mix(in srgb, rgba(8, 10, 14, 0.72) 78%, var(--db-bg-card)) !important;
		border: 1px solid rgba(255, 255, 255, 0.16) !important;
		border-radius: var(--db-radius-lg, 12px) !important;
		color: rgba(255, 255, 255, 0.78) !important;
		opacity: 1;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-cog svg {
		width: 18px;
		height: 18px;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-cog:hover {
		color: rgba(255, 255, 255, 1) !important;
		border-color: rgba(255, 255, 255, 0.3) !important;
	}
	/* ...chips below: ghost pills — text on the poster, faint hover fill,
	   no chip backgrounds, no separators. The pills are invisible at rest,
	   so the PERCEIVED button spacing is gap + both neighbors' horizontal
	   padding; both stay tight here (3px gap, 6px pill padding ≈ 17px of
	   air between labels) — the side/stacked bar keeps its roomier recipe. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-nav {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		justify-content: center;
		flex-wrap: wrap;
		overflow-x: visible;
		gap: 3px;
		padding: 0 4px;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-chip {
		background: none;
		border: 1px solid transparent;
		color: rgba(255, 255, 255, 0.72);
		border-radius: 999px;
		padding: 3px 6px;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-chip::before {
		display: none;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-chip:hover {
		background: rgba(255, 255, 255, 0.14);
		border-color: rgba(255, 255, 255, 0.14);
		color: rgba(255, 255, 255, 0.96);
	}

	/* --- Scroll region: the one scrolling layer ------------------------------ */
	[data-layout="immersive"] .dashboard-scroll-region {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
		overflow-y: auto;
		/* Generous side rails at wide panes; the runtime narrows them as the
		   pane shrinks (sidebars opening) so cards keep their width —
		   --imm-h-pad is set by observeImmersiveGrid from the live width. */
		padding: 0 var(--imm-h-pad, 48px) 24px;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	[data-layout="immersive"] .dashboard-scroll-region:hover {
		scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
	}

	/* --- The grid: the kanban becomes a 12-column free board ----------------
	   Content-fit ("贴合") height model: rows are FINE 10px tracks with row-gap
	   0 (a row-gap between every fine track would multiply inside a span).
	   Each tile's real height is measured from its content by
	   refitImmersiveGrid and stamped as an explicit row span; the visual
	   vertical gap is the tile's own bottom margin, living INSIDE its span.
	   The .apex-dashboard-root prefix is load-bearing specificity: the
	   transparent-theme cluster sets `gap: 8px` at (0,3,0) — the shorthand
	   would silently reinstate an 8px row gap INSIDE every span. */
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: 10px; /* IMM_ROW_UNIT (immersive-grid.ts) — keep in sync */
		row-gap: 0;
		column-gap: var(--db-kanban-gap, 10px);
		align-content: start;
		overflow: visible; /* the scroll region owns scrolling */
		flex: 1;
	}

	/* --- Glass tiles ----------------------------------------------------------
	   A tile is ANY direct grid child carrying data-imm-id: a section row, a
	   widget card, or a refresh-swap mount wrapper (refreshDataWidget replaces
	   async-refresh widgets with a bare mount that carries the id). Tiles are
	   a stronger cast of the same translucent-white glass the inner surfaces
	   use (--db-bg-card above), so the board reads as one material with a
	   tile/content hierarchy.
	   Sizing: after each fit pass the tile carries an inline min-height /
	   max-height / height triple pinned to its spanned fill (immersive.ts
	   refitImmersiveGrid). The EXPLICIT height is load-bearing beyond the
	   clamp: min/max alone do not make the box definite for percentage
	   resolution, so internal height:100% chains — the library kanban view's
	   board → column scrollers — collapsed to auto, the board grew to its
	   tallest column and wheel-over-column scrolled the page instead of the
	   list. Content past the pin scrolls INSIDE the section's own scrollers
	   (the library files area, kanban columns). */
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id] {
		position: relative; /* containing block for the strips/delete chrome */
		/* BORDER-BOX is load-bearing: the fit pins height/min/max to
		   rowsToPx(span) and that math budgets the tile's own padding+border
		   INSIDE the spanned tracks (the 10px margin rides in there too). As
		   content-box every tile's box overshot its tracks by its chrome
		   (12+12 padding + 2 border = 26px), overlapping the tile below by
		   ~16px — worst right after a drag-resize ("cards overlap after
		   resizing"). */
		box-sizing: border-box;
		background: color-mix(in srgb, var(--db-bg-card) 35%, rgba(8, 10, 14, 0.74));
		border: 1px solid rgba(255, 255, 255, 0.22);
		backdrop-filter: var(--db-backdrop-blur);
		-webkit-backdrop-filter: var(--db-backdrop-blur);
		color: var(--db-text);
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
		overflow: hidden;
		min-width: 0;
		align-self: start;
		height: auto;
		margin-bottom: 10px; /* IMM_TILE_GAP — the visual vertical spacing */
		grid-column: auto;
		grid-row: auto;
	}
	/* Sections keep their NATIVE internal scrolling model (per-type
	   max-heights, horizontal card decks, kanban sticky) — overriding it to
	   overflow:visible backfired: cards decks are overflow-x:auto, and the
	   CSS quirk (one auto axis forces the other to auto) turned every deck
	   into a nested vertical scroller chasing the tile's size — the
	   "strobing sections" bug. The section-row base 500px cap is cleared so
	   the fit/user cap governs; content past the tile cap scrolls the TILE. */
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id].dashboard-section-row {
		max-height: none;
	}
	/* Mount-wrapped widget tiles: the mount is the glass tile; the widget
	   card inside goes transparent (no glass-on-glass double fill) and sizes
	   with its own content (height auto — the mount/tile handles the cap). */
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > .dashboard-sidebar-widget-mount {
		display: flex;
		flex-direction: column;
	}
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id] > .dashboard-sidebar-widget,
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > .dashboard-sidebar-widget.dashboard-sidebar-widget {
		/* Widgets are FIXED-HEIGHT tiles (the stacked sizing design): the
		   card fills the tile and manages its own internal scrolling. */
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}
	.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id] > .dashboard-sidebar-widget {
		background: transparent;
		border: none;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* The add-section ghost rides the end of the pack: a modest dashed tile
	   instead of the full-width slab. Auto placement lands it after the last
	   explicitly placed tile. Fixed pixel height — fine rows would make
	   "span 2" a 20px sliver. */
	[data-layout="immersive"] .dashboard-add-section {
		grid-column: auto / span 3;
		grid-row: auto / span 12;
		flex: none;
		margin-bottom: 0;
		border-color: rgba(255, 255, 255, 0.28);
		color: var(--db-text-muted);
		background: color-mix(in srgb, var(--db-bg-card) 25%, rgba(8, 10, 14, 0.55));
		backdrop-filter: var(--db-backdrop-blur);
		-webkit-backdrop-filter: var(--db-backdrop-blur);
	}

	/* --- Corner controls -------------------------------------------------------
	   The workspace switcher keeps its banner spot semantics (top-left); the
	   wand (background editor) moves top-right. Both hang off .dashboard-imm
	   (position: relative above). */
	[data-layout="immersive"] .dashboard-imm > .dashboard-workspace-switcher {
		top: 8px;
		left: 10px;
		z-index: 3;
	}
	/* Resting at half opacity: unlike the banner (surface hover reveals it),
	   there is no banner surface here — an invisible button on a poster is
	   undiscoverable. */
	[data-layout="immersive"] .dashboard-imm > .dashboard-imm-edit-btn {
		top: 8px;
		right: 10px;
		bottom: auto;
		z-index: 3;
		opacity: 0.45;
		color: var(--db-text);
		border-color: rgba(255, 255, 255, 0.25);
		background: rgba(8, 10, 14, 0.35);
	}
	[data-layout="immersive"] .dashboard-imm > .dashboard-imm-edit-btn:hover {
		opacity: 1;
	}
	[data-layout="immersive"] .dashboard-imm > .dashboard-imm-appearance-btn {
		position: absolute;
		top: 48px;
		right: 10px;
		z-index: 3;
		opacity: 0.7;
		color: var(--db-text);
		border: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}
	[data-layout="immersive"] .dashboard-imm > .dashboard-imm-appearance-btn:hover {
		opacity: 1;
		background: transparent !important;
		color: var(--db-accent, var(--interactive-accent));
	}
	[data-layout="immersive"] .dashboard-imm.dashboard-imm--locked > .dashboard-imm-appearance-btn { display: none; }

	/* --- Tile interactions: edge resize + reorder indicators ------------------
	   Resize is EDGE-BASED: the right edge drags width (ew), the bottom edge
	   drags height (ns), the corner does both. Strips are INSIDE the tile box
	   (tiles are overflow: hidden — a negative offset would be cropped). At
	   rest each strip shows a hairline accent bar on tile hover (the design-
	   tool affordance); during the drag the tile lifts out of the flow and
	   follows the pointer in raw pixels. */
	.dashboard-imm-resize-h,
	.dashboard-imm-resize-v,
	.dashboard-imm-resize-handle {
		position: absolute;
		z-index: 40;
		touch-action: none;
		opacity: 0;
		transition: opacity 0.15s ease;
	}
	.dashboard-imm-resize-h {
		top: 0;
		bottom: 14px;
		right: 0;
		width: 9px;
		cursor: ew-resize;
	}
	.dashboard-imm-resize-v {
		left: 0;
		right: 14px;
		bottom: 0;
		height: 9px;
		cursor: ns-resize;
	}
	.dashboard-imm-resize-handle {
		right: 0;
		bottom: 0;
		width: 16px;
		height: 16px;
		cursor: nwse-resize;
		background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.55) 54%, transparent 54%);
		border-bottom-right-radius: var(--db-radius-lg);
	}
	/* Hairline edge accents, revealed on tile hover. */
	.dashboard-imm-resize-h::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 2px;
		width: 2px;
		border-radius: 2px;
		background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 75%, white);
	}
	.dashboard-imm-resize-v::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 75%, white);
	}
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id]:hover > .dashboard-imm-resize-handle,
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id]:hover > .dashboard-imm-resize-h::after,
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id]:hover > .dashboard-imm-resize-v::after,
	.dashboard-imm-resize-h:hover::after,
	.dashboard-imm-resize-v:hover::after {
		opacity: 0.9;
	}

	/* Reorder drop indicators: accent glow on the leading/trailing edge of
	   the hovered tile (left half = insert before, right half = after). */
	.dashboard-imm-tile--over-left {
		box-shadow: -3px 0 0 0 var(--db-accent), 0 8px 28px rgba(0, 0, 0, 0.22);
	}
	.dashboard-imm-tile--over-right {
		box-shadow: 3px 0 0 0 var(--db-accent), 0 8px 28px rgba(0, 0, 0, 0.22);
	}
	.dashboard-imm-tile--dragging {
		opacity: 0.4;
	}
	/* Resize keeps the tile IN PLACE (in flow, no lift): an accent ring
	   marks the active card, content stays inert for the gesture. */
	.dashboard-imm-tile--resizing {
		outline: 2px solid var(--db-accent);
		outline-offset: -2px;
	}
	.dashboard-imm-tile--resizing > *:not([class*="dashboard-imm-resize"]) {
		pointer-events: none;
	}

	/* --- Everything is a card --------------------------------------------------
	   No "sections" on the immersive board: memo/todo/library tiles wear the
	   same card costume as widget tiles. Section chrome collapses to a card
	   header — smaller title, ghost hover-revealed controls, no grip (the
	   header IS the drag surface, see setupImmersiveDnD). */
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id].dashboard-section-row {
		padding: 12px 14px;
	}
	[data-layout="immersive"] .dashboard-section-header {
		margin-bottom: 6px;
		min-height: 22px;
		cursor: grab;
	}
	[data-layout="immersive"] .dashboard-section-header:active {
		cursor: grabbing;
	}
	[data-layout="immersive"] .dashboard-section-title-wrap {
		gap: 6px;
	}
	[data-layout="immersive"] .dashboard-section-title {
		font-size: 0.85em;
		font-weight: 600;
		letter-spacing: 0.01em;
	}
	[data-layout="immersive"] .dashboard-section-grip {
		display: none; /* retired: the header is the handle */
	}
	[data-layout="immersive"] .dashboard-section-toggle {
		opacity: 0.45;
	}
	/* Header controls: ghost icon buttons at rest, fully revealed on card
	   hover (the widget config-button recipe — a card full of lit buttons is
	   a panel, not a card). */
	[data-layout="immersive"] .dashboard-section-header-actions button {
		background: none;
		border: none;
		box-shadow: none;
		color: var(--db-text-faint);
		opacity: 0.35;
		transition: opacity 0.15s ease, color 0.15s ease;
	}
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id]:hover .dashboard-section-header-actions button {
		opacity: 1;
		color: var(--db-text-muted);
	}
	[data-layout="immersive"] .dashboard-section-header-actions button:hover {
		color: var(--db-text);
	}
	/* Library/tool toolbars lose their inner card box — the tile IS the card;
	   the search field keeps its input chrome (functional). */
	[data-layout="immersive"] .dashboard-library-toolbar,
	[data-layout="immersive"] .dashboard-dataview-toolbar {
		background: none;
		padding: 2px 0;
		margin-bottom: 6px;
	}
	[data-layout="immersive"] .dashboard-library-toolbar button,
	[data-layout="immersive"] .dashboard-dataview-toolbar button {
		background: none;
		border: none;
		box-shadow: none;
		color: var(--db-text-faint);
	}
	[data-layout="immersive"] .dashboard-library-toolbar button:hover,
	[data-layout="immersive"] .dashboard-dataview-toolbar button:hover {
		color: var(--db-text);
	}
	/* The add-card ghost reads as a shy tile, not a slab. */
	[data-layout="immersive"] .dashboard-add-section {
		font-size: 0.75em;
		letter-spacing: 0.04em;
	}

	/* Hover × on widget tiles (the visible removal affordance); the card's
	   own corner config gear shifts down so the chips stack. */
	/* Icon-only removal affordance: a small quiet × — NO background, no
	   border, no shadow (explicit !important: Obsidian's stock button styles
	   reappear under theme layers and read as a white chip that covered the
	   widget's own config gear). */
	.dashboard-imm-widget-del {
		position: absolute;
		top: 3px;
		right: 3px;
		z-index: 45;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none !important;
		background: none !important;
		box-shadow: none !important;
		outline: none;
		color: rgba(255, 255, 255, 0.55);
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.15s ease, color 0.15s ease;
	}
	.dashboard-imm-widget-del svg {
		width: 11px;
		height: 11px;
	}
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id]:hover > .dashboard-imm-widget-del,
	.dashboard-imm-widget-del:focus-visible {
		opacity: 1;
	}
	.dashboard-imm-widget-del:hover {
		color: #ff8080;
	}
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id] .dashboard-widget-cfg-btn {
		top: 28px;
	}

	/* The add-card button rides the chips row: same height as the function
	   buttons, pinned to the row's right edge (the top region spans the page
	   and never scrolls). As a mid-page fixed FAB it shadowed tiles near the
	   right edge and ate their resize-strip presses. */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-nav {
		position: relative;
		width: 100%;
		align-self: stretch;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-imm-add-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 8;
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		background: none;
		color: rgba(255, 255, 255, 0.75);
		cursor: pointer;
		transition: color 0.15s ease, transform 0.15s ease;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-imm-add-btn:hover {
		color: #ffffff;
		transform: translateY(-50%) scale(1.12);
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-imm-add-btn svg {
		width: 15px;
		height: 15px;
	}
	/* Without the quick-notes bar the button anchors to the top region's
	   right instead. */
	[data-layout="immersive"] .dashboard-imm-top > .dashboard-imm-add-btn {
		top: 8px;
		transform: none;
	}

	/* Move-drag landing preview: a dashed accent placeholder occupying the
	   exact grid slot the dragged card would take — the drop destination is
	   readable at a glance instead of inferred from edge glows. */
	.dashboard-imm-drop-ghost {
		border: 2px dashed color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 80%, white);
		background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
		border-radius: var(--db-radius-lg, 12px);
		margin-bottom: 10px;
		pointer-events: none;
		z-index: 5;
		box-sizing: border-box;
	}
	/* The collapse chevron has no role on immersive boards (tiles are always
	 * expanded — renderSection skips the collapsed class there). */
	[data-layout="immersive"] .dashboard-section-toggle {
		display: none;
	}
	/* The "Today" chip follows the same light ghost language as its
	   siblings (the base bar paints it accent — loud on the poster). */
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-chip.dashboard-quicknote-today,
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-today .dashboard-quicknote-icon {
		color: rgba(255, 255, 255, 0.72) !important;
		font-weight: 500;
	}
	[data-layout="immersive"] .dashboard-imm-top .dashboard-quicknote-chip.dashboard-quicknote-today:hover {
		color: rgba(255, 255, 255, 0.96) !important;
	}
	/* Pointer-move session: no text selection, grabbing cursor, and the
	 * pressed tile doesn't hijack scroll. */
	.dashboard-imm-pointer-dragging {
		user-select: none;
		-webkit-user-select: none;
		cursor: grabbing;
	}
	.dashboard-imm-pointer-dragging * {
		cursor: grabbing !important;
	}
	/* Move-handle surfaces must not start NATIVE TEXT-SELECTION drags: a
	 * press on header text + move made the browser hijack the gesture (all
	 * pointer events cease — no move, no up), which read as "memo/todo cards
	 * can't be moved". Selection off; click/dblclick-rename unaffected. */
	[data-layout="immersive"] .dashboard-section-header,
	[data-layout="immersive"] .dashboard-kanban > [data-imm-id] > .dashboard-card-header,
	[data-layout="immersive"] .dashboard-kanban > [data-widget-key] {
		user-select: none;
		-webkit-user-select: none;
	}
}

/* ============================================================
   RSS section: subscription list, reader modal, config modal.
   ============================================================ */

/* --- Section content --- */
.dashboard-rss-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

.dashboard-rss-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* The filter control is the shared toolbar dropdown (all / unread / per
   feed-group) — house classes carry its look; only a small size tweak. */
.dashboard-rss-toolbar .dashboard-toolbar-dropdown {
	flex-shrink: 0;
}

.dashboard-rss-count {
	font-size: 11px;
	color: var(--db-text-faint);
}

.dashboard-rss-markread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--db-radius-sm);
	color: var(--db-text-faint);
	cursor: pointer;
}

.dashboard-rss-markread:hover {
	color: var(--db-accent);
	background: var(--db-bg-hover);
}

.dashboard-rss-markread svg {
	width: 15px;
	height: 15px;
}

.dashboard-rss-refreshing {
	font-size: 11px;
	color: var(--db-text-faint);
}

/* --- Article rows --- */
.dashboard-rss-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-rss-list:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-rss-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--db-radius-md);
	background: var(--db-bg-card);
	border: 1px solid var(--db-border-card);
	cursor: pointer;
}

.dashboard-rss-item:hover {
	background: var(--db-bg-card-hover);
}

.dashboard-rss-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--db-accent);
	flex-shrink: 0;
}

.dashboard-rss-item.is-read .dashboard-rss-dot {
	background: var(--db-border-card);
}

.dashboard-rss-item-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.dashboard-rss-item-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--db-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.dashboard-rss-item.is-read .dashboard-rss-item-title {
	color: var(--db-text-faint);
	font-weight: 500;
}

/* Meta row: date leads, feed label trails and SHRINKS (min-width:0 + the
   row's own overflow clamp keep a long feed name from spilling under the
   download button — the row's width is bounded by item-main, which is
   bounded by the button's left edge). */
.dashboard-rss-item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--db-text-faint);
	min-width: 0;
	overflow: hidden;
}

.dashboard-rss-item-feed {
	color: color-mix(in srgb, var(--db-accent) 65%, var(--db-text));
	min-width: 0;
	flex: 0 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-rss-item-date {
	flex-shrink: 0;
}

/* Download / open-note button: a flat icon button. !important on the box
   properties because Obsidian's `button:not(.clickable-icon)` chrome
   (interactive bg + shadow) otherwise paints over it — the quicknote-chip
   idiom. svg sizing also needs !important: app.css's `svg.svg-icon` ties
   width to var(--icon-size), which ties lose on cascade order. */
.dashboard-rss-item-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	/* padding 0 or Obsidian's generic button padding (4px 12px) eats the
	   32px box and the flex-item svg shrinks to the leftover ~8px. */
	padding: 0 !important;
	border: none !important;
	border-radius: var(--db-radius-sm);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-muted) !important;
	cursor: pointer;
}

.dashboard-rss-item-save:hover {
	color: var(--db-accent) !important;
	background: var(--db-bg-hover) !important;
}

.dashboard-rss-item-save svg {
	width: 17px !important;
	height: 17px !important;
	flex-shrink: 0;
}

.dashboard-rss-item-save.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.dashboard-rss-empty,
.dashboard-rss-more {
	font-size: 12px;
	color: var(--db-text-faint);
	padding: 10px 4px;
	text-align: center;
}

.dashboard-rss-error {
	font-size: 11px;
	color: var(--db-danger);
	cursor: help;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Unconfigured state --- */
.dashboard-rss-empty-config {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 12px;
}

.dashboard-rss-empty-config-icon {
	color: var(--db-text-faint);
}

.dashboard-rss-empty-config-icon svg {
	width: 28px;
	height: 28px;
}

.dashboard-rss-empty-config-text {
	font-size: 13px;
	color: var(--db-text-muted);
}

.dashboard-rss-empty-config-hint {
	font-size: 11px;
	color: var(--db-text-faint);
	margin-bottom: 8px;
}

/* --- Reader modal --- */
.modal-container.dashboard-rss-reader .modal {
	max-width: 860px;
	width: 94%;
	height: 86vh;
	max-height: 86vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dashboard-rss-reader-modal {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}

.dashboard-rss-reader-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	padding: 18px 20px 6px;
}

.dashboard-rss-reader-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border);
	flex-shrink: 0;
}

.dashboard-rss-reader-headmain {
	flex: 1;
	min-width: 0;
}

.dashboard-rss-reader-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--db-text);
	line-height: 1.35;
}

.dashboard-rss-reader-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--db-text-faint);
	margin-top: 5px;
}

.dashboard-rss-reader-feed {
	color: color-mix(in srgb, var(--db-accent) 65%, var(--db-text));
}

.dashboard-rss-reader-actions {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}

/* Reader header buttons: flat icon buttons with the same anti-Obsidian-chrome
   !important treatment as the row save button (modals are body-level, so
   app.css button rules apply there too). */
/* Labeled save-to-vault button (top-right of the reader): a real pill so the
   affordance is unmissable. Anti-chrome !important set included — app.css
   button chrome would repaint it. */
.dashboard-rss-reader-save {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	height: 32px;
	padding: 0 14px !important;
	border: 1px solid color-mix(in srgb, var(--db-accent) 45%, transparent) !important;
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--db-accent) 16%, transparent) !important;
	box-shadow: none !important;
	color: var(--db-text) !important;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.dashboard-rss-reader-save:hover {
	background: color-mix(in srgb, var(--db-accent) 26%, transparent) !important;
}

.dashboard-rss-reader-save.is-saved {
	border-color: color-mix(in srgb, var(--db-text-muted) 40%, transparent) !important;
	background: var(--db-bg-hover) !important;
	color: var(--db-text-muted) !important;
	font-weight: 500;
}

/* Labeled close button (right of 保存到仓库): a neutral pill, same footprint
   as the save button so the two read as one actions pair. */
.dashboard-rss-reader-close {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	height: 32px;
	padding: 0 12px !important;
	border: 1px solid var(--db-border-card) !important;
	border-radius: 999px !important;
	background: var(--db-bg-hover) !important;
	box-shadow: none !important;
	color: var(--db-text-muted) !important;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.dashboard-rss-reader-close:hover {
	color: var(--db-text) !important;
	border-color: var(--db-text-muted) !important;
}

.dashboard-rss-reader-close-icon {
	display: inline-flex;
	align-items: center;
}

.dashboard-rss-reader-close-icon svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
}

.dashboard-rss-reader-save-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.dashboard-rss-reader-save-icon svg {
	width: 15px !important;
	height: 15px !important;
	flex-shrink: 0;
}

.dashboard-rss-reader-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--db-radius-sm);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-muted) !important;
	cursor: pointer;
}

.dashboard-rss-reader-btn:hover {
	color: var(--db-accent) !important;
	background: var(--db-bg-hover) !important;
}

.dashboard-rss-reader-btn svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
}

.dashboard-rss-reader-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-top: 12px;
	padding-right: 8px;
	font-size: 14px;
	line-height: 1.7;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-rss-reader-body:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-rss-reader-body img {
	max-width: 100%;
}

.dashboard-rss-reader-loading {
	color: var(--db-text-faint);
	padding: 32px 12px;
	text-align: center;
	font-size: 13px;
}

.dashboard-rss-reader-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 12px;
}

.dashboard-rss-reader-empty-text {
	font-size: 13px;
	color: var(--db-text-muted);
}

/* --- Config modal source rows --- */
.dashboard-rss-cfg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.dashboard-rss-cfg-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-rss-cfg-row.is-error .dashboard-rss-cfg-url {
	border-color: var(--db-danger);
}

/* Group management rows + per-feed group select. */
.dashboard-rss-cfg-groups {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}

.dashboard-rss-cfg-group-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border-radius: var(--db-radius-sm);
	background: var(--db-bg-hover);
}

.dashboard-rss-cfg-group-name {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--db-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-rss-cfg-group-remove svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
}

.dashboard-rss-cfg-group-add-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-rss-cfg-group-add-input {
	flex: 1;
	min-width: 0;
}

.dashboard-rss-cfg-group-select {
	flex: 0 0 auto;
	max-width: 130px;
}

/* Bucket-dimension row (groups section head): label + inline select. */
.dashboard-rss-cfg-groupby-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.dashboard-rss-cfg-groupby-label {
	font-size: 12px;
	color: var(--db-text-muted);
	flex-shrink: 0;
}

.dashboard-rss-cfg-groupby-select {
	flex: 0 0 auto;
}

/* OPML interchange + add-feed actions row: one right-aligned group. */
.dashboard-rss-cfg-opml-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
}

.dashboard-rss-cfg-opml-btn {
	font-size: 12px;
}

.dashboard-rss-cfg-opml-file {
	display: none;
}

.dashboard-rss-cfg-name {
	flex: 0 0 24%;
	min-width: 0;
}

.dashboard-rss-cfg-url {
	flex: 1;
	min-width: 0;
}

/* Per-feed failure status (row rides before the delete button): a compact
 * danger chip; the hover title carries the feed's full error reason. */
.dashboard-rss-cfg-status {
	flex-shrink: 0;
	font-size: 10.5px;
	padding: 1px 7px;
	border-radius: 999px;
	white-space: nowrap;
	max-width: 88px;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: help;
}

.dashboard-rss-cfg-status.is-error {
	color: var(--db-danger);
	background: color-mix(in srgb, var(--db-danger) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-danger) 30%, transparent);
}

/* Config-modal row delete: bigger icon + the anti-chrome !important set. */
.dashboard-rss-cfg-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--db-radius-sm);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-faint) !important;
	cursor: pointer;
}

.dashboard-rss-cfg-remove:hover {
	color: var(--db-danger) !important;
	background: var(--db-bg-hover) !important;
}

.dashboard-rss-cfg-remove svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0;
}

.dashboard-rss-cfg-add {
	margin-top: 4px;
}

.dashboard-rss-cfg-folder-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dashboard-rss-cfg-folder {
	flex: 1;
	min-width: 0;
}

/* --- Phones: trim informational chrome, keep the controls --- */
.is-mobile:not(.is-tablet) .dashboard-rss-count,
.is-mobile:not(.is-tablet) .dashboard-rss-refreshing {
	display: none;
}

.is-mobile:not(.is-tablet) .dashboard-rss-item-meta {
	gap: 6px;
	font-size: 10px;
}

/* ==========================================================================
   Skills section — AI skill library (see src/skill-section + skill-store)
   ========================================================================== */

.dashboard-skillsec-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	/* Height chain into the row's max-height: content must be able to
	   shrink (穿模 fix — a non-shrinking middle layer lets the grid grow
	   past the section bottom into the add-section button). */
	flex: 1;
	overflow: hidden;
}

.dashboard-skillsec-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	flex: 1;
	overflow: hidden;
}

.dashboard-skillsec-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dashboard-skillsec-toolbar .dashboard-toolbar-dropdown {
	flex-shrink: 0;
}

.dashboard-skillsec-search {
	flex: 0 1 200px;
	min-width: 120px;
	padding: 4px 10px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.75em;
	font-family: var(--db-font, var(--font-interface));
	outline: none;
}

.dashboard-skillsec-search:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-skillsec-search::placeholder {
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-skillsec-import {
	flex-shrink: 0;
	padding: 4px 12px;
	font-size: 0.75em;
}

.dashboard-skillsec-scanning {
	font-size: 11px;
	color: var(--db-text-faint);
}

.dashboard-skillsec-scanning.is-hidden {
	display: none;
}

.dashboard-skillsec-stats {
	font-size: 11px;
	color: var(--db-text-faint);
	margin: 0 2px;
}

/* --- Card grid --- */
.dashboard-skillsec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 8px;
	align-content: start;
	/* Rows must size to their tallest card: without this, a height-capped
	   scrolling grid under-sizes auto rows and the card's shrinkable
	   children (desc first — overflow:hidden zeroes its min-height) collapse
	   — the "flat view shows title-only cards" bug. */
	grid-auto-rows: min-content;
	overflow-y: auto;
	min-height: 0;
	/* Fill the results area (flat view) — the group grids override this
	   back to content height inside the scrolling groups container. */
	flex: 1;
	padding-right: 2px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

/* Grouped view: the groups container owns the scroll; each group's grid
   renders at full height inside it (only the ungrouped backlog paginates). */
.dashboard-skillsec-groups {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	min-height: 0;
	flex: 1;
	padding-right: 2px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-skillsec-groups:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-skillsec-group-grid {
	overflow: visible;
	flex: none;
}

.dashboard-skillsec-group.is-collapsed .dashboard-skillsec-group-grid {
	display: none;
}

.dashboard-skillsec-group-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
	cursor: pointer;
	user-select: none;
	/* Sticky inside the scrolling groups container. */
	position: sticky;
	top: 0;
	z-index: 2;
}

.dashboard-skillsec-group-head:hover {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 14%, var(--db-bg-hover, rgba(128, 128, 128, 0.08)));
}

.dashboard-skillsec-group-chevron {
	display: inline-flex;
	color: var(--db-text-muted, var(--text-muted));
	transition: transform 0.15s ease;
}

.dashboard-skillsec-group.is-collapsed .dashboard-skillsec-group-chevron {
	transform: rotate(-90deg);
}

.dashboard-skillsec-group-chevron svg {
	width: 13px;
	height: 13px;
}

.dashboard-skillsec-group-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skillsec-group-count {
	font-size: 10.5px;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-card, rgba(128, 128, 128, 0.1));
	border-radius: 9px;
	padding: 1px 7px;
}

.dashboard-skillsec-collapse-all {
	flex-shrink: 0;
}

/* View-mode toggles (分组 / 看板): house pill + active state (ticktick
   view-toggle convention — accent ring while the mode is on). */
.dashboard-skillsec-toggle {
	flex-shrink: 0;
}

.dashboard-skillsec-toggle.active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

/* Kanban mode: one column per group, horizontal scroll (pipeline-board
   geometry); each column scrolls its own card stack. */
.dashboard-skillsec-kanban {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	flex: 1;
	min-height: 0;
	align-items: stretch;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-skillsec-kanban:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-skillsec-kcol {
	min-width: 262px;
	width: 262px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	max-height: 100%;
}

.dashboard-skillsec-kcol.is-collapsed .dashboard-skillsec-kcol-list {
	display: none;
}

/* Kanban column heads span exactly the card width (inset by the list's 2px
   padding so their edges align with the cards below). Full-width heads keep
   every column gutter reading the same — fit-content heads of varying
   widths made the top-row gaps uneven (Rae: the 1↔2 gap is the benchmark). */
.dashboard-skillsec-kcol > .dashboard-skillsec-group-head {
	margin: 0 2px 2px 2px;
}

.dashboard-skillsec-kcol-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	min-height: 0;
	flex: 1;
	padding: 2px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-skillsec-kcol-list .dashboard-skillsec-card {
	flex: none;
}

/* Drag-to-regroup feedback: the dragged card dims, the hovered column
   lights up with an accent wash + dashed rail. */
.dashboard-skillsec-card.is-dragging {
	opacity: 0.45;
}

.dashboard-skillsec-kcol.is-drop-target {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 9%, transparent);
	outline: 1.5px dashed var(--db-accent, var(--interactive-accent));
	outline-offset: -3px;
	border-radius: var(--db-radius-md, 10px);
}

.dashboard-skillsec-grid:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-skillsec-empty {
	grid-column: 1 / -1;
	padding: 18px 10px;
	text-align: center;
	font-size: 12px;
	color: var(--db-text-faint);
}

.dashboard-skillsec-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 10px 8px;
	border-radius: var(--db-radius-md);
	background: var(--db-bg-card);
	border: 1px solid var(--db-border-card);
	cursor: pointer;
	overflow: hidden;
}

.dashboard-skillsec-card:hover {
	background: var(--db-bg-card-hover);
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 32%, var(--db-border-card));
}

/* Flex-shrink belt: the card is a column flex and its desc/actions rows
   must never be squeezed (overflow:hidden on desc would let it collapse to
   zero the moment a grid row under-sizes the card). */
.dashboard-skillsec-card > * {
	flex-shrink: 0;
}

.dashboard-skillsec-card.is-pinned {
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 45%, var(--db-border-card));
}

.dashboard-skillsec-card-top {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: 22px;
}

.dashboard-skillsec-name-row {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.dashboard-skillsec-pin {
	display: inline-flex;
	color: var(--db-accent, var(--interactive-accent));
	flex-shrink: 0;
}

.dashboard-skillsec-pin svg {
	width: 12px;
	height: 12px;
}

.dashboard-skillsec-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Card update date, riding the badges line (right of the source badges). */
.dashboard-skillsec-date {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 10px;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
}

.dashboard-skillsec-badges {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.dashboard-skillsec-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.dashboard-skillsec-badge.is-claude {
	color: #ff9d7a;
	background: rgba(255, 157, 122, 0.13);
}

.dashboard-skillsec-badge.is-codex {
	color: #8ab8ff;
	background: rgba(138, 184, 255, 0.13);
}

.dashboard-skillsec-badge.is-workbuddy {
	color: #7adcc0;
	background: rgba(122, 220, 192, 0.13);
}

.dashboard-skillsec-badge.is-custom {
	color: var(--db-text-faint);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.12));
}

.dashboard-skillsec-card .dashboard-skillsec-badges {
	align-self: flex-start;
}

.dashboard-skillsec-desc {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--db-text-muted, var(--text-muted));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Launch buttons: one per agent store the skill is installed in. Compact —
   three buttons (Claude + Codex + WorkBuddy) must fit one card row without
   wrapping: 10px labels + tight padding leave ~200px of the ~228px card
   interior. */
.dashboard-skillsec-actions {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.dashboard-skillsec-launch {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 5px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
	color: var(--db-text, var(--text-normal));
	font-size: 10px;
	cursor: pointer;
	white-space: nowrap;
}

/* Hover/press highlight rides BORDER + SURFACE only — the content color
 * NEVER flips to accent (Rae's bug): themes/snippets that paint a button's
 * BACKGROUND accent on hover would leave accent-on-accent icon/text
 * invisible inside a fully-highlighted chip. */
.dashboard-skillsec-launch:hover,
.dashboard-skillsec-launch:active,
.dashboard-skillsec-launch:focus-visible {
	border-color: var(--db-accent, var(--interactive-accent));
	color: var(--db-text, var(--text-normal));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, var(--db-bg-hover, rgba(128, 128, 128, 0.08)));
}

.dashboard-skillsec-launch:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 35%, transparent);
}

.dashboard-skillsec-launch svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}

/* Card menu: dim-but-visible at rest (low-contrast themes made a fully
   transparent icon-only button read as missing), full contrast on hover;
   always visible on touch, where hover doesn't exist. padding:0 is
   load-bearing — Obsidian's base `button` rule carries 4px 12px, and 24px
   of padding inside a fixed 22px button leaves the svg's flex box at ≤0,
   crushing it to zero width (the invisible-icon bug). */
.dashboard-skillsec-menu {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	opacity: 0.55;
}

.dashboard-skillsec-card:hover .dashboard-skillsec-menu {
	opacity: 1;
}

.dashboard-skillsec-menu:hover {
	color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-hover);
}

.dashboard-skillsec-menu svg {
	width: 14px;
	height: 14px;
}

/* --- Phones: trim informational chrome, keep the controls --- */
.is-mobile .dashboard-skillsec-menu {
	opacity: 1;
}

.is-mobile:not(.is-tablet) .dashboard-skillsec-stats,
.is-mobile:not(.is-tablet) .dashboard-skillsec-scanning {
	display: none;
}

.is-mobile:not(.is-tablet) .dashboard-skillsec-search {
	flex: 1 1 100%;
	max-width: none;
}

.is-mobile:not(.is-tablet) .dashboard-skillsec-grid {
	grid-template-columns: 1fr;
}

/* Tablet padding reset (the buttons above carry their own padding:0 now,
   so only the launch buttons need their non-zero inset restored here). */
.is-tablet button.dashboard-skillsec-launch {
	padding: 2px 6px;
}

/* ==========================================================================
   Skills detail modal (see src/skill-detail-modal)
   ========================================================================== */

.dashboard-skillsec-detail-header {
	align-items: center;
}

/* Wide reading surface: SKILL.md bodies run long, so the detail modal takes
   most of the viewport and scrolls its body. The width rides the .modal
   element (centered by Obsidian) — putting it on an inner div instead lets
   the content spill right past the clip ("only the left half shows").
   Keyed on .modal (not .modal--dashboard) so it can't be missed. */
.modal.dashboard-skillsec-detail-modal {
	width: min(880px, 92vw);
	max-width: min(880px, 92vw);
}

/* Fill the widened .modal — the inner container would otherwise keep its
   content-based ~528px width. */
.dashboard-skillsec-detail-modal .dashboard-skillsec-detail {
	width: 100%;
	box-sizing: border-box;
}

.dashboard-skillsec-detail .dashboard-modal-body {
	max-height: 72vh;
	overflow-y: auto;
}

.dashboard-skillsec-detail .dashboard-skillsec-detail-doc {
	max-height: 52vh;
}

.dashboard-skillsec-detail-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.dashboard-skillsec-detail-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-skillsec-detail-pin:hover,
.dashboard-skillsec-detail-pin.is-pinned {
	color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-hover);
}

.dashboard-skillsec-detail-pin svg {
	width: 14px;
	height: 14px;
}

.dashboard-skillsec-detail-desc {
	font-size: 12px;
	line-height: 1.5;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 10px;
}

.dashboard-skillsec-instance {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
	margin-bottom: 6px;
}

.dashboard-skillsec-instance-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-skillsec-instance-path {
	font-size: 11px;
	color: var(--db-text, var(--text-normal));
	font-family: var(--font-monospace);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-skillsec-instance-date {
	font-size: 10px;
	color: var(--db-text-faint);
}

.dashboard-skillsec-instance-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.dashboard-skillsec-instance-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.08));
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-skillsec-instance-btn:hover {
	color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-hover);
}

.dashboard-skillsec-instance-delete:hover {
	color: var(--db-danger, #e93147);
}

.dashboard-skillsec-instance-btn svg {
	width: 13px;
	height: 13px;
}

.dashboard-skillsec-detail-doc {
	max-height: 320px;
	overflow-y: auto;
	padding: 10px 12px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
	background: var(--db-bg-input, rgba(128, 128, 128, 0.06));
	font-size: 12.5px;
	line-height: 1.55;
}

.dashboard-skillsec-detail-doc-loading,
.dashboard-skillsec-detail-doc-error {
	font-size: 11px;
	color: var(--db-text-faint);
}

/* ==========================================================================
   Skills import modal (see src/skill-import-modal)
   ========================================================================== */

.dashboard-skillsec-import-file {
	display: none;
}

.dashboard-skillsec-import-path-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.dashboard-skillsec-import-path {
	flex: 1;
	min-width: 0;
	padding: 5px 10px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8em;
	font-family: var(--font-monospace);
	outline: none;
}

.dashboard-skillsec-import-path:focus {
	border-color: var(--db-border-input-focus, var(--interactive-accent));
}

.dashboard-skillsec-import-status.is-ok {
	color: var(--db-success, #40b881);
}

.dashboard-skillsec-import-status.is-error {
	color: var(--db-danger, #e93147);
}

.dashboard-skillsec-import-preview {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px dashed var(--db-border-card);
}

.dashboard-skillsec-import-preview.is-hidden {
	display: none;
}

.dashboard-skillsec-import-preview-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skillsec-import-preview-desc {
	font-size: 11.5px;
	color: var(--db-text-muted, var(--text-muted));
	margin-top: 3px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dashboard-skillsec-import-preview-count {
	font-size: 10.5px;
	color: var(--db-text-faint);
	margin-top: 3px;
}

.dashboard-skillsec-import-target {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	flex-wrap: wrap;
}

.dashboard-skillsec-import-target-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	cursor: pointer;
}

.dashboard-skillsec-import-target-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skillsec-import-target-dir {
	font-size: 10.5px;
	color: var(--db-text-faint);
	font-family: var(--font-monospace);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-skillsec-import-conflict {
	flex-basis: 100%;
	font-size: 10.5px;
	color: var(--db-warning, #d4a72c);
}

.dashboard-skillsec-import-conflict.is-hidden {
	display: none;
}

/* --- GitHub candidate list (import modal) --- */
.dashboard-skillsec-import-github.is-hidden {
	display: none;
}

.dashboard-skillsec-import-github-hint {
	font-size: 10.5px;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 6px;
}

.dashboard-skillsec-import-github-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 180px;
	overflow-y: auto;
}

.dashboard-skillsec-import-github-row {
	padding: 2px 0;
}

.dashboard-skillsec-import-github-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	cursor: pointer;
}

.dashboard-skillsec-import-github-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	flex-shrink: 0;
}

.dashboard-skillsec-import-github-path {
	font-size: 10.5px;
	color: var(--db-text-faint);
	font-family: var(--font-monospace);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Skills group picker modal (see src/skill-group-picker-modal)
   ========================================================================== */

.dashboard-skillsec-grouppick-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
	margin-bottom: 6px;
	cursor: pointer;
}

.dashboard-skillsec-grouppick-row:hover {
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-skillsec-grouppick-row.is-active {
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, transparent);
}

.dashboard-skillsec-grouppick-check {
	display: inline-flex;
	width: 16px;
	color: var(--db-accent, var(--interactive-accent));
	flex-shrink: 0;
}

.dashboard-skillsec-grouppick-check svg {
	width: 14px;
	height: 14px;
}

.dashboard-skillsec-grouppick-label {
	flex: 1;
	font-size: 13px;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skillsec-grouppick-glyph {
	display: inline-flex;
	color: var(--db-text-muted, var(--text-muted));
	flex-shrink: 0;
}

.dashboard-skillsec-grouppick-glyph svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Skills config modal — group manager rows (see src/skill-section-config-modal)
   ========================================================================== */

.dashboard-skillsec-cfg-groups {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}

.dashboard-skillsec-cfg-group {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: var(--db-radius-sm, 6px);
	border: 1px solid var(--db-border-card);
}

.dashboard-skillsec-cfg-group.is-dragging {
	opacity: 0.7;
	border-style: dashed;
}

.dashboard-skillsec-cfg-group-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 26px;
	color: var(--db-text-faint);
	cursor: grab;
	touch-action: none;
	flex-shrink: 0;
}

.dashboard-skillsec-cfg-group-handle svg {
	width: 14px;
	height: 14px;
}

.dashboard-skillsec-cfg-group-name {
	flex: 0 1 34%;
	min-width: 90px;
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8em;
	outline: none;
}

.dashboard-skillsec-cfg-group-keywords {
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	border: 1px solid var(--db-border-input, rgba(255, 255, 255, 0.08));
	border-radius: var(--db-radius-sm, 6px);
	background: var(--db-bg-input, rgba(255, 255, 255, 0.05));
	color: var(--db-text, var(--text-normal));
	font-size: 0.8em;
	outline: none;
}

.dashboard-skillsec-cfg-group-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: var(--db-radius-sm, 6px);
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-skillsec-cfg-group-delete:hover {
	color: var(--db-danger, #e93147);
	background: var(--db-bg-hover);
}

.dashboard-skillsec-cfg-group-delete svg {
	width: 13px;
	height: 13px;
}

.dashboard-skillsec-cfg-add-group {
	margin-top: 2px;
}

/* Custom-folder input + native folder-picker browse button. */
.dashboard-skillsec-cfg-folders-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-skillsec-cfg-folders-row .dashboard-modal-input {
	flex: 1;
	min-width: 0;
}

/* --- New-skill button config modal (see src/skill-create-config-modal) --- */
.dashboard-skillsec-createcfg-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	flex-wrap: wrap;
}

.dashboard-skillsec-createcfg-label {
	flex: 0 0 64px;
	font-size: 12px;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-skillsec-createcfg-row select {
	flex: 0 1 180px;
}

.dashboard-skillsec-createcfg-namewrap {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 200px;
}

.dashboard-skillsec-createcfg-namewrap .dashboard-modal-input {
	flex: 1;
	min-width: 0;
}

.dashboard-skillsec-createcfg-ds {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
}

/* Config modal: creator-skill summary + edit launcher row. */
.dashboard-skillsec-cfg-create-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dashboard-skillsec-cfg-create-summary {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--db-text-muted, var(--text-muted));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Pipeline section — agent-driven workflow board (see src/pipeline-section)
   ========================================================================== */

/* The section body hosts one horizontally scrolling board. Base
   .dashboard-section-cards already gives flex:1 + overflow:hidden; claim the
   full row width (flex-wrap puts lone children on their own line anyway). */
.dashboard-section-cards.dashboard-pipeline {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* The pipeline body sets display:flex after the generic collapsed rule, so
   explicitly hide it when the whole workflow section is folded. */
.dashboard-section-row--collapsed[data-section-type="pipeline"] > .dashboard-pipeline {
	display: none;
}

.dashboard-pipeline-board {
	display: flex;
	gap: 10px;
	min-height: 0;
	overflow: visible;
}

.dashboard-pipeline-col {
	/* Trello geometry, lighter spirit: a translucent stage wash with a hair
	   outline instead of an opaque slab — the section background breathes
	   through, dark themes stop reading as heavy black panels. */
	min-width: 160px;
	width: 272px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	max-height: 100%;
	background: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 5%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-pipe-accent, #6366f1) 13%, transparent);
	border-radius: 12px;
	padding: 8px;
	transition: box-shadow 0.15s ease;
}

.dashboard-pipeline-col--drag-over {
	/* Trello drop feedback: an accent ring, not a fill. */
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-pipe-accent, #6366f1) 70%, transparent);
}

.dashboard-pipeline-col-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 2px 4px;
	flex-shrink: 0;
}

.dashboard-pipeline-col-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--db-pipe-accent, var(--db-accent, #6366f1));
}

.dashboard-pipeline-col-title {
	/* Trello list header: small, bold, strong ink; no underline. The count
	   badge sits right beside it — a spacer pushes actions to the edge. */
	font-size: 0.78em;
	font-weight: 700;
	color: var(--db-text, var(--text-normal));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 1 auto;
	min-width: 0;
}

.dashboard-pipeline-col-spacer {
	flex: 1;
}

.dashboard-pipeline-col-count {
	font-size: 0.62em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	background: color-mix(in srgb, var(--db-text-muted, #888888) 14%, transparent);
	border-radius: 999px;
	padding: 0 7px;
	line-height: 16px;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.dashboard-pipeline-col-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

/* Compact icon button shared by stage skills, per-card skills and the column
   "+" (keeps out of the card's text flow). */
button.dashboard-pipeline-skill-btn,
button.dashboard-pipeline-col-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

button.dashboard-pipeline-skill-btn:hover,
button.dashboard-pipeline-col-add:hover {
	background: color-mix(in srgb, var(--db-pipe-accent, var(--db-accent, #6366f1)) 18%, transparent);
	color: var(--db-text, var(--text-normal));
}

button.dashboard-pipeline-skill-btn svg,
button.dashboard-pipeline-col-add svg {
	width: 13px;
	height: 13px;
}

/* Card-scope skill buttons are drag-reorderable (pointer drag, desktop):
   the dragged button rides with the pointer while its siblings live-swap
   around it. */
button.dashboard-pipeline-skill-btn {
	cursor: grab;
}

button.dashboard-pipeline-skill-btn--reordering {
	cursor: grabbing;
	/* Lifted + accent ring so the moving button reads as "in hand". */
	transform: scale(1.12);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-pipe-accent, var(--db-accent, #6366f1)) 55%, transparent);
	z-index: 2;
	position: relative;
	transition: none;
}

.dashboard-pipeline-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	min-height: 48px;
	flex: 1;
	/* Hide the per-column vertical scrollbar (wheel/trackpad still scroll) —
	   the library kanban-column recipe: a row of several stages must not show
	   a clutter of gutters. */
	scrollbar-width: none;
}

.dashboard-pipeline-cards::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}


.dashboard-pipeline-card {
	position: relative;
	/* Trello card, younger: the theme's opaque card base LIFTED toward white
	   (dark themes get slate instead of near-black), shadows softened so a
	   full board doesn't read heavy. Generous top padding: the chips row
	   breathes below the card's top edge (Rae: "still not enough" at 8px). */
	--pipe-card-lift: color-mix(in srgb, var(--db-bg-modal-raised, var(--db-bg-modal, var(--db-bg-card, #fff))) 88%, #ffffff);
	background: var(--pipe-card-lift);
	border: none;
	border-radius: 8px;
	padding: 8px 10px 8px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(9, 30, 66, 0.13), 0 0 1px rgba(9, 30, 66, 0.1);
	transition: box-shadow 0.12s ease, background 0.12s ease;
}

.dashboard-pipeline-card:hover {
	box-shadow: 0 3px 8px rgba(9, 30, 66, 0.18), 0 0 1px rgba(9, 30, 66, 0.12);
}

.dashboard-pipeline-card-label {
	height: 6px;
	border-radius: 3px;
	margin: 8px 0 7px;
	background: var(--db-pipe-accent, var(--db-accent, #6366f1));
}

.dashboard-pipeline-card--dragging {
	opacity: 0.45;
}

/* Manual sorting shows the exact insertion side, matching the checklist's
   drop-above/drop-below cue while the card is moved live under the pointer. */
.dashboard-pipeline-card--drop-above::before,
.dashboard-pipeline-card--drop-below::after {
	content: '';
	position: absolute;
	left: 7px;
	right: 7px;
	height: 3px;
	border-radius: 3px;
	background: var(--db-accent, var(--interactive-accent));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	z-index: 2;
	pointer-events: none;
}

.dashboard-pipeline-card--drop-above::before { top: -5px; }
.dashboard-pipeline-card--drop-below::after { bottom: -5px; }

.dashboard-pipeline-card-title {
	font-size: 0.78em;
	font-weight: 500;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 14px;
}

.dashboard-pipeline-card-chips {
	/* Chips are the card's FIRST flow row: they sit at the same 8px top
	   padding a chip-less card's title does, so the top gap is identical
	   with or without property labels; the gap to the title lives below. */
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 7px 0;
}

.dashboard-pipeline-chip {
	/* Trello badge: small squared chip, not a pill. */
	font-size: 0.625em;
	line-height: 18px;
	padding: 0 5px;
	border-radius: 4px;
	color: var(--db-text-muted, var(--text-muted));
	background: color-mix(in srgb, var(--db-text-muted, #888888) 14%, transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.dashboard-pipeline-chip--prop {
	/* Colored value chips: background arrives inline (stable per value),
	   text always white. */
	color: #ffffff;
	font-weight: 600;
	background: var(--db-accent, #6366f1);
}

.dashboard-pipeline-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-top: 6px;
}

/* Unconfigured state */
.dashboard-pipeline-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 12px;
}

.dashboard-pipeline-empty-title {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-pipeline-empty-hint {
	font-size: 0.72em;
	color: var(--db-text-muted, var(--text-muted));
	text-align: center;
	max-width: 320px;
}

/* --- Config modal rows --- */

.dashboard-pipeline-cfg-stages,
.dashboard-pipeline-cfg-skills {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dashboard-pipeline-cfg-stage-row,
.dashboard-pipeline-cfg-skill-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.dashboard-pipeline-cfg-skill {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: var(--db-radius-sm, 6px);
}

.dashboard-pipeline-cfg-input {
	flex: 1;
	min-width: 90px;
}

.dashboard-pipeline-cfg-input--slug {
	flex: 0 1 120px;
	min-width: 80px;
}

.dashboard-pipeline-cfg-select {
	min-width: 84px;
	flex: 0 0 auto;
}

/* Agent select: a FIXED narrow slot (Rae, 2026-10-19) riding the skill-name
 * row. A free-width select sizes to its widest option — the coming-soon
 * "ZCode（即将上线）" entry blew it out and wrapped the whole row. 92px fits
 * every normal agent label; the greyed coming-soon text clips, which is
 * fine for a placeholder entry. */
.dashboard-pipeline-cfg-select--agent {
	width: 92px;
	min-width: 0;
	flex: 0 0 92px;
}

.dashboard-pipeline-cfg-textarea {
	/* Flexes beside the expand button (full-prompt popup); width:auto keeps
	   the old 100% from fighting the row's flex layout. */
	flex: 1;
	min-width: 0;
	width: auto;
	resize: vertical;
}

/* Tall read-and-edit textarea inside the full-prompt popup. */
.dashboard-large-text {
	width: 100%;
	min-height: 320px;
	resize: vertical;
	font-size: 0.85em;
	line-height: 1.5;
}

.dashboard-pipeline-cfg-color {
	width: 32px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.10));
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

button.dashboard-pipeline-cfg-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

button.dashboard-pipeline-cfg-icon-btn:hover {
	background: color-mix(in srgb, var(--db-accent, #6366f1) 18%, transparent);
	color: var(--db-text, var(--text-normal));
}

button.dashboard-pipeline-cfg-icon-btn--danger:hover {
	background: color-mix(in srgb, var(--db-danger, #ef4444) 20%, transparent);
	color: var(--db-danger, #ef4444);
}

button.dashboard-pipeline-cfg-icon-btn svg {
	width: 14px;
	height: 14px;
}

.dashboard-pipeline-cfg-hint {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	flex: 1 1 100%;
}

.dashboard-pipeline-cfg-toggle {
	width: 16px;
	height: 16px;
	accent-color: var(--db-accent, var(--interactive-accent));
	flex-shrink: 0;
}

/* --- Phones: narrower columns, chip trim --- */
@media (max-width: 641px) {
	.dashboard-pipeline-col {
		min-width: 150px;
		width: 150px;
		padding: 6px;
	}

	.dashboard-pipeline-card-chips {
		display: none;
	}

	.dashboard-pipeline-cfg-stage-row,
	.dashboard-pipeline-cfg-skill-row {
		gap: 4px;
	}
}

/* Skill-name input + picker button row (pipeline config; quick-note reuses
   its own path-row class for the same shape). */
.dashboard-pipeline-cfg-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 180px;
}

/* Stage editor column headers (Label / Value / Folder) aligned with the
   stage row inputs below them. */
.dashboard-pipeline-cfg-stage-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
	padding-right: 116px; /* color + reorder/delete button cluster width */
}

.dashboard-pipeline-cfg-head-cell {
	flex: 1;
	min-width: 90px;
}

.dashboard-pipeline-cfg-head-cell--slug {
	flex: 0 1 120px;
	min-width: 80px;
}

/* ── 2026-10-06 adjustments: right-aligned actions, column resize,
      scope checklist (transparency layers superseded by the Trello look) ── */

/* Skill buttons sit at the card's bottom-right. */
.dashboard-pipeline-card-actions {
	justify-content: flex-end;
}

/* Keep the resize hit target without painting a divider or hover stripe. */
.dashboard-pipeline-col {
	position: relative;
}

.dashboard-pipeline-col-resize {
	position: absolute;
	top: 0;
	right: -3px;
	width: 12px;
	height: 100%;
	cursor: col-resize;
	border-radius: 0 var(--db-radius-md, 10px) var(--db-radius-md, 10px) 0;
	touch-action: none;
	z-index: 8;
}

.dashboard-pipeline-col-resize,
.dashboard-pipeline-col-resize:hover,
.dashboard-pipeline-col-resize:active { background: transparent; }

.dashboard-countdown-popup-time { position: relative; }
.dashboard-countdown-time-picker-trigger {
	min-width: 42px;
	padding: 3px 6px;
	border: 1px solid var(--db-border-input, var(--background-modifier-border));
	border-radius: var(--db-radius-sm, 4px);
	background: var(--db-bg-input, var(--background-primary));
	color: var(--db-text, var(--text-normal));
	font: inherit;
	cursor: pointer;
}
.dashboard-countdown-time-picker-trigger:hover { border-color: var(--db-accent, var(--interactive-accent)); }
.dashboard-countdown-time-options {
	position: absolute;
	top: calc(100% + 4px);
	z-index: 10002;
	display: grid;
	grid-template-columns: repeat(4, minmax(34px, 1fr));
	gap: 3px;
	width: 180px;
	max-height: 172px;
	padding: 6px;
	overflow-y: auto;
	border: 1px solid var(--db-border-card, var(--background-modifier-border));
	border-radius: var(--db-radius-md, 8px);
	background: var(--db-bg-modal, var(--background-primary));
	box-shadow: var(--db-shadow-card, 0 6px 18px rgba(0, 0, 0, 0.28));
}
.dashboard-countdown-time-options--hour { left: 78px; }
.dashboard-countdown-time-options--minute { right: 0; }
.dashboard-countdown-time-option {
	padding: 5px 2px;
	border: 0;
	border-radius: var(--db-radius-sm, 4px);
	background: transparent;
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
}
.dashboard-countdown-time-option:hover,
.dashboard-countdown-time-option.is-selected {
	background: var(--db-accent, var(--interactive-accent));
	color: var(--text-on-accent, white);
}

/* Stage-scope item checklist in the prompt modal. */
.dashboard-skill-scope {
	border: 1px solid var(--db-border-card, rgba(255, 255, 255, 0.1));
	border-radius: var(--db-radius-sm, 6px);
	padding: 8px 10px;
	margin-bottom: 10px;
}

.dashboard-skill-scope-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 6px;
}

.dashboard-skill-scope-title {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skill-scope-hint {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-skill-scope-list {
	display: flex;
	flex-direction: column;
	max-height: 160px;
	overflow-y: auto;
	gap: 2px;
}

.dashboard-skill-scope-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 2px 4px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.72em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-skill-scope-item:hover {
	background: color-mix(in srgb, var(--db-accent, #6366f1) 10%, transparent);
}

.dashboard-skill-scope-check {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	accent-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-skill-scope-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRELLO skin (pipelineConfig.boardStyle: 'trello')
   A deliberately foreign, fixed-palette skin: soft pastel stage-tinted
   columns, clean white cards, Trello's own ink — it ignores the plugin
   theme's surface tokens on purpose; only Obsidian's light/dark mode flips
   the palette. The youthfulness lives in the COLORS (latte stage tints over
   white), not in translucency — everything is opaque, Trello-textured.
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-pipeline--trello {
	--tl-col-base: #ffffff;
	--tl-card: #fbf8f1;
	--tl-ink: #172b4d;
	--tl-muted: #626f86;
	--tl-shadow: 9, 30, 66;
	--tl-chip-bg: rgba(9, 30, 66, 0.08);
}

.theme-dark .dashboard-pipeline--trello {
	--tl-col-base: #1f222b;
	--tl-card: #2b2f38;
	--tl-ink: #e6e9ef;
	--tl-muted: #9aa4b5;
	--tl-shadow: 0, 0, 0;
	--tl-chip-bg: rgba(230, 233, 239, 0.1);
}

/* Columns: opaque, borderless, a SOFT pastel wash of the stage color over
   the base — 选题 reads apricot-cream, 草稿 powder blue, and so on. */
.dashboard-pipeline--trello .dashboard-pipeline-col {
	background: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 10%, var(--tl-col-base));
	border: none;
}

.dashboard-pipeline--trello .dashboard-pipeline-col--drag-over {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-pipe-accent, #6366f1) 75%, transparent);
}

.dashboard-pipeline--trello .dashboard-pipeline-col-title {
	color: var(--tl-ink);
}

.dashboard-pipeline--trello .dashboard-pipeline-col-count {
	color: var(--tl-muted);
	background: var(--tl-chip-bg);
}

/* Cards: clean opaque surface + Trello's signature soft shadow. */
.dashboard-pipeline--trello .dashboard-pipeline-card {
	background: var(--tl-card);
	box-shadow: 0 1px 2px rgba(var(--tl-shadow), 0.18), 0 0 1px rgba(var(--tl-shadow), 0.14);
}

.dashboard-pipeline--trello .dashboard-pipeline-card:hover {
	background: var(--tl-card);
	box-shadow: 0 4px 9px rgba(var(--tl-shadow), 0.24), 0 0 1px rgba(var(--tl-shadow), 0.16);
}

.dashboard-pipeline--trello .dashboard-pipeline-card-title {
	color: var(--tl-ink);
}

.dashboard-pipeline--trello .dashboard-pipeline-chip {
	color: var(--tl-muted);
	background: var(--tl-chip-bg);
}

/* Trello skin: value chips keep their per-value colors (inline wins). */
.dashboard-pipeline--trello .dashboard-pipeline-chip--prop {
	color: #ffffff;
}

.dashboard-pipeline--trello button.dashboard-pipeline-skill-btn,
.dashboard-pipeline--trello button.dashboard-pipeline-col-add {
	color: var(--tl-muted);
}

.dashboard-pipeline--trello button.dashboard-pipeline-skill-btn:hover,
.dashboard-pipeline--trello button.dashboard-pipeline-col-add:hover {
	background: rgba(var(--tl-shadow), 0.08);
	color: var(--tl-ink);
}

/* ── Card footer: due + checklist at the left, skills at the right ── */
.dashboard-pipeline-card-foot {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 7px;
	flex-wrap: wrap;
}

.dashboard-pipeline-foot-spacer {
	flex: 1;
}

button.dashboard-pipeline-foot-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 20px;
	padding: 0;
	/* Flat icon + text: no chrome of any kind, even against Obsidian's
	   global button styles (quicknote-chip !important convention). */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.62em;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease;
}

button.dashboard-pipeline-foot-btn svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

button.dashboard-pipeline-foot-btn:hover {
	/* Flat by design: hover brightens the text only. */
	background: transparent !important;
	color: var(--db-text, var(--text-normal));
}

/* A set due reads stronger than the unset affordance. */
button.dashboard-pipeline-foot-btn.is-set {
	color: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 55%, var(--db-text, var(--text-normal)));
}

/* ── Expanded checklist body ── */
.dashboard-pipeline-tasks {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 7px;
	padding: 7px 8px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--db-text-muted, #888) 8%, transparent);
	max-height: 180px;
	overflow-y: auto;
}

.dashboard-pipeline-task {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 0.68em;
	color: var(--db-text, var(--text-normal));
}

.dashboard-pipeline-task.is-done .dashboard-pipeline-task-text {
	text-decoration: line-through;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-pipeline-task-check {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	translate: 0 1px;
	accent-color: var(--db-pipe-accent, var(--db-accent, #6366f1));
	margin: 0;
}

.dashboard-pipeline-task-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pipeline-task-due {
	flex-shrink: 0;
	font-size: 0.9em;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
}

.dashboard-pipeline-tasks-empty {
	font-size: 0.66em;
	color: var(--db-text-muted, var(--text-muted));
	line-height: 1.5;
}

/* Trello skin: fixed-palette coverage for the new footer pieces. */
.dashboard-pipeline--trello button.dashboard-pipeline-foot-btn {
	color: var(--tl-muted);
}

.dashboard-pipeline--trello button.dashboard-pipeline-foot-btn:hover {
	background: transparent !important;
	color: var(--tl-ink);
}

.dashboard-pipeline--trello button.dashboard-pipeline-foot-btn.is-set {
	color: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 55%, var(--tl-ink));
}

.dashboard-pipeline--trello .dashboard-pipeline-task {
	color: var(--tl-ink);
}

.dashboard-pipeline--trello .dashboard-pipeline-tasks {
	background: rgba(var(--tl-shadow), 0.05);
}

/* Tablet reset: the new compact icon-ish buttons join the padding reset. */
.is-tablet button.dashboard-pipeline-foot-btn {
	padding: 0 6px;
}

/* Inline card-title rename (section-title input pattern, title-scale). */
.dashboard-pipeline-card-title-input {
	width: 100%;
	background: var(--db-bg-input, transparent);
	border: 1px solid var(--db-border-input-focus, var(--db-accent, #6366f1));
	border-radius: 5px;
	color: var(--db-text, var(--text-normal));
	font-size: 0.95em;
	font-weight: 500;
	padding: 1px 5px;
	outline: none;
}

.dashboard-pipeline--trello .dashboard-pipeline-card-title-input {
	color: var(--tl-ink);
	border-color: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 60%, transparent);
}

/* ── Left value-filter rail (platform / project) ── */
.dashboard-pipeline-wrap {
	/* THE single horizontal scroller: rail + columns are one row inside it,
	   so they always share the same height and ONE bottom scrollbar spans
	   the whole section. The rail travels with the columns when scrolled. */
	flex: 1 1 100%;
	display: flex;
	gap: 10px;
	min-width: 0;
	min-height: 0;
	overflow-x: scroll;
	overflow-y: hidden;
}

.dashboard-pipeline-wrap::-webkit-scrollbar {
	height: 10px;
}

.dashboard-pipeline-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-pipeline-wrap::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 5px;
}

.dashboard-pipeline-wrap:hover::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 45%, transparent);
}

.dashboard-pipeline-wrap .dashboard-pipeline-board {
	/* Grow to fill when columns fit; never shrink below the columns' natural
	   width, so overflow goes to the wrap's scrollbar. */
	flex: 1 0 auto;
	min-width: 0;
}

.dashboard-pipeline-rail {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 0 128px;
	width: 128px;
	/* Sibling of the columns inside the shared scroller — same height by
	   flex stretch, no strip mirroring needed. Own scrollbar hidden (wheel
	   still scrolls). */
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	padding: 6px;
	border-radius: 10px;
	/* Neutral light-gray container (Rae): a muted-token wash keeps it gray in
	   both theme polarities; the accent tint is gone. */
	background: color-mix(in srgb, var(--db-text-muted, #888888) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-text-muted, #888888) 16%, transparent);
}

.dashboard-pipeline-rail::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.dashboard-pipeline-rail-dims {
	display: flex;
	gap: 3px;
	margin-bottom: 4px;
	flex-shrink: 0;
}

button.dashboard-pipeline-rail-dim {
	flex: 1;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.64em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

button.dashboard-pipeline-rail-dim.is-active {
	/* Neutral gray family (the rail sits outside the columns, so the stage
	   accent variable is unset here — its fallback read as purple). */
	background: color-mix(in srgb, var(--db-text-muted, #888888) 18%, transparent);
	color: var(--db-text, var(--text-normal));
}

button.dashboard-pipeline-rail-item {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 24px;
	padding: 2px 7px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--db-text, var(--text-normal));
	font-size: 0.66em;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease;
}

button.dashboard-pipeline-rail-item .dashboard-pipeline-rail-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pipeline-rail-count {
	flex-shrink: 0;
	color: var(--db-text-muted, var(--text-muted));
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
}

button.dashboard-pipeline-rail-item:hover {
	background: color-mix(in srgb, var(--db-text-muted, #888888) 14%, transparent);
}

button.dashboard-pipeline-rail-item.is-active {
	background: color-mix(in srgb, var(--db-text-muted, #888888) 16%, transparent);
}

button.dashboard-pipeline-rail-item.is-all {
	color: var(--db-text-muted, var(--text-muted));
	font-weight: 600;
	margin-bottom: 2px;
}

button.dashboard-pipeline-rail-item.is-all.is-active {
	color: var(--db-text, var(--text-normal));
	box-shadow: none;
}

/* Trello skin rail coverage */
.dashboard-pipeline--trello .dashboard-pipeline-rail {
	/* Trello's own list gray — the skin ignores theme tokens on purpose. */
	background: #f1f2f4;
	border: none;
}

.theme-dark .dashboard-pipeline--trello .dashboard-pipeline-rail {
	background: #22272e;
}

.dashboard-pipeline--trello button.dashboard-pipeline-rail-item {
	color: var(--tl-ink);
}

.dashboard-pipeline--trello .dashboard-pipeline-rail-count,
.dashboard-pipeline--trello button.dashboard-pipeline-rail-dim,
.dashboard-pipeline--trello button.dashboard-pipeline-rail-item.is-all {
	color: var(--tl-muted);
}

.dashboard-pipeline--trello button.dashboard-pipeline-rail-item.is-all.is-active {
	color: var(--tl-ink);
}

/* Phones: the rail becomes a horizontal chip strip above the board. */
@media (max-width: 641px) {
	.dashboard-pipeline-wrap {
		flex-direction: column;
		overflow: visible;
	}

	.dashboard-pipeline-wrap .dashboard-pipeline-board {
		flex: 1 1 auto;
		overflow-x: auto;
	}

	.dashboard-pipeline-rail {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 5px;
	}

	.dashboard-pipeline-rail-dims {
		margin-bottom: 0;
		margin-right: 3px;
		flex-shrink: 0;
	}

	button.dashboard-pipeline-rail-dim,
	button.dashboard-pipeline-rail-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	button.dashboard-pipeline-rail-item.is-active {
		box-shadow: inset 0 -2px 0 var(--db-pipe-accent, var(--db-accent, #6366f1));
	}
}

/* ── 2026-10-07 refinements ── */

/* Sort button: fixed icon; the chosen mode renders as text beside it. */
button.dashboard-pipeline-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.dashboard-pipeline-sort-label {
	font-size: 0.68em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
}

button.dashboard-pipeline-sort-btn svg {
	flex-shrink: 0;
}

/* Empty filter dimension: a quiet hint so the rail never strands the user. */
.dashboard-pipeline-rail-empty {
	font-size: 0.62em;
	color: var(--db-text-muted, var(--text-muted));
	padding: 6px 7px;
	line-height: 1.5;
}

/* Archive affordance: hover-revealed beside the delete button (top-right),
   ghost-styled instead of the delete button's dark dot. */
.dashboard-pipeline-card .dashboard-pipeline-archive-btn {
	right: 28px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	border-radius: 5px;
}

.dashboard-pipeline-card .dashboard-pipeline-archive-btn:hover {
	background: color-mix(in srgb, var(--db-pipe-accent, #6366f1) 16%, transparent);
	color: var(--db-text, var(--text-normal));
}

.dashboard-pipeline--trello .dashboard-pipeline-card .dashboard-pipeline-archive-btn {
	color: var(--tl-muted);
}

.dashboard-pipeline--trello .dashboard-pipeline-card .dashboard-pipeline-archive-btn:hover {
	background: rgba(var(--tl-shadow), 0.08);
	color: var(--tl-ink);
}

/* Immersive layout: THEME-skin cards turn translucent so tiles don't read
   as opaque slabs against the poster background. The Trello skin keeps its
   fully opaque cards everywhere — its look is the point. */
.dashboard-imm .dashboard-pipeline:not(.dashboard-pipeline--trello):not(.dashboard-pipeline--solid):not(.dashboard-pipeline--blush) .dashboard-pipeline-card {
	background: color-mix(in srgb, var(--db-bg-modal-raised, var(--db-bg-modal, var(--db-bg-card))) 78%, transparent);
}

.dashboard-imm .dashboard-pipeline:not(.dashboard-pipeline--trello):not(.dashboard-pipeline--solid):not(.dashboard-pipeline--blush) .dashboard-pipeline-card:hover {
	background: color-mix(in srgb, var(--db-bg-modal-raised, var(--db-bg-modal, var(--db-bg-card))) 86%, transparent);
}

/* Workflow sections are desktop-only (agent dispatch needs the desktop
   agents); the renderer hides the row on phones/tablets via this class. */
.dashboard-section-row--pipeline-off-mobile {
	display: none;
}

/* Pipeline cards' hover-reveal tools (delete + archive share the library
   delete button's base, which hides via opacity/pointer-events — the reveal
   must match THIS container class or the buttons stay unreachable). */
.dashboard-pipeline-card:hover .dashboard-library-card-delete,
.dashboard-pipeline-card .dashboard-library-card-delete:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Rail VALUE items ride the latte monochrome ramp (inline background +
   --rail-ink inline): ink flips white/slate with the surface depth. */
button.dashboard-pipeline-rail-value {
	color: var(--rail-ink, #ffffff);
	font-weight: 600;
	border-radius: 7px;
}

.dashboard-pipeline-rail-value .dashboard-pipeline-rail-count {
	color: color-mix(in srgb, var(--rail-ink, #ffffff) 75%, transparent);
}

button.dashboard-pipeline-rail-value:hover {
	background: inherit;
	filter: brightness(1.06);
}

button.dashboard-pipeline-rail-value.is-active {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rail-ink, #ffffff) 70%, transparent);
}

/* Skill buttons: one stable color per skill (the property-chip palette),
   white glyph — inline background wins over the ghost base. */
button.dashboard-pipeline-skill-btn.dashboard-pipeline-skill-btn--colored {
	/* Pastel button + deep ink glyph: pastels cannot carry white icons. */
	color: #4a4f5e;
	border-radius: 6px;
}

button.dashboard-pipeline-skill-btn--colored:hover {
	background: inherit;
	color: #374050;
	filter: brightness(1.05) saturate(1.08);
}

/* Trello skin: neutral gray for the rail tabs too (accent fallback = purple). */
.dashboard-pipeline--trello button.dashboard-pipeline-rail-dim.is-active {
	background: rgba(var(--tl-shadow), 0.1);
	color: var(--tl-ink);
}

.dashboard-pipeline--trello button.dashboard-pipeline-rail-item:hover {
	background: rgba(var(--tl-shadow), 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOLID duotone skin (pipelineConfig.boardStyle: 'solid')
   Two colors, period: every column ONE flat color (the teal theme hue),
   note cards a second flat color (warm cream / charcoal), and ALL buttons,
   property chips and rail values wear ONE gradient of the theme hue's depth
   variants. Ignores plugin theme tokens; follows Obsidian light/dark only.
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-pipeline--solid {
	/* Color A: avocado green (columns + gradients). Color B: milky cards. */
	--sd-col: #dfe9cb;
	--sd-card: #fbf8f1;
	--sd-ink: #2f3a26;
	--sd-muted: #6c7a5e;
	/* Flat accent carriers (Rae: no gradients) — light avocado + dark ink. */
	--sd-accent: #a9c88a;
	--sd-accent-ink: #2f3a26;
	--sd-shadow: 9, 30, 66;
	/* Card tokens are mode-invariant: color B is milky always, its ink dark. */
	--sd-card: #fbf8f1;
	--sd-card-ink: #2f3a26;
	--sd-card-muted: #6c7a5e;
}

.theme-dark .dashboard-pipeline--solid {
	--sd-col: #2a3323;
	--sd-ink: #e7ecdc;
	--sd-muted: #9aa88c;
	--sd-accent: #557838;
	--sd-accent-ink: #ffffff;
	--sd-shadow: 0, 0, 0;
}

/* Columns: one flat color, borderless. */
.dashboard-pipeline--solid .dashboard-pipeline-col {
	background: var(--sd-col);
	border: none;
}

.dashboard-pipeline--solid .dashboard-pipeline-col--drag-over {
	box-shadow: 0 0 0 2px #6e9a50;
}

.dashboard-pipeline--solid .dashboard-pipeline-col-title {
	color: var(--sd-ink);
}

.dashboard-pipeline--solid .dashboard-pipeline-col-count {
	color: var(--sd-muted);
	background: rgba(var(--sd-shadow), 0.1);
}

/* Cards: the second flat color + the shared soft shadow. */
.dashboard-pipeline--solid .dashboard-pipeline-card {
	background: var(--sd-card);
	box-shadow: 0 1px 2px rgba(var(--sd-shadow), 0.18), 0 0 1px rgba(var(--sd-shadow), 0.14);
}

.dashboard-pipeline--solid .dashboard-pipeline-card:hover {
	box-shadow: 0 4px 9px rgba(var(--sd-shadow), 0.24), 0 0 1px rgba(var(--sd-shadow), 0.16);
}

.dashboard-pipeline--solid .dashboard-pipeline-card-title {
	color: var(--sd-card-ink);
}

/* Property chips, skill buttons and rail VALUE items: ONE shared gradient
   (!important beats the inline per-value colors these carry in other skins). */
.dashboard-pipeline--solid .dashboard-pipeline-chip--prop {
	background: var(--sd-grad) !important;
	color: #ffffff;
}

.dashboard-pipeline--solid button.dashboard-pipeline-skill-btn--colored {
	background: var(--sd-grad) !important;
	color: #ffffff;
}

.dashboard-pipeline--solid button.dashboard-pipeline-rail-value {
	background: var(--sd-grad) !important;
	color: #ffffff;
}

.dashboard-pipeline--solid button.dashboard-pipeline-rail-value .dashboard-pipeline-rail-count {
	color: rgba(255, 255, 255, 0.78);
}

/* Quiet chrome: footer buttons, archive ghost, checklist, rail shell. */
.dashboard-pipeline--solid .dashboard-pipeline-card button.dashboard-pipeline-foot-btn,
.dashboard-pipeline--solid .dashboard-pipeline-card button.dashboard-pipeline-skill-btn:not(.dashboard-pipeline-skill-btn--colored),
.dashboard-pipeline--solid .dashboard-pipeline-card .dashboard-pipeline-archive-btn {
	color: var(--sd-card-muted);
}

.dashboard-pipeline--solid button.dashboard-pipeline-col-add,
.dashboard-pipeline--solid button.dashboard-pipeline-rail-dim,
.dashboard-pipeline--solid button.dashboard-pipeline-rail-item.is-all {
	color: var(--sd-muted);
}

.dashboard-pipeline--solid .dashboard-pipeline-chip {
	color: var(--sd-card-muted);
	background: rgba(var(--sd-shadow), 0.08);
}

.dashboard-pipeline--solid .dashboard-pipeline-tasks {
	background: rgba(var(--sd-shadow), 0.05);
}

.dashboard-pipeline--solid .dashboard-pipeline-task {
	color: var(--sd-card-ink);
}

/* The rail shell is a "big card" too: color A. */
.dashboard-pipeline--solid .dashboard-pipeline-rail {
	background: var(--sd-col);
	border: none;
}

.dashboard-pipeline--solid button.dashboard-pipeline-rail-dim.is-active {
	background: rgba(var(--sd-shadow), 0.12);
	color: var(--sd-ink);
}

.dashboard-pipeline--solid button.dashboard-pipeline-rail-item:hover {
	background: rgba(var(--sd-shadow), 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLUSH rose skin (pipelineConfig.boardStyle: 'blush') — Rae's four colors:
   columns #F7D6D0 · cards #FFF5F5 · gradient #E2B4BD→#4A4A4A · ink #4A4A4A.
   Fixed palette in BOTH modes (a printed rose card, even on dark Obsidian).
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-pipeline--blush {
	--bl-col: #f7d6d0;
	--bl-card: #fff5f5;
	--bl-ink: #4a4a4a;
	--bl-muted: color-mix(in srgb, #4a4a4a 68%, #fff5f5);
	--bl-accent: #e2b4bd;
	--bl-accent-ink: #4a4a4a;
	--bl-shadow: 74, 74, 74;
}

.dashboard-pipeline--blush .dashboard-pipeline-col {
	background: var(--bl-col);
	border: none;
}

.dashboard-pipeline--blush .dashboard-pipeline-col--drag-over {
	box-shadow: 0 0 0 2px rgba(74, 74, 74, 0.55);
}

.dashboard-pipeline--blush .dashboard-pipeline-col-title {
	color: var(--bl-ink);
}

.dashboard-pipeline--blush .dashboard-pipeline-col-count {
	color: var(--bl-muted);
	background: color-mix(in srgb, #4a4a4a 10%, transparent);
}

.dashboard-pipeline--blush .dashboard-pipeline-card {
	background: var(--bl-card);
	box-shadow: 0 1px 2px rgba(var(--bl-shadow), 0.18), 0 0 1px rgba(var(--bl-shadow), 0.14);
}

.dashboard-pipeline--blush .dashboard-pipeline-card:hover {
	box-shadow: 0 4px 9px rgba(var(--bl-shadow), 0.24), 0 0 1px rgba(var(--bl-shadow), 0.16);
}

.dashboard-pipeline--blush .dashboard-pipeline-card-title {
	color: var(--bl-ink);
}

.dashboard-pipeline--blush .dashboard-pipeline-chip {
	color: var(--bl-muted);
	background: color-mix(in srgb, #4a4a4a 8%, transparent);
}

/* Gradient carriers beat their inline per-value colors. */
.dashboard-pipeline--blush .dashboard-pipeline-chip--prop,
.dashboard-pipeline--blush button.dashboard-pipeline-skill-btn--colored,
.dashboard-pipeline--blush button.dashboard-pipeline-rail-value {
	background: var(--bl-accent) !important;
	color: var(--bl-accent-ink);
}

.dashboard-pipeline--blush button.dashboard-pipeline-rail-value .dashboard-pipeline-rail-count {
	color: color-mix(in srgb, #4a4a4a 75%, transparent);
}

.dashboard-pipeline--blush .dashboard-pipeline-card button.dashboard-pipeline-foot-btn,
.dashboard-pipeline--blush .dashboard-pipeline-card button.dashboard-pipeline-skill-btn:not(.dashboard-pipeline-skill-btn--colored),
.dashboard-pipeline--blush .dashboard-pipeline-card .dashboard-pipeline-archive-btn,
.dashboard-pipeline--blush button.dashboard-pipeline-col-add,
.dashboard-pipeline--blush button.dashboard-pipeline-rail-dim,
.dashboard-pipeline--blush button.dashboard-pipeline-rail-item.is-all {
	color: var(--bl-muted);
}

.dashboard-pipeline--blush .dashboard-pipeline-tasks {
	background: color-mix(in srgb, #4a4a4a 5%, transparent);
}

.dashboard-pipeline--blush .dashboard-pipeline-task {
	color: var(--bl-ink);
}

.dashboard-pipeline--blush .dashboard-pipeline-rail {
	background: var(--bl-col);
	border: none;
}

.dashboard-pipeline--blush button.dashboard-pipeline-rail-dim.is-active {
	background: color-mix(in srgb, #4a4a4a 12%, transparent);
	color: var(--bl-ink);
}

.dashboard-pipeline--blush button.dashboard-pipeline-rail-item:hover {
	background: color-mix(in srgb, #4a4a4a 10%, transparent);
}





/* Tablet reset for the compact icon-ish buttons */






/* ═══════════════════════════════════════════════════════════════════════════
   Skill widget — a tactile KEY STRIP (Rae): slim pill bar of round keys
   with real-button texture (top bevel light, bottom shade, press travel),
   per-skill macaron color via the inline --orb custom property. Keys sit
   in STRUCTURAL rows (JS-chunked, gear included) of at most five: four
   skills + the gear fill the classic single row edge to edge; more keys
   wrap onto second/third rows instead of shrinking into one long line.
   ═══════════════════════════════════════════════════════════════════════════ */
.dashboard-sidebar-skills {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-height: 48px;
	height: auto;
	padding: 7px 8px;
	border-radius: 999px;
	overflow: hidden; /* degenerate overloads (many keys) clip, never spill */
	background: color-mix(in srgb, var(--db-text-muted, #888888) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-text-muted, #888888) 14%, transparent);
	box-sizing: border-box;
}

/* Multi-row strips drop the pill radius: a 999px cap on a two-row deck
   amputates the corners into horseshoe arcs. A card-scale radius (lg) reads
   as a rounded tray instead; the single-row pill keeps the capsule look.
   Toggled by the renderer from the actual row count. */
.dashboard-sidebar-skills--multi {
	border-radius: var(--db-radius-lg, 18px);
}

.dashboard-skills-row {
	/* space-between right-anchors the gear (last row) when few keys are
	   configured; with a full set the flex keys eat all free space and the
	   row sits edge to edge. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 34px;
}

button.dashboard-skills-orb {
	--orb: #d8dce2;
	/* Flex-SIZED circles: equal shares of the bar width (capped at the
	   classic 34px) keep their 1:1 shape via aspect-ratio. At the common
	   sidebar width four skill keys + the gear fill the pill exactly; a
	   narrower bar shrinks the circles, a wider one (stacked/immersive tile)
	   spreads them via space-between. */
	flex: 1 1 0;
	min-width: 20px;
	max-width: 34px;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #3d434e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Real-button texture: light top bevel, darker bottom edge, soft drop —
	   the classic physical key. */
	background:
		radial-gradient(120% 90% at 30% 22%, color-mix(in srgb, var(--orb) 55%, #ffffff), transparent 55%),
		linear-gradient(180deg, color-mix(in srgb, var(--orb) 88%, #ffffff) 8%, var(--orb) 52%, color-mix(in srgb, var(--orb) 86%, #000000));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 -2px 3px rgba(0, 0, 0, 0.16),
		0 2px 3px rgba(0, 0, 0, 0.18);
	transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}

button.dashboard-skills-orb svg {
	/* Icon scales with the key (46% ≈ the old 15px at the 34px cap). */
	width: 46%;
	height: 46%;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

button.dashboard-skills-orb:hover {
	filter: brightness(1.06);
}

button.dashboard-skills-orb:active,
button.dashboard-skills-orb.is-pressed {
	/* Press travel: the key sinks; the bevel flips inward. */
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.24),
		inset 0 -1px 0 rgba(255, 255, 255, 0.25),
		0 1px 1px rgba(0, 0, 0, 0.12);
}

button.dashboard-skills-orb--cog {
	color: #555b66;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quick-input widgets (quick capture / file search) — Rae's reference search
   bar (截屏 2026-10-09): ONE bright rounded bar with a light border and an
   elevated surface, holding a leading glyph (➕ opens recent files on the
   search bar; a pencil marks the capture bar), a borderless field, and one
   round confirm key. The widget card's chrome is stripped so the BAR is the
   only frame.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Strip the card chrome (both layouts; the stacked descendant rule is
   re-overridden below) — the bar paints its own frame. */
.dashboard-sidebar-widget.dashboard-sidebar-capturebar {
	background: transparent;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

[data-layout="stacked"] .dashboard-sidebar-widgets-row .dashboard-sidebar-widget.dashboard-sidebar-capturebar {
	padding: 0;
}

.dashboard-capturebar {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 5px 5px 5px 6px;
	/* Near-capsule like the reference (radius ≈ half the 40px bar). */
	border-radius: 20px;
	/* Elevated SOLID surface: the card tint layered over the opaque base —
	   brighter than the page in light themes, raised in dark ones, and never
	   translucent enough to bleed the board through. */
	background:
		linear-gradient(var(--db-bg-card, rgba(255, 255, 255, 0.06)), var(--db-bg-card, rgba(255, 255, 255, 0.06))),
		var(--db-bg, #14161a);
	border: 1px solid var(--db-border-input, var(--db-border-card, rgba(128, 128, 128, 0.25)));
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus lives on the BAR (the field itself is chromeless): the border
   brightens toward the accent — the reference field's quiet focus cue. */
.dashboard-capturebar:focus-within {
	border-color: color-mix(in srgb, var(--db-accent) 55%, var(--db-border-input, var(--db-border-card)));
	box-shadow: 0 1px 6px color-mix(in srgb, var(--db-accent) 18%, rgba(0, 0, 0, 0.06));
}

/* Leading glyph: the reference's bold ➕ / pencil, in the primary text tone.
   The !important resets beat Obsidian's `.app-container button` chrome —
   without them the glyph grows a border/background box in real vaults
   (the quicknote-cog lesson; the harness's bare CSS hides it). */
.dashboard-capturebar-glyph {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 50%;
	color: var(--db-text);
	cursor: pointer;
	transition: background 0.12s ease;
}

button.dashboard-capturebar-glyph:hover {
	background: color-mix(in srgb, var(--db-text) 9%, transparent) !important;
}

.dashboard-capturebar-glyph--static {
	cursor: default;
	color: var(--db-text-muted);
}

.dashboard-capturebar-glyph svg {
	width: 18px;
	height: 18px;
	/* The reference plus is BOLD; lucide's default 2 stroke reads thin. */
	stroke-width: 2.5;
}

.dashboard-capturebar-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 28px;
	line-height: 28px;
	padding: 0 4px !important;
	box-sizing: border-box;
	/* Chromeless field: same !important reset reasoning as the glyph —
	   Obsidian's input[type=text] border/background must never reappear
	   inside the bar. */
	border: none !important;
	border-radius: var(--db-radius-sm);
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text) !important;
	font-size: 0.85em;
	font-family: var(--db-font, var(--font-interface));
}

.dashboard-capturebar-input:focus {
	outline: none;
}

.dashboard-capturebar-input::placeholder {
	color: var(--db-text-muted) !important;
	opacity: 1;
}

/* The confirm key: a smaller 28px key (Rae) — fixed size (the orb's own
   flex share is a strip-of-keys rule that does not apply to a single key
   beside a field). */
.dashboard-capturebar .dashboard-skills-orb {
	flex: 0 0 28px;
	max-width: 28px;
}

/* File-search results / recent-files popover: BODY-LEVEL and fixed (the
   music-popover pattern) — rails/stacked cells are scroll containers that
   would clip an in-card list, and the results belong floating UNDER the box.
   The stacked card's overflow rule clips only its own subtree, so mounting
   on body sidesteps it entirely. Background is layered solid: the card tint
   over the opaque modal surface, so glass themes cannot bleed board text
   through the results. */
.dashboard-filesearch-pop {
	position: fixed;
	z-index: 900; /* above tiles/chrome (<100), below overlays (1000+) */
	display: none;
	flex-direction: column;
	gap: 2px;
	width: min(340px, 86vw);
	max-height: min(280px, 60vh);
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--db-border-card);
	border-radius: var(--db-radius-md);
	background:
		linear-gradient(var(--db-bg-card, rgba(255, 255, 255, 0.06)), var(--db-bg-card, rgba(255, 255, 255, 0.06))),
		var(--db-bg-modal, var(--db-bg, #14161a));
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-filesearch-pop.is-open {
	display: flex;
}

.dashboard-filesearch-pop .dashboard-docsearch-item {
	border-radius: var(--db-radius-sm);
}

/* Right-aligned muted extra on a popover row (recent files' relative time). */
.dashboard-filesearch-meta {
	flex-shrink: 0;
	align-self: center;
	font-size: 0.72em;
	color: var(--db-text-faint, var(--db-text-muted));
	white-space: nowrap;
	padding-left: 6px;
}

/* Immersive boards: every [data-imm-id] tile carries the dark-glass slab
   chrome (rectangular, 1px white-22% border, sharp corners) — right for
   content widgets, wrong around these slim bars (a hard white rectangle
   around a rounded capsule, Rae). The bar IS the frame: strip the tile
   chrome for the two quick-input tiles so nothing doubles it. */
.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id][data-widget-key="quickCapture"],
.apex-dashboard-root[data-layout="immersive"] .dashboard-kanban > [data-imm-id][data-widget-key="fileSearch"] {
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AQUA 水感 — tactile keycap theme (design: /tmp/aqua-theme-design.html).
   Skeleton: RAISED keys (cards, chips, buttons, checkboxes) sitting in
   SUNKEN trays (sections, quick bar, inputs); macaron color only on
   pressables, quiet milky/deep-slate ground. Tokens first, then the
   dimensional treatments, all scoped to [data-theme="aqua"].
   ═══════════════════════════════════════════════════════════════════════════ */
.apex-dashboard-root[data-theme="aqua"] {
	--db-bg: #eef2f3;
	--db-bg-section: #e3e9ea;
	--db-bg-card: #fbfdfe;
	--db-bg-card-hover: #f2f6f7;
	--db-bg-sidebar: transparent;
	--db-bg-input: #e6ecee;
	--db-bg-btn: rgba(58, 157, 144, 0.10);
	--db-bg-btn-hover: rgba(58, 157, 144, 0.16);
	--db-bg-banner: #eaeff0;
	--db-bg-overlay: linear-gradient(135deg, rgba(23, 31, 35, 0.5) 0%, rgba(23, 31, 35, 0.22) 100%);
	--db-bg-hover: #e7edee;
	--db-bg-hover-strong: #dde4e6;
	--db-bg-add-section: #e6ecee;
	--db-bg-drop-indicator: rgba(58, 157, 144, 0.10);

	--db-border: #d7dee0;
	--db-border-card: rgba(47, 60, 66, 0.10);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: #d7dee0;
	--db-border-input-focus: #3a9d90;
	--db-border-btn: rgba(58, 157, 144, 0.22);
	--db-border-add-section: #cfd8da;

	--db-text: #2d3640;
	--db-text-muted: #67737c;
	--db-text-faint: #9aa6ad;
	--db-text-inverse: #ffffff;
	--db-text-inverse-muted: rgba(255, 255, 255, 0.6);

	/* Tiffany, one step deep — white text safe */
	--db-accent: #3a9d90;
	--db-accent-light: #57b8aa;
	--db-danger: #e0564f;

	--db-shadow-card: 0 2px 4px rgba(23, 31, 35, 0.12);
	--db-shadow-card-hover: 0 4px 10px rgba(23, 31, 35, 0.16);
	--db-backdrop-blur: none;

	--db-radius-sm: 8px;
	--db-radius-md: 14px;
	--db-radius-lg: 20px;

	--db-font: 'Inter', 'DM Sans', 'Noto Sans SC', var(--font-interface);
	--db-progress-from: #3a9d90;
	--db-progress-to: #8ed6cf;
	--db-checkbox: #3a9d90;
	--db-quote-border: #2d3640;
	--db-link: #3a9d90;

	--db-bg-modal: #fbfdfe;
	--db-bg-modal-raised: #f0f4f5;

	--db-aurora-bg: linear-gradient(135deg,
		#eef2f3 0%,
		rgba(142, 214, 207, 0.10) 30%,
		rgba(231, 233, 236, 0.4) 60%,
		#eef2f3 100%);
	--db-aurora-size: 220% 220%;
	--db-aurora-speed: 36s;
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] {
	--db-bg: #171d21;
	--db-bg-section: #12181c;
	--db-bg-card: #232b30;
	--db-bg-card-hover: #2a3439;
	--db-bg-sidebar: transparent;
	--db-bg-input: #1a2126;
	--db-bg-btn: rgba(84, 200, 186, 0.10);
	--db-bg-btn-hover: rgba(84, 200, 186, 0.16);
	--db-bg-banner: #1a2125;
	--db-bg-overlay: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 100%);
	--db-bg-hover: #1e262b;
	--db-bg-hover-strong: #262f35;
	--db-bg-add-section: #1a2126;
	--db-bg-drop-indicator: rgba(84, 200, 186, 0.10);

	--db-border: #27303a;
	--db-border-card: rgba(232, 236, 239, 0.09);
	--db-border-section: transparent;
	--db-border-sidebar: transparent;
	--db-border-input: #27303a;
	--db-border-input-focus: #54c8ba;
	--db-border-btn: rgba(84, 200, 186, 0.24);

	--db-text: #e8ecef;
	--db-text-muted: #97a3ab;
	--db-text-faint: #626d75;
	--db-text-inverse: #ffffff;
	--db-text-inverse-muted: rgba(255, 255, 255, 0.55);

	--db-accent: #54c8ba;
	--db-accent-light: #7adfd2;
	--db-danger: #ef5a52;

	--db-shadow-card: 0 2px 5px rgba(0, 0, 0, 0.34);
	--db-shadow-card-hover: 0 5px 12px rgba(0, 0, 0, 0.42);

	--db-progress-from: #54c8ba;
	--db-progress-to: #3a6f68;
	--db-checkbox: #54c8ba;
	--db-quote-border: #e8ecef;
	--db-link: #54c8ba;

	--db-bg-modal: #232b30;
	--db-bg-modal-raised: #2b343a;

	--db-aurora-bg: linear-gradient(135deg,
		#171d21 0%,
		rgba(84, 200, 186, 0.05) 30%,
		rgba(84, 124, 132, 0.04) 60%,
		#171d21 100%);
}

/* ── Dimensional treatments ─────────────────────────────────────────────── */

/* Sections become SUNKEN trays. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row {
	box-shadow: inset 0 2px 5px rgba(23, 31, 35, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
	border: none;
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] .dashboard-section-row {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Cards become RAISED keys (memo/todo/project dashboard cards). */
.apex-dashboard-root[data-theme="aqua"] .dashboard-card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		inset 0 -2px 3px rgba(23, 31, 35, 0.05),
		0 2px 4px rgba(23, 31, 35, 0.13);
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] .dashboard-card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -2px 3px rgba(0, 0, 0, 0.26),
		0 2px 4px rgba(0, 0, 0, 0.32);
}

/* Library & note cards share the keycap raise. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-library-card,
.apex-dashboard-root[data-theme="aqua"] .dashboard-pipeline:not(.dashboard-pipeline--trello):not(.dashboard-pipeline--solid):not(.dashboard-pipeline--blush) .dashboard-pipeline-card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 -2px 3px rgba(23, 31, 35, 0.05),
		0 2px 4px rgba(23, 31, 35, 0.13);
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] .dashboard-library-card,
.theme-dark .apex-dashboard-root[data-theme="aqua"] .dashboard-pipeline:not(.dashboard-pipeline--trello):not(.dashboard-pipeline--solid):not(.dashboard-pipeline--blush) .dashboard-pipeline-card {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.09),
		inset 0 -2px 3px rgba(0, 0, 0, 0.26),
		0 2px 4px rgba(0, 0, 0, 0.32);
}

/* Quick bar: the sunken pill. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-quicknote {
	box-shadow: inset 0 2px 4px rgba(23, 31, 35, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] .dashboard-quicknote {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}


/* Section header buttons: small keycaps. */
.apex-dashboard-root[data-theme="aqua"] button.dashboard-section-add-btn {
	border-radius: 9px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 2px rgba(23, 31, 35, 0.10),
		0 1px 2px rgba(23, 31, 35, 0.12);
}
.theme-dark .apex-dashboard-root[data-theme="aqua"] button.dashboard-section-add-btn {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -1px 2px rgba(0, 0, 0, 0.26),
		0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Modal confirm buttons: raised keys in accent. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-modal-btn--confirm {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 3px rgba(0, 0, 0, 0.14),
		0 2px 3px rgba(23, 31, 35, 0.18);
}
.apex-dashboard-root[data-theme="aqua"] .dashboard-modal-btn--confirm:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(23, 31, 35, 0.10);
}

/* Todo checkboxes: glossy keys. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-todo-item input[type="checkbox"],
.apex-dashboard-root[data-theme="aqua"] .card input[type="checkbox"] {
	border-radius: 6px;
	box-shadow: inset 0 1px 2px rgba(23, 31, 35, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Banner: a quiet sunken strip. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-banner {
	box-shadow: inset 0 1px 3px rgba(23, 31, 35, 0.06);
}

/* Aqua per-section hues: soft desaturated tints, one per section family. */
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #d9a88f; --db-sec-glow: rgba(217, 168, 143, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="projects"] { --db-sec-hue: #92aec9; --db-sec-glow: rgba(146, 174, 201, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="library"] { --db-sec-hue: #b5a3d1; --db-sec-glow: rgba(181, 163, 209, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="folder"] { --db-sec-hue: #b9c4a8; --db-sec-glow: rgba(185, 196, 168, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="weread"] { --db-sec-hue: #a8cbc0; --db-sec-glow: rgba(168, 203, 192, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="ticktick"] { --db-sec-hue: #9dc3a4; --db-sec-glow: rgba(157, 195, 164, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="calendar"] { --db-sec-hue: #e0b1a2; --db-sec-glow: rgba(224, 177, 162, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="heatmap"] { --db-sec-hue: #e0a8b8; --db-sec-glow: rgba(224, 168, 184, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="dataview"] { --db-sec-hue: #a9c8c8; --db-sec-glow: rgba(169, 200, 200, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="web"] { --db-sec-hue: #aeb8d8; --db-sec-glow: rgba(174, 184, 216, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="rss"] { --db-sec-hue: #e3c491; --db-sec-glow: rgba(227, 196, 145, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="images"] { --db-sec-hue: #dca8b8; --db-sec-glow: rgba(220, 168, 184, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="videos"] { --db-sec-hue: #c8b3d8; --db-sec-glow: rgba(200, 179, 216, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="pipeline"] { --db-sec-hue: #8ed6cf; --db-sec-glow: rgba(142, 214, 207, 0.12); }
.apex-dashboard-root[data-theme="aqua"] .dashboard-section-row[data-section-type="pm"] { --db-sec-hue: #a9bfd4; --db-sec-glow: rgba(169, 191, 212, 0.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOSSOM 芭比 — Barbie gelato parlor (design: /tmp/blossom-barbie-design.html).
   The capsule skeleton wearing Barbie pink: SUNKEN strawberry-syrup trays
   (sections, quick bar) under RAISED scoops of dense vanilla-berry cream
   (cards, confirm buttons, checkboxes). The creaminess is layered pillow
   shadows + satin top sheens on OPAQUE fills — zero translucency, zero blur
   (the old rose-glass Prism clone is fully retired). Each section title
   wears its own gelato flavor. All scoped to [data-theme="blossom"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sections: sunken syrup trays (soft inset edges, no hard border). */
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row {
	box-shadow: inset 0 2px 6px rgba(190, 24, 110, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.theme-dark .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 182, 213, 0.07);
}

/* Cards: scoops — the pillow shadow rides in --db-shadow-card (dashboard-card
   consumes it natively); library & pipeline cards need the explicit handoff. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-library-card,
.apex-dashboard-root[data-theme="blossom"] .dashboard-pipeline:not(.dashboard-pipeline--trello):not(.dashboard-pipeline--solid):not(.dashboard-pipeline--blush) .dashboard-pipeline-card {
	box-shadow: var(--db-shadow-card);
}

/* Quick bar: sunken sauce dish. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-quicknote {
	box-shadow: inset 0 2px 5px rgba(190, 24, 110, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.theme-dark .apex-dashboard-root[data-theme="blossom"] .dashboard-quicknote {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 182, 213, 0.07);
}

/* Banner: the syrup awning strip. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-banner {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -2px 5px rgba(190, 24, 110, 0.06);
}
.theme-dark .apex-dashboard-root[data-theme="blossom"] .dashboard-banner {
	box-shadow: inset 0 1px 0 rgba(255, 182, 213, 0.10), inset 0 -2px 5px rgba(0, 0, 0, 0.28);
}

/* Modal confirm: hot-pink candy scoop; press = squish. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-modal-btn--confirm {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -2px 4px rgba(140, 10, 80, 0.28),
		0 3px 8px rgba(190, 24, 110, 0.28);
}
.apex-dashboard-root[data-theme="blossom"] .dashboard-modal-btn--confirm:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 4px rgba(140, 10, 80, 0.30), 0 1px 2px rgba(190, 24, 110, 0.16);
}

/* Todo checkboxes: candy drops. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-todo-item input[type="checkbox"],
.apex-dashboard-root[data-theme="blossom"] .card input[type="checkbox"] {
	border-radius: 8px;
	box-shadow: inset 0 1px 2px rgba(190, 24, 110, 0.18), 0 1px 0 rgba(255, 255, 255, 0.65);
}
.theme-dark .apex-dashboard-root[data-theme="blossom"] .dashboard-todo-item input[type="checkbox"],
.theme-dark .apex-dashboard-root[data-theme="blossom"] .card input[type="checkbox"] {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 182, 213, 0.12);
}

/* Titles wear their gelato flavor (same trick as aurora's pony hues). */
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row .dashboard-section-title {
	color: var(--db-sec-hue);
}

/* Gelato flavors — dark parlor: bright pastels on berry night.
   glow via color-mix keeps each line a single source of truth. */
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #ff7cab; --db-sec-glow: color-mix(in srgb, #ff7cab 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #ff9dbd; --db-sec-glow: color-mix(in srgb, #ff9dbd 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #f87d99; --db-sec-glow: color-mix(in srgb, #f87d99 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="alltasks"] { --db-sec-hue: #f76d8b; --db-sec-glow: color-mix(in srgb, #f76d8b 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="projects"] { --db-sec-hue: #8f97e8; --db-sec-glow: color-mix(in srgb, #8f97e8 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="library"] { --db-sec-hue: #c492ec; --db-sec-glow: color-mix(in srgb, #c492ec 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="notes"] { --db-sec-hue: #e07cc4; --db-sec-glow: color-mix(in srgb, #e07cc4 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="folder"] { --db-sec-hue: #a8c977; --db-sec-glow: color-mix(in srgb, #a8c977 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="weread"] { --db-sec-hue: #5fd0bf; --db-sec-glow: color-mix(in srgb, #5fd0bf 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="ticktick"] { --db-sec-hue: #7f9fe8; --db-sec-glow: color-mix(in srgb, #7f9fe8 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="calendar"] { --db-sec-hue: #ff9d6f; --db-sec-glow: color-mix(in srgb, #ff9d6f 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="heatmap"] { --db-sec-hue: #ff6f7f; --db-sec-glow: color-mix(in srgb, #ff6f7f 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="dataview"] { --db-sec-hue: #5fc3e8; --db-sec-glow: color-mix(in srgb, #5fc3e8 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="web"] { --db-sec-hue: #e8a06f; --db-sec-glow: color-mix(in srgb, #e8a06f 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="rss"] { --db-sec-hue: #f0c25a; --db-sec-glow: color-mix(in srgb, #f0c25a 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="images"] { --db-sec-hue: #ff8fb0; --db-sec-glow: color-mix(in srgb, #ff8fb0 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="videos"] { --db-sec-hue: #a99cf0; --db-sec-glow: color-mix(in srgb, #a99cf0 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="pipeline"] { --db-sec-hue: #ff77b8; --db-sec-glow: color-mix(in srgb, #ff77b8 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="pm"] { --db-sec-hue: #d98fcd; --db-sec-glow: color-mix(in srgb, #d98fcd 16%, transparent); }
.apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="skills"] { --db-sec-hue: #d9a06f; --db-sec-glow: color-mix(in srgb, #d9a06f 16%, transparent); }

/* Gelato flavors — light parlor: the same identities deepened to survive
   the strawberry-milk trays (≥3.5:1 on #fbcfe4). */
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #c92a60; --db-sec-glow: color-mix(in srgb, #c92a60 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #b3567d; --db-sec-glow: color-mix(in srgb, #b3567d 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="sticky"] { --db-sec-hue: #a23b55; --db-sec-glow: color-mix(in srgb, #a23b55 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="alltasks"] { --db-sec-hue: #a52a4a; --db-sec-glow: color-mix(in srgb, #a52a4a 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="projects"] { --db-sec-hue: #5159b8; --db-sec-glow: color-mix(in srgb, #5159b8 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="library"] { --db-sec-hue: #8b4bb4; --db-sec-glow: color-mix(in srgb, #8b4bb4 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="notes"] { --db-sec-hue: #93387a; --db-sec-glow: color-mix(in srgb, #93387a 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="folder"] { --db-sec-hue: #66883f; --db-sec-glow: color-mix(in srgb, #66883f 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="weread"] { --db-sec-hue: #177e70; --db-sec-glow: color-mix(in srgb, #177e70 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="ticktick"] { --db-sec-hue: #4266b8; --db-sec-glow: color-mix(in srgb, #4266b8 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="calendar"] { --db-sec-hue: #c05f33; --db-sec-glow: color-mix(in srgb, #c05f33 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="heatmap"] { --db-sec-hue: #b52247; --db-sec-glow: color-mix(in srgb, #b52247 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="dataview"] { --db-sec-hue: #2e8faf; --db-sec-glow: color-mix(in srgb, #2e8faf 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="web"] { --db-sec-hue: #a2653b; --db-sec-glow: color-mix(in srgb, #a2653b 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="rss"] { --db-sec-hue: #b0761c; --db-sec-glow: color-mix(in srgb, #b0761c 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="images"] { --db-sec-hue: #d14d72; --db-sec-glow: color-mix(in srgb, #d14d72 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="videos"] { --db-sec-hue: #7a68c9; --db-sec-glow: color-mix(in srgb, #7a68c9 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="pipeline"] { --db-sec-hue: #cf3889; --db-sec-glow: color-mix(in srgb, #cf3889 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="pm"] { --db-sec-hue: #7c3b70; --db-sec-glow: color-mix(in srgb, #7c3b70 14%, transparent); }
.theme-light .apex-dashboard-root[data-theme="blossom"] .dashboard-section-row[data-section-type="skills"] { --db-sec-hue: #8a5433; --db-sec-glow: color-mix(in srgb, #8a5433 14%, transparent); }

/* ===== PM section (项目管理) — dashboard-pmsec-* =====
   Project cards from vault notes (frontmatter type: project): metadata
   chips, milestone progress bar, hover action row. The per-project board is
   a modal (pm-board-modal) reusing the config-modal skeleton. Runs on
   mobile too (workhorse height + always-visible card actions in the phone
   media block). */
.dashboard-pmsec-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.dashboard-pmsec-income-pill {
	font-size: 0.75em;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 14%, transparent);
	color: var(--db-text, var(--text-normal));
}

.dashboard-pmsec-count {
	font-size: 0.72em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-pmsec-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	/* stretch (not start): every card in a row shares the tallest card's
	   height — uniform cards regardless of how much metadata each carries. */
	align-items: stretch;
}

.dashboard-pmsec-card {
	position: relative;
	/* min-width:0 decouples the fr track's content floor — without it each
	   card's min-content (milestone stepper count, long titles) stretches
	   ITS track, making neighbors unequal widths. */
	min-width: 0;
	/* Flex column: the fields grid absorbs the slack between the fixed head
	   (eyebrow + title + reserved intro) and the bottom money/actions strip,
	   so cards with fewer fields still fill their uniform height. */
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.25));
	border-radius: var(--db-radius-md, 10px);
	background: var(--db-bg-card, rgba(255, 255, 255, 0.04));
	cursor: default;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Drag-to-reorder states: dragged card dims; the hovered card shows the
   insertion rail above or below its own edge. */
.dashboard-pmsec-card.is-dragging {
	opacity: 0.45;
}

.dashboard-pmsec-card.drop-above {
	box-shadow: 0 -2px 0 0 var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-card.drop-below {
	box-shadow: 0 2px 0 0 var(--db-accent, var(--interactive-accent));
}

/* The card lifts toward the hand — a quiet cue that it is clickable (the
 *  board opens on title click). */
.dashboard-pmsec-card:hover {
	transform: translateY(-1.5px);
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, var(--db-border-card, transparent));
	box-shadow: 0 6px 18px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, transparent);
}

.dashboard-pmsec-title-row {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 6px;
	margin-bottom: 6px;
}

.dashboard-pmsec-title {
	font-weight: 700;
	font-size: 1.02em;
	letter-spacing: -0.01em;
	color: var(--db-text, var(--text-normal));
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Stage badge: tinted pill + solid dot wearing the STAGE's own color
 *  (--pmsec-stage is set inline per card from the stage config). */
.dashboard-pmsec-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.68em;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pmsec-stage, var(--db-accent, #8b7cf6)) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pmsec-stage, var(--db-accent, #8b7cf6)) 34%, transparent);
	color: var(--db-text, var(--text-normal));
	white-space: nowrap;
}

.dashboard-pmsec-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pmsec-stage, var(--db-accent, #8b7cf6));
	flex-shrink: 0;
}

.dashboard-pmsec-progress-row {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 2px 0 9px;
	min-width: 0;
}

/* The number a PM reads first: a big numeral beats a thin bar. */
.dashboard-pmsec-progress-pct {
	flex-shrink: 0;
	font-size: 1.08em;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--db-accent, var(--interactive-accent));
	font-variant-numeric: tabular-nums;
	min-width: 2.6em;
}

/* Milestone stepper: one NODE per milestone. Each step paints DOT-then-
   CONNECTOR (::before dot, ::after hairline to the next node); the LAST
   step drops its connector and stops stretching, so N dots spread evenly
   with N-1 equal connectors and no dead space beside the % numeral. */
.dashboard-pmsec-stepper {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	/* Long milestone chains compress instead of widening the card. */
	overflow: hidden;
}

.dashboard-pmsec-step {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-width: 0;
}

.dashboard-pmsec-step:last-child {
	flex: 0 0 auto;
}

.dashboard-pmsec-step:last-child::after {
	display: none;
}

.dashboard-pmsec-step::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2.5px solid color-mix(in srgb, var(--db-text-faint, #888) 45%, transparent);
	background: var(--db-bg-card, transparent);
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-pmsec-step::after {
	content: '';
	flex: 1 1 auto;
	height: 2.5px;
	border-radius: 2px;
	margin: 0 3px;
	background: color-mix(in srgb, var(--db-text-faint, #888) 22%, transparent);
}

.dashboard-pmsec-step.is-done::before {
	background: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-step.is-done::after {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 75%, transparent);
}

.dashboard-pmsec-step:not(.is-done):hover::before {
	border-color: var(--db-accent, var(--interactive-accent));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
}

/* The board banner's nodes read larger — it is the headline. */
.dashboard-pmsec-progress-banner .dashboard-pmsec-step::before {
	width: 13px;
	height: 13px;
}

.dashboard-pmsec-progress-label {
	flex-shrink: 0;
	font-size: 0.68em;
	color: var(--db-text-faint, var(--text-faint));
	white-space: nowrap;
}

.dashboard-pmsec-intro {
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--db-text-muted, var(--text-muted));
	margin-bottom: 9px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* Reserve the full two-line box even when the intro is empty/short —
	   cards without a pitch keep the same head height. */
	min-height: calc(2 * 1.5em);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Invoice-style field rows: icon + label + value in ONE grid so the label
   column aligns down the whole card; each row joins the grid via
   display:contents (no per-row box). Empty fields are never rendered. */
.dashboard-pmsec-fields {
	display: grid;
	grid-template-columns: 16px auto minmax(0, 1fr);
	column-gap: 7px;
	row-gap: 5px;
	align-items: baseline;
	/* Uniform-height engine: the grid ABSORBS the card's slack, and
	   space-between SPREADS it across the row gaps (Rae: one big crater
	   under 下一步 read as broken) — no single void, rows breathe evenly,
	   money/actions stay pinned at the foot. */
	align-content: space-between;
	flex: 1 1 auto;
	padding: 8px 0 2px;
	border-top: 1px dashed color-mix(in srgb, var(--db-text-faint, #888) 35%, transparent);
}

.dashboard-pmsec-field {
	display: contents;
}

.dashboard-pmsec-field-icon {
	display: inline-flex;
	align-self: center;
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-pmsec-field-icon svg {
	width: 13px;
	height: 13px;
}

.dashboard-pmsec-field-label {
	font-size: 0.7em;
	color: var(--db-text-faint, var(--text-faint));
	white-space: nowrap;
}

.dashboard-pmsec-field-value {
	font-size: 0.8em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pmsec-field--overdue .dashboard-pmsec-field-value,
.dashboard-pmsec-field--overdue .dashboard-pmsec-field-icon {
	color: var(--db-danger, #e5484d);
	font-weight: 600;
}

/* Money strip: the invoice total — income is the hero figure in the accent,
 *  payment is the outstanding note, right-aligned and quieter. */
.dashboard-pmsec-money {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 7px;
	flex-shrink: 0;
	padding-top: 9px;
	border-top: 1px dashed color-mix(in srgb, var(--db-text-faint, #888) 35%, transparent);
}

.dashboard-pmsec-money-block {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dashboard-pmsec-money-block--right {
	margin-left: auto;
	text-align: right;
	align-items: flex-end;
}

.dashboard-pmsec-money-label {
	font-size: 0.64em;
	letter-spacing: 0.05em;
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-pmsec-money-value {
	font-size: 1.12em;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--db-accent, var(--interactive-accent));
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 160px;
}

.dashboard-pmsec-money-value--muted {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	max-width: 150px;
}

.dashboard-pmsec-actions {
	position: absolute;
	top: 6px;
	right: 8px;
	display: flex;
	gap: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.dashboard-pmsec-card:hover .dashboard-pmsec-actions,
.dashboard-pmsec-actions:focus-within {
	opacity: 1;
	pointer-events: auto;
}

.dashboard-pmsec-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-pmsec-action:hover {
	background: color-mix(in srgb, var(--db-text) 9%, transparent);
	color: var(--db-text, var(--text-normal));
}

.dashboard-pmsec-action--danger:hover {
	color: var(--db-danger, #e5484d);
}

.dashboard-pmsec-action svg {
	width: 14px;
	height: 14px;
}

.dashboard-pmsec-empty {
	padding: 18px 8px;
	text-align: center;
}

/* Board modal (dashboard-modal skeleton carries the chrome; these are the
   pm-specific bits). The new-project form keeps a capped scrolling body;
   the BOARD itself is page-grade (modal--pm-board below) and scrolls per
   pane instead. */
.dashboard-pmsec-new .dashboard-modal-body {
	max-height: min(70vh, 640px);
	overflow-y: auto;
}

/* ── Page-grade project board ────────────────────────────────────────────
   Mission-control layout: a hero header (name + meta chips + intro), a
   full-width progress banner, then the two working panes. Claims nearly
   the whole viewport; each pane scrolls on its own so the hero and footer
   stay put. Later + equally specific than the .modal--dashboard .modal
   rule above, so size/overflow win by source order. */
.modal-container.modal--pm-board .modal {
	width: min(1280px, 96vw);
	max-width: none;
	height: min(90vh, 960px);
	max-height: 90vh;
	overflow: hidden;
}

.modal-container.modal--pm-board .modal > .dashboard-pmsec-board {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Hero: the project's masthead. */
.dashboard-pmsec-hero {
	flex-shrink: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.22));
}

.dashboard-pmsec-hero-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.dashboard-pmsec-hero-title {
	font-size: 1.32em;
	font-weight: 750;
	letter-spacing: -0.02em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pmsec-hero .dashboard-pmsec-close {
	margin-left: auto;
}

.dashboard-pmsec-hero-intro {
	margin-top: 7px;
	font-size: 0.92em;
	line-height: 1.55;
	color: var(--db-text-muted, var(--text-muted));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 72ch;
}

/* Progress banner: the delivery state, across the full board width. */
.dashboard-pmsec-progress-banner {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin: 12px 0 0;
	border-radius: var(--db-radius-md, 10px);
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
}

.dashboard-pmsec-progress-banner .dashboard-pmsec-progress-pct {
	font-size: 1.3em;
	min-width: 3em;
}

.dashboard-pmsec-board-body {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 22px;
	margin-top: 12px;
	overflow: hidden;
}

.dashboard-pmsec-pane {
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
	padding-right: 4px;
}

/* Checklist header: title + done/total count badge. */
.dashboard-pmsec-check-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.dashboard-pmsec-check-count {
	flex-shrink: 0;
	font-size: 0.68em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 1px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
	color: var(--db-accent, var(--interactive-accent));
}

/* Footer: the destructive pair, right-aligned. */
.dashboard-pmsec-foot {
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
}

.dashboard-pmsec-foot .dashboard-modal-btn--danger {
	margin-left: auto;
}

/* Narrow windows: one column, the body scrolls as a whole. */
@media (max-width: 900px) {
	.dashboard-pmsec-board-body {
		grid-template-columns: minmax(0, 1fr);
		overflow-y: auto;
	}
	.dashboard-pmsec-pane {
		overflow: visible;
	}
}

.dashboard-pmsec-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
}

.dashboard-pmsec-close:hover {
	background: color-mix(in srgb, var(--db-text) 9%, transparent);
	color: var(--db-text, var(--text-normal));
}

.dashboard-pmsec-close svg {
	width: 15px;
	height: 15px;
}

.dashboard-pmsec-date {
	flex: 1 1 120px;
	min-width: 0;
}

.dashboard-pmsec-time {
	flex: 0 0 96px;
}

.dashboard-pmsec-checklist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 6px;
}

.dashboard-pmsec-check-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 4px;
	border-radius: 6px;
}

.dashboard-pmsec-check-item:hover {
	background: color-mix(in srgb, var(--db-text) 5%, transparent);
}

.dashboard-pmsec-check-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.88em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pmsec-check-due {
	flex-shrink: 0;
	font-size: 0.68em;
	color: var(--db-text-faint, var(--text-faint));
}

/* Checklist row reorder grip (guarded pointer drag — desktop AND touch).
   Faint at rest, full contrast on row hover; touch-action:none hands the
   gesture to the drag instead of the modal's scroll. */
.dashboard-pmsec-check-grip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 14px;
	height: 18px;
	color: var(--db-text-faint, var(--text-faint));
	cursor: grab;
	touch-action: none;
	opacity: 0.4;
	transition: opacity 0.12s ease;
}

.dashboard-pmsec-check-item:hover .dashboard-pmsec-check-grip {
	opacity: 1;
}

.dashboard-pmsec-check-grip svg {
	width: 12px;
	height: 12px;
}

.dashboard-pmsec-check-item.is-dragging {
	opacity: 0.7;
	outline: 1px dashed color-mix(in srgb, var(--pm-accent, var(--interactive-accent)) 55%, transparent);
	outline-offset: -1px;
}

/* Inline edit input inside a checklist row (double-click the text). */
.dashboard-pmsec-check-item .dashboard-pmsec-check-edit {
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px 8px;
	border-radius: 4px;
}

.dashboard-pmsec-add-row {
	display: flex;
	gap: 6px;
}

/* Show/hide for the modal's reveal rows (custom-field adder, file-link
   results) — class toggle instead of inline style.display. */
.dashboard-pmsec-add-row.is-hidden,
.dashboard-pmsec-link-results.is-hidden {
	display: none;
}

.dashboard-pmsec-add-row .dashboard-modal-input {
	flex: 1 1 auto;
}

.dashboard-pmsec-files {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dashboard-pmsec-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 6px;
	cursor: pointer;
}

.dashboard-pmsec-file:hover {
	background: color-mix(in srgb, var(--db-text) 6%, transparent);
}

.dashboard-pmsec-file-icon {
	display: inline-flex;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-pmsec-file-icon svg {
	width: 14px;
	height: 14px;
}

.dashboard-pmsec-file-name {
	font-size: 0.85em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pmsec-skill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dashboard-pmsec-ms-row {
	align-items: flex-start;
}

.dashboard-pmsec-ms-row .dashboard-library-config-inline-label {
	padding-top: 6px;
}

/* Both destructive buttons sit LEFT together (Rae: a right-pinned delete
   next to the scrollbar was an accidental-click magnet). */
.dashboard-pmsec-board .dashboard-modal-footer .dashboard-modal-btn--danger {
	margin-left: 0;
}

/* ── Overview dossier: stat tiles (view mode) ───────────────────────────
   Key date with a countdown, the cycle span with its duration, income,
   payment, client, status as compact tiles; next-step and deliverables
   take full-width emphasis cards. Accent/danger tiles tint border+bg. */
.dashboard-pmsec-ov-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.dashboard-pmsec-tile {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 10px 12px;
	border-radius: var(--db-radius-md, 10px);
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.22));
	background: color-mix(in srgb, var(--db-text-faint, #888) 5%, transparent);
	min-width: 0;
}

.dashboard-pmsec-tile--full {
	grid-column: 1 / -1;
}

.dashboard-pmsec-tile--accent {
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 30%, transparent);
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 8%, transparent);
}

.dashboard-pmsec-tile--danger {
	border-color: color-mix(in srgb, var(--db-danger, #e5484d) 40%, transparent);
	background: color-mix(in srgb, var(--db-danger, #e5484d) 8%, transparent);
}

.dashboard-pmsec-tile-icon {
	display: inline-flex;
	margin-top: 2px;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-pmsec-tile-icon svg {
	width: 15px;
	height: 15px;
}

.dashboard-pmsec-tile--accent .dashboard-pmsec-tile-icon {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-tile--danger .dashboard-pmsec-tile-icon {
	color: var(--db-danger, #e5484d);
}

.dashboard-pmsec-tile-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dashboard-pmsec-tile-label {
	font-size: 0.66em;
	letter-spacing: 0.05em;
	color: var(--db-text-faint, var(--text-faint));
}

.dashboard-pmsec-tile-value {
	font-size: 0.88em;
	font-weight: 600;
	color: var(--db-text, var(--text-normal));
	overflow-wrap: anywhere;
}

.dashboard-pmsec-tile-value--big {
	font-size: 1.14em;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.dashboard-pmsec-tile--accent .dashboard-pmsec-tile-value {
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-tile--danger .dashboard-pmsec-tile-value {
	color: var(--db-danger, #e5484d);
}

.dashboard-pmsec-tile-sub {
	font-size: 0.68em;
	color: var(--db-text-muted, var(--text-muted));
}

.dashboard-pmsec-ov-edit {
	margin-left: auto;
}

/* ── Overview edit form: aligned grid ────────────────────────────────────
   Fixed label column + controls wrapper, so every input's left edge lines
   up however long its label is (the old flex rows read as a spreadsheet). */
.dashboard-pmsec-edit .dashboard-library-config-inline-row {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 6px;
}

.dashboard-pmsec-edit .dashboard-library-config-inline-label {
	font-size: 0.78em;
	white-space: nowrap;
}

.dashboard-pmsec-edit-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex-wrap: wrap;
}

.dashboard-pmsec-edit-controls .dashboard-modal-input {
	flex: 1 1 120px;
	min-width: 0;
}

/* ── Archived-projects viewer ────────────────────────────────────────────
   One compact row per archived note: title + stage badge + counts; the row
   opens the full board (archived data stays viewable), with restore and
   delete beside it. */
.dashboard-pmsec-archive .dashboard-modal-body {
	max-height: min(70vh, 620px);
	overflow-y: auto;
}

.dashboard-pmsec-arch-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dashboard-pmsec-arch-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.22));
	border-radius: var(--db-radius-md, 10px);
	background: color-mix(in srgb, var(--db-text-faint, #888) 4%, transparent);
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.dashboard-pmsec-arch-item:hover {
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 34%, transparent);
	transform: translateY(-1px);
}

.dashboard-pmsec-arch-main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
}

.dashboard-pmsec-arch-title {
	font-weight: 600;
	font-size: 0.92em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 22ch;
}

.dashboard-pmsec-arch-counts {
	font-size: 0.72em;
	color: var(--db-text-muted, var(--text-muted));
	white-space: nowrap;
}

.dashboard-pmsec-arch-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--db-text-muted, var(--text-muted));
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-pmsec-arch-delete:hover {
	color: var(--db-danger, #e5484d);
	background: color-mix(in srgb, var(--db-danger, #e5484d) 12%, transparent);
}

.dashboard-pmsec-arch-delete svg {
	width: 14px;
	height: 14px;
}

/* Project board: a quiet editorial brief with the active work kept in view. */
.modal-container.modal--pm-board .modal > .dashboard-pmsec-board {
	--pm-ink: var(--db-text, var(--text-normal));
	--pm-muted: var(--db-text-muted, var(--text-muted));
	--pm-rule: color-mix(in srgb, var(--pm-ink) 13%, transparent);
	--pm-accent: var(--db-accent, var(--interactive-accent));
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	background: var(--db-bg-modal, var(--background-primary)) !important;
	font-family: "Avenir Next", "Noto Sans CJK SC", "PingFang SC", var(--db-font, var(--font-interface));
}

.dashboard-pmsec-board .dashboard-pmsec-hero {
	display: block;
	position: relative;
	margin: 0;
	padding: 30px 46px 24px;
	border: 0;
	background: linear-gradient(115deg,
		color-mix(in srgb, var(--pm-accent) 12%, var(--db-bg-modal, var(--background-primary))),
		var(--db-bg-modal, var(--background-primary)) 62%);
}

.dashboard-pmsec-hero-eyebrow {
	margin-bottom: 10px;
	color: var(--pm-accent);
	font-size: 0.68em;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.dashboard-pmsec-board .dashboard-pmsec-hero-row {
	gap: 14px;
	align-items: center;
}

.dashboard-pmsec-board .dashboard-pmsec-hero-title {
	font-family: "Iowan Old Style", "Songti SC", "Noto Serif CJK SC", serif;
	font-size: clamp(1.65em, 2.3vw, 2.35em);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.035em;
	color: var(--pm-ink);
}

.dashboard-pmsec-board .dashboard-pmsec-badge {
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 0.72em;
	font-weight: 700;
}

.dashboard-pmsec-board .dashboard-pmsec-hero-intro {
	max-width: 75ch;
	margin-top: 13px;
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--pm-muted);
}

.dashboard-pmsec-board .dashboard-pmsec-close {
	width: 32px;
	height: 32px;
	border: 1px solid var(--pm-rule);
	border-radius: 50%;
}

.dashboard-pmsec-board .dashboard-pmsec-progress-banner {
	margin: 0;
	padding: 16px 46px 18px;
	gap: 17px;
	border: 0;
	border-top: 1px solid var(--pm-rule);
	border-bottom: 1px solid var(--pm-rule);
	border-radius: 0;
	background: color-mix(in srgb, var(--pm-accent) 4%, var(--db-bg-modal, var(--background-primary)));
}

.dashboard-pmsec-progress-heading {
	flex: 0 0 auto;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--pm-muted);
}

.dashboard-pmsec-board .dashboard-pmsec-progress-banner .dashboard-pmsec-progress-pct {
	min-width: 2.3em;
	font-family: "Iowan Old Style", "Songti SC", serif;
	font-size: 1.8em;
	font-weight: 700;
	line-height: 1;
	color: var(--pm-accent);
}

.dashboard-pmsec-board .dashboard-pmsec-stepper {
	max-width: 360px;
	margin-left: auto;
}

.dashboard-pmsec-board .dashboard-pmsec-progress-label {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--pm-muted);
}

.dashboard-pmsec-board .dashboard-pmsec-board-body {
	grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
	gap: 0;
	margin: 0;
	background: var(--db-bg-modal, var(--background-primary));
}

.dashboard-pmsec-board .dashboard-pmsec-pane {
	padding: 20px 30px 22px 36px;
}

.dashboard-pmsec-board .dashboard-pmsec-pane + .dashboard-pmsec-pane {
	padding-left: 38px;
	padding-right: 46px;
	border-left: 1px solid var(--pm-rule);
}

.dashboard-pmsec-board .dashboard-library-config-section {
	margin-bottom: 12px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.dashboard-pmsec-board .dashboard-library-config-section-title {
	margin: 0;
	font-size: 0.83em;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.dashboard-pmsec-board .dashboard-pmsec-check-title {
	align-items: center;
	min-height: 24px;
	margin-bottom: 7px;
}

.dashboard-pmsec-board .dashboard-pmsec-check-count {
	margin-left: 2px;
	padding: 3px 8px;
	border-radius: 4px;
}

.dashboard-pmsec-board .dashboard-pmsec-ov-grid {
	gap: 0 20px;
	margin-top: 2px;
}

.dashboard-pmsec-board .dashboard-pmsec-tile {
	min-height: 0;
	gap: 10px;
	padding: 7px 0;
	border: 0;
	border-top: 1px solid var(--pm-rule);
	border-radius: 0;
	background: transparent;
}

.dashboard-pmsec-board .dashboard-pmsec-tile--accent {
	background: transparent;
}

.dashboard-pmsec-board .dashboard-pmsec-tile--accent.dashboard-pmsec-tile--full {
	min-height: 98px;
	margin-bottom: 10px;
	padding: 18px 20px;
	border: 1px solid color-mix(in srgb, var(--pm-accent) 28%, transparent);
	border-left: 4px solid var(--pm-accent);
	border-radius: 9px;
	background: color-mix(in srgb, var(--pm-accent) 9%, var(--db-bg-modal, var(--background-primary)));
}

.dashboard-pmsec-board .dashboard-pmsec-tile--danger {
	background: transparent;
}

.dashboard-pmsec-board .dashboard-pmsec-tile-icon {
	margin-top: 3px;
}

.dashboard-pmsec-board .dashboard-pmsec-tile-label {
	font-size: 0.7em;
	font-weight: 650;
	letter-spacing: 0.07em;
	color: var(--pm-muted);
}

.dashboard-pmsec-board .dashboard-pmsec-tile-value {
	font-size: 0.94em;
	line-height: 1.45;
}

.dashboard-pmsec-board .dashboard-pmsec-tile-value--big {
	font-size: 1.16em;
}

.dashboard-pmsec-board .dashboard-pmsec-tile--accent.dashboard-pmsec-tile--full .dashboard-pmsec-tile-value {
	font-size: 1.32em;
}

.dashboard-pmsec-board .dashboard-pmsec-tile-sub {
	margin-top: 3px;
}

.dashboard-pmsec-board .dashboard-pmsec-ov-edit {
	margin-left: auto;
}

.dashboard-pmsec-board .dashboard-pmsec-section--milestone,
.dashboard-pmsec-board .dashboard-pmsec-section--todo,
.dashboard-pmsec-board .dashboard-pmsec-section--files {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--pm-rule);
}

.dashboard-pmsec-board .dashboard-pmsec-checklist {
	gap: 0;
	margin: 0 0 8px;
}

.dashboard-pmsec-board .dashboard-pmsec-check-item {
	min-height: 29px;
	padding: 3px 4px;
	border-radius: 5px;
}

.dashboard-pmsec-board .dashboard-pmsec-check-item + .dashboard-pmsec-check-item {
	border-top: 1px solid color-mix(in srgb, var(--pm-ink) 7%, transparent);
}

.dashboard-pmsec-board .dashboard-pmsec-check-item input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0 4px 0 0;
	accent-color: var(--pm-accent);
}

.dashboard-pmsec-board .dashboard-pmsec-check-text {
	font-size: 0.88em;
	line-height: 1.45;
}

.dashboard-pmsec-board .dashboard-pmsec-check-item:has(input:checked) .dashboard-pmsec-check-text {
	color: var(--pm-muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--pm-muted) 60%, transparent);
}

.dashboard-pmsec-board .dashboard-pmsec-add-row {
	gap: 8px;
}

/* Todo add-row time picker: kind select + date + optional time — compact,
   text input keeps the flex share. */
.dashboard-pmsec-board .dashboard-pmsec-add-kind {
	flex: 0 0 auto;
	min-width: 70px;
	padding: 6px 8px;
	border-radius: 6px;
}

.dashboard-pmsec-board .dashboard-pmsec-add-date,
.dashboard-pmsec-board .dashboard-pmsec-add-time {
	flex: 0 0 auto;
	width: 118px;
	padding: 6px 8px;
	border-radius: 6px;
}

.dashboard-pmsec-board .dashboard-pmsec-add-time {
	width: 84px;
}

.dashboard-pmsec-board .dashboard-pmsec-add-row .dashboard-modal-input {
	min-width: 0;
	padding: 8px 11px;
	border-radius: 6px;
}

.dashboard-pmsec-board .dashboard-pmsec-add-row .dashboard-modal-btn--confirm {
	min-width: 64px;
	border-radius: 6px;
}

.dashboard-pmsec-board .dashboard-pmsec-section--files .dashboard-library-config-inline-row {
	justify-content: space-between;
	margin: 0 0 14px;
}

.dashboard-pmsec-board .dashboard-pmsec-files .dashboard-library-empty {
	padding: 22px 12px;
	border: 1px dashed var(--pm-rule);
	border-radius: 8px;
	background: color-mix(in srgb, var(--pm-ink) 2%, transparent);
	text-align: center;
}

.dashboard-pmsec-board .dashboard-pmsec-file {
	min-height: 36px;
}

.dashboard-pmsec-board .dashboard-pmsec-foot {
	margin: 0;
	/* Align with the panes' CONTENT edges (the hairline rails), not the
	   modal frame: left = left pane's 36px inset, right = right pane's
	   46px inset — the buttons read as standing on the same rules. */
	padding: 14px 46px 14px 36px;
	/* Both buttons LEFT (Rae: a right-pinned delete near the scrollbar is an
	   accidental-click magnet) — the house footer class right-aligns. */
	justify-content: flex-start;
	border-top: 1px solid var(--pm-rule);
	background: color-mix(in srgb, var(--pm-ink) 2%, var(--db-bg-modal, var(--background-primary)));
}

.dashboard-pmsec-board .dashboard-pmsec-foot .dashboard-modal-btn {
	background: transparent;
	border-color: var(--pm-rule);
	font-size: 0.77em;
}

.dashboard-pmsec-board .dashboard-pmsec-foot .dashboard-modal-btn--danger {
	color: var(--db-danger, #e5484d);
	border-color: color-mix(in srgb, var(--db-danger, #e5484d) 30%, transparent);
}

@media (max-width: 900px) {
	.modal-container.modal--pm-board .modal {
		width: min(720px, 96vw);
	}
	.dashboard-pmsec-board .dashboard-pmsec-board-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		overflow-y: auto;
	}
	.dashboard-pmsec-board .dashboard-pmsec-pane,
	.dashboard-pmsec-board .dashboard-pmsec-pane + .dashboard-pmsec-pane {
		padding: 25px 32px;
		overflow: visible;
		border-left: 0;
	}
	.dashboard-pmsec-board .dashboard-pmsec-pane + .dashboard-pmsec-pane {
		border-top: 1px solid var(--pm-rule);
	}
}

@media (max-width: 560px) {
	.dashboard-pmsec-board .dashboard-pmsec-hero,
	.dashboard-pmsec-board .dashboard-pmsec-progress-banner,
	.dashboard-pmsec-board .dashboard-pmsec-pane,
	.dashboard-pmsec-board .dashboard-pmsec-pane + .dashboard-pmsec-pane,
	.dashboard-pmsec-board .dashboard-pmsec-foot {
		padding-left: 20px;
		padding-right: 20px;
	}
	.dashboard-pmsec-board .dashboard-pmsec-hero-title {
		white-space: normal;
	}
	.dashboard-pmsec-board .dashboard-pmsec-progress-banner {
		flex-wrap: wrap;
	}
	.dashboard-pmsec-board .dashboard-pmsec-stepper {
		flex-basis: 100%;
		order: 3;
		max-width: none;
		margin: 0;
	}
	.dashboard-pmsec-board .dashboard-pmsec-progress-label {
		margin-left: auto;
	}
	.dashboard-pmsec-board .dashboard-pmsec-ov-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.dashboard-pmsec-board .dashboard-pmsec-tile--full {
		grid-column: auto;
	}
}

/* Link-existing-file row + linked file rows in the board's files section. */
.dashboard-pmsec-link-row {
	margin-bottom: 8px;
}

.dashboard-pmsec-file--linked {
	border-left: 2px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 55%, transparent);
}

.dashboard-pmsec-file--missing {
	opacity: 0.55;
}

.dashboard-pmsec-file-unlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-left: auto;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--db-text-faint, var(--text-faint));
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-pmsec-file-unlink:hover {
	color: var(--db-danger, #e5484d);
	background: color-mix(in srgb, var(--db-danger, #e5484d) 12%, transparent);
}

.dashboard-pmsec-file-unlink svg {
	width: 13px;
	height: 13px;
}

/* Card bottom action row: work note + skill buttons, always visible. */
.dashboard-pmsec-foot-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Always-present row anchors the bottom; money (when present) sits above
	   it. This guarantees the foot alignment across cards. */
	flex-shrink: 0;
	margin-top: 9px;	flex-wrap: wrap;
}

.dashboard-pmsec-foot-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.22));
	border-radius: 999px;
	background: color-mix(in srgb, var(--db-text-faint, #888) 6%, transparent);
	color: var(--db-text-muted, var(--text-muted));
	font-size: 0.72em;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dashboard-pmsec-foot-btn:hover {
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 40%, transparent);
	color: var(--db-text, var(--text-normal));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 9%, transparent);
}

.dashboard-pmsec-foot-btn-icon {
	display: inline-flex;
}

.dashboard-pmsec-foot-btn-icon svg {
	width: 13px;
	height: 13px;
}

/* ── Card refinements ─────────────────────────────────────────────────────
   Stage eyebrow at the top-LEFT (kicker above the title — breathing room);
   tight pct→stepper spacing (the old transparent first connector ate a
   whole step-width of dead space). */
.dashboard-pmsec-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.dashboard-pmsec-title-row {
	margin-bottom: 5px;
}

.dashboard-pmsec-progress-row {
	gap: 10px;
}

.dashboard-pmsec-progress-pct {
	min-width: 2.4em;
}

/* ── Board panes as raised panels ─────────────────────────────────────────
   Framed, tinted panels give the two columns visual weight (the bare
   columns read hollow) and separate the panes' own scrolling. */
.dashboard-pmsec-board-body {
	grid-template-rows: minmax(0, 1fr);
}

.dashboard-pmsec-pane {
	background: color-mix(in srgb, var(--db-text-faint, #888) 4%, transparent);
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.18));
	border-radius: var(--db-radius-lg, 12px);
	padding: 14px 14px 14px 16px;
}

.dashboard-pmsec-board .dashboard-library-config-section-title {
	font-size: 0.78em;
	letter-spacing: 0.04em;
	/* Section heads (里程碑/待办/项目文件) read in the accent color. */
	color: var(--pm-accent, var(--db-accent, var(--interactive-accent)));
}

/* ── New-project form alignment ──────────────────────────────────────────
   The shared inline-row pattern leaves both the label and the input at
   content width — with Chinese labels of varying length every input started
   at a different x. Scope a fixed label column + flexing controls so all
   rows share one grid line (date/time pairs and the stage select included). */
.dashboard-pmsec-new .dashboard-library-config-inline-label {
	flex: 0 0 92px;
}

.dashboard-pmsec-new .dashboard-library-config-inline-row {
	align-items: center;
}

.dashboard-pmsec-new .dashboard-library-config-inline-row > input.dashboard-modal-input,
.dashboard-pmsec-new .dashboard-library-config-inline-row > select {
	flex: 1 1 110px;
	min-width: 0;
	width: auto;
}

.dashboard-pmsec-new .dashboard-pmsec-ms-row > textarea {
	flex: 1 1 auto;
	min-width: 0;
}

/* Key-date row: date + time + reminder checkbox share the flex line; the
   reminder label hugs its checkbox. */
.dashboard-pmsec-new .dashboard-pmsec-date,
.dashboard-pmsec-new .dashboard-pmsec-time {
	flex: 1 1 96px;
	min-width: 0;
	width: auto;
}

/* ── Board scroll chain (real-DOM fix) + hero-progress refinements ────────
   Real Obsidian nests the board inside an unclassed contentEl div; the
   board-host class (added in code) lets the whole chain flex so the PANES
   own the scrolling — the missing link that left the board clipped and
   unscrollable in the app while the flattened stub hid it. */
.modal-container.modal--pm-board .modal {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal-container.modal--pm-board .dashboard-pmsec-board-host {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* The missing scroll link: the board container itself must be a flex column
   — as a plain block its body's `flex: 1` was inert, the body grew past the
   board's bounded height and the modal's overflow:hidden clipped it with
   nothing scrollable anywhere. */
.modal-container.modal--pm-board .dashboard-pmsec-board {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

.modal-container.modal--pm-board .dashboard-pmsec-board .dashboard-pmsec-hero {
	flex-shrink: 0;
}

.modal-container.modal--pm-board .modal > .dashboard-pmsec-board,
.modal-container.modal--pm-board .dashboard-pmsec-board-host > .dashboard-pmsec-board {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
}

/* Milestone progress riding the hero's right side, beside the title. */
.dashboard-pmsec-hero-progress {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 46%;
}

.dashboard-pmsec-hero-progress .dashboard-pmsec-progress-pct {
	font-size: 1.05em;
	min-width: 2.2em;
}

.dashboard-pmsec-hero-progress .dashboard-pmsec-step::before {
	width: 10px;
	height: 10px;
}

/* Overview head: edit/done button only (no section title), pinned right. */
.dashboard-pmsec-ov-head {
	justify-content: flex-end;
	margin-bottom: 2px;
}

/* Tighter dossier rhythm: smaller grid gap, leaner tiles. */
.dashboard-pmsec-ov-grid {
	gap: 8px;
	margin-top: 6px;
}

.dashboard-pmsec-tile {
	padding: 8px 11px;
	gap: 8px;
}

/* Tighter checklist rows: zero list gap, slimmer rows and delete buttons. */
.dashboard-pmsec-checklist {
	gap: 0;
}

.dashboard-pmsec-check-item {
	padding: 1px 4px;
}

.dashboard-pmsec-check-item .dashboard-pipeline-cfg-icon-btn {
	width: 20px;
	height: 20px;
}

.dashboard-pmsec-check-item .dashboard-pipeline-cfg-icon-btn svg {
	width: 12px;
	height: 12px;
}

/* Link-existing-file: live results under the search row (plain-name
   matching, no [[ prefix). Static inline list — robust inside panes. */
.dashboard-pmsec-link-results {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 180px;
	overflow-y: auto;
	margin: 2px 0 8px;
	border: 1px solid var(--db-border-card, rgba(128, 128, 128, 0.22));
	border-radius: var(--db-radius-sm, 6px);
	padding: 4px;
	background: color-mix(in srgb, var(--db-bg-modal-raised, rgba(255, 255, 255, 0.05)) 60%, transparent);
}

.dashboard-pmsec-link-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 5px;
	cursor: pointer;
}

.dashboard-pmsec-link-item:hover {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

.dashboard-pmsec-link-item-icon {
	display: inline-flex;
	color: var(--db-text-muted, var(--text-muted));
	flex-shrink: 0;
}

.dashboard-pmsec-link-item-icon svg {
	width: 13px;
	height: 13px;
}

.dashboard-pmsec-link-item-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.dashboard-pmsec-link-item-name {
	font-size: 0.82em;
	color: var(--db-text, var(--text-normal));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-pmsec-link-item-path {
	font-size: 0.66em;
	color: var(--db-text-faint, var(--text-faint));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Section-height interplay: the resize handle clamps the ROW (max-height);
   the card list must own the overflow like every other section's body
   (.dashboard-section-cards pattern — pm renders its own DOM, so claim
   flex:1 + internal scroll here). Without this a dragged-short section
   let the cards spill past the row. */
.dashboard-pmsec-head {
	flex-shrink: 0;
}

.dashboard-pmsec-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	align-content: start;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
	padding-right: 2px;
}

/* Custom info tiles + the inline name/value adder. */
.dashboard-pmsec-custom-add {
	margin: 6px 0 2px;
}

.dashboard-pmsec-custom-add .dashboard-modal-input {
	flex: 1 1 0;
	min-width: 0;
}

.dashboard-pmsec-custom-add .dashboard-modal-input:first-child {
	flex: 0 1 7em;
}

.dashboard-pmsec-tile--custom .dashboard-pmsec-file-unlink {
	position: absolute;
	top: 4px;
	right: 4px;
	margin-left: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.dashboard-pmsec-tile--custom {
	position: relative;
}

.dashboard-pmsec-tile--custom:hover .dashboard-pmsec-file-unlink {
	opacity: 1;
}

/* The missing line that broke real-app scrolling: the board container is a
   flex ITEM (sizing applied) but was never a flex CONTAINER in the real DOM
   (the display:flex rule only matched the flattened stub's .modal > .board
   path). Children stacked as blocks, the grid body grew to content, and no
   pane ever overflowed. */
.modal-container.modal--pm-board .modal > .dashboard-pmsec-board,
.modal-container.modal--pm-board .dashboard-pmsec-board-host > .dashboard-pmsec-board {
	display: flex;
	flex-direction: column;
}

/* New-project form: milestone dynamic rows (input + trash each, + appends). */
.dashboard-pmsec-ms-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.dashboard-pmsec-ms-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-pmsec-ms-item .dashboard-modal-input {
	flex: 1 1 auto;
}

.dashboard-pmsec-ms-item--add .dashboard-modal-btn {
	width: 100%;
	justify-content: center;
}

/* ── Remind toggle: a bare alarm-clock (no chrome) ───────────────────────
   Muted at rest, red when armed — in the edit form AND riding the card's
   key-date value. */
.dashboard-pmsec-remind {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* Bare icon (Rae: no background, no border) — !important because theme
	   button rules (e.g. Border's .modal button) out-specify plain classes
	   otherwise and paint a white chip behind it. */
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-faint, var(--text-faint));
	cursor: pointer;
	flex-shrink: 0;
}

.dashboard-pmsec-remind svg {
	width: 14px;
	height: 14px;
}

.dashboard-pmsec-remind.is-armed {
	color: var(--db-danger, #e5484d);
}

/* Card copy rides inline after the key-date value — smaller, aligned. */
.dashboard-pmsec-field .dashboard-pmsec-remind svg {
	width: 12px;
	height: 12px;
	vertical-align: -1px;
}

/* ── Input height unification (Rae): native date/time pickers and the
   styled text inputs must share one height in the pm forms — edit
   overview's key-date row and the todo add row both mixed two heights. */
.dashboard-pmsec-new .dashboard-pmsec-date,
.dashboard-pmsec-new .dashboard-pmsec-time,
.dashboard-pmsec-board .dashboard-pmsec-edit .dashboard-pmsec-date,
.dashboard-pmsec-board .dashboard-pmsec-edit .dashboard-pmsec-time,
.dashboard-pmsec-board .dashboard-pmsec-add-date,
.dashboard-pmsec-board .dashboard-pmsec-add-time {
	box-sizing: border-box;
	height: 32px;
	padding: 4px 8px;
}

/* The TEXT inputs sharing those rows get the same 32px — a mixed 30/34
   read as sloppy (Rae). Scoped to the pm form contexts only. */
.dashboard-pmsec-board .dashboard-pmsec-add-row .dashboard-modal-input,
.dashboard-pmsec-board .dashboard-pmsec-edit .dashboard-library-config-inline-row .dashboard-modal-input {
	box-sizing: border-box;
	height: 32px;
	padding: 4px 10px;
}

/* New-project subfolder row: input + folder picker chevron share the line. */
.dashboard-pmsec-folderwrap {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 120px;
	min-width: 0;
}

.dashboard-pmsec-folderwrap .dashboard-modal-input {
	flex: 1;
	min-width: 0;
}

/* ── PM section toolbar + grouped view + card sizes ────────────────────── */
.dashboard-pmsec-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex-wrap: wrap;
	margin: 8px 0 4px;
}

.dashboard-pmsec-toolbar .dashboard-toolbar-dropdown {
	flex-shrink: 0;
}

.dashboard-pmsec-view-modes {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dashboard-pmsec-group-toggle.active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

/* Grouped blocks: header rail + the shared card grid inside. */
.dashboard-pmsec-groupwrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	min-width: 0;
}

.dashboard-pmsec-grouphead {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--db-accent, var(--interactive-accent));
	padding: 2px 4px;
}

.dashboard-pmsec-grouphead-count {
	flex-shrink: 0;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-hover, rgba(128, 128, 128, 0.12));
	border-radius: 9px;
	padding: 1px 7px;
}

/* Card eyebrow: the group chip rides beside the stage badge. */
.dashboard-pmsec-groupchip {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--db-text-muted, var(--text-muted));
	border: 1px dashed color-mix(in srgb, var(--db-text-faint, #888) 45%, transparent);
	border-radius: 999px;
	padding: 1px 8px;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* N/A money values read quiet, not broken. */
.dashboard-pmsec-money-value--na {
	opacity: 0.45;
}

/* Compact cards: denser grid; the head + actions do the talking. */
.dashboard-pmsec-list--compact {
	grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
	gap: 8px;
}

.dashboard-pmsec-list--compact .dashboard-pmsec-intro {
	min-height: calc(2 * 1.4em);
	font-size: 0.8em;
}

/* PM content: ONE scrollable column — the row is drag-height-capped, so
   without this a taller view (grouped/compact switch) overflows and
   OVERLAPS the section below. */
.dashboard-section-row[data-section-type="pm"] > .dashboard-pmsec-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 2px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-section-row[data-section-type="pm"] > .dashboard-pmsec-content:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

/* The PM content's `display: flex` above out-specifies the generic collapse
   rule (`.dashboard-section-row--collapsed > *`), so a collapsed PM section
   kept rendering its cards. Match the specificity and win by source order. */
.dashboard-section-row--collapsed[data-section-type="pm"] > .dashboard-pmsec-content {
	display: none;
}

.dashboard-pmsec-size-toggle.active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

/* Pin star: bottom-right, ALWAYS visible (Rae) — hollow outline at rest,
 * solid accent fill when pinned. Sits clear of the foot-action buttons. */
.dashboard-pmsec-star {
	/* Lives INSIDE the foot-action row (last child, margin-left:auto) — same
	   line as the skill buttons by construction, never over the money strip. */
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-faint, var(--text-faint));
	cursor: pointer;
	opacity: 0.75;
}

.dashboard-pmsec-star:hover {
	opacity: 1;
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-star.is-active {
	opacity: 1;
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-pmsec-star.is-active svg {
	fill: currentColor;
}

.dashboard-pmsec-star svg {
	width: 14px;
	height: 14px;
}

.dashboard-pmsec-card.is-pinned {
	border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 40%, var(--db-border-card, rgba(128, 128, 128, 0.25)));
}

/* The WHOLE toolbar row packs RIGHT (Rae, final): count + filter + sort +
   toggles all flush to the row's right edge. */
.dashboard-pmsec-toolbar {
	justify-content: flex-end;
}

.dashboard-pmsec-toolbar--gantt {
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: 6px;
}

.dashboard-pmsec-toolbar--gantt .dashboard-gantt-controls {
	display: contents;
}

.dashboard-pmsec-toolbar--gantt .dashboard-gantt-control-group {
	display: flex;
	align-items: center;
	gap: 5px;
}

.dashboard-pmsec-toolbar--gantt .dashboard-gantt-toolbar-spacer {
	flex: 1 1 12px;
	min-width: 12px;
}

.dashboard-pmsec-toolbar--gantt .dashboard-gantt-control-group button {
	white-space: nowrap;
}

.dashboard-pmsec-toolbar--gantt .dashboard-gantt-control-group .active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

.dashboard-pmsec-toolbar .dashboard-pmsec-count {
	flex-shrink: 0;
	margin-left: 0;
}

/* ── PM kanban grouped view: one column per group, horizontal scroll ───── */
.dashboard-pmsec-kanban {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	flex: 1 1 auto;
	min-height: 0;
	align-items: stretch;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-pmsec-kanban:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

.dashboard-pmsec-kcol {
	min-width: 268px;
	width: 268px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	max-height: 100%;
}

/* Column body: cards stack vertically and the column owns its scroll. */
.dashboard-pmsec-list--col {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	min-height: 0;
	flex: 1;
	grid-template-columns: none;
	padding: 2px;
	/* Invisible scrollbar (Rae): transparent at rest, hover reveals the
	   accent hint — the section-wide convention. */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.dashboard-pmsec-list--col:hover {
	scrollbar-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent) transparent;
}

/* WebKit twin: hidden rail until hover. */
.dashboard-pmsec-list--col::-webkit-scrollbar {
	width: 6px;
}

.dashboard-pmsec-list--col::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
}

.dashboard-pmsec-list--col:hover::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 22%, transparent);
}

.dashboard-pmsec-list--col::-webkit-scrollbar-track {
	background: transparent;
}

.dashboard-pmsec-list--col .dashboard-pmsec-card {
	flex: none;
	width: auto;
}

.dashboard-pmsec-kanban-toggle.active {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 12%, transparent);
}

/* ── Skill card pin star (Rae, pm-card scheme): action-row right end ───── */
.dashboard-skillsec-star {
	/* Inside the action row (last child, margin-left auto) — same line as
	   the launch buttons by construction; nudged 3px down to sit on the
	   buttons' optical baseline (Rae). */
	margin-left: auto;
	margin-top: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--db-text-faint, var(--text-faint));
	cursor: pointer;
	opacity: 0.75;
	flex-shrink: 0;
}

.dashboard-skillsec-star:hover {
	opacity: 1;
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-skillsec-star.is-active {
	opacity: 1;
	color: var(--db-accent, var(--interactive-accent));
}

.dashboard-skillsec-star.is-active svg {
	fill: currentColor;
}

.dashboard-skillsec-star svg {
	width: 14px;
	height: 14px;
}

.dashboard-library-group-name--link {
	color: var(--db-link, var(--text-accent));
	cursor: pointer;
}
.dashboard-library-group-name--link:hover { text-decoration: underline; }
.dashboard-library-group-name--link:focus-visible {
	outline: 2px solid var(--db-accent, var(--interactive-accent));
	outline-offset: 2px;
}

/* Immersive editing gates layout operations while keeping content interactive. */
.dashboard-imm-edit-btn.active { color: var(--db-accent, var(--interactive-accent)); background: var(--background-modifier-active-hover); }
.dashboard-imm--locked .dashboard-imm-resize-h,
.dashboard-imm--locked .dashboard-imm-resize-v,
.dashboard-imm--locked .dashboard-imm-resize-handle,
.dashboard-imm--locked .dashboard-imm-widget-del,
.dashboard-imm--locked .dashboard-imm-add-btn,
.dashboard-imm--locked .dashboard-section-grip,
.dashboard-imm--locked .dashboard-section-delete-btn,
.dashboard-imm--locked .dashboard-card-btn--danger,
.dashboard-imm--locked .dashboard-card-resize-handle,
.dashboard-imm--locked .dashboard-section-resize-handle { display: none !important; }
.dashboard-pmsec-schedule {
	flex: 0 0 28px;
	width: 28px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	font-size: 11px;
}
.dashboard-pmsec-schedule svg { width: 15px; height: 15px; }
.dashboard-gantt-schedule-modal { width: min(460px, calc(100vw - 48px)); box-sizing: border-box; }
.dashboard-gantt-schedule-modal > .dashboard-gantt-mode-select { display: block; width: 100%; min-width: 0; box-sizing: border-box; white-space: nowrap; }
.dashboard-gantt-date-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; margin: 12px 0; }
.dashboard-gantt-date-row > .dashboard-modal-input { min-width: 0; box-sizing: border-box; }
.dashboard-gantt-error { color: var(--db-danger, var(--text-error)); }

.dashboard-gantt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; }
.dashboard-gantt-controls .active { color: var(--db-accent, var(--interactive-accent)); }
.dashboard-gantt-host { min-height: 120px; min-width: 0; flex: 1; overflow: hidden; }
.dashboard-gantt-scroll {
	overflow: auto;
	max-height: 100%;
	min-height: 120px;
	padding: 10px;
	border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 15%, var(--db-border, var(--background-modifier-border)));
	border-radius: 14px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 3%, var(--db-bg-section, var(--background-primary)));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--db-text, var(--text-normal)) 3%, transparent);
}
.dashboard-gantt-embed .dashboard-gantt-scroll { max-height: 550px; }
.dashboard-gantt-canvas { position: relative; min-width: 100%; }
.dashboard-gantt-row {
	display: grid;
	grid-template-columns: var(--gantt-label, 220px) 1fr;
	min-height: 40px;
	border-bottom: 1px solid color-mix(in srgb, var(--db-border, var(--background-modifier-border)) 65%, transparent);
}
.dashboard-gantt-axis {
	position: sticky;
	top: 0;
	z-index: 5;
	min-height: 48px;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 8%, var(--db-bg-card, var(--background-primary)));
	border-bottom: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 22%, var(--db-border, var(--background-modifier-border)));
}
.dashboard-gantt-label {
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--db-bg-card, var(--background-primary));
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: 0;
	border-right: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
}
.dashboard-gantt-axis .dashboard-gantt-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--db-text-muted, var(--text-muted));
}
.dashboard-gantt-project {
	min-height: 66px;
	margin-top: 8px;
	border-top: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
}
.dashboard-gantt-project .dashboard-gantt-label {
	flex-wrap: wrap;
	align-content: center;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 9%, var(--db-bg-card, var(--background-primary)));
	border-left: 3px solid var(--db-accent, var(--interactive-accent));
	font-weight: 700;
}
.dashboard-gantt-label button { padding: 3px 5px; height: auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 6px; background: transparent; color: inherit; box-shadow: none; }
.dashboard-gantt-project .dashboard-gantt-label button:not(:hover) { background: transparent; }
.dashboard-gantt-project .dashboard-gantt-label button:nth-of-type(2) { font-weight: 700; }
.dashboard-gantt-project .dashboard-gantt-label button.dashboard-gantt-add-btn {
	width: 25px;
	height: 24px;
	max-width: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	border: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 6px;
	color: var(--db-text-muted, var(--text-muted));
	background: var(--db-bg-section, var(--background-primary));
	cursor: pointer;
}
.dashboard-gantt-project .dashboard-gantt-label button.dashboard-gantt-add-btn svg { width: 14px; height: 14px; }
.dashboard-gantt-project .dashboard-gantt-label button.dashboard-gantt-add-btn:hover {
	color: var(--db-accent, var(--interactive-accent));
	border-color: var(--db-accent, var(--interactive-accent));
	background: var(--db-bg-modal, var(--background-primary));
}
.dashboard-gantt-source { font-size: 10px; width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--db-text-faint, var(--text-faint)); }
.dashboard-gantt-subgroup {
	min-height: 32px !important;
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 4%, transparent);
	border-bottom-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 10%, transparent);
}
.dashboard-gantt-subgroup .dashboard-gantt-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .035em;
	color: var(--db-text-muted, var(--text-muted));
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 5%, var(--db-bg-card, var(--background-primary)));
}
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup) {
	background: color-mix(in srgb, var(--db-bg-card, var(--background-primary)) 70%, transparent);
}
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup) .dashboard-gantt-label {
	font-size: 11px;
	transition: background .15s ease, color .15s ease;
}
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup):hover .dashboard-gantt-label {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 7%, var(--db-bg-card, var(--background-primary)));
}
.dashboard-gantt-task { padding-left: 22px; text-align: left; justify-content: start; }
.dashboard-gantt-task.is-done { text-decoration: line-through; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-gantt-task.is-overrun { color: var(--db-danger, var(--text-error)); }
.dashboard-gantt-lane {
	position: relative;
	min-width: 0;
	background-image: none;
}
.dashboard-gantt-axis .dashboard-gantt-lane { background-color: color-mix(in srgb, var(--db-bg-card, var(--background-primary)) 65%, transparent); }
.dashboard-gantt-tick { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; white-space: nowrap; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-gantt-bar {
	position: absolute;
	height: 20px;
	top: 9px;
	border-radius: 4px;
	background: var(--db-accent, var(--interactive-accent));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--db-text-inverse, #fff) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 18%, transparent);
	opacity: .9;
	cursor: grab;
	touch-action: none;
	transition: filter .12s ease, box-shadow .12s ease;
}
.dashboard-gantt-bar:hover { filter: saturate(1.12) brightness(1.04); box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 25%, transparent); }
.dashboard-gantt-bar.is-milestone { background: var(--db-accent-light, var(--db-accent, var(--interactive-accent))); }
.dashboard-gantt-bar.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--db-text-inverse, #fff) 35%, transparent); }
.dashboard-gantt-bar.is-done { opacity: .42; }
.dashboard-gantt-bar.is-cycle { background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 15%, var(--db-bg-card, var(--background-primary))); border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 22%, transparent); box-shadow: none; opacity: 1; top: 15px; height: 28px; cursor: default; }
.dashboard-gantt-bar.is-summary { top: 24px; height: 8px; border-radius: 99px; opacity: .45; box-shadow: none; cursor: default; }
.dashboard-gantt-marker { position: absolute; top: 13px; width: 11px; height: 11px; transform: rotate(45deg); border: 2px solid var(--db-bg-card, var(--background-primary)); border-radius: 2px; background: var(--db-accent, var(--interactive-accent)); box-shadow: 0 1px 3px color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 28%, transparent); cursor: grab; touch-action: none; }
.dashboard-gantt-marker.is-partial { background: var(--db-text-muted, var(--text-muted)); border-radius: 50%; }
.dashboard-gantt-marker.is-deadline { background: var(--db-danger, var(--text-error)); top: 27px; width: 6px; height: 6px; pointer-events: none; }
.dashboard-gantt-unscheduled { color: var(--db-text-muted, var(--text-muted)); font-size: 11px; position: sticky; left: calc(var(--gantt-label, 220px) + 20px); line-height: 36px; }
.dashboard-gantt-edge { position: absolute; width: 7px; height: 100%; top: 0; cursor: ew-resize; }
.dashboard-gantt-edge--start { left: 0; }
.dashboard-gantt-edge--end { right: 0; }
.dashboard-gantt-today { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--db-accent, var(--interactive-accent)); opacity: .7; pointer-events: none; z-index: 2; }
.dashboard-gantt-picker { display: flex; flex-direction: column; max-height: 250px; overflow: auto; margin: 12px 0; }
.dashboard-gantt-picker button { text-align: left; flex-shrink: 0; }
.dashboard-gantt-editor-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dashboard-gantt-date-row[hidden] { display: none; }

.dashboard-gantt-marker.is-done { opacity: .4; }

/* Keep the Gantt header and sticky project navigation flat and fully opaque. */
.dashboard-gantt-scroll { background: var(--db-bg-section, var(--background-primary)); box-shadow: none; }
.dashboard-gantt-axis { background: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-label { background: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-axis .dashboard-gantt-label {
	position: relative;
	left: auto;
	z-index: auto;
	background: var(--db-bg-modal, var(--background-primary));
	border-right: 1px solid var(--db-border, var(--background-modifier-border));
	pointer-events: none;
}
.dashboard-gantt-project .dashboard-gantt-label {
	background: var(--db-bg-modal, var(--background-primary));
	border-left-color: var(--db-accent, var(--interactive-accent));
}
.dashboard-gantt-subgroup { background: var(--db-bg-section, var(--background-primary)); }
.dashboard-gantt-subgroup .dashboard-gantt-label { background: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup) { background: var(--db-bg-section, var(--background-primary)); }
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup) .dashboard-gantt-label,
.dashboard-gantt-row:not(.dashboard-gantt-axis):not(.dashboard-gantt-project):not(.dashboard-gantt-subgroup):hover .dashboard-gantt-label { background: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-axis .dashboard-gantt-lane { background-color: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-bar {
	background: var(--db-accent, var(--interactive-accent));
	filter: saturate(1.25);
	opacity: 1;
	box-shadow: none;
}
.dashboard-gantt-bar.is-milestone { background: var(--db-accent-light, var(--db-accent, var(--interactive-accent))); filter: saturate(1.35); }
.dashboard-gantt-bar.is-current { box-shadow: 0 0 0 2px var(--db-accent, var(--interactive-accent)); }
.dashboard-gantt-bar.is-done { opacity: 1; filter: saturate(.55); }
.dashboard-gantt-bar.is-cycle {
	background: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 30%, var(--db-bg-modal, var(--background-primary)));
	border: 1px solid color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 75%, var(--db-bg-modal, var(--background-primary)));
}
.dashboard-gantt-bar.is-summary { opacity: 1; background: var(--db-accent, var(--interactive-accent)); }
.dashboard-gantt-marker { background: var(--db-accent, var(--interactive-accent)); box-shadow: none; }
.dashboard-gantt-marker.is-done { opacity: 1; filter: saturate(.55); }
.dashboard-gantt-marker { border-color: var(--db-bg-modal, var(--background-primary)); }
.dashboard-gantt-project-filter::after { content: ''; }

/* Compact project navigation: title, then expandable kind cards with add actions. */
.dashboard-gantt-project .dashboard-gantt-label {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	padding: 7px 8px;
	white-space: normal;
	text-overflow: clip;
}
.dashboard-gantt-project-title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dashboard-gantt-project-title-row .dashboard-gantt-project-collapse { flex: 0 0 18px; padding: 0; text-align: center; }
.dashboard-gantt-project-title-row .dashboard-gantt-project-name { flex: 1 1 auto; min-width: 0; max-width: none; padding: 2px 3px; text-align: left; font-weight: 700; }
.dashboard-gantt-project-title-row .dashboard-gantt-remove-source { flex: 0 0 20px; padding: 0; color: var(--db-text-faint, var(--text-faint)); }
.dashboard-gantt-project-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 100%; }
.dashboard-gantt-kind-card { display: flex; align-items: center; min-width: 0; border: 1px solid var(--db-border, var(--background-modifier-border)); border-radius: 6px; background: var(--db-bg-section, var(--background-primary)); }
.dashboard-gantt-kind-card.is-open { border-color: color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 55%, var(--db-border, var(--background-modifier-border))); }
.dashboard-gantt-project .dashboard-gantt-label .dashboard-gantt-kind-toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3px;
	min-width: 0;
	max-width: none;
	padding: 4px 5px;
	font-size: 10px;
	font-weight: 600;
	text-align: left;
}
.dashboard-gantt-kind-count { flex: 0 0 auto; font-size: 9px; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-gantt-project .dashboard-gantt-label .dashboard-gantt-kind-add {
	flex: 0 0 23px;
	width: 23px;
	height: 24px;
	max-width: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border-left: 1px solid var(--db-border, var(--background-modifier-border));
	border-radius: 0 5px 5px 0;
	color: var(--db-accent, var(--interactive-accent));
	cursor: pointer;
}
.dashboard-gantt-kind-add svg { width: 13px; height: 13px; }

/* Weekly color blocks use a stable repeating palette derived from the active
   dashboard accent. Tasks and milestones share the same calendar-week color. */
.dashboard-gantt-canvas {
	--gantt-week-0: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #168aad) 18%, var(--db-bg-modal, var(--background-primary)));
	--gantt-week-1: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #4361ee) 18%, var(--db-bg-modal, var(--background-primary)));
	--gantt-week-2: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #7b2cbf) 18%, var(--db-bg-modal, var(--background-primary)));
	--gantt-week-3: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #c91876) 18%, var(--db-bg-modal, var(--background-primary)));
	--gantt-week-4: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #e76f00) 18%, var(--db-bg-modal, var(--background-primary)));
	--gantt-week-5: color-mix(in srgb, color-mix(in srgb, var(--db-accent, var(--interactive-accent)) 38%, #2a9d62) 18%, var(--db-bg-modal, var(--background-primary)));
}
.dashboard-gantt-bar,
.dashboard-gantt-bar.is-cycle,
.dashboard-gantt-bar.is-summary,
.dashboard-gantt-bar.is-milestone {
	background: transparent;
	border: 0;
	box-shadow: none;
	filter: none;
	opacity: 1;
}
.dashboard-gantt-bar { filter: none; opacity: 1; }
.dashboard-gantt-week-segment { position: absolute; top: 0; bottom: 0; border-radius: 3px; pointer-events: none; }
.dashboard-gantt-week-0 { background: var(--gantt-week-0); }
.dashboard-gantt-week-1 { background: var(--gantt-week-1); }
.dashboard-gantt-week-2 { background: var(--gantt-week-2); }
.dashboard-gantt-week-3 { background: var(--gantt-week-3); }
.dashboard-gantt-week-4 { background: var(--gantt-week-4); }
.dashboard-gantt-week-5 { background: var(--gantt-week-5); }

/* Color the date axis with the same repeating week palette as the task bars. */
.dashboard-gantt-axis .dashboard-gantt-lane { position: relative; overflow: hidden; }
.dashboard-gantt-axis-week-band {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 4px;
}
.dashboard-gantt-axis .dashboard-gantt-tick { z-index: 1; }
.dashboard-gantt-axis .dashboard-gantt-tick {
	padding: 1px 2px;
	border-radius: 3px;
	color: var(--db-text, var(--text-normal));
	font-weight: 700;
	background: transparent;
	text-shadow: none;
}

/* Give the schedule dialog one measured width at both the Obsidian shell and card. */
.dashboard-gantt-schedule-shell { width: min(500px, calc(100vw - 40px)); box-sizing: border-box; }
.dashboard-gantt-schedule-content { width: 100%; min-width: 0; box-sizing: border-box; }
.dashboard-gantt-schedule-content .dashboard-gantt-schedule-modal { width: 100%; max-width: 100%; min-width: 0; margin: 0; }

/* Todo completion and milestone identity in the expanded task list. */
.dashboard-gantt-task-label { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.dashboard-gantt-task-label .dashboard-gantt-task-checkbox { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; accent-color: var(--db-accent, var(--interactive-accent)); }
.dashboard-gantt-task-label .dashboard-gantt-task { flex: 1 1 auto; min-width: 0; max-width: none; padding: 2px 0; text-align: left; justify-content: flex-start; }
.dashboard-gantt-task-label .dashboard-gantt-task.is-done { text-decoration: line-through; color: var(--db-text-muted, var(--text-muted)); }
.dashboard-gantt-milestone-icon { flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--db-accent, var(--interactive-accent)); }
.dashboard-gantt-milestone-icon svg { width: 15px; height: 15px; }