/* ============================================================================
   Growthinks - Redesign Layer  (loads AFTER css/style.css)
   ----------------------------------------------------------------------------
   Purpose : replace the warm/vintage look with a clean modern SaaS aesthetic,
             and upgrade every shared component (nav, buttons, cards, forms,
             tables, modals, badges, empty states) in one place.
   Strategy: override design tokens + restyle existing class names, so all 40+
             pages inherit the new design without touching their markup.
   Motion  : CSS-first, GPU friendly, fully disabled by prefers-reduced-motion.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS - dark (default)
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --primary-color: #10b981;
    --primary-dark: #059669;
    --primary-light: #34d399;
    --primary-rgb: 16, 185, 129;
    --secondary-color: #38bdf8;
    --secondary-dark: #0ea5e9;
    --success-color: #10b981;
    --danger-color: #f43f5e;
    --warning-color: #f59e0b;
    --info-color: #38bdf8;

    /* Surfaces - neutral, cool, calm */
    --bg-primary: #0a0d0c;
    --bg-secondary: #0e1211;
    --bg-tertiary: #141a18;
    --bg-hover: #1a2220;
    --bg-dark: #060908;
    --bg-card: #111715;
    --glass-bg: rgba(17, 23, 21, 0.72);
    --glass-border: rgba(255, 255, 255, 0.07);

    /* Text */
    --text-primary: #e9f0ed;
    --text-secondary: #a3b4ad;
    --text-muted: #6f827b;
    --text-light: #ffffff;

    /* Lines & elevation */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 32px 70px -20px rgba(0, 0, 0, 0.7);
    --glow-primary: 0 10px 30px -10px rgba(16, 185, 129, 0.55);

    /* Geometry */
    --border-radius: 14px;
    --border-radius-sm: 10px;
    --border-radius-lg: 20px;
    --border-radius-xl: 28px;
    --radius-pill: 999px;

    /* Type */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --tracking-tight: -0.022em;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 160ms;
    --dur: 260ms;
    --dur-slow: 520ms;
    --transition: color var(--dur-fast) var(--ease-out),
                  background-color var(--dur-fast) var(--ease-out),
                  border-color var(--dur-fast) var(--ease-out),
                  box-shadow var(--dur) var(--ease-out),
                  transform var(--dur) var(--ease-out);

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(16px, 4vw, 32px);

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

/* ----------------------------------------------------------------------------
   2. LIGHT THEME
   -------------------------------------------------------------------------- */
[data-theme="light"],
html[data-theme="light"] {
    --primary-color: #059669;
    --primary-dark: #047857;
    --primary-light: #10b981;
    --primary-rgb: 5, 150, 105;
    --secondary-color: #0284c7;

    --bg-primary: #f6f9f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef4f1;
    --bg-hover: #e9f1ed;
    --bg-dark: #ffffff;
    --bg-card: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(12, 21, 18, 0.07);

    --text-primary: #0b1512;
    --text-secondary: #47584f;
    --text-muted: #74857e;
    --text-light: #0b1512;

    --border-color: rgba(12, 21, 18, 0.09);
    --border-strong: rgba(12, 21, 18, 0.16);
    --shadow-sm: 0 1px 2px rgba(12, 21, 18, 0.06);
    --shadow-md: 0 6px 18px -6px rgba(12, 21, 18, 0.12), 0 1px 2px rgba(12, 21, 18, 0.06);
    --shadow-lg: 0 22px 44px -18px rgba(12, 21, 18, 0.22), 0 2px 6px rgba(12, 21, 18, 0.06);
    --shadow-xl: 0 40px 80px -28px rgba(12, 21, 18, 0.28);
    --glow-primary: 0 10px 28px -12px rgba(5, 150, 105, 0.45);
}

/* ----------------------------------------------------------------------------
   3. BASE & TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Kill the old leather-grain noise; replace with a tasteful ambient glow. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background-image:
        radial-gradient(60rem 40rem at 12% -10%, rgba(16, 185, 129, 0.07), transparent 70%),
        radial-gradient(50rem 34rem at 92% 0%, rgba(56, 189, 248, 0.055), transparent 72%);
    background-repeat: no-repeat;
}

[data-theme="light"] body::before {
    background-image:
        radial-gradient(60rem 40rem at 8% -14%, rgba(16, 185, 129, 0.10), transparent 70%),
        radial-gradient(48rem 32rem at 96% -4%, rgba(56, 189, 248, 0.08), transparent 72%);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 15.5px;
    line-height: 1.65;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Everything above the ambient layer */
