/* ==========================================================================
   Zockminners Pro — project overrides
   Loads after finlon.css. Contains only what the source site did not ship:
   the plan cards, market ticker, legal/FAQ layouts, flash messages, the
   accessible skip link, and small fixes for the Finlon template.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

:root {
    --zm-navy:        #0d1b2a;
    --zm-navy-soft:   #16283d;
    --zm-accent:      #1f6feb;
    --zm-accent-dark: #14509f;
    --zm-gold:        #f5a623;
    --zm-green:       #1aa981;
    --zm-red:         #d64545;
    --zm-text:        #2c3e50;
    --zm-muted:       #6b7c8f;
    --zm-border:      #e3e9f0;
    --zm-bg-soft:     #f5f8fb;
    --zm-radius:      6px;
    --zm-shadow:      0 6px 24px rgba(13, 27, 42, .08);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--zm-text);
}

/* The source ships a "custom-cursor" effect that hides the native pointer.
   That is hostile on a forms-heavy product, so it is disabled here. */
body.custom-cursor,
body.custom-cursor .custom-cursor__cursor,
body.custom-cursor .custom-cursor__cursor-two {
    cursor: auto;
}
body.custom-cursor .custom-cursor__cursor,
body.custom-cursor .custom-cursor__cursor-two {
    display: none;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: .75rem 1.25rem;
    background: var(--zm-navy);
    color: #fff;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}

/* Visually hidden, still announced. Bootstrap 5.1 dropped the `.sr-only` that
   the vendored templates were written against, so templates using it were
   rendering the text in the open instead of hiding it. Re-declared here with the
   1px-clip technique rather than `display: none`, which would remove the text
   from the accessibility tree as well as the screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--zm-accent);
    outline-offset: 2px;
}

/* Bootstrap's accordion buttons are full-width block links by default. */
.accordion .btn-link {
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: var(--zm-navy);
    text-decoration: none;
}
.accordion .btn-link::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.flash-wrap { margin-top: 1.5rem; }
.flash-wrap .alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--zm-border);
    border-left-width: 4px;
    border-radius: var(--zm-radius);
    background: #fff;
    box-shadow: var(--zm-shadow);
    margin-bottom: .75rem;
}
.flash-wrap .alert--success    { border-left-color: var(--zm-green); }
.flash-wrap .alert--danger,
.flash-wrap .alert--error      { border-left-color: var(--zm-red); }
.flash-wrap .alert--warning    { border-left-color: var(--zm-gold); }
.flash-wrap .alert--info       { border-left-color: var(--zm-accent); }
.flash-wrap .alert i { margin-top: .15rem; }
.flash-wrap .alert__close {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--zm-muted);
    cursor: pointer;
    padding: 0 .25rem;
}

/* --------------------------------------------------------------------------
   Page hero + section headings
   -------------------------------------------------------------------------- */

.page-hero {
    background: var(--zm-navy);
    padding: 3.5rem 0 3rem;
    color: #fff;
}
.page-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    /* The vendored framework sets `h1..h6 { color: var(--thm-black) }`, and a
       direct colour on the heading beats the inherited white from .page-hero,
       which left the title near-black on the navy band. */
    color: #fff;
}
.page-hero .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}
.page-hero .breadcrumb-item,
.page-hero .breadcrumb-item a { color: rgba(255, 255, 255, .75); }
.page-hero .breadcrumb-item.active { color: #fff; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .4); }

/* A quiet title for the signed-in account area: the full-colour page-hero is a
   prospect's block, and a customer who already has an account does not need a
   marketing banner over their own pages. */
.dash-heading { padding: 2.25rem 0 .75rem; }
.dash-heading__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}
.dash-heading__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--zm-navy);
    margin: 0;
    line-height: 1.2;
}

/* A quiet "go back" chip for account pages reached from elsewhere (e.g. the
   plans catalogue opened from the investments page). Goes to the previous
   page when there is one, otherwise falls back to the account page the user
   came from. Pairs with `.dash-heading__row` so it aligns with the title. */
.dash-back { margin: 0; }
.dash-back a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border: 1px solid var(--zm-border);
    border-radius: 999px;
    background: #fff;
    color: var(--zm-accent-dark);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.dash-back a:hover {
    border-color: var(--zm-accent);
    box-shadow: 0 2px 8px rgba(31, 111, 235, .12);
}

