/* ============================================================
   TENA — Brand & Design System
   Aesthetic: Friendly Practical Marketplace
   Single font: Outfit (geometric sans matching the logo)
   White background, photo-led, trust-signal heavy, mobile-dense
   v1.0 · 2026-05-04
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    /* Brand greens (from logo — locked) */
    --tena-green:        #0F3D2E;
    --tena-green-deep:   #082218;
    --tena-green-soft:   #1B5942;
    --tena-green-tint:   #E8F0EC;   /* very light green wash for highlights */

    /* Brand gold (from logo — locked, used functionally) */
    --tena-gold:         #C9A227;
    --tena-gold-deep:    #8F6F12;
    --tena-gold-tint:    #FBF5DD;

    /* Neutrals (clean, not warm-cream) */
    --tena-white:        #FFFFFF;
    --tena-bg:           #F7F8F6;   /* subtle off-white app background */
    --tena-surface:      #FFFFFF;   /* cards on bg */
    --tena-surface-2:    #F1F3F0;   /* secondary surfaces, hovers */
    --tena-ink:          #1A1F1C;
    --tena-ink-2:        #4D5651;
    --tena-muted:        #7A847F;
    --tena-border:       #E4E7E5;
    --tena-border-strong:#C9CFCB;

    /* Status (functional colors) */
    --tena-success:      #1F7A4D;
    --tena-success-bg:   #E2F2EB;
    --tena-warning:      #B8860B;
    --tena-warning-bg:   #FBF1D6;
    --tena-danger:       #C0413E;
    --tena-danger-bg:    #FBE7E6;
    --tena-info:         #2C5F7A;
    --tena-info-bg:      #E0EBF1;

    /* Type */
    --tena-font:         'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Geometry */
    --r-xs:              4px;
    --r-sm:              8px;
    --r:                 12px;
    --r-lg:              16px;
    --r-pill:            999px;

    /* Shadows — subtle, functional */
    --shadow-xs:         0 1px 2px rgba(15, 22, 18, 0.04);
    --shadow-sm:         0 2px 4px rgba(15, 22, 18, 0.06);
    --shadow:            0 4px 12px rgba(15, 22, 18, 0.08);
    --shadow-lg:         0 12px 28px -8px rgba(15, 22, 18, 0.14);

    /* Motion */
    --ease:              cubic-bezier(0.2, 0, 0, 1);
    --t-fast:            150ms;
    --t:                 220ms;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    margin: 0;
    font-family: var(--tena-font);
    font-weight: 400;
    color: var(--tena-ink);
    background: var(--tena-bg);
    line-height: 1.5;
}

h1, h2, h3, h4, h5 {
    font-family: inherit;
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--tena-green); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--tena-green-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

::selection { background: var(--tena-gold-tint); color: var(--tena-green-deep); }

img { max-width: 100%; display: block; }

/* ── Container ───────────────────────────────────────────── */
.tena-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2vw, 1.5rem);
}

/* ── Navbar ──────────────────────────────────────────────── */
.tena-navbar {
    background: var(--tena-white);
    border-bottom: 1px solid var(--tena-border);
    position: sticky; top: 0; z-index: 50;
}
.tena-navbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 64px;
}

.tena-brand {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--tena-font);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-brand:hover { text-decoration: none; color: var(--tena-green-deep); }
.tena-brand-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tena-gold);
    margin-bottom: 4px;
}

.tena-search {
    flex: 1;
    max-width: 580px;
    position: relative;
}
.tena-search input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-bg);
    font: 500 0.95rem var(--tena-font);
    color: var(--tena-ink);
    transition: border-color var(--t), background var(--t);
}
.tena-search input:focus {
    outline: none;
    border-color: var(--tena-green);
    background: var(--tena-white);
}
.tena-search-icon {
    position: absolute;
    left: 0.95rem; top: 50%;
    transform: translateY(-50%);
    color: var(--tena-muted);
    pointer-events: none;
    font-size: 1.05rem;
}

.tena-nav-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--tena-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background var(--t);
}
.tena-nav-icon:hover { background: var(--tena-surface-2); }
.tena-nav-icon-badge {
    position: absolute; top: 6px; right: 6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tena-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--tena-white);
}

.tena-locale {
    border: 1.5px solid var(--tena-border);
    background: var(--tena-white);
    border-radius: var(--r-sm);
    padding: 0.4rem 0.7rem;
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-ink-2);
    cursor: pointer;
}

/* ── Brand logo image (used in nav) ──────────────────────── */
.tena-brand-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* ── Sticky-scroll affordance on the nav ─────────────────── */
.tena-navbar { transition: box-shadow var(--t); }
.tena-navbar.is-scrolled { box-shadow: var(--shadow-sm); }

/* ── Nav layout helpers ──────────────────────────────────── */
.tena-nav-spacer { flex: 1; }
.tena-nav-collapse {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tena-nav-link {
    color: var(--tena-ink-2);
    font: 500 0.95rem var(--tena-font);
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.tena-nav-link:hover {
    color: var(--tena-green-deep);
    background: var(--tena-surface-2);
    text-decoration: none;
}
.tena-nav-link.is-active {
    color: var(--tena-green-deep);
    font-weight: 600;
}

/* ── Hamburger toggle (mobile only) ──────────────────────── */
.tena-nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    color: var(--tena-ink);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-nav-toggle:hover { border-color: var(--tena-green); }
.tena-nav-toggle svg { width: 20px; height: 20px; display: block; }
.tena-nav-toggle .tena-icon-close { display: none; }
.tena-nav-toggle[aria-expanded="true"] .tena-icon-burger { display: none; }
.tena-nav-toggle[aria-expanded="true"] .tena-icon-close { display: block; }

/* ── Globe-icon language picker (uses <details>/<summary>) ─ */
.tena-locale-picker { position: relative; }
.tena-locale-picker[open] .tena-locale-trigger {
    background: var(--tena-surface-2);
    border-color: var(--tena-border-strong);
}
.tena-locale-picker[open] .tena-locale-chevron { transform: rotate(180deg); }

.tena-locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem 0.45rem 0.65rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-ink-2);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.tena-locale-trigger::-webkit-details-marker { display: none; }
.tena-locale-trigger:hover { border-color: var(--tena-green); color: var(--tena-ink); }
.tena-locale-trigger .tena-globe-icon { width: 16px; height: 16px; }
.tena-locale-chevron {
    width: 12px; height: 12px;
    opacity: 0.7;
    transition: transform var(--t-fast);
}

.tena-locale-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: 0.35rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.tena-locale-menu form { margin: 0; }
.tena-locale-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font: 500 0.95rem var(--tena-font);
    color: var(--tena-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}
.tena-locale-option:hover,
.tena-locale-option:focus-visible {
    background: var(--tena-surface-2);
    outline: none;
}
.tena-locale-option-code {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    text-transform: uppercase;
}
.tena-locale-option[aria-current="true"] {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-locale-option[aria-current="true"] .tena-locale-option-code {
    color: var(--tena-green-soft);
}

/* ── Mobile collapse behavior ────────────────────────────── */
@media (max-width: 767.98px) {
    .tena-brand-logo { height: 40px; }
    .tena-navbar-inner { gap: 0.5rem; }

    /* Mobile nav redesign: the hamburger and its menu are removed — primary
       navigation is the bottom bar, and account/secondary items live in the
       dashboard hub ("You"). Only the language switcher stays in the top bar,
       using its compact desktop dropdown form. */
    .tena-nav-toggle,
    .tena-nav-collapse { display: none; }
}

/* ── Profile dropdown (uses <details>/<summary>) ─────────── */
.tena-profile-picker { position: relative; }
.tena-profile-picker[open] .tena-profile-trigger {
    background: var(--tena-surface-2);
    border-color: var(--tena-border-strong);
}
.tena-profile-picker[open] .tena-profile-chevron { transform: rotate(180deg); }

.tena-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    border: 1.5px solid var(--tena-border);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 600 0.88rem var(--tena-font);
    color: var(--tena-ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-profile-trigger::-webkit-details-marker { display: none; }
.tena-profile-trigger:hover { border-color: var(--tena-green); }
.tena-profile-trigger .tena-profile-chevron {
    width: 12px; height: 12px;
    opacity: 0.7;
    transition: transform var(--t-fast);
}
.tena-profile-trigger-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tena-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font: 700 0.78rem var(--tena-font);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.tena-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

.tena-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    margin: 0;
    padding: 0.35rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}

.tena-profile-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.75rem 0.85rem;
    border-bottom: 1px solid var(--tena-border);
    margin-bottom: 0.35rem;
}
.tena-profile-header-text { min-width: 0; flex: 1; }
.tena-profile-header-name {
    font: 600 0.95rem var(--tena-font);
    color: var(--tena-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-profile-header-meta {
    font-size: 0.78rem;
    color: var(--tena-muted);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--tena-success-bg);
    color: var(--tena-success);
    border-radius: var(--r-sm);
    font: 600 0.74rem var(--tena-font);
}
.tena-profile-verified svg { width: 13px; height: 13px; }

.tena-profile-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    font: 500 0.92rem var(--tena-font);
    color: var(--tena-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-profile-option:hover,
.tena-profile-option:focus-visible {
    background: var(--tena-surface-2);
    color: var(--tena-green-deep);
    outline: none;
}
.tena-profile-option svg {
    width: 16px; height: 16px;
    color: var(--tena-ink-2);
    flex-shrink: 0;
}
.tena-profile-option:hover svg { color: var(--tena-green-deep); }

.tena-profile-separator {
    height: 1px;
    background: var(--tena-border);
    margin: 0.35rem 0;
}

.tena-profile-option-danger { color: var(--tena-danger); }
.tena-profile-option-danger svg { color: var(--tena-danger); }
.tena-profile-option-danger:hover,
.tena-profile-option-danger:focus-visible {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
}
.tena-profile-option-danger:hover svg { color: var(--tena-danger); }

@media (max-width: 767.98px) {
    .tena-profile-picker {
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--tena-border);
    }
    .tena-profile-trigger {
        width: 100%;
        justify-content: flex-start;
        padding: 0.55rem 0.9rem;
    }
    .tena-profile-trigger-name { max-width: none; flex: 1; }
    .tena-profile-menu {
        position: static;
        margin-top: 0.4rem;
        box-shadow: none;
        border-color: var(--tena-border);
        min-width: 0;
    }
}

/* ── Profile page ────────────────────────────────────────── */
.tena-profile-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}
.tena-profile-card {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.tena-profile-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.tena-profile-hero-text { min-width: 0; flex: 1; }
.tena-profile-hero-name {
    font: 700 1.5rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0 0 0.25rem;
}
.tena-profile-hero-meta {
    font-size: 0.9rem;
    color: var(--tena-muted);
    margin: 0;
}
.tena-profile-section-title {
    font: 600 0.78rem var(--tena-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tena-muted);
    margin: 0 0 0.75rem;
}
.tena-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}
.tena-profile-field-label {
    font-size: 0.78rem;
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
}
.tena-profile-field-value {
    font: 500 0.98rem var(--tena-font);
    color: var(--tena-ink);
}
.tena-profile-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.tena-profile-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    color: var(--tena-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tena-profile-action:hover {
    border-color: var(--tena-green);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-profile-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    flex-shrink: 0;
}
.tena-profile-action-icon svg { width: 20px; height: 20px; }
.tena-profile-action-text { min-width: 0; flex: 1; }
.tena-profile-action-title {
    font: 600 0.98rem var(--tena-font);
    color: inherit;
    margin: 0;
}
.tena-profile-action-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
    margin: 0.15rem 0 0;
}
.tena-kyc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    font: 700 0.72rem var(--tena-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-kyc-pill svg { width: 12px; height: 12px; }
.tena-kyc-pill-verified { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-kyc-pill-pending  { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-kyc-pill-none     { background: var(--tena-surface-2); color: var(--tena-ink-2); }
.tena-kyc-pill-rejected { background: var(--tena-danger-bg); color: var(--tena-danger); }

/* ── Buttons ─────────────────────────────────────────────── */
.tena-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--r-pill);
    border: 1.5px solid transparent;
    font: 600 0.95rem var(--tena-font);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
    line-height: 1.2;
}
.tena-btn:hover { text-decoration: none; }
.tena-btn:active { transform: scale(0.98); }
/* Disabled state for every button variant. There was none, so a disabled
   button rendered identically to a live one and simply swallowed the click —
   worse than no guard at all, because the user gets no reason. Follows the
   existing .tena-shutter:disabled / .tena-chat-send:disabled idiom, and uses
   only existing tokens. Needed now that forms.js disables submit while a
   request is in flight or while the form would only repeat a rejected
   value. (#199)

   aria-disabled carries the same look for a control that is blocked but must
   stay reachable: a consent gate has to be able to explain itself, and a
   `disabled` button is removed from the tab order, so a screen-reader user
   can never land on it to hear why. (#206) */
.tena-btn:disabled,
.tena-btn[disabled],
.tena-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.tena-btn:disabled:active,
.tena-btn[disabled]:active,
.tena-btn[aria-disabled="true"]:active { transform: none; }

.tena-btn-primary {
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
}
.tena-btn-primary:hover {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-color: var(--tena-green-deep);
}

.tena-btn-gold {
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    border-color: var(--tena-gold);
    font-weight: 700;
}
.tena-btn-gold:hover {
    background: var(--tena-gold-deep);
    color: var(--tena-white);
    border-color: var(--tena-gold-deep);
}

.tena-btn-outline {
    background: var(--tena-white);
    color: var(--tena-ink);
    border-color: var(--tena-border-strong);
}
.tena-btn-outline:hover {
    border-color: var(--tena-green);
    color: var(--tena-green-deep);
}

.tena-btn-ghost {
    background: transparent;
    color: var(--tena-ink-2);
    border-color: transparent;
}
.tena-btn-ghost:hover { background: var(--tena-surface-2); color: var(--tena-ink); }

.tena-btn-danger {
    background: var(--tena-danger);
    color: var(--tena-white);
    border-color: var(--tena-danger);
}
.tena-btn-outline-danger {
    background: transparent;
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}
.tena-btn-outline-danger:hover {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}

.tena-btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
.tena-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.tena-btn-block { width: 100%; }

/* Touch targets: guarantee >=44px tall buttons on phones (#172) — the compact
   .tena-btn-sm row actions (View/Edit/View receipt) were ~31px. Mobile only;
   desktop button geometry is unchanged. */
@media (max-width: 700px) {
    .tena-btn { min-height: 44px; }
}

/* Sell CTA — distinctive accent button used in nav */
.tena-btn-sell {
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    border-color: var(--tena-gold);
    padding: 0.55rem 1.1rem;
    font-weight: 700;
    border-radius: var(--r-pill);
}
.tena-btn-sell:hover {
    background: var(--tena-gold-deep);
    color: var(--tena-white);
    border-color: var(--tena-gold-deep);
}

/* ── Form controls ───────────────────────────────────────── */
.tena-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tena-green-deep);
    margin-bottom: 0.35rem;
}

