@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root,
:root[data-theme="light"] {
    --indeed-bg: #ffffff;
    --indeed-bg-start: #ffffff;
    --indeed-bg-end: #ffffff;
    --page-blob-1: rgba(191, 219, 254, 0.16);
    --page-blob-2: rgba(147, 197, 253, 0.12);
    --page-blob-3: rgba(219, 234, 254, 0.14);
    --indeed-surface: #ffffff;
    --indeed-surface-alt: #eef4ff;
    --indeed-border: #d6e4ff;
    --indeed-ink: #16325c;
    --indeed-muted: #4f6b99;
    --indeed-primary: #2557d6;
    --indeed-primary-soft: #dbe7ff;
    --indeed-shadow-rgb: 37, 87, 214;
    --indeed-card-shadow: 0 14px 38px rgba(37, 87, 214, 0.12);
    --indeed-calendar-shadow: 0 20px 40px rgba(37, 87, 214, 0.14);
    --indeed-chip-hover: #e8f0ff;
    --indeed-danger-soft: #ffe7ec;
    --indeed-menu-bg: #ffffff;
    --indeed-menu-border: #c9d8f5;
    --indeed-menu-title: #1f3f73;
    --indeed-menu-text: #2c4f8a;
    --indeed-menu-hover-bg: #edf3ff;
    --indeed-menu-hover-text: #17396f;
    --indeed-menu-icon-bg: #e7efff;
    --indeed-menu-icon-text: #3c63a9;
    --indeed-logout-text: #dc6f7d;
    --indeed-logout-hover-bg: #fff1f4;
    --indeed-logout-hover-text: #c14f5f;
    --indeed-preview-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 255, 0.96) 100%);
    --indeed-preview-surface: rgba(255, 255, 255, 0.88);
    --indeed-preview-border: rgba(132, 162, 224, 0.24);
    --indeed-preview-muted: #5f78a8;
    --indeed-preview-accent: #2557d6;
    --indeed-toggle-bg: rgba(255, 255, 255, 0.78);
    --indeed-toggle-border: rgba(132, 162, 224, 0.26);
    --indeed-toggle-text: #23477f;
    --indeed-toggle-hover: #edf3ff;
    --header-shell-bg: transparent;
    --header-shell-border: rgba(132, 162, 224, 0.42);
    --header-shell-shadow: none;
    --header-link-text: #0f1f42;
    --header-link-muted: #294574;
    --header-link-hover-bg: rgba(255, 255, 255, 0.58);
    --header-link-active-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(219, 231, 255, 0.7) 100%);
    --header-link-active-border: rgba(79, 131, 255, 0.3);
    --header-link-active-shadow: 0 18px 38px rgba(37, 87, 214, 0.18);
    --header-link-indicator: rgba(37, 87, 214, 0.96);
    --header-link-glow: rgba(37, 87, 214, 0.62);
    --header-link-glow-soft: rgba(37, 87, 214, 0.28);
    --header-utility-bg: rgba(255, 255, 255, 0.48);
    --header-utility-border: rgba(132, 162, 224, 0.22);
    --header-utility-hover-bg: rgba(255, 255, 255, 0.74);
    --header-brand-bg: rgba(255, 255, 255, 0.62);
    --ui-shell-bg: rgba(255, 255, 255, 0.54);
    --ui-shell-border: rgba(132, 162, 224, 0.28);
    --ui-shell-hover-shadow: 0 18px 42px rgba(37, 87, 214, 0.14);
    --ui-panel-bg: rgba(255, 255, 255, 0.72);
    --ui-panel-border: rgba(132, 162, 224, 0.24);
    --ui-panel-subtle-bg: rgba(247, 250, 255, 0.68);
    --ui-panel-subtle-border: rgba(132, 162, 224, 0.18);
    --ui-heading: #16325c;
    --ui-text-primary: #23477f;
    --ui-text-secondary: #4f6b99;
    --ui-text-muted: #6d80a7;
    --ui-text-soft: #8b99b7;
    --ui-disabled-text: #97a6c4;
    --ui-label: #284d88;
    --ui-link: #2557d6;
    --ui-link-hover: #1e46b0;
    --ui-button-primary-bg: #2557d6;
    --ui-button-primary-hover: #1f4ec8;
    --ui-button-primary-text: #ffffff;
    --ui-button-secondary-bg: rgba(255, 255, 255, 0.86);
    --ui-button-secondary-hover: #edf3ff;
    --ui-button-secondary-border: rgba(132, 162, 224, 0.28);
    --ui-button-secondary-text: #1f3f73;
    --ui-input-bg: rgba(255, 255, 255, 0.9);
    --ui-input-border: rgba(132, 162, 224, 0.28);
    --ui-input-text: #16325c;
    --ui-input-placeholder: #8b99b7;
    --ui-input-focus-bg: #ffffff;
    --ui-input-focus-border: #2557d6;
    --ui-input-focus-ring: rgba(37, 87, 214, 0.18);
    --ui-note-bg: rgba(237, 243, 255, 0.9);
    --ui-note-border: rgba(132, 162, 224, 0.18);
    --ui-note-text: #4f6b99;
    --ui-info-bg: #dbeafe;
    --ui-info-border: #bfdbfe;
    --ui-info-text: #1d4ed8;
    --ui-success-bg: #d1fae5;
    --ui-success-border: #a7f3d0;
    --ui-success-text: #047857;
    --ui-success-text-muted: #065f46;
    --ui-warning-bg: #fef3c7;
    --ui-warning-border: #fcd34d;
    --ui-warning-text: #92400e;
    --ui-danger-bg: #ffe4e6;
    --ui-danger-border: #fecdd3;
    --ui-danger-text: #be123c;
    --ui-tooltip-bg: rgba(248, 250, 252, 0.96);
    --ui-tooltip-border: rgba(148, 163, 184, 0.38);
    --ui-tooltip-text: #334155;
    --ui-tooltip-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    --ui-progress-track: rgba(132, 162, 224, 0.18);
    --ui-progress-fill: linear-gradient(90deg, #2557d6 0%, #4f83ff 100%);
    --ui-progress-glow: 0 0 12px rgba(37, 87, 214, 0.24);
    --ui-message-shell-bg: rgba(246, 249, 255, 0.72);
    --ui-message-shell-border: rgba(132, 162, 224, 0.28);
    --ui-message-panel-bg: rgba(255, 255, 255, 0.76);
    --ui-message-panel-alt-bg: rgba(247, 250, 255, 0.7);
    --ui-message-panel-border: rgba(191, 219, 254, 0.92);
    --ui-message-divider: rgba(191, 219, 254, 0.92);
    --ui-message-empty-bg: rgba(219, 234, 254, 0.84);
    --ui-message-empty-text: #2557d6;
    --premium-hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(250, 252, 255, 0.48) 100%);
    --premium-hero-border: rgba(132, 162, 224, 0.24);
    --premium-hero-shadow: 0 18px 40px rgba(37, 87, 214, 0.1);
    --premium-hero-overlay: radial-gradient(circle at top right, rgba(79, 131, 255, 0.1), transparent 44%);
    --premium-hero-glow: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(219, 234, 254, 0.16) 46%, transparent 78%);
    --premium-section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 251, 255, 0.42) 100%);
    --premium-section-border: rgba(132, 162, 224, 0.18);
    --premium-section-shadow: 0 14px 34px rgba(37, 87, 214, 0.08);
    --premium-section-overlay: radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 48%);
    --premium-card-bg: rgba(255, 255, 255, 0.7);
    --premium-card-soft-bg: rgba(248, 251, 255, 0.64);
    --premium-card-strong-bg: rgba(255, 255, 255, 0.78);
    --premium-card-border: rgba(132, 162, 224, 0.26);
    --premium-card-hover-bg: rgba(255, 255, 255, 0.84);
    --premium-card-hover-border: rgba(79, 131, 255, 0.34);
    --premium-card-hover-shadow: 0 22px 48px rgba(37, 87, 214, 0.12);
    --premium-divider: rgba(132, 162, 224, 0.22);
    --premium-kicker-bg: rgba(255, 255, 255, 0.52);
    --premium-kicker-border: rgba(132, 162, 224, 0.2);
    --premium-kicker-text: #4f6b99;
    --premium-icon-info-bg: rgba(219, 234, 254, 0.84);
    --premium-icon-info-border: rgba(191, 219, 254, 0.9);
    --premium-icon-info-text: #1d4ed8;
    --premium-icon-success-bg: rgba(209, 250, 229, 0.84);
    --premium-icon-success-border: rgba(167, 243, 208, 0.92);
    --premium-icon-success-text: #047857;
    --premium-icon-warning-bg: rgba(254, 243, 199, 0.86);
    --premium-icon-warning-border: rgba(252, 211, 77, 0.88);
    --premium-icon-warning-text: #a16207;
    --premium-icon-violet-bg: rgba(243, 232, 255, 0.84);
    --premium-icon-violet-border: rgba(216, 180, 254, 0.9);
    --premium-icon-violet-text: #7c3aed;
    --premium-icon-danger-bg: rgba(255, 228, 230, 0.84);
    --premium-icon-danger-border: rgba(254, 205, 211, 0.9);
    --premium-icon-danger-text: #e11d48;

    --pale-slate-bg: #f1f5f9;
    --pale-slate-text: #475569;
    --pale-slate-border: #cbd5e1;

    --pale-blue-bg: #dbeafe;
    --pale-blue-text: #1e40af;
    --pale-blue-border: #93c5fd;

    --pale-indigo-bg: #e0e7ff;
    --pale-indigo-text: #3730a3;
    --pale-indigo-border: #a5b4fc;

    --pale-purple-bg: #f3e8ff;
    --pale-purple-text: #6b21a8;
    --pale-purple-border: #d8b4fe;

    --pale-pink-bg: #fce7f3;
    --pale-pink-text: #9d174d;
    --pale-pink-border: #f9a8d4;

    --pale-red-bg: #fee2e2;
    --pale-red-text: #991b1b;
    --pale-red-border: #fca5a5;

    --pale-orange-bg: #ffedd5;
    --pale-orange-text: #9a3412;
    --pale-orange-border: #fdba74;

    --pale-amber-bg: #fef3c7;
    --pale-amber-text: #92400e;
    --pale-amber-border: #fcd34d;

    --pale-yellow-bg: #fef9c3;
    --pale-yellow-text: #854d0e;
    --pale-yellow-border: #fde047;

    --pale-green-bg: #dcfce7;
    --pale-green-text: #166534;
    --pale-green-border: #86efac;
}

