/* ============================================================
   ThaPameBro? brand theme
   Layered on top of Bootstrap + DevExpress blazing-berry.
   Canonical brand palette: amber → coral-red → hot pink → trefoil
   pink → purple → dark navy. Sourced from the SVG asset pack.
   ============================================================ */

:root {
    /* Brand palette — official */
    --tp-amber:        #FFB627;
    --tp-coral:        #FF4D6D;
    --tp-pink:         #E91E78;  /* hot pink — primary brand */
    --tp-pink-2:       #FF1F8F;  /* trefoil pink — accent */
    --tp-purple:       #8B3FCF;
    --tp-night:        #1F1A3D;  /* brand dark navy */
    --tp-cream:        #FFF6F0;
    --tp-cream-2:      #FBE8D8;

    /* Utility (kept for badges / RSVP states / Read-permission, etc.) */
    --tp-mint:         #06D6A0;
    --tp-blue:         #3A86FF;

    /* Brand gradients (4-stop matches banner.svg exactly) */
    --tp-gradient-brand:  linear-gradient(135deg, #FFB627 0%, #FF4D6D 35%, #E91E78 70%, #8B3FCF 100%);
    --tp-gradient-hero:   linear-gradient(135deg, #E91E78 0%, #8B3FCF 100%);
    --tp-gradient-sunset: linear-gradient(135deg, #FFB627 0%, #FF4D6D 35%, #E91E78 70%, #8B3FCF 100%);
    --tp-gradient-cool:   linear-gradient(135deg, #3A86FF 0%, #8B3FCF 100%);

    --tp-radius:    16px;
    --tp-radius-sm: 10px;

    /* Bootstrap variable overrides */
    --bs-primary:        var(--tp-pink);
    --bs-primary-rgb:    233, 30, 120;
    --bs-secondary:      var(--tp-purple);
    --bs-secondary-rgb:  139, 63, 207;
    --bs-success:        var(--tp-mint);
    --bs-success-rgb:    6, 214, 160;
    --bs-warning:        var(--tp-amber);
    --bs-warning-rgb:    255, 182, 39;
    --bs-danger:         var(--tp-coral);
    --bs-danger-rgb:     255, 77, 109;
    --bs-info:           var(--tp-blue);
    --bs-info-rgb:       58, 134, 255;
    --bs-link-color:     var(--tp-purple);
    --bs-body-bg:        var(--tp-cream);
    --bs-body-color:     var(--tp-night);
}

/* ---------- Typography ---------- */
html, body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

h1, h2, h3, h4, .display-5 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

h1 { font-size: 2.4rem; }
.display-5 { font-weight: 900; letter-spacing: -0.03em; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout / cards ---------- */
.card {
    border: 0;
    border-radius: var(--tp-radius);
    box-shadow: 0 6px 24px rgba(139, 63, 207, 0.08);
    background: white;
}
.card .card-title { font-weight: 700; }

.list-group { border-radius: var(--tp-radius); overflow: hidden; }
.list-group-item { border-color: rgba(31, 26, 61, 0.06); }
.list-group-item-action:hover { background: rgba(233, 30, 120, 0.04); }

hr { opacity: 0.1; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: 0.45rem 1.1rem; }
.btn-sm { padding: 0.25rem 0.75rem; }

.btn-primary {
    background: var(--tp-gradient-hero);
    border: 0;
    color: white;
    box-shadow: 0 6px 16px rgba(233, 30, 120, 0.25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--tp-gradient-hero);
    filter: brightness(1.07);
    color: white;
    box-shadow: 0 8px 22px rgba(233, 30, 120, 0.35);
}

.btn-outline-primary {
    color: var(--tp-pink);
    border: 2px solid var(--tp-pink);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--tp-pink);
    color: white;
}

.btn-success { background: var(--tp-mint); border-color: var(--tp-mint); color: white; }
.btn-warning { background: var(--tp-amber); border-color: var(--tp-amber); color: var(--tp-night); }
.btn-outline-success { color: var(--tp-mint); border: 2px solid var(--tp-mint); }
.btn-outline-warning { color: #b5860a; border: 2px solid var(--tp-amber); }
.btn-outline-secondary { color: var(--tp-night); border: 2px solid var(--tp-night); }
.btn-outline-danger { color: var(--tp-coral); border: 2px solid var(--tp-coral); }

/* ---------- Badges ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: 0.35em 0.75em; letter-spacing: 0.02em; }
.badge.bg-primary    { background: var(--tp-pink) !important; }
.badge.bg-secondary  { background: var(--tp-night) !important; }
.badge.bg-success    { background: var(--tp-mint) !important; color: white !important; }
.badge.bg-warning    { background: var(--tp-amber) !important; color: var(--tp-night) !important; }
.badge.bg-danger     { background: var(--tp-coral) !important; }
.badge.bg-info       { background: var(--tp-blue) !important; color: white !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--tp-radius-sm);
    border: 1.5px solid rgba(31, 26, 61, 0.12);
    padding: 0.55rem 0.85rem;
    background: white;
}
.form-control:focus, .form-select:focus {
    border-color: var(--tp-pink);
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 120, 0.15);
}
.input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .form-control:first-child,
.input-group .form-select:first-child {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}

/* ---------- Sidebar overrides (template's NavMenu) ---------- */
.sidebar {
    background-image: linear-gradient(180deg, var(--tp-pink) 0%, var(--tp-purple) 50%, var(--tp-night) 100%) !important;
}
.sidebar .navbar-brand { font-weight: 900; letter-spacing: -0.02em; font-size: 1.6rem; }
.sidebar .nav-link { color: rgba(255, 255, 255, 0.85) !important; border-radius: 999px; margin: 2px 8px; padding-left: 1rem !important; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.12); color: white !important; }
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.sidebar .bi { color: rgba(255, 255, 255, 0.9) !important; }

/* Unify the two top-rows (sidebar's brand row + main content's "About" row)
   so they're the same height and the same colour. Without this, the sidebar's
   .navbar padding inflates its row by ~4px past the main's fixed 3.5rem
   height, and the rgba background reads differently against the gradient
   sidebar vs the cream body.
   The border-bottom override drops the 1px gray line MainLayout.razor.css
   paints under the main's top-row — that line eats 1px of the navy strip
   and makes the central header read as visibly shorter than the sidebar's. */
.top-row {
    background: var(--tp-night) !important;
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    border-bottom: 0 !important;
}
.sidebar .top-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------- Home hero ---------- */
.tp-hero {
    background: var(--tp-gradient-sunset);
    color: white;
    padding: 3.5rem 2.5rem;
    border-radius: var(--tp-radius);
    box-shadow: 0 18px 60px rgba(233, 30, 120, 0.25);
    margin-bottom: 2rem;
}
.tp-hero h1 { font-size: 3rem; font-weight: 900; margin: 0 0 0.75rem; }
.tp-hero .lead { font-size: 1.2rem; opacity: 0.95; max-width: 720px; }
.tp-hero .btn-primary { background: white; color: var(--tp-pink); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15); }
.tp-hero .btn-primary:hover { background: white; color: var(--tp-purple); filter: brightness(1); }
.tp-hero .btn-outline-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.6);
}
.tp-hero .btn-outline-secondary:hover { background: white; color: var(--tp-pink); }

.tp-feature-card {
    background: white;
    border-radius: var(--tp-radius);
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 6px 24px rgba(139, 63, 207, 0.08);
    border-top: 4px solid var(--tp-pink);
}
.tp-feature-card:nth-child(3n+2) { border-top-color: var(--tp-blue); }
.tp-feature-card:nth-child(3n)   { border-top-color: var(--tp-mint); }
.tp-feature-card h5 { font-weight: 800; margin-bottom: 0.5rem; }

/* ---------- Hero banners (Calendar / Concert) ---------- */
.tp-hero-banner {
    position: relative;
    border-radius: var(--tp-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background-size: cover;
    background-position: center center;
    background-color: var(--tp-night);
    box-shadow: 0 16px 48px rgba(139, 63, 207, 0.18);
    aspect-ratio: 16 / 6;
}
.tp-hero-banner.tp-hero-concert { aspect-ratio: 16 / 9; }
.tp-hero-placeholder {
    background-image: var(--tp-gradient-sunset);
}
.tp-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem 1.75rem;
    color: white;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.65) 100%);
}
.tp-hero-overlay h1 {
    color: white;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Cover image picker ---------- */
.tp-cover-picker { outline: none; transition: box-shadow 0.15s ease; }
.tp-cover-picker:focus,
.tp-cover-picker:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 120, 0.22), 0 6px 24px rgba(139, 63, 207, 0.12);
}
.tp-cover-preview-wrap {
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    background: var(--tp-cream-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-cover-preview-wrap.tp-aspect-16x6 { aspect-ratio: 16 / 6; }
.tp-cover-preview-wrap.tp-aspect-16x9 { aspect-ratio: 16 / 9; }
.tp-cover-preview-wrap.tp-aspect-1x1 { aspect-ratio: 1 / 1; max-width: 240px; }
.tp-cover-preview-wrap.tp-aspect-4x3 { aspect-ratio: 4 / 3; }
.tp-cover-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-cover-placeholder {
    color: var(--tp-night);
    text-align: center;
    padding: 1rem;
    opacity: 0.65;
}
.tp-cover-placeholder div { font-weight: 700; margin-bottom: 0.25rem; }

/* ---------- Cover thumbnails in cards / lists ---------- */
.tp-card-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--tp-gradient-cool);
    background-size: cover;
    background-position: center;
    border-radius: var(--tp-radius) var(--tp-radius) 0 0;
}
.tp-thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--tp-gradient-cool);
}

