/* ==========================================================================
   জ্ঞানচর্চা (GyanChorcha) — "Notebook" Design System (Bootstrap 5 Companion)
   --------------------------------------------------------------------------
   A warm, scholarly theme built to feel like a well-kept study notebook:
   cream paper stock, deep ink-green, gold-leaf accents, hand-ruled lines and
   Noto Serif Bengali headings — paired with a matching "night desk" dark mode.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Type */
    --gc-font-bangla: 'Hind Siliguri', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --gc-font-heading: 'Noto Serif Bengali', 'Hind Siliguri', Georgia, serif;
    --gc-font-ui: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif;

    /* Brand (theme-aware values live in the blocks below) */
    --gc-primary: #0e5c3f;
    --gc-primary-hover: #0a4531;
    --gc-primary-light: #e6efe9;
    --gc-primary-glow: rgba(14, 92, 63, 0.35);
    --gc-on-primary: #ffffff;

    --gc-blue: #1d4ed8;
    --gc-blue-hover: #1a44bd;
    --gc-blue-light: #e8eefc;
    --gc-blue-glow: rgba(29, 78, 216, 0.32);

    --gc-cyan: #0d6f85;
    --gc-cyan-hover: #0a5b6d;
    --gc-cyan-light: #e2f2f6;
    --gc-cyan-glow: rgba(13, 111, 133, 0.3);

    --gc-magenta: #b0295f;
    --gc-magenta-hover: #94204f;
    --gc-magenta-light: #fbeaf1;
    --gc-magenta-glow: rgba(176, 41, 95, 0.28);

    --gc-gold: #a8761a;
    --gc-gold-hover: #8c6214;
    --gc-gold-light: #fbf2dc;
    --gc-gold-bright: #f5c451;   /* for gold text on dark surfaces */
    --gc-gold-text: #8c6214;     /* gold text on cream — 4.8:1 */
    --gc-cyan-bright: #4bb8d0;   /* info text on the always-dark phone screens */

    --gc-navy: #0d1a13;          /* deep ink used by .text-navy headings */

    /* RGB triplets — lets inline styles keep their alpha channel:
       rgba(var(--gc-primary-rgb), 0.12) */
    --gc-primary-rgb: 14, 92, 63;
    --gc-blue-rgb: 29, 78, 216;
    --gc-cyan-rgb: 13, 111, 133;
    --gc-gold-rgb: 168, 118, 26;

    /* Palette accents (theme-aware) */
    --gc-accent-amber: #a8761a;
    --gc-accent-emerald: #0f7a52;
    --gc-accent-purple: #6b46c1;
    --gc-accent-rose: #c2185b;

    /* Semantic gradients (stable across themes — always carry white text) */
    --gc-grad-primary: linear-gradient(135deg, #14795a 0%, #0e5c3f 100%);
    --gc-grad-blue: linear-gradient(135deg, #2f61e8 0%, #1d4ed8 100%);
    --gc-grad-announce: linear-gradient(90deg, #0b3d2e 0%, #0e5c3f 50%, #0b3d2e 100%);
    --gc-grad-cta: linear-gradient(135deg, #0e5c3f 0%, #0b3d2e 55%, #14795a 100%);

    /* Paper grain — baked at 5% so it reads as stock texture, not static */
    --gc-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

    /* Radii */
    --gc-radius-sm: 0.5rem;
    --gc-radius-md: 0.85rem;
    --gc-radius-lg: 1.15rem;
    --gc-radius-xl: 1.65rem;
    --gc-radius-full: 9999px;

    /* Transitions */
    --gc-transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --gc-transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    --gc-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Daylight desk — cream paper, ink green, gold leaf */
[data-bs-theme="light"] {
    --gc-bg-body: #f6f1e4;
    --gc-bg-card: #fffdf6;
    --gc-bg-card-subtle: #f1ecdd;
    --gc-text-title: #12241b;
    --gc-text-body: #33463a;
    --gc-text-muted: #5c6e61;   /* 4.8:1 on paper (was #6d7f72 → 3.8:1) */
    --gc-border: #e3dbc7;
    --gc-border-subtle: #eee7d5;

    --gc-nav-bg: rgba(250, 247, 238, 0.9);
    --gc-nav-border: rgba(227, 219, 199, 0.85);

    --gc-primary: #0e5c3f;
    --gc-primary-hover: #0a4531;
    --gc-primary-light: #e6efe9;
    --gc-primary-glow: rgba(14, 92, 63, 0.35);
    --gc-on-primary: #ffffff;

    --gc-blue: #1d4ed8;
    --gc-blue-hover: #1a44bd;
    --gc-blue-light: #e8eefc;
    --gc-blue-glow: rgba(29, 78, 216, 0.32);

    --gc-cyan: #0d6f85;
    --gc-cyan-hover: #0a5b6d;
    --gc-cyan-light: #e2f2f6;
    --gc-cyan-glow: rgba(13, 111, 133, 0.3);

    --gc-magenta: #b0295f;
    --gc-magenta-light: #fbeaf1;
    --gc-gold: #a8761a;
    --gc-gold-hover: #8c6214;
    --gc-gold-light: #fbf2dc;
    --gc-navy: #0d1a13;

    --gc-accent-amber: #a8761a;
    --gc-accent-emerald: #0f7a52;
    --gc-accent-purple: #6b46c1;
    --gc-accent-rose: #c2185b;

    --gc-primary-rgb: 14, 92, 63;
    --gc-blue-rgb: 29, 78, 216;
    --gc-cyan-rgb: 13, 111, 133;
    --gc-gold-rgb: 168, 118, 26;

    /* Ruled paper + grain for hero bands */
    --gc-hero-gradient:
        var(--gc-paper-noise),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(14, 92, 63, 0.055) 31px, rgba(14, 92, 63, 0.055) 32px),
        radial-gradient(circle at 12% 18%, rgba(14, 92, 63, 0.09) 0%, transparent 45%),
        radial-gradient(circle at 88% 22%, rgba(201, 162, 39, 0.13) 0%, transparent 45%),
        radial-gradient(circle at 55% 88%, rgba(13, 111, 133, 0.07) 0%, transparent 50%);

    --gc-card-shadow: 0 1px 2px rgba(52, 43, 20, 0.05), 0 8px 20px -12px rgba(52, 43, 20, 0.22);
    --gc-card-hover-shadow: 0 2px 4px rgba(52, 43, 20, 0.06), 0 22px 38px -16px rgba(11, 61, 46, 0.3);
    --gc-badge-bg: rgba(14, 92, 63, 0.1);

    /* Tint helpers used by inline markup */
    --gc-primary-tint: rgba(14, 92, 63, 0.1);
    --gc-primary-tint-soft: rgba(14, 92, 63, 0.055);
    --gc-primary-border: rgba(14, 92, 63, 0.35);
    --gc-blue-tint: rgba(29, 78, 216, 0.1);
    --gc-amber-tint: rgba(168, 118, 26, 0.12);
    --gc-purple-tint: rgba(107, 70, 193, 0.11);
    --gc-rose-tint: rgba(194, 24, 91, 0.1);
    --gc-emerald-tint: rgba(15, 122, 82, 0.11);
    --gc-gold-tint: rgba(168, 118, 26, 0.14);
    --gc-gold-border: rgba(168, 118, 26, 0.38);
    --gc-cyan-tint: rgba(13, 111, 133, 0.1);
    --gc-grad-tint: linear-gradient(135deg, rgba(14, 92, 63, 0.09) 0%, rgba(201, 162, 39, 0.13) 100%);

    /* Paper grain tint over the whole page */
    --gc-rule-color: rgba(14, 92, 63, 0.055);

    /* Bootstrap bridge */
    --bs-body-bg: #f6f1e4;
    --bs-body-color: #33463a;
    --bs-body-bg-rgb: 246, 241, 228;
    --bs-body-color-rgb: 51, 70, 58;
    --bs-emphasis-color: #12241b;
    --bs-heading-color: #12241b;
    --bs-secondary-color: #5c6e61;
    --bs-secondary-rgb: 92, 110, 97;
    --bs-secondary: #5c6e61;
    --bs-tertiary-color: #7d8f82;
    --bs-tertiary-bg: #f1ecdd;
    --bs-tertiary-bg-rgb: 241, 236, 221;
    --bs-secondary-bg: #e9e3d1;
    --bs-border-color: #e3dbc7;
    --bs-border-color-translucent: rgba(70, 58, 30, 0.2);
    --bs-link-color: #0e5c3f;
    --bs-link-hover-color: #0a4531;
    --bs-link-hover-color-rgb: 10, 69, 49;
    --bs-link-color-rgb: 14, 92, 63;
    --bs-focus-ring-color: rgba(14, 92, 63, 0.35);
    --bs-focus-ring-rgb: 14, 92, 63;

    --bs-primary: #0e5c3f;
    --bs-primary-rgb: 14, 92, 63;
    --bs-primary-bg-subtle: #e6efe9;
    --bs-primary-bg-subtle-rgb: 230, 239, 233;
    --bs-primary-border-subtle: #bcd6c9;
    --bs-primary-text-emphasis: #0a4531;

    --bs-success: #0d6b4a;
    --bs-success-rgb: 13, 107, 74;
    --bs-warning: #a8761a;
    --bs-warning-rgb: 168, 118, 26;
    --bs-danger: #b3261e;
    --bs-danger-rgb: 179, 38, 30;
    --bs-info: #0d6f85;
    --bs-info-rgb: 13, 111, 133;
    --bs-light: #f1ecdd;
    --bs-light-rgb: 241, 236, 221;
    --bs-dark: #07110c;         /* deep ink; 4.8:1 on the gold fill */
    --bs-dark-rgb: 7, 17, 12;
}

/* Night desk — dark leather cover, chalk-green ink, brass accents */
[data-bs-theme="dark"] {
    --gc-bg-body: #10160f;
    --gc-bg-card: #171e17;
    --gc-bg-card-subtle: #1d251d;
    --gc-text-title: #f1efe3;
    --gc-text-body: #c7cfc6;
    --gc-text-muted: #909c92;
    --gc-border: #2a352c;
    --gc-border-subtle: #222a22;

    --gc-nav-bg: rgba(16, 22, 15, 0.92);
    --gc-nav-border: rgba(42, 53, 44, 0.85);

    --gc-primary: #3fbd8a;
    --gc-primary-hover: #5ecb9c;
    --gc-primary-light: rgba(63, 189, 138, 0.14);
    --gc-primary-glow: rgba(63, 189, 138, 0.38);
    --gc-on-primary: #06281c;

    --gc-blue: #7aa7f0;
    --gc-blue-hover: #97baf5;
    --gc-blue-light: rgba(122, 167, 240, 0.16);
    --gc-blue-glow: rgba(122, 167, 240, 0.34);

    --gc-cyan: #4bb8d0;
    --gc-cyan-hover: #6fcade;
    --gc-cyan-light: rgba(75, 184, 208, 0.16);
    --gc-cyan-glow: rgba(75, 184, 208, 0.32);

    --gc-magenta: #ef6a9d;
    --gc-magenta-light: rgba(239, 106, 157, 0.16);
    --gc-gold: #e6b54a;
    --gc-gold-hover: #f0c86b;
    --gc-gold-light: rgba(230, 181, 74, 0.15);
    --gc-gold-bright: #f5c451;
    --gc-gold-text: #e6b54a;     /* gold text on the night-desk ground */

    --gc-accent-amber: #e6b54a;
    --gc-accent-emerald: #3fbd8a;
    --gc-accent-purple: #a78bfa;
    --gc-accent-rose: #fb7185;

    --gc-primary-rgb: 63, 189, 138;
    --gc-blue-rgb: 122, 167, 240;
    --gc-cyan-rgb: 75, 184, 208;
    --gc-gold-rgb: 230, 181, 74;

    --gc-hero-gradient:
        var(--gc-paper-noise),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(63, 189, 138, 0.05) 31px, rgba(63, 189, 138, 0.05) 32px),
        radial-gradient(circle at 12% 18%, rgba(63, 189, 138, 0.1) 0%, transparent 45%),
        radial-gradient(circle at 88% 22%, rgba(230, 181, 74, 0.11) 0%, transparent 45%),
        radial-gradient(circle at 55% 88%, rgba(75, 184, 208, 0.07) 0%, transparent 50%);

    --gc-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
    --gc-card-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 42px -18px rgba(0, 0, 0, 0.85);
    --gc-badge-bg: rgba(63, 189, 138, 0.15);

    --gc-primary-tint: rgba(63, 189, 138, 0.15);
    --gc-primary-tint-soft: rgba(63, 189, 138, 0.09);
    --gc-primary-border: rgba(63, 189, 138, 0.4);
    --gc-blue-tint: rgba(122, 167, 240, 0.15);
    --gc-amber-tint: rgba(230, 181, 74, 0.16);
    --gc-purple-tint: rgba(167, 139, 250, 0.16);
    --gc-rose-tint: rgba(251, 113, 133, 0.16);
    --gc-emerald-tint: rgba(63, 189, 138, 0.16);
    --gc-gold-tint: rgba(230, 181, 74, 0.17);
    --gc-gold-border: rgba(230, 181, 74, 0.45);
    --gc-cyan-tint: rgba(75, 184, 208, 0.15);
    --gc-grad-tint: linear-gradient(135deg, rgba(63, 189, 138, 0.13) 0%, rgba(230, 181, 74, 0.14) 100%);

    --gc-rule-color: rgba(63, 189, 138, 0.05);

    --bs-body-bg: #10160f;
    --bs-body-color: #c7cfc6;
    --bs-body-bg-rgb: 16, 22, 15;
    --bs-body-color-rgb: 199, 207, 198;
    --bs-emphasis-color: #f1efe3;
    --bs-heading-color: #f1efe3;
    --bs-secondary-color: #909c92;
    --bs-secondary-rgb: 167, 179, 169;
    --bs-secondary: #a7b3a9;
    --bs-tertiary-color: #849087;
    --bs-tertiary-bg: #1d251d;
    --bs-tertiary-bg-rgb: 29, 37, 29;
    --bs-secondary-bg: #232b23;
    --bs-border-color: #2a352c;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.14);
    --bs-link-color: #5ecb9c;
    --bs-link-hover-color: #83dcb5;
    --bs-link-color-rgb: 94, 203, 156;
    --bs-link-hover-color-rgb: 131, 220, 181;
    --bs-focus-ring-color: rgba(63, 189, 138, 0.45);
    --bs-focus-ring-rgb: 63, 189, 138;

    --bs-primary: #3fbd8a;
    --bs-primary-rgb: 63, 189, 138;
    --bs-primary-bg-subtle: #16281f;
    --bs-primary-bg-subtle-rgb: 22, 40, 31;
    --bs-primary-border-subtle: #27543f;
    --bs-primary-text-emphasis: #6ed3a8;

    --bs-success: #3fbd8a;
    --bs-success-rgb: 63, 189, 138;
    --bs-warning: #e6b54a;
    --bs-warning-rgb: 230, 181, 74;
    --bs-danger: #e4675f;
    --bs-danger-rgb: 228, 103, 95;
    --bs-info: #4bb8d0;
    --bs-info-rgb: 75, 184, 208;
    --bs-light: #1d251d;
    --bs-light-rgb: 29, 37, 29;
    --bs-dark: #f1efe3;
    --bs-dark-rgb: 241, 239, 227;
}

/* --------------------------------------------------------------------------
   2. Base Styles & Global Resets
   -------------------------------------------------------------------------- */
body {
    font-family: var(--gc-font-bangla);
    background-color: var(--gc-bg-body);
    background-image: var(--gc-paper-noise);
    background-repeat: repeat;
    color: var(--gc-text-body);
    letter-spacing: -0.005em;
    overflow-x: hidden;
    transition: background-color var(--gc-transition-smooth), color var(--gc-transition-smooth);
}

h1, h2, h3, h4, h5, h6, .gc-heading,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--gc-font-heading);
    color: var(--gc-text-title);
    letter-spacing: -0.015em;
    font-weight: 700;
}