.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head__title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.section-head__text { color: var(--zm-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Navigation additions
   -------------------------------------------------------------------------- */

/* Signed-in account actions in the top nav: one quiet cluster holding the
   profile chip, the notification badge and the sign-out ghost button. The
   profile chip keeps the `.main-menu__auth` class so the existing
   <=991.98px rule below still drops it on tablets and phones. */
.account-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.account-actions__profile,
.account-actions__signout {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.account-actions__profile {
    background: #fff;
    border: 1px solid var(--zm-border);
    color: var(--zm-navy);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.account-actions__profile:hover {
    border-color: var(--zm-accent);
    box-shadow: 0 2px 8px rgba(31, 111, 235, .12);
}
.account-actions__avatar {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--zm-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}
.account-actions__signout {
    background: transparent;
    border: 1px solid var(--zm-border);
    color: var(--zm-muted);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.account-actions__signout:hover {
    border-color: #d64545;
    color: #d64545;
}
.main-menu__auth { margin-left: .75rem; }
.main-menu__auth + .main-menu__auth { margin-left: .5rem; }
@media (max-width: 991.98px) {
    .main-menu__auth { display: none; }
}

/* --------------------------------------------------------------------------
   Plan cards
   -------------------------------------------------------------------------- */

.plan-one { padding: 5rem 0; background: var(--zm-bg-soft); }
.plan-one__note { color: var(--zm-muted); margin-top: 2rem; font-size: .95rem; }

.plan-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    padding: 2rem 1.75rem;
    box-shadow: var(--zm-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13, 27, 42, .14); }
.plan-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--zm-bg-soft);
    color: var(--zm-muted);
}
.plan-card--conservative .plan-card__badge { background: #e8f1fd; color: var(--zm-accent-dark); }
.plan-card--balanced     .plan-card__badge { background: #e6f7f1; color: #0f7a5c; }
.plan-card--growth       .plan-card__badge { background: #fdf3e2; color: #a76a05; }
.plan-card--aggressive   .plan-card__badge { background: #fdeaea; color: #a53434; }

.plan-card__name { font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; color: var(--zm-navy); }
.plan-card__return {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--zm-accent);
    margin-bottom: 1.25rem;
}
.plan-card__return span {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zm-muted);
    margin-top: .35rem;
}
.plan-card__list { flex: 1 0 auto; margin-bottom: 1.5rem; font-size: .92rem; }
.plan-card__list li { padding: .35rem 0; color: var(--zm-muted); }
.plan-card__list i { color: var(--zm-green); margin-right: .5rem; }
.plan-card__cta { align-self: stretch; text-align: center; }

.plan-notes { padding: 4.5rem 0; }
.plan-notes__item {
    height: 100%;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    padding: 1.75rem;
}
.plan-notes__item h3 { font-size: 1.1rem; font-weight: 700; color: var(--zm-navy); }
.plan-notes__item p { color: var(--zm-muted); margin: 0; font-size: .95rem; }
.plan-notes__item--warn { border-left: 4px solid var(--zm-red); }

/* --------------------------------------------------------------------------
   Market ticker (replaces the 61 MB hero video — PLAN.md G5)
   -------------------------------------------------------------------------- */

.ticker-one {
    padding: 3rem 0;
    background: var(--zm-navy);
    color: #fff;
    text-align: center;
}
.ticker-one__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.ticker-one__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-one__track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: zm-ticker 32s linear infinite;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding-left: 2.5rem;
}
.ticker-one__viewport:hover .ticker-one__track { animation-play-state: paused; }
.ticker-one__sep { color: var(--zm-accent); margin: 0 .35rem; }
.ticker-one__note { color: rgba(255, 255, 255, .6); font-size: .9rem; margin: 1.5rem 0 0; }

@keyframes zm-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ticker-one__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Markets table
   -------------------------------------------------------------------------- */

.markets-one { padding: 5rem 0; }
.markets-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.markets-table th,
.markets-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--zm-border); text-align: left; }
.markets-table th { background: var(--zm-bg-soft); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zm-muted); }
.markets-table tbody tr:hover { background: var(--zm-bg-soft); }
.markets-table__symbol { font-weight: 700; color: var(--zm-accent); }
.markets-one__note {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--zm-red);
    background: #fdf5f5;
    color: #8a2b2b;
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-one { padding: 5rem 0; }
.faq-one__aside { position: sticky; top: 110px; }
.faq-one__aside-title { font-size: 1.75rem; font-weight: 700; color: var(--zm-navy); }
.faq-one__aside-text { color: var(--zm-muted); margin-bottom: 1.75rem; }
.faq-one .card { border: 1px solid var(--zm-border); margin-bottom: .75rem; border-radius: var(--zm-radius); }
.faq-one .card-header { background: #fff; padding: 0; border: 0; }
.faq-one .card-header .btn-link { padding: 1.1rem 1.25rem; }
.faq-one .card-body { color: var(--zm-muted); font-size: .95rem; padding: 0 1.25rem 1.25rem; }
@media (max-width: 991.98px) { .faq-one__aside { position: static; margin-bottom: 2rem; } }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-one { padding: 5rem 0; }
.contact-one__title { font-size: 1.75rem; font-weight: 700; color: var(--zm-navy); }
.contact-one__text { color: var(--zm-muted); }
.contact-one__list { margin: 2rem 0; }
.contact-one__list li { padding: .55rem 0; color: var(--zm-muted); }
.contact-one__list i { color: var(--zm-accent); margin-right: .6rem; }
.contact-one__notice {
    background: var(--zm-bg-soft);
    border-left: 4px solid var(--zm-gold);
    padding: 1.25rem;
    border-radius: var(--zm-radius);
}
.contact-one__notice h3 { font-size: 1rem; font-weight: 700; color: var(--zm-navy); }
.contact-one__notice p { font-size: .9rem; color: var(--zm-muted); margin: 0; }

.contact-one__support {
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    padding: 2rem;
    box-shadow: var(--zm-shadow);
}
.contact-one__support .btn-row { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Legal / about
   -------------------------------------------------------------------------- */

.legal { padding: 4.5rem 0; }
.legal__body h2 { font-size: 1.25rem; font-weight: 700; color: var(--zm-navy); margin: 2.25rem 0 .75rem; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { color: var(--zm-muted); font-size: .97rem; line-height: 1.75; }
.legal__body ul { margin: 0 0 1rem; padding-left: 1.25rem; }

.vision-one { padding: 4rem 0; background: var(--zm-bg-soft); }
.vision-one__text { font-size: 1.1rem; line-height: 1.85; color: var(--zm-text); margin: 0; }
.vision-one__badge { text-align: center; }
.vision-one__badge-value { display: block; font-size: 3.5rem; font-weight: 800; color: var(--zm-accent); line-height: 1; }
.vision-one__badge-label { display: block; margin-top: .5rem; color: var(--zm-muted); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Home sections
   -------------------------------------------------------------------------- */

.service-one, .feature-one { padding: 5rem 0; }
.service-one__item, .feature-one__item {
    height: 100%;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    padding: 2rem;
    box-shadow: var(--zm-shadow);
}
.service-one__item-icon, .feature-one__item i { font-size: 2rem; color: var(--zm-accent); }
.service-one__item-title, .feature-one__title { font-size: 1.15rem; font-weight: 700; color: var(--zm-navy); margin: 1rem 0 .6rem; }
.service-one__item-text, .feature-one__text { color: var(--zm-muted); font-size: .95rem; margin: 0; }

.process-one { padding: 5rem 0; background: var(--zm-bg-soft); }
.process-one__item { position: relative; padding-right: 1rem; }
.process-one__icon { font-size: 2.25rem; color: var(--zm-accent); margin-bottom: 1rem; }
.process-one__counter { position: absolute; top: 0; right: 0; font-size: 3rem; font-weight: 800; color: rgba(13, 27, 42, .06); line-height: 1; }
.process-one__title { font-size: 1.1rem; font-weight: 700; color: var(--zm-navy); }
.process-one__text { color: var(--zm-muted); font-size: .94rem; margin: 0; }

.about-one__list { margin: 1.5rem 0; }
.about-one__list li { position: relative; padding: .3rem 0 .3rem 1.75rem; color: var(--zm-muted); }
.about-one__list li::before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--zm-green);
}

.benefit-one { position: relative; padding: 6rem 0; }
.benefit-one::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(120deg, rgba(13, 27, 42, .92), rgba(13, 27, 42, .72));
}
.benefit-one__title { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.benefit-one__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: .9rem;
    background: var(--zm-gold);
    border-radius: 2px;
}
.benefit-one__list { margin-bottom: 2rem; }
.benefit-one__list li {
    display: flex;
    align-items: center;
    padding: .6rem .85rem;
    margin-bottom: .6rem;
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--zm-radius);
}
.benefit-one__list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: .7rem;
    font-size: .75rem;
    color: #fff;
    background: var(--zm-green);
    border-radius: 50%;
}
.benefit-one__content, .cta-one__content { position: relative; z-index: 2; }
.cta-one { padding: 5rem 0; background-size: cover; background-position: center; }
.cta-one__title { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */

.error-page { padding: 6rem 0; }
.error-page__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.error-page__code {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--zm-accent);
    margin: 0 0 .5rem;
}
.error-page__title { font-size: 1.85rem; font-weight: 700; color: var(--zm-navy); margin-bottom: 1rem; }
.error-page__message { color: var(--zm-muted); font-size: 1.05rem; }
.error-page__hint { color: var(--zm-muted); font-size: .93rem; }
.error-page__actions { margin-top: 2.5rem; }
.error-page__actions .thm-btn { margin: 0 .5rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-widget__text { color: rgba(255, 255, 255, .7); font-size: .95rem; }

/* --------------------------------------------------------------------------
   Forms
   Shared by auth, the dashboard and every phase 3+ form. Bootstrap 5 ships
   .form-control but the source site's finlon.css overrides it, so the pieces
   that matter for accessibility -- the error state and its announcement -- are
   restated here rather than assumed.
   -------------------------------------------------------------------------- */

.form-group { margin-bottom: 1.1rem; }
.form-group > label {
    display: block;
    margin-bottom: .35rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--zm-navy);
}
.req { color: var(--zm-red); }