/* ---------- Concert avatar + venue map ---------- */
.tp-concert-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    background: white;
    flex-shrink: 0;
}
/* Wrapper around the interactive venue map + its controls row */
.tp-venue-map-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The clickable map container — contains the img and absolutely-positioned pins */
.tp-venue-map {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    background: var(--tp-cream-2);
    touch-action: none; /* pointer events handle drag; keep page from scrolling under the finger */
}
.tp-venue-map-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* clicks always go to the container */
}
.tp-venue-map.tp-venue-map-empty {
    aspect-ratio: 4 / 3;
    height: auto;
    background: var(--tp-cream-2);
}

/* "Tap the map to drop your pin" placeholder shown when no pin exists yet */
.tp-venue-map-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(31, 26, 61, 0.78);
    color: white;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(31, 26, 61, 0.25);
}

/* A single pin: avatar + name label, anchored by its bottom-center to (x, y) */
.tp-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: default;
    transition: transform 120ms ease;
    z-index: 1;
}
.tp-pin.is-mine {
    cursor: grab;
    z-index: 3;
}
.tp-pin.is-mine.is-dragging {
    cursor: grabbing;
    transition: none;
    z-index: 4;
}
.tp-pin .tp-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    box-shadow: 0 0 0 2px white, 0 4px 10px rgba(31, 26, 61, 0.35);
}
.tp-pin.is-mine .tp-avatar-sm {
    box-shadow: 0 0 0 3px var(--tp-pink), 0 4px 14px rgba(233, 30, 120, 0.45);
}
/* Pointer triangle below the avatar (CSS-only "marker" shape) */
.tp-pin::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid white;
    margin-top: -2px;
    filter: drop-shadow(0 2px 2px rgba(31, 26, 61, 0.25));
}
.tp-pin.is-mine::after { border-top-color: var(--tp-pink); }

