@import url('../fonts/fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ═══ THEMES (2.2 "The Big Refresh" — same token set as the desktop app's style.css) ═══════════════
   Keys: 'spotify' = Standard (default), 'legacy' = the pre-2.2 look, 'dark', 'light' (dimmed grey).
   The theme comes from the synced setting (userData/<uid>/settings/values/theme) and sits on
   <html data-theme>. The accent arrives as --accent-base (applyAccent); each theme derives --accent
   and its tints from it, so Light can deepen it for contrast.
   --fg-rgb: the foreground as "r, g, b" for rgba(var(--fg-rgb), a) overlays (white on dark, ink on light).
   --green/--red/--blue/--yellow/--purple stay 6-digit hex. */
:root { --accent-base: #1db954; }

:root, [data-theme] {
    --surface: var(--bg2);
    --card: var(--bg2);
    --surface-2: var(--bg3);
    --border-strong: var(--border-hover);
    --on-accent: #ffffff;
    --yellow-bg: color-mix(in srgb, var(--yellow) 11%, transparent);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --nav-h: 62px;
    /* Room under the tabs, clear of the home bar and the screen's rounded corners */
    --nav-pad: max(env(safe-area-inset-bottom, 0px), 18px);
    --nav-total: calc(var(--nav-h) + var(--nav-pad));
    --header-h: 52px;
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Numbers (money, stats) use the text font with equal-width digits — no JetBrains Mono since 2.2.
       --mono is kept as an alias so older rules follow along. */
    --num-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: var(--num-font);
}

/* Standard — refined near-blacks with a faint green undertone */
:root, [data-theme="spotify"] {
    color-scheme: dark;
    --fg-rgb: 255, 255, 255;
    --bg: #0b0d0c;
    --bg2: #121514;
    --bg3: #191c1b;
    --bg4: #212524;
    --bg5: #2b302e;
    --border: rgba(var(--fg-rgb), 0.07);
    --border-hover: rgba(var(--fg-rgb), 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);
    --yellow: #f2bd4b;
    --purple: #b59dff;
    --purple-bg: rgba(181, 157, 255, 0.1);
    --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(var(--fg-rgb), 0.045);
    --hover-overlay-strong: rgba(var(--fg-rgb), 0.075);
    --subtle-bg: rgba(var(--fg-rgb), 0.025);
    --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);
}

/* Legacy — the look 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(var(--fg-rgb), 0.07);
    --border-hover: rgba(var(--fg-rgb), 0.14);
    --text: #ffffff;
    --text-dim: #b3b3b3;
    --text-faint: #727272; /* was #535353; ≥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);
    --yellow: #f5c542;
    --purple: #b49bff;
    --purple-bg: rgba(180, 155, 255, 0.08);
    --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(var(--fg-rgb), 0.05);
    --hover-overlay-strong: rgba(var(--fg-rgb), 0.08);
    --subtle-bg: rgba(var(--fg-rgb), 0.03);
    --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);
}

/* Dark — deep, cool near-black: 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(var(--fg-rgb), 0.065);
    --border-hover: rgba(var(--fg-rgb), 0.12);
    --text: #eceef2;
    --text-dim: #8a90a0;
    --text-faint: #626878; /* was #5a6070; ≥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);
    --yellow: #f0b84a;
    --purple: #a791ff;
    --purple-bg: rgba(167, 145, 255, 0.1);
    --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(var(--fg-rgb), 0.04);
    --hover-overlay-strong: rgba(var(--fg-rgb), 0.07);
    --subtle-bg: rgba(var(--fg-rgb), 0.022);
    --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);
}

/* Light — dimmed grey surfaces (nothing brighter than ~#e0e3e8), near-black ink, deeper greens/reds,
   a darkened accent and soft shadows instead of glows */
[data-theme="light"] {
    color-scheme: light;
    --fg-rgb: 21, 24, 29;
    --bg: #d1d5db;
    --bg2: #dde0e5;
    --chrome: #c6cbd2; /* header + bottom nav */
    --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);
    --yellow: #8a5a05;
    --purple: #5a3db5;
    --purple-bg: rgba(104, 72, 201, 0.09);
    --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);
    --subtle-bg: rgba(21, 24, 29, 0.03);
    --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);
}

html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ══════ SCREENS ══════ */
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* ══════ AUTH ══════ */
#auth-screen { justify-content: center; align-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--green) 6%, transparent) 0%, var(--bg) 70%); position: relative; z-index: 10000; }
.auth-card { width: 100%; max-width: 340px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px 24px; position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; }
.auth-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
.auth-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 28px; }
.auth-error { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 18px; }
.auth-legal { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-top: 6px; }
.auth-legal a { color: inherit; text-decoration: underline; }
.btn-google { width: 100%; padding: 14px; background: #fff; color: #1f1f1f; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.15s; touch-action: manipulation; -webkit-touch-callout: none; position: relative; z-index: 10; }
.btn-google:active { background: #e8e8e8; transform: scale(0.98); }

/* ══════ ACCESS DENIED ══════ */
#denied-screen { justify-content: center; align-items: center; padding: 24px; background: var(--bg); position: fixed; inset: 0; z-index: 9999; }
.denied-card { width: 100%; max-width: 360px; text-align: center; padding: 40px 24px; }
.denied-icon { color: var(--red); margin-bottom: 20px; opacity: 0.9; }
.denied-title { font-size: 24px; font-weight: 800; color: var(--red); letter-spacing: -0.5px; margin-bottom: 8px; }
.denied-sub { font-size: 15px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.denied-email { font-size: 13px; color: var(--text-faint); font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-bottom: 16px; padding: 8px 16px; background: color-mix(in srgb, var(--red) 8%, transparent); border: 1px solid color-mix(in srgb, var(--red) 15%, transparent); border-radius: 8px; display: inline-block; }
.denied-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }
.denied-btn { padding: 12px 32px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; }
.denied-btn:active { background: var(--bg4); transform: scale(0.98); }

/* ══════ HEADER ══════ */
.header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.header-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.header-settings { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 6px; border-radius: 8px; }
.header-settings:active { color: var(--text); }

/* ══════ MAIN ══════ */
.main { flex: 1; overflow-y: auto; padding: 14px 14px; padding-bottom: calc(var(--nav-total) + var(--voice-bar-h, 0px) + 16px); -webkit-overflow-scrolling: touch; }

/* ══════ PAGES ══════ */
.page { display: none; }
.page.active { display: block; animation: viewIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ══════ BOTTOM NAV ══════ */
.bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-total); background: var(--bg2); border-top: 1px solid var(--border); padding: 0 max(env(safe-area-inset-right, 0px), 14px) var(--nav-pad) max(env(safe-area-inset-left, 0px), 14px); z-index: 100; transition: transform 0.2s; }
body.keyboard-open .bottom-nav { transform: translateY(100%); }
body.keyboard-open #page-chat { padding-bottom: 0; }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 9px; font-family: var(--font); padding: 6px 0; min-width: 0; transition: color 0.2s; position: relative; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn.active { color: var(--accent); }
.nav-btn.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }
.nav-btn span { font-weight: 600; letter-spacing: 0.2px; }

/* ══════ DASHBOARD ══════ */
.dash-greeting { margin-bottom: 14px; }
.dash-greeting-text { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.dash-greeting-quote { font-size: 12px; color: var(--text-faint); margin-top: 2px; font-style: italic; }

/* Hero Cards */
.dash-hero { display: flex; gap: 10px; margin-bottom: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.dash-hero::-webkit-scrollbar { display: none; }
.dash-hero-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; min-width: 150px; flex: 1 0 auto; scroll-snap-align: start; transition: border-color 0.3s, box-shadow 0.3s; }
.dash-hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0.7; }
.dash-hero-card::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; border-radius: var(--radius); }
.dash-hero-today::before { background: linear-gradient(90deg, var(--accent), transparent); }
.dash-hero-today.glow-positive { border-color: color-mix(in srgb, var(--green) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--green) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--green) 3%, transparent); }
.dash-hero-today.glow-negative { border-color: color-mix(in srgb, var(--red) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--red) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--red) 3%, transparent); }
.dash-hero-week::before { background: linear-gradient(90deg, var(--blue), transparent); }
.dash-hero-week.glow-positive { border-color: color-mix(in srgb, var(--green) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--green) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--green) 3%, transparent); }
.dash-hero-week.glow-negative { border-color: color-mix(in srgb, var(--red) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--red) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--red) 3%, transparent); }
.dash-hero-total::before { background: linear-gradient(90deg, var(--purple), var(--accent), transparent); }
.dash-hero-total.glow-positive { border-color: color-mix(in srgb, var(--green) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--green) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--green) 3%, transparent); }
.dash-hero-total.glow-negative { border-color: color-mix(in srgb, var(--red) 20%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--red) 8%, transparent), inset 0 0 20px color-mix(in srgb, var(--red) 3%, transparent); }
.dash-hero-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; display: block; }
.dash-hero-value { font-size: 24px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; display: block; margin-top: 6px; }
.dash-hero-sub { font-size: 11px; color: var(--text-faint); font-weight: 500; display: block; margin-top: 4px; }

/* Stats Grid */
.dash-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.dash-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 8px; text-align: center; }
.dash-stat-value { font-size: 16px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; display: block; }
.dash-stat-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; display: block; margin-top: 4px; }

/* Dashboard Section Separator */
.dash-separator { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 16px 0; }

/* Section Title */
.section-title { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 12px; margin-top: 4px; display: flex; align-items: center; gap: 10px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ══════ TRADE LIST ══════ */
.trade-list { display: flex; flex-direction: column; gap: 6px; }
.trade-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0; display: flex; align-items: stretch; cursor: pointer; transition: all 0.2s; overflow: hidden; }
.trade-item:active { border-color: var(--border-hover); background: rgba(var(--fg-rgb), 0.02); }
.ti-accent { width: 3px; flex-shrink: 0; border-radius: 3px 0 0 3px; }
.ti-accent.win { background: var(--green); }
.ti-accent.loss { background: var(--red); }
.ti-accent.breakeven { background: var(--blue); }
.ti-body { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; min-width: 0; }
.ti-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ti-top-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ti-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.ti-result-badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.ti-result-badge.win { color: var(--green); background: var(--green-bg); }
.ti-result-badge.loss { color: var(--red); background: var(--red-bg); }
.ti-result-badge.breakeven { color: var(--text-dim); background: var(--bg4); }
.ti-setup { font-size: 11px; color: var(--accent); font-weight: 600; }
.ti-meta { font-size: 11px; color: var(--text-dim); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.ti-meta-icon { display: inline-flex; align-items: center; gap: 2px; color: var(--text-faint); font-size: 10px; }
.ti-meta-icon svg { width: 12px; height: 12px; }
.ti-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; margin-left: 12px; }
.ti-pnl { font-size: 15px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.ti-rr { font-size: 11px; color: var(--text-faint); font-family: var(--num-font); font-variant-numeric: tabular-nums; font-weight: 600; }
.empty-msg { color: var(--text-faint); text-align: center; padding: 40px 0; font-size: 13px; }

/* ══════ FORM CARDS ══════ */
.tf-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; position: relative; overflow: hidden; }
.tf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.3; }
.tf-card-header { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--fg-rgb), 0.04); margin-bottom: 4px; }
.tf-card-header svg { opacity: 0.7; }

.form-group { margin-top: 14px; }
.form-group:first-of-type { margin-top: 8px; }
.form-group label { display: block; font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
.label-hint { margin-left: 4px; font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row .form-group { margin-top: 14px; }

input, textarea, select { width: 100%; padding: 11px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: var(--font); outline: none; resize: none; transition: all 0.2s; -webkit-appearance: none; appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23b3b3b3' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--bg4); }

/* Button Groups */
.btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-group button { flex: 1; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; }
.btn-group button:active { transform: scale(0.96); }
.btn-group button.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); box-shadow: none; }

/* Direction buttons */
.dir-group button { flex: 1; }
.dir-group button.active.btn-long { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); box-shadow: none; }
.dir-group button.active.btn-short { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); box-shadow: none; }

