:root{
  --bg-deep:#0D1321;
  --bg-panel:#141C2E;
  --bg-panel-2:#1A2338;
  --line:#263049;
  --text-hi:#EAF0F6;
  --text-mid:#9AA7B8;
  --text-dim:#5C6779;
  --teal:#2DD4BF;
  --teal-dim:#123B37;
  --coral:#F2545B;
  --coral-dim:#3A1518;
  --amber:#E3A008;
  --amber-dim:#3A2C08;
  --up:#22C55E;
  --mw-w:250px;
  --tc-w:300px;
  --term-h:240px;
  --perf-w:360px;
}
/* ثيم فاتح — بيغيّر الألوان الهيكلية المحايدة (خلفيات/حدود/نصوص)، وكمان
   نسخة أغمق من ألوان الشراء/البيع/التحذير (teal/coral/amber/up) خصيصاً
   للوضع الفاتح — عشان لما تتستخدم كنص فوق خلفية فاتحة يفضل التباين كويس
   (النسخة الأصلية الفاتحة مصممة للنص فوق خلفية غامقة). منفصل تماماً عن
   مُنتقي الألوان التمييزية (زرار 🎨) اللي بيفضل شغّال زي ما هو. */
:root[data-theme="light"]{
  --bg-deep:#F2F4F8;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#EEF1F6;
  --line:#DCE2EC;
  --text-hi:#131B2C;
  --text-mid:#3D4A60;
  --text-dim:#67748A;
  --teal:#0C8C7F;
  --coral:#C4313A;
  --amber:#A8710A;
  --up:#16A34A;
  --teal-dim:#D8F6F1;
  --coral-dim:#FCE2E3;
  --amber-dim:#FBEACC;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg-deep);color:var(--text-hi);font-family:'IBM Plex Sans Arabic',sans-serif;overflow:hidden;}
/* صفر بخط مائل (Slashed Zero) بدل النقطة الافتراضية في JetBrains Mono —
   بيتفرّق بصريًا عن الرقم 8 بشكل أوضح (النقطة لوحدها ممكن تتلخبط مع لفّة
   الـ8 خصوصًا مع خط سميك). موروثة (inherited) لكل الصفحة، مفيش تأثير على
   الخطوط التانية اللي مالهاش الميزة دي أصلاً. */
:root{font-feature-settings:"zero" 1;}

/* ===================== شكل التطبيق العام ===================== */
.app-shell{height:100vh;display:flex;flex-direction:column;}

/* ===================== الشريط العلوي ===================== */
.topbar{
  flex:none;display:flex;align-items:center;gap:22px;
  padding:10px 18px;background:var(--bg-panel);border-bottom:1px solid var(--line);
  direction:ltr; /* يضمن ترتيب العناصر يسار-لِيمين ثابت داخل الشريط */
}
.topbar-left{display:flex;align-items:center;gap:12px;direction:ltr;flex:none;}
.brand{display:flex;align-items:center;gap:8px;}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#1c8e82);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;color:#04201C;font-size:14px;}
.brand-name{font-family:'Space Grotesk';font-size:15px;font-weight:600;letter-spacing:.2px;white-space:nowrap;}
.brand-name span{color:var(--teal);}
.pill{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-family:'JetBrains Mono';font-size:11px;color:var(--text-mid);white-space:nowrap;}
/* font-weight:500 (مش 600) عمدًا — خط JetBrains Mono المحمّل من Google
   Fonts فيه بس أوزان 400/500/700 (شايفهم في index.html)، فطلب 600 كان
   بيخلي المتصفح "يخترع" Bold مصطنع (تكثيف بصري بدون خط حقيقي بالوزن ده)
   بيضخّم الأرقام ويخلي الصفر يقرب من شكل الـ8 — 500 وزن حقيقي محمّل فعلاً. */
#clockPill{font-size:13px;color:var(--text-hi);font-weight:500;padding:5px 10px;letter-spacing:.4px;}
.pill.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}

/* Maximize button icon drawn with CSS instead of an emoji — codepoints
   like 🗖/🗗 only have a "text" (non-colorful) presentation in a lot of
   fonts, and inherit the dim text-mid color, making them nearly invisible.
   A bordered square in a fixed, brighter color renders correctly in every
   browser, no font/emoji-support gamble. */
.maximize-pill{display:flex;align-items:center;justify-content:center;padding:6px 11px;color:var(--text-hi);}
.maximize-pill.on{color:var(--teal);}
.maximize-icon{position:relative;display:inline-block;width:12px;height:12px;}
.maximize-icon::before{content:"";position:absolute;inset:0;border:1.7px solid currentColor;border-radius:2px;}
.maximize-pill.on .maximize-icon::before{width:9px;height:9px;top:auto;bottom:0;left:0;right:auto;}
.maximize-pill.on .maximize-icon::after{content:"";position:absolute;width:9px;height:9px;top:0;right:0;border:1.7px solid currentColor;border-radius:2px;background:var(--bg-panel-2);}

/* "🧩 Panels" dropdown — a small menu off the pill button itself, with a
   show/hide toggle for each side/bottom panel (instead of scattered
   separate ✕ buttons). */
.panels-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;
  padding:6px;min-width:190px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  direction:ltr;
}
.panels-menu.show{display:block;}
.panels-menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--text-mid);white-space:nowrap;
}
.panels-menu-item:hover{background:var(--bg-panel-2);color:var(--text-hi);}
.panels-menu-check{font-family:'JetBrains Mono';font-size:11px;color:var(--teal);width:14px;text-align:center;}
.panels-menu-sep{height:1px;background:var(--line);margin:6px 4px;}