h1, h2, h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }

a {
    text-decoration-color: rgba(var(--bs-link-color-rgb), 0.35);
    text-underline-offset: 3px;
}

::selection {
    background: var(--gc-primary);
    color: var(--gc-on-primary);
}

strong, b { font-weight: 700; }

/* --------------------------------------------------------------------------
   3. Custom Typography & Gradients
   -------------------------------------------------------------------------- */
.gc-gradient-text-orange {
    background: linear-gradient(135deg, #14795a 0%, #0e5c3f 45%, #c9a227 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gc-gradient-text-brand {
    background: linear-gradient(135deg, #0e5c3f 0%, #14795a 50%, #c9a227 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gc-gradient-text-cyan {
    background: linear-gradient(135deg, #0d6f85 0%, #12889f 60%, #0e5c3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gc-gradient-text-blue {
    background: linear-gradient(135deg, #2f61e8 0%, #1d4ed8 55%, #0e5c3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.gc-navbar {
    background-color: var(--gc-nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gc-nav-border);
    transition: all var(--gc-transition-smooth);
}

.gc-navbar .navbar-brand {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-family: var(--gc-font-heading);
}

.gc-navbar-brand-img {
    height: 54px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
@media (max-width: 767.98px) {
    .gc-navbar-brand-img {
        height: 44px;
        max-width: 145px;
    }
}
[data-bs-theme="dark"] .gc-navbar-brand-img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.gc-navbar-brand-logo-inner {
    width: 100%;
    height: 100%;
    background-color: var(--gc-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gc-gold-bright);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    font-family: var(--gc-font-heading);
}

.gc-navbar .nav-link {
    color: var(--gc-text-title) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 0.95rem !important;
    border-radius: var(--gc-radius-md);
    transition: all var(--gc-transition-fast);
    position: relative;
}

.gc-navbar .nav-link:hover {
    color: var(--gc-primary) !important;
    background-color: var(--gc-badge-bg);
    transform: translateY(-1px);
}

.gc-navbar .nav-link.active {
    color: var(--gc-primary) !important;
    font-weight: 700;
}

.gc-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gc-primary), var(--gc-gold));
}

/* Dropdown toggle underline adjust so it doesn't collide with the caret */
.gc-navbar .dropdown-toggle.active::after {
    display: none !important;
}

/* Enable smooth hover dropdown on desktop (992px+) while keeping click on mobile */
@media (min-width: 992px) {
    .gc-navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        animation: gcDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes gcDropdownFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.gc-btn-primary {
    background: var(--gc-primary);
    color: var(--gc-on-primary) !important;
    border: 1px solid var(--gc-primary);
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    border-radius: var(--gc-radius-full);
    box-shadow: 0 10px 22px -8px var(--gc-primary-glow);
    transition: all var(--gc-transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}
.gc-btn-primary:hover, .gc-btn-primary:focus {
    transform: translateY(-2px);
    background: var(--gc-primary-hover);
    border-color: var(--gc-primary-hover);
    box-shadow: 0 14px 26px -8px var(--gc-primary-glow);
    color: var(--gc-on-primary) !important;
}

.gc-btn-cyan {
    background: var(--gc-cyan);
    color: #ffffff !important;
    border: 1px solid var(--gc-cyan);
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    border-radius: var(--gc-radius-full);
    box-shadow: 0 10px 22px -8px var(--gc-cyan-glow);
    transition: all var(--gc-transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}
.gc-btn-cyan:hover, .gc-btn-cyan:focus {
    transform: translateY(-2px);
    background: var(--gc-cyan-hover);
    border-color: var(--gc-cyan-hover);
    box-shadow: 0 14px 26px -8px var(--gc-cyan-glow);
    color: #ffffff !important;
}

.gc-btn-blue {
    background: var(--gc-grad-blue);
    color: #ffffff !important;
    border: 1px solid var(--gc-blue);
    font-weight: 700;
    padding: 0.75rem 1.6rem;
    border-radius: var(--gc-radius-full);
    box-shadow: 0 10px 22px -8px var(--gc-blue-glow);
    transition: all var(--gc-transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}
.gc-btn-blue:hover, .gc-btn-blue:focus {
    transform: translateY(-2px);
    background: var(--gc-blue-hover);
    border-color: var(--gc-blue-hover);
    box-shadow: 0 14px 26px -8px var(--gc-blue-glow);
    color: #ffffff !important;
}

.gc-btn-outline {
    background-color: transparent;
    color: var(--gc-primary) !important;
    border: 1.5px solid var(--gc-primary-border);
    font-weight: 700;
    padding: 0.7rem 1.5rem;
    border-radius: var(--gc-radius-full);
    transition: all var(--gc-transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gc-btn-outline:hover {
    border-color: var(--gc-primary);
    color: var(--gc-primary) !important;
    background-color: var(--gc-badge-bg);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Hero Section — ruled notebook page
   -------------------------------------------------------------------------- */
.gc-hero-section {
    position: relative;
    background-color: var(--gc-bg-body);
    background-image: var(--gc-hero-gradient);
    overflow: hidden;
}

/* Inner-page hero band: the same ruled notebook paper as the home hero */
.gc-page-hero {
    position: relative;
    background-color: var(--gc-bg-card-subtle);
    background-image: var(--gc-hero-gradient);
    overflow: hidden;
}

/* Auth/centered hero: the same ruled notebook paper as the home hero, but
   self-contained so it works on any layout (master or guest) */
.gc-auth-hero {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    background-color: var(--gc-bg-body);
    background-image: var(--gc-hero-gradient);
    overflow: hidden;
}

.gc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    border-radius: var(--gc-radius-full);
    background-color: var(--gc-badge-bg);
    border: 1px solid var(--gc-primary-border);
    color: var(--gc-primary);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px var(--gc-primary-glow);
}

.gc-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ef4444;
    animation: gcPulse 1.8s infinite ease-in-out;
}

@keyframes gcPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* --------------------------------------------------------------------------
   7. Cards (index cards with a gold/green tab rule)
   -------------------------------------------------------------------------- */
.gc-card {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-card-shadow);
    transition: all var(--gc-transition-smooth);
    position: relative;
    overflow: hidden;
}
.gc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(14, 92, 63, 0.35), rgba(201, 162, 39, 0.4));
    transition: background var(--gc-transition-smooth);
    z-index: 1;
}
.gc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gc-card-hover-shadow);
    border-color: var(--gc-primary-border);
}
.gc-card:hover::before {
    background: linear-gradient(90deg, var(--gc-primary), var(--gc-gold));
}

/* Special Featured Card (e.g. Popular Pricing Tier) */
.gc-card-popular {
    border: 2px solid var(--gc-primary) !important;
    background-color: var(--gc-bg-card);
    box-shadow: 0 16px 36px -10px var(--gc-primary-glow);
    transform: scale(1.02);
    /* the "most popular" badge straddles the top edge, so it must not be clipped */
    overflow: visible;
}
.gc-card-popular:hover {
    transform: scale(1.04) translateY(-4px);
}

/* KPI Counter Card */
.gc-kpi-card {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1.4rem 1rem;
    text-align: center;
    box-shadow: var(--gc-card-shadow);
    transition: all var(--gc-transition-smooth);
}
.gc-kpi-card:hover {
    transform: translateY(-4px);
    border-color: var(--gc-primary);
}
.gc-kpi-number {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: var(--gc-font-heading);
    color: var(--gc-text-title);
}

/* Step Workflow Card */
.gc-step-number {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 auto 1.25rem;
    font-family: var(--gc-font-heading);
    transition: transform var(--gc-transition-bounce);
}
.gc-card:hover .gc-step-number {
    transform: scale(1.15) rotate(4deg);
}

/* --------------------------------------------------------------------------
   8. Ticker / Marquee Stream
   -------------------------------------------------------------------------- */
.gc-ticker-container {
    background-color: var(--gc-bg-card-subtle);
    border-top: 1px solid var(--gc-border);
    border-bottom: 1px solid var(--gc-border);
    padding: 0.65rem 0;
    overflow: hidden;
}

@keyframes gcMarquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.gc-ticker-track {
    display: flex;
    width: max-content;
    animation: gcMarquee 35s linear infinite;
}
.gc-ticker-track:hover {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   9. Accordion Polish
   -------------------------------------------------------------------------- */
.gc-accordion .accordion-item {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-md) !important;
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: border-color var(--gc-transition-fast), box-shadow var(--gc-transition-fast);
}
.gc-accordion .accordion-item:hover {
    border-color: var(--gc-primary-border);
}
.gc-accordion .accordion-button {
    background-color: transparent;
    color: var(--gc-text-title);
    font-weight: 700;
    font-size: 1.05rem;
    font-family: var(--gc-font-heading);
    padding: 1.2rem 1.4rem;
    box-shadow: none !important;
}
.gc-accordion .accordion-button:not(.collapsed) {
    color: var(--gc-primary);
    background-color: var(--gc-badge-bg);
    box-shadow: none !important;
}
.gc-accordion .accordion-button::after {
    background-image: none;
    content: '+';
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gc-font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gc-primary);
    transition: transform var(--gc-transition-fast);
}
.gc-accordion .accordion-button:not(.collapsed)::after {
    content: '\2212';
    transform: none;
}
.gc-accordion .accordion-body {
    color: var(--gc-text-body);
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 0 1.4rem 1.25rem;
}

/* --------------------------------------------------------------------------
   10. App Download Banner (cloth-bound book cover)
   -------------------------------------------------------------------------- */
.gc-download-banner {
    position: relative;
    background: linear-gradient(135deg, #06170f 0%, #0b2f21 50%, #061310 100%);
    border-radius: var(--gc-radius-xl);
    padding: 4rem 2rem;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(4, 20, 13, 0.55);
    border: 1px solid rgba(245, 196, 81, 0.22);
}
.gc-download-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 196, 81, 0.22) 0%, transparent 70%);
    pointer-events: none;
}
.gc-download-banner::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 189, 138, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.gc-store-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--gc-radius-md);
    padding: 0.65rem 1.3rem;
    color: #ffffff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    transition: all var(--gc-transition-fast);
}
.gc-store-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    border-color: var(--gc-gold-bright);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.gc-footer {
    background-color: #07160f;
    color: #a9b8ac;
    border-top: 1px solid #14302440;
    font-size: 0.92rem;
}
.gc-footer a:not(.gc-social-btn) {
    color: #a9b8ac;
    text-decoration: none;
    transition: color var(--gc-transition-fast), transform var(--gc-transition-fast);
    display: inline-block;
}
.gc-footer a:not(.gc-social-btn):hover {
    color: var(--gc-gold-bright);
    transform: translateX(3px);
}
.gc-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #e5ede7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    line-height: 1;
    padding: 0 !important;
    margin: 0;
    text-decoration: none !important;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.gc-social-btn svg {
    display: block;
    margin: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.gc-social-btn:hover {
    background: linear-gradient(135deg, var(--gc-primary), #ff8c3a);
    border-color: transparent;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(254, 114, 18, 0.35);
}
.gc-social-btn:hover svg {
    transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   12. Responsive Tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .gc-kpi-number {
        font-size: 1.75rem;
    }
    .gc-download-banner {
        padding: 2.5rem 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   13. User Dashboard Specific Styles
   -------------------------------------------------------------------------- */
.gc-dash-profile-card {
    background: linear-gradient(135deg, #0a1f16 0%, #123529 55%, #1a4a37 100%) !important;
    border-radius: var(--gc-radius-lg);
    box-shadow: 0 16px 36px -12px rgba(4, 20, 13, 0.6);
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(245, 196, 81, 0.25) !important;
}
.gc-dash-profile-card * {
    color: #ffffff;
}
.gc-dash-profile-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(245, 196, 81, 0.26) 0%, transparent 70%);
    pointer-events: none;
}
.gc-dash-avatar {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #14795a 0%, #0b3d2e 100%) !important;
    color: #ffffff !important;
    font-size: 2.1rem !important;
    font-weight: 800;
    font-family: var(--gc-font-heading);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3.5px solid rgba(245, 196, 81, 0.55) !important;
    box-shadow: 0 10px 24px -6px rgba(4, 20, 13, 0.7);
    flex-shrink: 0;
}
.gc-dash-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--gc-radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f1f5f9 !important;
    backdrop-filter: blur(8px);
    text-decoration: none;
    transition: all var(--gc-transition-fast);
}
.gc-dash-chip:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.gc-dash-metric-card {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1.35rem;
    transition: all var(--gc-transition-smooth);
    box-shadow: var(--gc-card-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.gc-dash-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gc-card-hover-shadow);
    border-color: var(--gc-primary-border);
}
.gc-dash-icon-box {
    width: 44px;
    height: 44px;
    border-radius: var(--gc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.gc-dash-promo-card {
    background: linear-gradient(135deg, #0b2a1e 0%, #134a35 60%, #0b2a1e 100%) !important;
    border-radius: var(--gc-radius-lg);
    border: 1px solid rgba(245, 196, 81, 0.25) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px -10px rgba(4, 20, 13, 0.6);
}
.gc-dash-promo-card h3,
.gc-dash-promo-card p,
.gc-dash-promo-card div {
    color: #ffffff;
}
.gc-dash-promo-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(75, 184, 208, 0.26) 0%, transparent 70%);
    pointer-events: none;
}
.gc-dash-nav-card {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    box-shadow: var(--gc-card-shadow);
    overflow: hidden;
}
.gc-dash-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-title);
    text-decoration: none;
    transition: all var(--gc-transition-fast);
}
.gc-dash-nav-item:last-child {
    border-bottom: none;
}
.gc-dash-nav-item:hover {
    background-color: var(--gc-bg-card-subtle);
    color: var(--gc-primary);
    padding-left: 1.45rem;
}
.gc-dash-nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.85rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14. Unique GyanChorcha Custom Dashboard Modules
   -------------------------------------------------------------------------- */
.gc-unique-hero {
    background: linear-gradient(135deg, #06170f 0%, #0d2f22 55%, #10261f 100%) !important;
    border-radius: var(--gc-radius-xl);
    border: 1px solid rgba(245, 196, 81, 0.28) !important;
    box-shadow: 0 20px 45px -14px rgba(4, 20, 13, 0.7);
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}
.gc-unique-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 196, 81, 0.24) 0%, transparent 65%);
    pointer-events: none;
}
.gc-unique-hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 20%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(75, 184, 208, 0.22) 0%, transparent 70%);
    pointer-events: none;
}
.gc-streak-pill {
    background: var(--gc-gold-tint);
    border: 1px solid var(--gc-gold-border);
    color: var(--gc-accent-amber);
    padding: 0.35rem 0.95rem;
    border-radius: var(--gc-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
}
.gc-live-exam-card {
    background: linear-gradient(135deg, #0b3d2e 0%, #12523a 60%, #14684b 100%);
    border-radius: var(--gc-radius-lg);
    border: 1px solid rgba(63, 189, 138, 0.35);
    color: #ffffff;
    box-shadow: 0 12px 32px -10px rgba(4, 20, 13, 0.6);
    position: relative;
    overflow: hidden;
}
.gc-live-badge-pulse {
    position: relative;
    padding-left: 18px;
    color: #4ade80;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.gc-live-badge-pulse::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: gcPulseDot 1.8s infinite;
}
@keyframes gcPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.gc-flashcard-box {
    background: var(--gc-bg-card);
    border: 1.5px dashed var(--gc-primary-border);
    border-radius: var(--gc-radius-lg);
    transition: all var(--gc-transition-smooth);
    cursor: pointer;
}
.gc-flashcard-box:hover {
    border-color: var(--gc-primary);
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: var(--gc-card-hover-shadow);
}
.gc-stat-box-modern {
    background: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1.4rem;
    transition: all var(--gc-transition-smooth);
    box-shadow: var(--gc-card-shadow);
    height: 100%;
}
.gc-stat-box-modern:hover {
    transform: translateY(-3px);
    box-shadow: var(--gc-card-hover-shadow);
    border-color: var(--gc-primary-border);
}
.gc-progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* --------------------------------------------------------------------------
   15. GyanChorcha Study Hub Architecture
   -------------------------------------------------------------------------- */
.gc-study-layout {
    min-height: calc(100vh - 120px);
    background-color: var(--gc-bg-body);
}

/* Sidebar Navigation */
.gc-study-sidebar {
    background-color: var(--gc-bg-card);
    border-radius: var(--gc-radius-xl);
    border: 1px solid var(--gc-border);
    padding: 1.25rem 0.85rem;
    box-shadow: var(--gc-card-shadow);
    position: sticky;
    top: 90px;
}
.gc-study-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: var(--gc-radius-md);
    color: var(--gc-text-body);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all var(--gc-transition-fast);
    margin-bottom: 0.25rem;
}
.gc-study-nav-link:hover {
    color: var(--gc-primary);
    background-color: var(--gc-badge-bg);
    transform: translateX(3px);
}
.gc-study-nav-link.active {
    color: var(--gc-primary);
    background: var(--gc-primary-tint);
    font-weight: 700;
    border: 1px solid var(--gc-primary-border);
}
.gc-study-nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Top Workbench Status Bar */
.gc-workbench-header {
    background: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1rem 1.4rem;
    box-shadow: var(--gc-card-shadow);
}
.gc-pill-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--gc-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid var(--gc-border);
    background-color: var(--gc-bg-card-subtle);
    color: var(--gc-text-title);
}