/* Rating buttons */
.rating-group button { width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; }
.rating-group button.active { background: var(--yellow-bg); border-color: rgba(245,166,35,0.3); color: var(--yellow); box-shadow: 0 0 16px rgba(245,166,35,0.1); }

/* Emotion buttons */
.emotion-group button { padding: 8px 14px; border-radius: 20px; font-size: 12px; }

/* Mood/Rules buttons */
.mood-group button, .rules-group button { padding: 10px 14px; border-radius: 8px; font-size: 13px; }

/* Primary button */
.btn-primary { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all 0.15s; letter-spacing: -0.2px; }
.btn-primary:active { opacity: 0.85; transform: scale(0.98); }
.btn-full { margin-top: 18px; }

/* ══════ CHAT ══════ */
/* The chat fills the area it's in (not 100vh, which on phones is taller than the visible screen and
   pushed the input under the browser bar / bottom nav) and keeps clear of the bottom nav */
#page-chat { display: none; flex-direction: column; height: 100%; padding: 0 0 calc(var(--nav-total) + var(--voice-bar-h, 0px)); overflow: hidden; }
#page-chat.active { display: flex; }

#page-chat { position: relative; }

/* Online strip: "● 4 online" + avatar stack; tap to open the member list */
.chat-online-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.chat-online-strip:active { background: rgba(var(--fg-rgb), 0.02); }
.ol-strip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); flex-shrink: 0; }
.ol-strip-label { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.ol-strip-avatars { display: flex; margin-left: auto; }
.ol-strip-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -7px; flex-shrink: 0; }
.ol-strip-av:first-child { margin-left: 0; }
.ol-strip-av-letter { display: flex; align-items: center; justify-content: center; background: var(--bg4); font-size: 10px; font-weight: 700; color: var(--text-dim); }
.ol-strip-chevron { color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0; }
.chat-online-strip.open .ol-strip-chevron { transform: rotate(180deg); }

/* ══════ VOICE ══════ */
/* "Voice · 3" chip in the online strip */
.ol-strip-voice { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; margin-left: 4px; border: 1px solid var(--border-hover); border-radius: 13px; background: var(--bg3); color: var(--text-dim); font-size: 12px; font-weight: 700; font-family: var(--font); cursor: pointer; flex-shrink: 0; }
.ol-strip-voice.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 12%, var(--bg3)); }
/* Speaker icon next to people in voice, in the member list */
.chat-member.in-voice .chat-member-info { flex: 1; }
.chat-member.in-voice::after { content: ''; flex-shrink: 0; width: 15px; height: 15px; 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; 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; }

/* The channels sheet */
.voice-sheet { max-height: 82vh; overflow-y: auto; }
.voice-sheet-title { margin: 0 4px 12px; font-size: 17px; font-weight: 800; }
.voice-sheet-rooms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.voice-sheet-room { padding: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; }
.voice-sheet-room.active { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.voice-sheet-room-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; color: var(--text-dim); }
.voice-sheet-room-head svg { flex-shrink: 0; }
.voice-sheet-room.active .voice-sheet-room-head svg { color: var(--green); }
.voice-sheet-room-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-sheet-count { font-size: 12px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.voice-sheet-join { height: 32px; padding: 0 16px; border: none; border-radius: 16px; background: var(--green); color: #000; font-size: 13px; font-weight: 800; font-family: var(--font); cursor: pointer; }
.voice-sheet-join:disabled { opacity: 0.45; }
.voice-sheet-here { padding-right: 6px; font-size: 12px; font-weight: 800; color: var(--green); }
.voice-sheet-members { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 6px 36px; }
.voice-sheet-member { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 0; }
.voice-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; transition: box-shadow 0.1s; }
.voice-av-letter { display: flex; align-items: center; justify-content: center; background: var(--bg4); font-size: 11px; font-weight: 700; color: var(--text-dim); }
.speaking > .voice-av, .voice-av.speaking { box-shadow: 0 0 0 2px var(--bg3), 0 0 0 4px var(--green); }
.voice-member-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speaking .voice-member-name { color: var(--text); }
.voice-member-flag { display: flex; flex-shrink: 0; color: var(--red); }
.voice-member-warn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.voice-sheet-controls { display: flex; gap: 8px; margin-bottom: 8px; }
.voice-sheet-controls .bottom-sheet-btn { justify-content: center; }
.voice-sheet-controls .bottom-sheet-btn + .bottom-sheet-btn { margin-top: 0; }
.bottom-sheet-btn.voice-on, .bottom-sheet-btn.voice-on svg { color: var(--red); }
.voice-sheet-diag { display: block; margin: 12px auto 0; background: none; border: none; color: var(--text-faint); font-size: 12px; font-family: var(--font); text-decoration: underline; cursor: pointer; }

/* In voice: a bar above the bottom nav on every page */
/* Watching a shared screen: the Screen badge and a full-screen viewer */
.voice-screen-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 10px 4px 8px; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-bg); color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer; }
.voice-screen-badge svg { color: var(--accent); flex-shrink: 0; }
.voice-screen-badge.static { padding: 2px 8px 2px 7px; font-size: 11px; cursor: default; }
.voice-screen-dot { position: relative; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.voice-screen-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--accent); animation: voiceScreenPulse 1.8s ease-out infinite; }
@keyframes voiceScreenPulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.voice-bar-screen { position: relative; color: var(--accent); background: var(--accent-bg); }
.voice-bar-screen .voice-screen-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; }
.voice-member-flag.forced { padding: 2px; border-radius: 5px; background: var(--red); color: #fff; }
.screen-viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #000; }
body.screen-viewing { overflow: hidden; }
.screen-viewer-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px) 10px calc(env(safe-area-inset-left) + 14px); background: linear-gradient(rgba(0,0,0,0.75), transparent); transition: opacity 0.2s; }
.screen-viewer.bare .screen-viewer-head, .screen-viewer.bare .screen-viewer-hint { opacity: 0; pointer-events: none; }
.screen-viewer-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-viewer-tabs { display: none; flex: 1; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.screen-viewer-tabs::-webkit-scrollbar { display: 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: 150px; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); font-family: var(--font); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-viewer-tab.active { color: #fff; border-color: var(--accent); background: var(--accent-bg); }
.screen-viewer-btn { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: rgba(255,255,255,0.12); color: #fff; }
.screen-viewer video { flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; 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: 14px; pointer-events: none; }
.screen-viewer.waiting .screen-viewer-wait { display: flex; }
.screen-viewer-hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px); text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); pointer-events: none; transition: opacity 0.2s; }
@media (orientation: landscape) { .screen-viewer-hint { display: none; } }

body.in-voice { --voice-bar-h: 52px; }
.voice-bar { position: fixed; left: 0; right: 0; bottom: var(--nav-total); height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 4px; background: color-mix(in srgb, var(--green) 9%, var(--bg2)); border-top: 1px solid color-mix(in srgb, var(--green) 30%, transparent); z-index: 99; }
.voice-bar[hidden], body.keyboard-open .voice-bar { display: none; }
.voice-bar-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 8px; background: none; border: none; color: inherit; font-family: var(--font); text-align: left; cursor: pointer; }
.voice-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.voice-bar-status { font-size: 13px; font-weight: 800; color: var(--green); }
.voice-bar-status.warn { color: var(--yellow); }
.voice-bar-room { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-bar-avatars { display: flex; gap: 4px; }
.voice-bar-avatars .voice-av { width: 24px; height: 24px; }
.voice-bar-btn { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: var(--bg3); color: var(--text); cursor: pointer; }
.voice-bar-btn.on { color: var(--red); }
.voice-bar-btn.danger { background: var(--red); color: #fff; }

/* Member list: status dot on the avatar, online / offline counts, "typing…" under the name */
.chat-online-drawer { max-height: 45vh; overflow-y: auto; padding: 0 8px 8px; border-bottom: 1px solid var(--border); animation: slideDown 0.15s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.chat-members-header, .chat-members-divider { display: flex; align-items: center; gap: 8px; padding: 12px 6px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.chat-members-header::before { content: ''; 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-member { display: flex; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 10px; cursor: pointer; }
.chat-member:active { background: rgba(var(--fg-rgb), 0.04); }
.chat-member-avatar-wrap { position: relative; flex-shrink: 0; width: 32px; height: 32px; }
.chat-member-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.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); }
.chat-member-status { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--bg); }
.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: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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-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-messages { flex: 1; overflow-y: auto; padding: 14px 0; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.chat-messages::-webkit-scrollbar { display: none; }
.chat-system-msg { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-dim); font-size: 11px; }
.chat-system-msg::before, .chat-system-msg::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* Someone joined or left: a quiet line between the messages */
.chat-member-event { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 16px; color: var(--text-dim); font-size: 12px; text-align: center; }
.chat-member-event svg { flex-shrink: 0; }
.chat-member-event.join svg { color: var(--green); }
.chat-member-event time { font-size: 11px; opacity: 0.75; }
.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: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.04); color: var(--text-dim); font: inherit; font-size: 12px; }
.chat-load-older-btn:disabled { opacity: 0.7; }
.chat-msg { max-width: 100%; align-self: flex-start; display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 2px 12px; background: none; border: none; border-radius: 6px; }
.chat-msg:first-child { margin-top: 0; }
.chat-msg:active { background: rgba(var(--fg-rgb), 0.02); }
.chat-msg-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; margin-top: 2px; }
.chat-msg-avatar-letter { width: 38px; height: 38px; background: var(--bg4); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-dim); }
img.chat-msg-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; margin-top: 2px; }
.chat-msg-content { flex: 1; min-width: 0; }

/* Grouped messages */
.chat-msg.chat-msg-grouped { margin: 0 !important; display: flex; gap: 12px; align-items: flex-start; padding: 1px 12px; }
.chat-msg.chat-msg-group-start { margin-bottom: 0 !important; }
.chat-msg-grouped .chat-msg-bubble { padding: 0; }
.chat-msg-avatar-spacer { width: 38px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.chat-msg-avatar-spacer[data-time]::after { content: attr(data-time); display: none; font-size: 9px; color: var(--text-faint); white-space: nowrap; position: absolute; top: 50%; transform: translateY(-50%); }
.chat-msg-grouped:active .chat-msg-avatar-spacer[data-time]::after { display: block; }

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

.chat-msg-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.chat-msg-user-col { display: flex; align-items: baseline; gap: 6px; }
.chat-msg-name { font-size: 15px; font-weight: 700; }
.chat-level-badge { font-size: 9px; font-weight: 700; color: var(--text-faint); background: rgba(var(--fg-rgb), 0.04); border: 1px solid rgba(var(--fg-rgb), 0.06); padding: 1px 6px; border-radius: 4px; }
.chat-msg-time { font-size: 10px; color: var(--text-dim); margin-left: 2px; white-space: nowrap; }
.chat-msg-text { font-size: 15px; color: var(--text); line-height: 1.5; word-wrap: break-word; display: block; }
.chat-mention { color: #4d9eff; font-weight: 600; }

/* Mention autocomplete popup */
.chat-mention-popup { display: none; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; z-index: 100; max-height: 200px; overflow-y: auto; }
.chat-mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.chat-mention-item:active, .chat-mention-item:hover { background: var(--bg3); }
.mention-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mention-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); }
.mention-name { font-size: 14px; font-weight: 600; color: var(--text); }

/* Chat image */
.chat-msg-image { max-width: 260px; max-height: 260px; width: auto; height: auto; border-radius: var(--radius-sm); margin-top: 6px; object-fit: contain; cursor: zoom-in; border: 1px solid rgba(var(--fg-rgb), 0.06); }

