/* LifeHub Suite — default look: TickTick-style */
.lh-app {
	--lh-blue: #3b82f6;
	--lh-blue-light: #eaf1fe;
	--lh-border: #ececec;
	--lh-text: #2b2b2b;
	--lh-muted: #8a8a8f;
	--lh-bg: #f7f7f8;
	--lh-surface: #fff;
	--lh-rail-bg: #f0f0f2;
	--lh-rail-text: #6b6b70;
	--lh-rail-active: #4c8bf5;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lh-text);
	background: var(--lh-surface);
	border: 1px solid var(--lh-border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 40px);
	height: calc(100dvh - 40px);
	min-height: 480px;
}
.lh-app * { box-sizing: border-box; }
.lh-app button { cursor: pointer; font-family: inherit; }
/* Hardened reset — some themes/plugins apply global styles (borders, outlines, box-shadows, accent colors) to bare button/input/select/textarea tags that leak into the plugin.
   :where() keeps this rule's specificity at zero so every component style below still wins
   normally; "revert" discards the theme's author-level styling for these properties and
   falls back to the browser default, which our own component rules then restyle on top of. */
:where(.lh-app) button, :where(.lh-app) input, :where(.lh-app) select, :where(.lh-app) textarea {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 13px;
	color: inherit;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}