/* Live Exam Radar Pulse Spotlight */
.gc-exam-spotlight {
    background: linear-gradient(135deg, #06170f 0%, #0d2f22 60%, #123a2a 100%);
    border-radius: var(--gc-radius-xl);
    border: 1px solid rgba(63, 189, 138, 0.3);
    color: #ffffff;
    box-shadow: 0 16px 36px -12px rgba(4, 20, 13, 0.65);
    position: relative;
    overflow: hidden;
}
.gc-exam-spotlight::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(245, 196, 81, 0.24) 0%, transparent 65%);
    pointer-events: none;
}

/* Quest / Task Items */
.gc-quest-card {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius-lg);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--gc-transition-fast);
}
.gc-quest-card:hover {
    border-color: var(--gc-primary-border);
    transform: translateY(-2px);
    box-shadow: var(--gc-card-hover-shadow);
}
.gc-quest-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--gc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--gc-transition-fast);
}
.gc-quest-checkbox.done {
    background-color: var(--gc-primary);
    border-color: var(--gc-primary);
    color: var(--gc-on-primary);
}

/* --------------------------------------------------------------------------
   16. Bootstrap Component Bridge
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: var(--gc-on-primary);
    --bs-btn-hover-color: var(--gc-on-primary);
    --bs-btn-active-color: var(--gc-on-primary);
    --bs-btn-disabled-color: var(--gc-on-primary);

    --bs-btn-bg: var(--gc-primary);
    --bs-btn-hover-bg: var(--gc-primary-hover);
    --bs-btn-active-bg: var(--gc-primary-hover);
    --bs-btn-disabled-bg: var(--gc-primary);

    --bs-btn-border-color: var(--gc-primary);
    --bs-btn-hover-border-color: var(--gc-primary-hover);
    --bs-btn-active-border-color: var(--gc-primary-hover);
    --bs-btn-disabled-border-color: var(--gc-primary);

    --bs-btn-focus-shadow-rgb: 14, 92, 63;
}

.btn-outline-primary {
    --bs-btn-color: var(--gc-primary);
    --bs-btn-hover-color: var(--gc-on-primary);
    --bs-btn-active-color: var(--gc-on-primary);
    --bs-btn-border-color: var(--gc-primary);
    --bs-btn-hover-bg: var(--gc-primary);
    --bs-btn-hover-border-color: var(--gc-primary);
    --bs-btn-active-bg: var(--gc-primary-hover);
    --bs-btn-active-border-color: var(--gc-primary-hover);
    --bs-btn-focus-shadow-rgb: 14, 92, 63;
}

.text-navy {
    color: var(--gc-navy) !important;
}

.form-control,
.form-select {
    background-color: var(--gc-bg-card);
    border-color: var(--gc-border);
    color: var(--gc-text-body);
}
.form-control::placeholder,
.form-select::placeholder {
    color: var(--gc-text-muted);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--gc-bg-card);
    border-color: var(--gc-primary);
    color: var(--gc-text-title);
    box-shadow: 0 0 0 0.2rem var(--gc-primary-glow);
}
.input-group-text {
    background-color: var(--gc-bg-card-subtle);
    border-color: var(--gc-border);
    color: var(--gc-text-muted);
}
.form-check-input:checked {
    background-color: var(--gc-primary);
    border-color: var(--gc-primary);
}
.form-label {
    color: var(--gc-text-title);
    font-weight: 600;
}

.dropdown-menu {
    background-color: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    box-shadow: var(--gc-card-hover-shadow);
}
.dropdown-item {
    color: var(--gc-text-body);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gc-badge-bg);
    color: var(--gc-primary);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--gc-primary);
    color: var(--gc-on-primary);
}

.navbar-toggler {
    color: var(--gc-text-title);
}

/* --------------------------------------------------------------------------
   17. Utility Shims (fractional & extended scale used across the app)
   -------------------------------------------------------------------------- */