/* Tenor GIF inline */
.chat-tenor-gif { max-width: 220px; max-height: 200px; border-radius: 8px; margin-top: 4px; display: block; cursor: zoom-in; }

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

/* Lightbox */
.web-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.9); display: flex;
    align-items: center; justify-content: center;
    cursor: zoom-out; animation: lbFade 0.15s ease;
}
.web-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

/* Reply line above a message, with a curved connector from the avatar */
.chat-reply-quote { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; margin-bottom: 4px; font-size: 13px; }
.chat-reply-quote::before { content: ''; position: absolute; left: -31px; top: 11px; width: 25px; height: 14px; border-left: 2px solid var(--border-hover); border-top: 2px solid var(--border-hover); border-top-left-radius: 7px; }
.chat-msg-reply > .chat-msg-avatar { margin-top: 26px; }
.chat-reply-quote-avatar { width: 16px; height: 16px; 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-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-msg-header .ct-level-badge { align-self: center; }

/* Avatar rings by level */
.avatar-ring-5, .avatar-ring-6 { box-shadow: 0 0 0 2px rgba(124,58,237,0.5); }
.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 rgba(124,58,237,0.6), 0 0 12px rgba(124,58,237,0.25); }

/* Reactions: emoji and count clearly separated */
.chat-reactions-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chat-reaction-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 9px; background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.08); cursor: pointer; user-select: none; transition: transform 0.12s; }
.chat-reaction-pill:active { transform: scale(0.94); }
.chat-reaction-emoji { font-size: 18px; line-height: 1; }
.chat-reaction-count { font-size: 13px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.chat-reaction-pill.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.chat-reaction-pill.active .chat-reaction-count { color: var(--accent); }

/* Trade signal card: colored by direction, a big ticker and a clear price level */
.chat-signal-card { --sig: var(--accent); position: relative; overflow: hidden; width: min(100%, 420px); margin: 6px 0 2px; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sig) 28%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sig) 16%, transparent) 0%, transparent 55%), var(--bg2); box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(var(--fg-rgb), 0.03); }
.chat-signal-card.long { --sig: var(--green); }
.chat-signal-card.short { --sig: var(--red); }
.chat-signal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sig), transparent 80%); }
.chat-signal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.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: 12px; }
.chat-signal-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; 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; 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: 12px; border-left: 1px solid var(--border); }
.chat-signal-price-label { font-size: 9px; 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: 17px; font-weight: 700; }

/* One rounded composer bar: image · message · GIF · signal · send */
.chat-input-bar { flex-shrink: 0; padding: 8px 10px; background: var(--bg); border-top: 1px solid var(--border); }
.chat-composer { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.15s; }
.chat-composer:focus-within { border-color: var(--border-hover); }
.chat-composer-btn { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 10px; color: var(--text-dim); cursor: pointer; }
.chat-composer-btn:active { background: var(--bg4); color: var(--text); }
.chat-composer-send { width: 36px; height: 36px; margin-left: 2px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: var(--bg4); color: var(--text-faint); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s; }
.chat-composer.has-text .chat-composer-send { background: var(--accent); color: #fff; }
.chat-composer-send:active { transform: scale(0.94); }

/* GIF Picker (mobile) */
.web-gif-picker {
    display: flex; flex-direction: column;
    position: absolute; bottom: calc(var(--nav-total) + var(--voice-bar-h, 0px) + 62px); left: 0; right: 0;
    background: var(--bg2); border-top: 1px solid var(--border);
    max-height: 300px; z-index: 100;
}
.web-gif-header { padding: 8px; }
.web-gif-header input {
    width: 100%; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 13px; outline: none;
}
.web-gif-header input:focus { border-color: var(--accent); }
.web-gif-results {
    column-count: 2; column-gap: 4px;
    padding: 4px 6px; overflow-y: auto; flex: 1; min-height: 0;
}
.web-gif-results img {
    width: 100%; border-radius: 4px; display: block;
    cursor: pointer; margin-bottom: 4px; break-inside: avoid;
}
.web-gif-results img:active { opacity: 0.7; }
.web-gif-results img { background: var(--bg3); }
.web-gif-skeleton {
    border-radius: 4px; margin-bottom: 4px; break-inside: avoid;
    background: linear-gradient(100deg, var(--bg3) 30%, var(--bg2) 50%, var(--bg3) 70%);
    background-size: 300% 100%; animation: webGifShimmer 1.3s ease-in-out infinite;
}
@keyframes webGifShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.web-gif-state {
    column-span: all; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 16px; color: var(--text-dim); font-size: 13px; text-align: center;
}
.web-gif-retry {
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg3); color: var(--text); font-size: 12px; font-weight: 600;
}

/* Link embeds */
.chat-link-embed {
    display: flex; gap: 10px; margin-top: 6px; padding: 10px 12px;
    background: var(--bg3); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 6px; text-decoration: none; color: inherit;
}
.chat-link-embed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-link-embed-site { font-size: 10px; color: var(--text-faint); font-weight: 500; }
.chat-link-embed-title { font-size: 13px; font-weight: 600; color: var(--accent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-link-embed-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Borderless field; the highlight layer (mention colors) keeps the exact same padding and size.
   16px text so iOS doesn't zoom in when the field gets focus. */
.chat-input-wrap { flex: 1; min-width: 0; position: relative; align-self: stretch; }
.chat-input-bar input { width: 100%; height: 100%; padding: 8px 6px; background: transparent; border: 1px solid transparent; border-radius: 0; color: transparent; font-size: 16px; font-family: var(--font); line-height: normal; outline: none; caret-color: var(--text); position: relative; z-index: 1; box-shadow: none; }
.chat-input-bar input::placeholder { color: var(--text-faint); }
.chat-input-bar input:focus { background: transparent; border-color: transparent; box-shadow: none; }
.chat-input-highlight { position: absolute; inset: 0; display: flex; align-items: center; padding: 8px 6px; font-size: 16px; font-family: var(--font); line-height: normal; color: var(--text); pointer-events: none; white-space: pre; overflow: hidden; z-index: 0; border: 1px solid transparent; }
.chat-input-highlight .hl-mention { color: #4d9eff; }

.chat-msg-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Replying-to bar on top of the composer */
.chat-reply-preview { display: flex; align-items: center; gap: 10px; margin: 0 10px -1px; padding: 8px 8px 8px 12px; 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: 26px; height: 26px; 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; }

/* "Name is typing" above the composer */
.chat-typing-indicator { display: flex; align-items: center; gap: 8px; padding: 4px 14px 6px; font-size: 12px; color: var(--text-dim); }
.chat-typing-indicator b { font-weight: 600; color: var(--text); }
.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; }

/* Send Signal sheet */
.signal-sheet { display: flex; flex-direction: column; }
.signal-sheet-title { font-size: 16px; font-weight: 800; }
.signal-label { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 6px; }
.signal-dir-btns { display: flex; gap: 6px; }
.signal-dir-btn { flex: 1; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.signal-dir-btn.long.active { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: var(--green-bg); }
.signal-dir-btn.short.active { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); background: var(--red-bg); }
.signal-dir-btn.watch.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
.signal-preview { margin: 14px 0; }
.signal-preview .chat-signal-card { width: 100%; margin: 0; }

/* Bottom sheet */
.bottom-sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.15s; }
.bottom-sheet { background: var(--bg2); border-radius: 20px 20px 0 0; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); width: 100%; max-width: 500px; animation: slideUp 0.25s ease-out; }
.bottom-sheet-btn + .bottom-sheet-btn { margin-top: 6px; }
.bottom-sheet-handle { width: 36px; height: 4px; background: rgba(var(--fg-rgb), 0.15); border-radius: 2px; margin: 0 auto 16px; }
.bottom-sheet-reactions { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.bottom-sheet-emoji { font-size: 28px; padding: 8px; border-radius: 12px; cursor: pointer; transition: all 0.15s; }
.bottom-sheet-emoji:active { transform: scale(1.3); }
.bottom-sheet-emoji.active { background: color-mix(in srgb, var(--blue) 15%, transparent); border-radius: 12px; }
/* Who reacted to the message */
.bottom-sheet-reacted-title { padding: 0 4px 4px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.bottom-sheet-reacted { max-height: 34vh; overflow-y: auto; margin-bottom: 14px; padding: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; }
.bottom-sheet-reacted-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; }
.bottom-sheet-reacted-row + .bottom-sheet-reacted-row { border-top: 1px solid var(--border); }
.bottom-sheet-reacted-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bottom-sheet-reacted-avatar-letter { display: flex; align-items: center; justify-content: center; background: var(--bg5); font-size: 12px; font-weight: 700; color: var(--text-dim); }
.bottom-sheet-reacted-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-sheet-reacted-emoji { font-size: 20px; line-height: 1; }

/* @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; }
.bottom-sheet-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 15px; font-family: var(--font); cursor: pointer; }
.bottom-sheet-btn:active { background: var(--bg4); }
.bottom-sheet-btn svg { color: var(--text-dim); }
.bottom-sheet-btn-danger { color: #e55; margin-top: 4px; border-color: color-mix(in srgb, var(--red) 20%, transparent); }
.bottom-sheet-btn-danger:active { background: color-mix(in srgb, var(--red) 10%, transparent); }
.bottom-sheet-btn-danger svg { color: #e55; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ══════ COMMUNITY TRADES (2.0 cards, same as the desktop app) ══════ */
#community-trades { gap: 12px; }
.ct-day-separator { display: flex; align-items: center; gap: 12px; padding: 4px 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; }

.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; transition: border-color 0.2s; }
.ct-card:active { border-color: var(--border-hover); }
.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(var(--fg-rgb), 0.08); }
.ct-avatar-letter { background: linear-gradient(135deg, var(--accent), rgba(var(--fg-rgb), 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-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; 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: color-mix(in srgb, var(--green) 12%, transparent); }
.ct-card-dir.short { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.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: 19px; 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-title { font-size: 14px; line-height: 1.5; 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-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; }
.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: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.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: var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }

/* Reactions: the same pill as in chat */
.ct-reactions-row { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ct-reaction-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; min-width: 40px; padding: 0 9px; background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: 9px; cursor: pointer; font-family: var(--font); transition: transform 0.12s; }
.ct-reaction-btn:active { transform: scale(0.92); }
.ct-reaction-emoji { font-size: 18px; line-height: 1; }
.ct-reaction-count { font-size: 13px; color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-reaction-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ct-reaction-btn.active .ct-reaction-count { color: var(--accent); }
/* Emojis nobody has used yet stay quiet */
.ct-reaction-btn.empty { background: transparent; border-color: transparent; min-width: 32px; padding: 0 5px; }
.ct-reaction-btn.empty .ct-reaction-emoji { opacity: 0.5; filter: grayscale(0.5); }

/* Result + level badges */
.result-badge { padding: 2px 9px; border-radius: 4px; font-size: 10px; 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); }
.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; flex-shrink: 0; }
.ct-level-badge.level-5, .ct-level-badge.level-6 { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, transparent), rgba(124,58,237,0.15)); color: #a78bfa; }
.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; 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; 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), color-mix(in srgb, var(--green) 20%, transparent), color-mix(in srgb, var(--blue) 20%, transparent), rgba(124,58,237,0.2)); color: #fff; box-shadow: 0 0 10px rgba(124,58,237,0.3); }