.form-control {
    display: block;
    width: 100%;
    padding: .65rem .85rem;
    font-size: .95rem;
    color: var(--zm-text);
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    /* 16px minimum: iOS Safari zooms the viewport on focus for anything
       smaller, which leaves the form scrolled to the wrong place. */
    font-size: max(16px, .95rem);
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    border-color: var(--zm-accent);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
    outline: none;
}
/* Never rely on colour alone: a border plus a ring, so the invalid state
   survives a monochrome display or a colour-blind reader. */
.form-group.has-error .form-control {
    border-color: var(--zm-red);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .12);
}

.form-error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .4rem 0 0;
    font-size: .85rem;
    color: var(--zm-red);
}

.form-check { margin-bottom: 1.1rem; }
.form-check-input { margin-right: .5rem; }
.form-check-label { font-size: .9rem; }
.form-check .form-error { display: flex; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */

.page-hero__text { color: rgba(255, 255, 255, .8); margin-top: .5rem; }

.auth { padding: 3.5rem 0 4.5rem; background: var(--zm-bg-soft); }
.auth__card {
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    box-shadow: var(--zm-shadow);
    padding: 2rem;
}
.auth__text { color: var(--zm-muted); font-size: .95rem; margin-bottom: 1rem; }
.auth__links { margin-top: 1.25rem; font-size: .92rem; color: var(--zm-muted); }
.auth__links a { color: var(--zm-accent); font-weight: 600; }
.auth__legal { font-size: .84rem; color: var(--zm-muted); margin-bottom: 1.25rem; }
.auth__legal a { color: var(--zm-accent); }
.auth__subtitle { font-size: 1.1rem; font-weight: 700; color: var(--zm-navy); margin-bottom: 1rem; }
.auth__rule { border: 0; border-top: 1px solid var(--zm-border); margin: 2rem 0 1.5rem; }

/* The sign-out form sits inside the flex row of .main-menu__right; without
   this it lays out as a block and breaks the nav bar on desktop. */
.main-menu__auth-form { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.dashboard { padding: 3rem 0 4.5rem; }
.dashboard__card {
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    box-shadow: var(--zm-shadow);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
}
.dashboard__card-title { font-size: 1.15rem; font-weight: 700; color: var(--zm-navy); margin-bottom: 1.25rem; }
.dashboard__muted { font-size: .89rem; color: var(--zm-muted); margin-bottom: 1.25rem; }
.dashboard__dl { margin: 0; font-size: .93rem; }
.dashboard__dl dt { font-weight: 600; color: var(--zm-muted); margin-top: .9rem; }
.dashboard__dl dt:first-child { margin-top: 0; }
.dashboard__dl dd { margin: .15rem 0 0; color: var(--zm-navy); }

/* --------------------------------------------------------------------------
   Status pills
   Reused for wallet, deposit, withdrawal and investment states. Paired colour
   and text so the state is never conveyed by colour alone.
   -------------------------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
}
.pill--pending   { background: #fff4e0; color: #8a5a00; border-color: #f5d9a8; }
.pill--approved  { background: #e6f7f1; color: #10634a; border-color: #a8e0cd; }
.pill--declined  { background: #fdecec; color: #8f2626; border-color: #f2b8b8; }
.pill--completed { background: #eaf1fd; color: var(--zm-accent-dark); border-color: #b9d0f5; }

/* --------------------------------------------------------------------------
   Price direction
   Never colour alone: the ticker and the markets table both put a triangle and a
   signed percentage next to the tint, because a red/green pair carries no
   meaning for a red-green colourblind visitor and the 24h change is the single
   most misread number on the page.
   -------------------------------------------------------------------------- */

.market-change { font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-change--up   { color: var(--zm-green); }
.market-change--down { color: var(--zm-red); }
.market-change--flat { color: var(--zm-muted); }

.ticker-one__code { color: var(--zm-gold); }
.ticker-one__track { list-style: none; margin: 0; }
.ticker-one__item { color: #fff; }
/* The idle state keeps the strip's height so the page below does not jump
   between "no prices" and "prices". */
.ticker-one__idle {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .75rem;
    margin: 0;
    padding: .5rem 0;
}
.ticker-one__label {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.ticker-one__idle .ticker-one__note { margin: 0; }
.ticker-one__note a { color: var(--zm-gold); }

/* --------------------------------------------------------------------------
   Markets page
   -------------------------------------------------------------------------- */

.market-empty {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--zm-border);
    border-radius: var(--zm-radius);
    background: var(--zm-bg-soft);
    text-align: center;
}
.market-empty__title { font-weight: 700; color: var(--zm-navy); margin-bottom: .5rem; }
.market-empty__text { color: var(--zm-muted); margin: 0; }
.market-empty code { font-size: .95em; }

/* Horizontal scroll instead of a squashed table. Six columns of prices do not
   fit a phone, and a table that wraps every cell into a three-line stack is
   harder to scan than one that scrolls. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   Account dashboard
   Stat cards, the section nav and the notification list. The `dashboard__*`
   vocabulary is shared with the profile page so the account area reads as one
   product rather than two.
   -------------------------------------------------------------------------- */

.dashboard__welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dashboard__welcome .dashboard__muted { margin-bottom: 0; }

.dash-nav { margin-bottom: 2rem; border-bottom: 1px solid var(--zm-border); }
.dash-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-nav__link {
    display: inline-block;
    padding: .6rem 1.1rem;
    font-weight: 600;
    color: var(--zm-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.dash-nav__link:hover { color: var(--zm-navy); }
/* The underline sits on the item, not the `li`, so the active tab's border
   spans the link box and not the full column. */
.dash-nav__link--active {
    color: var(--zm-navy);
    border-bottom-color: var(--zm-accent);
}

/* The notification bell closes the tab bar, pushed to the row's far edge. It is
   a circular icon button rather than a text tab: the count bubble rides on its
   corner, which only reads correctly when the button is a compact square. The
   bubble is offset outward (negative top/right) so it sits on the corner rather
   than inside the button overlapping the icon. */
.dash-nav__item--bell { margin-left: auto; }
.dash-nav__bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--zm-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.dash-nav__bell:hover {
    color: var(--zm-navy);
    border-color: var(--zm-border);
    background: #fff;
}
.dash-nav__bell .notif-badge__count {
    top: -.2rem;
    right: -.2rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .25rem;
    font-size: .62rem;
    line-height: 1.15rem;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}
/* Let a grid item shrink below its content's intrinsic width. Without this the
   wide balance itself sets the column width and spills out of the card. */
.stat-cards > * { min-width: 0; }
.stat-card {
    min-width: 0;
    padding: 1.25rem 1.35rem;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    box-shadow: var(--zm-shadow);
}
.stat-card__label {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zm-muted);
}
/* Tabular figures: a column of balances that shift sideways as digits change is
   harder to compare than one that does not. */
.stat-card__value {
    margin: 0 0 .35rem;
    /* Long balances shrink with the card and, if still too wide, wrap at a
       character boundary instead of overflowing. */
    font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--zm-navy);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* A money figure is one number. It steps down in size rather than breaking
   across lines: a balance split at an arbitrary character ("$12,345,67" /
   "8.90") is not a figure any more, it is two. The size steps are chosen so
   the longest exact figure still fits the narrowest card in the grid. */
.stat-card__value--figure {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.stat-card__value--sm { font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem); }
.stat-card__value--xs {
    font-size: clamp(.95rem, .9rem + .35vw, 1.2rem);
    letter-spacing: -.01em;
}
.stat-card__hint { margin: 0; font-size: .82rem; color: var(--zm-muted); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list__item {
    padding: 0;
    border-bottom: 1px solid var(--zm-border);
}
.notif-list__item:last-child { border-bottom: 0; }

/* The whole row is the trigger for the detail overlay, so it is a button that
   has to look like a list row rather than like a control. */
.notif-list__open {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .95rem .4rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--zm-radius);
    cursor: pointer;
    transition: background .15s ease;
}
.notif-list__open:hover { background: var(--zm-bg-soft, #f6f9fc); }
.notif-list__open:focus-visible {
    outline: 2px solid var(--zm-accent);
    outline-offset: -2px;
}
.notif-list__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--zm-bg-soft, #f6f9fc);
    color: var(--zm-accent);
    font-size: 1rem;
}
.notif-list__icon--deposit { color: var(--zm-green, #1a9e54); }
.notif-list__icon--withdraw { color: #d97706; }
.notif-list__icon--wallet { color: var(--zm-accent); }
.notif-list__icon--security { color: #dc2626; }
.notif-list__icon--affiliate { color: #7c3aed; }
.notif-list__icon--announcement { color: var(--zm-navy); }
.notif-list__icon--adjustment { color: #d97706; }
.notif-list__icon--system { color: var(--zm-muted); }
.notif-list__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.notif-list__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.notif-list__subject {
    margin: 0;
    font-weight: 600;
    color: var(--zm-navy);
}
.notif-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: .82rem;
    color: var(--zm-muted);
}
.notif-list__preview {
    margin: 0;
    font-size: .86rem;
    color: var(--zm-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-list__chevron {
    flex: 0 0 auto;
    color: var(--zm-muted);
    font-size: .8rem;
    opacity: .55;
}
.notif-list__open:hover .notif-list__chevron { opacity: 1; }
/* The dashboard preview reuses the list styling with a plain anchor rather than
   the overlay trigger, so it needs the same row layout. */
.notif-list__link {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .85rem .4rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--zm-radius);
    transition: background .15s ease;
}
.notif-list__link:hover { background: var(--zm-bg-soft, #f6f9fc); }
/* The unread item is marked by a rule, not only by bold or a background tint,
   so the state survives a monochrome display. */
.notif-list__item--unread .notif-list__open {
    padding-left: .85rem;
    border-left: 3px solid var(--zm-accent);
}
.notif-list__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--zm-accent);
}
.notif-list__amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--zm-navy);
}
.notif-list__amount[aria-label="credited"] { color: var(--zm-green); }

/* A position: relative anchor overlay makes the whole card clickable while
   leaving the inner text selectable and the status pill unclickable-looking. */
.invest-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    box-shadow: var(--zm-shadow);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.invest-card:hover {
    border-color: var(--zm-accent);
    box-shadow: 0 .5rem 1.5rem rgba(13, 27, 42, .08);
}
.invest-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--zm-radius);
}
.invest-card__link:focus-visible {
    outline: 2px solid var(--zm-accent);
    outline-offset: 2px;
}
.invest-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.invest-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    min-width: 0;
}
.invest-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zm-navy);
}
.invest-card__value { text-align: right; }
.invest-card__amount {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--zm-navy);
    font-variant-numeric: tabular-nums;
}
.invest-card__pnl {
    display: block;
    font-size: .82rem;
    color: var(--zm-muted);
    font-variant-numeric: tabular-nums;
}
.invest-card__pnl--up { color: var(--zm-green, #1a9e54); }
.invest-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .9rem 1.5rem;
    margin: 0 0 1.1rem;
}
.invest-card__cell dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zm-muted);
    margin-bottom: .2rem;
}
.invest-card__cell dd {
    margin: 0;
    font-size: .95rem;
    color: var(--zm-navy);
    font-variant-numeric: tabular-nums;
}
.invest-card__progress {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.invest-card__progress .progress {
    flex: 1 1 auto;
    height: .45rem;
    border-radius: 999px;
    background: #e8edf3;
    overflow: hidden;
}
.invest-card__progress .progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--zm-accent);
}
.invest-card__progress-label {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--zm-muted);
    white-space: nowrap;
}

/* The detail overlay. */
.notif-modal .modal-header { align-items: flex-start; gap: .75rem; }
.notif-modal .modal-header__text { flex: 1 1 auto; min-width: 0; }
.notif-modal .modal-title { font-size: 1.05rem; font-weight: 700; }
.notif-modal .modal-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--zm-muted);
}
.notif-modal__message {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--zm-navy);
    white-space: pre-line;
}
.notif-modal__timeline-title {
    margin: 0 0 .6rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zm-muted);
}
.notif-list--timeline .notif-list__item { padding: .55rem 0; }
.notif-list--timeline .notif-list__subject { font-size: .9rem; }