.tena-input,
.tena-select,
.tena-textarea {
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    background: var(--tena-surface-2);
    font: 400 0.95rem var(--tena-font);
    color: var(--tena-ink);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.tena-input::placeholder,
.tena-textarea::placeholder { color: var(--tena-muted); }
.tena-input:hover,
.tena-select:hover,
.tena-textarea:hover { border-color: var(--tena-green); }
.tena-input:focus,
.tena-select:focus,
.tena-textarea:focus {
    outline: none;
    background: var(--tena-white);
    border-color: var(--tena-green);
    box-shadow: 0 0 0 2px rgba(15, 61, 46, 0.18);
}
.tena-textarea { min-height: 120px; resize: vertical; }

/* Kill WebKit's default blue autofill wash: paint the field with the brand
   surface (white on focus, matching the states above) via an inset shadow,
   and stall the background transition so the blue never flashes in. (#155) */
.tena-input:-webkit-autofill,
.tena-select:-webkit-autofill,
.tena-textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--tena-surface-2) inset;
    -webkit-text-fill-color: var(--tena-ink);
    caret-color: var(--tena-ink);
    transition: background-color 100000s ease-in-out 0s;
}
.tena-input:-webkit-autofill:focus,
.tena-select:-webkit-autofill:focus,
.tena-textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--tena-white) inset;
}

/* Brand-tinted checkboxes/radios site-wide (no token changes) */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--tena-green); }

/* Group spacing so stacked fields breathe consistently */
.tena-field + .tena-field { margin-top: 1rem; }

.tena-input.is-otp {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.5em;
    font-weight: 600;
}

.tena-help { font-size: 0.85rem; color: var(--tena-muted); margin-top: 0.35rem; }
.tena-help--error { color: var(--tena-danger); font-weight: 500; }
.tena-input.is-error,
.tena-select.is-error { border-color: var(--tena-danger); background-color: var(--tena-danger-bg); }
.tena-input.is-error:focus,
.tena-select.is-error:focus { box-shadow: 0 0 0 3px rgba(192, 65, 62, 0.18); }

/* Error state — invalid input + inline error message under the field */
.tena-input.is-invalid,
.tena-select.is-invalid,
.tena-textarea.is-invalid {
    border-color: var(--tena-danger);
    background: var(--tena-danger-bg);
}
.tena-input.is-invalid:focus,
.tena-select.is-invalid:focus,
.tena-textarea.is-invalid:focus {
    border-color: var(--tena-danger);
    box-shadow: 0 0 0 2px rgba(192, 65, 62, 0.22);
}
.tena-help.is-error { color: var(--tena-danger); font-weight: 500; }
/* Counterpart to .is-error for live status lines that also report success
   (e.g. the KYC capture steps), so the two states are told apart by colour
   and weight rather than by reading the sentence. (#185) */
.tena-help.is-success { color: var(--tena-success); font-weight: 500; }
/* Third state for advisory notices that are neither failure nor success —
   "we could not check this, a human will" — so they don't have to borrow the
   alarm of .is-error to be noticed. (#183)
   Uses --tena-gold-deep rather than --tena-warning: same caution family, but
   4.72:1 on white against --tena-warning's 3.25:1, so it clears WCAG AA at
   this text size. No new colour — both are existing tokens (§11). */
.tena-help.is-warning { color: var(--tena-gold-deep); font-weight: 500; }

/* ── Cards ───────────────────────────────────────────────── */
.tena-card {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-card-body { padding: 1.25rem; }

/* Selectable radio card — category pickers on the report / contact forms.
   Hover and checked states give clear feedback (uses existing tokens). */
.tena-radio-card {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    align-items: flex-start;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tena-radio-card:hover { border-color: var(--tena-green); }
.tena-radio-card:has(input:checked) {
    border-color: var(--tena-green);
    background: var(--tena-green-tint);
    box-shadow: inset 0 0 0 1px var(--tena-green);
}
.tena-radio-card input[type="radio"] { margin-top: 0.2rem; accent-color: var(--tena-green-deep); flex-shrink: 0; }
.tena-radio-card__title { font-weight: 600; color: var(--tena-ink); }
.tena-radio-card__hint { font-size: 0.82rem; color: var(--tena-muted); margin-top: 0.1rem; }

/* Listing card — denser, photo-led, with save heart */
.tena-listing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t);
    position: relative;
}
.tena-listing-card:hover {
    border-color: var(--tena-border-strong);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.tena-listing-img {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--tena-surface-2);
}
.tena-listing-img img {
    width: 100%; height: 100%; object-fit: cover;
}

.tena-save-heart {
    position: absolute;
    top: 0.55rem; right: 0.55rem;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--tena-white);
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--tena-ink-2);
    font-size: 1rem;
    transition: color var(--t-fast), transform var(--t-fast);
    box-shadow: var(--shadow-sm);
}
.tena-save-heart:hover { transform: scale(1.08); color: var(--tena-danger); }
.tena-save-heart.is-saved { color: var(--tena-danger); }

.tena-listing-tag {
    position: absolute;
    bottom: 0.55rem; left: 0.55rem;
    padding: 0.2rem 0.55rem;
    background: rgba(15, 22, 18, 0.78);
    color: var(--tena-white);
    border-radius: var(--r-xs);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tena-listing-tag.is-gold { background: var(--tena-gold); color: var(--tena-green-deep); }

.tena-listing-body { padding: 0.7rem 0.85rem 0.85rem; }

.tena-listing-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.tena-listing-price .tena-currency {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.15rem;
}

.tena-listing-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--tena-ink-2);
    line-height: 1.35;
    margin: 0.25rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.tena-listing-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--tena-muted);
}
.tena-listing-meta-icon { font-size: 0.85rem; }

/* ── Listing card — richer storefront treatment ───────────── */
.tena-listing-card { display: flex; flex-direction: column; }
.tena-listing-card:hover {
    transform: translateY(-3px);
    border-color: var(--tena-border-strong);
    box-shadow: 0 8px 22px -8px rgba(15, 61, 46, 0.22);
}
.tena-listing-card:hover .tena-listing-img img { transform: scale(1.04); }
.tena-listing-price { color: var(--tena-green-deep); }
.tena-listing-img img { transition: transform var(--t); }
.tena-listing-img-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--tena-muted);
    background: var(--tena-surface-2);
}

/* Condition pill — sits on the photo, colour-coded by grade. */
.tena-cond {
    position: absolute;
    top: 0.55rem; left: 0.55rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--r-pill, 999px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 22, 18, 0.18);
    backdrop-filter: saturate(1.2);
}
.tena-cond-new     { background: var(--tena-gold);       color: var(--tena-green-deep); }
.tena-cond-likenew { background: var(--tena-green);      color: var(--tena-white); }
.tena-cond-good    { background: var(--tena-white);      color: var(--tena-ink-2); border: 1px solid var(--tena-border-strong); }
.tena-cond-fair    { background: rgba(26,31,28,0.78);    color: var(--tena-white); }

.tena-listing-body { display: flex; flex-direction: column; flex: 1; }
.tena-listing-foot {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.55rem;
    font-size: 0.76rem;
    color: var(--tena-muted);
}
.tena-listing-foot svg { flex-shrink: 0; }
.tena-listing-foot-loc {
    display: inline-flex; align-items: center; gap: 0.22rem;
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tena-listing-foot-sep { opacity: 0.5; }
.tena-listing-foot-views {
    display: inline-flex; align-items: center; gap: 0.22rem;
    margin-left: auto;
    color: var(--tena-ink-2);
    font-weight: 600;
}

/* ── Browse: full-bleed catalog shell with a flush-left brand rail ── */
.tena-shop-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: calc(100vh - 140px);
    background: var(--tena-bg);
    /* Cancel the global .tena-footer margin-top so the green rail meets
       the footer flush — no off-white band between them. */
    margin-bottom: -4rem;
}
/* Deep-green → gold-accented rail, pinned to the extreme left edge,
   matching the seller/admin workspace sidebars. */
.tena-shop-side {
    background: var(--tena-green-deep);
    color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    align-self: stretch;            /* fill the shell down to the footer */
    padding-bottom: 1.5rem;
}
/* Keep the controls in view on long result pages while the green rail
   itself still reaches the footer. */
.tena-shop-side-inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}
.tena-shop-main {
    padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem) 3rem;
    min-width: 0;
}

.tena-facets-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tena-facets-head h2 {
    font-family: var(--tena-font);
    font-size: 1rem; font-weight: 700;
    color: var(--tena-white); margin: 0;
}
.tena-facets-clear {
    font-size: 0.78rem; font-weight: 700;
    color: var(--tena-gold); text-decoration: none;
}
.tena-facets-clear:hover { text-decoration: underline; }
.tena-facet-grp {
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tena-facet-grp:last-child { border-bottom: 0; }
.tena-facet-title {
    display: block;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--tena-gold);
    margin: 0 0 0.7rem;
}
.tena-facet-input,
.tena-facet-grp select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-sm);
    font: inherit; font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.97); color: var(--tena-ink);
}
.tena-facet-input::placeholder { color: var(--tena-muted); }
.tena-facet-input:focus,
.tena-facet-grp select:focus {
    outline: none;
    border-color: var(--tena-gold);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}
.tena-facet-price { display: flex; align-items: center; gap: 0.4rem; }
.tena-facet-price span { color: rgba(255, 255, 255, 0.6); }

/* Category list with live counts */
.tena-facet-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tena-facet-cats a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin: 0 -0.6rem;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8); text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-facet-cats a:hover { background: rgba(255, 255, 255, 0.07); color: var(--tena-white); }
.tena-facet-cats a.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--tena-white);
    font-weight: 700;
}
.tena-facet-count {
    font-size: 0.74rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-pill, 999px);
}
.tena-facet-cats a.is-active .tena-facet-count {
    background: var(--tena-gold); color: var(--tena-green-deep);
}

/* Trending chips */
.tena-trend { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tena-trend a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.34rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill, 999px);
    font-size: 0.8rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85); text-decoration: none;
    transition: all var(--t-fast);
}
.tena-trend a:hover { border-color: var(--tena-gold); color: var(--tena-gold); }
.tena-trend a.is-active {
    background: var(--tena-gold); border-color: var(--tena-gold);
    color: var(--tena-green-deep);
}

/* Condition pill-set (radio styled as pills) */
.tena-pillset { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tena-pillset input { position: absolute; opacity: 0; pointer-events: none; }
.tena-pillset label {
    display: inline-flex; align-items: center;
    padding: 0.36rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill, 999px);
    font-size: 0.8rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85); cursor: pointer;
    transition: all var(--t-fast);
}
.tena-pillset label:hover { border-color: var(--tena-gold); }
.tena-pillset input:checked + label {
    background: var(--tena-gold); border-color: var(--tena-gold);
    color: var(--tena-green-deep);
}
.tena-pillset input:focus-visible + label {
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
}

/* Results toolbar above the grid (on the light main area) */
.tena-browse-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.tena-browse-bar-count { color: var(--tena-muted); font-size: 0.92rem; }
.tena-browse-bar-count strong { color: var(--tena-green-deep); font-weight: 700; }
.tena-browse-sort {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.86rem; color: var(--tena-muted);
}
.tena-browse-sort select {
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--tena-border-strong);
    border-radius: var(--r-sm);
    font: inherit; font-size: 0.86rem;
    background: var(--tena-white); color: var(--tena-ink);
}

@media (max-width: 900px) {
    .tena-shop-shell { grid-template-columns: 1fr; }
    .tena-shop-side {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .tena-shop-side-inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .tena-shop-main { padding: 1.5rem 1rem 3rem; }
}

/* ── Compact card (homepage discovery) — image + title + price only ── */
.tena-card-mini {
    display: block;
    text-decoration: none;
    color: var(--tena-ink);
    transition: transform var(--t-fast);
}
.tena-card-mini:hover {
    text-decoration: none;
    color: var(--tena-ink);
    transform: translateY(-2px);
}
.tena-card-mini-thumb {
    aspect-ratio: 1;
    background: var(--tena-surface-2);
    overflow: hidden;
    position: relative;
}
.tena-card-mini-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--t);
}
.tena-card-mini:hover .tena-card-mini-thumb img { opacity: 0.92; }
.tena-card-mini-thumb-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--tena-muted);
    font-size: 1.5rem;
}
.tena-card-mini-title {
    margin: 0.5rem 0 0.15rem;
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink-2);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-card-mini-price {
    font: 700 0.95rem var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.01em;
}
.tena-card-mini-price .tena-currency {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.15rem;
}

/* ── Featured-categories row — subhead + horizontal strip of mini cards ── */
.tena-feature-headline {
    font: 700 clamp(1.75rem, 1.8vw + 1rem, 2.25rem) var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 1.75rem;
}
.tena-feature-row { margin-bottom: 2rem; }
.tena-feature-row:last-child { margin-bottom: 0; }
.tena-feature-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.tena-feature-row-title {
    font: 600 1.1rem var(--tena-font);
    color: var(--tena-ink);
    margin: 0;
}
.tena-feature-row-link {
    color: var(--tena-green);
    font: 600 0.85rem var(--tena-font);
    text-decoration: none;
    flex-shrink: 0;
}
.tena-feature-row-link:hover { color: var(--tena-green-deep); text-decoration: none; }

.tena-mini-strip-wrap { position: relative; }
.tena-mini-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 170px;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    padding: 0.25rem 0 0.5rem;
    scrollbar-width: none;
}
.tena-mini-strip::-webkit-scrollbar { display: none; }
.tena-mini-strip > * { scroll-snap-align: start; }

/* Hide the carousel arrows when nothing overflows (1-5 cards on desktop) */
.tena-mini-strip-wrap.no-scroll .tena-cat-strip-arrow { display: none; }

@media (max-width: 767.98px) {
    .tena-mini-strip { grid-auto-columns: 145px; gap: 0.85rem; }
    .tena-card-mini-title { font-size: 0.82rem; }
    .tena-card-mini-price { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    .tena-mini-strip { grid-auto-columns: 135px; }
}

/* ── Hero (homepage) — refined: layered gradient, dot grid, trust chips ── */
.tena-hero {
    position: relative;
    overflow: hidden;
    background: var(--tena-green-deep);
    color: var(--tena-white);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.tena-hero > .tena-container { position: relative; z-index: 1; }

.tena-hero h1 {
    color: var(--tena-white);
    font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.6rem;
}
.tena-hero h1 em {
    font-style: normal;
    color: var(--tena-gold);
    font-weight: 700;
}

.tena-hero-sub {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 0.5vw + 0.85rem, 1.15rem);
    max-width: 52ch;
    margin: 0 auto 1.75rem;
}

.tena-hero-search {
    max-width: 660px;
    margin: 0 auto;
    background: var(--tena-white);
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
    gap: 0.5rem;
    box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 0;
}
.tena-hero-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    font: 500 1rem var(--tena-font);
    background: transparent;
    color: var(--tena-ink);
    transition: opacity var(--t-fast);
    text-overflow: ellipsis;
}
.tena-hero-search input::placeholder { color: var(--tena-muted); }
.tena-hero-search > .tena-btn { flex: 0 0 auto; }

@media (max-width: 479.98px) {
    .tena-hero-search {
        padding: 0.3rem 0.3rem 0.3rem 1rem;
    }
    .tena-hero-search input { font-size: 0.92rem; }
    .tena-hero-search > .tena-btn {
        padding: 0.55rem 0.95rem;
        font-size: 0.9rem;
    }
}

.tena-hero-trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.tena-hero-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--r-pill);
    color: var(--tena-green-deep);
    font: 600 0.82rem var(--tena-font);
}
.tena-hero-trust-chip svg {
    width: 16px; height: 16px;
    color: var(--tena-gold-deep);
    flex-shrink: 0;
}