/* "🎛️ Timeframe & Indicators" dropdown — same idea as the panels menu, but
   holds the timeframe and technical indicator buttons themselves (instead
   of leaving them always visible/horizontally scrollable in the top bar),
   to save horizontal space and match the other top-bar dropdowns' look. */
.chart-settings-menu{
  /* right:0 (مش left:0) عمدًا — الزرار ده بيقعد أقصى يمين topbar-center
     (قريب من حافة الشاشة اليمنى)، فلو المنسدلة اتفتحت لليمين (left:0)
     كانت بتفيض بره حدود الشاشة المرئية. right:0 بيخليها تفتح لليسار
     (تدخل في المساحة الفاضية) وتفضل كاملة ظاهرة دايمًا. */
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:50;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;
  padding:12px;width:340px;max-width:80vw;box-shadow:0 8px 24px rgba(0,0,0,.35);
  direction:ltr;cursor:default;white-space:normal;
}
.chart-settings-menu.show{display:block;}
.chart-settings-label{font-size:13px;font-weight:700;color:var(--text-hi);margin-bottom:8px;}
.chart-settings-sep{height:1px;background:var(--line);margin:12px 0;}
/* Buttons inside the menu wrap across multiple lines (instead of a single
   horizontally-scrolling row like they had in the top bar) — the menu has
   a fixed width so there's no need to scroll here. */
.chart-settings-menu .control-group{flex-wrap:wrap;}

/* flex-wrap:wrap — on a narrow window, if the playback group + the
   "Timeframe & Indicators" button don't both fit on one line, the button
   (the last item, lower priority than playback controls) wraps to a
   second line instead of overflowing past the edge of the screen
   (chartSettingsMenuBtn never shrinks — flex:none — so its label text
   never gets visually clipped). */
.topbar-center{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;min-width:0;}
/* Play/pause + speed and "Latest Available" — kept outside the scrollable
   area (topbar-scroll-area) on purpose, so they stay visible no matter how
   many timeframe/indicator buttons trigger horizontal scrolling there. */
.topbar-fixed-controls{display:flex;align-items:center;gap:18px;flex:none;}
/* flex:none — without it, the "🎛️ Timeframe & Indicators" button (the last
   item in the flexible topbar-center) would shrink when space got tight
   (now that the old scrollable area that used to absorb the overflow is
   gone), visibly clipping its own label text. */
#chartSettingsMenuBtn{flex:none;}
.control-group{display:flex;align-items:center;gap:8px;flex:none;}
.control-sep{width:1px;height:26px;background:var(--line);flex:none;}

.play-btn{width:32px;height:32px;border-radius:50%;background:var(--teal);border:none;color:#04201C;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.step-btn{width:32px;height:32px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);font-family:'JetBrains Mono';font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;}
.step-btn:hover{border-color:var(--teal);color:var(--teal);}
.step-btn:active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.speed-chip{font-family:'JetBrains Mono';font-size:11px;padding:6px 10px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);cursor:pointer;flex:none;}
#timeframeRow .speed-chip{font-size:13px;font-weight:700;padding:7px 12px;}
.speed-chip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.progress-track{width:80px;height:4px;background:#232D42;border-radius:3px;overflow:hidden;flex:none;}
.progress-fill{height:100%;background:var(--teal);}

.ind-row{display:flex;gap:6px;flex-wrap:nowrap;}
.ind-chip{flex:none;font-family:'JetBrains Mono';font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:7px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);cursor:pointer;white-space:nowrap;}
.ind-chip.on{background:var(--amber-dim);border-color:var(--amber);color:var(--amber);}
.ind-chip:hover{color:var(--text-hi);}

/* ===================== مساحة العمل: 3 أعمدة ===================== */
/* --mw-col/--mw-gap and --tc-col/--tc-gap get zeroed (0px) from JS when the
   user hides Market Watch / the trade panel from the "🧩 Panels" menu —
   otherwise they take the normal value (panel width from the resizer + a
   10px gap). This lets the chart column (minmax(280px,1fr)) automatically
   claim the freed space without rebuilding grid-template-columns from JS. */
.workspace{
  flex:1;min-height:0;display:grid;
  grid-template-columns: var(--mw-col,var(--mw-w,250px)) var(--mw-gap,10px) minmax(280px,1fr) var(--tc-gap,10px) var(--tc-col,var(--tc-w,300px));
  gap:0;padding:10px 10px 4px;
  direction:ltr; /* يضمن أن يكون ترتيب: يسار = مراقبة السوق، وسط = الشارت، يمين = لوحة التداول */
}
/* لما تبويب "تحليل الأداء" يكون مفعّل، بيتضاف عمود سادس أقصى اليمين بدل ما
   يتعرض محتواه في اللوحة السفلية (Terminal) */
.workspace.perf-open{
  grid-template-columns: var(--mw-col,var(--mw-w,250px)) var(--mw-gap,10px) minmax(280px,1fr) var(--tc-gap,10px) var(--tc-col,var(--tc-w,300px)) 10px var(--perf-w,360px);
}
/* Explicit positions (instead of relying on DOM order/auto-placement) —
   needed because when Market Watch or the trade panel is hidden via
   display:none (from applyPanelVisibility), grid auto-placement drops that
   item from the calculation entirely and shifts everything else into its
   place (the chart column was jumping into the now-empty first 0px
   column). These numbers must match the track order in grid-template-columns above exactly.
   1=Market Watch  2=its resizer  3=chart  4=trade panel resizer  5=trade panel  7=performance (6 is the fixed gap) */
.market-watch{grid-column:1;}
#resizerMw{grid-column:2;}
.chart-col{grid-column:3;}
#resizerTc{grid-column:4;}
.trade-col{grid-column:5;}
#resizerPerf{grid-column:6;}
.perf-col{grid-column:7;}

