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;
}
/* Crisp 8px corners: rounded enough to feel soft, square enough to feel premium.
   Deliberate pills (badges, chips, the notification counter) keep their 999px. */
.btn { font-family: "Poppins", "Inter", sans-serif; font-weight: 600; border-radius: 8px; }
.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. */
/* Explicit input size + natural swatch sizing: forcing width/height 100% down the
   swatch pseudo-elements collapses the swatch to nothing in current Chrome, leaving a
   white pill no matter what color is selected. */
/* Zero padding so the color fills the entire box edge to edge (no white frame), with the
   swatch radius matching the input's 12px border radius. The old width/height:100% chain
   collapsed the swatch entirely; natural sizing inside a flex wrapper fills reliably. */
/* The native swatch is hidden entirely: Chrome renders it as a misaligned or white pill
   depending on version. site.js paints the input's own background from its value instead,
   which fills the box edge to edge and follows the input's border radius exactly. */
.form-control-color { padding: 0; height: 38px; min-width: 52px; overflow: hidden; }
.form-control-color::-webkit-color-swatch-wrapper { opacity: 0; }
.form-control-color::-webkit-color-swatch { opacity: 0; }
.form-control-color::-moz-color-swatch { opacity: 0; }
.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; }
}

/* ===== Cookie consent banner ===== */
.gl-cookie-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1055;
    max-width: 900px; margin: 0 auto;
    background: #fff; border: 1px solid #E7EAF5; border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 16, 40, 0.18);
    padding: 1.1rem 1.3rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
}
.gl-cookie-banner-text { flex: 1 1 320px; color: #33475B; font-size: 0.9rem; line-height: 1.5; }
.gl-cookie-banner-text a { color: var(--gl-accent-ink); font-weight: 600; }
.gl-cookie-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
[data-theme="dark"] .gl-cookie-banner { background: var(--color-bg-elevated); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .gl-cookie-banner-text { color: var(--color-text-secondary); }

/* ===== 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: 8px; 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); }

/* Filled soft-purple action chip: for secondary actions that must be clearly visible
   (e.g. the image upload buttons on the Create page). */
.btn-soft-primary {
    background-color: #F1EBFF;
    border: 1px solid #C9B8F5;
    color: var(--gl-accent-ink);
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
    background-color: #E4D9FF;
    border-color: var(--gl-accent-ink);
    color: var(--gl-accent-ink);
    box-shadow: 0 4px 12px rgba(106, 56, 255, 0.15);
}
.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: #FBFAFF;
    border-color: #DED4F5;
    box-shadow: 0 6px 18px rgba(106, 56, 255, 0.08);
}
/* Left accent line on hover */
.section-card::before {
    content: ""; position: absolute; left: 0; top: 0;
    height: 100%; width: 0;
    background-color: var(--color-primary);
    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; }

/* ===== Cost comparison (Billing + landing page): rows slide in as they enter the viewport,
   and every price carries an alert treatment so the money side is impossible to miss. */
.pf-cost-group { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8A90A8; margin-bottom: 0.5rem; }
.pf-cost-row {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.5rem; margin: 0 -0.5rem 0.15rem;
    border-radius: 8px; border-left: 3px solid transparent;
    opacity: 0; transform: translateX(-14px);
    transition: opacity 0.45s ease, transform 0.45s ease, background 0.15s ease, border-color 0.15s ease;
}
.pf-cost-row.pf-in { opacity: 1; transform: none; }
.pf-cost-row:hover { background: #FDF3F4; border-left-color: #B02A37; }
.pf-cost-price {
    font-weight: 700; white-space: nowrap; color: #B02A37;
    background: #FDECEC; border-radius: 999px; padding: 2px 10px; font-size: 0.78rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pf-cost-row:hover .pf-cost-price { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(176, 42, 55, 0.12); }
.pf-cost-total { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-top: 0.6rem; font-size: 0.875rem; }
.pf-cost-price-total { animation: pfPriceAlert 2.2s ease-in-out infinite; font-size: 0.85rem; }
@keyframes pfPriceAlert {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176, 42, 55, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(176, 42, 55, 0); }
}
.pf-win-card { background: linear-gradient(180deg, #FDFCFF 0%, #F7F4FF 100%); }
.pf-win-row {
    padding: 0.35rem 0.5rem; margin: 0 -0.5rem 0.15rem;
    border-radius: 8px; border-left: 3px solid transparent;
    opacity: 0; transform: translateX(14px);
    transition: opacity 0.45s ease, transform 0.45s ease, background 0.15s ease, border-color 0.15s ease;
}
.pf-win-row.pf-in { opacity: 1; transform: none; }
.pf-win-row:hover { background: #EFFAF1; border-left-color: #1E7E34; }
.pf-win-price {
    font-weight: 800; white-space: nowrap; color: #1E7E34;
    background: #E3F5E7; border-radius: 999px; padding: 2px 12px; font-size: 0.85rem;
    animation: pfWinGlow 2.2s ease-in-out infinite;
}
@keyframes pfWinGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 126, 52, 0.35); }
    50% { box-shadow: 0 0 0 7px rgba(30, 126, 52, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-cost-row, .pf-win-row { opacity: 1; transform: none; transition: none; }
    .pf-cost-price-total, .pf-win-price { animation: none; }
}

/* Checked toggle buttons (btn-check radios like the focus selectors): brand gradient, not
   Bootstrap's stock blue. */
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary {
    background: var(--gl-gradient); background-color: var(--color-primary);
    border-color: transparent; color: #fff;
}
.btn-check:focus-visible + .btn-outline-primary { outline: 2px solid var(--color-primary); outline-offset: 2px; }

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

/* ===== ACTION TILES (home hub + shared) ===== */
/* Home hub section headers ("Campaigns", "Marketing intelligence", "Account & team"). */
.pf-hub-section {
    font-size: 0.8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gl-accent-ink); margin: 0.25rem 0 0.75rem;
}

.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); }
/* Flow-step mini panels (first-campaign modal): a vertical, linear sequence of hoverable
   cards connected by arrows, echoing the hub tiles. */
.pf-flow-step {
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: #FBFBFE; border: 1px solid #E7EAF5; border-radius: 12px; padding: 10px 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pf-flow-step:hover {
    transform: translateY(-2px); border-color: #B9A8F0; background: #fff;
    box-shadow: 0 10px 24px rgba(106, 56, 255, 0.14);
}
.pf-flow-num {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem; color: var(--gl-accent-ink);
    background: #F1EBFF; transition: background 0.15s ease, color 0.15s ease;
}
.pf-flow-step:hover .pf-flow-num { background: var(--gl-gradient); color: #fff; }
.pf-flow-arrow { text-align: center; color: #B9A8F0; line-height: 1; margin: 4px 0; }

/* Small "Step N" chip in hub tile titles: makes profile -> products -> strategy read as a sequence. */
.pf-step-badge {
    display: inline-block; vertical-align: 2px; margin-right: 8px; padding: 1px 9px;
    border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase; color: #fff; background: var(--gl-gradient);
}
.pf-step-badge-done { background: #1E7E34; }
/* A completed step tile: soft green so progress reads at a glance. */
.pf-action-done { background: #F2FAF4; border-color: #A8D5B3; }
.pf-action-done .pf-action-icon { color: #1E7E34; }
.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; }

/* Info icon that carries a tooltip instead of inline helper text. */
.pf-info { color: var(--gl-accent-ink); opacity: 0.7; cursor: help; font-size: 0.9em; }
.pf-info:hover { opacity: 1; }

/* ===== Credit chip: the price tag that sits next to every AI action button ===== */
.pf-credit-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F1EBFF;
    color: var(--gl-accent-ink);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 8px;
}

/* ===== Premium modal shell (pfConfirm / pfLimit / pfInfo in _Layout) =====
   One quiet surface: soft icon orb, Poppins title, layered shadow, springy entrance.
   No colored header bar - the institution's brand color lives on the primary button. */
.pf-modal .modal-content {
    border: none;
    border-radius: 24px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 8px 24px rgba(11, 16, 40, 0.10), 0 32px 90px rgba(11, 16, 40, 0.28);
}
.pf-modal-orb {
    width: 58px; height: 58px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; color: var(--gl-accent-ink);
    background: linear-gradient(135deg, #F3EDFF 0%, #E6DBFF 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(106, 56, 255, 0.14);
    margin-bottom: 1.1rem;
}
.pf-modal-title { font-size: 1.15rem; margin-bottom: 0.45rem; }
.pf-modal .modal-body { padding: 0; color: var(--gl-body); font-size: 0.95rem; }
.pf-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.6rem; flex-wrap: wrap; }
.pf-modal-actions .btn { min-width: 96px; }
.modal-backdrop.show { opacity: 0.55; }
.modal.fade.pf-modal .modal-dialog { transform: translateY(16px) scale(0.97); transition: transform 0.28s cubic-bezier(0.22, 1.1, 0.36, 1); }
.modal.show.pf-modal .modal-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .modal.fade.pf-modal .modal-dialog { transition: none; transform: none; }
}

/* =============================================================================================
   PREMIUM LAYER
   The design language proven on the welcome flow, applied to the shared components every page
   already uses. Lives last in the file so it wins without !important, and touches presentation
   only (radius, depth, motion, rhythm) so no layout shifts underneath a page.

   The rules of the language:
     - Depth comes from large, soft, low-opacity shadows, never from heavy borders.
     - Motion is a REACTION (hover, focus), never decoration that runs on its own.
     - Corners are generous: 20px on cards, 999px on primary actions.
     - Focus is always visible, always the brand accent, never a browser default.
   ============================================================================================= */

/* ---------- Surfaces ---------- */
.card, .section-card {
    border-radius: 20px;
    border-color: #ECEEF7;
    box-shadow: 0 1px 2px rgba(11, 16, 40, 0.03), 0 12px 32px rgba(11, 16, 40, 0.05);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.section-card:hover {
    transform: translateY(-2px);
    border-color: #DCD3F7;
    box-shadow: 0 2px 4px rgba(11, 16, 40, 0.04), 0 22px 48px rgba(106, 56, 255, 0.10);
}
/* The old left accent bar reads like an admin panel; depth carries the hover instead. */
.section-card::before { display: none; }
.card-body { padding: 1.6rem 1.75rem; }

/* ---------- Type ---------- */
h1, .h1 { letter-spacing: -0.03em; }
h2, .h2, h3, .h3 { letter-spacing: -0.022em; }
.card-body p:not(.small):not(.mb-0) { line-height: 1.65; }

/* ---------- Primary action ---------- */
/* Pill, gradient, and a shine that only sweeps on hover: alive when engaged, calm otherwise. */
.btn-primary {
    position: relative; overflow: hidden;
    border-radius: 999px; font-weight: 700; letter-spacing: 0.005em;
    padding: 0.55rem 1.4rem;
    background: linear-gradient(100deg, #4E5BFF, #8F6BFF, #B15BFF, #8F6BFF, #4E5BFF);
    background-size: 200% 100%;
    box-shadow: 0 10px 24px rgba(106, 56, 255, 0.26);
}
.btn-primary::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 34%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: translateX(0); opacity: 0; transition: opacity 0.2s ease;
}
.btn-primary:hover::after { opacity: 1; animation: pfSheen 0.9s ease-out; }
@keyframes pfSheen { from { left: -60%; } to { left: 130%; } }
.btn-primary:hover, .btn-primary:focus {
    filter: none; transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 16px 36px rgba(106, 56, 255, 0.36);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.7s ease;
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(106, 56, 255, 0.24); }
.btn-primary.btn-lg { padding: 0.85rem 2.2rem; font-size: 1.03rem; }
.btn-primary.btn-sm { padding: 0.36rem 1rem; box-shadow: 0 6px 16px rgba(106, 56, 255, 0.2); }

/* ---------- Secondary actions ---------- */
.btn-outline-primary, .btn-outline-danger, .btn-soft-primary {
    border-radius: 999px; font-weight: 600;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(106, 56, 255, 0.14); }
.btn-outline-danger:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(176, 42, 55, 0.16); }

/* ---------- Fields ---------- */
.form-control, .form-select {
    border-radius: 14px; border-color: #E4E7F3; padding: 0.62rem 0.95rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--gl-accent-ink);
    box-shadow: 0 0 0 4px rgba(106, 56, 255, 0.12);
}
.form-control::placeholder { color: #A6ADC8; }
.form-label { font-weight: 600; color: var(--gl-heading); }
/* Our input groups hold a .invalid-feedback div, so Bootstrap sees the field as "not the last
   child" and squares its right corners. These selectors deliberately mirror Bootstrap's own
   specificity (0,6,0) and sit later in the file, so the outer edge stays round. */
.input-group:not(.has-validation) > .form-control:not(:first-child):not(:last-child):not(.dropdown-toggle),
.input-group:not(.has-validation) > .form-select:not(:first-child):not(:last-child):not(.dropdown-toggle),
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-right-radius: 14px; border-bottom-right-radius: 14px;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group > .form-control:first-child,
.input-group > .form-select:first-child { border-radius: 14px 0 0 14px; }
.input-group > .input-group-text:first-child { border-radius: 14px 0 0 14px; border-color: #E4E7F3; }
.input-group > .input-group-text:last-child { border-radius: 0 14px 14px 0; border-color: #E4E7F3; }
/* The color picker keeps its own square-ish shape (site.js paints its background). */
.form-control-color { border-radius: 12px; }

/* ---------- Chips and badges ---------- */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Tables ---------- */
.table thead th {
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8A92AD; border-bottom-color: #EDEFF7; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.table > :not(caption) > * > * { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.table tbody tr { transition: background-color 0.14s ease; }

/* ---------- Modals ---------- */
.modal-content { border-radius: 22px; border: 0; box-shadow: 0 30px 80px rgba(11, 16, 40, 0.22); }

/* ---------- Page rhythm ---------- */
/* Room to breathe above the footer on every page, matching the dossier and welcome flow. */
main > .container, main > .container-fluid { padding-bottom: 72px; }

/* ---------- Alerts ---------- */
.alert { border-radius: 16px; border: 0; box-shadow: 0 8px 24px rgba(11, 16, 40, 0.05); }

/* ---------- Accessibility and motion ---------- */
:focus-visible { outline: 2px solid var(--gl-accent-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .card, .section-card, .btn-primary, .btn-outline-primary, .btn-outline-danger,
    .form-control, .form-select, .table tbody tr { transition: none; }
    .section-card:hover, .btn-primary:hover, .btn-outline-primary:hover, .btn-outline-danger:hover { transform: none; }
    .btn-primary:hover::after { animation: none; }
}