/* ── Section frame ───────────────────────────────────────── */
.tena-section { padding: clamp(2rem, 4vw, 3rem) 0; }

.tena-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.tena-section-title {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
    font-weight: 700;
    color: var(--tena-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.tena-section-link {
    color: var(--tena-green);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.tena-section-link:hover { color: var(--tena-green-deep); text-decoration: none; }

/* ── Trust handoff — slim white strip between hero and content ── */
.tena-trust-handoff {
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    border-bottom: 1px solid var(--tena-border);
    padding: 0.85rem 0;
    text-align: center;
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink-2);
    letter-spacing: 0.01em;
}
.tena-trust-handoff svg {
    width: 16px; height: 16px;
    color: var(--tena-gold-deep);
    vertical-align: -3px;
    margin-right: 0.35rem;
}

/* ── Category bubble — circular photo tile (homepage carousel) ── */
.tena-cat-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 110px;
    margin-inline: auto;
    text-decoration: none;
    color: var(--tena-ink);
    transition: transform var(--t);
}
.tena-cat-bubble:hover {
    text-decoration: none;
    color: var(--tena-green-deep);
    transform: translateY(-3px);
}
.tena-cat-bubble-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tena-surface-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--t), background var(--t);
}
.tena-cat-bubble-img img {
    width: 80%; height: 80%;
    object-fit: contain;
    transition: transform var(--t);
}
/* Admin-uploaded photo fills the bubble edge-to-edge (cropped via the round mask) */
.tena-cat-bubble-img.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tena-cat-bubble:hover .tena-cat-bubble-img {
    box-shadow: 0 12px 28px -10px rgba(15, 22, 18, 0.18);
    background: var(--tena-white);
}
.tena-cat-bubble:hover .tena-cat-bubble-img img {
    transform: scale(1.06);
}
.tena-cat-bubble-name {
    font: 600 0.95rem var(--tena-font);
    color: var(--tena-ink);
    margin: 0;
    text-align: center;
}
.tena-cat-bubble-count {
    font: 500 0.78rem var(--tena-font);
    color: var(--tena-muted);
    margin-top: -0.45rem;
    text-align: center;
}

/* ── Horizontal scroll-snap carousel (used by category strip) ── */
.tena-cat-strip-wrap { position: relative; }
.tena-cat-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    padding: 0.5rem 0 1rem;
    scrollbar-width: none;
}
.tena-cat-strip::-webkit-scrollbar { display: none; }
.tena-cat-strip > * { scroll-snap-align: start; }

.tena-cat-strip-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tena-ink);
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.tena-cat-strip-arrow:hover {
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
    transform: translateY(-50%) scale(1.05);
}
.tena-cat-strip-arrow svg { width: 18px; height: 18px; }
.tena-cat-strip-arrow.is-prev { left: -0.5rem; }
.tena-cat-strip-arrow.is-next { right: -0.5rem; }
.tena-cat-strip-arrow[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}
.tena-cat-strip-wrap.no-scroll .tena-cat-strip-arrow,
.tena-cat-strip-wrap.no-scroll::before,
.tena-cat-strip-wrap.no-scroll::after {
    display: none;
}
/* When everything fits, distribute bubbles evenly across the row */
.tena-cat-strip-wrap.no-scroll .tena-cat-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.tena-cat-strip-wrap::before,
.tena-cat-strip-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 1;
}
.tena-cat-strip-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--tena-bg), transparent);
}
.tena-cat-strip-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, var(--tena-bg), transparent);
}
@media (max-width: 767.98px) {
    .tena-cat-strip { grid-auto-columns: 90px; gap: 0.75rem; }
    .tena-cat-bubble { max-width: 90px; }
    .tena-cat-bubble-name { font-size: 0.85rem; }
    .tena-cat-bubble-count { font-size: 0.7rem; }

    .tena-cat-strip-arrow {
        width: 36px; height: 36px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(4px);
    }
    .tena-cat-strip-arrow svg { width: 16px; height: 16px; }
    .tena-cat-strip-arrow.is-prev { left: 0; }
    .tena-cat-strip-arrow.is-next { right: 0; }

    .tena-cat-strip-wrap::before,
    .tena-cat-strip-wrap::after { width: 22px; }
}

/* ── Admin: category image thumbnail uploader ─────────────── */
.tena-cat-admin-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--tena-surface-2);
    border: 1.5px dashed var(--tena-border-strong);
    color: var(--tena-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-cat-admin-thumb:hover {
    border-color: var(--tena-green);
    color: var(--tena-green-deep);
    background: var(--tena-green-tint);
}
.tena-cat-admin-thumb svg { width: 18px; height: 18px; }
.tena-cat-admin-thumb.has-image {
    border-style: solid;
    border-color: var(--tena-border);
    background: var(--tena-white);
}
.tena-cat-admin-thumb.has-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.tena-btn-icon-x {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: transparent;
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    color: var(--tena-muted);
    font: 600 0.95rem var(--tena-font);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tena-btn-icon-x:hover {
    color: var(--tena-danger);
    border-color: var(--tena-danger);
}

/* ── Grid ────────────────────────────────────────────────── */
.tena-grid { display: grid; gap: 1rem; }
.tena-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tena-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tena-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tena-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tena-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .tena-grid-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tena-grid-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .tena-grid-cols-3, .tena-grid-cols-4, .tena-grid-cols-5, .tena-grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .tena-grid-cols-3, .tena-grid-cols-4, .tena-grid-cols-5, .tena-grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .tena-grid-cols-2 { grid-template-columns: 1fr; }
}

/* ── Listing detail ──────────────────────────────────────── */
.tena-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2.5rem;
}
@media (max-width: 900px) {
    .tena-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

.tena-gallery-main {
    aspect-ratio: 4/3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tena-surface-2);
    margin-bottom: 0.6rem;
}
.tena-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.tena-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.tena-gallery-thumb {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--tena-surface-2);
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    transition: border-color var(--t-fast);
}
.tena-gallery-thumb.is-active { border-color: var(--tena-green); }
.tena-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tena-gallery-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--tena-muted);
}
/* Phone: thumbnails become a swipeable scroll-snap strip. (#66) */
@media (max-width: 560px) {
    .tena-gallery-thumbs {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .tena-gallery-thumb { flex: 0 0 22%; scroll-snap-align: start; }
}

/* ── Listing image lightbox (#66) ─────────────────────────── */
.tena-lightbox {
    border: none;
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: rgba(8, 15, 13, 0.96);
    overflow: hidden;
}
.tena-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.tena-lightbox__img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    touch-action: pinch-zoom;
}
.tena-lightbox__close,
.tena-lightbox__nav {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--tena-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tena-lightbox__close:hover,
.tena-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.tena-lightbox__close { top: 0.6rem; right: 0.8rem; width: 44px; height: 44px; font-size: 1.7rem; }
.tena-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; }
.tena-lightbox__nav--prev { left: 0.6rem; }
.tena-lightbox__nav--next { right: 0.6rem; }
.tena-lightbox__counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--tena-white);
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.tena-detail-price {
    font-size: clamp(1.6rem, 1.5vw + 1rem, 2.2rem);
    font-weight: 700;
    color: var(--tena-ink);
    letter-spacing: -0.02em;
    margin: 0;
}
.tena-detail-price .tena-currency {
    font-size: 0.55em;
    font-weight: 500;
    color: var(--tena-muted);
    margin-left: 0.4rem;
    letter-spacing: 0;
}

.tena-detail-title {
    font-size: clamp(1.1rem, 0.5vw + 1rem, 1.4rem);
    font-weight: 600;
    color: var(--tena-ink);
    margin: 0.25rem 0 0;
    line-height: 1.3;
}

/* Trust strip below the buy button */
.tena-trust-strip {
    background: var(--tena-green-tint);
    border-radius: var(--r);
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tena-trust-item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--tena-ink);
}
.tena-trust-item-icon {
    color: var(--tena-green);
    font-size: 1rem;
    margin-top: 0.05rem;
}

/* Attribute list */
.tena-attrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--tena-border);
    border-bottom: 1px solid var(--tena-border);
    margin: 1.25rem 0;
    list-style: none;
}
.tena-attrs li {
    font-size: 0.85rem;
    color: var(--tena-ink-2);
}
.tena-attrs strong {
    display: block;
    color: var(--tena-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* Seller card on detail */
.tena-seller {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    background: var(--tena-surface-2);
    border-radius: var(--r);
    margin: 1rem 0;
}
.tena-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tena-green);
    color: var(--tena-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.tena-seller-info { flex: 1; min-width: 0; }
.tena-seller-name {
    font-weight: 600;
    color: var(--tena-ink);
    margin: 0;
    display: flex; align-items: center; gap: 0.4rem;
}
.tena-verified {
    display: inline-flex; align-items: center;
    gap: 0.2rem;
    color: var(--tena-success);
    font-size: 0.75rem;
    font-weight: 600;
}
.tena-seller-meta {
    font-size: 0.82rem;
    color: var(--tena-muted);
}
.tena-seller-meta .tena-stars { color: var(--tena-gold-deep); margin-right: 0.3rem; }

/* ── Filter chips ────────────────────────────────────────── */
.tena-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 1.25rem;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.tena-chip {
    display: inline-flex; align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid var(--tena-border-strong);
    border-radius: var(--r-pill);
    background: var(--tena-white);
    font: 500 0.85rem var(--tena-font);
    color: var(--tena-ink);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
}
.tena-chip:hover { border-color: var(--tena-green); }
.tena-chip.is-active {
    background: var(--tena-ink);
    border-color: var(--tena-ink);
    color: var(--tena-white);
}
.tena-chip-divider { width: 1px; height: 24px; background: var(--tena-border-strong); margin: 0 0.25rem; flex-shrink: 0; }

/* ── Tabs ────────────────────────────────────────────────── */
.tena-tabs {
    display: flex;
    border-bottom: 1px solid var(--tena-border);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.tena-tab {
    padding: 0.85rem 1.25rem;
    background: none;
    border: none;
    color: var(--tena-ink-2);
    font: 600 0.92rem var(--tena-font);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--t-fast);
}
.tena-tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--tena-green);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t);
}
.tena-tab:hover { color: var(--tena-ink); text-decoration: none; }
.tena-tab.is-active { color: var(--tena-green-deep); font-weight: 700; }
.tena-tab.is-active::after { transform: scaleX(1); height: 3px; background: var(--tena-gold); }

/* ── Status badges ───────────────────────────────────────── */
.tena-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--tena-surface-2);
    color: var(--tena-ink);
}
.tena-badge-success { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-badge-warn    { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-badge-danger  { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-badge-info    { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-badge-gold    { background: var(--tena-gold-tint); color: var(--tena-gold-deep); }

/* ── Steps ───────────────────────────────────────────────── */
.tena-steps {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.tena-step {
    display: inline-flex; align-items: center;
    gap: 0.5rem;
    flex: none;                 /* don't shrink in the scrolling rail */
    color: var(--tena-muted);
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
a.tena-step:hover .tena-step-label { text-decoration: underline; }
.tena-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tena-surface-2);
    color: var(--tena-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.tena-step.is-active { color: var(--tena-ink); font-weight: 600; }
.tena-step.is-active .tena-step-num { background: var(--tena-green); color: var(--tena-white); }
.tena-step.is-done { color: var(--tena-green-deep); }
.tena-step.is-done .tena-step-num { background: var(--tena-success); color: var(--tena-white); }
.tena-step-divider {
    flex: 1;
    height: 2px;
    background: var(--tena-border);
    min-width: 16px;
    border-radius: 1px;
}

/* ── Camera frame ────────────────────────────────────────── */
.tena-camera-frame {
    aspect-ratio: 4/3;
    background: #0a0a0a;
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
}
.tena-camera-frame::before,
.tena-camera-frame::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--tena-gold);
}
.tena-camera-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tena-camera-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.tena-camera-frame video,
.tena-camera-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ── Sell wizard ─────────────────────────────────────────── */
/* Paired fields (price/condition, district/sector) sit two-up on desktop
   and stack on phones so neither field is squeezed to ~165px. (#27) */
.tena-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .tena-field-grid { grid-template-columns: 1fr; }
}

/* Captured-photo thumbnails — larger touch targets, used in the capture rail. (#27/#29/#60) */
.tena-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 2px solid var(--tena-border);
}
.tena-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 44×44 delete target (was 26px) — meets the touch-target minimum. (#29) */
.tena-thumb-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(192, 65, 62, 0.92);
    color: var(--tena-white);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.tena-thumb-del:hover { background: var(--tena-danger); }

/* Inline delete confirmation — replaces an accidental one-tap delete with a
   deliberate confirm step, without a native confirm() dialog. (#29) */
.tena-thumb-confirm {
    position: absolute;
    inset: 0;
    background: rgba(8, 34, 24, 0.86);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.5rem;
    text-align: center;
}
.tena-thumb-confirm-label {
    color: var(--tena-white);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}
.tena-thumb-confirm-actions { display: flex; gap: 0.5rem; }
.tena-thumb-confirm button {
    min-width: 44px; height: 38px;
    padding: 0 0.7rem;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
}
.tena-thumb-confirm .tena-confirm-yes { background: var(--tena-danger); color: var(--tena-white); }
.tena-thumb-confirm .tena-confirm-no  { background: var(--tena-white); color: var(--tena-ink); }

/* Photo-quantity nudge: encourage 3+ photos, turn positive once met. (#28) */
.tena-photo-nudge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: var(--tena-gold-tint);
    color: var(--tena-gold-deep);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}
.tena-photo-nudge.is-met {
    background: var(--tena-success-bg);
    color: var(--tena-success);
}

/* Upload progress bar — replaces the silent text-only "Uploading…". (#30) */
.tena-upload-progress {
    margin-top: 0.75rem;
    height: 6px;
    border-radius: 999px;
    background: var(--tena-surface-2);
    overflow: hidden;
}
.tena-upload-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tena-gold);
    transition: width 0.2s ease;
}
.tena-upload-progress.is-indeterminate > span {
    width: 40%;
    animation: tena-upload-slide 1.1s ease-in-out infinite;
}
@keyframes tena-upload-slide {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ── Photo capture (#60) ─────────────────────────────────────
   Desktop: an embedded camera card (parts stacked vertically).
   Mobile (≤640px): a fixed full-screen camera — top bar, viewfinder fills the
   space, captured rail + centred round shutter pinned at the bottom. */
.tena-capture {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}
.tena-capture__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tena-capture__back {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    color: var(--tena-ink);
    text-decoration: none;
    font-size: 1.2rem;
}
.tena-capture__back:hover { background: var(--tena-surface-2); }
.tena-capture__count { font-weight: 700; color: var(--tena-ink); }
.tena-capture__done { margin-left: auto; }
.tena-capture__intro { color: var(--tena-ink-2); font-size: 0.9rem; margin: 0; }
.tena-capture__stage {
    position: relative;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.tena-capture__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tena-capture__frame {
    position: absolute; inset: 12px;
    pointer-events: none;
    display: flex; align-items: flex-end; justify-content: center;
}
.tena-capture__frame::before,
.tena-capture__frame::after {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--tena-gold);
}
.tena-capture__frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tena-capture__frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.tena-capture__hint {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(8, 34, 24, 0.6);
    color: var(--tena-white);
    font-size: 0.78rem;
    font-weight: 600;
}
.tena-capture__status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.tena-capture__rail {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.tena-capture__rail .tena-thumb { flex: 0 0 auto; width: 84px; }
.tena-capture__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}
.tena-capture__record { justify-self: start; }
.tena-capture__spacer { display: block; }

/* Round shutter button. */
.tena-shutter {
    justify-self: center;
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 4px solid var(--tena-white);
    background: var(--tena-gold);
    box-shadow: 0 0 0 2px var(--tena-border-strong);
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast);
}
.tena-shutter:hover:not(:disabled) { transform: scale(1.05); }
.tena-shutter:active:not(:disabled) { transform: scale(0.95); }
.tena-shutter:disabled { opacity: 0.45; cursor: default; }
.tena-shutter__core {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--tena-gold);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.tena-capture__videoprev-label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--tena-muted); margin: 0 0 0.5rem;
}
.tena-capture__videoprev-el {
    width: 100%; max-width: 420px; aspect-ratio: 4/3;
    background: #000; border-radius: var(--r-sm);
}