/* ----- مقابض تحجيم اللوحات (يسار/يمين/اللوحة السفلية) ----- */
.resizer{position:relative;background:transparent;}
.resizer-v{cursor:col-resize;}
.resizer-v::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line);transform:translateX(-50%);}
.resizer-v:hover::after{background:var(--teal);width:2px;}
.resizer-h{cursor:row-resize;flex:0 0 8px;margin:0 10px;}
.resizer-h::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);transform:translateY(-50%);}
.resizer-h:hover::after{background:var(--teal);height:2px;}
body.resizing-col{cursor:col-resize !important;user-select:none;}
body.resizing-row{cursor:row-resize !important;user-select:none;}
body.resizing-col .resizer-v::after, body.resizing-row .resizer-h::after{background:var(--teal);}

/* ----- عمود يسار: مراقبة السوق ----- */
.market-watch{
  direction:ltr;display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.market-watch-head{flex:none;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--text-mid);}
.mw-head-right{display:flex;align-items:center;gap:8px;}
/* Generic ✕ button to hide a whole panel (Market Watch/trade panel/bottom
   panel) — same look as .perf-col-close, just under a shared name reused
   across panels. */
.panel-close-btn{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;line-height:1;padding:2px;}
.panel-close-btn:hover{color:var(--coral);}
.mw-list{flex:1;overflow-y:auto;}
.mw-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;}
.mw-row:hover{background:var(--bg-panel-2);}
.mw-row.active{background:var(--teal-dim);}
.mw-sym{font-family:'JetBrains Mono';font-size:12px;color:var(--text-hi);}
.mw-pos-badge{display:inline-block;font-family:'IBM Plex Sans Arabic';font-size:9px;background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal);border-radius:8px;padding:1px 6px;margin-right:4px;vertical-align:middle;}
.mw-name{font-size:9.5px;color:var(--text-dim);margin-top:2px;}
.mw-vals{text-align:left;}
.mw-price{font-family:'JetBrains Mono';font-size:12px;color:var(--text-hi);}
.mw-delta{font-family:'JetBrains Mono';font-size:10px;margin-top:2px;}
.mw-delta.up{color:var(--up);}
.mw-delta.down{color:var(--coral);}

/* ----- المنتصف: الشارت ----- */
.chart-col{
  direction:ltr;display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.price-strip{flex:none;padding:10px 16px;display:flex;align-items:baseline;justify-content:flex-end;gap:10px;border-bottom:1px solid var(--line);}
.price-main{font-family:'Space Grotesk';font-size:22px;font-weight:700;}
.price-delta{font-family:'JetBrains Mono';font-size:12px;padding:2px 8px;border-radius:6px;}
/* .up/.down لون النص بس — الخلفية (badge) مقصورة على .price-delta تحديداً
   (السعر الرئيسي فوق الشارت)، عشان ماتتسربش لعناصر تانية بتستخدم نفس
   الكلاس للون بس (مراقبة السوق، سجل الصفقات، إلخ) وتاخد خلفية غير مقصودة */
.up{color:var(--up);}
.down{color:var(--coral);}
.live-loading-badge{font-size:11px;color:var(--text-dim);animation:liveLoadingPulse 1.3s ease-in-out infinite;}
@keyframes liveLoadingPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.price-delta.up{background:#0C2418;}
.price-delta.down{background:var(--coral-dim);}

.chart-wrap{flex:1 1 auto;min-height:0;position:relative;}
.chart-wrap canvas{display:block;width:100%;height:100%;}
#mainChart{cursor:grab;touch-action:none;}
#mainChart.dragging{cursor:grabbing;}

/* max-height + scroll: with every tool added over time (drawing, predict,
   zoom...) this column got taller than the chart on short viewports, and
   the last buttons (vertical zoom) were getting clipped/invisible with no
   scroll fallback. Fix: make the column vertically scrollable instead of
   silently clipping — max-height is relative to .chart-wrap's own height
   (+41px compensates for top:-49px so it reaches near the chart's bottom,
   not just its middle). */
.chart-toolbar{
  position:absolute;top:-49px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:5;
  max-height:calc(100% + 41px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
}
.chart-toolbar::-webkit-scrollbar{width:4px;}
.chart-toolbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px;}
.chart-tool-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px;color:var(--text-mid);user-select:none;}
.chart-tool-btn:hover{color:var(--text-hi);}
.chart-tool-btn.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.chart-tool-sep{height:1px;background:var(--line);margin:2px 3px;}
.chart-tool-btn.zoom-btn{flex-direction:column;line-height:1;gap:1px;font-size:11px;}
.chart-tool-btn.zoom-btn span{font-size:9px;}

.chart-trade-panel{position:absolute;top:-49px;left:46px;z-index:5;}
.chart-trade-symbol{font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;color:var(--text-hi);background:var(--bg-panel-2);border:1px solid var(--line);border-radius:5px;padding:2px 8px;margin-bottom:4px;display:inline-block;}
.chart-trade-buttons{display:flex;gap:6px;}
.chart-trade-btn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 10px;border-radius:6px;border:1px solid;cursor:pointer;font-family:'JetBrains Mono';background:var(--bg-panel-2);}
.chart-trade-btn.chart-trade-sell{border-color:var(--coral);}
.chart-trade-btn.chart-trade-buy{border-color:var(--teal);}
.chart-trade-btn .chart-trade-price{font-size:12px;font-weight:700;}
.chart-trade-btn.chart-trade-sell .chart-trade-price{color:var(--coral);}
.chart-trade-btn.chart-trade-buy .chart-trade-price{color:var(--teal);}
.chart-trade-btn .chart-trade-label{font-size:8.5px;font-weight:700;letter-spacing:.5px;}
.chart-trade-btn.chart-trade-sell .chart-trade-label{color:var(--coral);}
.chart-trade-btn.chart-trade-buy .chart-trade-label{color:var(--teal);}
.chart-trade-btn:hover{filter:brightness(1.15);}
.sub-panel{flex:0 0 130px;border-top:1px solid var(--line);}
.sub-panel canvas{display:block;width:100%;height:100%;}