/* Shared trade detail: one scrolling column, comment input pinned to the bottom */
.modal-icon-btn { background: none; border: none; color: var(--text-faint); padding: 8px; border-radius: 8px; display: flex; cursor: pointer; }
.modal-icon-btn:active { color: var(--red); background: var(--red-bg); }
#ct-detail-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.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 { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ct-detail-hero { padding: 16px; }
.ct-detail-hero .ct-card-instrument, .ct-detail-hero .ct-card-pnl-value { font-size: 24px; }
.ct-detail-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 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; 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-section h4 { margin-bottom: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.ct-detail-notes-text { font-size: 14px; line-height: 1.6; 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 h4 { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.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; margin-top: 6px; }
.ct-comment { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.ct-comment-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; font-size: 11px; }
.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; }
.ct-comment-time { font-size: 10px; color: var(--text-faint); }
.ct-comment-text { font-size: 14px; line-height: 1.45; display: block; overflow-wrap: anywhere; }
.ct-comment-reply-tag { color: var(--accent); font-weight: 600; }
.ct-comment-reply-btn { background: none; border: none; color: var(--text-faint); font-size: 12px; font-weight: 600; font-family: var(--font); padding: 4px 0 0; cursor: pointer; }
.ct-comment-reply-btn:active { color: var(--accent); }
.ct-comment-thread { margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--border); display: flex; flex-direction: column; }
.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: 20px 12px; }
.ct-comment-bar { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg2); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.ct-comment-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 0 2px 8px; }
.ct-comment-replying strong { color: var(--accent); }
.ct-comment-replying button { background: none; border: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ct-comment-input-row { display: flex; gap: 8px; align-items: center; }
.ct-comment-input-row input { flex: 1; min-width: 0; border-radius: 20px; padding: 10px 16px; }
.btn-send-round { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-send-round:active { transform: scale(0.94); }

/* ══════ RECAPS ══════ */
.recap-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.recap-item-date { font-size: 13px; font-weight: 700; }
.recap-item-mood { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: block; }
.recap-item-text { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.recap-today { border-color: var(--accent-border); }

/* ══════ MODAL ══════ */
.modal { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; animation: modalIn 0.25s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
.modal-header { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-back { background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.modal-title { font-size: 16px; font-weight: 800; flex: 1; letter-spacing: -0.3px; }
.modal-edit { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-xs); padding: 7px 16px; font-size: 12px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.modal-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }

/* Trade Detail */
.detail-user { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.detail-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg5); overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-dim); border: 2px solid rgba(var(--fg-rgb), 0.08); }
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-username { font-size: 15px; font-weight: 700; }
.detail-time { font-size: 11px; color: var(--text-dim); }
.detail-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; position: relative; overflow: hidden; }
.detail-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0.7; }
.detail-hero.win::before { background: linear-gradient(90deg, var(--green), transparent); }
.detail-hero.loss::before { background: linear-gradient(90deg, var(--red), transparent); }
.detail-hero.breakeven::before { background: linear-gradient(90deg, var(--blue), transparent); }
.detail-hero-top { display: flex; justify-content: space-between; align-items: flex-start; }
.detail-hero-left { display: flex; flex-direction: column; gap: 4px; }
.detail-setup-name { font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 2px; }
.detail-instrument { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.detail-badges { display: flex; gap: 6px; margin-top: 6px; }
.detail-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-badge.long { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.detail-badge.short { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.detail-badge.win { color: var(--green); background: var(--green-bg); }
.detail-badge.loss { color: var(--red); background: var(--red-bg); }
.detail-badge.breakeven { color: var(--text-dim); background: var(--bg4); }
.detail-badge.forward { color: var(--purple); background: var(--purple-bg); }
.detail-pnl { text-align: right; }
.detail-pnl-value { font-size: 24px; font-weight: 900; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.detail-pnl-pts { font-size: 11px; color: var(--text-dim); display: block; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-top: 2px; }
/* Legacy compat */
.detail-trade-row { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; position: relative; overflow: hidden; }
.detail-trade-row::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.3; }

/* Price Grid */
.detail-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.detail-price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.detail-price-card .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; display: block; font-weight: 600; }
.detail-price-card .value { font-size: 15px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; display: block; margin-top: 3px; }

/* RR Visual Bar */
.detail-rr-bar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; }
.detail-rr-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; }
.detail-rr-track { height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; display: flex; }
.detail-rr-risk { background: var(--red); opacity: 0.7; border-radius: 4px 0 0 4px; }
.detail-rr-reward { border-radius: 0 4px 4px 0; }
.detail-rr-reward.positive { background: var(--green); opacity: 0.8; }
.detail-rr-reward.negative { background: var(--red); opacity: 0.5; }
.detail-rr-value { font-size: 14px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; text-align: center; margin-top: 8px; }

.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.detail-tag { font-size: 11px; color: var(--text-dim); background: rgba(var(--fg-rgb), 0.04); border: 1px solid rgba(var(--fg-rgb), 0.08); padding: 4px 12px; border-radius: 20px; font-weight: 600; }
.detail-tag.tag-session { color: var(--blue); background: var(--blue-bg); border-color: color-mix(in srgb, var(--blue) 15%, transparent); }
.detail-tag.tag-emotion { color: var(--yellow); background: var(--yellow-bg); border-color: rgba(245,166,35,0.15); }
.detail-tag.tag-rating { color: var(--purple); background: var(--purple-bg); border-color: color-mix(in srgb, var(--purple) 15%, transparent); }
.detail-tag.tag-type { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-border); }

/* Notes Section */
.detail-notes-section { margin-bottom: 14px; }
.detail-notes-header { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.detail-notes { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--text-dim); border-left: 3px solid rgba(var(--fg-rgb), 0.06); }

/* Screenshot Gallery */
.detail-screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.detail-screenshot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid rgba(var(--fg-rgb), 0.06); transition: opacity 0.15s; }
.detail-screenshot:active { opacity: 0.8; }
.detail-screenshots-single { grid-template-columns: 1fr; }
.detail-screenshots-single .detail-screenshot { aspect-ratio: auto; max-height: 300px; object-fit: contain; }

/* Voice Notes in Detail */
.detail-voice-notes-section { margin-bottom: 14px; }
.detail-vn-header { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.detail-comments { margin-top: 10px; }
.detail-comments-title { font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.detail-comment { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.detail-comment-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg5); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--text-dim); overflow: hidden; }
.detail-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-comment-name { font-size: 12px; font-weight: 700; }
.detail-comment-time { font-size: 10px; color: var(--text-faint); margin-left: 6px; }
.detail-comment-text { font-size: 13px; margin-top: 2px; line-height: 1.4; }
.detail-comment-input { display: flex; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.detail-comment-input input { flex: 1; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; color: var(--text); font-size: 14px; font-family: var(--font); outline: none; }
.detail-comment-input input:focus { border-color: var(--accent); }

/* ══════ LIGHTBOX ══════ */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; padding: 0; animation: fadeIn 0.2s ease; overflow: hidden; touch-action: none; }
.lightbox-img-wrap { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom pan-x pan-y; -webkit-overflow-scrolling: touch; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.lightbox-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 24px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10000; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ══════ SETTINGS ══════ */
.settings-section { margin-bottom: 20px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; }
.settings-label { font-size: 14px; font-weight: 600; }
.settings-toggle { display: flex; gap: 4px; }
.settings-toggle button { padding: 7px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; }
.settings-toggle button.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }

/* ══════ TOAST ══════ */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--bg4); color: var(--text); padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transition: all 0.2s; pointer-events: none; border: 1px solid var(--border); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: color-mix(in srgb, var(--red) 90%, transparent); color: #fff; border-color: transparent; }
.toast.success { background: color-mix(in srgb, var(--green) 90%, transparent); color: #fff; border-color: transparent; }

/* ══════ PROFILE POPUP ══════ */
.profile-popup-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.15s ease; }
.profile-popup { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 0; min-width: 260px; max-width: 320px; width: calc(100% - 48px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); animation: popupSlideIn 0.2s ease; position: relative; overflow: hidden; }
@keyframes popupSlideIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.profile-popup-banner { height: 60px; background: linear-gradient(135deg, color-mix(in srgb, var(--green) 15%, transparent), color-mix(in srgb, var(--green) 5%, transparent)); background-size: cover; background-position: center; border-radius: 16px 16px 0 0; }
.profile-popup-header { display: flex; align-items: center; gap: 14px; margin: 0 20px; padding-top: 14px; margin-bottom: 16px; }
.profile-popup-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--text-dim); overflow: hidden; }
.profile-popup-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-popup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-popup-name { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-popup-level { font-size: 11px; color: var(--accent); font-weight: 700; }
.profile-popup-user-status { font-size: 11px; color: var(--text-faint); font-style: italic; }
.profile-popup-online { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 2px; }
.profile-popup-online-dot { width: 8px; height: 8px; border-radius: 50%; }
.profile-popup-online-dot.online { background: var(--green); }
.profile-popup-online-dot.offline { background: var(--text-faint); opacity: 0.5; }
.profile-popup-online-text.online { color: var(--green); }
.profile-popup-online-text.offline { color: var(--text-faint); }
.profile-popup-divider { height: 1px; background: var(--border); margin: 12px 20px; }
.profile-popup-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 20px; }
.profile-popup-stat { display: flex; flex-direction: column; align-items: center; padding: 8px; background: rgba(var(--fg-rgb), 0.03); border-radius: 10px; border: 1px solid rgba(var(--fg-rgb), 0.04); }
.profile-popup-stat-val { font-size: 16px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.profile-popup-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.profile-popup-socials { display: flex; flex-direction: column; gap: 8px; margin: 0 20px; padding-bottom: 20px; }
.profile-popup-social { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); text-decoration: none; cursor: pointer; border-radius: 6px; padding: 6px 10px; transition: background 0.15s; }
.profile-popup-social:active { background: var(--bg3); }
.profile-popup-social svg { flex-shrink: 0; color: var(--text-faint); }
.profile-popup > :last-child { padding-bottom: 20px; }

/* ══════ SCROLLBAR ══════ */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.08); border-radius: 3px; }
.main:has(#page-chat.active) { overflow: hidden; padding: 0; }

/* Phones: 16px text in fields, otherwise iOS zooms in on focus and the layout jumps */
@media (hover: none) and (pointer: coarse) {
    input, textarea, select { font-size: 16px !important; }
}

/* ══════ ADMIN/MENTOR HEADER BUTTONS ══════ */
.header-admin, .header-mentor { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 6px; border-radius: 8px; }
.header-admin:active, .header-mentor:active { color: var(--text); }

/* ══════ PANEL OVERLAY ══════ */
.panel-overlay { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; flex-direction: column; animation: modalIn 0.25s ease; }
.panel-container { display: flex; flex-direction: column; height: 100%; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.panel-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.panel-close { background: none; border: none; color: var(--text-faint); font-size: 24px; cursor: pointer; padding: 6px; border-radius: 8px; line-height: 1; }
.panel-close:active { color: var(--text); }
.panel-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.panel-section { margin-bottom: 20px; }
.panel-section-title { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 10px; }

/* Panel Action Buttons */
.panel-actions { display: flex; flex-direction: column; gap: 8px; }
.panel-action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.15s; }
.panel-action-btn:active { background: var(--bg4); transform: scale(0.98); }
.panel-action-btn svg { color: var(--text-dim); flex-shrink: 0; }
.panel-action-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 20%, transparent); }
.panel-action-danger:active { background: var(--red-bg); }

/* Admin Maintenance */
.admin-maint-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-maint-label { font-size: 13px; font-weight: 600; color: var(--text-dim); }