.tp-pin-name {
    position: absolute;
    bottom: calc(100% + 6px);
    background: rgba(31, 26, 61, 0.88);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}
.tp-pin:hover .tp-pin-name,
.tp-pin.is-dragging .tp-pin-name { opacity: 1; }

.tp-venue-map-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 2px;
}
.tp-discoverable-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--tp-night);
    margin-bottom: 0;
}
.tp-discoverable-toggle input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--tp-pink);
}
.tp-discoverable-toggle input:disabled + span { opacity: 0.55; }
.tp-concert-avatar.tp-concert-avatar-empty {
    background: rgba(255, 255, 255, 0.35);
    border-style: dashed;
}

/* ---------- Timetable ---------- */
.tp-timetable {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.tp-timetable-row {
    display: grid;
    grid-template-columns: 44px 96px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: var(--tp-radius-sm);
    box-shadow: 0 4px 12px rgba(139, 63, 207, 0.06);
    border-left: 4px solid var(--tp-purple);
    padding: 0.65rem 0.85rem;
}
.tp-tt-icon { font-size: 1.5rem; line-height: 1; text-align: center; }
.tp-tt-time { color: var(--tp-night); white-space: nowrap; }
.tp-tt-body { min-width: 0; }
.tp-tt-actions { white-space: nowrap; }
.tp-timetable-form { border-left: 4px solid var(--tp-pink); }
/* Private (per-user) timetable rows: dashed accent + cream tint so they
   read as "someone's personal plan" vs the solid white master rows. */
.tp-timetable-row.tp-tt-private {
    background: var(--tp-cream-2);
    border-left-style: dashed;
    border-left-color: var(--tp-amber);
}
.tp-tt-private-badge {
    background: rgba(255, 182, 39, 0.18) !important;
    color: var(--tp-night) !important;
    font-weight: 600;
    font-size: 0.7rem;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
}

/* ---------- Gallery ---------- */
.tp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.tp-gallery-tile {
    background: white;
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(139, 63, 207, 0.08);
    display: flex;
    flex-direction: column;
}
.tp-gallery-img-link {
    display: block;
    background: var(--tp-cream-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.tp-gallery-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.tp-gallery-img-link:hover img { transform: scale(1.04); }
.tp-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem 0;
    gap: 0.5rem;
}
.tp-gallery-heart {
    border: 0;
    background: transparent;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.95rem;
    color: var(--tp-night);
    transition: transform 0.12s ease, background 0.12s ease;
}
.tp-gallery-heart:hover:not(:disabled) {
    background: rgba(233, 30, 120, 0.08);
}
.tp-gallery-heart:active:not(:disabled) {
    transform: scale(1.15);
}
.tp-gallery-heart:disabled { cursor: not-allowed; opacity: 0.5; }
.tp-gallery-heart.is-hearted { color: var(--tp-pink); }
.tp-gallery-heart-count { font-size: 0.8rem; font-weight: 600; }
.tp-gallery-share {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tp-purple);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    transition: background 0.12s ease;
}
.tp-gallery-share:hover { background: rgba(139, 63, 207, 0.1); text-decoration: none; }
.tp-gallery-visibility-private,
.tp-gallery-visibility-shared,
.tp-gallery-visibility-public {
    background: rgba(31, 26, 61, 0.06) !important;
    color: var(--tp-night) !important;
    font-size: 0.65rem !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}
.tp-gallery-visibility-public { background: rgba(139, 63, 207, 0.14) !important; color: var(--tp-purple) !important; }
.tp-gallery-visibility-private { background: rgba(31, 26, 61, 0.12) !important; }
.tp-gallery-caption {
    padding: 0.4rem 0.65rem 0.5rem;
    font-size: 0.85rem;
    color: var(--tp-night);
    flex: 1;
}
.tp-gallery-author { color: rgba(31, 26, 61, 0.5); margin-left: 0.25rem; font-size: 0.75rem; }
.tp-gallery-edit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.65rem 0.55rem;
    border-top: 1px solid rgba(31, 26, 61, 0.06);
    padding-top: 0.5rem;
}
.tp-gallery-vis-select { flex: 1; font-size: 0.75rem; }
.tp-gallery-uploader { border-left: 4px solid var(--tp-pink); }