/* A compact theme button, for the tight action pairs inside the asset list.
   The theme ships full-size and admin scopes its own small variant to the
   admin shell; this is the public copy. */
.thm-btn--sm { padding: .45rem .85rem; font-size: .82rem; }

/* The crypto holding book on the dashboard. A summary list, not a table: each
   row is one coin's balance and value, and the code/name, balance and actions
   are three pieces of the same thing rather than distinct column semantics. */
.asset-list { list-style: none; margin: 0; padding: 0; }
.asset-list__item {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--zm-border);
}
.asset-list__item:last-child { border-bottom: 0; }
.asset-list__cell { min-width: 0; }
.asset-list__link {
    color: var(--zm-navy);
    text-decoration: none;
    font-weight: 600;
}
.asset-list__link:hover { color: var(--zm-accent-dark); }
.asset-list__muted {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: var(--zm-muted);
}
.asset-list__qty {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.asset-list__cell--value { overflow-wrap: anywhere; word-break: break-word; }
.asset-list__cell--actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}
.asset-list__total {
    margin: .75rem 0 0;
    font-variant-numeric: tabular-nums;
}
.asset-list__total strong { color: var(--zm-navy); }

/* --------------------------------------------------------------------------
   Asset page: price hero, chart, range tabs
   -------------------------------------------------------------------------- */

