/* ==========================================================================
   Gizcalc design system – app.css
   Modern fintech look: calm surfaces, one strong blue, Inter throughout,
   big tabular numbers. Sections:
     1. Fonts & tokens      2. Base & typography     3. Layout
     4. Buttons             5. Forms                 6. Cards, pills, badges
     7. Tables & lists      8. Feedback (notices)    9. Bootstrap theming
     (page and component sections follow)
   ========================================================================== */

/* ── 1. Fonts & tokens ─────────────────────────────────────────────────── */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../font/Inter/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../font/Inter/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand blue */
    --gz-brand-50: #eff6ff;
    --gz-brand-100: #dbeafe;
    --gz-brand-200: #bfdbfe;
    --gz-brand-300: #93c5fd;
    --gz-brand-500: #3b82f6;
    --gz-brand-600: #2563eb;
    --gz-brand-700: #1d4ed8;
    --gz-brand-800: #1e40af;
    --gz-brand-900: #1e3a8a;

    /* Neutrals (slate) */
    --gz-gray-0: #ffffff;
    --gz-gray-25: #fbfcfe;
    --gz-gray-50: #f6f8fb;
    --gz-gray-100: #eef2f7;
    --gz-gray-200: #e3e8ef;
    --gz-gray-300: #cfd7e3;
    --gz-gray-400: #98a4b6;
    --gz-gray-500: #6b778a;
    --gz-gray-600: #4b5669;
    --gz-gray-700: #334155;
    --gz-gray-800: #1e293b;
    --gz-gray-900: #0f172a;

    /* Semantic roles */
    --gz-bg: var(--gz-gray-50);
    --gz-surface: var(--gz-gray-0);
    --gz-surface-muted: var(--gz-gray-25);
    --gz-surface-sunken: var(--gz-gray-100);
    --gz-border: var(--gz-gray-200);
    --gz-border-strong: var(--gz-gray-300);
    --gz-heading: var(--gz-gray-900);
    --gz-text: var(--gz-gray-700);
    --gz-muted: var(--gz-gray-500);
    --gz-subtle: var(--gz-gray-400);
    --gz-primary: var(--gz-brand-600);
    --gz-primary-hover: var(--gz-brand-700);
    --gz-primary-press: var(--gz-brand-800);
    --gz-primary-soft: var(--gz-brand-50);
    --gz-primary-soft-2: var(--gz-brand-100);
    --gz-on-primary: #ffffff;

    --gz-success: #047857;
    --gz-success-soft: #ecfdf5;
    --gz-success-line: #a7f3d0;
    --gz-warning: #b45309;
    --gz-warning-soft: #fffbeb;
    --gz-warning-line: #fde68a;
    --gz-danger: #dc2626;
    --gz-danger-soft: #fef2f2;
    --gz-danger-line: #fecaca;
    --gz-violet: #6d28d9;
    --gz-violet-soft: #f5f3ff;

    /* Type */
    --gz-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gz-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --gz-text-xs: 0.75rem;
    --gz-text-sm: 0.875rem;
    --gz-text-base: 1rem;
    --gz-text-lg: 1.125rem;
    --gz-text-xl: 1.25rem;
    --gz-text-2xl: 1.5rem;
    --gz-text-3xl: clamp(1.625rem, 1.2rem + 1.4vw, 2rem);
    --gz-text-4xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.625rem);
    --gz-text-5xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);

    /* Shape & depth */
    --gz-radius-xs: 6px;
    --gz-radius-sm: 8px;
    --gz-radius-md: 12px;
    --gz-radius-lg: 16px;
    --gz-radius-xl: 22px;
    --gz-radius-pill: 999px;
    --gz-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --gz-shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --gz-shadow-md: 0 10px 28px -10px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .05);
    --gz-shadow-lg: 0 24px 56px -16px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .06);
    --gz-ring: 0 0 0 4px rgba(37, 99, 235, .16);

    /* Layout */
    --gz-container: 1200px;
    --gz-gutter: 20px;
    --gz-header-h: 64px;
    --gz-ease: cubic-bezier(.2, .7, .2, 1);
    --gz-fast: 150ms;

    /* Legacy aliases – inline styles in older templates still reference these */
    --blue: var(--gz-primary);
    --blue-dark: var(--gz-primary-hover);
    --blue-hover: var(--gz-primary-press);
    --blue-light: var(--gz-primary-soft-2);
    --blue-muted: var(--gz-primary-soft);
    --primary: var(--gz-primary);
    --ink: var(--gz-heading);
    --ink-2: var(--gz-gray-800);
    --heading: var(--gz-heading);
    --text: var(--gz-text);
    --muted: var(--gz-muted);
    --muted-2: var(--gz-subtle);
    --bg: var(--gz-bg);
    --bg-2: var(--gz-surface-sunken);
    --surface: var(--gz-surface);
    --surface-2: var(--gz-surface-muted);
    --border: var(--gz-border);
    --border-2: var(--gz-border-strong);
    --success: var(--gz-success);
    --success-bg: var(--gz-success-soft);
    --success-bd: var(--gz-success-line);
    --warning: var(--gz-warning);
    --warning-bg: var(--gz-warning-soft);
    --warning-bd: var(--gz-warning-line);
    --danger: var(--gz-danger);
    --danger-bg: var(--gz-danger-soft);
    --danger-bd: var(--gz-danger-line);
    --purple: var(--gz-violet);
    --purple-bg: var(--gz-violet-soft);
    --radius-xl: var(--gz-radius-xl);
    --radius-lg: var(--gz-radius-lg);
    --radius-md: var(--gz-radius-md);
    --radius-sm: var(--gz-radius-sm);
    --shadow-xs: var(--gz-shadow-xs);
    --shadow-sm: var(--gz-shadow-sm);
    --shadow-md: var(--gz-shadow-md);
    --shadow-lg: var(--gz-shadow-lg);
    --font-body: var(--gz-font);
    --font-display: var(--gz-font);
    --cb-muted: var(--gz-muted);
    --site-width: var(--gz-container);
    --header-height: var(--gz-header-h);
    --transition: var(--gz-fast) var(--gz-ease);

    color-scheme: light;
}

/* ── 2. Base & typography ─────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--gz-header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--gz-font);
    font-size: var(--gz-text-base);
    line-height: 1.6;
    color: var(--gz-text);
    background: var(--gz-bg);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 .5em;
    font-family: var(--gz-font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--gz-heading);
}

h1, .h1 { font-size: var(--gz-text-4xl); font-weight: 750; letter-spacing: -0.03em; }
h2, .h2 { font-size: var(--gz-text-3xl); letter-spacing: -0.025em; }
h3, .h3 { font-size: var(--gz-text-xl); }
h4, .h4 { font-size: var(--gz-text-lg); }
h5, .h5 { font-size: var(--gz-text-base); }
h6, .h6 { font-size: var(--gz-text-sm); }

p { margin: 0 0 1rem; }

a {
    color: var(--gz-primary);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--gz-fast) var(--gz-ease);
}

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

strong, b { font-weight: 650; color: inherit; }

small, .small { font-size: var(--gz-text-sm); }

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

code {
    padding: .1em .35em;
    border-radius: var(--gz-radius-xs);
    background: var(--gz-surface-sunken);
    color: var(--gz-gray-800);
}

kbd {
    display: inline-block;
    padding: .1em .45em;
    border: 1px solid var(--gz-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--gz-radius-xs);
    background: var(--gz-surface);
    color: var(--gz-muted);
    font-size: .75em;
    font-weight: 600;
    line-height: 1.4;
}

hr { border: 0; border-top: 1px solid var(--gz-border); opacity: 1; margin: 1.5rem 0; }

img, svg, video, canvas { max-width: 100%; }

img { height: auto; }

::selection { background: var(--gz-brand-100); color: var(--gz-brand-900); }

:focus-visible {
    outline: 2px solid var(--gz-primary);
    outline-offset: 2px;
}

.gz-num,
[data-result-primary],
.cb-summary-item strong,
.cb-data-table td {
    font-variant-numeric: tabular-nums;
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gz-skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    padding: .6rem 1rem;
    border-radius: var(--gz-radius-sm);
    background: var(--gz-heading);
    color: #fff;
    font-weight: 600;
}

.gz-skip-link:focus { top: 12px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 3. Layout ────────────────────────────────────────────────────────── */

.container,
.gz-container {
    width: 100%;
    max-width: calc(var(--gz-container) + var(--gz-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gz-gutter);
}

.gz-container--narrow { max-width: calc(820px + var(--gz-gutter) * 2); }
.gz-container--prose { max-width: calc(760px + var(--gz-gutter) * 2); }

main { display: block; min-height: 50vh; }

.cb-section,
.gz-section {
    padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}

.cb-section--tight,
.gz-section--tight { padding-block: 2rem; }

.gz-section--muted { background: var(--gz-surface); border-block: 1px solid var(--gz-border); }

.gz-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.gz-section-head h2 { margin: 0; }

.gz-section-head p {
    margin: .4rem 0 0;
    max-width: 62ch;
    color: var(--gz-muted);
}

.gz-eyebrow,
.cb-eyebrow,
.cb-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .6rem;
    color: var(--gz-primary);
    font-size: var(--gz-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gz-grid {
    display: grid;
    gap: 1rem;
}

.gz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gz-grid--auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

@media (max-width: 991.98px) {
    .gz-grid--3, .gz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    :root { --gz-gutter: 16px; }
    .gz-grid--2, .gz-grid--3, .gz-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── 4. Buttons ───────────────────────────────────────────────────────── */

.cb-btn,
.gz-btn {
    --gz-btn-bg: var(--gz-surface);
    --gz-btn-fg: var(--gz-heading);
    --gz-btn-bd: var(--gz-border-strong);
    --gz-btn-bg-hover: var(--gz-surface-sunken);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .55rem 1.05rem;
    border: 1px solid var(--gz-btn-bd);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-btn-bg);
    color: var(--gz-btn-fg);
    font-family: var(--gz-font);
    font-size: var(--gz-text-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--gz-shadow-xs);
    transition: background-color var(--gz-fast) var(--gz-ease), border-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease), transform var(--gz-fast) var(--gz-ease);
    -webkit-user-select: none;
    user-select: none;
}

.cb-btn:hover,
.gz-btn:hover {
    background: var(--gz-btn-bg-hover);
    color: var(--gz-btn-fg);
    border-color: var(--gz-btn-bd);
}

.cb-btn:active,
.gz-btn:active { transform: translateY(1px); }

.cb-btn:focus-visible,
.gz-btn:focus-visible { outline: none; box-shadow: var(--gz-ring); }

.cb-btn:disabled,
.gz-btn:disabled,
.cb-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

.cb-btn--primary,
.gz-btn--primary {
    --gz-btn-bg: var(--gz-primary);
    --gz-btn-fg: var(--gz-on-primary);
    --gz-btn-bd: var(--gz-primary);
    --gz-btn-bg-hover: var(--gz-primary-hover);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.cb-btn--primary:hover,
.gz-btn--primary:hover { border-color: var(--gz-primary-hover); }

.cb-btn--secondary,
.cb-btn--soft,
.gz-btn--soft {
    --gz-btn-bg: var(--gz-primary-soft);
    --gz-btn-fg: var(--gz-brand-800);
    --gz-btn-bd: transparent;
    --gz-btn-bg-hover: var(--gz-primary-soft-2);
    box-shadow: none;
}

.cb-btn--ghost,
.gz-btn--ghost {
    --gz-btn-bg: transparent;
    --gz-btn-fg: var(--gz-text);
    --gz-btn-bd: transparent;
    --gz-btn-bg-hover: var(--gz-surface-sunken);
    box-shadow: none;
}

.cb-btn--outline,
.gz-btn--outline {
    --gz-btn-bg: var(--gz-surface);
    --gz-btn-fg: var(--gz-heading);
    --gz-btn-bd: var(--gz-border-strong);
}

.cb-btn--danger,
.gz-btn--danger {
    --gz-btn-bg: var(--gz-danger);
    --gz-btn-fg: #fff;
    --gz-btn-bd: var(--gz-danger);
    --gz-btn-bg-hover: #b91c1c;
}

.cb-btn--small,
.cb-btn--sm,
.gz-btn--sm {
    min-height: 34px;
    padding: .4rem .75rem;
    border-radius: var(--gz-radius-xs);
    font-size: .8125rem;
}

.cb-btn--lg,
.gz-btn--lg {
    min-height: 50px;
    padding: .75rem 1.4rem;
    border-radius: var(--gz-radius-md);
    font-size: var(--gz-text-base);
}

.cb-btn--block,
.gz-btn--block { display: flex; width: 100%; }

.gz-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--gz-radius-sm);
    background: transparent;
    color: var(--gz-muted);
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.gz-icon-btn:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.cb-inline-link,
.gz-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--gz-primary);
    font-weight: 600;
}

.cb-inline-link:hover,
.gz-link:hover { color: var(--gz-primary-hover); text-decoration: underline; }

/* ── 5. Forms ─────────────────────────────────────────────────────────── */

label { color: var(--gz-heading); }

.gz-input,
.cb-form-input,
.cb-form-card input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
.cb-form-card select,
.cb-form-card textarea,
.cb-auth-card input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.cb-auth-card select,
.cb-auth-card textarea,
.gz-form input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
.gz-form select,
.gz-form textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--gz-border-strong);
    border-radius: var(--gz-radius-sm);
    background-color: var(--gz-surface);
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: var(--gz-text-base);
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--gz-shadow-xs);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease), background-color var(--gz-fast) var(--gz-ease);
    -webkit-appearance: none;
    appearance: none;
}

.cb-form-card textarea,
.gz-form textarea,
.cb-auth-card textarea { min-height: 96px; resize: vertical; font-family: var(--gz-font-mono); font-size: var(--gz-text-sm); }

.cb-form-card select,
.gz-form select,
.cb-auth-card select,
select.gz-input,
select.cb-form-input {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b778a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 16px;
    cursor: pointer;
}

.gz-input:hover,
.cb-form-input:hover,
.cb-form-card input:hover,
.cb-form-card select:hover,
.cb-form-card textarea:hover,
.gz-form input:hover,
.gz-form select:hover,
.gz-form textarea:hover { border-color: var(--gz-gray-400); }

.gz-input:focus,
.cb-form-input:focus,
.cb-form-card input:focus,
.cb-form-card select:focus,
.cb-form-card textarea:focus,
.cb-auth-card input:focus,
.cb-auth-card select:focus,
.cb-auth-card textarea:focus,
.gz-form input:focus,
.gz-form select:focus,
.gz-form textarea:focus {
    outline: none;
    border-color: var(--gz-primary);
    box-shadow: var(--gz-ring);
}

.cb-form-card input:invalid:not(:placeholder-shown):not(:focus),
.gz-form input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--gz-danger); }

input::placeholder,
textarea::placeholder { color: var(--gz-subtle); opacity: 1; }

/* Hide number spinners – values are typed or set with sliders */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

input[type='checkbox'],
input[type='radio'] { accent-color: var(--gz-primary); width: 1.05rem; height: 1.05rem; }

/* Range slider with filled track (site.js sets --range-progress) */
input[type='range'] {
    --range-progress: 50%;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--gz-primary) 0, var(--gz-primary) var(--range-progress), var(--gz-gray-200) var(--range-progress));
}

input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gz-gray-200); }
input[type='range']::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--gz-primary); }

input[type='range']::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--gz-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .28), 0 0 0 1px rgba(37, 99, 235, .25);
    -webkit-appearance: none;
    transition: transform var(--gz-fast) var(--gz-ease);
}

input[type='range']::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--gz-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
}

