html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

/* ============================================================
   GALILUNA BRAND FOUNDATION + THEME SYSTEM (v1.1 guidelines)
   Dark theme is the default; light theme via [data-theme="light"].
   Semantic tokens drive every themed surface. Poppins headings,
   Inter body. Palette: navy #0B1028, cosmic blue #295BFF,
   lunar purple #6A38FF, nebula #A855F7.
   ============================================================ */
:root, [data-theme="dark"] {
    --color-bg: #131834;
    --color-bg-elevated: #191F40;
    --color-surface: rgba(39, 47, 96, 0.90);
    --color-surface-strong: #272F60;
    --color-surface-soft: rgba(255, 255, 255, 0.09);
    --color-text: #FFFFFF;
    --color-text-secondary: #C7CBE0;
    --color-text-muted: #9298B3;
    --color-border: rgba(255, 255, 255, 0.14);
    --color-border-strong: rgba(255, 255, 255, 0.24);
    --color-primary: #6A38FF;
    --color-secondary: #295BFF;
    --color-accent: #A855F7;
    --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.30);
    --shadow-primary: 0 14px 40px rgba(106, 56, 255, 0.30);
    /* Text tokens used by inline styles across the views */
    --gl-heading: #FFFFFF;
    --gl-body: #C7CBE0;
    --gl-link: #A78BFA;
    --gl-link-hover: #C4B5FD;
    --gl-accent-ink: #A78BFA;
    /* Legacy aliases still referenced by older rules */
    --gl-navy: #0B1028;
    --gl-blue: #295BFF;
    --gl-purple: #6A38FF;
    --gl-nebula: #A855F7;
    --gl-bg: var(--color-bg);
    --gl-border: var(--color-border);
    --gl-gradient: linear-gradient(135deg, #295BFF 0%, #6A38FF 52%, #A855F7 100%);
    --gl-gradient-dark: linear-gradient(135deg, #131834 0%, #191F40 52%, #262C5E 100%);
    --gl-shadow: var(--shadow-card);
}

[data-theme="light"] {
    --color-bg: #FAFBFF;
    --color-bg-elevated: #FFFFFF;
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-strong: #FFFFFF;
    --color-surface-soft: #F4F1FF;
    --color-text: #0B1028;
    --color-text-secondary: #3E4668;
    --color-text-muted: #737B98;
    --color-border: #E7EAF5;
    --color-border-strong: #D8DDED;
    --shadow-card: 0 16px 50px rgba(41, 91, 255, 0.12);
    --shadow-primary: 0 14px 38px rgba(106, 56, 255, 0.20);
    --gl-heading: #2E3A6E;
    --gl-body: #334155;
    --gl-link: #295BFF;
    --gl-link-hover: #4523C7;
    --gl-accent-ink: #6A38FF;
    --gl-bg: var(--color-bg);
    --gl-border: var(--color-border);
    --gl-shadow: var(--shadow-card);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 700;
    color: var(--gl-heading);
    /* Tight tracking (brand guidelines): reads refined rather than heavy at display sizes. */
    letter-spacing: -0.02em;
}
.btn { font-family: "Poppins", "Inter", sans-serif; font-weight: 600; border-radius: 14px; }
.form-control, .form-select, .input-group-text { border-radius: 12px; border-color: var(--color-border); }

/* Color pickers: Bootstrap 5.1 doesn't reset the native swatch-wrapper padding, which
   leaves the color bar sitting off-center in its box. Equal padding on the input plus a
   zeroed wrapper keeps the swatch perfectly centered, with corners that follow the 12px box. */
.form-control-color { padding: 5px; }
.form-control-color::-webkit-color-swatch-wrapper { padding: 0; width: 100%; height: 100%; }
.form-control-color::-webkit-color-swatch { border: none; border-radius: 8px; width: 100%; height: 100%; }
.form-control-color::-moz-color-swatch { border: none; border-radius: 8px; width: 100%; height: 100%; }
.input-group > .form-control { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.form-control:focus, .form-select:focus { border-color: #B9C6FF; }
.card { border-radius: 18px; border-color: var(--color-border); }
.dropdown-menu { border-radius: 14px; border-color: var(--color-border); box-shadow: var(--shadow-card); }
.badge { font-weight: 600; }
a { color: var(--gl-link); }
a:hover { color: var(--gl-link-hover); }

/* Focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--color-bg-elevated), 0 0 0 0.25rem rgba(106, 56, 255, 0.55);
}

/* ===== GALILUNA NAVBAR ===== */
.gl-navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.25s ease;
    /* The backdrop-filter creates a stacking context; without an explicit z-index the
       page content (animated tiles) paints over the navbar's own dropdowns. Keep the
       whole bar (and the notifications menu inside it) above regular content. */
    position: relative;
    z-index: 1030;
}
[data-theme="dark"] .gl-navbar { background: rgba(19, 24, 52, 0.85); }
.gl-logo { height: 58px; width: auto; display: block; }
/* Navbar brand lockup: telescope-moon icon + wordmark, composed side by side.
   The icon's source canvas (1536x1024) carries big empty margins around the drawing
   (content bbox x 496-1140, y 192-768), so a clipping box shows JUST the drawing:
   at 85px canvas height the drawing is ~48px tall / ~54px wide, offset (-41,-16). */
.gl-navbar .navbar-brand { gap: 0.35rem; align-items: center; }
.gl-brand-iconbox { position: relative; width: 54px; height: 48px; overflow: hidden; display: block; flex-shrink: 0; }
.gl-brand-iconbox img { position: absolute; height: 85px; width: auto; left: -41px; top: -16px; max-width: none; }
.gl-brand-wordmark { height: 30px; width: auto; display: block; }
.gl-logo-auth { height: 64px; width: auto; display: inline-block; }
/* Give the taller logo room without stretching the bar height. */
.gl-navbar .navbar-brand { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* Theme-aware logo swap: each spot renders both variants, CSS shows the right one. */
[data-theme="dark"] .gl-logo-light { display: none; }
[data-theme="light"] .gl-logo-dark { display: none; }
[data-theme="dark"] .gl-logo-dark.gl-logo { display: block; }
[data-theme="light"] .gl-logo-light.gl-logo { display: block; }

/* ===== THE MOON: theme toggle ===== */
.gl-theme-toggle {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--color-surface-soft);
    cursor: pointer; overflow: hidden; flex-shrink: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.gl-theme-toggle:hover { border-color: #B9A8F0; box-shadow: 0 6px 18px rgba(106, 56, 255, 0.25); transform: translateY(-1px); }
.gl-theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gl-theme-toggle i {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease;
}
/* Moon shows in LIGHT (click to go to night); sun shows in DARK (click for day). */
.gl-toggle-moon { color: #6A38FF; }
.gl-toggle-sun { color: #F4B400; }
[data-theme="light"] .gl-toggle-moon { transform: translateY(0) rotate(0deg); opacity: 1; }
[data-theme="light"] .gl-toggle-sun { transform: translateY(130%) rotate(90deg); opacity: 0; }
[data-theme="dark"] .gl-toggle-moon { transform: translateY(-130%) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .gl-toggle-sun { transform: translateY(0) rotate(0deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gl-theme-toggle i { transition: none; } }

/* Sticky footer via flex: the footer sits flush after the content (no reserved-space
   gap), and on short pages the main column stretches so it still lands at the bottom. */
html { position: relative; min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .container { flex: 1 0 auto; }

/* ===== GALILUNA FOOTER ===== */
.gl-footer {
    position: relative; width: 100%; flex-shrink: 0;
    background: #fff;
    padding: 1.3rem 0;
}
/* Accent line: brand gradient in light theme, a clean white line in dark. */
.gl-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gl-gradient);
}
[data-theme="dark"] .gl-footer::before { background: rgba(255, 255, 255, 0.9); }
.gl-footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.9rem 1.5rem;
}
.gl-footer-brand { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Same CSS crop as the navbar iconbox, scaled down (drawing ~34px tall). */
.gl-footer-iconbox { position: relative; width: 38px; height: 34px; overflow: hidden; display: block; flex-shrink: 0; }
.gl-footer-iconbox img { position: absolute; height: 60px; width: auto; left: -29px; top: -11px; max-width: none; }
.gl-footer-logo { height: 24px; width: auto; opacity: 0.92; }
.gl-footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.gl-footer-links a {
    color: var(--gl-heading); text-decoration: none; font-size: 0.9rem; font-weight: 500;
    transition: color 0.15s ease;
}
.gl-footer-links a:hover { color: var(--gl-accent-ink); }
.gl-footer-copy { color: #9098BD; font-size: 0.84rem; }
@media (max-width: 767.98px) {
    .gl-footer-inner { flex-direction: column; justify-content: center; text-align: center; }
}

/* ===== TABLES: brand ink, not Bootstrap's default black ===== */
/* Bootstrap hardcodes #212529 on .table; route cells through the body ink and headers
   through the heading variable so tables follow the one-variable color system. */
.table { color: var(--gl-body); --bs-table-color: var(--gl-body); }
.table > :not(caption) > * > * { color: var(--gl-body); }
.table thead th { color: var(--gl-heading); }

/* ===== TABLE ROW ACTIONS: quiet, uniform pill buttons that sit on one line ===== */
.pf-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-wrap: nowrap; white-space: nowrap; }
.pf-row-btn {
    border: 1px solid var(--color-border-strong); background: #fff; color: var(--gl-heading);
    font-weight: 600; border-radius: 999px; padding: 0.3rem 0.9rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pf-row-btn:hover { border-color: var(--gl-accent-ink); color: var(--gl-accent-ink); background: #F7F4FF; box-shadow: 0 4px 12px rgba(106, 56, 255, 0.12); }
.pf-row-btn-danger { color: #C2334D; }
.pf-row-btn-danger:hover { border-color: #C2334D; color: #fff; background: #C2334D; box-shadow: 0 4px 12px rgba(194, 51, 77, 0.20); }

/* ===== TABLE HOVER ===== */
.table tbody tr:hover {
    background-color: #EEF1FF !important;
    transition: background-color 0.15s ease-in-out;
}

/* ===== STAR RATING ===== */
.star-rating { display: flex; gap: 4px; cursor: pointer; }
.star-rating i { font-size: 1.1rem; color: #C8D6E5; transition: color 0.2s ease; }
.star-rating i.active { color: #295BFF; }
.star-rating i:hover  { color: #6A38FF; }

/* ===== SECTION CARD ===== */
.section-card {
    border: 1px solid #E7EAF5;
    background-color: #FFFFFF;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.section-card:hover {
    background-color: #FAFBFF;
    border-color: #D4E2F2;
    box-shadow: 0 6px 18px rgba(41, 91, 255, 0.08);
}
/* Left accent line on hover */
.section-card::before {
    content: ""; position: absolute; left: 0; top: 0;
    height: 100%; width: 0;
    background-color: #295BFF;
    transition: width 0.2s ease;
}
.section-card:hover::before { width: 4px; }

/* ===== PERFORMANCE / COREVALUE ITEMS ===== */
.performance-item,
.corevalue-item {
    border: 1px solid #E9F1FA;
    background-color: #FAFCFF;
    border-radius: 6px;
    padding: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.performance-item:hover,
.corevalue-item:hover {
    background-color: #F5F6FF;
    border-color: #D6D9F0;
}
.performance-item { position: relative; }

/* ===== COLLAPSIBLE HEADER ===== */
.performance-header {
    padding: 10px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.performance-header:hover { background-color: #F5F6FF; }

/* ===== CHEVRON TOGGLE ===== */
.toggle-icon { transition: transform 0.25s ease; }
.collapse.show + .toggle-icon { transform: rotate(180deg); }
.toggle-icon.rotate { transform: rotate(180deg); }

/* ===== INLINE EDIT INPUT ===== */
.priority-input { background-color: transparent; padding: 6px 8px; }
.priority-input:focus { background-color: #F5F9FE; box-shadow: none; border-radius: 4px; }

/* ===== TOOLTIP WIDTH ===== */
.tooltip-inner { max-width: 500px; text-align: left; white-space: normal; }

/* ===== READONLY INPUTS ===== */
input[readonly], textarea[readonly] { background-color: #e9ecef; cursor: not-allowed; }

/* ===== MODERN TEXTAREA ===== */
.modern-textarea { border-radius: 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; resize: vertical; }
.modern-textarea:focus { border-color: #9FC5F8; box-shadow: 0 0 0 0.15rem rgba(159,197,248,0.25); }

/* ===== BULLET ICON BUTTON ===== */
.btn-icon-bullet {
    background: transparent; border: none; color: #6C757D;
    padding: 4px 6px; border-radius: 6px;
    transition: all 0.18s ease; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-icon-bullet i { transition: transform 0.18s ease, color 0.18s ease; }
.btn-icon-bullet:hover { background-color: #EEF4FB; color: #295BFF; }
.btn-icon-bullet:hover i { transform: translateY(-2px) scale(1.08); color: #295BFF; }
.btn-icon-bullet:active i { transform: translateY(0) scale(0.95); }

/* ===== LEADER RATING CONTAINER ===== */
.leader-rating-container { transition: opacity 0.2s ease; }

/* ===== PRIMARY BUTTON ===== */
/* GaliLuna primary: brand gradient, white text, gentle lift + scale on hover. */
.btn-primary {
    background: var(--gl-gradient); background-color: #295BFF; border: none;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--gl-gradient); background-color: #295BFF; border: none; color: #fff;
    filter: brightness(1.07); transform: translateY(-1px) scale(1.03);
    box-shadow: 0 12px 30px rgba(41, 91, 255, 0.28);
}
.btn-primary:active { background: var(--gl-gradient); border: none; filter: brightness(0.96); transform: translateY(0) scale(1); box-shadow: none; }

/* ===== OUTLINE PRIMARY BUTTON ===== */
/* GaliLuna secondary: white surface, dark text, light border, soft lavender hover. */
.btn-outline-primary { color: var(--gl-heading); border-color: #D6D9F0; background-color: #fff; transition: all 0.2s ease; }
.btn-outline-primary:hover {
    background-color: #EEE9FF; border-color: #B9A8F0; color: var(--gl-heading);
    transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 20px rgba(106, 56, 255, 0.14);
}
.btn-outline-primary:active { background-color: #E4DBFB; border-color: #B9A8F0; color: var(--gl-heading); transform: translateY(0) scale(1); box-shadow: none; }

/* ===== DISABLED ===== */
.btn-primary:disabled, .btn-outline-primary:disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }

/* ===== ACTION TILES (home hub + shared) ===== */
.pf-action {
    display: flex; align-items: center; gap: 1rem; height: 100%;
    background: #fff; border: 1px solid #E7EAF5; border-radius: 14px; padding: 1.4rem 1.5rem;
    text-decoration: none; color: inherit; position: relative; overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: pfFadeUp 0.5s ease both; animation-delay: 0.25s;
}
.pf-action::after {
    content: ""; position: absolute; top: -50%; left: -70%; width: 45%; height: 200%;
    background: linear-gradient(115deg, transparent 0%, rgba(41,91,255,0.06) 45%,
                rgba(41,91,255,0.12) 50%, rgba(41,91,255,0.06) 55%, transparent 100%);
    transform: rotate(18deg); transition: left 0.6s ease;
}
.pf-action:hover { transform: translateY(-4px); border-color: #D6D9F0; box-shadow: 0 12px 28px rgba(41, 91, 255, 0.14); color: inherit; }
.pf-action:hover::after { left: 135%; }
.pf-action:hover .pf-action-icon { transform: scale(1.15) rotate(-4deg); }
.pf-action:hover .pf-action-arrow { transform: translateX(5px); opacity: 1; }

.pf-action-icon { font-size: 2rem; color: var(--gl-accent-ink); transition: transform 0.25s ease; flex-shrink: 0; }
.pf-action-title { font-size: 1.15rem; font-weight: 700; color: var(--gl-heading); }
.pf-action-sub { font-size: 0.85rem; color: #6C757D; }
.pf-action-arrow { margin-left: auto; font-size: 1.2rem; color: #295BFF; opacity: 0.35; transition: transform 0.25s ease, opacity 0.25s ease; }

.pf-action-primary { background: linear-gradient(135deg, #295BFF 0%, #A855F7 100%); border: none; }
.pf-action-primary .pf-action-icon, .pf-action-primary .pf-action-title,
.pf-action-primary .pf-action-arrow { color: #fff; }
.pf-action-primary .pf-action-sub { color: rgba(255,255,255,0.75); }
.pf-action-primary::after {
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 45%,
                rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.10) 55%, transparent 100%);
}
.pf-action-primary:hover { box-shadow: 0 14px 32px rgba(41, 91, 255, 0.35); }

.pf-action-platform { border-color: #F0D8A8; background: linear-gradient(180deg, #FFFDF7 0%, #FFF8E8 100%); }
.pf-action-platform .pf-action-icon { color: #CC7A00; }

.pf-badge-pulse {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px;
    background: #C82333; color: #fff; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; vertical-align: 2px;
    animation: pfPulse 1.6s ease-in-out infinite;
}

@keyframes pfFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pfPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 35, 51, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(200, 35, 51, 0); }
}

/* Full-bleed sections (auth, landing) can poke past the viewport by the scrollbar width;
   clip the horizontal overflow so they never trigger a sideways scrollbar. */
body { overflow-x: hidden; }
/* Scroll lock used by the loading overlay. A class (not an inline style) so Bootstrap's
   modal save/restore of body.style.overflow can't re-lock the page after a dialog closes. */
body.pf-scroll-lock { overflow: hidden; }

/* ===== AUTH / CENTERED FORM CARD (login, register, user forms) ===== */
.pf-auth {
    position: relative;
    min-height: calc(100vh - 56px);
    display: flex; align-items: center; justify-content: center;
    /* Full-bleed: break out of the centered .container so the background reaches both
       viewport edges. margin-top cancels main's pt-4 so it starts under the navbar. */
    width: 100vw; margin-left: calc(50% - 50vw); margin-top: -1.5rem;
    padding: 3rem 1rem;
    /* Minimalist, Apple-like: a very soft neutral gray gradient. */
    background: linear-gradient(180deg, #FAFBFF 0%, #F1F2FC 55%, #ECEDFA 100%);
}

.pf-auth-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 460px;
    background: #fff; border: 1px solid #E7EAF5; border-radius: 20px;
    padding: 2.6rem 2.4rem; text-align: center;
    box-shadow: 0 24px 70px rgba(41, 91, 255, 0.16);
    animation: pfAuthIn 0.5s ease both;
}
@keyframes pfAuthIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.pf-auth-brand { font-weight: 800; letter-spacing: 0.5px; color: var(--gl-heading); font-size: 1.15rem; margin-bottom: 1.4rem; }
.pf-auth-brand i { color: #6A38FF; }
.pf-auth-title { font-size: 1.7rem; font-weight: 800; color: var(--gl-heading); margin-bottom: 0.25rem; }
.pf-auth-sub { color: #6C757D; font-size: 0.95rem; margin-bottom: 1.6rem; }
.pf-auth-card .input-group-text { border-right: 0; }
.pf-auth-card .input-group .form-control { border-left: 0; }
.pf-auth-foot { margin-top: 1.4rem; margin-bottom: 0; color: #6C757D; font-size: 0.9rem; }

/* ===== BILLING / PLAN SELECTION ===== */
/* Keeps the plan/checkout content in a centered column, matching the auth pages. */
.pf-billing { max-width: 1000px; }

/* ===== PLAN PURCHASE CELEBRATION ===== */
.pf-celebrate-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(11, 16, 40, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: pfCelebFade 0.25s ease;
}
@keyframes pfCelebFade { from { opacity: 0; } to { opacity: 1; } }
.pf-celebrate-card {
    position: relative; overflow: hidden;
    width: 100%; max-width: 440px;
    background: #fff; border-radius: 20px;
    padding: 2.4rem 2.2rem 2rem;
    text-align: center;
    box-shadow: 0 24px 70px rgba(41, 91, 255, 0.30);
    animation: pfCelebPop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes pfCelebPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
.pf-celebrate-check {
    width: 88px; height: 88px; margin: 0 auto 1.1rem;
    border-radius: 50%; background: #E6F4EA;
    display: flex; align-items: center; justify-content: center;
    animation: pfCheckPulse 0.6s ease 0.15s both;
}
@keyframes pfCheckPulse { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pf-celebrate-check svg { width: 50px; height: 50px; }
.pf-check-path {
    stroke: #1E7E34; stroke-width: 5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: pfCheckDraw 0.5s ease 0.35s forwards;
}
@keyframes pfCheckDraw { to { stroke-dashoffset: 0; } }
.pf-celebrate-details { border-top: 1px solid #EEF2F7; }
.pf-celebrate-details > div {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0.15rem; border-bottom: 1px solid #EEF2F7;
    font-size: 0.95rem;
}
.pf-celebrate-details > div span { color: #6C757D; }
.pf-celebrate-details > div strong { color: var(--gl-heading); }
.pf-confetti {
    position: absolute; top: -16px; width: 9px; height: 15px;
    border-radius: 2px; opacity: 0;
}
@keyframes pfConfettiFall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(360px) rotate(560deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-celebrate-card, .pf-celebrate-check, .pf-check-path, .pf-confetti,
    .pf-celebrate-overlay { animation: none; }
    .pf-check-path { stroke-dashoffset: 0; }
    .pf-confetti { display: none; }
}

/* ===== MODAL STACKING ===== */
/* The loading overlay sits at z-index 9999 and pfConfirm can open on top of it (its Cancel
   button lives on the overlay), so modal backdrops are raised above the overlay. Because that
   raises the backdrop for EVERY modal, every modal dialog must clear it too — otherwise the
   backdrop covers modals that kept Bootstrap's default z-index (e.g. the Terms modal). */
.modal { z-index: 10001; }
.modal-backdrop { z-index: 10000; }

/* ===== FORM VALIDATION: only flag problems ===== */
/* Bootstrap paints valid fields green with a check mark, which falsely implies the value
   was verified (e.g. that an email address really exists). Valid fields stay neutral;
   only invalid ones get the red treatment. */
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: #dee2e6;
    background-image: none;
    padding-right: 0.75rem;
}
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.was-validated .form-check-input:valid { border-color: rgba(0, 0, 0, 0.25); }
.was-validated .form-check-input:valid:checked { background-color: var(--gl-heading); border-color: var(--gl-heading); }
.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }

/* ===== PAGINATION ===== */
.pagination .page-link {
    color: var(--gl-heading); border-color: #E0E4F5;
    transition: all 0.2s ease;
}
.pagination .page-link:hover {
    background-color: #EEF1FF; border-color: #D6D9F0; color: #080C1E;
}
.pagination .page-link:focus {
    color: #080C1E;
    box-shadow: 0 0 0 0.25rem rgba(41, 91, 255, 0.15);
}
.pagination .page-item.active .page-link {
    background-color: var(--gl-heading); border-color: var(--gl-heading); color: #fff;
}
.pagination .page-item.disabled .page-link { color: #A5AECB; border-color: #E0E4F5; }

/* ===== PERFORMANCE PREMIUM SWEEP (new-item animation) ===== */
.performance-premium-in { position: relative; }
.performance-premium-in::after {
    content: ""; position: absolute; inset: 0; border-radius: 12px;
    background: linear-gradient(120deg, transparent 0%, rgba(41,91,255,0.08) 40%,
                rgba(41,91,255,0.15) 50%, rgba(41,91,255,0.08) 60%, transparent 100%);
    opacity: 0; pointer-events: none;
    animation: premiumSweep 0.9s ease forwards;
}
@keyframes premiumSweep {
    0%   { opacity: 0; transform: translateX(-40%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(40%); }
}

/* ===== NEW-ITEM BADGE ===== */
.performance-badge {
    position: absolute; top: 12px; right: 48px;
    background: rgba(41,91,255,0.08); color: var(--gl-heading);
    font-size: 0.75rem; font-weight: 600; padding: 4px 10px;
    border-radius: 999px; opacity: 0;
    transform: translateY(-6px); pointer-events: none;
}
.performance-premium-in .performance-badge { animation: badgeFadeIn 0.4s ease forwards; }
@keyframes badgeFadeIn  { to { opacity: 1; transform: translateY(0); } }
.performance-badge.fade-out { animation: badgeFadeOut 0.6s ease forwards; }
@keyframes badgeFadeOut { to { opacity: 0; transform: translateY(-6px); } }

/* ===== PERFORMANCE ROW SEPARATOR ===== */
.performance-row { padding-bottom: 10px; border-bottom: 1px solid #F1F3F5; }
.performance-row:last-child { border-bottom: none; }

/* ===== FALL ANIMATION (particles) ===== */
@keyframes fall { to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* ===== BOOTSTRAP was-validated FOCUS OVERRIDE =====
   The custom focus ring above would otherwise mask Bootstrap's red invalid-focus state. */
.was-validated .form-control:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}

/* ============================================================
   DARK THEME COMPONENT LAYER
   Components declare their light look where they're defined;
   everything below re-skins them when [data-theme="dark"].
   Specificity ([data-theme] + class) beats the view-level rules.
   ============================================================ */

/* --- Bootstrap surfaces --- */
[data-theme="dark"] .card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-surface-strong);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
[data-theme="dark"] .section-card:hover { background-color: #333C74; border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
[data-theme="dark"] .dropdown-item { color: var(--color-text-secondary); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--color-surface-soft); color: var(--color-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--color-border); }
[data-theme="dark"] .dropdown-header, [data-theme="dark"] .dropdown-item-text { color: var(--color-text-muted); }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background-color: #1A2148;
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .input-group-text.bg-white { background-color: #1A2148 !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--color-text-muted); }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #1E2650; color: var(--color-text); border-color: var(--color-primary); }
[data-theme="dark"] input[readonly], [data-theme="dark"] textarea[readonly] { background-color: #161C3C; color: var(--color-text-muted); }
[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C7CBE0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="dark"] .form-check-input { background-color: #1A2148; border-color: var(--color-border-strong); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="dark"] .form-text { color: var(--color-text-muted); }
[data-theme="dark"] .form-label { color: var(--color-text-secondary); }

[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--color-text) !important; }
[data-theme="dark"] hr { border-color: var(--color-border); opacity: 1; }

[data-theme="dark"] .table { color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--color-text-secondary); border-bottom-color: var(--color-border); }
[data-theme="dark"] .table thead th { color: var(--color-text); }
[data-theme="dark"] .table tbody tr:hover { background-color: rgba(106, 56, 255, 0.10) !important; }
[data-theme="dark"] .table-light > * > * { background-color: #1A2148 !important; color: var(--color-text) !important; }

[data-theme="dark"] .btn-outline-primary { color: var(--color-text); border-color: var(--color-border-strong); background-color: transparent; }
[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--color-surface-soft); border-color: #B9A8F0; color: var(--color-text); }
[data-theme="dark"] .btn-outline-primary:active { background-color: rgba(106, 56, 255, 0.20); color: var(--color-text); }
[data-theme="dark"] .btn-outline-secondary { color: var(--color-text-secondary); border-color: var(--color-border-strong); }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--color-surface-soft); color: var(--color-text); }
[data-theme="dark"] .btn-primary { box-shadow: var(--shadow-primary); }
[data-theme="dark"] .btn-link { color: var(--gl-link); }

[data-theme="dark"] .pagination .page-link { background-color: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] .pagination .page-link:hover { background-color: var(--color-surface-soft); color: var(--color-text); border-color: var(--color-border-strong); }
[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .pagination .page-item.disabled .page-link { color: var(--color-text-muted); background-color: transparent; }

[data-theme="dark"] .list-group-item { background-color: var(--color-surface-strong); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-theme="dark"] .progress { background-color: var(--color-surface-soft); }
[data-theme="dark"] .badge.bg-light { background-color: var(--color-surface-soft) !important; color: var(--color-text-secondary) !important; }

/* --- App components (site.css) --- */
[data-theme="dark"] .pf-action { background: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .pf-action:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); }
[data-theme="dark"] .pf-action-title { color: var(--color-text); }
[data-theme="dark"] .pf-action-sub { color: var(--color-text-muted); }
[data-theme="dark"] .pf-action-icon, [data-theme="dark"] .pf-action-arrow { color: #A78BFA; }
[data-theme="dark"] .pf-action-primary { background: var(--gl-gradient); }
[data-theme="dark"] .pf-action-primary .pf-action-icon, [data-theme="dark"] .pf-action-primary .pf-action-title,
[data-theme="dark"] .pf-action-primary .pf-action-arrow { color: #fff; }
[data-theme="dark"] .pf-action-platform { background: rgba(204, 122, 0, 0.10); border-color: rgba(244, 180, 0, 0.35); }
[data-theme="dark"] .pf-action-platform .pf-action-icon { color: #F4B400; }

[data-theme="dark"] .pf-auth { background: var(--gl-gradient-dark); }
[data-theme="dark"] .pf-auth-card { background: var(--color-surface-strong); border-color: var(--color-border); box-shadow: var(--shadow-card); }
[data-theme="dark"] .pf-auth-title { color: var(--color-text); }
[data-theme="dark"] .pf-auth-brand { color: var(--color-text); }

[data-theme="dark"] .gl-footer { background: var(--color-bg-elevated); }
[data-theme="dark"] .gl-footer-links a { color: var(--color-text-secondary); }
[data-theme="dark"] .gl-footer-links a:hover { color: #C4B5FD; }
[data-theme="dark"] .gl-footer-copy { color: var(--color-text-muted); }

[data-theme="dark"] .star-rating i { color: #4A5382; }
[data-theme="dark"] .star-rating i.active { color: #A78BFA; }
[data-theme="dark"] .performance-item, [data-theme="dark"] .corevalue-item { background-color: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .performance-item:hover, [data-theme="dark"] .corevalue-item:hover { background-color: #333C74; }
[data-theme="dark"] .performance-header:hover { background-color: var(--color-surface-soft); }
[data-theme="dark"] .performance-row { border-bottom-color: var(--color-border); }
[data-theme="dark"] .btn-icon-bullet { color: var(--color-text-muted); }
[data-theme="dark"] .btn-icon-bullet:hover { background-color: var(--color-surface-soft); color: #A78BFA; }
[data-theme="dark"] .btn-icon-bullet:hover i { color: #A78BFA; }
[data-theme="dark"] .pf-celebrate-card { background: var(--color-surface-strong); }
[data-theme="dark"] .pf-celebrate-details > div span { color: var(--color-text-muted); }
[data-theme="dark"] .pf-celebrate-details > div strong { color: var(--color-text); }
[data-theme="dark"] .pf-celebrate-details, [data-theme="dark"] .pf-celebrate-details > div { border-color: var(--color-border); }

/* --- Billing / plans (classes defined in the Billing view) --- */
[data-theme="dark"] .pf-usage-card { background: var(--color-surface-strong); border-color: var(--color-border); box-shadow: var(--shadow-card); }
[data-theme="dark"] .pf-usage-title, [data-theme="dark"] .pf-usage-count { color: var(--color-text); }
[data-theme="dark"] .pf-usage-limit, [data-theme="dark"] .pf-usage-sub { color: var(--color-text-muted); }
[data-theme="dark"] .pf-usage-note { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-usage-bar { background: var(--color-surface-soft); }
[data-theme="dark"] .pf-usage-pill { background: var(--color-surface-soft); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-theme="dark"] .pf-plan { background: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .pf-plan-name, [data-theme="dark"] .pf-plan-price { color: var(--color-text); }
[data-theme="dark"] .pf-plan-per, [data-theme="dark"] .pf-plan-tier { color: var(--color-text-muted); }
[data-theme="dark"] .pf-plan-positioning { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-plan-features li { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-plan-feature-off { color: var(--color-text-muted) !important; }
[data-theme="dark"] .pf-plan-chip { background: rgba(106, 56, 255, 0.22); color: #C4B5FD; }
[data-theme="dark"] .pf-plan-featured { border-color: var(--color-primary); }
[data-theme="dark"] .pf-quote { background: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .pf-quote-text { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-quote-author { color: var(--color-text-muted); }
[data-theme="dark"] .pf-carousel-dot { background: #3A4378; }
[data-theme="dark"] .pf-carousel-dot.active { background: #A78BFA; }
[data-theme="dark"] .pf-tech-badge { background: var(--color-surface-soft); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-theme="dark"] .pf-tech-badge i { color: #A78BFA; }
[data-theme="dark"] .pf-checkout { background: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .pf-checkout-summary { background: var(--color-surface-soft); border-color: var(--color-border); }
[data-theme="dark"] .pf-checkout-summary-plan { color: var(--color-text); }
[data-theme="dark"] .pf-checkout-label { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-checkout-trust li { color: var(--color-text-secondary); }
[data-theme="dark"] #cardElement.form-control { background-color: #ffffff; }

/* --- Create page toggle cards (classes defined in the Create view) --- */
[data-theme="dark"] .pf-toggle { background: var(--color-surface-strong); border-color: var(--color-border); }
[data-theme="dark"] .pf-toggle:hover { border-color: var(--color-border-strong); }
[data-theme="dark"] .pf-toggle-title { color: var(--color-text); }
[data-theme="dark"] .pf-toggle-sub { color: var(--color-text-muted); }
[data-theme="dark"] .pf-toggle-state { background: var(--color-surface-soft); color: var(--color-text-muted); }
[data-theme="dark"] .pf-toggle.active { border-color: var(--color-primary); background: linear-gradient(180deg, rgba(106,56,255,0.16) 0%, rgba(41,91,255,0.10) 100%); }
[data-theme="dark"] .pf-toggle.active .pf-toggle-icon { color: #A78BFA; }
[data-theme="dark"] .pf-toggle.active .pf-toggle-state { background: var(--color-primary); color: #fff; }
[data-theme="dark"] .pf-toggle-locked { background: rgba(106, 56, 255, 0.08); border-color: rgba(155, 123, 224, 0.4); }

/* --- Landing page (classes defined in the Home view) --- */
[data-theme="dark"] .pf-hero { background: var(--gl-gradient-dark); }
[data-theme="dark"] .pf-hero-bg {
    background: url('/images/GaliLuna-parallax-dark.png') center center / cover no-repeat,
                linear-gradient(135deg, #070A1E 0%, #1B1E4B 100%);
}
[data-theme="dark"] .pf-hero-scrim {
    background: radial-gradient(1100px 620px at 50% 44%, rgba(7, 10, 30, 0.74) 0%, rgba(11, 16, 40, 0.42) 55%, rgba(11, 16, 40, 0.08) 100%);
}
[data-theme="dark"] .pf-hero-content { color: #fff; }
[data-theme="dark"] .pf-hero-title { color: #fff; }
[data-theme="dark"] .pf-hero-accent {
    background: linear-gradient(135deg, #7EA0FF 0%, #C4B5FD 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .pf-hero-sub { color: rgba(255, 255, 255, 0.88); }
[data-theme="dark"] .pf-hero-trust { color: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .pf-hero-trust i { color: #2ED3C6; }
[data-theme="dark"] .pf-scroll-cue { color: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .pf-eyebrow, [data-theme="dark"] .pf-eyebrow-dark { color: #A78BFA; }
[data-theme="dark"] .pf-h2 { color: #fff; }
[data-theme="dark"] .pf-lead { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-section-alt { background: linear-gradient(180deg, #171D3C 0%, #191F40 100%); }
[data-theme="dark"] .pf-step, [data-theme="dark"] .pf-case, [data-theme="dark"] .pf-feature {
    background: var(--color-surface-strong); border-color: var(--color-border); box-shadow: var(--shadow-card);
}
[data-theme="dark"] .pf-step-title, [data-theme="dark"] .pf-feature-title { color: var(--color-text); }
[data-theme="dark"] .pf-step-text, [data-theme="dark"] .pf-feature-text, [data-theme="dark"] .pf-case-fix { color: var(--color-text-secondary); }
[data-theme="dark"] .pf-step-num { background: var(--gl-gradient); }
[data-theme="dark"] .pf-step-icon, [data-theme="dark"] .pf-feature-icon { color: #A78BFA; }
[data-theme="dark"] .pf-feature-icon { background: rgba(106, 56, 255, 0.15); }
[data-theme="dark"] .pf-case-pain { background: var(--color-surface-soft); border-left-color: var(--color-border-strong); color: var(--color-text-secondary); }
[data-theme="dark"] .pf-case-pain i { color: var(--color-text-muted); }
[data-theme="dark"] .pf-case-fix strong { color: var(--color-text); }
[data-theme="dark"] .pf-stat { color: #fff; }
[data-theme="dark"] .pf-stat-label { color: var(--color-text-muted); }
[data-theme="dark"] .pf-roadmap-pill { background: var(--color-surface-strong); border-color: var(--color-border); color: var(--color-text-secondary); }
[data-theme="dark"] .pf-roadmap-pill i { color: #A78BFA; }
[data-theme="dark"] .pf-billing-eyebrow { color: #A78BFA; }