body > *:not(script):not(style) {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 750; line-height: 1.15; }
h3 { font-size: clamp(1.18rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.06rem; }
h5, h6 { font-size: 0.95rem; }

p {
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

[data-theme="light"] a { color: var(--primary-dark); }

a:hover { color: var(--primary-color); }

small, .text-small { font-size: 0.82rem; }

strong, b { font-weight: 650; color: var(--text-primary); }

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.86em;
}

::selection {
    background: rgba(var(--primary-rgb), 0.28);
    color: var(--text-primary);
}

:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Refined scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* ----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.section,
section.section {
    padding: clamp(48px, 7vw, 92px) 0;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 750;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-bottom: 6px;
}

.section-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--border-color) 18%, var(--border-color) 82%, transparent);
    margin: 0;
}

/* Eyebrow label used above section headings */
.gtx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-light);
    margin-bottom: 14px;
}

.gtx-eyebrow::before {
    content: '';
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.7;
}

[data-theme="light"] .gtx-eyebrow { color: var(--primary-dark); }

.gtx-lead {
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    color: var(--text-secondary);
    max-width: 62ch;
    line-height: 1.7;
}

/* ----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn,
.gtx-btn,
.btn-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-family);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 0.78em 1.35em;
    min-height: 44px;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.btn i,
.gtx-btn i { font-size: 0.92em; line-height: 1; }

/* Primary - solid emerald with soft depth, no neon */
.btn-primary,
.gtx-btn-primary {
    background: linear-gradient(180deg, var(--primary-light), var(--primary-color) 55%, var(--primary-dark));
    color: #04120d;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, var(--glow-primary);
}

.btn-primary:hover,
.gtx-btn-primary:hover {
    color: #04120d;
    transform: translateY(-1.5px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
                0 16px 34px -14px rgba(16, 185, 129, 0.7);
}

.btn-primary:active,
.gtx-btn-primary:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 16px -10px rgba(16, 185, 129, 0.6);
}

/* Secondary - quiet surface button */
.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1.5px);
}

/* Outline / ghost */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-outline:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.45);
    color: var(--text-primary);
    transform: translateY(-1.5px);
}

.btn-success { background: var(--success-color); color: #04120d; }
.btn-danger { background: var(--danger-color); color: #fff; }
.btn-danger:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1.5px); }

.btn-sm, .btn-small, .btn.btn-small {
    min-height: 36px;
    padding: 0.5em 0.9em;
    font-size: 0.82rem;
    border-radius: 8px;
}

.btn-lg {
    min-height: 52px;
    padding: 0.92em 1.7em;
    font-size: 1rem;
    border-radius: var(--border-radius);
}

.btn-block { width: 100%; }

.btn:disabled,
.btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* Legacy premium buttons */
.btn-premium {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #231705;
    box-shadow: 0 10px 26px -12px rgba(245, 158, 11, 0.65);
}
.btn-premium:hover { color: #231705; transform: translateY(-1.5px); }

.btn-premium-outline {
    background: transparent;
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.45);
}
.btn-premium-outline:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.7);
}

/* Inline text buttons inside tables / lists */
.btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary-light);
    font-weight: 550;
    cursor: pointer;
}

/* Click ripple (injected by js/redesign.js) */
.gtx-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: 0.22;
    pointer-events: none;
    animation: gtx-ripple-out 580ms var(--ease-out) forwards;
    z-index: -1;
}

@keyframes gtx-ripple-out {
    to { transform: scale(2.6); opacity: 0; }
}

/* ----------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 1.15rem;
}

.form-label,
.gtx-field > label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.form-control,
.gtx-input,
.gtx-field input,
.gtx-field select,
.gtx-field textarea,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="date"].form-control,
input[type="tel"].form-control,
select.form-control,
textarea.form-control,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"] {
    width: 100%;
    font-family: var(--font-family);
    font-size: 0.94rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.72em 0.95em;
    min-height: 46px;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

select,
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236f827b' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 2.4em;
}

textarea,
textarea.form-control,
.gtx-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:focus,
.gtx-input:focus,
.gtx-field input:focus,
.gtx-field select:focus,
.gtx-field textarea:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.65);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 0.65;
    cursor: not-allowed;
}

.form-text {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* --- .cfield (compact calculator fields) --- */
.cfield {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfield label,
.cfield > span.cfield-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cfield input,
.cfield select {
    min-height: 44px;
    font-size: 0.92rem;
}

/* ----------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
    position: relative;
}

.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* Interactive cards only lift when explicitly marked */
.card.is-interactive:hover,
a.card:hover,
.card-grid > a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(var(--primary-rgb), 0.32);
}