input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: var(--gz-ring); }

.cb-field-group,
.gz-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1.1rem;
    min-width: 0;
}

.cb-field-group > label,
.gz-field > label,
.gz-label {
    margin: 0;
    color: var(--gz-heading);
    font-size: var(--gz-text-sm);
    font-weight: 600;
    line-height: 1.35;
}

.cb-field-help,
.gz-help {
    color: var(--gz-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.cb-field-row {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Slider + input: the number box sits first, slider beneath */
.cb-field-row--range input[type='range'] { order: 2; }

.cb-password-field { position: relative; display: block; width: 100%; }

.cb-password-field input { padding-right: 2.9rem !important; }

.cb-password-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--gz-radius-xs);
    background: transparent;
    color: var(--gz-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.cb-password-toggle:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

/* Segmented radio group (e.g. years / months) */
.cb-toggle,
.cb-radio-group,
.gz-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface-sunken);
}

.cb-toggle label,
.cb-radio-group label,
.gz-segmented label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .3rem .7rem;
    border-radius: 6px;
    color: var(--gz-muted);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.cb-toggle input,
.cb-radio-group input,
.gz-segmented input { position: absolute; opacity: 0; pointer-events: none; }

.cb-toggle label:has(input:checked),
.cb-radio-group label:has(input:checked),
.gz-segmented label:has(input:checked) {
    background: var(--gz-surface);
    color: var(--gz-heading);
    box-shadow: var(--gz-shadow-sm);
}

.cb-toggle label:has(input:focus-visible),
.cb-radio-group label:has(input:focus-visible) { box-shadow: var(--gz-ring); }

/* ── 6. Cards, pills, badges ──────────────────────────────────────────── */

.gz-card,
.cb-card {
    position: relative;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.gz-card--pad,
.cb-card.p-4 { padding: clamp(1.1rem, .8rem + 1vw, 1.6rem); }

.gz-card--hover {
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease), transform var(--gz-fast) var(--gz-ease);
}

.gz-card--hover:hover {
    border-color: var(--gz-brand-200);
    box-shadow: var(--gz-shadow-md);
    transform: translateY(-2px);
}

.cb-pill,
.gz-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    padding: .2rem .6rem;
    border: 1px solid var(--gz-brand-100);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-800);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gz-pill--neutral { border-color: var(--gz-border); background: var(--gz-surface-sunken); color: var(--gz-gray-600); }
.gz-pill--success { border-color: var(--gz-success-line); background: var(--gz-success-soft); color: var(--gz-success); }
.gz-pill--warning { border-color: var(--gz-warning-line); background: var(--gz-warning-soft); color: var(--gz-warning); }
.gz-pill--danger { border-color: var(--gz-danger-line); background: var(--gz-danger-soft); color: var(--gz-danger); }

.gz-chip,
.cb-chip,
.cb-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-text);
    font-size: var(--gz-text-sm);
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease), background-color var(--gz-fast) var(--gz-ease);
}

.gz-chip:hover,
.cb-chip:hover,
.cb-tag:hover { border-color: var(--gz-brand-300); color: var(--gz-primary); background: var(--gz-primary-soft); }

.gz-chip.is-active,
.cb-chip.is-active,
.cb-chip.active { border-color: var(--gz-primary); background: var(--gz-primary); color: #fff; }

.gz-icon-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--gz-radius-md);
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
    font-size: 1.1rem;
}

.gz-icon-tile--sm { width: 36px; height: 36px; border-radius: 10px; font-size: .95rem; }
.gz-icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.4rem; }

/* Category accent hues – set with style="--hue:…" or .gz-hue-N */
.gz-hue { --tile-bg: color-mix(in srgb, var(--hue, #2563eb) 11%, #fff); --tile-fg: var(--hue, #2563eb); }
.gz-hue .gz-icon-tile,
.gz-icon-tile.gz-hue { background: var(--tile-bg); color: var(--tile-fg); }

/* ── 7. Tables & lists ────────────────────────────────────────────────── */

.gz-table-wrap,
.cb-table-scroll,
.cb-data-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
    -webkit-overflow-scrolling: touch;
}

.gz-table,
.cb-data-table,
.cb-table-scroll table,
.cb-article-prose table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--gz-text-sm);
}

.gz-table th,
.cb-data-table th,
.cb-table-scroll th,
.cb-article-prose th {
    position: sticky;
    top: 0;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
    color: var(--gz-muted);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.gz-table td,
.cb-data-table td,
.cb-table-scroll td,
.cb-article-prose td {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--gz-gray-100);
    color: var(--gz-text);
    vertical-align: top;
}

.gz-table tbody tr:last-child td,
.cb-data-table tbody tr:last-child td,
.cb-table-scroll tbody tr:last-child td { border-bottom: 0; }

.gz-table tbody tr:hover td,
.cb-data-table tbody tr:hover td { background: var(--gz-surface-muted); }

.cb-data-table td:not(:first-child),
.cb-data-table th:not(:first-child) { text-align: right; }

.gz-list-plain { margin: 0; padding: 0; list-style: none; }

/* ── 8. Feedback: notices, alerts, empty states ───────────────────────── */

.gz-notice,
.cb-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border: 1px solid var(--gz-brand-100);
    border-radius: var(--gz-radius-md);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-900);
    font-size: var(--gz-text-sm);
    line-height: 1.55;
}

.gz-notice > i { margin-top: .2rem; }
.gz-notice p:last-child { margin-bottom: 0; }

.gz-notice--warning,
.cb-notice--warning { border-color: var(--gz-warning-line); background: var(--gz-warning-soft); color: #78350f; }
.gz-notice--success,
.cb-notice--success { border-color: var(--gz-success-line); background: var(--gz-success-soft); color: #064e3b; }
.gz-notice--danger,
.cb-notice--error,
.cb-notice--danger { border-color: var(--gz-danger-line); background: var(--gz-danger-soft); color: #7f1d1d; }
.gz-notice--neutral { border-color: var(--gz-border); background: var(--gz-surface-muted); color: var(--gz-text); }

.gz-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--gz-border-strong);
    border-radius: var(--gz-radius-lg);
    color: var(--gz-muted);
    text-align: center;
}

.gz-empty i { font-size: 1.6rem; color: var(--gz-subtle); }

/* ── 9. Bootstrap theming (admin and shared components) ──────────────── */

:root,
[data-bs-theme='light'] {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1e3a8a;
    --bs-primary-bg-subtle: #eff6ff;
    --bs-primary-border-subtle: #bfdbfe;
    --bs-secondary-color: #6b778a;
    --bs-body-font-family: var(--gz-font);
    --bs-body-font-size: 1rem;
    --bs-body-color: #334155;
    --bs-body-color-rgb: 51, 65, 85;
    --bs-body-bg: #f6f8fb;
    --bs-emphasis-color: #0f172a;
    --bs-heading-color: #0f172a;
    --bs-border-color: #e3e8ef;
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-focus-ring-color: rgba(37, 99, 235, .2);
    --bs-success: #047857;
    --bs-success-rgb: 4, 120, 87;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: #0284c7;
    --bs-info-rgb: 2, 132, 199;
}

.btn {
    --bs-btn-font-family: var(--gz-font);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .875rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: 8px;
    --bs-btn-focus-box-shadow: var(--gz-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 6px; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 12px; }

.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}

.btn-outline-primary {
    --bs-btn-color: #2563eb;
    --bs-btn-border-color: #bfdbfe;
    --bs-btn-hover-bg: #eff6ff;
    --bs-btn-hover-color: #1d4ed8;
    --bs-btn-hover-border-color: #93c5fd;
    --bs-btn-active-bg: #dbeafe;
    --bs-btn-active-color: #1e40af;
    --bs-btn-active-border-color: #93c5fd;
}

.btn-outline-secondary,
.btn-light {
    --bs-btn-color: #334155;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cfd7e3;
    --bs-btn-hover-bg: #eef2f7;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-border-color: #cfd7e3;
    --bs-btn-active-bg: #e3e8ef;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-border-color: #cfd7e3;
}

.btn-success { --bs-btn-bg: #047857; --bs-btn-border-color: #047857; --bs-btn-hover-bg: #065f46; --bs-btn-hover-border-color: #065f46; }
.btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; }
.btn-outline-danger { --bs-btn-color: #dc2626; --bs-btn-border-color: #fecaca; --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-color: #b91c1c; --bs-btn-hover-border-color: #fca5a5; }

.form-control,
.form-select {
    min-height: 42px;
    border-color: var(--gz-border-strong);
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
    font-size: .9375rem;
    box-shadow: var(--gz-shadow-xs);
}

.form-control-sm, .form-select-sm { min-height: 34px; font-size: .8125rem; }
.form-control:focus, .form-select:focus { border-color: var(--gz-primary); box-shadow: var(--gz-ring); }
.form-label { margin-bottom: .35rem; color: var(--gz-heading); font-size: var(--gz-text-sm); font-weight: 600; }
.form-text { color: var(--gz-muted); font-size: .8125rem; }
.form-check-input:checked { background-color: var(--gz-primary); border-color: var(--gz-primary); }
.form-check-input:focus { box-shadow: var(--gz-ring); border-color: var(--gz-brand-300); }
.form-switch .form-check-input { width: 2.3em; }

.table {
    --bs-table-color: var(--gz-text);
    --bs-table-border-color: var(--gz-gray-100);
    --bs-table-hover-bg: var(--gz-surface-muted);
    --bs-table-striped-bg: var(--gz-surface-muted);
    font-size: var(--gz-text-sm);
}

.table > thead th {
    border-bottom-color: var(--gz-border);
    background: var(--gz-surface-muted);
    color: var(--gz-muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table > :not(caption) > * > * { padding: .7rem .85rem; }

.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .35em .6em; }

.card {
    --bs-card-border-color: var(--gz-border);
    --bs-card-border-radius: var(--gz-radius-lg);
    --bs-card-inner-border-radius: calc(var(--gz-radius-lg) - 1px);
    --bs-card-cap-bg: var(--gz-surface-muted);
    box-shadow: var(--gz-shadow-xs);
}

.alert { --bs-alert-border-radius: var(--gz-radius-md); font-size: var(--gz-text-sm); }
.alert-success { --bs-alert-color: #064e3b; --bs-alert-bg: #ecfdf5; --bs-alert-border-color: #a7f3d0; }
.alert-danger { --bs-alert-color: #7f1d1d; --bs-alert-bg: #fef2f2; --bs-alert-border-color: #fecaca; }
.alert-warning { --bs-alert-color: #78350f; --bs-alert-bg: #fffbeb; --bs-alert-border-color: #fde68a; }
.alert-info { --bs-alert-color: #1e3a8a; --bs-alert-bg: #eff6ff; --bs-alert-border-color: #bfdbfe; }

.dropdown-menu {
    --bs-dropdown-border-color: var(--gz-border);
    --bs-dropdown-border-radius: var(--gz-radius-md);
    --bs-dropdown-link-hover-bg: var(--gz-surface-sunken);
    --bs-dropdown-link-active-bg: var(--gz-primary);
    --bs-dropdown-font-size: var(--gz-text-sm);
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-item-padding-y: .45rem;
    box-shadow: var(--gz-shadow-lg);
}

.dropdown-item { border-radius: 6px; margin-inline: .35rem; width: auto; }

/* The site's minimal Bootstrap JS has no Popper, so Bootstrap never applies its
   [data-bs-popper] placement rules and .dropdown-menu-end would open from the toggle's left
   edge, running off the right side of the screen. Align it to the toggle's right edge here. */
.dropdown-menu-end { top: 100%; right: 0; left: auto; max-width: calc(100vw - 24px); }

.nav-tabs { --bs-nav-tabs-border-color: var(--gz-border); --bs-nav-tabs-link-active-border-color: var(--gz-border) var(--gz-border) var(--gz-surface); }
.nav-link { font-weight: 550; }

.modal {
    --bs-modal-border-radius: var(--gz-radius-lg);
    --bs-modal-border-color: var(--gz-border);
    --bs-modal-header-border-color: var(--gz-border);
    --bs-modal-footer-border-color: var(--gz-border);
}

.accordion {
    --bs-accordion-border-color: var(--gz-border);
    --bs-accordion-border-radius: var(--gz-radius-md);
    --bs-accordion-inner-border-radius: calc(var(--gz-radius-md) - 1px);
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-padding-x: 1.15rem;
    --bs-accordion-btn-color: var(--gz-heading);
    --bs-accordion-active-color: var(--gz-heading);
    --bs-accordion-active-bg: var(--gz-surface);
    --bs-accordion-btn-focus-box-shadow: var(--gz-ring);
    --bs-accordion-body-padding-x: 1.15rem;
    --bs-accordion-body-padding-y: 0 1.1rem;
}

.accordion-button { font-weight: 600; font-size: .98rem; line-height: 1.45; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-top: 0; color: var(--gz-text); line-height: 1.65; }

.pagination {
    --bs-pagination-border-color: var(--gz-border);
    --bs-pagination-border-radius: var(--gz-radius-sm);
    --bs-pagination-hover-bg: var(--gz-surface-sunken);
    --bs-pagination-active-bg: var(--gz-primary);
    --bs-pagination-active-border-color: var(--gz-primary);
    --bs-pagination-color: var(--gz-text);
    gap: .3rem;
}

.pagination .page-link { border-radius: var(--gz-radius-sm) !important; font-weight: 600; font-size: var(--gz-text-sm); }

.text-secondary { color: var(--gz-muted) !important; }
.text-muted { color: var(--gz-muted) !important; }
.text-primary { color: var(--gz-primary) !important; }
.bg-light { background-color: var(--gz-surface-muted) !important; }
.shadow-sm { box-shadow: var(--gz-shadow-sm) !important; }
.border { border-color: var(--gz-border) !important; }
.rounded-3 { border-radius: var(--gz-radius-md) !important; }
.rounded-4 { border-radius: var(--gz-radius-lg) !important; }
.bg-surface { background: var(--gz-surface) !important; }


/* ==========================================================================
   10. Site chrome – header, mega menu, search, drawer, footer, overlays
   ========================================================================== */

:root { --gz-accent: #f97316; --gz-accent-soft: #fff7ed; }

/* Category accent hues (used by icon tiles across the site) */
[data-cat='finance'] { --hue: #2563eb; }
[data-cat='tax-compliance'] { --hue: #7c3aed; }
[data-cat='loan-credit'] { --hue: #0891b2; }
[data-cat='real-estate'] { --hue: #ea580c; }
[data-cat='business-accounting'] { --hue: #0d9488; }
[data-cat='math-statistics'] { --hue: #4f46e5; }
[data-cat='health-fitness'] { --hue: #e11d48; }
[data-cat='engineering'] { --hue: #475569; }
[data-cat='science-physics'] { --hue: #9333ea; }
[data-cat='salary-hr'] { --hue: #059669; }
[data-cat='crypto-trading'] { --hue: #d97706; }
[data-cat='education'] { --hue: #0284c7; }
[data-cat='unit-conversions'] { --hue: #65a30d; }
[data-cat='date-time'] { --hue: #db2777; }
[data-cat='food-nutrition'] { --hue: #16a34a; }
[data-cat='ai-powered-tools'] { --hue: #6366f1; }
[data-cat='regional-localization'] { --hue: #c2410c; }
[data-cat='emerging-niche'] { --hue: #be185d; }

[data-cat] {
    --tile-bg: color-mix(in srgb, var(--hue) 10%, #ffffff);
    --tile-fg: var(--hue);
    --tile-line: color-mix(in srgb, var(--hue) 22%, #ffffff);
}

[data-cat] .gz-icon-tile,
.gz-icon-tile[data-cat] { background: var(--tile-bg); color: var(--tile-fg); }

/* ── Header ───────────────────────────────────────────────────────────── */

.gz-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--gz-border);
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

.gz-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--gz-header-h);
}

.gz-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    border-radius: var(--gz-radius-xs);
}

.gz-logo img {
    display: block;
    width: auto;
    height: 60px;
}

.gz-nav { flex: 1 1 auto; min-width: 0; }

.gz-nav__list {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gz-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 38px;
    padding: 0 .75rem;
    border: 0;
    border-radius: var(--gz-radius-sm);
    background: transparent;
    color: var(--gz-gray-600);
    font-size: .9375rem;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.gz-nav__link:hover,
.gz-nav__link[aria-expanded='true'] { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.gz-nav__link.is-active { color: var(--gz-heading); background: var(--gz-surface-sunken); }

.gz-nav__link .fa-chevron-down { font-size: .65rem; transition: transform var(--gz-fast) var(--gz-ease); }
.gz-nav__link[aria-expanded='true'] .fa-chevron-down { transform: rotate(180deg); }

/* Mega menu (Bootstrap dropdown) */
.gz-mega.dropdown-menu {
    --bs-dropdown-min-width: 0;
    width: min(780px, calc(100vw - 32px));
    margin-top: 10px !important;
    padding: 0;
    border-radius: var(--gz-radius-lg);
    overflow: hidden;
}

.gz-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .15rem;
    padding: .75rem;
}

.gz-mega__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: var(--gz-radius-md);
    color: var(--gz-heading);
    transition: background-color var(--gz-fast) var(--gz-ease);
}

.gz-mega__item:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.gz-mega__item strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.gz-mega__item small { display: block; color: var(--gz-muted); font-size: .75rem; line-height: 1.3; }

.gz-mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
}

.gz-mega__popular { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8125rem; color: var(--gz-muted); }

.gz-mega__popular a {
    padding: .2rem .55rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-text);
    font-weight: 550;
}

.gz-mega__popular a:hover { border-color: var(--gz-brand-300); color: var(--gz-primary); }

.gz-header__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: auto;
}

/* Search */
.gz-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 260px;
}

.gz-search > i {
    position: absolute;
    left: .8rem;
    color: var(--gz-subtle);
    font-size: .85rem;
    pointer-events: none;
}

.gz-search input {
    width: 100%;
    height: 40px;
    padding: 0 2.3rem 0 2.2rem;
    border: 1px solid transparent;
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-sunken);
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: .875rem;
    transition: background-color var(--gz-fast) var(--gz-ease), border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
    -webkit-appearance: none;
    appearance: none;
}

.gz-search input::-webkit-search-cancel-button { display: none; }

.gz-search input:hover { border-color: var(--gz-border); }

.gz-search input:focus {
    outline: none;
    border-color: var(--gz-primary);
    background: var(--gz-surface);
    box-shadow: var(--gz-ring);
}

.gz-search kbd {
    position: absolute;
    right: .6rem;
    pointer-events: none;
}

.gz-search input:focus ~ kbd { opacity: 0; }

.cb-search-suggestions,
.gz-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1060;
    display: grid;
    gap: 2px;
    padding: .35rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
}

.cb-search-suggestions:empty,
.cb-search-suggestions[hidden] { display: none; }

.cb-suggestion-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
    font-size: .875rem;
    font-weight: 550;
}

.cb-suggestion-item::before {
    content: '\f1ec';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--gz-subtle);
    font-size: .8rem;
}

.cb-suggestion-item:hover,
.cb-suggestion-item:focus { background: var(--gz-primary-soft); color: var(--gz-brand-800); outline: none; }

/* Auth & user menu */
.gz-auth { display: flex; align-items: center; gap: .4rem; }

.gz-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .6rem 0 .3rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-heading);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.gz-user-btn:hover { background: var(--gz-surface-sunken); }

.gz-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gz-brand-500), var(--gz-brand-700));
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gz-user-btn__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gz-user-menu.dropdown-menu { min-width: 220px; margin-top: 8px !important; }
.gz-user-menu .dropdown-header { color: var(--gz-muted); font-size: .75rem; }
.gz-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.gz-user-menu .dropdown-item i { width: 16px; color: var(--gz-muted); text-align: center; }
.gz-user-menu form { margin: 0; }
.gz-user-menu button.dropdown-item { border: 0; background: none; font: inherit; }

.gz-header__burger { display: none; }

@media (max-width: 1199.98px) {
    .gz-search { width: 210px; }
}

@media (max-width: 991.98px) {
    .gz-nav,
    .gz-header .gz-search,
    .gz-header .gz-auth--desktop { display: none; }

    .gz-header__burger { display: inline-grid; }
    .gz-header__inner { gap: .5rem; }
    .gz-logo img { height: 50px; }
}

/* Mobile drawer (Bootstrap offcanvas) */
.gz-drawer.offcanvas {
    --bs-offcanvas-width: min(360px, 88vw);
    --bs-offcanvas-border-color: var(--gz-border);
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
}

.gz-drawer .offcanvas-header { border-bottom: 1px solid var(--gz-border); padding-block: .75rem; justify-content: space-between; }
.gz-drawer .gz-search { width: 100%; margin-bottom: 1rem; }
.gz-drawer .gz-search input { height: 44px; background: var(--gz-surface-sunken); }

.gz-drawer__section { margin-bottom: 1.25rem; }

.gz-drawer__label {
    margin: 0 0 .4rem .25rem;
    color: var(--gz-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gz-drawer__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .5rem;
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
    font-weight: 550;
}

.gz-drawer__link:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }
.gz-drawer__link.is-active { background: var(--gz-primary-soft); color: var(--gz-brand-800); }
.gz-drawer__link .gz-icon-tile { width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }

.gz-drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gz-drawer__auth form { display: contents; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */

.cb-breadcrumb,
.gz-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
    color: var(--gz-muted);
    font-size: .8125rem;
}

.cb-breadcrumb a,
.gz-breadcrumb a { color: var(--gz-muted); font-weight: 500; }
.cb-breadcrumb a:hover,
.gz-breadcrumb a:hover { color: var(--gz-primary); }
.cb-breadcrumb > span:last-child,
.gz-breadcrumb [aria-current] { color: var(--gz-heading); font-weight: 550; }
.cb-breadcrumb > span:not(:last-child) { color: var(--gz-subtle); }

/* ── Generic page header ──────────────────────────────────────────────── */

.gz-page-head {
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border-bottom: 1px solid var(--gz-border);
    background:
        radial-gradient(900px 300px at 85% -120px, rgba(37, 99, 235, .09), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, var(--gz-bg) 100%);
}

.gz-page-head h1 { margin-bottom: .5rem; }

.gz-page-head__lead {
    max-width: 68ch;
    margin: 0;
    color: var(--gz-muted);
    font-size: var(--gz-text-lg);
    line-height: 1.55;
}

.gz-page-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: 1rem;
    color: var(--gz-muted);
    font-size: var(--gz-text-sm);
}

.gz-page-head__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.gz-page-head__meta i { color: var(--gz-primary); }

/* ── Ad placements ────────────────────────────────────────────────────── */

.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--gz-radius-md);
}

.ad-slot img { max-width: 100%; height: auto; border-radius: var(--gz-radius-md); }

.cb-ad-placement { margin-block: 1.25rem; }
.cb-ad-placement--header { margin-block: 1rem 0; }

.gz-ad-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--gz-subtle);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.gz-footer {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    border-top: 1px solid var(--gz-border);
    background: var(--gz-surface);
    color: var(--gz-muted);
    font-size: .9rem;
}

.gz-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    padding-block: 3.25rem 2.5rem;
}

.gz-footer__brand img { height: 60px; width: auto; margin-bottom: 1rem; }
.gz-footer__brand p { max-width: 34ch; margin-bottom: 1.1rem; line-height: 1.6; }

.gz-footer__social { display: flex; gap: .4rem; margin-bottom: 1rem; }

.gz-footer__social a {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    color: var(--gz-gray-600);
    transition: border-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease), background-color var(--gz-fast) var(--gz-ease);
}

.gz-footer__social a:hover { border-color: var(--gz-brand-300); background: var(--gz-primary-soft); color: var(--gz-primary); }

.gz-footer__made { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; }

.gz-footer__col h3 {
    margin: 0 0 .9rem;
    color: var(--gz-heading);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gz-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }

.gz-footer__col a { color: var(--gz-muted); font-size: .875rem; }
.gz-footer__col a:hover { color: var(--gz-primary); }

.gz-footer__bar {
    border-top: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
}

/* Copyright left, "Our network" centred, legal links right; stacked and centred on phones. */
.gz-footer__bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem 1.5rem;
    padding-block: 1.1rem;
    font-size: .8125rem;
}

.gz-footer__copy { grid-column: 1; justify-self: start; }
.gz-footer__network { grid-column: 2; justify-self: center; }

.gz-footer__legal { grid-column: 3; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem 1.1rem; }

@media (max-width: 767.98px) {
    .gz-footer__bar-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .gz-footer__copy,
    .gz-footer__network,
    .gz-footer__legal { grid-column: 1; justify-self: center; }
    .gz-footer__legal { justify-content: center; }
}
.gz-footer__legal a,
.gz-footer__legal button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--gz-muted);
    font: inherit;
    cursor: pointer;
}
.gz-footer__legal a:hover,
.gz-footer__legal button:hover { color: var(--gz-primary); }

.cb-network-trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-text);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cb-network-trigger:hover { border-color: var(--gz-brand-300); color: var(--gz-primary); }
.cb-network-trigger__arrow { font-size: .6rem; }

@media (max-width: 991.98px) {
    .gz-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gz-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .gz-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.25rem; padding-block: 2.5rem 2rem; }
}

/* ── Network modal ────────────────────────────────────────────────────── */

.cb-network-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.cb-network-overlay[hidden] { display: none; }

.cb-network-modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
}

.cb-network-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--gz-border);
}