.block { display: block !important; }
.underline { text-decoration: underline !important; }
.font-medium { font-weight: 500 !important; }

.text-sm { font-size: 0.875rem !important; }
.text-xs { font-size: 0.75rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-gray-600 { color: var(--gc-text-muted) !important; }
.text-green-600 { color: var(--gc-accent-emerald) !important; }

.w-full { width: 100% !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }
@media (min-width: 576px) {
    .w-sm-auto { width: auto !important; }
}

.max-w-700 { max-width: 700px !important; }

.rounded-md { border-radius: 0.375rem !important; }

.bg-opacity-15 { --bs-bg-opacity: 0.15 !important; }

.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3\.5 { gap: 0.875rem !important; }
.gap-6 { gap: 1.5rem !important; }

.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-6 { padding: 1.5rem !important; }
/* Bootstrap scales .py-5 to 3rem, so .py-6/.py-lg-6 continue the ladder
   for the large marketing sections that use them. */
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
@media (min-width: 992px) {
    .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

.mt-1\.5 { margin-top: 0.375rem !important; }
.mb-1\.5 { margin-bottom: 0.375rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* --------------------------------------------------------------------------
   Page styles moved out of frontend/home-2.blade.php
   -------------------------------------------------------------------------- */
        /* 1. Hero Innovation: 2-Column Split with Live Interactive Sandbox */
        .gc-hero-split {
            position: relative;
            padding: 60px 0 50px;
            background-color: var(--gc-bg-body);
            background-image:
                var(--gc-paper-noise),
                repeating-linear-gradient(to bottom, transparent 0 31px, var(--gc-rule-color) 31px, var(--gc-rule-color) 32px),
                radial-gradient(circle at 12% 20%, rgba(var(--gc-primary-rgb), 0.08) 0%, transparent 45%),
                radial-gradient(circle at 88% 75%, rgba(var(--gc-gold-rgb), 0.1) 0%, transparent 45%);
            overflow: hidden;
        }

        .gc-hero-headline {
            font-size: clamp(2.3rem, 4vw, 3.3rem);
            font-weight: 850;
            line-height: 1.22;
            letter-spacing: -0.02em;
            color: var(--gc-text-title);
        }

        /* Pulsing "live" dot - the shared inline indicator used by the hero's
           "live hall" button (same language as the site's live badges). */
        .gc-pulse-dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #ef4444;
            margin-right: 7px;
            vertical-align: middle;
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            animation: pulse-red 1.6s infinite;
        }

        /* Sandbox Mini Quiz Card */
        .gc-sandbox-card {
            background: var(--gc-bg-card);
            border: 1px solid var(--gc-border);
            border-radius: 24px;
            box-shadow: 0 20px 45px -12px rgba(13, 60, 45, 0.14);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        [data-bs-theme="dark"] .gc-sandbox-card {
            box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.6);
        }

        .gc-sandbox-header {
            background: var(--gc-grad-announce);
            color: #fff;
            padding: 16px 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* containing block for the countdown bar */
            position: relative;
        }

        /* Pulsing dot on the card's "live" badge - same language as the
           site's other live badges. */
        .gc-sandbox-live-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            margin-right: 6px;
            vertical-align: middle;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
            animation: gcPulseDot 1.6s infinite;
        }

        /* Countdown bar. Absolutely positioned inside the header so it can
           never change the card's height. */
        .gc-sandbox-timer-bar {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--gc-gold-bright), var(--gc-gold));
            transform-origin: left center;
            transform: scaleX(1);
        }

        .gc-sandbox-timer-bar.is-running {
            animation: gcTimerDrain 20s linear forwards;
        }

        .gc-sandbox-timer-bar.is-paused {
            animation-play-state: paused;
        }

        @keyframes gcTimerDrain {
            from {
                transform: scaleX(1);
            }

            to {
                transform: scaleX(0);
            }
        }

        .gc-timer-urgent {
            animation: gcTimerBlink 1.1s ease-in-out infinite;
        }

        @keyframes gcTimerBlink {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.6;
            }
        }

        .gc-sandbox-badge {
            background: rgba(245, 196, 81, 0.18);
            border: 1px solid rgba(245, 196, 81, 0.55);
            color: var(--gc-gold-bright);
            font-size: 0.76rem;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: 700;
        }

        /* Option 2: the result panel takes over the box the options already
           occupy instead of reserving an empty gap below them. The options are
           only hidden (visibility), so their box is still what sets the height
           - the card can never change size when a result appears. */
        .gc-sandbox-answer-zone {
            position: relative;
        }

        .gc-sandbox-answer-zone.is-answered #sandboxOptionsList {
            visibility: hidden;
        }

        /* Positioned - and invisible - the moment it is shown, so it can never
           push the options down while the chosen option is still animating. */
        .gc-sandbox-answer-zone #demoAnswerFeedback:not(.d-none) {
            position: absolute;
            inset: 0;
            margin: 0;
            max-height: none;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            justify-content: safe center;
            opacity: 0;
            transform: translateY(8px);
            pointer-events: none;
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ...then it fades over the options once that delay is up. */
        .gc-sandbox-answer-zone.is-answered #demoAnswerFeedback {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* The result screen is drawn as an overlay instead of replacing the
           quiz markup: the card keeps its exact height (no page jump) and
           "try again" still finds the question nodes. */
        #sandboxContentArea {
            position: relative;
        }

        #sandboxContentArea.is-final > *:not(.gc-sandbox-final) {
            visibility: hidden;
        }

        .gc-sandbox-final {
            position: absolute;
            inset: 0;
            /* matches Bootstrap's p-4 on the content area */
            padding: 24px;
            background: var(--gc-bg-card);
            overflow-y: auto;
            z-index: 2;
        }

        /* A question can wrap to a different number of lines than the last
           one. Reserving the tallest case keeps everything below it - and
           therefore the card - at exactly the same height on every question;
           the text is centred in that space so short questions look evenly
           spaced rather than top-aligned with a gap. */
        #sandboxQuestionText {
            min-height: 4.5em;
            display: flex;
            align-items: center;
        }

        .gc-quiz-option {
            border: 1.5px solid var(--gc-border);
            border-radius: 12px;
            padding: 12px 16px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--gc-bg-card-subtle);
            font-weight: 500;
            color: var(--gc-text-title);
        }

        .gc-quiz-option:hover {
            border-color: var(--gc-primary);
            background: rgba(var(--gc-primary-rgb), 0.08);
            transform: translateX(4px);
        }

        .gc-quiz-option.selected-correct {
            border-color: #10b981 !important;
            background: rgba(16, 185, 129, 0.12) !important;
            color: #059669 !important;
            animation: gcAnswerCorrect 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }

        [data-bs-theme="dark"] .gc-quiz-option.selected-correct {
            color: #34d399 !important;
        }

        .gc-quiz-option.selected-wrong {
            border-color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.12) !important;
            color: #dc2626 !important;
            animation: gcAnswerShake 0.5s ease-in-out;
        }

        [data-bs-theme="dark"] .gc-quiz-option.selected-wrong {
            color: #f87171 !important;
        }

        @keyframes gcAnswerCorrect {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
            }

            45% {
                transform: scale(1.03);
                box-shadow: 0 0 0 9px rgba(16, 185, 129, 0.16);
            }

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

        @keyframes gcAnswerShake {
            0%,
            100% {
                transform: translateX(0);
            }

            20% {
                transform: translateX(-6px);
            }

            40% {
                transform: translateX(6px);
            }

            60% {
                transform: translateX(-4px);
            }

            80% {
                transform: translateX(4px);
            }
        }

        /* Decorative motion only - respect the user's system preference. */
        @media (prefers-reduced-motion: reduce) {

            .gc-pulse-dot,
            .gc-sandbox-live-dot,
            .gc-sandbox-timer-bar.is-running,
            .gc-timer-urgent,
            .gc-quiz-option.selected-correct,
            .gc-quiz-option.selected-wrong {
                animation: none !important;
            }

            .gc-sandbox-answer-zone #demoAnswerFeedback:not(.d-none) {
                transition: none !important;
            }
        }

        .gc-opt-key {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gc-text-title);
            flex-shrink: 0;
        }

        [data-bs-theme="dark"] .gc-opt-key {
            background: rgba(255, 255, 255, 0.1);
        }

        .gc-quiz-option.selected-correct .gc-opt-key {
            background: #10b981;
            color: #fff;
        }

        .gc-quiz-option.selected-wrong .gc-opt-key {
            background: #ef4444;
            color: #fff;
        }

        /* 2. Live War-Room Pulse Bar */
        .gc-war-room {
            background: linear-gradient(135deg, #06170f 0%, #0b3d2e 60%, #10261f 100%);
            color: #fff;
            border-radius: 20px;
            padding: 24px 32px;
            position: relative;
            box-shadow: 0 15px 35px rgba(6, 23, 15, 0.3);
            overflow: hidden;
            border: 1px solid rgba(245, 196, 81, 0.22);
        }

        .gc-war-room::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gc-gold), var(--gc-primary), var(--gc-cyan));
        }

        .gc-pulse-ring {
            width: 14px;
            height: 14px;
            background: #ef4444;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            animation: pulse-red 1.6s infinite;
        }

        @keyframes pulse-red {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }

        /* 3. AI Radar Feature Showcase */
        .gc-radar-card {
            background: var(--gc-bg-card);
            border: 1px solid var(--gc-border);
            border-radius: 24px;
            padding: 32px;
            transition: all 0.3s ease;
        }

        .gc-weakness-bar {
            height: 10px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.06);
            overflow: hidden;
            margin-top: 6px;
        }

        [data-bs-theme="dark"] .gc-weakness-bar {
            background: rgba(255, 255, 255, 0.08);
        }

        .gc-weakness-fill-danger {
            background: linear-gradient(90deg, #f43f5e, #e11d48);
        }

        .gc-weakness-fill-success {
            background: linear-gradient(90deg, var(--gc-primary), var(--gc-primary-hover));
        }

        .gc-weakness-fill-warning {
            background: linear-gradient(90deg, #f59e0b, #d97706);
        }

        /* 4. Interactive Roadmap Tree */
        .gc-tree-tab-btn {
            padding: 10px 22px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 0.95rem;
            border: 1.5px solid var(--gc-border);
            background: var(--gc-bg-card);
            color: var(--gc-text-body);
            transition: all 0.25s ease;
        }

        .gc-tree-tab-btn.active,
        .gc-tree-tab-btn:hover {
            background: var(--gc-primary);
            color: var(--gc-on-primary);
            border-color: var(--gc-primary);
            box-shadow: 0 6px 18px var(--gc-primary-glow);
        }

        .gc-topic-node {
            background: var(--gc-bg-card);
            border: 1px solid var(--gc-border);
            border-radius: 16px;
            padding: 18px;
            transition: all 0.25s ease;
            height: 100%;
            position: relative;
        }

        .gc-topic-node:hover {
            transform: translateY(-4px);
            border-color: var(--gc-cyan);
            box-shadow: 0 12px 24px -6px rgba(var(--gc-primary-rgb), 0.2);
        }

        /* 5. Gamified Streak & XP System */
        .gc-streak-box {
            background: var(--gc-grad-tint);
            border: 2px dashed var(--gc-gold-border);
            border-radius: 24px;
            padding: 28px;
            text-align: center;
        }

        .gc-quest-step {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 14px 18px;
            border-radius: 16px;
            background: var(--gc-bg-card);
            border: 1px solid var(--gc-border);
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }

        .gc-quest-step:hover {
            transform: translateX(4px);
            border-color: var(--gc-primary);
        }

        /* 6. Comparison Table */
        .gc-compare-card {
            border-radius: 24px;
            border: 1px solid var(--gc-border);
            background: var(--gc-bg-card);
            overflow: hidden;
        }

        .gc-compare-table th {
            padding: 18px 24px;
            font-size: 1.05rem;
            background: var(--gc-bg-card-subtle);
            color: var(--gc-text-title);
            border-bottom: 1px solid var(--gc-border);
        }

        .gc-compare-table td {
            padding: 18px 24px;
            vertical-align: middle;
            border-top: 1px solid var(--gc-border);
            color: var(--gc-text-body);
        }

/* --------------------------------------------------------------------------
   Page styles moved out of frontend/pages/app-download.blade.php
   -------------------------------------------------------------------------- */
/* Hero & Showcase Styles */
.gc-app-hero {
    position: relative;
    padding: clamp(50px, 6vw, 80px) 0 clamp(40px, 5vw, 60px);
    background-color: var(--gc-bg-body);
    background-image:
        var(--gc-paper-noise),
        repeating-linear-gradient(to bottom, transparent 0 31px, var(--gc-rule-color) 31px, var(--gc-rule-color) 32px),
        radial-gradient(circle at 10% 20%, rgba(var(--gc-primary-rgb), 0.1) 0%, transparent 45%),
        radial-gradient(circle at 90% 75%, rgba(var(--gc-gold-rgb), 0.12) 0%, transparent 45%);
    overflow: hidden;
}

.gc-app-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--gc-badge-bg);
    border: 1px solid var(--gc-border);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gc-primary);
}