/* ----- عمود يمين: لوحة التداول ----- */
.trade-col-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-hi);font-weight:600;}
.trade-col{
  direction:ltr;display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;overflow-y:auto;
}
.account-bar{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;}
.acc-row{display:flex;align-items:baseline;font-family:'JetBrains Mono';font-size:11px;color:var(--text-mid);margin-bottom:6px;}
.acc-row .acc-label{display:flex;align-items:baseline;flex:1;min-width:0;white-space:nowrap;overflow:hidden;}
.acc-row .acc-label::after{content:"";flex:1;border-bottom:1px dotted var(--line);margin:0 6px 2px;min-width:8px;}
.acc-row b{color:var(--text-hi);white-space:nowrap;flex:none;}
.health-track{height:6px;border-radius:4px;background:#232D42;overflow:hidden;margin-top:5px;}
.health-fill{height:100%;background:linear-gradient(90deg,#22C55E,var(--amber));transition:width .3s;}
.health-label{font-size:9.5px;color:var(--text-dim);margin-top:6px;line-height:1.5;}

.trade-panel{display:flex;gap:10px;}
.lot-box{flex:1;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.lot-box label{font-size:9.5px;color:var(--text-dim);display:block;margin-bottom:4px;}
.lot-box .val{font-family:'JetBrains Mono';font-size:14px;color:var(--text-hi);}
.lot-input{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;padding:0 0 1px;outline:none;}
.lot-input:hover{border-bottom-color:var(--line);}
.lot-input:focus{border-bottom-color:var(--teal);}
.lot-input::-webkit-outer-spin-button,.lot-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.lot-input[type=number]{-moz-appearance:textfield;}
.suggest{font-size:9px;color:var(--teal);margin-top:3px;}

.btn-row{display:flex;gap:10px;}
.btn{flex:1;padding:13px 0;border-radius:12px;border:none;font-family:'Space Grotesk';font-weight:600;font-size:14px;cursor:pointer;}
.buy{background:var(--teal);color:#04201C;}
.buy:hover{filter:brightness(1.08);}
.sell{background:var(--coral);color:#3A0507;}
.sell:hover{filter:brightness(1.08);}
.btn-close{width:100%;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);padding:11px 0;border-radius:10px;font-size:12.5px;font-family:'IBM Plex Sans Arabic';cursor:pointer;}
.btn-close:hover{color:var(--text-hi);border-color:var(--text-mid);}

/* ----- عمود جانبي: تحليل الأداء (يظهر بدل اللوحة السفلية لما التبويب ده مفعّل) ----- */
#resizerPerf{display:none;}
.perf-col{
  display:none;flex-direction:column;min-height:0;min-width:0;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  direction:ltr;
}
.workspace.perf-open #resizerPerf{display:block;}
.workspace.perf-open .perf-col{display:flex;}
.perf-col-head{
  flex:none;display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text-hi);font-weight:600;
}
.perf-col-close{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;line-height:1;padding:2px;}
.perf-col-close:hover{color:var(--text-hi);}
.perf-col-body{flex:1;min-height:0;overflow-y:auto;padding:14px;}
.perf-col-body .stat-grid{grid-template-columns:repeat(2,1fr);}

/* ----- تكبير الشارت ليملأ الشاشة (يخفي مراقبة السوق/لوحة التداول/تحليل
   الأداء/لوحة Terminal السفلية ومقابض تحجيمها، ويوسّع عمود الشارت لوحده) ----- */
.app-shell.chart-maximized .market-watch,
.app-shell.chart-maximized #resizerMw,
.app-shell.chart-maximized .trade-col,
.app-shell.chart-maximized #resizerTc,
.app-shell.chart-maximized .perf-col,
.app-shell.chart-maximized #resizerPerf,
.app-shell.chart-maximized .terminal,
.app-shell.chart-maximized #resizerTerm{display:none !important;}
.app-shell.chart-maximized .workspace{grid-template-columns:1fr !important;}
/* Needed after adding an explicit grid-column to .chart-col (to support
   hiding individual panels) — without this, when .workspace collapses to
   a single column here, the chart's explicit grid-column:3 was looking
   for a 3rd column that no longer exists, creating an extra empty
   implicit column while the real (1fr) column stayed empty — a visible
   gap next to the chart after maximizing. */
.app-shell.chart-maximized .chart-col{grid-column:1 !important;}

/* ===================== الشريط السفلي (Terminal) ===================== */
.terminal{flex:0 0 var(--term-h,240px);min-height:0;display:flex;flex-direction:column;background:var(--bg-panel);border-top:1px solid var(--line);overflow:hidden;}
.terminal-tabs-bar{flex:none;display:flex;align-items:center;border-bottom:1px solid var(--line);direction:ltr;}
.terminal-tabs-bar .panel-close-btn{margin:0 10px;}
.terminal-tabs{flex:1;min-width:0;display:flex;direction:ltr;padding:0 8px;overflow-x:auto;}
.terminal-tab{padding:11px 18px;font-size:12.5px;color:var(--text-mid);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.terminal-tab:hover{color:var(--text-hi);}
.terminal-tab.active{color:var(--teal);border-bottom-color:var(--teal);}
.terminal-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;direction:ltr;}

.empty-state{color:var(--text-dim);font-size:12.5px;text-align:center;padding:36px 10px;}

/* تبويب: التداول الحالي — قائمة صفقات مفتوحة بشكل مضغوط شبيه بتطبيقات MT5
   (سطرين لكل صفقة: رمز/نوع/حجم، وتحته سعر الدخول ← الحالي، والربح/الخسارة
   على اليمين) — ممكن تشمل صفقات على أكتر من رمز في نفس الوقت. */
.mt-pos-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-dim);padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line);}
.mt-pos-closeall{background:none;border:none;color:var(--coral);font-size:11px;cursor:pointer;font-family:'IBM Plex Sans Arabic';padding:0;}
.mt-pos-closeall:hover{text-decoration:underline;}
.mt-pos-list{display:flex;flex-direction:column;}
.mt-pos-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);}
.mt-pos-row.viewing{background:var(--bg-panel-2);}
.mt-pos-line1{font-size:13px;color:var(--text-hi);}
.mt-pos-side{font-weight:700;}
.mt-pos-side.buy{color:var(--teal);}
.mt-pos-side.sell{color:var(--coral);}
.mt-pos-line2{font-family:'JetBrains Mono';font-size:10.5px;color:var(--text-dim);margin-top:3px;}
.mt-pos-right{display:flex;align-items:center;gap:10px;flex:none;}
.mt-pos-pnl{font-family:'JetBrains Mono';font-weight:700;font-size:13.5px;white-space:nowrap;}
.mt-pos-pnl.up{color:var(--up);}
.mt-pos-pnl.down{color:var(--coral);}
/* Clearer than the old faint-gray-until-hover state — solid red at all
   times so it reads immediately as a "close" action (like MT5's close
   buttons), not only once the mouse reaches it. */