.cb-network-modal__title { display: flex; align-items: center; gap: .75rem; }
.cb-network-modal__title strong { display: block; color: var(--gz-heading); font-size: 1rem; }
.cb-network-modal__title span { color: var(--gz-muted); font-size: .8125rem; }

.cb-network-modal__globe {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gz-radius-md);
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
}

.cb-network-modal__close,
.dpdp-modal__close,
.cb-install-popup__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--gz-radius-sm);
    background: transparent;
    color: var(--gz-muted);
    cursor: pointer;
}

.cb-network-modal__close:hover,
.dpdp-modal__close:hover,
.cb-install-popup__close:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.cb-network-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.25rem; }

.cb-network-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    color: var(--gz-heading);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

.cb-network-card:hover { border-color: var(--gz-brand-200); box-shadow: var(--gz-shadow-sm); color: var(--gz-heading); }
.cb-network-card--featured { grid-column: 1 / -1; background: var(--gz-primary-soft); border-color: var(--gz-brand-100); }

.cb-network-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-sunken);
    color: var(--gz-primary);
}

.cb-network-card__icon--parent { background: var(--gz-primary); color: #fff; }
.cb-network-card__text { flex: 1; min-width: 0; }
.cb-network-card__text strong { display: block; font-size: .9rem; }
.cb-network-card__text small { display: block; color: var(--gz-muted); font-size: .78rem; }
.cb-network-card__ext { color: var(--gz-subtle); font-size: .75rem; }

@media (max-width: 575.98px) { .cb-network-modal__grid { grid-template-columns: 1fr; } }

/* ── Install prompt ───────────────────────────────────────────────────── */

.cb-install-popup {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1070;
    display: flex;
    align-items: center;
    gap: .85rem;
    width: min(400px, calc(100vw - 2rem));
    padding: .9rem 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
}

.cb-install-popup[hidden] { display: none; }

.cb-install-popup__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--gz-radius-md);
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
}

.cb-install-popup__content { flex: 1; min-width: 0; }
.cb-install-popup__content strong { display: block; color: var(--gz-heading); font-size: .9rem; }
.cb-install-popup__content span { display: block; color: var(--gz-muted); font-size: .8rem; line-height: 1.4; }
.cb-install-popup__actions { display: flex; align-items: center; gap: .25rem; }

/* Floating prompts step aside while a slide-in menu is open */
body:has(.offcanvas.show, .offcanvas-lg.show) .cb-install-popup,
body:has(.offcanvas.show, .offcanvas-lg.show) .dpdp-reopen-btn { display: none !important; }

/* ── DPDP consent banner & modal ──────────────────────────────────────── */

.dpdp-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 1090;
    width: min(980px, calc(100vw - 2rem));
    transform: translateX(-50%);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .35), 0 4px 14px rgba(15, 23, 42, .08);
    color: var(--gz-text);
}

.dpdp-banner .container.dpdp-banner__inner { max-width: none; padding: 1.1rem 1.25rem; }

.dpdp-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.dpdp-banner__title-group { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.dpdp-shield-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
    font-size: .9rem;
}

.dpdp-banner__title { margin: 0; font-size: 1rem; font-weight: 700; }

.dpdp-badge-indic {
    padding: .15rem .5rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface-sunken);
    color: var(--gz-gray-600);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .02em;
}

.dpdp-lang-custom { position: relative; display: flex; align-items: center; }
.dpdp-lang-icon { position: absolute; left: .65rem; color: var(--gz-muted); font-size: .85rem; pointer-events: none; }

.dpdp-lang-select {
    height: 34px;
    padding: 0 2rem 0 2rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b778a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center;
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: .8125rem;
    font-weight: 550;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.dpdp-banner__desc { margin: 0 0 .7rem; color: var(--gz-text); font-size: .8375rem; line-height: 1.55; }

.dpdp-age-gate,
.dpdp-modal__age-gate {
    padding: .6rem .75rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-muted);
}

.dpdp-age-gate__label { display: flex; align-items: flex-start; gap: .6rem; margin: 0; cursor: pointer; }
.dpdp-age-gate__checkbox { flex: none; margin-top: .15rem; }
.dpdp-age-gate__text { color: var(--gz-text); font-size: .8125rem; line-height: 1.5; }

.dpdp-error-msg {
    margin-top: .6rem;
    padding: .55rem .75rem;
    border: 1px solid var(--gz-danger-line);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-danger-soft);
    color: #991b1b;
    font-size: .8125rem;
    font-weight: 550;
}

.dpdp-banner__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    margin-top: .85rem;
}

.dpdp-banner__actions,
.dpdp-modal__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.dpdp-btn {
    min-width: 128px;
    min-height: 40px;
    padding: .5rem 1rem;
    border: 1px solid var(--gz-border-strong);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface);
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), border-color var(--gz-fast) var(--gz-ease);
}

.dpdp-btn:hover { background: var(--gz-surface-sunken); }

/* Reject and Accept carry equal visual weight (no dark patterns) */
.dpdp-btn--reject,
.dpdp-btn--accept { border-color: var(--gz-heading); background: var(--gz-heading); color: #fff; }
.dpdp-btn--reject:hover,
.dpdp-btn--accept:hover { border-color: var(--gz-gray-800); background: var(--gz-gray-800); color: #fff; }
.dpdp-btn--primary { border-color: var(--gz-primary); background: var(--gz-primary); color: #fff; }
.dpdp-btn--primary:hover { background: var(--gz-primary-hover); }

.dpdp-banner__links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .75rem; }
.dpdp-banner__links a { color: var(--gz-muted); text-decoration: underline; text-decoration-color: var(--gz-border-strong); }
.dpdp-banner__links a:hover { color: var(--gz-primary); }
.dpdp-dot { color: var(--gz-subtle); }

.dpdp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1095;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.dpdp-modal-overlay[style*='flex'],
.dpdp-modal-overlay[style*='block'] { display: flex !important; }

.dpdp-modal {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
    overflow: hidden;
}

.dpdp-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--gz-border);
}

