/*
 * Professional Trading Journal Design System
 * ----------------------------------------
 */

:root {
    /* Colors - LiJournal Gold Theme */
    --primary: #EFBF04;
    /* Primary Gold */
    --primary-rgb: 239, 191, 4;
    --primary-gradient: linear-gradient(135deg, #FFD93D 0%, #B58A00 100%);
    /* Gold Gradient */
    --primary-hover: #C99F03;
    /* Darker Gold */

    --bg-body: #141414;
    /* Default Background */
    --bg-card: #1f1f1f;
    /* Default Card Background */
    --bg-sidebar: #1f1f1f;
    --bg-card-secondary: #18181b;

    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    /* Zinc 400 */
    --text-tertiary: #52525B;
    /* Zinc 600 */

    --border-light: #27272A;
    /* Zinc 800 */
    --border-medium: #3f3f46;
    /* Zinc 700 — used by trade cards and panels */
    --border-hover: #3F3F46;
    /* Zinc 700 */
    --border-subtle: #2a2a2f;

    --success: #10b981;
    --success-bg: #d1fae5;
    --success-text: #065f46;

    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Centered workspace max — global so modals/overlays inherit same sizing */
    --content-shell-max: 1600px;
}

/* Shell capped at 1600 on every screen. On ultrawide the extra space becomes
   side whitespace, so the layout looks identical to FHD — matches Linear/Notion. */

html {
    font-size: 16px;
    /* Reserve scrollbar space at all times — pages without overflow no longer
       shift their content 5–17px to the right when navigating. Pro feel. */
    scrollbar-gutter: stable;
}

/* ---- Global :focus-visible — keyboard-only focus indicator ----
   Mouse clicks never trigger this (browsers strip focus-visible on
   pointer-down), but Tab navigation produces a crisp amber ring.
   Standard pro practice (Linear, GitHub, Stripe). Applied as
   box-shadow so it doesn't reflow layout the way `outline` can. */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--primary, #f59e0b);
    outline-offset: 2px;
    border-radius: inherit;
}

/* For pill / circular controls — round ring matches shape via inherited
   border-radius. Buttons inside the app sidebar nav, view tabs, and
   small icon buttons all benefit. */
button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary, #f59e0b);
    outline-offset: 2px;
}

/* Inputs / selects / textareas get an inset ring + amber border so the
   shape of the control reads the same in focus as out. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary, #f59e0b);
    outline-offset: 1px;
}

/* ---- Data Management date trigger ----
   Mirrors the visual language of the Trades filter rail's range picker
   (.tg-range-picker-trigger): no rectangular input box, just a label +
   value row with a thin bottom border. Clicking opens the same dark
   calendar popover used in the Trades filter. */
.dm-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 0 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    outline: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.dm-date-trigger:hover {
    border-bottom-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.02);
}

.dm-date-trigger:focus-visible {
    border-bottom-color: var(--primary, #f59e0b);
    outline: none;
    box-shadow: 0 1px 0 0 var(--primary, #f59e0b);
}

.dm-date-trigger-v {
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    flex: 1;
    min-width: 0;
}

.dm-date-trigger-v.dm-date-placeholder {
    color: rgba(148, 163, 184, 0.55);
    font-weight: 400;
}

.dm-date-trigger-chev {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.55);
    flex-shrink: 0;
}

.lj-simple-cal-popover {
    /* tg-cal-popover styles already define dark themed calendar.
       This class is here so future overrides target only the simple
       picker without touching the Trades filter calendar. */
}

/* ---- Command palette (Ctrl/Cmd+K) ----
   Centered modal panel over a dimmed backdrop. Stays out of layout when
   hidden via the [hidden] attr. */
.lj-palette {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(80px, 12vh, 160px);
    animation: ljPaletteFade 0.12s ease-out;
}

.lj-palette[hidden] { display: none; }

.lj-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.lj-palette-panel {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(28, 28, 32, 0.98) 0%, rgba(14, 14, 17, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    overflow: hidden;
}

.lj-palette-input-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lj-palette-search-icon {
    color: var(--text-secondary, #A1A1AA);
    flex-shrink: 0;
}

.lj-palette-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.lj-palette-esc {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #A1A1AA);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 2px 7px;
}

.lj-palette-results {
    list-style: none;
    margin: 0;
    padding: 6px 6px 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 60px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.lj-palette-section {
    padding: 8px 12px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.lj-palette-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: background 0.1s ease;
}

.lj-palette-item:hover,
.lj-palette-item.is-active {
    background: rgba(245, 158, 11, 0.12);
}

.lj-palette-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #A1A1AA);
    flex-shrink: 0;
}

.lj-palette-item.is-active .lj-palette-item-icon {
    background: rgba(245, 158, 11, 0.18);
    color: var(--primary, #f59e0b);
}

.lj-palette-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.lj-palette-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-palette-item-sub { font-size: 0.72rem; color: var(--text-secondary, #A1A1AA); }

.lj-palette-item-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.lj-palette-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.88rem;
}

.lj-palette-footer {
    display: flex;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: var(--text-secondary, #A1A1AA);
    flex-wrap: wrap;
}

.lj-palette-footer kbd {
    font-family: inherit;
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 3px;
}

@keyframes ljPaletteFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Reduced-motion accessibility ----
   Respect the OS-level setting. People who get motion-sick or have
   vestibular issues should never see our scale/translate animations.
   We also strip transitions so collapsible panels snap instead of
   sliding. !important is appropriate here — it must beat all inline
   `transition:` / `animation:` styles, including third-party ones. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 16px;
    }
}

/* Base resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#app-container {
    --app-sidebar-w: 240px;
    position: relative;
    min-height: 100vh;
}

/* ----- Fixed primary sidebar (rail) ----- */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 150;
    width: var(--app-sidebar-w);
    background-color: var(--bg-card);
    border-right: 1px solid var(--border-light);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.app-sidebar-brand {
    flex-shrink: 0;
    /* Hero-sized brand: anchor to the top of the rail and breathe vertically
       so the sidebar's upper half doesn't feel empty. The font scales up
       considerably while staying capped at the sidebar's inner width via
       container-respecting padding + word-break safety. */
    margin: 1.4rem 0.65rem 1.6rem;
    padding: 0.65rem 0.75rem 0.8rem;
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.05;
    color: var(--primary);
    letter-spacing: -0.035em;
    cursor: pointer;
    user-select: none;
    /* Subtle bottom edge mirrors the workspace-group label below it,
       giving the brand a clear "header" identity rather than floating
       loose. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Layered text-shadow for premium metallic depth: dark drop + soft golden glow */
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(239, 191, 4, 0.22);
    transition: background 0.15s ease, color 0.15s ease;
}

.app-sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.04);
}

.app-sidebar-brand:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.app-sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px 8px;
}

.sidebar-nav-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 520;
}

.app-sidebar-nav .sidebar-nav-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.app-sidebar-nav .folder-tab.sidebar-nav-item {
    width: 100%;
    box-sizing: border-box;
    min-width: unset;
    margin: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.58rem 0.72rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    font-family: inherit;
    position: relative;
}

.app-sidebar-nav .folder-tab.sidebar-nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.app-sidebar-nav .folder-tab.sidebar-nav-item:focus-visible {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.app-sidebar-nav .folder-tab.sidebar-nav-item.active {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.55);
    font-weight: 600;
    box-shadow:
        0 0 0 1px rgba(var(--primary-rgb), 0.08),
        0 0 12px rgba(var(--primary-rgb), 0.18);
    text-shadow: none;
}

/* "Coming soon" disabled sidebar entry — dimmed text + non-interactive
   cursor, with a small "soon" badge on the right so the user knows it's
   a planned area rather than something broken or missing. */
.app-sidebar-nav .folder-tab.sidebar-nav-item.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}
.app-sidebar-nav .folder-tab.sidebar-nav-item.is-disabled:hover {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.sidebar-nav-soon {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* "Empty journal" attention pulse — applied to the Import Data sidebar
   item while localStorage holds zero trades. Amber-CTA idiom (same hue
   as `Needs your input` placeholders) so the user's eye is drawn to the
   first useful action they can take on an empty install. Class is removed
   automatically once the first trade lands. Active-state override below
   prevents the pulse from competing with the selected-tab amber. */
.app-sidebar-nav .folder-tab.sidebar-nav-item.is-empty-attention:not(.active) {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow:
        0 0 0 1px rgba(var(--primary-rgb), 0.18),
        0 0 14px 1px rgba(var(--primary-rgb), 0.18);
    animation: lj-sidebar-empty-pulse 2.6s ease-in-out infinite;
}
.app-sidebar-nav .folder-tab.sidebar-nav-item.is-empty-attention:not(.active):hover {
    box-shadow:
        0 0 0 1px rgba(var(--primary-rgb), 0.32),
        0 0 18px 2px rgba(var(--primary-rgb), 0.28);
}
@keyframes lj-sidebar-empty-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(var(--primary-rgb), 0.14),
            0 0 10px 1px rgba(var(--primary-rgb), 0.12);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(var(--primary-rgb), 0.32),
            0 0 18px 2px rgba(var(--primary-rgb), 0.28);
    }
}

/* Main column: offset by sidebar width */
.app-main {
    margin-left: var(--app-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Navigation Bar — min-height allows the utilities row to wrap without clipping */
.main-nav {
    min-height: 4.5rem;
    height: auto;
    background-color: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
}

.nav-container.nav-container--utilities {
    max-width: var(--content-shell-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-content: flex-end;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-height: 4rem;
    align-items: center;
    align-content: center;
    row-gap: 0.45rem;
}

.nav-container {
    max-width: var(--content-shell-max);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rem;
    height: 100%;
}

.nav-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    letter-spacing: -0.025em;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* ---- Live local clock in top toolbar ----
   Flat trader chip — quiet by default so it doesn't fight the rest
   of the toolbar. Amber is reserved for genuine accents. */
.nav-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    color: var(--text-primary);
    font-family: Outfit, Inter, sans-serif;
    line-height: 1;
    user-select: none;
}

.nav-clock svg { color: var(--text-secondary, #A1A1AA); flex-shrink: 0; }

.nav-clock-time {
    font-weight: 700;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.nav-clock-date {
    font-size: 0.72rem;
    color: var(--text-secondary, #A1A1AA);
    font-weight: 500;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gear icon — make stroke explicitly white so it doesn't blend with
   the dark toolbar like the inherited "currentColor" did. */
#settings-btn svg { color: #ffffff; }
#settings-btn:hover svg { color: var(--primary, #f59e0b); }

.nav-timezone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.nav-timezone-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.nav-timezone-chip:active {
    transform: translateY(1px);
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

#header-timezone-value {
    min-width: 0;
    max-width: min(11rem, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user .auth-btn-text {
    max-width: min(10rem, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* Settings Dropdown */
.nav-settings {
    position: relative;
    display: flex;
    align-items: center;
}

.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: min(260px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Changelog (bell) — narrow tall panel */
.nav-changelog .nav-icon-btn {
    color: var(--text-secondary);
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-changelog .nav-icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.changelog-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F8D440, #B58A00);
    box-shadow: 0 0 0 2px var(--bg-body, #0c0e12);
    pointer-events: none;
}

.changelog-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: min(340px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.changelog-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.changelog-dropdown-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.changelog-dropdown-header {
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-light);
}

.changelog-dropdown-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.changelog-scroll {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px 12px;
    -webkit-overflow-scrolling: touch;
}

.changelog-scroll::-webkit-scrollbar {
    width: 6px;
}

.changelog-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.changelog-block {
    padding: 12px 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 10px;
}

.changelog-block:last-child {
    margin-bottom: 0;
}

.changelog-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.changelog-block-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.changelog-where {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    line-height: 1.4;
    margin: 0 0 8px 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.changelog-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.changelog-badge.improved {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.25);
}

.changelog-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.changelog-list li {
    margin-bottom: 6px;
}

.changelog-list li:last-child {
    margin-bottom: 0;
}

.dropdown-header {
    padding: 8px 16px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.dropdown-item:hover {
    background: var(--bg-hover, #2f2f2f);
}

.dropdown-item.danger-text {
    color: var(--danger);
}

.dropdown-item.danger-text:hover {
    background: rgba(239, 68, 68, 0.1);
}

.folder-tabs {
    display: flex;
    gap: var(--spacing-sm);
    background-color: var(--bg-body);
    /* Adaptive background */
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: background-color 0.3s ease;
}

.folder-tab {
    min-width: 130px;
    text-align: center;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.folder-tab:hover {
    color: var(--text-primary);
}

/* Active Tab with Gradient */
.folder-tab.active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 4px 20px -5px rgba(var(--primary-rgb), 0.3);
    /* Glow effect */
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    font-weight: 600;
}

.daily-trades-shell {
    position: relative;
}

.daily-trades-viewport {
    scrollbar-width: auto;
    scrollbar-color: rgba(245, 158, 11, 0.75) rgba(255, 255, 255, 0.06);
}

.daily-trades-viewport::-webkit-scrollbar {
    width: 12px;
}

.daily-trades-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.daily-trades-viewport::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(252, 211, 77, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%);
    border-radius: 999px;
    border: 2px solid rgba(24, 24, 27, 0.9);
}

.daily-trades-viewport::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(252, 211, 77, 1) 0%, rgba(217, 119, 6, 1) 100%);
}

.daily-trades-fade {
    z-index: 3;
    backdrop-filter: blur(0.5px);
}

.daily-trades-empty {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.18);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Main Content */
.content-area {
    flex: 1;
    max-width: var(--content-shell-max);
    width: 100%;
    margin: 0 auto;
    padding-top: clamp(0.75rem, 1.4vw, 1.5rem);
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
    padding-left: clamp(1.25rem, 4vw, 4rem);
    padding-right: clamp(1.25rem, 4vw, 4rem);
}

/* Trades view: same centered shell as every other journal view so the
   header (title + tabs) stays anchored in the exact same position when
   switching between Yearly / Monthly / Trades / Chart. The trades cards
   and filter rail live inside this stable 1600px shell. */

.folder-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.folder-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Journal Layout */
.journal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, min(340px, 30vw));
    gap: clamp(0.85rem, 1.8vw, 1.5rem);
    align-items: start;
    transition: grid-template-columns 0.3s ease, gap 0.3s ease;
}

/* Year Mode Layout: Sidebars completely removed from flow */
.journal-layout.year-mode,
.journal-layout.daily-view-active {
    grid-template-columns: 1fr;
}

.journal-layout.year-mode .months-sidebar,
.journal-layout.year-mode .weekly-sidebar,
.journal-layout.daily-view-active .weekly-sidebar {
    display: none;
}

/* Daily View Centering */
.daily-view-content {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

/* Ensure sidebars still take up layout space */
/* We don't change grid-template-columns here anymore */

/* Sidebar */
.months-sidebar {
    display: none;
}

/* Weekly Sidebar */
.weekly-sidebar {
    background-color: transparent;
    border-radius: var(--radius-lg);
    position: relative;
    margin-top: 0;
}

.weekly-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    height: auto;
}

.weekly-summary-card {
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    /* Gradient for weekly summary */
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    /* Reduced padding from standard spacing-md if it was large */
    box-shadow: var(--shadow-sm);
    display: none;
    /* Initially hidden, shown by JS after alignment */
    flex-direction: column;
    /* gap: var(--spacing-sm); Removed gap to control height better */
    transition: all 0.2s ease;
    position: absolute;
    /* Absolute positioning for row alignment */
    width: 100%;
    height: 6rem;
    justify-content: space-between;
}

.weekly-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
    /* Fixed small padding */
    margin-bottom: 8px;
}

.weekly-label,
.weekly-year {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.weekly-card-content.centered-content {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    align-items: center;
    justify-content: space-between;
    flex: 1;
    /* Fill remaining height to center vertically */
}

.weekly-stat-row {
    /* Reset width/flex */
    display: flex;
    align-items: center;
    width: auto;
}

.weekly-summary-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.weekly-summary-card.future-week {
    opacity: 0.5;
    background: var(--bg-body);
    /* Match future day */
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    border-color: var(--border-light);
}

.weekly-summary-card.future-week:hover {
    transform: none;
    box-shadow: none;
}

.weekly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.weekly-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.weekly-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.weekly-pnl {
    font-size: 1.1rem;
    font-weight: 700;
}

.weekly-pnl.positive {
    color: var(--success);
}

.weekly-pnl.negative {
    color: var(--danger);
}

.weekly-pnl.neutral {
    color: var(--text-tertiary);
}

.weekly-trades {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sidebar-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-sm);
}

.weekly-sidebar .sidebar-header {
    margin-top: 0;
    /* Align with weekdays header naturally */
}

.nav-btn-highlight {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: black;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: var(--spacing-sm);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    transition: all 0.2s ease;
}

.nav-btn-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

.months-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.month-nav-item {
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.month-nav-item:hover {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.month-nav-item.active {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-weight: 600;
}

/* Calendar Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

/* ---- Pro page header with title + tabs ----
   Used on Journal page so users always see the section name + which
   sub-view is active. Pattern mirrors Linear, Tradezella, GitHub. */
.page-header.page-header--with-title {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 1.5rem;
    row-gap: 0.65rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 0;
}

.page-header.page-header--with-title > .page-title-row { grid-column: 1; grid-row: 1; }
.page-header.page-header--with-title > .view-switcher--tabs { grid-column: 2; grid-row: 1; }

/* The Trades toolbar (Group/Sort/etc) is a sibling inside the same
   header — drop it to row 2, right-aligned, so it doesn't displace
   the tabs and stays on a stable line of its own. */
.page-header.page-header--with-title > .trades-toolbar-host {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    padding-top: 0.4rem;
}

.page-title-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.4rem;
}

.page-title {
    margin: 0;
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.page-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

/* ---- Underline-tab view switcher (replaces pill style on Journal) ---- */
.view-switcher.view-switcher--tabs {
    display: flex;
    gap: 0;
    flex: 0 1 auto;
    align-self: end;
    border-bottom: none;
    margin-bottom: -1px;
    /* Overlap the parent's border so the active underline reads as one
       continuous line with the header divider. */
}

/* P3.5: Chart promoted to its own sidebar entry. When the Chart sidebar
   button takes the user to the journal-page DOM (where the chart actually
   renders), hide the Journal view-switcher tabs so the screen reads as a
   dedicated Chart page. navigateToChart()/navigateToJournal() toggle
   `body.lj-chart-standalone` to drive this. */
body.lj-chart-standalone #journal-page .view-switcher--tabs {
    display: none;
}


.view-switcher--tabs .view-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-secondary, #A1A1AA);
    padding: 0.6rem 1.1rem;
    font-size: 0.86rem;
    font-weight: 600;
    min-width: 0;
    box-shadow: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    letter-spacing: 0.01em;
}

.view-switcher--tabs .view-btn:hover {
    background: transparent;
    color: var(--text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.view-switcher--tabs .view-btn.active {
    background: transparent;
    color: var(--primary, #f5b800);
    border-bottom: 2px solid var(--primary, #f5b800);
    box-shadow: none;
    font-weight: 700;
}

@media (max-width: 720px) {
    .page-header.page-header--with-title {
        grid-template-columns: 1fr;
    }
    .view-switcher.view-switcher--tabs {
        overflow-x: auto;
        scrollbar-width: none;
        align-self: start;
    }
    .view-switcher.view-switcher--tabs::-webkit-scrollbar { display: none; }
}

/* View Switcher */
.view-switcher {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1;
    /* Allow taking space if needed */
}

.view-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    /* Reduced padding */
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    /* Slightly smaller font */
    font-weight: 500;
    transition: all 0.2s ease;
    /* Removed flex: 1 to reduce width */
    text-align: center;
    white-space: nowrap;
    min-width: 100px;
    /* Smaller fixed width */
}

/* New Style for Today Button in Weekly View */
.today-btn {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-left: var(--spacing-sm);
}

.today-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.view-btn:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #000;
    /* Black text on gold is very premium */
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
}

/* Journal: view-switcher is laid out via the grid in the P37 block at the
   bottom of this file (page-header becomes a 3-col grid so the switcher
   sits dead-centered between two divider lines regardless of whether the
   Trades toolbar is visible). Keep flex-wrap / min-width here so wrapping
   still works on tiny viewports.
   IMPORTANT: do NOT add `flex: 1 1 260px` back — it makes the switcher
   stretch and pushes the buttons left-of-center. */
#journal-page #journal-dashboard-header .view-switcher {
    min-width: 0;
}

#journal-page #journal-dashboard-header .trades-toolbar-host {
    flex-wrap: wrap;
    min-width: 0;
}

@media (max-width: 920px) {
    #journal-page .view-btn {
        min-width: min(96px, calc(50% - var(--spacing-sm)));
        flex: 1 1 calc(50% - var(--spacing-sm));
        white-space: normal;
        padding: 0.34rem 0.55rem;
        font-size: 0.76rem;
        line-height: 1.25;
    }
}

/* Dashboard title + subtitle: stay readable when the main column is narrow. */
.dashboard-page-header.page-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.35rem 1rem;
}

.dashboard-page-header .dashboard-subtitle {
    flex: 1 1 12rem;
    margin-left: auto;
    text-align: right;
}

@media (max-width: 640px) {
    .dashboard-page-header .dashboard-subtitle {
        margin-left: 0;
        text-align: left;
        flex-basis: 100%;
    }
}

.stat-badge {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stat-label {
    color: var(--text-tertiary);
    font-weight: 500;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
}

.calendar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex overflow */
    height: 100%;
    overflow: hidden;
    /* Let container handle scroll */
}

.calendar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-right: 5px;
    /* Space for scrollbar */
}



.month-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.month-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.05em;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-light);
}

.weekdays-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.weekday-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.05em;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1100px) {
    .month-grid {
        gap: clamp(6px, 1.8vw, 12px);
    }

    .weekdays-header {
        gap: clamp(6px, 1.8vw, 12px);
    }

    .weekday-header {
        font-size: 0.68rem;
    }
}

.day-rectangle {
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    /* Gradient for empty days */
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    min-height: 110px;
    aspect-ratio: 1.3 / 1;
    /* Height derives from grid column width so cells stay near-square,
       never flatten into billboards. min-height keeps narrow shells usable. */
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    /* Fix for hover issues */
}

.day-rectangle.future-day {
    opacity: 0.5;
    background: var(--bg-body);
    /* Override gradient with solid color */
    cursor: not-allowed;
    pointer-events: none;
    /* Prevents clicks, but hover might be wanted for tooltip? User said block input. */
}

.day-rectangle.weekend-day {
    opacity: 0.3;
    pointer-events: none;
    background: #171717;
    /* Override gradient */
    border-color: #2e2e2e;
}

/* Unified Hover Effect for Active Days */
.day-rectangle:not(.weekend-day):not(.future-day):not(.inactive-month):hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    z-index: 10;
}



.day-rectangle.current-day {
    border: 1px solid var(--primary);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15), inset 0 0 20px rgba(var(--primary-rgb), 0.05);
    /* Outer glow + Inner depth */
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0) 100%);
}

.day-rectangle.inactive-month {
    opacity: 0.5;
    /* Slightly more visible to show color */
    /* filter: grayscale(1); -- Removed to show PnL colors */
    border: 1px dashed var(--border-subtle);
    /* Distinguish border */
}

.day-month-label {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Year View Dashboard - Refined */
.year-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    /* Reduced gap to fit tighter */
    width: 100%;
    /* Remove max-width/margin centering because we are now inside the center column */
    /* max-width: 900px; */
    /* margin: 0 auto; */
    animation: zoomIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: var(--spacing-xl);
}

@media (max-width: 1280px) {
    .year-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .year-dashboard {
        grid-template-columns: 1fr;
    }
}

/* Standardized Animations */
/* Master ENTER Animation: Unfolding / Zoom In */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Master EXIT Animation: Fade Out with Slight Scale */
@keyframes zoomOutScale {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

.animate-zoom-out {
    animation: zoomOutScale 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Apply Unfolding Animation to Day Modal */
.modal.active .modal-content {
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mini-month-card {
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    min-height: 280px;
}

@media (max-width: 680px) {
    .mini-month-card {
        min-height: 240px;
        padding: 0.65rem;
    }

    .mini-month-grid {
        gap: 3px;
    }
}

.mini-month-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* Locked Future Months */
.mini-month-card.future-locked {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.8);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border-color: var(--border-light);
}

/* Highlight Current Month - Glowing Border */
.mini-month-card.current-month {
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
}

.mini-month-card.current-month .mini-month-header {
    color: var(--primary);
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.mini-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    /* Changed to white */
    margin-bottom: var(--spacing-md);
    text-transform: capitalize;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}

.mini-month-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mini-stat-pnl {
    font-weight: 600;
}

/* Ensure colors apply */
.mini-stat-pnl.profit-text {
    color: var(--success);
}

.mini-stat-pnl.loss-text {
    color: var(--danger);
}

.mini-stat-pnl.neutral-text {
    color: var(--text-tertiary);
}

.mini-stat-trades {
    color: var(--text-tertiary);
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    /* Increased padding */
    border-radius: 4px;
}

.mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    flex: 1;
    align-content: start;
}

.mini-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 4px;
}

/* Current Day Highlight - Glowing Outline */
.mini-day.current-day {
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2), inset 0 0 10px rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    /* Make text gold to match the glow */
    font-weight: 700;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
}

/* Highlight today/pnl */
/* Highlight today/pnl */
.mini-day.has-profit {
    color: var(--success);
    font-weight: 700;
    /* Subtle radial gradient like monthly view but lighter */
    background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.1), transparent 70%);
}

.mini-day.has-loss {
    color: var(--danger);
    font-weight: 700;
    /* Subtle radial gradient like monthly view but lighter */
    background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.1), transparent 70%);
}

/* Integrations Page Styles —
   Single import card today; cap width so it doesn't stretch across a wide
   monitor (would look lost) but stays readable on narrow ones. The grid
   layout is kept for forward compat (adding more brokers later). */
.integrations-grid {
    /* Previous values (440px min / 880px max) stretched a single
       integration card across the entire content shell — the user
       called it out as "слишком растянуто". Tradovate's CSV-upload
       card has compact content (icon + title + drop-zone + success
       toast) and reads better at ~520px, so the grid caps near that
       and falls back to a smaller min so a second integration would
       sit side-by-side at wider viewports. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    max-width: 560px;
}

.integration-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    transition: all 0.2s ease;
}

.import-card {
    min-width: 0;
    max-width: 100%;
    padding: 1.5rem 1.5rem 1.6rem;
    gap: 1.1rem;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0) 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.integration-card:hover {
    border-color: var(--text-tertiary);
    box-shadow: var(--shadow-md);
}

.integration-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.integration-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tradovate-icon {
    background-color: #2D3748;
    /* Dark Blue-ish */
    color: #4FD1C5;
    /* Teal */
}

.tradingview-icon {
    background-color: #131722;
    color: #2962FF;
}

.integration-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.integration-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.connection-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-tertiary);
    /* Default gray */
}

.connection-status.connected .status-dot {
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.connection-status.connected .status-text {
    color: var(--success);
}

.connection-status.disconnected .status-dot {
    background-color: var(--text-tertiary);
}

.connection-status.disconnected .status-text {
    color: var(--text-secondary);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.dark-input {
    background-color: var(--bg-body);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.dark-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.integration-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.btn-primary {
    background: var(--primary-gradient);
    color: black;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.integration-footer {
    border-top: 1px solid var(--border-light);
    padding-top: var(--spacing-md);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Day Headers in Mini Month */
.mini-day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    /* Changed to gray */
    text-transform: uppercase;
    margin-bottom: 12px;
    /* Increased spacing */
}

@media (max-width: 680px) {
    .mini-day-header {
        font-size: 0.58rem;
        margin-bottom: 8px;
    }
}

/* Weekend Styling - Greyer/Inactive */
.mini-day.weekend {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Weekly View Specifics */
.weekly-day-rectangle {
    min-height: 300px;
    /* Taller for weekly view */
    display: flex;
    flex-direction: column;
}

/* Disabled Navigation Buttons */
.nav-arrow-btn:disabled,
.nav-arrow-btn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

.weekly-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-arrow-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-arrow-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    /* margin-bottom: auto; Removed for absolute centering of content */
}
.day-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
/* Economic-news badge on calendar days (window.LJNews). */
.day-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: default;
}
.day-news-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.day-news-badge.is-high { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.day-news-badge.is-high::before { background: #ef4444; }
.day-news-badge.is-med { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
.day-news-badge.is-med::before { background: #f59e0b; }
@media (max-width: 1100px) {
    .day-news-badge { font-size: 0.52rem; padding: 2px 4px; }
}

.day-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.current-day .day-date {
    color: var(--primary);
    font-weight: 700;
}

.day-weekday {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.ticker-badge {
    position: absolute;
    top: 32px;
    /* Move below date */
    right: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background-color: #f1f5f9;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.ticker-badge.ES {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.ticker-badge.NQ {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-text);
}

.day-footer {
    display: flex;
    flex-direction: column;
    /* Stack vertically for space */
    gap: 4px;
    align-items: flex-end;
    margin-top: 8px;
}

.day-pnl {
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    line-height: 1.2;
}

.day-pnl.positive {
    color: var(--success);
}

.day-pnl.negative {
    color: var(--danger);
}

.day-pnl.neutral {
    color: var(--text-tertiary);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2.6vw, 22px);
    box-sizing: border-box;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    width: min(92%, calc(100vw - 28px));
    max-width: min(600px, calc(100vw - 28px));
    max-height: min(85vh, calc(100dvh - 40px));
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.modal-title-group h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Ticker Toggle */
.ticker-toggle-container {
    display: flex;
    background-color: var(--bg-body);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.ticker-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ticker-btn:hover {
    color: var(--text-primary);
}

.ticker-btn.active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.close-btn:hover {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Day trade modal (#trade-modal): table scroll + header/footer wrap on tablet/narrow desktop */
#trade-modal .modal-content {
    width: min(92%, calc(100vw - 28px));
    max-width: min(720px, calc(100vw - 28px));
    max-height: min(90vh, calc(100dvh - 24px));
}

#trade-modal .modal-header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

#trade-modal .modal-body {
    overflow-x: hidden;
}

#trade-modal .trades-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#trade-modal .trade-inputs-group {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
}

#trade-modal .modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
}

#trade-modal .modal-summary-card {
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
}

@media (max-width: 520px) {
    #trade-modal .toggle-btn {
        padding: 6px 9px;
        font-size: 0.75rem;
    }
}

/* Table Styles */
.trades-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--spacing-lg);
}

.trades-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.trades-table td {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.trade-number {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}



/* Tooltips */
/* Tooltips */
.trade-tooltip {
    display: none;
    position: fixed;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 12px;
    z-index: 2147483647;
    pointer-events: auto;
    /* Stable width vs P&L text, capped to viewport on narrow desktops */
    width: min(310px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.15s ease;
}



.trade-tooltip.active {
    display: block;
    opacity: 1;
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tooltip-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.ts-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ts-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ts-val {
    font-size: 0.9rem;
    font-weight: 600;
}

.ts-val.positive {
    color: var(--success);
}

.ts-val.negative {
    color: var(--danger);
}

.ts-val.neutral {
    color: var(--text-tertiary);
}

.tooltip-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 10px 0;
}

.tooltip-warning-note {
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(253, 230, 138, 0.82);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.tooltip-empty {
    color: var(--text-tertiary);
    text-align: center;
    font-size: 0.85rem;
    padding: 8px 0;
}

/* Tooltip Interactive List Layout */
.tooltip-trade-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-right: 4px;
}

.tooltip-trade-list::-webkit-scrollbar {
    width: 4px;
}

.tooltip-trade-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.tooltip-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    /* explicit override */
    position: relative;
    z-index: 10;
}

.tooltip-list-item:hover {
    background: rgba(245, 158, 11, 0.1);
    /* Subtle brand color */
    border-color: rgba(245, 158, 11, 0.3);
    transform: translateX(2px);
}

.tli-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltip-tag-missing {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(253, 230, 138, 0.85);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
}

.tooltip-ticker {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.tooltip-ticker.ES {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.tooltip-ticker.NQ {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.tooltip-ticker.YM {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

.tooltip-ticker.RTY {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.tooltip-ticker.CL {
    background: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
}

.tooltip-ticker.GC {
    background: rgba(234, 179, 8, 0.2);
    color: #FACC15;
}

.tooltip-ticker.BTC {
    background: rgba(247, 147, 26, 0.2);
    color: #FBCFE8;
}

.tli-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    width: 70px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.tli-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltip-pnl {
    font-size: 0.8rem;
    font-weight: 600;
    width: 80px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.tooltip-pnl.positive {
    color: var(--success);
}

.tooltip-pnl.negative {
    color: var(--danger);
}

.tooltip-pnl.neutral {
    color: var(--text-secondary);
}

.tli-arrow {
    color: var(--text-tertiary);
    transition: transform 0.2s, color 0.2s;
}

.tooltip-list-item:hover .tli-arrow {
    color: #F59E0B;
    transform: translateX(2px);
}


/* Trade Inputs Group */
.trade-inputs-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Toggle Group Styles */
.toggle-group {
    display: flex;
    background-color: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
}

.toggle-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    border-radius: 4px;
    /* variable radius-sm might be better if defined */
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-btn:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.03);
}

.toggle-btn.active {
    background-color: var(--bg-card);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Ticker Specific Colors - Removed for uniformity */
/* .toggle-group.ticker .toggle-btn.active[data-value="ES"] { color: var(--primary); } */
/* .toggle-group.ticker .toggle-btn.active[data-value="NQ"] { color: var(--success-text); } */

/* Type Specific Colors - Removed for uniformity */
/* .toggle-group.type .toggle-btn.active[data-value="long"] { color: var(--success-text); } */
/* .toggle-group.type .toggle-btn.active[data-value="short"] { color: var(--danger); } */


.trade-pnl-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background-color: var(--bg-body);
    font-family: 'Inter', sans-serif;
    /* Ensure font matches */
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.trade-pnl-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.delete-trade-btn {
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: color 0.2s;
    margin-left: 12px;
    /* Added spacing */
}

.delete-trade-btn:hover {
    color: var(--danger);
    text-decoration: underline;
}

.add-trade-btn {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--bg-body);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-trade-btn:hover {
    background-color: var(--bg-card);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

/* Import-only empty state (replaces the old manual "Add Trade" button). */
.trades-empty-hint {
    margin: 0;
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}
.trades-empty-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--primary, #EFBF04);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.trades-empty-link:hover { color: var(--primary-hover, #C99F03); }

/* Summary Card */
.modal-summary-card {
    background-color: var(--bg-body);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Drag & Drop Trade Merge UI --- */
.trade-accordion-item.drag-over {
    position: relative;
    border-color: rgba(var(--primary-rgb), 0.5) !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15) !important;
}

.merge-cursor-badge {
    position: fixed;
    pointer-events: none;
    /* Let pointer events pass through to the drop target */
    display: none;
    /* Hidden by default */
    background: rgba(18, 18, 20, 0.9);
    backdrop-filter: blur(8px);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--primary-rgb), 0.25);
    text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
    z-index: 9999;
}

.summary-row {
    display: flex;
    flex-direction: column;
}

.summary-row span:first-child {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

.summary-row .pnl-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.summary-row.secondary .pnl-value,
.summary-row.secondary span:last-child {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-body);
    /* Dark theme compatible */
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.btn-cancel {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-light);
    background-color: var(--bg-card);
    /* Match card bg */
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background-color: #f1f5f9;
    color: var(--text-primary);
}

.btn-save {
    padding: 0.5rem 1.5rem;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.btn-save:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

/* Placeholders */
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-light);
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.placeholder-content h2 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.placeholder-content p {
    color: var(--text-secondary);
}

/* Responsive */

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

    .weekly-sidebar {
        display: none;
        /* Can move to bottom or hamburger in future */
    }
}

@media (max-width: 1024px) {
    .journal-layout {
        grid-template-columns: 1fr;
    }

    .months-sidebar {
        display: none;
        /* Hide sidebar on smaller screens for now, or make it horizontal */
    }

    .calendar-wrapper {
        padding: 0;
    }
}

@media (max-width: 768px) {

    .weekdays-header,
    .month-grid {
        gap: var(--spacing-xs);
    }

    .day-rectangle {
        aspect-ratio: 1/1;
        padding: 4px;
        min-height: auto;
    }

    .day-weekday,
    .trade-badge,
    .ticker-badge {
        display: none;
    }

    .day-pnl {
        font-size: 0.75rem;
    }

    .nav-brand {
        font-size: 1rem;
    }

    .folder-tab {
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* View Toggle Button */
.view-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.1);
}

/* Inline Navigation Header (Arrows + Title) */
.inline-nav-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-light);
}

.nav-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 150px;
    text-align: center;
}

.nav-arrow-text-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nav-arrow-text-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    transform: scale(1.1);
}

/* Profit Days: Subtle Green Radial Gradient */
.day-rectangle.day-profit {
    background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.15), transparent 70%);
    /* Very subtle green tint */
}

/* Loss Days: Subtle Red Radial Gradient */
.day-rectangle.day-loss {
    background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.15), transparent 70%);
    /* Very subtle red tint */
}

/* Optional: Slight border tint on hover to reinforce status, but keeping it subtle */



/* Layout for Day Cell Content */
.day-content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* Ensure clicks pass through to the card */
}

/* Absolute Footer for Badge */
.day-footer-absolute {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    justify-content: flex-end;
}

.day-tag-warning {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(253, 230, 138, 0.82);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

/* Update Trade Badge Style */
.trade-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* Hide Number Input Spin Buttons */
.trade-pnl-input::-webkit-outer-spin-button,
.trade-pnl-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.trade-pnl-input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
    appearance: textfield;
    /* Standard */
}

/* Monthly Stats Bar */
.monthly-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    /* Remove gap to let items fill space */
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem 0;
    /* Reduce vertical padding slightly, remove horizontal padding from container */
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.stat-item {
    flex: 1;
    /* Equal width */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content */
    gap: 6px;
    border-right: 1px solid var(--border-light);
    /* Vertical divider */
}

.stat-item:last-child {
    border-right: none;
}

@media (max-width: 900px) {
    .monthly-stats-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        padding: 0;
        overflow: hidden;
        background: var(--border-light);
        border: 1px solid var(--border-light);
    }

    .monthly-stats-bar .stat-item {
        flex: unset;
        border: none;
        background: linear-gradient(180deg, #202020 0%, #171717 100%);
        padding: 0.7rem 0.45rem;
    }

    .monthly-stats-bar .stat-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 420px) {
    .monthly-stats-bar {
        grid-template-columns: 1fr;
    }
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 700;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* User request: Color PnL based on profit/loss */
.stat-value.profit-text {
    color: var(--success);
}

.stat-value.loss-text {
    color: var(--danger);
}

/* Today Button */
.today-btn {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.today-btn:hover {
    border-color: rgba(var(--primary-rgb), 0.6);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15);
}

.today-btn svg {
    transition: stroke 0.2s ease;
}

.mini-stat-pnl {
    font-weight: 700;
}

.mini-stat-sep {
    width: 1px;
    height: 12px;
    background-color: var(--border-light);
}

.mini-stat-wr,
.mini-stat-trades {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Override old styles if any specific ones persist for trades */
.mini-stat-trades {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Upload Zone Styles */
.upload-zone {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 1.2rem 1rem;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.22);
    transition: all 0.2s ease, transform 0.2s ease;
}

#tradovate-upload-zone.upload-zone {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.upload-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 440px;
}

.upload-zone:hover,
.upload-zone.drag-active {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.07);
    transform: translateY(-1px);
}

.upload-icon {
    color: var(--text-tertiary);
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.upload-zone:hover .upload-icon {
    color: var(--primary);
}

.upload-text {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.upload-text span {
    color: var(--primary);
    border-bottom: 1px solid transparent;
}

.upload-text span:hover {
    border-color: var(--primary);
}

.upload-subtext {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

.import-upload-subtext {
    line-height: 1.45;
    margin-top: 4px;
}

.upload-hint {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-tertiary);
    line-height: 1.45;
}

/* File Preview */
.file-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-body);
    border: 1px solid var(--border-light);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.import-card .file-info-card {
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.26);
    border-color: rgba(255, 255, 255, 0.12);
}

.import-card .file-name {
    font-size: 0.92rem;
    font-weight: 600;
}

.file-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.remove-file-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}

.remove-file-btn:hover {
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.1);
}

/* Success Animation */
@keyframes success-pulse {
    0% {
        border-color: var(--border-light);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }

    50% {
        border-color: var(--success);
        box-shadow: 0 0 20px 0 rgba(16, 185, 129, 0.4);
    }

    100% {
        border-color: var(--border-light);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.upload-success {
    animation: success-pulse 1.5s ease-in-out;
}

.integration-card .connection-status.connected {
    color: var(--success);
}

.integration-body {
    padding: 0;
    /* Let children handle padding if needed, or keep standard */
    border-top: 1px solid var(--border-light);
    position: relative;
    /* Anchor for absolute success card */
    min-height: 200px;
    /* Ensure consistent height for overlay */
    display: grid;
    grid-template-areas: "stack";
}

.import-card .integration-body {
    min-height: 320px;
    padding-top: 12px;
}

.import-preview-panel {
    padding: 8px 2px 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.import-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 12px 13px;
}

.import-timezone-label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.import-timezone-help {
    display: block;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    max-width: 100%;
    font-weight: 500;
}

.import-timezone-select {
    background-color: rgba(8, 8, 10, 0.95);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 0.72rem 0.78rem;
    min-height: 48px;
    width: 100%;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.import-timezone-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.import-process-btn {
    width: 100%;
    min-height: 50px;
    padding: 0.95rem 1rem;
    margin-top: 2px;
    font-size: 0.96rem;
    border-radius: 10px;
    font-weight: 700;
}

.daily-tz-settings-btn {
    border: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.daily-tz-settings-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.06);
}

.timezone-settings-content {
    max-width: min(520px, calc(100vw - 28px));
    width: min(92%, calc(100vw - 28px));
}

.timezone-onboarding-content {
    max-width: min(560px, calc(100vw - 28px));
    width: min(92%, calc(100vw - 28px));
    border: 1px solid rgba(245, 158, 11, 0.28);
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.98), rgba(14, 14, 16, 0.97)),
        radial-gradient(120% 90% at 0% 0%, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0) 45%);
}

.tz-onboarding-copy {
    margin-top: 0;
    margin-bottom: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tz-onboarding-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr));
    gap: 0.55rem;
    width: 100%;
}

@media (max-width: 720px) {
    .tz-onboarding-status-row {
        grid-template-columns: 1fr;
    }
}

.tz-status-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    width: 100%;
    min-height: 48px;
    padding: 0.45rem 0.62rem;
    border-radius: 10px;
    border: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.02);
    color: var(--text-tertiary);
    font-size: 0.76rem;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tz-status-chip strong {
    color: var(--text-primary);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.25;
    text-align: left;
}

.tz-status-chip-wide {
    grid-column: 1 / -1;
}

.tz-status-chip.is-pending {
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.045)),
        rgba(245, 158, 11, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(245, 158, 11, 0.25);
}

.tz-status-chip.is-pending strong {
    color: #fbbf24;
}

.tz-onboarding-footer {
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 920px) {
    .tz-onboarding-status-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .import-card {
        min-width: 0;
        padding: 1.1rem;
    }
    #tradovate-upload-zone.upload-zone {
        min-height: 220px;
    }
}

.integration-body>* {
    grid-area: stack;
    width: 100%;
}

/* Import Success Card - Overlay Mode */
.import-success-card {
    position: absolute;
    inset: 0;
    z-index: 10;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(6, 13, 12, 0.995), rgba(8, 14, 13, 0.99)),
        radial-gradient(110% 80% at 0% 0%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 42%);
    border: 1px solid rgba(16, 185, 129, 0.28);
    animation: fadeIn 0.3s ease;
    overflow: hidden;
}

/* Add green border only to the success state to differentiate */
.import-success-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(16, 185, 129, 0.2);
    opacity: 1;
    pointer-events: none;
    border-radius: 14px;
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    padding: 0.72rem 0.65rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    max-height: 100%;
    overflow: hidden;
}

.success-icon-large {
    color: var(--success);
    margin-bottom: 0;
    /* Let gap handle it */
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.25));
}

.import-success-card h4 {
    margin: 4px 0 2px 0;
    font-size: 1.5rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.import-success-details {
    width: 100%;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.import-success-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
}

.import-success-line {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.import-success-main {
    font-size: 0.96rem;
    color: var(--text-primary);
}

.import-success-range {
    font-size: 0.86rem;
    color: var(--text-tertiary);
}

.import-success-note {
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

.import-success-status {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.import-success-stats {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.import-success-stat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.73rem;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    padding: 3px 8px;
}

.import-tz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.35;
    color: #D1FAE5;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 5px 9px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.import-tz-badge-fallback {
    color: #FDE68A;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.36);
}

.import-tz-badge-manual {
    color: #E5E7EB;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.success-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(16, 185, 129, 0.1);
}

.progress-fill {
    height: 100%;
    background: var(--success);
    width: 0%;
    transition: width linear;
}

.import-success-skip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #D1FAE5;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.import-success-skip:hover {
    background: rgba(16, 185, 129, 0.24);
    border-color: rgba(16, 185, 129, 0.6);
    color: #ECFDF5;
}

.import-success-skip:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.6);
    outline-offset: 2px;
}

.import-processing-card {
    position: absolute;
    inset: 0;
    z-index: 11;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(6, 13, 12, 0.995), rgba(8, 14, 13, 0.99)),
        radial-gradient(110% 80% at 0% 0%, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0) 42%);
    border: 1px solid rgba(59, 130, 246, 0.28);
    animation: fadeIn 0.2s ease;
    overflow: hidden;
}

.processing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0.75rem;
    text-align: center;
}

.processing-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(59, 130, 246, 0.18);
    border-top-color: #3B82F6;
    animation: importSpin 0.85s linear infinite;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.25));
}

.import-processing-card h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.processing-details {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 320px;
}

@keyframes importSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Force Chart Height */
#tv-hero-chart {
    min-height: min(500px, max(280px, 52vh)) !important;
    height: min(60vh, 640px) !important;
    background: #131315;
    /* Match chart bg */
    display: block;
    position: relative;
}

.day-rectangle.weekly-day-rectangle.collapsed {
    height: 48px !important;
    /* Force override */
    min-height: 0 !important;
    /* Reset any persistent min-height */
    opacity: 0.6;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    justify-content: center;
    cursor: default;
    padding: 0 var(--spacing-md);
}

/* Allow click indication if not future */
.day-rectangle.weekly-day-rectangle.collapsed:not(.future-day):hover {
    opacity: 0.8;
    border-color: var(--border-light);
    cursor: pointer;
}

/* Weekly View Vertical Layout */
.weekly-vertical-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.day-rectangle.weekly-day-rectangle {
    width: 100%;
    height: 144px;
    /* 3x collapsed height (48px * 3) */
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
}

.day-rectangle.weekly-day-rectangle .day-header {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: 0;
    /* Remove bottom margin from header */
    width: 150px;
    /* Fixed width for date */
}

.day-rectangle.weekly-day-rectangle .day-content-center {
    position: static;
    transform: none;
    width: auto;
    flex: 1;
    /* Take simplified space */
    justify-content: center;
    /* Center PnL */
}

.day-rectangle.weekly-day-rectangle .day-footer-absolute {
    position: static;
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-end;
}

/* Weekly Split View Layout */
.weekly-view-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    /* Adjusted layout: 60% Days / 40% Stats as per red line */
    gap: var(--spacing-xl);
    align-items: start;
}

.weekly-stats-panel {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
    /* Prevention for grid overflow */
}

.stats-card-container {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    width: 100%;
    /* Force full width */
    box-sizing: border-box;
}

.stats-card-container.chart-card {
    height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 44px;
    margin-bottom: var(--spacing-md);
}

.chart-card-title {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.stats-card-container:not(.chart-card) h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.chart-card-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.chart-canvas {
    width: 100%;
    height: 100%;
}

/* --- Drag and Drop Visual States for Accordion --- */
.trade-accordion-item.dragging {
    opacity: 0.5;
    background: var(--bg-hover) !important;
    transform: scale(0.99);
    z-index: 100;
}

.trade-accordion-item.drag-over {
    border: 2px dashed #F59E0B !important;
    /* Golden border for target */
    background: rgba(245, 158, 11, 0.05) !important;
    transform: scale(1.01);
}

.timeframe-controls {
    display: flex;
    gap: 8px;
    background: var(--bg-card-secondary);
    padding: 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.timeframe-btn {
    background: transparent;
    color: var(--text-tertiary);
    border: none;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeframe-btn.active {
    background: var(--primary-gradient);
    color: #fff;
}

/* Equity Chart */
.equity-chart,
.daily-pnl-chart {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.chart-scroll.days {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: #3f3f46 #18181b;
    scrollbar-width: thin;
    padding-bottom: 0;
    overscroll-behavior-x: contain;
    width: 100%;
    height: 100%;
}

.chart-scroll-inner {
    height: 100%;
    width: fit-content;
}

.chart-scroll.days::-webkit-scrollbar {
    height: 10px;
}

.chart-scroll.days::-webkit-scrollbar-track {
    background: #18181b;
    border-radius: 999px;
}

.chart-scroll.days::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 999px;
    border: 2px solid #18181b;
}

.chart-scroll.days::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* .equity-chart.equity-chart-days { height: 500px !important; } - Reverted */

/* Advanced Metrics Grid */
.adv-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.metric-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-box .label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 600;
}

.metric-box .value {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.metric-box .value.good {
    color: var(--success);
}

.metric-box .value.bad {
    color: var(--danger);
}

.metric-box .value.positive {
    color: var(--success);
}

.metric-box .value.negative {
    color: var(--danger);
}

/* Responsive */
@media (max-width: 1024px) {
    .weekly-view-layout {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }
}

@media (max-width: 768px) {

    .nav-container,
    .nav-container.nav-container--utilities,
    .content-area {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Chart Animations */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 1;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 1;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.chart-animate {
    animation: fadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chart-slide-next {
    animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.chart-slide-prev {
    animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Weekly View (Rebuilt) */
.wj-weekly {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
}

.wj-weekly>* {
    min-width: 0;
}

.wj-weekly-left,
.wj-weekly-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .wj-weekly {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .wj-weekly {
        grid-template-columns: 1fr;
    }
}

.wj-weekdays {
    display: grid;
    gap: 1rem;
}

.wj-daycard {
    display: grid;
    grid-template-columns: 1.6fr 0.2fr 1.6fr;
    gap: 1.2rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    min-height: 170px;
    align-items: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.wj-daycard:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.wj-daycard-today {
    border-color: rgba(var(--primary-rgb), 0.6);
    box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.15), inset 0 0 15px rgba(var(--primary-rgb), 0.05);
}

.wj-daycard-future {
    opacity: 0.7;
    border-style: dashed;
    cursor: default;
}

.wj-daycard-left {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.6rem;
    min-width: 0;
    color: var(--text-secondary);
}

.wj-daycard-right {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.wj-daycard-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.wj-date {
    font-weight: 600;
    color: var(--text-primary);
}

.wj-weekday {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-tertiary);
}

.wj-pnl {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.wj-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0.4rem;
    margin-top: 0.25rem;
}

.wj-kpi-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}

.wj-kpi-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.wj-kpi-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.wj-pos {
    color: var(--success);
}

.wj-neg {
    color: var(--danger);
}

.wj-meta {
    font-size: 0.85rem;
}

.wj-notes {
    width: 100%;
    min-height: 70px;
    height: 70%;
    resize: vertical;
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.wj-notes:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.18);
}

.wj-future-label {
    font-style: italic;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.wj-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(200, 165, 85, 0.15);
    color: var(--primary);
    width: fit-content;
}

.wj-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wj-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    /* border-bottom: 1px solid var(--border-light); */
}

.wj-card-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.wj-pills {
    display: flex;
    gap: 0.5rem;
}

.wj-pills button {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
}

.wj-pills button.active {
    border-color: var(--primary);
    color: var(--primary);
}

.wj-card-body {
    /* Fixed Height for 1080p optimization */
    height: 290px;
    padding: 0.75rem 1rem 1rem;
    flex: 1 1 auto;
    display: flex;
}

.wj-chart {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.wj-chart svg {
    shape-rendering: geometricPrecision;
}

.draw-toolbar {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    background: rgba(24, 24, 27, 0.9);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px;
    z-index: 6;
}

.draw-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: #1f1f1f;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.draw-tool-btn::after,
.chart-tool-btn::after {
    content: attr(title);
    position: absolute;
    bottom: -130%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.draw-tool-btn:hover::after,
.chart-tool-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.draw-tool-btn svg {
    width: 18px;
    height: 18px;
}

.draw-tool-btn.active {
    background: var(--primary);
    color: #111;
    border-color: var(--primary);
}

.chart-tools-vertical {
    position: absolute;
    top: 58px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(24, 24, 27, 0.9);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px;
    z-index: 6;
    overflow: visible;
    /* Ensure tooltip can pop out to the right */
}

.chart-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: #1f1f1f;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Tooltip offset specifically for chart tools (vertical) */
.chart-tool-btn::after {
    bottom: auto;
    left: 130%;
    /* Pop out to the right */
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.chart-tool-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.chart-tool-btn svg {
    width: 18px;
    height: 18px;
}

.chart-tool-btn.active {
    background: var(--primary);
    color: #111;
    border-color: var(--primary);
}

.wj-chart-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.wj-chart-scroll-inner {
    height: 100%;
    width: fit-content;
}

/* --- Chart Headers Fix --- */
.chart-card-header,
.wj-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    width: 100%;
}

/* Ensure title groups don't shrink */
.chart-card-header>div:first-child,
.wj-card-header>div:nth-child(1) {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ensure PnL aligns with title baseline or center */
.chart-card-header h3,
.wj-card-header h3 {
    margin: 0;
    line-height: 1;
}

/* Navigation Pills Container */
.timeframe-controls,
.wj-pills {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

/* PnL Counter styling (Frame) */
#cumulativePnlDisplay {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    /* Slightly larger padding for "frame" feel */
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background-color: rgba(255, 255, 255, 0.03);

    font-family: 'Inter', monospace;
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    min-width: 80px;
    text-align: center;
    transition: all 0.2s ease;
}

/* Dynamic styling based on attribute selectors matching inline styles set by JS */
span[style*="rgb(16, 185, 129)"],
span[style*="#10b981"] {
    border-color: rgba(16, 185, 129, 0.4) !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

span[style*="rgb(239, 68, 68)"],
span[style*="#ef4444"] {
    border-color: rgba(239, 68, 68, 0.4) !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

/* Start Balance Button Fix */
.start-balance-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.start-balance-btn:hover {
    border-color: rgba(var(--primary-rgb), 0.6);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15);
}

/* Chart Header Controls */
.chart-controls {
    position: absolute;
    top: -45px;
    /* Move up into header area */
    right: 0px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    opacity: 0.8;
    /* Slightly less prominent */
    transition: opacity 0.2s;
}

.chart-controls:hover {
    opacity: 1;
}

.chart-toggle-label {
    font-size: 0.65rem;
    /* Smaller text */
    color: #71717a;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 26px;
    /* Smaller width */
    height: 16px;
    /* Smaller height */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3f3f46;
    transition: .2s;
    border-radius: 16px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    /* Smaller knob */
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: #e4e4e7;
    transition: .2s;
    border-radius: 50%;
}

input:checked+.toggle-slider {
    background-color: #EAB308;
}

input:checked+.toggle-slider:before {
    transform: translateX(10px);
    /* Adjusted for new width */
    background-color: #fff;
}

/* SVG Chart Animations */
.chart-header-rect,
.chart-column-bg {
    transition: fill 0.2s ease, stroke 0.2s ease, opacity 0.2s ease;
}

/* --- Daily View Styles --- */
.journal-layout.daily-mode {
    display: block;
    /* Remove grid to allow full width */
}

.daily-view-wrapper {
    width: 100%;
    max-width: none;
    /* Remove constraint for full width */
    margin: 0;
    padding: 1.5rem;
    /* Slightly more padding */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ... existing styles ... */

/* --- Pro Daily View Layout --- */

/* 1. Hero Chart Section */
.hero-chart-section {
    width: 100%;
    height: 60vh;
    /* Dominant screen real estate */
    min-height: 500px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin-bottom: 24px;
    position: relative;
    display: block;
    /* Ensure block display for iframe */
    overflow: hidden;
    /* Clean edges */
}

/* 2. Bottom Analysis Grid */
.pro-bottom-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Trades Table (Wide) | Analytics (Narrow) */
    gap: 24px;
    min-height: 400px;
}

/* 3. Analytics Console (Right Side) */
.analytics-console {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Secondary Stats Grid */
.secondary-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-card-compact {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px;
}

.stat-card-compact .label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-card-compact .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Compact Table overrides */
.trade-data-table.compact th,
.trade-data-table.compact td {
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* KPI Header (Top Bar) */
.daily-kpi-bar {
    display: grid;
    /* Use grid for responsive full width */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* Auto-fit columns */
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Remove min-width to let grid handle it */
}

.kpi-card .label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.kpi-card .value {
    font-size: 1.8rem;
    /* Larger font */
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}

/* --- Developer Console --- */
.dev-console {
    position: fixed;
    top: 60px;
    right: clamp(10px, 2vw, 20px);
    width: min(400px, calc(100vw - 32px));
    height: min(500px, calc(100vh - 88px));
    max-height: calc(100vh - 72px);
    background: rgba(10, 10, 12, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    font-family: 'Consolas', 'Monaco', monospace;
}

.dev-console-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.dev-console-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dev-actions button {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.dev-actions button:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.dev-console-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 10px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Custom Scrollbar for Console */
.dev-console-body::-webkit-scrollbar {
    width: 6px;
}

.dev-console-body::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.log-entry {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 8px;
    animation: fadeIn 0.2s ease-out;
}

.log-time {
    color: var(--text-tertiary);
    opacity: 0.5;
    min-width: 60px;
    font-size: 0.75rem;
}

.log-source {
    color: var(--primary);
    font-weight: bold;
    min-width: 80px;
}

.log-msg {
    color: var(--text-secondary);
    word-break: break-word;
}

.log-entry.error .log-msg {
    color: #f23645;
}

.log-entry.success .log-msg {
    color: #089981;
}

.log-entry.warning .log-msg {
    color: #eab308;
}

.log-entry.system .log-msg {
    color: #a1a1aa;
    font-style: italic;
}

/* Timeframe Buttons */
.timeframe-btn.active {
    background: var(--primary) !important;
    color: #000 !important;
    border-color: var(--primary) !important;
    font-weight: 600;
}

/* --- Year Mode Overrides --- */
.journal-layout.year-mode .calendar-container {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    /* Yearly view: let the PAGE scroll, not an inner container. Without this
       the cards swallow wheel events because calendar-container is its own
       scroll region with overscroll-behavior:contain — moving the cursor
       over a month card stopped the wheel from reaching the page. */
    overflow-y: visible;
    overscroll-behavior-y: auto;
    padding: 0;
    height: auto;
    min-height: 100%;
}

.year-dashboard {
    width: 100%;
    flex: 1;
    margin: 0;
}

.year-dashboard .dashboard-card {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    background-color: #1a1a1a;
    /* Darker card background from screenshot */
}

.year-dashboard .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Day Cell Hover */
.year-day-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.year-day-cell:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Yearly Stats Bar (Unique Class) */
.yearly-stats-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px 0;
    margin-bottom: 20px;
    display: grid;
    align-items: center;
}

/* Full Width Override for Year View */
/* Yearly view uses the same centered shell as Monthly/Chart for visual
   consistency. Override removed — content-area max-width stays at
   --content-shell-max (1600). */
.content-area.year-view-active {
    /* intentionally empty */
}

/* Nav Header & Buttons (Ensuring consistency with other views) */
.month-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin-bottom: 20px;
}

.nav-arrow-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.nav-arrow-btn:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
    background: var(--bg-body);
}

.dashboard-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-pill {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    min-width: 100px;
}

.stat-pill.profit .value {
    color: var(--success);
}

.stat-pill.loss .value {
    color: var(--danger);
}

.stat-pill .label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-pill .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Chart Controls - Mimic Main View Switcher */
.chart-controls-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(24, 24, 27, 0.9);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 6px;
}

.chart-btn-group {
    display: flex;
    gap: 6px;
}

.chart-toggle-btn {
    background: #1f1f1f;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    height: 28px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    text-align: center;
    line-height: 1;
}

.chart-toggle-btn:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
    background: #2a2a2d;
}

.chart-toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #111;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: clamp(12px, 3vw, 24px);
    right: clamp(12px, 3vw, 24px);
    left: auto;
    max-width: min(440px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
    box-sizing: border-box;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    font-weight: 500;
    max-width: 100%;
    box-sizing: border-box;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.toast-error {
    border-left: 4px solid var(--danger);
}

.toast.toast-success {
    border-left: 4px solid var(--success);
}

.toast.toast-warning {
    border-left: 4px solid var(--warning);
}

.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* --- Custom Confirm Modal Styles --- */
#custom-confirm-modal .confirm-modal-shell {
    max-width: min(450px, calc(100vw - 28px)) !important;
    width: min(92%, calc(100vw - 28px));
}

#custom-confirm-modal .modal-body {
    padding-bottom: 24px;
}

#custom-confirm-modal #confirm-message {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

#custom-confirm-modal .confirm-modal-shell .modal-footer {
    flex-wrap: wrap;
}
#data-management-modal .dm-modal-shell {
    max-width: min(620px, calc(100vw - 28px)) !important;
    width: min(94%, calc(100vw - 28px));
}

#data-management-modal .modal-footer {
    flex-wrap: wrap;
}

#data-management-modal .dm-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#data-management-modal .dm-date-row .input-group {
    flex: 1 1 220px;
    min-width: 0;
}

#data-management-modal .dm-danger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#data-management-modal .dm-danger-row > div:first-child {
    flex: 1 1 min(260px, 100%);
    min-width: 0;
}

.merge-modal-shell {
    max-width: min(740px, calc(100vw - 28px)) !important;
    width: min(96%, calc(100vw - 28px));
    background: rgba(18, 18, 20, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
}

.merge-compare-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    text-align: center;
    justify-content: center;
}

.merge-compare-row > div[style*='flex'] {
    flex: 1 1 148px !important;
    max-width: 100%;
    box-sizing: border-box;
}

#merge-confirmation-modal .modal-body {
    overflow-x: auto;
    max-width: 100%;
}

/* Merge modal: opened via inline display:flex — match shell padding / wrap */
#merge-confirmation-modal {
    padding: clamp(8px, 2.6vw, 22px);
    box-sizing: border-box;
}

#merge-confirmation-modal[style*='display: flex'] {
    justify-content: center;
    align-items: center;
}

#merge-confirmation-modal .merge-modal-shell .modal-header {
    gap: var(--spacing-md);
    align-items: flex-start;
}

#merge-confirmation-modal .merge-modal-shell .modal-header h3 {
    flex: 1 1 min(260px, 100%);
}

#merge-confirmation-modal .merge-modal-shell .modal-footer {
    flex-wrap: wrap;
}

/* --- Danger Area Subtle Accents --- */
.danger-zone {
    border: 1px solid rgba(239, 68, 68, 0.15);
    background: linear-gradient(145deg, var(--bg-hover) 0%, rgba(239, 68, 68, 0.04) 100%);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.danger-zone:hover {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(145deg, var(--bg-hover) 0%, rgba(239, 68, 68, 0.08) 100%);
}

.danger-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--danger);
    box-shadow: 0 0 10px var(--danger);
    opacity: 0.85;
}

.danger-btn-outline {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 500;
}

.danger-btn-outline:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.danger-btn-solid {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.85) 0%, rgba(153, 27, 27, 0.85) 100%);
    color: white;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-family: inherit;
    font-weight: 600;
    padding: 10px;
    border-radius: var(--radius-sm);
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.danger-btn-solid:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 1) 0%, rgba(153, 27, 27, 1) 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
    border-color: rgba(239, 68, 68, 0.6);
}

/* --- User Dashboard (landing) --- */
.dashboard-page-header {
    /* Use the standard page-header--with-title spacing — no extra padding. */
    margin-bottom: 0.75rem;
}

.dashboard-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 450;
}

.user-dashboard-root {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.5rem clamp(1.25rem, 3vw, 2.5rem) 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ---- First-run empty state ----
   Replaces the full dashboard when there are no trades. Centered card
   with focus-pulling icon, copy and two CTAs. Hints below explain what
   the dashboard will surface once data flows in. */
.dash-empty-state {
    margin: clamp(2rem, 6vh, 4rem) auto;
    max-width: 560px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
    background: linear-gradient(160deg, rgba(28, 28, 32, 0.7) 0%, rgba(14, 14, 17, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.dash-empty-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: var(--primary, #f59e0b);
    margin-bottom: 0.4rem;
}

.dash-empty-title {
    margin: 0;
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.dash-empty-sub {
    margin: 0;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 44ch;
}

.dash-empty-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.4rem;
}

.dash-empty-hints {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    max-width: 380px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1rem;
}

.dash-empty-hints li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.85rem;
    align-items: center;
    text-align: left;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.85rem;
}

.dash-empty-hint-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary, #f59e0b);
    border: 1px solid rgba(245, 158, 11, 0.18);
}

/* =====================================================================
   Dashboard v3 — hero + curve + heatmap + recent. Replaces the v2
   "10-KPI + welcome strip" layout. Older v2 classes (.dash-welcome*,
   .dash-kpi-row, .dash-streak-card, .dash-per-ticker-*) are kept below
   purely for older callers / fallback so a stale render path can't
   crash the page; they're not produced by renderUserDashboard anymore.
   ===================================================================== */

/* ---- Hero row ---- */
.dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.85) 0%, rgba(15, 15, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
    align-items: center;
}

.dash-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.dash-hero-pnl-row {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.dash-hero-pnl {
    font-family: Outfit, Inter, sans-serif;
    /* P3.5: bumped baseline + max — PnL is the headline metric on the
       dashboard, deserves more visual weight. */
    font-size: clamp(2.75rem, 5vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-hero-pnl.profit-text { color: #10b981; }    /* emerald, calmer than #22c55e */
.dash-hero-pnl.loss-text   { color: #ef4444; }

.dash-hero-period-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #A1A1AA);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.dash-hero-meta {
    font-size: 0.88rem;
    color: var(--text-secondary, #A1A1AA);
}

.dash-streak-inline {
    color: var(--text-primary);
    font-weight: 600;
}

/* P42 — Hero KPI strip (trades / days / streaks).
   Each stat is a small uppercase label above a bold value, with a thin
   vertical divider between them. Same visual language used by the
   Analytics hero strip — trades / days / streaks read as proper KPIs
   instead of muted footnote text below the P&L number. */
.dash-hero-stats {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
}
.dash-stat:first-child { padding-left: 0; }
.dash-stat:last-child  { border-right: 0; padding-right: 0; }

.dash-stat-k {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
}

.dash-stat-v {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dash-stat-unit {
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 2px;
}

.dash-hero-right {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.dash-hero-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dash-hero-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    min-width: 0;
    position: relative;
}

/* Custom tooltip — appears above the KPI card on hover.
   Uses ::after for the bubble and ::before for the arrow.
   Native `title` attr is intentionally avoided (ugly OS default). */
.dash-hero-kpi[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0e0e11;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.dash-hero-kpi[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: rgba(var(--primary-rgb), 0.22);
    z-index: 201;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.dash-hero-kpi[data-tooltip]:hover::after,
.dash-hero-kpi[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.dash-hero-kpi-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary, #A1A1AA);
}

.dash-hero-kpi-val {
    font-family: Outfit, Inter, sans-serif;
    /* P3.5: KPI numbers bumped — win-rate / profit-factor / expectancy /
       max-drawdown are scanned alongside PnL, scale them up so the row
       reads as a single header-strip not as fine print under PnL. */
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-hero-kpi-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
}

/* ---- Period switcher (1W / 1M / 3M / YTD / ALL) ---- */
.dash-period-switcher {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    align-self: end;
    width: fit-content;
    margin-left: auto;
}

.dash-period-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary, #A1A1AA);
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
    letter-spacing: 0.02em;
}

.dash-period-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.dash-period-btn.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}

/* ---- Equity curve (large) ----
   Chained selector (`.dash-equity-wrap.dash-equity-wrap--large`) gives
   us higher specificity than the legacy `.dash-equity-wrap` rule below
   in the file. Without it, v2's `height: 180px` was still winning. */
.dash-equity-wrap.dash-equity-wrap--large {
    width: 100%;
    height: clamp(240px, 32vh, 360px);
    position: relative;
}

.dash-equity-wrap.dash-equity-wrap--large .dash-equity-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- Bottom grid v3: heatmap + recent ---- */
.dash-bottom-grid.dash-bottom-grid--v3 {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1rem;
}

.dash-heatmap-card {
    padding: 1.1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.7) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-width: 0;
}

.dash-heatmap-wrap {
    overflow-x: auto;
    padding-top: 0.4rem;
}

/* Note: canonical .dash-heatmap-svg sizing is in the v5-compact block
   below (line ~6297). An earlier duplicate lived here and silently
   shadowed the media-query height overrides — removed to keep one
   source of truth. */

/* ---- Donut + pie grid ---- */
.dash-donuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dash-donut-body {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.dash-donut-svg-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-donut-svg-wrap svg {
    /* No drop-shadow — leaders keep donuts visually flat. */
    filter: none;
}

.dash-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.dash-donut-legend li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: var(--text-secondary, #A1A1AA);
}

.dash-donut-legend strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dash-legend-pct {
    color: var(--text-secondary, #A1A1AA);
    font-weight: 600;
    font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: center;
}

.dash-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dash-legend-dot.is-win  { background: rgba(16, 185, 129, 0.95); }
.dash-legend-dot.is-loss { background: rgba(239, 68, 68, 0.95); }
.dash-legend-dot.is-be   { background: rgba(148, 163, 184, 0.55); }

.dash-legend-empty {
    color: var(--text-secondary);
    font-style: italic;
    grid-column: 1 / -1;
    text-align: left;
    font-size: 0.82rem;
}

@media (max-width: 1280px) {
    .dash-donuts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .dash-donut-body { grid-template-columns: 1fr; }
}

/* ---- Equity-section ---- */
.dash-equity-section {
    position: relative;
    padding: 1.25rem 1.5rem 1.5rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.85) 0%, rgba(15, 15, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

/* =====================================================================
   Dashboard v5 compact — fits a 1080-tall viewport without scroll.
   Layout:
     row 1 (hero ~150px)       big P/L + ticker chips + KPIs + period
     row 2 (main grid ~280px)  equity (2fr) + WL donut + Symbol donut
     row 3 (bottom ~240px)     heatmap + recent (4 rows)
   Drops: daily-PL bars, day-of-week chart, quick-nav card.
   ===================================================================== */

.dash-hero.dash-hero--compact { gap: 1.5rem; padding: 1rem 1.25rem; }
/* P3.5: compact variant — bumped to keep PnL prominent (was 1.85-2.5rem;
   now 2.5-3.5rem). Pairs with the bigger KPI numbers. */
.dash-hero.dash-hero--compact .dash-hero-pnl { font-size: clamp(2.5rem, 4vw, 3.5rem); }

.dash-meta-item strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Ticker chips in hero — quick "what did I trade and how many" view */
.dash-ticker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.dash-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-secondary, #A1A1AA);
}

.dash-ticker-chip strong {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dash-ticker-chip .dash-ticker-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
}

.dash-ticker-chip .dash-ticker-pct {
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-ticker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-ticker-chip--empty { color: rgba(148, 163, 184, 0.5); font-style: italic; }

/* Main 3-column grid: equity dominant + two donut sidekicks */
.dash-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem;
}

/* P3.5: 2-col variant (after Win/Loss donut removal). Equity gets ~70%
   of width, By-Symbol donut fills the right side. */
.dash-main-grid.dash-main-grid--two-col {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}

.dash-equity-section--compact {
    padding: 0.85rem 1.1rem 1rem;
    border-radius: 12px;
}

.dash-equity-wrap.dash-equity-wrap--compact {
    width: 100%;
    height: 240px;
    position: relative;
}

.dash-equity-wrap.dash-equity-wrap--compact .dash-equity-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Compact donut tweaks */
.dash-card.dash-card--donut-compact {
    padding: 0.85rem 1rem 1rem;
    border-radius: 12px;
}

.dash-donut-body.dash-donut-body--compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* P42 — "Volume by symbol" upgraded layout.
   Side-by-side donut + richer legend (count + percentage). Donut is
   bigger and vertically centered in its column so the card feels
   intentional instead of cramped. */
.dash-card--symbol-v2 .dash-symbol-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 0.5rem 0.25rem 0.25rem;
}

.dash-card--symbol-v2 .dash-symbol-donut-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-card--symbol-v2 .dash-symbol-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dash-card--symbol-v2 .dash-symbol-legend li {
    display: grid;
    grid-template-columns: 10px auto 1fr auto auto;
    align-items: baseline;
    gap: 8px;
    font-size: 0.86rem;
    line-height: 1.2;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dash-card--symbol-v2 .dash-symbol-legend li:last-child { border-bottom: 0; }

.dash-symbol-leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    align-self: center;
}

.dash-symbol-leg-name {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    font-size: 0.92rem;
}

.dash-symbol-leg-count {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.dash-symbol-leg-sep {
    color: rgba(255, 255, 255, 0.25);
    padding: 0 2px;
}

.dash-symbol-leg-pct {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

/* Narrow viewports: donut stacks above legend. */
@media (max-width: 720px) {
    .dash-card--symbol-v2 .dash-symbol-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* P43-A — Per-symbol scoreboard table.
   Sits beneath the donut + legend. Closes the loop: donut tells you
   "where the volume is", this table tells you "where the money is +
   how clean the wins are" with net P&L, win rate, avg/trade per symbol. */
.dash-card--symbol-v2 .dash-symbol-scoreboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-symbol-scoreboard-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
}

.dash-symbol-scoreboard-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.dash-symbol-scoreboard {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.86rem;
}

.dash-symbol-scoreboard thead th {
    text-align: right;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dash-symbol-scoreboard thead th.dash-sb-sym { text-align: left; }

.dash-symbol-scoreboard tbody td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}
.dash-symbol-scoreboard tbody tr:last-child td { border-bottom: 0; }

.dash-symbol-scoreboard tbody td.dash-sb-sym {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.dash-sb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.dash-symbol-scoreboard tbody td.dash-sb-wr {
    color: rgba(255, 255, 255, 0.75);
}

.dash-donut-legend.dash-donut-legend--compact {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    justify-content: center;
    font-size: 0.78rem;
}

.dash-donut-legend.dash-donut-legend--compact li {
    grid-template-columns: 10px auto auto;
    gap: 0.4rem;
}

/* Compact bottom: heatmap + recent (2-col, heatmap wider).
   `align-items: stretch` keeps both card bottoms flush — recent trades
   row count is tuned to be close to heatmap natural height, then stretch
   irons out the small remaining gap. */
.dash-bottom-grid.dash-bottom-grid--v4 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0.85rem;
}

.dash-heatmap-section.dash-heatmap-section--compact {
    padding: 0.85rem 1.1rem 1rem;
    border-radius: 12px;
}

.dash-recent-card.dash-recent-card--compact {
    padding: 0.85rem 1.1rem 1rem;
    border-radius: 12px;
}

.dash-recent-card.dash-recent-card--compact .dash-recent-row {
    padding: 0.45rem 0.55rem;
    margin: 0 -0.55rem;
    font-size: 0.82rem;
}

/* Narrow-screen fallback: stack everything */
@media (max-width: 1280px) {
    .dash-main-grid { grid-template-columns: 1fr 1fr; }
    .dash-main-grid .dash-equity-section--compact { grid-column: 1 / -1; }
    .dash-bottom-grid.dash-bottom-grid--v4 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .dash-main-grid { grid-template-columns: 1fr; }
}

/* ---- Wide-screen scale-up (QHD / ultrawide) ----
   Mirrors what Trades view does — widens the content shell ONLY on
   Dashboard so the layout fills a bigger monitor instead of leaving
   a tall empty band below the recent-trades card. Plus all the inner
   visualisations grow proportionally so the wider canvas isn't wasted
   on more whitespace. */
@media (min-width: 2100px) {
    .content-area:has(#user-dashboard-root) {
        max-width: 1920px;
    }
    /* Hero gets more breathing room + bigger P/L */
    .dash-hero.dash-hero--compact .dash-hero-pnl { font-size: 3.2rem; }
    .dash-hero.dash-hero--compact { padding: 1.4rem 1.75rem; }
    .dash-hero-kpi-val { font-size: 1.5rem; }
    .dash-hero-kpi-label { font-size: 0.7rem; }
    .dash-ticker-chip { font-size: 0.88rem; padding: 6px 12px; }

    /* Equity panel grows vertically + horizontally */
    .dash-equity-wrap.dash-equity-wrap--compact { height: 340px; }

    /* Donuts inflate so they don't get visually lost next to the
       bigger equity curve. SVG sizes by CSS (svg has width/height
       attrs of 130 set inline — override here). */
    .dash-card.dash-card--donut-compact .dash-donut-svg-wrap svg {
        width: 180px;
        height: 180px;
    }
    .dash-donut-legend.dash-donut-legend--compact { font-size: 0.9rem; }

    /* Heatmap cells grow with viewport — controlled by height (horizontal). */
    .dash-heatmap-section--compact .dash-heatmap-svg { width: auto; height: 260px; }

    /* Recent trades have more visual room per row */
    .dash-recent-card.dash-recent-card--compact .dash-recent-row {
        padding: 0.65rem 0.7rem;
        font-size: 0.92rem;
    }

    /* Tighter card paddings to balance the bigger content inside */
    .dash-equity-section--compact,
    .dash-card.dash-card--donut-compact,
    .dash-heatmap-section.dash-heatmap-section--compact,
    .dash-recent-card.dash-recent-card--compact {
        padding: 1.1rem 1.4rem 1.25rem;
        border-radius: 14px;
    }
}

@media (min-width: 2400px) {
    .content-area:has(#user-dashboard-root) {
        max-width: 2100px;
    }
    .dash-hero.dash-hero--compact .dash-hero-pnl { font-size: 3.6rem; }
    .dash-equity-wrap.dash-equity-wrap--compact { height: 380px; }
    .dash-card.dash-card--donut-compact .dash-donut-svg-wrap svg {
        width: 200px;
        height: 200px;
    }
    .dash-heatmap-section--compact .dash-heatmap-svg { width: auto; height: 300px; }
}

/* Truly huge displays (4K-ish). Extra horizontal room + slightly taller. */
@media (min-width: 2900px) {
    .content-area:has(#user-dashboard-root) {
        max-width: 2400px;
    }
    .dash-hero.dash-hero--compact .dash-hero-pnl { font-size: 4rem; }
    .dash-equity-wrap.dash-equity-wrap--compact { height: 440px; }
    .dash-card.dash-card--donut-compact .dash-donut-svg-wrap svg {
        width: 230px;
        height: 230px;
    }
    .dash-heatmap-section--compact .dash-heatmap-svg { width: auto; height: 340px; }
}

/* ---- Generic card (used everywhere on the dashboard) ----
   Flat, quiet, trader-grade. No glowing rims, no radial washes — just
   a dark gradient panel with a soft border. Matches the visual quiet
   of Linear/TraderSync/Tradezella's data surfaces. */
.dash-card {
    position: relative;
    padding: 1.1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.85) 0%, rgba(15, 15, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    min-width: 0;
}

/* ---- Daily P/L + Day-of-week grid ---- */
.dash-charts-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.dash-daily-wrap,
.dash-dow-wrap {
    width: 100%;
}

.dash-daily-svg,
.dash-dow-svg {
    width: 100%;
    height: 200px;
    display: block;
}

/* ---- Heatmap section ---- */
.dash-heatmap-section {
    position: relative;
    padding: 1.1rem 1.25rem 1.25rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.85) 0%, rgba(15, 15, 18, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.dash-heatmap-svg {
    /* Horizontal heatmap (compact cells ~18px) — fits the bottom row of
       the dashboard without overflowing on 1080-tall viewports. */
    width: auto;
    height: 200px;
    display: block;
    margin: 0 auto;
}

.dash-heatmap-wrap {
    overflow-x: auto;
    padding-top: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* ---- Recent trades — stronger row tinting + bold pill ---- */
.dash-recent-row {
    display: grid;
    grid-template-columns: minmax(80px, 110px) minmax(50px, 70px) 60px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    margin: 0 -0.7rem;
    border-radius: 8px;
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s ease;
}

.dash-recent-row:last-child { border-bottom: none; }
.dash-recent-row:hover { background: rgba(255, 255, 255, 0.025); }

.dash-recent-row.is-win .dash-recent-pnl {
    color: #34d399;
    background: transparent;
    border: none;
}
.dash-recent-row.is-loss .dash-recent-pnl {
    color: #f87171;
    background: transparent;
    border: none;
}
.dash-recent-row.is-flat .dash-recent-pnl {
    color: var(--text-secondary, #A1A1AA);
    background: transparent;
    border: none;
}

.dash-recent-pnl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0;
    border-radius: 0;
    justify-self: end;
    min-width: 0;
}

/* Side column — text only, no pill */
.dash-recent-side {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
}
.dash-recent-side.side-long { color: #4ade80; }
.dash-recent-side.side-short { color: #f87171; }

/* ---- Quick-nav card ---- */
.dash-quicknav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.dash-quicknav-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    min-width: 0;
}

.dash-quicknav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.dash-quicknav-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #A1A1AA);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-quicknav-btn:hover .dash-quicknav-icon {
    color: var(--primary, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.22);
}

.dash-quicknav-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dash-quicknav-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
}

.dash-quicknav-sub {
    font-size: 0.7rem;
    color: var(--text-secondary, #A1A1AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Sidebar nav-group labels ---- */
.sidebar-nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 0.65rem;
}

.sidebar-nav-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sidebar-nav-group-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.45);
    padding: 0.4rem 0.85rem 0.35rem;
    transition: opacity 0.15s ease;
}

/* ---- Narrow screens ---- */
@media (max-width: 1280px) {
    .dash-charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .dash-hero { grid-template-columns: 1fr; }
    .dash-hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-period-switcher { margin-left: 0; align-self: start; }
    .dash-bottom-grid.dash-bottom-grid--v3 { grid-template-columns: 1fr; }
    .dash-quicknav-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .dash-hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-hero-pnl { font-size: 2rem; }
}

/* ---- Analysis page: Points by symbol section ---- */
.analysis-section.analysis-per-ticker {
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.7) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.analysis-section-head { margin-bottom: 0.85rem; }
.analysis-section-title {
    margin: 0;
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.analysis-section-sub {
    margin: 0.25rem 0 0;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.85rem;
}

/* ---- Welcome strip ---- */
.dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(160deg, rgba(28, 28, 32, 0.7) 0%, rgba(14, 14, 17, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dash-welcome-title {
    margin: 0;
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dash-welcome-meta {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.dash-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-action-primary,
.dash-action-secondary {
    min-height: 38px;
    padding: 0 1.05rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    font-family: inherit;
}

.dash-action-primary {
    background: var(--accent-yellow, #f5b800);
    color: #111;
    border: 1px solid transparent;
}

.dash-action-primary:hover {
    background: #ffc933;
}

.dash-action-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dash-action-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---- Section heads ---- */
.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.dash-section-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dash-section-sub {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

/* ---- KPI rows ---- */
.dash-kpi-section { display: flex; flex-direction: column; }

/* ---- Per-symbol points breakdown ---- */
.dash-per-ticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.dash-per-ticker-card {
    padding: 1rem 1.1rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.72) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

.dash-per-ticker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-per-ticker-sym {
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.dash-per-ticker-count {
    font-size: 0.72rem;
    color: var(--text-secondary, #A1A1AA);
    font-weight: 500;
}

.dash-per-ticker-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.85rem;
}

.dash-per-ticker-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dash-per-ticker-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary, #A1A1AA);
    font-weight: 600;
}

.dash-per-ticker-value {
    font-family: Outfit, Inter, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.dash-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.72) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-width: 0;
}

.dash-kpi-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
}

.dash-kpi-value {
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-kpi-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.dash-kpi-empty { color: rgba(255, 255, 255, 0.25); font-weight: 500; }
.dash-kpi-sep { color: rgba(255, 255, 255, 0.3); margin: 0 0.2rem; font-weight: 400; }

/* ---- Equity curve ---- */
.dash-equity-section {
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.7) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dash-equity-wrap {
    width: 100%;
    height: 180px;
    position: relative;
}

.dash-equity-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dash-equity-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
}

/* ---- Bottom grid: streak + recent trades ---- */
.dash-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
}

.dash-streak-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.4rem;
    background: linear-gradient(160deg, rgba(245, 184, 0, 0.12) 0%, rgba(24, 24, 27, 0.88) 60%);
    border: 1px solid rgba(245, 184, 0, 0.22);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dash-streak-icon {
    font-size: 2.6rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(245, 184, 0, 0.45));
}

.dash-streak-text { display: flex; flex-direction: column; gap: 0.2rem; }

.dash-streak-value {
    font-family: Outfit, Inter, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.dash-streak-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

.dash-streak-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.25rem;
}

.dash-streak-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.dash-recent-card {
    padding: 1.1rem 1.25rem 1.2rem;
    background: linear-gradient(160deg, rgba(24, 24, 27, 0.7) 0%, rgba(13, 13, 16, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dash-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dash-recent-row {
    display: grid;
    grid-template-columns: minmax(80px, 110px) minmax(60px, 80px) 60px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.86rem;
}

.dash-recent-row:last-child { border-bottom: none; }

.dash-recent-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dash-recent-ticker { color: var(--text-primary); font-weight: 600; }

.dash-recent-side {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    width: fit-content;
}

.dash-recent-side.side-long {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.08);
}

.dash-recent-side.side-short {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
}

.dash-recent-pnl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.dash-recent-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

/* ---- Narrow screens ---- */
@media (max-width: 1100px) {
    .dash-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-welcome { flex-direction: column; align-items: flex-start; }
}

/* --- Analytics Dashboard V2 --- */
.analytics-dashboard {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    max-width: var(--content-shell-max);
    /* Allow wider expansion */
    margin: 0 auto;
}

.analytics-section {
    background: linear-gradient(160deg, rgba(22, 22, 25, 0.7) 0%, rgba(12, 12, 14, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.analytics-section:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 1100px) {
    .analytics-section {
        padding: clamp(1rem, 2.8vw, 1.85rem);
        min-height: 380px;
    }

    .analytics-section-title {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        align-items: flex-start;
    }

    .analytics-top-stats {
        gap: 1.25rem 2rem;
    }
}

/* Subtle gradient overlay */
.analytics-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle at 100% 0%, rgba(234, 179, 8, 0.05), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.02), transparent 40%);
    z-index: 0;
}

.analytics-section>* {
    position: relative;
    z-index: 1;
}

.analytics-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analytics-top-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.global-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.global-stat-label {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.global-stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.global-stat-sub {
    font-size: 0.9rem;
    font-weight: 500;
}

.sub-positive {
    color: var(--success);
}

.sub-negative {
    color: var(--danger);
}

.sub-neutral {
    color: var(--text-tertiary);
}

.analytics-chart-container {
    flex: 1;
    width: 100%;
    position: relative;
    min-height: min(400px, max(260px, 42vh));
}

/* --- Authentication Overlay --- */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 12, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(12px, 3vw, 28px);
    box-sizing: border-box;
}

.auth-container {
    background: rgba(18, 18, 20, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: clamp(1.35rem, 4vw, 2.5rem);
    width: 100%;
    max-width: min(420px, calc(100vw - 48px));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    text-align: center;
    box-sizing: border-box;
}

.auth-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.65rem, 4.5vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.auth-input {
    text-align: left;
    margin-bottom: 1.25rem;
}

.auth-input label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.auth-input .input-wrapper-styled {
    position: relative;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.auth-input .input-wrapper-styled:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
    background: rgba(0, 0, 0, 0.4);
}

.auth-input .modern-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 14px 16px;
    font-size: 1rem;
    outline: none;
}

.auth-input .modern-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.auth-btn {
    flex: 1;
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

/* P75.19 — visually communicate disabled state for the Create Account button
   when the Terms checkbox is not ticked. Without this, users click and nothing
   happens (the JS handler shows an error, but the button itself looks ready). */
.auth-btn:disabled,
.auth-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* Auth feedback line: red for errors, green when it carries a success notice
   (e.g. the forgot-password "reset link sent" confirmation). */
.auth-error {
    color: #f87171;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 14px;
}

.auth-error.auth-info { color: #34d399; }

/* Daily chart (journal month view): was fixed 760px inline — scale with viewport height
 * so 1366×768 / 1920×1200 / etc. keep usable vertical space below header chrome. */
#daily-chart-root.daily-chart-section,
.daily-chart-section#daily-chart-root {
    height: min(760px, max(280px, calc(100vh - 240px)));
    min-height: 280px;
    box-sizing: border-box;
}

/* P6.7/P6.8 — Outer page bar above the chart frame. Hosts day navigation
   on the left and trade-cells (one per trade of the day) on the right.
   Compact (width: fit-content) — doesn't span the full viewport. Trade
   cells are clickable: click zooms the chart's visible range to the
   trade's entry→exit window. */
.lj-chart-pagebar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 10px 6px 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: 10px;
    max-width: 100%;
}
.lj-chart-pagebar__daynav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.lj-chart-pagebar__daynav .month-header-label,
.lj-chart-pagebar__daynav #month-nav-label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    color: var(--text-primary, #e4e7ec);
    letter-spacing: 0.005em;
    white-space: nowrap;
}
.lj-chart-pagebar__daynav .nav-arrow-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, rgba(228, 231, 236, 0.78));
    border-radius: 6px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lj-chart-pagebar__daynav .nav-arrow-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #e4e7ec);
}
.lj-chart-pagebar__daynav .nav-arrow-btn svg {
    width: 18px;
    height: 18px;
}
.lj-chart-pagebar__daynav .today-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: rgba(252, 211, 77, 0.95);
    border-radius: 6px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.lj-chart-pagebar__daynav .today-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.7);
}

.lj-chart-pagebar__trades {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    /* Hide scrollbar entirely — would inflate the bar's height. Scroll
       still works via wheel / touch / drag. The fade-mask (below, gated
       by `.is-overflow`) hints that more chips exist beyond view. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    /* Cap at ~3 + ½ chips wide. Beyond this, content overflows and the
       fade-mask kicks in. Calibrated to chip width ~165–175px (dot + PnL
       + pts): 3 chips + 2 gaps ≈ 522px, plus ~75px of the 4th chip fading
       behind the gradient mask. */
    max-width: 600px;
}
.lj-chart-pagebar__trades::-webkit-scrollbar { display: none; }

/* Fade right edge to hint scrollability — applied only when content
   actually overflows (JS toggles .is-overflow via scrollWidth check
   after each rebuild). Without the gate, the mask would fade the last
   chip's tail even when nothing is hidden. */
.lj-chart-pagebar__trades.is-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%);
}

/* P7.3 — Split-toggle button in the pagebar (right side). Compact icon
   + label. Active state when split-pane is on. */
.lj-chart-pagebar__split-btn {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-secondary, rgba(228, 231, 236, 0.78));
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lj-chart-pagebar__split-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-primary, #e4e7ec);
}
.lj-chart-pagebar__split-btn.is-active {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.45);
    color: rgba(252, 211, 77, 0.95);
}

/* P7.5 — Vertical splitter between primary & secondary chart frames.
   TradingView-style: a hair-thin 1px line drawn via ::before. The flex
   element itself spans 9px to give the cursor a comfortable hit-area
   without visually inflating the gap between panes. Hover/active states
   bump the line to 2px and switch to amber to confirm interactivity. */
.lj-chart-splitter {
    flex: 0 0 9px;
    cursor: col-resize;
    position: relative;
    background: transparent;
    border: 0;
    user-select: none;
}
.lj-chart-splitter::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.14s ease, width 0.1s ease, left 0.1s ease;
    pointer-events: none;
}
.lj-chart-splitter:hover::before,
.lj-chart-splitter:active::before {
    width: 2px;
    left: 3.5px;
    background: rgba(245, 158, 11, 0.85);
}

/* P7.3 — Close button on the secondary frame's topbar */
.lj-chart-frame__close {
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary, rgba(228, 231, 236, 0.7));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lj-chart-frame__close:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.35);
    color: rgba(248, 113, 113, 0.95);
}
/* Split-pane SYNC toggle (lives in the secondary topbar). Inherits the base
   .chart-toggle-btn look; here we just align the icon + label and give the
   active (synced) state a clear accent so the lock state is obvious. */
.lj-chart-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.lj-chart-sync-btn svg { flex-shrink: 0; opacity: 0.85; }
.lj-chart-sync-btn.active {
    color: #0b0e11;
    background: var(--accent, #fbbf24);
    border-color: var(--accent, #fbbf24);
}
.lj-chart-sync-btn.active svg { opacity: 1; }
/* Always-visible crosshair date/time readout in the chart topbar. The faded
   on-chart day label stays; this is the precise, legible copy that tracks the
   cursor. In standalone the topbar floats over the canvas, so keep it crisp. */
.lj-chart-xhair-readout {
    margin-left: 16px;
    align-self: center;
    font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    color: rgba(228, 231, 236, 0.8);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lj-chart-pagebar__trades-empty {
    font-size: 0.78rem;
    color: var(--text-tertiary, rgba(148, 163, 184, 0.55));
    font-style: italic;
    padding: 0 8px;
}

/* Trade chip — borderless: colored dot + PnL bold + pts in muted suffix.
   Reads as a one-glance datapoint, no boxy rectangle, no pill outline.
   Hover surfaces a subtle bg-tint to indicate clickability. */
.lj-chart-pagebar__trade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-primary, #e4e7ec);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
    line-height: 1;
    white-space: nowrap;
}
.lj-chart-pagebar__trade:hover {
    background: rgba(255, 255, 255, 0.05);
}
.lj-chart-pagebar__trade-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(148, 163, 184, 0.6);
}

/* P7.8 — Ticker badge in trade chip (e.g. "NQ" / "ES"). Lets users
   scan a mixed-instrument day. Mono-spaced + uppercase + slightly
   dimmer than the PnL so the PnL still dominates the chip. */
.lj-chart-pagebar__trade-ticker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(203, 213, 225, 0.85);
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    font-variant-numeric: tabular-nums;
}
.lj-chart-pagebar__trade.is-win  .lj-chart-pagebar__trade-dot { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.5); }
.lj-chart-pagebar__trade.is-loss .lj-chart-pagebar__trade-dot { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.5); }
.lj-chart-pagebar__trade.is-be   .lj-chart-pagebar__trade-dot { background: rgba(148, 163, 184, 0.6); }

.lj-chart-pagebar__trade-pnl {
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #e4e7ec);
}
.lj-chart-pagebar__trade.is-win  .lj-chart-pagebar__trade-pnl { color: #34d399; }
.lj-chart-pagebar__trade.is-loss .lj-chart-pagebar__trade-pnl { color: #f87171; }
.lj-chart-pagebar__trade-pts {
    font-size: 0.72rem;
    color: var(--text-tertiary, rgba(148, 163, 184, 0.6));
    font-variant-numeric: tabular-nums;
}
.lj-chart-pagebar__trade-pts-u {
    margin-left: 3px;
    opacity: 0.65;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* P6 — Standalone Chart page frame. Wraps the chart canvas in a 16:9
   container with an inline toolbar on top (TradingView-style). Sized to
   fill the viewport while keeping the cinematic aspect — clamps prevent
   shrink-to-nothing on tablets and stretch-too-tall on ultrawides. */
.lj-chart-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 140px);
    min-height: 380px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Inline toolbar — slim TradingView-style bar at the top of the chart
   frame. Hosts the date navigation (prev/next/title/today). Ticker +
   timeframes remain in their existing top-right absolute positions
   inside the chart canvas so we don't refactor too much at once. */
.lj-chart-topbar {
    flex-shrink: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--border-light);
}
.lj-chart-topbar__date {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Reset the bigger journal-style title inside the inline toolbar so it
   reads as a compact label instead of an H2 banner. Targets the existing
   `.month-header-label` styling that was inherited from the moved
   titleContainer. */
.lj-chart-topbar .month-header-label,
.lj-chart-topbar #month-nav-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    color: var(--text-primary, #e4e7ec);
    letter-spacing: 0.005em;
}
.lj-chart-topbar .nav-arrow-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, rgba(228, 231, 236, 0.78));
    border-radius: 6px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lj-chart-topbar .nav-arrow-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #e4e7ec);
}
.lj-chart-topbar .nav-arrow-btn svg {
    width: 16px;
    height: 16px;
}
.lj-chart-topbar .today-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: rgba(252, 211, 77, 0.95);
    border-radius: 6px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.lj-chart-topbar .today-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.7);
}

/* When the chart canvas is hosted inside .lj-chart-frame, override its
   own viewport-aware height — the frame's aspect-ratio governs sizing.
   Chart-engine fills `clientHeight` of its container so we just let
   flex-grow expand it into the remaining frame height after the toolbar.
   Class-only selector so secondary pane (#daily-chart-root-2) inherits
   the same flex behaviour. */
.lj-chart-frame .daily-chart-section {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* P7.1/P7.7 — Chart row: left rail + chart frame(s).
     • Single mode: frame's own `aspect-ratio: 16/9` (clamped by
       max-height) governs both width and height. Looks good full-bleed.
     • Split mode: aspect-ratio MOVES UP to the ROW. Row width is the
       full chart-area width (same as single mode), so the row's height
       resolves to the SAME value single-mode produced. Both frames inside
       inherit that height — each pane is the same vertical size as
       single-mode regardless of horizontal split. */
.lj-chart-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: 0;
}
.lj-chart-row .lj-chart-rail {
    margin-right: 8px;
}
.lj-chart-row .lj-chart-frame {
    flex: 1 1 0;
    min-width: 0;
}
/* Split mode: row height is set inline by JS (snapshot of single-mode
   frame height taken right before activation). Frames inside fill that
   row height — independent of width — so each pane stays vertically
   the same as single mode no matter the horizontal split ratio. */
.lj-chart-row.is-split .lj-chart-frame {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    min-height: 0;
}

/* Vertical draw-rail OUTSIDE the chart frame (TV-style). Hosts the
   draw-toolbar (crosshair / rect / hline / ray / RR / eraser) and the
   chart-tools-vertical (ruler / magnet) as stacked groups. Width-locked
   to the button width so it doesn't steal screen real-estate. */
.lj-chart-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    flex: 0 0 auto;
    width: 44px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: 10px;
}
/* Override the draw-toolbar / chart-tools-vertical's original
   absolute-positioned overlay styles when hosted inside the rail. */
.lj-chart-rail .draw-toolbar,
.lj-chart-rail .chart-tools-vertical {
    position: static;
    top: auto;
    left: auto;
    background: transparent;
    border: 0;
    padding: 0;
    flex-direction: column;
    gap: 6px;
}
/* Subtle separator between draw-tools and chart-tools groups. */
.lj-chart-rail .chart-tools-vertical {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tooltips: pop out to the RIGHT (away from the chart canvas border). */
.lj-chart-rail .draw-tool-btn::after,
.lj-chart-rail .chart-tool-btn::after {
    bottom: auto;
    top: 50%;
    left: 130%;
    transform: translateY(-50%) translateX(-4px);
}
.lj-chart-rail .draw-tool-btn:hover::after,
.lj-chart-rail .chart-tool-btn:hover::after {
    transform: translateY(-50%) translateX(0);
}

/* P6.5 — Topbar right-group: ticker, timeframes, fullscreen. Was an
   absolute-positioned overlay in the chart corner; now it's a flex child
   inside the topbar with `margin-left: auto` pushing it to the right. */
.lj-chart-topbar .chart-controls-toolbar,
.lj-chart-topbar .chart-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lj-chart-topbar > div[style*="margin-left"] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cinematic Fullscreen for Chart — ~75vw/75vh feel, capped to the same
 * workspace shell as the rest of the app so ultrawides don't inflate past
 * --content-shell-max. Centered with transform (not 12.5vw offsets). */
.chart-fullscreen-active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(75vw, calc(var(--content-shell-max) + 120px)) !important;
    height: min(75vh, calc(100vh - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    z-index: 10000 !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: var(--bg-card) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Fullscreen Blurred Backdrop */
.chart-fullscreen-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.chart-fullscreen-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   DAILY VIEW REDESIGN COMPONENTS
   ========================================= */

/* Daily KPI Grid */
.daily-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    background: linear-gradient(135deg, rgba(20,20,22,0.8), rgba(28,28,32,0.6));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
}
.daily-kpi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 0 0.5rem;
}
.daily-kpi-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(255,255,255,0.08);
}

@media (max-width: 1000px) {
    .daily-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
        padding: 1rem 1.15rem;
    }
    .daily-kpi-item::after {
        display: none;
    }
    .daily-kpi-value {
        font-size: 1.22rem;
    }
}

@media (max-width: 480px) {
    .daily-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.daily-kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.daily-kpi-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Section Containers (Pre-Market, End of Day) */
.daily-section-container {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: border-color 0.2s;
}
.daily-section-container:focus-within {
    border-color: rgba(234, 179, 8, 0.4);
}
.daily-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    cursor: pointer;
}
.daily-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.daily-section-title svg {
    color: var(--accent-gold);
}

/* Text Areas */
.journal-text-area {
    width: 100%;
    min-height: 100px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
}
.journal-text-area:focus {
    outline: none;
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(0,0,0,0.3);
    color: var(--text-primary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Mindset Tags */
.mindset-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.mindset-tag {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.mindset-tag:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
.mindset-tag.active {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
    color: var(--accent-gold);
}

/* Followed Plan Toggle */
.plan-toggle-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.plan-toggle-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 1rem;
}
.plan-toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
}
.plan-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.plan-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.1);
}
.plan-toggle-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: .4s;
    border-radius: 50%;
}
.plan-toggle-switch input:checked + .plan-toggle-slider {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}
.plan-toggle-switch input:checked + .plan-toggle-slider:before {
    transform: translateX(26px);
    background-color: #10B981;
}

/* --- TRADES GALLERY VIEW --- */
.trades-layout-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Two-column grid: filter rail on the left (sticky in-flow), cards on
       the right. Both live inside .app-main so they automatically clear the
       app sidebar — no more fixed-position overlap. When the rail is
       collapsed via the toolbar toggle, the wrapper drops to a single
       column (see .rail-collapsed below). */
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(16px, 1.6vw, 28px);
    align-items: start;
}

.trades-layout-wrapper.rail-collapsed,
body.tg-rail-collapsed .trades-layout-wrapper {
    grid-template-columns: minmax(0, 1fr);
}

.trades-main-column {
    width: 100%;
    min-width: 0;
    grid-column: 2;
}

.trades-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 20px;
    width: 100%;
}

/* --- Trades top-right toolbar (Group / Sort / Filters) ---------------- */
.trades-toolbar-host {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    /* Sit on the right of the .page-header row, with breathing room from the
       view-switcher tabs. Per spec: "in the same row as the journal
       timeframes, but pushed to the right with a gap between." */
    padding-left: 24px;
}

.tg-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tg-toolbar-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.65);
    user-select: none;
}

.tg-toolbar-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(20, 20, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 0.36rem 1.6rem 0.36rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23a1a1aa' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tg-toolbar-select:hover {
    border-color: rgba(245, 158, 11, 0.45);
}

.tg-toolbar-select:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.7);
}

.tg-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 20, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 0.36rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tg-toolbar-btn:hover {
    border-color: rgba(245, 158, 11, 0.45);
}

.tg-toolbar-btn.is-active {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.08);
}

.tg-toolbar-btn-icon {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.85);
}

.tg-toolbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--primary-gradient);
    color: #000;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* The toolbar's "Filters" toggle is a fallback summon-button for the
   left rail. On wide viewports (>1800px) the rail is the primary filter
   menu and visible by default — the toggle would be a redundant duplicate
   so we hide it. The Group/Sort selectors stay (they configure HOW to
   view, not WHAT to filter — different concern, no duplication). The
   active-filter count moves to #tg-rail-badge inside the rail head. */
@media (min-width: 1801px) {
    #tg-toggle-rail { display: none !important; }
}

/* --- Active-filter chips row (under tabs, above the grid) ------------- */
/* Summary + active-filter strip above the trade grid.
   Reserves a constant min-height so applying / clearing filters never
   causes layout shift in the cards below. Stats live on the left
   (always rendered, updates live with filters), active-chips on the
   right (fade in/out without changing strip height). Pattern used by
   Stripe (filtered transactions), Linear, Mixpanel. */
.tg-summary-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    /* Trades page-header is taller than Monthly/Yearly (it carries an
       extra toolbar row) but the stats bar starts directly under it
       without the intermediate nav-header that Monthly uses. Tiny
       top margin lines up the bar's top edge with the Monthly/Yearly
       position (off by ~3px without it). */
    margin-top: 3px;
    margin-bottom: 12px;
}

.tg-summary {
    display: block;
    width: 100%;
    font-variant-numeric: tabular-nums;
    user-select: none;
    flex: 1 1 100%;
    min-width: 0;
}

.tg-summary .trades-stats-bar { margin-bottom: 0; }

/* Breakeven count colour — distinct from green/red so the user can
   scan the three outcome columns at a glance. Amber matches the BE
   tag stamp on cards for consistency. */
.tg-summary .trades-stats-bar .tg-summary-be {
    color: #fbbf24;
}

.tg-summary-bar-empty {
    padding: 1.1rem 1.4rem;
    text-align: center;
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    font-size: 0.92rem;
}

/* Trades gallery empty-state card (no trades / no match) */
.tg-empty-card {
    margin: clamp(1rem, 3vw, 2.5rem) auto;
    max-width: 480px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
    background: linear-gradient(160deg, rgba(28, 28, 32, 0.7) 0%, rgba(14, 14, 17, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.tg-empty-card .tg-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: var(--primary, #f59e0b);
    margin-bottom: 0.2rem;
}

.tg-empty-card .tg-empty-title {
    margin: 0;
    font-family: Outfit, Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.tg-empty-card .tg-empty-sub {
    margin: 0;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40ch;
}

.tg-empty-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.3rem;
}

.tg-empty-btn {
    min-height: 36px;
    padding: 0 1rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tg-empty-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.tg-empty-btn.primary {
    background: var(--primary, #f59e0b);
    color: #111;
    border-color: transparent;
}

.tg-empty-btn.primary:hover {
    background: #ffc933;
}

.tg-empty-card--filters .tg-empty-icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #A1A1AA);
}

.tg-summary-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.tg-summary-stat .tg-summary-num {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.tg-summary-stat.is-pos .tg-summary-num { color: #10b981; }
.tg-summary-stat.is-neg .tg-summary-num { color: #ef4444; }

.tg-summary-sep {
    color: rgba(255, 255, 255, 0.10);
    font-weight: 400;
}

/* W / L / BE breakdown — clean inline counts, color-coded by outcome.
   No surfaces, no borders: the color of the numerals carries the meaning,
   the unit label sits next to each number in a quieter weight/size. */
.tg-summary-breakdown {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}

.tg-breakdown-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tg-breakdown-cell b {
    font-weight: 700;
    font-size: 0.95rem;
}
.tg-breakdown-cell i {
    font-style: normal;
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

.tg-breakdown-cell.is-win  b { color: #34d399; }
.tg-breakdown-cell.is-loss b { color: #f87171; }
.tg-breakdown-cell.is-be   b { color: #cbd5e1; }

.tg-summary-empty {
    color: var(--text-tertiary);
    font-style: italic;
    opacity: 0.7;
}

.tg-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity 140ms ease;
}

.tg-chips-row:empty {
    opacity: 0;
    pointer-events: none;
}

.tg-chips-row > .tg-chip {
    animation: tgChipFadeIn 160ms ease-out;
}

@keyframes tgChipFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: none; }
}

.tg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1;
    user-select: none;
}

.tg-chip-x {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.tg-chip-x:hover { color: #fff; }

.tg-chip-clear {
    background: transparent;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: rgba(148, 163, 184, 0.85);
    cursor: pointer;
    padding: 4px 10px;
}
.tg-chip-clear:hover {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

/* --- Left-side filter rail (in-flow grid column) --------------------
   Lives as the first column of .trades-layout-wrapper. Sticky so it
   stays visible while cards scroll. No fixed positioning — placement
   is purely a function of the parent grid, so it inherits the app
   sidebar offset from .app-main automatically. */
.tg-filter-rail {
    position: sticky;
    top: calc(4.5rem + 1rem);
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 6px 16px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(226, 232, 240, 0.62);
    font-family: 'Outfit', sans-serif;
    z-index: 50;
    /* Quiet by default, brighter on hover so users feel agency without it
       competing with the cards for attention. */
    opacity: 0.78;
    transition: opacity 0.15s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.tg-filter-rail:hover { opacity: 1; }

.tg-filter-rail::-webkit-scrollbar { width: 4px; }
.tg-filter-rail::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 2px;
}

.trades-layout-wrapper.rail-collapsed ~ * .tg-filter-rail,
.trades-layout-wrapper.rail-collapsed .tg-filter-rail {
    display: none;
}

/* When the rail is collapsed via the toolbar toggle. Because the rail is
   fixed-position (a sibling that escapes flow), we ALSO mark the body so
   CSS can reach it from anywhere. */
body.tg-rail-collapsed .tg-filter-rail {
    display: none;
}

/* On narrower viewports the rail collapses out of the grid; toolbar
   "Filters" opens it as an overlay drawer instead. */
@media (max-width: 1280px) {
    .trades-layout-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Reset explicit column placement so the cards column fills the
       single remaining track. Otherwise the implicit grid creates a
       phantom col-1 and the cards squish into col-2. */
    .trades-main-column { grid-column: auto; }
    .tg-filter-rail {
        display: none;
    }
    body.tg-rail-forced-open .tg-filter-rail {
        display: block;
        position: fixed;
        top: 5.5rem;
        left: calc(var(--app-sidebar-w) + 12px);
        /* Cap width so the overlay panel never causes horizontal scroll on
           narrow viewports. The rail's content reflows inside the cap. */
        width: min(260px, calc(100vw - var(--app-sidebar-w) - 24px));
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        z-index: 80;
        background: rgba(10, 10, 14, 0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 14px 12px 18px;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

/* When floating-overlay mode is active, restore the head's bottom border
   so the section list reads properly inside the panel chrome. */
body.tg-rail-forced-open .tg-filter-rail .tg-rail-head {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.tg-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Match the summary strip on the right column so the "FILTERS" header
       baseline lines up with the live stats text. Both rows reserve the
       same 30px height and 12px bottom gap. */
    min-height: 30px;
    padding: 0 2px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}

.tg-rail-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Active-filter count next to "FILTERS" in the rail head. Mirrors the
   toolbar badge's role; visible on wide viewports where the toolbar
   "Filters" button is hidden as redundant. */
.tg-rail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}
.tg-rail-badge[hidden] { display: none; }

.tg-rail-clear {
    background: transparent;
    border: 0;
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
}
.tg-rail-clear:hover { color: #fbbf24; }

.tg-rail-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 6px 4px;
}
.tg-rail-section:last-of-type { border-bottom: 0; }

.tg-rail-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.82);
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    user-select: none;
}
.tg-rail-section-title::-webkit-details-marker { display: none; }
.tg-rail-section-title::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    font-size: 0.6rem;
    color: rgba(148, 163, 184, 0.55);
    transition: transform 0.15s ease;
}
.tg-rail-section[open] .tg-rail-section-title::before {
    transform: rotate(90deg);
}

.tg-rail-section-body {
    padding: 6px 0 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-rail-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(226, 232, 240, 0.72);
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    transition: color 0.1s ease, background 0.1s ease;
}
.tg-rail-option:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}
.tg-rail-option input[type="checkbox"],
.tg-rail-option input[type="radio"] {
    accent-color: #fbbf24;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.tg-rail-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.5);
}
.tg-rail-dot.pos { background: #10B981; }
.tg-rail-dot.neg { background: #EF4444; }
.tg-rail-dot.flat { background: rgba(148, 163, 184, 0.5); }

.tg-rail-count {
    margin-left: auto;
    font-size: 0.66rem;
    color: rgba(148, 163, 184, 0.55);
    font-variant-numeric: tabular-nums;
}

.tg-rail-hint {
    margin-left: auto;
    font-size: 0.62rem;
    color: rgba(148, 163, 184, 0.45);
    font-style: italic;
}

/* Custom date range — light frame; single inner divider; label column fixed for date alignment */
.tg-date-range-panel {
    margin-top: 6px;
    padding: 10px 12px 11px;
    border: 1px solid rgba(255, 255, 255, 0.088);
    border-radius: 8px;
    background: transparent;
    transition: border-color 0.15s ease;
}
.tg-date-range-panel--active {
    border-color: rgba(255, 255, 255, 0.112);
}
.tg-date-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tg-range-picker-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 0 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: rgba(226, 232, 240, 0.9);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 0;
    outline: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tg-range-picker-trigger:hover {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
}
.tg-range-picker-trigger:focus-visible {
    border-bottom-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 1px 0 0 rgba(251, 191, 36, 0.35);
}
.tg-range-picker-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.tg-range-picker-line {
    display: grid;
    grid-template-columns: 3.1rem minmax(min-content, 1fr);
    column-gap: 10px;
    row-gap: 0;
    align-items: baseline;
    width: 100%;
    min-width: 0;
}
.tg-range-picker-k {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(148, 163, 184, 0.65);
    justify-self: start;
    min-width: 0;
}
.tg-range-picker-v {
    font-size: 0.74rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
    overflow: visible;
    min-width: 0;
    justify-self: start;
    text-align: left;
    word-break: normal;
}
.tg-range-picker-v.tg-range-picker-placeholder {
    color: rgba(148, 163, 184, 0.45);
}
.tg-range-picker-chev {
    flex-shrink: 0;
    margin-top: 3px;
    color: rgba(148, 163, 184, 0.45);
    font-size: 0.62rem;
    line-height: 1;
}

.tg-range-clear-btn {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 2px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(148, 163, 184, 0.7);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}
.tg-range-clear-btn:hover {
    color: #fbbf24;
}
.tg-range-clear-btn:focus-visible {
    color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
    border-radius: 2px;
}

/* Floating range calendar — restrained gold gradients, hover range preview */
@keyframes tgCalMidDrift {
    0%, 100% {
        opacity: 0.78;
        background-position: 0% 52%;
    }
    50% {
        opacity: 1;
        background-position: 100% 48%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tg-cal-day.tg-cal-preview-mid,
    .tg-cal-day.tg-cal-preview-edge-start,
    .tg-cal-day.tg-cal-preview-edge-end,
    .tg-cal-day.tg-cal-preview-solo,
    .tg-cal-day.tg-cal-preview-target {
        animation: none;
        opacity: 0.92;
    }
}

.tg-cal-popover {
    --tg-cal-gold-wash: radial-gradient(100% 90% at 50% -8%, rgba(251, 191, 56, 0.09), transparent 52%);
    --tg-cal-gold-line: rgba(251, 200, 95, 0.22);
    min-width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 16px);
    padding: 12px 12px 10px;
    background:
        var(--tg-cal-gold-wash),
        linear-gradient(170deg,
            rgba(30, 30, 34, 0.98) 0%,
            rgba(17, 17, 21, 0.99) 48%,
            rgba(21, 20, 17, 0.99) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.11),
        inset 0 1px 0 rgba(255, 229, 180, 0.05),
        0 16px 44px rgba(0, 0, 0, 0.66);
    color: var(--text-primary);
    font-size: 0.78rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tg-cal-popover.tg-cal-popover--pick-end {
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.16),
        inset 0 1px 0 rgba(255, 229, 180, 0.07),
        0 16px 48px rgba(0, 0, 0, 0.72);
}

.tg-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid transparent;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(251, 191, 36, 0.18) 50%,
            transparent 100%)
            0 100% / 100% 1px no-repeat,
        linear-gradient(90deg,
            transparent 8%,
            rgba(251, 191, 36, 0.06),
            transparent 92%)
            0 98% / 100% 1px no-repeat;
}
.tg-cal-title {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.84rem;
    color: #f0eeeb;
    text-shadow: 0 0 20px rgba(251, 191, 56, 0.06);
}

.tg-cal-nav {
    flex: 0 0 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, rgba(48, 48, 54, 0.45) 0%, rgba(24, 24, 29, 0.75) 100%);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tg-cal-nav:hover {
    background: linear-gradient(165deg, rgba(60, 55, 40, 0.55) 0%, rgba(32, 30, 24, 0.88) 100%);
    border-color: rgba(251, 191, 96, 0.22);
    color: #fff8e9;
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.09);
}

.tg-cal-nav:disabled,
.tg-cal-nav.tg-cal-nav--disabled {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.tg-cal-nav:disabled:hover,
.tg-cal-nav.tg-cal-nav--disabled:hover {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(148, 163, 184, 0.35);
    box-shadow: none;
}
.tg-cal-range-hint {
    margin: 0 0 8px;
    font-size: 0.66rem;
    color: rgba(203, 210, 222, 0.68);
    letter-spacing: 0.02em;
}
.tg-cal-popover.tg-cal-popover--pick-end .tg-cal-range-hint {
    color: rgba(254, 240, 200, 0.48);
}

.tg-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(214, 200, 175, 0.48);
}
.tg-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.tg-cal-day {
    position: relative;
    isolation: isolate;
    min-height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.18s ease;
}
.tg-cal-day:hover {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.065) 0%,
        rgba(255, 255, 255, 0.02) 100%);
}
.tg-cal-day:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 1px rgba(251, 191, 36, 0.55),
        0 0 0 1px rgba(251, 191, 56, 0.12);
}
.tg-cal-day:disabled,
.tg-cal-day.tg-cal-day--future {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(148, 163, 184, 0.28);
    box-shadow: none;
}
.tg-cal-day:disabled:hover,
.tg-cal-day.tg-cal-day--future:hover {
    background: transparent;
    color: rgba(148, 163, 184, 0.28);
}
.tg-cal-day--muted {
    color: rgba(148, 163, 184, 0.32);
}
.tg-cal-day--today {
    box-shadow:
        inset 0 0 0 1px rgba(251, 191, 36, 0.35),
        inset 0 0 8px rgba(251, 191, 36, 0.05);
}
.tg-cal-day--pending {
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(251, 191, 56, 0.12) 0%, rgba(251, 191, 56, 0.06) 100%);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: none;
}

/* Committed inclusive range — same slab fill for anchors and middle cells */
.tg-cal-day--in-range,
.tg-cal-day--range-start:not(.tg-cal-day--range-single),
.tg-cal-day--range-end:not(.tg-cal-day--range-start),
.tg-cal-day--range-single {
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(251, 191, 56, 0.12) 0%, rgba(251, 191, 56, 0.06) 100%);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: none;
}

/* Hover preview band — identical treatment for tentative start, end, middle */
.tg-cal-day.tg-cal-preview-mid,
.tg-cal-day.tg-cal-preview-edge-start,
.tg-cal-day.tg-cal-preview-edge-end,
.tg-cal-day.tg-cal-preview-solo,
.tg-cal-day.tg-cal-preview-target {
    border-radius: 6px;
    box-shadow: none;
    color: var(--text-primary);
    font-weight: 500;
    background-image: linear-gradient(118deg,
        rgba(175, 145, 65, 0.07) 0%,
        rgba(253, 228, 165, 0.16) 48%,
        rgba(251, 191, 56, 0.09) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: tgCalMidDrift 2.9s ease-in-out infinite;
}

.tg-cal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    position: relative;
    border: none;
}
.tg-cal-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(251, 200, 95, 0.22) 42%,
        rgba(251, 200, 95, 0.35) 50%,
        rgba(251, 200, 95, 0.22) 58%,
        transparent);
}

.tg-cal-foot-btn {
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(36, 36, 41, 0.5) 0%, rgba(20, 20, 23, 0.35) 100%);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tg-cal-foot-btn:hover {
    border-color: rgba(251, 191, 36, 0.15);
    background: linear-gradient(180deg, rgba(42, 40, 34, 0.55) 0%, rgba(28, 26, 22, 0.45) 100%);
    color: var(--text-primary);
}

.tg-cal-foot-btn--accent {
    border-color: rgba(251, 191, 96, 0.35);
    color: #ffe6a8;
    background: linear-gradient(165deg, rgba(70, 58, 28, 0.45) 0%, rgba(38, 34, 22, 0.75) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08);
}
.tg-cal-foot-btn--accent:hover {
    border-color: rgba(253, 214, 130, 0.5);
    color: #fff8e6;
    background: linear-gradient(165deg, rgba(85, 70, 32, 0.5) 0%, rgba(44, 38, 24, 0.82) 100%);
}
.tg-date-range-hint {
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.62rem;
    line-height: 1.45;
    color: rgba(148, 163, 184, 0.52);
}

@media (max-width: 400px) {
    .tg-date-range-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .tg-range-picker-trigger {
        flex: 1 1 100%;
    }
    .tg-range-clear-btn {
        margin-left: auto;
        padding: 4px 0;
    }
}

.tg-rail-empty {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.5);
    font-style: italic;
    padding: 4px 4px 8px;
}

/* On narrow viewports drop the rail under the grid so cards keep room. */
@media (max-width: 1100px) {
    .trades-layout-wrapper { flex-wrap: wrap; }
    .tg-filter-rail {
        flex: 1 1 100%;
        width: 100%;
        order: 2;
    }
}

.trade-gallery-card {
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    overflow: visible;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
    display: flex;
    flex-direction: column;
    user-select: none;
    position: relative;
}

.trade-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    border-color: rgba(245, 158, 11, 0.5); /* subtle accent glow */
}

.trade-gallery-card.is-merge-target {
    outline: 2px solid rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* Flash-highlight a day's trade cards when the user clicks that day in the
 * Monthly/Weekly calendar (ljOpenDayInTrades). A brief amber pulse draws the
 * eye to the just-selected day's trades, then fades out. */
@keyframes ljDayFlash {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); outline-color: rgba(245, 158, 11, 0); }
    12%  { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.55), 0 8px 22px rgba(0, 0, 0, 0.45); outline-color: rgba(245, 158, 11, 0.95); }
    100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); outline-color: rgba(245, 158, 11, 0); }
}
.trade-gallery-card.lj-day-flash {
    outline: 2px solid rgba(245, 158, 11, 0);
    animation: ljDayFlash 2.4s ease-out;
    position: relative;
    z-index: 1;
}

/* ───────────────────────── Roadmap page ───────────────────────── */
/* Centered board. Wide enough to give the patch-note feed and the 3-card grid
   real breathing room while still leaving symmetric margins on big screens. */
.roadmap-board { padding: 4px 4px 48px; max-width: 1200px; margin: 0 auto; }

/* Overview + filters toolbar (doubles as a table of contents) */
.roadmap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.roadmap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.roadmap-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.roadmap-chip:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.roadmap-chip.is-active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.roadmap-chip-count {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 1px 7px;
}
.roadmap-chip.is-active .roadmap-chip-count { color: rgba(255, 255, 255, 0.85); }

.roadmap-chip-dot,
.roadmap-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}
.roadmap-dot--progress { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.roadmap-dot--planned  { background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
.roadmap-dot--shipped  { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }

/* Bigger section dot + a live pulse on In Progress ("building right now"). */
.roadmap-section-dot { width: 11px; height: 11px; }
.roadmap-section--progress .roadmap-section-dot { animation: ljLivePulse 1.8s ease-in-out infinite; }
@keyframes ljLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
/* Subtle "in-flight" shimmer on the In Progress cards' top accent. */
.roadmap-card--progress { animation: ljProgressAccent 2.6s ease-in-out infinite; }
@keyframes ljProgressAccent {
    0%, 100% { border-top-color: #f59e0b; }
    50%      { border-top-color: #fcd34d; }
}
@media (prefers-reduced-motion: reduce) {
    .roadmap-section--progress .roadmap-section-dot,
    .roadmap-card--progress { animation: none; }
}

.roadmap-area { display: flex; align-items: center; gap: 8px; }
.roadmap-area-label {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.roadmap-area-select {
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}
.roadmap-area-select:focus { outline: none; border-color: rgba(245, 197, 24, 0.5); }

/* Vertical stack of sections: In Progress -> Planned -> Shipped */
.roadmap-sections { display: flex; flex-direction: column; gap: 30px; }
.roadmap-section-header { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.roadmap-section-title { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01em; }
.roadmap-section-count {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    padding: 2px 9px;
}
.roadmap-section-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
    margin-left: 6px;
}

/* "Got an idea?" footer — channel for user suggestions (no upvoting yet). */
.roadmap-idea-cta {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}
.roadmap-idea-cta a {
    color: #f5c518;
    font-weight: 600;
    text-decoration: none;
}
.roadmap-idea-cta a:hover { text-decoration: underline; }

/* Compact rectangular cards — several per row via auto-fill grid */
.roadmap-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
@media (max-width: 900px) { .roadmap-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .roadmap-section-grid { grid-template-columns: 1fr; } }
.roadmap-empty { color: rgba(255, 255, 255, 0.3); font-size: 0.85rem; font-style: italic; }

.roadmap-card {
    display: flex;
    flex-direction: column;
    min-height: 152px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 14px 15px;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.roadmap-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.16);
}
.roadmap-card--shipped  { border-top-color: #10b981; }
.roadmap-card--progress { border-top-color: #f59e0b; }
.roadmap-card--planned  { border-top-color: #60a5fa; }
.roadmap-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 18px;
}
.roadmap-card-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    padding: 2px 7px;
}
.roadmap-card-date {
    margin-left: auto;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}
.roadmap-card-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
}
.roadmap-card-desc {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}
.roadmap-card-foot { margin-top: auto; padding-top: 12px; }
.roadmap-vote-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: not-allowed;
    user-select: none;
}

/* Shipped → Steam-style expandable release feed */
.roadmap-release-feed { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.roadmap-release {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.roadmap-release:hover { border-color: rgba(255, 255, 255, 0.14); }
.roadmap-release.is-open { border-color: rgba(16, 185, 129, 0.35); background: rgba(255, 255, 255, 0.04); }
.roadmap-release-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.roadmap-release-head:hover { background: rgba(255, 255, 255, 0.03); }
.roadmap-release-cover {
    width: 92px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.roadmap-release-cover-ph { color: rgba(255, 255, 255, 0.22); font-size: 1.4rem; }
.roadmap-release-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.roadmap-release-meta { display: flex; align-items: center; gap: 8px; }
/* Right-aligned column (date over version) so versions line up tidily down the
   feed, next to the expand chevron. */
.roadmap-release-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: 14px;
}
.roadmap-release-date { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); }
.roadmap-release-ver {
    font-size: 0.72rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 5px;
    padding: 2px 8px;
}
.roadmap-release-title { font-weight: 650; font-size: 0.98rem; line-height: 1.25; }
.roadmap-release-summary {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.roadmap-release-chevron {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}
.roadmap-release.is-open .roadmap-release-chevron { transform: rotate(180deg); }
.roadmap-release-body { display: none; padding: 18px 24px 30px; }
.roadmap-release.is-open .roadmap-release-body { display: block; animation: ljFadeIn 0.18s ease; }
@keyframes ljFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Steam-style: a comfortable centered reading column inside the wide block,
   with screenshots flowing inline between paragraphs. */
.roadmap-release-body > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.roadmap-release-body p {
    margin: 0 auto 16px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}
.roadmap-release-body p strong { color: #fff; font-weight: 700; }
.roadmap-release-body p:last-child { margin-bottom: 0; }
.roadmap-release-h {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    margin: 24px auto 10px;
}
/* Inline screenshot in the text flow */
.roadmap-shot--inline { margin: 18px auto 24px; }
.roadmap-shot--inline img {
    width: 100%;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: zoom-in;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.roadmap-shot--inline img:hover { border-color: rgba(255, 255, 255, 0.22); }
.roadmap-shot--inline figcaption {
    margin-top: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}
.roadmap-release-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.roadmap-shot { margin: 0; }
.roadmap-shot img {
    width: 100%;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: zoom-in;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.roadmap-shot img:hover { border-color: rgba(255, 255, 255, 0.25); transform: scale(1.01); }
.roadmap-shot figcaption { margin-top: 5px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.4); }

/* Screenshot placeholder (release block, before the real image is added) */
.roadmap-shot--ph .roadmap-shot-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    aspect-ratio: 16 / 9;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, rgba(255,255,255,0.04) 10px 20px);
    color: rgba(255, 255, 255, 0.55);
}
.roadmap-shot-ph-icon { font-size: 1.4rem; opacity: 0.7; }
.roadmap-shot-ph-cap { font-size: 0.82rem; line-height: 1.35; max-width: 90%; }
.roadmap-shot-ph-dim {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(245, 197, 24, 0.85);
    background: rgba(245, 197, 24, 0.1);
    border-radius: 5px;
    padding: 2px 8px;
}

/* Fullscreen screenshot lightbox */
.lj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.86);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.lj-lightbox.is-open { display: flex; }
.lj-lightbox-fig { margin: 0; max-width: 92vw; max-height: 92vh; text-align: center; }
.lj-lightbox-fig img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); }
.lj-lightbox-fig figcaption { margin-top: 10px; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }

/* Sidebar version badge (bottom-left, near support email) → opens Roadmap */
.sidebar-foot-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 0 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.12s ease;
}
.sidebar-foot-version:hover { color: rgba(255, 255, 255, 0.75); }
.lj-version-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
    flex: 0 0 auto;
}

/* Drag-source hint: every other card from the same trading day glows
 * softly so the user instantly sees which cards are valid merge targets.
 * Subtler than .is-merge-target — that one fires only when the cursor is
 * actually over a target. Together: dim glow on candidates, bright ring
 * on the one under the cursor. */
.trade-gallery-card.is-merge-same-day {
    outline: 2px dashed rgba(245, 158, 11, 0.85);
    box-shadow:
        0 0 0 4px rgba(245, 158, 11, 0.18),
        0 0 22px 4px rgba(245, 158, 11, 0.28);
    transition: outline-color .12s ease, box-shadow .12s ease;
}

/* Day-grouping connector dashes used to be drawn here on cards that share
   the same trading day with the next card. They were visually noisy at the
   right edge of the chart (looked like stray tick marks against the dark
   background), and the same-day grouping is already communicated by the
   date strip in each card and by the sticky day-header. The class hooks
   (.same-day-with-prev / .same-day-with-next) are still applied by the
   gallery so future styling can attach to them without JS changes. */

/* --- Sticky Day-Header in trades gallery --- */
.tg-day-header {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 16px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(14, 14, 18, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
    user-select: none;
}

.tg-day-header:first-child {
    margin-top: 0;
}

.tg-day-header:hover {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(20, 20, 26, 0.94);
}

.tg-day-header:hover .tg-day-header-cta {
    color: #fbbf24;
    transform: translateX(2px);
}

.tg-day-header-left,
.tg-day-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
}

.tg-day-header-weekday {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fbbf24;
}

.tg-day-header-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.tg-day-header-sep {
    color: rgba(148, 163, 184, 0.45);
    font-weight: 400;
}

.tg-day-header-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.tg-day-header-pnl {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.tg-day-header-pnl.pos { color: #10B981; }
.tg-day-header-pnl.neg { color: #EF4444; }
.tg-day-header-pnl.flat { color: var(--text-secondary); }

.tg-day-header-wr {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.tg-day-header-cta {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.8);
    letter-spacing: 0.04em;
    margin-left: 6px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.trade-gallery-card-chart {
    height: 242px;
    width: 100%;
    background: #0a0a0c;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}

/* Timeframe pills (1m / 5m / 15m) — ~70% of prior size (−30%) */
.tg-card-tf-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 7;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    pointer-events: auto;
}

.tg-card-tf-btn {
    font-family: 'Outfit', sans-serif;
    font-size: calc(0.74rem * 0.7);
    font-weight: 600;
    letter-spacing: 0.042em;
    line-height: 1.15;
    padding: 5px 8px;
    min-height: 21px;
    min-width: 1.75rem;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    cursor: pointer;
    background: rgba(12, 12, 16, 0.88);
    color: rgba(226, 232, 240, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.tg-card-tf-btn:hover:not(:disabled):not(.tg-card-tf-btn--locked) {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(22, 24, 30, 0.94);
    color: rgba(241, 245, 249, 0.95);
}

.tg-card-tf-btn--active {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.48);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.tg-card-tf-btn--active:hover:not(:disabled):not(.tg-card-tf-btn--locked) {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.55);
}

.tg-card-tf-btn--locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.trade-gallery-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trade-gallery-card-chart-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------
 * Lightweight chart-loading animation
 * ----------------------------------------------------------------------
 * Five vertical "candle" bars that pulse in sequence. Pure CSS, no SVG,
 * no filters/blurs/box-shadows in the hot loop — only `transform: scaleY`
 * which the compositor handles on the GPU. Cheap on weak machines.
 * Used inside `.trade-gallery-card-chart-status--loading` and
 * `.tg-big-chart-popup-loading`.
 * --------------------------------------------------------------------*/
.tg-chart-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
    user-select: none;
}

.tg-chart-loader-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
}

.tg-chart-loader-bars > span {
    display: block;
    width: 5px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.95) 0%, rgba(59, 130, 246, 0.55) 100%);
    transform: scaleY(0.22);
    transform-origin: bottom center;
    animation: tg-chart-loader-bar 1.2s ease-in-out infinite;
    will-change: transform;
}

.tg-chart-loader-bars > span:nth-child(1) { animation-delay: 0s; }
.tg-chart-loader-bars > span:nth-child(2) { animation-delay: 0.12s; }
.tg-chart-loader-bars > span:nth-child(3) { animation-delay: 0.24s; }
.tg-chart-loader-bars > span:nth-child(4) { animation-delay: 0.36s; }
.tg-chart-loader-bars > span:nth-child(5) { animation-delay: 0.48s; }

@keyframes tg-chart-loader-bar {
    0%, 100% { transform: scaleY(0.22); }
    50%      { transform: scaleY(1); }
}

.tg-chart-loader-label {
    color: var(--text-tertiary, rgba(148, 163, 184, 0.75));
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Bigger loader inside the fullscreen chart popup. */
.tg-big-chart-popup-loading .tg-chart-loader-bars {
    height: 44px;
    gap: 6px;
}
.tg-big-chart-popup-loading .tg-chart-loader-bars > span { width: 7px; }
.tg-big-chart-popup-loading .tg-chart-loader-label { font-size: 0.85rem; }

/* Big-chart loader host: full-bleed overlay over the empty `daily-chart-root`
 * while we wait for candles to land. The loader element itself is reused
 * from `.tg-chart-loader` (compositor-only animation), so this just
 * positions and centers it. Sits below daily drawings (z-index 6) but
 * above the lightweight-charts canvases. */
.daily-chart-loader-host {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 18, 0.55);
    z-index: 6;
    pointer-events: none;
}
.daily-chart-loader-host .tg-chart-loader-bars {
    height: 40px;
    gap: 5px;
}
.daily-chart-loader-host .tg-chart-loader-bars > span { width: 6px; }
.daily-chart-loader-host .tg-chart-loader-label { font-size: 0.8rem; }

/* Respect users who opt out of motion. */
@media (prefers-reduced-motion: reduce) {
    .tg-chart-loader-bars > span {
        animation: none;
        transform: scaleY(0.55);
        opacity: 0.7;
    }
}

.trade-gallery-card-es-stub {
    position: absolute;
    inset: 0;
    z-index: 16;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 18px;
    color: var(--text-secondary);
    background:
        radial-gradient(120% 85% at 50% 8%, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0) 58%),
        rgba(8, 10, 14, 0.72);
    border-top: 1px solid rgba(245, 158, 11, 0.16);
    backdrop-filter: blur(1.5px);
}

.trade-gallery-card-es-stub-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.02em;
}

.trade-gallery-card-es-stub-copy {
    margin-top: 7px;
    max-width: 250px;
    font-size: 0.73rem;
    line-height: 1.38;
    color: rgba(226, 232, 240, 0.92);
}

.tg-quick-tags-wrap {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 28;
    display: inline-flex;
    gap: 6px;
    pointer-events: auto;
    transform: translateY(-22%);
}

.tg-quick-tag-chip {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    border-radius: 4px;
    position: relative;
    overflow: visible;
    cursor: help;
}

/* Filled state: opaque dark surface + neutral subtle border. Solid
   background so the label never blends into the underlying chart card,
   but the border stays muted so the chip doesn't visually compete with
   trade-data and the chart itself. */
.tg-quick-tag-chip:not(.is-empty) {
    background: #14171d;
    border: 1px solid rgba(226, 232, 240, 0.22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.tg-quick-tag-chip:not(.is-empty):hover {
    background: #1a1e25;
    border-color: rgba(226, 232, 240, 0.38);
}

/* Empty state stays subtle / placeholder-ish, unchanged design intent. */
.tg-quick-tag-chip.is-empty {
    opacity: 0.5;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(16, 20, 28, 0.52) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.tg-quick-tag-chip.is-empty:hover {
    opacity: 0.62;
    border-color: rgba(255, 255, 255, 0.34);
}

.tg-quick-tag-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.7rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    color: rgba(241, 245, 249, 0.9);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    transform: translateY(0.5px);
}

.trade-gallery-card-quality-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(10, 10, 12, 0.72);
    backdrop-filter: blur(2px);
}

.trade-gallery-card-stats {
    /* Symmetric vertical padding so the gap above the R:R label matches
       the gap below the SL value. Horizontal inset stays larger to keep
       the columns clear of the rounded card edge. */
    --tg-stats-inner-pad: 10px;
    --tg-stats-pad-h: 14px;
    box-sizing: border-box;
    padding: var(--tg-stats-inner-pad) var(--tg-stats-pad-h);
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Hard-lock total stats height. Using `height` (not min-height) prevents
       any per-card content from making one row's worth of cards stretch
       taller than another (CSS grid `align-items: stretch` was lifting all
       siblings to the tallest one). Set to 130 — fits winner R:R+TP+SL
       content + loser verdict-hero+would-save row without crowding,
       and is ~14px shorter than the previous 144. */
    height: 130px;
    min-height: 130px;
    background: var(--bg-card);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.tg-stats-shell {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    /* Grow to fill the parent's min-height (122px) so left & right columns
       expand identically regardless of internal content. Without `flex: 1`,
       the shell hugs its tallest child and a BE card (short right column)
       would let the left column shrink → date row drifts up. */
    flex: 1 1 auto;
    min-height: 0;
}

.tg-stats-col--left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
    align-self: stretch;
    overflow: hidden;
}

.tg-stats-primary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.tg-stats-pnl.trade-gallery-card-pnl.large {
    font-size: 1.48rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.tg-stats-pts {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.tg-stats-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: auto;
}

.tg-stats-meta .trade-gallery-card-merged,
.tg-stats-meta .tg-merged-badge {
    margin: 0;
}

.tg-stats-datetime {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Economic-news chip on the trade card (under the date). Colour by impact;
   the "near a release" variant gets a slightly bolder fill. */
.tg-stats-news-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 7px 1px 6px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
    cursor: default;
}
.tg-stats-news-chip .tg-news-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tg-stats-news-chip.is-high {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.32);
}
.tg-stats-news-chip.is-high .tg-news-chip-dot { background: #ef4444; }
.tg-stats-news-chip.is-med {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.13);
    border-color: rgba(245, 158, 11, 0.3);
}
.tg-stats-news-chip.is-med .tg-news-chip-dot { background: #f59e0b; }
/* "near a release" = bolder fill so it pops vs the same-day fallback. */
.tg-stats-news-chip.is-near.is-high { background: rgba(239, 68, 68, 0.2); }
.tg-stats-news-chip.is-near.is-med { background: rgba(245, 158, 11, 0.2); }

.tg-stats-symbol {
    padding-top: 0;
    margin-top: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.tg-stats-ticker {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
}

.tg-stats-entry-px {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.tg-stats-col--right {
    flex: 0 1 46%;
    max-width: 50%;
    min-width: 112px;
    /* Stretch to match left column's height, then vertically center the
     * R:R + TP/SL content inside. This makes the top "R:R … Needs to
     * be set" gap-to-chart equal to the bottom "Add SL … card-edge"
     * gap regardless of which conditional rows appear above.
     * `space-evenly` distributes free space symmetrically around AND
     * between the two children (rr-block + tp-sl row).
     *
     * min-height locks the column to the SAME height for every layout
     * variant (regular R:R/TP/SL grid, BE stamp, etc.). Without this,
     * a BE-tagged card's stats-shell would shrink to fit the shorter
     * BE stamp, and the LEFT column's date/time row (margin-top: auto
     * pushes to bottom) would drift up by ~17px → the user-reported
     * "date moved away from bottom" bug on BE cards. Value matches
     * the natural height of the R:R + TP/SL grid (~88px).
     */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 0;
    /* Bumped 88→110 after Eff cell joined the top row — the 2-row grid
       needs more vertical room so space-evenly distributes equal gaps
       above first row, between rows, below last row. */
    min-height: 110px;
    --tg-stats-divider: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px 4px 2px;
    margin: -4px -4px -2px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Whole right column is a click-target → cursor + hover feedback +
   tooltip on hover signal "interactive zone". Click anywhere inside
   opens the MiniChartModal pre-targeted at whichever side is missing
   (handled in tgBindGalleryCardStatsInteractions). The negative
   margin + padding pair gives the hover halo a small "breathing"
   inset without shifting layout. */
/* Right-stats column is no longer a whole-area click target — per-cell
   buttons (Add SL, Add TP, populated values) handle their own clicks.
   Old amber-tinted hover halo + cursor:pointer removed per user request
   so the right zone doesn't compete visually with the card-body click. */

/* P3.1 unified "Needs your input" placeholder — fills the right column
   when the user hasn't completed Step-1 (BE vs Directional). Same
   styling for winners AND losers: one cohesive "you owe the system an
   input" affordance. */
.tg-stats-needs-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 0 10px;
    gap: 6px;
}
.tg-stats-needs-input__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fbbf24;
    line-height: 1.15;
    text-decoration: underline dashed rgba(251, 191, 36, 0.45);
    text-underline-offset: 4px;
    animation: tg-stats-missing-pulse 2.4s ease-in-out infinite;
}
.tg-stats-needs-input__sub {
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.78);
    line-height: 1.25;
    letter-spacing: 0;
}
.tg-stats-needs-input__arrow {
    display: inline-block;
    margin-left: 2px;
    color: #fbbf24;
    font-weight: 700;
    transition: transform 0.18s ease;
}
.trade-gallery-card:hover .tg-stats-needs-input__arrow {
    transform: translateX(3px);
}

/* P3.1: when Step-1 (BE vs Directional) hasn't been answered, hide the
   planned-levels block + divider in the trade-detail side column. The
   Step-1 panel takes the FULL right column so the BE question is
   visually the first thing the user is asked — no competing amber
   pulse from the rrtpsl block. */
.lj-detail-v2__rightcol.is-step1-pending .lj-detail-v2__rrtpsl,
.lj-detail-v2__rightcol.is-step1-pending .lj-detail-v2__divider,
.lj-detail-v2__rightcol.is-be-state .lj-detail-v2__rrtpsl,
.lj-detail-v2__rightcol.is-be-state .lj-detail-v2__divider {
    display: none;
}
/* Override the rightcol's grid-template-rows so the ideal-panel-host
   takes the FULL column height when only it is visible (rrtpsl +
   divider are display:none under .is-step1-pending). Without this the
   host stays clamped to the 3fr track (~60% of column) and the panel
   inside it can't span the full 640px to center its content. */
.lj-detail-v2__rightcol.is-step1-pending {
    grid-template-rows: 1fr;
}
.lj-detail-v2__rightcol.is-step1-pending .lj-ideal-panel-host {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
}
/* The panel itself becomes a vertical flex container so the header sits
   at the natural top and the Step-1 toggle is pushed to the visual
   center of the remaining empty space via `margin: auto 0`. This makes
   the buttons feel balanced in the column instead of glued under the
   header with a tall empty zone below. */
.lj-detail-v2__rightcol.is-step1-pending .lj-ideal-panel {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    min-height: 0;
}
.lj-detail-v2__rightcol.is-step1-pending .lj-ideal-panel .lj-ideal-toggle--step1,
.lj-detail-v2__rightcol.is-step1-pending .lj-ideal-toggle.lj-ideal-toggle--step1 {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* ----- P3.1: Unified side-panel header --------------------------------
   Anchors the trade-evaluation column with a label + stage-specific
   sub. Repeats verbatim on Step-1, BE summary, and the directional
   flow so first-time users immediately understand "this side column =
   trade evaluation input". */
.lj-ideal-panel__header {
    padding: 12px 14px 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    flex: 0 0 auto;
}
.lj-ideal-panel__header-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 158, 11, 0.85);
    line-height: 1.1;
    margin-bottom: 4px;
}
.lj-ideal-panel__header-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.78);
    line-height: 1.3;
    letter-spacing: 0.005em;
}

/* ----- P3.1: Step-1 outcome gate (BE vs Directional) ------------------
   Sits in the trade-detail side panel before the existing winner/loser
   verdict flow. Two stacked verdict-style buttons. Compound-class
   selector + later-defined `.lj-ideal-panel--vertical .lj-ideal-toggle`
   rule at line ~13634 sets `1fr 1fr` for vertical panels at the same
   specificity, so we use `.lj-ideal-toggle.lj-ideal-toggle--step1`
   (2 classes on same element = (0,2,0)) which beats the parent-descendant
   (0,1,1) AND a compound + parent rule for max safety. */
.lj-ideal-toggle.lj-ideal-toggle--step1,
.lj-ideal-panel--vertical .lj-ideal-toggle.lj-ideal-toggle--step1 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 0 14px 14px;
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 20px;
    gap: 8px;
    /* Fixed height + equal row sizing on the parent grid forces both
       buttons to render identical dimensions regardless of label/hint
       length. Without this the BE hint's 3rd line stretched only that
       button, leaving the directional one visibly shorter. */
    height: 140px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Directional button — subtle corner-glow gradient from top-right
   indicating the trade's outcome direction (green = winner, red = loser).
   Replaces the amber-tinted background. The ::after pseudo handles the
   gradient so the button's base bg stays neutral and the glow can
   independently brighten on hover. BE button keeps its neutral look. */
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.18s ease;
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="win"]::after {
    background: radial-gradient(circle at top right,
        rgba(52, 211, 153, 0.32) 0%,
        rgba(52, 211, 153, 0.12) 38%,
        transparent 75%);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="win"] {
    border-color: rgba(52, 211, 153, 0.22);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="win"]:hover:not(:disabled) {
    border-color: rgba(52, 211, 153, 0.4);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="loss"]::after {
    background: radial-gradient(circle at top right,
        rgba(248, 113, 113, 0.32) 0%,
        rgba(248, 113, 113, 0.12) 38%,
        transparent 75%);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="loss"] {
    border-color: rgba(248, 113, 113, 0.22);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"][data-pnl-sign="loss"]:hover:not(:disabled) {
    border-color: rgba(248, 113, 113, 0.4);
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__btn[data-step1="directional"]:hover:not(:disabled)::after {
    opacity: 1;
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__txt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__lbl,
.lj-ideal-panel--vertical .lj-ideal-toggle--step1 .lj-ideal-toggle__lbl {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.lj-ideal-toggle--step1 .lj-ideal-toggle__hint,
.lj-ideal-panel--vertical .lj-ideal-toggle--step1 .lj-ideal-toggle__hint {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1.4;
    white-space: normal;
    max-width: 90%;
}

/* BE summary state — shown after Step-1=be. Centered stamp + headline
   + sub. The "Back" button below is intentionally muted (not bright)
   so it doesn't compete with the summary as the primary content. */
/* BE-layout panel — vertical stack with content wrapper centered and
   back-button anchored at the bottom of the column. The rightcol caps at
   640px (chart height), so we span that full envelope here. */
.lj-ideal-panel--be-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.lj-detail-v2__rightcol.is-be-state .lj-ideal-panel-host {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.lj-detail-v2__rightcol.is-be-state {
    grid-template-rows: 1fr;
}
.lj-ideal-panel__be-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: 0;
}
.lj-ideal-panel--be-layout .lj-ideal-panel__be-back {
    flex: 0 0 auto;
    margin-top: 8px;
}

.lj-ideal-panel__be-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px 18px;
    background: linear-gradient(180deg,
        rgba(148, 163, 184, 0.08) 0%,
        rgba(148, 163, 184, 0.03) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Subtle radial backdrop behind the BE stamp — adds depth without
   competing with the headline. */
.lj-ideal-panel__be-summary::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(148, 163, 184, 0.1) 0%,
        transparent 65%);
    pointer-events: none;
}
.lj-ideal-panel__be-summary-stamp {
    /* Bigger, centered circular stamp with a stylised "=" mark inside
       (visually conveying "flat / no movement" — better than a generic
       filled dot). Soft slate-gray ring, no jarring color. */
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.1);
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    color: rgba(203, 213, 225, 0.92);
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}
.lj-ideal-panel__be-stamp-eq {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.lj-ideal-panel__be-summary-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.012em;
    position: relative;
    z-index: 1;
}
.lj-ideal-panel__be-summary-sub {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    line-height: 1.35;
    max-width: 88%;
    position: relative;
    z-index: 1;
}
.lj-ideal-panel__be-summary-pnl {
    margin-top: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
.lj-ideal-panel__be-summary-pnl-k {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lj-ideal-panel__be-summary-pnl-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.lj-ideal-panel__be-summary-pnl-val.is-pos { color: #34d399; }
.lj-ideal-panel__be-summary-pnl-val.is-neg { color: #f87171; }

/* Trade-detail grid below the headline summary card. Two-column with
   tabular-nums so values align vertically. Compact but legible. */
.lj-ideal-panel__be-details {
    margin: 12px 8px 0;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lj-ideal-panel__be-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.lj-ideal-panel__be-detail-k {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.lj-ideal-panel__be-detail-v {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

/* "Counted in BE stats" pill — sits just above the back button so the
   user understands what marking BE actually means for their analytics. */
.lj-ideal-panel__be-badge {
    margin: 12px 8px 0;
    padding: 8px 12px;
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(125, 211, 252, 0.85);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.005em;
}
.lj-ideal-panel__be-badge-dot {
    color: #38bdf8;
    margin-right: 4px;
    font-size: 0.7em;
    vertical-align: middle;
}
.lj-ideal-panel__be-back {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-tertiary);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lj-ideal-panel__be-back:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.16);
}
.lj-ideal-panel__be-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Top row of the 2×2 grid: R:R | Efficiency. Both cells share the same
   width via grid 1fr/1fr. Visual divider lives ONLY at the bottom of
   the row (separating top from TP/SL row); vertical divider between
   the two top cells is a hairline. */
.tg-stats-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    flex: 0 0 auto;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--tg-stats-divider);
}

.tg-stats-rr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    flex: 0 0 auto;
    min-height: 0;
    /* Hairline divider between R:R and Eff. */
    border-right: 1px solid var(--tg-stats-divider);
    padding-right: 4px;
}

/* Efficiency cell — mirrors R:R block dimensions. */
.tg-stats-eff-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    flex: 0 0 auto;
    min-height: 0;
    padding-left: 4px;
}

.tg-stats-eff-val {
    font-size: 1.26rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Efficiency tier text — unified to neutral white. The number itself
   (e.g. "57%") tells the user how they did; rainbow-coloring it added
   noise. If we want tier glanceability later we'll do it via tile
   background tint, not text color. */
.tg-stats-eff-val.is-red    { color: #38bdf8; }
/* Medium tier (50-89%) — was amber #fbbf24, but that clashes with the
   amber "Needs your input" CTA on neighbor cards (same hue read as same
   semantic in the gallery scan). Shifted to a neutral cyan-teal so:
     red    = bad,
     cyan   = acceptable but not great,
     green  = great,
     amber  = exclusively "user action needed" (unused for filled EFF).
   The number itself still tells the user "78% → middle ground"; color
   only reinforces the extreme tiers. */
.tg-stats-eff-val.is-amber  { color: #38bdf8; }
.tg-stats-eff-val.is-green  { color: #38bdf8; }
.tg-stats-eff-val.is-neutral { color: #38bdf8; font-size: 1.05rem; }
.tg-stats-eff-val.is-be { color: #38bdf8; font-size: 1.05rem; }
.tg-stats-eff-val.is-be-over { color: #38bdf8; font-size: 1.05rem; }

/* ---- Loser-stop VERDICT HERO + bottom row ---------------------------
   For a stopped-out trade, the user's chosen "why I got stopped" verdict
   is the headline. It takes the full top of the right column (not a small
   2x2 cell). Below it: real SL + optional "would-save SL" if the user
   defined a hypothetical wider SL via the stop-analysis modal.
*/
/* Verdict hero block — sits where winner R:R+EFF top-row sits. Same
   vertical footprint (do NOT add gap/padding that grows the card height).
   Detail subline removed per UX feedback; the verdict text is its own
   summary, with full reasoning surfaced via tooltip on hover. */
.tg-stats-verdict-hero-block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* No padding, no border — winner top-row uses 5px+1px which is what
       creates the visual divider WITH the next row. Loser doesn't need a
       second visible divider; the bottom row's natural separation is
       enough, and removing this saves 6px of card height. */
    padding: 0 4px;
}

/* Solo-mode variant: verdict picked but no Would-save SL pair to compare
   against (BE saved / BE killed / Stop justified, or stop-too-tight that
   didn't recover). The bottom Real SL cell would just duplicate the
   left-column "-X pts", so it's omitted — this hero takes the full
   column with verdict + detail subtitle + meta line stack. */
.tg-stats-verdict-hero-block--solo {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 0 10px;
}
.tg-stats-verdict-hero-detail {
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.85);
    letter-spacing: 0.005em;
    line-height: 1.35;
    text-align: center;
    max-width: 92%;
}
.tg-stats-verdict-hero-meta {
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.65);
    letter-spacing: 0;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Missing-state variant: hero takes the FULL right column (Real SL cell
   was dropped to avoid duplicating -X.X pts from the left side). Hero +
   CTA sub-prompt stack vertically, centered in the column. Cursor hint
   + soft amber tint signal "this is interactive". */
.tg-stats-verdict-hero-block--cta {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 0 8px;
    cursor: pointer;
}
.tg-stats-verdict-cta-sub {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(148, 163, 184, 0.78);
    letter-spacing: 0;
}
.tg-stats-verdict-cta-arrow {
    display: inline-block;
    margin-left: 2px;
    color: #fbbf24;
    font-weight: 700;
    transition: transform 0.18s ease;
}
/* Animate the CTA arrow on whole-card hover instead of right-zone hover
   (right zone is no longer interactive). The card-body click still opens
   trade detail, so the arrow's "tap to evaluate" meaning is preserved. */
.trade-gallery-card:hover .tg-stats-verdict-cta-arrow {
    transform: translateX(3px);
}
.tg-stats-verdict-hero {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.005em;
    /* Single-line + ellipsis: a long verdict ("BE killed a winner") must
       NOT wrap onto a 2nd line, because that would inflate the right
       column past its 130px lock and pull all sibling cards in the same
       grid row up to match. Tooltip on hover surfaces the full string. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Unified verdict text — ALL filled evaluation results share one
   sky-blue accent. Distinct from money colors (green/red), distinct
   from CTA amber, distinct from default white data values. Reads as
   "this is analysis output" at a glance. Premium signal. */
.tg-stats-verdict-hero.is-be,
.tg-stats-verdict-hero.is-be-over,
.tg-stats-verdict-hero.is-stop-fine,
.tg-stats-verdict-hero.is-stop-tight {
    color: #38bdf8;
}
.tg-stats-verdict-hero--missing {
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: underline dashed rgba(251, 191, 36, 0.45);
    text-underline-offset: 4px;
    animation: tg-stats-missing-pulse 2.4s ease-in-out infinite;
    /* Missing-state hero takes full right column — allow natural wrap
       so "Not evaluated" never truncates on narrow viewports. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
@keyframes tg-stats-missing-pulse {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

/* Loser bottom row — same vertical structure as winner .tg-stats-tp-sl
   so the card never grows. SL values across the two cells share a fixed
   baseline (min-height on the value line) so "29.75 pts" and "70.00 pts"
   sit at the same Y for direct visual comparison, regardless of whether
   the label or source-line wraps. */
.tg-stats-loser-bottom {
    display: grid;
    gap: 0;
    align-items: stretch;
    /* No padding-top — winner .tg-stats-tp-sl has none either. */
    padding-top: 0;
}
.tg-stats-loser-bottom.is-single { grid-template-columns: 1fr; }
.tg-stats-loser-bottom.is-pair   { grid-template-columns: 1fr 1fr; }
.tg-stats-loser-bottom.is-pair .tg-stats-sl--loser {
    border-right: 1px solid var(--tg-stats-divider);
    padding-right: 6px;
}
.tg-stats-loser-bottom.is-pair .tg-stats-sl--wouldsave {
    padding-left: 6px;
}
.tg-stats-loser-bottom .tg-stats-sl {
    display: grid;
    grid-template-rows: auto auto auto;
    align-items: start;
    justify-items: center;
    text-align: center;
    gap: 1px;
}
/* Value line — natural height to match winner. Baseline alignment between
   the two SL cells is already guaranteed because both sit on row 2 of the
   same 3-row CSS grid (.tg-stats-loser-bottom .tg-stats-sl) — no extra
   min-height needed (it just inflated the card). */
.tg-stats-loser-bottom .tg-stats-item-line {
    display: flex;
    align-items: center;
}
/* Would-save value & detail — sky-blue. Part of the same "evaluation
   result" group as verdict + EFF: one accent color across all analysis
   output keeps the card's color signal coherent. Sublabel uses dimmed
   sky-blue to fade into the visual hierarchy of sub-captions. */
.tg-stats-item-v.tg-stats-item-v--save {
    color: #38bdf8;
    font-weight: 700;
}
.tg-stats-source.tg-stats-source--save {
    color: rgba(56, 189, 248, 0.6);
    opacity: 1;
}

/* Loser-stop card-stats grid (LEGACY single-row layout, retained for any
   downstream consumer still keying off this class — current card now uses
   the same 2×2 grid as winners via .tg-stats-top-row + .tg-stats-tp-sl). */
.tg-stats-loser-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    width: 100%;
    height: 100%;
    align-items: center;
}
.tg-stats-loser-grid .tg-stats-sl--loser {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    border-right: 1px solid var(--tg-stats-divider);
    padding-right: 6px;
}
.tg-stats-loser-grid .tg-stats-eff-block {
    padding-left: 6px;
}

/* BE-saved toggle on-state — green (matches .is-be chip + eff badge). */
.lj-ideal-toggle__btn.is-on[data-val="loser-be-saved"] {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%);
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 4px 14px -4px rgba(52, 211, 153, 0.32);
}
.lj-ideal-toggle__btn.is-on[data-val="loser-be-saved"] .lj-ideal-toggle__lbl {
    color: #34d399;
}
/* BE-overshoot toggle on-state — red (matches .is-be-over chip). */
.lj-ideal-toggle__btn.is-on[data-val="loser-be-overshoot"] {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.18) 0%, rgba(248, 113, 113, 0.08) 100%);
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25), 0 4px 14px -4px rgba(248, 113, 113, 0.32);
}
.lj-ideal-toggle__btn.is-on[data-val="loser-be-overshoot"] .lj-ideal-toggle__lbl {
    color: #fca5a5;
}
/* Stop-justified on-state — neutral grey (matches mode chip). */
.lj-ideal-toggle__btn.is-on[data-val="stop-justified"] {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.06) 100%);
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2), 0 4px 14px -4px rgba(148, 163, 184, 0.28);
}
.lj-ideal-toggle__btn.is-on[data-val="stop-justified"] .lj-ideal-toggle__lbl {
    color: #e2e8f0;
}

.tg-stats-eff-val--placeholder {
    color: rgba(148, 163, 184, 0.45);
    font-size: 1.1rem;
    font-weight: 600;
}

.tg-stats-eff-block.missing {
    cursor: help;
    opacity: 0.7;
}

.tg-stats-rr-val {
    font-size: 1.26rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #e4e7ec;
    font-variant-numeric: tabular-nums;
}

/* Placeholder: same size as TP/SL values; min-height matches one line of filled .tg-stats-rr-val */
.tg-stats-rr-block.missing .tg-stats-rr-val {
    color: #f59e0b;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
    cursor: help;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-height: calc(1.26rem * 1.1);
    display: grid;
    place-items: center;
    text-align: center;
    word-break: break-word;
}

.tg-stats-tp-sl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    padding-top: 0;
    align-items: stretch;
}

.tg-stats-tp,
.tg-stats-sl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 1px;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding-top: var(--tg-stats-inner-pad);
    padding-bottom: var(--tg-stats-inner-pad);
}

.tg-stats-tp {
    border-right: 1px solid var(--tg-stats-divider);
    padding-right: 8px;
    padding-left: 0;
}

.tg-stats-sl {
    padding-left: 8px;
    padding-right: 0;
}

.tg-stats-item-k {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.tg-stats-item-k--targeted-tp,
.tg-stats-item-k--targeted-rr {
    font-size: 0.54rem;
    letter-spacing: 0.05em;
    line-height: 1.15;
    max-width: 100%;
}

.tg-stats-item-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

.tg-stats-item-v {
    font-size: 0.76rem;
    font-weight: 600;
    color: #e4e7ec;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

/* Same metrics as .tg-stats-item-v — only color differs */
.tg-stats-tp.missing .tg-stats-item-v,
.tg-stats-sl.missing .tg-stats-item-v {
    color: #f59e0b;
    cursor: help;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.trade-gallery-card-ticker {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
}

.trade-gallery-card-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.trade-gallery-card-badge.win {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.trade-gallery-card-badge.loss {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.trade-gallery-card-merged {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    letter-spacing: 0.03em;
}

/* Merged badge with hover tooltip (replaces legacy .trade-gallery-card-merged in card stats) */
.tg-merged-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    background: transparent;
    letter-spacing: 0.02em;
    cursor: help;
    outline: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Merge badge — slim text-only row between symbol and date in the
   left stats column. Always reserves a fixed-height slot so single
   and merged cards keep identical layouts. Dim styling matches
   `.tg-stats-entry-px` for a subtle secondary read. */
.tg-stats-merge-slot {
    min-height: 14px;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.tg-stats-merge-placeholder {
    display: block;
    height: 14px;
}

/* Contracts label — fills the merge-slot for non-merged trades. Visual
   tone matches the merge badge (dim, small caps-ish) so the slot reads
   uniformly across merged vs single-leg cards. */
.tg-stats-contracts {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.72);
    letter-spacing: 0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tg-stats-merge-slot .tg-merged-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: help;
}

.tg-stats-merge-slot .tg-merged-badge:hover,
.tg-stats-merge-slot .tg-merged-badge:focus-visible {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
}

.tg-stats-merge-slot .tg-merged-badge-count {
    font-weight: 600;
}

.tg-stats-merge-slot .tg-merged-badge-icon {
    color: var(--text-tertiary);
    transform: translateY(0.5px);
}

.tg-stats-merge-slot .tg-merged-badge-max {
    padding: 0;
    margin: 0;
    border-left: 0;
    color: var(--text-tertiary);
    font-size: 0.66rem;
}
.tg-stats-merge-slot .tg-merged-badge-max::before {
    content: '· ';
    color: var(--text-tertiary);
    margin-right: 1px;
}

.tg-merged-badge:hover,
.tg-merged-badge:focus-visible {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-medium);
    color: var(--text-primary, #fafafa);
}

.tg-merged-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    line-height: 0;
}

.tg-merged-badge:hover .tg-merged-badge-icon,
.tg-merged-badge:focus-visible .tg-merged-badge-icon {
    color: var(--text-secondary);
}

.tg-merged-badge-max {
    padding-left: 7px;
    margin-left: 1px;
    border-left: 1px solid var(--border-light);
    font-weight: 500;
    font-size: 0.66rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.tg-merged-badge:hover .tg-merged-badge-max,
.tg-merged-badge:focus-visible .tg-merged-badge-max {
    color: var(--text-secondary);
    border-left-color: var(--border-medium);
}

/* Body-portal tooltip — escapes overflow:hidden ancestors */
.tg-merged-tooltip-template { display: none; }

.tg-merged-tooltip-portal {
    position: fixed;
    z-index: 9999;
    width: max-content;
    max-width: 380px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(14, 18, 24, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    text-align: left;
    letter-spacing: 0.01em;
    font-weight: 500;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tg-merged-tooltip-portal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tg-merged-tooltip-portal[data-placement="bottom"] {
    transform: translateY(-4px);
}
.tg-merged-tooltip-portal[data-placement="bottom"].is-visible {
    transform: translateY(0);
}

/* Simplified merge hover popover — flat list, faint dividers only.
   No boxes around legs, no border-bottom on header, no glow on summary.
   Reads like a clean data table. */
.tg-merged-tip-head {
    margin-bottom: 8px;
}

.tg-merged-tip-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tg-merged-tip-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 18px;
    margin-bottom: 10px;
}

.tg-merged-tip-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

.tg-merged-tip-summary strong {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.tg-merged-tip-summary strong.pos { color: #34d399; }
.tg-merged-tip-summary strong.neg { color: #f87171; }

.tg-merged-tip-legs-head {
    margin: 8px 0 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
}

.tg-merged-tip-legs {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    max-height: 220px;
    overflow-y: auto;
}

/* Leg row — borderless, baseline divider line between rows */
.tg-merged-tip-leg {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: baseline;
    gap: 2px 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.tg-merged-tip-leg:last-child { border-bottom: 0; }

.tg-merged-tip-leg-num   { color: var(--text-tertiary); }
.tg-merged-tip-leg-qty   { color: var(--text-primary); font-weight: 600; }
.tg-merged-tip-leg-px    { color: var(--text-secondary); }
.tg-merged-tip-leg-pts   { font-weight: 500; }
.tg-merged-tip-leg-pnl   { font-weight: 600; }

.tg-merged-tip-leg .pos { color: #34d399; }
.tg-merged-tip-leg .neg { color: #f87171; }

.tg-merged-tip-leg-time {
    grid-column: 1 / -1;
    font-size: 0.62rem;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    padding-top: 1px;
}

.tg-merged-tip-foot {
    margin-top: 6px;
    font-size: 0.64rem;
    color: var(--text-tertiary);
}

/* Merged legs panel inside trade detail modal */
.trades-shared-detail-legs {
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
    border: 1px solid rgba(245, 158, 11, 0.22);
}

/* Compact summary row — always visible */
.tg-legs-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tg-legs-compact-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}

.tg-legs-compact-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.02em;
}

.tg-legs-compact-pnl {
    font-size: 1.05rem;
    font-weight: 800;
}

.tg-legs-compact-pnl.pos { color: #4ade80; }
.tg-legs-compact-pnl.neg { color: #f87171; }

.tg-legs-compact-pts {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tg-legs-compact-best {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-legs-compact-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-legs-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tg-legs-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.22);
}

.tg-legs-toggle-caret {
    font-size: 0.75rem;
    line-height: 1;
}

/* Expandable details — hidden in collapsed mode */
.tg-legs-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(245, 158, 11, 0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-legs-collapsed .tg-legs-details {
    display: none;
}

.tg-legs-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.tg-legs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tg-legs-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
}

.tg-legs-title-main {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.02em;
}

.tg-legs-title-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tg-legs-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tg-legs-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.tg-legs-chip strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tg-legs-chip.pos {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.tg-legs-chip.pos strong { color: #4ade80; }

.tg-legs-chip.neg {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.tg-legs-chip.neg strong { color: #f87171; }

.tg-legs-unmerge-all-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tg-legs-unmerge-all-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
}

.tg-legs-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}

.tg-legs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.tg-legs-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tg-legs-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.tg-legs-table tbody tr:last-child td {
    border-bottom: none;
}

.tg-legs-num {
    font-weight: 700;
    color: var(--text-tertiary);
    width: 36px;
}

.tg-legs-qty {
    font-weight: 700;
    color: var(--text-primary);
    width: 56px;
}

.tg-legs-time {
    color: var(--text-tertiary);
    white-space: nowrap;
}

.tg-legs-px {
    color: var(--text-primary);
    white-space: nowrap;
}

.tg-legs-arrow {
    color: var(--text-tertiary);
    margin: 0 2px;
}

.tg-legs-pts {
    font-weight: 600;
    white-space: nowrap;
}

.tg-legs-pts.pos { color: #4ade80; }
.tg-legs-pts.neg { color: #f87171; }

.tg-legs-pnl {
    font-weight: 700;
    white-space: nowrap;
}

.tg-legs-pnl.pos { color: #4ade80; }
.tg-legs-pnl.neg { color: #f87171; }

.tg-legs-actions {
    text-align: right;
    width: 92px;
}

.tg-legs-detach-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tg-legs-detach-btn:hover {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fef3c7;
}

.tg-legs-foot-hint {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-style: italic;
    line-height: 1.45;
}

.trade-gallery-card-date {
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

.trade-gallery-card-pnl {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.trade-gallery-card-pnl.large {
    font-size: 1.18rem;
    line-height: 1;
}

.trade-gallery-card-pnl.positive {
    color: #4ade80;
}

.trade-gallery-card-pnl.negative {
    color: #f87171;
}

.trade-gallery-inline-set {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
    font-size: 0.68rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 6px;
    cursor: pointer;
}

.trade-gallery-inline-set:hover {
    background: rgba(245, 158, 11, 0.16);
}

.tv-lightweight-charts a[href*="tradingview"],
#daily-chart-root a[href*="tradingview"],
[id^="mini-chart-container-"] a[href*="tradingview"],
.trade-gallery-card-chart a[href*="tradingview"] {
    display: none !important;
    visibility: hidden !important;
}

.trades-shared-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 3600;
    display: none;
    /* P2 v2: overlay is the scroll surface (was the modal). This lets
       the modal grow with content while keeping nav arrows + day-info +
       close button correctly positioned relative to the modal as it
       scrolls.
       P72.D.35: vertically center via `safe center` — modal floats in the
       middle on tall monitors (was pinned to top with empty space below),
       and `safe` falls back to top-align if the modal exceeds viewport
       height so the top stats / chrome don't get clipped. */
    align-items: safe center;
    justify-content: center;
    background: rgba(10, 16, 28, 0.18);
    backdrop-filter: blur(4px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 90px 0 40px;
    /* Custom scrollbar so the modal doesn't fall back to the default
       narrow browser one. Width 14px is fat enough for comfortable
       mouse-drag, color matches the site palette. */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.5) rgba(255, 255, 255, 0.04);
}

.trades-shared-detail-overlay::-webkit-scrollbar {
    width: 14px;
}

.trades-shared-detail-overlay::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
}

.trades-shared-detail-overlay::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.45);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
    min-height: 60px;
    transition: background 0.15s ease;
}

.trades-shared-detail-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.78);
    background-clip: content-box;
}

.trades-shared-detail-overlay.active {
    display: flex;
}

/* Sized relative to workspace shell so wide monitors don't clip / pin too
 * narrow. Uses same --content-shell-max as :root (~1472 usable inner cols).
 * P72.D follow-up: capped at 1500px max — without this cap, wide monitors
 * (>1900vw) stretched the modal to ~1750px and the layout felt sprawled.
 * 1500 is a sweet spot where chart stays readable and wizard column doesn't
 * grow obscenely wide. */
.trades-shared-detail-shell {
    width: min(calc(var(--content-shell-max) + 152px), calc(100vw - 24px), 1500px);
    /* P72.D.35 — on very wide monitors (2K+), let the modal scale up so
       it doesn't look stranded inside acres of empty space. Stays capped
       so the wizard column doesn't grow obscenely. */
    display: grid;
    /* Single column — nav arrows are now position:fixed (viewport-pinned),
       so the 3-column grid layout that used to host them is gone. Without
       this collapse the modal grid-item landed in the leftover 132px slot
       and rendered as a narrow column. */
    grid-template-columns: minmax(0, 1fr);
    /* Sticky-top alignment matches the new outer-scroll overlay (was
       'center', which floated the shell into the middle of an
       overflowing modal). Position relative so absolute children
       (close btn, day-info, nav arrows) anchor to the shell at its
       current scroll position. */
    align-items: flex-start;
    gap: 8px;
    position: relative;
    box-sizing: border-box;
}
/* P72.D.35 — bigger-monitor breakpoints. Up to 1800px on QHD, 2000px on
   4K/ultrawide. Width grows; the inner 640px wizard body height stays
   the same, but the chart pane gets the extra room and the modal stops
   feeling lost in a sea of empty space. */
@media (min-width: 2200px) {
    .trades-shared-detail-shell {
        width: min(calc(100vw - 200px), 1800px);
    }
    /* P72.D.36 — height tracks width so the modal grows uniformly. */
    .trades-shared-detail-modal {
        --lj-modal-h: 760px;
    }
}
@media (min-width: 2800px) {
    .trades-shared-detail-shell {
        width: min(calc(100vw - 300px), 2000px);
    }
    .trades-shared-detail-modal {
        --lj-modal-h: 900px;
    }
}

.trades-shared-detail-modal {
    position: relative;
    width: 100%;
    /* P72.D.36 — modal body height scales with viewport on wide monitors
       via --lj-modal-h. The default (640px) comes from each consumer's
       `var(--lj-modal-h, 640px)` fallback so the media-query overrides
       above this rule still win at >2200px / >2800px. Defining it here
       would clobber the breakpoint overrides because of source order. */
    /* Removed max-height + overflow — outer overlay scrolls instead so
       the day-info label and close button at top:-62/-54 remain
       reachable. */
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(14, 14, 18, 0.98), rgba(8, 8, 11, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.trades-shared-detail-close {
    position: absolute;
    top: -54px;
    right: 150px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(11, 18, 32, 0.92);
    color: #f8fafc;
    font-size: 21px;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    font-family: Inter, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    text-indent: 0;
    text-align: center;
}

.trades-shared-detail-close:hover {
    border-color: rgba(245, 158, 11, 0.72);
    color: #fbbf24;
}

.trades-shared-detail-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.trades-shared-detail-day-info {
    position: absolute;
    left: 150px;
    top: -38px;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

/* Modal title — orient the user as to which screen they're on. Sits
   centered above the modal content, sibling to .day-info but visually
   higher. Subtle so it doesn't compete with the trade headline. */
.trades-shared-detail-title {
    position: absolute;
    top: -62px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* Card right-click context menu. Lives at document.body level so it
   isn't clipped by gallery's overflow boundaries. */
.tg-card-ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    padding: 4px;
    background: rgba(17, 23, 33, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    font-family: 'Outfit', sans-serif;
    animation: tg-ctx-menu-in 80ms ease-out;
}
@keyframes tg-ctx-menu-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tg-card-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(226, 232, 240, 0.92);
    font-size: 0.88rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.tg-card-ctx-item:hover,
.tg-card-ctx-item:focus-visible {
    background: rgba(245, 158, 11, 0.14);
    outline: none;
}
.tg-card-ctx-item svg {
    color: rgba(148, 163, 184, 0.85);
    flex-shrink: 0;
}
.tg-card-ctx-item:hover svg {
    color: rgba(245, 158, 11, 0.9);
}

/* ============================================================================
   Select mode — multi-pick cards for bulk merge
   ========================================================================== */

/* Checkbox affordance on each card. Hidden by default; visible only when the
   card is in select mode (.is-select-mode lives on the card itself, applied
   by tgBuildCard when tgSelectionState.mode === true). */
.tg-card-select-cb {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(148, 163, 184, 0.45);
    color: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tg-card-select-cb svg {
    width: 14px;
    height: 14px;
}
.trade-gallery-card.is-select-mode .tg-card-select-cb {
    display: flex;
}
.trade-gallery-card.is-select-mode {
    /* Tell the user clicking now toggles selection instead of opening. */
    cursor: pointer;
}
.trade-gallery-card.is-select-mode.is-selected {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.85), 0 8px 22px rgba(245, 158, 11, 0.18);
}
.trade-gallery-card.is-select-mode.is-selected .tg-card-select-cb {
    background: rgba(245, 158, 11, 0.95);
    border-color: rgba(245, 158, 11, 0.95);
    color: #0f172a;
}

/* Body class while in select mode — used to dim drag-related affordances
   that don't apply (e.g. the drag-cursor hint on hover). */
body.tg-select-mode .trade-gallery-card {
    user-select: none;
}

/* Inner card elements (TF buttons, quick-tag slots, speedometer, stats rows
   with their own click handlers) all use e.stopPropagation() to keep their
   clicks scoped. In select mode that would absorb the click before our
   card-level toggle handler could see it. Disable all child pointer events
   so the click lands on the card itself. The visual checkbox already uses
   pointer-events:none above, so it remains a passive affordance. */
.trade-gallery-card.is-select-mode > *:not(.tg-card-select-cb) {
    pointer-events: none;
}

/* ---- "No merge partner" dim ---------------------------------------------
   Two flavours, same visual treatment:
     - .tg-card-solo-day      static, added in tgBuildCard for day-with-1
                              trades. Only takes effect in select mode.
     - .is-non-mergeable      dynamic, added during drag to other-day cards,
                              or in select-mode once an anchor day is locked
                              and this card is on a different day.

   We avoid CSS `opacity` on the card host: opacity inherits to descendants
   *and* pseudo-elements, which would dim the reason text too. Instead we
   layer a ::before (semi-transparent dark) and ::after (reason copy) over
   the card, leaving the card itself at opacity:1 so the overlay stays crisp.
   ----------------------------------------------------------------------- */
.trade-gallery-card.is-non-mergeable,
body.tg-select-mode .trade-gallery-card.tg-card-solo-day {
    pointer-events: none;
    cursor: not-allowed;
}
/* ::before — semi-transparent dim layer covering the card content */
.trade-gallery-card.is-non-mergeable::before,
body.tg-select-mode .trade-gallery-card.tg-card-solo-day::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 12, 0.74);
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    animation: tg-dim-in 0.18s ease;
}
/* ::after — chunky semi-transparent watermark reason text. Sits centered
   over the dimmed card content like a stamp. Content varies per state so
   future "can't merge X" reasons just need a new ::after rule. */
.trade-gallery-card.is-non-mergeable::after,
body.tg-select-mode .trade-gallery-card.tg-card-solo-day::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: rgba(226, 232, 240, 0.48);
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 6;
    animation: tg-dim-in 0.24s ease;
}
.trade-gallery-card.is-non-mergeable::after {
    content: 'Cannot merge trades from different days';
}
body.tg-select-mode .trade-gallery-card.tg-card-solo-day::after {
    content: 'Only trade on this day — no merge partner';
}
@keyframes tg-dim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Selected card override — even when other classes might layer on (eg. a
   selected card that briefly inherits is-non-mergeable during a race),
   selection wins. Strip the dim overlay + restore pointer events. */
.trade-gallery-card.is-select-mode.is-selected {
    pointer-events: auto;
    cursor: pointer;
}
.trade-gallery-card.is-select-mode.is-selected::before,
.trade-gallery-card.is-select-mode.is-selected::after {
    display: none;
    content: none;
}

/* Floating action bar (bottom-center). Lives at body level so it isn't
   clipped by the gallery scroll container. */
.tg-selection-action-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: rgba(13, 18, 28, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    font-family: 'Outfit', sans-serif;
    color: rgba(226, 232, 240, 0.95);
    animation: tg-sel-bar-in 140ms ease-out;
    max-width: calc(100vw - 24px);
}
@keyframes tg-sel-bar-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.tg-sel-count {
    font-size: 0.92rem;
    white-space: nowrap;
}
.tg-sel-count strong {
    color: rgba(245, 158, 11, 0.95);
    font-size: 1.05rem;
    margin-right: 4px;
}
.tg-sel-hint {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.85);
    max-width: 360px;
}
.tg-sel-hint:empty {
    display: none;
}
.tg-sel-actions {
    display: flex;
    gap: 8px;
}
.tg-sel-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tg-sel-btn--primary {
    background: rgba(245, 158, 11, 0.92);
    color: #0f172a;
    border-color: rgba(245, 158, 11, 0.92);
}
.tg-sel-btn--primary:hover:not(:disabled) {
    background: rgba(251, 191, 36, 1);
    border-color: rgba(251, 191, 36, 1);
}
.tg-sel-btn--primary:disabled {
    background: rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.55);
    border-color: rgba(148, 163, 184, 0.25);
    cursor: not-allowed;
}
.tg-sel-btn--ghost {
    background: transparent;
    color: rgba(226, 232, 240, 0.85);
    border-color: rgba(148, 163, 184, 0.35);
}
.tg-sel-btn--ghost:hover {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(226, 232, 240, 1);
    border-color: rgba(148, 163, 184, 0.55);
}

/* Toolbar Select button — accent when active. */
.tg-toolbar-btn.is-active {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
    color: rgba(252, 211, 77, 0.95);
}

/* ============================================================================
   Custom confirm modal (ljConfirm()) — premium black-gold theme.
   ----------------------------------------------------------------------------
   Drop-in replacement for window.confirm with three size tiers and an
   optional bodyHtml slot for rich previews (used by Split Merged Trade).
   ========================================================================== */
.lj-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lj-confirm-modal .modal-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
        rgba(2, 6, 12, 0.78);
    backdrop-filter: blur(6px);
}

/* Card — multi-layer gradient + gold ring + heavy shadow. */
.lj-confirm-card {
    position: relative;
    background:
        radial-gradient(ellipse 110% 80% at 50% 0%, rgba(245, 158, 11, 0.07) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.98) 0%, rgba(10, 11, 16, 0.98) 100%);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 1px 0 rgba(245, 158, 11, 0.12) inset,
        0 40px 80px -20px rgba(0, 0, 0, 0.75),
        0 8px 30px rgba(245, 158, 11, 0.08);
    padding: 1.5rem 1.75rem 1.4rem;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-family: 'Outfit', sans-serif;
    animation: lj-confirm-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lj-confirm-modal--sm .lj-confirm-card { max-width: 460px; }
.lj-confirm-modal--md .lj-confirm-card { max-width: 580px; }
.lj-confirm-modal--wide .lj-confirm-card { max-width: 760px; }

@keyframes lj-confirm-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Top edge gold gradient line */
.lj-confirm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245, 158, 11, 0.55) 50%,
        transparent 100%);
    border-radius: 1px;
}

.lj-confirm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.lj-confirm-title-group {
    flex: 1;
    min-width: 0;
}
.lj-confirm-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: rgba(252, 211, 77, 0.96);
    letter-spacing: 0.01em;
}
.lj-confirm-title svg {
    color: rgba(245, 158, 11, 0.85);
    flex-shrink: 0;
}
.lj-confirm-subtitle {
    margin-top: 5px;
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.78);
    letter-spacing: 0.01em;
}
.lj-confirm-close {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lj-confirm-close:hover {
    background: rgba(148, 163, 184, 0.08);
    color: rgba(226, 232, 240, 0.95);
    border-color: rgba(148, 163, 184, 0.32);
}

.lj-confirm-body {
    color: rgba(226, 232, 240, 0.9);
}
.lj-confirm-message {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.88);
}

.lj-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.lj-confirm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}
.lj-confirm-btn:active { transform: translateY(1px); }
.lj-confirm-btn--cancel {
    background: transparent;
    color: rgba(203, 213, 225, 0.85);
    border-color: rgba(148, 163, 184, 0.28);
}
.lj-confirm-btn--cancel:hover {
    background: rgba(148, 163, 184, 0.1);
    color: rgba(226, 232, 240, 0.98);
    border-color: rgba(148, 163, 184, 0.45);
}
.lj-confirm-btn--primary {
    background: linear-gradient(180deg, rgba(252, 211, 77, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%);
    color: #0a0a0c;
    border-color: rgba(252, 211, 77, 0.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 8px 24px -8px rgba(245, 158, 11, 0.55);
}
.lj-confirm-btn--primary:hover {
    background: linear-gradient(180deg, rgba(254, 240, 138, 1) 0%, rgba(251, 191, 36, 1) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 10px 28px -8px rgba(245, 158, 11, 0.7);
}
.lj-confirm-btn--primary:focus-visible {
    outline: 2px solid rgba(252, 211, 77, 0.9);
    outline-offset: 2px;
}
.lj-confirm-btn--danger {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
    color: #fff;
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 8px 24px -8px rgba(220, 38, 38, 0.55);
}
.lj-confirm-btn--danger:hover {
    background: linear-gradient(180deg, rgba(252, 165, 165, 1) 0%, rgba(239, 68, 68, 1) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 10px 28px -8px rgba(220, 38, 38, 0.7);
}
.lj-confirm-btn--danger:focus-visible {
    outline: 2px solid rgba(252, 165, 165, 0.95);
    outline-offset: 2px;
}

/* ============================================================================
   Split Merged Trade — rich body content inside ljConfirm wide variant.
   ========================================================================== */
.lj-split__intro {
    margin: 0 0 1.4rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.78);
    padding: 0.85rem 1rem;
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, transparent 100%);
    border: 1px solid rgba(245, 158, 11, 0.14);
    border-radius: 10px;
}
.lj-split__compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .lj-split__compare {
        grid-template-columns: 1fr;
    }
    .lj-split__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}
.lj-split__pane {
    background:
        linear-gradient(180deg, rgba(20, 22, 28, 0.6) 0%, rgba(10, 11, 16, 0.6) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    /* Fixed height keeps the modal layout stable regardless of how many
       legs the merged trade has. 3 legs fits perfectly; 4+ legs scroll
       inside the legs pane (see .lj-split__legs flex sizing below). The
       current pane uses flex-column + center-justify to vertically center
       its hero block within the same height. */
    height: 360px;
    display: flex;
    flex-direction: column;
}
.lj-split__pane-label {
    flex-shrink: 0;
}
.lj-split__pane--current {
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.7) 0%, rgba(10, 11, 16, 0.7) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 8px 30px -12px rgba(245, 158, 11, 0.18);
}
.lj-split__pane-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 158, 11, 0.78);
    margin-bottom: 0.85rem;
}
.lj-split__pane--legs .lj-split__pane-label {
    color: rgba(148, 163, 184, 0.7);
}

.lj-split__hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px 2px;
    /* Vertically center the headline content within the fixed-height
       current pane so it visually anchors against the legs list on the
       right (which fills its own pane top-to-bottom). align-items center
       also horizontally centers the qty/prices/pnl stack inside the card,
       matching the centered RESULTING TRADE block in the merge-pair modal. */
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.lj-split__hero-prices { justify-content: center; }
.lj-split__hero-qty {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.lj-split__hero-qty-num {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(245, 245, 250, 0.96);
    letter-spacing: -0.02em;
}
.lj-split__hero-qty-ticker {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(203, 213, 225, 0.85);
    margin-left: 2px;
}
.lj-split__hero-prices {
    display: flex;
    gap: 18px;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.9rem;
}
.lj-split__hero-prices strong {
    color: rgba(226, 232, 240, 0.95);
    font-weight: 600;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}
.lj-split__hero-pnl {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 4px;
}

.lj-split__arrow {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 158, 11, 0.7);
    padding: 0 2px;
}

.lj-split__legs {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;          /* right padding to keep scroll thumb off the content */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Pane height is now fixed (360px); the legs list fills whatever the
       header doesn't use and scrolls internally past the 3-leg comfort
       limit. flex:1 + min-height:0 is the canonical way to let an inner
       flex child overflow correctly. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Custom scroll styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.3) transparent;
}
.lj-split__legs::-webkit-scrollbar { width: 6px; }
.lj-split__legs::-webkit-scrollbar-track { background: transparent; }
.lj-split__legs::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.25);
    border-radius: 3px;
}
.lj-split__legs::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.45);
}

.lj-split__leg {
    padding: 9px 12px 10px;
    background:
        linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.5) 0%, rgba(10, 11, 16, 0.5) 100%);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-left: 2px solid rgba(245, 158, 11, 0.5);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.lj-split__leg:hover {
    border-color: rgba(245, 158, 11, 0.25);
    border-left-color: rgba(245, 158, 11, 0.85);
}
.lj-split__leg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.lj-split__leg-num {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 5px;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}
.lj-split__leg-qty {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lj-split__leg-pnl {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.lj-split__leg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.72);
    font-variant-numeric: tabular-nums;
    padding-left: 36px;
}
.lj-split__sep {
    color: rgba(148, 163, 184, 0.4);
}

/* Direction chip (LONG/SHORT) */
.lj-split__dir {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
}
.lj-split__dir--long {
    color: rgba(110, 231, 183, 0.92);
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.28);
}
.lj-split__dir--short {
    color: rgba(252, 165, 165, 0.92);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
}

.lj-split__lbl {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.65);
    margin-right: 4px;
}

/* PnL color states (shared between hero + legs) */
.lj-split__hero-pnl.is-win,
.lj-split__leg-pnl.is-win {
    color: #34d399;
    text-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}
.lj-split__hero-pnl.is-loss,
.lj-split__leg-pnl.is-loss {
    color: #f87171;
    text-shadow: 0 0 18px rgba(239, 68, 68, 0.22);
}
.lj-split__hero-pnl.is-be,
.lj-split__leg-pnl.is-be {
    color: rgba(203, 213, 225, 0.78);
}

.trades-shared-detail-day-info .day {
    color: rgba(226, 232, 240, 0.92);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.trades-shared-detail-day-info .count {
    color: rgba(148, 163, 184, 0.78);
    font-size: 0.82rem;
    font-weight: 500;
    position: relative;
    padding-left: 14px;
}
.trades-shared-detail-day-info .count::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.45);
    transform: translateY(-50%);
}
/* P72: journal-wide trade counter ("#117 of 1,420") in floating header.
   Inline (was margin-top stacked) — sits beside count after a dot separator. */
.trades-shared-detail-day-info .counter {
    color: var(--primary, #EFBF04);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    opacity: 0.9;
    position: relative;
    padding-left: 14px;
}
.trades-shared-detail-day-info .counter::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb, 239,191,4), 0.5);
    transform: translateY(-50%);
}

@media (max-width: 1180px) {
    .trades-shared-detail-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        width: min(calc(var(--content-shell-max) + 120px), calc(100vw - 12px));
        padding: 0 4px;
        box-sizing: border-box;
    }

    .trades-shared-detail-nav-label {
        display: none;
    }

    .trades-shared-detail-nav-wrap.left {
        left: 12px;
    }

    .trades-shared-detail-nav-wrap.right {
        right: 12px;
    }

    .trades-shared-detail-close {
        right: clamp(52px, 12vw, 130px);
        top: -44px;
    }

    .trades-shared-detail-day-info {
        left: 68px;
        right: 68px;
        width: auto;
        justify-content: center;
    }

    .trades-shared-detail-day-info .day {
        font-size: 0.95rem;
    }

    .trades-shared-detail-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .trades-shared-detail-chart-wrap {
        min-height: min(400px, 44vh);
    }

    .trades-shared-detail-chart {
        height: min(460px, 48vh);
        min-height: min(360px, 40vh);
    }

    .trades-shared-detail-wizard {
        min-height: min(340px, 38vh);
        max-height: min(520px, 52vh);
    }
}

/* Floating "Expand chart" toggle in the top-right corner of the chart panel.
 * Right offset clears the lightweight-charts price scale (~50px); top clears
 * the timeframe pills on the opposite corner. Subtle pill so it doesn't
 * fight the chart for visual attention. Two icons (expand / collapse) ride
 * along; CSS swaps which one shows based on the parent .--expanded class. */
.trades-shared-detail-chart-expand {
    position: absolute;
    top: 10px;
    right: 60px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 17, 22, 0.78);
    color: rgba(226, 232, 240, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.trades-shared-detail-chart-expand:hover,
.trades-shared-detail-chart-expand:focus-visible {
    background: rgba(30, 33, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    outline: none;
}

.trades-shared-detail-chart-expand .tg-chart-expand-icon,
.trades-shared-detail-chart-expand .tg-chart-collapse-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* The collapse icon stays hidden — clicking Expand opens the big-chart
 * popup overlay, it does not toggle a sibling resize layout. (Earlier
 * iteration attempted in-place resize; replaced with a true popup so the
 * surface and the daily-view chart are unified.) */
.trades-shared-detail-chart-expand .tg-chart-collapse-icon { display: none; }

/* ====== Big-chart popup overlay ======
 * Sized to match the daily-view cinematic window (same min() caps as .chart-fullscreen-active).
 * The surrounding backdrop blurs whatever sits behind so the popup reads
 * as a window, not a takeover.
 */
.tg-big-chart-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 12, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10001; /* above the trade detail modal AND above .chart-fullscreen-active */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-big-chart-popup {
    width: min(75vw, calc(var(--content-shell-max) + 120px));
    max-width: calc(100vw - 48px);
    height: min(75vh, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    background: var(--bg-card, #0a0c12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 10px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.tg-big-chart-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
    gap: 12px;
}

.tg-big-chart-popup-title {
    color: var(--text-primary, #fff);
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.tg-big-chart-popup-subtitle {
    color: var(--text-tertiary, rgba(148, 163, 184, 0.7));
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* News-context pill in the trade-detail popup header. */
.tg-big-chart-popup-news {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.tg-big-chart-popup-news .tg-news-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.tg-big-chart-popup-news.is-high {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.34);
}
.tg-big-chart-popup-news.is-high .tg-news-chip-dot { background: #ef4444; }
.tg-big-chart-popup-news.is-med {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
}
.tg-big-chart-popup-news.is-med .tg-news-chip-dot { background: #f59e0b; }

.tg-big-chart-popup-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(226, 232, 240, 0.85);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tg-big-chart-popup-close:hover,
.tg-big-chart-popup-close:focus-visible {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    outline: none;
}

/* Mount area — receives the lifted #daily-chart-root element. The lifted
 * chartSection has its own internal toolbars, drawing tools, TF selector,
 * fullscreen button, session boxes, NY-open markers, etc. (i.e. literally
 * everything the daily view's big chart has) because it IS the same DOM
 * node. We just override its inline `height: 760px` so it fills the popup. */
.tg-big-chart-popup-mount {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
}

.tg-big-chart-popup-mount > #daily-chart-root {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Hide the fullscreen toggle inside the lifted chartSection — it would
 * fight the popup's own sizing. We're already in a popup window. */
.tg-big-chart-popup-mount #daily-chart-root [data-tg-popup-fs-hidden="1"] {
    display: none !important;
}

/* When the popup lifts the whole chart ROW (split-capable), make it fill the
 * mount the same way: row → frame(s) → canvas all stretch to 100% height, in
 * both single and split mode. */
.tg-big-chart-popup-mount > .lj-chart-row {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}
.tg-big-chart-popup-mount > .lj-chart-row .lj-chart-frame {
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
}
.tg-big-chart-popup-mount > .lj-chart-row #daily-chart-root {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Split toggle in the popup header (mirrors the big chart's pagebar button). */
.tg-big-chart-popup-split {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    padding: 6px 12px;
    background: transparent;
    color: var(--text-muted, #a1a1aa);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tg-big-chart-popup-split:hover {
    color: var(--text, #fafafa);
    border-color: rgba(var(--gold-rgb, 239, 191, 4), 0.5);
}
.tg-big-chart-popup-split.is-active {
    color: #0a0a0c;
    background: var(--gold, #EFBF04);
    border-color: var(--gold, #EFBF04);
}

.tg-big-chart-popup-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, rgba(148, 163, 184, 0.7));
    font-size: 0.95rem;
    text-align: center;
    padding: 24px;
}

/* Top headline bar — five evenly-spread cells (side badge + 4 metrics).
 * Larger type than before so the headline numbers carry the visual weight
 * the user expects when opening a single-trade view. */
.trades-shared-detail-summary {
    display: grid;
    grid-template-columns: 96px repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
    padding: 18px 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.trades-shared-detail-summary > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.trades-shared-detail-summary span {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.trades-shared-detail-summary strong {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trades-shared-detail-summary .side {
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 6px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.trades-shared-detail-summary .side.long {
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.trades-shared-detail-summary .side.short {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.14);
}

.trades-shared-detail-summary .ticker-time strong {
    font-size: 1.5rem;
}

.trades-shared-detail-summary .ticker-time span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
}

.trades-shared-detail-summary .pos {
    color: #22c55e;
}

.trades-shared-detail-summary .neg {
    color: #ef4444;
}

/* Secondary reference grid — six fields after the trim (when / where / cost).
 * Equal columns so the row reads as a uniform info strip. */
.trades-shared-detail-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 10px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.trades-shared-detail-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 8px;
    min-width: 0;
}

.trades-shared-detail-stats span {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.trades-shared-detail-stats strong {
    font-size: 1rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trades-shared-detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(min(240px, 100%), 0.55fr);
    gap: 14px;
}

.trades-shared-detail-chart-wrap {
    min-height: min(560px, max(260px, 38vh));
}

.trades-shared-detail-chart {
    height: min(560px, max(300px, 45vh));
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #07090f;
    position: relative;
    overflow: hidden;
}

.trades-shared-detail-wizard {
    min-height: min(560px, max(260px, 42vh));
    max-height: min(560px, 54vh);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
}

@media (max-height: 820px) {
    .trades-shared-detail-wizard {
        min-height: min(520px, 46vh);
        max-height: min(560px, 52vh);
    }
}

/* Prev/Next trade arrows — pinned to the VIEWPORT (not the modal grid)
   so they stay vertically centered no matter how tall the modal grows.
   The BUTTON is what's centered at viewport mid-line; the label floats
   above it via position:absolute so it doesn't shift the button down. */
.trades-shared-detail-nav-wrap {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3700;
    pointer-events: none;
    width: 60px;
    height: 60px;
}

.trades-shared-detail-nav-wrap.left {
    left: 28px;
}
.trades-shared-detail-nav-wrap.right {
    right: 28px;
}

.trades-shared-detail-nav-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.trades-shared-detail-nav {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--primary-rgb), 0.6);
    background: linear-gradient(180deg, rgba(35, 28, 12, 0.92), rgba(20, 16, 8, 0.95));
    color: var(--primary);
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(var(--primary-rgb), 0.18);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trades-shared-detail-nav svg {
    display: block;
    width: 26px;
    height: 26px;
}

.trades-shared-detail-nav:hover {
    border-color: rgba(var(--primary-rgb), 0.95);
    background: linear-gradient(180deg, rgba(45, 36, 14, 0.95), rgba(28, 22, 10, 0.98));
    transform: scale(1.06);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(var(--primary-rgb), 0.35),
        inset 0 1px 0 rgba(var(--primary-rgb), 0.25);
}
.trades-shared-detail-nav:active {
    transform: scale(0.96);
}

.trades-shared-detail-nav.left,
.trades-shared-detail-nav.right {
    /* Reset legacy positional overrides (kept for any external selector that still targets them). */
    position: static;
}

/* App hover hints — use data-tooltip (see initAppDataTooltips in script.js), never title= */
.app-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100100;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: #e4e7ec;
    background: rgba(15, 17, 23, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    /* Render `\n\n` from data-tooltip strings as soft paragraph breaks
       (script.js uses tip.textContent so HTML doesn't parse — pre-line
       gives us readable paragraphs without XSS risk). */
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.app-tooltip.app-tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/* Drag-to-scrub numeric inputs — hover cursor signals the drag
   affordance. Wired by initNumericDragScrub() in script.js. */
.lj-mcm__input,
.lj-itm__input,
[data-lj-drag-num] {
    cursor: ew-resize;
}
.lj-mcm__input:focus,
.lj-itm__input:focus,
[data-lj-drag-num]:focus {
    cursor: text;
}

/* === Trades View — SL/TP affordances ===================================== */

.tg-stats-add-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px dashed var(--border-medium);
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.tg-stats-add-chip:hover,
.tg-stats-add-chip:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--text-tertiary);
    border-style: solid;
    color: var(--text-primary);
    outline: none;
}

.tg-stats-add-chip-plus {
    font-weight: 600;
    color: var(--text-tertiary);
    line-height: 1;
}

.tg-stats-add-chip:hover .tg-stats-add-chip-plus,
.tg-stats-add-chip:focus-visible .tg-stats-add-chip-plus {
    color: var(--text-secondary);
}

/* Disabled state — chip stays visible (so the user knows the action exists)
 * but communicates via cursor + opacity that it can't be clicked right now.
 * The data-tooltip explains why (entry price missing, etc.). */
.tg-stats-add-chip.is-disabled,
.tg-stats-add-chip[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
    background: transparent;
    border-style: dashed;
    border-color: var(--border-medium);
    color: var(--text-tertiary);
}

.tg-stats-add-chip.is-disabled:hover,
.tg-stats-add-chip[disabled]:hover {
    background: transparent;
    border-color: var(--border-medium);
    color: var(--text-tertiary);
}

/* BE-tagged trades — RR/TP/SL collapse to a non-interactive "BE" label.
 * Amber matches the BE chip color used in the trade-wizard tag palette
 * (#F59E0B) so the connection between "I tagged this trade BE" and "the
 * card now reads BE" is visually obvious. No cursor, no underline — this
 * is a status, not an editable value. */
/* P3.2: BE recolored amber → slate. Amber is now reserved exclusively for
 * "action needed" CTAs (Needs input / Needs to be set / attention pulse).
 * BE is an outcome, not an action — slate-gray reads as "captured /
 * neutral / nothing to do here". */
.tg-stats-item-v--be,
.tg-stats-rr-val--be {
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
    cursor: default;
    user-select: none;
}

/* Single "BE" marker that replaces the whole RR / TP / SL trio for
 * break-even trades.
 *
 * Two things are tuned here, both came from rendering against real cards:
 *
 * 1. Vertical footprint must match a typical FILLED non-BE right column
 *    (RR block ≈ 39px + TP/SL row with source-attribution line ≈ 53px =
 *    ~92px). The LEFT column anchors the date with `margin-top: auto`,
 *    so any height gap between BE and non-BE right columns immediately
 *    drags the date upward on BE cards. min-height: 92px keeps date
 *    placement identical to non-BE cards.
 *
 * 2. The "BE" can't just float in empty space — it looks orphaned and
 *    too loud at full amber. We give it a soft amber-tinted pill so it
 *    reads as a deliberate status badge filling the slot the trio used
 *    to fill, and dim the text so it doesn't outshine the +PnL on the
 *    left. Slight letter-spacing nudges the "stamp" connotation. */
/* BE stamp — borderless, no background. Just typography centered in
   the column slot. The right column's existing `justify-content:
   space-evenly` keeps the stamp vertically balanced inside the same
   height as the regular R:R/TP/SL grid, so the LEFT column's
   date/time row stays at the same Y position for BE vs non-BE cards. */
.tg-stats-be-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    user-select: none;
    cursor: default;
    position: relative;
}

/* Circular "=" icon above the BE letters — visualises "flat outcome" */
.tg-stats-be-stamp__icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: rgba(245, 158, 11, 0.85);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.tg-stats-be-stamp__main {
    /* Sky-blue — unified with all other evaluation verdict text
       (Stop was too tight, BE saved it, EFF %, Would-save). One
       cohesive accent color for "this is the trade's evaluation". */
    color: #38bdf8;
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-bottom: 2px;
}

.tg-stats-be-stamp__sub {
    color: var(--text-tertiary);
    font-family: 'Inter', 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.15;
    opacity: 0.65;
}

/* Trade-meta strip: direction · contracts · duration. Tabular-nums so
   the line reads steadily across all cards in the gallery. */
.tg-stats-be-stamp__meta {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.25;
}

/* Stats-exclusion pill — sits below the meta line. Same cyan idiom as
   the BE side-panel summary badge so users link card↔modal mentally. */
.tg-stats-be-stamp__badge {
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(125, 211, 252, 0.85);
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.01em;
    max-width: 100%;
}
.tg-stats-be-stamp__badge-dot {
    color: #38bdf8;
    margin-right: 3px;
    font-size: 0.7em;
    vertical-align: middle;
}

/* "Needs to be set" inline missing-state for SL/TP cells — matches the
   R:R amber pulse treatment so all three cells share one visual idiom
   (no more "+ Add SL" chip button looking different from R:R label). */
.tg-stats-item-v--missing {
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-decoration: underline dashed rgba(251, 191, 36, 0.4);
    text-underline-offset: 3px;
    cursor: pointer;
    animation: tg-stats-missing-pulse 2.4s ease-in-out infinite;
}
.tg-stats-item-v--missing.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.tg-stats-item-v--missing:hover:not(.is-disabled) {
    color: #fcd34d;
}

/* tg-stats-source — small dimmed subtitle directly under the SL/TP value,
 * answering "where did this number come from?" (set by you / from import /
 * from exit). Replaces the old "auto" badge.
 *
 * Renders on its own line so it never collides with the "pts" suffix or
 * the value itself; the parent (.tg-stats-tp / .tg-stats-sl) is already a
 * flex column, so this just lands in the slack space below. */
.tg-stats-source {
    margin-top: 1px;
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.55;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy "auto" badge kept around in case any cached HTML still references
 * the class — visually neutralized so it can't show up as a stale chip. */
.tg-stats-default-tag {
    display: none !important;
}

/* --- Inline SL/TP popover ------------------------------------------------ */

.tg-inline-popover {
    position: fixed;
    z-index: 10010;
    min-width: min(220px, calc(100vw - 24px));
    padding: 12px 12px 10px;
    background: rgba(20, 20, 22, 0.98);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
    font-size: 0.78rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tg-inline-popover-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.tg-inline-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color 0.15s ease;
}

.tg-inline-popover-row:focus-within {
    border-color: var(--text-tertiary);
}

.tg-inline-popover-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 4px 0;
}

.tg-inline-popover-input.is-invalid {
    color: #f87171;
}

.tg-inline-popover-suffix {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tg-inline-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}

.tg-inline-popover-btn {
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tg-inline-popover-btn--ghost:hover,
.tg-inline-popover-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    outline: none;
}

.tg-inline-popover-btn--primary {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.tg-inline-popover-btn--primary:hover,
.tg-inline-popover-btn--primary:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--text-tertiary);
    outline: none;
}

/* === Unified Modal Shell (.lj-modal) =====================================
 * Native <dialog> element with custom backdrop. Reused across:
 *   - MiniChartModal (P1) — missing TP/SL data entry with embedded chart
 *   - IdealTradeModal (P2) — ideal-trade ghost RR adjustment
 *   - StrategyModal / SnapshotBuilderModal (P3)
 *
 * Visual language matches the existing .modal-* primary modals (same
 * `--bg-card`, `--border-light`, radius), but uses native <dialog> for
 * a11y (focus trap, escape close, restore focus, role=dialog) so the
 * legacy hand-rolled .modal pattern can be retired view-by-view.
 * ========================================================================= */
.lj-modal {
    /* native <dialog>.showModal() positions the element via the top layer.
     * We re-assert margin:auto + inset:0 so width/height are honored AND the
     * dialog stays centered both axes — without this Chromium pins it to
     * (0,0) when our custom `display: flex` / `flex-direction: column`
     * overrides the UA's default block layout. */
    margin: auto;
    inset: 0;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    /* Disable native text selection across the modal. Without this, an
       accidental click+drag on label text starts a text selection that
       extends across elements and triggers HTML5 drag-and-drop, leaving
       a translucent "ghost" copy of the dragged content on screen.
       Copy/paste is restored for actual <input> and <textarea> below. */
    user-select: none;
    -webkit-user-select: none;
}
.lj-modal input,
.lj-modal textarea {
    user-select: text;
    -webkit-user-select: text;
}

.lj-modal::backdrop {
    background: rgba(8, 10, 14, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lj-modal[open] {
    display: flex;
    flex-direction: column;
    animation: ljModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ljModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.lj-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card-secondary, var(--bg-card));
}

.lj-modal__title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.01em;
}

.lj-modal__subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.lj-modal__title-group { min-width: 0; }

/* MCM-specific header: bigger title + eyebrow context-step label.
 * Per user feedback: the modal needs to clearly communicate "this is
 * Step 1 of evaluation — fill in your missing real-trade plan", not
 * just whisper "Set planned Stop Loss" at H3 size. */
.lj-mcm__header {
    padding: 18px 22px 16px;
    align-items: flex-start;
}

.lj-mcm__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.85);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.lj-mcm__title-big {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    line-height: 1.15;
}
/* SAM-modal extra-large title — fills the freed space left by the
   removed eyebrow line. */
.lj-sam__title-xl {
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.lj-mcm__header .lj-modal__subtitle {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 8px;
    max-width: 64ch;
}

.lj-modal__close {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.lj-modal__close:hover,
.lj-modal__close:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--border-light);
    outline: none;
}

.lj-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    flex: 1 1 auto;
    min-height: 0;
}

.lj-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-card-secondary, var(--bg-card));
}

.lj-modal__btn {
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 7px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
}

.lj-modal__btn:hover,
.lj-modal__btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    outline: none;
}

.lj-modal__btn--primary {
    background: rgba(245, 158, 11, 0.92);
    border-color: rgba(245, 158, 11, 0.95);
    color: #111;
    font-weight: 600;
}

.lj-modal__btn--primary:hover,
.lj-modal__btn--primary:focus-visible {
    background: rgba(245, 158, 11, 1);
    border-color: rgba(245, 158, 11, 1);
    color: #000;
    transform: translateY(-1px);
}

.lj-modal__btn--ghost-link {
    border-color: transparent;
    padding: 6px 10px;
    color: var(--text-tertiary);
}

.lj-modal__btn--ghost-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

/* === MiniChartModal (P1) ================================================
 * Two-column layout: chart on the left, data fields on the right.
 * Sized to fit comfortably inside a 1366×768 laptop while staying compact
 * on a 2560×1440 monitor (centered). Chart takes ~70% width — a too-tight
 * chart forces the user to zoom-aim before they can grab the edge handles.
 * ========================================================================= */
.lj-mini-chart-modal {
    width: min(1400px, calc(100vw - 32px));
}

.lj-mcm__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.lj-mcm__chart-wrap {
    position: relative;
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    /* Strict 16:9 — width comes from the grid 1fr column, height is
       computed via aspect-ratio. At max viewport (1400px modal) the
       chart hits ~1032×580 which matches the side-panel natural
       height. On narrower viewports the chart is proportionally
       shorter — acceptable trade for true 16:9. */
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 340px;
}

.lj-mcm__chart-host {
    position: absolute;
    inset: 0;
}

.lj-mcm__tf-bar {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: rgba(12, 14, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
}

.lj-mcm__tf-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.12s ease, color 0.12s ease;
}

.lj-mcm__tf-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.lj-mcm__tf-btn.is-active {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

/* "Session still ingesting" pill — bottom-right corner of the chart,
   small and unobtrusive. Has a soft pulsing dot to indicate "in progress"
   without being distracting. */
.lj-mcm__partial-pill {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    font-size: 0.66rem;
    color: rgba(245, 158, 11, 0.9);
    background: rgba(12, 14, 18, 0.78);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.02em;
    z-index: 3;
    pointer-events: none;
}

.lj-mcm__partial-pill[hidden] { display: none; }

/* Usage hint — bottom-left chart corner, dim by default, brightens on
   hover so the chart area itself stays the visual focus. The icon +
   short text reminds the user of the two input methods (drag or type).
   Self-removes from the DOM 5s after open via JS so it doesn't linger. */
.lj-mcm__usage-hint {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 7px;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.42);
    background: rgba(12, 14, 18, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.01em;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.lj-mcm__usage-hint[hidden] { display: none; }
.lj-mcm__usage-hint.is-fading { opacity: 0; }

.lj-mcm__partial-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45);
    animation: ljMcmPartialPulse 1.8s ease-out infinite;
}

@keyframes ljMcmPartialPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0);   }
}

/* Right column: borderless, big/small typography. Uses flex with
   `space-between`-style stretching so the three big stacked blocks
   (locked / editable / R:R) fill the column's full vertical real
   estate next to the chart. A faint top-edge highlight + bottom-
   edge fade give the column a subtle "panel" feel without a visible
   border — matches how Bloomberg / TradingView side-panels read. */
.lj-mcm__side {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 4px 4px 4px 6px;
    height: 100%;
    /* Background removed — the subtle top-fade gradient bled into the
       ticker area and looked like an extra wrapper. Side panel reads
       as flat columns against the modal canvas now. */
}

/* Corner gradient accent removed — the green/red radial bleed at the
   top-right (and bleed-through near the divider) was the first thing
   the user pointed at and asked to delete. Win/loss color shifts to
   the P&L value itself (always colored via .is-pos / .is-neg) which
   reads more cleanly. */
.lj-mcm__side > * { position: relative; z-index: 1; }

.lj-mcm__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lj-mcm__ticker {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.lj-mcm__meta {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.lj-mcm__meta .is-long  { color: #34d399; font-weight: 600; }
.lj-mcm__meta .is-short { color: #f87171; font-weight: 600; }

.lj-mcm__stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lj-mcm__stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.lj-mcm__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Unified label typography across the side column. ENTRY / EXIT /
   TAKE PROFIT / PLANNED STOP LOSS / RR — all share these three rules
   so the eye reads them as the same kind of element. */
.lj-mcm__stat-k {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.lj-mcm__stat-v {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lj-mcm__stat-v--big {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.lj-mcm__stat-v.is-pos { color: #34d399; }
.lj-mcm__stat-v.is-neg { color: #f87171; }

.lj-mcm__sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0;
}

/* Big centered blocks for the locked / editable / R:R rows in the right
   column. Each block has a small label row (centered) and a big value
   row below it. Together with the soft fade dividers between them they
   fill the right column's vertical real estate while keeping a clear
   visual hierarchy: locked → editable → R:R. */
.lj-mcm__block {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    text-align: center;
}

.lj-mcm__block-k {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.lj-mcm__block-lock {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.35);
    transform: translateY(0.5px);
}

.lj-mcm__block-v {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    line-height: 1;
}

/* Locked block — slightly dimmer, signals "informational only" */
.lj-mcm__block--locked .lj-mcm__block-v {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

/* RR block — the outcome value the user is targeting. Visually
   prominent (gold + larger) because it's the bottom-line answer to
   "what did my SL/TP just set?". Display+text-align center keep the
   digit string mathematically centered under the "RR" label even
   when the value width varies (0.99 vs 12.34). */
.lj-mcm__block-v--rr {
    color: #fbbf24;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    width: auto;
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
}

/* RR label inherits the unified 0.68rem/0.12em pattern, just colored
   to match the gold value below. Same size as ENTRY / TAKE PROFIT /
   PLANNED STOP LOSS — consistency is what makes the column feel
   designed instead of assembled. */
.lj-mcm__block--rr .lj-mcm__block-k {
    color: rgba(251, 191, 36, 0.7);
    cursor: help;
}

.lj-mcm__rr-hint {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.4;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
}

.lj-mcm__info-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: rgba(251, 191, 36, 0.4);
    transform: translateY(-1px);
    transition: color 0.15s ease;
}

.lj-mcm__block--rr .lj-mcm__block-k:hover .lj-mcm__info-icon {
    color: rgba(251, 191, 36, 0.85);
}

/* Soft fading divider between blocks. Linear gradient transparent →
   subtle white → transparent, so it doesn't visually box anything in
   while still segmenting the values. */
.lj-mcm__fade-sep {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 40%,
        rgba(255, 255, 255, 0.10) 60%,
        transparent 100%
    );
    margin: 2px 0;
}

.lj-mcm__unit-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px;
    /* Offset from the label since we sit in a centered flex container */
    margin-left: 4px;
}

.lj-mcm__unit-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.12s ease, color 0.12s ease;
}

.lj-mcm__unit-btn:hover { color: var(--text-primary); }

.lj-mcm__unit-btn.is-active {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

/* Editable value display — looks IDENTICAL to the locked-block value
   when not focused. No box, no underline, no outline. The pts/price
   toggle in the header is what signals "this is editable". On focus
   the input gets a tiny dim caret underline (1px white at 20%) so
   keyboard users know where their cursor is, but it's so subtle it
   doesn't compete with the chart or the number itself.

   This is the "ghost input" pattern used in modern pro-trader UIs
   (TradingView's order panel, Tradezella's quick-edit stat cells). */
.lj-mcm__input-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 2px 6px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.lj-mcm__input-row:focus-within {
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.lj-mcm__input-row.is-invalid {
    border-bottom-color: #ef4444;
}

.lj-mcm__input {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 160px;
    text-align: center;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    color: var(--text-primary);
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.015em;
    padding: 0;
    caret-color: rgba(255, 255, 255, 0.85);
}

/* Kill the GLOBAL `input:focus-visible { outline: 2px solid var(--primary)}`
   rule that's defined in the base form styles. The modal input is
   inside a focused-tracking row (border-bottom handles focus state),
   so the page-wide amber outline ring would visually compete and
   look amateurish. */
.lj-mcm__input:focus,
.lj-mcm__input:focus-visible,
.lj-mcm__input:active {
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

.lj-mcm__input::placeholder {
    color: rgba(255, 255, 255, 0.18);
    font-weight: 700;
}

/* Text-selection inside the input — browser default is a hard blue rect
   that visually competes with the underline. We use a faint white
   wash so highlighted digits stay subdued. */
.lj-mcm__input::selection {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
}
.lj-mcm__input::-moz-selection {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
}

.lj-mcm__input-suffix {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .lj-mcm__grid {
        grid-template-columns: 1fr;
    }
    .lj-mcm__chart-wrap {
        height: 240px;
        min-height: 220px;
    }
}

/* Edge-grab hover affordances on the auto-RR rectangle inside MiniChartModal.
 * The cursor switch and gold edge highlight are toggled by chart-engine.js
 * via .lj-mcm-edge-hover-stop / -target classes added to the chart host. */
.lj-mcm__chart-host.is-edge-hover  { cursor: ns-resize; }
.lj-mcm__chart-host.is-dragging    { cursor: ns-resize; }


/* ==========================================================================
 * P2 — Ideal Trade + Speedometer
 *
 * Three surfaces:
 *   .lj-ideal-panel    — full-width panel rendered inside the trade
 *                        accordion details. Speedometer + segmented toggle.
 *   .lj-speedometer    — the 180° SVG gauge (panel / card / small sizes).
 *   .tg-card-speedo-host — absolute-positioned chip on the gallery card.
 * ========================================================================== */

.lj-ideal-panel-host {
    /* Wrapper appended to .trade-accordion-details. The host stays a
       no-op container so the panel can re-mount itself on toggle change
       without disturbing surrounding spacing. */
    display: block;
}

.lj-ideal-panel {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 28px;
    align-items: center;
    padding: 20px 24px;
    background:
        radial-gradient(140% 110% at 0% 0%, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.0) 60%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.78) 0%, rgba(14, 16, 20, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
}

.lj-ideal-panel__gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.lj-ideal-panel__gauge .lj-speedometer {
    width: 220px;
    height: auto;
    display: block;
}

.lj-ideal-panel__stat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    line-height: 1.4;
    min-height: 18px;
}

.lj-ideal-panel__stat-num {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lj-ideal-panel__stat-sep {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.lj-ideal-panel__stat-unit {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-basis: 100%;
    text-align: center;
    margin-top: 2px;
    opacity: 0.7;
}

.lj-ideal-panel__stat-empty em {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* "X.X / Y.Y pts · Z left" — single inline row, compact. Replaces the
   earlier two-line "Captured X of Y" + "left on the table" stack to
   save vertical room. */
.lj-ideal-panel__stat-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.lj-ideal-panel__stat-unit-inline {
    color: var(--text-tertiary);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

.lj-ideal-panel__stat-tail-inline {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-style: italic;
    margin-left: 2px;
}

.lj-ideal-panel__stat-tail-num {
    color: #f59e0b;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Ideal TP / SL / R:R values — horizontal 3-column row under the
   efficiency gauge when a mode is picked. Sizes trimmed (vs original)
   so the whole panel fits inside the fixed 640px chart envelope. */
.lj-ideal-panel__levels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Delta annotation under each Ideal value — "+12 vs plan" / "−5 vs plan". */
.lj-ideal-panel__delta {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    margin-top: 2px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

.lj-ideal-panel__delta.is-up   { color: #6ee7b7; }
.lj-ideal-panel__delta.is-down { color: #fca5a5; }

.lj-ideal-panel__lvl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.lj-ideal-panel__lvl-k {
    font-size: 0.66rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

.lj-ideal-panel__lvl-v {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.lj-ideal-panel__lvl-u {
    font-size: 0.62rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Comparison table — replaces the ideal-only levels row once mode is
   set. 4-column grid (metric / real / ideal / delta) so the user reads
   the full real-vs-ideal picture without flipping between the (now
   hidden) REAL TRADE block at top of the right column. */
.lj-ideal-panel__cmp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lj-ideal-panel__cmp-header,
.lj-ideal-panel__cmp-row {
    display: grid;
    grid-template-columns: 38px 1fr 1fr 50px;
    gap: 6px;
    align-items: center;
}

.lj-ideal-panel__cmp-header {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 2px;
}

.lj-ideal-panel__cmp-header .lj-ideal-panel__cmp-col {
    font-size: 0.62rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-align: center;
}

.lj-ideal-panel__cmp-row {
    padding: 4px 0;
}

.lj-ideal-panel__cmp-row + .lj-ideal-panel__cmp-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.lj-ideal-panel__cmp-k {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.lj-ideal-panel__cmp-unit {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    opacity: 0.6;
    font-weight: 500;
    margin-left: 1px;
}

.lj-ideal-panel__cmp-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: -0.01em;
}

.lj-ideal-panel__cmp-val.is-ideal {
    color: #fde68a;
}

.lj-ideal-panel__cmp-delta {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: -0.01em;
}

.lj-ideal-panel__cmp-delta.is-up      { color: #6ee7b7; }
.lj-ideal-panel__cmp-delta.is-down    { color: #fca5a5; }
.lj-ideal-panel__cmp-delta.is-same    { color: var(--text-tertiary); opacity: 0.7; }
.lj-ideal-panel__cmp-delta.is-neutral { color: var(--text-tertiary); opacity: 0.4; }

.lj-ideal-panel__main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.lj-ideal-panel__q {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-family: 'Outfit', sans-serif;
}

.lj-ideal-panel__sub {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Deferred state — applied when planned_stop / planned_target are missing.
   Dims the entire panel and blocks interaction so the user can't toggle
   into ideal mode before the basic plan is set. Attention is moved to
   the RR/TP/SL block via .is-needs-attention there. */
.lj-ideal-panel.is-deferred {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Sub-text in deferred state — softer arrow toward the highlighted block. */
.lj-ideal-panel.is-deferred .lj-ideal-panel__sub {
    color: rgba(251, 191, 36, 0.85);
    font-weight: 600;
    text-align: center;
}

.lj-ideal-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
/* Triple-option variant — used by loser-stop trades (3 verdict options
   stacked vertically). Single column keeps each option full-width so
   the long hint text reads cleanly without truncation. */
.lj-ideal-toggle--triple {
    grid-template-columns: 1fr;
}

.lj-ideal-toggle__btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.25;
    position: relative;
    overflow: hidden;
}

.lj-ideal-toggle__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}

.lj-ideal-toggle__btn:active:not(:disabled) {
    transform: translateY(1px);
}

.lj-ideal-toggle__btn:disabled,
.lj-ideal-toggle__btn[aria-disabled="true"] {
    /* Stronger visual disabled state — earlier opacity 0.4 read as "slightly
       faded" rather than "locked", so the user kept clicking. Greyscale +
       desaturated bg + lock cursor + explicit border makes it unambiguous. */
    opacity: 0.32;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.04);
    filter: grayscale(0.5);
    pointer-events: none;
}

.lj-ideal-toggle__btn.is-on {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 4px 14px -4px rgba(245, 158, 11, 0.32);
}

/* "Saving" state — toggle is disabled and a soft yellow pulse plays on the
   clicked button until persistTradePatchById's Supabase round-trip resolves.
   Blocks rapid double-clicks that previously raced the sync. */
.lj-ideal-toggle.is-saving .lj-ideal-toggle__btn { pointer-events: none; }
.lj-ideal-toggle__btn.is-saving {
    animation: lj-ideal-saving-pulse 1.1s ease-in-out infinite;
}
.lj-ideal-toggle__btn.is-saving::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0) 0%,
        rgba(245, 158, 11, 0.18) 50%,
        rgba(245, 158, 11, 0) 100%);
    background-size: 200% 100%;
    animation: lj-ideal-saving-sweep 1.4s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes lj-ideal-saving-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 4px 14px -4px rgba(245, 158, 11, 0.4); }
    50%      { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.65), 0 6px 18px -4px rgba(245, 158, 11, 0.65); }
}
@keyframes lj-ideal-saving-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.lj-ideal-toggle__lbl {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.005em;
}

.lj-ideal-toggle__btn.is-on .lj-ideal-toggle__lbl {
    color: #fde68a;
}

.lj-ideal-toggle__hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.lj-ideal-panel__editrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.lj-ideal-panel__editbtn {
    appearance: none;
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.32);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.lj-ideal-panel__editbtn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

.lj-ideal-panel__tail {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 4px;
}

@media (max-width: 760px) {
    .lj-ideal-panel {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }
    .lj-ideal-panel__gauge .lj-speedometer { width: 180px; }
    .lj-ideal-toggle {
        grid-template-columns: 1fr;
    }
}

/* --- Speedometer (the SVG itself, all sizes) --------------------------- */

.lj-speedometer {
    display: block;
    overflow: visible;
}

/* Smooth fill-in animation when the foreground arc first renders. The
   stroke-dasharray trick used by other circle gauges doesn't work cleanly
   with an arc whose endpoint changes per percentage — instead we apply
   a CSS transition on the path itself so reactive re-renders (toggle
   change, trade reload) feel responsive. */
.lj-speedometer__arc {
    transition: stroke 0.25s ease;
}

.lj-speedometer--gated {
    opacity: 0.6;
}

/* --- Card-side speedometer chip ---------------------------------------- */

.tg-card-speedo-host {
    /* Lives inside .trade-gallery-card → positioned over the chart canvas
       at the top-left, mirroring the .tg-quick-tags-wrap top-right
       positioning. Tooltip rendered via [title] attr. */
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 28;
    transform: translateY(-22%);
    pointer-events: auto;
}

.lj-card-speedo {
    width: 56px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14171d;
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
    padding: 4px 6px;
    cursor: help;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lj-card-speedo:hover {
    background: #1a1e25;
    border-color: rgba(226, 232, 240, 0.4);
}

.lj-card-speedo .lj-speedometer {
    width: 100%;
    height: 100%;
}


/* ==========================================================================
 * P2 v2 — Trade-detail modal layout
 *
 *   .lj-detail-v2                  — root grid
 *     .lj-detail-v2__header        — summary | merge chip | reference stats
 *     .lj-detail-v2__middle        — chart-wrap | right-col
 *       .lj-detail-v2__chart-wrap  — chart pane
 *       .lj-detail-v2__rightcol    — speedometer / toggle / RR-TP-SL
 *     .lj-detail-v2__tagzone       — strategy-left | tag-editor-right
 *     .lj-detail-v2__notes         — notes textarea
 * ========================================================================== */

.lj-detail-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px 22px;
    color: var(--text-primary);
}

.lj-detail-v2__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "summary merge"
        "stats stats";
    gap: 12px 16px;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.85) 0%, rgba(14, 16, 20, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.lj-detail-v2__hsummary { grid-area: summary; min-width: 0; }
.lj-detail-v2__hmerge   { grid-area: merge; display: flex; align-items: center; position: relative; }
.lj-detail-v2__hstats   { grid-area: stats; }

/* Tighten the existing summary chrome so it fits the new header. */
.lj-detail-v2 .trades-shared-detail-summary {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}
.lj-detail-v2 .trades-shared-detail-stats {
    margin: 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.lj-detail-v2__middle {
    display: grid;
    grid-template-columns: minmax(0, 2.85fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* P72: flipped 2-col layout — wizard LEFT, chart+session RIGHT.
   P72.2.1: wizard column widened (was minmax(280, 1fr)) since the wizard
   carries more content than the chart needs side-room for. */
.lj-detail-v2__middle--p72 {
    grid-template-columns: minmax(360px, 1.15fr) minmax(0, 2.4fr);
}
.lj-detail-v2__leftcol {
    /* P72.2.1: switched from CSS grid (2fr auto 3fr — leftover from old
       right-panel layout that had top/divider/bottom slots) to flex column.
       The wizard root (.ljw-root) is itself a flex column with body flex:1
       — once leftcol is also flex column, the wizard fills the full 640px
       envelope and the Back/Skip/Continue footer sticks to the bottom. */
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: rgba(22, 24, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    min-width: 0;
    height: var(--lj-modal-h, 640px);
    max-height: var(--lj-modal-h, 640px);
    min-height: 0;
}

/* P72: chart-wrap on the RIGHT in p72 mode, holds chart + session stripe
   as a single visual frame.
   P72.3: position:relative so the chart-edit overlay can absolutely-
   position itself inside the chart-wrap (was leaking out to the body). */
.lj-detail-v2__middle--p72 .lj-detail-v2__chart-wrap {
    display: flex;
    flex-direction: column;
    height: var(--lj-modal-h, 640px);
    background: rgba(10, 10, 12, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
}
.lj-detail-v2__middle--p72 .lj-detail-v2__chart {
    flex: 1;
    height: auto;
    min-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.lj-detail-v2__session-info {
    flex-shrink: 0;
    height: 84px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 14px;
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%);
}
.lj-detail-v2__session-stripe {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}
/* P72.7.2 — multi-session variant. Three session cards side-by-side
   with the active one highlighted in gold. */
.lj-detail-v2__session-stripe--multi {
    gap: 8px;
}
.lj-detail-v2__sess {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
    min-width: 0;
    position: relative;
    /* P72.7.6 — entire card is the toggle button */
    cursor: pointer;
    user-select: none;
}
.lj-detail-v2__sess:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.10);
}
.lj-detail-v2__sess.is-active:hover {
    background: rgba(255, 255, 255, 0.04);
}
/* P72.7.3 — toned-down active highlight. Was full gold border + box-shadow
   + gold name; that read as "important alert". Now: thin 2px gold accent
   on left edge + a 1px brighter background. The card content stays
   neutral white, no shouting. */
.lj-detail-v2__sess.is-active {
    background: rgba(255, 255, 255, 0.028);
    border-color: rgba(255, 255, 255, 0.07);
}
.lj-detail-v2__sess.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(var(--primary-rgb, 239,191,4), 0.55);
    border-radius: 0 2px 2px 0;
}
.lj-detail-v2__sess.is-hidden {
    opacity: 0.4;
}
.lj-detail-v2__sess-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-right: 22px; /* leave space for the eye toggle in top-right */
}
.lj-detail-v2__sess-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
    letter-spacing: 0.02em;
}
.lj-detail-v2__sess.is-active .lj-detail-v2__sess-name {
    color: rgba(255, 255, 255, 0.96);
}

/* P72.7.6 — eye is purely a visual state indicator now (whole card is the
   button). pointer-events: none so clicks pass through to the card. */
.lj-detail-v2__sess-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary, #71717a);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease;
}
.lj-detail-v2__sess:hover .lj-detail-v2__sess-toggle {
    color: rgba(255, 255, 255, 0.92);
}
.lj-detail-v2__sess-eye {
    width: 14px;
    height: 14px;
}
/* Show eye-on when pressed, eye-off when not. Default markup has both
   svgs; CSS picks the right one by aria-pressed. */
.lj-detail-v2__sess-toggle[aria-pressed="true"]  .lj-detail-v2__sess-eye--off { display: none; }
.lj-detail-v2__sess-toggle[aria-pressed="false"] .lj-detail-v2__sess-eye--on  { display: none; }
.lj-detail-v2__sess-win {
    font-size: 0.62rem;
    color: var(--text-tertiary, #71717a);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.lj-detail-v2__sess-stats {
    display: flex;
    gap: 14px;
    align-items: baseline;
}
.lj-detail-v2__sess-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.lj-detail-v2__sess-stat-lbl {
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary, #71717a);
    line-height: 1;
}
.lj-detail-v2__sess-stat-val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.lj-detail-v2__sess.is-active .lj-detail-v2__sess-stat-val {
    color: rgba(255, 255, 255, 0.98);
}
/* P72.2.1: 3-cell layout, evenly distributed with subtle vertical dividers
   between them (CSS borders on inner cells). Each cell = icon + 2-line text
   block (label on top, value bigger underneath). */
.lj-detail-v2__session-cell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    min-width: 0;
}
.lj-detail-v2__session-cell + .lj-detail-v2__session-cell {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-detail-v2__session-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--primary, #EFBF04);
    opacity: 0.78;
}
.lj-detail-v2__session-cell[data-tg-session-cell="name"]  .lj-detail-v2__session-icon { color: #9CA3AF; opacity: 0.85; }
.lj-detail-v2__session-cell[data-tg-session-cell="vol"]   .lj-detail-v2__session-icon { color: rgba(var(--primary-rgb, 239,191,4), 0.85); }
.lj-detail-v2__session-cell[data-tg-session-cell="range"] .lj-detail-v2__session-icon { color: #93C5FD; opacity: 0.8; }
.lj-detail-v2__session-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lj-detail-v2__session-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-tertiary, #71717a);
    line-height: 1.1;
}
.lj-detail-v2__session-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* ==========================================================================
   P72.1 — Eval Wizard (LEFT column of trade-detail modal)
   ========================================================================== */
.ljw-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 14px;
}
.ljw-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ljw-step-count {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary, #EFBF04);
}
.ljw-progress {
    display: flex;
    gap: 6px;
    align-items: center;
}
.ljw-dot {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, transform .12s ease;
    flex: 1;
    max-width: 32px;
}
.ljw-dot:hover { background: rgba(255, 255, 255, 0.18); }
.ljw-dot.is-done { background: rgba(var(--primary-rgb, 239,191,4), 0.45); }
.ljw-dot.is-current {
    background: var(--primary, #EFBF04);
    transform: scaleY(1.5);
}
.ljw-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* P72.D.9 — make the body a flex column so step-content can grow to
       fill remaining height. Enables vertical centering of choice cards
       via .ljw-step-content--center. */
    display: flex;
    flex-direction: column;
    /* P72.D.37 — confirm overlay sits absolutely inside the body. */
    position: relative;
}
/* P72.D.37 — inline "Restart evaluation?" confirm. Stays inside the
   wizard column (not centered on screen), darkens the summary behind
   it, and offers Cancel / Yes-restart actions. */
.ljw-confirm-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 11, 0.72);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    padding: 18px;
    animation: ljwConfirmFade 140ms ease-out;
}
@keyframes ljwConfirmFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ljw-confirm {
    width: 100%;
    max-width: 320px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.98), rgba(14, 14, 18, 0.98));
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ljw-confirm__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.005em;
}
.ljw-confirm__sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.66);
}
.ljw-confirm__sub b { color: #fff; font-weight: 600; }
.ljw-confirm__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
}
.ljw-body > .ljw-step-content {
    flex: 1;
    min-height: 0;
}
.ljw-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 4px;
}
.ljw-sub {
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0 0 16px;
}
/* P72.D.13 — key terms (stop loss, take profit, etc.) in <b> pop out
   from the muted gray sub copy. Brighter color + heavier weight. */
.ljw-sub b {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 700;
}
.ljw-step-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ljw-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-tertiary, #71717a);
    font-size: 0.85rem;
}
.ljw-placeholder-icon { font-size: 1.4rem; opacity: 0.6; }

/* Choice grid — two big-pill buttons stacked. Used by Outcome / Ideal-TP /
   Ideal-Stop steps. Tone-coded left border so green/red intuition is
   reinforced. */
.ljw-choice-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* P72.D.9 — large variant for marquee-choice steps (Outcome, Quality)
   where the entire wizard body is the question. Bigger pills + richer
   description text fill the body without resorting to filler blocks. */
.ljw-choice-grid--lg {
    gap: 12px;
}
.ljw-choice {
    appearance: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    font: inherit;
}
.ljw-choice--lg {
    padding: 18px 20px;
    gap: 14px;
    border-radius: 12px;
}
.ljw-choice:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}
.ljw-choice.is-active {
    background: rgba(var(--primary-rgb, 239,191,4), 0.10);
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.55);
}
.ljw-choice--good.is-active    { border-color: rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.07); }
.ljw-choice--warn.is-active    { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.07); }
.ljw-choice--be.is-active      { border-color: rgba(148, 163, 184, 0.45); background: rgba(148, 163, 184, 0.08); }
/* P72.4 — magenta tone for MAE marker step. */
.ljw-choice--magenta.is-active { border-color: rgba(232, 121, 249, 0.55); background: rgba(232, 121, 249, 0.07); }
/* P73.2 — cyan tone for MFE marker step (loser peak gain). */
.ljw-choice--cyan.is-active    { border-color: rgba(6, 182, 212, 0.55);   background: rgba(6, 182, 212, 0.07); }
.ljw-choice__icon {
    width: 34px; height: 34px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ljw-choice--lg .ljw-choice__icon {
    width: 40px; height: 40px;
    font-size: 1.2rem;
    border-radius: 10px;
}
.ljw-choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ljw-choice--lg .ljw-choice__body { gap: 6px; }
.ljw-choice__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
.ljw-choice--lg .ljw-choice__title { font-size: 1.12rem; }
.ljw-choice__detail {
    font-size: 0.82rem;
    color: var(--text-secondary, #A1A1AA);
    line-height: 1.45;
}
.ljw-choice--lg .ljw-choice__detail {
    font-size: 0.84rem;
    line-height: 1.55;
}

/* P72.D.9 — wrapper used by marquee-choice steps to vertically center
   the cards within the wizard body. Parent (.ljw-step-content) is now
   flex:1 + column so this child can sit at justify-center. */
.ljw-step-content--center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.ljw-step-note {
    margin: 8px 2px 0;
    padding: 10px 12px;
    background: rgba(var(--primary-rgb, 239,191,4), 0.05);
    border: 1px dashed rgba(var(--primary-rgb, 239,191,4), 0.3);
    border-radius: 8px;
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* P72.5 — Tag editor host inside wizard. renderTradeWizard injects its
   own layout (category cards, quick-tag slots); we just provide the
   bounding box. Slight negative margin to align with wizard body padding. */
.ljw-step-tags {
    min-height: 240px;
    margin: 0;
}

/* P72.5 — Notes step. tgBuildNotesFieldHtml builds the textarea — we
   just give it room to breathe inside the wizard body. */
.ljw-step-notes {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ljw-step-notes .lj-detail-notes {
    margin: 0;
}
.ljw-step-notes .lj-detail-notes__input {
    min-height: 180px;
}

/* P72.D.17 — Summary aligned to top header's stat grid:
   • uniform off-white values (no rainbow per-cell colors)
   • equal grid columns with vertical dividers between cells (gap-only
     felt empty; thin borders give the same "info strip" feel as the
     `.trades-shared-detail-stats` row in the modal header)
   • Tags + Reflection get their own row below the stats, divided by
     a horizontal line. */
/* P72.D.22 — center the card + back-button group vertically in the
   wizard body (was: card at top + back pinned to bottom). User wants
   uniform center-alignment across every step. */
.ljw-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
    justify-content: center;
}
.ljw-summary__card {
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(22, 24, 30, 0.85) 0%, rgba(14, 16, 20, 0.92) 100%);
    overflow: hidden;
    flex-shrink: 0;
}
.ljw-summary__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.ljw-sum-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 52px;
    /* P72.D.25 — center content in all stat cells (col1/col2/wide). */
    text-align: center;
    align-items: center;
    /* P72.D.34 — vertically center when grid row stretches this cell taller
       than its content (e.g. paired with an Ideal row that has a delta
       subtitle). Without this, shorter cell content sticks to the top. */
    justify-content: center;
}
.ljw-sum-stat__head {
    justify-content: center;
}
.ljw-sum-stat__edit {
    position: absolute;
    top: 8px;
    right: 8px;
}
/* P72.D.21 — explicit column classes (col1 has right divider, col2
   doesn't). This survives wide rows in the middle of the grid, which
   :nth-child counting can't handle. */
.ljw-sum-stat--col1 { border-right: 1px solid rgba(255, 255, 255, 0.05); }
.ljw-sum-stat--col2 { border-right: none; grid-column: 2; }
.ljw-sum-stat--wide {
    grid-column: 1 / -1;
    border-right: none;
}
/* P72.D.24/25 — tags pills + notes text inherit center alignment from
   the parent stat cell (set in .ljw-sum-stat above). */
.ljw-sum__tags {
    justify-content: center;
}
.ljw-sum__notes {
    text-align: center;
}
/* Last visible stat row has no bottom border. */
.ljw-sum-stat--wide:last-child,
.ljw-sum-stat:last-child { border-bottom: none; }
.ljw-sum-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ljw-sum-stat__lbl {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary, #71717a);
}
.ljw-sum-stat__edit {
    appearance: none;
    background: transparent;
    border: none;
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    color: var(--text-tertiary, #71717a);
    opacity: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.ljw-sum-stat:hover .ljw-sum-stat__edit { opacity: 1; }
.ljw-sum-stat__edit:hover {
    color: var(--primary, #EFBF04);
    background: rgba(var(--primary-rgb, 239,191,4), 0.10);
    opacity: 1;
}
/* P72.D.17 — uniform value styling: same color, weight, size for ALL
   stats. Differentiation lives in the label, not in the value. */
.ljw-sum-stat__val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ljw-sum-stat--wide .ljw-sum-stat__val {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.ljw-sum-stat__detail {
    font-size: 0.74rem;
    color: var(--text-secondary, #A1A1AA);
    line-height: 1.35;
    margin-top: 2px;
}
/* Tone modifier is now a tiny dot before the label — keeps the
   information-density of color-coded values without the rainbow. */
.ljw-sum-stat--good     .ljw-sum-stat__lbl::before,
.ljw-sum-stat--green    .ljw-sum-stat__lbl::before,
.ljw-sum-stat--warn     .ljw-sum-stat__lbl::before,
.ljw-sum-stat--red      .ljw-sum-stat__lbl::before,
.ljw-sum-stat--magenta  .ljw-sum-stat__lbl::before,
.ljw-sum-stat--cyan     .ljw-sum-stat__lbl::before,
.ljw-sum-stat--be       .ljw-sum-stat__lbl::before,
.ljw-sum-stat--pending  .ljw-sum-stat__lbl::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    margin-top: -2px;
}
.ljw-sum-stat--good     .ljw-sum-stat__lbl::before,
.ljw-sum-stat--green    .ljw-sum-stat__lbl::before { background: #34D399; }
.ljw-sum-stat--warn     .ljw-sum-stat__lbl::before { background: #F59E0B; }
.ljw-sum-stat--red      .ljw-sum-stat__lbl::before { background: #F87171; }
.ljw-sum-stat--magenta  .ljw-sum-stat__lbl::before { background: #E879F9; }
.ljw-sum-stat--cyan     .ljw-sum-stat__lbl::before { background: #06B6D4; }
.ljw-sum-stat--be       .ljw-sum-stat__lbl::before { background: rgba(203, 213, 225, 0.7); }
.ljw-sum-stat--pending  .ljw-sum-stat__lbl::before { background: rgba(255, 255, 255, 0.15); }
.ljw-sum__hint b { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
/* P72.D.32 — pts-first layout. Main = pts (inherits .ljw-sum-stat__val style).
   __px = price as smaller dim suffix to the right.
   __delta = "vs realized" hint on its own line (only used by Ideal rows). */
.ljw-sum__main {
    display: inline;
    font: inherit;
    color: inherit;
}
.ljw-sum__px {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}
.ljw-sum__delta {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
}
.ljw-sum__pending {
    font-style: italic;
    color: var(--text-tertiary, #71717a);
    font-weight: 500;
}
.ljw-sum__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ljw-sum__tagpill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(var(--primary-rgb, 239,191,4), 0.08);
    border: 1px solid rgba(var(--primary-rgb, 239,191,4), 0.30);
    border-radius: 4px;
    color: var(--primary, #EFBF04);
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ljw-sum__notes {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
}
.ljw-summary__back {
    /* P72.D.22 — sits directly under the card; the parent .ljw-summary
       centers the whole group vertically via justify-content: center. */
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed rgba(var(--primary-rgb, 239,191,4), 0.4);
    border-radius: 8px;
    color: var(--primary, #EFBF04);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    align-self: stretch;
    flex-shrink: 0;
}
.ljw-summary__back:hover {
    background: rgba(var(--primary-rgb, 239,191,4), 0.08);
    border-style: solid;
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.65);
}

/* P72.3 — Edit-mode readout shown in wizard step when chart drag is active.
   Variants: --gold (target / ideal TP), --sky (stop / wider SL). */
.ljw-edit-readout {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.ljw-edit-readout--gold {
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.45);
    background: rgba(var(--primary-rgb, 239,191,4), 0.05);
}
.ljw-edit-readout--sky {
    border-color: rgba(125, 211, 252, 0.45);
    background: rgba(125, 211, 252, 0.05);
}
/* P72.4 — MAE marker readout, magenta. */
.ljw-edit-readout--magenta {
    border-color: rgba(232, 121, 249, 0.45);
    background: rgba(232, 121, 249, 0.05);
}
/* P73.2 — MFE marker readout, cyan. */
.ljw-edit-readout--cyan {
    border-color: rgba(6, 182, 212, 0.45);
    background: rgba(6, 182, 212, 0.05);
}
/* P72.6.5 — Real SL (red) / Real TP (green) readouts. */
.ljw-edit-readout--red {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.05);
}
.ljw-edit-readout--green {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.05);
}

/* P72.D.2 — Recovery verdict inside the readout box. Shows the user
   whether the level they just dragged the line to would actually have
   helped (would-have-recovered / still-stopped / reached / not-reached). */
.ljw-verdict {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    border-left: 3px solid var(--ljw-verdict-accent, rgba(255, 255, 255, 0.18));
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ljw-verdict--good     { --ljw-verdict-accent: rgba(52, 211, 153, 0.7); background: rgba(52, 211, 153, 0.08); }
.ljw-verdict--bad      { --ljw-verdict-accent: rgba(248, 113, 113, 0.7); background: rgba(248, 113, 113, 0.08); }
.ljw-verdict--warn     { --ljw-verdict-accent: rgba(245, 158, 11, 0.65); background: rgba(245, 158, 11, 0.07); }
.ljw-verdict--neutral  { --ljw-verdict-accent: rgba(148, 163, 184, 0.4); }
.ljw-verdict__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0.01em;
}
.ljw-verdict--good .ljw-verdict__title { color: #34D399; }
.ljw-verdict--bad  .ljw-verdict__title { color: #F87171; }
.ljw-verdict--warn .ljw-verdict__title { color: #F59E0B; }
.ljw-verdict__detail {
    font-size: 0.76rem;
    color: var(--text-secondary, #A1A1AA);
    line-height: 1.45;
}
.ljw-verdict__detail b {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
}
.ljw-verdict__pending {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-tertiary, #71717a);
}

/* P72.D.5 — Conversational intro paragraph at top of wizard steps.
   Three-part anatomy:
     • lede     — bold sentence explaining what trade did
     • facts    — pair of cards with entry + exit recap (read-only)
     • question — what we still need + what the user should do
     • why      — short italic line on why this matters (footnote vibes) */
.ljw-step-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(var(--primary-rgb, 239,191,4), 0.55);
    border-radius: 8px;
}
.ljw-intro__lede {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.95);
}
.ljw-intro__lede b {
    color: var(--primary, #EFBF04);
    font-weight: 700;
}
.ljw-intro__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ljw-intro__fact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
}
.ljw-intro__fact-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary, #71717a);
}
.ljw-intro__fact-val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
}
.ljw-intro__fact-sub {
    font-size: 0.7rem;
    color: var(--text-tertiary, #71717a);
    font-variant-numeric: tabular-nums;
}
.ljw-intro__question {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.ljw-intro__question b {
    color: rgba(255, 255, 255, 0.98);
    font-weight: 700;
}
.ljw-intro__why {
    margin: 0;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: var(--text-tertiary, #71717a);
    font-style: italic;
    line-height: 1.45;
}

/* P72.D.4 — Trade context recap, rendered under edit-mode readouts to
   fill the otherwise-empty bottom half of the wizard panel with useful
   "what actually happened" info: entry → exit + duration + realized
   P&L. Pure read-only summary; the level being set lives above. */
.ljw-trade-context {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ljw-trade-context__title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary, #71717a);
}
.ljw-trade-context__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}
.ljw-trade-context__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    min-width: 0;
}
.ljw-trade-context__lbl {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary, #71717a);
}
.ljw-trade-context__val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ljw-trade-context__sub {
    font-size: 0.7rem;
    color: var(--text-tertiary, #71717a);
    font-variant-numeric: tabular-nums;
}
.ljw-trade-context__arrow {
    font-size: 1rem;
    color: var(--text-tertiary, #71717a);
    align-self: center;
    text-align: center;
}
.ljw-trade-context__result {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--ljw-tc-accent, rgba(148, 163, 184, 0.4));
    background: rgba(0, 0, 0, 0.18);
}
.ljw-trade-context__result--good    { --ljw-tc-accent: rgba(52, 211, 153, 0.7); background: rgba(52, 211, 153, 0.06); }
.ljw-trade-context__result--bad     { --ljw-tc-accent: rgba(248, 113, 113, 0.7); background: rgba(248, 113, 113, 0.06); }
.ljw-trade-context__result--neutral { --ljw-tc-accent: rgba(148, 163, 184, 0.4); }
.ljw-trade-context__rlbl {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary, #71717a);
}
.ljw-trade-context__rval {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.ljw-trade-context__rdollar {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ljw-trade-context__result--good .ljw-trade-context__rdollar { color: #34D399; }
.ljw-trade-context__result--bad  .ljw-trade-context__rdollar { color: #F87171; }

/* P72.D — Continue hint shown below a readout box on edit-mode steps
   where there's no choice card above. Fills the empty space and points
   the user at the next action. */
.ljw-cta-hint {
    margin-top: 14px;
    padding: 10px 12px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-tertiary, #71717a);
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    line-height: 1.5;
}
.ljw-cta-hint b {
    color: var(--primary, #EFBF04);
    font-weight: 700;
}
.ljw-edit-readout__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.ljw-edit-readout__lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}
.ljw-edit-readout--gold     .ljw-edit-readout__lbl { color: var(--primary, #EFBF04); }
.ljw-edit-readout--sky      .ljw-edit-readout__lbl { color: #7DD3FC; }
.ljw-edit-readout--magenta  .ljw-edit-readout__lbl { color: #E879F9; }
.ljw-edit-readout--cyan     .ljw-edit-readout__lbl { color: #06B6D4; }
.ljw-edit-readout--red      .ljw-edit-readout__lbl { color: #F87171; }
.ljw-edit-readout--green    .ljw-edit-readout__lbl { color: #34D399; }
.ljw-edit-readout__hint {
    font-size: 0.7rem;
    color: var(--text-tertiary, #71717a);
    font-style: italic;
}
.ljw-edit-readout__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ljw-edit-readout__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
}
.ljw-edit-readout__cellLbl {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary, #71717a);
}
.ljw-edit-readout__cellVal {
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* P72.3 — Chart edit-mode highlight on the chart-wrap. Inner glow (inset
   box-shadow) signals "this surface is editable right now". */
.lj-detail-v2__chart-wrap.lj-chart-edit {
    transition: box-shadow .2s ease, border-color .2s ease;
}
.lj-detail-v2__chart-wrap.lj-chart-edit--target {
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(var(--primary-rgb, 239,191,4), 0.25),
        inset 0 0 36px rgba(var(--primary-rgb, 239,191,4), 0.10),
        0 0 0 1px rgba(var(--primary-rgb, 239,191,4), 0.15);
}
.lj-detail-v2__chart-wrap.lj-chart-edit--stop {
    border-color: rgba(125, 211, 252, 0.50);
    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 252, 0.22),
        inset 0 0 36px rgba(125, 211, 252, 0.08),
        0 0 0 1px rgba(125, 211, 252, 0.15);
}
/* P72.4 — magenta highlight for MAE drag. */
.lj-detail-v2__chart-wrap.lj-chart-edit--mae {
    border-color: rgba(232, 121, 249, 0.50);
    box-shadow:
        inset 0 0 0 1px rgba(232, 121, 249, 0.22),
        inset 0 0 36px rgba(232, 121, 249, 0.08),
        0 0 0 1px rgba(232, 121, 249, 0.15);
}
/* P73.2 — cyan highlight for MFE drag (loser-only peak excursion). */
.lj-detail-v2__chart-wrap.lj-chart-edit--mfe {
    border-color: rgba(6, 182, 212, 0.50);
    box-shadow:
        inset 0 0 0 1px rgba(6, 182, 212, 0.22),
        inset 0 0 36px rgba(6, 182, 212, 0.08),
        0 0 0 1px rgba(6, 182, 212, 0.15);
}
/* P72.6.5 — Real SL (red) / Real TP (green) chart highlights. */
.lj-detail-v2__chart-wrap.lj-chart-edit--real-stop {
    border-color: rgba(248, 113, 113, 0.50);
    box-shadow:
        inset 0 0 0 1px rgba(248, 113, 113, 0.22),
        inset 0 0 36px rgba(248, 113, 113, 0.08),
        0 0 0 1px rgba(248, 113, 113, 0.15);
}
.lj-detail-v2__chart-wrap.lj-chart-edit--real-target {
    border-color: rgba(52, 211, 153, 0.50);
    box-shadow:
        inset 0 0 0 1px rgba(52, 211, 153, 0.22),
        inset 0 0 36px rgba(52, 211, 153, 0.08),
        0 0 0 1px rgba(52, 211, 153, 0.15);
}

/* P72.3 — Overlay sits on top of the chart-canvas, below the session
   stripe (which is positioned below the chart, so this only covers the
   chart area). pointer-events:none on the overlay itself; line / handle
   re-enable pointer events so drag works without blocking chart
   pan/zoom outside of the handle. */
.lj-chart-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 84px; /* session-info stripe height (P72.7.2 — was 72) */
    pointer-events: none;
    z-index: 5;
}
/* P72.D.2 — line is now a 22px tall TRANSPARENT track centered on the
   target y. The visible dashed line + glow are rendered via ::before at
   the track's vertical middle. This widens the hitbox 14× (1.5 → 22px)
   so users don't fight the chart's underlying pan/zoom while trying to
   grab the line. transform centers the track on the price coord, so the
   existing positionLine() math (line.style.top = y) stays unchanged. */
.lj-chart-edit-line {
    position: absolute;
    left: 0;
    right: 60px; /* leave space for the price-axis labels */
    height: 22px;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: auto;
    cursor: ns-resize;
    transition: top .04s linear;
}
.lj-chart-edit-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1.5px dashed var(--lj-edit-color, var(--primary, #EFBF04));
    box-shadow: 0 0 18px rgba(var(--lj-edit-color-rgb, 239, 191, 4), 0.45);
    pointer-events: none;
}
.lj-chart-edit-overlay.is-dragging .lj-chart-edit-line::before {
    border-top-style: solid;
}
.lj-chart-edit-overlay--target {
    --lj-edit-color: var(--primary, #EFBF04);
    --lj-edit-color-rgb: 239, 191, 4;
}
.lj-chart-edit-overlay--stop {
    --lj-edit-color: #7DD3FC;
    --lj-edit-color-rgb: 125, 211, 252;
}
/* P72.4 — magenta overlay for MAE marker. */
.lj-chart-edit-overlay--mae {
    --lj-edit-color: #E879F9;
    --lj-edit-color-rgb: 232, 121, 249;
}
/* P73.2 — cyan overlay for MFE marker (loser peak gain). */
.lj-chart-edit-overlay--mfe {
    --lj-edit-color: #06B6D4;
    --lj-edit-color-rgb: 6, 182, 212;
}
/* P72.6.5 — Real planned SL (red) / TP (green) lines. */
.lj-chart-edit-overlay--real-stop {
    --lj-edit-color: #F87171;
    --lj-edit-color-rgb: 248, 113, 113;
}
.lj-chart-edit-overlay--real-target {
    --lj-edit-color: #34D399;
    --lj-edit-color-rgb: 52, 211, 153;
}
/* P72.D.2 — tag is now draggable too (pointer-events:auto). Same hitbox
   as the handle. User can grab anywhere on the line — visible label,
   handle, or the wide transparent track. */
.lj-chart-edit-tag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    background: rgba(10, 10, 12, 0.88);
    border: 1px solid var(--lj-edit-color);
    border-radius: 4px;
    color: var(--lj-edit-color);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.02em;
    pointer-events: auto;
    cursor: ns-resize;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.lj-chart-edit-handle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lj-edit-color);
    border: 2px solid rgba(0,0,0,0.6);
    box-shadow: 0 0 14px rgba(var(--lj-edit-color-rgb), 0.7), 0 0 0 6px rgba(var(--lj-edit-color-rgb), 0.14);
    cursor: grab;
    pointer-events: auto;
}
.lj-chart-edit-handle:hover {
    transform: translateY(-50%) scale(1.15);
}
.lj-chart-edit-overlay.is-dragging .lj-chart-edit-handle {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.22);
}

.ljw-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ljw-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.ljw-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ljw-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--text-secondary, #A1A1AA);
}
.ljw-btn--ghost:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-primary, #fff);
}
.ljw-btn--primary {
    background: rgba(var(--primary-rgb, 239,191,4), 0.12);
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.5);
    color: var(--primary, #EFBF04);
    margin-left: auto;
}
.ljw-btn--primary:hover:not(:disabled) {
    background: rgba(var(--primary-rgb, 239,191,4), 0.22);
    border-color: rgba(var(--primary-rgb, 239,191,4), 0.7);
}

.lj-detail-v2__chart-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.lj-detail-v2__chart {
    width: 100%;
    /* Fixed height — gives the chart visual permanence and reads as a
       proper "screen" for the trade rather than a flex-grown panel.
       Bumped from 560 → 640 to absorb part of the right-column
       overflow we were seeing in dense Custom-ideal evaluations.
       P72.D.36 — height now tracks --lj-modal-h so wide monitors get
       a taller chart too. */
    height: var(--lj-modal-h, 640px);
    min-height: 480px;
    background: rgba(10, 10, 12, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.lj-detail-v2__rightcol {
    /* Split 40/60 between real (top) and ideal (bottom) via grid rows.
       Both halves stretch to fill the column's total height, which is
       matched to the chart (640px) via `align-items: stretch` on the
       parent middle row. Content inside each half centers vertically
       in its slot so sparse states (deferred ideal) breathe and dense
       states (full Custom ideal evaluation) pack tightly without
       overflowing the chart envelope. */
    display: grid;
    grid-template-rows: 2fr auto 3fr;
    gap: 0;
    padding: 12px 14px;
    background: rgba(22, 24, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    min-width: 0;
    /* Hard-cap the side panel to the chart's fixed height so it can
       never extend past the chart's bottom edge (even on Step-1 where
       the header + 2 stacked buttons exceed the natural row-fr split). */
    height: var(--lj-modal-h, 640px);
    max-height: var(--lj-modal-h, 640px);
    min-height: 0;
    overflow: hidden;
}

/* "Evaluated" state — user has picked Same-as-plan or Custom ideal.
   Collapse the split top/bottom layout into a single panel: hide the
   raw REAL TRADE block at top, hide the divider, let the ideal panel
   take the full column with its built-in comparison table inside.
   Slightly increased outer padding so the consolidated panel feels
   more "premium" with breathing room around the bigger elements. */
.lj-detail-v2__rightcol.is-evaluated {
    grid-template-rows: 1fr;
    padding: 16px 18px;
}

.lj-detail-v2__rightcol.is-evaluated .lj-detail-v2__rrtpsl,
.lj-detail-v2__rightcol.is-evaluated .lj-detail-v2__divider {
    display: none;
}

/* Loser-stop trades hide the REAL TRADE block + divider unconditionally
   (regardless of evaluation mode). Planned TP / R:R are not meaningful
   framing for a stopped-out trade — the chart shows the SL zone and
   the verdict block carries the realized pts + $. Mirrors the same
   "give the panel the whole column" behavior as .is-evaluated.
   Height is locked to the chart's 640px so dense verdict content
   doesn't push the column past the chart's bottom edge — the inner
   panel sizes adapt to fit within this envelope. */
.lj-detail-v2__rightcol.is-loser-stop {
    grid-template-rows: 1fr;
    padding: 16px 18px;
    height: var(--lj-modal-h, 640px);
    overflow: hidden;
}
.lj-detail-v2__rightcol.is-loser-stop > * {
    min-height: 0;
}
.lj-detail-v2__rightcol.is-loser-stop .lj-ideal-panel-host {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.lj-detail-v2__rightcol.is-loser-stop .lj-ideal-panel--vertical {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.lj-detail-v2__rightcol.is-loser-stop .lj-detail-v2__rrtpsl,
.lj-detail-v2__rightcol.is-loser-stop .lj-detail-v2__divider {
    display: none;
}

/* Loser-stop panel layout — overrides the winner-tuned
   `justify-content: space-between` + `margin-top: auto` chain that
   was creating a giant void between "Why did this happen?" and the
   3-button toggle. Loser content flows as a SINGLE coherent group:
   header → realized → question → buttons. No stretching.
   Specificity bumped via doubled class selectors so we beat the
   `.lj-ideal-panel--vertical .lj-ideal-panel__main { margin-top: auto }`
   rule that lives later in the file. */
.lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop {
    justify-content: center;
    gap: 16px;
}
.lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop .lj-ideal-panel__loser {
    flex: 0 0 auto;
    padding: 8px 4px 0;
    gap: 6px;
}
.lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop .lj-ideal-panel__main {
    margin-top: 0;
    gap: 8px;
}
/* The "left" wrapper that holds the loser-block — for loser-stop it
   should NOT be a gauge container (no speedometer for losers), just
   a flow wrapper. Drop the gauge alignment so the loser block sits
   naturally without center-justified vertical wasted space. */
.lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop .lj-ideal-panel__gauge {
    flex: 0 0 auto;
    align-items: stretch;
    padding: 0;
}

/* Loser-stop layout — identical structure in un-evaluated and
   evaluated states (verdict signal lives on the buttons themselves
   via dim non-selected + back-arrow on selected). In evaluated state
   the chip text is hidden via `visibility: hidden` so the chip's
   slot is preserved — that keeps the hero / Why / buttons at the
   exact same Y-coordinates regardless of evaluation state. */
.lj-detail-v2__rightcol.is-loser-stop.is-evaluated .lj-ideal-panel__mode-label {
    visibility: hidden;
}

/* Stop-analysis result card — appears in the trade-detail panel
   when `stop_analysis` is filled. Visually "drops out" of the
   selected "Stop Loss was too small" toggle button: shares its
   border color, squares the seam between them, and is offset up
   to touch the button's bottom edge. */
.lj-stop-result-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.lj-stop-result-card.is-recover {
    border-color: rgba(52, 211, 153, 0.42);
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.10) 0%, rgba(52, 211, 153, 0.02) 100%);
}
.lj-stop-result-card.is-stopped {
    border-color: rgba(248, 113, 113, 0.42);
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.10) 0%, rgba(248, 113, 113, 0.02) 100%);
}
/* Seam — when the card sits right below the selected SL-too-small
   button, square the matching corners + erase the shared border.
   Also inset the card horizontally (12px each side) so it reads as
   a child of the button it "drops out" of. */
.lj-stop-result-card.is-connected {
    margin: -10px 12px 8px 12px;
    padding-top: 14px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid transparent;
}
.lj-ideal-toggle--has-result .lj-ideal-toggle__btn[data-val="stop-too-tight"].is-on {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* When "Stop Loss was too small" is selected (analysis filled or not),
   compress the other three (dimmed) buttons vertically so the panel
   has room for the bottom result card / Analyze CTA. */
.lj-ideal-toggle--triple:has(.lj-ideal-toggle__btn[data-val="stop-too-tight"].is-on) .lj-ideal-toggle__btn.is-dim {
    min-height: 48px;
    padding: 8px 12px;
    transition: min-height 0.18s ease, padding 0.18s ease, opacity 0.2s ease;
}
.lj-ideal-toggle--triple:has(.lj-ideal-toggle__btn[data-val="stop-too-tight"].is-on) .lj-ideal-toggle__btn.is-dim .lj-ideal-toggle__hint {
    /* Dimmed buttons in compact state — only label visible, hint
       hidden to save vertical space. */
    display: none;
}

.lj-stop-result-card__sentence {
    flex: 1 1 auto;
    font-size: 0.86rem;
    line-height: 1.42;
    color: var(--text-secondary);
    letter-spacing: -0.005em;
}
.lj-stop-result-card__sentence strong {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lj-stop-result-card__verdict-tag {
    font-weight: 700;
}
.lj-stop-result-card.is-recover .lj-stop-result-card__verdict-tag { color: #34d399; }
.lj-stop-result-card.is-stopped  .lj-stop-result-card__verdict-tag { color: #fca5a5; }

.lj-stop-result-card__edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lj-stop-result-card__edit:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.22);
}
.lj-stop-result-card__edit-icon {
    font-size: 0.95rem;
    line-height: 1;
}
/* Dim state for non-selected buttons after user picks a verdict.
   Selected button keeps full opacity + on-state gradient; the rest
   fade back so the chosen answer reads clearly. */
.lj-ideal-toggle--triple .lj-ideal-toggle__btn.is-dim,
.lj-ideal-toggle--winner-stack .lj-ideal-toggle__btn.is-dim {
    opacity: 0.32;
    transition: opacity 0.2s ease;
}
.lj-ideal-toggle--triple .lj-ideal-toggle__btn.is-dim:hover:not(:disabled),
.lj-ideal-toggle--winner-stack .lj-ideal-toggle__btn.is-dim:hover:not(:disabled) {
    opacity: 0.6;
}
/* Back-arrow indicator on the selected button — purely visual cue
   that clicking the button will undo the choice. The arrow has its
   own hover tooltip explaining this. Positioned in the right side
   of the button where the existing label sits to its left. */
.lj-ideal-toggle__undo {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: help;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lj-ideal-toggle__btn:hover .lj-ideal-toggle__undo {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.22);
}
/* Reserve extra right-padding on the selected button so the label
   text doesn't bump into the back-arrow icon. */
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn.is-on {
    padding-right: 52px;
}

/* In evaluated state the panel gets to use the WHOLE column. Boost
   spacing + content sizes so the right column feels designed rather
   than half-empty. Top-down: mode chip → big gauge → verdict →
   captured row → comparison table → toggle/CTA pinned to bottom. */
.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel--vertical {
    gap: 14px;
    padding: 4px 0;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp {
    margin-top: 12px;
    padding-top: 14px;
    gap: 0;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-row {
    padding: 10px 0;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-header {
    padding: 0 0 6px;
    margin-bottom: 4px;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-val {
    font-size: 1.18rem;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-delta {
    font-size: 0.92rem;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-k {
    font-size: 0.78rem;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-unit {
    font-size: 0.6rem;
    display: block;
    margin: 1px 0 0;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__cmp-header .lj-ideal-panel__cmp-col {
    font-size: 0.7rem;
}

/* Verdict line — translates the efficiency % into plain English. */
.lj-ideal-panel__verdict {
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin-bottom: 6px;
}
.lj-ideal-panel__verdict.is-green { color: #6ee7b7; }
.lj-ideal-panel__verdict.is-amber { color: #fbbf24; }
.lj-ideal-panel__verdict.is-red   { color: #fca5a5; }

/* Pump up captured row in evaluated state. */
.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__stat-line {
    font-size: 1rem;
    gap: 5px;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__stat-num {
    font-size: 1.1rem;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__stat-tail {
    margin-top: 4px;
    font-size: 0.82rem;
}

/* Mode chip — bigger in evaluated state for headline emphasis. */
.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__mode-label {
    font-size: 0.78rem;
    padding: 5px 8px 5px 14px;
    letter-spacing: 0.14em;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__mode-clear {
    font-size: 1.1rem;
}

/* Big gauge number in evaluated state (panel size variant). */
.lj-detail-v2__rightcol.is-evaluated .lj-speedometer--panel text:first-of-type {
    font-size: 36px;
}

.lj-detail-v2__divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 100%);
    width: 100%;
    margin: 10px 0;
}

.lj-detail-v2__rrtpsl {
    /* Reuses the card right-stats column styles (.tg-stats-rr-block /
       .tg-stats-tp-sl) but the modal scales them up so RR + pts values
       fill the half-rectangle comfortably. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px 8px;
    border-radius: 10px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    --tg-stats-divider: rgba(255, 255, 255, 0.1);
    min-height: 0;
}

/* "Real trade" section header — uppercase eyebrow matching the ITM
   header. Tells the user "this is the data from your actual fill,
   not the ideal version below". */
.lj-detail-v2__rrtpsl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex: 0 0 auto;
}

.lj-detail-v2__rrtpsl-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.lj-detail-v2__rrtpsl-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}

.lj-detail-v2__rrtpsl:hover {
    background: rgba(245, 158, 11, 0.06);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

/* "Fill this first" attention state — applied whenever planned_stop OR
   planned_target is missing (and the trade isn't BE-tagged). Subtle amber
   dashed outline + a slow gentle pulse. Earlier intensities were too
   aggressive; toned down per user feedback. The trade-detail's
   ideal-panel goes .is-deferred at the same time, creating a clear
   "this is the next action" funnel. */
.lj-detail-v2__rrtpsl.is-needs-attention {
    outline: 1.5px dashed rgba(245, 158, 11, 0.55);
    outline-offset: 2px;
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.07),
        0 0 14px 2px rgba(245, 158, 11, 0.12);
    animation: lj-rrtpsl-pulse 2.8s ease-in-out infinite;
}

.lj-detail-v2__rrtpsl.is-needs-attention:hover {
    background: rgba(245, 158, 11, 0.06);
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.14),
        0 0 18px 3px rgba(245, 158, 11, 0.20);
}

@keyframes lj-rrtpsl-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(245, 158, 11, 0.05),
            0 0 12px 2px rgba(245, 158, 11, 0.10);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(245, 158, 11, 0.13),
            0 0 18px 3px rgba(245, 158, 11, 0.20);
    }
}

/* "Now evaluate" attention state — applied to the ideal-panel once
   planned_stop & planned_target are set but ideal_mode is still null.
   Step 2 of the pipeline takes the baton from Step 1: same visual idiom
   (amber dashed + soft pulse) so the user's eye follows naturally, but
   the panel is interactive (no deferred dim). */
.lj-ideal-panel.is-needs-eval {
    outline: 1.5px dashed rgba(245, 158, 11, 0.55);
    outline-offset: 4px;
    border-radius: 12px;
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.07),
        0 0 14px 2px rgba(245, 158, 11, 0.12);
    animation: lj-rrtpsl-pulse 2.8s ease-in-out infinite;
}
/* Loser-stop overrides the inner-panel attention frame — the outer
   right column carries the dashed amber instead (one frame, not two
   nested). The .is-needs-eval class on .lj-detail-v2__rightcol is
   applied by trades-gallery.js when mode==null && tradeClass==loser-stop. */
.lj-detail-v2__rightcol.is-loser-stop .lj-ideal-panel.is-needs-eval {
    outline: none;
    box-shadow: none;
    animation: none;
}
.lj-detail-v2__rightcol.is-needs-eval {
    outline: 1.5px dashed rgba(245, 158, 11, 0.55);
    outline-offset: -1px;
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.07),
        0 0 14px 2px rgba(245, 158, 11, 0.12);
    animation: lj-rrtpsl-pulse 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .lj-detail-v2__rightcol.is-needs-eval { animation: none; }
}

/* Respect users who prefer no motion — keep both highlights static. */
@media (prefers-reduced-motion: reduce) {
    .lj-detail-v2__rrtpsl.is-needs-attention,
    .lj-ideal-panel.is-needs-eval {
        animation: none;
    }
}

.lj-detail-v2__rrtpsl .tg-stats-rr-block {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tg-stats-divider);
    gap: 4px;
    /* Strip the gallery-card hairline divider between R:R and Eff: there's
       no Eff sibling in the modal, so the border becomes an orphan
       vertical line on the right edge of the R:R cell. */
    border-right: none;
    padding-right: 0;
}

/* RR number is the headline of this rectangle — large, prominent. */
.lj-detail-v2__rrtpsl .tg-stats-rr-val {
    font-size: 2.4rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.lj-detail-v2__rrtpsl .tg-stats-item-k {
    /* Bumped from card default so the "R:R / TP / SL" labels are
       legible at the new larger value sizes. */
    font-size: 0.74rem;
    letter-spacing: 0.14em;
}

.lj-detail-v2__rrtpsl .tg-stats-tp-sl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding-top: 12px;
}

/* TP/SL pts values — also scaled up so they balance the big RR above. */
.lj-detail-v2__rrtpsl .tg-stats-item-v {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.lj-detail-v2__rrtpsl .tg-stats-tp,
.lj-detail-v2__rrtpsl .tg-stats-sl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* --- Reflect section (Step 3 — tags, context, notes) -------------------- */

.lj-detail-v2__reflect {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    margin-top: 8px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.18);
    position: relative;
}
.lj-detail-v2__reflect::before {
    /* Subtle gold accent — same language as section dividers on Analytics */
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 56px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}
.lj-detail-v2__reflect-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;
}
.lj-detail-v2__reflect-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.lj-detail-v2__reflect-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 2px 8px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.30);
    border-radius: 4px;
}
.lj-detail-v2__reflect-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.lj-detail-v2__reflect-sub {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.lj-detail-v2__tagzone {
    display: grid;
    grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.lj-detail-v2__tagzone-left,
.lj-detail-v2__tagzone-right {
    padding: 16px 18px;
    background: rgba(22, 24, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    min-width: 0;
}

.lj-detail-v2__wizard-host {
    /* The wizard internally builds its own root with classes like
       .simple-tag-editor-root — we just provide the bounding box. */
    min-height: 200px;
}

.lj-detail-v2__notes {
    /* Notes is intentionally low-key: a thin, full-width row below the
       tag zone. Doesn't compete with the high-density above. */
    padding: 4px 0 0;
}

/* --- Trade context (left half of tag zone) ---------------------------- */
/* Mood single-select + Mistakes multi-select. Stored on trade.mood and
   trade.mistakes[] respectively. Pills click → toggle → persist. */

.lj-trade-context {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.lj-trade-context__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lj-trade-context__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.lj-trade-context__label-hint {
    font-weight: 500;
    color: var(--text-tertiary);
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
    margin-left: 4px;
}

.lj-trade-context__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lj-tc-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.lj-tc-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* (lj-tc-pill__emoji and lj-tc-pill--mood removed — mood feature dropped) */

/* Active mistake — soft red (it's a "watch out" tag) */
.lj-tc-pill--mistake.is-active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.42);
    color: #fca5a5;
}

/* --- Merge chip in header ---------------------------------------------- */

.tg-merge-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    letter-spacing: 0.02em;
}

.tg-merge-chip:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.55);
}

.tg-merge-chip__glyph {
    font-size: 0.95rem;
    line-height: 1;
}

.tg-merge-chip__count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tg-merge-chip__lbl {
    color: #c7d2fe;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

.tg-merge-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 480px;
    max-width: 640px;
    background: rgba(14, 16, 20, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
    padding: 14px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.tg-merge-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* --- Journal notes textarea -------------------------------------------- */

.lj-detail-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(22, 24, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.lj-detail-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lj-detail-notes__lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.lj-detail-notes__lbl svg {
    color: var(--primary);
    opacity: 0.85;
}

.lj-detail-notes__count {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.lj-detail-notes__input {
    width: 100%;
    background: rgba(10, 10, 12, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 11px 13px;
    resize: vertical;
    min-height: 72px;
    max-height: 260px;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.lj-detail-notes__input::placeholder {
    color: rgba(255, 255, 255, 0.28);
    font-style: italic;
}

.lj-detail-notes__input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.45);
    background: rgba(10, 10, 12, 0.8);
}

/* --- P2 panel: vertical variant ---------------------------------------- */

.lj-ideal-panel--vertical {
    /* Vertical stack fills its grid slot. `justify-content: space-between`
       distributes empty space between top (mode chip + gauge), middle
       (stats / levels) and bottom (toggle + CTA) — sparse states get
       proper breathing room, dense Custom-ideal states pack within
       the available height. Tightened gap 10→6 to fit chart envelope. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0;
    background: none;
    border: none;
    box-shadow: none;
    height: 100%;
    min-height: 0;
}

/* Gauge cluster fills available space at the TOP of the panel. */
.lj-ideal-panel--vertical .lj-ideal-panel__gauge {
    flex: 0 0 auto;
    gap: 4px;
}

/* Main cluster (sub text + toggle + CTA) sits at the BOTTOM via
   `margin-top: auto` so the gauge area gets the breathing room when
   content is sparse. */
.lj-ideal-panel--vertical .lj-ideal-panel__main {
    margin-top: auto;
    gap: 6px;
}

/* Toggle buttons in evaluated state — bigger hit targets and a hint of
   visual weight to make them feel like the secondary action zone
   below the headline gauge + comparison. */
.lj-detail-v2__rightcol.is-evaluated .lj-ideal-toggle__btn {
    padding: 10px 12px;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-toggle__lbl {
    font-size: 0.92rem;
}

.lj-detail-v2__rightcol.is-evaluated .lj-ideal-panel__editbtn {
    padding: 11px 14px;
    font-size: 0.9rem;
}

.lj-ideal-panel__mode-label {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    line-height: 1.6;
}
.lj-ideal-panel__mode-label.is-unset {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 10px;
}
.lj-ideal-panel__mode-label.is-same {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.32);
}
.lj-ideal-panel__mode-label.is-custom {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.32);
}
/* Loser-stop mode chips — distinct from winner palette so the user
   reads them as a different evaluation track at a glance. */
.lj-ideal-panel__mode-label.is-stop-fine {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.32);
}
.lj-ideal-panel__mode-label.is-stop-tight {
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.32);
}
/* "BE saved it" mode chip — green (matches the Good corner-glow and
   the site's positive-outcome palette). */
.lj-ideal-panel__mode-label.is-be {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.32);
}
/* "BE then TP" mode chip — red (matches the Bad corner-glow). The
   verdict here is "you lost a winner to a BE stop" — a bad outcome. */
.lj-ideal-panel__mode-label.is-be-over {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.32);
}

/* BE-tagged trade placeholder — replaces the whole panel when the trade
   has the BE tag. Simple, low-attention "no evaluation needed" copy. */
.lj-ideal-panel__be-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 24px 16px;
    color: var(--text-tertiary);
}
.lj-ideal-panel__be-icon {
    font-size: 1.4rem;
    color: rgba(251, 191, 36, 0.6);
}
.lj-ideal-panel__be-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.lj-ideal-panel__be-sub {
    font-size: 0.78rem;
    line-height: 1.4;
    max-width: 240px;
}

/* Loser-stop content block (replaces gauge + verdict + comparison for
   stopped-out trades). Centered, headline-driven, color-coded by
   stop_analysis outcome. */
.lj-ideal-panel__loser {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 14px 8px;
    flex: 1 1 auto;
}
.lj-ideal-panel__loser-icon {
    font-size: 1.7rem;
    line-height: 1;
    color: rgba(148, 163, 184, 0.7);
}
.lj-ideal-panel__loser-icon.is-amber { color: #fbbf24; }
.lj-ideal-panel__loser-icon.is-neutral { color: rgba(148, 163, 184, 0.55); }
.lj-ideal-panel__loser-icon.is-be { color: #34d399; }
.lj-ideal-panel__loser-icon.is-be-over { color: #fca5a5; }
.lj-ideal-panel__loser-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.lj-ideal-panel__loser-title.is-amber { color: #fde68a; }
.lj-ideal-panel__loser-title.is-neutral { color: var(--text-secondary); }
.lj-ideal-panel__loser-title.is-be { color: #34d399; }
.lj-ideal-panel__loser-title.is-be-over { color: #fca5a5; }
.lj-ideal-panel__loser-big {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 4px 0;
}
.lj-ideal-panel__loser-big.is-be { color: #34d399; }
.lj-ideal-panel__loser-big.is-be-over { color: #fca5a5; }
/* "Why did this happen?" — small all-caps label above the toggle.
   Plain text, no flanking lines or decoration. */
.lj-ideal-panel__loser-q {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 4px;
}

/* Un-evaluated hero — top-anchored, big "Stopped out" title + red
   PnL/pts row, then the "Why did this happen?" lead-in. The panel
   itself is set to `justify-content: flex-start` for un-evaluated
   loser-stop (override below) so this content pins to the top of
   the column rather than centering with empty space above. */
.lj-ideal-panel__loser--unevaluated {
    gap: 6px !important;
    padding-top: 4px !important;
}
.lj-ideal-panel__hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
}

/* Center-justify the loser-stop panel so the whole content block
   (hero + stats + Why + buttons) sits in the visual middle of the
   column. Internal spacing is unchanged — only the block as a unit
   shifts down to use empty space above & below evenly. */
.lj-detail-v2__rightcol.is-loser-stop .lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop {
    justify-content: center;
}
.lj-detail-v2__rightcol.is-loser-stop .lj-ideal-panel--vertical.lj-ideal-panel--class-loser-stop .lj-ideal-panel__main {
    margin-top: 0;
}

/* Realized-pts subline under the "Stopped out" hero title — small
   red label that puts the number front-and-center without competing
   with the title. */
.lj-ideal-panel__hero-pts {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fca5a5;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    margin-top: 2px;
}

/* Planned-trade stats row — two cells (Planned TP + Planned R:R)
   sitting between the hero and the toggle. TP cell is click-to-edit;
   highlighted "is-missing" state when the value isn't set yet. */
.lj-loser-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}
.lj-loser-stat,
.lj-loser-stat__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    text-align: center;
    cursor: default;
    min-height: 64px;
    box-sizing: border-box;
}
.lj-loser-stat__btn {
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.lj-loser-stat__btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.lj-loser-stat__label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lj-loser-stat__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.lj-loser-stat__sub {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.lj-loser-stat.is-empty .lj-loser-stat__value {
    color: var(--text-tertiary);
}
/* "+ Set" CTA state for missing TP — amber accent matches the
   loser-stop attention motif. Pulses when the panel is in
   `is-needs-tp` state (toggle below is gated until TP is filled). */
.lj-loser-stat__btn.is-missing {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.32);
}
.lj-loser-stat__btn.is-missing:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.48);
}
.lj-loser-stat__btn.is-missing .lj-loser-stat__value {
    color: #fbbf24;
}
.lj-ideal-panel.is-needs-tp .lj-loser-stat__btn.is-missing {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18),
                0 0 14px 2px rgba(245, 158, 11, 0.25);
    animation: lj-rrtpsl-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .lj-ideal-panel.is-needs-tp .lj-loser-stat__btn.is-missing { animation: none; }
}

/* Gated verdict toggle — when TP is missing, the 4 verdict buttons
   are visually grayed out + disabled. Cursor reflects the gate. */
.lj-ideal-panel.is-needs-tp .lj-ideal-toggle--triple .lj-ideal-toggle__btn {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
/* When TP is missing, hide the "WHY DID THIS HAPPEN?" subhead — the
   verdict toggle is locked anyway and the sub-text + pulsing CTA
   above carry the call-to-action. */
.lj-ideal-panel.is-needs-tp .lj-ideal-panel__loser-q {
    display: none;
}
.lj-ideal-panel.is-needs-tp .lj-ideal-panel__sub {
    color: #fbbf24;
    font-weight: 600;
    text-align: center;
    margin-top: 12px;
    font-size: 0.82rem;
}
.lj-ideal-panel__loser-sub {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    max-width: 260px;
}
.lj-ideal-panel__loser-stat {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.lj-ideal-panel__loser-stat strong {
    color: #fca5a5;
    font-variant-numeric: tabular-nums;
}

/* Mini × button inside the mode chip — quick reset of evaluation back
   to "Not yet evaluated". Looks like a chip-affordance, not a primary
   button: small, subdued, hover-only emphasis. */
.lj-ideal-panel__mode-clear {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.55;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 999px;
    transition: opacity 0.15s ease, background 0.15s ease;
    font-weight: 500;
    letter-spacing: 0;
}

.lj-ideal-panel__mode-clear:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

/* Gauge tooltip wrapper — passes hover through to the SVG while
   exposing data-tooltip for the global app tooltip overlay. */
.lj-ideal-panel__gauge-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.lj-ideal-panel--vertical .lj-ideal-panel__gauge {
    align-items: center;
}

.lj-ideal-panel--vertical .lj-ideal-panel__gauge .lj-speedometer {
    /* Evaluated state: chip removed → extra ~36px vertical headroom →
       enlarge gauge from 180 to 220px so it becomes the dominant visual
       anchor of the right column. */
    width: 220px;
}

/* In split (non-evaluated) state keep the smaller 130 to leave room
   for the active toggle + CTA below. Evaluated state has the toggle
   pushed to the column bottom via margin-top:auto so there's more
   breathing room around the gauge. */
.lj-detail-v2__rightcol:not(.is-evaluated) .lj-ideal-panel--vertical .lj-ideal-panel__gauge .lj-speedometer {
    width: 130px;
}

.lj-ideal-panel--vertical .lj-ideal-panel__main {
    align-items: stretch;
    gap: 10px;
}

.lj-ideal-panel--vertical .lj-ideal-panel__sub {
    font-size: 0.78rem;
    text-align: center;
}

.lj-ideal-panel--vertical .lj-ideal-toggle {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
/* Triple-option variant — 3 plain buttons stacked vertically. No
   icons, no left-edge accents, no decorative borders. Matches the
   minimal aesthetic of winners' 2-button toggle. */
.lj-ideal-panel--vertical .lj-ideal-toggle--triple {
    grid-template-columns: 1fr;
    gap: 6px;
}
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 12px 14px;
    gap: 4px;
    /* Uniform card height regardless of label/hint line count — text
       wrap on shorter strings leaves padded whitespace, but all 4
       buttons line up visually. min-height covers the worst case
       (2-line hint), set in px to be predictable on font scaling. */
    min-height: 76px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Corner-gradient accent — top-right radial glow that signals "good"
   (green) or "bad" (red) without coloring the label text. Subtle by
   default; brightens on hover/active state via existing button bg. */
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.18s ease;
}
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn[data-val="loser-be-saved"]::after,
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn[data-val="stop-justified"]::after {
    background: radial-gradient(circle at top right, rgba(52, 211, 153, 0.32) 0%, rgba(52, 211, 153, 0.10) 40%, transparent 75%);
}
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn[data-val="loser-be-overshoot"]::after,
.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn[data-val="stop-too-tight"]::after {
    background: radial-gradient(circle at top right, rgba(248, 113, 113, 0.32) 0%, rgba(248, 113, 113, 0.10) 40%, transparent 75%);
}
/* Winner stack variant — 2 big stacked buttons styled like the 4-button
   loser-stop verdict grid (same min-height, padding, label+hint stack,
   corner-glow accents). Replaces the older small 2-button toggle. */
.lj-ideal-panel--vertical .lj-ideal-toggle--winner-stack {
    grid-template-columns: 1fr;
    gap: 8px;
    /* Side padding so the buttons inset from the panel edges. Makes the
       toggle feel like a card-within-card rather than glued to the
       border. Matches the inset rhythm of Step-1. */
    padding: 0 12px;
}
.lj-ideal-panel--vertical .lj-ideal-toggle--winner-stack .lj-ideal-toggle__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 18px;
    gap: 5px;
    min-height: 78px;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
/* Stack label + hint vertically + center-align both. Label is the
   anchor, hint reads as supporting subtext directly under it. */
.lj-ideal-toggle--winner-stack .lj-ideal-toggle__txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}
.lj-ideal-toggle--winner-stack .lj-ideal-toggle__lbl,
.lj-ideal-panel--vertical .lj-ideal-toggle--winner-stack .lj-ideal-toggle__lbl {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    text-align: center;
}
.lj-ideal-toggle--winner-stack .lj-ideal-toggle__hint,
.lj-ideal-panel--vertical .lj-ideal-toggle--winner-stack .lj-ideal-toggle__hint {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
    max-width: 92%;
    white-space: normal;
}
/* No corner-glow gradients per user request — keep buttons clean. */

.lj-ideal-panel--vertical .lj-ideal-toggle--triple .lj-ideal-toggle__btn:hover:not(:disabled)::after {
    opacity: 1;
}
.lj-ideal-toggle--triple .lj-ideal-toggle__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lj-ideal-toggle--triple .lj-ideal-toggle__lbl {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}
.lj-ideal-toggle--triple .lj-ideal-toggle__hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    letter-spacing: 0;
    line-height: 1.3;
}

.lj-ideal-panel--vertical .lj-ideal-toggle__btn {
    padding: 8px 10px;
    text-align: center;
    align-items: center;
}

.lj-ideal-panel--vertical .lj-ideal-toggle__lbl {
    font-size: 0.85rem;
}

.lj-ideal-panel--vertical .lj-ideal-panel__editbtn {
    width: 100%;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.12) 100%);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.45);
    font-weight: 700;
}

.lj-ideal-panel--vertical .lj-ideal-panel__editbtn:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.32) 0%, rgba(59, 130, 246, 0.18) 100%);
}


/* ==========================================================================
 * P2.2 — Ideal Trade Modal
 * Inherits .lj-modal shell; adds custom blocks for real-trade reference,
 * dual ideal-input rows, and warning banners.
 * ========================================================================== */

.lj-ideal-trade-modal {
    /* Same envelope as MiniChartModal/SAM — all three modals share
       size so the user's mental model stays consistent across them. */
    max-width: 1400px;
    width: min(1400px, calc(100vw - 32px));
}

.lj-itm__grid {
    /* Reuses .lj-mcm__grid layout (chart left / side right). */
    align-items: stretch;
    min-height: 580px;
}

.lj-itm__chart-host {
    /* Engine-owned, no additional rules needed — the .lj-mcm__chart-host
       base styles already cover sizing + position. */
}

.lj-itm__side {
    /* Inherits .lj-mcm__side flex-column layout. */
}

/* IdealTradeModal side panel — flat typography, no card-style boxes.
   Bloomberg / TradingView / Edgewonk side-panels read as columns of
   labeled values with horizontal dividers, not stacks of bordered
   cards. */

.lj-itm__side {
    /* Make sub-blocks fill the side column so the visible content matches
       the chart height. Last spacer pushes any trailing content (e.g.
       RR readout) toward the bottom for visual alignment with the
       chart's bottom edge. */
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 8px 4px 4px 8px;
}

.lj-itm__block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* Section dividers between blocks — single hairline, no card chrome. */
.lj-itm__block + .lj-itm__block {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lj-itm__block-title {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.lj-itm__lock {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Read-only "real trade" rows — small label left, big number right. */
.lj-itm__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 0;
    border: none;
}

.lj-itm__row-k {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.lj-itm__row-v {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Editable ideal-trade fields — "ghost" input style: no box, just
   underline that lights up on focus. Same idiom as the MiniChartModal's
   pts/price input. */
.lj-itm__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lj-itm__field-k {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: help;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
    align-self: flex-start;
}

/* Onboarding hint above the editable inputs — frames "what does
   'ideal' mean here?" so a first-time user doesn't have to guess.
   Subtle: lower-contrast text, italic-friendly emphasis on "better". */
.lj-itm__hint {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    padding: 6px 0 4px;
    margin: -4px 0 6px;
    letter-spacing: 0.005em;
}

.lj-itm__hint strong {
    color: rgba(251, 191, 36, 0.92);
    font-weight: 600;
}

.lj-itm__field-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0 6px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    transition: border-color 0.15s ease;
}

.lj-itm__field-row:focus-within {
    background: none;
    border-bottom-color: rgba(245, 158, 11, 0.65);
}

.lj-itm__field-row.is-invalid {
    border-bottom-color: rgba(239, 68, 68, 0.7);
}

.lj-itm__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.015em;
    padding: 0;
}

.lj-itm__field-row .lj-mcm__input-suffix {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.lj-itm__match-btn {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    color: rgba(251, 191, 36, 0.85);
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color 0.15s ease, background 0.15s ease;
}

.lj-itm__match-btn:hover {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.08);
}

/* Ideal R:R — large flat number, no box. Sits with margin-top:auto so
   it lines up near the chart's bottom regardless of how much content is
   above it. */
.lj-itm__block--rr {
    margin-top: auto;
    align-items: stretch;
    gap: 4px;
}
/* MCM R:R block — sit right under the hero (not floating at the
   bottom of the column). The unified MCM side panel content is
   shorter than the chart height, and pushing R:R to the bottom
   created a weird empty gap with the value crammed at the bottom. */
.lj-mini-chart-modal .lj-itm__block--rr {
    margin-top: 0;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.lj-mini-chart-modal .lj-itm__block--rr .lj-itm__block-title {
    font-size: 0.76rem;
    color: rgba(251, 191, 36, 0.7);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.lj-mini-chart-modal .lj-itm__block--rr .lj-mcm__block-v--rr {
    font-size: 2.2rem;
    text-align: center;
}

.lj-itm__block--rr .lj-mcm__block-v--rr {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: left;
    padding: 0;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.lj-itm__warn {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
}

/* StopAnalysisModal sizing — matches IdealTradeModal (slightly
   narrower than MiniChartModal) so the third modal in the trio
   (Real / Ideal / Hypothetical) shares a consistent envelope.
   Compact grid: side panel has fewer interactive surfaces than Ideal,
   so we lower min-height (Ideal 540 → SAM 460) and the chart fills
   naturally. Prevents the dialog from hitting max-height (768) just
   because of inherited Ideal sizing. */
.lj-stop-analysis-modal {
    max-width: 1400px;
    width: min(1400px, calc(100vw - 32px));
}

/* SAM side panel — redesigned header. Bigger MNQ ticker, then a
   "Stopped at" stat block with big pts + small price. Replaces the
   old 4-row Real-trade table whose values duplicated other UI. */
.lj-sam__ticker-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lj-sam__ticker {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.lj-sam__meta {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}
.lj-sam__stopped {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lj-sam__stopped-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lj-sam__stopped-pts {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fca5a5;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.lj-sam__stopped-price {
    font-size: 0.85rem;
    color: rgba(252, 165, 165, 0.65);
    font-variant-numeric: tabular-nums;
}

/* Planned TP context — compact single-row block sitting between
   header and the Hypothetical SL hero. */
.lj-sam__tp-context {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
}
.lj-sam__tp-context .lj-itm__row-k {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-weight: 600;
}
.lj-sam__tp-context .lj-itm__row-v {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.lj-sam__tp-context .lj-itm__row-v.is-missing {
    color: #fbbf24;
}

/* Hypothetical SL hero — biggest, boldest control in the modal. */
.lj-sam__hypo-block {
    padding: 14px 14px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.05) 0%, rgba(251, 191, 36, 0.0) 100%);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 10px;
}
.lj-sam__hypo-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.lj-sam__hypo-field {
    margin-top: 4px;
}
.lj-sam__hypo-input {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    letter-spacing: -0.02em !important;
    padding: 8px 12px !important;
    text-align: center;
}
.lj-sam__hypo-field .lj-mcm__input-suffix {
    font-size: 0.9rem;
    color: var(--text-tertiary);
}
/* Inline "+X.XX" / "−X.XX" delta — the difference between the
   hypothetical SL distance and the realized SL distance. Sits next
   to the big number so the user sees at a glance how much wider
   (positive, green) or tighter (negative, red) their pick is. */
.lj-sam__hypo-delta {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    letter-spacing: -0.005em;
    margin-left: 4px;
    cursor: help;
}
.lj-sam__hypo-delta.is-wider { color: var(--text-primary); }
.lj-sam__hypo-delta.is-tighter { color: #f87171; }

/* StopAnalysisModal — analysis-result block in the right column.
   Verdict + detail rows with color-coded outcome. */
.lj-sam__analysis {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lj-sam__analysis em {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    font-style: italic;
    line-height: 1.45;
}
.lj-sam__verdict {
    font-size: 0.86rem;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-primary);
}
.lj-sam__verdict strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.94rem;
    letter-spacing: -0.005em;
}
.lj-sam__verdict.is-recover {
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.30);
    color: #6ee7b7;
}
.lj-sam__verdict.is-recover strong { color: #6ee7b7; }
.lj-sam__verdict.is-stopped {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: #fca5a5;
}
.lj-sam__verdict.is-stopped strong { color: #fca5a5; }
.lj-sam__verdict.is-warn {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    color: #fde68a;
}
.lj-sam__verdict.is-warn strong { color: #fde68a; }
.lj-sam__verdict.is-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
.lj-sam__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}
.lj-sam__detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.82rem;
    color: var(--text-tertiary);
}
.lj-sam__detail-row strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.lj-sam__detail-row strong.is-good { color: var(--text-primary); }
.lj-sam__detail-row strong.is-bad  { color: #fca5a5; }
.lj-sam__loss-num { color: #fca5a5; font-variant-numeric: tabular-nums; }

.lj-itm__warn.is-error {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #fca5a5;
}

.lj-itm__warn.is-info {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fde68a;
}

.lj-modal__btn.is-disabled,
.lj-modal__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ============================================================================
   Multi-file CSV import — queue list + per-row remove + Clear all footer.
   ========================================================================== */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}
.file-list .file-info-card {
    margin-bottom: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.file-list .file-info-card:hover {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.04);
}
.file-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.file-info-left .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.file-size {
    font-size: 0.74rem;
    color: rgba(148, 163, 184, 0.7);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}
.file-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 0;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.78);
}
.file-list-count {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.file-list-clear {
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: rgba(252, 165, 165, 0.92);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.file-list-clear:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.55);
}

/* Batch-import success modal content (rendered via ljConfirm bodyHtml) */
.batch-import-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.batch-import-hero {
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(245, 158, 11, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 22, 28, 0.7) 0%, rgba(10, 11, 16, 0.7) 100%);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
}
.batch-import-hero-num {
    font-size: 2.4rem;
    font-weight: 800;
    color: rgba(252, 211, 77, 0.96);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.batch-import-hero-lbl {
    margin-top: 4px;
    font-size: 0.88rem;
    color: rgba(203, 213, 225, 0.78);
}
.batch-import-note {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.78);
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.06);
    border-left: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
}
.batch-import-detail {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    padding: 0;
}
.batch-import-detail summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.85);
    user-select: none;
    list-style: none;
    border-bottom: 1px solid transparent;
}
.batch-import-detail summary::-webkit-details-marker { display: none; }
.batch-import-detail[open] summary {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}
.batch-import-detail summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: rgba(245, 158, 11, 0.75);
    transition: transform 0.12s ease;
}
.batch-import-detail[open] summary::before {
    transform: rotate(90deg);
}
.batch-import-list {
    list-style: none;
    margin: 0;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: rgba(203, 213, 225, 0.82);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.25) transparent;
}
.batch-import-list li {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.08);
    line-height: 1.4;
}
.batch-import-list li:last-child { border-bottom: none; }
.batch-import-list--ok li strong { color: rgba(110, 231, 183, 0.92); }
.batch-import-list--bad li strong { color: rgba(252, 165, 165, 0.92); }
.batch-import-list--bad li { color: rgba(252, 165, 165, 0.8); }
.batch-import-failed-label {
    padding: 8px 14px 4px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(252, 165, 165, 0.78);
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

/* Failed-file note inside the in-place import success card (multi-file
   batch with partial failures). Renders inline so the user sees which
   CSV bombed without leaving the import surface. */
.import-success-failed {
    background: rgba(239, 68, 68, 0.06);
    border-left: 2px solid rgba(239, 68, 68, 0.4);
    padding: 6px 10px;
    border-radius: 4px;
    text-align: left;
}
.import-success-failed-file {
    font-size: 0.78rem;
    color: rgba(252, 165, 165, 0.92);
    line-height: 1.4;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
 * Global page-header cleanup (P36)
 * ---------------------------------------------------------------------
 * The left sidebar already says where the user is (Dashboard / Journal /
 * Chart / Analysis / etc.) — the in-content page title row is just
 * decorative repetition. Hide it everywhere; collapse the orphan header
 * chrome (border-bottom, margin-bottom) so the content below moves up
 * cleanly without leaving a phantom band.
 *
 * Journal page is the exception: its header carries the view-switcher
 * tabs (Yearly / Monthly / Trades) and toolbar — those must stay.
 * For Journal we just kill the title-row; the rest of the header is
 * preserved.
 * ===================================================================== */
.page-title-row {
    display: none !important;
}

.page-header.page-header--with-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Pages whose page-header ONLY contained the title — collapse to zero
   so the content below sits flush with the top of the content area. */
#analysis-page   .page-header.page-header--with-title,
#integrations-page .page-header.page-header--with-title {
    display: none;
}

/* Dashboard — restore the title as a "landing" header. Industry pattern:
   the Home / Dashboard view is the one place where a page title earns its
   keep (Linear, Stripe, Tradezella all do this) — it sets context for the
   greeting / overview content below. Other workspace pages stay
   sidebar-only since the sidebar already names the active section. */
#dashboard-page .page-title-row {
    display: block !important;
}

#dashboard-page .page-header.page-header--with-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.75rem;
    padding-bottom: 0;
}

/* Journal page header — 3-column grid so the view-switcher sits dead
   center of the working area regardless of whether the Trades toolbar
   (Group / Sort / Select) is visible on the right.
     col 1: thin divider line (1fr — grows to fill)
     col 2: view-switcher (auto — its natural width)
     col 3: thin divider line (1fr — grows to fill)
   Because col 1 and col 3 are both 1fr, col 2 is mathematically centered
   on the grid. The Trades toolbar drops to grid row 2 so it never pushes
   the nav off center. */
#journal-page .page-header.page-header--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 10px;
    padding: 14px 4px 14px;
    margin-bottom: var(--spacing-md, 16px);
    border-bottom: 0;
}

#journal-page .page-header.page-header--with-title::before,
#journal-page .page-header.page-header--with-title::after {
    content: '';
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    grid-row: 1;
}
#journal-page .page-header.page-header--with-title::before { grid-column: 1; }
#journal-page .page-header.page-header--with-title::after  { grid-column: 3; }

/* The view switcher sits in the middle column of row 1. */
#journal-page .view-switcher.view-switcher--tabs {
    display: flex;
    gap: 8px;
    margin: 0;
    border-bottom: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

/* Trades view's toolbar (Group / Sort / Select) drops to its own row so
   it doesn't shoulder the nav off center. Same for header-stats. */
#journal-page .page-header.page-header--with-title > .trades-toolbar-host,
#journal-page .page-header.page-header--with-title > .header-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;     /* keep toolbar right-aligned like before */
}

/* View buttons — full chip-style, matching the Analytics primary tabs:
   solid amber pill when active, transparent hover otherwise. Underline
   styling stripped entirely. */
#journal-page .view-switcher--tabs .view-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.55);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 24px;
    border-radius: 10px;
    cursor: pointer;
    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-width: 120px;
    box-shadow: none;
}

#journal-page .view-switcher--tabs .view-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
    border-color: transparent;
}

#journal-page .view-switcher--tabs .view-btn.active {
    background: var(--primary);
    color: #1a1612;
    border-color: var(--primary);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

#journal-page .view-switcher--tabs .view-btn.active:hover {
    background: var(--primary);
    color: #1a1612;
}

/* =====================================================================
 * Journal — unified chip-style for all interactive controls (P37)
 * ---------------------------------------------------------------------
 * Every toggleable / clickable control on the Journal page (except the
 * left sidebar nav which lives outside this scope) wears the same
 * "quiet amber chip" treatment used by the Analytics metric chips:
 *   • IDLE   — transparent bg, faint white border, dim text
 *   • HOVER  — slight white border, full text color
 *   • ACTIVE — dark amber-tinted interior + amber border + white text
 *
 * Sizes / paddings / icons are left alone — the goal is a unified
 * visual *language*, not a forced one-size shape. Padding gets a tiny
 * normalization (border-width compensation) but otherwise the original
 * proportions of each button survive.
 * ===================================================================== */
#journal-page .tg-toolbar-btn,
#journal-page .tg-toolbar-select,
#journal-page .tg-chip,
#journal-page .tg-range-picker-trigger,
#journal-page .tg-rail-option,
#journal-page .tg-card-tf-btn,
#journal-page .tg-cal-foot-btn,
#journal-page .tg-sel-btn,
#journal-page .tg-empty-btn {
    /* background-color (not the shorthand) so we don't blow away
       background-image on elements that use one (e.g. .tg-toolbar-select
       paints its dropdown arrow as a background image). */
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}

#journal-page .tg-toolbar-btn:hover,
#journal-page .tg-toolbar-select:hover,
#journal-page .tg-chip:hover,
#journal-page .tg-range-picker-trigger:hover,
#journal-page .tg-rail-option:hover,
#journal-page .tg-card-tf-btn:hover:not(:disabled):not(.tg-card-tf-btn--locked),
#journal-page .tg-cal-foot-btn:hover,
#journal-page .tg-sel-btn:hover,
#journal-page .tg-empty-btn:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.04);
}

/* Active variants — quiet amber:
   • .tg-toolbar-btn.is-active     (dropdown open / filter applied)
   • .tg-card-tf-btn--active       (per-card timeframe selected)
   • .tg-rail-option (when its inner input is :checked)
   • .tg-sel-btn--primary          (primary action in selection bar)
   • .tg-chip                       (a chip exists only when its filter
                                     is active — treat as always-active)
   • .tg-range-picker-trigger when has range selected (we can't easily
     target "has value" without JS, so the user gets the idle treatment;
     active feel comes through hover) */
#journal-page .tg-toolbar-btn.is-active,
#journal-page .tg-card-tf-btn.tg-card-tf-btn--active,
#journal-page .tg-rail-option:has(input:checked),
#journal-page .tg-sel-btn--primary,
#journal-page .tg-chip {
    background-color: rgba(28, 22, 12, 0.55);
    border-color: rgba(245, 158, 11, 0.5);
    color: var(--text-primary);
}

#journal-page .tg-toolbar-btn.is-active:hover,
#journal-page .tg-card-tf-btn.tg-card-tf-btn--active:hover:not(:disabled),
#journal-page .tg-rail-option:has(input:checked):hover,
#journal-page .tg-sel-btn--primary:hover,
#journal-page .tg-chip:hover {
    background-color: rgba(34, 26, 14, 0.65);
    border-color: rgba(245, 158, 11, 0.7);
    color: var(--text-primary);
}

/* The chip's "×" remove button stays subtly visible on the amber bg. */
#journal-page .tg-chip .tg-chip-x {
    color: rgba(255, 255, 255, 0.55);
}
#journal-page .tg-chip:hover .tg-chip-x {
    color: var(--text-primary);
}

/* Calendar prev/next arrows — kept icon-style (small, square) but tinted
   to match the chip language on hover. Cal arrows are NOT chips, just
   icon nav, so we leave the idle look minimal and only adopt the amber
   accent on hover. */
#journal-page .tg-cal-nav {
    color: rgba(255, 255, 255, 0.55);
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
#journal-page .tg-cal-nav:not(.tg-cal-nav--disabled):hover {
    color: var(--text-primary);
    background-color: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
}

/* Clear / X-style mini buttons (rail clear, range clear, chips clear) —
   stay subtle, no full chip treatment. They're destructive shortcuts, not
   toggles, and look more correct as ghost links. */
#journal-page .tg-rail-clear,
#journal-page .tg-range-clear-btn,
#journal-page .tg-chips-clear {
    color: rgba(255, 255, 255, 0.45);
    transition: color 160ms ease;
}
#journal-page .tg-rail-clear:hover,
#journal-page .tg-range-clear-btn:hover,
#journal-page .tg-chips-clear:hover {
    color: rgba(251, 191, 36, 0.95);
}

/* ============================================================
   P70 — Dashboard Insight TEASER (single-row, compact)
   Teases the full breakdown that lives on Analytics → Insights.
   Intentionally lightweight — NOT a duplicate of the Analytics hero.
   ============================================================ */
.dash-insight-teaser {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin: 0 0 var(--spacing-xl, 24px);
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.07) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease;
    font-size: 0.9rem;
}
.dash-insight-teaser:hover {
    border-color: rgba(var(--primary-rgb), 0.55);
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--primary-rgb), 0.04) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3), 0 0 14px rgba(var(--primary-rgb), 0.15);
}
.dash-insight-teaser:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.6);
    outline-offset: 2px;
}
.dash-insight-teaser__icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.dash-insight-teaser__eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    flex-shrink: 0;
}
.dash-insight-teaser__divider {
    width: 1px;
    height: 16px;
    background: rgba(var(--primary-rgb), 0.3);
    flex-shrink: 0;
}
.dash-insight-teaser__title {
    color: var(--text-primary, #fff);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-insight-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.82rem;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity .15s ease, transform .12s ease;
}
.dash-insight-teaser:hover .dash-insight-teaser__cta { opacity: 1; transform: translateX(2px); }
@media (max-width: 720px) {
    .dash-insight-teaser { flex-wrap: wrap; padding: 12px 14px; }
    .dash-insight-teaser__title { flex-basis: 100%; order: 5; white-space: normal; }
    .dash-insight-teaser__divider { display: none; }
    .dash-insight-teaser__cta { margin-left: auto; }
}

/* P75.11 — Dashboard mini-cards (This week / Streak / Today's insight).
   Replaces the stretched full-width insight teaser. Three equal columns
   that align with the KPI hero row above. */
.dash-mini-row {
    display: grid;
    /* auto-fit so 3 cards render exactly as before, and the optional 4th
       ("Next event") flows into an even 4-up row instead of wrapping ragged. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.dash-news-mini-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: baseline;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.dash-news-mini-dot.is-high { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); }
.dash-news-mini-dot.is-med { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14); }
.dash-mini {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    min-height: 96px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 6px;
    transition: border-color 160ms ease, transform 160ms ease;
}
.dash-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-mini__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
}
.dash-mini__corner {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dash-mini__value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    align-self: end;
}
.dash-mini__value--text {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dash-mini__sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.50);
}
.dash-mini--insight-has_insight {
    box-shadow: inset 3px 0 0 0 #FBBF24;
    padding-left: 18px;
}
.dash-mini--insight-all_good {
    box-shadow: inset 3px 0 0 0 #34D399;
    padding-left: 18px;
}
.dash-mini--insight-not_enough {
    box-shadow: inset 3px 0 0 0 rgba(255,255,255,0.15);
    padding-left: 18px;
}
.dash-mini--insight.is-clickable { cursor: pointer; }
.dash-mini--insight.is-clickable:hover {
    border-color: rgba(251, 191, 36, 0.45);
    transform: translateY(-1px);
}
.dash-mini--insight.is-clickable:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.6);
    outline-offset: 2px;
}
.dash-mini__arrow {
    color: #FBBF24;
    font-size: 1.05rem;
    font-weight: 700;
    transition: transform 160ms ease;
}
.dash-mini--insight.is-clickable:hover .dash-mini__arrow { transform: translateX(3px); }
@media (max-width: 900px) {
    .dash-mini-row { grid-template-columns: 1fr; }
}

/* (Legacy big card kept for reference — no longer used after P70.7) */
.dash-insight-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin: 0 0 var(--spacing-xl, 24px);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
    overflow: hidden;
}
.dash-insight-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.10), transparent 70%);
    pointer-events: none;
}
.dash-insight-card:hover {
    border-color: rgba(var(--primary-rgb), 0.55);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35), 0 0 22px rgba(var(--primary-rgb), 0.12);
}
.dash-insight-card:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.6);
    outline-offset: 2px;
}
.dash-insight-card__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    padding: 6px 10px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 10px;
}
.dash-insight-card__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dash-insight-card__eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    margin-bottom: 4px;
}
.dash-insight-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 3px;
    line-height: 1.25;
}
.dash-insight-card__detail {
    color: var(--text-secondary, #A1A1AA);
    font-size: 0.86rem;
    line-height: 1.45;
}
.dash-insight-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.10);
    border: 1px solid rgba(var(--primary-rgb), 0.40);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 9px;
    flex-shrink: 0;
    transition: background .15s ease;
    position: relative;
    z-index: 1;
}
.dash-insight-card:hover .dash-insight-card__cta {
    background: rgba(var(--primary-rgb), 0.18);
}
@media (max-width: 720px) {
    .dash-insight-card { flex-direction: column; align-items: flex-start; }
    .dash-insight-card__cta { align-self: stretch; justify-content: center; }
}

/* =====================================================================
 * P73.0 — Insights v2 prototype
 * 2×2 grid of fieldset-style cards. Title cuts into the top border like
 * an HTML <fieldset><legend>: title sits on the border line itself,
 * masked behind by the page background so the border appears to break.
 * Cards are minimal — thin border, subtle accent dot, no heavy fills.
 * ===================================================================== */
.lj-insights-v2 {
    padding: 0;
    /* P73.10 — subtle gold-tinted radial behind the whole Insights view.
       Adds depth without color noise. */
    background:
        radial-gradient(ellipse at top, rgba(239, 191, 4, 0.025), transparent 55%);
}
/* P73.1 — header block lives inside the v2 container so we don't fight
   the global #analysis-page .page-header display:none rule. */
.lj-insights-header {
    /* P73.4 — widened to align with the larger central block.
       Same width:100% + max-width pattern as the block so it actually
       stretches inside the flex-column parent. */
    width: 100%;
    max-width: 1600px;
    margin: 4px auto 24px;
    padding: 8px 40px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}
@media (min-width: 1800px) { .lj-insights-header { max-width: 1760px; } }
@media (min-width: 2400px) { .lj-insights-header { max-width: 2000px; } }
.lj-insights-header__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.lj-insights-header__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}
.lj-insights-header__sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}
.lj-insights-header__stats {
    display: flex;
    gap: 32px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}
.lj-insights-header__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lj-insights-header__stat-lbl {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.42);
}
.lj-insights-header__stat-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.lj-insights-header__stat-val.is-pos { color: #34D399; }
.lj-insights-header__stat-val.is-neg { color: #F87171; }

.lj-insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 16px 32px 48px;
    max-width: 1280px;
    margin: 0 auto;
}
.lj-insight-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 30px 28px 26px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 220px;
}
/* The notch: title sits on top edge of the border, with a background that
   matches the page so the border behind appears "cut". */
.lj-insight-card__title {
    position: absolute;
    top: -10px;
    left: 24px;
    padding: 0 12px;
    margin: 0;
    background: var(--bg-body, #141414);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Tone accent — a small dot before the title text. */
.lj-insight-card__title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}
.lj-insight-card--good    .lj-insight-card__title::before { background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.45); }
.lj-insight-card--good    .lj-insight-card__title { color: rgba(52, 211, 153, 0.92); }
.lj-insight-card--warn    .lj-insight-card__title::before { background: #F59E0B; box-shadow: 0 0 8px rgba(245, 158, 11, 0.45); }
.lj-insight-card--warn    .lj-insight-card__title { color: rgba(245, 158, 11, 0.92); }
.lj-insight-card--bad     .lj-insight-card__title::before { background: #F87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.55); }
.lj-insight-card--bad     .lj-insight-card__title { color: rgba(248, 113, 113, 0.92); }
.lj-insight-card--neutral .lj-insight-card__title::before { background: rgba(255, 255, 255, 0.30); }
/* P73.1 — soft background tint + border accent makes the severity readable
   at a glance. Subtle (alpha < 0.06) so it doesn't shout. */
.lj-insight-card--bad {
    border-color: rgba(248, 113, 113, 0.32);
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.05), rgba(248, 113, 113, 0.015));
}
.lj-insight-card--warn {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), rgba(245, 158, 11, 0.01));
}
.lj-insight-card--good {
    border-color: rgba(52, 211, 153, 0.24);
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.035), rgba(52, 211, 153, 0.01));
}

/* P73.1 — top-of-card head row: big metric value + inline viz. */
.lj-insight-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
}
.lj-insight-card__metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.lj-insight-card__metric-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lj-insight-card--bad  .lj-insight-card__metric-val { color: #FCA5A5; }
.lj-insight-card--good .lj-insight-card__metric-val { color: #6EE7B7; }
.lj-insight-card--warn .lj-insight-card__metric-val { color: #FCD34D; }
.lj-insight-card__metric-lbl {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.lj-insight-card__viz {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.lj-spark {
    display: block;
    width: 140px;
    height: 44px;
}
.lj-segbar {
    display: flex;
    width: 180px;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}
.lj-segbar__seg {
    display: block;
    height: 100%;
}
.lj-segbar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    justify-content: flex-end;
    max-width: 200px;
}
.lj-segbar__leg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lj-segbar__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.lj-progress {
    width: 180px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.lj-progress__bar {
    height: 100%;
    border-radius: 3px;
    transition: width 200ms ease;
}
.lj-progress__lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
}

.lj-insight-card__body {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
}
.lj-insight-card__body strong {
    font-weight: 600;
    color: #fff;
}
.lj-insight-card__advice {
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin-top: auto;
}
.lj-insight-card__advice-lbl {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--primary, #F59E0B);
    margin-right: 8px;
    vertical-align: 1px;
}
@media (max-width: 880px) {
    .lj-insights-grid { grid-template-columns: 1fr; gap: 24px; padding: 12px 16px 32px; }
    .lj-insight-card { min-height: auto; }
}

/* =====================================================================
 * P73.3 — Insights v2: 5-tab folder layout.
 * Central rectangle with folder-style tabs along the top, fixed shape
 * (only content swaps), per-tab Verdict footer.
 * ===================================================================== */

/* Scope chips row (under the header title) */
.lj-insights-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
}
.lj-insights-scope__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    font-family: 'Outfit', sans-serif;
}
.lj-insights-scope__lbl {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.42);
}
.lj-insights-scope__val {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.lj-insights-scope__val.is-pos { color: #34D399; }
.lj-insights-scope__val.is-neg { color: #F87171; }

/* The big central block: tabs + content + verdict.
   P73.4 — widened to fill workspace; height grows with viewport on QHD+.
   `width: 100%` + max-width because parent #analytics-dashboard is a flex
   column and margin:auto on a flex item makes it shrink-to-fit (was the
   "squeezed island" bug — block sat at content-width inside a 1472px
   container). Now it stretches and the max-width caps it. */
.lj-insights-block {
    width: 100%;
    max-width: 1600px;
    margin: 8px auto 48px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* CSS var lets us scale the tabbody height in media queries below
       without redefining the selector. Default 640 (laptop), bumped on
       QHD (>1800px) and 4K (>2400px). */
    --lj-insights-h: 640px;
}
@media (min-width: 1800px) {
    .lj-insights-block { --lj-insights-h: 760px; max-width: 1760px; }
}
@media (min-width: 2400px) {
    .lj-insights-block { --lj-insights-h: 900px; max-width: 2000px; }
}
.lj-insights-tabs {
    display: flex;
    gap: 2px;
    padding: 0 4px;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}
.lj-insights-tab {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 11px 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.015);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
    letter-spacing: 0.01em;
}
.lj-insights-tab:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}
.lj-insights-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.lj-insights-tabbody {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    border-top-left-radius: 0;
    background: rgba(255, 255, 255, 0.025);
    /* P73.3/4 — fixed height across tab switches (block geometry doesn't
       shift). --lj-insights-h scales with viewport at breakpoints on the
       parent so QHD/4K monitors get a taller block. */
    height: var(--lj-insights-h, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lj-insights-tabcontent {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lj-insights-tabcontent__body {
    flex: 1;
    overflow-y: auto;
    padding: 26px 28px 20px;
    min-height: 0;
}
.lj-insights-empty {
    padding: 40px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.92rem;
    font-family: 'Outfit', sans-serif;
}

/* P73.9 — Verdict, redesigned: 2x taller, prominent pin, gold accent
   rail on the top edge, premium gradient background. The "summary" of
   each tab needs to read as a stamp/seal, not a thin footer chip. */
.lj-insights-verdict {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 22px;
    padding: 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 1.04rem;
    line-height: 1.55;
    position: relative;
    overflow: hidden;
}
/* Top edge: thin gold rail then a hairline separator. */
.lj-insights-verdict::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.55), transparent);
}
.lj-insights-verdict__pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.lj-insights-verdict__pin::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
}
.lj-insights-verdict__msg { color: rgba(255, 255, 255, 0.92); }
.lj-insights-verdict__msg strong { color: #fff; font-weight: 700; }

.lj-insights-verdict--good {
    background:
        radial-gradient(circle at 0% 50%, rgba(52, 211, 153, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(52, 211, 153, 0.03), rgba(0, 0, 0, 0.20));
}
.lj-insights-verdict--good .lj-insights-verdict__pin { background: linear-gradient(180deg, #34D399, #10B981); }
.lj-insights-verdict--warn {
    background:
        radial-gradient(circle at 0% 50%, rgba(245, 158, 11, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(245, 158, 11, 0.03), rgba(0, 0, 0, 0.20));
}
.lj-insights-verdict--warn .lj-insights-verdict__pin { background: linear-gradient(180deg, #F59E0B, #D97706); }
.lj-insights-verdict--bad {
    background:
        radial-gradient(circle at 0% 50%, rgba(248, 113, 113, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(248, 113, 113, 0.04), rgba(0, 0, 0, 0.22));
}
.lj-insights-verdict--bad .lj-insights-verdict__pin { background: linear-gradient(180deg, #F87171, #DC2626); }
.lj-insights-verdict--neutral {
    background:
        radial-gradient(circle at 0% 50%, rgba(239, 191, 4, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.18));
}
.lj-insights-verdict--neutral .lj-insights-verdict__pin { background: linear-gradient(180deg, rgba(239, 191, 4, 0.75), rgba(180, 140, 0, 0.85)); }

/* P73.7 — Hygiene tab, dense KPI-tile rebuild (Tradezella-style).
   - Horizontal hero band on top: donut + composite metrics + weakest
   - 4×2 grid of compact field KPI tiles below
   No more stretched empty columns. Dense, scannable, balanced. */
.lj-hyg2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}
/* P73.9 — brand-tinted hero. Subtle gold accents: top rail, label color,
   underline beneath the title. Background is a dark gradient (premium
   feel) instead of flat near-transparent panel.
   P73.10 — 3-col layout: left (donut + text), center (distribution viz),
   right (2 stats). Distribution viz fills the previously-dead middle. */
.lj-hyg2__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 22px 28px;
    border: 1px solid rgba(239, 191, 4, 0.16);
    border-radius: 14px;
    background:
        radial-gradient(circle at 0% 0%, rgba(239, 191, 4, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.20));
    position: relative;
    overflow: hidden;
}
/* Thin gold rail along the top edge of the hero — brand stamp. */
.lj-hyg2__hero::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.55), transparent);
}

.lj-hyg2__heroLeft {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}
.lj-hyg2__donutWrap { display: flex; flex-shrink: 0; }
.lj-hyg2__donutWrap .lj-donut { width: 140px !important; height: 140px !important; }
.lj-hyg2__heroText {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.lj-hyg2__heroLbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--primary, #EFBF04);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lj-hyg2__heroLbl::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--primary, #EFBF04);
    box-shadow: 0 0 8px rgba(239, 191, 4, 0.6);
}
.lj-hyg2__heroTitle {
    font-family: 'Outfit', sans-serif;
    font-size: 2.0rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    position: relative;
    padding-bottom: 4px;
}
.lj-hyg2__heroTitle::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 42px; height: 2px;
    background: linear-gradient(90deg, var(--primary, #EFBF04), transparent);
    border-radius: 1px;
}
.lj-hyg2__heroSub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.60);
    margin-top: 2px;
}
/* P73.10 pass 3 — "Needs attention" panel in hero center. Top 3
   under-80% fields as action items. Replaces the previously cramped
   vertical dist viz. */
.lj-hyg2__attnWrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-hyg2__attnHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.lj-hyg2__attnHeadLbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary, #EFBF04);
}
.lj-hyg2__attnHeadHint {
    font-size: 0.66rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.32);
}
.lj-hyg2__attnList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lj-hyg2__attnRow {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.lj-hyg2__attnDot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
}
.lj-hyg2__attnRow--good .lj-hyg2__attnDot { background: #34D399; }
.lj-hyg2__attnRow--warn .lj-hyg2__attnDot { background: #F59E0B; box-shadow: 0 0 8px rgba(245, 158, 11, 0.40); }
.lj-hyg2__attnRow--bad  .lj-hyg2__attnDot { background: #F87171; box-shadow: 0 0 10px rgba(248, 113, 113, 0.55); }
.lj-hyg2__attnLbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lj-hyg2__attnPct {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.lj-hyg2__attnRow--good .lj-hyg2__attnPct { color: #6EE7B7; }
.lj-hyg2__attnRow--warn .lj-hyg2__attnPct { color: #FCD34D; }
.lj-hyg2__attnRow--bad  .lj-hyg2__attnPct { color: #FCA5A5; }
.lj-hyg2__attnEmpty {
    font-size: 0.86rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding: 8px 0;
}
/* P73.10 pass 2 — dist viz redone as 8 mini horizontal progress bars
   instead of vertical columns. With %s in 0-16 range the vertical
   approach made them look like dots. Horizontal cells fill consistently
   at any %, and the field name above each is readable. */
.lj-hyg2__dist {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    padding-top: 6px;
}
.lj-hyg2__distCol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
}
.lj-hyg2__distBar {
    height: 26px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}
.lj-hyg2__distBar::after {
    /* Fill the bar from the bottom up — tone color, height = pct stored
       in --pct (set via inline style). Using a child via pseudo so the
       outer bar always has a consistent background frame. */
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: var(--p, 0%);
    background: rgba(255, 255, 255, 0.30);
    transition: height 220ms ease;
}
.lj-hyg2__distBar--good::after { background: linear-gradient(180deg, #34D399, rgba(52, 211, 153, 0.65)); }
.lj-hyg2__distBar--warn::after { background: linear-gradient(180deg, #F59E0B, rgba(245, 158, 11, 0.65)); }
.lj-hyg2__distBar--bad::after  { background: linear-gradient(180deg, #F87171, rgba(248, 113, 113, 0.65)); }
.lj-hyg2__distPct {
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.lj-hyg2__heroRight {
    display: flex;
    gap: 28px;
}
.lj-hyg2__heroStat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
.lj-hyg2__heroStatVal {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.lj-hyg2__heroStatVal strong { font-weight: 700; }
.lj-hyg2__heroStatVal--good { color: #6EE7B7; }
.lj-hyg2__heroStatVal--warn { color: #FCD34D; }
.lj-hyg2__heroStatVal--bad  { color: #FCA5A5; }
.lj-hyg2__heroStatLbl {
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
}

.lj-hyg2__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
/* P73.9 — premium tiles. Dark gradient bg + subtle gold rail on top
   that lights up on hover. Severity stays on the % + bar. */
.lj-hyg-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.18));
    position: relative;
    overflow: hidden;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
/* Thin gold rail at the top edge — dimmed by default, glows on hover. */
.lj-hyg-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.22), transparent);
    transition: opacity 140ms ease;
}
.lj-hyg-tile:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.20));
    border-color: rgba(239, 191, 4, 0.32);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(239, 191, 4, 0.05);
}
.lj-hyg-tile:hover::before {
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.85), transparent);
}
.lj-hyg-tile__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.lj-hyg-tile__pct {
    font-family: 'Outfit', sans-serif;
    font-size: 2.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.0;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.lj-hyg-tile__pctSym {
    font-size: 1.0rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    margin-left: 2px;
}
.lj-hyg-tile--good .lj-hyg-tile__pct { color: #6EE7B7; }
.lj-hyg-tile--warn .lj-hyg-tile__pct { color: #FCD34D; }
.lj-hyg-tile--bad  .lj-hyg-tile__pct { color: #FCA5A5; }
.lj-hyg-tile__count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.40);
    font-variant-numeric: tabular-nums;
}
/* P73.10 — 6px bar with quarter-tick markers so it actually reads as
   a measurable scale, not a decorative line. */
.lj-hyg-tile__bar {
    display: block;
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.lj-hyg-tile__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.40);
    transition: width 220ms ease;
    position: relative;
    z-index: 1;
}
.lj-hyg-tile__tick {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.40);
    z-index: 2;
}
.lj-hyg-tile--good .lj-hyg-tile__fill { background: #34D399; }
.lj-hyg-tile--warn .lj-hyg-tile__fill { background: #F59E0B; }
.lj-hyg-tile--bad  .lj-hyg-tile__fill { background: #F87171; }
.lj-hyg-tile__lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
    margin-top: 2px;
}

/* P73.10 — sparkline section (last N weeks completion %), with a small
   delta badge showing trend direction. Fills the tile's vertical space
   with real data context. */
.lj-hyg-tile__trendRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.lj-hyg-tile__trendRow--empty {
    justify-content: center;
}
.lj-hyg-tile__spark { flex: 1; min-width: 0; }
.lj-hyg-tile__sparkSvg {
    display: block;
    width: 100%;
    height: 36px;
}
.lj-hyg-tile__sparkEmpty {
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.32);
    padding: 6px 0;
}
.lj-hyg-tile__trend {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
}
.lj-hyg-tile__trend.is-up   { color: #6EE7B7; }
.lj-hyg-tile__trend.is-down { color: #FCA5A5; }
.lj-hyg-tile__trendLbl {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.32);
    text-align: right;
    letter-spacing: 0.04em;
}

/* P73.10 — worst-2 tile emphasis. Subtle red rim so the user spots
   priority gaps without scanning the % numbers. */
.lj-hyg-tile.is-priority {
    border-color: rgba(248, 113, 113, 0.30);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.08) inset;
}
.lj-hyg-tile.is-priority::before {
    background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.55), transparent);
}

/* P73.6 OLD — kept for fallback if any consumer references .lj-hyg */
.lj-hyg {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 36px;
    align-items: stretch;
    height: 100%;
}
.lj-hyg__hero {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    padding: 32px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.lj-hyg__hero--good { border-color: rgba(52, 211, 153, 0.22); }
.lj-hyg__hero--warn { border-color: rgba(245, 158, 11, 0.22); }
.lj-hyg__hero--bad  { border-color: rgba(248, 113, 113, 0.22); }
.lj-hyg__donut { display: flex; align-items: center; justify-content: center; }
.lj-hyg__heroBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.lj-hyg__heroLbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}
.lj-hyg__heroSub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}
.lj-hyg__heroSub strong {
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    display: inline-block;
    margin-right: 2px;
    vertical-align: -1px;
}

.lj-hyg__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lj-hyg__listHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 4px 10px;
    margin-bottom: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-hyg-row {
    display: grid;
    grid-template-columns: 1fr 220px 60px;
    align-items: center;
    gap: 20px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 120ms ease;
}
.lj-hyg-row:last-child { border-bottom: 0; }
.lj-hyg-row:hover { background: rgba(255, 255, 255, 0.015); }
.lj-hyg-row__lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.94rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}
.lj-hyg-row__bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    position: relative;
}
.lj-hyg-row__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.40);
    transition: width 220ms ease;
}
.lj-hyg-row--good .lj-hyg-row__fill { background: #34D399; }
.lj-hyg-row--warn .lj-hyg-row__fill { background: #F59E0B; }
.lj-hyg-row--bad  .lj-hyg-row__fill { background: #F87171; }
.lj-hyg-row__pct {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -0.005em;
}
.lj-hyg-row--good .lj-hyg-row__pct { color: #6EE7B7; }
.lj-hyg-row--warn .lj-hyg-row__pct { color: #FCD34D; }
.lj-hyg-row--bad  .lj-hyg-row__pct { color: rgba(248, 113, 113, 0.92); }

/* Donut SVG — used by Hygiene */
.lj-donut { display: block; }

/* P73.5 — Overview strip: 6-up stat tiles at top of Win rate / R/R tabs.
   Surfaces aggregate numbers the user can't easily compute alone. */
.lj-ov-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.lj-ov-stat {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lj-ov-stat__val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.lj-ov-stat--good .lj-ov-stat__val { color: #6EE7B7; }
.lj-ov-stat--bad  .lj-ov-stat__val { color: #FCA5A5; }
.lj-ov-stat--warn .lj-ov-stat__val { color: #FCD34D; }
.lj-ov-stat__lbl {
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
}
@media (max-width: 1200px) {
    .lj-ov-strip { grid-template-columns: repeat(3, 1fr); }
}

/* Dim-block (used by Win rate + R/R tabs). P73.5 — scaled up. */
.lj-dim-block {
    margin-bottom: 26px;
}
.lj-dim-block__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-dim-block__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
}
.lj-dim-block__colhdr {
    display: flex;
    gap: 32px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.40);
}
.lj-dim-block__colhdr span:last-child { min-width: 28px; text-align: right; }
.lj-dim-block__rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lj-dimrow {
    display: grid;
    grid-template-columns: 180px 1fr 170px 42px;
    gap: 18px;
    align-items: center;
    padding: 6px 0;
}
.lj-dimrow__lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lj-dimrow__bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.lj-dimrow__fill {
    height: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.40);
    transition: width 200ms ease;
}
.lj-dimrow--good    .lj-dimrow__fill { background: #34D399; }
.lj-dimrow--warn    .lj-dimrow__fill { background: #F59E0B; }
.lj-dimrow--bad     .lj-dimrow__fill { background: #F87171; }
.lj-dimrow--neutral .lj-dimrow__fill { background: rgba(255, 255, 255, 0.30); }
.lj-dimrow__metric {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.lj-dimrow__sub {
    font-size: 0.80rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    margin-left: 8px;
}
.lj-dimrow__count {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Exit quality tab — two blocks (price + time) */
.lj-exits-block {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-exits-block:last-child { border-bottom: 0; margin-bottom: 0; }
.lj-exits-block__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}
.lj-exits-block__empty {
    padding: 18px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.88rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.015);
    border-radius: 8px;
}
.lj-exits-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.lj-exits-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
}
.lj-exits-stat__val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.lj-exits-stat__val--good { color: #34D399; }
.lj-exits-stat__val--bad  { color: #F87171; }
.lj-exits-stat__lbl {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.50);
    font-weight: 500;
}
.lj-exits-hint {
    padding-top: 10px;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.66);
    font-style: italic;
}

/* Histogram (used in Exits price block) */
.lj-histo {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 110px;
    padding: 8px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.lj-histo__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.lj-histo__bar {
    width: 70%;
    background: #34D399;
    border-radius: 3px 3px 0 0;
    margin-top: auto;
    min-height: 2px;
}
.lj-histo--bad .lj-histo__bar { background: #F87171; }
.lj-histo__lbl {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
}
.lj-histo__n {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.70);
    font-weight: 700;
}

/* Stops & targets tab — 2x2 mini cards */
.lj-stops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lj-stop-card {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lj-stop-card--good { border-color: rgba(52, 211, 153, 0.30); background: linear-gradient(180deg, rgba(52, 211, 153, 0.04), rgba(52, 211, 153, 0.01)); }
.lj-stop-card--warn { border-color: rgba(245, 158, 11, 0.28); background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), rgba(245, 158, 11, 0.01)); }
.lj-stop-card--bad  { border-color: rgba(248, 113, 113, 0.32); background: linear-gradient(180deg, rgba(248, 113, 113, 0.05), rgba(248, 113, 113, 0.01)); }
.lj-stop-card__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.55);
}
.lj-stop-card__metric {
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 4px;
}
.lj-stop-card--good .lj-stop-card__metric { color: #6EE7B7; }
.lj-stop-card--warn .lj-stop-card__metric { color: #FCD34D; }
.lj-stop-card--bad  .lj-stop-card__metric { color: #FCA5A5; }
.lj-stop-card__lbl {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.50);
    margin-bottom: 6px;
}
.lj-stop-card__sub {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
.lj-stop-card__sub strong { color: #fff; font-weight: 700; }

@media (max-width: 960px) {
    .lj-hyg { grid-template-columns: 1fr; }
    .lj-hyg2__grid { grid-template-columns: repeat(2, 1fr); }
    .lj-hyg2__hero { grid-template-columns: 1fr; }
    .lj-hyg2__heroRight { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
    .lj-exits-stats { grid-template-columns: repeat(2, 1fr); }
    .lj-stops-grid { grid-template-columns: 1fr; }
    .lj-dimrow { grid-template-columns: 100px 1fr 100px 30px; }
}

/* =====================================================================
 * P74.0 — Chart standalone toolbars float ON TOP of the chart instead
 * of stealing layout space. Glass-panel look (blur + subtle border)
 * keeps the chart underneath readable.
 *
 * Targets two toolbars on the chart page:
 *   - .chart-controls-toolbar  (top: symbol picker + timeframe buttons)
 *   - .draw-toolbar           (left: drawing tool column)
 *
 * .lj-chart-row becomes the anchor; both toolbars become absolute
 * children. .lj-chart-frame stretches to fill since nothing is laid
 * beside it anymore.
 * ===================================================================== */
/* =====================================================================
 * P75.0 — Insights page (rewritten). Single scroll, same visual language
 * as Analytics Overview: hero strip, lja-section-head, KPI rows.
 * Custom additions: .lj-find (3 finding cards) + .lj-act (action list).
 * P75.1 — added page header (title + period switcher) + main rec card.
 * ===================================================================== */

/* P75.3 — page header: title + sub + view switcher all CENTERED in a
   single stacked column. Period switcher pinned absolute top-right so
   it doesn't compete with the focal point. */
.lj-ins-pgh {
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}
.lj-ins-pgh__corner {
    position: absolute;
    top: 0;
    right: 0;
}
.lj-ins-pgh__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 4px 0 6px;
}
.lj-ins-pgh__title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.lj-ins-pgh__sub {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.60);
    margin: 0;
    line-height: 1.5;
    max-width: 700px;
}
.lj-ins-pgh__sub strong { color: var(--primary, #EFBF04); font-weight: 600; }
.lj-ins-pgh__count {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.70);
    vertical-align: 2px;
}
.lj-ins-pgh__switch {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.lj-ins-pgh__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    font-variant-numeric: tabular-nums;
}
.lj-ins-pgh__btn:hover:not(.is-active) {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.lj-ins-pgh__btn.is-active {
    background: var(--primary, #EFBF04);
    color: #1a1a1a;
}

/* P75.2/P75.3 — view switcher (2 big pills, centered under the title). */
.lj-ins-pgh__view-row {
    margin-top: 16px;
}
.lj-ins-pgh__view {
    margin-top: 6px;
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}
.lj-ins-pgh__viewBtn {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Outfit', sans-serif;
    font-size: 0.94rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.lj-ins-pgh__viewDot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
.lj-ins-pgh__viewBtn--pos { color: rgba(110, 231, 183, 0.72); }
.lj-ins-pgh__viewBtn--neg { color: rgba(252, 165, 165, 0.72); }
.lj-ins-pgh__viewBtn:hover:not(.is-active) {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.lj-ins-pgh__viewBtn--pos.is-active {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.20), rgba(52, 211, 153, 0.08));
    color: #6EE7B7;
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.30);
}
.lj-ins-pgh__viewBtn--neg.is-active {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.20), rgba(248, 113, 113, 0.08));
    color: #FCA5A5;
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.30);
}
.lj-ins-pgh__viewBtn.is-active .lj-ins-pgh__viewDot {
    opacity: 1;
    box-shadow: 0 0 10px currentColor;
}

/* Main recommendation card at the bottom — single big card */
.lj-main-rec {
    padding: 26px 28px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.20));
    position: relative;
    overflow: hidden;
}
.lj-main-rec::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.lj-main-rec--good::before { background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.6), transparent); }
.lj-main-rec--warn::before { background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.6), transparent); }
.lj-main-rec--bad::before  { background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.6), transparent); }
.lj-main-rec__pin {
    font-family: 'Outfit', sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    display: inline-block;
    margin-bottom: 8px;
}
.lj-main-rec--good .lj-main-rec__pin { color: #6EE7B7; }
.lj-main-rec--warn .lj-main-rec__pin { color: var(--primary, #EFBF04); }
.lj-main-rec--bad  .lj-main-rec__pin { color: #FCA5A5; }
.lj-main-rec__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.lj-main-rec__msg {
    font-size: 1.0rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}


/* P75.5/P75.6 — match Analytics page width (--content-shell-max = 1600).
   analytics.css is loaded AFTER style.css in index.html, so its
   `#analysis-page .analytics-dashboard { max-width: none }` beats any
   same-specificity rule of ours. Two ids in our selector outweigh it. */
#analysis-page #analytics-dashboard.lj-ins {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    max-width: var(--content-shell-max, 1600px);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.lj-ins .lja-section-head { margin-bottom: 14px; }
.lj-ins-section { display: flex; flex-direction: column; }

/* KEY FINDINGS — 3 cards in one row. */
.lj-find-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
/* Prescriptive do/stop groups — both shown together, no toggle. */
.lj-find-group { margin-bottom: 26px; }
.lj-find-group--do   { border-left: 3px solid rgba(52, 211, 153, 0.5); padding-left: 16px; }
.lj-find-group--stop { border-left: 3px solid rgba(248, 113, 113, 0.5); padding-left: 16px; }
.lj-find-flag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 9px;
    border-radius: 999px;
    margin-right: 9px;
    vertical-align: middle;
}
.lj-find-flag--do   { color: #34d399; background: rgba(52, 211, 153, 0.13); }
.lj-find-flag--stop { color: #f87171; background: rgba(248, 113, 113, 0.13); }
.lj-find-flag--data { color: #9ca3af; background: rgba(156, 163, 175, 0.12); }
/* Clean empty state for Stop & fix — good news, so green accent (not red)
   and a slim line instead of a leak card. */
.lj-find-group--stop.is-clean { border-left-color: rgba(52, 211, 153, 0.5); }
.lj-find-group--stop.is-clean .lj-find-flag--stop { color: #34d399; background: rgba(52, 211, 153, 0.13); }
.lj-find-clean {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; border-radius: 12px;
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.05), rgba(0, 0, 0, 0.14));
    border: 1px solid rgba(52, 211, 153, 0.18);
    color: #cbd5d1; font-size: 0.9rem;
}
.lj-find-clean__check { color: #34d399; font-weight: 800; font-size: 1.05rem; }
/* Data-quality block is housekeeping, not advice — keep it visually quiet. */
.lj-find-group--data { border-left: 3px solid rgba(156, 163, 175, 0.35); padding-left: 16px; opacity: 0.92; }
.lj-find-group--data .lj-find { background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.14)); }
.lj-find {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 22px 22px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.18));
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.lj-find::before {
    content: '';
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.lj-find--good::before { background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.55), transparent); }
.lj-find--bad::before  { background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.55), transparent); }
.lj-find--warn::before { background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.55), transparent); }
.lj-find__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.lj-find__pin {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}
.lj-find--good .lj-find__pin { color: #6EE7B7; }
.lj-find--bad  .lj-find__pin { color: #FCA5A5; }
.lj-find--warn .lj-find__pin { color: #FCD34D; }
.lj-find__metric {
    font-family: 'Outfit', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.lj-find__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}
.lj-find__sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}
.lj-find__msg {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* DO THIS WEEK — numbered action list. */
.lj-act {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lj-act__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
}
.lj-act__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}
.lj-act__item--good .lj-act__num { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; }
.lj-act__item--warn .lj-act__num { background: rgba(239, 191, 4, 0.16); color: #FCD34D; }
.lj-act__item--bad  .lj-act__num { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; }
.lj-act__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.lj-act__msg {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 1100px) {
    .lj-find-row { grid-template-columns: 1fr; }
}

/* P75.4 — interpretation line at the bottom of each section. */
.lj-ins-interp {
    margin: 14px 4px 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
    font-style: italic;
}
.lj-ins-interp strong {
    color: #fff;
    font-weight: 600;
    font-style: normal;
}

/* P75.5 — side-panel layout: data left, read-out right. Used by
   Risk/reward leaderboard + Exit management sections. */
.lj-ins-side {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr);
    gap: 18px;
    align-items: stretch;
}
.lj-ins-side__main { min-width: 0; }
.lj-ins-side__panel {
    padding: 18px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.18));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lj-ins-side__panel::before {
    content: '';
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239, 191, 4, 0.45), transparent);
}
.lj-ins-side__pin {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary, #EFBF04);
}
.lj-ins-side__msg {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
}
.lj-ins-side__msg strong {
    color: #fff;
    font-weight: 600;
    font-style: normal;
}
.lj-ins-empty {
    padding: 28px;
    text-align: center;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

/* P75.4 — Leaderboard (Risk/reward by ticker). Table-like rows with
   inline progress bars for WR and expectancy. */
.lj-lb {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
}
.lj-lb-row {
    display: grid;
    grid-template-columns: 40px 80px minmax(160px, 1fr) 80px minmax(220px, 1.4fr) 60px;
    gap: 16px;
    padding: 14px 18px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 120ms ease;
    position: relative;
}
.lj-lb-row:last-child { border-bottom: 0; }
.lj-lb-row:not(.lj-lb-row--head):hover { background: rgba(255, 255, 255, 0.025); }
.lj-lb-row--head {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.45);
}
.lj-lb-row.is-lead { background: rgba(255, 255, 255, 0.025); }
.lj-lb-row.is-lead.lj-lb-row--pos { box-shadow: inset 3px 0 0 0 #34D399; }
.lj-lb-row.is-lead.lj-lb-row--neg { box-shadow: inset 3px 0 0 0 #F87171; }
.lj-lb-row__rank {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}
.lj-lb-row__tick {
    font-family: 'Outfit', sans-serif;
    font-size: 1.0rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}
.lj-lb-row__wr { display: flex; align-items: center; gap: 10px; }
.lj-lb-row__exp { display: flex; align-items: center; gap: 10px; }
.lj-lb-row__bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.lj-lb-row__bar span {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.40);
    border-radius: 3px;
}
.lj-lb-row--pos .lj-lb-row__bar span { background: #34D399; }
.lj-lb-row--neg .lj-lb-row__bar span { background: #F87171; }
.lj-lb-row__wrVal,
.lj-lb-row__r {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
}
.lj-lb-row__r { text-align: left; min-width: 60px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.08); }
.lj-lb-row__exp .lja-pos,
.lj-lb-row__exp .lja-neg,
.lj-lb-row__exp .lja-neu {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: right;
}
.lj-lb-row__n {
    text-align: right;
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.50);
    font-variant-numeric: tabular-nums;
}

/* P75.4 — Exit management. Two panels (Winners / Losers), 2 cells each. */
.lj-exits-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.lj-exits-panel {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
}
.lj-exits-panel__head {
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.03);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-exits-panel__cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 14px;
    gap: 12px;
}
.lj-exits-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.lj-exits-cell__lbl {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}
.lj-exits-cell__val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.lj-exits-cell--good .lj-exits-cell__val { color: #6EE7B7; }
.lj-exits-cell--warn .lj-exits-cell__val { color: #FCD34D; }
.lj-exits-cell--bad  .lj-exits-cell__val { color: #FCA5A5; }
.lj-exits-cell--mute .lj-exits-cell__val { color: rgba(255, 255, 255, 0.45); }
.lj-exits-cell__sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.50);
    margin-top: 2px;
}

/* P75.4 — Context section: 3 dimension blocks. */
.lj-ctx-row-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.lj-ctx-block {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    padding: 14px 16px 16px;
}
.lj-ctx-block__head {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lj-ctx-block__empty {
    padding: 16px 0;
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.36);
    font-style: italic;
}
.lj-ctx-row {
    display: grid;
    grid-template-columns: 120px 1fr 44px 40px;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.lj-ctx-row:last-child { border-bottom: 0; }
.lj-ctx-row--hdr {
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
}
.lj-ctx-row--hdr .lj-ctx-row__lbl,
.lj-ctx-row--hdr .lj-ctx-row__wr,
.lj-ctx-row--hdr .lj-ctx-row__n {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.42);
    font-weight: 600;
}
.lj-ctx-row.is-lead.lj-ctx-row--pos { box-shadow: inset 2px 0 0 0 #34D399; padding-left: 6px; }
.lj-ctx-row.is-lead.lj-ctx-row--neg { box-shadow: inset 2px 0 0 0 #F87171; padding-left: 6px; }
.lj-ctx-row__lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
}
.lj-ctx-row__lbl-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    margin-top: 2px;
    white-space: nowrap;
}
.lj-ctx-row__bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.lj-ctx-row__bar span {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.40);
    border-radius: 3px;
}
.lj-ctx-row--pos .lj-ctx-row__bar span { background: #34D399; }
.lj-ctx-row--neg .lj-ctx-row__bar span { background: #F87171; }
.lj-ctx-row--mute .lj-ctx-row__bar span { background: rgba(255, 255, 255, 0.30); }
.lj-ctx-row__wr {
    font-family: 'Outfit', sans-serif;
    font-size: 0.90rem;
    font-weight: 700;
    color: #fff;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lj-ctx-row--pos .lj-ctx-row__wr { color: #6EE7B7; }
.lj-ctx-row--neg .lj-ctx-row__wr { color: #FCA5A5; }
.lj-ctx-row__n {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.42);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .lj-exits-row { grid-template-columns: 1fr; }
    .lj-ctx-row-wrap { grid-template-columns: 1fr; }
    .lj-lb-row { grid-template-columns: 30px 60px 1fr 60px 1fr 50px; gap: 10px; padding: 12px; }
    .lj-ins-side { grid-template-columns: 1fr; }
}

body.lj-chart-standalone .lj-chart-row {
    position: relative;
}
/* In SPLIT mode each frame anchors its OWN absolute topbar, so the secondary
   pane's controls (ticker select + timeframe buttons + close) float over the
   secondary pane — not stacked on top of the primary's at the row's left.
   Without this both topbars anchor to the row → they overlap and the right
   pane looks like it has no controls. Applies to the big chart AND the
   Expand popup (both render with body.lj-chart-standalone). */
body.lj-chart-standalone .lj-chart-row.is-split .lj-chart-frame {
    position: relative;
}
/* Collapse the rail so the frame expands across the full row.
   Children (.draw-toolbar + chart-tools-vertical) are positioned
   absolutely below. */
body.lj-chart-standalone .lj-chart-row .lj-chart-rail {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
    flex: 0 0 0 !important;
}
body.lj-chart-standalone .lj-chart-topbar {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 6;
    pointer-events: none;
    display: flex;
    /* P74.0e — keep the toolbar pinned to its original spot (left of the
       chart's top edge), just floating over the canvas. Centering moved
       it to the middle which broke users' muscle memory. */
    justify-content: flex-start;
}
body.lj-chart-standalone .lj-chart-topbar > * { pointer-events: auto; }
/* Secondary pane's topbar has right-aligned controls (Sync + close); keep them
   clear of the price-scale numbers on the right edge of the pane. */
body.lj-chart-standalone .lj-chart-frame--secondary .lj-chart-topbar { right: 66px; }
body.lj-chart-standalone .chart-controls-toolbar {
    background: rgba(15, 15, 18, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    width: auto;
}
/* `.draw-toolbar` carries an inline `position: static` set by chart-engine
   JS (rail-mount code). Inline styles beat any non-important CSS rule,
   so we need !important on the position properties to flip it to an
   overlay on the standalone Chart page. */
body.lj-chart-standalone .lj-chart-row .draw-toolbar {
    position: absolute !important;
    top: 76px !important;
    left: 14px !important;
    z-index: 6;
    background: rgba(15, 15, 18, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    width: auto;
}
/* P74.0f — second rail group (.chart-tools-vertical) used to render
   above the draw-toolbar as a separate small icon column. Pull it into
   a sibling overlay just below the draw-toolbar so it visually reads
   as one extended panel instead of stray icons floating at the corner. */
body.lj-chart-standalone .lj-chart-row .chart-tools-vertical {
    position: absolute !important;
    top: 330px !important;
    left: 14px !important;
    z-index: 6;
    background: rgba(15, 15, 18, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    width: auto;
    flex-direction: column;
    gap: 4px;
    display: flex;
}

/* ===========================================================================
   P75.14 — Import beta notice + Export card + Skeletons
   =========================================================================== */

.import-beta-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
}
.import-beta-notice__icon {
    color: #FBBF24;
    flex: 0 0 auto;
    display: flex;
}
.import-beta-notice__body { flex: 1 1 auto; }
.import-beta-notice__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FBBF24;
    margin-bottom: 4px;
}
.import-beta-notice__text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
}
.import-beta-notice__text strong {
    color: #fff;
    font-weight: 600;
}
.import-beta-notice__badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 999px;
    padding: 3px 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    flex: 0 0 auto;
}
.integration-supported-pill {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #34D399;
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 8px;
    vertical-align: middle;
}

.export-icon {
    background: rgba(96, 165, 250, 0.12);
    color: #60A5FA;
    border: 1px solid rgba(96, 165, 250, 0.28);
}
.export-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 20px;
}
.export-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px;
}
.export-summary-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.export-summary-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.export-summary-lbl {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.export-help {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}
.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}
.export-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.export-status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    min-height: 1em;
}
.export-status.is-ok { color: #34D399; }
.export-status.is-err { color: #F87171; }

/* ---- Skeleton loader ---- */
@keyframes lj-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.lj-skel {
    background-color: rgba(255, 255, 255, 0.04);
    background-image: linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.02) 100%);
    background-size: 200% 100%;
    animation: lj-skel-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.lj-skel--block { display: block; }
.lj-skel--line { height: 14px; margin: 6px 0; }
.lj-skel--line.lj-skel--lg { height: 28px; }
.lj-skel--line.lj-skel--sm { height: 10px; }
.lj-skel--bar { height: 6px; border-radius: 3px; }
.lj-skel--card {
    border-radius: 12px;
    min-height: 96px;
}
.lj-skel--chart {
    width: 100%;
    height: 240px;
    border-radius: 12px;
}
.lj-skel-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) {
    .lj-skel-row { grid-template-columns: 1fr 1fr; }
    .export-summary { grid-template-columns: 1fr; }
}

/* P75.17 — Profile Danger zone card + Delete account modal. */
.pf-card--danger {
    border: 1px solid rgba(239, 68, 68, 0.20);
    box-shadow: inset 3px 0 0 0 #ef4444;
}
.pf-card--danger .pf-card-title { color: #fca5a5; }
.lj-delete-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.lj-delete-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
}
.lj-delete-modal__card {
    position: relative;
    max-width: 480px;
    width: 100%;
    background: #181818;
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    color: #fff;
}
.lj-delete-modal__card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    margin: 0 0 14px;
    color: #fca5a5;
}
.lj-delete-modal__warning {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
    margin: 0 0 14px;
}
.lj-delete-modal__warning ul {
    margin: 8px 0 10px 18px;
    padding: 0;
    color: rgba(255,255,255,0.7);
}
.lj-delete-modal__warning strong { color: #fff; font-weight: 600; }
.lj-delete-modal__confirm {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin: 6px 0 6px;
}
.lj-delete-modal__confirm code {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: 'Menlo', monospace;
    font-size: 0.84rem;
    font-weight: 700;
}
.lj-delete-modal__input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Menlo', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}
.lj-delete-modal__input:focus {
    outline: 2px solid rgba(239, 68, 68, 0.5);
    border-color: rgba(239, 68, 68, 0.5);
}
.lj-delete-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.lj-delete-modal__status {
    margin-top: 12px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    min-height: 1em;
}
.lj-delete-modal__status.is-ok { color: #34D399; }
.lj-delete-modal__status.is-err { color: #F87171; }

/* P75.17 — Sidebar footer: support email + legal links. */
.sidebar-nav-foot {
    margin-top: auto;
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 120ms ease;
}
.sidebar-foot-link svg { opacity: 0.7; }
.sidebar-foot-link:hover { color: #FBBF24; }
.sidebar-foot-link:hover svg { opacity: 1; }
.sidebar-foot-legal {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
}
.sidebar-foot-legal a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 120ms ease;
}
.sidebar-foot-legal a:hover { color: #FBBF24; }
.sidebar-foot-legal .dot { opacity: 0.5; }

/* P75.17 — Cookie / data-use bar (bottom). */
.lj-cookie-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9998;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(20, 20, 22, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
    max-width: 760px;
    margin: 0 auto;
}
.lj-cookie-bar[hidden] { display: none !important; }
.lj-cookie-bar a {
    color: #FBBF24;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lj-cookie-bar a:hover { color: #fff; }
.lj-cookie-bar__msg { flex: 1 1 auto; }
.lj-cookie-bar__actions { flex: 0 0 auto; }
.lj-cookie-bar__accept {
    background: #FBBF24;
    color: #1a1a1a;
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease;
}
.lj-cookie-bar__accept:hover { background: #FCD34D; }
@media (max-width: 600px) {
    .lj-cookie-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
    }
}

/* ============ P75.20 — Onboarding tour ============ */
.lj-tour {
    position: fixed; inset: 0;
    z-index: 10000;
    pointer-events: none;
    font-family: 'Inter', system-ui, sans-serif;
}
.lj-tour[hidden] { display: none; }
.lj-tour__rect {
    position: fixed;
    background: rgba(0, 0, 0, 0.72);
    pointer-events: auto;
    transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lj-tour__tooltip {
    position: fixed;
    width: 320px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 22px 24px;
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    transition: top 240ms ease, left 240ms ease;
}
.lj-tour__tooltip--centered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 380px;
}
.lj-tour__counter {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.lj-tour__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.25;
}
.lj-tour__text {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin: 0 0 20px;
}
.lj-tour__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lj-tour__nav { display: flex; gap: 8px; }
.lj-tour__skip {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 0;
    transition: color 120ms ease;
}
.lj-tour__skip:hover { color: rgba(255, 255, 255, 0.75); }
.lj-tour__btn {
    border: 0;
    border-radius: 7px;
    padding: 8px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.lj-tour__btn--primary {
    background: #EFBF04;
    color: #181818;
}
.lj-tour__btn--primary:hover { background: #FCD34D; }
.lj-tour__btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.lj-tour__btn--ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.lj-tour__pointer {
    position: absolute;
    width: 0; height: 0;
    border-style: solid;
}
@media (max-width: 600px) {
    .lj-tour__tooltip { width: calc(100vw - 32px); max-width: 320px; }
}



/* Settings — identity editor + danger (Profile folded into Settings) */
.lj-set-editor { padding: 4px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px; }
.lj-set-editor .profile-field { margin-bottom: 14px; }
.lj-set-editor .profile-color-row { display: flex; }
.lj-set-danger { margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(248,113,113,0.18); }
.lj-set-danger .lj-set-row-title { color: #f87171; }

/* Instrument dropdowns (trade entry + chart toolbars) — driven by instruments.js */
.trade-ticker-select, .chart-ticker-select {
    appearance: none; -webkit-appearance: none;
    background: rgba(255,255,255,0.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 9px center;
    border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
    color: #fafafa; font-size: 0.86rem; font-weight: 600;
    padding: 6px 26px 6px 10px; cursor: pointer; line-height: 1.2;
}
.trade-ticker-select:hover, .chart-ticker-select:hover { border-color: rgba(245,203,26,0.45); }
.trade-ticker-select:focus, .chart-ticker-select:focus { outline: none; border-color: #F5CB1A; }
.trade-ticker-select option, .chart-ticker-select option { background: #18181b; color: #fafafa; }
.chart-ticker-select { padding: 4px 24px 4px 9px; font-size: 0.8rem; }

/* P75.24 — Analytics-tab lazy-load placeholder. Lives in the critical
   stylesheet (style.css) — not analytics.css — because the latter is
   also lazy-loaded and would be missing while the placeholder is on
   screen. */
.lj-an-loading {
    padding: 80px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    animation: lj-an-loading-pulse 1.2s ease-in-out infinite alternate;
}
.lj-an-loading--err {
    color: #FCA5A5;
    animation: none;
}
.lj-an-loading button {
    margin-left: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(252, 165, 165, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.lj-an-loading button:hover {
    background: rgba(239, 68, 68, 0.18);
}
@keyframes lj-an-loading-pulse {
    from { opacity: 0.45; }
    to   { opacity: 0.85; }
}