/* Admin/Mentor Users List */
.admin-users-list { display: flex; flex-direction: column; gap: 4px; }
.admin-user-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.15s; min-height: 54px; }
.admin-user-item:active { background: var(--bg3); }
.admin-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-dim); overflow: hidden; flex-shrink: 0; }
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.admin-user-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.admin-user-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-email { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-status { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.admin-user-status.online { color: var(--green); background: var(--green-bg); }
.admin-user-status.offline { color: var(--text-faint); background: rgba(var(--fg-rgb), 0.04); }
/* Whitelist */
.admin-wl-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 4px; }
.admin-wl-info { flex: 1; min-width: 0; }
.admin-wl-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.admin-wl-email { display: block; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-wl-edit { background: none; border: none; font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 8px; line-height: 1; }
.admin-wl-edit:active { background: rgba(var(--fg-rgb), 0.06); }
.admin-wl-remove { background: none; border: none; color: var(--red); font-size: 18px; font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1; }
.admin-wl-remove:active { background: var(--red-bg); }

/* Mentor Toggle Button */
/* Admin user list: plans */
.admin-users-total { color: var(--text-faint); font-weight: 500; }
.admin-users-search { width: 100%; margin: 4px 0 8px; }
.admin-plan-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.admin-plan-filters::-webkit-scrollbar { display: none; }
.admin-plan-chip { flex-shrink: 0; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.admin-plan-chip.active { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-bg); }
.admin-plan-count { margin-left: 5px; opacity: 0.7; }
.admin-plan-count:empty { display: none; }
.admin-user-plan-row { align-items: center; }
.admin-user-plan-row .admin-user-name { display: flex; align-items: center; gap: 6px; }
.admin-plan-tag { flex-shrink: 0; padding: 2px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); background: rgba(var(--fg-rgb), 0.06); }
.admin-plan-tag.plan-monthly { color: var(--green); background: var(--green-bg); }
.admin-plan-tag.plan-lifetime { color: #f5c451; background: rgba(245, 196, 81, 0.12); }
.admin-plan-tag.plan-trial { color: #6cb6ff; background: rgba(108, 182, 255, 0.12); }
.admin-plan-tag.plan-expired { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.admin-user-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.admin-lifetime-btn { font: inherit; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, #f5c451 40%, transparent); background: rgba(245, 196, 81, 0.08); color: #f5c451; cursor: pointer; }
.admin-lifetime-btn.danger { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--red); }
.admin-lifetime-btn:disabled { opacity: 0.5; }
.mentor-toggle-btn { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.03); color: var(--text-faint); cursor: pointer; flex-shrink: 0; font-family: var(--font); transition: all 0.15s; }
.mentor-toggle-btn.active { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.3); }
.mentor-toggle-btn:active { transform: scale(0.95); }

/* Panel Back Button */
.panel-back-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; padding: 8px 0; margin-bottom: 12px; }
.panel-back-btn:active { opacity: 0.7; }
.panel-back-btn-inline { background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; border-radius: 8px; display: flex; align-items: center; }

/* Mentor User Header */
.mentor-user-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; }
.mentor-user-header-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mentor-user-header-name { font-size: 16px; font-weight: 800; }
.mentor-user-header-email { font-size: 11px; color: var(--text-faint); }
.mentor-user-header-stats { display: flex; gap: 12px; width: 100%; margin-top: 8px; }
.mentor-user-header-stat { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 8px; background: rgba(var(--fg-rgb), 0.03); border-radius: 8px; border: 1px solid rgba(var(--fg-rgb), 0.04); }
.mentor-user-header-stat-value { font-size: 16px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.mentor-user-header-stat-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* Mentor Filters */
.mentor-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.mentor-filters select { padding: 8px 10px; font-size: 12px; }

/* Mentor Trades Summary */
.mentor-trades-summary { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mentor-trades-summary-stat { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-width: 70px; }
.mentor-trades-summary-value { font-size: 14px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.mentor-trades-summary-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* Mentor Unreviewed Count */
.mentor-unreviewed-count { font-size: 10px; font-weight: 700; color: var(--yellow); background: var(--yellow-bg); padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
.mentor-all-reviewed { font-size: 10px; font-weight: 600; color: var(--text-faint); padding: 3px 10px; flex-shrink: 0; }

/* Mentor Trade Detail */
.mentor-detail-hero { padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; text-align: center; }
.mentor-detail-pnl { font-size: 28px; font-weight: 900; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.mentor-detail-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.mentor-detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mentor-detail-info-item { padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.mentor-detail-info-item .label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.mentor-detail-info-item .value { font-size: 14px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }

/* Mentor Rating Section */
.mentor-rating-section { padding: 16px; background: rgba(var(--fg-rgb), 0.02); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 12px; }
.mentor-rating-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.mentor-rate-btns { display: flex; gap: 6px; }
.mentor-rate-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.03); color: var(--text-faint); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: var(--font); flex: 1; text-align: center; min-height: 44px; }
.mentor-rate-btn:active { transform: scale(0.95); }
.mentor-rate-btn.active { background: #a78bfa; color: #fff; border-color: #a78bfa; }

/* Mentor Comments */
.mentor-comments-section { padding: 16px; background: rgba(var(--fg-rgb), 0.02); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 12px; }
.mentor-comments-header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.mentor-comments-list { max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.mentor-comment-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.04); }
.mentor-comment-item:last-child { border-bottom: none; }
.mentor-comment-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.mentor-comment-avatar-letter { background: var(--bg4); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.mentor-comment-body { flex: 1; min-width: 0; }
.mentor-comment-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mentor-comment-name { font-size: 12px; font-weight: 700; }
.mentor-comment-time { font-size: 10px; color: var(--text-faint); }
.mentor-comment-delete { background: none; border: none; color: var(--text-faint); font-size: 14px; cursor: pointer; padding: 0 4px; margin-left: auto; }
.mentor-comment-text { font-size: 13px; line-height: 1.4; }
.mentor-comment-reply-quote { padding: 4px 10px; margin-bottom: 4px; background: rgba(167,139,250,0.06); border-left: 2px solid #a78bfa; border-radius: 4px; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mentor-comment-reply-name { color: #a78bfa; font-weight: 600; margin-right: 4px; }
.mentor-reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; margin-bottom: 6px; background: rgba(167,139,250,0.08); border-left: 3px solid #a78bfa; border-radius: 6px; font-size: 12px; color: var(--text-faint); }
.mentor-reply-preview-content { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.mentor-reply-preview-name { color: #a78bfa; 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; }
.mentor-comment-input-row { display: flex; gap: 8px; }
.mentor-comment-input-row input { flex: 1; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; color: var(--text); font-size: 13px; font-family: var(--font); outline: none; }
.mentor-comment-input-row input:focus { border-color: var(--accent); }
.mentor-comment-send-btn { background: var(--accent); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; flex-shrink: 0; }
.mentor-comment-send-btn:active { opacity: 0.8; }

/* Mentor Reviewed Badge */
.mentor-reviewed-badge { font-size: 9px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 2px 8px; border-radius: 4px; }
.mentor-review-btn { background: none; border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-faint); flex-shrink: 0; }
.mentor-review-btn.reviewed { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }
.mentor-review-btn:active { transform: scale(0.9); }

/* ══════ 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); }
.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: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.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;
}
.vn-preview-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.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;
    flex-shrink: 0;
}
.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;
}
.vn-remove-btn:hover { color: var(--red); }
.detail-voice-notes {
    margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
}
.detail-vn-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: var(--text-faint); margin-bottom: 2px;
}
.ti-dir { font-size: 10px; font-weight: 700; opacity: 0.6; }
.ti-dir.long { color: var(--green); }
.ti-dir.short { color: var(--red); }
.ti-fwd {
    font-size: 9px; font-weight: 700; color: #a78bfa;
    background: rgba(167,139,250,0.12); padding: 1px 5px; border-radius: 3px;
}

/* ══════ TRADES (2.0) ══════ */
.seg-control { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.seg-control button { flex: 1; padding: 9px 10px; background: none; border: none; border-radius: 9px; color: var(--text-dim); font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.seg-control button.active { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* Summary: 2×2 tiles */
.trades-summary { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.trades-summary-stat { min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.trades-summary-stat:nth-child(odd) { border-right: 1px solid var(--border); }
.trades-summary-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.trades-summary-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.trades-summary-value { font-size: 18px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trades-summary-main .trades-summary-value { font-size: 20px; }
.trades-summary-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trades-summary-sub b { font-weight: 700; }
.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); }

.trades-toolbar { display: flex; gap: 6px; margin-bottom: 12px; }
.trades-toolbar select { flex: 1; min-width: 0; padding: 9px 28px 9px 11px; font-size: 13px; background-position: right 10px center; }

/* Day group header */
.trade-day-header { display: flex; align-items: baseline; gap: 10px; padding: 12px 4px 2px; }
.trade-day-header:first-child { padding-top: 0; }
.trade-day-label { font-size: 13px; font-weight: 800; }
.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 row: result bar, direction tile, instrument + badges and P&L; date, session and points below */
.trade-row { border-radius: 14px; }
.trade-row .ti-accent { width: 3px; background: var(--bg4); border-radius: 0; }
.trade-row.win-row .ti-accent { background: var(--green); }
.trade-row.loss-row .ti-accent { background: var(--red); }
.trade-row.be-row .ti-accent { background: var(--blue); }
.ti-dir-icon { width: 36px; height: 36px; flex-shrink: 0; align-self: center; margin-left: 10px; 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); }
.trade-row .ti-body { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 11px 12px; }
.ti-row-top, .ti-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ti-info { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ti-instrument { font-weight: 800; font-size: 16px; 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-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-rating { font-size: 10px; font-weight: 800; color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 25%, transparent); padding: 1px 6px; border-radius: 4px; font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.trade-row .ti-pnl { font-size: 16px; flex-shrink: 0; }
.ti-details { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.ti-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; opacity: 0.7; }
.ti-date { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.ti-time { color: var(--text-faint); margin-left: 5px; }
.ti-session { font-size: 11px; color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.trade-row .ti-setup { font-size: 10px; font-weight: 600; color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.ti-metrics { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ti-points, .trade-row .ti-rr { font-size: 11px; font-weight: 600; font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-faint); }
.ti-points.positive, .trade-row .ti-rr.positive { color: color-mix(in srgb, var(--green) 70%, transparent); }
.ti-points.negative, .trade-row .ti-rr.negative { color: color-mix(in srgb, var(--red) 70%, transparent); }

/* Trade popup: title row, P&L hero card, all details in one grid */
.td-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.td-title-row .ti-dir-icon { margin-left: 0; }
.td-instrument { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.td-dir-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; }
.td-dir-badge.long { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.td-dir-badge.short { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.td-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 18px; margin-bottom: 12px; background: var(--card); 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-pnl-big { font-size: 34px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.1; }
.td-pnl-sub { font-size: 13px; color: var(--text-dim); font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.td-hero-when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.td-date { font-size: 13px; font-weight: 700; }
.td-time { font-size: 12px; color: var(--text-faint); }
.td-stats { margin-bottom: 12px; }
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.td-tag { font-size: 12px; color: var(--text-dim); background: var(--bg4); padding: 4px 10px; border-radius: 6px; font-weight: 600; }

/* ══════ LOG TRADE (2.0) ══════ */
/* Numbered step cards */
.tf-card { padding: 16px 16px 6px; transition: border-color 0.2s; }
.tf-card::before { display: none; }
.tf-card:focus-within { border-color: var(--accent-border); }
.tf-card-header { gap: 12px; padding: 0; margin-bottom: 4px; border: none; font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--text); }
.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; }
.tf-card-desc { font-size: 12px; font-weight: 500; color: var(--text-faint); }
/* Softer labels in the trade form */
#page-log .form-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
#page-log .form-group { margin-top: 12px; margin-bottom: 10px; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form-row-3 input, .form-row-3 select { padding-left: 11px; padding-right: 11px; }
.form-row-3 select { padding-right: 28px; background-position: right 9px center; }
.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); }

/* Instrument + Mini / Micro */
.inst-row { display: flex; gap: 6px; }
.inst-row select { flex: 1; min-width: 0; }
.csize-group { flex: 0 0 auto; flex-wrap: nowrap; }
.csize-group button { flex: 0 0 auto; padding: 10px 12px; }
/* Type: forward test in purple */
#log-type button.active[data-val="forward"] { background: var(--purple-bg); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, transparent); box-shadow: none; }
/* Big Long / Short */
#log-direction button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: 16px; font-weight: 700; }
/* Calculated P&L and R:R */
.auto-calc { padding: 11px 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rating D–A+ in yellow */
.rating-btns { flex-wrap: nowrap; }
.rating-btns button { height: 44px; padding: 0; font-size: 15px; font-weight: 700; }
.rating-btns button.active { background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 30%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--yellow) 10%, transparent); }
/* Emotion pills with emoji */
.emotion-btns button { flex: 0 0 auto; padding: 8px 14px; border-radius: 20px; font-size: 13px; }

/* Live preview + Save, pinned just above the bottom nav */
/* .main already leaves room for the bottom nav in its padding, which sticky positioning counts from */
.tf-savebar { position: sticky; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 10px 10px 14px; background: color-mix(in srgb, var(--bg2) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); overflow: hidden; }
.tf-savebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.tf-savebar-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tf-sum-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tf-sum-inst { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.tf-sum-meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-sum-pnl { font-size: 16px; font-weight: 800; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-dim); white-space: nowrap; }
.tf-save-btn { width: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; font-size: 14px; }
.tf-save-btn:disabled { opacity: 0.6; }
.ct-card-dir.none { color: var(--text-faint); background: rgba(var(--fg-rgb), 0.05); }

/* ══════ RECAPS (2.0) ══════ */
.btn-secondary { width: 100%; padding: 13px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.btn-secondary:active { background: var(--bg4); }
.recap-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.recap-toolbar .btn-primary { flex: 1; width: auto; padding: 12px; font-size: 14px; }
/* Tapping "Past Day" opens the phone's date picker (the input covers the button) */
.recap-past-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; overflow: hidden; }
.recap-past-btn input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; opacity: 0; cursor: pointer; }

/* Editor with the day's stats */
.recap-editor { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; margin-bottom: 14px; 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; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.recap-editor-header h3 { font-size: 18px; font-weight: 800; }
.recap-editor-date { font-size: 12px; color: var(--text-dim); }
.recap-auto-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.recap-auto-stat { background: var(--bg3); padding: 9px 4px; text-align: center; min-width: 0; }
.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: 13px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-auto-empty { grid-column: 1 / -1; background: var(--bg3); padding: 10px; color: var(--text-faint); font-size: 12px; text-align: center; }
#page-recaps .form-group label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.mood-btns button { flex: 1 1 30%; padding: 10px 6px; font-size: 13px; }
.rules-btns button { font-size: 13px; }
.mood-btns button.active[data-val="great"], .mood-btns button.active[data-val="good"], .rules-btns button.active[data-val="yes"] { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); box-shadow: none; }
.mood-btns button.active[data-val="neutral"] { background: var(--blue-bg); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 30%, transparent); box-shadow: none; }
.mood-btns button.active[data-val="bad"], .mood-btns button.active[data-val="terrible"], .rules-btns button.active[data-val="no"] { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); box-shadow: none; }
.rules-btns button.active[data-val="mostly"] { background: color-mix(in srgb, var(--yellow) 10%, transparent); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 30%, transparent); box-shadow: none; }
.recap-editor-actions { display: flex; gap: 8px; margin-top: 16px; }
.recap-editor-actions .btn-primary { flex: 2; width: auto; }
.recap-editor-actions .btn-secondary { flex: 1; width: auto; }

/* Recap cards: date tile tinted with the mood color (--mood-color is set per card) */
.recaps-list { display: flex; flex-direction: column; gap: 10px; }
.recap-card { display: flex; gap: 14px; min-width: 0; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.recap-card-datecol { width: 56px; flex-shrink: 0; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 10px; 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: 22px; font-weight: 800; 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; gap: 10px; }
.recap-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.recap-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.recap-mood-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; text-transform: capitalize; }
.recap-rules-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.recap-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.recap-stat { font-size: 11px; color: var(--text-faint); background: rgba(var(--fg-rgb), 0.04); border: 1px solid var(--border); padding: 3px 8px; 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.positive { color: var(--green); }
.recap-stat b.negative { color: var(--red); }
.recap-stat b.neutral { color: var(--text-dim); }
.recap-card-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.recap-card-lessons { font-size: 13px; color: var(--text-dim); line-height: 1.55; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--accent-border); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.recap-card-lessons strong { display: block; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.recap-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.recap-icon-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; }
.recap-icon-btn:active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
.recap-icon-btn.danger:active { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); background: var(--red-bg); }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-faint); font-size: 13px; }
.empty-state svg { opacity: 0.5; margin-bottom: 12px; }

/* ══════ DASHBOARD (2.0) ══════ */
.dash-greeting { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.dash-greeting-text { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.dash-greeting-quote { display: inline-flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; margin: 0; padding: 8px 12px; background: linear-gradient(135deg, rgba(var(--fg-rgb), 0.02), var(--bg2)); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 8px; font-size: 12.5px; font-style: italic; color: var(--text-dim); line-height: 1.45; }
.dash-greeting-quote::before { content: '💡'; font-style: normal; font-size: 13px; line-height: 1.3; flex-shrink: 0; }
.dash-greeting-quote:empty { display: none; }

/* Hero: Total full width with a P&L line, Today and This Week side by side */
.dash-hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "total total" "today week"; gap: 10px; overflow: visible; margin-bottom: 12px; padding: 0; }
.dash-hero-card { min-width: 0; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-hero-card::before { height: 3px; opacity: 1; }
.dash-hero-card::after { opacity: 0.35; }
.dash-hero-today { grid-area: today; }
.dash-hero-week { grid-area: week; }
.dash-hero-total { grid-area: total; align-items: center; text-align: center; }
.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-label, .dash-hero-value, .dash-hero-sub, #dash-total-spark { position: relative; z-index: 1; }
.dash-hero-value { font-size: 21px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-hero-total .dash-hero-value { font-size: 32px; }
#dash-total-spark { width: 100%; }
#dash-total-spark:empty { display: none; }
.dash-sparkline { display: block; width: 100%; height: 40px; margin-top: 6px; }

/* Quick stats: 3 × 2 */
.dash-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dash-stat { min-width: 0; padding: 14px 6px; background: transparent; border: none; border-radius: 0; }
.dash-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
.dash-stat:not(:nth-child(3n)) { border-right: 1px solid var(--border); }
.dash-stat-value { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-section-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 4px 2px 10px; }
.dash-empty { padding: 28px 12px; background: var(--card); border: 1px dashed var(--border); border-radius: 14px; }

/* ══════ SETTINGS (2.0: compact rows in cards) ══════ */
.settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 4px 16px; margin-bottom: 12px; }
.settings-card-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding: 12px 0 2px; }
.settings-card .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 0; background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; }
.settings-card .settings-card-title + .settings-row { border-top: none; }
.settings-card .settings-row-stack { flex-direction: column; align-items: flex-start; }
.settings-row-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row-label strong { font-size: 14px; font-weight: 700; }
.settings-row-label span { font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }
.settings-card .settings-toggle { flex-shrink: 0; gap: 2px; padding: 3px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; }
.settings-card .settings-toggle button { padding: 7px 11px; background: none; border: none; border-radius: 7px; white-space: nowrap; }
.settings-card .settings-toggle button.active { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }
.accent-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; }
.accent-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 12px var(--accent); }
.settings-subscribe { flex-shrink: 0; min-height: 38px; padding: 8px 14px; background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.settings-signout { flex-shrink: 0; padding: 8px 14px; background: var(--red-bg); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: 9px; font-size: 13px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.settings-version { margin: 8px 0 4px; text-align: center; font-size: 11px; color: var(--text-faint); }

/* ══════ BACKGROUND (Topographic since 2.2, 6% — see the 2.2 section) ══════ */
body::before { content: ''; position: fixed; inset: 0; background: url('bg-default.jpg') center / cover no-repeat; opacity: 0.05; pointer-events: none; z-index: 0; }
body.no-bg::before { display: none; }
#app-screen { position: relative; z-index: 1; }

/* ══════ NOTIFICATIONS (2.0.1: a count on the bell, an icon per type, "5m ago", dismiss single ones) ══════ */
.header-bell { position: relative; display: flex; padding: 6px; background: none; border: none; border-radius: 8px; color: var(--text-faint); cursor: pointer; }
.header-bell:active { color: var(--text); }
.header-bell.has-notif { color: var(--accent); }
.header-bell.has-notif svg { 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); } }
.notif-bell-count { position: absolute; top: 1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #ff4d4d; box-shadow: 0 0 8px rgba(255,77,77,0.45); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.notif-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,0.35); }
.notif-panel { position: fixed; top: calc(var(--header-h) + 6px); left: 10px; right: 10px; z-index: 160; max-width: 460px; margin-left: auto; background: var(--bg2); border: 1px solid var(--border-hover); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); overflow: hidden; animation: popupSlideIn 0.18s ease; }
.notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 10px 8px 16px; }
.notif-panel-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.notif-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; 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 { padding: 6px 10px; background: none; border: none; border-radius: 8px; color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; }
.notif-clear-btn:active { color: var(--text); background: var(--bg4); }
.notif-panel-list { max-height: min(60vh, 440px); overflow-y: auto; padding: 0 8px 8px; }
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; }
.notif-item:active { background: var(--bg3); }
/* --notif-color is set per type */
.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; line-height: 1.4; word-break: break-word; }
.notif-time { font-size: 11px; color: var(--text-faint); }
.notif-dismiss { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; border-radius: 8px; color: var(--text-faint); cursor: pointer; }
.notif-dismiss:active { color: var(--text); background: var(--bg5); }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 24px 26px; text-align: center; }
.notif-empty-icon { width: 44px; height: 44px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--bg3); color: var(--text-dim); }
.notif-empty strong { font-size: 14px; font-weight: 600; }
.notif-empty-hint { font-size: 12px; line-height: 1.45; color: var(--text-faint); max-width: 260px; }