:root[data-theme="dark"] {
    --indeed-bg: #09111f;
    --indeed-bg-start: #05080f;
    --indeed-bg-end: #0a0f18;
    --page-blob-1: rgba(59, 130, 246, 0.16);
    --page-blob-2: rgba(37, 99, 235, 0.12);
    --page-blob-3: rgba(96, 165, 250, 0.12);
    --indeed-surface: #0a0f18;
    --indeed-surface-alt: #101722;
    --indeed-border: #243553;
    --indeed-ink: #f3f7ff;
    --indeed-muted: #b6c5e1;
    --indeed-primary: #8db4ff;
    --indeed-primary-soft: #1d335f;
    --indeed-shadow-rgb: 5, 12, 24;
    --indeed-card-shadow: 0 18px 40px rgba(5, 12, 24, 0.42);
    --indeed-calendar-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
    --indeed-chip-hover: #182a47;
    --indeed-danger-soft: #3b1721;
    --indeed-menu-bg: #0b111a;
    --indeed-menu-border: #1f2a3d;
    --indeed-menu-title: #f3f7ff;
    --indeed-menu-text: #d9e5fb;
    --indeed-menu-hover-bg: #151f2e;
    --indeed-menu-hover-text: #ffffff;
    --indeed-menu-icon-bg: #162236;
    --indeed-menu-icon-text: #8db4ff;
    --indeed-logout-text: #ffb4bf;
    --indeed-logout-hover-bg: #321923;
    --indeed-logout-hover-text: #ffd6db;
    --indeed-preview-bg: linear-gradient(180deg, rgba(10, 15, 24, 0.98) 0%, rgba(12, 18, 28, 0.96) 100%);
    --indeed-preview-surface: rgba(14, 21, 33, 0.9);
    --indeed-preview-border: rgba(141, 180, 255, 0.18);
    --indeed-preview-muted: #b6c5e1;
    --indeed-preview-accent: #8db4ff;
    --indeed-toggle-bg: rgba(13, 20, 31, 0.9);
    --indeed-toggle-border: rgba(141, 180, 255, 0.18);
    --indeed-toggle-text: #f3f7ff;
    --indeed-toggle-hover: #182233;
    --header-shell-bg: transparent;
    --header-shell-border: rgba(141, 180, 255, 0.3);
    --header-shell-shadow: none;
    --header-link-text: #f3f7ff;
    --header-link-muted: #8fa5cb;
    --header-link-hover-bg: rgba(18, 27, 41, 0.92);
    --header-link-active-bg: linear-gradient(180deg, rgba(27, 40, 61, 0.96) 0%, rgba(18, 27, 41, 0.92) 100%);
    --header-link-active-border: rgba(141, 180, 255, 0.24);
    --header-link-active-shadow: 0 18px 38px rgba(5, 12, 24, 0.38);
    --header-link-indicator: rgba(141, 180, 255, 0.98);
    --header-link-glow: rgba(141, 180, 255, 0.68);
    --header-link-glow-soft: rgba(141, 180, 255, 0.3);
    --header-utility-bg: rgba(13, 20, 31, 0.9);
    --header-utility-border: rgba(141, 180, 255, 0.18);
    --header-utility-hover-bg: rgba(20, 31, 47, 0.96);
    --header-brand-bg: rgba(13, 20, 31, 0.94);
    --ui-shell-bg: rgba(9, 14, 22, 0.9);
    --ui-shell-border: rgba(141, 180, 255, 0.18);
    --ui-shell-hover-shadow: 0 22px 48px rgba(5, 12, 24, 0.42);
    --ui-panel-bg: rgba(10, 15, 24, 0.92);
    --ui-panel-border: rgba(141, 180, 255, 0.18);
    --ui-panel-subtle-bg: rgba(14, 21, 33, 0.92);
    --ui-panel-subtle-border: rgba(141, 180, 255, 0.16);
    --ui-heading: #f3f7ff;
    --ui-text-primary: #dce7fb;
    --ui-text-secondary: #b6c5e1;
    --ui-text-muted: #8fa5cb;
    --ui-text-soft: #7487ab;
    --ui-disabled-text: #6d7f9f;
    --ui-label: #dce7fb;
    --ui-link: #8db4ff;
    --ui-link-hover: #bdd5ff;
    --ui-button-primary-bg: #8db4ff;
    --ui-button-primary-hover: #a6c4ff;
    --ui-button-primary-text: #08101d;
    --ui-button-secondary-bg: rgba(14, 21, 33, 0.94);
    --ui-button-secondary-hover: #1a2638;
    --ui-button-secondary-border: rgba(141, 180, 255, 0.18);
    --ui-button-secondary-text: #f3f7ff;
    --ui-input-bg: rgba(14, 21, 33, 0.94);
    --ui-input-border: rgba(141, 180, 255, 0.18);
    --ui-input-text: #f3f7ff;
    --ui-input-placeholder: #7f96bc;
    --ui-input-focus-bg: rgba(20, 31, 47, 0.96);
    --ui-input-focus-border: #8db4ff;
    --ui-input-focus-ring: rgba(141, 180, 255, 0.16);
    --ui-note-bg: rgba(14, 21, 33, 0.94);
    --ui-note-border: rgba(141, 180, 255, 0.16);
    --ui-note-text: #b6c5e1;
    --ui-info-bg: rgba(29, 78, 216, 0.18);
    --ui-info-border: rgba(96, 165, 250, 0.3);
    --ui-info-text: #bfdbfe;
    --ui-success-bg: rgba(16, 185, 129, 0.18);
    --ui-success-border: rgba(52, 211, 153, 0.3);
    --ui-success-text: #bbf7d0;
    --ui-success-text-muted: #86efac;
    --ui-warning-bg: rgba(245, 158, 11, 0.18);
    --ui-warning-border: rgba(251, 191, 36, 0.28);
    --ui-warning-text: #fde68a;
    --ui-danger-bg: rgba(244, 63, 94, 0.18);
    --ui-danger-border: rgba(251, 113, 133, 0.26);
    --ui-danger-text: #fecdd3;
    --ui-tooltip-bg: rgba(30, 41, 59, 0.96);
    --ui-tooltip-border: rgba(148, 163, 184, 0.28);
    --ui-tooltip-text: #e2e8f0;
    --ui-tooltip-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    --pale-slate-bg: rgba(71, 85, 105, 0.18);
    --pale-slate-text: #e2e8f0;
    --pale-slate-border: rgba(148, 163, 184, 0.28);
    --pale-blue-bg: rgba(29, 78, 216, 0.18);
    --pale-blue-text: #bfdbfe;
    --pale-blue-border: rgba(96, 165, 250, 0.3);
    --pale-indigo-bg: rgba(67, 56, 202, 0.18);
    --pale-indigo-text: #c7d2fe;
    --pale-indigo-border: rgba(129, 140, 248, 0.3);
    --pale-purple-bg: rgba(126, 34, 206, 0.18);
    --pale-purple-text: #e9d5ff;
    --pale-purple-border: rgba(192, 132, 252, 0.3);
    --pale-pink-bg: rgba(190, 24, 93, 0.18);
    --pale-pink-text: #fbcfe8;
    --pale-pink-border: rgba(244, 114, 182, 0.28);
    --pale-red-bg: rgba(220, 38, 38, 0.18);
    --pale-red-text: #fecaca;
    --pale-red-border: rgba(248, 113, 113, 0.28);
    --pale-orange-bg: rgba(194, 65, 12, 0.18);
    --pale-orange-text: #fed7aa;
    --pale-orange-border: rgba(251, 146, 60, 0.3);
    --pale-amber-bg: rgba(180, 83, 9, 0.18);
    --pale-amber-text: #fde68a;
    --pale-amber-border: rgba(251, 191, 36, 0.28);
    --pale-yellow-bg: rgba(161, 98, 7, 0.18);
    --pale-yellow-text: #fef08a;
    --pale-yellow-border: rgba(250, 204, 21, 0.28);
    --pale-green-bg: rgba(22, 163, 74, 0.18);
    --pale-green-text: #bbf7d0;
    --pale-green-border: rgba(74, 222, 128, 0.3);
    --ui-progress-track: rgba(141, 180, 255, 0.16);
    --ui-progress-fill: linear-gradient(90deg, #8db4ff 0%, #4f83ff 100%);
    --ui-progress-glow: 0 0 14px rgba(141, 180, 255, 0.22);
    --ui-message-shell-bg: rgba(8, 13, 20, 0.94);
    --ui-message-shell-border: rgba(141, 180, 255, 0.18);
    --ui-message-panel-bg: rgba(10, 15, 24, 0.94);
    --ui-message-panel-alt-bg: rgba(14, 21, 33, 0.92);
    --ui-message-panel-border: rgba(141, 180, 255, 0.16);
    --ui-message-divider: rgba(141, 180, 255, 0.16);
    --ui-message-empty-bg: rgba(29, 78, 216, 0.18);
    --ui-message-empty-text: #bfdbfe;
    --premium-hero-bg: linear-gradient(180deg, rgba(var(--indeed-shadow-rgb), 0.045) 0%, rgba(var(--indeed-shadow-rgb), 0.03) 100%);
    --premium-hero-border: rgba(141, 180, 255, 0.18);
    --premium-hero-shadow: 0 18px 40px rgba(5, 12, 24, 0.34);
    --premium-hero-overlay: radial-gradient(circle at top right, rgba(141, 180, 255, 0.1), transparent 48%);
    --premium-hero-glow: radial-gradient(circle, rgba(79, 131, 255, 0.14) 0%, rgba(29, 78, 216, 0.08) 46%, transparent 78%);
    --premium-section-bg: linear-gradient(180deg, rgba(var(--indeed-shadow-rgb), 0.04) 0%, rgba(var(--indeed-shadow-rgb), 0.025) 100%);
    --premium-section-border: rgba(141, 180, 255, 0.14);
    --premium-section-shadow: 0 16px 34px rgba(5, 12, 24, 0.28);
    --premium-section-overlay: radial-gradient(circle at top left, rgba(141, 180, 255, 0.08), transparent 52%);
    --premium-card-bg: rgba(11, 17, 26, 0.92);
    --premium-card-soft-bg: rgba(14, 21, 33, 0.86);
    --premium-card-strong-bg: rgba(10, 15, 24, 0.94);
    --premium-card-border: rgba(141, 180, 255, 0.18);
    --premium-card-hover-bg: rgba(18, 27, 41, 0.96);
    --premium-card-hover-border: rgba(141, 180, 255, 0.26);
    --premium-card-hover-shadow: 0 24px 52px rgba(5, 12, 24, 0.4);
    --premium-divider: rgba(141, 180, 255, 0.18);
    --premium-kicker-bg: rgba(14, 21, 33, 0.86);
    --premium-kicker-border: rgba(141, 180, 255, 0.16);
    --premium-kicker-text: #b6c5e1;
    --premium-icon-info-bg: rgba(29, 78, 216, 0.24);
    --premium-icon-info-border: rgba(96, 165, 250, 0.26);
    --premium-icon-info-text: #bfdbfe;
    --premium-icon-success-bg: rgba(16, 185, 129, 0.24);
    --premium-icon-success-border: rgba(52, 211, 153, 0.26);
    --premium-icon-success-text: #bbf7d0;
    --premium-icon-warning-bg: rgba(245, 158, 11, 0.22);
    --premium-icon-warning-border: rgba(251, 191, 36, 0.24);
    --premium-icon-warning-text: #fde68a;
    --premium-icon-violet-bg: rgba(124, 58, 237, 0.22);
    --premium-icon-violet-border: rgba(167, 139, 250, 0.24);
    --premium-icon-violet-text: #ddd6fe;
    --premium-icon-danger-bg: rgba(244, 63, 94, 0.22);
    --premium-icon-danger-border: rgba(251, 113, 133, 0.24);
    --premium-icon-danger-text: #fecdd3;
}

.u-bg-pale-slate { background-color: var(--pale-slate-bg) !important; }
.u-text-pale-slate { color: var(--pale-slate-text) !important; }
.u-border-pale-slate { border-color: var(--pale-slate-border) !important; }

.u-bg-pale-blue { background-color: var(--pale-blue-bg) !important; }
.u-text-pale-blue { color: var(--pale-blue-text) !important; }
.u-border-pale-blue { border-color: var(--pale-blue-border) !important; }

.u-bg-pale-indigo { background-color: var(--pale-indigo-bg) !important; }
.u-text-pale-indigo { color: var(--pale-indigo-text) !important; }
.u-border-pale-indigo { border-color: var(--pale-indigo-border) !important; }

.u-bg-pale-purple { background-color: var(--pale-purple-bg) !important; }
.u-text-pale-purple { color: var(--pale-purple-text) !important; }
.u-border-pale-purple { border-color: var(--pale-purple-border) !important; }

.u-bg-pale-pink { background-color: var(--pale-pink-bg) !important; }
.u-text-pale-pink { color: var(--pale-pink-text) !important; }
.u-border-pale-pink { border-color: var(--pale-pink-border) !important; }

.u-bg-pale-red { background-color: var(--pale-red-bg) !important; }
.u-text-pale-red { color: var(--pale-red-text) !important; }
.u-border-pale-red { border-color: var(--pale-red-border) !important; }

.u-bg-pale-orange { background-color: var(--pale-orange-bg) !important; }
.u-text-pale-orange { color: var(--pale-orange-text) !important; }
.u-border-pale-orange { border-color: var(--pale-orange-border) !important; }

.u-bg-pale-amber { background-color: var(--pale-amber-bg) !important; }
.u-text-pale-amber { color: var(--pale-amber-text) !important; }
.u-border-pale-amber { border-color: var(--pale-amber-border) !important; }

.u-bg-pale-yellow { background-color: var(--pale-yellow-bg) !important; }
.u-text-pale-yellow { color: var(--pale-yellow-text) !important; }
.u-border-pale-yellow { border-color: var(--pale-yellow-border) !important; }

.u-bg-pale-green { background-color: var(--pale-green-bg) !important; }
.u-text-pale-green { color: var(--pale-green-text) !important; }
.u-border-pale-green { border-color: var(--pale-green-border) !important; }

.u-bg-info { background-color: var(--ui-info-bg) !important; }
.u-text-info { color: var(--ui-info-text) !important; }
.u-text-info-muted { color: var(--ui-info-text-muted) !important; }
.u-border-info { border-color: var(--ui-info-border) !important; }

.u-bg-success { background-color: var(--ui-success-bg) !important; }
.u-text-success { color: var(--ui-success-text) !important; }
.u-text-success-muted { color: var(--ui-success-text-muted) !important; }
.u-border-success { border-color: var(--ui-success-border) !important; }

.ui-tooltip {
    display: inline-flex;
    position: relative;
    align-items: center;
}

.ui-tooltip > .ui-tooltip-content {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 70;
    min-width: 12.5rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 32px));
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--ui-tooltip-border);
    border-radius: 1rem;
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-text);
    box-shadow: var(--ui-tooltip-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-tooltip > .ui-tooltip-content::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 6px);
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--ui-tooltip-border);
    border-bottom: 1px solid var(--ui-tooltip-border);
    background: var(--ui-tooltip-bg);
    transform: translateX(-50%) rotate(45deg);
}