.gc-device-mockup {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 40px;
    background: #06170f;
    padding: 12px;
    box-shadow: 0 25px 60px -15px rgba(6, 23, 15, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .gc-device-mockup {
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.gc-device-screen {
    border-radius: 32px;
    background: var(--gc-bg-card);
    overflow: hidden;
    border: 1px solid var(--gc-border);
    padding: 20px 16px;
}

/* Download Buttons */
.gc-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-radius: 16px;
    border: 1.5px solid var(--gc-border);
    background: var(--gc-bg-card);
    color: var(--gc-text-title);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.gc-dl-btn:hover {
    transform: translateY(-3px);
    border-color: var(--gc-primary);
    box-shadow: 0 12px 25px -8px var(--gc-primary-glow);
    color: var(--gc-text-title);
}
.gc-dl-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--gc-bg-card-subtle);
    font-size: 1.4rem;
}

/* Feature Grid */
.gc-app-feat-card {
    background: var(--gc-bg-card);
    border: 1px solid var(--gc-border);
    border-radius: 20px;
    padding: 24px;
    height: 100%;
    transition: all 0.25s ease;
}
.gc-app-feat-card:hover {
    transform: translateY(-4px);
    border-color: var(--gc-cyan);
    box-shadow: 0 12px 25px -6px rgba(0, 192, 240, 0.16);
}

.gc-qr-box {
    background: var(--gc-bg-card);
    border: 1.5px dashed var(--gc-primary);
    border-radius: 20px;
    padding: 24px;
    display: inline-block;
    text-align: center;
}

/* --------------------------------------------------------------------------
   18. Inline-style replacements
   Every declaration that used to live in a Blade style="" attribute now has a
   utility class here. All are !important because inline styles were.
   Naming:  gc-fs-<rem*100>  gc-w-<px>  gc-h-<px>  gc-pct-<%>
            gc-mw-<px>      gc-lh-<10x> gc-tint-*  gc-surface-*  gc-text-*
   -------------------------------------------------------------------------- */

/* --- Typography: font-size (rem x 100) --- */
.gc-fs-65 { font-size: 0.65rem !important; }
.gc-fs-68 { font-size: 0.68rem !important; }
.gc-fs-70 { font-size: 0.70rem !important; }
.gc-fs-72 { font-size: 0.72rem !important; }
.gc-fs-74 { font-size: 0.74rem !important; }
.gc-fs-75 { font-size: 0.75rem !important; }
.gc-fs-78 { font-size: 0.78rem !important; }
.gc-fs-80 { font-size: 0.80rem !important; }
.gc-fs-82 { font-size: 0.82rem !important; }
.gc-fs-85 { font-size: 0.85rem !important; }
.gc-fs-88 { font-size: 0.88rem !important; }
.gc-fs-90 { font-size: 0.90rem !important; }
.gc-fs-95 { font-size: 0.95rem !important; }
.gc-fs-105 { font-size: 1.05rem !important; }
.gc-fs-110 { font-size: 1.10rem !important; }
.gc-fs-112 { font-size: 1.12rem !important; }
.gc-fs-115 { font-size: 1.15rem !important; }
.gc-fs-125 { font-size: 1.25rem !important; }
.gc-fs-140 { font-size: 1.40rem !important; }
.gc-fs-175 { font-size: 1.75rem !important; }

/* --- Typography: colour --- */
.gc-text-primary { color: var(--gc-primary) !important; }
.gc-text-title { color: var(--gc-text-title) !important; }
.gc-text-body { color: var(--gc-text-body) !important; }
.gc-text-blue { color: var(--gc-blue) !important; }
.gc-text-cyan { color: var(--gc-cyan) !important; }
.gc-text-gold { color: var(--gc-gold-bright) !important; }
.gc-text-amber { color: var(--gc-accent-amber) !important; }
.gc-text-emerald { color: var(--gc-accent-emerald) !important; }
.gc-text-purple { color: var(--gc-accent-purple) !important; }
.gc-text-rose { color: var(--gc-accent-rose) !important; }

/* --- Typography: contrast-correct semantic tones ---
   Bootstrap's utility colours have to work on cream paper and on the dark panels
   alike, so each tone follows the ground it lands on: gold text gets the deeper
   leaf on paper (4.8:1 instead of 3.6:1) and the bright leaf at night, while the
   footer keeps its near-black ground in both themes and carries its own value. */
.text-warning { color: var(--gc-gold-text) !important; }

.gc-footer {
    --bs-secondary: #9aa79e;
    --bs-secondary-color: #9aa79e;
    --bs-secondary-rgb: 154, 167, 158;
}

/* Phone mock-ups keep their dark screen in both themes, so semantic text inside
   them always takes the night tone rather than the paper one. */
.bg-dark .text-warning { color: var(--gc-gold-bright) !important; }
.bg-dark .text-info { color: var(--gc-cyan-bright) !important; }

/* Bootstrap hard-codes .btn-outline-secondary at #6c757d — 4.15:1 on paper. */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
}