@media (max-width: 640px) {
    .tena-capture {
        position: fixed;
        inset: 0;
        z-index: 1200;
        max-width: none;
        gap: 0;
        background: #000;
    }
    .tena-capture__bar {
        flex: none;
        padding: 0.6rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__back { color: var(--tena-white); }
    .tena-capture__back:hover { background: rgba(255, 255, 255, 0.12); }
    .tena-capture__count { color: var(--tena-white); }
    .tena-capture__intro { display: none; }
    .tena-capture__stage {
        flex: 1 1 auto;
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 0;
    }
    .tena-capture__status {
        flex: none;
        align-items: center;
        padding: 0.5rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__status .tena-help { color: rgba(255, 255, 255, 0.85); }
    .tena-capture__rail {
        flex: none;
        padding: 0.5rem 0.9rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__rail .tena-thumb { width: 64px; }
    .tena-capture__controls {
        flex: none;
        padding: 0.75rem 0.9rem 1rem;
        background: rgba(8, 34, 24, 0.92);
    }
    .tena-capture__videoprev {
        flex: none;
        overflow-y: auto;
        padding: 0.75rem 0.9rem;
        background: #000;
    }
    .tena-capture__videoprev-label { color: rgba(255, 255, 255, 0.7); }
}

/* ── KYC capture framing guides (#64) ────────────────────────
   A dim mask + a document/face guide overlaid on the live camera so the
   subject lands square and in focus. Shared by the ID step (rounded ID-aspect
   rect) and the selfie step (oval face guide). */
.tena-capture-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: var(--r-sm);
    overflow: hidden;
}
.tena-capture-frame__video,
.tena-capture-frame__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tena-capture-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tena-capture-guide__box {
    width: 82%;
    aspect-ratio: 1.586 / 1;   /* ID-1 card proportions */
    border: 2px solid var(--tena-gold);
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 100vmax rgba(8, 34, 24, 0.45);  /* dim everything outside the box */
}
.tena-capture-guide--face .tena-capture-guide__box {
    width: 64%;
    aspect-ratio: 3 / 4;
    border-radius: 50%;
}
.tena-capture-guide__hint {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    background: rgba(8, 34, 24, 0.65);
    color: var(--tena-white);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Category step: tappable parent cards (reuse the homepage tile visuals) with
   a 2-up mobile grid, then leaf categories as chips. Replaces the native
   <select> + "leaf categories" jargon + native validation bubble. (#59) */
.tena-cat-pick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.25rem;
}
@media (min-width: 560px) { .tena-cat-pick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .tena-cat-pick-grid { grid-template-columns: repeat(4, 1fr); } }
.tena-cat-pick {
    appearance: none;
    border: none;
    background: none;
    display: block;
    width: 100%;
    padding: 0.4rem;
    border-radius: var(--r);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
/* The tile sub-parts are <span>s here (a <div> can't live inside a <button>),
   so force the block layout the homepage tile gets from its <div>s. */
.tena-cat-pick .tena-category-tile__image,
.tena-cat-pick .tena-category-tile__placeholder,
.tena-cat-pick .tena-category-tile__name { display: block; }
.tena-cat-pick:hover { background: var(--tena-surface-2); }
.tena-cat-pick.is-active {
    background: var(--tena-green-tint);
    box-shadow: inset 0 0 0 2px var(--tena-green);
}
.tena-cat-pick.is-active .tena-category-tile__name {
    color: var(--tena-green-deep);
    font-weight: 700;
}

/* Subcategory chips, revealed once a parent card is chosen. (#59) */
.tena-subcats { margin-top: 1.25rem; }
.tena-subcats__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    margin: 0 0 0.6rem;
}
.tena-subcats__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Inline field error — replaces the browser's native validation bubble. (#59) */
.tena-field-error {
    color: var(--tena-danger);
    background: var(--tena-danger-bg);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1rem;
}

/* ── Chat ────────────────────────────────────────────────── */
.tena-chat {
    background: var(--tena-bg);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1rem;
    height: 460px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tena-chat-msg {
    max-width: 75%;
    padding: 0.6rem 0.85rem;
    border-radius: var(--r-lg);
    font-size: 0.92rem;
    line-height: 1.4;
    align-self: flex-start;
    background: var(--tena-white);
    color: var(--tena-ink);
    border: 1px solid var(--tena-border);
    border-bottom-left-radius: var(--r-xs);
}
.tena-chat-msg.is-mine {
    align-self: flex-end;
    background: var(--tena-green);
    color: var(--tena-white);
    border-color: var(--tena-green);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-xs);
}
.tena-chat-msg.is-system {
    align-self: center;
    background: transparent;
    border: none;
    color: var(--tena-muted);
    font-size: 0.78rem;
}
.tena-chat-time { font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; }

.tena-chat-violation {
    background: var(--tena-danger-bg);
    color: var(--tena-danger);
    border: 1px solid rgba(192, 65, 62, 0.3);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    align-self: stretch;
}

/* ── KYC pair (admin) ────────────────────────────────────── */
.tena-kyc-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 700px) { .tena-kyc-pair { grid-template-columns: 1fr; } }

.tena-kyc-image {
    aspect-ratio: 4/3;
    background: var(--tena-surface-2);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
}
.tena-kyc-image img { width: 100%; height: 100%; object-fit: cover; }
.tena-kyc-image-label {
    position: absolute; top: 0.6rem; left: 0.6rem;
    background: rgba(15, 22, 18, 0.78);
    color: var(--tena-white);
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    font-weight: 600;
}

.tena-score {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    margin: 1.25rem 0;
}
.tena-score-bar {
    flex: 1;
    height: 6px;
    background: var(--tena-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.tena-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tena-danger) 0%, var(--tena-warning) 50%, var(--tena-success) 100%);
}
.tena-score-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tena-ink);
    min-width: 56px;
    text-align: right;
}

/* ── Footer — clean, functional ──────────────────────────── */
.tena-footer {
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    padding: 2.5rem 0 1.5rem;
    margin-top: 4rem;
}
.tena-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 800px) {
    .tena-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .tena-footer-grid { grid-template-columns: 1fr; }
}
.tena-footer h5 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tena-muted);
    margin: 0 0 0.85rem;
}
.tena-footer ul { list-style: none; padding: 0; margin: 0; }
.tena-footer li { margin-bottom: 0.5rem; }
.tena-footer a {
    color: var(--tena-ink-2);
    font-size: 0.9rem;
    text-decoration: none;
}
.tena-footer a:hover { color: var(--tena-green); text-decoration: underline; }

.tena-footer-tagline {
    color: var(--tena-muted);
    font-size: 0.9rem;
    max-width: 32ch;
    margin: 0.5rem 0 0;
}

.tena-footer-bottom {
    border-top: 1px solid var(--tena-border);
    padding-top: 1.25rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--tena-muted);
    font-size: 0.82rem;
}

/* Footer brand column logo + social row */
.tena-footer-brand-logo {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: 0.85rem;
}
.tena-footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}
.tena-footer-social a {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tena-border);
    border-radius: 50%;
    color: var(--tena-ink-2);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tena-footer-social a:hover {
    color: var(--tena-green);
    border-color: var(--tena-green);
    text-decoration: none;
}
.tena-footer-social svg { width: 16px; height: 16px; }

/* ── Page title with gold accent rule ──────────────────────
   The rule sits above the title text and matches its width
   because the title is inline-block. */
.tena-page-rule {
    display: inline-block;
}

/* ── Admin shell ─────────────────────────────────────────── */
.tena-admin {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--tena-bg);
}
.tena-admin-side {
    background: var(--tena-white);
    border-right: 1px solid var(--tena-border);
    padding: 1.5rem 0.75rem;
    display: flex;
    flex-direction: column;
}
.tena-admin-side .tena-brand {
    padding-inline: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}
.tena-admin-nav {
    list-style: none; padding: 0; margin: 0; flex: 1;
}
.tena-admin-nav a {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--tena-ink-2);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-admin-nav a:hover { background: var(--tena-surface-2); color: var(--tena-ink); text-decoration: none; }
.tena-admin-nav a.is-active {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-admin-nav-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
}
.tena-admin-main { padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem); overflow-x: hidden; }

/* ── Seller shell (sits under the public navbar) ─────────── */
.tena-seller-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    min-height: calc(100vh - 200px);
    background: var(--tena-bg);
}
.tena-seller-side {
    background: var(--tena-white);
    border-right: 1px solid var(--tena-border);
    padding: 1.5rem 0.75rem;
    align-self: stretch;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.tena-seller-side-header {
    padding: 0 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--tena-border);
}
.tena-seller-workspace-label {
    font: 700 0.7rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tena-muted);
    margin-bottom: 0.35rem;
}
.tena-seller-side-name {
    font: 600 1.02rem var(--tena-font);
    color: var(--tena-green-deep);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tena-seller-side-meta {
    font-size: 0.78rem;
    color: var(--tena-muted);
    margin-top: 0.15rem;
}

.tena-seller-nav-section {
    font: 700 0.68rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tena-muted);
    padding: 1rem 0.85rem 0.4rem;
}
.tena-seller-nav { list-style: none; padding: 0; margin: 0; }
.tena-seller-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--tena-ink-2);
    font: 500 0.92rem var(--tena-font);
    text-decoration: none;
    margin-bottom: 0.1rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.tena-seller-nav a:hover {
    background: var(--tena-surface-2);
    color: var(--tena-ink);
    text-decoration: none;
}
.tena-seller-nav a.is-active {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    font-weight: 600;
}
.tena-seller-nav-icon {
    width: 18px; height: 18px;
    color: inherit;
    flex-shrink: 0;
}
.tena-seller-nav a.is-active .tena-seller-nav-icon { color: var(--tena-green); }

.tena-seller-main {
    padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem);
    min-width: 0;
    overflow-x: hidden;
}

/* Workspace nav disclosure. The <details> ships open; a tiny synchronous script
   in the shell removes [open] below 992px so mobile starts collapsed (no flash,
   no force-open hack — the native open state paints reliably on every browser).
   On desktop it stays open and the slim bar is hidden. On mobile it becomes a
   slim collapsible context bar so content starts near the top (#53). */
.tena-ws-bar { display: none; }

@media (max-width: 991.98px) {
    /* Single column; pin the nav row to its content (auto) so a short page's
       leftover min-height inflates the main row, not the slim bar. */
    .tena-seller-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .tena-seller-side {
        position: static;
        height: auto;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--tena-border);
        overflow: visible;
    }
    /* Slim context bar = the <summary>. Tap to reveal the full workspace nav. */
    .tena-ws-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 48px;
        padding: 0.6rem 1rem;
        cursor: pointer;
        list-style: none;
        user-select: none;
        background: var(--tena-white);
        color: var(--tena-green-deep);
        font: 600 0.98rem var(--tena-font);
    }
    .tena-ws-bar::-webkit-details-marker { display: none; }
    .tena-ws-bar-context {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tena-ws-bar-menu {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex-shrink: 0;
        color: var(--tena-muted);
        font: 600 0.82rem var(--tena-font);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .tena-ws-bar-chevron { transition: transform var(--t-fast); }
    .tena-ws-disclosure[open] .tena-ws-bar-chevron { transform: rotate(180deg); }
    .tena-ws-disclosure[open] .tena-ws-bar { border-bottom: 1px solid var(--tena-border); }
    /* Collapsed by default on mobile (native <details>); revealed below the bar. */
    .tena-ws-disclosure > .tena-ws-body { display: none; }
    .tena-ws-disclosure[open] > .tena-ws-body {
        display: block;
        padding: 0.5rem 0.5rem 0.75rem;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tena-seller-side-header { display: none; }
    .tena-seller-main { padding: 1.25rem 1rem 2.5rem; }
}

/* ── Seller dashboard polish ─────────────────────────────── */
.tena-seller-greeting {
    background: var(--tena-green-tint);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.tena-seller-greeting-text { min-width: 0; flex: 1; }
.tena-seller-greeting-hello {
    font: 700 1.65rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}
.tena-seller-greeting-sub {
    font-size: 0.95rem;
    color: var(--tena-ink-2);
    margin: 0;
}

.tena-seller-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.tena-seller-stat {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.tena-seller-stat:hover {
    border-color: var(--tena-border-strong);
    box-shadow: var(--shadow-sm);
}
.tena-seller-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tena-seller-stat-label {
    font: 600 0.74rem var(--tena-font);
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.tena-seller-stat-icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
}
.tena-seller-stat-icon svg { width: 16px; height: 16px; }
.tena-seller-stat-value {
    font: 700 1.3rem var(--tena-font);
    color: var(--tena-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.tena-seller-stat-value-gold { color: var(--tena-gold-deep); }
.tena-seller-stat-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
}

.tena-seller-section {
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.tena-seller-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.tena-seller-section-title {
    font: 700 1.05rem var(--tena-font);
    color: var(--tena-green-deep);
    margin: 0;
}
.tena-seller-section-link {
    font: 600 0.85rem var(--tena-font);
    color: var(--tena-green);
    text-decoration: none;
}
.tena-seller-section-link:hover { color: var(--tena-green-deep); text-decoration: underline; }

.tena-seller-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--tena-muted);
    font-size: 0.95rem;
}

.tena-seller-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.tena-seller-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    color: var(--tena-ink);
    text-decoration: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tena-seller-action:hover {
    border-color: var(--tena-green);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--tena-green-deep);
    text-decoration: none;
}
.tena-seller-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--tena-gold-tint);
    color: var(--tena-gold-deep);
    flex-shrink: 0;
}
.tena-seller-action-icon-green {
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
}
.tena-seller-action-icon svg { width: 20px; height: 20px; }
.tena-seller-action-text { min-width: 0; flex: 1; }
.tena-seller-action-title {
    font: 600 0.98rem var(--tena-font);
    margin: 0;
    color: inherit;
}
.tena-seller-action-sub {
    font-size: 0.82rem;
    color: var(--tena-muted);
    margin: 0.15rem 0 0;
}

/* ── Wallet page ─────────────────────────────────────────── */
.tena-wallet-balance-card {
    position: relative;
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-radius: var(--r-lg);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.tena-wallet-balance-card { position: relative; }
.tena-wallet-balance-label {
    font: 600 0.78rem var(--tena-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.5rem;
    position: relative;
}
.tena-wallet-balance-amount {
    font: 800 2.5rem var(--tena-font);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    position: relative;
}
.tena-wallet-balance-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tena-gold);
    margin-right: 0.45rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-wallet-balance-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.65rem 0 0;
    position: relative;
}
.tena-wallet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    position: relative;
    flex-wrap: wrap;
}
.tena-wallet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--tena-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-pill);
    font: 600 0.85rem var(--tena-font);
    text-decoration: none;
    transition: background var(--t-fast);
}
.tena-wallet-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--tena-white);
    text-decoration: none;
}

