html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.app-shell {
width: 100%;
height: 100%;
}
.page-frame {
width: 100%;
height: 100vh;
border: 0;
display: block;
}
/* Blink animation for higher pressure value */
@keyframes blink-highlight {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.pressure-highlight {
animation: blink-highlight 1.5s infinite;
font-weight: 900 !important;
text-shadow: 0 0 10px currentColor;
}
*{margin:0;padding:0;box-sizing:border-box}
/* ============= v15.0 ENHANCED THEME SYSTEM ============= */
/* 🌊 MIDNIGHT OCEAN (Default Dark) */
:root[data-theme="dark"]{
--bg:#060b18;--bg-gradient:linear-gradient(135deg,#060b18 0%,#0c1629 50%,#111d35 100%);
--card:rgba(12,22,41,0.85);--card-hover:rgba(18,32,58,0.9);--border:rgba(56,97,150,0.25);--border-light:rgba(56,97,150,0.15);
--fg:#e8edf5;--fg-muted:#7b8fa8;--accent:#3b82f6;--accent-hover:#2563eb;--accent-glow:rgba(59,130,246,0.25);
--success:#10b981;--danger:#ef4444;--warning:#f59e0b;
--ce-header:rgba(5,150,105,0.7);--pe-header:rgba(185,28,28,0.7);
--itm-ce:rgba(6,78,59,0.5);--itm-pe:rgba(124,45,18,0.5);--otm-ce:rgba(6,95,70,0.4);--otm-pe:rgba(154,52,18,0.4);
--atm:rgba(120,53,15,0.5);--text-on-colored:#f1f5f9;--strike-bg:rgba(56,97,150,0.2);
--shadow:0 4px 24px rgba(0,0,0,0.5);--glow:0 0 30px rgba(59,130,246,0.2);
--glass:rgba(12,22,41,0.6);--glass-border:rgba(59,130,246,0.15);
--gradient-primary:linear-gradient(135deg,#3b82f6,#06b6d4);--gradient-accent:linear-gradient(135deg,#6366f1,#8b5cf6);
--tab-active-bg:linear-gradient(135deg,#1e40af,#1d4ed8);--tab-active-border:#3b82f6;}
/* ☀️ SUNRISE GOLD (Light) */
:root[data-theme="light"]{
--bg:#faf8f5;--bg-gradient:linear-gradient(135deg,#faf8f5 0%,#f0ebe3 50%,#e8e0d4 100%);
--card:rgba(255,255,255,0.9);--card-hover:rgba(255,252,247,0.95);--border:rgba(180,155,110,0.25);--border-light:rgba(180,155,110,0.15);
--fg:#1a1510;--fg-muted:#7a6e5d;--accent:#b45309;--accent-hover:#92400e;--accent-glow:rgba(180,83,9,0.15);
--success:#059669;--danger:#dc2626;--warning:#d97706;
--ce-header:rgba(5,150,105,0.8);--pe-header:rgba(220,38,38,0.8);
--itm-ce:#d1fae5;--itm-pe:#fed7aa;--otm-ce:#ecfdf5;--otm-pe:#ffedd5;
--atm:#fef3c7;--text-on-colored:#1a1510;--strike-bg:rgba(180,155,110,0.12);
--shadow:0 4px 24px rgba(120,90,50,0.08);--glow:0 0 20px rgba(180,83,9,0.1);
--glass:rgba(255,255,255,0.7);--glass-border:rgba(180,155,110,0.2);
--gradient-primary:linear-gradient(135deg,#b45309,#d97706);--gradient-accent:linear-gradient(135deg,#92400e,#b45309);
--tab-active-bg:linear-gradient(135deg,#92400e,#b45309);--tab-active-border:#b45309;}
/* ✨ AURORA GLASS */
:root[data-theme="glass"]{
--bg:#0f0a24;--bg-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 30%,#f093fb 60%,#ec38bc 100%);
--card:rgba(255,255,255,0.08);--card-hover:rgba(255,255,255,0.14);--border:rgba(255,255,255,0.18);--border-light:rgba(255,255,255,0.1);
--fg:#ffffff;--fg-muted:#d4d0ec;--accent:#c084fc;--accent-hover:#a855f7;--accent-glow:rgba(192,132,252,0.3);
--success:#34d399;--danger:#f87171;--warning:#fbbf24;
--ce-header:rgba(52,211,153,0.5);--pe-header:rgba(248,113,113,0.5);
--itm-ce:rgba(6,78,59,0.4);--itm-pe:rgba(124,45,18,0.4);--otm-ce:rgba(6,95,70,0.3);--otm-pe:rgba(154,52,18,0.3);
--atm:rgba(120,53,15,0.5);--text-on-colored:#ffffff;--strike-bg:rgba(255,255,255,0.1);
--shadow:0 8px 32px rgba(0,0,0,0.3);--glow:0 0 40px rgba(192,132,252,0.3);
--glass:rgba(255,255,255,0.06);--glass-border:rgba(255,255,255,0.15);
--gradient-primary:linear-gradient(135deg,#c084fc,#f472b6);--gradient-accent:linear-gradient(135deg,#a78bfa,#818cf8);
--tab-active-bg:linear-gradient(135deg,#7c3aed,#a855f7);--tab-active-border:#c084fc;}
/* ⚡ NEON TOKYO */
:root[data-theme="cyber"]{
--bg:#05080f;--bg-gradient:linear-gradient(135deg,#05080f 0%,#0a1018 50%,#0f1520 100%);
--card:rgba(8,15,28,0.9);--card-hover:rgba(12,22,40,0.95);--border:rgba(0,255,136,0.2);--border-light:rgba(0,255,136,0.1);
--fg:#00ff88;--fg-muted:#4ade80;--accent:#00d4ff;--accent-hover:#00b8d9;--accent-glow:rgba(0,212,255,0.3);
--success:#00ff88;--danger:#ff2d6b;--warning:#ffb800;
--ce-header:rgba(0,255,136,0.3);--pe-header:rgba(255,45,107,0.3);
--itm-ce:rgba(0,80,40,0.4);--itm-pe:rgba(80,10,30,0.4);--otm-ce:rgba(0,60,30,0.3);--otm-pe:rgba(60,8,22,0.3);
--atm:rgba(80,60,0,0.4);--text-on-colored:#00ff88;--strike-bg:rgba(0,255,136,0.08);
--shadow:0 4px 24px rgba(0,212,255,0.15);--glow:0 0 30px rgba(0,255,136,0.2);
--glass:rgba(8,15,28,0.7);--glass-border:rgba(0,255,136,0.15);
--gradient-primary:linear-gradient(135deg,#00d4ff,#00ff88);--gradient-accent:linear-gradient(135deg,#ff2d6b,#ff6b00);
--tab-active-bg:linear-gradient(135deg,#006670,#008855);--tab-active-border:#00ff88;}
/* 🌲 EMERALD FOREST */
:root[data-theme="emerald"]{
--bg:#071210;--bg-gradient:linear-gradient(135deg,#071210 0%,#0a1f1a 50%,#0f2920 100%);
--card:rgba(10,31,26,0.85);--card-hover:rgba(15,41,32,0.9);--border:rgba(52,211,153,0.2);--border-light:rgba(52,211,153,0.1);
--fg:#d1fae5;--fg-muted:#6ee7b7;--accent:#10b981;--accent-hover:#059669;--accent-glow:rgba(16,185,129,0.25);
--success:#34d399;--danger:#f87171;--warning:#fbbf24;
--ce-header:rgba(16,185,129,0.5);--pe-header:rgba(239,68,68,0.5);
--itm-ce:rgba(6,78,59,0.5);--itm-pe:rgba(124,45,18,0.4);--otm-ce:rgba(6,95,70,0.4);--otm-pe:rgba(154,52,18,0.3);
--atm:rgba(120,53,15,0.5);--text-on-colored:#d1fae5;--strike-bg:rgba(52,211,153,0.1);
--shadow:0 4px 24px rgba(0,0,0,0.4);--glow:0 0 25px rgba(16,185,129,0.2);
--glass:rgba(10,31,26,0.6);--glass-border:rgba(52,211,153,0.12);
--gradient-primary:linear-gradient(135deg,#10b981,#06b6d4);--gradient-accent:linear-gradient(135deg,#059669,#0d9488);
--tab-active-bg:linear-gradient(135deg,#047857,#059669);--tab-active-border:#10b981;}
/* 🌅 SUNSET BLAZE */
:root[data-theme="sunset"]{
--bg:#140a08;--bg-gradient:linear-gradient(135deg,#140a08 0%,#1f1008 50%,#2a1510 100%);
--card:rgba(31,16,8,0.85);--card-hover:rgba(42,21,16,0.9);--border:rgba(251,146,60,0.2);--border-light:rgba(251,146,60,0.1);
--fg:#fed7aa;--fg-muted:#fb923c;--accent:#f97316;--accent-hover:#ea580c;--accent-glow:rgba(249,115,22,0.25);
--success:#4ade80;--danger:#f87171;--warning:#fbbf24;
--ce-header:rgba(74,222,128,0.5);--pe-header:rgba(248,113,113,0.5);
--itm-ce:rgba(6,78,59,0.4);--itm-pe:rgba(124,45,18,0.5);--otm-ce:rgba(6,95,70,0.3);--otm-pe:rgba(154,52,18,0.4);
--atm:rgba(120,53,15,0.5);--text-on-colored:#fed7aa;--strike-bg:rgba(251,146,60,0.1);
--shadow:0 4px 24px rgba(0,0,0,0.5);--glow:0 0 25px rgba(249,115,22,0.2);
--glass:rgba(31,16,8,0.6);--glass-border:rgba(251,146,60,0.12);
--gradient-primary:linear-gradient(135deg,#f97316,#ef4444);--gradient-accent:linear-gradient(135deg,#ea580c,#dc2626);
--tab-active-bg:linear-gradient(135deg,#c2410c,#ea580c);--tab-active-border:#f97316;}
/* 💎 CRYSTAL BLUE */
:root[data-theme="crystal"]{
--bg:#f0f7ff;--bg-gradient:linear-gradient(135deg,#f0f7ff 0%,#e0effe 50%,#cce4fd 100%);
--card:rgba(255,255,255,0.88);--card-hover:rgba(240,249,255,0.95);--border:rgba(59,130,246,0.2);--border-light:rgba(59,130,246,0.12);
--fg:#0c1a2e;--fg-muted:#4a6fa5;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-glow:rgba(37,99,235,0.18);
--success:#059669;--danger:#dc2626;--warning:#d97706;
--ce-header:rgba(37,99,235,0.55);--pe-header:rgba(220,38,38,0.55);
--itm-ce:#dbeafe;--itm-pe:#fee2e2;--otm-ce:#eff6ff;--otm-pe:#fff1f2;
--atm:#fef9c3;--text-on-colored:#0c1a2e;--strike-bg:rgba(59,130,246,0.1);
--shadow:0 4px 24px rgba(37,99,235,0.08);--glow:0 0 20px rgba(37,99,235,0.15);
--glass:rgba(255,255,255,0.72);--glass-border:rgba(59,130,246,0.18);
--gradient-primary:linear-gradient(135deg,#2563eb,#06b6d4);--gradient-accent:linear-gradient(135deg,#1d4ed8,#0284c7);
--tab-active-bg:linear-gradient(135deg,#1d4ed8,#2563eb);--tab-active-border:#2563eb;}
/* ============= v15.0 BASE STYLES ============= */
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg-gradient);background-attachment:fixed;color:var(--fg);font-size:14px;line-height:1.5;overflow-x:hidden;min-height:100vh;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:100%;padding:0.5rem;padding-bottom:80px}
/* ============= v15.0 MARQUEE TICKER ============= */
.ticker-wrap{background:var(--glass);border-bottom:1px solid var(--glass-border);overflow:hidden;
padding:0.35rem 0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);position:sticky;top:0;z-index:200;
will-change:transform;height:36px;display:flex;align-items:center}
.ticker{display:flex;gap:1.5rem;white-space:nowrap;will-change:transform}
.ticker-item{display:flex;align-items:center;gap:0.4rem;white-space:nowrap;
padding:0.3rem 0.8rem;background:var(--card);border-radius:6px;border:1px solid var(--border-light);flex-shrink:0;
transition:all 0.2s;backdrop-filter:blur(8px)}
.ticker-item:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.ticker-name{font-weight:800;font-size:0.7rem;color:var(--accent);letter-spacing:0.5px;text-transform:uppercase}
.ticker-price{font-weight:700;font-size:0.78rem;color:var(--fg);font-family:'JetBrains Mono',monospace}
.ticker-change{font-weight:700;font-size:0.68rem;padding:0.1rem 0.35rem;border-radius:4px;font-family:'JetBrains Mono',monospace}
.ticker-up{color:#10b981;background:rgba(16,185,129,0.12)}
.ticker-down{color:#ef4444;background:rgba(239,68,68,0.12)}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ============= v15.0 HEADER ============= */
.header{background:var(--glass);padding:1rem 1.2rem;border-radius:16px;margin-bottom:0.6rem;
box-shadow:var(--shadow);border:1px solid var(--glass-border);position:relative;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.8rem;
flex-wrap:wrap;gap:0.5rem}
.header h1{font-size:1.5rem;margin:0;color:var(--fg);font-weight:800;
letter-spacing:-0.5px;background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.welcome-msg{font-size:0.75rem;color:var(--fg-muted);font-style:italic;font-weight:600;
letter-spacing:0.3px;text-align:center;margin-bottom:0rem;padding:0.4rem;
background:var(--card-hover);border-radius:6px;border:1px solid var(--border-light)}
.welcome-name{color:var(--accent);font-weight:700}
.welcome-broker{color:var(--success);font-weight:600}
.theme-switch{display:flex;gap:0.3rem;flex-wrap:wrap;align-items:center}
.theme-btn{background:var(--glass);border:1px solid var(--glass-border);color:var(--fg);
padding:0.35rem 0.65rem;border-radius:8px;cursor:pointer;font-size:0.72rem;font-weight:700;
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(10px);letter-spacing:0.3px}
.theme-btn:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 4px 12px var(--accent-glow)}
.theme-btn.active{background:var(--gradient-primary);color:#fff;border-color:transparent;
box-shadow:0 4px 16px var(--accent-glow);transform:translateY(-1px)}
/* Debug Toggle */
.debug-toggle-container{display:flex;align-items:center;gap:0.4rem;margin-left:0.8rem;padding-left:0.8rem;border-left:1px solid var(--border)}
.debug-toggle-label{font-size:0.72rem;color:var(--fg-muted);font-weight:600}
.debug-switch{position:relative;display:inline-block;width:38px;height:20px}
.debug-switch input{opacity:0;width:0;height:0}
.debug-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--card);
border:1px solid var(--border);transition:.3s;border-radius:20px}
.debug-slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;
background-color:var(--fg-muted);transition:.3s;border-radius:50%}
.debug-switch input:checked + .debug-slider{background:var(--gradient-primary);border-color:var(--accent)}
.debug-switch input:checked + .debug-slider:before{transform:translateX(18px);background-color:#fff}
/* v15.0 Strategy Bar */
.strategy-bar{display:flex;align-items:center;justify-content:center;gap:0.8rem;flex-wrap:wrap;padding:0.5rem 1rem;margin-top:0.6rem;
background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;backdrop-filter:blur(16px)}
.strategy-bar-section{display:flex;align-items:center;gap:0.4rem;padding:0 0.6rem;border-right:1px solid var(--border)}
.strategy-bar-section:last-child{border-right:none;padding-right:0}
.algo-info-icon{cursor:help;font-size:0.7rem;opacity:0.6;transition:opacity 0.2s;position:relative}
.algo-info-icon:hover{opacity:1}
.strategy-bar-title{font-size:0.8rem;font-weight:700;color:var(--primary)}
.strategy-bar-select{background:var(--card);border:1px solid var(--border);color:var(--fg);padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:600;cursor:pointer}
.strategy-bar-vix{font-size:0.7rem;color:var(--warning);font-weight:600;padding:0.2rem 0.5rem;background:rgba(255,193,7,0.15);border-radius:4px}
.strategy-bar-label{font-size:0.65rem;font-weight:700;color:var(--fg-muted);text-transform:uppercase}
.strategy-bar-status{font-size:0.7rem;color:var(--fg-muted);font-weight:600}
.strategy-bar-pnl{font-size:0.8rem;font-weight:800}
.strategy-bar-pnl.profit{color:var(--success)}
.strategy-bar-pnl.loss{color:var(--danger)}
.strat-btn{padding:0.3rem 0.6rem;border:none;border-radius:5px;font-size:0.65rem;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.strat-btn.sell{background:linear-gradient(135deg,#e94560,#c73e54);color:#fff}
.strat-btn.buy{background:linear-gradient(135deg,#4ecca3,#3db892);color:#000}
.strat-btn.stop{background:linear-gradient(135deg,#ff9800,#f57c00);color:#000}
.strat-btn.exit-all{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff}
.strat-btn.report{background:linear-gradient(135deg,#3282b8,#2a6f9e);color:#fff}
.strat-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,0.3)}
.strat-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
/* Strategy Mode Badges */
.mode-badge{padding:2px 6px;border-radius:4px;font-size:0.65rem;font-weight:700;text-transform:uppercase}
.mode-badge.paper{background:#f59e0b;color:#fff}
.mode-badge.real{background:#10b981;color:#fff}
.mode-badge.short-straddle{background:linear-gradient(135deg,#e94560,#9c27b0);color:#fff}
.mode-badge.long-straddle{background:linear-gradient(135deg,#4ecca3,#00bcd4);color:#000}
.mode-badge.short-strangle{background:linear-gradient(135deg,#ff5722,#e91e63);color:#fff}
.mode-badge.long-strangle{background:linear-gradient(135deg,#8bc34a,#cddc39);color:#000}
.summary{display:grid;grid-template-columns:repeat(7,1fr);gap:0.5rem;margin-top:0.6rem}
.summary-card{background:var(--card-hover);padding:0.7rem 0.6rem;border-radius:8px;
border:1px solid var(--border-light);transition:all 0.3s;backdrop-filter:blur(10px);
position:relative;overflow:hidden;min-height:75px}
.summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--accent) 0%,var(--success) 100%);transform:scaleX(0);
transition:transform 0.3s;transform-origin:left}
.summary-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--glow)}
.summary-card:hover::before{transform:scaleX(1)}
.summary-label{font-size:0.7rem;color:var(--fg-muted);margin-bottom:0.3rem;font-weight:700;
text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.summary-value{font-size:1.5rem;font-weight:900;color:var(--fg);line-height:1;white-space:nowrap}
.profit{color:var(--success)}
.loss{color:var(--danger)}
/* ============= LAYOUT ============= */
.layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-top:0.6rem}
@media(max-width:1200px){.layout-grid{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:0.6rem}
.panel{background:var(--card);border-radius:12px;padding:0.8rem;border:1px solid var(--border);
display:flex;flex-direction:column;box-shadow:var(--shadow);backdrop-filter:blur(15px);
position:relative;transition:all 0.3s}
.panel:hover{border-color:var(--accent);box-shadow:var(--glow)}
.panel.fixed-height{height:600px;overflow:hidden}
.panel.expanded{height:auto;max-height:none;overflow:visible}
.panel.expanded .table-wrap-fixed{height:auto;max-height:600px}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;
padding-bottom:0.5rem;border-bottom:2px solid var(--border-light);cursor:pointer;
transition:background 0.2s,border-color 0.2s}
.panel-header:hover{background:rgba(99,102,241,0.05);border-color:var(--accent)}
.panel-title{font-size:1rem;font-weight:800;color:var(--accent);display:flex;align-items:center;
gap:0.4rem;letter-spacing:-0.2px;transition:color 0.2s}
.panel-header:hover .panel-title{color:var(--success)}
.collapse-btn{background:transparent;border:none;color:var(--fg-muted);font-size:1.1rem;
cursor:pointer;padding:0 0.4rem;transition:transform 0.3s,color 0.2s}
.panel.expanded .collapse-btn{transform:rotate(180deg)}
.panel-header:hover .collapse-btn{color:var(--accent)}
/* ============= INDEX HEADER ============= */
.index-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.6rem;
padding:0.8rem;background:var(--card-hover);border-radius:10px;border:1px solid var(--border-light);
flex-wrap:wrap;gap:0.8rem;transition:all 0.3s}
.index-header:hover{background:rgba(99,102,241,0.08);border-color:var(--accent);
box-shadow:0 4px 12px rgba(99,102,241,0.15);transform:translateY(-1px)}
.index-info{flex:1;min-width:150px}
.index-title{font-size:1.1rem;font-weight:800;color:var(--accent);letter-spacing:-0.3px;
text-shadow:0 2px 4px rgba(0,0,0,0.2);cursor:pointer;transition:all 0.2s}
.index-title:hover{opacity:0.8;transform:scale(1.02)}
.index-spot{font-size:1.3rem;font-weight:800;color:var(--success);
text-shadow:0 2px 4px rgba(0,0,0,0.2);transition:color 0.2s}
.index-header:hover .index-spot{color:#10b981}
.index-expiry{font-size:0.75rem;color:var(--fg-muted);margin-top:0.3rem;font-weight:600;
letter-spacing:0.3px}
.panel-toggle-icon{transition:transform 0.3s,color 0.2s}
.index-header:hover .panel-toggle-icon{color:var(--success);transform:scale(1.2)}
.fii-dii-grid{display:flex;flex-direction:column;gap:0.4rem;min-width:280px}
.fii-dii-box{background:var(--card);padding:0.4rem 0.6rem;border-radius:6px;
border:1px solid var(--border-light)}
.fii-dii-label{font-size:0.65rem;color:var(--fg-muted);font-weight:700;text-transform:uppercase;
letter-spacing:0.3px;margin-bottom:0.3rem;text-align:center;border-bottom:1px solid var(--border-light);
padding-bottom:0.2rem}
.fii-dii-table{display:grid;grid-template-columns:auto 1fr 1fr;gap:0.2rem 0.5rem;font-size:0.65rem}
.fii-dii-row-label{color:var(--fg-muted);font-weight:600;text-align:left}
.fii-dii-col-header{font-weight:700;text-align:center;font-size:0.6rem;
text-transform:uppercase;padding:0.3rem 0.2rem;border-radius:4px}
.fii-dii-col-header.yesterday{background:rgba(251,191,36,0.2);color:#d97706;border:1px solid rgba(251,191,36,0.3)}
.fii-dii-col-header.today{background:rgba(16,185,129,0.2);color:#059669;border:1px solid rgba(16,185,129,0.3)}
.fii-dii-value{font-weight:800;text-align:center;padding:0.2rem;border-radius:3px}
.fii-dii-value.yesterday-bg{background:rgba(251,191,36,0.1)}
.fii-dii-value.today-bg{background:rgba(16,185,129,0.1)}
.fii-dii-value.positive{color:var(--success)}
.fii-dii-value.negative{color:var(--danger)}
.fii-box{background:rgba(124,58,237,0.1);border:2px solid rgba(124,58,237,0.3)}
.dii-box{background:rgba(16,185,129,0.1);border:2px solid rgba(16,185,129,0.3)}
.fii-label{color:#7c3aed;font-weight:800}
.dii-label{color:#059669;font-weight:800}
/* ============= TABLES ============= */
.table-wrap{flex:1;overflow-y:auto;max-height:100%;scrollbar-width:thin;
scrollbar-color:var(--accent) transparent}
.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
.table-wrap-fixed{height:500px;overflow-y:auto;scrollbar-width:thin;
scrollbar-color:var(--accent) transparent}
.table-wrap-fixed::-webkit-scrollbar{width:8px}
.table-wrap-fixed::-webkit-scrollbar-track{background:transparent}
.table-wrap-fixed::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}
.strikes-table,.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:0.78rem;table-layout:fixed}
.strikes-table th,.data-table th{background:var(--glass);padding:0.45rem 0.3rem;text-align:center;
font-size:0.65rem;color:var(--fg-muted);border-bottom:1px solid var(--border);position:sticky;
top:0;z-index:10;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
.strikes-table td,.data-table td{padding:0.45rem 0.3rem;text-align:center;
border-bottom:1px solid var(--border-light);transition:all 0.15s;font-size:0.74rem;font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis}
.data-table{text-align:center}
.data-table td{text-align:center;padding-left:0.3rem}
.data-table td:nth-child(3),.data-table td:nth-child(4),.data-table td:nth-child(5){text-align:center}
.data-table td:first-child{font-weight:700;font-size:0.75rem}
.strikes-table tr:hover,.data-table tbody tr:hover{background:var(--card-hover);
transform:translateX(2px);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.data-table tr{transition:all 0.2s ease}
.side-buy{color:var(--success);font-weight:800}
.side-sell{color:var(--danger);font-weight:800}
.status-filled{color:var(--success);font-weight:700}
.status-rejected{color:var(--danger);font-weight:700}
.status-open{color:var(--warning);font-weight:700}
.status-pending{color:var(--accent);font-weight:700}
/* ============= STRIKE COLORS ============= */
.strike-cell{font-weight:900;font-size:0.9rem;color:var(--fg);letter-spacing:-0.2px;
background:var(--strike-bg)!important;border-left:2px solid var(--border)!important;
border-right:2px solid var(--border)!important;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.strike-atm .strike-cell{background:var(--atm)!important;color:var(--text-on-colored)!important;
border-left:3px solid var(--warning)!important;border-right:3px solid var(--warning)!important;
box-shadow:0 0 15px rgba(245,158,11,0.4)}
.strike-atm{background:var(--atm)!important;border-left:2px solid var(--warning)!important;
border-right:2px solid var(--warning)!important;color:var(--text-on-colored)!important}
.strike-itm-ce{background:var(--itm-ce)!important;color:var(--text-on-colored)!important}
.strike-otm-ce{background:var(--otm-ce)!important;color:var(--text-on-colored)!important}
.strike-itm-pe{background:var(--itm-pe)!important;color:var(--text-on-colored)!important}
.strike-otm-pe{background:var(--otm-pe)!important;color:var(--text-on-colored)!important}
/* ============= OPTION HEADERS ============= */
.ce-header{background:var(--ce-header)!important;color:var(--text-on-colored)!important;
font-weight:800;letter-spacing:0.5px}
.pe-header{background:var(--pe-header)!important;color:var(--text-on-colored)!important;
font-weight:800;letter-spacing:0.5px}
.strike-header{background:var(--strike-bg)!important;color:var(--fg)!important;font-weight:900;
border-left:2px solid var(--border)!important;border-right:2px solid var(--border)!important}
.ltp{font-weight:700;font-size:0.8rem;color:var(--fg)}
.vol{font-size:0.7rem;font-weight:600;color:var(--fg-muted)}
.oi{font-size:0.7rem;font-weight:600;color:var(--warning)}
/* ============= CE/PE COLUMN TINTING (data cells) ============= */
/* Applied to | cells in CE columns and PE columns of option chain */
.ce-col{background:rgba(5,150,105,0.06)!important}
.pe-col{background:rgba(185,28,28,0.06)!important}
:root[data-theme="light"] .ce-col{background:rgba(5,150,105,0.07)!important}
:root[data-theme="light"] .pe-col{background:rgba(220,38,38,0.07)!important}
:root[data-theme="glass"] .ce-col{background:rgba(52,211,153,0.07)!important}
:root[data-theme="glass"] .pe-col{background:rgba(248,113,113,0.07)!important}
:root[data-theme="cyber"] .ce-col{background:rgba(0,255,136,0.05)!important}
:root[data-theme="cyber"] .pe-col{background:rgba(255,45,107,0.05)!important}
:root[data-theme="emerald"] .ce-col{background:rgba(16,185,129,0.08)!important}
:root[data-theme="emerald"] .pe-col{background:rgba(239,68,68,0.06)!important}
:root[data-theme="sunset"] .ce-col{background:rgba(74,222,128,0.06)!important}
:root[data-theme="sunset"] .pe-col{background:rgba(248,113,113,0.07)!important}
:root[data-theme="crystal"] .ce-col{background:rgba(37,99,235,0.07)!important}
:root[data-theme="crystal"] .pe-col{background:rgba(220,38,38,0.06)!important}
/* ============= TRADE CONTROLS ============= */
.filter-btn{background:var(--card-hover);border:2px solid var(--border);color:var(--fg);
padding:0.35rem 0.8rem;border-radius:6px;font-size:0.7rem;font-weight:700;cursor:pointer;
transition:all 0.2s;text-transform:uppercase;letter-spacing:0.3px}
.filter-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* v15.0 FIX: Strategy buttons with gradients - show active state with glow and scale */
.filter-btn.active[data-filter*="straddle"],
.filter-btn.active[data-filter*="strangle"]{
box-shadow:0 0 0 3px rgba(255,255,255,0.6), 0 4px 15px rgba(0,0,0,0.4);
transform:scale(1.08) translateY(-2px);
border:3px solid #fff !important;
font-weight:900;
}
.trade-controls{display:flex;gap:0.3rem;align-items:center;justify-content:center;flex-wrap:nowrap}
.lot-select{background:var(--card-hover);border:2px solid var(--border);color:var(--fg);
padding:0.4rem 0.6rem;border-radius:6px;font-size:0.75rem;font-weight:700;min-width:55px;
cursor:pointer;transition:all 0.2s;backdrop-filter:blur(10px)}
.lot-select:hover{border-color:var(--accent);transform:scale(1.05)}
.trade-btn{padding:0.5rem 1.2rem;border:none;border-radius:6px;font-size:0.75rem;font-weight:800;
cursor:pointer;transition:all 0.3s;text-transform:uppercase;letter-spacing:0.5px;min-width:65px;
box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.trade-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.trade-btn:active{transform:translateY(0)}
.buy-btn{background:linear-gradient(135deg,#00c853 0%,#00e676 50%,#69f0ae 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.25)}
.sell-btn{background:linear-gradient(135deg,#ff1744 0%,#f44336 50%,#ff5252 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.25)}
.exit-btn{background:linear-gradient(135deg,#ff1744 0%,#f44336 50%,#ff5252 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.25);
padding:0.4rem 0.9rem;border:none;border-radius:6px;font-size:0.7rem;font-weight:800;
cursor:pointer;transition:all 0.3s;text-transform:uppercase;min-width:60px;
box-shadow:0 2px 8px rgba(239,68,68,0.3)}
.exit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(239,68,68,0.5)}
/* ============= VOLUME HIGHLIGHTING ============= */
.vol-high{animation:pulseVolume 2.5s infinite;background:rgba(251,191,36,0.25)!important;
border-left:2px solid var(--warning)!important;border-right:2px solid var(--warning)!important;
box-shadow:0 0 10px rgba(251,191,36,0.4)}
@keyframes pulseVolume{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.02)}}
/* ============= HOVER CHART ============= */
/* ============= v15.0 ACCOUNT CARDS ============= */
.accounts-row{display:grid;grid-template-columns:1fr auto 1fr;gap:0.8rem;margin:0.6rem 0;align-items:stretch}
.account-card{padding:1rem;border-radius:14px;border:1px solid;position:relative;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all 0.3s}
.account-card:hover{transform:translateY(-2px)}
.account-card.paper{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(251,191,36,0.05));border-color:rgba(245,158,11,0.25);box-shadow:0 4px 20px rgba(245,158,11,0.08)}
.account-card.real{background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(5,150,105,0.05));border-color:rgba(16,185,129,0.25);box-shadow:0 4px 20px rgba(16,185,129,0.08)}
.account-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border-light)}
.account-icon{font-size:1.2rem}
.account-title{font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px}
.account-card.paper .account-title{color:#f59e0b}
.account-card.real .account-title{color:#10b981}
.account-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem}
.account-stat{display:flex;flex-direction:column;gap:0.1rem}
.account-stat-label{font-size:0.58rem;color:var(--fg-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.account-stat-value{font-size:0.95rem;font-weight:800;font-family:"JetBrains Mono",monospace}
/* Paper/Real Toggle Enhancement */
.toggle-box {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1.2rem;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
}
.toggle-label-text {
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.toggle-label-text.real {
color: #ef4444;
}
.toggle-label-text.paper {
color: #10b981;
}
/* Paper/Real Toggle - Fixed */
.paper-toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
cursor: pointer;
}
.paper-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.paper-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10b981;
transition: .4s;
border-radius: 24px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.paper-toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.paper-toggle-switch input:checked + .paper-toggle-slider {
background-color: #ef4444;
}
.paper-toggle-switch input:checked + .paper-toggle-slider:before {
transform: translateX(26px);
}
.toggle-box input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-box .toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #10b981;
transition: .4s;
border-radius: 24px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-box .toggle-button {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.toggle-box input:checked + .toggle-slider {
background-color: #ef4444;
}
.toggle-box input:checked ~ .toggle-button {
transform: translateX(26px);
}
.mode-toggle-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: var(--card);
border-radius: 16px;
border: 1px solid var(--border);
min-width: 280px;
}
.user-info-box {
text-align: center;
font-size: 0.85rem;
color: var(--fg-muted);
line-height: 1.5;
}
.user-name {
color: var(--accent);
font-weight: 700;
}
.mode-indicator {
font-size: 0.9rem;
font-weight: 700;
padding: 0.5rem 1rem;
border-radius: 8px;
text-align: center;
}
.mode-indicator.real {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.mode-indicator.paper {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.account-card.paper .account-stat-value{color:#f59e0b}
.account-card.real .account-stat-value{color:#10b981}
.mode-toggle-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;padding:0 1.5rem}
.user-info-box{text-align:center;font-size:0.72rem;color:var(--fg-muted);margin-bottom:0.4rem}
.user-name{color:var(--accent);font-weight:700}
.user-broker{color:var(--success);font-weight:600}
.toggle-box{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 0.8rem;background:var(--card);border-radius:8px;border:1px solid var(--border)}
.toggle-label-text{font-size:0.7rem;font-weight:700}
.toggle-label-text.real{color:#10b981}
.toggle-label-text.paper{color:#f59e0b}
.mode-indicator{font-size:0.8rem;font-weight:800;padding:0.3rem 0.8rem;border-radius:6px}
.mode-indicator.real{background:rgba(16,185,129,0.2);color:#10b981}
.mode-indicator.paper{background:rgba(251,191,36,0.2);color:#f59e0b}
.live-badge{display:flex;align-items:center;gap:0.3rem;font-size:0.65rem;color:var(--success);font-weight:700;padding:0.2rem 0.5rem;background:rgba(16,185,129,0.15);border:1px solid var(--success);border-radius:12px}
.live-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hover-chart{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
background:var(--card);border:2px solid var(--border);border-radius:12px;padding:1rem;
box-shadow:var(--shadow);backdrop-filter:blur(20px);z-index:1000;min-width:500px;
max-width:90vw;display:none;animation:slideUp 0.3s ease-out}
.hover-chart.visible{display:block}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.8rem;
padding-bottom:0.5rem;border-bottom:2px solid var(--border-light)}
.chart-title{font-size:0.9rem;font-weight:800;color:var(--accent);letter-spacing:0.3px}
.chart-close{background:transparent;border:none;color:var(--fg-muted);font-size:1.2rem;
cursor:pointer;padding:0 0.3rem;transition:all 0.2s}
.chart-close:hover{color:var(--danger);transform:rotate(90deg)}
.chart-canvas-wrapper{width:100%;height:200px;position:relative}
.chart-canvas{width:100%;height:100%;background:var(--card-hover);border-radius:8px;
border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;
font-size:0.8rem;color:var(--fg-muted)}
@keyframes slideUp{from{transform:translateX(-50%) translateY(100px);opacity:0}
to{transform:translateX(-50%) translateY(0);opacity:1}}
/* ============= TABLE FORMATTING ============= */
.data-table tbody tr{border-bottom:1px solid var(--border-light)}
.data-table tbody tr:nth-child(odd){background:rgba(0,0,0,0.02)}
.data-table tbody tr:hover{background:var(--card-hover)!important;transform:translateX(3px);
box-shadow:0 2px 10px rgba(0,0,0,0.15)}
.data-table td{padding:0.6rem;font-size:0.8rem}
.data-table td:first-child{font-weight:700;color:var(--fg)}
.pos-closed{opacity:0.65;font-style:italic}
.pos-open{font-weight:700}
/* ============= TOAST ============= */
.toast{position:fixed;top:20px;right:20px;padding:1rem 1.5rem;border-radius:10px;font-weight:800;
z-index:9999;animation:slideInRight 0.4s cubic-bezier(0.4,0,0.2,1);font-size:0.85rem;
box-shadow:0 8px 24px rgba(0,0,0,0.3);backdrop-filter:blur(10px);
border:2px solid transparent;letter-spacing:0.3px}
.toast-success{background:var(--success);color:#fff;border-color:rgba(255,255,255,0.3)}
.toast-error{background:var(--danger);color:#fff;border-color:rgba(255,255,255,0.3)}
.toast-info{background:#3282b8;color:#fff;border-color:rgba(255,255,255,0.3)}
@keyframes slideInRight{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
/* ============= MISC ============= */
.pulse{width:8px;height:8px;background:var(--success);border-radius:50%;
animation:pulse 2s infinite;box-shadow:0 0 10px var(--success)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(1.2)}}
.no-data{text-align:center;padding:1.5rem;color:var(--fg-muted);font-style:italic;
font-size:0.85rem;font-weight:600}
/* ============= v14.5 MOBILE PROFESSIONAL TRADING UI ============= */
/* Bloomberg Terminal × Zerodha Kite — Vibrant Stock Market UI */
:root{
--m-bg:#060b18;--m-card:rgba(12,18,38,0.85);--m-card2:rgba(18,26,50,0.7);
--m-border:rgba(255,255,255,0.06);--m-border2:rgba(255,255,255,0.1);
--m-profit:#00d4aa;--m-loss:#ff3b5c;--m-blue:#00b4d8;--m-purple:#7b61ff;
--m-amber:#ffb700;--m-text:#e8ecf1;--m-muted:rgba(255,255,255,0.35);
--m-dim:rgba(255,255,255,0.18);--m-nav-h:54px;--m-sticky-h:auto;
--m-radius:10px;--m-radius-sm:6px;
}
/* ---- BOTTOM NAVIGATION ---- */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:10000;
background:rgba(6,11,24,0.96);border-top:1px solid var(--m-border2);
backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
padding:0;padding-bottom:env(safe-area-inset-bottom,0);
box-shadow:0 -2px 30px rgba(0,0,0,0.6)}
.mob-nav-items{display:flex;justify-content:space-around;align-items:stretch;height:var(--m-nav-h)}
.mob-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;padding:4px 0;cursor:pointer;color:var(--m-muted);
font-size:0.42rem;font-weight:800;transition:color 0.2s;border:none;background:none;
text-decoration:none;flex:1;position:relative;letter-spacing:0.6px;text-transform:uppercase;
-webkit-tap-highlight-color:transparent;min-height:48px;user-select:none}
.mob-nav-btn .ni{font-size:1.15rem;line-height:1;transition:transform 0.2s ease}
.mob-nav-btn .nl{font-size:0.42rem;margin-top:2px;white-space:nowrap;opacity:0.7}
.mob-nav-btn.active{color:var(--m-blue)}
.mob-nav-btn.active .ni{transform:scale(1.18)}
.mob-nav-btn.active .nl{opacity:1}
.mob-nav-btn.active::after{content:'';position:absolute;top:-1px;left:20%;right:20%;
height:2.5px;background:linear-gradient(90deg,transparent,var(--m-blue),transparent);border-radius:0 0 3px 3px}
.mob-nav-btn:active{transform:scale(0.9)}
.mob-nav-btn:active .ni{transform:scale(1.3)}
/* ---- STICKY TOP: TICKER + HEADER + STATS ---- */
.mob-sticky{display:none;position:sticky;top:0;z-index:9998;
background:rgba(6,11,24,0.92);backdrop-filter:blur(20px) saturate(150%);
-webkit-backdrop-filter:blur(20px) saturate(150%);
border-bottom:1px solid var(--m-border)}
.mob-hdr{display:flex;align-items:center;justify-content:space-between;
padding:7px 12px 4px;gap:6px}
.mob-logo{font-size:0.72rem;font-weight:900;letter-spacing:-0.5px;
background:linear-gradient(135deg,var(--m-blue),var(--m-profit));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
display:flex;align-items:center;gap:5px;white-space:nowrap}
.mob-logo .logo-dot{width:7px;height:7px;border-radius:50%;
background:var(--m-profit);box-shadow:0 0 8px var(--m-profit),0 0 20px rgba(0,212,170,0.3);
animation:m-pulse 2s ease infinite}
@keyframes m-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}
.mob-spot{font-size:0.62rem;font-weight:800;color:#fff;
background:linear-gradient(135deg,rgba(0,180,216,0.15),rgba(0,180,216,0.08));
padding:3px 8px;border-radius:5px;border:1px solid rgba(0,180,216,0.25);
font-variant-numeric:tabular-nums;white-space:nowrap}
.mob-pnl-badge{font-size:0.65rem;font-weight:900;padding:3px 10px;border-radius:5px;
white-space:nowrap;min-width:65px;text-align:center;font-variant-numeric:tabular-nums;
transition:all 0.3s ease}
.mob-pnl-badge.profit{background:linear-gradient(135deg,rgba(0,212,170,0.2),rgba(0,212,170,0.08));
color:var(--m-profit);border:1px solid rgba(0,212,170,0.3);
text-shadow:0 0 12px rgba(0,212,170,0.4)}
.mob-pnl-badge.loss{background:linear-gradient(135deg,rgba(255,59,92,0.2),rgba(255,59,92,0.08));
color:var(--m-loss);border:1px solid rgba(255,59,92,0.3);
text-shadow:0 0 12px rgba(255,59,92,0.4)}
/* Stats Strip */
.mob-stats{display:flex;gap:5px;padding:5px 10px 7px;overflow-x:auto;
-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.mob-stats::-webkit-scrollbar{display:none}
.mob-stat{flex:0 0 auto;min-width:72px;background:var(--m-card);
border:1px solid var(--m-border);border-radius:var(--m-radius-sm);
padding:5px 8px;text-align:center;scroll-snap-align:start;
transition:border-color 0.2s}
.mob-stat:active{border-color:var(--m-blue)}
.mob-stat .sl{font-size:0.38rem;color:var(--m-muted);font-weight:800;
text-transform:uppercase;letter-spacing:0.8px;line-height:1}
.mob-stat .sv{font-size:0.68rem;font-weight:900;margin-top:2px;line-height:1.1;
font-variant-numeric:tabular-nums;color:var(--m-text)}
/* ---- TAB SECTIONS ---- */
.mob-section{display:none;padding:0 0 calc(var(--m-nav-h) + 12px + env(safe-area-inset-bottom,0))}
.mob-section.active{display:block;animation:m-fadeIn 0.2s ease}
@keyframes m-fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* ---- DASHBOARD TAB ---- */
.mob-accounts{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px 4px}
.mob-acct{background:var(--m-card);border:1px solid var(--m-border);
border-radius:var(--m-radius);padding:10px 12px;position:relative;overflow:hidden}
.mob-acct::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.mob-acct:first-child::before{background:linear-gradient(90deg,var(--m-amber),var(--m-profit))}
.mob-acct:last-child::before{background:linear-gradient(90deg,var(--m-blue),var(--m-purple))}
.mob-acct-title{font-size:0.44rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;
color:var(--m-muted);display:flex;align-items:center;gap:4px;margin-bottom:5px}
.mob-acct-val{font-size:0.88rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.mob-acct-row{display:flex;justify-content:space-between;margin-top:5px;font-size:0.44rem;
color:var(--m-muted)}
.mob-acct-row span:last-child{font-weight:900;color:var(--m-text)}
/* Market Info */
.mob-market{margin:6px 10px;padding:10px 12px;background:var(--m-card);
border:1px solid var(--m-border);border-radius:var(--m-radius)}
.mob-market-row{display:flex;justify-content:space-between;align-items:center;
font-size:0.52rem;color:var(--m-muted)}
.mob-market-row b{color:var(--m-text);font-weight:800}
.mob-market-row+.mob-market-row{margin-top:4px;padding-top:4px;
border-top:1px solid var(--m-border)}
/* Strategy Bar */
.mob-strat-bar{margin:6px 10px;padding:10px 12px;
background:linear-gradient(160deg,rgba(123,97,255,0.08),rgba(0,180,216,0.06));
border:1px solid rgba(123,97,255,0.15);border-radius:var(--m-radius)}
.mob-strat-title{font-size:0.48rem;font-weight:800;color:var(--m-muted);
text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;
display:flex;align-items:center;gap:5px}
.mob-strat-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.mob-strat-row:last-child{margin-bottom:0}
.mob-strat-btn{padding:7px 12px;border-radius:var(--m-radius-sm);font-size:0.48rem;font-weight:800;
cursor:pointer;border:none;transition:all 0.15s;-webkit-tap-highlight-color:transparent;
letter-spacing:0.3px}
.mob-strat-btn:active{transform:scale(0.92);filter:brightness(1.2)}
.mob-strat-btn.sell{background:linear-gradient(135deg,#ff3b5c,#d42a4a);color:#fff;
box-shadow:0 2px 10px rgba(255,59,92,0.3)}
.mob-strat-btn.buy{background:linear-gradient(135deg,#00d4aa,#00a884);color:#000;
box-shadow:0 2px 10px rgba(0,212,170,0.3)}
.mob-strat-btn.stop{background:rgba(255,59,92,0.1);color:var(--m-loss);
border:1px solid rgba(255,59,92,0.2)}
.mob-strat-btn.report{background:rgba(0,180,216,0.1);color:var(--m-blue);
border:1px solid rgba(0,180,216,0.2)}
.mob-strat-btn.algo{background:linear-gradient(135deg,rgba(123,97,255,0.25),rgba(123,97,255,0.12));
color:#a78bfa;border:1px solid rgba(123,97,255,0.25)}
.mob-strat-status{font-size:0.44rem;font-weight:800;padding:5px 10px;border-radius:var(--m-radius-sm);
background:rgba(0,212,170,0.06);color:var(--m-profit);margin-top:6px;text-align:center;
border:1px solid rgba(0,212,170,0.1)}
/* Algo Hedge Card */
.mob-algo-card{margin:6px 10px;padding:10px 12px;
background:linear-gradient(160deg,rgba(15,52,96,0.5),rgba(12,18,38,0.8));
border:1px solid rgba(0,180,216,0.2);border-radius:var(--m-radius);
position:relative;overflow:hidden}
.mob-algo-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--m-blue),var(--m-purple))}
.mob-algo-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mob-algo-title{font-size:0.62rem;font-weight:900;color:var(--m-blue);
display:flex;align-items:center;gap:5px}
.mob-algo-badge{font-size:0.4rem;padding:2px 7px;border-radius:3px;font-weight:800;
letter-spacing:0.5px}
.mob-algo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.mob-algo-stat{text-align:center;padding:6px 4px;background:rgba(0,0,0,0.35);
border-radius:var(--m-radius-sm);border:1px solid var(--m-border)}
.mob-algo-stat .al{font-size:0.36rem;color:var(--m-muted);text-transform:uppercase;
font-weight:800;letter-spacing:0.5px}
.mob-algo-stat .av{font-size:0.62rem;font-weight:900;color:#fff;margin-top:2px;
font-variant-numeric:tabular-nums}
.mob-algo-btns{display:flex;gap:5px;flex-wrap:wrap}
.mob-algo-btn{padding:7px 14px;border-radius:var(--m-radius-sm);font-size:0.48rem;
font-weight:800;cursor:pointer;border:none;transition:all 0.15s;
-webkit-tap-highlight-color:transparent;letter-spacing:0.3px}
.mob-algo-btn:active{transform:scale(0.92)}
.mob-algo-btn.start{background:linear-gradient(135deg,var(--m-profit),#00a884);color:#000;
box-shadow:0 2px 10px rgba(0,212,170,0.3)}
.mob-algo-btn.stop-btn{background:linear-gradient(135deg,var(--m-loss),#d42a4a);color:#fff;
box-shadow:0 2px 10px rgba(255,59,92,0.3)}
.mob-algo-btn.rpt{background:linear-gradient(135deg,var(--m-blue),#0090ad);color:#fff}
.mob-algo-btn.rst{background:var(--m-card);color:var(--m-text);border:1px solid var(--m-border2)}
/* ---- POSITIONS TAB ---- */
.mob-filters{display:flex;gap:4px;padding:8px 10px;overflow-x:auto;
-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--m-border);
scroll-snap-type:x mandatory}
.mob-filters::-webkit-scrollbar{display:none}
.mob-filter{padding:5px 12px;border-radius:20px;font-size:0.44rem;font-weight:800;
cursor:pointer;border:1px solid var(--m-border);background:var(--m-card);
color:var(--m-muted);white-space:nowrap;transition:all 0.2s;
-webkit-tap-highlight-color:transparent;scroll-snap-align:start;letter-spacing:0.3px}
.mob-filter.active{background:rgba(0,180,216,0.12);color:var(--m-blue);
border-color:rgba(0,180,216,0.3)}
.mob-filter:active{transform:scale(0.93)}
/* Position Cards */
.mob-pos-list{padding:6px 10px}
.mob-pos-card{background:var(--m-card);border:1px solid var(--m-border);
border-radius:var(--m-radius);padding:10px 12px;margin-bottom:6px;
transition:all 0.2s;position:relative;overflow:hidden}
.mob-pos-card:active{transform:scale(0.985);border-color:var(--m-border2)}
.mob-pos-card.profit-card{border-left:3px solid var(--m-profit)}
.mob-pos-card.profit-card::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(0,212,170,0.03));pointer-events:none}
.mob-pos-card.loss-card{border-left:3px solid var(--m-loss)}
.mob-pos-card.loss-card::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(255,59,92,0.03));pointer-events:none}
.mob-pos-card.closed-card{opacity:0.4;border-left-color:var(--m-dim)}
.mob-pos-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mob-pos-sym{font-size:0.58rem;font-weight:800;color:var(--m-blue);
display:flex;align-items:center;gap:5px}
.mob-pos-sym .mob-mode-tag{font-size:0.38rem;padding:2px 6px;border-radius:3px;
font-weight:800;letter-spacing:0.3px}
.mob-pos-pnl{font-size:0.75rem;font-weight:900;font-variant-numeric:tabular-nums}
.mob-pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:6px}
.mob-pos-cell{text-align:center}
.mob-pos-cell .cl{font-size:0.36rem;color:var(--m-dim);font-weight:800;
text-transform:uppercase;letter-spacing:0.5px}
.mob-pos-cell .cv{font-size:0.56rem;font-weight:800;color:var(--m-text);
font-variant-numeric:tabular-nums}
.mob-pos-actions{display:flex;gap:5px}
.mob-pos-exit{flex:1;padding:7px;background:linear-gradient(135deg,var(--m-loss),#d42a4a);
color:#fff;border:none;border-radius:var(--m-radius-sm);font-size:0.46rem;font-weight:800;
cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:0.5px;
box-shadow:0 2px 8px rgba(255,59,92,0.25)}
.mob-pos-exit:active{transform:scale(0.95);filter:brightness(1.15)}
.mob-pos-chart-btn{padding:7px 12px;background:rgba(0,180,216,0.1);color:var(--m-blue);
border:1px solid rgba(0,180,216,0.2);border-radius:var(--m-radius-sm);font-size:0.46rem;
font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-pos-chart-btn:active{transform:scale(0.95)}
/* Position Sparkline Canvas */
.mob-pos-spark{height:24px;width:100%;margin:4px 0 2px;opacity:0.6}
/* ---- OPTION CHAIN TAB ---- */
.mob-chain-wrap{padding:0}
.mob-chain-selector{display:flex;gap:0;border-bottom:2px solid var(--m-border);
background:rgba(0,0,0,0.3)}
.mob-chain-idx{flex:1;padding:10px 8px;text-align:center;font-size:0.5rem;font-weight:800;
cursor:pointer;color:var(--m-muted);border-bottom:2.5px solid transparent;
transition:all 0.2s;text-transform:uppercase;letter-spacing:0.8px;
-webkit-tap-highlight-color:transparent;position:relative}
.mob-chain-idx.active{color:var(--m-blue);border-bottom-color:var(--m-blue);
background:rgba(0,180,216,0.04)}
.mob-chain-idx:active{background:rgba(0,180,216,0.08)}
.mob-chain-info{display:flex;justify-content:space-between;align-items:center;
padding:8px 12px;background:var(--m-card)}
.mob-chain-spot{font-size:0.75rem;font-weight:900;color:#fff;
font-variant-numeric:tabular-nums}
.mob-chain-expiry{font-size:0.44rem;color:var(--m-muted);font-weight:700}
.mob-chain-lot{font-size:0.4rem;color:var(--m-dim);font-weight:700}
/* PCR Heatmap */
.mob-heatmap{margin:6px 10px;border-radius:var(--m-radius-sm);overflow:hidden}
.mob-heatbar{height:22px;border-radius:var(--m-radius-sm);position:relative;
background:linear-gradient(90deg,#ff3b5c 0%,#ff8c00 25%,#ffb700 50%,#7ee787 75%,#00d4aa 100%)}
.mob-heatbar-needle{position:absolute;top:-3px;width:3px;height:28px;background:#fff;
border-radius:3px;box-shadow:0 0 10px rgba(255,255,255,0.8),0 0 20px rgba(255,255,255,0.4);
transition:left 0.6s cubic-bezier(0.23,1,0.32,1)}
.mob-heat-labels{display:flex;justify-content:space-between;margin-top:3px;
font-size:0.36rem;font-weight:800;color:var(--m-dim);padding:0 4px;letter-spacing:0.3px}
/* Chain Header */
.mob-chain-hdr{display:grid;grid-template-columns:1fr 50px 1fr;
background:rgba(0,0,0,0.5);padding:7px 10px;font-size:0.38rem;font-weight:800;
color:var(--m-muted);text-transform:uppercase;letter-spacing:0.8px;
border-bottom:1px solid var(--m-border);position:sticky;top:0;z-index:5}
.mob-chain-hdr span:first-child{text-align:right;padding-right:6px;color:var(--m-profit)}
.mob-chain-hdr span:nth-child(2){text-align:center;color:var(--m-blue)}
.mob-chain-hdr span:last-child{text-align:left;padding-left:6px;color:var(--m-loss)}
/* Chain Rows */
.mob-chain-body{max-height:calc(100vh - 290px);overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain}
.mob-chain-body::-webkit-scrollbar{width:2px}
.mob-chain-body::-webkit-scrollbar-thumb{background:rgba(0,180,216,0.3);border-radius:2px}
.mob-chain-row{display:grid;grid-template-columns:1fr 50px 1fr;padding:8px 10px;
border-bottom:1px solid var(--m-border);font-size:0.56rem;align-items:center;
transition:background 0.15s;-webkit-tap-highlight-color:transparent}
.mob-chain-row:active{background:rgba(0,180,216,0.06)}
.mob-chain-row.selected{outline:2px solid var(--m-blue);outline-offset:-2px;
background:rgba(0,180,216,0.04)}
.mob-chain-row.atm{background:linear-gradient(90deg,rgba(0,212,170,0.06),rgba(0,180,216,0.08),rgba(255,59,92,0.06));
border-top:1px solid rgba(0,180,216,0.2);border-bottom:1px solid rgba(0,180,216,0.2)}
.mob-chain-row.itm-ce{background:rgba(0,212,170,0.03)}
.mob-chain-row.itm-pe{background:rgba(255,59,92,0.03)}
.mob-ce{text-align:right;padding-right:6px;display:flex;flex-direction:column;
align-items:flex-end;gap:1px}
.mob-pe{text-align:left;padding-left:6px;display:flex;flex-direction:column;
align-items:flex-start;gap:1px}
.mob-ce .ltp,.mob-pe .ltp{font-weight:800;font-size:0.58rem;font-variant-numeric:tabular-nums}
.mob-ce .chg,.mob-pe .chg{font-size:0.38rem;font-weight:700}
.mob-ce .oi,.mob-pe .oi{font-size:0.34rem;color:var(--m-dim);font-weight:600}
.mob-ce .vol,.mob-pe .vol{font-size:0.32rem;color:rgba(255,255,255,0.12);font-weight:600}
.mob-strike{text-align:center;font-weight:900;font-size:0.58rem;color:rgba(255,255,255,0.8);
font-variant-numeric:tabular-nums}
/* OI Bar Indicators */
.mob-oi-bar{height:3px;border-radius:2px;margin-top:2px;min-width:4px;
transition:width 0.4s ease;opacity:0.6}
.mob-oi-bar.ce{background:linear-gradient(90deg,transparent,var(--m-profit));margin-left:auto}
.mob-oi-bar.pe{background:linear-gradient(270deg,transparent,var(--m-loss))}
/* Trade Controls */
.mob-trade-strip{display:flex;gap:5px;padding:8px 10px;background:rgba(0,0,0,0.4);
border-top:1px solid var(--m-border);align-items:center;justify-content:space-between;
position:sticky;bottom:calc(var(--m-nav-h) + env(safe-area-inset-bottom,0));z-index:4}
.mob-trade-ctrl{display:flex;align-items:center;gap:5px;font-size:0.44rem;font-weight:700;
color:var(--m-muted)}
.mob-lot-sel{padding:4px 8px;background:rgba(255,255,255,0.05);color:#fff;
border:1px solid var(--m-border2);border-radius:5px;font-size:0.52rem;font-weight:700;
width:42px;text-align:center}
.mob-trade-btn{padding:6px 16px;border-radius:var(--m-radius-sm);font-size:0.48rem;
font-weight:800;cursor:pointer;border:none;-webkit-tap-highlight-color:transparent;
letter-spacing:0.5px;transition:all 0.15s}
.mob-trade-btn.buy{background:linear-gradient(135deg,#00c853,#00e676,#69f0ae);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 10px rgba(0,212,170,0.25)}
.mob-trade-btn.sell{background:linear-gradient(135deg,#ff1744,#f44336,#ff5252);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 2px 10px rgba(255,59,92,0.25)}
.mob-trade-btn:disabled{opacity:0.35;box-shadow:none}
.mob-trade-btn:active:not(:disabled){transform:scale(0.92)}
/* ---- ORDERS TAB ---- */
.mob-ord-list{padding:6px 10px}
.mob-ord-card{display:flex;align-items:center;justify-content:space-between;
background:var(--m-card);border:1px solid var(--m-border);
border-radius:var(--m-radius);padding:10px 12px;margin-bottom:5px;gap:8px;
transition:all 0.15s}
.mob-ord-card:active{transform:scale(0.985);border-color:var(--m-border2)}
.mob-ord-left{flex:1;min-width:0}
.mob-ord-sym{font-size:0.54rem;font-weight:800;color:var(--m-blue);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.mob-ord-meta{font-size:0.38rem;color:var(--m-dim);margin-top:3px;
display:flex;gap:8px;font-weight:600;align-items:center}
.mob-ord-right{text-align:right;flex-shrink:0}
.mob-ord-price{font-size:0.6rem;font-weight:900;color:var(--m-text);
font-variant-numeric:tabular-nums}
.mob-ord-qty{font-size:0.4rem;color:var(--m-muted);font-weight:700}
.mob-ord-status{font-size:0.38rem;font-weight:800;padding:2px 7px;border-radius:3px;
display:inline-block;margin-top:3px;letter-spacing:0.3px}
.mob-ord-status.traded{background:rgba(0,212,170,0.12);color:var(--m-profit);
border:1px solid rgba(0,212,170,0.2)}
.mob-ord-status.pending{background:rgba(255,183,0,0.12);color:var(--m-amber);
border:1px solid rgba(255,183,0,0.2)}
.mob-ord-status.rejected{background:rgba(255,59,92,0.12);color:var(--m-loss);
border:1px solid rgba(255,59,92,0.2)}
.mob-ord-status.cancelled{background:rgba(255,255,255,0.04);color:var(--m-dim);
border:1px solid var(--m-border)}
.mob-ord-side{font-size:0.38rem;font-weight:800;padding:2px 6px;border-radius:3px}
.mob-ord-side.buy{background:rgba(0,212,170,0.1);color:var(--m-profit)}
.mob-ord-side.sell{background:rgba(255,59,92,0.1);color:var(--m-loss)}
/* ---- ALGO TAB (Full) ---- */
.mob-algo-full{padding:8px 10px}
.mob-algo-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.mob-algo-ds{text-align:center;padding:8px 6px;background:var(--m-card);
border-radius:var(--m-radius-sm);border:1px solid var(--m-border)}
.mob-algo-ds .dl{font-size:0.36rem;color:var(--m-muted);font-weight:800;
text-transform:uppercase;letter-spacing:0.5px}
.mob-algo-ds .dv{font-size:0.64rem;font-weight:900;color:var(--m-text);margin-top:3px;
font-variant-numeric:tabular-nums}
/* Algo Signals */
.mob-algo-signals{margin:6px 0;padding:8px 10px;
background:linear-gradient(160deg,rgba(123,97,255,0.06),rgba(0,180,216,0.04));
border:1px solid rgba(123,97,255,0.12);border-radius:var(--m-radius)}
.mob-algo-sig-title{font-size:0.38rem;font-weight:800;color:var(--m-muted);
text-transform:uppercase;letter-spacing:0.8px;margin-bottom:5px}
.mob-algo-sig-row{font-size:0.46rem;color:rgba(255,255,255,0.5);display:flex;
justify-content:space-between;padding:2px 0}
.mob-algo-sig-row b{color:var(--m-text)}
/* Algo Tables */
.mob-algo-panel{margin-top:8px;border:1px solid var(--m-border);
border-radius:var(--m-radius);overflow:hidden}
.mob-algo-panel-hdr{display:flex;justify-content:space-between;align-items:center;
padding:8px 10px;background:rgba(0,180,216,0.06);font-size:0.5rem;
font-weight:800;color:var(--m-blue)}
.mob-algo-panel-hdr .export-btns{display:flex;gap:4px}
.mob-algo-panel-hdr .exp-btn{padding:3px 8px;border-radius:4px;font-size:0.38rem;
font-weight:800;cursor:pointer;border:1px solid var(--m-border);
background:var(--m-card);color:var(--m-muted);-webkit-tap-highlight-color:transparent}
.mob-algo-panel-hdr .exp-btn:active{background:rgba(0,180,216,0.1);color:var(--m-blue)}
.mob-algo-tbl-wrap{max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mob-algo-tbl{width:100%;border-collapse:collapse;font-size:0.46rem}
.mob-algo-tbl th{padding:6px 5px;background:rgba(0,180,216,0.08);color:var(--m-blue);
font-weight:800;text-transform:uppercase;letter-spacing:0.3px;font-size:0.36rem;
border-bottom:1px solid rgba(0,180,216,0.15);position:sticky;top:0;z-index:2}
.mob-algo-tbl td{padding:5px;border-bottom:1px solid var(--m-border);font-weight:600;
font-variant-numeric:tabular-nums}
.mob-algo-tbl tr:active{background:rgba(0,180,216,0.06)}
/* ---- MORE/SETTINGS TAB ---- */
.mob-more{padding:10px}
.mob-more-section{margin-bottom:14px}
.mob-more-title{font-size:0.44rem;font-weight:800;color:var(--m-muted);
text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;padding-left:2px}
.mob-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mob-more-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:16px 8px;background:var(--m-card);border:1px solid var(--m-border);
border-radius:var(--m-radius);cursor:pointer;transition:all 0.2s;
-webkit-tap-highlight-color:transparent}
.mob-more-item:active{transform:scale(0.93);border-color:var(--m-blue);
background:rgba(0,180,216,0.06)}
.mob-more-item .mi{font-size:1.5rem}
.mob-more-item .mt{font-size:0.44rem;font-weight:800;color:var(--m-muted);text-align:center}
/* Theme Buttons */
.mob-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.mob-theme-btn{padding:12px 4px;border-radius:var(--m-radius);font-size:0.44rem;
font-weight:800;cursor:pointer;border:1px solid var(--m-border);background:var(--m-card);
color:var(--m-muted);text-align:center;transition:all 0.2s;
-webkit-tap-highlight-color:transparent}
.mob-theme-btn.active{background:rgba(0,180,216,0.12);color:var(--m-blue);
border-color:rgba(0,180,216,0.3)}
.mob-theme-btn:active{transform:scale(0.93)}
/* Mode Toggle */
.mob-mode-switch{display:flex;align-items:center;justify-content:center;gap:10px;
padding:12px;background:var(--m-card);border:1px solid var(--m-border);
border-radius:var(--m-radius);margin-top:8px}
.mob-mode-switch .mode-text{font-size:0.5rem;font-weight:800}
.mob-mode-switch .mode-text.real{color:var(--m-profit)}
.mob-mode-switch .mode-text.paper{color:var(--m-amber)}
/* ---- CHART OVERLAY ---- */
.mob-chart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;
background:rgba(6,11,24,0.96);backdrop-filter:blur(16px);display:none;
flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.mob-chart-overlay.visible{display:flex}
.mob-chart-bar{display:flex;justify-content:space-between;align-items:center;
padding:12px 14px;border-bottom:1px solid var(--m-border)}
.mob-chart-title{font-size:0.72rem;font-weight:900;color:var(--m-blue)}
.mob-chart-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
background:rgba(255,59,92,0.12);border:1px solid rgba(255,59,92,0.2);border-radius:50%;
color:var(--m-loss);font-size:1.1rem;cursor:pointer;transition:all 0.15s}
.mob-chart-close:active{transform:scale(0.9);background:rgba(255,59,92,0.25)}
.mob-chart-body{flex:1;padding:10px;display:flex;align-items:center;justify-content:center}
/* ---- EMPTY STATE ---- */
.mob-empty{text-align:center;padding:40px 20px;color:var(--m-dim)}
.mob-empty .ei{font-size:2.2rem;margin-bottom:10px;opacity:0.5}
.mob-empty .et{font-size:0.55rem;font-weight:700;letter-spacing:0.3px}
/* ---- SCROLLBAR ---- */
.mob-section::-webkit-scrollbar{width:2px}
.mob-section::-webkit-scrollbar-thumb{background:rgba(0,180,216,0.2);border-radius:2px}
/* ---- DATA PULSE ANIMATION ---- */
@keyframes m-dataFlash{0%{background:rgba(0,180,216,0.15)}100%{background:transparent}}
.mob-data-flash{animation:m-dataFlash 0.5s ease}
/* ========== MOBILE MEDIA QUERY ========== */
@media(max-width:768px){
body{font-size:13px !important;
-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
.container{padding:0 !important;margin:0 !important}
/* Hide legacy mobile elements (old embedded HTML) */
.mob-nav{display:none !important}
.mob-sticky{display:none !important}
.mob-section{display:none !important}
/* Hide desktop header/tabs (React responsive.css handles mobile layout) */
.main-tabs{display:none !important}
/* Toast mobile */
.toast{top:auto !important;bottom:68px !important;
right:8px !important;left:8px !important;font-size:0.68rem !important;
padding:8px 12px !important;border-radius:8px !important;text-align:center;
backdrop-filter:blur(20px)}
}
/* ============= TABLET: 769-1024 ============= */
@media(min-width:769px) and (max-width:1024px){
body{font-size:14.5px}
.header h1{font-size:1.3rem}
.summary{grid-template-columns:repeat(3,1fr)}
.layout-grid{grid-template-columns:1fr}
}
/* ============= DESKTOP + TABLET: HIDE LEGACY MOBILE ============= */
@media(min-width:769px){
.mob-nav{display:none !important}
.mob-sticky{display:none !important}
.mob-section{display:none !important}
.mob-chart-overlay{display:none !important}
}
.pos-closed {
opacity: 0.5;
background: rgba(128,128,128,0.05) !important;
font-style: italic;
}
.pos-closed td {
color: var(--fg-muted) !important;
}
.pos-open {
font-weight: 600;
}
/* Bigger option chain text */
.data-table td {
font-size: 0.9rem !important;
padding: 0.6rem 0.5rem !important;
}
.data-table th {
font-size: 0.95rem !important;
padding: 0.7rem 0.5rem !important;
}
.data-table .strike-cell {
font-size: 1rem !important;
font-weight: 700 !important;
}
.trade-btn {
font-size: 0.8rem !important;
padding: 0.4rem 0.7rem !important;
}
.lot-select {
font-size: 0.8rem !important;
padding: 0.3rem 0.4rem !important;
}
/* ===== MAIN TAB NAVIGATION ===== */
.sticky-wrapper {
position: sticky;
top: 36px; /* below marquee ticker height */
z-index: 190;
background: var(--bg);
padding-top: 4px;
padding-bottom: 0;
margin-bottom: 0;
}
.main-tabs {
display: flex;
gap: 3px;
background: var(--glass);
border-radius: 14px;
border: 1px solid var(--glass-border);
padding: 5px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.main-tab-btn {
flex: 1;
padding: 11px 16px;
border: 1px solid rgba(255,255,255,0.08);
border-bottom: none;
color: rgba(255,255,255,0.85);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
border-radius: 12px 12px 0 0;
letter-spacing: 0.3px;
position: relative;
top: 1px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.main-tab-btn:nth-child(1){ background:linear-gradient(135deg,#0284c7,#0369a1); }
.main-tab-btn:nth-child(2){ background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.main-tab-btn:nth-child(3){ background:linear-gradient(135deg,#d97706,#b45309); }
.main-tab-btn:nth-child(4){ background:linear-gradient(135deg,#059669,#047857); }
.main-tab-btn:nth-child(5){ background:linear-gradient(135deg,#db2777,#be185d); }
.main-tab-btn:nth-child(6){ background:linear-gradient(135deg,#9333ea,#7e22ce); }
.main-tab-btn:nth-child(7){ background:linear-gradient(135deg,#0f766e,#0e7490); }
/* Stable per-tab colors (independent of tab order) */
.main-tab-btn.tab-command-center { background:linear-gradient(135deg,#0284c7,#0369a1); }
.main-tab-btn.tab-mcx-commodities { background:linear-gradient(135deg,#ea580c,#c2410c); }
.main-tab-btn.tab-holdings { background:linear-gradient(135deg,#0d9488,#0f766e); }
.main-tab-btn.tab-doji-scanner { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.main-tab-btn.tab-reports { background:linear-gradient(135deg,#d97706,#b45309); }
.main-tab-btn.tab-ai-intelligence { background:linear-gradient(135deg,#059669,#047857); }
.main-tab-btn.tab-report-raw { background:linear-gradient(135deg,#db2777,#be185d); }
.main-tab-btn.tab-user-management { background:linear-gradient(135deg,#0891b2,#0e7490); }
.main-tab-btn.tab-algo-log { background:linear-gradient(135deg,#0284c7,#0369a1); }
.main-tab-btn.tab-settings { background:linear-gradient(135deg,#9333ea,#7e22ce); }
.main-tab-btn:hover {
filter: brightness(1.25);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 -4px 16px rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}
.main-tab-btn.active {
filter: brightness(1.35) saturate(1.2);
color: #ffffff;
border-color: rgba(255,255,255,0.35);
border-bottom: 2px solid var(--bg);
box-shadow: 0 -6px 24px rgba(255,255,255,0.12);
z-index: 2;
transform: translateY(-2px);
}
.main-tab-btn.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 8%;
width: 84%;
height: 3px;
background: #fff;
border-radius: 3px 3px 0 0;
box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.main-tab-content {
display: none;
border: 1px solid var(--glass-border);
border-top: none;
border-radius: 0 0 14px 14px;
min-height: 80vh;
background: var(--glass);
backdrop-filter: blur(12px);
}
.main-tab-content.active {
display: block;
}
#paperToggle:checked + .toggle-slider { background: var(--warning) !important; }
#paperToggle:checked + .toggle-slider + .toggle-button { transform: translateX(26px) !important; }
#algoPositionsTable tr:hover, #algoOrdersTable tr:hover { background: var(--card-hover); }
#algoPositionsTable td, #algoOrdersTable td { padding: 8px; border-bottom: 1px solid var(--bg); font-size: 0.85rem; }
.algo-profit { color: var(--success) !important; font-weight: bold; }
.algo-loss { color: var(--danger) !important; font-weight: bold; }
.algo-closed { opacity: 0.5; }
.algo-closed.algo-profit td { color: var(--success) !important; }
.algo-closed.algo-loss td { color: var(--danger) !important; }
.algo-open { background: var(--bg); }
.algo-pnl-display.profit { color: var(--success) !important; }
.algo-pnl-display.loss { color: var(--danger) !important; }
/* Badge Styles - Status indicators */
.algo-badge-waiting { font-size:0.8rem; padding:5px 12px; border-radius:5px; background:#f59e0b33; color:#f59e0b; font-weight:bold; }
.algo-badge-active { font-size:0.8rem; padding:5px 12px; border-radius:5px; background:#10b98133; color:#10b981; font-weight:bold; animation:badge-blink 1s infinite; }
.algo-badge-ready { font-size:0.8rem; padding:5px 12px; border-radius:5px; background:var(--border); color:var(--text-muted); font-weight:bold; }
@keyframes badge-blink { 0%,100%{opacity:1}50%{opacity:0.5} }
/* Header Row - Expandable indicator */
.algo-header-row { transition: all 0.2s ease; }
.algo-header-row:hover { background: linear-gradient(135deg, #1a4a6e 0%, #252550 100%) !important; border-color: #4ecca3 !important; box-shadow: 0 4px 12px rgba(78,204,163,0.3) !important; transform: translateY(-1px); }
.algo-header-row:active { transform: translateY(0); }
/* Block Styles */
.algo-block { background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:0.4rem;overflow:hidden; }
.algo-block-header { display:flex;justify-content:space-between;align-items:center;padding:0.7rem 1rem;cursor:pointer;background:var(--card);transition:all 0.2s;user-select:none;font-size:0.9rem; }
.algo-block-header:hover { background:var(--card-hover); }
.algo-block-content { padding:0.6rem;display:none;background:var(--bg); }
.algo-block.expanded .algo-block-content { display:block; }
.algo-block-expand { font-size:1rem;transition:transform 0.2s;margin-right:0.6rem; }
.algo-block.expanded .algo-block-expand { transform:rotate(90deg); }
.algo-block-profit { border-left:4px solid var(--success); }
.algo-block-loss { border-left:4px solid var(--danger); }
.algo-block-active { border-left:4px solid var(--warning);animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.7} }
.rpt-sub-btn{padding:0.45rem 0.9rem;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.rpt-sub-btn:hover{border-color:var(--accent);background:var(--card-hover)}
.rpt-sub-btn.active{background:var(--gradient-primary,linear-gradient(135deg,#0ea5e9,#8b5cf6));color:#fff;border-color:transparent}
.rpt-flt{padding:0.3rem 0.5rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--fg);font-size:0.72rem}
.rpt-card{background:var(--glass,var(--card));backdrop-filter:blur(12px);padding:0.8rem 0.7rem;border-radius:10px;border:1px solid var(--glass-border,var(--border));text-align:center;transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:default;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.rpt-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(14,165,233,0.15)}
.rpt-card-label{font-size:0.75rem;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;margin-bottom:0.25rem;white-space:nowrap}
.rpt-chart-wrap .rpt-card-label{font-size:0.8rem;letter-spacing:0.3px}
.rpt-card-val{font-size:1.7rem;font-weight:900;margin-top:0.15rem;line-height:1;white-space:nowrap}
.rpt-strat-card{background:var(--glass,var(--card));backdrop-filter:blur(12px);padding:0.8rem 1rem;border-radius:10px;border:1px solid var(--glass-border,var(--border));display:flex;flex-direction:column;gap:0.3rem;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease}
.rpt-strat-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px rgba(14,165,233,0.12);border-color:var(--accent)}
.rpt-chart-bar{height:6px;border-radius:3px;transition:width 0.8s cubic-bezier(0.4,0,0.2,1)}
.rpt-chart-wrap{background:var(--glass,var(--card));backdrop-filter:blur(12px);padding:1rem;border-radius:12px;border:1px solid var(--glass-border,var(--border));transition:transform 0.3s ease,box-shadow 0.3s ease}
.rpt-chart-wrap:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,0.12)}
@keyframes rptFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes rptBarGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rptSlideIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes rptPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes rptCountUp{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
.rpt-anim-card{animation:rptFadeIn 0.5s ease both}
.rpt-anim-bar{animation:rptBarGrow 0.8s cubic-bezier(0.4,0,0.2,1) both;transform-origin:bottom}
.rpt-anim-slide{animation:rptSlideIn 0.4s ease both}
.rpt-tooltip{position:absolute;background:rgba(0,0,0,0.85);color:#fff;padding:4px 8px;border-radius:6px;font-size:0.65rem;font-weight:700;pointer-events:none;z-index:100;white-space:nowrap;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);opacity:0;transition:opacity 0.15s ease}
/* Toggle Switch Styles */
.toggle-switch{position:relative;width:48px;height:26px;cursor:pointer;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:#374151;border-radius:26px;transition:0.3s}
.toggle-slider:before{content:'';position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.3s}
.toggle-switch input:checked+.toggle-slider{background:#4ecca3}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(22px)}
/* Auto Trade toggle — custom sizing + gradient */
.auto-trade-toggle .toggle-slider:before{height:16px;width:16px;left:3px;bottom:3px}
.auto-trade-toggle input:checked+.toggle-slider{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.auto-trade-toggle input:checked+.toggle-slider:before{transform:translateX(18px)}
@keyframes aiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes aiGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* ============= OPTION CHAIN BODY ============= */
.option-chain-body{display:block;overflow:visible}
.option-chain-body .table-wrap{max-height:none;overflow-y:visible;overflow-x:auto;height:auto}
/* LIVE/OFFLINE blink animation */
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:0.2}}
/* ============= WATCHDOG ALERT BANNER ============= */
@keyframes watchdogFlash{
0%,100%{opacity:1;box-shadow:0 2px 20px rgba(239,68,68,0.4)}
50%{opacity:0.85;box-shadow:0 2px 40px rgba(239,68,68,0.8)}
}
@keyframes watchdogPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.04)}
}
.watchdog-alert-banner{
animation:watchdogFlash 2s ease-in-out infinite;
}
.watchdog-ack-btn{
background:#16a34a;
color:#fff;
border:none;
border-radius:5px;
padding:4px 14px;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:background 0.15s;
}
.watchdog-ack-btn:hover{background:#15803d}
.watchdog-fix-btn{
background:transparent;
color:#60a5fa;
border:1px solid #3b82f6;
border-radius:5px;
padding:4px 12px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background 0.15s,color 0.15s;
}
.watchdog-fix-btn:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.dashboard-container {
width: 100%;
min-height: 100vh;
}
.dashboard-shell {
width: 100%;
height: 100vh;
overflow: auto;
padding: 10px;
background: var(--bg, #050b16);
color: var(--fg, #e2e8f0);
}
.dashboard-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.dashboard-tab-btn {
border: 1px solid var(--border, #334155);
background: var(--card, #0f172a);
color: var(--fg, #cbd5e1);
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.dashboard-tab-btn.active {
background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9, #8b5cf6));
color: #fff;
border-color: transparent;
}
.main-tab-content.active {
padding: 10px;
background: transparent;
border: 0;
}
.cc-root {
display: flex;
flex-direction: column;
gap: 10px;
}
.legacy-surface {
background: transparent;
}
.cc-ticker-strip,
.cc-status-bar,
.cc-card {
border: 1px solid var(--border, #1f2937);
border-radius: 14px;
background: var(--glass, rgba(15, 23, 42, 0.75));
backdrop-filter: blur(12px);
box-shadow: 0 8px 20px rgba(2, 8, 20, 0.35);
}
.cc-ticker-strip {
padding: 8px 12px;
overflow: hidden;
position: relative;
min-height: 36px;
}
.cc-ticker-track {
display: inline-flex;
gap: 18px;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
animation: ccTickerSlide 35s linear infinite;
}
@keyframes ccTickerSlide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.cc-status-bar,
.cc-card {
padding: 10px;
}
.cc-status-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.cc-user-block {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cc-status-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cc-muted {
color: var(--fg-muted, #94a3b8);
font-size: 12px;
}
.cc-summary-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.cc-account-grid {
display: grid;
grid-template-columns: 1fr 280px 1fr;
gap: 8px;
}
.cc-action-grid,
.cc-chain-grid,
.cc-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.cc-label {
text-transform: uppercase;
color: var(--fg-muted, #94a3b8);
font-size: 11px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: 0.4px;
}
.cc-value {
font-size: 20px;
font-weight: 800;
}
.cc-vix-pill {
font-size: 11px;
font-weight: 700;
color: #f59e0b;
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 999px;
padding: 4px 8px;
}
.cc-rows {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 13px;
}
.cc-mode-value {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
}
.cc-form-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.cc-form-row.compact {
margin-bottom: 0;
}
.cc-form-row select,
.cc-form-row input,
.cc-trade-controls select {
background: var(--bg, #0f172a);
color: var(--fg, #e2e8f0);
border: 1px solid var(--border, #334155);
border-radius: 6px;
padding: 6px;
font-size: 12px;
}
.cc-btn-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.cc-btn {
border: 1px solid var(--border, #334155);
background: var(--card, #0f172a);
color: var(--fg, #e2e8f0);
border-radius: 6px;
padding: 6px 9px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.cc-btn.active,
.cc-btn.buy {
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.4);
color: #10b981;
}
.cc-btn.sell,
.cc-btn.danger {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
.cc-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.cc-chain-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.cc-panel-header {
cursor: pointer;
}
.cc-filter-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.cc-filter-btn {
border: 1px solid var(--border, #334155);
background: var(--bg, #111827);
color: var(--fg-muted, #cbd5e1);
border-radius: 999px;
padding: 5px 9px;
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.cc-filter-btn.active {
border-color: transparent;
background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9, #8b5cf6));
color: #fff;
}
.cc-table-wrap {
max-height: 360px;
overflow: auto;
border: 1px solid var(--border, #1f2937);
border-radius: 8px;
}
.cc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
min-width: 740px;
}
.cc-table th,
.cc-table td {
padding: 6px;
border-bottom: 1px solid var(--border, #1f2937);
text-align: left;
white-space: nowrap;
}
.cc-table th {
position: sticky;
top: 0;
background: linear-gradient(135deg, #0f3460, #1a1a3e);
z-index: 1;
color: #8892b0;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.4px;
}
.cc-table tr:hover td {
background: var(--card-hover, rgba(148, 163, 184, 0.08));
}
.atm-row td {
background: rgba(251, 191, 36, 0.12);
}
.cc-trade-controls {
display: flex;
gap: 4px;
align-items: center;
}
.cc-qty-buy {
color: #10b981;
font-weight: 700;
}
.cc-qty-sell {
color: #ef4444;
font-weight: 700;
}
.cc-qty-flat {
color: var(--fg-muted, #94a3b8);
}
.cc-sl-actions {
display: flex;
align-items: center;
gap: 4px;
}
.cc-sl-input {
width: 80px;
padding: 4px;
background: var(--card, #0f172a);
color: var(--fg, #e2e8f0);
border: 1px solid var(--border, #334155);
border-radius: 4px;
font-size: 11px;
}
.cc-chain-grid .cc-table {
min-width: 900px;
}
.cc-bottom-grid .cc-table {
min-width: 820px;
}
.cc-action-grid .cc-card,
.cc-account-grid .cc-card,
.cc-summary-grid .cc-card {
border-radius: 16px;
}
.mode-badge {
white-space: nowrap;
}
.cc-feed {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
display: flex;
flex-direction: column;
gap: 4px;
max-height: 220px;
overflow: auto;
}
.pos-closed td {
opacity: 0.6;
}
.profit {
color: #10b981;
}
.loss {
color: #ef4444;
}
.side-buy,
.side-sell {
display: inline-block;
border-radius: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 800;
}
.side-buy {
color: #10b981;
background: rgba(16, 185, 129, 0.2);
}
.side-sell {
color: #ef4444;
background: rgba(239, 68, 68, 0.2);
}
[class^='status-'] {
display: inline-block;
border-radius: 4px;
padding: 2px 6px;
font-size: 10px;
font-weight: 800;
color: #93c5fd;
background: rgba(59, 130, 246, 0.15);
}
.status-traded,
.status-complete,
.status-filled {
color: #10b981;
background: rgba(16, 185, 129, 0.2);
}
.status-rejected,
.status-cancelled,
.status-failed {
color: #ef4444;
background: rgba(239, 68, 68, 0.2);
}
@media (max-width: 1400px) {
.cc-summary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cc-account-grid,
.cc-action-grid,
.cc-chain-grid,
.cc-bottom-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.dashboard-shell {
padding: 8px;
height: calc(100vh - 68px);
}
.main-tabs {
display: flex !important;
overflow-x: auto;
}
.main-tab-btn {
min-width: 150px;
}
.main-tab-content.active {
padding: 6px;
}
.cc-status-bar {
flex-direction: column;
align-items: flex-start;
}
.cc-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cc-trade-controls {
flex-direction: column;
align-items: stretch;
}
.cc-card {
border-radius: 12px;
}
.cc-form-row label {
min-width: 60px;
}
}
/* ── Mobile (≤768px) — MetaTrader compact layout ── */
@media (max-width: 768px) {
.dashboard-shell {
padding: 4px;
height: auto;
min-height: calc(100vh - 120px);
}
.main-tab-content.active {
padding: 4px 2px;
}
.cc-root { gap: 6px; }
.cc-ticker-strip {
border-radius: 8px;
padding: 6px 8px;
min-height: 28px;
}
.cc-ticker-track { font-size: 11px; gap: 12px; }
.cc-status-bar {
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 8px;
border-radius: 10px;
}
.cc-user-block, .cc-status-right {
gap: 6px;
font-size: 11px;
}
.cc-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.cc-summary-grid .cc-card {
padding: 8px;
border-radius: 10px;
}
.cc-label { font-size: 9px; margin-bottom: 4px; }
.cc-value { font-size: 16px; }
.cc-account-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.cc-action-grid,
.cc-chain-grid,
.cc-bottom-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.cc-card {
border-radius: 10px;
padding: 8px;
}
.cc-mode-value { font-size: 15px; margin-bottom: 6px; }
.cc-form-row {
gap: 6px;
margin-bottom: 6px;
}
.cc-form-row select,
.cc-form-row input,
.cc-trade-controls select {
font-size: 11px;
padding: 5px;
}
.cc-btn-row { gap: 4px; }
.cc-btn { font-size: 11px; padding: 5px 7px; }
.cc-filter-row { gap: 4px; }
.cc-filter-btn { font-size: 9px; padding: 4px 7px; }
.cc-table-wrap {
max-height: 280px;
border-radius: 6px;
-webkit-overflow-scrolling: touch;
}
.cc-table { font-size: 11px; }
.cc-table th { font-size: 9px; }
.cc-table th, .cc-table td { padding: 4px 5px; }
.cc-chain-grid .cc-table { min-width: 780px; }
.cc-bottom-grid .cc-table { min-width: 700px; }
.cc-rows { font-size: 11px; gap: 3px; }
.cc-sl-input { width: 60px; font-size: 10px; padding: 3px; }
.cc-feed { font-size: 11px; max-height: 160px; }
}
.settings-route-page .settings-root {
margin-top: 8px;
}
.doji-root {
display: flex;
flex-direction: column;
gap: 10px;
}
.doji-card {
border: 1px solid var(--border, #1f2937);
border-radius: 14px;
background: var(--glass, rgba(15, 23, 42, 0.75));
backdrop-filter: blur(12px);
padding: 10px;
box-shadow: 0 8px 20px rgba(2, 8, 20, 0.35);
}
.doji-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.doji-status-left,
.doji-status-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.doji-market-pill {
border-radius: 999px;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
}
.doji-market-pill.open {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.doji-market-pill.closed {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.doji-scan-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.doji-spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: dojiSpin 0.8s linear infinite;
}
@keyframes dojiSpin {
to {
transform: rotate(360deg);
}
}
.doji-summary-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 8px;
}
.doji-filters {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.doji-filters input,
.doji-filters select {
background: var(--bg, #0f172a);
color: var(--fg, #e2e8f0);
border: 1px solid var(--border, #334155);
border-radius: 6px;
padding: 6px;
font-size: 12px;
}
.doji-pagination {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.doji-table-wrap {
max-height: 58vh;
overflow: auto;
}
.doji-table-wrap .cc-table {
min-width: 1360px;
}
.doji-empty {
text-align: center;
padding: 2rem;
color: var(--fg-muted, #94a3b8);
}
.doji-today-row td {
background: rgba(139, 92, 246, 0.1);
}
.doji-symbol {
font-weight: 800;
}
.doji-pill {
display: inline-block;
padding: 3px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
}
.doji-pill.dragonfly {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.doji-pill.gravestone {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.doji-pill.longlegged {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
}
.doji-pill.buy {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
.doji-pill.sell {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.neutral {
color: #94a3b8;
}
.doji-notes {
max-width: 170px;
white-space: normal;
font-size: 11px;
}
.doji-btn-col {
display: flex;
gap: 4px;
}
.doji-option-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.doji-mini-chart {
display: inline-block;
width: 120px;
height: 50px;
}
.doji-history-tooltip {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 9999;
width: min(600px, calc(100vw - 24px));
max-height: 72vh;
overflow: auto;
background: rgba(15, 23, 42, 0.98);
border: 2px solid rgba(139, 92, 246, 0.7);
border-radius: 12px;
padding: 12px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
backdrop-filter: blur(12px);
}
.doji-history-title {
font-size: 14px;
font-weight: 800;
margin-bottom: 8px;
color: #8b5cf6;
border-bottom: 1px solid rgba(139, 92, 246, 0.4);
padding-bottom: 6px;
}
.doji-history-chart {
margin-bottom: 8px;
border-radius: 8px;
background: rgba(30, 41, 59, 0.6);
padding: 8px;
}
.doji-history-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.doji-history-item {
display: grid;
grid-template-columns: 90px 120px 70px 100px 80px 60px;
gap: 8px;
align-items: center;
padding: 6px 8px;
border-radius: 6px;
background: rgba(30, 41, 59, 0.5);
font-size: 12px;
}
.doji-history-summary {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(139, 92, 246, 0.4);
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
color: #cbd5e1;
}
@media (max-width: 1400px) {
.doji-summary-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.doji-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doji-status-bar {
flex-direction: column;
align-items: flex-start;
}
.doji-history-item {
grid-template-columns: 1fr 1fr;
}
.doji-table-wrap .cc-table {
min-width: 1120px;
}
}
/* ── Mobile (≤768px) — compact Doji scanner ── */
@media (max-width: 768px) {
.doji-root { gap: 6px; }
.doji-card {
border-radius: 10px;
padding: 8px;
}
.doji-status-bar {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.doji-status-left, .doji-status-right {
gap: 6px;
font-size: 11px;
}
.doji-market-pill { font-size: 10px; padding: 2px 7px; }
.doji-scan-btn { font-size: 11px; }
.doji-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.doji-summary-grid .cc-card {
padding: 8px;
border-radius: 10px;
}
.doji-filters {
gap: 5px;
margin-bottom: 6px;
}
.doji-filters input,
.doji-filters select {
font-size: 11px;
padding: 5px;
min-width: 0;
}
.doji-pagination {
gap: 5px;
margin-bottom: 6px;
font-size: 11px;
}
.doji-table-wrap {
max-height: 50vh;
-webkit-overflow-scrolling: touch;
}
.doji-table-wrap .cc-table { min-width: 1000px; }
.doji-pill { font-size: 10px; padding: 2px 5px; }
.doji-notes { max-width: 130px; font-size: 10px; }
.doji-mini-chart { width: 90px; height: 40px; }
.doji-history-tooltip {
width: calc(100vw - 12px);
left: 6px;
bottom: 68px;
transform: none;
padding: 10px;
max-height: 65vh;
}
.doji-history-title { font-size: 12px; }
.doji-history-item {
grid-template-columns: 1fr 1fr;
gap: 4px;
font-size: 11px;
padding: 4px 6px;
}
.doji-history-summary { font-size: 11px; gap: 10px; }
}
.reports-root {
display: flex;
flex-direction: column;
gap: 10px;
}
.reports-card {
border: 1px solid var(--glass-border, #1f2937);
border-radius: 14px;
background: var(--glass, #0b1220);
backdrop-filter: blur(12px);
padding: 10px;
box-shadow: 0 8px 20px rgba(2, 8, 20, 0.35);
}
.reports-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.reports-header-left,
.reports-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.reports-subtabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.reports-filters {
display: grid;
grid-template-columns: auto minmax(100px, 1fr) auto minmax(100px, 1fr) auto minmax(120px, 1fr) auto minmax(90px, 1fr) auto minmax(90px, 1fr) auto minmax(90px, 1fr) auto auto;
gap: 8px;
align-items: center;
}
.reports-filters input,
.reports-filters select {
background: #0f172a;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 6px;
padding: 6px;
font-size: 12px;
}
.reports-stats {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.reports-empty {
text-align: center;
color: #94a3b8;
padding: 1rem;
}
.reports-table-wrap {
overflow: auto;
}
.reports-table-wrap .cc-table {
min-width: 860px;
}
.reports-visual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.reports-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.reports-bar-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.reports-bar-meta {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12px;
font-weight: 700;
}
.reports-bar-track {
width: 100%;
height: 11px;
border-radius: 999px;
border: 1px solid var(--border, #334155);
background: rgba(15, 23, 42, 0.8);
overflow: hidden;
}
.reports-bar-fill {
height: 100%;
border-radius: 999px;
}
.reports-bar-fill.profit {
background: linear-gradient(90deg, rgba(16, 185, 129, 0.85), rgba(52, 211, 153, 0.95));
}
.reports-bar-fill.loss {
background: linear-gradient(90deg, rgba(239, 68, 68, 0.85), rgba(248, 113, 113, 0.95));
}
.reports-spark-wrap {
display: flex;
flex-direction: column;
gap: 6px;
}
.reports-sparkline {
width: 100%;
height: 190px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid var(--border, #334155);
}
.reports-curve-line {
fill: none;
stroke: #3b82f6;
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
}
.reports-spark-axis {
display: flex;
justify-content: space-between;
gap: 8px;
color: #94a3b8;
font-size: 11px;
}
.reports-blocks {
display: flex;
flex-direction: column;
gap: 8px;
}
.reports-block-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.reports-block-actions {
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 1500px) {
.reports-filters {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.reports-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.reports-visual-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.reports-header {
flex-direction: column;
align-items: flex-start;
}
.reports-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reports-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reports-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 2px;
}
.reports-subtabs .cc-btn {
min-width: 132px;
flex: 0 0 auto;
}
.reports-table-wrap .cc-table {
min-width: 760px;
}
}
/* ── Mobile (≤768px) — compact reports ── */
@media (max-width: 768px) {
.reports-root { gap: 6px; }
.reports-card {
border-radius: 10px;
padding: 8px;
}
.reports-header {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.reports-header-left, .reports-header-right {
gap: 5px;
font-size: 11px;
}
.reports-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 5px;
padding-bottom: 3px;
}
.reports-subtabs::-webkit-scrollbar { display: none; }
.reports-subtabs .cc-btn {
flex: 0 0 auto;
min-width: 100px;
font-size: 11px;
padding: 5px 8px;
}
.reports-filters {
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.reports-filters input,
.reports-filters select {
font-size: 11px;
padding: 5px;
}
.reports-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.reports-stats .cc-card {
padding: 8px;
border-radius: 10px;
}
.reports-table-wrap {
-webkit-overflow-scrolling: touch;
}
.reports-table-wrap .cc-table { min-width: 680px; }
.reports-visual-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.reports-sparkline { height: 140px; }
.reports-bar-meta { font-size: 11px; }
.reports-block-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.reports-block-actions { font-size: 11px; }
}
.raw-root {
display: flex;
flex-direction: column;
gap: 10px;
}
.raw-card {
border: 1px solid #1f2937;
border-radius: 10px;
background: #0b1220;
padding: 10px;
}
.raw-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.raw-header h2 {
margin: 0;
font-size: 18px;
}
.raw-header p {
margin: 4px 0 0;
font-size: 12px;
color: #94a3b8;
}
.raw-status {
display: flex;
align-items: center;
gap: 8px;
}
.raw-file-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.raw-json-btn {
border-color: #f59e0b;
}
.raw-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.raw-actions input[type='text'] {
background: #0f172a;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 6px;
padding: 6px;
font-size: 12px;
min-width: 220px;
}
.raw-pagination {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.raw-pagination select {
background: #0f172a;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 6px;
padding: 6px;
font-size: 12px;
}
.raw-table-wrap {
max-height: 72vh;
}
.raw-empty {
text-align: center;
color: #94a3b8;
padding: 2rem;
}
.raw-selected-row {
background: rgba(239, 68, 68, 0.1);
}
.raw-table-wrap td input[type='text'] {
width: 100%;
background: #0f172a;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 4px;
padding: 4px 5px;
font-size: 12px;
}
@media (max-width: 900px) {
.raw-header {
flex-direction: column;
align-items: flex-start;
}
.raw-actions input[type='text'] {
min-width: 100%;
}
}
/* ── Mobile (≤768px) — compact raw data ── */
@media (max-width: 768px) {
.raw-root { gap: 6px; }
.raw-card {
border-radius: 10px;
padding: 8px;
}
.raw-header {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.raw-header h2 { font-size: 15px; }
.raw-header p { font-size: 11px; }
.raw-file-buttons { gap: 4px; }
.raw-file-buttons button {
font-size: 11px;
padding: 4px 7px;
}
.raw-actions {
gap: 5px;
}
.raw-actions input[type='text'] {
min-width: 100%;
font-size: 11px;
padding: 5px;
}
.raw-pagination {
gap: 5px;
font-size: 11px;
}
.raw-pagination select {
font-size: 11px;
padding: 4px;
}
.raw-table-wrap {
max-height: 55vh;
-webkit-overflow-scrolling: touch;
}
.raw-table-wrap td input[type='text'] {
font-size: 11px;
padding: 3px 4px;
}
}
.ai-root {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
background: #050b16;
}
.ai-center {
text-align: center;
max-width: 960px;
}
.ai-brain {
font-size: 64px;
margin-bottom: 12px;
}
.ai-center h2 {
margin: 0;
font-size: 34px;
font-weight: 900;
background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #0ea5e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ai-center > p {
font-size: 16px;
color: #94a3b8;
margin: 10px 0 20px;
}
.ai-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.ai-card {
border-radius: 12px;
padding: 16px;
text-align: center;
border: 1px solid #334155;
}
.ai-card.amber {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.03));
border-color: rgba(245, 158, 11, 0.25);
}
.ai-card.violet {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
border-color: rgba(139, 92, 246, 0.25);
}
.ai-card.cyan {
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.03));
border-color: rgba(14, 165, 233, 0.25);
}
.ai-icon {
font-size: 28px;
margin-bottom: 6px;
}
.ai-title {
font-size: 14px;
font-weight: 800;
margin-bottom: 6px;
}
.ai-desc {
font-size: 12px;
color: #94a3b8;
min-height: 34px;
}
.ai-live {
margin-top: 8px;
font-size: 12px;
color: #cbd5e1;
}
.ai-banner {
margin: 20px auto 8px;
padding: 12px;
max-width: 820px;
background: rgba(245, 158, 11, 0.08);
border: 1px dashed rgba(245, 158, 11, 0.35);
border-radius: 10px;
font-size: 13px;
color: #cbd5e1;
}
@media (max-width: 980px) {
.ai-grid {
grid-template-columns: 1fr;
}
}
/* ── Mobile (≤768px) — compact AI Intelligence ── */
@media (max-width: 768px) {
.ai-root {
min-height: 50vh;
padding: 8px;
}
.ai-brain { font-size: 42px; margin-bottom: 8px; }
.ai-center h2 { font-size: 22px; }
.ai-center > p { font-size: 13px; margin: 6px 0 14px; }
.ai-grid { gap: 6px; }
.ai-card {
border-radius: 10px;
padding: 12px;
}
.ai-icon { font-size: 22px; margin-bottom: 4px; }
.ai-title { font-size: 12px; }
.ai-desc { font-size: 11px; min-height: auto; }
.ai-live { font-size: 11px; }
.ai-banner {
margin: 12px auto 6px;
padding: 10px;
font-size: 11px;
border-radius: 8px;
}
}
.settings-root {
display: flex;
flex-direction: column;
gap: 10px;
}
.settings-card {
border: 1px solid #1f2937;
border-radius: 10px;
background: #0b1220;
padding: 10px;
}
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.settings-header h2 {
margin: 0;
font-size: 20px;
}
.settings-header p {
margin: 4px 0 0;
font-size: 12px;
color: #94a3b8;
}
.settings-header-actions {
display: flex;
gap: 8px;
}
.settings-status-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.settings-mini {
border: 1px solid #1f2937;
border-radius: 8px;
padding: 10px;
background: #0f172a;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.settings-card h3 {
margin: 0 0 8px;
font-size: 15px;
color: #93c5fd;
}
.settings-card label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
font-size: 12px;
color: #cbd5e1;
}
.settings-card input[type='number'],
.settings-card input[type='time'] {
background: #0f172a;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 6px;
padding: 6px;
font-size: 12px;
}
.settings-check {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.settings-inline-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.settings-level-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.settings-status {
border-radius: 8px;
padding: 10px;
font-size: 13px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #a7f3d0;
}
.settings-status.dirty {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: #fcd34d;
}
.settings-page-root {
width: 100%;
max-width: none;
}
.settings-page-root .settings-panel {
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.settings-page-root .settings-panel:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.35) !important;
box-shadow: 0 12px 24px rgba(2, 8, 20, 0.26);
}
@media (max-width: 1100px) {
.settings-status-cards,
.settings-grid {
grid-template-columns: 1fr;
}
.settings-level-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-header {
flex-direction: column;
align-items: flex-start;
}
}
/* ── Mobile (≤768px) — compact settings ── */
@media (max-width: 768px) {
.settings-root { gap: 6px; }
.settings-card {
border-radius: 10px;
padding: 8px;
}
.settings-header {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.settings-header h2 { font-size: 16px; }
.settings-header p { font-size: 11px; }
.settings-header-actions {
gap: 5px;
flex-wrap: wrap;
}
.settings-header-actions button {
font-size: 11px;
padding: 5px 8px;
}
.settings-status-cards {
grid-template-columns: 1fr;
gap: 5px;
}
.settings-mini { padding: 8px; border-radius: 6px; }
.settings-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.settings-card h3 { font-size: 13px; }
.settings-card label { font-size: 11px; margin-bottom: 6px; }
.settings-card input[type='number'],
.settings-card input[type='time'] {
font-size: 11px;
padding: 5px;
}
.settings-level-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.settings-inline-buttons {
gap: 5px;
}
.settings-inline-buttons button {
font-size: 11px;
padding: 5px 8px;
}
.settings-status {
font-size: 11px;
padding: 8px;
border-radius: 6px;
}
.settings-page-root .settings-panel {
margin: 0 2px 4px !important;
padding: 8px !important;
border-radius: 10px !important;
}
}
.um-root {
width: 100%;
min-height: calc(100vh - 160px);
padding: 1rem;
color: var(--fg);
}
.um-topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem 1.1rem;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 14px;
}
.um-topbar h2 {
margin: 0;
font-size: 1.35rem;
color: #67e8f9;
}
.um-topbar p {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: var(--fg-muted);
}
.um-top-actions {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.um-pill {
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 700;
background: rgba(34, 211, 238, 0.1);
color: #67e8f9;
border: 1px solid rgba(34, 211, 238, 0.35);
}
.um-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
gap: 1rem;
align-items: start;
}
.um-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.um-card:hover {
transform: translateY(-2px);
border-color: rgba(34, 211, 238, 0.36);
box-shadow: 0 12px 28px rgba(2, 8, 22, 0.35);
}
.um-main-table {
min-height: 600px;
}
.um-card h3 {
margin: 0 0 0.8rem;
font-size: 0.98rem;
color: #a5f3fc;
}
.um-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
margin-bottom: 0.85rem;
}
.um-card-head h3 {
margin: 0;
}
.um-card-head input {
width: 320px;
max-width: 100%;
}
.um-table-wrap {
overflow: auto;
border: 1px solid var(--border);
border-radius: 10px;
}
.um-table {
width: 100%;
min-width: 940px;
border-collapse: separate;
border-spacing: 0;
font-size: 0.82rem;
}
.um-table th,
.um-table td {
padding: 0.62rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
text-align: left;
vertical-align: middle;
}
.um-table th {
position: sticky;
top: 0;
z-index: 1;
background: rgba(56, 189, 248, 0.08);
color: #bae6fd;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.um-table tr.active {
background: rgba(34, 211, 238, 0.08);
}
.um-table tbody tr:hover {
background: rgba(15, 23, 42, 0.55);
}
.um-role,
.um-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.18rem 0.52rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.um-role.admin {
color: #fecaca;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.35);
}
.um-role.user {
color: #bbf7d0;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.35);
}
.um-status.ok {
color: #99f6e4;
background: rgba(45, 212, 191, 0.12);
border: 1px solid rgba(45, 212, 191, 0.3);
}
.um-status.warn {
color: #fcd34d;
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(245, 158, 11, 0.35);
}
.um-row-actions {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.um-side {
display: grid;
gap: 1rem;
}
.um-form {
display: grid;
gap: 0.7rem;
}
.um-form label {
display: grid;
gap: 0.3rem;
font-size: 0.76rem;
font-weight: 700;
color: var(--fg-muted);
}
.um-form input,
.um-form select,
.um-card-head input {
background: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.62rem;
font-size: 0.84rem;
outline: none;
}
.um-form input:focus,
.um-form select:focus,
.um-card-head input:focus {
border-color: rgba(34, 211, 238, 0.5);
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.12);
}
.um-inline-check {
display: flex !important;
align-items: center;
gap: 0.55rem !important;
}
.um-inline-check input {
width: auto;
margin: 0;
}
.um-daemon-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.um-fyers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.7rem;
}
.um-fyers-status {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
padding: 0.55rem 0.65rem;
border-radius: 8px;
border: 1px solid rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.1);
font-size: 0.76rem;
color: #a7f3d0;
}
.um-daemon-card {
border: 1px solid var(--border);
background: rgba(15, 23, 42, 0.42);
border-radius: 10px;
padding: 0.82rem;
}
.um-daemon-title {
font-size: 0.82rem;
font-weight: 800;
margin-bottom: 0.45rem;
}
.um-daemon-state {
font-size: 0.76rem;
color: var(--fg-muted);
margin-bottom: 0.6rem;
}
.um-daemon-actions,
.um-actions-row {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
align-items: center;
}
.um-subtabs {
display: flex;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.um-subtabs button.active {
background: rgba(34, 211, 238, 0.15);
border-color: rgba(34, 211, 238, 0.5);
color: #67e8f9;
}
.um-strategy-panel {
border-top: 1px solid var(--border);
padding: 0.75rem;
background: rgba(8, 15, 30, 0.55);
}
.um-strategy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 0.45rem;
margin-bottom: 0.6rem;
}
.um-check-pill {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.45rem;
border-radius: 8px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid var(--border);
font-size: 0.78rem;
}
.um-check-pill input {
accent-color: #22d3ee;
}
.um-status-line,
.um-inline-status,
.um-global-status {
font-size: 0.78rem;
color: #fcd34d;
}
.um-global-status {
margin-top: 0.9rem;
padding: 0.62rem 0.75rem;
border-radius: 8px;
border: 1px solid rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.08);
}
.um-root button {
border: 1px solid transparent;
border-radius: 8px;
padding: 0.48rem 0.85rem;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
color: #f8fafc;
background: linear-gradient(135deg, #0891b2, #0ea5e9);
transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.um-root button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(8, 145, 178, 0.28);
}
.um-root button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.um-root button.secondary {
color: #d1fae5;
border-color: rgba(16, 185, 129, 0.4);
background: rgba(16, 185, 129, 0.12);
}
.um-root button.secondary:hover {
box-shadow: 0 8px 16px rgba(16, 185, 129, 0.22);
}
.um-root button.danger {
color: #fecaca;
border-color: rgba(239, 68, 68, 0.45);
background: rgba(239, 68, 68, 0.12);
}
.um-root button.danger:hover {
box-shadow: 0 8px 16px rgba(239, 68, 68, 0.22);
}
.um-root .empty {
color: var(--fg-muted);
font-size: 0.8rem;
padding: 0.45rem 0.2rem;
}
@media (max-width: 1180px) {
.um-layout {
grid-template-columns: 1fr;
}
.um-side {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
@media (max-width: 780px) {
.um-root {
padding: 0.65rem;
}
.um-topbar {
flex-direction: column;
align-items: stretch;
}
.um-daemon-grid {
grid-template-columns: 1fr;
}
.um-card-head {
flex-direction: column;
align-items: stretch;
}
}
/* ── Mobile (≤768px) — compact user management ── */
@media (max-width: 768px) {
.um-root {
padding: 4px;
min-height: auto;
}
.um-topbar {
padding: 8px;
border-radius: 10px;
margin-bottom: 6px;
}
.um-topbar h2 { font-size: 1rem; }
.um-topbar p { font-size: 0.7rem; }
.um-top-actions { gap: 4px; }
.um-pill { font-size: 0.68rem; padding: 0.25rem 0.55rem; }
.um-layout {
grid-template-columns: 1fr;
gap: 6px;
}
.um-card {
padding: 8px;
border-radius: 10px;
}
.um-card h3 { font-size: 0.85rem; }
.um-main-table { min-height: auto; }
.um-card-head {
flex-direction: column;
align-items: stretch;
gap: 6px;
margin-bottom: 6px;
}
.um-card-head input { width: 100%; }
.um-table-wrap {
border-radius: 8px;
-webkit-overflow-scrolling: touch;
}
.um-table { min-width: 780px; font-size: 0.75rem; }
.um-table th, .um-table td { padding: 0.45rem; }
.um-table th { font-size: 0.65rem; }
.um-role, .um-status { font-size: 0.6rem; padding: 0.12rem 0.4rem; }
.um-side {
grid-template-columns: 1fr;
gap: 6px;
}
.um-form label { font-size: 0.7rem; }
.um-form input, .um-form select, .um-card-head input {
font-size: 0.76rem;
padding: 0.4rem 0.5rem;
}
.um-daemon-grid {
grid-template-columns: 1fr;
gap: 6px;
}
.um-daemon-card { padding: 0.6rem; border-radius: 8px; }
.um-daemon-title { font-size: 0.76rem; }
.um-daemon-state { font-size: 0.68rem; }
.um-fyers-grid { gap: 5px; }
.um-fyers-status { font-size: 0.68rem; padding: 0.4rem 0.5rem; }
.um-subtabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 4px;
}
.um-subtabs::-webkit-scrollbar { display: none; }
.um-subtabs button {
flex: 0 0 auto;
font-size: 0.7rem;
padding: 0.35rem 0.6rem;
white-space: nowrap;
}
.um-strategy-panel { padding: 0.55rem; }
.um-strategy-grid { gap: 4px; }
.um-check-pill { font-size: 0.7rem; padding: 0.3rem 0.35rem; }
.um-root button {
font-size: 0.7rem;
padding: 0.35rem 0.6rem;
}
}
.toast-stack {
position: fixed;
top: 20px;
right: 20px;
z-index: 12000;
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(420px, calc(100vw - 24px));
}
.legacy-toast {
border-radius: 10px;
padding: 11px 14px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(12px);
border: 1px solid transparent;
animation: legacyToastIn 220ms ease-out;
color: #e2e8f0;
}
.legacy-toast-success {
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.45);
}
.legacy-toast-error {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.45);
}
.legacy-toast-warning {
background: rgba(245, 158, 11, 0.22);
border-color: rgba(245, 158, 11, 0.45);
}
.legacy-toast-info {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.45);
}
@keyframes legacyToastIn {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 760px) {
.toast-stack {
right: 8px;
left: 8px;
max-width: none;
top: auto;
bottom: 68px; /* above mobile bottom nav */
}
.legacy-toast {
font-size: 12px;
padding: 8px 10px;
border-radius: 8px;
}
}
/* ============================================================
RESPONSIVE MOBILE-FIRST — MetaTrader / Trading Platform Style
============================================================ */
/* --- Mobile Bottom Nav Bar --- */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--card);
border-top: 1px solid var(--border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-nav .nav-items {
display: flex;
justify-content: space-around;
align-items: stretch;
height: 54px;
}
.mobile-bottom-nav .nav-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background: none;
border: none;
color: var(--fg-muted);
font-size: 0.52rem;
font-weight: 700;
cursor: pointer;
position: relative;
transition: color 0.15s;
padding: 4px 2px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.mobile-bottom-nav .nav-btn .nav-icon {
font-size: 1.15rem;
line-height: 1;
margin-bottom: 2px;
transition: transform 0.15s;
}
.mobile-bottom-nav .nav-btn.active {
color: var(--accent);
}
.mobile-bottom-nav .nav-btn.active .nav-icon {
transform: scale(1.15);
}
.mobile-bottom-nav .nav-btn.active::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 2px;
background: var(--accent);
border-radius: 0 0 2px 2px;
}
/* --- Mobile Top Header Bar --- */
.mobile-header-bar {
display: none;
position: sticky;
top: 0;
z-index: 9998;
background: var(--card);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 6px 10px;
}
.mobile-header-bar .hdr-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.mobile-header-bar .hdr-logo {
font-size: 0.82rem;
font-weight: 900;
letter-spacing: -0.5px;
color: var(--fg);
display: flex;
align-items: center;
gap: 4px;
}
.mobile-header-bar .hdr-logo .accent { color: var(--accent); }
.mobile-header-bar .hdr-logo .logo-icon {
width: 22px; height: 22px;
background: linear-gradient(135deg,#1d4ed8,#06b6d4);
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.7rem;
}
.mobile-header-bar .hdr-controls {
display: flex;
align-items: center;
gap: 6px;
}
.mobile-header-bar .hdr-badge {
font-size: 0.6rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.mobile-header-bar .hdr-badge.live {
color: #10b981;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.3);
}
.mobile-header-bar .hdr-badge.off {
color: #ef4444;
background: rgba(239,68,68,0.12);
border: 1px solid rgba(239,68,68,0.3);
}
/* --- Mobile Stats Strip (scrollable) --- */
.mobile-stats-strip {
display: none;
gap: 5px;
padding: 5px 8px 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mobile-stats-strip::-webkit-scrollbar { display: none; }
.mobile-stats-strip .stat-chip {
flex: 0 0 auto;
min-width: 70px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 8px;
text-align: center;
}
.mobile-stats-strip .stat-chip .label {
font-size: 0.45rem;
color: var(--fg-muted);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-stats-strip .stat-chip .value {
font-size: 0.72rem;
font-weight: 900;
line-height: 1.2;
font-family: 'JetBrains Mono', monospace;
}
/* ============================================================
BREAKPOINT: <= 768px (Mobile phones + small tablets)
React useIsMobile handles primary mobile/desktop switching.
These CSS rules are a safety net and enhance tab content.
============================================================ */
@media (max-width: 768px) {
/* Show mobile nav/header, hide desktop nav */
.mobile-bottom-nav { display: block; }
.mobile-header-bar { display: block; }
.mobile-stats-strip { display: flex; }
/* AGGRESSIVE: hide ALL desktop chrome */
.sticky-wrapper,
.ticker-wrap,
.header,
.header-top,
.main-tabs { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
/* Main container */
.container.dashboard-container,
.container {
padding: 0 !important;
margin: 0 !important;
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
min-height: 100vh;
max-width: 100vw !important;
overflow-x: hidden;
}
/* Prevent horizontal overflow on body */
html, body {
overflow-x: hidden;
max-width: 100vw;
-webkit-text-size-adjust: 100%;
}
/* Tab content fills screen */
.main-tab-content {
border: none !important;
border-radius: 0 !important;
min-height: auto !important;
backdrop-filter: none !important;
background: transparent !important;
padding: 0 !important;
}
/* Panels — full width, less padding */
.panel {
border-radius: 8px;
padding: 0.5rem;
margin: 0 4px 6px;
}
.panel-header {
padding-bottom: 0.35rem;
margin-bottom: 0.35rem;
}
.panel-title {
font-size: 0.82rem;
}
/* Layout grid — single column */
.layout-grid {
grid-template-columns: 1fr !important;
gap: 6px;
margin-top: 4px;
padding: 0 4px;
}
/* Summary cards — 3 per row */
.summary {
grid-template-columns: repeat(3, 1fr) !important;
gap: 4px;
margin: 4px 4px 0;
}
.summary-card {
padding: 0.4rem;
min-height: 52px;
border-radius: 6px;
}
.summary-label {
font-size: 0.52rem;
}
.summary-value {
font-size: 1rem;
}
/* Tables — horizontal scroll with momentum */
.table-wrap, .table-wrap-fixed,
.cc-table-wrap, .rpt-table-wrap,
.um-table-wrap, .raw-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
max-width: 100vw;
}
.data-table, .strikes-table {
font-size: 0.68rem;
min-width: 600px;
}
.data-table th, .data-table td,
.strikes-table th, .strikes-table td {
padding: 4px 6px !important;
white-space: nowrap;
}
/* Touch-friendly: minimum 44px tap targets */
button, select, [role="button"] {
min-height: 32px;
}
/* Index headers — stack */
.index-header {
flex-direction: column;
padding: 0.5rem;
gap: 0.4rem;
}
.index-info { min-width: auto; }
.index-spot { font-size: 1.1rem; }
.fii-dii-grid { min-width: auto; }
/* Strategy bar — wrap compact */
.strategy-bar {
padding: 0.35rem 0.5rem;
gap: 0.4rem;
border-radius: 8px;
margin: 4px 4px 0;
}
.strategy-bar-section {
padding: 0 0.3rem;
gap: 0.25rem;
}
/* Option chain body — horizontal scroll */
.option-chain-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100vw;
}
/* Settings panels — single column */
.settings-panel {
border-radius: 8px !important;
padding: 0.7rem !important;
margin: 0 4px 6px !important;
}
/* Filter/sub-tab buttons — scrollable row */
.filter-btn-group, .rpt-sub-btns,
.cc-sub-tabs, .rpt-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
scrollbar-width: none;
padding-bottom: 4px;
}
.filter-btn-group::-webkit-scrollbar,
.rpt-sub-btns::-webkit-scrollbar,
.cc-sub-tabs::-webkit-scrollbar,
.rpt-tabs::-webkit-scrollbar { display: none; }
.filter-btn, .rpt-sub-btn {
flex: 0 0 auto;
font-size: 0.65rem;
padding: 4px 8px;
white-space: nowrap;
}
/* Accounts row — stack vertically */
.accounts-row {
grid-template-columns: 1fr !important;
gap: 4px;
}
/* General font scaling */
body { font-size: 13px; }
/* Command Center — reduce margins */
.algo-section, .positions-section {
margin: 4px;
}
/* Buttons */
.strat-btn {
font-size: 0.6rem;
padding: 0.25rem 0.5rem;
}
/* Modal / popover adjustments */
.doji-chart-popup {
width: 95vw !important;
max-width: 95vw !important;
left: 2.5vw !important;
}
/* Toast stack — above bottom nav */
.toast-stack {
bottom: 68px !important;
top: auto !important;
}
/* Generic grids — single column on mobile */
.grid-2col, .grid-3col {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
BREAKPOINT: <= 480px (Small phones)
============================================================ */
@media (max-width: 480px) {
.summary {
grid-template-columns: repeat(2, 1fr) !important;
}
.summary-value {
font-size: 0.88rem;
}
.panel {
margin: 0 2px 4px;
padding: 0.4rem;
}
.panel-title {
font-size: 0.76rem;
}
.mobile-bottom-nav .nav-btn {
font-size: 0.46rem;
}
.mobile-bottom-nav .nav-btn .nav-icon {
font-size: 1rem;
}
}
/* ============================================================
BREAKPOINT: 769px–1024px (Tablets)
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
.main-tab-btn {
padding: 8px 10px;
font-size: 0.72rem;
}
.summary {
grid-template-columns: repeat(3, 1fr);
}
.layout-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
DESKTOP: ensure mobile elements hidden
============================================================ */
@media (min-width: 769px) {
.mobile-bottom-nav { display: none !important; }
.mobile-header-bar { display: none !important; }
.mobile-stats-strip { display: none !important; }
}
/* ============================================================
LANDSCAPE MODE (mobile phones rotated)
============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
.mobile-bottom-nav .nav-items { height: 40px; }
.mobile-bottom-nav .nav-btn { font-size: 0.44rem; padding: 2px 1px; }
.mobile-bottom-nav .nav-btn .nav-icon { font-size: 0.95rem; }
.mobile-header-bar { padding: 3px 8px; }
.container.dashboard-container,
.container {
padding-bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
}
/* Use available height, not 100vh (avoids iOS Safari URL bar issue) */
html, body { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }
}
/* ============================================================
iOS PWA: prevent blank screen on sleep/wake and tab switch
============================================================ */
@supports (-webkit-touch-callout: none) {
.container, .container.dashboard-container {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.main-tab-content {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}
}
/* ================================================================
MOBILE APP CSS — Native App Experience
Prefix: mapp- (mobile app)
Imported LAST to win all specificity battles
================================================================ */
/* ── Login Page ─────────────────────────────────────────── */
.mapp-login-bg {
min-height: 100vh; min-height: 100dvh;
display: flex; align-items: center; justify-content: center;
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
background:
radial-gradient(ellipse 72% 58% at 12% 18%, rgba(29,78,216,0.18), transparent 58%),
radial-gradient(ellipse 38% 34% at 86% 18%, rgba(249,115,22,0.13), transparent 54%),
radial-gradient(ellipse 52% 44% at 52% 88%, rgba(124,58,237,0.10), transparent 58%),
linear-gradient(180deg, #0b1320 0%, #101a2b 100%);
position: relative; overflow: hidden;
font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
}
.mapp-login-bg::before {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 82%);
opacity: 0.55;
}
.mapp-login-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 42%);
pointer-events: none;
}
@keyframes mappMeshShift {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.08) translate(-2%,3%); }
}
.mapp-login-orb {
position: absolute; border-radius: 50%; filter: blur(78px); opacity: 0.46;
animation: mappOrbFloat 9s ease-in-out infinite alternate;
}
@keyframes mappOrbFloat {
0% { transform: translateY(0) scale(1); }
100% { transform: translateY(-22px) scale(1.08); }
}
.mapp-login-card {
position: relative; z-index: 2;
width: 100%; max-width: 430px; margin: 0 20px;
background: rgba(14,24,40,0.74);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(148,163,184,0.18);
border-radius: 28px; padding: 38px 30px;
box-shadow: 0 28px 68px rgba(2,6,23,0.44), inset 0 1px 0 rgba(255,255,255,0.06);
}
.mapp-login-brand-block {
text-align: center;
margin-bottom: 26px;
}
.mapp-login-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
margin-bottom: 18px;
background: rgba(249,115,22,0.12);
border: 1px solid rgba(249,115,22,0.28);
color: #fb923c;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mapp-login-logo {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-bottom: 10px;
}
.mapp-login-logo-icon {
position: relative;
width: 56px; height: 56px; border-radius: 16px;
background: linear-gradient(135deg, #4338ca 0%, #7c3aed 54%, #f97316 100%);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1.2rem; font-weight: 900;
box-shadow: 0 14px 32px rgba(17,24,39,0.22), 0 6px 18px rgba(67,56,202,0.26);
overflow: hidden;
}
.mapp-login-logo-icon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 56%);
}
.mapp-login-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em;
color: #e8eef7;
}
.mapp-login-title span {
background: linear-gradient(135deg, #f97316, #fb923c);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mapp-login-subtitle {
text-align: center; font-size: 0.94rem; color: #dbe5f1;
margin-bottom: 6px; font-weight: 700;
letter-spacing: -0.01em;
}
.mapp-login-helper {
max-width: 320px;
margin: 0 auto;
color: #94a3b8;
font-size: 0.78rem;
line-height: 1.55;
}
.mapp-login-field {
position: relative; margin-bottom: 18px;
}
.mapp-login-field label {
display: block; font-size: 0.72rem; font-weight: 700;
color: #a8b4c6; text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 6px;
}
.mapp-login-field .field-icon {
position: absolute; left: 14px; bottom: 14px;
font-size: 0.9rem; color: #64748b; pointer-events: none;
}
.mapp-login-field input {
width: 100%; height: 52px; padding: 0 16px 0 44px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(148,163,184,0.18);
border-radius: 14px; color: #e8eef7; font-size: 0.95rem;
outline: none; box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.mapp-login-field input:focus {
background: rgba(255,255,255,0.07);
border-color: rgba(59,130,246,0.5);
box-shadow: 0 0 0 4px rgba(29,78,216,0.10);
}
.mapp-login-field input::placeholder { color: #728198; }
.mapp-login-btn {
width: 100%; height: 52px; border: none; border-radius: 14px;
background: linear-gradient(135deg, #1d4ed8, #4338ca);
color: #fff; font-size: 0.95rem; font-weight: 800;
cursor: pointer; letter-spacing: 0.03em; margin-top: 6px;
box-shadow: 0 12px 28px rgba(29,78,216,0.22);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.mapp-login-btn:hover { filter: brightness(1.04); box-shadow: 0 16px 32px rgba(29,78,216,0.26); }
.mapp-login-btn:active { transform: scale(0.985); }
.mapp-login-btn:disabled {
background: #223046; color: #728198;
box-shadow: none; cursor: not-allowed;
}
.mapp-login-error {
padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
color: #f87171; font-size: 0.82rem; text-align: center;
}
.mapp-login-footer {
text-align: center; margin-top: 24px;
font-size: 0.7rem; color: #728198;
}
@media (max-width: 480px) {
.mapp-login-card {
margin: 0 14px;
padding: 32px 22px;
border-radius: 24px;
}
.mapp-login-logo {
gap: 12px;
}
.mapp-login-logo-icon {
width: 52px;
height: 52px;
}
.mapp-login-title {
font-size: 1.72rem;
}
}
/* ── Mobile App Shell ───────────────────────────────────── */
.mapp-shell {
background: var(--bg); color: var(--fg);
height: 100vh; height: 100dvh;
padding-top: env(safe-area-inset-top, 0);
font-family: 'Plus Jakarta Sans', sans-serif;
overflow: hidden;
display: flex; flex-direction: column;
}
.mapp-header {
position: relative; z-index: 900; flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px; height: 40px; box-sizing: border-box;
background: var(--card); border-bottom: 1px solid var(--border);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mapp-header-left {
display: flex; align-items: center; gap: 8px;
}
.mapp-header-logo {
width: 24px; height: 24px; border-radius: 6px;
background: linear-gradient(135deg,#1d4ed8,#06b6d4);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.65rem; font-weight: 900; flex-shrink: 0;
}
.mapp-header-brand {
font-size: 0.82rem; font-weight: 900; letter-spacing: -0.3px;
color: var(--fg);
}
.mapp-header-brand span { color: var(--accent); }
.mapp-header-right {
display: flex; align-items: center; gap: 8px;
}
.mapp-live-dot {
width: 8px; height: 8px; border-radius: 50%;
animation: mappPulse 2s infinite;
}
.mapp-live-dot.on { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.mapp-live-dot.off { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); animation: none; }
@keyframes mappPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.mapp-avatar {
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent), rgba(59,130,246,0.6));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.7rem; font-weight: 900;
cursor: pointer; border: none;
transition: transform 0.15s;
}
.mapp-avatar:active { transform: scale(0.9); }
/* ── Hero Balance Card ──────────────────────────────────── */
.mapp-hero {
margin: 8px 12px; padding: 14px;
border-radius: 14px; position: relative; overflow: hidden;
background: var(--card);
border: 1px solid var(--border);
}
.mapp-hero::before {
content: ''; position: absolute; inset: 0; opacity: 0.06;
background: linear-gradient(135deg, var(--accent), transparent 70%);
pointer-events: none;
}
.mapp-hero-label {
font-size: 0.62rem; font-weight: 700; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;
}
.mapp-hero-value {
font-size: 1.4rem; font-weight: 900; line-height: 1.1;
font-family: 'JetBrains Mono', monospace;
margin-bottom: 4px;
}
.mapp-hero-value.profit { color: #10b981; }
.mapp-hero-value.loss { color: #ef4444; }
.mapp-hero-value.neutral { color: var(--fg); }
.mapp-hero-sub {
display: flex; align-items: center; gap: 10px;
font-size: 0.68rem; color: var(--fg-muted);
font-family: 'JetBrains Mono', monospace;
}
.mapp-hero-toggle {
display: flex; gap: 5px; margin-top: 8px;
}
.mapp-hero-pill {
padding: 4px 12px; border-radius: 20px; border: none;
font-size: 0.64rem; font-weight: 800; cursor: pointer;
transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.04em;
}
.mapp-hero-pill.active {
background: var(--accent); color: #fff;
box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
.mapp-hero-pill:not(.active) {
background: rgba(148,163,184,0.08); color: var(--fg-muted);
border: 1px solid var(--border);
}
/* ── Quick Stats Strip ──────────────────────────────────── */
.mapp-stats {
display: flex; gap: 6px; padding: 2px 12px 6px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mapp-stats::-webkit-scrollbar { display: none; }
.mapp-stat-card {
flex: 0 0 auto; min-width: 78px;
background: var(--card); border: 1px solid var(--border);
border-radius: 10px; padding: 7px 10px; text-align: center;
}
.mapp-stat-icon { font-size: 0.85rem; margin-bottom: 1px; }
.mapp-stat-label {
font-size: 0.5rem; font-weight: 800; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.06em;
}
.mapp-stat-value {
font-size: 0.75rem; font-weight: 900; line-height: 1.2;
font-family: 'JetBrains Mono', monospace; margin-top: 1px;
}
/* ── Bottom Navigation ──────────────────────────────────── */
.mapp-bottom-nav {
position: relative; z-index: 950; flex-shrink: 0;
background: var(--card); border-top: 1px solid var(--border);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mapp-nav-items {
display: flex; justify-content: space-around; align-items: stretch;
height: 48px;
}
.mapp-nav-btn {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 1px;
background: none; border: none; padding: 2px 2px;
color: var(--fg-muted); font-size: 0.45rem; font-weight: 800;
cursor: pointer; position: relative;
text-transform: uppercase; letter-spacing: 0.04em;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s;
}
.mapp-nav-btn .nav-icon {
font-size: 1.05rem; line-height: 1; transition: transform 0.2s;
}
.mapp-nav-btn.active { color: var(--accent); }
.mapp-nav-btn.active .nav-icon { transform: scale(1.1); }
.mapp-nav-btn.active::before {
content: ''; position: absolute; top: 0;
left: 25%; right: 25%; height: 2.5px;
background: var(--accent); border-radius: 0 0 3px 3px;
}
/* ── Bottom Sheet (More menu, Profile) ──────────────────── */
.mapp-sheet-backdrop {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
animation: mappFadeIn 0.2s ease;
}
@keyframes mappFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mapp-sheet {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1001;
background: var(--card); border-radius: 20px 20px 0 0;
padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
box-shadow: 0 -12px 40px rgba(0,0,0,0.3);
animation: mappSlideUp 0.25s ease-out;
max-height: 70vh; overflow-y: auto;
}
@keyframes mappSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.mapp-sheet-handle {
width: 36px; height: 4px; border-radius: 4px;
background: var(--border); margin: 0 auto 14px;
}
.mapp-sheet-title {
font-size: 0.95rem; font-weight: 800; margin-bottom: 14px;
color: var(--fg);
}
.mapp-sheet-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mapp-sheet-item {
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 14px 8px; border-radius: 14px;
background: rgba(148,163,184,0.05); border: 1px solid var(--border);
cursor: pointer; transition: all 0.15s;
}
.mapp-sheet-item:active { transform: scale(0.95); }
.mapp-sheet-item.active {
border-color: var(--accent);
background: rgba(59,130,246,0.08);
}
.mapp-sheet-item .icon { font-size: 1.3rem; }
.mapp-sheet-item .label {
font-size: 0.68rem; font-weight: 700; color: var(--fg-muted);
}
.mapp-sheet-item.active .label { color: var(--accent); }
/* ── Profile Drawer ─────────────────────────────────────── */
.mapp-profile-section {
display: flex; align-items: center; gap: 12px;
padding: 12px; margin-bottom: 14px;
background: rgba(148,163,184,0.05); border-radius: 14px;
border: 1px solid var(--border);
}
.mapp-profile-avatar {
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, var(--accent), rgba(139,92,246,0.6));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1.1rem; font-weight: 900; flex-shrink: 0;
}
.mapp-profile-name { font-size: 0.92rem; font-weight: 800; color: var(--fg); }
.mapp-profile-role {
font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
border-radius: 6px; display: inline-block; margin-top: 2px;
}
.mapp-profile-role.admin {
background: rgba(245,158,11,0.12); color: #f59e0b;
border: 1px solid rgba(245,158,11,0.3);
}
.mapp-profile-role.user {
background: rgba(16,185,129,0.12); color: #10b981;
border: 1px solid rgba(16,185,129,0.3);
}
.mapp-theme-grid {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 16px;
}
.mapp-theme-dot {
width: 36px; height: 36px; border-radius: 10px;
border: 2px solid transparent; cursor: pointer;
transition: all 0.15s; position: relative;
}
.mapp-theme-dot.active { border-color: var(--accent); transform: scale(1.1); }
.mapp-theme-dot::after {
content: ''; position: absolute; inset: 3px; border-radius: 7px;
}
.mapp-logout-btn {
width: 100%; padding: 12px; border: 1px solid rgba(239,68,68,0.3);
border-radius: 12px; background: rgba(239,68,68,0.08);
color: #f87171; font-size: 0.85rem; font-weight: 700;
cursor: pointer; text-align: center;
}
.mapp-logout-btn:active { background: rgba(239,68,68,0.15); }
/* ── Sub-Tab Pills (used in CommandCenter, Reports) ────── */
.mapp-pill-nav {
display: flex; gap: 6px; padding: 8px 14px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mapp-pill-nav::-webkit-scrollbar { display: none; }
.mapp-pill-btn {
flex: 0 0 auto; padding: 8px 16px; border-radius: 20px;
border: 1px solid var(--border); background: transparent;
color: var(--fg-muted); font-size: 0.75rem; font-weight: 700;
cursor: pointer; white-space: nowrap;
transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.mapp-pill-btn.active {
background: var(--accent); color: #fff;
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}
.mapp-pill-btn:active { transform: scale(0.95); }
/* ── Card Components ────────────────────────────────────── */
.mapp-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin: 0 14px 10px;
}
.mapp-card-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.mapp-card-title {
font-size: 0.88rem; font-weight: 800; color: var(--fg);
}
.mapp-card-badge {
font-size: 0.62rem; font-weight: 800; padding: 3px 8px;
border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
/* ── Position Card ──────────────────────────────────────── */
.mapp-position-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 8px;
transition: border-color 0.15s;
}
.mapp-position-card.profit { border-left: 3px solid #10b981; }
.mapp-position-card.loss { border-left: 3px solid #ef4444; }
.mapp-pos-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.mapp-pos-status {
font-size: 0.6rem; font-weight: 800; padding: 2px 8px;
border-radius: 4px; text-transform: uppercase;
}
.mapp-pos-status.open { background: rgba(16,185,129,0.12); color: #10b981; }
.mapp-pos-status.closed { background: rgba(100,100,100,0.12); color: #888; }
.mapp-pos-mode {
font-size: 0.58rem; font-weight: 800; padding: 2px 7px;
border-radius: 4px;
}
.mapp-pos-mode.paper { background: rgba(245,158,11,0.12); color: #f59e0b; }
.mapp-pos-mode.real { background: rgba(16,185,129,0.12); color: #10b981; }
.mapp-pos-symbol {
font-size: 0.82rem; font-weight: 800; color: var(--fg);
font-family: 'JetBrains Mono', monospace;
margin-bottom: 8px; word-break: break-all;
}
.mapp-pos-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 6px; margin-bottom: 10px;
}
.mapp-pos-metric {
text-align: center;
}
.mapp-pos-metric-label {
font-size: 0.55rem; font-weight: 700; color: var(--fg-muted);
text-transform: uppercase;
}
.mapp-pos-metric-value {
font-size: 0.82rem; font-weight: 800;
font-family: 'JetBrains Mono', monospace;
color: var(--fg);
}
.mapp-pos-pnl {
font-size: 1.05rem; font-weight: 900;
font-family: 'JetBrains Mono', monospace;
margin-bottom: 10px;
}
.mapp-pos-actions {
display: flex; gap: 8px; align-items: center;
}
.mapp-pos-actions input {
flex: 1; height: 38px; padding: 0 10px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; color: var(--fg); font-size: 0.82rem;
outline: none; font-family: 'JetBrains Mono', monospace;
}
.mapp-pos-actions input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
/* ── Order Card ─────────────────────────────────────────── */
.mapp-order-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
.mapp-order-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.mapp-order-time {
font-size: 0.72rem; color: var(--fg-muted);
font-family: 'JetBrains Mono', monospace;
}
.mapp-order-side {
font-size: 0.62rem; font-weight: 900; padding: 3px 10px;
border-radius: 6px; text-transform: uppercase;
}
.mapp-order-side.buy { background: rgba(16,185,129,0.12); color: #10b981; }
.mapp-order-side.sell { background: rgba(239,68,68,0.12); color: #ef4444; }
.mapp-order-status {
font-size: 0.6rem; font-weight: 800; padding: 2px 7px;
border-radius: 4px; text-transform: uppercase;
}
.mapp-order-symbol {
font-size: 0.8rem; font-weight: 800; color: var(--fg);
font-family: 'JetBrains Mono', monospace; margin-bottom: 4px;
}
.mapp-order-details {
display: flex; gap: 12px; font-size: 0.72rem; color: var(--fg-muted);
font-family: 'JetBrains Mono', monospace;
}
/* ── Strike Card (Option Chain) ─────────────────────────── */
.mapp-strike-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 12px; margin-bottom: 8px;
position: relative;
}
.mapp-strike-card.atm {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(59,130,246,0.15);
}
.mapp-strike-price {
text-align: center; font-size: 0.92rem; font-weight: 900;
color: var(--fg); margin-bottom: 10px;
font-family: 'JetBrains Mono', monospace;
}
.mapp-strike-price .atm-badge {
font-size: 0.55rem; background: var(--accent); color: #fff;
padding: 1px 6px; border-radius: 4px; margin-left: 6px;
vertical-align: middle;
}
.mapp-strike-sides {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mapp-strike-side {
padding: 10px; border-radius: 10px; text-align: center;
}
.mapp-strike-side.ce {
background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15);
}
.mapp-strike-side.pe {
background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15);
}
.mapp-strike-type {
font-size: 0.6rem; font-weight: 900; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px;
}
.mapp-strike-ltp {
font-size: 1rem; font-weight: 900;
font-family: 'JetBrains Mono', monospace;
color: var(--fg); margin-bottom: 2px;
}
.mapp-strike-vol {
font-size: 0.65rem; color: var(--fg-muted); margin-bottom: 8px;
}
.mapp-strike-btns {
display: flex; gap: 6px;
}
.mapp-strike-btns button {
flex: 1; height: 36px; border: none; border-radius: 8px;
font-size: 0.72rem; font-weight: 900; cursor: pointer;
transition: transform 0.1s; -webkit-tap-highlight-color: transparent;
}
.mapp-strike-btns button:active { transform: scale(0.93); }
.mapp-strike-btns .buy-btn {
background: linear-gradient(135deg, #059669, #10b981); color: #fff;
}
.mapp-strike-btns .sell-btn {
background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff;
}
/* ── Buttons ────────────────────────────────────────────── */
.mapp-btn {
height: 44px; border: none; border-radius: 12px;
font-size: 0.82rem; font-weight: 800; cursor: pointer;
padding: 0 20px; transition: transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.mapp-btn:active { transform: scale(0.96); }
.mapp-btn.primary {
background: linear-gradient(135deg, #1d4ed8, #0891b2);
color: #fff; box-shadow: 0 4px 12px rgba(29,78,216,0.2);
}
.mapp-btn.success {
background: linear-gradient(135deg, #059669, #10b981);
color: #fff;
}
.mapp-btn.danger {
background: rgba(239,68,68,0.12); color: #f87171;
border: 1px solid rgba(239,68,68,0.3);
}
.mapp-btn.danger:active { background: rgba(239,68,68,0.2); }
.mapp-btn.secondary {
background: rgba(148,163,184,0.08); color: var(--fg-muted);
border: 1px solid var(--border);
}
.mapp-btn.full { width: 100%; }
.mapp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Summary Grid (3-col) ──────────────────────────────── */
.mapp-summary-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; padding: 0 14px; margin-bottom: 10px;
}
.mapp-summary-item {
background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 10px; text-align: center;
}
.mapp-summary-item .label {
font-size: 0.55rem; font-weight: 800; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.mapp-summary-item .value {
font-size: 0.95rem; font-weight: 900;
font-family: 'JetBrains Mono', monospace;
margin-top: 2px;
}
/* ── Filter Pills ───────────────────────────────────────── */
.mapp-filters {
display: flex; gap: 6px; padding: 6px 14px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mapp-filters::-webkit-scrollbar { display: none; }
.mapp-filter-pill {
flex: 0 0 auto; padding: 6px 14px; border-radius: 20px;
border: 1px solid var(--border); background: transparent;
color: var(--fg-muted); font-size: 0.68rem; font-weight: 700;
cursor: pointer; white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.mapp-filter-pill.active {
background: rgba(59,130,246,0.12); color: var(--accent);
border-color: var(--accent);
}
/* ── Chart Card (full-width) ────────────────────────────── */
.mapp-chart-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin: 0 14px 10px;
}
.mapp-chart-card .chart-title {
font-size: 0.78rem; font-weight: 800; color: var(--fg);
margin-bottom: 8px;
}
.mapp-chart-card canvas {
width: 100% !important; height: 200px !important;
display: block; border-radius: 8px;
}
/* ── Doji Signal Card ───────────────────────────────────── */
.mapp-signal-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 8px;
}
.mapp-signal-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.mapp-signal-symbol {
font-size: 0.85rem; font-weight: 800; color: var(--fg);
}
.mapp-signal-badges {
display: flex; gap: 4px;
}
.mapp-signal-badge {
font-size: 0.58rem; font-weight: 900; padding: 2px 8px;
border-radius: 6px; text-transform: uppercase;
}
.mapp-signal-badge.dragonfly { background: rgba(16,185,129,0.12); color: #10b981; }
.mapp-signal-badge.gravestone { background: rgba(239,68,68,0.12); color: #ef4444; }
.mapp-signal-badge.longlegged { background: rgba(139,92,246,0.12); color: #a78bfa; }
.mapp-signal-badge.buy { background: rgba(16,185,129,0.12); color: #10b981; }
.mapp-signal-badge.sell { background: rgba(239,68,68,0.12); color: #ef4444; }
.mapp-signal-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
}
.mapp-signal-metric {
text-align: center;
}
.mapp-signal-metric .label {
font-size: 0.52rem; font-weight: 700; color: var(--fg-muted);
text-transform: uppercase;
}
.mapp-signal-metric .value {
font-size: 0.78rem; font-weight: 800;
font-family: 'JetBrains Mono', monospace;
}
/* ── Strategy Toggle Card ───────────────────────────────── */
.mapp-strategy-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 8px;
}
.mapp-strategy-header {
display: flex; justify-content: space-between; align-items: center;
}
.mapp-strategy-name {
font-size: 0.85rem; font-weight: 800; color: var(--fg);
}
.mapp-toggle {
width: 48px; height: 26px; border-radius: 14px;
border: none; cursor: pointer; position: relative;
transition: background 0.2s;
-webkit-tap-highlight-color: transparent;
}
.mapp-toggle.on { background: #10b981; }
.mapp-toggle.off { background: var(--border); }
.mapp-toggle::after {
content: ''; position: absolute;
width: 22px; height: 22px; border-radius: 50%;
background: #fff; top: 2px; transition: left 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.mapp-toggle.on::after { left: 24px; }
.mapp-toggle.off::after { left: 2px; }
/* ── Form Fields ────────────────────────────────────────── */
.mapp-form { padding: 0 14px; }
.mapp-form-group { margin-bottom: 14px; }
.mapp-form-label {
display: block; font-size: 0.72rem; font-weight: 700;
color: var(--fg-muted); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.mapp-form-input,
.mapp-form-select {
width: 100%; height: 44px; padding: 0 14px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; color: var(--fg); font-size: 0.85rem;
outline: none; box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mapp-form-input:focus, .mapp-form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.mapp-form-input::placeholder { color: var(--fg-muted); }
/* ── User Card (replaces table row) ─────────────────────── */
.mapp-user-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 8px;
}
.mapp-user-card-top {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.mapp-user-name { font-size: 0.9rem; font-weight: 800; color: var(--fg); }
.mapp-user-card-actions {
display: flex; gap: 6px;
}
/* ── Collection Pill (DB Explorer) ──────────────────────── */
.mapp-collection-pills {
display: flex; gap: 6px; padding: 8px 14px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mapp-collection-pills::-webkit-scrollbar { display: none; }
.mapp-collection-pill {
flex: 0 0 auto; padding: 8px 14px; border-radius: 12px;
border: 1px solid var(--border); background: var(--card);
color: var(--fg-muted); font-size: 0.72rem; font-weight: 700;
cursor: pointer; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.mapp-collection-pill.active {
border-color: var(--accent); color: var(--accent);
background: rgba(59,130,246,0.08);
}
.mapp-collection-pill .count {
font-size: 0.6rem; background: var(--border); color: var(--fg-muted);
padding: 1px 6px; border-radius: 8px;
}
/* ── Document Card (DB Explorer) ────────────────────────── */
.mapp-doc-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 8px;
}
.mapp-doc-field {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 4px 0; border-bottom: 1px solid rgba(148,163,184,0.06);
}
.mapp-doc-field:last-child { border-bottom: none; }
.mapp-doc-key {
font-size: 0.65rem; font-weight: 700; color: var(--fg-muted);
text-transform: uppercase; flex-shrink: 0; margin-right: 8px;
}
.mapp-doc-val {
font-size: 0.75rem; color: var(--fg); text-align: right;
word-break: break-all; font-family: 'JetBrains Mono', monospace;
}
/* ── Trade Confirm Bottom Sheet ─────────────────────────── */
.mapp-confirm-backdrop {
position: fixed; inset: 0; z-index: 20000;
background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
animation: mappFadeIn 0.15s ease;
}
.mapp-confirm-sheet {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 20001;
background: var(--card); border-radius: 20px 20px 0 0;
padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0));
animation: mappSlideUp 0.2s ease-out;
}
.mapp-confirm-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; margin: 0 auto 10px;
}
.mapp-confirm-title {
text-align: center; font-size: 1rem; font-weight: 900;
color: var(--fg); margin-bottom: 12px;
}
.mapp-confirm-body {
background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; padding: 14px; margin-bottom: 16px;
font-size: 0.82rem; font-family: 'JetBrains Mono', monospace;
color: var(--fg); line-height: 1.6;
}
.mapp-confirm-buttons {
display: flex; gap: 10px;
}
.mapp-confirm-buttons button {
flex: 1; height: 50px; border-radius: 14px; border: none;
font-size: 0.92rem; font-weight: 800; cursor: pointer;
transition: transform 0.1s;
}
.mapp-confirm-buttons button:active { transform: scale(0.96); }
.mapp-confirm-cancel {
background: rgba(148,163,184,0.08); color: var(--fg-muted);
border: 1px solid var(--border) !important;
}
.mapp-confirm-action { color: #fff; }
/* ── Empty State ────────────────────────────────────────── */
.mapp-empty {
text-align: center; padding: 40px 20px; color: var(--fg-muted);
}
.mapp-empty .icon { font-size: 2.5rem; margin-bottom: 8px; }
.mapp-empty .text { font-size: 0.85rem; font-weight: 600; }
.mapp-empty .sub { font-size: 0.72rem; margin-top: 4px; }
/* ── Lot Selector ───────────────────────────────────────── */
.mapp-lot-select {
height: 36px; padding: 0 8px; border-radius: 8px;
background: var(--bg); border: 1px solid var(--border);
color: var(--fg); font-size: 0.78rem; font-weight: 700;
font-family: 'JetBrains Mono', monospace;
}
/* ── Collapsible Section ────────────────────────────────── */
.mapp-collapse-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 14px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mapp-collapse-arrow {
font-size: 0.7rem; color: var(--fg-muted);
transition: transform 0.2s;
}
.mapp-collapse-arrow.open { transform: rotate(180deg); }
/* ── Index Header Card ──────────────────────────────────── */
.mapp-index-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin: 0 14px 10px;
}
.mapp-index-name {
font-size: 0.72rem; font-weight: 800; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.mapp-index-spot {
font-size: 1.5rem; font-weight: 900;
font-family: 'JetBrains Mono', monospace; color: var(--fg);
margin-bottom: 8px;
}
.mapp-index-meta {
display: flex; gap: 12px; font-size: 0.72rem; color: var(--fg-muted);
font-family: 'JetBrains Mono', monospace;
}
/* ── Tab Content Wrapper ────────────────────────────────── */
.mapp-content {
flex: 1 1 0%; overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0 0 8px;
}
.mapp-content-padded {
padding: 0 12px 6px;
}
.mapp-section-title {
font-size: 0.7rem; font-weight: 800; color: var(--fg);
padding: 6px 12px 4px; text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ── Algo / Report Block Card ───────────────────────────── */
.mapp-block-card {
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; margin-bottom: 8px; overflow: hidden;
}
.mapp-block-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mapp-block-title { font-size: 0.82rem; font-weight: 800; color: var(--fg); }
.mapp-block-pnl { font-size: 0.82rem; font-weight: 900; font-family: 'JetBrains Mono', monospace; }
.mapp-block-body { padding: 0 14px 14px; }
/* ── Responsive Utilities ───────────────────────────────── */
.mapp-scroll-x {
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mapp-scroll-x::-webkit-scrollbar { display: none; }
.mapp-gap-8 { gap: 8px; }
.mapp-gap-6 { gap: 6px; }
.mapp-mt-8 { margin-top: 8px; }
.mapp-mb-8 { margin-bottom: 8px; }
.mapp-px-14 { padding-left: 14px; padding-right: 14px; }
/* ── LIVE / OFFLINE Badge (mobile header) ──────────────── */
.mapp-live-badge {
display: flex; align-items: center; gap: 5px;
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em;
padding: 4px 10px; border-radius: 8px; white-space: nowrap;
}
.mapp-live-badge.live {
color: #10b981;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.3);
}
.mapp-live-badge.offline {
color: #ef4444;
background: rgba(239,68,68,0.12);
border: 1px solid rgba(239,68,68,0.3);
}
.mapp-live-blink, .mapp-offline-blink {
width: 6px; height: 6px; border-radius: 50%;
display: inline-block;
}
.mapp-live-blink {
background: #10b981;
animation: liveBlink 1.5s infinite;
}
.mapp-offline-blink {
background: #ef4444;
animation: liveBlink 1.5s infinite;
}
@keyframes liveBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
/* ── Auto Trade Button (mobile header) ─────────────────── */
.mapp-auto-trade-btn {
font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em;
padding: 4px 8px; border-radius: 6px; border: none;
cursor: pointer; white-space: nowrap;
}
.mapp-auto-trade-btn.on {
color: #fff;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.mapp-auto-trade-btn.off {
color: var(--fg-muted, #94a3b8);
background: var(--glass, rgba(15,23,42,0.6));
border: 1px solid var(--border, #334155);
}
/* ── Mobile Overflow Fixes ─────────────────────────────── */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.mapp-shell { max-width: 100vw; }
/* ── Prevent blank screen on iOS (Safari 100vh bug + visibility) ── */
.mapp-shell {
height: 100vh; height: -webkit-fill-available; height: 100dvh;
visibility: visible !important;
opacity: 1 !important;
/* GPU compositing layer — prevents blank on context loss */
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
html { height: -webkit-fill-available; }
body { min-height: 100vh; min-height: -webkit-fill-available; min-height: 100dvh; }
/* Prevent iOS overscroll blanking */
body {
overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch;
}
/* Force visibility on all tab content — prevents blank after sleep/resume */
.mapp-content,
.mapp-content > *,
.mapp-content-padded,
.mapp-content-padded > * {
visibility: visible !important;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Force all critical UI to stay on GPU layer */
.mapp-header,
.mapp-bottom-nav,
.mapp-content {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
/* iOS PWA: prevent blank screen on orientation change or wake from sleep */
@supports (-webkit-touch-callout: none) {
.mapp-shell {
min-height: -webkit-fill-available;
-webkit-transform: translate3d(0,0,0);
}
.mapp-bottom-nav {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Landscape fix: prevent content from becoming invisible */
.mapp-content {
-webkit-overflow-scrolling: touch;
min-height: 0;
}
}
/* ── Landscape Mode ──────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
.mapp-shell {
padding-bottom: 0;
/* Critical: recalculate height in landscape */
height: 100vh; height: 100dvh; height: -webkit-fill-available;
visibility: visible !important;
opacity: 1 !important;
}
.mapp-header {
height: 32px; padding: 2px 10px;
}
.mapp-nav-items { height: 36px; }
.mapp-nav-btn { font-size: 0.4rem; }
.mapp-nav-btn .nav-icon { font-size: 0.85rem; }
.mapp-content {
flex: 1 1 0%;
visibility: visible !important;
opacity: 1 !important;
}
.mapp-hero { margin: 4px 8px; padding: 8px; }
.mapp-hero-value { font-size: 1rem; }
.mapp-stats { padding: 2px 8px; }
.mapp-stat-card { padding: 4px 6px; min-width: 65px; }
.mapp-card { padding: 8px; margin: 0 8px 6px; border-radius: 10px; }
.mapp-pill-nav { padding: 4px 10px; }
.mapp-pill-btn { padding: 5px 10px; font-size: 0.68rem; }
.mapp-position-card { padding: 8px; margin-bottom: 4px; }
.mapp-order-card { padding: 8px 10px; margin-bottom: 4px; }
.mapp-strike-card { padding: 8px; margin-bottom: 4px; }
.mapp-section-title { padding: 4px 8px 2px; font-size: 0.65rem; }
.mapp-index-card { padding: 8px; margin: 0 8px 6px; }
.mapp-strike-sides { gap: 4px; }
.mapp-strike-btns button { height: 30px; font-size: 0.65rem; }
.mapp-confirm-sheet { max-height: 85vh; }
.mapp-sheet { max-height: 80vh; }
}
/* ── Compact option chain grid styles (new table-like layout) ── */
.mapp-chain-grid-row {
display: grid;
grid-template-columns: 1fr 60px 1fr;
border-bottom: 1px solid var(--border);
min-height: 44px;
align-items: center;
}
.mapp-chain-grid-row.atm {
background: rgba(59,130,246,0.06);
border-left: 2px solid var(--accent);
border-right: 2px solid var(--accent);
}
.mapp-chain-ce, .mapp-chain-pe {
display: flex; align-items: center; gap: 4px;
padding: 4px 6px; font-size: 0.75rem;
font-family: 'JetBrains Mono', monospace;
}
.mapp-chain-strike {
text-align: center; font-weight: 900; font-size: 0.78rem;
color: var(--fg); background: rgba(148,163,184,0.04);
font-family: 'JetBrains Mono', monospace;
padding: 4px 2px;
}
.mapp-chain-btn {
min-width: 28px; height: 26px; border: none; border-radius: 5px;
font-size: 0.65rem; font-weight: 900; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.1s;
flex-shrink: 0;
}
.mapp-chain-btn:active { transform: scale(0.9); }
.mapp-chain-btn.buy { background: #059669; color: #fff; }
.mapp-chain-btn.sell { background: #dc2626; color: #fff; }
@media (max-width: 360px) {
.mapp-stat-card { min-width: 70px; }
.mapp-signal-grid { grid-template-columns: 1fr 1fr !important; }
.mapp-pill-btn { max-width: 90px; font-size: 0.68rem !important; padding: 6px 8px !important; }
.mapp-chain-grid-row { grid-template-columns: 1fr 50px 1fr; }
.mapp-chain-btn { min-width: 24px; height: 24px; font-size: 0.6rem; }
}
@media (max-width: 480px) {
.mapp-signal-grid { grid-template-columns: 1fr 1fr; }
}
|