.dpdp-modal__title-group { display: flex; gap: .75rem; align-items: flex-start; }

.dpdp-modal__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
}

.dpdp-modal__title { margin: 0 0 .15rem; font-size: 1.05rem; }
.dpdp-modal__subtitle { margin: 0; color: var(--gz-muted); font-size: .8125rem; }
.dpdp-modal__body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.dpdp-modal__intro { color: var(--gz-text); font-size: .8375rem; }

.dpdp-category-card {
    margin-bottom: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
}

.dpdp-category-card__head { display: flex; justify-content: space-between; gap: 1rem; }
.dpdp-category-card__title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; color: var(--gz-heading); font-size: .9rem; }
.dpdp-category-card__desc { margin: 0; color: var(--gz-muted); font-size: .8125rem; line-height: 1.5; }
.dpdp-category-card__meta { margin-top: .5rem; color: var(--gz-subtle); font-size: .75rem; }
.dpdp-category-card__meta code { font-size: .72rem; }

.dpdp-badge { padding: .1rem .45rem; border-radius: var(--gz-radius-pill); font-size: .68rem; font-weight: 650; }
.dpdp-badge--locked { background: var(--gz-success-soft); color: var(--gz-success); }
.dpdp-badge--optional { background: var(--gz-surface-sunken); color: var(--gz-gray-600); }

.dpdp-switch-wrap { flex: none; padding-top: .15rem; }
.dpdp-toggle-label { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.dpdp-toggle-label .dpdp-switch { position: absolute; opacity: 0; width: 0; height: 0; }

.dpdp-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--gz-gray-300);
    transition: background-color var(--gz-fast) var(--gz-ease);
}

.dpdp-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform var(--gz-fast) var(--gz-ease);
}

.dpdp-switch:checked + .dpdp-slider { background: var(--gz-primary); }
.dpdp-switch:checked + .dpdp-slider::before { transform: translateX(20px); }
.dpdp-switch:focus-visible + .dpdp-slider { box-shadow: var(--gz-ring); }
.dpdp-switch-wrap > .dpdp-switch[disabled] { width: 1.1rem; height: 1.1rem; }

.dpdp-modal__footer { padding: .9rem 1.25rem; border-top: 1px solid var(--gz-border); background: var(--gz-surface-muted); }
.dpdp-modal__actions { justify-content: flex-end; }

.dpdp-reopen-btn {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-gray-600);
    font-family: var(--gz-font);
    font-size: .75rem;
    font-weight: 600;
    box-shadow: var(--gz-shadow-md);
    cursor: pointer;
    transition: gap .3s ease, padding .3s ease, color .15s ease, border-color .15s ease;
}

.dpdp-reopen-btn:hover { color: var(--gz-primary); border-color: var(--gz-brand-200); }

/* Label shows on page load, then site.js adds .is-compact after 5 s to leave only the icon. */
.dpdp-reopen-text {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .35s ease, opacity .25s ease;
}

.dpdp-reopen-btn.is-compact { gap: 0; padding: .55rem .62rem; }
.dpdp-reopen-btn.is-compact .dpdp-reopen-text { max-width: 0; opacity: 0; }

@media (hover: hover) {
    .dpdp-reopen-btn.is-compact:hover,
    .dpdp-reopen-btn.is-compact:focus-visible { gap: .45rem; padding: .45rem .8rem; }
    .dpdp-reopen-btn.is-compact:hover .dpdp-reopen-text,
    .dpdp-reopen-btn.is-compact:focus-visible .dpdp-reopen-text { max-width: 9rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dpdp-reopen-btn,
    .dpdp-reopen-text { transition: none; }
}

@media (max-width: 575.98px) {
    .dpdp-banner { bottom: .5rem; width: calc(100vw - 1rem); border-radius: var(--gz-radius-lg); }
    .dpdp-banner .container.dpdp-banner__inner { padding: .9rem; }
    .dpdp-banner__actions { width: 100%; }
    .dpdp-banner__actions .dpdp-btn { flex: 1 1 40%; min-width: 0; }
}


/* ==========================================================================
   11. Listing components – tool cards, category cards, features
   ========================================================================== */

.gz-tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    padding: 1.15rem 1.15rem 1.1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    color: var(--gz-text);
    box-shadow: var(--gz-shadow-xs);
}

.gz-tool-card:hover { color: var(--gz-text); }

.gz-tool-card__body { display: grid; gap: .3rem; }

.gz-tool-card__body strong {
    color: var(--gz-heading);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.3;
}

.gz-tool-card__body > span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--gz-muted);
    font-size: .8625rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gz-tool-card__arrow {
    position: absolute;
    top: 1.35rem;
    right: 1.15rem;
    color: var(--gz-subtle);
    font-size: .8rem;
    transition: transform var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.gz-tool-card:hover .gz-tool-card__arrow { color: var(--gz-primary); transform: translateX(3px); }

.gz-tool-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }

/* Compact horizontal row variant for dense lists */
.gz-tool-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .95rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
    color: var(--gz-heading);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

.gz-tool-row:hover { border-color: var(--gz-brand-200); box-shadow: var(--gz-shadow-sm); color: var(--gz-heading); }
.gz-tool-row strong { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.gz-tool-row > i { color: var(--gz-subtle); font-size: .75rem; }

/* Category card */
.gz-cat-card {
    display: flex;
    gap: .95rem;
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    color: var(--gz-text);
    box-shadow: var(--gz-shadow-xs);
}

.gz-cat-card:hover { color: var(--gz-text); border-color: var(--tile-line, var(--gz-brand-200)); }

.gz-cat-card__body { display: grid; gap: .25rem; min-width: 0; }
.gz-cat-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gz-cat-card__top strong { color: var(--gz-heading); font-size: .98rem; font-weight: 650; line-height: 1.3; }

.gz-cat-card__top em {
    flex: none;
    color: var(--gz-muted);
    font-size: .75rem;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.gz-cat-card__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--gz-muted);
    font-size: .845rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Feature list items */
.gz-feature {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
}

.gz-feature strong { display: block; color: var(--gz-heading); font-size: .9rem; font-weight: 650; line-height: 1.3; }
.gz-feature small { display: block; color: var(--gz-muted); font-size: .8rem; line-height: 1.4; }

.gz-checklist { display: grid; gap: .75rem; margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; }
.gz-checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--gz-text); line-height: 1.55; }
.gz-checklist i { margin-top: .3rem; color: var(--gz-success); }
.gz-checklist strong { color: var(--gz-heading); }

/* Filter toolbar (category & listing pages) */
.gz-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gz-toolbar__search { position: relative; flex: 1 1 280px; max-width: 420px; }
.gz-toolbar__search i { position: absolute; top: 50%; left: .85rem; color: var(--gz-subtle); font-size: .85rem; transform: translateY(-50%); pointer-events: none; }
.gz-toolbar__search input { padding-left: 2.3rem !important; }

.gz-toolbar__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.gz-count { color: var(--gz-muted); font-size: .875rem; }
.gz-count strong { color: var(--gz-heading); }


/* ==========================================================================
   12. Home page
   ========================================================================== */

.gz-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 3vw, 4.5rem);
    background:
        radial-gradient(760px 420px at 88% 8%, rgba(37, 99, 235, .12), transparent 70%),
        radial-gradient(520px 320px at 6% 100%, rgba(249, 115, 22, .07), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, var(--gz-bg) 100%);
    border-bottom: 1px solid var(--gz-border);
}

.gz-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}

.gz-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.gz-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.25rem;
    padding: .35rem .8rem .35rem .65rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: rgba(255, 255, 255, .8);
    color: var(--gz-gray-600);
    font-size: .8125rem;
    font-weight: 600;
    box-shadow: var(--gz-shadow-xs);
}

.gz-hero__dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

.gz-hero__title {
    max-width: 16ch;
    margin-bottom: 1.1rem;
    font-size: var(--gz-text-5xl);
    font-weight: 780;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.gz-hero__title span {
    background: linear-gradient(100deg, var(--gz-brand-600) 10%, #4f46e5 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gz-hero__lead {
    max-width: 56ch;
    margin-bottom: 1.75rem;
    color: var(--gz-gray-600);
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
    line-height: 1.6;
}

.gz-hero-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 580px;
    padding: .4rem .4rem .4rem 1.1rem;
    border: 1px solid var(--gz-border-strong);
    border-radius: 14px;
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-md);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

.gz-hero-search:focus-within { border-color: var(--gz-primary); box-shadow: var(--gz-shadow-md), var(--gz-ring); }
.gz-hero-search > i { color: var(--gz-subtle); }

.gz-hero-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 .75rem;
    border: 0;
    background: transparent;
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: 1rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.gz-hero-search input::-webkit-search-cancel-button { display: none; }
.gz-hero-search .cb-btn { min-height: 46px; padding-inline: 1.3rem; border-radius: 10px; font-size: .9375rem; }

.gz-hero__trending {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.gz-hero__trending > span { margin-right: .2rem; color: var(--gz-muted); font-size: .8125rem; font-weight: 600; }
.gz-hero__trending .gz-chip { padding: .3rem .7rem; font-size: .8125rem; }

.gz-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.25rem;
    margin: 2.25rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gz-border);
}

.gz-hero__stats div { display: flex; flex-direction: column-reverse; }
.gz-hero__stats dd { margin: 0; color: var(--gz-heading); font-size: 1.5rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; }
.gz-hero__stats dt { color: var(--gz-muted); font-size: .8125rem; font-weight: 500; }

/* Quick calculator card */
.gz-hero__art { position: relative; display: flex; justify-content: center; padding: 1.5rem 0; }

.gz-qc {
    position: relative;
    z-index: 1;
    width: min(360px, 100%);
    padding: 1.1rem;
    border: 1px solid var(--gz-border);
    border-radius: 24px;
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
    outline: none;
}

.gz-qc:focus-visible { box-shadow: var(--gz-shadow-lg), var(--gz-ring); }

.gz-qc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
    font-size: .75rem;
    font-weight: 600;
}

.gz-qc__brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--gz-heading); }
.gz-qc__led { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.gz-qc__hint { display: inline-flex; align-items: center; gap: .35rem; color: var(--gz-muted); }

.gz-qc__screen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    min-height: 104px;
    margin-bottom: .9rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: linear-gradient(160deg, #0f172a, #1e293b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}

.gz-qc__history {
    min-height: 1.2em;
    color: #94a3b8;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gz-qc__display {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gz-qc__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }

.gz-qc__key {
    height: 52px;
    border: 1px solid var(--gz-border);
    border-radius: 14px;
    background: var(--gz-surface-muted);
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), transform 80ms var(--gz-ease), border-color var(--gz-fast) var(--gz-ease);
}

.gz-qc__key:hover { background: var(--gz-surface-sunken); }
.gz-qc__key:active,
.gz-qc__key.is-pressed { transform: scale(.96); }
.gz-qc__key:focus-visible { outline: none; box-shadow: var(--gz-ring); }
.gz-qc__key--fn { background: var(--gz-surface-sunken); color: var(--gz-gray-600); font-size: 1rem; }
.gz-qc__key--op { border-color: var(--gz-brand-100); background: var(--gz-primary-soft); color: var(--gz-primary); }
.gz-qc__key--op:hover { background: var(--gz-primary-soft-2); }
.gz-qc__key--op.is-active { background: var(--gz-primary); color: #fff; }
.gz-qc__key--eq { border-color: var(--gz-primary); background: var(--gz-primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6); }
.gz-qc__key--eq:hover { background: var(--gz-primary-hover); }
.gz-qc__key--wide { grid-column: span 2; }

.gz-qc__foot { display: flex; justify-content: center; gap: 1rem; margin-top: .8rem; color: var(--gz-muted); font-size: .72rem; }

.gz-hero__float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem .65rem .65rem;
    border: 1px solid var(--gz-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: var(--gz-heading);
    box-shadow: var(--gz-shadow-md);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform var(--gz-fast) var(--gz-ease);
}

.gz-hero__float:hover { color: var(--gz-heading); transform: translateY(-2px); }
.gz-hero__float small { display: block; color: var(--gz-muted); font-size: .7rem; font-weight: 600; }
.gz-hero__float strong { display: block; font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gz-hero__float em { color: var(--gz-muted); font-size: .72rem; font-style: normal; font-weight: 500; }
.gz-hero__float--emi { top: 0; right: calc(50% - 262px); }
.gz-hero__float--sip { bottom: 2px; left: calc(50% - 262px); }

@media (max-width: 991.98px) {
    .gz-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .gz-hero__title { max-width: 20ch; }
    .gz-hero__art { padding-top: .5rem; }
}

@media (max-width: 575.98px) {
    .gz-hero-search { padding-left: .8rem; }
    .gz-hero-search .cb-btn { padding-inline: .9rem; }
    .gz-hero__stats { gap: 1rem 1.5rem; }
    .gz-hero__stats dd { font-size: 1.25rem; }
    .gz-hero__float { display: none; }
    .gz-qc__key { height: 48px; }
}

/* Popular + categories on home */
.gz-popular .gz-tool-card { min-height: 158px; }

/* Advisor */
.gz-advisor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(37, 99, 235, .08), transparent 70%),
        var(--gz-surface);
    box-shadow: var(--gz-shadow-sm);
}

.gz-advisor__copy h2 { margin-bottom: .75rem; }
.gz-advisor__copy > p { color: var(--gz-gray-600); font-size: 1.05rem; }

.gz-chat {
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface-muted);
    box-shadow: var(--gz-shadow-md);
    overflow: hidden;
}

.gz-chat__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--gz-border);
    background: var(--gz-surface);
}

.gz-chat__head strong { display: block; color: var(--gz-heading); font-size: .9rem; }
.gz-chat__head small { display: inline-flex; align-items: center; gap: .4rem; color: var(--gz-muted); font-size: .75rem; }
.gz-chat__head .gz-hero__dot { width: 6px; height: 6px; }

.gz-chat__avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gz-brand-500), #4f46e5);
    color: #fff;
    font-size: .85rem;
}

.gz-chat__body { display: grid; gap: .75rem; padding: 1.1rem; }

.gz-chat__msg {
    max-width: 88%;
    margin: 0;
    padding: .75rem .9rem;
    border-radius: 14px;
    font-size: .875rem;
    line-height: 1.55;
}

.gz-chat__msg p { margin: 0; }
.gz-chat__msg--user { justify-self: end; border-bottom-right-radius: 4px; background: var(--gz-primary); color: #fff; }
.gz-chat__msg--bot { border: 1px solid var(--gz-border); border-bottom-left-radius: 4px; background: var(--gz-surface); color: var(--gz-text); }
.gz-chat__msg--bot strong { color: var(--gz-heading); }
.gz-chat__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }

.gz-chat__chips span {
    padding: .2rem .55rem;
    border: 1px solid var(--gz-brand-100);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-800);
    font-size: .72rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .gz-advisor { grid-template-columns: minmax(0, 1fr); }
}

/* Why band */
.gz-features { margin-bottom: 2.5rem; }

