.tt-public {
    --trecker-accent: #ff782b;
    --trecker-accent-hover: #ff8a42;
    --trecker-accent-dark: #e05f16;
    --trecker-accent-light: rgba(255,120,43,0.12);
    --trecker-accent-secondary: #ff8a42;
    --trecker-accent-gradient: linear-gradient(135deg,#ff8a42 0%,#ff6214 100%);
    --trecker-bg-primary: #0f1011;
    --trecker-bg-secondary: #16171a;
    --trecker-bg-tertiary: #1f2023;
    --trecker-bg-card: #1b1b1d;
    --trecker-bg-card-hover: #212124;
    --trecker-bg-frosted: rgba(15,16,17,0.88);
    --trecker-text-primary: #f2f2f2;
    --trecker-text-secondary: #a8a8a8;
    --trecker-text-tertiary: #8a8a8a;
    --trecker-border: #343536;
    --trecker-border-light: #2a2b2c;
    --trecker-border-medium: #3f4042;
    --trecker-border-radius: 9px;
    --trecker-border-radius-sm: 9px;
    --trecker-border-radius-md: 9px;
    --trecker-border-radius-lg: 11px;
    --trecker-border-radius-xl: 14px;
    --trecker-header-height: 58px;
    --tt-pub-header-bg: #131414;
    --tt-pub-strip-bg: #121416;
    --tt-pub-tabbar-bg: #171719;
    --tt-pub-feature-card-bg: #181818;
    --tt-pub-feature-card-border: #784125;
    --tt-pub-container: 1180px;
}

.tt-public .tt-pub-container {
    max-width: var(--tt-pub-container);
    margin-inline: auto;
    padding-inline: 24px;
}

.tt-public .tt-pub-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--trecker-accent);
}

.tt-public .tt-pub-h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--trecker-text-primary);
}

.tt-public .tt-pub-lead {
    color: var(--trecker-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.tt-public .tt-pub-panel {
    background: var(--trecker-bg-card);
    border: 1px solid var(--trecker-border);
    border-radius: var(--trecker-border-radius-xl);
}

.tt-public .tt-pub-panel-head {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .12em;
    background: var(--trecker-bg-tertiary);
    border-radius: 9px;
    padding: 9px 14px;
    color: var(--trecker-text-secondary);
}

.tt-public .tt-pub-chip {
    border-radius: 999px;
    border: 1px solid var(--trecker-border);
    background: var(--trecker-bg-secondary);
    font-size: 13px;
}

.tt-public .tt-pub-chip--active {
    background: var(--trecker-accent);
    color: #15100c;
    font-weight: 700;
    border-color: transparent;
}

.tt-public .tt-pub-badge {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .12em;
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(4px);
    color: #fff;
    border-radius: 5px;
    padding: 4px 9px;
}

@media (max-width: 640px) {
    .tt-public .tt-pub-container {
        padding-inline: 16px;
    }
}

@media (pointer: coarse) {
    .tt-public .tt-pub-chip {
        min-height: 44px;
    }
}

/* ==========================================================================
   Public header restyle (scoped to .tt-public — never touches admin/field,
   which render TreckerHeader/TreckerFooter/TreckerNavLink/TreckerButtonSecondary
   outside this wrapper, see TreckerAdminLayout.razor / TreckerFieldLayout.razor)
   ========================================================================== */

.tt-public .TreckerHeader {
    background-color: var(--tt-pub-header-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--trecker-border);
}

.tt-public .TreckerNav .TreckerNavLink {
    font-size: 14px;
    color: var(--trecker-text-secondary);
}

.tt-public .TreckerNav .TreckerNavLink:hover,
.tt-public .TreckerNav .TreckerNavLinkActive,
.tt-public .TreckerNav .TreckerNavLinkActive:hover {
    color: var(--trecker-text-primary);
}

.tt-public .TreckerHeaderActions .TreckerButtonSecondary {
    border: 1px solid var(--trecker-accent);
    background-color: transparent;
    color: #fff;
    border-radius: 7px;
}

.tt-public .TreckerHeaderActions .TreckerButtonSecondary:hover {
    background-color: var(--trecker-accent);
    border-color: var(--trecker-accent);
    color: #fff;
}

/* ==========================================================================
   Public footer restyle — brand block + 4 headed link columns
   ========================================================================== */

.tt-public .TreckerFooterGrid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
}

.tt-public .TreckerFooterTitle {
    font-size: 13px;
    font-weight: var(--trecker-font-weight-semibold);
    color: var(--trecker-text-primary);
    text-transform: none;
    letter-spacing: normal;
}

.tt-public .TreckerFooterLink {
    font-size: 13px;
    color: var(--trecker-text-secondary);
}

.tt-public .TreckerFooterLink:hover {
    color: var(--trecker-accent);
}

@media (max-width: 900px) {
    .tt-public .TreckerFooterGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tt-public .TreckerFooterBrand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .tt-public .TreckerFooterGrid {
        grid-template-columns: 1fr;
    }

    .tt-public .TreckerFooterBrand {
        grid-column: auto;
    }
}