/* ===== from index.html line 62 (attrs: none) ===== */
:root {
/* ══ Power BI Professional Dark Theme ══ */
--c-bg: #010913;
--c-bg2: #060f1c;
--c-bg3: #0d1828;
--c-surface: #000e23;
--c-surface2: #091525;
--c-border: rgba(255,255,255,0.10);
--c-border2: rgba(255,255,255,0.18);
--c-text1: #ffffff;
--c-text2: #adb5bd;
--c-text3: #6c757d;
/* ── Exact Power BI Screenshot Colors ── */
--c-green: #52b788;
--c-green2: #74c69d;
--c-blue: #457b9d;
--c-blue2: #1d3557;
--c-amber: #e9c46a;
--c-amber2: #f4a261;
--c-red: #e63946;
--c-red2: #e76f51;
--c-purple: #6d4c8e;
--c-purple2: #7b5ea7;
--c-teal: #2a9d8f;
--c-teal2: #40b2a4;
/* ── Legacy compat ── */
--bg-primary: var(--c-bg);
--bg-secondary: var(--c-bg2);
--glass-bg: var(--c-surface);
--text-primary: var(--c-text1);
--text-secondary: var(--c-text2);
--border-color: var(--c-border);
}
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px;
/* يمنع Android WebView من تكبير الخطوط تلقائيًا (Font Boosting)
وهو السبب في اختفاء/تشوّه أزرار +/- داخل الـ stepper على الموبايل */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--c-bg);
color: var(--c-text1);
overflow-x: hidden;
min-height: 100vh;
}
/* ══ Power BI KPI Card Overrides ══ */
/* All glass panels get solid background */
.glass-panel,
.dsg-container,
.dsg-card,
.dsg-empty,
.ees-card,
.al-form {
background: rgba(0,14,35,0.95) !important;
border-color: rgba(255,255,255,0.12) !important;
border-radius: 8px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Rows and inner surfaces */
.ds-row,
.ds-toggle-row,
.wl-row,
.al-row,
.submenu-body {
background: #0a1220 !important;
border-color: rgba(255,255,255,0.08) !important;
}
/* Stepper */
.ds-stepper,
.ds-stepper-btn,
.ds-section {
background: #020b18 !important;
border-color: rgba(255,255,255,0.10) !important;
}
/* Scanner tabs active */
.scn-tab.active { background: #091525 !important; }
/* Scanner select dropdowns */
.scn-ctrl-select option,
.qis-ctrl-sel option { background: #020b18 !important; }
/* Settings panel */
#settingsSidePanel { background: #020b18 !important; }
/* TF buttons */
.tf-btn {
background: #080f1c;
border: 1px solid rgba(255,255,255,0.10);
color: #adb5bd;
border-radius: 6px;
font-weight: 700;
}
.tf-btn.active {
background: #52b788 !important;
color: #fff !important;
border-color: #52b788 !important;
}
/* Signal badges — solid like Power BI */
.signal-buy {
background: rgba(82,183,136,0.18) !important;
border: 1px solid #52b788 !important;
color: #52b788 !important;
}
.signal-buy-plus {
background: #52b788 !important;
border: 2px solid #52b788 !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(82,183,136,0.4) !important;
}
.signal-sell {
background: rgba(230,57,70,0.18) !important;
border: 1px solid #e63946 !important;
color: #e63946 !important;
}
.signal-sell-plus {
background: #e63946 !important;
border: 2px solid #e63946 !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(230,57,70,0.4) !important;
}
/* Score bar fills — Power BI style gradient */
.dsg-bar-on { background: #52b788 !important; }
.dsg-bar-onb { background: #52b788 !important; }
/* Pulse glow — green */
.pulse-glow {
box-shadow: 0 0 0 2px rgba(82,183,136,0.4) !important;
animation: none !important;
background: rgba(82,183,136,0.06) !important;
}
/* WS Status bar — solid */
.ws-status.connected {
background: #52b788 !important;
color: #fff !important;
border-color: #52b788 !important;
}
.ws-status.disconnected {
background: #e63946 !important;
color: #fff !important;
border-color: #e63946 !important;
}
.ws-status.connecting {
background: #e76f51 !important;
color: #fff !important;
border-color: #e76f51 !important;
}
/* Chart bg */
#signalChart { background: #020b18 !important; }
/* DSG table header */
.dsg-table th {
background: #020b18 !important;
color: #6c757d !important;
border-bottom: 2px solid rgba(255,255,255,0.08) !important;
}
/* MTF bar cells */
.mtf-bull { background: #52b788 !important; color: #fff !important; }
.mtf-bear { background: #e63946 !important; color: #fff !important; }
.mtf-neut { background: #091525 !important; color: #adb5bd !important; }
/* SMC tags — solid outline style */
.bos-tag { background: rgba(69,123,157,0.15) !important; color: #457b9d !important; border-color: rgba(69,123,157,0.4) !important; }
.choch-tag{ background: rgba(109,76,142,0.15) !important; color: #7b5ea7 !important; border-color: rgba(109,76,142,0.4) !important; }
.ob-tag { background: rgba(231,111,81,0.15) !important; color: #e76f51 !important; border-color: rgba(231,111,81,0.4) !important; }
.fvg-tag { background: rgba(230,57,70,0.15) !important; color: #e63946 !important; border-color: rgba(230,57,70,0.4) !important; }
.liq-tag { background: rgba(82,183,136,0.15) !important; color: #52b788 !important; border-color: rgba(82,183,136,0.4) !important; }
/* v2 tags — solid */
.v2-tag-cyan { background: rgba(69,123,157,0.15) !important; color: #457b9d !important; border-color: rgba(69,123,157,0.35) !important; }
.v2-tag-green { background: rgba(82,183,136,0.15) !important; color: #52b788 !important; border-color: rgba(82,183,136,0.35) !important; }
.v2-tag-gold { background: rgba(231,111,81,0.15) !important; color: #e76f51 !important; border-color: rgba(231,111,81,0.35) !important; }
.v2-tag-red { background: rgba(230,57,70,0.15) !important; color: #e63946 !important; border-color: rgba(230,57,70,0.35) !important; }
/* Grade badges solid */
.v2-grade-splus { background: #52b788 !important; color: #fff !important; border-color: #52b788 !important; box-shadow: 0 2px 8px rgba(82,183,136,0.4) !important; }
.v2-grade-s { background: #457b9d !important; color: #fff !important; border-color: #457b9d !important; box-shadow: 0 2px 8px rgba(69,123,157,0.4) !important; }
.v2-grade-aplus { background: #e9c46a !important; color: #060d18 !important; border-color: #e9c46a !important; }
/* v2 title bar */
.v2-title { color: #457b9d !important; }
.v2-bk-bar-fill { background: linear-gradient(90deg, #457b9d, #6d4c8e) !important; }
.v2-score-fill { background: linear-gradient(90deg, #52b788, #457b9d) !important; }
.v2-tf-bull { background: #52b788 !important; }
.v2-tf-bear { background: #e63946 !important; }
.v2-tf-neut { background: #091525 !important; }
/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #060d18; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
/* ── END Power BI overrides ── */
/* ── Solid Panel — Power BI Card Style ── */
.glass-panel {
background: var(--c-surface);
border: 1px solid var(--c-border2);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* ── Gradient Text ── */
.gradient-text {
background: linear-gradient(135deg, #52b788 0%, #457b9d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.live-pulse { animation:live-pulse 1.5s ease-in-out infinite; }
@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.pulse-ring { animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite; }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(82,183,136,.7)} 70%{box-shadow:0 0 0 10px rgba(82,183,136,0)} 100%{box-shadow:0 0 0 0 rgba(82,183,136,0)} }
.alert-toast { animation:slideIn .3s ease-out; }
/* ── نظام الإشارة المبدئية / المؤكدة ── */
@keyframes pulse-prelim {
0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(231,111,81,0.5); }
50% { opacity:.75; box-shadow:0 0 0 4px rgba(231,111,81,0); }
}
@keyframes pulse-alert-warn {
0%,100% { box-shadow:0 0 0 0 rgba(230,57,70,0.6); }
50% { box-shadow:0 0 0 6px rgba(230,57,70,0); }
}
.badge-prelim { background:rgba(231,111,81,.12); color:#e76f51; border-color:rgba(231,111,81,.3); animation:pulse-prelim 1.4s infinite; }
.badge-confirmed { background:rgba(82,183,136,.12); color:#52b788; border-color:rgba(82,183,136,.3); animation:none; }
.ob-alert-pulse { animation:pulse-alert-warn 1s infinite; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.signal-entry { animation:fadeInUp .35s ease forwards; }
.signal-buy { background:rgba(82,183,136,.12); border:1px solid rgba(82,183,136,.35); color:#52b788; }
.signal-buy-plus { background:rgba(82,183,136,.2); border:2px solid #52b788; color:#52b788; box-shadow:0 0 14px rgba(82,183,136,.25); }
.signal-sell { background:rgba(230,57,70,.12); border:1px solid rgba(230,57,70,.35); color:#e63946; }
.signal-sell-plus { background:rgba(230,57,70,.2); border:2px solid #e63946; color:#e63946; box-shadow:0 0 14px rgba(230,57,70,.25); }
.ws-status.connected { background:rgba(82,183,136,.15); color:#52b788; border-color:rgba(82,183,136,.3); }
.ws-status.disconnected { background:rgba(230,57,70,.15); color:#e63946; border-color:rgba(230,57,70,.3); }
.ws-status.connecting { background:rgba(231,111,81,.15); color:#e76f51; border-color:rgba(231,111,81,.3); }
.tf-btn.active { background:linear-gradient(135deg,#52b788,#52b788); color:#fff; border-color:transparent; }
.smart-tag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; white-space:nowrap; }
.bos-tag { background:rgba(69,123,157,.15); color:#457b9d; border:1px solid rgba(69,123,157,.35); }
.choch-tag { background:rgba(109,76,142,.15); color:#6d4c8e; border:1px solid rgba(109,76,142,.35); }
.ob-tag { background:rgba(231,111,81,.15); color:#e76f51; border:1px solid rgba(231,111,81,.35); }
.fvg-tag { background:rgba(233,30,140,.15); color:#e91e8c; border:1px solid rgba(233,30,140,.35); }
.liq-tag { background:rgba(82,183,136,.15); color:#52b788; border:1px solid rgba(82,183,136,.35); }
#signalChart {
background: #060d18;
border-radius: 0;
overflow: hidden;
touch-action: none;
border: none;
}
#signalChart canvas { touch-action: none !important; }
/* ── شريط المعلومات العلوي (OHLC) ── */
#chartOhlcBar {
position: absolute;
top: 6px;
left: 8px;
right: auto;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
font-family: 'Cairo', monospace;
font-size: 10px;
color: #6b7280;
pointer-events: none;
direction: ltr;
background: rgba(10,18,32,0.75);
padding: 3px 8px;
border-radius: 6px;
backdrop-filter: blur(4px);
}
#chartOhlcBar span { color: #9ca3af; font-weight: 600; }
#chartOhlcBar .ohlc-o { color: #d1d5db; }
#chartOhlcBar .ohlc-h { color: #52b788; }
#chartOhlcBar .ohlc-l { color: #e63946; }
#chartOhlcBar .ohlc-c { color: #e76f51; font-weight: 800; }
#chartOhlcBar .ohlc-chg.up { color: #52b788; }
#chartOhlcBar .ohlc-chg.down { color: #e63946; }
.cond-ok { color:#52b788; } .cond-fail { color:#374151; }
/* CryptoFees */
.cf-card { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); border-radius:14px; padding:14px 16px; transition:border-color .2s; }
.cf-card:hover { border-color:rgba(255,255,255,0.1); }
.cf-metric-label { font-size:10px; color:#6b7280; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.cf-metric-val { font-size:1.35rem; font-weight:900; line-height:1.1; font-family:'Cairo',sans-serif; }
.cf-ratio-card { background:rgba(255,255,255,0.015); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:10px 14px; }
.cf-badge { font-size:9px; font-weight:700; padding:2px 6px; border-radius:5px; }
.cf-tag-cat { background:rgba(82,183,136,.15); color:#52b788; border:1px solid rgba(82,183,136,.25); }
.cf-positive { color:#52b788; } .cf-negative { color:#e63946; } .cf-neutral { color:#e76f51; }
.cf-sparkline path { fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@keyframes cfFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cf-fade { animation:cfFade .4s ease forwards; }
.cf-tab { padding:5px 12px; border-radius:7px; font-size:10px; font-weight:700; transition:all .2s; cursor:pointer; border:none; color:#6b7280; background:transparent; }
.cf-tab.active { background:rgba(82,183,136,.15); color:#52b788; }
.cf-tab:hover:not(.active) { color:#9ca3af; }
.cf-growth-up { background:rgba(82,183,136,0.07); border:1px solid rgba(82,183,136,0.25); }
.cf-growth-down { background:rgba(230,57,70,0.07); border:1px solid rgba(230,57,70,0.25); }
.cf-growth-flat { background:rgba(231,111,81,0.07); border:1px solid rgba(231,111,81,0.25); }
.offline-banner { background:linear-gradient(90deg,rgba(231,111,81,0.15),rgba(231,111,81,0.05)); border:1px solid rgba(231,111,81,0.3); }
.mock-badge { background:rgba(69,123,157,0.15); color:#457b9d; border:1px solid rgba(69,123,157,0.3); font-size:9px; padding:2px 8px; border-radius:4px; }
.ws-status.offline { background:rgba(107,114,128,0.15); color:#6b7280; border-color:rgba(107,114,128,0.3); }
/* ── Settings Side Panel ── */
#settingsSidePanel {
position: fixed;
top: 0; right: -360px;
width: 340px;
height: 100vh;
z-index: 9999;
background: #060d18;
border-left: 1px solid rgba(168,85,246,0.25);
box-shadow: -8px 0 32px rgba(0,0,0,0.6);
transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
overflow-y: auto;
padding: 0;
}
#settingsSidePanel.open { right: 0; }
#settingsOverlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9998;
display: none;
backdrop-filter: blur(2px);
}
#settingsOverlay.open { display: block; }
#settingsToggleBtn {
position: fixed;
bottom: 24px; right: 24px;
z-index: 9997;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(168,85,246,0.15);
border: 1px solid rgba(168,85,246,0.35);
color: #a855f6;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
transition: all 0.2s;
}
#settingsToggleBtn:hover { background: rgba(168,85,246,0.28); transform: scale(1.08); }
/* ── Mobile Responsive ──────────────────────────── */
@media (max-width:640px) {
main.max-w-\[1800px\] { padding:8px !important; }
.max-w-\[1800px\] { padding-left:8px !important; padding-right:8px !important; }
#settingsSidePanel { width:92vw; right:-94vw; }
#settingsSidePanel.open { right:0; }
#settingsToggleBtn { bottom:16px; right:16px; width:42px; height:42px; font-size:16px; }
h1.gradient-text { font-size:0.95rem !important; }
.glass-panel { border-radius:14px !important; }
.text-3xl { font-size:1.5rem !important; }
}
@media (max-width:768px) {
.lg\:col-span-2 { grid-column:span 1 !important; }
.text-xl { font-size:1rem !important; }
}
/* ── SMC Filter Toggles ─────────────────────────── */
.smc-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:9px; font-size:10px; font-weight:700; cursor:pointer; border:1px solid; transition:all 0.2s; user-select:none; }
.smc-toggle.on { background:rgba(82,183,136,0.14); color:#52b788; border-color:rgba(82,183,136,0.35); }
.smc-toggle.off { background:rgba(255,255,255,0.03); color:#4b5563; border-color:rgba(255,255,255,0.07); }
.smc-toggle .dot { width:7px; height:7px; border-radius:50%; background:currentColor; transition:all 0.2s; }
/* ── Sidebar Submenus ───────────────────────────── */
.submenu-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
border: none;
background: transparent;
color: #cbd5e1;
transition: background 0.15s, color 0.15s;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.submenu-header:hover { background: rgba(255,255,255,0.03); color: #fff; }
.submenu-header .submenu-icon { font-size: 13px; }
.submenu-header .submenu-arrow {
font-size: 9px;
color: #6b7280;
transition: transform 0.25s;
}
.submenu-header.open .submenu-arrow { transform: rotate(90deg); }
.submenu-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* ── FIX: max-height محسوب من JS بدلاً من 9999px لتجنّب تأخّر الـ transition ── */
.submenu-content.open { max-height: none; /* يُضبط بـ JS في toggleSubmenu() */ }
.submenu-body {
padding: 12px 14px;
background: #0d1828;
border-radius: 0 0 10px 10px;
}
/* ══ Deep Space Settings Panel ══════════════════════════════════════ */
.ind-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: 8px;
margin-bottom: 3px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.055);
transition: border-color 0.15s, background 0.15s;
}
.ind-row:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
.ind-row:last-child { margin-bottom: 0; }
.ind-label {
font-size: 10px;
font-weight: 300;
color: #94a3b8;
flex: 1;
font-family: 'Cairo', sans-serif;
line-height: 1.4;
}
.ind-input {
width: 64px;
padding: 4px 8px;
border-radius: 7px;
border: 1px solid rgba(82,183,136,0.25);
background: rgba(8,15,28,0.8);
color: #52b788;
font-size: 11px;
font-family: 'Cairo', monospace;
font-weight: 700;
text-align: center;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ind-input:focus { border-color: #52b788; box-shadow: 0 0 0 2px rgba(82,183,136,0.15); }
.tf-pref-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tf-pref-btn {
padding: 4px 10px;
border-radius: 6px;
font-size: 9px;
font-weight: 700;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
color: #4b5563;
transition: all 0.15s;
font-family: 'Cairo', sans-serif;
}
.tf-pref-btn:hover { color: #9ca3af; border-color: rgba(255,255,255,0.15); }
.tf-pref-btn.active { background: rgba(82,183,136,0.15); color: #52b788; border-color: rgba(82,183,136,0.35); }
.ind-save-btn {
width: 100%;
margin-top: 10px;
padding: 7px;
border-radius: 9px;
border: 1px solid rgba(82,183,136,0.3);
background: rgba(82,183,136,0.1);
color: #52b788;
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: 'Cairo', sans-serif;
}
.ind-save-btn:hover { background: rgba(82,183,136,0.2); box-shadow: 0 0 8px rgba(82,183,136,0.15); }
/* Override light mode — force dark style always in scanner settings */
/* ── Order Book & Whale Tracker ── */
.ob-row { display:flex; align-items:center; gap:4px; padding:3px 0; font-size:10px; font-family:monospace; border-radius:4px; transition:background 0.2s; }
.ob-row:hover { background:rgba(255,255,255,0.03); }
.ob-bar-bg { position:relative; height:20px; border-radius:3px; overflow:hidden; flex:1; }
.ob-bar-fill { position:absolute; top:0; height:100%; border-radius:3px; transition:width 0.4s ease; }
.ob-bar-ask .ob-bar-fill { background:rgba(230,57,70,0.25); right:0; }
.ob-bar-bid .ob-bar-fill { background:rgba(82,183,136,0.25); left:0; }
.ob-price { width:80px; text-align:center; font-weight:700; font-size:10px; }
.ob-size { width:70px; text-align:right; color:#9ca3af; font-size:9px; }
.ob-total { width:60px; text-align:right; color:#6b7280; font-size:9px; }
.whale-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; margin-bottom:4px; font-size:10px; animation:fadeInUp 0.3s ease; }
.whale-row.buy { background:rgba(82,183,136,0.07); border:1px solid rgba(82,183,136,0.2); }
.whale-row.sell { background:rgba(230,57,70,0.07); border:1px solid rgba(230,57,70,0.2); }
.whale-badge { font-size:8px; font-weight:900; padding:2px 5px; border-radius:4px; white-space:nowrap; }
.whale-shark { background:rgba(69,123,157,0.2); color:#457b9d; border:1px solid rgba(69,123,157,0.3); }
.whale-whale { background:rgba(82,183,136,0.2); color:#52b788; border:1px solid rgba(82,183,136,0.3); }
.whale-humpback { background:rgba(109,76,142,0.2); color:#6d4c8e; border:1px solid rgba(109,76,142,0.3); }
.whale-mega { background:rgba(231,111,81,0.2); color:#e76f51; border:1px solid rgba(231,111,81,0.3); animation:live-pulse 1.5s infinite; }
.liq-bar { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; font-size:9px; margin-bottom:3px; }
.liq-long { background:rgba(82,183,136,0.06); border:1px solid rgba(82,183,136,0.15); }
.liq-short { background:rgba(230,57,70,0.06); border:1px solid rgba(230,57,70,0.15); }
.cvd-bar { display:inline-block; height:32px; min-width:3px; border-radius:2px 2px 0 0; transition:all 0.3s; }
.countdown-badge { font-size:10px; font-weight:700; font-family:monospace; padding:3px 8px; border-radius:6px; background:rgba(231,111,81,0.1); color:#e76f51; border:1px solid rgba(231,111,81,0.25); }
.ob-spread-row { text-align:center; font-size:9px; color:#6b7280; padding:3px 0; border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); }
/* ── Coin Logo ── */
.coin-logo { width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.coin-logo-sm { width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0; }
/* ══════════════════════════════════════════════════
SMC — Smart Money Concepts Enhanced Panel
══════════════════════════════════════════════════ */
.smc-panel-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 640px) { .smc-panel-wrap { grid-template-columns: 1fr; } }
.smc-zone-card {
border-radius: 10px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
transition: border-color 0.2s;
cursor: default;
}
.smc-zone-card:hover { border-color: rgba(255,255,255,0.12); }
.smc-zone-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 4px; }
.smc-zone-price { font-size: 1.05rem; font-weight: 900; font-family: 'Cairo', monospace; line-height: 1.1; }
.smc-zone-sub { font-size: 9px; color: #9ca3af; margin-top: 2px; }
/* BOS tag colors */
.smc-bos-bull { background: rgba(69,123,157,0.12); border-color: rgba(69,123,157,0.35); }
.smc-bos-bear { background: rgba(230,57,70,0.12); border-color: rgba(230,57,70,0.35); }
.smc-choch-bull{ background: rgba(109,76,142,0.12); border-color: rgba(109,76,142,0.35); }
.smc-choch-bear{ background: rgba(233,30,140,0.12); border-color: rgba(233,30,140,0.35); }
.smc-ob-bull { background: rgba(231,111,81,0.12); border-color: rgba(231,111,81,0.35); }
.smc-ob-bear { background: rgba(109,76,142,0.12); border-color: rgba(109,76,142,0.35); }
.smc-fvg-bull { background: rgba(82,183,136,0.10); border-color: rgba(82,183,136,0.30); }
.smc-fvg-bear { background: rgba(233,30,140,0.10); border-color: rgba(233,30,140,0.30); }
.smc-liq-bull { background: rgba(69,123,157,0.10); border-color: rgba(69,123,157,0.30); }
.smc-liq-bear { background: rgba(230,57,70,0.10); border-color: rgba(230,57,70,0.30); }
.smc-premium { background: rgba(230,57,70,0.07); border-color: rgba(230,57,70,0.25); }
.smc-discount { background: rgba(82,183,136,0.07); border-color: rgba(82,183,136,0.25); }
.smc-eq-high { background: rgba(231,111,81,0.08); border-color: rgba(231,111,81,0.28); }
.smc-eq-low { background: rgba(69,123,157,0.08); border-color: rgba(69,123,157,0.28); }
/* Market Structure badges */
.ms-hh { color:#52b788; background:rgba(82,183,136,0.12); border:1px solid rgba(82,183,136,0.3); }
.ms-hl { color:#52b788; background:rgba(82,183,136,0.08); border:1px solid rgba(82,183,136,0.2); }
.ms-lh { color:#e63946; background:rgba(230,57,70,0.08); border:1px solid rgba(230,57,70,0.2); }
.ms-ll { color:#e63946; background:rgba(230,57,70,0.12); border:1px solid rgba(230,57,70,0.3); }
/* SMC Score Gauge */
.smc-gauge-ring {
width: 64px; height: 64px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-direction: column;
border: 3px solid rgba(255,255,255,0.06);
position: relative;
}
.smc-gauge-ring.bull { border-color: rgba(82,183,136,0.5); box-shadow: 0 0 16px rgba(82,183,136,0.2); }
.smc-gauge-ring.bear { border-color: rgba(230,57,70,0.5); box-shadow: 0 0 16px rgba(230,57,70,0.2); }
.smc-gauge-ring.neutral { border-color: rgba(231,111,81,0.5); box-shadow: 0 0 12px rgba(231,111,81,0.15); }
/* SMC Line style */
.smc-line-legend {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 6px;
border: 1px solid rgba(109,76,142,0.4);
background: rgba(109,76,142,0.07);
font-size: 10px;
font-weight: 700;
color: #7b5ea7;
}
.smc-line-legend .smc-line-dot {
width: 20px;
height: 2px;
background: #6d4c8e;
border-radius: 2px;
}
/* SMC Signal Boost indicator */
.smc-boost-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 700;
padding: 2px 7px; border-radius: 5px;
background: rgba(109,76,142,0.15);
color: #7b5ea7;
border: 1px solid rgba(109,76,142,0.3);
animation: smcPulse 2s ease-in-out infinite;
}
@keyframes smcPulse { 0%,100%{box-shadow:0 0 0 0 rgba(109,76,142,0.5)} 50%{box-shadow:0 0 8px 2px rgba(109,76,142,0.15)} }
/* Confluence meter bar */
.smc-conf-bar-wrap { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.05); }
.smc-conf-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.smc-conf-bull { background: linear-gradient(90deg, #52b788, #52b788); }
.smc-conf-bear { background: linear-gradient(90deg, #e63946, #e63946); }
.smc-conf-neutral { background: linear-gradient(90deg, #e76f51, #e9c46a); }
/* SMC structure row in panel */
.smc-row {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 10px;
}
.smc-row:last-child { border-bottom: none; }
/* Equal High/Low marker */
.eq-badge {
font-size: 8px; font-weight: 900; padding: 1px 5px; border-radius: 4px;
letter-spacing: 0.03em;
}
/* Structure item timeline */
.smc-timeline { position: relative; padding-right: 18px; }
.smc-timeline::before {
content: '';
position: absolute; right: 7px; top: 0; bottom: 0;
width: 1px; background: rgba(255,255,255,0.06);
}
.smc-timeline-dot {
position: absolute; right: 3px; top: 6px;
width: 9px; height: 9px; border-radius: 50%;
border: 2px solid currentColor;
background: var(--bg-primary);
}
/* ── Smart Scanner Settings Panel ── */
.scan-slider { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px; background:rgba(255,255,255,0.1); outline:none; cursor:pointer; }
.scan-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#52b788; cursor:pointer; border:2px solid rgba(82,183,136,0.5); box-shadow:0 0 6px rgba(82,183,136,0.4); }
.scan-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#52b788; cursor:pointer; border:2px solid rgba(82,183,136,0.5); }
.scan-toggle { position:relative; width:34px; height:18px; flex-shrink:0; display:inline-block; }
.scan-toggle input { opacity:0; width:0; height:0; position:absolute; }
.scan-toggle-track { position:absolute; inset:0; background:rgba(255,255,255,0.08); border-radius:9px; transition:background 0.2s; border:1px solid rgba(255,255,255,0.1); cursor:pointer; }
.scan-toggle input:checked + .scan-toggle-track { background:rgba(82,183,136,0.35); border-color:rgba(82,183,136,0.5); }
.scan-toggle-thumb { position:absolute; top:2px; right:2px; width:12px; height:12px; background:#6b7280; border-radius:50%; transition:all 0.22s; pointer-events:none; }
.scan-toggle input:checked ~ .scan-toggle-thumb { right:auto; left:2px; background:#52b788; box-shadow:0 0 6px rgba(82,183,136,0.5); }
.scan-tooltip-wrap { position:relative; display:inline-flex; align-items:center; }
.scan-tooltip-wrap:hover .scan-tooltip { opacity:1; visibility:visible; }
.scan-tooltip { position:absolute; bottom:calc(100% + 8px); right:50%; transform:translateX(50%); background:#080f1c; border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:7px 10px; font-size:9px; color:#d1d5db; opacity:0; visibility:hidden; transition:opacity 0.2s; z-index:10000; pointer-events:none; width:180px; white-space:normal; text-align:right; line-height:1.5; }
.scan-tooltip::after { content:''; position:absolute; top:100%; right:50%; transform:translateX(50%); border:5px solid transparent; border-top-color:#080f1c; }
.scan-section-title {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #475569;
margin: 12px 0 6px 0;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: 6px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
font-family: 'Cairo', sans-serif;
}
.scan-val-badge { font-size:10px; font-weight:700; font-family:monospace; color:#52b788; min-width:36px; text-align:center; flex-shrink:0; }
.scan-num-input { background:rgba(6,13,24,0.9); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#e2e8f0; font-size:12px; font-family:'Cairo',monospace; font-weight:700; padding:5px 8px; outline:none; text-align:center; transition:border-color 0.2s,box-shadow 0.2s; -moz-appearance:textfield; }
.scan-num-input::-webkit-outer-spin-button,.scan-num-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.scan-num-input:focus { border-color:rgba(82,183,136,0.7); box-shadow:0 0 0 2px rgba(82,183,136,0.18); color:#52b788; }
/* Force dark in light mode too */
.early-score-bar { height:8px; border-radius:4px; transition:width 0.5s ease, background 0.5s ease; }
.scan-mgmt-btn { flex:1; padding:6px 3px; border-radius:8px; font-size:9px; font-weight:700; cursor:pointer; border:1px solid; transition:all 0.2s; text-align:center; }
.scan-mgmt-btn:hover { filter:brightness(1.25); transform:translateY(-1px); }
/* ══════════════════════════════════════════════════════════════════
DEEP SPACE — Professional Data Grid System
نظام شبكة البيانات الاحترافي — ستايل الفضاء العميق
══════════════════════════════════════════════════════════════════ */
/* Container glassmorphism */
.dsg-container {
background: #0d1828;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
}
/* Summary bar */
.dsg-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(82,183,136,0.04);
}
.dsg-summary-item { font-size: 10px; font-weight: 300; color: #6b7280; font-family:'Cairo',sans-serif; }
.dsg-summary-item span { font-weight: 700; color: #f1f5f9; }
.dsg-summary-item span.em { color: #52b788; }
.dsg-summary-item span.purple { color: #6d4c8e; }
.dsg-summary-time { font-size: 9px; font-weight: 300; color: #374151; font-family:'Cairo',monospace; }
/* Thead */
.dsg-table { width: 100%; border-collapse: collapse; }
.dsg-table thead tr {
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dsg-table th {
padding: 8px 10px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #374151;
text-align: right;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
background: rgba(255,255,255,0.02);
}
.dsg-table th:first-child { text-align: center; padding-right: 14px; border-radius: 0; }
/* Tbody rows */
.dsg-row {
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.18s, box-shadow 0.18s;
cursor: pointer;
}
.dsg-row:last-child { border-bottom: none; }
.dsg-row:hover {
background: rgba(255,255,255,0.035) !important;
}
.dsg-row td {
padding: 9px 10px;
font-size: 11px;
text-align: right;
vertical-align: middle;
font-family: 'Cairo', sans-serif;
}
.dsg-row td:first-child { text-align: center; padding-right: 14px; }
/* ── Pulse Glow: النبض الأخضر للعملات عالية التقييم ── */
@keyframes dsg-pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(82,183,136,0); }
50% { box-shadow: 0 0 18px 2px rgba(82,183,136,0.22); }
}
.pulse-glow {
box-shadow: 0 0 10px rgba(82,183,136,0.5);
animation: dsg-pulse-glow 2.4s ease-in-out infinite;
background: rgba(82,183,136,0.055) !important;
}
.pulse-glow:hover {
box-shadow: 0 0 22px 4px rgba(82,183,136,0.35) !important;
}
/* Cell typography */
.dsg-num { font-weight: 700; font-family: 'Cairo', monospace; }
.dsg-label { font-weight: 300; font-family: 'Cairo', sans-serif; }
.dsg-sym { font-weight: 700; font-size: 13px; color: #f1f5f9; font-family: 'Cairo', sans-serif; }
.dsg-price { font-weight: 300; font-size: 9px; color: #4b5563; font-family: 'Cairo', monospace; margin-top:1px; }
.dsg-rank { font-size: 14px; line-height: 1; }
/* Signal badge */
.dsg-signal-b {
display: inline-block; padding: 3px 8px; border-radius: 7px;
font-size: 10px; font-weight: 700; font-family: 'Cairo', sans-serif;
background: rgba(82,183,136,0.08); color: #52b788;
border: 1px solid rgba(82,183,136,0.25);
}
.dsg-signal-bplus {
display: inline-block; padding: 3px 8px; border-radius: 7px;
font-size: 10px; font-weight: 700; font-family: 'Cairo', sans-serif;
background: rgba(82,183,136,0.16); color: #52b788;
border: 2px solid rgba(82,183,136,0.5);
box-shadow: 0 0 8px rgba(82,183,136,0.18);
}
/* Score bars */
.dsg-bars { display: flex; gap: 2px; align-items: center; }
.dsg-bar-seg {
width: 5px; height: 14px; border-radius: 2px;
transition: background 0.2s;
}
.dsg-bar-on { background: #52b788; }
.dsg-bar-onb { background: #52b788; }
.dsg-bar-off { background: rgba(255,255,255,0.07); }
/* Composite score bar */
.dsg-comp-wrap { width: 72px; }
.dsg-comp-val { font-size: 10px; font-weight: 700; font-family: 'Cairo', monospace; margin-bottom: 3px; }
.dsg-comp-track {
height: 4px; border-radius: 2px;
background: rgba(255,255,255,0.07);
overflow: hidden;
}
.dsg-comp-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
/* SL/TP cell */
.dsg-risk { font-size: 9px; font-weight: 300; font-family: 'Cairo', monospace; line-height: 1.6; }
.dsg-risk .sl { color: #e63946; font-weight: 700; }
.dsg-risk .tp { color: #52b788; font-weight: 700; }
/* SMC tags */
.dsg-smc-tag {
display: inline-block; font-size: 8px; font-weight: 700;
padding: 2px 5px; border-radius: 4px;
background: rgba(109,76,142,0.12); color: #6d4c8e;
border: 1px solid rgba(109,76,142,0.25);
margin-bottom: 2px;
font-family: 'Cairo', sans-serif;
}
.dsg-momentum-tag {
display: inline-block; font-size: 8px; font-weight: 700;
padding: 2px 5px; border-radius: 4px;
background: rgba(230,57,70,0.12); color: #e63946;
border: 1px solid rgba(230,57,70,0.25);
font-family: 'Cairo', sans-serif;
}
/* Action btn */
.dsg-action-btn {
padding: 4px 10px; border-radius: 7px;
font-size: 9px; font-weight: 700;
font-family: 'Cairo', sans-serif;
background: rgba(82,183,136,0.08);
color: #52b788;
border: 1px solid rgba(82,183,136,0.22);
cursor: pointer;
transition: all 0.18s;
white-space: nowrap;
}
.dsg-action-btn:hover {
background: rgba(82,183,136,0.18);
box-shadow: 0 0 8px rgba(82,183,136,0.2);
}
/* Grade badge */
.dsg-grade {
display: inline-block; font-size: 8px; font-weight: 700;
padding: 1px 5px; border-radius: 4px;
font-family: 'Cairo', sans-serif;
margin-top: 2px;
}
/* No-result state */
.dsg-empty {
padding: 40px 20px; text-align: center;
background: #0d1828;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
}
/* Mobile cards — Deep Space edition */
.dsg-card {
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
background: #0d1828;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 14px;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dsg-card:hover { border-color: rgba(82,183,136,0.3); }
.dsg-card.pulse-glow { box-shadow: 0 0 10px rgba(82,183,136,0.5); }
/* Scrollable table wrapper */
.dsg-scroll { overflow-x: auto; }
.dsg-scroll::-webkit-scrollbar { height: 4px; }
.dsg-scroll::-webkit-scrollbar-track { background: transparent; }
.dsg-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
/* ══ Deep Space Stepper Inputs ══════════════════════════════════════ */
.ds-stepper {
display: flex;
align-items: center;
background: #0d1828;
border: 1px solid #091525;
border-radius: 10px;
overflow: hidden;
width: 140px;
min-width: 140px;
max-width: 140px;
flex: 0 0 auto;
}
.ds-stepper-btn {
width: 40px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: #0d1828;
border: none; outline: none; cursor: pointer;
color: #94a3b8; font-size: 18px; font-weight: 300;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.ds-stepper-btn:active { background: #091525; color: #e2e8f0; }
.ds-stepper-input {
flex: 1; border: none; outline: none;
min-width: 0;
width: 0;
background: transparent !important;
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
font-size: 15px; font-weight: 700;
font-family: 'Cairo', monospace;
text-align: center;
padding: 10px 0;
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
}
.ds-stepper-input::-webkit-outer-spin-button,
.ds-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.ds-icon {
width: 34px; height: 34px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex-shrink: 0;
}
.ds-row {
display: flex; align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 4px;
background: #080f1c;
border: 1px solid #091525;
}
.ds-label {
font-size: 11px; font-weight: 300;
color: #94a3b8;
font-family: 'Cairo', sans-serif;
flex: 1;
min-width: 0;
}
.ds-section {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 8px;
margin: 14px 0 6px;
background: #0d1828;
border: 1px solid #091525;
}
.ds-section-title {
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
font-family: 'Cairo', sans-serif;
color: #e2e8f0;
flex: 1;
}
.ds-save-btn {
width: 100%; padding: 13px;
border-radius: 12px;
border: none; outline: none; cursor: pointer;
font-size: 13px; font-weight: 700;
font-family: 'Cairo', sans-serif;
background: linear-gradient(135deg, #457b9d, #7c3aed);
color: #fff;
margin-top: 12px;
display: flex; align-items: center;
justify-content: center; gap: 8px;
transition: opacity 0.2s;
-webkit-tap-highlight-color: transparent;
}
.ds-save-btn:active { opacity: 0.85; }
.ds-toggle-row {
display: flex; align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 4px;
background: #080f1c;
border: 1px solid #091525;
}
/* ══ Entrance Animation for scan rows ══ */
@keyframes dsg-slide-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.dsg-row-anim {
animation: dsg-slide-in 0.32s ease both;
}
/* ══ Live Preview Card ══ */
.lp-card {
border-radius: 12px;
border: 1px solid rgba(82,183,136,0.2);
background: linear-gradient(135deg, rgba(82,183,136,0.06), rgba(69,123,157,0.04));
padding: 12px 14px;
margin-bottom: 12px;
transition: all 0.25s;
}
.lp-card-title {
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
color: #52b788; font-family: 'Cairo', sans-serif;
margin-bottom: 10px;
display: flex; align-items: center; gap: 6px;
}
.lp-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
}
.lp-cell {
background: rgba(255,255,255,0.03);
border-radius: 8px; padding: 7px 6px;
text-align: center; border: 1px solid rgba(255,255,255,0.05);
transition: border-color 0.2s, background 0.2s;
}
.lp-cell-label {
font-size: 8px; font-weight: 300;
color: #475569; font-family: 'Cairo', sans-serif;
margin-bottom: 3px;
}
.lp-cell-val {
font-size: 13px; font-weight: 700;
font-family: 'Cairo', monospace;
transition: color 0.2s;
}
/* Color coding states */
.lp-ok { color: #52b788 !important; border-color: rgba(82,183,136,0.2) !important; }
.lp-warn { color: #e76f51 !important; border-color: rgba(231,111,81,0.2) !important; }
.lp-bad { color: #e63946 !important; border-color: rgba(230,57,70,0.2) !important; }
.lp-ok-bg { background: rgba(82,183,136,0.05) !important; }
.lp-warn-bg { background: rgba(231,111,81,0.05) !important; }
.lp-bad-bg { background: rgba(230,57,70,0.05) !important; }
/* Color coding on stepper inputs */
.ds-stepper-input.val-ok { -webkit-text-fill-color: #52b788 !important; color: #52b788 !important; }
.ds-stepper-input.val-warn { -webkit-text-fill-color: #e76f51 !important; color: #e76f51 !important; }
.ds-stepper-input.val-bad { -webkit-text-fill-color: #e63946 !important; color: #e63946 !important; }
/* Export CSV button */
.dsg-export-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 8px;
font-size: 10px; font-weight: 700;
font-family: 'Cairo', sans-serif;
background: rgba(69,123,157,0.1);
color: #457b9d;
border: 1px solid rgba(69,123,157,0.25);
cursor: pointer; transition: all 0.18s;
}
.dsg-export-btn:hover { background: rgba(69,123,157,0.2); box-shadow: 0 0 8px rgba(69,123,157,0.2); }
/* ══ Scanner Tabs (Scanner / Watchlist / Alerts) ══ */
.scn-tab-bar {
display: flex; gap: 4px;
padding: 4px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
margin-bottom: 16px;
}
.scn-tab {
flex: 1; padding: 8px 6px;
border-radius: 9px; border: none; outline: none;
font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif;
cursor: pointer; transition: all 0.2s;
display: flex; align-items: center;
justify-content: center; gap: 5px;
background: transparent; color: #475569;
-webkit-tap-highlight-color: transparent;
}
.scn-tab.active {
background: #0d1828;
color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.scn-tab.active.tab-scan { color: #52b788; }
.scn-tab.active.tab-watch { color: #e76f51; }
.scn-tab.active.tab-alerts { color: #6d4c8e; }
.scn-tab-badge {
font-size: 8px; font-weight: 700;
padding: 1px 5px; border-radius: 10px;
background: rgba(255,255,255,0.08); color: #6b7280;
min-width: 16px; text-align: center;
}
.scn-tab.active .scn-tab-badge { background: rgba(255,255,255,0.12); color: inherit; }
/* ══ Watchlist Panel ══ */
.wl-empty {
text-align: center; padding: 40px 20px;
color: #374151;
}
.wl-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
background: #080f1c; border: 1px solid #091525;
margin-bottom: 4px; cursor: pointer;
transition: border-color 0.18s, background 0.18s;
}
.wl-row:hover { border-color: rgba(231,111,81,0.3); background: rgba(231,111,81,0.03); }
.wl-row.pulse-glow { box-shadow: 0 0 10px rgba(82,183,136,0.4); }
.wl-sym { font-size: 13px; font-weight: 700; color: #f1f5f9; font-family: 'Cairo', sans-serif; flex: 1; }
.wl-price { font-size: 11px; font-weight: 700; font-family: 'Cairo', monospace; color: #94a3b8; }
.wl-chg { font-size: 10px; font-weight: 700; font-family: 'Cairo', monospace; min-width: 50px; text-align: left; }
.wl-rsi { font-size: 9px; font-weight: 700; font-family: 'Cairo', monospace; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.05); color: #6b7280; }
.wl-del-btn {
width: 26px; height: 26px; border-radius: 6px;
border: 1px solid rgba(230,57,70,0.2);
background: rgba(230,57,70,0.06);
color: #e63946; font-size: 11px;
cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: all 0.15s; flex-shrink: 0;
}
.wl-del-btn:hover { background: rgba(230,57,70,0.15); }
.wl-star-btn {
font-size: 16px; cursor: pointer;
transition: transform 0.15s;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.wl-star-btn:active { transform: scale(1.3); }
.wl-add-bar {
display: flex; gap: 6px; margin-bottom: 10px;
}
.wl-add-input {
flex: 1; padding: 8px 12px; border-radius: 9px;
border: 1px solid #091525;
background: rgba(0,14,35,0.95) !important;
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
font-size: 12px; font-weight: 700;
font-family: 'Cairo', monospace;
outline: none; text-transform: uppercase;
}
.wl-add-btn {
padding: 8px 14px; border-radius: 9px;
border: 1px solid rgba(231,111,81,0.3);
background: rgba(231,111,81,0.1);
color: #e9c46a; font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif; cursor: pointer;
transition: all 0.18s; white-space: nowrap;
}
.wl-add-btn:hover { background: rgba(231,111,81,0.2); }
.wl-refresh-btn {
width: 100%; padding: 8px; border-radius: 9px;
border: 1px solid rgba(82,183,136,0.2);
background: rgba(82,183,136,0.06);
color: #52b788; font-size: 10px; font-weight: 700;
font-family: 'Cairo', sans-serif; cursor: pointer;
transition: all 0.18s; margin-top: 8px;
}
.wl-refresh-btn:hover { background: rgba(82,183,136,0.12); }
/* ══ Alerts Panel ══ */
.al-empty {
text-align: center; padding: 40px 20px; color: #374151;
}
.al-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; border-radius: 10px;
background: #080f1c; border: 1px solid #091525;
margin-bottom: 4px;
}
.al-row.al-active { border-color: rgba(82,183,136,0.3); background: rgba(82,183,136,0.04); }
.al-row.al-fired { border-color: rgba(231,111,81,0.4); background: rgba(231,111,81,0.06); }
.al-sym { font-size: 12px; font-weight: 700; color: #f1f5f9; font-family: 'Cairo', sans-serif; min-width: 70px; }
.al-cond { font-size: 9px; font-weight: 300; color: #64748b; font-family: 'Cairo', sans-serif; flex: 1; line-height: 1.5; }
.al-status {
font-size: 8px; font-weight: 700; padding: 2px 7px;
border-radius: 5px; white-space: nowrap;
font-family: 'Cairo', sans-serif;
}
.al-status.watching { background: rgba(69,123,157,0.1); color: #457b9d; border: 1px solid rgba(69,123,157,0.2); }
.al-status.fired { background: rgba(231,111,81,0.1); color: #e9c46a; border: 1px solid rgba(231,111,81,0.3); animation: dsg-pulse-glow 1s infinite; }
.al-status.disabled { background: rgba(255,255,255,0.04); color: #374151; border: 1px solid rgba(255,255,255,0.06); }
.al-del-btn {
width: 26px; height: 26px; border-radius: 6px;
border: 1px solid rgba(230,57,70,0.2);
background: rgba(230,57,70,0.06); color: #e63946;
font-size: 11px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s; flex-shrink: 0;
}
.al-del-btn:hover { background: rgba(230,57,70,0.15); }
.al-form {
background: #080f1c; border: 1px solid #091525;
border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.al-form-title {
font-size: 10px; font-weight: 700; color: #6d4c8e;
font-family: 'Cairo', sans-serif; margin-bottom: 10px;
display: flex; align-items: center; gap: 5px;
}
.al-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.al-input {
padding: 7px 10px; border-radius: 8px;
border: 1px solid #091525;
background: #0a1220 !important; color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0 !important;
font-size: 12px; font-weight: 700;
font-family: 'Cairo', monospace; outline: none;
width: 100%; box-sizing: border-box; text-transform: uppercase;
}
.al-select {
padding: 7px 10px; border-radius: 8px;
border: 1px solid #091525;
background: #0a1220 !important; color: #e2e8f0 !important;
font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif; outline: none;
width: 100%; box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.al-add-btn {
width: 100%; padding: 9px; border-radius: 9px;
border: 1px solid rgba(109,76,142,0.3);
background: rgba(109,76,142,0.1);
color: #7b5ea7; font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif; cursor: pointer;
transition: all 0.18s;
}
.al-add-btn:hover { background: rgba(109,76,142,0.2); }
/* ══ Toast Notification ══ */
.wl-toast {
position: fixed; bottom: 80px; left: 50%;
transform: translateX(-50%);
padding: 10px 18px; border-radius: 10px;
font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif;
z-index: 99999; pointer-events: none;
animation: dsg-slide-in 0.3s ease;
white-space: nowrap;
}
.wl-toast.success { background: rgba(82,183,136,0.9); color: #fff; }
.wl-toast.warn { background: rgba(231,111,81,0.9); color: #fff; }
.wl-toast.alert { background: rgba(109,76,142,0.92); color: #fff; box-shadow: 0 0 20px rgba(109,76,142,0.5); }
/* ══ MTF — Multi-Timeframe Confirmation ══ */
.mtf-bar {
display: flex; align-items: center; gap: 3px;
flex-wrap: nowrap;
}
.mtf-tf {
display: flex; flex-direction: column;
align-items: center; gap: 1px;
padding: 3px 5px; border-radius: 5px;
border: 1px solid transparent;
min-width: 28px;
transition: all 0.2s;
}
.mtf-tf-label { font-size: 7px; font-weight: 700; font-family: 'Cairo', monospace; opacity: 0.6; }
.mtf-tf-icon { font-size: 10px; line-height: 1; }
/* States */
.mtf-bull { background: rgba(82,183,136,0.12); border-color: rgba(82,183,136,0.3); }
.mtf-bear { background: rgba(230,57,70,0.1); border-color: rgba(230,57,70,0.25); }
.mtf-neut { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);}
.mtf-na { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04);}
/* MTF Score Badge */
.mtf-score {
font-size: 9px; font-weight: 700;
padding: 2px 7px; border-radius: 6px;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
}
.mtf-full { background: rgba(82,183,136,0.15); color: #52b788; border: 1px solid rgba(82,183,136,0.35); box-shadow: 0 0 6px rgba(82,183,136,0.15); }
.mtf-partial { background: rgba(231,111,81,0.12); color: #e76f51; border: 1px solid rgba(231,111,81,0.3); }
.mtf-conflict{ background: rgba(230,57,70,0.1); color: #e63946; border: 1px solid rgba(230,57,70,0.25); }
/* MTF progress bar in scanner */
.mtf-prog-badge {
font-size: 8px; font-weight: 700; padding: 1px 6px;
border-radius: 4px; font-family: 'Cairo', sans-serif;
background: rgba(69,123,157,0.1); color: #457b9d;
border: 1px solid rgba(69,123,157,0.2);
animation: dsg-pulse-glow 1.5s infinite;
}
/* MTF filter toggle in scanner header */
.mtf-toggle-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 10px;
background: rgba(69,123,157,0.05);
border: 1px solid rgba(69,123,157,0.15);
margin-bottom: 10px;
}
.mtf-toggle-label {
font-size: 10px; font-weight: 700;
color: #457b9d; font-family: 'Cairo', sans-serif; flex: 1;
}
/* ══ Early Entry Scanner ══════════════════════════════ */
.tab-early { display: inline-block; }
.tab-early.active { color: #e76f51 !important; }
.ees-container {
background: #0d1828;
border-radius: 12px;
border: 1px solid rgba(231,111,81,0.15);
backdrop-filter: blur(10px);
overflow: hidden;
}
.ees-header {
padding: 10px 14px;
border-bottom: 1px solid rgba(231,111,81,0.1);
background: rgba(231,111,81,0.04);
display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.ees-title {
font-size: 11px; font-weight: 700;
color: #e76f51; font-family: 'Cairo', sans-serif;
display: flex; align-items: center; gap: 6px;
}
/* Signal cards */
.ees-row {
border-bottom: 1px solid rgba(255,255,255,0.04);
padding: 10px 12px;
transition: background 0.18s;
cursor: pointer;
animation: dsg-slide-in 0.32s ease both;
}
.ees-row:last-child { border-bottom: none; }
.ees-row:hover { background: rgba(231,111,81,0.03); }
/* Signal badges */
.ees-sig {
display: inline-flex; align-items: center; gap: 3px;
font-size: 8px; font-weight: 700;
padding: 2px 6px; border-radius: 4px;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
}
.ees-sig-acc { background:rgba(69,123,157,0.12); color:#457b9d; border:1px solid rgba(69,123,157,0.25); }
.ees-sig-div { background:rgba(109,76,142,0.12); color:#7b5ea7; border:1px solid rgba(109,76,142,0.25); }
.ees-sig-vol { background:rgba(82,183,136,0.12); color:#52b788; border:1px solid rgba(82,183,136,0.25); }
.ees-sig-wick { background:rgba(231,111,81,0.12); color:#e9c46a; border:1px solid rgba(231,111,81,0.25); }
/* Score ring */
.ees-score-ring {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
font-family: 'Cairo', monospace; flex-shrink: 0;
border: 2px solid;
}
.ees-score-4 { border-color:#52b788; color:#52b788; background:rgba(82,183,136,0.1); box-shadow:0 0 10px rgba(82,183,136,0.3); }
.ees-score-3 { border-color:#e76f51; color:#e76f51; background:rgba(231,111,81,0.08); }
.ees-score-2 { border-color:#457b9d; color:#457b9d; background:rgba(69,123,157,0.08); }
.ees-score-1 { border-color:#475569; color:#475569; background:rgba(255,255,255,0.03); }
/* Grade */
.ees-grade-S { color:#52b788; font-size:9px; font-weight:700; }
.ees-grade-A { color:#e76f51; font-size:9px; font-weight:700; }
.ees-grade-B { color:#457b9d; font-size:9px; font-weight:700; }
/* Strength bars */
.ees-bars { display:flex; gap:2px; align-items:flex-end; }
.ees-bar { width:4px; border-radius:2px 2px 0 0; }
/* Empty */
.ees-empty { text-align:center; padding:40px 20px; }
/* Run button */
.ees-run-btn {
display: flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: 10px;
font-size: 11px; font-weight: 700;
font-family: 'Cairo', sans-serif;
background: linear-gradient(135deg, #e76f51, #d97706);
color: #000; border: none; cursor: pointer;
box-shadow: 0 4px 14px rgba(231,111,81,0.25);
transition: all 0.2s; white-space: nowrap;
}
.ees-run-btn:active { opacity: 0.85; }
.ees-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Divergence indicator */
.ees-div-arrow { font-size:9px; }
/* Mobile card */
.ees-card {
border-radius: 12px;
border: 1px solid rgba(231,111,81,0.15);
background: #080f1c; padding: 12px 14px;
cursor: pointer; margin-bottom: 6px;
animation: dsg-slide-in 0.3s ease both;
}
.ees-card:hover { border-color: rgba(231,111,81,0.3); }
/* ══════════════════════════════════════════════════════
TERMINAL TRADING INTERFACE — Professional Layout
Bloomberg / TradingView inspired Dark Theme
══════════════════════════════════════════════════════ */
/* ── Status Bar ── */
.term-statusbar {
display: flex; align-items: center;
justify-content: space-between;
padding: 4px 16px;
background: #060d18;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 10px; font-family: 'Cairo', monospace;
position: sticky; top: 0; z-index: 1000;
}
.term-statusbar-left, .term-statusbar-right {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.term-logo {
font-size: 10px; font-weight: 900;
color: var(--c-text1); letter-spacing: 0.08em;
display: flex; align-items: center; gap: 5px;
}
.term-divider { color: var(--c-text3); user-select: none; }
.term-stat { display: flex; align-items: center; gap: 4px; }
.term-stat-label { color: var(--c-text3); font-weight: 300; }
.term-stat-val { color: var(--c-text2); font-weight: 700; font-family: 'Cairo', monospace; }
.term-market-time {
font-family: 'Cairo', monospace; font-size: 10px;
font-weight: 700; color: var(--c-text3);
letter-spacing: 0.05em;
}
/* ── Navbar ── */
.term-navbar {
background: #060d18;
border-bottom: 2px solid rgba(255,255,255,0.08);
padding: 0 16px;
position: sticky; top: 33px; z-index: 999;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.term-navbar-inner {
max-width: 1800px; margin: 0 auto;
display: flex; align-items: center;
justify-content: space-between; gap: 12px;
padding: 10px 0;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.term-navbar { top: 29px; }
.term-navbar-inner { padding: 8px 0; gap: 8px; }
.term-market-stats { display: none !important; }
/* عند ضيق الشاشة، عناصر التحكم (الصوت/الإعدادات/Eruda) قد تلتف
لسطر جديد بسبب flex-wrap. بدون هذا الإصلاح تبقى ملتصقة بالحافة
اليسرى (بداية الـ flex) وتتداخل مع الشريط تحتها بصرياً، بينما
الصحيح في تخطيط RTL هو محاذاتها لليمين مع باقي عناصر الواجهة. */
.term-controls { width: 100%; justify-content: flex-end; flex-wrap: nowrap; }
}
/* تصغير عناصر شريط التحكم (الفلاتر، الصوت، حالة الاتصال، شارة المنصة،
وأدوات المطوّر) على الشاشات الصغيرة كي تظهر كلها بجانب بعضها في
صف واحد دون التفاف أو تكدّس. */
@media (max-width: 480px) {
.term-controls { gap: 4px; }
.term-icon-btn {
width: 26px; height: 26px;
font-size: 11px; border-radius: 7px;
}
.term-conn-badge {
padding: 3px 6px !important;
font-size: 7.5px !important;
gap: 3px !important;
max-width: 108px;
}
#wsStatusText {
max-width: 78px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
display: inline-block;
}
#wsExchangeBadge {
font-size: 8px !important;
padding: 2px 5px !important;
margin-left: 2px !important;
}
}
/* Brand */
.term-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.term-brand-icon {
position: relative;
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(82,183,136,0.15), rgba(69,123,157,0.1));
border: 1px solid rgba(82,183,136,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--c-green);
box-shadow: 0 0 14px rgba(82,183,136,0.12);
flex-shrink: 0;
}
@media (max-width: 480px) {
.term-brand-icon { width: 32px; height: 32px; font-size: 14px; border-radius: 8px; }
}
.term-brand-ping {
position: absolute; top: -2px; right: -2px;
width: 8px; height: 8px;
background: var(--c-green); border-radius: 50%;
box-shadow: 0 0 6px var(--c-green);
animation: term-ping 2s ease-in-out infinite;
}
@keyframes term-ping {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.6; transform:scale(1.3); }
}
.term-brand-text { line-height: 1.2; }
.term-brand-name {
font-size: 15px; font-weight: 900;
color: var(--c-text1);
letter-spacing: 0.04em;
font-family: 'Cairo', sans-serif;
}
@media (max-width: 480px) {
.term-brand-name { font-size: 13px; }
}
.term-brand-sub {
font-size: 8px; font-weight: 300;
color: var(--c-text3);
letter-spacing: 0.06em;
}
@media (max-width: 640px) { .term-brand-sub { display: none; } }
.term-badges { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
/* Market Stats (center) */
.term-market-stats {
display: flex; align-items: center; gap: 6px;
flex: 1; justify-content: center; max-width: 500px;
}
.term-mstat {
display: flex; flex-direction: column; align-items: center;
padding: 4px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--c-border);
}
.term-mstat-label { font-size: 8px; font-weight: 300; color: var(--c-text3); font-family: 'Cairo', sans-serif; }
.term-mstat-val { font-size: 12px; font-weight: 700; color: var(--c-text1); font-family: 'Cairo', monospace; }
.term-msep { width: 1px; height: 28px; background: var(--c-border); }
/* Controls */
.term-controls {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
flex-shrink: 0;
}
.term-conn-badge {
padding: 4px 10px !important;
border-radius: 6px !important;
font-size: 9px !important; font-weight: 700 !important;
display: flex; align-items: center; gap: 4px;
}
.term-icon-btn {
width: 32px; height: 32px;
border-radius: 8px;
border: 1px solid var(--c-border2);
background: rgba(255,255,255,0.04);
color: var(--c-text2);
font-size: 12px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.18s;
}
.term-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--c-text1); }
.term-icon-btn-amber { color: var(--c-amber); border-color: rgba(245,166,35,0.2); }
.term-icon-btn-amber:hover { background: rgba(245,166,35,0.1); }
.term-icon-btn-purple { color: var(--c-purple); border-color: rgba(167,139,250,0.2); }
.term-icon-btn-purple:hover { background: rgba(167,139,250,0.1); }
/* Badges */
.term-badge {
font-size: 8px; font-weight: 700;
padding: 2px 7px; border-radius: 5px;
font-family: 'Cairo', sans-serif;
display: inline-flex; align-items: center; gap: 3px;
letter-spacing: 0.04em;
}
.term-badge-green { background: rgba(82,183,136,0.12); color: var(--c-green); border: 1px solid rgba(82,183,136,0.25); }
.term-badge-blue { background: rgba(69,123,157,0.12); color: var(--c-blue); border: 1px solid rgba(69,123,157,0.25); }
.term-badge-amber { background: rgba(245,166,35,0.12); color: var(--c-amber); border: 1px solid rgba(245,166,35,0.25); }
.term-badge-red { background: rgba(255,77,106,0.12); color: var(--c-red); border: 1px solid rgba(255,77,106,0.25); }
.term-badge-purple { background: rgba(167,139,250,0.12); color: var(--c-purple); border: 1px solid rgba(167,139,250,0.25); }
.term-live-badge { animation: none; }
.term-live-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 5px var(--c-green);
animation: term-ping 1.5s infinite;
display: inline-block;
}
/* ── Main Layout ── */
.term-main {
max-width: 1800px;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
@media (max-width: 640px) {
.term-main { padding: 8px; gap: 10px; }
}
/* ── Panel Enhancement — position/overflow مدمجة في التعريف الأساسي أعلى الملف ── */
.glass-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
pointer-events: none;
}
/* ── Accent Line on panels ── */
.panel-accent-green::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 3px; height: 100%;
background: linear-gradient(180deg, var(--c-green), transparent);
border-radius: 0 14px 14px 0;
}
/* ── Responsive Grid Improvements ── */
@media (min-width: 1280px) {
.term-main > .grid { gap: 14px; }
}
@media (max-width: 1024px) {
.lg\:col-span-2 { grid-column: span 1 !important; }
}
@media (max-width: 768px) {
.glass-panel { border-radius: 12px !important; }
.text-xl { font-size: 1rem !important; }
.text-3xl { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
.glass-panel { border-radius: 10px !important; }
.text-xl { font-size: 0.9rem !important; }
}
/* ── WS Status — CSS vars override (يستخدم --c-green/red/amber من :root) ──
FIX: هذا تحديث مقصود يستخدم CSS variables بدلاً من القيم الصلبة أعلى الملف */
.ws-status.connected { background: rgba(82,183,136,0.1); color: var(--c-green); border-color: rgba(82,183,136,0.25); }
.ws-status.disconnected { background: rgba(255,77,106,0.1); color: var(--c-red); border-color: rgba(255,77,106,0.25); }
.ws-status.connecting { background: rgba(245,166,35,0.1); color: var(--c-amber); border-color: rgba(245,166,35,0.25); }
/* ── Section Headers ── */
.term-section-hdr {
display: flex; align-items: center; gap: 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--c-border);
margin-bottom: 14px;
}
.term-section-icon {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; flex-shrink: 0;
}
.term-section-title {
font-size: 12px; font-weight: 700;
color: var(--c-text1); font-family: 'Cairo', sans-serif;
}
.term-section-sub {
font-size: 9px; font-weight: 300;
color: var(--c-text3);
margin-top: 1px; font-family: 'Cairo', sans-serif;
}
/* ── TF buttons ── */
.tf-btn {
padding: 5px 10px;
border-radius: 7px;
font-size: 10px; font-weight: 700;
border: 1px solid var(--c-border2);
background: rgba(255,255,255,0.03);
color: var(--c-text3);
cursor: pointer;
transition: all 0.18s;
font-family: 'Cairo', sans-serif;
}
.tf-btn:hover { color: var(--c-text2); border-color: var(--c-border2); background: rgba(255,255,255,0.06); }
.tf-btn.active {
background: linear-gradient(135deg, var(--c-green2), #007a55);
color: #fff; border-color: transparent;
box-shadow: 0 2px 10px rgba(82,183,136,0.2);
}
/* ── Floating buttons ── */
#settingsToggleBtn {
background: rgba(167,139,250,0.1);
border: 1px solid rgba(167,139,250,0.25);
color: var(--c-purple);
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* ── Mobile Responsive Fixes ── */
@media (max-width: 640px) {
#settingsSidePanel { width: 94vw; right: -96vw; }
#settingsSidePanel.open { right: 0; }
#settingsToggleBtn { bottom: 14px; right: 14px; width: 40px; height: 40px; font-size: 15px; }
}
/* ── Market Clock ── */
@keyframes term-clock-tick {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
#termMarketTime { animation: term-clock-tick 1s ease-in-out infinite; }
/* ── Smooth transitions for panels ── */
.glass-panel, .term-mstat, .wl-row, .al-row, .ds-row, .ees-card {
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
/* ══════════════════════════════════════════════════════════════════
MATRIX AI CHATBOT v2 — Advanced Crypto Expert Chat System
══════════════════════════════════════════════════════════════════ */
#robotBtn {
position: fixed; bottom: 136px; right: 24px; z-index: 999999;
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg,rgba(82,183,136,0.18),rgba(69,123,157,0.12));
border: 1px solid rgba(82,183,136,0.35); cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 24px rgba(82,183,136,0.2); transition: all 0.25s;
animation: botPulse 3s ease-in-out infinite;
color: var(--c-green); font-size: 22px;
}
@keyframes botPulse {
0%,100%{box-shadow:0 4px 24px rgba(82,183,136,0.2),0 0 0 0 rgba(82,183,136,0.4)}
50%{box-shadow:0 4px 32px rgba(82,183,136,0.35),0 0 0 8px rgba(82,183,136,0)}
}
#robotBtn:hover { transform:scale(1.1); background:linear-gradient(135deg,rgba(82,183,136,0.3),rgba(69,123,157,0.2)); }
@media(max-width:640px){ #robotBtn{bottom:80px;right:16px;width:50px;height:50px;font-size:22px;z-index:999999;} }
/* أزرار سكرول فوق / تحت — حافة الشاشة اليمين، تظهر فقط عند الحاجة للسكرول */
#scrollNavGroup {
position: fixed; right: 8px; top: 50%; transform: translateY(-50%);
z-index: 999996; display: flex; flex-direction: column; gap: 8px;
opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
#scrollNavGroup.show { opacity: 1; pointer-events: auto; }
.scroll-nav-btn {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(9,21,37,0.85); border: 1px solid rgba(82,183,136,0.3);
color: var(--c-green); font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px); box-shadow: 0 2px 12px rgba(0,0,0,0.4);
transition: all 0.2s;
}
.scroll-nav-btn:hover { background: rgba(82,183,136,0.2); transform: scale(1.08); }
.scroll-nav-btn:active { transform: scale(0.95); }
@media(max-width:640px){ #scrollNavGroup{right:6px;} .scroll-nav-btn{width:34px;height:34px;font-size:13px;} }
#robotOverlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:999997;display:none;backdrop-filter:blur(3px); }
#robotOverlay.open { display:block; }
#robotPanel {
position:fixed; bottom:80px; right:-440px; width:420px;
height:calc(100vh - 120px); max-height:760px; min-height:500px;
z-index:999998; background:#000e23;
border:1px solid rgba(82,183,136,0.18); border-radius:18px;
box-shadow:0 24px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(82,183,136,0.05);
display:flex; flex-direction:column;
transition:right 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.3s; opacity:0; overflow:hidden;
}
#robotPanel.open { right:24px; opacity:1; }
@media(max-width:640px){ #robotPanel{width:calc(100vw - 20px);right:-105vw;bottom:100px;height:75vh;max-height:none;border-radius:16px;} #robotPanel.open{right:10px;} }
.chat-header { padding:14px 16px 12px; border-bottom:1px solid rgba(82,183,136,0.1); background:linear-gradient(135deg,rgba(82,183,136,0.07),transparent); flex-shrink:0; }
.chat-header-brand { display:flex; align-items:center; gap:10px; }
.chat-bot-icon { width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(82,183,136,0.2),rgba(69,123,157,0.12));border:1px solid rgba(82,183,136,0.3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.chat-title { font-size:13px;font-weight:900;color:var(--c-green);font-family:'Cairo',sans-serif;letter-spacing:.03em; }
.chat-subtitle { font-size:9px;color:#374151;font-family:'Cairo',sans-serif;margin-top:1px; }
.chat-close-btn { width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);color:#6b7280;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s; }
.chat-close-btn:hover { background:rgba(255,255,255,0.09);color:var(--c-text1); }
.chat-model-bar { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.2);flex-shrink:0; }
.chat-model-chip { display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:6px;font-family:'Cairo',sans-serif;white-space:nowrap; }
.chip-gemini { background:rgba(66,133,244,0.15);color:#4285f4;border:1px solid rgba(66,133,244,0.3); }
.chip-local { background:rgba(231,111,81,0.15);color:#e76f51;border:1px solid rgba(231,111,81,0.3); }
.chip-ok { background:rgba(82,183,136,0.12);color:var(--c-green);border:1px solid rgba(82,183,136,0.3); }
.chip-warn { background:rgba(231,111,81,0.12);color:#e76f51;border:1px solid rgba(231,111,81,0.3); }
.chip-err { background:rgba(255,77,106,0.12);color:var(--c-red);border:1px solid rgba(255,77,106,0.3); }
.chat-ctx-bar { display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 14px;border-bottom:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.15);flex-shrink:0; }
.chat-ctx-chip { font-size:9px;font-weight:700;padding:2px 8px;border-radius:6px;font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:3px; }
.chat-ctx-chip.coin { background:rgba(82,183,136,0.1);color:#52b788;border:1px solid rgba(82,183,136,0.25); }
.chat-ctx-chip.price { background:rgba(69,123,157,0.1);color:#457b9d;border:1px solid rgba(69,123,157,0.25); }
.chat-ctx-chip.scan { background:rgba(109,76,142,0.1);color:#6d4c8e;border:1px solid rgba(109,76,142,0.25); }
.chat-ctx-chip.tf { background:rgba(231,111,81,0.1);color:#e76f51;border:1px solid rgba(231,111,81,0.25); }
.chat-ctx-label { font-size:9px;color:#2d3748;font-family:'Cairo',sans-serif;flex-shrink:0; }
.chat-messages { flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth; }
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:rgba(82,183,136,0.15);border-radius:3px; }
.chat-msg { display:flex;gap:8px;animation:msg-in .25s ease forwards; }
@keyframes msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.chat-msg.user { flex-direction:row-reverse; }
.chat-msg-avatar { width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px; }
.chat-msg.bot .chat-msg-avatar { background:linear-gradient(135deg,rgba(82,183,136,0.18),rgba(69,123,157,0.1));border:1px solid rgba(82,183,136,0.25); }
.chat-msg.user .chat-msg-avatar { background:rgba(69,123,157,0.15);border:1px solid rgba(69,123,157,0.3); }
.chat-bubble { max-width:88%;padding:10px 13px;border-radius:12px;font-size:11.5px;line-height:1.75;font-family:'Cairo',sans-serif;border:1px solid transparent; }
.chat-msg.bot .chat-bubble { background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.07);color:var(--c-text1);border-radius:4px 12px 12px 12px; }
.chat-msg.user .chat-bubble { background:linear-gradient(135deg,rgba(82,183,136,0.14),rgba(69,123,157,0.08));border-color:rgba(82,183,136,0.2);color:var(--c-text1);border-radius:12px 4px 12px 12px; }
.chat-bubble strong { color:var(--c-green);font-weight:700; }
.chat-bubble em { color:#e76f51;font-style:normal;font-weight:700; }
.chat-bubble .cb-chip { display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;margin:0 1px; }
.chat-bubble .cb-up { background:rgba(82,183,136,0.15);color:#52b788;border:1px solid rgba(82,183,136,0.3); }
.chat-bubble .cb-down { background:rgba(230,57,70,0.12);color:#e63946;border:1px solid rgba(230,57,70,0.25); }
.chat-bubble .cb-neu { background:rgba(231,111,81,0.12);color:#e76f51;border:1px solid rgba(231,111,81,0.25); }
.chat-bubble .cb-blue { background:rgba(69,123,157,0.12);color:#457b9d;border:1px solid rgba(69,123,157,0.25); }
.chat-bubble .cb-purple { background:rgba(109,76,142,0.12);color:#6d4c8e;border:1px solid rgba(109,76,142,0.25); }
.chat-typing { display:flex;gap:4px;align-items:center;padding:2px 0; }
.chat-typing-dot { width:7px;height:7px;border-radius:50%;background:var(--c-green);opacity:.5;animation:chatDot 1.4s ease-in-out infinite; }
.chat-typing-dot:nth-child(2){animation-delay:.2s;background:var(--c-blue);}
.chat-typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes chatDot{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}
.chat-suggestions { padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid rgba(255,255,255,0.04);flex-shrink:0;background:rgba(0,0,0,0.15); }
.chat-sugg-btn { padding:5px 10px;border-radius:8px;font-size:10px;font-weight:700;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#6b7280;cursor:pointer;transition:all .2s;font-family:'Cairo',sans-serif;white-space:nowrap; }
.chat-sugg-btn:hover { background:rgba(82,183,136,0.1);border-color:rgba(82,183,136,0.3);color:var(--c-green); }
.chat-input-area { padding:10px 12px;border-top:1px solid rgba(255,255,255,0.06);display:flex;gap:8px;align-items:flex-end;background:rgba(0,0,0,0.2);flex-shrink:0; }
.chat-input { flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:12px;padding:9px 12px;color:var(--c-text1);font-size:12px;font-family:'Cairo',sans-serif;resize:none;outline:none;transition:border-color .2s,box-shadow .2s;max-height:100px;line-height:1.5; }
.chat-input::placeholder { color:#374151;font-weight:400; }
.chat-input:focus { border-color:rgba(82,183,136,0.4);box-shadow:0 0 0 2px rgba(82,183,136,0.08); }
.chat-send-btn { width:36px;height:36px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,rgba(82,183,136,0.2),rgba(69,123,157,0.15));border:1px solid rgba(82,183,136,0.3);color:var(--c-green);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s; }
.chat-send-btn:hover { background:linear-gradient(135deg,rgba(82,183,136,0.32),rgba(69,123,157,0.22));transform:scale(1.05); }
.chat-send-btn:disabled { opacity:.4;cursor:not-allowed;transform:none; }
.chat-welcome { text-align:center;padding:24px 16px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px; }
.chat-welcome-icon { font-size:40px; }
.chat-welcome-title { font-size:15px;font-weight:900;color:var(--c-text1);font-family:'Cairo',sans-serif; }
.chat-welcome-sub { font-size:11px;color:#6b7280;font-family:'Cairo',sans-serif;line-height:1.8;max-width:280px; }
.chat-welcome-features { display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px; }
.chat-feat-chip { font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:7px;background:rgba(82,183,136,0.08);color:var(--c-green);border:1px solid rgba(82,183,136,0.2);font-family:'Cairo',sans-serif; }
.chat-fallback-banner { background:linear-gradient(135deg,rgba(231,111,81,0.1),rgba(231,111,81,0.04));border:1px solid rgba(231,111,81,0.3);border-radius:8px;padding:7px 11px;margin-bottom:8px;display:flex;align-items:center;gap:7px;font-size:9.5px;color:#e9c46a;font-family:'Cairo',sans-serif; }
/* ══ Pre-Pump Score ══ */
.pps-meter {
display: flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 52px;
}
.pps-bar-wrap {
width: 44px; height: 5px; border-radius: 3px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.pps-bar-fill {
height: 100%; border-radius: 3px;
transition: width 0.5s ease;
}
.pps-val {
font-size: 13px; font-weight: 900;
font-family: 'Cairo', monospace;
}
.pps-grade {
font-size: 8px; font-weight: 700;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
}
.pps-tag-sm {
font-size: 8px; font-weight: 700;
padding: 1px 5px; border-radius: 4px;
white-space: nowrap;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
/* ══ API Keys Manager Panel ══ */
.api-key-row {
display: flex; align-items: center; gap: 6px;
padding: 7px 10px; border-radius: 9px; margin-bottom: 5px;
background: #060d18; border: 1px solid rgba(231,111,81,0.15);
transition: border-color 0.2s;
}
.api-key-row:hover { border-color: rgba(231,111,81,0.35); }
.api-key-row.active-key { border-color: rgba(82,183,136,0.45); background: rgba(82,183,136,0.06); }
.api-key-row.error-key { border-color: rgba(230,57,70,0.4); background: rgba(230,57,70,0.05); }
.api-key-row.rate-key { border-color: rgba(231,111,81,0.45); background: rgba(231,111,81,0.05); }
.api-key-index {
width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
background: rgba(231,111,81,0.12); border: 1px solid rgba(231,111,81,0.3);
color: #e76f51; font-size: 9px; font-weight: 900;
display: flex; align-items: center; justify-content: center;
font-family: 'Cairo', sans-serif;
}
.api-key-row.active-key .api-key-index { background: rgba(82,183,136,0.18); border-color: rgba(82,183,136,0.5); color: #52b788; }
.api-key-row.error-key .api-key-index { background: rgba(230,57,70,0.14); border-color: rgba(230,57,70,0.4); color: #e63946; }
.api-key-row.rate-key .api-key-index { background: rgba(231,111,81,0.18); border-color: rgba(231,111,81,0.5); color: #e76f51; }
.api-key-inp {
flex: 1; background: transparent; border: none; outline: none;
color: #ffffff; font-size: 10px; font-family: monospace;
min-width: 0;
}
.api-key-inp::placeholder { color: #2d3748; }
.api-key-badge {
font-size: 8px; padding: 2px 6px; border-radius: 4px;
font-weight: 800; font-family: 'Cairo', sans-serif; white-space: nowrap; flex-shrink: 0;
}
.api-key-badge.badge-active { background: rgba(82,183,136,0.15); color: #52b788; border: 1px solid rgba(82,183,136,0.3); }
.api-key-badge.badge-rate { background: rgba(231,111,81,0.15); color: #e76f51; border: 1px solid rgba(231,111,81,0.3); }
.api-key-badge.badge-error { background: rgba(230,57,70,0.12); color: #e63946; border: 1px solid rgba(230,57,70,0.25); }
.api-key-badge.badge-idle { background: rgba(100,116,139,0.12); color: #64748b; border: 1px solid rgba(100,116,139,0.2); }
.api-del-btn {
width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
background: transparent; border: 1px solid rgba(230,57,70,0.2);
color: #e63946; font-size: 9px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0.5; transition: opacity 0.15s, background 0.15s;
}
.api-del-btn:hover { opacity: 1; background: rgba(230,57,70,0.1); }
.api-add-btn {
width: 100%; padding: 7px; border-radius: 8px; margin-top: 4px;
background: rgba(231,111,81,0.07); border: 1px dashed rgba(231,111,81,0.3);
color: #e76f51; font-size: 10px; font-weight: 700; font-family: 'Cairo', sans-serif;
cursor: pointer; transition: all 0.18s; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.api-add-btn:hover { background: rgba(231,111,81,0.14); border-color: rgba(231,111,81,0.5); }
.api-stats-bar {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
padding: 7px 10px; border-radius: 8px; margin-bottom: 8px;
background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
font-size: 9px; font-family: 'Cairo', sans-serif;
}
.api-stat-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.api-stat-val { font-size: 11px; font-weight: 900; color: var(--c-text1); }
.api-stat-lbl { font-size: 8px; color: #4a5568; }
.api-current-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 5px;
font-size: 9px; font-weight: 700; font-family: 'Cairo', sans-serif;
background: rgba(82,183,136,0.12); color: #52b788;
border: 1px solid rgba(82,183,136,0.3);
}
/* ══ HEAT MAP ══════════════════════════════════════════ */
.hm-cell {
border-radius: 8px;
padding: 5px 4px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
}
.hm-cell:hover { transform: scale(1.05); z-index: 2; border-color: rgba(255,255,255,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
@keyframes hm-flash { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.65)} }
.hm-cell.hm-updated { animation: hm-flash 0.35s ease; }
.hm-sym { font-size: 9px; font-weight: 900; font-family: 'Orbitron','Cairo',sans-serif; letter-spacing: 0.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-chg { font-size: 10px; font-weight: 900; font-family: monospace; line-height: 1; margin-top: 2px; }
.hm-vol { font-size: 7px; color: rgba(255,255,255,0.45); margin-top: 1px; font-family: monospace; }
/* heat colors */
.hm-up3 { background: rgba(4,120,87,0.85); color: #6ee7b7; }
.hm-up2 { background: rgba(5,150,105,0.65); color: #a7f3d0; }
.hm-up1 { background: rgba(13,148,136,0.45); color: #ccfbf1; }
.hm-neut { background: rgba(55,65,81,0.55); color: #9ca3af; }
.hm-dn1 { background: rgba(124,58,237,0.4); color: #ddd6fe; }
.hm-dn2 { background: rgba(185,28,28,0.6); color: #fca5a5; }
.hm-dn3 { background: rgba(127,29,29,0.85); color: #fecaca; }
/* ══ ALERT HISTORY ══════════════════════════════════════ */
.ah-row {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 8px; margin-bottom: 4px;
border: 1px solid rgba(255,255,255,0.05);
background: rgba(255,255,255,0.02);
font-size: 10px;
transition: background 0.15s;
}
.ah-row:hover { background: rgba(255,255,255,0.04); }
.ah-badge { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.ah-win { background: rgba(82,183,136,0.15); color: #52b788; border: 1px solid rgba(82,183,136,0.3); }
.ah-loss { background: rgba(230,57,70,0.12); color: #e63946; border: 1px solid rgba(230,57,70,0.25); }
.ah-pend { background: rgba(231,111,81,0.12); color: #e76f51; border: 1px solid rgba(231,111,81,0.25); }
.ah-sym { font-weight: 900; font-family: monospace; color: #e2e8f0; min-width: 42px; }
.ah-type-b { color: #52b788; font-weight: 700; font-size: 9px; }
.ah-type-s { color: #e63946; font-weight: 700; font-size: 9px; }
.ah-detail { flex: 1; color: #6b7280; font-size: 9px; }
.ah-price { font-family: monospace; color: #94a3b8; font-size: 9px; }
/* AI Explain button */
.sig-explain-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 6px; cursor: pointer;
font-size: 8px; font-weight: 700;
background: rgba(109,76,142,0.1);
color: #7b5ea7;
border: 1px solid rgba(109,76,142,0.25);
transition: all 0.18s;
font-family: 'Cairo', sans-serif;
}
.sig-explain-btn:hover { background: rgba(109,76,142,0.2); box-shadow: 0 0 8px rgba(109,76,142,0.2); }
.sig-explain-panel {
margin-top: 6px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(109,76,142,0.06);
border: 1px solid rgba(109,76,142,0.18);
font-size: 9px; line-height: 1.6;
color: #c7d2fe;
font-family: 'Cairo', sans-serif;
}
.sig-explain-panel .explain-title { font-weight: 700; color: #7b5ea7; margin-bottom: 4px; font-size: 9px; }
/* MTF Confluence Panel (standalone) */
.mtf-conf-cell {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 6px 8px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
min-width: 60px;
}
.mtf-conf-tf { font-size: 8px; font-weight: 700; font-family: 'Orbitron','Cairo',monospace; color: #6b7280; letter-spacing: 0.06em; }
.mtf-conf-icon { font-size: 14px; line-height: 1; }
.mtf-conf-rsi { font-size: 8px; font-family: monospace; }
.mtf-conf-cell.bull { background: rgba(82,183,136,0.08); border-color: rgba(82,183,136,0.25); }
.mtf-conf-cell.bear { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.25); }
.mtf-conf-cell.neut { background: rgba(231,111,81,0.06); border-color: rgba(231,111,81,0.2); }
/* ===== from index.html line 2092 (attrs: none) ===== */
/* ══ UNIFIED THEME OVERRIDES — Power BI Dark ══════════════════ */
:root {
--cb-bg: #010913;
--cb-bg2: #060f1c;
--cb-bg3: #0d1828;
--cb-panel: rgba(0,14,35,0.95);
--cb-cyan: #457b9d;
--cb-cyan2: #5a9abf;
--cb-gold: #e76f51;
--cb-green: #52b788;
--cb-red: #e63946;
--cb-blue: #3498db;
--cb-purple: #7b5ea7;
--cb-border: rgba(255,255,255,0.10);
--cb-glow: 0 2px 12px rgba(0,0,0,0.35);
--cb-text1: #ffffff;
--cb-text2: #adb5bd;
}
/* ══ BODY ══════════════════════════════════════════════════ */
body {
background: #020b18 !important;
background-image: none !important;
color: var(--cb-text1) !important;
}
/* ══ STATUS BAR ════════════════════════════════════════════ */
.term-statusbar {
background: #010913 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.term-logo { color: #ffffff !important; }
.term-stat-val { color: #adb5bd !important; }
/* ══ NAVBAR ════════════════════════════════════════════════ */
.term-navbar {
background: #010913 !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
.term-brand-name { color: #fff !important; }
.term-brand-name span { color: var(--cb-cyan) !important; text-shadow: none; }
.term-brand-sub { color: var(--cb-text2) !important; }
.term-mstat-val { color: var(--cb-text2) !important; }
.term-mstat-label { color: #6c757d !important; }
/* ══ ALL GLASS PANELS — unified solid bg ═══════════════════ */
.glass-panel {
background: rgba(0,14,35,0.95) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.glass-panel::before { display: none !important; }
.glass-panel::after { display: none !important; }
.glass-panel h2, .glass-panel h3 {
color: #adb5bd !important;
text-shadow: none !important;
}
/* ══ TF BUTTONS ════════════════════════════════════════════ */
.tf-btn {
background: #0d1828 !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: #6c757d !important;
box-shadow: none !important;
}
.tf-btn:hover {
background: #111e30 !important;
border-color: rgba(255,255,255,0.18) !important;
color: #adb5bd !important;
}
.tf-btn.active {
background: #52b788 !important;
border-color: #52b788 !important;
color: #fff !important;
box-shadow: none !important;
}
/* ══ SIGNAL ENTRIES ════════════════════════════════════════ */
.signal-buy { background: rgba(82,183,136,0.08) !important; border: 1px solid rgba(82,183,136,0.3) !important; color: #52b788 !important; box-shadow: none !important; }
.signal-buy-plus { background: rgba(82,183,136,0.15) !important; border: 2px solid #52b788 !important; color: #52b788 !important; box-shadow: 0 0 12px rgba(82,183,136,0.2) !important; }
.signal-sell { background: rgba(230,57,70,0.08) !important; border: 1px solid rgba(230,57,70,0.3) !important; color: #e63946 !important; box-shadow: none !important; }
.signal-sell-plus{ background: rgba(230,57,70,0.15) !important; border: 2px solid #e63946 !important; color: #e63946 !important; box-shadow: 0 0 12px rgba(230,57,70,0.2) !important; }
/* ══ WS STATUS ═════════════════════════════════════════════ */
.ws-status.connected { background: rgba(82,183,136,0.12) !important; color: #52b788 !important; border-color: rgba(82,183,136,0.35) !important; box-shadow: none !important; }
.ws-status.connecting { background: rgba(231,111,81,0.12) !important; color: #e76f51 !important; border-color: rgba(231,111,81,0.35) !important; }
.ws-status.disconnected { background: rgba(230,57,70,0.12) !important; color: #e63946 !important; border-color: rgba(230,57,70,0.35) !important; }
/* ══ SMC TAGS ══════════════════════════════════════════════ */
.bos-tag { background: rgba(52,152,219,0.12) !important; color: #3498db !important; border-color: rgba(52,152,219,0.3) !important; }
.choch-tag{ background: rgba(123,94,167,0.12) !important; color: #7b5ea7 !important; border-color: rgba(123,94,167,0.3) !important; }
.ob-tag { background: rgba(231,111,81,0.12) !important; color: #e76f51 !important; border-color: rgba(231,111,81,0.3) !important; }
.fvg-tag { background: rgba(230,57,70,0.12) !important; color: #e63946 !important; border-color: rgba(230,57,70,0.3) !important; }
.liq-tag { background: rgba(82,183,136,0.10) !important; color: #52b788 !important; border-color: rgba(82,183,136,0.28) !important; }
/* ══ SCAN BUTTON ════════════════════════════════════════════ */
#scanBtn {
background: linear-gradient(135deg, #080f1c, #2c3a50) !important;
border: 1px solid rgba(69,123,157,0.4) !important;
color: #457b9d !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
text-shadow: none !important;
}
#scanBtn:hover {
background: linear-gradient(135deg, #2c3a50, #344460) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
/* ══ SCANNER TABS ═══════════════════════════════════════════ */
.scn-tab-bar { background: #0a1220 !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.scn-tab { color: #6c757d !important; font-size: 9px !important; }
.scn-tab.active { background: #0d1828 !important; color: #adb5bd !important; box-shadow: none !important; }
/* ══ DATA GRID ══════════════════════════════════════════════ */
.dsg-container { background: #020b18 !important; border-color: rgba(255,255,255,0.08) !important; }
.dsg-table th { color: #6c757d !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
/* ══ LIVE PRICE / COIN ══════════════════════════════════════ */
#livePrice { color: #e76f51 !important; text-shadow: none !important; font-size: 1.6rem !important; }
#coinTitle { color: #ffffff !important; text-shadow: none !important; }
/* ══ SCROLLBAR ══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: #060d18; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* ══ SETTINGS PANEL ═════════════════════════════════════════ */
#settingsSidePanel {
background: #010913 !important;
border-left: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: -8px 0 30px rgba(0,0,0,0.5) !important;
}
.submenu-header { color: #6c757d !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.submenu-header:hover { color: #adb5bd !important; background: rgba(255,255,255,0.03) !important; }
/* ══ CHAT / ROBOT PANEL ═════════════════════════════════════ */
#robotPanel {
background: #010913 !important;
border-color: rgba(255,255,255,0.10) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.chat-header { background: #020b18 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
.chat-title { color: #457b9d !important; }
.chat-model-bar { background: #010913 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.chat-ctx-bar { background: #010913 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.chat-msg.bot .chat-bubble { background: #0a1220 !important; border-color: rgba(255,255,255,0.08) !important; }
.chat-msg.user .chat-bubble { background: #0d1828 !important; border-color: rgba(69,123,157,0.2) !important; }
.chat-send-btn { background: rgba(0,14,35,0.95) !important; border-color: rgba(69,123,157,0.3) !important; color: #457b9d !important; }
.chat-input { background: #020b18 !important; border-color: rgba(255,255,255,0.10) !important; }
.chat-input:focus { border-color: rgba(69,123,157,0.4) !important; box-shadow: none !important; }
.chat-suggestions { background: #0a1220 !important; border-top-color: rgba(255,255,255,0.06) !important; }
.chat-sugg-btn:hover { background: #0d1828 !important; border-color: rgba(69,123,157,0.25) !important; color: #adb5bd !important; }
.chat-input-area { background: #020b18 !important; border-top-color: rgba(255,255,255,0.06) !important; }
.chat-typing-dot { background: #457b9d !important; }
.chat-bubble strong { color: #adb5bd !important; }
.chat-welcome-title { color: #457b9d !important; }
/* ══ GRADIENT TEXT ══════════════════════════════════════════ */
.gradient-text {
background: linear-gradient(135deg, #52b788 0%, #3498db 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* ══ BADGES ════════════════════════════════════════════════ */
.term-badge-green { background: rgba(82,183,136,0.10) !important; color: #52b788 !important; border-color: rgba(82,183,136,0.25) !important; }
.term-badge-blue { background: rgba(69,123,157,0.10) !important; color: #457b9d !important; border-color: rgba(69,123,157,0.25) !important; }
.term-live-dot { background: #52b788 !important; box-shadow: 0 0 6px rgba(82,183,136,0.5) !important; }
.robot-eye { background: #457b9d !important; box-shadow: none !important; }
.robot-ping { background: #52b788 !important; box-shadow: none !important; }
/* ══ TOAST / ALERT ══════════════════════════════════════════ */
.alert-toast { background: #0a1220 !important; border: 1px solid rgba(255,255,255,0.12) !important; }
/* ══ SMC ZONE CARDS ═════════════════════════════════════════ */
.smc-zone-card { background: #0a1220 !important; border-color: rgba(255,255,255,0.08) !important; }
/* ══ MTF BARS ═══════════════════════════════════════════════ */
.mtf-bull { background: rgba(82,183,136,0.12) !important; border-color: rgba(82,183,136,0.28) !important; color: #52b788 !important; }
.mtf-bear { background: rgba(230,57,70,0.10) !important; border-color: rgba(230,57,70,0.25) !important; color: #e63946 !important; }
.mtf-full { background: rgba(82,183,136,0.15) !important; border-color: rgba(82,183,136,0.35) !important; color: #52b788 !important; }
.mtf-neut { background: #0d1828 !important; color: #6c757d !important; }
/* ══ PROGRESS BARS ══════════════════════════════════════════ */
#scanProgBar { background: linear-gradient(90deg, #457b9d, #3498db) !important; box-shadow: none !important; }
/* ══ COIN SEARCH ════════════════════════════════════════════ */
#coinSearch {
background: #020b18 !important;
border-color: rgba(255,255,255,0.12) !important;
color: #ffffff !important;
}
#coinSearch:focus { border-color: rgba(69,123,157,0.4) !important; box-shadow: none !important; }
#coinSearch::placeholder { color: rgba(255,255,255,0.2) !important; }
/* ══ ORDER BOOK ═════════════════════════════════════════════ */
#obBidBar { background: #52b788 !important; }
#obAskBar { background: #e63946 !important; }
/* ══ CRYPTOFEES / TOKEN TERMINAL PANEL ══════════════════════ */
.cf-card { background: #0a1220 !important; border-color: rgba(255,255,255,0.08) !important; }
.cf-card:hover { border-color: rgba(255,255,255,0.16) !important; }
.cf-ratio-card { background: #0d1828 !important; border-color: rgba(255,255,255,0.08) !important; }
.cf-positive { color: #52b788 !important; }
.cf-negative { color: #e63946 !important; }
.cf-neutral { color: #e76f51 !important; }
.cf-growth-up { background: rgba(82,183,136,0.07) !important; border-color: rgba(82,183,136,0.22) !important; }
.cf-growth-down { background: rgba(230,57,70,0.07) !important; border-color: rgba(230,57,70,0.22) !important; }
.cf-growth-flat { background: rgba(231,111,81,0.07) !important; border-color: rgba(231,111,81,0.22) !important; }
.cf-tab.active { background: rgba(82,183,136,0.12) !important; color: #52b788 !important; }
/* ══ WL / AL ROWS ═══════════════════════════════════════════ */
.wl-row { background: #0a1220 !important; border-color: rgba(255,255,255,0.07) !important; }
.wl-row:hover { background: #0d1828 !important; border-color: rgba(255,255,255,0.14) !important; }
.al-row { background: #0a1220 !important; border-color: rgba(255,255,255,0.07) !important; }
/* ══ SCAN CONTROLS ══════════════════════════════════════════ */
.scn-ctrl-select option { background: #020b18 !important; }
.smc-toggle.on { background: rgba(69,123,157,0.10) !important; color: #457b9d !important; border-color: rgba(69,123,157,0.28) !important; }
.smc-toggle.off { background: rgba(255,255,255,0.02) !important; color: #374151 !important; border-color: rgba(255,255,255,0.05) !important; }
.scan-slider::-webkit-slider-thumb { background: #457b9d !important; border-color: rgba(69,123,157,0.5) !important; box-shadow: none !important; }
/* ══ EES CONTAINER ══════════════════════════════════════════ */
.ees-container { border-color: rgba(231,111,81,0.15) !important; background: #0a1220 !important; }
.ees-header { background: #020b18 !important; border-bottom-color: rgba(231,111,81,0.10) !important; }
.ees-title { color: #e76f51 !important; }
/* ══ API KEY ROWS ════════════════════════════════════════════ */
.api-key-row { background: #0a1220 !important; border-color: rgba(255,255,255,0.08) !important; }
.api-key-row.active-key { border-color: rgba(82,183,136,0.4) !important; background: rgba(82,183,136,0.05) !important; }
.api-key-row.error-key { border-color: rgba(230,57,70,0.35) !important; background: rgba(230,57,70,0.05) !important; }
.api-key-row.rate-key { border-color: rgba(231,111,81,0.4) !important; background: rgba(231,111,81,0.05) !important; }
/* ══ OFFLINE BANNER ═════════════════════════════════════════ */
.offline-banner { background: rgba(231,111,81,0.08) !important; border-color: rgba(231,111,81,0.2) !important; }
/* ══ SIGNAL LOG SCROLLBAR ═══════════════════════════════════ */
#signalLog::-webkit-scrollbar { width: 4px; }
#signalLog::-webkit-scrollbar-track { background: transparent; }
#signalLog::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
/* ══ SIGNAL CHART ════════════════════════════════════════════ */
#signalChart { background: #020b18 !important; }
/* price axis width */
#signalChart td:last-child,
#signalChart .tv-lightweight-charts td:last-child {
width: 52px !important;
min-width: 52px !important;
}
/* ===== from index.html line 2350 (attrs: none) ===== */
/* ══ final body override ══ */
body { background: #060d18 !important; background-image: none !important; color: #ffffff !important; }
/* ===== from index.html line 2358 (attrs: none) ===== */
/* Cyberpunk Overview Widget */
#cb-overview-widget {
position: relative;
background: #060d18;
border-bottom: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
padding: 12px 20px;
display: flex;
align-items: stretch;
gap: 0;
}
#cb-overview-widget::before {
display: none;
}
.cb-stat-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-left: 1px solid rgba(255,255,255,0.07);
position: relative;
min-width: 0;
}
.cb-stat-card:first-child { border-left: none; }
.cb-stat-label {
font-size: 9px;
font-weight: 700;
color: #6c757d;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
white-space: nowrap;
}
.cb-stat-val {
font-size: 1.5rem;
font-weight: 700;
font-family: 'Cairo', monospace;
line-height: 1;
margin-bottom: 3px;
}
.cb-stat-sub {
font-size: 8px;
color: #4a5568;
letter-spacing: 0.04em;
}
/* Circular Progress */
.cb-circle-wrap {
position: relative;
width: 70px; height: 70px;
flex-shrink: 0;
}
.cb-circle-svg { transform: rotate(-90deg); }
.cb-circle-bg { fill: none; stroke: rgba(69,123,157,0.06); stroke-width: 5; }
.cb-circle-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1); }
.cb-circle-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Share Tech Mono', monospace;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
}
.cb-circle-sublabel {
font-size: 7px;
font-family: 'Orbitron', sans-serif;
opacity: 0.5;
letter-spacing: 0.05em;
}
/* Gauge meter */
.cb-gauge-wrap {
width: 90px; height: 50px;
position: relative;
flex-shrink: 0;
}
.cb-gauge-svg { overflow: visible; }
/* TOP 10 sidebar */
#cb-top10 {
width: 220px;
flex-shrink: 0;
padding: 0 0 0 12px;
border-left: 1px solid rgba(69,123,157,0.1);
}
.cb-top10-header {
font-size: 10px;
font-family: 'Orbitron', sans-serif;
color: var(--cb-gold);
letter-spacing: 0.1em;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.cb-top10-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
animation: cb-row-in 0.4s ease both;
}
@keyframes cb-row-in { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }
.cb-top10-rank {
width: 14px;
font-size: 9px;
font-family: 'Share Tech Mono', monospace;
color: rgba(69,123,157,0.4);
text-align: center;
flex-shrink: 0;
}
.cb-top10-rank.gold { color: var(--cb-gold); }
.cb-top10-rank.silver { color: #c0c0c0; }
.cb-top10-rank.bronze { color: #cd7f32; }
.cb-top10-bar-wrap {
flex: 1;
height: 14px;
border-radius: 3px;
background: rgba(255,255,255,0.03);
overflow: hidden;
position: relative;
}
.cb-top10-bar {
height: 100%;
border-radius: 3px;
transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}
.cb-top10-sym {
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 8px;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
color: rgba(255,255,255,0.9);
white-space: nowrap;
pointer-events: none;
}
.cb-top10-num {
font-size: 9px;
font-family: 'Share Tech Mono', monospace;
color: rgba(69,123,157,0.7);
min-width: 40px;
text-align: right;
flex-shrink: 0;
}
/* Mini bar chart at bottom */
#cb-barchart-wrap {
width: 100%;
background: rgba(6,13,24,0.95);
border-bottom: 1px solid rgba(69,123,157,0.08);
padding: 8px 20px 4px;
position: relative;
overflow: hidden;
}
.cb-barchart-title {
font-size: 9px;
font-family: 'Orbitron', sans-serif;
color: rgba(69,123,157,0.5);
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.cb-bars-container {
display: flex;
align-items: flex-end;
gap: 3px;
height: 55px;
}
.cb-bar-group {
display: flex;
align-items: flex-end;
gap: 1.5px;
flex: 1;
position: relative;
}
.cb-bar {
flex: 1;
border-radius: 2px 2px 0 0;
transition: height 1s cubic-bezier(0.4,0,0.2,1);
min-height: 2px;
}
.cb-bar-buy { background: linear-gradient(180deg, var(--cb-green), rgba(82,183,136,0.4)); }
.cb-bar-sell { background: linear-gradient(180deg, var(--cb-red), rgba(230,57,70,0.4)); }
.cb-bar-vol { background: linear-gradient(180deg, var(--cb-cyan), rgba(69,123,157,0.3)); opacity: 0.5; }
.cb-bar-label {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
font-size: 7px;
font-family: 'Share Tech Mono', monospace;
color: rgba(69,123,157,0.4);
white-space: nowrap;
}
.cb-barchart-legend {
display: flex;
gap: 14px;
margin-top: 16px;
font-size: 8px;
font-family: 'Orbitron', sans-serif;
}
.cb-legend-dot {
width: 8px; height: 8px;
border-radius: 2px;
display: inline-block;
margin-left: 4px;
vertical-align: middle;
}
/* Scanline overlay effect */
.cb-scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
pointer-events: none;
z-index: 1;
}
/* Responsive */
@media (max-width: 768px) {
#cb-overview-widget { flex-wrap: wrap; }
#cb-top10 { width: 100%; border-left: none; border-top: 1px solid rgba(69,123,157,0.1); padding: 8px 0 0; }
.cb-stat-card { min-width: 80px; }
}
@media (max-width: 480px) {
#cb-overview-widget { padding: 8px 10px; gap: 0; }
.cb-stat-card { padding: 6px 8px; }
.cb-stat-val { font-size: 1.1rem; }
}
/* ===== from index.html line 2631 (attrs: id="matrixResponsiveChartCSS") ===== */
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE AUTO-CENTERING CHART LAYOUT SYSTEM (Matrix Pro)
- Keeps the candlestick pane the dominant visual element on all
screen sizes while indicator panes (W%R, etc.) shrink responsively.
- Actual pixel heights fed into Lightweight Charts are computed in
JS (see recalcChartLayout) using these CSS values as the source
of truth for available space.
══════════════════════════════════════════════════════════════════ */
#chartGlassPanel {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 !important;
border-radius: 14px;
}
/* فاصل بين الـ sub-chart وما فوقه */
#wmChartWrap {
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: 0 !important;
}
/* legend في الأسفل بدون margin */
#chartLegend { margin-top: 0 !important; }
/* SMC row — مُخفى نهائياً (الموشرات اتدمجت في الشارت مباشرة) */
#smcChartLayersRow {
display: none !important;
}
.chart-main-pane{
height: clamp(320px, 60vh, 900px);
min-height: 320px;
max-height: 900px;
overflow:hidden;
flex:0 0 auto;
position:relative;
width:100%;
border-radius:0;
}
.chart-indicator-pane{
height: clamp(70px, 12vh, 130px);
max-height:130px;
min-height:70px;
overflow:hidden;
flex:0 0 auto;
width:100%;
}
#wmChartEl{ width:100%; height:100%; }
/* Desktop */
@media (min-width:1024px){
.chart-main-pane{ height: clamp(500px, 72vh, 900px); min-height:500px; }
.chart-indicator-pane{ height: clamp(90px, 14vh, 130px); }
}
/* Tablet */
@media (min-width:640px) and (max-width:1023px){
.chart-main-pane{ height: clamp(420px, 65vh, 780px); min-height:420px; }
.chart-indicator-pane{ height: clamp(80px, 13vh, 120px); }
}
/* Mobile */
@media (max-width:639px){
.chart-main-pane{ height: clamp(300px, 55vh, 600px); min-height:300px; }
.chart-indicator-pane{ height: clamp(65px, 11vh, 100px); }
}
/* === Fullscreen mode for the Smart Signals Chart === */
#chartGlassPanel:fullscreen,
#chartGlassPanel:-webkit-full-screen {
background:#04070d;
display:flex;
flex-direction:column;
border-radius:0 !important;
}
#chartGlassPanel.chart-fullscreen-active .chart-main-pane,
#chartGlassPanel:fullscreen .chart-main-pane,
#chartGlassPanel:-webkit-full-screen .chart-main-pane {
height:auto !important;
max-height:none !important;
flex:1 1 auto !important;
}
#chartGlassPanel.chart-fullscreen-active .chart-indicator-pane,
#chartGlassPanel:fullscreen .chart-indicator-pane,
#chartGlassPanel:-webkit-full-screen .chart-indicator-pane {
height:18vh !important;
max-height:220px !important;
flex:0 0 auto !important;
}
/* ===== from index.html line 2723 (attrs: none) ===== */
/* ══ UNIFIED CARD BACKGROUND — نفس لون SMC ENGINE VISION header ══ */
/* اللون المصدر: .v2-header { background: rgba(6,13,24,0.92) } */
.glass-panel,
#cfSection, #cfPanel, .cf-card, .cf-ratio-card,
#scannerSection, #qisSection,
#obGlassPanel,
.glass-panel.rounded-2xl,
#smcDashSection,
#smcProPanel, #unifiedSection, #quantumSection,
#statsBar, #coinHeader,
#signalSection, #alertHistorySection,
.ds-stepper, .ds-row, .ds-section,
.scn-tab-bar, .ees-container, .dsg-container {
background: rgba(6,13,24,0.95) !important;
border-color: rgba(69,123,157,0.14) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.glass-panel::before { display: none !important; }
.glass-panel::after { display: none !important; }
.cf-card:hover {
border-color: rgba(69,123,157,0.28) !important;
background: rgba(6,16,30,0.98) !important;
}
#scannerSection .glass-panel,
.scn-ctrl-select {
background: rgba(6,13,24,0.95) !important;
}
.scn-ctrl-select option { background: #060d18 !important; }
.ds-row, .wl-row, .al-row {
background: rgba(4,9,18,0.8) !important;
border-color: rgba(69,123,157,0.10) !important;
}
.ds-row:hover, .wl-row:hover {
background: rgba(6,16,30,0.9) !important;
}
.tf-btn { background: rgba(6,13,24,0.9) !important; }
.tf-btn.active { background: #52b788 !important; }
#coinSearch, .chat-input,
input[type="number"], input[type="text"], select {
background: rgba(4,9,18,0.95) !important;
}
#qisSection, .qis-phases, .qis-prog-wrap { background: rgba(6,13,24,0.95) !important; }
#alertHistorySection { background: rgba(6,13,24,0.95) !important; }
#obGlassPanel .border-b { border-color: rgba(69,123,157,0.14) !important; }
.v2-card {
background: rgba(6,13,24,0.92) !important;
border-color: rgba(69,123,157,0.14) !important;
}
#v2ConfBreakdown, #v2StructurePanel,
#v2BosPanel, #v2ChochPanel, #v2ObPanel,
#v2BreakerPanel, #v2FvgPanel, #v2LiqPanel,
#v2DeltaPanel, #v2SmtPanel, #v2PdPanel {
background: transparent !important;
}
/* ══════════════════════════════════════════════════════
MATRIX PRO — VISUAL ENHANCEMENT LAYER v1
تحسينات بصرية احترافية — طبقة تجميلية فوق الأصل
══════════════════════════════════════════════════════ */
/* ── Glass Panel Top Accent Line ── */
.glass-panel { position: relative; }
.glass-panel::before {
content: '';
position: absolute;
top: 0; left: 16px; right: 16px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(82,183,136,0.28) 30%, rgba(69,123,157,0.38) 70%, transparent 100%);
border-radius: 0;
pointer-events: none;
z-index: 1;
}
/* ── Status Bar Enhancements ── */
.term-statusbar {
background: linear-gradient(90deg, rgba(1,9,19,0.99) 0%, rgba(3,14,30,0.99) 50%, rgba(1,9,19,0.99) 100%) !important;
border-bottom: 1px solid rgba(82,183,136,0.1) !important;
box-shadow: 0 1px 16px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(82,183,136,0.05);
}
.term-logo {
background: linear-gradient(135deg, #52b788 0%, #457b9d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
letter-spacing: 0.09em;
font-size: 11px;
}
.term-stat-label {
color: #2e4050 !important;
font-size: 9px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.term-divider { color: rgba(82,183,136,0.15) !important; }
/* ── Navbar Enhanced ── */
.term-navbar {
background: linear-gradient(180deg, rgba(2,10,22,0.98) 0%, rgba(1,8,18,0.99) 100%) !important;
border-bottom: 1px solid rgba(82,183,136,0.08) !important;
box-shadow: 0 4px 28px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(82,183,136,0.04);
}
.term-brand-name {
background: linear-gradient(135deg, #e2f0ff 0%, #a8c8e0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.12em;
}
.term-brand-sub {
font-size: 8px !important;
color: #2e4255 !important;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
}
.term-brand-icon {
background: linear-gradient(135deg, rgba(82,183,136,0.18) 0%, rgba(69,123,157,0.18) 100%) !important;
border: 1px solid rgba(82,183,136,0.28) !important;
box-shadow: 0 0 18px rgba(82,183,136,0.12), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.term-mstat-label {
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 8px !important;
color: #243343 !important;
font-weight: 700;
}
.term-mstat-val {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.03em;
}
.term-live-dot {
box-shadow: 0 0 6px rgba(82,183,136,0.9), 0 0 14px rgba(82,183,136,0.5) !important;
}
/* ── TF Buttons Enhanced ── */
.tf-btn.active {
background: linear-gradient(135deg, rgba(82,183,136,0.18) 0%, rgba(69,123,157,0.14) 100%) !important;
border-color: rgba(82,183,136,0.5) !important;
color: #52b788 !important;
box-shadow: 0 0 10px rgba(82,183,136,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
}
.tf-btn:not(.active):hover {
border-color: rgba(82,183,136,0.22) !important;
color: rgba(255,255,255,0.65) !important;
background: rgba(82,183,136,0.04) !important;
}
/* ── Coin Header Enhanced ── */
#coinHeader {
background: linear-gradient(135deg, rgba(5,13,28,0.97) 0%, rgba(3,10,22,0.99) 100%) !important;
border: 1px solid rgba(82,183,136,0.14) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(82,183,136,0.07);
}
#coinTitle {
background: linear-gradient(135deg, #ffffff 0%, #aac8e0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.04em;
}
/* ── Stats Metric Cells ── */
#statsBar .text-center {
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#statsBar .text-center:hover { transform: translateY(-2px); }
#sBPlus { text-shadow: 0 0 14px rgba(82,183,136,0.55); }
#sSPlus { text-shadow: 0 0 14px rgba(230,57,70,0.55); }
/* ── SMC Dashboard ── */
#smcDashSection {
border: 1px solid rgba(109,76,142,0.14) !important;
}
/* ── Alert History Section ── */
#alertHistorySection {
border: 1px solid rgba(231,111,81,0.11) !important;
}
#ahWinRate { text-shadow: 0 0 18px rgba(82,183,136,0.45); }
/* ── Win Rate Bar Enhanced ── */
#ahWinBar {
background: linear-gradient(90deg, #52b788, #6edba4) !important;
box-shadow: 0 0 8px rgba(82,183,136,0.35);
}
/* ── Settings Panel Enhanced ── */
#settingsSidePanel {
background: linear-gradient(180deg, rgba(4,8,20,0.98) 0%, rgba(2,5,14,0.99) 100%) !important;
box-shadow: -6px 0 40px rgba(0,0,0,0.65), inset -1px 0 0 rgba(109,76,142,0.08) !important;
}
/* ── Quantum Scanner Enhanced ── */
.qis-wrap {
box-shadow: 0 6px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(82,183,136,0.05) !important;
}
.qis-ph { transition: all 0.22s ease; }
.qis-ph:hover { transform: translateY(-1px); }
.qis-ph.ok { box-shadow: inset 0 1px 0 rgba(82,183,136,0.12), 0 2px 10px rgba(82,183,136,0.05); }
.qis-ph.fail{ box-shadow: inset 0 1px 0 rgba(230,57,70,0.12), 0 2px 10px rgba(230,57,70,0.05); }
/* ── Progress Bars Shimmer ── */
.qis-prog-bar, #uniProgressBar {
position: relative; overflow: hidden;
}
.qis-prog-bar::after, #uniProgressBar::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 80%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
animation: mxShimmer 1.6s ease-in-out infinite;
}
@keyframes mxShimmer { 0% { left:-100%; } 100% { left:220%; } }
/* ── Chart Legend Tags ── */
#chartLegend > div { transition: background 0.2s, border-color 0.2s; }
#chartLegend > div:hover { background: rgba(255,255,255,0.05) !important; }
/* ── Heat Map Cells ── */
#hmLegend {
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.04);
margin-top: 10px !important;
}
/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 2px; }
::-webkit-scrollbar-thumb { background: rgba(82,183,136,0.22); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(82,183,136,0.42); }
/* ── Search Input Focus ── */
#coinSearch:focus {
box-shadow: 0 0 0 2px rgba(82,183,136,0.14), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
/* ── Live Glow Pulses ── */
@keyframes mxGlowGreen {
0%,100% { box-shadow:0 0 6px rgba(82,183,136,0.35); }
50% { box-shadow:0 0 16px rgba(82,183,136,0.65),0 0 30px rgba(82,183,136,0.25); }
}
@keyframes mxGlowRed {
0%,100% { box-shadow:0 0 6px rgba(230,57,70,0.35); }
50% { box-shadow:0 0 16px rgba(230,57,70,0.65),0 0 30px rgba(230,57,70,0.25); }
}
/* ── SMC Toggle Buttons ── */
.smc-toggle.on { box-shadow: 0 0 8px rgba(82,183,136,0.12); }
/* ── CryptoFees Section ── */
#cfSection { border: 1px solid rgba(82,183,136,0.09) !important; }
/* ══ END MATRIX PRO VISUAL ENHANCEMENT LAYER ══ */
/* ===== from index.html line 4257 (attrs: none) ===== */
/* ══ Vision 2.0 Panel Styles ══════════════════════════════════════ */
#v2SmcPanel {
display: none;
flex-direction: column;
gap: 12px;
}
#v2SmcPanel.visible { display: flex; }
/* Header bar */
.v2-header {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
padding: 14px 18px;
background: rgba(6,13,24,0.92);
border: 1px solid rgba(69,123,157,0.2);
border-radius: 16px;
backdrop-filter: blur(16px);
position: relative; overflow: hidden;
}
.v2-header::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background: linear-gradient(90deg, transparent, #457b9d 40%, #6d4c8e 70%, transparent);
}
.v2-title { font-family:'Orbitron','Cairo',sans-serif; font-size:13px; font-weight:900; color:#457b9d; letter-spacing:.08em; }
.v2-sub { font-size:9px; color:#4a6a8a; margin-top:2px; font-family:'Cairo',sans-serif; }
/* Institutional Strength meter */
.v2-inst-bar-wrap { height:6px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:6px; }
.v2-inst-bar { height:100%; border-radius:3px; transition:width .6s ease; }
/* Section card */
.v2-card {
background: rgba(0,14,35,0.88);
border: 1px solid rgba(69,123,157,0.12);
border-radius: 14px;
padding: 14px 16px;
position: relative; overflow: hidden;
backdrop-filter: blur(12px);
}
.v2-card::after {
content:''; position:absolute; bottom:0; right:0;
width:16px; height:16px;
border-bottom:1px solid rgba(69,123,157,0.2);
border-right:1px solid rgba(69,123,157,0.2);
}
.v2-sec-title {
font-size:10px; font-weight:700; letter-spacing:.06em;
font-family:'Orbitron','Cairo',sans-serif;
margin-bottom:10px; padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,0.05);
display:flex; align-items:center; gap:6px;
}
.v2-sec-icon { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
/* Grid layouts */
.v2-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.v2-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
@media(max-width:640px) { .v2-grid-3 { grid-template-columns:1fr 1fr; } .v2-grid-2 { grid-template-columns:1fr; } }
/* Metric cell */
.v2-metric {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px; padding: 10px 12px;
transition: border-color .2s;
}
.v2-metric:hover { border-color: rgba(69,123,157,0.2); }
.v2-metric-label { font-size:9px; font-weight:300; color:#4a6a8a; font-family:'Cairo',sans-serif; margin-bottom:4px; }
.v2-metric-val { font-size:15px; font-weight:900; font-family:'Orbitron','Cairo',monospace; line-height:1; }
.v2-metric-sub { font-size:9px; color:#4a6a8a; margin-top:3px; font-family:'Cairo',sans-serif; }
/* Bar score */
.v2-score-bar { height:4px; border-radius:2px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:5px; }
.v2-score-fill { height:100%; border-radius:2px; transition:width .5s ease; }
/* Tag */
.v2-tag {
display:inline-block; font-size:8px; font-weight:700; padding:2px 7px;
border-radius:5px; font-family:'Cairo',sans-serif; white-space:nowrap;
margin:1px 2px;
}
.v2-tag-cyan { background:rgba(69,123,157,.12); color:#457b9d; border:1px solid rgba(69,123,157,.3); }
.v2-tag-green { background:rgba(82,183,136,.1); color:#52b788; border:1px solid rgba(82,183,136,.3); }
.v2-tag-gold { background:rgba(231,111,81,.12); color:#e76f51; border:1px solid rgba(231,111,81,.3); }
.v2-tag-red { background:rgba(230,57,70,.12); color:#e63946; border:1px solid rgba(230,57,70,.3); }
.v2-tag-purple { background:rgba(109,76,142,.12);color:#6d4c8e; border:1px solid rgba(109,76,142,.3); }
.v2-tag-gray { background:rgba(255,255,255,.05);color:#6b7280; border:1px solid rgba(255,255,255,.1); }
/* Grade badge */
.v2-grade {
display:inline-flex; align-items:center; justify-content:center;
font-size:11px; font-weight:900; font-family:'Orbitron',sans-serif;
padding:4px 10px; border-radius:8px; min-width:44px;
}
.v2-grade-splus { background:rgba(82,183,136,.18); color:#52b788; border:1px solid #52b788; box-shadow:0 0 12px rgba(82,183,136,.25); }
.v2-grade-s { background:rgba(69,123,157,.15); color:#457b9d; border:1px solid #457b9d; box-shadow:0 0 12px rgba(69,123,157,.2); }
.v2-grade-aplus { background:rgba(231,111,81,.15); color:#e76f51; border:1px solid #e76f51; }
.v2-grade-a { background:rgba(82,183,136,.15);color:#52b788; border:1px solid #52b788; }
.v2-grade-bplus { background:rgba(69,123,157,.12);color:#457b9d; border:1px solid #457b9d; }
.v2-grade-b { background:rgba(231,111,81,.12);color:#e76f51; border:1px solid #e76f51; }
.v2-grade-ignore { background:rgba(107,114,128,.1);color:#6b7280; border:1px solid #374151; }
/* Row item */
.v2-row {
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:8px 10px; border-radius:9px; margin-bottom:4px;
background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
font-size:10px; font-family:'Cairo',sans-serif;
transition:background .15s;
}
.v2-row:hover { background:rgba(69,123,157,.04); }
.v2-row:last-child { margin-bottom:0; }
.v2-row-label { color:#94a3b8; flex:1; }
.v2-row-val { font-weight:700; font-family:'Orbitron','Cairo',monospace; color:#e2e8f0; font-size:10px; }
/* OB rank colors */
.rank-aplus { color:#52b788; } .rank-a { color:#52b788; }
.rank-b { color:#e76f51; } .rank-c { color:#6b7280; } .rank-ignore { color:#374151; }
/* Liq pill */
.v2-liq-pill {
display:inline-flex; align-items:center; gap:4px;
padding:3px 8px; border-radius:6px; font-size:9px; font-weight:700;
font-family:'Cairo',sans-serif;
}
.v2-liq-bsl { background:rgba(82,183,136,.08); color:#52b788; border:1px solid rgba(82,183,136,.25); }
.v2-liq-ssl { background:rgba(230,57,70,.08); color:#e63946; border:1px solid rgba(230,57,70,.25); }
.v2-liq-hunt{ background:rgba(231,111,81,.1); color:#e76f51; border:1px solid rgba(231,111,81,.25); }
/* Factor list */
.v2-factor { font-size:9px; color:#64748b; font-family:'Cairo',sans-serif; padding:2px 0; }
.v2-factor.ok { color:#52b788; }
.v2-factor.warn { color:#e76f51; }
/* Breakdown table */
.v2-bk-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:9px; font-family:'Cairo',sans-serif; }
.v2-bk-label { color:#4a6a8a; width:90px; flex-shrink:0; }
.v2-bk-bar-wrap { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
.v2-bk-bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,#457b9d,#6d4c8e); }
.v2-bk-val { color:#e2e8f0; font-weight:700; font-family:'Orbitron',monospace; font-size:9px; min-width:28px; text-align:left; }
/* Pulse glow on high-grade */
@keyframes v2-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(69,123,157,0)} 50%{box-shadow:0 0 20px 2px rgba(69,123,157,.2)} }
.v2-pulse { animation: v2-pulse 2.5s ease-in-out infinite; }
/* MTF alignment dots */
.v2-tf-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin:0 2px; }
.v2-tf-bull { background:#52b788; } .v2-tf-bear { background:#e63946; } .v2-tf-neut { background:#4b5563; }
.v2-empty { text-align:center; color:#374151; font-size:10px; padding:18px; font-family:'Cairo',sans-serif; }
/* Collapsible sections */
.v2-collapse-btn { cursor:pointer; user-select:none; }
.v2-collapse-btn .v2-arrow { transition:transform .25s; font-size:9px; color:#4a6a8a; }
.v2-collapse-btn.open .v2-arrow { transform:rotate(90deg); }
.v2-collapse-body { overflow:hidden; transition:max-height .3s ease; }
/* ===== from index.html line 4898 (attrs: none) ===== */
.scn-controls-grid {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 8px;
margin-bottom: 12px;
align-items: center;
}
@media (max-width: 520px) {
.scn-controls-grid {
grid-template-columns: 1fr 1fr;
}
.scn-controls-grid .scn-btn-row {
grid-column: 1 / -1;
}
}
.scn-ctrl-box {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(10,18,32,0.9);
min-width: 0;
transition: border-color 0.2s;
}
.scn-ctrl-box:focus-within { border-color: rgba(82,183,136,0.35); }
.scn-ctrl-icon { font-size: 11px; flex-shrink: 0; }
.scn-ctrl-label { font-size: 9px; color: #6b7280; font-family: 'Cairo',sans-serif; font-weight: 600; white-space: nowrap; }
.scn-ctrl-select {
background: transparent;
color: #e2e8f0;
font-weight: 800;
outline: none;
cursor: pointer;
font-size: 12px;
font-family: 'Cairo', sans-serif;
border: none;
flex: 1;
min-width: 0;
}
.scn-ctrl-select option { background: #080f1c; color: #e2e8f0; }
.scn-btn-row {
display: flex;
gap: 7px;
align-items: center;
}
.scn-main-btn {
flex: 1;
padding: 10px 14px;
border-radius: 12px;
border: none;
font-size: 12px;
font-weight: 900;
font-family: 'Cairo', sans-serif;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: all 0.2s;
white-space: nowrap;
}
.scn-main-btn.btn-green {
background: linear-gradient(135deg, #52b788, #52b788);
box-shadow: 0 4px 16px rgba(82,183,136,0.25);
}
.scn-main-btn.btn-green:hover { box-shadow: 0 4px 24px rgba(82,183,136,0.4); transform: translateY(-1px); }
.scn-main-btn.btn-quantum {
background: linear-gradient(135deg, rgba(82,183,136,0.18), rgba(69,123,157,0.18));
border: 1px solid rgba(82,183,136,0.35);
color: #52b788;
box-shadow: 0 4px 14px rgba(82,183,136,0.12);
}
.scn-main-btn.btn-quantum:hover { box-shadow: 0 4px 22px rgba(82,183,136,0.28); transform: translateY(-1px); }
.scn-main-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.scn-mtf-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(10,18,32,0.9);
font-size: 10px;
color: #6b7280;
font-family: 'Cairo',sans-serif;
margin-bottom: 12px;
flex-wrap: wrap;
}
.scn-mtf-row .scan-toggle { margin-right: auto; }
/* ===== from index.html line 5259 (attrs: none) ===== */
/* ══ Unified Scanner — Styles (يبني على نمط qis-* الموجود) ════════════ */
.uni-wrap {
background: linear-gradient(135deg, rgba(6,13,24,0.95), rgba(0,14,35,0.98));
border: 1px solid rgba(231,111,81,0.25);
border-radius: 16px; padding: 16px; position: relative; overflow: hidden;
}
.uni-wrap::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg,transparent,#e76f51 30%,#52b788 60%,#457b9d 85%,transparent);
animation:qis-scanline 3s ease-in-out infinite;
}
.uni-title {
font-size:13px; font-weight:900; font-family:'Cairo',sans-serif;
background:linear-gradient(135deg,#e76f51,#52b788,#457b9d);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
letter-spacing:0.04em;
}
.uni-filter-bar {
display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto;
gap:8px; margin-bottom:12px; align-items:stretch;
}
@media(max-width:680px){ .uni-filter-bar{ grid-template-columns:1fr 1fr; } .uni-filter-bar .uni-run-col{ grid-column:1/-1; } }
/* الكارت الموحّد */
.uni-card {
background:rgba(0,14,35,0.92); border:1px solid rgba(255,255,255,0.08);
border-radius:14px; padding:13px 14px; margin-bottom:10px;
animation:qis-fadein 0.35s ease both; transition:border-color 0.2s;
}
.uni-card.cap-active { border-color:rgba(231,111,81,0.3); }
.uni-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.uni-sym { font-size:14px; font-weight:900; color:#e2e8f0; font-family:'Cairo',sans-serif; }
.uni-price-row { font-size:9px; color:#6b7280; font-family:'Cairo',monospace; margin-top:2px; }
.uni-score-box { text-align:left; }
.uni-score-num { font-size:22px; font-weight:900; font-family:'Cairo',monospace; line-height:1; }
.uni-cap-note { font-size:8px; color:#e76f51; font-family:'Cairo',sans-serif; margin-top:2px; }
.uni-signals { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
.uni-sig-badge { font-size:8px; font-weight:700; padding:3px 8px; border-radius:6px; font-family:'Cairo',sans-serif; border:1px solid; white-space:nowrap; }
.uni-bars { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.uni-bar-row { display:flex; align-items:center; gap:6px; font-size:9px; }
.uni-bar-lbl { width:48px; flex-shrink:0; color:#4a5568; font-family:'Cairo',sans-serif; font-weight:700; }
.uni-bar-trk { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden; }
.uni-bar-fil { height:100%; border-radius:3px; transition:width 0.5s ease; }
.uni-bar-val { width:28px; text-align:left; color:#e2e8f0; font-weight:800; font-family:'Cairo',monospace; font-size:9px; }
.uni-bar-w { width:32px; text-align:left; color:#4a5568; font-family:'Cairo',monospace; font-size:8px; }
.uni-toggle-btn {
width:100%; padding:6px; border-radius:8px; border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.02); color:#6b7280; font-size:9px; font-weight:700;
font-family:'Cairo',sans-serif; cursor:pointer; transition:all 0.2s;
}
.uni-toggle-btn:hover { background:rgba(255,255,255,0.05); color:#9ca3af; }
.uni-detail { display:none; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.08); }
.uni-detail.open { display:block; animation:qis-fadein 0.25s ease both; }
.uni-detail-section { border-right:3px solid; padding:8px 10px; border-radius:8px; margin-bottom:8px; background:rgba(255,255,255,0.02); }
.uni-detail-section.s-smart { border-color:#457b9d; }
.uni-detail-section.s-early { border-color:#e76f51; }
.uni-detail-section.s-quantum { border-color:#52b788; }
.uni-detail-title { font-size:10px; font-weight:800; font-family:'Cairo',sans-serif; margin-bottom:5px; }
.uni-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; font-size:8px; font-family:'Cairo',sans-serif; color:#9ca3af; }
.uni-detail-grid b { color:#e2e8f0; }
.uni-empty-box { text-align:center; padding:36px 20px; }
/* ===== from index.html line 5418 (attrs: none) ===== */
/* ══ Quantum Institutional Scanner — Styles ═══════════════════════ */
.qis-wrap {
background: linear-gradient(135deg, rgba(6,13,24,0.95), rgba(0,14,35,0.98));
border: 1px solid rgba(82,183,136,0.2);
border-radius: 16px;
padding: 16px;
position: relative;
overflow: hidden;
}
.qis-wrap::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg,transparent,#52b788 40%,#457b9d 70%,transparent);
animation:qis-scanline 3s ease-in-out infinite;
}
@keyframes qis-scanline { 0%,100%{opacity:0.5} 50%{opacity:1} }
.qis-title-bar {
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:8px; margin-bottom:14px;
}
.qis-title {
font-size:13px; font-weight:900; font-family:'Cairo',sans-serif;
background:linear-gradient(135deg,#52b788,#457b9d);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
letter-spacing:0.04em;
}
.qis-badges { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
/* Phase grid — 5 cols desktop, 3 mobile */
.qis-phases {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px; margin-bottom:14px;
}
@media(max-width:520px){ .qis-phases{ grid-template-columns:repeat(3,1fr); } }
.qis-ph {
background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06);
border-radius:10px; padding:8px 6px; text-align:center; transition:all 0.25s;
}
.qis-ph.ok { background:rgba(82,183,136,0.07); border-color:rgba(82,183,136,0.28); }
.qis-ph.fail{ background:rgba(230,57,70,0.05); border-color:rgba(230,57,70,0.18); }
.qis-ph-lbl { font-size:8px; color:#4a5568; font-family:'Cairo',sans-serif; font-weight:600; }
.qis-ph-val { font-size:11px; font-weight:900; margin-top:3px; font-family:'Cairo',monospace; }
/* Controls grid */
.qis-ctrl-grid {
display:grid;
grid-template-columns:1fr 1fr 1fr auto;
gap:8px; margin-bottom:10px; align-items:stretch;
}
@media(max-width:560px){
.qis-ctrl-grid{ grid-template-columns:1fr 1fr; }
.qis-ctrl-grid .qis-run-col{ grid-column:1/-1; }
}
.qis-ctrl-card {
display:flex; align-items:center; gap:7px;
padding:9px 11px; border-radius:11px;
border:1px solid rgba(82,183,136,0.15);
background:rgba(82,183,136,0.04);
min-width:0; transition:border-color 0.2s;
}
.qis-ctrl-card:focus-within{ border-color:rgba(82,183,136,0.38); }
.qis-ctrl-lbl { font-size:8px; color:#6b7280; font-family:'Cairo',sans-serif; font-weight:600; }
.qis-ctrl-sel {
background:transparent; color:#52b788; font-weight:800;
outline:none; cursor:pointer; font-size:12px;
font-family:'Cairo',sans-serif; border:none; width:100%;
}
.qis-ctrl-sel option{ background:#000e23; color:#e2e8f0; }
.qis-run-btn {
width:100%; padding:11px 14px; border-radius:11px;
border:1px solid rgba(82,183,136,0.35); outline:none; cursor:pointer;
font-size:12px; font-weight:900; font-family:'Cairo',sans-serif;
background:linear-gradient(135deg,rgba(82,183,136,0.15),rgba(69,123,157,0.15));
color:#52b788; display:flex; align-items:center; justify-content:center; gap:7px;
transition:all 0.2s; white-space:nowrap;
}
.qis-run-btn:hover{ background:linear-gradient(135deg,rgba(82,183,136,0.25),rgba(69,123,157,0.25)); box-shadow:0 0 18px rgba(82,183,136,0.2); }
.qis-run-btn:disabled{ opacity:0.5; cursor:not-allowed; }
/* Strict row */
.qis-strict {
display:flex; align-items:center; gap:8px;
padding:7px 12px; border-radius:10px;
border:1px solid rgba(255,255,255,0.06);
background:rgba(255,255,255,0.02);
font-size:10px; color:#6b7280; font-family:'Cairo',sans-serif;
margin-bottom:12px; flex-wrap:wrap;
}
/* Progress */
.qis-prog-wrap { margin-bottom:12px; display:none; }
.qis-prog-track { height:3px; border-radius:2px; background:rgba(82,183,136,0.1); overflow:hidden; margin-bottom:5px; }
.qis-prog-bar { height:100%; width:0%; border-radius:2px; background:linear-gradient(90deg,#52b788,#457b9d); transition:width 0.3s ease; }
.qis-prog-txt { font-size:9px; color:#4a6a8a; font-family:'Cairo',sans-serif; text-align:center; }
/* Signal cards */
.qis-signal {
background:rgba(0,14,35,0.9); border:1px solid rgba(255,255,255,0.07);
border-radius:12px; padding:12px 14px; margin-bottom:8px;
cursor:pointer; transition:all 0.2s;
animation:qis-fadein 0.35s ease both;
}
@keyframes qis-fadein{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.qis-signal:hover{ border-color:rgba(82,183,136,0.3); }
.qis-signal.s-god { border-color:#e76f51; background:rgba(231,111,81,0.04); box-shadow:0 0 18px rgba(231,111,81,0.1); }
.qis-signal.s-elite{ border-color:#52b788; box-shadow:0 0 12px rgba(82,183,136,0.1); }
/* Grade badges */
.qis-g { display:inline-flex; align-items:center; font-size:9px; font-weight:900; padding:3px 8px; border-radius:6px; font-family:'Cairo',sans-serif; }
.qis-g-god { background:rgba(231,111,81,0.18); color:#e76f51; border:1px solid #e76f51; box-shadow:0 0 8px rgba(231,111,81,0.3); }
.qis-g-elite{ background:rgba(82,183,136,0.18); color:#52b788; border:1px solid #52b788; }
.qis-g-aplus{ background:rgba(69,123,157,0.15); color:#457b9d; border:1px solid #457b9d; }
.qis-g-a { background:rgba(82,183,136,0.12); color:#52b788; border:1px solid #52b788; }
.qis-g-b { background:rgba(231,111,81,0.12); color:#e76f51; border:1px solid #e76f51; }
.qis-g-ign { background:rgba(107,114,128,0.08);color:#6b7280; border:1px solid #374151; }
/* Engine bars */
.qis-eng { display:flex; align-items:center; gap:5px; margin-bottom:4px; font-size:9px; }
.qis-eng-lbl { color:#4a5568; font-family:'Cairo',sans-serif; width:72px; flex-shrink:0; }
.qis-eng-trk { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.06); overflow:hidden; }
.qis-eng-fil { height:100%; border-radius:2px; transition:width 0.5s ease; }
.qis-eng-val { color:#e2e8f0; font-weight:700; font-family:'Cairo',monospace; font-size:9px; min-width:30px; text-align:left; }
/* Filter tags */
.qt-ok { display:inline-flex; align-items:center; gap:3px; font-size:8px; font-weight:700; padding:2px 6px; border-radius:5px; background:rgba(82,183,136,0.1); color:#52b788; border:1px solid rgba(82,183,136,0.3); font-family:'Cairo',sans-serif; }
.qt-fail{ display:inline-flex; align-items:center; gap:3px; font-size:8px; font-weight:700; padding:2px 6px; border-radius:5px; background:rgba(230,57,70,0.08); color:#e63946; border:1px solid rgba(230,57,70,0.2); font-family:'Cairo',sans-serif; }
/* RR row */
.qis-rr-row { display:flex; justify-content:space-between; align-items:center; padding:5px 9px; border-radius:8px; background:rgba(69,123,157,0.04); border:1px solid rgba(69,123,157,0.1); font-size:9px; font-family:'Cairo',monospace; flex-wrap:wrap; gap:4px; }
/* Empty state */
.qis-empty-box { text-align:center; padding:36px 20px; }