/* --- Typography: rhythm --- */
.gc-lh-12 { line-height: 1.2 !important; }
.gc-lh-125 { line-height: 1.25 !important; }
.gc-lh-16 { line-height: 1.6 !important; }
.gc-lh-17 { line-height: 1.7 !important; }
.gc-lh-18 { line-height: 1.8 !important; }
.gc-tracking-tight { letter-spacing: -0.02em !important; }
.gc-tracking-wide { letter-spacing: 0.5rem !important; }
.gc-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.gc-underline-color { text-decoration-color: var(--gc-primary) !important; }
.gc-underline-offset { text-underline-offset: 4px !important; }

/* --- Sizing: px --- */
.gc-w-7 { width: 7px !important; }
.gc-w-10 { width: 10px !important; }
.gc-w-22 { width: 22px !important; }
.gc-w-28 { width: 28px !important; }
.gc-w-36 { width: 36px !important; }
.gc-w-38 { width: 38px !important; }
.gc-w-40 { width: 40px !important; }
.gc-w-44 { width: 44px !important; }
.gc-w-50 { width: 50px !important; }
.gc-w-52 { width: 52px !important; }
.gc-w-auto { width: auto !important; }

.gc-h-5 { height: 5px !important; }
.gc-h-6 { height: 6px !important; }
.gc-h-7 { height: 7px !important; }
.gc-h-8 { height: 8px !important; }
.gc-h-10 { height: 10px !important; }
.gc-h-22 { height: 22px !important; }
.gc-h-28 { height: 28px !important; }
.gc-h-36 { height: 36px !important; }
.gc-h-38 { height: 38px !important; }
.gc-h-40 { height: 40px !important; }
.gc-h-44 { height: 44px !important; }
.gc-h-48 { height: 48px !important; }
.gc-h-50 { height: 50px !important; }
.gc-h-52 { height: 52px !important; }
.gc-h-auto { height: auto !important; }