.asset-hero {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.5rem;
    align-items: start;
}
.asset-hero__block { min-width: 0; }
.asset-hero__block:first-of-type { padding-right: 1.5rem; border-right: 1px solid var(--zm-border); }
.asset-hero__block:nth-of-type(2) { padding-right: 1.5rem; border-right: 1px solid var(--zm-border); }
.asset-hero__label {
    margin: 0 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--zm-muted);
}
.asset-hero__value {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.6rem);
    line-height: 1.2;
    font-weight: 700;
    color: var(--zm-navy);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.asset-hero__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 0;
    font-size: .86rem;
}
.asset-hero__muted { color: var(--zm-muted); }
.asset-hero__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-content: center;
}

/* The markets table links an asset's name to its page for signed-in visitors;
   anonymous visitors see plain text because the asset page needs an account. */
.markets-table__asset { color: var(--zm-navy); font-weight: 600; text-decoration: none; }
.markets-table__asset:hover { color: var(--zm-accent-dark); }

.dashboard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* Down to 360px (spec 2.7). The stat-card grid already collapses to one column
   on its own via auto-fit, so what is left is the parts that do not: the price
   strip needs a shorter stride so a code and a price stay on one line, and the
   nav tabs need to stop being inline blocks that overflow rather than wrap. */