.card-grid {
    display: grid;
    gap: clamp(14px, 2vw, 22px);
}

/* Subtle top hairline highlight on cards */
.card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    pointer-events: none;
}

[data-theme="light"] .card::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

/* ----------------------------------------------------------------------------
   8. BADGES & PILLS
   -------------------------------------------------------------------------- */
.badge,
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-primary {
    background: rgba(var(--primary-rgb), 0.13);
    color: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.28);
}
[data-theme="light"] .badge-primary { color: var(--primary-dark); }

.badge-success {
    background: rgba(16, 185, 129, 0.13);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.26);
}
[data-theme="light"] .badge-success { color: #047857; }

.badge-danger {
    background: rgba(244, 63, 94, 0.13);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.26);
}
[data-theme="light"] .badge-danger { color: #be123c; }

.badge-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.26);
}
[data-theme="light"] .badge-warning { color: #b45309; }

.badge-info,
.badge-secondary {
    background: rgba(56, 189, 248, 0.13);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.26);
}
[data-theme="light"] .badge-info,
[data-theme="light"] .badge-secondary { color: #0369a1; }

.pro-badge {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #241705;
    font-size: 0.62rem;
    padding: 3px 6px;
    letter-spacing: 0.04em;
    margin-left: 6px;
}

/* Pulse dot for "live" indicators */
.gtx-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    flex: 0 0 auto;
}

/* Ring is drawn by a pseudo element and animated with transform/opacity only,
   so the compositor can run it without repainting the page. */
.gtx-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.45);
    animation: gtx-dot-pulse 2.4s var(--ease-in-out) infinite;
    will-change: transform, opacity;
}

@keyframes gtx-dot-pulse {
    0%   { transform: scale(1); opacity: 0.55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* ----------------------------------------------------------------------------
   9. NAVBAR
   -------------------------------------------------------------------------- */
.navbar,
html[data-theme="dark"] .navbar {
    background: rgba(10, 13, 12, 0.7);
    border-bottom: 1px solid var(--border-color);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    transition: background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.75);
}

.navbar .container {
    height: 70px;
    transition: height var(--dur) var(--ease-out);
}

.navbar.is-scrolled,
html[data-theme="dark"] .navbar.is-scrolled {
    background: rgba(10, 13, 12, 0.92);
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.9);
    border-bottom-color: var(--border-color);
}

[data-theme="light"] .navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px -24px rgba(12, 21, 18, 0.35);
}

.navbar.is-scrolled .container { height: 62px; }

/* Brand */
.nav-brand .logo,
html[data-theme="dark"] .nav-brand .logo {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--text-primary);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}

.nav-brand .logo:hover { transform: translateY(-1px); opacity: 1; }

.logo-mark {
    border-radius: 8px;
    transition: transform var(--dur-slow) var(--ease-spring);
}

.nav-brand .logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); }

/* Nav links + animated active indicator */
.navbar .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.87rem;
    font-weight: 550;
    color: var(--text-secondary);
    padding: 8px 11px;
    border-radius: 9px;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.navbar .nav-link i { font-size: 0.82em; opacity: 0.85; transition: transform var(--dur) var(--ease-spring); }
.navbar .nav-link:hover i { transform: translateY(-1px); }

.navbar .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.navbar .nav-link.active {
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.1);
}

.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-light), transparent);
    animation: gtx-underline-in var(--dur-slow) var(--ease-out) both;
}

@keyframes gtx-underline-in {
    from { transform: scaleX(0); transform-origin: left; opacity: 0; }
    to   { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

.nav-chevron {
    font-size: 0.6rem !important;
    opacity: 0.55 !important;
    transition: transform var(--dur) var(--ease-out) !important;
}

.nav-has-dropdown:hover .nav-chevron { transform: rotate(180deg); }

/* Mega dropdowns */
.nav-dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    overflow: hidden;
    transform-origin: top center;
}

.nav-dropdown-menu .mega-inner { gap: 2px; }

.mega-item {
    border-radius: 10px;
    padding: 10px 11px;
    transition: background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.mega-item:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.mega-icon {
    border-radius: 9px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-light);
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur-fast);
}