/* ══════ UNREAD MARKERS ══════ */
/* Bottom nav: a ring with the number of replies/@mentions, or a dot for other unread activity */
.nav-notif { position: absolute; top: 4px; left: calc(50% + 4px); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); box-shadow: inset 0 0 0 1.5px var(--accent-border); color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nav-notif.nav-notif-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 7px; left: calc(50% + 8px); border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
/* "New messages" divider above the first unread chat 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; }

/* ══════ HELPERS ══════ */
[hidden] { display: none !important; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.neutral { color: var(--text-dim); }
::selection { background: var(--accent-bg); color: var(--accent); }

/* ============================================
   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: var(--subtle-bg);
    flex-shrink: 0;
}
.community-switcher { position: relative; }
.community-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.community-current:hover { background: var(--hover-overlay); border-color: var(--border); }
.community-current svg { color: var(--text-dim); }
.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;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.community-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.community-dd-item:hover { background: var(--hover-overlay-strong); }
.community-dd-item.active { background: var(--accent-bg); }
.community-dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.community-dd-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--bg5);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 700;
}
.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 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}
.community-row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.community-member-row:hover .community-row-actions { opacity: 1; }
.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 { flex-shrink: 0; font-size: 11px; line-height: 1; }
.chat-member-role.owner { color: var(--yellow); }
.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%, 420px);
    margin: 6px 0 2px;
    padding: 12px 14px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--td) 28%, var(--border));
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--td) 14%, transparent) 0%, transparent 55%),
        var(--bg2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(var(--fg-rgb), 0.03);
    transition: border-color 0.15s, transform 0.15s;
}
.chat-trade-card.win { --td: var(--green); }
.chat-trade-card.loss { --td: var(--red); }
.chat-trade-card.be { --td: var(--text-dim); }
.chat-trade-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--td), transparent 80%);
}
.chat-trade-wrap:hover .chat-trade-card {
    border-color: color-mix(in srgb, var(--td) 55%, var(--border));
    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(--td);
    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 */
.shared-trade-layout { grid-template-columns: 1fr !important; display: block !important; }
.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); }