.mt-pos-close{background:var(--coral-dim);border:1px solid var(--coral);color:var(--coral);width:26px;height:26px;flex:none;border-radius:50%;font-size:13px;font-weight:700;cursor:pointer;line-height:1;}
.mt-pos-close:hover{background:var(--coral);color:#fff;}
.mt-pos-total{text-align:left;font-size:11px;color:var(--text-dim);padding:10px 4px 0;font-family:'JetBrains Mono';}
.mt-pos-total b{font-size:13px;}

/* تبويب: سجل الصفقات */
.trade-log-list{display:flex;flex-direction:column;}
.trade-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--text-mid);}
.trade-row b{font-family:'JetBrains Mono';font-size:12.5px;}

/* تبويب: الأخبار */
.news-tab-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;}
.news-tab-head b{font-size:13px;white-space:nowrap;}
.news-date-nav{display:flex;align-items:center;gap:6px;}
.news-date-nav input[type="date"]{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 8px;color:var(--text-hi);font-size:11px;font-family:inherit;color-scheme:dark;}
:root[data-theme="light"] .news-date-nav input[type="date"]{color-scheme:light;}
.filter-btn{padding:6px 12px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);font-size:11px;display:flex;align-items:center;gap:4px;cursor:pointer;}
.filter-btn:hover{color:var(--text-hi);}
.upcoming-events-block:empty{display:none;}
.upcoming-events-block{background:var(--amber-dim);border:1px solid var(--amber);border-radius:10px;padding:10px 12px;margin-bottom:12px;}
.upcoming-head{font-size:11.5px;font-weight:600;color:var(--amber);margin-bottom:8px;}
.upcoming-row{padding:6px 0;border-top:1px solid var(--line);}
.upcoming-row:first-of-type{border-top:none;}
.upcoming-title{font-size:11.5px;color:var(--text-hi);display:block;margin-bottom:4px;}
.news-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;}
.news-item{border-radius:8px;padding:9px 10px 9px 8px;background:var(--bg-panel-2);border-right:3px solid var(--text-dim);cursor:pointer;transition:transform .12s;}
.news-item:hover{transform:translateY(-1px);}
.news-item.high{border-right-color:var(--coral);}
.news-item.med{border-right-color:var(--amber);}
.news-item.low{border-right-color:var(--text-dim);}
.news-item.hit{animation:pulse 1.1s ease-out 2;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,160,8,.5);}100%{box-shadow:0 0 0 8px rgba(227,160,8,0);}}
.news-time{font-family:'JetBrains Mono';font-size:9px;color:var(--text-dim);}
.news-title{font-size:11px;line-height:1.4;color:var(--text-hi);margin-top:4px;}