.mega-item:hover .mega-icon {
    transform: scale(1.05);
    background: rgba(var(--primary-rgb), 0.18);
}

.mega-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mega-desc {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.mega-divider {
    background: var(--border-color);
    margin: 6px 8px;
}

.mega-badge-new,
.mega-badge-beta {
    font-family: var(--font-family);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 5px;
    margin-left: 5px;
    vertical-align: 1px;
}

.mega-badge-new { background: rgba(var(--primary-rgb), 0.16); color: var(--primary-light); }
.mega-badge-beta { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }

/* Icon buttons */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast);
}

.nav-icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-icon-btn:active { transform: translateY(0) scale(0.96); }

.notif-badge {
    background: var(--danger-color);
    border-radius: var(--radius-pill);
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    padding: 0 4px;
    box-shadow: 0 0 0 2px var(--bg-primary);
}

/* Auth buttons in nav */
.btn-nav-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.btn-nav-login:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.btn-nav-register {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--primary-light), var(--primary-color));
    color: #04120d;
    font-size: 0.86rem;
    font-weight: 650;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 18px -10px rgba(16, 185, 129, 0.8);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur);
}

.btn-nav-register:hover {
    color: #04120d;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.9);
}

/* User menu drawer/dropdown */
.dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 0.87rem;
    color: var(--text-secondary);
    transition: background-color var(--dur-fast), color var(--dur-fast);
}

