/* =========================================================================
   CSS: DESIGN & LAYOUT (NEON GREEN / DARK THEME READY)
   ========================================================================= */
:root {
    /* LIGHT MODE VARIABLES */
    --bg-color: #f1f5f9; 
    --surface-color: #ffffff;
    --primary-color: #16a34a; 
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --nav-height: 70px;
    --header-height: 75px; 
    --ad-height: 50px;
    --positive-color: #16a34a; 
    --negative-color: #ef4444; 
}

/* DARK THEME OVERRIDES (Neon Green / Deep Black) */
[data-theme="dark"] {
    --bg-color: #121212; 
    --surface-color: #121212;
    --primary-color: #39ff14; /* Neon Green */
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --border-color: #27272a;
    --positive-color: #39ff14; 
    --negative-color: #ff0055; /* Neon Red */
}

/* Global Dark Theme Element Overrides */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .asset-item,
[data-theme="dark"] .trade-item,
[data-theme="dark"] .import-card,
[data-theme="dark"] .cal-cell,
[data-theme="dark"] .timeframe-controls,
[data-theme="dark"] .cal-nav-btn,
[data-theme="dark"] .perf-header-clean-icon {
    background: #121212 !important; 
    border-color: var(--border-color);
    box-shadow: none;
}

[data-theme="dark"] #ad-banner { background-color: #18181b; }
[data-theme="dark"] .cal-cell.empty { background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .metric-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .calendar-legend { border-top-color: var(--border-color); }

/* Modal Dark Theme Overrides */
[data-theme="dark"] .form-control, 
[data-theme="dark"] .header-select { 
    background: #050505; 
    border-color: var(--border-color); 
    color: var(--text-main); 
}
[data-theme="dark"] select option { background: #050505; color: var(--text-main); }
[data-theme="dark"] .toggle-group { background: #050505; border-color: var(--border-color); }
[data-theme="dark"] .toggle-btn.active { box-shadow: none; }
[data-theme="dark"] .toggle-btn.active[data-val="breakeven"],
[data-theme="dark"] .toggle-btn.active.theme-toggle-btn { 
    background: #121212; 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
}
[data-theme="dark"] .trades-tab-list .trade-item { 
    background: transparent !important; 
    border-color: var(--border-color) !important; 
}
[data-theme="dark"] .mini-trade-list {
    background: #050505 !important;
    border-color: var(--border-color);
}
[data-theme="dark"] .mini-trade-list .trade-item.selected {
    background: #121212 !important;
}

/* Settings Dark Theme Overrides */
[data-theme="dark"] .settings-group { background: #121212; border-color: var(--border-color); }
[data-theme="dark"] .settings-item { border-bottom-color: var(--border-color); }
[data-theme="dark"] .settings-item:active { background: #050505; }
[data-theme="dark"] .slider { background-color: #27272a; }
[data-theme="dark"] input:checked + .slider { background-color: var(--primary-color); }

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

body {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #000; 
    display: flex;
    justify-content: center;
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden; 
}

/* MAIN APP CONTAINER */
#android-app-container {
    width: 100%;
    max-width: 480px; 
    height: 100dvh; 
    background-color: var(--bg-color);
    color: var(--text-main); 
    position: relative;
    display: flex;
    flex-direction: column; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow: hidden; 
}

h1, h2, h3, h4, h5, h6 { color: var(--text-main); }
input, select, textarea { color: var(--text-main); background-color: var(--surface-color); }

/* ================== APP HEADER & NAVIGATION ================== */
#ad-banner {
    height: calc(var(--ad-height) + env(safe-area-inset-top, 24px));
    padding-top: env(safe-area-inset-top, 24px); 
    flex-shrink: 0;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    transition: background-color 0.3s ease;
}

#app-header {
    height: var(--header-height);
    flex-shrink: 0;
    background-color: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    z-index: 9;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.app-logo { 
    width: 50px; 
    height: 50px; 
    border-radius: 10px; 
    background-color: transparent; 
    background-image: url('/static/images/logo.png'); 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
[data-theme="dark"] .app-logo { box-shadow: none; }

#page-title { font-size: 1.35rem; font-weight: 800; color: var(--text-main); text-transform: capitalize; letter-spacing: -0.3px; margin: 0; }

/* ================== SCROLLABLE APP CONTENT ================== */
#app-content {
    flex: 1; 
    overflow-y: auto; 
    padding: 15px;
    padding-bottom: 25px; 
}
html, body, #app-content { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #app-content::-webkit-scrollbar { display: none; }

.page-container { width: 100%; }

/* ================== CARDS & STATS ================== */
.card { 
    background: var(--surface-color); 
    padding: 16px; 
    border-radius: 16px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    border: 1px solid var(--border-color); 
    margin-bottom: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .card { box-shadow: 0 4px 6px rgba(0,0,0,0.3); }

.card-flush { padding: 0; overflow: hidden; }

.chart-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
.balance-display h1 { font-size: 2rem; color: var(--text-main); line-height: 1.1; letter-spacing: -0.5px; transition: color 0.3s; }
.balance-display span { color: var(--positive-color); font-weight: 600; font-size: 0.85rem; }

.timeframe-controls {
    display: flex; justify-content: space-between; background: #f1f5f9; 
    border-radius: 10px; padding: 5px; margin-bottom: 15px; transition: background-color 0.3s ease;
}

.time-btn {
    background: transparent; border: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 700;
    padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex: 1;
}

.time-btn.active { background: var(--primary-color); color: #ffffff; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.35); transform: translateY(-1px); }
[data-theme="dark"] .time-btn.active { color: #000; box-shadow: 0 4px 10px rgba(57, 255, 20, 0.3); }

.chart-container { position: relative; height: 250px; width: 100%; }

.perf-header-clean { padding: 18px 16px 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); background: var(--surface-color); transition: all 0.3s ease;}
.perf-header-clean h3 { color: var(--text-main); font-size: 1.15rem; font-weight: 800; margin: 0 0 2px 0; letter-spacing: -0.3px; }
.perf-header-clean p { color: var(--text-muted); font-size: 0.75rem; margin: 0; font-weight: 500; }
.perf-header-clean-icon { width: 38px; height: 38px; background: #f1f5f9; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.1rem; }

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.stat-card {
    background: linear-gradient(135deg, #ffffff 40%, #f0fdf4 100%); 
    padding: 16px; border-radius: 12px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.8); 
    border: 1px solid var(--border-color); 
    display: flex; flex-direction: column; justify-content: space-between; min-height: 125px; 
    transition: all 0.3s ease;
}

.stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.stat-title-group { display: flex; flex-direction: column; }
.stat-card .stat-title { color: var(--text-muted); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.2px; margin-top: 2px; }

.stat-icon-wrapper { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.icon-pnl { background-color: rgba(22, 163, 74, 0.1); color: var(--positive-color); }
.icon-pnl-neg { background-color: rgba(239, 68, 68, 0.1); color: var(--negative-color); }
.icon-trades { background-color: rgba(22, 163, 74, 0.1); color: var(--primary-color); }

.stat-body { display: flex; flex-direction: column; gap: 4px; }
.stat-card .stat-value { color: var(--text-main); font-size: 1.6rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.stat-card .stat-trend { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

.radial-progress { width: 42px; height: 42px; }
.radial-progress .circle-bg { fill: none; stroke: var(--border-color); stroke-width: 3.5; }
.radial-progress .circle { fill: none; stroke-width: 3.5; stroke-linecap: round; animation: drawCircle 1s ease-out forwards; }
.radial-progress .percentage { fill: var(--text-main); font-size: 9px; font-weight: 800; text-anchor: middle; font-family: -apple-system, sans-serif; }
.circle-green { stroke: var(--positive-color); }
.circle-orange { stroke: #f59e0b; }
.circle-red { stroke: var(--negative-color); }
@keyframes drawCircle { from { stroke-dasharray: 0, 100; } }

/* ================== NEW ANALYTICS GRID ================== */
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.metric-box { 
    background: var(--bg-color); 
    padding: 12px; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    transition: all 0.2s ease; 
}
.metric-box-label { 
    font-size: 0.75rem; 
    font-weight: 600; 
    color: var(--text-muted); 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    margin-bottom: 4px; 
}
.metric-box-val { 
    font-size: 1.1rem; 
    font-weight: 800; 
    color: var(--text-main); 
}
[data-theme="dark"] .metric-box { background: rgba(255, 255, 255, 0.02); }

.metrics-list { display: flex; flex-direction: column; gap: 10px; }
.metric-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.metric-row:last-child { border-bottom: none; padding-bottom: 0; }
.metric-row span { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.metric-row strong { font-size: 0.95rem; font-weight: 800; color: var(--text-main); }

/* ================== CALENDAR ================== */
.section-header-compact { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.calendar-header h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-main); margin: 0; letter-spacing: -0.3px; }
.cal-month-picker { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.cal-nav-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
#cal-month-display { cursor: pointer; padding: 6px 12px; border-radius: 8px; background: transparent; transition: background 0.2s ease; }
#cal-month-display:hover, #cal-month-display:active { background: var(--border-color); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 15px; }
.cal-day-label { text-align: center; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding-bottom: 4px; }

.cal-cell { 
    aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; 
    background: #f8fafc; border: 1px solid var(--border-color); padding: 4px; position: relative;
}
.cal-cell:not(.empty) { cursor: pointer; transition: all 0.15s ease; }
.cal-cell:not(.empty):active { transform: scale(0.92); opacity: 0.8; }
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell .date { font-size: 0.75rem; font-weight: 700; color: var(--text-main); line-height: 1; }
.cal-cell .pnl { font-size: 0.6rem; font-weight: 800; letter-spacing: -0.5px; margin-top: 4px; }

.cal-cell.win { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.3); }
.cal-cell.win .date, .cal-cell.win .pnl { color: var(--positive-color); }
.cal-cell.loss { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.cal-cell.loss .date, .cal-cell.loss .pnl { color: var(--negative-color); }
.cal-cell.neutral .date, .cal-cell.neutral .pnl { color: var(--text-main); }

[data-theme="dark"] .cal-cell.win { background: rgba(57, 255, 20, 0.1); border-color: rgba(57, 255, 20, 0.3); }
[data-theme="dark"] .cal-cell.loss { background: rgba(255, 0, 85, 0.1); border-color: rgba(255, 0, 85, 0.3); }

.calendar-legend { display: flex; justify-content: center; gap: 16px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-win { background: var(--positive-color); }
.dot-loss { background: var(--negative-color); }

/* ================== LISTS (ASSETS & TRADES) ================== */
.asset-list { display: flex; flex-direction: column; gap: 12px; }
.asset-item { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 12px; border-radius: 12px; border: 1px solid var(--border-color); }
.asset-info { display: flex; align-items: center; gap: 12px; }
.asset-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-color); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: var(--text-main); }
.asset-name { font-size: 0.9rem; font-weight: 700; color: var(--text-main); }
.asset-stats { text-align: right; }
.asset-winrate { font-size: 0.85rem; font-weight: 800; color: var(--positive-color); }
.asset-trades { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }

.view-all-btn { background: none; border: none; color: var(--primary-color); font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: 6px; }

.trade-list { display: flex; flex-direction: column; gap: 12px; }
.trade-item { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-color); }

/* Clean, flush look for trades in the Trades tab */
.trades-tab-list .trade-item { 
    background: transparent !important; 
    border: none !important; 
    border-bottom: 1px solid var(--border-color) !important; 
    border-radius: 0 !important; 
    padding: 16px 4px !important; 
}
.trades-tab-list .trade-item:last-child { 
    border-bottom: none !important; 
    padding-bottom: 4px !important; 
}

.trade-info-left { display: flex; align-items: center; gap: 12px; }
.trade-icon { width: 43px; height: 43px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.trade-icon.long { background: rgba(22, 163, 74, 0.1); color: var(--positive-color); }
.trade-icon.short { background: rgba(239, 68, 68, 0.1); color: var(--negative-color); }

[data-theme="dark"] .trade-icon.long { background: rgba(57, 255, 20, 0.1); }
[data-theme="dark"] .trade-icon.short { background: rgba(255, 0, 85, 0.1); }

/* FLAGS UI */
/* FLAGS UI */
.tv-flag-container { width: 48px; height: 48px; position: relative; flex-shrink: 0; }
.tv-flag {
    width: 30px; height: 30px; border-radius: 50%; position: absolute;
    border: 2px solid var(--surface-color); background-color: var(--surface-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); object-fit: cover;
}
.quote-flag { top: 0; right: 0; z-index: 1; }
.base-flag { bottom: 0; left: 0; z-index: 2; }
[data-theme="dark"] .tv-flag { border-color: #121212; background-color: #121212; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }

.trade-details h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin: 0 0 3px 0; }
.trade-details p { font-size: 0.75rem; color: var(--text-muted); margin: 0; font-weight: 500; }
.trade-pnl { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.3px; }

/* UTILITY COLORS */
.text-green { color: var(--positive-color) !important; }
.text-red { color: var(--negative-color) !important; }
.text-primary { color: #3b82f6 !important; }
.text-orange { color: #f59e0b !important; }

.trade-actions { display: flex; gap: 14px; color: #94a3b8; font-size: 1.05rem; }
.trade-actions i { cursor: pointer; transition: color 0.2s ease; }
.trade-actions i:hover { color: var(--primary-color); }
.trade-actions .delete-trade-btn:hover { color: var(--negative-color); }

.analytics-tag { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; margin-top: 4px; }
.tag-good { background: rgba(22, 163, 74, 0.1); color: var(--positive-color); }
.tag-bad { background: rgba(239, 68, 68, 0.1); color: var(--negative-color); }
[data-theme="dark"] .tag-good { background: rgba(57, 255, 20, 0.1); }
[data-theme="dark"] .tag-bad { background: rgba(255, 0, 85, 0.1); }

/* ================== SETTINGS UI ================== */
.settings-group { background: var(--surface-color); border-radius: 16px; border: 1px solid var(--border-color); margin-bottom: 20px; overflow: hidden; transition: background-color 0.3s ease, border-color 0.3s ease; }
.settings-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s; }
.settings-item:last-child { border-bottom: none; }
.settings-item:active { background: var(--bg-color); }

.settings-item-left { display: flex; align-items: center; gap: 12px; }
.settings-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.settings-icon.blue { background: rgba(22, 163, 74, 0.1); color: var(--primary-color); } 
.settings-icon.orange { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.settings-icon.gray { background: rgba(100, 116, 139, 0.1); color: var(--text-muted); }
[data-theme="dark"] .settings-icon.blue, [data-theme="dark"] .settings-icon.green { background: rgba(57, 255, 20, 0.1); }

.settings-text h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin: 0; }
.settings-text p { font-size: 0.75rem; color: var(--text-muted); margin: 0; margin-top: 2px;}
.settings-right { color: var(--text-muted); font-size: 1rem; display: flex; align-items: center; gap: 10px; }

/* CUSTOM DROPDOWNS */
.custom-dropdown { position: relative; display: inline-block; }
.dropdown-selected {
    background: var(--bg-color); color: var(--text-main); border: 1px solid var(--border-color);
    padding: 8px 12px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: all 0.2s ease;
}
.dropdown-options {
    position: absolute; top: 100%; right: 0; margin-top: 6px;
    background: var(--surface-color); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 140px; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000;
    overflow: hidden;
}
[data-theme="dark"] .dropdown-options { box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.custom-dropdown.active .dropdown-options { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-option {
    padding: 12px 15px; font-size: 0.85rem; font-weight: 600; color: var(--text-main);
    cursor: pointer; transition: background 0.2s ease; border-bottom: 1px solid var(--border-color);
}
.dropdown-option:last-child { border-bottom: none; }
.dropdown-option:hover { background: var(--bg-color); color: var(--primary-color); }
.dropdown-option.active { background: rgba(22, 163, 74, 0.1); color: var(--primary-color); }
[data-theme="dark"] .dropdown-option.active { background: rgba(57, 255, 20, 0.1); }

/* ASSET FILTER DROPDOWN (header) */
#header-asset-filter .dropdown-selected { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header-asset-filter .dropdown-options.asset-filter-options {
    min-width: 150px; max-width: 200px; max-height: 280px; overflow-y: auto; right: 0; left: auto;
}
#header-asset-filter .dropdown-options.asset-filter-options::-webkit-scrollbar { width: 5px; }
#header-asset-filter .dropdown-options.asset-filter-options::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
#header-asset-filter .dropdown-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make header filter area scroll horizontally on small screens if needed */
@media (max-width: 380px) {
    #header-asset-filter .dropdown-selected,
    #header-time-filter .dropdown-selected { padding: 8px 10px; font-size: 0.75rem; max-width: 100px; }
}

/* SWITCH TOGGLE */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(20px); }

/* ================== MODALS & FORMS ================== */
/* AUTHORITATIVE modal-overlay definition. The duplicate block further
   below (around line 1036) is kept for backwards compat but this one
   wins because it's the cleanest, GPU-friendly version.
   KEY: NO backdrop-filter (kills Android WebView performance), NO
   `transition: all` (forces browser to watch every property). */
.modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55); z-index: 100;
    display: flex; justify-content: center; align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    will-change: opacity;
    -webkit-tap-highlight-color: transparent;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* Modal content: short slide-up (24px) + opacity fade. Full-height
   translateY(100%) slides were janky on heavy modals like the journal
   entry forms. The 24px slide gives the same 'bottom sheet' feel
   without forcing a repaint of the full viewport. */
.modal-content {
    background: var(--surface-color);
    width: 100%;
    max-height: 90dvh;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px calc(30px + env(safe-area-inset-bottom)) 20px;
    display: flex;
    flex-direction: column;
    transform: translateY(24px) translateZ(0);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease-out;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    /* PERF: isolate the modal layout/style/paint from the rest of the
       page so the slide-up animation does not trigger full-viewport
       reflows. This is the #1 fix for janky modals on Android WebView. */
    contain: layout style paint;
}
[data-theme="dark"] .modal-content { box-shadow: 0 -4px 20px rgba(0,0,0,0.25); }
.modal-overlay.active .modal-content { transform: translateY(0) translateZ(0); opacity: 1; }

.modal-overlay.centered { align-items: center; }
.modal-overlay.centered .modal-content { border-radius: 24px; transform: scale(0.94) translateZ(0); opacity: 0; width: 90%; max-width: 340px; padding: 25px 20px; margin: auto; position: relative; bottom: auto; transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out; }
.modal-overlay.centered.active .modal-content { transform: scale(1) translateZ(0); opacity: 1; }

.modal-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { font-size: 1.25rem; font-weight: 800; color: var(--text-main); margin: 0; }
.close-modal { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .close-modal { background: #121212; border: 1px solid var(--border-color); }

.modal-body { 
    overflow-y: auto; 
    padding-right: 5px; 
    flex: 1; 
    min-height: 0; 
    padding-bottom: 15px; 
    /* PERF: promote to own GPU layer so the modal-body does not get
       repainted on every frame of the slide-up animation. */
    transform: translateZ(0);
    will-change: transform;
} 
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.form-control { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); color: var(--text-main); font-family: inherit; font-size: 0.95rem; font-weight: 600; outline: none; transition: border-color 0.2s; }
.form-control:focus { border-color: var(--primary-color); }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.toggle-group { display: flex; gap: 6px; background: var(--bg-color); padding: 4px; border-radius: 12px; border: 1px solid var(--border-color); }
.toggle-btn { flex: 1; padding: 12px 5px; border: none; background: transparent; border-radius: 8px; font-weight: 700; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; }

.toggle-btn.active[data-val="long"] { background: rgba(22, 163, 74, 0.1); color: var(--positive-color); }
.toggle-btn.active[data-val="short"] { background: rgba(239, 68, 68, 0.1); color: var(--negative-color); }
.toggle-btn.active[data-val="profit"] { background: rgba(22, 163, 74, 0.1); color: var(--positive-color); }
.toggle-btn.active[data-val="loss"] { background: rgba(239, 68, 68, 0.1); color: var(--negative-color); }
.toggle-btn.active[data-val="breakeven"],
.toggle-btn.active.theme-toggle-btn { background: var(--surface-color); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

[data-theme="dark"] .toggle-btn.active[data-val="long"], [data-theme="dark"] .toggle-btn.active[data-val="profit"] { background: rgba(57, 255, 20, 0.1); border: 1px solid rgba(57,255,20,0.3); }
[data-theme="dark"] .toggle-btn.active[data-val="short"], [data-theme="dark"] .toggle-btn.active[data-val="loss"] { background: rgba(255, 0, 85, 0.1); border: 1px solid rgba(255,0,85,0.3); }

/* SLIDER & BUTTONS */
.range-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 5px; background: var(--border-color); outline: none; margin: 15px 0 10px 0; cursor: pointer; transition: background 0.2s ease; }
.range-slider::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; border-radius: 5px; background: var(--border-color); }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-color); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: all 0.15s ease-in-out; margin-top: -9px; border: 2px solid var(--surface-color); }
.range-slider:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.range-slider::-moz-range-track { width: 100%; height: 6px; cursor: pointer; border-radius: 5px; background: var(--border-color); }
.range-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); border: 2px solid var(--surface-color); transition: all 0.15s ease-in-out; }
.range-slider:active::-moz-range-thumb { transform: scale(1.1); }
[data-theme="dark"] .range-slider::-webkit-slider-thumb { box-shadow: 0 0 12px rgba(57, 255, 20, 0.6); border-color: #000; }
[data-theme="dark"] .range-slider::-moz-range-thumb { box-shadow: 0 0 12px rgba(57, 255, 20, 0.6); border-color: #000; }

.slider-labels-container { position: relative; width: 100%; height: 18px; margin-top: 5px; }
.slider-lbl { position: absolute; top: 0; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.lbl-start { left: 0; }
.lbl-end { right: 0; }
.lbl-mid { left: 44.44%; transform: translateX(-50%); }

.modal-actions { 
    flex-shrink: 0; display: flex; gap: 12px; margin-top: 10px; 
    padding-top: 15px; border-top: 1px solid var(--border-color); 
}
.btn-save { flex: 2; background: var(--primary-color); color: white; border: none; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 10px rgba(22,163,74,0.2); transition: 0.2s;}
[data-theme="dark"] .btn-save { color: #000; box-shadow: 0 4px 10px rgba(57,255,20,0.2); font-weight: 800; }
.btn-cancel { flex: 1; background: transparent; color: var(--text-main); border: 1px solid var(--border-color); padding: 14px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.2s;}

/* ================== CUSTOM DATE PICKER UI ================== */
.dt-picker-input { cursor: pointer; background-color: var(--bg-color) !important;}
.dt-header { background: var(--primary-color); color: #fff; padding: 20px; border-radius: 24px 24px 0 0; text-align: center; }
.dt-header-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; }
.dt-header-sub { font-size: 1rem; opacity: 0.9; font-weight: 600; }
.dt-body { padding: 20px; background: var(--surface-color); }

.dt-year-list { max-height: 250px; overflow-y: auto; text-align: center; scroll-behavior: smooth; padding: 10px 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dt-year-list::-webkit-scrollbar { width: 4px; }
.dt-year-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.dt-year-btn { display: block; width: 100%; padding: 12px; background: none; border: none; color: var(--text-main); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: 0.2s; border-radius: 8px; margin-bottom: 4px;}
.dt-year-btn:hover { background: var(--bg-color); color: var(--primary-color); }
.dt-year-btn.active { font-size: 1.4rem; font-weight: 800; color: var(--primary-color); background: rgba(22, 163, 74, 0.1); }

.dt-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: 700; color: var(--text-main); font-size: 1.1rem;}
.dt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; min-height: 290px; align-content: start; }
.dt-day-name { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 8px;}
.dt-day-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--text-main); font-weight: 600; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: auto; transition: 0.2s;}
.dt-day-btn:hover { background: var(--border-color); }
.dt-day-btn.active { background: var(--primary-color); color: #fff; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);}
.dt-day-btn:disabled { color: var(--border-color); cursor: not-allowed; }

.dt-spin-btn { background: #f1f5f9; border: none; width: 48px; height: 48px; border-radius: 12px; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.dt-spin-btn:hover { background: var(--border-color); color: var(--primary-color); }
.dt-spin-btn:active { transform: scale(0.9); }
.dt-spin-val { font-size: 2.5rem; font-weight: 800; color: var(--text-main); width: 60px; text-align: center; margin: 10px 0; }

.dt-ampm-toggle { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.dt-ampm-btn { padding: 10px 24px; border-radius: 12px; border: 2px solid var(--border-color); background: transparent; color: var(--text-main); font-weight: 700; cursor: pointer; transition: 0.2s;}
.dt-ampm-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

[data-theme="dark"] .dt-header { background: #121212; border-bottom: 1px solid var(--border-color); color: var(--primary-color); }
[data-theme="dark"] .dt-year-btn.active { background: rgba(57, 255, 20, 0.1); color: var(--primary-color); }
[data-theme="dark"] .dt-day-btn:hover { background: #27272a; }
[data-theme="dark"] .dt-day-btn.active { background: var(--primary-color); color: #000; box-shadow: 0 2px 8px rgba(57, 255, 20, 0.4);}
[data-theme="dark"] .dt-spin-btn { background: #121212; border: 1px solid var(--border-color); }
[data-theme="dark"] .dt-spin-btn:hover { background: #27272a; color: var(--primary-color); }
[data-theme="dark"] .dt-ampm-btn.active { color: #000; border-color: var(--primary-color); }

/* ================== MONTH PICKER MODAL UI ================== */
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-bottom: 10px; }
.month-btn { padding: 14px 5px; border-radius: 10px; border: 1px solid var(--border-color); background: transparent; color: var(--text-main); font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s ease; font-size: 0.95rem; }
.month-btn:hover { border-color: var(--primary-color); }
.month-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3); }
[data-theme="dark"] .month-btn.active { color: #000; box-shadow: 0 4px 10px rgba(57, 255, 20, 0.3); font-weight: 800; }

/* ================== TOAST NOTIFICATION ================== */
#toast-notification {
    position: absolute;
    bottom: calc(var(--nav-height) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--text-main);
    color: var(--surface-color);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    pointer-events: none;
    white-space: nowrap;
}
#toast-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
[data-theme="dark"] #toast-notification { background-color: #27272a; color: #ffffff; }

/* ================== BOTTOM NAVIGATION & BUBBLE POPUP ================== */

/* Updated Left/Right Box Analytics Bubble Popup */
.bubble-popup {
    position: absolute;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.9);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: row; /* Enforce Left and Right */
    gap: 0; /* Managed by divider */
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 50;
    white-space: nowrap;
}
.bubble-popup::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.bubble-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}
.bubble-divider {
    width: 1px;
    background: var(--border-color);
    margin: 4px 2px;
}
.bubble-option {
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.bubble-option:hover, .bubble-option:active {
    background: var(--bg-color);
}
[data-theme="dark"] .bubble-popup {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#bottom-nav {
    flex-shrink: 0; 
    width: 100%; 
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--surface-color); 
    border-top: 1px solid var(--border-color);
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    z-index: 20;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-item {
    background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted);
    cursor: pointer; width: 20%; height: 100%; transition: color 0.2s ease;
}
.nav-item i { font-size: 1.3rem; margin-bottom: 4px; }
.nav-item span { font-size: 0.75rem; font-weight: 600; margin-top: 4px; letter-spacing: -0.2px;} 
.nav-item.active { color: var(--primary-color); }
[data-theme="dark"] .nav-item.active { text-shadow: 0 0 10px rgba(57,255,20,0.4); }

/* ================== ANIMATIONS & UTILS ================== */
.loading { text-align: center; color: var(--text-muted); margin-top: 50px; }
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.loader-spinner {
    width: 40px; 
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================== TRADE VIEW MODAL (DETAILED VIEW) ================== */
.tv-content { padding: 0 !important; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--bg-color); }
[data-theme="dark"] .tv-content { border: 1px solid var(--border-color); box-shadow: 0 -8px 30px rgba(0,0,0,0.6); }

.tv-header { 
    padding: 35px 20px 25px 20px; 
    text-align: center; 
    position: relative; 
    border-bottom: 1px solid var(--border-color); 
    transition: background 0.3s ease; 
}

/* Subtle, flat background tints for Trade Viewer header */
.tv-header.profit { background: rgba(22, 163, 74, 0.04); }
.tv-header.loss { background: rgba(239, 68, 68, 0.04); }
.tv-header.breakeven { background: rgba(100, 116, 139, 0.04); }

[data-theme="dark"] .tv-header.profit { background: rgba(57, 255, 20, 0.03); border-bottom-color: rgba(57, 255, 20, 0.15); }
[data-theme="dark"] .tv-header.loss { background: rgba(255, 0, 85, 0.03); border-bottom-color: rgba(255, 0, 85, 0.15); }

.tv-close-btn { 
    position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; 
    border-radius: 50%; background: var(--surface-color) !important; color: var(--text-main); 
    border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; 
    cursor: pointer; z-index: 10; transition: all 0.2s ease;
}
.tv-close-btn:hover { background: var(--border-color) !important; }

.tv-top-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; }
.tv-top-row h2 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--text-main); letter-spacing: -0.5px; }
.tv-badge { font-size: 0.65rem; font-weight: 800; padding: 4px 8px; border-radius: 6px; letter-spacing: 0.5px; }
.tv-badge.long { background: rgba(22, 163, 74, 0.1); color: var(--positive-color); border: 1px solid rgba(22, 163, 74, 0.2); }
.tv-badge.short { background: rgba(239, 68, 68, 0.1); color: var(--negative-color); border: 1px solid rgba(239, 68, 68, 0.2); }

[data-theme="dark"] .tv-badge.long { background: rgba(57, 255, 20, 0.1); border-color: rgba(57, 255, 20, 0.25); }
[data-theme="dark"] .tv-badge.short { background: rgba(255, 0, 85, 0.1); border-color: rgba(255, 0, 85, 0.25); }

.tv-pnl-section { display: flex; flex-direction: column; align-items: center; }
#tv-pnl { font-size: 2.8rem; font-weight: 800; margin: 0; letter-spacing: -1.5px; }

.tv-header.profit #tv-pnl { color: var(--positive-color); }
.tv-header.loss #tv-pnl { color: var(--negative-color); }

.tv-outcome-tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); margin-top: 5px; text-transform: uppercase; }

.tv-body { padding: 20px; background: var(--bg-color); }
.tv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }

.tv-card { 
    background: var(--surface-color); padding: 16px; border-radius: 12px; 
    border: 1px solid var(--border-color); display: flex; flex-direction: column; 
    justify-content: center; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="dark"] .tv-card { box-shadow: none; }

.tv-card::before { 
    content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; 
    background: var(--border-color); opacity: 0.7; border-radius: 4px 0 0 4px; 
}
.tv-card span { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; }
.tv-card strong { font-size: 0.95rem; color: var(--text-main); font-weight: 800; z-index: 1; letter-spacing: -0.2px; }
.tv-card-icon { position: absolute; right: -8px; bottom: -8px; font-size: 2.5rem; opacity: 0.03; z-index: 0; }
[data-theme="dark"] .tv-card-icon { opacity: 0.06; }

.tv-notes-section { background: var(--surface-color); padding: 18px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
[data-theme="dark"] .tv-notes-section { box-shadow: none; }
.tv-notes-section label { display: block; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.tv-notes-section p { font-size: 0.95rem; color: var(--text-main); line-height: 1.6; margin: 0; font-weight: 500; }

/* ================== FORM CARD SECTIONS & DEEP DIVE UI ================== */
.form-section-card {
    background: var(--bg-color);
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
}
[data-theme="dark"] .form-section-card {
    background: rgba(255, 255, 255, 0.02);
}
.form-section-card label i {
    margin-right: 6px;
    opacity: 0.7;
}

/* Scrollable Mini Trade List for Selection */
.mini-trade-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-color);
}
.mini-trade-list::-webkit-scrollbar { width: 4px; }
.mini-trade-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.mini-trade-list .trade-item {
    cursor: pointer;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease, border-left 0.2s ease;
    border-left: 3px solid transparent;
}
.mini-trade-list .trade-item:last-child {
    border-bottom: none;
}
.mini-trade-list .trade-item:hover {
    background: var(--surface-color) !important;
}
.mini-trade-list .trade-item.selected {
    background: var(--surface-color) !important;
    border-left: 3px solid var(--primary-color);
}

/* AI Summary & Trade Replay Custom Blocks */
.ai-summary-box {
    background: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 16px;
    min-height: 100px;
    transition: all 0.3s ease;
}
[data-theme="dark"] .ai-summary-box { 
    background: rgba(255, 255, 255, 0.02); 
}

.replay-space {
    background: var(--bg-color);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    opacity: 0.8;
}
[data-theme="dark"] .replay-space { 
    background: rgba(0,0,0,0.2); 
}

/* ================== PIN LOCK SCREEN ================== */
#pin-lock-screen {
    display: none; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: var(--bg-color); 
    z-index: 9998; /* Just below the splash screen */
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

.pin-dot {
    width: 18px; height: 18px; 
    border-radius: 50%;
    border: 2px solid var(--border-color); 
    transition: all 0.2s ease;
}

.pin-dot.filled {
    background: var(--primary-color); 
    border-color: var(--primary-color);
    box-shadow: 0 0 12px var(--primary-color);
}

.pin-key {
    background: var(--surface-color); 
    border: 1px solid var(--border-color);
    border-radius: 50%; 
    width: 75px; height: 75px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.8rem; font-weight: 700; color: var(--text-main); 
    cursor: pointer; transition: all 0.15s ease; margin: 0 auto;
}

.pin-key:active {
    transform: scale(0.9); 
    background: var(--bg-color);
    color: var(--primary-color); 
    border-color: var(--primary-color);
}

[data-theme="dark"] .pin-key {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Shake animation for wrong PIN */
.shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* ================== ENTRY TAB UI ================== */
.entry-action-btn {
    flex: 1; padding: 20px 16px; border-radius: 18px; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 14px; text-align: left;
    background: var(--surface-color); border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: all 0.3s ease;
}
.entry-action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
[data-theme="dark"] .entry-action-btn { box-shadow: none; background: rgba(255,255,255,0.02); }

.entry-action-btn .icon-wrapper {
    width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.entry-action-btn.daily .icon-wrapper { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.entry-action-btn.weekly .icon-wrapper { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.entry-action-btn .text-wrapper h4 { font-size: 1.05rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.entry-action-btn .text-wrapper p { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin: 0; }

.entry-list-container { display: flex; flex-direction: column; }

/* Clean, flush look for Journal Entries (Matches Trade Items) */
.entry-item { 
    border-bottom: 1px solid var(--border-color); 
    transition: background 0.2s ease;
}
.entry-item:last-child {
    border-bottom: none;
}
[data-theme="dark"] .entry-item { 
    border-bottom-color: var(--border-color); 
}

/* Calendar Indicators */
.cal-indicators { 
    position: absolute; /* Detaches the dots from the cell height calculation */
    bottom: 5px; 
    left: 0; 
    right: 0; 
    display: flex; 
    gap: 4px; 
    justify-content: center; 
}
.indicator-dot { 
    width: 5px; 
    height: 5px; 
    border-radius: 50%; 
    flex-shrink: 0; /* Prevents the dot from being squished */
}
.indicator-dot.daily { 
    background: #f59e0b; 
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.6); 
}
.indicator-dot.weekly { 
    background: #8b5cf6; 
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.6); 
}

        /* Forces the bubble popup to use large square grid buttons */
        #analytics-popup-bubble.active {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 15px;
            width: max-content;
            min-width: 260px;
            border-radius: 20px;
        }
        .bubble-option {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 16px;
            padding: 15px;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            font-weight: 800;
            font-size: 1rem;
            gap: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: all 0.2s ease;
        }
        .bubble-option:hover {
            background: var(--bg-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.08);
        }
        .bubble-divider {
            display: none !important; /* Hide old tiny line */
        }

/* Settings currency css */
                .tz-custom-menu, .currency-custom-menu {
                    position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 250px;
                    background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px;
                    z-index: 1000; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); display: none;
                }
                .tz-custom-menu::-webkit-scrollbar, .currency-custom-menu::-webkit-scrollbar { width: 5px; }
                .tz-custom-menu::-webkit-scrollbar-thumb, .currency-custom-menu::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
                .tz-option, .currency-option { padding: 14px 16px; color: var(--text-main); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s ease; }
                .tz-option:last-child, .currency-option:last-child { border-bottom: none; }
                .tz-option:hover, .tz-option.active, .currency-option:hover, .currency-option.active { background: var(--bg-color); }
                .tz-option.active, .currency-option.active { color: var(--primary-color); }
                .tz-offset, .currency-offset { display: inline-block; width: 80px; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; text-align: right; }
                .tz-region, .currency-region { font-size: 0.9rem; font-weight: 600; }
/* Default dark theme logos */
.app-logo, 
.splash-logo {
    background-image: url('/static/images/logo.png');
}

/* Light theme override */
[data-theme="light"] .app-logo,
[data-theme="light"] .splash-logo {
    background-image: url('/static/images/light-logo.png');
}
/* Duplicate .modal-overlay block kept for backwards compat. Explicitly
   sets backdrop-filter: none so no browser can resurrect the blur via
   cascade quirks. */
.modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100;
    display: flex; justify-content: center; align-items: flex-end;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    will-change: opacity;
    -webkit-tap-highlight-color: transparent;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

/* Duplicate .modal-content block — kept in sync with the authoritative
   definition above. */
.modal-content {
    background: var(--surface-color);
    width: 100%;
    max-height: 90dvh;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px calc(30px + env(safe-area-inset-bottom)) 20px;
    display: flex;
    flex-direction: column;
    transform: translateY(24px) translateZ(0);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease-out;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   SCREENSHOT HANDLER (Static UI - matches form-section-card theme)
   ========================================================================= */
.screenshot-handler {
    margin-top: 4px;
}

.screenshot-dropzone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px dashed var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.screenshot-dropzone:hover,
.screenshot-dropzone:active {
    border-color: var(--primary-color);
    background: rgba(22, 163, 74, 0.04);
}

[data-theme="dark"] .screenshot-dropzone:hover,
[data-theme="dark"] .screenshot-dropzone:active {
    background: rgba(57, 255, 20, 0.05);
}

.screenshot-dropzone-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--primary-color);
    transition: color 0.18s ease, border-color 0.18s ease;
}

[data-theme="dark"] .screenshot-dropzone-icon {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.25);
}

.screenshot-dropzone:hover .screenshot-dropzone-icon,
.screenshot-dropzone:active .screenshot-dropzone-icon {
    border-color: var(--primary-color);
}

.screenshot-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.screenshot-dropzone-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.screenshot-dropzone-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.screenshot-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 0;
}

.screenshot-thumbnails:empty {
    display: none;
}

.screenshot-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
}

.screenshot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.screenshot-thumb-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

/* Commission / RR cards inherit tv-card styling; tint accent for clarity */
#tv-commission { color: var(--text-muted); }
#tv-rr { color: var(--primary-color); }

/* =========================================================================
   SKELETON LOADER (shown while fetching saved broker accounts)
   ========================================================================= */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.85; }
}

/* =========================================================================
   USAGE PILLS — "X / Y" monthly limit counters
   Renders a compact pill with: icon, used count, "/", limit, mini progress bar.
   Auto-tints to warning (amber) at >=80% and danger (red) at 100%.
   Matches theme via --primary-color, --text-muted, --bg-color, --border-color.
   ========================================================================= */
.usage-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding: 2px 1px 6px 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.usage-strip::-webkit-scrollbar { display: none; }

.usage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.usage-pill .usage-icon {
    font-size: 0.68rem;
    line-height: 1;
}

.usage-pill .usage-num {
    color: var(--text-main);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}

.usage-pill .usage-sep {
    color: var(--text-muted);
    opacity: 0.55;
    margin: 0 1px;
    font-weight: 600;
}

.usage-pill .usage-limit {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.usage-pill .usage-bar {
    width: 28px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-left: 3px;
    position: relative;
}

.usage-pill .usage-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
    width: 0%;
}

/* Warning state: >=80% used (amber) */
.usage-pill.warning { border-color: rgba(245, 158, 11, 0.4); }
.usage-pill.warning .usage-bar-fill { background: #f59e0b; }
.usage-pill.warning .usage-num { color: #f59e0b; }
.usage-pill.warning .usage-icon { color: #f59e0b !important; }

/* Danger state: 100% used (red) */
.usage-pill.danger { border-color: rgba(239, 68, 68, 0.45); }
.usage-pill.danger .usage-bar-fill { background: var(--negative-color); }
.usage-pill.danger .usage-num { color: var(--negative-color); }
.usage-pill.danger .usage-icon { color: var(--negative-color) !important; }

/* Unlimited plan — show ∞ instead of limit, hide bar */
.usage-pill.unlimited .usage-bar { display: none; }
.usage-pill.unlimited .usage-limit { color: var(--primary-color); font-weight: 800; }
.usage-pill.unlimited .usage-sep { display: none; }
.usage-pill.unlimited .usage-num { color: var(--primary-color); }

/* Header-mounted variant (used inside Saved Accounts modal header) */
.usage-pill.usage-pill-sm {
    padding: 4px 9px;
    font-size: 0.68rem;
    gap: 5px;
}
.usage-pill.usage-pill-sm .usage-bar { width: 22px; height: 3px; }
.usage-pill.usage-pill-sm .usage-icon { font-size: 0.62rem; }

/* Dark theme tweaks for nicer contrast */
[data-theme="dark"] .usage-pill {
    background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .usage-pill.warning { background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .usage-pill.danger { background: rgba(255, 0, 85, 0.08); }
/* =========================================================================
   USAGE CARD (Settings tab)
   Single card at the top of Settings showing one row per metered resource
   (icon, label, "used / limit" counter, simple progress bar).
   Styled to match the standard .card look: flat surface, 1px border, no
   gradients, no decorative ::before. Only functional warning/danger tints
   on the bar are kept so users still see when a limit is approached.
   ========================================================================= */
.usage-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin: 0 0 15px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.usage-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.usage-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.2px;
}
.usage-card-title i {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.usage-card-plan {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.usage-card-plan.unlimited {
    color: var(--text-muted);
}
.usage-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.usage-card-row {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 11px 12px 12px 12px;
}
.usage-card-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.usage-card-row-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.usage-card-row-label i {
    font-size: 0.72rem;
    width: 14px;
    text-align: center;
    color: var(--text-muted);
}
.usage-card-row-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.usage-card-row-count .uc-num { color: var(--text-main); }
.usage-card-row-count .uc-sep { color: var(--text-muted); opacity: 0.5; margin: 0 1px; font-weight: 600; }
.usage-card-row-count .uc-limit { color: var(--text-muted); }
.usage-card-row-count .uc-inf { color: var(--text-main); font-weight: 800; }
.usage-card-row-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.usage-card-row-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}
/* Warning / danger states — keep these so users see when limits are hit */
.usage-card-row.warning .usage-card-row-bar-fill { background: #f59e0b; }
.usage-card-row.warning .uc-num { color: #f59e0b; }

.usage-card-row.danger .usage-card-row-bar-fill { background: var(--negative-color); }
.usage-card-row.danger .uc-num { color: var(--negative-color); }

.usage-card-row.unlimited .usage-card-row-bar { display: none; }
.usage-card-row.unlimited .uc-limit { color: var(--text-main); font-weight: 800; }
.usage-card-row.unlimited .uc-sep { display: none; }
.usage-card-row.unlimited .uc-num { color: var(--text-main); }

.usage-card-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}
.usage-card-footer i { color: var(--text-muted); margin-right: 4px; }

/* Dark theme — keep the same flat look, just use a slightly recessed bg for rows */
[data-theme="dark"] .usage-card {
    background: var(--surface-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
[data-theme="dark"] .usage-card-row {
    background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .usage-card-row-bar {
    background: rgba(255, 255, 255, 0.06);
}

/* Responsive: stack to 1 column on very narrow phones */
@media (max-width: 360px) {
    .usage-card-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TRADE SOURCE PILL (View Trade modal)
   Cylindrical / capsule pill displayed directly below the
   Profit / Loss / Breakeven outcome tag in the trade header.
   Reads from [data-source="manual"|"mt5"|"upload"|"tradelocker"] and
   tints accordingly.
   ========================================================================= */
.tv-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 5px 13px 5px 8px;
    border-radius: 999px;            /* perfect cylinder / capsule */
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 0 0 2px rgba(255,255,255,0.02);
    line-height: 1;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.tv-source-pill::before {
    /* Status dot — colored by source for at-a-glance recognition */
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.tv-source-label {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--text-muted);
    text-transform: uppercase;
    opacity: 0.8;
}
.tv-source-value {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-main);
}

/* Source: manual — neutral slate (the default, no judgement) */
.tv-source-pill[data-source="manual"] {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.3);
    color: #64748b;
}
.tv-source-pill[data-source="manual"] .tv-source-value { color: #475569; }
[data-theme="dark"] .tv-source-pill[data-source="manual"] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}
[data-theme="dark"] .tv-source-pill[data-source="manual"] .tv-source-value { color: #cbd5e1; }

/* Source: mt5 — broker-blue (live connection) */
.tv-source-pill[data-source="mt5"] {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.4);
    color: #2563eb;
}
.tv-source-pill[data-source="mt5"] .tv-source-value { color: #1d4ed8; }
[data-theme="dark"] .tv-source-pill[data-source="mt5"] {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}
[data-theme="dark"] .tv-source-pill[data-source="mt5"] .tv-source-value { color: #93c5fd; }

/* Source: upload — amber (file import) */
.tv-source-pill[data-source="upload"] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.4);
    color: #d97706;
}
.tv-source-pill[data-source="upload"] .tv-source-value { color: #b45309; }
[data-theme="dark"] .tv-source-pill[data-source="upload"] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
[data-theme="dark"] .tv-source-pill[data-source="upload"] .tv-source-value { color: #fcd34d; }

/* Source: tradelocker — purple/pink gradient (matches TL connect UI) */
.tv-source-pill[data-source="tradelocker"] {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
    color: #7c3aed;
}
.tv-source-pill[data-source="tradelocker"] .tv-source-value { color: #6d28d9; }
[data-theme="dark"] .tv-source-pill[data-source="tradelocker"] {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
}
[data-theme="dark"] .tv-source-pill[data-source="tradelocker"] .tv-source-value { color: #c4b5fd; }

/* =========================================================================
   ADMIN: Source badges, table sorters, usage/limit mini-bars
   ========================================================================= */
.admin-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.admin-source-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.admin-source-badge.src-manual { background: rgba(100,116,139,0.12); color: #475569; }
.admin-source-badge.src-mt5     { background: rgba(37,99,235,0.12);  color: #1d4ed8; }
.admin-source-badge.src-upload  { background: rgba(245,158,11,0.12); color: #b45309; }
[data-theme="dark"] .admin-source-badge.src-manual { background: rgba(148,163,184,0.12); color: #cbd5e1; }
[data-theme="dark"] .admin-source-badge.src-mt5     { background: rgba(59,130,246,0.15);  color: #93c5fd; }
[data-theme="dark"] .admin-source-badge.src-upload  { background: rgba(245,158,11,0.15);  color: #fcd34d; }

/* Sortable column headers in admin tables */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important;
    transition: color 0.15s ease;
}
th.sortable:hover { color: var(--primary-color); }
th.sortable::after {
    content: '\f0dc';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.35;
}
th.sortable.sort-asc::after  { content: '\f0de'; opacity: 1; color: var(--primary-color); }
th.sortable.sort-desc::after { content: '\f0dd'; opacity: 1; color: var(--primary-color); }

/* Compact usage/limit mini-bars for the admin user profile */
.admin-usage-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 9px;
}
.admin-usage-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.admin-usage-row-top strong {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 800;
}
.admin-usage-row-bar {
    width: 100%;
    height: 5px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.admin-usage-row-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.5s ease;
}
.admin-usage-row.warn .admin-usage-row-bar-fill { background: #f59e0b; }
.admin-usage-row.full .admin-usage-row-bar-fill { background: var(--negative-color); }

/* =========================================================================
   ACCOUNT-CONFIGURATION USAGE ITEM
   The "Usage" row that lives inside the Account Configuration group
   on the Settings tab. Mimics the Trading Parameters trigger style.
   The plan badge (.usage-card-plan) is reused from the standalone card
   but sized down so it fits inline next to the chevron.
   ========================================================================= */
.settings-icon.purple {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}
[data-theme="dark"] .settings-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* When the plan badge sits inline in the trigger row (next to the chevron),
   give it slightly tighter padding so it doesn't crowd the icon. */
.usage-options-trigger .usage-card-plan {
    font-size: 0.6rem;
    padding: 3px 9px;
}

/* Premium-infinity state: the user is on Meow+ and this row is a truly
   unlimited resource (NOT mt5_accounts, which keeps its real X / Y cap).
   Hide the used-number and separator so only the infinity symbol shows. */
.usage-card-row.premium-infinity .uc-num,
.usage-card-row.premium-infinity .uc-sep {
    display: none !important;
}
.usage-card-row.premium-infinity .uc-limit {
    font-size: 1.05rem;
    line-height: 1;
}
.usage-card-row.premium-infinity .usage-card-row-bar {
    display: none;
}

/* Premium footer (gold-tinted "Enjoy your unlimited" line). The free
   footer keeps its default muted look via the existing rules. */
.usage-footer-premium {
    color: #f59e0b;
    font-weight: 700;
}
.usage-footer-premium i {
    color: #f59e0b !important;
}
[data-theme="dark"] .usage-footer-premium {
    color: #fbbf24;
}

/* =========================================================================
   REPORT GENERATOR — button on the Statistics/Analytics "Overview" header
   ========================================================================= */
.report-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}
.report-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); }
.report-btn:active { transform: translateY(0); }
[data-theme="dark"] .report-btn {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}
[data-theme="dark"] .report-btn:hover {
    background: rgba(57, 255, 20, 0.15);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.3);
}

/* Period toggle inside the modal — looks like the breakeven toggle */
.report-period-toggle, .report-orientation-toggle { background: var(--bg-color); }
.report-period-toggle .toggle-btn, .report-orientation-toggle .toggle-btn { font-size: 0.78rem; padding: 10px 4px; }
.report-period-toggle .toggle-btn.active, .report-orientation-toggle .toggle-btn.active {
    background: var(--surface-color);
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .report-period-toggle .toggle-btn.active,
[data-theme="dark"] .report-orientation-toggle .toggle-btn.active {
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.3);
    color: var(--primary-color);
}

/* Native date/week/month/year inputs need a slightly different padding
   so they align with the rest of the elevated form controls. */
.report-time-input {
    color-scheme: light dark;
    min-height: 44px;
}
[data-theme="dark"] .report-time-input {
    color-scheme: dark;
}

/* Download button disabled state */
#report-download-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.4);
}

/* =========================================================================
   REPORT CARD (rendered off-screen, captured to PNG by html2canvas)
   Report visual language: dark 9:16 canvas, neon-green accents.
   ========================================================================= */
.report-card {
    width: 540px;
    aspect-ratio: 9 / 16;
    position: relative;
    background-color: #070707;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(57, 255, 20, 0.05), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(57, 255, 20, 0.03), transparent 45%),
        radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.9);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'tnum' 1;
    -webkit-font-smoothing: antialiased;
}
.report-card-landscape {
    width: 960px;
    aspect-ratio: 16 / 9;
}
.report-card-landscape .report-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: 'top top' 'hero breakdown' 'hero primary' 'outcomes secondary' 'outcomes trades' 'bottom bottom';
    gap: 16px 36px;
    padding: 28px 36px;
}
.report-card-landscape .report-card-top { grid-area: top; margin: 0; }
.report-card-landscape .report-card-hero { grid-area: hero; align-self: center; margin: 0; padding: 12px 0; }
.report-card-landscape .report-card-hero-pnl { font-size: 64px; }
.report-card-landscape .report-card-wl-pair { grid-area: outcomes; align-self: start; margin: 0; }
.report-card-landscape .report-card-section-eyebrow { grid-area: breakdown; margin: 0; }
.report-card-landscape .report-card-tier-1 { grid-area: primary; margin: 0; padding: 16px 0; }
.report-card-landscape .report-card-tier-2 { grid-area: secondary; margin: 0; padding: 0 0 16px; }
.report-card-landscape .report-card-tier-3 { grid-area: trades; padding: 0; }
.report-card-landscape .report-card-bottom { grid-area: bottom; margin: 0; padding-top: 16px; }
.report-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(57, 255, 20, 0.012) 14px, rgba(57, 255, 20, 0.012) 15px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 14px, rgba(57, 255, 20, 0.012) 14px, rgba(57, 255, 20, 0.012) 15px);
    pointer-events: none;
    z-index: 0;
}
.report-card-watermark {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    opacity: 0.025;
    background-image: url('/static/images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    filter: blur(1px);
}
.report-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.report-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.report-card-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: lowercase;
}
.report-card-brand-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-image: url('/static/images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.5));
}
.report-card-brand .accent { color: #39ff14; }
.report-card-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #8a8a8a;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.report-card-eyebrow .dot {
    width: 5px; height: 5px;
    background: #39ff14;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.6);
}
.report-card-hero {
    text-align: center;
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.report-card-hero-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: #8a8a8a;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}
.report-card-hero-pnl {
    font-weight: 800;
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: -3px;
    color: #39ff14;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
}
.report-card-hero-pnl .currency {
    font-size: 30px;
    font-weight: 600;
    margin-right: 2px;
    opacity: 0.8;
}
.report-card-hero-pnl .cents {
    font-size: 24px;
    font-weight: 600;
    opacity: 0.55;
}
.report-card-hero-pnl.negative { color: #ff0055; }
.report-card-hero-sub {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #8a8a8a;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.report-card-hero-sub .up { color: #39ff14; font-weight: 700; font-family: 'Inter', sans-serif; }
.report-card-hero-sub .down { color: #ff0055; font-weight: 700; font-family: 'Inter', sans-serif; }

.report-card-wl-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 0 16px;
}
.report-card-cyl {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 50%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid #2a2a2a;
    position: relative;
}
.report-card-cyl .cyl-dot {
    width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
}
.report-card-cyl.win .cyl-dot { background: #39ff14; box-shadow: 0 0 5px rgba(57, 255, 20, 0.6); }
.report-card-cyl.be .cyl-dot { background: #a3a3a3; }
.report-card-cyl.loss .cyl-dot { background: #ff0055; box-shadow: 0 0 5px rgba(255, 0, 85, 0.6); }
.report-card-cyl .cyl-num { font-size: 12px; font-weight: 800; }
.report-card-cyl.win .cyl-num { color: #39ff14; }
.report-card-cyl.be .cyl-num { color: #ffffff; }
.report-card-cyl.loss .cyl-num { color: #ff0055; }
.report-card-cyl .cyl-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6px;
    letter-spacing: 1px;
    color: #8a8a8a;
    text-transform: uppercase;
    font-weight: 600;
}

.report-card-section-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 2.5px;
    color: #444444;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.report-card-section-eyebrow::before,
.report-card-section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #1f1f1f;
}

.report-card-tier-1 {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 14px;
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 1px solid #1f1f1f;
    margin-bottom: 16px;
}
.report-card-stat-side {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.report-card-stat-side .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #8a8a8a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.report-card-stat-side .val {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}
.report-card-stat-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.report-card-stat-center .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    color: #8a8a8a;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}
.report-card-stat-center .val {
    font-size: 42px;
    font-weight: 900;
    color: #39ff14;
    letter-spacing: -1.5px;
}
.report-card-stat-center .val .unit {
    font-size: 16px;
    color: rgba(57, 255, 20, 0.7);
    margin-left: 2px;
    font-weight: 700;
}
.report-card-stat-center .sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    color: #8a8a8a;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: 2px;
}

.report-card-tier-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1f1f1f;
    margin-bottom: 16px;
}
.report-card-stat-pair {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    align-items: center;
}
.report-card-stat-pair .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #8a8a8a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}
.report-card-stat-pair .val {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.report-card-tier-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.report-card-trade-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    position: relative;
    align-items: center;
    text-align: center;
}
.report-card-trade-pair::before {
    content: '';
    position: absolute;
    top: 0;
    width: 24px;
    height: 2px;
    background: #444444;
    left: 50%;
    transform: translateX(-50%);
}
.report-card-trade-pair.best::before { background: #39ff14; box-shadow: 0 0 6px rgba(57, 255, 20, 0.5); }
.report-card-trade-pair.worst::before { background: #ff0055; box-shadow: 0 0 6px rgba(255, 0, 85, 0.4); }
.report-card-trade-pair .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #8a8a8a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}
.report-card-trade-pair .val {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.report-card-trade-pair.best .val { color: #39ff14; }
.report-card-trade-pair.worst .val { color: #ff0055; }
.report-card-trade-pair .sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.5px;
    color: #444444;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-top: 2px;
}

.report-card-bottom {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.report-card-bottom-left { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.report-card-bottom-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #8a8a8a;
    text-transform: uppercase;
}
.report-card-bottom-month {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.report-card-bottom-month .year {
    color: rgba(57, 255, 20, 0.7);
    font-weight: 700;
    font-size: 18px;
}
.report-card-bottom-created {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    color: #444444;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 4px;
}
.report-card-bottom-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.report-card-bottom-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.report-card-bottom-handle .accent { color: #39ff14; }
.report-card-bottom-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-image: url('/static/images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.5));
    margin-top: 2px;
}

/* =========================================================================
   VIEW ENTRY MODAL (entry detailed view — mirrors the trade view modal
   styling but with daily/weekly color tints instead of profit/loss).
   ========================================================================= */
.ev-content { padding: 0 !important; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--bg-color); }
[data-theme="dark"] .ev-content { border: 1px solid var(--border-color); box-shadow: 0 -4px 16px rgba(0,0,0,0.4); contain: layout style paint; }

.ev-header {
    padding: 35px 20px 25px 20px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.3s ease;
}

/* Daily = amber tint, Weekly = purple tint */
.ev-header.daily   { background: rgba(245, 158, 11, 0.05); }
.ev-header.weekly  { background: rgba(139, 92, 246, 0.05); }

[data-theme="dark"] .ev-header.daily  { background: rgba(245, 158, 11, 0.04); border-bottom-color: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .ev-header.weekly { background: rgba(139, 92, 246, 0.04); border-bottom-color: rgba(139, 92, 246, 0.18); }

.ev-close-btn {
    position: absolute; top: 15px; right: 15px; width: 32px; height: 32px;
    border-radius: 50%; background: var(--surface-color) !important; color: var(--text-main);
    border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; transition: background 0.2s ease, color 0.2s ease;
}
.ev-close-btn:hover { background: var(--border-color) !important; }

.ev-top-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; }
.ev-top-row h2 { font-size: 1.55rem; font-weight: 800; margin: 0; color: var(--text-main); letter-spacing: -0.5px; }
#ev-icon-wrapper {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ev-header.daily #ev-icon-wrapper  { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.ev-header.weekly #ev-icon-wrapper { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

.ev-badge { font-size: 0.65rem; font-weight: 800; padding: 4px 8px; border-radius: 6px; letter-spacing: 0.5px; }
.ev-badge.daily  { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); }
.ev-badge.weekly { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.25); }

[data-theme="dark"] .ev-badge.daily  { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
[data-theme="dark"] .ev-badge.weekly { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); }

.ev-meta-section { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#ev-date-display { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -0.6px; color: var(--text-main); }

.ev-mood-pill {
    font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 20px;
    background: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-main);
    display: inline-flex; align-items: center; gap: 6px;
}

.ev-body { padding: 20px; background: var(--bg-color); }
.ev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }

.ev-card {
    background: var(--surface-color); padding: 16px; border-radius: 12px;
    border: 1px solid var(--border-color); display: flex; flex-direction: column;
    justify-content: center; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="dark"] .ev-card { box-shadow: none; }

.ev-card::before {
    content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
    background: var(--border-color); opacity: 0.7; border-radius: 4px 0 0 4px;
}
.ev-header.daily ~ .ev-body .ev-card::before  { background: #f59e0b; opacity: 0.55; }
.ev-header.weekly ~ .ev-body .ev-card::before { background: #8b5cf6; opacity: 0.55; }

.ev-card span { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; }
.ev-card strong { font-size: 0.95rem; color: var(--text-main); font-weight: 800; z-index: 1; letter-spacing: -0.2px; }
.ev-card-icon { position: absolute; right: -8px; bottom: -8px; font-size: 2.5rem; opacity: 0.04; z-index: 0; }
[data-theme="dark"] .ev-card-icon { opacity: 0.07; }

.ev-notes-section { background: var(--surface-color); padding: 18px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
[data-theme="dark"] .ev-notes-section { box-shadow: none; }
.ev-notes-section label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.ev-notes-section label i { opacity: 0.7; }
.ev-notes-section p { font-size: 0.95rem; color: var(--text-main); line-height: 1.65; margin: 0; font-weight: 500; }

/* =========================================================================
   SMALL ICON-ONLY "Clear All Entries" BUTTON (sits next to All/Daily/Weekly)
   ========================================================================= */
.clear-all-entries-icon-btn {
    width: 36px; height: 36px; padding: 0;
    background: transparent;
    color: var(--negative-color);
    border: 1px solid var(--negative-color);
    border-radius: 8px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    font-size: 0.85rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
    flex-shrink: 0;
}
.clear-all-entries-icon-btn:hover {
    background: var(--negative-color);
    color: #ffffff;
    transform: translateY(-1px);
}
.clear-all-entries-icon-btn:active { transform: translateY(0); }
.clear-all-entries-icon-btn:disabled { cursor: not-allowed; opacity: 0.6; transform: none; }
[data-theme="dark"] .clear-all-entries-icon-btn:hover { color: #121212; }

/* Entry item hover affordance — make it obvious the whole row is clickable */
.entry-item:hover { background: rgba(0, 0, 0, 0.025) !important; }
[data-theme="dark"] .entry-item:hover { background: rgba(255, 255, 255, 0.03) !important; }
.entry-item .trade-actions i { transition: color 0.2s ease, transform 0.15s ease; }
.entry-item .trade-actions i:hover { transform: scale(1.15); }
.entry-item .trade-actions .view-entry-btn:hover { color: var(--primary-color) !important; }


/* =========================================================================
   USAGE MODAL — Premium redesign
   ========================================================================= */
.um-content {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 24px;
}

/* ---- HERO HEADER ---- */
.um-hero {
    position: relative;
    padding: 28px 22px 22px;
    background:
        radial-gradient(ellipse 80% 100% at 0% 0%, rgba(57, 255, 20, 0.10), transparent 60%),
        radial-gradient(ellipse 80% 100% at 100% 100%, rgba(57, 255, 20, 0.06), transparent 60%),
        var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.um-hero::after {
    /* subtle top hairline glow */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.35), transparent);
}
.um-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    padding: 0;
}
.um-close-btn:hover {
    background: var(--negative-color) !important;
    color: #ffffff !important;
    border-color: var(--negative-color);
    transform: rotate(90deg);
}
.um-hero-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.um-logo-medallion {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-image: url('/static/images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.um-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.um-hero-text h3 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
    line-height: 1.1;
}
.um-hero-text p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-plan-chip {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(57, 255, 20, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(57, 255, 20, 0.25);
    align-self: flex-start;
}
.um-plan-chip.unlimited {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border-color: transparent;
}

/* ---- BODY ---- */
.um-body {
    padding: 20px 18px 18px;
    max-height: 60vh;
    overflow-y: auto;
}
.um-body::-webkit-scrollbar { width: 5px; }
.um-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* ---- SECTION HEAD ---- */
.um-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 4px;
}
.um-section-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
    flex-shrink: 0;
}
.um-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}
.um-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-color), transparent);
}

/* ---- LIST ---- */
.um-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- ROW ---- */
.um-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 9px;
    padding: 12px 14px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.um-row:hover {
    border-color: rgba(57, 255, 20, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Icon chip — colored by data-icon-color attribute */
.um-icon-chip {
    grid-row: 1;
    grid-column: 1;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.um-row[data-icon-color="primary"] .um-icon-chip {
    background: rgba(22, 163, 74, 0.12);
    color: var(--primary-color);
}
.um-row[data-icon-color="amber"] .um-icon-chip {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.um-row[data-icon-color="blue"] .um-icon-chip {
    background: rgba(37, 99, 235, 0.12);
    color: #3b82f6;
}
.um-row[data-icon-color="violet"] .um-icon-chip {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}
.um-row[data-icon-color="emerald"] .um-icon-chip {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.um-row-text {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.um-row-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.um-row-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.um-row-count {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.um-row-count .uc-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}
.um-row-count .uc-sep {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.6;
    margin: 0 2px;
}
.um-row-count .uc-limit {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}
.um-row-count .uc-inf {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-color);
}
.um-pct {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-color);
    padding: 3px 6px;
    border-radius: 6px;
    margin-left: 6px;
    line-height: 1;
    border: 1px solid var(--border-color);
}

/* Progress bar */
.um-bar {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    height: 6px;
    background: var(--bg-color);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.um-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), rgba(57, 255, 20, 0.7));
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

/* Warning / danger / unlimited states */
.um-row.warning { border-color: rgba(245, 158, 11, 0.35); }
.um-row.warning .um-bar-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.um-row.warning .uc-num { color: #f59e0b; }
.um-row.warning .um-pct { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); }

.um-row.danger { border-color: rgba(239, 68, 68, 0.4); }
.um-row.danger .um-bar-fill { background: linear-gradient(90deg, var(--negative-color), #fb7185); }
.um-row.danger .uc-num { color: var(--negative-color); }
.um-row.danger .um-pct { color: var(--negative-color); border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); }

.um-row.unlimited .um-bar { display: none; }
.um-row.unlimited .um-pct { display: none; }
.um-row.unlimited .uc-sep { display: none; }
.um-row.unlimited .uc-num { display: none; }
.um-row.unlimited .uc-limit { color: var(--primary-color); font-size: 1.3rem; }
.um-row.premium-infinity .uc-num,
.um-row.premium-infinity .uc-sep { display: none; }

/* ---- FOOTER CARD ---- */
.um-footer-card {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.06), rgba(57, 255, 20, 0.02));
    border: 1px solid rgba(57, 255, 20, 0.15);
    border-radius: 14px;
}
.um-footer-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(57, 255, 20, 0.12);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.um-footer-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.um-footer-text strong {
    color: var(--text-main);
    font-weight: 800;
}

/* ---- DARK THEME TUNING ---- */
[data-theme="dark"] .um-hero {
    background:
        radial-gradient(ellipse 80% 100% at 0% 0%, rgba(57, 255, 20, 0.08), transparent 60%),
        radial-gradient(ellipse 80% 100% at 100% 100%, rgba(57, 255, 20, 0.04), transparent 60%),
        #18181b;
}
[data-theme="dark"] .um-row {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .um-bar {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .um-icon-chip {
    border: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .um-pct {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 380px) {
    .um-hero { padding: 24px 18px 18px; }
    .um-body { padding: 16px 14px; }
    .um-row { padding: 11px 12px; column-gap: 10px; }
    .um-icon-chip { width: 34px; height: 34px; font-size: 0.85rem; }
    .um-row-label { font-size: 0.85rem; }
    .um-hero-text h3 { font-size: 1.3rem; }
}

/* =========================================================================
   SCREENSHOT UPLOAD PROGRESS (shown while R2 upload is in flight)
   ========================================================================= */
/* IMPORTANT: the `hidden` HTML attribute must always win over the
   `display: flex` rule below. `[hidden] { display: none }` has lower
   specificity than a class selector, so we force it with !important —
   otherwise the progress bar would be visible at all times, even when
   no upload is running. */
.screenshot-upload-progress[hidden] {
    display: none !important;
}
.screenshot-upload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(22, 163, 74, 0.08);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(22, 163, 74, 0.2);
}
[data-theme="dark"] .screenshot-upload-progress {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.25);
}
.screenshot-upload-progress i {
    font-size: 0.85rem;
}
.screenshot-upload-progress-text {
    line-height: 1;
}

/* Pending thumbnails get a subtle amber ring so the user can tell which
   ones are about to be uploaded vs which ones are already saved. */
.screenshot-thumb-pending {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
[data-theme="dark"] .screenshot-thumb-pending {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}
.screenshot-thumb-pending::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(245, 158, 11, 0.18));
    pointer-events: none;
}

/* =========================================================================
   VIEW TRADE — SCREENSHOTS GALLERY
   ========================================================================= */
/* Inherits .tv-notes-section aesthetic so the gallery visually pairs with
   the Journal Notes block directly above it. */
.tv-screenshots-section {
    background: var(--surface-color);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="dark"] .tv-screenshots-section { box-shadow: none; }
.tv-screenshots-section label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.tv-screenshots-section label i { opacity: 0.7; }

/* Gallery uses auto-fill minmax so tiles wrap responsively. Images keep
   their natural aspect ratio (no aspect-ratio / object-fit: cover) so
   portrait, landscape, and square screenshots all render correctly. */
.tv-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.tv-screenshot-img {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    cursor: zoom-in;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    /* No aspect-ratio, no fixed height — image flows at its natural ratio. */
}
.tv-screenshot-img:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.tv-screenshot-img img {
    display: block;
    width: 100%;
    height: auto;          /* preserve natural ratio */
    max-height: 60vh;      /* guardrail: never taller than viewport */
}

/* =========================================================================
   VIEW ENTRY — SCREENSHOTS GALLERY (Daily / Weekly journal view)
   ========================================================================= */
.ev-screenshots-section {
    background: var(--surface-color);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
[data-theme="dark"] .ev-screenshots-section { box-shadow: none; }
.ev-screenshots-section label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.ev-screenshots-section label i { opacity: 0.7; }

/* Same flexible layout as View Trade — natural image ratio, no crop. */
.ev-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.ev-screenshot-img {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    cursor: zoom-in;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    /* No aspect-ratio, no fixed height — image flows at its natural ratio. */
}
.ev-screenshot-img:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.ev-screenshot-img img {
    display: block;
    width: 100%;
    height: auto;          /* preserve natural ratio */
    max-height: 60vh;      /* guardrail: never taller than viewport */
}

/* On small screens (< 420px), shrink the gallery tiles to 2-up so they
   stay tappable without horizontal scrolling. */
@media (max-width: 420px) {
    .tv-screenshots-grid,
    .ev-screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* =========================================================================
   SCREENSHOT LIGHTBOX (in-page viewer, z-index 15000)
   ========================================================================= */
/* IMPORTANT: `hidden` must always win over `display: flex` below. */
.screenshot-lightbox[hidden] {
    display: none !important;
}
.screenshot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Blurred, darkened backdrop — the underlying View Trade / View
       Entry modal stays open behind this and is just visually dimmed. */
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: lightbox-fade-in 0.18s ease;
    cursor: zoom-out;
}
@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.screenshot-lightbox-stage {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    cursor: default;     /* the image itself doesn't close */
}
.screenshot-lightbox-stage img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    background: var(--surface-color, #fff);
}
.screenshot-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.12s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.screenshot-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}
/* On small screens, give the image more room. */
@media (max-width: 600px) {
    .screenshot-lightbox { padding: 12px; }
    .screenshot-lightbox-stage img,
    .screenshot-lightbox-stage {
        max-width: 96vw;
        max-height: 82vh;
    }
    .screenshot-lightbox-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

/* =========================================================================
   SCREENSHOT LIGHTBOX — ZOOM STATE
   ========================================================================= */
/* When zoomed in, the image gets a grab cursor and a transform-origin
   that follows the user's pinch/focus point so the zoom feels natural. */
.screenshot-lightbox-stage img.zoomed {
    cursor: grab;
    transition: none;  /* disable transitions during pan for 1:1 tracking */
}
.screenshot-lightbox-stage img.zoomed:active {
    cursor: grabbing;
}

/* Zoom badge (top-left of the stage). Shows current zoom percentage. */
.screenshot-lightbox-zoom-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}

/* Hint at the bottom — fades out after first interaction. */
.screenshot-lightbox-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}
.screenshot-lightbox-hint.faded {
    opacity: 0;
}

/* =========================================================================
   PREMIUM-LOCKED OPTIONS (crown + low opacity, not hidden)
   ========================================================================= */
/* Applied to timeframe options / report period buttons that require
   premium. Free users see them dimmed with a crown icon so they know
   the feature exists but isn't available on their plan. */
.premium-locked {
    opacity: 0.45;
    cursor: not-allowed !important;
    position: relative;
    pointer-events: auto;  /* keep clickable so we can show upgrade prompt */
}
.premium-locked.active {
    opacity: 0.6;  /* slightly brighter if somehow selected */
}
.premium-crown {
    color: #ffd700;
    font-size: 0.7em;
    margin-left: 4px;
    vertical-align: middle;
}
/* When the user IS premium, the crown stays but the lock styling
   is removed so the option looks normal. */
body.is-premium .premium-locked {
    opacity: 1;
    cursor: pointer !important;
}
body.is-premium .premium-locked .premium-crown {
    display: none;  /* hide the crown for premium users */
}

/* When the current tab unlocks 'This Year' / 'All Time' for free
   users (trades / trade analytics / entries), remove the lock
   styling so the options look normal. The server returns full
   history on these tabs, so the cap doesn't apply here. */
body.timeframe-unlocked .premium-locked {
    opacity: 1;
    cursor: pointer !important;
}
body.timeframe-unlocked .premium-locked .premium-crown {
    display: none;
}


/* Keep entry sheets light on mobile: fade without moving a full form layer. */
:is(#daily-entry-modal, #weekly-entry-modal, #view-entry-modal) {
    will-change: auto;
    transition: opacity 0.14s ease-out, visibility 0.14s ease-out;
}
:is(#daily-entry-modal, #weekly-entry-modal, #view-entry-modal) .modal-content {
    transform: none;
    will-change: auto;
    transition: opacity 0.14s ease-out;
}
.entry-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.entry-pagination span { font-size: 0.8rem; color: var(--text-muted); }
.entry-pagination button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); color: var(--text-main); cursor: pointer; }
.entry-pagination button:disabled { opacity: 0.4; cursor: default; }
@media (prefers-reduced-motion: reduce) {
    :is(#daily-entry-modal, #weekly-entry-modal, #view-entry-modal),
    :is(#daily-entry-modal, #weekly-entry-modal, #view-entry-modal) .modal-content { transition: none; }
}

/* ================= TRADING PROFILES (Settings) ================= */
.profiles-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 10px 10px; }
.profiles-heading-title { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.8rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.profiles-heading-title i { color:var(--primary-color); font-size:.78rem; }
.profiles-heading-right { display:flex; align-items:center; gap:8px; }
.profiles-count-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--border-color); border-radius:999px; background:var(--surface-color); color:var(--text-muted); font-size:.72rem; font-weight:800; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.profiles-info-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border-color); background:var(--surface-color); color:var(--text-muted); cursor:pointer; font-size:.78rem; display:flex; align-items:center; justify-content:center; padding:0; transition:color .2s ease, border-color .2s ease; }
.profiles-info-btn:hover { color:var(--primary-color); border-color:rgba(22,163,74,.5); }
[data-theme="dark"] .profiles-info-btn:hover { border-color:rgba(57,255,20,.45); }
.page-heading { min-width:0; }
#active-profile-label { display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; line-height:1.3; color:var(--text-muted); }
.profiles-panel { padding:18px; width:100%; box-sizing:border-box; }
.profiles-description { display:flex; align-items:flex-start; gap:8px; color:var(--text-muted); font-size:.82rem; line-height:1.55; margin:0 0 12px; }
.profiles-description i { margin-top:3px; font-size:.8rem; color:var(--primary-color); opacity:.85; }
.trading-profile-tile { flex-shrink:0; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; color:var(--primary-color); background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.18); user-select:none; }
[data-theme="dark"] .trading-profile-tile { background:rgba(57,255,20,.1); border-color:rgba(57,255,20,.25); text-shadow:0 0 12px rgba(57,255,20,.35); }
.trading-profile-tile.pd-option-tile { width:30px; height:30px; border-radius:9px; font-size:.8rem; }
.pd-add-tile { color:var(--primary-color); }
.pd-trigger { display:flex; align-items:center; gap:11px; width:100%; padding:11px 13px; border:1px solid var(--border-color); border-radius:13px; background:var(--bg-color); cursor:pointer; font:inherit; text-align:left; transition:border-color .2s ease; }
.pd-trigger:hover { border-color:rgba(22,163,74,.5); }
[data-theme="dark"] .pd-trigger:hover { border-color:rgba(57,255,20,.4); }
.pd-trigger-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pd-trigger-text strong { font-size:.95rem; font-weight:800; color:var(--text-main); overflow-wrap:anywhere; }
.pd-trigger-text small { font-size:.72rem; font-weight:700; color:var(--primary-color); letter-spacing:.2px; display:flex; align-items:center; gap:5px; }
.pd-trigger-text small::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--primary-color); box-shadow:0 0 0 3px rgba(22,163,74,.18); }
[data-theme="dark"] .pd-trigger-text small::before { box-shadow:0 0 0 3px rgba(57,255,20,.15); }
.pd-chevron { color:var(--text-muted); font-size:.8rem; transition:transform .25s ease; }
.pd-chevron.open { transform:rotate(180deg); }
.pd-menu { margin-top:8px; background:var(--surface-color); border:1px solid var(--border-color); border-radius:13px; box-shadow:0 6px 20px rgba(15,23,42,.1); max-height:280px; overflow-y:auto; padding:6px; animation:pdMenuIn .18s ease; }
@keyframes pdMenuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
[data-theme="dark"] .pd-menu { box-shadow:0 12px 32px rgba(0,0,0,.5); }
.pd-option { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--border-color); background:#f8fafc; cursor:pointer; }
[data-theme="dark"] .pd-option { background:#121212; }
.pd-option.active { border-color:rgba(22,163,74,.55); background:rgba(22,163,74,.08); }
[data-theme="dark"] .pd-option.active { border-color:rgba(57,255,20,.45); background:rgba(57,255,20,.06); }
.pd-option-name { flex:1; min-width:0; font-size:.9rem; font-weight:700; color:var(--text-main); overflow-wrap:anywhere; }
.pd-add-option { border-top:1px dashed var(--border-color); border-radius:0 0 9px 9px; margin-top:4px; padding-top:11px; }
.pd-add-option .pd-option-name { color:var(--primary-color); }
.pd-lock-icon { color:var(--text-muted); font-size:.8rem; flex-shrink:0; }
.pd-option.locked { opacity:.55; cursor:not-allowed; }
.pd-option.locked .pd-option-name { color:var(--text-muted); }
.profiles-note { display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; font-size:.76rem; color:var(--text-muted); line-height:1.5; }
.profiles-note i { margin-top:2px; font-size:.72rem; color:#f59e0b; }
.pd-rename-btn, .pd-delete-btn { border:none; background:transparent; cursor:pointer; padding:7px; border-radius:7px; font-size:.8rem; }
.pd-rename-btn { color:var(--primary-color); }
.pd-delete-btn { color:var(--negative-color, #ef4444); }
.pd-edit-row { display:flex; flex-direction:column; gap:8px; width:100%; }
.pd-edit-row input { width:100%; box-sizing:border-box; border:1.5px solid var(--primary-color); border-radius:10px; background:var(--bg-color); color:var(--text-main); padding:10px 12px; font:inherit; font-size:.9rem; outline:none; }
.pd-edit-btns { display:flex; gap:8px; width:100%; }
.pd-edit-save, .pd-edit-cancel { flex:1; border-radius:9px; padding:9px 0; font:inherit; font-size:.85rem; font-weight:800; cursor:pointer; }
.pd-edit-save { border:none; background:var(--primary-color); color:#fff; }
[data-theme="dark"] .pd-edit-save { color:#000; }
.pd-edit-cancel { border:1px solid var(--border-color); background:transparent; color:var(--text-main); }
.pd-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.55); display:flex; justify-content:center; align-items:flex-end; opacity:0; visibility:hidden; transition:opacity .2s ease-out, visibility .2s ease-out; }
.pd-modal-overlay.open { opacity:1; visibility:visible; }
.pd-modal { width:calc(100% - 28px); max-width:400px; margin-bottom:18px; background:var(--surface-color); border:1px solid var(--border-color); border-radius:20px; padding:22px 20px; text-align:center; transform:translateY(24px); opacity:0; transition:transform .22s ease-out, opacity .22s ease-out; }
.pd-modal-overlay.open .pd-modal { transform:none; opacity:1; }
.pd-modal-icon { width:52px; height:52px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--negative-color, #ef4444); background:rgba(239,68,68,.12); }
.pd-modal h3 { margin:0 0 10px; font-size:1.1rem; color:var(--text-main); }
.pd-modal-name { margin:0 0 8px; font-size:.88rem; color:var(--text-muted); line-height:1.5; }
.pd-modal-name strong { color:var(--text-main); }
.pd-modal-warning { margin:0 0 14px; font-size:.82rem; color:var(--text-muted); line-height:1.55; }
.pd-modal-warning strong { color:var(--negative-color, #ef4444); }
.pd-modal input { width:100%; box-sizing:border-box; border:1.5px solid rgba(239,68,68,.45); border-radius:10px; background:var(--bg-color); color:var(--text-main); padding:11px 13px; font:inherit; font-size:.9rem; text-align:center; outline:none; }
.pd-modal input:focus { box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.pd-modal-error { display:none; margin:8px 0 0; font-size:.78rem; color:var(--negative-color, #ef4444); }
.pd-modal-btns { display:flex; gap:10px; margin-top:14px; }
#pd-delete-modal .btn-cancel, #pd-delete-modal .btn-save { flex:1; box-sizing:border-box; padding:12px 0; font:inherit; font-size:.9rem; font-weight:800; border-radius:11px; margin:0; box-shadow:none; text-align:center; }
#pd-delete-modal .btn-cancel { background:var(--bg-color); color:var(--text-main); border:1px solid var(--border-color); }
#pd-delete-modal .btn-save { background:var(--negative-color, #ef4444); color:#fff; border:none; }
#pd-delete-modal .btn-save:disabled { opacity:.45; cursor:default; }
/* Delete Account popup: same equal-size Cancel / Delete pair */
#delete-account-modal .btn-cancel, #delete-account-modal .btn-save { flex:1; box-sizing:border-box; padding:12px 0; font:inherit; font-size:.9rem; font-weight:800; border-radius:11px; margin:0; box-shadow:none; text-align:center; }
#delete-account-modal .btn-cancel { background:var(--bg-color); color:var(--text-main); border:1px solid var(--border-color); }
#delete-account-modal .btn-save { background:var(--negative-color, #ef4444); color:#fff; border:none; }

.profiles-upgrade { margin-top:10px; font-size:.8rem; color:var(--text-muted); line-height:1.5; }
.pd-upgrade-link, .pd-upgrade-link:visited, .pd-upgrade-link:hover, .pd-upgrade-link:active { color:var(--primary-color); font-weight:800; text-decoration:none; border-bottom:1px solid rgba(22,163,74,.4); padding-bottom:1px; }
[data-theme="dark"] .pd-upgrade-link, [data-theme="dark"] .pd-upgrade-link:visited { border-bottom-color:rgba(57,255,20,.4); }
.profiles-panel :focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }


.desktop-trades-head { display: none; }
@media (min-width: 1100px) {
    #page-trades .desktop-trades-head, #page-trades .trade-item { display: grid; grid-template-columns: 44px minmax(100px, .8fr) minmax(180px, 1.2fr) 110px 90px; gap: 16px; align-items: center; }
    #page-trades .desktop-trades-head { padding: 8px 0 14px; color: var(--text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
    #page-trades .desktop-trades-head > :first-child { grid-column: 1 / 3; }
    #page-trades .trade-info-left, #page-trades .trade-details, #page-trades .trade-item > div:last-child { display: contents !important; }
    #page-trades .trade-details h4 { margin: 0; }
    #page-trades .trade-pnl { justify-content: flex-end; font-size: .9rem; }
    #page-trades .desktop-trades-head > :nth-child(3) { text-align: right; }
    #page-trades .trade-actions { justify-content: flex-end; }
}

.subscriptions-label { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
#web-checkout-dialog { width: min(580px, calc(100% - 24px)); max-height: 90dvh; overflow-y: auto; margin: auto; padding: 28px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--bg-color); color: var(--text-main); }
#web-checkout-dialog::backdrop { background: rgba(0,0,0,.75); }
#web-checkout-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#web-checkout-dialog h2 { font-size: 1.5rem; margin-top: 6px; }
#web-checkout-dialog .checkout-eyebrow { color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
#close-web-checkout { background: none; border: 0; color: inherit; font-size: 2rem; cursor: pointer; padding: 4px 10px; }
#web-checkout-plan { margin: 18px 0 24px; padding: 16px; border-radius: 12px; background: var(--card-bg); color: var(--text-main); font-size: .95rem; font-weight: 600; }
.checkout-methods { border: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.checkout-methods legend { font-size: .8rem; font-weight: 600; margin-bottom: 10px; }
.checkout-method { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.checkout-method:has(input:checked) { border-color: var(--positive-color); box-shadow: inset 0 0 0 1px var(--positive-color); }
.checkout-method input { accent-color: var(--positive-color); width: 18px; height: 18px; flex-shrink: 0; }
.checkout-method span { flex: 1; min-width: 0; display: grid; gap: 6px; overflow-wrap: anywhere; }
.checkout-method small { color: var(--text-muted); font-size: .8rem; }
.checkout-method b { font-size: 1.15rem; margin-top: 6px; letter-spacing: -.02em; }
.checkout-method i { color: var(--text-muted); }
.checkout-currency-row { display: grid; gap: 8px; padding: 0 18px 4px 46px; }
.checkout-currency-row[hidden] { display: none; }
.checkout-currency-row label { font-size: .85rem; font-weight: 600; }
.checkout-currency-row select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); color: var(--text-main); font: inherit; }
.checkout-currency-row small { color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
#web-checkout-explanation, .checkout-footnote { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 20px 0; }
#web-checkout-status { font-size: .85rem; margin-bottom: 12px; min-height: 1.4em; }
#web-checkout-continue { width: 100%; padding: 14px; border: 0; border-radius: 10px; background: #39ff14; color: #000; font-weight: 700; cursor: pointer; }
#web-checkout-continue:disabled { opacity: .5; cursor: wait; }
#web-checkout-dialog :is(button, input, select):focus-visible { outline: 2px solid var(--text-main); outline-offset: 4px; }
@media (max-width: 540px) {
  #web-checkout-dialog { padding: 20px; }
  #web-checkout-dialog h2 { font-size: 1.3rem; }
  .checkout-method { padding: 14px; gap: 10px; min-height: 96px; }
}
.subscriptions-description { display: block; font-size: 0.8rem; color: var(--text-muted); }
#web-billing-controls:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#web-billing-controls select, #web-billing-controls button { padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--text-main); }
#web-billing-controls button { cursor: pointer; }
#subscriptions-dialog {
  --neon: var(--primary-color, #39ff14);
  color: var(--text-main); background: var(--bg-color); border: 1px solid var(--border-color);
  border-radius: 20px; width: min(720px, calc(100% - 24px)); max-height: 90dvh;
  margin: auto; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
}
#subscriptions-dialog::backdrop { background: rgba(0,0,0,.7); }
#subscriptions-dialog .subscriptions-toolbar { position: sticky; top: -24px; z-index: 2; background: var(--bg-color); margin: -24px -24px 16px; padding: 16px 24px 8px; border-bottom: 1px solid var(--border-color); }
#subscriptions-dialog .subscriptions-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#subscriptions-dialog h2 { font-size: 1.4rem; }
#subscriptions-dialog #close-subscriptions { background: none; color: inherit; border: none; font-size: 2rem; cursor: pointer; padding: 4px 12px; }
#subscription-status { margin: 0; padding: 8px 0; font-weight: 600; }
#subscriptions-dialog .subscription-note { color: var(--text-muted); font-size: .8rem; line-height: 1.5; margin-bottom: 20px; }
#subscriptions-dialog .billing-toggle { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 24px 0; }
#subscriptions-dialog .toggle-label { color: var(--text-muted); font-size: .85rem; }
#subscriptions-dialog .toggle-label.active { color: var(--text-main); font-weight: 700; }
#subscriptions-dialog .save-badge { font-size: .7rem; color: var(--positive-color); }
#subscriptions-dialog .switch { position: relative; width: 46px; height: 26px; display: inline-block; }
#subscriptions-dialog .switch input { width: 100%; height: 100%; opacity: 0; position: absolute; z-index: 1; cursor: pointer; }
#subscriptions-dialog .slider { position: absolute; inset: 0; background: var(--border-color); border-radius: 20px; pointer-events: none; }
#subscriptions-dialog .slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--text-main); border-radius: 50%; transition: transform .15s; }
#subscriptions-dialog input:checked + .slider::before { transform: translateX(20px); background: #39ff14; }
#subscriptions-dialog input:focus-visible + .slider { outline: 2px solid var(--text-main); outline-offset: 3px; }
#subscriptions-dialog .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
#subscriptions-dialog .price-card { background: var(--card-bg, var(--bg-color)); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; position: relative; }
#subscriptions-dialog .price-card.popular { border-color: var(--positive-color); }
#subscriptions-dialog .popular-badge { color: var(--positive-color); font-size: .75rem; margin-bottom: 8px; }
#subscriptions-dialog .tier-name { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
#subscriptions-dialog .tier-desc, #subscriptions-dialog .billing-subtext { font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
#subscriptions-dialog .price-box { margin: 18px 0 8px; }
#subscriptions-dialog .amount { font-size: 2.4rem; font-weight: 800; }
#subscriptions-dialog .original-amount { display: none; text-decoration: line-through; color: var(--text-muted); }
#subscriptions-dialog .billing-period { font-size: .8rem; }
#subscriptions-dialog .btn-tier { width: 100%; padding: 12px; background: #39ff14; color: #000; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
#subscriptions-dialog .btn-tier:disabled { opacity: .5; cursor: wait; }
#subscriptions-dialog .features-list { display: grid; gap: 12px; margin-top: 20px; font-size: .8rem; }
#subscriptions-dialog .feature-item { display: flex; gap: 8px; }
#subscriptions-dialog .feature-item i { color: var(--positive-color); }
#subscriptions-dialog .compare-section { margin-top: 24px; }
#subscriptions-dialog .compare-title { font-size: 1.1rem; margin-bottom: 12px; }
#subscriptions-dialog .table-wrap { overflow-x: auto; }
#subscriptions-dialog .compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
#subscriptions-dialog th, #subscriptions-dialog td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--border-color); }
@media (max-width: 540px) {
  #subscriptions-dialog { padding: 16px; }
  #subscriptions-dialog .subscriptions-toolbar { top: -16px; margin: -16px -16px 16px; padding: 12px 16px 8px; }
  #subscriptions-dialog .pricing-grid { grid-template-columns: 1fr; }
}

/* Portrait plan cards with an optional full comparison. */
#subscriptions-dialog .price-card { display: flex; flex-direction: column; min-width: 0; }
#subscriptions-dialog .plan-overview { display: flex; flex-direction: column; flex: 1; }
#subscriptions-dialog .plan-overview .btn-tier { margin-top: auto; }
#subscriptions-dialog .btn-tier.current-plan:disabled { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); opacity: 1; cursor: default; }
#subscriptions-dialog .compare-title { cursor: pointer; padding: 14px 0; margin: 0; font-weight: 600; }
#subscriptions-dialog .compare-section { border-top: 1px solid var(--border-color); }
#subscriptions-dialog .compare-title:focus-visible { outline: 2px solid var(--text-main); outline-offset: 4px; }
#subscriptions-dialog .compare-section[open] .table-wrap { margin-top: 4px; }
.current-subscription { padding:24px; margin-bottom:20px; border:1px solid var(--border-color); border-radius:16px; background:var(--card-bg,var(--bg-color)); }
.current-subscription-label { font-size:.75rem; color:var(--text-muted); }
.current-subscription h3 { font-size:1.6rem; margin:8px 0; }
#current-subscription-description,#subscription-status,.subscription-support-note { font-size:.85rem; line-height:1.6; color:var(--text-muted); }
#current-subscription-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:22px 0; }
#current-subscription-details[hidden],.subscription-support-note[hidden] { display:none; }
#current-subscription-details dt { font-size:.75rem; color:var(--text-muted); margin-bottom:5px; }
#current-subscription-details dd { margin:0; font-size:.9rem; overflow-wrap:anywhere; }
#web-billing-cancel { border:1px solid var(--border-color); border-radius:9px; background:transparent; color:var(--text-main); padding:10px 16px; cursor:pointer; margin-bottom:12px; }
.subscription-support-note { margin-top:16px; padding-top:16px; border-top:1px solid var(--border-color); }
.subscription-support-note a { color:var(--positive-color); }
@media(max-width:600px) { .current-subscription { padding:18px; } #current-subscription-details { grid-template-columns:1fr; gap:14px; } }

/* Layout only. Colors, surfaces, type, and phone styles come from app.css. */
.workspace-brand, .home-section-description, .home-desktop-summary { display: none; }
.workspace-account { display: none; }
.settings-section { display: contents; }

@media (min-width: 768px) {
    #android-app-container {
        max-width: none;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-rows: var(--header-height) minmax(0, 1fr);
    }
    #app-header { grid-column: 2; grid-row: 1; min-width: 0; padding-inline: 20px; }
    #app-header .app-logo { display: none; }
    #active-profile-label { display: block; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #app-content { grid-column: 2; grid-row: 2; min-width: 0; padding: 24px; }
    #app-content > .page-container > .fade-in { max-width: 1320px; margin-inline: auto; }
    #bottom-nav {
        grid-column: 1; grid-row: 1 / 3; width: auto; height: auto; min-height: 0;
        padding: 18px 7px; border-top: 0; border-right: 1px solid var(--border-color);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
        overflow-y: auto;
    }
    .workspace-brand { display: flex; justify-content: center; align-items: center; margin-bottom: 23px; min-height: 44px; }
    .workspace-brand img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
    .workspace-brand span { display: none; }
    #bottom-nav .nav-item { flex: none; width: 100%; height: 58px; padding: 6px; border-radius: 8px; }
    #bottom-nav .nav-item i { font-size: 1.15rem; }
    #bottom-nav .nav-item span { margin-top: 1px; }
    #bottom-nav .nav-item { position: relative; transition: background-color .15s, color .15s; }
    #bottom-nav .nav-item:hover { background: var(--bg-color); color: var(--text-main); }
    #bottom-nav .nav-item.active { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); text-shadow: none; }
    #bottom-nav .nav-item.active::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--primary-color); }
    #bottom-nav :is(.nav-item, .workspace-account):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    .workspace-account { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border-color); background: transparent; color: var(--text-main); cursor: pointer; min-width: 0; }
    .workspace-avatar { position: relative; overflow: hidden; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border-color); border-radius: 50%; font-size: .9rem; font-weight: 700; }
    .workspace-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .workspace-account-details { display: none; min-width: 0; text-align: left; }
    .workspace-account-details strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
    .workspace-account-details small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .72rem; }
    #page-home > .fade-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
    #page-home .card { min-width: 0; margin-bottom: 0; }
    #page-home .home-curve-card, #page-home .home-risk-card, #page-home .home-calendar-card,
    #page-home .home-assets-card, #page-home .home-recent-card { padding: 20px; }
    #page-home .home-mobile-summary { display: none; }
    #page-home .home-desktop-summary, #page-home .home-section-description { display: block; }
    #page-home .home-section-description { margin-top: 5px; color: var(--text-muted); font-size: .78rem; line-height: 1.45; }
    #page-home .home-desktop-summary { line-height: 1.45; }
    #page-home .calendar-header { gap: 10px; flex-wrap: wrap; }
    #page-home .calendar-grid { grid-template-columns: repeat(7, minmax(0, 54px)); justify-content: space-between; }
    #page-home .cal-cell { aspect-ratio: 1; min-height: 0; min-width: 0; }
    #page-home .stat-card { min-width: 0; }
    #page-home .stat-value { overflow-wrap: anywhere; }
    #page-settings > .fade-in { max-width: 800px !important; }
    #page-entry > .fade-in { max-width: 900px !important; }
    #page-analytics .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-analytics .stat-card, #page-analytics .metric-box { min-width: 0; }
    #page-analytics .stat-value, #page-analytics .metric-box-val { overflow-wrap: anywhere; }
    #page-trades .trades-tab-list:has(> p) { display: grid; place-items: center; min-height: 170px; }
    .modal-overlay { position: fixed; align-items: center; padding: 20px; }
    .modal-content { max-width: min(680px, 92vw); max-height: 90dvh; }
    #analytics-popup-bubble { position: fixed; left: 78px; top: 220px; bottom: auto; transform: none; }
    #analytics-popup-bubble::after { display: none; }
}

@media (min-width: 1100px) {
    #android-app-container { grid-template-columns: 216px minmax(0, 1fr); }
    #app-header { padding-left: max(24px, calc((100vw - 216px - 1320px) / 2)); padding-right: max(24px, calc((100vw - 216px - 1320px) / 2)); }
    #app-content { padding: 24px; }
    #bottom-nav { padding: 22px 12px; }
    .workspace-brand { justify-content: flex-start; gap: 9px; padding: 0 9px; margin-bottom: 28px; }
    .workspace-brand img { width: 44px; height: 44px; }
    .workspace-brand span { display: block; color: var(--text-main); font-size: 1rem; font-weight: 800; line-height: 1.1; }
    .workspace-brand small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .55rem; letter-spacing: .12em; }
    #bottom-nav .nav-item { height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 15px; }
    #bottom-nav .nav-item i { width: 20px; margin: 0; font-size: 1rem; }
    #bottom-nav .nav-item span { margin: 0; font-size: .84rem; }
    .workspace-account { justify-content: flex-start; padding-inline: 7px; }
    .workspace-account-details { display: block; }
    #analytics-popup-bubble { left: 222px; }
    #page-trades > .fade-in > :first-child { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px !important; }
    #page-trades > .fade-in > :first-child > div { display: contents !important; }
    #page-trades > .fade-in > :first-child button { flex: 0 0 auto !important; min-height: 44px; padding-inline: 18px !important; }
    #page-trades #btn-add-trade { order: 1; }
    #page-trades #trigger-upload-btn { order: 2; }
    #page-trades #connect-broker-btn { order: 3; }
    #page-trades #clear-all-trades-btn { order: 4; margin-left: auto; }
    #page-trades > .fade-in > .card { min-height: 260px; padding: 22px 26px; }
    #page-entry > .fade-in { max-width: 1160px !important; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); gap: 18px 24px; align-items: start; }
    #page-entry > .fade-in > :first-child { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
    #page-entry > .fade-in > :nth-child(2) { grid-column: 1; grid-row: 2; display: grid !important; grid-template-columns: minmax(0, 1fr); margin-bottom: 0 !important; }
    #page-entry > .fade-in > :nth-child(2) .entry-action-btn { width: 100%; min-height: 90px; }
    #page-entry > .fade-in > .card { grid-column: 2; grid-row: 1 / span 3; min-width: 0; min-height: 290px; margin: 0; }
    #page-analytics_trade > .fade-in { max-width: 1320px !important; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.3fr); gap: 18px 24px; align-items: start; }
    #page-analytics_trade > .fade-in > :first-child { grid-column: 1 / -1; margin: 0 !important; position: sticky; top: 0; z-index: 3; background: var(--bg-color); padding: 12px 5px !important; }
    #page-analytics_trade > .fade-in > :first-child::before { content: ''; position: absolute; top: -24px; left: 0; right: 0; height: 24px; background: inherit; pointer-events: none; }
    #page-analytics_trade > .fade-in > .form-group { grid-column: 1; grid-row: 2; margin: 0; position: sticky; top: 92px; align-self: start; }
    #page-analytics_trade .mini-trade-list { max-height: min(800px, calc(100dvh - var(--header-height) - 185px)); }
    #page-analytics_trade #selected-trade-details-container,
    #page-analytics_trade #no-trade-selected-msg { grid-column: 2; grid-row: 2; min-width: 0; }
    #page-analytics_trade #no-trade-selected-msg { min-height: 180px; align-content: center; }
}

@media (min-width: 1200px) {
    #page-home > .fade-in { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
    #home-global-stats-notice { grid-column: 1 / -1; }
    #page-home .home-curve-card { grid-column: span 7; order: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 18px 12px; }
    #page-home .home-curve-card .chart-header { margin: 0; }
    #page-home .home-curve-card .timeframe-controls { align-self: start; margin: 0; }
    #page-home .home-curve-card .time-btn { flex: 0 0 auto; padding-inline: 10px; }
    #page-home .home-curve-card .chart-container { grid-column: 1 / -1; height: 300px; }
    #page-home .home-performance-card { grid-column: span 5; order: 2; display: flex; flex-direction: column; }
    #page-home .home-performance-card .stats-grid { flex: 1; grid-template-rows: repeat(2, minmax(0, 1fr)); }
    #page-home .home-calendar-card { grid-column: span 7; order: 3; }
    #page-home .home-risk-card { grid-column: span 5; order: 4; display: flex; flex-direction: column; }
    #page-home .home-risk-card .metrics-list { flex: 1; justify-content: space-between; }
    #page-home .home-recent-card { grid-column: span 7; order: 5; align-self: start; }
    #page-home .home-assets-card { grid-column: span 5; order: 6; align-self: start; }
    #page-analytics > .fade-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
    #page-analytics > .fade-in > * { min-width: 0; margin: 0 !important; }
    #page-analytics > .fade-in > :is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(8), :nth-child(9), :nth-child(16), :nth-child(19)) { grid-column: 1 / -1; }
    #page-analytics > .fade-in > :nth-child(2) .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #page-analytics > .fade-in > :is(:nth-child(4), :nth-child(6)) { grid-column: span 7; display: flex; flex-direction: column; }
    #page-analytics > .fade-in > :is(:nth-child(4), :nth-child(6)) .chart-container { flex: 1; height: auto !important; min-height: 200px; }
    #page-analytics > .fade-in > :nth-child(6) .chart-container { min-height: 380px; }
    #page-analytics > .fade-in > :is(:nth-child(5), :nth-child(7)) { grid-column: span 5; }
    #page-analytics > .fade-in > :is(:nth-child(10), :nth-child(11), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15)) { grid-column: span 6; }
    #page-analytics > .fade-in > :is(:nth-child(10), :nth-child(15)) { grid-row: 8; }
    #page-analytics > .fade-in > :is(:nth-child(11), :nth-child(12)) { grid-row: 9; }
    #page-analytics > .fade-in > :is(:nth-child(13), :nth-child(14)) { grid-row: 10; }
    #page-analytics > .fade-in > :nth-child(16) { grid-row: 11; }
    #page-analytics > .fade-in > :nth-child(17) { grid-column: 1 / -1; grid-row: 12; }
    #page-analytics > .fade-in > :nth-child(18) { grid-column: 1 / -1; grid-row: 13; }
    #page-analytics > .fade-in > :nth-child(19) { grid-row: 14; }
    #page-analytics > .fade-in > :is(:nth-child(10), :nth-child(14)) { display: flex; flex-direction: column; }
    #page-analytics > .fade-in > :is(:nth-child(10), :nth-child(14)) .metrics-grid { flex: 1; grid-auto-rows: minmax(71px, 1fr); }
    #page-analytics > .fade-in > :is(:nth-child(17), :nth-child(18)) .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #page-analytics #home-top-assets-list-ana { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    #page-analytics #home-top-assets-list-ana .asset-item { flex: 1 1 260px; max-width: calc((100% - 24px) / 3); min-width: 0; }
    #page-analytics > .fade-in > :nth-child(8) .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #page-analytics > .fade-in > :nth-child(8) .metric-box { grid-column: auto !important; }
    #page-settings > .fade-in { max-width: 1160px !important; columns: 2; column-gap: 24px; }
    #page-settings .settings-section { display: block; break-inside: avoid-column; margin-bottom: 22px; }
    #page-settings .settings-support { break-before: column; }
    #page-settings .settings-section > .settings-group { margin-bottom: 0 !important; }
}

@media (min-width: 900px) and (max-width: 1199px) {
    #page-home > .fade-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #page-home .home-curve-card, #page-home .home-performance-card,
    #page-home .home-calendar-card, #page-home .home-recent-card,
    #home-global-stats-notice { grid-column: 1 / -1; }
    #page-home .home-calendar-card { order: 1; }
    #page-home .home-risk-card { order: 2; }
    #page-home .home-assets-card { order: 3; }
    #page-home .home-recent-card { order: 4; }
}

#tutorial-open { flex-shrink:0; min-height:36px; padding:0 10px; display:flex; align-items:center; gap:7px; border:1px solid var(--border-color); border-radius:10px; background:var(--surface-color); color:var(--primary-color); cursor:pointer; font-size:12px; font-weight:700; }
#tutorial-open[hidden] { display:none; }
.journal-tour { position:fixed; inset:0; margin:auto; width:min(940px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border-color); border-radius:20px; background:var(--surface-color); color:var(--text-main); box-shadow:0 24px 80px #0006; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--border-color) var(--surface-color); }
.journal-tour::backdrop { background:#020b09b8; }
[data-theme="dark"] .journal-tour { color-scheme:dark; }
.journal-tour * { box-sizing:border-box; }
.journal-tour [hidden] { display:none!important; }
.journal-tour button { font:inherit; cursor:pointer; }
.tour-top { position:sticky; top:0; z-index:2; background:var(--surface-color); display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border-color); }
.tour-brand { display:flex; gap:10px; align-items:center; font-weight:800; }
.tour-brand img { width:26px; height:26px; object-fit:contain; }
.tour-caption { font-size:11px; color:var(--text-muted); border-left:1px solid var(--border-color); padding-left:10px; }
.tour-close { width:40px; height:40px; border:1px solid var(--border-color); border-radius:12px; background:transparent; color:var(--text-main); font-size:24px!important; }
.tour-body { display:grid; grid-template-columns:220px minmax(0,1fr); }
.tour-progress { padding:16px 12px; border-right:1px solid var(--border-color); background:var(--bg-color); display:flex; flex-direction:column; gap:3px; scrollbar-width:thin; }
.tour-progress button { min-height:38px; display:flex; align-items:center; gap:10px; text-align:left; padding:8px 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; }
.tour-progress button span { font-size:10px; opacity:.7; font-variant-numeric:tabular-nums; }
.tour-progress button:hover { background:var(--surface-color); color:var(--text-main); }
.tour-progress button[aria-current="step"] { background:var(--surface-color); color:var(--primary-color); border-color:var(--primary-color); font-weight:800; }
.tour-layout { min-width:0; display:flex; flex-direction:column; }
.tour-copy { padding:28px 32px 20px; }
.tour-eyebrow { color:var(--primary-color); font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.tour-copy h2 { font-size:clamp(23px,3vw,30px); line-height:1.2; letter-spacing:-.6px; margin:12px 0; }
.tour-copy p { color:var(--text-muted); line-height:1.65; font-size:14px; margin:0; }
.tour-instructions { list-style:disc; padding:0 0 0 20px; margin:20px 0; display:grid; gap:13px; }
.tour-instructions li { padding-left:4px; font-size:13px; line-height:1.6; }
.tour-instructions li p { margin:0; color:var(--text-main); font-size:13px; line-height:1.6; }
.tour-image-holder { margin-top:12px; }
.tour-image-holder img { display:block; max-width:100%; height:auto; border-radius:8px; }
.tour-tip { padding:12px 14px; border-left:3px solid var(--primary-color); border-radius:0 8px 8px 0; background:rgba(22,163,74,.07); font-size:12px; line-height:1.65; }
.tour-try { margin-top:16px; padding:10px 0; min-height:44px; background:transparent; color:var(--primary-color); border:0; font-weight:800!important; font-size:13px!important; }
.tour-footer { position:sticky; bottom:0; z-index:2; background:var(--surface-color); border-top:1px solid var(--border-color); padding:14px 24px; }
.tour-actions { display:flex; align-items:center; gap:12px; }
.tour-count { color:var(--text-muted); font-size:12px; margin-right:auto; white-space:nowrap; }
.tour-back,.tour-skip { background:transparent; border:0; padding:12px 8px; min-height:44px; color:var(--text-muted); font-weight:700!important; font-size:13px!important; }
.tour-next { min-height:44px; background:var(--primary-color); color:#fff; border:0; border-radius:10px; padding:12px 20px; font-weight:800!important; font-size:13px!important; }
.journal-tour button:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
.journal-tour button:disabled { opacity:.35; cursor:default; }
#tour-setup { padding:0 32px 24px; }
#tour-setup .settings-group { overflow:visible; }
#tour-setup .settings-text p { margin-top:4px; }
#tour-setup input:disabled { opacity:.5; }
#tour-setup input:focus-visible, #tour-setup [role="button"]:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; }
.tour-status { font-size:13px; line-height:1.5; margin-top:12px; color:var(--text-main); }
@media(max-width:700px) {
 .journal-tour { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:16px; }
 .tour-top { padding:12px 16px; }
 .tour-body { display:block; }
 .tour-progress { flex-direction:row; overflow-x:auto; padding:10px 12px; border-right:0; border-bottom:1px solid var(--border-color); gap:6px; }
 .tour-progress button { flex-shrink:0; min-height:44px; padding:8px 12px; }
 .tour-copy { padding:22px 20px 16px; }
 .tour-copy h2 { font-size:24px; }
 .tour-footer { padding:12px 16px; }
 .tour-actions { gap:5px; flex-wrap:wrap; }
 .tour-next { padding:12px 15px; }
 #tour-setup { padding:0 20px 20px; }
}
@media(max-width:380px) {
 #tutorial-open span { display:none; }
 .tour-count { flex-basis:100%; }
 .tour-next { margin-left:auto; }
}
.tour-configuring .tour-instructions:empty { display:none; }
.tour-instructions li::marker { color:var(--primary-color); }
.journal-tour[open] { display:flex; flex-direction:column; height:calc(100dvh - 32px); overflow:hidden; }
.tour-top,.tour-footer { flex-shrink:0; }
.tour-body { flex:1; min-height:0; overflow:hidden; }
.tour-progress { overflow-y:auto; }
.tour-progress button { flex-shrink:0; }
.tour-layout { min-height:0; overflow-y:auto; scrollbar-width:thin; }
@media(max-width:700px) {
 .journal-tour[open] { height:calc(100dvh - 16px); }
 .tour-body { display:flex; flex-direction:column; }
 .tour-progress { flex-shrink:0; overflow-y:hidden; }
 .tour-layout { flex:1; }
}