* { margin:0; padding:0; box-sizing:border-box; } :root { --accent:#ffffff; --accent-rgb:255,255,255; /* ── Design tokens: white/black alpha scale (dashboard.html architecture pass) ── Mechanically extracted from every literal rgba(255,255,255,X) / rgba(0,0,0,X) that appeared in this stylesheet — one declaration per distinct shade instead of the same value re-typed at each call site. Values are unchanged; only the declaration site moved, so nothing renders differently. ── */ --white-02: rgba(255,255,255,0.02); --white-025: rgba(255,255,255,0.025); --white-03: rgba(255,255,255,0.03); --white-035: rgba(255,255,255,0.035); --white-04: rgba(255,255,255,0.04); --white-05: rgba(255,255,255,0.05); --white-06: rgba(255,255,255,0.06); --white-07: rgba(255,255,255,0.07); --white-08: rgba(255,255,255,0.08); --white-09: rgba(255,255,255,0.09); --white-1: rgba(255,255,255,0.1); --white-12: rgba(255,255,255,0.12); --white-13: rgba(255,255,255,0.13); --white-14: rgba(255,255,255,0.14); --white-15: rgba(255,255,255,0.15); --white-18: rgba(255,255,255,0.18); --white-2: rgba(255,255,255,0.2); --white-22: rgba(255,255,255,0.22); --white-25: rgba(255,255,255,0.25); --white-3: rgba(255,255,255,0.3); --white-35: rgba(255,255,255,0.35); --white-38: rgba(255,255,255,0.38); --white-4: rgba(255,255,255,0.4); --white-45: rgba(255,255,255,0.45); --white-5: rgba(255,255,255,0.5); --white-55: rgba(255,255,255,0.55); --white-6: rgba(255,255,255,0.6); --white-65: rgba(255,255,255,0.65); --white-7: rgba(255,255,255,0.7); --white-75: rgba(255,255,255,0.75); --white-8: rgba(255,255,255,0.8); --white-85: rgba(255,255,255,0.85); --white-9: rgba(255,255,255,0.9); --white-92: rgba(255,255,255,0.92); --black-0: rgba(0,0,0,0); --black-2: rgba(0,0,0,0.2); --black-25: rgba(0,0,0,0.25); --black-3: rgba(0,0,0,0.3); --black-35: rgba(0,0,0,0.35); --black-4: rgba(0,0,0,0.4); --black-45: rgba(0,0,0,0.45); --black-5: rgba(0,0,0,0.5); --black-55: rgba(0,0,0,0.55); --black-6: rgba(0,0,0,0.6); --black-65: rgba(0,0,0,0.65); --black-7: rgba(0,0,0,0.7); --black-72: rgba(0,0,0,0.72); --black-75: rgba(0,0,0,0.75); --black-8: rgba(0,0,0,0.8); --black-85: rgba(0,0,0,0.85); --black-9: rgba(0,0,0,0.9); --black-92: rgba(0,0,0,0.92); --black-93: rgba(0,0,0,0.93); color-scheme: dark; /* ── Design tokens: border-radius scale (dashboard.html architecture pass) ── Same mechanical extraction as the alpha-color tokens above: every distinct single-value border-radius in this stylesheet, centralized. Values unchanged. FOLLOW-UP (premium-polish pass): the ~13 small text-label utility buttons (.copy-btn/.page-btn/.challenge-btn/.goal-edit-btn/.cl-reset-btn/.currency-btn/ .an-range-btn/.an-export-btn/.habit-add-btn/.ecal-nav-btn) previously scattered across --radius-6/7/8 with no discernible pattern despite being the same visual role — converged onto --radius-7 (already the majority value), and onto one of two consistent padding shapes matching their existing 11px/12px font-size split. Deliberately NOT touched: .tl-dd-btn and .cmd-palette-btn are structurally different components (a full-width dropdown trigger and a command-palette chip, not a simple label button) so their padding wasn't forced to match; .currency-btn keeps its tighter padding since it lives inside a 3px-padded segmented toggle where widening it risks overflow. .run-btn (primary CTA), .fab-btn (circular), .trade-tag-btn (pill), .cal-nav-btn (larger glyph nav), and .share-btn (more prominent action) are legitimately distinct tiers, not drift. ── */ --radius-2: 2px; --radius-3: 3px; --radius-4: 4px; --radius-5: 5px; --radius-6: 6px; --radius-7: 7px; --radius-8: 8px; --radius-9: 9px; --radius-10: 10px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-18: 18px; --radius-20: 20px; --radius-22: 22px; --radius-50-pct: 50%; } /* Body never scrolls — .content is the scroll container */ html, body { overflow:hidden; height:100%; } html { overscroll-behavior:none; } /* A11Y: visible focus ring for keyboard navigation */ :focus-visible { outline: 2px solid rgba(var(--accent-rgb),0.7); outline-offset: 2px; border-radius: var(--radius-4); } /* Suppress mouse-click focus rings but keep keyboard ones */ :focus:not(:focus-visible) { outline: none; } body { background:#030303; color:#fff; font-family:'Inter','DM Sans',sans-serif; font-feature-settings:'cv02','cv03','cv04','cv11'; position:relative; } /* Ambient gradient background — single radial for minimal paint cost */ body::before { content:''; position:fixed; inset:0; z-index:0; background: radial-gradient(ellipse 80% 50% at 15% 10%, rgba(var(--accent-rgb),0.05) 0%, transparent 60%); pointer-events:none; } /* Monospaced number utility */ .mono { font-family:'JetBrains Mono','DM Mono',monospace; font-variant-numeric:tabular-nums; } .mono-sm { font-family:'JetBrains Mono','DM Mono',monospace; font-size:0.88em; font-variant-numeric:tabular-nums; } /* Fixed viewport shell — content scrolls inside .content, not on body */ .app { display:flex; height:100vh; overflow:hidden; } .sidebar { width:240px; flex-shrink:0; background:#0d0d0d; border-right:0.5px solid var(--white-09); display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100; transition:width 0.2s ease; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; /* prevent scroll chaining to body on iOS */ } .sidebar::-webkit-scrollbar { display:none; } .sb-top { padding:1.25rem; border-bottom:0.5px solid var(--white-08); } .sb-brand { display:flex; align-items:center; gap:10px; margin-bottom:1rem; } .sb-brand img { width:30px; height:30px; border-radius:var(--radius-50-pct); object-fit:cover; } .sb-brand-name { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:3px; } .sb-plan { display:inline-flex; align-items:center; gap:6px; background:rgba(var(--accent-rgb),0.08); border:0.5px solid rgba(var(--accent-rgb),0.2); border-radius:var(--radius-20); padding:4px 12px; font-size:11px; color:var(--accent); } .sb-plan-dot { width:5px; height:5px; border-radius:var(--radius-50-pct); background:var(--accent); } .sb-nav { flex:1; padding:0.75rem 0; } .sb-section { padding:0 0.75rem; margin-bottom:0.5rem; } .sb-lbl { font-size:10px; color:var(--white-75); letter-spacing:2px; text-transform:uppercase; padding:0.5rem 0.5rem 0.25rem; display:flex; align-items:center; justify-content:space-between; } .sb-lbl-toggle { cursor:pointer; user-select:none; } .sb-lbl-toggle::after { content:''; display:inline-block; width:6px; height:6px; border-right:1.5px solid var(--white-25); border-bottom:1.5px solid var(--white-25); transform:rotate(45deg) translateY(-2px); transition:transform 0.2s; } .sb-section.collapsed .sb-lbl-toggle::after { transform:rotate(-45deg) translateY(0px); } .sb-section-items { overflow:hidden; transition:max-height 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.18s; max-height:900px; opacity:1; } .sb-section.collapsed .sb-section-items { max-height:0 !important; opacity:0; } .sidebar.collapsed .sb-lbl-toggle::after { display:none !important; } .sb-item { display:flex; align-items:center; gap:10px; padding:0.6rem 0.75rem; border-radius:var(--radius-8); cursor:pointer; margin-bottom:2px; transition:background 0.15s; color:var(--white-55); font-size:13px; touch-action:manipulation; } .sb-item:hover { background:var(--white-05); color:#fff; } .sb-item.active { background:var(--white-08); color:#fff; font-weight:500; } .sb-item.locked { opacity:0.45; } .sb-item.locked .sb-badge { opacity:1; } .sb-icon:empty { display:none; } .sb-badge { margin-left:auto; font-size:9px; background:rgba(var(--accent-rgb),0.1); border:0.5px solid rgba(var(--accent-rgb),0.2); color:var(--accent); border-radius:var(--radius-10); padding:2px 6px; } .sb-bottom { padding:0.75rem; border-top:0.5px solid var(--white-08); } .sb-user { display:flex; align-items:center; gap:8px; padding:0.5rem; } .sb-avatar { width:28px; height:28px; border-radius:var(--radius-50-pct); background:rgba(var(--accent-rgb),0.15); border:0.5px solid rgba(var(--accent-rgb),0.3); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--accent); font-weight:500; flex-shrink:0; } .sb-email { font-size:11px; color:#999; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-logout { background:none; border:1px solid var(--white-12); border-radius:var(--radius-6); color:var(--white-4); cursor:pointer; font-size:10px; padding:3px 8px; letter-spacing:0.5px; transition:all 0.15s; } .sb-logout:hover { background:rgba(244,67,54,0.12); border-color:rgba(244,67,54,0.4); color:rgba(244,67,54,0.9); } .main { margin-left:240px; flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; } .topbar { padding:1rem 1.5rem; border-bottom:0.5px solid var(--white-08); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; /* always visible — lives above the scroll container */ background:#0a0a0a; z-index:10; } .topbar-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; } .topbar-sub { font-size:12px; color:var(--white-75); } .topbar-badge { font-size:11px; color:var(--white-75); background:#0a0a0a; border:0.5px solid var(--white-08); border-radius:var(--radius-20); padding:4px 12px; } /* THE scroll container — all panels scroll here, not on body */ /* max-width+centering (100/100 pass) only engages past 1600px (normal desktop, 1280- 1440px, is completely unaffected) — without it, fixed-column grids (.home-stats, .analytics-2col/3col, etc.) stretch uncomfortably wide with excess whitespace on an ultrawide monitor instead of the page just staying a sane reading/working width. */ /* scrollbar-gutter:stable (bug found by TJ) — .content's max-width+margin:auto centering means how much horizontal space is "available" to center within changes depending on whether THIS tab's content is tall enough to need a scrollbar. A short tab (e.g. Calendar) with no scrollbar sat at a different horizontal position than a tall tab (e.g. Overview) with one — the whole page visibly shifted sideways when switching tabs. Reserving the scrollbar's space permanently, whether or not it's currently needed, makes that centering math identical across every tab. Supported in all current browsers; on the rare one that doesn't support it, this line is simply ignored and behavior is unchanged from before. */ /* width:100% is load-bearing here, not decorative padding-out: .content sits in a column-direction flex container (.main) and centers itself with auto side margins. Auto side-margins on a flex item's cross axis make the browser fall back to shrink-to-fit sizing (same algorithm as floats), which computes width from the CHILDREN's max-content size — so whichever tab's content happens to be widest (e.g. Overview's fixed 1fr grid tracks, which default to minmax(auto,1fr) and size themselves to their content) silently resized this whole container, while narrower tabs (e.g. Log Trade's bounded auto-fit/minmax(160px,1fr) grid) shrank it back down. Giving it an explicit width:100% takes it out of shrink-to-fit mode: width now always comes from the parent (100%, capped by max-width), never from whichever panel happens to be active. (bug found by TJ) */ .content { flex:1; min-height:0; padding:1.5rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; width:100%; max-width:1600px; margin:0 auto; } .panel { display:none; } .panel.active { display:block; } /* content-visibility: auto skips layout+paint for panels not yet shown, shaving ~60-80% of initial render cost on the dashboard */ .panel:not(.active) { content-visibility: auto; } .home-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:1.5rem; } .stat-card { background:var(--white-04); border:0.5px solid var(--white-08); border-radius:var(--radius-12); padding:1.25rem; box-shadow:0 4px 24px var(--black-25),inset 0 1px 0 var(--white-05); transition:border-color 0.2s,transform 0.2s; will-change:transform; } .stat-card:hover { border-color:var(--white-14); transform:translateY(-1px); } .stat-num { font-family:'Bebas Neue',sans-serif; font-size:32px; color:#fff; line-height:1; } .stat-lbl { font-size:11px; color:var(--white-75); letter-spacing:1px; text-transform:uppercase; margin-top:4px; } .home-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; } .home-tool { background:var(--white-03); border:0.5px solid var(--white-08); border-radius:var(--radius-12); padding:1.25rem; cursor:pointer; transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:0 2px 16px var(--black-2); touch-action:manipulation; } .home-tool:hover { border-color:rgba(var(--accent-rgb),0.3); transform:translateY(-2px); box-shadow:0 6px 24px var(--black-3); } .home-tool.locked { opacity:0.45; cursor:default; } .home-tool.locked .ht-badge { opacity:1; font-weight:600; } .ht-icon { font-size:20px; margin-bottom:0.75rem; } .ht-name { font-size:13px; font-weight:500; margin-bottom:3px; } .ht-desc { font-size:11px; color:#888; line-height:1.5; } .ht-badge { font-size:10px; color:var(--accent); margin-top:6px; } .tool-header { margin-bottom:1.25rem; } .tool-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; margin-bottom:4px; } .tool-desc { font-size:13px; color:#888; line-height:1.6; } .card { background:var(--white-04); border:0.5px solid var(--white-08); border-radius:var(--radius-14); padding:1.25rem; margin-bottom:1rem; box-shadow:0 4px 32px var(--black-3),inset 0 1px 0 var(--white-05); transition:border-color 0.2s,box-shadow 0.2s; } .card:hover { border-color:var(--white-12); box-shadow:0 8px 40px var(--black-35),inset 0 1px 0 var(--white-07); } /* Every other AI Trade Journal tab wraps its content in .card, which insets it by 1.25rem on all sides. Overview doesn't use .card (it already has its own per-widget styling), so match just that inset here to keep the visible content edges aligned across tabs, without adding .card's background/border/shadow. */ #jtab-overview { padding:1.25rem; } .form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:1rem; } .fg { display:flex; flex-direction:column; gap:7px; } label { font-size:11px; color:var(--white-75); letter-spacing:1px; text-transform:uppercase; font-weight:600; } input, select, textarea { background:var(--white-05); border:0.5px solid var(--white-12); border-radius:var(--radius-8); padding:9px 12px; color:#fff; font-family:'DM Sans',sans-serif; font-size:13px; outline:none; width:100%; } select option { background:#111; color:#fff; } input:focus, select:focus, textarea:focus { border-color:rgba(var(--accent-rgb),0.4); } input::placeholder, textarea::placeholder { color:var(--white-2); } textarea { min-height:90px; resize:vertical; } .run-btn { background:#fff; color:#000; border:none; border-radius:var(--radius-8); padding:10px 22px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; cursor:pointer; touch-action:manipulation; /* eliminates 300ms tap delay on mobile */ } .run-btn.gold { background:var(--accent); color:#000; } /* Was entirely missing — a disabled .run-btn (see j-save-btn/j-save-ai-btn) looked pixel-identical to an active one, giving no visual sign a click wouldn't do anything. */ .run-btn:disabled { opacity:0.5; cursor:default; } .result { display:none; margin-top:1.25rem; border-radius:var(--radius-12); overflow:hidden; font-family:'DM Sans',sans-serif; } .result-inner { background:linear-gradient(135deg,rgba(var(--accent-rgb),0.06) 0%,var(--white-03) 100%); border:0.5px solid rgba(var(--accent-rgb),0.2); border-radius:var(--radius-12); padding:1.5rem; } .result-inner p { font-size:13px; color:var(--white-8); line-height:1.9; margin-bottom:0.75rem; } .result-inner p:last-child { margin-bottom:0; } .result-inner strong { color:var(--accent); font-weight:700; } .result-inner h3 { font-family:'Inter','DM Sans',sans-serif; font-size:14px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:#fff; margin:1.25rem 0 0.65rem; padding-bottom:7px; border-bottom:1px solid rgba(var(--accent-rgb),0.3); } .result-inner h3:first-child { margin-top:0; } .result-inner ul { padding-left:1.2rem; margin-bottom:0.75rem; } .result-inner ul li { font-size:13px; color:var(--white-75); line-height:1.8; margin-bottom:0.25rem; } .result-raw { font-size:13px; color:var(--white-8); line-height:1.9; white-space:pre-line; padding:1.5rem; background:var(--white-03); border:0.5px solid rgba(var(--accent-rgb),0.15); border-radius:var(--radius-12); } /* Loading spinner */ .result-loading { display:flex; align-items:center; gap:12px; padding:1.25rem; background:var(--white-03); border:0.5px solid rgba(var(--accent-rgb),0.15); border-radius:var(--radius-12); font-size:13px; color:var(--white-5); } .spinner { width:18px; height:18px; border-radius:var(--radius-50-pct); border:2px solid rgba(var(--accent-rgb),0.2); border-top-color:var(--accent); animation:spin 0.8s linear infinite; flex-shrink:0; } @keyframes spin { to { transform:rotate(360deg); } } /* Accessibility (premium-polish pass): honour prefers-reduced-motion — this stylesheet had zero accommodation for it despite relying on hover-lift transitions, count-up animations, and fadeSlideIn/fabUp entrance animations throughout. Shortens transitions/animations to be near-instant for anyone who's asked their OS to reduce motion, without changing anything for everyone else. The loading spinner is deliberately exempted — its motion communicates "this is in progress", not decoration, so removing it would take away real information. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Restore the spinner's own motion — reinstated after the blanket rule above so it wins on cascade order (both sides are !important, so source order decides). */ .spinner { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; } } /* Gold left border on active nav */ .sb-item.active { background:var(--white-06) !important; color:#fff !important; font-weight:500 !important; border-left:2px solid var(--accent); padding-left:calc(0.75rem - 2px); } /* Pulsing plan badge */ .sb-plan { box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.2); } /* Tool card hover glow — consolidated with base rule above, no duplicate needed */ /* Card shimmer on hover */ .card { transition:border-color 0.2s; } .card:hover { border-color:var(--white-14); } /* Stat card accent */ .stat-card { position:relative; overflow:hidden; transition:border-color 0.2s; } .stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), transparent); } /* Smooth sidebar item transitions */ .sb-item { transition:background 0.15s, color 0.15s, border-color 0.15s; } /* Run button shine effect */ .run-btn { position:relative; overflow:hidden; transition:opacity 0.2s, transform 0.15s !important; } .run-btn:hover { opacity:0.92 !important; transform:translateY(-1px) !important; } .run-btn:active { transform:translateY(0) !important; } .run-btn::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg, transparent, var(--white-15), transparent); transition:left 0.4s; } .run-btn:hover::after { left:150%; } /* Input focus glow */ input:focus, select:focus, textarea:focus { box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.1) !important; } /* Sidebar top gradient */ .sidebar { background:linear-gradient(180deg,#0d0d0d 0%,#0a0a0a 100%) !important; } /* Result animation */ .result { animation:fadeSlideIn 0.3s ease; } @keyframes fadeSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } /* Hamburger — hidden on desktop */ .sb-toggle { display:none; } .sb-overlay { display:none; position:fixed; inset:0; background:var(--black-6); z-index:999; } .sb-overlay.active { display:block; } /* ============================================ MOBILE ONLY — max-width: 768px Desktop styles above are completely unchanged ============================================ */ @media (max-width: 768px) { /* Layout */ .app { flex-direction:column; height:100dvh; } .main { margin-left:0 !important; width:100%; height:100dvh; } /* Sidebar — slides in from left; use transform for GPU-composited animation */ .sidebar { position:fixed !important; left:0 !important; top:0; width:260px; height:100vh; z-index:1000; transform:translateX(-260px); transition:transform 0.25s ease; will-change:transform; } .sidebar.mobile-open { transform:translateX(0) !important; box-shadow:4px 0 32px var(--black-9); } /* Hamburger visible on mobile */ .sb-toggle { display:flex !important; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; width:36px; height:36px; border-radius:var(--radius-8); flex-direction:column; gap:5px; padding:6px; touch-action:manipulation; flex-shrink:0; } .sb-toggle span { display:block; width:18px; height:1.5px; background:var(--white-8); } /* Topbar */ .topbar { padding:0.85rem 1rem !important; display:grid !important; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; } .topbar-title { font-size:15px !important; } .topbar-sub { display:none !important; } .topbar-badge { font-size:10px !important; padding:3px 8px !important; white-space:nowrap; } /* Content — bottom padding clears the fixed mobile bottom nav AND the FAB (100/100 pass: the FAB sits at bottom:74px + 44px tall, i.e. up to 118px from the viewport bottom — 38px higher than the old 80px reserve, so the last ~38px of real content could sit behind it). 130px clears both with a small margin. */ .content { padding:0.875rem !important; padding-bottom:calc(130px + env(safe-area-inset-bottom,0px)) !important; } /* Stats grid — 2 col on mobile */ .home-stats { grid-template-columns:1fr 1fr !important; gap:8px !important; margin-bottom:0.875rem !important; } .stat-num { font-size:24px !important; } .stat-lbl { font-size:10px !important; } /* Tool cards grid — 2 col */ .home-tools { grid-template-columns:1fr 1fr !important; gap:8px !important; } .home-tool { padding:0.875rem !important; } .ht-icon { font-size:18px !important; margin-bottom:0.5rem !important; } .ht-name { font-size:12px !important; } .ht-desc { font-size:10px !important; } /* Tool panel header */ .tool-title { font-size:20px !important; } .tool-desc { font-size:12px !important; } .card { padding:1rem !important; } /* Form rows — single column */ .form-row { grid-template-columns:1fr !important; gap:8px !important; margin-bottom:0.75rem !important; } /* Trade Log row actions (Template/Share/Delete) — well under the 44px touch-target guideline at their base size (padding 3-4px, ~19px tall). Table stays horizontally scrollable regardless, so this doesn't widen it further than mobile already handles. */ .tl-tmpl-btn, button[data-action="delete"] { min-height:36px; padding:8px 12px !important; } /* Inputs — 16px prevents iOS auto-zoom */ input, select, textarea { font-size:16px !important; padding:12px !important; } /* Analyse button — full width, easy to tap */ .run-btn { width:100% !important; padding:14px !important; font-size:14px !important; min-height:48px !important; border-radius:10px !important; touch-action:manipulation; } /* Result cards */ .result-inner { padding:1rem !important; } .result-raw { padding:1rem !important; font-size:13px !important; } .result-loading { padding:1rem !important; } /* No horizontal scroll */ body { overflow-x:hidden !important; } .app, .main, .content, .card { max-width:100vw; overflow-x:hidden; } /* Fun grid — single column on mobile */ .fun-grid { grid-template-columns:1fr !important; } .streak-number { font-size:48px !important; } } /* Extra small phones */ @media (max-width: 390px) { .home-stats { grid-template-columns:1fr !important; } .home-stats .stat-card:last-child { grid-column:1 !important; } .home-tools { grid-template-columns:1fr !important; } .content { padding:0.75rem !important; } } .jtab { background:var(--white-06); border:0.5px solid var(--white-1); color:var(--white-5); border-radius:var(--radius-8); padding:8px 18px; font-size:13px; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; } .jtab.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; } .jtab:hover:not(.active) { background:var(--white-1); color:#fff; } .trade-file-input { background:var(--white-04); border:0.5px dashed var(--white-2); border-radius:var(--radius-8); padding:10px; color:var(--white-5); font-size:13px; cursor:pointer; width:100%; box-sizing:border-box; } .trade-file-input:hover { border-color:rgba(var(--accent-rgb),0.4); } /* Copy button */ .copy-btn { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:6px 14px; background:var(--white-06); border:0.5px solid var(--white-12); color:var(--white-55); border-radius:var(--radius-7); font-size:12px; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; font-family:inherit; } .copy-btn:hover { background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.3); color:var(--accent); } .copy-btn.copied { background:rgba(74,222,128,0.1); border-color:rgba(74,222,128,0.3); color:#4ade80; } /* Character counter */ .char-counter { text-align:right; font-size:11px; color:var(--white-5); margin-top:4px; transition:color 0.2s; } .char-counter.warn { color:#f59e0b; } .char-counter.over { color:#f87171; } /* Daily notes */ .notes-card { background:var(--white-03); border:0.5px solid var(--white-07); border-radius:var(--radius-12); padding:1.25rem; } .notes-card textarea { width:100%; min-height:110px; resize:vertical; background:transparent; border:none; outline:none; color:var(--white-8); font-size:13px; line-height:1.75; font-family:inherit; box-sizing:border-box; } .notes-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; } .notes-meta span { font-size:11px; color:var(--white-5); } .notes-saved { transition:color 0.3s; } /* Onboarding modal */ .onboarding-modal { position:fixed; inset:0; background:var(--black-75); display:flex; align-items:center; justify-content:center; z-index:9999; animation:fadeSlideIn 0.3s ease; } .onboarding-inner { background:#111; border:0.5px solid rgba(var(--accent-rgb),0.2); border-radius:var(--radius-18); padding:2.5rem; max-width:520px; width:90%; box-shadow:0 24px 80px var(--black-7); } .onboarding-steps { display:flex; flex-direction:column; gap:14px; margin:1.5rem 0; } .onboarding-step { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--white-04); border:0.5px solid var(--white-07); border-radius:var(--radius-10); } .onboarding-step-icon { font-size:22px; flex-shrink:0; margin-top:1px; } .onboarding-step-body { flex:1; } .onboarding-step-title { font-size:13px; font-weight:600; color:#fff; margin-bottom:3px; } .onboarding-step-desc { font-size:12px; color:var(--white-45); line-height:1.6; } /* Sortable table headers */ .sort-th { cursor:pointer; user-select:none; white-space:nowrap; } .sort-th:hover { color:var(--white-7) !important; } .sort-arrow { margin-left:4px; opacity:0.5; font-size:10px; } .sort-th.active-sort { color:var(--accent) !important; } .sort-th.active-sort .sort-arrow { opacity:1; } /* Pagination controls */ .pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:1.25rem; padding-top:1rem; border-top:0.5px solid var(--white-06); } .page-btn { background:var(--white-06); border:0.5px solid var(--white-12); color:var(--white-6); border-radius:var(--radius-7); padding:6px 14px; font-size:12px; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; font-family:inherit; } .page-btn:hover:not(:disabled) { background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.3); color:var(--accent); } .page-btn:disabled { opacity:0.3; cursor:default; } .page-info { font-size:12px; color:var(--white-35); min-width:80px; text-align:center; } /* ── Fun Features ───────────────────────────────────────────── */ .fun-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:640px) { .fun-grid { grid-template-columns:1fr; } } .fun-card { background:#0a0a0a; border:0.5px solid var(--white-08); border-radius:var(--radius-12); padding:1.25rem; display:flex; flex-direction:column; gap:10px; } .fun-card-label { font-size:10px; color:var(--white-75); text-transform:uppercase; letter-spacing:2px; display:flex; align-items:center; gap:6px; } /* Streak */ .streak-number { font-family:'Bebas Neue',sans-serif; font-size:60px; line-height:1; color:var(--accent); letter-spacing:2px; } .streak-fire { font-size:28px; } .milestone-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; } .ms-dot { font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--radius-20); letter-spacing:0.3px; } .ms-dot.reached { background:rgba(var(--accent-rgb),0.12); border:0.5px solid rgba(var(--accent-rgb),0.3); color:var(--accent); } .ms-dot.upcoming { background:var(--white-03); border:0.5px solid var(--white-08); color:var(--white-2); } /* Quote */ .quote-text { font-size:13px; color:var(--white-75); line-height:1.75; font-style:italic; flex:1; } .quote-author { font-size:11px; color:var(--accent); font-weight:500; } /* Challenge */ .challenge-text { font-size:13px; color:var(--white-75); line-height:1.7; flex:1; } .challenge-btn { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:var(--radius-7); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; border:0.5px solid var(--white-12); background:var(--white-04); color:var(--white-45); align-self:flex-start; } .challenge-btn:hover { border-color:var(--white-25); color:var(--white-7); } .challenge-btn.done { background:rgba(74,222,128,0.1); border-color:rgba(74,222,128,0.3); color:#4ade80; cursor:default; } /* Quiz */ .quiz-q { font-size:13px; color:var(--white-8); line-height:1.65; font-weight:500; } .quiz-opts { display:flex; flex-direction:column; gap:6px; margin-top:2px; } .quiz-opt { text-align:left; padding:9px 13px; border-radius:var(--radius-8); font-size:12px; background:var(--white-04); border:0.5px solid var(--white-1); color:var(--white-6); cursor:pointer; transition:background 0.12s,color 0.12s,border-color 0.12s,opacity 0.12s; font-family:inherit; width:100%; } .quiz-opt:hover:not(:disabled) { background:var(--white-08); color:#fff; border-color:var(--white-2); } .quiz-opt.correct { background:rgba(74,222,128,0.1); border-color:rgba(74,222,128,0.3); color:#4ade80; } .quiz-opt.wrong { background:rgba(248,113,113,0.08); border-color:rgba(248,113,113,0.25); color:#f87171; } .quiz-opt:disabled { cursor:default; } .quiz-exp { font-size:11px; color:var(--white-4); line-height:1.6; margin-top:6px; padding:8px 10px; background:var(--white-03); border-radius:var(--radius-6); } .quiz-done-msg { font-size:12px; color:var(--white-35); text-align:center; padding:1rem 0; } /* Sessions Clock */ .sessions-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; } .session-pill { display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--radius-20); font-size:12px; font-weight:500; border:0.5px solid var(--white-07); background:var(--white-03); color:var(--white-45); transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; } .session-pill.open { background:rgba(74,222,128,0.08); border-color:rgba(74,222,128,0.22); color:#4ade80; } .session-pill.overlap { background:rgba(var(--accent-rgb),0.09); border-color:rgba(var(--accent-rgb),0.25); color:var(--accent); } .session-dot { width:6px; height:6px; border-radius:var(--radius-50-pct); background:var(--white-15); flex-shrink:0; } .session-pill.open .session-dot { background:#4ade80; } .session-pill.overlap .session-dot { background:var(--accent); animation:pulse 2s infinite; } .sessions-utc { font-size:11px; color:var(--white-45); margin-left:auto; white-space:nowrap; } @media(max-width:640px){ .sessions-utc { display:none; } } /* Prop Firm Alert Banner */ .pf-banner { display:flex; align-items:center; gap:12px; border-radius:var(--radius-10); padding:11px 16px; margin-bottom:1.25rem; font-size:13px; } .pf-banner.danger { background:rgba(248,113,113,0.08); border:0.5px solid rgba(248,113,113,0.3); color:#f87171; } .pf-banner.warn { background:rgba(var(--accent-rgb),0.07); border:0.5px solid rgba(var(--accent-rgb),0.28); color:var(--accent); } .pf-banner-icon { font-size:18px; flex-shrink:0; } .pf-banner-msg { flex:1; line-height:1.5; } .pf-banner-msg strong { display:block; font-weight:700; margin-bottom:1px; } .pf-banner-msg span { font-size:11px; opacity:0.7; } /* Weekly Goal */ .goal-section { margin-top:1.5rem; } .goal-card { background:var(--white-03); border:0.5px solid var(--white-07); border-radius:var(--radius-12); padding:1.1rem 1.25rem; display:flex; align-items:center; gap:16px; } .goal-progress-wrap { flex:1; } .goal-label-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; } .goal-title { font-size:12px; color:var(--white-5); } .goal-stat { font-size:13px; font-weight:700; } .goal-bar-bg { height:5px; background:var(--white-07); border-radius:var(--radius-3); overflow:hidden; } .goal-bar-fill { height:100%; border-radius:var(--radius-3); transition:width 0.5s; } .goal-sub { font-size:11px; color:var(--white-3); margin-top:5px; } .goal-edit-btn { background:none; border:0.5px solid var(--white-1); color:var(--white-3); border-radius:var(--radius-7); padding:5px 12px; font-size:11px; cursor:pointer; font-family:inherit; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; white-space:nowrap; } .goal-edit-btn:hover { border-color:var(--white-25); color:var(--white-6); } /* AI Trade Insights */ .insights-section { margin-top:1.5rem; } .insights-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; } .insight-card { background:var(--white-03); border:0.5px solid var(--white-06); border-radius:var(--radius-10); padding:12px 14px; } .insight-val { font-size:15px; font-weight:700; color:#fff; margin-bottom:3px; } .insight-lbl { font-size:11px; color:var(--white-35); } /* Trade Calendar */ .cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .cal-nav-btn { background:none; border:0.5px solid var(--white-14); color:var(--white-6); border-radius:var(--radius-8); padding:5px 13px; font-size:15px; cursor:pointer; font-family:inherit; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; } .cal-nav-btn:hover { border-color:var(--white-3); color:#fff; background:var(--white-05); } .cal-month-label { font-size:16px; font-weight:700; color:#fff; letter-spacing:0.3px; } .cal-dow-row { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; } .cal-dow { font-size:10.5px; color:var(--white-75); text-align:center; padding:2px 0; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; } .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .cal-day { height:52px; border-radius:var(--radius-9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:15px; cursor:default; border:0.5px solid transparent; transition:background 0.12s,color 0.12s,border-color 0.12s,opacity 0.12s; position:relative; color:var(--white-5); font-weight:600; } .cal-day.has-trades { cursor:pointer; } .cal-day.has-trades:hover { filter:brightness(1.2); } .cal-day.win { background:rgba(74,222,128,0.14); border-color:rgba(74,222,128,0.32); color:#4ade80; font-weight:700; } .cal-day.loss { background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.28); color:#f87171; font-weight:700; } .cal-day.split{ background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.25); color:var(--accent); font-weight:700; } .cal-day.breakeven{ background:rgba(96,165,250,0.1); border-color:rgba(96,165,250,0.25); color:#60a5fa; font-weight:700; } .cal-day.empty-day { color:var(--white-3); font-weight:500; } .cal-day.pad { opacity:0; pointer-events:none; } .cal-day.today-ring { outline:2px solid #fff; outline-offset:1px; background:var(--white-07); color:#fff; font-weight:700; } .cal-day-count { font-size:10.5px; opacity:0.85; font-weight:700; letter-spacing:0.2px; } .cal-legend { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; } .cal-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--white-8); font-weight:600; } .cal-legend-dot { width:9px; height:9px; border-radius:var(--radius-3); } .cal-stat-card { transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s; } .cal-stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px var(--black-4); } .cal-trade-list { margin-top:10px; background:var(--white-02); border:0.5px solid var(--white-06); border-radius:var(--radius-10); padding:12px; } .cal-trade-list-title { font-size:11px; font-weight:600; color:var(--white-6); margin-bottom:8px; } /* Tool Reference Sections */ .ref-section { margin-top:1.25rem; } .ref-label { font-size:11px; color:var(--white-75); text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; } .ref-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; } .ref-card { background:var(--white-035); border:0.5px solid var(--white-1); border-radius:var(--radius-10); padding:14px 16px; } .ref-card-head { font-size:13px; font-weight:700; color:var(--white-85); margin-bottom:9px; } .ref-card-body { font-size:12px; color:var(--white-65); line-height:1.7; } .ref-card-body b { color:var(--white-65); font-weight:600; } .ref-tbl { width:100%; border-collapse:collapse; font-size:13px; } .ref-tbl th { color:var(--white-8); font-weight:600; padding:6px 6px; text-align:left; border-bottom:0.5px solid var(--white-1); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; } .ref-tbl td { color:var(--white-7); padding:7px 6px; border-bottom:0.5px solid var(--white-06); } .ref-tbl tr:last-child td { border-bottom:none; } .ref-tbl td:last-child { color:var(--white-9); font-weight:600; } .ref-tag { display:inline-block; padding:2px 8px; border-radius:var(--radius-10); font-size:10px; font-weight:600; } .ref-tag.go { background:rgba(74,222,128,0.1); color:#4ade80; border:0.5px solid rgba(74,222,128,0.2); } .ref-tag.wait { background:rgba(var(--accent-rgb),0.1); color:var(--accent); border:0.5px solid rgba(var(--accent-rgb),0.2); } .ref-tag.stop { background:rgba(248,113,113,0.1); color:#f87171; border:0.5px solid rgba(248,113,113,0.2); } .ref-checklist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .ref-checklist li { font-size:11px; color:var(--white-38); display:flex; align-items:flex-start; gap:7px; line-height:1.5; } .ref-checklist li::before { content:'□'; color:var(--white-2); flex-shrink:0; } /* ── Account Health Score ───────────────────────────────────────── */ .health-wrap { display:flex; align-items:center; gap:14px; } .health-ring { position:relative; width:58px; height:58px; flex-shrink:0; } .health-ring svg { transform:rotate(-90deg); } .health-ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:17px; } .health-info-lbl { font-size:10px; color:var(--white-75); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; } .health-info-sub { font-size:11px; color:var(--white-5); line-height:1.6; } /* ── Monthly P&L Chart ──────────────────────────────────────────── */ .pnl-chart-section { margin-top:1.5rem; } .pnl-bars-wrap { display:flex; align-items:flex-end; justify-content:center; gap:28px; height:130px; padding-bottom:28px; position:relative; margin-top:26px; } .pnl-bar-col { flex:0 0 64px; width:64px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; } .pnl-bar { width:100%; border-radius:5px 5px 0 0; min-height:3px; transition:height 0.4s; } .pnl-bar.pos { background:rgba(74,222,128,0.55); } .pnl-bar.neg { background:rgba(248,113,113,0.5); border-radius:0 0 5px 5px; } .pnl-bar.zero { background:var(--white-1); } .pnl-bar-lbl { font-size:11px; color:var(--white-6); font-weight:600; letter-spacing:0.3px; position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; } .pnl-bar-val { font-size:12px; font-weight:700; position:absolute; top:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; } .pnl-zero-line { position:absolute; left:0; right:0; height:0.5px; background:var(--white-12); pointer-events:none; } /* ── Daily Loss Countdown ───────────────────────────────────────── */ .dloss-bar { background:var(--white-02); border:0.5px solid var(--white-07); border-radius:var(--radius-10); padding:11px 14px; margin-top:10px; } .dloss-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .dloss-lbl { font-size:10px; color:var(--white-75); text-transform:uppercase; letter-spacing:1px; } .dloss-val { font-family:'Bebas Neue',sans-serif; font-size:18px; } .dloss-track { height:5px; background:var(--white-06); border-radius:var(--radius-3); overflow:hidden; } .dloss-fill { height:5px; border-radius:var(--radius-3); transition:width 0.5s; } /* ── Trade of the Week ──────────────────────────────────────────── */ .totw-card { background:rgba(var(--accent-rgb),0.03); border:0.5px solid rgba(var(--accent-rgb),0.12); border-radius:var(--radius-10); padding:13px 15px; display:flex; align-items:center; gap:14px; } .totw-icon { font-size:24px; flex-shrink:0; } .totw-pair { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--accent); line-height:1; } .totw-meta { font-size:11px; color:var(--white-3); margin-top:2px; } .totw-rr { font-size:13px; color:#4ade80; font-weight:600; margin-top:5px; } /* ── Consecutive Loss Banner ────────────────────────────────────── */ .consec-banner { background:rgba(248,113,113,0.07); border:0.5px solid rgba(248,113,113,0.22); border-radius:var(--radius-10); padding:11px 14px; margin-bottom:10px; display:flex; align-items:center; gap:10px; } .consec-banner-text { font-size:12px; color:var(--white-65); line-height:1.5; flex:1; } .consec-banner-close { background:none; border:none; color:var(--white-2); cursor:pointer; font-size:16px; flex-shrink:0; } .consec-banner-close:hover { color:#f87171; } /* ── Best Hours Heatmap ─────────────────────────────────────────── */ .heatmap-wrap { margin-top:10px; } .hm-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; } .hm-cell { border-radius:var(--radius-7); text-align:center; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .hm-hr { font-size:11px; color:var(--white-55); display:block; } .hm-wr { font-size:13px; font-weight:700; display:block; } /* ── Pair Performance ───────────────────────────────────────────── */ .pp-list { display:flex; flex-direction:column; gap:7px; margin-top:10px; } .pp-row { display:flex; align-items:center; gap:10px; } .pp-name { font-size:11px; color:var(--white-5); width:70px; flex-shrink:0; font-weight:500; } .pp-track { flex:1; height:6px; background:var(--white-05); border-radius:var(--radius-3); overflow:hidden; } .pp-fill { height:6px; border-radius:var(--radius-3); } .pp-fill.pos { background:rgba(74,222,128,0.6); } .pp-fill.neg { background:rgba(248,113,113,0.5); } .pp-amount { font-size:11px; font-weight:600; width:65px; text-align:right; flex-shrink:0; } /* ── Screenshot Gallery ─────────────────────────────────────────── */ .gal-filter-bar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; } .gal-result-count { font-size:11px; color:var(--white-4); white-space:nowrap; } .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:4px; } .gallery-tile { border-radius:var(--radius-12); overflow:hidden; border:0.5px solid var(--white-1); cursor:pointer; background:var(--white-03); position:relative; transition:border-color 0.15s,transform 0.15s; display:flex; flex-direction:column; } .gallery-tile:hover { border-color:var(--white-25); transform:translateY(-2px); } .gallery-tile-img-wrap { position:relative; aspect-ratio:16/9; background:#0d0d0d; overflow:hidden; } .gallery-tile-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.2s; display:block; } .gallery-img-broken { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; font-size:11.5px; color:var(--white-4); } .gallery-lb .gallery-img-broken { width:min(78vw,900px); height:60vh; border-radius:var(--radius-8); background:#111; } .gallery-tile:hover .gallery-tile-img-wrap img { transform:scale(1.05); } .gallery-tile-grade { position:absolute; top:8px; right:8px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:var(--radius-6); letter-spacing:0.3px; } .gallery-tile-grade.grade-a { background:rgba(74,222,128,0.85); color:#062b12; } .gallery-tile-grade.grade-b { background:rgba(96,165,250,0.85); color:#04203f; } .gallery-tile-grade.grade-c { background:rgba(251,191,36,0.85); color:#3a2600; } .gallery-tile-grade.grade-d { background:rgba(248,113,113,0.85); color:#3a0a0a; } .gallery-tile-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; } .gallery-tile-pnl-row { display:flex; align-items:center; gap:8px; } .gallery-tile-pnl { font-size:18px; font-weight:800; font-family:'Bebas Neue',sans-serif; letter-spacing:0.3px; } .gallery-tile-dir { font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--radius-5); letter-spacing:0.5px; text-transform:uppercase; } .gallery-tile-dir.long { background:rgba(74,222,128,0.14); color:#4ade80; } .gallery-tile-dir.short { background:rgba(248,113,113,0.14); color:#f87171; } .gallery-tile-meta2 { font-size:11.5px; color:var(--white-5); } .gallery-tile-strategy { font-size:11px; color:var(--white-7); font-weight:600; } .gallery-tile-open { margin-top:auto; background:var(--white-06); border:0.5px solid var(--white-12); border-radius:var(--radius-7); padding:7px 0; text-align:center; font-size:12px; font-weight:600; color:var(--white-75); transition:background 0.15s,border-color 0.15s,color 0.15s; } .gallery-tile:hover .gallery-tile-open { background:var(--white-1); border-color:var(--white-3); color:#fff; } /* ── Journal Notes — rich text editor ──────────────────────────────── */ .jnotes-toolbar { display:flex; align-items:center; gap:4px; margin-bottom:10px; padding:6px; background:var(--white-03); border:0.5px solid var(--white-08); border-radius:var(--radius-8); flex-wrap:wrap; } .jnotes-toolbar button { background:none; border:0.5px solid transparent; color:var(--white-55); border-radius:var(--radius-6); width:30px; height:28px; font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 0.12s,color 0.12s,border-color 0.12s; } .jnotes-toolbar button:hover { background:var(--white-06); color:#fff; } .jnotes-toolbar button.active { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.35); color:var(--accent); } .jnotes-toolbar-sep { width:1px; height:20px; background:var(--white-1); margin:0 4px; } .jnotes-toolbar select { background:var(--white-04); border:0.5px solid var(--white-1); border-radius:var(--radius-6); padding:5px 8px; color:var(--white-65); font-size:12px; font-family:inherit; cursor:pointer; } .jnotes-toolbar input[type=color] { width:28px; height:28px; border:0.5px solid var(--white-1); border-radius:var(--radius-6); background:none; cursor:pointer; padding:2px; } .jnotes-editable { min-height:240px; background:var(--white-02); border:0.5px solid var(--white-1); border-radius:var(--radius-10); padding:16px 18px; font-size:14px; line-height:1.7; color:var(--white-85); outline:none; overflow-y:auto; } .jnotes-editable:focus { border-color:rgba(var(--accent-rgb),0.3); } .jnotes-editable:empty:before { content:attr(data-placeholder); color:var(--white-3); } .jnotes-enter-btn { margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .jnotes-color-picker { display:flex; align-items:center; gap:9px; margin-left:auto; } .jnotes-color-lbl { font-size:11px; color:var(--white-75); text-transform:uppercase; letter-spacing:0.6px; } .jnotes-swatch { width:20px; height:20px; border-radius:var(--radius-50-pct); border:2px solid transparent; background:var(--sw); cursor:pointer; padding:0; box-shadow:inset 0 0 0 1px var(--black-3); transition:transform 0.15s, border-color 0.15s; } .jnotes-swatch:hover { transform:scale(1.15); } .jnotes-swatch.active { border-color:#fff; transform:scale(1.15); } .jnotes-sticky-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-top:1.75rem; } .jnotes-sticky { background:var(--white-035); border:0.5px solid var(--white-1); border-radius:var(--radius-10); padding:18px 16px 14px; position:relative; box-shadow:0 8px 20px var(--black-35); transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .jnotes-sticky:nth-child(odd) { transform:rotate(-1.4deg); } .jnotes-sticky:nth-child(even) { transform:rotate(1.1deg); } .jnotes-sticky:hover { transform:rotate(0deg) translateY(-4px); box-shadow:0 16px 30px var(--black-5); border-color:rgba(var(--accent-rgb),0.3); } .jnotes-sticky::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:var(--radius-50-pct); background:var(--jn-pin, var(--accent)); box-shadow:0 2px 5px var(--black-45); } .jnotes-sticky-del { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--white-22); cursor:pointer; font-size:13px; line-height:1; padding:3px 6px; border-radius:var(--radius-5); transition:color 0.15s,background 0.15s; } .jnotes-sticky-del:hover { color:#f87171; background:rgba(248,113,113,0.12); } .jnotes-sticky-body { font-size:13px; color:var(--white-85); line-height:1.65; max-height:200px; overflow-y:auto; word-break:break-word; padding-right:14px; } .jnotes-sticky-time { font-size:10px; color:var(--white-75); margin-top:12px; text-transform:uppercase; letter-spacing:0.6px; } .jnotes-sticky-empty { text-align:center; padding:2.5rem 1rem; color:var(--white-3); font-size:13px; grid-column:1/-1; } .jnotes-editable h2 { font-size:19px; font-weight:700; color:#fff; margin:0 0 0.4em; } .jnotes-editable ul { padding-left:1.4em; margin:0.4em 0; } .jnotes-editable b, .jnotes-editable strong { color:#fff; } .gallery-lb { position:fixed; inset:0; background:var(--black-93); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; gap:20px; cursor:default; flex-wrap:wrap; } .gallery-lb img { max-width:min(78vw,900px); max-height:88vh; border-radius:var(--radius-8); box-shadow:0 0 60px var(--black-8); cursor:pointer; } .gallery-lb-close { position:absolute; top:12px; right:16px; font-size:26px; color:var(--white-4); cursor:pointer; background:none; border:none; font-family:inherit; padding:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; } .gallery-lb-close:hover { color:#fff; } .gallery-lb-panel { background:#111; border:0.5px solid var(--white-12); border-radius:var(--radius-14); padding:20px; width:280px; max-height:88vh; overflow-y:auto; } .gallery-lb-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:0.5px solid var(--white-06); font-size:12.5px; } .gallery-lb-row:last-child { border-bottom:none; } .gallery-lb-row span:first-child { color:var(--white-45); } .gallery-lb-row span:last-child { color:#fff; font-weight:600; text-align:right; } /* ── Checklist Panel ────────────────────────────────────────────── */ .cl-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--white-02); border:0.5px solid var(--white-06); border-radius:var(--radius-8); cursor:pointer; transition:background 0.12s,color 0.12s,border-color 0.12s,opacity 0.12s; margin-bottom:4px; } .cl-item:hover { background:var(--white-04); } .cl-item.done .cl-text { text-decoration:line-through; color:var(--white-4); } .cl-box { width:16px; height:16px; border-radius:var(--radius-4); border:1.5px solid var(--white-18); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; transition:background 0.12s,color 0.12s,border-color 0.12s,opacity 0.12s; } .cl-item.done .cl-box { background:#4ade80; border-color:#4ade80; color:#000; } .cl-text { font-size:12px; color:var(--white-65); line-height:1.35; flex:1; } .cl-cat { font-size:9px; color:var(--white-75); text-transform:uppercase; letter-spacing:1px; flex-shrink:0; white-space:nowrap; } .cl-reset-btn { background:none; border:0.5px solid var(--white-1); color:var(--white-3); border-radius:var(--radius-7); padding:5px 12px; font-size:11px; cursor:pointer; font-family:inherit; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; } .cl-reset-btn:hover { border-color:var(--white-25); color:#fff; } .cl-progress { font-size:12px; color:var(--white-4); } /* ── My Rules Panel ─────────────────────────────────────────────── */ .rule-item { display:flex; align-items:center; gap:14px; padding:13px 15px; background:var(--white-035); border:0.5px solid var(--white-08); border-left:3px solid var(--accent); border-radius:var(--radius-9); margin-bottom:8px; transition:background 0.15s; } .rule-item:hover { background:var(--white-05); } .rule-num { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--accent); width:24px; flex-shrink:0; line-height:1.2; } .rule-text { font-size:14px; color:var(--white-92); line-height:1.5; flex:1; font-weight:500; } .rule-del { background:none; border:none; color:var(--white-15); cursor:pointer; font-size:15px; padding:0 2px; align-self:center; transition:color 0.15s; } .rule-del:hover { color:#f87171; } /* ── Watchlist Panel ────────────────────────────────────────────── */ .wl-item { display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--white-02); border:0.5px solid var(--white-06); border-radius:var(--radius-9); margin-bottom:6px; } .wl-pair { font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:1px; width:72px; flex-shrink:0; } .wl-bias-tag { font-size:10px; font-weight:600; padding:2px 8px; border-radius:var(--radius-10); flex-shrink:0; } .wl-bias-tag.bull { background:rgba(74,222,128,0.1); color:#4ade80; border:0.5px solid rgba(74,222,128,0.2); } .wl-bias-tag.bear { background:rgba(248,113,113,0.1); color:#f87171; border:0.5px solid rgba(248,113,113,0.2); } .wl-bias-tag.neut { background:var(--white-05); color:var(--white-4); border:0.5px solid var(--white-1); } .wl-note { font-size:11px; color:var(--white-3); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wl-del { background:none; border:none; color:var(--white-1); cursor:pointer; font-size:14px; flex-shrink:0; } .wl-del:hover { color:#f87171; } /* ── Break-even Calculator ──────────────────────────────────────── */ .be-result { background:rgba(var(--accent-rgb),0.04); border:0.5px solid rgba(var(--accent-rgb),0.14); border-radius:var(--radius-12); padding:18px; margin-top:1rem; } .be-big-num { font-family:'Bebas Neue',sans-serif; font-size:52px; color:var(--accent); line-height:1; } .be-big-lbl { font-size:12px; color:var(--white-4); margin-top:4px; } .be-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .be-cell { background:var(--white-02); border:0.5px solid var(--white-06); border-radius:var(--radius-9); padding:11px 13px; } .be-cell-num { font-family:'Bebas Neue',sans-serif; font-size:24px; } .be-cell-lbl { font-size:10px; color:var(--white-75); text-transform:uppercase; letter-spacing:1px; margin-top:2px; } /* ── Copy template button in trade log ─────────────────────────── */ .tl-tmpl-btn { background:none; border:0.5px solid var(--white-08); color:var(--white-45); border-radius:var(--radius-6); padding:3px 9px; font-size:10px; cursor:pointer; font-family:inherit; transition:background 0.12s,color 0.12s,border-color 0.12s,opacity 0.12s; white-space:nowrap; } .tl-tmpl-btn:hover { border-color:rgba(var(--accent-rgb),0.3); color:var(--accent); } /* ── Strategy tag select (journal form) ─────────────────────────── */ .strategy-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-10); font-size:10px; font-weight:600; background:rgba(96,165,250,0.1); color:#60a5fa; border:0.5px solid rgba(96,165,250,0.2); } /* ── Achievements / Badges ────────────────────────────────────────────────── */ .badges-grid { display:flex; gap:8px; flex-wrap:wrap; } .badge-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 12px; border-radius:var(--radius-10); background:var(--white-02); border:0.5px solid var(--white-06); min-width:58px; cursor:default; transition:background 0.15s,color 0.15s,border-color 0.15s,opacity 0.15s; } .badge-item.earned { background:rgba(var(--accent-rgb),0.05); border-color:rgba(var(--accent-rgb),0.2); } .badge-item.earned:hover { background:rgba(var(--accent-rgb),0.09); } .badge-icon { font-size:20px; filter:grayscale(1) opacity(0.18); transition:filter 0.3s; } .badge-item.earned .badge-icon { filter:none; } .badge-name { font-size:9px; color:var(--white-75); text-align:center; line-height:1.3; text-transform:uppercase; letter-spacing:0.5px; } .badge-item.earned .badge-name { color:rgba(var(--accent-rgb),0.65); } /* ── Equity Curve ─────────────────────────────────────────────────────────── */ .equity-stats-row { display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; } .equity-stat { font-size:11px; color:var(--white-3); } .equity-stat b { color:#fff; font-weight:600; } /* ── Monthly Report Card ──────────────────────────────────────────────────── */ .grade-wrap { display:flex; align-items:center; gap:16px; } .grade-circle { width:64px; height:64px; border-radius:var(--radius-50-pct); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:34px; flex-shrink:0; } .grade-A { background:rgba(74,222,128,0.1); border:2px solid rgba(74,222,128,0.35); color:#4ade80; } .grade-B { background:rgba(96,165,250,0.1); border:2px solid rgba(96,165,250,0.35); color:#60a5fa; } .grade-C { background:rgba(var(--accent-rgb),0.09); border:2px solid rgba(var(--accent-rgb),0.3); color:var(--accent); } .grade-D { background:rgba(245,158,11,0.09); border:2px solid rgba(245,158,11,0.28); color:#f59e0b; } .grade-F { background:rgba(248,113,113,0.09); border:2px solid rgba(248,113,113,0.22); color:#f87171; } .rc-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:7px; margin-top:12px; } .rc-stat { background:var(--white-02); border:0.5px solid var(--white-05); border-radius:var(--radius-8); padding:9px 11px; } .rc-stat-num { font-size:16px; font-weight:700; color:#fff; } .rc-stat-lbl { font-size:10px; color:var(--white-75); text-transform:uppercase; letter-spacing:0.8px; margin-top:2px; } /* ── Journal Analytics — equity/distribution/evaluation ─────────────────────── */ .analytics-chart-card { background:var(--white-03); border:0.5px solid var(--white-06); border-radius:var(--radius-10); padding:14px 16px; } .analytics-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .analytics-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .ac-subtitle { font-size:12px; font-weight:700; color:var(--white-9); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.6px; } .ac-bignum { font-size:19px; font-weight:800; letter-spacing:-0.3px; } .ac-sublabel { font-size:10.5px; color:var(--white-75); margin-top:3px; text-transform:uppercase; letter-spacing:0.4px; } .ac-splitbar { height:9px; border-radius:var(--radius-5); background:var(--white-06); margin-top:14px; overflow:hidden; display:flex; } .eval-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:0.5px solid var(--white-05); } .eval-row:last-child { border-bottom:none; } .eval-label { width:96px; flex-shrink:0; font-size:12px; color:var(--white-6); font-weight:500; } .eval-bar-wrap { flex:1; height:8px; background:var(--white-05); border-radius:var(--radius-4); position:relative; } .eval-bar { position:absolute; top:0; height:8px; border-radius:var(--radius-4); } .eval-score { width:44px; flex-shrink:0; text-align:right; font-size:13px; font-weight:700; } @media (max-width:640px) { .analytics-2col, .analytics-3col { grid-template-columns:1fr; } } /* ── Journal Overview ────────────────────────────────────────────────────────── */ .ov-stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:1rem; } @media (max-width:900px) { .ov-stats-row { grid-template-columns:repeat(2,1fr); } } .ov-stat-card { background:var(--white-04); border:0.5px solid var(--white-08); border-radius:var(--radius-12); padding:1rem 1.1rem; box-shadow:0 4px 24px var(--black-25),inset 0 1px 0 var(--white-05); transition:border-color 0.2s,transform 0.2s; display:flex; align-items:center; justify-content:space-between; gap:10px; } .ov-stat-card:hover { border-color:var(--white-14); transform:translateY(-2px); } .ov-stat-num { font-family:'Bebas Neue',sans-serif; font-size:22px; color:#fff; line-height:1; } .ov-stat-lbl { font-size:10px; color:var(--white-75); letter-spacing:0.8px; text-transform:uppercase; margin-top:4px; } .ov-stat-accent { flex-shrink:0; width:36px; height:36px; } .ov-adherence-bar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--white-03); border:0.5px solid var(--white-07); border-radius:var(--radius-10); padding:10px 16px; margin-bottom:1.25rem; font-size:12px; color:var(--white-65); } .ov-adherence-bar b { color:#fff; } .ov-edge-num { font-family:'Bebas Neue',sans-serif; font-size:30px; text-align:center; margin-top:6px; } .ov-edge-gradient { height:6px; border-radius:var(--radius-3); margin-top:8px; background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80); position:relative; } .ov-edge-gradient-dot { position:absolute; top:-3px; width:12px; height:12px; border-radius:var(--radius-50-pct); background:#fff; border:2px solid #0d0d0d; transform:translateX(-50%); } .ov-recent-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:0.5px solid var(--white-05); font-size:12px; } .ov-recent-row:last-child { border-bottom:none; } .ov-recent-pair { color:var(--white-8); font-weight:500; } .ov-recent-date { color:var(--white-35); font-size:11px; margin-left:8px; } .ov-mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .ov-mini-cal-day { aspect-ratio:1; border-radius:var(--radius-4); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--white-4); } /* ── Day of Week Chart ────────────────────────────────────────────────────── */ .dow-chart { display:flex; align-items:flex-end; gap:6px; height:80px; margin-top:8px; padding-bottom:20px; position:relative; } .dow-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; height:100%; } .dow-bar { width:100%; border-radius:3px 3px 0 0; min-height:3px; transition:height 0.4s; } .dow-bar.pos { background:rgba(74,222,128,0.55); } .dow-bar.neg { background:rgba(248,113,113,0.5); border-radius:0 0 3px 3px; } .dow-bar.zero { background:var(--white-07); } .dow-lbl { font-size:9px; color:var(--white-75); position:absolute; bottom:-18px; text-transform:uppercase; } .dow-wr { font-size:8px; font-weight:700; position:absolute; top:-13px; } /* ── Quick-Log FAB ────────────────────────────────────────────────────────── */ .fab-btn { position:fixed; bottom:24px; right:24px; width:50px; height:50px; border-radius:var(--radius-50-pct); background:var(--accent); border:none; cursor:pointer; font-size:24px; color:#000; z-index:8888; box-shadow:0 4px 20px rgba(var(--accent-rgb),0.35); display:flex; align-items:center; justify-content:center; transition:transform 0.15s, opacity 0.15s, box-shadow 0.15s; line-height:1; font-family:inherit; will-change:transform; } @media(max-width:768px) { .fab-btn { bottom:calc(env(safe-area-inset-bottom,0px) + 74px); right:16px; width:44px; height:44px; font-size:20px; } } .fab-btn:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(var(--accent-rgb),0.5); } .fab-modal-wrap { position:fixed; inset:0; background:var(--black-72); z-index:9000; display:none; align-items:flex-end; justify-content:center; padding:0 0 6px; } .fab-modal-wrap.open { display:flex; } .fab-sheet { background:#111; border:0.5px solid var(--white-1); border-radius:18px 18px 12px 12px; padding:1.5rem; width:100%; max-width:480px; animation:fabUp 0.22s ease; } @keyframes fabUp { from { transform:translateY(40px); opacity:0; } to { transform:translateY(0); opacity:1; } } .fab-sheet-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; margin-bottom:1.25rem; display:flex; align-items:center; justify-content:space-between; } .fab-close { background:none; border:none; color:var(--white-3); font-size:20px; cursor:pointer; font-family:inherit; } .fab-close:hover { color:#fff; } /* ── Trade Search / Filter ───────────────────────────────────────────────── */ .tl-filter-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center; } .tl-search { flex:1; min-width:130px; background:var(--white-04); border:0.5px solid var(--white-1); border-radius:var(--radius-8); padding:8px 12px; color:#fff; font-size:13px; font-family:inherit; outline:none; } .tl-search::placeholder { color:var(--white-2); } .tl-search:focus { border-color:rgba(var(--accent-rgb),0.35); box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.08); } .tl-filter-sel { background:var(--white-04); border:0.5px solid var(--white-1); border-radius:var(--radius-8); padding:8px 10px; color:var(--white-65); font-size:12px; font-family:inherit; outline:none; cursor:pointer; } .tl-filter-sel option { background:#111; } .tl-result-count { font-size:11px; color:var(--white-3); white-space:nowrap; } /* Custom dropdown — replaces native