@media (max-width: 575.98px) {
    .stat-cards { grid-template-columns: 1fr; }
    .dash-nav__link { padding: .5rem .7rem; font-size: .92rem; }
    .dashboard__actions .thm-btn { width: 100%; text-align: center; }
    .dash-nav__bell { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
    .markets-table th,
    .markets-table td { padding: .7rem .6rem; }
    .asset-list__item { grid-template-columns: 1fr 1fr; }
    .asset-list__cell--actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .asset-hero { grid-template-columns: 1fr; }
    .asset-hero__block:first-of-type,
    .asset-hero__block:nth-of-type(2) {
        padding-right: 0;
        border-right: 0;
    }
    .asset-hero__actions { flex-direction: row; }
    .asset-hero__actions .thm-btn { flex: 1; text-align: center; }
}

/* Mobile nav drawer: dashboard links for authenticated visitors.
   The desktop nav is empty for signed-in users (marketing links are
   anonymous-only), so the drawer carries the account nav instead. */
.mobile-nav__dashboard {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-nav__link {
    display: block;
    padding: .65rem .2rem;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: color .15s ease;
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
    color: #fff;
}
.mobile-nav__logout {
    margin-top: 1.2rem;
}
.mobile-nav__logout-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--zm-accent);
    border: 1px solid var(--zm-accent);
    border-radius: var(--zm-radius);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.mobile-nav__logout-btn:hover {
    background: var(--zm-accent-dark);
    border-color: var(--zm-accent-dark);
}

/* Login / Register buttons in the top bar on mobile.
   The desktop rule gives .main-menu__right a 60px right padding that
   pushes the buttons off-screen when the desktop nav is hidden. */
@media (max-width: 1199px) {
    .main-menu__right {
        padding-right: 0;
        gap: .5rem;
    }
    .main-menu__auth {
        padding: .5rem .9rem;
        font-size: 13px !important;
    }
}

/* The in-page account bar is redundant on mobile: the drawer already carries
   every dashboard link plus logout. Keep it on desktop (it anchors the page)
   and hide it below the tablet breakpoint. */
@media (max-width: 1199px) {
    .dash-nav { display: none; }
}

/* Notification bell in the top-right for auth users on mobile.
   Sits next to the profile avatar, styled as a circular icon button. */
@media (max-width: 1199px) {
    .main-menu__right .dash-nav__bell {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.05rem;
        flex: 0 0 auto;
    }
    .main-menu__right .dash-nav__bell .notif-badge__count {
        top: -4px;
        right: -4px;
        min-width: 1rem;
        height: 1rem;
        font-size: .6rem;
        line-height: 1rem;
    }
}

/* Login / Register buttons in the mobile drawer for anonymous users.
   Full-width, well-padded, no overflow. */
.mobile-nav__auth {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.mobile-nav__auth-btn {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--zm-accent);
    border: 1px solid var(--zm-accent);
    border-radius: var(--zm-radius);
    transition: background-color .15s ease, border-color .15s ease;
}
.mobile-nav__auth-btn:hover {
    background: var(--zm-accent-dark);
    border-color: var(--zm-accent-dark);
}
.mobile-nav__auth-btn--dark {
    background: var(--zm-navy);
    border-color: var(--zm-navy);
}
.mobile-nav__auth-btn--dark:hover {
    background: #16233f;
    border-color: #16233f;
}

/* Mobile auth overlay on hero slider — anchored at top, stays fixed while slides change. */
.slider-auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
}
.slider-auth-overlay .container {
    pointer-events: auto;
}

.slider-auth-buttons {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: 1rem 1rem 0;
}

.slider-auth-buttons .thm-btn {
    min-width: 45%;
    font-size: .82rem !important;
    padding: .5rem .9rem;
    font-weight: 600;
    color: var(--zm-accent);
    background: rgba(31, 111, 235, 0.12);
    border: 2px solid var(--zm-accent);
}
.slider-auth-buttons .thm-btn:hover {
    background: rgba(31, 111, 235, 0.2);
    border-color: var(--zm-accent);
    color: var(--zm-accent-dark);
}