.dropdown-menu li a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown-cta-success { color: #34d399 !important; }

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

/* ----------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.table-responsive {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.table tbody td {
    padding: 13px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.table tbody tr:hover { background: var(--bg-hover); }

.table-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
   11. MODALS
   -------------------------------------------------------------------------- */
.modal-overlay {
    background: rgba(4, 8, 7, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: gtx-fade-in var(--dur) var(--ease-out);
}

[data-theme="light"] .modal-overlay { background: rgba(12, 21, 18, 0.28); }

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header h3,
.modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.modal-close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: rotate(90deg);
}

@keyframes gtx-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------------------------------------------------------
   12. FLASH MESSAGES
   -------------------------------------------------------------------------- */
.flash-message {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 13px 18px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: gtx-flash-in var(--dur-slow) var(--ease-out);
}

@keyframes gtx-flash-in {
    from { opacity: 0; transform: translate(-50%, -14px) scale(0.98); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.flash-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.flash-error {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.3);
    color: #fda4af;
}

.flash-info {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

[data-theme="light"] .flash-success { color: #047857; }
[data-theme="light"] .flash-error { color: #be123c; }
[data-theme="light"] .flash-info { color: #0369a1; }

/* ----------------------------------------------------------------------------
   13. EMPTY & LOADING STATES
   -------------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: clamp(28px, 5vw, 48px) 20px;
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-strong);
    background: linear-gradient(180deg, transparent, rgba(var(--primary-rgb), 0.03));
    color: var(--text-muted);
}

.empty-state i {
    font-size: 1.5rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.empty-state h4,
.empty-state strong {
    color: var(--text-secondary);
    margin: 0;
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: transparent !important;
    min-height: 12px;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: translateX(-100%);
    animation: gtx-shimmer 1.4s infinite;
}

[data-theme="light"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(12, 21, 18, 0.06), transparent);
}

@keyframes gtx-shimmer {
    100% { transform: translateX(100%); }
}

.spinner,
.fa-spin { animation-duration: 0.85s; }

/* ----------------------------------------------------------------------------
   14. MOTION SYSTEM
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 640ms var(--ease-out), transform 720ms var(--ease-out);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Directional + scale variants (opt-in via data-reveal="up|left|right|scale|fade") */
.reveal[data-reveal="left"]  { transform: translateX(-26px); }
.reveal[data-reveal="right"] { transform: translateX(26px); }
.reveal[data-reveal="scale"] { transform: scale(0.96); }
.reveal[data-reveal="fade"]  { transform: none; }

.reveal[data-reveal="left"].active,
.reveal[data-reveal="right"].active,
.reveal[data-reveal="scale"].active,
.reveal[data-reveal="fade"].active {
    transform: none;
}

.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }

/* Generic entrance helpers for above-the-fold content */
.gtx-enter {
    animation: gtx-enter-up 760ms var(--ease-out) both;
}

.gtx-enter-1 { animation-delay: 60ms; }
.gtx-enter-2 { animation-delay: 150ms; }
.gtx-enter-3 { animation-delay: 240ms; }
.gtx-enter-4 { animation-delay: 330ms; }
.gtx-enter-5 { animation-delay: 420ms; }

@keyframes gtx-enter-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes gtx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes gtx-float-slow {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-16px) translateX(6px); }
}

@keyframes gtx-spin-slow {
    to { transform: rotate(360deg); }
}

/* Scroll progress bar (injected by js/redesign.js) */
.gtx-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    z-index: 2000;
    pointer-events: none;
    will-change: transform;
}

/* ----------------------------------------------------------------------------
   15. ACCESSIBILITY - respect reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .gtx-scroll-progress { display: none; }
}

/* ----------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .container { --container-pad: 20px; }
    .navbar .container { height: 64px; padding: 0 20px; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }

    .navbar .container {
        height: 60px;
        padding: 0 16px;
    }

    .navbar.is-scrolled .container { height: 56px; }

    .card { border-radius: var(--border-radius); }

    .btn, .gtx-btn { min-height: 42px; padding: 0.72em 1.15em; font-size: 0.89rem; }

    .table thead th { padding: 10px 12px; font-size: 0.68rem; }
    .table tbody td { padding: 11px 12px; }

    .section { padding: 44px 0; }

    .flash-message {
        left: 16px;
        right: 16px;
        transform: none;
        animation: none;
    }
}

@media (max-width: 480px) {
    .container { --container-pad: 14px; }
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.45rem; }
    .btn-lg { min-height: 48px; font-size: 0.94rem; }
}

/* ----------------------------------------------------------------------------
   17. NAVIGATION RESPONSIVENESS
   The legacy sheet hides the whole desktop menu below 1350px, which leaves
   ordinary 1280px laptops with a hamburger. Keep the inline menu down to
   1200px (compressed), and polish the mobile panel itself.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1349px) {
    .navbar .nav-toggle { display: none; }

    .navbar .nav-center {
        flex: 1;
        display: flex;
        justify-content: center;
        min-width: 0;
    }

    .navbar .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }

    .navbar .nav-link {
        padding: 7px 8px;
        font-size: 0.82rem;
        gap: 5px;
    }

    .navbar .nav-link > i:not(.nav-chevron) { display: none; }

    .navbar .nav-brand { margin-right: 14px; }

    .navbar .nav-mobile-only { display: none; }
}

/* Mobile menu panel */
@media (max-width: 1199px) {
    .navbar .nav-menu.active {
        display: flex;
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        margin: 0;
        max-height: min(72vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-xl);
        animation: gtx-menu-in 260ms var(--ease-out);
    }

    @keyframes gtx-menu-in {
        from { opacity: 0; transform: translateY(-8px) scale(0.99); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .navbar .nav-menu.active .nav-link {
        width: 100%;
        padding: 11px 12px;
        font-size: 0.9rem;
        justify-content: flex-start;
        border-radius: 10px;
        color: var(--text-primary);
    }

    .navbar .nav-menu.active .nav-link.active {
        background: rgba(var(--primary-rgb), 0.12);
    }

    .navbar .nav-menu.active .nav-link.active::after { display: none; }

    .navbar .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin: 4px 0 8px;
        box-shadow: none;
        border-color: var(--border-color);
        background: var(--bg-secondary);
    }

    .navbar .nav-mobile-only { display: list-item; }
}

/* Keep the Growthinks wordmark visible on small screens - the legacy sheet
   hides it and leaves only a 28px mark, which reads as an empty navbar. */
@media (max-width: 768px) {
    .navbar .nav-brand .logo span:last-child { display: inline; }
    .navbar .nav-brand .logo { font-size: 1.06rem; gap: 7px; }
    .navbar .nav-brand .logo-mark { width: 24px; height: 24px; }
    .navbar .nav-brand { margin-right: 10px; }
}

/* In the 1200-1349px band the inline menu is restored, so the auth buttons
   must be restored with it - otherwise there is no visible sign-in path. */
@media (min-width: 1200px) and (max-width: 1349px) {
    .navbar .nav-actions .btn-nav-login,
    .navbar .nav-actions .btn-nav-register {
        display: inline-flex;
        min-height: 36px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    .navbar .nav-actions { gap: 6px; }
}

/* ----------------------------------------------------------------------------
   18. AUTH EXPERIENCE (.gtx-*) - align with the new palette
   The gtx-auth components ship their own hardcoded "vintage" palette inside
   style.css. These overrides use the same selector specificity, loaded later,
   so the login/register/verify screens match the rest of the redesign.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .gtx-auth {
    --gtx-bg-grad: linear-gradient(160deg, #0b1210 0%, #080d0b 55%, #050807 100%);
    --gtx-grain-opacity: 0;

    --gtx-text: #e9f0ed;
    --gtx-text-dim: #a3b4ad;
    --gtx-text-muted: #6f827b;
    --gtx-text-faint: #52625b;
    --gtx-label: #9fb0a8;
    --gtx-icon: #6f827b;

    --gtx-card-bg: rgba(17, 23, 21, 0.93);
    --gtx-card-border: rgba(255, 255, 255, 0.08);
    --gtx-surface: rgba(255, 255, 255, 0.04);
    --gtx-surface-border: rgba(255, 255, 255, 0.09);
    --gtx-surface-hover: rgba(255, 255, 255, 0.08);

    --gtx-accent: #10b981;
    --gtx-accent-2: #34d399;
    --gtx-accent-soft: rgba(16, 185, 129, 0.14);
    --gtx-accent-border: rgba(16, 185, 129, 0.26);
    --gtx-input-focus-border: rgba(16, 185, 129, 0.65);
    --gtx-tag-bg: rgba(16, 185, 129, 0.12);
    --gtx-tag-border: rgba(16, 185, 129, 0.22);
    --gtx-tag-text: #c3d6ce;
    --gtx-btn-shadow: rgba(16, 185, 129, 0.30);
    --gtx-btn-hover-shadow: rgba(16, 185, 129, 0.42);
    --gtx-btn-primary-text: #04120d;
    --gtx-trust-text: #6f827b;
}

[data-theme="light"] .gtx-auth {
    --gtx-bg-grad: linear-gradient(160deg, #f9fcfa 0%, #eef4f1 55%, #e6efea 100%);
    --gtx-grain-opacity: 0;

    --gtx-text: #0b1512;
    --gtx-text-dim: #47584f;
    --gtx-text-muted: #74857e;
    --gtx-text-faint: #8b9a94;
    --gtx-label: #5b6b64;
    --gtx-icon: #74857e;

    --gtx-card-bg: rgba(255, 255, 255, 0.95);
    --gtx-card-border: rgba(12, 21, 18, 0.08);
    --gtx-surface: rgba(12, 21, 18, 0.03);
    --gtx-surface-border: rgba(12, 21, 18, 0.08);
    --gtx-surface-hover: rgba(12, 21, 18, 0.06);

    --gtx-accent: #059669;
    --gtx-accent-2: #10b981;
    --gtx-accent-soft: rgba(5, 150, 105, 0.10);
    --gtx-accent-border: rgba(5, 150, 105, 0.22);
    --gtx-input-focus-border: rgba(5, 150, 105, 0.55);
    --gtx-tag-bg: rgba(5, 150, 105, 0.09);
    --gtx-tag-border: rgba(5, 150, 105, 0.2);
    --gtx-tag-text: #2f4a40;
    --gtx-btn-shadow: rgba(5, 150, 105, 0.22);
    --gtx-btn-hover-shadow: rgba(5, 150, 105, 0.32);
    --gtx-btn-primary-text: #04120d;
    --gtx-trust-text: #74857e;
}

/* Softer card edge instead of the vintage double border + grain */
.gtx-card {
    border-radius: 22px;
    box-shadow: var(--shadow-xl);
}

@media (prefers-reduced-motion: reduce) {
    .gtx-card,
    .gtx-btn { transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------------------------
   19. BUTTON TEXT CONTRAST GUARD
   `[data-theme="light"] a` is more specific than a bare `.btn-primary`, which
   left primary buttons with dark-green-on-green text. These rules use an
   element+class selector (equal specificity, later in cascade) so link colours
   can never bleed into buttons.
   -------------------------------------------------------------------------- */
a.btn-primary,
a.btn-primary:hover,
a.gtx-btn-primary,
a.gtx-btn-primary:hover {
    color: #04120d;
}

a.btn-secondary,
a.btn-secondary:hover,
a.btn-outline,
a.btn-outline:hover,
a.btn-success,
a.btn-success:hover {
    color: var(--text-primary);
}

a.btn-danger,
a.btn-danger:hover {
    color: #ffffff;
}

a.btn-nav-login,
a.btn-nav-login:hover {
    color: var(--text-primary);
}

a.btn-nav-register,
a.btn-nav-register:hover {
    color: #04120d;
}

a.btn-premium,
a.btn-premium:hover {
    color: #231705;
}

a.btn-premium-outline,
a.btn-premium-outline:hover {
    color: #b45309;
}

[data-theme="dark"] a.btn-premium-outline,
[data-theme="dark"] a.btn-premium-outline:hover {
    color: #fbbf24;
}

/* Landing CTAs sit on tinted panels; keep them readable in both themes */
a.lp-feature-link,
a.lp-feature-link:hover {
    color: var(--primary-light);
}

[data-theme="light"] a.lp-feature-link,
[data-theme="light"] a.lp-feature-link:hover {
    color: var(--primary-dark);
}

/* The legacy sheet ends with `!important` colours for the two navbar auth
   buttons (white on blue / green-on-green). Match that weight so the header
   keeps the new palette and readable contrast. */
.navbar .nav-actions .btn-nav-register,
.navbar .nav-actions a.btn-nav-register {
    color: #04120d !important;
    background: linear-gradient(180deg, var(--primary-light), var(--primary-color));
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar .nav-actions .btn-nav-login,
.navbar .nav-actions a.btn-nav-login {
    color: var(--text-primary) !important;
    background: transparent;
    border: 1px solid var(--border-strong);
}

.navbar .nav-actions .btn-nav-login:hover,
.navbar .nav-actions a.btn-nav-login:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* The hero accent gradient needs a darker ramp on white - the mint mid-stop
   is unreadable on a light background. */
[data-theme="light"] .lp-title-accent {
    background: linear-gradient(100deg, #047857 5%, #0f766e 45%, #0369a1 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme="light"] .lp-title-accent::after {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.5), rgba(3, 105, 161, 0.35));
}

/* ----------------------------------------------------------------------------
   ASSET LOGOS
   One wrapper drives every instrument logo in the product. The initials badge
   sits underneath the image, so if a logo is missing the badge shows instead
   of a broken image icon.
   -------------------------------------------------------------------------- */
.gtx-asset-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--logo-size, 32px);
    height: var(--logo-size, 32px);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border-color);
    overflow: hidden;
    vertical-align: middle;
    isolation: isolate;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

[data-theme="light"] .gtx-asset-logo {
    background: #ffffff;
    border-color: rgba(12, 21, 18, 0.10);
}

.gtx-asset-logo .gtx-asset-img {
    position: relative;
    z-index: 1;
    width: 76%;
    height: 76%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    display: block;
}

.gtx-asset-logo.is-fallback .gtx-asset-img {
    display: none;
}

.gtx-asset-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: calc(var(--logo-size, 32px) * 0.34);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: rgba(var(--primary-rgb), 0.10);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
}

.gtx-asset-logo.is-fallback .gtx-asset-fallback {
    opacity: 1;
}

/* Sizes used across surfaces */
.gtx-asset-logo.is-sm { border-radius: 8px; }
.gtx-asset-logo.is-lg { border-radius: 12px; }

/* Inside dark table rows the chip should not glow */
td .gtx-asset-logo,
li .gtx-asset-logo {
    margin-right: 8px;
}

/* Symbol cells that carry a logo: keep the mark and ticker on one line. */
.ht-symbol,
.tx-symbol,
.screener-table .sym,
.sym {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tx-symbol .gtx-asset-logo,
.ht-symbol .gtx-asset-logo {
    border-radius: 8px;
}

@media (max-width: 640px) {
    .ht-symbol,
    .screener-table .sym,
    .sym {
        gap: 6px;
    }
}

/* Watchlist rows in the profile page */
.pf-wl-logo {
    flex: 0 0 auto;
}

.charts-symbol-logo {
    flex: 0 0 auto;
    margin-right: 2px;
}

/* ----------------------------------------------------------------------------
   PERFORMANCE AND TOUCH
   Cheap wins that keep the approved look: no hover repaints on touch devices,
   no 300ms tap delay, and scroll containers that never trap the page.
   -------------------------------------------------------------------------- */
a,
button,
.nav-toggle,
.btn,
[role="button"] {
    touch-action: manipulation;
}

@media (hover: none) {
    /* Touch screens cannot hover, so skip hover-only shadows and lifts. */
    .lp-feature-card:hover,
    .lp-stat:hover,
    .pf-card:hover,
    .card:hover,
    .holdings-table tbody tr:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ----------------------------------------------------------------------------
   MOBILE DATA TABLES AS CARDS
   Below 640px a ten column financial table cannot be read by squeezing it.
   Rows become compact cards, labelled by the data-label attribute, so no
   information or behaviour is lost.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .holdings-table thead,
    .screener-table thead {
        display: none !important;
    }

    .holdings-table,
    .holdings-table tbody,
    .screener-table,
    .screener-table tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .holdings-table tbody tr,
    .screener-table tbody tr {
        display: block !important;
        position: relative;
        margin: 0 0 12px;
        padding: 14px 16px !important;
        background: var(--bg-card, #121715);
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        border-radius: 14px;
        box-shadow: none;
    }

    .holdings-table tbody td,
    .screener-table tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: auto !important;
        padding: 5px 0 !important;
        border: 0 !important;
        font-size: 0.82rem !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .holdings-table tbody td::before,
    .screener-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-muted, #8b9a94);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: left;
    }

    .holdings-table tbody td:first-child,
    .screener-table tbody td:first-child {
        margin-bottom: 6px;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        font-size: 0.95rem !important;
        justify-content: flex-start;
        text-align: left !important;
    }

    .holdings-table tbody td:first-child::before,
    .screener-table tbody td:first-child::before {
        display: none;
    }

    .holdings-table .ht-name,
    .screener-table .name {
        max-width: none !important;
        white-space: normal !important;
        text-align: right;
    }

    .holdings-table-wrap,
    .screener-table-wrap {
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .holdings-table-wrap::after {
        display: none !important;
    }
}

/* ----------------------------------------------------------------------------
   TOUCH TARGETS
   Anything interactive gets at least a 44px hit area on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .nav-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .lp-feature-link,
    .footer-links a,
    .footer-links li a,
    .lp-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .holdings-table tbody td,
    .screener-table tbody td {
        min-height: 38px;
    }

    /* Long ticker + name pairs never push the card wider than the screen. */
    .ht-symbol,
    .screener-table .sym,
    .sym {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Chart widgets: smaller viewport, same interaction. */
@media (max-width: 640px) {
    .chart-touch-guard {
        height: 420px !important;
        border-radius: 14px !important;
    }

    .charts-controlbar {
        padding: 10px !important;
    }

    .charts-tabs {
        width: 100%;
    }

    .charts-tabs .btn-tab {
        flex: 1 1 auto;
        min-height: 40px;
    }
}

/* ----------------------------------------------------------------------------
   COMPACT NAVBAR (320-380px)
   The action cluster must fit beside the wordmark, and every control keeps a
   40px+ touch target instead of being clipped off the edge.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .navbar .container {
        gap: 6px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-actions {
        gap: 2px;
    }

    .nav-icon-btn,
    .notif-dropdown > a,
    .notif-dropdown > button,
    .theme-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .nav-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .nav-avatar,
    .nav-user-trigger {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .nav-brand .logo {
        gap: 6px;
    }

    .nav-brand .logo span:last-child {
        font-size: 0.98rem;
        letter-spacing: -0.01em;
    }
}

/* A closed drawer is visually off canvas, so it must also be unreachable. */
.user-drawer {
    visibility: hidden;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
}

html.user-drawer-open .user-drawer {
    visibility: visible;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

@media (max-width: 380px) {
    /* The navbar switch is replaced by "Ganti tema" inside the mobile menu. */
    .nav-actions .theme-toggle {
        display: none !important;
    }
}

.theme-toggle-mobile {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Off-canvas drawer must never intercept taps while closed. */
html:not(.user-drawer-open) .user-drawer {
    pointer-events: none;
}