.lh-app button:focus, .lh-app input:focus, .lh-app select:focus, .lh-app textarea:focus, .lh-app button:focus-visible, .lh-app input:focus-visible, .lh-app select:focus-visible, .lh-app textarea:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px var(--lh-blue-light) !important;
	border-color: var(--lh-blue) !important;
}
.lh-app [hidden] { display: none !important; }
/* Dark mode */
.lh-app.lh-dark {
	--lh-border: #3a3a3a; --lh-text: #e8e8e8; --lh-muted: #a0a0a0;
	--lh-bg: #1f1f1f; --lh-surface: #141414; --lh-blue-light: #16324a;
	--lh-rail-bg: #101012; --lh-rail-text: #9a9aa0; --lh-rail-active: #fff;
}
.lh-app.lh-dark .lh-icon-btn, .lh-app.lh-dark .lh-btn-secondary { background: var(--lh-surface); color: var(--lh-text); }
.lh-app.lh-dark .lh-modal-card, .lh-app.lh-dark .lh-panel, .lh-app.lh-dark .lh-topbar { background: var(--lh-surface); }
.lh-app.lh-dark input, .lh-app.lh-dark select, .lh-app.lh-dark textarea { background: #1f1f1f; color: var(--lh-text); border-color: var(--lh-border); }
/* ---------- Top bar ---------- */
.lh-app .lh-topbar {
	display: flex; align-items: center; gap: 10px; padding: 10px 16px;
	border-bottom: 1px solid var(--lh-border); background: var(--lh-surface); flex-wrap: wrap; flex-shrink: 0;
}
.lh-app .lh-topbar-group { display: flex; align-items: center; gap: 6px; }
.lh-app .lh-topbar-right { margin-left: auto; }
.lh-app .lh-page-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--lh-text); }
.lh-app .lh-icon-btn {
	border: 1px solid var(--lh-border); background: var(--lh-surface); border-radius: 6px;
	padding: 6px 10px; font-size: 13px; color: var(--lh-text);
}
.lh-app .lh-icon-btn.lh-iconly { padding: 6px 9px; }
.lh-app .lh-icon-btn:hover { background: var(--lh-bg); }
.lh-app .lh-btn-primary { background: var(--lh-blue); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.lh-app .lh-btn-secondary { background: var(--lh-surface); border: 1px solid var(--lh-border); color: var(--lh-text); border-radius: 6px; padding: 7px 14px; font-size: 13px; }
.lh-app .lh-btn-danger { background: var(--lh-surface); border: 1px solid #d13438; color: #d13438; border-radius: 6px; padding: 7px 14px; }
.lh-app .lh-cal-subswitch { background: var(--lh-bg); padding: 3px; border-radius: 6px; }
.lh-app .lh-subview-btn { border: none; background: transparent; padding: 6px 12px; border-radius: 4px; font-size: 13px; color: var(--lh-muted); }
.lh-app .lh-subview-btn.active { background: var(--lh-surface); color: var(--lh-blue); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.lh-app .lh-period-label { font-weight: 600; font-size: 14px; min-width: 120px; text-align: center; color: var(--lh-muted); }
.lh-app .lh-user-chip { font-size: 13px; color: var(--lh-muted); margin-left: 8px; white-space: nowrap; }
.lh-app .lh-user-chip a { color: var(--lh-blue); }
/* ---------- Section tabs (inline in the top bar) ---------- */
.lh-app .lh-section-tabs { display: flex; gap: 2px; overflow-x: auto; background: var(--lh-bg); padding: 3px; border-radius: 6px; max-width: 44vw; }
.lh-app .lh-rail-btn { display: flex; align-items: center; gap: 5px; border: none; background: transparent; padding: 6px 10px; border-radius: 4px; font-size: 13px; white-space: nowrap; color: var(--lh-muted); }
.lh-app .lh-rail-btn:hover { color: var(--lh-text); }
.lh-app .lh-rail-btn.active { background: var(--lh-surface); color: var(--lh-blue); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.lh-app .lh-rail-icon { font-size: 13px; }
/* ---------- Body layout ---------- */
.lh-app .lh-body { display: flex; flex: 1; min-height: 0; }
/* Slim icon-only app-switcher rail */
.lh-app .lh-iconrail {
	width: 64px; flex-shrink: 0; background: var(--lh-rail-bg); border-right: 1px solid var(--lh-border); display: flex; flex-direction: column;
	align-items: center; padding: 14px 0; gap: 6px;
}
.lh-app .lh-iconrail-views { display: flex; flex-direction: column; gap: 6px; }
.lh-app .lh-iconrail-btn {
	width: 46px; height: 46px; border: none; background: transparent; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; color: var(--lh-rail-text); position: relative;
}
.lh-app .lh-iconrail-btn svg { width: 24px; height: 24px; }
.lh-app .lh-iconrail-btn:hover { background: rgba(0,0,0,.06); color: var(--lh-rail-active); }
.lh-app .lh-iconrail-btn.active { background: var(--lh-surface); color: var(--lh-rail-active); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lh-app .lh-iconrail-sep { width: 30px; height: 1px; background: var(--lh-border); margin: 8px 0; }
.lh-app .lh-iconrail-badge { position: absolute; top: -2px; right: -2px; background: #ff5b5b; color: #fff; font-size: 10px; border-radius: 8px; padding: 1px 5px; min-width: 15px; line-height: 1.4; font-weight: 700; }
.lh-app .lh-main { flex: 1; overflow: auto; padding: 14px 18px; min-width: 0; display: flex; flex-direction: column; }
.lh-app .lh-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* ---------- Right panel — thin edge tab, widens on open ---------- */
.lh-app .lh-panel { width: 40px; flex-shrink: 0; border-left: 1px solid var(--lh-border); position: relative; overflow: hidden; transition: width .22s ease; background: var(--lh-surface); }
.lh-app .lh-panel.open { width: 320px; }
.lh-app .lh-panel-handle {
	position: absolute; top: 0; left: 0; width: 40px; height: 100%; border: none; border-right: 1px solid var(--lh-border);
	background: var(--lh-bg); color: var(--lh-muted); writing-mode: vertical-rl; font-size: 12px; font-weight: 600;
	display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 2;
}
.lh-app .lh-panel.open .lh-panel-handle { background: var(--lh-blue-light); color: var(--lh-blue); }
.lh-app .lh-panel-content { margin-left: 40px; padding: 12px; height: 100%; display: flex; flex-direction: column; min-width: 280px; }
.lh-app .lh-panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lh-border); margin-bottom: 10px; }
.lh-app .lh-panel-tab { border: none; background: transparent; padding: 8px 6px; font-size: 13px; color: var(--lh-muted); border-bottom: 2px solid transparent; }
.lh-app .lh-panel-tab.active { color: var(--lh-blue); font-weight: 600; border-bottom-color: var(--lh-blue); }
.lh-app .lh-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lh-app .lh-panel-hint { font-size: 12px; color: var(--lh-muted); margin: 4px 0 10px; }
.lh-app .lh-panel-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.lh-app .lh-panel-add, .lh-app #lh-goals-add { margin-top: 10px; width: 100%; }
.lh-app .lh-panel-list.dragover { background: var(--lh-blue-light); border-radius: 6px; }
.lh-app .lh-section-pill { border: 1px solid var(--lh-border); background: var(--lh-surface); border-radius: 20px; padding: 5px 10px; font-size: 12px; white-space: nowrap; color: var(--lh-text); }
.lh-app .lh-section-pill.active { background: var(--lh-blue); border-color: var(--lh-blue); color: #fff; font-weight: 600; }
.lh-app .lh-task-card { border: 1px solid var(--lh-border); border-left: 4px solid var(--lh-blue); border-radius: 6px; padding: 8px 10px; background: var(--lh-surface); cursor: grab; font-size: 13px; }
.lh-app .lh-task-card:active { cursor: grabbing; }
.lh-app .lh-task-card .lh-tc-title { font-weight: 600; }
.lh-app .lh-task-card .lh-tc-meta { color: var(--lh-muted); font-size: 11px; margin-top: 2px; }
.lh-app .lh-task-card.urgent { border-left-color: #d13438; }
.lh-app .lh-task-card.important { box-shadow: inset 3px 0 0 0 #ca5010; }
.lh-app .lh-goal-card { border: 1px solid var(--lh-border); border-radius: 8px; padding: 10px; cursor: grab; }
.lh-app .lh-goal-card:active { cursor: grabbing; }
.lh-app .lh-goal-card.dragging { opacity: .4; }
.lh-app .lh-goal-card.complete { border-color: #107c10; background: rgba(16,124,16,.06); }
.lh-app .lh-goal-card h4 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.lh-app .lh-goal-rank { color: var(--lh-muted); font-size: 11px; font-weight: 400; }
.lh-app .lh-goal-badge { background: #107c10; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
.lh-app .lh-goal-bar-bg { background: #eee; border-radius: 8px; height: 10px; overflow: hidden; }
.lh-app .lh-goal-bar-fill { background: var(--lh-blue); height: 100%; }
.lh-app .lh-goal-card.complete .lh-goal-bar-fill { background: #107c10; }
.lh-app .lh-goal-points { font-size: 12px; color: var(--lh-muted); margin-top: 4px; }
/* ---------- Calendar grid (month) ---------- */
.lh-app .lh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(6, 1fr); border-top: 1px solid var(--lh-border); border-left: 1px solid var(--lh-border); flex: 1; min-height: 0; border-radius: 6px; overflow: hidden; }
.lh-app .lh-cal-headcell { padding: 6px; font-size: 12px; font-weight: 600; color: var(--lh-muted); border-right: 1px solid var(--lh-border); border-bottom: 1px solid var(--lh-border); text-align: center; }
.lh-app .lh-cal-cell { border-right: 1px solid var(--lh-border); border-bottom: 1px solid var(--lh-border); padding: 4px; font-size: 12px; position: relative; overflow-y: auto; cursor: pointer; }
.lh-app .lh-cal-cell.dragover { background: var(--lh-blue-light); }
.lh-app .lh-cal-cell .lh-cal-daynum { font-weight: 600; color: var(--lh-muted); margin-bottom: 3px; }
.lh-app .lh-cal-cell.today .lh-cal-daynum { background: var(--lh-blue); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.lh-app .lh-cal-event { background: var(--lh-blue); color: #fff; border-radius: 5px; padding: 3px 7px; margin-bottom: 3px; font-size: 11px; font-weight: 500; cursor: grab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-app .lh-cal-event.done { opacity: .5; text-decoration: line-through; }
.lh-app .lh-cal-event.virtual { opacity: .85; }
.lh-app .lh-cal-event.allday { background: #ffa63e; }
/* ---------- Day / Week time-grid ---------- */
.lh-app .lh-timegrid-wrap { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.lh-app .lh-timegrid-allday { display: flex; border: 1px solid var(--lh-border); border-bottom: none; }
.lh-app .lh-timegrid-allday-label { width: 56px; flex-shrink: 0; font-size: 10px; color: var(--lh-muted); padding: 4px; }
.lh-app .lh-timegrid-allday-days { flex: 1; display: flex; }
.lh-app .lh-timegrid-allday-day { flex: 1; border-left: 1px solid var(--lh-border); padding: 2px; min-height: 24px; }
.lh-app .lh-timegrid-head { display: flex; border: 1px solid var(--lh-border); border-bottom: none; position: sticky; top: 0; background: var(--lh-surface); z-index: 2; }
.lh-app .lh-timegrid-head-spacer { width: 56px; flex-shrink: 0; }
.lh-app .lh-timegrid-head-days { flex: 1; display: flex; }
.lh-app .lh-timegrid-head-day { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 2px; border-left: 1px solid var(--lh-border); }
.lh-app .lh-timegrid-head-day.today { color: var(--lh-blue); }
.lh-app .lh-timegrid-body { display: flex; border: 1px solid var(--lh-border); position: relative; }
.lh-app .lh-timegrid-hours { width: 56px; flex-shrink: 0; }
.lh-app .lh-timegrid-hour-label { height: 48px; font-size: 10px; color: var(--lh-muted); text-align: right; padding-right: 6px; border-top: 1px solid var(--lh-border); box-sizing: border-box; }
.lh-app .lh-timegrid-days { flex: 1; display: flex; position: relative; }
.lh-app .lh-timegrid-day { flex: 1; border-left: 1px solid var(--lh-border); position: relative; }
.lh-app .lh-timegrid-hourline { height: 48px; border-top: 1px solid var(--lh-border); box-sizing: border-box; }
.lh-app .lh-timegrid-event { position: absolute; background: var(--lh-blue); color: #fff; border-radius: 5px; font-size: 11px; font-weight: 500; padding: 3px 6px; overflow: hidden; cursor: grab; }
.lh-app .lh-timegrid-event.done { opacity: .5; text-decoration: line-through; }
/* ---------- Agenda ---------- */
.lh-app .lh-agenda-list { flex: 1; overflow-y: auto; }
.lh-app .lh-agenda-day { font-weight: 700; font-size: 13px; color: var(--lh-muted); margin: 14px 0 6px; }
.lh-app .lh-agenda-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lh-border); border-left: 4px solid var(--lh-blue); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.lh-app .lh-agenda-item.done { opacity: .5; text-decoration: line-through; }
.lh-app .lh-agenda-time { color: var(--lh-muted); font-size: 12px; min-width: 90px; }
/* ---------- Eisenhower matrix (TickTick-style quadrant badges) ---------- */
.lh-app .lh-eis-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.lh-app .lh-eis-quad { border: 1px solid var(--lh-border); border-radius: 10px; padding: 12px; overflow-y: auto; background: var(--lh-surface); }
.lh-app .lh-eis-quad h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--lh-text); display: flex; align-items: center; gap: 8px; }
.lh-app .lh-eis-quad.dragover { background: var(--lh-blue-light); }
.lh-app .lh-eis-badge { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.lh-app .lh-eis-badge.q1 { background: #ff5b5b; }
.lh-app .lh-eis-badge.q2 { background: #ffa63e; }
.lh-app .lh-eis-badge.q3 { background: #4c8bf5; }
.lh-app .lh-eis-badge.q4 { background: #35c46f; }
.lh-app .lh-eis-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lh-muted); margin: 8px 0 6px; }
.lh-app .lh-eis-list { display: flex; flex-direction: column; gap: 6px; }
/* ---------- Gantt ---------- */
.lh-app .lh-gantt-wrap { flex: 1; overflow-y: auto; }
.lh-app .lh-gantt-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; border-bottom: 1px solid var(--lh-border); min-height: 34px; }
.lh-app .lh-gantt-label { font-size: 12px; padding: 4px 8px; }
.lh-app .lh-gantt-track { position: relative; height: 20px; background: var(--lh-bg); border-radius: 3px; margin: 4px 8px; }
.lh-app .lh-gantt-bar { position: absolute; top: 0; bottom: 0; background: var(--lh-blue); border-radius: 3px; }
.lh-app .lh-gantt-bar.done { background: #107c10; }
/* ---------- Login ---------- */
.lifehub-login-wrap { display: flex; justify-content: center; padding: 40px 10px; }
.lifehub-login-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #e1e1e1; border-radius: 8px; padding: 24px; }
.lifehub-login-card label { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lifehub-login-card input { padding: 8px; border: 1px solid #e1e1e1; border-radius: 6px; }
.lifehub-login-card button { margin-top: 8px; background: #4c8bf5; color: #fff; border: none; padding: 9px; border-radius: 6px; font-weight: 600; }
.lifehub-error { color: #d13438; font-size: 13px; }
/* ---------- Modal ---------- */
.lh-app .lh-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 100; }
.lh-app .lh-modal[hidden] { display: none; }
.lh-app .lh-modal-card { background: var(--lh-surface, #fff); color: var(--lh-text, #242424); border-radius: 12px; padding: 20px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; }
.lh-app .lh-modal-card label { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lh-app .lh-modal-card input, .lh-app .lh-modal-card textarea, .lh-app .lh-modal-card select { padding: 7px; border: 1px solid var(--lh-border, #e1e1e1); border-radius: 6px; font-size: 13px; }
.lh-app .lh-title-input { font-size: 18px !important; padding: 8px 4px !important; border: none !important; border-bottom: 1px solid var(--lh-border, #e1e1e1) !important; border-radius: 0 !important; }
.lh-app .lh-checkline, .lh-app .lh-radioline { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 13px; }
.lh-app .lh-modal-row { display: flex; gap: 10px; }
.lh-app .lh-modal-row label { flex: 1; min-width: 0; }
.lh-app .lh-modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.lh-app #lh-task-more { display: flex; flex-direction: column; gap: 10px; }
.lh-app #lh-task-more[hidden] { display: none; }
.lh-app .lh-weekday-picker { display: flex; gap: 4px; }
.lh-app .lh-weekday-picker button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--lh-border, #e1e1e1); background: var(--lh-surface, #fff); font-size: 12px; }
.lh-app .lh-weekday-picker button.active { background: var(--lh-blue, #4c8bf5); color: #fff; border-color: var(--lh-blue, #4c8bf5); }
/* ---------- Tasks flagship view (TickTick "Today"-style) ---------- */
.lh-app .lh-add-task-bar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lh-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; color: var(--lh-muted); flex-shrink: 0; }
.lh-app .lh-add-task-bar input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; color: var(--lh-text); padding: 0; }
.lh-app .lh-tasks-scroll { flex: 1; overflow-y: auto; }
.lh-app .lh-tg-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lh-text); padding: 10px 2px 6px; cursor: pointer; }
.lh-app .lh-tg-header .lh-tg-count { color: var(--lh-muted); font-weight: 400; }
.lh-app .lh-tg-header .lh-tg-chevron { color: var(--lh-muted); font-size: 11px; margin-right: 2px; }
.lh-app .lh-tg-header.overdue { color: #d13438; }
.lh-app .lh-tg-list { display: flex; flex-direction: column; }
.lh-app .lh-tg-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--lh-border); cursor: pointer; font-size: 14px; }
.lh-app .lh-tg-row:hover { background: var(--lh-bg); }
.lh-app .lh-tg-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--lh-blue); flex-shrink: 0; }
.lh-app .lh-tg-row .lh-tg-title-col { flex: 1; min-width: 0; }
.lh-app .lh-tg-row .lh-tg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-app .lh-tg-row .lh-tg-sub { font-size: 11px; color: var(--lh-muted); }
.lh-app .lh-tg-row.done .lh-tg-title { text-decoration: line-through; color: var(--lh-muted); }
.lh-app .lh-tg-meta { font-size: 12px; color: var(--lh-muted); white-space: nowrap; flex-shrink: 0; }
.lh-app .lh-tg-meta.overdue { color: #d13438; }
.lh-app .lh-tg-empty { color: var(--lh-muted); font-size: 13px; padding: 6px 2px 16px; }
/* ---------- Task detail slide-in panel ---------- */
.lh-app .lh-detail-panel {
	position: fixed; top: 65px; right: 0; bottom: 0; width: 340px; max-width: 90vw;
	background: var(--lh-surface); border-left: 1px solid var(--lh-border); box-shadow: -4px 0 16px rgba(0,0,0,.08);
	padding: 14px; display: flex; flex-direction: column; gap: 10px; z-index: 60;
}
.lh-app .lh-detail-panel[hidden] { display: none; }
.lh-app .lh-detail-header { display: flex; align-items: center; gap: 8px; }
.lh-app .lh-detail-header input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--lh-blue); }
.lh-app .lh-detail-listname { font-size: 12px; color: var(--lh-muted); }
.lh-app .lh-detail-date-row { display: flex; gap: 8px; }
.lh-app .lh-detail-date-row input { flex: 1; padding: 7px; border: 1px solid var(--lh-border); border-radius: 6px; font-size: 13px; }
.lh-app .lh-detail-panel textarea { border: 1px solid var(--lh-border); border-radius: 6px; padding: 8px; font-size: 13px; resize: vertical; flex: 1; }
.lh-app .lh-detail-menu { position: absolute; top: 44px; right: 14px; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); display: flex; flex-direction: column; z-index: 70; overflow: hidden; min-width: 170px; }
.lh-app .lh-detail-menu[hidden] { display: none; }
.lh-app .lh-detail-menu button { border: none; background: none; text-align: left; padding: 9px 12px; font-size: 13px; color: var(--lh-text); }
.lh-app .lh-detail-menu button:hover { background: var(--lh-bg); }
.lh-app .lh-detail-menu-danger { color: #d13438 !important; }
.lh-app .lh-ctx-menu { position: fixed; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.16); display: flex; flex-direction: column; z-index: 200; overflow: hidden; min-width: 150px; }
.lh-app .lh-ctx-menu[hidden] { display: none; }
.lh-app .lh-ctx-menu button { border: none; background: none; text-align: left; padding: 9px 14px; font-size: 13px; color: var(--lh-text); }
.lh-app .lh-ctx-menu button:hover { background: var(--lh-bg); }
.lh-app .lh-more-toggle { align-self: flex-start; border: none; background: none; color: var(--lh-blue); font-size: 13px; font-weight: 600; padding: 4px 0; }
/* ---------- Redesigned task popup (TickTick-style) ---------- */
.lh-app .lh-tm-card { gap: 0; padding: 18px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); width: 340px; max-width: 90vw; }
.lh-app .lh-tm-toprow { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #ececec; margin-bottom: 0; }
.lh-app .lh-tm-due-btn { display: flex; align-items: center; gap: 6px; border: none; background: none; color: #9a9a9a; font-size: 14px; padding: 4px; }
.lh-app .lh-tm-due-btn.has-date { color: var(--lh-blue); font-weight: 600; }
.lh-app .lh-tm-flag-btn { border: none; background: none; color: #c2c2c2; padding: 4px; border-radius: 4px; }
.lh-app .lh-tm-flag-btn[data-priority="important"] { color: #ca5010; }
.lh-app .lh-tm-flag-btn[data-priority="urgent"] { color: #d13438; }
.lh-app .lh-tm-flag-btn[data-priority="both"] { color: #a4262c; }
.lh-app .lh-tm-title { font-size: 19px; font-weight: 500; border: none !important; padding: 16px 2px 12px !important; resize: none; overflow: hidden; min-height: 26px; color: var(--lh-text); }
.lh-app .lh-tm-title::placeholder { color: #b0b0b0; font-weight: 500; }
.lh-app .lh-tm-sections { display: flex; gap: 6px; margin: 0 0 10px; }
.lh-app .lh-tm-section-btn { width: 32px; height: 32px; border: none; background: var(--lh-bg); border-radius: 50%; font-size: 15px; display: flex; align-items: center; justify-content: center; filter: grayscale(1); opacity: .4; transition: filter .12s, opacity .12s; }
.lh-app .lh-tm-section-btn.active { filter: none; opacity: 1; background: var(--lh-blue-light); box-shadow: 0 0 0 2px var(--lh-blue); }
.lh-app .lh-tm-bottomrow { display: flex; align-items: center; gap: 8px; border-top: 1px solid #ececec; padding-top: 12px; margin-top: 8px; }
.lh-app .lh-tm-listbtn { display: flex; align-items: center; gap: 6px; border: none; background: none; color: #9a9a9a; font-size: 13px; padding: 4px; }
.lh-app #lh-task-list-wrap { margin-bottom: 10px; }
.lh-app #lh-task-more { margin-bottom: 10px; gap: 10px; }
.lh-app .lh-modal-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Due-date / duration / calendar popovers */
.lh-app .lh-due-popover { position: fixed; z-index: 120; background: #fff; border: none; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 16px; width: 300px; display: flex; flex-direction: column; gap: 0; }
.lh-app .lh-due-popover[hidden] { display: none; }
.lh-app .lh-due-tabs { display: flex; gap: 4px; background: #f0f0f0; padding: 3px; border-radius: 10px; margin-bottom: 14px; }
.lh-app .lh-due-tab { flex: 1; border: none; background: transparent; padding: 7px; border-radius: 8px; font-size: 14px; color: #9a9a9a; }
.lh-app .lh-due-tab.active { background: #fff; color: #1a1a1a; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.lh-app .lh-due-presets { display: flex; justify-content: space-between; padding: 0 4px 10px; }
.lh-app .lh-due-presets button { border: none; background: none; border-radius: 50%; width: 38px; height: 38px; color: #8a8a8a; }
.lh-app .lh-due-presets button:hover { background: #f5f5f5; }
.lh-app .lh-due-minical-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; color: #1a1a1a; padding: 4px 2px 10px; }
.lh-app .lh-due-cal-nav { display: flex; align-items: center; gap: 8px; }
.lh-app .lh-due-minical-head button { border: none; background: none; font-size: 16px; color: #9a9a9a; padding: 2px 4px; }
.lh-app .lh-due-cal-dot { width: 8px !important; height: 8px !important; border-radius: 50%; background: var(--lh-blue); padding: 0 !important; }
.lh-app .lh-due-minical { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; text-align: center; font-size: 13px; }
.lh-app .lh-due-minical .lh-mc-dow { color: #9a9a9a; font-size: 11px; padding: 0 0 4px; font-weight: 700; }
.lh-app .lh-due-minical button { border: none; background: none; padding: 7px 0; border-radius: 50%; color: var(--lh-text); }
.lh-app .lh-due-minical button:hover { background: #f5f5f5; }
.lh-app .lh-due-minical button.today { box-shadow: inset 0 0 0 1.5px var(--lh-blue); color: var(--lh-blue); font-weight: 700; }
.lh-app .lh-due-minical button.selected { background: var(--lh-blue); color: #fff; font-weight: 700; }
.lh-app .lh-due-minical button.other-month { color: #c2c2c2; }
.lh-app .lh-due-row { display: flex; align-items: center; gap: 8px; border: none; background: none; font-size: 14px; color: #1a1a1a; padding: 11px 2px; width: 100%; text-align: left; border-top: 1px solid #ececec; }
.lh-app .lh-due-row select { border: none; background: none; padding: 0; font-size: 14px; color: #1a1a1a; }
.lh-app .lh-due-chevron { color: #c2c2c2; font-size: 15px; }
.lh-app #lh-cal-popover-list button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 9px 6px; font-size: 13px; text-align: left; border-radius: 6px; }
.lh-app #lh-cal-popover-list button:hover { background: #f5f5f5; }
/* Duration tab: "Start"/"End" label + pill date/time fields, all on one row */
.lh-app .lh-dur-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.lh-app .lh-dur-label { font-size: 13px; color: #9a9a9a; width: 40px; flex-shrink: 0; }
.lh-app .lh-dur-row input[type=date], .lh-app .lh-dur-row input[type=time] {
	border: none; background: #f0f0f0; border-radius: 20px; padding: 8px 12px; text-align: center; font-size: 13px; flex: 1; min-width: 0;
}
/* Clear / OK pill action buttons */
.lh-app .lh-due-actions { display: flex; gap: 10px; padding-top: 14px; }
.lh-app .lh-pill-btn { flex: 1; border: none; border-radius: 22px; padding: 11px; font-size: 14px; font-weight: 600; }
.lh-app .lh-pill-clear { background: #f0f0f0; color: #8a8a8a; }
.lh-app .lh-pill-ok { background: var(--lh-blue); color: #fff; }
.lh-app.lh-dark .lh-tm-card, .lh-app.lh-dark .lh-due-popover { background: var(--lh-surface); }
.lh-app.lh-dark .lh-tm-toprow, .lh-app.lh-dark .lh-tm-bottomrow, .lh-app.lh-dark .lh-due-row { border-color: var(--lh-border); }
.lh-app.lh-dark .lh-tm-title, .lh-app.lh-dark .lh-due-minical-head, .lh-app.lh-dark .lh-due-tab.active, .lh-app.lh-dark .lh-due-row { color: var(--lh-text); }
.lh-app.lh-dark .lh-due-tabs, .lh-app.lh-dark .lh-due-presets button:hover, .lh-app.lh-dark .lh-due-minical button:hover, .lh-app.lh-dark .lh-pill-clear, .lh-app.lh-dark .lh-dur-row input { background: var(--lh-bg); }
.lh-app.lh-dark .lh-due-tab.active { background: var(--lh-surface); }
/* Real toggle switch for All Day */
.lh-app .lh-checkline:has(#lh-task-allday) { justify-content: space-between; }
.lh-app #lh-task-allday { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 12px; background: var(--lh-border); position: relative; outline: none; margin: 0; flex-shrink: 0; }
.lh-app #lh-task-allday::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s ease; }
.lh-app #lh-task-allday:checked { background: var(--lh-blue); }
.lh-app #lh-task-allday:checked::before { left: 18px; }
.lh-app .lh-recur-custom { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--lh-border, #e1e1e1); border-radius: 8px; padding: 10px; }
/* Round colour-swatch inputs (TickTick "Add List" style) */
.lh-app .lh-swatch-input { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--lh-border, #e1e1e1); cursor: pointer; overflow: hidden; }
.lh-app .lh-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.lh-app .lh-swatch-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.lh-app .lh-swatch-input::-moz-color-swatch { border: none; border-radius: 50%; }
/* ---------- Tasklist (flat, e.g. shopping list) ---------- */
.lh-app .lh-tasklist-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--lh-border); font-size: 14px; }
.lh-app .lh-tasklist-row.done { opacity: .5; text-decoration: line-through; }
.lh-app .lh-tasklist-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--lh-blue); }
/* ---------- Task Lists board (categorised, TickTick "Add List" style columns) ---------- */
.lh-app .lh-list-column { min-width: 220px; max-width: 260px; flex-shrink: 0; display: flex; flex-direction: column; border: 1px solid var(--lh-border); border-radius: 10px; padding: 10px; background: var(--lh-bg); max-height: 100%; }
.lh-app .lh-list-column-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lh-app .lh-list-column-new { border-style: dashed; gap: 6px; background: var(--lh-surface); }
.lh-app .lh-list-add-input { padding: 6px; border: 1px solid var(--lh-border); border-radius: 6px; font-size: 12px; flex: 1; }
/* Calendar management row (settings) */
.lh-app .lh-calendar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lh-app .lh-calendar-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.lh-app .lh-calendar-row input[type=text] { flex: 1; padding: 4px 6px; }
/* ---------- Responsive: tablet/mobile ---------- */
@media (max-width: 900px) {.lh-app .lh-period-label { display: none; }
.lh-app .lh-section-tabs { order: 4; width: 100%; max-width: 100%; }
.lh-app .lh-cal-subswitch { order: 5; width: 100%; justify-content: center; }
.lh-app .lh-panel.open { position: fixed; top: 64px; right: 0; bottom: 0; width: 85vw; max-width: 320px; z-index: 40; box-shadow: -2px 0 8px rgba(0,0,0,.15); }
}
@media (max-width: 600px) {.lh-app { height: calc(100dvh - 20px); max-height: none; }
.lh-app .lh-topbar { gap: 6px; padding: 8px 10px; }
.lh-app .lh-page-title { font-size: 17px; }
.lh-app .lh-subview-btn { padding: 6px 8px; font-size: 12px; }
.lh-app .lh-user-chip { display: none; }
.lh-app .lh-cal-cell { font-size: 11px; }
.lh-app .lh-eis-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
.lh-app .lh-modal-row { flex-direction: column; }
}

/* ==========================================================
   LifeHub Docker — visual restyle layer (dark/light mockup)
   Keeps every original selector/behaviour; only look & feel
   and a few purely additive elements (brand badge, sun/moon
   icon swap, colour-scheme picker) are new.
   ========================================================== */

body { margin: 0; background: var(--lh-page-bg, #eef1f5); }
.lh-app { margin: 20px; }
@media (max-width: 600px) { .lh-app { margin: 0; } }

/* ---- Refined palette (light) ---- */
.lh-app {
	--lh-border: #e7e9ee;
	--lh-text: #20242c;
	--lh-muted: #7b8190;
	--lh-bg: #f4f5f8;
	--lh-surface: #ffffff;
	--lh-rail-bg: #f4f5f8;
	--lh-rail-text: #7b8190;
	--lh-page-bg: #eef1f5;
	--lh-green: #22a565;
	--lh-green-dim: #22a56522;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(20,24,33,.06);
}

/* ---- Refined palette (dark) — matches the near-black navy mockup ---- */
.lh-app.lh-dark {
	--lh-border: #232733;
	--lh-text: #eef0f4;
	--lh-muted: #8a90a0;
	--lh-bg: #12151c;
	--lh-surface: #171a23;
	--lh-rail-bg: #0d0f15;
	--lh-rail-text: #8a90a0;
	--lh-page-bg: #05060a;
	--lh-blue-light: #15304e;
	--lh-green-dim: #16341f;
}
body:has(.lh-app.lh-dark) { background: var(--lh-page-bg, #05060a); }

/* ---- Colour schemes — override the accent used across rail/buttons/events ---- */
.lh-app.lh-scheme-blue   { --lh-blue: #3b82f6; --lh-blue-light: #eaf1fe; --lh-rail-active: #3b82f6; }
.lh-app.lh-scheme-green  { --lh-blue: #22a565; --lh-blue-light: #e7f7ee; --lh-rail-active: #22a565; }
.lh-app.lh-scheme-purple { --lh-blue: #7c6fff; --lh-blue-light: #efedff; --lh-rail-active: #7c6fff; }
.lh-app.lh-scheme-orange { --lh-blue: #f0883e; --lh-blue-light: #fef1e6; --lh-rail-active: #f0883e; }
.lh-app.lh-scheme-rose   { --lh-blue: #e8558f; --lh-blue-light: #fdeaf1; --lh-rail-active: #e8558f; }
.lh-app.lh-dark.lh-scheme-blue   { --lh-blue-light: #16324a; }
.lh-app.lh-dark.lh-scheme-green  { --lh-blue-light: #123322; }
.lh-app.lh-dark.lh-scheme-purple { --lh-blue-light: #262247; }
.lh-app.lh-dark.lh-scheme-orange { --lh-blue-light: #3a2716; }
.lh-app.lh-dark.lh-scheme-rose   { --lh-blue-light: #3a1c29; }

/* ---- Brand badge ---- */
.lh-app .lh-brand { display: flex; align-items: center; gap: 10px; }
.lh-app .lh-brand-badge {
	width: 32px; height: 32px; border-radius: 9px; background: var(--lh-green, #22a565);
	color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---- Top bar — a touch more breathing room, sits like a card ---- */
.lh-app .lh-topbar { padding: 12px 18px; gap: 14px; }
.lh-app .lh-page-title { font-size: 18px; }

/* ---- Section tabs as pills (Tasks/Calendar/Goals-style nav from the mockup) ---- */
.lh-app .lh-section-tabs { background: var(--lh-bg); border-radius: 10px; padding: 4px; }
.lh-app .lh-rail-btn { border-radius: 8px; padding: 7px 14px; font-weight: 600; }
.lh-app .lh-rail-btn.active { background: var(--lh-blue); color: #fff; box-shadow: none; }
.lh-app .lh-rail-btn:not(.active):hover { background: var(--lh-surface); }

/* ---- Buttons / cards — softer, rounder ---- */
.lh-app .lh-btn-primary { background: var(--lh-blue); border-radius: 8px; padding: 8px 16px; }
.lh-app .lh-icon-btn { border-radius: 8px; }
.lh-app .lh-modal-card { border-radius: 16px; }
.lh-app .lh-task-card, .lh-app .lh-goal-card { border-radius: 10px; }
.lh-app .lh-cal-grid, .lh-app .lh-eis-quad { border-radius: 12px; }

/* ---- Icon rail — quiet surface matching the mockup's left rail ---- */
.lh-app .lh-iconrail { background: var(--lh-rail-bg); }
.lh-app.lh-dark .lh-iconrail { border-right-color: var(--lh-border); }
.lh-app .lh-iconrail-btn.active { color: var(--lh-blue); }
.lh-app .lh-iconrail-btn:hover { color: var(--lh-blue); }

/* ---- Points/goal accents use the green, matching the mockup's stat colouring ---- */
.lh-app .lh-goal-bar-fill { background: var(--lh-blue); }
.lh-app .lh-goal-card.complete { border-color: var(--lh-green); background: var(--lh-green-dim); }
.lh-app .lh-goal-card.complete .lh-goal-bar-fill { background: var(--lh-green); }
.lh-app .lh-goal-badge { background: var(--lh-green); }
.lh-app .lh-iconrail-badge { background: var(--lh-green); }
.lh-app .lh-gantt-bar.done { background: var(--lh-green); }

/* ---- Sun / moon dark-mode toggle: show the icon for what you'd switch *to* ---- */
.lh-app #lh-darkmode-toggle { display: flex; align-items: center; justify-content: center; }
.lh-app #lh-darkmode-toggle .lh-icon-sun { display: none; }
.lh-app #lh-darkmode-toggle .lh-icon-moon { display: block; }
.lh-app.lh-dark #lh-darkmode-toggle .lh-icon-sun { display: block; color: #f5c542; }
.lh-app.lh-dark #lh-darkmode-toggle .lh-icon-moon { display: none; }

/* ---- Colour scheme picker (Settings modal) ---- */
.lh-scheme-picker { display: flex; gap: 10px; margin-bottom: 14px; }
.lh-scheme-swatch {
	width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.lh-scheme-swatch-blue   { background: #3b82f6; }
.lh-scheme-swatch-green  { background: #22a565; }
.lh-scheme-swatch-purple { background: #7c6fff; }
.lh-scheme-swatch-orange { background: #f0883e; }
.lh-scheme-swatch-rose   { background: #e8558f; }
.lh-scheme-swatch.active { border-color: var(--lh-text, #20242c); }

/* ---- Login page — badge + card matching the app's new look ---- */
.lh-login-body { background: var(--lh-page-bg, #eef1f5); min-height: 100vh; margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.lifehub-login-wrap { padding: 80px 16px; }
.lifehub-login-card { max-width: 300px; margin: 0 auto; border-radius: 16px; box-shadow: 0 4px 20px rgba(20,24,33,.08); background: #fff; align-items: stretch; }
.lh-login-badge {
	width: 40px; height: 40px; border-radius: 10px; background: #22a565; color: #fff;
	font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.lifehub-login-card button { background: #3b82f6; border-radius: 8px; }

/* ---- Mobile: bottom tab bar for the icon rail so core actions stay thumb-reachable ---- */
@media (max-width: 640px) {
	.lh-app .lh-body { flex-direction: column; }
	.lh-app .lh-iconrail {
		width: 100%; flex-direction: row; justify-content: space-around; padding: 6px 4px;
		border-right: none; border-top: 1px solid var(--lh-border);
		order: 3; position: sticky; bottom: 0; z-index: 30;
	}
	.lh-app .lh-iconrail-views { flex-direction: row; gap: 2px; }
	.lh-app .lh-iconrail-sep { display: none; }
	.lh-app .lh-iconrail-btn { width: 40px; height: 40px; }
	.lh-app .lh-brand-badge { width: 28px; height: 28px; }
	.lh-app .lh-topbar { flex-wrap: wrap; }
}