* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --sidebar-w: 230px;
    --radius: 12px;
    --radius-sm: 8px;
}

/* ═══ THEMES ═══════════════════════════════════════════════════════════════════════════════
   One token set, four themes (Settings → Appearance → Theme). Every theme sets every token.
   Keys: 'spotify' = Standard (default), 'legacy' = the pre-2.2 Standard, 'dark', 'light'.
   The accent colour arrives as --accent-base (set inline by applyAccentColor); each theme derives
   --accent and its tints from it, so Light can deepen it for contrast on white.
   --bg (page) → --bg2 (sidebar, cards) → --bg3 (inputs, raised) → --bg4/--bg5 (hover, pressed)
   --surface/--surface-2 alias bg2/bg3 · --border/--border-hover (= --border-strong) · --text/-dim/-faint
   --fg-rgb: the foreground as "r, g, b" for rgba(var(--fg-rgb), a) overlays (white on dark, ink on light)
   --shadow-sm/md/lg · --overlay-backdrop (modal scrims) · --on-accent (text on accent fills)
   --green/--red/--blue/--yellow/--purple must stay 6-digit hex: canvas code appends alpha to them. */
:root { --accent-base: #1db954; }

:root, [data-theme] {
    --surface: var(--bg2);
    --card: var(--bg2);          /* card background (dashboard, weekly review, profile, gallery…) */
    --surface-2: var(--bg3);
    --border-strong: var(--border-hover);
    --accent-ink: var(--accent);
    --on-accent: #ffffff;
    --text-secondary: var(--text-dim);
}

/* Standard — refined near-blacks with a faint green undertone and the green accent */
:root, [data-theme="spotify"] {
    color-scheme: dark;
    --fg-rgb: 255, 255, 255;
    --bg: #0b0d0c;
    --bg2: #121514;
    --bg3: #191c1b;
    --bg4: #212524;
    --bg5: #2b302e;
    --border: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.13);
    --text: #f1f4f2;
    --text-dim: #a2aaa6;
    --text-faint: #6a726e;
    --green: #3ccb7f;
    --green-bg: rgba(60, 203, 127, 0.11);
    --green-glow: rgba(60, 203, 127, 0.16);
    --red: #f06470;
    --red-bg: rgba(240, 100, 112, 0.11);
    --red-glow: rgba(240, 100, 112, 0.15);
    --blue: #5ba4ff;
    --blue-bg: rgba(91, 164, 255, 0.1);
    --blue-glow: rgba(91, 164, 255, 0.14);
    --yellow: #f2bd4b;
    --purple: #b59dff;
    --purple-bg: rgba(181, 157, 255, 0.1);
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-hover: rgba(255, 255, 255, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 20px 56px rgba(0, 0, 0, 0.5);
    --overlay-backdrop: rgba(3, 5, 4, 0.66);
    --hover-overlay: rgba(255, 255, 255, 0.045);
    --hover-overlay-strong: rgba(255, 255, 255, 0.075);
    --dashed-border: rgba(255, 255, 255, 0.11);
    --subtle-line: rgba(255, 255, 255, 0.07);
    --subtle-bg: rgba(255, 255, 255, 0.025);
    --subtle-bg2: rgba(255, 255, 255, 0.018);
    --accent: var(--accent-base);
    --accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 32%, transparent);
    --accent-border-strong: color-mix(in srgb, var(--accent) 46%, transparent);
    --accent-subtle: color-mix(in srgb, var(--accent) 6%, transparent);
    --accent-icon-bg: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Legacy — the Standard theme exactly as it looked before 2.2 (warm neutral blacks, Spotify green) */
[data-theme="legacy"] {
    color-scheme: dark;
    --fg-rgb: 255, 255, 255;
    --bg: #121212;
    --bg2: #181818;
    --bg3: #212121;
    --bg4: #282828;
    --bg5: #333333;
    --border: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.14);
    --text: #ffffff;
    --text-dim: #b3b3b3;
    --text-faint: #727272; /* was #535353 (2.1:1 on --bg3); now ≥3:1 on --bg…--bg4 */
    --green: #1db954;
    --green-bg: rgba(29, 185, 84, 0.12);
    --green-glow: rgba(29, 185, 84, 0.15);
    --red: #f15e6c;
    --red-bg: rgba(241, 94, 108, 0.1);
    --red-glow: rgba(241, 94, 108, 0.12);
    --blue: #4d9eff;
    --blue-bg: color-mix(in srgb, var(--blue) 8%, transparent);
    --blue-glow: color-mix(in srgb, var(--blue) 10%, transparent);
    --yellow: #f5c542;
    --purple: #b49bff;
    --purple-bg: rgba(180, 155, 255, 0.08);
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-hover: rgba(255, 255, 255, 0.2);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --overlay-backdrop: rgba(0, 0, 0, 0.65);
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --hover-overlay-strong: rgba(255, 255, 255, 0.08);
    --dashed-border: rgba(255, 255, 255, 0.1);
    --subtle-line: rgba(255, 255, 255, 0.07);
    --subtle-bg: rgba(255, 255, 255, 0.03);
    --subtle-bg2: rgba(255, 255, 255, 0.02);
    --accent: var(--accent-base);
    --accent-bg: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-border-strong: color-mix(in srgb, var(--accent) 40%, transparent);
    --accent-subtle: color-mix(in srgb, var(--accent) 5%, transparent);
    --accent-icon-bg: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Dark — deep, cool near-black (Linear/Raycast feel): crisp hairlines, quiet greys, the accent does the talking */
[data-theme="dark"] {
    color-scheme: dark;
    --fg-rgb: 255, 255, 255;
    --bg: #08090d;
    --bg2: #0e1016;
    --bg3: #151821;
    --bg4: #1c202a;
    --bg5: #262b37;
    --border: rgba(255, 255, 255, 0.065);
    --border-hover: rgba(255, 255, 255, 0.12);
    --text: #eceef2;
    --text-dim: #8a90a0;
    --text-faint: #626878; /* was #5a6070 (2.8:1 on --bg3); now ≥3:1 on --bg…--bg3 */
    --green: #45c486;
    --green-bg: rgba(69, 196, 134, 0.1);
    --green-glow: rgba(69, 196, 134, 0.15);
    --red: #ec5b62;
    --red-bg: rgba(236, 91, 98, 0.1);
    --red-glow: rgba(236, 91, 98, 0.15);
    --blue: #6aa3ff;
    --blue-bg: rgba(106, 163, 255, 0.1);
    --blue-glow: rgba(106, 163, 255, 0.14);
    --yellow: #f0b84a;
    --purple: #a791ff;
    --purple-bg: rgba(167, 145, 255, 0.1);
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-hover: rgba(255, 255, 255, 0.15);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6);
    --overlay-backdrop: rgba(2, 3, 5, 0.7);
    --hover-overlay: rgba(255, 255, 255, 0.04);
    --hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --dashed-border: rgba(255, 255, 255, 0.1);
    --subtle-line: rgba(255, 255, 255, 0.07);
    --subtle-bg: rgba(255, 255, 255, 0.022);
    --subtle-bg2: rgba(255, 255, 255, 0.015);
    --accent: var(--accent-base);
    --accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 34%, transparent);
    --accent-border-strong: color-mix(in srgb, var(--accent) 48%, transparent);
    --accent-subtle: color-mix(in srgb, var(--accent) 6%, transparent);
    --accent-icon-bg: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Light — a real light mode, dimmed so it is calm at night (GitHub light-dimmed-ish): grey surfaces,
   visible hairlines, dark-grey ink, deeper greens/reds, and shadows instead of glows */
[data-theme="light"] {
    color-scheme: light;
    /* Soft light, dimmed: clearly grey surfaces (nothing brighter than ~#e0e3e8), cards a notch lighter than
       the page, sidebar/title bar a notch darker, near-black ink, deep greens/reds and a darkened accent */
    --fg-rgb: 21, 24, 29;
    --bg: #d1d5db;
    --bg2: #dde0e5;
    --chrome: #c6cbd2; /* sidebar + title bar */
    --bg3: #d5d9df;
    --bg4: #cacfd6;
    --bg5: #bec4cc;
    --border: rgba(21, 24, 29, 0.17);
    --border-hover: rgba(21, 24, 29, 0.3);
    --text: #15181d;
    --text-dim: #3d434c;
    --text-faint: #5f6772;
    --green: #0c7b42;
    --green-bg: rgba(11, 133, 72, 0.1);
    --green-glow: rgba(11, 133, 72, 0.14);
    --red: #b8323d;
    --red-bg: rgba(196, 48, 59, 0.09);
    --red-glow: rgba(196, 48, 59, 0.13);
    --blue: #1f56b3;
    --blue-bg: rgba(39, 97, 196, 0.09);
    --blue-glow: rgba(39, 97, 196, 0.13);
    --yellow: #8a5a05;
    --purple: #5a3db5;
    --purple-bg: rgba(104, 72, 201, 0.09);
    --scrollbar-thumb: rgba(21, 24, 29, 0.18);
    --scrollbar-hover: rgba(21, 24, 29, 0.3);
    --shadow: 0 1px 2px rgba(21, 24, 29, 0.05);
    --shadow-sm: 0 1px 2px rgba(21, 24, 29, 0.05);
    --shadow-md: 0 1px 2px rgba(21, 24, 29, 0.05), 0 4px 14px rgba(21, 24, 29, 0.06);
    --shadow-lg: 0 2px 6px rgba(21, 24, 29, 0.06), 0 18px 48px rgba(21, 24, 29, 0.16);
    --overlay-backdrop: rgba(21, 24, 29, 0.4);
    --hover-overlay: rgba(21, 24, 29, 0.06);
    --hover-overlay-strong: rgba(21, 24, 29, 0.1);
    --dashed-border: rgba(21, 24, 29, 0.2);
    --subtle-line: rgba(21, 24, 29, 0.1);
    --subtle-bg: rgba(21, 24, 29, 0.03);
    --subtle-bg2: rgba(21, 24, 29, 0.02);
    --accent: color-mix(in srgb, var(--accent-base) 68%, #000);
    --accent-bg: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) 13%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 38%, transparent);
    --accent-border-strong: color-mix(in srgb, var(--accent) 52%, transparent);
    --accent-subtle: color-mix(in srgb, var(--accent) 6%, transparent);
    --accent-icon-bg: color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-theme="light"] :is(.sidebar, .titlebar) { background: var(--chrome); }

/* Light-theme touches the tokens can't express */
/* Background images become a soft watermark on paper: a custom photo is greyed and lifted, the shipped
   (dark) default is inverted first */
[data-theme="light"] main > .app-bg-image { filter: grayscale(1) contrast(0.7) brightness(1.5); mix-blend-mode: multiply; }
[data-theme="light"] main > .app-bg-image[style*="bg-default"] { filter: invert(1) hue-rotate(180deg) grayscale(0.4); }
/* Dark keeps the shipped background neutral (no green cast) so the accent is the only colour */
[data-theme="dark"] main > .app-bg-image[style*="bg-default"] { filter: grayscale(1); }
/* Cards lift off the page with a soft shadow instead of a glow */
[data-theme="light"] :is(.dash-hero-card, .dash-stats-grid, .dash-widget, .goals-editor, .onboarding-checklist, .tf-card, .tf-summary,
    .trades-summary, .trades-toolbar, .calendar-layout, .cal-day-detail, .rc-card, .rc-side-card, .recap-editor, .past-recap-picker,
    .stats-card, .accounts-summary, .settings-card, .acad-progress, .acad-tabs, .chat-composer, .wr-card, .pb-card, .gallery-card,
    .acct-card, .ct-card) { box-shadow: var(--shadow-sm); }
[data-theme="light"] :is(.modal-content, .admin-modal, .signal-popup, .emoji-picker, .gif-picker, .chat-mention-popup, .chat-context-menu,
    .notif-panel, .user-popup, .patch-notes-modal, .delete-confirm-modal, .toast) { box-shadow: var(--shadow-lg); }
/* User-picked name colours are chosen on dark; deepen them so pale ones (yellow, pastel) read on white */
[data-theme="light"] :is(.chat-msg-name, .chat-member-name, .chat-reply-quote-name, .profile-name, .pf-name-value)[style*="color"] { filter: brightness(0.62) saturate(1.3); }
/* Nothing brighter than the cards: native dropdown lists and the Google sign-in button too */
[data-theme="light"] option { background: var(--bg2); color: var(--text); }
[data-theme="light"] .setup-google-btn { background: #e4e7eb; }
[data-theme="light"] ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Numbers (money, stats, prices) use the text font with equal-width digits: columns line up, and the
   zero is a plain oval (JetBrains Mono's dotted zero looked noisy). Change the numbers' font here. */
:root { --num-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Form controls don't inherit the page font by default: without this every button (the whole sidebar,
   tabs, pills) falls back to Arial. Rules that set their own font-family still win. */
button, input, select, textarea { font-family: inherit; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* Remove default focus outlines */
input:focus, textarea:focus, select:focus, button:focus { outline: none; }

/* === LOADING SCREEN === */
#loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}
#loading-screen::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loadingGlowBg 3s ease-in-out infinite;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none !important;
}
#loading-screen[style*="display: none"] *, #loading-screen.hidden * { animation: none !important; }

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    animation: loadingFadeIn 0.6s ease;
}

.loading-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-glow {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,192,74,0.2) 0%, transparent 70%);
    animation: loadingGlowPulse 2s ease-in-out infinite;
}
.loading-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    image-rendering: pixelated;
    position: relative;
    z-index: 1;
    animation: loadingLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text); /* plain text like the page titles (no gradient) */
    letter-spacing: -0.03em;
    animation: loadingTitleIn 0.6s ease 0.2s both;
}
.loading-sub {
    font-size: 12px;
    color: var(--text-faint);
    animation: loadingTitleIn 0.6s ease 0.35s both;
}

.loading-bar {
    width: 180px;
    height: 3px;
    background: rgba(var(--fg-rgb), 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
    animation: loadingTitleIn 0.6s ease 0.5s both;
}
.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--purple), var(--blue));
    background-size: 200% 100%;
    border-radius: 3px;
    animation: loadingBarFill 2s ease-in-out forwards, loadingBarShimmer 1.5s linear infinite;
}

@keyframes loadingFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes loadingLogoIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes loadingTitleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes loadingGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}
@keyframes loadingGlowBg {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes loadingBarFill {
    0% { width: 0%; }
    30% { width: 40%; }
    60% { width: 70%; }
    100% { width: 95%; }
}
@keyframes loadingBarShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === TITLEBAR === */
.titlebar {
    height: 34px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.titlebar-drag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    -webkit-app-region: drag;
    flex: 1;
    height: 100%;
}

.titlebar-icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

.titlebar-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.titlebar-controls {
    display: flex;
    height: 100%;
    -webkit-app-region: no-drag;
}

.tb-btn {
    width: 46px;
    height: 100%;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}

.tb-btn:hover {
    background: var(--hover-overlay-strong);
    color: var(--text);
}

.tb-close:hover {
    background: #e81123;
    color: #fff;
}

/* === APP LAYOUT === */
.app {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

/* Legacy/unused elements */
.sidebar-header { display: none; }
.nav-divider { display: none; }
.nav-group { display: contents; }
.nav-label { display: none; }
.nav-section-label { display: none; }
/* nav-icon unused */
.nav-spacer { display: none; }

.sidebar nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.sidebar nav::-webkit-scrollbar { width: 0; }

/* Spacer between nav groups */
.nav-spacer {
    height: 8px;
}

/* Separator */
.nav-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 4px 18px;
    margin-top: 4px;
}
.nav-separator span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-faint);
    opacity: 0.5;
}
.nav-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}

/* Nav buttons */
.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 10px 14px 10px 18px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

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

/* Icons */
.nav-btn svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
    position: relative;
    z-index: 1;
}

.nav-btn:hover svg {
    opacity: 0.75;
}

.nav-btn.active svg {
    opacity: 1;
    color: var(--accent);
}

/* Notification badges */
/* Replies/@mentions count — a ring around the number, same look as the bell panel counter */
.nav-notif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1.5px var(--accent-border);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Just a dot — something unread, but nothing aimed at you */
.nav-notif.nav-notif-dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

.sidebar-bell {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: auto;
    padding: 5px;
    border-radius: 6px;
    color: var(--text-dim);
    opacity: 0.75;
    transition: all 0.2s;
}
.sidebar-bell:hover { opacity: 1; color: var(--text); background: var(--hover-overlay); }
.sidebar-bell.has-notif {
    color: var(--accent);
    opacity: 1;
    animation: bellShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(12deg); }
    30% { transform: rotate(-10deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
}

/* Count badge on the bell; shrinks to a plain dot when there's only an unseen mention */
.sidebar-bell-dot {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff4d4d;
    box-shadow: 0 0 8px rgba(255,77,77,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.sidebar-bell-dot:empty { min-width: 8px; height: 8px; padding: 0; top: -1px; right: -2px; }
.sidebar-bell.has-notif .sidebar-bell-dot { display: inline-flex; }

.mentor-btn-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    background: #ff4d4d;
    box-shadow: 0 0 6px rgba(255,77,77,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.sidebar-mentor-btn.has-notif { color: var(--accent); opacity: 1; }
.sidebar-mentor-btn.has-notif .mentor-btn-dot { display: inline-flex; }

/* Admin button */
.sidebar-admin-btn, .sidebar-mentor-btn {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 5px;
    border-radius: 6px;
    color: var(--text-dim);
    opacity: 0.75;
    transition: all 0.2s;
    cursor: pointer;
    margin-left: 0;
}
.sidebar-admin-btn:hover, .sidebar-mentor-btn:hover { background: var(--hover-overlay); }
.sidebar-admin-btn:hover { opacity: 1; color: var(--accent); }
.sidebar-mentor-btn:hover { opacity: 1; color: var(--purple); }

/* Admin overlay modal */
.admin-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: var(--overlay-backdrop); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}
.admin-modal {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
    width: 100%; max-width: 560px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--fg-rgb), 0.03) inset;
    overflow: hidden; animation: modalIn 0.25s ease;
}
.admin-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), color-mix(in srgb, var(--purple) 4%, transparent));
    border-bottom: 1px solid var(--border);
}
.admin-modal-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.admin-title-icon { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--purple)); display: flex; align-items: center; justify-content: center; }
.admin-title-icon svg { color: #fff; }
.admin-modal-close {
    background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.06);
    color: var(--text-faint); cursor: pointer; padding: 6px;
    border-radius: 10px; line-height: 1; transition: all 0.15s; display: flex;
}
.admin-modal-close:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.1); }
.admin-modal-body {
    padding: 20px 24px; max-height: calc(100vh - 140px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), 0.06) transparent;
}
.admin-modal-body::-webkit-scrollbar { width: 4px; }
.admin-modal-body::-webkit-scrollbar-track { background: transparent; }
.admin-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.06); border-radius: 2px; }
.admin-section { margin-bottom: 24px; }
.admin-section:last-child { margin-bottom: 0; }
.admin-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-faint); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.admin-section-title svg { color: var(--accent); opacity: 0.7; }

/* === Admin panel: tabs in the header, Settings-style cards, searchable lists === */
.admin-panel-modal { max-width: 820px; }
.admin-panel-modal .admin-modal-header { gap: 16px; }
.admin-panel-modal .admin-modal-body { height: min(620px, calc(100vh - 160px)); max-height: none; }
.admin-tabs { margin-left: auto; }
.admin-tabs .settings-toggle-btn { padding: 7px 14px; }
.admin-tab-count { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.admin-tab-count:empty { display: none; }
.settings-toggle-btn.active .admin-tab-count { color: inherit; opacity: 0.75; }

.admin-card { padding: 18px 22px; margin-bottom: 16px; }
.admin-card:last-child { margin-bottom: 0; }
.admin-card .settings-row { padding: 14px 0; }
.admin-card .settings-row-label strong { font-size: 14px; }
.admin-row-input { flex: 0 1 340px; min-width: 0; padding: 9px 12px; font-size: 13px; }
.settings-row .btn-secondary.admin-danger-btn { color: var(--red); }
.settings-row .btn-secondary.admin-danger-btn:hover { color: var(--red); background: var(--red-bg); border-color: rgba(241,94,108,0.35); }
.settings-row-label span.admin-status-warn { color: var(--red); }

/* Search + segmented filter above a list */
.admin-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-toolbar .settings-toggle-btn { padding: 7px 14px; }
.admin-search { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }
.admin-search svg { position: absolute; left: 12px; color: var(--text-faint); pointer-events: none; }
.admin-search input { width: 100%; padding: 9px 12px 9px 34px; font-size: 13px; }

/* Rows shared by admin users, whitelist and mentor students */
.admin-list { display: flex; flex-direction: column; gap: 6px; }
.admin-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
    transition: all 0.15s;
}
.admin-row:hover { border-color: var(--border-hover); }
.admin-row-avatar {
    position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    background: var(--bg5); display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.admin-row-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.admin-presence {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
    border-radius: 50%; background: var(--bg5); border: 2px solid var(--bg3);
}
.admin-presence.online { background: var(--green); }
.admin-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.admin-row-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-sub { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tag {
    flex-shrink: 0; padding: 2px 7px; border-radius: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--text-dim); background: var(--bg5);
}
.admin-tag.mentor { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.admin-tag.excluded { color: var(--red); background: var(--red-bg); }
/* The plan each user is on, in the admin user list */
.admin-tag.plan-monthly { color: var(--green); background: var(--green-bg); }
.admin-tag.plan-lifetime { color: #f5c451; background: rgba(245, 196, 81, 0.12); }
.admin-tag.plan-trial { color: #6cb6ff; background: rgba(108, 182, 255, 0.12); }
.admin-tag.plan-expired { color: var(--red); background: var(--red-bg); }
.admin-filter-count { margin-left: 5px; font-size: 11px; opacity: 0.7; }
.admin-filter-count:empty { display: none; }
.admin-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-chip {
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2);
    color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap;
    cursor: pointer; transition: all 0.15s;
}
.admin-chip:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg4); }
.admin-chip.active { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.admin-chip.danger:hover { color: var(--red); border-color: rgba(241,94,108,0.4); background: var(--red-bg); }
.admin-icon-btn {
    width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text-faint);
    cursor: pointer; transition: all 0.15s;
}
.admin-icon-btn:hover { color: var(--text); background: var(--bg4); border-color: var(--border); }
.admin-icon-btn.danger:hover { color: var(--red); background: var(--red-bg); border-color: rgba(241,94,108,0.3); }
.admin-empty {
    padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-faint);
    background: var(--bg3); border: 1px dashed var(--border); border-radius: 12px;
}
.admin-empty.error { color: var(--red); }

/* Admin → Errors: one row per error, click to see the stack */
.admin-errors-hint { flex: 1; font-size: 12px; color: var(--text-faint); }
.admin-error-row { display: block; padding: 0; }
.admin-error-row summary {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    cursor: pointer; list-style: none;
}
.admin-error-row summary::-webkit-details-marker { display: none; }
.admin-error-row .admin-tag { color: var(--red); background: var(--red-bg); }
.admin-error-row[open] .admin-row-name-text { white-space: normal; }
.admin-error-stack {
    margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border);
    font-size: 11px; line-height: 1.5; color: var(--text-dim);
    white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
    user-select: text;
}

/* Whitelist: add form */
.admin-wl-add { margin-bottom: 14px; }
.admin-wl-add .settings-card-title { margin-bottom: 12px; }
.admin-add-row { display: flex; gap: 8px; }
.admin-add-row input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; }
.admin-add-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 16px; font-size: 13px; }

/* Notification panel (opened from the bell in the sidebar profile row) */
.notif-panel {
    position: fixed;
    bottom: 120px;
    left: 10px;
    width: 360px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    margin-bottom: 8px;
    z-index: 100;
    overflow: hidden;
    animation: viewFadeUp 0.2s ease;
}

.notif-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 14px 10px 18px;
}
.notif-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.notif-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.notif-count:empty { display: none; }

.notif-clear-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.notif-clear-btn:hover { color: var(--text); background: var(--bg4); }

.notif-panel-list {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--fg-rgb), 0.06) transparent;
    padding: 0 8px 8px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.notif-item:hover { background: var(--bg3); }

/* --notif-color is set per type in renderNotifPanel */
.notif-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--notif-color, var(--accent));
    background: color-mix(in srgb, var(--notif-color, var(--accent)) 14%, transparent);
}
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.notif-text { font-size: 13px; color: var(--text); line-height: 1.4; word-break: break-word; }
.notif-time { font-size: 11px; color: var(--text-faint); }

.notif-dismiss {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s;
}
.notif-item:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { color: var(--text); background: var(--bg5); }

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 24px 30px;
    text-align: center;
}
.notif-empty-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    color: var(--text-dim);
}
.notif-empty strong { font-size: 14px; font-weight: 600; color: var(--text); }
.notif-empty-hint { font-size: 12px; line-height: 1.45; color: var(--text-faint); max-width: 250px; }

/* Sidebar profile button */
/* Grid so the XP line runs underneath the icons instead of being squeezed by them */
.sidebar-profile-btn {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 2px;
    row-gap: 1px;
    width: 100%;
    padding: 8px 8px 8px 10px;
    border-radius: 10px;
}
.sidebar-profile-btn .sidebar-profile-avatar { grid-column: 1; grid-row: 1 / span 2; margin-right: 8px; }
.sidebar-profile-btn .sidebar-profile-text { display: contents; }
.sidebar-profile-btn .sidebar-profile-name { grid-column: 2; grid-row: 1; align-self: end; margin-left: 8px; }
.sidebar-profile-btn .sidebar-profile-sub { grid-column: 2 / -1; grid-row: 2; align-self: start; margin-left: 8px; }
.sidebar-profile-btn .sidebar-bell { grid-column: 3; grid-row: 1; }
.sidebar-profile-btn .sidebar-mentor-btn { grid-column: 4; grid-row: 1; }
.sidebar-profile-btn .sidebar-admin-btn { grid-column: 5; grid-row: 1; }
.sidebar-profile-btn.active { background: var(--accent-bg); }

.sidebar-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-profile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.sidebar-profile-name {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-profile-sub {
    font-weight: 500;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#sidebar-xp-level { color: var(--accent); font-weight: 600; }

/* Sidebar bottom */
.sidebar-bottom {
    margin-top: auto;
    position: relative;
    flex-shrink: 0;
}
/* Separator between New Trade and the profile row — same 10px inset as both */
.sidebar-separator {
    margin: 12px 6px 8px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--border-hover) 18%,
        color-mix(in srgb, var(--accent) 55%, transparent) 50%,
        var(--border-hover) 82%,
        transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
    pointer-events: none;
}

.sidebar-profile-btn {
    position: relative;
}

/* XP Bar in sidebar */
.sidebar-xp-bar {
    padding: 8px 12px 4px;
    margin-bottom: 4px;
}
.sidebar-xp-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.sidebar-xp-level {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.3px;
}
.sidebar-xp-text {
    font-size: 10px;
    color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
.sidebar-xp-track {
    width: 100%;
    height: 4px;
    background: rgba(var(--fg-rgb), 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.sidebar-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

/* Level badge */
.ct-level-badge {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    width: fit-content;
}
/* Animated badges for higher levels */
.ct-level-badge.level-5,
.ct-level-badge.level-6 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, transparent), color-mix(in srgb, var(--purple) 15%, transparent));
    color: var(--purple);
    animation: levelPulse 2.5s ease-in-out infinite;
}
.ct-level-badge.level-7,
.ct-level-badge.level-8 {
    background: linear-gradient(135deg, rgba(234,179,8,0.15), rgba(249,115,22,0.15));
    color: #fbbf24;
    animation: levelGlow 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(234,179,8,0.2);
}
.ct-level-badge.level-9 {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(234,179,8,0.15));
    color: #f87171;
    animation: levelGlow 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(239,68,68,0.25);
}
.ct-level-badge.level-10 {
    background: linear-gradient(90deg, rgba(239,68,68,0.2), rgba(234,179,8,0.2), rgba(45,206,113,0.2), color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--purple) 20%, transparent));
    background-size: 300% 100%;
    color: #fff;
    animation: levelRainbow 3s linear infinite;
    will-change: filter;
    box-shadow: 0 0 10px color-mix(in srgb, var(--purple) 30%, transparent);
    text-shadow: 0 0 4px rgba(255,255,255,0.3);
}
@keyframes levelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes levelGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(234,179,8,0.15); }
    50% { box-shadow: 0 0 10px rgba(234,179,8,0.35); }
}
/* Avatar rings by level */
.avatar-ring-5, .avatar-ring-6 { box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 50%, transparent); }
.avatar-ring-7, .avatar-ring-8 { box-shadow: 0 0 0 2px rgba(234,179,8,0.5), 0 0 8px rgba(234,179,8,0.15); }
.avatar-ring-9 { box-shadow: 0 0 0 2px rgba(239,68,68,0.5), 0 0 10px rgba(239,68,68,0.2); }
.avatar-ring-10 {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 60%, transparent), 0 0 12px color-mix(in srgb, var(--purple) 25%, transparent);
    animation: avatarRainbow 3s linear infinite;
    will-change: filter;
}
@keyframes avatarRainbow {
    0% { box-shadow: 0 0 0 2px rgba(239,68,68,0.6), 0 0 10px rgba(239,68,68,0.2); }
    33% { box-shadow: 0 0 0 2px rgba(234,179,8,0.6), 0 0 10px rgba(234,179,8,0.2); }
    66% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 60%, transparent), 0 0 10px color-mix(in srgb, var(--blue) 20%, transparent); }
    100% { box-shadow: 0 0 0 2px rgba(239,68,68,0.6), 0 0 10px rgba(239,68,68,0.2); }
}

@keyframes levelRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Day separator in community feed */
.ct-day-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.ct-day-separator::before,
.ct-day-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.ct-day-separator span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.new-trade-btn {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 0 0 rgba(99, 102, 241, 0);
    position: relative;
    overflow: hidden;
}

.new-trade-btn::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    pointer-events: none;
}

.new-trade-btn:hover {
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 0 rgba(99, 102, 241, 0) !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}

.new-trade-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

.new-trade-btn::before { display: none !important; }

.new-trade-btn svg {
    opacity: 1 !important;
}

.sidebar-footer {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.data-path {
    font-size: 11px;
    color: var(--text-faint);
    cursor: pointer;
    word-break: break-all;
}

/* === MAIN CONTENT === */
main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 36px;
    background: var(--bg);
    position: relative;
}

main::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

main > * {
    position: relative;
    z-index: 1;
}

main::-webkit-scrollbar { width: 6px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
main::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.view { display: none; }
.view:not(.active) { content-visibility: hidden; }

.view.active {
    display: block;
    animation: viewFadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes viewFadeUp {
    from { opacity: 0; transform: translateY(14px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.view-title {
    font-size: 26px;
    margin-bottom: 24px;
}

/* === STAT CARDS === */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--subtle-line), transparent);
}

.stat-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.stat-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat-value.positive { color: var(--green); }
.stat-value.negative { color: var(--red); }

.section-header {
    margin: 12px 0 12px;
}

.section-header h3 {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* === TRADE LIST === */
.trade-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trade-item {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 14px;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    contain: layout style;
}

.trade-item:hover {
    border-color: var(--border-hover);
    background: var(--bg3);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.trade-item.win-row:hover { border-color: rgba(45, 206, 113, 0.2); }
.trade-item.loss-row:hover { border-color: rgba(240, 84, 76, 0.2); }

/* Left accent bar */
.ti-accent {
    width: 3px;
    flex-shrink: 0;
    border-radius: 3px 0 0 3px;
    background: var(--bg4);
    transition: all 0.2s ease;
}

.trade-item.win-row .ti-accent { background: var(--green); }
.trade-item.loss-row .ti-accent { background: var(--red); }
.trade-item.be-row .ti-accent { background: var(--blue); }

/* Direction tile */
.ti-dir-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    align-self: center;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg4);
    color: var(--text-faint);
}
.ti-dir-icon.long { background: var(--green-bg); color: var(--green); }
.ti-dir-icon.short { background: var(--red-bg); color: var(--red); }

/* Body */
.ti-body {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Top row */
.ti-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ti-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ti-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    min-width: 24px;
}

.ti-instrument {
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.ti-contracts {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.ti-dir {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
}

.ti-dir.long { color: var(--green); background: var(--green-bg); }
.ti-dir.short { color: var(--red); background: var(--red-bg); }

.ti-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
}

.ti-type.live { color: var(--blue); background: var(--blue-bg); }
.ti-type.forward { color: var(--purple); background: var(--purple-bg); }

.ti-setup {
    font-size: 10px;
    font-weight: 600;
    color: var(--yellow);
    background: rgba(227, 179, 65, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.result-badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.result-badge.win { background: var(--green-bg); color: var(--green); }
.result-badge.loss { background: var(--red-bg); color: var(--red); }
.result-badge.breakeven { background: var(--blue-bg); color: var(--blue); }
.result-badge.draft { background: rgba(245,166,35,0.15); color: var(--yellow); border: 1px dashed rgba(245,166,35,0.4); animation: draftPulse 2s ease-in-out infinite; }
@keyframes draftPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.draft-row { border-color: rgba(245,166,35,0.2) !important; background: rgba(245,166,35,0.03) !important; }
.draft-row .ti-accent { background: var(--yellow) !important; }

/* P&L area - right side */
.ti-pnl-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ti-pnl {
    font-weight: 800;
    font-size: 17px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ti-pnl.positive { color: var(--green); }
.ti-pnl.negative { color: var(--red); }
.ti-pnl.neutral { color: var(--text-dim); }

.ti-rating {
    font-size: 10px;
    font-weight: 800;
    color: var(--yellow);
    background: rgba(227, 179, 65, 0.1);
    border: 1px solid rgba(227, 179, 65, 0.25);
    padding: 1px 7px;
    border-radius: 4px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

/* Bottom row */
.ti-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ti-details {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ti-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
    opacity: 0.5;
}

.ti-date {
    font-size: 12px;
    color: var(--text-faint);
    white-space: nowrap;
    font-weight: 500;
    text-transform: capitalize;
}

.ti-time {
    color: var(--text-faint);
    margin-left: 6px;
    opacity: 0.7;
}

.ti-prices {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.ti-price {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 500;
}

.ti-arrow {
    color: var(--text-faint);
    font-size: 10px;
    opacity: 0.5;
}

.ti-session {
    font-size: 10px;
    color: var(--text-faint);
    font-weight: 600;
}

.ti-tag {
    font-size: 10px;
    color: var(--text-faint);
    background: var(--bg4);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* Metrics - right side bottom */
.ti-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ti-points {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.ti-points.positive { color: rgba(45, 206, 113, 0.6); }
.ti-points.negative { color: rgba(240, 84, 76, 0.6); }

.ti-rr {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.ti-rr.positive { color: rgba(45, 206, 113, 0.6); }
.ti-rr.negative { color: rgba(240, 84, 76, 0.6); }

/* Screenshot thumbnails in trade list */
.ti-screenshots {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 2px;
}
.ti-ss-thumb {
    height: 40px;
    width: auto;
    max-width: 72px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    opacity: 0.85;
    transition: opacity 0.15s;
    cursor: pointer;
}
.ti-ss-thumb:hover { opacity: 1; }
.ti-ss-placeholder {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text-faint); opacity: 0.6;
}
.ti-ss-more {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    padding: 0 4px;
}

/* Accounts row in trade detail modal */
.modal-accounts-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Delete button */
.delete-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 12px 12px 0;
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
}

.trade-item:hover .delete-btn { opacity: 0.5; }
.trade-item:hover .delete-btn:hover { opacity: 1; color: var(--red); background: var(--red-bg); }

.trade-item .session-tag { display: none; }
.trade-item .type-tag { display: none; }

.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--text-dim);
}

.empty-state svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

/* === FORM === */
#new-trade {
    margin: 0 auto;
}

.tf-page-header { margin-bottom: 20px; }
.tf-page-header .view-title { margin-bottom: 4px; }
.tf-subtitle { margin: 0; font-size: 13px; color: var(--text-faint); }

/* Trade Form: steps on the left, sticky live preview + save on the right */
.tf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.tf-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tf-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1200px) {
    .tf-layout { grid-template-columns: minmax(0, 1fr); }
    .tf-side { position: static; }
}

.tf-card {
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px 6px;
    transition: border-color 0.2s;
}
.tf-card:focus-within { border-color: var(--accent-border); }
.tf-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tf-step {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.tf-card-heading { display: flex; flex-direction: column; gap: 1px; }
.tf-card-title { font-size: 15px; font-weight: 800; color: var(--text); }
.tf-card-desc { font-size: 12px; color: var(--text-faint); }

.tf-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Softer labels in the trade form; other forms keep the uppercase style */
#trade-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
#trade-form .form-row { gap: 14px; margin-bottom: 16px; }
#trade-form .span-2 { grid-column: span 2; }
.tf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tf-dot.entry { background: var(--blue); }
.tf-dot.sl { background: var(--red); }
.tf-dot.exit { background: var(--green); }

#trade-form .dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; font-size: 15px; font-weight: 700; }
#trade-form .emotion-btn { display: inline-flex; align-items: center; gap: 6px; }
.label-hint { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0; }

/* Live trade preview */
.tf-summary {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
}
.tf-summary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.tf-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.tf-sum-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tf-sum-inst { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-sum-meta { font-size: 12px; color: var(--text-faint); }
.tf-sum-pnl {
    padding: 14px 0 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 34px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--text-dim);
}
.tf-sum-pnl.positive { color: var(--green); }
.tf-sum-pnl.negative { color: var(--red); }
.tf-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tf-sum-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tf-sum-cell span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.tf-sum-cell b { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-card-dir.none { color: var(--text-faint); background: rgba(var(--fg-rgb), 0.05); }
#trade-form .tf-actions { margin-top: 0; flex-direction: column; gap: 8px; }
#trade-form .tf-actions .btn-primary, #trade-form .tf-actions .btn-secondary { width: 100%; }
.tf-side-hint { margin: 0; font-size: 12px; color: var(--text-faint); text-align: center; }

.form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group.full-width {
    margin-bottom: 18px;
}

label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

input, select, textarea {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

input:hover, select:hover, textarea:hover {
    border-color: var(--border-hover);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-border-strong);
    box-shadow: 0 0 0 3px var(--accent-bg), 0 0 20px var(--accent-subtle);
    background: var(--bg4);
}

input::placeholder { color: var(--text-faint); }
textarea { resize: vertical; line-height: 1.5; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
textarea::-webkit-scrollbar { width: 4px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
textarea::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* Auto-calculated display */
.auto-calc {
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    letter-spacing: -0.01em;
}

.auto-calc.positive { color: var(--green); }
.auto-calc.negative { color: var(--red); }

/* Number input spinner */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

select option {
    background: var(--bg3);
    color: var(--text);
}

/* Direction buttons */
.btn-group {
    display: flex;
    gap: 6px;
}

.dir-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Asset class buttons */
.asset-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

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

.asset-btn.active[data-asset="futures"] {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
}

.asset-btn.active[data-asset="cfd"] {
    background: var(--purple-bg);
    color: var(--purple);
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}

/* Type buttons */
.type-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

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

.type-btn.active[data-type="live"] {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
}

.type-btn.active[data-type="forward"] {
    background: var(--purple-bg);
    color: var(--purple);
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}

/* Mini / Micro toggle next to the instrument select */
.inst-row { display: flex; gap: 6px; }
.inst-row select { flex: 1; min-width: 0; }
.csize-group { flex-shrink: 0; }
.csize-btn {
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.csize-btn:hover { border-color: var(--border-hover); color: var(--text); }
.csize-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
}

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

.dir-btn.active[data-dir="long"] {
    background: var(--green-bg);
    color: var(--green);
    border-color: rgba(45, 206, 113, 0.3);
    box-shadow: 0 0 20px var(--green-glow);
}

.dir-btn.active[data-dir="short"] {
    background: var(--red-bg);
    color: var(--red);
    border-color: rgba(240, 84, 76, 0.3);
    box-shadow: 0 0 20px var(--red-glow);
}

/* Rating buttons */
.rating-group {
    display: flex;
    gap: 4px;
}

.rating-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rating-btn:hover { border-color: rgba(227, 179, 65, 0.3); color: var(--yellow); }
.rating-btn.active {
    background: rgba(227, 179, 65, 0.12);
    color: var(--yellow);
    border-color: rgba(227, 179, 65, 0.3);
    box-shadow: 0 0 16px rgba(227, 179, 65, 0.1);
}

/* Emotion buttons */
.emotion-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.emotion-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.emotion-btn:hover { border-color: var(--border-hover); color: var(--text); }
.emotion-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
}

/* Screenshot drop zone */
.screenshot-drop {
    border: 2px dashed var(--dashed-border);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    position: relative;
    background: var(--bg2);
}

.screenshot-drop:hover, .screenshot-drop.drag-over {
    border-color: var(--accent-border);
    background: var(--accent-bg);
    box-shadow: 0 0 40px var(--accent-subtle);
}

.screenshot-drop span {
    font-size: 13px;
}

.screenshot-drop input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.screenshot-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.screenshot-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
}

.screenshot-thumb:hover { transform: scale(1.02); border-color: var(--border-hover); }
.screenshot-thumb.dragging { opacity: 0.4; transform: scale(0.95); }
.screenshot-thumb.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }

.screenshot-drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: var(--text-dim);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 2;
}

.screenshot-num {
    position: absolute;
    bottom: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.screenshot-thumb:hover .screenshot-drag-handle { opacity: 1; }

.screenshot-thumb img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.screenshot-thumb .remove-img {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: var(--red);
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.screenshot-thumb:hover .remove-img { opacity: 1; }

/* Form actions */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 20%, transparent);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Same glossy sheen as .new-trade-btn */
.btn-primary::after,
.btn-new-recap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    pointer-events: none;
}

.accounts-header .btn-primary {
    padding: 10px 18px;
    font-size: 13.5px;
}

.btn-secondary {
    background: var(--bg3);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    transform: translateY(-1px);
}

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

/* === TRADES VIEW === */
.trades-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.trades-header .view-title {
    margin-bottom: 0;
}

.filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.filters select {
    font-size: 11px;
    padding: 7px 28px 7px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.filters select:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.filters select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.btn-export {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

/* === TRADES SUMMARY BAR === */
.trades-summary {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    margin-bottom: 16px;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.trades-summary-stat {
    min-width: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.trades-summary-main .trades-summary-value { font-size: 26px; }
.trades-summary-sub { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trades-summary-sub b { font-weight: 700; }
.trades-summary-sub b.positive { color: var(--green); }
.trades-summary-sub b.negative { color: var(--red); }
.trades-summary-bar { height: 5px; margin-top: 2px; border-radius: 3px; background: var(--red-bg); overflow: hidden; }
.trades-summary-bar > div { height: 100%; border-radius: 3px; background: var(--green); }

/* Filters + sort in one toolbar */
.trades-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-faint); }
.trades-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 12px;
}
.trades-toolbar .sort-bar { margin-bottom: 0; }

/* Day group header in the trade lists */
.trade-day-header { display: flex; align-items: baseline; gap: 10px; padding: 14px 4px 4px; }
.trade-day-header:first-child { padding-top: 0; }
.trade-day-label { font-size: 13px; font-weight: 800; color: var(--text); }
.trade-day-count { font-size: 12px; color: var(--text-faint); }
.trade-day-pnl { margin-left: auto; font-size: 13px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.trade-day-pnl.positive { color: var(--green); }
.trade-day-pnl.negative { color: var(--red); }

.trades-summary-stat + .trades-summary-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border);
}

.trades-summary-value {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trades-summary-value.positive { color: var(--green); }
.trades-summary-value.negative { color: var(--red); }

.trades-summary-label {
    font-size: 9px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.btn-export:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-bg);
}

/* === STATS OVERVIEW HERO === */
.stats-overview {
    margin-bottom: 16px;
    container-type: inline-size;
}

/* === STATISTICS LAYOUT (2.2.0) — centered column, 8px spacing scale ===
   Headline KPIs big, everything else quiet; breakdowns as compact tables. */
#stats.view.active {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
#stats .stats-view-header { margin-bottom: 24px; }

.st-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.st-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
}
.st-kpi-label,
.st-sec-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.st-kpi-value {
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-kpi-value.positive, .st-sec-value.positive, .st-money.positive { color: var(--green); }
.st-kpi-value.negative, .st-sec-value.negative, .st-money.negative { color: var(--red); }
.st-kpi-sub {
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-kpi-sub b { color: var(--text-dim); font-weight: 600; }
.st-split {
    display: flex;
    gap: 2px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--bg4);
}
.st-split i { display: block; height: 100%; }
.st-split i.win { background: var(--green); }
.st-split i.loss { background: var(--red); }
.st-split i.be { background: var(--text-faint); }
.st-split + .st-kpi-sub { margin-top: -2px; }

/* Secondary numbers: one quiet strip, no inner boxes */
.st-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 16px 24px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 24px;
}
.st-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-sec-label { font-size: 10px; color: var(--text-faint); }
.st-sec-value {
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.st-sec-value small {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}

/* Cards on this page: calmer (no lift / shimmer), consistent padding */
#stats .stats-card {
    border: 1px solid var(--border);
    padding: 20px 24px;
}
/* the global holo-tilt sets inline transforms — keep this page still */
#stats .stats-card { transform: none !important; box-shadow: none !important; }
#stats .stats-card:hover { border-color: var(--border-hover); }
#stats .stats-card:hover::before { opacity: 0; animation: none; }
#stats .stats-card-title { margin-bottom: 16px; }
#stats .stats-chart-card { margin-bottom: 16px; }
#stats #pnl-chart { border: none; }

.st-breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Compact breakdown table */
.st-table { display: flex; flex-direction: column; }
.st-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 48px 48px 80px minmax(140px, 212px);
    align-items: center;
    column-gap: 10px;
    min-height: 36px;
    padding: 4px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.st-row.st-head {
    min-height: 0;
    padding: 0 0 8px;
    border-top: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.st-row.st-head > span:not(:first-child) { text-align: right; }
.st-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.st-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-best {
    flex-shrink: 0;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 2px 6px;
    border-radius: 4px;
}
.st-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    white-space: nowrap;
}
.st-dim { color: var(--text-faint); font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 12px; }
.st-pnl { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.st-bar {
    flex: 1;
    max-width: 112px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg4);
    overflow: hidden;
}
.st-bar i { display: block; height: 100%; border-radius: 3px; opacity: 0.75; }
.st-bar i.positive { background: var(--green); }
.st-bar i.negative { background: var(--red); }
.st-money {
    flex: 0 0 88px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}
.st-empty { color: var(--text-faint); font-size: 13px; padding: 8px 0; margin: 0; }

/* Results by period: flat table inside its card */
#stats #period-table { border: none; border-radius: 0; background: transparent; }
#stats #period-table th { background: transparent; padding: 0 12px 8px; font-size: 10px; }
#stats #period-table td { padding: 10px 12px; font-variant-numeric: tabular-nums; }
#stats #period-table th:first-child, #stats #period-table td:first-child { padding-left: 0; }
#stats #period-table th:nth-child(n+2):nth-child(-n+7),
#stats #period-table td:nth-child(n+2):nth-child(-n+7) { text-align: right; }
#stats #period-table td.positive, #stats #period-table td.negative { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 600; }
#stats #period-table .pnl-bar { max-width: 120px; margin-left: auto; }

@container (max-width: 960px) {
    .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.so-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--bg2);
    border: 1px solid rgba(var(--fg-rgb), 0.08);
    border-radius: 16px;
    padding: 30px 36px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    perspective: 800px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.so-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.so-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--blue) 4%, transparent) 40%, color-mix(in srgb, var(--purple) 6%, transparent) 50%, rgba(29,185,84,0.04) 60%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.so-hero:hover::after {
    opacity: 1;
    animation: holoShimmer 2s linear infinite;
}

/* === STATS CHART CARD === */
.stats-chart-card {
    margin-bottom: 16px;
}

.chart-container {
    position: relative;
}

.chart-tooltip {
    position: absolute;
    display: none;
    background: var(--bg3);
    border: 1px solid var(--border-hover);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    line-height: 1.5;
}

.chart-tooltip-date {
    color: var(--text-dim);
    font-size: 11px;
}

.chart-tooltip-value {
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

/* === STREAKS === */
.streak-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.streak-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.streak-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--bg4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.streak-icon.positive { background: var(--green-bg); color: var(--green); }
.streak-icon.negative { background: var(--red-bg); color: var(--red); }

.streak-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.streak-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.streak-sub {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 500;
}

.stats-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.stats-card {
    background: var(--bg2);
    border: 1px solid rgba(var(--fg-rgb), 0.06);
    border-radius: 14px;
    padding: 24px 26px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    perspective: 600px;
}

.stats-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--blue) 3%, transparent) 40%, color-mix(in srgb, var(--purple) 5%, transparent) 50%, rgba(29,185,84,0.03) 60%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}

.stats-card:hover::before {
    opacity: 1;
    animation: holoShimmer 2.5s linear infinite;
}

.stats-card:hover {
    border-color: color-mix(in srgb, var(--purple) 15%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 20px color-mix(in srgb, var(--purple) 3%, transparent);
}

.stats-card-title {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

/* Results by Period table */
.period-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.period-header {
    grid-template-columns: 1.2fr 0.7fr 0.8fr 0.8fr 1fr;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.period-row {
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 0.8fr 0.8fr 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    align-items: center;
    transition: background 0.1s;
}

.period-row:last-child {
    border-bottom: none;
}

.period-row:hover {
    background: var(--subtle-bg);
}

.period-label {
    font-weight: 600;
    color: var(--text);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.stats-section h3 {
    margin-bottom: 12px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stats-section.full {
    margin-bottom: 28px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg2);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}

th, td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

th {
    background: var(--bg3);
    color: var(--text-faint);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

tr:last-child td { border-bottom: none; }

tr:hover td {
    background: var(--subtle-bg2);
}

td.positive { color: var(--green); font-weight: 700; }
td.negative { color: var(--red); font-weight: 700; }

#pnl-chart {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* === MODAL === */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(12px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 18px;
    max-width: 1200px;
    width: 95%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px 30px;
    position: relative;
    animation: modalIn 0.25s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.modal-content::-webkit-scrollbar { width: 4px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.modal-content::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: static;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    flex-shrink: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.modal-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--text);
    background: var(--bg4);
    border-color: var(--border-hover);
}

#modal-body h3 {
    margin-bottom: 24px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Trade Detail Modal - Redesigned */
.modal-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.modal-title-row .ti-dir-icon { margin-left: 0; }

/* Trade popup: P&L hero card + date on the right */
.td-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.td-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.td-hero-pnl { display: flex; flex-direction: column; gap: 4px; }
.td-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.td-hero-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.td-date { font-size: 14px; font-weight: 700; color: var(--text); }
.td-time { font-size: 12px; color: var(--text-faint); }
.td-stats { margin-bottom: 14px; }
.modal-instrument {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.modal-dir-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.modal-dir-badge.long { color: var(--green); background: rgba(45,206,113,0.12); }
.modal-dir-badge.short { color: var(--red); background: rgba(240,84,76,0.12); }

.modal-hero-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.modal-pnl-hero {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modal-pnl-big {
    font-size: 40px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--text-dim);
}
.modal-pnl-big.positive { color: var(--green); }
.modal-pnl-big.negative { color: var(--red); }
.modal-pnl-sub {
    font-size: 14px;
    color: var(--text-dim);
    font-weight: 500;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.modal-quick-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}
.modal-quick-stat {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}
.modal-quick-stat .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}
.modal-quick-stat .value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.modal-prices-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.modal-price-card {
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-price-card .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}
.modal-price-card .value {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text);
}

.modal-meta-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.modal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0;
}
.modal-meta-item .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}
.modal-meta-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.modal-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.modal-notes {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 14px;
}

.modal-notes strong {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.modal-notes p {
    color: var(--text);
    line-height: 1.7;
    margin-top: 10px;
    white-space: pre-wrap;
    font-size: 14px;
}

.modal-screenshots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.btn-share-trade {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-share-trade:hover {
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
    color: var(--purple);
    background: var(--purple-bg);
}

.btn-edit-trade {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-edit-trade:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-bg);
}

.modal-ss-wrap {
    position: relative;
    cursor: zoom-in;
    transition: all 0.15s;
}

.modal-ss-wrap:hover img {
    opacity: 0.85;
    transition: opacity 0.15s;
}

.modal-ss-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
    z-index: 2;
    padding: 0;
}

.modal-ss-wrap:hover .modal-ss-copy {
    opacity: 1;
}

.modal-ss-copy:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Screenshot Lightbox */
.ss-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: fadeIn 0.15s ease;
}

.ss-lightbox.active {
    display: flex;
}

.ss-lightbox-toolbar {
    position: absolute;
    top: 20px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10001;
}
.ss-lb-counter { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); margin-right: 6px; }
.ss-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; border-radius: 50%; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; z-index: 10001;
}
.ss-lb-nav:hover { background: rgba(255,255,255,0.15); }
.ss-lb-prev { left: 20px; }
.ss-lb-next { right: 20px; }

.ss-lightbox-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}

.ss-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ss-lightbox-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ss-lightbox-close:hover {
    background: var(--red);
    border-color: var(--red);
}

.ss-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-ss-wrap img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: block;
}

/* === CONFIRM DIALOG === */
.confirm-modal .confirm-dialog {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    width: 360px;
    text-align: center;
    animation: modalIn 0.25s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--red-bg);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.confirm-dialog h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.confirm-dialog p {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 24px;
    line-height: 1.4;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.btn-confirm-cancel {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-confirm-cancel:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.btn-confirm-ok {
    flex: 1;
    padding: 10px 16px;
    background: var(--red);
    border: none;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-confirm-ok:hover {
    opacity: 0.85;
    box-shadow: 0 4px 20px var(--red-glow);
}

/* === TOAST === */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 14px 22px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    z-index: 99999;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }

.toast.undo-toast {
    border-left: 3px solid var(--red);
    display: flex;
    align-items: center;
    gap: 14px;
    animation: toastIn 0.3s ease;
}

.undo-btn {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.undo-btn:hover {
    background: var(--accent);
    color: var(--bg);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-8px); }
}

/* XP Toast */
.xp-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--purple) 15%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 14px;
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);
    backdrop-filter: blur(16px);
}
.xp-toast-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.xp-toast-amount {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.xp-toast-reason {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    opacity: 0.85;
}

/* Level Up Toast */
.levelup-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 48px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 20%, transparent), color-mix(in srgb, var(--purple) 25%, transparent));
    border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
    border-radius: 20px;
    z-index: 99999;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 16px 64px color-mix(in srgb, var(--purple) 30%, transparent), 0 0 80px color-mix(in srgb, var(--blue) 10%, transparent);
    backdrop-filter: blur(20px);
}
.levelup-toast-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.levelup-toast-icon {
    font-size: 36px;
    animation: levelupBounce 0.6s ease 0.3s;
}
.levelup-toast-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent); /* plain accent, no gradient text */
    letter-spacing: 1px;
}
.levelup-toast-level {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.8;
}
@keyframes levelupBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Economic Calendar */
.econ-cal-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.econ-cal-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.15s;
}
.econ-cal-today {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.05);
}
.econ-cal-impact {
    width: 6px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}
.econ-cal-high { background: var(--red); }
/* ForexFactory's folder colours: red, orange, yellow, grey */
.econ-cal-medium { background: #f28c38; }
.econ-cal-low { background: var(--yellow, #fbbf24); }
.econ-cal-holiday { background: var(--text-faint); }
.econ-cal-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.econ-cal-name { font-size: 13px; font-weight: 600; color: var(--text); }
.econ-cal-meta { font-size: 11px; color: var(--text-faint); }
.econ-cal-countdown {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(var(--fg-rgb), 0.04);
    min-width: 90px;
    text-align: center;
}
.econ-cal-soon {
    color: var(--red);
    background: rgba(240,84,76,0.08);
    animation: levelPulse 2s ease-in-out infinite;
}
.econ-cal-passed {
    opacity: 0.4;
}
.econ-cal-done {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(var(--fg-rgb), 0.03);
    flex-shrink: 0;
}
/* Market status */
.econ-cal-market {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}
.econ-cal-market-open {
    background: rgba(45,206,113,0.06);
    border: 1px solid rgba(45,206,113,0.15);
    color: var(--green);
}
.econ-cal-market-closed {
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid var(--border);
    color: var(--text-faint);
}
.econ-cal-market-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.econ-cal-market-dot.open {
    background: var(--green);
    box-shadow: 0 0 6px rgba(45,206,113,0.4);
    animation: levelPulse 2s ease-in-out infinite;
}
.econ-cal-market-dot.closed { background: var(--text-faint); opacity: 0.5; }
.econ-cal-market-opens,
.econ-cal-market-closes {
    margin-left: auto;
    font-size: 12px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.7;
}

.econ-cal-clear {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 16px;
    background: rgba(45,206,113,0.04);
    border: 1px solid rgba(45,206,113,0.1);
    border-radius: 10px;
}
.econ-cal-clear-icon { width: 32px; height: 32px; color: var(--green); opacity: 0.7; }
.econ-cal-clear-title { font-size: 14px; font-weight: 700; color: var(--green); }
.econ-cal-clear-sub { font-size: 11px; color: var(--text-faint); }

/* Financial Juice News */
[data-widget="fj-news"] .section-header { margin-bottom: 4px; }
.fj-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 6px rgba(239,68,68,0.5);
    animation: levelPulse 2s ease-in-out infinite;
    margin-left: 6px;
}
.fj-news-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 320px; overflow-y: auto;
    scrollbar-width: none; position: relative;
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.fj-news-list::-webkit-scrollbar { width: 0; display: none; }
.fj-news-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 12px;
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.15s;
}
.fj-news-item:hover { background: rgba(var(--fg-rgb), 0.04); }
.fj-news-item.fj-critical {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.06);
}
.fj-news-item.fj-critical .fj-news-headline { color: var(--red); font-weight: 700; }
.fj-news-impact {
    width: 6px; height: 24px; border-radius: 3px; flex-shrink: 0; margin-top: 1px;
}
.fj-impact-critical { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.fj-impact-normal { background: var(--text-faint); opacity: 0.3; }
.fj-news-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fj-news-headline {
    font-size: 12px; font-weight: 500; color: var(--text);
    line-height: 1.35; word-wrap: break-word;
}
.fj-news-time { font-size: 10px; color: var(--text-faint); }
.fj-news-badge {
    font-size: 9px; font-weight: 700; color: var(--red);
    background: rgba(239,68,68,0.12); padding: 2px 6px;
    border-radius: 4px; flex-shrink: 0; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fj-loading, .fj-error {
    font-size: 12px; color: var(--text-faint);
    padding: 16px; text-align: center;
}

/* Voice Notes */
.vn-recorder {
    display: flex; align-items: center; gap: 8px;
}
.vn-record-btn {
    display: flex; align-items: center; gap: 6px;
    background: rgba(var(--fg-rgb), 0.03); border: 1px solid var(--border);
    color: var(--text-dim); padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.vn-record-btn:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.06); }
.vn-recording {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.3);
}
.vn-recording-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); animation: levelPulse 1s ease-in-out infinite;
}
.vn-recording-time {
    font-size: 13px; font-weight: 700; color: var(--red);
    font-family: var(--num-font); font-variant-numeric: tabular-nums; min-width: 36px;
}
.vn-stop-btn {
    display: flex; align-items: center; gap: 4px;
    background: rgba(239,68,68,0.15); border: none;
    color: var(--red); padding: 5px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.vn-stop-btn:hover { background: rgba(239,68,68,0.25); }
.vn-preview {
    display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.vn-item {
    display: flex; align-items: center; gap: 8px;
}
.vn-player {
    display: flex; align-items: center; gap: 8px;
    background: rgba(var(--fg-rgb), 0.03); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 12px; flex: 1;
}
.vn-play-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.vn-play-btn:hover { opacity: 0.85; transform: scale(1.05); }
.vn-play-btn svg { color: #fff; }
.vn-waveform {
    flex: 1; height: 28px; display: flex; align-items: center; gap: 1px;
    cursor: pointer;
}
.vn-waveform-bar {
    flex: 1; min-width: 0; border-radius: 2px; background: var(--text-faint); opacity: 0.3;
    transition: opacity 0.15s, background 0.15s;
}
.vn-waveform-bar.active { opacity: 1; background: var(--accent); }
.vn-duration {
    font-size: 11px; color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.vn-remove-btn {
    background: none; border: none; color: var(--text-faint);
    cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.15s;
}
.vn-remove-btn:hover { color: var(--red); background: rgba(239,68,68,0.1); }
.vn-vol-wrap {
    position: relative; flex-shrink: 0;
}
.vn-vol-btn {
    background: none; border: none; color: var(--text-faint);
    cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.15s;
    display: flex; align-items: center;
}
.vn-vol-btn:hover { color: var(--text); }
.vn-vol-popup {
    display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 8px; margin-bottom: 6px;
    flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.vn-vol-popup.open { display: flex; }
.vn-vol-slider {
    -webkit-appearance: none; appearance: none;
    width: 3px; height: 80px; border-radius: 2px;
    background: var(--border); outline: none;
    cursor: pointer; writing-mode: vertical-lr;
    direction: rtl;
}
.vn-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
}
.vn-vol-pct {
    font-size: 9px; color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.modal-voice-note {
    margin-top: 12px; padding: 12px 14px;
    background: rgba(var(--fg-rgb), 0.02); border: 1px solid var(--border);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.modal-vn-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px;
}

/* Changelog in settings */
.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 4px 0;
}
.changelog-list::-webkit-scrollbar { width: 4px; }
.changelog-list::-webkit-scrollbar-track { background: transparent; }
.changelog-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.changelog-version {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.changelog-version:last-child { border-bottom: none; padding-bottom: 0; }
.changelog-version-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.changelog-ver-badge {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent-border);
}
.changelog-ver-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.changelog-changes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.4;
}
.changelog-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0.3px;
}
.changelog-badge.new { background: rgba(45,206,113,0.12); color: var(--green); }
.changelog-badge.improved { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.changelog-badge.fix { background: rgba(234,179,8,0.12); color: var(--yellow); }

/* === PERIOD SECTION (Week/Month) === */
.period-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.period-toggle {
    display: flex;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    padding: 2px;
    gap: 2px;
}

.period-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 7px 18px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    border-radius: 6px;
}

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

.period-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

#period-table .pnl-bar-cell {
    position: relative;
    min-width: 100px;
}

.pnl-bar {
    height: 4px;
    border-radius: 2px;
    margin-top: 6px;
    opacity: 0.7;
}

.pnl-bar.positive { background: var(--green); }
.pnl-bar.negative { background: var(--red); }

/* === GALLERY === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.gallery-card {
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gallery-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.gallery-card:hover .gallery-card-img {
    transform: scale(1.03);
}

.gallery-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.gallery-card-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, var(--card, var(--bg2)), transparent);
    pointer-events: none;
}

.gallery-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card-body {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-card-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-card-instrument {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
    letter-spacing: -0.01em;
}

.gallery-card-dir {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
}

.gallery-card-dir.long { color: var(--green); background: var(--green-bg); }
.gallery-card-dir.short { color: var(--red); background: var(--red-bg); }

.gallery-card-date {
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.gallery-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.gallery-card-pnl {
    font-weight: 800;
    font-size: 17px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.gallery-card-pnl.positive { color: var(--green); }
.gallery-card-pnl.negative { color: var(--red); }

.gallery-card-rr {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.gallery-card-rr.positive { color: var(--green); }
.gallery-card-rr.negative { color: var(--red); }

.gallery-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

.gallery-card-badge .result-badge {
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-card-count {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    z-index: 3;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-card-count::before {
    content: '📷 ';
}

.gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 20px;
    color: var(--text-dim);
}

/* === TAGS === */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    align-items: center;
    transition: all 0.2s ease;
}

.tag-input-container:focus-within {
    border-color: var(--accent-border-strong);
    box-shadow: 0 0 0 3px var(--accent-bg);
    background: var(--bg4);
}

.tag-input-container input {
    background: none;
    border: none;
    padding: 4px 0;
    flex: 1;
    min-width: 100px;
    font-size: 13px;
    color: var(--text);
}

.tag-input-container input:focus {
    outline: none;
    box-shadow: none;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--purple-bg);
    color: var(--purple);
    border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    animation: viewIn 0.2s ease;
}

.tag-pill .tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.tag-pill .tag-remove:hover {
    opacity: 1;
}

/* === SORT BAR === */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.sort-bar-label {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 600;
    margin-right: 2px;
}

.sort-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-faint);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sort-btn:hover {
    color: var(--text-dim);
    background: var(--bg3);
}

.sort-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
}

.sort-arrow {
    font-size: 9px;
    line-height: 1;
}

/* === CALENDAR === */
#calendar.view.active {
    display: flex;
    flex-direction: column;
}

.calendar-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-nav h3 {
    font-size: 22px;
}

.cal-nav-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-nav-btn:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-subtle);
    transform: scale(1.05);
}

.cal-today-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 7px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 4px;
}

.cal-today-btn:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-subtle);
}

.calendar-month-stats { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.cal-mstat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 96px;
    padding: 8px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.cal-mstat-label { font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-mstat-value { font-size: 15px; font-weight: 800; color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.cal-mstat-value.positive { color: var(--green); }
.cal-mstat-value.negative { color: var(--red); }

.cal-stat-badge {
    padding: 5px 14px;
    border-radius: 8px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
}

.cal-stat-badge.positive { background: var(--green-bg); color: var(--green); }
.cal-stat-badge.negative { background: var(--red-bg); color: var(--red); }

.cal-stat-days {
    background: var(--bg3);
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dim);
}

.calendar-layout {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;
}

.calendar-container {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto; /* weekday header row stays compact, day rows share the rest */
    grid-auto-rows: 1fr;
    gap: 4px;
    flex: 1;
    min-height: 0;
}

.cal-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 0 10px;
}

.cal-day {
    background: var(--bg3);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.cal-day:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.cal-day.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    opacity: 0.3;
}

.cal-day.empty:hover {
    transform: none;
    box-shadow: none;
}

.cal-day.positive {
    background: var(--green-bg);
    border-color: rgba(45, 206, 113, 0.15);
}

.cal-day.positive:hover {
    border-color: rgba(45, 206, 113, 0.35);
    box-shadow: 0 6px 20px rgba(45, 206, 113, 0.1);
}

.cal-day.negative {
    background: var(--red-bg);
    border-color: rgba(240, 84, 76, 0.15);
}

.cal-day.negative:hover {
    border-color: rgba(240, 84, 76, 0.35);
    box-shadow: 0 6px 20px rgba(240, 84, 76, 0.1);
}

.cal-day.today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-day.today:hover {
    box-shadow: inset 0 0 0 2px var(--accent), 0 6px 20px rgba(0,0,0,0.25);
}

.cal-day-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 4px;
}
.cal-day.today .cal-day-num { color: var(--accent); }

.cal-day.positive .cal-day-num,
.cal-day.negative .cal-day-num {
    color: var(--text-dim);
}

.cal-day-pnl {
    font-size: 15px;
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.cal-day-pnl.positive { color: var(--green); }
.cal-day-pnl.negative { color: var(--red); }
.cal-day-pnl.flat { color: var(--text-dim); }
.cal-day.flat { background: var(--bg4); border-color: var(--border); }

.cal-day-rr {
    font-size: 10px;
    font-weight: 600;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
.cal-day-rr.positive { color: var(--green); }
.cal-day-rr.negative { color: var(--red); }

.cal-day-info {
    font-size: 10px;
    color: var(--text-faint);
    font-weight: 500;
    margin-top: auto;
    line-height: 1.4;
}

.cal-day-screenshot {
    position: absolute;
    top: 7px;
    right: 8px;
    color: var(--text-faint);
    opacity: 0.4;
}

/* Weekly summary sidebar */
.calendar-weeks {
    width: 120px;
    display: grid;
    gap: 4px;
    flex-shrink: 0;
    padding: 21px 0;
}

.cal-week-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-week-card:hover {
    border-color: var(--border-hover);
    transform: translateX(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cal-week-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-week-pnl {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.cal-week-pnl.positive { color: var(--green); }
.cal-week-pnl.negative { color: var(--red); }
.cal-week-pnl.neutral { color: var(--text-faint); }

.cal-week-days {
    font-size: 10px;
    color: var(--text-faint);
    font-weight: 500;
}

/* Calendar day selected */
.cal-day.selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Calendar Day Detail Panel */
.cal-day-detail {
    margin-top: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    animation: viewFadeUp 0.25s ease;
}

.cal-day-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}

.cal-day-detail-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.cal-detail-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cal-detail-stat {
    font-size: 13px;
    color: var(--text-faint);
}
.cal-detail-stat.positive strong { color: var(--green); }
.cal-detail-stat.negative strong { color: var(--red); }

.cal-detail-close {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
}
.cal-detail-close:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.05); }

.cal-detail-empty {
    text-align: center;
    color: var(--text-faint);
    padding: 24px;
    font-size: 14px;
}

/* === WEEKLY REVIEW === */
/* Calm, centered dashboard: max width, one 16px grid gap, big headline numbers, quiet supporting text */
#weekly-review > .wr-header,
#weekly-review > .wr-content {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.wr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.wr-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wr-week-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    min-width: 180px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wr-content {
    animation: viewFadeUp 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Summary cards */
.wr-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wr-hero-card {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.wr-hero-label,
.wr-section-title,
.wr-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.wr-hero-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wr-hero-value.positive { color: var(--green); }
.wr-hero-value.negative { color: var(--red); }
.wr-hero-sub { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wr-hero-bar { height: 4px; border-radius: 2px; background: var(--red-bg); overflow: hidden; margin: 6px 0 4px; }
.wr-hero-bar > div { height: 100%; border-radius: 2px; background: var(--green); }

/* Supporting numbers at the bottom of each summary card */
.wr-kvs {
    display: flex;
    gap: 24px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.wr-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wr-kv-label { font-size: 11px; color: var(--text-dim); }
.wr-kv-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wr-kv-val.positive { color: var(--green); }
.wr-kv-val.negative { color: var(--red); }

/* Sections */
.wr-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    min-width: 0;
}
.wr-section-plain { background: none; border: none; padding: 8px 0 0; }
.wr-section-title { margin: 0 0 16px 0; }

/* Daily P&L: one column per weekday */
.wr-days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
}
.wr-dcol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
/* Zero-baseline plot: .wr-dcol-pos (bars grow up) above the line, .wr-dcol-neg (bars grow down) below.
   Region heights come from JS so all columns share one baseline and one $ scale. */
.wr-dcol-plot {
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.wr-dcol-pos, .wr-dcol-neg { position: relative; display: flex; }
.wr-dcol-pos { align-items: flex-end; }
.wr-dcol-neg { align-items: flex-start; }
/* Baseline: drawn across the column gap so it reads as one continuous zero line */
.wr-dcol-pos::after {
    content: '';
    position: absolute;
    left: 0;
    right: -16px;
    bottom: -1px;
    height: 1px;
    background: var(--border-hover);
    z-index: 1;
}
.wr-dcol:last-child .wr-dcol-pos::after { right: 0; }
.wr-dcol-bar { width: 100%; max-width: 56px; opacity: 0.85; transition: height 0.4s ease; }
.wr-dcol-bar.up { border-radius: 4px 4px 0 0; }
.wr-dcol-bar.down { border-radius: 0 0 4px 4px; }
.wr-dcol-bar.up { background: var(--green); }
.wr-dcol-bar.down { background: var(--red); }
.wr-dcol-label { display: flex; align-items: baseline; gap: 6px; }
.wr-dcol-day { font-size: 13px; font-weight: 700; color: var(--text); }
.wr-dcol-date { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wr-dcol-pnl {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wr-dcol-pnl.positive { color: var(--green); }
.wr-dcol-pnl.negative { color: var(--red); }
.wr-dcol-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.wr-dcol.is-empty .wr-dcol-day,
.wr-dcol.is-empty .wr-dcol-pnl { color: var(--text-dim); font-weight: 600; }
.wr-dcol.is-empty .wr-dcol-meta { opacity: 0.7; }

/* Breakdown tables */
.wr-breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
/* Reset the global table look (bg, border, rounded clip) — these tables sit flat inside their card */
.wr-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.wr-table tr:hover td { background: none; }
.wr-table th {
    background: none;
    text-align: right;
    padding: 0 0 12px;
    width: 64px;
    border-bottom: 1px solid var(--border);
}
.wr-table th:first-child { text-align: left; width: auto; }
.wr-table th:last-child { width: 104px; }
.wr-table td {
    padding: 10px 0;
    text-align: right;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.wr-table tr:last-child td { border-bottom: none; padding-bottom: 0; }
.wr-table .wr-td-name {
    text-align: left;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
}
.wr-table .wr-td-pnl { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.wr-table .wr-td-pnl.positive { color: var(--green); }
.wr-table .wr-td-pnl.negative { color: var(--red); }

/* Recaps as cards */
.wr-recaps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}
.wr-recap-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.wr-recap-card:hover { border-color: var(--border-hover); }
.wr-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wr-recap-date { font-size: 13px; font-weight: 700; color: var(--text); }
.wr-recap-head .recap-mood-badge { padding: 3px 8px; }
.wr-recap-text {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.wr-recap-card.expanded .wr-recap-text { -webkit-line-clamp: unset; display: block; }
.wr-muted { opacity: 0.7; }

/* Empty week */
.wr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 56px 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-dim);
}
.wr-empty svg { opacity: 0.6; margin-bottom: 8px; }
.wr-empty-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.wr-empty-sub { margin: 0; font-size: 13px; }

@media (max-width: 1280px) {
    .wr-hero-value { font-size: 28px; }
    .wr-hero-card, .wr-section { padding: 16px 20px; }
    .wr-days { gap: 8px; }
    .wr-dcol-pnl { font-size: 14px; }
}
@media (max-width: 900px) {
    .wr-hero { grid-template-columns: minmax(0, 1fr); }
}

/* === APP BACKGROUND (Settings > Background): fixed behind every view === */
main > .app-bg-image {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

#dashboard { position: relative; }
#dashboard > * { position: relative; z-index: 1; }

.dash-bg-settings { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.dash-bg-preview {
    width: 112px;
    height: 60px;
    flex-shrink: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.dash-bg-placeholder { color: var(--text-faint); font-size: 12px; }

.dash-bg-opacity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-faint);
}
.dash-bg-opacity-row input[type="range"] { flex: 1; accent-color: var(--accent); }
#dash-bg-opacity-val { min-width: 32px; text-align: right; }

/* === PROFILE AUTH & SIGNED IN === */
.profile-auth-section { margin-bottom: 16px; }
.profile-auth-section .fb-auth-card { text-align: left; max-width: 100%; }

.profile-signed-in {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 16px;
}
.profile-signed-in-text { font-size: 13px; color: var(--green); font-weight: 600; flex: 1; }

/* === PROFILE PAGE === */
/* Profile Banner */
.profile-banner {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, var(--accent-bg), color-mix(in srgb, var(--purple) 18%, transparent));
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    overflow: hidden;
}
.profile-banner-edit {
    position: absolute;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.profile-banner:hover .profile-banner-edit { opacity: 1; }

.profile-hero {
    align-items: flex-end;
    gap: 20px;
    background: var(--bg2);
    margin-top: -1px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
/* Big avatar overlapping the banner, Discord-style */
.profile-hero .profile-avatar {
    margin-top: -56px;
}

.profile-avatar-editable { cursor: pointer; position: relative; overflow: hidden; }
.profile-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
    color: #fff;
}
.profile-avatar-editable:hover .profile-avatar-overlay { opacity: 1; }

.profile-name { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; }

.profile-edit-name-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
}
.profile-edit-name-btn:hover { color: var(--accent); background: rgba(var(--fg-rgb), 0.05); }

.profile-name-edit {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    background: var(--bg3);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 4px 10px;
    width: 200px;
    outline: none;
    margin-bottom: 2px;
}

.profile-level { font-size: 13px; color: var(--accent); font-weight: 600; }

.profile-xp-bar {
    height: 6px;
    background: var(--bg4);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0 4px;
}
.profile-xp-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s;
}
.profile-xp-text { font-size: 11px; color: var(--text-faint); }

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) { .profile-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.profile-stat {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.profile-stat-val { font-size: 20px; font-weight: 800; color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.profile-stat-val.positive { color: var(--green); }
.profile-stat-val.negative { color: var(--red); }
.profile-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-faint); letter-spacing: 0.5px; }

/* Banner, hero and stats span the page; the cards below use the Settings layout
   (.settings-card / .settings-row): two columns above 1500px, one below */
#profile-content { display: flex; flex-direction: column; }
.profile-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "profile notifs" "socials notifs" "xp xp";
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    align-items: start;
}
.profile-card-profile { grid-area: profile; }
.profile-card-socials { grid-area: socials; }
.profile-card-notifs { grid-area: notifs; }
.profile-card-xp { grid-area: xp; }
@media (max-width: 1500px) {
    .profile-settings-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "profile" "socials" "notifs" "xp";
        grid-template-rows: auto;
    }
}

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

.profile-status-row { display: flex; align-items: center; gap: 8px; flex: 0 1 360px; min-width: 0; }
.profile-status-input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; }

/* Name color: same swatches as the accent picker in Settings */
.profile-namecolor-picker { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; gap: 6px; }
.namecolor-swatch {
    cursor: pointer; position: relative; padding: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.namecolor-swatch:hover { transform: scale(1.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.namecolor-swatch.active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); }
.namecolor-swatch.active::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.namecolor-custom {
    width: 28px; height: 28px; padding: 0; margin-left: 4px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer;
}
.namecolor-custom::-webkit-color-swatch-wrapper { padding: 2px; }
.namecolor-custom::-webkit-color-swatch { border: none; border-radius: 6px; }

.profile-social-label { display: inline-flex; align-items: center; gap: 10px; }
.profile-social-icon { color: var(--text-dim); flex-shrink: 0; }
.profile-social-input { flex: 0 1 280px; min-width: 0; padding: 9px 12px; font-size: 13px; }

.profile-notif-sound-pick { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-sound-select { min-width: 150px; padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.settings-row .btn-secondary.notif-preview-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 11px; }

/* Whole row toggles the switch; it's a <label>, which is uppercase by default */
label.profile-toggle-row {
    cursor: pointer;
    user-select: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.profile-toggle-row input { display: none; }
.toggle-slider {
    width: 42px; height: 24px; background: var(--bg4); border: 1px solid var(--border);
    border-radius: 12px; position: relative; flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.toggle-slider::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: var(--text-dim); border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.profile-toggle-row:hover .toggle-slider { border-color: var(--border-hover); }
.profile-toggle-row input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.profile-toggle-row input:checked + .toggle-slider::after { background: #fff; transform: translateX(18px); }

.profile-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-badge {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.15s;
}
.profile-badge.unlocked {
    background: rgba(var(--fg-rgb), 0.05);
    border: 1px solid rgba(var(--fg-rgb), 0.08);
}
.profile-badge.unlocked:hover { transform: scale(1.15); }
.profile-badge.locked {
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid rgba(var(--fg-rgb), 0.03);
    filter: grayscale(1) opacity(0.3);
}

/* === FIREBASE AUTH GATE === */
.fb-auth-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.fb-auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.fb-auth-card h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.fb-auth-card p { font-size: 13px; color: var(--text-faint); margin-bottom: 20px; }

.fb-auth-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 8px;
    outline: none;
}
.fb-auth-input:focus { border-color: var(--accent); }

.fb-auth-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    cursor: pointer;
}

.fb-auth-error {
    display: block;
    color: var(--red);
    font-size: 12px;
    margin-top: 8px;
    min-height: 16px;
}

/* === CHAT === */
#chat.view.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    overflow: hidden;
    margin: -32px -36px;
    padding: 0;
    width: calc(100% + 72px);
}
/* Hide main scrollbar when chat is active */
main:has(#chat.view.active) {
    overflow: hidden;
}

.chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

/* Members sidebar */
.chat-members {
    width: 220px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 55%, transparent);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.chat-members::-webkit-scrollbar { width: 0; }
.chat-layout::-webkit-scrollbar { width: 0; }
#chat::-webkit-scrollbar { width: 0; }

/* Section labels: "● ONLINE [3]" and "OFFLINE [5]" */
.chat-members-header,
.chat-members-divider {
    display: flex;
    align-items: center;
}
.chat-members-header::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.chat-members-count {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--bg4);
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0;
}

.chat-members-list {
    padding: 0 8px 12px;
    display: flex;
    flex-direction: column;
}

.chat-member {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: 10px;
    transition: background 0.12s, opacity 0.12s;
}
.chat-member:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.chat-member-avatar-wrap { position: relative; flex-shrink: 0; width: 32px; height: 32px; }
.chat-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    position: relative;
}
.chat-member-avatar-letter {
    background: var(--bg4);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}
/* Presence dot sitting on the avatar */
.chat-member-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
    border: 2.5px solid var(--bg2);
}
.chat-member-status.idle { background: var(--yellow); }
.chat-member-status.dnd { background: #ef4444; }
.chat-member-status.offline { background: var(--bg5); }

.chat-member-info { display: flex; flex-direction: column; min-width: 0; }
.chat-member-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "typing…" under the name while that person is writing in chat */
.chat-member-typing {
    display: none;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--accent);
}
.chat-member.is-typing .chat-member-typing { display: flex; }
.chat-member-typing i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    animation: memberTyping 1.2s ease-in-out infinite;
}
.chat-member-typing i:first-of-type { margin-left: 2px; }
.chat-member-typing i:nth-of-type(2) { animation-delay: 0.15s; }
.chat-member-typing i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes memberTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.chat-member-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(45,206,113,0.4);
}
.chat-member-dot.offline { background: var(--text-faint); box-shadow: none; }
.chat-member-dot.idle { background: var(--yellow); box-shadow: 0 0 4px rgba(227,179,65,0.3); }
.chat-member-dot.dnd { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.3); }
.chat-member-mobile { margin-left: auto; flex-shrink: 0; color: var(--text-faint); }
.chat-member.offline { opacity: 0.45; }
.chat-member.offline .chat-member-avatar { filter: grayscale(1); }
.chat-member.offline:hover { opacity: 0.8; }
.chat-member.idle .chat-member-name { opacity: 0.8; }

/* === Voice channels (top of the member panel) === */
.voice-section[hidden], .voice-panel[hidden], #voice-settings-card[hidden] { display: none !important; }
.voice-section { padding: 10px 8px 6px; border-bottom: 1px solid var(--border); }
.voice-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.voice-channel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.voice-channel-row svg { flex-shrink: 0; }
.voice-channel-row:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.voice-channel-row:disabled { cursor: not-allowed; opacity: 0.5; }
.voice-channel.active .voice-channel-row { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.voice-channel.active .voice-channel-row svg { color: var(--accent); }
.voice-channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-channel-count { font-size: 11px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.voice-channel-members { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 18px; }
.voice-member {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px;
    cursor: pointer;
}
.voice-member:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.voice-member-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: box-shadow 0.1s;
}
.voice-member-avatar-letter { display: flex; align-items: center; justify-content: center; background: var(--bg4); font-size: 10px; font-weight: 700; color: var(--text-dim); }
.voice-member-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-member.speaking .voice-member-name { color: var(--text); }
.voice-member-flag { display: flex; flex-shrink: 0; color: var(--red); opacity: 0.85; }
.voice-member-warn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

/* Speaker icon next to people in voice, in the Online list */
.chat-member.in-voice .chat-member-info { flex: 1; }
.chat-member.in-voice::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    background: var(--green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.47 4.47 0 0 0 2.5-4zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Voice Connected panel (sidebar, above New Trade) */
.voice-panel {
    margin: 0 0 10px;
    padding: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg3) 85%, transparent);
    border: 1px solid var(--border);
}
.voice-panel-top { display: flex; align-items: center; gap: 9px; }
.voice-panel-signal { display: flex; flex-shrink: 0; color: var(--green); }
.voice-panel-signal.warn { color: var(--yellow); }
.voice-panel-signal.bad { color: var(--red); }
.voice-panel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.voice-panel-status { font-size: 12.5px; font-weight: 700; color: var(--green); }
.voice-panel-status.warn { color: var(--yellow); }
.voice-panel-room { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-actions { display: flex; gap: 6px; margin-top: 9px; }
.voice-panel-btn {
    flex: 1;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--bg4);
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.voice-panel-btn:hover { background: var(--bg5); color: var(--text); }
.voice-panel-btn.on { color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--bg4)); }
.voice-panel-top .voice-panel-btn { flex: none; width: 30px; }
.voice-panel-btn.danger:hover { color: #fff; background: var(--red); }

.voice-panel-btn.live { color: #fff; background: var(--green); }
.voice-panel-btn.live:hover { color: #fff; background: color-mix(in srgb, var(--green) 80%, #000); }

/* Screen sharing: LIVE in the channel list, the picker and the floating viewer */
/* The Screen badge: a monitor with a pulsing dot on the app's accent gradient */
.voice-member-live, .screen-viewer-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 7px 2px 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--purple) 28%, transparent));
    color: var(--text);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}
.voice-member-live { cursor: pointer; transition: border-color 0.12s, filter 0.12s; }
.voice-member-live:hover { border-color: var(--accent); filter: brightness(1.2); }
.voice-member-live svg, .screen-viewer-live svg { flex-shrink: 0; color: var(--accent); }
.wj-screen-dot { position: relative; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.wj-screen-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--accent); animation: wjScreenPulse 1.8s ease-out infinite; }
@keyframes wjScreenPulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.screen-picker-modal { max-width: 760px; display: flex; flex-direction: column; }
.screen-picker-modal .admin-modal-header { gap: 16px; }
.screen-picker-modal .admin-modal-title { flex: 1; }
.screen-picker-body { height: min(440px, calc(100vh - 220px)); }
/* In the browser the browser lists the screens, so this only asks for quality and sound */
.screen-picker-web { max-width: 560px; }
.screen-picker-web .screen-picker-body { height: auto; padding: 18px 24px 6px; }
.screen-picker-hint { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; }
.screen-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.screen-source {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--bg3);
    color: var(--text-dim);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.screen-source[hidden] { display: none; }
.screen-source:hover { background: var(--bg4); color: var(--text); }
.screen-source.selected { border-color: var(--accent); color: var(--text); }
.screen-source-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; overflow: hidden; }
.screen-source-thumb img { width: 100%; height: 100%; object-fit: contain; }
.screen-source-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; }
.screen-source-name img { width: 16px; height: 16px; flex-shrink: 0; }
.screen-source-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-picker-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-faint); }
.screen-picker-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); }
.screen-picker-audio { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); cursor: pointer; user-select: none; }
.screen-picker-audio input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.screen-picker-audio + .screen-picker-quality { margin-left: 4px; }
.screen-picker-quality { margin-right: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg3); color: var(--text); font: inherit; font-size: 13px; }
.screen-viewer {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1001;
    width: 560px;
    height: 360px;
    min-width: 320px;
    min-height: 220px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-hover);
    border-radius: 14px;
    background: #000;
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    overflow: hidden;
    resize: both;
}
.screen-viewer.max { inset: 48px 48px 48px 48px !important; width: auto; height: auto; resize: none; }
.screen-viewer:fullscreen { border: none; border-radius: 0; }
.screen-viewer-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; background: var(--bg2); cursor: move; user-select: none; }
.screen-viewer:fullscreen .screen-viewer-head { display: none; }

.screen-viewer-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-viewer-tabs { display: none; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.screen-viewer.multi .screen-viewer-tabs { display: flex; }
.screen-viewer.multi .screen-viewer-name { display: none; }
.screen-viewer-tab { flex-shrink: 0; max-width: 140px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.screen-viewer-tab:hover { color: var(--text); background: var(--bg4); }
.screen-viewer-tab.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.screen-viewer-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; }
.screen-viewer-btn:hover { background: var(--bg4); color: var(--text); }
.screen-viewer-body { position: relative; flex: 1; min-height: 0; }
.screen-viewer-body video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.screen-viewer-wait { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 13px; }
.screen-viewer.waiting .screen-viewer-wait { display: flex; }

/* Right-click someone in voice: their volume */
.voice-vol-pop {
    position: fixed;
    z-index: 1002;
    width: 210px;
    padding: 10px 12px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.voice-mod-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.voice-mod-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.voice-mod-btn:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.voice-mod-btn.on { color: var(--red); }
.voice-member-flag.forced { padding: 2px; border-radius: 5px; background: var(--red); color: #fff; opacity: 1; }
.voice-panel-btn.forced { color: #fff; background: var(--red); cursor: not-allowed; }
.voice-vol-pop-name { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--text); }
.voice-vol-pop-row { display: flex; align-items: center; gap: 8px; }
.voice-vol-pop-row input { flex: 1; }
.voice-vol-pop-row span { width: 36px; font-size: 11px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

/* Voice & Audio settings */
.voice-device-select { width: 240px; max-width: 100%; }
.voice-mic-test { display: flex; align-items: center; gap: 10px; }
.voice-mic-meter { width: 150px; height: 8px; border-radius: 4px; background: var(--bg4); overflow: hidden; }
.voice-mic-meter-fill { width: 0; height: 100%; border-radius: 4px; background: var(--green); transition: width 0.06s linear, background 0.1s; }
.voice-mic-meter-fill.gated { background: var(--text-faint); }
#voice-strength-row[hidden] { display: none; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 14px 16px;
}
/* A custom app background shows through the whole app: calm it down behind the messages so text stays readable */
.chat-main { background: color-mix(in srgb, var(--bg) 62%, transparent); }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 3px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 18%, transparent); }

.chat-msg {
    max-width: 100%;
    background: none;
    border: none;
    align-self: stretch; /* full-width rows so hover / highlight spans the whole line */
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 0;
    border-radius: 10px;
    transition: background 0.12s;
}
/* The message whose right-click menu is open */
.chat-msg.chat-msg-ctx-active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: inset 2px 0 0 var(--accent);
}
.chat-msg-me {
    align-self: stretch;
    flex-direction: row;
}

.chat-msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    margin-top: 2px;
}
.chat-msg-avatar-letter {
    background: var(--bg4);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
}

/* System messages (chat cleared, etc.) */
.chat-system-msg { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-faint); font-size: 11px; }
.chat-system-msg::before, .chat-system-msg::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chat-system-msg span { white-space: nowrap; }
/* Top of a chat with more history than the live page: loads the next older page (also on scroll) */
.chat-load-older { display: flex; justify-content: center; padding: 4px 0 12px; flex-shrink: 0; }
.chat-load-older-btn {
    padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text-dim);
    font: inherit; font-size: 12px; cursor: pointer;
}
.chat-load-older-btn:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.chat-load-older-btn:disabled { cursor: default; opacity: 0.7; }
/* Someone joined or left: a small centred pill between the messages */
.chat-member-event { display: flex; justify-content: center; padding: 10px 16px 4px; }
.chat-member-event-pill {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    padding: 4px 12px 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--border);
    color: var(--text-dim); font-size: 12px; line-height: 1.4;
}
.chat-member-event-pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-event svg { flex-shrink: 0; }
.chat-member-event.join svg { color: var(--green); }
.chat-member-event.leave svg { color: var(--text-faint); }
.chat-member-event time { color: color-mix(in srgb, var(--text-dim) 75%, transparent); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Day divider: "Today", "Yesterday", "Friday", "September 12" */
.chat-day-sep { display: flex; align-items: center; gap: 12px; margin: 22px 12px 6px; color: var(--text-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.chat-day-sep:first-child { margin-top: 4px; }
.chat-day-sep::before, .chat-day-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chat-day-sep span { white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--bg2) 80%, transparent); border: 1px solid var(--border); }

/* "New messages" divider above the first unread message */
.chat-unread-sep { display: flex; align-items: center; gap: 10px; margin: 14px 12px 0; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.chat-unread-sep::before, .chat-unread-sep::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: 0.5; }
.chat-unread-sep span { white-space: nowrap; }

/* Groups get air between them; follow-ups from the same person sit tight underneath */
.chat-msg { margin-top: 16px; }
.chat-msg:first-child, .chat-day-sep + .chat-msg, .chat-unread-sep + .chat-msg { margin-top: 6px; }
.chat-msg.chat-msg-grouped { margin: 0 !important; padding-top: 1px; padding-bottom: 1px; }
.chat-msg.chat-msg-group-start { margin-bottom: 0 !important; padding-bottom: 1px; }
.chat-msg-grouped .chat-msg-bubble { padding: 0; }
.chat-msg-grouped.chat-msg-me .chat-msg-bubble { padding: 0; }
/* Hover time of a follow-up, on the first line of its text */
.chat-msg-avatar-spacer { width: 38px; flex-shrink: 0; align-self: stretch; position: relative; display: flex; align-items: flex-start; justify-content: center; }
.chat-msg-avatar-spacer[data-time]::after { content: attr(data-time); display: none; font-size: 10.5px; line-height: 23px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--text-dim) 80%, transparent); white-space: nowrap; }
.chat-msg-grouped:hover .chat-msg-avatar-spacer[data-time]::after { display: block; }

/* Comfortable reading width: rows stay full-width for hover, the content doesn't */
.chat-msg-content { flex: 1; min-width: 0; max-width: 880px; }

.chat-msg-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.chat-msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
    min-height: 22px;
}

.chat-msg-user-col {
    display: flex;
    align-items: center;
    min-width: 0;
}
.chat-msg-name {
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-msg-name:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Level next to the name: small and quiet (keeps its level color, drops the glow/animation) */
.chat-msg-user-col .ct-level-badge {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    padding: 0 5px;
    border-radius: 5px;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, currentColor 11%, transparent);
    box-shadow: none;
    text-shadow: none;
    animation: none;
}
.chat-msg-user-col .ct-level-badge.level-10 { color: var(--purple); }
.chat-msg-uid {
    font-size: 9px;
    color: var(--text-faint);
    opacity: 0.5;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.chat-msg-text { font-size: 14.5px; color: color-mix(in srgb, var(--text) 92%, transparent); line-height: 1.6; display: block; overflow-wrap: anywhere; max-width: 75ch; }
.chat-msg-time { font-size: 11px; color: color-mix(in srgb, var(--text-dim) 80%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }

.chat-msg-image {
    max-width: 360px;
    max-height: 320px;
    width: auto;
    height: auto;
    border: 1px solid var(--border);
    margin-top: 6px;
    cursor: zoom-in;
    display: block;
    object-fit: contain;
}

/* Chat reactions */
/* Right-click context menu */
.chat-context-menu {
    position: fixed;
    width: 256px;
    padding: 6px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 14px;
    z-index: 1000;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(var(--fg-rgb), 0.03);
    animation: ctxPopIn 0.12s ease-out;
    transform-origin: top left;
}
@keyframes ctxPopIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
/* Quick reactions on their own strip at the top */
.chat-ctx-reactions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 4px;
    margin-bottom: 6px;
    background: var(--bg3);
    border-radius: 10px;
}
.chat-ctx-emoji {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s, transform 0.12s;
}
.chat-ctx-emoji:hover { background: var(--bg5); transform: translateY(-2px) scale(1.12); }
.chat-ctx-emoji.active { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px var(--accent-border); }
.chat-ctx-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.chat-ctx-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.chat-ctx-btn:hover { background: var(--bg4); }
.chat-ctx-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); transition: color 0.1s; }
.chat-ctx-btn:hover svg { color: var(--text); }
.chat-ctx-btn-danger, .chat-ctx-btn-danger svg { color: var(--red); }
.chat-ctx-btn-danger:hover { background: var(--red-bg); }
.chat-ctx-btn-danger:hover svg { color: var(--red); }

/* Delete confirm modal */
.delete-confirm-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--overlay-backdrop); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease; }
.delete-confirm-modal { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; max-width: 340px; width: 90%; text-align: center; animation: modalIn 0.2s ease; }
.delete-confirm-icon { margin-bottom: 12px; color: #e55; }
.delete-confirm-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.delete-confirm-text { font-size: 13px; color: var(--text-dim); margin: 0 0 8px; }
.delete-confirm-text strong { color: var(--text); }
.delete-confirm-preview { font-size: 12px; color: var(--text-faint); margin: 0 0 20px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delete-confirm-actions { display: flex; gap: 10px; }
.delete-confirm-cancel { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.delete-confirm-cancel:hover { background: rgba(var(--fg-rgb), 0.05); color: var(--text); }
.delete-confirm-delete { flex: 1; padding: 10px; border-radius: 10px; border: none; background: #e55; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.delete-confirm-delete:hover { background: #f44; }

.chat-reactions-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.chat-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.chat-reaction-emoji { font-size: 15px; line-height: 1; }
.chat-reaction-count { font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.chat-reaction-pill:hover { border-color: var(--border-hover); background: color-mix(in srgb, var(--text) 9%, transparent); transform: translateY(-1px); }
.chat-reaction-pill:active { transform: scale(0.95); }
.chat-reaction-pill.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.chat-reaction-pill.active .chat-reaction-count { color: var(--accent); }
/* Who reacted: shown while hovering a reaction pill */
.chat-reaction-tip {
    position: fixed;
    z-index: 1001;
    min-width: 160px;
    max-width: 240px;
    padding: 6px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    pointer-events: none;
    animation: ctxPopIn 0.12s ease-out;
}
.chat-reaction-tip-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 7px; margin-bottom: 3px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.chat-reaction-tip-emoji { font-size: 20px; line-height: 1; }
.chat-reaction-tip-user { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; }
.chat-reaction-tip-user span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reaction-tip-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-reaction-tip-avatar-letter { display: flex; align-items: center; justify-content: center; background: var(--bg5); font-size: 10px; font-weight: 700; color: var(--text-dim); }
.chat-reaction-tip-more { padding: 4px 6px 2px; font-size: 12px; color: var(--text-dim); }

/* @everyone: in messages, and as the first choice in the @ list for admins */
.chat-mention.chat-mention-everyone { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 16%, transparent); }
.mention-avatar.mention-avatar-everyone { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 20%, var(--bg4)); color: var(--accent); font-weight: 800; }
.mention-hint { margin-left: auto; padding-left: 10px; font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Emoji picker */
.chat-emoji-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-faint);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}
.chat-emoji-btn:hover { color: var(--text); border-color: var(--border-hover); }

.emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 420px;
    margin-bottom: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 200;
    height: 420px;
}
.emoji-picker-search {
    padding: 12px 12px 8px;
}
.emoji-picker-search input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.emoji-picker-search input:focus { border-color: var(--accent-border); }
.emoji-picker-search input::placeholder { color: var(--text-faint); }
.emoji-picker-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 6px;
}
.emoji-picker-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    font-size: 18px;
    padding: 8px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.emoji-tab:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.04); }
.emoji-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.emoji-picker-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 4px 8px 8px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--fg-rgb), 0.12) transparent;
}
.emoji-picker-scroll::-webkit-scrollbar { width: 5px; }
.emoji-picker-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.emoji-picker-scroll::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.1); border-radius: 10px; }
.emoji-picker-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--fg-rgb), 0.2); }

.emoji-cat-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 4px 4px;
}
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1px;
}

.emoji-pick {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.08s;
}
.emoji-pick:hover { background: rgba(var(--fg-rgb), 0.1); transform: scale(1.2); }

.emoji-picker-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    min-height: 44px;
}
.emoji-picker-preview-emoji { font-size: 32px; line-height: 1; }
.emoji-picker-preview-name { font-size: 12px; color: var(--text-dim); font-weight: 500; }

/* Chat reply */
.chat-msg-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    align-self: flex-start;
    margin-top: 2px;
    height: 0;
    overflow: visible;
}
.chat-msg:hover { z-index: 10; position: relative; }
.chat-reply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--fg-rgb), 0.05);
    border: 1px solid rgba(var(--fg-rgb), 0.08);
    color: var(--text-faint);
    cursor: pointer;
    transition: all 0.15s;
}
.chat-reply-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }

/* Reply quote: one line above the header, with a spine curving down into the avatar */
.chat-msg-reply .chat-msg-avatar { margin-top: 28px; }
.chat-reply-quote {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: fit-content;
    max-width: min(100%, 560px);
    margin-bottom: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    font-size: 12.5px;
    transition: background 0.12s;
}
.chat-reply-quote[data-reply-key] { cursor: pointer; }
.chat-reply-quote[data-reply-key]:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.chat-reply-quote::before {
    content: '';
    position: absolute;
    left: -31px; /* avatar centre: 12px gap + half of the 38px avatar */
    width: 25px;
    height: 14px;
    border-left: 2px solid var(--border-hover);
    border-top: 2px solid var(--border-hover);
    border-top-left-radius: 7px;
}
.chat-reply-quote-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.chat-reply-quote-avatar-letter { background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--text-dim); }
.chat-reply-quote-name { font-weight: 600; color: var(--accent); flex-shrink: 0; white-space: nowrap; }
.chat-reply-quote-text { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-reply-quote[data-reply-key]:hover .chat-reply-quote-text { color: var(--text); }
.chat-msg-flash { animation: chatMsgFlash 1.6s ease-out; }
@keyframes chatMsgFlash { 0%, 30% { background: color-mix(in srgb, var(--accent) 16%, transparent); } 100% { background: transparent; } }

.chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    background: color-mix(in srgb, var(--accent) 7%, var(--bg2));
    border: 1px solid var(--accent-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    color: var(--text-dim);
    min-width: 0;
}
.chat-reply-preview > svg { color: var(--accent); flex-shrink: 0; }
.chat-reply-preview-label { flex-shrink: 0; white-space: nowrap; }
.chat-reply-preview strong { color: var(--accent); font-weight: 600; }
.chat-reply-preview-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); }
.chat-reply-cancel {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--fg-rgb), 0.06);
    border: none;
    border-radius: 50%;
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-reply-cancel:hover { background: rgba(var(--fg-rgb), 0.12); color: var(--text); }

/* Typing indicator */
.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-typing-indicator b { font-weight: 600; color: var(--text); }

/* Same bouncing dots as "typing" in the Online list (memberTyping keyframes) */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--bg3);
    color: var(--accent);
}
.typing-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: memberTyping 1.2s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }

.chat-mention {
    color: var(--blue);
    font-weight: 600;
    cursor: default;
}

.chat-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
}

.chat-input-wrap .chat-input {
    flex: 1;
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: var(--text);
    -webkit-text-fill-color: transparent;
}
.chat-input-wrap .chat-input::placeholder {
    -webkit-text-fill-color: var(--text-faint);
    color: var(--text-faint);
}

.chat-input-highlight {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    white-space: pre;
    overflow: hidden;
    font-size: 14px;
    padding: 12px 16px;
    line-height: normal;
    z-index: 0;
    border: 1px solid transparent;
    border-radius: 10px;
}
.chat-input-highlight {
    color: var(--text);
}
.chat-input-highlight .hl-mention {
    color: var(--blue);
    /* no bold: the input underneath is regular weight, so bold text would push the caret off */
}

/* @mention picker above the chat input (solid panel — it floats over the messages) */
.chat-mention-popup {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: min(320px, 100%);
    margin-bottom: 8px;
    padding: 6px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    z-index: 50;
    animation: viewFadeUp 0.15s ease;
}
.chat-mention-popup::before {
    content: 'Mention';
    display: block;
    padding: 6px 10px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.chat-mention-item {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-mention-item:hover, .chat-mention-item.selected {
    background: var(--bg4);
}
.chat-mention-item:hover .mention-name, .chat-mention-item.selected .mention-name { color: var(--accent); }

.mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.mention-avatar-letter {
    background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.mention-name { font-weight: 600; color: var(--text); }
.mention-uid { font-size: 10px; color: var(--text-faint); opacity: 0.6; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-left: 6px; }

.chat-input-row {
    display: flex;
    gap: 8px;
    position: relative;
}

.chat-img-btn {
    background: rgba(var(--fg-rgb), 0.04);
    border: 1px solid var(--border);
    color: var(--text-faint);
    width: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    align-self: stretch;
}
.chat-img-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--fg-rgb), 0.06); }
.chat-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(var(--fg-rgb), 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.chat-input:focus { border-color: var(--border); background: rgba(var(--fg-rgb), 0.06); caret-color: var(--accent); outline: none; box-shadow: none; }
.chat-input:focus-visible { outline: none; box-shadow: none; }
.chat-send-btn { padding: 12px 22px; border-radius: 10px; font-size: 13px; font-weight: 600; display: none; }

/* Chat icon buttons (image, GIF) */
.chat-icon-btn {
    background: none; border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-faint); cursor: pointer; padding: 8px 10px;
    transition: all 0.15s; display: flex; align-items: center;
}
.chat-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* === Chat composer: one rounded bar with attach, message, tools and send inside === */
.chat-composer {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border-hover);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-composer:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-hover));
    box-shadow: 0 6px 22px rgba(0,0,0,0.22), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.chat-composer .chat-input::placeholder { color: color-mix(in srgb, var(--text-dim) 75%, transparent); }
.chat-composer .chat-composer-btn {
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-composer .chat-composer-btn:hover { background: var(--bg4); color: var(--text); }
.chat-composer-tools { display: flex; align-items: center; }
.chat-composer .chat-input-wrap { align-self: stretch; }
/* Borderless field; the highlight layer (mention colors) must keep the exact same padding */
.chat-composer .chat-input,
.chat-composer .chat-input:focus {
    padding: 10px 8px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.chat-composer .chat-input-highlight { padding: 10px 8px; }
.chat-composer-send {
    margin-left: 4px;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s, filter 0.15s;
}
.chat-composer.has-text .chat-composer-send { background: var(--accent); color: #fff; }
.chat-composer.has-text .chat-composer-send:hover { filter: brightness(1.1); }
.chat-composer-send:active { transform: scale(0.94); }

/* ── Chat, second pass: hover toolbar, mentions, role marks, image placeholder, composer, jump pill ── */
.chat-main { position: relative; }
.chat-msg { padding: 4px 14px; }
.chat-msg:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
/* Name line: name first, then a quiet role mark, level chip and time */
.chat-msg-user-col { gap: 6px; }
.chat-msg-user-col .ct-level-badge { opacity: 0.7; }
.chat-msg:hover .chat-msg-user-col .ct-level-badge { opacity: 0.95; }
.chat-msg-user-col .chat-msg-time { margin-left: 2px; color: color-mix(in srgb, var(--text-dim) 70%, transparent); }
.chat-msg-role { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: -1px; color: var(--text-faint); }
.chat-msg-role svg { display: block; }
.chat-msg-role.owner { color: var(--yellow); }
.chat-msg-role.mod { color: var(--blue); }
.chat-msg-role.mentor { color: var(--purple); }

/* I'm @mentioned (or @everyone): the whole row is softly tinted with a thin marker, like Discord */
.chat-msg.chat-msg-mentioned {
    background: color-mix(in srgb, var(--yellow) 7%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--yellow) 75%, transparent);
    border-radius: 3px 12px 12px 3px;
}
.chat-msg.chat-msg-mentioned:hover { background: color-mix(in srgb, var(--yellow) 10%, transparent); }

/* Floating toolbar on the hovered message: quick reactions · react · reply · more */
.chat-hover-bar {
    position: absolute;
    top: -17px;
    right: 18px;
    z-index: 6;
    display: none;
    align-items: center;
    gap: 1px;
    padding: 3px;
    background: var(--bg2);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.26), 0 1px 2px rgba(0,0,0,0.18);
}
.chat-msg:hover > .chat-hover-bar,
.chat-msg.chat-msg-ctx-active > .chat-hover-bar { display: flex; animation: chatHoverIn 0.12s ease-out; }
@keyframes chatHoverIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.chat-hover-btn {
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 7px;
    color: var(--text-dim); font-size: 16px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.12s;
}
.chat-hover-btn:hover { background: var(--bg4); color: var(--text); }
.chat-hover-emoji:hover { transform: scale(1.14); }
.chat-hover-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--border); }

/* Reactions: same height as the pills, a "+" pill appears on hover */
.chat-reactions-row { align-items: center; margin-top: 6px; }
.chat-reaction-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 26px;
    border-radius: 999px;
    border: 1px dashed var(--border-hover);
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.chat-reaction-add svg { width: 15px; height: 15px; }
.chat-msg:hover .chat-reaction-add { opacity: 1; }
.chat-reaction-add:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }

/* Reply chip: mini avatar + name + snippet, a touch more defined */
.chat-reply-quote { border: 1px solid color-mix(in srgb, var(--text) 6%, transparent); height: 24px; padding: 0 11px 0 3px; }
.chat-reply-quote-avatar { width: 17px; height: 17px; }
.chat-reply-quote::before { top: 12px; }

/* Image attachments: rounded, capped, subtle ring; shimmer placeholder while loading */
.chat-msg-image { border-radius: 12px; border-color: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: 0 2px 10px rgba(0,0,0,0.16); transition: opacity 0.25s, filter 0.15s; }
.chat-msg-image:hover { opacity: 1; filter: brightness(1.06); }
.chat-gif-wrap.chat-img-loading {
    min-width: 240px; min-height: 170px; margin-top: 6px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--text) 4%, transparent) 30%, color-mix(in srgb, var(--text) 9%, transparent) 50%, color-mix(in srgb, var(--text) 4%, transparent) 70%) 0 0 / 200% 100%;
    animation: chatImgShimmer 1.3s linear infinite;
}
.chat-img-loading .chat-msg-image { opacity: 0; margin-top: 0; }
.chat-img-loading .chat-gif-fav { display: none; }
@keyframes chatImgShimmer { to { background-position: -200% 0; } }

/* Typing: a small, quiet line hugging the composer */
.chat-typing-indicator { padding: 0 20px 2px 30px; font-size: 12px; color: var(--text-dim); }
.chat-typing-indicator .typing-dots { padding: 5px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* Composer: taller, softer, consistent icons, clear send state */
.chat-input-row { padding: 6px 16px 16px; }
.chat-composer {
    padding: 6px 6px 6px 8px;
    min-height: 54px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg2) 88%, var(--text) 3%);
    border-color: var(--border);
    box-shadow: 0 8px 26px rgba(0,0,0,0.2);
}
.chat-composer:hover { border-color: var(--border-hover); }
/* The highlight layer draws the text and the input draws the caret — same font size, or the caret drifts right */
.chat-composer .chat-input, .chat-composer .chat-input:focus, .chat-composer .chat-input-highlight { font-size: 14.5px; }
.chat-composer .chat-composer-btn { width: 34px; height: 34px; border-radius: 9px; }
.chat-composer .chat-composer-btn svg { width: 19px; height: 19px; }
.chat-composer-tools { gap: 0; margin-right: 2px; }
.chat-composer-send { width: 38px; height: 38px; border-radius: 11px; background: transparent; color: var(--text-faint); opacity: 0.7; }
.chat-composer.has-text .chat-composer-send { opacity: 1; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.chat-reply-preview { margin: 0 16px -6px; padding-bottom: 14px; }

/* "Jump to present" when reading far back */
.chat-jump-present {
    position: absolute;
    left: 50%;
    bottom: 92px;
    z-index: 20;
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px 7px 15px;
    border: none; border-radius: 999px;
    background: var(--accent); color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.16s, transform 0.16s, filter 0.15s;
}
.chat-jump-present.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.chat-jump-present:hover { filter: brightness(1.1); }

/* Empty chat in a new community */
.chat-empty-state { margin: auto; max-width: 380px; padding: 24px; text-align: center; color: var(--text-dim); }
.chat-empty-icon {
    width: 58px; height: 58px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    background: var(--accent-bg); color: var(--accent);
    border: 1px solid var(--accent-border);
}
.chat-empty-state h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.chat-empty-state p { margin: 0; font-size: 13.5px; line-height: 1.55; }

/* Chat image preview */
.chat-img-preview {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px; background: var(--bg3); border-radius: var(--radius-sm);
    margin-bottom: 6px; border: 1px solid var(--border);
}
.chat-img-preview img { max-width: 200px; max-height: 120px; border-radius: 6px; object-fit: cover; }
.chat-img-preview-remove {
    background: var(--bg5); border: none; color: var(--text-dim); font-size: 16px;
    cursor: pointer; border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-img-preview-remove:hover { color: var(--red); background: var(--red-bg); }

/* GIF Picker */
.gif-picker {
    position: absolute;
    width: 480px; height: 420px;
    background: var(--bg2); border: 1px solid var(--border);
    display: flex; flex-direction: column; z-index: 100;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
}
.gif-picker-header { padding: 8px 10px; display: flex; gap: 6px; align-items: center; }
.gif-picker-tabs {
    display: flex; gap: 0; flex-shrink: 0;
    padding: 0 6px; border-bottom: 1px solid var(--border);
}
.gif-picker-tab {
    padding: 8px 14px; font-size: 12px; font-weight: 600; border: none; background: none;
    color: var(--text-faint); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
}
.gif-picker-tab:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.03); }
.gif-picker-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.gif-search {
    flex: 1; background: var(--bg3); border: 1px solid var(--border);
    border-radius: 6px; padding: 7px 12px; color: var(--text);
    font-size: 13px; outline: none;
}
.gif-search:focus { border-color: var(--accent-border); }
/* Sits just above the redesigned (taller) composer instead of overlapping it */
.gif-picker { border-radius: 16px; bottom: 82px; right: 16px; max-height: calc(100% - 100px); }
.gif-picker-results {
    column-count: 3; column-gap: 6px;
    padding: 4px 10px 10px; overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), 0.08) transparent;
}
.gif-picker-results::-webkit-scrollbar { width: 5px; }
.gif-picker-results::-webkit-scrollbar-track { background: transparent; }
.gif-picker-results::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.1); border-radius: 10px; }
.gif-result-item {
    width: 100%; border-radius: 6px; display: block;
    cursor: pointer; transition: all 0.12s;
    margin-bottom: 4px; break-inside: avoid;
}
.gif-result-item:hover { filter: brightness(1.15); outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-result-fav {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
    background: rgba(0,0,0,0.65); border: none; border-radius: 50%;
    color: rgba(255,255,255,0.5); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.15s; backdrop-filter: blur(4px);
}
.gif-result-wrap { position: relative; break-inside: avoid; }
.gif-result-wrap .gif-result-item { margin-bottom: 0; }
.gif-result-wrap:hover .gif-result-fav { opacity: 1; }
.gif-result-fav:hover { background: rgba(0,0,0,0.8); color: #fbbf24; transform: scale(1.1); }
.gif-result-fav.saved { color: #fbbf24; opacity: 1; }
/* Previews keep their shape while loading (aspect-ratio set inline) and fade in */
.gif-result-wrap { margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: var(--bg3); }
.gif-result-wrap .gif-result-item { border-radius: 8px; height: auto; min-height: 48px; object-fit: cover; opacity: 0; transition: opacity 0.2s, filter 0.12s; }
.gif-result-wrap .gif-result-item.loaded { opacity: 1; }
.gif-skeleton {
    border-radius: 8px; margin-bottom: 6px; break-inside: avoid;
    background: linear-gradient(100deg, var(--bg3) 30%, color-mix(in srgb, var(--bg3) 70%, var(--text) 8%) 50%, var(--bg3) 70%);
    background-size: 300% 100%; animation: gifShimmer 1.3s ease-in-out infinite;
}
@keyframes gifShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.gif-picker-results.gif-picker-results-state { column-count: 1; display: flex; }
.gif-state {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 32px 24px; text-align: center; color: var(--text-faint);
}
.gif-state-title { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.gif-state-sub { font-size: 11px; line-height: 1.5; color: var(--text-faint); max-width: 280px; }
.gif-state-retry {
    margin-top: 4px; padding: 7px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg3); color: var(--text);
    font-size: 12px; font-weight: 600; transition: border-color 0.15s, background 0.15s;
}
.gif-state-retry:hover { border-color: var(--accent-border); background: color-mix(in srgb, var(--bg3) 85%, var(--accent) 15%); }
.gif-picker-footer {
    display: block; flex-shrink: 0; padding: 5px 12px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint);
    border-top: 1px solid var(--border); text-align: right;
}
.gif-picker-footer:empty { display: none; }

/* Chat GIF wrapper with fav button */
.chat-gif-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.chat-gif-wrap .chat-gif-fav,
.chat-gif-wrap .gif-result-fav { /* reuse same style */ }
.chat-gif-fav {
    position: absolute; top: 10px; right: 6px; width: 26px; height: 26px;
    background: rgba(0,0,0,0.6); border: none; border-radius: 50%;
    color: rgba(255,255,255,0.5); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.15s; backdrop-filter: blur(4px);
}
.chat-gif-wrap:hover .chat-gif-fav { opacity: 1; }
.chat-gif-fav:hover { background: rgba(0,0,0,0.8); color: #fbbf24; }
.chat-gif-fav.saved { color: #fbbf24; }
.chat-gif-wrap:hover .chat-gif-fav.saved { opacity: 1; }

/* Link embeds in chat */
.chat-link-embed {
    display: flex; gap: 12px; margin-top: 8px; padding: 12px 14px;
    background: color-mix(in srgb, var(--bg2) 92%, transparent); border: 1px solid var(--border-hover);
    box-shadow: inset 3px 0 0 var(--accent);
    border-radius: 12px; max-width: 420px; text-decoration: none; color: inherit;
    transition: background 0.15s;
}
.chat-link-embed:hover { background: var(--bg4); }
.chat-link-embed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-link-embed-site { font-size: 11px; color: var(--text-faint); font-weight: 500; letter-spacing: 0.2px; }
.chat-link-embed-title { font-size: 14px; font-weight: 600; color: var(--accent); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-link-embed-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-link-embed-thumb { width: 70px; height: 70px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.chat-link-embed-img {
    width: 100%; max-height: 200px; border-radius: 6px; object-fit: cover;
    margin-top: 8px; display: block;
}
/* Embed with large image layout */
.chat-link-embed.has-large-img {
    flex-direction: column; gap: 0;
}
.chat-link-embed.has-large-img .chat-link-embed-thumb { display: none; }

/* Tenor GIF inline in chat */
.chat-tenor-gif { max-width: 300px; max-height: 240px; border-radius: 12px; margin-top: 6px; display: block; cursor: pointer; }

/* Chat links */
.chat-link { color: var(--accent); text-decoration: none; word-break: break-all; }
.chat-link:hover { text-decoration: underline; }

/* Chat context menu */
.chat-ctx-menu {
    position: fixed; z-index: 9999;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 0; min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: ctxFadeIn 0.1s ease;
}
@keyframes ctxFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.chat-ctx-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; font-size: 13px; color: var(--text);
    cursor: pointer; transition: background 0.1s;
}
.chat-ctx-item:hover { background: var(--accent-bg); color: var(--accent); }
.chat-ctx-item span { font-size: 14px; width: 18px; text-align: center; }

/* Signal button */
.chat-signal-btn {
    background: none; border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-faint); cursor: pointer; padding: 8px 12px;
    transition: all 0.15s; display: flex; align-items: center;
}
.chat-signal-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Signal popup */
.signal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-backdrop); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.signal-popup {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    width: 380px; max-width: 90vw; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.signal-popup-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.signal-popup-header h3 { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.signal-popup-header svg { color: var(--accent); }
.signal-popup-close {
    background: none; border: none; color: var(--text-faint); font-size: 20px;
    cursor: pointer; padding: 0 4px;
}
.signal-popup-close:hover { color: var(--text); }
.signal-popup-body { padding: 20px; }
.signal-label {
    display: block; font-size: 11px; font-weight: 700; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; margin-top: 14px;
}
.signal-label:first-child { margin-top: 0; }
.signal-input {
    width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 10px 14px; font-size: 14px; outline: none;
}
.signal-input:focus { border-color: var(--accent); }
.signal-dir-btns { display: flex; gap: 8px; }
.signal-dir-btn {
    flex: 1; padding: 9px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-faint); font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; text-align: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#signal-pair { text-transform: uppercase; }
#signal-pair::placeholder { text-transform: none; }
.signal-dir-btn:hover { border-color: var(--text-faint); }
.signal-dir-btn.long.active { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.signal-dir-btn.short.active { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.signal-dir-btn.watch.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.signal-preview { margin-top: 16px; }
.signal-send-btn { width: 100%; margin-top: 16px; padding: 12px; font-size: 14px; font-weight: 700; }

/* Signal card in chat (and the Send Signal preview) — --sig is the direction color */
.chat-signal-card {
    --sig: var(--accent);
    position: relative;
    overflow: hidden;
    width: min(100%, 400px);
    margin: 6px 0 2px;
    padding: 13px 16px 14px 19px;
    border-radius: 12px;
    border: 1px solid var(--border-hover);
    background: color-mix(in srgb, var(--bg2) 94%, transparent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}
.chat-signal-card.long { --sig: var(--green); }
.chat-signal-card.short { --sig: var(--red); }
/* Direction color as a thin accent stripe on the left instead of a colored border */
.chat-signal-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--sig);
}

.chat-signal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.chat-signal-label {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dim);
}
.chat-signal-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sig); flex-shrink: 0; }
.chat-signal-card.live .chat-signal-pulse { animation: signalPulse 2s ease-out infinite; }
@keyframes signalPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sig) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.chat-signal-dir {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sig);
    background: color-mix(in srgb, var(--sig) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 35%, transparent);
}

.chat-signal-main { display: flex; align-items: center; gap: 14px; }
.chat-signal-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sig);
    background: color-mix(in srgb, var(--sig) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sig) 30%, transparent);
}
.chat-signal-pair-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-signal-pair {
    font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-signal-sub { font-size: 12px; color: var(--text-faint); }
.chat-signal-price-col {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
    padding-left: 14px; border-left: 1px solid var(--border);
}
.chat-signal-price-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.chat-signal-price { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--text); }

/* === COMMUNITY TRADES FEED === */
.ct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ct-subtitle { margin: 0; font-size: 13px; color: var(--text-faint); }
.ct-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}
.ct-feed > .ct-day-separator, .ct-feed > .empty-state { grid-column: 1 / -1; }

/* ── Community Trade Cards ── */
.ct-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ct-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.ct-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ct-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.08);
}
.ct-card-avatar-letter {
    background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.ct-card-user-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ct-card-user-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-card-user { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-card-user:hover { text-decoration: underline; }
.ct-card-time { font-size: 11px; color: var(--text-faint); }

/* Trade summary panel */
.ct-card-trade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ct-card-trade-left { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ct-card-trade-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-card-instrument { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; line-height: 1; }
.ct-card-dir { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase; }
.ct-card-dir.long { color: var(--green); background: rgba(45,206,113,0.12); }
.ct-card-dir.short { color: var(--red); background: rgba(240,84,76,0.12); }
.ct-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); }
.ct-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ct-card-meta svg { opacity: 0.7; }
.ct-card-meta-dot { opacity: 0.5; }

.ct-card-pnl { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ct-card-pnl-value { font-size: 20px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; line-height: 1.1; }
.ct-card-pnl-pts { font-size: 11px; font-weight: 600; font-family: var(--num-font); font-variant-numeric: tabular-nums; opacity: 0.7; }
.ct-card-pnl.positive { color: var(--green); }
.ct-card-pnl.negative { color: var(--red); }
.ct-card-pnl.neutral { color: var(--text-dim); }

.ct-card-title { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }

/* Screenshots: one full width, or two side by side with a +N badge for the rest */
.ct-card-screenshots { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ct-card-screenshots.multi { grid-template-columns: 1fr 1fr; }
.ct-card-shot { position: relative; min-width: 0; }
.ct-card-shot[hidden] { display: none; }
.ct-card-screenshot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg3);
    cursor: zoom-in;
    transition: opacity 0.2s;
}
.ct-card-screenshot:hover { opacity: 0.9; }
.ct-card-shot-more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff; font-size: 20px; font-weight: 800;
    pointer-events: none;
}

/* Footer: reactions left, comments right */
.ct-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    cursor: default;
}
.ct-card-reactions { min-width: 0; }
.ct-card-comments-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 32px; padding: 0 12px;
    background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: 9px;
    color: var(--text-dim); font-size: 13px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.ct-card-comments-btn:hover { color: var(--text); border-color: var(--accent-border); }
.ct-reactions-row { display: flex; gap: 4px; flex-wrap: wrap; }
/* Same pill as chat reactions (.chat-reaction-pill) */
.ct-reaction-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; min-width: 42px; padding: 0 10px;
    background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: 9px;
    cursor: pointer; user-select: none; font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.ct-reaction-emoji { font-size: 19px; line-height: 1; }
.ct-reaction-btn:hover { border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-1px); }
.ct-reaction-btn:active { transform: scale(0.95); }
.ct-reaction-btn.active { border-color: var(--accent, #4d9eff); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ct-reaction-count { font-size: 13px; color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-reaction-btn.active .ct-reaction-count { color: var(--accent); }
/* Emojis nobody has used yet stay quiet until hovered */
.ct-reaction-btn.empty { background: transparent; border-color: transparent; min-width: 36px; padding: 0 6px; }
.ct-reaction-btn.empty .ct-reaction-emoji { opacity: 0.5; filter: grayscale(0.5); transition: opacity 0.15s, filter 0.15s; }
.ct-reaction-btn.empty:hover { background: rgba(var(--fg-rgb), 0.06); border-color: transparent; }
.ct-reaction-btn.empty:hover .ct-reaction-emoji { opacity: 1; filter: none; }

.ct-delete-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    background: none; border: none; color: var(--text-faint);
    cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.ct-card:hover .ct-delete-btn { opacity: 1; }
.ct-delete-btn:hover { color: var(--red); background: var(--red-bg); }
/* Watchlist */
.ct-top-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.ct-watchlist-section {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
}
.ct-watchlist-header { display: flex; justify-content: space-between; align-items: center; }
.ct-watchlist-header h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0; }
.ct-watchlist-toggle {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 4px; transition: transform 0.2s;
}
.ct-watchlist-toggle.collapsed { transform: rotate(-90deg); }
.ct-watchlist-body { margin-top: 12px; }
.ct-watchlist-add { display: flex; gap: 8px; margin-bottom: 10px; }
.ct-watchlist-input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: 6px 10px; font-size: 12px; outline: none;
}
.ct-watchlist-input:focus { border-color: var(--accent, #4d9eff); }
.ct-watchlist-input:first-child { width: 120px; flex-shrink: 0; }
.ct-watchlist-note-input { flex: 1; }
.ct-watchlist-add-btn { font-size: 12px; padding: 6px 14px; }
.ct-watchlist-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: var(--bg); border-radius: 6px; margin-bottom: 6px; font-size: 12px;
}
.ct-watchlist-instrument { font-weight: 700; color: var(--accent, #4d9eff); min-width: 80px; }
.ct-watchlist-note-text { flex: 1; color: var(--text); }
.ct-watchlist-meta { display: flex; gap: 8px; color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.ct-watchlist-remove {
    background: none; border: none; color: var(--red, #ff4d4d); cursor: pointer;
    font-size: 16px; padding: 0 4px; opacity: 0.6;
}
.ct-watchlist-remove:hover { opacity: 1; }
.ct-watchlist-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 10px; }

.ct-card-notes { font-size: 13px; color: var(--text-faint); margin-top: 6px; line-height: 1.5; }

/* Trade Detail Overlay: two panes that scroll on their own, trade left, comments right */
.ct-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(8px);
}

.ct-detail-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1180px;
    height: min(860px, calc(100vh - 64px));
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
    animation: viewFadeUp 0.25s ease;
}

.ct-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(var(--fg-rgb), 0.06);
    border: none;
    color: var(--text-faint);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ct-detail-close:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.12); }

.ct-detail-layout { display: flex; flex: 1; min-width: 0; min-height: 0; }

.ct-detail-left {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-detail-right {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
}

.ct-detail-left::-webkit-scrollbar, .ct-comments-list::-webkit-scrollbar { width: 6px; }
.ct-detail-left::-webkit-scrollbar-track, .ct-comments-list::-webkit-scrollbar-track { background: transparent; }
.ct-detail-left::-webkit-scrollbar-thumb, .ct-comments-list::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.12); border-radius: 3px; }

.ct-detail-head { display: flex; align-items: center; gap: 12px; }
.ct-detail-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.ct-detail-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-detail-caption { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }

.ct-detail-hero { padding: 16px 18px; }
.ct-detail-hero .ct-card-instrument { font-size: 26px; }
.ct-detail-hero .ct-card-pnl-value { font-size: 26px; }

.ct-detail-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ct-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    background: rgba(var(--fg-rgb), 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ct-detail-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.ct-detail-stat-value { font-size: 14px; font-weight: 700; color: var(--text); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-detail-stat-value.mono { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.ct-detail-stat-value.positive { color: var(--green); }
.ct-detail-stat-value.negative { color: var(--red); }

.ct-detail-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.ct-detail-notes-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

.ct-detail-screenshots { display: flex; flex-direction: column; gap: 10px; }
.ct-detail-screenshot {
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: zoom-in;
}

.ct-detail-reactions { padding-top: 14px; border-top: 1px solid var(--border); }

/* Comments */
.ct-comments { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ct-comments h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0;
    padding: 20px 56px 14px 20px; /* right side leaves room for the close button */
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.ct-comments-count { font-size: 11px; font-weight: 700; color: var(--text-faint); background: rgba(var(--fg-rgb), 0.06); padding: 2px 8px; border-radius: 10px; }
.ct-comments-count:empty { display: none; }

.ct-comments-list { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.ct-comments-list .ct-no-comments { margin: auto; }

.ct-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.ct-comment:hover { background: rgba(var(--fg-rgb), 0.03); }

.ct-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.ct-comment-avatar-letter {
    background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.ct-comment-body { flex: 1; min-width: 0; }

.ct-comment-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.ct-comment-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ct-comment-name:hover { text-decoration: underline; }
.ct-comment-time { font-size: 10px; color: var(--text-faint); }
.ct-comment-text { font-size: 13px; line-height: 1.45; color: var(--text); display: block; overflow-wrap: anywhere; }

.ct-comment-reply-tag {
    color: var(--accent);
    font-weight: 600;
}

/* Reply only shows on hover, like chat actions */
.ct-comment-reply-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 0 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.ct-comment:hover .ct-comment-reply-btn { opacity: 1; }
.ct-comment-reply-btn:hover { color: var(--accent); }

.ct-comment-thread {
    margin-left: 24px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-comment-reply {
    padding: 6px 10px;
}
.ct-comment-reply .ct-comment-avatar { width: 24px; height: 24px; font-size: 10px; }

.ct-no-comments { font-size: 13px; color: var(--text-faint); text-align: center; padding: 24px 12px; }

.ct-comment-input-row { display: flex; gap: 8px; flex-shrink: 0; padding: 12px; border-top: 1px solid var(--border); }
.ct-comment-input-row .chat-input { min-width: 0; }

/* Share Trade Modal */
.ct-share-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ct-share-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 26px;
    max-width: 580px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: viewFadeUp 0.3s ease;
}

.ct-share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ct-share-header h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }

.ct-share-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    margin-bottom: 12px;
}

.ct-share-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(var(--fg-rgb), 0.02);
    cursor: pointer;
    transition: all 0.15s;
}
.ct-share-item:hover { border-color: var(--accent-border); background: rgba(var(--fg-rgb), 0.04); }
.ct-share-item.selected { border-color: var(--accent); background: var(--accent-bg); }
.ct-share-item .ct-card-pnl { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; }

.ct-share-num { font-size: 13px; font-weight: 700; color: var(--text-faint); min-width: 40px; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.ct-share-instr { font-size: 15px; font-weight: 800; color: var(--text); }
.ct-share-date { font-size: 11px; color: var(--text-faint); margin-left: auto; }

.ct-share-item .ct-card-dir { font-size: 10px; }
.ct-share-item .result-badge { font-size: 10px; }

.ct-share-selected {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.ct-share-selected-trade {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 8px;
}

.ct-share-comment {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    resize: vertical;
    outline: none;
    font-family: inherit;
}
.ct-share-comment:focus { border-color: var(--accent); }

/* === Greeting row === */
.dash-greeting-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === PROFILE BADGES === */

/* === DASHBOARD GREETING === */
.dash-greeting {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-greeting-text {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.dash-greeting-text .greeting-name {
    letter-spacing: 0.01em;
}

.dash-greeting-quote {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--subtle-bg), var(--bg2));
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 8px;
    padding: 9px 16px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    width: fit-content;
    max-width: 600px;
}

.dash-greeting-quote::before {
    content: '💡';
    font-size: 14px;
    font-style: normal;
    line-height: 1;
    flex-shrink: 0;
}

/* === DASHBOARD HERO === */
.dash-hero {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.dash-hero-card {
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.dash-hero-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.dash-hero-today::before {
    background: linear-gradient(90deg, var(--blue), var(--blue-bg));
}
.dash-hero-today::after {
    background: radial-gradient(ellipse at top left, var(--blue-bg), transparent 60%);
}

.dash-hero-total::before {
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.dash-hero-total::after {
    background: radial-gradient(ellipse at top center, var(--accent-bg), transparent 60%);
}

.dash-hero-week::before {
    background: linear-gradient(90deg, var(--green), var(--green-bg));
}
.dash-hero-week::after {
    background: radial-gradient(ellipse at top left, var(--green-bg), transparent 60%);
}

.dash-hero-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.dash-hero-card:hover::after {
    opacity: 1;
}

.dash-hero-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.dash-hero-value {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

.dash-hero-value.positive { color: var(--green); }
.dash-hero-value.negative { color: var(--red); }

.dash-hero-sub {
    font-size: 11.5px;
    color: var(--text-faint);
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: 2px;
}

.dash-hero-total {
    text-align: center;
    align-items: center;
}

.sparkline {
    width: 100%;
    height: 48px;
    position: relative;
    z-index: 1;
    border-radius: 6px;
}

/* === DASHBOARD STATS GRID === */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-bottom: 28px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--fg-rgb), 0.08);
    perspective: 800px;
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    background: var(--bg2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.dash-stats-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(
        105deg,
        transparent 30%,
        color-mix(in srgb, var(--blue) 4%, transparent) 40%,
        color-mix(in srgb, var(--purple) 6%, transparent) 50%,
        rgba(29,185,84,0.04) 60%,
        transparent 70%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}

.dash-stats-grid:hover::before {
    opacity: 1;
    animation: holoShimmer 2s linear infinite;
}

@keyframes holoShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dash-stats-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--purple) 10%, transparent), rgba(29,185,84,0.1)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}

.dash-stats-grid:hover::after {
    opacity: 1;
}

.dash-stat {
    background: transparent;
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dash-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border);
}

.dash-stat:hover {
    background: rgba(var(--fg-rgb), 0.02);
}

.dash-stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    line-height: 1;
}

.dash-stat-value.positive { color: var(--green); }
.dash-stat-value.negative { color: var(--red); }

.dash-stat-label {
    font-size: 9px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    line-height: 1.2;
}

/* === GOALS === */
.goals-section {
    margin: 8px 0 12px;
}

.goals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.goals-header h3 {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-edit-goals {
    background: transparent;
    border: none;
    color: var(--text-faint);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0.35;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-edit-goals:hover {
    color: var(--accent);
    background: var(--accent-subtle);
    opacity: 1;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.goal-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--border);
    border-radius: 3px 0 0 3px;
    transition: background 0.3s;
}

.goal-card.goal-ok::before { background: var(--green); }
.goal-card.goal-warn::before { background: var(--yellow); }
.goal-card.goal-danger::before { background: var(--red); }

.goal-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.goal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.goal-card-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.goal-card-value {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}

.goal-progress-bar {
    height: 5px;
    background: var(--bg4);
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.goal-progress-fill.ok { background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 70%, white)); }
.goal-progress-fill.warn { background: linear-gradient(90deg, var(--yellow), color-mix(in srgb, var(--yellow) 70%, white)); }
.goal-progress-fill.danger { background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 70%, white)); }

.goals-editor {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-top: 14px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.goals-editor-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 140px;
}

.goals-editor-row label {
    font-size: 11px;
}

.goals-editor-row input {
    padding: 8px 12px;
    font-size: 13px;
}

.btn-save-goals {
    padding: 9px 24px !important;
    font-size: 13px !important;
}

/* === SPARKLINE === */
.sparkline {
    margin-top: 4px;
    display: block;
    overflow: visible;
}

/* === BACKUP BUTTONS === */
.sidebar-backup-btns {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.btn-backup {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.btn-backup:hover {
    border-color: var(--border-hover);
    color: var(--text);
    background: var(--bg4);
}

/* === STATISTICS VIEW HEADER === */
.stats-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stats-view-header .view-title {
    margin-bottom: 0;
}

.btn-share-report {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.btn-share-report:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
}

/* === DAILY RECAPS === */
.recaps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.recaps-header .view-title { margin-bottom: 0; }

.btn-new-recap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 20%, transparent);
    position: relative;
    overflow: hidden;
}

.btn-new-recap:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

.btn-new-recap:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 20%, transparent);
}

.btn-new-recap.editing {
    background: var(--bg3);
    color: var(--text-dim);
    box-shadow: none;
}
.btn-new-recap.editing::after { display: none; }

.btn-new-recap.editing:hover {
    box-shadow: none;
    transform: none;
    color: var(--text);
}

.recaps-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Recap editor */
.recap-editor {
    position: relative;
    overflow: hidden;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 24px;
    animation: viewIn 0.25s ease;
}
.recap-editor::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }

.recap-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.recap-editor-header h3 {
    font-size: 19px;
    font-weight: 800;
}

.recap-editor-date {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}

.recap-auto-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 1px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.recap-auto-stat {
    background: var(--bg3);
    padding: 10px 12px;
    text-align: center;
}

.recap-auto-stat-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.recap-auto-stat-value {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.recap-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recap-editor-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.recap-mood-btns { flex-wrap: wrap; }

.mood-btn, .rules-btn {
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
    flex: 1;
}

.mood-btn:hover, .rules-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.mood-btn.active[data-mood="great"] { background: var(--green-bg); color: var(--green); border-color: rgba(45,206,113,0.3); }
.mood-btn.active[data-mood="good"] { background: var(--green-bg); color: var(--green); border-color: rgba(45,206,113,0.3); }
.mood-btn.active[data-mood="neutral"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.mood-btn.active[data-mood="bad"] { background: var(--red-bg); color: var(--red); border-color: rgba(240,84,76,0.3); }
.mood-btn.active[data-mood="terrible"] { background: var(--red-bg); color: var(--red); border-color: rgba(240,84,76,0.3); }

.rules-btn.active[data-rules="yes"] { background: var(--green-bg); color: var(--green); border-color: rgba(45,206,113,0.3); }
.rules-btn.active[data-rules="mostly"] { background: rgba(227,179,65,0.1); color: var(--yellow); border-color: rgba(227,179,65,0.3); }
.rules-btn.active[data-rules="no"] { background: var(--red-bg); color: var(--red); border-color: rgba(240,84,76,0.3); }

/* Recap cards list */
.recaps-list {
    display: grid;
    gap: 16px;
    align-items: start;
}
.recaps-list > .empty-state { grid-column: 1 / -1; }

.recap-card {
    display: flex;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.recap-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Date tile, tinted with the mood color (--mood-color is set inline per card) */
.recap-card-datecol {
    width: 64px;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 0 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-top: 3px solid var(--mood-color, var(--text-faint));
    border-radius: 12px;
}
.recap-card-month { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mood-color, var(--text-faint)); white-space: nowrap; }
.recap-card-day { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.recap-card-weekday { font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.recap-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.recap-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.recap-card-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.recap-mood-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
}

.recap-stat {
    font-size: 12px;
    color: var(--text-faint);
    background: rgba(var(--fg-rgb), 0.04);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 8px;
}
.recap-stat b { color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 700; }
.recap-stat b.green { color: var(--green); }
.recap-stat b.red { color: var(--red); }

.recap-card-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.recap-card-lessons {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 12px 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.recap-card-lessons strong {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    display: block;
    margin-bottom: 6px;
}

.recap-card-screenshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.recap-card-ss {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    border: 1px solid var(--border);
    transition: opacity 0.15s;
}
.recap-card-ss:hover { opacity: 0.9; }

/* Share / edit / delete as icon buttons, shown on hover */
.recap-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.recap-card:hover .recap-card-actions { opacity: 1; }

.recap-share-btn, .recap-edit-btn, .recap-delete-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.recap-share-btn:hover { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, transparent); background: var(--purple-bg); }
.recap-edit-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
.recap-delete-btn:hover { color: var(--red); border-color: rgba(240,84,76,0.3); background: var(--red-bg); }

/* Sidebar recap notification dot */
.nav-btn .recap-dot {
    width: 7px;
    height: 7px;
    background: var(--red);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    animation: recapDotPulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px var(--red-glow);
}

@keyframes recapDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* === SETTINGS === */
#settings {
}

.settings-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--subtle-line), transparent);
}

.settings-card:hover {
    border-color: var(--border-hover);
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
/* Two columns that stack their cards on their own, so a tall card doesn't leave a gap next to it */
.settings-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

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

.settings-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}

/* One setting per row: label left, control right */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
}
.settings-card-title + .settings-row { border-top: none; }
.settings-row:last-child { padding-bottom: 2px; }

.settings-row-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.settings-row-label strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.settings-row-label span {
    font-size: 12px;
    color: var(--text-faint);
}

.settings-row .btn-secondary {
    padding: 9px 16px;
    font-size: 13px;
}

/* Segmented control */
.settings-segmented {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 4px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.settings-toggle-btn, .settings-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-toggle-btn:hover, .settings-theme-btn:hover {
    color: var(--text);
    background: var(--bg4);
}

.settings-toggle-btn.active, .settings-theme-btn.active {
    color: var(--accent);
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px var(--accent-border-strong);
}

/* Changelog (collapsible) */
.settings-changelog summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}
.settings-changelog summary::-webkit-details-marker { display: none; }
.settings-changelog summary .settings-card-title { margin-bottom: 0; }

.settings-chevron {
    flex-shrink: 0;
    color: var(--text-faint);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-changelog[open] .settings-chevron { transform: rotate(180deg); }

.settings-changelog .changelog-list {
    max-height: 420px;
    margin-top: 14px;
}

/* Accent color picker */
.accent-color-picker {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
}

.accent-presets {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

.accent-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.accent-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.accent-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.accent-swatch.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

#accent-custom-input {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    cursor: pointer;
}

#accent-custom-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

#accent-custom-input::-webkit-color-swatch {
    border-radius: 6px;
    border: none;
}

.settings-add-setup {
    display: flex;
    gap: 10px;
}

.settings-add-setup input {
    flex: 1;
}

.settings-add-setup .btn-primary {
    padding: 10px 20px;
    font-size: 13px;
    white-space: nowrap;
}

.settings-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
}

/* === SETUP INPUT (trade form) === */
.setup-input-container {
    display: flex;
    gap: 6px;
}

.setup-input-container select {
    flex: 1;
}

.btn-add-setup {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.btn-add-setup:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-bg);
}

/* === MILESTONES === */
.milestones-section {
    margin: 24px 0;
}

.milestones-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.milestones-header h3 {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dash-streak {
    display: flex;
    align-items: center;
    gap: 8px;
}

.milestones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.milestone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s;
}

.milestone.earned {
    border-color: rgba(45, 206, 113, 0.2);
    background: rgba(45, 206, 113, 0.04);
}

.milestone.locked {
    opacity: 0.35;
}

.milestone-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.milestone-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.milestone-info strong {
    font-size: 12px;
    color: var(--text);
    font-weight: 700;
}

.milestone-info span {
    font-size: 10px;
    color: var(--text-dim);
}

/* === ACCOUNTS === */
.account-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-faint);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* lets the balance scale with the card width (cqi) */
}

.account-card[data-type="eval"] { border-left-color: var(--yellow); }
.account-card[data-type="funded"] { border-left-color: var(--green); }
.account-card[data-type="personal"] { border-left-color: var(--blue); }

.account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--subtle-line), transparent);
}

.account-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.account-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.account-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.account-card-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-card-meta {
    font-size: 12px;
    color: var(--text-faint);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-card-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.account-card-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.account-hero-balance {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.account-hero-value {
    font-size: clamp(22px, 8.5cqi, 32px);
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.account-hero-pnl {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.account-hero-pnl.positive { color: var(--green); background: var(--green-bg); }
.account-hero-pnl.negative { color: var(--red); background: var(--red-bg); }

.account-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
}

.account-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 14px;
    background: var(--bg3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.account-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.account-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border);
}

.account-stat-value {
    font-size: clamp(13px, 4.6cqi, 16px);
    font-weight: 800;
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-stat-value.positive { color: var(--green); }
.account-stat-value.negative { color: var(--red); }

.account-stat-label {
    font-size: 9px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.account-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.account-card:hover .account-card-actions {
    opacity: 1;
}

.account-status-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-status-btn:hover {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-bg);
}

.account-delete-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
}

.account-delete-btn:hover {
    color: var(--red);
    border-color: rgba(240, 84, 76, 0.3);
    background: var(--red-bg);
}

.account-hidden { opacity: 0.5; }

.account-edit-btn, .account-hide-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    width: 30px; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.account-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.account-hide-btn:hover { color: var(--yellow); border-color: var(--yellow); }

.accounts-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.accounts-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.acct-summary-stat {
    padding: 16px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
    position: relative;
}
.acct-summary-stat:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border);
}
.acct-summary-value { font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.acct-summary-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

.acct-group { margin-bottom: 20px; }
.acct-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text);
    user-select: none;
}
.acct-group-chevron { transition: transform 0.2s; }
.acct-group.collapsed .acct-group-chevron { transform: rotate(-90deg); }
.acct-group.collapsed .acct-group-grid { display: none; }
.acct-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
}

.acct-progress-section { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.acct-progress-row { display: flex; flex-direction: column; gap: 4px; }
.acct-progress-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); font-weight: 600; }
.acct-progress-track { width: 100%; height: 4px; background: rgba(var(--fg-rgb), 0.06); border-radius: 2px; overflow: hidden; }
.acct-progress-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }

.account-form-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    margin-top: 20px;
}

.account-form-card h3 {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
}

.account-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.account-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 0;
}

.account-checkboxes::-webkit-scrollbar { width: 4px; }
.account-checkboxes::-webkit-scrollbar-track { background: transparent; }
.account-checkboxes::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.account-checkboxes::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.account-cb-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.account-cb-label:hover {
    border-color: var(--border-hover);
    background: var(--bg4);
}

.account-cb-label:has(input:checked) {
    border-color: var(--accent-border);
    background: var(--accent-bg);
}

.account-cb-label input {
    display: none;
}

.account-cb-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--text-faint);
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s;
}

.account-cb-label:has(input:checked) .account-cb-check {
    background: var(--accent);
    border-color: var(--accent);
}

.account-cb-label:has(input:checked) .account-cb-check::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.account-cb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color 0.15s;
}

.account-cb-label:has(input:checked) .account-cb-name {
    color: var(--text);
}

.form-hint {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 4px;
    display: block;
}

/* Date filter inputs */
.filters input[type="date"] {
    font-size: 11px;
    padding: 7px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 140px;
}

.filters input[type="date"]:hover {
    border-color: var(--border-hover);
}

.filters input[type="date"]:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-bg);
}

/* Dashboard widgets */
.dash-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.dash-customize-footer {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.dash-customize-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text-faint);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.4;
}

.dash-customize-btn:hover {
    opacity: 1;
    color: var(--text-dim);
    background: rgba(var(--fg-rgb), 0.03);
}

.dash-customizer {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.dash-customizer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dash-customizer-header h3 {
    font-size: 14px;
    font-weight: 700;
}

.dash-customizer-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

.dash-customizer-close:hover { color: var(--text); }

.dash-customizer-hint {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 12px;
}

.dash-customizer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Widgets in a 2-column grid: everything spans the full width except the
   Economic Calendar and news feed, which sit side by side as cards */
#dash-widgets-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
#dash-widgets-container > .dash-widget { grid-column: 1 / -1; min-width: 0; }
#dash-widgets-container > [data-widget="econ-cal"],
#dash-widgets-container > [data-widget="fj-news"] {
    grid-column: auto;
    padding: 18px 20px;
    background: var(--card, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 16px;
}
@media (max-width: 1100px) {
    #dash-widgets-container > [data-widget="econ-cal"],
    #dash-widgets-container > [data-widget="fj-news"] { grid-column: 1 / -1; }
}
/* Only one of the pair shown (e.g. the other hidden in Customize): it takes the full row */
#dash-widgets-container.dash-pair-single > [data-widget="econ-cal"],
#dash-widgets-container.dash-pair-single > [data-widget="fj-news"] { grid-column: 1 / -1; }
#dash-widgets-container .dash-hero,
#dash-widgets-container .dash-stats-grid,
#dash-widgets-container .goals-section { margin: 0; }
#dash-widgets-container .dash-stats-grid { background: var(--card, var(--bg2)); }

/* Clearer section titles on the dashboard */
#dashboard .section-header,
#dashboard .goals-header { display: flex; align-items: center; }
#dashboard .section-header h3,
#dashboard .goals-header h3 { margin: 0; color: var(--text); text-transform: none; }
#dashboard .econ-cal-events { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
/* Quiet app scrollbar: thin, no track, the thumb only firms up while hovering the list */
#dashboard .econ-cal-events:hover { scrollbar-color: var(--scrollbar-hover) transparent; }
#dashboard .econ-cal-events::-webkit-scrollbar { width: 4px; }
#dashboard .econ-cal-events::-webkit-scrollbar-track { background: transparent; }
#dashboard .econ-cal-events::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
#dashboard .econ-cal-events:hover::-webkit-scrollbar-thumb,
#dashboard .econ-cal-events::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
#dashboard .econ-cal-passed { opacity: 0.55; }

/* === DASHBOARD 2.2.0: cleaner, easier to scan ===
   One centered column on an 8px spacing scale, flat cards (no glows / tilt / top bars),
   the P&L numbers big and everything else quiet. Cards stay opaque so they read over
   the Settings → Background image in every theme. */
#dashboard { max-width: 1280px; margin: 0 auto; }

/* Greeting: compact header, quote as a quiet subtitle */
#dashboard .dash-greeting { margin: 0 0 24px; gap: 8px; }
#dashboard .dash-greeting-text { font-size: 28px; letter-spacing: -0.03em; }
#dashboard .dash-greeting-quote {
    display: block; max-width: none; padding: 0; background: none; border: none; border-radius: 0;
    font-size: 13px; color: var(--text-dim);
}
#dashboard .dash-greeting-quote::before { content: none; }
#dashboard .onboarding-checklist { margin-bottom: 24px; }

/* Widget grid */
#dashboard #dash-widgets-container { gap: 16px; }
#dashboard #dash-widgets-container > [data-widget="econ-cal"],
#dashboard #dash-widgets-container > [data-widget="fj-news"],
#dashboard #dash-widgets-container > [data-widget="recent"] {
    padding: 20px 24px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
}

/* Section titles: one style for every widget */
#dashboard .section-header,
#dashboard .goals-header { margin: 0 0 16px; gap: 8px; }
#dashboard .section-header h3,
#dashboard .goals-header h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; }
#dashboard [data-widget="fj-news"] .section-header { margin-bottom: 16px; }
#dashboard #dash-widgets-container > [data-widget="econ-cal"],
#dashboard #dash-widgets-container > [data-widget="fj-news"] { align-self: stretch; }
#dashboard .econ-cal-events,
#dashboard .fj-news-list { max-height: 288px; }

/* P&L overview: three equal cards, Today's P&L is the biggest number on the page */
#dashboard .dash-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#dashboard .dash-hero-card {
    background: var(--bg2); border-radius: 16px; padding: 24px; gap: 8px; min-height: 152px;
    transition: border-color 0.2s;
}
#dashboard .dash-hero-card::before,
#dashboard .dash-hero-card::after { content: none; }
#dashboard .dash-hero-card:hover { transform: none; box-shadow: none; border-color: var(--border-hover); }
#dashboard .dash-hero-total { text-align: left; align-items: stretch; }
#dashboard .dash-hero-label { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; }
#dashboard .dash-hero-value {
    font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
#dashboard .dash-hero-today .dash-hero-value { font-size: 40px; }
#dashboard .dash-hero-value:not(.positive):not(.negative) { color: var(--text-dim); }
#dashboard .dash-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: auto; }
#dashboard .dash-hero-today { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
#dashboard .sparkline { margin-top: auto; height: 40px; border-radius: 0; }

/* Quick stats: one flat strip of six equal cells, label above value */
#dashboard .dash-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: none; perspective: none; transform-style: flat;
}
#dashboard .dash-stats-grid::before,
#dashboard .dash-stats-grid::after { content: none; }
#dashboard .dash-stat { padding: 16px 24px; gap: 8px; align-items: flex-start; text-align: left; }
#dashboard .dash-stat:hover { background: transparent; }
#dashboard .dash-stat:not(:last-child)::after { top: 16px; height: calc(100% - 32px); }
#dashboard .dash-stat-label { order: -1; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); }
#dashboard .dash-stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Daily goals: flat cards, the progress bar carries the status colour */
#dashboard .goals-header { justify-content: flex-start; }
#dashboard .btn-edit-goals { opacity: 0.6; padding: 4px; }
#dashboard .goals-grid { gap: 16px; }
#dashboard .goal-card { background: var(--bg2); border-radius: 16px; padding: 16px 24px; }
#dashboard .goal-card::before { content: none; }
#dashboard .goal-card:hover { transform: none; box-shadow: none; }
#dashboard .goal-card-header { margin-bottom: 12px; flex-wrap: wrap; gap: 4px 12px; }
#dashboard .goal-card-label { font-size: 11px; letter-spacing: 0.06em; }
#dashboard .goal-card-value { font-size: 13px; font-variant-numeric: tabular-nums; }
#dashboard .goal-progress-bar { height: 4px; }
#dashboard .goals-editor { border-radius: 16px; padding: 16px 24px; margin-top: 16px; }

/* Economic calendar + news: plain divided rows instead of boxes inside the card */
#dashboard .econ-cal-events,
#dashboard .fj-news-list { gap: 0; }
#dashboard .econ-cal-event,
#dashboard .fj-news-item {
    padding: 12px 0; background: none; border: none; border-radius: 0;
    border-top: 1px solid var(--border);
}
#dashboard .econ-cal-event:first-child,
#dashboard .fj-news-item:first-child { border-top: none; padding-top: 0; }
#dashboard .econ-cal-market + .econ-cal-event { border-top: none; }
#dashboard .fj-news-item:hover { background: none; }
#dashboard .econ-cal-today .econ-cal-name { color: var(--red); }
#dashboard .econ-cal-impact { width: 3px; height: 32px; }
#dashboard .fj-news-impact { width: 3px; height: 28px; }
#dashboard .fj-news-item.fj-critical { background: none; border-color: var(--border); }
#dashboard .fj-news-headline { font-size: 13px; line-height: 1.4; }
#dashboard .fj-news-time { font-size: 11px; font-variant-numeric: tabular-nums; }
#dashboard .econ-cal-countdown { font-size: 12px; padding: 4px 8px; min-width: 80px; font-variant-numeric: tabular-nums; }
#dashboard .econ-cal-market { margin-bottom: 8px; padding: 8px 12px; }
#dashboard .econ-cal-clear { padding: 32px 16px; background: none; border: none; gap: 8px; }
#dashboard .econ-cal-clear-icon { width: 24px; height: 24px; }
#dashboard .econ-cal-clear-title { font-size: 13px; color: var(--text); }
#dashboard .econ-cal-clear-sub { font-size: 12px; color: var(--text-dim); }

/* Economic calendar filter (button in the widget header + its popover) */
.econ-cal-header { position: relative; }
.econ-cal-filter-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; position: relative;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent;
    color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.econ-cal-filter-btn:hover, .econ-cal-filter-btn[aria-expanded="true"] { background: var(--hover-overlay-strong); color: var(--text); border-color: var(--border-hover); }
.econ-cal-filter-btn.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg); }
.econ-cal-filter-btn.active::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--bg2);
}
.econ-cal-filter-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    width: 300px; max-width: calc(100vw - 32px); max-height: min(460px, 70vh); overflow-y: auto;
    padding: 8px 12px 12px; border: 1px solid var(--border-hover); border-radius: 12px;
    background: var(--bg3); box-shadow: var(--shadow-lg);
    text-transform: none; letter-spacing: normal; font-weight: 400;
    animation: communityDdIn 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top right;
}
.econ-cal-filter-menu[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .econ-cal-filter-menu { animation: none; } }
.econ-cal-filter-label {
    padding: 8px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-faint);
}
.econ-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.econ-cal-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 28px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent;
    color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.econ-cal-chip:hover { background: var(--hover-overlay-strong); color: var(--text); }
.econ-cal-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-bg); }
.econ-cal-chip:not(.on) .econ-cal-chip-dot { opacity: 0.35; }
.econ-cal-chip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.econ-cal-filter-check {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; cursor: pointer;
    font-size: 13px; color: var(--text);
}
.econ-cal-filter-check input { margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.econ-cal-filter-check span { display: flex; flex-direction: column; gap: 1px; }
.econ-cal-filter-check small { font-size: 11px; color: var(--text-faint); }
.econ-cal-filter-keywords {
    width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg2); color: var(--text); font: inherit; font-size: 13px;
}
.econ-cal-filter-keywords:focus { outline: none; border-color: var(--accent); }
.econ-cal-filter-hint { margin-top: 4px; font-size: 11px; color: var(--text-faint); }
.econ-cal-filter-reset {
    width: 100%; margin-top: 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.econ-cal-filter-reset:hover:not(:disabled) { background: var(--hover-overlay-strong); }
.econ-cal-filter-reset:disabled { opacity: 0.4; cursor: default; }
.econ-cal-ccy { font-weight: 700; color: var(--text-dim); }
.econ-cal-clear-reset { margin-top: 4px; font-size: 12px; padding: 6px 12px; }

/* This week's trades: compact rows in one card, P&L right-aligned in tabular mono */
#dashboard #recent-trades.trade-list { gap: 0; }
#dashboard #recent-trades .trade-item {
    background: none; border: none; border-radius: 8px; box-shadow: none; transform: none;
    border-top: 1px solid var(--border);
}
#dashboard #recent-trades .trade-day-header + .trade-item { border-top-color: transparent; }
#dashboard #recent-trades .trade-item:hover { background: var(--hover-overlay); transform: none; box-shadow: none; }
#dashboard #recent-trades .trade-item:hover + .trade-item { border-top-color: transparent; }
#dashboard #recent-trades .ti-accent { width: 3px; margin: 12px 0; border-radius: 3px; }
#dashboard #recent-trades .ti-dir-icon { width: 32px; height: 32px; border-radius: 8px; }
#dashboard #recent-trades .ti-body { padding: 8px 12px; gap: 4px; }
#dashboard #recent-trades .ti-instrument { font-size: 14px; }
#dashboard #recent-trades .ti-pnl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#dashboard #recent-trades .trade-day-header { padding: 16px 12px 8px 0; }
#dashboard #recent-trades .trade-day-header:first-child { padding-top: 0; }
#dashboard #recent-trades .trade-day-label { font-size: 12px; font-weight: 700; color: var(--text-dim); }
#dashboard #recent-trades .trade-day-pnl { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#dashboard #recent-trades .empty-state { padding: 32px 16px; }
#dashboard #recent-trades .empty-state svg { width: 32px; height: 32px; margin-bottom: 8px; }

#dashboard .dash-customize-footer { padding: 24px 0 8px; }

/* Narrower windows: six stats in two rows of three, goals stack */
@media (max-width: 1280px) {
    #dashboard .dash-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #dashboard .dash-stat:nth-child(3)::after { content: none; }
    #dashboard .dash-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
    #dashboard .dash-hero-value { font-size: 28px; }
    #dashboard .dash-hero-today .dash-hero-value { font-size: 34px; }
}
@media (max-width: 1100px) {
    #dashboard .goals-grid { gap: 8px; }
    #dashboard .goal-card { padding: 16px; }
    #dashboard .goal-card-header { flex-direction: column; align-items: flex-start; }
}

.dash-cust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.dash-cust-drag {
    color: var(--text-faint);
    cursor: grab;
    flex-shrink: 0;
    padding: 4px;
}

.dash-cust-item.dragging {
    opacity: 0.4;
    background: var(--bg4);
}

.dash-cust-item.drag-over {
    border-color: var(--accent-border);
    background: var(--accent-bg);
}

.dash-cust-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.dash-cust-move {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.dash-cust-move:hover:not(:disabled) {
    border-color: var(--accent-border);
    color: var(--accent);
    background: var(--accent-bg);
}

.dash-cust-move:disabled {
    opacity: 0.25;
    cursor: default;
}

.dash-cust-toggle {
    background: none;
    border: 1px solid var(--border);
    width: 30px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.dash-cust-toggle.on {
    color: var(--green);
    border-color: rgba(45, 206, 113, 0.2);
}

.dash-cust-toggle.off {
    color: var(--text-faint);
    opacity: 0.5;
}

.dash-cust-toggle:hover {
    border-color: var(--border-hover);
    opacity: 1;
}

/* Confetti */
.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .ti-prices { display: none; }
    .ti-details .ti-dot:nth-of-type(1) { display: none; }
    .recap-stats { grid-template-columns: repeat(3, 1fr); }
    .dash-hero { grid-template-columns: 1fr; }
    .dash-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .trades-summary { grid-template-columns: repeat(2, 1fr); }
    .stats-highlights { grid-template-columns: repeat(3, 1fr); }
    .stats-row-2col { grid-template-columns: 1fr; }
}

/* === Loading overlay === */
.op-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.op-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

/* === Pagination === */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0;
    margin-top: 8px;
}

.btn-page {
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-page:hover:not(:disabled) {
    background: var(--bg4);
    border-color: var(--border-hover);
}

.btn-page:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-info {
    font-size: 12px;
    color: var(--text-dim);
}

/* === Undo edit toast === */
.undo-edit-toast {
    background: var(--bg4) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === Focus indicators for accessibility === */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent, #4d9eff);
    outline-offset: 2px;
}

/* Profile Setup Modal */
.profile-setup-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(20px);
    animation: setupFadeIn 0.4s ease;
}
@keyframes setupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.profile-setup-card {
    text-align: center;
    max-width: 380px; width: 100%;
    padding: 56px 48px;
    border: 1px solid rgba(var(--fg-rgb), 0.06);
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 120px color-mix(in srgb, var(--accent) 5%, transparent);
    animation: setupCardIn 0.5s ease 0.1s both;
}
@keyframes setupCardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.setup-logo-img {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 16px;
    filter: drop-shadow(0 0 24px rgba(76,192,74,0.3));
}
.setup-title {
    font-size: 24px;
    font-weight: 700;
    color: #e8ecf4;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.setup-sub {
    color: #7d8590;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 36px;
}
.setup-google-btn {
    width: 100%;
    padding: 14px 24px;
    background: #fff;
    color: #1f1f1f;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.setup-google-btn:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.setup-google-btn:active { transform: translateY(0); }
.setup-footer {
    margin-top: 20px;
    font-size: 11px;
    color: #7d8590;
    letter-spacing: 0.2px;
}
.setup-legal { margin-top: 8px; line-height: 1.5; }
.setup-legal a { color: inherit; text-decoration: underline; }

/* Greeting name */
.greeting-name {
    cursor: default;
}
.greeting-name-tooltip {
    display: none;
    font-size: 11px; font-family: var(--num-font); font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #888);
    white-space: nowrap;
    transition: opacity 0.15s;
    pointer-events: none;
    -webkit-text-fill-color: var(--text-secondary, #888);
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.greeting-name:hover .greeting-name-tooltip {
    visibility: visible; opacity: 1;
}

/* App version label */
.app-version {
    position: fixed; bottom: 8px; right: 12px;
    font-size: 11px; color: var(--text-secondary, #555);
    opacity: 0.4; font-family: var(--num-font); font-variant-numeric: tabular-nums;
    pointer-events: none; z-index: 1;
}

/* === PATCH NOTES MODAL === */
.patch-notes-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.patch-notes-overlay.visible { opacity: 1; }

.patch-notes-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0;
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    animation: patchNotesIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
}

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

.patch-notes-hero {
    background: linear-gradient(135deg, var(--green-bg), var(--accent-bg));
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    text-align: center;
}

.patch-notes-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent, #1db954), #4fc3f7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.patch-notes-hero-icon svg {
    width: 26px;
    height: 26px;
    color: #fff;
}

.patch-notes-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.patch-notes-header h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text, #e0e0e0);
    margin: 0;
}

.patch-notes-version {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(79, 163, 247, 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.patch-notes-subtitle {
    font-size: 13px;
    color: var(--text-faint, #666);
    margin-top: 2px;
}

.patch-notes-body {
    padding: 20px 28px 24px;
    overflow-y: auto;
    flex: 1;
}
.patch-notes-body::-webkit-scrollbar { width: 5px; }
.patch-notes-body::-webkit-scrollbar-track { background: transparent; }
.patch-notes-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }

.patch-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.patch-notes-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text, #e0e0e0);
    line-height: 1.6;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(var(--fg-rgb), 0.02);
    border: 1px solid rgba(var(--fg-rgb), 0.03);
    opacity: 0;
    transform: translateY(8px);
    animation: patchItemIn 0.3s ease forwards;
}
.patch-notes-item:nth-child(1) { animation-delay: 0.2s; }
.patch-notes-item:nth-child(2) { animation-delay: 0.28s; }
.patch-notes-item:nth-child(3) { animation-delay: 0.36s; }
.patch-notes-item:nth-child(4) { animation-delay: 0.44s; }
.patch-notes-item:nth-child(5) { animation-delay: 0.52s; }

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

.patch-notes-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 1px;
}

.patch-notes-badge.new {
    color: var(--green, #2dce71);
    background: rgba(45, 206, 113, 0.12);
}

.patch-notes-badge.improved {
    color: var(--blue, #4d9eff);
    background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.patch-notes-badge.fix {
    color: var(--yellow, #f2bd4b);
    background: rgba(234, 179, 8, 0.12);
}

.patch-notes-close {
    width: 100%;
    padding: 12px;
    background: var(--bg4);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}
.patch-notes-close:hover { background: var(--bg5); transform: translateY(-1px); }

/* === GETTING STARTED (new users) === */
.onboarding-card .onboarding-start { background: var(--accent); border-color: transparent; color: #fff; }
.onboarding-card .onboarding-start:hover { background: var(--accent); filter: brightness(1.1); }
.onboarding-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.onboarding-step {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
}
.onboarding-step-num {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-bg);
}
.onboarding-step-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.onboarding-step-text strong { color: var(--text); font-weight: 600; }
.onboarding-step-text span { color: var(--text-dim); font-size: 12px; }
.onboarding-skip {
    display: block; margin: 10px auto 0; padding: 4px 10px; background: none; border: none;
    color: var(--text-faint); font-size: 12px; font-family: inherit; cursor: pointer;
}
.onboarding-skip:hover { color: var(--text-dim); }

.onboarding-checklist {
    margin-bottom: 24px; padding: 16px 18px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
}
.onboarding-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-checklist-head strong { display: block; font-size: 15px; color: var(--text); }
.onboarding-checklist-head span { font-size: 12px; color: var(--text-faint); }
.onboarding-dismiss {
    width: 28px; height: 28px; padding: 6px; border: none; border-radius: 8px; background: none;
    color: var(--text-faint); cursor: pointer;
}
.onboarding-dismiss:hover { color: var(--text); background: var(--bg4); }
.onboarding-dismiss svg { width: 100%; height: 100%; }
.onboarding-progress { height: 4px; margin: 12px 0 14px; border-radius: 4px; background: var(--bg4); overflow: hidden; }
.onboarding-progress > div { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.4s ease; }
.onboarding-checklist-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.onboarding-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all 0.15s;
}
.onboarding-item:hover:not(.done) { border-color: var(--accent); }
.onboarding-item.done { color: var(--text-faint); text-decoration: line-through; cursor: default; }
.onboarding-item-icon {
    width: 26px; height: 26px; padding: 5px; flex-shrink: 0; border-radius: 8px;
    color: var(--accent); background: var(--accent-bg);
}
.onboarding-item.done .onboarding-item-icon { color: var(--green); background: var(--green-bg); }
.onboarding-item-icon svg { width: 100%; height: 100%; display: block; }

/* User Profile Popup */
.user-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(6px);
    animation: userPopupFadeIn 0.15s ease-out;
}
@keyframes userPopupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes userPopupPop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }

.user-popup {
    --up-color: var(--accent);
    --up-bg: var(--bg2);
    position: relative;
    width: 320px;
    max-width: 100%;
    background: var(--up-bg);
    border: 1px solid var(--border-hover);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: userPopupPop 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

/* Banner: user image, otherwise a gradient from the name colour / accent */
.user-popup-banner {
    height: 96px;
    background:
        linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.18)),
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--up-color) 58%, transparent) 0%, transparent 62%),
        radial-gradient(90% 140% at 100% 100%, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 70%),
        linear-gradient(135deg, color-mix(in srgb, var(--up-color) 32%, var(--bg3)), color-mix(in srgb, var(--accent) 18%, var(--bg3)));
    background-size: cover;
    background-position: center;
}
.user-popup-banner.has-image { background-color: var(--bg3); }

.user-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.user-popup-close:hover { background: rgba(0, 0, 0, 0.55); color: #fff; }
.user-popup-close:active { transform: scale(0.92); }

/* Avatar overlapping the banner */
.user-popup-header {
    position: relative;
    height: 44px;
    padding: 0 18px;
}
.user-popup-avatar-wrap {
    position: absolute;
    left: 14px;
    top: -44px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    padding: 4px;
    background: var(--up-bg);
}
.user-popup-avatar {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg3);
}
.user-popup-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--up-color) 85%, #fff), color-mix(in srgb, var(--up-color) 55%, var(--accent)));
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Presence dot on the avatar */
.user-popup-presence {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 4px solid var(--up-bg);
    box-sizing: border-box;
    background: var(--text-faint);
}
.user-popup-presence.online { background: var(--green); }
.user-popup-presence.idle { background: var(--yellow); }
.user-popup-presence.dnd { background: var(--red); }
.user-popup-presence.offline { background: var(--text-dim); }
.user-popup-presence.offline::after,
.user-popup-presence.dnd::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--up-bg);
}
.user-popup-presence.offline::after { width: 6px; height: 6px; border-radius: 50%; }
.user-popup-presence.dnd::after { width: 8px; height: 3px; border-radius: 2px; }
.user-popup-presence.idle::after {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--up-bg);
}

/* Profile like: a pill on the right of the header, next to the avatar */
.user-popup-like {
    position: absolute;
    right: 16px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--hover-overlay);
    color: var(--text-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.user-popup-like svg { flex-shrink: 0; transition: transform 0.15s; }
.user-popup-like:hover:not(:disabled) { background: var(--hover-overlay-strong); border-color: var(--border-hover); color: var(--text); }
.user-popup-like:hover:not(:disabled) svg { transform: scale(1.1); }
.user-popup-like:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-popup-like:disabled { cursor: default; }
.user-popup-like.liked {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 14%, transparent);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
}
.user-popup-like.liked:hover { color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); border-color: color-mix(in srgb, var(--red) 60%, transparent); }
.user-popup-like.liked svg path { fill: currentColor; }
.user-popup-like.pop svg { animation: user-popup-like-pop 0.35s ease-out; }
@keyframes user-popup-like-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.user-popup-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 18px 18px;
}

.user-popup-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.user-popup-name {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-popup-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}
.user-popup-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.user-popup-status-dot.online { background: var(--green); }
.user-popup-status-dot.offline { background: var(--text-dim); }
.user-popup-status-dot.idle { background: var(--yellow); }
.user-popup-status-dot.dnd { background: var(--red); }
.user-popup-status-text { color: var(--text-dim); }
/* Custom status: a quiet line under the name, not a box that competes with it */
.user-popup-status-msg {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-dim);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Level + role + UID chips */
.user-popup-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.user-popup-chips .user-popup-roles { display: contents; }
.user-popup-chips > *,
.user-popup-chips .community-dd-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.user-popup-chips .community-dd-tag { text-transform: none; }
.user-popup-chips .user-popup-roles { padding: 0; height: auto; }
.user-popup-uid-badge {
    color: var(--text-dim);
    background: var(--hover-overlay-strong);
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

/* Stats */
.user-popup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--subtle-bg);
    overflow: hidden;
}
.user-popup-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 10px 14px;
}
.user-popup-stat + .user-popup-stat { border-left: 1px solid var(--border); }
.user-popup-stat-val {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.user-popup-stat-label {
    max-width: 100%;
    font-size: 11.5px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Socials */
.user-popup-socials { display: flex; flex-wrap: wrap; gap: 6px; }
.user-popup-social {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    padding: 0 11px 0 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--hover-overlay);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.user-popup-social span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-popup-social svg { color: var(--text-dim); flex-shrink: 0; transition: color 0.15s; }
.user-popup-social-link { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.user-popup-social-link:hover { background: var(--hover-overlay-strong); border-color: var(--border-hover); }
.user-popup-social-link:hover svg { color: var(--text); }
.user-popup-social-hint {
    font-size: 10px; color: var(--text-faint); margin-left: auto;
}

.user-popup-joined {
    text-align: center;
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .user-popup-overlay, .user-popup, .user-popup .ct-level-badge { animation: none; }
    .user-popup-close, .user-popup-social-link, .user-popup-like, .user-popup-like svg { transition: none; }
    .user-popup-like.pop svg { animation: none; }
}

/* Make clickable avatars/names show pointer */
.chat-member { cursor: pointer; }
.chat-msg-avatar, .chat-msg-name { cursor: pointer; }
.ct-card-avatar, .ct-card-user { cursor: pointer; }
.ct-detail-avatar, .ct-detail-user .ct-card-user { cursor: pointer; }
.ct-comment-avatar, .ct-comment-name { cursor: pointer; }

/* Mentor Panel */
#mentor-overlay { align-items: flex-start; padding: 40px 20px; overflow-y: auto; }
.mentor-modal { max-width: 1000px; }
.mentor-modal .admin-modal-header { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 10%, transparent), transparent 70%); }
.mentor-modal .admin-modal-body { padding: 20px 24px 24px; }
.mentor-title-icon { background: linear-gradient(135deg, var(--purple), color-mix(in srgb, var(--purple) 62%, #000)); }

/* Student list: overview tiles, rows with stats */
.mentor-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mentor-overview:empty { display: none; }
.mentor-overview-stat {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
}
.mentor-overview-val { font-size: 22px; font-weight: 800; color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.mentor-overview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.mentor-overview-stat.attention { border-color: rgba(239,68,68,0.3); }
.mentor-overview-stat.attention .mentor-overview-val { color: #ef4444; }

.mentor-replies { margin-bottom: 16px; padding: 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; }
.mentor-replies-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; }
.mentor-replies-head .settings-card-title { margin: 0; }
.mentor-replies .notif-item:hover { background: var(--bg4); }

.mentor-student { cursor: pointer; }
.mentor-student:hover { background: var(--bg4); }
.mentor-student-stats { display: flex; gap: 16px; flex-shrink: 0; font-size: 12px; color: var(--text-faint); }
.mentor-student-stats b { font-weight: 700; color: var(--text); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.mentor-student-stats .positive b { color: var(--green); }
.mentor-student-stats .negative b { color: var(--red); }
.admin-row-chevron { flex-shrink: 0; color: var(--text-faint); }
@media (max-width: 900px) { .mentor-student-stats { display: none; } }

/* Student journal view */
.mentor-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 6px; margin: 0 0 12px -6px;
    background: none; border: none; border-radius: 8px;
    color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all 0.15s;
}
.mentor-back-btn:hover { color: var(--text); background: var(--bg3); }
.mentor-user-header {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 14px;
}
.mentor-header-avatar { width: 46px; height: 46px; font-size: 18px; }
.mentor-user-header-info { flex: 1; min-width: 0; }
.mentor-user-header-name { font-weight: 700; font-size: 17px; color: var(--text); }
.mentor-user-header-email { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.mentor-trades-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mentor-trades-toolbar .settings-toggle-btn { padding: 7px 14px; }
.mentor-mark-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; }
.mentor-mark-all:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.mentor-trades-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mentor-trades-filters select, .mentor-trades-filters input { padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.mentor-trades-filters select { padding-right: 32px; }
.mentor-date-sep { font-size: 12px; color: var(--text-faint); }
/* Mentor screenshots */
.mentor-screenshots-section { margin-bottom: 16px; padding: 16px; background: rgba(var(--fg-rgb), 0.02); border-radius: 12px; border: 1px solid var(--border); }
.mentor-screenshots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.mentor-ss-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); transition: all 0.15s; }
.mentor-ss-thumb:hover { border-color: var(--accent); transform: scale(1.02); }

.mentor-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--purple) 15%, transparent);
    color: var(--purple);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
}
#mentor-trades-list .trade-item { cursor: pointer; }
#mentor-trades-list .delete-btn { display: none; }
.mentor-reviewed { opacity: 0.6; }
.mentor-reviewed:hover { opacity: 0.9; }
.mentor-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    margin-right: 10px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.mentor-review-btn:hover { color: #22c55e; border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.1); }
.mentor-review-btn.reviewed { color: #22c55e; border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.12); }
.mentor-unreviewed-count {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.mentor-detail-layout {
    display: flex;
    gap: 0;
    min-height: 400px;
}
.mentor-detail-left {
    flex: 7;
    padding-right: 20px;
    overflow-y: auto;
}
.mentor-detail-right {
    flex: 3;
    border-left: 1px solid var(--border);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    min-width: 240px;
}
/* Student feedback split layout (like community trades) */
.student-feedback-layout {
    display: flex;
    gap: 0;
    min-height: 400px;
}
.student-feedback-left {
    flex: 7;
    padding-right: 20px;
    overflow-y: auto;
}
.student-feedback-right {
    flex: 3;
    border-left: 1px solid var(--border);
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    min-width: 380px;
}
.mentor-comments-section {
    margin-top: 12px;
}
.mentor-comments-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--purple);
}
.mentor-comments-header svg { color: var(--purple); }
.mentor-comments-list {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 12px;
    flex: 1;
}
.mentor-comment-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.mentor-comment-item:hover { background: rgba(var(--fg-rgb), 0.03); }
.mentor-comment-item + .mentor-comment-item { border-top: none; }
.mentor-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mentor-comment-avatar-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    font-size: 14px;
    font-weight: 600;
}
.mentor-comment-body { flex: 1; min-width: 0; }
.mentor-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mentor-comment-name { font-weight: 600; font-size: 14px; color: var(--purple); }
.mentor-comment-time { font-size: 12px; color: var(--text-faint); }
.mentor-comment-text { font-size: 15px; color: var(--text); line-height: 1.5; word-break: break-word; }
.mentor-comment-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mentor-comment-input-row input {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}
.mentor-comment-input-row input:focus { border-color: var(--purple); }
.mentor-comment-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--purple);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.mentor-comment-send-btn:hover { opacity: 0.8; }
.ti-mentor-comment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--purple) 15%, transparent);
    color: var(--purple);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}
/* Mentor reply context menu */
.mentor-reply-ctx {
    position: fixed;
    z-index: 999999;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mentor-reply-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.mentor-reply-ctx-item:hover { background: rgba(var(--fg-rgb), 0.06); }
/* Reply preview bar */
.mentor-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--purple) 8%, transparent);
    border-left: 3px solid var(--purple);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-dim);
}
.mentor-reply-preview-content {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.mentor-reply-preview-name { color: var(--purple); font-weight: 600; white-space: nowrap; }
.mentor-reply-preview-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mentor-reply-preview-close {
    background: none; border: none; color: var(--text-faint); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.mentor-reply-preview-close:hover { color: var(--text); }
/* Reply quote in comments */
.mentor-comment-reply-quote {
    padding: 4px 10px;
    margin-bottom: 4px;
    background: color-mix(in srgb, var(--purple) 6%, transparent);
    border-left: 2px solid var(--purple);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.mentor-comment-reply-quote:hover { background: color-mix(in srgb, var(--purple) 10%, transparent); }
.mentor-comment-reply-name { color: var(--purple); font-weight: 600; margin-right: 4px; }
.ti-mentor-comment-badge svg { stroke: var(--purple); }
.mentor-comment-delete {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    opacity: 0;
    transition: all 0.15s;
    line-height: 1;
}
.mentor-comment-item:hover .mentor-comment-delete { opacity: 1; }
.mentor-comment-delete:hover { color: var(--red); }
.mentor-all-reviewed {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

/* === PLAYBOOK === */
.playbook-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 20px;
}
.pb-type-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--bg2);
    border-radius: var(--radius);
    padding: 3px;
    width: fit-content;
}
.pb-type-btn {
    padding: 6px 16px;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.pb-type-btn.active {
    background: var(--accent);
    color: #fff;
}
.pb-type-btn:hover:not(.active) {
    color: var(--text);
}
.pb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pb-toolbar .playbook-subtitle, .pb-toolbar .pb-type-toggle { margin: 0; }

#playbook-list { display: grid; }
#playbook-list > .pb-empty { grid-column: 1 / -1; }

.pb-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pb-card:hover {
    border-color: var(--accent-border);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
/* First example screenshot as a cover, bleeding to the card edges */
.pb-card-cover { margin: -18px -18px 0; aspect-ratio: 16 / 7; background: var(--bg3); border-bottom: 1px solid var(--border); overflow: hidden; }
.pb-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pb-card-header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-card-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
}
.pb-card-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pb-card-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pb-card-trades { font-size: 11px; color: var(--text-faint); }
.pb-card-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Performance panel: P&L + win rate, a win/loss bar, then the smaller numbers */
.pb-card-perf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.pb-card-perf-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pb-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-stat-right { align-items: flex-end; }
.pb-stat-label { font-size: 10px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.pb-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}
.pb-stat-value.green { color: var(--green); }
.pb-stat-value.red { color: var(--red); }
.pb-winbar { height: 5px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.06); overflow: hidden; }
.pb-winbar.has-trades { background: var(--red-bg); }
.pb-winbar-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width 0.4s ease; }
.pb-card-perf-sub { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); }
.pb-card-perf-sub b { color: var(--text-dim); font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-left: 3px; }

.pb-card-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-faint);
}
.pb-card-footer span { display: inline-flex; align-items: center; gap: 5px; }
.pb-card-open { margin-left: auto; color: var(--text-dim); font-weight: 600; transition: color 0.15s; }
.pb-card:hover .pb-card-open { color: var(--accent); }

.pb-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}
.pb-empty svg {
    width: 48px;
    height: 48px;
    stroke: var(--text-faint);
    margin-bottom: 16px;
}
.pb-empty h3 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 6px;
}
.pb-empty p {
    font-size: 13px;
    max-width: 340px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Playbook detail */
.pb-detail-section {
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.pb-detail-section h4 {
    font-size: 12px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.pb-detail-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
}
.pb-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* six stats → two even rows */
    gap: 10px;
    margin-bottom: 20px;
}
.pb-detail-stat {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
}
.pb-detail-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.pb-detail-stat-val.green { color: var(--green); }
.pb-detail-stat-val.red { color: var(--red); }
.pb-detail-stat-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.pb-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
}
/* Checklist items get a check box instead of a dot */
.pb-checklist-bullet {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pb-checklist-bullet::after { content: '✓'; font-size: 11px; font-weight: 800; color: var(--accent); line-height: 1; }
.pb-detail-screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.pb-detail-screenshots img {
    width: 100%;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.pb-detail-screenshots img:hover {
    border-color: var(--accent-border);
    transform: scale(1.02);
}

/* Playbook form screenshots */
.pb-screenshots-zone {
    border: 2px dashed var(--dashed-border);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.pb-screenshots-zone:hover {
    border-color: var(--accent-border);
    background: var(--accent-bg);
}
.pb-screenshots-hint {
    font-size: 12px;
    color: var(--text-dim);
}
.pb-screenshot-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.pb-screenshot-preview .pb-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pb-screenshot-preview .pb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pb-screenshot-preview .pb-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* === ACADEMY === */
.acad-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; padding-bottom: 0;
}
.acad-header-title {
    font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0;
}
.acad-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.acad-upload-btn:hover {
    border-color: var(--accent-border); color: var(--accent);
    background: var(--accent-bg);
}

/* Header progress: "3 of 5 watched" + % + bar */
.acad-header-right { display: flex; align-items: center; gap: 12px; }
.acad-progress {
    display: flex; flex-direction: column; gap: 7px; min-width: 210px;
    padding: 10px 14px; background: var(--card, var(--bg2));
    border: 1px solid var(--border); border-radius: 12px;
}
.acad-progress-text { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
#acad-count { color: var(--accent); font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.acad-progress-bar { height: 5px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.06); overflow: hidden; }
#acad-progress-fill { height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }

.acad-tab-count {
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    background: rgba(var(--fg-rgb), 0.06); color: var(--text-faint);
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
}
.acad-tab.active .acad-tab-count { background: var(--accent-border); color: var(--accent); }

/* "Up next" spotlight: wide card with the thumbnail left and details right */
.acad-item.acad-hero { flex-direction: row; margin-bottom: 24px; }
.acad-hero .acad-thumb { width: 52%; max-width: 580px; }
.acad-hero .acad-play { width: 64px; height: 64px; }
.acad-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 28px; }
.acad-hero-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.acad-hero-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.3; }
.acad-hero-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.acad-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
    transition: filter 0.15s;
}
.acad-hero:hover .acad-hero-cta { filter: brightness(1.1); }
.acad-hero .acad-watched-btn, .acad-hero .acad-comment-btn { font-size: 12px; font-weight: 600; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
@media (max-width: 900px) {
    .acad-item.acad-hero { flex-direction: column; }
    .acad-hero .acad-thumb { width: 100%; max-width: none; }
}
.acad-section-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--text); }
.acad-new-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #fff;
}

/* Tabs - Spotify/Discord style */
/* Tabs as a segmented pill bar */
.acad-tabs {
    display: inline-flex; gap: 4px; margin-bottom: 24px; padding: 4px;
    background: var(--card, var(--bg2)); border: 1px solid var(--border);
    border-radius: 12px; position: relative;
}
.acad-tab {
    padding: 8px 14px; border: 1px solid transparent; border-radius: 9px;
    background: none; color: var(--text-faint); font-size: 13px;
    font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px;
    transition: all 0.15s; position: relative;
}
.acad-tab:hover { color: var(--text); background: rgba(var(--fg-rgb), 0.04); }
.acad-tab.active {
    color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border);
}
.acad-tab svg { opacity: 0.45; transition: opacity 0.15s; }
.acad-tab:hover svg { opacity: 0.7; }
.acad-tab.active svg { opacity: 1; }
.acad-tab-new {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    display: none; flex-shrink: 0;
}

/* Video Card Grid */
.acad-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.acad-item {
    position: relative; display: flex; flex-direction: column;
    background: var(--card, var(--bg2)); border: 1px solid var(--border);
    border-radius: 16px; cursor: pointer; overflow: hidden;
    transition: all 0.15s ease;
}
.acad-item:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.acad-thumb {
    width: 100%; aspect-ratio: 16/9; flex-shrink: 0;
    background-size: cover; background-position: center; background-color: #0a0a0f;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.acad-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.acad-item:hover .acad-thumb::after { background: rgba(0,0,0,0.25); }
.acad-play {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1; transition: all 0.15s; border: 2px solid rgba(255,255,255,0.2);
}
.acad-play svg { color: #fff; margin-left: 2px; }
.acad-item:hover .acad-play {
    transform: scale(1.08); background: rgba(29,185,84,0.7);
    border-color: rgba(29,185,84,0.5);
}
.acad-watched-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.acad-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.acad-title {
    font-size: 14px; font-weight: 700; color: var(--text);
    letter-spacing: -0.2px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.acad-card-footer {
    display: flex; align-items: center; justify-content: space-between;
}
.acad-meta {
    font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 4px;
}
.acad-card-actions {
    display: flex; align-items: center; gap: 2px;
}
.acad-comment-btn {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 4px 6px; border-radius: 6px;
    display: flex; align-items: center; gap: 3px; transition: all 0.15s;
    font-size: 11px;
}
.acad-comment-btn:hover { color: var(--accent); background: var(--accent-bg); }
.acad-comment-count {
    font-size: 10px; font-weight: 700; color: var(--accent);
    font-family: var(--num-font);
}
.acad-del {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    border: none; color: rgba(255,255,255,0.7); cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.15s;
}
.acad-item:hover .acad-del { opacity: 1; }
.acad-del:hover { background: var(--red); color: #fff; }
.acad-item.is-watched { opacity: 0.6; }
.acad-item.is-watched:hover { opacity: 0.85; }

/* Watched button (used in card footer) */
.acad-watched-btn {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 4px 6px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; gap: 3px; transition: all 0.15s; font-size: 11px;
}
.acad-watched-btn:hover { color: var(--accent); background: var(--accent-bg); }
.acad-watched-btn.watched { color: var(--accent); }

/* Comments Modal */
/* Academy comments popup */
.acad-cm-modal { max-width: 640px; background: var(--card, var(--bg2)); }
.acad-cm-head { min-width: 0; gap: 12px; }
.acad-cm-thumb {
    width: 72px; height: 40px; flex-shrink: 0; border-radius: 8px;
    background-color: #000; background-size: cover; background-position: center;
    border: 1px solid var(--border);
}
.acad-cm-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#acad-comments-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; }
.acad-cm-sub { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: 0; }

.acad-comments-list {
    min-height: 180px; max-height: 460px; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}
.acad-comments-list::-webkit-scrollbar { width: 4px; }
.acad-comments-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.acad-comment { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; transition: background 0.15s; }
.acad-comment:hover { background: rgba(var(--fg-rgb), 0.03); }
.acad-comment-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg3); display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--text-dim); overflow: hidden;
}
.acad-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acad-comment-body { flex: 1; min-width: 0; }
.acad-comment-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.acad-comment-name { font-size: 13px; font-weight: 700; color: var(--text); }
.acad-comment-time { font-size: 11px; color: var(--text-faint); }
.acad-comment-text { font-size: 14px; color: var(--text); line-height: 1.5; word-wrap: break-word; }
/* Reply / delete appear on hover as small square buttons */
.acad-comment-reply, .acad-comment-delete {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 8px; cursor: pointer;
    color: var(--text-faint); font-size: 16px; line-height: 1;
    opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.acad-comment:hover .acad-comment-reply, .acad-comment:hover .acad-comment-delete { opacity: 1; }
.acad-comment-reply:hover { color: var(--accent); background: var(--accent-bg); }
.acad-comment-delete:hover { color: var(--red); background: var(--red-bg); }
.acad-reply-quote {
    font-size: 12px; color: var(--text-dim); padding: 5px 10px;
    background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 2px solid var(--accent);
    border-radius: 0 8px 8px 0; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acad-reply-name { font-weight: 700; color: var(--accent); margin-right: 4px; }
.acad-reply-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 16px; min-width: 0;
    background: color-mix(in srgb, var(--accent) 7%, var(--bg2));
    border-top: 1px solid var(--accent-border); font-size: 13px; color: var(--text-dim);
}
.acad-reply-preview > svg { color: var(--accent); flex-shrink: 0; }
.acad-reply-preview strong { color: var(--accent); }
.acad-reply-preview-label { flex-shrink: 0; white-space: nowrap; }
.acad-reply-preview-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); }
.acad-comments-input {
    display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--border); background: rgba(0,0,0,0.12);
}
.acad-comments-input input { flex: 1; min-width: 0; border-radius: 10px; }
.acad-comments-input .btn-primary { width: 44px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.acad-comments-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; padding: 40px 16px; color: var(--text-faint); font-size: 13px;
}
.acad-comments-empty svg { opacity: 0.4; margin-bottom: 4px; }
.acad-comments-empty strong { color: var(--text-dim); font-size: 14px; }
.acad-comment-avatar-clickable { cursor: pointer; }
.acad-comment-name-clickable { cursor: pointer; }
.acad-comment-name-clickable:hover { text-decoration: underline; }

/* Psychology Cards - Vertical list */
.psych-list { display: flex; flex-direction: column; gap: 10px; }
.psych-card {
    position: relative; display: flex; gap: 0;
    background: var(--card, var(--bg2)); border: 1px solid var(--border);
    border-radius: 16px; cursor: pointer; overflow: hidden;
    transition: all 0.15s ease;
}
.psych-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.psych-card.psych-read { opacity: 0.55; }
.psych-card.psych-read:hover { opacity: 0.8; }
.psych-new-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    flex-shrink: 0; margin-top: 7px;
}
.psych-card-body {
    flex: 1; padding: 18px 20px; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.psych-card-header { display: flex; align-items: flex-start; gap: 10px; }
.psych-card-title {
    font-size: 16px; font-weight: 700; color: var(--text);
    letter-spacing: -0.3px; margin: 0; line-height: 1.35; flex: 1;
}
.psych-card-preview {
    font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.psych-card-takeaways { display: flex; flex-wrap: wrap; gap: 5px; }
.psych-takeaway {
    font-size: 11px; color: var(--accent); background: rgba(29,185,84,0.08);
    padding: 4px 10px; border-radius: 20px; font-weight: 600;
}
.psych-takeaway-more { font-size: 11px; color: var(--text-faint); padding: 4px 6px; }
.psych-card-footer {
    display: flex; align-items: center; gap: 10px; margin-top: auto;
    font-size: 11px; color: var(--text-faint);
}
.psych-card-author-row {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.psych-card-author-row:hover .psych-card-author { text-decoration: underline; }
.psych-card-avatar {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg3); display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: var(--text-dim); overflow: hidden;
}
.psych-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.psych-card-author { font-weight: 600; color: var(--accent); }
.psych-card-date { font-size: 11px; color: var(--text-faint); }
.psych-card-img {
    width: 180px; flex-shrink: 0;
    background-size: cover; background-position: center;
    border-left: 1px solid var(--border);
}
.psych-read-btn {
    margin-left: auto; font-size: 11px;
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    display: flex; align-items: center; gap: 4px; transition: all 0.15s;
}
.psych-read-btn:hover { color: var(--accent); background: var(--accent-bg); }
.psych-read-btn.watched { color: var(--accent); }
.psych-card .acad-del {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    border: none; color: rgba(255,255,255,0.7); cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.15s;
}
.psych-card:hover .acad-del { opacity: 1; }

/* Psychology Detail - Premium Article Layout */
.psych-detail-modal {
    max-width: 720px; max-height: 85vh; overflow-y: auto !important; overflow-x: hidden; width: 90vw;
    scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}
.psych-detail-modal::-webkit-scrollbar { width: 5px; }
.psych-detail-modal::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.psych-detail-modal::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.psych-detail-modal::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
.psych-detail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 28px 0; gap: 12px;
}
.psych-detail-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; flex: 1; }
.psych-detail-close {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: transparent; color: var(--text-faint); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0;
}
.psych-detail-close:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); color: var(--red); }
.psych-detail-body { padding: 20px 28px 28px !important; overflow: visible !important; max-height: none !important; }
.psych-detail-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid var(--border); font-size: 13px;
}
.psych-detail-author-row { display: flex; align-items: center; gap: 10px; }
.psych-detail-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg3); display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--text-dim); overflow: hidden;
}
.psych-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.psych-detail-author { font-weight: 700; color: var(--accent); display: block; }
.psych-detail-date { color: var(--text-faint); font-size: 11px; display: block; margin-top: 1px; }
.psych-detail-edit {
    margin-left: auto; background: none; border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer; padding: 5px 8px; border-radius: 6px;
    display: flex; align-items: center; gap: 4px; transition: all 0.15s;
    font-size: 12px;
}
.psych-detail-edit:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); }
.psych-detail-content {
    font-size: 15px; line-height: 1.8; color: var(--text-dim);
    white-space: pre-wrap; margin-bottom: 20px;
}
.psych-detail-images {
    display: flex; flex-direction: column; gap: 12px; margin: 20px 0;
}
.psych-detail-images img {
    width: 100%; border-radius: 10px; border: 1px solid var(--border);
    cursor: pointer; transition: opacity 0.15s;
}
.psych-detail-images img:hover { opacity: 0.9; }
.psych-detail-takeaways {
    margin-top: 24px; padding: 18px 20px;
    background: rgba(29,185,84,0.04); border: 1px solid rgba(29,185,84,0.1);
    border-radius: 12px;
}
/* Psychology Post Modal */
.psych-post-modal { max-width: 720px; width: 90vw; max-height: 90vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.psych-post-modal::-webkit-scrollbar { width: 5px; }
.psych-post-modal::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.psych-post-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.psych-post-header-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.psych-post-body { padding: 16px 24px 24px; }
.psych-post-title-input {
    width: 100%; padding: 12px 0; border: none; border-bottom: 2px solid var(--border);
    background: transparent; color: var(--text); font-size: 20px; font-weight: 700;
    font-family: inherit; outline: none; letter-spacing: -0.3px; margin-bottom: 12px;
    transition: border-color 0.15s;
}
.psych-post-title-input:focus { border-color: var(--accent); }
.psych-post-title-input::placeholder { color: var(--text-faint); }
.psych-post-content-input {
    width: 100%; padding: 12px 0; border: none; background: transparent;
    color: var(--text-dim); font-size: 14px; line-height: 1.8; font-family: inherit;
    outline: none; resize: vertical; min-height: 200px;
}
.psych-post-content-input::placeholder { color: var(--text-faint); }
.psych-post-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.psych-post-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 10px;
}
.psych-post-img-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px; border: 1px dashed var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color 0.15s; margin-top: 6px;
    font-size: 12px; color: var(--text-faint);
}
.psych-post-img-drop:hover { border-color: var(--accent); }
.psych-post-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.psych-detail-takeaways-title {
    font-size: 12px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.psych-detail-takeaway-item {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.psych-detail-takeaway-icon {
    color: var(--accent); font-size: 14px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.psych-detail-takeaway-text {
    font-size: 13px; color: var(--text-dim); line-height: 1.6;
}
.psych-detail-comments {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.psych-detail-comments-title {
    font-size: 12px; font-weight: 700; color: var(--text-dim);
    margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
}
.psych-detail-comment {
    display: flex; gap: 10px; margin-bottom: 10px;
}
.psych-detail-comment-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg3); display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--text-dim); overflow: hidden;
}
.psych-detail-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.psych-detail-comment-body { flex: 1; min-width: 0; }
.psych-detail-comment-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.psych-detail-comment-name { font-size: 12px; font-weight: 700; color: var(--text); }
.psych-detail-comment-time { font-size: 10px; color: var(--text-faint); }
.psych-detail-comment-text { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.psych-detail-comment-del {
    background: none; border: none; color: var(--text-faint); cursor: pointer;
    font-size: 14px; padding: 2px 4px; opacity: 0; transition: all 0.15s;
}
.psych-detail-comment:hover .psych-detail-comment-del { opacity: 1; }
.psych-detail-comment-del:hover { color: var(--red); }
.psych-detail-input {
    display: flex; gap: 8px; margin-top: 12px;
}
.psych-detail-input input { flex: 1; }
.psych-detail-input .btn-primary { padding: 8px 14px; font-size: 12px; }

/* Empty state */
.acad-empty {
    text-align: center; padding: 80px 20px; color: var(--text-faint);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.acad-empty p { font-size: 13px; }

/* ============================================
   COMMUNITIES
   The bar above the chat, the switcher, the
   create/join/settings popups and the empty state.
   ============================================ */

.community-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    /* backdrop-filter makes the bar its own stacking context, so the dropdown's z-index only counts
       inside it. Lift the whole bar above the chat below it (chat-main is position:relative and
       hovered messages get z-index 10), but keep it under the pickers/menus (100+). */
    position: relative;
    z-index: 40;
}
.community-bar #community-settings-btn { width: 34px; height: 34px; padding: 0; justify-content: center; border-color: transparent; color: var(--text-dim); }
.community-bar #community-settings-btn:hover { background: var(--hover-overlay); border-color: var(--border); color: var(--text); }
.community-switcher { position: relative; }
.community-current {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 320px;
    padding: 5px 8px 5px 5px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.community-current:hover, .community-current[aria-expanded="true"] { background: var(--hover-overlay); border-color: var(--border); }
.community-current:focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 1px; }
.community-current .community-avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.community-current .community-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.community-current .community-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform 0.18s ease, color 0.15s; }
.community-current:hover .community-chevron { color: var(--text-dim); }
.community-current[aria-expanded="true"] .community-chevron { transform: rotate(180deg); color: var(--text); }
.community-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.community-avatar.small { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.community-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.community-member-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.community-member-count:empty { padding: 0; background: none; }

.community-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    background: var(--bg3);
    box-shadow: var(--shadow-lg);
    transform-origin: top left;
}
.community-dropdown.is-open { animation: communityDdIn 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes communityDdIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .community-dropdown.is-open { animation: none; }
    .community-current .community-chevron { transition: none; }
}
.community-dd-label {
    padding: 6px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.community-dd-list { max-height: min(360px, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.community-dd-list::-webkit-scrollbar { width: 4px; }
.community-dd-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.community-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.community-dd-item:hover, .community-dd-item:focus-visible { background: var(--hover-overlay-strong); outline: none; }
.community-dd-item.active { background: var(--accent-bg); }
.community-dd-item.active:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.community-dd-item .community-avatar.dd { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.community-dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.community-dd-item.active .community-dd-name { color: var(--text); }
.community-dd-check { flex-shrink: 0; color: var(--accent); }
/* Unread in another community: a count on the switcher, an accent pill and the latest line in the list */
.community-unread-dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.community-dd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.community-dd-text .community-dd-name { flex: none; }
.community-dd-sub, .community-dd-preview { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-dd-preview { color: var(--text-dim); }
.community-dd-item.has-unread .community-dd-name { color: var(--text); font-weight: 700; }
.community-dd-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
}
.community-dd-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.community-dd-action { min-height: 36px; color: var(--text-dim); }
.community-dd-action .community-dd-name { font-weight: 500; }
.community-dd-action:hover, .community-dd-action:focus-visible { color: var(--text); }
.community-dd-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px dashed var(--border-hover);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 700;
}
.community-dd-action:hover .community-dd-icon { border-color: var(--accent-border); color: var(--accent); }
.community-dd-tag {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.community-dd-tag.admin { background: var(--purple-bg); color: var(--purple); }
.community-dd-empty { padding: 10px; color: var(--text-faint); font-size: 12px; text-align: center; }

/* Nothing joined yet */
.community-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.community-empty-card {
    max-width: 420px;
    padding: 36px 32px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg2);
    text-align: center;
}
.community-empty-card svg { color: var(--accent); margin-bottom: 14px; }
.community-empty-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.community-empty-card p { margin: 0 0 22px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.community-empty-actions { display: flex; flex-direction: column; gap: 10px; }

/* Settings popup */
.community-settings-popup { width: min(94vw, 520px); }
.community-settings-popup .signal-popup-body { max-height: 70vh; overflow-y: auto; }
.community-code-row { display: flex; align-items: center; gap: 10px; }
.community-code {
    flex: 1;
    padding: 12px 14px;
    border: 1px dashed var(--accent-border);
    border-radius: 10px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-align: center;
}
.community-code-input {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-align: center;
    text-transform: uppercase;
}
.community-hint { margin: 8px 0 18px; color: var(--text-faint); font-size: 12px; line-height: 1.5; }

.community-member-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
}
.community-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
}
.community-member-row:hover { background: var(--hover-overlay); }
.community-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}
.community-row-actions { display: flex; gap: 6px; transition: opacity 0.15s; }
.community-row-btn {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg4);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.community-row-btn:hover { border-color: var(--border-hover); color: var(--text); }
.community-row-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.community-delete-btn { width: 100%; margin-top: 4px; }

/* Owner and admin marks in the Online panel */
.chat-member-role { font-size: 11px; line-height: 1; }
.chat-member-role.admin { color: var(--purple); }

/* Whose menu this is */
.chat-ctx-header {
    padding: 8px 12px 6px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   A TRADE SHARED IN CHAT
   ============================================ */

.chat-trade-wrap { cursor: pointer; }
.chat-trade-card {
    --td: var(--accent);
    position: relative;
    overflow: hidden;
    width: min(100%, 400px);
    margin: 6px 0 2px;
    padding: 12px 14px 10px 17px;
    border-radius: 12px;
    border: 1px solid var(--border-hover);
    background: color-mix(in srgb, var(--bg2) 94%, transparent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.chat-trade-card.win { --td: var(--green); }
.chat-trade-card.loss { --td: var(--red); }
.chat-trade-card.be { --td: var(--text-dim); }
/* Result color as a thin accent stripe on the left instead of a colored border */
.chat-trade-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--td);
}
.chat-trade-wrap:hover .chat-trade-card {
    border-color: color-mix(in srgb, var(--text) 18%, transparent);
    background: var(--bg3);
    transform: translateY(-1px);
}
.chat-trade-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.chat-trade-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.chat-trade-main { display: flex; align-items: center; gap: 12px; }
.chat-trade-dir {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--td) 14%, transparent);
    color: var(--td);
    flex-shrink: 0;
}
.chat-trade-instr-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-trade-instr {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-trade-sub {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.chat-trade-pnl-col { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.chat-trade-pnl { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chat-trade-pnl.positive { color: var(--green); }
.chat-trade-pnl.negative { color: var(--red); }
.chat-trade-rr { color: var(--text-faint); font-size: 11px; font-weight: 600; }
.chat-trade-title {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.chat-trade-cta {
    margin-top: 8px;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The share picker */
.chat-share-popup { width: min(94vw, 520px); }
.chat-share-popup #chat-share-list {
    max-height: 240px;
    overflow-y: auto;
    margin: 10px 0;
}
.chat-share-preview:not(:empty) { margin-bottom: 14px; }

/* A shared trade in the detail popup has no mentor column */
/* A shared trade has no mentor column, so the popup scrolls as one piece */
.shared-trade-layout { display: block; min-height: 0; }
.shared-trade-layout .student-feedback-left { overflow: visible; padding-right: 0; flex: none; }
.shared-by-row {
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--subtle-bg);
    color: var(--text-dim);
    font-size: 12.5px;
}
.shared-by-row strong { color: var(--text); }

/* A community's own image, in the bar, the switcher and settings */
.community-avatar.has-img { background: none; }
.community-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}
.community-avatar.large { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }

.community-icon-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.community-icon-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.community-icon-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.community-icon-btns { display: flex; gap: 6px; }

/* A member's own picture in the settings lists, and the row reacts to a click */
.community-row-avatar {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}
.community-member-row[data-member-uid] { cursor: pointer; }

/* The left column of the trade popup scrolls, so it needs the app's scrollbar too —
   without this Windows draws its own until the modal itself starts scrolling. */
.student-feedback-left,
.student-feedback-right,
.mentor-comments-list {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.student-feedback-left::-webkit-scrollbar,
.student-feedback-right::-webkit-scrollbar,
.mentor-comments-list::-webkit-scrollbar { width: 4px; }
.student-feedback-left::-webkit-scrollbar-track,
.student-feedback-right::-webkit-scrollbar-track,
.mentor-comments-list::-webkit-scrollbar-track { background: transparent; }
.student-feedback-left::-webkit-scrollbar-thumb,
.student-feedback-right::-webkit-scrollbar-thumb,
.mentor-comments-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.student-feedback-left::-webkit-scrollbar-thumb:hover,
.student-feedback-right::-webkit-scrollbar-thumb:hover,
.mentor-comments-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ============================================
   MENTORSHIP
   The owner's switch, and each member's own answer.
   ============================================ */

.mentorship-card {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--subtle-bg);
}
.mentorship-card.on {
    border-color: color-mix(in srgb, var(--purple) 25%, transparent);
    background: color-mix(in srgb, var(--purple) 5%, transparent);
}
.mentorship-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mentorship-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.mentorship-card .community-hint { margin: 0 0 14px; }
.mentorship-btn { width: 100%; }
.community-dd-tag.sharing { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); }

/* Asking a member whether their journal may be seen */
.consent-popup { width: min(94vw, 480px); }
.consent-popup .signal-popup-header h3 { font-size: 16px; line-height: 1.4; }
.consent-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.consent-lead strong { color: var(--text); }
.consent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.consent-item {
    position: relative;
    padding: 10px 12px 10px 34px;
    border-radius: 9px;
    background: var(--subtle-bg);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}
.consent-item::before {
    position: absolute;
    left: 12px;
    top: 9px;
    font-size: 13px;
    font-weight: 700;
}
.consent-item.yes::before { content: '!'; color: var(--yellow); }
.consent-item.no::before { content: '\2713'; color: var(--green); }
.consent-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.consent-actions button { flex: 1; }

/* The owner looking at the question before it goes out */
.mentorship-btns { display: flex; flex-direction: column; gap: 8px; }
.mentorship-btns .community-row-btn { width: 100%; padding: 8px; }
.consent-preview-tag {
    margin: -2px -2px 0;
    padding: 8px 16px;
    border-radius: 14px 14px 0 0;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

/* Owner / Mod / Mentor, in the member lists and the Online panel */
.community-dd-tag.mod { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.community-dd-tag.mentor { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); }
.community-row-btn.on { border-color: var(--accent-border); color: var(--accent); background: var(--accent-subtle); }
.community-preview-btn { width: 100%; margin-bottom: 8px; padding: 8px; }
.mentorship-card .mentorship-head .community-row-avatar,
.mentorship-card .mentorship-head .community-avatar { flex-shrink: 0; }

/* The popup bodies scroll, so they need the app scrollbar — Windows draws one with arrows otherwise */
.signal-popup-body,
.community-settings-popup .signal-popup-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
.signal-popup-body::-webkit-scrollbar { width: 4px; }
.signal-popup-body::-webkit-scrollbar-track { background: transparent; }
.signal-popup-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }
.signal-popup-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* Three buttons and two tags do not fit beside a name on one line — let them wrap
   instead of crushing the name to an ellipsis, and stop hiding them until hover. */
.community-member-row { flex-wrap: wrap; row-gap: 8px; }
.community-row-name { flex: 1 1 90px; min-width: 0; }
.community-row-actions { opacity: 1; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.community-member-row:hover .community-row-actions { opacity: 1; }

/* One short line above the mentor rows instead of a paragraph in every card */
.mentors-hint { margin: -6px 0 10px; }

/* Push the role marks to the end of the row so they line up down the column
   instead of trailing each name at a different spot */
.chat-member-info { flex: 1; }

/* Role marks: quiet line icons in the theme grey, no coloured pill. They step
   forward a little when you hover the row, and the tooltip still names them. */
.chat-member-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--text-faint);
    opacity: 1;
    transition: color 0.12s;
}
.chat-member-role + .chat-member-role { margin-left: 5px; }
.chat-member-role svg { display: block; }
.chat-member-role.owner,
.chat-member-role.mod,
.chat-member-role.mentor { color: var(--text-faint); }
.chat-member:hover .chat-member-role { color: var(--text-dim); }

/* The owner is the top role — the only mark that carries colour */
.chat-member-role.owner { color: var(--yellow); }
.chat-member:hover .chat-member-role.owner { color: var(--yellow); filter: brightness(1.15); }

/* The roles someone holds in the community you opened their profile from */
.user-popup-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.user-popup-roles:empty { display: none; }

/* Your own row in the member list */
.community-row-you { color: var(--text-faint); font-weight: 500; }

.community-row-you { margin-left: 7px; }

/* Typing a word to confirm something that cannot be undone */
.type-confirm-popup { width: min(94vw, 440px); }
.type-confirm-popup .signal-popup-header h3 { color: var(--red); }
.type-confirm-popup .consent-lead { margin-bottom: 18px; }
.type-confirm-input { text-align: center; letter-spacing: 0.08em; font-weight: 600; }
.type-confirm-ok:disabled { opacity: 0.4; cursor: not-allowed; }
.signal-label strong { color: var(--red); letter-spacing: 0.06em; }

/* ============================================
   PAYWALL
   Shown when the subscription has run out. It sits over
   everything, but it is a prompt, not the lock — the lock
   is in the database rules.
   ============================================ */

.paywall-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: rgba(8, 9, 13, 0.92);
    backdrop-filter: blur(6px);
    -webkit-app-region: drag;
}
.paywall-card {
    width: min(94vw, 420px);
    padding: 36px 34px 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(120% 120% at 50% 0%, var(--accent-subtle) 0%, transparent 60%),
        var(--bg2);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    text-align: center;
    -webkit-app-region: no-drag;
}
.paywall-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 18px;
}
.paywall-card h2 {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.paywall-card > p {
    margin: 0 0 22px;
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.6;
}
.paywall-perks {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 24px;
    text-align: left;
}
.paywall-perk {
    position: relative;
    padding: 10px 12px 10px 34px;
    border-radius: 9px;
    background: var(--subtle-bg);
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.paywall-perk::before {
    content: '\2713';
    position: absolute;
    left: 13px;
    top: 9px;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}
.paywall-btn { width: 100%; margin-bottom: 9px; }
.paywall-foot {
    margin: 14px 0 0;
    color: var(--text-faint);
    font-size: 11.5px;
    line-height: 1.5;
}

/* The quiet countdown in the sidebar while a trial runs out */
.sub-status {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    padding: 7px 10px;
    border: 1px solid var(--accent-border);
    border-radius: 9px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s;
}
.sub-status:hover { background: var(--accent-bg); }

/* The subscription card in Settings */
.sub-plan-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sub-plan-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sub-plan-state { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sub-plan-when { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.sub-plan-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sub-plan-badge.active { background: var(--green-bg); color: var(--green); }
.sub-plan-badge.trial { background: var(--accent-bg); color: var(--accent); }
.sub-plan-badge.warn { background: rgba(227,179,65,0.12); color: var(--yellow); }
.sub-plan-badge.off { background: var(--bg4); color: var(--text-faint); }
.sub-plan-actions { display: flex; flex-direction: column; gap: 8px; }
.sub-plan-actions:empty { display: none; }
.sub-plan-actions button { width: 100%; }

/* ============================================
   The subscription card carries its own colour and a
   light at the top, so the one card about money does not
   read as another row of preferences. The colour follows
   the state: green while it runs, amber when it needs
   attention, grey when there is nothing.
   ============================================ */

.settings-sub-card {
    --sc: var(--accent);
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--sc) 26%, var(--border));
    background:
        radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--sc) 11%, transparent) 0%, transparent 58%),
        var(--bg2);
}
.settings-sub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sc), transparent 75%);
}
.settings-sub-card.sub-state-active { --sc: var(--green); }
.settings-sub-card.sub-state-trial  { --sc: var(--accent); }
.settings-sub-card.sub-state-warn   { --sc: var(--yellow); }
.settings-sub-card.sub-state-off    { --sc: var(--text-faint); }

.settings-sub-card .settings-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sc);
}
.settings-sub-card .sub-plan-state {
    font-size: 18px;
    letter-spacing: -0.02em;
}
.settings-sub-card .sub-plan-row { align-items: center; }
.settings-sub-card .sub-plan-badge {
    background: color-mix(in srgb, var(--sc) 14%, transparent);
    color: var(--sc);
}

/* ============================================
   TOASTS
   An icon in its own tinted square instead of a stripe down
   the side, and a line at the bottom that drains so you can
   see it is about to leave on its own.
   The older toasts with an Undo button keep their own look.
   ============================================ */

.toast.toast-msg {
    --tc: var(--green);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 13px;
    border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--border));
    border-left-width: 1px;
    border-radius: 13px;
    background:
        radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--tc) 13%, transparent) 0%, transparent 62%),
        color-mix(in srgb, var(--bg3) 92%, transparent);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(var(--fg-rgb),  0.04);
    overflow: hidden;
    animation: toastPop 0.32s cubic-bezier(0.22, 1.2, 0.36, 1), toastOut 0.3s ease 2.5s forwards;
}
.toast.toast-msg.success { --tc: var(--green); }
.toast.toast-msg.error   { --tc: var(--red); }
.toast.toast-msg.warning { --tc: var(--yellow); }
.toast.toast-msg.info    { --tc: var(--accent); }

.toast-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--tc) 16%, transparent);
    color: var(--tc);
}
.toast-icon svg { display: block; }

.toast-text {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    padding-right: 4px;
}

/* Drains over the time the toast is on screen */
.toast.toast-msg::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--tc);
    opacity: 0.45;
    transform-origin: left;
    animation: toastDrain 2.8s linear forwards;
}

@keyframes toastPop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastDrain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ============================================
   TAGS
   A tag reads as a tag when it wears a hash. The hash is
   added in the stylesheet so it appears everywhere at once
   and never ends up saved in the data.
   ============================================ */

.ti-tag::before,
.td-tag::before { content: '#'; opacity: 0.45; margin-right: 1px; }
.tag-hash { opacity: 0.45; margin-right: 1px; }

/* Suggestions: the ones you actually use, then the starters */
.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.tag-suggestions:empty { display: none; }

.tag-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg3);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.tag-suggestion:hover {
    border-color: var(--accent-border);
    background: var(--accent-subtle);
    color: var(--accent);
}

/* Ones you have written before carry a little weight; the starters stay quiet */
.tag-suggestion.used { color: var(--text); border-color: var(--border-hover); }
.tag-suggestion.starter { opacity: 0.72; border-style: dashed; }

.tag-count {
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--hover-overlay-strong);
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tag-suggestion:hover .tag-count { color: var(--accent); }

/* ============================================
   RECAP CARDS
   The day's numbers as one strip with hairline dividers,
   rather than four pills of different widths. The badges
   sit on their own line so the card has a top and a body
   instead of two rows of tablets.
   ============================================ */

.recap-card { padding: 20px; gap: 16px; }

/* Numbers: value over label, dividers between */
.recap-card-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.recap-card-stats .recap-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 8px;
    border: none;
    background: none;
    border-radius: 0;
}
.recap-card-stats .recap-stat + .recap-stat { border-left: 1px solid var(--border); }

.recap-stat-val {
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.recap-stat-val.green { color: var(--green); }
.recap-stat-val.red { color: var(--red); }
.recap-stat-val i { font-style: normal; }
.recap-stat-val i.green { color: var(--green); }
.recap-stat-val i.red { color: var(--red); }
.recap-stat-val i.sep { color: var(--text-faint); margin: 0 3px; font-weight: 500; }

.recap-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

/* Badges: quieter, and on their own line above the numbers */
.recap-mood-badge,
.recap-rules-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 7px;
}

/* The writing is the point of the card, so give it room */
.recap-card-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dim);
}
.recap-card-main { gap: 14px; }

/* No mentor has access, so there is no second column to leave room for */
.student-feedback-layout:has(> .student-feedback-right[style*="display:none"]) .student-feedback-left {
    padding-right: 0;
    flex: 1;
}

/* A calmer weight: at this size 600 reads as bold on every row at once, which leaves the current
   page nothing to stand out with. No extra letter-spacing: Plus Jakarta Sans is already open. */
.nav-btn {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.nav-btn.active { font-weight: 650; }

/* ============================================
   SIDEBAR
   The active page is marked by a solid bar at the edge and
   a tinted box behind its icon, instead of a wash that
   fades out — so it is obvious at a glance which page you
   are on. The section labels are left exactly as they were.
   ============================================ */

/* The active page: a decisive edge, not a gradient */
.nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* The icon gets its own tile once the row is active, which gives the whole
   list a rhythm instead of a row of loose glyphs */
.nav-btn svg:first-of-type {
    flex-shrink: 0;
    box-sizing: content-box;
    transition: background 0.15s;
}

/* Level progress under the name: the number never said how close you were */
.sidebar-xp-bar {
    overflow: hidden;
}
.sidebar-xp-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    transition: width 0.4s ease;
}
.sidebar-xp-bar.maxed i { background: linear-gradient(90deg, var(--yellow), var(--green)); }

/* The profile grid only declared two rows, so the XP bar landed in an implicit one
   that ran the whole width. Give it a real row, under the text and nothing else. */
.sidebar-profile-btn { grid-template-rows: auto auto auto; }

/* One signal is enough for the current page. The bar at the edge says it; the tinted
   box behind the icon and a wash across the row on top of that made it a blob. */
.nav-btn.active::before { top: 8px; bottom: 8px; }

/* ============================================
   SIDEBAR — one pass, replacing the patches above
   Rows become pills that sit inside the panel instead of
   running into its edge, so the current page is a shape
   rather than a wash. The section labels are untouched.
   ============================================ */

/* A pill you can see the edges of */
.nav-btn:hover { background: var(--hover-overlay-strong); }

/* The current page: a filled pill. No edge bar and no tile behind the icon —
   with the row already inset, one shape says it on its own. */
.nav-btn.active {
    background: var(--accent-bg);
    color: var(--text);
}
.nav-btn.active::before { display: none; }
.nav-btn.active svg:first-of-type { background: none; color: var(--accent); }
.nav-btn svg:first-of-type { padding: 0; margin: 0; border-radius: 0; }

/* --- Bottom --- */

/* Primary action, but a button rather than a slab across the panel */
.new-trade-btn.nav-btn {
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, var(--green) 0%, color-mix(in srgb, var(--green) 86%, #000) 100%);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
}
.new-trade-btn.nav-btn:hover {
    filter: brightness(1.07);
}
.new-trade-btn.nav-btn:active { transform: translateY(1px); }

/* The profile reads as one card, not a row of loose parts */
.nav-btn.sidebar-profile-btn {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg3);
}
.nav-btn.sidebar-profile-btn:hover {
    border-color: var(--border-hover);
    background: var(--bg4);
}
.sidebar-profile-name { font-size: 12.5px; font-weight: 700; }
.sidebar-profile-sub { font-size: 10.5px; }

/* Level progress, sized to the name it sits under */
.sidebar-xp-bar {
    grid-column: 2 / 3;
    grid-row: 3;
    height: 3px;
    margin: 5px 0 1px 8px;
    max-width: 96px;
    border-radius: 2px;
    background: var(--hover-overlay-strong);
}

/* White on the green reads better than the dark ink I tried */
.new-trade-btn.nav-btn { color: #fff; }
.new-trade-btn.nav-btn svg:first-of-type { color: #fff; }

/* The level bar goes; the number under the name is enough */
.sidebar-xp-bar { display: none; }

/* The profile card was sitting almost against the panel edge, so it read as part of
   the wall rather than as a card. Give the whole bottom section a real gutter. */
.sidebar-bottom { padding: 6px 12px 12px; }
.nav-btn.sidebar-profile-btn { padding: 9px 11px; }

/* The glow bled past the edges and made the button look wider than the card below it,
   and the original rule wins on radius with !important — so match the card here. */
.new-trade-btn.nav-btn {
    border-radius: 12px !important;
    padding: 11px 12px !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.new-trade-btn.nav-btn:hover {
    box-shadow: 0 3px 14px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Recaps are writing, not tiles. Three columns made a single entry look like two were
   missing, and a long paragraph in a 440px column beside empty space reads as a mistake.
   One column, capped at a comfortable measure, reads as a feed. */
.recaps-list {
    grid-template-columns: minmax(0, 720px);
    justify-content: start;
}

/* Line the section labels up with the nav icons instead of sitting 6px further in —
   same left edge down the whole panel. Styling untouched, only the position. */
.nav-separator { padding-left: 12px; }

/* ============================================
   PROFILE
   The banner and the identity used to be two boxes glued
   together, so the picture was decoration and the name
   lived in a grey slab underneath. They are one card now:
   the name, level and progress sit on the image, over a
   scrim dark enough to read against anything.
   ============================================ */

.profile-hero {
    position: relative;
    display: block;
    min-height: 220px;
    margin-bottom: 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    background-color: var(--bg3);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Reads against a bright banner, a dark one, or no banner at all */
.profile-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.88) 100%);
}

.profile-hero-body {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 0 26px 22px;
    min-height: 220px;
    box-sizing: border-box;
}

.profile-hero .profile-avatar {
    width: 84px;
    height: 84px;
    margin: 0;
    font-size: 34px;
    align-self: flex-end;
    border: 3px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.profile-info { flex: 1; min-width: 0; padding-bottom: 4px; }

.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-hero .profile-name {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.profile-level-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 7px;
}
.profile-hero .profile-level {
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.01em;
}
.profile-hero .profile-xp-text {
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

/* A level meter, not a loading bar across the whole page */
.profile-hero .profile-xp-bar {
    width: 240px;
    max-width: 100%;
    height: 5px;
    margin: 0;
    border-radius: 3px;
    background: rgba(255,255,255,0.16);
}
.profile-hero .profile-xp-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
}

.profile-banner-edit { z-index: 2; }

/* ---- Stats: one strip, hairlines between, like the recap cards ---- */
.profile-stats-strip {
    display: flex;
    margin-bottom: 18px;
    padding: 16px 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg2);
}
.profile-stats-strip .profile-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: none;
    border-radius: 0;
    background: none;
}
.profile-stats-strip .profile-stat + .profile-stat {
    border-left: 1px solid var(--border);
}
.profile-stats-strip .profile-stat-val {
    font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.profile-stats-strip .profile-stat-val.positive { color: var(--green); }
.profile-stats-strip .profile-stat-val.negative { color: var(--red); }
.profile-stats-strip .profile-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

/* ---- Name colours as dots, not a row of loud tiles ---- */
.namecolor-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.namecolor-swatch.active {
    border-color: var(--text);
    transform: scale(1.12);
}

/* The reveal hung off .profile-banner, which no longer exists — the hero is one card now.
   Moved to the top corner too, since the bottom belongs to the name and level. */
.profile-hero:hover .profile-banner-edit { opacity: 1; }
.profile-banner-edit {
    top: 10px;
    right: 10px;
    bottom: auto;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
}
.profile-banner-edit:hover { background: rgba(0,0,0,0.75); }

/* ============================================
   FIRST RUN — pick a name
   The second card in the sign-in overlay. Same shell as
   the Google step so it feels like one flow, not a
   different screen.
   ============================================ */

.profile-setup-card.setup-step2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.setup-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 22px 0 8px;
    border: 2px dashed var(--border-hover);
    border-radius: 50%;
    background: var(--bg3) center/cover no-repeat;
    color: var(--text-faint);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.15s, transform 0.12s;
}
.setup-avatar:hover { border-color: var(--accent); transform: scale(1.03); }
.setup-avatar.has-img { border-style: solid; border-color: var(--accent-border); }
.setup-avatar-letter {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-faint);
}
.setup-avatar.has-img .setup-avatar-letter { display: none; }

.setup-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--bg2);
    background: var(--accent);
    color: #fff;
}
.setup-avatar-hint {
    color: var(--text-faint);
    font-size: 11px;
    margin-bottom: 22px;
}

.setup-label {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 7px;
}
.setup-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg3);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s;
}
.setup-input:focus { border-color: var(--accent-border-strong); }

/* Says what is wrong while you type, rather than after you submit */
.setup-hint {
    align-self: flex-start;
    margin: 7px 0 22px;
    font-size: 11.5px;
    color: var(--text-faint);
}
.setup-hint.good { color: var(--green); }
.setup-hint.bad { color: var(--red); }

.setup-done-btn { width: 100%; }
.setup-done-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* The card had the dark theme's blue-greys baked in as raw rgb, so it ignored whichever
   theme was actually on. Use the variables and it follows the app. */
.profile-setup-overlay {
    background: radial-gradient(ellipse at 50% 0%,
        color-mix(in srgb, var(--accent) 8%, transparent) 0%,
        color-mix(in srgb, var(--bg) 97%, transparent) 60%);
}
.profile-setup-card {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg3) 96%, transparent) 0%,
        color-mix(in srgb, var(--bg2) 98%, transparent) 100%);
    border-color: var(--border);
}

/* A pencil with a word beats a camera glyph here — it says what the click does */
.profile-banner-edit {
    width: auto;
    height: auto;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ============================================
   MAINTENANCE
   Covers everything below the title bar, so the window can
   still be dragged and closed while the app is held shut.
   ============================================ */

.maint-overlay {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
}
.maint-card {
    width: min(94vw, 400px);
    padding: 38px 34px 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--yellow) 9%, transparent) 0%, transparent 60%),
        var(--bg2);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.maint-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--yellow) 13%, transparent);
    color: var(--yellow);
}
.maint-card h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.maint-card p {
    margin: 0 0 24px;
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.6;
}
.maint-card button { width: 100%; }

/* The reminder an admin sees, so it never gets left on by accident */
.maint-admin-bar {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: color-mix(in srgb, var(--yellow) 14%, var(--bg2));
    border-bottom: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 600;
}
.maint-admin-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
    animation: maintPulse 1.8s ease-in-out infinite;
}
@keyframes maintPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.maint-admin-bar button {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
    border-radius: 7px;
    background: transparent;
    color: var(--yellow);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}
.maint-admin-bar button:hover { background: color-mix(in srgb, var(--yellow) 18%, transparent); }

/* Only in preview: a way out, since nothing is actually broken */
.maint-overlay.is-preview .maint-card::after {
    content: "Preview — click outside or press Esc";
    display: block;
    margin-top: 14px;
    color: var(--text-faint);
    font-size: 11px;
}
.admin-maint-preview { width: 100%; margin-top: 12px; }

/* No window frame in a browser tab — the buttons would be dead controls */
.titlebar-web .titlebar-controls { display: none; }
.titlebar-web { -webkit-app-region: none; }

/* Risk HUD button while the HUD is open */

/* Toolbox in the title bar: menu-bar style items right after the app name, behind a thin divider.
   More tools can join the group; the web app shows it too. */
.titlebar-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
    height: 16px;
    position: relative;
    -webkit-app-region: no-drag;
}
.tb-tool {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-faint);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.tb-tool:hover { background: var(--hover-overlay-strong); color: var(--text); }
.tb-tool.hud-on { color: var(--accent); background: var(--accent-subtle); }
/* Until the HUD has been opened once */
.tb-tool-new {
    position: absolute;
    top: 2px;
    left: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg2);
}
.tb-tool-new[hidden] { display: none; }

/* Mini intro under the Risk HUD button, on hover (instead of the browser tooltip) */
.tb-tool-pop {
    position: absolute;
    top: calc(100% + 14px);
    left: 2px;
    width: 284px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg2);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 1000;
}
.tb-tool:not(.pop-off):hover + .tb-tool-pop,
.tb-tool:not(.pop-off):focus-visible + .tb-tool-pop {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
}
.tb-tool-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tb-tool-pop-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 9px;
    color: var(--accent); background: var(--accent-subtle);
}
.tb-tool-pop-icon svg { stroke: var(--accent); }
.tb-tool-pop-head div strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.tb-tool-pop-head div span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.tb-tool-pop-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-tool-pop-steps li {
    counter-increment: step;
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12px; line-height: 1.4; color: var(--text-dim);
}
.tb-tool-pop-steps li::before {
    content: counter(step);
    flex-shrink: 0;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: var(--text); background: var(--hover-overlay-strong);
}
.tb-tool-pop-foot {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-faint);
}
/* The page content stacks above the title bar: lift it while the intro is showing */
.titlebar:has(.tb-tool:not(.pop-off):hover),
.titlebar:has(.tb-tool:focus-visible) { z-index: 5000; }

/* NY open countdown, next in the toolbox: not a button, just a quiet readout with its own hover card.
   A thin divider separates it from the Risk HUD (none when the HUD button is hidden). */
.tb-mkt-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 16px;
}
.tb-mkt-wrap[hidden] { display: none; }
#btn-risk-hud:not([style*="none"]) ~ .tb-mkt-wrap { margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--border); }
.tb-mkt { cursor: default; gap: 7px; }
.tb-mkt:focus-visible { outline: 1px solid var(--border-hover); outline-offset: -1px; }
.tb-mkt-lead { display: flex; gap: 4px; white-space: nowrap; }
.tb-mkt-time {
    font-family: var(--num-font);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-dim);
}
.tb-mkt:hover .tb-mkt-time { color: var(--text); }
.tb-mkt-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text-faint);
    opacity: 0.7;
}
/* Last 15 minutes before the bell, and the session itself */
.tb-mkt-wrap[data-state="soon"] .tb-mkt-dot { background: var(--yellow); opacity: 1; animation: maintPulse 1.6s ease-in-out infinite; }
.tb-mkt-wrap[data-state="soon"] .tb-mkt-time { color: var(--yellow); }
.tb-mkt-wrap[data-state="open"] .tb-mkt-dot { background: var(--green); opacity: 1; box-shadow: 0 0 0 3px var(--green-bg); }
@media (prefers-reduced-motion: reduce) { .tb-mkt-wrap[data-state="soon"] .tb-mkt-dot { animation: none; } }

.tb-mkt-pop { width: 260px; }
.tb-mkt-rows { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.tb-mkt-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.tb-mkt-rows dt { color: var(--text-faint); }
.tb-mkt-rows dd {
    margin: 0;
    color: var(--text);
    font-family: var(--num-font);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.tb-mkt-note {
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--yellow);
    background: color-mix(in srgb, var(--yellow) 10%, transparent);
}
.tb-mkt-note[hidden] { display: none; }

/* Narrow window: drop the words, then the readout */
@media (max-width: 760px) { .tb-mkt-verb { display: none; } }
@media (max-width: 560px) { .tb-mkt-wrap { display: none; } }

/* === Member list (right side of chat), 2.2 look ===
   Discord-style rows: 32px avatar with a presence badge cut into it, name in the member's
   colour, a quiet second line (custom status / on phone / typing), one role mark at the end. */
.chat-members { --member-panel-bg: color-mix(in srgb, var(--bg2) 55%, var(--bg)); }

.chat-members-header,
.chat-members-divider {
    gap: 0;
    padding: 18px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.chat-members-header::before { content: none; }
.chat-members-list .chat-members-divider { padding: 18px 10px 6px; }
/* "Online — 3" */
.chat-members-header .chat-members-count,
.chat-members-divider .chat-members-count {
    margin-left: 0;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.chat-members-header .chat-members-count::before,
.chat-members-divider .chat-members-count::before { content: '—'; margin: 0 5px; opacity: 0.7; }

.chat-members-list { gap: 2px; }
.chat-members-list .chat-member {
    --ring: var(--member-panel-bg);
    gap: 10px;
    min-height: 42px;
    padding: 5px 8px 5px 10px;
    border-radius: 8px;
    transition: background 0.12s, opacity 0.15s;
}
.chat-members-list .chat-member:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
    --ring: color-mix(in srgb, var(--text) 6%, var(--member-panel-bg));
}
.chat-members-list .chat-member:active { background: color-mix(in srgb, var(--text) 9%, transparent); }

/* Avatar: picture, or the first letter on a soft gradient of their name colour */
.chat-members-list .chat-member-avatar { box-shadow: 0 1px 2px rgb(0 0 0 / 0.18); }
.chat-members-list .chat-member-avatar-letter {
    --member-tint: var(--accent);
    border: none;
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--member-tint) 62%, var(--bg4)),
        color-mix(in srgb, var(--member-tint) 28%, var(--bg3)));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
}

/* Presence badge: a ring in the panel colour, so it looks cut out of the avatar */
.chat-members-list .chat-member-status {
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 3px solid var(--ring);
    background: var(--green);
    transition: border-color 0.12s;
}
.chat-members-list .chat-member-status.idle {       /* moon */
    background: radial-gradient(circle at 22% 22%, var(--ring) 0 2.9px, var(--yellow) 3.3px);
}
.chat-members-list .chat-member-status.dnd {        /* red with a bar */
    background: linear-gradient(var(--ring), var(--ring)) center / 5px 2px no-repeat, var(--red);
}
.chat-members-list .chat-member-status.offline {    /* hollow grey ring */
    background: radial-gradient(circle, var(--ring) 0 1.9px, var(--text-faint) 2.3px);
}

.chat-members-list .chat-member-info { flex: 1; min-width: 0; gap: 1px; }
.chat-members-list .chat-member-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.chat-member-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-faint);
}
.chat-member-sub svg { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.chat-member:hover .chat-member-sub { color: var(--text-dim); }
/* Typing takes over the second line — same height, so nothing jumps */
.chat-member.is-typing .chat-member-sub { display: none; }
.chat-members-list .chat-member-typing { line-height: 1.3; }

/* Offline: dimmed and grey, brighter on hover */
.chat-members-list .chat-member.offline { opacity: 0.5; }
.chat-members-list .chat-member.offline .chat-member-avatar { filter: grayscale(1); }
.chat-members-list .chat-member.offline:hover { opacity: 0.85; }

/* One role mark: a small tinted tile, the tooltip names every role */
.chat-members-list .chat-member-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: var(--text-faint);
    opacity: 0.9;
    filter: none;
    transition: opacity 0.12s, background 0.12s;
}
.chat-members-list .chat-member-role.owner { color: var(--yellow); }
.chat-members-list .chat-member-role.mod { color: var(--blue); }
.chat-members-list .chat-member-role.mentor { color: var(--purple); }
.chat-members-list .chat-member:hover .chat-member-role { opacity: 1; background: color-mix(in srgb, currentColor 20%, transparent); }

/* Voice block above the list, in the same rhythm */
.voice-section-title { padding: 8px 10px 6px; letter-spacing: 0.06em; color: var(--text-faint); }
.voice-channel-row { border-radius: 8px; }
.voice-member { border-radius: 6px; }
.voice-member.speaking .voice-member-avatar { box-shadow: 0 0 0 2px var(--member-panel-bg, var(--bg2)), 0 0 0 4px var(--green); }

/* How XP works (profile page) */
.xp-how-intro { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.5; }
.xp-how-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xp-how-table th { background: none; border-radius: 0; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); }
.xp-how-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.xp-how-table td:last-child { color: var(--text-dim); }
.xp-how-table tr:last-child td { border-bottom: none; }
.xp-how-amount { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
.xp-how-levels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.xp-how-level { display: inline-flex; gap: 6px; align-items: baseline; font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.xp-how-level b { font-weight: 600; color: var(--text-faint); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.xp-how-level.current { border-color: var(--accent); color: var(--text); }
@media (max-width: 600px) {
    .xp-how-table th:last-child, .xp-how-table td:last-child { display: none; }
}

/* Weekly review: mark the week done */
/* Weekly review "done" bar: slim, quiet banner inside the Weekly Review grid */
.wr-review-done {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card);
}
.wr-review-done::before {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--accent-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.wr-review-done-text { flex: 1; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; min-width: 0; }
.wr-review-done-text strong { font-size: 13px; font-weight: 700; color: var(--text); }
.wr-review-done-text span { font-size: 12px; color: var(--text-dim); }
.wr-review-done .btn-primary {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-hover);
    box-shadow: none;
    transform: none;
}
.wr-review-done .btn-primary:hover { background: var(--hover-overlay-strong); border-color: var(--accent-border); transform: none; box-shadow: none; }
.wr-review-done .btn-primary::after { display: none; }
.wr-review-done.done::before {
    background-color: var(--green-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dce71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.wr-review-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
}
.wr-review-check::after { content: 'Reviewed'; }

/* === ACCOUNTS + SETTINGS 2.2.0: calmer, easier to read ===
   Centered column, 8px spacing scale, flat cards (no glow lines / lift), one status color per
   card, tabular mono numbers. Everything scoped to #accounts / #settings so the shared
   .settings-card rows on Profile and Admin keep their own look. */
#accounts, #settings { max-width: 1240px; margin-left: auto; margin-right: auto; }
#accounts .accounts-header, #settings .accounts-header { margin-bottom: 24px; min-height: 40px; }

/* Summary strip: five quiet KPIs, left-aligned */
#accounts .accounts-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 16px;
    margin-bottom: 32px;
}
#accounts .acct-summary-stat { align-items: flex-start; text-align: left; padding: 16px 24px; gap: 8px; }
#accounts .acct-summary-stat:not(:last-child)::after { top: 24%; height: 52%; }
#accounts .acct-summary-value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
#accounts .acct-summary-label { order: -1; font-size: 11px; letter-spacing: 0.04em; font-weight: 600; }

/* Groups */
#accounts .acct-group { margin-bottom: 32px; }
#accounts .acct-group-header { padding: 0 0 16px; font-size: 14px; }
#accounts .acct-group-title { display: inline-flex; align-items: center; gap: 8px; }
#accounts .acct-group-count {
    font-size: 11px; font-weight: 700; color: var(--text-dim);
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
#accounts .acct-group-chevron { color: var(--text-faint); }
#accounts .acct-group-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* Account card */
#accounts .account-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 0;
    display: flex; flex-direction: column;
    transition: border-color 0.2s ease;
}
#accounts .account-card::before { content: none; }
#accounts .account-card:hover { transform: none; box-shadow: none; border-color: var(--border-hover); }
#accounts .account-card-top { margin-bottom: 24px; align-items: center; }
#accounts .account-card-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
#accounts .account-card-meta { font-size: 12px; }
#accounts .account-card-badges { gap: 8px; align-items: center; }
#accounts .account-badge {
    font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: capitalize;
    padding: 4px 10px; border-radius: 999px; line-height: 1.2;
}
#accounts .acct-type-chip { color: var(--text-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
#accounts .acct-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--st, var(--green));
    background: color-mix(in srgb, var(--st, var(--green)) 12%, transparent);
}
#accounts .acct-status-chip::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--st, var(--green)); flex-shrink: 0;
}

/* Balance first, P&L right next to it */
#accounts .account-card-hero { align-items: flex-end; margin-bottom: 24px; gap: 8px 16px; }
#accounts .account-hero-balance { gap: 8px; }
#accounts .account-hero-value { font-size: clamp(24px, 8cqi, 30px); font-weight: 700; font-variant-numeric: tabular-nums; }
#accounts .account-hero-pnl { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
#accounts .account-stat-label { font-size: 11px; letter-spacing: 0.04em; font-weight: 600; color: var(--text-faint); }

/* Three small stats on one line, no box */
#accounts .account-card-stats {
    background: none; border: none; border-radius: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px; margin-bottom: 0; gap: 16px;
}
#accounts .account-stat { padding: 0; gap: 4px; flex-direction: column-reverse; justify-content: flex-end; }
#accounts .account-stat:not(:last-child)::after { content: none; }
#accounts .account-stat-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Target / drawdown / daily loss: compact bars */
#accounts .acct-progress-section { padding: 16px 0 0; margin-top: 16px; border-top: 1px solid var(--border); gap: 16px; }
#accounts .acct-progress-row { gap: 8px; }
#accounts .acct-progress-label { font-size: 12px; font-weight: 500; color: var(--text-dim); }
#accounts .acct-progress-label span:last-child { font-family: var(--num-font); font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
#accounts .acct-progress-track { height: 6px; border-radius: 999px; background: var(--bg4); }
#accounts .acct-progress-fill { border-radius: 999px; }

/* Actions: quiet icon row, pinned to the bottom so cards in a row line up */
#accounts .account-card-actions {
    margin-top: auto; padding-top: 16px; border-top: none;
    justify-content: flex-end; gap: 4px; opacity: 0.7;
}
#accounts .account-edit-btn, #accounts .account-hide-btn,
#accounts .account-status-btn, #accounts .account-delete-btn {
    width: 32px; height: 32px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-faint);
}
#accounts .account-edit-btn:hover, #accounts .account-status-btn:hover, #accounts .account-hide-btn:hover {
    color: var(--text); background: var(--bg3); border-color: var(--border);
}
#accounts .account-delete-btn:hover { color: var(--red); background: var(--red-bg); border-color: transparent; }
#accounts .account-card.account-hidden { opacity: 0.55; }

/* Empty state + hidden toggle */
#accounts .acct-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 64px 24px; border: 1px dashed var(--border); border-radius: 16px; background: var(--bg2);
}
#accounts .acct-empty-compact { padding: 40px 24px; }
#accounts .acct-empty-icon {
    width: 48px; height: 48px; border-radius: 14px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); background: var(--accent-bg);
}
#accounts .acct-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
#accounts .acct-empty-text { font-size: 13px; color: var(--text-dim); max-width: 400px; line-height: 1.5; margin: 0 0 8px; }
#accounts .acct-empty-compact .acct-empty-text { margin: 0; }
#accounts .acct-empty .btn-primary { padding: 10px 18px; font-size: 13.5px; }
#accounts #accounts-hidden-toggle { margin: 16px 0 !important; }
#accounts .acct-hidden-toggle-btn {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 16px; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#accounts .acct-hidden-toggle-btn:hover { color: var(--text); border-color: var(--border-hover); }

@media (max-width: 1100px) {
    #accounts .accounts-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #accounts .acct-summary-stat:nth-child(3)::after { content: none; }
}

/* --- Settings --- */
#settings .settings-grid { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#settings .settings-col { gap: 24px; }
@media (max-width: 1360px) { #settings .settings-grid { grid-template-columns: minmax(0, 1fr); } }

#settings .settings-card { transition: none; }
#settings .settings-card::before { content: none; }
#settings .settings-card:hover { border-color: var(--border); }
#settings .settings-card-title {
    font-size: 11px; letter-spacing: 0.08em; font-weight: 700; color: var(--text-faint);
    margin: 0 0 8px;
}

/* Rows: label + hint left (never wider than a comfortable line), control right */
#settings .settings-row { gap: 24px; }
#settings .settings-row-label { flex: 1 1 200px; gap: 4px; }
#settings .settings-row-label strong { font-size: 14px; font-weight: 600; }
#settings .settings-row-label span { font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
#settings .settings-row > :last-child:not(.settings-row-label) { flex-shrink: 0; }

#settings .settings-segmented { padding: 4px; border-radius: 10px; gap: 2px; }
#settings .settings-toggle-btn, #settings .settings-theme-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; gap: 8px; }
#settings .settings-row .btn-secondary { padding: 8px 16px; border-radius: 8px; }
#settings .accent-swatch.active::after { font-size: 11px; }
#settings #accent-custom-input::-webkit-color-swatch { border-radius: 50%; }
#settings .dash-bg-settings { gap: 8px; }
#settings .dash-bg-opacity-row { gap: 16px; }
#settings .dash-bg-opacity-row span { font-family: var(--num-font); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Subscription: state + badge on one line, action below */
#settings .settings-sub-card .settings-card-title { margin-bottom: 16px; }

/* Changelog: version chip + title, then aligned NEW / IMPROVED / CHANGED tags */
#settings .settings-changelog summary .settings-row-label { max-width: none; gap: 4px; }
#settings .settings-changelog summary .settings-row-label > span { font-size: 12.5px; color: var(--text-faint); }
#settings .settings-changelog .changelog-list { margin-top: 16px; }
#settings .changelog-version:first-child { padding-top: 8px; }
#settings .changelog-version:last-child { padding-bottom: 0; }
#settings .changelog-version-header { margin-bottom: 16px; }
#settings .changelog-ver-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: none; font-variant-numeric: tabular-nums; }
#settings .changelog-ver-title { letter-spacing: -0.01em; }
#settings .changelog-changes { gap: 8px; }
#settings .changelog-item { gap: 12px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
#settings .changelog-badge {
    width: 72px; text-align: center; box-sizing: border-box;
    font-size: 9.5px; letter-spacing: 0.04em; padding: 2px 0; border-radius: 999px; margin-top: 1px;
}

/* ============================================
   Gallery & Playbook — 2.2 clean look
   Centered column, one card style, fewer boxes, tabular numbers.
   ============================================ */
#gallery, #playbook { max-width: 1320px; margin-left: auto; margin-right: auto; }
.gl-header, .pb-header { align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.gl-header .view-title, .pb-header .view-title { margin-bottom: 0; }
.gl-toolbar, #playbook .pb-toolbar { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.gl-count { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Segmented controls: quiet, so the green button is the only loud thing up here */
.gl-seg, #playbook .pb-type-toggle { display: inline-flex; gap: 2px; padding: 3px; margin: 0; width: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; }
.gl-seg-btn, #playbook .pb-type-btn { padding: 6px 14px; border: none; border-radius: 7px; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.15s, background 0.15s; }
.gl-seg-btn:hover:not(.active), #playbook .pb-type-btn:hover:not(.active) { color: var(--text); }
.gl-seg-btn.active, #playbook .pb-type-btn.active { background: var(--bg4); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* --- Gallery grid --- */
/* Three per row so the charts are readable (two below ~1100px, one on narrow screens) */
#gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { #gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { #gallery .gallery-grid { grid-template-columns: 1fr; } }
#gallery .gallery-card { border-radius: 14px; background: var(--card, var(--bg2)); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
#gallery .gallery-card:hover { transform: translateY(-2px); border-color: var(--border-hover); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
/* Zoomed in a little so TradingView's toolbar and axis edges don't show at the card's borders */
/* Cropped by drawing the image 12% larger than its box (not transform: scale, which Chromium can
   render from a blurry scaled bitmap): sharp, and TradingView's edges fall outside */
#gallery .gallery-card .gallery-card-img,
#gallery .gallery-card:hover .gallery-card-img {
    transform: none; max-width: none; width: 112%; height: 112%; margin: -3.75% 0 0 -6%; /* top margin is % of width: 6% of a 16:10 height */
}
#gallery .gallery-card-img-wrap { aspect-ratio: 16 / 10; background: var(--bg3); border-bottom: 1px solid var(--border); }
/* No fade into the card: the chart stays readable. Only a light shade up top for the chips */
#gallery .gallery-card-img-wrap::after { top: 0; bottom: auto; height: 48px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent); }
#gallery .gallery-card-img { height: 100%; aspect-ratio: auto; }
/* Screenshot that could not be loaded: quiet placeholder, the card still opens the trade */
#gallery .gallery-card-noimg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 12px; color: var(--text-faint); background: var(--bg3); }
#gallery .gallery-card:hover .gallery-card-noimg { width: 100%; height: 100%; margin: 0; }
/* Card shown before its screenshot is read (renderGallery fills it in) */
#gallery .gallery-card .gallery-card-pending,
#gallery .gallery-card:hover .gallery-card-pending { width: 100%; height: 100%; margin: 0; background: var(--bg3); animation: glPending 1.2s ease-in-out infinite alternate; }
@keyframes glPending { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #gallery .gallery-card .gallery-card-pending { animation: none; } }
#gallery .gallery-card-badge { top: 10px; right: 10px; }
#gallery .gallery-card-badge .result-badge { box-shadow: none; }
#gallery .gallery-card-count { top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(0, 0, 0, 0.6); box-shadow: none; }
#gallery .gallery-card-count::before { content: none; }
#gallery .gallery-card-body { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 14px 16px 16px; }
.gallery-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
#gallery .gallery-card-top { min-width: 0; gap: 8px; }
#gallery .gallery-card-instrument { font-size: 15px; font-weight: 700; }
#gallery .gallery-card-dir { font-size: 10px; padding: 2px 6px; letter-spacing: 0.04em; }
#gallery .gallery-card-pnl { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#gallery .gallery-card-date { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-family: inherit; font-size: 12px; color: var(--text-dim); }
.gallery-card-setup { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.gallery-card-setup::before { content: '\00B7'; margin-right: 6px; }
#gallery .gallery-card-rr { font-size: 12px; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Empty states (both pages) --- */
#gallery .gallery-empty, #playbook .pb-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 24px; border: 1px dashed var(--dashed-border); border-radius: 16px; background: var(--subtle-bg); color: var(--text-dim); }
.gl-empty-icon, .pb-empty-icon { width: 56px; height: 56px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--accent-bg); color: var(--accent); }
#playbook .pb-empty-icon svg { width: 26px; height: 26px; margin: 0; stroke: currentColor; }
#gallery .gallery-empty h3, #playbook .pb-empty h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
#gallery .gallery-empty p, #playbook .pb-empty p { max-width: 380px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.pb-empty-cta { margin-top: 24px; }

/* --- Playbook cards: one surface, the numbers do the talking --- */
#playbook-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
#playbook .pb-card { gap: 16px; padding: 20px; border-radius: 14px; background: var(--card, var(--bg2)); }
#playbook .pb-card:hover { border-color: var(--border-hover); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); }
#playbook .pb-card-cover { margin: -20px -20px 0; }
#playbook .pb-card-title { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
#playbook .pb-card-name { font-size: 16px; font-weight: 700; }
#playbook .pb-card-trades { font-size: 12px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
#playbook .pb-card-desc { margin-top: -8px; }
#playbook .pb-card-perf { gap: 12px; padding: 0; background: none; border: none; border-radius: 0; }
#playbook .pb-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
#playbook .pb-stat-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#playbook .pb-winbar { height: 4px; background: var(--subtle-line); }
#playbook .pb-winbar.has-trades { background: var(--red-bg); }
#playbook .pb-card-perf-sub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
#playbook .pb-card-perf-sub span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#playbook .pb-card-perf-sub span:nth-child(2) { align-items: center; }
#playbook .pb-card-perf-sub span:nth-child(3) { align-items: flex-end; }
#playbook .pb-card-perf-sub i { font-style: normal; font-size: 11px; color: var(--text-faint); }
#playbook .pb-card-perf-sub b { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pb-card-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-card-checks li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.4; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-card-checks li::before { content: '\2713'; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 9px; font-weight: 800; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border); box-sizing: border-box; }
.pb-card-checks li.pb-card-checks-more { font-size: 12px; color: var(--text-faint); }
.pb-card-checks li.pb-card-checks-more::before { content: none; }
#playbook .pb-card-footer { padding-top: 16px; }

/* --- Playbook detail: one stat strip with hairlines, sections split by lines instead of boxes --- */
#playbook-detail-body .pb-detail-stats { gap: 0; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--subtle-bg); }
#playbook-detail-body .pb-detail-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 14px 16px; text-align: left; background: none; border: none; border-radius: 0; }
#playbook-detail-body .pb-detail-stat:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
#playbook-detail-body .pb-detail-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
#playbook-detail-body .pb-detail-stat-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
#playbook-detail-body .pb-detail-stat-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
#playbook-detail-body .pb-detail-section { margin: 0; padding: 0; background: none; border: none; border-radius: 0; }
#playbook-detail-body .pb-detail-section + .pb-detail-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
#playbook-detail-body .pb-detail-section h4 { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
#playbook-detail-body > :last-child { margin-bottom: 0; }

/* --- Setup editor --- */
#playbook-form textarea { line-height: 1.5; }

/* === CALENDAR + RECAPS 2.2.0: cleaner, easier to read at a glance ===
   Same language as the 2.2 dashboard: centered column, 8px spacing, flat cards with a
   hairline border, big numbers in mono with tabular figures, everything else quiet. */

/* ---- Calendar: Topstep-style P&L month (tight grid, filled trade days, week column) with our touch ---- */
#calendar.view.active { max-width: 1320px; width: 100%; margin: 0 auto; height: auto; }

/* Header: month + arrows + This month on the left, monthly stats on the right */
#calendar .calendar-header-bar { margin-bottom: 16px; gap: 24px; align-items: center; }
#calendar .calendar-nav { gap: 4px; }
#calendar .calendar-nav h3 {
    order: -1; min-width: 216px; margin-right: 12px;
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
    background: none; -webkit-text-fill-color: currentColor; color: var(--text);
}
#calendar .cal-nav-btn,
#calendar .cal-today-btn {
    height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 80%, transparent); color: var(--text-dim);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#calendar .cal-nav-btn { width: 32px; }
#calendar .cal-today-btn { padding: 0 12px; margin-left: 4px; font-size: 12px; font-weight: 600; }
#calendar .cal-nav-btn:hover,
#calendar .cal-today-btn:hover { transform: none; background: var(--bg3); border-color: var(--border-hover); color: var(--text); }

#calendar .calendar-month-stats { gap: 32px; flex-wrap: wrap; align-items: flex-end; background: none; border: none; }
#calendar .cal-mstat { min-width: 0; padding: 0; gap: 4px; background: none; border: none; border-radius: 0; }
#calendar .cal-mstat + .cal-mstat { border: none; }
#calendar .cal-mstat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
#calendar .cal-mstat-value {
    font-family: var(--num-font); font-size: 17px; font-weight: 600; line-height: 1.2;
    font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
#calendar .cal-mstat-value small { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }
#calendar .cal-mstat-value.positive { color: var(--green); }
#calendar .cal-mstat-value.negative { color: var(--red); }
#calendar .cal-mstat-main .cal-mstat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

/* The card holds a gapless grid; hairlines between cells */
#calendar .calendar-layout {
    flex: none; display: block; padding: 0; overflow: hidden;
    background: color-mix(in srgb, var(--bg2) 82%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--border); border-radius: 16px;
}
#calendar .calendar-container { display: block; background: none; border: none; border-radius: 0; padding: 0; }
#calendar .calendar-weeks { display: none; }
#calendar .calendar-grid {
    flex: none; gap: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* Mon–Fri + Week */
    grid-template-rows: auto; grid-auto-rows: 108px;
}
#calendar .cal-header {
    text-align: center; padding: 12px 0; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em; text-transform: none; color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
#calendar .cal-header-week { color: var(--text); }

#calendar .cal-day,
#calendar .cal-week {
    position: relative; min-height: 0; overflow: hidden; border-radius: 0; box-shadow: none;
    background: transparent; border: none;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
#calendar .cal-week { border-right: none; }
#calendar .calendar-grid > :nth-last-child(-n+6) { border-bottom: none; }

/* Day: number centered on top, P&L + trade count centered in the space below */
#calendar .cal-day {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 10px 8px; cursor: pointer; transform: none; transition: none;
}
#calendar .cal-day:hover,
#calendar .cal-day.positive, #calendar .cal-day.negative, #calendar .cal-day.flat, #calendar .cal-day.today,
#calendar .cal-day.positive:hover, #calendar .cal-day.negative:hover, #calendar .cal-day.today:hover {
    transform: none; box-shadow: none; background: transparent; border-color: var(--border);
}
#calendar .cal-day.selected { outline: none; }

/* Layers: ::before = fill (stronger for a bigger |P&L|), ::after = hover / today / selected */
#calendar .cal-day::before,
#calendar .cal-day::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#calendar .cal-day.has-trades::before { background: var(--text-dim); opacity: 0.12; }
#calendar .cal-day.positive::before { background: var(--green); opacity: calc(0.14 + var(--mag, 0) * 0.09); }
#calendar .cal-day.negative::before { background: var(--red); opacity: calc(0.14 + var(--mag, 0) * 0.09); }
#calendar .cal-day::after { transition: background-color 0.15s; }
#calendar .cal-day:hover::after { background: var(--hover-overlay-strong); }
#calendar .cal-day.today::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
#calendar .cal-day.selected::after { box-shadow: inset 0 0 0 2px var(--accent); }
#calendar .cal-day > * { position: relative; z-index: 1; }

#calendar .cal-day-num {
    margin: 0; min-width: 22px; height: 22px; line-height: 22px; padding: 0 5px; border-radius: 999px; text-align: center;
    font-size: 12px; font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
#calendar .cal-day.has-trades .cal-day-num { color: var(--text-dim); }
#calendar .cal-day.today .cal-day-num { background: var(--accent); color: var(--bg); font-weight: 700; }

#calendar .cal-day-pnl {
    margin: auto 0 0; font-family: var(--num-font); font-size: 20px; font-weight: 600;
    line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#calendar .cal-day-pnl.positive { color: var(--green); }
#calendar .cal-day-pnl.negative { color: var(--red); }
#calendar .cal-day-pnl.flat { color: var(--text-dim); }
#calendar .cal-day-info { margin: 2px 0 auto; font-size: 12px; font-weight: 500; color: var(--text-dim); opacity: 1; font-variant-numeric: tabular-nums; }
#calendar .cal-day-screenshot { position: absolute; top: 13px; right: 12px; color: var(--text-dim); opacity: 0.5; }

/* Days of the adjacent months: shown, but dimmed */
#calendar .cal-day.outside > * { opacity: 0.35; }
#calendar .cal-day.outside.positive::before,
#calendar .cal-day.outside.negative::before { opacity: 0.06; }
#calendar .cal-day.outside:not(.has-trades) { background: color-mix(in srgb, var(--bg) 35%, transparent); }

/* Week column: bold label, colored week P&L, trade count */
#calendar .cal-week {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 10px 12px; background: color-mix(in srgb, var(--text) 3%, transparent);
}
#calendar .cal-week-label { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
#calendar .cal-week-pnl { font-family: var(--num-font); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#calendar .cal-week-pnl.positive { color: var(--green); }
#calendar .cal-week-pnl.negative { color: var(--red); }
#calendar .cal-week-pnl.neutral { color: var(--text-faint); font-weight: 500; }
#calendar .cal-week-days { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
#calendar .cal-week.is-empty .cal-week-days { color: var(--text-faint); }
#calendar .cal-week-weekend { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Day detail under the grid */
#calendar .cal-day-detail {
    flex-shrink: 0; margin-top: 16px; padding: 20px 24px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
}
#calendar .cal-day-detail-header { gap: 16px; margin-bottom: 16px; padding-right: 32px; flex-wrap: wrap; }
#calendar .cal-day-detail-header h3 { font-size: 16px; font-weight: 700; }
#calendar .cal-detail-stats { gap: 16px; }
#calendar .cal-detail-stat { font-size: 13px; color: var(--text-dim); }
#calendar .cal-detail-stat strong { color: var(--text); font-family: var(--num-font); font-weight: 600; font-variant-numeric: tabular-nums; }
#calendar .cal-detail-close { border-radius: 8px; }
#calendar .cal-detail-close:hover { background: var(--hover-overlay); }

@media (max-width: 1200px) {
    #calendar .calendar-month-stats { gap: 20px; }
    #calendar .calendar-grid { grid-auto-rows: 96px; }
    #calendar .cal-day-pnl, #calendar .cal-week-pnl { font-size: 16px; }
}

/* ---- Recaps: timeline feed + sticky month summary ---- */
#recaps.view.active {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto 1fr;
    column-gap: 32px; align-items: start; max-width: 1320px; margin-left: auto; margin-right: auto;
}
#recaps .recaps-header { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; gap: 16px; }
#recaps .recap-editor { grid-column: 1; grid-row: 2; }
#recaps .recaps-list { grid-column: 1; grid-row: 3; display: block; min-width: 0; }
#recaps .rc-side { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
    max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#recaps .rc-side::-webkit-scrollbar { display: none; }
#recaps.rc-is-empty .recaps-list { grid-column: 1 / -1; grid-row: 3; }
#recaps.rc-is-empty .rc-side { display: none; }

/* Feed */
#recaps .rc-feed { display: flex; flex-direction: column; gap: 12px; }
#recaps .rc-month {
    display: flex; align-items: center; gap: 12px; margin: 12px 0 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
#recaps .rc-month:first-child { margin-top: 0; }
#recaps .rc-month::after { content: ''; flex: 1; height: 1px; background: var(--border); }

#recaps .rc-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; scroll-margin-top: 16px; }
#recaps .rc-rail { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
#recaps .rc-rail-day {
    font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700;
    line-height: 1; letter-spacing: -0.02em; color: var(--text);
}
#recaps .rc-rail-wd { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
#recaps .rc-rail-dot {
    width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--text-faint);
    box-shadow: 0 0 0 3px var(--bg);
}
#recaps .rc-rail-line { flex: 1; width: 1px; margin: 6px 0 -18px; background: var(--border); }
#recaps .rc-entry:last-child .rc-rail-line,
#recaps .rc-entry:has(+ .rc-month) .rc-rail-line { margin-bottom: 0; background: linear-gradient(var(--border), transparent); }
#recaps .rc-tone-green .rc-rail-dot { background: var(--green); }
#recaps .rc-tone-red .rc-rail-dot { background: var(--red); }
#recaps .rc-tone-flat .rc-rail-dot { background: var(--text-dim); }

#recaps .rc-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 18px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.3s;
}
#recaps .rc-card:hover { transform: none; box-shadow: none; border-color: var(--border-hover); }
#recaps .rc-entry.rc-flash .rc-card { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-bg); }

#recaps .rc-head { display: flex; align-items: flex-start; gap: 12px; }
#recaps .rc-headline { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#recaps .rc-date { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
#recaps .rc-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
#recaps .rc-meta b { font-weight: 600; font-family: var(--num-font); }
#recaps .rc-meta b.green { color: var(--green); }
#recaps .rc-meta b.red { color: var(--red); }
#recaps .rc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
#recaps .rc-pnl {
    font-family: var(--num-font); font-size: 18px; font-weight: 700; line-height: 1.25;
    letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-dim);
}
#recaps .rc-pnl.green { color: var(--green); }
#recaps .rc-pnl.red { color: var(--red); }
#recaps .rc-card .recap-card-actions { position: static; align-self: flex-start; margin-top: 1px; }

/* Mood + rules: soft pills on the stats line */
#recaps .rc-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
#recaps .rc-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
    border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1;
    color: var(--text-dim); background: var(--hover-overlay); border: 1px solid var(--border);
    text-transform: capitalize;
}
#recaps .rc-mood-great, #recaps .rc-mood-good { color: var(--green); background: var(--green-bg); border-color: transparent; }
#recaps .rc-mood-neutral { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
#recaps .rc-mood-bad, #recaps .rc-mood-terrible { color: var(--red); background: var(--red-bg); border-color: transparent; }
#recaps .rc-rules { text-transform: none; }
#recaps .rc-rules i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
#recaps .rc-rules-yes i { background: var(--green); }
#recaps .rc-rules-mostly i { background: var(--yellow); }
#recaps .rc-rules-no i { background: var(--red); }

#recaps .rc-text { font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Lessons: a subtle inset list */
#recaps .rc-lessons { padding: 10px 14px 12px; background: var(--hover-overlay); border-radius: 10px; border-left: 2px solid var(--accent-border); }
#recaps .rc-label { margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#recaps .rc-lessons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#recaps .rc-lessons li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
#recaps .rc-lessons li::before {
    content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px;
    border-radius: 50%; background: var(--accent);
}

/* Sidebar */
#recaps .rc-side-card { padding: 14px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; }
#recaps .rc-side-monthbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#recaps .rc-side-monthname { font-size: 14px; font-weight: 700; color: var(--text); }
#recaps .rc-side-nav {
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px;
    background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
#recaps .rc-side-nav:hover:not(:disabled) { color: var(--text); background: var(--hover-overlay); border-color: var(--border-hover); }
#recaps .rc-side-nav:disabled { opacity: 0.35; cursor: default; }

#recaps .rc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
#recaps .rc-cal-wd { padding-bottom: 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); }
#recaps .rc-cal-cell {
    position: relative; height: 29px; display: flex; align-items: center; justify-content: center; padding: 0 0 6px;
    border: 0; border-radius: 8px; background: transparent; font: inherit; font-family: var(--num-font);
    font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-faint);
}
#recaps .rc-cal-cell i { position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
#recaps .rc-cal-open { cursor: pointer; color: var(--text-dim); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
#recaps .rc-cal-open:hover { background: var(--hover-overlay); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-hover); }
#recaps .rc-cal-open:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-border); }
#recaps .rc-cal-has { color: var(--text); font-weight: 600; }
#recaps .rc-cal-has:hover { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-border); }
#recaps .rc-cal-future { color: var(--text-faint); opacity: 0.45; cursor: default; }
#recaps .rc-cal-has i { background: var(--accent); }
#recaps .rc-cal-has.rc-tone-green i { background: var(--green); }
#recaps .rc-cal-has.rc-tone-red i { background: var(--red); }
#recaps .rc-cal-missed { color: var(--text-dim); }
#recaps .rc-cal-missed i { border: 1px solid var(--text-faint); }
#recaps .rc-cal-today { box-shadow: inset 0 0 0 1px var(--accent-border); }
#recaps .rc-cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-faint); }
#recaps .rc-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
#recaps .rc-cal-legend i { width: 6px; height: 6px; border-radius: 50%; }
#recaps .rc-lg-has { background: var(--accent); }
#recaps .rc-lg-missed { border: 1px solid var(--text-faint); }

#recaps .rc-cover { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
#recaps .rc-cover-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
#recaps .rc-cover-value { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
#recaps .rc-cover-value small { font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-dim); }
#recaps .rc-cover-row b { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--accent); }
#recaps .rc-cover .rc-bar { margin-top: 10px; }
#recaps .rc-side-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#recaps .rc-kpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 12px; }
#recaps .rc-kpi:first-child { padding-left: 0; }
#recaps .rc-kpi:last-child { padding-right: 0; }
#recaps .rc-kpi + .rc-kpi { border-left: 1px solid var(--border); }
#recaps .rc-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
#recaps .rc-kpi-value {
    font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700;
    line-height: 1.2; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#recaps .rc-kpi-value small { margin-left: 4px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); }
#recaps .rc-kpi-pnl { font-size: 20px; }
#recaps .rc-kpi-pnl.green { color: var(--green); }
#recaps .rc-kpi-pnl.red { color: var(--red); }
#recaps .rc-kpi-sub { font-size: 11px; color: var(--text-faint); }

#recaps .rc-bar { display: flex; height: 6px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: var(--hover-overlay); }
#recaps .rc-bar i { display: block; height: 100%; transition: width 0.4s; }
#recaps .rc-bar-cover i { background: var(--accent); border-radius: 999px; }
#recaps .rc-bar-rules { margin-top: 10px; gap: 2px; }
#recaps .rc-seg-yes { background: var(--green); }
#recaps .rc-seg-mostly { background: var(--yellow); }
#recaps .rc-seg-no { background: var(--red); }

#recaps .rc-side-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text); }
#recaps .rc-side-title b { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 18px; }
#recaps .rc-side-title-gap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
#recaps .rc-rules-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
#recaps .rc-rules-legend span { display: inline-flex; align-items: center; gap: 6px; }
#recaps .rc-rules-legend i { width: 6px; height: 6px; border-radius: 50%; }
#recaps .rc-rules-legend b { font-family: var(--num-font); font-weight: 600; color: var(--text); }

#recaps .rc-moods { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
#recaps .rc-mood-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 20px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); }
#recaps .rc-mood-row b { text-align: right; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 600; }
#recaps .rc-mood-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--hover-overlay); }
#recaps .rc-mood-track i { display: block; height: 100%; border-radius: 999px; background: var(--text-dim); }
#recaps .rc-mrow-great .rc-mood-track i,
#recaps .rc-mrow-good .rc-mood-track i { background: var(--green); }
#recaps .rc-mrow-neutral .rc-mood-track i { background: var(--blue); }
#recaps .rc-mrow-bad .rc-mood-track i,
#recaps .rc-mrow-terrible .rc-mood-track i { background: var(--red); }
#recaps .rc-mood-row.rc-zero { color: var(--text-faint); }
#recaps .rc-mood-row.rc-zero .rc-mood-name { opacity: 0.6; }

#recaps .rc-count {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
    border-radius: 999px; background: var(--hover-overlay); border: 1px solid var(--border);
    font-style: normal; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700; color: var(--text-dim);
    vertical-align: 1px;
}
#recaps .rc-side-lessons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#recaps .rc-side-lessons li {
    position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 9px 10px 9px 14px; border-radius: 10px; background: var(--hover-overlay);
    cursor: pointer; transition: background 0.15s, transform 0.15s;
}
#recaps .rc-side-lessons li::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
#recaps .rc-side-lessons li.rc-tone-green::before { background: var(--green); }
#recaps .rc-side-lessons li.rc-tone-red::before { background: var(--red); }
#recaps .rc-side-lessons li.rc-tone-flat::before { background: var(--text-faint); }
#recaps .rc-side-lessons li:hover { background: var(--accent-bg); transform: translateX(2px); }
#recaps .rc-side-lessons li.rc-more { display: none; }
#recaps .rc-side-lessons.rc-expanded li.rc-more { display: flex; }
#recaps .rc-lesson-text {
    flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere;
}
#recaps .rc-lesson-date {
    flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
    background: var(--bg2); border: 1px solid var(--border);
    font-size: 10.5px; font-weight: 600; color: var(--text-faint); white-space: nowrap;
}
#recaps .rc-lessons-toggle {
    display: block; width: 100%; margin-top: 8px; padding: 6px 0; border: 0; border-radius: 8px; background: transparent;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; transition: background 0.15s;
}
#recaps .rc-lessons-toggle:hover { background: var(--hover-overlay); }

/* Empty state */
#recaps .rc-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    max-width: 640px; margin: 24px auto 0; padding: 56px 32px;
    background: radial-gradient(ellipse at top, var(--accent-bg), transparent 70%), var(--bg2);
    border: 1px solid var(--border); border-radius: 20px;
}
#recaps .rc-empty-icon {
    width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px;
    display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border);
}
#recaps .rc-empty h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
#recaps .rc-empty p { max-width: 440px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
#recaps .rc-empty-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 6px; font-size: 12.5px; color: var(--text-dim); }
#recaps .rc-empty-points span { display: inline-flex; align-items: center; gap: 7px; }
#recaps .rc-empty-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
#recaps .rc-empty-btn { margin-top: 12px; }

@media (max-width: 1200px) {
    #recaps.view.active { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    #recaps .recaps-header { grid-row: 1; }
    #recaps .rc-side { grid-column: 1; grid-row: 2; position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 24px; align-items: start; }
    #recaps .recap-editor { grid-column: 1; grid-row: 3; }
    #recaps .recaps-list, #recaps.rc-is-empty .recaps-list { grid-column: 1; grid-row: 4; }
}
@media (max-width: 640px) {
    #recaps .rc-entry { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
    #recaps .rc-rail-day { font-size: 19px; }
}

/* Editor: flat card, the day's numbers as one strip */
#recaps .recap-editor { padding: 24px; margin-bottom: 24px; background: var(--bg2); border-radius: 16px; }
#recaps .recap-editor::before { content: none; }
#recaps .recap-editor-header { justify-content: flex-start; align-items: baseline; gap: 12px; margin-bottom: 16px; }
#recaps .recap-editor-header h3 { font-size: 18px; font-weight: 700; }
#recaps .recap-auto-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 24px; padding: 12px 0;
    background: none; border-radius: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
#recaps .recap-auto-stat { background: none; padding: 0 16px; text-align: left; }
#recaps .recap-auto-stat:first-child { padding-left: 0; }
#recaps .recap-auto-stat + .recap-auto-stat { border-left: 1px solid var(--border); }
#recaps .recap-auto-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); }
#recaps .recap-auto-stat-value { margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }

/* The day's trades: compact clickable rows (recap cards + editor) */
#recaps .recap-day-trades:not(:empty) { margin: -8px 0 24px; }
#recaps .rc-trades { display: flex; flex-direction: column; gap: 6px; }
#recaps .rc-trades-head { display: flex; align-items: center; }
#recaps .rc-trades-head .rc-label { margin: 0; }
#recaps .rc-trades-head .rc-count { margin-left: 4px; vertical-align: 0; }
#recaps .rc-trades-list { display: flex; flex-direction: column; gap: 4px; }
#recaps .rc-trade {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px;
    padding: 7px 12px 7px 16px; border: 1px solid transparent; border-radius: 10px; background: var(--hover-overlay);
    font: inherit; color: var(--text); text-align: left; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#recaps .rc-trade::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--text-faint);
}
#recaps .rc-trade-win::before { background: var(--green); }
#recaps .rc-trade-loss::before { background: var(--red); }
#recaps .rc-trade:hover { background: var(--accent-bg); border-color: var(--accent-border); }
#recaps .rc-trade:focus-visible,
#recaps .rc-trades-more:focus-visible { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-bg); }
#recaps .rc-trade-time { min-width: 38px; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-dim); }
#recaps .rc-trade-inst { font-size: 13px; font-weight: 700; white-space: nowrap; }
#recaps .rc-trade .ti-dir { padding: 2px 7px; }
#recaps .rc-trade-fwd {
    padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--blue); background: var(--blue-bg);
}
#recaps .rc-trade-setup { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-dim); }
#recaps .rc-trade-pnl {
    margin-left: auto; font-family: var(--num-font); font-variant-numeric: tabular-nums;
    font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--text-dim);
}
#recaps .rc-trade-pnl.green { color: var(--green); }
#recaps .rc-trade-pnl.red { color: var(--red); }
#recaps .rc-trade-chev { flex-shrink: 0; color: var(--text-faint); transition: transform 0.15s, color 0.15s; }
#recaps .rc-trade:hover .rc-trade-chev,
#recaps .rc-trade:focus-visible .rc-trade-chev { color: var(--accent); transform: translateX(2px); }
#recaps .rc-trades-more {
    align-self: flex-start; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
#recaps .rc-trades-more:hover { color: var(--text); background: var(--hover-overlay); border-color: var(--border-hover, var(--border)); }
@media (max-width: 640px) {
    #recaps .rc-trade-setup { display: none; }
}
/* Mood + rules pickers keep the original look (base .mood-btn/.rules-btn rules); only the active
   border colours are re-expressed with theme variables so they follow every theme */
#recaps .mood-btn.active[data-mood="great"], #recaps .mood-btn.active[data-mood="good"],
#recaps .rules-btn.active[data-rules="yes"] { border-color: color-mix(in srgb, var(--green) 30%, transparent); }
#recaps .mood-btn.active[data-mood="bad"], #recaps .mood-btn.active[data-mood="terrible"],
#recaps .rules-btn.active[data-rules="no"] { border-color: color-mix(in srgb, var(--red) 30%, transparent); }
#recaps .recap-editor-row { grid-template-columns: 1fr; }
/* Mood + rules pickers as pills (the owner preferred these over the original boxes) */
#recaps .recap-mood-btns { gap: 8px; }
#recaps .mood-btn, #recaps .rules-btn {
    flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; border-radius: 999px;
    background: transparent; border: 1px solid var(--border); font-size: 13px;
}
#recaps .mood-btn:hover, #recaps .rules-btn:hover { background: var(--hover-overlay); border-color: var(--border-hover, var(--border)); }
#recaps .rules-btn.active[data-rules="mostly"] { background: color-mix(in srgb, var(--yellow) 10%, transparent); border-color: color-mix(in srgb, var(--yellow) 30%, transparent); }

/* === NEW TRADE FORM v2.2 (scoped): 5 sections, segmented controls, sticky preview === */
#new-trade { max-width: 1180px; }
#new-trade .tf-page-header { margin-bottom: 16px; }
#trade-form .tf-layout { grid-template-columns: minmax(0, 1fr) 296px; gap: 16px; }
#trade-form .tf-main { gap: 16px; }
#trade-form .tf-side { top: 16px; gap: 8px; }
#trade-form .tf-card { padding: 20px 24px 24px; border-radius: 14px; }
#trade-form .tf-card-header { margin-bottom: 16px; }
#trade-form .tf-step { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
#trade-form .tf-card:focus-within .tf-step { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Aligned field grids with one 16px rhythm */
#trade-form .tf-grid { display: grid; gap: 16px; margin-bottom: 16px; }
#trade-form .tf-grid:last-child, #trade-form .tf-card > .form-group:last-child { margin-bottom: 0; }
#trade-form .tf-grid-inst { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
#trade-form .tf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#trade-form .tf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#trade-form .tf-grid-setup { grid-template-columns: minmax(0, 1fr) auto; }
#trade-form .tf-field { margin-bottom: 16px; }
#trade-form .form-group { gap: 8px; min-width: 0; }
#trade-form .form-group.full-width { margin-bottom: 16px; }
#trade-form .tf-card > .form-group.full-width:last-child { margin-bottom: 0; }
#trade-form input:not([type=checkbox]):not([type=file]):not(#tag-input), #trade-form select { height: 42px; padding-top: 0; padding-bottom: 0; }
#trade-form .tf-num { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#trade-form .auto-calc { height: 42px; box-sizing: border-box; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trade-form .tf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }

/* Segmented controls: one track, the active option lifts out of it */
#trade-form .tf-seg { gap: 4px; padding: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; height: 42px; box-sizing: border-box; }
#trade-form .tf-seg > button { flex: 1; height: 100%; padding: 0 12px; border: 1px solid transparent; background: transparent; border-radius: 8px; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
#trade-form .tf-seg > button:hover { color: var(--text); background: var(--hover-overlay, rgba(var(--fg-rgb), 0.04)); border-color: transparent; }
#trade-form .tf-seg > button:focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 1px; }
#trade-form .tf-seg > button.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
#trade-form .tf-seg > .asset-btn.active[data-asset="cfd"], #trade-form .tf-seg > .type-btn.active[data-type="forward"] { background: var(--purple-bg); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, transparent); }
#trade-form .inst-row { gap: 8px; }
#trade-form .csize-group { flex: 0 0 auto; }
#trade-form .csize-group > button { flex: 0 0 auto; min-width: 58px; }

#trade-form .tf-seg-lg { height: 56px; padding: 5px; border-radius: 14px; }
#trade-form .tf-seg-lg > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; border-radius: 10px; }
#trade-form .tf-seg > .dir-btn.active[data-dir="long"], #trade-form .tf-seg > .tf-res-btn.active[data-result="win"] { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); box-shadow: 0 0 18px var(--green-glow); }
#trade-form .tf-seg > .dir-btn.active[data-dir="short"], #trade-form .tf-seg > .tf-res-btn.active[data-result="loss"] { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); box-shadow: 0 0 18px var(--red-glow); }
#trade-form .tf-seg > .tf-res-btn.active[data-result="breakeven"] { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 30%, transparent); }
#trade-form .tf-seg > .tf-res-btn.active[data-result=""] { background: var(--bg5, var(--bg4)); color: var(--text); border-color: var(--border-hover); }

/* Inline hints */
#trade-form .tf-msg { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--yellow); }
#trade-form .tf-msg::before { content: '!'; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--bg); background: var(--yellow); }
#trade-form .tf-msg:empty { display: none; }

/* Rating sits beside the setup select at the same height */
#trade-form .rating-group { gap: 4px; }
#trade-form .rating-btn { width: 42px; height: 42px; border-radius: 10px; }
#trade-form #trade-notes { min-height: 112px; }
#trade-form .screenshot-preview:empty { display: none; }

/* Screenshot drop zone: compact row, obvious target */
#trade-form .screenshot-drop { flex-direction: row; justify-content: center; gap: 16px; padding: 24px; border-radius: 12px; border-width: 1.5px; background: var(--bg3); text-align: left; }
#trade-form .screenshot-drop.drag-over { border-style: solid; }
#trade-form .tf-drop-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent); }
#trade-form .tf-drop-text { font-size: 13px; color: var(--text-faint); line-height: 1.5; }
#trade-form .tf-drop-text b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
#trade-form kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--border-hover); border-bottom-width: 2px; border-radius: 5px; background: var(--bg3); font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 600; color: var(--text-dim); line-height: 1.6; }

/* Sticky preview */
#trade-form .tf-summary { padding: 16px; gap: 8px; border-radius: 14px; }
#trade-form .tf-sum-pnl { padding: 12px 0; font-size: 32px; }
#trade-form .tf-sum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 4px 0; }
#trade-form .tf-sum-cell b { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 13px; font-variant-numeric: tabular-nums; }
#trade-form .tf-sum-cell b.positive { color: var(--green); }
#trade-form .tf-sum-cell b.negative { color: var(--red); }
#trade-form .tf-checklist { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#trade-form .tf-checklist li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); }
#trade-form .tf-check { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-hover); box-sizing: border-box; }
#trade-form .tf-checklist li.ok { color: var(--text-dim); }
#trade-form .tf-checklist li.ok .tf-check { border: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat; }
#trade-form .tf-actions .btn-primary, #trade-form .tf-actions .btn-secondary { padding: 12px 16px; border-radius: 12px; }
#trade-form .tf-actions .btn-primary { font-size: 15px; }
#trade-form .tf-side-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 11.5px; line-height: 1.8; }
#trade-form .tf-grid:has(+ .tf-msg:last-child) { margin-bottom: 0; }
#trade-form .tf-grid + .tf-msg { margin-top: 16px; }

/* Narrow windows: preview hides, Save/Clear stick to the bottom edge */
@media (max-width: 1280px) {
    #trade-form .tf-layout { grid-template-columns: minmax(0, 1fr); }
    #trade-form .tf-side { position: sticky; top: auto; bottom: 0; z-index: 5; padding: 8px 0 16px; background: linear-gradient(transparent, var(--bg) 30%); }
    #trade-form .tf-summary, #trade-form .tf-side-hint { display: none; }
    #trade-form .tf-actions { flex-direction: row; }
}
@media (max-width: 900px) {
    #trade-form .tf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #trade-form .tf-grid-3, #trade-form .tf-grid-inst, #trade-form .tf-grid-setup { grid-template-columns: minmax(0, 1fr); }
    #trade-form .tf-seg-lg > button { font-size: 14px; padding: 0 8px; }
}

/* Page titles: plain text in one color. The white-to-green gradient made them look uneven. */
.gradient-title,
.view-title,
.calendar-nav h3 {
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ============================================
   SIDEBAR 2.2.0
   One calm list: every row the same 34px, 16px icons with one
   stroke, quiet section labels without rules, a soft pill for the
   current page, a solid New Trade button and a lighter profile row.
   Scoped under .sidebar so it wins over the earlier passes above.
   ============================================ */

.sidebar nav { padding: 12px 10px; gap: 2px; }

/* Section labels: small, sentence case, no line */
.sidebar .nav-separator { padding: 14px 10px 4px; margin: 0; }
.sidebar .nav-separator::after { display: none; }
.sidebar .nav-separator span {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-faint);
    opacity: 0.75;
}

/* Rows */
.sidebar nav .nav-btn {
    height: 34px;
    min-height: 34px;
    flex-shrink: 0;
    margin: 0;
    padding: 0 10px;
    gap: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    transition: background 0.12s, color 0.12s;
}
.sidebar nav .nav-btn svg:first-of-type {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    stroke-width: 1.75;
    opacity: 0.6;
    background: none;
    border-radius: 0;
    transition: opacity 0.12s, color 0.12s;
}
.sidebar nav .nav-btn:hover { background: var(--hover-overlay); color: var(--text); }
.sidebar nav .nav-btn:hover svg:first-of-type { opacity: 0.9; }

/* Current page: a soft pill and an accent icon — nothing on the edge */
.sidebar nav .nav-btn.active {
    background: var(--accent-bg);
    color: var(--text);
    font-weight: 600;
}
.sidebar nav .nav-btn.active::before { display: none; }
.sidebar nav .nav-btn.active svg:first-of-type { opacity: 1; color: var(--accent); background: none; }

/* Unread: a small solid pill, flush right */
.sidebar nav .nav-notif {
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    margin-left: auto;
    border-radius: 8px;
    background: var(--accent);
    box-shadow: none;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.sidebar nav .nav-notif.nav-notif-dot {
    min-width: 6px;
    width: 6px;
    height: 6px;
    padding: 0;
    margin-right: 6px;
    box-shadow: none;
}

/* --- Bottom --- */
.sidebar .sidebar-bottom { padding: 8px 10px 10px; }

/* New Trade: solid accent, still the one loud thing in the panel */
.sidebar .new-trade-btn.nav-btn {
    height: 36px;
    padding: 0 12px !important;
    gap: 7px !important;
    margin: 0;
    border-radius: 9px !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: none !important;
    filter: none;
    transition: filter 0.12s, box-shadow 0.12s !important;
}
.sidebar .new-trade-btn.nav-btn::after { display: none !important; }
.sidebar .new-trade-btn.nav-btn:hover {
    filter: brightness(1.07) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.sidebar .new-trade-btn.nav-btn:active { filter: brightness(0.96) !important; transform: none !important; }
.sidebar .new-trade-btn.nav-btn svg { width: 14px; height: 14px; color: #fff; opacity: 1; }

/* A plain hairline instead of the glowing rule */
.sidebar .sidebar-separator {
    margin: 10px 2px 6px;
    background: var(--border);
    box-shadow: none;
}

/* Profile: one quiet row — avatar, name + level chip over a thin XP line, icons */
.sidebar .nav-btn.sidebar-profile-btn {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto;
    column-gap: 2px;
    align-items: center;
    height: auto;
    padding: 7px 6px 7px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
}
.sidebar .nav-btn.sidebar-profile-btn:hover { background: var(--hover-overlay); }
.sidebar .nav-btn.sidebar-profile-btn.active { background: var(--accent-bg); }
.sidebar .sidebar-profile-btn .sidebar-profile-avatar {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    margin: 0;
}
/* Presence dot, ringed in the panel colour so it reads on any picture */
.sidebar .sidebar-profile-avatar::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px var(--bg2);
}
[data-theme="light"] .sidebar .sidebar-profile-avatar::after { box-shadow: 0 0 0 2px var(--chrome); }
.sidebar .sidebar-profile-btn .sidebar-profile-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin-left: 10px;
}
.sidebar .sidebar-profile-line { display: flex; align-self: stretch; align-items: center; gap: 6px; min-width: 0; }
.sidebar .sidebar-profile-btn .sidebar-profile-name {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.sidebar .sidebar-level-chip {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.sidebar .sidebar-profile-btn .sidebar-profile-sub {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.sidebar .sidebar-profile-sub .sidebar-xp-bar {
    display: block;
    flex: 1;
    max-width: none;
    height: 3px;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    background: var(--hover-overlay-strong);
    overflow: hidden;
}
.sidebar .sidebar-xp-bar i { background: var(--accent); }
.sidebar .sidebar-xp-bar.maxed i { background: linear-gradient(90deg, var(--yellow), var(--green)); }
.sidebar .sidebar-profile-btn :is(.sidebar-bell, .sidebar-mentor-btn, .sidebar-admin-btn) {
    grid-row: 1;
    align-self: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border-radius: 7px;
    opacity: 0.65;
}
.sidebar .sidebar-profile-btn .sidebar-bell { grid-column: 3; margin-left: 4px; }
.sidebar .sidebar-profile-btn .sidebar-mentor-btn { grid-column: 4; }
.sidebar .sidebar-profile-btn .sidebar-admin-btn { grid-column: 5; }
.sidebar .sidebar-profile-btn :is(.sidebar-bell, .sidebar-mentor-btn, .sidebar-admin-btn):hover { opacity: 1; background: var(--hover-overlay-strong); }
.sidebar .sidebar-profile-btn :is(.sidebar-bell, .sidebar-mentor-btn).has-notif { opacity: 1; }
.sidebar .sidebar-profile-btn .sidebar-bell-dot { top: -3px; right: -4px; }
.sidebar .sidebar-profile-btn .sidebar-bell-dot:empty { top: 3px; right: 3px; }

/* ============================================
   PROFILE PAGE — hero + two card columns
   Echoes the profile popout: banner, overlapping avatar with
   presence dot, chips, stats. Scoped to #profile; theme vars only.
   ============================================ */
#profile > .view-title,
#profile-content {
    width: 100%;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}
#profile-content { gap: 24px; padding-bottom: 32px; }

.pf-hero {
    --up-color: var(--accent);
    --up-bg: var(--bg2);
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}
.pf-banner {
    position: relative;
    height: 184px;
    background:
        linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.22)),
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--up-color) 55%, transparent) 0%, transparent 62%),
        radial-gradient(90% 140% at 100% 100%, color-mix(in srgb, var(--accent) 36%, transparent) 0%, transparent 70%),
        linear-gradient(135deg, color-mix(in srgb, var(--up-color) 30%, var(--bg3)), color-mix(in srgb, var(--accent) 16%, var(--bg3)));
    background-size: cover;
    background-position: center;
}
.pf-banner.has-image { background-color: var(--bg3); }
.pf-banner::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 56px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
    pointer-events: none;
}
.pf-hero .pf-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.18s, transform 0.18s, background 0.18s;
}
.pf-banner:hover .pf-edit-btn,
.pf-hero .pf-edit-btn:focus-visible { opacity: 1; transform: none; }
.pf-hero .pf-edit-btn:hover { background: rgba(0, 0, 0, 0.7); }

.pf-hero-main {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 32px 20px;
}
.pf-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: -56px;
    z-index: 1;
}
.pf-hero .profile-avatar {
    width: 112px;
    height: 112px;
    margin: 0;
    font-size: 42px;
    border: 6px solid var(--bg2);
    background-clip: padding-box;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.pf-hero .profile-avatar-overlay {
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
}
.pf-hero .pf-presence {
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-width: 5px;
}
.pf-hero .profile-info { flex: 1; min-width: 0; padding: 18px 0 4px; align-self: flex-start; }
.pf-hero .profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-hero .profile-name {
    margin: 0;
    font-size: 29px;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: none;
}
.pf-hero .profile-edit-name-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg3);
    color: var(--text-dim);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.15s, transform 0.15s, color 0.15s;
}
.pf-hero .profile-edit-name-btn:hover { color: var(--text); background: var(--hover-overlay-strong, var(--bg3)); }
.pf-hero .profile-name-row:hover .profile-edit-name-btn { transform: none; }
.pf-hero .profile-name-row:hover .profile-edit-name-btn,
.pf-hero .profile-edit-name-btn:focus-visible { opacity: 1; }
.pf-hero .profile-name-edit { max-width: 320px; margin: 0; }
.pf-status {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-status[hidden] { display: none; }
.pf-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.pf-chips .user-popup-roles { display: contents; }
.pf-chips > *,
.pf-chips .community-dd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
}
.pf-chips .user-popup-roles { padding: 0; height: auto; }
.pf-presence-label {
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.pf-stats {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
}
.pf-stats .pf-stat { flex: 1 1 0; }
.pf-stats .pf-stat-xp { flex: 2.2 1 0; }
.pf-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 16px 32px;
}
.pf-stat + .pf-stat { border-left: 1px solid var(--border); }
.pf-stat-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--num-font);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
}
.pf-stat-val small { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.pf-likes-val svg { color: var(--red); }
.pf-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.pf-xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-xp-next { font-size: 11.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.pf-xp-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--hover-overlay-strong, rgba(var(--fg-rgb), 0.08));
    overflow: hidden;
}
.pf-xp-fill {
    height: 100%;
    min-width: 6px;
    border-radius: inherit;
    background: var(--accent);
}

/* ---- Cards: two columns, consistent rows ---- */
.profile-settings-grid.pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: none;
    gap: 24px;
    align-items: start;
}
.pf-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pf-grid .settings-card { grid-area: auto; padding: 24px; border-radius: 16px; }
.pf-grid .settings-card-title { margin-bottom: 8px; }
.pf-grid .settings-row { gap: 16px; padding: 16px 0; }
.pf-grid .settings-row:last-child { padding-bottom: 0; }
.pf-grid .settings-row-label { min-width: 0; }
.pf-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-name-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-grid .profile-status-row { flex: 0 1 280px; }
.pf-grid .profile-social-input { flex: 0 1 220px; }
.pf-grid .profile-namecolor-picker { flex-wrap: nowrap; justify-content: flex-end; gap: 5px; }
.pf-grid .namecolor-swatch { width: 20px; height: 20px; }
.pf-grid .settings-segmented .settings-toggle-btn { white-space: nowrap; }

/* How XP works: compact, quiet table */
.pf-grid .xp-how-intro { font-size: 12.5px; margin: 0 0 12px; color: var(--text-dim); }
.pf-grid .xp-how-table { font-size: 12.5px; }
.pf-grid .xp-how-table th { padding: 0 8px 8px 0; }
.pf-grid .xp-how-table :is(th, td):first-child { padding-left: 2px; }
.pf-grid .xp-how-table td { padding: 8px 8px 8px 0; line-height: 1.35; }
.pf-grid .xp-how-table td:nth-child(2),
.pf-grid .xp-how-table th:nth-child(2) { text-align: right; padding-right: 16px; }
.pf-grid .xp-how-table td:last-child { font-size: 12px; color: var(--text-faint); }
.pf-grid .xp-how-levels { gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.pf-grid .xp-how-level { font-size: 11px; padding: 4px 10px; background: var(--bg3); border-color: transparent; }
.pf-grid .xp-how-level.current { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }

@media (max-width: 1180px) {
    .profile-settings-grid.pf-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-stats .pf-stat-xp { flex-basis: 100%; border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
    .pf-hero-main { flex-direction: column; align-items: flex-start; padding: 0 20px 16px; gap: 12px; }
    .pf-stat { padding: 14px 20px; }
}

/* Profile details: display-name pill + inline editor */
.pf-name-row[hidden] { display: none; }
.pf-name-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    min-width: 0;
    padding: 0 14px 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg3);
}
.pf-name-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent);
}
.pf-name-pill .pf-name-value { font-size: 13.5px; font-weight: 700; }
.pf-name-edit-btn { display: inline-flex; align-items: center; gap: 6px; }
.pf-name-form { flex: 0 1 380px; }
.pf-name-form .pf-name-input { flex: 1; min-width: 140px; height: 36px; box-sizing: border-box; }
.pf-name-form button { flex-shrink: 0; height: 36px; padding: 0 14px; font-size: 13px; box-sizing: border-box; }
.pf-stat[hidden] { display: none; }
.pf-xp-fill { transition: none; }

/* === SETTINGS 2.2.0 (pass 2): System-Settings style ===
   Sticky section list on the left, one centered column of sections on the right, each with a
   plain heading above its card. Theme picker = mini previews, accent = swatch row with a ring,
   background = big thumbnail + opacity slider, changelog = one collapsible block per version.
   Scoped to #settings; only CSS variables, so all four themes follow. */
#settings { max-width: 1120px; }
#settings .accounts-header { margin-bottom: 28px; }
#settings .settings-layout {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start;
}
#settings .settings-main { display: flex; flex-direction: column; gap: 44px; min-width: 0; max-width: 840px; }

/* Section list */
#settings .settings-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
#settings .settings-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: none; border-radius: 9px; background: transparent;
    color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
    cursor: pointer; transition: color 0.15s ease, background 0.15s ease;
}
#settings .settings-nav-item svg { flex-shrink: 0; color: var(--text-faint); transition: color 0.15s ease; }
#settings .settings-nav-item:hover { color: var(--text); background: var(--hover-overlay); }
#settings .settings-nav-item.active { color: var(--text); background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border); }
#settings .settings-nav-item.active svg { color: var(--accent); }
/* Voice only exists when voice channels are on */
#settings:has(#voice-settings-card[hidden]) :is(#settings-sec-voice, [data-settings-target="settings-sec-voice"]) { display: none; }

/* Sections */
#settings .settings-section { scroll-margin-top: 24px; min-width: 0; }
#settings .settings-section-head { margin: 0 0 14px 4px; }
#settings .settings-section-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin: 0; }
#settings .settings-section-desc { font-size: 13px; color: var(--text-faint); margin: 4px 0 0; }

/* Cards + rows */
#settings .settings-card { padding: 6px 24px; border-radius: 16px; background: var(--card, var(--bg2)); box-shadow: var(--shadow-sm); }
#settings .settings-row { padding: 18px 0; min-height: 0; }
#settings .settings-row:first-child, #settings .settings-card-title + .settings-row { border-top: none; }
#settings .settings-row:last-child { padding-bottom: 18px; }
#settings .settings-card > .settings-card-title { margin: 18px 0 0; }
#settings .settings-card > .settings-card-subtitle { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--border); }
#settings .settings-row-label { max-width: 380px; }
#settings .settings-row-stack { flex-direction: column; align-items: stretch; gap: 14px; }
#settings .settings-row-stack .settings-row-label { max-width: none; flex: 0 0 auto; }
#settings .settings-segmented { background: var(--bg3); }
#settings .voice-device-select { width: 260px; min-width: 0; }

/* Theme picker: every button has data-theme, so the theme's own tokens apply inside it and the
   mini preview draws itself. The frame and label use the page's tokens, captured here first. */
#settings .settings-theme-picker {
    --pg-text: var(--text); --pg-dim: var(--text-dim); --pg-faint: var(--text-faint);
    --pg-bg3: var(--bg3); --pg-border: var(--border); --pg-border-hover: var(--border-hover);
    --pg-accent: var(--accent); --pg-hover: var(--hover-overlay);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
#settings .settings-theme-picker .settings-theme-btn {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px; border-radius: 12px; white-space: normal;
    background: transparent; color: var(--pg-dim);
    box-shadow: inset 0 0 0 1px var(--pg-border);
    transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#settings .settings-theme-picker .settings-theme-btn:hover { background: var(--pg-hover); color: var(--pg-text); box-shadow: inset 0 0 0 1px var(--pg-border-hover); }
#settings .settings-theme-picker .settings-theme-btn.active {
    background: transparent; color: var(--pg-text);
    box-shadow: inset 0 0 0 2px var(--pg-accent);
}
#settings .theme-mock {
    display: flex; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 7px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border);
}
#settings .tm-side {
    width: 27%; display: flex; flex-direction: column; gap: 5px; padding: 9px 7px;
    background: var(--bg2); border-right: 1px solid var(--border);
}
#settings .settings-theme-btn[data-theme="light"] .tm-side { background: var(--chrome); }
#settings .tm-side i { display: block; height: 4px; border-radius: 2px; background: var(--text-faint); opacity: 0.55; }
#settings .tm-side i:first-child { background: var(--accent); opacity: 1; width: 80%; }
#settings .tm-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 9px; min-width: 0; }
#settings .tm-card {
    display: flex; flex-direction: column; gap: 4px; padding: 7px;
    border-radius: 5px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}
#settings .tm-card.tm-row { flex-direction: row; align-items: center; gap: 6px; }
#settings .tm-line { display: block; height: 4px; width: 72%; border-radius: 2px; background: var(--text); opacity: 0.85; }
#settings .tm-line.tm-short { width: 46%; background: var(--text-dim); opacity: 0.7; }
#settings .tm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
#settings .tm-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--green); opacity: 0.7; }
#settings .theme-name {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 9px 4px 3px; font-size: 13px; font-weight: 600;
}
#settings .settings-theme-btn.active .theme-name::after {
    content: '✓'; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--pg-accent); color: var(--on-accent); font-size: 10px; font-weight: 800;
}

/* Accent: round swatches, the chosen one gets a ring */
#settings .accent-color-picker { gap: 12px; }
#settings .accent-presets { gap: 10px; }
#settings .accent-swatch { width: 24px; height: 24px; border: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#settings .accent-swatch:hover { transform: scale(1.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#settings .accent-swatch.active { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: none; }
#settings .accent-swatch.active::after { content: none; }
#settings .accent-divider { width: 1px; height: 20px; background: var(--border-hover); }
#settings #accent-custom-input { width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--border-hover); background: transparent; }

/* Background: thumbnail + buttons, opacity slider under them */
#settings .settings-bg-row { align-items: flex-start; }
#settings .settings-bg-control { display: flex; flex-direction: column; gap: 14px; width: 360px; flex-shrink: 0; }
#settings .settings-bg-control .dash-bg-settings { gap: 14px; align-items: stretch; }
#settings .settings-bg-control .dash-bg-preview { width: 176px; height: 104px; border-radius: 10px; background: var(--bg); box-shadow: var(--shadow-sm); }
/* The thumbnail shows the default map the way the theme draws it */
:root[data-theme="light"] #settings .dash-bg-preview img[src*="bg-default"] { filter: invert(1) hue-rotate(180deg) grayscale(0.4); }
:root[data-theme="dark"] #settings .dash-bg-preview img[src*="bg-default"] { filter: grayscale(1); }
#settings .settings-bg-buttons { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1; }
#settings .settings-bg-buttons .btn-secondary { width: 100%; padding: 8px 12px; }
#settings .settings-bg-opacity { display: flex; align-items: center; gap: 14px; cursor: default; }
#settings .settings-bg-opacity-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); width: 52px; flex-shrink: 0; text-transform: none; letter-spacing: 0; }
#settings .settings-bg-opacity .dash-bg-opacity-row span { text-transform: none; letter-spacing: 0; }
#settings .dash-bg-opacity-row { width: auto; min-width: 0; flex: 1; }
#settings .settings-row > .dash-bg-opacity-row { width: 260px; flex: 0 0 auto; }
#settings .dash-bg-opacity-row span {
    min-width: 44px; padding: 3px 0; border-radius: 6px; text-align: center;
    background: var(--bg3); box-shadow: inset 0 0 0 1px var(--border); color: var(--text);
}

/* Subscription: plan + badge, what's included, actions side by side */
#settings .settings-sub-card { padding: 22px 24px 24px; }
#settings .settings-sub-card > .settings-card-title { margin: 0 0 14px; }
#settings .settings-sub-card .sub-plan-row { margin-bottom: 18px; }
#settings .settings-sub-card .sub-plan-state { font-size: 22px; font-weight: 700; }
#settings .settings-sub-card .sub-plan-when { font-size: 13px; }
#settings .settings-sub-card .sub-plan-badge { padding: 5px 12px; border-radius: 999px; font-size: 11px; }
#settings .sub-plan-perks {
    list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px;
}
#settings .sub-plan-perks li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
#settings .sub-plan-perks li::before {
    content: '✓'; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800;
    color: var(--sc, var(--accent)); background: color-mix(in srgb, var(--sc, var(--accent)) 15%, transparent);
}
#settings .sub-plan-actions { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#settings .sub-plan-actions button { width: auto; padding: 10px 18px; }

/* Changelog: one row per version, click to open */
#settings .settings-changelog { padding: 4px 24px; }
#settings .settings-changelog .changelog-list { max-height: none; overflow: visible; margin: 0; padding: 0; gap: 0; }
#settings .changelog-version, #settings .changelog-version:first-child, #settings .changelog-version:last-child {
    padding: 0; border-bottom: 1px solid var(--border);
}
#settings .changelog-version:last-child { border-bottom: none; }
#settings .changelog-version-header {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 0;
    list-style: none; cursor: pointer; user-select: none;
}
#settings .changelog-version-header::-webkit-details-marker { display: none; }
#settings .changelog-version-header:hover .changelog-ver-title { color: var(--text); }
#settings .changelog-ver-badge { min-width: 56px; text-align: center; }
#settings .changelog-version:not([open]) .changelog-ver-badge { background: var(--bg3); color: var(--text-dim); }
#settings .changelog-ver-title { font-size: 14px; font-weight: 600; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings .changelog-version[open] .changelog-ver-title { color: var(--text); font-weight: 700; }
#settings .changelog-ver-count { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
#settings .changelog-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform 0.2s ease; }
#settings .changelog-version[open] .changelog-chevron { transform: rotate(180deg); }
#settings .changelog-version .changelog-changes { padding: 2px 0 20px; gap: 10px; }

/* About: quiet footer */
#settings .settings-about {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 0 24px; margin-top: -12px; opacity: 0.75;
}
#settings .settings-about-icon { width: 28px; height: 28px; border-radius: 8px; }
#settings .settings-about-text { display: flex; flex-direction: column; gap: 2px; }
#settings .settings-about-text strong { font-size: 13px; font-weight: 600; color: var(--text-dim); }
#settings .settings-about .app-version { position: static; opacity: 1; pointer-events: auto; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Narrow windows: the section list becomes a row of tabs at the top */
@media (max-width: 1180px) {
    #settings .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #settings .settings-nav {
        flex-direction: row; overflow-x: auto; top: 0; z-index: 5; padding: 8px 0;
        background: var(--bg); border-bottom: 1px solid var(--border);
    }
    #settings .settings-nav-item { width: auto; flex-shrink: 0; }
    #settings .settings-main { max-width: none; }
}
@media (max-width: 860px) {
    #settings .settings-theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #settings .settings-bg-control { width: 100%; }
    #settings .settings-bg-row { flex-direction: column; align-items: stretch; }
}

/* === MISTAKE TRACKER (2.3.0) ===========================================================
   Chips carry the mistake's own colour as --mc; tints and text are mixed with the theme
   tokens so one rule reads on every theme (text leans to --text: lighter on dark, deeper on
   Light). Numbers use var(--num-font) with tabular digits like the rest of the stats. */

/* Toggle chips (New Trade step 4, trade details, recap, weekly review) */
.mk-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-toggle {
    --mc: var(--text-faint);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 20px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 500;
    color: var(--text-dim); background: var(--bg3); border: 1px solid var(--border);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.mk-toggle:hover { border-color: var(--border-hover); color: var(--text); }
.mk-toggle.active {
    color: color-mix(in srgb, var(--mc) 62%, var(--text));
    background: color-mix(in srgb, var(--mc) 14%, transparent);
    border-color: color-mix(in srgb, var(--mc) 45%, transparent);
    font-weight: 600;
}
.mk-toggle.archived:not(.active) { opacity: 0.6; border-style: dashed; }
.mk-toggle.archived.active { border-style: dashed; }
.mk-toggle.mk-clean { --mc: var(--green); }
.mk-toggle.mk-clean.active { cursor: default; }
.mk-emoji { font-size: 1em; line-height: 1; }
.mk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mc); flex-shrink: 0; }

/* Read-only chip (trade lists, tables, dashboard) */
.mk-chip {
    --mc: var(--text-faint);
    display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
    padding: 2px 9px 2px 7px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    color: color-mix(in srgb, var(--mc) 62%, var(--text));
    background: color-mix(in srgb, var(--mc) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc) 22%, transparent);
}
.mk-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-chip.archived { border-style: dashed; opacity: 0.8; }
.ti-details .mk-chip { font-size: 10.5px; padding: 0 7px 0 6px; gap: 4px; }
.mk-muted { font-size: 12px; font-weight: 400; color: var(--text-faint); margin: 0; }

/* Calendar: a small dot in the corner of a day with mistakes */
.cal-day-mk {
    position: absolute !important; top: 14px; right: 12px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--yellow); box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 20%, transparent);
}
#calendar .cal-day.outside .cal-day-mk { opacity: 0.35; }
.cal-detail-mk strong.negative { color: var(--red); }

/* Statistics */
.mk-card { margin-bottom: 16px; }
.mk-card-head { margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.mk-card-head .stats-card-title { display: inline-flex; align-items: center; gap: 6px; }
.mk-info-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
    border: none; border-radius: 6px; background: none; color: var(--text-faint); cursor: pointer;
}
.mk-info-btn:hover, .mk-info-btn[aria-expanded="true"] { color: var(--text); background: var(--hover-overlay); }
.mk-defs-wrap { margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: var(--subtle-bg); border: 1px solid var(--border); }
.mk-defs { display: grid; gap: 8px; margin: 0; }
.mk-defs div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; font-size: 12.5px; line-height: 1.5; }
.mk-defs dt { font-weight: 700; color: var(--text); }
.mk-defs dd { margin: 0; color: var(--text-dim); }

.mk-kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px;
    padding: 0 0 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.mk-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-kpi-value {
    font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-kpi-value small { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.mk-kpi-value.positive, .mk-side b.positive, .mk-verdict b.positive { color: var(--green); }
.mk-kpi-value.negative, .mk-side b.negative { color: var(--red); }
.mk-kpi-sub { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mk-kpi-sub b { font-family: var(--num-font); font-weight: 600; color: var(--text-dim); }
.mk-kpi-sub b.positive { color: var(--green); }
.mk-kpi-sub b.negative { color: var(--red); }

.mk-table { display: flex; flex-direction: column; }
.mk-row {
    display: grid; grid-template-columns: minmax(150px, 1fr) 48px 48px 84px minmax(150px, 212px) 76px;
    align-items: center; column-gap: 10px; min-height: 38px; padding: 4px 0;
    border-top: 1px solid var(--border); font-size: 13px;
}
.mk-row.mk-head {
    min-height: 0; padding: 8px 0; border-top: none; font-size: 10px; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em;
}
.mk-row.mk-head > span:not(:first-child) { text-align: right; }
.mk-row .st-num, .mk-row .st-money { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.mk-row-zero .mk-name { opacity: 0.6; }
.mk-name { min-width: 0; display: flex; }
.mk-trend { justify-self: end; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk-trend.better { color: var(--green); }
.mk-trend.worse { color: var(--red); }
.mk-trend.flat { color: var(--text-faint); font-weight: 500; }
.mk-note { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); }

.mk-compare { margin-top: 24px; }
.mk-sub-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.mk-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-side { padding: 16px 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--subtle-bg); min-width: 0; }
.mk-side.clean { border-color: color-mix(in srgb, var(--green) 28%, var(--border)); }
.mk-side-title { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--text); }
.mk-side.clean .mk-side-title { color: var(--green); }
.mk-side-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mk-side-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-side-grid b { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-verdict { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
.mk-verdict b { font-family: var(--num-font); font-variant-numeric: tabular-nums; }

.mk-empty { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.mk-empty-icon { font-size: 22px; line-height: 1; }
.mk-empty b { font-size: 14px; color: var(--text); }
.mk-empty p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); max-width: 680px; }

@media (max-width: 1100px) {
    .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .mk-sides { grid-template-columns: minmax(0, 1fr); }
    .mk-row { grid-template-columns: minmax(120px, 1fr) 40px 40px minmax(110px, 160px) 64px; }
    .mk-row > :nth-child(4) { display: none; }
}

/* Weekly Review */
.wr-mk-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.wr-mk-head .wr-section-title { margin: 0; }
.wr-mk-sum { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wr-mk-sum b { font-family: var(--num-font); color: var(--text); }
.wr-mk-sum b.negative { color: var(--red); }
.wr-mk-last { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); color: var(--text-faint); font-size: 12px; }
.wr-mk-list { display: flex; flex-direction: column; }
.wr-mk-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; align-items: center; gap: 16px;
    padding: 8px 0; border-top: 1px solid var(--border);
}
.wr-mk-row:first-child { border-top: none; padding-top: 0; }
.wr-mk-row .mk-chip { justify-self: start; }
.wr-mk-change { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text-dim); }
.wr-mk-was { color: var(--text-faint); }
.wr-mk-arrow { color: var(--text-faint); font-size: 12px; }
.wr-mk-change b { color: var(--text); font-weight: 700; }
.wr-mk-change i { font-style: normal; font-size: 12px; font-weight: 700; min-width: 14px; text-align: center; }
.wr-mk-change.better i, .wr-mk-change.better b { color: var(--green); }
.wr-mk-change.worse i, .wr-mk-change.worse b { color: var(--red); }
.wr-mk-change.same i { color: var(--text-faint); }
.wr-mk-cost { text-align: right; font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--text-faint); }
.wr-mk-cost.negative { color: var(--red); }
.wr-mk-clean { margin: 0; font-size: 13px; font-weight: 600; color: var(--green); }

/* Settings > Mistakes */
.settings-mistakes .mks-list { display: flex; flex-direction: column; }
.mks-row {
    display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) 96px auto; align-items: center; gap: 10px;
    padding: 8px 0; border-top: 1px solid var(--border);
}
.mks-list > .mks-row:first-child { border-top: none; }
.mks-row.archived > :not(.mks-archive) { opacity: 0.55; }
.settings-mistakes input.mks-emoji, .settings-mistakes input.mks-label {
    width: 100%; min-width: 0; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text);
    background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.settings-mistakes input.mks-emoji { text-align: center; padding: 7px 4px; }
.settings-mistakes input:focus { border-color: var(--accent-border-strong); }
.settings-mistakes input:disabled { background: transparent; border-color: transparent; }
.mks-color-wrap { position: relative; }
.mks-color, .mks-swatch {
    display: block; width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--mc); border: 2px solid color-mix(in srgb, var(--mc) 40%, var(--bg2));
}
.mks-color:disabled { cursor: default; }
.mks-color:not(:disabled):hover { box-shadow: 0 0 0 3px var(--hover-overlay-strong); }
.mks-palette {
    display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: -6px;
    grid-template-columns: repeat(5, 22px); gap: 8px; padding: 10px;
    background: var(--bg3); border: 1px solid var(--border-hover); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.mks-row.picking .mks-palette { display: grid; }
.mks-swatch.active { box-shadow: 0 0 0 2px var(--bg3), 0 0 0 4px var(--text); }
.mks-count { font-size: 12px; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settings-mistakes .mks-archive { padding: 6px 12px; font-size: 12px; }
.mks-add { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; margin: 12px 0 0 38px; }
.mks-add .btn-secondary { padding: 7px 16px; font-size: 13px; }
.mks-archived { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.mks-archived > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.mks-archived > summary:hover { color: var(--text); }
.mks-archived .mks-list { margin-top: 6px; }
.mks-foot { margin: 16px 0 0; font-size: 12px; color: var(--text-faint); }
@media (max-width: 700px) {
    .mks-row { grid-template-columns: 28px 44px minmax(0, 1fr) auto; }
    .mks-count { display: none; }
    .mks-add { margin-left: 0; }
}

/* === TRADE DETAILS popup (2.2 look) ====================================================
   Same language as the New Trade form and Weekly Review: flat cards with a hairline border,
   quiet uppercase section labels, numbers in var(--num-font) with tabular figures.
   P&L leads; the header holds what and when, the body reads top to bottom. Scoped to #trade-modal. */
#trade-modal .modal-content {
    max-width: 1080px; width: 94%; max-height: 90vh; padding: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg);
    animation: tdIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* A mentor column needs the room back */
#trade-modal .modal-content:has(.student-feedback-right:not([style*="display:none"])),
#trade-modal .modal-content:has(.mentor-detail-layout) { max-width: 1280px; }
@keyframes tdIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Header stays put while the body scrolls */
#trade-modal .modal-header {
    position: sticky; top: 0; z-index: 5;
    margin: 0; padding: 18px 20px 16px 24px; gap: 16px;
    background: var(--card); border-bottom: 1px solid var(--border);
}
#trade-modal #modal-header-left { min-width: 0; }
#trade-modal .modal-header-actions { gap: 6px; align-self: flex-start; }
#trade-modal .btn-share-trade,
#trade-modal .btn-edit-trade {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-dim); background: transparent; border: 1px solid var(--border-hover);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#trade-modal .btn-share-trade:hover { color: var(--text); background: var(--hover-overlay-strong); border-color: var(--border-hover); }
#trade-modal .btn-edit-trade { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }
#trade-modal .btn-edit-trade:hover { background: var(--accent-glow); border-color: var(--accent-border-strong); }
#trade-modal .modal-close {
    width: 34px; height: 34px; margin-left: 2px; border-radius: 10px;
    background: transparent; border: 1px solid transparent; color: var(--text-faint);
}
#trade-modal .modal-close:hover { color: var(--text); background: var(--hover-overlay-strong); border-color: transparent; }
#trade-modal :is(.btn-share-trade, .btn-edit-trade, .modal-close):focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 1px; }

.td-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
#trade-modal .td-dir { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
#trade-modal .td-dir svg { width: 20px; height: 20px; }
.td-head-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.td-head-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
#trade-modal .modal-instrument { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.td-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.td-pill {
    --tone: var(--text-dim);
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    color: var(--text-dim); background: rgba(var(--fg-rgb), 0.05); border: 1px solid var(--border);
}
.td-pill:is(.td-pill-long, .td-pill-short, .td-pill-win, .td-pill-loss, .td-pill-breakeven, .td-pill-fwd, .td-pill-rating) {
    color: color-mix(in srgb, var(--tone) 78%, var(--text));
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    border-color: color-mix(in srgb, var(--tone) 26%, transparent);
}
.td-pill-long, .td-pill-win { --tone: var(--green); }
.td-pill-short, .td-pill-loss { --tone: var(--red); }
.td-pill-breakeven { --tone: var(--blue); }
.td-pill-fwd { --tone: var(--purple); }
.td-pill-rating { --tone: var(--yellow); font-family: var(--num-font); font-weight: 700; min-width: 22px; justify-content: center; }
.td-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--text-dim); }
.td-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); opacity: 0.7; }
.td-num { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.td-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
#trade-modal .td-tag { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-dim); background: rgba(var(--fg-rgb), 0.06); }

/* Body: one column of cards with a single 12px rhythm */
#trade-modal #modal-body { padding: 20px 24px 24px; }
#trade-modal .student-feedback-layout { min-height: 0; }
#trade-modal .td-body { display: flex; flex-direction: column; gap: 12px; }
#trade-modal .td-body > .shared-by-row { margin: 0; }

.td-label, .td-card-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.td-card {
    padding: 16px 18px; border-radius: 14px;
    background: var(--subtle-bg); border: 1px solid var(--border);
}
.td-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; min-height: 18px; }
.td-card-head .mk-muted { margin-left: auto; }
.td-card-count {
    padding: 0 7px; border-radius: 999px; font-family: var(--num-font); font-size: 11px; font-weight: 600;
    line-height: 18px; color: var(--text-dim); background: rgba(var(--fg-rgb), 0.06);
}

/* Hero: the result first, big; R / points / risk beside it */
#trade-modal .td-hero {
    --tone: var(--text-faint);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 24px;
    margin: 0; padding: 20px 22px 22px; border-radius: 16px; overflow: hidden;
    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--tone) 11%, transparent), transparent 62%), var(--subtle-bg);
    border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--border));
}
#trade-modal .td-hero::before { display: none; }
#trade-modal .td-tone-positive { --tone: var(--green); }
#trade-modal .td-tone-negative { --tone: var(--red); }
.td-hero-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#trade-modal .modal-pnl-big { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.td-hero-kpis { display: flex; align-items: flex-end; }
.td-hero-kpis .td-cell { min-width: 104px; padding: 0 0 2px 22px; margin-left: 22px; border-left: 1px solid var(--border); }
.td-hero-kpis .td-cell:first-child { margin-left: 0; }
.td-hero-kpis .td-cell-value { font-size: 19px; }

.td-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.td-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.td-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.td-cell-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.td-cell-value { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-cell-value.positive { color: var(--green); }
.td-cell-value.negative { color: var(--red); }
.td-none { color: var(--text-faint); font-weight: 500; }

/* Mistakes: read-only here (tagging goes through Edit), label on the left, chips beside it */
.td-mistakes-view { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 14px; padding-bottom: 14px; }
.td-mistakes-view .td-card-title { min-width: 72px; }
.td-mk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.td-mk-chips .mk-chip { padding: 3px 11px 3px 9px; font-size: 12.5px; gap: 6px; }
.td-mk-chips .td-mk-clean { padding-left: 11px; }
.td-mk-empty { font-size: 13px; color: var(--text-faint); }

/* Notes and voice notes */
#trade-modal .modal-notes { margin: 0; padding: 16px 18px 18px; background: var(--subtle-bg); border-radius: 14px; }
#trade-modal .modal-notes p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
#trade-modal .modal-voice-note { margin: 0; padding: 16px 18px; gap: 8px; border-radius: 14px; background: var(--subtle-bg); }
#trade-modal .modal-voice-note .td-card-head { margin-bottom: 6px; }

/* Screenshots: the first one full width, the rest two by two; click opens the lightbox */
#trade-modal .td-section .td-card-head { margin: 4px 0 10px; }
#trade-modal .modal-screenshots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
#trade-modal .modal-screenshots.td-shots-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#trade-modal .td-shots-multi > .modal-ss-wrap:first-child { grid-column: 1 / -1; }
#trade-modal .modal-ss-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg3); }
#trade-modal .modal-ss-wrap img { width: 100%; height: auto; border: none; border-radius: 0; transition: opacity 0.15s; }
#trade-modal .modal-ss-wrap:hover img { opacity: 0.92; }
#trade-modal .modal-ss-copy { border-radius: 9px; }

/* Mentor column (only when a mentor has access to the journal) */
#trade-modal .student-feedback-right.td-mentor { min-width: 340px; padding-left: 20px; margin-left: 20px; }
#trade-modal .student-feedback-left.td-body { padding-right: 0; }
.td-mentor-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; padding: 22px 16px;
    border: 1px dashed var(--dashed-border); border-radius: 14px; text-align: center; color: var(--text-faint);
}
.td-mentor-empty svg { margin-bottom: 4px; opacity: 0.7; }
.td-mentor-empty b { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.td-mentor-empty span { font-size: 12px; }
.td-mentor-rating {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 12px 16px; border-radius: 14px; color: var(--purple);
    background: var(--purple-bg); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent);
}
.td-mentor-rating-label { font-size: 13px; color: var(--text-dim); }
.td-mentor-rating-value { margin-left: auto; font-family: var(--num-font); font-size: 18px; font-weight: 700; color: var(--purple); }

/* Mentor view of a student's trade: whose it is (header), then the mentor's rating and comments */
.td-owner { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.td-owner img, .td-owner-letter { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.td-owner-letter { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--bg3); }
.td-mentor-rate { margin-bottom: 12px; }
.td-mentor-rate .td-card-head { margin-bottom: 12px; color: var(--purple); }
.td-rate-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mentor-rate-btn {
    height: 36px; padding: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--num-font); font-size: 14px; font-weight: 700; color: var(--text-dim);
    background: rgba(var(--fg-rgb), 0.03); border: 1px solid var(--border);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mentor-rate-btn:hover { color: var(--text); background: var(--hover-overlay-strong); border-color: var(--border-hover); }
.mentor-rate-btn.active { color: #fff; background: var(--purple); border-color: var(--purple); }
.mentor-rate-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--purple) 55%, transparent); outline-offset: 1px; }
/* With a mentor column (mentor view, or my trade when a mentor has access) the trade scrolls on
   its own, so the comment box stays in view beside it */
#trade-modal .modal-content:has(.td-split) { display: flex; flex-direction: column; overflow: hidden; }
#trade-modal .modal-content:has(.td-split) #modal-body { flex: 1; min-height: 0; display: flex; }
#trade-modal .td-split { flex: 1; min-width: 0; min-height: 0; }
#trade-modal .td-split .student-feedback-left.td-body { min-height: 0; padding-right: 8px; }
#trade-modal .td-split .td-body > * { flex-shrink: 0; }
#trade-modal .td-split .td-mentor { min-height: 0; }
.mentor-comment-tag {
    margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600;
    color: var(--purple); background: color-mix(in srgb, var(--purple) 15%, transparent);
}
#trade-modal .td-mentor-comments { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0; }
#trade-modal .td-mentor-comments .mentor-comments-list { flex: 1; min-height: 0; max-height: none; }
.td-mentor-note { margin: 0; padding: 4px 2px; font-size: 12px; color: var(--text-faint); }

@media (max-width: 900px) {
    #trade-modal .modal-content { width: 100%; }
    #trade-modal .td-hero { grid-template-columns: minmax(0, 1fr); }
    .td-hero-kpis .td-cell { min-width: 0; flex: 1; }
    .td-grid { grid-template-columns: minmax(0, 1fr); }
    #trade-modal .modal-header { flex-wrap: wrap; }
}

/* === DIALOGS (2.2 look) ================================================================
   Every popup that is not the trade details (#trade-modal) gets the same language: a flat card
   (var(--card), hairline border, 18px radius, theme shadow), a plain header with a small tinted
   icon tile and an icon close button, sentence-case field labels, calm buttons (no gradient,
   glow, sheen or hop), numbers in var(--num-font). Scoped overrides only: the shared classes
   .admin-modal / .signal-popup / .confirm-dialog / .delete-confirm-modal and the toasts. */

/* The X used by every close button, drawn with a mask so it takes currentColor */
:root {
    --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
@keyframes dlgIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Scrims */
.admin-overlay, .signal-overlay, .delete-confirm-overlay { background: var(--overlay-backdrop); backdrop-filter: blur(6px); }

/* Shell */
.admin-modal, .signal-popup {
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg);
    animation: dlgIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Header: flat, the title leads, a small tinted tile carries the icon */
.admin-modal .admin-modal-header,
.signal-popup .signal-popup-header {
    gap: 12px; margin: 0; padding: 16px 16px 16px 20px;
    background: var(--card); border-bottom: 1px solid var(--border);
}
.admin-modal .admin-modal-title, .signal-popup .signal-popup-header h3 {
    gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); line-height: 1.3;
}
.admin-modal .admin-modal-title > svg:first-child,
.signal-popup .signal-popup-header > svg:first-child {
    box-sizing: content-box; flex-shrink: 0; width: 16px; height: 16px; padding: 8px; border-radius: 10px;
    color: var(--accent); background: var(--accent-bg);
}
.type-confirm-popup .signal-popup-header > svg:first-child { color: var(--red); stroke: currentColor; background: var(--red-bg); }
.type-confirm-popup .signal-popup-header h3 { color: var(--text); }
.admin-modal .admin-title-icon { border-radius: 10px; background: var(--accent-bg); }
.admin-modal .admin-title-icon svg { color: var(--accent); }
.mentor-modal .mentor-title-icon { background: var(--purple-bg); }
.mentor-modal .mentor-title-icon svg { color: var(--purple); }

/* Close: an icon button, quiet until hovered */
.admin-modal-close, .signal-popup-close, .psych-detail-close, .ss-lightbox-close {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; padding: 0; margin: 0 0 0 auto;
    border-radius: 10px; border: 1px solid transparent; background: transparent;
    color: var(--text-faint); font-size: 0; line-height: 0; cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.admin-modal-close > svg, .signal-popup-close > svg, .psych-detail-close > svg, .ss-lightbox-close > svg { display: none; }
.admin-modal-close::before, .signal-popup-close::before, .psych-detail-close::before, .ss-lightbox-close::before {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat;
}
.admin-modal-close:hover, .signal-popup-close:hover, .psych-detail-close:hover {
    color: var(--text); background: var(--hover-overlay-strong); border-color: transparent;
}
:is(.admin-modal-close, .signal-popup-close, .psych-detail-close, .ss-lightbox-close):focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 1px; }

/* Body: the app scrollbar */
.admin-modal .admin-modal-body, .signal-popup .signal-popup-body {
    scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
}
.admin-modal .admin-modal-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.admin-modal .admin-modal-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
.signal-popup .signal-popup-body { padding: 20px; }

/* Field labels read as words, not shouting captions */
.admin-modal .form-group > label, .signal-popup .signal-label {
    display: block; margin: 0; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-dim);
}
.admin-modal .form-group { gap: 8px; }
.signal-popup .signal-label { margin: 18px 0 8px; }
.signal-popup .signal-label:first-child { margin-top: 0; }
.signal-popup .signal-label strong { color: var(--red); letter-spacing: 0.04em; }
.signal-popup .community-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }

/* Inputs: the app field, with a focus ring instead of a glow */
.signal-popup .signal-input {
    height: 42px; padding: 0 14px; border-radius: 10px;
    background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 14px;
}
.signal-popup .signal-input:hover { border-color: var(--border-hover); }
:is(.admin-modal, .signal-popup) :is(input, select, textarea):focus {
    border-color: var(--accent-border-strong); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--bg3);
}
.admin-modal .form-group > :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select) { min-height: 42px; }
.admin-modal .form-group > textarea { resize: none; min-height: 64px; max-height: 280px; overflow-y: auto; }
@supports (field-sizing: content) { .admin-modal .form-group > textarea { field-sizing: content; } }
@supports not (field-sizing: content) { .admin-modal .form-group > textarea { resize: vertical; } }
.signal-popup .signal-dir-btn { height: 40px; padding: 0 8px; border-radius: 10px; background: var(--bg3); color: var(--text-dim); font-weight: 600; letter-spacing: 0.02em; }
.signal-popup .signal-dir-btn:hover { border-color: var(--border-hover); color: var(--text); }
.signal-popup .signal-dir-btn.long.active { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); color: var(--green); }
.signal-popup .signal-dir-btn.short.active { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }
.signal-popup .signal-dir-btn.watch.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.signal-popup .community-code, .signal-popup .community-code-input { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.signal-popup .community-code { border-style: solid; font-size: 19px; letter-spacing: 0.3em; }
.signal-popup .community-row-btn { border-radius: 8px; background: transparent; border-color: var(--border-hover); }
.signal-popup .community-row-btn:hover { background: var(--hover-overlay-strong); }

/* Buttons: a flat accent fill and a quiet outline */
:is(.admin-modal, .signal-popup) .btn-primary {
    background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
    box-shadow: none; transform: none; border-radius: 10px; font-weight: 600;
    transition: filter 0.15s, background-color 0.15s, opacity 0.15s;
}
:is(.admin-modal, .signal-popup) .btn-primary::after { display: none; }
:is(.admin-modal, .signal-popup) .btn-primary:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
:is(.admin-modal, .signal-popup) .btn-primary:active { transform: none; filter: brightness(0.95); }
:is(.admin-modal, .signal-popup) .btn-primary:disabled { opacity: 0.45; filter: none; cursor: not-allowed; }
:is(.admin-modal, .signal-popup) .btn-secondary {
    background: transparent; color: var(--text-dim); border: 1px solid var(--border-hover); border-radius: 10px;
    font-weight: 600; transform: none; transition: background-color 0.15s, color 0.15s;
}
:is(.admin-modal, .signal-popup) .btn-secondary:hover { transform: none; color: var(--text); background: var(--hover-overlay-strong); }
:is(.admin-modal, .signal-popup) :is(.btn-primary, .btn-secondary):focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 2px; }
.signal-popup .signal-send-btn { height: 42px; padding: 0 16px; font-size: 14px; font-weight: 600; margin-top: 20px; }
.signal-popup .consent-actions button { height: 40px; padding: 0 16px; font-size: 13.5px; }
.admin-modal .dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.admin-modal .dlg-actions > button { height: 40px; padding: 0 18px; font-size: 13.5px; }

/* Consent / type-to-confirm */
.signal-popup .consent-preview-tag { margin: 0; border-radius: 17px 17px 0 0; }
.signal-popup .consent-item { border-radius: 10px; border: 1px solid var(--border); }
.type-confirm-popup .type-confirm-input { text-align: center; font-family: var(--num-font); }
/* Typing a word is only asked before something that cannot be undone: the button says so in red */
.type-confirm-popup .btn-primary.type-confirm-ok { background: var(--red); color: #fff; }
.signal-popup .community-code-row .btn-secondary { align-self: stretch; height: auto; padding: 0 18px; }

/* --- Playbook New/Edit Setup and Accounts Add/Edit ------------------------------------- */
.dlg-form .form-group { margin-bottom: 18px; }
.dlg-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.dlg-form .form-row > .form-group { min-width: 0; }
.dlg-form .dlg-optional { font-weight: 500; color: var(--text-faint); }
#account-modal-overlay .admin-modal-body, #playbook-modal-overlay .admin-modal-body { padding: 20px 24px 24px; }
#account-form input[type=number] { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
#account-eval-fields {
    margin: 0 0 18px; padding: 14px 16px 0; border-radius: 14px;
    background: var(--subtle-bg); border: 1px solid var(--border);
}
#account-eval-fields .dlg-subhead { margin: 0 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
#account-eval-fields .form-group { margin-bottom: 16px; }


/* Checklist editor: one row per item, add with Enter or the button, drag the handle to reorder */
.pb-cl { display: flex; flex-direction: column; gap: 6px; }
.pb-cl:empty { display: none; }
.pb-cl-row {
    display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 2px;
    border-radius: 10px; background: var(--bg3); border: 1px solid var(--border);
    transition: border-color 0.15s, background-color 0.15s, opacity 0.15s;
}
.pb-cl-row:hover { border-color: var(--border-hover); }
.pb-cl-row:focus-within { border-color: var(--accent-border-strong); box-shadow: 0 0 0 3px var(--accent-bg); }
.pb-cl-row.dragging { opacity: 0.45; }
.pb-cl-handle {
    display: grid; place-items: center; width: 22px; height: 30px; flex-shrink: 0;
    color: var(--text-faint); cursor: grab; border-radius: 6px; opacity: 0.6;
}
.pb-cl-row:hover .pb-cl-handle { opacity: 1; }
.pb-cl-handle:active { cursor: grabbing; }
.pb-cl { counter-reset: pbcl; }
.pb-cl-row { counter-increment: pbcl; }
.pb-cl-num {
    display: grid; place-items: center; min-width: 22px; height: 22px; flex-shrink: 0; margin-right: 8px; border-radius: 7px;
    background: rgba(var(--fg-rgb), 0.06); color: var(--text-dim);
    font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 700;
}
.pb-cl-num::before { content: counter(pbcl); }
.pb-cl-row:focus-within .pb-cl-num { color: var(--accent); background: var(--accent-bg); }
.admin-modal .pb-cl-row .pb-cl-input {
    flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: none; border-radius: 0;
    background: transparent; box-shadow: none; font-size: 14px; color: var(--text);
}
.admin-modal .pb-cl-row .pb-cl-input:focus { box-shadow: none; background: transparent; }
.pb-cl-remove {
    display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; padding: 0;
    border: none; border-radius: 8px; background: transparent; color: var(--text-faint); cursor: pointer;
    opacity: 0; transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}
.pb-cl-row:hover .pb-cl-remove, .pb-cl-row:focus-within .pb-cl-remove, .pb-cl-remove:focus-visible { opacity: 1; }
.pb-cl-remove:hover { color: var(--red); background: var(--red-bg); }
.pb-cl-remove::before {
    content: ''; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat;
}
.pb-cl-add {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 34px; padding: 0 12px 0 10px;
    border: 1px dashed var(--dashed-border); border-radius: 10px; background: transparent;
    color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.pb-cl:not(:empty) + .pb-cl-add { margin-top: 2px; }
.pb-cl-add:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-subtle); }
.pb-cl-add svg { flex-shrink: 0; }
#playbook-modal-overlay .pb-screenshots-zone {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px;
    border: 1.5px dashed var(--dashed-border); border-radius: 12px; background: var(--bg3);
}
#playbook-modal-overlay .pb-screenshots-zone:hover { border-color: var(--accent-border); background: var(--accent-subtle); }
#playbook-modal-overlay .pb-screenshots-zone svg { color: var(--text-faint); flex-shrink: 0; }
#playbook-modal-overlay .pb-screenshots-hint { font-size: 13px; color: var(--text-faint); }
#playbook-modal-overlay .pb-screenshots-hint b { color: var(--text); font-weight: 600; }
#playbook-modal-overlay .pb-screenshot-preview:empty { display: none; }
#playbook-modal-overlay .pb-screenshot-preview { margin-top: 10px; }
#playbook-modal-overlay .pb-thumb { width: 88px; height: 64px; border-radius: 10px; }
#playbook-modal-overlay .pb-thumb-remove { width: 22px; height: 22px; top: 4px; right: 4px; border-radius: 7px; font-size: 0; background: rgba(0, 0, 0, 0.6); }
#playbook-modal-overlay .pb-thumb-remove::before {
    content: ''; width: 12px; height: 12px; background: #fff;
    -webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat;
}

/* --- Confirm dialogs: #confirm-modal and the chat's delete confirm look the same ---------- */
.confirm-modal .confirm-dialog, .delete-confirm-modal {
    width: min(92vw, 380px); max-width: none; padding: 28px 24px 20px;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg); text-align: center;
    animation: dlgIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.confirm-modal .confirm-icon, .delete-confirm-modal .delete-confirm-icon {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 16px;
    border-radius: 12px; color: var(--red); background: var(--red-bg);
}
.confirm-icon svg, .delete-confirm-icon svg { width: 22px; height: 22px; }
.confirm-dialog h3, .delete-confirm-modal .delete-confirm-title {
    margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--text);
}
.confirm-dialog p, .delete-confirm-modal .delete-confirm-text { margin: 0 0 22px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.delete-confirm-modal .delete-confirm-text:has(+ .delete-confirm-preview) { margin-bottom: 12px; }
.delete-confirm-modal .delete-confirm-preview {
    margin: 0 0 22px; padding: 9px 12px; border-radius: 10px; font-style: normal; font-size: 12.5px;
    color: var(--text-dim); background: var(--subtle-bg); border: 1px solid var(--border); text-align: left;
}
.confirm-actions, .delete-confirm-actions { display: flex; gap: 10px; }
.btn-confirm-cancel, .delete-confirm-cancel, .btn-confirm-ok, .delete-confirm-delete {
    flex: 1; height: 40px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; box-shadow: none; transition: background-color 0.15s, color 0.15s, filter 0.15s;
}
.btn-confirm-cancel, .delete-confirm-cancel { background: transparent; border: 1px solid var(--border-hover); color: var(--text-dim); }
.btn-confirm-cancel:hover, .delete-confirm-cancel:hover { color: var(--text); background: var(--hover-overlay-strong); border-color: var(--border-hover); }
.btn-confirm-ok, .delete-confirm-delete { background: var(--red); border: 1px solid transparent; color: #fff; opacity: 1; }
.btn-confirm-ok:hover, .delete-confirm-delete:hover { opacity: 1; box-shadow: none; background: var(--red); filter: brightness(1.08); }
:is(.btn-confirm-cancel, .delete-confirm-cancel, .btn-confirm-ok, .delete-confirm-delete):focus-visible { outline: 2px solid var(--accent-border-strong); outline-offset: 2px; }

/* --- Toasts: one look for the message toast and the Undo toasts ---------------------------- */
@keyframes toastIn22 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast, .toast.toast-msg {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px 10px 11px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; backdrop-filter: none;
    animation: toastIn22 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), toastOut 0.3s ease 2.5s forwards;
}
.toast:not(.toast-msg) { padding-left: 18px; }
.toast.success, .toast.error, .toast.undo-toast, .toast.undo-edit-toast { border-left: 1px solid var(--border); }
.toast.undo-toast, .toast.undo-edit-toast { padding: 9px 9px 9px 18px; gap: 16px; animation: toastIn22 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.toast.toast-msg .toast-icon { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--tc) 14%, transparent); }
.toast.toast-msg .toast-text { font-size: 13.5px; font-weight: 600; }
.toast .undo-btn {
    height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
    color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border);
    transition: background-color 0.15s, border-color 0.15s;
}
.toast .undo-btn:hover { color: var(--accent); background: var(--accent-glow); border-color: var(--accent-border-strong); }

/* XP: a small card with the number up front */
.xp-toast {
    gap: 12px; padding: 10px 18px 10px 10px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg); backdrop-filter: none;
    transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xp-toast-show { transform: none; }
.xp-toast-amount {
    display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 9px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700;
    color: var(--accent); background: var(--accent-bg); text-shadow: none;
}
.xp-toast-reason { font-size: 13.5px; font-weight: 600; color: var(--text); opacity: 1; }

/* Level up: a centred card, no neon and no bounce (the confetti does the celebrating) */
.levelup-toast {
    gap: 4px; padding: 24px 40px 22px; min-width: 260px;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg); backdrop-filter: none;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.levelup-toast-show { transform: translate(-50%, -50%); }
.levelup-toast-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px;
    border-radius: 14px; font-size: 24px; line-height: 1; background: var(--accent-bg); animation: none;
}
.levelup-toast-text { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.levelup-toast-level { font-size: 13.5px; font-weight: 600; color: var(--accent); opacity: 1; font-family: var(--num-font); font-variant-numeric: tabular-nums; }

/* --- Notifications panel and the chat's right-click menu ----------------------------------- */
.notif-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); }
.notif-panel .notif-panel-header { padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.notif-panel .notif-panel-list { padding: 0 6px 6px; scrollbar-color: var(--scrollbar-thumb) transparent; }
.notif-panel .notif-count { font-family: var(--num-font); font-variant-numeric: tabular-nums; box-shadow: none; }
.notif-panel .notif-item { border-radius: 10px; }
.notif-panel .notif-item:hover { background: var(--hover-overlay); }
.notif-panel .notif-clear-btn:hover { background: var(--hover-overlay-strong); }
.chat-context-menu { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.chat-context-menu .chat-ctx-reactions { background: var(--subtle-bg); box-shadow: inset 0 0 0 1px var(--border); }
.chat-context-menu .chat-ctx-emoji:hover { background: var(--hover-overlay-strong); transform: scale(1.08); }
.chat-context-menu .chat-ctx-btn:hover { background: var(--hover-overlay); }
.chat-context-menu .chat-ctx-btn-danger:hover { background: var(--red-bg); }

/* --- Academy --------------------------------------------------------------------------------- */
.psych-detail-modal .psych-detail-header {
    position: sticky; top: 0; z-index: 2; padding: 16px 16px 16px 28px;
    background: var(--card); border-bottom: 1px solid var(--border);
}
.psych-detail-modal .psych-detail-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.psych-detail-modal .psych-detail-edit:hover { background: var(--hover-overlay-strong); }
.acad-cm-modal .acad-cm-sub { font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 500; }

/* --- Screenshot lightbox: dark stage, the buttons follow the theme -------------------------- */
.ss-lightbox .ss-lightbox-btn, .ss-lightbox .ss-lightbox-close, .ss-lightbox .ss-lb-nav {
    width: 40px; height: 40px; border-radius: 12px; margin: 0;
    background: var(--card); color: var(--text-dim);
    border: 1px solid var(--border-hover); box-shadow: var(--shadow-md);
    transition: background-color 0.15s, color 0.15s;
}
.ss-lightbox .ss-lb-nav { width: 44px; height: 44px; border-radius: 50%; color: var(--text); }
.ss-lightbox :is(.ss-lightbox-btn, .ss-lightbox-close, .ss-lb-nav):hover { background: var(--bg4); color: var(--text); border-color: var(--border-hover); }
.ss-lightbox .ss-lb-counter {
    height: 40px; display: inline-flex; align-items: center; margin: 0; padding: 0 14px; border-radius: 12px;
    font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-dim);
    background: var(--card); border: 1px solid var(--border-hover);
}
.ss-lightbox .ss-lb-counter[style*="none"] { display: none; }
.ss-lightbox img { border-radius: 12px; }

/* --- Paywall: the scrim follows the theme; the card is a plain 2.2 card ---------------------- */
.paywall-overlay { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.paywall-card { background: var(--card); box-shadow: var(--shadow-lg); }
.paywall-card .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: none; transform: none; }
.paywall-card .btn-primary::after { display: none; }
.paywall-card .btn-primary:hover { filter: brightness(1.08); box-shadow: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .admin-modal, .signal-popup, .confirm-dialog, .delete-confirm-modal, .toast { animation: none; }
    .xp-toast, .levelup-toast { transition: opacity 0.15s; }
}
@media (max-width: 560px) {
    .dlg-form .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Share button answers in place: spinner while the card is drawn, then a green check + "Copied".
   min-width fits both labels, so the header doesn't shift. */
#trade-modal .btn-share-trade { min-width: 104px; justify-content: center; }
#trade-modal .btn-share-trade.is-busy { cursor: progress; }
#trade-modal .btn-share-trade.is-done,
#trade-modal .btn-share-trade.is-done:hover {
    color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent);
    border-color: color-mix(in srgb, var(--green) 38%, transparent);
}
#trade-modal .btn-share-trade .share-spin { animation: shareSpin 0.8s linear infinite; }
@keyframes shareSpin { to { transform: rotate(360deg); } }