/* ════════════════════════════════════════════════════════
NxTGen Trading Journal — styles.css
NXTGEN LIQUID GLASS PREMIUM DESIGN SYSTEM v3
Apple-inspired · Fintech quality · Full dark/light parity
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* ════════════════════════════════════════════════════════
NXTGEN — LIQUID GLASS PREMIUM DESIGN SYSTEM v3
Apple-inspired · Fintech quality · Full dark/light parity
════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── Token System ───────────────────────────────────── */
:root{
/* Dark palette */
--bg-base: #080b12;
--bg: #080b12;
--bg2: rgba(13,17,26,0.94);
--bg3: rgba(19,24,36,0.82);
--bg4: rgba(26,33,50,0.72);
--bg5: rgba(36,46,68,0.60);
/* Liquid glass surfaces */
--glass-0: rgba(255,255,255,0.02);
--glass-1: rgba(255,255,255,0.04);
--glass-2: rgba(255,255,255,0.07);
--glass-3: rgba(255,255,255,0.11);
--glass-4: rgba(255,255,255,0.16);
--glass-border: rgba(255,255,255,0.08);
--glass-border-h:rgba(255,255,255,0.15);
--glass-shine: rgba(255,255,255,0.06);
/* Blur levels */
--blur-xs: blur(6px);
--blur-sm: blur(10px);
--blur-md: blur(16px);
--blur-lg: blur(24px);
--blur-xl: blur(32px);
/* Borders */
--border: rgba(255,255,255,0.07);
--border2: rgba(255,255,255,0.04);
--border-focus: rgba(96,165,250,0.55);
/* Semantic colors */
--accent: #f87171;
--accent2: #fb923c;
--green: #34d399;
--green-dim: rgba(52,211,153,0.15);
--green-glow:rgba(52,211,153,0.20);
--red: #f87171;
--red-dim: rgba(248,113,113,0.13);
--red-glow: rgba(248,113,113,0.20);
--blue: #60a5fa;
--blue-dim: rgba(96,165,250,0.13);
--blue-glow: rgba(96,165,250,0.20);
--teal: #2dd4bf;
--gold: #fbbf24;
--gold-glow: rgba(251,191,36,0.20);
--purple: #a78bfa;
/* Text hierarchy */
--text: rgba(248,250,252,0.95);
--text2: rgba(148,163,184,0.82);
--text3: rgba(100,116,139,0.65);
/* Elevation shadows */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
--shadow-md: 0 4px 20px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.4);
--shadow-xl: 0 24px 72px rgba(0,0,0,0.72), 0 8px 24px rgba(0,0,0,0.5);
/* Glow shadows */
--glow-blue: 0 0 28px rgba(96,165,250,0.14), 0 0 8px rgba(96,165,250,0.08);
--glow-green: 0 0 24px rgba(52,211,153,0.16), 0 0 8px rgba(52,211,153,0.10);
--glow-red: 0 0 20px rgba(248,113,113,0.15), 0 0 6px rgba(248,113,113,0.10);
--glow-gold: 0 0 20px rgba(251,191,36,0.18), 0 0 6px rgba(251,191,36,0.10);
/* Radii */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 28px;
--r-full: 9999px;
/* Layout */
--sidebar: 220px;
--topbar: 52px;
/* Typography */
--font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--surface: #0d1117;
/* Easing */
--ease-spring: cubic-bezier(0.34,1.56,0.64,1);
--ease-out: cubic-bezier(0.0,0.0,0.2,1);
--ease-in-out: cubic-bezier(0.4,0.0,0.2,1);
/* Transitions */
--t-fast: background 0.14s var(--ease-in-out), border-color 0.14s var(--ease-in-out), box-shadow 0.14s var(--ease-in-out), color 0.14s var(--ease-in-out), opacity 0.14s var(--ease-in-out), transform 0.14s var(--ease-in-out), fill 0.14s var(--ease-in-out), stroke 0.14s var(--ease-in-out);
--t-med: background 0.24s var(--ease-in-out), border-color 0.24s var(--ease-in-out), box-shadow 0.24s var(--ease-in-out), color 0.24s var(--ease-in-out), opacity 0.24s var(--ease-in-out), transform 0.24s var(--ease-in-out), fill 0.24s var(--ease-in-out), stroke 0.24s var(--ease-in-out);
--t-slow: background 0.4s var(--ease-in-out), border-color 0.4s var(--ease-in-out), box-shadow 0.4s var(--ease-in-out), color 0.4s var(--ease-in-out), opacity 0.4s var(--ease-in-out), transform 0.4s var(--ease-in-out), fill 0.4s var(--ease-in-out), stroke 0.4s var(--ease-in-out);
--t-spring: background 0.32s var(--ease-spring), border-color 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-spring), color 0.32s var(--ease-spring), opacity 0.32s var(--ease-spring), transform 0.32s var(--ease-spring), fill 0.32s var(--ease-spring), stroke 0.32s var(--ease-spring);
}
/* ── Light Mode ─────────────────────────────────────── */
[data-theme="light"]{
/* Warmer, deeper base — not flat white so surfaces can "lift" off it */
--bg-base: #e7ebf5;
--bg: #e3e8f3;
--bg2: rgba(255,255,255,0.94);
--bg3: rgba(255,255,255,0.86);
--bg4: rgba(234,238,248,0.85);
--bg5: rgba(210,217,238,0.72);
/* Liquid glass surfaces — high-opacity whites for real card separation */
--glass-0: rgba(255,255,255,0.60);
--glass-1: rgba(255,255,255,0.86);
--glass-2: rgba(255,255,255,0.95);
--glass-3: rgba(255,255,255,0.99);
--glass-4: rgba(255,255,255,1);
--glass-border: rgba(30,41,59,0.11);
--glass-border-h:rgba(30,41,59,0.20);
--glass-shine: rgba(255,255,255,0.95);
--border: rgba(30,41,59,0.11);
--border2: rgba(30,41,59,0.07);
--border-focus: rgba(79,70,229,0.55);
--accent: #e11d48;
--accent2: #ea580c;
--green: #04875e;
--green-dim: rgba(4,135,94,0.12);
--green-glow:rgba(4,135,94,0.18);
--red: #dc2626;
--red-dim: rgba(220,38,38,0.11);
--red-glow: rgba(220,38,38,0.18);
--blue: #4f46e5;
--blue-dim: rgba(79,70,229,0.12);
--blue-glow: rgba(79,70,229,0.18);
--teal: #0d9488;
--gold: #b45309;
--gold-glow: rgba(180,83,9,0.16);
--purple: #7c3aed;
--text: #0f1729;
--text2: rgba(30,41,59,0.80);
--text3: rgba(71,85,105,0.68);
--surface: #ffffff;
/* Deeper, more directional shadows so cards visibly lift off the page */
--shadow-xs: 0 1px 2px rgba(15,23,42,0.07);
--shadow-sm: 0 3px 10px rgba(15,23,42,0.09), 0 1px 3px rgba(15,23,42,0.06);
--shadow-md: 0 8px 26px rgba(15,23,42,0.11), 0 2px 8px rgba(15,23,42,0.07);
--shadow-lg: 0 18px 48px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.08);
--shadow-xl: 0 30px 80px rgba(15,23,42,0.17), 0 10px 28px rgba(15,23,42,0.10);
--glow-blue: 0 0 26px rgba(79,70,229,0.16);
--glow-green: 0 0 22px rgba(4,135,94,0.16);
--glow-red: 0 0 18px rgba(220,38,38,0.16);
--glow-gold: 0 0 18px rgba(180,83,9,0.16);
}
/* ── Theme transition (smooth, no flicker) ──────────── */
html{transition:background-color 0.35s var(--ease-in-out)}
body{transition:background-color 0.35s var(--ease-in-out),color 0.2s}
.topbar,.sidebar,.tabs,.modal,.detail-panel,.kpi-card,.glass-card,
.wl-pair-card,.acc-card,.rule-card,.model-card,.data-table th,
.data-table td,.trash-card,.cover,.cal-kpi{
transition:background 0.3s var(--ease-in-out),
border-color 0.3s var(--ease-in-out),
box-shadow 0.3s var(--ease-in-out),
color 0.2s;
}
button,a,.cal-day,.sb-item,.tab,.trade-log-row,input,select,textarea{
transition:var(--t-fast);
}
/* ── Base ────────────────────────────────────────────── */
html{height:100%;font-size:14px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
body{
height:100%;
min-height:100dvh;
background:var(--bg-base);
color:var(--text);
font-family:var(--font-body);
font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
display:flex;flex-direction:column;overflow:hidden;
background-image:
radial-gradient(ellipse 90% 70% at 15% -15%, rgba(96,165,250,0.07) 0%, transparent 55%),
radial-gradient(ellipse 70% 60% at 85% 115%, rgba(167,139,250,0.05) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(45,212,191,0.02) 0%, transparent 60%);
background-attachment:fixed;
}
[data-theme="light"] body{
background-image:
radial-gradient(ellipse 90% 70% at 15% -15%, rgba(79,70,229,0.07) 0%, transparent 55%),
radial-gradient(ellipse 70% 60% at 85% 115%, rgba(124,58,237,0.04) 0%, transparent 55%);
}
/* ════════════ TOPBAR ═══════════════════════════════ */
.topbar{
height:var(--topbar);
background:var(--glass-2);
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
border-bottom:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:space-between;
padding:0 20px;flex-shrink:0;z-index:100;
box-shadow:var(--shadow-sm),inset 0 1px 0 var(--glass-shine);
position:relative;
}
.topbar::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,
rgba(96,165,250,0.025) 0%,transparent 30%,
rgba(167,139,250,0.020) 100%);
}
.topbar-left{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
/* ── NxTGen Logo Brand ── */
.topbar-left .brand {
display: flex; align-items: center;
cursor: pointer; flex-shrink: 0;
transition: opacity .15s;
max-width: 200px;
}
.topbar-left .brand:hover { opacity: .85; }
.brand-logo-img {
height: 30px;
width: auto;
display: block;
object-fit: contain;
/* Dark mode default: logo is white (brightness(0) invert(1) = white) */
filter: brightness(0) invert(1);
transition: filter .25s ease;
max-width: 190px;
}
/* Light mode: logo is black (brightness(0) = black) */
[data-theme="light"] .brand-logo-img {
filter: brightness(0);
}
/* Also fix the SVG internal filters for light mode via CSS variables */
[data-theme="light"] .logo-dark {
filter: invert(1);
}
[data-theme="light"] .logo-light-text {
filter: none;
}
/* Legacy .brand-icon — keep for any edge case */
.brand-icon {
width: 26px; height: 26px; border-radius: 7px;
background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.12));
border: 1px solid rgba(251,191,36,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex-shrink: 0;
box-shadow: 0 0 12px rgba(251,191,36,0.15);
}
.topbar-left .sep{color:var(--text3);font-weight:300;font-size:16px;opacity:0.5}
.topbar-left .page-name{color:var(--text2);font-size:12px;font-weight:400}
.topbar-right{display:flex;gap:8px;align-items:center;position:relative;z-index:1}
.theme-toggle{
width:32px;height:32px;border-radius:var(--r-sm);
background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:14px;transition:var(--t-fast);flex-shrink:0;
}
.theme-toggle:hover{
background:var(--glass-2);color:var(--text);
border-color:var(--glass-border-h);
transform:rotate(15deg) scale(1.08);
box-shadow:var(--shadow-sm);
}
/* ════════════ BUTTONS ══════════════════════════════ */
.btn{
padding:7px 15px;border-radius:var(--r-sm);
font-size:12px;font-family:var(--font-body);
font-weight:500;cursor:pointer;letter-spacing:0.1px;
border:1px solid var(--glass-border);
background:var(--glass-1);color:var(--text2);
backdrop-filter:var(--blur-xs);
transition:var(--t-fast);white-space:nowrap;
}
.btn:hover{
background:var(--glass-2);color:var(--text);
border-color:var(--glass-border-h);
transform:translateY(-1px);box-shadow:var(--shadow-sm);
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-primary{
background:linear-gradient(135deg,
rgba(96,165,250,0.22) 0%,
rgba(96,165,250,0.14) 100%);
border-color:rgba(96,165,250,0.35);
color:var(--blue);font-weight:600;
box-shadow:var(--glow-blue),var(--shadow-sm);
}
.btn-primary:hover{
background:linear-gradient(135deg,
rgba(96,165,250,0.32) 0%,
rgba(96,165,250,0.22) 100%);
border-color:rgba(96,165,250,0.55);
box-shadow:0 0 32px rgba(96,165,250,0.25),var(--shadow-md);
transform:translateY(-1px);
}
[data-theme="light"] .btn-primary{
background:linear-gradient(135deg,rgba(79,70,229,0.14),rgba(79,70,229,0.08));
border-color:rgba(79,70,229,0.3);color:var(--blue);
box-shadow:var(--glow-blue),var(--shadow-sm);
}
/* Glass buttons (modal/panel) */
.glass-btn{
padding:9px 22px;border-radius:var(--r-md);
font-size:13px;font-weight:500;cursor:pointer;border:1px solid;
font-family:var(--font-body);transition:var(--t-fast);letter-spacing:0.1px;
backdrop-filter:var(--blur-xs);
}
.glass-btn-cancel{
background:var(--glass-1);border-color:var(--glass-border);color:var(--text2);
}
.glass-btn-cancel:hover{
background:var(--glass-2);color:var(--text);
border-color:var(--glass-border-h);transform:translateY(-1px);
}
.glass-btn-danger{
background:linear-gradient(135deg,rgba(248,113,113,0.15),rgba(248,113,113,0.08));
border-color:rgba(248,113,113,0.35);color:var(--red);
box-shadow:var(--glow-red);
}
.glass-btn-danger:hover{
background:linear-gradient(135deg,rgba(248,113,113,0.28),rgba(248,113,113,0.16));
border-color:rgba(248,113,113,0.55);
box-shadow:0 0 28px rgba(248,113,113,0.3),var(--shadow-md);
transform:translateY(-1px);
}
.glass-btn-restore{
background:linear-gradient(135deg,rgba(52,211,153,0.15),rgba(52,211,153,0.08));
border-color:rgba(52,211,153,0.35);color:var(--green);
box-shadow:var(--glow-green);
}
.glass-btn-restore:hover{
background:linear-gradient(135deg,rgba(52,211,153,0.28),rgba(52,211,153,0.16));
border-color:rgba(52,211,153,0.55);
box-shadow:0 0 28px rgba(52,211,153,0.3),var(--shadow-md);
transform:translateY(-1px);
}
/* ════════════ LAYOUT ═══════════════════════════════ */
.layout{display:flex;flex:1;overflow:hidden;height:100%}
/* ════════════ SIDEBAR ══════════════════════════════ */
/* ── Sidebar logo header ── */
.sb-logo-header {
padding: 16px 16px 10px;
border-bottom: 1px solid var(--glass-border);
margin-bottom: 6px;
display: flex; align-items: center; justify-content: center;
}
.sb-logo-img {
height: 40px; width: auto;
object-fit: contain; display: block;
/* Dark mode: white */
filter: brightness(0) invert(1);
transition: filter .25s ease;
}
[data-theme="light"] .sb-logo-img {
/* Light mode: black */
filter: brightness(0);
}
.sidebar{
width:var(--sidebar);
background:var(--glass-2);
backdrop-filter:var(--blur-xl);
-webkit-backdrop-filter:var(--blur-xl);
border-right:1px solid var(--glass-border);
display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;
padding:14px 8px;
box-shadow:2px 0 24px rgba(0,0,0,0.18);
}
[data-theme="light"] .sidebar{box-shadow:2px 0 20px rgba(0,0,0,0.07)}
.sb-section{margin-bottom:22px}
.sb-section-label{
font-size:9.5px;font-weight:700;color:var(--text3);
text-transform:uppercase;letter-spacing:.15em;
padding:0 10px;margin-bottom:6px;
}
.sb-item{
display:flex;align-items:center;gap:9px;
padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;
font-size:12.5px;color:var(--text2);
transition:var(--t-fast);user-select:none;
border:1px solid transparent;font-weight:400;
position:relative;
}
.sb-item:hover{
background:var(--glass-2);color:var(--text);
border-color:var(--glass-border);
}
.sb-item.active{
background:linear-gradient(135deg,
rgba(96,165,250,0.16) 0%,
rgba(96,165,250,0.08) 100%);
color:var(--blue);
border-color:rgba(96,165,250,0.22);
font-weight:600;
box-shadow:var(--glow-blue),inset 0 1px 0 rgba(96,165,250,0.10);
}
[data-theme="light"] .sb-item.active{
background:linear-gradient(135deg,rgba(79,70,229,0.12),rgba(79,70,229,0.06));
color:var(--blue);border-color:rgba(79,70,229,0.22);
}
.sb-item .ico{font-size:14px;width:16px;text-align:center;flex-shrink:0;opacity:.75}
.sb-item.active .ico{opacity:1}
.sb-item .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-item.q2 .ico{color:var(--blue);opacity:1}
.sb-sep{height:1px;background:var(--glass-border);margin:8px 6px;opacity:0.7}
.sb-badge{
background:rgba(248,113,113,0.18);color:var(--red);
font-size:9.5px;font-weight:700;padding:1px 6px;
border-radius:var(--r-full);margin-left:auto;
font-family:var(--font-mono);border:1px solid rgba(248,113,113,0.28);
text-shadow:0 0 8px rgba(248,113,113,0.4);
}
/* ════════════ MAIN + TABS ══════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tabs{
height:44px;
background:var(--glass-1);
backdrop-filter:var(--blur-sm);
-webkit-backdrop-filter:var(--blur-sm);
border-bottom:1px solid var(--glass-border);
display:flex;align-items:flex-end;padding:0 20px;flex-shrink:0;gap:0;
}
.tab{
padding:10px 16px;font-size:12.5px;color:var(--text2);cursor:pointer;
border-bottom:2px solid transparent;transition:var(--t-fast);
font-weight:400;white-space:nowrap;letter-spacing:0.1px;
position:relative;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--blue);font-weight:600}
/* ════════════ PAGE ════════════════════════════════ */
.page{flex:1;overflow-y:auto;padding:24px;display:none;scroll-behavior:smooth;min-width:0}
#page-dashboard{padding:0}
.page.active{display:block}
.page-inner{max-width:920px;margin:0 auto;min-width:0}
.dash-layout .page-inner,.dash-left .page-inner{max-width:none;margin:0}
/* Full-width ("port view") pages — same edge-to-edge treatment as
Trade Log, Calendar, and Dashboard. Everything else still uses the
centered 920px column above by default. */
#page-watchlist .page-inner,
#page-accounts .page-inner,
#page-ai .page-inner,
#page-playbook .page-inner,
#page-goals .page-inner,
#page-quarter .page-inner,
#page-monthly .page-inner,
#page-trash .page-inner,
#page-profile .page-inner{
max-width:none;
width:100%;
margin:0;
box-sizing:border-box;
}
@keyframes pageIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.page.active .page-inner{animation:pageIn 0.24s var(--ease-out)}
/* ════════════ COVER BANNER ════════════════════════ */
.cover{
background:linear-gradient(135deg,
rgba(13,18,32,0.96) 0%,
rgba(20,30,54,0.92) 55%,
rgba(15,22,40,0.96) 100%);
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
border-radius:var(--r-xl);
padding:22px 26px;margin-bottom:20px;
border:1px solid var(--glass-border);
position:relative;overflow:hidden;
box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-shine);
}
.cover::before{
content:'';position:absolute;top:-60%;right:-5%;
width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,rgba(96,165,250,0.08) 0%,transparent 65%);
pointer-events:none;
}
.cover::after{
content:'';position:absolute;bottom:-40%;left:15%;
width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,rgba(167,139,250,0.06) 0%,transparent 65%);
pointer-events:none;
}
[data-theme="light"] .cover{
background:linear-gradient(135deg,rgba(79,70,229,0.88),rgba(79,70,229,0.82),rgba(79,70,229,0.88));
border-color:rgba(255,255,255,0.18);
box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.2);
}
[data-theme="light"] .cover .cover-label{color:rgba(255,255,255,0.7)}
[data-theme="light"] .cover .cover-title{color:#fff}
[data-theme="light"] .cover .cover-sub{color:rgba(255,255,255,0.6)}
.cover-label{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px;position:relative;z-index:1}
.cover-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-0.5px;position:relative;z-index:1}
.cover-sub{font-size:12px;color:var(--text2);margin-top:5px;position:relative;z-index:1;line-height:1.5}
/* ════════════ KPI CARDS ══════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.kpi-card{
background:var(--glass-1);
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:15px 16px;
transition:var(--t-med);position:relative;overflow:hidden;
box-shadow:var(--shadow-sm);
}
.kpi-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 0%,var(--glass-shine) 50%,transparent 100%);
}
.kpi-card::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:40%;
background:linear-gradient(to top,rgba(0,0,0,0.06),transparent);
pointer-events:none;
}
.kpi-card:hover{
background:var(--glass-2);border-color:var(--glass-border-h);
box-shadow:var(--shadow-md);transform:translateY(-2px);
}
/* Net PnL toggle card */
.kpi-card--toggle{cursor:pointer;user-select:none;}
.kpi-card--toggle:hover{border-color:rgba(99,179,237,0.35);}
.kpi-card--toggle:active{transform:scale(0.97);}
.kpi-toggle-hint{
font-size:8px;color:var(--text3);text-transform:uppercase;
letter-spacing:.06em;opacity:.7;margin-left:4px;
font-family:var(--font-body);
}
.kpi-pnl-flipping .kpi-value,
.kpi-pnl-flipping .cal-an-value{
animation:pnl-flip .28s ease;
}
@keyframes pnl-flip{
0%{opacity:1;transform:rotateX(0deg);}
45%{opacity:0;transform:rotateX(90deg);}
55%{opacity:0;transform:rotateX(-90deg);}
100%{opacity:1;transform:rotateX(0deg);}
}
.kpi-label{
font-size:10px;color:var(--text3);margin-bottom:8px;
font-weight:600;text-transform:uppercase;letter-spacing:.08em;
display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.kpi-label .cal-kpi-icon{font-size:11px;line-height:1;flex-shrink:0}
.kpi-value{
font-family:var(--font-mono);font-size:24px;font-weight:700;
line-height:1;letter-spacing:-0.8px;position:relative;z-index:1;
}
.kpi-value.green{color:var(--green);text-shadow:0 0 24px var(--green-glow)}
.kpi-value.red{color:var(--red);text-shadow:0 0 24px var(--red-glow)}
.kpi-value.blue{color:var(--blue);text-shadow:0 0 24px var(--blue-glow)}
.kpi-value.gold{color:var(--gold);text-shadow:0 0 24px var(--gold-glow)}
.kpi-value.teal{color:var(--teal);text-shadow:0 0 20px rgba(45,212,191,0.25)}
.kpi-value.white{color:var(--text)}
/* ════════════ INSIGHT BOX ════════════════════════ */
.insight{
display:flex;gap:12px;
background:linear-gradient(135deg,
rgba(96,165,250,0.08) 0%,
rgba(96,165,250,0.04) 100%);
border:1px solid rgba(96,165,250,0.16);
border-radius:var(--r-md);
padding:13px 16px;margin-bottom:20px;align-items:flex-start;
backdrop-filter:var(--blur-xs);
box-shadow:inset 0 1px 0 rgba(96,165,250,0.08);
}
.insight-ico{font-size:16px;flex-shrink:0;margin-top:2px}
.insight-text{font-size:12.5px;color:rgba(148,188,255,0.88);line-height:1.55;font-weight:400}
[data-theme="light"] .insight-text{color:rgba(79,70,229,0.82)}
[data-theme="light"] .insight{background:linear-gradient(135deg,rgba(79,70,229,0.07),rgba(79,70,229,0.03));border-color:rgba(79,70,229,0.15)}
/* ════════════ SECTION HEADERS ════════════════════ */
.sec-head{
font-size:10px;font-weight:700;color:var(--text3);
text-transform:uppercase;letter-spacing:.14em;margin:22px 0 10px;
display:flex;align-items:center;gap:10px;
}
.sec-head::after{content:'';flex:1;height:1px;background:var(--glass-border);opacity:.8}
/* ════════════ DATA TABLES ════════════════════════ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
text-align:left;font-size:10px;font-weight:700;color:var(--text3);
padding:9px 12px;border-bottom:1px solid var(--glass-border);
text-transform:uppercase;letter-spacing:.09em;
}
.data-table td{
padding:10px 12px;border-bottom:1px solid var(--border2);
font-size:12.5px;color:var(--text2);
}
.data-table tbody tr{
transition:var(--t-fast);cursor:pointer;
}
.data-table tbody tr:hover{
background:var(--glass-1);
}
.data-table tbody tr:hover td{color:var(--text)}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table td.bold{font-weight:600;color:var(--text)}
.data-table td.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:-0.2px}
/* ── Compact Table View (Settings > Compact Table View) ── */
.data-table.compact-table th{ padding:5px 10px; font-size:9.5px }
.data-table.compact-table td{ padding:4px 10px; font-size:11.5px }
.data-table.compact-table tbody tr{ line-height:1.2 }
/* ════════════ PILLS ══════════════════════════════ */
.pill{
display:inline-flex;align-items:center;
padding:2px 9px;border-radius:var(--r-full);
font-size:11px;font-weight:600;
font-family:var(--font-mono);letter-spacing:0.1px;
}
.pill-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,211,153,0.22)}
.pill-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,0.22)}
.pill-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(96,165,250,0.22)}
.pill-gold{background:rgba(251,191,36,0.10);color:var(--gold);border:1px solid rgba(251,191,36,0.20)}
.pill-grey{background:var(--glass-1);color:var(--text2);border:1px solid var(--glass-border)}
/* ════════════ WIN BARS ══════════════════════════ */
.win-bar-wrap{display:flex;align-items:center;gap:8px}
.win-bar-bg{
flex:1;height:3px;
background:var(--glass-2);border-radius:var(--r-full);
overflow:hidden;min-width:60px;
}
.win-bar-fill{
height:100%;border-radius:var(--r-full);
transition:width 0.9s var(--ease-out);
}
.win-bar-fill.green{background:linear-gradient(90deg,var(--green),rgba(52,211,153,0.5))}
.win-bar-fill.red{background:linear-gradient(90deg,var(--red),rgba(248,113,113,0.5))}
/* ════════════ OUTCOME COLORS ════════════════════ */
.outcome-win{color:var(--green);font-weight:600}
.outcome-loss{color:var(--red);font-weight:600}
.outcome-be{color:var(--blue);font-weight:600}
.pos-buy{color:var(--green);font-size:11px;font-weight:700;font-family:var(--font-mono)}
.pos-sell{color:var(--red);font-size:11px;font-weight:700;font-family:var(--font-mono)}
.stars{color:var(--gold);font-size:12px;letter-spacing:.5px;text-shadow:0 0 10px var(--gold-glow)}
.stars .empty{color:var(--text3);text-shadow:none}
/* ════════════ NEW TRADE MODAL ═══════════════════ */
.modal-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,0.72);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
z-index:200;display:none;
align-items:center;justify-content:center;
animation:fadeInBG 0.2s var(--ease-out);
}
.modal-overlay.open{display:flex}
.modal{
background:var(--glass-2);
backdrop-filter:var(--blur-xl);
-webkit-backdrop-filter:var(--blur-xl);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
width:640px;max-width:calc(100vw - 32px);max-height:88vh;
display:flex;flex-direction:column;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
animation:slideUp 0.24s var(--ease-spring);
}
.modal-body{ padding:0 28px 4px; overflow-y:auto; flex:1; }
.modal-head{ padding:20px 28px 0; display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-shrink:0; }
.form-actions{
display:flex;gap:10px;justify-content:flex-end;
padding:16px 28px 20px;
border-top:1px solid var(--glass-border);
flex-shrink:0;
margin-top:0;
}
.modal-form-grid{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.modal-title{font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-0.3px}
.modal-close{
background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);font-size:18px;cursor:pointer;
padding:4px 10px;border-radius:var(--r-sm);transition:var(--t-fast);
}
.modal-close:hover{background:var(--glass-2);color:var(--text);transform:scale(1.05)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-field.full{grid-column:1/-1}
.form-label{
font-size:10px;font-weight:700;color:var(--text3);
text-transform:uppercase;letter-spacing:.09em;
}
.form-input,.form-select,.form-textarea{
background:var(--glass-1);
border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:9px 12px;
font-size:13px;color:var(--text);
font-family:var(--font-body);transition:var(--t-fast);
outline:none;width:100%;box-sizing:border-box;
backdrop-filter:var(--blur-xs);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
border-color:rgba(96,165,250,0.5);
background:var(--glass-2);
box-shadow:0 0 0 3px rgba(96,165,250,0.10);
}
[data-theme="light"] .form-input,[data-theme="light"] .form-select,[data-theme="light"] .form-textarea{
background:rgba(255,255,255,0.7);border-color:var(--glass-border);
}
.form-select option{background:var(--bg2)}
.form-textarea{resize:vertical;min-height:80px;line-height:1.55}
/* ════════════ DETAIL PANEL ══════════════════════ */
.detail-panel{
position:fixed;right:0;top:var(--topbar);bottom:0;width:420px;
background:var(--glass-2);
backdrop-filter:var(--blur-xl);
-webkit-backdrop-filter:var(--blur-xl);
border-left:1px solid var(--glass-border);
overflow-y:auto;
transform:translateX(100%);
transition:transform 0.28s var(--ease-spring);
z-index:150;padding:22px;
box-shadow:-8px 0 40px rgba(0,0,0,0.3);
}
[data-theme="light"] .detail-panel{background:rgba(255,255,255,0.9);box-shadow:-6px 0 30px rgba(0,0,0,0.10)}
.detail-panel.open{transform:translateX(0)}
.detail-panel.resizing{transition:none!important}
/* Resize handle — lets desktop users drag the panel's left edge to widen/narrow it */
.detail-panel-resize-handle{
position:absolute;top:0;left:-4px;bottom:0;width:8px;
cursor:ew-resize;z-index:20;background:transparent;touch-action:none;
}
.detail-panel-resize-handle::after{
content:'';position:absolute;top:0;bottom:0;left:3px;width:2px;
border-radius:2px;background:transparent;transition:background .15s ease;
}
.detail-panel-resize-handle:hover::after,
.detail-panel.resizing .detail-panel-resize-handle::after{background:var(--blue)}
body.detail-resizing{cursor:ew-resize!important;user-select:none!important}
body.detail-resizing *{user-select:none!important}
/* Mobile is a bottom-sheet, not a resizable side panel — and fullscreen is a fixed 100vw state */
@media (max-width: 768px){
.detail-panel-resize-handle{display:none}
}
.detail-panel.fullscreen .detail-panel-resize-handle{display:none}
.det-panel-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--glass-border);
}
.det-panel-close{
width:30px;height:30px;border-radius:var(--r-sm);
background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);cursor:pointer;font-size:16px;
display:flex;align-items:center;justify-content:center;
transition:var(--t-fast);flex-shrink:0;
}
.det-panel-close:hover{background:var(--red-dim);border-color:rgba(248,113,113,0.35);color:var(--red);transform:scale(1.08)}
.det-panel-expand{
width:30px;height:30px;border-radius:var(--r-sm);
background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);cursor:pointer;font-size:13px;
display:flex;align-items:center;justify-content:center;
transition:var(--t-fast);flex-shrink:0;
}
.det-panel-expand:hover{background:var(--glass-2);border-color:var(--glass-border-h);color:var(--text);transform:scale(1.08)}
/* full-screen mode */
.detail-panel.fullscreen{
width:100vw!important;
left:0!important;right:0!important;
top:var(--topbar)!important;
border-left:none;border-radius:0;
z-index:160;
padding:24px 28px;
}
.detail-panel.fullscreen #detail-content{
max-width:1100px;margin:0 auto;
}
/* expand icon set via JS textContent */
.detail-pair{
font-family:var(--font-head);font-size:26px;font-weight:800;
margin-bottom:4px;letter-spacing:-0.8px;
}
.detail-meta{font-size:12px;color:var(--text2);margin-bottom:18px;font-weight:400}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.detail-stat{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:11px 13px;transition:var(--t-fast);
}
.detail-stat:hover{background:var(--glass-2);border-color:var(--glass-border-h)}
.detail-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-weight:600}
.detail-stat-val{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:-0.2px}
.detail-section{margin-bottom:16px}
.detail-section-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.10em;margin-bottom:8px}
.checklist{display:flex;flex-direction:column;gap:5px}
.check-item{
display:flex;align-items:center;gap:9px;font-size:12px;
padding:7px 11px;background:var(--glass-0);
border:1px solid var(--glass-border);
border-radius:var(--r-sm);color:var(--text2);
transition:var(--t-fast);cursor:pointer;
}
.check-item:hover{background:var(--glass-1)}
.check-item .ci{
width:15px;height:15px;border-radius:4px;
border:1.5px solid var(--glass-border);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:9px;transition:var(--t-fast);
}
.check-item.checked .ci{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 8px var(--green-glow)}
.notes-area{
width:100%;background:var(--glass-1);
border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:11px 12px;
font-size:12px;color:var(--text);font-family:var(--font-body);
resize:vertical;min-height:90px;outline:none;line-height:1.55;
transition:var(--t-fast);
}
.notes-area:focus{border-color:rgba(96,165,250,0.45);background:var(--glass-2);box-shadow:0 0 0 3px rgba(96,165,250,0.08)}
.img-upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.img-slot{
aspect-ratio:16/10;
border:1.5px dashed var(--glass-border);
border-radius:var(--r-md);
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;background:var(--glass-0);
transition:var(--t-fast);position:relative;overflow:hidden;font-size:20px;
}
.img-slot:hover{border-color:rgba(96,165,250,0.4);background:var(--glass-1);transform:scale(1.02)}
.img-slot .slot-label{font-size:10px;color:var(--text3);margin-top:4px;text-align:center}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
.img-slot .img-overlay{
position:absolute;inset:0;background:rgba(0,0,0,.55);
display:flex;align-items:center;justify-content:center;
opacity:0;transition:var(--t-fast);border-radius:10px;font-size:12px;color:#fff;
}
.img-slot:hover .img-overlay{opacity:1}
.emotion-btns{display:flex;flex-wrap:wrap;gap:6px}
.emo-btn{
padding:5px 12px;border-radius:var(--r-full);
border:1px solid var(--glass-border);background:var(--glass-1);
color:var(--text2);font-size:11px;cursor:pointer;transition:var(--t-fast);font-weight:500;
}
.emo-btn:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.emo-btn.active{background:var(--blue-dim);border-color:rgba(96,165,250,0.35);color:var(--blue);box-shadow:var(--glow-blue)}
.save-btn{
width:100%;padding:11px;
background:linear-gradient(135deg,rgba(96,165,250,0.22),rgba(96,165,250,0.14));
border:1px solid rgba(96,165,250,0.35);
border-radius:var(--r-md);color:var(--blue);font-size:13px;
font-weight:600;font-family:var(--font-body);cursor:pointer;
margin-top:14px;transition:var(--t-fast);
box-shadow:var(--glow-blue);letter-spacing:0.2px;
}
.save-btn:hover{background:linear-gradient(135deg,rgba(96,165,250,0.32),rgba(96,165,250,0.22));box-shadow:0 0 28px rgba(96,165,250,0.25);transform:translateY(-1px)}
.save-btn.saved{background:linear-gradient(135deg,rgba(52,211,153,0.22),rgba(52,211,153,0.12));border-color:rgba(52,211,153,0.35);color:var(--green);box-shadow:var(--glow-green)}
/* ════════════ WATCHLIST ════════════════════════ */
.wl-pair-card{
background:var(--glass-1);
backdrop-filter:var(--blur-sm);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:16px;margin-bottom:10px;
transition:var(--t-med);box-shadow:var(--shadow-sm);
}
.wl-pair-card:hover{background:var(--glass-2);border-color:var(--glass-border-h);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.wl-pair-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wl-pair-name{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:-0.3px}
.wl-priority{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500}
.wl-tf-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tf-chip{font-size:11px;padding:3px 10px;border-radius:var(--r-full);border:1px solid;font-family:var(--font-mono);font-weight:500}
.tf-bull{background:var(--green-dim);color:var(--green);border-color:rgba(52,211,153,0.25)}
.tf-bear{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,0.25)}
.tf-neu{background:var(--glass-1);color:var(--text2);border-color:var(--glass-border)}
.wl-note{font-size:12.5px;color:var(--text2);line-height:1.55}
/* ════════════ WATCHLIST REDESIGN ════════════════ */
/* Quarter navigator */
.wl-quarter-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.wl-q-tab{padding:7px 16px;border-radius:var(--r-full);border:1px solid var(--glass-border);
background:var(--glass-1);color:var(--text2);font-size:11.5px;font-weight:600;cursor:pointer;
transition:var(--t-fast);font-family:var(--font-mono);letter-spacing:.5px;white-space:nowrap}
.wl-q-tab:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.wl-q-tab.active{background:var(--blue-dim);color:var(--blue);border-color:rgba(96,165,250,0.35);
box-shadow:var(--glow-blue)}
/* Week bar */
.wl-week-bar{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding-bottom:18px;
border-bottom:1px solid var(--glass-border)}
.wl-week-scroll{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.wl-week-chip{padding:5px 13px;border-radius:var(--r-full);border:1px solid var(--glass-border);
background:var(--glass-1);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;
transition:var(--t-fast);font-family:var(--font-mono);white-space:nowrap}
.wl-week-chip:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.wl-week-chip.active{background:rgba(52,211,153,0.12);color:var(--green);
border-color:rgba(52,211,153,0.35);box-shadow:var(--glow-green)}
.wl-add-week-btn{flex-shrink:0;padding:5px 14px;border-radius:var(--r-full);
border:1.5px dashed rgba(96,165,250,0.25);background:transparent;color:var(--text3);
font-size:11px;font-weight:700;cursor:pointer;transition:var(--t-fast);white-space:nowrap;
letter-spacing:.3px}
.wl-add-week-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
/* Week header */
.wl-week-header{display:flex;align-items:flex-start;justify-content:space-between;
margin-bottom:22px;gap:14px;flex-wrap:wrap;
padding:16px 18px;background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg)}
.wl-week-meta{flex:1;min-width:0}
.wl-week-title{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--text);
letter-spacing:-.4px;margin-bottom:3px}
.wl-week-date{font-size:11px;color:var(--text3);font-family:var(--font-mono);letter-spacing:.3px}
.wl-week-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.wl-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:var(--r-full);
border:1px solid;font-size:11px;font-weight:700;font-family:var(--font-mono);letter-spacing:.3px;
line-height:1}
.wl-badge.bull{background:rgba(52,211,153,0.12);color:var(--green);border-color:rgba(52,211,153,0.28)}
.wl-badge.bear{background:rgba(248,113,113,0.12);color:var(--red);border-color:rgba(248,113,113,0.28)}
.wl-badge.neu{background:var(--glass-2);color:var(--text2);border-color:var(--glass-border)}
.wl-badge.risk-off{background:rgba(248,113,113,0.10);color:var(--red);border-color:rgba(248,113,113,0.25)}
.wl-badge.risk-on{background:rgba(52,211,153,0.10);color:var(--green);border-color:rgba(52,211,153,0.25)}
.wl-week-actions{display:flex;gap:6px;flex-shrink:0}
.wl-week-btn{padding:5px 13px;border-radius:var(--r-full);border:1px solid var(--glass-border);
background:var(--glass-1);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;
transition:var(--t-fast)}
.wl-week-btn:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.wl-week-btn.danger:hover{background:rgba(248,113,113,0.12);color:var(--red);
border-color:rgba(248,113,113,0.3)}
.wl-week-btn.archive:hover{background:rgba(148,163,184,0.15);color:var(--text)}
.wl-week-btn.restore{color:var(--green);border-color:rgba(52,211,153,0.3)}
.wl-week-btn.restore:hover{background:rgba(52,211,153,0.12);border-color:rgba(52,211,153,0.5)}
.wl-week-btn.primary{color:var(--green);border-color:rgba(52,211,153,0.35);background:rgba(52,211,153,0.08)}
.wl-week-btn.primary:hover{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.55);color:var(--green)}
/* Inline edit input for milestones + goal items */
.cl-item.editing{cursor:default;box-shadow:0 0 0 2px var(--blue),inset 0 0 0 1px rgba(96,165,250,0.15)}
.cl-edit-input{
flex:1;font-size:12px;color:var(--text);background:var(--glass-1);
border:1px solid var(--glass-border-h);border-radius:6px;padding:5px 8px;
font-family:inherit;outline:none;min-width:0;
}
.cl-edit-input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(96,165,250,0.2)}
/* Pair grid */
.wl-pairs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
gap:14px;margin-bottom:24px}
.wl-pair-card-v2{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:var(--t-med);position:relative}
.wl-pair-card-v2:hover{background:var(--glass-2);border-color:var(--glass-border-h);
box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wl-pair-card-v2.high{border-top:2px solid var(--red)}
.wl-pair-card-v2.med{border-top:2px solid var(--gold)}
.wl-pair-card-v2.low{border-top:2px solid var(--green)}
/* Chart image area */
.wl-card-chart{width:100%;height:148px;display:block;background:var(--glass-1);
position:relative;overflow:hidden;border-bottom:1px solid var(--glass-border)}
.wl-card-chart-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.wl-pair-card-v2:hover .wl-card-chart-img{transform:scale(1.03)}
.wl-card-chart-placeholder{width:100%;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;
background:linear-gradient(135deg,rgba(96,165,250,0.04) 0%,rgba(52,211,153,0.04) 100%)}
.wl-card-chart-placeholder span{font-size:24px;opacity:.6}
.wl-card-chart-placeholder p{font-size:11px;color:var(--text3);font-family:var(--font-mono)}
.wl-card-chart-count{position:absolute;bottom:7px;right:8px;background:rgba(0,0,0,0.6);
backdrop-filter:var(--blur-xs);border-radius:var(--r-full);padding:2px 9px;
font-size:10px;font-family:var(--font-mono);color:rgba(255,255,255,0.75);letter-spacing:.3px}
.wl-card-body{padding:12px 14px 14px}
.wl-card-pair-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wl-card-pair-name{font-family:var(--font-head);font-size:15px;font-weight:800;
letter-spacing:-.3px;color:var(--text)}
.wl-card-badges{display:flex;gap:5px;align-items:center}
.wl-card-tfs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.wl-card-note{font-size:11.5px;color:var(--text2);line-height:1.55;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Add pair card */
.wl-add-pair-card{background:transparent;border:1.5px dashed rgba(96,165,250,0.18);
border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:8px;min-height:220px;cursor:pointer;transition:var(--t-fast);
color:var(--text3)}
.wl-add-pair-card:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
.wl-add-pair-card span{font-size:28px;opacity:.7}
.wl-add-pair-card p{font-size:12px;font-weight:600;letter-spacing:.3px}
/* ══════════════════════════════════════════════════════════════════
WATCHLIST v2 — Readiness Card, Market Overview, Rings & Gauges
══════════════════════════════════════════════════════════════════ */
/* Generic ring (readiness score + confidence rings) */
.wl-ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.wl-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.wl-ring-track{fill:none;stroke:var(--glass-2)}
.wl-ring-fill{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-out)}
.wl-ring-fill.wl-ring-good{stroke:var(--green)}
.wl-ring-fill.wl-ring-mid{stroke:var(--gold)}
.wl-ring-fill.wl-ring-low{stroke:var(--red)}
.wl-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* Weekly Readiness card */
.wl-readiness-card{display:flex;align-items:center;gap:26px;
background:linear-gradient(135deg,rgba(96,165,250,0.07),rgba(52,211,153,0.05));
border:1px solid var(--glass-border);border-radius:var(--r-lg);
padding:24px 28px;margin-bottom:18px;backdrop-filter:blur(20px)}
.wl-readiness-ring-col{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.wl-readiness-num{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--text)}
.wl-readiness-pct{font-size:14px;font-weight:600;color:var(--text2)}
.wl-readiness-status{font-size:12px;font-weight:700;color:var(--text2);text-align:center;
letter-spacing:.2px;white-space:nowrap}
.wl-readiness-divider{width:1px;align-self:stretch;background:var(--glass-border)}
.wl-readiness-factors{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.wl-readiness-title{font-family:var(--font-head);font-size:14px;font-weight:800;
color:var(--text);margin-bottom:4px}
.wl-factor-row{display:flex;align-items:center;gap:10px;font-size:12px}
.wl-factor-label{display:flex;align-items:center;gap:7px;color:var(--text2);min-width:150px;flex-shrink:0}
.wl-factor-dot{width:7px;height:7px;border-radius:50%;background:var(--glass-3);flex-shrink:0}
.wl-factor-dot.part{background:var(--gold)}
.wl-factor-dot.done{background:var(--green)}
.wl-factor-bar-track{flex:1;height:5px;border-radius:var(--r-full);background:var(--glass-2);overflow:hidden}
.wl-factor-bar-fill{height:100%;border-radius:var(--r-full);
background:linear-gradient(90deg,var(--blue),var(--green));transition:width .6s var(--ease-out)}
.wl-factor-pct{width:34px;text-align:right;color:var(--text3);font-family:var(--font-mono);font-size:11px}
@media (max-width: 780px){
.wl-readiness-card{flex-direction:column;gap:16px}
.wl-readiness-divider{width:100%;height:1px}
.wl-factor-label{min-width:120px}
}
/* Market Overview quick-glance row */
.wl-overview-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.wl-overview-widget{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:13px 14px;cursor:pointer;transition:var(--t-fast);
display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.wl-overview-widget:hover{background:var(--glass-2);border-color:var(--glass-border-h);transform:translateY(-1px)}
.wl-overview-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:700}
.wl-overview-gauge{align-items:center}
@media (max-width: 980px){.wl-overview-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 600px){.wl-overview-row{grid-template-columns:repeat(2,1fr)}}
/* Dollar Strength gauge (semi-circle) */
.wl-gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.wl-gauge-svg{width:100px;height:54px}
.wl-gauge-track{fill:none;stroke:var(--glass-2);stroke-width:7;stroke-linecap:round}
.wl-gauge-fill{fill:none;stroke:var(--blue);stroke-width:7;
stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease-out)}
.wl-gauge-needle-base{fill:var(--text2)}
.wl-gauge-readout{font-size:11px;font-weight:700;color:var(--text2);margin-top:-6px}
/* ── Redesigned pair cards ── */
.wl-card-confidence-ring{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.55);
border-radius:50%;padding:2px}
.wl-mini-ring-num{font-size:11px;font-weight:800;color:#fff}
.wl-card-chart{position:relative}
.wl-card-quick-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;
opacity:0;transition:opacity .18s ease}
.wl-pair-card-v2:hover .wl-card-quick-actions{opacity:1}
.wl-card-quick-actions button{width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,0.15);
background:rgba(0,0,0,0.55);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:var(--t-fast)}
.wl-card-quick-actions button:hover{background:rgba(0,0,0,0.8)}
.wl-card-quick-actions button.wl-qa-danger:hover{background:var(--red);border-color:var(--red)}
.wl-card-quick-actions .icn{width:13px;height:13px}
.wl-pair-archived{opacity:.55}
.wl-card-meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.wl-model-chip{font-size:10px;font-weight:600;color:var(--text2);background:var(--glass-2);
border:1px solid var(--glass-border);border-radius:var(--r-full);padding:3px 9px}
.wl-confluence-chip{font-size:10px;font-weight:600;color:var(--blue);background:var(--blue-dim);
border:1px solid rgba(96,165,250,0.25);border-radius:var(--r-full);padding:3px 9px;font-family:var(--font-mono)}
.tf-chip.tf-analyzed{box-shadow:inset 0 0 0 1px currentColor}
.wl-card-stars-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.wl-card-stars .icn{width:12px;height:12px}
.wl-card-stars-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.wl-card-expected{font-size:11.5px;color:var(--text2);line-height:1.5;margin-bottom:6px}
.wl-card-expected strong{color:var(--text);font-weight:700}
/* Archived section */
.wl-archived-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
color:var(--text3);cursor:pointer;padding:10px 2px;transition:var(--t-fast)}
.wl-archived-toggle:hover{color:var(--text2)}
.wl-archived-toggle .icn{width:14px;height:14px}
.wl-pairs-grid--archived{margin-bottom:16px}
/* Economic calendar "mark reviewed" */
.wl-cal-reviewed-btn{display:flex;align-items:center;gap:5px;background:var(--glass-1);
border:1px solid var(--glass-border);color:var(--text2);border-radius:var(--r-sm);
padding:5px 11px;font-size:11px;font-weight:600;cursor:pointer;transition:var(--t-fast)}
.wl-cal-reviewed-btn:hover{background:var(--glass-2)}
.wl-cal-reviewed-btn.active{background:var(--green-dim);color:var(--green);border-color:rgba(52,211,153,0.3)}
.wl-cal-reviewed-btn .icn{width:13px;height:13px}
/* ── Stage timeline (Expandable Pair Analysis modal) ── */
.wl-stage-timeline{display:flex;flex-direction:column;gap:0;margin:12px 0 18px}
.wl-stage-block{position:relative;padding:0 0 20px 26px}
.wl-stage-connector{position:absolute;left:6px;top:6px;bottom:-4px;width:2px;background:var(--glass-border)}
.wl-stage-connector.first{top:6px}
.wl-stage-block:last-child .wl-stage-connector{bottom:auto;height:14px}
.wl-stage-block::before{content:'';position:absolute;left:2px;top:4px;width:10px;height:10px;
border-radius:50%;background:var(--blue);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--glass-border)}
.wl-stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wl-stage-name{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--text)}
.wl-stage-body{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.wl-stage-charts{display:flex;gap:8px;flex-wrap:wrap}
.wl-stage-chart-thumb{width:84px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;
border:1px solid var(--glass-border);transition:var(--t-fast)}
.wl-stage-chart-thumb:hover{border-color:var(--blue);transform:scale(1.04)}
.wl-stage-no-chart{font-size:11px;color:var(--text3);font-style:italic;padding:6px 0}
.wl-stage-field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
color:var(--text3);font-weight:700;margin-bottom:5px}
.wl-stage-field textarea{width:100%;background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:8px 10px;color:var(--text);font-size:12.5px;font-family:var(--font-body);
resize:vertical;transition:var(--t-fast)}
.wl-stage-field textarea:focus{outline:none;border-color:var(--blue);background:var(--glass-2)}
.wl-stage-risk-row{display:flex;align-items:center;gap:10px}
.wl-stage-risk-row label{margin-bottom:0}
.wl-stage-liq-grid{display:flex;flex-wrap:wrap;gap:6px}
.wl-stage-liq-chip{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
background:var(--glass-1);border:1px solid var(--glass-border);color:var(--text3);
border-radius:var(--r-full);padding:4px 10px;cursor:pointer;transition:var(--t-fast)}
.wl-stage-liq-chip:hover{border-color:var(--glass-border-h);color:var(--text2)}
.wl-stage-liq-chip.checked{background:var(--green-dim);border-color:rgba(52,211,153,0.3);color:var(--green)}
.wl-stage-liq-chip .icn{width:11px;height:11px}
.wl-view-header-row2{display:flex;align-items:center;gap:14px;margin-top:10px}
.wl-star-row{display:inline-flex;gap:2px}
.wl-star-row .icn{width:14px;height:14px}
.wl-star-btn{cursor:pointer;display:inline-flex}
.wl-star-btn .icn{width:16px;height:16px}
/* Chart tag select on pending chart thumbnails (add/edit pair form) */
.wl-chart-thumb-tag{width:100%;margin-top:4px;font-size:10px;background:var(--glass-2);
border:1px solid var(--glass-border);color:var(--text2);border-radius:6px;padding:2px 4px}
[data-theme="light"] .wl-readiness-card{background:linear-gradient(135deg,rgba(37,99,235,0.05),rgba(4,135,94,0.04))}
[data-theme="light"] .wl-overview-widget{background:rgba(255,255,255,0.7)}
[data-theme="light"] .wl-stage-body{background:rgba(255,255,255,0.7)}
/* ── Daily Gameplan v2 additions ── */
.wl-day-session-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.wl-day-session-item{display:flex;flex-direction:column;gap:6px;background:var(--glass-1);
border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:10px 12px}
.wl-day-session-item .wl-badge{cursor:pointer;width:fit-content}
@media (max-width: 780px){.wl-day-session-row{grid-template-columns:repeat(2,1fr)}}
.wl-day-session-setup{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:8px}
@media (max-width: 780px){.wl-day-session-setup{grid-template-columns:1fr}}
.wl-day-vitals-row{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.wl-day-vital{display:flex;flex-direction:column;gap:5px}
.wl-day-sleep-input{width:64px;padding:5px 8px;font-size:12px}
/* ── Weekly Checklist + Weekly Focus ── */
.wl-checklist-focus-row{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-bottom:18px}
@media (max-width: 900px){.wl-checklist-focus-row{grid-template-columns:1fr}}
.wl-checklist-card,.wl-focus-card{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:18px 20px}
.wl-checklist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wl-checklist-title{font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--text)}
.wl-checklist-pct-wrap{display:flex;align-items:center;gap:8px}
.wl-checklist-pct{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text2);width:32px;text-align:right}
.wl-checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media (max-width: 520px){.wl-checklist-grid{grid-template-columns:1fr}}
.wl-checklist-row{display:flex;align-items:center;gap:9px;background:transparent;border:none;
color:var(--text2);font-size:12.5px;padding:7px 6px;border-radius:8px;cursor:pointer;
text-align:left;transition:var(--t-fast);width:100%}
.wl-checklist-row:hover{background:var(--glass-2)}
.wl-checklist-row.checked{color:var(--text)}
.wl-checklist-box{display:flex;color:var(--text3)}
.wl-checklist-box .icn{width:15px;height:15px}
.wl-checklist-row.checked .wl-checklist-box{color:var(--green)}
.wl-checklist-row.checked span:last-child{text-decoration:line-through;text-decoration-color:var(--glass-border-h)}
.wl-focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 520px){.wl-focus-grid{grid-template-columns:1fr}}
/* ── AI Trading Coach ── */
.wl-coach-card{background:linear-gradient(135deg,rgba(139,92,246,0.06),rgba(96,165,250,0.04));
border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:16px}
.wl-coach-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.wl-coach-head-left{display:flex;align-items:center;gap:10px}
.wl-coach-brain{display:flex;color:var(--blue)}
.wl-coach-brain .icn{width:17px;height:17px}
.wl-coach-badge{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:var(--r-full);
padding:2px 7px;line-height:1.4}
.wl-coach-chevron{display:flex;color:var(--text3);transition:transform .2s var(--ease-out)}
.wl-coach-chevron.open{transform:rotate(90deg)}
.wl-coach-chevron .icn{width:14px;height:14px}
.wl-coach-body{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.wl-coach-row{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;
padding:10px 12px;border-radius:var(--r-sm);background:var(--glass-1);color:var(--text2)}
.wl-coach-row.warn{border-left:3px solid var(--gold)}
.wl-coach-row.info{border-left:3px solid var(--blue)}
.wl-coach-row.good{border-left:3px solid var(--green)}
.wl-coach-icon{flex-shrink:0;margin-top:1px}
.wl-coach-row.warn .wl-coach-icon{color:var(--gold)}
.wl-coach-row.info .wl-coach-icon{color:var(--blue)}
.wl-coach-row.good .wl-coach-icon{color:var(--green)}
.wl-coach-icon .icn{width:14px;height:14px}
/* ── Performance Insights ── */
.wl-insights-card{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.wl-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media (max-width: 600px){.wl-insight-grid{grid-template-columns:1fr}}
.wl-insight-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 0;border-bottom:1px solid var(--glass-border)}
.wl-insight-label{font-size:12px;color:var(--text3);font-weight:600}
.wl-insight-value{font-size:12.5px;color:var(--text);font-weight:700;font-family:var(--font-mono);text-align:right}
.wl-insight-corr{margin-top:14px;padding-top:14px;border-top:1px solid var(--glass-border);
font-size:12px;color:var(--text2);line-height:1.6}
/* ── Weekly Reflection ── */
.wl-reflection-card{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.wl-reflection-locked{text-align:center;padding:28px 20px}
.wl-reflection-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
@media (max-width: 700px){.wl-reflection-grid{grid-template-columns:1fr}}
/* Empty state */
.wl-empty-state{text-align:center;padding:70px 20px}
.wl-empty-icon{font-size:46px;margin-bottom:14px;opacity:.7}
.wl-empty-title{font-family:var(--font-head);font-size:18px;font-weight:700;
color:var(--text);margin-bottom:8px}
.wl-empty-sub{font-size:13px;color:var(--text2);line-height:1.65;
max-width:340px;margin:0 auto}
/* ── Modals ── */
.wl-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.70);
backdrop-filter:blur(4px);z-index:900;opacity:0;pointer-events:none;transition:opacity .2s}
.wl-modal-overlay.open{opacity:1;pointer-events:all}
.wl-modal{position:fixed;top:50%;left:50%;
transform:translate(-50%,-48%) scale(0.96);
background:var(--surface);
border:1px solid var(--glass-border);
border-radius:18px;box-shadow:var(--shadow-xl);z-index:901;
width:92%;max-width:480px;max-height:88vh;overflow-y:auto;
opacity:0;pointer-events:none;
transition:all .22s cubic-bezier(0.34,1.56,0.64,1)}
.wl-modal.wl-modal-wide{max-width:760px}
.wl-modal.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}
.wl-modal-head{display:flex;align-items:center;justify-content:space-between;
padding:16px 20px 13px;border-bottom:1px solid var(--glass-border);
position:sticky;top:0;background:var(--surface);z-index:2;border-radius:18px 18px 0 0}
.wl-modal-title{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--text)}
.wl-modal-close{background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);cursor:pointer;font-size:13px;width:28px;height:28px;
border-radius:50%;display:flex;align-items:center;justify-content:center;
transition:var(--t-fast)}
.wl-modal-close:hover{background:var(--glass-2);color:var(--text)}
.wl-modal-body{padding:18px 20px 22px}
/* ── Form elements — dark-mode correct ── */
.wl-form-row{margin-bottom:14px}
.wl-form-label{font-size:10.5px;font-weight:700;color:var(--text3);letter-spacing:.7px;
text-transform:uppercase;margin-bottom:5px;display:block}
.wl-form-input,.wl-form-select,.wl-form-textarea{
width:100%;
background:var(--glass-2);
border:1px solid var(--glass-border);
border-radius:10px;padding:9px 12px;
color:var(--text);
font-size:13px;font-family:var(--font-body);
transition:var(--t-fast);box-sizing:border-box;
-webkit-appearance:none;appearance:none}
.wl-form-input:focus,.wl-form-select:focus,.wl-form-textarea:focus{
outline:none;border-color:var(--border-focus);background:var(--glass-3);
box-shadow:0 0 0 3px rgba(96,165,250,0.12)}
.wl-form-textarea{resize:vertical;min-height:80px;line-height:1.55}
.wl-form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.wl-form-select option{background:#1a2032;color:#f0f4ff}
.wl-form-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;
padding-top:14px;border-top:1px solid var(--glass-border)}
/* ── Buttons ── */
.wl-btn-primary{padding:8px 20px;border-radius:var(--r-full);border:none;
background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;
transition:var(--t-fast);letter-spacing:.2px}
.wl-btn-primary:hover{opacity:.88;transform:translateY(-1px);box-shadow:var(--glow-blue)}
.wl-btn-secondary{padding:8px 16px;border-radius:var(--r-full);
border:1px solid var(--glass-border);background:var(--glass-2);color:var(--text2);
font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--t-fast)}
.wl-btn-secondary:hover{background:var(--glass-3);color:var(--text)}
.wl-btn-danger{padding:8px 16px;border-radius:var(--r-full);
border:1px solid rgba(248,113,113,0.3);background:rgba(248,113,113,0.1);
color:var(--red);font-size:12.5px;font-weight:600;cursor:pointer;transition:var(--t-fast)}
.wl-btn-danger:hover{background:rgba(248,113,113,0.2)}
/* ── TF selector in modal ── */
.wl-tf-selector{display:flex;gap:7px;flex-wrap:wrap}
.wl-tf-opt{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;
border:1px solid var(--glass-border);background:var(--glass-2);cursor:pointer;
font-size:11px;font-family:var(--font-mono);font-weight:500;transition:var(--t-fast)}
.wl-tf-opt span{color:var(--text2);min-width:44px}
.wl-tf-opt select{background:transparent;border:none;color:var(--text);font-size:11px;
font-family:var(--font-mono);outline:none;cursor:pointer;padding:0 2px;
-webkit-appearance:none}
.wl-tf-opt select option{background:#1a2032;color:#f0f4ff}
/* ── Chart upload zone ── */
.wl-chart-upload-zone{border:1.5px dashed rgba(96,165,250,0.22);border-radius:12px;
padding:26px 20px;text-align:center;cursor:pointer;transition:var(--t-fast);margin-top:4px}
.wl-chart-upload-zone:hover{border-color:var(--blue);background:var(--blue-dim)}
.wl-chart-upload-zone p{font-size:11.5px;color:var(--text3);margin-top:6px}
.wl-chart-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:9px;margin-bottom:12px}
.wl-chart-thumb-wrap{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:16/9;
border:1px solid var(--glass-border)}
.wl-chart-thumb{width:100%;height:100%;object-fit:cover;display:block}
.wl-chart-thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.72);
padding:3px 7px;font-size:9.5px;color:rgba(255,255,255,0.8);font-family:var(--font-mono);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-chart-thumb-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.65);
border:none;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;
font-size:10px;display:flex;align-items:center;justify-content:center;transition:var(--t-fast)}
.wl-chart-thumb-del:hover{background:var(--red)}
/* ── VIEW modal styles ── */
.wl-view-header{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--glass-border)}
.wl-view-note{margin-top:12px;font-size:13px;color:var(--text2);line-height:1.6;
padding:11px 13px;background:var(--glass-1);border-radius:10px;
border-left:2px solid rgba(96,165,250,0.3)}
.wl-view-charts-section{margin-bottom:4px}
.wl-view-section-label{font-size:10px;font-weight:700;color:var(--text3);
letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.wl-view-chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.wl-view-chart-item{border-radius:10px;overflow:hidden;border:1px solid var(--glass-border);
aspect-ratio:16/9;cursor:pointer;position:relative;transition:var(--t-fast)}
.wl-view-chart-item:hover{border-color:var(--glass-border-h);box-shadow:var(--shadow-sm);
transform:scale(1.01)}
.wl-view-chart-item img{width:100%;height:100%;object-fit:cover;display:block}
.wl-view-chart-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);
padding:4px 8px;font-size:9.5px;color:rgba(255,255,255,0.8);font-family:var(--font-mono);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-view-no-charts{text-align:center;padding:30px 20px;color:var(--text3);
font-size:12px;font-style:italic;background:var(--glass-1);border-radius:10px;
border:1px dashed var(--glass-border)}
/* ── Full-screen lightbox ── */
.wl-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.94);z-index:1000;
display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
transition:opacity .2s;flex-direction:column}
.wl-lightbox.open{opacity:1;pointer-events:all}
.wl-lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:8px;
box-shadow:0 0 80px rgba(0,0,0,0.8)}
.wl-lightbox-close{position:fixed;top:16px;right:20px;
background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.15);
color:#fff;font-size:18px;width:36px;height:36px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:var(--t-fast)}
.wl-lightbox-close:hover{background:rgba(255,255,255,0.22)}
/* Lightbox v2 — toolbar, pan/zoom stage */
.wl-lb-toolbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;
background:rgba(20,22,28,0.9);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-full);
padding:6px;z-index:1001}
.wl-lb-toolbar button{width:34px;height:34px;border-radius:50%;border:none;background:transparent;
color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t-fast)}
.wl-lb-toolbar button:hover{background:rgba(255,255,255,0.14)}
.wl-lb-toolbar .icn{width:15px;height:15px}
.wl-lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab}
.wl-lb-stage:active{cursor:grabbing}
#wl-lb-img{transition:transform .1s linear;transform-origin:center center}
/* Annotation tool */
.wl-annotate-modal .wl-ann-toolbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);
display:flex;gap:8px;align-items:center;background:rgba(20,22,28,0.94);
border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-full);padding:6px 10px;z-index:1001}
.wl-ann-tool{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;
color:rgba(255,255,255,0.7);border-radius:var(--r-full);padding:6px 12px;font-size:12px;font-weight:600;
cursor:pointer;transition:var(--t-fast)}
.wl-ann-tool:hover{background:rgba(255,255,255,0.1)}
.wl-ann-tool.active{background:rgba(96,165,250,0.2);border-color:rgba(96,165,250,0.4);color:#fff}
.wl-ann-toolbar .icn{width:13px;height:13px}
.wl-ann-toolbar button{color:rgba(255,255,255,0.8);background:transparent;border:none;border-radius:var(--r-full);
padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px}
.wl-ann-toolbar button:hover{background:rgba(255,255,255,0.1)}
.wl-ann-toolbar input[type="color"]{width:28px;height:28px;border:none;border-radius:50%;background:none;cursor:pointer;padding:0}
.wl-ann-stage{position:relative;display:inline-flex;max-width:94vw;max-height:88vh}
.wl-ann-stage img{display:block;max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px}
.wl-ann-stage canvas{position:absolute;top:0;left:0;cursor:crosshair;border-radius:8px}
/* Compare viewer */
.wl-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:92vw;max-height:86vh}
.wl-compare-grid img{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#000}
@media (max-width: 780px){.wl-compare-grid{grid-template-columns:1fr;max-height:none;overflow-y:auto}}
/* Chart drag-reorder handle (pair form + day gallery) */
.wl-chart-thumb-drag{position:absolute;top:6px;left:6px;z-index:2;background:rgba(0,0,0,0.55);
border-radius:6px;padding:3px;color:#fff;cursor:grab;display:flex}
.wl-chart-thumb-drag .icn{width:12px;height:12px}
.wl-chart-thumb-wrap,.wl-day-chart-thumb-wrap{position:relative}
.wl-chart-thumb-wrap.dragging,.wl-day-chart-thumb-wrap.dragging{opacity:.4}
/* Compare-select checkbox on screenshot grid thumbnails */
.wl-view-chart-item{position:relative}
.wl-compare-check{position:absolute;top:6px;left:6px;z-index:2;width:16px;height:16px;cursor:pointer}
/* ── Light theme overrides ── */
[data-theme="light"] .wl-form-select option,
[data-theme="light"] .wl-tf-opt select option{background:#f0f4ff;color:#0f172a}
[data-theme="light"] .wl-modal{background:#fff;border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .wl-modal-head{background:#fff}
[data-theme="light"] .wl-form-input,
[data-theme="light"] .wl-form-select,
[data-theme="light"] .wl-form-textarea{
background:rgba(241,245,251,0.9);border-color:rgba(0,0,0,0.10);color:#0f172a}
[data-theme="light"] .wl-form-input:focus,
[data-theme="light"] .wl-form-select:focus,
[data-theme="light"] .wl-form-textarea:focus{
background:#fff;border-color:rgba(79,70,229,0.5)}
[data-theme="light"] .wl-tf-opt{background:rgba(241,245,251,0.9);border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .wl-tf-opt select{color:#0f172a}
[data-theme="light"] .wl-tf-opt span{color:#475569}
[data-theme="light"] .wl-q-tab{background:rgba(241,245,251,0.8);border-color:rgba(0,0,0,0.08);color:#64748b}
[data-theme="light"] .wl-q-tab:hover{background:#e2e8f0;color:#0f172a}
[data-theme="light"] .wl-week-header{background:rgba(241,245,251,0.6);border-color:rgba(0,0,0,0.07)}
[data-theme="light"] .wl-week-btn{background:rgba(241,245,251,0.8);border-color:rgba(0,0,0,0.08);color:#475569}
[data-theme="light"] .wl-pair-card-v2{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .wl-pair-card-v2:hover{background:#fff;border-color:rgba(0,0,0,0.14)}
[data-theme="light"] .wl-card-chart-placeholder{background:linear-gradient(135deg,rgba(79,70,229,0.04),rgba(5,150,105,0.04))}
[data-theme="light"] .wl-add-pair-card{border-color:rgba(79,70,229,0.2)}
[data-theme="light"] .wl-view-note{background:rgba(241,245,251,0.8);border-left-color:rgba(79,70,229,0.3)}
[data-theme="light"] .wl-view-chart-item{border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .wl-view-no-charts{background:rgba(241,245,251,0.5);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .wl-week-chip{background:rgba(241,245,251,0.8);border-color:rgba(0,0,0,0.08);color:#475569}
[data-theme="light"] .wl-chart-thumb-wrap{border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .wl-badge.neu{background:rgba(241,245,251,0.9);color:#64748b;border-color:rgba(0,0,0,0.09)}
/* Responsive */
@media (max-width: 640px){
.wl-pairs-grid{grid-template-columns:1fr}
.wl-form-2col{grid-template-columns:1fr}
.wl-week-bar{flex-wrap:wrap}
.wl-modal,.wl-modal.wl-modal-wide{max-width:96%;border-radius:14px}
.wl-modal-head{border-radius:14px 14px 0 0}
.wl-view-chart-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
/* ════════════════════════════════════════════════════
AI COACH — Premium Intelligence Interface
Aesthetic: dark neural / bioluminescent glow
════════════════════════════════════════════════════ */
/* Sidebar glow for AI nav item */
.sb-item.ai-glow .ico { filter: drop-shadow(0 0 6px rgba(167,139,250,0.7)); }
.sb-item.ai-glow:hover,
.sb-item.ai-glow.active {
background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(96,165,250,0.08));
border-left-color: var(--purple) !important;
}
/* Cover — gradient shimmer */
.ai-cover {
background: linear-gradient(135deg,
rgba(167,139,250,0.18) 0%,
rgba(96,165,250,0.14) 40%,
rgba(45,212,191,0.10) 100%) !important;
border: 1px solid rgba(167,139,250,0.22) !important;
position: relative; overflow: hidden;
}
.ai-cover::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(167,139,250,0.15), transparent);
pointer-events: none;
}
.ai-cover .cover-label { color: var(--purple) !important; opacity: 1 !important; }
/* ── Mode bar ── */
.ai-mode-bar {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 22px;
padding: 6px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
}
.ai-mode-btn {
flex: 1; min-width: 100px;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: var(--text2);
font-size: 12px; font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
transition: var(--t-fast);
white-space: nowrap;
text-align: center;
}
.ai-mode-btn:hover {
background: var(--glass-2);
color: var(--text);
border-color: var(--glass-border);
}
.ai-mode-btn.active {
background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(96,165,250,0.12));
color: var(--purple);
border-color: rgba(167,139,250,0.30);
box-shadow: 0 0 16px rgba(167,139,250,0.10);
}
/* ── Context panel ── */
.ai-context-panel {
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 16px;
font-size: 12px;
color: var(--text2);
line-height: 1.6;
min-height: 40px;
}
.ai-context-stat {
display: inline-flex; align-items: center; gap: 5px;
background: var(--glass-2);
border: 1px solid var(--glass-border);
border-radius: var(--r-full);
padding: 3px 10px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
color: var(--text2);
margin: 3px 3px 3px 0;
}
.ai-context-stat.green { color: var(--green); border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.08); }
.ai-context-stat.red { color: var(--red); border-color: rgba(248,113,113,0.25); background: rgba(248,113,113,0.08); }
.ai-context-stat.blue { color: var(--blue); border-color: rgba(96,165,250,0.25); background: rgba(96,165,250,0.08); }
.ai-context-stat.purple{ color: var(--purple);border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.08); }
/* ── Chart upload zone ── */
.ai-chart-upload-wrap { margin-bottom: 16px; }
.ai-chart-upload-zone {
border: 2px dashed rgba(167,139,250,0.25);
border-radius: var(--r-lg);
padding: 32px 20px;
text-align: center;
cursor: pointer;
transition: var(--t-fast);
background: linear-gradient(135deg, rgba(167,139,250,0.04), rgba(96,165,250,0.03));
}
.ai-chart-upload-zone:hover {
border-color: rgba(167,139,250,0.55);
background: rgba(167,139,250,0.08);
}
.ai-chart-upload-zone.drag-over {
border-color: var(--purple, #a78bfa);
border-style: solid;
background: rgba(167,139,250,0.14);
box-shadow: 0 0 0 2px rgba(167,139,250,0.25);
}
.ai-upload-icon { font-size: 32px; margin-bottom: 10px; }
.ai-upload-text { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ai-upload-hint { font-size: 11px; color: var(--text3); font-family: var(--font-mono); }
/* Chart thumbnails */
.ai-chart-thumbs {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.ai-chart-thumb {
position: relative; width: 120px; flex-shrink: 0;
}
.ai-chart-thumb img {
width: 100%; aspect-ratio: 16/9; object-fit: cover;
border-radius: 9px; border: 1px solid rgba(167,139,250,0.25);
display: block;
}
.ai-chart-thumb-del {
position: absolute; top: 4px; right: 4px;
background: rgba(0,0,0,0.7); border: none; color: #fff;
width: 20px; height: 20px; border-radius: 50%;
cursor: pointer; font-size: 10px;
display: flex; align-items: center; justify-content: center;
transition: var(--t-fast);
}
.ai-chart-thumb-del:hover { background: var(--red); }
.ai-chart-thumb-name {
font-size: 9.5px; color: var(--text3);
font-family: var(--font-mono);
margin-top: 4px; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Prompt area ── */
.ai-prompt-wrap {
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 20px;
transition: border-color .2s;
}
.ai-prompt-wrap:focus-within {
border-color: rgba(167,139,250,0.40);
box-shadow: 0 0 0 3px rgba(167,139,250,0.08);
}
.ai-prompt-input {
width: 100%; background: transparent; border: none;
color: var(--text); font-size: 13px; font-family: var(--font-body);
line-height: 1.6; resize: none; outline: none;
min-height: 60px;
}
.ai-prompt-input::placeholder { color: var(--text3); }
.ai-prompt-actions {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px; padding-top: 10px;
border-top: 1px solid var(--glass-border);
gap: 10px; flex-wrap: wrap;
}
.ai-prompt-chips {
display: flex; gap: 6px; flex-wrap: wrap; flex: 1;
}
.ai-chip {
padding: 4px 11px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
font-size: 11px; font-weight: 500; cursor: pointer;
transition: var(--t-fast); white-space: nowrap;
}
.ai-chip:hover { background: var(--glass-2); color: var(--text); border-color: var(--glass-border-h); }
.ai-chip.active {
background: rgba(167,139,250,0.12); color: var(--purple);
border-color: rgba(167,139,250,0.35);
}
/* Analyse button */
.ai-analyse-btn {
display: flex; align-items: center; gap: 8px;
padding: 9px 22px; border-radius: var(--r-full);
border: none; cursor: pointer; font-size: 13px; font-weight: 700;
font-family: var(--font-body);
background: linear-gradient(135deg, #7c3aed, #6366f1, #3b82f6);
color: #fff;
box-shadow: 0 4px 20px rgba(124,58,237,0.35), 0 1px 4px rgba(0,0,0,0.3);
transition: all .2s var(--ease-out);
position: relative; overflow: hidden;
flex-shrink: 0;
}
.ai-analyse-btn::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
opacity: 0; transition: opacity .2s;
}
.ai-analyse-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(124,58,237,0.45), 0 2px 6px rgba(0,0,0,0.35); }
.ai-analyse-btn:hover::before { opacity: 1; }
.ai-analyse-btn:active { transform: translateY(0); }
.ai-analyse-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ai-btn-icon {
font-size: 16px;
animation: none;
}
.ai-analyse-btn.loading .ai-btn-icon {
animation: ai-spin 1.2s linear infinite;
}
@keyframes ai-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Response area ── */
.ai-response-wrap {
background: var(--glass-1);
border: 1px solid rgba(167,139,250,0.18);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0 0 40px rgba(167,139,250,0.06);
}
.ai-response-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border);
background: linear-gradient(90deg, rgba(167,139,250,0.08), transparent);
}
.ai-response-badge {
display: flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 700; color: var(--purple);
letter-spacing: .3px;
}
.ai-badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 8px rgba(167,139,250,0.7);
animation: ai-pulse 2s ease-in-out infinite;
}
@keyframes ai-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(167,139,250,0.7); }
50% { opacity: .6; box-shadow: 0 0 14px rgba(167,139,250,0.4); }
}
.ai-response-meta {
font-size: 11px; color: var(--text3);
font-family: var(--font-mono); margin-right: auto;
}
.ai-response-body {
padding: 20px 22px;
font-size: 13.5px;
line-height: 1.72;
color: var(--text);
max-height: 680px;
width: 100%;
overflow-y: auto;
}
/* Response formatting */
.ai-p { margin-bottom: 12px; }
.ai-p:last-child { margin-bottom: 0; }
.ai-section-head {
font-size: 13px; font-weight: 800;
color: var(--text);
letter-spacing: -.2px;
margin: 18px 0 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--glass-border);
display: flex; align-items: center; gap: 8px;
}
.ai-section-head:first-child { margin-top: 0; }
.ai-emoji-head {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; font-weight: 700; color: var(--text);
margin: 16px 0 6px;
padding: 10px 14px;
background: var(--glass-1);
border-radius: 10px;
border-left: 2px solid rgba(167,139,250,0.4);
}
.ai-emoji-head:first-child { margin-top: 0; }
.ai-list-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 5px 0;
font-size: 13px;
}
.ai-list-item.numbered { align-items: flex-start; }
.ai-list-num {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(167,139,250,0.15);
color: var(--purple);
font-size: 10.5px; font-weight: 800;
flex-shrink: 0; margin-top: 1px;
font-family: var(--font-mono);
}
.ai-bullet {
color: rgba(167,139,250,0.7);
font-size: 10px;
margin-top: 4px;
flex-shrink: 0;
}
.ai-hr {
border: none;
border-top: 1px solid var(--glass-border);
margin: 16px 0;
}
.ai-response-body strong { color: var(--text); font-weight: 700; }
/* Thinking animation */
.ai-thinking {
display: flex; gap: 7px; padding: 18px 0; align-items: center;
}
.ai-thinking span {
width: 8px; height: 8px; border-radius: 50%;
background: var(--purple);
animation: ai-bounce 1.4s ease-in-out infinite;
}
.ai-thinking span:nth-child(1) { animation-delay: 0s; }
.ai-thinking span:nth-child(2) { animation-delay: .18s; }
.ai-thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes ai-bounce {
0%, 80%, 100% { transform: scale(0.7); opacity: .4; }
40% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 10px rgba(167,139,250,0.5); }
}
/* Error */
.ai-error {
padding: 16px; border-radius: 10px;
background: var(--red-dim); border: 1px solid rgba(248,113,113,0.25);
color: var(--red); font-size: 13px; line-height: 1.6;
}
/* ── History ── */
.ai-history-wrap { margin-bottom: 20px; }
.ai-history { display: flex; flex-direction: column; gap: 12px; }
.ai-history-turn {
border-radius: var(--r-lg); padding: 13px 16px;
border: 1px solid var(--glass-border);
font-size: 12.5px; line-height: 1.6;
}
.ai-history-turn.user {
background: var(--glass-1);
border-color: var(--glass-border);
}
.ai-history-turn.assistant {
background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(96,165,250,0.04));
border-color: rgba(167,139,250,0.14);
}
.ai-history-role {
font-size: 10.5px; font-weight: 700;
color: var(--text3); letter-spacing: .5px;
text-transform: uppercase; margin-bottom: 6px;
}
.ai-history-turn.assistant .ai-history-role { color: var(--purple); }
.ai-history-content { color: var(--text2); }
/* ── Light theme overrides ── */
[data-theme="light"] .ai-cover {
background: linear-gradient(135deg,
rgba(124,58,237,0.10) 0%,
rgba(99,102,241,0.08) 40%,
rgba(20,184,166,0.07) 100%) !important;
border-color: rgba(124,58,237,0.15) !important;
}
[data-theme="light"] .ai-mode-bar {
background: rgba(255,255,255,0.7);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ai-mode-btn.active {
background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08));
}
[data-theme="light"] .ai-prompt-wrap {
background: rgba(255,255,255,0.8);
border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ai-prompt-wrap:focus-within {
border-color: rgba(124,58,237,0.35);
box-shadow: 0 0 0 3px rgba(124,58,237,0.07);
}
[data-theme="light"] .ai-prompt-input { color: #0f172a; }
[data-theme="light"] .ai-response-wrap {
background: rgba(255,255,255,0.85);
border-color: rgba(124,58,237,0.15);
}
[data-theme="light"] .ai-response-header { background: linear-gradient(90deg, rgba(124,58,237,0.06), transparent); }
[data-theme="light"] .ai-response-body { color: #1e293b; }
[data-theme="light"] .ai-response-body strong { color: #0f172a; }
[data-theme="light"] .ai-emoji-head {
background: rgba(241,245,251,0.8);
border-left-color: rgba(124,58,237,0.3);
}
[data-theme="light"] .ai-context-panel {
background: rgba(255,255,255,0.7);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ai-chart-upload-zone {
border-color: rgba(124,58,237,0.20);
background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(99,102,241,0.03));
}
[data-theme="light"] .ai-chart-upload-zone:hover {
border-color: rgba(124,58,237,0.45);
background: rgba(124,58,237,0.06);
}
[data-theme="light"] .ai-history-turn.user { background: rgba(241,245,251,0.7); }
[data-theme="light"] .ai-history-turn.assistant {
background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(99,102,241,0.04));
border-color: rgba(124,58,237,0.12);
}
[data-theme="light"] .ai-list-num {
background: rgba(124,58,237,0.10);
}
[data-theme="light"] .ai-chip:hover {
background: rgba(241,245,251,0.9);
}
[data-theme="light"] .ai-chip.active {
background: rgba(124,58,237,0.08);
color: #6d28d9;
border-color: rgba(124,58,237,0.25);
}
[data-theme="light"] .ai-analyse-btn {
box-shadow: 0 4px 18px rgba(124,58,237,0.28), 0 1px 3px rgba(0,0,0,0.12);
}
[data-theme="light"] .ai-analyse-btn:hover {
box-shadow: 0 6px 24px rgba(124,58,237,0.38), 0 2px 5px rgba(0,0,0,0.14);
}
/* Responsive */
@media (max-width: 640px){
.ai-mode-bar {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 6px; padding: 5px;
margin-left: -14px; margin-right: -14px;
padding-left: 14px; padding-right: 14px;
border-radius: 0;
border-left: none; border-right: none;
mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.ai-mode-bar::-webkit-scrollbar { display: none; }
.ai-mode-btn {
flex: none; min-width: max-content;
font-size: 11.5px; padding: 8px 13px;
}
.ai-response-body { padding: 14px 15px; font-size: 13px; }
.ai-prompt-actions { flex-direction: column; align-items: stretch; }
.ai-analyse-btn { width: 100%; justify-content: center; }
.ai-prompt-chips { justify-content: flex-start; }
}
/* ════════════════════════════════════════════════════
WATCHLIST ECONOMIC CALENDAR
════════════════════════════════════════════════════ */
/* Section wrapper */
.wl-cal-section {
margin-top: 24px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Header */
.wl-cal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border);
background: linear-gradient(90deg, rgba(251,191,36,0.06), transparent);
}
.wl-cal-title {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-size: 13px; font-weight: 700;
color: var(--text);
}
.wl-cal-icon { font-size: 14px; }
.wl-cal-week-range {
font-family: var(--font-mono); font-size: 10px;
color: var(--text3); font-weight: 400; letter-spacing: .3px;
}
.wl-cal-controls {
display: flex; align-items: center; gap: 8px;
}
.wl-cal-filter-wrap {
display: flex; gap: 4px;
}
.wl-cal-filter-btn {
padding: 4px 10px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text3);
font-size: 10.5px; font-weight: 600; cursor: pointer;
transition: var(--t-fast); white-space: nowrap;
}
.wl-cal-filter-btn:hover { background: var(--glass-2); color: var(--text); }
.wl-cal-filter-btn.active {
background: rgba(251,191,36,0.12); color: var(--gold);
border-color: rgba(251,191,36,0.28);
}
.wl-cal-refresh-btn {
width: 26px; height: 26px; border-radius: 50%;
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
cursor: pointer; font-size: 13px; display: flex;
align-items: center; justify-content: center;
transition: var(--t-fast);
}
.wl-cal-refresh-btn:hover {
background: var(--glass-2); color: var(--text);
transform: rotate(180deg);
}
/* Body */
.wl-cal-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0;
}
/* Loading dots */
.wl-cal-loading {
grid-column: 1 / -1;
display: flex; gap: 6px; padding: 24px;
align-items: center; justify-content: center;
}
.wl-cal-loading span {
width: 7px; height: 7px; border-radius: 50%;
background: var(--gold); opacity: .4;
animation: wl-cal-bounce 1.3s ease-in-out infinite;
}
.wl-cal-loading span:nth-child(1) { animation-delay: 0s; }
.wl-cal-loading span:nth-child(2) { animation-delay: .18s; }
.wl-cal-loading span:nth-child(3) { animation-delay: .36s; }
@keyframes wl-cal-bounce {
0%,80%,100% { transform: scale(.7); opacity: .3; }
40% { transform: scale(1.2); opacity: 1; }
}
/* Error / empty */
.wl-cal-error, .wl-cal-empty {
grid-column: 1 / -1;
display: flex; gap: 8px; align-items: center;
padding: 20px; font-size: 12px; color: var(--text3);
justify-content: center;
}
.wl-cal-retry {
background: none; border: 1px solid var(--glass-border);
color: var(--blue); font-size: 11px; padding: 2px 8px;
border-radius: var(--r-full); cursor: pointer;
transition: var(--t-fast);
}
.wl-cal-retry:hover { background: var(--blue-dim); }
/* Day column */
.wl-cal-day {
border-right: 1px solid var(--glass-border);
min-width: 0;
}
.wl-cal-day:last-child { border-right: none; }
.wl-cal-day.past { opacity: .65; }
.wl-cal-day.today { background: rgba(251,191,36,0.04); }
.wl-cal-day-head {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px 7px;
border-bottom: 1px solid var(--glass-border);
background: var(--glass-1);
position: sticky; top: 0; z-index: 1;
}
.wl-cal-day-label {
display: flex; align-items: baseline; gap: 5px;
}
.wl-cal-day-label.today .wl-cal-day-name { color: var(--gold); }
.wl-cal-day-label.today .wl-cal-day-num { color: var(--gold); }
.wl-cal-day-name {
font-size: 10px; font-weight: 700; color: var(--text2);
text-transform: uppercase; letter-spacing: .5px;
}
.wl-cal-day-num {
font-family: var(--font-head); font-size: 17px; font-weight: 800;
color: var(--text); line-height: 1;
}
.wl-cal-day-count {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--text3); font-family: var(--font-mono);
}
.wl-cal-high-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--red);
box-shadow: 0 0 6px rgba(248,113,113,0.7);
animation: wl-cal-pulse 1.8s ease-in-out infinite;
}
@keyframes wl-cal-pulse {
0%,100% { opacity: 1; }
50% { opacity: .4; }
}
/* Events list */
.wl-cal-events { padding: 8px 0; }
/* Individual event */
.wl-cal-event {
display: flex; gap: 0; align-items: stretch;
margin: 0 8px 5px;
border-radius: 8px;
border: 1px solid var(--glass-border);
background: var(--glass-1);
overflow: hidden;
transition: var(--t-fast);
}
.wl-cal-event:hover {
background: var(--glass-2);
border-color: var(--glass-border-h);
}
.wl-cal-event.my-pair {
border-color: rgba(251,191,36,0.25);
background: rgba(251,191,36,0.05);
}
.wl-cal-event.released { opacity: .7; }
/* Impact stripe */
.wl-cal-event-impact {
width: 3px; flex-shrink: 0; border-radius: 0;
}
.wl-cal-event-impact.high { background: var(--red); }
.wl-cal-event-impact.med { background: var(--gold); }
.wl-cal-event-impact.low { background: var(--text3); }
/* Event body */
.wl-cal-event-body { padding: 6px 8px; flex: 1; min-width: 0; }
.wl-cal-event-row {
display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
flex-wrap: nowrap; overflow: hidden;
}
.wl-cal-currency {
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
color: var(--text2); flex-shrink: 0;
background: var(--glass-2); padding: 1px 5px;
border-radius: 4px; letter-spacing: .3px;
}
.wl-cal-event-name {
font-size: 11px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1;
}
.wl-cal-pair-tag {
font-size: 10px; color: var(--gold); flex-shrink: 0;
}
.wl-cal-event-meta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wl-cal-time {
font-family: var(--font-mono); font-size: 9.5px; color: var(--text3);
}
.wl-cal-meta-val {
font-family: var(--font-mono); font-size: 9.5px; color: var(--text3);
background: var(--glass-1); padding: 1px 5px; border-radius: 4px;
}
.wl-cal-meta-val.actual {
color: var(--green); background: rgba(52,211,153,0.08);
}
/* Light theme */
[data-theme="light"] .wl-cal-section {
background: rgba(255,255,255,0.7);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .wl-cal-header {
background: linear-gradient(90deg, rgba(251,191,36,0.05), transparent);
}
[data-theme="light"] .wl-cal-day-head { background: rgba(241,245,251,0.8); }
[data-theme="light"] .wl-cal-day.today { background: rgba(251,191,36,0.04); }
[data-theme="light"] .wl-cal-event { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .wl-cal-event:hover { background: rgba(255,255,255,0.95); }
[data-theme="light"] .wl-cal-event.my-pair {
border-color: rgba(217,119,6,0.22);
background: rgba(251,191,36,0.04);
}
[data-theme="light"] .wl-cal-currency { background: rgba(0,0,0,0.05); }
/* Responsive — stack days vertically on mobile */
@media (max-width: 640px){
.wl-cal-body { grid-template-columns: 1fr; }
.wl-cal-day { border-right: none; border-bottom: 1px solid var(--glass-border); }
.wl-cal-day:last-child { border-bottom: none; }
.wl-cal-filter-wrap { flex-wrap: wrap; }
}
/* Calendar iframe & fallback states */
.wl-cal-iframe-wrap { display: flex; flex-direction: column; }
.wl-cal-iframe-notice {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border);
background: rgba(251,191,36,0.05);
}
.wl-cal-iframe-icon { font-size: 16px; flex-shrink: 0; }
.wl-cal-iframe-title {
font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.wl-cal-iframe-sub {
font-size: 10.5px; color: var(--text3); font-family: var(--font-mono);
}
.wl-cal-ff-link {
margin-left: auto; flex-shrink: 0;
padding: 5px 12px; border-radius: var(--r-full);
background: rgba(251,191,36,0.12); color: var(--gold);
border: 1px solid rgba(251,191,36,0.28);
font-size: 11px; font-weight: 700; text-decoration: none;
transition: var(--t-fast);
}
.wl-cal-ff-link:hover { background: rgba(251,191,36,0.2); }
.wl-cal-iframe {
width: 100%; height: 480px; border: none;
background: var(--glass-1);
}
/* Fallback card when iframe also fails */
.wl-cal-ff-fallback {
grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 36px 20px; gap: 10px;
}
.wl-cal-ff-fallback-icon { font-size: 36px; margin-bottom: 4px; }
.wl-cal-ff-fallback-title {
font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text);
}
.wl-cal-ff-fallback-sub {
font-size: 12px; color: var(--text2); max-width: 320px; line-height: 1.6;
}
/* Light theme */
[data-theme="light"] .wl-cal-iframe-notice {
background: rgba(217,119,6,0.04);
}
[data-theme="light"] .wl-cal-iframe { background: #fff; }
/* ════════════════════════════════════════════════════
AI PAGE TABS (Coach / Chat switcher)
════════════════════════════════════════════════════ */
.ai-page-tabs {
display: flex; gap: 6px; margin-bottom: 20px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 5px;
width: fit-content;
}
.ai-page-tab {
display: flex; align-items: center; gap: 7px;
padding: 8px 20px; border-radius: 10px;
border: none; background: transparent;
color: var(--text2); font-size: 13px; font-weight: 600;
font-family: var(--font-body); cursor: pointer;
transition: var(--t-fast); position: relative;
}
.ai-page-tab:hover { background: var(--glass-2); color: var(--text); }
.ai-page-tab.active {
background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(96,165,250,0.12));
color: var(--purple);
box-shadow: 0 1px 8px rgba(167,139,250,0.15);
}
.ai-chat-badge {
position: absolute; top: 4px; right: 4px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--red);
box-shadow: 0 0 6px rgba(248,113,113,0.7);
}
/* ════════════════════════════════════════════════════
CHAT INTERFACE
════════════════════════════════════════════════════ */
.chat-container {
display: flex; flex-direction: column;
height: calc(100vh - 280px); /* fallback for browsers without :has() support */
min-height: 500px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
}
/* Chat tab: make the whole AI page a fixed-height flex column so the
chat container fills all remaining space under the tab bar, instead
of relying on a guessed "100vh - 280px" offset that leaves dead
space (or overflows) depending on screen size / chrome above it. */
#page-ai.ai-chat-active {
display: flex;
flex-direction: column;
height: calc(100vh - var(--topbar));
padding-bottom: 0;
}
#page-ai.ai-chat-active .page-inner {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
#page-ai.ai-chat-active #ai-chat-panel {
flex: 1;
min-height: 0;
display: flex;
}
#page-ai.ai-chat-active .chat-container {
height: auto;
flex: 1;
min-height: 0;
}
/* Header */
.chat-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border);
background: linear-gradient(90deg, rgba(167,139,250,0.08), transparent);
flex-shrink: 0;
}
.chat-header-info { display: flex; align-items: center; gap: 10px; }
.chat-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #3b82f6);
display: flex; align-items: center; justify-content: center;
font-size: 15px; color: #fff; flex-shrink: 0;
box-shadow: 0 0 14px rgba(124,58,237,0.35);
}
.chat-header-name {
font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text);
}
.chat-header-status {
font-size: 11px; color: var(--text3);
display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.chat-online-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px rgba(52,211,153,0.6);
animation: ai-pulse 2s ease-in-out infinite;
}
.chat-header-actions { display: flex; gap: 6px; }
.chat-action-btn {
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
cursor: pointer; font-size: 13px;
display: flex; align-items: center; justify-content: center;
transition: var(--t-fast);
}
.chat-action-btn:hover { background: var(--glass-2); color: var(--text); }
/* Messages area */
.chat-messages {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 16px 14px 8px;
display: flex; flex-direction: column; gap: 6px;
scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }
/* Message rows */
.chat-msg-row {
display: flex; align-items: flex-end; gap: 8px;
max-width: 100%;
opacity: 0; transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease;
}
.chat-msg-row.animate-in { opacity: 0; transform: translateY(10px); }
.chat-msg-row.visible,
.chat-msg-row:not(.animate-in) { opacity: 1; transform: none; }
.chat-msg-row.user { flex-direction: row-reverse; }
.chat-msg-row.assistant { flex-direction: row; }
/* Small avatars */
.chat-avatar-sm {
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, #7c3aed, #3b82f6);
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #fff; flex-shrink: 0;
align-self: flex-end;
}
.chat-avatar-sm.user {
background: var(--glass-2); border: 1px solid var(--glass-border);
font-size: 12px;
}
/* Bubbles */
.chat-bubble {
max-width: min(78%, 640px); border-radius: 16px;
padding: 10px 13px 7px;
font-size: 13px; line-height: 1.62;
position: relative; word-break: break-word;
}
.chat-bubble.user {
background: linear-gradient(135deg, #7c3aed, #6366f1);
color: #fff; border-radius: 16px 4px 16px 16px;
}
.chat-bubble.assistant {
background: var(--glass-2);
border: 1px solid var(--glass-border);
color: var(--text);
border-radius: 4px 16px 16px 16px;
}
.chat-bubble.error {
background: var(--red-dim);
border: 1px solid rgba(248,113,113,0.25);
border-radius: 4px 16px 16px 16px;
}
.chat-bubble.typing { padding: 12px 16px 10px; }
.chat-err-text { color: var(--red); font-size: 12.5px; }
/* Bubble images */
.chat-bubble-img-wrap { margin-bottom: 8px; }
.chat-bubble-img {
max-width: 100%; border-radius: 10px; display: block;
cursor: zoom-in; transition: opacity .2s;
border: 1px solid rgba(255,255,255,0.1);
}
.chat-bubble-img:hover { opacity: .9; }
/* Bubble content — assistant messages use AI formatter */
.chat-bubble.user .chat-bubble-content { color: rgba(255,255,255,0.95); }
.chat-bubble.assistant .chat-bubble-content .ai-p { margin-bottom: 8px; }
.chat-bubble.assistant .chat-bubble-content .ai-section-head {
font-size: 12px; margin: 12px 0 5px;
}
.chat-bubble.assistant .chat-bubble-content .ai-list-item { padding: 3px 0; font-size: 12.5px; }
.chat-bubble.assistant .chat-bubble-content .ai-emoji-head { font-size: 12.5px; padding: 7px 10px; }
/* Bubble meta (time + copy) */
.chat-bubble-meta {
display: flex; align-items: center; gap: 6px;
margin-top: 5px; justify-content: flex-end;
}
.chat-bubble-time {
font-family: var(--font-mono); font-size: 9.5px;
color: rgba(255,255,255,0.45);
}
.chat-bubble.assistant .chat-bubble-time { color: var(--text3); }
.chat-bubble-copy {
background: none; border: none; cursor: pointer;
font-size: 11px; color: var(--text3); padding: 0;
transition: var(--t-fast); line-height: 1;
}
.chat-bubble-copy:hover { color: var(--text); }
/* Typing dots */
.chat-typing-dots {
display: flex; gap: 5px; align-items: center; height: 16px;
}
.chat-typing-dots span {
width: 7px; height: 7px; border-radius: 50%;
background: var(--purple); opacity: .5;
animation: ai-bounce 1.4s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.chat-typing-dots span:nth-child(2) { animation-delay: .18s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .36s; }
/* Quick-start chips */
.chat-quick-chips {
display: flex; flex-wrap: wrap; gap: 7px;
padding: 8px 0 4px;
}
.chat-quick-chip {
padding: 6px 13px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
font-size: 11.5px; font-weight: 500; cursor: pointer;
transition: var(--t-fast); white-space: nowrap;
}
.chat-quick-chip:hover {
background: rgba(167,139,250,0.10);
color: var(--purple); border-color: rgba(167,139,250,0.28);
}
/* Slash command palette */
.chat-cmd-palette {
position: absolute; bottom: 68px; left: 12px; right: 12px;
background: var(--surface);
border: 1px solid var(--glass-border);
border-radius: 12px;
box-shadow: var(--shadow-xl);
z-index: 10; overflow: hidden;
max-height: 240px; overflow-y: auto;
}
.chat-cmd-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; cursor: pointer;
transition: var(--t-fast);
border-bottom: 1px solid var(--glass-border);
}
.chat-cmd-item:last-child { border-bottom: none; }
.chat-cmd-item:hover { background: var(--glass-2); }
.chat-cmd-icon { font-size: 14px; flex-shrink: 0; }
.chat-cmd-name {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
color: var(--purple); flex-shrink: 0; min-width: 80px;
}
.chat-cmd-desc { font-size: 11.5px; color: var(--text2); }
/* Image preview strip */
.chat-image-preview {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 8px 12px 0;
border-top: 1px solid var(--glass-border);
flex-shrink: 0;
}
.chat-img-thumb {
position: relative; width: 60px; height: 60px;
border-radius: 8px; overflow: hidden;
border: 1px solid var(--glass-border);
flex-shrink: 0;
}
.chat-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-img-del {
position: absolute; top: 2px; right: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: rgba(0,0,0,0.7); border: none; color: #fff;
font-size: 9px; cursor: pointer; display: flex;
align-items: center; justify-content: center;
}
.chat-img-del:hover { background: var(--red); }
/* Input area */
.chat-input-wrap {
display: flex; align-items: flex-end; gap: 8px;
padding: 10px 12px 12px;
border-top: 1px solid var(--glass-border);
flex-shrink: 0;
background: var(--glass-1);
}
.chat-attach-btn {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--glass-border);
background: var(--glass-2); color: var(--text2);
font-size: 15px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: var(--t-fast); align-self: flex-end;
}
.chat-attach-btn:hover { background: var(--glass-3); color: var(--text); }
.chat-input {
flex: 1; background: var(--glass-2);
border: 1px solid var(--glass-border);
border-radius: 18px; padding: 9px 14px;
color: var(--text); font-size: 13px; font-family: var(--font-body);
resize: none; outline: none; line-height: 1.5;
max-height: 140px; overflow-y: auto;
transition: border-color .2s;
min-height: 36px;
}
.chat-input:focus {
border-color: rgba(167,139,250,0.4);
box-shadow: 0 0 0 3px rgba(167,139,250,0.08);
}
.chat-input::placeholder { color: var(--text3); }
.chat-send-btn {
width: 36px; height: 36px; border-radius: 50%;
border: none; flex-shrink: 0;
background: linear-gradient(135deg, #7c3aed, #3b82f6);
color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: var(--t-fast);
box-shadow: 0 2px 12px rgba(124,58,237,0.3);
align-self: flex-end;
}
.chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 18px rgba(124,58,237,0.45); }
.chat-send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.chat-send-btn.loading svg { animation: ai-spin 1s linear infinite; }
/* Drag-drop overlay */
.chat-drop-overlay {
position: absolute; inset: 0;
background: rgba(124,58,237,0.18);
backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
border: 2px dashed rgba(167,139,250,0.5);
border-radius: var(--r-lg); z-index: 20;
}
.chat-drop-content {
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-size: 14px; font-weight: 700; color: var(--purple);
}
.chat-drop-content span:first-child { font-size: 36px; }
/* Light theme */
[data-theme="light"] .chat-container {
background: rgba(255,255,255,0.8);
border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .chat-header {
background: linear-gradient(90deg, rgba(124,58,237,0.06), transparent);
}
[data-theme="light"] .chat-bubble.assistant {
background: rgba(241,245,251,0.9);
border-color: rgba(0,0,0,0.07);
color: #1e293b;
}
[data-theme="light"] .chat-bubble.assistant .chat-bubble-time { color: #94a3b8; }
[data-theme="light"] .chat-input {
background: rgba(241,245,251,0.9);
border-color: rgba(0,0,0,0.09); color: #0f172a;
}
[data-theme="light"] .chat-input-wrap { background: rgba(241,245,251,0.5); }
[data-theme="light"] .chat-cmd-palette { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chat-quick-chip {
background: rgba(241,245,251,0.8);
border-color: rgba(0,0,0,0.07); color: #475569;
}
[data-theme="light"] .ai-page-tabs {
background: rgba(255,255,255,0.7);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ai-page-tab.active {
background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08));
}
/* Responsive */
@media (max-width: 640px){
.chat-container { height: calc(100vh - 220px); }
.chat-bubble { max-width: 90%; font-size: 12.5px; }
.ai-page-tabs { width: 100%; }
.ai-page-tab { flex: 1; justify-content: center; }
}
/* ── Calendar currency picker button & dropdown ── */
.wl-cal-cur-btn {
display: flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
font-size: 10.5px; font-weight: 600; cursor: pointer;
transition: var(--t-fast); white-space: nowrap;
max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.wl-cal-cur-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--glass-border-h); }
.wl-cal-cur-picker {
padding: 10px 12px 12px;
border-bottom: 1px solid var(--glass-border);
background: var(--glass-1);
}
.wl-cal-cur-picker-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px; gap: 8px;
font-size: 11px; font-weight: 700; color: var(--text2);
letter-spacing: .4px; text-transform: uppercase;
}
.wl-cal-cur-quick {
padding: 3px 9px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-2); color: var(--text2);
font-size: 10px; font-weight: 600; cursor: pointer;
transition: var(--t-fast);
}
.wl-cal-cur-quick:hover { background: var(--glass-3); color: var(--text); }
.wl-cal-cur-done {
padding: 3px 10px; border-radius: var(--r-full);
border: 1px solid rgba(52,211,153,0.3);
background: rgba(52,211,153,0.1); color: var(--green);
font-size: 10px; font-weight: 700; cursor: pointer;
transition: var(--t-fast);
}
.wl-cal-cur-done:hover { background: rgba(52,211,153,0.2); }
.wl-cal-cur-grid {
display: flex; gap: 6px; flex-wrap: wrap;
}
.wl-cal-cur-item {
display: flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: var(--r-full);
border: 1px solid var(--glass-border);
background: var(--glass-1); color: var(--text2);
font-size: 11px; font-weight: 600; cursor: pointer;
transition: var(--t-fast); user-select: none;
}
.wl-cal-cur-item input { display: none; }
.wl-cal-cur-item:hover { background: var(--glass-2); color: var(--text); }
.wl-cal-cur-item.checked {
background: rgba(251,191,36,0.12); color: var(--gold);
border-color: rgba(251,191,36,0.30);
}
.wl-cal-cur-flag { font-size: 13px; }
/* Light theme */
[data-theme="light"] .wl-cal-cur-picker { background: rgba(241,245,251,0.7); }
[data-theme="light"] .wl-cal-cur-item { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); color: #475569; }
[data-theme="light"] .wl-cal-cur-item.checked { background: rgba(217,119,6,0.08); color: #92400e; border-color: rgba(217,119,6,0.25); }
/* ════════════════════════════════════════════════════
CHART SLOT SORTABLE GRID
════════════════════════════════════════════════════ */
.chart-sort-hint {
font-size: 11px; color: var(--text3);
margin-bottom: 10px; padding: 6px 10px;
background: var(--glass-1); border: 1px solid var(--glass-border);
border-radius: 8px; text-align: center;
font-family: var(--font-mono); letter-spacing: .2px;
}
.chart-sort-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
user-select: none;
-webkit-user-select: none;
}
/* Each draggable slot */
.chart-sort-item {
display: flex; flex-direction: column;
border-radius: 10px;
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
cursor: default;
position: relative;
}
.chart-sort-item[draggable="true"] { cursor: grab; }
.chart-sort-item[draggable="true"]:active { cursor: grabbing; }
/* Drag states */
.chart-sort-item.dragging {
opacity: .35;
transform: scale(0.96);
}
.chart-sort-item.drag-over {
transform: scale(1.04);
box-shadow: 0 0 0 2px var(--blue), 0 4px 20px rgba(96,165,250,0.25);
z-index: 2;
}
.chart-sort-item.touch-dragging {
opacity: .3;
transform: scale(0.94);
}
/* Thumbnail area */
.chart-sort-thumb {
position: relative;
aspect-ratio: 16/10;
border-radius: 8px;
overflow: hidden;
background: var(--glass-1);
border: 1px solid var(--glass-border);
display: flex; align-items: center; justify-content: center;
transition: border-color .15s, box-shadow .15s;
}
.chart-sort-thumb.edit-mode {
cursor: pointer;
}
.chart-sort-thumb.edit-mode:hover {
border-color: rgba(96,165,250,0.4);
box-shadow: 0 0 0 2px rgba(96,165,250,0.15);
}
.chart-sort-thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;
pointer-events: none;
}
.chart-sort-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.48);
display: flex; align-items: center; justify-content: center;
gap: 6px;
font-size: 12px; font-weight: 600; color: #fff;
opacity: 0; transition: opacity .15s;
}
.chart-sort-thumb:hover .chart-sort-overlay { opacity: 1; }
.drag-handle {
font-size: 16px; opacity: .7; cursor: grab;
margin-right: 4px;
}
/* Empty slot */
.chart-sort-empty {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 5px; width: 100%; height: 100%;
padding: 14px 8px;
}
.chart-sort-empty span:first-child { font-size: 22px; opacity: .35; }
.chart-sort-empty span:nth-child(2) { font-size: 10px; color: var(--text3); }
.chart-sort-empty-hint { font-size: 9px; color: var(--text3); opacity: .6; }
/* Editable empty slots read as mini dropzones — dashed border, glow on
drag-over, focus ring for keyboard users */
.chart-sort-item:not(.has-img) .chart-sort-thumb.edit-mode {
border: 1.5px dashed var(--glass-border-h);
border-radius: inherit;
transition: border-color .2s var(--ease-out), background .2s var(--ease-out),
transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.chart-sort-item:not(.has-img) .chart-sort-thumb.edit-mode:hover {
border-color: var(--blue);
background: var(--blue-dim);
}
.chart-sort-thumb.edit-mode:focus-visible,
.chart-sort-thumb[tabindex]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
/* Footer row: label input + delete */
.chart-sort-footer {
display: flex; align-items: center; gap: 4px;
margin-top: 5px;
}
.chart-sort-label {
flex: 1; font-size: 10px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: 5px; padding: 3px 6px;
color: var(--text2); outline: none;
font-family: var(--font-mono);
transition: border-color .15s;
min-width: 0;
}
.chart-sort-label[readonly] {
background: transparent; border-color: transparent;
color: var(--text3); cursor: default;
}
.chart-sort-del {
background: none; border: none;
color: var(--text3); cursor: pointer;
font-size: 13px; padding: 2px 4px;
border-radius: 4px; flex-shrink: 0;
transition: color .15s;
line-height: 1;
}
.chart-sort-del:hover { color: var(--red); }
.chart-sort-clear {
font-size: 10px; color: var(--red);
background: none; border: none;
cursor: pointer; margin-top: 3px;
padding: 0; align-self: flex-start;
font-family: var(--font-mono);
opacity: .75;
transition: opacity .15s;
}
.chart-sort-clear:hover { opacity: 1; }
/* Ghost element for touch drag */
.drag-ghost {
position: fixed; z-index: 9999;
pointer-events: none;
opacity: .85;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
transform: scale(1.06) rotate(1.5deg);
transition: none;
overflow: hidden;
background: var(--surface);
}
/* Light theme */
[data-theme="light"] .chart-sort-thumb {
background: rgba(241,245,251,0.8);
border-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .chart-sort-label {
background: rgba(241,245,251,0.8);
border-color: rgba(0,0,0,0.08);
color: #475569;
}
[data-theme="light"] .chart-sort-label[readonly] {
background: transparent; color: #94a3b8;
}
[data-theme="light"] .chart-sort-hint {
background: rgba(241,245,251,0.6);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .drag-ghost { background: #fff; }
/* Responsive — 2 cols on mobile */
@media (max-width: 520px){
.chart-sort-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* ════════════ MONTHLY REVIEW ════════════════════════ */
.mr-nav{display:flex;align-items:center;gap:12px;margin-bottom:20px;
padding:10px 14px;background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);width:fit-content}
.mr-nav-btn{background:var(--glass-2);border:1px solid var(--glass-border);
color:var(--text2);width:30px;height:30px;border-radius:50%;cursor:pointer;
font-size:16px;display:flex;align-items:center;justify-content:center;
transition:var(--t-fast)}
.mr-nav-btn:hover{background:var(--glass-3);color:var(--text)}
.mr-nav-label{font-family:var(--font-head);font-size:14px;font-weight:700;
color:var(--text);min-width:140px;text-align:center}
.mr-reflect-block{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:12px;padding:14px 16px;margin-bottom:10px}
.mr-reflect-label{font-size:10.5px;font-weight:700;color:var(--text3);
text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px}
.mr-reflect-ta{min-height:75px;width:100%;box-sizing:border-box}
[data-theme="light"] .mr-nav{background:rgba(241,245,251,0.7);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .mr-reflect-block{background:rgba(241,245,251,0.6);border-color:rgba(0,0,0,0.07)}
/* ════════════ ACCOUNTS REDESIGN ════════════════════ */
/* Grid */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:6px}
.acc-empty{grid-column:1/-1;color:var(--text3);text-align:center;padding:30px;
font-style:italic;background:var(--glass-1);border:1px dashed var(--glass-border);
border-radius:var(--r-lg)}
/* Cards — clickable */
.acc-card{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;
transition:var(--t-med);position:relative;border-top:2px solid rgba(52,211,153,0.3)}
.acc-card:hover{background:var(--glass-2);border-color:var(--glass-border-h);
box-shadow:var(--shadow-md);transform:translateY(-2px)}
.acc-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.acc-name{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:-.2px}
.acc-status{font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--r-full);
letter-spacing:.4px}
.acc-status.active{background:var(--green-dim);color:var(--green);
border:1px solid rgba(52,211,153,0.28)}
.acc-status.pending{background:rgba(251,191,36,0.10);color:var(--gold);
border:1px solid rgba(251,191,36,0.22)}
.acc-status.completed{background:rgba(251,191,36,0.14);color:var(--gold);
border:1px solid rgba(251,191,36,0.32);display:inline-flex;align-items:center}
.acc-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.acc-row .k{color:var(--text3);font-weight:500}
.acc-row .v{font-family:var(--font-mono);font-weight:600}
.acc-pnl-toggle{cursor:pointer;border-radius:6px;margin:0 -6px 6px;padding:2px 6px;
transition:background .15s var(--ease-out)}
.acc-pnl-toggle:hover{background:var(--glass-2)}
.acc-pnl-toggle:hover .v::after{content:'⇄';margin-left:5px;font-size:10px;color:var(--text3)}
/* Recent outcomes dots */
.acc-recent-dots{display:flex;align-items:center;gap:4px;margin-top:11px;
padding-top:11px;border-top:1px solid var(--glass-border)}
.acc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.acc-dot.w{background:var(--green)}
.acc-dot.l{background:var(--red)}
.acc-dot.b{background:var(--text3)}
.acc-recent-label{font-size:10px;color:var(--text3);font-family:var(--font-mono);
margin-left:4px;letter-spacing:.3px}
/* Detail drawer */
.acc-detail-drawer{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);margin-bottom:20px;overflow:visible;
opacity:0;transform:translateY(-8px);pointer-events:none;
transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
.acc-detail-drawer.open{opacity:1;transform:translateY(0);pointer-events:auto}
.acc-detail-body{padding:16px 18px}
.acc-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.acc-ds{background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:12px;padding:11px 14px;text-align:center}
.acc-ds-label{font-size:10px;color:var(--text3);text-transform:uppercase;
letter-spacing:.6px;margin-bottom:4px;font-weight:600}
.acc-ds-val{font-family:var(--font-head);font-size:18px;font-weight:800}
.acc-ds-val.green{color:var(--green)}
.acc-ds-val.red{color:var(--red)}
.acc-ds-val.blue{color:var(--blue)}
.acc-ds-val.gold{color:var(--gold)}
/* ════════ ACCOUNT ANALYTICS — institutional dashboard ════════ */
.acc-an{ animation:pageIn .3s var(--ease-out) }
/* — Hero — */
.acc-hero{
display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
background:linear-gradient(145deg,var(--glass-2) 0%,var(--glass-0) 100%);
border:1px solid var(--glass-border);border-radius:var(--r-xl);
padding:20px 48px 20px 22px;margin-bottom:16px;position:relative;overflow:hidden;
}
.acc-hero-close{
position:absolute;top:14px;right:14px;z-index:2;width:26px;height:26px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2);
cursor:pointer;font-size:12px;line-height:1;padding:0;
transition:background .15s var(--ease-out),color .15s var(--ease-out);
}
.acc-hero-close:hover{background:var(--glass-3);color:var(--text1)}
.acc-hero::before{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(ellipse 70% 60% at 85% 15%,rgba(96,165,250,0.07) 0%,transparent 60%);
}
.acc-hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;position:relative;z-index:1}
.acc-hero-name{font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.02em}
.acc-hero-badges{display:flex;gap:6px;flex-wrap:wrap}
.acc-hero-badge{font-size:10px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-full);
background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2)}
.acc-hero-badge.status-active{background:var(--green-dim);border-color:rgba(52,211,153,.3);color:var(--green)}
.acc-hero-badge.status-archived{background:var(--glass-2);color:var(--text3)}
.acc-hero-badge.status-completed{background:rgba(251,191,36,0.14);border-color:rgba(251,191,36,.32);color:var(--gold);display:inline-flex;align-items:center}
.acc-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px 18px;position:relative;z-index:1}
.acc-hero-stat{min-width:0}
.acc-hero-stat-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:3px}
.acc-hero-stat-val{font-family:var(--font-head);font-size:17px;font-weight:800;letter-spacing:-.01em;font-feature-settings:'tnum'}
.acc-hero-stat-val.green{color:var(--green)}
.acc-hero-stat-val.red{color:var(--red)}
.acc-hero-stat-val.gold{color:var(--gold)}
.acc-hero-stat-val.blue{color:var(--blue)}
/* Health gauge (right side of hero) */
.acc-health{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;z-index:1;flex-shrink:0}
.acc-health-ring-wrap{position:relative;width:104px;height:104px;flex-shrink:0}
.acc-health-ring-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.acc-health-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.acc-health-grade{font-family:var(--font-head);font-size:22px;font-weight:800;line-height:1}
.acc-health-score{font-size:9.5px;color:var(--text3);margin-top:2px;font-weight:600}
.acc-health-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:6px}
.acc-health-why{position:relative;z-index:1;margin-top:2px}
.acc-health-why-btn{font-size:10px;color:var(--blue);background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;padding:2px 4px}
.acc-health-why-panel{
display:none;position:absolute;right:0;top:calc(100% + 6px);width:230px;z-index:20;
background:var(--bg2);border:1px solid var(--glass-border);border-radius:var(--r-md);
padding:10px 12px;box-shadow:var(--shadow-lg);font-size:11px;color:var(--text2);line-height:1.5;
}
.acc-health-why-panel.show{display:block}
.acc-health-why-panel ul{margin:0;padding-left:16px}
.acc-health-why-panel li{margin-bottom:3px}
@media (max-width: 640px){
.acc-hero{grid-template-columns:1fr}
.acc-health{flex-direction:row;justify-content:flex-start;gap:12px;margin-top:4px}
.acc-health-ring-wrap{width:76px;height:76px}
.acc-health-grade{font-size:17px}
}
/* — KPI Scorecard — */
.acc-kpi-scorecard{
display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;
}
.acc-kpi-card{
position:relative;background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:12px 13px;overflow:hidden;
transition:transform .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.acc-kpi-card:hover{transform:translateY(-2px);border-color:var(--glass-border-h);box-shadow:var(--shadow-sm)}
.acc-kpi-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:6px}
.acc-kpi-card-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;
display:flex;align-items:center;gap:4px;cursor:help}
.acc-kpi-card-trend{font-size:9.5px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:2px}
.acc-kpi-card-trend.up{color:var(--green)}
.acc-kpi-card-trend.down{color:var(--red)}
.acc-kpi-card-trend.flat{color:var(--text3)}
.acc-kpi-card-val{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:-.01em;
font-feature-settings:'tnum';margin-bottom:6px}
.acc-kpi-card-val.green{color:var(--green)}
.acc-kpi-card-val.red{color:var(--red)}
.acc-kpi-card-val.gold{color:var(--gold)}
.acc-kpi-card-spark{width:100%;height:26px;display:block}
@media (max-width: 1080px){ .acc-kpi-scorecard{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 900px){ .acc-kpi-scorecard{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 640px){ .acc-kpi-scorecard{grid-template-columns:repeat(2,1fr);gap:8px} }
/* — Equity curve section — */
.acc-eq-section{
background:var(--glass-0);border:1px solid var(--glass-border);border-radius:var(--r-lg);
padding:16px 18px 12px;margin-bottom:16px;
}
.acc-eq-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.acc-eq-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.acc-eq-toggles{display:flex;gap:6px;flex-wrap:wrap}
.acc-eq-canvas-wrap{position:relative;width:100%}
.acc-eq-empty{color:var(--text3);text-align:center;padding:40px 10px;font-style:italic;font-size:12px}
/* Section headers reused for new analytics blocks */
.acc-an-sec-head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);
margin:0 0 10px}
/* Milestone edit/delete buttons */
.acc-ms-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.cl-item:hover .acc-ms-actions{opacity:1}
.aff-card:hover .acc-ms-actions{opacity:1}
/* Progress bar (kept for future use) */
.acc-progress-wrap{margin-top:12px}
.acc-progress-label{display:flex;justify-content:space-between;font-size:11px;
color:var(--text2);margin-bottom:5px}
.acc-progress-bg{height:4px;background:var(--glass-2);border-radius:var(--r-full);overflow:hidden}
.acc-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),rgba(52,211,153,0.6));
border-radius:var(--r-full);transition:width .9s var(--ease-out)}
/* ════════ CHALLENGE PROGRESS TRACKER (Prop Firm Challenge accounts) ════════ */
.acc-chal-card{
position:relative;overflow:hidden;
background:linear-gradient(150deg,var(--glass-2) 0%,var(--glass-0) 100%);
border:1px solid var(--glass-border);border-radius:var(--r-xl);
padding:20px 22px 22px;margin-bottom:16px;
animation:pageIn .35s var(--ease-out);
}
.acc-chal-card::before{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(ellipse 65% 55% at 12% 10%,rgba(52,211,153,0.08) 0%,transparent 60%);
}
.acc-chal-card.complete{border-color:rgba(251,191,36,0.35);box-shadow:0 0 0 1px rgba(251,191,36,0.12),0 8px 32px rgba(251,191,36,0.08)}
.acc-chal-card.complete::before{background:radial-gradient(ellipse 65% 55% at 12% 10%,rgba(251,191,36,0.14) 0%,transparent 60%)}
/* Phase 1 complete uses a blue theme so it reads distinctly from Phase 2's gold "ready for verification" state */
.acc-chal-card.complete.phase1{border-color:rgba(96,165,250,0.35);box-shadow:0 0 0 1px rgba(96,165,250,0.12),0 8px 32px rgba(96,165,250,0.08)}
.acc-chal-card.complete.phase1::before{background:radial-gradient(ellipse 65% 55% at 12% 10%,rgba(96,165,250,0.14) 0%,transparent 60%)}
.acc-chal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:16px}
.acc-chal-title{font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.acc-chal-sub{font-size:11.5px;color:var(--text3);margin-top:3px;max-width:420px;line-height:1.4}
.acc-chal-badge{
font-size:10px;font-weight:800;letter-spacing:.05em;padding:6px 12px;border-radius:var(--r-full);
background:linear-gradient(135deg,rgba(251,191,36,0.22),rgba(251,191,36,0.10));
border:1px solid rgba(251,191,36,0.4);color:var(--gold);white-space:nowrap;
box-shadow:0 0 16px rgba(251,191,36,0.18);
}
/* Phase 1 complete uses the blue theme, matching the border/progress-bar/checkmark above */
.acc-chal-card.complete.phase1 .acc-chal-badge{
background:linear-gradient(135deg,rgba(96,165,250,0.22),rgba(96,165,250,0.10));
border:1px solid rgba(96,165,250,0.4);color:var(--blue);
box-shadow:0 0 16px rgba(96,165,250,0.18);
}
.acc-chal-target-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:16px}
.acc-chal-target-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:700;white-space:nowrap}
.acc-chal-tbtns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acc-chal-tbtn{
font-family:var(--font-body);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:var(--r-full);
background:var(--glass-1);border:1px solid var(--glass-border);color:var(--text2);cursor:pointer;
transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),transform .15s var(--ease-out);
}
.acc-chal-tbtn:hover{background:var(--glass-2);border-color:var(--glass-border-h);transform:translateY(-1px)}
.acc-chal-tbtn.active{background:var(--green-dim);border-color:rgba(52,211,153,.4);color:var(--green)}
.acc-chal-card.complete .acc-chal-tbtn.active{background:rgba(251,191,36,0.16);border-color:rgba(251,191,36,.4);color:var(--gold)}
.acc-chal-card.complete.phase1 .acc-chal-tbtn.active{background:rgba(96,165,250,0.16);border-color:rgba(96,165,250,.4);color:var(--blue)}
.acc-chal-custom-input{
width:64px;font-family:var(--font-body);font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:var(--r-full);
background:var(--glass-1);border:1px solid var(--glass-border-h);color:var(--text);text-align:center;
}
.acc-chal-custom-input:focus{outline:none;border-color:var(--green)}
.acc-chal-complete-banner{
display:flex;align-items:center;gap:10px;position:relative;z-index:1;margin-bottom:14px;
font-family:var(--font-head);font-size:14px;font-weight:800;color:var(--gold);
}
.acc-chal-card.phase1 .acc-chal-complete-banner{color:var(--blue)}
.acc-chal-check{width:26px;height:26px;flex-shrink:0}
.acc-chal-check-circle{stroke:var(--gold);stroke-width:2.5;stroke-dasharray:146;stroke-dashoffset:146;animation:chalCheckCircle .5s var(--ease-out) forwards}
.acc-chal-check-mark{stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:chalCheckMark .35s var(--ease-out) .4s forwards}
.acc-chal-card.phase1 .acc-chal-check-circle{stroke:var(--blue)}
.acc-chal-card.phase1 .acc-chal-check-mark{stroke:var(--blue)}
@keyframes chalCheckCircle{to{stroke-dashoffset:0}}
@keyframes chalCheckMark{to{stroke-dashoffset:0}}
.acc-chal-progress-wrap{position:relative;z-index:1;margin-bottom:34px}
.acc-chal-progress-outer{
position:relative;width:100%;height:30px;border-radius:var(--r-full);
background:var(--glass-2);border:1px solid var(--glass-border);overflow:hidden;
box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
}
.acc-chal-progress-fill{
position:relative;height:100%;border-radius:var(--r-full);min-width:30px;
background:linear-gradient(90deg,#065f46 0%,#059669 55%,#10b981 100%);
transition:width 1s var(--ease-out),background 0.5s var(--ease-out);
box-shadow:0 0 16px rgba(5,150,105,0.4);
display:flex;align-items:center;justify-content:flex-end;
}
.acc-chal-progress-fill.gold{
background:linear-gradient(90deg,#92400e 0%,#b45309 55%,#d97706 100%);
box-shadow:0 0 20px rgba(180,83,9,0.5);
}
.acc-chal-card.phase1 .acc-chal-progress-fill.gold{
background:linear-gradient(90deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%);
box-shadow:0 0 20px rgba(37,99,235,0.5);
}
.acc-chal-progress-glow{
position:absolute;top:0;right:0;bottom:0;width:36px;
background:none;
}
[data-theme="light"] .acc-chal-progress-glow{
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18));
animation:chalGlowPulse 2.2s ease-in-out infinite;
}
@keyframes chalGlowPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.acc-chal-progress-pct{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-size:12.5px;font-weight:800;letter-spacing:.01em;
color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,0.35);pointer-events:none;z-index:2;
}
.acc-chal-milestones{position:relative;height:20px;margin-top:6px}
.acc-chal-ms{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.acc-chal-ms-dot{width:7px;height:7px;border-radius:50%;background:var(--glass-3);border:1px solid var(--glass-border-h);transition:background .3s,border-color .3s,box-shadow .3s}
.acc-chal-ms.reached .acc-chal-ms-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(52,211,153,0.6)}
.acc-chal-card.complete .acc-chal-ms.reached .acc-chal-ms-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(251,191,36,0.6)}
.acc-chal-card.complete.phase1 .acc-chal-ms.reached .acc-chal-ms-dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 8px rgba(96,165,250,0.6)}
.acc-chal-ms-lbl{font-size:9px;color:var(--text3);font-weight:600}
.acc-chal-ms.reached .acc-chal-ms-lbl{color:var(--text2)}
.acc-chal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:1}
.acc-chal-stat{background:var(--glass-1);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:11px 13px}
.acc-chal-stat-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px}
.acc-chal-stat-val{font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:-.01em;font-feature-settings:'tnum';color:var(--text)}
.acc-chal-stat-val.green{color:var(--green)}
.acc-chal-stat-val.red{color:var(--red)}
.acc-chal-stat-val.gold{color:var(--gold)}
.acc-chal-stat-val.blue{color:var(--blue)}
.acc-chal-card.complete.phase1 .acc-chal-stat-val.gold{color:var(--blue)}
.acc-chal-confetti{
position:absolute;top:-10px;width:6px;height:6px;border-radius:1px;opacity:0;z-index:0;
animation:chalConfettiFall 2.4s ease-in infinite;
}
@keyframes chalConfettiFall{
0%{opacity:0;transform:translateY(0) rotate(0deg)}
8%{opacity:.75}
85%{opacity:.4}
100%{opacity:0;transform:translateY(180px) rotate(340deg)}
}
@media (max-width: 900px){ .acc-chal-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){
.acc-chal-card{padding:16px 14px 18px}
.acc-chal-target-row{flex-direction:column;align-items:flex-start;gap:8px}
.acc-chal-progress-outer{height:26px}
}
[data-theme="light"] .acc-chal-progress-pct{color:#0f172a;text-shadow:0 1px 2px rgba(255,255,255,0.6)}
[data-theme="light"] .acc-chal-progress-fill.gold .acc-chal-progress-pct,
[data-theme="light"] .acc-chal-progress-fill:not(.gold) .acc-chal-progress-pct{color:#0f172a}
/* Light theme */
[data-theme="light"] .acc-card{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .acc-card:hover{background:#fff;border-color:rgba(0,0,0,0.14)}
[data-theme="light"] .acc-detail-drawer{background:rgba(241,245,251,0.6);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .acc-ds{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .acc-empty{background:rgba(241,245,251,0.5);border-color:rgba(0,0,0,0.08)}
@media (max-width: 640px){
.acc-grid{grid-template-columns:1fr}
.acc-detail-stats{grid-template-columns:repeat(2,1fr)}
}
/* ════════════ DASHBOARD — SINGLE ORGANIZED COLUMN ══════════════ */
.page#page-dashboard { overflow-y: auto; overflow-x: clip; }
.page#page-dashboard > .dash-layout { max-width: none; margin: 0; width: 100%; }
.dash-layout {
display: block;
width: 100%;
box-sizing: border-box;
}
.dash-left {
min-width: 0;
overflow: visible; /* was hidden — clips child data-table-wrap scroll context */
padding: 20px 24px 40px;
box-sizing: border-box;
}
/* ── Widgets row: KPI bento grid + NxTGen Score, side by side ── */
.dash-widgets-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 14px;
align-items: stretch;
margin-bottom: 10px;
}
.dash-widgets-row .kpi-grid-bento { margin-bottom: 0; height: 100%; }
/* ── Dashboard analytics stack (hero shape-gauge rows + mini stat chips) ── */
.dash-kpi-analytics { display: flex; flex-direction: column; gap: 10px; height: 100%; min-width: 0; }
.dash-an-row1 { flex: none; }
.dash-an-row2 { flex: none; }
.dash-kpi-mini { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 0; flex: 1; }
@media (max-width: 900px){
.dash-kpi-mini { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
.dash-kpi-mini { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 420px){
.dash-kpi-mini { gap: 6px; }
}
/* ── Calendar panel: normal in-flow section, styled like other dashboard cards ── */
.dash-cal-panel {
background: var(--glass-0);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 16px 18px 20px;
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
overflow: visible;
}
.dash-cal-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: inherit;
background: radial-gradient(ellipse 70% 45% at 60% 0%,
rgba(96,165,250,0.05) 0%, transparent 60%);
pointer-events: none;
}
[data-theme="light"] .dash-cal-panel {
background: var(--glass-1);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-shine);
}
.dash-cal-top {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 12px;
gap: 8px;
position: relative;
z-index: 1;
}
.dash-cal-controls {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
/* Compact KPI strip — 4 col on desktop */
.dash-cal-panel .cal-kpi-row {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 0 0 12px;
}
.dash-cal-panel .cal-kpi {
padding: 10px 12px;
border-radius: var(--r-md);
}
.dash-cal-panel .cal-kpi-val { font-size: 15px; }
.dash-cal-panel .cal-kpi-label { font-size: 8.5px; }
/* Calendar day cells */
.dash-cal-panel .cal-day {
min-height: 64px;
padding: 6px 7px;
}
.dash-cal-panel .cal-day-num { font-size: 11px; }
.dash-cal-panel .cal-day-pnl { font-size: 9.5px; }
.dash-cal-panel .cal-day-count { font-size: 8px; }
.dash-cal-panel .cal-day-pairs { font-size: 7px; }
.dash-cal-panel .cal-month-label { font-size: 15px; }
.dash-cal-panel .cal-grid-wrap { border-radius: var(--r-lg); }
.dash-cal-panel .cal-dow { font-size: 8px; padding: 5px 0; }
.dash-cal-panel .cal-nav { width: 28px; height: 28px; font-size: 15px; }
/* ── Responsive breakpoints ── */
@media (max-width: 1080px){
.dash-widgets-row { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 900px){
.dash-widgets-row { grid-template-columns: 1fr; }
.nxt-score-card { max-width: 380px; margin: 0 auto; width: 100%; }
.dash-cal-panel .cal-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}
@media (max-width: 640px){
.dash-left { padding: 12px 12px 20px; }
.dash-cal-panel {
padding: 12px;
border-radius: var(--r-lg);
}
.dash-cal-panel .cal-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.dash-cal-controls #cal-acc-filter { display: none; }
.dash-cal-panel .cal-day { min-height: 46px; padding: 3px 4px; }
.dash-cal-panel .cal-day-num { font-size: 9px; }
.dash-cal-panel .cal-day-pnl { font-size: 8px; }
.dash-cal-panel .cal-day-count { font-size: 7px; }
.dash-cal-panel .cal-day-pairs { display: none; }
.dash-cal-panel .cal-dow { font-size: 7px; padding: 4px 0; }
.dash-cal-panel .cal-nav { width: 24px; height: 24px; font-size: 12px; }
.dash-cal-panel .cal-month-label { font-size: 13px; min-width: 120px; }
}
/* ════════════ NXTGEN SCORE WIDGET ══════════════ */
.nxt-score-card {
background: var(--glass-0);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg);
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.nxt-score-card::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(167,139,250,0.08) 0%, transparent 65%);
pointer-events: none;
}
[data-theme="light"] .nxt-score-card { background: var(--glass-1); box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-shine); }
.nxt-score-head {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.nxt-score-title {
font-family: var(--font-head);
font-size: 11.5px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.1px;
}
.nxt-score-badge {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--purple);
background: rgba(167,139,250,0.14);
border: 1px solid rgba(167,139,250,0.3);
border-radius: 5px;
padding: 2px 6px;
}
.nxt-score-body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
position: relative;
z-index: 1;
}
.nxt-score-tri-wrap { width: 100%; max-width: 170px; }
.nxt-score-tri-wrap svg { width: 100%; height: auto; display: block; }
.nxt-score-foot {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-top: 6px;
border-top: 1px solid var(--glass-border);
position: relative;
z-index: 1;
}
.nxt-score-foot-label {
font-size: 9.5px;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.nxt-score-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--purple);
letter-spacing: -0.5px;
}
/* ════════════ CHECKLIST ════════════════════════ */
.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cl-item{
display:flex;align-items:center;gap:10px;
padding:8px 12px;
background:var(--glass-0);border:1px solid var(--glass-border);
border-radius:var(--r-sm);cursor:pointer;user-select:none;
transition:var(--t-fast);
}
.cl-item:hover{background:var(--glass-1);border-color:var(--glass-border-h)}
.cl-item.checked{border-color:rgba(52,211,153,0.3);background:rgba(52,211,153,0.06);box-shadow:inset 0 0 0 1px rgba(52,211,153,0.1)}
.cl-box{
width:16px;height:16px;border-radius:4px;
border:1.5px solid var(--glass-border);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;font-size:10px;transition:var(--t-spring);
}
.cl-item.checked .cl-box{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 8px var(--green-glow);transform:scale(1.05)}
.cl-text{font-size:12px;color:var(--text2)}
.cl-item.checked .cl-text{color:var(--text)}
/* Drag-to-reorder for checklist items (milestones + goals) */
#milestones-list .cl-item,.goals-group .cl-item{cursor:grab}
#milestones-list .cl-item:active,.goals-group .cl-item:active{cursor:grabbing}
#milestones-list .cl-item.editing,.goals-group .cl-item.editing{cursor:default}
.cl-item.dragging{opacity:.35;transform:scale(0.97)}
.cl-item.drag-over{box-shadow:0 0 0 2px var(--blue),inset 0 0 0 1px rgba(96,165,250,0.15);transform:scale(1.02)}
.aff-card.dragging{opacity:.35;transform:scale(0.97)}
.aff-card.drag-over{box-shadow:0 0 0 2px var(--blue),inset 0 0 0 1px rgba(96,165,250,0.15);transform:scale(1.02)}
.cl-drag-handle{
font-size:13px;opacity:.45;cursor:grab;flex-shrink:0;
line-height:1;transition:var(--t-fast);border-radius:4px;
width:16px;height:16px;display:flex;align-items:center;justify-content:center;
}
.cl-drag-handle:hover{opacity:.9}
.cl-drag-handle:active{cursor:grabbing}
.cl-drag-handle.selected{opacity:1;color:var(--blue);background:rgba(96,165,250,0.15);box-shadow:0 0 0 1px rgba(96,165,250,0.4)}
/* ════════════ ACCOUNTS ═════════════════════════ */
/* ════════════ PLAYBOOK ═════════════════════════ */
.rule-card{
background:var(--glass-0);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:13px 16px;margin-bottom:8px;
transition:var(--t-fast);
}
.rule-card:hover{background:var(--glass-1);border-color:var(--glass-border-h)}
.rule-num{font-family:var(--font-mono);font-size:10px;color:var(--accent);margin-bottom:4px;font-weight:700;letter-spacing:.08em}
.rule-text{font-size:13px;color:var(--text2);line-height:1.55}
/* Morning Affirmations — draggable/editable cards */
.aff-card{display:flex;align-items:flex-start;gap:10px;cursor:grab}
.aff-card:active{cursor:grabbing}
.aff-card.editing{cursor:default}
.aff-card .cl-drag-handle{margin-top:2px}
.aff-card .acc-ms-actions{margin-top:2px}
.aff-card .cl-edit-input{margin-top:2px;font-style:italic}
.model-card{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:18px;margin-bottom:10px;
transition:var(--t-med);box-shadow:var(--shadow-sm);
}
.model-card:hover{background:var(--glass-2);border-color:var(--glass-border-h);transform:translateY(-1px)}
.model-card-archived{opacity:.55;border-style:dashed}
.model-card-archived:hover{opacity:.75}
.model-title{font-family:var(--font-head);font-size:15px;font-weight:700;margin-bottom:4px;letter-spacing:-0.2px}
.model-sub{font-size:11.5px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.model-steps{display:flex;flex-direction:column;gap:6px;counter-reset:step}
.model-step{display:flex;gap:10px;font-size:12.5px;color:var(--text2);line-height:1.5}
.model-step::before{
content:counter(step);counter-increment:step;
width:20px;height:20px;
background:var(--blue-dim);border:1px solid rgba(96,165,250,0.22);
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:10px;font-family:var(--font-mono);color:var(--blue);
flex-shrink:0;margin-top:1px;font-weight:600;
box-shadow:0 0 8px var(--blue-glow);
}
/* ════════════ MONTHLY ══════════════════════════ */
.month-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.month-stat{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:13px 14px;
transition:var(--t-fast);
}
.month-stat:hover{background:var(--glass-2)}
.month-stat-label{font-size:10px;color:var(--text3);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.month-stat-val{font-family:var(--font-mono);font-size:19px;font-weight:700;letter-spacing:-0.4px}
.month-stat-val.blue{color:var(--blue)}
.month-stat-val.green{color:var(--green)}
.month-stat-val.red{color:var(--red)}
.month-stat-val.gold{color:var(--gold)}
/* ════════════ SCROLLBAR ════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--glass-2);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--glass-3)}
/* ════════════ CALENDAR — FUTURISTIC REDESIGN ══════ */
.cal-wrap{display:flex;flex-direction:column;height:100%;min-height:0;gap:0}
/* Month navigator */
.cal-header{
display:flex;align-items:center;justify-content:center;gap:16px;
padding:0 0 12px;flex-shrink:0;
}
.cal-nav{
width:30px;height:30px;border-radius:var(--r-sm);
background:var(--glass-1);border:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--text2);font-size:16px;
transition:var(--t-fast);user-select:none;
backdrop-filter:var(--blur-xs);
}
.cal-nav:hover{
background:var(--glass-2);color:var(--text);
border-color:var(--glass-border-h);transform:scale(1.1);
box-shadow:var(--shadow-sm);
}
.cal-nav:active{transform:scale(0.94)}
.cal-month-label{
font-family:var(--font-head);font-size:16px;font-weight:800;
min-width:150px;text-align:center;letter-spacing:-0.5px;
background:linear-gradient(135deg,var(--text) 30%,var(--text2) 100%);
-webkit-background-clip:text;background-clip:text;
}
/* KPI strip — horizontal scrollable on mobile */
.cal-kpi-row{
display:grid;grid-template-columns:repeat(5,1fr);
gap:7px;padding:0 0 10px;flex-shrink:0;
}
@media (max-width: 900px){.cal-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 600px){.cal-kpi-row{grid-template-columns:repeat(2,1fr)}}
.cal-kpi{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:10px 12px;
transition:var(--t-fast);position:relative;overflow:hidden;
box-shadow:var(--shadow-sm);
min-width:0;
}
.cal-kpi::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--glass-shine),transparent);
}
.cal-kpi:hover{background:var(--glass-2);border-color:var(--glass-border-h);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cal-kpi-label{
font-size:9px;color:var(--text3);text-transform:uppercase;
letter-spacing:.1em;margin-bottom:4px;font-weight:700;
display:flex;align-items:center;gap:3px;min-width:0;
}
.cal-kpi-icon{flex-shrink:0;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.cal-kpi-text{line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-kpi-sub-row{font-size:9px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cal-kpi-sub{display:inline-flex;align-items:center;gap:1px;white-space:nowrap;line-height:1}
.cal-kpi-sub.green{color:var(--green)}
.cal-kpi-sub.red{color:var(--red)}
.cal-kpi-val{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:-0.5px;line-height:1}
.cal-kpi-val.green{color:var(--green);text-shadow:0 0 20px var(--green-glow)}
.cal-kpi-val.red{color:var(--red);text-shadow:0 0 20px var(--red-glow)}
.cal-kpi-val.blue{color:var(--blue)}
.cal-kpi-val.white{color:var(--text)}
/* Calendar grid wrapper */
.cal-grid-wrap{
flex:1;display:flex;flex-direction:column;min-height:0;
border-radius:var(--r-xl);overflow:hidden;
border:1px solid var(--glass-border);
background:var(--glass-0);
box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-shine);
backdrop-filter:var(--blur-sm);
position:relative;
}
/* Subtle grid glow orbs */
.cal-grid-wrap::before{
content:'';position:absolute;top:-30%;left:-10%;
width:50%;height:60%;border-radius:50%;
background:radial-gradient(circle,rgba(96,165,250,0.04) 0%,transparent 65%);
pointer-events:none;z-index:0;
}
.cal-grid-wrap::after{
content:'';position:absolute;bottom:-20%;right:-5%;
width:40%;height:50%;border-radius:50%;
background:radial-gradient(circle,rgba(167,139,250,0.03) 0%,transparent 65%);
pointer-events:none;z-index:0;
}
/* Day-of-week header */
.cal-dow-row{
display:grid;grid-template-columns:repeat(7,1fr);
border-bottom:1px solid var(--glass-border);
flex-shrink:0;
background:var(--glass-1);
position:relative;z-index:1;
}
.cal-dow{
text-align:center;font-size:9px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.12em;padding:7px 0;
}
/* Days grid */
.cal-days{
display:grid;grid-template-columns:repeat(7,1fr);
grid-auto-rows:1fr;flex:1;
gap:1px;background:var(--glass-border);
position:relative;z-index:1;
}
/* Individual day cell */
.cal-day{
background:var(--bg);padding:7px 8px;
display:flex;flex-direction:column;
cursor:default;min-height:74px;
transition:background .15s,box-shadow .15s;
position:relative;overflow:hidden;
}
.cal-day.other-month{
background:rgba(0,0,0,0.18);opacity:.38;
}
[data-theme="light"] .cal-day{background:rgba(255,255,255,.72)}
[data-theme="light"] .cal-day.other-month{background:rgba(0,0,0,0.04);opacity:.5}
/* Today */
.cal-day.today{
background:rgba(251,191,36,0.06);
box-shadow:inset 0 0 0 1.5px rgba(251,191,36,0.32);
}
.cal-day.today::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,0.07) 0%,transparent 65%);
}
/* Win day */
.cal-day.win-day{
background:rgba(52,211,153,0.055);
box-shadow:inset 3px 0 0 rgba(52,211,153,0.55),inset 0 0 0 1px rgba(52,211,153,0.14);
}
.cal-day.win-day::before{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
background:radial-gradient(ellipse at 10% 50%,rgba(52,211,153,0.06) 0%,transparent 60%);
}
.cal-day.win-day:hover{
background:rgba(52,211,153,0.10);
box-shadow:inset 3px 0 0 rgba(52,211,153,0.7),inset 0 0 0 1px rgba(52,211,153,0.25),
0 0 18px rgba(52,211,153,0.08);
}
/* Loss day */
.cal-day.loss-day{
background:rgba(248,113,113,0.055);
box-shadow:inset 3px 0 0 rgba(248,113,113,0.55),inset 0 0 0 1px rgba(248,113,113,0.14);
}
.cal-day.loss-day::before{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
background:radial-gradient(ellipse at 10% 50%,rgba(248,113,113,0.06) 0%,transparent 60%);
}
.cal-day.loss-day:hover{
background:rgba(248,113,113,0.10);
box-shadow:inset 3px 0 0 rgba(248,113,113,0.7),inset 0 0 0 1px rgba(248,113,113,0.25),
0 0 16px rgba(248,113,113,0.08);
}
/* Breakeven day */
.cal-day.mixed-day{
background:rgba(96,165,250,0.04);
box-shadow:inset 3px 0 0 rgba(96,165,250,0.45),inset 0 0 0 1px rgba(96,165,250,0.12);
}
.cal-day.has-trades{cursor:pointer}
/* Day number */
.cal-day-num{
font-size:11px;font-weight:700;color:var(--text3);
line-height:1;margin-bottom:auto;letter-spacing:-.2px;
position:relative;z-index:1;
}
.cal-day.win-day .cal-day-num{color:rgba(52,211,153,.6)}
.cal-day.loss-day .cal-day-num{color:rgba(248,113,113,.6)}
/* Today number badge */
.cal-today-badge{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;
background:var(--gold);color:#0a0a0a;
font-size:10px;font-weight:900;
box-shadow:0 0 12px rgba(251,191,36,0.45);
font-family:var(--font-mono);letter-spacing:0;
}
/* Dot indicator */
.cal-day-dot{
width:5px;height:5px;border-radius:50%;
position:absolute;top:8px;right:8px;z-index:1;
}
.cal-day-dot.green{background:var(--green);box-shadow:0 0 7px var(--green-glow)}
.cal-day-dot.red{background:var(--red);box-shadow:0 0 6px var(--red-glow)}
.cal-day-dot.blue{background:var(--blue);box-shadow:0 0 6px var(--blue-glow)}
/* PnL amount */
.cal-day-pnl{
font-family:var(--font-mono);font-size:11px;font-weight:800;
margin-top:5px;line-height:1;letter-spacing:-.4px;
position:relative;z-index:1;
}
.cal-day-pnl.green{color:var(--green)}
.cal-day-pnl.red{color:var(--red)}
.cal-day-pnl.zero{color:var(--text3)}
/* Trade count */
.cal-day-count{
font-size:9px;color:var(--text3);margin-top:3px;
font-weight:600;letter-spacing:.02em;position:relative;z-index:1;
}
.cal-day.win-day .cal-day-count{color:rgba(52,211,153,.55)}
.cal-day.loss-day .cal-day-count{color:rgba(248,113,113,.55)}
/* Pairs mini list */
.cal-day-pairs{
font-size:8.5px;color:var(--text3);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
position:relative;z-index:1;letter-spacing:.01em;
}
/* Light mode overrides */
[data-theme="light"] .cal-grid-wrap{background:rgba(241,245,251,0.5)}
[data-theme="light"] .cal-day.win-day{background:rgba(5,150,105,0.055);box-shadow:inset 3px 0 0 rgba(5,150,105,.55),inset 0 0 0 1px rgba(5,150,105,.14)}
[data-theme="light"] .cal-day.win-day:hover{background:rgba(5,150,105,0.10)}
[data-theme="light"] .cal-day.loss-day{background:rgba(220,38,38,0.055);box-shadow:inset 3px 0 0 rgba(220,38,38,.55),inset 0 0 0 1px rgba(220,38,38,.14)}
[data-theme="light"] .cal-day.loss-day:hover{background:rgba(220,38,38,0.10)}
[data-theme="light"] .cal-day.today{background:rgba(180,83,9,.06);box-shadow:inset 0 0 0 1.5px rgba(180,83,9,.28)}
[data-theme="light"] .cal-day.mixed-day{background:rgba(79,70,229,0.04);box-shadow:inset 3px 0 0 rgba(79,70,229,.4),inset 0 0 0 1px rgba(79,70,229,.1)}
[data-theme="light"] .cal-days{background:rgba(0,0,0,0.06)}
[data-theme="light"] .cal-dow-row{background:rgba(255,255,255,.5)}
[data-theme="light"] .cal-kpi{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.07)}
[data-theme="light"] .cal-kpi:hover{background:rgba(255,255,255,.92)}
/* Calendar popup — glassmorphism card */
.cal-popup{
position:fixed;
background:var(--glass-2);
backdrop-filter:var(--blur-xl);-webkit-backdrop-filter:var(--blur-xl);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);padding:16px;z-index:300;
min-width:275px;max-width:340px;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
animation:popupIn .18s var(--ease-spring);
}
@keyframes popupIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
[data-theme="light"] .cal-popup{background:rgba(255,255,255,.96)}
.cal-popup-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-popup-date{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:-.2px}
.cal-popup-close{
background:var(--glass-1);border:1px solid var(--glass-border);
color:var(--text2);cursor:pointer;font-size:14px;
padding:3px 8px;border-radius:var(--r-xs);transition:var(--t-fast);
}
.cal-popup-close:hover{background:var(--red-dim);border-color:rgba(248,113,113,.35);color:var(--red)}
.cal-popup-trade{
display:flex;align-items:center;gap:9px;
padding:8px 10px;border-radius:var(--r-md);
background:var(--glass-1);border:1px solid var(--glass-border);
margin-bottom:5px;cursor:pointer;transition:var(--t-fast);
}
.cal-popup-trade:hover{background:var(--glass-2);border-color:var(--glass-border-h);transform:translateX(3px)}
.cal-popup-trade:last-of-type{margin-bottom:0}
.cal-popup-pair{font-size:12px;font-weight:700;min-width:56px;letter-spacing:-.1px}
.cal-popup-meta{flex:1;font-size:10.5px;color:var(--text2)}
.cal-popup-pnl{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:-.2px}
.cal-popup-sum{
display:flex;justify-content:space-between;
padding:9px 0 0;border-top:1px solid var(--glass-border);margin-top:8px;
font-size:12px;color:var(--text2);
}
[data-theme="light"] .cal-popup-trade{background:rgba(241,245,251,.8)}
[data-theme="light"] .cal-popup{background:rgba(255,255,255,.97)}
/* Tooltip */
.cal-tooltip{
position:fixed;
background:var(--glass-2);
backdrop-filter:var(--blur-xl);-webkit-backdrop-filter:var(--blur-xl);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:12px 14px;z-index:400;
min-width:200px;pointer-events:none;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
animation:fadeInBG .1s ease;
}
[data-theme="light"] .cal-tooltip{background:rgba(255,255,255,.96)}
.cal-tooltip-date{font-family:var(--font-head);font-size:12px;font-weight:700;margin-bottom:8px}
.cal-tooltip-row{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;margin-bottom:3px}
.cal-tooltip-row .k{color:var(--text3);font-weight:500}
.cal-tooltip-row .v{font-family:var(--font-mono);font-weight:600;letter-spacing:-.1px}
.cal-tooltip-divider{border:none;border-top:1px solid var(--glass-border);margin:6px 0}
.cal-tooltip-outcome{text-align:center;font-size:11px;font-weight:700;padding:3px 0 0;letter-spacing:.03em}
/* Account size bar */
.acc-size-bar{display:flex;align-items:center;gap:10px;padding:0 0 12px;flex-shrink:0;flex-wrap:wrap}
.acc-size-label{font-size:11px;color:var(--text3);font-weight:500}
.acc-size-input{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:5px 10px;
font-size:12px;color:var(--text);font-family:var(--font-mono);
width:110px;outline:none;transition:var(--t-fast);font-weight:500;
}
.acc-size-input:focus{border-color:rgba(96,165,250,0.4);background:var(--glass-2);box-shadow:0 0 0 3px rgba(96,165,250,0.08)}
.acc-size-hint{font-size:10px;color:var(--text3)}
/* ════════════ DETAIL PANEL EDIT ════════════════ */
.det-toolbar{display:flex;gap:6px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)}
.det-btn{
display:flex;align-items:center;gap:5px;padding:6px 12px;
border-radius:var(--r-sm);font-size:12px;font-weight:500;cursor:pointer;
border:1px solid var(--glass-border);background:var(--glass-1);
color:var(--text2);font-family:var(--font-body);transition:var(--t-fast);
}
.det-btn:hover{background:var(--glass-2);color:var(--text);border-color:var(--glass-border-h)}
.det-btn.edit-active{background:var(--blue-dim);border-color:rgba(96,165,250,0.3);color:var(--blue)}
.det-btn.del-btn{border-color:rgba(248,113,113,0.25);color:var(--red)}
.det-btn.del-btn:hover{background:var(--red-dim);border-color:rgba(248,113,113,0.4)}
.det-tabs{display:flex;gap:0;border-bottom:1px solid var(--glass-border);margin-bottom:14px}
.det-tab{padding:7px 14px;font-size:12px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:var(--t-fast)}
.det-tab:hover{color:var(--text)}
.det-tab.active{color:var(--text);border-bottom-color:var(--blue);font-weight:600}
.det-tab-content{display:none}
.det-tab-content.active{display:block}
.edit-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.edit-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.edit-input,.edit-select{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:8px 11px;
font-size:13px;color:var(--text);font-family:var(--font-body);
outline:none;width:100%;transition:var(--t-fast);
}
.edit-input:focus,.edit-select:focus{border-color:rgba(96,165,250,0.45);background:var(--glass-2);box-shadow:0 0 0 3px rgba(96,165,250,0.08)}
.edit-select option{background:var(--bg2)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.star-editor{display:flex;gap:4px;cursor:pointer}
.star-editor span{font-size:22px;transition:var(--t-spring);color:var(--text3)}
.star-editor span.lit{color:var(--gold);text-shadow:0 0 10px var(--gold-glow)}
.star-editor span:hover{transform:scale(1.22)}
.del-confirm{
background:linear-gradient(135deg,rgba(248,113,113,0.08),rgba(248,113,113,0.04));
border:1px solid rgba(248,113,113,0.25);border-radius:var(--r-md);
padding:16px;text-align:center;box-shadow:inset 0 0 0 1px rgba(248,113,113,0.05);
}
.del-confirm-text{font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.del-confirm-btns{display:flex;gap:8px;justify-content:center}
.del-yes{
background:linear-gradient(135deg,rgba(248,113,113,0.25),rgba(248,113,113,0.15));
border:1px solid rgba(248,113,113,0.4);border-radius:var(--r-sm);
padding:8px 20px;color:var(--red);font-size:13px;font-weight:600;
cursor:pointer;font-family:var(--font-body);box-shadow:var(--glow-red);
transition:var(--t-fast);
}
.del-yes:hover{background:linear-gradient(135deg,rgba(248,113,113,0.38),rgba(248,113,113,0.25));box-shadow:0 0 24px rgba(248,113,113,0.3);transform:translateY(-1px)}
.del-no{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:8px 20px;color:var(--text2);
font-size:13px;cursor:pointer;font-family:var(--font-body);transition:var(--t-fast);
}
.del-no:hover{background:var(--glass-2);color:var(--text)}
.det-stat-editable{cursor:pointer;position:relative}
.det-stat-editable::after{
content:'';position:absolute;top:6px;right:6px;width:10px;height:10px;
background-color:currentColor;opacity:0;transition:opacity .15s;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l.9-3.7L16.6 4.6a1.7 1.7 0 012.4 0l.4.4a1.7 1.7 0 010 2.4L8.2 18.6l-3.7.9z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l.9-3.7L16.6 4.6a1.7 1.7 0 012.4 0l.4.4a1.7 1.7 0 010 2.4L8.2 18.6l-3.7.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.det-stat-editable:hover::after{opacity:0.7}
.det-stat-editable:hover{border-color:rgba(96,165,250,0.35)}
/* ════════════ TRASH SYSTEM ═════════════════════ */
.trash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.trash-filters{display:flex;gap:6px;flex-wrap:wrap}
.trash-filter-btn{
padding:5px 13px;border-radius:var(--r-full);
border:1px solid var(--glass-border);background:var(--glass-1);
color:var(--text2);font-size:12px;cursor:pointer;transition:var(--t-fast);font-weight:500;
}
.trash-filter-btn:hover{background:var(--glass-2);color:var(--text)}
.trash-filter-btn.active{background:var(--red-dim);border-color:rgba(248,113,113,0.35);color:var(--red);box-shadow:var(--glow-red)}
.trash-auto-delete-bar{
display:flex;align-items:center;gap:10px;
padding:11px 14px;
background:linear-gradient(135deg,rgba(248,113,113,0.06),rgba(248,113,113,0.03));
border:1px solid rgba(248,113,113,0.16);
border-radius:var(--r-md);margin-bottom:14px;
font-size:12px;color:var(--text2);flex-wrap:wrap;
}
.trash-auto-delete-bar strong{color:var(--red)}
.trash-days-input{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-sm);padding:4px 8px;width:52px;
font-size:12px;color:var(--text);font-family:var(--font-mono);
outline:none;text-align:center;transition:var(--t-fast);font-weight:600;
}
.trash-days-input:focus{border-color:rgba(248,113,113,0.4);background:var(--glass-2)}
.trash-card{
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-lg);padding:14px 16px;margin-bottom:8px;
display:flex;align-items:center;gap:14px;
transition:var(--t-fast);position:relative;overflow:hidden;
box-shadow:var(--shadow-sm);
}
.trash-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(to bottom,rgba(248,113,113,0.7),rgba(248,113,113,0.3));
border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.trash-card:hover{background:var(--glass-2);border-color:rgba(248,113,113,0.25);box-shadow:var(--shadow-md)}
.trash-card-info{flex:1;min-width:0}
.trash-card-pair{font-family:var(--font-head);font-size:15px;font-weight:700;margin-bottom:3px;letter-spacing:-0.2px}
.trash-card-meta{font-size:11px;color:var(--text3);line-height:1.6}
.trash-card-pnl{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:-0.3px}
.trash-card-actions{display:flex;gap:6px;flex-shrink:0}
.trash-expiry{font-size:10px;padding:2px 9px;border-radius:var(--r-full);font-weight:600}
.trash-expiry.urgent{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,0.28);box-shadow:var(--glow-red)}
.trash-expiry.warning{background:rgba(251,191,36,0.10);color:var(--gold);border:1px solid rgba(251,191,36,0.22)}
.trash-expiry.ok{background:var(--glass-1);color:var(--text3);border:1px solid var(--glass-border)}
.trash-empty-state{text-align:center;padding:70px 20px}
.trash-section-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;padding:10px 0 6px}
/* ════════════ GLASS MODAL (confirm) ════════════ */
.glass-modal-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,0.75);
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
z-index:9000;display:none;
align-items:center;justify-content:center;
}
.glass-modal-overlay.open{display:flex;animation:fadeInBG 0.2s var(--ease-out)}
.glass-modal{
background:var(--glass-2);
backdrop-filter:var(--blur-xl);
-webkit-backdrop-filter:var(--blur-xl);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:30px 28px 24px;max-width:400px;width:90%;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
animation:slideUp 0.22s var(--ease-spring);
}
[data-theme="light"] .glass-modal{background:rgba(255,255,255,0.94)}
.glass-modal-icon{font-size:38px;text-align:center;margin-bottom:12px}
.glass-modal-title{font-family:var(--font-head);font-size:18px;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:-0.3px}
.glass-modal-body{font-size:13px;color:var(--text2);text-align:center;line-height:1.6;margin-bottom:22px}
.glass-modal-trade-pill{
display:inline-flex;align-items:center;gap:7px;
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:var(--r-md);padding:7px 14px;margin:8px auto;font-size:13px;
}
.glass-modal-actions{display:flex;gap:8px;justify-content:center}
/* ════════════ AFFIRMATION ON LOAD ════════════════ */
.affirmation-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,0.28);
backdrop-filter:blur(11px);
-webkit-backdrop-filter:blur(11px);
z-index:9100;display:none;
align-items:center;justify-content:center;
padding:20px;
}
.affirmation-overlay.open{display:flex;animation:fadeInBG 0.25s var(--ease-out)}
.affirmation-card{
position:relative;overflow:hidden;
background:rgba(255,255,255,0.04);
backdrop-filter:blur(11px);
-webkit-backdrop-filter:blur(11px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:22px 24px 20px;max-width:360px;width:100%;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
animation:slideUp 0.25s var(--ease-spring);
text-align:left;color:var(--text);
}
[data-theme="light"] .affirmation-card{background:rgba(255,255,255,0.45)}
.affirmation-card::before{
content:'';position:absolute;inset:0 0 auto 0;height:3px;
background:linear-gradient(90deg,var(--blue) 0%,var(--purple) 100%);
}
.affirmation-head{
display:flex;align-items:center;gap:9px;margin:-22px -24px 16px;
padding:14px 24px;border-radius:var(--r-xl) var(--r-xl) 0 0;
background:rgba(10,12,20,0.82);
}
[data-theme="light"] .affirmation-head{background:rgba(15,18,28,0.88)}
.affirmation-icon{
width:30px;height:30px;flex:none;border-radius:50%;
background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);
display:flex;align-items:center;justify-content:center;
font-size:14px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.affirmation-label{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.affirmation-count{font-size:10.5px;color:rgba(255,255,255,0.65);font-family:var(--font-mono);margin-top:1px}
.affirmation-text{
font-family:var(--font-head);font-style:italic;font-weight:600;color:var(--text);
font-size:clamp(13px,3.6vw,15.5px);line-height:1.48;margin-bottom:18px;
max-height:50vh;overflow-y:auto;
}
.affirmation-item{display:flex;gap:9px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--glass-2)}
.affirmation-item:last-child{border-bottom:none}
.affirmation-item-num{
flex:none;font-family:var(--font-mono);font-style:normal;font-weight:700;
font-size:11px;color:var(--text3);
}
.affirmation-close-btn{
display:block;width:100%;
background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);
border:none;color:#fff;border-radius:var(--r-md);padding:10px 18px;
font-size:12.5px;font-weight:700;letter-spacing:.01em;
cursor:pointer;transition:var(--t-fast);
}
.affirmation-close-btn:hover{filter:brightness(1.1)}
.affirmation-fab{
position:fixed;right:20px;bottom:90px;
width:53px;height:53px;border-radius:50%;
background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);
border:1px solid var(--glass-border);
box-shadow:0 3px 10px rgba(0,0,0,0.3);
font-size:25px;cursor:grab;
display:flex;align-items:center;justify-content:center;
z-index:600;transition:box-shadow .15s ease,transform .15s ease;
touch-action:none;user-select:none;-webkit-user-select:none;
}
.affirmation-fab:hover{box-shadow:0 4px 14px rgba(0,0,0,0.36)}
.affirmation-fab.dragging{cursor:grabbing;transition:none;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
@media (max-width: 768px){
.affirmation-fab{ width:49px;height:49px;font-size:23px }
}
/* Sparkle-mode icon (Daily Affirmations) — crisp SVG, consistent across themes */
.affirmation-fab .fab-aff-svg{width:25px;height:25px;display:block}
/* Chat-mode variant of the FAB icon — distinct glyph from the affirmation sparkle icon */
.affirmation-fab .fab-chat-svg{width:25px;height:25px;display:block}
.affirmation-fab.mode-chat{box-shadow:0 3px 10px rgba(124,58,237,0.4)}
.affirmation-fab.mode-chat:hover{box-shadow:0 4px 16px rgba(124,58,237,0.5)}
@media (max-width: 768px){
.affirmation-fab .fab-chat-svg{width:23px;height:23px}
.affirmation-fab .fab-aff-svg{width:23px;height:23px}
}
/* ════════════ FLOATING AI CHAT (FAB's second function) ════════════════ */
.ai-float-chat-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,0.22);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
z-index:9100;display:none;
align-items:flex-end;justify-content:flex-end;
padding:20px;
}
.ai-float-chat-overlay.open{display:flex;animation:fadeInBG 0.2s var(--ease-out)}
.ai-float-chat-card{
width:380px;max-width:100%;
height:min(640px,82vh);
background:var(--surface);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
overflow:hidden;display:flex;flex-direction:column;
animation:slideUp 0.25s var(--ease-spring);
}
.ai-float-chat-topbar{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;flex:none;
background:linear-gradient(90deg,rgba(167,139,250,0.16),rgba(96,165,250,0.08));
border-bottom:1px solid var(--glass-border);
}
.ai-float-chat-title{
font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--text);
display:flex;align-items:center;gap:7px;
}
.ai-float-chat-topbar-actions{display:flex;gap:6px}
.ai-float-chat-body{flex:1;min-height:0;display:flex}
.ai-float-chat-body .chat-container{
flex:1;height:auto;min-height:0;
border:none;border-radius:0;background:transparent;
}
@media (max-width: 640px){
.ai-float-chat-overlay{padding:0;align-items:flex-end;justify-content:center}
.ai-float-chat-card{width:100%;height:86vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
}
/* ════════════ APP TOAST ════════════════════════ */
.app-toast{
position:fixed;bottom:24px;left:50%;
transform:translateX(-50%) translateY(0);
background:var(--glass-2);
backdrop-filter:var(--blur-xl);
-webkit-backdrop-filter:var(--blur-xl);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);padding:12px 20px;
font-size:13px;color:var(--text);z-index:999;
display:flex;gap:12px;align-items:center;
box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-spring);
opacity:0;pointer-events:none;font-weight:500;
min-width:240px;max-width:380px;
}
.app-toast.show{opacity:1;pointer-events:all}
.app-toast.hide{opacity:0;transform:translateX(-50%) translateY(14px)}
[data-theme="light"] .app-toast{background:rgba(255,255,255,0.96)}
/* ════════════ ROW ACTIONS ══════════════════════ */
.row-actions button{
transition:var(--t-fast);backdrop-filter:var(--blur-xs);
}
.row-actions button:hover{transform:scale(1.08)}
/* ════════════ ANIMATIONS ═══════════════════════ */
@keyframes fadeInBG{from{opacity:0}to{opacity:1}}
@keyframes slideUp{
from{transform:translateY(18px);opacity:0}
to{transform:translateY(0);opacity:1}
}
@keyframes pageIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
0%,100%{opacity:1}
50%{opacity:0.6}
}
@keyframes shimmer{
0%{background-position:-200% 0}
100%{background-position:200% 0}
}
/* ════════════ LIGHT MODE OVERRIDES ═════════════ */
[data-theme="light"] .data-table tbody tr:hover{background:rgba(79,70,229,0.04)}
[data-theme="light"] .sb-item.active .ico{color:var(--blue)}
[data-theme="light"] .kpi-value.green{text-shadow:0 0 16px rgba(5,150,105,0.2)}
[data-theme="light"] .kpi-value.red{text-shadow:0 0 16px rgba(220,38,38,0.2)}
[data-theme="light"] .cal-day.win-day{background:rgba(5,150,105,0.05);box-shadow:inset 0 0 0 1px rgba(5,150,105,0.2),inset 2px 0 0 rgba(5,150,105,0.5)}
[data-theme="light"] .cal-day.loss-day{background:rgba(220,38,38,0.05);box-shadow:inset 0 0 0 1px rgba(220,38,38,0.2),inset 2px 0 0 rgba(220,38,38,0.5)}
[data-theme="light"] .cal-day.other-month{background:rgba(0,0,0,0.04);opacity:0.6}
[data-theme="light"] .cal-days{background:rgba(0,0,0,0.05)}
[data-theme="light"] .cal-day{background:rgba(255,255,255,0.7)}
[data-theme="light"] .topbar::after{display:none}
/* ════════════ RESPONSIVE ════════════════════ */
/* ── Mobile hamburger — hidden on desktop ── */
/* ── Sidebar toggle button (desktop + mobile) ── */
.mob-ham { display: none; } /* legacy — hidden */
.sb-toggle-btn {
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid var(--glass-border);
background: var(--glass-1);
cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: var(--t-fast);
padding: 0;
}
.sb-toggle-btn:hover { background: var(--glass-2); border-color: var(--glass-border-h); }
.sb-toggle-icon {
display: flex; flex-direction: column; gap: 4px;
width: 16px;
}
.sb-toggle-icon span {
display: block; height: 2px; border-radius: 1px;
background: var(--text2); transition: all .22s ease;
transform-origin: center;
}
/* Active (sidebar open) state — animate to X */
.sb-toggle-btn.active .sb-toggle-icon span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
background: var(--text);
}
.sb-toggle-btn.active .sb-toggle-icon span:nth-child(2) {
opacity: 0; transform: scaleX(0);
}
.sb-toggle-btn.active .sb-toggle-icon span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
background: var(--text);
}
.mob-overlay{ display:none }
.sb-close-btn{ display:none }
/* ── Desktop sidebar collapse ── */
.sidebar {
transition: width .28s cubic-bezier(0.4,0,0.2,1),
opacity .2s ease,
transform .28s cubic-bezier(0.4,0,0.2,1);
}
.sidebar.sb-collapsed {
width: 0 !important;
padding: 0 !important;
overflow: hidden;
border-right-width: 0;
opacity: 0;
}
/* Main content expands when sidebar collapses */
.layout.sidebar-hidden .main-content {
/* handled by sidebar width going to 0 — flex does the rest */
}
/* ── Only one logo visible at a time ──
When the sidebar is expanded (desktop) or open (mobile overlay), its own
logo header is showing, so hide the topbar logo to avoid showing the
brand twice. The topbar logo reappears once the sidebar is closed/collapsed. */
@media (min-width: 769px){
body.sb-expanded .topbar-left .brand { display: none; }
}
@media (max-width: 768px){
body.sb-expanded .topbar-left .brand { display: none; }
}
/* ── Table scroll wrapper ── */
.data-table-wrap{
overflow-x:auto;
overflow-y:visible;
-webkit-overflow-scrolling:touch;
border-radius:var(--r-md);
margin-bottom:0;
position:relative;
}
/* ════════════════════════════════════════════════════
MOBILE RESPONSIVE — Complete overhaul
════════════════════════════════════════════════════ */
/* ── Tablet (≤900px) ── */
/* ══════════════════════════════════════════════════════
RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════ */
/* ── 900px: tablet adjustments ── */
@media (max-width: 900px){
:root{ --sidebar:200px }
.topbar-clock{ display:none }
.data-table th:nth-child(8),
.data-table td:nth-child(8),
.data-table th:nth-child(9),
.data-table td:nth-child(9){ display:none }
#page-tradelog .data-table th:nth-child(8),
#page-tradelog .data-table td:nth-child(8),
#page-tradelog .data-table th:nth-child(9),
#page-tradelog .data-table td:nth-child(9){ display:table-cell }
.detail-panel{ width:360px }
}
/* ══════════════════════════════════════════════════════
MOBILE ≤768px — Telegram-style bottom navigation
══════════════════════════════════════════════════════ */
@media (max-width: 768px){
:root{
--sidebar:0px;
--topbar:54px;
--mob-nav-h:62px;
--mob-safe:env(safe-area-inset-bottom,0px);
}
/* ── Body ── */
body{ overflow:hidden }
/* ── Topbar — lean pill-style header ── */
.topbar{
padding:0 14px;
height:var(--topbar);
background:rgba(8,11,18,0.92);
backdrop-filter:blur(48px) saturate(2.2);
-webkit-backdrop-filter:blur(48px) saturate(2.2);
box-shadow:0 1px 0 rgba(255,255,255,0.05),0 2px 20px rgba(0,0,0,0.45);
position:fixed;top:0;left:0;right:0;z-index:300;
}
[data-theme="light"] .topbar{
background:rgba(245,248,255,0.93);
box-shadow:0 1px 0 rgba(0,0,0,0.07),0 2px 14px rgba(0,0,0,0.07);
}
.topbar-left{ flex:1;display:flex;align-items:center;gap:10px }
.topbar-right{ display:flex;align-items:center;gap:6px }
.brand-logo-img{ height:24px;max-width:130px }
.sb-toggle-btn{ width:36px;height:36px;border-radius:50%;background:var(--glass-2);border:1px solid var(--glass-border) }
.topbar-left .sep,
.topbar-left .page-name{ display:none }
.topbar-clock{ display:none }
/* Hide Share + New Trade from topbar (New Trade is in bottom nav) */
.topbar-share-btn{ display:none !important }
.topbar-right .btn-primary{ display:none !important }
.theme-toggle{ width:34px;height:34px;border-radius:50%;font-size:15px;display:flex;align-items:center;justify-content:center }
.topbar-avatar{ width:34px;height:34px;border-radius:50%;font-size:11px;font-weight:700 }
/* ── Hide horizontal tabs (replaced by bottom nav) ── */
.tabs{ display:none !important }
/* ── Layout: fill between topbar and bottom nav ── */
.layout{
display:flex;flex-direction:column;
margin-top:var(--topbar);
height:calc(100dvh - var(--topbar) - calc(62px + env(safe-area-inset-bottom,0px)));
overflow:hidden;
}
.main{ flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0 }
/* ── Pages — scrollable content area ── */
.page{
padding:14px 14px calc(72px + env(safe-area-inset-bottom, 0px));
overflow-y:auto;overflow-x:clip;
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain;
height:100%;
box-sizing:border-box;
}
.page-inner{ max-width:100%;width:100% }
/* ── Sidebar — slides in from left over content ── */
.sidebar{
display:flex !important;
position:fixed;left:0;top:var(--topbar);bottom:0;
width:76vw;max-width:300px;z-index:400;
transform:translateX(-105%);
transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s;
border-right:1px solid var(--glass-border);
background:rgba(9,12,20,0.97);
backdrop-filter:blur(40px) saturate(1.8);
-webkit-backdrop-filter:blur(40px) saturate(1.8);
border-radius:0 var(--r-xl) var(--r-xl) 0;
box-shadow:none;
overflow-y:auto;
}
[data-theme="light"] .sidebar{ background:rgba(248,251,255,0.97) }
.sidebar.mob-open{
transform:translateX(0);
box-shadow:4px 0 44px rgba(0,0,0,0.6);
}
.mob-overlay{
display:none;position:fixed;inset:0;top:var(--topbar);z-index:399;
background:rgba(0,0,0,0.62);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mob-overlay.show{ display:block }
.sb-close-btn{
display:flex;align-items:center;justify-content:flex-end;
padding:8px 12px 6px;
}
.sb-close-btn button{
background:var(--glass-2);border:1px solid var(--glass-border);
cursor:pointer;color:var(--text2);font-size:16px;
padding:6px 10px;border-radius:var(--r-md);transition:var(--t-fast);
}
.sb-close-btn button:hover{ color:var(--text);background:var(--glass-3) }
/* ── KPI grid 2-col ── */
.kpi-grid{ grid-template-columns:repeat(2,1fr);gap:8px }
.kpi-card{ padding:13px 12px;border-radius:var(--r-md) }
.kpi-value{ font-size:20px;letter-spacing:-0.02em }
.kpi-label{ font-size:10px }
/* ── Cover ── */
.cover{ padding:18px 16px;margin-bottom:14px;border-radius:var(--r-lg) }
.cover-label{ font-size:9px;letter-spacing:0.08em }
.cover-title{ font-size:21px;line-height:1.2 }
.cover-sub{ font-size:11px;margin-top:4px }
/* ── Section headings ── */
.sec-head{ font-size:11px;margin:16px 0 8px;letter-spacing:0.06em }
/* ── Tables ── */
.data-table-wrap,.table-wrap{
overflow-x:auto;overflow-y:visible;
-webkit-overflow-scrolling:touch;border-radius:var(--r-md);
margin-bottom:14px;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.2) transparent;
}
.data-table-wrap::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{ height:3px }
.data-table-wrap::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.22);border-radius:3px;
}
/* Dashboard 4-5 col tables don't need 540px */
.data-table{ min-width:360px;font-size:12px }
.data-table th,.data-table td{ padding:8px 10px }
.data-table th:nth-child(8),.data-table td:nth-child(8){ display:none }
.data-table th:nth-child(9),.data-table td:nth-child(9){ display:none }
.data-table th:last-child,.data-table td:last-child{ display:none }
.col-winbar{ display:none }
/* Trade Log: keep every column and let the table scroll sideways
to reveal them — vertical scroll stays with the page itself
(single scroll region, not a second one nested inside it).
(html-prefixed for specificity so it wins over the desktop
defaults declared later in the stylesheet.) */
#page-tradelog .data-table{ min-width:900px }
#page-tradelog .data-table th,
#page-tradelog .data-table td{ display:table-cell }
html body #page-tradelog.page{ padding-left:0; padding-right:0 }
html body #page-tradelog .page-inner{ padding:0 14px }
html body #page-tradelog .data-table-wrap{
margin:0 0 14px;
padding:0;
overflow-x:auto;
overflow-y:visible;
max-height:none;
}
/* ── Filter bar ── */
.filter-bar{ flex-wrap:wrap;gap:6px;padding:0 0 10px }
.filter-bar input,.filter-bar select{
font-size:16px;padding:9px 12px;min-width:0;flex:1 1 130px;border-radius:var(--r-md)
}
/* ── Forms ── */
.form-grid{ grid-template-columns:1fr 1fr;gap:10px }
.form-input,.form-select{ font-size:16px;padding:10px 12px;border-radius:var(--r-md) }
.form-textarea{ font-size:14px;padding:10px 12px;border-radius:var(--r-md) }
.form-label{ font-size:10.5px;letter-spacing:0.04em }
/* ── Modal — compact ~60% bottom sheet, sits above bottom nav ── */
.modal-overlay{ align-items:flex-end;padding:0 }
.modal{
width:100% !important;max-width:100% !important;
/* ~60% of screen height; never taller than the gap between topbar and nav */
height: 62vh;
max-height: calc(100dvh - var(--topbar) - 62px - env(safe-area-inset-bottom,0px) - 8px);
min-height: 340px;
margin: 0;
border-radius: var(--r-2xl) var(--r-2xl) 0 0;
position: fixed;
bottom: calc(62px + env(safe-area-inset-bottom,0px));
left: 0; right: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background: rgba(10,14,24,0.97);
backdrop-filter: blur(60px) saturate(2.0);
-webkit-backdrop-filter: blur(60px) saturate(2.0);
box-shadow: 0 -8px 48px rgba(0,0,0,0.65), 0 -1px 0 rgba(255,255,255,0.07);
animation: none !important; /* disable desktop slide-up on mobile */
}
[data-theme="light"] .modal{
background: rgba(252,254,255,0.99);
box-shadow: 0 -6px 32px rgba(0,0,0,0.14), 0 -1px 0 rgba(0,0,0,0.07);
}
/* Drag handle pill */
.modal::before{
content:''; flex-shrink:0;
display:block; width:36px; height:4px; border-radius:var(--r-full);
background:rgba(255,255,255,0.18); margin:10px auto 0;
}
[data-theme="light"] .modal::before{ background:rgba(0,0,0,0.14) }
/* Header: fixed height, never scrolls */
.modal-head{
flex-shrink: 0;
padding: 8px 16px 8px;
border-bottom: 1px solid var(--glass-border);
display: flex; align-items: center; justify-content: space-between;
background: inherit;
}
.modal-title { font-size: 14px !important; font-weight: 700 !important; }
.modal-close { padding: 4px 8px; font-size: 14px; }
/* Body: scrollable — flex:1 + min-height:0 is the key combo */
.modal-body{
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 10px 14px 4px;
}
/* Tight 2-col grid so all fields are visible with minimal scrolling */
.modal-form-grid, .form-grid { grid-template-columns:1fr 1fr; gap:7px }
.form-field { gap: 2px; display:flex; flex-direction:column; }
.form-label { font-size: 9px; letter-spacing: 0.07em; margin-bottom:1px; }
.form-input, .form-select {
font-size: 16px; /* exactly 16px prevents iOS auto-zoom */
padding: 8px 10px;
border-radius: var(--r-sm);
line-height: 1.2;
}
.form-textarea {
font-size: 14px; padding: 6px 10px;
min-height: 44px; border-radius: var(--r-sm);
}
/* Save bar: pinned, never scrolls */
.form-actions{
flex-shrink: 0;
background: inherit;
padding: 8px 14px calc(10px);
margin-top: 0;
border-top: 1px solid var(--glass-border);
display: flex;
gap: 8px;
}
.form-actions .btn {
flex: 1;
padding: 12px 10px;
font-size: 13px;
font-weight: 600;
border-radius: var(--r-md);
text-align: center;
justify-content: center;
}
.form-actions .btn-primary {
flex: 2;
background: linear-gradient(135deg, rgba(96,165,250,0.28), rgba(96,165,250,0.16));
border-color: rgba(96,165,250,0.55);
color: var(--blue);
box-shadow: 0 0 18px rgba(96,165,250,0.18), var(--shadow-sm);
font-size: 13px;
font-weight: 700;
}
[data-theme="light"] .form-actions .btn-primary {
background: linear-gradient(135deg, rgba(79,70,229,0.16), rgba(79,70,229,0.09));
border-color: rgba(79,70,229,0.38);
color: var(--blue);
}
/* ── Detail panel ── */
.detail-panel{
width:100% !important;left:0;right:0;border-left:none;
border-top:1px solid var(--glass-border);
top:auto;
height: 62vh;
max-height: calc(100dvh - var(--topbar) - 62px - env(safe-area-inset-bottom,0px) - 8px);
min-height: 340px;
bottom: calc(62px + env(safe-area-inset-bottom,0px));
border-radius:var(--r-2xl) var(--r-2xl) 0 0;z-index:500;
}
.detail-panel::before{
content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
width:36px;height:4px;border-radius:var(--r-full);
background:var(--glass-border-h);pointer-events:none;
}
.detail-panel.fullscreen{
width:100% !important;height:calc(100vh - var(--topbar));
border-radius:0;top:var(--topbar);bottom:0;
}
.det-panel-header{ padding:14px 16px }
#detail-content{ padding:14px 16px 100px }
.det-tabs{ gap:4px;margin-bottom:12px }
.det-tab{ padding:7px 14px;font-size:12px }
.detail-pair{ font-size:22px }
/* ── Accounts ── */
.acc-grid{ grid-template-columns:1fr }
.acc-card{ padding:16px;border-radius:var(--r-lg) }
/* ── Calendar ── */
.cal-kpi-row{ grid-template-columns:repeat(2,1fr);gap:6px }
.cal-kpi{ padding:10px 8px;border-radius:var(--r-md) }
.cal-kpi-label{ font-size:9px }
.cal-kpi-val{ font-size:15px }
.cal-day{ min-height:52px;padding:4px 5px;font-size:10px }
.cal-day-num{ font-size:10px }
.cal-day-pnl{ font-size:9px }
.cal-day-count{ font-size:9px }
.cal-day-pairs{ font-size:7.5px }
#cal-popup{
position:fixed !important;left:50% !important;top:50% !important;
transform:translate(-50%,-50%) !important;
max-width:calc(100vw - 24px);width:340px;z-index:600;
}
/* ── Dashboard: single-column on mobile, cal is a normal in-flow section ── */
.dash-layout{
display: block;
padding: 0;
}
.dash-left{ width:100%; min-width:0; padding:12px 12px 16px; }
.dash-cal-panel{
width:100%;
height:auto;
overflow:visible;
border-radius: var(--r-lg);
padding: 12px;
background: var(--glass-0);
}
.dash-cal-panel .cal-kpi-row{ grid-template-columns:repeat(2,1fr);gap:4px }
/* ── Misc ── */
.insight{ font-size:12px;padding:12px 14px;border-radius:var(--r-md) }
.trash-card{ flex-wrap:wrap;gap:8px;padding:12px;border-radius:var(--r-md) }
.trash-card-actions{ width:100%;justify-content:flex-end;margin-top:4px }
.trash-card-info{ font-size:11px }
.wl-pair-card{ padding:14px;border-radius:var(--r-md) }
.wl-pair-head{ flex-wrap:wrap;gap:6px }
.checklist-grid{ grid-template-columns:1fr }
.model-card{ padding:16px;border-radius:var(--r-md) }
.rule-card{ padding:12px 14px;border-radius:var(--r-md) }
.profile-form-grid{ grid-template-columns:1fr }
.profile-tabs{ overflow-x:auto;scrollbar-width:none }
.profile-tabs::-webkit-scrollbar{ display:none }
.billing-plans{ grid-template-columns:1fr;gap:12px }
.glass-modal{ width:calc(100vw - 32px);max-width:340px;border-radius:var(--r-xl);padding:24px 20px 20px }
.mob-ham{ display:none }
}
/* ══ small mobile ≤420px ══ */
@media (max-width: 420px){
.kpi-grid{ gap:6px }
.kpi-value{ font-size:18px }
.cover-title{ font-size:18px }
.data-table{ min-width:320px }
.modal-form-grid{ grid-template-columns:1fr }
.form-grid{ grid-template-columns:1fr }
.det-tab{ padding:5px 10px;font-size:11px }
.dash-layout{ padding:10px 10px 80px }
.dash-cal-panel .cal-day{ min-height:40px;padding:2px 3px }
.dash-cal-panel .cal-kpi-val{ font-size:12px }
.dash-cal-panel .cal-kpi-label{ font-size:7px }
}
/* ══════════════════════════════════════════════════════
BOTTOM NAV BAR (mobile only)
══════════════════════════════════════════════════════ */
.mob-bottom-nav{
display:none; /* shown via JS on mobile */
position:fixed;bottom:0;left:0;right:0;
z-index:300;
height:calc(62px + env(safe-area-inset-bottom,0px));
padding-bottom:env(safe-area-inset-bottom,0px);
border-top:1px solid var(--glass-border);
background:rgba(8,11,18,0.95);
backdrop-filter:blur(40px) saturate(2);
-webkit-backdrop-filter:blur(40px) saturate(2);
box-shadow:0 -1px 0 rgba(255,255,255,0.04),0 -4px 28px rgba(0,0,0,0.4);
}
[data-theme="light"] .mob-bottom-nav{
background:rgba(245,248,255,0.96);
box-shadow:0 -1px 0 rgba(0,0,0,0.07),0 -4px 22px rgba(0,0,0,0.07);
}
@media (min-width: 769px){ .mob-bottom-nav{ display:none !important } }
@media (max-width: 768px){ .mob-bottom-nav{ display:flex } }
/* Also hide mobile-only sheets on desktop */
@media (min-width: 769px){
.mob-more-sheet{ display:none !important }
.mob-more-overlay{ display:none !important }
}
.mob-bottom-nav-item{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:8px 4px;cursor:pointer;
background:transparent;border:none;
color:var(--text3);font-family:var(--font-body);font-size:10px;font-weight:500;
letter-spacing:0.01em;position:relative;
transition:color 0.18s ease,transform 0.18s ease;
-webkit-tap-highlight-color:transparent;
}
.mob-bottom-nav-item:active{ transform:scale(0.85) }
.mob-bottom-nav-item.active{ color:var(--blue) }
[data-theme="light"] .mob-bottom-nav-item.active{ color:var(--blue) }
/* Active top-notch indicator */
.mob-bottom-nav-item.active::before{
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:32px;height:3px;border-radius:0 0 3px 3px;
background:var(--blue);box-shadow:0 0 10px var(--blue-glow);
}
.mob-nav-icon{
font-size:20px;line-height:1;
transition:transform 0.2s var(--ease-spring);
}
.mob-bottom-nav-item.active .mob-nav-icon{ transform:translateY(-1px) scale(1.1) }
.mob-nav-label{ font-size:10px;line-height:1;white-space:nowrap }
.mob-nav-badge{
position:absolute;top:5px;right:calc(50% - 20px);
min-width:16px;height:16px;border-radius:var(--r-full);
background:var(--red);color:#fff;font-size:9px;font-weight:700;
padding:0 4px;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2px var(--bg-base);line-height:1;
}
/* Centre "+" button — elevated circle */
.mob-nav-add-btn .mob-nav-icon{
width:46px;height:46px;border-radius:50%;
background:var(--blue);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:24px !important;line-height:1 !important;
box-shadow:0 4px 20px rgba(96,165,250,0.5);
transition:transform 0.2s var(--ease-spring),box-shadow 0.2s ease;
margin-top:-12px;
}
[data-theme="light"] .mob-nav-add-btn .mob-nav-icon{
background:var(--blue);box-shadow:0 4px 20px rgba(79,70,229,0.4);
}
.mob-nav-add-btn:active .mob-nav-icon{ transform:scale(0.88);box-shadow:0 2px 8px rgba(96,165,250,0.3) }
.mob-nav-add-btn .mob-nav-label{ color:var(--blue);font-weight:600 }
.mob-nav-add-btn.active::before{ display:none }
/* ══════════════════════════════════════════════════════
MORE BOTTOM SHEET
══════════════════════════════════════════════════════ */
.mob-more-overlay{
display:none;position:fixed;
top:0;left:0;right:0;
bottom:calc(62px + env(safe-area-inset-bottom,0px));
z-index:499;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mob-more-overlay.show{ display:block }
.mob-more-sheet{
position:fixed;
bottom:calc(62px + env(safe-area-inset-bottom,0px));
left:0;right:0;z-index:500;
border-radius:var(--r-2xl) var(--r-2xl) 0 0;
border-top:1px solid var(--glass-border);
max-height:calc(100dvh - var(--topbar) - 62px - env(safe-area-inset-bottom,0px) - 8px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:rgba(9,12,21,0.97);
backdrop-filter:blur(44px) saturate(1.8);
-webkit-backdrop-filter:blur(44px) saturate(1.8);
box-shadow:0 -4px 48px rgba(0,0,0,0.55);
transform:translateY(110%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1),
opacity 0.22s ease,
visibility 0s linear 0.32s;
}
[data-theme="light"] .mob-more-sheet{
background:rgba(248,251,255,0.98);
box-shadow:0 -4px 36px rgba(0,0,0,0.12);
}
.mob-more-sheet.open{
transform:translateY(0);
opacity:1;
visibility:visible;
pointer-events:auto;
transition:transform 0.32s cubic-bezier(0.22,1,0.36,1),
opacity 0.22s ease,
visibility 0s linear 0s;
}
.mob-more-handle{
width:36px;height:4px;border-radius:var(--r-full);
background:var(--glass-border-h);margin:12px auto 6px;
}
.mob-more-title{
font-size:11px;font-weight:700;letter-spacing:0.1em;
color:var(--text3);text-transform:uppercase;
padding:0 20px 10px;
}
.mob-more-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
padding:0 8px 18px;
}
.mob-more-item{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:12px 8px 10px;border-radius:var(--r-lg);cursor:pointer;
background:transparent;border:none;font-family:var(--font-body);
color:var(--text2);font-size:11px;font-weight:500;
transition:background 0.15s ease,transform 0.15s ease;
-webkit-tap-highlight-color:transparent;position:relative;
}
.mob-more-item:active{ transform:scale(0.86);background:var(--glass-2) }
.mob-more-icon{
width:46px;height:46px;border-radius:var(--r-md);
background:var(--glass-2);border:1px solid var(--glass-border);
display:flex;align-items:center;justify-content:center;font-size:20px;
transition:background 0.15s;
}
.mob-more-item:active .mob-more-icon{ background:var(--glass-3) }
/* cal-toggle-btn removed — replaced by cal-slide-toggle */
/* dash-cal-body collapse removed — now using grid slide */
/* ══════════════════════════════════════════════════════
GLASS BLUR ENHANCEMENTS (all components)
══════════════════════════════════════════════════════ */
.topbar{
backdrop-filter:blur(44px) saturate(2.1);
-webkit-backdrop-filter:blur(44px) saturate(2.1);
}
.sidebar{
backdrop-filter:blur(60px) saturate(2.0);
-webkit-backdrop-filter:blur(60px) saturate(2.0);
}
.modal{
backdrop-filter:blur(60px) saturate(2.0);
-webkit-backdrop-filter:blur(60px) saturate(2.0);
}
.detail-panel{
backdrop-filter:blur(60px) saturate(2.0);
-webkit-backdrop-filter:blur(60px) saturate(2.0);
}
.kpi-card{
backdrop-filter:blur(28px) saturate(1.7);
-webkit-backdrop-filter:blur(28px) saturate(1.7);
}
.dash-cal-panel{
backdrop-filter:blur(36px) saturate(1.8);
-webkit-backdrop-filter:blur(36px) saturate(1.8);
}
/* ════ MICRO-INTERACTIONS & POLISH ════════════════════ */
/* Topbar live clock */
.topbar-clock{font-family:var(--font-mono);font-size:11px;color:var(--text3);letter-spacing:.05em;padding:4px 10px;background:var(--glass-0);border:1px solid var(--glass-border);border-radius:var(--r-sm)}
/* Sidebar item — active left indicator */
.sb-item.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2.5px;border-radius:0 3px 3px 0;background:var(--blue);box-shadow:0 0 8px var(--blue-glow)}
/* KPI card accent bar top */
.kpi-card-accent{position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 var(--r-sm) var(--r-sm);opacity:.5}
.kpi-card-accent.green{background:linear-gradient(90deg,transparent,var(--green),transparent)}
.kpi-card-accent.blue{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.kpi-card-accent.gold{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.kpi-card-accent.red{background:linear-gradient(90deg,transparent,var(--red),transparent)}
/* Table row left accent on hover — via td:first-child (tr::before causes column shift in tables) */
.data-table tbody tr td:first-child{
position:relative;
}
.data-table tbody tr td:first-child::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:0;
background:var(--blue);border-radius:0 2px 2px 0;opacity:.6;
transition:width .18s ease;
}
.data-table tbody tr:hover td:first-child::before{
width:3px;
}
/* Glass card shimmer on hover */
@keyframes glassShimmer{
0%{transform:translateX(-100%) skewX(-12deg)}
100%{transform:translateX(200%) skewX(-12deg)}
}
.kpi-card:hover::after{
content:'';position:absolute;top:0;bottom:0;left:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);
animation:glassShimmer 0.7s var(--ease-out) forwards;
pointer-events:none;z-index:1;
}
/* Pill with glow on hover */
.pill:hover{filter:brightness(1.15);cursor:default}
/* Sidebar bottom gradient fade */
.sidebar::after{
content:'';position:sticky;bottom:0;left:0;right:0;height:32px;
background:linear-gradient(to top,var(--bg2),transparent);
pointer-events:none;display:block;flex-shrink:0;
margin-top:auto;
}
/* Tab active underline animated */
.tab.active{
position:relative;
}
.tab.active::after{
content:'';position:absolute;bottom:-1px;left:16px;right:16px;height:2px;
background:var(--blue);border-radius:var(--r-full) var(--r-full) 0 0;
box-shadow:0 0 10px var(--blue-glow);
}
/* Search input glass */
#search-input{
background:var(--glass-1);
backdrop-filter:var(--blur-xs);
border:1px solid var(--glass-border);
border-radius:var(--r-md);
transition:var(--t-fast);
}
#search-input:focus{
background:var(--glass-2);
border-color:rgba(96,165,250,0.4);
box-shadow:0 0 0 3px rgba(96,165,250,0.08);
}
/* Filter selects */
#filter-outcome,#filter-kz,#filter-pair,#cal-acc-filter{
background:var(--glass-1);
backdrop-filter:var(--blur-xs);
border:1px solid var(--glass-border);
border-radius:var(--r-md);
transition:var(--t-fast);
}
#filter-outcome:focus,#filter-kz:focus,#filter-pair:focus,#cal-acc-filter:focus{
background:var(--glass-2);
border-color:rgba(96,165,250,0.4);
}
/* Detail panel slide + fade */
.detail-panel{
will-change:transform;
}
/* Row action buttons upgrade */
.trade-log-row .row-actions button{
font-size:11px;padding:3px 8px;border-radius:var(--r-sm);
backdrop-filter:var(--blur-xs);font-weight:600;
letter-spacing:.02em;
}
/* Watchlist priority dots */
.wl-priority-dot{
width:7px;height:7px;border-radius:50%;flex-shrink:0;
box-shadow:0 0 6px currentColor;
}
.wl-priority-dot.high{background:var(--red);color:var(--red)}
.wl-priority-dot.med{background:var(--gold);color:var(--gold)}
.wl-priority-dot.low{background:var(--green);color:var(--green)}
/* Calendar — today cell golden shine */
.cal-day.today::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 0%,rgba(251,191,36,0.06) 0%,transparent 70%);
}
/* Calendar nav arrows with spring */
.cal-nav:active{transform:scale(0.92)}
/* Modal overlay blur upgrade */
.modal-overlay{
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
}
/* Form input placeholder */
.form-input::placeholder,.form-textarea::placeholder,.notes-area::placeholder{
color:var(--text3);font-style:italic;
}
/* Trash card hover lift */
.trash-card:hover{transform:translateX(3px)}
.trash-card{will-change:transform,border-color}
/* Glass modal backdrop shimmer */
.glass-modal::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--glass-shine),transparent);
border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.glass-modal{position:relative;overflow:hidden}
/* Playbook model step number glow pulse */
.model-step:first-child::before{
animation:pulse 3s ease-in-out infinite;
}
/* Progress bar animated fill */
@keyframes fillBar{
from{width:0}
to{width:var(--target-width,100%)}
}
.acc-progress-fill{
animation:fillBar 1.2s var(--ease-out) forwards;
}
/* Scrollbar styled for pages */
.page::-webkit-scrollbar{width:4px}
.page::-webkit-scrollbar-thumb{background:var(--glass-2);border-radius:var(--r-full)}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--glass-1);border-radius:var(--r-full)}
/* Section head icon */
.sec-head-icon{
width:16px;height:16px;border-radius:4px;
background:var(--glass-1);border:1px solid var(--glass-border);
display:inline-flex;align-items:center;justify-content:center;
font-size:9px;flex-shrink:0;
}
/* Calendar KPI shimmer on hover */
.cal-kpi:hover::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--glass-shine),transparent);
border-radius:var(--r-lg) var(--r-lg) 0 0;pointer-events:none;
}
.cal-kpi{position:relative;overflow:hidden}
/* Quarter page KPI grid spacing */
#quarter-page-inner .cover{
background:linear-gradient(135deg,
rgba(10,20,40,0.97) 0%,rgba(18,32,64,0.93) 55%,rgba(12,24,48,0.97) 100%);
}
/* Insight box left accent */
.insight{
border-left:3px solid rgba(96,165,250,0.4);
padding-left:14px;
}
/* acc-size bar glass */
.acc-size-bar{
background:var(--glass-0);
border:1px solid var(--glass-border);
border-radius:var(--r-md);
padding:10px 14px;
backdrop-filter:var(--blur-xs);
}
/* Theme toggle spin animation */
.theme-toggle.spinning{
animation:spin 0.4s var(--ease-spring);
}
@keyframes spin{
from{transform:rotate(0deg) scale(0.8)}
to{transform:rotate(360deg) scale(1)}
}
/* ── Light mode form inputs ──────────────────────────── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea,
[data-theme="light"] .edit-input,
[data-theme="light"] .edit-select,
[data-theme="light"] .notes-area{
background:rgba(255,255,255,0.7);
border-color:rgba(0,0,0,0.1);
color:rgba(15,23,42,0.95);
}
[data-theme="light"] .form-select option,[data-theme="light"] .edit-select option{
background:#fff;color:#0f172a;
}
[data-theme="light"] .modal{background:rgba(255,255,255,0.95)}
[data-theme="light"] .glass-modal-overlay{background:rgba(255,255,255,0.3)}
[data-theme="light"] .glass-modal{
background:rgba(255,255,255,0.96);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .detail-panel{
background:rgba(255,255,255,0.94);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .check-item,[data-theme="light"] .cl-item{
background:rgba(255,255,255,0.6);
border-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .wl-pair-card,[data-theme="light"] .acc-card,
[data-theme="light"] .rule-card,[data-theme="light"] .model-card,
[data-theme="light"] .kpi-card,[data-theme="light"] .cal-kpi{
background:rgba(255,255,255,0.7);
border-color:rgba(0,0,0,0.07);
}
[data-theme="light"] .kpi-card:hover,[data-theme="light"] .cal-kpi:hover,
[data-theme="light"] .wl-pair-card:hover,[data-theme="light"] .acc-card:hover{
background:rgba(255,255,255,0.90);
border-color:rgba(0,0,0,0.12);
}
[data-theme="light"] .cover.trash-cover{
background:linear-gradient(135deg,rgba(220,38,38,0.85),rgba(185,28,28,0.80));
}
[data-theme="light"] .insight{
background:linear-gradient(135deg,rgba(79,70,229,0.07),rgba(79,70,229,0.03));
border-color:rgba(79,70,229,0.18);
border-left-color:rgba(79,70,229,0.5);
}
[data-theme="light"] .trash-card{
background:rgba(255,255,255,0.75);border-color:rgba(0,0,0,0.07);
}
[data-theme="light"] .trash-card:hover{
background:rgba(255,255,255,0.92);border-color:rgba(220,38,38,0.25);
}
[data-theme="light"] .app-toast{
background:rgba(255,255,255,0.98);
border-color:rgba(0,0,0,0.09);
color:rgba(15,23,42,0.95);
}
[data-theme="light"] .cal-popup,[data-theme="light"] .cal-tooltip{
background:rgba(255,255,255,0.97);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .cal-popup-trade{
background:rgba(241,245,251,0.8);
border-color:rgba(0,0,0,0.07);
}
[data-theme="light"] .cal-popup-trade:hover{background:rgba(255,255,255,0.95)}
[data-theme="light"] .tabs{background:rgba(255,255,255,0.6)}
[data-theme="light"] .tab.active::after{box-shadow:0 0 8px rgba(79,70,229,0.25)}
[data-theme="light"] .topbar{
background:rgba(255,255,255,0.85);
border-color:rgba(0,0,0,0.09);
box-shadow:0 2px 8px rgba(0,0,0,0.06),inset 0 -1px 0 rgba(0,0,0,0.05);
}
[data-theme="light"] .sidebar{
background:rgba(255,255,255,0.82);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .sb-item:hover{
background:rgba(79,70,229,0.05);
border-color:rgba(79,70,229,0.12);
}
[data-theme="light"] .det-btn{
background:rgba(255,255,255,0.7);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .det-btn:hover{background:rgba(255,255,255,0.95)}
[data-theme="light"] .emo-btn{
background:rgba(255,255,255,0.6);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .img-slot{
background:rgba(255,255,255,0.5);
border-color:rgba(0,0,0,0.1);
}
[data-theme="light"] .notes-area{
background:rgba(255,255,255,0.7);
border-color:rgba(0,0,0,0.09);
}
[data-theme="light"] .data-table th{border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .data-table td{border-color:rgba(0,0,0,0.05)}
[data-theme="light"] .sec-head::after{background:rgba(0,0,0,0.09)}
[data-theme="light"] .sb-sep{background:rgba(0,0,0,0.08)}
[data-theme="light"] .detail-stat{background:rgba(241,245,251,0.8);border-color:rgba(0,0,0,0.07)}
[data-theme="light"] .trash-auto-delete-bar{
background:rgba(220,38,38,0.05);
border-color:rgba(220,38,38,0.15);
}
[data-theme="light"] .trash-filter-btn{background:rgba(255,255,255,0.6);border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .trash-filter-btn.active{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.3)}
[data-theme="light"] .acc-size-bar{background:rgba(241,245,251,0.8);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .acc-size-input{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .sb-badge{background:rgba(220,38,38,0.12);border-color:rgba(220,38,38,0.2)}
[data-theme="light"] .month-stat{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.07)}
[data-theme="light"] .wl-tf-row .tf-neu{background:rgba(241,245,251,0.9);border-color:rgba(0,0,0,0.09)}
[data-theme="light"] .el-confirm{background:rgba(255,255,255,0.8)}
/* ── Final polish: focus ring system ────────────────── */
:focus-visible{
outline:2px solid rgba(96,165,250,0.6);
outline-offset:2px;
border-radius:var(--r-xs);
}
[data-theme="light"] :focus-visible{outline-color:rgba(79,70,229,0.55)}
/* ── Premium loading state ──────────────────────────── */
.loading-shimmer{
background:linear-gradient(90deg,
var(--glass-1) 0%,var(--glass-2) 50%,var(--glass-1) 100%);
background-size:200% 100%;
animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* ── Glassmorphism card variant ──────────────────────── */
.glass-card{
background:var(--glass-1);
backdrop-filter:var(--blur-md);
-webkit-backdrop-filter:var(--blur-md);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-md);
transition:var(--t-med);
}
.glass-card:hover{
background:var(--glass-2);
border-color:var(--glass-border-h);
box-shadow:var(--shadow-lg);
transform:translateY(-1px);
}
/* ════════════ RICH DARK / LIGHT THEME UPGRADES ══════ */
/* Dark body — deeper starfield mesh */
body{
background-image:
radial-gradient(ellipse 100% 80% at 10% -20%, rgba(96,165,250,0.10) 0%, transparent 50%),
radial-gradient(ellipse 70% 60% at 90% 110%, rgba(167,139,250,0.07) 0%, transparent 50%),
radial-gradient(ellipse 50% 45% at 50% 50%, rgba(45,212,191,0.04) 0%, transparent 55%),
radial-gradient(ellipse 40% 35% at 20% 85%, rgba(251,191,36,0.03) 0%, transparent 45%);
background-attachment:fixed;
}
/* Light body — layered, warm mesh so the canvas never reads flat/pale */
[data-theme="light"] body{
background:#e7ebf5;
background-image:
radial-gradient(ellipse 100% 70% at 12% -12%, rgba(79,70,229,0.13) 0%, transparent 52%),
radial-gradient(ellipse 70% 55% at 88% 108%, rgba(124,58,237,0.09) 0%, transparent 55%),
radial-gradient(ellipse 45% 40% at 50% 46%, rgba(13,148,136,0.05) 0%, transparent 55%),
radial-gradient(ellipse 38% 32% at 22% 88%, rgba(180,83,9,0.045) 0%, transparent 48%);
background-attachment:fixed;
}
/* Dark topbar — richer glass */
.topbar{
background:linear-gradient(135deg,
rgba(13,17,26,0.96) 0%,
rgba(18,24,38,0.92) 100%);
box-shadow:0 1px 0 var(--glass-border),0 4px 24px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="light"] .topbar{
background:linear-gradient(135deg,rgba(255,255,255,0.92),rgba(248,250,252,0.88));
box-shadow:0 1px 0 rgba(0,0,0,0.09),0 2px 12px rgba(0,0,0,0.07),
inset 0 1px 0 rgba(255,255,255,0.95);
}
/* Sidebar — rich glass */
.sidebar{
background:linear-gradient(180deg,
rgba(13,17,26,0.97) 0%,
rgba(11,15,24,0.95) 100%);
box-shadow:1px 0 0 var(--glass-border),4px 0 24px rgba(0,0,0,0.25);
}
[data-theme="light"] .sidebar{
background:linear-gradient(180deg,rgba(255,255,255,0.90),rgba(248,250,252,0.85));
box-shadow:1px 0 0 rgba(0,0,0,0.08),4px 0 20px rgba(0,0,0,0.06);
}
/* Active sidebar item — gradient glow */
.sb-item.active{
background:linear-gradient(90deg,
rgba(96,165,250,0.18) 0%,
rgba(96,165,250,0.07) 60%,
transparent 100%);
border-color:rgba(96,165,250,0.20);
box-shadow:inset 0 1px 0 rgba(96,165,250,0.08);
}
[data-theme="light"] .sb-item.active{
background:linear-gradient(90deg,rgba(79,70,229,0.12),rgba(79,70,229,0.04) 60%,transparent);
}
/* Cover banners per page */
#page-dashboard .cover{
background:linear-gradient(135deg,
rgba(8,14,28,0.98) 0%,
rgba(14,26,54,0.94) 40%,
rgba(20,36,76,0.92) 70%,
rgba(10,18,40,0.97) 100%);
}
#page-tradelog .cover{
background:linear-gradient(135deg,
rgba(8,14,28,0.98) 0%,
rgba(12,28,24,0.94) 50%,
rgba(8,22,20,0.97) 100%);
}
#page-watchlist .cover{
background:linear-gradient(135deg,
rgba(14,8,28,0.98) 0%,
rgba(28,14,50,0.94) 50%,
rgba(18,10,36,0.97) 100%);
}
#page-entry .cover{
background:linear-gradient(135deg,
rgba(8,18,14,0.98) 0%,
rgba(12,30,22,0.94) 50%,
rgba(8,24,16,0.97) 100%);
}
#page-accounts .cover{
background:linear-gradient(135deg,
rgba(18,14,8,0.98) 0%,
rgba(36,24,8,0.94) 50%,
rgba(22,16,8,0.97) 100%);
}
[data-theme="light"] .cover{
background:linear-gradient(135deg,rgba(79,70,229,0.88),rgba(79,70,229,0.82),rgba(79,70,229,0.88))!important;
}
/* KPI cards — richer glass */
.kpi-card{
background:linear-gradient(135deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.02) 100%);
box-shadow:var(--shadow-sm),
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 -1px 0 rgba(0,0,0,0.12);
}
[data-theme="light"] .kpi-card{
background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(248,250,252,0.70));
box-shadow:0 2px 12px rgba(0,0,0,0.07),0 1px 0 rgba(255,255,255,0.9),
inset 0 1px 0 rgba(255,255,255,0.95);
}
/* Data table — subtle row banding */
.data-table tbody tr:nth-child(even) td{
background:rgba(255,255,255,0.015);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) td{
background:rgba(0,0,0,0.02);
}
/* Detail panel — richer glass */
.detail-panel{
background:linear-gradient(180deg,
rgba(14,19,32,0.97) 0%,
rgba(12,16,28,0.95) 100%);
}
[data-theme="light"] .detail-panel{
background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(248,250,252,0.94));
}
/* Modals — richer glass */
.modal, .glass-modal{
background:linear-gradient(135deg,
rgba(18,24,38,0.96) 0%,
rgba(14,20,34,0.94) 100%);
}
[data-theme="light"] .modal,[data-theme="light"] .glass-modal{
background:rgba(255,255,255,0.98);
}
/* Watch/account/playbook cards */
.wl-pair-card,.acc-card,.model-card{
background:linear-gradient(135deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.02) 100%);
}
[data-theme="light"] .wl-pair-card,[data-theme="light"] .acc-card,[data-theme="light"] .model-card{
background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(248,250,252,0.70));
}
/* Tabs bar — richer glass */
.tabs{
background:linear-gradient(to bottom,
rgba(13,17,26,0.92) 0%,
rgba(10,14,22,0.95) 100%);
}
[data-theme="light"] .tabs{
background:linear-gradient(to bottom,rgba(255,255,255,0.75),rgba(248,250,252,0.65));
}
/* Tab active underline glow */
.tab.active::after{
box-shadow:0 0 12px rgba(96,165,250,0.5),0 0 4px rgba(96,165,250,0.8);
}
/* Calendar grid wrap — starfield glass */
.cal-grid-wrap{
background:linear-gradient(135deg,
rgba(8,12,22,0.96) 0%,
rgba(10,16,30,0.94) 50%,
rgba(8,12,24,0.96) 100%);
}
[data-theme="light"] .cal-grid-wrap{
background:linear-gradient(135deg,rgba(248,250,252,0.6),rgba(241,245,251,0.5));
}
/* Cal KPI — match card style */
.cal-kpi{
background:linear-gradient(135deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.02) 100%);
}
[data-theme="light"] .cal-kpi{
background:linear-gradient(135deg,rgba(255,255,255,0.82),rgba(248,250,252,0.68));
}
/* Trash page cover gets a deep red dark gradient */
#page-trash .cover{
background:linear-gradient(135deg,
rgba(30,8,8,0.98) 0%,
rgba(48,12,12,0.95) 45%,
rgba(34,8,8,0.98) 100%)!important;
}
[data-theme="light"] #page-trash .cover{
background:linear-gradient(135deg,rgba(185,28,28,0.88),rgba(220,38,38,0.80),rgba(185,28,28,0.88))!important;
}
/* Label needs strong, reliable contrast against the red cover background —
the background is a saturated red in BOTH themes (dark maroon in dark
mode, bright red in light mode), so white text works in both cases and
doesn't need to branch by theme. Also set inline in the HTML as a
belt-and-suspenders guard against any other rule overriding it. */
#page-trash .cover-label,
[data-theme="light"] #page-trash .cover-label{
color:rgba(255,255,255,.85)!important;
opacity:1!important;
text-shadow:none!important;
}
#page-trash .cover-sub,
[data-theme="light"] #page-trash .cover-sub{
color:rgba(255,255,255,.85)!important;
opacity:1!important;
}
/* Scrollbar — match theme */
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}
/* ════ DETAIL PANEL FULLSCREEN ════════════════════════ */
.detail-panel.fullscreen{
width:100vw!important;
left:0!important;right:0!important;
border-left:none;
border-radius:0;
z-index:160;
max-width:none;
}
.detail-panel.fullscreen .page-inner-det{
max-width:1100px;margin:0 auto;
display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
/* In fullscreen the img grid becomes 4 cols */
.detail-panel.fullscreen .img-upload-grid{
grid-template-columns:repeat(4,1fr)!important;
}
/* Expand button icon flip */
/* expand icon set via JS */
/* expand icon set via JS */
.det-panel-expand{font-size:15px;font-family:var(--font-mono)}
/* ════ ACCOUNT SIZE BAR — glass pill ══════════════════ */
.acc-size-bar{
display:flex;align-items:center;gap:10px;
padding:10px 16px;
background:var(--glass-1);
backdrop-filter:var(--blur-sm);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
margin-bottom:12px;flex-wrap:wrap;
box-shadow:var(--shadow-sm),inset 0 1px 0 var(--glass-shine);
}
[data-theme="light"] .acc-size-bar{
background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.07);
}
/* ════ FILTER BAR — glass pills ═══════════════════════ */
#search-input,#filter-outcome,#filter-kz,#filter-pair,#cal-acc-filter{
background:var(--glass-1);
backdrop-filter:var(--blur-xs);
border:1px solid var(--glass-border);
border-radius:var(--r-md);
color:var(--text);font-family:var(--font-body);
font-size:12.5px;padding:8px 12px;
transition:var(--t-fast);outline:none;
}
#search-input:focus,#filter-outcome:focus,#filter-kz:focus,
#filter-pair:focus,#cal-acc-filter:focus{
background:var(--glass-2);border-color:rgba(96,165,250,.45);
box-shadow:0 0 0 3px rgba(96,165,250,.08);
}
[data-theme="light"] #search-input,[data-theme="light"] #filter-outcome,
[data-theme="light"] #filter-kz,[data-theme="light"] #filter-pair,
[data-theme="light"] #cal-acc-filter{
background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.09);
}
/* ════ SEC-HEAD refined ═══════════════════════════════ */
.sec-head{
font-size:9.5px;font-weight:800;color:var(--text3);
text-transform:uppercase;letter-spacing:.16em;margin:20px 0 9px;
display:flex;align-items:center;gap:10px;
}
.sec-head::before{content:'';width:3px;height:12px;
background:linear-gradient(to bottom,var(--blue),transparent);
border-radius:var(--r-full);flex-shrink:0}
.sec-head::after{content:'';flex:1;height:1px;
background:linear-gradient(to right,var(--glass-border),transparent);opacity:.8}
/* ════ COVER — subtle animated gradient ══════════════ */
@keyframes coverPulse{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
.cover{background-size:200% 200%!important;animation:coverPulse 12s ease infinite}
/* ════ TABLE top-left accent on hover ═══════════════ */
/* accent handled via td:first-child::before below — tr::before removed (caused column shift) */
/* ════ MONTH STAT VAL text-shadow ════════════════════ */
.month-stat-val.blue{text-shadow:0 0 20px rgba(96,165,250,0.3)}
.month-stat-val.green{text-shadow:0 0 20px rgba(52,211,153,0.3)}
.month-stat-val.red{text-shadow:0 0 20px rgba(248,113,113,0.3)}
.month-stat-val.gold{text-shadow:0 0 20px rgba(251,191,36,0.3)}
/* ════ CAL page layout — compact + full page ════════ */
#page-calendar{padding:16px 20px;overflow:hidden}
#page-calendar>div{height:100%}
.cal-wrap{height:100%}
/* Grid auto-sizing so calendar fills available vertical space */
.cal-days{min-height:0}
.cal-day{min-height:68px}
/* Responsive cal kpi */
@media (max-width: 1024px){
.cal-kpi-val{font-size:16px}
.cal-day{min-height:58px}
.cal-day-pnl{font-size:10px}
}
@media (max-width: 768px){
.cal-kpi-row{grid-template-columns:repeat(2,1fr)}
.cal-kpi-val{font-size:14px}
.cal-day{min-height:50px;padding:4px 5px}
.cal-day-pairs{font-size:7.5px}
}
/* ════ TRASH card left bar gradient on hover ════════ */
.trash-card::before{
background:linear-gradient(to bottom,rgba(248,113,113,.8),rgba(248,113,113,.2));
transition:opacity .15s;
}
.trash-card:hover::before{opacity:1}
/* ════ STAR EDITOR larger hit area ═════════════════ */
.star-editor span{font-size:24px;cursor:pointer;transition:var(--t-spring)}
.star-editor span.lit{color:var(--gold);text-shadow:0 0 12px var(--gold-glow)}
.star-editor span:hover{transform:scale(1.28)}
/* ════ CUSTOM chart slot input ════════════════════ */
.chart-slot-label-input{
flex:1;font-size:10px;
background:var(--glass-1);border:1px solid var(--glass-border);
border-radius:4px;padding:3px 7px;color:var(--text2);
outline:none;font-family:var(--font-mono);letter-spacing:.03em;
transition:var(--t-fast);
}
.chart-slot-label-input:hover{border-color:var(--glass-border-h)}
.chart-slot-label-input:focus{border-color:rgba(96,165,250,.45);background:var(--glass-2);color:var(--text)}
[data-theme="light"] .chart-slot-label-input{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.09)}
/* ════ BRAND ICON glow pulse ═════════════════════════ */
.brand-icon{animation:brandPulse 4s ease-in-out infinite}
@keyframes brandPulse{
0%,100%{box-shadow:0 0 12px rgba(251,191,36,0.15)}
50%{box-shadow:0 0 22px rgba(251,191,36,0.32),0 0 8px rgba(251,191,36,0.2)}
}
/* ════ GLASSMORPHISM overlay on long modals ═══════════ */
.glass-modal-overlay{backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg)}
/* ════ TOAST — richer glass ══════════════════════════ */
.app-toast{
background:linear-gradient(135deg,
rgba(18,24,38,0.97) 0%,rgba(14,20,34,0.95) 100%);
border-color:rgba(255,255,255,0.09);
min-width:260px;max-width:400px;
}
[data-theme="light"] .app-toast{
background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.96));
}
/* ════ WLPAIR priority badge ═════════════════════════ */
.wl-priority{
padding:3px 10px;border-radius:var(--r-full);
font-size:10.5px;font-weight:700;
background:var(--glass-1);border:1px solid var(--glass-border);
}
/* ════ PLAYBOOK steps — numbered glow ════════════════ */
.model-step::before{
background:linear-gradient(135deg,var(--blue-dim),rgba(96,165,250,.05));
box-shadow:0 0 10px var(--blue-glow);
}
/* ════ MONTHLY stat card hover ═══════════════════════ */
.month-stat{transition:var(--t-fast)}
.month-stat:hover{
background:var(--glass-2)!important;
border-color:var(--glass-border-h)!important;
transform:translateY(-1px);
box-shadow:var(--shadow-md);
}
/* ════ COVER LABEL glow on dashboard ════════════════ */
.cover-label{
text-shadow:0 0 20px currentColor;
letter-spacing:.16em;
}
/* ════ DETAIL PAIR HEADING ════════════════════════════ */
.detail-pair{
font-size:28px;font-weight:900;letter-spacing:-1px;
line-height:1;margin-bottom:4px;
}
/* ════ IMG SLOT upgrade ══════════════════════════════ */
.img-slot:not(:has(img)){
background:linear-gradient(135deg,var(--glass-0),var(--glass-1));
}
.img-slot:not(:has(img)):hover{
background:linear-gradient(135deg,var(--blue-dim),var(--glass-1));
border-color:rgba(96,165,250,.45);
}
/* ════ Quarter page cover unique gradient ════════════ */
#page-quarter .cover{
background:linear-gradient(135deg,
rgba(10,14,30,0.98) 0%,
rgba(18,28,58,0.94) 40%,
rgba(24,38,80,0.92) 70%,
rgba(12,18,42,0.97) 100%)!important;
}
/* ══════════════════════════════════════════════════════
VIEW MODE — Stats grid (replaces cramped stat-rows)
══════════════════════════════════════════════════════ */
.view-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 16px;
}
.view-stat-card {
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-md, 10px);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 5px;
transition: background 0.15s;
}
.view-stat-card:hover { background: var(--glass-2); }
.view-stat-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text3);
}
.view-stat-val {
font-size: 20px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.5px;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.view-stat-val.green { color: var(--green); }
.view-stat-val.red { color: var(--red); }
.view-stat-val.blue { color: var(--blue); }
.view-stat-val.view-stat-val-sm { font-size: 15px; letter-spacing: -0.2px; }
.view-stat-val.stars {
font-size: 18px;
letter-spacing: 2px;
color: #fbbf24;
}
.view-stat-val.stars .empty { opacity: 0.2; }
[data-theme="light"] .view-stat-val.stars { color: #b45309; }
/* ══════════════════════════════════════════════════════
SHARE BUTTON in detail panel header
══════════════════════════════════════════════════════ */
.det-share-btn {
background: rgba(251,191,36,0.10) !important;
border-color: rgba(251,191,36,0.28) !important;
color: #fbbf24 !important;
}
.det-share-btn:hover {
background: rgba(251,191,36,0.22) !important;
border-color: rgba(251,191,36,0.55) !important;
}
[data-theme="light"] .det-share-btn { color: #b45309 !important; }
/* ══════════════════════════════════════════════════════
EMOTION CHIPS — selectable grid
══════════════════════════════════════════════════════ */
.emo-chip-grid {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 4px;
}
.emo-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
background: var(--glass-1);
border: 1px solid var(--glass-border);
color: var(--text2);
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
user-select: none;
letter-spacing: 0.1px;
}
.emo-chip:hover {
background: var(--glass-2);
border-color: var(--glass-border-h);
color: var(--text);
transform: translateY(-1px);
}
.emo-chip.active {
background: rgba(251,191,36,0.14);
border-color: rgba(251,191,36,0.40);
color: #fbbf24;
box-shadow: 0 0 12px rgba(251,191,36,0.12);
}
[data-theme="light"] .emo-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: var(--text2); }
[data-theme="light"] .emo-chip:hover { background: rgba(0,0,0,0.07); color: var(--text); }
[data-theme="light"] .emo-chip.active { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.35); color: #b45309; box-shadow: none; }
/* ══════════════════════════════════════════════════════
STAR RATING EDITOR — 3 tap-card options
══════════════════════════════════════════════════════ */
.star-editor-row {
display: flex;
gap: 8px;
margin-top: 4px;
}
.star-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 16px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
user-select: none;
min-width: 68px;
}
.star-opt:hover {
background: var(--glass-2);
border-color: var(--glass-border-h);
transform: translateY(-2px);
}
.star-opt.selected {
background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.45);
box-shadow: 0 0 16px rgba(251,191,36,0.14);
transform: translateY(-2px);
}
.star-pips {
font-size: 16px;
letter-spacing: 1px;
color: #fbbf24;
line-height: 1;
}
.star-opt:not(.selected) .star-pips { opacity: 0.4; }
.star-lbl {
font-size: 10px;
font-weight: 700;
color: var(--text3);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.star-opt.selected .star-lbl { color: #fbbf24; }
[data-theme="light"] .star-opt { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .star-opt:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .star-opt.selected { background: rgba(180,83,9,0.09); border-color: rgba(180,83,9,0.40); box-shadow: none; }
[data-theme="light"] .star-pips { color: #b45309; }
[data-theme="light"] .star-opt.selected .star-lbl { color: #b45309; }
/* custom TF input */
.form-input[id$="-custom"] {
border-style: dashed;
border-color: rgba(251,191,36,0.35);
background: rgba(251,191,36,0.04);
font-size: 13px;
}
.form-input[id$="-custom"]:focus {
border-color: rgba(251,191,36,0.60);
background: rgba(251,191,36,0.08);
}
[data-theme="light"] .form-input[id$="-custom"] {
border-color: rgba(180,83,9,0.30);
background: rgba(180,83,9,0.04);
}
/* ══════════════════════════════════════════════════════
ACCOUNT MANAGER MODAL
══════════════════════════════════════════════════════ */
.acc-manager-overlay {
position: fixed;
inset: 0;
background: rgba(4,8,18,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.2s;
}
.acc-manager-overlay.open { opacity: 1; }
[data-theme="light"] .acc-manager-overlay { background: rgba(15,23,42,0.42); }
.acc-manager-modal {
width: 100%;
max-width: 460px;
background: rgba(13,17,26,0.78);
backdrop-filter: blur(24px) saturate(1.7);
-webkit-backdrop-filter: blur(24px) saturate(1.7);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg, 14px);
overflow: hidden;
box-shadow: 0 16px 40px rgba(0,0,0,0.32), var(--glass-spec-top, inset 0 1px 0 rgba(255,255,255,0.10));
transform: translateY(16px) scale(0.97);
transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
max-height: 90vh;
display: flex; flex-direction: column;
}
.acc-manager-overlay.open .acc-manager-modal { transform: translateY(0) scale(1); }
.acc-manager-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--glass-border);
font-size: 13px;
font-weight: 700;
color: var(--text);
background: var(--glass-1);
}
.acc-mgr-close {
background: var(--glass-2);
border: 1px solid var(--glass-border);
border-radius: 6px;
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
cursor: pointer;
color: var(--text2);
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.acc-mgr-close:hover { background: rgba(248,113,113,0.15); color: var(--red); border-color: rgba(248,113,113,0.3); }
.acc-manager-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
/* Prevent the table wrap from being squashed to fit the visible area —
it must keep its full natural height so THIS element (not the table)
is what scrolls inside .acc-manager-body. */
.acc-manager-body .data-table-wrap { flex-shrink: 0; }
.acc-mgr-list { display: flex; flex-direction: column; gap: 6px; }
.acc-mgr-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-md, 10px);
transition: background 0.15s;
}
.acc-mgr-item:hover { background: var(--glass-2); }
.acc-mgr-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.acc-mgr-actions { display: flex; gap: 5px; flex-shrink: 0; }
.acc-mgr-btn {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border-radius: 7px;
border: 1px solid var(--glass-border);
background: var(--glass-2);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.acc-mgr-btn:disabled { opacity: 0.30; cursor: not-allowed; }
/* Blue edit */
.acc-mgr-btn.edit { background: rgba(96,165,250,0.10); color: #60a5fa; border-color: rgba(96,165,250,0.25); }
.acc-mgr-btn.edit:not(:disabled):hover { background: rgba(96,165,250,0.22); border-color: rgba(96,165,250,0.5); }
/* Archive/restore neutral */
.acc-mgr-btn.archive { background: rgba(148,163,184,0.10); color: var(--text2); border-color: rgba(148,163,184,0.25); }
.acc-mgr-btn.archive:hover { background: rgba(148,163,184,0.20); color: var(--text); }
.acc-mgr-btn.restore { background: rgba(52,211,153,0.10); color: var(--green); border-color: rgba(52,211,153,0.25); }
.acc-mgr-btn.restore:hover { background: rgba(52,211,153,0.20); }
/* Red delete */
.acc-mgr-btn.del { background: rgba(248,113,113,0.10); color: #f87171; border-color: rgba(248,113,113,0.25); }
.acc-mgr-btn.del:not(:disabled):hover { background: rgba(248,113,113,0.22); border-color: rgba(248,113,113,0.5); }
.acc-mgr-add-row {
display: flex;
gap: 6px;
margin-top: 2px;
padding-top: 10px;
border-top: 1px solid var(--glass-border);
flex-wrap: wrap;
}
.acc-mgr-input {
flex: 1;
min-width: 0;
background: var(--glass-1);
border: 1px solid var(--glass-border);
border-radius: var(--r-sm, 6px);
padding: 8px 10px;
font-size: 13px;
color: var(--text);
font-family: inherit;
outline: none;
transition: border-color 0.15s;
height: 36px;
box-sizing: border-box;
}
.acc-mgr-input:focus { border-color: rgba(251,191,36,0.50); }
.acc-mgr-add-btn {
padding: 8px 14px;
background: rgba(251,191,36,0.12);
border: 1px solid rgba(251,191,36,0.30);
border-radius: var(--r-sm, 6px);
color: #fbbf24;
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.acc-mgr-add-btn:hover { background: rgba(251,191,36,0.20); border-color: rgba(251,191,36,0.50); }
[data-theme="light"] .acc-manager-modal { background: rgba(255,255,255,0.80); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .acc-manager-header { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .acc-mgr-item { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .acc-mgr-input { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .acc-mgr-add-btn { background: rgba(180,83,9,0.09); border-color: rgba(180,83,9,0.28); color: #b45309; }
[data-theme="light"] .acc-mgr-add-btn:hover { background: rgba(180,83,9,0.16); }
/* ══════════════════════════════════════════════════════
SHARE MODAL — full styles
══════════════════════════════════════════════════════ */
#share-modal-overlay {
position: fixed;
inset: 0;
height: 100vh;
height: 100dvh;
/* No backdrop-filter here on purpose. Blurring a position:fixed layer
that also gets resized/re-transformed by Chrome's dynamic address bar
(which happens on ANY touch/scroll while the modal is open) is what
produced the torn frames, blank gaps, and "half visible" content —
Android Chrome fails to recomposite the blurred layer correctly during
that resize. A solid darkened background gives the same dimmed-page
effect without triggering the bug. */
background: rgba(4,8,18,0.90);
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.22s ease;
/* The overlay itself no longer scrolls — only .sm-modal does. Letting both
the overlay AND the modal scroll on mobile is what caused the layout to
jump/glitch (rubber-banding, the header appearing detached from the
card) whenever the browser's address bar showed/hid in compact view. */
overflow: hidden;
overscroll-behavior: contain;
isolation: isolate;
contain: layout paint;
transform-origin: top left;
}
#share-modal-overlay.open { opacity: 1; }
[data-theme="light"] #share-modal-overlay { background: rgba(15,23,42,0.80); }
.sm-modal {
width: 100%;
max-width: 560px;
max-height: 100%;
display: flex;
flex-direction: column;
background: var(--bg2);
border: 1px solid var(--glass-border);
border-radius: var(--r-lg, 14px);
overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.04) inset;
transform: translateY(20px);
transition: transform 0.26s cubic-bezier(0.22,1,0.36,1), max-width 0.32s cubic-bezier(0.22,1,0.36,1);
margin: auto;
/* Own compositor layer + hard clip so nothing behind it can ever show
through mid-repaint, regardless of what the overlay above is doing. */
isolation: isolate;
contain: layout paint;
background-color: var(--bg2);
}
#share-modal-overlay.open .sm-modal { transform: translateY(0); }
[data-theme="light"] .sm-modal {
background: #f5f7fc;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 40px 100px rgba(0,0,0,0.18);
}
.sm-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
border-bottom: 1px solid var(--glass-border);
background: var(--glass-1);
flex-shrink: 0;
}
[data-theme="light"] .sm-header { border-color: rgba(0,0,0,0.07); background: rgba(0,0,0,0.02); }
.sm-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.sm-header-right { display: flex; align-items: center; gap: 6px; }
.sm-icon-btn {
background: var(--glass-2);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 5px 11px;
font-size: 14px;
cursor: pointer;
color: var(--text);
transition: background 0.16s, border-color 0.16s;
line-height: 1.4;
font-family: inherit;
}
.sm-icon-btn:hover { background: var(--glass-3, rgba(255,255,255,0.10)); border-color: var(--glass-border-h); }
.sm-close-btn:hover { background: rgba(248,113,113,0.15); color: var(--red); border-color: rgba(248,113,113,0.35); }
[data-theme="light"] .sm-icon-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); color: var(--text); }
.sm-body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.sm-card-wrap { display: flex; justify-content: center; width: 100%; }
/* ── Card outer ──────────────────────────────────────────────────────
Mirrors nxtgen-share-card.html: a plain, fixed-width wrapper — no
separate "frame"/backdrop/letterbox concept. The card itself becomes
the exact aspect ratio the user picked (its height is set explicitly,
in px, by smSyncCardHeight — CSS aspect-ratio alone is unreliable once
html2canvas has to resolve it inside an offscreen clone). Whatever the
resulting shape, smFitCardContent() shrinks the card's own content
(real font-sizes/paddings, via the --s custom property below — not a
visual transform) until it actually fits that height, so nothing is
ever cropped or letterboxed, at any export size. */
.sm-card-outer { position: relative; width: 100%; }
/* ── Card ──
--s is the shrink-to-fit factor (see smFitCardContent in app.js): every
spacing/font-size value on every element inside the card is expressed
as calc(Npx * var(--s)), so dialing --s down uniformly shrinks the
WHOLE layout in real content terms until it fits inside whatever
height the current export aspect ratio allows — never a visual
scale/crop, always real content that truly fits. */
.sm-card {
--s: 1;
position: relative;
width: 100%;
isolation: isolate;
border-radius: 0;
font-family: var(--font-body);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
/* Flex column so the card's real content — not just a visual scale —
always reaches the top AND bottom edge of whatever height
smSyncCardHeight assigns it (square, landscape, or a very tall
portrait/story shape). .sm-top-bar stays pinned to the top edge,
and .sm-card-body (flex:1) absorbs/distributes any extra height
below it — so a tall export never ends in a blank gap below the
last row. */
display: flex;
flex-direction: column;
}
/* Flexible middle region: everything below the top bar. Rather than
justify-content:space-between (flex-computed gap distribution, which
html2canvas rasterizes unreliably — it was the cause of rows drifting
down and overlapping the bottom of the card in exports), the extra
vertical space is measured in JS (smFitCardContent) and applied here
as a literal --fill-gap pixel value via the CSS gap property. That's
just fixed spacing between block-level rows, which html2canvas renders
exactly like real margins — no auto-distribution math for it to get
wrong. min-height:0 still lets this shrink below its natural content
size for the existing --s shrink-to-fit path. */
.sm-card-body {
--fill-gap: 0px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
gap: var(--fill-gap);
/* Always-present breathing room at the bottom of the card. Without this,
short/wide shapes (Square, Landscape, Wallpaper) — where the computed
--fill-gap ends up tiny or zero because content already nearly fills
the height — leave the last row sitting flush against the card's
bottom edge. Tall shapes (Portrait, Phone Story) already get
generous --fill-gap spacing everywhere else, so this fixed amount
is invisible there. */
padding-bottom: calc(24px*var(--s));
}
/* Instagram Square and Twitter Landscape get a touch more bottom
breathing room than the default 24px — 30px brings the gap between
the checklist and the card's bottom edge closer in line with the
spacing already present at the top of the card for these short/wide
shapes. Portrait keeps the default, since its generous --fill-gap
already handles spacing.
Deliberately NOT multiplied by var(--s) here: these are exactly the
shapes whose content overflows the fixed export height, so
smFitCardContent()'s binary search shrinks --s to make everything
(padding included) fit. A scaled padding-bottom gets shrunk right
along with it — the search just picks a slightly smaller --s to
absorb the increase, so the extra px is diluted away and the gap
barely changes. Keeping this fixed carves it out of that budget:
the search still converges, but only the rest of the content (fonts,
gaps, rings) shrinks to make room, so this 30px always renders at
its full size. */
.sm-card[data-size-preset="ig_square"] .sm-card-body,
.sm-card[data-size-preset="tw_landscape"] .sm-card-body {
padding-bottom: 30px;
}
.sm-card.dark {
background: linear-gradient(145deg, #0d1424 0%, #0a0f1c 60%, #0d1530 100%);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
color: rgba(248,250,252,0.95);
}
.sm-card.light {
background: linear-gradient(145deg, #ffffff 0%, #f4f7ff 60%, #eef2fc 100%);
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 24px 60px rgba(0,0,0,0.10);
color: rgba(15,23,42,0.95);
}
.sm-chart-bg { width: 100%; height: 100%; pointer-events: none; opacity: 0.85; }
.sm-card.light .sm-chart-bg { opacity: 0.35; }
.sm-card-noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
z-index: 0; pointer-events: none; opacity: 0.5;
}
.sm-card.light .sm-card-noise { display: none; }
.sm-glow-blob { width: calc(260px*var(--s)); height: calc(260px*var(--s)); border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55; transition: background 0.3s; }
.sm-card.light .sm-glow-blob { opacity: 0.22; }
.glow-win { background: radial-gradient(circle, rgba(52,211,153,0.45) 0%, transparent 65%); }
.glow-loss { background: radial-gradient(circle, rgba(248,113,113,0.45) 0%, transparent 65%); }
.glow-be { background: radial-gradient(circle, rgba(251,191,36,0.40) 0%, transparent 65%); }
.sm-bg-layer {
position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
/* Anchored to the TOP-right corner behind the hero/pnl area, with a
fixed pixel height rather than a % of the card's own height. It was
previously bottom:0 with height:55% of the whole card — harmless
while the card stayed short, but once the card is made genuinely
taller (to fill Square/Landscape/Wallpaper/Portrait/Story edge to
edge) that percentage stretched this decorative line into a long
diagonal streak crossing straight through the checklist/rating rows
below. Fixed height keeps it a subtle accent behind the hero only,
regardless of how tall the card becomes. */
.sm-bg-layer .sm-chart-bg { position: absolute; right: 0; top: 0; width: 65%; height: calc(230px*var(--s)); }
.sm-bg-layer .sm-glow-blob { position: absolute; top: -60px; right: -60px; }
.sm-card > *:not(.sm-bg-layer) { position: relative; z-index: 1; }
.sm-top-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(18px*var(--s)) calc(22px*var(--s)) 0; flex-shrink: 0; }
.sm-brand { display: flex; align-items: center; gap: calc(9px*var(--s)); }
.sm-brand-icon {
width: calc(32px*var(--s)); height: calc(32px*var(--s)); border-radius: 0;
display: flex; align-items: center; justify-content: center;
background: transparent;
}
.sm-brand-logo {
width: calc(80px*var(--s)); height: auto;
object-fit: contain;
filter: none;
}
/* Logo in the share card — adapts to card theme (dark/light) */
.sm-card-logo {
height: calc(32px*var(--s)); width: auto;
object-fit: contain; display: block;
/* Dark card: logo has white wordmark + white text — show as-is */
filter: brightness(0) invert(1);
}
.sm-card.light .sm-card-logo {
/* Light card: force entire logo to solid black — clean on white bg */
filter: brightness(0);
}
[data-theme="light"] .sm-brand-logo {
filter: brightness(0);
}
.sm-brand-text { display: flex; flex-direction: column; gap: 1px; }
.sm-brand-name { font-size: calc(14px*var(--s)); font-weight: 800; letter-spacing: -0.3px; line-height: 1; }
.sm-brand-sub { font-size: calc(10px*var(--s)); opacity: 0.45; letter-spacing: 0.2px; }
.sm-badge { font-size: calc(11px*var(--s)); font-weight: 800; letter-spacing: 1px; padding: calc(5px*var(--s)) calc(14px*var(--s)); border-radius: 0; }
.sm-badge-win { background: rgba(52,211,153,0.13); color: #34d399; border: 1px solid rgba(52,211,153,0.28); }
.sm-badge-loss { background: rgba(248,113,113,0.13); color: #f87171; border: 1px solid rgba(248,113,113,0.28); }
.sm-badge-be { background: rgba(251,191,36,0.13); color: #fbbf24; border: 1px solid rgba(251,191,36,0.28); }
.sm-card.light .sm-badge-win { background: rgba(5,150,105,0.09); color: #059669; border-color: rgba(5,150,105,0.22); }
.sm-card.light .sm-badge-loss { background: rgba(220,38,38,0.09); color: #dc2626; border-color: rgba(220,38,38,0.22); }
.sm-card.light .sm-badge-be { background: rgba(180,83,9,0.09); color: #b45309; border-color: rgba(180,83,9,0.22); }
.sm-hero { display: flex; align-items: flex-end; justify-content: space-between; padding: calc(14px*var(--s)) calc(22px*var(--s)) calc(16px*var(--s)); gap: calc(12px*var(--s)); }
.sm-pair { font-size: calc(42px*var(--s)); font-weight: 900; letter-spacing: -2px; line-height: 0.95; }
.sm-direction { display: flex; align-items: center; gap: calc(6px*var(--s)); margin-top: calc(7px*var(--s)); font-size: calc(12px*var(--s)); opacity: 0.5; font-weight: 600; }
.sm-dir-arrow { font-size: calc(10px*var(--s)); }
.arr-buy { color: #34d399; opacity: 1 !important; }
.arr-sell { color: #f87171; opacity: 1 !important; }
.sm-card.light .arr-buy { color: #059669; }
.sm-card.light .arr-sell { color: #dc2626; }
.sm-hero-right { text-align: right; flex-shrink: 0; }
.sm-pnl-block { display: flex; flex-direction: column; align-items: flex-end; gap: calc(2px*var(--s)); }
.sm-pnl-main { font-size: calc(38px*var(--s)); font-weight: 800; letter-spacing: 0.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.sm-pnl-sub { font-size: calc(15px*var(--s)); font-weight: 700; letter-spacing: 0.2px; opacity: 0.75; }
.pnl-win { color: #34d399; }
.pnl-loss { color: #f87171; }
.pnl-be { color: #fbbf24; }
.sm-card.light .pnl-win { color: #059669; }
.sm-card.light .pnl-loss { color: #dc2626; }
.sm-card.light .pnl-be { color: #b45309; }
.sm-pnl-label { font-size: calc(10px*var(--s)); opacity: 0.4; margin-top: calc(3px*var(--s)); font-weight: 600; letter-spacing: 0.3px; }
.sm-rule { height: 1px; margin: 0 calc(22px*var(--s)); }
.sm-card.dark .sm-rule { background: rgba(255,255,255,0.07); }
.sm-card.light .sm-rule { background: rgba(0,0,0,0.08); }
.sm-stats { display: grid; grid-template-columns: repeat(2,1fr); padding: 0 calc(22px*var(--s)); }
.sm-stat { display: flex; flex-direction: column; gap: calc(5px*var(--s)); padding: calc(14px*var(--s)) 0; }
.sm-stat-center { border-left: 1px solid; border-right: 1px solid; padding-left: calc(14px*var(--s)); padding-right: calc(14px*var(--s)); margin-left: calc(4px*var(--s)); margin-right: calc(4px*var(--s)); }
.sm-card.dark .sm-stat-center { border-color: rgba(255,255,255,0.07); }
.sm-card.light .sm-stat-center { border-color: rgba(0,0,0,0.08); }
.sm-stat-lbl { font-size: calc(9px*var(--s)); font-weight: 700; letter-spacing: 0.8px; opacity: 0.38; text-transform: uppercase; }
.sm-stat-val { font-size: calc(18px*var(--s)); font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.sm-stat-val-sm { font-size: calc(14px*var(--s)); letter-spacing: -0.2px; }
.sm-tags { display: flex; flex-wrap: wrap; gap: calc(7px*var(--s)); padding: calc(12px*var(--s)) calc(22px*var(--s)) calc(10px*var(--s)); }
.sm-tag { display: flex; align-items: center; gap: calc(6px*var(--s)); padding: calc(5px*var(--s)) calc(12px*var(--s)); border-radius: 0; font-size: calc(11px*var(--s)); font-weight: 600; letter-spacing: 0.1px; white-space: nowrap; }
.sm-card.dark .sm-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.sm-card.light .sm-tag { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); }
.sm-dot { width: calc(6px*var(--s)); height: calc(6px*var(--s)); border-radius: 50%; flex-shrink: 0; }
.sm-tag-gold .sm-dot { background: #fbbf24; }
.sm-tag-blue .sm-dot { background: #60a5fa; }
.sm-tag-green .sm-dot { background: #34d399; }
.sm-card.light .sm-tag-gold .sm-dot { background: #b45309; }
.sm-card.light .sm-tag-blue .sm-dot { background: #4f46e5; }
.sm-card.light .sm-tag-green .sm-dot { background: #059669; }
.sm-tag-dir-buy .sm-dot { background: #34d399; }
.sm-tag-dir-sell .sm-dot { background: #f87171; }
.sm-card.light .sm-tag-dir-buy .sm-dot { background: #059669; }
.sm-card.light .sm-tag-dir-sell .sm-dot { background: #dc2626; }
/* ── Trend hero (big backdrop line behind ticker/pnl) ── */
.sm-trend-hero { position: relative; height: calc(46px*var(--s)); margin: 0 calc(22px*var(--s)) calc(-30px*var(--s)); pointer-events: none; }
.sm-trend-hero svg { width: 100%; height: 100%; overflow: visible; }
.sm-trend-hero path { fill: none; stroke-width: 2; opacity: 1; }
.sm-card.dark .sm-trend-hero path.trend-win { stroke: #34d399; }
.sm-card.dark .sm-trend-hero path.trend-loss { stroke: #f87171; }
.sm-card.dark .sm-trend-hero path.trend-be { stroke: #fbbf24; }
.sm-card.light .sm-trend-hero path.trend-win { stroke: #059669; }
.sm-card.light .sm-trend-hero path.trend-loss { stroke: #dc2626; }
.sm-card.light .sm-trend-hero path.trend-be { stroke: #b45309; }
/* ── Score rings (execution / discipline / efficiency + edge grade) ── */
.sm-rings { display: flex; align-items: center; justify-content: space-between; padding: calc(14px*var(--s)) calc(22px*var(--s)) calc(4px*var(--s)); gap: calc(8px*var(--s)); }
.sm-ring-item { display: flex; flex-direction: column; align-items: center; gap: calc(6px*var(--s)); flex: 1; }
.sm-ring-svg { width: calc(52px*var(--s)); height: calc(52px*var(--s)); transform: rotate(-90deg); }
.sm-ring-track { fill: none; stroke-width: 5; }
.sm-card.dark .sm-ring-track { stroke: rgba(255,255,255,0.08); }
.sm-card.light .sm-ring-track { stroke: rgba(0,0,0,0.08); }
.sm-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.3s; }
.sm-ring-wrap { position: relative; width: calc(52px*var(--s)); height: calc(52px*var(--s)); }
.sm-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(12px*var(--s)); font-weight: 800; }
.sm-ring-label { font-size: calc(8.5px*var(--s)); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.45; text-align: center; }
.sm-edge-grade { display: flex; flex-direction: column; align-items: center; gap: calc(6px*var(--s)); flex: 0 0 auto; padding-left: calc(10px*var(--s)); border-left: 1px solid; }
.sm-card.dark .sm-edge-grade { border-color: rgba(255,255,255,0.09); }
.sm-card.light .sm-edge-grade { border-color: rgba(0,0,0,0.09); }
.sm-edge-grade-val { font-size: calc(24px*var(--s)); font-weight: 900; letter-spacing: -0.5px; line-height: 1; }
.sm-edge-grade-lbl { font-size: calc(8.5px*var(--s)); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.45; }
/* ── Mini stat row (risk / checklist score / rating) ── */
.sm-mini-stats { display: flex; padding: calc(10px*var(--s)) calc(22px*var(--s)) 0; gap: 0; }
.sm-mini-stat { flex: 1; display: flex; flex-direction: column; gap: calc(2px*var(--s)); text-align: center; padding: calc(8px*var(--s)) calc(4px*var(--s)); }
.sm-mini-stat + .sm-mini-stat { border-left: 1px solid; }
.sm-card.dark .sm-mini-stat + .sm-mini-stat { border-color: rgba(255,255,255,0.07); }
.sm-card.light .sm-mini-stat + .sm-mini-stat { border-color: rgba(0,0,0,0.08); }
.sm-mini-stat-val { display: flex; align-items: center; justify-content: center; gap: calc(5px*var(--s)); font-size: calc(15px*var(--s)); font-weight: 800; letter-spacing: -0.3px; }
.sm-mini-stat-lbl { font-size: calc(8.5px*var(--s)); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.4; }
.sm-mini-stat-val .sm-mini-stat-icon { flex-shrink: 0; opacity: 0.55; width: calc(13px*var(--s)); height: calc(13px*var(--s)); }
/* ── Checklist grid ── */
.sm-checklist-divider { height: 2px; margin: calc(6px*var(--s)) calc(22px*var(--s)) 0; background: #fbbf24; }
.sm-card.light .sm-checklist-divider { background: #b45309; }
.sm-checklist-lbl { font-size: calc(10px*var(--s)); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: calc(14px*var(--s)) calc(22px*var(--s)) calc(6px*var(--s)); text-align: center; }
.sm-card.dark .sm-checklist-lbl { color: #fbbf24; }
.sm-card.light .sm-checklist-lbl { color: #b45309; }
.sm-checklist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6px*var(--s)) calc(10px*var(--s)); padding: 0 calc(22px*var(--s)) calc(14px*var(--s)); }
.sm-check-item { display: flex; align-items: center; justify-content: flex-start; gap: calc(7px*var(--s)); font-size: calc(11px*var(--s)); font-weight: 600; min-width: 0; }
/* Vertical dividers between the 3 columns — items 2 and 3 of every row
(nth-child(3n+2) / nth-child(3n)) get a left border, matching the gold
accent used for the divider above the section. */
.sm-check-item:nth-child(3n+2), .sm-check-item:nth-child(3n) { border-left: 1px solid rgba(251,191,36,0.35); padding-left: calc(10px*var(--s)); }
.sm-card.light .sm-check-item:nth-child(3n+2), .sm-card.light .sm-check-item:nth-child(3n) { border-left-color: rgba(180,83,9,0.35); }
.sm-check-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-check-icon { flex: 0 0 auto; width: calc(15px*var(--s)); height: calc(15px*var(--s)); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid; }
.sm-card.dark .sm-check-icon { border-color: rgba(255,255,255,0.18); }
.sm-card.light .sm-check-icon { border-color: rgba(0,0,0,0.18); }
.sm-check-icon svg { width: calc(9px*var(--s)); height: calc(9px*var(--s)); stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sm-check-icon.checked { background: #059669; border-color: #059669; }
.sm-check-item:not(.checked) { opacity: 0.35; }
/* ── Narrative quote (pretrade thesis / trade notes) ── */
.sm-narrative-lbl { font-size: calc(10px*var(--s)); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.4; padding: calc(8px*var(--s)) calc(22px*var(--s)) calc(4px*var(--s)); }
.sm-notes-row { padding: 0 calc(22px*var(--s)) calc(10px*var(--s)); }
.sm-notes { padding: calc(10px*var(--s)) calc(14px*var(--s)); border-radius: 0; font-size: calc(12px*var(--s)); line-height: 1.6; font-style: italic; border-left: 3px solid #fbbf24; }
.sm-card.dark .sm-notes { background: rgba(255,255,255,0.03); color: rgba(240,244,255,0.60); }
.sm-card.light .sm-notes { background: rgba(0,0,0,0.03); color: rgba(15,23,42,0.60); border-left-color: #b45309; }
/* ── Share modal controls ── */
.sm-section { display: flex; flex-direction: column; gap: 8px; }
.sm-section-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text3); }
.sm-seg { display: flex; border: 1px solid rgba(255,255,255,0.08); border-radius: 0; overflow: hidden; }
[data-theme="light"] .sm-seg { border-color: rgba(0,0,0,0.09); }
.sm-seg-btn { flex: 1; padding: 9px 0; background: rgba(255,255,255,0.03); border: none; border-right: 1px solid rgba(255,255,255,0.08); color: var(--text2); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.16s, color 0.16s; }
.sm-seg-btn:last-child { border-right: none; }
.sm-seg-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.sm-seg-btn.active { background: rgba(251,191,36,0.14); color: #fbbf24; }
[data-theme="light"] .sm-seg-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sm-seg-btn.active { background: rgba(180,83,9,0.10); color: #b45309; }
.sm-usd-row { display: flex; flex-direction: column; gap: 6px; }
.sm-usd-label { font-size: 11px; color: var(--text3); }
.sm-usd-input-wrap { display: flex; align-items: center; border: 1px solid rgba(255,255,255,0.09); border-radius: 0; overflow: hidden; }
[data-theme="light"] .sm-usd-input-wrap { border-color: rgba(0,0,0,0.10); }
.sm-usd-prefix { padding: 8px 12px; background: rgba(255,255,255,0.04); font-size: 13px; font-weight: 700; color: var(--text3); border-right: 1px solid rgba(255,255,255,0.09); font-family: var(--font-mono, monospace); }
[data-theme="light"] .sm-usd-prefix { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); }
.sm-usd-input { flex: 1; padding: 8px 12px; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-mono, monospace); font-size: 13px; }
.sm-select-wrap { position: relative; }
.sm-select { width: 100%; appearance: none; padding: 10px 34px 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 0; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
[data-theme="light"] .sm-select { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); }
/* The dropdown's OPTION list is rendered by the browser itself, outside
any element .sm-select's own styles apply to, so without this it
falls back to the browser default — a plain white list with dark
text — regardless of the card/modal's own dark theme. Setting
background/color directly on the