.tena-tx-table {
    width: 100%;
    border-collapse: collapse;
}
.tena-tx-table thead th {
    text-align: left;
    font: 700 0.72rem var(--tena-font);
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
}
.tena-tx-table tbody td {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--tena-border);
    font-size: 0.92rem;
    color: var(--tena-ink);
    vertical-align: middle;
}
.tena-tx-table tbody tr:last-child td { border-bottom: 0; }
.tena-tx-table tbody tr:hover { background: var(--tena-surface-2); }
.tena-tx-amount {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tena-tx-amount-credit { color: var(--tena-success); }
.tena-tx-amount-debit { color: var(--tena-danger); }
.tena-tx-date {
    color: var(--tena-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.tena-tx-type-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: var(--r-pill);
    font: 700 0.65rem var(--tena-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tena-tx-type-credit { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-tx-type-debit { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-tx-type-reserve { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-release { background: var(--tena-info-bg); color: var(--tena-info); }
/* Seller earning status pills (escrow feature) — reuse existing semantic tokens */
.tena-tx-type-held { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-cleared { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-tx-type-disbursed { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-tx-type-frozen { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-tx-type-refunded { background: var(--tena-danger-bg); color: var(--tena-danger); }

@media (max-width: 575.98px) {
    .tena-wallet-balance-card { padding: 1.5rem 1.25rem; }
    .tena-wallet-balance-amount { font-size: 1.9rem; }
    .tena-tx-table thead { display: none; }
    .tena-tx-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 0.25rem 0;
    }
    .tena-tx-table tbody tr {
        display: block;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--tena-border);
    }
}

.tena-stat {
    padding: 1.25rem;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
}
.tena-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tena-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tena-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--tena-ink);
    margin: 0.25rem 0 0;
    letter-spacing: -0.02em;
}
.tena-stat-trend { font-size: 0.82rem; color: var(--tena-success); margin-top: 0.1rem; }

/* ── Tables ──────────────────────────────────────────────── */
.tena-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tena-surface);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
}
.tena-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tena-muted);
    background: var(--tena-bg);
    border-bottom: 1px solid var(--tena-border);
}
.tena-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tena-border);
    color: var(--tena-ink);
    font-size: 0.92rem;
}
.tena-table tr:last-child td { border-bottom: none; }
.tena-table tr:hover td { background: var(--tena-bg); }

/* ── Wallet card ─────────────────────────────────────────── */
.tena-wallet-card {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    padding: 1.5rem;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.tena-wallet-label {
    color: var(--tena-gold);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tena-wallet-amount {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--tena-white);
    margin: 0.4rem 0 0;
    letter-spacing: -0.02em;
}
.tena-wallet-amount .tena-currency {
    font-size: 0.5em;
    color: var(--tena-gold);
    margin-left: 0.4rem;
    font-weight: 500;
}

/* ── Map placeholder ─────────────────────────────────────── */
.tena-map {
    height: 340px;
    background:
        linear-gradient(135deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(225deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(45deg, var(--tena-surface-2) 25%, transparent 25%),
        linear-gradient(315deg, var(--tena-surface-2) 25%, var(--tena-bg) 25%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: var(--r);
    border: 1px solid var(--tena-border);
    position: relative;
}
.tena-map::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    transform: translate(-50%, -100%) rotate(-45deg);
    background: var(--tena-gold);
    border-radius: 50% 50% 50% 0;
    transform-origin: bottom;
    box-shadow: 0 6px 12px -2px rgba(201, 162, 39, 0.5);
}

/* ── Mobile bottom nav ───────────────────────────────────── */
.tena-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--tena-white);
    border-top: 1px solid var(--tena-border);
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: 50;
}
.tena-bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    color: var(--tena-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r-sm);
    flex: 1;
    text-align: center;
}
.tena-bottom-nav-item.is-active { color: var(--tena-green-deep); }
.tena-bottom-nav-item.is-sell {
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    transform: translateY(-12px);
    width: 56px; height: 56px;
    padding: 0;
    justify-content: center;   /* centre the lone + icon in the circle */
    gap: 0;
    border-radius: 50%;
    box-shadow: var(--shadow);
    flex: 0 0 56px;
}
.tena-bottom-nav-icon { font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.tena-bottom-nav-icon svg { width: 22px; height: 22px; }
.tena-bottom-nav-item.is-sell .tena-bottom-nav-icon svg { width: 26px; height: 26px; }

@media (max-width: 767.98px) {
    .tena-bottom-nav { display: flex; }
    /* The bottom nav is fixed, so reserve space at the end of the page for both
       the main content and the footer to clear it (#102c, and the footer no
       longer floats mid-page on scroll). The reserve must clear not just the
       ~73px nav bar but the Sell FAB, which is translated 12px above it — at
       4.5rem the last content row was clipped by the FAB's raised top. 6rem
       clears the FAB and its shadow (audit §6.2c). */
    body { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* Bare-chrome pages (checkout) drop the bottom nav, so the reserved space above
   would leave dead whitespace at the foot of the page — reclaim it (#112). */
body.tena-page-bare { padding-bottom: 0; }

/* Bottom-nav unread badge (notifications / chat) — sits on the icon. */
.tena-bn-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--tena-gold);
    color: var(--tena-green-deep);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile sticky Buy bar on listing detail — revealed by JS when the in-page
   Buy button scrolls off, so the CTA is always one tap away (#1.1). */
.tena-listing-ctabar { display: none; }
@media (max-width: 860px) {
    .tena-listing-ctabar.is-visible {
        display: block;
        position: fixed; left: 0; right: 0;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 55;
        padding: 0.6rem 1rem;
        background: var(--tena-white);
        border-top: 1px solid var(--tena-border);
        box-shadow: 0 -6px 18px rgba(15, 61, 46, 0.10);
    }
    /* Lift the support launcher above the Buy bar while it's showing. */
    body.has-listing-ctabar .tena-asst-launcher {
        bottom: calc(144px + env(safe-area-inset-bottom));
    }
}

/* ── Support assistant (chat widget) ─────────────────────── */
.tena-asst-launcher {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(15, 61, 46, 0.32);
    transition: transform var(--t-fast), background var(--t-fast);
}
.tena-asst-launcher:hover { transform: translateY(-2px); background: #134434; }
.tena-asst-launcher svg { width: 26px; height: 26px; }
.tena-asst-launcher .tena-asst-dot {
    position: absolute; top: 10px; right: 10px; width: 10px; height: 10px;
    background: var(--tena-gold); border-radius: 50%; border: 2px solid var(--tena-green-deep);
}
@media (max-width: 767.98px) {
    /* Sit above the mobile bottom nav. */
    .tena-asst-launcher { bottom: 5rem; right: 1rem; }
}

.tena-asst-panel {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 61;
    width: 370px; max-width: calc(100vw - 2rem);
    height: 540px; max-height: calc(100vh - 2.5rem);
    background: var(--tena-white); border: 1px solid var(--tena-border);
    border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(15, 61, 46, 0.28);
    display: none; flex-direction: column; overflow: hidden;
}
.tena-asst-panel.is-open { display: flex; }
@media (max-width: 767.98px) {
    .tena-asst-panel {
        right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
        height: 80vh; border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
}

.tena-asst-head {
    background: var(--tena-green-deep);
    color: var(--tena-white); padding: 1rem 1.1rem;
    display: flex; align-items: center; gap: 0.7rem;
}
.tena-asst-head-title { font-family: var(--tena-font); font-weight: 700; font-size: 1rem; }
.tena-asst-head-sub { font-size: 0.76rem; opacity: 0.8; }
.tena-asst-head-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--tena-gold);
    color: var(--tena-green-deep); display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.tena-asst-close {
    margin-left: auto; background: rgba(255,255,255,0.14); border: none; color: #fff;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}
.tena-asst-close:hover { background: rgba(255,255,255,0.26); }

.tena-asst-msgs {
    flex: 1; overflow-y: auto; padding: 1rem; display: flex;
    flex-direction: column; gap: 0.6rem; background: var(--tena-bg);
}
.tena-asst-msg {
    max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 14px;
    font-size: 0.9rem; line-height: 1.45; white-space: pre-line; word-wrap: break-word;
}
.tena-asst-msg-bot { align-self: flex-start; background: var(--tena-white); border: 1px solid var(--tena-border); border-bottom-left-radius: 4px; color: var(--tena-ink); }
.tena-asst-msg-user { align-self: flex-end; background: var(--tena-green-deep); color: var(--tena-white); border-bottom-right-radius: 4px; }

.tena-asst-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.4rem; }
.tena-asst-chip {
    background: var(--tena-white); border: 1px solid var(--tena-green); color: var(--tena-green-deep);
    border-radius: var(--r-pill); padding: 0.4rem 0.8rem; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.tena-asst-chip:hover { background: var(--tena-green-deep); color: var(--tena-white); }

.tena-asst-cta { padding: 0 1rem 0.6rem; }
.tena-asst-cta a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--tena-gold); color: var(--tena-green-deep);
    border-radius: var(--r-sm); padding: 0.55rem 0.95rem; font-size: 0.86rem;
    font-weight: 700; text-decoration: none;
}

.tena-asst-foot { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--tena-border); background: var(--tena-white); }
.tena-asst-input {
    flex: 1; border: 1px solid var(--tena-border); border-radius: var(--r-pill);
    padding: 0.6rem 0.95rem; font: inherit; font-size: 0.9rem; outline: none;
}
.tena-asst-input:focus { border-color: var(--tena-green); }
.tena-asst-send {
    border: none; background: var(--tena-green-deep); color: #fff; width: 42px; height: 42px;
    border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tena-asst-send:hover { background: #134434; }
.tena-asst-send svg { width: 18px; height: 18px; }

.tena-asst-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.7rem 0.9rem; background: var(--tena-white); border: 1px solid var(--tena-border); border-radius: 14px; }
.tena-asst-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--tena-muted); animation: tena-asst-bounce 1.2s infinite; }
.tena-asst-typing span:nth-child(2) { animation-delay: 0.15s; }
.tena-asst-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tena-asst-bounce { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* ── Flash messages / toasts ─────────────────────────────── */
.tena-flash-stack {
    /* Toast overlay — floats above content, never reserves layout space
       (so it can't push the seller/admin side panel down). */
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    width: min(420px, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    pointer-events: none;
}
.tena-flash-stack > .tena-flash { pointer-events: auto; }
/* The optional padded wrapper around the stack must not reserve space either. */
.tena-flash-stack-wrap { padding: 0 !important; }
@media (max-width: 640px) {
    .tena-flash-stack { top: 0.6rem; width: calc(100vw - 1rem); }
}

.tena-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-left: 4px solid var(--tena-muted);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    color: var(--tena-ink);
    font-size: 0.93rem;
    line-height: 1.45;
    position: relative;
    animation: tena-flash-in 280ms var(--ease);
}

.tena-flash-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tena-muted);
    background: var(--tena-surface-2);
}

.tena-flash-icon svg {
    width: 16px;
    height: 16px;
}

.tena-flash-body {
    flex: 1;
    min-width: 0;
}

.tena-flash-title {
    font-weight: 600;
    color: var(--tena-ink);
    margin-bottom: 0.1rem;
}

.tena-flash-message {
    color: var(--tena-ink-2);
}

.tena-flash-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--tena-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}

.tena-flash-dismiss:hover {
    background: var(--tena-surface-2);
    color: var(--tena-ink);
}

.tena-flash-dismiss svg { width: 14px; height: 14px; }

/* Variants */
.tena-flash-success { border-left-color: var(--tena-success); }
.tena-flash-success .tena-flash-icon { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-flash-success .tena-flash-title { color: var(--tena-success); }

.tena-flash-error,
.tena-flash-danger { border-left-color: var(--tena-danger); }
.tena-flash-error .tena-flash-icon,
.tena-flash-danger .tena-flash-icon { background: var(--tena-danger-bg); color: var(--tena-danger); }
.tena-flash-error .tena-flash-title,
.tena-flash-danger .tena-flash-title { color: var(--tena-danger); }

.tena-flash-warning { border-left-color: var(--tena-warning); }
.tena-flash-warning .tena-flash-icon { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-flash-warning .tena-flash-title { color: var(--tena-warning); }

.tena-flash-info { border-left-color: var(--tena-info); }
.tena-flash-info .tena-flash-icon { background: var(--tena-info-bg); color: var(--tena-info); }
.tena-flash-info .tena-flash-title { color: var(--tena-info); }

@keyframes tena-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tena-flash-out {
    to { opacity: 0; transform: translateY(-6px); height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
}

.tena-flash.is-dismissing {
    animation: tena-flash-out 240ms var(--ease) forwards;
    overflow: hidden;
}

/* ── Order timeline & status hero ─────────────────────────── */
.tena-order-hero {
    background: var(--tena-green-deep);
    color: var(--tena-white);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.tena-order-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
}

.tena-order-hero-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.4rem;
}

.tena-order-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--tena-font);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
}

.tena-order-hero-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}

.tena-order-hero-status.is-success  { color: #84e9af; }
.tena-order-hero-status.is-info     { color: #9bc7e0; }
.tena-order-hero-status.is-warning  { color: var(--tena-gold); }
.tena-order-hero-status.is-danger   { color: #ff9b98; }
.tena-order-hero-status.is-muted    { color: #c9d1cd; }

.tena-order-hero-amount {
    text-align: right;
}

.tena-order-hero-price {
    font-family: var(--tena-font);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--tena-white);
    letter-spacing: -0.02em;
}

.tena-order-hero-meta {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    position: relative;
}

.tena-order-hero-meta strong {
    color: var(--tena-white);
    font-weight: 600;
}

.tena-order-section {
    margin-bottom: 1rem;
}

.tena-order-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tena-muted);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

.tena-order-section-head svg {
    width: 14px;
    height: 14px;
}

.tena-order-listing-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.tena-order-listing-card:hover { border-color: var(--tena-green); box-shadow: var(--shadow-sm); }

.tena-order-listing-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    background: var(--tena-surface-2);
}

.tena-order-listing-title {
    font-weight: 600;
    color: var(--tena-ink);
    text-decoration: none;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
}

.tena-order-listing-title:hover { color: var(--tena-green); }

.tena-order-listing-meta {
    font-size: 0.82rem;
    color: var(--tena-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tena-order-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tena-order-address-card {
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    padding: 1.1rem 1.15rem;
}

.tena-order-address-line {
    display: block;
    line-height: 1.55;
}

.tena-order-address-line + .tena-order-address-line { margin-top: 0.05rem; }

.tena-order-address-name {
    font-weight: 600;
    color: var(--tena-ink);
}

.tena-order-address-phone { color: var(--tena-ink-2); }

.tena-order-address-loc {
    color: var(--tena-muted);
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    .tena-order-address-grid { grid-template-columns: 1fr; }
    .tena-order-hero { padding: 1.25rem; }
    .tena-order-hero-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tena-order-hero-amount { text-align: left; }
}

/* ── Auth pages (login, register, password reset) ─────────── */
.tena-auth-shell {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--tena-bg);
}

.tena-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.tena-auth-card::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--tena-green-deep);
}

.tena-auth-body {
    padding: 2rem 2rem 1.75rem;
}