/* Bottom sheets on the phone */
.community-settings-sheet, .chat-share-sheet { max-height: 86vh; overflow-y: auto; }
.chat-share-sheet .ct-share-list { max-height: 34vh; overflow-y: auto; margin: 10px 0; }
.community-dd-item.danger .community-dd-name { color: var(--red); }
.community-empty { min-height: 60vh; }

/* 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; }

/* ============================================
   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: rgba(167, 139, 250, 0.25);
    background: rgba(167, 139, 250, 0.05);
}
.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: rgba(167, 139, 250, 0.12); 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; }

/* 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); }
.chat-member-role.mod { color: var(--blue); }
.chat-member-role.mentor { 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; }

/* Owner, mod and mentor marks: a crown, a shield and a cap */
.chat-member-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    opacity: 0.95;
}
.chat-member-role + .chat-member-role { margin-left: 3px; }
.chat-member-role svg { display: block; }
.chat-member-role.owner { color: var(--yellow); }
.chat-member-role.mod { color: var(--blue); }
.chat-member-role.mentor { color: var(--purple); }

/* Keep the marks on the row's centre line regardless of how tall the name block is */
.chat-member-role { align-self: center; }

/* 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; }

/* ============================================
   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); }

/* ============================================
   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); }

/* ============================================
   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); }

/* ============================================
   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 setup card had the dark theme baked in as raw rgb on desktop; keep the web one
   on the variables from the start. */
.profile-setup-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(16px);
}
.profile-setup-card {
    width: min(94vw, 380px);
    padding: 36px 30px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg2);
    text-align: center;
}
.setup-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.setup-sub { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* ============================================
   2.2 "THE BIG REFRESH" — phone layout
   Same look as the desktop app and /app/: calm cards (12–16px radius, hairline borders, no glows),
   quiet section labels, big key numbers, compact lists with tabular numbers. Colours come only from
   the theme tokens at the top, so Standard / Dark / Light / Legacy all work. Placed before the
   wide-screen block below so that layout still wins on a PC.
   ============================================ */

/* Numbers everywhere: the text font with equal-width digits */
.dash-hero-value, .dash-stat-value, .ti-pnl, .ti-points, .ti-rr, .trade-day-pnl, .trades-summary-value,
.td-pnl-big, .td-pnl-sub, .recap-card-day, .recap-stat b, .tf-sum-pnl, .auto-calc, .chat-msg-time,
.ct-card-pnl, .user-popup-stat-val, .chat-members-count { font-family: var(--num-font); font-variant-numeric: tabular-nums; }

/* Page chrome: a plain title in the header, the nav on the same surface as the cards */
.header { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-top: env(safe-area-inset-top, 0px); height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.header-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.header-settings, .header-bell, .header-admin, .header-mentor { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }
.bottom-nav { background: color-mix(in srgb, var(--bg2) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-btn { font-size: 10px; min-height: 44px; }
.nav-btn.active::after { display: none; }
/* Phone tab bar: the active tab gets a soft pill behind its icon (the wide-screen sidebar keeps its own) */
@media (max-width: 1023px) {
    .nav-btn svg { width: 46px; height: 26px; padding: 3px 12px; box-sizing: border-box; border-radius: 999px; }
    .nav-btn.active svg { background: var(--accent-bg); }
}
[data-theme="light"] .header { background: color-mix(in srgb, var(--chrome) 92%, transparent); }
[data-theme="light"] .bottom-nav { background: color-mix(in srgb, var(--chrome) 94%, transparent); }

/* Background: Topographic at 6%, as on the desktop */
body::before { opacity: 0.06; }
[data-theme="light"] body::before { filter: invert(1) hue-rotate(180deg) grayscale(0.4); mix-blend-mode: multiply; }
[data-theme="dark"] body::before { filter: grayscale(1); }

/* Cards: one recipe everywhere */
.dash-hero-card, .dash-stats-grid, .trades-summary, .trade-item, .tf-card, .recap-editor, .settings-card,
.td-hero, .detail-notes, .ct-card, .seg-control, .dash-empty { border-radius: 14px; border: 1px solid var(--border); background: var(--card); box-shadow: none; }
[data-theme="light"] :is(.dash-hero-card, .dash-stats-grid, .trades-summary, .trade-item, .tf-card, .recap-editor, .recap-card-main,
    .settings-card, .td-hero, .ct-card, .chat-composer, .seg-control, .tf-savebar) { box-shadow: var(--shadow-sm); }
[data-theme="light"] :is(.notif-panel, .user-popup, .bottom-sheet, .toast) { box-shadow: var(--shadow-lg); }
/* No coloured top bars and no glows on cards */
.dash-hero-card::before, .dash-hero-card::after, .td-hero::before, .recap-editor::before, .tf-savebar::before, .auth-card::before { display: none; }
.glow-positive, .glow-negative { box-shadow: none !important; border-color: var(--border) !important; }
.btn-group button.active, .dir-group button.active.btn-long, .dir-group button.active.btn-short, .rating-btns button.active { box-shadow: none; }
.tf-savebar { box-shadow: var(--shadow-md); }
input, textarea, select { border-radius: 10px; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--accent-bg); }
.btn-primary { color: var(--on-accent); border-radius: 12px; box-shadow: none; }
.btn-secondary { border-radius: 12px; }

/* Quiet section labels */
.dash-hero-label, .trades-summary-label, .td-label, .dash-stat-label, .settings-card-title, .recap-auto-stat-label,
.ct-detail-stat-label, .ct-detail-section h4, .detail-notes-header, .detail-vn-header, .detail-price-card .label, .detail-rr-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--text-dim);
}
.dash-section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: 0; margin: 18px 2px 8px; }
.settings-card-title { font-size: 12px; font-weight: 700; color: var(--text-faint); padding-top: 14px; }

/* Dashboard: the total is the hero, the rest steps down */
.dash-greeting { gap: 8px; margin: 4px 2px 16px; }
.dash-greeting-text { font-size: 22px; letter-spacing: -0.03em; }
.dash-greeting-quote { background: none; border: none; padding: 0; font-size: 12.5px; color: var(--text-faint); }
.dash-greeting-quote::before { display: none; }
.dash-hero { gap: 10px; }
.dash-hero-card { padding: 16px; gap: 2px; }
.dash-hero-total { align-items: flex-start; text-align: left; padding: 18px 18px 14px; }
.dash-hero-total .dash-hero-value { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; margin-top: 4px; }
.dash-hero-value { font-size: 22px; font-weight: 750; letter-spacing: -0.025em; }
.dash-hero-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.dash-sparkline { height: 46px; margin-top: 10px; }
.dash-stats-grid { border-radius: 14px; }
.dash-stat { padding: 13px 10px; text-align: left; display: flex; flex-direction: column-reverse; gap: 3px; }
.dash-stat-label { margin-top: 0; font-size: 11px; }
.dash-stat-value { font-size: 17px; font-weight: 700; }

/* Trades: compact rows, tabular numbers, a quiet result edge */
.seg-control { padding: 3px; border-radius: 12px; }
.seg-control button { min-height: 38px; border-radius: 9px; font-weight: 600; }
.seg-control button.active { background: var(--bg4); color: var(--text); box-shadow: none; }
.trades-toolbar select { min-height: 40px; }
.trade-list { gap: 6px; }
.trade-row { border-radius: 12px; min-height: 60px; }
.trade-row .ti-accent { width: 3px; }
.ti-dir-icon { width: 34px; height: 34px; border-radius: 10px; }
.trade-row .ti-body { padding: 10px 12px; gap: 4px; }
.ti-instrument { font-size: 15px; font-weight: 700; }
.trade-row .ti-pnl { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.result-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; }
.ti-rating { font-family: var(--num-font); border-radius: 999px; }
.trade-row .ti-setup { color: var(--text-dim); background: var(--hover-overlay); border-radius: 999px; }
.ti-points.positive, .trade-row .ti-rr.positive { color: color-mix(in srgb, var(--green) 80%, var(--text-dim)); }
.ti-points.negative, .trade-row .ti-rr.negative { color: color-mix(in srgb, var(--red) 80%, var(--text-dim)); }
.trade-day-header { padding: 14px 4px 4px; }
.trade-day-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.trade-day-count { font-size: 12px; }
.trade-day-pnl { font-size: 13px; font-weight: 700; }
.trades-summary-value { font-size: 18px; font-weight: 750; }
.trades-summary-main .trades-summary-value { font-size: 22px; }

/* Trade detail */
.td-instrument { font-size: 22px; letter-spacing: -0.02em; }
.td-hero { padding: 18px; }
.td-pnl-big { font-size: 36px; letter-spacing: -0.035em; }
.modal-header { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.modal-edit { color: var(--on-accent); border-radius: 999px; padding: 8px 16px; min-height: 36px; }
.modal-back { min-width: 44px; min-height: 44px; }

/* Log trade */
.tf-step { border-radius: 999px; width: 26px; height: 26px; font-size: 12px; }
.tf-card { padding: 16px 16px 8px; }
#log-direction button { border-radius: 12px; }

/* Recaps: a timeline — the date sits on a line, the recap is the card beside it */
.recaps-list { position: relative; gap: 12px; }
.recaps-list::before { content: ''; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--border); }
.recap-card { position: relative; padding: 0; gap: 12px; background: none; border: none; border-radius: 0; }
.recap-card-datecol { position: relative; z-index: 1; width: 56px; padding: 8px 0 9px; background: var(--bg2); border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 12px; }
.recap-card-datecol::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--mood-color, var(--text-faint)); box-shadow: 0 0 0 3px var(--bg); }
.recap-card-month { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); }
.recap-card-day { font-size: 21px; font-weight: 800; }
.recap-card-weekday { font-size: 10px; letter-spacing: 0.02em; }
.recap-card-main { padding: 12px 14px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; gap: 9px; }
.recap-mood-badge, .recap-rules-badge { border-radius: 999px; padding: 3px 9px; }
.recap-stat { border-radius: 999px; background: var(--hover-overlay); border-color: transparent; }
.recap-icon-btn { width: 36px; height: 36px; border-radius: 10px; }
.recap-card-lessons { background: var(--subtle-bg); border-color: var(--border); }
.recap-card-lessons strong { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* Chat: day dividers, calmer names and times */
.chat-day-sep { display: flex; align-items: center; gap: 12px; margin: 20px 12px 6px; color: var(--text-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.chat-day-sep:first-child { margin-top: 6px; }
.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) 85%, transparent); border: 1px solid var(--border); }
.chat-day-sep + .chat-msg, .chat-day-sep + .chat-unread-sep + .chat-msg { margin-top: 8px; }
.chat-msg-name { font-size: 14.5px; font-weight: 700; }
.chat-msg-time { font-size: 11px; color: var(--text-faint); }
.chat-msg-text { font-size: 15px; line-height: 1.45; }
.chat-msg-avatar, .chat-msg-avatar-letter { width: 36px; height: 36px; }
.chat-msg-avatar-spacer { width: 36px; }
.chat-msg-avatar-letter { background: var(--bg4); color: var(--text-dim); border-color: var(--border); }
.chat-reaction-pill { border-radius: 999px; height: 28px; background: var(--hover-overlay); border-color: var(--border); }
.chat-reaction-pill.active { background: var(--accent-bg); border-color: var(--accent-border); }
.chat-composer { border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); box-shadow: none; }
.chat-composer-btn { min-width: 40px; min-height: 40px; }
.chat-composer-send { min-width: 40px; min-height: 40px; border-radius: 12px; }
.chat-online-strip { min-height: 44px; }
.community-bar { border-bottom: 1px solid var(--border); }