.ui-tooltip:hover > .ui-tooltip-content,
.ui-tooltip:focus-visible > .ui-tooltip-content,
.ui-tooltip:focus-within > .ui-tooltip-content {
    display: block !important;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.ui-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 60;
    min-width: 12.5rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 32px));
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--ui-tooltip-border);
    border-radius: 1rem;
    background: var(--ui-tooltip-bg);
    color: var(--ui-tooltip-text);
    box-shadow: var(--ui-tooltip-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-tooltip[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    z-index: 61;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--ui-tooltip-border);
    border-bottom: 1px solid var(--ui-tooltip-border);
    background: var(--ui-tooltip-bg);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 8px) rotate(45deg);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-tooltip[data-tooltip]:hover::after,
.ui-tooltip[data-tooltip]:focus-visible::after,
.ui-tooltip[data-tooltip]:focus-within::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.ui-tooltip[data-tooltip]:hover::before,
.ui-tooltip[data-tooltip]:focus-visible::before,
.ui-tooltip[data-tooltip]:focus-within::before {
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
}

/* Refonte globale blanc/bleu appliquee sur les utilitaires existants. */
.indeed-theme {
    font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
    background: linear-gradient(180deg, var(--indeed-bg-start) 0%, var(--indeed-bg-end) 100%);
    color: var(--indeed-ink);
}