/* تبويب: الإعدادات */
.settings-grid{display:flex;flex-direction:column;gap:20px;max-width:560px;}
.settings-block .settings-title{font-size:12px;color:var(--text-mid);margin-bottom:9px;}
.lev-row,.tier-row{display:flex;gap:8px;flex-wrap:wrap;}
.lev-chip{padding:8px 15px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);font-family:'JetBrains Mono';font-size:12px;color:var(--text-mid);cursor:pointer;}
.lev-chip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.lot-stepper{display:flex;align-items:center;gap:16px;margin-bottom:10px;}
.step-btn{width:36px;height:36px;border-radius:9px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);font-size:17px;cursor:pointer;}
.step-btn:hover{border-color:var(--teal);color:var(--teal);}
.lot-stepper-val{font-family:'JetBrains Mono';font-size:16px;min-width:64px;text-align:center;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 4px;color:var(--text-hi);outline:none;}
.lot-stepper-val:focus{border-color:var(--teal);}
.lot-stepper-val::-webkit-outer-spin-button,.lot-stepper-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.lot-stepper-val[type=number]{-moz-appearance:textfield;}
.step-btn.holding{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.mini-btn{padding:9px 14px;border-radius:9px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);font-family:'IBM Plex Sans Arabic';font-size:12px;cursor:pointer;}
.appearance-row{display:flex;gap:10px;flex-wrap:wrap;}
.mini-btn:hover{color:var(--text-hi);border-color:var(--text-mid);}
.tier-chip{padding:8px 15px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);font-family:'JetBrains Mono';font-size:12px;color:var(--text-mid);cursor:pointer;}
.tier-chip.on{background:var(--amber-dim);border-color:var(--amber);color:var(--amber);}
.date-row{display:flex;gap:6px;}
.date-row select{flex:1;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);border-radius:8px;padding:7px 4px;font-family:'JetBrains Mono';font-size:11px;text-align:center;}
.gran-row{display:flex;gap:6px;margin-top:8px;}
.gran-chip{flex:1;text-align:center;padding:7px 0;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);font-size:11px;color:var(--text-mid);cursor:pointer;}
.gran-chip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.apply-btn{width:100%;margin-top:10px;padding:9px 0;border-radius:8px;border:none;background:var(--teal);color:#04201C;font-family:'IBM Plex Sans Arabic';font-weight:600;font-size:12px;cursor:pointer;}

.capital-input-row{display:flex;gap:8px;}
.capital-input-row input{flex:1;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--text-hi);font-family:'JetBrains Mono';font-size:13px;outline:none;}
.capital-input-row input:focus{border-color:var(--teal);}
.capital-input-row input::-webkit-outer-spin-button,.capital-input-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.capital-input-row input[type=number]{-moz-appearance:textfield;}
.lock-card{background:var(--bg-panel-2);border:1px dashed var(--amber);border-radius:12px;padding:24px;text-align:center;max-width:360px;margin:20px auto;}
.lock-card .icon{font-size:28px;margin-bottom:8px;}
.ai-result{background:var(--bg-panel-2);border-radius:10px;padding:12px;margin-top:10px;font-size:12px;line-height:1.8;color:var(--text-hi);white-space:pre-wrap;}
.spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* تبويب: تحليل الأداء */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;max-width:820px;}
.stat-box{background:var(--bg-panel-2);border-radius:10px;padding:14px;text-align:center;}
.stat-box .n{font-family:'JetBrains Mono';font-size:19px;font-weight:700;color:var(--text-hi);}
.stat-box .l{font-size:10px;color:var(--text-dim);margin-top:5px;}

.ai-config-block{max-width:820px;margin-top:16px;background:var(--bg-panel-2);border:1px dashed var(--line);border-radius:10px;padding:12px;}
.ai-config-title{font-size:12px;color:var(--text-hi);margin-bottom:8px;}
.ai-config-row{display:flex;gap:8px;flex-wrap:wrap;}
.ai-config-row input{flex:1;min-width:160px;background:var(--bg-panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text-hi);font-family:'JetBrains Mono';font-size:11.5px;outline:none;}
.ai-config-row input:focus{border-color:var(--teal);}

/* ----- نموذج تسجيل الدخول ----- */
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.auth-form input{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text-hi);font-size:13px;outline:none;}
.auth-form input:focus{border-color:var(--teal);}
.auth-error{color:var(--coral);font-size:11.5px;min-height:14px;}
.ai-config-hint{font-size:9.5px;color:var(--text-dim);margin-top:6px;}

/* ----- محادثة متابعة مع كوتش AI ----- */
.followup-box{margin-top:14px;max-width:820px;}
.followup-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.followup-q{align-self:flex-end;max-width:80%;background:var(--teal-dim);border:1px solid var(--teal);color:var(--text-hi);border-radius:10px 10px 2px 10px;padding:8px 12px;font-size:12px;}
.followup-a{align-self:flex-start;max-width:80%;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);border-radius:10px 10px 10px 2px;padding:8px 12px;font-size:12px;white-space:pre-line;}
.followup-input-row{display:flex;gap:8px;}
.followup-input-row input{flex:1;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text-hi);font-size:12px;outline:none;}
.followup-input-row input:focus{border-color:var(--teal);}