.tena-auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--tena-green-tint);
    color: var(--tena-green-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.tena-auth-icon svg { width: 28px; height: 28px; }

.tena-auth-title {
    font-family: var(--tena-font);
    font-weight: 700;
    color: var(--tena-green-deep);
    font-size: 1.55rem;
    margin: 0 0 0.5rem;
    text-align: center;
    letter-spacing: -0.01em;
}

.tena-auth-subtitle {
    color: var(--tena-ink-2);
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.55;
}

.tena-auth-subtitle strong { color: var(--tena-green-deep); font-weight: 600; }

.tena-auth-footer {
    font-size: 0.9rem;
    color: var(--tena-muted);
    text-align: center;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tena-border);
}

.tena-auth-footer a {
    font-weight: 600;
    color: var(--tena-green-deep);
    text-decoration: none;
}

.tena-auth-footer a:hover { text-decoration: underline; }

.tena-auth-steps {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
    justify-content: center;
    color: var(--tena-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tena-auth-steps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tena-border-strong);
}

.tena-auth-steps-dot.is-active { background: var(--tena-gold); }
.tena-auth-steps-dot.is-done   { background: var(--tena-green); }

.tena-auth-steps-line {
    width: 24px;
    height: 2px;
    background: var(--tena-border-strong);
}

.tena-auth-steps-line.is-done { background: var(--tena-green); }

/* ── Commission disclosure box (seller listing flow) ─────── */
.tena-commission-box {
    background: var(--tena-surface-2);
    border: 1px solid var(--tena-border);
    border-left: 4px solid var(--tena-gold);
    border-radius: var(--r-sm);
    padding: 1rem 1.15rem;
    font-size: 0.92rem;
    color: var(--tena-ink-2);
    margin-top: 1rem;
}
.tena-commission-box .tena-commission-net,
.tena-commission-net {
    color: var(--tena-green-deep);
    font-weight: 700;
}

/* Commission summary with hierarchy: "you receive" leads (large + bold), the
   sale price and commission are secondary muted lines beneath it. (#63) */
.tena-commission-summary { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.tena-commission-lead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.tena-commission-lead-label {
    font-weight: 700;
    color: var(--tena-green-deep);
    font-size: 0.95rem;
}
.tena-commission-lead-amount {
    font-family: var(--tena-font);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--tena-green-deep);
}
.tena-commission-rows {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--tena-border);
    display: flex; flex-direction: column; gap: 0.25rem;
}
.tena-commission-row {
    display: flex; justify-content: space-between; gap: 0.75rem;
    font-size: 0.85rem; color: var(--tena-muted);
}
.tena-commission-row dt, .tena-commission-row dd { margin: 0; }

/* Inline note under the order-timeline delivery step: courier ref (links to
   the tracking block) or a pending "dispatching soon" state. (#65) */
.tena-timeline-note {
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    max-width: 110px;
    margin-top: 0.15rem;
    font-weight: 600;
    color: var(--tena-green);
    text-decoration: none;
}
a.tena-timeline-note:hover { text-decoration: underline; }
.tena-timeline-note--pending { color: var(--tena-gold-deep); }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Skip-to-content link: visually hidden until keyboard-focused, then pinned
   to the top-left so keyboard and screen-reader users jump past the nav. (#153) */
.tena-skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3.5rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--tena-green);
    color: var(--tena-white);
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.tena-skip-link:focus {
    top: 0.5rem;
    outline: 2px solid var(--tena-gold);
    outline-offset: 2px;
}

/* Gentle pulse for an in-progress status indicator (e.g. KYC under review).
   The reduced-motion block above neutralises it for users who opt out. (#123) */
@keyframes tena-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: 0.6; }
}
.tena-pulse { animation: tena-pulse 1.6s ease-in-out infinite; }

/* Workspace breadcrumb (seller/buyer shell). Tokens only. (#142) */
.tena-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--tena-muted);
    margin-bottom: 1rem;
}
.tena-breadcrumb a { color: var(--tena-green-deep); text-decoration: none; font-weight: 600; }
.tena-breadcrumb a:hover { text-decoration: underline; }
.tena-breadcrumb [aria-current="page"] { color: var(--tena-ink); font-weight: 600; }

/* Segmented two-option choice (registration role picker). Uses existing tokens only. */
.tena-segment { display:flex; gap:.5rem; margin-top:.4rem; }
.tena-segment-option { flex:1; }
.tena-segment-option input { position:absolute; opacity:0; pointer-events:none; }
.tena-segment-option span {
    display:block; text-align:center; padding:.7rem 1rem; cursor:pointer;
    border:1px solid var(--tena-border); border-radius:var(--r-sm);
    font-family:var(--tena-font); font-weight:600; color:var(--tena-ink-2);
    background:var(--tena-white); transition:all .15s ease;
}
.tena-segment-option input:checked + span {
    border-color:var(--tena-green-deep); background:var(--tena-green-tint);
    color:var(--tena-green-deep);
}
.tena-segment-option input:focus-visible + span { outline:2px solid var(--tena-gold); outline-offset:2px; }

/* ── Chat — clean messaging surface ───────────────────────────
   Tokens only; flat & professional (no gradients/glows). Used by
   /chat (inbox) and /chat/thread (conversation). */
.tena-chat-shell { max-width: 760px; margin: 0 auto; }

.tena-chat-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--tena-muted); font-size: 0.85rem; text-decoration: none;
    margin-bottom: 0.75rem;
}
.tena-chat-back:hover { color: var(--tena-green-deep); }
.tena-chat-back svg { width: 14px; height: 14px; }

/* Conversation context header (listing + who) */
.tena-chat-head {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: 0;
}
.tena-chat-head-img {
    width: 48px; height: 48px; border-radius: var(--r-sm);
    object-fit: cover; flex-shrink: 0; background: var(--tena-surface-2);
}
.tena-chat-head-icon {
    width: 48px; height: 48px; border-radius: var(--r-sm); flex-shrink: 0;
    background: var(--tena-green-tint); color: var(--tena-green-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.tena-chat-head-main { flex: 1; min-width: 0; }
.tena-chat-head-title {
    display: block; color: var(--tena-ink); font-weight: 600;
    font-size: 0.95rem; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tena-chat-head-title:hover { color: var(--tena-green-deep); }
.tena-chat-head-sub {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--tena-muted); margin-top: 0.1rem;
}
.tena-chat-head-sub svg { width: 13px; height: 13px; color: var(--tena-green); }

/* Message stream — chat-app feel: subtle branded wallpaper, tails, day pills.
   The dot wallpaper is a deliberate, conventional chat backdrop (not the
   hero "AI" pattern) — kept very faint and in brand ink. */
.tena-chat-stream {
    position: relative;
    background-color: var(--tena-bg);
    background-image:
        radial-gradient(rgba(15, 61, 46, 0.045) 1px, transparent 1.5px),
        radial-gradient(rgba(15, 61, 46, 0.045) 1px, transparent 1.5px);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    border: 1px solid var(--tena-border);
    height: 56vh; min-height: 380px;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1.1rem 1rem;
    display: flex; flex-direction: column; gap: 0.28rem;
}
.tena-chat-stream::-webkit-scrollbar { width: 7px; }
.tena-chat-stream::-webkit-scrollbar-thumb { background: rgba(15, 61, 46, 0.18); border-radius: 4px; }
.tena-chat-stream::-webkit-scrollbar-track { background: transparent; }
.tena-chat-stream:last-child,
.tena-chat-stream--end { border-radius: 0 0 var(--r) var(--r); }

.tena-chat-empty {
    margin: auto; text-align: center; color: var(--tena-muted);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.tena-chat-empty svg { width: 40px; height: 40px; color: var(--tena-border-strong); }

/* Centered day separator ("Today" / "Yesterday" / date) */
.tena-chat-day {
    align-self: center;
    margin: 0.6rem 0 0.4rem;
    padding: 0.2rem 0.75rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-pill);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--tena-muted);
    box-shadow: 0 1px 2px rgba(15, 61, 46, 0.06);
}

.tena-chat-msg {
    position: relative;
    max-width: 74%;
    padding: 0.5rem 0.78rem 0.42rem;
    border-radius: 14px;
    font-size: 0.92rem; line-height: 1.42;
    word-wrap: break-word; white-space: pre-wrap;
    box-shadow: 0 1px 1.5px rgba(15, 61, 46, 0.12);
    animation: tena-chat-pop 0.16s ease-out;
}
@keyframes tena-chat-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.tena-chat-msg--mine {
    align-self: flex-end;
    background: var(--tena-green-deep); color: var(--tena-white);
    border-bottom-right-radius: 4px;
}
.tena-chat-msg--mine::after {
    content: ''; position: absolute; right: -5px; bottom: 0;
    border: 6px solid transparent;
    border-left-color: var(--tena-green-deep);
    border-bottom: 0; border-right: 0;
}
.tena-chat-msg--theirs {
    align-self: flex-start;
    background: var(--tena-white); color: var(--tena-ink);
    border-bottom-left-radius: 4px;
}
.tena-chat-msg--theirs::after {
    content: ''; position: absolute; left: -5px; bottom: 0;
    border: 6px solid transparent;
    border-right-color: var(--tena-white);
    border-bottom: 0; border-left: 0;
}
.tena-chat-msg--system {
    align-self: center; max-width: 85%; text-align: center;
    background: transparent; color: var(--tena-muted);
    font-size: 0.78rem; padding: 0.2rem 0.5rem;
    box-shadow: none; animation: none;
}
.tena-chat-msg--system::after { display: none; }
.tena-chat-time {
    display: block; font-size: 0.66rem; opacity: 0.62;
    margin-top: 0.18rem; text-align: right;
}
@media (prefers-reduced-motion: reduce) {
    .tena-chat-msg { animation: none; }
}

/* Composer */
.tena-chat-composer {
    display: flex; gap: 0.5rem; align-items: flex-end;
    padding: 0.75rem;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
}
.tena-chat-input {
    flex: 1; resize: none;
    border: 1px solid var(--tena-border-strong);
    border-radius: 22px;
    padding: 0.65rem 1rem;
    font: inherit; font-size: 0.92rem; line-height: 1.4;
    color: var(--tena-ink); background: var(--tena-surface-2);
    max-height: 120px;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.tena-chat-input:focus {
    outline: none; border-color: var(--tena-green);
    background: var(--tena-white);
    box-shadow: 0 0 0 2px rgba(15, 61, 46, 0.15);
}
.tena-chat-send {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), transform var(--t-fast);
}
.tena-chat-send:hover { background: var(--tena-green); }
.tena-chat-send:active { transform: scale(0.94); }
.tena-chat-send:disabled { opacity: 0.55; cursor: default; }
.tena-chat-send svg { width: 18px; height: 18px; }

.tena-chat-note {
    margin-top: 0.6rem; padding: 0.7rem 0.9rem;
    background: var(--tena-surface-2); color: var(--tena-ink-2);
    border-radius: var(--r-sm);
    font-size: 0.85rem; text-align: center;
}
.tena-chat-hint {
    margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--tena-muted);
    display: flex; align-items: flex-start; gap: 0.35rem;
}
.tena-chat-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.1rem; color: var(--tena-green); }
.tena-chat-error {
    margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--tena-danger);
}

/* ── Receipt modal (iframe to receipt embed view) ── */
.tena-receipt-modal {
    width: min(780px, 96vw);
    height: 88vh;
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tena-surface-2);
}
.tena-receipt-modal::backdrop { background: rgba(15, 61, 46, 0.45); }
.tena-receipt-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--tena-white);
    color: var(--tena-ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tena-receipt-modal iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Two-pane chat (list left, conversation right) ── */
.tena-chat2 {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 130px);
    min-height: 480px;
    border: 1px solid var(--tena-border);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tena-surface);
}
.tena-chat2__list {
    border-right: 1px solid var(--tena-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tena-chat2__list-head { padding: 1rem 1rem 0.25rem; }
.tena-chat2__title { font-family: var(--tena-font); font-weight: 700; color: var(--tena-green-deep); margin: 0; font-size: 1.2rem; }
.tena-chat2__list .tena-chat-list { padding: 0.5rem; gap: 0.25rem; }
.tena-chat-item--active { background: var(--tena-green-tint); border-color: var(--tena-green); }
.tena-chat2__empty-list { padding: 2.5rem 1.25rem; text-align: center; }
.tena-chat2__conv { min-width: 0; display: flex; flex-direction: column; }
.tena-chat2__placeholder {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--tena-muted); padding: 2rem;
}
/* Conversation fills the right pane (override the standalone centered card). */
.tena-chat2__conv .tena-chat--pane {
    max-width: none; margin: 0; border: 0; border-radius: 0;
    height: 100%; width: 100%;
}
.tena-chat2__conv .tena-chat--pane .tena-chat__body { max-height: none; min-height: 0; }

/* Chat reliability affordances (#36/#41) */
.tena-chat--pane { position: relative; }
.tena-chat__connlost {
    background: var(--tena-warning-bg); color: var(--tena-warning);
    font-size: 0.8rem; font-weight: 600; text-align: center;
    padding: 0.35rem 0.75rem;
}
.tena-chat__newmsg {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.25rem;
    z-index: 4; border: none; cursor: pointer;
    background: var(--tena-green-deep); color: var(--tena-white);
    border-radius: 999px; padding: 0.35rem 0.9rem;
    font: 600 0.82rem var(--tena-font); box-shadow: var(--shadow-sm);
}
.tena-chat__bubble.is-sending { opacity: 0.55; }
.tena-chat__seen { font-size: 0.72rem; color: var(--tena-muted); text-align: right; padding: 0.1rem 0.25rem 0.35rem; }
@media (max-width: 859px) {
    .tena-chat2 { grid-template-columns: 1fr; height: calc(100vh - 110px); border: 0; border-radius: 0; }
    .tena-chat2__list { border-right: 0; }
    /* one pane at a time on phones */
    .tena-chat2:not(.tena-chat2--has-conv) .tena-chat2__conv { display: none; }
    .tena-chat2--has-conv .tena-chat2__list { display: none; }
}

/* Inbox list */
.tena-chat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tena-chat-item {
    display: flex; gap: 0.75rem; align-items: center;
    padding: 0.7rem 0.9rem; text-decoration: none; color: inherit;
    background: var(--tena-white);
    border: 1px solid var(--tena-border);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.tena-chat-item:hover { border-color: var(--tena-border-strong); }
.tena-chat-item--unread { background: var(--tena-surface-2); border-color: var(--tena-border-strong); }
.tena-chat-item-img { width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.tena-chat-item-icon {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex-shrink: 0;
    background: var(--tena-green-tint); color: var(--tena-green-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.tena-chat-item-body { flex: 1; min-width: 0; }
.tena-chat-item-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.tena-chat-item-name { color: var(--tena-ink); font-size: 0.9rem; font-weight: 600; }
.tena-chat-item-when { font-size: 0.72rem; color: var(--tena-muted); flex-shrink: 0; }
.tena-chat-item-preview {
    font-size: 0.82rem; color: var(--tena-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem;
}
.tena-chat-item--unread .tena-chat-item-preview { color: var(--tena-ink); font-weight: 600; }
.tena-chat-item-badge {
    flex-shrink: 0;
    background: var(--tena-green-deep); color: var(--tena-white);
    font-size: 0.7rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--r-pill);
}
.tena-chat-item-tag { font-size: 0.68rem; color: var(--tena-muted); font-weight: 500; margin-left: 0.25rem; }

/* ============================================================
   Browse v2 — appended from tena-browse.css (2026-05-20)
   .tena-listing-card root scoped under .tena-listing-grid so the
   four pages still calling render_listing_card() keep the old look.
   ============================================================ */
/* ============================================================
   TENA — Browse page additions (v2)
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.

   Design patterns applied from real marketplace cards:
   - Photo dominates card (no icon placeholders)
   - Condition tag as dark overlay at bottom-left of image (Vinted, Carousell)
   - Title gets 2 lines (eBay, Mercari) — more discoverable
   - Seller row at bottom (Depop, Mercari) — trust footer
   - "Verified" is a tiny check next to seller name, not a labeled pill
   ============================================================ */

/* ---------- Page toolbar (heading + sort) ---------- */
.tena-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.tena-page-toolbar__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0;
}
.tena-page-toolbar__count {
  color: var(--tena-muted);
  font-weight: 400;
  font-size: 0.875rem;
  margin-left: 0.25rem;
}

.tena-sort {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-family: inherit;
  cursor: pointer;
}
.tena-sort:focus {
  outline: 2px solid var(--tena-green);
  outline-offset: 1px;
}

/* ---------- Filter chips ---------- */
.tena-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.tena-filter-chips a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tena-filter-chips a:hover {
  border-color: var(--tena-green);
  color: var(--tena-green);
}
.tena-filter-chips a.is-active {
  background: var(--tena-green);
  color: #fff;
  border-color: var(--tena-green);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--tena-green-tint);
}
.tena-filter-chips .tena-chip-check { flex: none; }

/* Result count + clear-all bar above the grid. (#67) */
.tena-browse-results {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.tena-browse-results__count {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tena-ink);
}
.tena-browse-results__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tena-green);
  text-decoration: none;
}
.tena-browse-results__clear:hover { text-decoration: underline; }

/* ---------- Listing grid ---------- */
.tena-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
@media (min-width: 768px) {
  .tena-listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
}

/* ---------- Listing card ----------
   REPLACES any existing .tena-listing-card block.
*/
.tena-listing-card {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tena-listing-card:hover {
  border-color: var(--tena-muted);
  text-decoration: none;
  color: inherit;
}

/* Image area */
.tena-listing-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tena-bg);
}
.tena-listing-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tena-listing-card:hover .tena-listing-card__image img {
  transform: scale(1.03);
}