/* --- Sizing: percentage widths (progress bars, table columns) --- */
.gc-pct-28 { width: 28% !important; }
.gc-pct-30 { width: 30% !important; }
.gc-pct-33 { width: 33% !important; }
.gc-pct-40 { width: 40% !important; }
.gc-pct-45 { width: 45% !important; }
.gc-pct-51 { width: 51% !important; }
.gc-pct-52 { width: 52% !important; }
.gc-pct-58 { width: 58% !important; }
.gc-pct-60 { width: 60% !important; }
.gc-pct-66 { width: 66% !important; }
.gc-pct-68 { width: 68% !important; }
.gc-pct-72 { width: 72% !important; }
.gc-pct-75 { width: 75% !important; }
.gc-pct-76 { width: 76% !important; }
.gc-pct-80 { width: 80% !important; }
.gc-pct-82 { width: 82% !important; }
.gc-pct-85 { width: 85% !important; }
.gc-pct-86 { width: 86% !important; }
.gc-pct-88 { width: 88% !important; }
.gc-pct-92 { width: 92% !important; }
.gc-pct-100 { width: 100% !important; }

.gc-minw-200 { min-width: 200px !important; }

/* --- Sizing: max-width (reading measures) --- */
.gc-mw-170 { max-width: 170px !important; }
.gc-mw-380 { max-width: 380px !important; }
.gc-mw-400 { max-width: 400px !important; }
.gc-mw-480 { max-width: 480px !important; }
.gc-mw-520 { max-width: 520px !important; }
.gc-mw-580 { max-width: 580px !important; }
.gc-mw-600 { max-width: 600px !important; }
.gc-mw-650 { max-width: 650px !important; }
.gc-mw-680 { max-width: 680px !important; }
.gc-mw-760 { max-width: 760px !important; }
.gc-mw-820 { max-width: 820px !important; }
.gc-mw-860 { max-width: 860px !important; }
.gc-mw-900 { max-width: 900px !important; }
.gc-mw-960 { max-width: 960px !important; }
.gc-mw-1040 { max-width: 1040px !important; }