.site-page-shell {
    isolation: isolate;
    background: linear-gradient(180deg, var(--indeed-bg-start) 0%, var(--indeed-bg-end) 100%);
}

.site-page-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(132, 162, 224, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 162, 224, 0.14) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.84), transparent 100%);
    opacity: 0.55;
    z-index: 0;
}

.site-page-shell::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -10%;
    width: 520px;
    height: 520px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(37, 87, 214, 0.18) 0%, rgba(79, 131, 255, 0.12) 34%, transparent 72%);
    filter: blur(68px);
    z-index: 0;
}

.site-background-blob {
    border-radius: 9999px;
    filter: blur(120px);
}

.site-background-blob-1 {
    background: var(--page-blob-1);
}

.site-background-blob-2 {
    background: var(--page-blob-2);
}

.site-background-blob-3 {
    background: var(--page-blob-3);
}

:root[data-theme="dark"] .site-page-shell::before {
    background-image:
        linear-gradient(rgba(141, 180, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141, 180, 255, 0.12) 1px, transparent 1px);
}

:root[data-theme="dark"] .site-page-shell::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(59, 130, 246, 0.12) 34%, transparent 72%);
}
.indeed-theme [class*="bg-slate-"] {
    background-color: var(--indeed-surface) !important;
}
.indeed-theme [class*="bg-white/"] {
    background-color: var(--indeed-surface-alt) !important;
}
.indeed-theme [class*="border-white/"] {
    border-color: var(--indeed-border) !important;
}
.indeed-theme [class*="text-white"] {
    color: var(--indeed-ink) !important;
}
.indeed-theme [class*="text-slate-"] {
    color: var(--indeed-muted) !important;
}
.indeed-theme [class*="border-emerald-"] {
    border-color: #b9d0ff !important;
}
.indeed-theme [class*="text-emerald-"] {
    color: var(--indeed-primary) !important;
}
.indeed-theme [class*="bg-emerald-"] {
    background-color: var(--indeed-primary-soft) !important;
}
.indeed-theme [class*="shadow-black"],
.indeed-theme [class*="shadow-emerald-"] {
    --tw-shadow-color: rgba(var(--indeed-shadow-rgb), 0.24) !important;
    box-shadow: var(--indeed-card-shadow) !important;
}
.indeed-theme [class*="hover:bg-white/10"]:hover {
    background-color: var(--indeed-chip-hover) !important;
}
.indeed-theme [class*="bg-red-"] {
    background-color: var(--indeed-danger-soft) !important;
}

/* Style du calendrier Flatpickr - adapte au theme blanc/bleu */
.flatpickr-calendar {
    border-radius: 1.5rem !important;
    border: 1px solid var(--indeed-border) !important;
    box-shadow: var(--indeed-calendar-shadow) !important;
    background: var(--indeed-surface) !important;
    color: var(--indeed-ink) !important;
    padding: 8px !important;
    font-family: inherit !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.numInputWrapper span,
.flatpickr-current-month input.cur-year,
.flatpickr-day {
    color: var(--indeed-ink) !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--indeed-primary-soft) !important;
    border-color: var(--indeed-primary-soft) !important;
}
.flatpickr-day.selected {
    background: var(--indeed-primary) !important;
    border-color: var(--indeed-primary) !important;
    color: #ffffff !important;
}