/* Hero auth buttons — mobile only, bold blue border, light transparent blue fill. */
.thm-btn--hero-auth {
    border: 2px solid var(--zm-accent);
    background: rgba(31, 111, 235, 0.12);
    color: var(--zm-accent);
    font-weight: 600;
    font-size: .82rem;
    padding: .5rem .75rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.thm-btn--hero-auth:hover {
    background: rgba(31, 111, 235, 0.2);
    border-color: var(--zm-accent-dark);
    color: var(--zm-accent-dark);
}
.thm-btn--hero-auth--secondary {
    background: transparent;
    border: 2px solid var(--zm-accent);
    color: var(--zm-accent);
}
.thm-btn--hero-auth--secondary:hover {
    background: rgba(31, 111, 235, 0.12);
}

/* Mobile drawer hamburger icon — only visible on mobile (≤1199px) */
@media (max-width: 1199px) {
    .main-menu__toggler.mobile-nav__toggler {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--zm-navy);
        border-radius: var(--zm-radius);
        color: #fff;
        font-size: 1.25rem;
        transition: background-color .2s ease, transform .2s ease;
    }
    .main-menu__toggler.mobile-nav__toggler:hover {
        background: var(--zm-accent);
        transform: scale(1.05);
    }
    .main-menu__toggler.mobile-nav__toggler:focus-visible {
        outline: 2px solid var(--zm-accent);
        outline-offset: 2px;
    }
    /* Hide Login/Register buttons in nav on mobile — they're in the drawer */
    .main-menu__auth--mobile-hidden { display: none !important; }
}

/* Ensure hamburger is hidden on desktop (≥1200px) — finlon.css already does this but be explicit */
@media (min-width: 1200px) {
    .main-menu__toggler.mobile-nav__toggler { display: none !important; }
}

/* Mobile drawer close button */
.mobile-nav__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--zm-radius);
    transition: background-color .2s ease, transform .2s ease;
}
.mobile-nav__close:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}
.mobile-nav__close:focus-visible {
    outline: 2px solid var(--zm-accent);
    outline-offset: 2px;
}

/* Mobile drawer content spacing */
.mobile-nav__content {
    padding-top: 4rem;
}

/* Ensure slider container is positioned for auth overlay */
.slider-one { position: relative; }
.slider-one .thm-owl__carousel { position: relative; }

/* CTA section: Login/Register button pair for anonymous users */
.cta-one__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}
.cta-one__actions .thm-btn {
    min-width: 10rem;
    text-align: center;
}

/* Admin mobile navigation drawer */
.admin-header__toggler {
    display: none;
    font-size: 1.25rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem .5rem;
}
.admin-mobile-nav {
    display: none;
}
@media (max-width: 1199px) {
    .admin-header__toggler { display: block; }
    .admin-mobile-nav { display: block; }
}
.admin-mobile-nav__overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.admin-mobile-nav__content {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #fff;
    box-shadow: 0 0 40px rgba(13, 27, 42, .25);
    z-index: 999;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
}
.admin-mobile-nav.open .admin-mobile-nav__overlay {
    opacity: 1;
    visibility: visible;
}
.admin-mobile-nav.open .admin-mobile-nav__content {
    transform: translateX(0);
}
.admin-mobile-nav__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    font-size: 1.25rem;
    color: var(--zm-navy);
    background: none;
    border: none;
    cursor: pointer;
    padding: .25rem;
}
.admin-mobile-nav__close:hover { background: var(--zm-bg-soft); border-radius: var(--zm-radius); }
.admin-mobile-nav__brand {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--zm-border);
}
.admin-mobile-nav__brand a {
    color: var(--zm-navy);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
/* The included sidebar keeps its light theme (white list, dark text) for the
   desktop column; the drawer reuses it as-is on a white panel so the section
   text is dark and readable. */
.admin-mobile-nav .admin-nav__group {
    margin: 1.25rem 0 .5rem;
}

/* Admin shell: a left sidebar separate from the public site's nav. */
.admin-shell { padding: 2rem 0; }
.admin-sidebar { position: sticky; top: 1rem; }
.admin-sidebar__list { list-style: none; margin: 0; padding: 0; }
.admin-sidebar__item { margin: 0; }
.admin-sidebar__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .9rem;
    border-radius: 6px;
    color: var(--zm-muted);
    font-weight: 600;
    text-decoration: none;
}
.admin-sidebar__link:hover { color: var(--zm-navy); background: var(--zm-border); }
.admin-sidebar__link--active { color: var(--zm-navy); background: #eef2f7; }
.admin-sidebar__count {
    font-size: .78rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #fff4e0;
    color: #8a5a00;
}


/* When signed in, the header is logo-only and the account nav lives in
   _dashboard_nav. The finlon sticky-header clone would duplicate it, so it is
   hidden for authenticated visitors. */
body.auth .stricky-header { display: none; }

/* --- shared button system ------------------------------------------------
   The vendor ``.thm-btn`` is a 23px/46px square with a 500ms transition and
   ``font-size: 15px !important``. Only ``body.admin`` overrode it, so every
   user-facing button was oversized and square. This is the single definition
   both surfaces use; ``admin.css`` is reconciled to the same values rather than
   keeping a second copy that can drift. */
.thm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    font-size: 15px !important;
    font-family: var(--thm-font);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    background: var(--zm-accent);
    border: 1px solid var(--zm-accent);
    border-radius: var(--zm-radius);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease;
}
.thm-btn:hover {
    background: var(--zm-accent-dark);
    border-color: var(--zm-accent-dark);
    color: #fff;
}
.thm-btn:active { transform: translateY(1px); }
.thm-btn:focus-visible {
    outline: 2px solid var(--zm-navy);
    outline-offset: 2px;
}
.thm-btn--dark {
    background: var(--zm-navy);
    border-color: var(--zm-navy);
}
.thm-btn--dark:hover {
    background: #16233f;
    border-color: #16233f;
}
.thm-btn--sm {
    padding: .42rem .85rem;
    font-size: 13px !important;
}
.thm-btn[disabled],
.thm-btn.is-disabled {
    opacity: .55;
    pointer-events: none;
}