.gz-why { gap: 1.5rem; padding-top: 2.5rem; border-top: 1px solid var(--gz-border); }
.gz-why__item i { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: .9rem; border-radius: 12px; background: var(--gz-heading); color: #fff; font-size: .95rem; }
.gz-why__item h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.gz-why__item p { margin: 0; color: var(--gz-muted); font-size: .9rem; line-height: 1.55; }


/* ==========================================================================
   13. Category, directory and search pages
   ========================================================================== */

.gz-breadcrumb > i { color: var(--gz-subtle); font-size: .55rem; }

.gz-cat-head { display: flex; align-items: flex-start; gap: 1.25rem; }
.gz-cat-head h1 { margin-bottom: .45rem; }

@media (max-width: 575.98px) {
    .gz-cat-head { flex-direction: column; gap: .9rem; }
}

.gz-hero-search--page { max-width: 720px; margin-top: 1.5rem; }

/* Main + sidebar layout */
.gz-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2rem;
}

.gz-with-sidebar__side {
    position: sticky;
    top: calc(var(--gz-header-h) + 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 1099.98px) {
    .gz-with-sidebar { grid-template-columns: minmax(0, 1fr); }
    .gz-with-sidebar__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .gz-with-sidebar__side { grid-template-columns: minmax(0, 1fr); }
}

.gz-cat-grid .gz-tool-card { min-height: 150px; }

.gz-tool-card__meta { align-items: center; justify-content: space-between; }

.gz-tool-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    color: var(--gz-primary);
    font-size: .8125rem;
    font-weight: 650;
}

.gz-tool-card__cta i { font-size: .7rem; transition: transform var(--gz-fast) var(--gz-ease); }
.gz-tool-card:hover .gz-tool-card__cta i { transform: translateX(3px); }

.gz-chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.5em;
    padding: 0 .35em;
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface-sunken);
    color: var(--gz-gray-600);
    font-size: .72rem;
    font-weight: 700;
}

.gz-chip.is-active .gz-chip__count { background: rgba(255, 255, 255, .22); color: #fff; }

/* Sidebar cards */
.gz-side-card {
    padding: 1.1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.gz-side-card__title {
    margin: 0 0 .75rem;
    color: var(--gz-heading);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.gz-side-card--tip { background: linear-gradient(160deg, var(--gz-primary-soft), var(--gz-surface) 70%); border-color: var(--gz-brand-100); }
.gz-side-card--tip p { margin: .7rem 0; color: var(--gz-text); font-size: .875rem; line-height: 1.55; }
.gz-side-card--tip .gz-link { font-size: .875rem; }

.gz-ranked { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }

.gz-ranked a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .45rem;
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
    font-size: .875rem;
    font-weight: 550;
}

.gz-ranked a:hover { background: var(--gz-surface-sunken); color: var(--gz-primary); }

.gz-ranked__n {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--gz-surface-sunken);
    color: var(--gz-gray-600);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gz-ranked li:first-child .gz-ranked__n { background: var(--gz-primary); color: #fff; }
.gz-ranked__name { min-width: 0; line-height: 1.35; }

.gz-side-links { display: grid; gap: .15rem; }

.gz-side-links a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .4rem;
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
    font-size: .875rem;
    font-weight: 550;
}

.gz-side-links a:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }
.gz-side-links a > span:nth-child(2) { flex: 1; min-width: 0; }
.gz-side-links a > i { color: var(--gz-subtle); font-size: .65rem; }
.gz-side-links .gz-icon-tile--sm { width: 30px; height: 30px; border-radius: 8px; font-size: .8rem; }

.gz-side-ad { min-width: 0; padding: .75rem; overflow: hidden; border: 1px dashed var(--gz-border-strong); border-radius: var(--gz-radius-lg); background: var(--gz-surface); }
.gz-side-ad img,
.gz-side-ad iframe,
.gz-side-ad ins { max-width: 100% !important; height: auto; }


/* ==========================================================================
   14. Calculator page
   ========================================================================== */

/* Head */
.gz-calc-head {
    padding-block: 1.75rem 1.5rem;
    border-bottom: 1px solid var(--gz-border);
    background:
        radial-gradient(700px 240px at 90% -60px, color-mix(in srgb, var(--hue, #2563eb) 10%, transparent), transparent 70%),
        #fff;
}

.gz-calc-head__row { display: flex; align-items: flex-start; gap: 1rem; }
.gz-calc-head__text { min-width: 0; }

.gz-calc-head h1 {
    margin: .1rem 0 .4rem;
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem);
}

.gz-calc-head__text p {
    max-width: 72ch;
    margin: 0;
    color: var(--gz-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.gz-calc-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.gz-calc-head__meta li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-gray-600);
    font-size: .78rem;
    font-weight: 550;
}

.gz-calc-head__meta i { color: var(--tile-fg, var(--gz-primary)); font-size: .72rem; }

@media (max-width: 575.98px) {
    .gz-calc-head__row .gz-icon-tile--lg { width: 44px; height: 44px; border-radius: 12px; font-size: 1.1rem; }
    .gz-calc-head__meta li:nth-child(n+3) { display: none; }
}

/* Layout */
.gz-calc-section { padding-block: 1.5rem 1rem; }

/* Inputs run across the top in a responsive grid; results sit directly underneath,
   so every input stays reachable without scrolling past the results. */
.gz-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.gz-calc__inputs { min-width: 0; }
.gz-calc__results { display: grid; gap: 1.25rem; min-width: 0; }

#calcForm.cb-form-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 0 1.5rem;
    align-items: start;
    padding: 1.35rem 1.5rem .6rem;
}

/* Paired fields (e.g. GST bill items) become separate grid cells */
#calcForm > .cb-field-row { display: contents; }

#calcForm .cb-field-group,
#calcForm .cb-field-group:last-of-type { margin-bottom: 1.1rem; }

#calcForm > .cb-field-group:has(textarea),
#calcForm > .cb-field-group--wide,
#calcForm > .gz-advanced,
#calcForm > .gz-calc__submit { grid-column: 1 / -1; }

/* Equal label rows so inputs line up across a grid row, even beside a Years/Months toggle */
#calcForm .cb-field-group > label { display: flex; align-items: flex-end; min-height: 1.75rem; }
#calcForm .cb-field-top { min-height: 1.75rem; flex-wrap: nowrap; }
#calcForm .cb-field-top .cb-toggle { padding: 2px; }
#calcForm .cb-field-top .cb-toggle label { padding: .15rem .6rem; font-size: .75rem; }

/* Optional scenario assumptions, collapsed by default (values are still submitted) */
#calcForm > .gz-advanced {
    margin: 0 0 1.1rem;
    border: 1px dashed var(--gz-border-strong);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-muted);
}

.gz-advanced__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: .875rem;
    -webkit-user-select: none;
    user-select: none;
}

.gz-advanced__summary::-webkit-details-marker { display: none; }
.gz-advanced__summary::marker { content: ''; }
.gz-advanced__summary .cb-pill { font-size: .68rem; }
.gz-advanced__summary strong { color: var(--gz-heading); font-weight: 650; }
.gz-advanced__summary small { color: var(--gz-muted); font-size: .78rem; }
.gz-advanced__summary i { margin-left: auto; color: var(--gz-subtle); font-size: .75rem; transition: transform var(--gz-fast) var(--gz-ease); }
.gz-advanced__summary:hover strong { color: var(--gz-primary); }
.gz-advanced__summary:focus-visible { outline: none; border-radius: var(--gz-radius-md); box-shadow: var(--gz-ring); }
.gz-advanced[open] > .gz-advanced__summary i { transform: rotate(180deg); }
.gz-advanced > .cb-advanced-fields { margin: 0; padding: .25rem 1rem .2rem; border: 0; background: none; }
.gz-advanced .cb-advanced-field-grid .cb-field-group--wide { grid-column: auto; }

@media (max-width: 575.98px) {
    .gz-advanced__summary small { flex-basis: 100%; order: 3; }
}

#calcForm > .gz-calc__submit {
    justify-self: end;
    width: auto;
    min-width: 240px;
    margin: 0 0 .75rem;
}

@media (max-width: 575.98px) {
    #calcForm.cb-form-card { padding: 1.1rem 1.1rem .4rem; }
    #calcForm > .gz-calc__submit { justify-self: stretch; width: 100%; min-width: 0; }
}

.gz-panel-title {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0 0 .75rem .15rem;
}

.gz-panel-title span { display: inline-flex; align-items: center; gap: .5rem; color: var(--gz-heading); font-size: .95rem; font-weight: 700; }
.gz-panel-title i { color: var(--gz-primary); font-size: .85rem; }
.gz-panel-title small { color: var(--gz-muted); font-size: .78rem; }

/* Input card */
.cb-form-card {
    padding: 1.25rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-sm);
}

.cb-form-card .cb-field-group:last-of-type { margin-bottom: .5rem; }

.cb-field-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.cb-field-top > label { margin: 0; color: var(--gz-heading); font-size: var(--gz-text-sm); font-weight: 600; }

.cb-field-group--wide { grid-column: 1 / -1; }

.gz-calc__submit { margin-top: 1rem; }

/* Optional scenario assumptions */
.cb-advanced-fields {
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px dashed var(--gz-border-strong);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-muted);
}

.cb-advanced-fields legend {
    float: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    margin: 0 0 .85rem;
    padding: 0;
    font-size: .875rem;
}

.cb-advanced-fields legend strong { color: var(--gz-heading); font-weight: 650; }
.cb-advanced-fields .cb-pill { font-size: .68rem; }

.cb-advanced-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 0 .75rem;
}

.cb-advanced-field-grid .cb-field-group { margin-bottom: .8rem; }
.cb-advanced-field-grid label { font-size: .78rem !important; }
.cb-advanced-field-grid input,
.cb-advanced-field-grid select { min-height: 40px !important; font-size: .9rem !important; }

/* Result card */
.cb-result-card {
    padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background:
        radial-gradient(520px 200px at 0% 0%, rgba(37, 99, 235, .07), transparent 70%),
        var(--gz-surface);
    box-shadow: var(--gz-shadow-sm);
}

.cb-result-card__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gz-border);
}

.gz-result-hero { display: grid; gap: .15rem; min-width: 0; }

.cb-result-card__label {
    color: var(--gz-muted);
    font-size: .8125rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gz-result-hero strong,
[data-result-primary] {
    display: block;
    color: var(--gz-heading);
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.cb-result-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.gz-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 .7rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface);
    color: var(--gz-gray-700);
    font-family: var(--gz-font);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gz-fast) var(--gz-ease), border-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.gz-action i { color: var(--gz-muted); font-size: .8rem; }
.gz-action:hover { border-color: var(--gz-border-strong); background: var(--gz-surface-sunken); color: var(--gz-heading); }
.gz-action:hover i { color: var(--gz-primary); }
.gz-action:focus-visible { outline: none; box-shadow: var(--gz-ring); }
.gz-action.is-flashed { border-color: var(--gz-success-line); background: var(--gz-success-soft); color: var(--gz-success); }
.gz-action--ghost { height: 30px; border-color: transparent; background: transparent; }

.gz-action-group { display: inline-flex; }
.gz-action-group .gz-action:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gz-action-group .gz-action:last-child { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Summary metrics */
.cb-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
}

.cb-summary-row:empty { display: none; }

@media (max-width: 575.98px) {
    .cb-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .cb-summary-item { padding: .7rem .75rem; }
    .cb-summary-item strong { font-size: 1rem; }
}

.cb-summary-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
}

.cb-summary-item span {
    color: var(--gz-muted);
    font-size: .78rem;
    font-weight: 550;
    line-height: 1.35;
}

.cb-summary-item strong {
    color: var(--gz-heading);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Charts */
.cb-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
}

.cb-chart-grid[hidden] { display: none; }

.cb-chart-card {
    position: relative;
    height: 290px;
    padding: 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
}

.cb-chart-card[hidden] { display: none; }
.cb-chart-grid:has(.cb-chart-card[hidden]) { grid-template-columns: minmax(0, 1fr); }
.cb-chart-card canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 767.98px) {
    .cb-chart-grid { grid-template-columns: minmax(0, 1fr); }
    .cb-chart-card { height: 260px; }
}

/* Table toggle + table */
.cb-toggle-table {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .5rem .85rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface);
    color: var(--gz-primary);
    font-family: var(--gz-font);
    font-size: .8125rem;
    font-weight: 650;
    cursor: pointer;
}

.cb-toggle-table::before { content: '\f0ce'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .75rem; }
.cb-toggle-table:hover { border-color: var(--gz-brand-200); background: var(--gz-primary-soft); }
.cb-toggle-table[hidden] { display: none; }

.cb-data-table-wrap { max-height: 460px; margin-top: .75rem; }
.cb-data-table-wrap[hidden] { display: none; }

/* Scenario / advanced results */
.cb-advanced-results {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface-muted);
}

.cb-advanced-results[hidden] { display: none; }

.cb-advanced-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.cb-advanced-results__head > div { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cb-advanced-results__head strong { color: var(--gz-heading); font-size: .92rem; }
.cb-advanced-results__head [data-advanced-mode]:empty { display: none; }

.cb-advanced-summary,
.cb-advanced-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .6rem;
    margin-bottom: .6rem;
}

.cb-advanced-summary .cb-summary-item,
.cb-advanced-scenarios .cb-summary-item { padding: .7rem .85rem; }
.cb-advanced-summary .cb-summary-item strong,
.cb-advanced-scenarios .cb-summary-item strong { font-size: 1rem; }

.cb-advanced-notes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--gz-muted); font-size: .8125rem; }
.cb-advanced-notes:empty { display: none; }

.cb-result-disclaimer {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin: 1.25rem 0 0;
    color: var(--gz-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.cb-result-disclaimer i { margin-top: .2rem; color: var(--gz-subtle); }

.cb-calc-error,
[data-calc-error] {
    margin-top: .75rem;
    padding: .6rem .8rem;
    border: 1px solid var(--gz-danger-line);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-danger-soft);
    color: #991b1b;
    font-size: .85rem;
    font-weight: 550;
}

[data-calc-error][hidden],
[data-calc-error]:empty { display: none; }

/* Utility panels (formula, compare, AI, saved, history) */
.cb-calculator-utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.cb-calculator-utility-grid:not(:has(> :not([hidden]))) { display: none; }

.cb-calculator-utility {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.cb-calculator-utility[hidden] { display: none; }

.cb-calculator-utility__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
}

.cb-calculator-utility__head strong { color: var(--gz-heading); font-size: .92rem; font-weight: 700; }
.cb-calculator-utility__head .gz-icon-tile--sm { width: 30px; height: 30px; border-radius: 8px; font-size: .8rem; }

.cb-calculator-utility--formula { grid-column: 1 / -1; }

.gz-formula,
.cb-formula-expr {
    margin: 0 0 .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--gz-brand-100);
    border-left: 3px solid var(--gz-primary);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-900);
    font-family: var(--gz-font-mono);
    font-size: .9rem;
    line-height: 1.6;
    overflow-x: auto;
}

.gz-formula-notes,
.cb-formula-where {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .35rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--gz-text);
    font-size: .845rem;
}

.gz-formula-notes li,
.cb-formula-where li { position: relative; padding-left: .9rem; line-height: 1.5; }
.gz-formula-notes li::before,
.cb-formula-where li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--gz-brand-300); }

.cb-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cb-compare-col { display: grid; gap: .5rem; align-content: start; }
.cb-compare-col > strong { color: var(--gz-heading); font-size: .85rem; }
.cb-compare-col .cb-summary-item { padding: .6rem .75rem; }
.cb-compare-col .cb-summary-item strong { font-size: .98rem; }

.cb-scenario-list { display: grid; gap: .45rem; }

.cb-scenario-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface-muted);
}

.cb-scenario-item > div { flex: 1; min-width: 0; }
.cb-scenario-item span { display: block; color: var(--gz-muted); font-size: .75rem; }
.cb-scenario-item strong { display: block; color: var(--gz-heading); font-size: .95rem; font-variant-numeric: tabular-nums; }
.cb-scenario-item small { color: var(--gz-subtle); font-size: .72rem; }