/* Member list: status line under the name */
.chat-member { min-height: 48px; }
.chat-member-info { flex: 1; gap: 1px; }
.chat-member-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member.is-typing .chat-member-sub { display: none; }
.chat-member-status { border-color: var(--bg); }
.chat-member-status.dnd { background: var(--red); }
.chat-member-status.offline { background: var(--text-faint); }
.chat-members-header, .chat-members-divider { text-transform: none; letter-spacing: 0.01em; font-size: 12px; font-weight: 600; color: var(--text-dim); }

/* Level badges: a calm chip */
.ct-level-badge { border-radius: 999px; font-variant-numeric: tabular-nums; }
.ct-level-badge[class*="level-"] { box-shadow: none; }
/* The level colours are picked for dark surfaces; on Light the pale ones get deeper ink */
[data-theme="light"] .ct-level-badge.level-5, [data-theme="light"] .ct-level-badge.level-6 { color: var(--purple); }
[data-theme="light"] .ct-level-badge.level-7, [data-theme="light"] .ct-level-badge.level-8 { color: var(--yellow); }
[data-theme="light"] .ct-level-badge.level-9 { color: var(--red); }
[data-theme="light"] .avatar-ring-7, [data-theme="light"] .avatar-ring-8 { border-color: color-mix(in srgb, var(--yellow) 70%, transparent); }

/* Profile card (same as the desktop popout) */
.profile-popup-overlay.user-popup-overlay { padding: 16px; background: var(--overlay-backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.user-popup {
    --up-color: var(--accent); --up-bg: var(--bg2);
    position: relative; width: 340px; max-width: 100%; max-height: calc(100% - 32px); overflow-y: auto;
    background: var(--up-bg); border: 1px solid var(--border-hover); border-radius: 18px;
    box-shadow: var(--shadow-lg); animation: popupSlideIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.user-popup-banner {
    height: 104px; background-size: cover; background-position: center;
    background-image:
        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)));
}
.user-popup-banner.has-image { background-color: var(--bg3); }
.user-popup-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.9); cursor: pointer; }
.user-popup-close:active { transform: scale(0.92); }
.user-popup-header { position: relative; height: 46px; padding: 0 18px; }
.user-popup-avatar-wrap { position: absolute; left: 14px; top: -46px; width: 88px; height: 88px; border-radius: 50%; padding: 4px; background: var(--up-bg); }
.user-popup-avatar { display: block; width: 80px; height: 80px; 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: 32px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.user-popup-presence { position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; 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: 9px; height: 9px; border-radius: 50%; background: var(--up-bg); }
.user-popup-like { position: absolute; right: 16px; top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px 0 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--hover-overlay); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; }
.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 svg path { fill: currentColor; }
.user-popup-like.pop svg { animation: userPopupLikePop 0.35s ease-out; }
@keyframes userPopupLikePop { 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: 21px; 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: 12.5px; font-weight: 500; color: var(--text-dim); }
.user-popup-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); }
.user-popup-status-dot.online { background: var(--green); }
.user-popup-status-dot.idle { background: var(--yellow); }
.user-popup-status-dot.dnd { background: var(--red); }
.user-popup-status-msg { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-dim); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.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: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; box-sizing: border-box; text-transform: none; letter-spacing: 0.01em; }
.user-popup-uid-badge { color: var(--text-dim); background: var(--hover-overlay-strong); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.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: 11px 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); }
.user-popup-stat-label { max-width: 100%; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-popup-socials { display: flex; flex-wrap: wrap; gap: 6px; }
.user-popup-socials[hidden] { display: none; }
.user-popup-social { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--hover-overlay); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer; }
.user-popup-social span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-popup-social svg { color: var(--text-dim); flex-shrink: 0; }

/* Settings: theme picker (each button carries data-theme, so its preview draws in that theme's colours;
   the frame and label use the page's tokens, captured on the picker first) */
.settings-card .settings-row-stack { align-items: stretch; gap: 12px; }
.settings-theme-picker {
    --pg-text: var(--text); --pg-dim: var(--text-dim); --pg-border: var(--border); --pg-accent: var(--accent); --pg-on-accent: var(--on-accent);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.settings-theme-btn { display: flex; flex-direction: column; align-items: stretch; padding: 6px; border: none; border-radius: 12px; background: transparent; color: var(--pg-dim); box-shadow: inset 0 0 0 1px var(--pg-border); font-family: var(--font); cursor: pointer; min-height: 44px; }
.settings-theme-btn.active { color: var(--pg-text); box-shadow: inset 0 0 0 2px var(--pg-accent); }
.settings-theme-btn:active { transform: scale(0.98); }
.theme-mock { display: flex; flex-direction: column; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.tm-top { display: flex; align-items: center; height: 18%; padding: 0 8px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.settings-theme-btn[data-theme="light"] .tm-top { background: var(--chrome); }
.tm-top i { display: block; width: 34%; height: 4px; border-radius: 2px; background: var(--accent); }
.tm-body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; min-width: 0; }
.tm-card { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 5px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--border); }
.tm-card.tm-row { flex-direction: row; align-items: center; gap: 6px; }
.tm-line { display: block; height: 4px; width: 72%; border-radius: 2px; background: var(--text); opacity: 0.85; }
.tm-line.tm-short { width: 46%; background: var(--text-dim); opacity: 0.7; }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tm-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--green); opacity: 0.7; }
.theme-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 2px; font-size: 13px; font-weight: 600; }
.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(--pg-on-accent); font-size: 10px; font-weight: 800; }
.accent-presets { gap: 10px; }
.accent-swatch { width: 34px; height: 34px; border-radius: 50%; }
.accent-swatch.active { border-color: var(--bg2); box-shadow: 0 0 0 2px var(--text); }
.settings-card .settings-toggle button { min-height: 34px; }
.settings-card .settings-toggle button.active { background: var(--bg4); color: var(--text); box-shadow: none; }
.settings-signout { min-height: 38px; border-color: color-mix(in srgb, var(--red) 25%, transparent); }

/* Light: nothing brighter than the cards (native lists, the Google button) */
[data-theme="light"] option { background: var(--bg2); color: var(--text); }
[data-theme="light"] .btn-google { background: #e4e7eb; }
[data-theme="light"] ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="light"] #auth-screen { background: var(--bg); }
[data-theme="light"] :is(.chat-msg-name, .chat-member-name, .chat-reply-quote-name, .user-popup-name, .ct-card-user)[style*="color"] { filter: brightness(0.62) saturate(1.3); }
[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%233d434c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); }

/* ============================================
   MISTAKES (2.3) — tag chips in the log form and trade detail, small chips in
   trade lists, and a compact block on the Trades page. --mc = the mistake's color.
   ============================================ */
.mk-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-toggle {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
    color: var(--text-dim); font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mk-toggle:active { transform: scale(0.96); }
.mk-toggle:not(.active) .mk-emoji { filter: grayscale(1); opacity: 0.7; }
.mk-toggle.active {
    background: color-mix(in srgb, var(--mc, var(--accent)) 16%, transparent);
    border-color: color-mix(in srgb, var(--mc, var(--accent)) 55%, transparent);
    color: var(--text);
}
.mk-toggle.archived { border-style: dashed; }
.mk-toggle.archived:not(.active) { opacity: 0.6; }
.mk-toggle.mk-clean { --mc: var(--green); }
.mk-toggle.mk-clean.active { color: var(--green); }
.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; }

.mk-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mk-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px 2px 7px;
    border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--text);
    background: color-mix(in srgb, var(--mc) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc) 35%, transparent);
}
.mk-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-chip.archived { border-style: dashed; opacity: 0.8; }
.trade-row .mk-chips { gap: 4px; }
.trade-row .mk-chip { font-size: 10.5px; padding: 0 7px 0 6px; gap: 4px; color: var(--text-dim); }

.td-mistakes { margin-bottom: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.td-mistakes > .mk-chips { margin-top: 8px; }
.td-mistakes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.td-mistakes-title { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.td-mistakes-hint { font-size: 11.5px; color: var(--text-faint); }
.mk-saved .mk-toggles { animation: mkSaved 0.9s ease-out; border-radius: 22px; }
@keyframes mkSaved { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }

.mk-block { margin-bottom: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.mk-block[hidden] { display: none; }
.mk-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mk-block-note { font-size: 11px; color: var(--text-faint); }
.mk-block-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-block-kpis > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-block-value { font-size: 18px; font-weight: 750; font-family: var(--num-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); }
.mk-block-value.negative { color: var(--red); }
.mk-block-sub { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-block-top { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.mk-block-row { display: flex; align-items: center; gap: 10px; min-height: 32px; min-width: 0; }
.mk-block-row .mk-chip { flex: 0 1 auto; min-width: 0; }
.mk-block-count { margin-left: auto; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mk-block-cost { min-width: 72px; text-align: right; font-size: 13px; font-weight: 700; font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.mk-block-cost.negative { color: var(--red); }
.mk-block-lucky { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }

/* ============================================
   DESKTOP LAYOUT FOR THE WEB APP
   On a wide screen the bottom bar becomes the sidebar the
   downloaded app has, so someone on a PC gets the same
   shape whether they installed it or not. Everything here
   is inside the media query: the phone layout is untouched.
   ============================================ */

@media (min-width: 1024px) {
    :root { --side-w: 230px; }

    /* The bottom bar stands up and becomes a sidebar */
    .bottom-nav {
        top: 0;
        bottom: 0;
        right: auto;
        width: var(--side-w);
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        gap: 1px;
        padding: 14px 8px;
        border-top: none;
        border-right: 1px solid var(--border);
    }
    /* Never slide away on a desktop keyboard */
    body.keyboard-open .bottom-nav { transform: none; }

    /* Rows, not tiles */
    .bottom-nav .nav-btn {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 13.5px;
        letter-spacing: 0.02em;
        color: var(--text-dim);
    }
    .bottom-nav .nav-btn:hover { background: var(--hover-overlay-strong, rgba(var(--fg-rgb), 0.06)); }
    .bottom-nav .nav-btn.active {
        background: var(--accent-bg);
        color: var(--text);
        font-weight: 650;
    }
    /* The little bar above the icon belongs to the phone layout */
    .bottom-nav .nav-btn.active::after { display: none; }
    .bottom-nav .nav-btn.active svg { color: var(--accent); }
    .bottom-nav .nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .bottom-nav .nav-btn span { font-weight: 500; letter-spacing: 0.02em; }
    .bottom-nav .nav-btn .nav-notif { position: static; margin-left: auto; }

    /* A brand line at the top of the sidebar, like the window title */
    .bottom-nav::before {
        content: 'Wille\2019s Journal';
        padding: 6px 12px 14px;
        color: var(--text-dim);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* Content sits beside the sidebar and gets room to breathe */
    .main {
        margin-left: var(--side-w);
        padding: 26px 32px 40px;
        padding-bottom: calc(40px + var(--voice-bar-h, 0px));
    }
    .main > .page { max-width: 1180px; }

    /* Chat already sits inside .main, so it inherits the offset — it only needs the
       phone's bottom-bar gap removed and the height of the space it is given. */
    #page-chat {
        padding: 0 0 var(--voice-bar-h, 0px);
        height: calc(100vh - 66px);
    }

    /* The dashboard's swipe row becomes a grid — nothing to swipe with a mouse */
    .dash-hero {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        overflow: visible;
    }
    .dash-hero-card { min-width: 0; }

    /* Overlays start beside the sidebar so it stays reachable */
    .voice-bar { left: var(--side-w); }

    /* Desktop pointers get hover states the phone never shows */
    .trade-row:hover, .recap-card:hover { border-color: var(--border-hover); }
}

/* Between phone and desktop: keep the bottom bar, use the extra width */
@media (min-width: 640px) and (max-width: 1023px) {
    .main { padding: 18px 22px; }
    .dash-hero { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
    .dash-hero-card { min-width: 0; }
}