/* A row of action controls. Replaces the inline ``style="display:inline;"``
   forms that used to sit flush against each other in the admin tables. */
.btn-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* --- logo "Pro" wordmark -----------------------------------------------
   The logo and the wordmark sit in a bottom-anchored flex row so "Pro" aligns
   with the logo's baseline rather than floating at the vertical centre.

   ``z-index`` is the load-bearing part. The theme paints two absolutely
   positioned shape overlays across the logo box (finlon.css), and an
   unpositioned flex child is painted *under* positioned siblings no matter how
   the stylesheet is ordered -- which is why the wordmark was invisible on
   desktop and only appeared once the overlays were display:none below 1200px.
   Lifting the whole wrapper puts the logo and the wordmark above them together.

   The mark is real text in the brand face (Inter) at weight 800, sized in
   absolute pixels so it reads as a badge beside the name rather than a second
   logo; below about 14px the letters stop resolving. */
/* The logo and the wordmark sit in a bottom-anchored flex row. */
.main-menu__brand {
    display: inline-flex;
    align-items: flex-end;
    gap: .35rem;
    position: relative;
    z-index: 12;
}
.zm-pro {
    display: inline-flex;
    align-items: flex-end;
    color: var(--zm-gold);
    flex-shrink: 0;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
}
.zm-pro:hover,
.zm-pro:focus {
    color: var(--zm-gold);
    text-decoration: none;
}
.zm-pro__mark { display: inline-block; }
@media (max-width: 1199px) {
    .zm-pro { font-size: 15px; }
}
/* The mobile drawer is a 300px dark panel, where the logo shrinks to 155px, so
   the wordmark drops with it. Held at 15px rather than following the desktop
   scale down to 11px, which was too small to read in the drawer. */
.mobile-nav__content .logo-box { align-items: flex-end; gap: .3rem; }
.mobile-nav__content .zm-pro { font-size: 15px; }

/* --- capped list sections ------------------------------------------------
   A long list is truncated to a preview with a "See all" link to the same page
   at ``?show=all``. The link is a plain anchor, so it works with JavaScript
   off and preserves any filters already in the query string. */
.see-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--zm-border);
}
.see-more__count {
    font-size: .84rem;
    color: var(--zm-muted);
}
.see-more__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .95rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--zm-navy);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    transition: border-color .18s ease, color .18s ease;
}
.see-more__link:hover {
    color: var(--zm-accent-dark);
    border-color: var(--zm-accent);
}

/* --- admin pagination -----------------------------------------------------
   Included by every admin list screen, below the table. The summary line is the
   load-bearing part: the old queues truncated at 50 rows in a service helper
   with nothing on the page saying so, so "Showing 1-25 of 137" is what makes a
   truncated queue impossible to mistake for a complete one. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--zm-border);
}
.pagination__summary {
    margin: 0;
    font-size: .86rem;
    color: var(--zm-muted);
}
.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination__link {
    display: inline-flex;
    align-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .6rem;
    justify-content: center;
    font-size: .87rem;
    font-weight: 600;
    color: var(--zm-navy);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
a.pagination__link:hover {
    color: var(--zm-accent-dark);
    border-color: var(--zm-accent);
}
/* The current page is a span, not a link: an anchor to the page you are already
   on is a no-op that looks like a broken control. */
.pagination__link.is-current {
    color: #fff;
    background: var(--zm-navy);
    border-color: var(--zm-navy);
}
/* Prev/Next at the ends of the range are inert spans, so they must not look
   clickable -- no pointer cursor, no hover state. */
.pagination__link.is-disabled {
    color: #a9b6c4;
    background: var(--zm-bg-soft);
    cursor: default;
}
.pagination__gap {
    display: inline-flex;
    align-items: center;
    min-width: 1.4rem;
    height: 2.1rem;
    justify-content: center;
    color: var(--zm-muted);
}
@media (max-width: 575px) {
    .pagination { justify-content: center; }
    .pagination__summary { width: 100%; text-align: center; }
}

/* --- pop-up announcements -------------------------------------------------
   The partial (``_popups.html``) carried no styles at all, so the markup fell
   back to unstyled block flow: the cards stacked down the page in the body flow
   instead of appearing as a modal. This makes it what it claims to be -- a
   centred overlay with a readable card and a corner dismiss button.

   ``z-index`` sits under Bootstrap's modal backdrop (1080) so a real modal still
   wins, and above the sticky header/launcher. Scroll is allowed inside the
   overlay for a long message or several queued announcements. */
.popup-announcements {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem;
    overflow-y: auto;
    background: rgba(13, 27, 42, .55);
}
.popup-announcement {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: auto;
    padding: 1.5rem 1.75rem;
    background: #fff;
    color: var(--zm-navy);
    border-radius: var(--zm-radius);
    box-shadow: 0 24px 60px rgba(13, 27, 42, .35);
}
.popup-announcement__body { padding-right: 1.5rem; }
.popup-announcement__title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zm-navy);
}
.popup-announcement__message {
    margin: 0;
    color: var(--zm-muted);
    line-height: 1.6;
}
.popup-announcement__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--zm-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.popup-announcement__close:hover,
.popup-announcement__close:focus {
    color: var(--zm-navy);
    background: var(--zm-bg-soft);
}
@media (max-width: 575px) {
    .popup-announcement { padding: 1.25rem; }
}