.cb-btn-icon {
    padding: .3rem .6rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xs);
    background: var(--gz-surface);
    color: var(--gz-primary);
    font-size: .75rem;
    font-weight: 650;
    cursor: pointer;
}

.cb-btn-icon:hover { border-color: var(--gz-brand-200); background: var(--gz-primary-soft); }

.cb-ai-formula-form { display: grid; gap: .5rem; }
.cb-ai-formula-form label { color: var(--gz-heading); font-size: .8125rem; font-weight: 600; }

.cb-ai-formula-form textarea {
    width: 100%;
    min-height: 84px;
    padding: .6rem .75rem;
    border: 1px solid var(--gz-border-strong);
    border-radius: var(--gz-radius-sm);
    font-family: var(--gz-font);
    font-size: .875rem;
    resize: vertical;
}

.cb-ai-formula-form textarea:focus { outline: none; border-color: var(--gz-primary); box-shadow: var(--gz-ring); }
.cb-ai-formula-form .cb-btn { justify-self: start; }
.cb-ai-formula-result { margin-top: .75rem; padding: .75rem; border-radius: var(--gz-radius-sm); background: var(--gz-surface-muted); font-size: .875rem; }

/* Partner + suggestion cards */
.cb-affiliate-card {
    display: grid;
    justify-items: start;
    gap: .5rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
}

.cb-affiliate-card[hidden] { display: none; }
.cb-affiliate-card h3 { margin: 0; font-size: 1rem; }
.cb-affiliate-card p { margin: 0; color: var(--gz-muted); font-size: .8125rem; }

.cb-ai-suggestion {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--gz-brand-100);
    border-radius: var(--gz-radius-lg);
    background: linear-gradient(135deg, var(--gz-primary-soft), var(--gz-surface) 65%);
}

.cb-ai-suggestion[hidden] { display: none; }

.cb-ai-suggestion__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--gz-primary);
    color: #fff;
    font-size: .9rem;
}

.cb-ai-suggestion h3 { margin: .1rem 0 .35rem; font-size: 1rem; }
.cb-ai-suggestion [data-ai-suggestion-text] { margin: 0 0 .5rem; color: var(--gz-text); font-size: .92rem; line-height: 1.6; }
.cb-ai-suggestion__meta { margin: 0; color: var(--gz-muted); font-size: .75rem; }

/* Article area */
.gz-calc-article { padding-top: 2rem; }

.gz-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 2rem;
}

.gz-article-layout__main { display: grid; gap: 1.5rem; min-width: 0; }

.gz-article-layout__side {
    position: sticky;
    top: calc(var(--gz-header-h) + 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 1099.98px) {
    .gz-article-layout { grid-template-columns: minmax(0, 1fr); }
    .gz-article-layout__side { position: static; }
}

.cb-article-card,
.cb-faq-card {
    padding: clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.cb-article-card > h2,
.cb-faq-card > h2 { margin-bottom: 1.1rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }

.gz-facts { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.gz-facts li { display: flex; gap: .65rem; color: var(--gz-text); font-size: .845rem; line-height: 1.5; }
.gz-facts i { margin-top: .2rem; width: 16px; flex: none; color: var(--gz-primary); text-align: center; }
.gz-facts strong { color: var(--gz-heading); }

.gz-side-links--plain a { justify-content: space-between; padding: .5rem .45rem; }

.gz-side-card--cta {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--gz-heading);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

.gz-side-card--cta:hover { border-color: var(--tile-line, var(--gz-brand-200)); box-shadow: var(--gz-shadow-sm); color: var(--gz-heading); }
.gz-side-card--cta > span:nth-child(2) { flex: 1; min-width: 0; }
.gz-side-card--cta small { display: block; color: var(--gz-muted); font-size: .72rem; font-weight: 600; }
.gz-side-card--cta strong { display: block; font-size: .92rem; }
.gz-side-card--cta > i { color: var(--gz-subtle); font-size: .8rem; }

.gz-tool-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gz-radius-md); }

/* FAQ accordion inside the card */
.cb-accordion .accordion-item {
    margin-bottom: .6rem;
    border: 1px solid var(--gz-border) !important;
    border-radius: var(--gz-radius-md) !important;
    overflow: hidden;
}

.cb-accordion .accordion-item:last-child { margin-bottom: 0; }
.cb-accordion .accordion-button { border-radius: 0 !important; }
.cb-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }

/* ==========================================================================
   15. Article prose (calculator articles, blog posts, static pages)
   ========================================================================== */

.cb-article-prose,
.gz-prose {
    color: var(--gz-text);
    font-size: 1.02rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.cb-article-prose > :first-child,
.gz-prose > :first-child { margin-top: 0; }

.cb-article-prose h2,
.gz-prose h2 { margin: 2.2rem 0 .8rem; font-size: 1.45rem; }

.cb-article-prose h3,
.gz-prose h3 { margin: 1.9rem 0 .6rem; font-size: 1.15rem; }

.cb-article-prose h4,
.gz-prose h4 { margin: 1.5rem 0 .5rem; font-size: 1rem; }

.cb-article-prose p,
.gz-prose p { margin: 0 0 1.05rem; }

.cb-article-prose a,
.gz-prose a { text-decoration: underline; text-decoration-color: var(--gz-brand-200); text-decoration-thickness: 1.5px; }

.cb-article-prose a:hover,
.gz-prose a:hover { text-decoration-color: currentColor; }

.cb-article-prose ul,
.cb-article-prose ol,
.gz-prose ul,
.gz-prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }

.cb-article-prose li,
.gz-prose li { margin-bottom: .4rem; padding-left: .2rem; }

.cb-article-prose li::marker,
.gz-prose li::marker { color: var(--gz-primary); font-weight: 600; }

.cb-article-prose blockquote,
.gz-prose blockquote {
    margin: 1.5rem 0;
    padding: .9rem 1.2rem;
    border-left: 3px solid var(--gz-primary);
    border-radius: 0 var(--gz-radius-sm) var(--gz-radius-sm) 0;
    background: var(--gz-primary-soft);
    color: var(--gz-brand-900);
}

.cb-article-prose img,
.gz-prose img { border-radius: var(--gz-radius-md); }

.cb-article-prose table,
.gz-prose table { margin: 0; }

.cb-article-prose > table,
.gz-prose > table {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
}

.cb-article-prose .cb-table-scroll,
.gz-prose .cb-table-scroll { margin: 0 0 1.25rem; }

.cb-example-table td:last-child { font-weight: 600; color: var(--gz-heading); }

.cb-sample-value {
    padding: .05rem .4rem;
    border-radius: var(--gz-radius-xs);
    background: var(--gz-surface-sunken);
    color: var(--gz-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cb-article-prose code,
.gz-prose code { font-size: .88em; }

.cb-article-prose pre,
.gz-prose pre {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border-radius: var(--gz-radius-md);
    background: var(--gz-gray-900);
    color: #e2e8f0;
    overflow-x: auto;
}

.cb-article-prose pre code,
.gz-prose pre code { padding: 0; background: none; color: inherit; }

.cb-article-prose hr,
.gz-prose hr { margin: 2rem 0; }


/* ==========================================================================
   16. Blog: post cards, pager, single post
   ========================================================================== */

.gz-post-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease), transform var(--gz-fast) var(--gz-ease);
}

.gz-post-card:hover { border-color: var(--gz-brand-200); box-shadow: var(--gz-shadow-md); transform: translateY(-2px); }

.gz-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gz-surface-sunken);
}

.gz-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--gz-ease); }
.gz-post-card:hover .gz-post-card__media img { transform: scale(1.03); }

.gz-post-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(240px 120px at 80% 0%, rgba(37, 99, 235, .16), transparent 70%),
        linear-gradient(135deg, var(--gz-brand-50), var(--gz-gray-100));
    color: var(--gz-brand-300);
    font-size: 2rem;
}

.gz-post-card__body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.2rem; }

.gz-post-card__cat {
    color: var(--gz-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gz-post-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.015em; }
.gz-post-card__title a { color: var(--gz-heading); }
.gz-post-card__title a:hover { color: var(--gz-primary); }

.gz-post-card__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--gz-muted);
    font-size: .875rem;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.gz-post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--gz-gray-100);
    color: var(--gz-muted);
    font-size: .78rem;
}

.gz-byline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--gz-heading);
    font-size: .8rem;
    font-weight: 600;
}

.gz-byline img { border-radius: 50%; border: 1px solid var(--gz-border); background: #fff; }
.gz-byline small { display: block; color: var(--gz-muted); font-size: .7rem; font-weight: 500; line-height: 1.2; }
a.gz-byline:hover { color: var(--gz-primary); }

.gz-pager {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: 2.5rem;
}

.gz-pager__link {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface);
    color: var(--gz-text);
    font-size: .875rem;
    font-weight: 600;
}

.gz-pager__link:hover { border-color: var(--gz-brand-300); color: var(--gz-primary); }
.gz-pager__link.is-active { border-color: var(--gz-primary); background: var(--gz-primary); color: #fff; }

/* Single post */
.gz-post__head {
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) 1.75rem;
    background:
        radial-gradient(900px 300px at 85% -120px, rgba(37, 99, 235, .09), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, var(--gz-bg) 100%);
}

.gz-post__head-inner { max-width: 860px; }
.gz-post__title { margin: .25rem 0 1.1rem; font-size: var(--gz-text-4xl); line-height: 1.15; }

.gz-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; color: var(--gz-muted); font-size: .85rem; }
.gz-post__meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.gz-post__meta-item i { color: var(--gz-subtle); }

.gz-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
    padding-bottom: 4rem;
}

.gz-post__main { min-width: 0; }

.gz-post__figure { margin: 0 0 2rem; overflow: hidden; border-radius: var(--gz-radius-xl); border: 1px solid var(--gz-border); background: var(--gz-surface-sunken); }
.gz-post__figure img { display: block; width: 100%; }

.gz-post__content {
    padding: clamp(1.25rem, .8rem + 2vw, 2.5rem);
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.gz-post__faqs { margin-top: 2rem; }
.gz-post__faqs > h2 { margin-bottom: 1rem; font-size: var(--gz-text-2xl); }

.gz-post__side {
    position: sticky;
    top: calc(var(--gz-header-h) + 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .gz-post__layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .gz-post__side { position: static; }
}

.gz-author-box {
    display: flex;
    gap: 1.1rem;
    margin-top: 2rem;
    padding: 1.4rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: linear-gradient(160deg, var(--gz-primary-soft), var(--gz-surface) 60%);
}

.gz-author-box > img { flex: none; align-self: flex-start; width: 56px; height: 56px; object-fit: contain; border-radius: 50%; border: 1px solid var(--gz-border); background: #fff; }
.gz-author-box .gz-eyebrow { margin-bottom: .2rem; }
.gz-author-box h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.gz-author-box h2 a { color: var(--gz-heading); }
.gz-author-box p { margin-bottom: .9rem; color: var(--gz-text); font-size: .9rem; }

@media (max-width: 575.98px) {
    .gz-author-box { flex-direction: column; }
}

.gz-mini-posts { display: grid; gap: .25rem; }

.gz-mini-post {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    margin-inline: -.5rem;
    border-radius: var(--gz-radius-sm);
    color: var(--gz-heading);
}

.gz-mini-post:hover { background: var(--gz-surface-sunken); color: var(--gz-primary); }

.gz-mini-post__thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 44px;
    overflow: hidden;
    border-radius: var(--gz-radius-xs);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-300);
}

.gz-mini-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gz-mini-post__text { min-width: 0; }

.gz-mini-post__text strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .835rem;
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gz-mini-post__text small { display: block; margin-top: .15rem; color: var(--gz-muted); font-size: .72rem; }

/* ==========================================================================
   17. Authors
   ========================================================================== */

.gz-author-card {
    display: flex;
    gap: 1.1rem;
    padding: 1.35rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    color: var(--gz-text);
    box-shadow: var(--gz-shadow-xs);
}

.gz-author-card:hover { color: var(--gz-text); }
.gz-author-card > img { flex: none; align-self: flex-start; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gz-border); background: #fff; }
.gz-author-card__body { display: grid; gap: .2rem; min-width: 0; }
.gz-author-card__body strong { color: var(--gz-heading); font-size: 1.05rem; }
.gz-author-card__body em { color: var(--gz-primary); font-size: .8rem; font-style: normal; font-weight: 600; }
.gz-author-card__body > span { margin-top: .3rem; color: var(--gz-muted); font-size: .875rem; line-height: 1.55; }
.gz-author-card__body small { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--gz-muted); font-size: .78rem; font-weight: 600; }

.gz-profile-head { display: flex; align-items: center; gap: 1.5rem; margin-top: .5rem; }
.gz-profile-head > img { flex: none; width: 104px; height: 104px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: var(--gz-shadow-md); object-fit: cover; }
.gz-profile-head h1 { margin-bottom: .2rem; }
.gz-profile-head__role { margin: 0 0 .6rem; color: var(--gz-primary); font-weight: 600; }

@media (max-width: 575.98px) {
    .gz-profile-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .gz-profile-head > img { width: 80px; height: 80px; }
}

/* ==========================================================================
   18. Static pages (about, contact, legal) – legacy body markup
   ========================================================================== */

.gz-container--static { max-width: calc(880px + var(--gz-gutter) * 2); }
.gz-container--static-wide { max-width: calc(1100px + var(--gz-gutter) * 2); }

.gz-static .cb-article-card { color: var(--gz-text); font-size: 1rem; line-height: 1.75; }
.gz-static .cb-article-card + .cb-article-card,
.gz-static .cb-contact-grid + .cb-article-card,
.gz-static .cb-article-card + .cb-contact-grid { margin-top: 1.5rem !important; }
.gz-static .cb-article-card > :first-child { margin-top: 0; }
.gz-static .cb-article-card h2 { margin: 2.2rem 0 .8rem; font-size: 1.4rem; }
.gz-static .cb-article-card h3 { margin: 1.6rem 0 .55rem; font-size: 1.1rem; }
.gz-static .cb-article-card h4 { margin: 1.3rem 0 .5rem; font-size: 1rem; }
.gz-static .cb-article-card h2:first-child,
.gz-static .cb-article-card h3:first-child { margin-top: 0; }
.gz-static .cb-article-card p { margin: 0 0 1rem; }
.gz-static .cb-article-card ul,
.gz-static .cb-article-card ol { margin: 0 0 1.1rem; padding-left: 1.3rem; line-height: 1.75 !important; }
.gz-static .cb-article-card li { margin-bottom: .35rem; }
.gz-static .cb-article-card li::marker { color: var(--gz-primary); }
.gz-static .cb-article-card a:not(.cb-btn):not(.btn) { text-decoration: underline; text-decoration-color: var(--gz-brand-200); text-decoration-thickness: 1.5px; }
.gz-static .cb-article-card a:not(.cb-btn):not(.btn):hover { text-decoration-color: currentColor; }
.gz-static .cb-article-card .table-responsive { margin: 0 0 1.25rem; border: 1px solid var(--gz-border); border-radius: var(--gz-radius-md); }
.gz-static .cb-article-card .table { margin: 0; }
.gz-static .cb-article-card .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }

.cb-contact-grid { display: grid; gap: 1.5rem; align-items: start; }