/* ANIMATIONS */
@keyframes appleSlideUp {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes appleFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.apple-fade {
    animation: appleFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.apple-slide-up {
    animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.apple-slide-up-delay-1 {
    animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.apple-slide-up-delay-2 {
    animation: appleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.site-header-shell {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(186, 210, 248, 0.55);
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 18px 38px rgba(var(--indeed-shadow-rgb), 0.07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.site-header-shell::before {
    content: none;
}

.site-header-shell-favorites {
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 18px 38px rgba(var(--indeed-shadow-rgb), 0.07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.site-header-layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-header-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.site-header-brand {
    display: inline-flex;
    align-items: center;
    color: var(--header-link-text);
    text-decoration: none;
    flex-shrink: 0;
}

.site-header-brand-mark {
    display: inline-flex;
    height: 1.2rem;
    width: 1.2rem;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    transition: transform 0.24s ease;
}

.site-header-brand:hover .site-header-brand-mark {
    transform: translateY(-1px) scale(1.04);
}

.site-header-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
    flex-wrap: wrap;
}

.site-header-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0;
    color: var(--header-link-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.24s ease, opacity 0.24s ease;
}

.site-header-link:hover {
    color: var(--header-link-text);
}

.site-header-link-active {
    color: var(--header-link-text);
    font-weight: 700;
    opacity: 0.92;
    text-shadow: none;
}

@media (min-width: 961px) {
    .site-header-left {
        gap: 1.65rem;
    }

    .site-header-nav {
        gap: 1.6rem;
    }
}

.site-header-link-active::before {
    content: "";
    position: absolute;
    left: -0.2rem;
    right: -0.2rem;
    bottom: -0.80rem;
    height: 0.12rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent 0%, var(--header-link-indicator) 18%, var(--header-link-indicator) 82%, transparent 100%);
    opacity: 0.75;
}

.site-header-link-active::after {
    content: "";
    position: absolute;
    left: -0.75rem;
    right: -0.75rem;
    bottom: -1.08rem;
    height: 0.72rem;
    border-radius: 9999px;
    background: radial-gradient(circle at center, var(--header-link-glow) 0%, var(--header-link-glow-soft) 38%, transparent 74%);
    filter: blur(9px);
    opacity: 0.6;
}

.site-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.site-header-icon-button,
.site-header-account-button {
    position: relative;
    display: inline-flex;
    height: 2.75rem;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--header-utility-border);
    background: var(--header-utility-bg);
    color: var(--header-link-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, color 0.24s ease;
}

summary.site-header-account-button {
    list-style: none;
}

summary.site-header-account-button::-webkit-details-marker {
    display: none;
}

.site-header-icon-button:hover,
.site-header-account-button:hover,
details[open] > .site-header-account-button {
    transform: translateY(-1px);
    border-color: var(--header-link-active-border);
    background: var(--header-utility-hover-bg);
    box-shadow: var(--header-link-active-shadow);
}

.site-header-icon-button-active {
    border-color: var(--header-link-active-border);
    background: var(--header-link-active-bg);
    box-shadow: var(--header-link-active-shadow);
}

.site-mobile-menu {
    display: none;
    position: relative;
    margin-left: auto;
}

.site-mobile-menu-trigger {
    display: inline-flex;
    height: 2.75rem;
    min-width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--header-utility-border);
    background: var(--header-utility-bg);
    color: var(--header-link-text);
    cursor: pointer;
    list-style: none;
    transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.site-mobile-menu-trigger::-webkit-details-marker {
    display: none;
}

.site-mobile-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.65rem);
    width: min(22rem, calc(100vw - 1.5rem));
    border-radius: 1.2rem;
    border: 1px solid var(--indeed-menu-border);
    background: var(--indeed-menu-bg);
    box-shadow: 0 20px 40px rgba(var(--indeed-shadow-rgb), 0.18);
    padding: 0.65rem;
}

.site-mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.site-mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border-radius: 0.9rem;
    padding: 0.72rem 0.85rem;
    color: var(--header-link-text);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-mobile-menu-link:hover {
    background: var(--indeed-menu-hover-bg);
    color: var(--indeed-menu-hover-text);
}

.site-mobile-menu-link-active {
    background: var(--header-link-active-bg);
    color: var(--header-link-text);
}

.site-mobile-menu-link-logout {
    color: var(--indeed-logout-text);
}

.site-mobile-menu-link-logout:hover {
    background: #b4233f;
    color: #ffe6ea;
}

@media (max-width: 960px) {
    .site-header-layout {
        align-items: center;
        flex-direction: row;
    }

    .site-header-brand-mark {
        height: 1.4rem;
        width: 1.4rem;
    }

    .site-header-left {
        min-width: 0;
        width: auto;
    }

    .site-header-nav-desktop,
    .site-header-actions-desktop {
        display: none;
    }

    .site-mobile-menu {
        display: block;
    }

    details[open] > .site-mobile-menu-trigger,
    .site-mobile-menu-trigger:hover {
        transform: translateY(-1px);
        border-color: var(--header-link-active-border);
        background: var(--header-utility-hover-bg);
        box-shadow: var(--header-link-active-shadow);
    }
}

.account-menu-panel {
    background: var(--indeed-menu-bg);
    border: 1px solid var(--indeed-menu-border);
    box-shadow: 0 24px 55px rgba(var(--indeed-shadow-rgb), 0.22);
}
.account-menu-divider {
    border-color: var(--indeed-menu-border) !important;
}
.account-menu-title {
    color: var(--indeed-menu-title) !important;
}
.account-menu-subtitle {
    color: var(--ui-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
}
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.9rem;
    padding: 0.7rem 0.85rem;
    font-size: 1.07rem;
    font-weight: 500;
    color: var(--indeed-menu-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.account-menu-item-hover:hover {
    background: var(--indeed-menu-hover-bg);
    color: var(--indeed-menu-hover-text);
}
.account-menu-icon {
    display: inline-flex;
    height: 1.55rem;
    width: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--indeed-menu-icon-bg);
    color: var(--indeed-menu-icon-text);
}
.account-menu-logout {
    color: var(--indeed-logout-hover-text);
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid var(--indeed-menu-border);
    background: var(--indeed-logout-hover-bg);
}
.account-menu-logout.account-menu-item-hover:hover {
    background: #b4233f;
    color: #ffe6ea;
    border-color: #b4233f;
    filter: none;
}

.notification-mark-read-btn {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.notification-mark-read-btn:hover {
    background-color: #cfe7ff !important;
    border-color: #9bc4ff !important;
    color: #18467f !important;
}

.indeed-theme button,
.indeed-theme input[type="button"],
.indeed-theme input[type="submit"],
.indeed-theme input[type="reset"] {
    cursor: pointer;
}
.indeed-theme button:disabled,
.indeed-theme input[type="button"]:disabled,
.indeed-theme input[type="submit"]:disabled,
.indeed-theme input[type="reset"]:disabled {
    cursor: not-allowed;
}

.header-count-badge {
    display: inline-flex;
    min-height: 1.45rem;
    min-width: 1.45rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 2px solid #f8fbff;
    padding: 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(29, 78, 216, 0.35);
}
.header-count-badge-notification {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.32);
}
.header-count-badge-message {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.32);
}

.theme-settings-card {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    box-shadow: 0 0 0 1px var(--ui-panel-border), var(--indeed-card-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background-color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.theme-settings-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 960px) {
    .theme-settings-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
        align-items: stretch;
    }
}

.theme-option-button {
    border: 1px solid var(--indeed-toggle-border);
    background: var(--indeed-toggle-bg);
    color: var(--indeed-toggle-text);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-option-button:hover {
    background: var(--indeed-toggle-hover);
    transform: translateY(-1px);
}

.theme-option-button.is-active {
    border-color: var(--indeed-primary);
    background: var(--indeed-primary-soft);
    color: var(--indeed-ink);
    box-shadow: 0 12px 24px rgba(var(--indeed-shadow-rgb), 0.18);
}

.theme-preview {
    border: 1px solid var(--indeed-preview-border);
    background: var(--indeed-preview-bg);
    box-shadow: var(--indeed-card-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.theme-preview-window {
    border: 1px solid var(--indeed-preview-border);
    background: var(--indeed-preview-surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.theme-preview-chip {
    border: 1px solid var(--indeed-preview-border);
    background: rgba(var(--indeed-shadow-rgb), 0.06);
    color: var(--indeed-preview-muted);
}

.theme-preview-accent {
    background: linear-gradient(135deg, var(--indeed-preview-accent) 0%, var(--indeed-primary) 100%);
}

.ui-shell {
    border: 1px solid var(--ui-shell-border);
    background: var(--ui-shell-bg);
    box-shadow: var(--indeed-card-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ui-shell-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.ui-shell-hover:hover {
    box-shadow: var(--ui-shell-hover-shadow);
}

.ui-panel {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ui-panel-subtle {
    border: 1px solid var(--ui-panel-subtle-border);
    background: var(--ui-panel-subtle-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ui-panel-success {
    border: 1px solid var(--ui-success-border);
    background: var(--ui-success-bg);
}

.ui-panel-info {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
}

.ui-panel-warning {
    border: 1px solid var(--ui-warning-border);
    background: var(--ui-warning-bg);
}

.ui-panel-danger {
    border: 1px solid var(--ui-danger-border);
    background: var(--ui-danger-bg);
}

.ui-danger {
    border: 1px solid var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}

.ui-panel-accent-hover {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ui-panel-accent-hover:hover {
    border-color: var(--ui-info-border);
    background: var(--ui-message-empty-bg);
}

.ui-panel-success-hover {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ui-panel-success-hover:hover {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}

.ui-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    color: var(--ui-text-secondary);
}

.ui-title {
    color: var(--ui-heading);
}

.ui-text-primary {
    color: var(--ui-text-primary);
}

.ui-text-secondary {
    color: var(--ui-text-secondary);
}

.ui-text-muted {
    color: var(--ui-text-muted);
}

.ui-text-soft {
    color: var(--ui-text-soft);
}

.group:hover .ui-hover-heading {
    color: var(--ui-heading);
}

.ui-link-accent {
    color: var(--ui-link);
    transition: color 0.2s ease;
}

.ui-link-accent:hover {
    color: var(--ui-link-hover);
}

.ui-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}

.ui-pill-info {
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.ui-pill-success {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
    color: var(--ui-success-text);
}

.ui-pill-warning {
    border-color: var(--ui-warning-border);
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
}

.ui-pill-danger {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}

.ui-pill-muted {
    border-color: var(--ui-panel-border);
    background: var(--ui-panel-bg);
    color: var(--ui-text-secondary);
}

.ui-notification-success [data-notification-close="true"] {
    color: var(--ui-success-text-muted) !important;
}

.ui-notification-success [data-notification-close="true"]:hover {
    color: var(--ui-success-text) !important;
}

.ui-notification-info [data-notification-close="true"] {
    color: var(--ui-info-text-muted) !important;
}

.ui-notification-info [data-notification-close="true"]:hover {
    color: var(--ui-info-text) !important;
}

.ui-button-primary,
.ui-button-secondary,
.ui-button-danger,
.ui-button-warning {
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ui-button-primary:hover,
.ui-button-secondary:hover,
.ui-button-danger:hover,
.ui-button-warning:hover {
    transform: translateY(-1px);
}

.ui-button-primary {
    border: 1px solid transparent;
    background: var(--ui-button-primary-bg);
    color: var(--ui-button-primary-text);
    box-shadow: 0 16px 28px rgba(var(--indeed-shadow-rgb), 0.2);
}

.ui-button-primary:hover {
    background: var(--ui-button-primary-hover);
}

.ui-button-info {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.ui-button-info:hover {
    filter: brightness(0.95);
}

.ui-button-secondary {
    border: 1px solid var(--ui-button-secondary-border);
    background: var(--ui-button-secondary-bg);
    color: var(--ui-button-secondary-text);
}

.ui-button-secondary:hover {
    background: var(--ui-button-secondary-hover);
}

.ui-button-warning {
    border: 1px solid var(--ui-warning-border);
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
}

.ui-button-danger {
    border: 1px solid var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}

.ui-button-disabled {
    border: 1px solid transparent;
    background: var(--ui-panel-subtle-bg);
    color: var(--ui-disabled-text);
}

.ui-input-label {
    color: var(--ui-label);
}

.ui-input {
    border: 1px solid var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--ui-input-text);
    box-shadow: inset 0 1px 2px rgba(var(--indeed-shadow-rgb), 0.08);
}

.ui-input::placeholder {
    color: var(--ui-input-placeholder);
}

.ui-input:focus {
    outline: none;
    border-color: var(--ui-input-focus-border);
    background: var(--ui-input-focus-bg);
    box-shadow: 0 0 0 4px var(--ui-input-focus-ring);
}

.ui-check {
    border: 1px solid var(--ui-input-border);
    background: var(--ui-input-bg);
}

.ui-check:checked {
    border-color: var(--ui-button-primary-bg);
    background: var(--ui-button-primary-bg);
}

.ui-check:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--ui-input-focus-ring);
}

.ui-note {
    border: 1px solid var(--ui-note-border);
    background: var(--ui-note-bg);
    color: var(--ui-note-text);
}

.ui-choice-card {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-choice-card:hover {
    border-color: var(--ui-button-primary-bg);
    background: var(--ui-panel-subtle-bg);
}

.ui-choice-card:has(:checked) {
    border-color: var(--ui-button-primary-bg);
    background: var(--ui-message-empty-bg);
    box-shadow: 0 14px 26px rgba(var(--indeed-shadow-rgb), 0.14);
}

.ui-choice-icon {
    color: var(--ui-text-muted);
    transition: color 0.2s ease;
}

.ui-choice-card:has(:checked) .ui-choice-icon {
    color: var(--ui-link);
}

.ui-error-box {
    border: 1px solid var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
}

.ui-progress-track {
    background: var(--ui-progress-track);
}

.ui-progress-value {
    background: var(--ui-progress-fill);
    box-shadow: var(--ui-progress-glow);
}

.ui-list-hover {
    transition: background-color 0.2s ease;
}

.ui-list-hover:hover {
    background: var(--ui-panel-subtle-bg);
}

.ui-step-badge-done {
    background: var(--ui-success-bg);
    color: var(--ui-success-text);
    box-shadow: 0 0 10px rgba(var(--indeed-shadow-rgb), 0.14);
}

.ui-step-badge-pending {
    background: var(--ui-panel-subtle-bg);
    color: var(--ui-text-muted);
}

.ui-list-hover:hover .ui-step-badge-pending {
    background: var(--ui-button-secondary-hover);
    color: var(--ui-heading);
}

.ui-message-shell {
    border: 1px solid var(--ui-message-shell-border);
    background: var(--ui-message-shell-bg);
    box-shadow: var(--indeed-card-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ui-message-panel {
    border: 1px solid var(--ui-message-panel-border);
    background: var(--ui-message-panel-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ui-message-panel-alt {
    border: 1px solid var(--ui-message-panel-border);
    background: var(--ui-message-panel-alt-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ui-message-divider {
    border-color: var(--ui-message-divider) !important;
}

.ui-message-empty {
    color: var(--ui-text-muted);
}

.ui-message-empty-box {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-message-empty-bg);
    color: var(--ui-message-empty-text);
}

.ui-message-back {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.ui-message-input {
    border: 1px solid var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--ui-input-text);
}

.ui-message-input::placeholder {
    color: var(--ui-input-placeholder);
}

.ui-message-input:focus {
    outline: none;
    border-color: var(--ui-input-focus-border);
}

.ui-message-send {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.ui-conversation-link {
    border: 1px solid var(--ui-message-panel-border);
    background: var(--ui-message-panel-bg);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ui-conversation-link:hover {
    border-color: var(--ui-info-border);
    background: var(--ui-message-empty-bg);
}

.ui-conversation-link-active {
    border-color: var(--ui-button-primary-bg);
    background: var(--ui-message-empty-bg);
}

.ui-conversation-badge {
    background: var(--ui-button-primary-bg);
    color: var(--ui-button-primary-text);
}

.ui-chat-bubble-me {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.ui-chat-bubble-other {
    border: 1px solid var(--pale-slate-border);
    background: var(--pale-slate-bg);
    color: var(--pale-slate-text);
}

.ui-chat-meta-me {
    color: var(--ui-info-text);
}

.ui-chat-meta-other {
    color: var(--pale-slate-text);
}

.premium-hero,
.premium-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.premium-hero > *,
.premium-section > * {
    position: relative;
    z-index: 1;
}

.premium-hero::before,
.premium-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.premium-hero::after,
.premium-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    filter: blur(56px);
    z-index: 0;
}

.premium-hero {
    border: 1px solid var(--premium-hero-border);
    background: var(--premium-hero-bg);
    box-shadow: var(--premium-hero-shadow);
    backdrop-filter: blur(32px);
}

.premium-hero::before {
    background: var(--premium-hero-overlay);
}

.premium-hero::after {
    right: -12%;
    bottom: -28%;
    width: 320px;
    height: 320px;
    background: var(--premium-hero-glow);
}

.premium-section {
    border: 1px solid var(--premium-section-border);
    background: var(--premium-section-bg);
    box-shadow: var(--premium-section-shadow);
    backdrop-filter: blur(28px);
}

.premium-section::before {
    background: var(--premium-section-overlay);
}

.premium-section::after {
    top: -18%;
    left: -10%;
    width: 220px;
    height: 220px;
    background: var(--premium-hero-glow);
    opacity: 0.55;
}

.premium-card,
.premium-card-soft,
.premium-stat-card,
.premium-action-card,
.premium-list-row {
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px var(--premium-card-border), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px rgba(var(--indeed-shadow-rgb), 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background-color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}

.premium-card,
.premium-stat-card,
.premium-action-card,
.premium-list-row {
    background: var(--premium-card-bg);
}

.premium-card-soft {
    background: var(--premium-card-soft-bg);
}

.premium-stat-card {
    background: var(--premium-card-strong-bg);
}

.premium-action-card:hover,
.premium-list-row:hover {
    transform: translateY(-2px);
    background: var(--premium-card-hover-bg);
    box-shadow: 0 0 0 1px var(--premium-card-hover-border), var(--premium-card-hover-shadow);
}

.premium-divider {
    border-color: var(--premium-divider) !important;
}

.premium-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--premium-kicker-border);
    background: var(--premium-kicker-bg);
    color: var(--premium-kicker-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.premium-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.premium-icon-info {
    background: var(--premium-icon-info-bg);
    border-color: var(--premium-icon-info-border);
    color: var(--premium-icon-info-text);
}

.premium-icon-success {
    background: var(--premium-icon-success-bg);
    border-color: var(--premium-icon-success-border);
    color: var(--premium-icon-success-text);
}

.premium-icon-warning {
    background: var(--premium-icon-warning-bg);
    border-color: var(--premium-icon-warning-border);
    color: var(--premium-icon-warning-text);
}

.premium-icon-violet {
    background: var(--premium-icon-violet-bg);
    border-color: var(--premium-icon-violet-border);
    color: var(--premium-icon-violet-text);
}

.premium-icon-danger {
    background: var(--premium-icon-danger-bg);
    border-color: var(--premium-icon-danger-border);
    color: var(--premium-icon-danger-text);
}

:root[data-theme="dark"] .admin-dashboard-icon {
    box-shadow: none;
}

:root[data-theme="dark"] .site-header-shell,
:root[data-theme="dark"] .site-header-shell-favorites {
    border-color: rgba(112, 140, 186, 0.4);
    background: rgba(6, 10, 16, 0.9) !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .site-header-brand,
:root[data-theme="dark"] .site-header-link,
:root[data-theme="dark"] .site-header-icon-button,
:root[data-theme="dark"] .site-header-account-button,
:root[data-theme="dark"] .site-mobile-menu-trigger,
:root[data-theme="dark"] .site-mobile-menu-link {
    color: #e6eefc;
}

.favorite-showcase-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(132, 162, 224, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(246, 250, 255, 0.66) 100%);
    box-shadow: 0 24px 60px rgba(37, 87, 214, 0.1);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}

.favorite-showcase-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(132, 162, 224, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 162, 224, 0.14) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 100%);
    opacity: 0.55;
}

.favorite-showcase-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -10%;
    width: 520px;
    height: 520px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(37, 87, 214, 0.18) 0%, rgba(79, 131, 255, 0.12) 34%, transparent 72%);
    filter: blur(68px);
}

.favorite-showcase-hero,
.favorite-showcase-grid,
.favorite-showcase-footnote {
    position: relative;
    z-index: 1;
}

.favorite-showcase-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(132, 162, 224, 0.22);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.52rem 1rem;
    border-radius: 9999px;
    color: #4f6b99;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.favorite-showcase-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(132, 162, 224, 0.22);
    background: rgba(255, 255, 255, 0.68);
    padding: 0.85rem 1.15rem;
    border-radius: 9999px;
    color: #23477f;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.favorite-showcase-summary-pill-soft {
    color: #4f6b99;
}

.favorite-showcase-summary-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.favorite-showcase-summary-value {
    color: #16325c;
    font-size: 1.12rem;
    font-weight: 700;
}

.favorite-showcase-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: stretch;
}

.favorite-showcase-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 2rem;
    border: 1px solid rgba(132, 162, 224, 0.22);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 46px rgba(37, 87, 214, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.favorite-showcase-card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 131, 255, 0.34);
    box-shadow: 0 24px 54px rgba(37, 87, 214, 0.14);
}

.favorite-showcase-card-featured {
    border-color: rgba(37, 87, 214, 0.34);
    box-shadow: 0 0 0 1px rgba(79, 131, 255, 0.18), 0 28px 62px rgba(37, 87, 214, 0.16);
}

.favorite-showcase-card-top {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.favorite-showcase-card-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(132, 162, 224, 0.2);
    background: rgba(255, 255, 255, 0.72);
    border-radius: 9999px;
    padding: 0.38rem 0.8rem;
    color: #4f6b99;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.favorite-showcase-card-badge-featured {
    border-color: rgba(37, 87, 214, 0.26);
    background: rgba(219, 234, 254, 0.72);
    color: #2557d6;
}

.favorite-showcase-card-badge-soft {
    background: rgba(248, 251, 255, 0.62);
}

.favorite-showcase-heart-button {
    display: inline-flex;
    height: 2.8rem;
    width: 2.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(132, 162, 224, 0.22);
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.favorite-showcase-heart-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 87, 214, 0.12);
}

.favorite-showcase-metric-value {
    color: #16325c;
    font-size: 2.7rem;
    line-height: 0.94;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.favorite-showcase-metric-label {
    color: #4f6b99;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.15;
}

.favorite-showcase-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(132, 162, 224, 0.18);
    background: rgba(248, 251, 255, 0.7);
    border-radius: 9999px;
    padding: 0.45rem 0.82rem;
    color: #416196;
    font-size: 0.82rem;
    font-weight: 600;
}

.favorite-showcase-primary-link,
.favorite-showcase-disabled-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 3.35rem;
    border-radius: 1.05rem;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.favorite-showcase-primary-link {
    border: 1px solid var(--ui-button-secondary-border);
    background: linear-gradient(180deg, var(--ui-button-secondary-bg) 0%, var(--ui-panel-subtle-bg) 100%);
    color: var(--ui-button-secondary-text);
    box-shadow: 0 14px 28px rgba(var(--indeed-shadow-rgb), 0.16);
}

.favorite-showcase-primary-link:hover {
    transform: translateY(-2px);
    border-color: var(--ui-link);
    background: var(--ui-button-secondary-hover);
    color: var(--ui-heading);
    box-shadow: 0 20px 36px rgba(var(--indeed-shadow-rgb), 0.2);
}

.favorite-showcase-primary-link:focus-visible {
    outline: 2px solid var(--ui-input-focus-border);
    outline-offset: 2px;
}

.favorite-showcase-card-featured .favorite-showcase-primary-link {
    border-color: transparent;
    background: var(--ui-progress-fill);
    color: var(--ui-button-primary-text);
    box-shadow: 0 18px 38px rgba(var(--indeed-shadow-rgb), 0.24);
}

.favorite-showcase-card-featured .favorite-showcase-primary-link:hover {
    box-shadow: 0 22px 42px rgba(37, 87, 214, 0.28);
}

.favorite-showcase-disabled-link {
    border: 1px solid rgba(132, 162, 224, 0.18);
    background: rgba(248, 251, 255, 0.5);
    color: #8b99b7;
}

.favorite-showcase-card-divider {
    margin-top: auto;
    border-top: 1px solid rgba(132, 162, 224, 0.18);
}

.favorite-showcase-feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.favorite-showcase-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    color: #4f6b99;
    font-size: 0.97rem;
    line-height: 1.45;
}

.favorite-showcase-feature-icon {
    display: inline-flex;
    height: 1.4rem;
    width: 1.4rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9999px;
    background: rgba(219, 234, 254, 0.84);
    color: #2557d6;
    font-weight: 800;
    line-height: 1;
}

.favorite-showcase-empty {
    border: 1px dashed rgba(132, 162, 224, 0.3);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 18px 40px rgba(37, 87, 214, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.favorite-showcase-footnote {
    position: relative;
    z-index: 1;
    color: #5f78a8;
}

.favorite-showcase-toolbar-pill {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    color: var(--ui-text-primary);
}

.favorite-showcase-toolbar-count {
    border: 1px solid var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info-text);
}

.help-quickstart-shell {
    border: 1px solid var(--premium-section-border);
    background: var(--premium-section-bg);
    box-shadow: var(--premium-section-shadow);
}

.help-role-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem;
    border-radius: 9999px;
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-subtle-bg);
}

.help-role-button {
    display: inline-flex;
    min-width: 7.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid transparent;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--ui-text-secondary);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.help-role-button:hover {
    border-color: var(--ui-panel-border);
    background: var(--ui-button-secondary-hover);
    color: var(--ui-heading);
}

.help-role-button.is-active {
    border-color: var(--pale-blue-border);
    background: var(--pale-blue-bg);
    color: var(--pale-blue-text);
    box-shadow: 0 10px 22px rgba(37, 87, 214, 0.14);
}

.help-quickstart-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}

.help-steps {
    --help-progress: 26%;
    position: relative;
    margin: 0;
    padding: 0 0 0 2rem;
    list-style: none;
}

.help-steps::before,
.help-steps::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.28rem;
    border-radius: 9999px;
}

.help-steps::before {
    bottom: 0;
    background: linear-gradient(180deg, rgba(140, 169, 229, 0.25) 0%, rgba(132, 162, 224, 0.16) 100%);
}

.help-steps::after {
    height: var(--help-progress);
    min-height: 6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(191, 219, 254, 0.95) 48%, rgba(37, 87, 214, 0.92) 100%);
    box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.42), 0 0 20px rgba(79, 131, 255, 0.3);
}

.help-step {
    position: relative;
    margin: 0;
    padding: 0 0 3.9rem 1.05rem;
    opacity: 0.62;
    cursor: pointer;
    transition: opacity 0.22s ease;
}

.help-step:last-child {
    padding-bottom: 0;
}

.help-step:hover {
    opacity: 0.85;
}

.help-step:focus-visible {
    outline: 2px solid var(--ui-input-focus-border);
    outline-offset: 0.35rem;
    border-radius: 0.85rem;
}

.help-step-active {
    opacity: 1;
}

.help-step-title {
    margin: 0;
    color: var(--ui-heading);
    font-size: 1.46rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.help-step-text {
    margin: 0.42rem 0 0;
    color: var(--ui-text-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

.help-step-link {
    display: inline-flex;
    margin-top: 0.5rem;
    color: var(--ui-link);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.help-step-link:hover {
    color: var(--ui-link-hover);
}

.help-preview-card {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-bg);
    box-shadow: 0 24px 52px rgba(var(--indeed-shadow-rgb), 0.16);
}

.help-preview-media {
    border: 1px solid var(--ui-panel-border);
    background: var(--ui-panel-subtle-bg);
}

.help-preview-video {
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--ui-panel-border);
    background: #0b111b;
}

.help-preview-label {
    color: rgba(233, 239, 252, 0.88);
    font-size: 0.95rem;
    font-weight: 700;
}

.help-preview-field {
    border: 1px solid rgba(140, 169, 229, 0.25);
    background: rgba(20, 30, 49, 0.84);
    color: rgba(187, 202, 233, 0.88);
    font-size: 0.96rem;
    font-weight: 600;
}

.help-preview-cta {
    border: 1px solid rgba(251, 146, 60, 0.54);
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
    color: #fff7ed;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 14px 34px rgba(234, 88, 12, 0.35);
}

.help-preview-login {
    color: rgba(195, 208, 235, 0.86);
}

.help-preview-login a {
    color: rgba(255, 238, 220, 0.94);
    font-weight: 700;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .help-quickstart-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .help-step-title {
        font-size: 1.25rem;
    }

    .help-step-text {
        font-size: 0.94rem;
    }
}

:root[data-theme="dark"] .favorite-showcase-stage {
    border-color: rgba(141, 180, 255, 0.18);
    background: linear-gradient(180deg, rgba(10, 19, 34, 0.82) 0%, rgba(14, 26, 45, 0.76) 100%);
    box-shadow: 0 26px 62px rgba(0, 0, 0, 0.36);
}

:root[data-theme="dark"] .favorite-showcase-stage::before {
    background-image:
        linear-gradient(rgba(141, 180, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141, 180, 255, 0.12) 1px, transparent 1px);
}

:root[data-theme="dark"] .favorite-showcase-kicker,
:root[data-theme="dark"] .favorite-showcase-summary-pill,
:root[data-theme="dark"] .favorite-showcase-card,
:root[data-theme="dark"] .favorite-showcase-heart-button,
:root[data-theme="dark"] .favorite-showcase-empty {
    background: rgba(10, 15, 24, 0.92);
}

:root[data-theme="dark"] .favorite-showcase-kicker {
    border-color: rgba(141, 180, 255, 0.24);
    color: #d7e4fb;
}

:root[data-theme="dark"] .favorite-showcase-card,
:root[data-theme="dark"] .favorite-showcase-heart-button,
:root[data-theme="dark"] .favorite-showcase-empty {
    border-color: rgba(141, 180, 255, 0.2);
}

:root[data-theme="dark"] .favorite-showcase-card-badge {
    border-color: rgba(141, 180, 255, 0.24);
    background: rgba(20, 35, 61, 0.86);
    color: #d7e4fb;
}

:root[data-theme="dark"] .favorite-showcase-card-badge-featured {
    border-color: rgba(141, 180, 255, 0.34);
    background: rgba(44, 80, 146, 0.5);
    color: #e6efff;
}

:root[data-theme="dark"] .favorite-showcase-card-badge-soft {
    background: rgba(18, 33, 58, 0.8);
    color: #c7d6f3;
}

:root[data-theme="dark"] .favorite-showcase-metric-value {
    color: #f3f7ff;
}

:root[data-theme="dark"] .favorite-showcase-metric-label,
:root[data-theme="dark"] .favorite-showcase-feature-item,
:root[data-theme="dark"] .favorite-showcase-footnote {
    color: #b9c9e6;
}

:root[data-theme="dark"] .favorite-showcase-chip {
    border-color: rgba(141, 180, 255, 0.24);
    background: rgba(14, 21, 33, 0.92);
    color: #d8e5fb;
}

:root[data-theme="dark"] .favorite-showcase-card-divider {
    border-top-color: rgba(141, 180, 255, 0.2);
}

:root[data-theme="dark"] .favorite-showcase-feature-icon {
    background: rgba(141, 180, 255, 0.2);
    color: #d8e5fb;
}

:root[data-theme="dark"] .favorite-showcase-card-featured .favorite-showcase-primary-link {
    box-shadow: 0 20px 42px rgba(12, 21, 38, 0.42);
}

:root[data-theme="dark"] .favorite-showcase-primary-link {
    box-shadow: 0 16px 30px rgba(var(--indeed-shadow-rgb), 0.42);
}

:root[data-theme="dark"] .favorite-showcase-primary-link:hover {
    box-shadow: 0 20px 36px rgba(var(--indeed-shadow-rgb), 0.5);
}

:root[data-theme="dark"] .favorite-showcase-primary-link:focus-visible {
    outline-color: var(--ui-input-focus-border);
}

:root[data-theme="dark"] .favorite-showcase-disabled-link {
    background: rgba(14, 21, 33, 0.88);
    color: #7f96bc;
}

:root[data-theme="dark"] .help-quickstart-shell {
    border-color: rgba(141, 180, 255, 0.22);
    background: linear-gradient(180deg, rgba(8, 13, 20, 0.88) 0%, rgba(10, 16, 26, 0.86) 100%);
}

:root[data-theme="dark"] .help-steps::before {
    background: linear-gradient(180deg, rgba(111, 145, 214, 0.24) 0%, rgba(111, 145, 214, 0.16) 100%);
}

:root[data-theme="dark"] .help-steps::after {
    background: linear-gradient(180deg, rgba(241, 245, 255, 0.96) 0%, rgba(141, 180, 255, 0.92) 56%, rgba(59, 130, 246, 0.9) 100%);
    box-shadow: 0 0 0 1px rgba(141, 180, 255, 0.3), 0 0 20px rgba(59, 130, 246, 0.28);
}

:root[data-theme="dark"] .help-step-title {
    color: #f3f7ff;
}

:root[data-theme="dark"] .help-step-text {
    color: #b6c5e1;
}

:root[data-theme="dark"] .help-step-link {
    color: #8db4ff;
}

:root[data-theme="dark"] .help-step-link:hover {
    color: #d7e4fb;
}

:root[data-theme="dark"] .help-preview-card {
    border-color: rgba(141, 180, 255, 0.24);
    background: rgba(10, 15, 24, 0.9);
}

:root[data-theme="dark"] .help-role-switch {
    border-color: rgba(141, 180, 255, 0.24);
    background: rgba(10, 15, 24, 0.76);
}

:root[data-theme="dark"] .help-role-button {
    color: #b6c5e1;
}

:root[data-theme="dark"] .help-role-button:hover {
    border-color: rgba(141, 180, 255, 0.24);
    background: rgba(20, 35, 61, 0.68);
    color: #f3f7ff;
}

:root[data-theme="dark"] .help-role-button.is-active {
    border-color: rgba(141, 180, 255, 0.42);
    background: rgba(37, 99, 235, 0.26);
    color: #dbeafe;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

@media (max-width: 768px) {
    .site-page-shell::after {
        width: 360px;
        height: 360px;
        top: -6%;
    }

    .favorite-showcase-metric-value {
        font-size: 2.15rem;
    }
}

@media (min-width: 768px) {
    .favorite-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .favorite-showcase-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}