/* ----- تقارير AI سابقة (تقرير مستمر) ----- */
.ai-history-details{margin-top:14px;max-width:820px;}
.ai-history-details summary{cursor:pointer;font-size:11.5px;color:var(--text-mid);padding:6px 0;}
.ai-history-details summary:hover{color:var(--text-hi);}
.ai-history-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.ai-history-row{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.ai-history-head{font-size:10px;color:var(--text-dim);margin-bottom:6px;font-family:'JetBrains Mono';}
.ai-history-text{font-size:11.5px;color:var(--text-mid);white-space:pre-line;max-height:120px;overflow-y:auto;}

/* ===================== النوافذ المنبثقة (Modals) ===================== */
.overlay{position:fixed;inset:0;background:rgba(5,7,12,.72);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:100;}
.overlay.show{display:flex;}
.modal{width:460px;max-width:92vw;max-height:82vh;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.modal h3{font-family:'Space Grotesk';font-size:16px;margin:0 0 10px;}
.modal p{font-size:13px;line-height:1.7;color:var(--text-mid);margin:0 0 10px;}
.tag-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.tag{font-size:10px;padding:4px 9px;border-radius:6px;background:var(--bg-panel-2);color:var(--text-mid);}
.impact-row{display:flex;justify-content:space-around;margin:12px 0;padding:12px;background:var(--bg-panel-2);border-radius:10px;}
.impact-item{text-align:center;}
.impact-item .lbl{font-size:9.5px;color:var(--text-dim);}
.impact-item .arrow{font-size:19px;}
.close-sheet{width:100%;margin-top:6px;padding:11px 0;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text-hi);font-family:'IBM Plex Sans Arabic';cursor:pointer;}
.close-sheet:hover{border-color:var(--teal);}

/* زرار إغلاق ثابت أعلى الشيت — بيفضل ظاهر أثناء تمرير قوائم طويلة (زي
   "أحداث مشابهة") من غير الاضطرار للنزول لآخر الشيت */
.sheet-close-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-start;margin:-4px 0 6px;}
.sheet-close-x{padding:5px 12px;font-size:11px;border-radius:8px;background:var(--bg-panel);border:1px solid var(--line);color:var(--text-mid);font-family:'IBM Plex Sans Arabic';cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.sheet-close-x:hover{color:var(--coral);border-color:var(--coral);}
.stopout-badge{display:inline-block;background:var(--coral-dim);color:var(--coral);border:1px solid var(--coral);font-size:11.5px;padding:8px 13px;border-radius:8px;margin-bottom:10px;font-weight:600;}

/* ----- تنبيه استباقي قبل فتح صفقة عالية المخاطرة ----- */
.risk-warn-list{margin:10px 0;padding-left:18px;font-size:12px;color:var(--text-mid);line-height:1.8;}
.risk-warn-actions{display:flex;gap:10px;margin-top:14px;}
.risk-warn-actions button{flex:1;}
.btn-warn-continue{background:var(--amber);color:#3A2C08;border:none;padding:13px 0;border-radius:12px;font-family:'Space Grotesk';font-weight:600;font-size:14px;cursor:pointer;}
.btn-warn-continue:hover{filter:brightness(1.08);}

.filter-sheet .chip{display:inline-block;margin:3px;padding:7px 14px;border-radius:16px;background:var(--bg-panel-2);border:1px solid var(--line);font-size:12px;color:var(--text-mid);cursor:pointer;}
.filter-sheet .chip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.filter-sheet .chip.locked{opacity:.55;border-style:dashed;}
.filter-sheet .chip.locked:hover{opacity:.8;}

/* ===================== لوحة تخصيص المظهر ===================== */
.theme-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);}
.theme-row:last-of-type{border-bottom:none;}
.theme-row label{font-size:12px;color:var(--text-mid);}
.theme-row input[type=color]{width:42px;height:28px;border:none;border-radius:7px;background:none;cursor:pointer;padding:0;}
.theme-actions{display:flex;gap:8px;margin-top:14px;}
.theme-actions .close-sheet{margin-top:0;}
.copy-box{background:#0A0F1A;border:1px solid var(--line);border-radius:8px;padding:10px;font-family:'JetBrains Mono';font-size:9.5px;color:var(--text-mid);white-space:pre-wrap;max-height:130px;overflow:auto;margin-top:10px;line-height:1.6;direction:ltr;text-align:left;}

/* ===================== Toast ===================== */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);font-size:12.5px;padding:10px 18px;border-radius:20px;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;}
.toast.show{opacity:1;}

/* ===================== روزنامة الأحداث ===================== */
.calendar-modal{width:900px;}
/* Settings became a large, clear popup instead of a small tab under the
   chart — wider + a two-column grid (instead of one long single column
   like it had inside the Terminal) so it makes use of the extra space
   instead of leaving it empty. */
.settings-modal{width:820px;}
.settings-modal .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:none;align-items:start;}
.event-modal{width:560px;}

.cal-data-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.cal-year-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.cal-search-input{width:100%;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--text-hi);font-size:12.5px;outline:none;margin-bottom:10px;}
.cal-search-input:focus{border-color:var(--teal);}
.cal-year-chip{padding:6px 13px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);font-family:'JetBrains Mono';font-size:12px;color:var(--text-mid);cursor:pointer;}
.cal-year-chip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}

.cal-grid-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px;max-height:52vh;overflow-y:auto;padding-right:2px;}
.cal-month{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;padding:10px;}
.cal-month-head{font-family:'JetBrains Mono';font-size:11px;color:var(--text-mid);margin-bottom:8px;text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--text-dim);border-radius:5px;}
.cal-day.empty{visibility:hidden;}
.cal-day.has-event{cursor:pointer;color:var(--text-hi);font-weight:600;border:1px solid var(--text-dim);transition:transform .12s;}
.cal-day.has-event.high{border-color:var(--coral);background:var(--coral-dim);}
.cal-day.has-event.med{border-color:var(--amber);background:var(--amber-dim);}
.cal-day.has-event:hover{transform:scale(1.2);z-index:1;}
.cal-dot{position:absolute;top:-7px;left:-5px;font-size:9px;line-height:1;}
.cal-count{position:absolute;bottom:-6px;right:-4px;font-size:7.5px;background:var(--bg-panel);border:1px solid var(--text-dim);border-radius:6px;padding:0 3px;line-height:1.3;color:var(--text-mid);}
.cal-day.has-event.live{box-shadow:0 0 0 1px var(--coral) inset;}

/* صف مزامنة الأجندة المباشرة (Financial Modeling Prep) */
.cal-live-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.cal-live-row input[type=password]{flex:1;min-width:160px;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text-hi);font-family:'JetBrains Mono';font-size:11.5px;outline:none;}
.cal-live-row input[type=password]:focus{border-color:var(--teal);}
.cal-live-row input[type=date],.cal-live-row input[type=time]{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--text-hi);font-family:'JetBrains Mono';font-size:11.5px;outline:none;color-scheme:dark;}
.cal-live-row input[type=date]:focus,.cal-live-row input[type=time]:focus{border-color:var(--teal);}
:root[data-theme="light"] .cal-live-row input[type=date],:root[data-theme="light"] .cal-live-row input[type=time]{color-scheme:light;}
.cal-live-status{font-size:10px;color:var(--text-dim);margin-bottom:12px;}
.live-tag{border:1px solid var(--coral);color:var(--coral);}

.event-picker-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.event-picker-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:12.5px;}
.event-picker-row:hover{border-color:var(--teal);}