/* Placeholder when image missing */
.tena-listing-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--tena-muted);
  background: var(--tena-bg);
}

/* Condition tag — bottom-left, dark green, low chrome */
.tena-listing-card__condition {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(15, 61, 46, 0.92);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Photo count indicator — bottom-right of image */
.tena-listing-card__photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Save button — small, top-right, subtle */
.tena-listing-card__save {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tena-ink);
  font-size: 14px;
  transition: color 0.15s, transform 0.15s, background 0.15s;
}
.tena-listing-card__save:hover {
  background: #fff;
  color: var(--tena-gold-deep);
  transform: scale(1.06);
}
.tena-listing-card__save.is-saved {
  color: var(--tena-gold);
  background: #fff;
}

/* "New today" gold badge — rare, only on items < 24h old */
.tena-listing-card__fresh {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Body */
.tena-listing-card__body {
  padding: 10px 12px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title — 2 line clamp */
.tena-listing-card__title {
  font-size: 0.875rem;
  color: var(--tena-ink);
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.275em;
}

/* Price */
.tena-listing-card__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.tena-listing-card__price-currency {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  font-weight: 500;
  margin-left: 4px;
}

/* Seller footer row — visually separated trust strip */
.tena-listing-card__seller {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--tena-muted);
  border-top: 1px solid var(--tena-border);
  padding: 8px 12px 10px;
  margin: 0 -12px;
}
.tena-listing-card__seller-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tena-green);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.tena-listing-card__seller-name {
  color: var(--tena-ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70px;
}
/* "Verified" trust badge on the seller row — a labelled pill so the
   verified signal registers while browsing (a bare icon did not). */
.tena-listing-card__verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tena-listing-card__verified-badge i {
  font-size: 13px;
}
.tena-listing-card__seller-meta {
  color: var(--tena-muted);
  margin-left: auto;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

/* Empty state */
.tena-listing-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--tena-muted);
  background: var(--tena-surface);
  border: 1px dashed var(--tena-border);
  border-radius: 12px;
}
/* ============================================================
   Browse v2 — Search bar (2026-05-20)
   ============================================================ */
.tena-browse-search {
  display: flex;
  align-items: center;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 5px 5px 5px 18px;
  margin: 0 0 1rem;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.tena-browse-search:focus-within {
  border-color: var(--tena-green);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.10);
}
.tena-browse-search__icon {
  display: inline-flex;
  align-items: center;
  color: var(--tena-muted);
  flex-shrink: 0;
}
.tena-browse-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--tena-ink);
  padding: 12px 4px;
}
.tena-browse-search__input::placeholder { color: var(--tena-muted); }
.tena-browse-search__input::-webkit-search-cancel-button { display: none; }
.tena-browse-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tena-surface-2);
  color: var(--tena-ink-2);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-browse-search__clear:hover {
  background: var(--tena-border-strong);
  color: var(--tena-ink);
  text-decoration: none;
}
.tena-browse-search__submit {
  background: var(--tena-green);
  color: var(--tena-white);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-browse-search__submit:hover { background: var(--tena-green-soft); }
@media (max-width: 480px) {
  .tena-browse-search { padding-left: 14px; }
  .tena-browse-search__submit { padding: 9px 14px; font-size: 0.875rem; }
}

/* ============================================================
   Homepage v2 — appended from tena-home.css (2026-05-20)
   ============================================================ */
/* ============================================================
   TENA — Homepage additions
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.

   Sections covered: hero, category grid, listing rails.
   ============================================================ */

/* ---------- Hero ---------- */
.tena-hero {
  background: var(--tena-green);
  padding: 3.5rem 1.5rem 4rem;
  color: #fff;
  text-align: center;
}
.tena-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.tena-hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
}
@media (min-width: 768px) {
  .tena-hero__title { font-size: 3rem; }
}
.tena-hero__accent {
  color: var(--tena-gold);
}
.tena-hero__subtitle {
  font-size: 1rem;
  margin: 0 0 1.5rem;
  opacity: 0.85;
  color: #fff;
}

/* Search form */
.tena-hero__search {
  display: flex;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  max-width: 560px;
  margin: 0 auto 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.tena-hero__search-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--tena-ink);
  min-width: 0;
}
.tena-hero__search-input:focus { outline: none; }
.tena-hero__search-input::placeholder { color: var(--tena-muted); }
.tena-hero__search-btn {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  border: 0;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.tena-hero__search-btn:hover { background: #B89220; }

/* Trust pills — small chips sitting on the hero */
.tena-hero__trust {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.tena-hero__trust-pill {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  white-space: nowrap;
}
.tena-hero__trust-pill svg {
  color: var(--tena-gold);
  flex-shrink: 0;
}

/* ---------- Section header (used for category section + above each rail) ---------- */
.tena-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 1rem;
  gap: 1rem;
}
.tena-section-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0;
}
.tena-section-header__link {
  font-size: 0.8125rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tena-section-header__link:hover {
  color: var(--tena-green-soft);
  text-decoration: none;
}

/* ---------- Category grid ---------- */
.tena-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .tena-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
  }
}

.tena-category-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tena-category-tile:hover { text-decoration: none; color: inherit; }
.tena-category-tile__image {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tena-green-tint);
  margin-bottom: 6px;
  border: 1px solid var(--tena-border);
}
.tena-category-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}
.tena-category-tile:hover .tena-category-tile__image img {
  transform: scale(1.05);
}
.tena-category-tile__placeholder {
  width: 100%;
  height: 100%;
  background: var(--tena-green-tint);
}
.tena-category-tile__name {
  font-size: 0.8125rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-align: center;
}

/* ---------- Listing rails (horizontal scroll) ---------- */
.tena-rail {
  margin: 0 0 2.5rem;
  position: relative;
}

.tena-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 200px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar hidden — navigation is via swipe (touch) or arrow buttons (desktop). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 768px) {
  .tena-rail__track {
    grid-auto-columns: minmax(200px, 240px);
    gap: 16px;
  }
}
.tena-rail__track > .tena-listing-card {
  scroll-snap-align: start;
}
.tena-rail__track::-webkit-scrollbar { display: none; }

/* Hover arrow controls — shown only on fine-pointer devices when the rail
   overflows; touch devices keep native swipe. */
.tena-rail__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tena-white);
  border: 1px solid var(--tena-border);
  box-shadow: 0 2px 10px rgba(15, 61, 46, 0.14);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tena-green-deep);
  z-index: 3;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.tena-rail__arrow:hover { background: var(--tena-surface-2); }
.tena-rail__arrow--prev { left: 2px; }
.tena-rail__arrow--next { right: 2px; }
.tena-rail__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .tena-rail--has-overflow .tena-rail__arrow { display: inline-flex; }
}

/* ---------- Section spacing on homepage ---------- */
.tena-home-section {
  padding-top: 2.5rem;
}
.tena-home-section:first-of-type {
  padding-top: 2rem;
}
/* ============================================================
   Settings page v2 — appended 2026-05-20
   Uses only existing --tena-* tokens.
   ============================================================ */

/* Page heading (used on settings, can be reused on other account pages) */
.tena-page-heading {
  margin: 0 0 1.5rem;
}
.tena-page-heading__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tena-green-deep);
  margin: 0 0 0.25rem;
  letter-spacing: -0.5px;
}
.tena-page-heading__desc {
  color: var(--tena-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Grouped settings block (white card with header + rows) */
.tena-block {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.tena-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tena-border);
  gap: 1rem;
}
.tena-block__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tena-green-deep);
  letter-spacing: 0.02em;
}
.tena-block__link {
  font-size: 0.85rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.tena-block__link:hover { color: var(--tena-green-soft); text-decoration: none; }

/* Setting row inside a block */
.tena-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-top: 1px solid var(--tena-border);
}
.tena-setting-row:first-child { border-top: 0; }
.tena-block__header + .tena-setting-row { border-top: 0; }
.tena-setting-row__info {
  flex: 1;
  min-width: 0;
}
.tena-setting-row__label {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tena-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tena-setting-row__desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tena-muted);
  line-height: 1.45;
}
.tena-setting-row__control {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* iOS-style switch */
.tena-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.tena-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.tena-switch__track {
  position: absolute;
  inset: 0;
  background: var(--tena-border);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.18s;
}
.tena-switch__track::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.tena-switch input:checked + .tena-switch__track {
  background: var(--tena-green-deep);
}
.tena-switch input:checked + .tena-switch__track::before {
  transform: translateX(18px);
}
.tena-switch input:focus-visible + .tena-switch__track {
  outline: 2px solid var(--tena-gold);
  outline-offset: 2px;
}
.tena-switch input:disabled + .tena-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Segmented language radio group */
.tena-lang-group {
  display: inline-flex;
  background: var(--tena-surface-2);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.tena-lang-group input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tena-lang-group label {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tena-ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tena-lang-group input[type=radio]:checked + label {
  background: var(--tena-green);
  color: #fff;
}
.tena-lang-group input[type=radio]:focus-visible + label {
  box-shadow: 0 0 0 2px var(--tena-gold);
}

/* BEM modifier aliases for kyc-pill to match the v2 partial */
.tena-kyc-pill--verified { background: var(--tena-success-bg); color: var(--tena-success); }
.tena-kyc-pill--pending  { background: var(--tena-warning-bg); color: var(--tena-warning); }
.tena-kyc-pill--none     { background: var(--tena-surface-2); color: var(--tena-ink-2); }
.tena-kyc-pill--rejected { background: var(--tena-danger-bg); color: var(--tena-danger); }

@media (max-width: 540px) {
  .tena-setting-row { flex-direction: column; align-items: flex-start; }
  .tena-setting-row__control { align-self: flex-end; }
}

/* ============================================================
   Notifications v2 — appended from tena-notifications.css (2026-05-20)
   ============================================================ */
/* ============================================================
   TENA — Notifications page
   Append to /assets/css/tena-brand.css.
   Uses only existing --tena-* tokens.
   ============================================================ */

/* ---------- Page header (title + unread pill + mark-all link) ---------- */
.tena-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tena-notif-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tena-ink);
  margin: 0 0 4px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tena-notif-header__count-pill {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.tena-notif-header__desc {
  font-size: 0.875rem;
  color: var(--tena-muted);
  margin: 0;
}
.tena-notif-header__action {
  font-size: 0.8125rem;
  color: var(--tena-green);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.tena-notif-header__action:hover {
  text-decoration: underline;
}

/* ---------- Filter chips with count badges ---------- */
.tena-notif-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.tena-notif-filters a {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.75rem;
  color: var(--tena-ink);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.12s, background 0.12s;
}
.tena-notif-filters a:hover {
  border-color: var(--tena-green);
  text-decoration: none;
}
.tena-notif-filters a.is-active {
  background: var(--tena-green);
  color: #fff;
  border-color: var(--tena-green);
}
.tena-notif-filters__count {
  background: var(--tena-bg);
  color: var(--tena-muted);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.tena-notif-filters a.is-active .tena-notif-filters__count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---------- Section label ---------- */
.tena-notif-section {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 20px 0 8px;
}
.tena-notif-section:first-of-type {
  margin-top: 0;
}

/* ---------- Group container ---------- */
.tena-notif-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Notification row ---------- */
.tena-notif {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s;
}
.tena-notif:hover {
  border-color: var(--tena-muted);
  text-decoration: none;
  color: inherit;
}
.tena-notif--unread {
  background: var(--tena-green-tint);
  border-color: #CFE0D7;
}

/* Icon containers — four kinds */
.tena-notif__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.tena-notif__icon--avatar {
  background: var(--tena-green);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 50%;
  letter-spacing: 0.3px;
}
.tena-notif__icon--gold {
  background: var(--tena-gold-tint);
  color: var(--tena-gold-deep);
}
.tena-notif__icon--green {
  background: var(--tena-surface);
  color: var(--tena-green);
  border: 1px solid #CFE0D7;
}
.tena-notif__icon--info {
  background: var(--tena-bg);
  color: var(--tena-muted);
  border: 1px solid var(--tena-border);
}

/* Body */
.tena-notif__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.tena-notif__title {
  font-size: 0.8125rem;
  color: var(--tena-ink);
  margin: 0 0 2px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tena-notif__title strong {
  font-weight: 500;
}
.tena-notif--unread .tena-notif__title strong {
  font-weight: 700;
}
.tena-notif__priority {
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.tena-notif__preview {
  font-size: 0.75rem;
  color: var(--tena-muted);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time + dot column */
.tena-notif__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 3px;
}
.tena-notif__time {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  white-space: nowrap;
}
.tena-notif__dot {
  width: 11px;
  height: 11px;
  background: var(--tena-gold);
  border-radius: 50%;
  /* White ring lifts the dot off the green-tinted unread row so it reads at
     a glance instead of blending in. (#146) */
  box-shadow: 0 0 0 2px var(--tena-white);
}
.tena-notif:not(.tena-notif--unread) .tena-notif__dot {
  display: none;
}

/* ---------- Empty state ---------- */
.tena-notif-empty {
  text-align: center;
  padding: 48px 16px;
  background: var(--tena-surface);
  border: 1px dashed var(--tena-border);
  border-radius: 12px;
}
.tena-notif-empty__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--tena-bg);
  color: var(--tena-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
}
.tena-notif-empty__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tena-ink);
  margin: 0 0 4px;
}
.tena-notif-empty__desc {
  font-size: 0.8125rem;
  color: var(--tena-muted);
  margin: 0;
}

/* ============================================================
   Chat thread v2 — appended 2026-05-20
   Uses only existing --tena-* tokens.
   ============================================================ */
.tena-chat {
  max-width: 720px;
  margin: 0 auto;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  box-shadow: var(--shadow-xs);
}
.tena-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tena-border);
  background: var(--tena-surface);
  flex-wrap: wrap;
}
.tena-chat__back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tena-surface-2);
  color: var(--tena-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tena-chat__back:hover { background: var(--tena-border-strong); color: var(--tena-ink); text-decoration: none; }
.tena-chat__back svg { width: 18px; height: 18px; }
.tena-chat__listing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.tena-chat__listing-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--tena-surface-2);
}
.tena-chat__listing-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tena-chat__listing-info { min-width: 0; }
.tena-chat__listing-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tena-ink);
  margin: 0;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tena-chat__listing-title:hover { color: var(--tena-green); text-decoration: none; }