/* ---------- Ratings ---------- */
.tp-rating-row { border-bottom: 1px solid rgba(31, 26, 61, 0.06); }
.tp-rating-row:last-child { border-bottom: 0; }
.tp-rating-label { min-width: 150px; font-weight: 600; }
.tp-rating-icons { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.tp-rating-icon { font-size: 1.4rem; line-height: 1; }
.tp-rating-icon-btn {
    background: transparent;
    border: 0;
    padding: 0 0.1rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.1s, transform 0.1s;
    color: inherit;
}
.tp-rating-icon-btn:hover { transform: scale(1.15); opacity: 0.9; }
.tp-rating-icon-btn.is-filled { opacity: 1; }
.tp-rating-value { min-width: 4rem; }

.tp-rating-aggregate {
    background: white;
    border-radius: var(--tp-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 6px 24px rgba(139, 63, 207, 0.08);
}
.tp-rating-aggregate .tp-rating-icons { font-size: 1.15rem; }

/* Review cards */
.tp-review {
    background: white;
    border-radius: var(--tp-radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 14px rgba(139, 63, 207, 0.06);
    border-left: 4px solid var(--tp-pink);
    margin-bottom: 0.75rem;
}
.tp-review.is-mine { border-left-color: var(--tp-mint); }
.tp-review-meta { color: rgba(31, 26, 61, 0.55); font-size: 0.85rem; }
.tp-review-body p { margin-bottom: 0.5rem; }
.tp-review-body p:last-child { margin-bottom: 0; }
.tp-review-body a { color: var(--tp-purple); }

/* MiniReviewEditor — plain textarea + tiny markdown toolbar. Replaces
   DxRichEdit, whose HTML importer broke whitespace on round-trip. */
.tp-mini-editor {
    border: 1px solid rgba(31, 26, 61, 0.12);
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
    background: white;
}
.tp-mini-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(31, 26, 61, 0.08);
    background: var(--tp-cream-2);
    flex-wrap: wrap;
}
.tp-mini-editor-hint {
    font-size: 0.75rem;
    color: rgba(31, 26, 61, 0.6);
    margin-left: auto;
}
.tp-mini-editor-textarea {
    border: 0 !important;
    border-radius: 0 !important;
    resize: vertical;
    min-height: 6rem;
    box-shadow: none !important;
}
.tp-mini-editor-textarea:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ---------- Pill toggle (RSVP, rating sign) ----------
   Bootstrap's btn-group with btn-outline-* variants leaves the inactive
   buttons with a visible white/cream box + colored outline, which reads
   as a chunky frame against the cream page. We zero those out so the
   group looks like a single rounded pill against the page bg, with only
   the active option painted in its colour. Inactive buttons stay clickable
   and show their colour in text. */
.tp-pill-toggle {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgba(31, 26, 61, 0.18) !important;
    /* !important needed because Bootstrap's .btn-group-sm forces a 2.4px
       border-radius on small button groups, which beats our specificity. */
    border-radius: 999px !important;
    overflow: hidden;
}
.tp-pill-toggle > .btn {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600;
}
.tp-pill-toggle > .btn:hover {
    background: rgba(31, 26, 61, 0.06) !important;
}
/* Active variants keep their fill colour. */
.tp-pill-toggle > .btn-success,
.tp-pill-toggle > .btn-warning,
.tp-pill-toggle > .btn-secondary,
.tp-pill-toggle > .btn-danger,
.tp-pill-toggle > .btn-primary {
    background: var(--bs-btn-bg, currentColor) !important;
    color: var(--bs-btn-color, white) !important;
    border-color: transparent !important;
}
/* Outline variants: text-only colour cue. */
.tp-pill-toggle > .btn-outline-success { color: var(--bs-success) !important; }
.tp-pill-toggle > .btn-outline-warning { color: #b8860b !important; }
.tp-pill-toggle > .btn-outline-secondary { color: var(--tp-night) !important; opacity: 0.55; }
.tp-pill-toggle > .btn-outline-danger { color: var(--bs-danger) !important; }

/* ---------- DevExpress component tweaks ---------- */
.dxbl-grid { border-radius: var(--tp-radius); overflow: hidden; }
.dxbl-grid-header { background: var(--tp-cream-2) !important; }
.dxbl-btn { border-radius: 999px !important; }

/* Scheduler */
.dxbl-scheduler { border-radius: var(--tp-radius); overflow: hidden; box-shadow: 0 6px 24px rgba(139, 63, 207, 0.08); }
.dxbl-scheduler-appointment {
    border-radius: 8px !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---------- Avatars ---------- */
.tp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    color: white;
    font-weight: 700;
    flex-shrink: 0;
    vertical-align: middle;
    user-select: none;
    box-shadow: 0 2px 8px rgba(31, 26, 61, 0.12);
}
img.tp-avatar { object-fit: cover; }
.tp-avatar-sm { width: 28px; height: 28px; font-size: 0.78rem; }
.tp-avatar-md { width: 40px; height: 40px; font-size: 0.95rem; }
.tp-avatar-lg { width: 96px; height: 96px; font-size: 2.1rem; }

/* Scheduler appointment color overrides via label */
/* DX uses the Color/BackgroundCssClass from labels; we apply our own gradient feel */
.tp-appt-invite     { background: linear-gradient(135deg, #1F1A3D 0%, #3d3d5c 100%) !important; color: white !important; }
.tp-appt-friendlist { background: linear-gradient(135deg, #3A86FF 0%, #8B3FCF 100%) !important; color: white !important; }
.tp-appt-public     { background: linear-gradient(135deg, #E91E78 0%, #FFB627 100%) !important; color: white !important; }

/* ---------- EditableImage (camera overlay) ---------- */
.tp-editable-camera {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 0;
    box-shadow: 0 2px 8px rgba(31, 26, 61, 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-night);
    padding: 0;
    z-index: 5;
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-editable-camera:hover  { opacity: 1; transform: scale(1.06); box-shadow: 0 6px 18px rgba(31, 26, 61, 0.45); }
.tp-editable-camera:focus  { opacity: 1; outline: 2px solid var(--tp-pink); outline-offset: 2px; }
/* Bump opacity when the parent image container is hovered too, so the button
   reveals itself before the user has to aim precisely at it. */
.tp-edit-anchor:hover .tp-editable-camera,
.tp-edit-anchor:focus-within .tp-editable-camera { opacity: 0.9; }
.tp-editable-camera svg { width: 20px; height: 20px; }
.tp-editable-camera-small { width: 28px; height: 28px; }
.tp-editable-camera-small svg { width: 14px; height: 14px; }
/* Corner positions (br = bottom-right, etc.) */
.tp-editable-camera.tp-pos-br { bottom: 12px; right: 12px; }
.tp-editable-camera.tp-pos-bl { bottom: 12px; left: 12px; }
.tp-editable-camera.tp-pos-tr { top: 12px;    right: 12px; }
.tp-editable-camera.tp-pos-tl { top: 12px;    left: 12px; }
/* Tighter offset for the small variant (used on circular avatars). */
.tp-editable-camera-small.tp-pos-br { bottom: 0; right: 0; }
.tp-editable-camera-small.tp-pos-bl { bottom: 0; left: 0; }
.tp-editable-camera-small.tp-pos-tr { top: 0;    right: 0; }
.tp-editable-camera-small.tp-pos-tl { top: 0;    left: 0; }

.tp-editable-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9;
}
.tp-editable-panel {
    position: absolute;
    background: white;
    border-radius: var(--tp-radius);
    box-shadow: 0 12px 40px rgba(31, 26, 61, 0.28);
    padding: 1rem;
    z-index: 10;
    width: 300px;
    max-width: calc(100vw - 24px);
    color: var(--tp-night);
}
.tp-editable-panel.tp-pos-br { bottom: 64px; right: 12px; }
.tp-editable-panel.tp-pos-bl { bottom: 64px; left: 12px; }
.tp-editable-panel.tp-pos-tr { top: 64px;    right: 12px; }
.tp-editable-panel.tp-pos-tl { top: 64px;    left: 12px; }

/* For position contexts that need their parent explicitly anchored. */
.tp-edit-anchor { position: relative; }

/* Inline TriggerLabel variant — the button is in normal flow and its
   popover drops below the button. */
.tp-editable-inline { position: relative; display: inline-block; }
.tp-editable-panel.tp-editable-panel-below {
    top: 100%;
    bottom: auto;
    left: 0;
    right: auto;
    margin-top: 8px;
}

/* ---------- Brand logos ---------- */
.tp-brand { display: inline-flex; align-items: center; padding: 0; line-height: 1; }
.tp-brand-logo {
    height: 40px;
    width: auto;
    display: block;
    /* The SVG already has its own dark-surface design; no recolour needed. */
}

/* Hero variant for the home page that hosts the brand hero SVG.
   The SVG ships with its own gradient + dancing figures, so the wrapper
   stays transparent. We keep the rounded-radius + glow + bottom padding
   so the CTAs below the logo still feel inside the hero block. */
.tp-hero.tp-hero-brand {
    background: transparent;
    box-shadow: none;
    padding: 0 0 2rem;
    text-align: center;
}
.tp-hero.tp-hero-brand .tp-hero-logo {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    margin: 0 auto 1rem;
    border-radius: var(--tp-radius);
    box-shadow: 0 18px 60px rgba(233, 30, 120, 0.25);
}
.tp-hero.tp-hero-brand .lead { color: var(--tp-night); opacity: 1; max-width: 720px; margin: 0 auto 1rem; }
.tp-hero.tp-hero-brand p { color: var(--tp-night); }
/* Inside the brand hero (transparent bg), revert button styling to the regular
   gradient primary instead of the white-on-coloured variant the non-brand
   .tp-hero uses. */
.tp-hero.tp-hero-brand .btn-primary { background: var(--tp-gradient-hero); color: white; box-shadow: 0 6px 16px rgba(233, 30, 120, 0.25); }
.tp-hero.tp-hero-brand .btn-primary:hover { background: var(--tp-gradient-hero); color: white; filter: brightness(1.07); }
.tp-hero.tp-hero-brand .btn-outline-secondary { background: transparent; color: var(--tp-purple); border-color: var(--tp-purple); }
.tp-hero.tp-hero-brand .btn-outline-secondary:hover { background: var(--tp-purple); color: white; }

/* ---------- Next-show hero (Dashboard "what's next" card) ---------- */
.tp-next-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    color: white;
    padding: 28px 32px 24px;
    min-height: 220px;
    margin-bottom: 24px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 31, 143, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(255, 182, 39, 0.45) 0%, transparent 55%),
        linear-gradient(180deg, var(--tp-night) 0%, #4a2b6e 100%);
    box-shadow: 0 18px 48px rgba(31, 26, 61, 0.28);
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.tp-next-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 56px rgba(31, 26, 61, 0.34);
}

.tp-next-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    filter: saturate(1.1);
    mix-blend-mode: screen;
    pointer-events: none;
}
.tp-next-hero-grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 25% 75%, white 0 0.8px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.07;
    pointer-events: none;
}

.tp-next-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.tp-next-hero-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--tp-amber);
    color: var(--tp-night);
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(255, 182, 39, 0.35);
}

.tp-next-hero-artist-link { color: white; text-decoration: none; }
.tp-next-hero-artist-link:hover { color: white; text-decoration: none; }
.tp-next-hero-artist {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.tp-next-hero-venue {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}
.tp-next-hero-when {
    font-size: 0.9rem;
    opacity: 0.75;
    font-weight: 600;
    margin-bottom: 12px;
}

.tp-next-hero-friends {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: inline-flex;
}
.tp-next-hero-friends .tp-friends-going { margin-top: 0; }
.tp-next-hero-friends .tp-fg-stack > .tp-fg-avatar {
    box-shadow: 0 0 0 2.5px rgba(31, 26, 61, 0.85);
}
.tp-next-hero-friends .tp-fg-stack > .tp-fg-avatar .tp-avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}
.tp-next-hero-friends .tp-fg-more {
    min-width: 34px;
    height: 34px;
    font-size: 0.78rem;
    box-shadow: 0 0 0 2.5px rgba(31, 26, 61, 0.85);
}
.tp-next-hero-friends .tp-fg-label { color: rgba(255, 255, 255, 0.9); }

/* ---------- Wrap-up panel (after-the-show receipt on past concerts) ---------- */
.tp-wrapup {
    background: white;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px rgba(31, 26, 61, 0.10);
    overflow: hidden;
    position: relative;
}
.tp-wrapup::before,
.tp-wrapup::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 14px;
    background-image: radial-gradient(circle at 7px 0, var(--tp-cream) 0 5px, transparent 6px);
    background-size: 14px 14px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.tp-wrapup::before { top: -7px; }
.tp-wrapup::after  { bottom: -7px; transform: scaleY(-1); }

.tp-wrapup-header {
    background: linear-gradient(135deg, var(--tp-night) 0%, var(--tp-purple) 100%);
    color: white;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tp-wrapup-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 2px solid currentColor;
    border-radius: 999px;
}
.tp-wrapup-when {
    text-align: right;
    line-height: 1.2;
}
.tp-wrapup-when strong { display: block; font-weight: 800; font-size: 1.05rem; }
.tp-wrapup-when span { font-size: 0.85rem; opacity: 0.85; }

.tp-wrapup-section {
    padding: 22px 28px;
    border-top: 2px dashed rgba(139, 63, 207, 0.22);
    position: relative;
}
.tp-wrapup-section:first-of-type { border-top: 0; }
.tp-wrapup-section h4 {
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--tp-night);
}
.tp-wrapup-section h5 {
    font-weight: 700;
    color: var(--tp-night);
}
.tp-wrapup-section::before,
.tp-wrapup-section::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tp-cream);
    top: -9px;
}
.tp-wrapup-section::before { left: -9px; }
.tp-wrapup-section::after  { right: -9px; }
.tp-wrapup-section:first-of-type::before,
.tp-wrapup-section:first-of-type::after { display: none; }

/* ---------- Concert ticket card (horizontal stub + perforation) ---------- */
.tp-ticket {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(31, 26, 61, 0.10);
    overflow: hidden;
    position: relative;
    min-height: 150px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.tp-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(31, 26, 61, 0.16);
}

.tp-ticket-stub {
    width: 112px;
    flex-shrink: 0;
    color: white;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tp-ticket.is-public     .tp-ticket-stub { background: linear-gradient(160deg, var(--tp-pink) 0%, var(--tp-purple) 100%); }
.tp-ticket.is-friendlist .tp-ticket-stub { background: linear-gradient(160deg, var(--tp-purple) 0%, var(--tp-night) 100%); }
.tp-ticket.is-invite     .tp-ticket-stub { background: linear-gradient(160deg, var(--tp-night) 0%, #3a2c5e 100%); }

.tp-ticket-date { display: flex; flex-direction: column; line-height: 1; }
.tp-ticket-weekday {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.85;
    font-weight: 700;
}
.tp-ticket-day {
    font-size: 3rem;
    font-weight: 900;
    line-height: 0.9;
    margin: 2px 0 4px;
    font-feature-settings: 'tnum';
}
.tp-ticket-month {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tp-ticket-time {
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 6px;
}

.tp-ticket-perf {
    width: 14px;
    flex-shrink: 0;
    background-image: radial-gradient(circle, rgba(31, 26, 61, 0.22) 0 1.5px, transparent 2px);
    background-size: 4px 7px;
    background-position: center;
    background-repeat: repeat-y;
    background-color: white;
    position: relative;
}
.tp-ticket-perf::before,
.tp-ticket-perf::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tp-cream);
}
.tp-ticket-perf::before { top: -7px; }
.tp-ticket-perf::after  { bottom: -7px; }

.tp-ticket-main {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.tp-ticket-body {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}

.tp-ticket-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(31, 26, 61, 0.10);
    background: linear-gradient(135deg, var(--tp-pink) 0%, var(--tp-purple) 100%);
}

.tp-ticket-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tp-ticket-link { text-decoration: none; color: inherit; }
.tp-ticket-link:hover { text-decoration: none; }

.tp-ticket-artist {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--tp-night);
    line-height: 1.1;
    margin: 0;
    word-break: break-word;
}
.tp-ticket:hover .tp-ticket-artist { color: var(--tp-pink); }

.tp-ticket-venue {
    color: #6e6485;
    font-size: 0.9rem;
}

.tp-ticket-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tp-ticket-tag {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tp-ticket-tag.is-public     { background: rgba(6, 214, 160, 0.15);  color: #048a64; }
.tp-ticket-tag.is-friendlist { background: rgba(139, 63, 207, 0.14); color: var(--tp-purple); }
.tp-ticket-tag.is-invite     { background: rgba(31, 26, 61, 0.08);   color: var(--tp-night); }
.tp-ticket-tag.tp-rsvp-going    { background: var(--tp-mint);  color: white; }
.tp-ticket-tag.tp-rsvp-maybe    { background: var(--tp-amber); color: var(--tp-night); }
.tp-ticket-tag.tp-rsvp-notgoing { background: rgba(31, 26, 61, 0.08); color: #6e6485; }
.tp-ticket-tag.tp-rsvp-invited  { background: var(--tp-purple); color: white; }

.tp-ticket-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    gap: 8px;
}
.tp-ticket-foot-spacer { display: inline-block; width: 1px; }

.tp-ticket-trailing {
    position: relative;
    z-index: 2;
}

.tp-ticket-barcode {
    display: inline-block;
    width: 64px;
    height: 28px;
    background-image: repeating-linear-gradient(90deg,
        var(--tp-night) 0 1px, transparent 1px 3px,
        var(--tp-night) 3px 4px, transparent 4px 7px,
        var(--tp-night) 7px 9px, transparent 9px 12px);
    opacity: 0.72;
}

/* Stack vertically on narrow screens */
@media (max-width: 540px) {
    .tp-ticket { flex-direction: column; min-height: 0; }
    .tp-ticket-stub {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
    }
    .tp-ticket-day { font-size: 2.2rem; margin: 0; }
    .tp-ticket-date { flex-direction: row; align-items: baseline; gap: 8px; }
    .tp-ticket-time { margin: 0; }
    .tp-ticket-perf {
        width: 100%;
        height: 14px;
        background-image: radial-gradient(circle, rgba(31, 26, 61, 0.22) 0 1.5px, transparent 2px);
        background-size: 7px 4px;
        background-repeat: repeat-x;
        background-position: center;
    }
    .tp-ticket-perf::before { top: 50%; left: -7px; transform: translateY(-50%); }
    .tp-ticket-perf::after  { bottom: auto; top: 50%; right: -7px; left: auto; transform: translateY(-50%); }
}

/* ---------- DxScheduler appointment cell template ---------- */
.tp-appt-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 3px 6px;
    overflow: hidden;
    border-radius: 6px;
    color: white;
}
.tp-appt-cell-subject {
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-appt-cell-friends {
    display: inline-flex;
    align-items: center;
}
.tp-appt-cell-friends .tp-fg-avatar {
    display: inline-flex;
    margin-left: -6px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px white;
}
.tp-appt-cell-friends .tp-fg-avatar:first-child { margin-left: 0; }
.tp-appt-cell-friends .tp-fg-avatar .tp-avatar-sm {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
}
.tp-appt-cell-friends .tp-fg-more {
    min-width: 18px;
    height: 18px;
    margin-left: -6px;
    padding: 0 4px;
    font-size: 0.55rem;
    box-shadow: 0 0 0 1.5px white;
}

/* ---------- Friends-going strip (social-proof avatars on concert cards) ---------- */
.tp-friends-going {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.tp-fg-stack {
    display: inline-flex;
    align-items: center;
}
.tp-fg-stack > .tp-fg-avatar {
    display: inline-flex;
    margin-left: -8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--tp-cream);
    transition: transform 120ms ease;
}
.tp-fg-stack > .tp-fg-avatar:first-child { margin-left: 0; }
.tp-fg-stack > .tp-fg-avatar:hover { transform: translateY(-2px); z-index: 1; }

.tp-fg-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    margin-left: -8px;
    border-radius: 999px;
    background: var(--tp-pink);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--tp-cream);
}

.tp-fg-label {
    color: var(--tp-purple);
    font-weight: 600;
}

.tp-friends-going.is-compact .tp-fg-label { display: none; }
.tp-friends-going.is-compact .tp-fg-more {
    min-width: 22px;
    height: 22px;
    font-size: 0.65rem;
}
.tp-friends-going.is-compact .tp-fg-stack > .tp-fg-avatar .tp-avatar-sm {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
}

/* ---------- Verdict dial (radial chart for 5 signed category averages) ---------- */
.tp-verdict-dial {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}
.tp-verdict-dial svg {
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: inherit;
}
.tp-verdict-dial.is-compact { max-width: 260px; }

.tp-vd-ring {
    fill: none;
    stroke: rgba(139, 63, 207, 0.18);
    stroke-width: 1;
}
.tp-vd-ring-mid {
    stroke: rgba(139, 63, 207, 0.45);
    stroke-dasharray: 3 3;
}
.tp-vd-spoke {
    stroke: rgba(139, 63, 207, 0.18);
    stroke-width: 1;
}
.tp-vd-poly {
    stroke-width: 2;
    stroke-linejoin: round;
}
.tp-vd-poly.is-pos {
    fill: url(#tpVdPos);
    stroke: var(--tp-pink);
}
.tp-vd-poly.is-neg {
    fill: url(#tpVdNeg);
    stroke: var(--tp-coral);
}
.tp-vd-dot.is-pos { fill: var(--tp-pink);  stroke: white; stroke-width: 1.5; }
.tp-vd-dot.is-neg { fill: var(--tp-coral); stroke: white; stroke-width: 1.5; }

.tp-vd-label {
    font-size: 11px;
    font-weight: 600;
    fill: var(--tp-night);
}
.tp-vd-value {
    font-size: 11px;
    font-weight: 700;
}
.tp-vd-value.is-pos { fill: var(--tp-pink); }
.tp-vd-value.is-neg { fill: var(--tp-coral); }

.tp-vd-overall-num {
    font-size: 22px;
    font-weight: 800;
}
.tp-vd-overall-num.is-pos { fill: var(--tp-pink); }
.tp-vd-overall-num.is-neg { fill: var(--tp-coral); }
.tp-vd-overall-lbl {
    font-size: 9px;
    font-weight: 600;
    fill: var(--tp-night);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}