/* EdgeFinder v5.5 - Complete Design System */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ===== CSS Block 0 ===== */ :root { --ef4-bg: #0b0f18; --ef4-bg-elevated: #0b0f18; --ef4-surface: rgba(255,255,255,0.03); --ef4-surface-solid: #131c31; --ef4-surface-hover: rgba(255,255,255,0.06); --ef4-border: rgba(255,255,255,0.06); --ef4-border-hover: rgba(255,255,255,0.12); --ef4-green: #AEF31F; --ef4-green-dim: rgba(174,243,31,0.15); /* ═══════════════════════════════════════════ SMART REFRESH v9.1 — Optimistic UI ═══════════════════════════════════════════ */ @keyframes ef4OptimisticPulse { 0% { opacity: 0.7; border-color: var(--ef4-green); } 50% { opacity: 0.95; border-color: var(--ef4-green); box-shadow: 0 0 12px var(--ef4-green-dim); } 100% { opacity: 0.7; border-color: var(--ef4-green); } } @keyframes ef4ConfirmFlash { 0% { box-shadow: 0 0 0 var(--ef4-green); } 50% { box-shadow: 0 0 20px var(--ef4-green); } 100% { box-shadow: none; } } .ef4-optimistic { animation: ef4OptimisticPulse 1.2s ease-in-out infinite; border: 1px dashed var(--ef4-green) !important; position: relative; } .ef4-optimistic::after { content: 'Saving...'; position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 600; color: var(--ef4-green); background: rgba(10,15,25,0.8); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; } .ef4-confirm-flash { animation: ef4ConfirmFlash 0.6s ease-out; } --ef4-green-dark: #8BC925; --ef4-green-mid: #C5F54A; --ef4-pl-green: #10b981; --ef4-pl-green-dim: rgba(16,185,129,0.15); --ef4-red: #dd2942; --ef4-red-dim: rgba(221,41,66,0.15); --ef4-red-dark: #a01d32; --ef4-red-mid: #c43a4a; --ef4-amber: #f59e0b; --ef4-amber-dim: rgba(245,158,11,0.15); --ef4-blue: #0181fb; --ef4-blue-dim: rgba(1,129,251,0.15); --ef4-yellow: #f5a623; --ef4-yellow-dim: rgba(245,166,35,0.15); --ef4-purple: #8b5cf6; --ef4-purple-dim: rgba(139,92,246,0.15); --ef4-cyan: #06b6d4; --ef4-cyan-dim: rgba(6,182,212,0.15); --ef4-gold: #d4a843; --ef4-gold-dim: rgba(212,168,67,0.15); --ef4-text-primary: #f8fafc; --ef4-text-secondary: rgba(255,255,255,0.60); --ef4-text-muted: rgba(255,255,255,0.40); --ef4-radius: 12px; --ef4-radius-sm: 8px; --ef4-radius-lg: 16px; --ef4-transition: all 0.2s ease; --ef4-accent: var(--ef4-green); --ef4-card-bg: var(--ef4-surface); --ef4-bg-tertiary: rgba(255,255,255,0.02); } /* ===== GRID SPACING FIX ===== */ /* Grid spacing fix - ensure cards don't stick together */ .ef4-kpi-grid { margin-bottom: 24px; gap: 24px; } .ef4-grid-2, .ef4-grid-3, .ef4-grid-4 { display: grid; gap: 24px; margin-bottom: 24px; } .ef4-grid-2 { grid-template-columns: repeat(2, 1fr); } .ef4-grid-3 { grid-template-columns: repeat(3, 1fr); } .ef4-grid-4 { grid-template-columns: repeat(4, 1fr); } .ef4-grid { display: grid; gap: 24px; margin-bottom: 24px; } .ef4-dashboard-grid { display: grid; gap: 24px; margin-bottom: 24px; } .ef4-freq-grid { display: grid; gap: 24px; margin-bottom: 24px; } .ef4-checklist-grid { display: grid; gap: 24px; margin-bottom: 24px; } .sessions-grid { display: grid; gap: 24px; margin-bottom: 24px; } .strategies-grid { display: grid; gap: 24px; margin-bottom: 24px; } .ef4-card { margin-bottom: 0; } /* ═══════════════════════════════════════════ CATEGORIES MODAL STYLES ═══════════════════════════════════════════ */ .cat-modal-list{max-height:300px;overflow-y:auto;margin-bottom:16px;} .cat-modal-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.03);margin-bottom:6px;transition:background 0.2s;} .cat-modal-row:hover{background:rgba(255,255,255,0.06);} .cat-modal-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 4px rgba(0,0,0,0.3);} .cat-modal-name{flex:1;font-size:13px;color:var(--ef4-text-primary);font-weight:500;} .cat-modal-count{font-size:11px;color:var(--ef4-text-muted);white-space:nowrap;} .cat-modal-del{opacity:0;transition:opacity 0.2s;} .cat-modal-row:hover .cat-modal-del{opacity:1;} .cat-modal-add{border-top:1px solid var(--ef4-border);padding-top:12px;} .cat-modal-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} .cat-modal-swatch-btn{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;} .cat-modal-swatch-btn:hover{transform:scale(1.15);} .cat-modal-swatch-btn.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ef4-green);} /* ═══════════════════════════════════════════ COLOR SWATCH PICKER ═══════════════════════════════════════════ */ .ef4-color-swatch{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:8px 0;} .ef4-color-swatch-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all 0.2s;justify-self:center;} .ef4-color-swatch-btn:hover{transform:scale(1.15);} .ef4-color-swatch-btn.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ef4-green);transform:scale(1.1);} /* ═══════════════════════════════════════════ RULE EDITOR (v2 single-line) ═══════════════════════════════════════════ */ .ef4-rule-line{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.03);margin-bottom:6px;transition:background 0.2s;} .ef4-rule-line:hover{background:rgba(255,255,255,0.06);} .ef4-rule-line .ef4-rule-drag{color:var(--ef4-text-muted);cursor:grab;font-size:14px;} .ef4-rule-line .ef4-rule-check{flex-shrink:0;} .ef4-rule-line .ef4-rule-text{flex:1;font-size:12px;color:var(--ef4-text-primary);background:transparent;border:none;padding:2px 0;outline:none;border-bottom:1px solid transparent;transition:border-color 0.2s;} .ef4-rule-line .ef4-rule-text:focus{border-bottom-color:var(--ef4-green);} .ef4-rule-line .ef4-rule-del{opacity:0;transition:opacity 0.2s;flex-shrink:0;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;} .ef4-rule-line:hover .ef4-rule-del{opacity:1;} .ef4-rule-add-row{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--ef4-border);} .ef4-rule-add-row .ef4-input{flex:1;font-size:13px;} .ef4-rule-empty{padding:20px;text-align:center;color:var(--ef4-text-muted);font-size:13px;} /* ═══════════════════════════════════════════ RESPONSIVE KPI GRID FOR STRATEGIES PAGE ═══════════════════════════════════════════ */ @media (max-width: 1200px) { .ef4-kpi-grid[style*="6,1fr"] { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .ef4-kpi-grid[style*="6,1fr"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .ef4-kpi-grid[style*="6,1fr"] { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════ WIZARD STRATEGY SELECTION CARDS (v2) ═══════════════════════════════════════════ */ .ef4-wizard-strat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px;} @media(max-width:768px){.ef4-wizard-strat-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.ef4-wizard-strat-grid{grid-template-columns:1fr;}} .ef4-wizard-strat-card{border:2px solid rgba(255,255,255,0.06);border-radius:14px;background:var(--ef4-surface);cursor:pointer;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);overflow:hidden;display:flex;flex-direction:column;position:relative;} .ef4-wizard-strat-card:hover{border-color:#AEF31F;box-shadow:0 0 20px rgba(174,243,31,0.15),0 4px 16px rgba(0,0,0,0.2);transform:translateY(-4px);} .ef4-wizard-strat-card.active{border-color:#AEF31F;background:rgba(174,243,31,0.06);box-shadow:0 0 24px rgba(174,243,31,0.2);} .ef4-wizard-strat-inner{padding:16px;display:flex;flex-direction:column;flex:1;min-height:100px;} .ef4-wizard-strat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;} .ef4-wizard-strat-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,0.04);color:var(--ef4-text-muted);border:1px solid rgba(255,255,255,0.06);} .ef4-wizard-strat-check{width:22px;height:22px;border-radius:50%;background:#AEF31F;color:#0b0f18;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;opacity:0;transform:scale(0.6);transition:all 0.25s cubic-bezier(0.16,1,0.3,1);} .ef4-wizard-strat-card.active .ef4-wizard-strat-check{opacity:1;transform:scale(1);} .ef4-wizard-strat-name{font-size:15px;font-weight:700;color:var(--ef4-text-primary);margin-bottom:8px;white-space:normal;word-break:break-word;line-height:1.3;} .ef4-wizard-strat-stats{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ef4-text-muted);margin-bottom:8px;flex-wrap:wrap;} .ef4-wizard-strat-stats b{color:var(--ef4-text-secondary);font-weight:600;} .ef4-wizard-stat-dot{opacity:0.4;} .ef4-wizard-strat-setups{font-size:11px;color:var(--ef4-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0.7;} .ef4-wizard-strat-rules{display:none;border-top:1px solid rgba(255,255,255,0.06);} .ef4-wizard-strat-anchor{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) scaleX(0);width:40px;height:3px;background:#AEF31F;border-radius:2px;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);} .ef4-wizard-strat-card.active .ef4-wizard-strat-anchor{transform:translateX(-50%) scaleX(1);} .ef4-wizard-empty-state{padding:40px 24px;text-align:center;background:var(--ef4-surface);border-radius:16px;border:2px dashed rgba(255,255,255,0.06);color:var(--ef4-text-muted);} .ef4-wizard-empty-title{font-size:16px;font-weight:700;color:var(--ef4-text-primary);margin:12px 0 4px;} .ef4-wizard-empty-sub{font-size:13px;color:var(--ef4-text-muted);margin-bottom:8px;} /* ═══════════════════════════════════════════ WIZARD RULES CHECKLIST (v2) ═══════════════════════════════════════════ */ .ef4-wizard-rule-cat{margin-bottom:12px;} .ef4-wizard-rule-cat-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--ef4-text-muted);margin-bottom:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.06);} .ef4-wizard-rule-row{padding:10px 12px;border-radius:8px;margin-bottom:4px;background:rgba(255,255,255,0.015);transition:background 0.15s;} .ef4-wizard-rule-row:hover{background:rgba(255,255,255,0.04);} .ef4-wizard-rule-header{display:flex;align-items:center;} .ef4-wizard-rule-label{font-size:13px;color:var(--ef4-text-secondary);cursor:pointer;} .ef4-wizard-rule-check{width:18px;height:18px;accent-color:#AEF31F;cursor:pointer;flex-shrink:0;} .ef4-wizard-rule-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(90deg,#dd2942,#f59e0b,#AEF31F);} .ef4-wizard-rule-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid #AEF31F;box-shadow:0 2px 6px rgba(0,0,0,0.3);} .ef4-wizard-rule-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:2px solid #AEF31F;box-shadow:0 2px 6px rgba(0,0,0,0.3);} .ef4-wizard-slider-val{font-size:12px;color:#AEF31F;font-weight:600;margin-left:8px;min-width:30px;display:inline-block;text-align:right;} .ef4-wizard-rule-number,.ef4-wizard-rule-text{font-size:13px;padding:8px 12px;} .ef4-wizard-compliance-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-top:4px;} .ef4-wizard-compliance-fill{height:100%;background:linear-gradient(90deg,#dd2942,#f59e0b,#AEF31F);border-radius:3px;transition:width 0.4s ease;width:0%;} .ef4-wizard-compliance-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;transition:all 0.3s;} /* ── Inline ComplianceMeter (renderComplianceMeter) ── */ .ef4-wizard-compliance-meter{margin-top:12px;padding:10px 12px;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.04);} /* Utility classes for spacing */ .ef4-grid-gap { gap: 20px !important; } .ef4-mb-20 { margin-bottom: 20px !important; } .ef4-glass { background: var(--ef4-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ef4-border); box-shadow: var(--ef4-shadow); } @keyframes ef4-fade-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes ef4-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } } @keyframes ef4-line-trace { from { stroke-dashoffset:1000; } to { stroke-dashoffset:0; } } @keyframes ef4-donut-expand { from { transform:scale(0.8); opacity:0; } to { transform:scale(1); opacity:1; } } @keyframes ef4-gauge-fill { from { stroke-dashoffset:283; } to { stroke-dashoffset:0; } } @keyframes ef4-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } } /* ═══════════════════════════════════════════ ROTATING GRADIENT BORDER BUTTONS Slowly rotating 1-2px conic gradient border ═══════════════════════════════════════════ */ @keyframes ef4BorderRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ef4-btn-gradient-border { position: relative; z-index: 1; background: var(--ef4-surface-solid); border: none; overflow: hidden; border-radius: 12px; } .ef4-btn-gradient-border::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: conic-gradient(from 0deg, var(--ef4-green), var(--ef4-blue), var(--ef4-purple), var(--ef4-orange), var(--ef4-green)); border-radius: 14px; animation: ef4BorderRotate 4s linear infinite; } .ef4-btn-gradient-border::after { content: ''; position: absolute; inset: 2px; z-index: -1; background: var(--ef4-surface-solid); border-radius: 10px; } .ef4-btn-gradient-border:hover::before { animation-duration: 2s; /* Speed up on hover */ filter: brightness(1.3); } .ef4-animate { animation:ef4-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) forwards; opacity:0; } .ef4-animate-bar { animation:ef4-bar-grow 0.8s cubic-bezier(0.4,0,0.2,1) forwards; transform-origin:bottom; } #sessionDropdownMenu { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; max-height: 400px; overflow-y: auto; } #sessionDropdownMenu a:hover { background: rgba(255,255,255,0.03); } .ef4-widget-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; background: var(--ef4-surface-solid); border-left: 1px solid var(--ef4-border); z-index: 9999; padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .ef4-widget-panel.open { transform: translateX(0); } .ef4-widget-panel-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9998; backdrop-filter: blur(4px); } .ef4-widget-panel-overlay.open { display: block; } .ef4-dashboard-settings-btn { position: relative; } .ef4-wrap { background: var(--ef4-bg); min-height: 100vh; color: var(--ef4-text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } .ef4-wrap * { box-sizing: border-box; } /* Layout */ .ef4-layout { display: flex; min-height: 100vh; } .ef4-sidebar { width: 220px; min-height: 100vh; background: var(--ef4-bg-elevated); border-right: 1px solid var(--ef4-border); position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; padding: 16px 0; overflow-y: auto; } .ef4-sidebar-header { padding: 0 16px 14px; border-bottom: 1px solid var(--ef4-border); margin-bottom: 10px; } .ef4-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--ef4-text-primary); text-decoration: none; letter-spacing: -0.3px; } .ef4-logo-mark { width: 30px; height: 30px; flex-shrink: 0; } .ef4-sidebar-nav { flex: 1; padding: 0 10px; } .ef4-nav-section { margin-bottom: 18px; } .ef4-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ef4-text-muted); padding: 0 10px; margin-bottom: 6px; font-weight: 700; } .ef4-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ef4-radius-sm); color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 600; transition: var(--ef4-transition); cursor: pointer; border: none; background: none; width: 100%; text-align: left; position: relative; } .ef4-nav-link:hover { background: rgba(255,255,255,0.08); color: #ffffff; } .ef4-nav-link.active { background: var(--ef4-green-dim); color: var(--ef4-green); } .ef4-nav-link.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--ef4-green); border-radius: 0 3px 3px 0; } .ef4-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; } .ef4-nav-link:hover .ef4-nav-icon, .ef4-nav-link.active .ef4-nav-icon { opacity: 1; } .ef4-sidebar-footer { padding: 12px 14px 0; border-top: 1px solid var(--ef4-border); margin-top: auto; } .ef4-user-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--ef4-radius-sm); background: rgba(255,255,255,0.02); } .ef4-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--ef4-green-mid), var(--ef4-blue)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .ef4-user-name { font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-user-role { font-size: 11px; color: var(--ef4-text-muted); } .ef4-main { flex: 1; margin-left: 220px; padding: 0 20px 20px; min-height: 100vh; width: 100%; box-sizing: border-box; } .ef4-container { max-width: none; margin: 0 auto; width: 100%; box-sizing: border-box; } .ef4-mobile-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 150; width: 40px; height: 40px; background: var(--ef4-surface-solid); border: 1px solid var(--ef4-border); border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; color: var(--ef4-text-primary); } .ef4-mobile-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; } /* ===== SIDEBAR LIGHT MODE ===== */ body.ef4-light-mode .ef4-sidebar { background: #1a4d2e !important; border-right-color: rgba(255,255,255,0.08) !important; } body.ef4-light-mode .ef4-sidebar .ef4-nav-link, body.ef4-light-mode .ef4-sidebar .ef4-logo-text, body.ef4-light-mode .ef4-sidebar .ef4-nav-section-title { color: #ffffff !important; } body.ef4-light-mode .ef4-sidebar .ef4-nav-link:hover { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; } body.ef4-light-mode .ef4-sidebar .ef4-nav-link.active { background: rgba(174, 243, 31, 0.15) !important; color: #AEF31F !important; } body.ef4-light-mode .ef4-sidebar .ef4-nav-icon { color: rgba(255,255,255,0.7) !important; } body.ef4-light-mode .ef4-sidebar .ef4-user-name { color: #ffffff !important; } body.ef4-light-mode .ef4-sidebar .ef4-user-role { color: rgba(255,255,255,0.6) !important; } body.ef4-light-mode .ef4-sidebar-footer { border-top-color: rgba(255,255,255,0.08) !important; } body.ef4-light-mode .ef4-sidebar-header { border-bottom-color: rgba(255,255,255,0.08) !important; } /* Page Header */ .ef4-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .ef4-page-title-group { flex: 1; } .ef4-h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; color: var(--ef4-text-primary); } .ef4-page-subtitle { font-size: 13px; color: var(--ef4-text-muted); margin: 4px 0 0; } .ef4-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ef4-h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--ef4-text-primary); } .ef4-h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--ef4-text-primary); } /* Cards */ .ef4-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 20px; transition: var(--ef4-transition); animation: ef4-fade-in 0.4s ease forwards; overflow: visible; } .ef4-card:hover { border-color: var(--ef4-border-hover); background: var(--ef4-surface-hover); } .ef4-card canvas, .ef4-card svg { max-width: 100% !important; max-height: 240px !important; } .ef4-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ef4-card-title { font-size: 15px; font-weight: 600; color: var(--ef4-text-primary); margin: 0; } .ef4-card-subtitle { font-size: 12px; color: var(--ef4-text-muted); margin: 2px 0 0; } /* Layout Customize Mode */ .ef4-layout-mode .ef4-card { position: relative; transition: all 0.2s ease; } .ef4-layout-mode .ef4-card:hover { outline: 2px solid var(--ef4-green) !important; outline-offset: 3px; box-shadow: 0 0 20px rgba(174,243,31,0.15); } .ef4-card-resize { display: none; position: absolute; bottom: 6px; right: 6px; width: 22px; height: 22px; background: var(--ef4-green); border-radius: 6px; align-items: center; justify-content: center; color: #0a0f1a; cursor: nwse-resize; z-index: 5; box-shadow: 0 2px 8px rgba(174,243,31,0.3); } .ef4-card-resize:hover { transform: scale(1.15); } /* Staggered chart card entry animations */ .ef4-chart-card { animation: ef4-chart-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; transform: translateY(16px) scale(0.98); } @keyframes ef4-chart-enter { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .ef4-chart-card:nth-child(1) { animation-delay: 0.05s; } .ef4-chart-card:nth-child(2) { animation-delay: 0.12s; } .ef4-chart-card:nth-child(3) { animation-delay: 0.19s; } .ef4-chart-card:nth-child(4) { animation-delay: 0.26s; } .ef4-chart-card:nth-child(5) { animation-delay: 0.33s; } .ef4-chart-card:nth-child(6) { animation-delay: 0.40s; } .ef4-chart-card:nth-child(7) { animation-delay: 0.47s; } .ef4-chart-card:nth-child(8) { animation-delay: 0.54s; } .ef4-chart-card:nth-child(9) { animation-delay: 0.61s; } .ef4-chart-card:nth-child(10) { animation-delay: 0.68s; } .ef4-chart-card:nth-child(11) { animation-delay: 0.75s; } .ef4-chart-card:nth-child(12) { animation-delay: 0.82s; } /* KPI Grid */ .ef4-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; } .ef4-kpi-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-top: 2px solid var(--kpi-color, var(--ef4-lime)); border-bottom: 2px solid var(--kpi-color, var(--ef4-lime)); border-radius: var(--ef4-radius); padding: 16px; transition: var(--ef4-transition); position: relative; overflow: visible; } .ef4-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ef4-green), var(--ef4-blue)); opacity: 0.5; } .ef4-kpi-card:hover { border-color: var(--ef4-border-hover); transform: translateY(-1px); } .ef4-kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ef4-kpi-label { font-size: 11px; font-weight: 600; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-kpi-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ef4-kpi-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .ef4-kpi-icon.green { background: var(--ef4-green-dim); color: var(--ef4-green); } .ef4-kpi-icon.red { background: var(--ef4-red-dim); color: var(--ef4-red); } .ef4-kpi-icon.blue { background: var(--ef4-blue-dim); color: var(--ef4-blue); } .ef4-kpi-icon.purple { background: var(--ef4-purple-dim); color: var(--ef4-purple); } .ef4-kpi-icon.yellow { background: var(--ef4-yellow-dim); color: var(--ef4-yellow); } .ef4-kpi-icon.amber { background: var(--ef4-amber-dim); color: var(--ef4-amber); } .ef4-kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--ef4-text-primary); } .ef4-kpi-change { font-size: 11px; margin-top: 4px; font-weight: 500; } .ef4-kpi-change.up { color: var(--ef4-green); } .ef4-kpi-change.down { color: var(--ef4-red); } .ef4-kpi-sparkline { width: 100%; height: 32px; margin-top: 8px; } /* Buttons */ .ef4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--ef4-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--ef4-transition); border: 1px solid transparent; text-decoration: none; white-space: nowrap; line-height: 1.4; font-family: inherit; } .ef4-btn-primary { background: linear-gradient(135deg, var(--ef4-green), var(--ef4-green-mid)); color: #0a0a0f; border-color: var(--ef4-green); } .ef4-btn-primary:hover { background: linear-gradient(135deg, #8adf84, #3aaa6f); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(118,204,111,0.3); } .ef4-btn-secondary { background: transparent; color: var(--ef4-text-primary); border-color: var(--ef4-border); } .ef4-btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: var(--ef4-border-hover); } .ef4-btn-ghost { background: transparent; color: var(--ef4-text-secondary); border-color: transparent; padding: 6px 10px; } .ef4-btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--ef4-text-primary); } .ef4-btn-danger { background: var(--ef4-red); color: #fff; border-color: var(--ef4-red); } .ef4-btn-danger:hover { background: #d43a4f; } .ef4-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; } .ef4-btn-lg { padding: 12px 24px; font-size: 14px; } .ef4-btn-icon { width: 36px; height: 36px; padding: 0; } .ef4-btn svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Action buttons — compact icon-only table row controls */ .ef4-action-btn { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--ef4-border); color: var(--ef4-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; margin: 0 2px; flex-shrink: 0; } .ef4-action-btn:hover { background: var(--ef4-green-dim); color: var(--ef4-green); border-color: var(--ef4-green); } .ef4-action-btn--danger { color: var(--ef4-red); } .ef4-action-btn--danger:hover { background: var(--ef4-red-dim); color: var(--ef4-red); border-color: var(--ef4-red); } .ef4-action-btn--edit { color: var(--ef4-blue); } .ef4-action-btn--edit:hover { background: var(--ef4-blue-dim); color: var(--ef4-blue); border-color: var(--ef4-blue); } .ef4-action-btn svg { width: 14px; height: 14px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Long / Short wizard buttons */ #wbtn_long { background: transparent; border: 2px solid var(--ef4-green); color: var(--ef4-green); } #wbtn_long:hover, #wbtn_long.active { background: var(--ef4-green); color: #0a0f1a; } #wbtn_short { background: transparent; border: 2px solid var(--ef4-red); color: var(--ef4-red); } #wbtn_short:hover, #wbtn_short.active { background: var(--ef4-red); color: #ffffff; } /* Forms */ .ef4-input, .ef4-select, .ef4-textarea { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-sm); color: var(--ef4-text-primary); font-size: 13px; transition: var(--ef4-transition); font-family: inherit; } .ef4-input:focus, .ef4-select:focus, .ef4-textarea:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(118,204,111,0.1); background: rgba(255,255,255,0.05); } .ef4-input::placeholder { color: var(--ef4-text-muted); } .ef4-label { display: block; font-size: 12px; font-weight: 600; color: var(--ef4-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; } .ef4-form-group { margin-bottom: 16px; } .ef4-textarea { min-height: 80px; resize: vertical; } .ef4-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .ef4-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ef4-text-secondary); font-size: 13px; margin-bottom: 8px; } .ef4-checkbox input { width: 16px; height: 16px; accent-color: var(--ef4-green); } .ef4-toggle { display: flex; align-items: center; gap: 10px; } .ef4-toggle-track { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.10); position: relative; cursor: pointer; transition: 0.15s; } .ef4-toggle-track.on { background: var(--ef4-green); } .ef4-toggle-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: 0.15s; } .ef4-toggle-track.on .ef4-toggle-knob { left: 18px; } /* Grid */ .ef4-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; margin-bottom: 20px !important; } .ef4-grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; margin-bottom: 20px !important; } .ef4-grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; margin-bottom: 20px !important; } .ef4-flex { display: flex; align-items: center; } .ef4-flex-between { display: flex; justify-content: space-between; align-items: center; } .ef4-flex-col { display: flex; flex-direction: column; } .ef4-gap-2 { gap: 8px; } .ef4-gap-3 { gap: 12px; } .ef4-gap-4 { gap: 16px; } /* Badges */ .ef4-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.3px; } .ef4-badge-green { background: var(--ef4-green-dim); color: var(--ef4-green); border: 1px solid var(--ef4-green); } .ef4-badge-red { background: var(--ef4-red-dim); color: var(--ef4-red); border: 1px solid var(--ef4-red); } .ef4-badge-blue { background: var(--ef4-blue-dim); color: var(--ef4-blue); border: 1px solid var(--ef4-blue); } .ef4-badge-yellow { background: var(--ef4-yellow-dim); color: var(--ef4-yellow); border: 1px solid var(--ef4-yellow); } .ef4-badge-ghost { background: rgba(255,255,255,0.04); color: var(--ef4-text-muted); border: 1px solid var(--ef4-border); } .ef4-badge-purple { background: var(--ef4-purple-dim); color: var(--ef4-purple); border: 1px solid var(--ef4-purple); } .ef4-badge-free { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); } .ef4-badge-pro { background: var(--ef4-blue-dim); color: var(--ef4-blue); border: 1px solid var(--ef4-blue); } .ef4-badge-elite { background: var(--ef4-amber-dim); color: var(--ef4-amber); border: 1px solid var(--ef4-amber); } /* Tables */ .ef4-table { width: 100%; font-size: 13px; border-collapse: collapse; } .ef4-table th { text-align: left; padding: 10px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ef4-text-muted); border-bottom: 1px solid var(--ef4-border); font-weight: 600; white-space: nowrap; } .ef4-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--ef4-text-primary); vertical-align: middle; } .ef4-table tr:hover td { background: rgba(255,255,255,0.02); } .ef4-table .actions { opacity: 0; transition: opacity 0.15s; } .ef4-table tr:hover .actions { opacity: 1; } /* Filter Bar */ .ef4-filter-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,0.02); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--ef4-radius); padding: 12px 16px; } .ef4-search-wrap { position: relative; flex: 1; max-width: 300px; } .ef4-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--ef4-text-muted); stroke-width: 2; fill: none; } .ef4-search-wrap .ef4-input { padding-left: 36px; } .ef4-active-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .ef4-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 20px; font-size: 12px; color: var(--ef4-text-secondary); } .ef4-filter-pill button { background: none; border: none; color: var(--ef4-text-muted); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; } /* Pagination */ .ef4-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; } .ef4-page-btn { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ef4-radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--ef4-transition); border: 1px solid var(--ef4-border); background: transparent; color: var(--ef4-text-secondary); padding: 0 8px; } .ef4-page-btn:hover { background: rgba(255,255,255,0.04); color: var(--ef4-text-primary); border-color: var(--ef4-border-hover); } .ef4-page-btn.active { background: var(--ef4-green); color: #0a0a0f; border-color: var(--ef4-green); font-weight: 600; } /* Charts */ .ef4-chart-container { position: relative; width: 100%; height: 260px; overflow: hidden; cursor: crosshair; } .ef4-chart-container canvas { width: 100% !important; height: 100% !important; display: block; } .ef4-chart-container:hover canvas { filter: brightness(1.05); transition: filter 0.2s; } /* Chart card hover lift with neon glow (CelupDark-inspired) */ .ef4-chart-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .ef4-chart-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .ef4-chart-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(174,243,31,0.06); } .ef4-chart-card:hover::before { opacity: 1; } .ef4-chart-tooltip { position: absolute; pointer-events: none; background: rgba(14,14,18,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 14px; font-size: 12px; opacity: 0; transition: opacity 0.15s; z-index: 10; white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.06); color: var(--ef4-text-primary); } .ef4-chart-legend { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; } .ef4-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ef4-text-secondary); } .ef4-legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* Sparkline (inline SVG) */ .ef4-sparkline { width: 80px; height: 30px; } /* Heatmap */ .ef4-heatmap-grid { display: grid; gap: 2px; } .ef4-heatmap-cell { aspect-ratio: 1; border-radius: 3px; cursor: pointer; transition: transform 0.15s; position: relative; } .ef4-heatmap-cell:hover { transform: scale(1.15); z-index: 2; } .ef4-heatmap-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--ef4-text-muted); } /* Tiltmeter / Gauge */ .ef4-gauge-wrap { position: relative; width: 160px; height: 100px; margin: 0 auto; max-width: 100%; } .ef4-gauge-canvas { width: 100%; height: 100%; max-width: 160px; max-height: 100px; } /* Donut */ .ef4-donut { position: relative; width: 120px; height: 120px; margin: 0 auto; flex-shrink: 0; overflow: visible; } .ef4-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .ef4-donut-value { font-size: 22px; font-weight: 700; color: var(--ef4-text-primary); } .ef4-donut-label { font-size: 11px; color: var(--ef4-text-muted); } /* Progress Bar */ .ef4-progress { height: 6px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; } .ef4-progress-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; } .ef4-progress-fill.green { background: linear-gradient(90deg, var(--ef4-green-dark), var(--ef4-green)); } .ef4-progress-fill.red { background: linear-gradient(90deg, var(--ef4-red), var(--ef4-red-dark)); } .ef4-progress-fill.blue { background: linear-gradient(90deg, var(--ef4-blue), #4da3ff); } .ef4-progress-fill.yellow { background: linear-gradient(90deg, var(--ef4-yellow), #ffc84d); } /* Modal */ .ef4-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .ef4-modal-overlay.active { opacity: 1; pointer-events: all; } /* Strategy modal visibility fix */ #strat-cat-modal { display: none !important; } #strat-cat-modal.active { display: flex !important; } .ef4-modal { background: var(--ef4-surface-solid); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-lg); padding: 0; max-width: 600px; width: 100%; max-height: 92vh; overflow-y: auto; transform: scale(0.96); transition: transform 0.2s; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .ef4-modal-overlay.active .ef4-modal { transform: scale(1); } .ef4-modal-lg { max-width: 800px; } .ef4-modal-xl { max-width: 1000px; } .ef4-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ef4-border); } .ef4-modal-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--ef4-text-primary); } .ef4-modal-close { background: none; border: none; color: var(--ef4-text-muted); font-size: 22px; cursor: pointer; padding: 4px; line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: var(--ef4-transition); } .ef4-modal-close:hover { color: var(--ef4-text-primary); background: rgba(255,255,255,0.05); } .ef4-modal-body { margin: 0; padding: 0; background: var(--ef4-bg); } .ef4-modal-footer { padding: 16px 24px; border-top: 1px solid var(--ef4-border); display: flex; gap: 10px; justify-content: flex-end; } /* Stepper */ .ef4-stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px; } .ef4-step { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ef4-step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid var(--ef4-border); background: transparent; color: var(--ef4-text-muted); transition: var(--ef4-transition); } .ef4-step.active .ef4-step-dot { background: var(--ef4-green); border-color: var(--ef4-green); color: #0a0a0f; } .ef4-step.completed .ef4-step-dot { background: var(--ef4-green-dim); border-color: var(--ef4-green); color: var(--ef4-green); } .ef4-step-label { font-size: 11px; color: var(--ef4-text-muted); font-weight: 500; } .ef4-step.active .ef4-step-label { color: var(--ef4-green); } .ef4-step-line { width: 48px; height: 2px; background: var(--ef4-border); margin: 0 4px; margin-bottom: 22px; } .ef4-step-line.completed { background: var(--ef4-green); } /* Toast */ .ef4-toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .ef4-toast { padding: 12px 18px; border-radius: 12px; font-size: 13px; font-weight: 500; animation: ef4-toast-in 0.3s ease; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .ef4-toast.success { background: rgba(118,204,111,0.15); color: var(--ef4-green); border: 1px solid rgba(118,204,111,0.3); } .ef4-toast.error { background: rgba(194,36,58,0.15); color: var(--ef4-red); border: 1px solid rgba(194,36,58,0.3); } .ef4-toast.info { background: rgba(1,129,251,0.15); color: var(--ef4-blue); border: 1px solid rgba(1,129,251,0.3); } .ef4-toast.warning { background: rgba(245,166,35,0.15); color: var(--ef4-yellow); border: 1px solid rgba(245,166,35,0.3); } /* Tabs */ .ef4-tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.03); border-radius: var(--ef4-radius-sm); padding: 3px; margin-bottom: 20px; width: fit-content; } .ef4-tab { padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ef4-text-secondary); cursor: pointer; border: none; background: transparent; transition: var(--ef4-transition); font-family: inherit; } .ef4-tab:hover { color: var(--ef4-text-primary); } .ef4-tab.active { background: rgba(255,255,255,0.06); color: var(--ef4-text-primary); } /* Empty State */ .ef4-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; gap: 12px; } .ef4-empty svg { width: 56px; height: 56px; stroke: var(--ef4-text-muted); stroke-width: 1; fill: none; opacity: 0.3; } .ef4-empty-title { font-size: 15px; font-weight: 600; color: var(--ef4-text-primary); margin: 0; } .ef4-empty-desc { font-size: 13px; color: var(--ef4-text-muted); margin: 0; max-width: 320px; } /* Checklist */ .ef4-checklist { list-style: none; padding: 0; margin: 0; } .ef4-checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--ef4-text-secondary); font-size: 13px; cursor: pointer; } .ef4-checklist li:last-child { border-bottom: none; } .ef4-checklist li.done { text-decoration: line-through; color: var(--ef4-text-muted); } .ef4-check { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--ef4-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; color: transparent; transition: var(--ef4-transition); } .ef4-checklist li.done .ef4-check { background: var(--ef4-green); border-color: var(--ef4-green); color: #0a0a0f; } /* Insight Cards */ .ef4-insight { border-left: 3px solid var(--ef4-border); padding: 10px 12px; background: var(--ef4-surface); border-radius: 0 var(--ef4-radius) var(--ef4-radius) 0; margin-bottom: 8px; transition: var(--ef4-transition); } .ef4-insight:hover { background: var(--ef4-surface-hover); } .ef4-insight.success { border-left-color: var(--ef4-green); } .ef4-insight.warning { border-left-color: var(--ef4-yellow); } .ef4-insight.danger { border-left-color: var(--ef4-red); } .ef4-insight.info { border-left-color: var(--ef4-blue); } .ef4-insight-title { font-weight: 600; font-size: 13px; margin: 0 0 4px; color: var(--ef4-text-primary); } .ef4-insight-desc { font-size: 12px; color: var(--ef4-text-secondary); margin: 0 0 6px; } .ef4-insight-action { font-size: 11px; color: var(--ef4-text-muted); margin: 0; } /* Goal Card */ .ef4-goal { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-goal:last-child { border-bottom: none; } .ef4-goal-info { flex: 1; } .ef4-goal-title { font-size: 13px; font-weight: 500; color: var(--ef4-text-primary); margin: 0 0 4px; } .ef4-goal-meta { font-size: 11px; color: var(--ef4-text-muted); } /* Session Card */ .ef4-session-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 18px; transition: var(--ef4-transition); } .ef4-session-card:hover { border-color: var(--ef4-border-hover); background: var(--ef4-surface-hover); } .ef4-session-card.active { border-left: 3px solid var(--ef4-green); } /* Strategy Card */ .ef4-strat-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 18px; transition: all 0.25s ease; cursor: pointer; } .ef4-strat-card:hover { border-color: #AEF31F; background: rgba(174,243,31,0.05); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .ef4-strat-card.archived { opacity: 0.4; } .ef4-rule-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 13px; color: var(--ef4-text-secondary); } .ef4-rule-row:last-child { border-bottom: none; } /* Backtest Card */ .ef4-backtest-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 18px; transition: var(--ef4-transition); } .ef4-backtest-card:hover { border-color: var(--ef4-border-hover); } .ef4-hypothesis { font-style: italic; color: var(--ef4-text-secondary); font-size: 13px; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.02); border-radius: var(--ef4-radius-sm); border-left: 3px solid var(--ef4-blue); } /* Lifestyle */ .ef4-lifestyle-item { margin-bottom: 20px; } .ef4-lifestyle-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--ef4-text-secondary); } .ef4-lifestyle-value { font-weight: 600; color: var(--ef4-text-primary); } /* FOMO Gauge */ .ef4-fomo-wrap { text-align: center; padding: 20px; } .ef4-fomo-score { font-size: 48px; font-weight: 800; line-height: 1; } .ef4-fomo-score.good { color: var(--ef4-green); } .ef4-fomo-score.warning { color: var(--ef4-yellow); } .ef4-fomo-score.danger { color: var(--ef4-red); } .ef4-fomo-label { font-size: 13px; color: var(--ef4-text-muted); margin-top: 8px; } .ef4-fomo-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; } /* Dropzone */ .ef4-dropzone { border: 2px dashed var(--ef4-border); border-radius: var(--ef4-radius); padding: 32px; text-align: center; color: var(--ef4-text-muted); transition: var(--ef4-transition); cursor: pointer; } .ef4-dropzone:hover { border-color: var(--ef4-green); background: var(--ef4-green-dim); color: var(--ef4-text-secondary); } /* Slider */ .ef4-slider { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); outline: none; -webkit-appearance: none; } .ef4-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-bg); box-shadow: 0 0 8px rgba(118,204,111,0.3); } .ef4-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-bg); } /* Risk Result Box */ .ef4-risk-result { background: var(--ef4-green-dim); border: 1px solid rgba(118,204,111,0.2); border-radius: var(--ef4-radius); padding: 16px; margin-top: 16px; } .ef4-risk-result.red { background: var(--ef4-red-dim); border-color: rgba(194,36,58,0.2); } /* Scrollbar */ .ef4-wrap ::-webkit-scrollbar { width: 5px; } .ef4-wrap ::-webkit-scrollbar-track { background: transparent; } .ef4-wrap ::-webkit-scrollbar-thumb { background: var(--ef4-border); border-radius: 3px; } /* Animations */ @keyframes ef4-fade-in { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } } @keyframes ef4-toast-in { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform: translateX(0); } } @keyframes ef4-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } } @keyframes ef4-spin { to { transform:rotate(360deg); } } @keyframes ef4Spin { to { transform:rotate(360deg); } } @keyframes ef4-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ef4-animate-fade { animation: ef4-fade-in 0.4s ease forwards; } .ef4-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: ef4-skel 1.5s infinite; border-radius: var(--ef4-radius-sm); } .ef4-spinner { width: 20px; height: 20px; border: 2px solid var(--ef4-border); border-top-color: var(--ef4-green); border-radius: 50%; animation: ef4-spin 0.6s linear infinite; display: inline-block; } /* Trade Row Colors */ .ef4-trade-win { color: var(--ef4-pl-green); font-weight: 600; } .ef4-trade-loss { color: var(--ef4-red); font-weight: 600; } .ef4-trade-be { color: var(--ef4-text-muted); } .ef4-symbol-badge { font-weight: 700; font-size: 13px; color: var(--ef4-text-primary); } .ef4-dir-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; } .ef4-dir-badge.long { background: var(--ef4-pl-green-dim); color: var(--ef4-pl-green); } .ef4-dir-badge.short { background: var(--ef4-red-dim); color: var(--ef4-red); } .ef4-font-mono { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 12px; } /* Text Utilities */ .ef4-text-sm { font-size: 12px; } .ef4-text-xs { font-size: 11px; } .ef4-muted { color: var(--ef4-text-secondary); } .ef4-text-green { color: var(--ef4-green); } .ef4-text-red { color: var(--ef4-red); } .ef4-text-blue { color: var(--ef4-blue); } .ef4-text-yellow { color: var(--ef4-yellow); } /* Tooltip */ .ef4-tip { position: relative; } .ef4-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 5px 10px; background: var(--ef4-surface-solid); border: 1px solid var(--ef4-border); border-radius: 6px; font-size: 11px; color: var(--ef4-text-primary); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10; } .ef4-tip:hover::after { opacity: 1; } /* Emotion & Mistake Toggle Buttons */ .ef4-emo-btn, .ef4-mistake-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--ef4-border); background: transparent; color: var(--ef4-text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .ef4-emo-btn:hover, .ef4-mistake-btn:hover { border-color: var(--ef4-text-muted); color: var(--ef4-text-primary); } .ef4-emo-btn.active, .ef4-mistake-btn.active { background: var(--ef4-green); color: #0a0f1a; border-color: var(--ef4-green); font-weight: 600; } .ef4-emo-btn.active.negative, .ef4-mistake-btn.active.negative { background: var(--ef4-red); color: #fff; border-color: var(--ef4-red); } /* KPI Sparklines */ .ef4-sparkline { width: 100%; height: 32px; margin-top: 8px; } /* Widget Panel Scrollbar */ #widgetToggleList::-webkit-scrollbar { width: 4px; } #widgetToggleList::-webkit-scrollbar-track { background: transparent; } #widgetToggleList::-webkit-scrollbar-thumb { background: var(--ef4-border); border-radius: 4px; } #widgetToggleList::-webkit-scrollbar-thumb:hover { background: var(--ef4-border-hover); } /* Toggle Switch Visual Feedback */ .ef4-toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; } .ef4-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .ef4-toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); border-radius: 22px; transition: background 0.25s ease; } .ef4-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .ef4-toggle-switch input:checked + .ef4-toggle-slider { background: var(--ef4-green, #AEF31F); } .ef4-toggle-switch input:checked ~ .ef4-toggle-knob { transform: translateX(18px); } /* Rule Categories */ .ef4-rule-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; margin-bottom:8px; } .ef4-rule-cat-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; } .ef4-rule-cat-badge.technical { background:rgba(59,130,246,0.15); color:#3B82F6; } .ef4-rule-cat-badge.emotional { background:rgba(245,158,11,0.15); color:#F59E0B; } .ef4-rule-cat-badge.htf { background:rgba(139,92,246,0.15); color:#8B5CF6; } .ef4-rule-cat-badge.risk { background:rgba(239,68,68,0.15); color:#EF4444; } .ef4-rule-cat-badge.entry { background:rgba(16,185,129,0.15); color:#10B981; } /* Compliance rate badges */ .ef4-rule-cat-badge.high { background:rgba(16,185,129,0.15); color:#10B981; } .ef4-rule-cat-badge.medium { background:rgba(245,158,11,0.15); color:#F59E0B; } .ef4-rule-cat-badge.low { background:rgba(239,68,68,0.15); color:#EF4444; } /* Light mode */ body.ef4-light-mode .ef4-rule-cat-badge.technical { background:rgba(59,130,246,0.10); } body.ef4-light-mode .ef4-rule-cat-badge.emotional { background:rgba(245,158,11,0.10); } body.ef4-light-mode .ef4-rule-cat-badge.htf { background:rgba(139,92,246,0.10); } body.ef4-light-mode .ef4-rule-cat-badge.risk { background:rgba(239,68,68,0.10); } body.ef4-light-mode .ef4-rule-cat-badge.entry { background:rgba(16,185,129,0.10); } /* ===== Mobile Optimizations ===== */ @media (max-width: 768px) { .ef4-session-card { padding: 14px !important; } .ef4-session-card .ef4-grid-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; } .ef4-session-card .ef4-h3 { font-size: 15px !important; } #widgetPanel { width: 100vw !important; max-width: 100vw !important; } .ef4-modal-lg, .ef4-modal-xl { max-width: 98vw !important; width: 98vw !important; } .ef4-modal-body { padding: 16px !important; max-height: 70vh !important; } .ef4-card { padding: 14px !important; } .ef4-card-title { font-size: 13px !important; } .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .ef4-kpi-value { font-size: 20px !important; } .ef4-page-header { padding: 12px 0 16px !important; } .ef4-page-header h1 { font-size: 20px !important; } .ef4-topbar { padding: 8px 12px !important; gap: 8px !important; flex-wrap: wrap !important; } .ef4-table th, .ef4-table td { padding: 8px 10px !important; font-size: 12px !important; } .ef4-btn-sm { padding: 6px 10px !important; font-size: 11px !important; } .ef4-form-group { margin-bottom: 12px !important; } .ef4-grid-2 { gap: 14px !important; } } @media (max-width: 480px) { .ef4-session-card .ef4-grid-3 { grid-template-columns: 1fr !important; } .ef4-kpi-grid { grid-template-columns: 1fr !important; } .ef4-grid-2, .ef4-grid-3, .ef4-grid-4 { grid-template-columns: 1fr !important; } .ef4-topbar-action-btn span { display: none !important; } .ef4-topbar-action-btn svg { margin: 0 !important; } } /* Widget panel mobile */ @media (max-width: 768px) { #widgetPanelOverlay { background: rgba(0,0,0,0.7) !important; } #widgetToggleList { max-height: calc(100vh - 150px) !important; padding: 8px 16px !important; } } /* Smooth scroll for all panels */ #widgetToggleList, .ef4-modal-body { scroll-behavior: smooth; } /* Responsive */ @media (max-width: 1024px) { .ef4-mobile-toggle { display: flex; } .ef4-sidebar { transform: translateX(-100%); z-index: 200; } .ef4-sidebar.open { transform: translateX(0); } .ef4-main { margin-left: 0; padding: 60px 16px 16px; } .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ef4-grid-2, .ef4-grid-3, .ef4-grid-4 { grid-template-columns: 1fr; } .ef4-page-header { flex-direction: column; align-items: flex-start; } .ef4-modal-lg, .ef4-modal-xl { max-width: 95vw; } #sessionDropdownMenu { left: 12px !important; right: 12px !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; } } .ef4-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* NOTE: .ef4-main base styles are at line 299 — do NOT add bare overrides here */ /* Mobile override only: */ @media (max-width: 768px) { .ef4-main { max-width: 100vw; overflow-x: hidden; padding-bottom: 40px; } } /* ===== V5 CSS MERGE ===== */ /* NOTE: Root variables already defined at top of file. Keeping bright colors. */ :root { --ef4-radius-lg: 18px; --ef4-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --ef4-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --ef4-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.45); } /* Badge styling — colored text on tinted background */ .ef4-badge-green, .ef4-badge-lime { font-weight: 600 !important; } .ef4-tip-green { color: #0a0f1a !important; font-weight: 600 !important; } .ef4-btn-primary { color: #0a0f1a !important; font-weight: 600 !important; } /* KPI change text inside dark cards must be white */ .ef4-kpi-card .ef4-kpi-change.up { color: var(--ef4-green) !important; font-weight: 600 !important; } .ef4-kpi-card .ef4-kpi-change.down { color: var(--ef4-red) !important; font-weight: 600 !important; } .ef4-kpi-card .ef4-kpi-detail { color: var(--ef4-text-muted) !important; } /* Win/loss text on dark backgrounds */ .ef4-card .ef4-trade-win { color: var(--ef4-green) !important; font-weight: 600 !important; } .ef4-card .ef4-trade-loss { color: var(--ef4-red) !important; font-weight: 600 !important; } /* Ensure high contrast for lime text */ .ef4-text-green, .ef4-text-lime { text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; } /* ================= LIGHT MODE (Comvi-inspired warm) ================= */ /* Glassmorphism base */ .ef4-glass { background: var(--ef4-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ef4-border); box-shadow: var(--ef4-shadow); } .ef4-animate { animation: ef4-fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; } .ef4-animate-delay-1 { animation-delay: 0.1s; } .ef4-animate-delay-2 { animation-delay: 0.2s; } .ef4-animate-delay-3 { animation-delay: 0.3s; } .ef4-animate-delay-4 { animation-delay: 0.4s; } .ef4-animate-delay-5 { animation-delay: 0.5s; } .ef4-bar-animated { transform-origin: bottom; animation: ef4-bar-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .ef4-line-animated { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ef4-line-trace 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .ef4-donut-animated { animation: ef4-donut-expand 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: center; } .ef4-kpi-value { animation: ef4-count-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .ef4-gauge-animated { animation: ef4-gauge-fill 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .ef4-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); background-size: 200% 100%; animation: ef4-shimmer 2s infinite; } .ef4-btn-primary:hover { background: linear-gradient(135deg, #8adf84, #3aaa6f); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(43,136,89,0.3); } .ef4-input:focus, .ef4-select:focus, .ef4-textarea:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.1); background: rgba(255,255,255,0.05); } .ef4-toast.success { background: rgba(43,136,89,0.15); color: var(--ef4-green); border: 1px solid rgba(43,136,89,0.3); } .ef4-toast.error { background: rgba(221,41,66,0.15); color: var(--ef4-red); border: 1px solid rgba(221,41,66,0.3); } .ef4-toast.info { background: rgba(6,182,212,0.15); color: var(--ef4-blue); border: 1px solid rgba(6,182,212,0.3); } .ef4-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-bg); box-shadow: 0 0 8px rgba(43,136,89,0.3); } /* Risk Result Box */ .ef4-risk-result { background: var(--ef4-green-dim); border: 1px solid rgba(43,136,89,0.2); border-radius: var(--ef4-radius); padding: 16px; margin-top: 16px; } .ef4-risk-result.red { background: var(--ef4-red-dim); border-color: rgba(221,41,66,0.2); } /* V5 Calendar Heatmap */ .ef4-calendar-grid { display: grid; grid-template-columns: repeat(53, 1fr); gap: 3px; overflow-x: auto; padding: 12px 0; } .ef4-cal-day { aspect-ratio: 1; border-radius: 3px; transition: var(--ef4-transition); cursor: pointer; } .ef4-cal-day:hover { transform: scale(1.4); z-index: 10; box-shadow: 0 0 8px rgba(0,0,0,0.5); } .ef4-cal-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; justify-content: flex-end; } .ef4-cal-legend-label { font-size: 0.72rem; color: var(--ef4-text-muted); } .ef4-cal-dot { width: 12px; height: 12px; border-radius: 2px; } /* Sparkline canvas inside KPI cards */ .ef4-sparkline-canvas { position: absolute; bottom: 8px; left: 8px; right: 8px; height: 36px; opacity: 0.3; pointer-events: none; } /* Light mode toggle in sidebar */ .ef4-theme-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 12px 6px; cursor: pointer; border-radius: 10px; color: var(--ef4-text-secondary); font-size: 0.88rem; font-weight: 500; transition: var(--ef4-transition); } .ef4-theme-toggle:hover { background: rgba(148,163,184,0.08); color: var(--ef4-text-primary); } .ef4-theme-toggle svg { width: 18px; height: 18px; } /* ===== Dashboard Grid (for analytics & card grids) ===== */ .ef4-dashboard-grid { display: grid; gap: 20px; margin-bottom: 20px; } /* ============================================================ ANIMATION SYSTEM — Smooth data transitions ============================================================ */ /* Base transition for all data-bound elements */ [data-entity], [data-render-target] > *, .ef4-card, .ef4-strat-card, .ef4-session-card, .ef4-goal-card, .ef4-protocol-card { transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease; } /* Number counter animation class */ .ef4-number-morph { display: inline-block; transition: color 150ms ease; } .ef4-number-morph.up { color: #AEF31F !important; } .ef4-number-morph.down { color: #dd2942 !important; } /* Flash highlight for updated items */ .ef4-update-flash { animation: ef4-flash 600ms ease-out; } @keyframes ef4-flash { 0% { box-shadow: 0 0 0 0 rgba(174,243,31,0); } 30% { box-shadow: 0 0 20px 4px rgba(174,243,31,0.2), inset 0 0 20px rgba(174,243,31,0.1); } 100% { box-shadow: 0 0 0 0 rgba(174,243,31,0); } } /* New item entrance */ .ef4-item-new { animation: ef4-slide-in 300ms ease-out; } @keyframes ef4-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Deleted item exit */ .ef4-item-deleted { animation: ef4-fade-out 200ms ease-in forwards; } @keyframes ef4-fade-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); height: 0; margin: 0; padding: 0; } } /* Render target containers */ [data-render-target] { min-height: 40px; } /* ===== V5 WIDGET SYSTEM ===== */ .ef4-widget { transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.4s ease; } .ef4-widget.ef4-widget-hidden { opacity: 0; transform: scale(0.97); max-height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; } .ef4-dashboard-settings-btn { position: fixed; bottom: 24px; right: 24px; height: 48px; border-radius: 24px; background: var(--ef4-green); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(43,136,89,0.35); transition: transform 0.2s, box-shadow 0.2s; z-index: 1000; } .ef4-dashboard-settings-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(43,136,89,0.45); } .ef4-dashboard-settings-btn svg { transition: transform 0.4s ease; } .ef4-dashboard-settings-btn:hover svg { transform: rotate(90deg); } /* Widget panel uses transform-based animation from block at line ~298 */ /* Overlay styles: */ .ef4-widget-panel-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .ef4-widget-panel-overlay.open { opacity: 1; pointer-events: auto; } .ef4-widget-panel h3 { font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); margin: 0 0 16px 0; display: flex; align-items: center; gap: 8px; } .ef4-widget-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .ef4-widget-row span { font-size: 13px; color: var(--ef4-text-secondary); font-weight: 500; } .ef4-widget-toggle { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.08); position: relative; cursor: pointer; transition: background 0.25s ease; flex-shrink: 0; border: none; padding: 0; outline: none; } .ef4-widget-toggle.on { background: var(--ef4-green); } .ef4-widget-toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); display: block; } .ef4-widget-toggle.on .knob { transform: translateX(18px); } .ef4-widget-toggle:focus { box-shadow: 0 0 0 2px var(--ef4-green); } .ef4-switch { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.08); position: relative; cursor: pointer; transition: background 0.25s ease; flex-shrink: 0; } .ef4-switch.on { background: var(--ef4-green); } .ef4-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .ef4-switch.on::after { transform: translateX(18px); } .ef4-widget-panel .ef4-btn { margin-top: 16px; width: 100%; } /* Session & Strategy comparison cards */ .ef4-comparison-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-comparison-bar:last-child { border-bottom: none; } .ef4-comparison-label { font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); width: 100px; flex-shrink: 0; } .ef4-comparison-track { flex: 1; height: 8px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; } .ef4-comparison-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .ef4-comparison-value { font-size: 12px; font-weight: 700; font-family: var(--ef4-font-mono); width: 70px; text-align: right; flex-shrink: 0; } /* ===== FX Replay Inspired: Winners/Losers Card ===== */ .ef4-winners-losers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 12px; overflow: hidden; } .ef4-winners-losers > div { padding: 16px; } .ef4-winners-losers .win-side { background: rgba(43,136,89,0.06); border-right: 1px solid rgba(43,136,89,0.12); } .ef4-winners-losers .loss-side { background: rgba(221,41,66,0.06); } .ef4-winners-losers h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px 0; display: flex; align-items: center; gap: 6px; } .ef4-winners-losers h4.win-title { color: var(--ef4-pl-green); } .ef4-winners-losers h4.loss-title { color: var(--ef4-red); } .ef4-wl-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 12px; } .ef4-wl-row:last-child { border-bottom: none; } .ef4-wl-row .wl-label { color: var(--ef4-text-muted); } .ef4-wl-row .wl-value { font-weight: 700; font-family: var(--ef4-font-mono); } .ef4-wl-row .wl-value.win { color: var(--ef4-pl-green); } .ef4-wl-row .wl-value.loss { color: var(--ef4-red); } /* Trade Frequency mini bars */ .ef4-freq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; } .ef4-freq-card { text-align: center; padding: 16px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); } .ef4-freq-value { font-size: 28px; font-weight: 800; font-family: var(--ef4-font-mono); color: var(--ef4-text-primary); margin: 4px 0; } .ef4-freq-label { font-size: 11px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-freq-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 8px; overflow: hidden; } .ef4-freq-bar-fill { height: 100%; border-radius: 2px; background: var(--ef4-green); transition: width 0.8s ease; } /* ================================================================ V5 VISUAL SYSTEM - Complete Design Overhaul ================================================================ */ /* Glassmorphism cards */ .ef4-card { background: var(--ef4-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ef4-border); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; } .ef4-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.2); } /* Enhanced KPI cards */ .ef4-kpi-card { background: var(--ef4-surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ef4-border); border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } .ef4-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.15); } .ef4-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ef4-green), var(--ef4-cyan)); opacity: 0; transition: opacity 0.3s ease; } .ef4-kpi-card:hover::before { opacity: 1; } /* Chart wrappers */ /* Session cards with hover lift */ .ef4-session-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 18px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; } .ef4-session-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.18); border-color: var(--ef4-border-light); } .ef4-session-card:active { transform: translateY(-1px); } /* Status badges */ .ef4-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .ef4-status-active { background: rgba(43,136,89,0.12); color: var(--ef4-green); border: 1px solid rgba(43,136,89,0.2); } .ef4-status-paused { background: rgba(245,158,11,0.12); color: var(--ef4-amber); border: 1px solid rgba(245,158,11,0.2); } .ef4-status-archived { background: rgba(148,163,184,0.08); color: var(--ef4-text-muted); border: 1px solid rgba(148,163,184,0.15); } /* Styled selects for wizard */ /* Session dropdown styling */ .ef4-session-select { background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-primary); padding: 10px 14px; border-radius: var(--ef4-radius-sm); font-size: 13px; width: 100%; } .ef4-session-select:focus { border-color: var(--ef4-green); outline: none; } .ef4-current-session { color: var(--ef4-green); font-weight: 600; font-size: 13px; } .ef4-select-styled { appearance: none; -webkit-appearance: none; background: var(--ef4-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--ef4-border); border-radius: 10px; padding: 12px 36px 12px 14px; color: var(--ef4-text-primary); font-size: 14px; font-family: var(--ef4-font); width: 100%; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; } .ef4-select-styled:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.1); } .ef4-select-styled option { background: var(--ef4-surface); color: var(--ef4-text-primary); padding: 8px; } /* Trade table row hover */ .ef4-table tbody tr { transition: background 0.15s ease; cursor: pointer; } .ef4-table tbody tr:hover { background: var(--ef4-surface-hover); } /* Trade row theming (5.1) */ .ef4-trade-row { transition: background 0.15s ease; cursor: pointer; } .ef4-trade-row:hover { background: var(--ef4-surface-hover) !important; } .ef4-trade-row .ef4-trade-win { color: var(--ef4-pl-green); font-weight: 700; } .ef4-trade-row .ef4-trade-loss { color: var(--ef4-red); font-weight: 700; } /* Slim filter strip (5.2) */ .ef4-filter-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 10px; margin-bottom: 16px; } .ef4-filter-strip .ef4-input, .ef4-filter-strip .ef4-select { min-height: 34px; height: 34px; font-size: 13px; padding: 4px 8px; border-radius: 6px; } .ef4-filter-strip input[type="date"] { min-height: 34px; height: 34px; font-size: 13px; padding: 4px 8px; } /* Segmented control for Live/Backtest/All */ .ef4-segmented { display: flex; gap: 0; background: var(--ef4-surface-lighter); border: 1px solid var(--ef4-border); border-radius: 6px; overflow: hidden; } .ef4-seg-btn { background: transparent; border: none; padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--ef4-text-muted); cursor: pointer; transition: all .15s; border-right: 1px solid var(--ef4-border); line-height: 1; } .ef4-seg-btn:last-child { border-right: none; } .ef4-seg-btn:hover { color: var(--ef4-text-secondary); background: rgba(255,255,255,0.03); } .ef4-seg-btn.active { background: var(--ef4-primary); color: #111; } /* Voice-to-text button (12.4) */ .ef4-voice-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--ef4-text-muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; margin-left: 6px; vertical-align: middle; flex-shrink: 0; } .ef4-voice-btn:hover { background: rgba(255,255,255,0.12); color: var(--ef4-text-primary); } .ef4-voice-btn.recording { background: rgba(239,68,68,0.15); border-color: var(--ef4-red); color: var(--ef4-red); animation: ef4-voice-pulse 1.2s ease infinite; } /* Absolute-positioned voice button inside textarea containers (wizard) */ .ef4-voice-btn.ef4-voice-abs { position: absolute; bottom: 10px; right: 10px; margin-left: 0; z-index: 5; } @keyframes ef4-voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } } /* Setup type themed combobox (12.8) */ .ef4-combobox { position: relative; width: 100%; } .ef4-combobox-input { width: 100%; padding: 10px 36px 10px 12px; background: #0b1120; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: var(--ef4-text-primary); font-size: 14px; cursor: pointer; transition: border-color 0.2s; box-sizing: border-box; } .ef4-combobox-input:focus { outline: none; border-color: var(--ef4-primary); } .ef4-combobox-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 220px; overflow-y: auto; background: #0b1530; border: 1px solid rgba(174,243,31,0.15); border-radius: 8px; margin-top: 4px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.4); display: none; } .ef4-combobox-dropdown.open { display: block; } .ef4-combobox-option { padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--ef4-text-secondary); transition: all 0.12s; border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-combobox-option:last-child { border-bottom: none; } .ef4-combobox-option:hover { background: rgba(174,243,31,0.1); color: var(--ef4-primary); } .ef4-combobox-option.selected { background: rgba(174,243,31,0.15); color: var(--ef4-primary); font-weight: 600; } .ef4-combobox-option.selected::before { content:"\2713"; color:#AEF31F; font-size:11px; margin-right:6px; } .ef4-combobox-dropdown::-webkit-scrollbar { width:6px; } .ef4-combobox-dropdown::-webkit-scrollbar-track { background:transparent; } .ef4-combobox-dropdown::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; } .ef4-combobox-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-right: 2px solid var(--ef4-text-muted); border-bottom: 2px solid var(--ef4-text-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* Setup quality slider (12.9) */ .ef4-quality-slider-wrap { display: flex; align-items: center; gap: 14px; } .ef4-quality-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(to right, #dc2626 0%, #dc2626 30%, #f59e0b 30%, #f59e0b 60%, #eab308 60%, #eab308 80%, #AEF31F 80%, #AEF31F 100%); outline: none; cursor: pointer; } .ef4-quality-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--ef4-primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.1s; } .ef4-quality-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .ef4-quality-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--ef4-primary); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .ef4-quality-label { font-size: 14px; font-weight: 700; color: var(--ef4-primary); min-width: 28px; text-align: center; } .ef4-quality-grade { font-size: 18px; font-weight: 700; color: var(--ef4-primary); min-width: 36px; text-align: center; } /* View trade modal (5.3) */ .ef4-view-trade-modal .ef4-modal-content { max-width: 560px; } .ef4-view-trade-section { margin-bottom: 16px; } .ef4-view-trade-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ef4-text-muted); margin-bottom: 8px; font-weight: 600; } .ef4-view-trade-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ef4-view-trade-field { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: 10px 12px; } .ef4-view-trade-label { font-size: 10px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .ef4-view-trade-value { font-size: 14px; color: var(--ef4-text-primary); font-weight: 500; } .ef4-view-trade-value.ef4-font-mono { font-family: 'Courier New', monospace; font-size: 13px; } /* Strategy card lime border on select (12.5) */ .ef4-wizard-strat-card.selected { border-color: var(--ef4-primary) !important; box-shadow: 0 0 0 2px var(--ef4-primary); } .ef4-strat-select-card.selected { border-color: var(--ef4-primary) !important; box-shadow: 0 0 16px rgba(174,243,31,0.25); } /* Rules checklist compliance indicator (12.6) */ .ef4-rules-compliance-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; transition: all 0.2s; } .ef4-rules-compliance-indicator.all-checked { background: rgba(174,243,31,0.12); color: var(--ef4-green); } .ef4-rules-compliance-indicator.some-checked { background: rgba(245,158,11,0.12); color: var(--ef4-amber); } .ef4-rules-compliance-indicator.none-checked { background: rgba(239,68,68,0.12); color: var(--ef4-red); } /* Screenshot paste preview (12.2) */ .ef4-screenshot-preview-wrap { position: relative; display: inline-block; margin-top: 10px; } .ef4-screenshot-preview-wrap img { max-width: 300px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); } .ef4-screenshot-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ef4-red); border: 2px solid var(--ef4-surface); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; } .ef4-screenshot-remove:hover { transform: scale(1.1); background: #ff4444; } /* Strategy card with rule expand */ .ef4-strat-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 18px; transition: all 0.25s ease; } .ef4-strat-card:hover { border-color: var(--ef4-border-light); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .ef4-strat-rules-toggle { color: var(--ef4-cyan); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; } .ef4-strat-rules-toggle:hover { color: var(--ef4-green); } .ef4-strat-archive-btn { color: var(--ef4-text-muted); transition: color 0.2s; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .ef4-strat-archive-btn:hover { color: var(--ef4-amber); } /* Edit modal card containers */ .ef4-edit-card { background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .ef4-edit-card-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .ef4-edit-card-cyan { color: var(--ef4-cyan); border-color: rgba(6,182,212,0.15); } .ef4-edit-card-red { color: var(--ef4-red); border-color: rgba(221,41,66,0.15); } .ef4-edit-card-green { color: var(--ef4-green); border-color: rgba(43,136,89,0.15); } .ef4-edit-card-amber { color: var(--ef4-amber); border-color: rgba(245,158,11,0.15); } /* Modal backdrop with blur */ .ef4-modal { background: rgba(5,7,18,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Animation keyframes used by the .ef4-animate-* classes below */ @keyframes ef4-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes ef4-scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes ef4-slide-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } .ef4-animate-fade-up { animation: ef4-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ef4-animate-scale-in { animation: ef4-scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ef4-animate-slide-right { animation: ef4-slide-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ef4-shimmer-load { background: linear-gradient(90deg, var(--ef4-surface) 25%, rgba(255,255,255,0.03) 50%, var(--ef4-surface) 75%); background-size: 200% 100%; animation: ef4-shimmer 2s infinite; } /* Stagger delays */ .ef4-delay-1 { animation-delay: 0.05s; opacity: 0; } .ef4-delay-2 { animation-delay: 0.1s; opacity: 0; } .ef4-delay-3 { animation-delay: 0.15s; opacity: 0; } .ef4-delay-4 { animation-delay: 0.2s; opacity: 0; } .ef4-delay-5 { animation-delay: 0.25s; opacity: 0; } /* FX Replay inspired comparison bars */ .ef4-compare-grid { display: flex; flex-direction: column; gap: 8px; } .ef4-compare-row { display: grid; grid-template-columns: 100px 1fr 80px 40px; align-items: center; gap: 10px; padding: 6px 0; } .ef4-compare-label { font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); } .ef4-compare-bar-bg { height: 10px; background: rgba(255,255,255,0.04); border-radius: 5px; overflow: hidden; } .ef4-compare-bar-fill { height: 100%; border-radius: 5px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .ef4-compare-value { font-size: 12px; font-weight: 700; font-family: var(--ef4-font-mono); text-align: right; } .ef4-compare-count { font-size: 11px; color: var(--ef4-text-muted); text-align: right; } /* Trade direction badge */ .ef4-dir-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .ef4-dir-long { background: rgba(43,136,89,0.12); color: var(--ef4-green); } .ef4-dir-short { background: rgba(221,41,66,0.12); color: var(--ef4-red); } /* ═══════════════════════════════════════════ SCREENSHOT PASTE ZONE — Wizard Step 1 ═══════════════════════════════════════════ */ #wizard-paste-zone { border: 2px dashed var(--ef4-border); border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s ease; margin-bottom: 16px; } #wizard-paste-zone:hover { border-color: var(--ef4-green) !important; background: rgba(174, 243, 31, 0.05); } #wizard-paste-zone.drag-over { border-color: var(--ef4-green) !important; background: rgba(174, 243, 31, 0.08); transform: scale(1.02); } #wizard-paste-zone:active { transform: scale(0.98); } #wizard-paste-zone svg { opacity: 0.6; transition: opacity 0.2s; } #wizard-paste-zone:hover svg { opacity: 1; } #wizard-screenshot-preview { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 16px; } #wizard-screenshot-img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; } /* ═══════════════════════════════════════════ SCREENSHOT GALLERY — View Mode ═══════════════════════════════════════════ */ .ef4-gallery-thumb { width: 120px; height: 90px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ef4-border); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .ef4-gallery-thumb:hover { border-color: var(--ef4-green); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .ef4-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════ WIZARD VIEW MODE — Read-only styling ═══════════════════════════════════════════ */ [data-wizard-mode="view"] .ef4-input, [data-wizard-mode="view"] .ef4-select, [data-wizard-mode="view"] .ef4-textarea { opacity: 0.65; pointer-events: none; background: var(--ef4-surface) !important; } [data-wizard-mode="view"] button[data-dir], [data-wizard-mode="view"] button[data-quality], [data-wizard-mode="view"] button[data-outcome], [data-wizard-mode="view"] button[data-emotion], [data-wizard-mode="view"] button[data-mistake], [data-wizard-mode="view"] button[data-tag], [data-wizard-mode="view"] button[data-ritual] { opacity: 0.65; pointer-events: none; } [data-wizard-mode="view"] #wizard-paste-zone, [data-wizard-mode="view"] #wizard-screenshot-preview { display: none !important; } [data-wizard-mode="view"] .ef4-step-dot { pointer-events: none; } /* ═══════════════════════════════════════════ WIZARD MODE BADGE ═══════════════════════════════════════════ */ #wizard-mode-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 10px; vertical-align: middle; } /* Scrollbar styling */ .ef4-main::-webkit-scrollbar { width: 8px; } .ef4-main::-webkit-scrollbar-track { background: transparent; } .ef4-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; } .ef4-main::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); } /* Tooltip for charts */ .ef4-chart-tooltip { position: absolute; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 8px; padding: 8px 12px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.2); backdrop-filter: blur(8px); } /* Sparkline canvas in KPI */ .ef4-sparkline-wrap { height: 40px; margin-top: 8px; opacity: 0.5; } /* Tablet breakpoint — KPIs collapse to 2 columns, secondary grids to 1 column */ @media (max-width: 1024px) { .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .ef4-grid-2, .ef4-grid-3 { grid-template-columns: 1fr !important; } .ef4-comparison-bar { flex-wrap: wrap; } .ef4-comparison-label { width: 100%; margin-bottom: 4px; } } /* ---- SESSIONS PAGE V5 ---- */ .sess-card-v5 { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 20px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; } .sess-card-v5:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); border-color: var(--ef4-border-light); } .sess-card-v5 .sess-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .sess-card-v5 .sess-name { font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); } .sess-card-v5 .sess-meta { font-size: 12px; color: var(--ef4-text-muted); margin-top: 2px; } .sess-card-v5 .sess-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ef4-border); } .sess-card-v5 .sess-stat { text-align: center; } .sess-card-v5 .sess-stat-value { font-size: 18px; font-weight: 800; font-family: var(--ef4-font-mono); } .sess-card-v5 .sess-stat-label { font-size: 10px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ SUBSCRIPTION PAGE — Plan Card Styles & Gradient Border ============================================================ */ /* Current plan card — animated gradient border (continuous sweep) */ .ef4-plan-card-current { position: relative; overflow: hidden; border-radius: 14px; } .ef4-plan-card-current::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, #AEF31F, #00d4ff, #AEF31F, #FF8C42, #AEF31F); background-size: 300% 100%; border-radius: 14px; z-index: -1; animation: ef4-gradient-sweep 4s linear infinite; } @keyframes ef4-gradient-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* Subscription plan cards */ .ef4-sub-plan { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 24px; transition: var(--ef4-transition); position: relative; } .ef4-sub-plan.featured { border-color: var(--ef4-green); box-shadow: 0 0 20px rgba(174,243,31,0.08); } .ef4-sub-plan:hover { border-color: var(--ef4-border-hover); background: var(--ef4-surface-hover); } .ef4-sub-price { font-size: 36px; font-weight: 800; color: var(--ef4-text-primary); margin: 12px 0; letter-spacing: -1px; } .ef4-sub-price span { font-size: 14px; font-weight: 500; color: var(--ef4-text-muted); } .ef4-sub-features { list-style: none; padding: 0; margin: 0 0 16px 0; } .ef4-sub-features li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--ef4-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-sub-features li:last-child { border-bottom: none; } .ef4-sub-features li svg { width: 16px; height: 16px; stroke: var(--ef4-green); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Feature comparison matrix */ .ef4-feature-matrix { width: 100%; border-collapse: collapse; font-size: 13px; } .ef4-feature-matrix th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--ef4-border); white-space: nowrap; } .ef4-feature-matrix th:first-child { width: 100%; } .ef4-feature-matrix td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--ef4-text-secondary); vertical-align: middle; text-align: center; white-space: nowrap; } .ef4-feature-matrix td:first-child { text-align: left; font-weight: 600; color: var(--ef4-text-primary); } .ef4-feature-matrix tr:hover td { background: rgba(255,255,255,0.02); } .ef4-feature-matrix .ef4-matrix-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(43,136,89,0.15); color: var(--ef4-green); } .ef4-feature-matrix .ef4-matrix-check svg { width: 12px; height: 12px; stroke-width: 3; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ef4-feature-matrix .ef4-matrix-dash { color: var(--ef4-text-muted); font-size: 16px; } .ef4-feature-matrix .current-tier-col { background: rgba(174,243,31,0.04); border-left: 2px solid var(--ef4-green); border-right: 2px solid var(--ef4-green); } .ef4-feature-matrix th.current-tier-col { background: rgba(174,243,31,0.08); color: var(--ef4-green); border-top: 2px solid var(--ef4-green); border-bottom: 2px solid var(--ef4-green); } .ef4-feature-matrix tr:last-child td.current-tier-col { border-bottom: 2px solid var(--ef4-green); } /* Analyze My Data CTA section */ .ef4-analyze-cta { text-align: center; padding: 32px 24px; background: linear-gradient(135deg, rgba(174,243,31,0.05), rgba(0,212,255,0.05)); border: 1px dashed var(--ef4-border); border-radius: var(--ef4-radius); margin-top: 20px; } .ef4-analyze-cta-title { font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); margin: 0 0 8px 0; } .ef4-analyze-cta-desc { font-size: 13px; color: var(--ef4-text-muted); margin: 0 0 16px 0; } /* ---- STRATEGIES PAGE V5 ---- */ .strat-card-v5 { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 20px; transition: all 0.25s ease; } .strat-card-v5:hover { border-color: var(--ef4-border-light); } .strat-card-v5 .strat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .strat-card-v5 .strat-name { font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); } .strat-card-v5 .strat-rules { margin-top: 10px; } .strat-card-v5 .strat-rule-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--ef4-text-secondary); } .strat-card-v5 .strat-rule-item svg { flex-shrink: 0; } .strat-card-v5 .strat-toggle-more { color: var(--ef4-cyan); font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; } .strat-card-v5 .strat-toggle-more:hover { color: var(--ef4-green); } .strat-card-v5 .strat-archive { color: var(--ef4-text-muted); cursor: pointer; transition: color 0.2s; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .strat-card-v5 .strat-archive:hover { color: var(--ef4-amber); } /* ---- ALL TRADES PAGE V5 ---- */ .trades-filter-v5 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; background: var(--ef4-surface); border-radius: 10px; border: 1px solid var(--ef4-border); margin-bottom: 16px; } .trades-filter-v5 select, .trades-filter-v5 input { background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); border-radius: 8px; padding: 8px 12px; color: var(--ef4-text-primary); font-size: 13px; font-family: var(--ef4-font); } .trades-filter-v5 select:focus, .trades-filter-v5 input:focus { outline: none; border-color: var(--ef4-green); } .trades-edit-modal-v5 .edit-section { background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .trades-edit-modal-v5 .edit-section-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .trades-edit-modal-v5 .edit-section-cyan { color: var(--ef4-cyan); } .trades-edit-modal-v5 .edit-section-red { color: var(--ef4-red); } .trades-edit-modal-v5 .edit-section-green { color: var(--ef4-green); } /* Win/Loss/Break-even radio in edit modal */ .outcome-toggle-v5 { display: flex; gap: 8px; } .outcome-toggle-v5 label { flex: 1; padding: 10px; border-radius: 10px; border: 2px solid var(--ef4-border); text-align: center; cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 600; } .outcome-toggle-v5 input[type="radio"] { display: none; } .outcome-toggle-v5 input[type="radio"]:checked + label.win-label { border-color: var(--ef4-green); background: rgba(43,136,89,0.08); color: var(--ef4-green); } .outcome-toggle-v5 input[type="radio"]:checked + label.loss-label { border-color: var(--ef4-red); background: rgba(221,41,66,0.08); color: var(--ef4-red); } .outcome-toggle-v5 input[type="radio"]:checked + label.be-label { border-color: var(--ef4-purple); background: rgba(139,92,246,0.08); color: var(--ef4-purple); } /* Laptop / smaller-desktop breakpoint — narrower sidebar */ @media (max-width: 1280px) { .ef4-sidebar { width: 200px; } .ef4-main { margin-left: 200px; } } /* Mobile breakpoint — sidebar slides in/out, KPIs collapse, main becomes full width */ @media (max-width: 768px) { .ef4-sidebar { position: fixed; left: -260px; width: 260px; z-index: 1000; transition: left 0.3s ease; } .ef4-sidebar.mobile-open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.3); } .ef4-main { margin-left: 0 !important; padding: 12px; } .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } .ef4-grid-2 { grid-template-columns: 1fr !important; gap: 16px; } .ef4-grid-3 { grid-template-columns: 1fr !important; gap: 16px; } .ef4-grid-4 { grid-template-columns: 1fr !important; gap: 16px; } .ef4-comparison-bar { flex-wrap: wrap; gap: 4px; } .ef4-comparison-label { width: 100%; font-size: 11px; } .ef4-comparison-track { flex: 1; } .ef4-winners-losers { grid-template-columns: 1fr !important; } .ef4-freq-grid { grid-template-columns: 1fr !important; } .ef4-dashboard-settings-btn { bottom: 16px; right: 16px; height: 44px; padding: 0 14px; font-size: 12px; } .ef4-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ef4-modal-content { width: 95%; max-height: 90vh; } .ef4-mobile-menu-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-primary); cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .ef4-mobile-menu-toggle:hover { background: var(--ef4-surface-hover); border-color: var(--ef4-border-hover); } .ef4-mobile-menu-toggle { display: flex !important; } } /* Base: hide mobile menu toggle on desktop */ .ef4-mobile-menu-toggle { display: none; } /* Touch devices — disable hover transforms that look weird without a cursor */ @media (hover: none) { .ef4-session-card:hover, .ef4-kpi-card:hover, .ef4-strat-card:hover { transform: none; } .ef4-btn:active { transform: scale(0.97); } } /* Reduced motion — collapse animations for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Print — hide chrome, show content cleanly */ @media print { .ef4-sidebar, .ef4-dashboard-settings-btn, .ef4-widget-panel, .ef4-widget-panel-overlay { display: none !important; } .ef4-main { margin-left: 0 !important; padding: 20px; } .ef4-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } } /* Dark mode scrollbar (webkit) */ .ef4-main::-webkit-scrollbar { width: 6px; } .ef4-main::-webkit-scrollbar-track { background: transparent; } .ef4-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; } .ef4-main::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); } /* Loading states */ .ef4-skeleton { background: linear-gradient(90deg, var(--ef4-surface) 25%, rgba(255,255,255,0.04) 50%, var(--ef4-surface) 75%); background-size: 200% 100%; animation: ef4-shimmer 1.5s infinite; border-radius: 6px; } /* Focus visible for accessibility */ .ef4-btn:focus-visible, .ef4-select-styled:focus-visible, .ef4-input:focus-visible { outline: 2px solid var(--ef4-green); outline-offset: 2px; } /* Better table styling */ .ef4-table th { position: sticky; top: 0; background: var(--ef4-surface); z-index: 2; backdrop-filter: blur(8px); } .ef4-table tbody tr { transition: background 0.15s ease; } .ef4-table tbody tr:hover td { background: rgba(255,255,255,0.015); } /* Notification/toast enhancements */ .ef4-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .ef4-toast { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); backdrop-filter: blur(12px); animation: ef4-fade-up 0.3s ease; display: flex; align-items: center; gap: 10px; min-width: 260px; } .ef4-toast.success { border-left: 3px solid var(--ef4-green); } .ef4-toast.error { border-left: 3px solid var(--ef4-red); } .ef4-toast.warning { border-left: 3px solid var(--ef4-amber); } /* ================================================================ V5 TRADE WIZARD ================================================================ */ .ef4-wizard-container { max-width: 640px; margin: 0 auto; } .ef4-wizard-step { animation: ef4-fade-up 0.4s ease; } .ef4-wizard-step h3 { font-size: 18px; font-weight: 700; color: var(--ef4-text-primary); margin-bottom: 6px; } .ef4-wizard-step .step-desc { font-size: 13px; color: var(--ef4-text-muted); margin-bottom: 24px; } .ef4-step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; padding: 0 20px; } .ef4-step-dot { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 2px solid var(--ef4-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ef4-text-muted); transition: all 0.3s ease; cursor: pointer; position: relative; z-index: 2; } .ef4-step-dot.active { background: var(--ef4-green); border-color: var(--ef4-green); color: #fff; box-shadow: 0 0 0 4px rgba(43,136,89,0.15); } .ef4-step-dot.completed { background: rgba(43,136,89,0.1); border-color: var(--ef4-green); color: var(--ef4-green); } .ef4-step-line { flex: 1; height: 2px; background: var(--ef4-border); margin: 0 -4px; position: relative; z-index: 1; } .ef4-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .ef4-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--ef4-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .ef4-form-group input[type="text"], .ef4-form-group input[type="number"], .ef4-form-group input[type="date"], .ef4-form-group input[type="time"], .ef4-form-group textarea, .ef4-form-group select { width: 100%; background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 12px 14px; color: var(--ef4-text-primary); font-size: 14px; font-family: var(--ef4-font); transition: border-color 0.2s, box-shadow 0.2s; } .ef4-form-group input:focus, .ef4-form-group textarea:focus, .ef4-form-group select:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.08); } .ef4-form-group textarea { min-height: 80px; resize: vertical; } .ef4-outcome-selector { display: flex; gap: 10px; } .ef4-outcome-btn { flex: 1; padding: 14px; border-radius: 12px; border: 2px solid var(--ef4-border); background: transparent; color: var(--ef4-text-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .ef4-outcome-btn:hover { border-color: var(--ef4-border-light); } .ef4-outcome-btn.selected.win { border-color: var(--ef4-green); background: rgba(43,136,89,0.08); color: var(--ef4-green); } .ef4-outcome-btn.selected.loss { border-color: var(--ef4-red); background: rgba(221,41,66,0.08); color: var(--ef4-red); } .ef4-outcome-btn.selected.breakeven { border-color: var(--ef4-purple); background: rgba(139,92,246,0.08); color: var(--ef4-purple); } .ef4-wizard-nav { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ef4-border); } .ef4-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .ef4-checklist-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; font-size: 13px; } .ef4-checklist-item:hover { border-color: var(--ef4-border-light); background: rgba(255,255,255,0.03); } .ef4-checklist-item.checked { border-color: var(--ef4-green); background: rgba(43,136,89,0.05); } .ef4-checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ef4-green); } /* Mobile: collapse form rows / checklist / wizard padding */ @media (max-width: 768px) { .ef4-form-row { grid-template-columns: 1fr; } .ef4-checklist-grid { grid-template-columns: 1fr; } .ef4-wizard-container { padding: 0 10px; } } /* Setup performance bars */ .ef4-setup-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-setup-bar:last-child { border-bottom: none; } /* Symbol badge */ .ef4-symbol-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.04); color: var(--ef4-text-primary); font-family: var(--ef4-font-mono); } /* Quality badge */ .ef4-quality-a { background: rgba(43,136,89,0.12); color: var(--ef4-green); } .ef4-quality-b { background: rgba(245,158,11,0.12); color: var(--ef4-amber); } .ef4-quality-c { background: rgba(221,41,66,0.12); color: var(--ef4-red); } /* Enhanced empty states */ .ef4-empty { text-align: center; padding: 40px 20px; color: var(--ef4-text-muted); } .ef4-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; } .ef4-empty-title { font-size: 16px; font-weight: 700; color: var(--ef4-text-primary); margin-bottom: 6px; } .ef4-empty-desc { font-size: 13px; color: var(--ef4-text-muted); max-width: 300px; margin: 0 auto; } /* Progress bars for goals */ .ef4-progress-track { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .ef4-progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .ef4-progress-fill.green { background: linear-gradient(90deg, #2b8859, #34a56a); } .ef4-progress-fill.amber { background: linear-gradient(90deg, #d97706, #f59e0b); } .ef4-progress-fill.red { background: linear-gradient(90deg, #b91c1c, #dd2942); } /* Card header improvements */ .ef4-card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--ef4-border); gap: 12px; } .ef4-card-title { font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); letter-spacing: -0.01em; } .ef4-card-subtitle { font-size: 12px; color: var(--ef4-text-muted); margin-top: 2px; } /* Legend dots */ .ef4-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* Table improvements */ .ef4-table { width: 100%; border-collapse: collapse; } .ef4-table thead th { padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ef4-text-muted); text-align: left; border-bottom: 1px solid var(--ef4-border); } .ef4-table tbody td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.02); vertical-align: middle; } .ef4-table tbody tr:last-child td { border-bottom: none; } /* Final V5 Polish */ .ef4-app { min-height: 100vh; background: var(--ef4-bg); color: var(--ef4-text-primary); font-family: var(--ef4-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; } /* Smooth transitions on theme switch */ .ef4-card, .ef4-kpi-card, .ef4-session-card, .ef4-strat-card, .ef4-modal-content { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Focus states */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ef4-green); outline-offset: 2px; } /* Better text selection */ ::selection { background: rgba(43,136,89,0.25); color: var(--ef4-text-primary); } /* Smooth page transitions */ .ef4-main > * { animation: ef4-fade-up 0.5s ease forwards; } /* Input number spinner hide */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Enhanced date/time inputs */ input[type="date"], input[type="time"] { color-scheme: dark; } /* Mobile menu toggle (visible only on mobile) */ .mobile-menu-toggle { display: none; position: fixed; top: 16px; left: 16px; z-index: 1001; width: 40px; height: 40px; border-radius: 10px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-primary); align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } /* Backdrop for mobile sidebar */ .sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; } /* ═══════════════════════════════════════════ SCREENSHOT PASTE ZONE v2 — Animations Scan effect, progress shimmer, tutorial ═══════════════════════════════════════════ */ /* Paste zone hover & drag states */ #screenshot-paste-empty:hover { border-color: var(--ef4-green) !important; background: var(--ef4-green-dim); } #screenshot-paste-empty.drag-over { border-color: var(--ef4-green) !important; background: var(--ef4-green-dim); transform: scale(1.01); } /* Scan line animation */ #screenshot-scan-line { animation: ef4ScanPulse 0.5s ease-in-out infinite alternate; } @keyframes ef4ScanPulse { from { opacity: 0.6; box-shadow: 0 0 10px var(--ef4-green); } to { opacity: 1; box-shadow: 0 0 25px var(--ef4-green), 0 0 50px rgba(174,243,31,0.3); } } /* Tutorial modal fade-in */ #screenshot-tutorial { animation: ef4FadeIn 0.2s ease; } @keyframes ef4FadeIn { from { opacity: 0; } to { opacity: 1; } } /* Progress bar shimmer */ #screenshot-progress-bar { position: relative; overflow: hidden; } #screenshot-progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: ef4Shimmer 1s infinite; } /* Analysis results appear animation */ #screenshot-analysis-results { animation: ef4SlideDown 0.3s ease; } @keyframes ef4SlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ef4Shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Hide screenshot zone in view mode */ [data-wizard-mode="view"] #wizard-screenshot-zone, [data-wizard-mode="view"] #screenshot-tutorial { display: none !important; } .ef4-sidebar.mobile-open + .sidebar-backdrop { display: block; } /* Card hover lift micro-animation */ .ef4-card, .ef4-kpi-card { will-change: transform, box-shadow; } /* Chart canvas crisp rendering */ canvas { image-rendering: -webkit-optimize-contrast; } /* Fix for iOS tap highlight */ * { -webkit-tap-highlight-color: transparent; } /* Better font rendering for numbers */ .ef4-font-mono, .ef4-kpi-value, .ef4-comparison-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Subtle noise texture overlay for depth */ .ef4-app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.015; pointer-events: none; z-index: 9998; } /* Interactive hover states */ .ef4-card:hover .ef4-card-title { color: var(--ef4-text-primary); } .ef4-table tbody tr:hover .ef4-symbol-badge { transform: scale(1.05); } .ef4-symbol-badge { transition: transform 0.2s ease; } /* Animated borders on hover */ .ef4-kpi-card:hover::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ef4-green), var(--ef4-cyan), var(--ef4-purple)); opacity: 0.6; } /* Smooth number transitions */ .ef4-kpi-value, .ef4-freq-value, .ef4-comparison-value { transition: color 0.3s ease; } /* Widget toggle animation */ .ef4-widget { transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.3s ease; } .ef4-widget.ef4-widget-hidden { opacity: 0; max-height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; } /* Comparison bar enhancements */ .ef4-comparison-bar:hover .ef4-comparison-track { background: rgba(255,255,255,0.06); } /* Outcome button enhancements */ .ef4-outcome-btn { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .ef4-outcome-btn:active { transform: scale(0.97); } /* Session dropdown styling */ #sessionDropdownMenu { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; max-height: 400px; overflow-y: auto; } #sessionDropdownMenu a:hover { background: rgba(255,255,255,0.03); } /* Sticky widget panel header */ .ef4-widget-panel h3 { position: sticky; top: 0; background: var(--ef4-surface); padding: 20px 0 16px; margin: -20px 0 0; z-index: 2; border-bottom: 1px solid var(--ef4-border); } /* ===== ALL TRADES PAGE V5 ===== */ .trades-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; padding: 14px 16px; background: var(--ef4-surface); border-radius: 12px; border: 1px solid var(--ef4-border); } .trades-toolbar .filter-group { display: flex; align-items: center; gap: 6px; } .trades-toolbar label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ef4-text-muted); } .trades-toolbar select, .trades-toolbar input { background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); border-radius: 8px; padding: 8px 12px; color: var(--ef4-text-primary); font-size: 13px; font-family: var(--ef4-font); min-width: 140px; } .trades-toolbar button { margin-left: auto; } /* Edit modal sections */ .edit-modal-body { padding: 20px; } .edit-section-card { background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .edit-section-card .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ef4-border); } .edit-section-card.trade-details .section-title { color: var(--ef4-cyan); } .edit-section-card.emotional-state .section-title { color: var(--ef4-purple); } .edit-section-card.mistakes .section-title { color: var(--ef4-red); } .edit-section-card.review .section-title { color: var(--ef4-green); } /* Outcome toggle in edit modal */ .outcome-selector { display: flex; gap: 8px; } .outcome-option { flex: 1; position: relative; } .outcome-option input { position: absolute; opacity: 0; } .outcome-option label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 10px; border: 2px solid var(--ef4-border); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .outcome-option input:checked + label.win { border-color: var(--ef4-green); background: rgba(43,136,89,0.08); color: var(--ef4-green); } .outcome-option input:checked + label.loss { border-color: var(--ef4-red); background: rgba(221,41,66,0.08); color: var(--ef4-red); } .outcome-option input:checked + label.breakeven { border-color: var(--ef4-purple); background: rgba(139,92,246,0.08); color: var(--ef4-purple); } /* ===== SESSIONS PAGE V5 ===== */ .sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; } .sess-card-v5 { position: relative; } .sess-card-v5 .sess-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; } .sess-card-v5:hover .sess-actions { opacity: 1; } .sess-chart-full { width: 100%; height: 280px; margin-top: 12px; border-radius: 8px; overflow: hidden; } /* ===== STRATEGIES PAGE V5 ===== */ .strategies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; } .strat-card-v5 .strat-rules-list { max-height: 120px; overflow: hidden; transition: max-height 0.3s ease; } .strat-card-v5 .strat-rules-list.expanded { max-height: 500px; } .strat-card-v5 .strat-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ef4-border); } .rule-compliance-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 8px; } .rule-compliance-badge.positive { background: rgba(43,136,89,0.1); color: var(--ef4-green); } .rule-compliance-badge.negative { background: rgba(221,41,66,0.1); color: var(--ef4-red); } /* ===== FINAL ACCESSIBILITY ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* High-contrast users — thicker borders so cards and buttons stand out */ @media (prefers-contrast: more) { .ef4-card, .ef4-kpi-card, .ef4-session-card { border-width: 2px; } .ef4-btn { border-width: 2px; } } /* Honor OS-level light scheme preference unless user explicitly chose dark */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } /* Small-mobile breakpoint — collapse KPIs to a single column */ @media (max-width: 480px) { .ef4-kpi-grid { grid-template-columns: 1fr !important; } .ef4-insight-grid { grid-template-columns: 1fr 1fr !important; } .ef4-insight-card { padding: 10px 8px; } .ef4-insight-value { font-size: 14px; } .ef4-chart-container { height: 180px !important; } } /* Tablet breakpoint */ @media (max-width: 768px) { .ef4-grid-2 { grid-template-columns: 1fr !important; } .ef4-grid-3 { grid-template-columns: 1fr !important; } .ef4-insight-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } @keyframes ef4-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } .ef4-loading { animation: ef4-pulse 1.5s ease-in-out infinite; } /* Error states */ .ef4-error-banner { background: rgba(221,41,66,0.08); border: 1px solid rgba(221,41,66,0.2); border-radius: 10px; padding: 12px 16px; color: var(--ef4-red); font-size: 13px; margin-bottom: 16px; } .ef4-success-banner { background: rgba(43,136,89,0.08); border: 1px solid rgba(43,136,89,0.2); border-radius: 10px; padding: 12px 16px; color: var(--ef4-green); font-size: 13px; margin-bottom: 16px; } /* Data export button */ .ef4-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); color: var(--ef4-text-muted); font-size: 12px; cursor: pointer; transition: all 0.2s; } .ef4-export-btn:hover { background: rgba(255,255,255,0.06); color: var(--ef4-text-primary); } /* Trade detail card */ .trade-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .trade-detail-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trade-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .trade-detail-pnl { font-size: 24px; font-weight: 800; font-family: var(--ef4-font-mono); } .trade-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--ef4-border); } @media (max-width: 768px) { .trade-detail-grid { grid-template-columns: repeat(2, 1fr); } } /* Final smooth scrollbar for all scrollable areas */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; } /* Keyboard navigation enhancements */ [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--ef4-green); outline-offset: 2px; border-radius: 4px; } /* Prevent text selection on interactive elements */ .ef4-btn, .ef4-step-dot, .ef4-switch, .ef4-outcome-btn { user-select: none; -webkit-user-select: none; } /* Image rendering for canvas */ canvas { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* Form validation states */ .ef4-input.error { border-color: var(--ef4-red); box-shadow: 0 0 0 3px rgba(221,41,66,0.1); } .ef4-input.success { border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.1); } /* Micro-interactions */ .ef4-badge, .ef4-status-badge, .ef4-dir-badge, .ef4-symbol-badge { transition: transform 0.15s ease; } .ef4-badge:hover, .ef4-status-badge:hover, .ef4-dir-badge:hover, .ef4-symbol-badge:hover { transform: scale(1.05); } /* Dashboard widget entrance stagger */ .ef4-widget:nth-child(1) { animation-delay: 0s; } .ef4-widget:nth-child(2) { animation-delay: 0.03s; } .ef4-widget:nth-child(3) { animation-delay: 0.06s; } .ef4-widget:nth-child(4) { animation-delay: 0.09s; } .ef4-widget:nth-child(5) { animation-delay: 0.12s; } .ef4-widget:nth-child(6) { animation-delay: 0.15s; } .ef4-widget:nth-child(7) { animation-delay: 0.18s; } .ef4-widget:nth-child(8) { animation-delay: 0.21s; } .ef4-widget:nth-child(9) { animation-delay: 0.24s; } .ef4-widget:nth-child(10) { animation-delay: 0.27s; } @media print { .ef4-sidebar, .ef4-dashboard-settings-btn, .ef4-widget-panel, .ef4-widget-panel-overlay, .mobile-menu-toggle, .sidebar-backdrop { display: none !important; } .ef4-main { margin-left: 0 !important; padding: 20px; background: white; } .ef4-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; background: white; } } body { background: var(--ef4-bg, #0a0e1a); color: var(--ef4-text-primary, #f1f5f9); transition: background 0.3s, color 0.3s; } /* Badge variants */ .ef4-badge-blue{background:rgba(6,182,212,0.12);color:#4da3ff;} /* Floating action button */ .ef4-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--ef4-blue),var(--ef4-purple));color:#fff;border:none;box-shadow:0 4px 16px rgba(6,182,212,0.3);cursor:pointer;display:none !important;align-items:center;justify-content:center;font-size:24px;z-index:1000;transition:transform .2s;} .ef4-fab:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(6,182,212,0.4);} .ef4-filter-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:rgba(43,136,89,0.1);border:1px solid rgba(43,136,89,0.2);color:var(--ef4-green);font-size:12px;} /* ===== COMPREHENSIVE UI FIXES ===== */ /* Styled Select Dropdowns - Replace gray HTML defaults */ .ef4-select-styled { appearance: none; -webkit-appearance: none; background: var(--ef4-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--ef4-border); border-radius: 10px; padding: 10px 36px 10px 14px; color: var(--ef4-text-primary); font-size: 13px; font-family: inherit; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; } .ef4-select-styled:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.1); } .ef4-select-styled option { background: var(--ef4-surface-solid); color: var(--ef4-text-primary); padding: 8px; } /* Direction Toggle Switch */ .ef4-dir-toggle { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ef4-border); } .ef4-dir-toggle button { flex: 1; padding: 10px 16px; border: none; background: transparent; color: var(--ef4-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; } .ef4-dir-toggle button.active-long { background: var(--ef4-green); color: #fff; } .ef4-dir-toggle button.active-short { background: var(--ef4-red); color: #fff; } /* Outcome Toggle Buttons (Win/Loss/BE) */ .ef4-outcome-toggle { display: flex; gap: 8px; } .ef4-outcome-toggle label { flex: 1; padding: 12px; border-radius: 10px; border: 2px solid var(--ef4-border); text-align: center; cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; } .ef4-outcome-toggle input[type="radio"] { display: none; } .ef4-outcome-toggle input:checked + label.win { border-color: var(--ef4-green); background: rgba(43,136,89,0.08); color: var(--ef4-green); } .ef4-outcome-toggle input:checked + label.loss { border-color: var(--ef4-red); background: rgba(221,41,66,0.08); color: var(--ef4-red); } .ef4-outcome-toggle input:checked + label.breakeven { border-color: var(--ef4-purple); background: rgba(139,92,246,0.08); color: var(--ef4-purple); } /* Edit Modal Section Cards */ .ef4-edit-section { background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; } .ef4-edit-section-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .ef4-edit-section.cyan { border-color: rgba(6,182,212,0.15); } .ef4-edit-section.cyan .ef4-edit-section-header { color: var(--ef4-cyan); } .ef4-edit-section.red { border-color: rgba(221,41,66,0.15); } .ef4-edit-section.red .ef4-edit-section-header { color: var(--ef4-red); } .ef4-edit-section.green { border-color: rgba(43,136,89,0.15); } .ef4-edit-section.green .ef4-edit-section-header { color: var(--ef4-green); } .ef4-edit-section.purple { border-color: rgba(139,92,246,0.15); } .ef4-edit-section.purple .ef4-edit-section-header { color: var(--ef4-purple); } /* Strategy Rule Expand */ .ef4-rules-expand { color: var(--ef4-cyan); font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; } .ef4-rules-expand:hover { color: var(--ef4-green); } .ef4-rules-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .ef4-rules-list.expanded { max-height: 500px; } /* Session Status Badges */ .ef4-status-active { background: rgba(43,136,89,0.12); color: var(--ef4-green); border: 1px solid rgba(43,136,89,0.2); } .ef4-status-paused { background: rgba(245,158,11,0.12); color: var(--ef4-amber); border: 1px solid rgba(245,158,11,0.2); } .ef4-status-archived { background: rgba(148,163,184,0.08); color: var(--ef4-text-muted); border: 1px solid rgba(148,163,184,0.15); } /* Clickable Cards */ .ef4-card-clickable { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .ef4-card-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } /* Fix form field spacing */ .ef4-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 768px) { .ef4-form-row { grid-template-columns: 1fr; } } /* Trade row clickable */ .ef4-table tbody tr { cursor: pointer; transition: background 0.15s; } .ef4-table tbody tr:hover { background: var(--ef4-surface-hover); } /* Fix white space at top — desktop only (mobile has its own padding) */ @media (min-width: 769px) { .ef4-main { padding-top: 20px !important; } } /* Mobile optimizations */ @media (max-width: 768px) { .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .ef4-grid-2, .ef4-grid-3 { grid-template-columns: 1fr !important; } .ef4-page-header { flex-direction: column; align-items: flex-start; } .ef4-modal-lg, .ef4-modal-xl { max-width: 95vw; } .ef4-main { padding: 60px 12px 12px !important; } } /* Sparkline in KPI cards */ .ef4-kpi-sparkline { width: 100%; height: 40px; margin-top: 8px; opacity: 0.9; pointer-events: none; display: block; } /* Calendar heatmap improvements */ .ef4-cal-day { aspect-ratio: 1; border-radius: 6px; transition: transform 0.15s; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .ef4-cal-day:hover { transform: scale(1.15); z-index: 2; box-shadow: 0 0 8px rgba(0,0,0,0.3); } /* Voice input button (shared - see original at 1666) */ /* Pre-trade checklist customization */ .ef4-checklist-custom { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 8px; margin-bottom: 6px; } .ef4-checklist-custom input[type="text"] { flex: 1; background: transparent; border: none; color: var(--ef4-text-primary); font-size: 13px; } .ef4-checklist-custom input[type="text"]:focus { outline: none; } /* URL fix - remove EdgeFinder from paths */ /* This is handled in the PHP rewrite rules, not CSS */ /* ===== CSS Block 1 ===== */ /* Toggle Switch */ .ef4-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;} .ef4-toggle input{opacity:0;width:0;height:0;} .ef4-toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--ef4-surface);border:1px solid var(--ef4-border);border-radius:24px;transition:background .2s;} .ef4-toggle-slider:before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;background:var(--ef4-text-muted);border-radius:50%;transition:transform .2s;} .ef4-toggle input:checked+.ef4-toggle-slider{background:var(--ef4-blue);border-color:var(--ef4-blue);} .ef4-toggle input:checked+.ef4-toggle-slider:before{transform:translateX(20px);background:#fff;} /* Range Slider */ .ef4-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--ef4-surface);border-radius:3px;outline:none;margin:8px 0;} .ef4-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ef4-blue);cursor:pointer;border:2px solid #fff;} .ef4-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ef4-blue);cursor:pointer;border:2px solid #fff;} /* Badge variants */ .ef4-badge-blue{background:var(--ef4-blue-dim);color:#4da3ff;} .ef4-badge-purple{background:rgba(124,92,255,0.12);color:#9a85ff;} /* Archived state */ .archived{opacity:0.55;} .archived:hover{opacity:0.8;} /* Section headers */ .ef4-h2{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--ef4-text-primary);} /* Legend */ .ef4-chart-legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0;justify-content:center;} .ef4-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ef4-text-muted);} .ef4-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;} /* Notification dot on sidebar */ .ef4-nav-link .ef4-notify{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ef4-red);animation:pulse-dot 2s infinite;} @keyframes pulse-dot{0%{transform:scale(1);opacity:1;}50%{transform:scale(1.3);opacity:0.7;}100%{transform:scale(1);opacity:1;}} /* Floating action button */ .ef4-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--ef4-blue),var(--ef4-purple));color:#fff;border:none;box-shadow:0 4px 16px rgba(1,129,251,0.3);cursor:pointer;display:none !important;align-items:center;justify-content:center;font-size:24px;z-index:1000;transition:transform .2s;} .ef4-fab:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(1,129,251,0.4);} /* Toast animation fix */ .ef4-toast.hide{transform:translateX(120%);opacity:0;} /* Loading skeleton */ @keyframes skeleton{0%{background-position:-200px 0;}100%{background-position:calc(200px + 100%) 0;}} .ef4-skeleton{background:linear-gradient(90deg,var(--ef4-surface) 25%,rgba(255,255,255,0.04) 50%,var(--ef4-surface) 75%);background-size:200px 100%;animation:skeleton 1.5s infinite;border-radius:8px;} /* Tooltip */ .ef4-tip{position:relative;} .ef4-tip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ef4-elevated);color:var(--ef4-text-primary);padding:4px 10px;border-radius:6px;font-size:11px;white-space:nowrap;border:1px solid var(--ef4-border);z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.3);} /* Active filters */ .ef4-active-filters{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 12px;} .ef4-filter-pill{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;background:rgba(118,204,111,0.1);border:1px solid rgba(118,204,111,0.2);color:var(--ef4-green);font-size:12px;} .ef4-filter-pill button{background:none;border:none;color:var(--ef4-green);cursor:pointer;font-size:14px;padding:0 0 0 4px;line-height:1;} .ef4-filter-pill button:hover{color:#fff;} /* Smooth page transitions */ .ef4-main{animation:fadeIn .3s ease;} /* Print styles */ @media print{ .ef4-sidebar,.ef4-mobile-toggle,.ef4-fab,.ef4-modal,.ef4-toast{display:none!important;} .ef4-main{margin-left:0!important;padding:20px!important;background:#fff!important;color:#000!important;} .ef4-card{break-inside:avoid;border:1px solid #ccc!important;background:#fff!important;} } /* ===== CSS Block 2 ===== */ /* Glassmorphism enhancement layer */ .ef4-kpi-card { background: rgba(30, 41, 59, 0.7) !important; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(148, 163, 184, 0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03); } .ef4-card { background: rgba(30, 41, 59, 0.65) !important; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); border: 1px solid rgba(148, 163, 184, 0.07); box-shadow: 0 4px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.02); } .ef4-modal-content { background: rgba(30, 41, 59, 0.92) !important; backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(148, 163, 184, 0.12); box-shadow: 0 25px 80px rgba(0,0,0,0.5); } .ef4-sidebar { background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-right: 1px solid rgba(148, 163, 184, 0.06); } .ef4-topbar { background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); border-bottom: 1px solid rgba(148, 163, 184, 0.06); } .ef4-wizard-step { background: rgba(30, 41, 59, 0.8) !important; backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); border: 1px solid rgba(148, 163, 184, 0.09); } .ef4-toast { background: rgba(30, 41, 59, 0.95) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(148, 163, 184, 0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .ef4-fab { background: rgba(56, 189, 248, 0.9) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(56, 189, 248, 0.35); } .ef4-fab:hover { background: rgba(56, 189, 248, 1) !important; box-shadow: 0 6px 28px rgba(56, 189, 248, 0.5); } .ef4-tag { background: rgba(100, 116, 139, 0.2); backdrop-filter: blur(4px); border: 1px solid rgba(100, 116, 139, 0.15); } .ef4-alert { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ef4-progress-fill { box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); } /* Subtle glow on hover for interactive cards */ .ef4-kpi-card:hover, .ef4-card:hover { border-color: rgba(56, 189, 248, 0.15); box-shadow: 0 6px 32px rgba(0,0,0,0.2), 0 0 20px rgba(56, 189, 248, 0.05), inset 0 1px 0 rgba(255,255,255,0.04); } /* Glass shimmer effect on KPI icons */ .ef4-kpi-icon { position: relative; overflow: hidden; } .ef4-kpi-icon::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%); animation: ef4-shimmer 6s ease-in-out infinite; } @keyframes ef4-shimmer { 0%, 100% { transform: translateX(-100%) rotate(45deg); } 50% { transform: translateX(100%) rotate(45deg); } } /* Wizard dot indicators */ .ef4-wizard-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 20px; } .ef4-wizard-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(100, 116, 139, 0.4); border: 2px solid rgba(100, 116, 139, 0.3); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .ef4-wizard-dot.active { background: var(--ef4-blue); border-color: var(--ef4-blue); box-shadow: 0 0 12px rgba(56, 189, 248, 0.5); transform: scale(1.2); } .ef4-wizard-dot.done { background: var(--ef4-green); border-color: var(--ef4-green); } .ef4-wizard-dot.done::after { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7px; color: #fff; font-weight: 700; } /* Connector lines between dots */ .ef4-wizard-dots::before { content: ''; position: absolute; top: 50%; left: 25%; right: 25%; height: 2px; background: linear-gradient(90deg, var(--ef4-green) var(--progress, 0%), rgba(100,116,139,0.3) var(--progress, 0%)); transform: translateY(-50%); z-index: 0; border-radius: 1px; } /* MFE/MAE input styling */ .ef4-mfe-mae-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.08); } .ef4-mfe-mae-group label { font-size: 0.78rem; color: var(--ef4-slate-400); margin-bottom: 4px; display: block; } .ef4-mfe-mae-group input { width: 100%; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 6px; background: rgba(15, 23, 42, 0.5); color: var(--ef4-text); font-size: 0.85rem; } .ef4-mfe-mae-group input:focus { outline: none; border-color: var(--ef4-blue); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1); } /* Ritual checklist styling */ .ef4-ritual-list { list-style: none; padding: 0; margin: 12px 0; } .ef4-ritual-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; margin-bottom: 4px; transition: background 0.2s; cursor: pointer; } .ef4-ritual-list li:hover { background: rgba(56, 189, 248, 0.05); } .ef4-ritual-list li.checked { opacity: 0.6; } .ef4-ritual-list li.checked span { text-decoration: line-through; color: var(--ef4-slate-500); } .ef4-ritual-checkbox { width: 18px; height: 18px; border: 2px solid var(--ef4-slate-500); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; } .ef4-ritual-checkbox.checked { background: var(--ef4-green); border-color: var(--ef4-green); } /* Deviation form modal */ .ef4-deviation-form textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px; background: rgba(15, 23, 42, 0.5); color: var(--ef4-text); font-size: 0.85rem; resize: vertical; margin-top: 8px; } .ef4-deviation-form textarea:focus { outline: none; border-color: var(--ef4-amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); } /* AI chat interface */ .ef4-ai-chat-box { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding: 12px; background: rgba(15, 23, 42, 0.4); border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.08); margin-bottom: 12px; } .ef4-ai-chat-msg { padding: 10px 14px; border-radius: 12px; max-width: 85%; font-size: 0.85rem; line-height: 1.5; animation: ef4-msgIn 0.3s ease; } @keyframes ef4-msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ef4-ai-chat-msg.user { align-self: flex-end; background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.2); color: var(--ef4-text); border-bottom-right-radius: 4px; } .ef4-ai-chat-msg.assistant { align-self: flex-start; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.1); color: var(--ef4-slate-200); border-bottom-left-radius: 4px; } .ef4-ai-chat-input-row { display: flex; gap: 8px; } .ef4-ai-chat-input-row input { flex: 1; padding: 10px 14px; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px; background: rgba(15, 23, 42, 0.5); color: var(--ef4-text); font-size: 0.85rem; } .ef4-ai-chat-input-row input:focus { outline: none; border-color: var(--ef4-purple); box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.1); } /* FOMO breakdown modal */ .ef4-fomo-breakdown-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.06); } .ef4-fomo-breakdown-item:last-child { border-bottom: none; } .ef4-fomo-bar-bg { width: 100px; height: 6px; background: rgba(100, 116, 139, 0.2); border-radius: 3px; overflow: hidden; margin-left: 10px; } .ef4-fomo-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } /* Session activate button */ .ef4-session-activate-btn { background: linear-gradient(135deg, var(--ef4-green), #059669) !important; box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3); animation: ef4-pulse-green 2s ease-in-out infinite; } @keyframes ef4-pulse-green { 0%, 100% { box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3); } 50% { box-shadow: 0 2px 20px rgba(34, 197, 94, 0.5); } } .ef4-session-active-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--ef4-green); font-size: 0.75rem; font-weight: 600; } .ef4-session-active-indicator::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ef4-green); animation: ef4-blink 1.5s ease-in-out infinite; } @keyframes ef4-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Voice recording interface */ .ef4-voice-recorder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; background: rgba(15, 23, 42, 0.4); border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.08); } /* Voice visualizer (for recording interface) */ .ef4-voice-visualizer { display: flex; align-items: flex-end; gap: 3px; height: 40px; } .ef4-voice-bar { width: 4px; background: linear-gradient(to top, var(--ef4-blue), var(--ef4-purple)); border-radius: 2px; transition: height 0.1s ease; min-height: 4px; } .ef4-voice-transcript { width: 100%; padding: 12px; border-radius: 8px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.1); color: var(--ef4-slate-300); font-size: 0.85rem; line-height: 1.5; min-height: 80px; max-height: 200px; overflow-y: auto; } /* Categorized symbol dropdown */ .ef4-symbol-dropdown { position: relative; } .ef4-symbol-dropdown .ef4-dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto; background: rgba(30, 41, 59, 0.98); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px; z-index: 100; box-shadow: 0 12px 40px rgba(0,0,0,0.4); display: none; } .ef4-symbol-dropdown.open .ef4-dropdown-menu { display: block; } .ef4-dropdown-category { padding: 6px 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ef4-slate-500); background: rgba(15, 23, 42, 0.5); border-bottom: 1px solid rgba(148, 163, 184, 0.06); } .ef4-dropdown-option { padding: 8px 12px 8px 24px; cursor: pointer; font-size: 0.82rem; color: var(--ef4-slate-300); transition: all 0.15s; } .ef4-dropdown-option:hover { background: rgba(56, 189, 248, 0.1); color: var(--ef4-text); } .ef4-dropdown-search { width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid rgba(148, 163, 184, 0.1); background: rgba(15, 23, 42, 0.5); color: var(--ef4-text); font-size: 0.8rem; outline: none; } /* ICT Setup type badges */ .ef4-ict-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .ef4-ict-bos { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.25); } .ef4-ict-choch { background: rgba(192, 132, 252, 0.15); color: #d8b4fe; border: 1px solid rgba(192, 132, 252, 0.25); } .ef4-ict-fvg { background: rgba(251, 191, 36, 0.15); color: #fcd34d; border: 1px solid rgba(251, 191, 36, 0.25); } .ef4-ict-ob { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.25); } .ef4-ict-liq { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.25); } .ef4-ict-breaker { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; border: 1px solid rgba(236, 72, 153, 0.25); } .ef4-ict-mitigation { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.25); } /* Print styles */ @media print { .ef4-sidebar, .ef4-topbar, .ef4-fab, .ef4-modal-overlay, .ef4-toast-container, .ef4-filters-bar, .ef4-action-btn, .ef4-btn-secondary, .ef4-search-box, .ef4-wizard-dots, .ef4-voice-recorder, .ef4-ai-chat-box, .ef4-action-col { display: none !important; } .ef4-main { margin-left: 0 !important; padding: 0 !important; } .ef4-kpi-card, .ef4-card { background: #fff !important; border: 1px solid #ddd !important; color: #000 !important; break-inside: avoid; box-shadow: none !important; } .ef4-card-title, .ef4-kpi-value, .ef4-text-white { color: #000 !important; } .ef4-text-green { color: #16a34a !important; } .ef4-text-red { color: #dc2626 !important; } } /* Login page styles */ .ef4-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); position: relative; overflow: hidden; } .ef4-login-wrap::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%); top: -200px; right: -200px; } .ef4-login-wrap::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(192, 132, 252, 0.06) 0%, transparent 70%); bottom: -100px; left: -100px; } .ef4-login-card { width: 100%; max-width: 420px; padding: 48px 40px; background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 16px; box-shadow: 0 25px 80px rgba(0,0,0,0.4); position: relative; z-index: 1; } .ef4-login-logo-img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 20px; display: block; filter: drop-shadow(0 4px 16px rgba(56,189,248,0.3)); animation: ef4-login-logo-float 3s ease-in-out infinite; } @keyframes ef4-login-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .ef4-login-card:hover { border-color: rgba(148, 163, 184, 0.18); box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 40px rgba(56,189,248,0.05); transform: translateY(-2px); transition: all 0.3s ease; } .ef4-login-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 4px; letter-spacing: -0.02em; } .ef4-login-subtitle { font-size: 0.85rem; color: var(--ef4-slate-500); text-align: center; margin-bottom: 28px; } .ef4-login-input { width: 100%; padding: 12px 16px; margin-bottom: 12px; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 8px; background: rgba(15, 23, 42, 0.5); color: var(--ef4-text); font-size: 0.9rem; transition: all 0.2s; } .ef4-login-input:focus { outline: none; border-color: var(--ef4-blue); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1); } .ef4-login-btn { width: 100%; padding: 12px; margin-top: 8px; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--ef4-blue), #0ea5e9); color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; } .ef4-login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35); } .ef4-login-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.5s; } .ef4-login-btn:hover::after { left: 100%; } .ef4-login-footer { text-align: center; margin-top: 20px; font-size: 0.8rem; color: var(--ef4-slate-500); } .ef4-login-footer a { color: var(--ef4-blue); text-decoration: none; font-weight: 500; } .ef4-login-footer a:hover { text-decoration: underline; } .ef4-login-error { padding: 10px 14px; border-radius: 8px; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.2); color: var(--ef4-red); font-size: 0.82rem; margin-bottom: 12px; display: none; } .ef4-login-error.show { display: block; } /* ===== CSS Block 3 ===== */ .ef4-recent-trade-row { cursor: pointer; transition: background 0.15s; } .ef4-recent-trade-row:hover { background: rgba(56, 189, 248, 0.04) !important; } .ef4-recent-trade-row:hover td { color: var(--ef4-text) !important; } /* Wizard step enhanced transitions */ .ef4-wizard-step { transition: opacity 0.3s ease, transform 0.3s ease; } /* Enhanced emotion selector with icons */ #wz-emotion option[value="calm"] { background: rgba(34,197,94,0.1); } #wz-emotion option[value="confident"] { background: rgba(56,189,248,0.1); } #wz-emotion option[value="anxious"] { background: rgba(251,191,36,0.1); } #wz-emotion option[value="frustrated"] { background: rgba(248,113,113,0.1); } #wz-emotion option[value="fomo"] { background: rgba(251,191,36,0.2); color: #b45309; } #wz-emotion option[value="revenge"] { background: rgba(248,113,113,0.2); color: #991b1b; } #wz-emotion option[value="overconfident"] { background: rgba(192,132,252,0.1); } #wz-emotion option[value="hesitant"] { background: rgba(148,163,184,0.1); } /* ===== CSS Block 4 ===== */ /* Card entrance animations */ @keyframes ef4-slideInDown { from { opacity: 0; transform: translateY(-20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ef4-slideInUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ef4-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ef4-fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } } @keyframes ef4-pulseSuccess { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @keyframes ef4-shimmerSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes ef4-rowFlash { 0% { background: rgba(56, 189, 248, 0.15); } 100% { background: transparent; } } .ef4-card-enter { animation: ef4-slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ef4-card-exit { animation: ef4-fadeOut 0.3s ease forwards; } .ef4-card-update { animation: ef4-pulseSuccess 0.6s ease; } .ef4-row-enter { animation: ef4-slideInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .ef4-row-flash { animation: ef4-rowFlash 1.2s ease-out forwards; } .ef4-kpi-pop { animation: ef4-pulseSuccess 0.5s ease; } /* Skeleton shimmer for loading states */ .ef4-skeleton-shimmer { background: linear-gradient(90deg, rgba(100,116,139,0.08) 25%, rgba(100,116,139,0.15) 50%, rgba(100,116,139,0.08) 75%); background-size: 200% 100%; animation: ef4-shimmerSweep 1.5s infinite; border-radius: 4px; } /* Smooth number transitions */ .ef4-kpi-value { transition: color 0.3s ease; } /* Strategy card active/inactive transition */ .ef4-strat-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .ef4-strat-card.archived { opacity: 0.5; filter: grayscale(0.6); } /* Goal card completed state */ .ef4-goal-card.completed .ef4-goal-title { text-decoration: line-through; color: var(--ef4-slate-500); } .ef4-goal-card.completed { opacity: 0.7; } /* Progress bar smooth fill */ .ef4-progress-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Backtest status badge transitions */ .ef4-badge { transition: all 0.3s ease; } /* Table row hover enhancement */ .ef4-trades-table__row { transition: background 0.15s, opacity 0.3s, transform 0.3s; } .ef4-trades-table__row.removing { opacity: 0; transform: translateX(-20px); } /* Modal close instant */ .ef4-modal-overlay.closing { opacity: 0; transition: opacity 0.2s ease; } .ef4-modal-content.closing { transform: scale(0.95); opacity: 0; transition: all 0.2s ease; } /* Toast stack refinement */ .ef4-toast-container { transition: all 0.3s ease; } /* Live update indicator */ .ef4-live-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); color: var(--ef4-green); font-size: 0.72rem; font-weight: 600; animation: ef4-fadeIn 0.3s ease; } .ef4-live-indicator::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ef4-green); animation: ef4-blink 1.2s ease-in-out infinite; } /* ===== CSS Block 5 ===== */ .rule-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);}.rule-row input{flex:1;}.rule-row select{width:120px;}.rule-cat-entry{background:rgba(59,130,246,0.1);border-left:3px solid var(--ef4-blue);}.rule-cat-exit{background:rgba(255,61,90,0.1);border-left:3px solid var(--ef4-red);}.rule-cat-risk{background:rgba(139,92,246,0.1);border-left:3px solid var(--ef4-purple);}.rule-cat-filter{background:rgba(174,243,31,0.1);border-left:3px solid var(--ef4-green);}.rule-cat-psych{background:rgba(6,182,212,0.1);border-left:3px solid var(--ef4-cyan);} /* ===== CSS Block 6 ===== */ /* ===== Palette: DashBite-inspired dark + lime ===== */ /* Only apply to explicit dark theme or body without light-mode class */ html, body, body.ef4-page { --ef4-bg: #0a0d14 !important; --ef4-bg-elevated: #11151f !important; --ef4-surface: #161b27 !important; --ef4-surface-solid: #1a2030 !important; --ef4-surface-hover: #1f2738 !important; --ef4-surface-glass: rgba(22, 27, 39, 0.7) !important; --ef4-border: rgba(255, 255, 255, 0.06) !important; --ef4-border-hover: rgba(174, 243, 31, 0.20) !important; --ef4-border-soft: rgba(255, 255, 255, 0.04) !important; --ef4-green: #AEF31F !important; --ef4-green-dim: rgba(174, 243, 31, 0.12) !important; --ef4-green-glow: rgba(174, 243, 31, 0.35) !important; --ef4-red: #ff3d5a !important; --ef4-red-dim: rgba(255, 61, 90, 0.12) !important; --ef4-red-glow: rgba(255, 61, 90, 0.35) !important; --ef4-purple: #8b5cf6 !important; --ef4-purple-dim: rgba(139, 92, 246, 0.12) !important; --ef4-pink: #ec4899 !important; --ef4-pink-dim: rgba(236, 72, 153, 0.12) !important; --ef4-cyan: #06b6d4 !important; --ef4-cyan-dim: rgba(6, 182, 212, 0.12) !important; --ef4-orange: #f97316 !important; --ef4-orange-dim: rgba(249, 115, 22, 0.12) !important; --ef4-amber: #f59e0b !important; --ef4-amber-dim: rgba(245, 158, 11, 0.12) !important; --ef4-blue: #3b82f6 !important; --ef4-blue-dim: rgba(59, 130, 246, 0.12) !important; --ef4-yellow: #facc15 !important; --ef4-text-primary: #f8fafc !important; --ef4-text-secondary: rgba(248, 250, 252, 0.72) !important; --ef4-text-muted: rgba(248, 250, 252, 0.45) !important; --ef4-radius: 16px !important; --ef4-radius-sm: 10px !important; --ef4-radius-lg: 20px !important; } /* ===== Body ===== */ html, body, body.ef4-page { background: #0a0d14 !important; background-image: radial-gradient(ellipse 60% 40% at top left, rgba(174, 243, 31, 0.05), transparent 60%), radial-gradient(ellipse 60% 40% at top right, rgba(139, 92, 246, 0.05), transparent 60%) !important; background-attachment: fixed !important; color: #f8fafc !important; margin: 0 !important; min-height: 100vh !important; } /* Light mode body background override — equal specificity + !important to win */ body.ef4-light-mode, body.ef4-light-mode.ef4-page { background: #f8fafc !important; background-image: none !important; color: #0f172a !important; } /* Hide host theme chrome */ body.ef4-page .site-header, body.ef4-public-page .site-header, body.ef4-page .site-footer, body.ef4-public-page .site-footer, body.ef4-page .wp-site-blocks > header, body.ef4-page .wp-site-blocks > footer, body.ef4-page .entry-header, body.ef4-page .entry-footer, body.ef4-page .post-thumbnail, body.ef4-page .page-title, body.ef4-page .entry-title, body.ef4-public-page .entry-title, body.ef4-page .breadcrumbs, body.ef4-page .yoast-breadcrumbs, body.ef4-page .wp-block-template-part { display: none !important; } body.ef4-page .entry-content, body.ef4-page .site-main, body.ef4-page main:not(.ef4-main), body.ef4-page article, body.ef4-page .wp-site-blocks, body.ef4-page .is-layout-constrained, body.ef4-page .is-layout-flow { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ===== Layout shell ===== */ .ef4-wrap { background: var(--ef4-bg); min-height: 100vh; color: var(--ef4-text-primary); } .ef4-layout { display: flex !important; flex-direction: row !important; min-height: 100vh !important; gap: 0 !important; align-items: stretch !important; } /* ===== Sidebar ===== */ .ef4-sidebar { display: flex !important; flex-direction: column !important; width: 220px !important; /* CRITICAL: position:fixed removes sidebar from flex flow — prevents gap */ position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; background: linear-gradient(180deg, #0d111a 0%, #0a0d14 100%) !important; border-right: 1px solid rgba(255, 255, 255, 0.04) !important; padding: 22px 14px !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; z-index: 100 !important; } .ef4-sidebar::-webkit-scrollbar { width: 4px; } .ef4-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 4px; } .ef4-sidebar-header { padding: 0 8px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; margin-bottom: 12px !important; } .ef4-logo { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 16px !important; font-weight: 700 !important; color: #f8fafc !important; text-decoration: none !important; letter-spacing: -0.01em !important; } .ef4-logo-mark { width: 28px !important; height: 28px !important; flex-shrink: 0 !important; } .ef4-sidebar-nav { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .ef4-nav-section { display: flex !important; flex-direction: column !important; gap: 1px !important; margin-bottom: 14px !important; } .ef4-nav-label { font-size: 9px !important; font-weight: 700 !important; color: rgba(248, 250, 252, 0.35) !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; padding: 0 12px 8px !important; } .ef4-nav-link { display: flex !important; align-items: center !important; gap: 11px !important; padding: 9px 12px !important; color: rgba(248, 250, 252, 0.6) !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 9px !important; text-decoration: none !important; transition: all 0.15s ease !important; background: transparent !important; border: 1px solid transparent !important; } .ef4-nav-link:hover { background: rgba(174, 243, 31, 0.05) !important; color: #f8fafc !important; } .ef4-nav-link.active { background: linear-gradient(90deg, rgba(174, 243, 31, 0.15), rgba(174, 243, 31, 0.04)) !important; color: #AEF31F !important; border-color: rgba(174, 243, 31, 0.18) !important; } .ef4-nav-link svg { width: 17px !important; height: 17px !important; flex-shrink: 0 !important; stroke-width: 1.8 !important; } .ef4-sidebar-footer { padding: 12px 8px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.04) !important; margin-top: 8px !important; } .ef4-user-mini { display: flex !important; align-items: center !important; gap: 10px !important; } .ef4-user-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #AEF31F, #8b5cf6) !important; color: #0a0d14 !important; font-weight: 700 !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ef4-user-name { font-size: 12px !important; font-weight: 600 !important; color: #f8fafc !important; } .ef4-user-role { font-size: 10px !important; color: rgba(248, 250, 252, 0.45) !important; margin-top: 1px !important; } .ef4-mobile-toggle { display: none !important; position: fixed !important; top: 16px !important; left: 16px !important; width: 40px !important; height: 40px !important; background: var(--ef4-surface-solid) !important; border: 1px solid var(--ef4-border) !important; border-radius: 10px !important; color: #f8fafc !important; cursor: pointer !important; z-index: 1001 !important; align-items: center !important; justify-content: center !important; } .ef4-mobile-toggle svg { width: 20px !important; height: 20px !important; stroke: currentColor !important; stroke-width: 2 !important; fill: none !important; } /* ===== Main — desktop only; mobile overrides in @media (max-width: 768px) ===== */ @media (min-width: 769px) { .ef4-main { flex: 1 !important; min-width: 0 !important; margin-left: 220px !important; padding: 26px 32px 26px 20px !important; background: transparent !important; } } .ef4-container { max-width: none !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } /* ===== Page header ===== */ .ef4-page-header { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 14px !important; margin-bottom: 24px !important; padding: 0 !important; background: transparent !important; } .ef4-page-title-group { flex: 1; min-width: 0; } .ef4-h1 { color: #f8fafc !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 0 4px !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } .ef4-page-subtitle { color: rgba(248, 250, 252, 0.5) !important; font-size: 13px !important; margin: 0 !important; } /* ===== Buttons ===== */ .ef4-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 10px 16px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.18s ease !important; border: 1px solid transparent !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; font-family: inherit !important; } .ef4-btn-primary { background: linear-gradient(135deg, #AEF31F 0%, #8fd400 100%) !important; color: #0a0d14 !important; box-shadow: 0 4px 16px rgba(174, 243, 31, 0.22) !important; border: none !important; } .ef4-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(174, 243, 31, 0.35) !important; } .ef4-btn-ghost, .ef4-btn-secondary { background: rgba(255, 255, 255, 0.04) !important; color: rgba(248, 250, 252, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; } .ef4-btn-ghost:hover, .ef4-btn-secondary:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(174, 243, 31, 0.20) !important; color: #f8fafc !important; } .ef4-btn-sm { padding: 8px 13px !important; font-size: 12px !important; } .ef4-btn-lg { padding: 12px 22px !important; font-size: 14px !important; } .ef4-btn svg { stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; } /* ===== KPI Grid (4 columns desktop, true grid) ===== */ .ef4-kpi-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 20px !important; } .ef4-kpi-card { position: relative !important; background: linear-gradient(145deg, #161b27 0%, #11151f 100%) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; padding: 18px !important; overflow: hidden !important; transition: all 0.25s ease !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } .ef4-kpi-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: linear-gradient(90deg, transparent, #AEF31F, #8b5cf6, transparent) !important; opacity: 0.7 !important; } .ef4-kpi-card:hover { transform: translateY(-2px) !important; border-color: rgba(174, 243, 31, 0.18) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px rgba(174, 243, 31, 0.08) !important; } .ef4-kpi-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; } .ef4-kpi-label { color: rgba(248, 250, 252, 0.55) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; } .ef4-kpi-icon { width: 32px !important; height: 32px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ef4-kpi-icon svg { width: 16px !important; height: 16px !important; stroke-width: 2 !important; fill: none !important; stroke: currentColor !important; } .ef4-kpi-icon.green { background: rgba(174, 243, 31, 0.12) !important; color: #AEF31F !important; } .ef4-kpi-icon.red { background: rgba(255, 61, 90, 0.12) !important; color: #ff3d5a !important; } .ef4-kpi-icon.blue { background: rgba(59, 130, 246, 0.12) !important; color: #3b82f6 !important; } .ef4-kpi-icon.purple { background: rgba(139, 92, 246, 0.12) !important; color: #8b5cf6 !important; } .ef4-kpi-icon.pink { background: rgba(236, 72, 153, 0.12) !important; color: #ec4899 !important; } .ef4-kpi-icon.orange { background: rgba(249, 115, 22, 0.12) !important; color: #f97316 !important; } .ef4-kpi-icon.cyan { background: rgba(6, 182, 212, 0.12) !important; color: #06b6d4 !important; } .ef4-kpi-icon.amber, .ef4-kpi-icon.yellow { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; } .ef4-kpi-value { font-size: 28px !important; font-weight: 700 !important; color: #f8fafc !important; line-height: 1.1 !important; margin-bottom: 5px !important; letter-spacing: -0.02em !important; font-variant-numeric: tabular-nums !important; } .ef4-kpi-change { font-size: 11px !important; color: rgba(248, 250, 252, 0.55) !important; font-weight: 500 !important; } .ef4-kpi-change.up { color: #AEF31F !important; } .ef4-kpi-change.down { color: #ff3d5a !important; } /* ===== Cards ===== */ .ef4-card { background: linear-gradient(145deg, #161b27 0%, #11151f 100%) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; overflow: hidden !important; transition: border-color 0.25s ease !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } .ef4-card:hover { border-color: rgba(174, 243, 31, 0.10) !important; } .ef4-card-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } .ef4-card-title { color: #f8fafc !important; font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; } .ef4-card-subtitle { color: rgba(248, 250, 252, 0.45) !important; font-size: 12px !important; margin: 2px 0 0 !important; } /* ===== Grids ===== */ .ef4-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 14px !important; } .ef4-grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 14px !important; } .ef4-grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 14px !important; } .ef4-winners-losers { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .ef4-freq-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } /* ===== Chart container ===== */ .ef4-chart-container { position: relative; padding: 12px 0 4px; height: 260px; background: transparent; overflow: visible; } .ef4-chart-container canvas { width: 100% !important; height: 100% !important; display: block !important; } /* ===== Empty / placeholder ===== */ .ef4-empty { text-align: center !important; padding: 40px 20px !important; color: rgba(248, 250, 252, 0.5) !important; } .ef4-empty-title { color: rgba(248, 250, 252, 0.7) !important; font-size: 14px !important; font-weight: 600 !important; margin: 0 0 4px !important; } .ef4-empty-desc { font-size: 12px !important; color: rgba(248, 250, 252, 0.4) !important; margin: 0 !important; } /* ===== Form / Input ===== */ .ef4-input, .ef4-select, .ef4-textarea { width: 100% !important; background: rgba(15, 23, 42, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 10px !important; padding: 11px 14px !important; color: #f8fafc !important; font-size: 13px !important; font-family: inherit !important; transition: all 0.18s ease !important; box-sizing: border-box !important; } .ef4-input:focus, .ef4-select:focus, .ef4-textarea:focus { outline: none !important; border-color: rgba(174, 243, 31, 0.5) !important; background: rgba(15, 23, 42, 0.85) !important; box-shadow: 0 0 0 3px rgba(174, 243, 31, 0.10) !important; } .ef4-input::placeholder, .ef4-textarea::placeholder { color: rgba(248, 250, 252, 0.3) !important; } /* Light mode input overrides */ body.ef4-light-mode .ef4-input, body.ef4-light-mode .ef4-select, body.ef4-light-mode .ef4-textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #0f172a !important; } body.ef4-light-mode .ef4-input:focus, body.ef4-light-mode .ef4-select:focus, body.ef4-light-mode .ef4-textarea:focus { background: #ffffff !important; border-color: rgba(174, 243, 31, 0.5) !important; box-shadow: 0 0 0 3px rgba(174, 243, 31, 0.10) !important; } body.ef4-light-mode .ef4-input::placeholder, body.ef4-light-mode .ef4-textarea::placeholder { color: rgba(15, 23, 42, 0.4) !important; } body.ef4-light-mode .ef4-label { color: #4a5540 !important; } .ef4-label { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: rgba(248, 250, 252, 0.7) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 6px !important; } .ef4-form-group { margin-bottom: 14px !important; } /* ===== Modal ===== */ .ef4-modal-body, .ef4-modal-wrap, .ef4-modal-content { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } .ef4-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; opacity: 0 !important; transition: opacity 0.25s ease !important; } .ef4-modal-overlay.active { opacity: 1 !important; } .ef4-modal { background: linear-gradient(160deg, #1a2030 0%, #11151f 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; max-width: 560px !important; width: 100% !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; transform: scale(0.95) !important; transition: transform 0.25s ease !important; z-index: 10000 !important; } .ef4-modal-overlay.active .ef4-modal { transform: scale(1) !important; } .ef4-modal-lg { max-width: 720px !important; } .ef4-modal-xl { max-width: 920px !important; } .ef4-modal-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 20px 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; flex-shrink: 0 !important; } .ef4-modal-title { font-size: 17px !important; font-weight: 700 !important; color: #f8fafc !important; margin: 0 !important; } .ef4-modal-close { background: rgba(255, 255, 255, 0.04) !important; border: none !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; color: rgba(248, 250, 252, 0.6) !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; transition: all 0.15s !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ef4-modal-close:hover { background: rgba(255, 61, 90, 0.12) !important; color: #ff3d5a !important; } .ef4-modal-body { padding: 22px 24px !important; overflow-y: auto !important; flex: 1 !important; } .ef4-modal-body::-webkit-scrollbar { width: 6px; } .ef4-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; } /* ===== Trade wizard stepper ===== */ .ef4-stepper { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 24px !important; padding: 0 8px !important; } .ef4-step { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } .ef4-step-dot { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.05) !important; border: 2px solid rgba(255, 255, 255, 0.08) !important; color: rgba(248, 250, 252, 0.5) !important; font-weight: 700 !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; } .ef4-step.active .ef4-step-dot { background: linear-gradient(135deg, #AEF31F, #8fd400) !important; border-color: #AEF31F !important; color: #0a0d14 !important; box-shadow: 0 0 0 4px rgba(174, 243, 31, 0.18) !important; } .ef4-step.completed .ef4-step-dot { background: rgba(174, 243, 31, 0.18) !important; border-color: rgba(174, 243, 31, 0.4) !important; color: #AEF31F !important; } .ef4-step-label { font-size: 10px !important; font-weight: 600 !important; color: rgba(248, 250, 252, 0.5) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .ef4-step.active .ef4-step-label { color: #AEF31F !important; } .ef4-step-line { flex: 1 !important; height: 2px !important; background: rgba(255, 255, 255, 0.05) !important; margin: 0 8px !important; max-width: 60px !important; transform: translateY(-9px) !important; } .ef4-step.completed + .ef4-step-line { background: rgba(174, 243, 31, 0.4) !important; } /* Wizard form: tight grid, full-width direction buttons */ #ef4-wizard .ef4-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 0 !important; } #ef4-wizard .ef4-form-group { margin-bottom: 16px !important; } #ef4-wizard .ef4-form-group:last-child { margin-bottom: 0 !important; } @media (max-width: 640px) { #ef4-wizard .ef4-grid-2 { grid-template-columns: 1fr !important; } } /* Direction buttons should look like a segmented control */ #wbtn_long, #wbtn_short { padding: 12px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; } /* Quality A+/A/B/C buttons */ [data-quality] { padding: 8px 14px !important; min-width: 50px !important; font-weight: 700 !important; } /* Emotion pills */ [data-emotion] { padding: 7px 14px !important; border-radius: 18px !important; font-size: 12px !important; } [data-emotion].active { background: linear-gradient(135deg, #AEF31F, #8fd400) !important; color: #0a0d14 !important; border-color: transparent !important; } /* Dropzone */ .ef4-dropzone { border: 2px dashed rgba(174, 243, 31, 0.20) !important; border-radius: 12px !important; padding: 24px !important; text-align: center !important; cursor: pointer !important; transition: all 0.2s !important; background: rgba(174, 243, 31, 0.02) !important; } .ef4-dropzone:hover { border-color: rgba(174, 243, 31, 0.40) !important; background: rgba(174, 243, 31, 0.06) !important; } /* Checklist */ .ef4-checklist { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .ef4-checklist li { display: flex !important; align-items: center !important; gap: 12px !important; padding: 11px 14px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: 10px !important; cursor: pointer !important; font-size: 13px !important; color: rgba(248, 250, 252, 0.8) !important; transition: all 0.15s !important; } .ef4-checklist li:hover { background: rgba(255, 255, 255, 0.04) !important; } .ef4-checklist li.checked { background: rgba(174, 243, 31, 0.06) !important; border-color: rgba(174, 243, 31, 0.20) !important; color: #f8fafc !important; } .ef4-checklist li.done { background: rgba(174, 243, 31, 0.06) !important; border-color: rgba(174, 243, 31, 0.20) !important; color: #f8fafc !important; } .ef4-check { width: 20px !important; height: 20px !important; border: 2px solid rgba(255, 255, 255, 0.15) !important; border-radius: 6px !important; flex-shrink: 0 !important; position: relative !important; transition: all 0.18s !important; } .ef4-checklist li.checked .ef4-check { background: #AEF31F !important; border-color: #AEF31F !important; } .ef4-checklist li.checked .ef4-check::after { content: '' !important; position: absolute !important; left: 5px !important; top: 1px !important; width: 6px !important; height: 11px !important; border: solid #0a0d14 !important; border-width: 0 2.5px 2.5px 0 !important; transform: rotate(45deg) !important; } .ef4-checklist li.done .ef4-check { background: #AEF31F !important; border-color: #AEF31F !important; } .ef4-checklist li.done .ef4-check::after { content: '' !important; position: absolute !important; left: 5px !important; top: 1px !important; width: 6px !important; height: 11px !important; border: solid #0a0d14 !important; border-width: 0 2.5px 2.5px 0 !important; transform: rotate(45deg) !important; } /* Progress bar */ .ef4-progress { height: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; overflow: hidden !important; } .ef4-progress-fill { height: 100% !important; border-radius: 8px !important; background: linear-gradient(90deg, #AEF31F, #8fd400) !important; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .ef4-progress-fill.green { background: linear-gradient(90deg, #AEF31F, #8fd400) !important; } .ef4-progress-fill.red { background: linear-gradient(90deg, #ff3d5a, #d62a45) !important; } /* ===== Toggle switch (settings panel) ===== */ /* (Inline-styled in saveWidgets, but ensure base sizing) */ /* ===== Calendar heatmap container fix ===== */ #pnlCalendarHeatmap { color: #f8fafc !important; } /* ===== Tilt gauge ===== */ .ef4-gauge { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; padding: 16px !important; } .ef4-gauge canvas { max-width: 200px !important; max-height: 110px !important; } .ef4-gauge-label { font-size: 12px !important; color: rgba(248, 250, 252, 0.6) !important; text-align: center !important; } /* ===== Donut center value ===== */ .ef4-donut-value { font-size: 22px; font-weight: 700; color: var(--ef4-text-primary); } .ef4-donut-label { font-size: 11px; color: var(--ef4-text-muted); } /* ===== Sessions overview cards ===== */ .ef4-session-card { background: linear-gradient(145deg, #161b27 0%, #11151f 100%) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 14px !important; padding: 18px !important; transition: all 0.22s ease !important; } .ef4-session-card:hover { transform: translateY(-2px) !important; border-color: rgba(174, 243, 31, 0.18) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important; } /* ===== Toast ===== */ .ef4-toast { position: fixed !important; bottom: 24px !important; right: 24px !important; padding: 14px 20px !important; background: var(--ef4-surface-solid) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 10px !important; color: #f8fafc !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; z-index: 10000 !important; animation: ef4-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .ef4-toast.success { border-color: rgba(174,243,31,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(174,243,31,0.35) !important; } .ef4-toast.error { border-color: rgba(255,61,90,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,61,90,0.15) !important; } @keyframes ef4-toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== Scrollbar global ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(174, 243, 31, 0.12); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(174, 243, 31, 0.25); } ::selection { background: rgba(174, 243, 31, 0.3); color: #fff; } /* ===== Color helper classes ===== */ .ef4-text-green, .ef4-pnl-green { color: #AEF31F !important; } .ef4-text-red, .ef4-pnl-red { color: #ff3d5a !important; } .ef4-text-purple { color: #8b5cf6 !important; } .ef4-text-blue { color: #3b82f6 !important; } .ef4-text-amber, .ef4-text-yellow { color: #f59e0b !important; } .ef4-text-cyan { color: #06b6d4 !important; } .ef4-text-pink { color: #ec4899 !important; } .ef4-text-muted { color: rgba(248, 250, 252, 0.45) !important; } /* ===== Responsive ===== */ @media (max-width: 1280px) { .ef4-sidebar { width: 220px !important; } .ef4-main { padding: 22px 24px !important; } .ef4-kpi-grid { gap: 12px !important; } } @media (max-width: 1024px) { .ef4-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ef4-grid-3, .ef4-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ef4-freq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { .ef4-layout { flex-direction: column !important; } .ef4-sidebar { position: fixed !important; top: 0 !important; left: -260px !important; width: 260px !important; height: 100vh !important; z-index: 1000 !important; transition: left 0.28s ease !important; } .ef4-sidebar.mobile-open { left: 0 !important; box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important; } .ef4-mobile-toggle { display: flex !important; } .ef4-main { padding: 70px 14px 20px !important; } .ef4-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .ef4-grid-2, .ef4-grid-3, .ef4-grid-4, .ef4-winners-losers { grid-template-columns: 1fr !important; } .ef4-freq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .ef4-h1 { font-size: 20px !important; } .ef4-kpi-value { font-size: 22px !important; } .ef4-page-header { flex-direction: column !important; align-items: flex-start !important; } } @media (max-width: 480px) { .ef4-kpi-grid { grid-template-columns: 1fr !important; } .ef4-freq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ===== FORCE WHITE TEXT ON DARK SURFACES ===== */ /* These override any light-theme text-color overrides for dark-bg elements */ /* Scoped to dark mode only — does NOT apply when body.ef4-light-mode is active */ body:not(.ef4-light-mode) .ef4-kpi-card, body:not(.ef4-light-mode) .ef4-card, body:not(.ef4-light-mode) .ef4-session-card, body:not(.ef4-light-mode) .ef4-strat-card, body:not(.ef4-light-mode) .ef4-page, body:not(.ef4-light-mode) .ef4-modal-content, body:not(.ef4-light-mode) .ef4-sidebar { --ef4-text-primary: #f8fafc !important; --ef4-text-secondary: rgba(255,255,255,0.70) !important; --ef4-text-muted: rgba(255,255,255,0.50) !important; } body:not(.ef4-light-mode) .ef4-kpi-card .ef4-kpi-value, body:not(.ef4-light-mode) .ef4-kpi-card .ef4-kpi-label, body:not(.ef4-light-mode) .ef4-card .ef4-card-title, body:not(.ef4-light-mode) .ef4-card .ef4-card-subtitle, body:not(.ef4-light-mode) .ef4-page .ef4-h1, body:not(.ef4-light-mode) .ef4-page .ef4-h2, body:not(.ef4-light-mode) .ef4-page .ef4-h3, body:not(.ef4-light-mode) .ef4-page .ef4-page-subtitle { color: var(--ef4-text-primary) !important; } /* Specific fix for KPI subtitle/muted text */ body:not(.ef4-light-mode) .ef4-kpi-card .ef4-kpi-change, body:not(.ef4-light-mode) .ef4-kpi-card .ef4-kpi-detail, body:not(.ef4-light-mode) .ef4-card .ef4-card-subtitle { color: var(--ef4-text-muted) !important; } /* ===== END WHITE TEXT FIX ===== */ /* Prevent double-tap zoom on all interactive elements */ .ef4-btn, .ef4-step, [data-modal-close], [data-wiz-next], [data-wiz-prev], [data-dir], [data-quality], [data-outcome], [data-check], [data-emotion], [data-mistake], .ef4-checklist li, .ef4-nav-item, .ef4-session-chip, .ef4-strategy-card, .ef4-rule-item, .ef4-toggle-switch, .ef4-page-header-btn, #sessionDropdownMenu a, .ef4-mobile-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* :active states for touch feedback (mirrors :hover) */ .ef4-btn:active { transform: translateY(1px); } .ef4-btn-primary:active { background: #8bd41a; box-shadow: 0 0 12px rgba(174,243,31,0.3); } .ef4-btn-secondary:active { background: rgba(174,243,31,0.18); color: #AEF31F; } .ef4-btn-danger:active { background: #ff1f42; } .ef4-nav-item:active { background: rgba(174,243,31,0.12); color: #AEF31F; } .ef4-session-chip:active { background: rgba(174,243,31,0.15); transform: translateY(-1px); } .ef4-strategy-card:active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .ef4-rule-item:active { border-color: rgba(174,243,31,0.3); } .ef4-checklist li:active { background: rgba(174,243,31,0.06); } #sessionDropdownMenu a:active { background: rgba(174,243,31,0.12); } /* Modal scroll lock for iOS */ .ef4-modal-overlay { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ef4-modal { overscroll-behavior: contain; } /* Prevent horizontal scroll on mobile */ body.ef4-loaded { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Mobile safe area for notched devices */ @supports (padding-top: env(safe-area-inset-top)) { @media (max-width: 768px) { .ef4-modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .ef4-page { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } } /* Ensure modals don't overflow small screens */ @media (max-width: 480px) { .ef4-modal-lg, .ef4-modal-xl, .ef4-modal { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; border-radius: 0 !important; height: 100vh !important; max-height: 100vh !important; } .ef4-modal-overlay { padding: 0 !important; align-items: flex-start !important; } } /* Wizard step buttons: larger touch targets on mobile */ @media (max-width: 768px) { .ef4-step { min-height: 44px; min-width: 44px; } [data-dir], [data-quality], [data-outcome] { min-height: 44px; } .ef4-checklist li { min-height: 44px; padding: 12px 14px; } } /* Session dropdown: prevent off-screen on all mobile sizes */ @media (max-width: 768px) { #sessionDropdownMenu { position: fixed !important; top: 56px !important; left: 12px !important; right: 12px !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 80px) !important; overflow-y: auto !important; } } /* Fix potential overflow from large fixed-width elements */ @media (max-width: 768px) { .ef4-chart-container, .ef4-canvas-container { max-width: 100% !important; overflow-x: hidden !important; } canvas { max-width: 100% !important; } } /* ===== DASHBOARD GRID SYSTEM ===== */ .ef4-grid-2 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 20px !important; } .ef4-grid-3 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 20px !important; } .ef4-grid-4 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 20px !important; } .ef4-grid-2 > .ef4-card, .ef4-grid-3 > .ef4-card, .ef4-grid-4 > .ef4-card { margin-bottom: 0 !important; } @media (max-width: 768px) { .ef4-grid-2, .ef4-grid-3, .ef4-grid-4 { grid-template-columns: 1fr !important; } } /* ===== END GRID SYSTEM ===== */ .ef4-grid-2, .ef4-grid-3, .ef4-grid-4 { margin-bottom: 20px; } /* ===== WIZARD FIXES ===== */ /* Win button — green background */ .ef4-btn-success { background: var(--ef4-green) !important; color: #0a0f1a !important; border-color: var(--ef4-green) !important; font-weight: 600 !important; } /* White datetime-local calendar icon */ .ef4-input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } /* White date input calendar icon */ .ef4-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } /* Outcome button selected states */ .ef4-outcome-btn.win.selected, .ef4-outcome-btn.win.ef4-btn-success { background: var(--ef4-green) !important; color: #0a0f1a !important; border-color: var(--ef4-green) !important; } .ef4-outcome-btn.loss.selected, .ef4-outcome-btn.loss.ef4-btn-danger { background: var(--ef4-red) !important; color: #fff !important; border-color: var(--ef4-red) !important; } /* Stepper dots clickable cursor */ .ef4-step-dot { cursor: pointer; } .ef4-step-dot:hover { transform: scale(1.15); } /* Voice input button styling */ [data-voice] { background: rgba(174, 243, 31, 0.1) !important; border-color: var(--ef4-green) !important; color: var(--ef4-green) !important; } [data-voice]:hover { background: rgba(174, 243, 31, 0.2) !important; } /* Screenshot preview area */ #screenshotPreview { margin-top: 12px; border-radius: 8px; overflow: hidden; border: 1px dashed rgba(255, 255, 255, 0.1); max-height: 200px; } #screenshotPreview img { max-width: 100%; max-height: 200px; display: block; object-fit: contain; } /* More field spacing in wizard */ #ef4-wizard .ef4-form-group + .ef4-form-group { margin-top: 4px; } /* Strategy dropdown in wizard */ .ef4-strategy-select option { background: #111827; color: #f8fafc; padding: 8px; } /* Setup type dropdown styling */ .ef4-setup-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AEF31F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px !important; } /* ===== STYLED DROPDOWNS (replaces grey browser defaults) ===== */ .ef4-select, select.ef4-input, .ef4-dropdown { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AEF31F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 40px !important; background-color: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important; color: #f8fafc !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; } .ef4-select:focus, select.ef4-input:focus, .ef4-dropdown:focus { border-color: rgba(174, 243, 31, 0.4) !important; box-shadow: 0 0 0 3px rgba(174, 243, 31, 0.1) !important; outline: none !important; } .ef4-select:hover, select.ef4-input:hover, .ef4-dropdown:hover { border-color: rgba(174, 243, 31, 0.25) !important; background-color: rgba(255, 255, 255, 0.05) !important; } /* Dropdown options */ .ef4-select option, select.ef4-input option { background: #0B0F19 !important; color: #f8fafc !important; padding: 10px 14px !important; font-size: 14px !important; } .ef4-select option:hover, select.ef4-input option:hover { background: rgba(174, 243, 31, 0.15) !important; } /* Multiple select */ .ef4-select[multiple], select.ef4-input[multiple] { background-image: none !important; padding-right: 14px !important; } /* Small dropdowns */ .ef4-select-sm, select.ef4-input-sm { padding: 8px 32px 8px 12px !important; font-size: 13px !important; background-position: right 10px center !important; } /* ===== COLOR ASSIGNMENT SYSTEM ===== */ :root { --ef4-palette-1: #AEF31F; --ef4-palette-2: #3B82F6; --ef4-palette-3: #F59E0B; --ef4-palette-4: #EC4899; --ef4-palette-5: #06B6D4; --ef4-palette-6: #8B5CF6; --ef4-palette-7: #EF4444; --ef4-palette-8: #10B981; --ef4-palette-9: #F97316; --ef4-palette-10: #6366F1; --ef4-palette-11: #D946EF; --ef4-palette-12: #84CC16; } /* Color picker in modals */ .ef4-color-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; } .ef4-color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; position: relative; } .ef4-color-dot:hover { transform: scale(1.15); } .ef4-color-dot.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); transform: scale(1.1); } .ef4-color-dot.selected::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #fff; border-radius: 50%; } /* Card color accent */ .ef4-card[data-color] { border-left: 3px solid var(--card-color, var(--ef4-border)) !important; } .ef4-session-card[data-color], .ef4-strat-card[data-color] { border-top: 3px solid var(--card-color, var(--ef4-border)) !important; } /* Chart legend */ .ef4-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 12px; padding: 8px 0; } .ef4-chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ef4-text-muted); cursor: pointer; transition: opacity 0.2s; } .ef4-chart-legend-item:hover { opacity: 0.8; } .ef4-chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .ef4-chart-legend-item.hidden { opacity: 0.3; text-decoration: line-through; } /* Session/Strategy chip with color */ .ef4-session-chip[data-color], .ef4-strategy-chip[data-color] { background: rgba(255,255,255,0.02); border: 1px solid var(--chip-color, rgba(255,255,255,0.06)); } /* ===== USER DROPDOWN MENU ===== */ .ef4-user-dropdown { position: relative; } .ef4-user-mini { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: background 0.2s; user-select: none; } .ef4-user-mini:hover { background: rgba(255, 255, 255, 0.04); } .ef4-user-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .ef4-user-name { font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-user-role { font-size: 11px; color: var(--ef4-text-muted); } /* Dropdown menu */ .ef4-user-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: #151e2e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease; z-index: 100; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4); } .ef4-user-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .ef4-user-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--ef4-text-secondary); text-decoration: none; transition: all 0.15s; cursor: pointer; } .ef4-user-menu-item:hover { background: rgba(174, 243, 31, 0.08); color: var(--ef4-text-primary); } .ef4-user-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 4px 0; } /* Click outside to close */ .ef4-user-dropdown:focus-within .ef4-user-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ===== END USER DROPDOWN ===== */ /* ===== LIGHT MODE (styles moved to edge-finder-light.css) ===== */ /* ===== DASHBOARD LAYOUT ENGINE v7 ===== */ #ef4-dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; grid-auto-flow: dense; } /* Card sizing */ #ef4-dashboard-grid .ef4-card[data-size="full"] { grid-column: span 12; } #ef4-dashboard-grid .ef4-card[data-size="half"] { grid-column: span 6; } #ef4-dashboard-grid .ef4-card[data-size="third"] { grid-column: span 4; } /* Mobile: everything full width */ @media (max-width: 1024px) { #ef4-dashboard-grid .ef4-card[data-size="half"], #ef4-dashboard-grid .ef4-card[data-size="third"] { grid-column: span 12; } } /* Layout mode styles */ #ef4-dashboard-grid.ef4-layout-mode .ef4-card { position: relative; cursor: grab; border: 2px dashed transparent; transition: all 0.2s ease; } #ef4-dashboard-grid.ef4-layout-mode .ef4-card:hover { border-color: var(--ef4-blue); box-shadow: 0 0 0 4px rgba(1,129,251,0.1); } #ef4-dashboard-grid.ef4-layout-mode .ef4-card.ef4-dragging { opacity: 0.5; transform: scale(0.98); cursor: grabbing; } #ef4-dashboard-grid.ef4-layout-mode .ef4-card.ef4-drag-over { border-color: var(--ef4-green); box-shadow: 0 0 0 4px rgba(43,136,89,0.15); } /* Resize handle on cards */ .ef4-card-resize { display: none; position: absolute; top: 8px; right: 8px; gap: 4px; z-index: 10; } .ef4-layout-mode .ef4-card-resize { display: flex; } .ef4-card-resize button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ef4-border); background: var(--ef4-surface-solid); color: var(--ef4-text-muted); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .ef4-card-resize button:hover { background: var(--ef4-blue); color: #fff; border-color: var(--ef4-blue); } .ef4-card-resize button.active { background: var(--ef4-green); color: #fff; border-color: var(--ef4-green); } /* Drag handle indicator */ .ef4-card-drag-icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ef4-text-muted); opacity: 0; transition: opacity 0.2s; pointer-events: none; } .ef4-layout-mode .ef4-card:hover .ef4-card-drag-icon { display: block; opacity: 0.3; } /* FOMO Gauge */ .ef4-fomo-gauge-wrap { position: relative; width: 140px; height: 80px; margin: 0 auto; } .ef4-fomo-gauge-value { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 32px; font-weight: 800; line-height: 1; } .ef4-fomo-gauge-label { text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; } .ef4-fomo-gauge-label.good { color: var(--ef4-green); } .ef4-fomo-gauge-label.warning { color: var(--ef4-amber); } .ef4-fomo-gauge-label.danger { color: var(--ef4-red); } /* Strategy/Session Comparison v2 */ .ef4-comparison-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ef4-comparison-item:last-child { border-bottom: none; } .ef4-comparison-info { width: 100px; flex-shrink: 0; } .ef4-comparison-donut { width: 36px; height: 36px; flex-shrink: 0; } .ef4-comparison-name { font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-comparison-meta { font-size: 11px; color: var(--ef4-text-muted); } .ef4-comparison-bar-wrap { flex: 1; height: 32px; background: var(--ef4-surface); border-radius: 8px; overflow: hidden; position: relative; } .ef4-comparison-bar { height: 100%; border-radius: 8px; transition: width 0.8s ease; display: flex; align-items: center; padding: 0 10px; position: relative; } .ef4-comparison-bar-text { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .ef4-comparison-donut { width: 36px; height: 36px; flex-shrink: 0; } .ef4-comparison-wr { width: 50px; text-align: right; font-size: 13px; font-weight: 700; flex-shrink: 0; } /* R-Multiple Histogram */ .ef4-histogram-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ef4-histogram-label { width: 55px; font-size: 11px; font-weight: 600; color: var(--ef4-text-muted); text-align: right; } .ef4-histogram-track { flex: 1; height: 20px; background: var(--ef4-surface); border-radius: 4px; overflow: hidden; display: flex; align-items: center; } .ef4-histogram-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; display: flex; align-items: center; padding-left: 6px; } .ef4-histogram-count { width: 30px; text-align: right; font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); } /* Trade Quality v2 */ .ef4-quality-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; } .ef4-quality-cell { padding: 12px 4px; border-radius: 10px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); transition: all 0.2s; } .ef4-quality-cell:hover { transform: translateY(-2px); border-color: var(--ef4-border-hover); } .ef4-quality-grade { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; margin: 0 auto 6px; color: #fff; } .ef4-quality-count { font-size: 18px; font-weight: 700; color: var(--ef4-text-primary); } .ef4-quality-label { font-size: 10px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Setup Performance v2 */ .ef4-setup-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ef4-setup-row:last-child { border-bottom: none; } .ef4-setup-name { width: 90px; font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-setup-metrics { flex: 1; display: flex; align-items: center; gap: 8px; } .ef4-setup-bar { flex: 1; height: 8px; background: var(--ef4-surface); border-radius: 4px; overflow: hidden; } .ef4-setup-bar-inner { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .ef4-setup-wr { font-size: 11px; font-weight: 600; width: 45px; text-align: right; } .ef4-setup-pnl { font-size: 11px; font-weight: 700; width: 70px; text-align: right; } /* Day performance drill-down */ .ef4-day-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; } .ef4-day-row:hover { background: var(--ef4-surface-hover); border-color: var(--ef4-border); } .ef4-day-name { font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); width: 60px; } .ef4-day-stats { display: flex; gap: 12px; font-size: 11px; color: var(--ef4-text-muted); } .ef4-day-pnl { font-size: 13px; font-weight: 700; width: 80px; text-align: right; } /* Drill-down modal for day trades */ .ef4-drill-modal .ef4-modal-body { max-height: 60vh; overflow-y: auto; } .ef4-drill-trade { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); cursor: pointer; transition: all 0.15s; } .ef4-drill-trade:hover { border-color: var(--ef4-blue); background: var(--ef4-surface-hover); } /* Subscription stub styles */ .ef4-sub-plan { padding: 20px; border-radius: 12px; border: 1px solid var(--ef4-border); background: var(--ef4-surface); text-align: center; transition: all 0.2s; } .ef4-sub-plan:hover { border-color: var(--ef4-border-hover); transform: translateY(-2px); } .ef4-sub-plan.featured { border-color: var(--ef4-green); background: linear-gradient(135deg, rgba(43,136,89,0.08), rgba(43,136,89,0.02)); } .ef4-sub-price { font-size: 36px; font-weight: 800; color: var(--ef4-text-primary); line-height: 1; } .ef4-sub-price span { font-size: 14px; font-weight: 500; color: var(--ef4-text-muted); } .ef4-sub-features { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; } .ef4-sub-features li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--ef4-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); } .ef4-sub-features li svg { width: 16px; height: 16px; stroke: var(--ef4-green); stroke-width: 2.5; fill: none; flex-shrink: 0; } .ef4-sub-features li.locked svg { stroke: var(--ef4-text-muted); } .ef4-sub-features li.locked { color: var(--ef4-text-muted); } /* Locked overlay for premium features */ .ef4-locked-overlay { position: absolute; inset: 0; background: rgba(11,17,32,0.85); backdrop-filter: blur(4px); border-radius: var(--ef4-radius); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; gap: 10px; } .ef4-locked-overlay .ef4-badge { background: var(--ef4-gold-dim); color: var(--ef4-gold); } /* ===== END LAYOUT ENGINE ===== */ /* ===== MOBILE APP-LIKE EXPERIENCE ===== */ @media (max-width: 768px) { /* Prevent horizontal overflow */ .ef4-wrap { overflow-x: hidden; } /* Sidebar becomes bottom nav on mobile */ .ef4-layout { flex-direction: column; } .ef4-sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: 64px; z-index: 1000; border-right: none; border-top: 1px solid var(--ef4-border); flex-direction: row; padding: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .ef4-sidebar-header { display: none; } .ef4-sidebar-nav { display: flex; flex-direction: row; width: 100%; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ef4-sidebar-nav::-webkit-scrollbar { display: none; } .ef4-nav-section { display: contents; } .ef4-nav-label { display: none; } .ef4-sidebar-link { flex-direction: column; padding: 8px 12px; min-width: 64px; font-size: 10px; gap: 4px; text-align: center; border-left: none; border-top: 2px solid transparent; } .ef4-sidebar-link.active { border-left: none; border-top-color: var(--ef4-blue); background: transparent; } .ef4-sidebar-link svg { width: 22px; height: 22px; } .ef4-main { margin-left: 0; padding-bottom: 80px; } .ef4-page-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 17, 32, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: -20px -20px 16px; padding: 16px 20px; border-bottom: 1px solid var(--ef4-border); } .ef4-h1 { font-size: 1.4rem; } .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ef4-kpi-card { padding: 14px; } .ef4-kpi-value { font-size: 1.4rem; } .ef4-card { border-radius: 10px; margin-bottom: 10px; } .ef4-card-header { padding: 12px 14px; } .ef4-card-title { font-size: 13px; } .ef4-btn { padding: 8px 14px; font-size: 13px; } #ef4-dashboard-grid { gap: 10px; } #ef4-dashboard-grid .ef4-card[data-size="half"], #ef4-dashboard-grid .ef4-card[data-size="third"] { grid-column: span 12; } .ef4-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ef4-modal-content { width: 95%; max-height: 85vh; border-radius: 16px; } .ef4-wizard { width: 95%; } .ef4-wizard-step { padding: 16px; } .ef4-fomo-gauge-wrap { width: 120px; height: 70px; } .ef4-comparison-item { gap: 8px; padding: 8px 0; } .ef4-comparison-info { width: 80px; } .ef4-comparison-name { font-size: 12px; } .ef4-comparison-donut { width: 32px; height: 32px; } .ef4-quality-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; } .ef4-quality-cell { padding: 8px 2px; } .ef4-quality-grade { width: 28px; height: 28px; font-size: 12px; } .ef4-quality-count { font-size: 14px; } .ef4-day-row { padding: 6px 10px; } .ef4-histogram-bar { gap: 6px; } .ef4-histogram-label { width: 45px; font-size: 10px; } .ef4-setup-row { gap: 8px; padding: 6px 0; } .ef4-setup-name { width: 70px; font-size: 11px; } } /* Extra small screens */ @media (max-width: 480px) { .ef4-container { padding: 12px; } .ef4-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .ef4-kpi-card { padding: 10px; } .ef4-kpi-label { font-size: 10px; } .ef4-kpi-value { font-size: 1.2rem; } .ef4-h1 { font-size: 1.2rem; } .ef4-page-subtitle { font-size: 11px; } .ef4-btn { padding: 6px 10px; font-size: 12px; } .ef4-card { border-radius: 8px; } .ef4-sidebar { height: 56px; } .ef4-sidebar-link { min-width: 56px; padding: 6px 8px; font-size: 9px; } .ef4-sidebar-link svg { width: 20px; height: 20px; } } /* ===== END MOBILE EXPERIENCE ===== */ /* ===== CHART LOADING ANIMATIONS ===== */ .ef4-chart-loading { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; } .ef4-chart-loading::before { content: ''; width: 40px; height: 40px; border: 3px solid var(--ef4-surface); border-top-color: var(--ef4-blue); border-radius: 50%; animation: ef4-spin 0.8s linear infinite; } .ef4-chart-loading-text { font-size: 13px; color: var(--ef4-text-muted); font-weight: 500; } @keyframes ef4-spin { to { transform: rotate(360deg); } } .ef4-skeleton { background: linear-gradient(90deg, var(--ef4-surface) 25%, rgba(255,255,255,0.04) 50%, var(--ef4-surface) 75%); background-size: 200% 100%; animation: ef4-skeleton 1.5s ease infinite; border-radius: 8px; } @keyframes ef4-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== END CHART LOADING ===== */ /* ===== STREAK BANNER ===== */ .ef4-streak-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)); border: 1px solid rgba(245,158,11,0.2); border-radius: 12px; margin-bottom: 20px; animation: ef4-streak-pulse 2s ease-in-out infinite; } @keyframes ef4-streak-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.15); } 50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } } .ef4-streak-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--ef4-amber), var(--ef4-orange)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .ef4-streak-icon svg { width: 22px; height: 22px; } .ef4-streak-text { flex: 1; } .ef4-streak-count { font-size: 18px; font-weight: 800; color: var(--ef4-amber); line-height: 1.2; } .ef4-streak-sub { font-size: 12px; color: var(--ef4-text-muted); } .ef4-streak-best { font-size: 12px; font-weight: 600; color: var(--ef4-text-secondary); padding: 6px 12px; background: rgba(255,255,255,0.04); border-radius: 8px; white-space: nowrap; } @media (max-width: 768px) { .ef4-streak-banner { padding: 12px 14px; gap: 12px; } .ef4-streak-icon { width: 34px; height: 34px; } .ef4-streak-count { font-size: 15px; } } /* ===== END STREAK BANNER ===== */ /* ===== ONBOARDING WALKTHROUGH ===== */ .ef4-onboard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .ef4-onboard-overlay.active { opacity: 1; pointer-events: all; } .ef4-onboard-card { background: var(--ef4-bg-elevated); border: 1px solid var(--ef4-border); border-radius: 16px; padding: 32px; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 25px 80px rgba(0,0,0,0.5); transform: translateY(20px); transition: transform 0.3s ease; } .ef4-onboard-overlay.active .ef4-onboard-card { transform: translateY(0); } .ef4-onboard-logo { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; object-fit: contain; } .ef4-onboard-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 22px; font-weight: 800; color: var(--ef4-text-primary); margin-bottom: 8px; } .ef4-onboard-desc { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--ef4-text-secondary); line-height: 1.6; margin-bottom: 24px; } .ef4-onboard-step-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; color: var(--ef4-text-primary); font-weight: 500; } .ef4-onboard-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; text-align: left; } .ef4-onboard-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ef4-surface); border-radius: 10px; border: 1px solid var(--ef4-border); } .ef4-onboard-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ef4-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .ef4-onboard-step-text { font-size: 13px; color: var(--ef4-text-primary); font-weight: 500; } .ef4-onboard-btn { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; } .ef4-onboard-skip { margin-top: 12px; font-size: 12px; color: var(--ef4-text-muted); background: none; border: none; cursor: pointer; } .ef4-onboard-skip:hover { color: var(--ef4-text-secondary); } /* ===== END ONBOARDING ===== */ /* ===== MOBILE ACTIVE STATE ENHANCEMENT ===== */ @media (max-width: 768px) { .ef4-sidebar-link.active { border-top: 2px solid var(--ef4-blue); background: linear-gradient(180deg, rgba(1,129,251,0.08) 0%, transparent 60%); } .ef4-sidebar-link.active svg { color: var(--ef4-blue); } .ef4-sidebar-link.active span { color: var(--ef4-blue); font-weight: 600; } } /* ===== END MOBILE ACTIVE ===== */ /* ===== ENHANCED TOAST SYSTEM ===== */ .ef4-toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .ef4-toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #fff; background: var(--ef4-surface-solid); border: 1px solid var(--ef4-border); box-shadow: 0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 220px; max-width: 360px; opacity: 0; transform: translateX(60px) scale(0.95); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; } .ef4-toast.show { opacity: 1; transform: translateX(0) scale(1); } .ef4-toast.hide { opacity: 0; transform: translateX(40px) scale(0.95); } .ef4-toast.success { border-left: 3px solid var(--ef4-green); background: linear-gradient(135deg, rgba(43,136,89,0.15), rgba(43,136,89,0.05)); } .ef4-toast.error { border-left: 3px solid var(--ef4-red); background: linear-gradient(135deg, rgba(255,61,90,0.15), rgba(255,61,90,0.05)); } .ef4-toast.warning { border-left: 3px solid var(--ef4-amber); background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); } .ef4-toast.info { border-left: 3px solid var(--ef4-blue); background: linear-gradient(135deg, rgba(1,129,251,0.15), rgba(1,129,251,0.05)); } .ef4-toast-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .ef4-toast.success .ef4-toast-icon { background: var(--ef4-green); color: #0a0f1a; } .ef4-toast.error .ef4-toast-icon { background: var(--ef4-red); color: #0a0f1a; } .ef4-toast.warning .ef4-toast-icon { background: var(--ef4-amber); color: #0a0f1a; } .ef4-toast.info .ef4-toast-icon { background: var(--ef4-blue); color: #0a0f1a; } .ef4-toast-msg { color: var(--ef4-text-primary); line-height: 1.4; } /* ===== FLOATING ACTION BUTTON ===== */ .ef4-fab { position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--ef4-blue), var(--ef4-purple)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(1,129,251,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset; z-index: 900; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .ef4-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 6px 28px rgba(1,129,251,0.5); } .ef4-fab:active { transform: scale(0.95); } .ef4-fab svg { width: 24px; height: 24px; } @media (min-width: 769px) { .ef4-fab { display: none; } } /* ===== SKELETON LOADING SCREENS ===== */ .ef4-skeleton { background: linear-gradient(90deg, var(--ef4-surface) 25%, rgba(255,255,255,0.04) 50%, var(--ef4-surface) 75%); background-size: 200% 100%; animation: ef4-skeleton 1.5s ease infinite; border-radius: 8px; } @keyframes ef4-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ef4-skeleton-card { padding: 20px; border-radius: var(--ef4-radius); border: 1px solid var(--ef4-border); background: var(--ef4-bg-elevated); margin-bottom: 14px; } .ef4-skeleton-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ef4-skeleton-title { width: 140px; height: 16px; } .ef4-skeleton-subtitle { width: 80px; height: 12px; margin-top: 6px; } .ef4-skeleton-body { display: flex; flex-direction: column; gap: 10px; } .ef4-skeleton-row { height: 14px; width: 100%; } .ef4-skeleton-row.short { width: 60%; } .ef4-skeleton-row.medium { width: 80%; } /* ===== KEYBOARD SHORTCUT HINT ===== */ .ef4-kbd { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: 'SF Mono', 'Menlo', monospace; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-muted); line-height: 1; } .ef4-shortcut-hint { position: fixed; bottom: 80px; left: 20px; z-index: 100; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .ef4-shortcut-hint.visible { opacity: 1; } .ef4-shortcut-hint-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ef4-text-muted); background: var(--ef4-bg-elevated); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ef4-border); box-shadow: 0 4px 16px rgba(0,0,0,0.2); } /* ===== PRINT STYLES ===== */ @media print { .ef4-sidebar, .ef4-fab, .ef4-toast-container, .ef4-onboard-overlay, .ef4-streak-banner, .ef4-page-actions, .ef4-btn:not(.ef4-btn-primary) { display: none !important; } .ef4-main { margin-left: 0 !important; padding: 0 !important; } .ef4-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ddd !important; background: #fff !important; } .ef4-card-title, .ef4-text-primary { color: #000 !important; } .ef4-text-secondary, .ef4-text-muted { color: #666 !important; } body { background: #fff !important; color: #000 !important; } } /* ===== SESSION TIMER ===== */ .ef4-session-timer { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--ef4-surface); border-radius: 8px; border: 1px solid var(--ef4-border); font-size: 12px; font-weight: 600; color: var(--ef4-text-primary); } .ef4-session-timer .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ef4-green); animation: ef4-pulse-dot 1.5s ease infinite; } @keyframes ef4-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ===== BULK ACTIONS BAR ===== */ .ef4-bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(135deg, rgba(1,129,251,0.08), rgba(1,129,251,0.02)); border: 1px solid rgba(1,129,251,0.2); border-radius: 10px; margin-bottom: 14px; font-size: 13px; } .ef4-bulk-bar span { color: var(--ef4-text-primary); font-weight: 600; } .ef4-bulk-bar .ef4-btn { padding: 6px 12px; font-size: 12px; } /* ===== TRADE DETAIL MODAL ===== */ .ef4-trade-detail-modal .ef4-modal-body { padding: 0; } .ef4-trade-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--ef4-border); background: var(--ef4-surface); } .ef4-trade-detail-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ef4-text-primary); } .ef4-trade-detail-pnl { font-size: 22px; font-weight: 800; } .ef4-trade-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 24px; } .ef4-trade-detail-field { display: flex; flex-direction: column; gap: 4px; } .ef4-trade-detail-label { font-size: 11px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .ef4-trade-detail-value { font-size: 14px; font-weight: 600; color: var(--ef4-text-primary); } .ef4-trade-detail-journal { padding: 16px 24px; background: var(--ef4-surface); border-top: 1px solid var(--ef4-border); font-size: 13px; line-height: 1.7; color: var(--ef4-text-secondary); } .ef4-trade-detail-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--ef4-border); } /* ===== END NEW FEATURES ===== */ /* ===== PREMIUM LOCK OVERLAY ===== */ .ef4-locked-overlay { position: absolute; inset: 0; background: rgba(11,17,32,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--ef4-radius); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; gap: 12px; text-align: center; padding: 24px; } .ef4-locked-overlay .ef4-badge { background: var(--ef4-gold-dim); color: var(--ef4-gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; } .ef4-locked-overlay svg { width: 40px; height: 40px; stroke: var(--ef4-gold); stroke-width: 1.5; fill: none; margin-bottom: 4px; } .ef4-locked-overlay h4 { font-size: 16px; font-weight: 700; color: var(--ef4-text-primary); margin: 0; } .ef4-locked-overlay p { font-size: 13px; color: var(--ef4-text-muted); max-width: 280px; line-height: 1.5; margin: 0; } .ef4-locked-overlay .ef4-btn { margin-top: 4px; } /* ===== END PREMIUM LOCK ===== */ /* ===== SUBTLE GRADIENT ACCENTS ===== */ /* Active sidebar link top accent */ .ef4-sidebar-link.active { border-left: 2px solid transparent; position: relative; } .ef4-sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--ef4-green), var(--ef4-blue)); } /* Card hover top glow */ .ef4-card:hover::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--ef4-blue), transparent); opacity: 0.3; pointer-events: none; } /* Status badges with subtle gradient */ .ef4-badge-green { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1)) !important; color: var(--ef4-green) !important; border: 1px solid rgba(16,185,129,0.2) !important; } .ef4-badge-blue { background: linear-gradient(135deg, rgba(1,129,251,0.2), rgba(1,129,251,0.1)) !important; color: var(--ef4-blue) !important; border: 1px solid rgba(1,129,251,0.2) !important; } .ef4-badge-purple { background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(139,92,246,0.1)) !important; color: var(--ef4-purple) !important; border: 1px solid rgba(139,92,246,0.2) !important; } .ef4-badge-red { background: linear-gradient(135deg, rgba(221,41,66,0.2), rgba(221,41,66,0.1)) !important; color: var(--ef4-red) !important; border: 1px solid rgba(221,41,66,0.2) !important; } .ef4-badge-yellow { background: linear-gradient(135deg, rgba(245,166,35,0.2), rgba(245,166,35,0.1)) !important; color: var(--ef4-yellow) !important; border: 1px solid rgba(245,166,35,0.2) !important; } /* Primary button with green-blue subtle shift */ .ef4-btn-primary { background: linear-gradient(135deg, var(--ef4-green), var(--ef4-green-mid), var(--ef4-blue)) !important; background-size: 200% 200% !important; color: #0a0d14 !important; border: none !important; text-shadow: none; } .ef4-btn-primary:hover { background-position: 100% 0 !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(43,136,89,0.3), 0 0 0 1px rgba(255,255,255,0.05) inset; } /* KPI icon backgrounds with gradient */ .ef4-kpi-icon.green { background: linear-gradient(135deg, rgba(43,136,89,0.25), rgba(43,136,89,0.1)) !important; color: var(--ef4-green) !important; } .ef4-kpi-icon.blue { background: linear-gradient(135deg, rgba(1,129,251,0.25), rgba(1,129,251,0.1)) !important; color: var(--ef4-blue) !important; } .ef4-kpi-icon.purple { background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(139,92,246,0.1)) !important; color: var(--ef4-purple) !important; } .ef4-kpi-icon.red { background: linear-gradient(135deg, rgba(221,41,66,0.25), rgba(221,41,66,0.1)) !important; color: var(--ef4-red) !important; } /* Progress bars with gradient */ .ef4-progress-fill.green { background: linear-gradient(90deg, var(--ef4-green-dark), var(--ef4-green), var(--ef4-green-mid)) !important; } .ef4-progress-fill.blue { background: linear-gradient(90deg, #0066cc, var(--ef4-blue), #4da3ff) !important; } .ef4-progress-fill.purple { background: linear-gradient(90deg, #6d28d9, var(--ef4-purple), #a78bfa) !important; } /* FAB with green-to-blue subtle */ .ef4-fab { display: none !important; background: linear-gradient(135deg, var(--ef4-green-mid), var(--ef4-blue)) !important; box-shadow: 0 4px 20px rgba(43,136,89,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset !important; } .ef4-fab:hover { box-shadow: 0 6px 28px rgba(43,136,89,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset !important; } /* Comparison bars with gradient */ .ef4-comparison-bar { background: linear-gradient(90deg, var(--color, var(--ef4-green)), rgba(255,255,255,0.1)) !important; } /* FOMO gauge with gradient arc */ .ef4-fomo-gauge-wrap svg path:nth-child(2) { stroke: url(#fomoGrad) !important; } /* Streak banner with subtle green-blue */ .ef4-streak-banner { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(43,136,89,0.05), rgba(1,129,251,0.08)) !important; } /* Onboarding logo glow */ .ef4-onboard-logo { filter: drop-shadow(0 4px 16px rgba(56,189,248,0.2)); } /* Session timer dot */ .ef4-session-timer .pulse-dot { background: linear-gradient(135deg, var(--ef4-green), var(--ef4-green-mid)) !important; } /* Toast left borders with gradient */ .ef4-toast.success { border-left: 3px solid var(--ef4-green) !important; } .ef4-toast.error { border-left: 3px solid var(--ef4-red) !important; } .ef4-toast.warning { border-left: 3px solid var(--ef4-amber) !important; } .ef4-toast.info { border-left: 3px solid var(--ef4-blue) !important; } /* Skeleton shimmer with subtle color */ .ef4-skeleton { background: linear-gradient(90deg, var(--ef4-surface) 25%, rgba(1,129,251,0.03) 50%, var(--ef4-surface) 75%) !important; } /* Premium lock overlay */ .ef4-locked-overlay { background: linear-gradient(180deg, rgba(11,17,32,0.9), rgba(11,17,32,0.85)) !important; } /* Sub plan featured with gradient border */ .ef4-sub-plan.featured { border: 1px solid transparent !important; background: linear-gradient(var(--ef4-bg-elevated), var(--ef4-bg-elevated)) padding-box, linear-gradient(135deg, var(--ef4-green), var(--ef4-blue)) border-box !important; } /* Sub plan featured hover glow */ .ef4-sub-plan.featured:hover { box-shadow: 0 8px 32px rgba(43,136,89,0.1), 0 0 0 1px rgba(43,136,89,0.1) inset !important; } /* Login card top glow */ .ef4-login-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--ef4-blue), transparent); opacity: 0.4; } /* Login wrap background with subtle gradient */ .ef4-login-wrap { background: linear-gradient(135deg, #0b0f18 0%, #0f172a 50%, #111827 100%) !important; } /* Tablet polish (768px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .ef4-layout { flex-direction: row; } .ef4-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 200px; z-index: 100; transform: translateX(0); transition: transform 0.3s ease; } .ef4-sidebar.collapsed { transform: translateX(-200px); } .ef4-main { margin-left: 200px; padding: 16px; } .ef4-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ef4-kpi-card { padding: 14px; } .ef4-kpi-value { font-size: 20px; } #ef4-dashboard-grid .ef4-card[data-size="third"] { grid-column: span 6; } .ef4-page-header { padding: 14px 16px; } .ef4-h1 { font-size: 1.5rem; } .ef4-card { border-radius: 10px; } .ef4-card-header { padding: 12px 14px; } .ef4-table th, .ef4-table td { padding: 10px 12px; font-size: 12px; } .ef4-modal-content { max-width: 560px; } .ef4-wizard { max-width: 560px; } } /* Smooth sidebar on tablet */ @media (min-width: 769px) and (max-width: 1024px) { .ef4-sidebar-toggle { display: flex; position: fixed; top: 16px; left: 16px; z-index: 101; width: 36px; height: 36px; border-radius: 8px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); align-items: center; justify-content: center; color: var(--ef4-text-primary); cursor: pointer; backdrop-filter: blur(8px); } .ef4-sidebar-toggle svg { width: 18px; height: 18px; } } /* ===== END GRADIENT & TABLET ===== */ /* ═══════════════════════════════════════════ DASHBOARD v9.6.15 FIXES — Phase 4.1 ═══════════════════════════════════════════ */ /* Daily P&L total number display */ .ef4-daily-pnl-total { font-family: var(--ef4-font-mono); letter-spacing: -0.02em; transition: color 0.3s ease; } /* Trade Quality grade row — 6 grades (A+/A/B/C/D/F) */ [data-widget="trade-quality"] .ef4-quality-grid { grid-template-columns: repeat(6, 1fr) !important; } .ef4-quality-grade.aplus { background: linear-gradient(135deg, #22c55e, #16a34a); } .ef4-quality-grade.a { background: linear-gradient(135deg, #2b8859, #1e6b44); } .ef4-quality-grade.b { background: linear-gradient(135deg, #3da76e, #2d8a55); } .ef4-quality-grade.c { background: linear-gradient(135deg, #f59e0b, #d97706); } .ef4-quality-grade.d { background: linear-gradient(135deg, #f97316, #ea580c); } .ef4-quality-grade.f { background: linear-gradient(135deg, #EF4444, #dc2626); } /* Grade pills with zero count are dimmed */ .ef4-quality-cell.zero-count { opacity: 0.35; } .ef4-quality-cell.zero-count .ef4-quality-grade { background: var(--ef4-surface) !important; color: var(--ef4-text-muted); } /* FOMO gauge label colors per threshold */ .ef4-fomo-gauge-label.low { color: #10B981; } .ef4-fomo-gauge-label.moderate { color: #F59E0B; } .ef4-fomo-gauge-label.high { color: #F97316; } .ef4-fomo-gauge-label.veryhigh { color: #EF4444; } /* Risk of Ruin N/A state */ .ef4-risk-ruin-na { font-size: 14px; color: var(--ef4-text-muted); text-align: center; padding: 8px 0; } /* Sparkline canvas in KPI cards — ensure visibility */ .ef4-kpi-sparkline { display: block !important; width: 100%; height: 40px; margin-top: 8px; } /* Responsive: trade quality on mobile */ @media (max-width: 768px) { [data-widget="trade-quality"] .ef4-quality-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; } .ef4-quality-cell { padding: 8px 2px; } .ef4-quality-grade { width: 36px; height: 36px; font-size: 13px; } .ef4-quality-count { font-size: 14px; } } /* ═══════════════════════════════════════════ END DASHBOARD v9.6.15 FIXES ═══════════════════════════════════════════ */ /* ===== PAGE PRELOADER ===== */ .ef4-preloader { position: fixed; inset: 0; background: #0b0f18; z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; transition: opacity 0.5s ease, visibility 0.5s ease; } .ef4-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ef4-preloader-logo { width: 48px; height: 48px; animation: ef4PreloadPulse 1.5s ease-in-out infinite; } .ef4-preloader-text { font-size: 13px; color: #64748b; font-weight: 500; letter-spacing: 0.5px; font-family: 'Inter', sans-serif; } @keyframes ef4PreloadPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } } /* ===== PRELOADER AUTO-HIDE FALLBACK ===== If JS fails, CSS hides the preloader after 3 seconds */ #ef4-page-preloader { animation: ef4PreloaderHide 0.5s ease 3s forwards; } @keyframes ef4PreloaderHide { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* ===== LOGIN / REGISTER PRELOADER INTEGRATION ===== */ .ef4-login-body .ef4-preloader { background: linear-gradient(135deg, #0b0f18 0%, #0f172a 50%, #111827 100%); } /* ===== TRADE CALENDAR ===== */ .ef4-cal-day { transition: all 0.15s ease; } .ef4-cal-day:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 2; } .ef4-cal-day.is-today { border-color: var(--ef4-blue) !important; box-shadow: 0 0 0 1px var(--ef4-blue); } /* Month Calendar Grid */ .ef4-calendar-wrap { margin-bottom: 20px; } .ef4-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .ef4-calendar-nav { display: flex; align-items: center; gap: 12px; } .ef4-calendar-title { font-size: 20px; font-weight: 700; color: var(--ef4-text-primary); margin: 0; } .ef4-calendar-legend { display: flex; gap: 8px; } .ef4-calendar-grid-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--ef4-border); border-radius: 12px; padding: 2px; } .ef4-cal-weekday { text-align: center; padding: 10px; font-size: 11px; font-weight: 700; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; background: var(--ef4-bg-elevated); } .ef4-cal-empty { background: var(--ef4-bg-elevated); min-height: 100px; } .ef4-cal-day { background: var(--ef4-bg-elevated); border: 1px solid transparent; border-radius: 8px; min-height: 100px; padding: 8px; position: relative; transition: all 0.2s ease; cursor: default; } .ef4-cal-day.is-profit { background: rgba(43,136,89,0.08); border-color: rgba(43,136,89,0.15); } .ef4-cal-day.is-loss { background: rgba(221,41,66,0.08); border-color: rgba(221,41,66,0.15); } .ef4-cal-day-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .ef4-cal-day-number { font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); } .ef4-cal-day-number.today-num { font-weight: 800; color: var(--ef4-blue); } .ef4-cal-today-badge { font-size: 9px; padding: 2px 6px; } .ef4-cal-pnl { font-size: 14px; font-weight: 700; } .ef4-cal-pnl.pnl-profit { color: var(--ef4-green); } .ef4-cal-pnl.pnl-loss { color: var(--ef4-red); } .ef4-cal-trade-count { font-size: 11px; color: var(--ef4-text-muted); margin-top: 4px; } @media (max-width: 768px) { .ef4-cal-day { min-height: 60px; padding: 4px; } .ef4-cal-pnl { font-size: 11px; } .ef4-cal-trade-count { font-size: 9px; } .ef4-cal-weekday { font-size: 9px; padding: 6px 2px; } .ef4-calendar-title { font-size: 16px; } .ef4-calendar-header { flex-direction: column; align-items: flex-start; } } /* ===== TRADE TAGS ===== */ .ef4-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-secondary); cursor: pointer; transition: all 0.15s; } .ef4-tag:hover { background: var(--ef4-surface-hover); border-color: var(--ef4-border-hover); color: var(--ef4-text-primary); } .ef4-tag.active { background: linear-gradient(135deg, rgba(1,129,251,0.2), rgba(1,129,251,0.1)); border-color: rgba(1,129,251,0.3); color: var(--ef4-blue); } .ef4-tag-input { background: transparent; border: none; color: var(--ef4-text-primary); font-size: 12px; outline: none; width: 80px; padding: 2px 4px; } .ef4-tag-input::placeholder { color: var(--ef4-text-muted); } /* ===== NEW UX STYLES: Tooltip, Screenshot Preview, Tag System ===== */ /* Tooltip */ .ef4-tooltip { position: fixed; background: var(--ef4-surface-solid); color: var(--ef4-text-primary); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10000; border: 1px solid var(--ef4-border); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .ef4-tooltip.visible { opacity: 1; } /* Screenshot Preview */ .ef4-screenshot-preview { margin-top: 10px; } .ef4-screenshot-preview-inner { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-sm); transition: var(--ef4-transition); } .ef4-screenshot-preview-inner:hover { border-color: var(--ef4-border-hover); } .ef4-screenshot-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; cursor: zoom-in; border: 1px solid var(--ef4-border); transition: transform 0.2s; } .ef4-screenshot-thumb:hover { transform: scale(1.03); } .ef4-screenshot-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .ef4-screenshot-name { font-size: 12px; color: var(--ef4-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-screenshot-remove { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ef4-border); border-radius: 6px; color: var(--ef4-text-muted); font-size: 16px; line-height: 1; cursor: pointer; transition: var(--ef4-transition); flex-shrink: 0; } .ef4-screenshot-remove:hover { background: var(--ef4-red-dim); border-color: var(--ef4-red); color: var(--ef4-red); } /* Tag Add Button + Inline Input */ .ef4-tag-add-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: transparent; border: 1px dashed var(--ef4-border); color: var(--ef4-text-muted); cursor: pointer; transition: all 0.15s; } .ef4-tag-add-btn:hover { border-color: var(--ef4-border-hover); color: var(--ef4-text-primary); background: var(--ef4-surface-hover); } .ef4-tag-inline-input { display: inline-flex; align-items: center; gap: 4px; } .ef4-tag-inline-input input { background: transparent; border: none; border-bottom: 1px solid var(--ef4-border); color: var(--ef4-text-primary); font-size: 12px; outline: none; width: 100px; padding: 2px 4px; } .ef4-tag-inline-input input:focus { border-color: var(--ef4-green); } .ef4-tag-inline-input button { background: var(--ef4-green-dim); border: 1px solid var(--ef4-green); color: var(--ef4-green); border-radius: 4px; font-size: 11px; font-weight: 600; padding: 2px 6px; cursor: pointer; transition: all 0.15s; } .ef4-tag-inline-input button:hover { background: var(--ef4-green); color: #0a0f1a; } /* Active tag with remove */ .ef4-tag.active { position: relative; padding-right: 20px; } .ef4-tag .ef4-tag-remove { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--ef4-blue); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; padding: 0; margin: 0; } .ef4-tag .ef4-tag-remove:hover { opacity: 1; color: var(--ef4-red); } /* ===== END NEW UX STYLES ===== */ .ef4-quick-trade { position: fixed; bottom: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .ef4-quick-trade-btn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--ef4-green), var(--ef4-blue)); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(43,136,89,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset; transition: all 0.2s; } .ef4-quick-trade-btn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 6px 28px rgba(43,136,89,0.5); } .ef4-quick-panel { background: var(--ef4-bg-elevated); border: 1px solid var(--ef4-border); border-radius: 16px; padding: 20px; width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: none; } .ef4-quick-panel.show { display: block; animation: ef4SlideUp 0.3s ease; } @keyframes ef4SlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .ef4-quick-panel h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ef4-text-primary); } /* ===== PERIOD COMPARISON ===== */ .ef4-compare-bar { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ef4-border); } .ef4-compare-bar:last-child { border-bottom: none; } .ef4-compare-label { width: 120px; font-size: 12px; font-weight: 600; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-compare-value { font-size: 18px; font-weight: 700; color: var(--ef4-text-primary); width: 100px; text-align: right; } .ef4-compare-delta { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .ef4-compare-delta.up { color: var(--ef4-green); background: rgba(43,136,89,0.1); } .ef4-compare-delta.down { color: var(--ef4-red); background: rgba(221,41,66,0.1); } /* ===== PERIOD COMPARISON WIDGET ===== */ .ef4-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; } .ef4-compare-kpi { text-align: center; padding: 16px; background: var(--ef4-surface); border-radius: 10px; border: 1px solid var(--ef4-border); } .ef4-compare-kpi-label { font-size: 11px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .ef4-compare-kpi-value { font-size: 24px; font-weight: 800; } .ef4-compare-kpi-delta { font-size: 12px; margin-top: 4px; } .ef4-compare-kpi-delta.up { color: var(--ef4-green); } .ef4-compare-kpi-delta.down { color: var(--ef4-red); } .ef4-compare-bars-wrap { margin-top: 16px; display: flex; align-items: center; gap: 12px; } .ef4-compare-bars-inner { flex: 1; } .ef4-compare-mini-bar { flex: 1; display: flex; align-items: center; gap: 8px; } .ef4-compare-mini-fill { height: 8px; border-radius: 4px; } .ef4-compare-mini-dim { background: var(--ef4-text-muted); opacity: 0.5; } .ef4-compare-mini-blue { background: var(--ef4-blue); } .ef4-compare-mini-green { background: var(--ef4-green); } .ef4-compare-mini-red { background: var(--ef4-red); } .ef4-compare-value-muted { color: var(--ef4-text-muted); font-size: 10px; } /* ===== ALL TRADES: TAG FILTER ===== */ .ef4-tag-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; background: var(--ef4-surface); border-radius: 10px; border: 1px solid var(--ef4-border); margin-bottom: 16px; } .ef4-tag-filter-label { font-size: 12px; font-weight: 600; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-tag-filter .ef4-tag { cursor: pointer; user-select: none; } .ef4-tag-filter .ef4-tag.active { background: linear-gradient(135deg, rgba(1,129,251,0.2), rgba(1,129,251,0.1)); border-color: rgba(1,129,251,0.3); color: var(--ef4-blue); } /* ===== STREAK BADGE ===== */ .ef4-streak-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); border: 1px solid rgba(245,158,11,0.2); color: var(--ef4-amber); } .ef4-streak-badge.green { background: linear-gradient(135deg, rgba(43,136,89,0.15), rgba(43,136,89,0.05)); border-color: rgba(43,136,89,0.2); color: var(--ef4-green); } .ef4-streak-badge.red { background: linear-gradient(135deg, rgba(221,41,66,0.15), rgba(221,41,66,0.05)); border-color: rgba(221,41,66,0.2); color: var(--ef4-red); } /* ===== TAG ANALYTICS ===== */ .ef4-tag-stat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ef4-border); } .ef4-tag-stat-row:last-child { border-bottom: none; } .ef4-tag-stat-name { width: 120px; font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); } .ef4-tag-stat-track { flex: 1; height: 8px; background: var(--ef4-surface); border-radius: 4px; overflow: hidden; } .ef4-tag-stat-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .ef4-tag-stat-fill.green { background: var(--ef4-green); } .ef4-tag-stat-fill.red { background: var(--ef4-red); } .ef4-tag-stat-meta { width: 80px; text-align: right; font-size: 12px; color: var(--ef4-text-muted); } .ef4-tag-stat-wr { width: 50px; text-align: right; font-size: 13px; font-weight: 700; } /* ===== TRADE EMPTY STATE V2 ===== */ .ef4-empty-v2 { text-align: center; padding: 48px 24px; } .ef4-empty-v2-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; } .ef4-empty-v2-title { font-size: 16px; font-weight: 700; color: var(--ef4-text-primary); margin-bottom: 8px; } .ef4-empty-v2-desc { font-size: 13px; color: var(--ef4-text-muted); max-width: 360px; margin: 0 auto 20px; line-height: 1.5; } /* ===== SCROLLBAR for tables ===== */ .ef4-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ef4-table-scroll::-webkit-scrollbar { height: 6px; } .ef4-table-scroll::-webkit-scrollbar-track { background: transparent; } .ef4-table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; } /* ===== NOTIFICATION BADGE PULSE ===== */ @keyframes ef4-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .ef4-notif-badge-pulse { animation: ef4-badge-pulse 2s ease-in-out infinite; } /* ===== RECENT ACTIVITY ROW ===== */ .ef4-recent-trade-row { cursor: pointer; transition: background 0.15s ease; border-radius: 6px; } .ef4-recent-trade-row:hover { background: var(--ef4-surface-hover); } .ef4-recent-trade-row:last-child { border-bottom: none; } /* ===== EDGE INSIGHT CARDS ===== */ .ef4-insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .ef4-insight-card { border-radius: var(--ef4-radius-sm); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default; } .ef4-insight-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .ef4-insight-icon { margin-bottom: 4px; opacity: 0.9; } .ef4-insight-label { font-size: 10px; font-weight: 600; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .ef4-insight-value { font-size: 16px; font-weight: 700; line-height: 1.2; } .ef4-insight-meta { font-size: 11px; color: var(--ef4-text-muted); font-weight: 500; } /* Light mode overrides for insights */ /* ===== CARD ENTRY ANIMATIONS ===== */ .ef4-card { animation: ef4-card-enter 0.5s ease-out both; } .ef4-card:nth-child(1) { animation-delay: 0.05s; } .ef4-card:nth-child(2) { animation-delay: 0.1s; } .ef4-card:nth-child(3) { animation-delay: 0.15s; } .ef4-card:nth-child(4) { animation-delay: 0.2s; } .ef4-card:nth-child(5) { animation-delay: 0.25s; } .ef4-card:nth-child(6) { animation-delay: 0.3s; } @keyframes ef4-card-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ===== RADAR CHART STYLES ===== */ #sessionRadarChart { filter: drop-shadow(0 0 4px rgba(174,243,31,0.1)); } /* ===== TIME-OF-DAY CHART ===== */ #timeOfDayChart { filter: drop-shadow(0 0 4px rgba(59,130,246,0.08)); } /* ===== RITUALS ===== */ .ef4-ritual-grid { display: flex; flex-wrap: wrap; gap: 6px; } .ef4-ritual-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; background: rgba(174,243,31,0.12); color: var(--ef4-green); border: 1px solid rgba(174,243,31,0.2); } /* ===== LIFESTYLE SLIDERS IN WIZARD ===== */ #ws3 input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--ef4-surface); outline: none; } #ws3 input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-card-bg); } /* ===== AI INSIGHT PANEL ===== */ .ef4-ai-insight-card { border-left: 3px solid var(--ef4-green); border-radius: 0 8px 8px 0; padding: 10px 12px; margin-bottom: 8px; } /* ===== JOURNAL EXPANDABLE ROW ===== */ .at-journal-row { animation: ef4-fade-in 0.2s ease; } .at-journal-row td { border-top: none !important; } /* ===== LESSONS LEARNED WIDGET ===== */ .ef4-lesson-card { border-left: 3px solid var(--ef4-green); } @keyframes ef4-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ===== LAYOUT MODE ===== */ body.ef4-layout-mode .ef4-card { position: relative; cursor: grab; border: 2px dashed transparent; transition: all 0.2s ease; } body.ef4-layout-mode .ef4-card:hover { border-color: var(--ef4-blue); box-shadow: 0 0 0 4px rgba(1,129,251,0.1); } body.ef4-layout-mode .ef4-card.ef4-dragging { opacity: 0.5; transform: scale(0.98); cursor: grabbing; } body.ef4-layout-mode .ef4-card.ef4-drag-over { border-color: var(--ef4-green); box-shadow: 0 0 0 4px rgba(43,136,89,0.15); } /* Drag ghost */ .ef4-drag-ghost { pointer-events: none; border-radius: 12px; overflow: hidden; } /* Resize handle */ .ef4-card-resize { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; z-index: 20; } .ef4-card-resize button { width: 24px; height: 24px; border-radius: 6px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-secondary); cursor: pointer; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .ef4-card-resize button:hover { background: var(--ef4-green); color: #000; border-color: var(--ef4-green); } body.ef4-layout-mode .ef4-card-resize { display: flex; } /* Donut overflow fix */ .ef4-donut { display: flex; align-items: center; justify-content: center; overflow: visible; } /* Actions always visible */ .ef4-table .actions { display: flex; gap: 6px; opacity: 1; } /* Compact filter bar */ .ef4-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; padding: 8px 12px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 10px; } .ef4-filter-bar .ef4-input, .ef4-filter-bar .ef4-select { height: 32px; font-size: 12px; padding: 0 10px; } .ef4-filter-bar .ef4-btn { height: 32px; font-size: 12px; padding: 0 12px; } .ef4-filter-advanced { display: none; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid var(--ef4-border); } .ef4-filter-advanced.open { display: flex; } .ef4-swatch:hover { transform: scale(1.15); } .ef4-swatch:focus { outline: none; box-shadow: 0 0 0 2px var(--ef4-green); } /* --- Action button visibility fix --- */ .ef4-btn-icon:hover { background: rgba(255,255,255,0.08) !important; color: var(--ef4-text-primary) !important; } .ef4-btn-icon svg { display: block; } /* ===== WIZARD COMPONENTS (Package 2) ===== */ /* Pair Pills */ .ef4-pair-pills { display: flex; flex-wrap: wrap; gap: 6px; } .ef4-pair-pill { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--ef4-border); background: transparent; color: var(--ef4-text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; } .ef4-pair-pill:hover { border-color: var(--ef4-green); color: var(--ef4-text-primary); } .ef4-pair-pill.active { background: var(--ef4-green); color: #0a0f1a; border-color: var(--ef4-green); font-weight: 600; box-shadow: 0 0 12px rgba(174,243,31,0.25); } /* Strategy Cards */ .ef4-strategy-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; } .ef4-strategy-card { display: flex; align-items: stretch; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-sm); cursor: pointer; transition: all 0.2s ease; overflow: hidden; } .ef4-strategy-card:hover { border-color: var(--ef4-border-hover); transform: translateY(-1px); } .ef4-strategy-card.active { border-color: var(--strat-color, var(--ef4-green)); box-shadow: 0 0 0 2px var(--strat-color, var(--ef4-green)), 0 4px 12px rgba(0,0,0,0.2); } .ef4-strategy-card-color { width: 4px; flex-shrink: 0; } .ef4-strategy-card-body { padding: 10px 12px; flex: 1; min-width: 0; } .ef4-strategy-card-name { font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-strategy-card-setups { font-size: 11px; color: var(--ef4-text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Lifestyle Sliders */ .ef4-lifestyle-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); outline: none; } .ef4-lifestyle-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid var(--ef4-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .ef4-lifestyle-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid var(--ef4-bg); } .ef4-lifestyle-slider.sleep::-webkit-slider-thumb { background: var(--ef4-green); box-shadow: 0 0 8px rgba(174,243,31,0.4); } .ef4-lifestyle-slider.sleep::-moz-range-thumb { background: var(--ef4-green); } .ef4-lifestyle-slider.energy::-webkit-slider-thumb { background: var(--ef4-amber); box-shadow: 0 0 8px rgba(245,158,11,0.4); } .ef4-lifestyle-slider.energy::-moz-range-thumb { background: var(--ef4-amber); } .ef4-lifestyle-slider.stress::-webkit-slider-thumb { background: var(--ef4-red); box-shadow: 0 0 8px rgba(221,41,66,0.4); } .ef4-lifestyle-slider.stress::-moz-range-thumb { background: var(--ef4-red); } .ef4-lifestyle-slider.focus::-webkit-slider-thumb { background: var(--ef4-blue); box-shadow: 0 0 8px rgba(1,129,251,0.4); } .ef4-lifestyle-slider.focus::-moz-range-thumb { background: var(--ef4-blue); } /* Mistake Buttons */ .ef4-mistake-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--ef4-border); background: transparent; color: var(--ef4-text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .ef4-mistake-btn:hover { border-color: var(--ef4-red); color: var(--ef4-red); background: var(--ef4-red-dim); } .ef4-mistake-btn.active { background: var(--ef4-red); color: #fff; border-color: var(--ef4-red); font-weight: 600; box-shadow: 0 0 12px rgba(221,41,66,0.3); } /* Voice Input Button - styles consolidated at line ~1666 */ /* ===== LIFESTYLE CARD (in Trade Wizard) ===== */ .ef4-lifestyle-card { background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); border-radius: 12px; overflow: hidden; margin: 16px 0; } .ef4-lifestyle-card-header { display: flex; align-items: center; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--ef4-border); } .ef4-lifestyle-card-body { padding: 16px; } .ef4-lifestyle-checkbox:hover { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.04) !important; } /* Slider track fill colors */ .ef4-lifestyle-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); } .ef4-lifestyle-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); } /* ===== LIFESTYLE SYSTEM ===== */ /* Lifestyle Card (in Trade Wizard) */ .ef4-lifestyle-card { background: rgba(255,255,255,0.03); border: 1px solid var(--ef4-border); border-radius: 12px; overflow: hidden; margin: 16px 0; } .ef4-lifestyle-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ef4-text-primary); background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--ef4-border); } .ef4-lifestyle-card-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .ef4-lifestyle-card-body { padding: 16px; } .ef4-lifestyle-checkbox:hover { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.04) !important; } /* Lifestyle Sliders */ .ef4-lifestyle-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); outline: none; } .ef4-lifestyle-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.15s, box-shadow 0.15s; } .ef4-lifestyle-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 10px rgba(174,243,31,0.4); } .ef4-lifestyle-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-green); cursor: pointer; border: 2px solid var(--ef4-bg); } /* Lifestyle Strategy Cards (on Lifestyle page) */ .ef4-ls-card { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-sm); overflow: hidden; transition: all 0.2s ease; position: relative; } .ef4-ls-card:hover { border-color: var(--ef4-border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .ef4-ls-card-color-bar { height: 4px; width: 100%; } .ef4-ls-card-body { padding: 16px; } .ef4-ls-card-name { font-size: 15px; font-weight: 600; color: var(--ef4-text-primary); margin-bottom: 4px; } .ef4-ls-card-meta { font-size: 12px; color: var(--ef4-text-muted); margin-bottom: 12px; } .ef4-ls-card-actions { display: flex; gap: 8px; } /* Color Picker */ .ef4-color-option { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; } .ef4-color-option:hover { transform: scale(1.15); } .ef4-color-option.selected { border-color: var(--ef4-text-primary); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); } /* Rule Row in Modal */ .ef4-ls-rule-row { display: flex; gap: 10px; align-items: center; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.04); } .ef4-ls-rule-row:hover { border-color: rgba(255,255,255,0.08); } /* ===== USER REQUEST FIXES ===== */ /* Mistake buttons: hover = red bg, white text; active = red bg, white text */ .ef4-mistake-btn:hover { background: var(--ef4-red) !important; color: #ffffff !important; border-color: var(--ef4-red) !important; box-shadow: 0 0 12px rgba(221,41,66,0.3); } .ef4-mistake-btn.active { background: var(--ef4-red) !important; color: #ffffff !important; border-color: var(--ef4-red) !important; font-weight: 600; box-shadow: 0 0 12px rgba(221,41,66,0.3); } /* Long button hover = green glow */ #wbtn_long:hover { background: var(--ef4-green) !important; color: #0a0f1a !important; box-shadow: 0 0 16px rgba(174,243,31,0.35); } /* Short button hover = red glow */ #wbtn_short:hover { background: var(--ef4-red) !important; color: #ffffff !important; box-shadow: 0 0 16px rgba(221,41,66,0.35); } /* Strategy card active = lime green border */ .ef4-strategy-card.active { border-color: #aef31f !important; box-shadow: 0 0 0 2px #aef31f, 0 4px 16px rgba(174,243,31,0.2) !important; } /* Checklist branded green */ .ef4-checklist li .ef4-check { border: 2px solid var(--ef4-border); background: transparent; transition: all 0.2s ease; } .ef4-checklist li:hover .ef4-check { border-color: var(--ef4-green); } .ef4-checklist li.done .ef4-check { background: var(--ef4-green); border-color: var(--ef4-green); } .ef4-checklist li.done .ef4-check::after { border-color: #0a0f1a; } /* Step 4 more padding */ #ws4 .ef4-form-group { margin-bottom: 20px; } #ws4 { padding: 8px 4px; } /* Session select styling */ #w_session { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--ef4-text-primary); cursor: pointer; transition: all 0.2s ease; } #w_session:hover { border-color: var(--ef4-green); } #w_session:focus { border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(174,243,31,0.15); outline: none; } /* Pair pills improved */ .ef4-pair-pill { padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--ef4-border); background: transparent; color: var(--ef4-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 0.3px; } .ef4-pair-pill:hover { border-color: var(--ef4-green); color: var(--ef4-text-primary); background: rgba(174,243,31,0.08); } .ef4-pair-pill.active { background: var(--ef4-green); color: #0a0f1a; border-color: var(--ef4-green); font-weight: 600; box-shadow: 0 0 14px rgba(174,243,31,0.3); } /* Lifestyle card color bar */ .ef4-lifestyle-card-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } /* View trade modal styling */ .ef4-trade-view { padding: 0; } .ef4-trade-view-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 24px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--ef4-border); margin: -24px -24px 20px; } .ef4-trade-view-title { display: flex; align-items: center; gap: 10px; flex: 1; } .ef4-trade-view-symbol { font-size: 20px; font-weight: 700; color: var(--ef4-text-primary); } .ef4-trade-view-date { font-size: 12px; color: var(--ef4-text-muted); } .ef4-trade-view-pnl { font-size: 28px; font-weight: 800; font-family: var(--ef4-font-mono); } .ef4-trade-view-section { margin-bottom: 24px; } .ef4-trade-view-section-title { font-size: 12px; font-weight: 600; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; } .ef4-trade-view-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ef4-trade-view-metric { background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: 10px; padding: 12px; text-align: center; } .ef4-trade-view-metric-label { font-size: 10px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .ef4-trade-view-metric-value { font-size: 16px; font-weight: 700; color: var(--ef4-text-primary); font-family: var(--ef4-font-mono); } .ef4-trade-view-badges { display: flex; flex-wrap: wrap; gap: 6px; } .ef4-trade-view-screenshot { max-width: 100%; border-radius: 10px; border: 1px solid var(--ef4-border); margin-top: 8px; } /* ===== ADMIN PAGE CLASSES — DARK MODE ===== */ .ef4-admin-wrap { background: #0b0f18; color: #f8fafc; } .ef4-admin-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; } .ef4-admin-row { background: rgba(255,255,255,0.04); } .ef4-admin-row:nth-child(even) { background: rgba(255,255,255,0.04); } .ef4-admin-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #f8fafc; border-radius: 6px; padding: 6px 10px; } .ef4-admin-th { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .ef4-admin-td { color: #cbd5e1; } .ef4-admin-notice { background: rgba(43,136,89,0.1); color: #f8fafc; border-radius: 8px; } /* ===== ACTION BUTTON — DARK MODE ===== */ .ef4-action-btn { width: 32px; height: 32px; border-radius: 6px; background: var(--ef4-surface-hover); border: 1px solid var(--ef4-border); color: var(--ef4-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; margin: 0 2px; } .ef4-action-btn:hover { background: var(--ef4-green); color: #0a0d14; border-color: var(--ef4-green); } .ef4-action-btn--danger { color: var(--ef4-red); } .ef4-action-btn--danger:hover { background: var(--ef4-red); color: #ffffff; border-color: var(--ef4-red); } /* Admin secondary button */ .ef4-admin-btn-secondary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #f8fafc; padding: 8px 16px; border-radius: 8px; text-decoration: none; display: inline-block; transition: all .2s; } .ef4-admin-btn-secondary:hover { background: rgba(255,255,255,0.14); color: #ffffff; } /* ================================================================ LIFESTYLE STRATEGIES UI ================================================================ */ .ef4-strategy-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; } .ef4-lifestyle-card { display: flex; background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); overflow: hidden; transition: var(--ef4-transition); cursor: default; } .ef4-lifestyle-card:hover { border-color: #AEF31F; background: rgba(174,243,31,0.05); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .ef4-lifestyle-card.selected { border-color: #AEF31F; background: rgba(174,243,31,0.08); } .ef4-lifestyle-card-color { width: 4px; flex-shrink: 0; background: var(--ls-color, #AEF31F); } .ef4-lifestyle-card-body { padding: 14px 16px; flex: 1; min-width: 0; } .ef4-lifestyle-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ef4-lifestyle-card-name { font-size: 14px; font-weight: 600; color: var(--ef4-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ef4-lifestyle-card-desc { font-size: 12px; color: var(--ef4-text-muted); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ef4-lifestyle-card-footer { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .ef4-badge-sm { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; } /* Lifestyle Strategy Modal */ #lifestyle-strategy-modal .ef4-modal-content { background: var(--ef4-bg-elevated); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-lg); max-height: 90vh; overflow-y: auto; } #lifestyle-strategy-modal .ef4-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--ef4-border); } #lifestyle-strategy-modal .ef4-modal-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ef4-text-primary); } #lifestyle-strategy-modal .ef4-modal-close { background: transparent; border: none; color: var(--ef4-text-muted); font-size: 22px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all .2s; } #lifestyle-strategy-modal .ef4-modal-close:hover { background: rgba(255,255,255,0.06); color: var(--ef4-text-primary); } #lifestyle-strategy-modal .ef4-modal-body { padding: 20px 24px; } #lifestyle-strategy-modal .ef4-modal-footer { padding: 16px 24px; border-top: 1px solid var(--ef4-border); display: flex; gap: 10px; justify-content: flex-end; } /* Rule rows in lifestyle modal */ .ef4-ls-rule-row { padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius-sm); transition: all .2s; } .ef4-ls-rule-row:hover { border-color: var(--ef4-border-hover); background: rgba(255,255,255,0.04); } /* Responsive */ @media (max-width: 768px) { .ef4-strategy-card-grid { grid-template-columns: 1fr; } .ef4-ls-rule-row > div:first-child { grid-template-columns: 1fr 100px 60px 36px !important; } } /* ============================================ TOOLTIP SYSTEM ============================================ */ [data-tooltip] { position: relative; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.9); background: var(--ef4-surface-2, #1e293b); color: var(--ef4-text-primary, #f1f5f9); font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .2s cubic-bezier(.4,0,.2,1); z-index: 9999; border: 1px solid var(--ef4-border, rgba(255,255,255,0.06)); box-shadow: 0 4px 12px rgba(0,0,0,0.25); letter-spacing: 0.02em; } [data-tooltip]::after { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) scale(0); border: 5px solid transparent; border-top-color: var(--ef4-surface-2, #1e293b); opacity: 0; transition: all .2s cubic-bezier(.4,0,.2,1); z-index: 9999; } [data-tooltip]:hover::before { opacity: 1; transform: translateX(-50%) scale(1); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* Light mode tooltips */ body.ef4-light-mode [data-tooltip]::before { background: #ffffff; color: #1a1a1a; border-color: rgba(57,102,102,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } body.ef4-light-mode [data-tooltip]::after { border-top-color: #ffffff; } /* ================================================================ GOALS PAGE — Progress Bars ================================================================ */ .ef4-goal-progress { background: var(--ef4-surface-2); border-radius: 8px; height: 8px; overflow: hidden; } .ef4-goal-progress-fill { height: 100%; border-radius: 8px; transition: width .5s ease; } .ef4-goal-progress-fill.green { background: var(--ef4-green); } .ef4-goal-progress-fill.yellow { background: var(--ef4-yellow); } .ef4-goal-progress-fill.red { background: var(--ef4-red); } /* Light mode */ body.ef4-light-mode .ef4-goal-progress { background: #e5e7eb; } /* ================================================================ PLAYBOOK PAGE — Rule Compliance ================================================================ */ .ef4-rule-compliance { display: flex; align-items: center; gap: 8px; } .ef4-compliance-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ef4-compliance-dot.high { background: var(--ef4-green); } .ef4-compliance-dot.medium { background: var(--ef4-yellow); } .ef4-compliance-dot.low { background: var(--ef4-red); } /* ================================================================ PLAYBOOK PAGE — Principle Cards ================================================================ */ .ef4-principle-card { background: var(--ef4-card-bg); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 16px; margin-bottom: 10px; transition: box-shadow 0.2s, border-color 0.2s; } .ef4-principle-card:hover { border-color: var(--ef4-border-hover); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } body.ef4-light-mode .ef4-principle-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } /* Light mode overrides */ body.ef4-light-mode .ef4-goal-progress-fill.green { background: #2E7D32; } body.ef4-light-mode .ef4-goal-progress-fill.yellow { background: #F9A825; } body.ef4-light-mode .ef4-goal-progress-fill.red { background: #C62828; } body.ef4-light-mode .ef4-compliance-dot.high { background: #2E7D32; } body.ef4-light-mode .ef4-compliance-dot.medium { background: #F9A825; } body.ef4-light-mode .ef4-compliance-dot.low { background: #C62828; } /* ================================================================ Lifestyle Strategy Cards ================================================================ */ .ef4-lifestyle-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .ef4-lifestyle-card { background: var(--ef4-card-bg); border: 1px solid var(--ef4-border); border-radius: var(--ef4-radius); padding: 20px; transition: all .25s ease; position: relative; } .ef4-lifestyle-card:hover { border-color: var(--ef4-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } body.ef4-light-mode .ef4-lifestyle-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .ef4-lifestyle-card .card-color-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--ef4-radius) var(--ef4-radius) 0 0; } .ef4-lifestyle-card .card-title { font-size: 16px; font-weight: 700; color: var(--ef4-text-primary); margin-bottom: 4px; } .ef4-lifestyle-card .card-desc { font-size: 13px; color: var(--ef4-text-muted); margin-bottom: 12px; } .ef4-lifestyle-card .card-rules { display: flex; flex-wrap: wrap; gap: 6px; } .ef4-lifestyle-card .card-rule-pill { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: var(--ef4-surface); color: var(--ef4-text-muted); border: 1px solid var(--ef4-border); } .ef4-lifestyle-card .card-actions { display: flex; gap: 6px; margin-top: 14px; } /* ===== Widget Grid System ===== */ .ef4-widget-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .ef4-widget { position: relative; transition: all .3s ease; } .ef4-widget:hover .ef4-widget-controls { opacity: 1; } .ef4-widget-controls { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; z-index: 10; } .ef4-widget-btn { width: 24px; height: 24px; border-radius: 6px; background: var(--ef4-surface); border: 1px solid var(--ef4-border); color: var(--ef4-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; } .ef4-widget-btn:hover { background: var(--ef4-accent); color: var(--ef4-bg); } .ef4-widget-btn.active { background: var(--ef4-accent); color: var(--ef4-bg); } .ef4-widget-full { grid-column: span 12; } .ef4-widget-half { grid-column: span 6; } .ef4-widget-third { grid-column: span 4; } @media (max-width: 768px) { .ef4-widget-full, .ef4-widget-half, .ef4-widget-third { grid-column: span 12; } } /* Dragging */ .ef4-widget.dragging { opacity: .5; transform: scale(.98); } .ef4-widget-drag-handle { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; cursor: grab; opacity: 0; transition: opacity .2s; z-index: 10; } .ef4-widget:hover .ef4-widget-drag-handle { opacity: .3; } .ef4-widget:hover .ef4-widget-drag-handle:hover { opacity: .7; } /* ============================================ LANDING PAGE ANIMATED GRADIENTS ============================================ */ @keyframes ef4-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ef4-border-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Animated gradient border for hero/pricing cards */ .ef4-landing-card { position: relative; background: var(--ef4-card-bg); border-radius: var(--ef4-radius); overflow: hidden; } .ef4-landing-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--ef4-accent) 0%, var(--ef4-blue) 25%, var(--ef4-purple) 50%, var(--ef4-accent) 75%, var(--ef4-blue) 100% ); background-size: 400% 400%; animation: ef4-gradient-shift 8s ease infinite; border-radius: calc(var(--ef4-radius) + 2px); z-index: -1; opacity: 0.15; } /* Pro plan gets stronger glow */ .ef4-landing-card.pro::before { opacity: 0.35; animation: ef4-gradient-shift 6s ease infinite, ef4-border-glow 4s ease infinite; } /* Hero section background gradient */ .ef4-landing-hero { position: relative; overflow: hidden; } .ef4-landing-hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 20%, rgba(174,243,31,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(59,130,246,0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(139,92,246,0.04) 0%, transparent 60%); animation: ef4-gradient-shift 15s ease infinite; pointer-events: none; } /* Floating particles */ @keyframes ef4-float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; } } .ef4-landing-particle { position: absolute; width: 4px; height: 4px; background: var(--ef4-accent); border-radius: 50%; animation: ef4-float 6s ease-in-out infinite; pointer-events: none; } /* ================================================================ ADMIN DASHBOARD STYLES ================================================================ */ .ef4-admin-wrap { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .ef4-admin-card { background: var(--ef4-card-bg, var(--ef4-surface)); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 24px; margin-bottom: 20px; } .ef4-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .ef4-admin-stat { font-size: 32px; font-weight: 800; color: var(--ef4-text-primary); } .ef4-admin-label { font-size: 12px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-admin-heading { color: var(--ef4-text-primary); font-size: 20px; font-weight: 700; margin: 0 0 16px; } /* Coupon page headings on dark backgrounds */ .ef4-admin-wrap h1, .ef4-admin-wrap h2, .ef4-admin-wrap h3 { color: var(--ef4-text-primary, #f8fafc); } /* Admin form elements */ .ef4-admin-input { background: var(--ef4-surface); border: 1px solid var(--ef4-border); border-radius: 8px; color: var(--ef4-text-primary); font-family: inherit; padding: 8px 12px; transition: border-color 0.2s, box-shadow 0.2s; } .ef4-admin-input:focus { outline: none; border-color: var(--ef4-green); box-shadow: 0 0 0 3px rgba(43,136,89,0.1); } /* Admin table */ .ef4-admin-table { width: 100%; border-collapse: collapse; } .ef4-admin-th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ef4-text-muted); text-align: left; } .ef4-admin-td { font-size: 13px; color: var(--ef4-text-secondary); } .ef4-admin-row { transition: background 0.15s ease; } .ef4-admin-row:hover { background: rgba(255,255,255,0.02); } /* ================================================================ LIGHT MODE TEXT COLOR OVERRIDES ================================================================ */ body.ef4-light-mode .ef4-strategy-card, body.ef4-light-mode .ef4-kpi-card, body.ef4-light-mode .ef4-card { color: #1a1a1a; } body.ef4-light-mode .ef4-card-title, body.ef4-light-mode .ef4-kpi-value { color: #111827 !important; } body.ef4-light-mode .ef4-kpi-label, body.ef4-light-mode .ef4-card-subtitle { color: #6b7280 !important; } body.ef4-light-mode .ef4-empty-title { color: #111827 !important; } body.ef4-light-mode .ef4-empty-desc { color: #6b7280 !important; } body.ef4-light-mode .ef4-text-primary, body.ef4-light-mode .ef4-h2, body.ef4-light-mode .ef4-h3 { color: #111827 !important; } body.ef4-light-mode .ef4-admin-heading { color: #111827 !important; } body.ef4-light-mode .ef4-admin-stat { color: #111827 !important; } body.ef4-light-mode .ef4-admin-label { color: #6b7280 !important; } /* Light mode scrollbar */ body.ef4-light-mode .ef4-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); } body.ef4-light-mode .ef4-main::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); } /* Light mode session card backgrounds */ body.ef4-light-mode .ef4-session-card, body.ef4-light-mode .ef4-strat-card { background: rgba(255,255,255,0.9) !important; border-color: rgba(0,0,0,0.08) !important; } body.ef4-light-mode .ef4-kpi-card { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.06) !important; } /* Light mode table rows */ body.ef4-light-mode .ef4-table tbody tr:hover td { background: rgba(0,0,0,0.02) !important; } /* Light mode input color scheme */ body.ef4-light-mode input[type="date"], body.ef4-light-mode input[type="time"] { color-scheme: light; } /* Light mode toast */ body.ef4-light-mode .ef4-toast { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.1) !important; } /* Light mode modal */ body.ef4-light-mode .ef4-modal-content { background: rgba(255,255,255,0.98) !important; border-color: rgba(0,0,0,0.1) !important; } /* ===== Admin Pages ===== */ .ef4-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; } .ef4-admin-card { background: var(--ef4-card-bg); border: 1px solid var(--ef4-border); border-radius: 12px; padding: 24px; } .ef4-admin-stat { font-size: 32px; font-weight: 800; color: var(--ef4-text-primary); margin-bottom: 4px; } .ef4-admin-label { font-size: 11px; color: var(--ef4-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .ef4-admin-table { width: 100%; border-collapse: collapse; } .ef4-admin-table th { text-align: left; padding: 12px 16px; font-size: 11px; color: var(--ef4-text-muted); text-transform: uppercase; border-bottom: 1px solid var(--ef4-border); } .ef4-admin-table td { padding: 12px 16px; font-size: 13px; color: var(--ef4-text-primary); border-bottom: 1px solid var(--ef4-border); } .ef4-admin-table tr:hover td { background: var(--ef4-surface); } body.ef4-light-mode .ef4-admin-card { background: #ffffff; border-color: rgba(57,102,102,0.08); } /* Hide sidebar on public pages (landing, login, register) */ body.ef4-public-page .ef4-sidebar, .page-template-default.page-id-landing .ef4-sidebar, body[data-ef4-public="1"] .ef4-sidebar { display:none !important; } body.ef4-public-page .ef4-main, .page-template-default.page-id-landing .ef4-main, body[data-ef4-public="1"] .ef4-main { margin-left:0 !important; width:100% !important; max-width:none !important; } /* ═══ Analyze button gradient animation ═══ */ .menu-item-gradient { background: linear-gradient(90deg, rgba(174,243,31,0.15), rgba(79,195,247,0.15), rgba(174,243,31,0.15)) !important; background-size: 200% 100% !important; animation: gradientShift 3s ease infinite !important; border-left: 3px solid var(--ef4-green) !important; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ═══ Analyze button in sidebar ═══ */ .ef4-nav-analyze { background: linear-gradient(90deg, rgba(174,243,31,0.12), rgba(79,195,247,0.08), rgba(174,243,31,0.12)) !important; background-size: 200% 100% !important; animation: ef4AnalyzeShift 3s ease infinite !important; border-left: 3px solid var(--ef4-green) !important; font-weight: 700 !important; } .ef4-nav-analyze svg { stroke: var(--ef4-green) !important; } .ef4-nav-analyze span { color: var(--ef4-green) !important; } @keyframes ef4AnalyzeShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .ef4-nav-analyze:hover { background: linear-gradient(90deg, rgba(174,243,31,0.25), rgba(79,195,247,0.15), rgba(174,243,31,0.25)) !important; } /* ═══════════════════════════════════════════ §6 + §9 — SESSIONS & TOOLS IMPROVEMENTS ═══════════════════════════════════════════ */ /* #6.4 — Session card hover (clickable) */ .sess-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .sess-card:hover { transform: translateY(-2px); box-shadow: 0 -4px 16px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.2) !important; } /* #9.2 — Calculator R:R quality badge */ #calc-rr-quality { transition: all 0.3s ease; } /* #9.3 — Risk Visualizer gauge & charts */ #viz-ruin-gauge { display: block; } #viz-ev-chart { display: block; } /* #9.4 — Charts tab padding */ #tools-tab-charts { padding: 24px; } /* #9.4 — TV chart wrap focus indicator */ #tv-chart-wrap:focus { outline: 2px solid var(--ef4-green); } /* ═══════════════════════════════════════════ ANALYZE POPUP + LOADING ANIMATIONS ═══════════════════════════════════════════ */ /* Analyze Popup Overlay - ID-based to avoid conflicts with class-based modals */ #ef4-analyze-popup { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; align-items: center; justify-content: center; padding: 20px; animation: ef4FadeIn 0.2s ease; } #ef4-analyze-popup[style*="flex"] { display: flex !important; } /* Analyze Modal Content */ .ef4-analyze-modal-content { background: var(--ef4-surface-solid); border: 1px solid var(--ef4-border); border-radius: 20px; padding: 32px; max-width: 440px; width: 90%; animation: ef4SlideUp 0.3s ease; text-align: center; } /* Analyze popup icon circle */ .ef4-analyze-icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: var(--ef4-green-dim); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } /* Step headings */ .ef4-analyze-modal-content h3 { margin: 0 0 8px; font-size: 18px; color: var(--ef4-text-primary); font-weight: 700; } .ef4-analyze-modal-content .ef4-analyze-sub { margin: 0 0 24px; font-size: 14px; color: var(--ef4-text-muted); } /* Progress bar */ .ef4-analyze-progress-track { width: 100%; height: 8px; background: var(--ef4-surface); border-radius: 4px; overflow: hidden; margin-bottom: 20px; } /* Progress bar fill - with shimmer */ #analyze-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--ef4-green), var(--ef4-blue)); border-radius: 4px; transition: width 0.3s ease; position: relative; overflow: hidden; } #analyze-progress-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: ef4Shimmer 1.5s infinite; } @keyframes ef4Shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Loading step items */ .analyze-step-item { transition: color 0.3s ease; padding-left: 8px; } .analyze-step-item.completed { color: var(--ef4-text-primary); } .analyze-step-item.completed .step-indicator { color: var(--ef4-green); } /* Keyframe animations */ @keyframes ef4FadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ef4SlideUp { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Popup action buttons */ .ef4-analyze-btn-cancel { background: var(--ef4-red); color: #fff; border: none; padding: 10px 24px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-size: 13px; } .ef4-analyze-btn-cancel:hover { background: var(--ef4-red-dark); transform: translateY(-1px); } .ef4-analyze-btn-proceed { background: var(--ef4-green); color: #0a0d14; border: none; padding: 10px 24px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-family: inherit; font-size: 13px; } .ef4-analyze-btn-proceed:hover { background: var(--ef4-green-mid); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(174,243,31,0.3); } /* Loading steps container */ #analyze-steps { text-align: left; font-size: 13px; color: var(--ef4-text-muted); line-height: 2; } /* Responsive */ @media (max-width: 480px) { .ef4-analyze-modal-content { padding: 24px 20px; max-width: 95vw; } } /* ================================================================ SHARED COMPONENT SYSTEM — ef4-* prefix 9 components: Modal, Dropdown, Slider, Checklist, Empty State, Compliance Meter, KPI Card, Toast, Segmented Control ================================================================ */ /* ===== Component 1: ef4-modal (shared variant) ===== */ .ef4-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(11, 17, 32, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .ef4-modal-overlay.active { opacity: 1; pointer-events: auto; } .ef4-modal { background: #111a2e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; max-width: 90vw; max-height: 85vh; min-width: 400px; overflow-y: auto; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); transform: translateY(-20px); transition: transform 200ms ease; position: relative; } .ef4-modal-overlay.active .ef4-modal { transform: translateY(0); } .ef4-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ef4-modal-close { background: none; border: none; color: rgba(255, 255, 255, 0.55); font-size: 20px; cursor: pointer; padding: 4px; line-height: 1; transition: color 150ms ease; border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .ef4-modal-close:hover { color: var(--ef4-accent-lime, #AEF31F); background: rgba(174, 243, 31, 0.08); } .ef4-modal-body { flex: 1; overflow-y: auto; } .ef4-modal-body::-webkit-scrollbar { width: 6px; } .ef4-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } /* ===== Component 2: ef4-dropdown ===== */ .ef4-dropdown { position: relative; display: inline-block; } .ef4-dropdown-trigger { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 12px; color: rgba(255, 255, 255, 0.92); cursor: pointer; min-width: 160px; font-size: 13px; font-family: inherit; transition: border-color 150ms ease; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; } .ef4-dropdown-trigger:hover { border-color: rgba(174, 243, 31, 0.4); } .ef4-dropdown-trigger::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(255, 255, 255, 0.55); transition: transform 150ms ease; } .ef4-dropdown.open .ef4-dropdown-trigger::after { transform: rotate(180deg); } .ef4-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: #111a2e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 6px; min-width: 100%; z-index: 100; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; } .ef4-dropdown.open .ef4-dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .ef4-dropdown-item { padding: 8px 12px; border-radius: 6px; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 13px; transition: all 150ms ease; display: flex; align-items: center; gap: 8px; } .ef4-dropdown-item:hover { background: rgba(174, 243, 31, 0.1); color: var(--ef4-accent-lime, #AEF31F); } .ef4-dropdown-item.selected { background: rgba(174, 243, 31, 0.12); color: var(--ef4-accent-lime, #AEF31F); font-weight: 500; } /* ===== Component 3: ef4-slider ===== */ .ef4-slider { width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ef4-accent-red, #dd2942), var(--ef4-accent-orange, #FF8C42), var(--ef4-accent-lime, #AEF31F)); -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; } .ef4-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-accent-lime, #AEF31F); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(174, 243, 31, 0.4); cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; } .ef4-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 2px 12px rgba(174, 243, 31, 0.6); } .ef4-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ef4-accent-lime, #AEF31F); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(174, 243, 31, 0.4); cursor: pointer; } .ef4-slider::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ef4-accent-red, #dd2942), var(--ef4-accent-orange, #FF8C42), var(--ef4-accent-lime, #AEF31F)); border: none; } /* ===== Component 4: ef4-checklist ===== */ .ef4-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .ef4-checklist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; color: rgba(255, 255, 255, 0.85); font-size: 13px; transition: color 150ms ease; border-radius: 6px; padding-left: 8px; padding-right: 8px; } .ef4-checklist-item:hover { color: #fff; background: rgba(255, 255, 255, 0.02); } .ef4-checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ef4-accent-lime, #AEF31F); cursor: pointer; flex-shrink: 0; } .ef4-checklist-item.checked { color: var(--ef4-accent-lime, #AEF31F); } /* ===== Component 5: ef4-empty-state ===== */ .ef4-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: rgba(255, 255, 255, 0.55); } .ef4-empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; line-height: 1; } .ef4-empty-state-title { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; } .ef4-empty-state-desc { font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; max-width: 320px; line-height: 1.5; } .ef4-empty-state-cta { display: inline-flex; align-items: center; gap: 6px; background: rgba(174, 243, 31, 0.1); border: 1px solid rgba(174, 243, 31, 0.3); border-radius: 8px; padding: 8px 16px; color: var(--ef4-accent-lime, #AEF31F); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 150ms ease; font-family: inherit; } .ef4-empty-state-cta:hover { background: rgba(174, 243, 31, 0.2); border-color: rgba(174, 243, 31, 0.5); transform: translateY(-1px); } /* ===== Component 6: ef4-compliance-meter ===== */ .ef4-compliance-meter { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .ef4-compliance-meter-fill { height: 100%; border-radius: 4px; background: linear-gradient(to right, var(--ef4-accent-red, #dd2942), var(--ef4-accent-orange, #FF8C42), var(--ef4-accent-lime, #AEF31F)); transition: width 300ms ease-out; } /* ===== Component 7: ef4-kpi-card (shared variant) ===== */ @keyframes ef4-gradient-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .ef4-kpi-card-shared { position: relative; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 16px; overflow: hidden; transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease; } .ef4-kpi-card-shared:hover { border-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .ef4-kpi-card-shared::before { content: ''; position: absolute; inset: -1px; border-radius: 13px; padding: 1px; background: linear-gradient(90deg, rgba(174, 243, 31, 0.3), rgba(0, 212, 255, 0.2), rgba(174, 243, 31, 0.3)); background-size: 200% 100%; animation: ef4-gradient-sweep 3s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 250ms ease; } .ef4-kpi-card-shared:hover::before { opacity: 1; } .ef4-kpi-card-header { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; } .ef4-kpi-card-value { font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, 0.92); margin-bottom: 4px; line-height: 1.2; font-variant-numeric: tabular-nums; } .ef4-kpi-card-delta { font-size: 12px; font-weight: 500; } .ef4-kpi-card-delta.positive { color: var(--ef4-accent-lime, #AEF31F); } .ef4-kpi-card-delta.negative { color: var(--ef4-accent-red, #dd2942); } .ef4-kpi-card-chart { margin-top: 8px; height: 40px; width: 100%; } /* ===== Component 8: ef4-toast ===== */ #ef4-toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 320px; } .ef4-toast-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 13px; font-weight: 500; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: auto; transition: all 300ms ease; opacity: 0; transform: translateX(40px); line-height: 1.4; } .ef4-toast-item.show { opacity: 1; transform: translateX(0); } .ef4-toast-item.hide { opacity: 0; transform: translateX(40px); } .ef4-toast-success { background: rgba(174, 243, 31, 0.12); border-left: 3px solid var(--ef4-accent-lime, #AEF31F); color: var(--ef4-accent-lime, #AEF31F); } .ef4-toast-error { background: rgba(221, 41, 66, 0.12); border-left: 3px solid var(--ef4-accent-red, #dd2942); color: #ff6b7a; } .ef4-toast-info { background: rgba(0, 212, 255, 0.08); border-left: 3px solid var(--ef4-accent-cyan, #00d4ff); color: var(--ef4-accent-cyan, #00d4ff); } .ef4-toast-pending { background: rgba(255, 140, 66, 0.08); border-left: 3px solid var(--ef4-accent-orange, #FF8C42); color: var(--ef4-accent-orange, #FF8C42); } /* ===== Component 9: ef4-segmented-control ===== */ .ef4-segmented-control { display: inline-flex; background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 4px; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.06); } .ef4-segmented-control button { background: transparent; border: none; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: all 150ms ease; font-family: inherit; white-space: nowrap; position: relative; } .ef4-segmented-control button:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.03); } .ef4-segmented-control button.active { background: rgba(174, 243, 31, 0.12); color: var(--ef4-accent-lime, #AEF31F); font-weight: 600; } .ef4-segmented-control button:focus-visible { outline: 2px solid rgba(174, 243, 31, 0.4); outline-offset: 1px; } /* ===== SHARED COMPONENT RESPONSIVE ===== */ @media (max-width: 768px) { .ef4-modal { min-width: auto; width: calc(100vw - 32px); padding: 16px; border-radius: 12px; } .ef4-modal-header { margin-bottom: 16px; padding-bottom: 12px; } .ef4-dropdown-trigger { min-width: 140px; font-size: 12px; } .ef4-dropdown-menu { max-height: 240px; overflow-y: auto; } .ef4-segmented-control button { padding: 5px 10px; font-size: 12px; } #ef4-toast-container { left: 16px; right: 16px; max-width: none; top: 12px; } .ef4-toast-item { border-radius: 8px; border-left: 3px solid; } .ef4-empty-state { padding: 32px 16px; } .ef4-empty-state-icon { font-size: 36px; margin-bottom: 12px; } .ef4-empty-state-title { font-size: 14px; } .ef4-kpi-card-shared { padding: 12px; } .ef4-kpi-card-value { font-size: 20px; } } @media (max-width: 480px) { .ef4-segmented-control { width: 100%; } .ef4-segmented-control button { flex: 1; padding: 5px 8px; font-size: 11px; } .ef4-modal { padding: 12px; } } /* ===== END SHARED COMPONENTS ===== */ /* ============================================================ E.ui — Themed UI Components ============================================================ */ /* --- Combobox (styles consolidated at line ~1695) --- */ /* --- Slider --- */ .ef4-slider { position:relative; height:24px; display:flex; align-items:center; cursor:pointer; outline:none; } .ef4-slider-track { position:relative; width:100%; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; } .ef4-slider-fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:linear-gradient(90deg,#EF4444 0%,#FF8C42 50%,#AEF31F 100%); transition:width 0.1s; } .ef4-slider-thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; background:#AEF31F; border-radius:50%; box-shadow:0 0 8px rgba(174,243,31,0.4); cursor:grab; transition:box-shadow 0.2s; z-index:2; } .ef4-slider-thumb:hover { box-shadow:0 0 12px rgba(174,243,31,0.6); } .ef4-slider-thumb.dragging { cursor:grabbing; box-shadow:0 0 16px rgba(174,243,31,0.8); } .ef4-slider-tooltip { position:absolute; top:-32px; transform:translateX(-50%); background:#131b2d; border:1px solid rgba(174,243,31,0.3); color:#AEF31F; padding:3px 10px; border-radius:6px; font-size:12px; font-weight:600; pointer-events:none; opacity:0; transition:opacity 0.2s; } .ef4-slider:hover .ef4-slider-tooltip, .ef4-slider:focus .ef4-slider-tooltip { opacity:1; } /* --- Compliance Meter --- */ .ef4-compliance-meter { display:flex; align-items:center; gap:10px; } .ef4-compliance-track { flex:1; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; } .ef4-compliance-fill { height:100%; border-radius:4px; transition:width 0.8s cubic-bezier(0.22,1,0.36,1); } .ef4-compliance-fill.low { background:linear-gradient(90deg,#EF4444,#DC2626); } .ef4-compliance-fill.medium { background:linear-gradient(90deg,#FF8C42,#F59E0B); } .ef4-compliance-fill.high { background:linear-gradient(90deg,#AEF31F,#65A30D); } .ef4-compliance-label { font-size:13px; font-weight:600; color:#fff; min-width:36px; text-align:right; } /* ═══════════════════════════════════════════ WIZARD STRATEGY SELECTOR (Task 1) ═══════════════════════════════════════════ */ .ef4-strat-select-card:hover { border-color:rgba(174,243,31,0.4)!important;box-shadow:0 0 12px rgba(174,243,31,0.15)!important; } .ef4-strategy-selector { } @media (max-width:768px) { .ef4-strategy-selector { grid-template-columns:repeat(2,1fr)!important; } } @media (max-width:480px) { .ef4-strategy-selector { grid-template-columns:1fr!important; } } /* ═══════════════════════════════════════════ WIZARD RULES CHECKLIST (Task 2) ═══════════════════════════════════════════ */ .ef4-rules-checklist { } .ef4-rule-item { transition:background 0.15s; } .ef4-rule-item:hover { background:rgba(255,255,255,0.02); } .ef4-rule-item:last-child { border-bottom:none; } /* ═══════════════════════════════════════════ LIFESTYLE PROTOCOL CARDS (Task 3) ═══════════════════════════════════════════ */ .ef4-lifestyle-protocol-card { background:#131b2d;border:2px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px;cursor:pointer;transition:all 0.2s; } .ef4-lifestyle-protocol-card:hover { border-color:rgba(174,243,31,0.3); } .ef4-lifestyle-protocol-card.selected { border-color:#AEF31F;background:rgba(174,243,31,0.08); } .ef4-lifestyle-protocol-card .protocol-name { font-weight:600;color:#fff;font-size:14px; } .ef4-lifestyle-protocol-card .protocol-desc { font-size:12px;color:rgba(255,255,255,0.5);margin-top:4px; } .ef4-lifestyle-protocol-card .protocol-check { display:none; } .ef4-lifestyle-protocol-card.selected .protocol-check { display:block;color:#AEF31F; } .ef4-lifestyle-empty-state { } .ef4-lifestyle-protocols-grid { } /* ═══════════════════════════════════════════ ANIMATED GRADIENT BORDER — KPI CARDS ═══════════════════════════════════════════ */ .ef4-kpi-card { position: relative !important; background: var(--ef4-bg-elevated, #131b2d) !important; border-radius: 12px !important; overflow: hidden !important; } .ef4-kpi-card::before { content: '' !important; position: absolute !important; top: -1px !important; left: -1px !important; right: -1px !important; bottom: -1px !important; border-radius: 13px !important; padding: 1px !important; background: linear-gradient(90deg, #AEF31F, #FF8C42, #AEF31F) !important; background-size: 200% 100% !important; animation: ef4-border-sweep 3s linear infinite !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; z-index: 0 !important; opacity: 0 !important; transition: opacity 0.3s !important; } .ef4-kpi-card:hover::before { opacity: 1 !important; } @keyframes ef4-border-sweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ===== KPI Card gradient border animation (enhanced) ===== */ .ef4-kpi-card { position: relative; background: var(--ef4-bg-elevated); border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .ef4-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); } .ef4-kpi-card::before { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 1px; background: linear-gradient(135deg, rgba(174,243,31,0.5), rgba(255,140,66,0.5), rgba(174,243,31,0.5)); background-size: 200% 200%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; pointer-events: none; animation: ef4-kpi-glow 3s ease infinite; } .ef4-kpi-card:hover::before { opacity: 1; } @keyframes ef4-kpi-glow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Mini sparkline canvas */ .ef4-kpi-sparkline { width: 100%; height: 40px; margin-top: 8px; } /* ===== Themed Scrollbars ===== */ /* WebKit (Chrome, Safari, Edge) */ .ef4-admin-wrap ::-webkit-scrollbar, .ef4-admin-wrap::-webkit-scrollbar { width: 8px; height: 8px; } .ef4-admin-wrap ::-webkit-scrollbar-track, .ef4-admin-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 4px; } .ef4-admin-wrap ::-webkit-scrollbar-thumb, .ef4-admin-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } .ef4-admin-wrap ::-webkit-scrollbar-thumb:hover, .ef4-admin-wrap::-webkit-scrollbar-thumb:hover { background: rgba(174,243,31,0.35); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } .ef4-admin-wrap ::-webkit-scrollbar-corner, .ef4-admin-wrap::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ .ef4-admin-wrap { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) rgba(255,255,255,0.03); } .ef4-admin-wrap:hover { scrollbar-color: rgba(174,243,31,0.35) rgba(255,255,255,0.03); } /* Smooth scrollbar transition */ .ef4-admin-wrap ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } /* ===== Animated Subscription Gradient ===== */ .ef4-subscription-gradient { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #0b0f18 0%, #131b2d 50%, #0b0f18 100%); } .ef4-subscription-gradient::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 20% 50%, rgba(174,243,31,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(79,195,247,0.06) 0%, transparent 50%), radial-gradient(circle at 50% 80%, rgba(174,243,31,0.05) 0%, transparent 50%); animation: ef4-subgrad-rotate 15s ease-in-out infinite; pointer-events: none; z-index: 0; } .ef4-subscription-gradient > * { position: relative; z-index: 1; } @keyframes ef4-subgrad-rotate { 0%, 100% { transform: rotate(0deg) scale(1); } 33% { transform: rotate(120deg) scale(1.1); } 66% { transform: rotate(240deg) scale(1); } } /* ===== Compliance Meter ===== */ .ef4-compliance-card { background: var(--ef4-bg-elevated); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .ef4-compliance-meter-wrap { height: 32px; position: relative; } /* ===== Unified Tooltip System ===== */ .ef4-tooltip { position: relative; cursor: help; } .ef4-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(20, 26, 40, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); color: #f8fafc; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; z-index: 9999; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .ef4-tooltip:hover::after { opacity: 1; visibility: visible; } .ef4-tooltip[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); } .ef4-tooltip[data-tooltip-pos="right"]::after { bottom: auto; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); } /* ================================================================ CREDIT SYSTEM — Widget Display Styles ================================================================ */ .ef4-credit-display { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(174, 243, 31, 0.08); border: 1px solid rgba(174, 243, 31, 0.15); border-radius: 8px; font-size: 12px; margin: 8px 16px; cursor: pointer; transition: all 0.2s ease; } .ef4-credit-display:hover { background: rgba(174, 243, 31, 0.12); border-color: rgba(174, 243, 31, 0.25); } .ef4-credit-balance { font-weight: 700; color: #AEF31F; font-size: 14px; } .ef4-credit-label { color: rgba(255, 255, 255, 0.5); } .ef4-credit-tier { margin-left: auto; padding: 2px 6px; background: rgba(174, 243, 31, 0.15); border-radius: 4px; font-size: 10px; font-weight: 600; color: #AEF31F; text-transform: uppercase; letter-spacing: 0.5px; } /* Low credit warning state */ .ef4-credit-low { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.2) !important; } .ef4-credit-low:hover { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.3) !important; } .ef4-credit-low .ef4-credit-balance { color: #EF4444; } .ef4-credit-low .ef4-credit-tier { background: rgba(239, 68, 68, 0.15); color: #EF4444; } /* ================================================================ DASHBOARD AI INSIGHTS — Glassmorphic Slideshow Card ================================================================ */ .ef4-card-glassmorphic { background: linear-gradient(135deg, rgba(174, 243, 31, 0.03) 0%, rgba(11, 15, 24, 0.95) 50%, rgba(255, 140, 66, 0.03) 100%) !important; border: 1px solid rgba(174, 243, 31, 0.08) !important; position: relative; overflow: hidden; } .ef4-card-glassmorphic::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 20%, rgba(174, 243, 31, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255, 140, 66, 0.03) 0%, transparent 50%); pointer-events: none; } .ef4-ai-slideshow { position: relative; min-height: 180px; padding: 20px; } .ef4-ai-slide { animation: ef4FadeIn 0.5s ease; } .ef4-ai-slide-confidence { display: inline-block; padding: 2px 8px; background: rgba(174, 243, 31, 0.1); border: 1px solid rgba(174, 243, 31, 0.2); border-radius: 12px; font-size: 11px; color: #AEF31F; margin-bottom: 12px; } .ef4-ai-slide-title { font-size: 18px; font-weight: 600; color: #f8fafc; margin: 0 0 8px; } .ef4-ai-slide-text { color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin: 0 0 12px; font-size: 14px; } .ef4-ai-slide-recommendation { padding: 12px 16px; background: rgba(174, 243, 31, 0.05); border-left: 3px solid #AEF31F; border-radius: 0 8px 8px 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); } .ef4-ai-slide-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .ef4-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: all 0.3s ease; } .ef4-ai-dot.active { background: #AEF31F; width: 24px; border-radius: 4px; } .ef4-ai-slide-empty { text-align: center; padding: 40px 20px; color: var(--ef4-text-muted); } @keyframes ef4FadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Credit widget placement in sidebar */ #ef4-credit-widget { margin: 4px 0; } /* Light mode overrides */ .ef4-light .ef4-credit-display { background: rgba(174, 243, 31, 0.05); } .ef4-light .ef4-credit-label { color: rgba(0, 0, 0, 0.5); } .ef4-light .ef4-ai-slide-text { color: rgba(0, 0, 0, 0.7); } .ef4-light .ef4-ai-slide-title { color: #1e293b; } .ef4-light .ef4-ai-slide-empty { color: rgba(0, 0, 0, 0.5); } .ef4-light .ef4-card-glassmorphic { background: linear-gradient(135deg, rgba(174, 243, 31, 0.04) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 140, 66, 0.04) 100%) !important; border: 1px solid rgba(174, 243, 31, 0.12) !important; } /* ================================================================ MOBILE RESPONSIVENESS ================================================================ */ /* --- Sidebar on mobile --- */ @media (max-width: 768px) { /* Sidebar hidden by default */ .ef4-sidebar, #ef4-sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 999; transition: left 0.3s ease; width: 250px; } .ef4-sidebar.open, #ef4-sidebar.open, #ef4-sidebar.mobile-open { left: 0; } /* Sidebar backdrop */ .ef4-sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 998; } .ef4-sidebar.open + .ef4-sidebar-backdrop, .ef4-sidebar-backdrop.active { display: block; } /* Main content full width */ .ef4-main { margin-left: 0 !important; padding: 10px !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } /* Card grids 1 column */ .ef4-card-grid, .ef4-dashboard-grid, .ef4-ls-kpi-grid, .ef4-freq-grid, .ef4-strategy-grid, .ef4-session-grid { grid-template-columns: 1fr !important; } /* Modal full-screen on mobile */ .ef4-modal-content { max-width: 95% !important; margin: 10px !important; width: 95% !important; } .ef4-modal { padding: 8px !important; } .ef4-modal-xl, .ef4-modal-lg { max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; min-height: 100vh !important; } /* Table horizontal scroll */ .ef4-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .ef4-table { min-width: 640px; } /* Charts responsive */ .ef4-chart-container canvas, .ef4-chart-wrap canvas { width: 100% !important; height: auto !important; } /* Close button min 44px tap target */ .ef4-modal-close { min-width: 44px; min-height: 44px; font-size: 20px; } /* KPI cards full width */ .ef4-kpi-card, .ef4-ls-kpi-card { width: 100%; } /* Calculator inputs stack */ #calc-entry, #calc-stop, #calc-target { font-size: 16px !important; /* prevent iOS zoom */ } /* Reduced padding on cards */ .ef4-card { padding: 14px !important; } /* Header padding fix */ .ef4-page-header { padding: 14px 10px !important; } } /* --- Small phone tweaks (<480px) --- */ @media (max-width: 480px) { .ef4-main { padding: 6px !important; } .ef4-card { padding: 10px !important; border-radius: 10px !important; } .ef4-kpi-card, .ef4-ls-kpi-card { padding: 14px !important; } .ef4-ls-kpi-value { font-size: 24px !important; } .ef4-page-title { font-size: 20px !important; } /* Calculator: stack Entry/Stop/Target */ .ef4-calc-grid { grid-template-columns: 1fr !important; } }