.tena-chat__listing-price {
  font-size: 0.78rem;
  color: var(--tena-muted);
  font-weight: 500;
  margin-top: 2px;
}
.tena-chat__seller {
  font-size: 0.78rem;
  color: var(--tena-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tena-chat__seller strong {
  color: var(--tena-ink);
  font-weight: 600;
}
.tena-chat__seller-verified {
  color: var(--tena-success);
}
.tena-chat__warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tena-warning-bg);
  color: var(--tena-warning);
  font-size: 0.75rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--tena-border);
}
.tena-chat__warning svg { flex-shrink: 0; margin-top: 2px; }
/* Blocked-message banner — shown at the top of the chat when MessageFilter
   rejects a send. Error-toned sibling of .tena-chat__warning. */
.tena-chat__blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tena-danger-bg);
  color: var(--tena-danger);
  font-size: 0.75rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--tena-border);
}
.tena-chat__blocked svg { flex-shrink: 0; margin-top: 2px; }
.tena-chat__blocked-text { flex: 1; }
.tena-chat__blocked-text strong { display: block; font-weight: 700; margin-bottom: 1px; }
.tena-chat__blocked-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.65;
}
.tena-chat__blocked-close:hover { opacity: 1; }
.tena-chat__body {
  flex: 1;
  background: var(--tena-bg);
  padding: 14px;
  overflow-y: auto;
  max-height: 60vh;
  min-height: 320px;
}
.tena-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tena-chat__day {
  align-self: center;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  color: var(--tena-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 8px 0 4px;
}
.tena-chat__bubble {
  max-width: 78%;
  padding: 8px 12px 18px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.tena-chat__bubble--them {
  align-self: flex-start;
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  color: var(--tena-ink);
  border-bottom-left-radius: 4px;
}
.tena-chat__bubble--me {
  align-self: flex-end;
  background: var(--tena-green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tena-chat__bubble--system {
  align-self: center;
  background: transparent;
  color: var(--tena-muted);
  font-style: italic;
  font-size: 0.75rem;
  text-align: center;
  padding: 4px 10px;
  max-width: 90%;
}
.tena-chat__bubble-time {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 0.625rem;
  opacity: 0.7;
  font-weight: 500;
}
.tena-chat__bubble--them .tena-chat__bubble-time { color: var(--tena-muted); }
.tena-chat__bubble--me .tena-chat__bubble-time { color: rgba(255, 255, 255, 0.85); }
.tena-chat__bubble--system .tena-chat__bubble-time { display: none; }
.tena-chat__empty {
  text-align: center;
  color: var(--tena-muted);
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}
.tena-chat__empty svg {
  width: 36px;
  height: 36px;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.tena-chat__readonly {
  padding: 14px;
  background: var(--tena-surface-2);
  color: var(--tena-muted);
  text-align: center;
  font-size: 0.85rem;
  border-top: 1px solid var(--tena-border);
}
.tena-chat__compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tena-surface);
  border-top: 1px solid var(--tena-border);
}
.tena-chat__compose-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--tena-border);
  border-radius: 22px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--tena-ink);
  background: var(--tena-bg);
  max-height: 120px;
  min-height: 40px;
  outline: 0;
  transition: border-color 0.15s, background 0.15s;
}
.tena-chat__compose-input:focus { border-color: var(--tena-green); background: var(--tena-surface); }
.tena-chat__compose-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tena-gold);
  color: var(--tena-green-deep);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.tena-chat__compose-send:hover { background: #B89220; transform: translateY(-1px); }
.tena-chat__compose-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* In-flight "sending" state: swap the send icon for a spinner (#92). Overrides the
   dimmed :disabled look so the spinner stays legible while the request is in flight. */
.tena-chat__compose-send.is-sending { opacity: 1; cursor: progress; }
.tena-chat__compose-send.is-sending .tena-chat__compose-icon { display: none; }
.tena-chat__compose-spinner { display: none; }
.tena-chat__compose-send.is-sending .tena-chat__compose-spinner {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tena-spin 0.6s linear infinite;
}
@keyframes tena-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Keep a visible busy ring without the rotation. */
  .tena-chat__compose-send.is-sending .tena-chat__compose-spinner { animation: none; border-top-color: currentColor; opacity: 0.7; }
}
.tena-chat__error {
  padding: 8px 14px;
  background: var(--tena-danger-bg);
  color: var(--tena-danger);
  font-size: 0.8rem;
  border-top: 1px solid var(--tena-border);
}

/* ============================================================
   Chat — WhatsApp-style refinement (added 2026-05-29)
   Layered on top of the existing .tena-chat__* base so reverting
   is a single block delete.
   ============================================================ */

/* Outer chat container — subtle elevation + rounded corners.
   Explicitly resets the older `.tena-chat` block at line 1930 (which sets
   height:460px + padding:1rem + overflow-y:auto for the legacy chat
   markup). Without these overrides the compose form scrolls out of view
   below the fixed-height container. */
.tena-chat {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(15, 61, 46, 0.08);
  border: 1px solid var(--tena-border);
  background: var(--tena-surface);
  height: auto;
  padding: 0;
  overflow-y: visible;
  gap: 0;
}

/* Paper-grain background for the body — a single dot every 18px gives
   the classic chat surface without an image request. */
.tena-chat__body {
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 61, 46, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #F2F3EF 0%, #F7F8F6 100%);
  background-size: 18px 18px, 100% 100%;
  max-height: 65vh;
  min-height: 360px;
  padding: 16px 14px 10px;
  scroll-behavior: smooth;
}

/* Tighter rhythm between bubbles. */
.tena-chat__messages { gap: 3px; }

/* Bubbles — slightly smaller radius, soft shadow, tighter padding.
   Time floats inside the bubble; we reserve space on the right for it. */
.tena-chat__bubble {
  padding: 6px 10px 4px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.42;
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  max-width: 75%;
  position: relative;
  animation: tena-chat-pop 0.18s ease-out;
}

/* "Them" — white-ish bubble, tail bottom-left. */
.tena-chat__bubble--them {
  background: #FFFFFF;
  border: 0;
  border-bottom-left-radius: 4px;
  margin-left: 10px;
}
.tena-chat__bubble--them::before {
  content: '';
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent #FFFFFF transparent;
  filter: drop-shadow(-1px 0.5px 0 rgba(15, 61, 46, 0.06));
}

/* "Me" — TENA green, tail bottom-right. */
.tena-chat__bubble--me {
  background: var(--tena-green);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-right: 10px;
}
.tena-chat__bubble--me::before {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 10px 0;
  border-color: transparent var(--tena-green) transparent transparent;
}

/* Time floats inside the bubble; text wraps around it like WhatsApp. */
.tena-chat__bubble-time {
  position: static;
  float: right;
  margin-left: 8px;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
  line-height: 1;
}

/* Day separator — floating pill instead of bordered chip. */
.tena-chat__day {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--tena-ink-2);
  padding: 4px 12px;
  margin: 12px 0 6px;
  backdrop-filter: blur(2px);
}

/* System messages — centred subtle pill. */
.tena-chat__bubble--system {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0.5px rgba(15, 61, 46, 0.12);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
}
.tena-chat__bubble--system::before { display: none; }

/* Compose — white bar with a clearly bordered off-white pill input.
   The input MUST stay visually distinct from the bar around it, otherwise
   the textarea disappears against the bar (see incident: 2026-05-29). */
.tena-chat__compose {
  padding: 10px 12px 14px;
  background: var(--tena-surface);
  gap: 10px;
  border-top: 1px solid var(--tena-border);
}
.tena-chat__compose-input {
  border-radius: 24px;
  padding: 10px 18px;
  background: var(--tena-bg);
  border: 1px solid var(--tena-border);
  color: var(--tena-ink);
  min-height: 44px;
}
.tena-chat__compose-input::placeholder { color: var(--tena-muted); }
.tena-chat__compose-input:focus {
  border-color: var(--tena-green);
  background: var(--tena-surface);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.10);
}
.tena-chat__compose-send {
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.35);
}
.tena-chat__compose-send:hover { box-shadow: 0 4px 12px rgba(201, 162, 39, 0.45); }

/* Seller-only payout warning — gold accent so it stands out from the
   neutral filter hint above it. */
.tena-chat__warning--seller {
  background: rgba(201, 162, 39, 0.12);
  color: var(--tena-green-deep);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
  font-weight: 500;
}
.tena-chat__warning--seller svg { color: var(--tena-gold-deep); }

/* Pop-in animation for new bubbles. */
@keyframes tena-chat-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Auth sidebar v2 — appended 2026-05-20
   ============================================================ */
.tena-auth-sidebar {
  background: var(--tena-surface);
  border: 1px solid var(--tena-border);
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 240px;
  align-self: start;
  position: sticky;
  top: 1rem;
}
.tena-auth-sidebar__user {
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--tena-border);
}
.tena-auth-sidebar__user-label {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.tena-auth-sidebar__user-name {
  font-size: 1rem;
  color: var(--tena-ink);
  font-weight: 700;
}
.tena-auth-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tena-auth-sidebar__group-title {
  font-size: 0.6875rem;
  color: var(--tena-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 0 8px 6px;
  margin: 0;
}
.tena-auth-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--tena-ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.tena-auth-sidebar__link i.ti {
  font-size: 16px;
  color: var(--tena-muted);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.tena-auth-sidebar__link:hover {
  background: var(--tena-surface-2);
  color: var(--tena-ink);
  text-decoration: none;
}
.tena-auth-sidebar__link.is-active {
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
}
.tena-auth-sidebar__link.is-active i.ti {
  color: var(--tena-green);
}
.tena-auth-sidebar__footer {
  padding-top: 14px;
  border-top: 1px solid var(--tena-border);
}
.tena-auth-sidebar__footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--tena-muted);
  text-decoration: none;
  padding: 4px 8px;
}
.tena-auth-sidebar__footer a:hover { color: var(--tena-green); }
@media (max-width: 768px) {
  .tena-auth-sidebar { position: static; }
}

/* ============================================================
   Account shell — 2-column grid wrapper (sidebar + main).
   Used by /dashboard.php; can be reused on profile / my-purchases.
   ============================================================ */
.tena-account-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.75rem;
  align-items: start;
}
.tena-account-main {
  min-width: 0;
}
@media (max-width: 768px) {
  .tena-account-shell {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================================
   Checkout layout — appended 2026-05-22
   Two columns on desktop, stacked on phones/tablets.
   ============================================================ */
.tena-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .tena-checkout-grid { grid-template-columns: 1fr; }
  /* Show the order summary (with its breakdown) above the form + Pay button. (#58) */
  .tena-checkout-grid > aside { order: -1; position: static; }
}

/* ============================================================
   Live toast notifications (new chat messages) — appended 2026-05-22
   ============================================================ */
.tena-toast-stack {
  position: fixed;
  top: 72px;
  right: 14px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 340px;
  max-width: calc(100vw - 28px);
  pointer-events: none;
}
.tena-toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--tena-white);
  border: 1px solid var(--tena-border);
  border-left: 4px solid var(--tena-green);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(15, 61, 46, 0.18);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--tena-ink);
  animation: tena-toast-in 0.25s ease;
}
@keyframes tena-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tena-toast.is-leaving {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tena-toast-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tena-green-tint);
  color: var(--tena-green-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tena-toast-body { flex: 1; min-width: 0; }
.tena-toast-title {
  display: block;
  font: 700 0.88rem var(--tena-font);
  color: var(--tena-green-deep);
}
.tena-toast-text {
  display: block;
  font-size: 0.83rem;
  color: var(--tena-ink-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tena-toast-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tena-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}
.tena-toast-close:hover { color: var(--tena-ink); }
@media (max-width: 480px) {
  .tena-toast-stack { top: 64px; right: 8px; left: 8px; width: auto; max-width: none; }
}

/* ============================================================
   Global responsive fallback — appended 2026-06-01
   Many pages set grid-template-columns with INLINE styles for
   two-column layouts (forms, sidebar + main). Several lacked a
   mobile breakpoint and overflowed on phones/tablets. These rules
   collapse those inline grids to a single column on small screens.
   Auto-fill card grids use `repeat(auto-fill, …)` and are NOT
   matched here — they already wrap on their own.
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar-style layouts: minmax(0, Nfr) minmax(<fixed>px, 1fr) */
  [style*="grid-template-columns: minmax"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  /* Paired form fields and simple two-column rows */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Finance console (escrow disbursement) ───────────────── */
.tena-amount { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.tena-bulkbar {
    position: sticky; bottom: 0; z-index: 20;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1rem; padding: 0.85rem 1.1rem;
    background: var(--tena-white); border: 1px solid var(--tena-border);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.tena-bulkbar.is-visible { display: flex; }
.tena-bulkbar-total { font-family: var(--tena-font); font-weight: 700; color: var(--tena-green-deep); }

.tena-modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 61, 46, 0.45); padding: 1rem;
}
.tena-modal-backdrop.is-open { display: flex; }
.tena-modal {
    width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
    background: var(--tena-white); border-radius: var(--r); box-shadow: var(--shadow-lg);
    padding: 1.5rem;
}
.tena-modal h3 { font-family: var(--tena-font); color: var(--tena-green-deep); margin: 0 0 1rem; }
.tena-modal-list { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.tena-modal-list td { padding: 0.4rem 0; border-bottom: 1px solid var(--tena-border); font-size: 0.92rem; }
.tena-modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* Shared confirm dialog (#83, #70). Sits above the bottom nav, toasts and the
   assistant launcher; reuses the .tena-modal shell + tokens. */
.tena-confirm-modal { z-index: 1200; }
.tena-modal--confirm { max-width: 420px; }
.tena-modal--confirm p { color: var(--tena-ink-2); margin: 0 0 0.5rem; line-height: 1.5; }

.tena-finance-subrow td { background: var(--tena-bg); font-size: 0.86rem; color: var(--tena-ink-2); }

/* Finance stat cards: clickable lift + overflow-safe tabular amount */
.tena-stat-link { display: block; text-decoration: none; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.tena-stat-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tena-stat-amount {
    font-variant-numeric: tabular-nums;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
    margin-top: 0.3rem; white-space: nowrap; overflow: hidden;
}