.event-chart-wrap{width:100%;height:180px;background:#0F1626;border-radius:10px;overflow:hidden;margin-top:10px;}
.event-chart-wrap canvas{width:100%;height:100%;display:block;}

/* ----- لعبة "توقع قبل الكشف" ----- */
.predict-box{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:10px;text-align:center;}
.predict-box p{margin:0 0 10px;font-size:12.5px;color:var(--text-mid);}
.predict-result{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12.5px;text-align:center;font-weight:600;}
.predict-result.correct{background:#0C2418;color:var(--up);border:1px solid var(--up);}
.predict-result.wrong{background:var(--coral-dim);color:var(--coral);border:1px solid var(--coral);}
.predict-score{margin-top:8px;font-size:10.5px;color:var(--text-dim);text-align:center;}

/* ----- Direction prediction on a future placeholder candle ----- */
.predict-events{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:12px;}
.predict-events.muted{color:var(--text-dim);text-align:center;}
.predict-ev-item{padding:4px 0;}
.predict-caveat{margin-top:6px;font-size:10.5px;font-weight:400;color:var(--text-dim);}
.muted{color:var(--text-dim);}

/* ----- "Schools of Technical Analysis Challenge" panel — slides in from the
   side without dimming the chart (position:fixed, fully independent of the
   .workspace Grid — same philosophy as .overlay in not conflicting with the
   chart-maximize layout, but partial-width and without a dimmed backdrop,
   so the chart behind it stays fully visible and interactive). ----- */
.pattern-quiz-drawer{
  position:fixed;top:0;bottom:0;right:0;width:380px;max-width:92vw;
  /* 55% opacity (45% see-through) + backdrop blur — the trainee needs to
     make out the target candle's shape even where it falls partly under
     the drawer, and also needs the text/buttons to stay legible over
     colored candles behind them — the blur keeps those two needs from
     fighting each other visually. */
  background:color-mix(in srgb, var(--bg-panel) 55%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-left:1px solid var(--line);
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);
  z-index:90;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;
}
.pattern-quiz-drawer.show{transform:translateX(0);}
.pqd-head{
  flex:none;display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-hi);
}
.pqd-body{flex:1;min-height:0;overflow-y:auto;padding:16px;}
.pqd-tabs{display:flex;gap:5px;margin-bottom:14px;}
.pqd-tab{flex:1;text-align:center;padding:7px 3px;border-radius:9px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-mid);font-size:10.5px;line-height:1.35;cursor:pointer;}
.pqd-tab.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.pqd-content p{font-size:12.5px;color:var(--text-mid);line-height:1.6;}
.pqd-choices{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.pqd-choice-btn{padding:11px 12px;border-radius:10px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-hi);font-family:'IBM Plex Sans Arabic';font-size:12.5px;text-align:left;cursor:pointer;}
.pqd-choice-btn:hover{border-color:var(--teal);color:var(--teal);}
.pqd-mystats{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--text-dim);}
.pqd-browse-list{margin-top:12px;}
.pqd-browse-cat{margin-bottom:14px;}
.pqd-browse-cat-label{font-size:11px;color:var(--text-dim);font-weight:600;margin-bottom:6px;}
.pqd-browse-row{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;margin-bottom:5px;border-radius:9px;background:var(--bg-panel-2);
  border:1px solid var(--line);color:var(--text-hi);font-family:'IBM Plex Sans Arabic';
  font-size:12px;text-align:left;cursor:pointer;
}
.pqd-browse-row:hover{border-color:var(--teal);color:var(--teal);}
.pqd-browse-row.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.pqd-browse-row:disabled{opacity:.4;cursor:not-allowed;}
.pqd-browse-n{font-family:'JetBrains Mono';font-size:10.5px;color:var(--text-dim);}
.pqd-stats-table-wrap{overflow-x:auto;}
.pqd-stats-table{width:100%;border-collapse:collapse;font-size:11px;}
.pqd-stats-table th,.pqd-stats-table td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;}
.pqd-stats-table th{color:var(--text-dim);font-weight:600;}
.pqd-stats-table td:first-child,.pqd-stats-table th:first-child{text-align:left;white-space:normal;}

/* ----- مقارنة رد فعل الأزواج على نفس الحدث ----- */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px;}
.compare-cell{background:#0F1626;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.compare-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-size:11px;font-family:'JetBrains Mono';}
.compare-head .up{color:var(--up);}
.compare-head .down{color:var(--coral);}
.compare-cell canvas{width:100%;height:70px;display:block;}

.similar-summary{background:var(--teal-dim);border:1px solid var(--teal);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:12.5px;line-height:1.6;}
.similar-summary .up{color:var(--up);}
.similar-summary .down{color:var(--coral);}
.similar-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.similar-row{background:var(--bg-panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.similar-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.similar-date{font-size:11px;color:var(--text-mid);}
.similar-date .tag{font-size:12px;padding:4px 8px;}
.similar-row .tag-row{gap:5px;margin-bottom:0;}
.similar-row .tag{font-size:12px;padding:4px 8px;}
.similar-row .tag.up{color:var(--up);border:1px solid var(--up);}
.similar-row .tag.down{color:var(--coral);border:1px solid var(--coral);}
.similar-row .tag.neutral{color:var(--text-mid);border:1px solid var(--text-dim);}
.similar-jump-btn{padding:5px 9px;font-size:11px;border-radius:7px;}

/* ===================== Arena ===================== */
.arena-list{max-height:50vh;overflow-y:auto;margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.arena-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg-panel-2);font-size:12.5px;}
.arena-row.me{background:var(--teal-dim);border:1px solid var(--teal);font-weight:700;}
.arena-rank{font-family:'JetBrains Mono';color:var(--text-dim);width:34px;flex:none;}
.arena-name{flex:1;color:var(--text-hi);}
.arena-ret{font-family:'JetBrains Mono';font-weight:700;}
.arena-ret.up{color:var(--up);}
.arena-ret.down{color:var(--coral);}