/* === css/theme_tokens.css === */
:root {
    /* Brand accent — refined deep emerald (was the raw `green` keyword) */
    --primary-color: #1f8a70;
    --secondary-color: #fcfcf7;

    --app-background: var(--secondary-color);
    --app-text-color: #1b1b1b;
    --timeline-event-stroke: var(--primary-color);
    --category-chip-border: #000;

    /* App chrome (navbar tray, side controllers, bottom axis band): warm ink
       instead of raw primary — the canvas is the hero, the chrome recedes. */
    --chrome-ink: #262119;
    --chrome-ink-edge: rgba(255, 248, 230, 0.08);
    --chrome-shadow: 0 6px 18px -6px rgba(40, 34, 20, 0.5);
    /* Text ON the warm-ink chrome — one label color, one dim tier. */
    --chrome-on-ink: #f3ede0;
    --chrome-on-ink-dim: rgba(243, 237, 224, 0.62);
    /* Project pill outline: softened ink, no longer a hard primary border */
    --project-pill-stroke: rgba(38, 33, 25, 0.55);
    /* Relationship focus mode: cool slate reads as "structure" on warm paper */
    --relation-accent: #5b78a8;

    --surface-day-field: #ffffff;
    --surface-night-field: #000000;
    --surface-night-alt-field: #2a2a2a;
    --surface-light-border: #2a2a2a;
    --surface-light-hover: #f3f3f3;
    --surface-night-hover: #111111;
    --surface-night-hover-border: #444444;
    --surface-night-alt-hover: #333333;
    --surface-night-alt-hover-border: #555555;
    --list-group-surface: var(--surface-day-field);

    --surface-panel-dark: #191919;
    --text-on-dark: #ffffff;
    --text-on-accent: #ffffff;
    --surface-loading-bg: var(--surface-night-alt-field);
    --surface-card-day: var(--surface-day-field);

    /* Warm-neutral surface ramp, tuned to the #fcfcf7 paper (was cool blue-greys) */
    --surface-muted: #f5f4f0;
    --surface-muted-2: #efece5;
    --surface-hover-day: #faf9f5;
    --surface-soft: #f2f1ec;
    --surface-faint: rgba(40, 34, 20, 0.02);

    /* Two-step warm hairline scale (collapses five near-duplicate greys) */
    --border-soft: #e5e2da;
    --border-muted: #e5e2da;
    --border-subtle: #ece9e2;
    --border-panel: #e5e2da;
    --border-divider: #ece9e2;
    --border-input-light: #cbc6ba;
    --border-overlay: rgba(255, 255, 255, 0.1);

    --text-strong: #1f2937;
    --text-default-dark: #333333;
    --text-muted: #666666;
    --text-subtle: #4d5566;
    --text-secondary: #2f2f36;

    /* Softer, warm-tinted elevation (was heavy pure-black on a light UI) */
    --shadow-sm: 0 1px 2px rgba(40, 34, 20, 0.06), 0 4px 12px -6px rgba(40, 34, 20, 0.10);
    --shadow-md: 0 2px 6px rgba(40, 34, 20, 0.07), 0 12px 28px -10px rgba(40, 34, 20, 0.13);
    --shadow-lg: 0 4px 12px rgba(40, 34, 20, 0.08), 0 24px 48px -16px rgba(40, 34, 20, 0.18);

    --hover-overlay-dark: rgba(255, 255, 255, 0.1);
    --hover-overlay-dark-strong: rgba(255, 255, 255, 0.2);

    /* Semantic accents — refined off the dated 2013 "Flat UI" palette, hues preserved */
    --accent-danger: #cf4436;
    --accent-danger-dark: #b23a2f;
    --accent-danger-text: #b0331f;
    --accent-danger-text-strong: #86200f;
    --accent-danger-soft-border: #eab3ab;
    --accent-danger-soft-bg: #fdf5f3;
    --accent-danger-soft-hover-bg: #fae9e5;

    --accent-warning: #c2621f;
    --accent-delete: #e5461f;
    --accent-notification: #e0483a;
    --accent-notification-soft: #e77b6f;

    --accent-status-done: #1f8a70;
    --accent-status-partial: #d3a12c;
    --accent-status-skipped: #b23a2f;

    --badge-readonly-bg: #6b6f76;
    --badge-editable-bg: #2f8f57;
    --badge-public-bg: #2f6fb0;
    --status-chip-bg: #f1efe8;

    /* "Today" signature marker — a fixed warm accent that reads as
       "now" on every theme/scheme, independent of the user accent. */
    --today-accent: #c2892f;
    --today-accent-contrast: #ffffff;

    /* ---------------------------------------------------------------
       Design-system scaffolding (canonical scales).
       Additive — safe to reference from any component going forward.
       Type system: ONE serif (Playfair Display) + ONE sans (Montserrat).
       Libre Baskerville and Inter have been removed.
       --------------------------------------------------------------- */
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    /* Modular type scale (1.200 minor third, 16px base) */
    --fs-xs: 0.694rem;
    --fs-sm: 0.833rem;
    --fs-base: 1rem;
    --fs-md: 1.2rem;
    --fs-lg: 1.44rem;
    --fs-xl: 1.728rem;
    --fs-2xl: 2.074rem;
    --fs-3xl: 2.488rem;
    --lh-tight: 1.15;
    --lh-normal: 1.6;

    /* Radius scale */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* ---------------------------------------------------------------
       Modal system ("Editorial Sheet") — shared surface tokens so every
       dialog reads like the warm-paper timeline behind it, not a raw
       web dialog. Tune here; all modals inherit.
       --------------------------------------------------------------- */
    /* Warm ink scrim + frosted blur (was flat pure-black overlays) */
    --modal-scrim: rgba(26, 22, 14, 0.46);
    --modal-blur: 9px;
    --modal-radius: var(--radius-lg);
    /* Layered warm elevation for the sheet itself */
    --modal-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 2px 8px rgba(40, 34, 20, 0.10),
        0 28px 60px -18px rgba(40, 34, 20, 0.34);
    /* Glass depth painted over any (JS-set, often neon) header fill:
       top sheen + faint printed-ink foot — accent-independent. */
    --modal-header-sheen: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.04) 38%,
        rgba(0, 0, 0, 0.02) 68%,
        rgba(0, 0, 0, 0.14) 100%);
    --modal-header-foot: rgba(0, 0, 0, 0.16);
    --modal-field-bg: var(--surface-day-field);
    --modal-field-border: var(--border-input-light);
    --modal-section-bg: color-mix(in srgb, var(--primary-color) 4%, var(--app-background));
    --modal-section-border: var(--border-subtle);
    --modal-label: var(--text-muted);
}

body.theme-day {
    --app-background: var(--secondary-color);
    --app-text-color: #131313;
    --timeline-event-stroke: var(--secondary-color);
    --category-chip-border: var(--secondary-color);
    --list-group-surface: var(--surface-day-field);

    --ctx-menu-bg: #ffffff;
    --ctx-menu-text: #1f2937;
    --ctx-menu-text-muted: rgba(0, 0, 0, 0.35);
    --ctx-menu-border: rgba(0, 0, 0, 0.42);
    --ctx-menu-divider: rgba(0, 0, 0, 0.06);
    --ctx-menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.07);
    --ctx-menu-hover-bg: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --ctx-menu-icon: color-mix(in srgb, var(--primary-color) 75%, #333);
    --ctx-menu-disabled-hover-bg: transparent;
    --ctx-menu-disabled-hover-text: rgba(0, 0, 0, 0.35);
    --ctx-menu-separator-line: rgba(0, 0, 0, 0.08);
}

body.theme-white {
    --app-background: #ffffff;
    --app-text-color: #111111;
    --timeline-event-stroke: #ffffff;
    --category-chip-border: var(--secondary-color);
    --list-group-surface: var(--surface-day-field);

    --ctx-menu-bg: #ffffff;
    --ctx-menu-text: #1f2937;
    --ctx-menu-text-muted: rgba(0, 0, 0, 0.35);
    --ctx-menu-border: rgba(0, 0, 0, 0.42);
    --ctx-menu-divider: rgba(0, 0, 0, 0.06);
    --ctx-menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.07);
    --ctx-menu-hover-bg: color-mix(in srgb, var(--primary-color) 10%, transparent);
    --ctx-menu-icon: color-mix(in srgb, var(--primary-color) 75%, #333);
    --ctx-menu-disabled-hover-bg: transparent;
    --ctx-menu-disabled-hover-text: rgba(0, 0, 0, 0.35);
    --ctx-menu-separator-line: rgba(0, 0, 0, 0.08);
}

body.theme-night-1 {
    --app-background: #16181a;
    --app-text-color: #f3f3f3;
    --timeline-event-stroke: #2a2a2a;
    --category-chip-border: #000;
    --list-group-surface: var(--surface-night-field);

    /* Chrome frame (navbar tray, side controller, bottom axis band). The
       editorial redesign's warm ink is a LIGHT-theme choice; in dark mode it
       reads as mud on the cool canvas. Use a neutral graphite tray, lifted
       above the canvas with a cool hairline edge + deep shadow, and neutral
       (not warm) label ink. Keeps dark mode clean/modern, not brown. */
    --chrome-ink: #23262b;
    --chrome-ink-edge: rgba(255, 255, 255, 0.10);
    --chrome-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.65);
    --chrome-on-ink: #eceef1;
    --chrome-on-ink-dim: rgba(236, 238, 241, 0.60);

    --modal-scrim: rgba(0, 0, 0, 0.6);
    --modal-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 30px 64px -18px rgba(0, 0, 0, 0.7);
    --modal-field-bg: #232323;
    --modal-field-border: #3a3a3a;
    --modal-section-bg: color-mix(in srgb, var(--primary-color) 10%, #202020);
    --modal-section-border: rgba(255, 255, 255, 0.08);
    --modal-label: rgba(243, 243, 243, 0.6);

    --ctx-menu-bg: #1e1e1e;
    --ctx-menu-text: rgba(255, 255, 255, 0.82);
    --ctx-menu-text-muted: rgba(255, 255, 255, 0.28);
    --ctx-menu-border: rgba(255, 255, 255, 0.32);
    --ctx-menu-divider: rgba(255, 255, 255, 0.07);
    --ctx-menu-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
    --ctx-menu-hover-bg: color-mix(in srgb, var(--primary-color) 16%, transparent);
    --ctx-menu-icon: color-mix(in srgb, var(--primary-color) 60%, rgba(255, 255, 255, 0.5));
    --ctx-menu-disabled-hover-bg: transparent;
    --ctx-menu-disabled-hover-text: rgba(255, 255, 255, 0.28);
    --ctx-menu-separator-line: rgba(255, 255, 255, 0.07);
}

body.theme-night-2 {
    --app-background: #050505;
    --app-text-color: #f6f6f6;
    --timeline-event-stroke: #050505;
    --category-chip-border: #000;
    --list-group-surface: var(--surface-night-field);

    /* Neutral graphite chrome tray lifted over the near-black canvas (night-1). */
    --chrome-ink: #191b1e;
    --chrome-ink-edge: rgba(255, 255, 255, 0.09);
    --chrome-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.8);
    --chrome-on-ink: #eceef1;
    --chrome-on-ink-dim: rgba(236, 238, 241, 0.58);

    --modal-scrim: rgba(0, 0, 0, 0.66);
    --modal-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 30px 64px -18px rgba(0, 0, 0, 0.8);
    --modal-field-bg: #161616;
    --modal-field-border: #363636;
    --modal-section-bg: color-mix(in srgb, var(--primary-color) 12%, #121212);
    --modal-section-border: rgba(255, 255, 255, 0.07);
    --modal-label: rgba(246, 246, 246, 0.58);

    --ctx-menu-bg: #111111;
    --ctx-menu-text: rgba(255, 255, 255, 0.82);
    --ctx-menu-text-muted: rgba(255, 255, 255, 0.28);
    --ctx-menu-border: rgba(255, 255, 255, 0.32);
    --ctx-menu-divider: rgba(255, 255, 255, 0.07);
    --ctx-menu-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
    --ctx-menu-hover-bg: color-mix(in srgb, var(--primary-color) 16%, transparent);
    --ctx-menu-icon: color-mix(in srgb, var(--primary-color) 60%, rgba(255, 255, 255, 0.5));
    --ctx-menu-disabled-hover-bg: transparent;
    --ctx-menu-disabled-hover-text: rgba(255, 255, 255, 0.28);
    --ctx-menu-separator-line: rgba(255, 255, 255, 0.07);
}

/* === css/style_base.css === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--app-background);
    color: var(--app-text-color);
    transition: background-color 0.25s ease, color 0.25s ease;
    --scrollbar-track-color: color-mix(in srgb, var(--app-background, #000) 75%, transparent);
    --scrollbar-thumb-color: color-mix(in srgb, var(--app-text-color, #fff) 65%, transparent);
}

/* White/Day mode: editable LifeOS modal inputs get dark border */
body.theme-white .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]),
body.theme-white .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]),
body.theme-white .lifeos-modal .lifeos-form-group textarea:not([disabled]):not([readonly]),
body.theme-white .lifeos-modal .cat-select-trigger,
body.theme-white .lifeos-modal .cat-select-dropdown,
body.theme-white .lifeos-links-input:not([disabled]):not([readonly]),
body.theme-white .lifeos-modal .lifeos-dropdown-trigger,
body.theme-white .lifeos-modal .lifeos-dropdown-menu,
body.theme-day .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]),
body.theme-day .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]),
body.theme-day .lifeos-modal .lifeos-form-group textarea:not([disabled]):not([readonly]),
body.theme-day .lifeos-modal .cat-select-trigger,
body.theme-day .lifeos-modal .cat-select-dropdown,
body.theme-day .lifeos-links-input:not([disabled]):not([readonly]),
body.theme-day .lifeos-modal .lifeos-dropdown-trigger,
body.theme-day .lifeos-modal .lifeos-dropdown-menu {
    /* border: 1px solid var(--border-soft) !important; */
}

/* body.theme-white .lifeos-readonly .lifeos-form-group input,
body.theme-white .lifeos-readonly .lifeos-form-group select,
body.theme-white .lifeos-readonly .lifeos-form-group textarea,
body.theme-white .lifeos-readonly .lifeos-links-input,
body.theme-day .lifeos-readonly .lifeos-form-group input,
body.theme-day .lifeos-readonly .lifeos-form-group select,
body.theme-day .lifeos-readonly .lifeos-form-group textarea,
body.theme-day .lifeos-readonly .lifeos-links-input {
    border: 1px solid var(--border-soft) !important;
} */

body.theme-white .lifeos-modal .lifeos-dropdown-trigger:hover,
body.theme-day .lifeos-modal .lifeos-dropdown-trigger:hover {
    background: var(--surface-light-hover) !important;
    color: var(--surface-light-border) !important;
    border-color: var(--surface-light-border) !important;
}

body.theme-white .lifeos-modal .lifeos-dropdown-trigger:hover .lifeos-dropdown-value,
body.theme-white .lifeos-modal .lifeos-dropdown-trigger:hover i,
body.theme-day .lifeos-modal .lifeos-dropdown-trigger:hover .lifeos-dropdown-value,
body.theme-day .lifeos-modal .lifeos-dropdown-trigger:hover i {
    color: var(--surface-light-border) !important;
}

body.theme-white .lifeos-modal.edit-mode .lifeos-form-group input:not(:disabled):not([readonly]),
body.theme-white .lifeos-modal.edit-mode .lifeos-form-group select:not(:disabled):not([readonly]),
body.theme-white .lifeos-modal.edit-mode .lifeos-form-group textarea:not(:disabled):not([readonly]),
body.theme-white .lifeos-modal.edit-mode .cat-select-trigger:not(.cat-select-disabled),
body.theme-white .lifeos-modal.edit-mode .lifeos-links-input:not(:disabled):not([readonly]),
body.theme-white .lifeos-modal.edit-mode .lifeos-datetime-group input:not(:disabled):not([readonly]),
body.theme-white .lifeos-modal.edit-mode .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .lifeos-form-group input:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .lifeos-form-group select:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .lifeos-form-group textarea:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .cat-select-trigger:not(.cat-select-disabled),
body.theme-day .lifeos-modal.edit-mode .lifeos-links-input:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .lifeos-datetime-group input:not(:disabled):not([readonly]),
body.theme-day .lifeos-modal.edit-mode .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]) {
    border-color: var(--border-soft) !important;
    box-shadow: none !important;
}

body.theme-white .lifeos-datetime-btn,
body.theme-day .lifeos-datetime-btn {
    color: color-mix(in srgb, var(--primary-color) 82%, black 8%);
}

body.theme-night-1 .lifeos-datetime-btn,
body.theme-night-2 .lifeos-datetime-btn {
    color: var(--primary-color);
}

body.theme-night-1 .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]),
body.theme-night-1 .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]),
body.theme-night-1 .lifeos-modal .lifeos-form-group textarea:not([disabled]):not([readonly]),
body.theme-night-1 .lifeos-modal .cat-select-trigger,
body.theme-night-1 .lifeos-modal .cat-select-dropdown,
body.theme-night-1 .lifeos-links-input:not([disabled]):not([readonly]),
body.theme-night-1 .lifeos-modal .lifeos-dropdown-trigger,
body.theme-night-1 .lifeos-modal .lifeos-dropdown-menu,
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-form-group input:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-form-group select:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-form-group textarea:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .cat-select-trigger:not(.cat-select-disabled),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-links-input:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-datetime-group input:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]),
body.theme-night-1 .lifeos-modal.edit-mode .lifeos-datetime-btn:not(:disabled) {
    border-color: var(--surface-night-hover-border) !important;
    box-shadow: none !important;
}

/* body.theme-night-1 .lifeos-readonly .lifeos-form-group input,
body.theme-night-1 .lifeos-readonly .lifeos-form-group select,
body.theme-night-1 .lifeos-readonly .lifeos-form-group textarea,
body.theme-night-1 .lifeos-readonly .lifeos-links-input {
    border: 1px solid var(--surface-night-hover-border) !important;
} */

body.theme-night-2 .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]),
body.theme-night-2 .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]),
body.theme-night-2 .lifeos-modal .lifeos-form-group textarea:not([disabled]):not([readonly]),
body.theme-night-2 .lifeos-modal .cat-select-trigger,
body.theme-night-2 .lifeos-modal .cat-select-dropdown,
body.theme-night-2 .lifeos-links-input:not([disabled]):not([readonly]),
body.theme-night-2 .lifeos-modal .lifeos-dropdown-trigger,
body.theme-night-2 .lifeos-modal .lifeos-dropdown-menu,
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-form-group input:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-form-group select:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-form-group textarea:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .cat-select-trigger:not(.cat-select-disabled),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-links-input:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-datetime-group input:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]),
body.theme-night-2 .lifeos-modal.edit-mode .lifeos-datetime-btn:not(:disabled) {
    border-color: var(--surface-night-alt-hover-border) !important;
    box-shadow: none !important;
}

body.theme-night-2 .lifeos-readonly .lifeos-form-group input,
body.theme-night-2 .lifeos-readonly .lifeos-form-group select,
body.theme-night-2 .lifeos-readonly .lifeos-form-group textarea,
body.theme-night-2 .lifeos-readonly .lifeos-links-input {
    border: 1px solid var(--surface-night-alt-hover-border) !important;
}

/* Dark mode: category trigger has no visible border in view/read-only mode */
body.theme-night-1 .lifeos-readonly .cat-select-trigger,
body.theme-night-2 .lifeos-readonly .cat-select-trigger {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Focus-visible: ne jelenjen meg narancs outline/keret a LifeOS modal mezőkön */
.lifeos-modal .lifeos-form-group input:focus-visible,
.lifeos-modal .lifeos-form-group select:focus-visible,
.lifeos-modal .lifeos-form-group textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body.theme-white .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]):focus-visible,
body.theme-white .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]):focus-visible body.theme-white .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]):focus-visible,
body.theme-white .lifeos-links-input:not([disabled]):not([readonly]):focus-visible,
body.theme-day .lifeos-modal .lifeos-form-group input:not([disabled]):not([readonly]):focus-visible,
body.theme-day .lifeos-modal .lifeos-form-group select:not([disabled]):not([readonly]):focus-visible,
body.theme-day .lifeos-modal .lifeos-form-group textarea:not([disabled]):not([readonly]):focus-visible,
body.theme-day .lifeos-links-input:not([disabled]):not([readonly]):focus-visible {
    border-width: 2px !important;
}

body.theme-night-1 .lifeos-modal .lifeos-form-group input,
body.theme-night-1 .lifeos-modal .lifeos-form-group select,
body.theme-night-1 .lifeos-modal .lifeos-form-group textarea,
body.theme-night-2 .lifeos-modal .lifeos-form-group input,
body.theme-night-2 .lifeos-modal .lifeos-form-group select,
body.theme-night-2 .lifeos-modal .lifeos-form-group textarea {
    outline: none !important;
    box-shadow: none !important;
}

body.theme-night-1 .lifeos-modal .lifeos-form-group input:focus-visible,
body.theme-night-1 .lifeos-modal .lifeos-form-group select:focus-visible,
body.theme-night-1 .lifeos-modal .lifeos-form-group textarea:focus-visible,
body.theme-night-1 .lifeos-links-input:focus-visible,
body.theme-night-2 .lifeos-modal .lifeos-form-group input:focus-visible,
body.theme-night-2 .lifeos-modal .lifeos-form-group select:focus-visible,
body.theme-night-2 .lifeos-modal .lifeos-form-group textarea:focus-visible,
body.theme-night-2 .lifeos-links-input:focus-visible {
    border-width: 2px !important;
}

.lifeos-link-item a {
    font-size: 14px;
}

body.theme-day .lifeos-link-item a,
body.theme-white .lifeos-link-item a {
    color: var(--app-text-color) !important;
}

body.theme-white .lifeos-modal .lifeos-form-group input,
body.theme-white .lifeos-modal .lifeos-form-group select,
body.theme-white .lifeos-modal .lifeos-form-group textarea,
body.theme-white .lifeos-modal .cat-select-trigger,
body.theme-white .lifeos-modal .cat-select-dropdown,
body.theme-white #timeline-modal .lifeos-form-group input,
body.theme-white #timeline-modal .lifeos-form-group select,
body.theme-white #timeline-modal .lifeos-form-group textarea,
body.theme-white #sources-overview-modal .task-search-input,
body.theme-white #categories-overview-modal .task-search-input,
body.theme-white #lifeos-links-list,
body.theme-white .lifeos-resource-attach-readonly-list,
body.theme-white .lifeos-links-input,
body.theme-white .lifeos-modal .project-entities-section {
    background: var(--secondary-color);
}

body.theme-day .lifeos-modal .lifeos-form-group input,
body.theme-day .lifeos-modal .lifeos-form-group select,
body.theme-day .lifeos-modal .lifeos-form-group textarea,
body.theme-day .lifeos-modal .cat-select-trigger,
body.theme-day .lifeos-modal .cat-select-dropdown,
body.theme-day #timeline-modal .lifeos-form-group input,
body.theme-day #timeline-modal .lifeos-form-group select,
body.theme-day #timeline-modal .lifeos-form-group textarea,
body.theme-day #sources-overview-modal .task-search-input,
body.theme-day #categories-overview-modal .task-search-input,
body.theme-day #lifeos-links-list,
body.theme-day .lifeos-resource-attach-readonly-list,
body.theme-day .lifeos-links-input,
body.theme-day .lifeos-modal .project-entities-section,
body.theme-day .lifeos-calendar-cell,
body.theme-day .lifeos-calendar-cell.today {
    background: var(--surface-day-field);
}

body.theme-night-1 .lifeos-modal .lifeos-form-group input,
body.theme-night-1 .lifeos-modal .lifeos-form-group select,
body.theme-night-1 .lifeos-modal .lifeos-form-group textarea,
body.theme-night-1 .lifeos-modal .cat-select-trigger,
body.theme-night-1 .lifeos-modal .cat-select-dropdown,
body.theme-night-1 #timeline-modal .lifeos-form-group input,
body.theme-night-1 #timeline-modal .lifeos-form-group select,
body.theme-night-1 #timeline-modal .lifeos-form-group textarea,
body.theme-night-1 #sources-overview-modal .task-search-input,
body.theme-night-1 #categories-overview-modal .task-search-input,
body.theme-night-1 #lifeos-links-list,
body.theme-night-1 .lifeos-resource-attach-readonly-list,
body.theme-night-1 .lifeos-links-input,
body.theme-night-1 .lifeos-modal .lifeos-sources-section,
body.theme-night-1 .lifeos-modal .project-entities-section,
body.theme-night-1 .event-tasks-section,
body.theme-night-1 .lifeos-modal .lifeos-dropdown-trigger,
body.theme-night-1 .lifeos-modal .lifeos-dropdown-menu,
body.theme-night-1 .lifeos-calendar-cell,
body.theme-night-1 .lifeos-calendar-cell.today {
    background: var(--surface-night-field);
}

body.theme-night-1 .lifeos-modal .lifeos-dropdown-trigger:hover {
    background: var(--surface-night-hover) !important;
    border-color: var(--surface-night-hover-border) !important;
}

body.theme-night-1 .lifeos-modal.lifeos-type-resource .lifeos-sources-section {
    background: transparent;
}

body.theme-night-2 .lifeos-modal .lifeos-form-group input,
body.theme-night-2 .lifeos-modal .lifeos-form-group select,
body.theme-night-2 .lifeos-modal .lifeos-form-group textarea,
body.theme-night-2 .lifeos-modal .cat-select-trigger,
body.theme-night-2 .lifeos-modal .cat-select-dropdown,
body.theme-night-2 #timeline-modal .lifeos-form-group input,
body.theme-night-2 #timeline-modal .lifeos-form-group select,
body.theme-night-2 #timeline-modal .lifeos-form-group textarea,
body.theme-night-2 #sources-overview-modal .task-search-input,
body.theme-night-2 #categories-overview-modal .task-search-input,
body.theme-night-2 #lifeos-links-list,
body.theme-night-2 .lifeos-resource-attach-readonly-list,
body.theme-night-2 .lifeos-links-input,
body.theme-night-2 .lifeos-modal .lifeos-sources-section,
body.theme-night-2 .lifeos-modal .project-entities-section,
body.theme-night-2 .event-tasks-section,
body.theme-night-2 .lifeos-modal .lifeos-dropdown-trigger,
body.theme-night-2 .lifeos-modal .lifeos-dropdown-menu {
    background: var(--surface-night-alt-field);
}

body.theme-night-2 .lifeos-modal .lifeos-dropdown-trigger:hover {
    background: var(--surface-night-alt-hover) !important;
    border-color: var(--surface-night-alt-hover-border) !important;
}

body.theme-night-2 .lifeos-modal.lifeos-type-resource .lifeos-sources-section {
    background: transparent;
}

/* [ÚJ] Globális görgetés tiltása és a scrollbar eltüntetése */
html,
body {
    overflow: hidden !important;
    /* [ÚJ] se vízszintes, se függőleges görgetés */
    height: 100%;
    /* [ÚJ] a viewporthoz rögzítjük a magasságot */
    margin: 0;
    /* [ÚJ] biztos, ami biztos */
    overscroll-behavior: none;
    /* [ÚJ] mobil “gumis” scroll tiltása */
}

/* [ÚJ] (védőháló) ha valami mégis scrollozható, ne látszódjon rajta a sáv */
html,
body {
    -ms-overflow-style: none;
    /* [ÚJ] IE/Edge régi motor */
    scrollbar-width: none;
    /* [ÚJ] Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    /* [ÚJ] WebKit/Chromium */
    height: 0;
}

.margin-bottom-20 {

/* === css/style_comments.css === */
    margin-bottom: 20px !important;
}

.timeline-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* like bar */
.timeline-comment-likebar {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--event-modal-contrast, var(--secondary-color));
}

.timeline-comment-likebtn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: var(--event-modal-contrast, var(--secondary-color));
    margin-right: 0;
}

.timeline-comment-likebtn:hover {
    background: transparent;
    border: none;
    color: inherit;
    transform: scale(1.05);
}

.timeline-comment-likebtn:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    outline-offset: 4px;
}

.timeline-comment-likecount {
    font-size: 12px;
    opacity: 0.9;
    margin-left: 0;
    line-height: 1;
    display: inline-block;
    color: color-mix(in srgb, var(--event-modal-contrast, var(--secondary-color)) 75%, transparent);
}

.timeline-comment-replybtn {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
    appearance: none;
    display: inline-flex;
    align-items: center;
    color: var(--event-modal-contrast, var(--secondary-color));
    font-size: 12px;
    cursor: pointer;
    opacity: 0.9;
    font-family: "Montserrat", sans-serif;
}

.timeline-comment-replybtn:hover {
    background: transparent;
    border: none;
    color: inherit;
    text-decoration: underline;
}

.timeline-comment-replybtn:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    outline-offset: 4px;
}

.timeline-comment-replybox {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-comment-replybox textarea {
    width: calc(100% - 10px);
    min-height: 48px;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--event-modal-contrast, var(--secondary-color)) 35%, transparent);
    background: transparent;
    color: var(--event-modal-contrast, var(--secondary-color));
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
}

.timeline-comment-replybox textarea::placeholder {
    color: var(--modal-buttons-contrast, var(--secondary-color));
}

.timeline-comment-replybox textarea:focus {
    outline: none !important;
    /* border-color: transparent !important; vizuálisan keret nélkül, elcsúszás nélkül */
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none !important;
}

.timeline-comment-replysend {
    margin: 0 auto;
    background-color: transparent;
    color: var(--secondary-color);
    font-size: 14px;
    cursor: pointer;
}

.timeline-comment-replysend:hover {
    border: 1px solid var(--secondary-color);
}

.timeline-comment-replies {
    margin-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 12px;
    margin-top: 6px;
}

.hidden {
    visibility: hidden;
}

.display-none {
    display: none !important;
}

.block {
    display: block;
}

.inline {
    display: inline-block;
}

/* === css/style_tags.css === */
/* Modern tag chips (Event modal + LifeOS modal) */
.tag-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tag-editor input {
    flex: 1 1 120px;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
}

.tag-editor input::placeholder {
    color: color-mix(in srgb, currentColor 55%, transparent);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 12%, transparent);
    white-space: nowrap;
}

.tag-chip-text {
    font-size: 12px;
    line-height: 1.4;
}

.tag-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.85;
}

.tag-chip-remove:hover {
    opacity: 1;
}

.tag-editor[aria-disabled="true"] input {
    display: none;
}

.tag-editor[aria-disabled="true"] .tag-chip-remove {
    display: none;
}

/* LifeOS event tags: searchable dropdown style */
#lifeos-event-tags-editor {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 50%;
}

#lifeos-event-tags {
    height: 38px;
    min-height: 38px;
    width: 100%;
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

#lifeos-event-tags:focus {
    outline: none;
    border-color: var(--primary-color);
}

#lifeos-event-tags-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--app-background);
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#lifeos-event-tags-editor.dropdown-open #lifeos-event-tags-dropdown {
    display: block;
}

#lifeos-event-tags-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

#lifeos-event-tags-options li {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-color);
}

#lifeos-event-tags-options li:hover,
#lifeos-event-tags-options li.highlighted {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

#lifeos-event-tags-options li.selected {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

#lifeos-event-tags-options li.add-new-tag {
    font-style: italic;
    color: var(--accent-color, var(--primary-color));
    border-top: 1px solid var(--secondary-color);
}

#lifeos-event-tags-options li.add-new-tag::before {
    content: "+ ";
}

#lifeos-event-tags-editor .tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

/* LifeOS task tags: searchable dropdown style */
#lifeos-task-tags-editor {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 50%;
}

#lifeos-task-tags {
    height: 38px;
    min-height: 38px;
    width: 100%;
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

#lifeos-task-tags:focus {
    outline: none;
    border-color: var(--primary-color);
}

#lifeos-task-tags-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--app-background);
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#lifeos-task-tags-editor.dropdown-open #lifeos-task-tags-dropdown {
    display: block;
}

#lifeos-task-tags-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

#lifeos-task-tags-options li {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-color);
}

#lifeos-task-tags-options li:hover,
#lifeos-task-tags-options li.highlighted {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

#lifeos-task-tags-options li.selected {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

#lifeos-task-tags-options li.add-new-tag {
    font-style: italic;
    color: var(--accent-color, var(--primary-color));
    border-top: 1px solid var(--secondary-color);
}

#lifeos-task-tags-options li.add-new-tag::before {
    content: "+ ";
}

#lifeos-task-tags-editor .tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

/* LifeOS goal tags: searchable dropdown style */
#lifeos-goal-tags-editor {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 50%;
}

#lifeos-goal-tags {
    height: 38px;
    min-height: 38px;
    width: 100%;
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

#lifeos-goal-tags:focus {
    outline: none;
    border-color: var(--primary-color);
}

#lifeos-goal-tags-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--app-background);
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#lifeos-goal-tags-editor.dropdown-open #lifeos-goal-tags-dropdown {
    display: block;
}

#lifeos-goal-tags-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

#lifeos-goal-tags-options li {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-color);
}

#lifeos-goal-tags-options li:hover,
#lifeos-goal-tags-options li.highlighted {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

#lifeos-goal-tags-options li.selected {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

#lifeos-goal-tags-options li.add-new-tag {
    font-style: italic;
    color: var(--accent-color, var(--primary-color));
    border-top: 1px solid var(--secondary-color);
}

#lifeos-goal-tags-options li.add-new-tag::before {
    content: "+ ";
}

#lifeos-goal-tags-editor .tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

/* LifeOS journal tags: searchable dropdown style */
#lifeos-journal-tags-editor {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 50%;
}

#lifeos-journal-tags {
    height: 38px;
    min-height: 38px;
    width: 100%;
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}

#lifeos-journal-tags:focus {
    outline: none;
    border-color: var(--primary-color);
}

#lifeos-journal-tags-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--app-background);
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#lifeos-journal-tags-editor.dropdown-open #lifeos-journal-tags-dropdown {
    display: block;
}

#lifeos-journal-tags-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

#lifeos-journal-tags-options li {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--primary-color);
}

#lifeos-journal-tags-options li:hover,
#lifeos-journal-tags-options li.highlighted {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

#lifeos-journal-tags-options li.selected {
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

#lifeos-journal-tags-options li.add-new-tag {
    font-style: italic;
    color: var(--accent-color, var(--primary-color));
    border-top: 1px solid var(--secondary-color);
}

#lifeos-journal-tags-options li.add-new-tag::before {
    content: "+ ";
}

#lifeos-journal-tags-editor .tag-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

/* ------ Tag editor: chips + add button + collapsible input ------ */
.lifeos-tag-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px dashed var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.12s;
    align-self: flex-start;
    margin-top: 10px;
}

.lifeos-tag-add-btn:hover {
    opacity: 1;
}

.tag-editor[aria-disabled="true"] .lifeos-tag-add-btn {
    display: none;
}

.lifeos-tag-input-wrap {
    position: relative;
    width: 100%;
    margin-top: 4px;
}

.lifeos-tag-input-wrap.lifeos-collapsed {
    display: none;
}

/* Chip list: remove top margin since it's now first child */
.lifeos-tags-searchable-dropdown .tag-chip-list {
    margin-top: 0 !important;
}

/* === css/style_branding.css === */

/* ------ Unified add button style (tasks, tags, project) ------ */
.lifeos-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px dashed var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.12s;
}

.lifeos-add-btn:hover {
    opacity: 1;
}

.center {
    text-align: center;
}

.pointer {
    cursor: pointer;
}

.red-text {
    color: var(--accent-delete);
    text-align: center;
    margin-top: 30px;
}

.margin-auto {
    margin: 0 auto;
}

.danger-color {
    color: var(--accent-delete);
}

select.hide-arrow-when-disabled:disabled {
    appearance: none;
    /* legtöbb böngésző */
    -webkit-appearance: none;
    /* Safari, Chrome */
    -moz-appearance: none;
    /* Firefox */
    background-image: none;
    /* biztos, ami biztos */
}

p.center {
    white-space: pre-line;
    /* Engedélyezi az új sorokat (\n) */
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1b1b1b;
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 32px 16px;
    text-align: center;
    z-index: 9999;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    letter-spacing: 2px;
    transition: opacity 0.6s ease;
    opacity: 1;
}

#loading-screen p {
    margin: 0;
}

#loading-screen .temporeum-wordmark {
    color: var(--secondary-color) !important;
}

#loading-screen #slogan {
    color: var(--secondary-color) !important;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loading-screen.hidden {
    display: none;
}

#loading-screen .playfair-display-italic {
    color: rgb(255, 170, 0);
    font-size: 200px;
    line-height: 0;
}

#loadingScreenFooter {
    position: fixed;
    bottom: 30px;
    font-size: 16px;
    color: var(--secondary-color) !important;
}

#loadingScreenFooter p:first-child {
    margin-bottom: 10px;
}

#temporeum,
#temporeum-logo,
#temporeum-logged-out {
    color: var(--primary-color);
    font-size: 30px;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

/* Small refined BETA mark tucked under the right side of the logo */
.temporeum-beta-badge {
    position: absolute;
    right: 0;
    bottom: -0.9em;
    display: inline-block;
    padding: 0.14em 0.42em 0.16em;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 0.26em;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.7;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 160ms ease;
}

#temporeum:hover .temporeum-beta-badge,
#temporeum-logo:hover .temporeum-beta-badge,
#temporeum-logged-out:hover .temporeum-beta-badge {
    opacity: 1;
}

body.logged-out #temporeum-logged-out,
body.logged-out #temporeum-logo {
    color: var(--secondary-color);
}

/* Temporeum wordmark SVG: inherit size + color from surrounding element */
.temporeum-wordmark {
    display: inline-block;
    height: 1em;
    /* 2711 / 449 ≈ 6.039 */
    width: 6.039em;
    vertical-align: -0.12em;
    color: var(--secondary-color);
    max-width: 90vw;
    height: auto;
}

#temporeum .temporeum-wordmark {
    color: inherit;
}

body.logged-out .temporeum-wordmark {
    color: var(--primary-color);
}

#loading-screen .temporeum-wordmark {
    color: var(--secondary-color) !important;
    display: block;
    width: min(80vw, 6.039em);
    height: auto;
}

#featureName {
    position: absolute;
    left: 33px;
    top: 65px;
}

#copyright {
    text-align: center;
}

#slogan {
    color: var(--secondary-color);
    font-size: clamp(14px, 3.2vw, 28px);
    margin-left: 0;
    margin-top: 8px;
}

#loading-screen #slogan {
    margin-top: 0;
}

/* Speciális: Night/Black mód + Black színséma esetén a logó (#temporeum) legyen szürkébb */
body.theme-night-1.scheme-black #temporeum,
body.theme-night-2.scheme-black #temporeum {
    color: rgb(84, 84, 84) !important;
}

/* Speciális: Night/Black mód + DarkSlateGray színséma esetén a logó (#temporeum) színe */
body.theme-night-1.scheme-darkslategray #temporeum,
body.theme-night-2.scheme-darkslategray #temporeum {
    color: rgb(59, 101, 101) !important;
}

/* === css/style_forms.css === */
/* "Today" signature marker — one warm accent across every theme so it
   always reads as "now", regardless of the user's timeline scheme. */
.today-line {
    stroke: var(--today-accent) !important;
    stroke-width: 1.6px !important;
    stroke-linecap: round;
}

.today-label {
    fill: var(--today-accent-contrast) !important;
    color: var(--today-accent-contrast) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.today-label-bg {
    fill: var(--today-accent) !important;
    opacity: 1 !important;
}

#login {
    position: absolute;
    top: 30px;
    right: 6px;
}

.fa-trash-alt:hover {
    color: var(--accent-delete);
}


.container {
    padding: 0;
}

.controls-left {
    position: absolute;
    top: 3px;
    left: 300px;
    margin-top: 25px;
}

.controls-right {
    position: absolute;
    top: 0;
    right: 0;
}

#avatar {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

button {
    padding: 6px 10px;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    background: var(--app-background);
    cursor: pointer;
    height: 38px;
    color: var(--primary-color);
    font-size: 16px;
}

button.primary {
    color: var(--app-background);
    background-color: var(--primary-color);
    border-color: var(--app-background);
}

button:hover {
    background-color: var(--primary-color);
    color: var(--app-background);
}

button.primary:hover {
    background-color: var(--app-background);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Tag chip remove button must not inherit global button sizing */
.tag-chip-remove,
.tag-chip-remove:hover {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    height: auto;
    min-height: 0;
    font-size: 12px;
    line-height: 1;
    color: inherit;
}

.input-group {
    position: relative;
    /* margin: 30px 0; */
    margin-bottom: 25px;
}

.input-group label {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--app-background);
    padding: 0 5px;
    pointer-events: none;
    transition: .5s;
}

.input-group input {
    width: calc(100% - 100px);
    height: 40px;
    font-size: 16px;
    color: var(--app-background);
    padding: 0 10px;
    background: transparent;
    border: none;
    border-bottom: 1.2px solid var(--app-background);
    outline: none;
}

.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label {
    top: 0;
    font-size: 12px;
}

.tooltip {
    position: absolute;
    width: auto;
    font: 12px sans-serif;
    padding: 10px 20px;
    background: var(--primary-color);
    border-radius: 8px;
    pointer-events: none;
    visibility: hidden;
    z-index: 1000 !important;
    color: var(--secondary-color);
    line-height: 1.5;
    -webkit-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.32);
    box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.32);
    opacity: 0;
    border: 2px solid var(--secondary-color);
    transition: opacity 0.5s ease;
}

.tooltip.task-tooltip {
    border-color: var(--app-background) !important;
}

/* Egységes tooltip szegély: igazodik az aktuális háttérszínhez (theme módok szerint) */
.tooltip-text {
    border: 2px solid var(--app-background) !important;
}

.form-icon {
    position: absolute;
    top: 8px;
    font-size: 26px;
}

/* Password requirements checklist */
.password-requirements {
    list-style: none;
    padding: 0 5px;
    margin: 4px 0 10px 0;
    font-size: 12px;
    line-height: 1.8;
    padding-left: 38px;
}

.password-requirements li {
    color: var(--text-color, #888);
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}

.password-requirements li .req-icon {
    font-size: 8px;
    margin-right: 6px;
    vertical-align: middle;
}

.password-requirements li.met {
    color: #4caf50;
    opacity: 1;
}

.password-requirements li.met .req-icon {
    font-size: 12px;
}

.fa-eye,
.fa-eye-slash {
    /* margin-left: 15px; */
}

#forgotPassword {
    cursor: pointer;
    /* margin-top: 15px; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#rememberMeBlock {
    margin-top: 40px;
}

#loginContainer b {
    cursor: pointer;
}

#signUp,
#loginNow {
    color: white;
}

#backToLogin,
#resetBackToLogin {
    margin-bottom: 30px;
}

#loginButton {
    display: block;
    margin: 0 auto;
}

#sendResetLink {
    display: block;
    margin: 30px auto !important;
}

#resetPasswordSubmitBtn {
    display: block;
    margin: 30px auto;
}

#registrationButton {
    display: block;
    margin: 0 auto;
    transition: opacity 0.2s;
}

#registrationButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#searchInput {
    margin-left: 10px;
}

.fa-search {
    cursor: pointer;
}

#searchLabel {
    left: 5px;
}

#searchList {
    padding-left: 25px;
}

#search-modal .input-group {
    margin-top: 30px;
}

#searchResultListDiv {
    max-height: 100%;
    overflow-y: auto;
    scrollbar-color: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45)) transparent;
}

#searchResultListDiv::-webkit-scrollbar {
    width: 8px;
}

#searchResultListDiv::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, rgba(0, 0, 0, 0.15));
}

#searchResultListDiv::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45));
    border-radius: 4px;
}

.search-result-element {
    cursor: pointer;
    padding-left: 10px;
}

#sortField,
#sortOrder {
    background-color: transparent;
    border: none;
    color: var(--app-background);
}

#sortOrder {
    margin-bottom: 30px;
}

.sort-options {
    margin-left: 10px;
}



.input-group select {
    width: calc(100% - 100px);
    height: 40px;
    font-size: 16px;
    color: var(--app-background);
    padding: 0 10px;
    background: transparent;
    border: none;
    /* border-bottom: 1.2px solid var(--secondary-color); */
    outline: none;
    margin-left: 55px;
}

.input-group select {
    cursor: pointer;
}

.input-group select:focus~label,
.input-group select:valid~label {
    top: 0;
    font-size: 12px;
}

.add-event-button button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.login-add-event button:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

#addEventIcons {
    margin: 40px 0;
}

#addEventIcons .fa-solid {
    margin-right: 30px;
    cursor: pointer;
}

#changeEventButton,
#addEventButton,
#changeTimelineButton,
#addTimelineButton {
    /* position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 30px; */
    background-color: transparent;
    color: var(--modal-buttons-contrast, var(--secondary-color));
}

#changeEventButton:hover,
#addEventButton:hover,
#changeTimelineButton:hover,
#addTimelineButton:hover {}

#addEventIcons i {
    padding: 10px;
    border-radius: 4px;
}

#addEventIcons i:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.add-category-button {
    text-align: center;
    margin-top: 30px;
}

.date-picker-container label {
    top: -5px;
}

.date-picker-container .input-group {
    margin-top: 50px;
}

.input-group textarea {
    width: calc(100% - 100px);
    font-size: 16px;
    color: var(--app-background);
    padding: 10px;
    background: transparent;
    border: none;
    border-bottom: 1.2px solid var(--secondary-color);
    outline: none;
    margin-left: 55px;
    resize: vertical;
}

.input-group textarea:focus~label,
.input-group textarea:valid~label {
    top: 0;
    font-size: 12px;
}

label[for="event-description"] {
    top: -10px !important;
    font-size: 16px !important;
}

label[for="lifeos-event-notes"] {
    margin-top: 20px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--text-muted);
    padding: 14px 16px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 22px;
    row-gap: 10px;
    max-width: 600px;
    margin: 0 auto;
    padding: 12px 22px;
    background: #f1f1ea;
    border: 1px solid var(--border-muted);
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.footer-container div {
    margin-right: 40px;
}

.footer-container div:last-child {
    margin-right: 0;
}

.footer-container span {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-container span:hover {
    color: var(--app-text-color);
    border-bottom-color: var(--app-text-color);
}

#copyright {
    flex-basis: 100%;
    margin: 0 0 4px;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* On narrow/stacked layouts the footer switches to position:static and sits at
   the end of the scrollable page. Give it breathing room so the card is
   separated from the login panel above and never clipped flush against the
   bottom of the document. */
@media (max-width: 991px) {
    footer {
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .footer-container {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .footer-container {
        column-gap: 16px;
        row-gap: 8px;
        padding: 10px 16px;
    }

    .footer-container span {
        font-size: 13px;
    }
}

/* Chrome, Edge, Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--primary-color) inset !important;
    /* háttérszín */
    -webkit-text-fill-color: var(--secondary-color) !important;
    /* szövegszín */
    font-family: inherit !important;
    font-size: inherit !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox */
input:-moz-autofill {
    box-shadow: 0 0 0px 1000px var(--primary-color) inset !important;
    /* háttérszín */
    -moz-text-fill-color: var(--secondary-color) !important;
    /* szövegszín */
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Login with google, apple, facebook */
#googleLogin,
#appleLogin,
#facebookLogin {
    display: initial;
}

/* LifeOS modal dátum/idő mezők: stabil méretezés, hogy az alja ne vágódjon le */
.lifeos-modal .lifeos-form-group input[type="date"],
.lifeos-modal .lifeos-form-group input[type="time"],
.lifeos-modal .lifeos-form-group input[type="datetime-local"] {
    box-sizing: border-box;
    padding: 10px 12px;
    line-height: 1.3;
    min-height: 44px;
    appearance: none;
    -webkit-appearance: none;
}

/* WebKit naptár ikon pozíció finomhangolás */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin: 0 2px 0 6px;
}

/* WebKit: belső szerkesztő rész padding/line-height fix, hogy ne legyen levágás */
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 2px 0;
    line-height: 1.2;
}

/* WebKit: spinner és clear gombok méret/igazítás, hogy ne torzítsák a magasságot */
input[type="time"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button {
    height: auto;
}

#googleLogin {
    margin-right: 30px;
}

#inbocList {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

#linkToShare {
    margin-top: 10px
}

input {
    padding: 10px !important;
}

#delete-cancel-btn,
#delete-confirm-btn,
#deleteNo,
#deleteYes,
#tag-exists-ok-btn,
#invalidateOK,
#notification-modal.notification-modal-danger #notification-modal-ok {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#delete-cancel-btn:hover,
#delete-confirm-btn:hover,
#deleteNo:hover,
#deleteYes:hover,
#tag-exists-ok-btn:hover,
#invalidateOK:hover,
#notification-modal.notification-modal-danger #notification-modal-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

#notification-modal-ok {
    display: block;
    margin: 20px auto;
}

#notification-modal-message {
    margin: 20px 0;
}

/* === css/all.min.css === */
/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-regular,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-brands:before,.fa-regular:before,.fa-solid:before,.fa:before,.fab:before,.far:before,.fas:before{content:var(--fa)}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30"}.fa-1{--fa:"\31"}.fa-2{--fa:"\32"}.fa-3{--fa:"\33"}.fa-4{--fa:"\34"}.fa-5{--fa:"\35"}.fa-6{--fa:"\36"}.fa-7{--fa:"\37"}.fa-8{--fa:"\38"}.fa-9{--fa:"\39"}.fa-fill-drip{--fa:"\f576"}.fa-arrows-to-circle{--fa:"\e4bd"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138"}.fa-at{--fa:"\40"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed"}.fa-text-height{--fa:"\f034"}.fa-user-times,.fa-user-xmark{--fa:"\f235"}.fa-stethoscope{--fa:"\f0f1"}.fa-comment-alt,.fa-message{--fa:"\f27a"}.fa-info{--fa:"\f129"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422"}.fa-explosion{--fa:"\e4e9"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-wave-square{--fa:"\f83e"}.fa-ring{--fa:"\f70b"}.fa-building-un{--fa:"\e4d9"}.fa-dice-three{--fa:"\f527"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073"}.fa-anchor-circle-check{--fa:"\e4aa"}.fa-building-circle-arrow-right{--fa:"\e4d1"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f"}.fa-arrows-up-to-line{--fa:"\e4c2"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056"}.fa-door-open{--fa:"\f52b"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-atom{--fa:"\f5d2"}.fa-soap{--fa:"\e06e"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539"}.fa-bridge-circle-check{--fa:"\e4c9"}.fa-pump-medical{--fa:"\e06a"}.fa-fingerprint{--fa:"\f577"}.fa-hand-point-right{--fa:"\f0a4"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689"}.fa-forward-step,.fa-step-forward{--fa:"\f051"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8"}.fa-flag-checkered{--fa:"\f11e"}.fa-football,.fa-football-ball{--fa:"\f44e"}.fa-school-circle-exclamation{--fa:"\e56c"}.fa-crop{--fa:"\f125"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103"}.fa-users-rectangle{--fa:"\e594"}.fa-people-roof{--fa:"\e537"}.fa-people-line{--fa:"\e534"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc"}.fa-diagram-predecessor{--fa:"\e477"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a"}.fa-male,.fa-person{--fa:"\f183"}.fa-laptop{--fa:"\f109"}.fa-file-csv{--fa:"\f6dd"}.fa-menorah{--fa:"\f676"}.fa-truck-plane{--fa:"\e58f"}.fa-record-vinyl{--fa:"\f8d9"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587"}.fa-bong{--fa:"\f55c"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b"}.fa-arrow-down-up-across-line{--fa:"\e4af"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5"}.fa-jar-wheat{--fa:"\e517"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674"}.fa-file-circle-exclamation{--fa:"\e4eb"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e"}.fa-pager{--fa:"\f815"}.fa-address-book,.fa-contact-book{--fa:"\f2b9"}.fa-strikethrough{--fa:"\f0cc"}.fa-k{--fa:"\4b"}.fa-landmark-flag{--fa:"\e51c"}.fa-pencil,.fa-pencil-alt{--fa:"\f303"}.fa-backward{--fa:"\f04a"}.fa-caret-right{--fa:"\f0da"}.fa-comments{--fa:"\f086"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea"}.fa-code-pull-request{--fa:"\e13c"}.fa-clipboard-list{--fa:"\f46d"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de"}.fa-user-check{--fa:"\f4fc"}.fa-vial-virus{--fa:"\e597"}.fa-sheet-plastic{--fa:"\e571"}.fa-blog{--fa:"\f781"}.fa-user-ninja{--fa:"\f504"}.fa-person-arrow-up-from-line{--fa:"\e539"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458"}.fa-toggle-off{--fa:"\f204"}.fa-archive,.fa-box-archive{--fa:"\f187"}.fa-person-drowning{--fa:"\e545"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a"}.fa-spray-can{--fa:"\f5bd"}.fa-truck-monster{--fa:"\f63b"}.fa-w{--fa:"\57"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c"}.fa-rainbow{--fa:"\f75b"}.fa-circle-notch{--fa:"\f1ce"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa"}.fa-paw{--fa:"\f1b0"}.fa-cloud{--fa:"\f0c2"}.fa-trowel-bricks{--fa:"\e58a"}.fa-face-flushed,.fa-flushed{--fa:"\f579"}.fa-hospital-user{--fa:"\f80d"}.fa-tent-arrow-left-right{--fa:"\e57f"}.fa-gavel,.fa-legal{--fa:"\f0e3"}.fa-binoculars{--fa:"\f1e5"}.fa-microphone-slash{--fa:"\f131"}.fa-box-tissue{--fa:"\e05b"}.fa-motorcycle{--fa:"\f21c"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068"}.fa-mars-and-venus-burst{--fa:"\e523"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152"}.fa-cut,.fa-scissors{--fa:"\f0c4"}.fa-sun-plant-wilt{--fa:"\e57a"}.fa-toilets-portable{--fa:"\e584"}.fa-hockey-puck{--fa:"\f453"}.fa-table{--fa:"\f0ce"}.fa-magnifying-glass-arrow-right{--fa:"\e521"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566"}.fa-users-slash{--fa:"\e073"}.fa-clover{--fa:"\e139"}.fa-mail-reply,.fa-reply{--fa:"\f3e5"}.fa-star-and-crescent{--fa:"\f699"}.fa-house-fire{--fa:"\e50c"}.fa-minus-square,.fa-square-minus{--fa:"\f146"}.fa-helicopter{--fa:"\f533"}.fa-compass{--fa:"\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150"}.fa-file-circle-question{--fa:"\e4ef"}.fa-laptop-code{--fa:"\f5fc"}.fa-swatchbook{--fa:"\f5c3"}.fa-prescription-bottle{--fa:"\f485"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-people-group{--fa:"\e533"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597"}.fa-film{--fa:"\f008"}.fa-ruler-horizontal{--fa:"\f547"}.fa-people-robbery{--fa:"\e536"}.fa-lightbulb{--fa:"\f0eb"}.fa-caret-left{--fa:"\f0d9"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a"}.fa-school-circle-xmark{--fa:"\e56d"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e"}.fa-cloud-showers-heavy{--fa:"\f740"}.fa-headphones-alt,.fa-headphones-simple{--fa:"\f58f"}.fa-sitemap{--fa:"\f0e8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9"}.fa-memory{--fa:"\f538"}.fa-road-spikes{--fa:"\e568"}.fa-fire-burner{--fa:"\e4f1"}.fa-flag{--fa:"\f024"}.fa-hanukiah{--fa:"\f6e6"}.fa-feather{--fa:"\f52d"}.fa-volume-down,.fa-volume-low{--fa:"\f027"}.fa-comment-slash{--fa:"\f4b3"}.fa-cloud-sun-rain{--fa:"\f743"}.fa-compress{--fa:"\f066"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd"}.fa-ankh{--fa:"\f644"}.fa-hands-holding-child{--fa:"\e4fa"}.fa-asterisk{--fa:"\2a"}.fa-check-square,.fa-square-check{--fa:"\f14a"}.fa-peseta-sign{--fa:"\e221"}.fa-header,.fa-heading{--fa:"\f1dc"}.fa-ghost{--fa:"\f6e2"}.fa-list,.fa-list-squares{--fa:"\f03a"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b"}.fa-cart-plus{--fa:"\f217"}.fa-gamepad{--fa:"\f11b"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-egg{--fa:"\f7fb"}.fa-house-medical-circle-xmark{--fa:"\e513"}.fa-campground{--fa:"\f6bb"}.fa-folder-plus{--fa:"\f65e"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc"}.fa-lock{--fa:"\f023"}.fa-gas-pump{--fa:"\f52f"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593"}.fa-map-location,.fa-map-marked{--fa:"\f59f"}.fa-house-flood-water{--fa:"\e50e"}.fa-tree{--fa:"\f1bb"}.fa-bridge-lock{--fa:"\e4cc"}.fa-sack-dollar{--fa:"\f81d"}.fa-edit,.fa-pen-to-square{--fa:"\f044"}.fa-car-side{--fa:"\f5e4"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0"}.fa-heart-circle-minus{--fa:"\e4ff"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252"}.fa-microscope{--fa:"\f610"}.fa-sink{--fa:"\e06d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881"}.fa-mitten{--fa:"\f7b5"}.fa-person-rays{--fa:"\e54d"}.fa-users{--fa:"\f0c0"}.fa-eye-slash{--fa:"\f070"}.fa-flask-vial{--fa:"\e4f3"}.fa-hand,.fa-hand-paper{--fa:"\f256"}.fa-om{--fa:"\f679"}.fa-worm{--fa:"\e599"}.fa-house-circle-xmark{--fa:"\e50b"}.fa-plug{--fa:"\f1e6"}.fa-chevron-up{--fa:"\f077"}.fa-hand-spock{--fa:"\f259"}.fa-stopwatch{--fa:"\f2f2"}.fa-face-kiss,.fa-kiss{--fa:"\f596"}.fa-bridge-circle-xmark{--fa:"\e4cb"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589"}.fa-chess-bishop{--fa:"\f43a"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-road-circle-check{--fa:"\e564"}.fa-dice-five{--fa:"\f523"}.fa-rss-square,.fa-square-rss{--fa:"\f143"}.fa-land-mine-on{--fa:"\e51b"}.fa-i-cursor{--fa:"\f246"}.fa-stamp{--fa:"\f5bf"}.fa-stairs{--fa:"\e289"}.fa-i{--fa:"\49"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2"}.fa-pills{--fa:"\f484"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581"}.fa-tooth{--fa:"\f5c9"}.fa-v{--fa:"\56"}.fa-bangladeshi-taka-sign{--fa:"\e2e6"}.fa-bicycle{--fa:"\f206"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579"}.fa-head-side-cough-slash{--fa:"\e062"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9"}.fa-wheat-awn-circle-exclamation{--fa:"\e598"}.fa-snowman{--fa:"\f7d0"}.fa-mortar-pestle{--fa:"\f5a7"}.fa-road-barrier{--fa:"\e562"}.fa-school{--fa:"\f549"}.fa-igloo{--fa:"\f7ae"}.fa-joint{--fa:"\f595"}.fa-angle-right{--fa:"\f105"}.fa-horse{--fa:"\f6f0"}.fa-q{--fa:"\51"}.fa-g{--fa:"\47"}.fa-notes-medical{--fa:"\f481"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9"}.fa-dong-sign{--fa:"\e169"}.fa-capsules{--fa:"\f46b"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a"}.fa-hand-point-up{--fa:"\f0a6"}.fa-money-bill{--fa:"\f0d6"}.fa-bookmark{--fa:"\f02e"}.fa-align-justify{--fa:"\f039"}.fa-umbrella-beach{--fa:"\f5ca"}.fa-helmet-un{--fa:"\e503"}.fa-bullseye{--fa:"\f140"}.fa-bacon{--fa:"\f7e5"}.fa-hand-point-down{--fa:"\f0a7"}.fa-arrow-up-from-bracket{--fa:"\e09a"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478"}.fa-radiation{--fa:"\f7b9"}.fa-chart-simple{--fa:"\e473"}.fa-mars-stroke{--fa:"\f229"}.fa-vial{--fa:"\f492"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca"}.fa-e{--fa:"\45"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305"}.fa-bridge-circle-exclamation{--fa:"\e4ca"}.fa-user{--fa:"\f007"}.fa-school-circle-check{--fa:"\e56b"}.fa-dumpster{--fa:"\f793"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6"}.fa-building-user{--fa:"\e4da"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191"}.fa-highlighter{--fa:"\f591"}.fa-key{--fa:"\f084"}.fa-bullhorn{--fa:"\f0a1"}.fa-globe{--fa:"\f0ac"}.fa-synagogue{--fa:"\f69b"}.fa-person-half-dress{--fa:"\e548"}.fa-road-bridge{--fa:"\e563"}.fa-location-arrow{--fa:"\f124"}.fa-c{--fa:"\43"}.fa-tablet-button{--fa:"\f10a"}.fa-building-lock{--fa:"\e4d6"}.fa-pizza-slice{--fa:"\f818"}.fa-money-bill-wave{--fa:"\f53a"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe"}.fa-house-flag{--fa:"\e50d"}.fa-person-circle-minus{--fa:"\e540"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-camera-rotate{--fa:"\e0d8"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0"}.fa-star{--fa:"\f005"}.fa-repeat{--fa:"\f363"}.fa-cross{--fa:"\f654"}.fa-box{--fa:"\f466"}.fa-venus-mars{--fa:"\f228"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e"}.fa-charging-station{--fa:"\f5e7"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f"}.fa-random,.fa-shuffle{--fa:"\f074"}.fa-person-running,.fa-running{--fa:"\f70c"}.fa-mobile-retro{--fa:"\e527"}.fa-grip-lines-vertical{--fa:"\f7a5"}.fa-spider{--fa:"\f717"}.fa-hands-bound{--fa:"\e4f9"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-plane-circle-exclamation{--fa:"\e556"}.fa-x-ray{--fa:"\f497"}.fa-spell-check{--fa:"\f891"}.fa-slash{--fa:"\f715"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070"}.fa-server{--fa:"\f233"}.fa-virus-covid-slash{--fa:"\e4a9"}.fa-shop-lock{--fa:"\e4a5"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251"}.fa-blender-phone{--fa:"\f6b6"}.fa-building-wheat{--fa:"\e4db"}.fa-person-breastfeeding{--fa:"\e53a"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-venus{--fa:"\f221"}.fa-passport{--fa:"\f5ab"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce"}.fa-temperature-high{--fa:"\f769"}.fa-microchip{--fa:"\f2db"}.fa-crown{--fa:"\f521"}.fa-weight-hanging{--fa:"\f5cd"}.fa-xmarks-lines{--fa:"\e59a"}.fa-file-prescription{--fa:"\f572"}.fa-weight,.fa-weight-scale{--fa:"\f496"}.fa-user-friends,.fa-user-group{--fa:"\f500"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e"}.fa-chess-knight{--fa:"\f441"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b"}.fa-wheelchair{--fa:"\f193"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa"}.fa-toggle-on{--fa:"\f205"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-l{--fa:"\4c"}.fa-fire{--fa:"\f06d"}.fa-bed-pulse,.fa-procedures{--fa:"\f487"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197"}.fa-face-laugh,.fa-laugh{--fa:"\f599"}.fa-folder-open{--fa:"\f07c"}.fa-heart-circle-plus{--fa:"\e500"}.fa-code-fork{--fa:"\e13b"}.fa-city{--fa:"\f64f"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9"}.fa-pepper-hot{--fa:"\f816"}.fa-unlock{--fa:"\f09c"}.fa-colon-sign{--fa:"\e140"}.fa-headset{--fa:"\f590"}.fa-store-slash{--fa:"\e071"}.fa-road-circle-xmark{--fa:"\e566"}.fa-user-minus{--fa:"\f503"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f"}.fa-clipboard{--fa:"\f328"}.fa-house-circle-exclamation{--fa:"\e50a"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb"}.fa-bath,.fa-bathtub{--fa:"\f2cd"}.fa-underline{--fa:"\f0cd"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff"}.fa-signature{--fa:"\f5b7"}.fa-stroopwafel{--fa:"\f551"}.fa-bold{--fa:"\f032"}.fa-anchor-lock{--fa:"\e4ad"}.fa-building-ngo{--fa:"\e4d7"}.fa-manat-sign{--fa:"\e1d5"}.fa-not-equal{--fa:"\f53e"}.fa-border-style,.fa-border-top-left{--fa:"\f853"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0"}.fa-jedi{--fa:"\f669"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681"}.fa-mug-hot{--fa:"\f7b6"}.fa-battery-car,.fa-car-battery{--fa:"\f5df"}.fa-gift{--fa:"\f06b"}.fa-dice-two{--fa:"\f528"}.fa-chess-queen{--fa:"\f445"}.fa-glasses{--fa:"\f530"}.fa-chess-board{--fa:"\f43c"}.fa-building-circle-check{--fa:"\e4d2"}.fa-person-chalkboard{--fa:"\e53d"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151"}.fa-cloud-showers-water{--fa:"\e4e4"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e"}.fa-less-than-equal{--fa:"\f537"}.fa-train{--fa:"\f238"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8"}.fa-crow{--fa:"\f520"}.fa-sailboat{--fa:"\e445"}.fa-window-restore{--fa:"\f2d2"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe"}.fa-torii-gate{--fa:"\f6a1"}.fa-frog{--fa:"\f52e"}.fa-bucket{--fa:"\e4cf"}.fa-image{--fa:"\f03e"}.fa-microphone{--fa:"\f130"}.fa-cow{--fa:"\f6c8"}.fa-caret-up{--fa:"\f0d8"}.fa-screwdriver{--fa:"\f54a"}.fa-folder-closed{--fa:"\e185"}.fa-house-tsunami{--fa:"\e515"}.fa-square-nfi{--fa:"\e576"}.fa-arrow-up-from-ground-water{--fa:"\e4b5"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b"}.fa-square-binary{--fa:"\e69b"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea"}.fa-columns,.fa-table-columns{--fa:"\f0db"}.fa-lemon{--fa:"\f094"}.fa-head-side-mask{--fa:"\e063"}.fa-handshake{--fa:"\f2b5"}.fa-gem{--fa:"\f3a5"}.fa-dolly,.fa-dolly-box{--fa:"\f472"}.fa-smoking{--fa:"\f48d"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c"}.fa-monument{--fa:"\f5a6"}.fa-snowplow{--fa:"\f7d2"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101"}.fa-cannabis{--fa:"\f55f"}.fa-circle-play,.fa-play-circle{--fa:"\f144"}.fa-tablets{--fa:"\f490"}.fa-ethernet{--fa:"\f796"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153"}.fa-chair{--fa:"\f6c0"}.fa-check-circle,.fa-circle-check{--fa:"\f058"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568"}.fa-plate-wheat{--fa:"\e55a"}.fa-icicles{--fa:"\f7ad"}.fa-person-shelter{--fa:"\e54f"}.fa-neuter{--fa:"\f22c"}.fa-id-badge{--fa:"\f2c1"}.fa-marker{--fa:"\f5a1"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a"}.fa-helicopter-symbol{--fa:"\e502"}.fa-universal-access{--fa:"\f29a"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139"}.fa-lari-sign{--fa:"\e1c8"}.fa-volcano{--fa:"\f770"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154"}.fa-viruses{--fa:"\e076"}.fa-square-person-confined{--fa:"\e577"}.fa-user-tie{--fa:"\f508"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175"}.fa-tent-arrow-down-to-line{--fa:"\e57e"}.fa-certificate{--fa:"\f0a3"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122"}.fa-suitcase{--fa:"\f0f2"}.fa-person-skating,.fa-skating{--fa:"\f7c5"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662"}.fa-camera-retro{--fa:"\f083"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c"}.fa-box-open{--fa:"\f49e"}.fa-scroll{--fa:"\f70e"}.fa-spa{--fa:"\f5bb"}.fa-location-pin-lock{--fa:"\e51f"}.fa-pause{--fa:"\f04c"}.fa-hill-avalanche{--fa:"\e507"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb"}.fa-bomb{--fa:"\f1e2"}.fa-registered{--fa:"\f25d"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516"}.fa-subscript{--fa:"\f12c"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb"}.fa-burst{--fa:"\e4dc"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066"}.fa-face-tired,.fa-tired{--fa:"\f5c8"}.fa-money-bills{--fa:"\e1f3"}.fa-smog{--fa:"\f75f"}.fa-crutch{--fa:"\f7f7"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-palette{--fa:"\f53f"}.fa-arrows-turn-right{--fa:"\e4c0"}.fa-vest{--fa:"\e085"}.fa-ferry{--fa:"\e4ea"}.fa-arrows-down-to-people{--fa:"\e4b9"}.fa-seedling,.fa-sprout{--fa:"\f4d8"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337"}.fa-boxes-packing{--fa:"\e4c7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8"}.fa-group-arrows-rotate{--fa:"\e4f6"}.fa-bowl-food{--fa:"\e4c6"}.fa-candy-cane{--fa:"\f786"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da"}.fa-file-word{--fa:"\f1c2"}.fa-file-powerpoint{--fa:"\f1c4"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e"}.fa-house-lock{--fa:"\e510"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed"}.fa-children{--fa:"\e4e1"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b"}.fa-user-alt-slash,.fa-user-large-slash{--fa:"\f4fa"}.fa-envelope-open{--fa:"\f2b6"}.fa-handshake-alt-slash,.fa-handshake-simple-slash{--fa:"\e05f"}.fa-mattress-pillow{--fa:"\e525"}.fa-guarani-sign{--fa:"\e19a"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021"}.fa-fire-extinguisher{--fa:"\f134"}.fa-cruzeiro-sign{--fa:"\e152"}.fa-greater-than-equal{--fa:"\f532"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed"}.fa-atlas,.fa-book-atlas{--fa:"\f558"}.fa-virus{--fa:"\e074"}.fa-envelope-circle-check{--fa:"\e4e8"}.fa-layer-group{--fa:"\f5fd"}.fa-arrows-to-dot{--fa:"\e4be"}.fa-archway{--fa:"\f557"}.fa-heart-circle-check{--fa:"\e4fd"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6"}.fa-square{--fa:"\f0c8"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000"}.fa-couch{--fa:"\f4b8"}.fa-cedi-sign{--fa:"\e0df"}.fa-italic{--fa:"\f033"}.fa-table-cells-column-lock{--fa:"\e678"}.fa-church{--fa:"\f51d"}.fa-comments-dollar{--fa:"\f653"}.fa-democrat{--fa:"\f747"}.fa-z{--fa:"\5a"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9"}.fa-road-lock{--fa:"\e567"}.fa-a{--fa:"\41"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b"}.fa-p{--fa:"\50"}.fa-snowflake{--fa:"\f2dc"}.fa-newspaper{--fa:"\f1ea"}.fa-ad,.fa-rectangle-ad{--fa:"\f641"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9"}.fa-filter-circle-xmark{--fa:"\e17b"}.fa-locust{--fa:"\e520"}.fa-sort,.fa-unsorted{--fa:"\f0dc"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb"}.fa-person-dress-burst{--fa:"\e544"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d"}.fa-vector-square{--fa:"\f5cb"}.fa-bread-slice{--fa:"\f7ec"}.fa-language{--fa:"\f1ab"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598"}.fa-filter{--fa:"\f0b0"}.fa-question{--fa:"\3f"}.fa-file-signature{--fa:"\f573"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2"}.fa-house-chimney-user{--fa:"\e065"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-puzzle-piece{--fa:"\f12e"}.fa-money-check{--fa:"\f53c"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0"}.fa-code{--fa:"\f121"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0"}.fa-building-circle-exclamation{--fa:"\e4d3"}.fa-magnifying-glass-chart{--fa:"\e522"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e"}.fa-cubes-stacked{--fa:"\e4e6"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159"}.fa-virus-covid{--fa:"\e4a8"}.fa-austral-sign{--fa:"\e0a9"}.fa-f{--fa:"\46"}.fa-leaf{--fa:"\f06c"}.fa-road{--fa:"\f018"}.fa-cab,.fa-taxi{--fa:"\f1ba"}.fa-person-circle-plus{--fa:"\e541"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-bolt-lightning{--fa:"\e0b7"}.fa-sack-xmark{--fa:"\e56a"}.fa-file-excel{--fa:"\f1c3"}.fa-file-contract{--fa:"\f56c"}.fa-fish-fins{--fa:"\e4f2"}.fa-building-flag{--fa:"\e4d5"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582"}.fa-object-ungroup{--fa:"\f248"}.fa-poop{--fa:"\f619"}.fa-location-pin,.fa-map-marker{--fa:"\f041"}.fa-kaaba{--fa:"\f66b"}.fa-toilet-paper{--fa:"\f71e"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807"}.fa-eject{--fa:"\f052"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a"}.fa-plane-circle-check{--fa:"\e555"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5"}.fa-object-group{--fa:"\f247"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-mask-ventilator{--fa:"\e524"}.fa-arrow-right{--fa:"\f061"}.fa-map-signs,.fa-signs-post{--fa:"\f277"}.fa-cash-register{--fa:"\f788"}.fa-person-circle-question{--fa:"\e542"}.fa-h{--fa:"\48"}.fa-tarp{--fa:"\e57b"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-arrows-to-eye{--fa:"\e4bf"}.fa-plug-circle-bolt{--fa:"\e55b"}.fa-heart{--fa:"\f004"}.fa-mars-and-venus{--fa:"\f224"}.fa-home-user,.fa-house-user{--fa:"\e1b0"}.fa-dumpster-fire{--fa:"\f794"}.fa-house-crack{--fa:"\e3b1"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2"}.fa-bottle-water{--fa:"\e4c5"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b"}.fa-toilet-paper-slash{--fa:"\e072"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1"}.fa-kitchen-set{--fa:"\e51a"}.fa-r{--fa:"\52"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca"}.fa-cube{--fa:"\f1b2"}.fa-bitcoin-sign{--fa:"\e0b4"}.fa-shield-dog{--fa:"\e573"}.fa-solar-panel{--fa:"\f5ba"}.fa-lock-open{--fa:"\f3c1"}.fa-elevator{--fa:"\e16d"}.fa-money-bill-transfer{--fa:"\e528"}.fa-money-bill-trend-up{--fa:"\e529"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682"}.fa-circle{--fa:"\f111"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049"}.fa-recycle{--fa:"\f1b8"}.fa-user-astronaut{--fa:"\f4fb"}.fa-plane-slash{--fa:"\e069"}.fa-trademark{--fa:"\f25c"}.fa-basketball,.fa-basketball-ball{--fa:"\f434"}.fa-satellite-dish{--fa:"\f7c0"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-users-rays{--fa:"\e593"}.fa-wallet{--fa:"\f555"}.fa-clipboard-check{--fa:"\f46c"}.fa-file-audio{--fa:"\f1c7"}.fa-burger,.fa-hamburger{--fa:"\f805"}.fa-wrench{--fa:"\f0ad"}.fa-bugs{--fa:"\e4d0"}.fa-rupee,.fa-rupee-sign{--fa:"\f156"}.fa-file-image{--fa:"\f1c5"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-plane-departure{--fa:"\f5b0"}.fa-handshake-slash{--fa:"\e060"}.fa-book-bookmark{--fa:"\e0bb"}.fa-code-branch{--fa:"\f126"}.fa-hat-cowboy{--fa:"\f8c0"}.fa-bridge{--fa:"\e4c8"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879"}.fa-truck-front{--fa:"\e2b7"}.fa-cat{--fa:"\f6be"}.fa-anchor-circle-exclamation{--fa:"\e4ab"}.fa-truck-field{--fa:"\e58d"}.fa-route{--fa:"\f4d7"}.fa-clipboard-question{--fa:"\e4e3"}.fa-panorama{--fa:"\e209"}.fa-comment-medical{--fa:"\f7f5"}.fa-teeth-open{--fa:"\f62f"}.fa-file-circle-minus{--fa:"\e4ed"}.fa-tags{--fa:"\f02c"}.fa-wine-glass{--fa:"\f4e3"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4"}.fa-parking,.fa-square-parking{--fa:"\f540"}.fa-house-signal{--fa:"\e012"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828"}.fa-faucet-drip{--fa:"\e006"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d"}.fa-terminal{--fa:"\f120"}.fa-mobile-button{--fa:"\f10b"}.fa-house-medical-flag{--fa:"\e514"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291"}.fa-tape{--fa:"\f4db"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e"}.fa-eye{--fa:"\f06e"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3"}.fa-audio-description{--fa:"\f29e"}.fa-person-military-to-person{--fa:"\e54c"}.fa-file-shield{--fa:"\e4f0"}.fa-user-slash{--fa:"\f506"}.fa-pen{--fa:"\f304"}.fa-tower-observation{--fa:"\e586"}.fa-file-code{--fa:"\f1c9"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012"}.fa-bus{--fa:"\f207"}.fa-heart-circle-xmark{--fa:"\e501"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af"}.fa-window-maximize{--fa:"\f2d0"}.fa-face-frown,.fa-frown{--fa:"\f119"}.fa-prescription{--fa:"\f5b1"}.fa-shop,.fa-store-alt{--fa:"\f54f"}.fa-floppy-disk,.fa-save{--fa:"\f0c7"}.fa-vihara{--fa:"\f6a7"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad"}.fa-plant-wilt{--fa:"\e5aa"}.fa-diamond{--fa:"\f219"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0"}.fa-chart-diagram{--fa:"\e695"}.fa-bacterium{--fa:"\e05a"}.fa-hand-pointer{--fa:"\f25a"}.fa-drum-steelpan{--fa:"\f56a"}.fa-hand-scissors{--fa:"\f257"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e"}.fa-biohazard{--fa:"\f780"}.fa-location,.fa-location-crosshairs{--fa:"\f601"}.fa-mars-double{--fa:"\f227"}.fa-child-dress{--fa:"\e59c"}.fa-users-between-lines{--fa:"\e591"}.fa-lungs-virus{--fa:"\e067"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588"}.fa-phone{--fa:"\f095"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273"}.fa-child-reaching{--fa:"\e59d"}.fa-head-side-virus{--fa:"\e064"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163"}.fa-door-closed{--fa:"\f52a"}.fa-shield-virus{--fa:"\e06c"}.fa-dice-six{--fa:"\f526"}.fa-mosquito-net{--fa:"\e52c"}.fa-file-fragment{--fa:"\e697"}.fa-bridge-water{--fa:"\e4ce"}.fa-person-booth{--fa:"\f756"}.fa-text-width{--fa:"\f035"}.fa-hat-wizard{--fa:"\f6e8"}.fa-pen-fancy{--fa:"\f5ac"}.fa-digging,.fa-person-digging{--fa:"\f85e"}.fa-trash{--fa:"\f1f8"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629"}.fa-book-medical{--fa:"\f7e6"}.fa-poo{--fa:"\f2fe"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553"}.fa-cubes{--fa:"\f1b3"}.fa-divide{--fa:"\f529"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7"}.fa-headphones{--fa:"\f025"}.fa-hands-holding{--fa:"\f4c2"}.fa-hands-clapping{--fa:"\e1a8"}.fa-republican{--fa:"\f75e"}.fa-arrow-left{--fa:"\f060"}.fa-person-circle-xmark{--fa:"\e543"}.fa-ruler{--fa:"\f545"}.fa-align-left{--fa:"\f036"}.fa-dice-d6{--fa:"\f6d1"}.fa-restroom{--fa:"\f7bd"}.fa-j{--fa:"\4a"}.fa-users-viewfinder{--fa:"\e595"}.fa-file-video{--fa:"\f1c8"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d"}.fa-table-cells,.fa-th{--fa:"\f00a"}.fa-file-pdf{--fa:"\f1c1"}.fa-bible,.fa-book-bible{--fa:"\f647"}.fa-o{--fa:"\4f"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa"}.fa-user-secret{--fa:"\f21b"}.fa-otter{--fa:"\f700"}.fa-female,.fa-person-dress{--fa:"\f182"}.fa-comment-dollar{--fa:"\f651"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a"}.fa-table-cells-large,.fa-th-large{--fa:"\f009"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0"}.fa-hat-cowboy-side{--fa:"\f8c1"}.fa-clipboard-user{--fa:"\f7f3"}.fa-child{--fa:"\f1ae"}.fa-lira-sign{--fa:"\f195"}.fa-satellite{--fa:"\f7bf"}.fa-plane-lock{--fa:"\e558"}.fa-tag{--fa:"\f02b"}.fa-comment{--fa:"\f075"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd"}.fa-envelope{--fa:"\f0e0"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102"}.fa-paperclip{--fa:"\f0c6"}.fa-arrow-right-to-city{--fa:"\e4b3"}.fa-ribbon{--fa:"\f4d6"}.fa-lungs{--fa:"\f604"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887"}.fa-litecoin-sign{--fa:"\e1d3"}.fa-border-none{--fa:"\f850"}.fa-circle-nodes{--fa:"\e4e2"}.fa-parachute-box{--fa:"\f4cd"}.fa-indent{--fa:"\f03c"}.fa-truck-field-un{--fa:"\e58e"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254"}.fa-mountain{--fa:"\f6fc"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-cloud-meatball{--fa:"\f73b"}.fa-camera,.fa-camera-alt{--fa:"\f030"}.fa-square-virus{--fa:"\e578"}.fa-meteor{--fa:"\f753"}.fa-car-on{--fa:"\e4dd"}.fa-sleigh{--fa:"\f7cc"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1"}.fa-water{--fa:"\f773"}.fa-calendar-check{--fa:"\f274"}.fa-braille{--fa:"\f2a1"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486"}.fa-landmark{--fa:"\f66f"}.fa-truck{--fa:"\f0d1"}.fa-crosshairs{--fa:"\f05b"}.fa-person-cane{--fa:"\e53c"}.fa-tent{--fa:"\e57d"}.fa-vest-patches{--fa:"\e086"}.fa-check-double{--fa:"\f560"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d"}.fa-money-bill-wheat{--fa:"\e52a"}.fa-cookie{--fa:"\f563"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586"}.fa-dumbbell{--fa:"\f44b"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022"}.fa-tarp-droplet{--fa:"\e57c"}.fa-house-medical-circle-check{--fa:"\e511"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca"}.fa-calendar-plus{--fa:"\f271"}.fa-plane-arrival{--fa:"\f5af"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359"}.fa-subway,.fa-train-subway{--fa:"\f239"}.fa-chart-gantt{--fa:"\e0e4"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a"}.fa-dna{--fa:"\f471"}.fa-virus-slash{--fa:"\e075"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-chess{--fa:"\f439"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177"}.fa-plug-circle-check{--fa:"\e55c"}.fa-street-view{--fa:"\f21d"}.fa-franc-sign{--fa:"\e18f"}.fa-volume-off{--fa:"\f026"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3"}.fa-cog,.fa-gear{--fa:"\f013"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7"}.fa-mosque{--fa:"\f678"}.fa-mosquito{--fa:"\e52b"}.fa-star-of-david{--fa:"\f69a"}.fa-person-military-rifle{--fa:"\e54b"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-vials{--fa:"\f493"}.fa-plug-circle-plus{--fa:"\e55f"}.fa-place-of-worship{--fa:"\f67f"}.fa-grip-vertical{--fa:"\f58e"}.fa-hexagon-nodes{--fa:"\e699"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148"}.fa-u{--fa:"\55"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-backward-step,.fa-step-backward{--fa:"\f048"}.fa-pallet{--fa:"\f482"}.fa-faucet{--fa:"\e005"}.fa-baseball-bat-ball{--fa:"\f432"}.fa-s{--fa:"\53"}.fa-timeline{--fa:"\e29c"}.fa-keyboard{--fa:"\f11c"}.fa-caret-down{--fa:"\f0d7"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf"}.fa-plane-up{--fa:"\e22d"}.fa-piggy-bank{--fa:"\f4d3"}.fa-battery-3,.fa-battery-half{--fa:"\f242"}.fa-mountain-city{--fa:"\e52e"}.fa-coins{--fa:"\f51e"}.fa-khanda{--fa:"\f66d"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-folder-tree{--fa:"\f802"}.fa-network-wired{--fa:"\f6ff"}.fa-map-pin{--fa:"\f276"}.fa-hamsa{--fa:"\f665"}.fa-cent-sign{--fa:"\e3f5"}.fa-flask{--fa:"\f0c3"}.fa-person-pregnant{--fa:"\e31e"}.fa-wand-sparkles{--fa:"\f72b"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142"}.fa-ticket{--fa:"\f145"}.fa-power-off{--fa:"\f011"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b"}.fa-flag-usa{--fa:"\f74d"}.fa-laptop-file{--fa:"\e51d"}.fa-teletype,.fa-tty{--fa:"\f1e4"}.fa-diagram-next{--fa:"\e476"}.fa-person-rifle{--fa:"\e54e"}.fa-house-medical-circle-exclamation{--fa:"\e512"}.fa-closed-captioning{--fa:"\f20a"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec"}.fa-venus-double{--fa:"\f226"}.fa-images{--fa:"\f302"}.fa-calculator{--fa:"\f1ec"}.fa-people-pulling{--fa:"\e535"}.fa-n{--fa:"\4e"}.fa-cable-car,.fa-tram{--fa:"\f7da"}.fa-cloud-rain{--fa:"\f73d"}.fa-building-circle-xmark{--fa:"\e4d4"}.fa-ship{--fa:"\f21a"}.fa-arrows-down-to-line{--fa:"\e4b8"}.fa-download{--fa:"\f019"}.fa-face-grin,.fa-grin{--fa:"\f580"}.fa-backspace,.fa-delete-left{--fa:"\f55a"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb"}.fa-file-circle-check{--fa:"\e5a0"}.fa-forward{--fa:"\f04e"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce"}.fa-face-meh,.fa-meh{--fa:"\f11a"}.fa-align-center{--fa:"\f037"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2"}.fa-dedent,.fa-outdent{--fa:"\f03b"}.fa-heart-circle-exclamation{--fa:"\e4fe"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015"}.fa-calendar-week{--fa:"\f784"}.fa-laptop-medical{--fa:"\f812"}.fa-b{--fa:"\42"}.fa-file-medical{--fa:"\f477"}.fa-dice-one{--fa:"\f525"}.fa-kiwi-bird{--fa:"\f535"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9"}.fa-cutlery,.fa-utensils{--fa:"\f2e7"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161"}.fa-mill-sign{--fa:"\e1ed"}.fa-bowl-rice{--fa:"\e2eb"}.fa-skull{--fa:"\f54c"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519"}.fa-truck-pickup{--fa:"\f63c"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c"}.fa-stop{--fa:"\f04d"}.fa-code-merge{--fa:"\f387"}.fa-upload{--fa:"\f093"}.fa-hurricane{--fa:"\f751"}.fa-mound{--fa:"\e52d"}.fa-toilet-portable{--fa:"\e583"}.fa-compact-disc{--fa:"\f51f"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d"}.fa-caravan{--fa:"\f8ff"}.fa-shield-cat{--fa:"\e572"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-glass-water{--fa:"\e4f4"}.fa-oil-well{--fa:"\e532"}.fa-vault{--fa:"\e2c5"}.fa-mars{--fa:"\f222"}.fa-toilet{--fa:"\f7d8"}.fa-plane-circle-xmark{--fa:"\e557"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158"}.fa-sun{--fa:"\f185"}.fa-guitar{--fa:"\f7a6"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c"}.fa-horse-head{--fa:"\f7ab"}.fa-bore-hole{--fa:"\e4c3"}.fa-industry{--fa:"\f275"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358"}.fa-arrows-turn-to-dots{--fa:"\e4c1"}.fa-florin-sign{--fa:"\e184"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884"}.fa-less-than{--fa:"\3c"}.fa-angle-down{--fa:"\f107"}.fa-car-tunnel{--fa:"\e4de"}.fa-head-side-cough{--fa:"\e061"}.fa-grip-lines{--fa:"\f7a4"}.fa-thumbs-down{--fa:"\f165"}.fa-user-lock{--fa:"\f502"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178"}.fa-anchor-circle-xmark{--fa:"\e4ac"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-chess-pawn{--fa:"\f443"}.fa-first-aid,.fa-kit-medical{--fa:"\f479"}.fa-person-through-window{--fa:"\e5a9"}.fa-toolbox{--fa:"\f552"}.fa-hands-holding-circle{--fa:"\e4fb"}.fa-bug{--fa:"\f188"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-automobile,.fa-car{--fa:"\f1b9"}.fa-hand-holding-hand{--fa:"\e4f7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da"}.fa-mountain-sun{--fa:"\e52f"}.fa-arrows-left-right-to-line{--fa:"\e4ba"}.fa-dice-d20{--fa:"\f6cf"}.fa-truck-droplet{--fa:"\e58c"}.fa-file-circle-xmark{--fa:"\e5a1"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040"}.fa-medal{--fa:"\f5a2"}.fa-bed{--fa:"\f236"}.fa-h-square,.fa-square-h{--fa:"\f0fd"}.fa-podcast{--fa:"\f2ce"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7"}.fa-bell{--fa:"\f0f3"}.fa-superscript{--fa:"\f12b"}.fa-plug-circle-xmark{--fa:"\e560"}.fa-star-of-life{--fa:"\f621"}.fa-phone-slash{--fa:"\f3dd"}.fa-paint-roller{--fa:"\f5aa"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-file{--fa:"\f15b"}.fa-greater-than{--fa:"\3e"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4"}.fa-arrow-down{--fa:"\f063"}.fa-droplet,.fa-tint{--fa:"\f043"}.fa-eraser{--fa:"\f12d"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d"}.fa-person-burst{--fa:"\e53b"}.fa-dove{--fa:"\f4ba"}.fa-battery-0,.fa-battery-empty{--fa:"\f244"}.fa-socks{--fa:"\f696"}.fa-inbox{--fa:"\f01c"}.fa-section{--fa:"\e447"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-envelope-open-text{--fa:"\f658"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-wine-bottle{--fa:"\f72f"}.fa-chess-rook{--fa:"\f447"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-dharmachakra{--fa:"\f655"}.fa-hotdog{--fa:"\f80f"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d"}.fa-drum{--fa:"\f569"}.fa-ice-cream{--fa:"\f810"}.fa-heart-circle-bolt{--fa:"\e4fc"}.fa-fax{--fa:"\f1ac"}.fa-paragraph{--fa:"\f1dd"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772"}.fa-star-half{--fa:"\f089"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468"}.fa-chain,.fa-link{--fa:"\f0c1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2"}.fa-tree-city{--fa:"\e587"}.fa-play{--fa:"\f04b"}.fa-font{--fa:"\f031"}.fa-table-cells-row-lock{--fa:"\e67a"}.fa-rupiah-sign{--fa:"\e23d"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a"}.fa-naira-sign{--fa:"\e1f6"}.fa-cart-arrow-down{--fa:"\f218"}.fa-walkie-talkie{--fa:"\f8ef"}.fa-file-edit,.fa-file-pen{--fa:"\f31c"}.fa-receipt{--fa:"\f543"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b"}.fa-suitcase-rolling{--fa:"\f5c1"}.fa-person-circle-exclamation{--fa:"\e53f"}.fa-chevron-down{--fa:"\f078"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240"}.fa-skull-crossbones{--fa:"\f714"}.fa-code-compare{--fa:"\e13a"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca"}.fa-school-lock{--fa:"\e56f"}.fa-tower-cell{--fa:"\e585"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309"}.fa-ranking-star{--fa:"\e561"}.fa-chess-king{--fa:"\f43f"}.fa-person-harassing{--fa:"\e549"}.fa-brazilian-real-sign{--fa:"\e46c"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752"}.fa-arrow-up{--fa:"\f062"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c"}.fa-shrimp{--fa:"\e448"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-jug-detergent{--fa:"\e519"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd"}.fa-user-shield{--fa:"\f505"}.fa-wind{--fa:"\f72e"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1"}.fa-y{--fa:"\59"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b"}.fa-fish{--fa:"\f578"}.fa-user-graduate{--fa:"\f501"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042"}.fa-clapperboard{--fa:"\e131"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba"}.fa-baseball,.fa-baseball-ball{--fa:"\f433"}.fa-jet-fighter-up{--fa:"\e518"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542"}.fa-copy{--fa:"\f0c5"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9"}.fa-hand-sparkles{--fa:"\e05d"}.fa-grip,.fa-grip-horizontal{--fa:"\f58d"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0"}.fa-gun{--fa:"\e19b"}.fa-phone-square,.fa-square-phone{--fa:"\f098"}.fa-add,.fa-plus{--fa:"\2b"}.fa-expand{--fa:"\f065"}.fa-computer{--fa:"\e4e5"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c"}.fa-peso-sign{--fa:"\e222"}.fa-building-shield{--fa:"\e4d8"}.fa-baby{--fa:"\f77c"}.fa-users-line{--fa:"\e592"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d"}.fa-tractor{--fa:"\f722"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829"}.fa-arrow-down-up-lock{--fa:"\e4b0"}.fa-lines-leaning{--fa:"\e51e"}.fa-ruler-combined{--fa:"\f546"}.fa-copyright{--fa:"\f1f9"}.fa-equals{--fa:"\3d"}.fa-blender{--fa:"\f517"}.fa-teeth{--fa:"\f62e"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b"}.fa-map{--fa:"\f279"}.fa-rocket{--fa:"\f135"}.fa-photo-film,.fa-photo-video{--fa:"\f87c"}.fa-folder-minus{--fa:"\f65d"}.fa-hexagon-nodes-bolt{--fa:"\e69a"}.fa-store{--fa:"\f54e"}.fa-arrow-trend-up{--fa:"\e098"}.fa-plug-circle-minus{--fa:"\e55e"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9"}.fa-bezier-curve{--fa:"\f55b"}.fa-bell-slash{--fa:"\f1f6"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb"}.fa-school-flag{--fa:"\e56e"}.fa-fill{--fa:"\f575"}.fa-angle-up{--fa:"\f106"}.fa-drumstick-bite{--fa:"\f6d7"}.fa-holly-berry{--fa:"\f7aa"}.fa-chevron-left{--fa:"\f053"}.fa-bacteria{--fa:"\e059"}.fa-hand-lizard{--fa:"\f258"}.fa-notdef{--fa:"\e1fe"}.fa-disease{--fa:"\f7fa"}.fa-briefcase-medical{--fa:"\f469"}.fa-genderless{--fa:"\f22d"}.fa-chevron-right{--fa:"\f054"}.fa-retweet{--fa:"\f079"}.fa-car-alt,.fa-car-rear{--fa:"\f5de"}.fa-pump-soap{--fa:"\e06b"}.fa-video-slash{--fa:"\f4e2"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243"}.fa-radio{--fa:"\f8d7"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d"}.fa-traffic-light{--fa:"\f637"}.fa-thermometer{--fa:"\f491"}.fa-vr-cardboard{--fa:"\f729"}.fa-hand-middle-finger{--fa:"\f806"}.fa-percent,.fa-percentage{--fa:"\25"}.fa-truck-moving{--fa:"\f4df"}.fa-glass-water-droplet{--fa:"\e4f5"}.fa-display{--fa:"\e163"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d"}.fa-trophy{--fa:"\f091"}.fa-person-praying,.fa-pray{--fa:"\f683"}.fa-hammer{--fa:"\f6e3"}.fa-hand-peace{--fa:"\f25b"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-spinner{--fa:"\f110"}.fa-robot{--fa:"\f544"}.fa-peace{--fa:"\f67c"}.fa-cogs,.fa-gears{--fa:"\f085"}.fa-warehouse{--fa:"\f494"}.fa-arrow-up-right-dots{--fa:"\e4b7"}.fa-splotch{--fa:"\f5bc"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584"}.fa-dice-four{--fa:"\f524"}.fa-sim-card{--fa:"\f7c4"}.fa-transgender,.fa-transgender-alt{--fa:"\f225"}.fa-mercury{--fa:"\f223"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149"}.fa-person-falling-burst{--fa:"\e547"}.fa-award{--fa:"\f559"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff"}.fa-building{--fa:"\f1ad"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100"}.fa-qrcode{--fa:"\f029"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885"}.fa-comment-nodes{--fa:"\e696"}.fa-house-medical{--fa:"\e3b2"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137"}.fa-house-chimney-window{--fa:"\e00d"}.fa-pen-nib{--fa:"\f5ad"}.fa-tent-arrow-turn-left{--fa:"\e580"}.fa-tents{--fa:"\e582"}.fa-magic,.fa-wand-magic{--fa:"\f0d0"}.fa-dog{--fa:"\f6d3"}.fa-carrot{--fa:"\f787"}.fa-moon{--fa:"\f186"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce"}.fa-cheese{--fa:"\f7ef"}.fa-yin-yang{--fa:"\f6ad"}.fa-music{--fa:"\f001"}.fa-code-commit{--fa:"\f386"}.fa-temperature-low{--fa:"\f76b"}.fa-biking,.fa-person-biking{--fa:"\f84a"}.fa-broom{--fa:"\f51a"}.fa-shield-heart{--fa:"\e574"}.fa-gopuram{--fa:"\f664"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3"}.fa-hashtag{--fa:"\23"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424"}.fa-oil-can{--fa:"\f613"}.fa-t{--fa:"\54"}.fa-hippo{--fa:"\f6ed"}.fa-chart-column{--fa:"\e0e3"}.fa-infinity{--fa:"\f534"}.fa-vial-circle-check{--fa:"\e596"}.fa-person-arrow-down-to-line{--fa:"\e538"}.fa-voicemail{--fa:"\f897"}.fa-fan{--fa:"\f863"}.fa-person-walking-luggage{--fa:"\e554"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338"}.fa-cloud-moon-rain{--fa:"\f73c"}.fa-calendar{--fa:"\f133"}.fa-trailer{--fa:"\e041"}.fa-bahai,.fa-haykal{--fa:"\f666"}.fa-sd-card{--fa:"\f7c2"}.fa-dragon{--fa:"\f6d5"}.fa-shoe-prints{--fa:"\f54b"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b"}.fa-hand-holding{--fa:"\f4bd"}.fa-plug-circle-exclamation{--fa:"\e55d"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127"}.fa-clone{--fa:"\f24d"}.fa-person-walking-arrow-loop-left{--fa:"\e551"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4"}.fa-tornado{--fa:"\f76f"}.fa-file-circle-plus{--fa:"\e494"}.fa-book-quran,.fa-quran{--fa:"\f687"}.fa-anchor{--fa:"\f13d"}.fa-border-all{--fa:"\f84c"}.fa-angry,.fa-face-angry{--fa:"\f556"}.fa-cookie-bite{--fa:"\f564"}.fa-arrow-trend-down{--fa:"\e097"}.fa-feed,.fa-rss{--fa:"\f09e"}.fa-draw-polygon{--fa:"\f5ee"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a"}.fa-shower{--fa:"\f2cc"}.fa-desktop,.fa-desktop-alt{--fa:"\f390"}.fa-m{--fa:"\4d"}.fa-table-list,.fa-th-list{--fa:"\f00b"}.fa-comment-sms,.fa-sms{--fa:"\f7cd"}.fa-book{--fa:"\f02d"}.fa-user-plus{--fa:"\f234"}.fa-check{--fa:"\f00c"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241"}.fa-house-circle-check{--fa:"\e509"}.fa-angle-left{--fa:"\f104"}.fa-diagram-successor{--fa:"\e47a"}.fa-truck-arrow-right{--fa:"\e58b"}.fa-arrows-split-up-and-left{--fa:"\e4bc"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de"}.fa-cloud-moon{--fa:"\f6c3"}.fa-briefcase{--fa:"\f0b1"}.fa-person-falling{--fa:"\e546"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0"}.fa-user-tag{--fa:"\f507"}.fa-rug{--fa:"\e569"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410"}.fa-baht-sign{--fa:"\e0ac"}.fa-book-open{--fa:"\f518"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a"}.fa-handcuffs{--fa:"\e4f8"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-database{--fa:"\f1c0"}.fa-mail-forward,.fa-share{--fa:"\f064"}.fa-bottle-droplet{--fa:"\e4c4"}.fa-mask-face{--fa:"\e1d7"}.fa-hill-rockslide{--fa:"\e508"}.fa-exchange-alt,.fa-right-left{--fa:"\f362"}.fa-paper-plane{--fa:"\f1d8"}.fa-road-circle-exclamation{--fa:"\e565"}.fa-dungeon{--fa:"\f6d9"}.fa-align-right{--fa:"\f038"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b"}.fa-life-ring{--fa:"\f1cd"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7"}.fa-calendar-day{--fa:"\f783"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d"}.fa-face-grimace,.fa-grimace{--fa:"\f57f"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be"}.fa-person-walking-arrow-right{--fa:"\e552"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199"}.fa-dice{--fa:"\f522"}.fa-bowling-ball{--fa:"\f436"}.fa-brain{--fa:"\f5dc"}.fa-band-aid,.fa-bandage{--fa:"\f462"}.fa-calendar-minus{--fa:"\f272"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-gifts{--fa:"\f79c"}.fa-hotel{--fa:"\f594"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e"}.fa-thumbs-up{--fa:"\f164"}.fa-user-clock{--fa:"\f4fd"}.fa-allergies,.fa-hand-dots{--fa:"\f461"}.fa-file-invoice{--fa:"\f570"}.fa-window-minimize{--fa:"\f2d1"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4"}.fa-brush{--fa:"\f55d"}.fa-file-half-dashed{--fa:"\e698"}.fa-mask{--fa:"\f6fa"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010"}.fa-ruler-vertical{--fa:"\f548"}.fa-user-alt,.fa-user-large{--fa:"\f406"}.fa-train-tram{--fa:"\e5b4"}.fa-user-nurse{--fa:"\f82f"}.fa-syringe{--fa:"\f48e"}.fa-cloud-sun{--fa:"\f6c4"}.fa-stopwatch-20{--fa:"\e06f"}.fa-square-full{--fa:"\f45c"}.fa-magnet{--fa:"\f076"}.fa-jar{--fa:"\e516"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249"}.fa-bug-slash{--fa:"\e490"}.fa-arrow-up-from-water-pump{--fa:"\e4b6"}.fa-bone{--fa:"\f5d7"}.fa-table-cells-row-unlock{--fa:"\e691"}.fa-user-injured{--fa:"\f728"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4"}.fa-plane{--fa:"\f072"}.fa-tent-arrows-down{--fa:"\e581"}.fa-exclamation{--fa:"\21"}.fa-arrows-spin{--fa:"\e4bb"}.fa-print{--fa:"\f02f"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\24"}.fa-x{--fa:"\58"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688"}.fa-users-cog,.fa-users-gear{--fa:"\f509"}.fa-person-military-pointing{--fa:"\e54a"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c"}.fa-umbrella{--fa:"\f0e9"}.fa-trowel{--fa:"\e589"}.fa-d{--fa:"\44"}.fa-stapler{--fa:"\e5af"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630"}.fa-kip-sign{--fa:"\e1c4"}.fa-hand-point-left{--fa:"\f0a5"}.fa-handshake-alt,.fa-handshake-simple{--fa:"\f4c6"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1"}.fa-barcode{--fa:"\f02a"}.fa-plus-minus{--fa:"\e43c"}.fa-video,.fa-video-camera{--fa:"\f03d"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-person-circle-check{--fa:"\e53e"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero{--fa:"\f3d0"}.fa-hooli{--fa:"\f427"}.fa-yelp{--fa:"\f1e9"}.fa-cc-visa{--fa:"\f1f0"}.fa-lastfm{--fa:"\f202"}.fa-shopware{--fa:"\f5b5"}.fa-creative-commons-nc{--fa:"\f4e8"}.fa-aws{--fa:"\f375"}.fa-redhat{--fa:"\f7bc"}.fa-yoast{--fa:"\f2b1"}.fa-cloudflare{--fa:"\e07d"}.fa-ups{--fa:"\f7e0"}.fa-pixiv{--fa:"\e640"}.fa-wpexplorer{--fa:"\f2de"}.fa-dyalog{--fa:"\f399"}.fa-bity{--fa:"\f37a"}.fa-stackpath{--fa:"\f842"}.fa-buysellads{--fa:"\f20d"}.fa-first-order{--fa:"\f2b0"}.fa-modx{--fa:"\f285"}.fa-guilded{--fa:"\e07e"}.fa-vnv{--fa:"\f40b"}.fa-js-square,.fa-square-js{--fa:"\f3b9"}.fa-microsoft{--fa:"\f3ca"}.fa-qq{--fa:"\f1d6"}.fa-orcid{--fa:"\f8d2"}.fa-java{--fa:"\f4e4"}.fa-invision{--fa:"\f7b0"}.fa-creative-commons-pd-alt{--fa:"\f4ed"}.fa-centercode{--fa:"\f380"}.fa-glide-g{--fa:"\f2a6"}.fa-drupal{--fa:"\f1a9"}.fa-jxl{--fa:"\e67b"}.fa-dart-lang{--fa:"\e693"}.fa-hire-a-helper{--fa:"\f3b0"}.fa-creative-commons-by{--fa:"\f4e7"}.fa-unity{--fa:"\e049"}.fa-whmcs{--fa:"\f40d"}.fa-rocketchat{--fa:"\f3e8"}.fa-vk{--fa:"\f189"}.fa-untappd{--fa:"\f405"}.fa-mailchimp{--fa:"\f59e"}.fa-css3-alt{--fa:"\f38b"}.fa-reddit-square,.fa-square-reddit{--fa:"\f1a2"}.fa-vimeo-v{--fa:"\f27d"}.fa-contao{--fa:"\f26d"}.fa-square-font-awesome{--fa:"\e5ad"}.fa-deskpro{--fa:"\f38f"}.fa-brave{--fa:"\e63c"}.fa-sistrix{--fa:"\f3ee"}.fa-instagram-square,.fa-square-instagram{--fa:"\e055"}.fa-battle-net{--fa:"\f835"}.fa-the-red-yeti{--fa:"\f69d"}.fa-hacker-news-square,.fa-square-hacker-news{--fa:"\f3af"}.fa-edge{--fa:"\f282"}.fa-threads{--fa:"\e618"}.fa-napster{--fa:"\f3d2"}.fa-snapchat-square,.fa-square-snapchat{--fa:"\f2ad"}.fa-google-plus-g{--fa:"\f0d5"}.fa-artstation{--fa:"\f77a"}.fa-markdown{--fa:"\f60f"}.fa-sourcetree{--fa:"\f7d3"}.fa-google-plus{--fa:"\f2b3"}.fa-diaspora{--fa:"\f791"}.fa-foursquare{--fa:"\f180"}.fa-stack-overflow{--fa:"\f16c"}.fa-github-alt{--fa:"\f113"}.fa-phoenix-squadron{--fa:"\f511"}.fa-pagelines{--fa:"\f18c"}.fa-algolia{--fa:"\f36c"}.fa-red-river{--fa:"\f3e3"}.fa-creative-commons-sa{--fa:"\f4ef"}.fa-safari{--fa:"\f267"}.fa-google{--fa:"\f1a0"}.fa-font-awesome-alt,.fa-square-font-awesome-stroke{--fa:"\f35c"}.fa-atlassian{--fa:"\f77b"}.fa-linkedin-in{--fa:"\f0e1"}.fa-digital-ocean{--fa:"\f391"}.fa-nimblr{--fa:"\f5a8"}.fa-chromecast{--fa:"\f838"}.fa-evernote{--fa:"\f839"}.fa-hacker-news{--fa:"\f1d4"}.fa-creative-commons-sampling{--fa:"\f4f0"}.fa-adversal{--fa:"\f36a"}.fa-creative-commons{--fa:"\f25e"}.fa-watchman-monitoring{--fa:"\e087"}.fa-fonticons{--fa:"\f280"}.fa-weixin{--fa:"\f1d7"}.fa-shirtsinbulk{--fa:"\f214"}.fa-codepen{--fa:"\f1cb"}.fa-git-alt{--fa:"\f841"}.fa-lyft{--fa:"\f3c3"}.fa-rev{--fa:"\f5b2"}.fa-windows{--fa:"\f17a"}.fa-wizards-of-the-coast{--fa:"\f730"}.fa-square-viadeo,.fa-viadeo-square{--fa:"\f2aa"}.fa-meetup{--fa:"\f2e0"}.fa-centos{--fa:"\f789"}.fa-adn{--fa:"\f170"}.fa-cloudsmith{--fa:"\f384"}.fa-opensuse{--fa:"\e62b"}.fa-pied-piper-alt{--fa:"\f1a8"}.fa-dribbble-square,.fa-square-dribbble{--fa:"\f397"}.fa-codiepie{--fa:"\f284"}.fa-node{--fa:"\f419"}.fa-mix{--fa:"\f3cb"}.fa-steam{--fa:"\f1b6"}.fa-cc-apple-pay{--fa:"\f416"}.fa-scribd{--fa:"\f28a"}.fa-debian{--fa:"\e60b"}.fa-openid{--fa:"\f19b"}.fa-instalod{--fa:"\e081"}.fa-files-pinwheel{--fa:"\e69f"}.fa-expeditedssl{--fa:"\f23e"}.fa-sellcast{--fa:"\f2da"}.fa-square-twitter,.fa-twitter-square{--fa:"\f081"}.fa-r-project{--fa:"\f4f7"}.fa-delicious{--fa:"\f1a5"}.fa-freebsd{--fa:"\f3a4"}.fa-vuejs{--fa:"\f41f"}.fa-accusoft{--fa:"\f369"}.fa-ioxhost{--fa:"\f208"}.fa-fonticons-fi{--fa:"\f3a2"}.fa-app-store{--fa:"\f36f"}.fa-cc-mastercard{--fa:"\f1f1"}.fa-itunes-note{--fa:"\f3b5"}.fa-golang{--fa:"\e40f"}.fa-kickstarter,.fa-square-kickstarter{--fa:"\f3bb"}.fa-grav{--fa:"\f2d6"}.fa-weibo{--fa:"\f18a"}.fa-uncharted{--fa:"\e084"}.fa-firstdraft{--fa:"\f3a1"}.fa-square-youtube,.fa-youtube-square{--fa:"\f431"}.fa-wikipedia-w{--fa:"\f266"}.fa-rendact,.fa-wpressr{--fa:"\f3e4"}.fa-angellist{--fa:"\f209"}.fa-galactic-republic{--fa:"\f50c"}.fa-nfc-directional{--fa:"\e530"}.fa-skype{--fa:"\f17e"}.fa-joget{--fa:"\f3b7"}.fa-fedora{--fa:"\f798"}.fa-stripe-s{--fa:"\f42a"}.fa-meta{--fa:"\e49b"}.fa-laravel{--fa:"\f3bd"}.fa-hotjar{--fa:"\f3b1"}.fa-bluetooth-b{--fa:"\f294"}.fa-square-letterboxd{--fa:"\e62e"}.fa-sticker-mule{--fa:"\f3f7"}.fa-creative-commons-zero{--fa:"\f4f3"}.fa-hips{--fa:"\f452"}.fa-css{--fa:"\e6a2"}.fa-behance{--fa:"\f1b4"}.fa-reddit{--fa:"\f1a1"}.fa-discord{--fa:"\f392"}.fa-chrome{--fa:"\f268"}.fa-app-store-ios{--fa:"\f370"}.fa-cc-discover{--fa:"\f1f2"}.fa-wpbeginner{--fa:"\f297"}.fa-confluence{--fa:"\f78d"}.fa-shoelace{--fa:"\e60c"}.fa-mdb{--fa:"\f8ca"}.fa-dochub{--fa:"\f394"}.fa-accessible-icon{--fa:"\f368"}.fa-ebay{--fa:"\f4f4"}.fa-amazon{--fa:"\f270"}.fa-unsplash{--fa:"\e07c"}.fa-yarn{--fa:"\f7e3"}.fa-square-steam,.fa-steam-square{--fa:"\f1b7"}.fa-500px{--fa:"\f26e"}.fa-square-vimeo,.fa-vimeo-square{--fa:"\f194"}.fa-asymmetrik{--fa:"\f372"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-gratipay{--fa:"\f184"}.fa-apple{--fa:"\f179"}.fa-hive{--fa:"\e07f"}.fa-gitkraken{--fa:"\f3a6"}.fa-keybase{--fa:"\f4f5"}.fa-apple-pay{--fa:"\f415"}.fa-padlet{--fa:"\e4a0"}.fa-amazon-pay{--fa:"\f42c"}.fa-github-square,.fa-square-github{--fa:"\f092"}.fa-stumbleupon{--fa:"\f1a4"}.fa-fedex{--fa:"\f797"}.fa-phoenix-framework{--fa:"\f3dc"}.fa-shopify{--fa:"\e057"}.fa-neos{--fa:"\f612"}.fa-square-threads{--fa:"\e619"}.fa-hackerrank{--fa:"\f5f7"}.fa-researchgate{--fa:"\f4f8"}.fa-swift{--fa:"\f8e1"}.fa-angular{--fa:"\f420"}.fa-speakap{--fa:"\f3f3"}.fa-angrycreative{--fa:"\f36e"}.fa-y-combinator{--fa:"\f23b"}.fa-empire{--fa:"\f1d1"}.fa-envira{--fa:"\f299"}.fa-google-scholar{--fa:"\e63b"}.fa-gitlab-square,.fa-square-gitlab{--fa:"\e5ae"}.fa-studiovinari{--fa:"\f3f8"}.fa-pied-piper{--fa:"\f2ae"}.fa-wordpress{--fa:"\f19a"}.fa-product-hunt{--fa:"\f288"}.fa-firefox{--fa:"\f269"}.fa-linode{--fa:"\f2b8"}.fa-goodreads{--fa:"\f3a8"}.fa-odnoklassniki-square,.fa-square-odnoklassniki{--fa:"\f264"}.fa-jsfiddle{--fa:"\f1cc"}.fa-sith{--fa:"\f512"}.fa-themeisle{--fa:"\f2b2"}.fa-page4{--fa:"\f3d7"}.fa-hashnode{--fa:"\e499"}.fa-react{--fa:"\f41b"}.fa-cc-paypal{--fa:"\f1f4"}.fa-squarespace{--fa:"\f5be"}.fa-cc-stripe{--fa:"\f1f5"}.fa-creative-commons-share{--fa:"\f4f2"}.fa-bitcoin{--fa:"\f379"}.fa-keycdn{--fa:"\f3ba"}.fa-opera{--fa:"\f26a"}.fa-itch-io{--fa:"\f83a"}.fa-umbraco{--fa:"\f8e8"}.fa-galactic-senate{--fa:"\f50d"}.fa-ubuntu{--fa:"\f7df"}.fa-draft2digital{--fa:"\f396"}.fa-stripe{--fa:"\f429"}.fa-houzz{--fa:"\f27c"}.fa-gg{--fa:"\f260"}.fa-dhl{--fa:"\f790"}.fa-pinterest-square,.fa-square-pinterest{--fa:"\f0d3"}.fa-xing{--fa:"\f168"}.fa-blackberry{--fa:"\f37b"}.fa-creative-commons-pd{--fa:"\f4ec"}.fa-playstation{--fa:"\f3df"}.fa-quinscape{--fa:"\f459"}.fa-less{--fa:"\f41d"}.fa-blogger-b{--fa:"\f37d"}.fa-opencart{--fa:"\f23d"}.fa-vine{--fa:"\f1ca"}.fa-signal-messenger{--fa:"\e663"}.fa-paypal{--fa:"\f1ed"}.fa-gitlab{--fa:"\f296"}.fa-typo3{--fa:"\f42b"}.fa-reddit-alien{--fa:"\f281"}.fa-yahoo{--fa:"\f19e"}.fa-dailymotion{--fa:"\e052"}.fa-affiliatetheme{--fa:"\f36b"}.fa-pied-piper-pp{--fa:"\f1a7"}.fa-bootstrap{--fa:"\f836"}.fa-odnoklassniki{--fa:"\f263"}.fa-nfc-symbol{--fa:"\e531"}.fa-mintbit{--fa:"\e62f"}.fa-ethereum{--fa:"\f42e"}.fa-speaker-deck{--fa:"\f83c"}.fa-creative-commons-nc-eu{--fa:"\f4e9"}.fa-patreon{--fa:"\f3d9"}.fa-avianex{--fa:"\f374"}.fa-ello{--fa:"\f5f1"}.fa-gofore{--fa:"\f3a7"}.fa-bimobject{--fa:"\f378"}.fa-brave-reverse{--fa:"\e63d"}.fa-facebook-f{--fa:"\f39e"}.fa-google-plus-square,.fa-square-google-plus{--fa:"\f0d4"}.fa-web-awesome{--fa:"\e682"}.fa-mandalorian{--fa:"\f50f"}.fa-first-order-alt{--fa:"\f50a"}.fa-osi{--fa:"\f41a"}.fa-google-wallet{--fa:"\f1ee"}.fa-d-and-d-beyond{--fa:"\f6ca"}.fa-periscope{--fa:"\f3da"}.fa-fulcrum{--fa:"\f50b"}.fa-cloudscale{--fa:"\f383"}.fa-forumbee{--fa:"\f211"}.fa-mizuni{--fa:"\f3cc"}.fa-schlix{--fa:"\f3ea"}.fa-square-xing,.fa-xing-square{--fa:"\f169"}.fa-bandcamp{--fa:"\f2d5"}.fa-wpforms{--fa:"\f298"}.fa-cloudversify{--fa:"\f385"}.fa-usps{--fa:"\f7e1"}.fa-megaport{--fa:"\f5a3"}.fa-magento{--fa:"\f3c4"}.fa-spotify{--fa:"\f1bc"}.fa-optin-monster{--fa:"\f23c"}.fa-fly{--fa:"\f417"}.fa-square-bluesky{--fa:"\e6a3"}.fa-aviato{--fa:"\f421"}.fa-itunes{--fa:"\f3b4"}.fa-cuttlefish{--fa:"\f38c"}.fa-blogger{--fa:"\f37c"}.fa-flickr{--fa:"\f16e"}.fa-viber{--fa:"\f409"}.fa-soundcloud{--fa:"\f1be"}.fa-digg{--fa:"\f1a6"}.fa-tencent-weibo{--fa:"\f1d5"}.fa-letterboxd{--fa:"\e62d"}.fa-symfony{--fa:"\f83d"}.fa-maxcdn{--fa:"\f136"}.fa-etsy{--fa:"\f2d7"}.fa-facebook-messenger{--fa:"\f39f"}.fa-audible{--fa:"\f373"}.fa-think-peaks{--fa:"\f731"}.fa-bilibili{--fa:"\e3d9"}.fa-erlang{--fa:"\f39d"}.fa-x-twitter{--fa:"\e61b"}.fa-cotton-bureau{--fa:"\f89e"}.fa-dashcube{--fa:"\f210"}.fa-42-group,.fa-innosoft{--fa:"\e080"}.fa-stack-exchange{--fa:"\f18d"}.fa-elementor{--fa:"\f430"}.fa-pied-piper-square,.fa-square-pied-piper{--fa:"\e01e"}.fa-creative-commons-nd{--fa:"\f4eb"}.fa-palfed{--fa:"\f3d8"}.fa-superpowers{--fa:"\f2dd"}.fa-resolving{--fa:"\f3e7"}.fa-xbox{--fa:"\f412"}.fa-square-web-awesome-stroke{--fa:"\e684"}.fa-searchengin{--fa:"\f3eb"}.fa-tiktok{--fa:"\e07b"}.fa-facebook-square,.fa-square-facebook{--fa:"\f082"}.fa-renren{--fa:"\f18b"}.fa-linux{--fa:"\f17c"}.fa-glide{--fa:"\f2a5"}.fa-linkedin{--fa:"\f08c"}.fa-hubspot{--fa:"\f3b2"}.fa-deploydog{--fa:"\f38e"}.fa-twitch{--fa:"\f1e8"}.fa-flutter{--fa:"\e694"}.fa-ravelry{--fa:"\f2d9"}.fa-mixer{--fa:"\e056"}.fa-lastfm-square,.fa-square-lastfm{--fa:"\f203"}.fa-vimeo{--fa:"\f40a"}.fa-mendeley{--fa:"\f7b3"}.fa-uniregistry{--fa:"\f404"}.fa-figma{--fa:"\f799"}.fa-creative-commons-remix{--fa:"\f4ee"}.fa-cc-amazon-pay{--fa:"\f42d"}.fa-dropbox{--fa:"\f16b"}.fa-instagram{--fa:"\f16d"}.fa-cmplid{--fa:"\e360"}.fa-upwork{--fa:"\e641"}.fa-facebook{--fa:"\f09a"}.fa-gripfire{--fa:"\f3ac"}.fa-jedi-order{--fa:"\f50e"}.fa-uikit{--fa:"\f403"}.fa-fort-awesome-alt{--fa:"\f3a3"}.fa-phabricator{--fa:"\f3db"}.fa-ussunnah{--fa:"\f407"}.fa-earlybirds{--fa:"\f39a"}.fa-trade-federation{--fa:"\f513"}.fa-autoprefixer{--fa:"\f41c"}.fa-whatsapp{--fa:"\f232"}.fa-square-upwork{--fa:"\e67c"}.fa-slideshare{--fa:"\f1e7"}.fa-google-play{--fa:"\f3ab"}.fa-viadeo{--fa:"\f2a9"}.fa-line{--fa:"\f3c0"}.fa-google-drive{--fa:"\f3aa"}.fa-servicestack{--fa:"\f3ec"}.fa-simplybuilt{--fa:"\f215"}.fa-bitbucket{--fa:"\f171"}.fa-imdb{--fa:"\f2d8"}.fa-deezer{--fa:"\e077"}.fa-raspberry-pi{--fa:"\f7bb"}.fa-jira{--fa:"\f7b1"}.fa-docker{--fa:"\f395"}.fa-screenpal{--fa:"\e570"}.fa-bluetooth{--fa:"\f293"}.fa-gitter{--fa:"\f426"}.fa-d-and-d{--fa:"\f38d"}.fa-microblog{--fa:"\e01a"}.fa-cc-diners-club{--fa:"\f24c"}.fa-gg-circle{--fa:"\f261"}.fa-pied-piper-hat{--fa:"\f4e5"}.fa-kickstarter-k{--fa:"\f3bc"}.fa-yandex{--fa:"\f413"}.fa-readme{--fa:"\f4d5"}.fa-html5{--fa:"\f13b"}.fa-sellsy{--fa:"\f213"}.fa-square-web-awesome{--fa:"\e683"}.fa-sass{--fa:"\f41e"}.fa-wirsindhandwerk,.fa-wsh{--fa:"\e2d0"}.fa-buromobelexperte{--fa:"\f37f"}.fa-salesforce{--fa:"\f83b"}.fa-octopus-deploy{--fa:"\e082"}.fa-medapps{--fa:"\f3c6"}.fa-ns8{--fa:"\f3d5"}.fa-pinterest-p{--fa:"\f231"}.fa-apper{--fa:"\f371"}.fa-fort-awesome{--fa:"\f286"}.fa-waze{--fa:"\f83f"}.fa-bluesky{--fa:"\e671"}.fa-cc-jcb{--fa:"\f24b"}.fa-snapchat,.fa-snapchat-ghost{--fa:"\f2ab"}.fa-fantasy-flight-games{--fa:"\f6dc"}.fa-rust{--fa:"\e07a"}.fa-wix{--fa:"\f5cf"}.fa-behance-square,.fa-square-behance{--fa:"\f1b5"}.fa-supple{--fa:"\f3f9"}.fa-webflow{--fa:"\e65c"}.fa-rebel{--fa:"\f1d0"}.fa-css3{--fa:"\f13c"}.fa-staylinked{--fa:"\f3f5"}.fa-kaggle{--fa:"\f5fa"}.fa-space-awesome{--fa:"\e5ac"}.fa-deviantart{--fa:"\f1bd"}.fa-cpanel{--fa:"\f388"}.fa-goodreads-g{--fa:"\f3a9"}.fa-git-square,.fa-square-git{--fa:"\f1d2"}.fa-square-tumblr,.fa-tumblr-square{--fa:"\f174"}.fa-trello{--fa:"\f181"}.fa-creative-commons-nc-jp{--fa:"\f4ea"}.fa-get-pocket{--fa:"\f265"}.fa-perbyte{--fa:"\e083"}.fa-grunt{--fa:"\f3ad"}.fa-weebly{--fa:"\f5cc"}.fa-connectdevelop{--fa:"\f20e"}.fa-leanpub{--fa:"\f212"}.fa-black-tie{--fa:"\f27e"}.fa-themeco{--fa:"\f5c6"}.fa-python{--fa:"\f3e2"}.fa-android{--fa:"\f17b"}.fa-bots{--fa:"\e340"}.fa-free-code-camp{--fa:"\f2c5"}.fa-hornbill{--fa:"\f592"}.fa-js{--fa:"\f3b8"}.fa-ideal{--fa:"\e013"}.fa-git{--fa:"\f1d3"}.fa-dev{--fa:"\f6cc"}.fa-sketch{--fa:"\f7c6"}.fa-yandex-international{--fa:"\f414"}.fa-cc-amex{--fa:"\f1f3"}.fa-uber{--fa:"\f402"}.fa-github{--fa:"\f09b"}.fa-php{--fa:"\f457"}.fa-alipay{--fa:"\f642"}.fa-youtube{--fa:"\f167"}.fa-skyatlas{--fa:"\f216"}.fa-firefox-browser{--fa:"\e007"}.fa-replyd{--fa:"\f3e6"}.fa-suse{--fa:"\f7d6"}.fa-jenkins{--fa:"\f3b6"}.fa-twitter{--fa:"\f099"}.fa-rockrms{--fa:"\f3e9"}.fa-pinterest{--fa:"\f0d2"}.fa-buffer{--fa:"\f837"}.fa-npm{--fa:"\f3d4"}.fa-yammer{--fa:"\f840"}.fa-btc{--fa:"\f15a"}.fa-dribbble{--fa:"\f17d"}.fa-stumbleupon-circle{--fa:"\f1a3"}.fa-internet-explorer{--fa:"\f26b"}.fa-stubber{--fa:"\e5c7"}.fa-telegram,.fa-telegram-plane{--fa:"\f2c6"}.fa-old-republic{--fa:"\f510"}.fa-odysee{--fa:"\e5c6"}.fa-square-whatsapp,.fa-whatsapp-square{--fa:"\f40c"}.fa-node-js{--fa:"\f3d3"}.fa-edge-legacy{--fa:"\e078"}.fa-slack,.fa-slack-hash{--fa:"\f198"}.fa-medrt{--fa:"\f3c8"}.fa-usb{--fa:"\f287"}.fa-tumblr{--fa:"\f173"}.fa-vaadin{--fa:"\f408"}.fa-quora{--fa:"\f2c4"}.fa-square-x-twitter{--fa:"\e61a"}.fa-reacteurope{--fa:"\f75d"}.fa-medium,.fa-medium-m{--fa:"\f23a"}.fa-amilia{--fa:"\f36d"}.fa-mixcloud{--fa:"\f289"}.fa-flipboard{--fa:"\f44d"}.fa-viacoin{--fa:"\f237"}.fa-critical-role{--fa:"\f6c9"}.fa-sitrox{--fa:"\e44a"}.fa-discourse{--fa:"\f393"}.fa-joomla{--fa:"\f1aa"}.fa-mastodon{--fa:"\f4f6"}.fa-airbnb{--fa:"\f834"}.fa-wolf-pack-battalion{--fa:"\f514"}.fa-buy-n-large{--fa:"\f8a6"}.fa-gulp{--fa:"\f3ae"}.fa-creative-commons-sampling-plus{--fa:"\f4f1"}.fa-strava{--fa:"\f428"}.fa-ember{--fa:"\f423"}.fa-canadian-maple-leaf{--fa:"\f785"}.fa-teamspeak{--fa:"\f4f9"}.fa-pushed{--fa:"\f3e1"}.fa-wordpress-simple{--fa:"\f411"}.fa-nutritionix{--fa:"\f3d6"}.fa-wodu{--fa:"\e088"}.fa-google-pay{--fa:"\e079"}.fa-intercom{--fa:"\f7af"}.fa-zhihu{--fa:"\f63f"}.fa-korvue{--fa:"\f42f"}.fa-pix{--fa:"\e43a"}.fa-steam-symbol{--fa:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}

/* === css/fonts.css === */
/* Font utility classes resolve through the canonical family tokens
   (defined in theme_tokens.css): --font-serif = Playfair Display,
   --font-sans = Montserrat. Single source of truth for the type system. */
.playfair-display-italic {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: italic;
}

/* Legacy Libre Baskerville hooks now resolve to the single brand serif.
   Class names kept to avoid touching consuming markup. */
.libre-baskerville-regular {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: normal;
}

.libre-baskerville-bold {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: normal;
}

.montserrat {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* === css/navbar_base.css === */
#navbar {
    width: 100%;
    top: 0;
    left: 0;
    padding: 20px;
}

body.logged-out #navbar,
body.logged-out #navbar a,
body.logged-out #navbar span,
body.logged-out #navbar i,
body.logged-out #navbar button {
    color: var(--secondary-color);
}

.navbar-sector {
    display: inline-block;
}

#controllers {
    position: fixed;
    left: 0;
    top: calc(var(--timeline-viewport-top, 0px) + (var(--timeline-viewport-height, 100vh) / 2));
    transform: translateY(-50%);
    background-color: var(--chrome-ink, var(--primary-color));
    border-radius: 0 14px 14px 0;
    box-shadow: var(--chrome-shadow, 2px 8px 12px rgba(0, 0, 0, 0.7));
    z-index: 120;
    border: 1px solid var(--chrome-ink-edge, var(--primary-color));
    border-left: 0;
    touch-action: none;
    overscroll-behavior: none;
}

.controller-group-divider {
    height: 1px;
    margin: 3px 6px;
    background-color: var(--app-background);
    opacity: 0.25;
}

#controllers button {
    margin-right: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--app-background);
    width: 100%;
    border-width: 1px;
}

#controllers .selection-mode-option span {
    white-space: nowrap;
}

#controllers .controllerBtnContainer:first-child button {
    border-top-right-radius: 12px;
}

#controllers.readonly-controls #zoom-in {
    border-top-right-radius: 12px;
}

#controllers .controllerBtnContainer:last-child button {
    margin-bottom: 0;
    border-bottom-right-radius: 12px;
}

#controllers.readonly-controls #lifeos-filter-toggle {
    margin-bottom: 0;
    border-bottom-right-radius: 12px;
}

/* ── Calendar & List views: collapse timeline-only controls ──────────
   Selection mode, zoom in/out, zoom presets, scroll-to-today and optimize
   layout act on the SVG timeline, which isn't rendered in these views.
   Rather than snap them away with display:none, collapse their height and
   fade them out so the rail resizes smoothly between views.

   The button containers collapse via an animatable grid row (1fr -> 0fr):
   1fr resolves to the real content height, so there's no max-height
   overshoot/settle (which made the expand stutter). The container stays
   overflow:visible so tooltips and popout panels (selection / zoom-preset)
   escape in timeline; only the button itself gets overflow:hidden while
   collapsed, so its content is clipped as the row shrinks. */
.controllerBtnContainer:has(> #selection-toggle),
.controllerBtnContainer:has(> #zoom-in),
.controllerBtnContainer:has(> #zoom-out),
.controllerBtnContainer:has(> #zoom-preset-toggle),
.controllerBtnContainer:has(> #today),
.controllerBtnContainer:has(> #optimize-timeline-btn) {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.25s ease, opacity 0.25s ease, visibility 0s;
}

/* The button (sole in-flow grid item) must be allowed to shrink to zero. */
.controllerBtnContainer:has(> #selection-toggle) > button,
.controllerBtnContainer:has(> #zoom-in) > button,
.controllerBtnContainer:has(> #zoom-out) > button,
.controllerBtnContainer:has(> #zoom-preset-toggle) > button,
.controllerBtnContainer:has(> #today) > button,
.controllerBtnContainer:has(> #optimize-timeline-btn) > button {
    min-height: 0;
}

/* Dividers are only 1px tall, so a simple max-height collapse is smooth. */
#divider-mode-zoom,
#divider-zoom-view,
#divider-optimize-undo {
    max-height: 12px;
    opacity: 1;
    overflow: hidden;
    visibility: visible;
    transition: max-height 0.25s ease, opacity 0.25s ease,
                margin 0.25s ease, visibility 0s;
}

body.view-calendar .controllerBtnContainer:has(> #selection-toggle),
body.view-list     .controllerBtnContainer:has(> #selection-toggle),
body.view-calendar .controllerBtnContainer:has(> #zoom-in),
body.view-list     .controllerBtnContainer:has(> #zoom-in),
body.view-calendar .controllerBtnContainer:has(> #zoom-out),
body.view-list     .controllerBtnContainer:has(> #zoom-out),
body.view-calendar .controllerBtnContainer:has(> #zoom-preset-toggle),
body.view-list     .controllerBtnContainer:has(> #zoom-preset-toggle),
body.view-calendar .controllerBtnContainer:has(> #today),
body.view-list     .controllerBtnContainer:has(> #today),
body.view-calendar .controllerBtnContainer:has(> #optimize-timeline-btn),
body.view-list     .controllerBtnContainer:has(> #optimize-timeline-btn) {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* delay visibility:hidden until the collapse finishes; on expand the
       base rule restores visibility immediately. */
    transition: grid-template-rows 0.25s ease, opacity 0.25s ease,
                visibility 0s 0.25s;
}

/* Clip the button content while its grid row collapses. */
body.view-calendar .controllerBtnContainer:has(> #selection-toggle) > button,
body.view-list     .controllerBtnContainer:has(> #selection-toggle) > button,
body.view-calendar .controllerBtnContainer:has(> #zoom-in) > button,
body.view-list     .controllerBtnContainer:has(> #zoom-in) > button,
body.view-calendar .controllerBtnContainer:has(> #zoom-out) > button,
body.view-list     .controllerBtnContainer:has(> #zoom-out) > button,
body.view-calendar .controllerBtnContainer:has(> #zoom-preset-toggle) > button,
body.view-list     .controllerBtnContainer:has(> #zoom-preset-toggle) > button,
body.view-calendar .controllerBtnContainer:has(> #today) > button,
body.view-list     .controllerBtnContainer:has(> #today) > button,
body.view-calendar .controllerBtnContainer:has(> #optimize-timeline-btn) > button,
body.view-list     .controllerBtnContainer:has(> #optimize-timeline-btn) > button {
    overflow: hidden;
}

body.view-calendar #divider-mode-zoom,
body.view-list     #divider-mode-zoom,
body.view-calendar #divider-zoom-view,
body.view-list     #divider-zoom-view,
body.view-calendar #divider-optimize-undo,
body.view-list     #divider-optimize-undo {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.25s ease,
                margin 0.25s ease, visibility 0s 0.25s;
}

/* Round the now-topmost control (undo) to match the rail's corner. */
body.view-calendar .controllerBtnContainer:has(> #sidebar-undo-btn) button,
body.view-list     .controllerBtnContainer:has(> #sidebar-undo-btn) button {
    border-top-right-radius: 12px;
}

#controllers button:hover {
    background-color: var(--app-background);
    color: var(--primary-color) !important;
    transform: none;
    width: 100%;
}

#controllers button:hover i,
#controllers button:hover span:not(.tooltip-text) {
    color: var(--primary-color) !important;
}

#controllers button:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.lifeos-quickadd-panel button:hover:first-child {
    border-top-right-radius: 8px !important;
}

.lifeos-quickadd-panel button:hover:last-child {
    border-bottom-right-radius: 8px !important;
}

/* Navigátor tooltip */

.navigator-tooltip {
    position: relative;
    display: inline-block;
}

.navigator-tooltip .tooltip-text {
    font-size: 16px;
    visibility: hidden;
    background-color: var(--primary-color);
    color: var(--app-background);
    padding: 5px 10px;
    border: 2px solid var(--app-background);
    border-radius: 5px;
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .5s;
    z-index: 140;
}

.tooltip-right {
    text-align: left;
    top: 3px;
    left: 52px;
}

.tooltip-bottom {
    text-align: center;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.navigator-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* === css/navbar_entity_tools.css === */
/* Navbar top */

/* Entity tools dropdown */
.entity-tools-container {
    position: relative;
    top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#entity-tools-toggle {
    background-color: transparent;
    color: var(--app-background);
    padding: 5px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease;
}

#entity-tools-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ── Shared button (standalone, top-right by the avatar) ── */
.shared-nav-btn {
    background-color: transparent;
    color: var(--app-background);
    padding: 5px 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    font-size: 18px;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.shared-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.shared-nav-btn:hover i {
    transform: scale(1.1);
    transition: transform 0.15s ease;
}

/* Unread-count badge (reuses global .badge, pinned to the icon corner) */
.shared-nav-btn .badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    background: var(--accent-notification);
    color: var(--text-on-accent);
    border-radius: 9px;
    font-weight: 600;
    box-sizing: border-box;
}

/* Notification indicator */
/* .shared-nav-btn.has-notifications i {
    color: var(--accent-notification-soft);
} */

/* Notification dot indicator */
.shared-nav-btn .notification-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--accent-notification);
    border-radius: 50%;
    animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.entity-tools-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    transform: none;
    width: max-content;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface-panel-dark);
    color: var(--text-on-dark);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    z-index: 150;
    padding: 0;
}

/* Animated flyout state (enabled by JS via .panel-anim-ready) */
.entity-tools-panel.panel-anim-ready {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top left;
    transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.78, 0.22, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.entity-tools-panel.panel-anim-ready.panel-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#entity-tools-panel .entity-tools-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-on-dark);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease;
    border-radius: 0;
    height: auto;
}

#entity-tools-panel .entity-tools-option i {
    width: 18px;
    text-align: center;
}

#entity-tools-panel .entity-tools-option:hover {
    background-color: var(--hover-overlay-dark);
    color: var(--text-on-dark);
}

/* Match timeline dropdown selected behavior */
#entity-tools-panel .entity-tools-option.active {
    background-color: var(--hover-overlay-dark-strong);
    color: var(--text-on-dark);
}

#entity-tools-panel .entity-tools-option.active:hover {
    background-color: var(--hover-overlay-dark-strong);
    color: var(--text-on-dark);
}

/* Badge inside panel options */
.entity-tools-option .panel-badge {
    margin-left: auto;
    background: var(--accent-notification);
    color: var(--text-on-accent);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* Section grouping inside the Panels dropdown (Content / Taxonomy) */
.entity-tools-section-label {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-dark);
    opacity: 0.55;
    user-select: none;
    pointer-events: none;
}

.entity-tools-divider {
    height: 1px;
    margin: 6px 0 0;
    background: rgba(255, 255, 255, 0.10);
}

/* First label sits flush with the panel's top radius */
#entity-tools-panel .entity-tools-section-label:first-child {
    padding-top: 10px;
    border-radius: 10px 10px 0 0;
}

/* === css/navbar_timeline_selector.css === */
/* Unified timeline selector */
.nav-row {
    position: relative;
    min-height: 36px;
}

.timeline-selector-unified {
    display: flex;
    align-items: stretch;
    margin-top: 12px;
    /* Paint the row itself so slots left by visibility:hidden children (the
       info button in the "no timelines" state) stay light instead of exposing
       the dark card behind. Radius mirrors the card's bottom corners. */
    background-color: var(--app-background);
    border-radius: 0 0 12px 12px;
}

.timeline-select-container.drag-info-active .nav-row {
    visibility: hidden;
    pointer-events: none;
}

.drag-info-panel {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px;
    background: var(--app-background);
    color: var(--primary-color);
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: absolute;
    inset: 4px;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.timeline-select-container.drag-info-active .drag-info-panel {
    display: flex;
}

.drag-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    font-size: 12px;
}

.drag-info-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.drag-info-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 12px;
}

.drag-info-type i {
    font-size: 12px;
}

.drag-info-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

.drag-info-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.drag-info-label {
    opacity: 0.7;
}

.timeline-unified-btn {
    background-color: var(--app-background);
    color: var(--primary-color);
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.timeline-unified-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.timeline-unified-btn:last-child {
    border-radius: 0 8px 8px 0;
}

#newTimeline {
    border-radius: 8px 0 0 8px;
    height: 30px;
}

#newTimeline:hover {
    transform: scale(1.05);
}

#navbarRight {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 30px;
    padding-top: 15px;
}

.timeline-select-conatiner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 5;
    box-shadow: var(--chrome-shadow, 2px 8px 12px rgba(0, 0, 0, 0.7));
    background-color: var(--chrome-ink, var(--primary-color));
    border: 1px solid var(--chrome-ink-edge, transparent);
    border-top: 0;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 4px;
}


.timeline-container-separator {
    margin-left: -6px;
    width: calc(100% + 12px);
    color: transparent;
    margin: 5px 0;
}

.timeline-selector-wrapper {
    position: relative;
    min-width: 200px;
}

#timelineSelectorDisplay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0px 12px;
    background-color: var(--app-background);
    color: var(--primary-color);
    cursor: pointer;
    user-select: none;
    min-width: 200px;
    max-width: 350px;
    height: 30px;
    font-weight: 600;
    font-size: 12px;
}

#timelineInfo {
    height: 30px;
}

/* Public view: fix text color contrast. body.logged-out turns all navbar text
   white via "body.logged-out #navbar button/span/i { color: var(--secondary-color) }".
   The unified selector is a transparent "tray" sitting on the bar (whose fill is
   --primary-color), so the correct contrast colour is --app-background — light text
   on a dark bar, dark text on a light bar. Using --primary-color here broke under
   scheme-black, where --primary-color equals the dark bar itself (dark-on-dark).
   Keep the +/info buttons transparent so they read as part of the tray, not as
   solid boxes. Use !important to beat the body.logged-out #navbar specificity. */
body.logged-out #navbar .timeline-select-conatiner #timelineSelectorDisplay,
body.logged-out #navbar .timeline-select-conatiner #timelineSelectorDisplay span,
body.logged-out #navbar .timeline-select-conatiner #timelineSelectorDisplay i {
    color: var(--app-background) !important;
}

body.logged-out #navbar .timeline-select-conatiner .timeline-unified-btn {
    color: var(--app-background) !important;
    background-color: transparent !important;
}

body.logged-out #navbar .timeline-select-conatiner .timeline-unified-btn i,
body.logged-out #navbar .timeline-select-conatiner .timeline-unified-btn span {
    color: var(--app-background) !important;
}

body.logged-out #navbar #timelineSelectorDisplay {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

body.logged-out #navbar .timeline-select-conatiner .lifeos-view-btn {
    color: var(--app-background) !important;
}

body.logged-out #navbar .timeline-select-conatiner .lifeos-view-btn.active {
    color: var(--app-background) !important;
}

body.logged-out #navbar .timeline-select-conatiner .view-buttons,
body.logged-out #navbar .timeline-select-conatiner .view-buttons button,
body.logged-out #navbar .timeline-select-conatiner .view-buttons i,
body.logged-out #navbar .timeline-select-conatiner .view-buttons span {
    color: var(--app-background) !important;
}

#timelineSelectorLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface-panel-dark);
    color: var(--text-on-dark);
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    z-index: 150;
    display: none;
}

.timeline-dropdown.open {
    display: block;
}

.timeline-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.timeline-dropdown-item i {
    width: 18px;
    text-align: center;
}

.timeline-dropdown-item:hover,
.timeline-dropdown-item.drag-over {
    background: var(--hover-overlay-dark);
}

.timeline-dropdown-item.selected {
    background: var(--hover-overlay-dark-strong);
}

#timelineSelector {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Timeline unified buttons are now handled by .timeline-unified-btn */

.shared-view-banner {
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    margin: 14px auto 0;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
    z-index: 200;
}

.shared-view-banner button {
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-color);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.shared-view-banner button:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.shared-view-banner__text {
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.shared-view-banner__text strong {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.shared-view-banner__text span {
    font-size: 14px;
    opacity: 0.9;
}

.shared-view-banner__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shared-view-banner__action {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--secondary-color);
    font-weight: 600;
    padding: 6px 14px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.shared-view-banner__action:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* While any onboarding/tour overlay runs, the banner would sit on top of the
   spotlight — hide it completely. */
body.onboarding-active .shared-view-banner {
    display: none;
}

/* Public demo view (?tour=1): demote the banner from a centre-stage card to a
   quiet bottom-left pill so it doesn't compete with the timeline. */
body.public-demo-tour .shared-view-banner {
    left: 18px;
    bottom: 18px;
    transform: none;
    margin: 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

body.public-demo-tour .shared-view-banner:hover {
    opacity: 1;
}

body.public-demo-tour .shared-view-banner__text,
body.public-demo-tour .shared-view-banner > br {
    display: none;
}

body.public-demo-tour .shared-view-banner__action {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}

/* === css/navbar_selection_bar.css === */
/* [ÚJ] Selection action bar – a timeline selector alatt, ugyanazzal az árnyékkal */
#selection-action-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70px; /* a selector alatt */
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 9px;
    box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.7);
    padding: 6px 10px;
    /* z-index: -1; */
}

.selection-action-btn {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0 6px;
    cursor: pointer;
}

.selection-action-btn:not(:disabled):hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
/* Biztonsági háló: ha mégis disabled elemre érkezne hover, ne változzon a stílus */
.selection-action-btn[disabled]:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Disabled állapot vizuális jelölése */
.selection-action-btn:disabled,
.selection-action-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

#messages i {
    margin: 7px;
    color: var(--app-background);
}

#messages {
    transition: scale 0.2s ease;
}

#messages:hover {
    scale: 1.2;
}

#messagesNumber {
    color: var(--app-background);
}

.select-label {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-color);
    font-weight: 700;
}

#controllerLabel {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%) rotate(270deg);
    color: var(--primary-color);
    font-weight: 700;
}

#full-scope,
#year-scope {
    font-size: 16px;
    padding-left: 6px;
}

/* === css/navbar_panels.css === */
/* Zoom preset panel (kinyíló opciós sáv) */
.controllerBtnContainer {
    position: relative;
}

.zoom-preset-panel {
    position: absolute;
    left: 55px;
    top: 0;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    touch-action: none;
    overscroll-behavior: none;
}

.zoom-preset-panel.panel-anim-ready {
    opacity: 0;
    transform: translateX(-6px) scale(0.985);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.78, 0.22, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.zoom-preset-panel.panel-anim-ready.panel-open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.zoom-preset-option {
    display: flex;
    align-items: center;
    gap: 12px;
    /* width: 100%; */
    padding: 10px 12px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.zoom-preset-option:last-child {
    margin-bottom: 0 !important;
}

.zoom-preset-option:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    transform: translateX(3px);
}

.zoom-preset-option:hover i,
.zoom-preset-option:hover span {
    color: var(--primary-color) !important;
}

.zoom-preset-option.active {
    background-color: var(--app-background) !important;
    color: var(--primary-color) !important;
}

.zoom-preset-option.active i,
.zoom-preset-option.active span {
    color: var(--primary-color) !important;
}

.zoom-preset-option.active:first-child {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.zoom-preset-option.active:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.zoom-preset-option:first-child:hover {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.zoom-preset-option:last-child:hover {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    margin-bottom: 0 !important;
}

.zoom-preset-option i {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

.zoom-preset-option span {
    white-space: nowrap;
}

#zoom-preset-toggle {
    position: relative;
}

#zoom-preset-toggle::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transform: rotate(-45deg);
}

#zoom-preset-toggle[aria-pressed="true"] {
    background-color: var(--app-background) !important;
    color: var(--primary-color) !important;
}

#zoom-preset-toggle[aria-pressed="true"] i,
#zoom-preset-toggle[aria-pressed="true"] span {
    color: var(--primary-color) !important;
}

.lifeos-quickadd-panel {
    position: absolute;
    left: 55px;
    top: -100px;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    min-width: 170px;
    touch-action: none;
    overscroll-behavior: none;
}

.lifeos-quickadd-panel.panel-anim-ready {
    opacity: 0;
    transform: translateX(-6px) scale(0.985);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.78, 0.22, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.lifeos-quickadd-panel.panel-anim-ready.panel-open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .entity-tools-panel.panel-anim-ready,
    .zoom-preset-panel.panel-anim-ready,
    .lifeos-quickadd-panel.panel-anim-ready {
        transition: none;
        transform: none;
    }
}

.lifeos-quickadd-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 4px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: left;
    border-radius: 0 !important;
}

.lifeos-quickadd-option:first-child {
    border-top-left-radius: 8px !important;
}

.lifeos-quickadd-option:last-child {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 8px !important;
}

.lifeos-quickadd-option:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    transform: translateX(3px);
}

.lifeos-quickadd-option i {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

#lifeos-quickadd-toggle {
    position: relative;
}

#lifeos-quickadd-toggle::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transform: rotate(-45deg);
}

#lifeos-quickadd-toggle[aria-pressed="true"]::after {
    opacity: 0.9;
}

#lifeos-quickadd-toggle[aria-pressed="true"] {
    background-color: var(--app-background) !important;
    color: var(--primary-color) !important;
}

/* Selection Mode Panel */
.selection-mode-panel {
    position: absolute;
    left: 55px;
    top: -10px;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    touch-action: none;
    overscroll-behavior: none;
}

.selection-context-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    display: none;
    max-height: calc(100vh - 24px);
    overflow: hidden;

    background: var(--ctx-menu-bg, #191919);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: var(--ctx-menu-shadow, 0 16px 48px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45));
    min-width: 216px;
    padding: 4px 0;
    touch-action: none;
    overscroll-behavior: none;
}

/* Override button styles */
.selection-context-menu .selection-mode-option {
    color: var(--ctx-menu-text, rgba(255, 255, 255, 0.82));
    gap: 10px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 450;
    border-radius: 0 !important;
}

.selection-context-menu .selection-mode-option:first-child {
    border-radius: 0 !important;
}

.selection-context-menu .selection-mode-option:last-child:hover {
    border-radius: 0 !important;
}

.selection-context-menu .selection-mode-option i {
    color: var(--ctx-menu-icon, color-mix(in srgb, var(--primary-color) 60%, rgba(255, 255, 255, 0.5)));
    font-size: 13px;
    min-width: 18px;
}

.selection-context-menu .selection-mode-option:hover {
    background: var(--ctx-menu-hover-bg, color-mix(in srgb, var(--primary-color) 16%, transparent));
    color: var(--primary-color);
}

.selection-context-menu .selection-mode-option:hover i {
    color: var(--primary-color);
}

.selection-context-menu .selection-mode-option:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.selection-context-menu .selection-mode-option:disabled:hover {
    background: var(--ctx-menu-disabled-hover-bg, transparent);
    color: var(--ctx-menu-text-muted, rgba(255, 255, 255, 0.28));
}

.selection-context-menu .selection-mode-option:disabled:hover i {
    color: var(--ctx-menu-icon, color-mix(in srgb, var(--primary-color) 60%, rgba(255, 255, 255, 0.5)));
}

.selection-context-menu .selection-mode-option.danger-option {
    color: var(--accent-delete);
}

.selection-context-menu .selection-mode-option.danger-option i {
    color: var(--accent-delete);
}

.selection-context-menu .selection-mode-option.danger-option:hover {
    background: rgba(255, 72, 0, 0.10);
    color: var(--accent-delete);
}

.selection-context-menu .selection-mode-option.danger-option:hover i {
    color: var(--accent-delete);
}

.selection-context-menu .selection-mode-divider {
    background: var(--ctx-menu-divider, rgba(255, 255, 255, 0.07));
    opacity: 1;
    margin: 3px 0;
}

/* Undo/Redo row: side-by-side with centered content */
.selection-context-menu .selection-undo-redo-row {
    display: flex;
}

.selection-context-menu .selection-undo-redo-row .selection-mode-option {
    flex: 1;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
}

.selection-context-menu .selection-undo-redo-row .undo-redo-option:first-child {
    border-right: 1px solid var(--ctx-menu-separator-line, rgba(255, 255, 255, 0.07));
}
.selection-mode-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-right: 0;
    background-color: transparent;
    color: var(--app-background);
    border: none;
    border-radius: 0px !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}

.selection-mode-option:first-child {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

.selection-mode-option:last-child {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.selection-mode-option:last-child:hover {
    border-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.undo-redo-option:hover {
    border-radius: 0 !important;
}

.undo-redo-option:last-child:hover {
    border-radius: 0 !important;
}

.selection-mode-option:hover {
    background-color: var(--app-background);
    color: var(--primary-color);
}

.selection-mode-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.selection-mode-option:disabled:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.selection-mode-option.danger-option .fa-trash-alt {
    color: var(--accent-delete);
}

.selection-mode-option i {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

.selection-mode-option.mode-option.active {
    background-color: var(--app-background) !important;
    color: var(--primary-color) !important;
    /* border-radius: 8px !important; */
    /* font-weight: 700; */
}

.selection-mode-divider {
    height: 1px;
    background-color: var(--app-background);
    opacity: 0.5;
}

.selection-mode-option.action-option:disabled {
    opacity: 0.4;
}

#selection-toggle {
    position: relative;
}

#selection-toggle::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transform: rotate(-45deg);
}

#selection-toggle[aria-pressed="true"]::after {
    opacity: 0.9;
}

/* === css/modal_overlays.css === */
.modal-dark-bg {
  background-color: var(--modal-scrim) !important;
  pointer-events: auto;
}

/* Frosted warm scrim for every content dialog (login popup keeps its
   click-through look, so it opts out of the blur). */
.modal-dark-bg:not(#login-modal) {
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
  backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
}

#login-modal.modal-dark-bg {
  background-color: rgba(0, 0, 0, 0.4) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#loginInvalid,
#registrationError {
  margin-bottom: 30px;
}

/* Login modal: let background remain clickable while keeping the dialog interactive */
#login-modal {
  pointer-events: none;
}
#loginForm .modal-title,
#registrationForm .modal-title,
#forgotPasswordForm .modal-title,
#reset-password-modal .modal-title {
  margin-bottom: 20px;
}

/* Input fields in the login/registration modal need left margin
   to start after the absolutely-positioned form-icon (~50px wide).
   Keep width at calc(100% - 100px) to preserve the right gap for the eye-icon. */
#login-modal .input-group input,
#forgot-password-modal .input-group input {
  margin-left: 50px;
  width: calc(100% - 100px);
}

#login-modal.modal-dark-bg {
  pointer-events: none;
}

#login-modal .modal-content {
  pointer-events: auto;
}

/* Kifejezetten a törlés megerősítő modál mögé sötét átlátszó hátteret rakunk */
#deleteModal,
#delete-modal,
#tag-exists-modal,
#inboxDeleteModal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

/* Extend-project confirm modal: same overlay behavior as delete modal */
#extend-project-modal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  z-index: 20000;
}

#extend-project-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 520px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

#extendProjectModalButtons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  margin: 0 !important;
  margin-left: -1px !important;
  margin-top: 1px !important;
}

#deleteModal,
#delete-modal,
#tag-exists-modal {
  z-index: 20000;
}

#deleteModal .modal-content,
#delete-modal .modal-content,
#tag-exists-modal .modal-content {
  position: absolute;
  z-index: 20001;
}

/* Inbox remove confirmation must sit above #inboxModal (z-index: 20000) */
#inboxDeleteModal {
  z-index: 20020;
}

#inboxDeleteModal .modal-content {
  position: absolute;
  z-index: 20021;
}

/* Átlátszó fekete overlay a timeline modal mögé */
#timeline-modal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 100vh;
  padding: 24px 0 40px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Share modal: match timeline modal overlay strength */
#shareModal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

/* Keep overview dialogs above controller bars and the AI FAB. */
#inboxModal,
#task-overview-modal,
#sources-overview-modal,
#categories-overview-modal {
  z-index: 20000;
}

#inboxModal .modal-content,
#task-overview-modal .modal-content,
#sources-overview-modal .modal-content,
#categories-overview-modal .modal-content {
  z-index: 20001;
}

/* Ensure category modals are above LifeOS modal backdrop (z-index: 9999) */
#add-category-modal,
#change-category-modal {
  z-index: 20010;
}

#add-category-modal .modal-content,
#change-category-modal .modal-content {
  z-index: 20011;
}

/* Add Category modal: match Sources/Task overview LifeOS-like container styling */
#add-category-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid var(--category-modal-accent, var(--primary-color));
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

#add-category-modal .lifeos-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#add-category-modal .lifeos-modal-header {
  background: var(--category-modal-accent, var(--primary-color));
  color: var(--category-modal-contrast, var(--app-background));
}

#add-category-modal .lifeos-modal-header h3 {
  color: inherit;
}

#add-category-modal #addCategoryModalButtons.modal-buttons {
  --modal-buttons-accent: var(--category-modal-accent, var(--primary-color));
  --modal-buttons-contrast: var(--category-modal-contrast, var(--app-background));
  margin: 0 !important;
  margin-left: -1px !important;
  margin-top: 1px !important;
}

/* Átlátszó fekete overlay az About/Help/Privacy/Data deletion/Terms/Contact modalok mögé */
#about-modal,
#help-modal,
#privacy-modal,
#data-deletion-modal,
#terms-modal,
#contact-modal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

#about-modal .modal-content h2,
#help-modal .modal-content h2,
#privacy-modal .modal-content h2,
#data-deletion-modal .modal-content h2,
#terms-modal .modal-content h2,
#contact-modal .modal-content h2 {
  margin-bottom: 20px;
}

#about-modal .modal-content,
#help-modal .modal-content,
#privacy-modal .modal-content,
#data-deletion-modal .modal-content,
#terms-modal .modal-content,
#contact-modal .modal-content {
  border: 1px solid var(--app-background);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

#about-modal .modal-buttons.one-button,
#help-modal .modal-buttons.one-button,
#privacy-modal .modal-buttons.one-button,
#data-deletion-modal .modal-buttons.one-button,
#terms-modal .modal-buttons.one-button,
#contact-modal .modal-buttons.one-button {
  --modal-buttons-accent: var(--app-background);
  --modal-buttons-contrast: var(--primary-color);
  background-color: var(--modal-buttons-accent);
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.18);
}

#about-modal .modal-buttons button,
#help-modal .modal-buttons button,
#privacy-modal .modal-buttons button,
#data-deletion-modal .modal-buttons button,
#terms-modal .modal-buttons button,
#contact-modal .modal-buttons button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
}

#about-modal-version {
  margin: 0 0 12px;
  text-align: right;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/* Értesítés/prompt modáloknál is halványítsuk a hátteret */
#notification-modal,
#prompt-modal {
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

#notification-modal,
#prompt-modal {
  z-index: 21000;
}

/* ===================================================================
   EDITORIAL SHEET — unify every scrim to the frosted warm overlay.
   Appended last so it wins over the per-id black rgba above.
   =================================================================== */
#timeline-modal,
#shareModal,
#deleteModal,
#delete-modal,
#tag-exists-modal,
#inboxDeleteModal,
#extend-project-modal,
#assign-project-modal,
#add-category-modal,
#change-category-modal,
#about-modal,
#help-modal,
#privacy-modal,
#data-deletion-modal,
#terms-modal,
#contact-modal,
#notification-modal,
#prompt-modal {
  background-color: var(--modal-scrim);
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
  backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
}

/* === css/modal_layout.css === */
/* Modál alapstílusai */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: auto;
  z-index: 10;
  touch-action: pan-y;
  overscroll-behavior: none;
}

.non-justify {
  text-align: left;
}

.modal-content {
  background-color: var(--primary-color);
  margin: 0 auto;
  padding: 25px;
  padding-bottom: 0;
  width: 95%;
  max-width: 500px;
  max-height: calc(100vh - 30px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--modal-radius);
  color: var(--app-background);
  line-height: 1.5;
  box-shadow: var(--modal-shadow);
  overflow: auto;
  pointer-events: auto;
  font-size: 12px;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* Centered overlay modals also use .lifeos-modal, whose default animation
   only translates on Y and would cancel the X centering transform. */
.modal:not(#timeline-modal) > .modal-content.lifeos-modal {
  animation: modal-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#timelineModalActions {
  margin-bottom: 20px;
}
/* Timeline modal: flex centering on the backdrop, LifeOS modal container styling on the content */
#timeline-modal {
  align-items: center;
  justify-content: center;
}

#timeline-modal .modal-content {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  margin: 0;
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

/* Share modal: match Timeline modal container styling */
#shareModal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

#shareModal .lifeos-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#shareModal .lifeos-modal-body {
  padding: 14px 16px;
}

#shareModal #shareModalButtons.modal-buttons {
  margin: 0 !important;
  margin-left: -1px !important;
  margin-top: 1px !important;
}

/* Prompt modal: match LifeOS modal container styling */
#prompt-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

#prompt-modal .lifeos-modal-header {
  background: var(--primary-color);
  color: var(--app-background);
}

#prompt-modal .lifeos-modal-header h3 {
  color: inherit;
}

#prompt-modal .lifeos-modal-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#notification-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 18px 20px 16px;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  text-align: center;
}

#notification-modal #notification-modal-title {
  margin: 0 0 14px;
}

#notification-modal #notification-modal-message {
  margin: 0 0 20px;
}

#notification-modal #notification-modal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 40px;
  margin: 0 auto;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

#notification-modal.notification-modal-danger .modal-content {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

#prompt-modal .lifeos-prompt-message {
  margin: 0;
}

#prompt-modal #prompt-modal-input {
  width: 100%;
  margin: 0;
  text-align: left;
}

/* Prompt modal actions: buttons live inside the modal body (no promptModalButtons wrapper) */
#prompt-modal .lifeos-prompt-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  margin-bottom: 6px;
}

#prompt-modal .lifeos-prompt-actions button {
  min-width: 80px;
}

/* Ensure legacy per-id margins don't affect layout */
#prompt-modal #prompt-modal-cancel,
#prompt-modal #prompt-modal-ok {
  margin: 0;
}

#timeline-modal .lifeos-modal-body {
  padding: 0 16px 50px;
  /* Extra bottom padding for floating buttons */
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#timeline-modal .lifeos-modal-body > .shared-by-you:first-child {
  margin-top: 0 !important;
}


#timeline-modal #timelineModalButtons.modal-buttons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  width: fit-content;
  background-color: var(--modal-buttons-accent);
  border-radius: 0 12px 0 0;
  padding: 5px 10px;
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

#timeline-modal #timelineModalButtons.modal-buttons button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

/* Timeline modal: ensure title/description inputs use LifeOS-like styles (override legacy id rules) */
#timeline-modal #timeline-title,
#timeline-modal #timelineDescription {
  width: 100%;
  padding: 6px 8px !important;
  border: 1px solid var(--border-soft, var(--secondary-color)) !important;
  border-radius: 6px;
  color: var(--primary-color) !important;
  margin: 0 !important;
  text-align: left;
}

#timeline-modal #timeline-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Compact form groups in timeline modal view mode */
#timeline-modal .timeline-title-group,
#timeline-modal .timeline-desc-group {
  margin-bottom: 0 !important;
}

#timeline-modal #timeline-title:enabled,
#timeline-modal #timelineDescription:enabled {
  caret-color: currentColor;
  cursor: text;
  -webkit-text-fill-color: currentColor;
}

#timeline-modal #timeline-title:focus,
#timeline-modal #timelineDescription:focus {
  outline: 2px solid var(--border-soft, var(--secondary-color));
  outline-offset: 1px;
}

#timeline-modal #timelineForm {
  margin-bottom: 10px;
}

#timeline-modal #timelineDescription {
  resize: vertical;
  overflow-y: auto;
}

#timeline-modal #timeline-title:disabled,
#timeline-modal #timelineDescription:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--primary-color);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  resize: none;
}

#timeline-modal #timelineDescription:disabled {
  min-height: 0 !important;
  overflow: hidden !important;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}

#timeline-modal #timeline-title::placeholder,
#timeline-modal #timelineDescription::placeholder {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  opacity: 0.55;
}

body.theme-night-1 #timeline-modal #timeline-title,
body.theme-night-1 #timeline-modal #timelineDescription {
  border-color: var(--surface-night-hover-border, var(--secondary-color)) !important;
  background: var(--surface-night-field, transparent) !important;
}

body.theme-night-1 #timeline-modal #timeline-title:disabled,
body.theme-night-1 #timeline-modal #timelineDescription:disabled {
  border: none !important;
  background: transparent !important;
}

body.theme-night-2 #timeline-modal #timeline-title,
body.theme-night-2 #timeline-modal #timelineDescription {
  border-color: var(--surface-night-alt-hover-border, var(--secondary-color)) !important;
  background: var(--surface-night-alt-field, transparent) !important;
}

body.theme-night-2 #timeline-modal #timeline-title:disabled,
body.theme-night-2 #timeline-modal #timelineDescription:disabled {
  border: none !important;
  background: transparent !important;
}

.close,
.close-submodal {
  color: var(--modal-buttons-contrast, var(--secondary-color));
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: var(--modal-buttons-contrast, black);
  text-decoration: none;
  cursor: pointer;
}

.modal-buttons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  position: sticky;
  bottom: 0;
  margin: 0 -25px;
  padding: 7px 10px;
  border-radius: 0 var(--radius-md) 0 0;
  float: left;
  z-index: 10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    6px -6px 18px -4px rgba(40, 34, 20, 0.28);
  background-color: var(--modal-buttons-accent);
  color: var(--modal-buttons-contrast);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  background-color: transparent;
  cursor: pointer;
  color: var(--modal-buttons-contrast);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.modal-buttons button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.one-button {
  background-color: var(--primary-color);
}

#timelineModalButtons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
}

/* Entrance for centered overlay sheets (was referenced but never defined) */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(14px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

/* === css/modal_content.css === */
/* LifeOS modals: avoid hover transforms triggering the scroll wrapper's overflow/scrollbar */
.lifeos-modal .modal-buttons button {
  overflow: hidden;
}

.lifeos-modal .modal-buttons button:hover {
  transform: none;
}

.lifeos-modal .modal-buttons button i {
  display: inline-block;
  transition: transform 0.3s ease;
}

.lifeos-modal .modal-buttons button:hover i {
  transform: rotate(30deg) scale(1.3);
}

#timelineForm {
  margin-bottom: 30px;
}

.modal-title {
  text-align: center;
}

.shared-by-you {
  background: var(--primary-color);
  color: var(--app-background);
  margin-left: -16px !important;
  width: calc(100% + 36px);
  padding: 10px 20px;
  text-align: left !important;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  margin: 20px 0px;
  margin-top: 20px;
  margin-bottom: 10px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
}

.inbox-share-action {
  margin: 0 0 16px 0;
}

/* Match the timeline-modal action buttons. Overrides the generic
   #inboxModal .lifeos-modal-body button reset in share.css. */
#inboxModal .lifeos-modal-body button.inbox-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 52%, transparent);
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
  color: inherit;
  overflow: visible;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

#inboxModal .lifeos-modal-body button.inbox-share-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, var(--primary-color) 76%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

#inboxModal .lifeos-modal-body button.inbox-share-btn i {
  font-size: 13px;
  flex-shrink: 0;
}

#inboxModal .lifeos-modal-body button.inbox-share-btn:hover i {
  transform: none;
}

.modal h2 {
  text-align: center;
}

#deleteModal .modal-content,
#delete-modal .modal-content,
#tag-exists-modal .modal-content,
#invalidateModal .modal-content,
#inboxDeleteModal .modal-content,
#notification-modal.notification-modal-danger .modal-content,
#shareModal_1 .modal-content,
#shareModal_2 .modal-content {
  padding-bottom: 20px;
}

#deleteModal .modal-content,
#delete-modal .modal-content,
#tag-exists-modal .modal-content,
#invalidateModal .modal-content,
#inboxDeleteModal .modal-content,
#notification-modal.notification-modal-danger .modal-content {
  background-color: var(--accent-delete);
  color: var(--secondary-color);
  max-width: 430px;
}

#notification-modal.notification-modal-danger .modal-content {
  border: none;
}

#deleteModal p,
#delete-modal p,
#tag-exists-modal p,
#invalidateModal p,
#inboxDeleteModal p {
  margin-bottom: 20px;
}

#delete-modal .modal-content > div.center,
#tag-exists-modal .modal-content > div.center,
#invalidateModal .modal-content > div.center,
#deleteModalButtons,
#inboxDeleteModalButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#deleteModal button,
#delete-modal button,
#tag-exists-modal button,
#invalidateModal button,
#inboxDeleteModal button,
#notification-modal.notification-modal-danger #notification-modal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 40px;
  padding: 0 18px;
  background-color: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  border-radius: 8px;
}

#deleteModal button:hover,
#delete-modal button:hover,
#tag-exists-modal button:hover,
#invalidateModal button:hover,
#inboxDeleteModal button:hover,
#notification-modal.notification-modal-danger #notification-modal-ok:hover {
  background-color: var(--secondary-color);
  color: var(--accent-delete);
  border-color: var(--secondary-color);
}

#editableLink {
  margin-left: 30px;
}

#shareModal_2 p,
#shareModal_2 i {
  margin-bottom: 20px;
}

#event-modal input::placeholder,
#event-modal textarea::placeholder {
  color: var(--event-modal-contrast, var(--secondary-color));
}

#event-title {
  font-size: 26px;
}

#event-title,
#timeline-title,
#event-title:disabled,
#timeline-title:disabled {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none;
}

.change-category-hint {
  margin-bottom: 16px;
  text-align: center;
}

.change-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.change-category-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid transparent;
  background-color: rgba(0, 0, 0, 0.15);
  color: var(--secondary-color);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.change-category-option:hover {
  transform: translateY(-2px);
  border-color: var(--secondary-color);
}

.change-category-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* ── Assign to Project modal ── */
#assign-project-modal {
  z-index: 20000;
}

#assign-project-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  min-height: 0;
  height: auto;
  max-height: calc(100vh - 30px);
  padding: 0;
  background: var(--app-background);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  z-index: 20001;
  user-select: none;
}

#assign-project-modal .lifeos-modal-header {
  cursor: grab;
}

#assign-project-modal .lifeos-modal-header:active {
  cursor: grabbing;
}

#assign-project-modal .lifeos-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#assign-project-modal .lifeos-modal-body {
  padding-bottom: 50px;
}

.assign-project-hint {
  margin: 0 0 6px;
  text-align: center;
  opacity: 0.65;
  font-size: 12px;
}

.assign-project-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 30px;
}

.assign-project-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
  background: var(--app-background);
  color: var(--primary-color);
  cursor: pointer;
  transition: opacity 0.12s ease;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  width: 100%;
  height: 24px;
  margin-bottom: 4px;
}

.assign-project-option:hover {
  opacity: 0.8;
}

.assign-project-option.active {
  border-width: 2px;
}

.assign-project-option.partial {
  border-style: dashed;
}

.assign-project-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assign-project-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.6;
  margin-left: auto;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

#assign-project-modal #assignProjectModalButtons.modal-buttons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  width: fit-content;
  background-color: var(--modal-buttons-accent);
  border-radius: 0 12px 0 0;
  padding: 5px 10px;
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

#assign-project-modal #assignProjectModalButtons.modal-buttons button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--modal-buttons-contrast, var(--app-background));
}

#timeline-title {
  width: 100%;
  font-size: 26px;
  margin-top: 10px !important;
}

#start-date,
#end-date {
  font-size: 16px !important;
  width: 170px;
}

#start-date {
  margin-left: -6px !important;
}

#modal-category {
  margin-left: 10px;
}

#description,

/* === css/modal_event.css === */
#timelineDescription {
  color: var(--app-background);
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: justify;
  overflow-x: hidden;
  resize: none;
  overflow-y: hidden;
}

#description {
  margin-bottom: 25px;
}

#description:focus-visible {
  outline: none;
}

.event-label {
  margin-bottom: 0;
}


#event-category:disabled,
#event-modal input:disabled {
  border: none;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#event-modal #modal-title {
  text-align: left;
}

#event-category {
  margin: 0;
}

#event-modal .input-group {
  position: initial;
  margin: 0;
}

#event-modal input {
  margin: 0;
}

#event-modal.edit-mode input:not([type="hidden"]):not(:disabled),
#event-modal.edit-mode textarea:not(:disabled),
#event-modal.edit-mode select:not(:disabled) {
  border: none;
  border-bottom: 1px solid var(--event-modal-contrast, var(--secondary-color)) !important;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.link {
  font-size: 14px;
  cursor: pointer;
  color: var(--secondary-color);
  text-decoration: none;
}

#event-modal .fa-trash-alt {
  margin-left: 15px;
}

#addLink,
#add-location {
  font-size: 16px !important;
  margin-bottom: 5px !important;
  width: calc(100% - 30px);
}

#addLinkButton,
#addLocationButton {
  font-size: 20px;
}

#map {
  height: 150px;
  width: 100%;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 30px;
}

.fa-map-marked-alt,
.fa-camera {
  margin-top: 40px;
  margin-bottom: 10px;
}

.swiper-slide .fa-trash-alt {
  position: absolute;
  top: 10px;
  right: 10px;
  /* background-color: var(--secondary-color); */
  padding: 5px;
  border-radius: 4px;
}

#addPhoto {
  font-size: 20px;
  margin-left: 10px;
}

#delete-btn .fa-trash-alt {
  margin-left: 0;
}

#event-category {
  width: 220px;
}

.modal.modal-dark-bg #event-modal {
  --event-modal-accent: var(--primary-color);
  --event-modal-contrast: var(--secondary-color);
}

#event-modal {
  --event-modal-accent: var(--primary-color);
  --event-modal-contrast: var(--secondary-color);
}

#addNewEvent {
  --category-modal-accent: var(--primary-color);
  --category-modal-contrast: var(--secondary-color);
  background-color: var(--app-background);
  color: var(--primary-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

#event-modal .modal-content {
  /* border: 1px solid var(--event-modal-accent, var(--primary-color)); */
  background-color: var(--event-modal-accent, var(--primary-color));
  color: var(--event-modal-contrast, var(--secondary-color));
}

.event-category-container {
  position: absolute;
  right: 85px;
  font-size: 70px;
}

.event-category-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

#event-title,
#timeline-title {
  height: 30px;
  font-weight: 600;
}

/* .flatpickr-input {
  height: 20px !important;
  margin-top: 10px !important;
} */
label[for="lifeos-field-category"],
label[for="lifeos-links-input"] {
  margin-top: -10px;
}

.flatpickr-month {
  height: 50px !important;
}

.date-picker-container span {
  margin-right: 5px;
}

#event-modal .event-category-icon {
  color: var(--event-modal-contrast, var(--secondary-color));
}

#event-category {
  margin-top: 10px;
}

#event-category,
#addLink,
#add-location {
  height: 20px;
}

#event-title:enabled,
#timeline-title:enabled,
.flatpickr-input:enabled,
#event-category:enabled,
#description:enabled,
#timelineDescription:enabled,
#addLink:enabled,
#add-location:enabled {
  color: var(--event-modal-contrast, var(--app-background));
  /* border-radius: 4px; */
  /* border-bottom: 1px solid var(--event-modal-contrast, var(--app-background)); */
}

#event-title:enabled,
#timeline-title:enabled {
  padding-left: 10px !important;
}

#event-modal .modal-content .event-label,
#event-modal .modal-content input,
#event-modal .modal-content textarea,
#event-modal .modal-content select,
#event-modal .modal-content .event-label,
#event-modal .modal-content .timeline-comments-title,
#event-modal .modal-content .timeline-comments-list,
#event-modal .modal-content .timeline-comments-list p,
#event-modal .modal-content .timeline-comment-form textarea,
#event-modal .modal-content #linkList,
#event-modal .modal-content #linkList a,
#event-modal .modal-content .fa-search,
#event-modal .modal-content .event-category-container {
  color: var(--event-modal-contrast, var(--app-background));
  border: none !important;
}

#event-modal .modal-content .timeline-comment-form textarea,
#event-modal .modal-content #linkList li,
#event-modal .modal-content #eventCommentsSection,
#event-modal .modal-content #linkList input {
  border-color: var(--event-modal-contrast, var(--secondary-color));
}



#start-date:disabled,
#end-date:disabled,
#event-category:disabled,
#add-location:disabled {
  padding: 0;
}

#description:enabled,
#timelineDescription:enabled {
  padding: 10px;
}

#timelineDescription:focus-visible {
  outline: none;
}


/* Új esemény villogása */
@keyframes blink {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.85);
    opacity: 0.4;
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
  }
}

.event.blink {
  animation: blink 0.9s ease-in-out infinite;
  transform-origin: center;
  z-index: 10;
}

/* Linkek stílusa */
#linkList ul {
  list-style-type: none;
  /* Körök eltüntetése */
  padding: 0;
  margin: 0;
}

#linkList ul li a {
  text-decoration: none;
  /* Aláhúzás eltüntetése */
  color: white;
  /* Fehér szöveg */
  font-size: 16px;
  /* Tetszőleges méret beállítása */
}

#linkList ul li a:hover {
  color: lightgray;
  /* Opcionális: világosszürke szín hover effektusnál */
}

.separator {
  width: calc(100% + 30px);
  /* width: 100%; */
  height: 2px;
  background-color: var(--secondary-color);
  margin: 20px 0;
  margin-left: -15px;
}

.timeline-categories-label {
  margin-top: 20px;
}

.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* === css/modal_categories.css === */
/* Categories list - styled like sources-modal-list */
#categoriesContainer {
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  padding: 15px;
  background: var(--app-background);
}

.theme-white #categoriesContainer,
.theme-day #categoriesContainer {
  border-color: var(--border-soft);
  background: var(--surface-day-field);
}

.theme-day #timelineCategoriesList {
  background: var(--surface-day-field);
}

body.theme-night-1 #categoriesContainer,
body.theme-night-1 #timelineCategoriesList,
body.theme-night-1 #timelineCategoriesList .timeline-category-row {
  background: var(--surface-night-field);
}

body.theme-night-2 #categoriesContainer,
body.theme-night-2 #timelineCategoriesList,
body.theme-night-2 #timelineCategoriesList .timeline-category-row {
  background: var(--surface-night-alt-field);
}

#timelineCategoriesList {
  background: var(--app-background);
  margin-bottom: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 15px;
  margin-right: -15px;
}

#timelineCategoriesList i {
  margin-right: 0;
  margin-left: 0;
}

.timeline-category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border-overlay);
  border-radius: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  transition: background 0.2s;
}

.theme-day #timelineCategoriesList .timeline-category-row {
  border-bottom-color: var(--border-soft);
}

.timeline-category-row:hover {
  background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

.theme-day #timelineCategoriesList .timeline-category-row:hover {
  background: var(--surface-hover-day);
}

.timeline-category-row:last-child {
  border-bottom: none;
}

.timeline-category-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.timeline-category-row.category-hidden .timeline-category-name,
.timeline-category-row.category-hidden .category-icon-container i {
  opacity: 0.35;
}

.category-icon-container {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon-container i {
  color: var(--secondary-color);
  font-size: 16px;
}

.timeline-category-row .category-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.2s;
}

.timeline-category-row:hover .category-icons {
  opacity: 1;
}

.timeline-category-row .category-icons i {
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s;
  font-size: 16px;
}

.timeline-category-row .category-icons i:hover {
  transform: rotate(30deg) scale(1.2);
  background-color: transparent;
  color: var(--accent-delete);
}

.timeline-category-row .category-icons .fa-eye:hover,
.timeline-category-row .category-icons .fa-eye-slash:hover,
.timeline-category-row .category-icons .fa-pencil-alt:hover {
  color: inherit;
}

.visibility-icon-container {
  width: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}

#timelineCommentsSection,
#eventCommentsSection {
  padding: 15px;
  padding-right: 0;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.timeline-comments-title,
.timeline-comments-list,
.timeline-comments-list p,
.timeline-comments-loading,
.timeline-comments-error,
.timeline-comments-empty,
.timeline-comment-item,
.timeline-comment-header,
.timeline-comment-author,
.timeline-comment-date,
.timeline-comment-body,
.timeline-comment-form .input-group,
.timeline-comments-login-btn,
.timeline-comment-identity,
.timeline-login-action,
.timeline-comment-status {
  color: inherit;
}

.timeline-comments-title {
  text-align: center;
  margin-bottom: 10px;
}

.timeline-comments-list {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 15px;
  scrollbar-color: var(--event-modal-contrast, var(--secondary-color)) color-mix(in srgb, var(--event-modal-accent, var(--primary-color)) 25%, transparent);
}

.timeline-comments-list::-webkit-scrollbar {
  width: 6px;
}

.timeline-comments-list::-webkit-scrollbar-track {
  background-color: color-mix(in srgb, var(--event-modal-accent, var(--primary-color)) 25%, transparent);
  border-radius: 6px;
}

.timeline-comments-list::-webkit-scrollbar-thumb {
  background-color: var(--event-modal-contrast, var(--secondary-color));
  border-radius: 6px;
}

.timeline-comments-loading,
.timeline-comments-error,
.timeline-comments-empty {
  text-align: center;
  font-style: italic;
  color: var(--event-modal-contrast, --app-background);
}

.timeline-comment-item {
  margin-top: 30px;
}

.timeline-comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.timeline-comment-author {
  font-weight: 600;
}

.timeline-comment-date {
  color: color-mix(in srgb, var(--event-modal-contrast, var(--secondary-color)) 80%, transparent);
  margin-right: 10px;
}

.timeline-comment-body {
  margin: 0;
  white-space: pre-wrap;
  opacity: 0.8;
  font-size: 0.85rem;
}

.timeline-comment-form .input-group {
  margin-bottom: 10px;
}

.timeline-comments-login-btn {
  margin-top: 5px;
  text-align: center;
  font-size: 0.9rem;
}

.timeline-comment-identity {
  text-align: center;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.timeline-login-action {
  display: block;
  width: 100%;
  text-align: center;
}

.timeline-comment-status {
  text-align: center;
  min-height: 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.timeline-comment-status.status-info {
  color: var(--event-modal-contrast, var(--secondary-color));
}

.timeline-comment-status.status-success {
  color: color-mix(in srgb, var(--event-modal-contrast, var(--secondary-color)) 70%, #2af6b6);
}

.timeline-comment-status.status-error {
  color: color-mix(in srgb, var(--event-modal-contrast, var(--secondary-color)) 60%, var(--accent-notification-soft));
}

#timelineCommentMessage,
#eventCommentMessage,
#lifeosEntityCommentMessage {
  width: calc(100% - 15px);
  margin-left: 0;
  border: 1px solid var(--secondary-color);
  border-radius: 6px;
}

#eventCommentMessage,
#lifeosEntityCommentMessage {
  margin-bottom: 20px;
}

/* === css/modal_comments.css === */
/* Comment sections in LifeOS modal scroll area — same appearance for both */
#lifeos-modal-backdrop #eventCommentsSection,
#lifeos-modal-backdrop #lifeosEntityCommentsSection {
  padding: 0 16px 16px;
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

/* In the LifeOS modal (light background), comment interactive elements need
   visible colors — override the --event-modal-contrast based fallback. */
#lifeos-modal-backdrop .timeline-comment-likebar,
#lifeos-modal-backdrop .timeline-comment-likebtn,
#lifeos-modal-backdrop .timeline-comment-replybtn {
  color: var(--primary-color);
}

#lifeos-modal-backdrop .timeline-comment-likecount {
  color: color-mix(in srgb, var(--primary-color) 75%, transparent);
}

#lifeos-modal-backdrop .timeline-comment-date {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

#lifeos-modal-backdrop .timeline-comment-replysend {
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
}

#lifeos-modal-backdrop .timeline-comment-replybox textarea {
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  color: inherit;
  background: transparent;
}

#lifeos-modal-backdrop .timeline-comment-form button[type="submit"] {
  display: block;
  margin: 12px auto 0;
  padding: 8px 20px;
  background: var(--primary-color);
  color: var(--app-background);
  border: none;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  cursor: pointer;
}

#lifeos-modal-backdrop .timeline-comment-form button[type="submit"]:hover {
  opacity: 0.88;
}

/* Textarea text color and cursor visibility in LifeOS modal */
#lifeos-modal-backdrop #eventCommentMessage,
#lifeos-modal-backdrop #lifeosEntityCommentMessage {
  color: var(--primary-color);
  caret-color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, var(--app-background));
}

#lifeos-modal-backdrop #eventCommentMessage:focus,
#lifeos-modal-backdrop #lifeosEntityCommentMessage:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

#lifeos-modal-backdrop #eventCommentMessage::placeholder,
#lifeos-modal-backdrop #lifeosEntityCommentMessage::placeholder {
  color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* ── Timeline modal comment section: same style as LifeOS entity comments ── */
#timeline-modal #timelineCommentsSection {
  padding: 0 16px 16px;
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
}

#timeline-modal .timeline-comment-likebar,
#timeline-modal .timeline-comment-likebtn,
#timeline-modal .timeline-comment-replybtn {
  color: var(--primary-color);
}

#timeline-modal .timeline-comment-likecount {
  color: color-mix(in srgb, var(--primary-color) 75%, transparent);
}

#timeline-modal .timeline-comment-date {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

#timeline-modal .timeline-comment-replysend {
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
}

#timeline-modal .timeline-comment-replybox textarea {
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  color: inherit;
  background: transparent;
}

#timeline-modal .timeline-comment-form button[type="submit"] {
  display: block;
  margin: 12px auto 0;
  padding: 8px 20px;
  background: var(--primary-color);
  color: var(--app-background);
  border: none;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  cursor: pointer;
}

#timeline-modal .timeline-comment-form button[type="submit"]:hover {
  opacity: 0.88;
}

#timeline-modal #timelineCommentMessage {
  color: var(--primary-color);
  caret-color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, var(--app-background));
}

#timeline-modal #timelineCommentMessage:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

#timeline-modal #timelineCommentMessage::placeholder {
  color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

#timelineCommentForm .input-group {
  margin-top: 30px;
}

#timelineCommentForm label {
  left: 0;
}

#timelineCommentForm button {
  margin-top: 20px;
}

label[for="lifeos-links-input"] {
  margin-top: 20px;
}

/* LifeOS modal - Links list UI */
.lifeos-links-input-row {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
}

#lifeos-links-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--secondary-color);
  border-radius: 6px;
  color: var(--event-modal-contrast, var(--secondary-color));
}

/* #lifeos-links-add {
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--secondary-color);
  background-color: transparent;
  color: var(--event-modal-contrast, var(--secondary-color));
  cursor: pointer;
} */

#lifeos-links-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#lifeos-links-list {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 6px;
  min-height: 38px;
}

#lifeos-links-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

#lifeos-links-list li a {
  color: var(--primary-color);
  text-decoration: none;
  word-break: break-all;
}

#lifeos-links-list li a:hover {
  text-decoration: underline;
}

.lifeos-link-remove {
  margin-left: auto;
  cursor: pointer;
  display: none;
  background-color: transparent;
  transition: transform 0.3s ease;
}

.lifeos-link-remove:hover {
  transform: rotate(30deg);
}

/* Show links input and remove buttons only in LifeOS modal edit mode */
.lifeos-modal.edit-mode .lifeos-links-input-row {
  display: flex;
}

.lifeos-modal.edit-mode .lifeos-link-remove {
  display: inline;
  border: none;
}

.lifeos-modal.edit-mode .lifeos-link-remove:hover {
  background-color: transparent;
  scale: 1.2;
}

/* Files section: hide upload button outside edit mode */
.lifeos-modal:not(.edit-mode) #lifeos-files-add {
  display: none;
}

/* LifeOS modal: in read-only/view mode textareas should not show a blinking caret */
.lifeos-modal textarea[readonly],
.lifeos-modal:not(.edit-mode) textarea {
  caret-color: transparent;
  cursor: default;
}

.lifeos-modal textarea[readonly]:focus,
.lifeos-modal textarea[readonly]:focus-visible,
.lifeos-modal:not(.edit-mode) textarea:focus,
.lifeos-modal:not(.edit-mode) textarea:focus-visible {
  outline: none;
}

/* Event modal: custom category select styling */
#event-modal .cat-select-wrapper {
  width: 220px;
  margin-top: 10px;
}

#event-modal .cat-select-trigger {
  background: transparent;
  color: var(--event-modal-contrast, var(--app-background));
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--event-modal-contrast, var(--app-background)) 30%, transparent);
  border-radius: 0;
  padding: 4px 6px;
  min-height: unset;
  height: 24px;
  font-size: 13px;
}

#event-modal .cat-select-trigger:hover:not(.cat-select-disabled) {
  border-color: var(--event-modal-contrast, var(--app-background));
}

#event-modal .cat-select-trigger i {
  font-size: 13px;
}

#event-modal .cat-select-dropdown {
  background: var(--app-background);
  color: var(--primary-color);
  border-color: var(--event-modal-accent, var(--primary-color));
}

#event-modal .cat-select-item {
  color: var(--primary-color);
}

#event-modal .cat-select-item:hover {
  background: color-mix(in srgb, var(--event-modal-accent, var(--primary-color)) 15%, transparent);
}

#event-modal .cat-select-item.cat-select-selected {
  background: color-mix(in srgb, var(--event-modal-accent, var(--primary-color)) 25%, transparent);
}

/* ── Timeline modal: info block (title + description in view mode) ── */
#timeline-modal .timeline-info-form {
  margin-bottom: 4px;
}

#timeline-modal .timeline-title-group {
  margin-bottom: 6px;
}

#timeline-modal .timeline-desc-group {
  margin-bottom: 8px;
}

/* Hide title/desc labels — inputs are self-explanatory (heading style + placeholder) */
#timeline-modal .timeline-field-label {
  display: none;
}

/* Title input: heading style when disabled */
#timeline-modal .timeline-title-input:disabled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: default;
  pointer-events: none;
  height: auto;
  color: inherit;
  opacity: 1;
  -webkit-text-fill-color: inherit;
  width: 100%;
}

/* Display div: shown instead of the input when in read/disabled mode */
#timeline-modal .timeline-title-display {
  display: none;
  font-size: 20px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  width: 100%;
  color: inherit;
  padding: 0;
  margin: 0;
}

/* Description textarea: plain text style when disabled */
#timeline-modal .timeline-desc-input:disabled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  resize: none;
  cursor: default;
  pointer-events: none;
  opacity: 0.75;
  font-size: 13px;
  line-height: 1.6;
  min-height: unset;
  overflow: hidden;
  color: inherit;
  -webkit-text-fill-color: inherit;
  width: 100%;
}

/* ── Timeline actions grid ── */
.timeline-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 4px;
}

.timeline-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  margin: 0;
  width: 100%;
}

.timeline-action-btn i {
  font-size: 13px;
  flex-shrink: 0;
}

.timeline-action-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, var(--primary-color) 68%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.timeline-actions-grid .timeline-action-btn.primary {
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, var(--primary-color) 52%, transparent);
}

.timeline-actions-grid .timeline-action-btn.primary:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, var(--primary-color) 76%, transparent);
}

.timeline-action-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
  outline-offset: 2px;
}

/* Full-width single action (e.g. read-only join) */
.timeline-actions-grid .timeline-action-btn:only-child {
  grid-column: 1 / -1;
}

/* ── Comments section divider ── */
.timeline-comments-section {
  margin-top: 20px;
}

.timeline-comments-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: inherit;
  opacity: 0.55;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-comments-divider::before,
.timeline-comments-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* === css/timeline.css === */
#timeline-container {
  width: 100%;
  margin: 0;
  position: relative;
}

#timeline-container.timeline-switching {
  pointer-events: none;
}

#timeline-container.timeline-switching #timeline-svg {
  opacity: 0;
  visibility: hidden;
}

#timeline-switch-loader {
  display: none;
}

#timeline-container.timeline-switching #timeline-switch-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#timeline-switch-loader .onb-orbit-a {
  border-top-color: color-mix(in srgb, var(--primary-color) 84%, var(--app-background));
  border-right-color: color-mix(in srgb, var(--primary-color) 46%, transparent);
}

#timeline-switch-loader .onb-orbit-b {
  border-top-color: color-mix(in srgb, var(--primary-color) 46%, var(--app-background));
  border-left-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

#timeline-switch-loader .onb-core {
  background: var(--primary-color);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 36%, transparent);
}

#timeline-container.timeline-demo-intro {
  animation: timelineDemoReveal 820ms cubic-bezier(0.2, 0.78, 0.22, 1) both;
  will-change: transform, opacity, filter;
}

#timeline-container.timeline-demo-intro-pre {
  opacity: 0;
  transform: translateY(14px) scale(0.992);
  filter: blur(1.8px) saturate(0.92);
}

@keyframes timelineDemoReveal {
  0% {
    opacity: 0.18;
    transform: translateY(14px) scale(0.992);
    filter: blur(1.8px) saturate(0.92);
  }
  45% {
    opacity: 0.74;
    transform: translateY(4px) scale(0.997);
    filter: blur(0.8px) saturate(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #timeline-container.timeline-demo-intro-pre,
  #timeline-container.timeline-demo-intro {
    opacity: 1;
    animation: none;
    filter: none;
    transform: none;
  }
}

svg {
  width: 100%;
  /* Az SVG teljes szélességre állítása */
  height: 95%;
}

#timeline-svg {
  display: block;
  width: 100%;
  height: var(--timeline-viewport-height, calc(100vh - 80px));
  touch-action: none;
}

/* ====================== Row zebra stripes & hover ====================== */
.row-bg {
  transition: fill 150ms ease;
}

/* ═══ Editorial canvas atmosphere ═══ */
.timeline-atmosphere .atmo-weekend {
  fill: rgba(95, 82, 58, 0.055);
}

.theme-night-1 .timeline-atmosphere .atmo-weekend,
.theme-night-2 .timeline-atmosphere .atmo-weekend {
  fill: rgba(255, 255, 255, 0.028);
}

.timeline-atmosphere .atmo-watermark {
  font-family: var(--font-serif, "Playfair Display", Georgia, serif);
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: rgba(60, 52, 34, 0.07);
}

.timeline-atmosphere .atmo-watermark-sub {
  font-family: var(--font-sans, "Montserrat", sans-serif);
  font-weight: 600;
  letter-spacing: 0.5em;
  fill: rgba(60, 52, 34, 0.09);
}

.theme-night-1 .timeline-atmosphere .atmo-watermark,
.theme-night-2 .timeline-atmosphere .atmo-watermark {
  fill: rgba(255, 255, 255, 0.05);
}

.theme-night-1 .timeline-atmosphere .atmo-watermark-sub,
.theme-night-2 .timeline-atmosphere .atmo-watermark-sub {
  fill: rgba(255, 255, 255, 0.06);
}

/* Today line: glowing amber beam instead of a bare hairline */
#timeline-svg .today-line {
  filter: drop-shadow(0 0 5px rgba(194, 137, 47, 0.65));
}

/* Axis labels: ONE sans family across every zoom tier (times / days / weeks /
   months / years). The time-scale is functional chrome, not editorial display
   type — the serif signature lives in the month watermark + wordmark. */
#timeline-svg .x-axis-major text,
#timeline-svg .quarter-label,
#timeline-svg .hour-day-label,
#timeline-svg .week-label {
  font-family: var(--font-sans, "Montserrat", -apple-system, sans-serif) !important;
}

.row-bg-even {
  fill: rgba(120, 110, 90, 0.055);
}

.row-bg-odd {
  fill: transparent;
}

/* Day theme: very subtle zebra - light background needs lighter stripes */
.theme-day .row-bg-even {
  fill: rgba(90, 80, 60, 0.045);
}

.theme-day .row-bg-odd {
  fill: transparent;
}

/* Night theme: subtle neutral stripe. NB: body carries `theme-night-1`/
   `theme-night-2`, never a bare `theme-night` token, so the legacy
   `.theme-night` rules below never matched and the warm generic
   `.row-bg-even` leaked into dark. Scope explicitly. */
.theme-night-1 .row-bg-even,
.theme-night-2 .row-bg-even {
  fill: rgba(255, 255, 255, 0.022);
}

.theme-night-1 .row-bg-odd,
.theme-night-2 .row-bg-odd {
  fill: transparent;
}

.theme-night .row-bg-even {
  fill: rgba(255, 255, 255, 0.02);
}

.theme-night .row-bg-odd {
  fill: transparent;
}

.row-divider {
  pointer-events: none;
  stroke: rgba(128, 128, 128, 0.1);
}

.theme-day .row-divider {
  stroke: rgba(90, 80, 60, 0.09);
}

.theme-night-1 .row-divider,
.theme-night-2 .row-divider,
.theme-night .row-divider {
  stroke: rgba(255, 255, 255, 0.07);
}

/* Row hover highlight - applied via JS */
.row-bg.row-hover {
  fill: rgba(255, 170, 0, 0.12) !important;
}

.theme-day .row-bg.row-hover,
.theme-white .row-bg.row-hover {
  fill: rgba(0, 0, 0, 0.06) !important;
}

.theme-night-1 .row-bg.row-hover,
.theme-night-2 .row-bg.row-hover {
  fill: rgba(255, 170, 0, 0.15) !important;
}

/* Life OS view switcher */
.lifeos-view-switch {
  display: initial;
  background-color: var(--primary-color);
  box-shadow: 2px 8px 12px rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 1px;
  position: absolute;
  top: 25px;
  right: 150px;
}

.lifeos-view-btn {
  position: relative;
  font-size: 12px;
  background-color: transparent;
  color: var(--app-background);
  margin: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: scale 0.2s ease;
  padding: 0 5px !important
}

.lifeos-view-btn:hover {
  scale: 1.2;
  background-color: transparent !important;
}

.lifeos-view-btn.active {
  border-color: transparent;
  scale: 1;
  font-weight: 600;
}

.view-buttons {
  position: absolute;
  display: inline-flex;
  gap: 12px;
  right: 10px;
  top: 4px;
  z-index: 20;
}

.lifeos-view-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  border-radius: 14px;
  border: 1.5px solid var(--app-background);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  transform: translate(0, 0);
  transition:
    transform 280ms cubic-bezier(0.25, 0.8, 0.35, 1),
    width 220ms ease,
    height 220ms ease;
  pointer-events: none;
}

/* Timeline project bars */
.lifeos-project-bars-layer {
  pointer-events: auto;
}

/* Project-entity connection lines */
.lifeos-project-links-layer {
  pointer-events: none;
}

.lifeos-project-link {
  transition: stroke-opacity 120ms ease, opacity 120ms ease, filter 120ms ease;
}

.lifeos-project-bars-bg {
  fill: var(--app-background);
  pointer-events: none;
}

.lifeos-project-bar {
  fill: var(--app-background);
  opacity: 1;
  stroke-width: 1;
  stroke: var(--primary-color);
}

/* Project pill dimmed when another project is active */
g.lifeos-project-pill.lifeos-project-muted {
  opacity: 0.3;
}

.lifeos-project-bar.open-ended::after {
  content: "";
}

.lifeos-project-pill {
  pointer-events: all;
  cursor: pointer;
}

.lifeos-project-label {
  font-size: 11px;
  font-weight: 700;
  alignment-baseline: middle;
}

.lifeos-project-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.9;
  alignment-baseline: middle;
}

/* --- Project status visual differentiation --- */
.lifeos-project-bar[data-status="completed"] {
  stroke-width: 1.2;
}
.lifeos-project-bar[data-status="on_hold"] {
  stroke-width: 0.8;
}
.lifeos-project-bar[data-status="cancelled"] {
  stroke-width: 0.8;
}

.lifeos-project-avatar {
  font-size: 11px;
  font-weight: 900;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
}

/* ── Project zoom-hint hover animation ── */
/* 3-step sequential: each arrow lights up then fades, staggered */
@keyframes lifeos-zoom-step {
  0%   { opacity: 0.15; }
  20%  { opacity: 0.9; }
  40%  { opacity: 0.15; }
  100% { opacity: 0.15; }
}
.lifeos-zoom-hint-group {
  pointer-events: none;
}
.lifeos-zoom-hint-arrow-left,
.lifeos-zoom-hint-arrow-right {
  pointer-events: none;
  opacity: 0.15;
}
.lifeos-zoom-hint-step-0 { animation: lifeos-zoom-step 1.2s ease-in-out 0s infinite; }
.lifeos-zoom-hint-step-1 { animation: lifeos-zoom-step 1.2s ease-in-out 0.2s infinite; }
.lifeos-zoom-hint-step-2 { animation: lifeos-zoom-step 1.2s ease-in-out 0.4s infinite; }
.lifeos-zoom-hint-label {
  opacity: 0.6;
  pointer-events: none;
  text-transform: uppercase;
}

.lifeos-project-muted .event,
.lifeos-project-muted text,
.lifeos-project-muted .task-status-bg,
.lifeos-project-muted .task-status-fo,
.lifeos-project-muted .task-status-icon,
.lifeos-project-muted .habit-chip,
.lifeos-project-muted .habit-label,
.lifeos-project-muted .habit-connector,
.lifeos-project-muted .habit-connector-hit,
.lifeos-project-muted .habit-bg-segment,
.lifeos-project-muted .habit-line,
.lifeos-project-muted.habit-chip,
.lifeos-project-muted.habit-label,
.lifeos-project-muted.habit-connector,
.lifeos-project-muted.habit-connector-hit,
.lifeos-project-muted.habit-bg-segment,
.lifeos-project-muted.habit-line,
.lifeos-project-muted.task-status-fo {
  opacity: 0.3;
}

.lifeos-pane {
  display: none;
  height: 100%;
}

.lifeos-pane.active {
  display: block;
}

#lifeos-panes {
  display: flex;
  flex-direction: column;
  height: var(--timeline-viewport-height, calc(100vh - 81px));
  max-height: var(--timeline-viewport-height, calc(100vh - 81px));
  overflow: hidden;
}

#lifeos-list-container {
  position: relative;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: min(980px, calc(100vw - 120px));
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 0;
}

#lifeos-list-pane {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#lifeos-list-pane.active {
  display: flex;
}

#lifeos-list-pane .lifeos-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#lifeos-panes>.lifeos-pane {
  flex: 1;
  min-height: 0;
}

.lifeos-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}


/* [ÚJ] Időskála és rács finomhangolt stílusok */
.x-axis-major .tick line {
  stroke: var(--primary-color);
}

.x-axis-minor .tick line {
  stroke: var(--primary-color);
  stroke-opacity: 0.6;
}

.x-axis-major path,
.x-axis-minor path {
  color: transparent;
}

.x-axis-major text {
  font-size: 12px;
  fill: var(--app-background);
}

.x-axis-minor text {
  display: none;
}

.grid-line-major {
  stroke-opacity: 0.3;
}

.grid-line-minor {
  stroke-opacity: 0.15;
}

.axis path {
  stroke: var(--primary-color);
}

.tick {
  stroke-opacity: 0.6;
}

.axis .tick line {
  stroke: var(--primary-color);
}

.axis .tick text {
  fill: var(--app-background);
  color: var(--app-background);
}

/* ====================== [ÚJ] Tengelycímkék idővonalhoz ====================== */
.x-axis-major text {
  font-size: 12px;
  fill: var(--app-background);
}

@media (max-width: 768px) {
  .x-axis-major text {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .x-axis-major text {
    font-size: 9px;
  }
}

/* ============ Coherent axis band — one warm-ink chrome frame ============
   The bottom time-scale reads as the same tray as the top navbar and left
   controller: warm ink band (--chrome-ink), one consistent light label color,
   quiet grid. Applies across every theme so the chrome is uniform. */
#timeline-svg .x-axis-background {
  fill: var(--chrome-ink, #262119) !important;
  stroke: var(--chrome-ink-edge, transparent) !important;
  stroke-width: 1px !important;
}

/* All axis labels: one warm off-white, one size, one weight. No more
   white-on-beige chaos and no serif/sans mix between tiers. */
#timeline-svg .x-axis-major text,
#timeline-svg .axis .tick text,
#timeline-svg .week-label,
#timeline-svg .quarter-label,
#timeline-svg .hour-day-label {
  fill: var(--chrome-on-ink, #f3ede0) !important;
  color: var(--chrome-on-ink, #f3ede0) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* Secondary context tier (weeks under a month, day under the hours): same
   family + weight, just quieter — a consistent two-level rhythm. */
#timeline-svg .week-label,
#timeline-svg .hour-day-label {
  fill: var(--chrome-on-ink-dim, rgba(243, 237, 224, 0.62)) !important;
}

/* Grid inside the plot stays a quiet warm hairline, independent of the band. */
body.theme-day .grid-line-major,
body.theme-white .grid-line-major {
  stroke: #d9d3c4 !important;
  stroke-opacity: 0.6 !important;
}
body.theme-day .grid-line-minor,
body.theme-white .grid-line-minor {
  stroke: #e6e1d5 !important;
  stroke-opacity: 0.75 !important;
}


/* ===== Custom Category Select Dropdown (with icons) ===== */

.cat-select-wrapper {
  position: relative;
  width: 100%;
  display: block !important;
}

.cat-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--app-background);
  color: var(--primary-color);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cat-select-trigger:hover:not(.cat-select-disabled) {
  border-color: var(--lifeos-modal-accent, var(--primary-color));
}

.cat-select-active .cat-select-trigger:not(.cat-select-disabled) {
  border-color: var(--lifeos-modal-accent, var(--primary-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 50%, transparent);
}

.lifeos-modal.edit-mode .cat-select-trigger:not(.cat-select-disabled) {
  border-color: color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 58%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 16%, transparent);
}

.cat-select-trigger.cat-select-disabled {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.lifeos-readonly .cat-select-trigger {
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
}

.cat-select-trigger i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.cat-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-select-arrow {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.6;
  flex-shrink: 0;
}

.cat-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--app-background);
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px 0;
  scrollbar-width: thin;
}

.cat-select-dropdown.cat-select-open {
  display: block;
}

.cat-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: var(--primary-color);
  transition: background-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-select-item:hover {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.cat-select-item.cat-select-selected {
  background: color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 18%, transparent);
  font-weight: 600;
}

.cat-select-item.cat-select-add-new {
  border-top: 1px solid color-mix(in srgb, var(--secondary-color) 40%, transparent);
  margin-top: 2px;
  padding-top: 10px;
  opacity: 0.85;
}

.cat-select-item i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Event modal: category select wrapper */
.input-group .cat-select-wrapper {
  flex: 1;
}

.input-group.inline .cat-select-wrapper {
  flex: 1;
}

/* Hide the native select when enhanced */
.cat-select-wrapper + select {
  display: none !important;
}

/* === css/timeline_photos.css === */

/*
.lifeos-photo-actions button {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #d2d6dc;
  background: var(--app-background);
  cursor: pointer;
} */

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

.lifeos-photo-thumb-wrap {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.lifeos-swiper-thumb {
  height: auto;
  min-height: 110px;
  box-sizing: border-box;
  padding: 0;
}

.lifeos-swiper-thumb .swiper-wrapper {
  height: auto !important;
  align-items: center;
}

.lifeos-swiper-thumb .swiper-slide {
  opacity: 0.85;
  border: 2px solid var(--lifeos-modal-accent, var(--primary-color));
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: center;
}

.lifeos-swiper-thumb .swiper-slide-thumb-active {
  opacity: 1;
}

.lifeos-thumb-img {
  width: 100%;
  height: 100%;
  display: flex;
}

.lifeos-thumb-img img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.lifeos-swiper-main {
  margin-top: 12px;
  height: clamp(320px, 70vh, 760px);
  width: 100%;
}

.lifeos-photo-viewer .lifeos-swiper-main {
  flex: 1;
  margin-top: 0;
}

.lifeos-swiper-main .swiper-wrapper {
  align-items: center;
}

.lifeos-swiper-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.lifeos-swiper-main .swiper-slide img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
  display: block;
}

#lifeos-photo-swiper {
  position: relative;
}

.lifeos-thumb-strip {
  position: relative;
}

.lifeos-thumb-nav {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  background: var(--app-background);
  color: var(--primary-color);
  cursor: pointer;
  z-index: 5;
  transform: translateY(-50%);
}

.lifeos-thumb-prev {
  left: 6px;
}

.lifeos-thumb-next {
  right: 6px;
}

.lifeos-photo-viewer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 20000;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.lifeos-photo-viewer-backdrop.lifeos-open {
  display: flex;
}

.lifeos-photo-viewer {
  position: relative;
  width: min(1080px, 96vw);
  height: min(90vh, 900px);
  max-height: 90vh;
  background: var(--app-background);
  border-radius: 16px;
  padding: 18px 18px 26px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--primary-color);
}

/* The generic .lifeos-swiper-main has a clamp() height for the modal.
   Inside the viewer we want it to fill available space instead. */
.lifeos-photo-viewer .lifeos-swiper-main {
  height: auto;
  min-height: 0;
}

/* Photo viewer: make slides full-height and center images */
.lifeos-photo-viewer #lifeos-photo-swiper {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lifeos-photo-viewer #lifeos-photo-swiper .swiper-wrapper {
  height: 100%;
  align-items: center;
}

.lifeos-photo-viewer #lifeos-photo-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.lifeos-photo-viewer #lifeos-photo-swiper .swiper-slide img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* LifeOS photo navigation: override global Swiper button transforms */
#lifeos-photo-next,
#lifeos-photo-prev {
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--primary-color) !important;
}

.lifeos-photo-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  color: var(--primary-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  z-index: 5;
}

.lifeos-photo-viewer-download {
  right: 54px;
}

.lifeos-audio-record-timer {
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

.lifeos-audio-record-bars {
  display: inline-flex;
  gap: 3px;
  margin-left: 10px;
  align-items: flex-end;
  height: 14px;
}

.lifeos-audio-record-bars span {
  display: inline-block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  animation: lifeos-audio-bar 0.9s ease-in-out infinite;
}

.lifeos-audio-record-bars span:nth-child(2) {
  animation-delay: -0.2s;
}

.lifeos-audio-record-bars span:nth-child(3) {
  animation-delay: -0.4s;
}

.lifeos-audio-record-bars span:nth-child(4) {
  animation-delay: -0.1s;
}

.lifeos-audio-record-bars span:nth-child(5) {
  animation-delay: -0.3s;
}

@keyframes lifeos-audio-bar {

  0%,
  100% {
    height: 4px;
    opacity: 0.55;
  }

  50% {
    height: 14px;
    opacity: 0.95;
  }
}

#lifeos-audio-note-toggle.lifeos-audio-paused .lifeos-audio-record-bars span {
  animation-play-state: paused;
  opacity: 0.5;
}

.lifeos-audio-record-pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  background: color-mix(in srgb, var(--primary-color) 6%, var(--app-background));
  cursor: pointer;
  user-select: none;
}

.lifeos-audio-record-pause:focus {
  outline: none;
}

.lifeos-audio-record-pause:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
  outline-offset: 2px;
}

#lifeos-audio-note-toggle:hover #lifeos-audio-note-pause,
#lifeos-audio-note-toggle:hover #lifeos-audio-note-pause i,
#lifeos-audio-note-toggle:hover #lifeos-audio-note-pause .lifeos-audio-record-pause-label,
#lifeos-audio-note-pause:hover,
#lifeos-audio-note-pause:hover i,
#lifeos-audio-note-pause:hover .lifeos-audio-record-pause-label,
#lifeos-audio-note-pause:focus,
#lifeos-audio-note-pause:focus i,
#lifeos-audio-note-pause:focus .lifeos-audio-record-pause-label {
  color: var(--primary-color) !important;
}

body.lifeos-photo-viewer-open .lifeos-photo-viewer .delete-icon {
  display: none !important;
}

body.lifeos-photo-viewer-open,
body.lifeos-document-viewer-open,
body.lifeos-audio-viewer-open {
  overflow: hidden;
}

.lifeos-audio-viewer {
  width: min(640px, 96vw);
  height: initial !important;
  padding: 18px 18px 22px;
}

.lifeos-audio-viewer-title {
  margin: 0 44px 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.lifeos-audio-viewer-audio {
  width: 100%;
}

.lifeos-document-viewer {
  width: min(960px, 96vw);
  height: 90vh;
  padding: 18px;
}

.lifeos-document-viewer-title {
  margin: 0 44px 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.lifeos-document-viewer-frame {
  width: 100%;
  flex: 1;
  border: none;
  border-radius: 12px;
  background: var(--app-background);
}

.lifeos-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
}

.lifeos-quickadd {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  align-items: center;
  flex-wrap: wrap;
}

.lifeos-quickadd button {
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid #d2d6dc;
  background: var(--app-background);
  cursor: pointer;
}

.lifeos-quickadd button:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.lifeos-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-scrim);
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
  backdrop-filter: blur(var(--modal-blur)) saturate(1.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  z-index: 9999;
  animation: modal-scrim-in 0.28s ease both;
}

.lifeos-modal {
  position: relative;
  width: min(720px, 92vw);
  min-height: 500px;
  max-height: calc(100vh - 100px);
  background: var(--app-background);
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in-relative 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modal-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in-relative {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lifeos-modal,
  .lifeos-modal-backdrop {
    animation-duration: 0.01ms;
  }
}

/* === css/timeline_selection.css === */
/* ====================== Selection highlight for events ====================== */
#timeline-svg g.event-group,
#timeline-svg rect.event,
#timeline-svg g.task-status-marker,
#timeline-svg rect.task-status-bg,
#timeline-svg g.lifeos-project-pill,
#timeline-svg rect.lifeos-project-bar,
#timeline-svg rect.habit-bg-segment,
#timeline-svg g.habit-chip,
#timeline-svg g.habit-label,
#timeline-svg line.habit-connector {
  touch-action: none;
}

/* Editorial pills: no hard outline — the category color carries the pill,
   a soft warm shadow lifts it off the paper. */
rect.event {
  transition: stroke-width 120ms ease, fill-opacity 120ms ease, filter 120ms ease;
  stroke: transparent;
  stroke-width: 0;
  filter: drop-shadow(0 1px 2px rgba(40, 34, 20, 0.22));
}

rect.event.selected {
  stroke: var(--app-text-color, #16150f);
  stroke-width: 2.5px;
  paint-order: stroke;
}

/* Hover micro-interaction: the spine pill lifts and warms on hover */
#timeline-svg:not(.has-selection) rect.event:hover {
  filter: drop-shadow(0 3px 8px rgba(40, 34, 20, 0.32)) brightness(1.04);
  cursor: pointer;
}

.event-group.category-muted {
  opacity: 0.22;
  transition: opacity 150ms ease;
}

.event-group.category-muted rect.event {
  filter: grayscale(0.85);
}

.event-group.category-muted text,
.event-group.category-muted .event-text {
  opacity: 0.25;
}

/* Unified filter mute: dim non-matching items on the timeline */
.lifeos-type-muted {
  opacity: 0.55;
  filter: grayscale(0.45);
  pointer-events: none;
}

.event-group.lifeos-type-muted rect.event {
  opacity: 0.6;
}

.event-group.lifeos-type-muted text,
.event-group.lifeos-type-muted .event-text {
  opacity: 0.6;
}

g.lifeos-project-pill.lifeos-type-muted rect {
  opacity: 0.6;
}

g.task-status-marker.lifeos-type-muted {
  opacity: 0.55;
  filter: grayscale(0.45);
}

.lifeos-calendar-tag.category-muted {
  opacity: 0.3;
  filter: grayscale(0.8);
}

.lifeos-list-item.category-muted,
.lifeos-agenda-item.category-muted {
  opacity: 0.35;
  filter: grayscale(0.65);
}

/* When there is an active selection, dim non-selected to make selection pop */
#timeline-svg.has-selection rect.event {
  opacity: 0.18;
  filter: grayscale(0.8) brightness(0.7);
}
#timeline-svg.has-selection .event-group text,
#timeline-svg.has-selection .event-group .event-text {
  opacity: 0.15;
}
#timeline-svg.has-selection .event-group:has(rect.event.selected) text,
#timeline-svg.has-selection .event-group:has(rect.event.selected) .event-text {
  opacity: 1;
}

#timeline-svg.has-selection rect.event.selected {
  opacity: 1;
  stroke-width: 3px;
  /* Selected pill floats above the dimmed field */
  filter: drop-shadow(0 2px 8px rgba(40, 34, 20, 0.35));
}

/* ====================== Selection highlight for LifeOS overlays ====================== */
/* Project pills float as paper cards */
rect.lifeos-project-bar {
  filter: drop-shadow(0 1px 3px rgba(40, 34, 20, 0.18));
}

g.lifeos-project-pill.selected rect.lifeos-project-bar {
  stroke-width: 3px;
  paint-order: stroke;
}

rect.habit-bg-segment {
  transition: stroke-width 120ms ease, opacity 120ms ease, filter 120ms ease;
}

rect.habit-bg-segment.selected {
  stroke-width: 3px;
  paint-order: stroke;
}

g.task-status-marker.selected rect.task-status-bg {
  stroke: none;
  stroke-width: 0;
}

g.habit-chip.selected circle,
g.habit-chip.selected rect.habit-tick {
  stroke: var(--primary-color, #42b4ff);
  stroke-width: 2px;
  paint-order: stroke;
}

#timeline-svg.has-selection g.lifeos-project-pill,
#timeline-svg.has-selection path.lifeos-project-link,
#timeline-svg.has-selection rect.habit-bg-segment,
#timeline-svg.has-selection g.habit-chip,
#timeline-svg.has-selection g.habit-label,
#timeline-svg.has-selection line.habit-connector,
#timeline-svg.has-selection g.task-status-marker {
  opacity: 0.18;
  filter: grayscale(0.8) brightness(0.7);
}

#timeline-svg.has-selection path.lifeos-project-link {
  opacity: 1;
  stroke-opacity: 0.05;
  filter: none;
}

#timeline-svg.has-selection g.lifeos-project-pill.selected,
#timeline-svg.has-selection rect.habit-bg-segment.selected,
#timeline-svg.has-selection g.habit-chip.selected,
#timeline-svg.has-selection g.habit-label.selected,
#timeline-svg.has-selection line.habit-connector.selected,
#timeline-svg.has-selection g.task-status-marker.selected {
  opacity: 1;
  filter: none;
}

/* [ÚJ] Érvénytelen tömeges mozgatás vizuális jelzése */
#timeline-svg.invalid-move {
  cursor: not-allowed !important;
}

/* Összes esemény halvány piros árnyékot kap ütközéskor */
#timeline-svg.invalid-move rect.event {
  stroke: black;
  opacity: 0.7;
}

/* Kijelölt események még erősebb jelzést kapnak */
#timeline-svg.invalid-move rect.event.selected {
  stroke: #ff2d55;
  stroke-width: 3px;
  filter: drop-shadow(0 0 12px rgba(255, 45, 85, 0.8));
}

.event-text {
  pointer-events: none;
  user-select: none;
}

.task-status-icon {
  pointer-events: none;
}

/* Legacy always-on project link lines retired — the relation focus mode below
   is the single connection language (it has its own hover geometry; the two
   systems drawing different paths at once read as pointing at random things). */
#timeline-svg g.lifeos-project-links-layer {
  display: none;
}

/* ═══ Relationship focus mode (hover) ═══
   Hovered entity + its relation family stay sharp, connected by animated
   tethers; everything unrelated recedes. */
#timeline-svg.relation-active g.event-group:not(.relation-focus),
#timeline-svg.relation-active g.lifeos-project-pill:not(.relation-focus),
#timeline-svg.relation-active g.habit-chip:not(.relation-focus),
#timeline-svg.relation-active g.habit-label,
#timeline-svg.relation-active line.habit-connector,
#timeline-svg.relation-active path.lifeos-project-link {
  opacity: 0.16;
  filter: grayscale(0.5);
  transition: opacity 160ms ease, filter 160ms ease;
}

#timeline-svg.relation-active .relation-focus {
  opacity: 1;
}

#timeline-svg.relation-active .relation-focus rect.task-status-bg {
  stroke: var(--relation-accent, #5b78a8);
  stroke-width: 1.6px;
}

#timeline-svg.relation-active g.lifeos-project-pill.relation-focus rect.lifeos-project-bar {
  stroke: var(--relation-accent, #5b78a8);
}

path.relation-tether {
  stroke: var(--relation-accent, #5b78a8);
  stroke-width: 1.6px;
  fill: none;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  opacity: 0.9;
  animation: relationFlow 1.1s linear infinite;
}

circle.relation-node-dot {
  fill: var(--relation-accent, #5b78a8);
  opacity: 0.9;
}

circle.relation-target-ring {
  fill: var(--app-background, #fff);
  stroke: var(--relation-accent, #5b78a8);
  stroke-width: 1.8px;
  opacity: 0.95;
}

@keyframes relationFlow {
  to { stroke-dashoffset: -24; }
}

/* Entity markers (goal/task/journal SVG geometry) — hover lift matching the pills */
g.entity-mark {
  transition: filter 120ms ease;
}

#timeline-svg:not(.has-selection) g.task-status-marker:hover g.entity-mark {
  filter: drop-shadow(0 2px 5px rgba(40, 34, 20, 0.35)) brightness(1.05);
}

/* [ÚJ] Resize handlerek az események szélein – csak Selection módban aktívak */
g.event-group rect.resize-handle {
  display: none;
  fill: transparent;
  cursor: ew-resize;
}

#timeline-svg.selection-mode g.event-group rect.resize-handle {
  display: block;
}

/* Opcionális: kicsi vizuális visszajelzés hoverkor */
#timeline-svg.selection-mode g.event-group rect.resize-handle:hover {
  fill: rgba(0, 0, 0, 0.06);
}

/* ====================== Life OS cross-view highlight ====================== */
.lifeos-highlight {
  position: relative;
}

.lifeos-highlight::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--primary-color);
  pointer-events: none;
  animation: lifeos-border-blink 0.9s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

.lifeos-calendar-tag.lifeos-highlight {
  z-index: 2;
  animation: lifeos-cal-blink 0.9s ease-in-out infinite;
}

/* Calendar: villogó saját keret, ne külön rétegben */
.lifeos-calendar-tag.lifeos-highlight::after {
  display: none !important;
}

.lifeos-calendar-tag.lifeos-highlight {
  border: 2px solid var(--primary-color) !important;
}

.lifeos-list-item.lifeos-highlight,
.lifeos-agenda-item.lifeos-highlight {
  border-radius: 10px;
  z-index: 1;
}

/* Timeline focus pulse (SVG elements) */
.lifeos-pulse {
  animation: lifeos-pulse-halo 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

rect.event.lifeos-pulse {
  stroke: var(--primary-color);
  stroke-width: 2px;
}

/* Event group pulse (search highlight) */
g.event-group.lifeos-pulse {
  animation: lifeos-pulse-halo 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
g.event-group.lifeos-pulse rect.event {
  stroke: var(--primary-color);
  stroke-width: 2.5px;
  paint-order: stroke;
}

/* Project pills pulse */
g.lifeos-project-pill.lifeos-pulse rect.lifeos-project-bar {
  stroke: var(--primary-color);
  stroke-width: 2.5px;
  paint-order: stroke;
}
g.lifeos-project-pill.lifeos-pulse {
  animation: lifeos-pulse-halo 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

/* Task / Goal / Journal marker pulse */
g.task-status-marker.lifeos-pulse rect.task-status-bg {
  stroke: var(--primary-color);
  stroke-width: 2.5px;
  paint-order: stroke;
}
g.task-status-marker.lifeos-pulse {
  animation: lifeos-pulse-halo 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

/* Habit segment pulse */
rect.habit-bg-segment.lifeos-pulse {
  stroke: var(--primary-color);
  stroke-width: 2.5px;
  paint-order: stroke;
}

/* Habit chip pulse */
g.habit-chip.lifeos-pulse circle,
g.habit-chip.lifeos-pulse rect.habit-tick {
  stroke: var(--primary-color);
  stroke-width: 2.5px;
  paint-order: stroke;
}
g.habit-chip.lifeos-pulse {
  animation: lifeos-pulse-halo 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

@keyframes lifeos-pulse-halo {
  0% {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }

  50% {
    opacity: 0.75;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}

@keyframes lifeos-border-blink {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.65;
    transform: scale(1.015);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lifeos-cal-blink {
  0% {
    border-color: var(--primary-color);
    opacity: 1;
  }

  50% {
    border-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
    opacity: 0.6;
  }

  100% {
    border-color: var(--primary-color);
    opacity: 1;
  }
}

/* === css/event_tasks_section.css === */
/* Event Tasks Section */
.event-tasks-section {
  font-size: 12px;
}

.event-tasks-label {
  display: block;
  font-size: 16px;
  color: var(--primary-color);
  margin-left: 5px;
  font-weight: 600;
}

.event-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lifeos-sources-section {
  margin-bottom: 20px;
}

.lifeos-sources-section .event-tasks-header p {
  margin-top: -60px;
  margin-left: -12px;
  color: var(--primary-color);
  font-size: 1.1rem;
  ;
}

.event-tasks-count {
  color: var(--text-muted, #888);
  font-weight: 400;
  font-size: 12px;
}

.event-tasks-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-style: italic;
  opacity: 0.4;
  color: var(--primary-color);
  padding: 2px 0;
}

.lifeos-links-empty {
  padding: 12px 16px;
}

.lifeos-links-empty i {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

/* Filter row for tasks */
.event-tasks-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.event-tasks-controls .event-tasks-filter,
.event-tasks-controls #eventTasksPriorityFilter {
  display: flex;
  gap: 6px;
}

.event-tasks-section > .lifeos-add-btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* Responsive breakpoints for event tasks controls */
@media (max-width: 768px) {
  .event-tasks-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .event-tasks-filter {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .event-tasks-controls {
    gap: 6px;
  }

  .event-tasks-filter {
    gap: 4px;
  }

  .task-filter-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Life OS Sources Section Toggle */
.lifeos-sources-section .event-tasks-header {
  position: relative;
  padding-right: 44px;
}

#lifeos-sources-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.lifeos-attachment-summary {
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 6px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lifeos-sources-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 1.25em;
  min-width: 1.25em;
  min-height: 1.25em;
  flex: 0 0 1.25em;
  transition: transform 0.2s ease;
}

.lifeos-sources-toggle.is-expanded {
  transform: translateY(-50%) rotate(180deg);
}

.lifeos-sources-body {
  max-height: 2000px;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
  opacity: 1;
}

.lifeos-sources-body.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Collapsed Sources wrapper height (inline + linked) */
.lifeos-modal .lifeos-sources-section.lifeos-collapsed {
  height: 38px;
  padding: 0;
}

.lifeos-modal .lifeos-sources-section.lifeos-collapsed>.event-tasks-header {
  height: 38px;
  padding: 0 44px 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Project Entities Section */
.project-entities-section {
  font-size: 12px;
  margin-top: 0;
  padding: 15px;
  border-radius: 6px;
  background: var(--app-background);
}

.project-entities-section .event-tasks-header p {
  margin: 0;
  color: var(--primary-color);
}

.project-entities-count {
  color: var(--text-muted, #888);
  font-weight: 400;
}

.project-entities-section .event-tasks-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.entity-filter-btn {
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  height: initial;
}

.entity-filter-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
  background-color: var(--primary-color);
  color: var(--app-background);
}

.entity-filter-btn.active {
  background: var(--primary-color);
  color: var(--app-background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.project-entities-list {
  max-height: 300px;
  overflow-y: auto;
}

.project-entity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border-overlay);
}

.project-entity-item:hover {
  background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

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

.theme-day .project-entities-section .project-entity-item:hover {
  background: var(--surface-hover-day);
}

.theme-day .project-entities-section .project-entity-item {
  border-bottom-color: var(--border-soft);
}

.entity-type-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 40px;
  flex-shrink: 0;
  margin-top: -3px;
}

.entity-type-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: var(--primary-color);
  font-size: 16px;
}

.entity-type-label {
  font-size: 10px;
  text-transform: lowercase;
  color: var(--text-muted, #888);
  line-height: 1;
  margin-top: -5px;
}

.entity-item-content {
  flex: 1;
  min-width: 0;
}

.project-entity-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
}

.project-entity-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-entity-remove i {
  transition: transform 0.2s ease;
}

.project-entity-remove:hover,
.project-entity-remove:focus-visible {
  background: transparent;
}

.project-entity-remove:hover i,
.project-entity-remove:focus-visible i {
  transform: rotate(30deg) scale(1.15);
}

.entity-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entity-item-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-item-status {
  flex-shrink: 0;
}

.entity-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted, #888);
}

.entity-item-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.entity-item-date i {
  font-size: 10px;
  opacity: 0.7;
}

/* Entity type specific colors */
.project-entity-item[data-entity-type="task"] .entity-type-icon {
  background: transparent;
  color: var(--primary-color);
}

.project-entity-item[data-entity-type="event"] .entity-type-icon {
  background: transparent;
  color: var(--primary-color);
}

.project-entity-item[data-entity-type="journal"] .entity-type-icon {
  background: transparent;
  color: var(--primary-color);
}

/* Task Overview Modal Layout Fix */
#taskOverviewModalButtons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  /* Remove from flex flow to let body expand fully */
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  width: fit-content;
  background-color: var(--modal-buttons-accent);
  border-radius: 0 12px 0 0;
  padding: 5px 10px;
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

#taskOverviewModalButtons button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#task-overview-modal .lifeos-modal-body {
  padding-bottom: 50px;
  /* Extra bottom padding for floating buttons */
}

/* Filter toggle button needs relative positioning for badge */
#lifeos-filter-toggle {
  position: relative;
}

/* === css/timeline_filter_controls.css === */
/* Divider between filter groups */
.lifeos-filter-divider {
  height: 1px;
  background: color-mix(in srgb, var(--primary-color) 7%, transparent);
  margin: 4px 0;
}

.lifeos-filter-modal .lifeos-filter-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px !important;
  color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
  margin-left: 2px;
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lifeos-filter-modal .lifeos-filter-group label i {
  font-size: 9px;
  opacity: 0.6;
}

.lifeos-filter-group select,
.lifeos-filter-group input[type="date"] {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: var(--primary-color);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s;
}

.lifeos-filter-group select:focus,
.lifeos-filter-group input[type="date"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.lifeos-filter-dates .lifeos-date-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lifeos-date-separator {
  color: color-mix(in srgb, var(--primary-color) 30%, transparent);
  font-size: 14px;
}

.lifeos-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lifeos-type-buttons button {
  height: initial;
}

.lifeos-type-btn i {
  margin-right: 2px;
  font-size: 10px;
  opacity: 0.7;
}

.lifeos-type-btn {
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: color-mix(in srgb, var(--primary-color) 60%, transparent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s ease;
  font-family: "Montserrat", sans-serif;
}

.lifeos-type-btn:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.lifeos-type-btn.active {
  background: var(--primary-color);
  color: var(--app-background);
  border-color: var(--primary-color);
}

.lifeos-type-btn.active i {
  opacity: 1;
}

.lifeos-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ─── Filter badge (navbar) ─── */
.lifeos-filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent-danger);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: "Montserrat", sans-serif;
}

/* ─── Clear All Filters button (modal header) ─── */
.lifeos-filter-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  background: rgba(255,255,255,0.1);
  color: var(--app-background);
  font-size: 11px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.lifeos-filter-clear-all:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
  color: var(--app-background);
}

.lifeos-filter-clear-all i {
  font-size: 10px;
}

/* ─── Active filter group label highlight ─── */
.lifeos-filter-label--active {
  color: var(--accent-color, #3498db) !important;
  font-weight: 700 !important;
  position: relative;
}

.lifeos-filter-label--active::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color, #3498db);
  margin-left: 5px;
  vertical-align: middle;
}

.lifeos-filter-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 16px 20px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* === css/timeline_filter_demo.css === */
.demo-timeline-container {
  margin-top: 0;
  position: relative;
  text-align: left;
  --demo-onb-accent: color-mix(in srgb, var(--primary-color) 72%, var(--app-background));
  --demo-onb-accent-strong: var(--primary-color);
  --demo-onb-border: color-mix(in srgb, var(--primary-color) 24%, transparent);
  --demo-onb-border-strong: color-mix(in srgb, var(--primary-color) 40%, transparent);
  --demo-onb-surface: color-mix(in srgb, var(--app-background) 94%, var(--primary-color) 6%);
  --demo-onb-text: color-mix(in srgb, var(--primary-color) 82%, var(--app-background));
  --demo-onb-text-soft: color-mix(in srgb, var(--primary-color) 58%, var(--app-background));
  --onb-accent: var(--demo-onb-accent);
  --onb-accent-strong: var(--demo-onb-accent-strong);
  --onb-text-main: var(--demo-onb-text);
  --onb-text-soft: var(--demo-onb-text-soft);
  background: transparent;
  border-radius: 14px;
}

.demo-timeline-container .onb-import-layer {
  border-radius: 12px;
  background:
    radial-gradient(
      450px circle at 50% 20%,
      color-mix(in srgb, var(--primary-color) 16%, transparent) 0%,
      transparent 64%
    ),
    color-mix(in srgb, var(--app-background) 64%, transparent);
}

.demo-timeline-container.onb-importing .onb-import-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.demo-timeline-container.onb-importing .demo-timeline-card,
.demo-timeline-container.onb-importing .demo-onboarding-skip {
  pointer-events: none;
}

.demo-timeline-container .onb-import-shell {
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  background: linear-gradient(
    162deg,
    color-mix(in srgb, var(--app-background) 92%, var(--primary-color) 8%) 0%,
    color-mix(in srgb, var(--app-background) 96%, var(--primary-color) 4%) 100%
  );
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.demo-timeline-container .onb-orbit-a {
  border-top-color: color-mix(in srgb, var(--primary-color) 84%, var(--app-background));
  border-right-color: color-mix(in srgb, var(--primary-color) 46%, transparent);
}

.demo-timeline-container .onb-orbit-b {
  border-top-color: color-mix(in srgb, var(--primary-color) 46%, var(--app-background));
  border-left-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.demo-timeline-container .onb-core {
  background: var(--primary-color);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.timeline-import-container {
  position: relative;
  overflow: hidden;
  --onb-accent: color-mix(in srgb, var(--primary-color) 72%, var(--app-background));
  --onb-accent-strong: var(--primary-color);
  --onb-text-main: color-mix(in srgb, var(--primary-color) 82%, var(--app-background));
  --onb-text-soft: color-mix(in srgb, var(--primary-color) 58%, var(--app-background));
  background: none !important;
}

.timeline-import-hint {
  margin: 8px auto 0;
  max-width: 280px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--primary-color) 58%, var(--app-background));
  text-align: center;
}

.timeline-import-container .onb-import-layer {
  border-radius: 12px;
  padding: 0;
  background: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.timeline-import-container.onb-importing #importCalendar {
  opacity: 0;
  pointer-events: none;
}

.timeline-import-container .onb-import-shell {
  min-width: 0;
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.timeline-import-container .onb-import-loader {
  width: 42px;
  height: 42px;
  margin: 0 0 6px;
}

.timeline-import-container .onb-import-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.timeline-import-container .onb-orbit-a {
  border-top-color: color-mix(in srgb, var(--primary-color) 84%, var(--app-background));
  border-right-color: color-mix(in srgb, var(--primary-color) 46%, transparent);
}

.timeline-import-container .onb-orbit-b {
  border-top-color: color-mix(in srgb, var(--primary-color) 46%, var(--app-background));
  border-left-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.timeline-import-container .onb-core {
  background: var(--primary-color);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.timeline-import-container.onb-importing .onb-import-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.demo-onboarding-intro {
  border: 1px solid var(--demo-onb-border);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--demo-onb-accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--primary-color) 10%, transparent) 38%,
      transparent 65%);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
}

.demo-onboarding-intro h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--demo-onb-text);
}

.demo-onboarding-intro p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--demo-onb-text-soft);
}

.demo-onboarding-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-onboarding-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--demo-onb-border);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--demo-onb-text-soft);
}

.demo-onboarding-skip {
  margin-top: 10px;
  border: 1px dashed var(--demo-onb-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-background) 90%, var(--primary-color) 10%);
  color: var(--demo-onb-text);
  font-size: 11px;
  padding: 6px 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.demo-onboarding-skip:hover {
  border-color: var(--demo-onb-accent);
  background-color: color-mix(in srgb, var(--app-background) 82%, var(--primary-color) 18%);
}

.demo-timeline-title {
  margin: 0;
  font-weight: 600;
  color: var(--demo-onb-text);
  font-size: 13px;
  text-align: center;
}

.demo-timeline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.demo-timeline-list.loading {
  opacity: 0.7;
}

.demo-timeline-card {
  width: 100%;
  min-height: 150px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--list-group-surface);
  box-shadow: none;
  color: var(--demo-onb-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.demo-timeline-container .onb-demo-card {
  background: var(--list-group-surface);
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
  box-shadow: none;
}

.demo-timeline-card:hover {
  border-color: color-mix(in srgb, var(--primary-color) 26%, transparent);
  box-shadow: none;
  background: var(--list-group-surface);
  transform: translateY(-1px);
}

.demo-timeline-container .onb-demo-card:hover {
  background: var(--list-group-surface);
  border-color: color-mix(in srgb, var(--primary-color) 26%, transparent);
  box-shadow: none;
}

.demo-timeline-container .onb-demo-card.onb-active {
  border-color: color-mix(in srgb, var(--primary-color) 34%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--app-background) 88%, var(--primary-color) 12%) 0%,
      color-mix(in srgb, var(--app-background) 94%, var(--primary-color) 6%) 100%
    );
  box-shadow: none;
}

.demo-timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.demo-timeline-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--demo-onb-text);
}

.demo-timeline-format {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--demo-onb-border);
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
  color: var(--demo-onb-text-soft);
}

.demo-timeline-description {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--demo-onb-text-soft);
}

.demo-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-timeline-chip {
  font-size: 10px;
  border: 1px solid var(--demo-onb-border);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--demo-onb-text-soft);
}

.demo-timeline-action {
  margin-top: 2px;
  width: 100%;
  min-height: 34px;
  font-size: 12px;
  border-radius: 8px;
}

.demo-timeline-item {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
}

.demo-timeline-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.demo-timeline-empty {
  font-size: 12px;
  opacity: 0.8;
  margin: 6px 0;
}

@media (max-width: 580px) {
  .demo-onboarding-steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .demo-timeline-list {
    grid-template-columns: 1fr;
  }
}

/* === css/timeline_filter_modal.css === */
.lifeos-filter-modal__dialog {
  width: min(540px, 94vw);
  background: var(--app-background);
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.05) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.lifeos-filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--primary-color);
  color: var(--app-background);
}

.lifeos-filter-modal__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.lifeos-filter-modal__header h3 i {
  font-size: 14px;
}

.lifeos-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lifeos-filter-modal__header button {
  background: transparent;
  border: none;
  color: var(--app-background);
  font-size: 18px;
  cursor: pointer;
}


.lifeos-filter-modal__body {
  padding: 0 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 80vh;
  overflow-y: auto;
}

/* Filter modal should look/behave like the LifeOS entity modal (but compact). */
.lifeos-modal.lifeos-modal--filter {
  width: min(540px, 94vw);
  min-height: 0;
  max-height: calc(100vh - 80px);
}

.lifeos-modal.lifeos-modal--filter .lifeos-filter-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-height: none;
}

.lifeos-filter-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lifeos-filter-search-query {
  grid-column: 1 / -1;
  margin-top: 0;
}

.lifeos-filter-search-query label {
  display: none;
}

.lifeos-filter-search-grid .lifeos-form-group label {
  font-size: 10px !important;
  color: color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

#lifeos-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: var(--primary-color);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#lifeos-search-input::placeholder {
  color: color-mix(in srgb, var(--primary-color) 30%, transparent);
  font-size: 12px;
}

#lifeos-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 6%, transparent);
}

@media (max-width: 560px) {
  .lifeos-filter-search-grid {
    grid-template-columns: 1fr;
  }
}

.lifeos-filter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Filter sections */
#lifeos-filter-search-section,
#lifeos-filter-fields-section {
  padding: 0;
  border-radius: 0;
  background: none;
  margin-bottom: 0;
}

/* Separate search vs filters visually */
.lifeos-filter-modal__body #lifeos-filter-search-section {
  margin-top: 0;
  margin-bottom: 0;
  padding: 14px 0;
}

.lifeos-filter-modal__body #lifeos-filter-fields-section {
  padding: 14px 0;
}

/* Full-width section bars inside filter modal (like shared-by-you) */
.lifeos-filter-section-bar {
  margin-left: -18px !important;
  margin-right: 0 !important;
  width: calc(100% + 36px) !important;
  font-size: 14px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  touch-action: none;
  overscroll-behavior: none;
}

.lifeos-filter-section-bar:first-of-type {
  margin-top: 0 !important;
}

.lifeos-filter-section-bar i {
  margin-right: 2px;
}

.lifeos-filter-section__title {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 2px 0;
  color: color-mix(in srgb, var(--primary-color) 35%, transparent);
  display: flex;
  align-items: center;
  gap: 5px;
}

.lifeos-filter-section__title i {
  font-size: 9px;
  opacity: 0.5;
}

.lifeos-filter-search .input-group {
  margin: 0;
}

.lifeos-filter-search .sort-options {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lifeos-filter-search .sort-options label {
  margin: 0;
}

.lifeos-search-results {
  margin-top: 10px;
  border-radius: 6px;
  padding: 15px;
  background: var(--app-background);
}

.theme-day .lifeos-search-results {
  background: var(--surface-day-field);
  margin-bottom: 30px;
}

body.theme-night-1 .lifeos-search-results,
body.theme-night-1 #lifeos-searchResultList,
body.theme-night-1 #lifeos-searchResultList .search-result-element {
  background: var(--surface-night-field);
}

body.theme-night-2 .lifeos-search-results,
body.theme-night-2 #lifeos-searchResultList,
body.theme-night-2 #lifeos-searchResultList .search-result-element {
  background: var(--surface-night-alt-field);
}

.lifeos-search-results ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#lifeos-searchResultList {
  background: var(--app-background);
  max-height: 300px;
  overflow-y: auto;
  padding-right: 15px;
  margin-right: -15px;
}

.theme-day #lifeos-searchResultList {
  background: var(--surface-day-field);
}

#lifeos-searchResultList .search-result-element {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid var(--border-overlay);
  border-radius: 0;
  transition: background 0.2s;
}

#lifeos-searchResultList li:last-child .search-result-element {
  border-bottom: none;
}

.theme-day #lifeos-searchResultList .search-result-element {
  border-bottom-color: var(--border-soft);
}

#lifeos-searchResultList .search-result-element:hover {
  background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

.theme-day #lifeos-searchResultList .search-result-element:hover {
  background: var(--surface-hover-day);
}

#lifeos-searchResultList li.search-result-selected .search-result-element {
  background: var(--primary-color-dim, rgba(66, 180, 255, 0.18));
  border-left: 3px solid var(--primary-color);
}

.theme-day #lifeos-searchResultList li.search-result-selected .search-result-element {
  background: var(--primary-color-dim, rgba(66, 180, 255, 0.12));
  border-left: 3px solid var(--primary-color);
}

/* Buttons bar: floating bottom-left close button */
#lifeos-filter-buttons.modal-buttons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  width: fit-content;
  background-color: var(--modal-buttons-accent);
  border-radius: 0 12px 0 0;
  padding: 5px 10px;
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  align-self: auto;
}

#lifeos-filter-buttons.modal-buttons button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#lifeos-filter-buttons .lifeos-filter-clear-all {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 16px;
}

#lifeos-filter-buttons .lifeos-filter-clear-all i {
  font-size: 16px;
}

#lifeos-filter-buttons .lifeos-filter-clear-all:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: transparent;
}

.lifeos-filter-modal .search-result-element {
  color: var(--primary-color);
  padding: 8px 10px;
}

.lifeos-filter-modal .search-result-element:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.lifeos-filter-modal__buttons.modal-buttons {
  align-self: flex-start;
  width: auto;
  margin: 0;
  margin-left: -1px;
  margin-top: 1px;
}

/* === css/timeline_filter_dropdowns.css === */
/* Filter groups within the section (no .lifeos-filter-bar wrapper) */
#lifeos-filter-fields-section > .lifeos-filter-group,
#lifeos-filter-fields-section > .lifeos-filter-entity-grid,
#lifeos-filter-fields-section > .lifeos-filter-divider {
  margin-top: 0;
}

.lifeos-filter-entity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lifeos-filter-modal__body .lifeos-filter-dates {
  grid-column: auto;
}

.lifeos-filter-modal__body .lifeos-type-toggles,
.lifeos-filter-modal__body .lifeos-filter-tags-group,
.lifeos-filter-modal__body .lifeos-filter-status-group {
  grid-column: 1 / -1;
}

/* Status chips (multi-select) */
.lifeos-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lifeos-status-chips button {
  height: initial;
}

.lifeos-status-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: color-mix(in srgb, var(--primary-color) 60%, transparent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  transition: all 0.15s ease;
}

.lifeos-status-chip:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.lifeos-status-chip.active {
  background: var(--primary-color);
  color: var(--app-background);
  border-color: var(--primary-color);
}

/* Date clear button */
.lifeos-date-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  opacity: 0.5;
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}

.lifeos-date-clear:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Searchable dropdown */
.lifeos-searchable-dropdown {
  position: relative;
  display: block;
}

.lifeos-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: var(--primary-color);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  transition: border-color 0.15s;
}

.lifeos-dropdown-trigger:hover {
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.lifeos-dropdown-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lifeos-dropdown-trigger i.fa-chevron-down {
  font-size: 12px;
  opacity: 0.6;
  margin-left: 8px;
}

.lifeos-dropdown-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  background: var(--app-background);
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.lifeos-searchable-dropdown.open .lifeos-dropdown-menu {
  display: block !important;
}

/* Bottom-row dropdowns open upward to avoid overflow clipping */
.lifeos-searchable-dropdown.drop-up .lifeos-dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

.lifeos-dropdown-options {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.lifeos-dropdown-options li {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.lifeos-dropdown-check {
  display: inline-block;
  width: 16px;
  font-size: 12px;
  flex-shrink: 0;
  text-align: center;
}

.lifeos-dropdown-options li:hover {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.lifeos-dropdown-options li.selected {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  font-weight: 600;
}

@media (max-width: 560px) {
  .lifeos-filter-entity-grid {
    grid-template-columns: 1fr;
  }

  .lifeos-filter-search-grid {
    grid-template-columns: 1fr;
  }
}

.lifeos-map-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lifeos-map-input input[type="text"] {
  flex: 1;
}

.lifeos-map {
  margin-top: 5px;
  width: 100%;
  min-height: 240px;
  border: 1px solid #d2d6dc;
  border-radius: 10px;
  overflow: hidden;
}

.lifeos-map-controls {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.lifeos-map-controls button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d2d6dc;
  background: var(--app-background);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lifeos-photo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* === css/lifeos_entity_modal_layout.css === */
.lifeos-modal {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* LifeOS entity modal layout: scroll area contains form + comments, buttons stay pinned */
.lifeos-modal-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  padding-bottom: 70px; /* clearance for absolute-positioned #lifeos-modal-buttons */
}

.lifeos-modal #lifeos-modal-form {
  flex: none;
  display: block;
  overflow: visible;
}

#timeline-modal .lifeos-modal-scroll,
.lifeos-modal-scroll {
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

/* Timeline modal uses a dedicated scroll wrapper under the header */
#timeline-modal .lifeos-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.lifeos-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--primary-color);
  color: var(--lifeos-modal-contrast, var(--app-background));
  position: sticky;
  top: 0;
  z-index: 10;
  touch-action: none;
  overscroll-behavior: none;
  /* width: calc(100% - 5px);
  border-bottom-right-radius: 12px; */
}

.lifeos-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lifeos-modal-actions button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--hover-overlay-dark-strong);
  color: var(--app-background);
  cursor: pointer;
  font-weight: 600;
}

.lifeos-modal-actions button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lifeos-modal-header h3 {
  margin: 0;
  font-size: 16px;
}

#lifeos-modal-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.lifeos-modal-title-edit-mode {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.8;
}

.lifeos-modal-entity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: inherit;
}

.lifeos-modal-entity-icon i {
  color: inherit;
}

.lifeos-modal-header button {
  background: transparent;
  border: none;
  color: var(--lifeos-modal-contrast, var(--app-background));
  font-size: 18px;
  cursor: pointer;
}

.lifeos-modal-body {
  flex: none;
  overflow: visible;
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lifeos-modal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 5%, var(--app-background));
}

.lifeos-modal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lifeos-modal-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary-color) 78%, transparent);
}

.lifeos-modal-section-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Task modal: due/status/priority egy sorban */
.lifeos-task-toprow {
  gap: 12px;
  align-items: flex-end;
}

.lifeos-inline-narrow {
  min-width: 140px;
}

#lifeos-modal-buttons {
  --modal-buttons-accent: var(--primary-color);
  --modal-buttons-contrast: var(--app-background);
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  width: fit-content;
  background-color: var(--modal-buttons-accent);
  border-radius: 0 12px 0 0;
  padding: 5px 10px;
  box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.lifeos-modal #lifeos-modal-buttons.modal-buttons button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 2px solid transparent;
  color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

.lifeos-readonly #lifeos-modal-submit,
.lifeos-readonly #lifeos-modal-delete {
  display: none !important;
}

/* ===================================================================
   EDITORIAL SHEET — modal shell redesign
   Makes every LifeOS-shell dialog read like the warm-paper timeline:
   serif masthead, glass-depth header, tamed accent edge, calmer
   section cards, modern functional fields & footer. CSS-only; the
   per-entity accent colour (set inline by JS) is kept but refined.
   =================================================================== */

/* --- Sheet: soften the neon accent border JS paints inline --- */
.lifeos-modal[style*="border"],
.lifeos-modal {
  border-color: color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 34%, transparent) !important;
}

/* --- Masthead: serif title + painted glass depth over the accent fill --- */
.lifeos-modal-header {
  padding: 15px 18px;
  overflow: hidden;
}

.lifeos-modal-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--modal-header-sheen);
  pointer-events: none;
  z-index: 0;
}

.lifeos-modal-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--modal-header-foot);
  pointer-events: none;
  z-index: 1;
}

.lifeos-modal-header > * {
  position: relative;
  z-index: 1;
}

.lifeos-modal-header h3,
#lifeos-modal-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.lifeos-modal-title-edit-mode {
  font-family: var(--font-sans);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Entity glyph → a soft circular chip on the accent */
.lifeos-modal-entity-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: 16px;
  flex: none;
}

/* Header action buttons → circular ghost controls */
.lifeos-modal-header button,
.lifeos-modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid transparent;
  transition: background 0.16s ease, transform 0.16s ease;
}

.lifeos-modal-header button:hover,
.lifeos-modal-actions button:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

/* --- Body & section cards --- */
.lifeos-modal-body {
  padding: 18px 18px 20px;
  gap: 14px;
}

.lifeos-modal-section {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--modal-section-bg);
  border: 1px solid var(--modal-section-border);
}

.lifeos-modal-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--modal-label);
}

/* --- Footer: keep the accent corner-pill, drop the 2013 rotate gimmick --- */
#lifeos-modal-buttons.modal-buttons {
  padding: 7px 10px;
  border-radius: 0 var(--radius-md) 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    6px -6px 18px -4px rgba(40, 34, 20, 0.28);
  gap: 2px;
}

.lifeos-modal #lifeos-modal-buttons.modal-buttons button {
  transition: background 0.16s ease, transform 0.16s ease;
}

.lifeos-modal #lifeos-modal-buttons.modal-buttons button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.lifeos-modal .modal-buttons button:hover i {
  transform: scale(1.08);
}

/* Timeline modal: serif hero title to match the editorial masthead */
#timeline-modal .timeline-title-display,
#timeline-modal #timeline-title,
#timeline-modal #timeline-title:disabled {
  font-family: var(--font-serif) !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

/* === css/lifeos_entity_modal_fields.css === */
/* Engedjük a Task gombot readonly módban is */
.lifeos-readonly #eventAddTaskBtn {
  pointer-events: auto;
  opacity: 1;
}

.lifeos-type-task #lifeos-modal-buttons {
  position: absolute;
}

.lifeos-modal:not(.edit-mode) #lifeos-add-photo,
.lifeos-modal:not(.edit-mode) .lifeos-add-photo {
  display: none;
}

.lifeos-modal.edit-mode #lifeos-modal-edit {
  display: none !important;
}

.lifeos-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field {
  padding-left: 0;
}

.lifeos-form-group label {
  font-size: 16px;
  color: var(--primary-color);
  margin-left: 5px;
  font-weight: 600;
}

label[for="lifeos-add-location"] {
  margin-top: 20px;
}


.lifeos-required-asterisk {
  display: none;
  font-weight: 700;
  color: var(--danger-color, var(--primary-color));
}

/* Show required asterisks only when the modal is editable */
.lifeos-modal.lifeos-required-visible .lifeos-req-title {
  display: inline;
}

.lifeos-modal.lifeos-required-visible.lifeos-type-event .lifeos-req-event-start {
  display: inline;
}

.lifeos-modal.lifeos-required-visible.lifeos-type-project .lifeos-req-project-start,
.lifeos-modal.lifeos-required-visible.lifeos-type-project .lifeos-req-project-end {
  display: inline;
}

.lifeos-modal.lifeos-required-visible.lifeos-type-goal .lifeos-req-goal-due {
  display: inline;
}


#lifeos-photo-section {
  margin-top: 0;
}

.lifeos-form-help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 5px;
}

#eventTasksSection {
  margin-top: 0;
  margin-bottom: 0;
  padding: 15px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}

.lifeos-modal .lifeos-sources-section {
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}

.lifeos-modal .lifeos-sources-section:first-child {
  margin-top: 0;
}

/* Resource modal: show Sources fields without wrapper styling or collapsing UI */
.lifeos-modal.lifeos-type-resource .lifeos-sources-section {
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

.lifeos-modal.lifeos-type-resource #lifeos-sources-header {
  display: none !important;
}

.lifeos-modal.lifeos-type-resource .lifeos-sources-body {
  max-height: none;
  overflow: visible;
  opacity: 1;
  transition: none;
}

.lifeos-modal.lifeos-type-resource .lifeos-sources-body.collapsed {
  max-height: none;
  opacity: 1;
}

.lifeos-documents-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.lifeos-modal:not(.edit-mode) #lifeos-documents-add,
.lifeos-modal:not(.edit-mode) #lifeos-audio-notes-add,
.lifeos-modal:not(.edit-mode) #lifeos-audio-note-toggle,
.lifeos-modal:not(.edit-mode) .lifeos-documents-add,
.lifeos-modal:not(.edit-mode) .lifeos-audio-notes-add,
.lifeos-modal:not(.edit-mode) .lifeos-audio-note-toggle,
.lifeos-modal:not(.edit-mode) .lifeos-files-add {
  display: none;
}

.lifeos-documents-list {
  list-style: none;
  padding: 10px;
  margin-top: -12px;
  border-radius: 6px;
  min-height: 38px;
}

.lifeos-audio-notes-section {
  margin-top: 12px;
}

.lifeos-document-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.lifeos-document-item a {
  color: var(--primary-color);
  text-decoration: none;
  word-break: break-all;
}

.lifeos-document-item a:hover {
  text-decoration: underline;
}

.lifeos-document-remove {
  margin-left: auto;
  cursor: pointer;
  display: none;
  background-color: transparent;
  transition: transform 0.3s ease;
}

.lifeos-document-remove:hover {
  transform: rotate(20deg);
}

.lifeos-modal.edit-mode .lifeos-document-remove {
  display: inline;
  border: none;
  background-color: transparent;
}

.lifeos-modal.edit-mode .lifeos-document-remove:hover {
  scale: 1.2;
}

.lifeos-documents-empty {
  padding: 12px 16px;
  margin-top: 10px;
}

.lifeos-documents-empty i {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.lifeos-audio-player {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

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

.lifeos-audio-player-header p {
  margin: 0;
  font-weight: 600;
  color: var(--primary-color);
}

.lifeos-audio-player-header button {
  background: transparent;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
}

.lifeos-audio-player-title {
  margin: 0 0 8px;
  color: var(--text-muted, #888);
  font-size: 12px;
}

.lifeos-audio-player audio {
  width: 100%;
}

#lifeos-files-section {
  margin-top: 20px;
}

.lifeos-habit-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lifeos-habit-day {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.lifeos-habit-day input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lifeos-habit-day span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--secondary-color);
  background: var(--app-background);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease,
    border-color 0.12s ease;
}

.lifeos-habit-day input:checked+span {
  background: var(--primary-color);
  color: var(--app-background);
  border-color: var(--primary-color);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.lifeos-habit-day input:focus-visible+span {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
  outline-offset: 2px;
}

.lifeos-habit-day input:disabled+span {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.lifeos-modal.edit-mode .lifeos-form-group input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group select:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group textarea:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-links-input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-datetime-group input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]) {
  border: 1px solid color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 38%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 10%, transparent);
}

.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field select:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field textarea:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field .lifeos-links-input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field .lifeos-datetime-group input:not(:disabled):not([readonly]),
.lifeos-modal.edit-mode .lifeos-form-group.lifeos-editable-field .lifeos-datetime-group .flatpickr-input:not(:disabled):not([readonly]) {
  border-color: color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 58%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 16%, transparent);
}

.lifeos-form-group input,
.lifeos-form-group select,
.lifeos-form-group textarea {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--app-background);
  color: var(--primary-color);
  font-family: "Montserrat", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
}

.lifeos-modal .lifeos-links-input:not(:disabled):not([readonly]) {
  border-color: var(--lifeos-modal-accent, var(--primary-color)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 35%, transparent);
}

.lifeos-modal #lifeos-links-input:not(:disabled):not([readonly]) {
  border-color: var(--lifeos-modal-accent, var(--primary-color)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 35%, transparent);
}

.lifeos-readonly .lifeos-form-group input,
.lifeos-readonly .lifeos-form-group select,
.lifeos-readonly .lifeos-form-group textarea {
  box-shadow: none;
}

.lifeos-readonly .lifeos-form-group input,
.lifeos-readonly .lifeos-form-group select {
  pointer-events: none;
}

.lifeos-readonly #lifeos-field-description {
  pointer-events: auto;
  overflow-y: auto;
}

/* Hide map action buttons in read-only mode */
.lifeos-readonly .lifeos-map-search-btn,
.lifeos-readonly .lifeos-map-locate-btn {
  display: none;
}

#lifeos-linked-sources-section {
  margin-top: 20px;
}

/* Linked sources must look read-only even when the main modal is in edit-mode */
.lifeos-modal #lifeos-linked-sources-section .lifeos-form-group input,
.lifeos-modal #lifeos-linked-sources-section .lifeos-form-group select,
.lifeos-modal #lifeos-linked-sources-section .lifeos-form-group textarea,
.lifeos-modal #lifeos-linked-sources-section .lifeos-links-input {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lifeos-modal #lifeos-linked-sources-section .lifeos-form-group input,
.lifeos-modal #lifeos-linked-sources-section .lifeos-form-group select,
.lifeos-modal #lifeos-linked-sources-section .lifeos-links-input {
  pointer-events: none;
}

/* Hide action buttons inside linked sources (they are never editable) */
.lifeos-modal #lifeos-linked-sources-section .lifeos-map-search-btn,
.lifeos-modal #lifeos-linked-sources-section .lifeos-map-locate-btn,
.lifeos-modal #lifeos-linked-sources-section .lifeos-add-photo,
.lifeos-modal #lifeos-linked-sources-section .lifeos-documents-add,
.lifeos-modal #lifeos-linked-sources-section .lifeos-audio-notes-add,
.lifeos-modal #lifeos-linked-sources-section .lifeos-audio-note-toggle,
.lifeos-modal #lifeos-linked-sources-section .lifeos-files-add,
.lifeos-modal #lifeos-linked-sources-section .lifeos-links-input-row button {
  display: none !important;
}

.lifeos-form-group select[multiple] {
  min-height: 90px;
}

/* ===================================================================
   EDITORIAL SHEET — fields
   Crisp bordered inputs on the warm section cards, quieter labels,
   a clear accent focus ring. Edit-mode accent borders (higher
   specificity, above) still win when the sheet is editable.
   =================================================================== */
.lifeos-form-group label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--modal-label);
  margin-left: 2px;
}

.lifeos-form-group input,
.lifeos-form-group select,
.lifeos-form-group textarea {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--modal-field-border);
  background: var(--modal-field-bg);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.lifeos-form-group input:focus,
.lifeos-form-group select:focus,
.lifeos-form-group textarea:focus,
.lifeos-form-group input:focus-visible,
.lifeos-form-group select:focus-visible,
.lifeos-form-group textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 85%, transparent);
  outline-offset: 1px;
  border-color: transparent;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 15%, transparent);
}

/* === css/lifeos_entity_modal_dropdown.css === */
/* Searchable multi-select dropdown used for Project field */
.lifeos-multiselect {
  position: relative;
}

.lifeos-multiselect-trigger {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--secondary-color);
  border-radius: 6px;
  background: var(--app-background);
  color: var(--primary-color);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  appearance: none;
  -webkit-appearance: none;
}
.lifeos-multiselect-trigger.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.lifeos-multiselect.open .lifeos-multiselect-trigger {
  border-color: var(--lifeos-modal-accent, var(--primary-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 50%, transparent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.lifeos-multiselect-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.lifeos-multiselect-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 15%, transparent);
  color: var(--primary-color);
  font-size: 11px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lifeos-multiselect-pill-remove {
  font-size: 9px;
  opacity: 0.5;
  cursor: pointer;
  flex-shrink: 0;
}
.lifeos-multiselect-pill-remove:hover {
  opacity: 1;
}

.lifeos-multiselect-placeholder {
  opacity: 0.45;
  font-size: 13px;
}

.lifeos-multiselect-arrow {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.4;
  transition: transform 0.15s ease;
  flex-shrink: 0;
  padding-left: 6px;
}
.lifeos-multiselect.open .lifeos-multiselect-arrow {
  transform: rotate(180deg);
}

.lifeos-multiselect-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;
  border: 1px solid var(--lifeos-modal-accent, var(--primary-color));
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--app-background);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.lifeos-multiselect-panel .lifeos-multiselect-search {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--secondary-color);
  padding: 7px 10px;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  background: transparent;
  color: var(--primary-color);
  outline: none;
}

.lifeos-multiselect-list {
  max-height: 160px;
  overflow-y: auto;
  padding: 2px 0;
}

.lifeos-multiselect-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 7px 10px;
  color: var(--primary-color);
  font-size: 13px;
  transition: background 0.1s ease;
}
.lifeos-multiselect-item:hover {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.lifeos-multiselect-item.selected {
  font-weight: 600;
}
.lifeos-multiselect-check {
  font-size: 12px;
  opacity: 0;
  color: var(--lifeos-modal-accent, var(--primary-color));
}
.lifeos-multiselect-item.selected .lifeos-multiselect-check {
  opacity: 1;
}

/* Read-only mode: look like other disabled selects */
.lifeos-readonly .lifeos-multiselect-trigger {
  pointer-events: none;
  box-shadow: none;
}

/* Edit-mode accent border */
.lifeos-modal.edit-mode .lifeos-multiselect-trigger:not(.disabled) {
  border-color: var(--lifeos-modal-accent, var(--primary-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lifeos-modal-accent, var(--primary-color)) 50%, transparent);
}

/* Filter tags chip list */
#lifeos-filter-tags-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 0;
}

.filter-tag-chips .tag-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
  background: color-mix(in srgb, var(--primary-color) 4%, transparent);
  color: color-mix(in srgb, var(--primary-color) 60%, transparent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  transition: all 0.15s ease;
}

.filter-tag-chips .tag-chip:hover {
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.filter-tag-chips .tag-chip.active {
  background: var(--primary-color);
  color: var(--app-background);
  border-color: var(--primary-color);
}

.habit-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 6px;
}

.status-done {
  background: var(--accent-status-done);
}

.status-partial {
  background: var(--accent-status-partial);
}

.status-skipped {
  background: var(--accent-status-skipped);
}

/* Habits lane chips */
.habits-lane-layer .habit-chip circle,
.habits-lane-layer .habit-chip rect.habit-tick {
  transition: fill 0.2s ease;
}

.habits-lane-layer .habit-chip path.habit-check {
  transition: opacity 0.2s ease;
}

.habits-lane-layer .habit-inactive {
  opacity: 0.3;
}

.habits-lane-layer .habit-chip text {
  pointer-events: auto;
}

.habits-lane-layer .habit-chip:hover circle,
.habits-lane-layer .habit-chip:hover rect.habit-tick {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
}

/* === css/lifeos_entity_modal_habits.css === */
/* Habit modal quick log */
.lifeos-modal.lifeos-type-habit .lifeos-habit-log {
  display: block;
}

.lifeos-habit-log {
  display: none;
  background: var(--app-background);
  border-radius: 8px;
  margin-bottom: 0;
  padding: 10px;
}

.lifeos-habit-log h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.lifeos-habit-log .habit-log-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lifeos-habit-log .habit-log-status {
  font-size: 13px;
  color: #555;
}

.lifeos-habit-log .habit-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lifeos-habit-log .habit-log-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.habit-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 30px;
  border: 1px solid var(--primary-color);
  background: var(--app-background, #fff);
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
  height: 20px;
}

.habit-log-chip .habit-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary-color);
  flex-shrink: 0;
}

.habit-log-chip .habit-chip-date {
  font-weight: 700;
  font-size: 13px;
}

.habit-log-chip .habit-chip-weekday {
  font-size: 12px;
  opacity: 0.8;
}

.habit-log-chip .habit-chip-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.9;
}

.habit-log-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.habit-log-chip[data-status="done"] {
  background: var(--primary-color);
  color: var(--app-background, #fff);
}

.habit-log-chip[data-status="done"] .habit-chip-dot {
  background: var(--app-background, #fff);
}

.habit-log-chip[data-status="skipped"] {
  border-style: dashed;
  opacity: 0.85;
}

.habit-log-chip.loading {
  opacity: 0.55;
  pointer-events: none;
}

.habit-log-chip.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.habit-log-empty {
  font-size: 13px;
  color: #777;
  padding: 4px 0;
}

.habit-log-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Hide due date group for habits */
.lifeos-modal.lifeos-type-habit .lifeos-task-toprow .lifeos-datetime-group {
  display: none !important;
}

/* Habit modal: Status + Frequency full-width 2-col layout */
.lifeos-modal.lifeos-type-habit .lifeos-task-toprow {
  grid-template-columns: 1fr 1fr;
}

/* Habit modal: hide non-relevant fields */
.lifeos-modal.lifeos-type-habit .lifeos-field-priority-group,
.lifeos-modal.lifeos-type-habit .lifeos-field-area-group,
.lifeos-modal.lifeos-type-habit .lifeos-field-goal-group,
.lifeos-modal.lifeos-type-habit .lifeos-field-tags-row {
  display: none !important;
}

/* Project modal: hide Tags row */
.lifeos-modal.lifeos-type-project .lifeos-field-tags-row {
  display: none !important;
}

/* Project modal: status field same width as Start field (half of 2-col row) */
.lifeos-modal.lifeos-type-project .lifeos-task-toprow {
  grid-template-columns: 1fr 1fr;
}

/* Resource modal: hide non-relevant fields */
.lifeos-modal.lifeos-type-resource .lifeos-form-desc,
.lifeos-modal.lifeos-type-resource .lifeos-task-toprow,
.lifeos-modal.lifeos-type-resource .lifeos-task-hide>.lifeos-form-inline.lifeos-goal-hide,
.lifeos-modal.lifeos-type-resource .lifeos-field-area-group,
.lifeos-modal.lifeos-type-resource .lifeos-field-tags-row,
.lifeos-modal.lifeos-type-resource #lifeos-form-url-wrap {
  display: none !important;
}

.lifeos-task-hide {
  display: block;
}

.lifeos-modal.lifeos-type-task .lifeos-task-hide {
  display: none !important;
}

/* === css/lifeos_entity_modal_projects.css === */
/* Hide task-hide wrappers that have no visible form-group descendants for each entity type */
.lifeos-modal.lifeos-type-event .lifeos-task-hide:not(:has(.lifeos-form-group:not(.lifeos-event-hide):not(.lifeos-hidden))) {
  display: none;
}

.lifeos-modal.lifeos-type-resource #lifeos-resource-attach-section select {
  width: 100%;
  min-height: 6rem;
}

/* Resource modal: visually separate relationship section from Sources */
.lifeos-modal.lifeos-type-resource #lifeos-resource-attach-section {
  margin-top: 0;
  padding-top: 0;
}

.lifeos-modal.lifeos-type-resource #lifeos-resource-attach-section>label {
  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
  margin-bottom: 16px;
  padding-bottom: 8px;
  font-size: 14px;
}

.lifeos-modal.lifeos-type-resource .lifeos-resource-attach-empty {
  margin: 8px 0 0;
}

.lifeos-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.lifeos-form-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.lifeos-task-hide > .lifeos-form-inline,
.lifeos-modal-category-row {
  margin-bottom: 0;
}

.lifeos-task-hide > .lifeos-form-inline:not(:has(> .lifeos-form-group:not(.lifeos-hidden):not([style*="display:none"]):not([style*="display: none"]))),
.lifeos-modal-category-row:not(:has(> .lifeos-form-group:not(.lifeos-hidden):not([style*="display:none"]):not([style*="display: none"]))) {
  display: none;
  margin-bottom: 0;
}

/* LifeOS modal: Category row */
.lifeos-modal-category-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .lifeos-modal-category-row {
    grid-template-columns: 1fr;
  }
}

#lifeos-project-card-list {
  margin-bottom: 0;
}

.project-entities-section {
  padding: 15px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
  background: color-mix(in srgb, var(--primary-color) 3%, transparent);
}
/* LifeOS modal: Project chips (assigned) + picker */
.lifeos-project-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lifeos-project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lifeos-project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--app-background));
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
  box-sizing: border-box;
  height: 30px;
}

.lifeos-project-chip i {
  font-size: 10px;
  opacity: 0.7;
}

.lifeos-project-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lifeos-project-chip-status {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

.lifeos-project-chip-remove {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.1s;
}

.lifeos-project-chip-remove:hover {
  opacity: 1;
}

.lifeos-project-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px dashed var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s;
  align-self: flex-start;
  margin-bottom: 10px;
}

.lifeos-project-add-btn:hover {
  opacity: 1;
}

.lifeos-project-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
  border-radius: 8px;
  background: var(--app-background);
  max-height: 180px;
  overflow-y: auto;
}

.lifeos-project-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--primary-color);
  background: var(--app-background);
  color: var(--primary-color);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  transition: opacity 0.12s;
}

.lifeos-project-picker-item:hover {
  opacity: 0.8;
  background: color-mix(in srgb, var(--primary-color) 6%, var(--app-background));
}

.lifeos-project-picker-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lifeos-project-picker-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

.lifeos-project-picker-empty {
  font-size: 11px;
  opacity: 0.45;
  font-style: italic;
  padding: 4px 0;
}

/* Empty-state hints for project / tags */
.lifeos-project-empty-hint,
.tag-empty-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-style: italic;
  opacity: 0.4;
  color: var(--primary-color);
  padding: 2px 5px;
}

.lifeos-form-group select {
  min-height: 38px !important;
}


.lifeos-form-inline button {
  color: var(--app-background);
  position: absolute;
  right: 12px;
  background: transparent;
  top: 18px;
  border: none;
  box-shadow: none !important;
}

.lifeos-form-desc textarea {
  min-height: 120px;
}

#lifeos-field-start,
#lifeos-field-end,
#lifeos-field-due,
label[for="lifeos-field-start"],
label[for="lifeos-field-end"],
label[for="lifeos-field-due"] {
  font-family: "Montserrat", sans-serif;
}

/* Resource modal readonly: attachment lists (events/projects/goals/habits/journals) */
.lifeos-resource-attach-readonly-list {
  list-style: none;
  padding: 10px;
  border-radius: 6px;
  min-height: 38px;
  border: none;
  background: transparent;
}

.lifeos-resource-attach-readonly-item {
  padding: 6px 0;
  color: var(--primary-color);
}

.lifeos-datetime-group .lifeos-datetime-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.lifeos-modal .lifeos-datetime-group input,
.lifeos-modal .lifeos-datetime-group .flatpickr-input {
  padding: 12px 14px;
  padding-right: 48px;
  min-height: 38px;
  font-size: 14px;
  color: var(--primary-color);
  display: block;
}

.lifeos-datetime-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  height: 24px;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--primary-color) 78%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.lifeos-datetime-btn i {
  color: inherit;
}

.lifeos-datetime-btn:focus-visible {
  outline: 2px solid var(--primary-color);
}

.lifeos-datetime-group input {
  width: 100%;
}

.lifeos-modal .flatpickr-input {
  width: 100%;
  cursor: text;
}

.lifeos-datetime-group input[type="text"]::-webkit-calendar-picker-indicator {
  display: none;
}

#lifeos-field-description {
  overflow-y: auto;
}

.lifeos-error {
  flex: 1;
  color: var(--accent-danger-dark);
  font-size: 12px;
}

.lifeos-modal .lifeos-error {
  margin-bottom: 10px;
  text-align: center;
}

.lifeos-error-banner {
  background: rgba(255, 99, 71, 0.12);
  border: 1px solid var(--accent-danger);
  border-radius: 6px;
  color: var(--accent-danger-text) !important;
  font-weight: 700;
  padding: 10px 14px;
  margin: 8px 16px 6px;
}

.lifeos-hidden {
  display: none !important;
}

/* LifeOS event modal: hide non-event fields permanently */
.lifeos-modal.lifeos-type-event .lifeos-event-hide {
  display: none !important;
}

.lifeos-modal .lifeos-field-category-group {
  margin-top: 0;
}

/* === css/calendar_view.css === */
/* Calendar view */
.lifeos-calendar-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 420px;
  max-height: 100%;
}

/* `.lifeos-pane.active { display: block }` (higher specificity) otherwise wins
   and turns this pane back into a block, breaking the flex column the grid
   relies on. Mirror the list pane's `.active` override to keep it a flex
   column when shown. */
#lifeos-calendar-pane.active {
  display: flex;
  flex-direction: column;
}

.lifeos-calendar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Clear the two-row timeline-select pill that floats over the top of the
     pane (its in-flow navbar only reserves 60px, the pill reaches ~82px). */
  margin-top: 32px;
  color: var(--primary-color);
  justify-content: center;
  position: relative;
  width: 100%;
}

#lifeos-cal-today {
  position: absolute;
  left: 55px;
  background-color: transparent;
  font-size: 14px;
  border: 1px solid var(--primary-color);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.15s ease;
  /* Match the compact chip height (reset inherited global button height). */
  height: initial;
}

#lifeos-cal-today:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

#lifeos-cal-today.active {
  background: var(--primary-color);
  color: var(--app-background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

#lifeos-cal-prev:hover,
#lifeos-cal-next:hover {
  scale: 1.2;
  color: var(--primary-color);
}

#lifeos-cal-month-label {
  width: 290px;
  text-align: center;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

#lifeos-cal-month-picker {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.lifeos-calendar-modes {
  display: flex;
  gap: 8px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lifeos-cal-mode-btn {
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  /* Reset the inherited global button height so the chip is content-sized and
     matches the list view filter chips (.lifeos-list-filter-option). */
  height: initial;
}

.lifeos-cal-mode-btn.active {
  background: var(--primary-color);
  color: var(--app-background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-weight: 700;
}

.lifeos-cal-mode-btn:hover {
  opacity: 0.9;
  background-color: var(--primary-color);
  color: var(--app-background);
}

.lifeos-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, minmax(0, 1fr));
  padding: 6px;
  padding-left: 55px;
  padding-bottom: 12px;
  /* Fill the remaining flex space of the pane instead of a hardcoded
     calc(100vh - 134px): that magic number assumed a fixed-height controls
     row, so when the controls wrap (mobile) the grid overflowed the bottom of
     the viewport and the last week row got clipped. */
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr;
  align-content: stretch;
}

.lifeos-calendar-grid.mode-week {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
}

.lifeos-calendar-grid.mode-day {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.lifeos-calendar-grid.mode-year {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.lifeos-calendar-grid.mode-year .lifeos-calendar-body {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  row-gap: 4px;
  align-content: start;
  overflow-y: auto;
}

.lifeos-calendar-grid.mode-year .lifeos-project-stripes,
.lifeos-calendar-grid.mode-year .lifeos-project-badges,
.lifeos-calendar-grid.mode-year .lifeos-calendar-items {
  display: contents;
}

.lifeos-calendar-grid.mode-year .lifeos-calendar-body,
.lifeos-calendar-grid.mode-year .lifeos-calendar-items,
.lifeos-calendar-grid.mode-year .lifeos-project-stripes,
.lifeos-calendar-grid.mode-year .lifeos-project-badges {
  gap: 4px;
}

.lifeos-calendar-grid.mode-year .lifeos-calendar-tag {
  padding: 4px 8px;
  line-height: 1.2;
}

.lifeos-calendar-grid.mode-year .lifeos-calendar-stripe {
  min-height: 20px;
  padding: 3px 8px;
  font-size: 10px;
}

.lifeos-calendar-grid.mode-year .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-year .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-year .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-year .lifeos-cal-entity--habit {
  margin-left: 1px;
  padding-left: 0;
}

.lifeos-calendar-cell {
  border: 0.5px solid var(--primary-color);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.lifeos-calendar-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.lifeos-calendar-body {
  scrollbar-color: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45)) transparent;
}

.lifeos-calendar-body::-webkit-scrollbar-track {
  background-color: transparent;
}

.lifeos-year-cell {
  min-height: 120px;
}

.lifeos-calendar-cell.today {
  background: var(--primary-color) !important;
  color: var(--app-background) !important;
  border: 1.5px solid var(--app-background);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.lifeos-calendar-grid.mode-day .lifeos-calendar-cell.today {
  background: var(--primary-color) !important;
}

.lifeos-calendar-cell.today .day-label {
  background: var(--app-background);
  color: var(--primary-color) !important;
  border-color: var(--primary-color);
  font-weight: 800;
  box-shadow: none;
}

.lifeos-calendar-grid.mode-day .lifeos-calendar-cell.today .day-label {
  color: var(--primary-color) !important;
}

.day-label {
  background: var(--primary-color);
  color: var(--app-background);
  margin-left: -6px;
  margin-top: -6px;
  margin-bottom: 6px;
  padding: 6px;
  width: calc(100% + 12px);
  border: 2px solid var(--app-background);
}

.lifeos-calendar-cell .day-label {
  font-weight: 700;
  font-size: 12px;
  /* Keep every day header on a single line so all headers share the same
     height (no taller cell when the label would otherwise wrap). On narrow
     screens the font shrinks instead — see the mobile override below. */
  white-space: nowrap;
}

.lifeos-calendar-grid.mode-day .lifeos-calendar-cell .day-label {
  padding: 8px 12px;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.lifeos-calendar-grid.mode-day .lifeos-calendar-cell.today .day-label {
  color: var(--primary-color) !important;
}

.lifeos-calendar-cell.today .day-label {
  color: var(--primary-color);
}

.lifeos-calendar-cell.today .lifeos-calendar-stripe,
.lifeos-calendar-cell.today .lifeos-calendar-tag:not([data-color]),
.lifeos-calendar-cell.today .lifeos-cal-entity--project,
.lifeos-calendar-cell.today .lifeos-cal-entity--task,
.lifeos-calendar-cell.today .lifeos-cal-entity--goal,
.lifeos-calendar-cell.today .lifeos-cal-entity--journal,
.lifeos-calendar-cell.today .lifeos-cal-entity--habit,
.lifeos-calendar-cell.today .lifeos-calendar-overflow,
.lifeos-calendar-cell.today .lifeos-project-badge {
  color: var(--app-background) !important;
}

.lifeos-calendar-cell.today .lifeos-calendar-stripe,
.lifeos-calendar-cell.today .lifeos-cal-entity--project,
.lifeos-calendar-cell.today .lifeos-project-badge {
  border-color: var(--app-background) !important;
}

.lifeos-calendar-cell.today .lifeos-project-badge .dot {
  background: var(--app-background);
}

.lifeos-calendar-cell.today .lifeos-cal-marker,
.lifeos-calendar-cell.today .lifeos-calendar-tag:not([data-color]) .lifeos-cal-marker,
.lifeos-calendar-cell.today .lifeos-calendar-stripe .lifeos-project-stripe-icon {
  color: var(--app-background) !important;
}

.lifeos-calendar-cell.today .lifeos-cal-marker {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lifeos-calendar-cell.today .lifeos-agenda-time {
  color: var(--app-background) !important;
}

.lifeos-calendar-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  padding-right: 2px;
  scroll-behavior: smooth;
}

.lifeos-calendar-grid.mode-month .lifeos-calendar-body,
.lifeos-calendar-grid.mode-month .lifeos-calendar-items,
.lifeos-calendar-grid.mode-month .lifeos-project-stripes,
.lifeos-calendar-grid.mode-month .lifeos-project-badges {
  gap: 6px;
}

.lifeos-calendar-grid.mode-week .lifeos-calendar-body,
.lifeos-calendar-grid.mode-week .lifeos-calendar-items,
.lifeos-calendar-grid.mode-week .lifeos-project-stripes,
.lifeos-calendar-grid.mode-week .lifeos-project-badges {
  gap: 6px;
}

.lifeos-calendar-grid.mode-month .lifeos-calendar-body,
.lifeos-calendar-grid.mode-week .lifeos-calendar-body,
.lifeos-calendar-grid.mode-day .lifeos-calendar-body {
  overflow-y: auto;
}

.lifeos-calendar-grid.mode-month .lifeos-calendar-body {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  row-gap: 6px;
  align-content: start;
}

.lifeos-calendar-grid.mode-month .lifeos-project-stripes,
.lifeos-calendar-grid.mode-month .lifeos-project-badges,
.lifeos-calendar-grid.mode-month .lifeos-calendar-items {
  display: contents;
}

.lifeos-project-stripes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lifeos-calendar-grid.mode-day .lifeos-project-stripes {
  gap: 6px;
}

.lifeos-calendar-stripe {
  position: relative;
  min-height: 22px;
  border-radius: 0;
  padding: 4px 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-color, #a557f3);
  border: 1.5px solid var(--primary-color, #a557f3);
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.lifeos-calendar-grid.mode-day .lifeos-calendar-stripe {
  min-height: 22px;
  padding: 4px 10px;
}

.lifeos-calendar-grid.mode-week .lifeos-calendar-stripe {
  min-height: 22px;
  padding: 4px 10px;
}
.lifeos-calendar-stripe:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  opacity: 0.92;
}

.lifeos-project-stripe-icon {
  font-size: 10px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Status-specific stripe patterns (matching timeline) */
.lifeos-calendar-stripe[data-status="planned"] {
  border-style: dashed;
  opacity: 0.85;
  background: transparent;
}
.lifeos-calendar-stripe[data-status="completed"] {
  opacity: 0.65;
  background: transparent;
}
.lifeos-calendar-stripe[data-status="on_hold"] {
  border-style: dashed;
  opacity: 0.55;
  background: transparent;
}
.lifeos-calendar-stripe[data-status="cancelled"],
.lifeos-calendar-stripe[data-status="canceled"] {
  opacity: 0.45;
  border-style: dashed;
  text-decoration: line-through;
  background: transparent;
}

.lifeos-project-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.lifeos-calendar-stripe.start {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.lifeos-calendar-stripe.end {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.lifeos-stripe-label {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.lifeos-calendar-stripe .lifeos-project-status {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  color: var(--primary-color, #a557f3);
}

.lifeos-calendar-overflow {
  display: none;
}

.lifeos-project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lifeos-project-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--surface-muted);
  border: 1px solid var(--border-muted);
  color: #0f0f10;
}

.lifeos-project-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.lifeos-agenda-group {
  border: 1px solid var(--border-panel);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--surface-faint);
}

.lifeos-agenda-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.lifeos-agenda-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lifeos-progress {
  width: 120px;
  height: 6px;
  background: var(--surface-muted-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.lifeos-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--primary-color);
}

.lifeos-agenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
  min-height: 28px;
  cursor: pointer;
}

.lifeos-agenda-item:first-of-type {
  border-top: none;
}

.lifeos-agenda-time {
  width: 104px;
  font-weight: 600;
  color: var(--primary-color);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lifeos-agenda-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lifeos-agenda-badge {
  background: var(--surface-muted);
  border: 1px solid var(--border-panel);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
}

.lifeos-calendar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.2;
  background: var(--surface-card-day);
  border: 1px solid var(--border-subtle);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.lifeos-calendar-grid.mode-month .lifeos-calendar-tag {
  padding: 8px 12px;
  line-height: 1.4;
}

.lifeos-calendar-grid.mode-week .lifeos-calendar-tag {
  min-height: 28px;
  padding: 8px 12px;
  line-height: 1.4;
}

.lifeos-calendar-tag.clickable {
  cursor: pointer;
}

.lifeos-calendar-tag i {
  margin-right: 0;
  flex-shrink: 0;
}

.lifeos-cal-entity-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Event entity (colored bar, like timeline) ── */
.lifeos-cal-entity--event {
  border-radius: 4px;
  font-weight: 600;
}
.lifeos-cal-entity--event i {
  color: var(--primary-color, #a557f3);
  opacity: 0.9;
}

/* ── Project entity (solid background, no hatch) ── */
.lifeos-cal-entity--project {
  border: 1.5px solid var(--primary-color, #a557f3);
  color: var(--primary-color, #a557f3);
  font-weight: 700;
  border-radius: 8px;
  background: transparent;
}
.lifeos-cal-entity--project i {
  font-size: 11px;
  opacity: 0.85;
}

/* Project entity containers (calendar + list/day-agenda) */
.lifeos-calendar-tag.lifeos-cal-entity--project,
.lifeos-calendar-stripe.lifeos-cal-entity--project,
.lifeos-agenda-item.lifeos-cal-entity--project {
  position: relative;
}

/* Keep list/day-agenda project rows visually identical to calendar-day project stripes */
.lifeos-agenda-item.lifeos-cal-entity--project {
  min-height: 22px;
  padding: 4px 10px;
  gap: 6px;
  border-radius: 8px;
}

.lifeos-agenda-item.lifeos-cal-entity--project .lifeos-agenda-body {
  gap: 6px;
}

.lifeos-cal-entity--project[data-status="planned"] {
  border-style: dashed;
  opacity: 0.85;
}
.lifeos-cal-entity--project[data-status="in_progress"] {
  opacity: 1;
}
.lifeos-cal-entity--project[data-status="completed"] {
  opacity: 0.65;
}
.lifeos-cal-entity--project[data-status="on_hold"] {
  border-style: dashed;
  opacity: 0.55;
}
.lifeos-cal-entity--project[data-status="cancelled"],
.lifeos-cal-entity--project[data-status="canceled"] {
  opacity: 0.45;
  border-style: dashed;
  text-decoration: line-through;
}

/* ── Marker-type entities (task/goal/journal/habit) ── */
.lifeos-cal-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--app-background, #fff);
  border: 2px solid var(--app-background, #fff);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  color: var(--primary-color, #a557f3);
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Task marker ── */
.lifeos-cal-entity--task {
  background: transparent;
  border-color: transparent;
  color: var(--secondary-color, var(--text-default-dark));
}
.lifeos-cal-entity--task .lifeos-cal-marker {
  color: var(--primary-color, #a557f3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.lifeos-cal-entity--task.lifeos-cal-entity--done {
  opacity: 0.55;
}
.lifeos-cal-entity--task.lifeos-cal-entity--done .lifeos-cal-entity-title {
  text-decoration: line-through;
}

/* ── Goal marker ── */
.lifeos-cal-entity--goal {
  background: transparent;
  border-color: transparent;
  color: var(--secondary-color, var(--text-default-dark));
}
.lifeos-cal-entity--goal .lifeos-cal-marker {
  color: var(--primary-color, #a557f3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Journal marker ── */
.lifeos-cal-entity--journal {
  background: transparent;
  border-color: transparent;
  color: var(--secondary-color, var(--text-default-dark));
}
.lifeos-cal-entity--journal .lifeos-cal-marker {
  color: var(--primary-color, #a557f3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.lifeos-cal-entity--journal .lifeos-cal-marker i {
  font-weight: 400;
}

/* ── Habit marker ── */
.lifeos-cal-entity--habit {
  background: transparent;
  border-color: transparent;
  color: var(--secondary-color, var(--text-default-dark));
}

.lifeos-calendar-grid.mode-week .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-week .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-week .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-week .lifeos-cal-entity--habit {
  margin-left: 1px;
  padding-left: 0;
}

.lifeos-calendar-grid.mode-month .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--habit {
  margin-left: 1px;
  padding-left: 0;
}

.lifeos-calendar-grid.mode-month .lifeos-cal-entity--event,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-month .lifeos-cal-entity--habit {
  border-color: transparent !important;
  box-shadow: none;
}

.lifeos-calendar-grid.mode-week .lifeos-calendar-cell.today .lifeos-cal-entity--event,
.lifeos-calendar-grid.mode-week .lifeos-calendar-cell.today .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-week .lifeos-calendar-cell.today .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-week .lifeos-calendar-cell.today .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-week .lifeos-calendar-cell.today .lifeos-cal-entity--habit,
.lifeos-calendar-grid.mode-month .lifeos-calendar-cell.today .lifeos-cal-entity--event,
.lifeos-calendar-grid.mode-month .lifeos-calendar-cell.today .lifeos-cal-entity--task,
.lifeos-calendar-grid.mode-month .lifeos-calendar-cell.today .lifeos-cal-entity--goal,
.lifeos-calendar-grid.mode-month .lifeos-calendar-cell.today .lifeos-cal-entity--journal,
.lifeos-calendar-grid.mode-month .lifeos-calendar-cell.today .lifeos-cal-entity--habit {
  border-color: transparent !important;
  box-shadow: none;
}

body.theme-day .lifeos-cal-entity--task,
body.theme-white .lifeos-cal-entity--task,
body.theme-day .lifeos-cal-entity--goal,
body.theme-white .lifeos-cal-entity--goal,
body.theme-day .lifeos-cal-entity--journal,
body.theme-white .lifeos-cal-entity--journal,
body.theme-day .lifeos-cal-entity--habit,
body.theme-white .lifeos-cal-entity--habit {
  color: var(--app-text-color, #111111);
}
.lifeos-cal-entity--habit .lifeos-cal-marker {
  color: var(--primary-color, #a557f3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Agenda (day view) entity overrides ── */
.lifeos-agenda-item .lifeos-agenda-body {
  gap: 8px;
}
.lifeos-agenda-item .lifeos-agenda-body.lifeos-agenda-event {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card-day);
}
.lifeos-agenda-item .lifeos-agenda-body.lifeos-agenda-event i {
  color: var(--primary-color, #a557f3);
}
.lifeos-agenda-item .lifeos-agenda-body > i {
  flex-shrink: 0;
  font-size: 13px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lifeos-agenda-item.lifeos-cal-entity--project .lifeos-project-status {
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
  color: var(--primary-color, #a557f3);
}

.lifeos-agenda-item.lifeos-cal-entity--done {
  opacity: 0.55;
}
.lifeos-agenda-item.lifeos-cal-entity--done .lifeos-cal-entity-title {
  text-decoration: line-through;
}

#lifeos-list-container .lifeos-agenda-item.lifeos-cal-entity--project[data-status="cancelled"] .lifeos-cal-entity-title,
#lifeos-list-container .lifeos-agenda-item.lifeos-cal-entity--project[data-status="cancelled"] .lifeos-project-status,
#lifeos-list-container .lifeos-agenda-item.lifeos-cal-entity--project[data-status="canceled"] .lifeos-cal-entity-title,
#lifeos-list-container .lifeos-agenda-item.lifeos-cal-entity--project[data-status="canceled"] .lifeos-project-status {
  text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Mobile (<=560px): the timeline-select pill becomes full-width and floats at
   top:0, overflowing the 60px navbar. The calendar controls use absolute
   offsets (#lifeos-cal-today left:55px, .lifeos-calendar-modes right:12px,
   width ~224px) that collide with each other and slide up under the pill on
   narrow screens. Drop the absolute positioning so everything flows/wraps in
   normal order, and push the row below the floating pill.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .lifeos-calendar-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    row-gap: 10px;
    /* Clear the full-width navbar pill that floats over the top of the pane. */
    margin-top: 40px;
    /* Left inset clears the fixed zoom/pan rail (#controllers, 42px) so wrapped
       mode chips sit beside it, not behind it — mirrors the grid's padding. */
    padding: 0 8px 0 50px;
    box-sizing: border-box;
  }

  #lifeos-cal-today {
    position: static;
    left: auto;
  }

  #lifeos-cal-month-label {
    width: auto;
    max-width: 60vw;
    flex: 0 1 auto;
  }

  .lifeos-calendar-modes {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Narrow month/week cells can't fit "Wed 24" at 12px; with single-line
     headers the label would otherwise clip. Shrink the font (and trim
     padding) so it fits on one line and every day header keeps its height. */
  .lifeos-calendar-grid.mode-month .lifeos-calendar-cell .day-label,
  .lifeos-calendar-grid.mode-week .lifeos-calendar-cell .day-label {
    font-size: 10px;
    padding: 5px 3px;
    letter-spacing: -0.2px;
  }
}

/* === css/list_view.css === */
/* List view */
body.logged-out:not(.shared-view):not(.public-view) .lifeos-list-controls {
  display: none;
}

.lifeos-list-controls {
  /* Top margin clears the two-row timeline-select pill that floats over the
     top of the pane (its in-flow navbar only reserves 60px, the pill reaches
     ~82px). Mobile (<=560px) overrides this below. */
  margin: 32px auto 10px;
  width: 100%;
  max-width: min(980px, calc(100vw - 120px));
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--app-background, #ffffff);
  padding: 8px 20px;
  box-sizing: border-box;
}

.lifeos-list-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lifeos-list-filter-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
  font-size: 12px;
}

.lifeos-list-filter-custom label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lifeos-list-filter-custom input[type="date"] {
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
}

.lifeos-list-filter-custom button {
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lifeos-list-filter-custom button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.lifeos-list-filter-option {
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  height: initial;
}

.lifeos-list-filter-option.active {
  background: var(--primary-color);
  color: var(--app-background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lifeos-list-filter-option:hover {
  transform: translateY(-1px);
  opacity: 0.9;
  background-color: var(--primary-color);
  color: var(--app-background);
}

.lifeos-list-today-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lifeos-list-today-chip.active {
  background: var(--primary-color);
  color: var(--app-background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

.lifeos-list-today-chip:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.lifeos-list-group {
  border: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 40px;
}

.lifeos-list-group--even {
  background: var(--list-group-surface, var(--app-background));
}

.lifeos-list-group--odd {
  background: var(--list-group-surface, var(--app-background));
}

/* Uniform row spacing in list view for all entity types */
#lifeos-list-container .lifeos-list-group .lifeos-agenda-item {
  margin-bottom: 12px;
}

#lifeos-list-container .lifeos-list-group .lifeos-agenda-item:last-child {
  margin-bottom: 0;
}

.lifeos-list-date {
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: -35px;
}

.lifeos-list-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.lifeos-list-item .type {
  font-weight: 700;
}

.lifeos-list-icon {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.lifeos-list-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lifeos-list-time {
  font-size: 12px;
  color: var(--app-text-color);
}

.lifeos-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-text-color);
}

#lifeos-cal-prev,
#lifeos-cal-next {
  background-color: transparent;
  border: none;
}

#scaleBackground {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  background-color: var(--primary-color);
  z-index: -10;
  display: block;
}

/* ---------------------------------------------------------------------------
   Mobile (<=560px): the timeline-select pill becomes full-width and floats at
   top:0, overflowing the 60px navbar. The list filter chips sit at the top of
   the pane and slide up under the pill. Push the controls below it (same
   clearance as the calendar controls). Horizontal fit is already handled by
   the controls' max-width: calc(100vw - 120px) + auto margins.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .lifeos-list-controls {
    /* Clear the full-width navbar pill that floats over the top of the pane. */
    margin-top: 40px;
    /* Use the full screen width instead of the desktop's centered, inset
       column (max-width: 100vw - 120px), so the filter chips span edge to
       edge with only a small gutter. The left rail sits lower (vertically
       centered) and doesn't overlap the chips at the top of the pane. */
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Widen the list cards too: drop the centered, inset column so they sit
     just right of the left rail (#controllers, ~42px) and extend to the
     screen edge on the right, instead of clipping their content. */
  #lifeos-list-container {
    max-width: none;
    margin: 0;
    padding-left: 50px;
    padding-right: 8px;
  }
}

/* === css/checkbox.css === */
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background-color: var(--secondary-color);
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;

}


/* Custom checkbox */
.checkbox-container {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    margin-left: 50px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.login-checkbox {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    font-size: 16px;
    padding-left: 26px;
    margin-left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 15px;
    width: 15px;
    /* background-color: var(--app-background); */
    border-radius: 3px;
    border: 1px solid var(--app-background);
}

/* On mouse-over, add a grey background color */
.chackbox-container:hover input~.checkmark {
    background-color: var(--app-background);
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked~.checkmark {
    background-color: var(--primary-color);
    border: none
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 3px;
    top: -2px;
    width: 7px;
    height: 14px;
    border: solid var(--app-background);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#termsAndConditionsContainer {
    width: 270px;
    ;
}

/* === css/swiper.css === */
/* Swiper */

#photos {
    margin-top: 20px;
    margin-bottom: 30px;
}

.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--surface-card-day);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.swiper-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 440px;
    object-fit: contain;
    height: auto;
    margin: auto;
}

.swiper-horizontal {}

.mySwiper2 {
    height: 80%;
    width: 100%;
}

.mySwiper {
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 25%;
    opacity: 0.3;

}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
}

.mySwiper .swiper-slide-thumb-active img {}

.mySwiper2 .swiper-slide {
    background-color: transparent;
}

.mySwiper .swiper-slide {
    background-color: transparent;
}

.swiper img {
    border-radius: 4px;
}

#sliderThumb {
    margin-bottom: 10px
}

#sliderThumb img {
    height: 95%;
    cursor: pointer;
}

#sliderView {
    max-height: 446px;
}

#sliderView img {
    border-radius: 10px;
    cursor: pointer;
}

#lifeos-slider-thumb {
    height: auto !important;
}

#lifeos-slider-thumb img {
    transform: none !important;
    margin: 0 auto;
}

.swiper-button-next,
.swiper-button-prev {
    top: 50% !important;
    transform: translateY(150%) !important;
}

/* === css/scrollbar.css === */
/* Görgető sáv */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45));
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45)) 80%, transparent);
}

/* Firefox-specifikus beállítások */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color, rgba(255, 255, 255, 0.45)) var(--scrollbar-track-color, rgba(0, 0, 0, 0.15));
}

/* === css/color_settings.css === */
/* Színválasztó */
#selectedColorContainer {
    text-align: center;
    margin-top: 30px;
}

.color {
    width: 20px;
    height: 20px;
    margin-left: 25px;
    cursor: pointer;
    border-radius: 3px;
    transition: transform 0.3s ease;
}

.color:hover {
    transform: rotate(45deg) scale(1.2);
}

.color.active {
    border: 1px solid var(--app-background);
    transform: rotate(45deg) scale(1.2);
}

/* Letiltott színválasztó (swatch) vizuális jelzése */
#selectedColorContainer .color.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
#selectedColorContainer .color.disabled:hover {
    transform: none;
}

/* Letiltott téma gombok vizuális jelzése */
#themeSwitch .theme-option.disabled,
#themeSwitch .theme-option[aria-disabled="true"],
#themeSwitch .theme-option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.color:first-of-type {
    margin-left: 0;
}

.active {

}

#black {
    background-color: rgb(50, 50, 50);
}

#darkslategray {
    background-color: rgb(47,79,79);
}

#red {
    background-color: rgb(240, 80, 80);
}

#orange {
    background-color: rgb(255, 170, 0);
}

#green {
    background-color: rgb(45, 165, 110);
}

#blue {
    background-color: rgb(55, 130, 210);
}

#purple {
    background-color: rgb(170, 105, 185);
}

#pink {
    background-color: rgb(235, 80, 235);
}

/* === css/user_modal.css === */
/* ─── User Profile Modal ───────────────────────────────────── */

#user-modal .user-modal-card {
    background: var(--app-background);
    color: var(--app-text-color, var(--primary-color));
    padding: 0;
    width: 340px;
    max-width: 95vw;
    border-radius: 12px;
    /* x hidden keeps rounded corners; y auto lets short viewports scroll to
       the theme switcher at the bottom instead of clipping it. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--primary-color);
}

/* ── Header ── */
.user-modal-header {
    background: var(--primary-color);
    color: var(--app-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 24px;
    gap: 8px;
    cursor: grab;
    touch-action: none;
    overscroll-behavior: none;
}

.user-modal-header:active {
    cursor: grabbing;
}

.user-modal-avatar-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 3px;
    background: var(--app-background);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    margin-bottom: 4px;
}
    .user-modal-avatar-wrap {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        padding: 3px;
        background: var(--app-background);
    }

    .avatar-preview-container {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
    }

    #current-avatar-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        cursor: pointer;
        display: block;
        transition: filter 0.2s;
    }

    .avatar-edit-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        border-radius: 50%;
    }

    .avatar-preview-container:hover .avatar-edit-overlay,
    #current-avatar-preview:focus + .avatar-edit-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .avatar-edit-overlay i {
        color: #fff;
        font-size: 2rem;
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
    }

#current-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
    display: block;
}

.user-modal-name {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    color: var(--app-background);
}

.user-modal-email {
    font-size: 12px;
    opacity: 0.75;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--app-background);
}

/* ── Nav links ── */
.user-modal-nav {
    padding: 8px 0;
}

.user-modal-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background 0.15s, padding-left 0.15s;
    color: var(--app-text-color, var(--primary-color));
    text-decoration: none;
    margin: 0;
}

.user-modal-nav-item i {
    width: 16px;
    text-align: center;
    opacity: 0.65;
    font-size: 13px;
}

.user-modal-nav-item:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    padding-left: 30px;
    text-decoration: none;
}

/* ── Divider ── */
.user-modal-divider {
    height: 1px;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    margin: 4px 24px;
}

/* ── Sign out ── */
#sign-out-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    margin: 4px 16px;
    text-decoration: none;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--accent-danger, #e74c3c);
    transition: background 0.15s;
    width: calc(100% - 32px);
    box-sizing: border-box;
}

#sign-out-container:hover {
    background: color-mix(in srgb, var(--accent-danger, #e74c3c) 10%, transparent);
}

#sign-out-container i {
    font-size: 14px;
}

/* ── Settings controls (language + theme) ── */
.user-modal-settings-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 8px;
    gap: 14px;
}

.user-modal-setting-block {
    width: 100%;
}

#languagesContainer {
    position: relative;
    z-index: 20;
}

#languages {
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    color: var(--app-text-color, var(--primary-color));
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    cursor: pointer;
}

#languagesContainer.is-enhanced #languages {
    display: none;
}

.user-modal-language-trigger {
    display: none;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

#languagesContainer.is-enhanced .user-modal-language-trigger {
    display: flex;
}

.user-modal-language-menu {
    display: none !important;
    top: auto;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    margin-bottom: 0;
    z-index: 40;
}

#languagesContainer.open .user-modal-language-menu {
    display: block !important;
}

.user-modal-language-options {
    max-height: 220px;
}

.user-modal-language-options li {
    font-size: 13px;
    padding: 10px 12px;
}

.user-modal-theme-block {
    display: flex;
    justify-content: center;
}

/* ── Theme switcher ── */
.theme-switcher {
    width: 100%;
}

.theme-switcher__options {
    position: relative;
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    padding: 6px 4px;
}

.theme-option {
    position: relative;
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-text-color, var(--primary-color));
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.theme-option:hover {
    transform: scale(1.1);
}

.theme-option.active {
    background: transparent;
    color: var(--app-text-color, var(--primary-color));
    opacity: 1;
    font-weight: 700;
    transform: scale(1);
}

.theme-switch-indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 0;
    border-radius: 999px;
    border: 1.5px solid var(--app-text-color, var(--primary-color));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    transform: translate(0, 0);
    transition:
        transform 280ms cubic-bezier(0.25, 0.8, 0.35, 1),
        width 220ms ease,
        height 220ms ease;
    pointer-events: none;
}

/* ── Copyright ── */
.user-modal-copyright {
    text-align: center;
    font-size: 11px;
    opacity: 0.4;
    padding: 10px 0 6px;
    font-family: 'Montserrat', sans-serif;
    margin-top: 30px;
    margin-bottom: -40px;
}

/* ── Crop Modal Overlay ── */
#crop-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.crop-modal-card {
    background: var(--app-background);
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.crop-modal-header {
    background: var(--primary-color);
    color: var(--app-background);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.crop-modal-header i {
    font-size: 16px;
    opacity: 0.9;
}

.crop-modal-body {
    background: #111;
    max-height: 360px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-modal-body img {
    display: block;
    max-width: 100%;
}

/* Circular crop box */
#crop-modal .cropper-view-box,
#crop-modal .cropper-face {
    border-radius: 50%;
}

.crop-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: var(--app-background);
    justify-content: flex-end;
}

.crop-btn-cancel {
    padding: 9px 20px;
    border-radius: 8px;
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    background: transparent;
    color: var(--app-text-color, var(--primary-color));
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.crop-btn-cancel:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.crop-btn-save {
    padding: 9px 20px;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    color: var(--app-background);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: opacity 0.15s, transform 0.15s;
}

.crop-btn-save:hover {
    opacity: 0.88;
    transform: scale(1.03);
}

.crop-btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── Close button: restore tab-style bottom-left corner ── */
#user-modal .modal-buttons {
    position: sticky;
    bottom: 0;
    float: left;
    margin: 0;
    border-radius: 0 12px 0 9px;
    width: auto;
    padding: 5px 10px;
}

/* === css/category.css === */
#colorIcon {
    cursor: pointer;
}

/* Add-category modal: use a standard native color input */
#add-category-modal #colorPicker {
    width: 100%;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--secondary-color);
    background: var(--app-background);
}

#add-category-modal #colorPicker::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 6px;
}

#add-category-modal #colorPicker::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

#categoryName {
margin-bottom: 20px;
}

#categoryName input {
    width: 100%;
    margin-left: 0;
}

#categoryName label {
    left: 0;
}

#selectedCategoryIcon {
    top: 65px;
    right: 20px;
    font-size: 40px;
    display: none;
    color: var(--category-modal-accent);
}

#newCategoryIconContainer {
    width: 100px;
    margin-bottom: 20px;
}

#newCategoryIconContainer i {
    margin-bottom: 20px;
    margin-left: 20px;
    font-size: 18px;
    cursor: pointer;
}

#newCategoryIconContainer span {
    margin-left: 5px;
}

#newCategoryIconContainer i:first-of-type {
    margin-left: 0;
}

#categoryIconContainer {
    width: calc(100% + 15px);
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    justify-items: center;
    align-items: center;
    max-height: 280px;
    overflow-y: auto;

}

#categoryIconContainer i {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    background-color: transparent;
    transition: transform 0.3s ease;
}

#categoryIconContainer i:hover {
    /* background-color: var(--secondary-color);
    color: var(--primary-color); */
    transform: rotate(30deg) scale(1.3);
}

#searchIconContainer input {
    margin-left: 0;
    width: auto;
}

#searchIconContainer label {
    left: 0;
}

body.theme-white #add-category-modal .lifeos-form-group input[type="text"],
body.theme-day #add-category-modal .lifeos-form-group input[type="text"] {
    border: 1px solid var(--border-soft);
    box-shadow: none;
}





/* WebKit alapú böngészők (Chrome, Safari, Edge, Opera) */
/* WebKit alapú böngészők (Chrome, Safari, Edge, Opera) */
#categoryIconContainer::-webkit-scrollbar {
    width: 8px;
}

#categoryIconContainer::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, rgba(0,0,0,0.15));
}

#categoryIconContainer::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, rgba(255,255,255,0.45));
    border-radius: 4px;
}

#categoryIconContainer {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color, rgba(255,255,255,0.45)) transparent;
}

/* Internet Explorer és régi Edge verziók */
body {
    -ms-overflow-style: none;
}

/* Stabil scrollbar (ne mozgassa el az oldalt) */
html {
    scrollbar-gutter: stable;
}

.category-icons .fa-trash-alt {
    color: rgb(255, 72, 0);
}

/* === css/share.css === */
/* ================================
   Share modal — redesigned layout
   ================================ */

/* Strip browser-default top margins from share modal paragraphs */
#shareModal #creator,
#shareModal #linkToShareLabel,
#shareModal #linkToShare,
#shareModal #linkActivationHint,
#shareModal #collaboratorsLabel {
    margin-top: 0;
}

/* Creator line */
#shareModal #shareModalTimelineName.share-timeline-name {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

#shareModal #creator.share-creator {
    font-size: 0.78rem;
    opacity: 0.45;
    text-align: center;
    margin: 0 0 12px 0;
    letter-spacing: 0.03em;
    margin-top: -12px;
}

/* Mode cards grid */
.share-mode-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}

.share-mode-card {
    cursor: pointer;
    position: relative;
    display: block;
}

.share-mode-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.share-mode-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 8px 12px;
    border: 1.5px solid var(--secondary-color);
    border-radius: 12px;
    background: transparent;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-align: center;
    user-select: none;
}

body.theme-day .share-mode-card-inner,
body.theme-white .share-mode-card-inner {
    border-color: var(--surface-light-border);
}

.share-mode-card:hover .share-mode-card-inner {
    border-color: var(--primary-color);
    background: rgba(128, 128, 128, 0.09);
}

.share-mode-card:has(input:checked) .share-mode-card-inner {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 2px var(--primary-color),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    transform: translateY(-1px);
}

.share-mode-card-icon {
    font-size: 1.15rem;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.share-mode-card:has(input:checked) .share-mode-card-icon {
    opacity: 1;
    color: var(--primary-color);
}

.share-mode-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.share-mode-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.share-mode-card-desc {
    font-size: 0.7rem;
    opacity: 0.5;
    line-height: 1.3;
}

.share-mode-card:has(input:checked) .share-mode-card-title {
    color: var(--primary-color);
}

.share-mode-card:has(input:checked) .share-mode-card-desc {
    opacity: 0.82;
}

body.theme-night-1 .share-mode-card:has(input:checked) .share-mode-card-inner,
body.theme-night-2 .share-mode-card:has(input:checked) .share-mode-card-inner {
    background: color-mix(in srgb, var(--primary-color) 18%, rgba(255, 255, 255, 0.03));
    box-shadow:
        0 0 0 2px var(--primary-color),
        0 12px 26px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.theme-night-1 .share-mode-card:has(input:checked) .share-mode-card-title,
body.theme-night-1 .share-mode-card:has(input:checked) .share-mode-card-icon,
body.theme-night-2 .share-mode-card:has(input:checked) .share-mode-card-title,
body.theme-night-2 .share-mode-card:has(input:checked) .share-mode-card-icon {
    color: var(--secondary-color);
}

body.theme-night-1 .share-mode-card:has(input:checked) .share-mode-card-desc,
body.theme-night-2 .share-mode-card:has(input:checked) .share-mode-card-desc {
    color: rgba(252, 252, 247, 0.82);
    opacity: 1;
}

/* Section labels */
.share-section-label {
    font-size: 0.72rem;
    opacity: 0.5;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Link box */
#shareModal #linkToShare.share-link-box {
    font-size: 0.78rem;
    font-family: monospace;
    padding: 9px 13px;
    border-radius: 8px;
    border: 1px dashed var(--secondary-color);
    word-break: break-all;
    background: rgba(128, 128, 128, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-bottom: 5px;
    display: block;
}

#shareModal #linkToShare.share-link-box:hover {
    background: rgba(128, 128, 128, 0.12);
    border-color: var(--primary-color);
}

.share-link-hint {
    font-size: 0.73rem;
    opacity: 0.5;
    margin: 0 0 8px 0;
}

.share-reveal-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    margin: 0;
    transition:
        max-height 0.34s ease,
        opacity 0.24s ease,
        transform 0.34s ease,
        margin 0.34s ease;
}

.share-reveal-panel.is-visible {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#shareLinkPanel.is-visible {
    margin: 2px 0 10px;
}

#shareModeDetails.is-visible {
    margin-top: 6px;
}

/* User search */
#shareModal #searchUserContainer {
    margin-top: 10px;
    margin-bottom: 0;
    padding-top: 14px;
}

#shareModal #searchUserContainer input#searchUser {
    color: var(--primary-color);
    background: transparent;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    outline: none;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

body.theme-day #shareModal #searchUserContainer input#searchUser {
    background: var(--surface-day-field);
    border-color: var(--surface-light-border) !important;
}

body.theme-white #shareModal #searchUserContainer input#searchUser {
    background: var(--secondary-color);
    border-color: var(--surface-light-border) !important;
}

body.theme-night-1 #shareModal #searchUserContainer input#searchUser {
    background: var(--surface-night-field);
}

body.theme-night-2 #shareModal #searchUserContainer input#searchUser {
    background: var(--surface-night-alt-field);
}

#shareModal #searchUserContainer label#searchUserLabel {
    color: var(--primary-color);
    left: 6px !important;
    padding: 0 6px;
    z-index: 1;
}

#shareModal #searchUserContainer input#searchUser:focus ~ label#searchUserLabel,
#shareModal #searchUserContainer input#searchUser:not(:placeholder-shown) ~ label#searchUserLabel {
    top: 3px;
    font-size: 12px;
}

#shareModal #searchUserContainer input#searchUser:-webkit-autofill,
#shareModal #searchUserContainer input#searchUser:-webkit-autofill:hover,
#shareModal #searchUserContainer input#searchUser:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--primary-color);
    box-shadow: 0 0 0px 1000px var(--app-background) inset;
}

/* User results list */
#userResults {
    margin-top: 4px;
    padding-left: 0;
    list-style: none;
}

#userResults li {
    margin-bottom: 6px;
}

/* Collaborators */
#collaborators .fa-trash-alt {
    margin-left: 20px;
}

#shareModal #collaboratorsLabel {
    margin-top: 20px;
}

/* Actions row */
.share-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#shareModal #shareStatus {
    font-size: 0.83rem;
    text-align: center;
}


.share-user-result,
.share-collaborator-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-user-avatar {
    width: 25px;
    height: 25px;
    object-fit: cover;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

.share-user-name {
    font-weight: 500;
}

.share-collaborator-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.share-collaborator-entry .remove-user {
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.share-collaborator-entry .remove-user:hover {
    opacity: 1;
}

#importCalendar {
    margin-top: 20px;
}

#shareStatus.loading::after,
#importCalendar.loading::after {
    content: '';
    animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}

#inboxList li div div div,
#inboxListUnread li div div div,
#inboxListSaved li div div div,
#inboxListSent li div div div {
    font-size: 1.2em;
    font-weight: 600;
}

.inbox-empty {
    list-style: none;
    padding-left: 0;
    font-weight: 400;
}

.inbox-modal-divier {
    margin-left: -25px !important;
    width: calc(100% + 50px);
    border-top: 3px solid var(--app-background, var(--secondary-color));
    opacity: 0.8 !important;
    margin-bottom: 20px;
    margin-top: 20px;
}

.shared-with-you-divider {
    color: var(--secondary-color);
    margin-top: 10px;
    ;
}

/* Badges for share modes */
.badge {
    color: #222;
    border-radius: 6px;
}

.badge-readonly {
    background: var(--badge-readonly-bg);
    /* gray */
    color: var(--text-on-accent);
}

.badge-editable {
    background: var(--badge-editable-bg);
    /* green */
    color: var(--text-on-accent);
}

.badge-public {
    background: var(--badge-public-bg);
    /* blue */
    color: var(--text-on-accent);
}

.status-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 6px;
}

.status-dot.active {
    background: #2ecc71;
}

.status-dot.inactive {
    background: #9aa0a6;
}

/* Icon spacing inside badges */
.badge i {
    margin-right: 6px;
}

.modal-subtitle {
    background: var(--app-background);
    color: var(--primary-color);
    padding: 0px 5px;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: -5px;
}

.modal-subtitle:first-child {
    margin-top: 0;
}

.shared-by,
.public-link {
    margin-top: -5px !important;
}

.shared-with {
    margin-top: -4px;
}

/* Tooltip pozicionálás a publikus linkhez az Inboxban */
.tooltip-inbox-link {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* #inboxListSaved li div:last-child {
    margin-top: -5px;
} */

#inboxListUnread li button,
#inboxListSaved li button,
#inboxList li button,
#inboxListSent li button {
    font-size: 14px;
    margin-right: 0;
    margin-left: 10px;
    padding: 0;
}

/* Inbox modal action buttons inside the scrollable body (NOT the bottom modal button-bar) */
#inboxModal .lifeos-modal-body button {
    padding: 0;
    border: none;
    background: transparent;
    transition: color 0.2s ease;
    overflow: hidden;
}

#inboxModal .lifeos-modal-body button:hover {
    color: var(--primary-color);
}

#inboxModal .lifeos-modal-body button i {
    display: inline-block;
    transition: transform 0.3s ease;
}

#inboxModal .lifeos-modal-body button:hover i {
    transform: rotate(30deg) scale(1.3);
}

/* Inbox modal: match LifeOS/timeline modal container look */
#inboxModal .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 30px);
    padding: 0;
    background: var(--app-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#inboxModal .lifeos-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#inboxModal .lifeos-modal-header .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: var(--lifeos-modal-contrast, var(--app-background));
}

#inboxModal #inboxModalButtons.modal-buttons {
    --modal-buttons-accent: var(--primary-color);
    --modal-buttons-contrast: var(--app-background);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: fit-content;
    background-color: var(--modal-buttons-accent);
    border-radius: 0 12px 0 0;
    padding: 5px 10px;
    box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

#inboxModal #inboxModalButtons.modal-buttons button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#inboxModal .lifeos-modal-body {
    padding-bottom: 50px;
    /* Extra bottom padding for floating buttons */
}

/* Adjust inbox divider for LifeOS modal padding */
#inboxModal .inbox-modal-divier {
    margin-left: -16px !important;
    width: calc(100% + 32px);
    border-top: 3px solid var(--secondary-color);
}

#inboxListSent {
    margin-bottom: 40px;
}

/* === css/tasks_panel.css === */
/* ==========================================
   Task Panel - jobb oldalsáv a timeline nézeten
   ========================================== */

.task-panel {
    position: fixed;
    right: 0;
    top: 60px;
    /* navbar height alatt */
    bottom: 0;
    width: 380px;
    background: var(--modal-bg, #1a1a1a);
    border-left: 1px solid var(--border-color, var(--text-default-dark));
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 900;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.task-panel.collapsed {
    transform: translateX(100%);
}

/* Debug: task panel láthatóság tesztelése */
.task-panel:not(.collapsed) {
    transform: translateX(0);
}

.task-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, var(--text-default-dark));
    background: var(--modal-header-bg, #222);
}

.task-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.task-panel-toggle {
    background: none;
    border: none;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 8px;
    transition: transform 0.3s ease;
}

/* When collapsed, show the toggle button peeking from the right edge */
.task-panel.collapsed .task-panel-toggle {
    position: fixed;
    right: 0;
    top: 68px;
    z-index: 901;
    background: var(--modal-bg, #1a1a1a);
    border: 1px solid var(--border-color, var(--text-default-dark));
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 8px 6px;
}

.task-panel.collapsed .task-panel-toggle i {
    transform: rotate(180deg);
}

.task-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === css/tasks_controls.css === */
/* ==========================================
   Controls & Filters
   ========================================== */

.task-panel-controls {
    padding: 16px 20px;
}

.task-new-btn,
.task-new-btn.primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 auto 20px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    color: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.task-new-btn.block,
.task-new-btn.block.primary {
    width: fit-content;
}

.task-new-btn i {
    font-size: 13px;
    flex-shrink: 0;
}

.task-new-btn:hover,
.task-new-btn.primary:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: inherit;
    border-color: color-mix(in srgb, var(--primary-color) 68%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.task-new-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    outline-offset: 2px;
}

.task-search-container {
    position: relative;
    margin-bottom: 16px;
}

.task-search-input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    background: var(--input-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    color: var(--text-color, #fff);
    font-size: 0.9rem;
}

.task-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #ff5722);
}

.task-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #888);
    pointer-events: none;
}

.task-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.task-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-filter-group label {
    min-width: 70px;
    font-size: 0.85rem;
    color: var(--text-muted, #aaa);
}

.task-filter-select {
    flex: 1;
    padding: 8px 12px;
    background: var(--input-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-color, #fff);
    font-size: 0.85rem;
}

/* === css/tasks_list.css === */
/* ==========================================
   Task List
   ========================================== */

.task-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.task-loading,
.task-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted, #888);
}

.task-loading i,
.task-empty i {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.task-empty-create-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--primary-color, #ff5722);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.task-empty-create-btn:hover {
    background: var(--primary-hover, #e64a19);
}

/* Task Groups */
.task-group {
    margin-bottom: 24px;
}

.task-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
}

.task-group-header:hover {
    color: var(--primary-color, #ff5722);
}

.task-group-toggle {
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.task-group.collapsed .task-group-toggle {
    transform: rotate(-90deg);
}

.task-group-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.task-group-count {
    color: var(--text-muted, #888);
    font-weight: normal;
    margin-left: 4px;
}

.task-group.collapsed .task-group-items {
    display: none;
}

.task-group-items {
    padding-left: 8px;
    margin-top: 8px;
}

/* === css/tasks_item.css === */
/* ==========================================
   Task Item
   ========================================== */

.task-item {
    display: flex;
    gap: 12px;
    padding: 6px;
    cursor: pointer;
    align-items: flex-start;
}

.sources-modal-list-section {
    border-radius: 6px;
    padding: 15px;
    background: var(--app-background);
}

.theme-day .sources-modal-list-section {
    background: var(--surface-day-field);
}

.theme-day #sources-modal-list {
    background: var(--surface-day-field);
}

.task-modal-list-section {
    border-radius: 6px;
    padding: 15px;
    background: var(--app-background);
}

.theme-day .task-modal-list-section {
    background: var(--surface-day-field);
    margin-bottom: 30px;
}

.theme-day #task-modal-list {
    background: var(--surface-day-field);
}

.theme-day #tags-modal-list {
    background: var(--surface-day-field);
}

body.theme-night-1 .sources-modal-list-section,
body.theme-night-1 #sources-modal-list,
body.theme-night-1 #sources-modal-list .task-item {
    background: var(--surface-night-field);
}

body.theme-night-1 .task-modal-list-section,
body.theme-night-1 #task-modal-list,
body.theme-night-1 #task-modal-list .task-item {
    background: var(--surface-night-field);
}

body.theme-night-1 #tags-modal-list,
body.theme-night-1 #tags-modal-list .task-item {
    background: var(--surface-night-field);
}

body.theme-night-2 .sources-modal-list-section,
body.theme-night-2 #sources-modal-list,
body.theme-night-2 #sources-modal-list .task-item {
    background: var(--surface-night-alt-field);
}

body.theme-night-2 .task-modal-list-section,
body.theme-night-2 #task-modal-list,
body.theme-night-2 #task-modal-list .task-item {
    background: var(--surface-night-alt-field);
}

body.theme-night-2 #tags-modal-list,
body.theme-night-2 #tags-modal-list .task-item {
    background: var(--surface-night-alt-field);
}

#sources-modal-list {
    background: var(--app-background);
    max-height: 300px;
    overflow-y: auto;
    padding-right: 15px;
    margin-right: -15px;
}

#task-modal-list {
    background: var(--app-background);
    max-height: 300px;
    overflow-y: auto;
    padding-right: 15px;
    margin-right: -15px;
}

#tags-modal-list {
    background: var(--app-background);
    max-height: 300px;
    overflow-y: auto;
    padding-right: 15px;
    margin-right: -15px;
}

#sources-modal-list .task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--border-overlay);
    border-radius: 0;
    transition: background 0.2s;
}

#task-modal-list .task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--border-overlay);
    border-radius: 0;
    transition: background 0.2s;
}

#tags-modal-list .task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--border-overlay);
    border-radius: 0;
    transition: background 0.2s;
}

#sources-modal-list .task-item:last-child {
    border-bottom: none;
}

#task-modal-list .task-item:last-child {
    border-bottom: none;
}

#tags-modal-list .task-item:last-child {
    border-bottom: none;
}

.theme-day #sources-modal-list .task-item {
    border-bottom-color: var(--border-soft);
}

.theme-day #task-modal-list .task-item {
    border-bottom-color: var(--border-soft);
}

.theme-day #tags-modal-list .task-item {
    border-bottom-color: var(--border-soft);
}

#sources-modal-list .task-item:hover {
    background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

#task-modal-list .task-item:hover {
    background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

#tags-modal-list .task-item:hover {
    background: var(--input-hover-bg, rgba(255, 255, 255, 0.05));
}

.theme-day #sources-modal-list .task-item:hover {
    background: var(--surface-hover-day);
}

.theme-day #task-modal-list .task-item:hover {
    background: var(--surface-hover-day);
}

.theme-day #tags-modal-list .task-item:hover {
    background: var(--surface-hover-day);
}

.tag-item-icon {
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tag-item-content {
    flex: 1;
    min-width: 0;
}

.tag-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-item-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.2s;
}

.tag-item-row:hover .tag-item-actions {
    opacity: 1;
}

.tag-action-btn {
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.tag-action-btn:hover {
    background-color: transparent;
}

.tag-action-btn .fa-pencil-alt:hover {
    color: initial;
}

.tag-item-actions i {
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s;
    font-size: 16px;
}

.tag-item-actions i:hover,
.tag-action-btn:hover i {
    transform: rotate(30deg) scale(1.2);
    background-color: transparent;
}

.tag-item-actions .fa-trash-alt {
    color: var(--accent-delete);
}


#sources-modal-list .source-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#sources-modal-list .source-item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sources-modal-list .source-item-meta {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-top: 2px;
}

.task-item-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    opacity: 0.6;
}

.task-item-checkbox-wrapper {
    position: relative;
    width: max(24px, var(--task-status-label-width, 24px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.task-item-status-label {
    font-size: 10px;
    line-height: 1;
    color: var(--text-muted, #888);
    text-align: center;
    white-space: nowrap;
    margin-top: 5px;
}

.task-item-checkbox i {
    font-size: 16px;
}

.task-item-checkbox:hover {
    opacity: 0.7;
}

.task-item[data-status="in_progress"] .task-item-checkbox {
    color: var(--primary-color, #ff5722);
}

.task-item-content {
    flex: 1;
    min-width: 0;
}

.task-item-title {
    font-size: 0.95rem;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.task-item[data-status="done"] .task-item-title {
    opacity: 0.6;
    text-decoration: line-through;
}

.task-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    align-items: center;
}

.task-item-assignee,
.task-item-due-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-item-assignee i,
.task-item-due-date i {
    font-size: 0.75rem;
}

/* Priority badge */
.task-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.task-priority-badge.low {
    background: rgba(156, 156, 156, 0.2);
    color: #9c9c9c;
}

.task-priority-badge.normal {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

.task-priority-badge.high {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

/* Overdue indicator */
.task-item-due-date.overdue {
    color: var(--danger-color, #f44336);
    font-weight: 600;
}

.task-item-due-date.overdue i {
    color: var(--danger-color, #f44336);
}

/* Task actions (on hover) */
.task-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.task-item:hover .task-item-actions {
    opacity: 1;
}

.task-item-action-btn {
    background: none;
    border: none;
    /* color: var(--text-muted, #888); */
    /* color: var(--danger-color); */
    cursor: pointer;
    /* padding: 4px 8px; */
    /* border-radius: 4px; */
    transition: transform 0.2s;
}

.task-item-actions .fa-trash-alt {
    color: var(--accent-delete);
}

.task-item-action-btn:hover {
    /* background: var(--hover-bg, #444);
    color: var(--text-color, #fff); */
    transform: rotate(30deg);
    scale: 1.2;
    background-color: transparent;
    color: var(--accent-delete);
}

/* === css/tasks_modal.css === */
/* ==========================================
   Task Modal
   ========================================== */

.task-modal-content {
    max-width: 600px;
}

.task-modal-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, var(--text-default-dark));
}

.task-modal-meta p {
    margin: 4px 0;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
}

.task-modal-meta-label {
    font-weight: 600;
}

.task-modal-meta-value {
    color: var(--text-color, #ccc);
}

/* ==========================================
   Event Modal Tasks Section
   ========================================== */

.event-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-tasks-header p {
    font-weight: 600;
    ;
}

.event-tasks-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.event-tasks-count {
    color: var(--text-muted, #888);
    font-size: 0.9rem;
    font-weight: normal;
}

.event-tasks-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.event-add-task-btn {
    padding: 8px 16px;
    background: var(--primary-color, #ff5722);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-add-task-btn:hover {
    background: var(--primary-hover, #e64a19);
}

.event-tasks-filters {
    margin-bottom: 12px;
}

.event-tasks-filters select {
    width: 100%;
    padding: 8px 12px;
    background: var(--input-bg, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 4px;
    color: var(--text-color, #fff);
}

.event-tasks-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.task-filter-btn {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    height: initial;
    border-width: 1px;
}

.event-tasks-controls .task-filter-btn.active {
    background-color: var(--primary-color);
    color: var(--app-background);
    /* border: 1px solid var(--primary-color); */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-color: var(--primary-color);
}

.task-filter-btn.active {
    background-color: var(--app-background);
    color: var(--primary-color);
    /* border: none; */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-color: var(--primary-color);
}

.task-filter-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--app-background);
    color: var(--app-background);
}

.event-tasks-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
    border-radius: 6px;
}

.event-tasks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted, #888);
    margin: 0 auto;
    font-size: 12px;
}

.event-tasks-empty i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Event tasks list: actions always visible (not hover-dependent) */
.event-tasks-list .task-item-actions {
    opacity: 1;
}

/* Drag-and-drop styles for task reordering */
.event-tasks-list .task-item.draggable {
    cursor: grab;
}

.event-tasks-list .task-item.draggable:active {
    cursor: grabbing;
}

.event-tasks-list .task-item.dragging {
    opacity: 0.5;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.event-tasks-list .task-item.drag-over {
    border-top: 2px solid var(--primary-color);
    margin-top: -2px;
}

/* Theme - day mode */
.theme-day .event-tasks-section {
    border-top-color: var(--border-soft);
}

.theme-day .event-tasks-filters select {
    background: var(--surface-day-field);
    border-color: var(--border-soft);
    color: var(--text-default-dark);
}

.theme-day .event-tasks-list .task-item:hover {
    background: var(--input-bg, var(--surface-day-field));
    border-color: var(--border-color, var(--border-soft));
}

/* === css/tasks_overview.css === */
/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
    .task-panel {
        width: 100%;
        max-width: 380px;
    }
}

/* ==========================================
   Task Overview Modal - match LifeOS/timeline modal look
   ========================================== */

#task-overview-modal .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 30px);
    padding: 0;
    background: var(--app-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#task-overview-modal .lifeos-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#task-overview-modal #taskOverviewModalButtons.modal-buttons {
    margin: 0 !important;
    margin-left: -1px !important;
    margin-top: 1px !important;
}

#sources-overview-modal .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 30px);
    padding: 0;
    background: var(--app-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#sources-overview-modal .lifeos-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#sources-overview-modal #sourcesOverviewModalButtons.modal-buttons {
    --modal-buttons-accent: var(--primary-color);
    --modal-buttons-contrast: var(--app-background);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: fit-content;
    background-color: var(--modal-buttons-accent);
    border-radius: 0 12px 0 0;
    padding: 5px 10px;
    box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

#sources-overview-modal #sourcesOverviewModalButtons.modal-buttons button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#sources-overview-modal .lifeos-modal-body {
    padding-bottom: 50px;
    /* Extra bottom padding for floating buttons */
}

#tags-overview-modal .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 30px);
    padding: 0;
    background: var(--app-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#tags-overview-modal .lifeos-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#tags-overview-modal #tagsOverviewModalButtons.modal-buttons {
    --modal-buttons-accent: var(--primary-color);
    --modal-buttons-contrast: var(--app-background);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: fit-content;
    background-color: var(--modal-buttons-accent);
    border-radius: 0 12px 0 0;
    padding: 5px 10px;
    box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

#tags-overview-modal #tagsOverviewModalButtons.modal-buttons button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#tags-overview-modal .lifeos-modal-body {
    padding-bottom: 50px;
    /* Extra bottom padding for floating buttons */
}

#categories-overview-modal .modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 30px);
    padding: 0;
    background: var(--app-background);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#categories-overview-modal .lifeos-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#categories-overview-modal #categoriesOverviewModalButtons.modal-buttons {
    --modal-buttons-accent: var(--primary-color);
    --modal-buttons-contrast: var(--app-background);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: fit-content;
    background-color: var(--modal-buttons-accent);
    border-radius: 0 12px 0 0;
    padding: 5px 10px;
    box-shadow: 4px -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

#categories-overview-modal #categoriesOverviewModalButtons.modal-buttons button {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--modal-buttons-contrast, var(--lifeos-modal-contrast, var(--app-background)));
}

#categories-overview-modal .lifeos-modal-body {
    padding-bottom: 50px;
    /* Extra bottom padding for floating buttons */
}

/* ==========================================
   Theme support - day mode
   ========================================== */

.theme-day .task-panel {
    background: var(--surface-soft);
    border-left-color: var(--border-soft);
}

.theme-day .task-panel-header {
    background: var(--surface-day-field);
    border-bottom-color: var(--border-soft);
}

.theme-day .task-panel-controls {
    border-bottom-color: var(--border-soft);
}

.theme-day .task-search-input,
.theme-day .task-filter-select {
    background: var(--surface-day-field);
    border-color: var(--border-soft);
    color: var(--text-default-dark);
}

.theme-day .task-item {
    background: var(--surface-day-field);
    border-color: var(--border-muted);
}

.theme-day .task-item:hover {
    background: var(--surface-hover-day);
}

.theme-day .task-item-checkbox {
    border-color: var(--border-input-light);
}

.theme-day .task-item-title {
    color: var(--text-default-dark);
}

.theme-day .task-item-meta {
    color: var(--text-muted);
}

.theme-day .task-item-action-btn {
    color: var(--text-muted);
}

.theme-day .task-item-action-btn:hover {
    color: var(--text-default-dark);
}

/* === css/onboarding.css === */
/* ============================================================
   Demo-Driven Onboarding – Styles
   ============================================================ */
:root {
    --onb-bg-0: #e7eef6;
    --onb-bg-1: #dde7f2;
    --onb-bg-2: #d3dfec;
    --onb-surface: #f1f6fc;
    --onb-surface-2: #e4edf7;
    --onb-border-soft: rgba(78, 115, 145, 0.26);
    --onb-border-strong: rgba(78, 115, 145, 0.42);
    --onb-text-main: #203448;
    --onb-text-muted: rgba(42, 62, 84, 0.86);
    --onb-text-soft: rgba(53, 75, 98, 0.74);
    --onb-accent: #6f9dc0;
    --onb-accent-strong: #86afcd;
    --onb-shadow: 0 20px 44px rgba(49, 72, 96, 0.28), 0 8px 20px rgba(49, 72, 96, 0.2);
}

/* ---------- Full-screen overlay ---------- */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px circle at 10% -12%, rgba(117, 165, 204, 0.10) 0%, transparent 30%),
        radial-gradient(920px circle at 94% 112%, rgba(132, 181, 160, 0.07) 0%, transparent 38%),
        rgba(92, 108, 127, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    animation: onbFadeIn 0.5s ease forwards;
    touch-action: none;
    overscroll-behavior: none;
}

@keyframes onbFadeIn {
    to { opacity: 1; }
}

.onboarding-overlay.onb-exit {
    animation: onbFadeOut 0.4s ease forwards;
}

@keyframes onbFadeOut {
    to { opacity: 0; pointer-events: none; }
}

/* ---------- Card container ---------- */
.onboarding-card {
    position: relative;
    width: 94vw;
    max-width: 720px;
    max-height: 88vh;
    border-radius: 16px;
    background:
        linear-gradient(165deg,
            rgba(241, 247, 253, 0.96) 0%,
            rgba(229, 238, 248, 0.97) 58%,
            rgba(217, 228, 241, 0.98) 100%);
    color: var(--onb-text-main);
    border: 1px solid var(--onb-border-soft);
    box-shadow: var(--onb-shadow);
    overflow: hidden;
    transform: translateY(24px) scale(0.97);
    animation: onbCardIn 0.5s 0.15s ease forwards;
    opacity: 0;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

.onboarding-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(125, 158, 184, 0.62) 50%, transparent 100%);
    pointer-events: none;
}

.onboarding-card-body {
    overflow-y: auto;
    max-height: 88vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 162, 192, 0.34) transparent;
    touch-action: pan-y;
    overscroll-behavior-x: none;
}

@keyframes onbCardIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Skip / Close ---------- */
.onboarding-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(229, 239, 248, 0.88);
    border: 1px solid var(--onb-border-soft);
    border-radius: 8px;
    color: var(--onb-text-soft);
    font-size: 13px;
    padding: 6px 14px;
    height: auto;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
}

.onboarding-skip:hover {
    color: var(--onb-text-main);
    border-color: var(--onb-border-strong);
    background: rgba(111, 157, 192, 0.2);
}

.onboarding-skip:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.88);
    outline-offset: 2px;
}

/* ---------- Header ---------- */
.onboarding-header {
    text-align: center;
    padding: 30px;
}

.onboarding-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--onb-text-main);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.onboarding-header p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--onb-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ---------- Guide banner ---------- */
.onboarding-guide-link {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 16px auto 0;
    padding: 10px 16px;
    border: 1px solid rgba(111, 157, 192, 0.5);
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(111, 157, 192, 0.16) 0%, rgba(134, 175, 205, 0.24) 100%);
    color: var(--onb-text-main);
    text-decoration: none;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 3px 10px rgba(49, 72, 96, 0.1);
    transition: all 0.2s;
}

.onboarding-guide-link:hover {
    border-color: var(--onb-accent);
    background: linear-gradient(120deg, rgba(111, 157, 192, 0.24) 0%, rgba(134, 175, 205, 0.34) 100%);
    box-shadow: 0 5px 16px rgba(49, 72, 96, 0.16);
    transform: translateY(-1px);
    color: var(--onb-text-main);
    text-decoration: none;
}

.onboarding-guide-link:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.88);
    outline-offset: 2px;
}

.onboarding-guide-link .onb-guide-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(111, 157, 192, 0.28);
    color: var(--onb-accent);
    font-size: 15px;
}

.onboarding-guide-link .onb-guide-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--onb-text-muted);
}

.onboarding-guide-link .onb-guide-text strong {
    display: block;
    color: var(--onb-text-main);
    font-weight: 600;
}

.onboarding-guide-link .onb-guide-ext {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--onb-text-soft);
}

@media (max-width: 540px) {
    .onboarding-guide-link {
        margin-top: 12px;
        padding: 9px 12px;
        font-size: 12px;
    }
}

/* ---------- Demo grid ---------- */
.onboarding-demos {
    padding: 8px 24px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 540px) {
    .onboarding-demos {
        grid-template-columns: 1fr;
        padding: 8px 16px 24px;
    }
    .onboarding-card {
        width: 98vw;
        border-radius: 12px;
    }
    .onboarding-header {
        padding: 40px 20px 20px;
    }
}

/* ---------- Demo card ---------- */
.onb-demo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: auto;
    border-radius: 12px;
    background:
        linear-gradient(155deg,
            rgba(237, 245, 252, 0.88) 0%,
            rgba(225, 236, 247, 0.92) 100%);
    border: 1px solid rgba(159, 183, 204, 0.2);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.onb-demo-card:hover {
    background:
        linear-gradient(155deg,
            rgba(243, 249, 255, 0.94) 0%,
            rgba(230, 241, 251, 0.96) 100%);
    border-color: rgba(161, 190, 215, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(67, 98, 126, 0.26);
    color: inherit;
}

.onb-demo-card:active {
    transform: translateY(0);
}

.onb-demo-card .onb-demo-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(95, 133, 167, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.onb-demo-card .onb-demo-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--onb-text-main);
    margin-bottom: 4px;
    line-height: 1.3;
}

.onb-demo-card .onb-demo-desc {
    font-size: 12px;
    color: var(--onb-text-soft);
    line-height: 1.4;
}

/* ---------- Loading state in card ---------- */
.onb-demo-card.onb-loading {
    pointer-events: none;
    opacity: 0.5;
}

.onb-demo-card.onb-active {
    border-color: var(--onb-accent);
    background:
        linear-gradient(155deg,
            rgba(244, 250, 255, 0.96) 0%,
            rgba(223, 236, 248, 0.97) 100%);
    box-shadow: 0 0 0 1px rgba(111, 157, 192, 0.28), 0 10px 20px rgba(62, 92, 118, 0.24);
}

.onb-demo-card.onb-active .onb-demo-icon {
    animation: onbPulse 1.2s ease-in-out infinite;
}

@keyframes onbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ---------- Import loader layer ---------- */
.onb-import-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(450px circle at 50% 20%, rgba(133, 173, 204, 0.22) 0%, transparent 64%),
        rgba(218, 229, 241, 0.56);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 6;
}

.onboarding-overlay.onb-importing .onb-import-layer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

.onboarding-overlay.onb-importing .onboarding-skip,
.onboarding-overlay.onb-importing .onboarding-empty-cta,
.onboarding-overlay.onb-importing .onb-demo-card {
    pointer-events: none;
}

.onb-import-shell {
    min-width: min(460px, 86%);
    max-width: 520px;
    border-radius: 16px;
    padding: 22px 20px 20px;
    text-align: center;
    border: 1px solid rgba(107, 145, 175, 0.34);
    background: linear-gradient(162deg, rgba(239, 246, 252, 0.92) 0%, rgba(224, 236, 247, 0.94) 100%);
    box-shadow: 0 18px 34px rgba(46, 67, 88, 0.24);
}

.onb-import-loader {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}

.onb-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.onb-orbit-a {
    border-top-color: color-mix(in srgb, var(--onb-accent) 90%, white 10%);
    border-right-color: color-mix(in srgb, var(--onb-accent) 56%, transparent);
    animation: onbOrbitSpin 1.05s linear infinite;
}

.onb-orbit-b {
    inset: 8px;
    border-top-color: rgba(97, 136, 166, 0.68);
    border-left-color: rgba(97, 136, 166, 0.42);
    animation: onbOrbitSpin 1.45s linear infinite reverse;
}

.onb-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--onb-accent);
    box-shadow: 0 0 0 0 rgba(111, 157, 192, 0.45);
    animation: onbCorePulse 1.5s ease-in-out infinite;
}

.onb-import-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--onb-text-main);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.01em;
}

.onb-import-demo {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--onb-text-soft);
    font-family: 'Montserrat', sans-serif;
}

@keyframes onbOrbitSpin {
    to { transform: rotate(360deg); }
}

@keyframes onbCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(111, 157, 192, 0.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 0 9px rgba(111, 157, 192, 0);
    }
}

@media (max-width: 540px) {
    .onb-import-shell {
        min-width: 0;
        width: 100%;
        padding: 18px 14px 16px;
    }
}

/* ---------- Or separator ---------- */
.onboarding-or {
    padding: 0 24px;
    text-align: center;
    margin-bottom: 18px;
}

.onboarding-or span {
    display: inline-block;
    position: relative;
    font-size: 12px;
    color: rgba(191, 206, 220, 0.54);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.onboarding-or span::before,
.onboarding-or span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
    background: rgba(162, 184, 205, 0.26);
}

.onboarding-or span::before { right: calc(100% + 12px); }
.onboarding-or span::after  { left: calc(100% + 12px); }

/* ---------- Start empty button ---------- */
.onboarding-empty-cta {
    display: block;
    margin: 0 auto 32px;
    padding: 10px 28px;
    height: auto;
    border: 1px solid var(--onb-border-soft);
    border-radius: 10px;
    background: rgba(230, 240, 249, 0.9);
    color: var(--onb-text-muted);
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-empty-cta:hover {
    color: var(--onb-text-main);
    border-color: var(--onb-border-strong);
    background: rgba(111, 157, 192, 0.2);
}

.onboarding-empty-cta:focus-visible,
.onb-demo-card:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.88);
    outline-offset: 2px;
}

/* ---------- Progress dots ---------- */
.onboarding-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-bottom: 24px;
}

.onboarding-progress .onb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(111, 157, 192, 0.42);
    transition: all 0.3s;
}

.onboarding-progress .onb-dot.active {
    width: 20px;
    border-radius: 3px;
    background: var(--onb-accent);
}

/* ============================================================
   Guided Tour – Tooltips & Spotlights
   ============================================================ */

/* Spotlight overlay */
.tour-spotlight-overlay {
    position: fixed;
    inset: 0;
    z-index: 299998;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.3s;
}

/* Spotlight cutout - the highlighted element */
.tour-spotlight-target {
    z-index: 299999;
    box-shadow: 0 14px 28px rgba(56, 83, 107, 0.24),
                0 0 0 3px rgba(111, 157, 192, 0.68),
                0 0 0 8px rgba(226, 238, 248, 0.62);
    border-radius: 8px;
    filter: saturate(1.08) drop-shadow(0 0 0 rgba(124, 168, 201, 0));
    animation: tourTargetPulse 1.55s ease-in-out infinite;
    transition: box-shadow 0.25s, filter 0.25s;
}

@keyframes tourTargetPulse {
    0%, 100% {
        box-shadow: 0 14px 28px rgba(56, 83, 107, 0.24),
                    0 0 0 3px rgba(111, 157, 192, 0.62),
                    0 0 0 8px rgba(226, 238, 248, 0.52);
        filter: saturate(1.07) drop-shadow(0 0 0 rgba(124, 168, 201, 0));
    }
    50% {
        box-shadow: 0 18px 34px rgba(56, 83, 107, 0.3),
                    0 0 0 4px rgba(118, 166, 201, 0.84),
                    0 0 0 12px rgba(226, 238, 248, 0.78);
        filter: saturate(1.14) drop-shadow(0 0 11px rgba(124, 168, 201, 0.55));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tour-spotlight-target {
        animation: none;
    }
    .tour-tooltip {
        transition: none;
    }
}

/* Tour tooltip */
.tour-tooltip {
    position: fixed;
    z-index: 300000;
    max-width: 340px;
    padding: 20px;
    border-radius: 12px;
    background:
        linear-gradient(160deg,
            rgba(241, 247, 253, 0.96) 0%,
            rgba(224, 235, 246, 0.97) 100%);
    color: var(--onb-text-main);
    box-shadow: var(--onb-shadow);
    border: 1px solid var(--onb-border-soft);
    font-family: 'Montserrat', sans-serif;
    opacity: 0;
    transform: translateY(8px);
    animation: tourTipIn 0.3s ease forwards;
    transition: top 190ms cubic-bezier(0.2, 0.78, 0.22, 1),
                left 190ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

@keyframes tourTipIn {
    to { opacity: 1; transform: translateY(0); }
}

.tour-tooltip.tour-exit {
    animation: tourTipOut 0.25s ease forwards;
}

@keyframes tourTipOut {
    to { opacity: 0; transform: translateY(6px); }
}

.tour-tooltip h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 8px;
    color: var(--onb-accent-strong);
}

.tour-tooltip p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--onb-text-muted);
    margin: 0 0 16px;
}

.tour-tooltip-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tour-tooltip-actions .tour-step-counter {
    font-size: 12px;
    color: rgba(76, 101, 126, 0.6);
}

.tour-tooltip-actions button {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.tour-btn-next {
    background: var(--onb-accent);
    color: #17304a;
    font-weight: 600;
    border: 1px solid rgba(180, 204, 224, 0.36);
}

.tour-btn-next:hover {
    background: var(--onb-accent-strong);
}

.tour-btn-skip {
    background: rgba(228, 239, 248, 0.9);
    border: 1px solid var(--onb-border-soft) !important;
    color: var(--onb-text-soft);
}

.tour-btn-skip:hover {
    color: var(--onb-text-main);
    border-color: var(--onb-border-strong) !important;
}

.tour-tooltip-actions button:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.9);
    outline-offset: 2px;
}

/* Arrow */
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--onb-surface);
    border: 1px solid var(--onb-border-soft);
}

.tour-tooltip[data-pos="bottom"]::before {
    top: -7px;
    left: var(--arrow-h, 24px);
    transform: translateX(-50%) rotate(45deg);
    border-right: none;
    border-bottom: none;
}

.tour-tooltip[data-pos="top"]::before {
    bottom: -7px;
    left: var(--arrow-h, 24px);
    transform: translateX(-50%) rotate(45deg);
    border-left: none;
    border-top: none;
}

.tour-tooltip[data-pos="left"]::before {
    right: -7px;
    top: var(--arrow-v, 20px);
    transform: translateY(-50%) rotate(45deg);
    border-left: none;
    border-bottom: none;
}

.tour-tooltip[data-pos="right"]::before {
    left: -7px;
    top: var(--arrow-v, 20px);
    transform: translateY(-50%) rotate(45deg);
    border-right: none;
    border-top: none;
}

/* ---------- Beacon pulse ---------- */
.tour-beacon {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--onb-accent);
    z-index: 299999;
    cursor: pointer;
    animation: beaconPulse 2s ease-in-out infinite;
}

.tour-beacon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--onb-accent);
    opacity: 0;
    animation: beaconRing 2s ease-in-out infinite;
}

@keyframes beaconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

@keyframes beaconRing {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* === css/onboarding_tour.css === */
/* ============================================================
   NEW: Onboarding Interactive Tour – Styles
   10-step demo-driven tour overlay components
   ============================================================ */

/* ---------- Dimmer backdrop with spotlight cutout ---------- */
.onb-tour-dimmer {
    position: fixed;
    inset: 0;
    z-index: 310000;
    /* Always non-interactive – purely visual. The timeline stays fully clickable. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.onb-tour-dimmer.active {
    opacity: 1;
    /* Keep pointer-events: none so clicks pass through to the timeline */
    pointer-events: none;
}
.onb-tour-dimmer svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.onb-tour-dimmer .dimmer-fill {
    fill: rgba(6, 10, 18, 0.6);
    transition: opacity 0.3s;
}
.onb-tour-dimmer .spotlight-hole {
    rx: 12;
    ry: 12;
    /* No transition here — rAF loop updates every frame, transitions cause jitter.
       Step-to-step animation is handled by .onb-tour-dimmer--step-enter class. */
    transition: none;
    will-change: x, y, width, height;
}
.onb-tour-dimmer--step-enter .spotlight-hole {
    transition: x 0.35s cubic-bezier(0.22,1,0.36,1), y 0.35s cubic-bezier(0.22,1,0.36,1),
                width 0.35s cubic-bezier(0.22,1,0.36,1), height 0.35s cubic-bezier(0.22,1,0.36,1);
}
.onb-tour-dimmer .spotlight-outline {
    fill: none;
    stroke: rgba(140, 200, 248, 1);
    stroke-width: 2.5;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.onb-tour-dimmer--step-enter .spotlight-outline {
    transition: x 0.35s cubic-bezier(0.22,1,0.36,1), y 0.35s cubic-bezier(0.22,1,0.36,1),
                width 0.35s cubic-bezier(0.22,1,0.36,1), height 0.35s cubic-bezier(0.22,1,0.36,1),
                opacity 0.2s ease;
}

/* ---------- Interaction shield (blocks clicks on dimmed regions) ---------- */
.onb-tour-interaction-shield {
    position: fixed;
    inset: 0;
    z-index: 310001;
    pointer-events: none;
}

.onb-tour-interaction-shield-pane {
    position: fixed;
    pointer-events: auto;
    background: transparent;
}

/* ---------- Pulse ring around spotlight target ---------- */
.onb-tour-pulse {
    position: fixed;
    z-index: 310001;
    pointer-events: none;
    border-radius: 12px;
    box-shadow:
        0 0 0 3px rgba(120, 180, 230, 0.9),
        0 0 0 8px rgba(120, 180, 230, 0.35),
        0 0 18px 4px rgba(100, 170, 230, 0.12);
    animation: onbTourPulse 2s ease-in-out infinite;
    /* No transition — rAF loop updates every frame, instant snap required */
    transition: none;
    will-change: top, left, width, height;
}
@keyframes onbTourPulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(120, 180, 230, 0.9),
            0 0 0 8px rgba(120, 180, 230, 0.35),
            0 0 18px 4px rgba(100, 170, 230, 0.12);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(130, 190, 240, 1),
            0 0 0 14px rgba(130, 190, 240, 0.18),
            0 0 26px 6px rgba(100, 170, 230, 0.08);
    }
}

/* ---------- Full-screen border glow frame (borderGlow steps) ---------- */
.onb-tour-glow-frame {
    position: fixed;
    z-index: 310001;
    pointer-events: none;
    border-radius: 12px;
    border: 2px solid rgba(111, 178, 230, 0.9);
    box-shadow: 0 0 0 1px rgba(111, 178, 230, 0.16);
    animation: onbGlowFramePulse 2s ease-in-out infinite;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
@keyframes onbGlowFramePulse {
    0%, 100% {
        border-color: rgba(111, 178, 230, 0.74);
        box-shadow: 0 0 0 1px rgba(111, 178, 230, 0.14);
    }
    50% {
        border-color: rgba(140, 200, 248, 0.98);
        box-shadow: 0 0 0 1px rgba(140, 200, 248, 0.2);
    }
}

/* ---------- Tooltip card ---------- */
.onb-tour-tooltip {
    position: fixed;
    z-index: 310002;
    max-width: 460px;
    min-width: 340px;
    padding: 30px 28px 24px;
    border-radius: 18px;
    background:
        linear-gradient(168deg,
            rgba(250, 253, 255, 0.99) 0%,
            rgba(236, 244, 253, 1) 100%);
    color: var(--onb-text-main, #1a2d40);
    box-shadow:
        0 32px 80px rgba(10, 24, 44, 0.42),
        0 12px 32px rgba(10, 24, 44, 0.24),
        0 0 0 1px rgba(78, 115, 145, 0.12);
    border: 1px solid rgba(78, 115, 145, 0.20);
    font-family: 'Montserrat', sans-serif;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    animation: onbTourTipIn 0.42s 0.16s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: auto;
    will-change: top, left, opacity, transform;
    backdrop-filter: blur(6px);
}
.onb-tour-tooltip.exit {
    animation: onbTourTipOut 0.25s ease forwards;
}

/* Perfectly centered variant (no anchor/arrow) */
.onb-tour-tooltip--centered {
    top: 50% !important;
    left: 50% !important;
    max-width: min(600px, 92vw);
    min-width: 360px;
    padding: 36px 34px 28px;
    transform: translate(-50%, -50%) translateY(16px) scale(0.97);
    animation: onbTourTipInCentered 0.45s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.onb-tour-tooltip--centered h4 {
    font-size: 24px;
    margin-bottom: 14px;
    text-align: center;
}
/* Compound both classes so this beats the base `.onb-tour-tooltip .onb-tour-body`
   rule (equal specificity but declared later in the file, so it would win on
   source order — notably its max-width:38ch that was pinching this copy). */
.onb-tour-tooltip.onb-tour-tooltip--centered .onb-tour-body {
    /* Left-align the paragraph: centered text zig-zags badly once the copy
       runs past ~6 lines (browsers stop applying text-wrap:balance), so a
       straight left edge reads far tidier. Title + buttons stay centered.
       max-width:none lets it fill the card width instead of a narrow column. */
    text-align: left;
    line-height: 1.62;
    max-width: none;
    text-wrap: pretty;
}
.onb-tour-tooltip--centered .onb-tour-footer-btns {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}
/* Centered cards: no left/right split — the flex:1 spacer would shove the
   buttons off-center, so drop it and let gap handle spacing */
.onb-tour-tooltip--centered .onb-tour-footer-spacer {
    display: none;
}
.onb-tour-tooltip--centered .onb-tour-footer-bottom {
    align-items: center;
}
.onb-tour-tooltip--centered.exit {
    animation: onbTourTipOutCentered 0.25s ease forwards;
}
@keyframes onbTourTipInCentered {
    to { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@keyframes onbTourTipOutCentered {
    to { opacity: 0; transform: translate(-50%, -50%) translateY(6px) scale(0.98); pointer-events: none; }
}
@keyframes onbTourTipIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes onbTourTipOut {
    to { opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none; }
}

/* One-line caption (rides above the spotlight during the modal sweep, in place
   of the full bubble so it never covers the content being narrated). */
.onb-tour-caption {
    position: fixed;
    z-index: 310002;
    max-width: min(680px, 92vw);
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(168deg,
        rgba(250, 253, 255, 0.99) 0%,
        rgba(236, 244, 253, 1) 100%);
    color: var(--onb-accent-strong, #2c5a7c);
    box-shadow:
        0 14px 36px rgba(10, 24, 44, 0.34),
        0 4px 12px rgba(10, 24, 44, 0.18),
        0 0 0 1px rgba(78, 115, 145, 0.14);
    border: 1px solid rgba(78, 115, 145, 0.20);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1px;
    text-align: center;
    pointer-events: none;
    backdrop-filter: blur(6px);
    will-change: top, left, opacity, transform;
}
.onb-tour-caption i {
    margin-right: 7px;
    color: var(--onb-accent, #6f9dc0);
}
/* User-paced BEAT 3 sweep: text + a clickable "Next" sit on one line. The caption
   itself is pointer-events:none (so it never blocks the spotlit content), so the
   button re-enables pointer events on itself. */
.onb-tour-caption:has(.onb-sweep-next) {
    display: inline-flex;
    align-items: center;
}
.onb-tour-caption .onb-sweep-next {
    pointer-events: auto;
    flex: none;
    /* margin (not flex gap) so the spacing holds even if :has()/flex doesn't apply */
    margin-left: 28px;
    vertical-align: middle;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--onb-accent, #6f9dc0);
    background: var(--onb-accent, #6f9dc0);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.onb-tour-caption .onb-sweep-next:hover {
    background: var(--onb-accent-strong, #2c5a7c);
    border-color: var(--onb-accent-strong, #2c5a7c);
}
.onb-tour-caption .onb-sweep-next:active { transform: translateY(1px); }
.onb-tour-caption .onb-sweep-next i {
    margin: 0 0 0 5px;
    font-size: 0.9em;
    color: #fff;
}

/* Arrow */
.onb-tour-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(237, 244, 251, 0.97);
    border: 1px solid rgba(78, 115, 145, 0.24);
    z-index: -1;
}
.onb-tour-tooltip[data-pos="inside"]::before,
.onb-tour-tooltip[data-pos="center"]::before {
    display: none;
}
.onb-tour-tooltip[data-pos="bottom"]::before {
    top: -7px;
    left: var(--arrow-h, 28px);
    transform: rotate(45deg);
    border-right: none;
    border-bottom: none;
}
.onb-tour-tooltip[data-pos="top"]::before {
    bottom: -7px;
    left: var(--arrow-h, 28px);
    transform: rotate(45deg);
    border-left: none;
    border-top: none;
}
.onb-tour-tooltip[data-pos="left"]::before {
    right: -7px;
    top: var(--arrow-v, 20px);
    transform: rotate(45deg);
    border-left: none;
    border-bottom: none;
}
.onb-tour-tooltip[data-pos="right"]::before {
    left: -7px;
    top: var(--arrow-v, 20px);
    transform: rotate(45deg);
    border-right: none;
    border-top: none;
}

/* ---------- Tooltip inner elements ---------- */
/* Updated: unified title font-size/weight and body line-height for consistency */
.onb-tour-tooltip h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    margin: 0 0 12px;
    color: var(--onb-accent-strong, #2c5a7c);
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.onb-tour-tooltip .onb-tour-body {
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--onb-text-muted, #3a5068e6);
    margin: 0 0 18px;
    max-width: 38ch;
    /* Even out line lengths and avoid single-word orphans — keeps the
       ragged edge tidy in both HU and EN copy. */
    text-wrap: pretty;
    hyphens: none;
}
/* Hint/subtext line inside the body — consistent secondary styling */
.onb-tour-tooltip .onb-tour-body small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--onb-text-muted, #2a3e54b0);
    opacity: 0.72;
}
/* Support line — lighter secondary emphasis below main copy */
.onb-tour-support-line {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--onb-text-muted, #3a5068b8);
    font-style: italic;
}

/* ---------- Progress indicator (segmented bar) ---------- */
.onb-tour-progress {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    max-width: 180px;
}
.onb-tour-progress .dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(111, 157, 192, 0.16);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.onb-tour-progress .dot.done {
    background: var(--onb-accent, #6f9dc0);
}
.onb-tour-progress .dot.active {
    background: linear-gradient(90deg, #5a9ec8, #7ab8dc);
    height: 5px;
    box-shadow: 0 0 8px rgba(111, 157, 192, 0.4);
}

/* ---------- Footer (2-row layout) ---------- */
.onb-tour-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.onb-tour-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.onb-tour-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(78, 115, 145, 0.08);
}
.onb-tour-footer-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}
.onb-tour-footer-spacer {
    flex: 1;
}

/* Legacy wrapper — keep for engine references */
.onb-tour-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}
.onb-tour-actions-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.onb-tour-actions-skip {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.onb-tour-step-label,
.onb-tour-actions .onb-tour-step-label {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(76, 101, 126, 0.65);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.02em;
}
.onb-tour-sep {
    color: rgba(76, 101, 126, 0.3);
    font-size: 11px;
    user-select: none;
    padding: 0 2px;
}
.onb-tour-btn-back {
    background: rgba(228, 239, 248, 0.92);
    border: 1px solid rgba(78, 115, 145, 0.22) !important;
    color: var(--onb-text-soft, #354b62bd);
    font-size: 11px;
    padding: 7px 11px;
    line-height: 1;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.2s;
}
.onb-tour-btn-back:hover {
    color: var(--onb-text-main, #203448);
    border-color: rgba(78, 115, 145, 0.4) !important;
}
.onb-tour-actions button {
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: all 0.2s;
}
/* Updated: unified primary button — consistent padding, radius, font-weight */
.onb-tour-btn-primary {
    background: linear-gradient(135deg, #5c9bbe, #7ab8dc);
    color: #0a1e32;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 28px;
    border-radius: 10px;
    border: 1px solid rgba(180, 210, 235, 0.4) !important;
    line-height: 1;
    min-height: 42px;
    min-width: 96px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    letter-spacing: 0.01em;
}
/* Secondary (ghost) button — visible alternative action, used e.g. on the
   demo-tour finale where "keep exploring" is a real choice, not a skip link */
.onb-tour-btn-ghost {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(78, 115, 145, 0.32) !important;
    color: var(--onb-text-main, #203448);
    font-weight: 600;
    font-size: 13px;
    padding: 11px 20px;
    border-radius: 10px;
    line-height: 1;
    min-height: 42px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    letter-spacing: 0.01em;
}
.onb-tour-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(78, 115, 145, 0.55) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(90, 158, 190, 0.2);
}
.onb-tour-btn-ghost:active {
    transform: translateY(0);
}
.onb-tour-btn-primary:hover {
    background: linear-gradient(135deg, #6dacc8, #8cc4e4);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(90, 158, 190, 0.35);
}
.onb-tour-btn-primary:active {
    transform: translateY(0);
}
/* Updated: unified skip-link styles — consistent size, underline, and spacing */
.onb-tour-btn-link {
    background: none;
    border: none !important;
    color: rgba(76, 101, 126, 0.52);
    font-size: 11px;
    padding: 2px 6px;
    text-decoration: none;
    line-height: 1.4;
    opacity: 0.7;
    transition: all 0.2s;
}
.onb-tour-btn-link:hover {
    color: var(--onb-text-main, #203448);
    opacity: 1;
}
/* Updated: focus-visible on skip/link buttons for accessibility parity */
.onb-tour-btn-link:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.9);
    outline-offset: 2px;
    border-radius: 4px;
}
/* keep old class names wired for engine references */
.onb-tour-btn-skip-step { display: none; }
.onb-tour-btn-secondary { display: none; }
.onb-tour-actions button:focus-visible {
    outline: 2px solid rgba(166, 192, 213, 0.9);
    outline-offset: 2px;
}

/* ---------- Gated step indicator ---------- */
.onb-tour-gated-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--onb-accent, #4a7fa0);
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(111, 157, 192, 0.08);
    border: 1px solid rgba(111, 157, 192, 0.18);
    line-height: 1.45;
}
.onb-tour-gated-hint i {
    font-size: 11px;
}

/* ---------- Success feedback ---------- */
.onb-tour-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.14) 0%, rgba(72, 187, 120, 0.18) 100%);
    color: #1a7a3e;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 16px;
    border: 1px solid rgba(72, 187, 120, 0.22);
    animation: onbSuccessIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.onb-tour-success i {
    font-size: 15px;
    color: #27ae60;
}
@keyframes onbSuccessIn {
    from { opacity: 0; transform: scale(0.88) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Pointer finger overlay (optional) ---------- */
.onb-tour-pointer {
    position: fixed;
    z-index: 310003;
    font-size: 28px;
    pointer-events: none;
    animation: onbPointerBounce 1.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@keyframes onbPointerBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ---------- Secondary pulse ring (points to close button / action target) ---------- */
.onb-tour-secondary-pulse {
    position: fixed;
    z-index: 310003;
    pointer-events: none;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px rgba(230, 126, 34, 0.85),
        0 0 0 7px rgba(230, 126, 34, 0.28);
    animation: onbSecondaryPulse 1.2s ease-in-out infinite;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
@keyframes onbSecondaryPulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(230, 126, 34, 0.85),
            0 0 0 7px rgba(230, 126, 34, 0.28);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(230, 126, 34, 1),
            0 0 0 14px rgba(230, 126, 34, 0.12);
        transform: scale(1.1);
    }
}

/* ---------- Click-flash: simulates a click tap on an element ---------- */
@keyframes onbClickFlash {
    0%   { box-shadow: 0 0 0 0   rgba(230, 126, 34, 0.0),  inset 0 0 0 0   rgba(230, 126, 34, 0.0); opacity: 1; }
    15%  { box-shadow: 0 0 0 6px rgba(230, 126, 34, 0.75), inset 0 0 0 4px rgba(230, 126, 34, 0.25); opacity: 1; }
    55%  { box-shadow: 0 0 0 12px rgba(230, 126, 34, 0.3), inset 0 0 0 0   rgba(230, 126, 34, 0.0); opacity: 0.8; }
    100% { box-shadow: 0 0 0 20px rgba(230, 126, 34, 0.0), inset 0 0 0 0   rgba(230, 126, 34, 0.0); opacity: 0; }
}
.onb-click-flash {
    position: fixed;
    z-index: 310010;
    pointer-events: none;
    border-radius: 8px;
    animation: onbClickFlash 0.5s ease-out forwards;
}

/* Phase-2 hint variant (close the modal) */
.onb-tour-gated-hint.phase2 {
    color: rgba(200, 100, 30, 0.95);
    background: rgba(230, 126, 34, 0.1);
    border-color: rgba(230, 126, 34, 0.28);
    font-weight: 600;
}
.onb-tour-gated-hint.phase2 i {
    color: rgba(200, 100, 30, 0.95);
}

/* Modal section hint: vertical layout – amber palette to match sub-progress pill */
.onb-tour-gated-hint.modal-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    background: rgba(201, 155, 70, 0.07);
    border-color: rgba(201, 140, 40, 0.3);
    color: rgba(130, 88, 20, 0.9);
    border-radius: 9px;
}
.onb-tour-gated-hint.modal-section .onb-section-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(100, 70, 18, 0.85);
}
.onb-tour-gated-hint.modal-section .onb-tour-inline-btn {
    align-self: flex-end;
    margin-top: 2px;
}

#lifeos-modal-backdrop .onb-prefilled-field {
    border-color: rgba(201, 140, 40, 0.72) !important;
    box-shadow: 0 0 0 2px rgba(201, 140, 40, 0.2);
    animation: onb-prefilled-pulse 1.8s ease-in-out infinite;
}

@keyframes onb-prefilled-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(201, 140, 40, 0.2); }
    50%      { box-shadow: 0 0 0 4px rgba(201, 140, 40, 0.35), 0 0 12px rgba(201, 140, 40, 0.15); }
}

#lifeos-modal-backdrop .onb-prefilled-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1.4;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(201, 155, 70, 0.12);
    color: rgba(130, 88, 20, 0.95);
    border: 1px solid rgba(201, 140, 40, 0.34);
    vertical-align: middle;
}

/* Sub-progress strip inside the tooltip (for modal mini-tour) */
/* Uses a warm amber palette to visually distinguish it from the
   cool-blue main tour-progress dots below the body text. */
.onb-sub-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: rgba(160, 110, 42, 0.75);
    margin-top: 4px;
    margin-bottom: 0;
    padding: 3px 8px 3px 6px;
    border-radius: 20px;
    background: rgba(201, 155, 70, 0.09);
    border: 1px solid rgba(201, 155, 70, 0.22);
    letter-spacing: 0.01em;
}
.onb-sub-progress-dots {
    display: flex;
    gap: 3px;
}
.onb-sub-progress-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(201, 155, 70, 0.25);
    transition: all 0.25s;
}
.onb-sub-progress-dots span.active {
    width: 12px;
    border-radius: 3px;
    background: rgba(201, 140, 40, 0.85);
}
.onb-sub-progress-dots span.done {
    background: rgba(201, 155, 70, 0.55);
}

/* Inline Next button inside the hint (modal mini-tour) – amber to match hint box */
.onb-tour-inline-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    background: rgba(201, 140, 40, 0.82);
    color: #3a2200;
    border: 1px solid rgba(201, 140, 40, 0.45) !important;
    transition: background 0.18s;
}
.onb-tour-inline-btn:hover {
    background: rgba(201, 140, 40, 1);
}
.onb-tour-inline-btn:hover {
    background: var(--onb-accent-strong, #86afcd);
}

/* ---------- Insight Chip (steps 1, 7, 12 only — Part B) ---------- */
/* Premium mini-block that summarises and nudges forward; fades in with a subtle lift. */
.onb-tour-insight-chip {
    margin: 10px 0 6px;
    padding: 7px 12px 7px 14px;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.025em;
    line-height: 1.5;
    color: var(--onb-text-muted, #2a3e54c0);
    opacity: 0;
    transform: translateY(6px);
    /* Left accent bar via border — 2px subtle accent line */
    border-left: 2px solid var(--onb-accent, #6f9dc0);
    background: rgba(111, 157, 192, 0.05);
    border-radius: 0 6px 6px 0;
    animation: onbInsightChipIn 300ms 150ms ease-out forwards;
}
@keyframes onbInsightChipIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ---------- BEAT 2: causal connection thread ---------- */
.onb-thread-path {
    stroke: rgba(140, 200, 248, 0.95);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(120, 180, 230, 0.55));
}
.onb-thread-node {
    fill: rgba(180, 220, 252, 0.98);
    filter: drop-shadow(0 0 5px rgba(120, 180, 230, 0.6));
    transition: opacity 0.18s ease;
}
/* The goal the chain lands on — warmer gold tone reads as "achievement". */
.onb-thread-goal {
    fill: rgba(247, 201, 110, 1);
    filter: drop-shadow(0 0 8px rgba(240, 190, 90, 0.75));
}
.onb-thread-goal.onb-thread-pulse {
    animation: onbThreadPulse 1.5s ease-out 2;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes onbThreadPulse {
    0%   { transform: scale(1);   filter: drop-shadow(0 0 8px rgba(240, 190, 90, 0.75)); }
    40%  { transform: scale(1.6); filter: drop-shadow(0 0 18px rgba(247, 201, 110, 0.95)); }
    100% { transform: scale(1);   filter: drop-shadow(0 0 8px rgba(240, 190, 90, 0.6)); }
}

/* Checklist subtitle (reframes the list as optional momentum). */
.onb-checklist-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.66;
}

/* The emotional peak line, surfaced under the body as the thread lands. */
.onb-peak-line {
    display: block;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(120, 180, 230, 0.28);
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: var(--onb-accent-strong, #2c5a7c);
    animation: onbPeakIn 0.6s ease both;
}
@keyframes onbPeakIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .onb-tour-insight-chip {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .onb-thread-goal.onb-thread-pulse {
        animation: none;
    }
    .onb-peak-line {
        animation: none;
    }
}

/* ---------- Spotlight allow-through for target ---------- */
.onb-tour-spotlight-target {
    position: relative;
    z-index: 310001;
    pointer-events: auto !important;
}

/* ---------- Background suppression while onboarding is active ---------- */
/* Block all pointer interaction on background content so hover states,
   tooltips, and accidental clicks cannot fire during the tour.  The
   spotlight-target rule above re-enables the current focal element. */
body.onboarding-active #timeline-container {
    pointer-events: none !important;
}
body.onboarding-active #tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Preserve absolute positioning for elements that rely on it */
.view-buttons.onb-tour-spotlight-target {
    position: absolute;
}
.timeline-select-conatiner.onb-tour-spotlight-target {
    position: absolute;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .onb-tour-tooltip {
        max-width: calc(100vw - 24px);
        min-width: 260px;
        padding: 22px 18px 18px;
    }
    .onb-tour-tooltip h4 {
        font-size: 17px;
    }
    .onb-tour-tooltip .onb-tour-body {
        font-size: 13.5px;
    }
}
@media (max-width: 480px) {
    .onb-tour-tooltip {
        max-width: calc(100vw - 16px);
        min-width: 220px;
        padding: 18px 14px 14px;
    }
    .onb-tour-tooltip h4 {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onb-tour-pulse { animation: none; }
    .onb-tour-tooltip { animation: none; opacity: 1; transform: none; }
    .onb-tour-pointer { animation: none; }
}

/* === css/onboarding_checklist.css === */
/* =====================================================================
   onboarding_checklist.css
   ---------------------------------------------------------
   Styles for the success highlight animation on newly created events.
   (Checklist card removed — only event success animations remain.)
   ===================================================================== */

/* ---- Success highlight animation for newly created events (Phase 3) ---- */

@keyframes onbEventSuccessPulse {
    0% {
        filter: drop-shadow(0 0 0px rgba(99, 179, 237, 0));
    }
    10% {
        filter: drop-shadow(0 0 14px rgba(99, 179, 237, 0.7));
    }
    25% {
        filter: drop-shadow(0 0 26px rgba(99, 179, 237, 1));
    }
    40% {
        filter: drop-shadow(0 0 10px rgba(99, 179, 237, 0.5));
    }
    55% {
        filter: drop-shadow(0 0 20px rgba(99, 179, 237, 0.85));
    }
    72% {
        filter: drop-shadow(0 0 8px rgba(99, 179, 237, 0.35));
    }
    100% {
        filter: drop-shadow(0 0 0px rgba(99, 179, 237, 0));
    }
}

@keyframes onbEventSuccessGlow {
    0% {
        stroke: rgba(99, 179, 237, 0);
        stroke-width: 0;
    }
    10% {
        stroke: rgba(99, 179, 237, 0.9);
        stroke-width: 3px;
    }
    28% {
        stroke: rgba(66, 153, 225, 1);
        stroke-width: 4.5px;
    }
    45% {
        stroke: rgba(99, 179, 237, 0.55);
        stroke-width: 2px;
    }
    60% {
        stroke: rgba(66, 153, 225, 0.8);
        stroke-width: 3.5px;
    }
    78% {
        stroke: rgba(99, 179, 237, 0.2);
        stroke-width: 1px;
    }
    100% {
        stroke: rgba(99, 179, 237, 0);
        stroke-width: 0;
    }
}

.onb-event-success-highlight {
    animation: onbEventSuccessPulse 2.8s ease-in-out 1,
               onbEventSuccessGlow 2.8s ease-in-out 1;
    will-change: filter, stroke, stroke-width;
}

/* ---- Success burst ring — expanding ring around newly created event ---- */
.onb-success-burst {
    position: fixed;
    z-index: 310003;
    pointer-events: none;
    border-radius: 50%;
    border: 2.5px solid rgba(72, 187, 120, 0.9);
    animation: onbSuccessBurst 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.onb-success-burst--delayed {
    animation-delay: 0.15s;
    border-width: 1.5px;
    border-color: rgba(99, 179, 237, 0.7);
}
@keyframes onbSuccessBurst {
    0% {
        transform: scale(0.3);
        opacity: 1;
        border-color: rgba(72, 187, 120, 0.9);
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
    }
    40% {
        transform: scale(1.15);
        opacity: 0.75;
        border-color: rgba(99, 179, 237, 0.8);
        box-shadow: 0 0 24px 4px rgba(99, 179, 237, 0.15);
    }
    100% {
        transform: scale(2);
        opacity: 0;
        border-color: rgba(99, 179, 237, 0);
        box-shadow: 0 0 40px 8px rgba(99, 179, 237, 0);
    }
}

/* ---- Confetti-style sparkle dots (created by JS) ---- */
.onb-success-sparkle {
    position: fixed;
    z-index: 310003;
    pointer-events: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(72, 187, 120, 0.9);
    animation: onbSparkle 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes onbSparkle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { opacity: 0; }
}

/* === css/intro.css === */
/* ============================================================
   Pre-Login Intro Flow – 3-screen onboarding (card layout)
   Appears BEFORE the login modal on first visit.
   Uses localStorage "hasSeenIntro" to skip on return visits.
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --intro-bg: rgba(0, 0, 0, 0.45);
    --intro-card-bg: #181818;
    --intro-card-border: rgba(255, 255, 255, 0.06);
    --intro-text: #e8e8e8;
    --intro-text-muted: #888;
    --intro-accent: #ccc;
    --intro-dot: #444;
    --intro-dot-active: #e8e8e8;
    --intro-btn-bg: transparent;
    --intro-btn-border: #555;
    --intro-btn-text: #e8e8e8;
    --intro-btn-hover-bg: rgba(255, 255, 255, 0.06);
    --intro-transition-duration: 0.55s;
    --intro-font: 'Playfair Display', 'Georgia', serif;
    --intro-font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
}

/* ---------- Overlay background ---------- */
#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    animation: introFadeIn 0.6s ease forwards;
}

#intro-overlay.intro-exit {
    pointer-events: none;
}

#intro-overlay.intro-exit .intro-screen.active {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#intro-overlay.intro-exit .intro-dots {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes introFadeIn {
    to { opacity: 1; }
}

@keyframes introFadeOut {
    to { opacity: 0; }
}

/* ---------- Screen container (holds stacked cards) ---------- */
.intro-screen-container {
    position: relative;
    width: 100%;
    max-width: 680px;
    min-height: 640px;
    padding: 0 20px;
}

/* ---------- Card screens ---------- */
.intro-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--intro-card-bg);
    border: 1px solid var(--intro-card-border);
    border-radius: 16px;
    padding: 3.2rem 2.6rem 2.6rem;
    text-align: center;
    box-shadow: 10px 10px 15px 1px rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--intro-transition-duration) ease,
                visibility 0s linear var(--intro-transition-duration);
}

.intro-screen.active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--intro-transition-duration) ease,
                visibility 0s linear 0s;
}

/* ---------- Staggered content animation on active screen ---------- */
.intro-screen .intro-title,
.intro-screen .intro-body,
.intro-screen .intro-logo-wrap,
.intro-screen .intro-btn {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.intro-screen.active .intro-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.intro-screen.active .intro-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

.intro-screen.active .intro-logo-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
}

.intro-screen.active .intro-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.38s;
}

/* ---------- Typography ---------- */
.intro-title {
    font-family: var(--intro-font);
    font-size: clamp(1.35rem, 3.5vw, 1.9rem);
    font-weight: 400;
    font-style: normal;
    color: var(--intro-text);
    line-height: 1.45;
    margin: 0 0 2rem 0;
    letter-spacing: -0.01em;
}

.intro-body {
    font-family: var(--intro-font-body);
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    font-weight: 300;
    color: var(--intro-text-muted);
    line-height: 2;
    margin: 0 0 2.4rem 0;
    white-space: pre-line;
}

/* ---------- Buttons ---------- */
.intro-btn {
    display: inline-block;
    font-family: var(--intro-font-body);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--intro-btn-text);
    background: var(--intro-btn-bg);
    border: 1px solid var(--intro-btn-border);
    border-radius: 6px;
    padding: 11px 40px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.intro-btn:hover {
    background: var(--intro-btn-hover-bg);
    border-color: var(--intro-accent);
}

.intro-btn:focus-visible {
    outline: 2px solid var(--intro-accent);
    outline-offset: 3px;
}

/* ---------- Logo (screen 3 only) ---------- */
.intro-logo-wrap {
    display: flex;
    justify-content: center;
    margin: 1.6rem 0 2rem;
}

.intro-logo-wrap .temporeum-wordmark {
    display: inline-block;
    width: min(220px, 55%);
    height: auto;
    color: var(--intro-text);
    opacity: 0.3;
}

/* ---------- Progress dots ---------- */
.intro-dots {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 200001;
}

.intro-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--intro-dot);
    transition: width 0.35s ease, height 0.35s ease;
}

.intro-dot.active {
    width: 21px;
    height: 21px;
    background: var(--intro-dot);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .intro-screen-container {
        padding: 0 12px;
        min-height: 480px;
    }
    .intro-screen {
        width: calc(100% - 24px);
        height: 580px;
        padding: 2.4rem 1.6rem 2rem;
        border-radius: 12px;
    }
    .intro-body {
        line-height: 1.85;
    }
    .intro-dots {
        bottom: 24px;
    }
}

/* === css/responsive.css === */
#temporeum-logo {
    display: none;
}

/* Applied at all widths (min-width: 0) so the desktop ("full view") navbar
   matches the mobile look: the big #temporeum wordmark is hidden and the inline
   logo lives inside the timeline-select pill. The logged-out landing wordmark
   (#temporeum-logged-out) is a separate element and is unaffected. */
@media (min-width: 0px) {
    #temporeum {
        display: none;
    }

    /* The logo now lives inside the timeline-select container (moved there in
       navbar.html). Render it as a static header child at the top-left of the
       pill instead of a viewport-absolute element. */
    #temporeum-logo {
        display: inline-flex;
        flex-direction: row;
        align-items: baseline;
        gap: 2px;
        visibility: visible;
        position: static;
        align-self: flex-start;
        z-index: auto;
        line-height: 1;
        font-size: 17px;
        white-space: nowrap;
        text-decoration: none;
        letter-spacing: 0.02em;
        padding: 2px 4px;
        color: var(--app-background) !important;
    }

    #temporeum-logo .temporeum-beta-badge {
        position: static;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-right: 0.08em;
        font-size: 8px;
        transform: none;
    }
}
@media (max-width: 390px) {
    #navbarRight {
        top: 8px;
    }

    #avatar {
        width: 34px;
        height: 34px;
    }
}

/* SINGLE-ROW navbar (applied at all widths via min-width:0). One horizontal bar:
   LEFT = wordmark + Panels · CENTER = timeline selector (the dominant element,
   the active-timeline context) · RIGHT = view switch + Shared + avatar. The
   center group grows (flex:1) so the title sits at the true middle and reads as
   the primary heading; the flanking groups stay at their natural width. Below
   700px the row wraps and the title floats to a full-width top row (see the
   ≤700px block) so it stays dominant on phones. */
@media (min-width: 0px) {
    .timeline-select-conatiner {
        /* left:0 + right:0 + margin-inline:auto centers the absolutely
           positioned bar; capped at max-width on wide screens, full width on
           phones. Wider cap than the old two-row card since everything is now on
           one line. */
        left: 0;
        right: 0;
        transform: none;
        width: auto;
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        touch-action: pan-y;
        overscroll-behavior-x: none;
        padding: 6px 10px;
    }

    .timeline-select-conatiner .nav-row {
        display: flex;
        align-items: center;
        gap: clamp(8px, 2vw, 20px);
        touch-action: pan-y;
        overscroll-behavior-x: none;
    }

    .timeline-select-conatiner .timeline-selector-unified,
    .timeline-select-conatiner .view-buttons,
    .timeline-select-conatiner #timelineSelectorDisplay,
    .timeline-select-conatiner #timelineDropdown {
        touch-action: pan-y;
        overscroll-behavior-x: none;
    }

    /* --- LEFT group: wordmark + Panels menu --- */
    /* Both side groups are fixed-width (flex:0 0 auto): they never grow OR shrink,
       so the right group can never be squeezed below its content and overlap the
       center. The center is the only flexible item — it takes the leftover space
       via auto margins (which center it) and shrinks with an ellipsis when the
       title is long. This is robust across browsers: font-width differences
       (Firefox/Safari render slightly wider than Chrome) only change where the
       title ellipsizes, never whether the groups collide. */
    .timeline-select-conatiner .nav-left {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(4px, 1.4vw, 10px);
        min-width: 0;
    }

    .timeline-select-conatiner #temporeum-logo {
        order: 0;
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        display: flex;
        flex-direction: row;
        align-self: center;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 30px;
        padding: 0 4px;
        font-size: 18px;
        line-height: 1;
        white-space: nowrap;
        color: var(--app-background) !important;
    }

    .timeline-select-conatiner #temporeum-logo .temporeum-beta-badge {
        display: none;
    }

    .timeline-select-conatiner .entity-tools-container {
        top: 0;
        padding-left: 0;
        background: none;
    }
    .timeline-select-conatiner #entity-tools-toggle i {
        font-size: 18px;
    }

    /* --- CENTER group: the timeline selector (dominant) --- */
    /* Grows to fill the middle so the title is optically centered. A subtle
       tray unifies the +, title and info into one control that reads as the
       bar's primary heading. */
    .timeline-select-conatiner .timeline-selector-unified {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        /* auto side margins absorb the leftover space equally, centering the
           group between the two fixed side groups; they collapse to 0 when the
           title needs the room (then flex-shrink + min-width:0 ellipsize it). */
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 2px;
        /* A crisp hairline BORDER (not just a faint fill) so the center group
           reads as a distinct section. Derive the cue from --app-background (the
           bar's CONTRAST colour: light text on a dark bar, dark text on a light
           bar) instead of a hardcoded white — a white fill/border only shows on a
           dark bar and vanishes when the bar's --primary-color is light (e.g. the
           beige accent), which is why the sections looked merged in that case. */
        background: color-mix(in srgb, var(--app-background) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--app-background) 26%, transparent);
        border-radius: 8px;
    }

    .timeline-select-conatiner .timeline-selector-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Title text: light on the dark bar, larger + bolder than the flanking
       controls to signal it's the primary element. Centered with its chevron. */
    .timeline-select-conatiner #timelineSelectorDisplay {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 30px;
        justify-content: center;
        gap: 6px;
        background: transparent;
        color: var(--app-background);
        border-radius: 6px;
    }

    .timeline-select-conatiner #timelineSelectorDisplay:hover {
        background: color-mix(in srgb, var(--app-background) 12%, transparent);
    }

    .timeline-select-conatiner #timelineSelectorLabel {
        min-width: 0;
        flex: 0 1 auto;
        font-size: 14px;
        font-weight: 600;
    }

    /* + (new timeline) and i (info): transparent icon buttons on the tray. */
    .timeline-select-conatiner .timeline-unified-btn {
        flex: 0 0 auto;
        height: 30px;
        width: 30px;
        padding: 0;
        background: transparent;
        color: var(--app-background);
        border-radius: 6px;
    }

    .timeline-select-conatiner .timeline-unified-btn:hover {
        background: color-mix(in srgb, var(--app-background) 14%, transparent);
        transform: none;
    }

    .timeline-select-conatiner #timelineInfo {
        position: relative;
    }

    /* Light hairline dividers separating + | title | i on the dark tray. */
    .timeline-select-conatiner .timeline-selector-wrapper::before,
    .timeline-select-conatiner #timelineInfo::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 16px;
        background: color-mix(in srgb, var(--app-background) 38%, transparent);
        z-index: 1;
        pointer-events: none;
    }

    /* --- RIGHT group: view switch + Shared + avatar --- */
    .timeline-select-conatiner .first-row-right {
        order: 3;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        min-width: 0;
    }

    .timeline-select-conatiner .view-buttons {
        /* relative (not static) so the absolutely-positioned active-view
           indicator measures offsets against .view-buttons itself. */
        position: relative;
        right: auto;
        top: auto;
        margin-left: 0;
        align-items: center;
        gap: 6px;
        padding: 2px 6px;
        /* Same contrast-adaptive cue as the center tray (see note there). */
        background: color-mix(in srgb, var(--app-background) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--app-background) 26%, transparent);
        border-radius: 999px;
    }

    .timeline-select-conatiner .lifeos-view-btn {
        font-size: 12px;
        padding: 0 8px !important;
        height: 26px;
        display: inline-flex;
        align-items: center;
    }

    .timeline-select-conatiner .lifeos-view-btn.active {
        height: 32px;
    }

    #navbarRight {
        position: static;
        top: auto;
        right: auto;
        display: inline-flex;
        align-items: center;
        padding: 0;
        z-index: 7;
    }

    #navbarRight #avatar {
        width: 28px;
        height: 28px;
        /* In-bar avatar sits ON the pill, whose bg is --primary-color. Both
           schemes make --app-text-color track the bar's own lightness (dark
           bar+dark text, or cream bar+light text), so a text-coloured ring
           blends in. --app-background is the inverse of --primary-color in
           every scheme, so it always contrasts the bar. The ≥1080px block
           below flips it back to --app-text-color once the avatar floats off
           the bar onto the canvas. */
        border: 2px solid var(--app-background);
    }
}

/* Narrow screens (≤700px): the single row can't hold everything, so wrap it and
   promote the title to a full-width TOP row where it stays dominant — the
   inverse of the old layout, which buried the title in the lower row. The
   wordmark + Panels (left) and the view switch + Shared + avatar (right) share
   the second row. */
@media (max-width: 700px) {
    .timeline-select-conatiner .nav-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .timeline-select-conatiner .timeline-selector-unified {
        order: -1;
        flex: 1 1 100%;
        max-width: none;
    }

    .timeline-select-conatiner .nav-left {
        order: 1;
    }

    .timeline-select-conatiner .first-row-right {
        order: 2;
        margin-left: auto;
    }
}

/* Timeline axis labels shrink only on real phones — kept out of the all-width
   block above so the desktop axis text stays full size. */
@media (max-width: 560px) {
    .x-axis-major text {
        font-size: 9px;
    }
}

/* Desktop / wide (≥732px): tighten the row padding so the bar uses its full
   width. The avatar stays IN-FLOW inside the pill's right group until it can
   float clear of the centred pill — see the ≥900px block below. */
@media (min-width: 732px) {
    .timeline-select-conatiner .nav-row {
        padding: 2px 6px;
    }
    /* Desktop has room for the larger wordmark — one stable step up from the
       mobile size (no fluid scaling). */
    .timeline-select-conatiner #temporeum-logo {
        font-size: 22px;
        padding: 0 18px;
    }
}

/* The pill is centred and capped at 880px (see max-width above), so its right
   edge sits at viewport/2 + 440. The floated avatar (fixed at right:30, ~42px
   wide) has its left edge at viewport − 72, which only clears the pill edge once
   viewport − 72 ≥ viewport/2 + 440 + margin → viewport ≳ 1080px. Below that the
   avatar stays in-flow inside the right group so it never lands ON the bar. */
@media (min-width: 1080px) {
    /* Avatar floats out to the viewport's top-right corner (removed from the
       right group's flow), so the view switch sits at the bar's right edge —
       the desktop design. */
    #navbarRight {
        position: fixed;
        /* Vertically centre the avatar on the pill: pill top:0, measured height
           54px, 42px avatar → (54−42)/2 = 6px. */
        top: 6px;
        right: 30px;
        z-index: 130;
    }
    /* Room to float — larger, more prominent avatar than the mobile pill.
       The avatar now floats off the bar onto the canvas (body bg =
       --app-background), so restore the text-coloured ring, which is the
       inverse of the canvas and therefore contrasts it. */
    #navbarRight #avatar {
        width: 42px;
        height: 42px;
        border-color: var(--app-text-color);
    }
}

/* Phones (≤480px): ONE stable phone tier. Every value is fixed (no vw), sized
   so the whole bar fits down to ~360px without overflowing — so there is a
   single small, discrete step at 480px and then NO further size change as the
   screen narrows (no continuous shrinking, no second jump). The step from the
   base sizes is ≤4px per element, so crossing 480px doesn't visibly scatter. */
@media (max-width: 480px) {
    /* Minimal inter-group gap on the wrapped two-row phone layout. */
    .timeline-select-conatiner .nav-row {
        gap: 4px;
    }
    .timeline-select-conatiner #temporeum-logo {
        font-size: 14px;
        padding: 0 5px;
    }
    .timeline-select-conatiner #entity-tools-toggle i {
        font-size: 16px;
    }
    .timeline-select-conatiner .first-row-right {
        gap: 4px;
    }
    .timeline-select-conatiner .view-buttons {
        gap: 1px;
    }
    .timeline-select-conatiner .lifeos-view-btn {
        font-size: 10px;
        padding: 0 4px !important;
    }
    #navbarRight #avatar {
        width: 24px;
        height: 24px;
    }
}

/* The + (new timeline) and i (timeline info) buttons sit at the very left/right
   edges of the full-width selector row, so their default centered bottom tooltip
   (left: 50%; translateX(-50%)) overflows the screen. Anchor each one inward:
   the left button's tooltip to its left edge, the right button's to its right. */
.timeline-select-conatiner #newTimeline .tooltip-text.tooltip-bottom {
    left: 0;
    right: auto;
    transform: none;
}

.timeline-select-conatiner #timelineInfo .tooltip-text.tooltip-bottom {
    left: auto;
    right: 0;
    transform: none;
}

/* ======================================================================
   TESZT – 5 töréspont vizuális visszajelzéssel
   Breakpointok: 480 / 768 / 992 / 1200 / 1440
   ====================================================================== */


/* 1️⃣ ≤1440px – nagy kijelző, de már nem ultra-wide */
@media (max-width: 1440px) {

}

/* 2️⃣ ≤1200px – közepes kijelzők (laptop, kisebb monitor) */
@media (max-width: 1200px) {

}

/* 3️⃣ ≤992px – táblagépek fekvő módban */
@media (max-width: 992px) {

}

/* 4️⃣ ≤768px – táblagépek álló módban */
@media (max-width: 768px) {

}

/* 5️⃣ ≤480px – mobilok */
@media (max-width: 480px) {
    .event-category-container {
        right: 50px;
        top: 110px;
    }

    #selectedCategoryIcon {
        top: 100px;
        right: 20px;
        font-size: 50px;
    }

    .modal {
        width: 95%;
    }

    #login-modal {
        width: 100%;
    }

    #copyright {
        display: none;
    }
}