@media (max-width: 767.98px) {
    .cb-contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.cb-sidebar-card {
    padding: 1.4rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.cb-sidebar-card h2,
.cb-sidebar-card h3 { color: var(--gz-heading); }

.cb-input,
.cb-sidebar-card input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']),
.cb-sidebar-card select,
.cb-sidebar-card textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid var(--gz-border-strong);
    border-radius: var(--gz-radius-sm);
    background-color: var(--gz-surface);
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: var(--gz-shadow-xs);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

textarea.cb-input,
.cb-sidebar-card textarea { min-height: 120px; resize: vertical; }

.cb-input:focus,
.cb-sidebar-card input:focus,
.cb-sidebar-card select:focus,
.cb-sidebar-card textarea:focus { outline: none; border-color: var(--gz-primary); box-shadow: var(--gz-ring); }

.cb-sidebar-card label { color: var(--gz-heading); }
.cb-label { display: block; margin-bottom: .35rem; color: var(--gz-heading); font-size: var(--gz-text-sm); font-weight: 600; }
.cb-form-group { margin-bottom: 1rem; }

/* ==========================================================================
   19. Auth pages
   ========================================================================== */

.gz-auth-page {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--gz-header-h) - 120px);
    padding-block: clamp(1.5rem, 1rem + 3vw, 4rem);
    background: radial-gradient(900px 420px at 15% 0%, rgba(37, 99, 235, .08), transparent 70%);
}

.gz-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    max-width: 1040px;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-lg);
}

.gz-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    overflow: hidden;
    background:
        radial-gradient(520px 300px at 110% -10%, rgba(147, 197, 253, .35), transparent 65%),
        radial-gradient(420px 260px at -10% 110%, rgba(30, 64, 175, .55), transparent 70%),
        linear-gradient(150deg, var(--gz-brand-600), var(--gz-brand-800));
    color: #dbeafe;
}

.gz-auth-aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%);
    pointer-events: none;
}

.gz-auth-aside > * { position: relative; z-index: 1; }

.gz-auth-aside__badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    margin-bottom: 1.25rem;
    padding: .3rem .75rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--gz-radius-pill);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}

.gz-auth-aside h1 { margin-bottom: .75rem; color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); }
.gz-auth-aside > p { max-width: 42ch; margin-bottom: 2rem; color: #dbeafe; font-size: 1.02rem; }

.gz-auth-perks { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.gz-auth-perks li { display: flex; gap: .85rem; align-items: flex-start; }

.gz-auth-perks i {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .85rem;
}

.gz-auth-perks span { color: #bfdbfe; font-size: .875rem; line-height: 1.5; }
.gz-auth-perks strong { display: block; color: #fff; font-size: .92rem; font-weight: 650; }

.gz-auth-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
.gz-auth-card .gz-field,
.gz-auth-card .gz-form .gz-field { margin-bottom: 0; }
.gz-auth-card .gz-form { display: flex; flex-direction: column; gap: 1rem; }

.gz-auth-card__head { margin-bottom: .25rem; }
.gz-auth-card__head h2 { margin: 0 0 .3rem; font-size: 1.5rem; }
.gz-auth-card__head p { margin: 0; color: var(--gz-muted); font-size: .9rem; }

.gz-auth-card__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .9rem;
    border-radius: 12px;
    background: var(--gz-primary-soft);
    color: var(--gz-primary);
}

.gz-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.gz-field__top label { margin: 0; color: var(--gz-heading); font-size: var(--gz-text-sm); font-weight: 600; }
.gz-field__top .gz-link { font-size: .8rem; }
.gz-label-note { color: var(--gz-muted); font-size: .78rem; font-weight: 500; }
.gz-req { color: var(--gz-danger); }

.gz-auth-captcha { min-height: 0; }
.gz-auth-captcha:empty { display: none; }

.gz-auth-switch,
.gz-auth-legal { margin: 0; color: var(--gz-muted); font-size: .875rem; text-align: center; }
.gz-auth-legal { font-size: .78rem; }
.gz-auth-switch a { font-weight: 650; }

.gz-auth-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gz-border);
    color: var(--gz-muted);
    font-size: .85rem;
}

.gz-auth-foot a { font-weight: 650; }

.gz-strength { display: flex; align-items: center; gap: .75rem; }
.gz-strength[hidden] { display: none; }
.gz-strength__track { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--gz-gray-100); }
.gz-strength__bar { width: 0; height: 100%; border-radius: inherit; transition: width .25s var(--gz-ease), background-color .25s var(--gz-ease); }
.gz-strength__label { min-width: 7.5rem; font-size: .75rem; font-weight: 600; text-align: right; }

@media (max-width: 859.98px) {
    .gz-auth-shell { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .gz-auth-aside { padding: 1.75rem 1.5rem; }
    .gz-auth-aside > p { margin-bottom: 0; }
    .gz-auth-perks { display: none; }
}

/* ==========================================================================
   20. Account dashboard
   ========================================================================== */

.gz-account-head__row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.gz-account-head__text { flex: 1; min-width: 220px; }
.gz-account-head__text .gz-eyebrow { margin-bottom: .2rem; }
.gz-account-head__text h1 { margin-bottom: .2rem; font-size: var(--gz-text-3xl); }
.gz-account-head__text .gz-page-head__lead { margin: 0; font-size: .95rem; }
.gz-account-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.gz-account-head__actions form { margin: 0; }

.gz-avatar--lg { width: 64px; height: 64px; font-size: 1.3rem; box-shadow: 0 0 0 4px #fff, var(--gz-shadow-md); }

.gz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.gz-stat {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.gz-stat__label { display: block; color: var(--gz-muted); font-size: .78rem; font-weight: 600; }
.gz-stat__value { display: block; margin: .1rem 0 .2rem; color: var(--gz-heading); font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gz-stat__value small { color: var(--gz-subtle); font-size: .95rem; font-weight: 600; }
.gz-stat__value--text { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.gz-stat__note { display: block; color: var(--gz-muted); font-size: .78rem; line-height: 1.45; }

@media (max-width: 767.98px) {
    .gz-stats { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}

.gz-account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.gz-account-side { display: grid; gap: 1rem; }

@media (max-width: 991.98px) {
    .gz-account-layout { grid-template-columns: minmax(0, 1fr); }
}

.gz-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--gz-border);
}

.gz-card__head h2 { margin: 0 0 .2rem; font-size: 1.1rem; letter-spacing: -0.015em; }
.gz-card__head p { margin: 0; color: var(--gz-muted); font-size: .82rem; }
.gz-card__head-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.gz-card__head-actions form { margin: 0; }

.gz-card__title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .4rem; font-size: 1.02rem; letter-spacing: -0.01em; }
.gz-card__title i { color: var(--gz-primary); font-size: .9rem; }
.gz-card__text { margin-bottom: 1.1rem; color: var(--gz-muted); font-size: .86rem; line-height: 1.6; }
.gz-card .gz-form .gz-field { margin-bottom: .9rem; }

.gz-text-danger { --gz-btn-fg: var(--gz-danger); color: var(--gz-danger); }
.gz-text-danger:hover { --gz-btn-bg-hover: var(--gz-danger-soft); }

.gz-account-history__empty { margin: 1.25rem; }

.gz-history-list { display: grid; }

.gz-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    padding: .95rem 1.35rem;
    border-bottom: 1px solid var(--gz-gray-100);
    transition: background-color var(--gz-fast) var(--gz-ease);
}

.gz-history-item:last-child { border-bottom: 0; }
.gz-history-item:hover { background: var(--gz-surface-muted); }

.gz-history-item__num {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 26px;
    padding: 0 .4rem;
    border-radius: var(--gz-radius-xs);
    background: var(--gz-surface-sunken);
    color: var(--gz-muted);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gz-history-item__main { min-width: 0; }
.gz-history-item__name { display: block; overflow: hidden; color: var(--gz-heading); font-size: .92rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gz-history-item__name:hover { color: var(--gz-primary); }
.gz-history-item__date { display: block; color: var(--gz-muted); font-size: .75rem; }

.gz-history-item__summary { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.gz-history-item__summary li { display: inline-flex; gap: .35rem; font-size: .75rem; }
.gz-history-item__summary span { color: var(--gz-muted); }
.gz-history-item__summary em { color: var(--gz-text); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }

.gz-history-item__primary { color: var(--gz-heading); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.gz-history-item form { margin: 0; }

.gz-icon-btn--danger:hover { background: var(--gz-danger-soft); color: var(--gz-danger); }

@media (max-width: 575.98px) {
    .gz-history-item { grid-template-columns: auto minmax(0, 1fr) auto; padding: .9rem 1rem; }
    .gz-history-item__primary { grid-column: 2; grid-row: 2; }
    .gz-history-item form { grid-column: 3; grid-row: 1; }
}

.gz-danger-zone { border-color: var(--gz-danger-line); }
.gz-danger-zone__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.gz-danger-zone__head .gz-card__title { margin: 0; color: #991b1b; }
.gz-danger-zone__head .gz-card__title i { color: var(--gz-danger); }
.gz-danger-zone__form { display: grid; gap: 1rem; max-width: 560px; }
.gz-danger-zone__form .gz-field { margin: 0; }
.gz-danger-zone__form .cb-btn { justify-self: start; }

.gz-check { display: flex; align-items: flex-start; gap: .6rem; margin: 0; color: var(--gz-text); font-size: .86rem; line-height: 1.5; cursor: pointer; }
.gz-check input { flex: none; margin-top: .2rem; }
.gz-danger-zone .gz-check input { accent-color: var(--gz-danger); }

/* ==========================================================================
   21. Notepad
   ========================================================================== */

.gz-page-head--compact { padding-bottom: 1.25rem; }
.gz-page-head--compact .gz-calc-head__meta { margin-top: 1rem; }
.gz-np-tile { background: #fef3c7; color: #b45309; }

.gz-np {
    overflow: hidden;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-xl);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-md);
}

.gz-np:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.gz-np:fullscreen .gz-np__editor { flex: 1; overflow: auto; }

.gz-np__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
}

.gz-np__doc { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.gz-np__doc-name { display: inline-flex; align-items: center; gap: .45rem; color: var(--gz-heading); font-size: .875rem; font-weight: 650; }
.gz-np__doc-name i { color: var(--gz-primary); }

.gz-np__status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border: 1px solid var(--gz-success-line);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-success-soft);
    color: var(--gz-success);
    font-size: .72rem;
    font-weight: 600;
}

.gz-np__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(4, 120, 87, .15); }

.gz-np__actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.gz-np__sep { width: 1px; height: 22px; margin-inline: .2rem; background: var(--gz-border); }
.gz-action--icon { width: 34px; padding: 0; justify-content: center; }

.gz-np__editor { min-height: 520px; background: var(--gz-surface); }

.gz-np__editor > textarea {
    display: block;
    width: 100%;
    min-height: 520px;
    padding: 1.25rem 1.4rem;
    border: 0;
    background: transparent;
    color: var(--gz-heading);
    font-family: var(--gz-font);
    font-size: 1.05rem;
    line-height: 1.75;
    resize: vertical;
}

.gz-np__editor > textarea:focus { outline: none; }

/* TinyMCE chrome inside the notepad */
.gz-np .tox-tinymce { border: 0 !important; border-radius: 0 !important; }
.gz-np .tox .tox-editor-header { border-bottom: 1px solid var(--gz-border) !important; box-shadow: none !important; }
.gz-np .tox .tox-menubar,
.gz-np .tox .tox-toolbar-overlord,
.gz-np .tox .tox-toolbar__primary { background-color: var(--gz-surface) !important; }
.gz-np .tox .tox-mbtn,
.gz-np .tox .tox-tbtn { border-radius: 6px !important; font-family: var(--gz-font) !important; }
.gz-np .tox .tox-statusbar { border-top: 1px solid var(--gz-gray-100) !important; font-family: var(--gz-font) !important; }

.gz-np__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-top: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
    color: var(--gz-muted);
    font-size: .78rem;
}

.gz-np__stats { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.gz-np__stats span { display: inline-flex; align-items: center; gap: .35rem; }
.gz-np__stats i { color: var(--gz-subtle); font-size: .72rem; }
.gz-np__stats strong { color: var(--gz-heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.gz-np__expiry { display: inline-flex; align-items: center; gap: .4rem; }
.gz-np__expiry i { color: var(--gz-success); }

@media (max-width: 575.98px) {
    .gz-np__actions .gz-action span { display: none; }
    .gz-np__actions .gz-action { width: 34px; padding: 0; justify-content: center; }
    .gz-np__editor,
    .gz-np__editor > textarea { min-height: 380px; }
}

.gz-np-features { margin-top: 1.25rem; }

.gz-np-feature {
    padding: 1.2rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
}

.gz-np-feature .gz-icon-tile { width: 40px; height: 40px; margin-bottom: .85rem; font-size: 1rem; }
.gz-np-feature h3 { margin: 0 0 .3rem; font-size: .98rem; }
.gz-np-feature p { margin: 0; color: var(--gz-muted); font-size: .85rem; line-height: 1.55; }

.gz-np-guide { display: grid; gap: 1.5rem; }
.gz-np-guide .gz-section-head { margin-bottom: 0; }
.gz-np-guide__card h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; font-size: 1.02rem; }
.gz-np-guide__card h3 i { color: var(--gz-primary); font-size: .9rem; }
.gz-np-guide__card p { margin: 0; color: var(--gz-text); font-size: .9rem; line-height: 1.65; }

.gz-np-compare h3,
.gz-np-keys h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; font-size: 1.1rem; }
.gz-np-compare h3 i,
.gz-np-keys h3 i { color: var(--gz-primary); font-size: .95rem; }
.gz-np-compare .gz-table th { position: static; }

.gz-np-keys__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--gz-muted); font-size: .85rem; }
.gz-np-keys__list li { display: flex; align-items: center; gap: .55rem; }
.gz-np-keys__list kbd { font-size: .72rem; color: var(--gz-heading); }

@media (max-width: 767.98px) {
    .gz-np-keys__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gz-np-faq h2 { margin-bottom: 1rem; font-size: var(--gz-text-2xl); }

/* ==========================================================================
   22. Error & offline pages
   ========================================================================== */

.gz-error {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: 4rem var(--gz-gutter);
    text-align: center;
}

.gz-error__code {
    display: block;
    margin-bottom: .5rem;
    background: linear-gradient(135deg, var(--gz-brand-500), var(--gz-brand-800));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(4.5rem, 3rem + 7vw, 8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.gz-error h1 { margin-bottom: .6rem; font-size: var(--gz-text-3xl); }
.gz-error p { max-width: 52ch; margin: 0 auto 1.75rem; color: var(--gz-muted); }
.gz-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.gz-error__search { max-width: 520px; margin: 0 auto 1.5rem; }
.gz-error__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }

/* Notice above the submit button of the contact, grievance and data-rights forms. */
.gz-form-trace-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0 0 .9rem;
    color: var(--gz-muted);
    font-size: .78rem;
    line-height: 1.45;
}
.gz-form-trace-note i { margin-top: .15rem; color: var(--gz-gray-400); }

/* 404 inside the site layout (pages/not_found.php). */
.gz-error--page { background: radial-gradient(900px 400px at 50% -10%, rgba(37, 99, 235, .09), transparent 70%); }
.gz-error__inner { width: min(760px, 100%); }
.gz-error__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2.25rem; text-align: left; }
.gz-error__grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--gz-border);
    border-radius: 12px;
    background: var(--gz-surface);
    color: var(--gz-heading);
    font-size: .92rem;
    font-weight: 600;
    transition: border-color .15s, box-shadow .15s;
}
.gz-error__grid a:hover { border-color: var(--gz-brand-200); box-shadow: var(--gz-shadow-md); color: var(--gz-primary); }
.gz-error__grid a span { color: var(--gz-gray-400); }
.gz-error__dev { max-width: 640px; margin: 1.25rem auto 0; padding: .75rem 1rem; border-radius: 10px; background: var(--gz-surface-muted); color: var(--gz-gray-600); font-family: ui-monospace, Consolas, monospace; font-size: .8rem; text-align: left; }
@media (max-width: 560px) { .gz-error__grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   23. Admin shell (layouts/admin.php)
   ========================================================================== */

.gz-admin-body { background: var(--gz-bg); }

.gz-admin {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100vh;
}

.gz-admin-side {
    --bs-offcanvas-width: 280px;
    --bs-offcanvas-bg: #ffffff;
    --gz-side-fg: var(--gz-text);
    display: flex;
    flex-direction: column;
    /* background-image survives Bootstrap's offcanvas-lg background-color reset on desktop */
    background-image: linear-gradient(#ffffff, #ffffff);
    color: var(--gz-side-fg);
    border-right: 1px solid var(--gz-border);
}

@media (min-width: 992px) {
    .gz-admin-side {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(15, 23, 42, .15) transparent;
    }
}

@media (max-width: 991.98px) {
    .gz-admin { grid-template-columns: minmax(0, 1fr); }
    .gz-admin-side { overflow-y: auto; }
}

.gz-admin-side__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1.1rem 1rem 1rem 1.15rem;
    border-bottom: 1px solid var(--gz-border);
}

.gz-admin-side__brand .gz-icon-btn { color: var(--gz-muted); }
.gz-admin-side__brand .gz-icon-btn:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.gz-admin-side__logo { display: flex; align-items: center; gap: .7rem; color: var(--gz-heading); }
.gz-admin-side__logo:hover { color: var(--gz-heading); }
.gz-admin-side__logo img { border: 1px solid var(--gz-border); border-radius: 9px; background: #fff; padding: 2px; }
.gz-admin-side__logo strong { display: block; font-size: .98rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.gz-admin-side__logo small { display: block; color: var(--gz-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.gz-admin-nav { flex: 1; display: grid; align-content: start; gap: 1.1rem; padding: 1.1rem .75rem; }
.gz-admin-nav__group { display: grid; gap: 2px; }

.gz-admin-nav__label {
    padding: 0 .65rem .35rem;
    color: var(--gz-subtle);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.gz-admin-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .52rem .65rem;
    border-radius: 8px;
    color: var(--gz-text);
    font-size: .875rem;
    font-weight: 550;
    transition: background-color var(--gz-fast) var(--gz-ease), color var(--gz-fast) var(--gz-ease);
}

.gz-admin-nav__link i { width: 18px; color: var(--gz-subtle); font-size: .88rem; text-align: center; transition: color var(--gz-fast) var(--gz-ease); }
.gz-admin-nav__link:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

/* Unopened-submission count in the sidebar (Form submissions group). */
.gz-admin-nav__badge {
    min-width: 1.35rem;
    margin-left: auto;
    padding: .1rem .4rem;
    border-radius: var(--gz-radius-pill);
    background: var(--gz-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* Admin → Form submissions */
.gz-row-new td { background: var(--gz-brand-50, #eff6ff); }
.gz-row-new td:first-child { box-shadow: inset 3px 0 0 var(--gz-primary); }
.gz-sub-details { display: grid; gap: .7rem; }
.gz-sub-detail { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: .75rem; }
.gz-sub-detail dt { color: var(--gz-muted); font-size: .8rem; font-weight: 500; }
.gz-sub-detail dd { margin: 0; color: var(--gz-heading); font-size: .875rem; overflow-wrap: anywhere; }
.gz-sub-message { color: var(--gz-heading); font-size: .95rem; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.gz-sub-map { display: block; width: 100%; height: 220px; border: 1px solid var(--gz-border); border-radius: 10px; }
@media (max-width: 575.98px) { .gz-sub-detail { grid-template-columns: 1fr; gap: .15rem; } }
.gz-admin-nav__link:hover i { color: var(--gz-muted); }

.gz-admin-nav__link.is-active {
    background: var(--gz-primary-soft);
    color: var(--gz-brand-700);
    font-weight: 650;
}

.gz-admin-nav__link.is-active i { color: var(--gz-primary); }

.gz-admin-nav__link.is-active::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gz-primary);
}

.gz-admin-nav__link:focus-visible { outline: 2px solid var(--gz-primary); outline-offset: 1px; }

.gz-admin-side__foot { display: grid; gap: 2px; padding: .75rem; border-top: 1px solid var(--gz-border); }

/* Main column */
.gz-admin-main { display: flex; flex-direction: column; min-width: 0; }

.gz-admin-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 64px;
    padding: .6rem clamp(16px, 2.4vw, 32px);
    border-bottom: 1px solid var(--gz-border);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}

.gz-admin-top__title { flex: 1; min-width: 0; line-height: 1.25; }
.gz-admin-top__crumb { display: flex; align-items: center; gap: .4rem; color: var(--gz-muted); font-size: .75rem; font-weight: 550; }
.gz-admin-top__crumb i { font-size: .5rem; color: var(--gz-subtle); }
.gz-admin-top__title strong { display: block; overflow: hidden; color: var(--gz-heading); font-size: .98rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gz-admin-top__actions { display: flex; align-items: center; gap: .5rem; }

.gz-admin-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .6rem .25rem .25rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-pill);
    background: var(--gz-surface);
    color: var(--gz-heading);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.gz-admin-user:hover { background: var(--gz-surface-sunken); }
.gz-admin-user > i { color: var(--gz-subtle); font-size: .65rem; }
.gz-admin-user__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gz-user-menu__head { display: grid; padding: .45rem 1rem .6rem; }
.gz-user-menu__head strong { color: var(--gz-heading); font-size: .875rem; }
.gz-user-menu__head small { color: var(--gz-muted); font-size: .75rem; }

.gz-admin-content { flex: 1; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.4vw, 32px) 3rem; outline: none; }

.gz-admin-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(16px, 2.4vw, 32px);
    border-top: 1px solid var(--gz-border);
    color: var(--gz-muted);
    font-size: .78rem;
}

.gz-admin-foot a { color: var(--gz-muted); }

/* ==========================================================================
   24. Admin page components (legacy cb-admin-* markup)
   ========================================================================== */

.cb-admin-page { padding: 0; background: none; color: var(--gz-text); }
.cb-admin-container { width: 100%; max-width: 1320px; margin: 0; padding: 0; }

.cb-admin-page h1.h3,
.cb-admin-page h1.h4 { margin-bottom: .3rem !important; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 750 !important; letter-spacing: -0.025em !important; }
.cb-admin-page h1 + p.small,
.cb-admin-page h1 + .text-secondary { font-size: .875rem !important; }

.cb-admin-card {
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
}

.cb-admin-card-header,
.cb-admin-card-header--neutral {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 1.35rem;
    border-bottom: 1px solid var(--gz-border);
    background: var(--gz-surface);
    color: var(--gz-heading);
    font-size: .95rem;
    font-weight: 650;
}

.cb-admin-card-header i.text-primary,
.cb-admin-card-header--neutral i.text-primary { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gz-primary-soft); font-size: .8rem; }

.cb-admin-card-body { padding: 1.35rem; }

.cb-admin-btn-primary {
    --bs-btn-bg: var(--gz-primary);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--gz-primary);
    --bs-btn-hover-bg: var(--gz-primary-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--gz-primary-hover);
    --bs-btn-active-bg: var(--gz-primary-press);
    --bs-btn-active-color: #fff;
    background: var(--gz-primary);
    border-color: var(--gz-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.cb-admin-btn-primary:hover { background: var(--gz-primary-hover); border-color: var(--gz-primary-hover); color: #fff; }

.cb-admin-btn-outline {
    --bs-btn-color: var(--gz-heading);
    --bs-btn-border-color: var(--gz-border-strong);
    --bs-btn-hover-bg: var(--gz-surface-sunken);
    --bs-btn-hover-color: var(--gz-heading);
    --bs-btn-hover-border-color: var(--gz-border-strong);
    --bs-btn-active-bg: var(--gz-gray-200);
    --bs-btn-active-color: var(--gz-heading);
    background: var(--gz-surface);
    border: 1px solid var(--gz-border-strong);
    color: var(--gz-heading);
    font-weight: 600;
    box-shadow: var(--gz-shadow-xs);
}

.cb-admin-btn-outline:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.cb-admin-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-sm);
    background: var(--gz-surface);
    color: var(--gz-text);
    font-weight: 600;
    text-decoration: none;
}

.cb-admin-back-btn:hover { background: var(--gz-surface-sunken); color: var(--gz-heading); }

.cb-admin-stat-card {
    display: flex;
    align-items: center;
    gap: .95rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-lg);
    background: var(--gz-surface);
    box-shadow: var(--gz-shadow-xs);
    transition: box-shadow var(--gz-fast) var(--gz-ease), border-color var(--gz-fast) var(--gz-ease);
}

.cb-admin-stat-card:hover { border-color: var(--gz-border-strong); box-shadow: var(--gz-shadow-sm); }

.cb-admin-stat-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.1rem;
}

.cb-admin-stat-card strong { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

@media (max-width: 575.98px) {
    .cb-admin-stat-card { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem; }
    .cb-admin-stat-icon { width: 36px; height: 36px; border-radius: 10px; font-size: .9rem; }
    .cb-admin-stat-card .text-truncate { white-space: normal; }
}

.cb-admin-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .875rem; }

.cb-admin-table > thead > tr > th,
.cb-admin-table th {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--gz-border);
    background: var(--gz-surface-muted);
    color: var(--gz-muted);
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cb-admin-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--gz-gray-100); color: var(--gz-gray-800); vertical-align: middle; }
.cb-admin-table tbody tr:last-child td { border-bottom: 0; }
.cb-admin-table tbody tr:hover td { background: var(--gz-surface-muted); }