/* --- Surfaces --- */
.gc-surface-body { background: var(--gc-bg-body) !important; }
.gc-surface-card { background: var(--gc-bg-card) !important; }
.gc-surface-card-subtle { background: var(--gc-bg-card-subtle) !important; }
.gc-surface-white { background: rgba(255, 255, 255, 0.96) !important; }
.gc-glass-06 { background: rgba(255, 255, 255, 0.06) !important; }
.gc-grad-primary { background: var(--gc-grad-primary) !important; }
.gc-grad-announce { background: var(--gc-grad-announce) !important; }
.gc-grad-cta { background: var(--gc-grad-cta) !important; }
.gc-grad-tint { background: var(--gc-grad-tint) !important; }
.gc-grad-bar { background: linear-gradient(90deg, var(--gc-primary), var(--gc-primary-hover)) !important; }
.gc-bg-primary { background: var(--gc-primary) !important; }
.gc-bg-blue { background: var(--gc-blue) !important; }
.gc-shadow-chip { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; }

/* --- Tinted chips / badges --- */
.gc-tint-primary { background: var(--gc-primary-tint) !important; }
.gc-tint-primary-soft { background: var(--gc-primary-tint-soft) !important; }
.gc-tint-blue { background: var(--gc-blue-tint) !important; }
.gc-tint-blue-strong { background: rgba(var(--gc-blue-rgb), 0.22) !important; }
.gc-tint-cyan { background: var(--gc-cyan-tint) !important; }
.gc-tint-emerald { background: var(--gc-emerald-tint) !important; }
.gc-tint-amber { background: var(--gc-amber-tint) !important; }
.gc-tint-purple { background: var(--gc-purple-tint) !important; }
.gc-tint-rose { background: var(--gc-rose-tint) !important; }
.gc-tint-gold { background: rgba(251, 191, 36, 0.15) !important; }
.gc-tint-badge { background: var(--gc-badge-bg) !important; }
.gc-tint-danger-04 { background: rgba(239, 68, 68, 0.04) !important; }

/* --- Borders / outlines --- */
.gc-border { border-color: var(--gc-border) !important; }
.gc-border-primary { border-color: var(--gc-primary) !important; }
.gc-border-primary-soft { border-color: var(--gc-primary-border) !important; }
.gc-border-blue { border-color: var(--gc-blue) !important; }
.gc-border-blue-strong { border-color: rgba(var(--gc-blue-rgb), 0.4) !important; }
.gc-border-white-15 { border-color: rgba(255, 255, 255, 0.15) !important; }
.gc-border-2 { border-width: 2px !important; }
.gc-outline { border: 1px solid var(--gc-border) !important; }
.gc-outline-primary { border: 1px solid var(--gc-primary) !important; }
.gc-outline-primary-2 { border: 2px solid var(--gc-primary) !important; }
.gc-outline-primary-soft { border: 1px solid var(--gc-primary-border) !important; }
.gc-outline-gold { border: 1px solid rgba(251, 191, 36, 0.3) !important; }
.gc-dashed-primary { border: 1px dashed var(--gc-primary) !important; }
.gc-dashed-primary-soft { border: 1px dashed var(--gc-primary-border) !important; }

/* --- Misc --- */
.gc-hidden { display: none; }
.gc-z-2 { z-index: 2 !important; }
.gc-object-contain { object-fit: contain !important; }