.cb-admin-page .table-responsive { border-radius: 0; }

.cb-admin-page .card { overflow: hidden; }
.cb-admin-page .card-header { padding: .9rem 1.25rem; border-bottom-color: var(--gz-border); background: var(--gz-surface); font-weight: 650; }
.cb-admin-page .card-body { padding: 1.25rem; }
.cb-admin-page .card-footer { border-top-color: var(--gz-border); background: var(--gz-surface-muted); }

.cb-admin-page .nav-tabs { gap: .25rem; }
.cb-admin-page .nav-tabs .nav-link { border-radius: 8px 8px 0 0; color: var(--gz-muted); font-size: .875rem; }
.cb-admin-page .nav-tabs .nav-link.active { color: var(--gz-heading); }
.cb-admin-page .nav-pills { --bs-nav-pills-border-radius: 8px; --bs-nav-pills-link-active-bg: var(--gz-primary); }

.cb-admin-page .form-control,
.cb-admin-page .form-select { font-size: .9rem; }
.cb-admin-page textarea.form-control { min-height: 0; }
.cb-admin-page .input-group-text { border-color: var(--gz-border-strong); background: var(--gz-surface-muted); color: var(--gz-muted); font-size: .875rem; }
.cb-admin-page .form-label { font-size: .84rem; }
.cb-admin-page .form-check-label { font-size: .875rem; }
.cb-admin-page code { font-size: .82em; }
.cb-admin-page .badge.bg-light { background: var(--gz-surface-sunken) !important; }

/* Cron hub */
.cb-cron-item {
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--gz-border);
    border-radius: var(--gz-radius-md);
    background: var(--gz-surface);
    transition: border-color var(--gz-fast) var(--gz-ease), box-shadow var(--gz-fast) var(--gz-ease);
}

.cb-cron-item:hover { border-color: var(--gz-border-strong); box-shadow: var(--gz-shadow-sm); }

.cb-cron-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: var(--gz-radius-pill);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cb-cron-code-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin: .6rem 0 .5rem;
    padding: .8rem 1rem;
    border: 1px solid #1e293b;
    border-radius: var(--gz-radius-sm);
    background: #0f172a;
}

.cb-cron-code { flex: 1; margin: 0; color: #7dd3fc; font-family: var(--gz-font-mono); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.cb-cron-code code { padding: 0; background: none; color: inherit; }

.cb-cron-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    padding: .38rem .7rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.cb-cron-copy-btn:hover { border-color: var(--gz-primary); background: var(--gz-primary); color: #fff; }
.cb-cron-copy-btn.is-copied { border-color: #059669 !important; background: #059669 !important; color: #fff !important; }

/* Alerts used by admin forms */
.cb-auth-alert {
    padding: .8rem 1rem;
    border: 1px solid var(--gz-brand-100);
    border-radius: var(--gz-radius-md);
    background: var(--gz-primary-soft);
    color: var(--gz-brand-900);
    font-size: .875rem;
}

.cb-auth-alert--success { border-color: var(--gz-success-line); background: var(--gz-success-soft); color: #064e3b; }
.cb-auth-alert--error { border-color: var(--gz-danger-line); background: var(--gz-danger-soft); color: #7f1d1d; }

.cb-captcha-box { margin-block: .75rem; }
.cb-step-box { animation: gz-fade-in .2s var(--gz-ease); }

/* Media manager card actions: equal-height Copy + square Delete */
.gz-media-actions { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.gz-media-actions form { display: flex; margin: 0; }

.gz-media-btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .65rem;
    --bs-btn-font-size: .78rem;
    --bs-btn-border-radius: 7px;
    height: 30px;
    gap: .35rem;
}

.gz-media-btn--icon { --bs-btn-padding-x: 0; width: 30px; }
.gz-media-btn i { font-size: .75rem; }

@keyframes gz-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   25. Utilities kept from the old stylesheet (fractional Bootstrap spacing)
   ========================================================================== */

.btn-xs { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .75rem; --bs-btn-border-radius: 5px; }
.fw-extrabold { font-weight: 800 !important; }
.shadow-2xs { box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important; }
.text-ink { color: var(--gz-heading) !important; }

.gap-0\.5 { gap: .125rem !important; }
.gap-1\.5 { gap: .4rem !important; }
.gap-2\.5 { gap: .65rem !important; }
.gap-3\.5 { gap: 1.15rem !important; }
.me-0\.5 { margin-right: .125rem !important; }
.me-1\.5 { margin-right: .45rem !important; }
.me-2\.5 { margin-right: .7rem !important; }
.ms-0\.5 { margin-left: .125rem !important; }
.ms-1\.5 { margin-left: .45rem !important; }
.ms-2\.5 { margin-left: .7rem !important; }
.mb-1\.5 { margin-bottom: .4rem !important; }
.mt-1\.5 { margin-top: .4rem !important; }
.p-0\.5 { padding: .125rem !important; }
.p-1\.5 { padding: .4rem !important; }
.p-2\.5 { padding: .65rem !important; }
.p-3\.5 { padding: 1.25rem !important; }
.px-0\.5 { padding-left: .125rem !important; padding-right: .125rem !important; }
.px-1\.5 { padding-left: .4rem !important; padding-right: .4rem !important; }
.px-2\.5 { padding-left: .65rem !important; padding-right: .65rem !important; }
.px-3\.5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.py-0\.5 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
.py-1\.5 { padding-top: .4rem !important; padding-bottom: .4rem !important; }
.py-2\.5 { padding-top: .65rem !important; padding-bottom: .65rem !important; }
.py-3\.5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

.cb-admin-page i[class*='fa-'].me-1 { margin-right: .4rem !important; }
.cb-admin-page i[class*='fa-'].me-2 { margin-right: .55rem !important; }

::-webkit-scrollbar {
    width: 4px;
    height: 5px;
    border-radius: 34px;
    background: #edeef2;
}

::-webkit-scrollbar-thumb {
    background-color: #2563eb;
    border-radius: 34px;
}

::-webkit-scrollbar-track {
    border-radius: 30px;
    background: #edeef2;
}