/* ===== TsrTrader — style.css ===== */

/* ============================================================
   Z-INDEX LAYER ARCHITECTURE (Enterprise Layer System)
   ------------------------------------------------------------
   Single source of truth for every stacking-order value used
   across the application. Every numeric value below is IDENTICAL
   to the hardcoded value it replaces — nothing about the visual
   stacking order has changed. This block only externalizes those
   numbers into named, documented tokens so the layering intent
   is explicit and auditable going forward.

   Organized into 9 semantic tiers (lowest → highest). Within a
   tier that historically contained more than one distinct value,
   sub-tokens preserve the exact original relative order — no two
   components were merged onto a shared number unless they already
   shared that exact number in the original file.
   ============================================================ */
:root {

  /* ---- Tier 0 — BASE: in-flow / decorative UI (sliders, radial menu geometry) ---- */
  --z-base: 1;               /* was 1  — .lp-slider-track, .rm-center */
  --z-base-2: 2;              /* was 2  — .lp-slider-dot, .lp-slider-fill, .rm-item */
  --z-base-5: 5;               /* was 5  — input[type=range].lp-slider */
  --z-base-10: 10;              /* was 10 — .b-bottom-btn, .bi-bottom-btn, .no-type-container */

  /* ---- Tier 1 — HEADER: sticky top header / bottom navigation ---- */
  --z-header: 20;             /* was 20 — .app-header, .bottom-nav, .ind-header-bar */

  /* ---- Tier 2 — DROPDOWN: inline anchored dropdowns & chart-layer overlays ---- */
  --z-chart-loader: 500;               /* was 500 — #chart-loader */
  --z-chart-loader-content: 501;        /* was 501 — .loader-top-bar */

  /* ---- Tier 3 — MENU: transient bars, capsules, slide-in panels ---- */
  --z-menu: 998;                /* was 998  — .quick-trade-bar */
  --z-menu-overlay: 999;         /* was 999  — .drawer-overlay */
  --z-menu-panel: 1000;           /* was 1000 — .side-drawer, .chart-info */

  /* ---- Tier 3b — TOOLTIP: chart price/crosshair label ---- */
  --z-tooltip: 1000;             /* was 1000 — .custom-crosshair-label */

  /* ---- Tier 4 — OVERLAY: full-screen modal backdrops ---- */
  --z-overlay: 9999995;               /* was 2000 — .tf-modal-overlay. 🔧 TIMEFRAME WHEEL Z-INDEX FIX: raised above landscape-nav.js's #tsr-nav-fab (9999990) and #tsr-nav-capsule (9999989) — those are position:fixed and stay visible/interactive in landscape mode (independently of tf-overlay's own open/closed state), which previously sat ON TOP of the timeframe modal and intercepted taps meant for its .tf-btn buttons. --z-overlay is used solely by .tf-modal-overlay (confirmed: only match for "var(--z-overlay)" in this file), so this only affects the timeframe modal — no other selector reads this token. */
  --z-overlay-medium: 5000;         /* was 5000 — .demo-modal-overlay */
  --z-overlay-high: 6000;            /* was 6000 — .pwd-modal-overlay */
  --z-sheet-overlay: 8000;            /* was 8000 — .bulk-overlay */
  --z-sheet: 8001;                     /* was 8001 — .bulk-sheet */

  /* ---- Tier 5 — MODAL: system-priority overlays ---- */
  --z-modal: 9000;                  /* was 9000 — #no-connection-overlay, .modify-modal */
  --z-modal-high: 9500;              /* was 9500 — #ringtone-overlay */
  --z-modal-top: 9999;                /* was 9999 — flatpickr calendar, .acc-ctx-overlay, #login-toast, #symbol-dropdown/#second-sym-dropdown */
  --z-modal-critical: 10000;           /* was 10000 — .broker-not-found-overlay, .j-dropdown-menu, .edit-quote-item.dragging, .acc-ctx-menu */

  /* ---- Tier 6 — DIALOG: high-priority stacked dialogs & pickers ---- */
  --z-dialog: 20000;                 /* was 20000  — .tsr-picker-overlay */
  --z-dialog-high: 30000;             /* was 30000  — .tsr-dialog-overlay */
  --z-dialog-theme: 50000;             /* was 50000  — .theme-switch-overlay */
  --z-dialog-lock: 98000;               /* was 98000  — #lock-screen */
  --z-dialog-pin: 99000;                 /* was 99000  — #pin-setup-overlay */
  --z-dialog-top: 99999;                  /* was 99999  — #splash-screen, #view-new-order, .pin-setup-back, .line-action-capsule */
  --z-dialog-critical: 100000;             /* was 100000 — .tf-limit-overlay, .cp-overlay */

  /* ---- Tier 7 — CRITICAL: absolute top-most application layers ---- */
  --z-critical: 999999;               /* was 999999   — .floating-action-container, .radial-menu, #tsr-welcome-overlay */
  --z-critical-high: 1000000;          /* was 1000000  — #magnifier-glass/-2, .charts-mgr-overlay */
  --z-critical-max: 9999999;            /* was 9999999  — #tsr-script-overlay */
}

/* القسم 1: الأنماط الأساسية (كانت داخل أول <style> في head) */
   /* Cross-browser base reset */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { -webkit-overflow-scrolling: touch; -ms-overflow-style: none; }
canvas { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* iOS safe area support */
.app-container { padding-top: constant(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); }
.bottom-nav { padding-bottom: constant(safe-area-inset-bottom); }


/* Broker Not Found Modal */
.broker-not-found-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-modal-critical);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.broker-not-found-overlay.show {
  display: flex; opacity: 1;
}
.bnf-modal {
  background: var(--bg2); /* يتغير لونه تلقائياً مع الفاتح والداكن */
  width: 85%; max-width: 320px;
  border-radius: 20px;
  padding: 24px 24px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  transform: scale(0.95); transition: transform 0.2s;
}
.broker-not-found-overlay.show .bnf-modal {
  transform: scale(1);
}
.bnf-title {
  font-size: 19px; font-weight: 500; color: var(--text); margin-bottom: 14px;
}
.bnf-text {
  font-size: 15px; color: var(--text2); line-height: 1.5; margin-bottom: 24px;
}
.bnf-actions {
  display: flex; justify-content: flex-end;
}
.bnf-ok-btn {
  color: #4a90e2; font-size: 15px; font-weight: 700; padding: 8px 12px; cursor: pointer; transition: opacity 0.2s;
}
.bnf-ok-btn:active {
  opacity: 0.6;
}


/* توسيط نافذة التاريخ (Date Picker) في منتصف الشاشة */
.flatpickr-calendar.open:not(.inline) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--z-modal-top) !important; /* لضمان ظهورها فوق كل شيء */
  margin: 0 !important;
  box-shadow: 0 15px 50px rgba(0,0,0,0.8) !important; /* ظل جميل للنافذة */
}

/* إخفاء السهم الصغير الذي يظهر عادة أعلى النافذة */
.flatpickr-calendar:not(.inline)::before,
.flatpickr-calendar:not(.inline)::after {
  display: none !important;
}


/* Flatpickr dynamic theme override */
      .flatpickr-calendar{background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:0 10px 30px rgba(0,0,0,0.2)!important;}
      .flatpickr-months,.flatpickr-weekdays{background:var(--bg2)!important;}
      .flatpickr-month{color:var(--text)!important;fill:var(--text)!important;}
      .flatpickr-current-month input.cur-year,.flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--text)!important;background:var(--bg2)!important;}
      .flatpickr-weekday{color:var(--text4)!important;background:var(--bg2)!important;}
      .flatpickr-day{color:var(--text2)!important;border-radius:50%!important;}
      .flatpickr-day:hover{background:var(--bg3)!important;border-color:var(--bg3)!important;color:var(--text)!important;}
      .flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:#4a90e2!important;border-color:#4a90e2!important;color:#fff!important;}
      .flatpickr-day.inRange{background:rgba(74,144,226,.15)!important;border-color:rgba(74,144,226,.15)!important;color:var(--text)!important;}
      .flatpickr-day.today{border-color:#4a90e2!important;}
      .flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--text5)!important;}
      .flatpickr-prev-month svg,.flatpickr-next-month svg{fill:var(--text4)!important;}
      .flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg{fill:var(--text)!important;}
      .flatpickr-innerContainer{background:var(--bg2)!important;}
      .dayContainer{background:var(--bg2)!important;}
      .flatpickr-rContainer{background:var(--bg2)!important;}


/* واجهة خصائص الخط (Line Properties) الجديدة المتوافقة مع الوضعين */
.lp-section-title { font-size: 14px; font-weight: 700; color: var(--text); padding: 25px 20px 10px; text-transform: uppercase; }
.lp-group { display: flex; flex-direction: column; padding: 0 20px; }
.lp-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); min-height: 50px; }
.lp-label { color: var(--text3); font-size: 14px; flex-shrink: 0; }
.lp-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; text-align: right; }
.lp-val { color: var(--text); font-size: 15px; }

/* الدائرة متساوية ومثالية */
.lp-color-circle { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 50%; border: 2px solid var(--text); cursor: pointer; flex-shrink: 0; box-sizing: border-box; }

/* شريط السحب المخصص بالنقاط */
.lp-slider-container { flex: 1; position: relative; display: flex; align-items: center; height: 30px; margin-left: 20px; }
.lp-slider-track { position: absolute; width: 100%; height: 2px; background: var(--bg4); z-index: var(--z-base); display: flex; justify-content: space-between; align-items: center; }
.lp-slider-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text4); z-index: var(--z-base-2); }
.lp-slider-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 2px; background: #4a90e2; z-index: var(--z-base-2); pointer-events: none; transition: width 0.1s; }
input[type=range].lp-slider { -webkit-appearance: none; width: 100%; background: transparent; position: relative; z-index: var(--z-base-5); margin: 0; }
input[type=range].lp-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 4px; background: #4a90e2; border-radius: 2px; cursor: pointer; }
input[type=range].lp-slider:focus { outline: none; }

/* أزرار ستايل الخط */
.lp-style-tabs { display: flex; background: var(--bg3); border-radius: 8px; overflow: hidden; margin-top: 20px; height: 44px; border: 1px solid var(--border); }
.lp-style-tab { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border-right: 1px solid var(--border); transition: background 0.2s; }
.lp-style-tab:last-child { border-right: none; }
.lp-style-tab.active { background: var(--bg4); }


/* --- MT5 JOURNAL ELITE STYLING --- */
.journal-list {
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
    padding: 8px 12px;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 10.5px;
    user-select: text;
    -webkit-overflow-scrolling: touch;
}

.journal-entry {
    display: flex;
    gap: 12px;
    margin-bottom: 2px;
    padding: 1px 0;
    white-space: pre-wrap;
    border-bottom: 1px solid rgba(255,255,255,0.01);
}
:root.light .journal-entry { border-bottom: 1px solid #fafafa; }

.j-time { color: #999; min-width: 95px; flex-shrink: 0; }
.j-msg { color: #efefef; line-height: 1.3; flex: 1; }
:root.light .j-msg { color: #111; }

/* ألوان الفئات (Categories) كما في MT5 */
.cat-terminal { color: #ffffff; font-weight: 500; }
.cat-network  { color: #00ff88; font-weight: 500; }
.cat-trades   { color: #4a90e2; font-weight: 500; }
.cat-accounts { color: #f1c40f; font-weight: 500; }
.cat-error    { color: #ff4757; font-weight: bold; }
.cat-chart    { color: #a55eea; font-weight: 500; }

/* تنسيق قائمة التواريخ المنسدلة */
.j-dropdown-menu {
    position: absolute;
    top: 60px;
    right: 15px;
    background: #2c2c2e;
    border: 1px solid #444;
    border-radius: 8px;
    display: none;
    flex-direction: column;
    z-index: var(--z-modal-critical);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    min-width: 180px;
    overflow: hidden;
}
:root.light .j-dropdown-menu { background: #fff; border-color: #ddd; }

.j-dropdown-item {
    padding: 14px 16px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #2c2c2e;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
:root.light .j-dropdown-item { color: #000; border-bottom-color: #eee; }

.j-dropdown-item:active { background: #2c2c2e; }
.j-dropdown-item.active { color: #4a90e2; font-weight: bold; }
.j-dropdown-item.active::after {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
}

/* واجهة السحب الفوري - تصميم MT5 */
.edit-quote-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    min-height: 64px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    touch-action: pan-y;
}


.edit-quote-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.edit-quote-name { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.edit-quote-desc { font-size: 13px; color: var(--text3); }
.edit-quote-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    margin-right: 14px;
    flex-shrink: 0;
    pointer-events: none;
}


.edit-quote-handle {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 3.5px;
    cursor: move;
    opacity: 0.55;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.edit-quote-handle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--text2);
    border-radius: 1px;
}

/* شكل البطاقة أثناء السحب */
.edit-quote-item.dragging {
    opacity: 0.9;
    background: var(--bg2) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    border-color: transparent;
    transform: scale(1.02);
    z-index: var(--z-modal-critical);
}


/* نافذة Line type بدون أنيميشن ومطابقة للصورة */
.tsr-dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: var(--z-dialog-high); display: none; align-items: center; justify-content: center;
}
.tsr-dialog-overlay.show { display: flex; }
.tsr-dialog-card {
    background: var(--bg2); width: 85%; max-width: 310px;
    border-radius: 12px; padding: 22px 24px; box-shadow: 0 15px 50px rgba(0,0,0,0.5);
}
.tsr-dialog-title {
    font-size: 21px; font-weight: 500; color: var(--text); margin-bottom: 18px;
}
.tsr-dialog-option {
    display: flex; align-items: center; padding: 12px 0; cursor: pointer; gap: 20px;
}
.tsr-radio-circle {
    width: 20px; height: 20px; border: 2px solid var(--text4); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.tsr-dialog-option.active .tsr-radio-circle { border-color: #4a90e2; border-width: 2px; }
.tsr-radio-inner {
    width: 10px; height: 10px; background: #4a90e2; border-radius: 50%;
    display: none;
}
.tsr-dialog-option.active .tsr-radio-inner { display: block; }
.tsr-dialog-text { font-size: 16px; color: var(--text2); }
.tsr-dialog-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
.tsr-dialog-cancel {
    color: #4a90e2; font-weight: 700; font-size: 15px; padding: 8px; cursor: pointer;
}


/* نافذة الزوم - يمكنك التحكم بالحجم من متغير JS بالأسفل */
#magnifier-glass, #magnifier-glass-2 {
    position: absolute;
    border: 2px solid #4a90e2 !important;
    background: #000;
    top: 34px; /* أسفل اسم الزوج */
    left: 10px;
    z-index: var(--z-critical-high);
    display: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0px;
}


/* ✅ توحيد موضع قائمة الأسواق لكلا الشارتين */
#symbol-dropdown { top: 40px !important; }
#second-sym-dropdown { top: 40px; }

.pair-name, .pair-arrow {
    color: var(--accent) !important;
}

/* 🛠️ FIX: حذف الخط الزائد تحت آخر عنصر فقوائم الأسواق (شارت 1 وشارت 2) - فالفاتح والداكن */
#symbol-dropdown .symbol-dropdown-item:last-child,
#second-sym-dropdown .symbol-dropdown-item:last-child,
:root.light #symbol-dropdown .symbol-dropdown-item:last-child,
:root.light #second-sym-dropdown .symbol-dropdown-item:last-child,
:root.light #symbol-dropdown > .symbol-dropdown-item:last-child,
:root.light #second-sym-dropdown > .symbol-dropdown-item:last-child {
    border-bottom: none !important;
}

.bottom-nav {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
:root.light .bottom-nav {
    border-top-color: rgba(0,0,0,0.08) !important;
}

/* ✅ خلي العجلة تبان فايضة فوق البوردر */
.chart-window-box.rm-active {
    overflow: visible !important;
}



/* القسم 2: الأنماط الرئيسية للتطبيق (كانت داخل ثاني <style> في head) */


/* ============================================================
   TSR POP-UPS BLUE THEME (ONE BLOCK TO DELETE)
   تطبيق اللون الأزرق والنصوص البيضاء على النوافذ المنبثقة فقط - بدون ظلال
   ============================================================ */

:root.light #symbol-dropdown, :root.light #second-sym-dropdown, :root.light #no-sym-dropdown,
:root.light .generic-sym-dropdown,
:root.light .price-popup-menu, :root.light #price-popup-menu-2, :root.light .tf-modal,
:root.light #hist-period-dropdown, :root.light #hist-sort-dropdown, :root.light #hist-sym-dropdown,
:root.light #trade-sort-dropdown, :root.light #no-order-type-dropdown, :root.light .j-dropdown-menu,
:root.light .acc-ctx-menu, :root.light .tsr-picker-card, :root.light .charts-mgr-card,
:root.light .bnf-modal, :root.light .tsr-dialog-card {
    background-color: rgba(45, 128, 246, 0.98) !important; /* لون العجلة الجديد */
    box-shadow: none !important;
    border: none !important;
}

/* توحيد كل النصوص والأيقونات داخل النوافذ للون الأبيض */
:root.light #symbol-dropdown *, :root.light #second-sym-dropdown *, :root.light #no-sym-dropdown *,
:root.light .generic-sym-dropdown *,
:root.light .tf-modal *, :root.light #hist-period-dropdown *,
:root.light #hist-sort-dropdown *, :root.light #hist-sym-dropdown *, :root.light #trade-sort-dropdown *,

:root.light #no-order-type-dropdown *, :root.light .j-dropdown-menu *, :root.light .acc-ctx-menu *,
:root.light .tsr-picker-card *, :root.light .charts-mgr-card *, :root.light .bnf-modal *,
:root.light .tsr-dialog-card * {
    color: #ffffff !important;
}


/* معالجة خلفية الملاحظة أسفل نافذة الفريمات لمنع التشوه الأبيض */
:root.light .tf-footer-note {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

/* تنظيف شكل الأزرار والخطوط الفاصلة */
:root.light .tf-btn { background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; }
:root.light .tf-btn.active { background-color: #ffffff !important; color: #4a90e2 !important; }


    :root.light .symbol-dropdown-item, :root.light .acc-ctx-item, :root.light .no-ot-item, :root.light .cm-divider {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}


:root.light .no-ot-item {
  border-bottom: 1px solid rgba(255,255,255,0.35) !important;
}
:root.light .no-ot-item:last-child {
  border-bottom: none !important;
}

:root.light .j-dropdown-menu *,
:root.light .acc-ctx-menu *,
:root.light .tsr-picker-card *,
:root.light .cm-divider {
  border: none !important;
  border-bottom: none !important;
}


/* سطر استهداف قوائم العمليات الجماعية (Bulk) وسياق التداول - احذفه للإلغاء */
:root.light .bulk-sheet, :root.light .bulk-header, :root.light .bulk-item, :root.light .trade-ctx-header, :root.light .trade-ctx-title, :root.light .trade-ctx-sub { background-color: rgba(74, 144, 226, 0.98) !important; color: #ffffff !important; border: none !important; border-bottom: none !important; box-shadow: none !important; } :root.light .bulk-header, :root.light .trade-ctx-header { background-color: rgba(0, 0, 0, 0.1) !important; }


/* تنسيق الإطارات: نحيف جداً، احترافي، وبدون رجفة */
.chart-main {
    padding: 3px !important;
    box-sizing: border-box !important;
    gap: 3px !important;
}
.chart-window-box {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: none !important;
}


/* TSR CHARTS LAYOUT ENGINE - Horizontal / Vertical Tiling */
.chart-main.layout-horizontal {
    flex-direction: row !important;
}
.chart-main.layout-horizontal .chart-window-box {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
}
.chart-main.layout-horizontal #chart-resizer {
    display: none !important;
}
/* Single-chart full-bleed mode (class toggled by TSR_syncWorkspaceLayout from the
   live chart count): no workspace padding/gap and no wrapper border, so the lone
   chart uses the whole area between header and bottom nav. Multi-chart keeps the
   padding, gap and borders above. Specificity beats the ID-scoped border rules. */
.chart-main.tsr-single-chart {
    padding: 0 !important;
    gap: 0 !important;
}
#view-charts .chart-main.tsr-single-chart > [id*="chart-wrapper"] {
    border-width: 0 !important;
    border-color: transparent !important;
}
/* منع أي تأثيرات بصرية تؤخر الرندر */
.chart-window-box * {
    transition: none !important;
}


/* تصميم قائمة الاختيار المنبثقة */
.tsr-picker-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: var(--z-dialog); display: none; align-items: center; justify-content: center;
}
.tsr-picker-overlay.show { display: flex; }
.tsr-picker-card {
    background: var(--bg2); width: 85%; max-width: 300px;
    border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid var(--border); overflow-y: auto; max-height: 80vh;
}
.tsr-picker-item {
    padding: 14px 20px; color: var(--text); text-align: right;
    border-bottom: 1px solid var(--border2); cursor: pointer; font-size: 15px;
}
.tsr-picker-item:active { background: var(--bg3); }


*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;font-variant-numeric:tabular-nums lining-nums;-webkit-font-feature-settings:"tnum" 1,"lnum" 1,"zero" 0;font-feature-settings:"tnum" 1,"lnum" 1,"zero" 0}

/* تحسين التجاوب الشامل لجميع الأجهزة */
:root {
  --bg:#000;--bg2:#2c2c2e;--bg3:#3a3a3c;--bg4:#48484a;--border:#3a3a3c;
  --border2:#1c1c1e;--text:#fff;--text2:#d4d4d4;--text3:#a0a0a0;
  --text4:#8e8e93;--text5:#555;--accent:#4a90e2;--header-bg:#000;
  --drawer-bg:#1c1c1e;--card-bg:#2c2c2e;--input-bg:#1a1a1a;
  --quote-bg:#000;--quote-hover:#1c1c1e;
}

/* دعم الوضع الفاتح مع التجاوب */
:root.light {
  --bg:#f0f2f5;--bg2:#fff;--bg3:#e5e7eb;--bg4:#d1d5db;--border:#e5e7eb;
  --border2:#f3f4f6;--text:#111;--text2:#374151;--text3:#6b7280;
  --text4:#9ca3af;--text5:#aab4be;--accent:#2563eb;--header-bg:#fff;
  --drawer-bg:#fff;--card-bg:#ffffff;--quote-bg:#f0f2f5;--quote-hover:#e5e7eb;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

canvas { image-rendering: auto !important; }

/* تعديل الحاويات لتناسب المتصفح والكمبيوتر */
@media (min-width: 768px) {
  .side-drawer { max-width: 350px !important; }
  .bnf-modal { max-width: 400px !important; }
  .bottom-nav { justify-content: center !important; gap: 50px; }
  .nav-item { width: 100px !important; }
}

/* دعم شاشات النوتش والحواف الحقيقية للهواتف */
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
  position: relative;
}


/* Splash */
#splash-screen{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:var(--z-dialog-top);transition:opacity .55s,visibility .55s;overflow:hidden}
#splash-screen.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{width:180px;height:180px;animation:splashPop .55s cubic-bezier(.34,1.56,.64,1) both}
.splash-logo img{width:100%;height:100%;object-fit:contain}
.splash-name{margin-top:20px;color:#fff;font-size:22px;font-weight:700;letter-spacing:1px;animation:splashFadeUp .5s ease .15s both}
.splash-tagline{margin-top:6px;color:#555;font-size:13px;animation:splashFadeUp .5s ease .25s both}
.splash-loader{margin-top:50px;width:36px;height:36px;border:3px solid #1a1a1a;border-top-color:#4a90e2;border-radius:50%;animation:splashSpin .8s linear infinite}
@keyframes splashPop{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes splashFadeUp{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes splashSpin{to{transform:rotate(360deg)}}

/* Drawer */
.drawer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:var(--z-menu-overlay);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer-overlay.active{opacity:1;visibility:visible}
.side-drawer{position:absolute;top:0;left:0;width:85%;max-width:320px;height:100%;background:var(--drawer-bg);z-index:var(--z-menu-panel);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--border)}
.side-drawer.active{transform:translateX(0)}
.drawer-header{display:flex;padding:calc(25px + env(safe-area-inset-top)) 20px 25px;border-bottom:1px solid var(--border);gap:15px;cursor:pointer;transition:background .2s}
.drawer-header:active{background:var(--bg3)}
.drawer-broker-logo{width:42px;height:42px;border-radius:10px;overflow:hidden;flex-shrink:0}
.drawer-broker-logo img{width:100%;height:100%;object-fit:cover}
.drawer-acc-info{display:flex;flex-direction:column;justify-content:center}
.d-name{color:var(--text);font-size:16px;font-weight:500;margin-bottom:2px}
.d-desc{color:var(--text3);font-size:12px;margin-bottom:8px}
.d-manage{color:var(--accent);font-size:14px;font-weight:500}
.drawer-list{padding:10px 0}
.drawer-item{display:flex;align-items:center;padding:14px 16px;margin:2px 10px;border-radius:30px;cursor:pointer;transition:background .2s}
.drawer-item:active{background:var(--bg3)}
.drawer-item.active{background:var(--radial-menu-bg, rgba(40, 40, 40, 0.95))}
:root.light .drawer-item.active{background:#F3F4F6}
.drawer-item .material-symbols-outlined{color:var(--text2);font-size:24px;margin-right:20px}
.drawer-item.active .material-symbols-outlined,
.drawer-item.active .d-text{color:var(--text)}
.drawer-item .d-text{color:var(--text);font-size:15px;font-weight:500}
.d-badge{margin-left:auto;display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700;color:#fff;border-radius:20px}
.d-badge.red{background:#e74c3c;min-width:20px;height:20px;padding:0 6px}
.d-badge.blue{background:rgba(74,144,226,.2);color:var(--accent);border:1px solid var(--accent);padding:2px 6px;font-size:10px}

/* Views */
.view-hidden{display:none!important}
.view-active{display:flex;flex-direction:column;flex:1;width:100%;overflow-y:auto;overflow-x:hidden;background:var(--bg);position:relative}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 15px 10px;color:var(--text);border-bottom:1px solid rgba(255,255,255,0.08);z-index:var(--z-header);background:var(--header-bg);flex-shrink:0;transition:background .3s,border-color .3s;position:sticky;top:0}
:root.light .app-header { border-bottom-color: rgba(0,0,0,0.08); }

.header-left{display:flex;align-items:center;gap:15px}
.menu-btn{font-size:28px;cursor:pointer;color:var(--text)}
.header-right{display:flex;align-items:center;gap:20px}
.header-right .material-symbols-outlined{font-size:24px;color:var(--text2);cursor:pointer}

/* Account Card */
.account-card-container{padding:15px}
.account-card{background:var(--card-bg); border-radius:28px; padding:25px 20px; display:flex; flex-direction:column; align-items:center; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.3); border:none; margin-bottom:12px; width:100%; box-sizing:border-box}


.ac-name{color:var(--text);font-size:17px;font-weight:700;margin-bottom:2px}
.ac-company{color:#3b82f6;font-size:13px;margin-bottom:8px}
.ac-details{color:var(--text3);font-size:12px;margin-bottom:2px}
.ac-balance{color:var(--text);font-size:22px;font-weight:500;margin:10px 0 15px;letter-spacing:.5px}
.ac-bottom-bar{width:100%;display:flex;justify-content:space-between;align-items:center}
.ac-bell-icon,.ac-more-btn{color:var(--text3);font-size:20px;cursor:pointer}
.ac-more-btn{font-size:22px;padding:4px;border-radius:50%;transition:background .2s}
.ac-more-btn:active{background:var(--bg3)}

.acc-ctx-menu {
  position: fixed; background: var(--bg2); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid var(--border);
  z-index: var(--z-modal-critical); min-width: 220px; overflow: hidden; opacity: 0;
  transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.acc-ctx-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.acc-ctx-item {
  padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background 0.15s; color: var(--text); font-size: 15px;
}
.acc-ctx-item:last-child { border-bottom: none; }
.acc-ctx-item:active { background: var(--bg3); }
.acc-ctx-overlay { position: fixed; inset: 0; z-index: var(--z-modal-top); display: none; }
.acc-ctx-overlay.show { display: block; }


/* Password Modal */
.pwd-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:var(--z-overlay-high);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.pwd-modal-overlay.show{opacity:1;visibility:visible}
.pwd-modal{background:var(--bg2);width:100%;border-radius:20px 20px 0 0;padding:0 0 20px;transform:translateY(50px);transition:transform .3s cubic-bezier(.34,1.1,.64,1)}
.pwd-modal-overlay.show .pwd-modal{transform:translateY(0)}
.pwd-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.pwd-modal-title{color:var(--text);font-size:17px;font-weight:700}
.pwd-modal-close{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pwd-field{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding:14px 20px 8px}
.pwd-field-label{color:var(--text3);font-size:13px;margin-bottom:6px}
.pwd-field-input{background:transparent;border:none;outline:none;color:var(--text);font-size:16px;width:100%}
.pwd-submit-btn{margin:16px 20px 0;background:#3b82f6;color:#fff;font-size:16px;font-weight:700;text-align:center;padding:16px;border-radius:50px;cursor:pointer}
.pwd-submit-btn:active{background:#2563eb}

/* Brokers */
.broker-content-scroll{flex:1;overflow-y:auto;padding-bottom:60px}
.b-search-box{display:flex;align-items:center;padding:15px 20px 10px;border-bottom:1px solid var(--border);gap:15px}
.b-search-box .material-symbols-outlined{color:var(--text3);font-size:24px}
.b-search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:16px}
.b-list{display:flex;flex-direction:column}
.b-item{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border);gap:15px}
.b-item-text{flex:1;display:flex;flex-direction:column;gap:3px}
.b-item-title{color:var(--text);font-size:15px;font-weight:700}
.b-item-sub{color:#3b82f6;font-size:13px}
.b-item .material-symbols-outlined{color:var(--text3);font-size:24px;cursor:pointer}
.b-empty-state{padding:40px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;margin-top:20px}
.b-empty-search-icon {
  width: 85px;
  height: 85px;
  margin-bottom: 25px;
}
/* أبيض في الوضع المظلم */
:root:not(.light) .b-empty-search-icon {
  color: #ffffff !important;
}
/* رمادي في الوضع المضيء */
:root.light .b-empty-search-icon {
  color: #8e8e93 !important;
}
.b-empty-title{color:var(--text2);font-size:17px;margin-bottom:25px}
.b-empty-desc{color:var(--text3);font-size:13px;line-height:1.5;text-align:center}
.b-bottom-btn{position:absolute;bottom:0;left:0;width:100%;background:var(--bg3);color:var(--text);text-align:center;padding:15px 0 calc(15px + env(safe-area-inset-bottom));font-size:14px;font-weight:700;border-top:1px solid var(--border);cursor:pointer;z-index:var(--z-base-10)}
.b-bottom-btn:active{background:var(--bg4)}


/* Broker Info */
.bi-content-scroll{flex:1;overflow-y:auto;padding-bottom:80px;background:var(--bg)}
.bi-list{display:flex;flex-direction:column;padding:10px 20px}
.bi-item{padding:16px 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.bi-value{color:var(--text);font-size:16px}
.bi-label{color:var(--text3);font-size:13px}
.bi-link{color:#3b82f6;text-decoration:underline;font-size:16px;cursor:pointer}
.bi-bottom-btn{position:absolute;bottom:0;left:0;width:100%;background:var(--bg3);color:var(--text);text-align:center;padding:18px 0 calc(18px + env(safe-area-inset-bottom));font-size:14px;font-weight:700;cursor:pointer;z-index:var(--z-base-10);border-top:1px solid var(--border)}

/* Broker Login */
.bl-content{flex:1;overflow-y:auto;padding-bottom:20px;background:var(--bg)}
.bl-option-section{display:flex;flex-direction:column;border-bottom:1px solid var(--border)}
.bl-option-item{display:flex;align-items:center;padding:20px;gap:18px;cursor:pointer;transition:background .2s}
.bl-option-item:active{background:var(--bg3)}
.bl-option-item:not(:last-child){border-bottom:1px solid var(--border)}
.bl-opt-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bl-opt-icon.demo{background:radial-gradient(circle at 35% 35%,#5b8de0,#2c4fa0)}
.bl-opt-icon.real{background:radial-gradient(circle at 35% 35%,#4ec97c,#1a7a42)}
.bl-opt-icon .material-symbols-outlined{color:#fff;font-size:22px}
.bl-opt-text{flex:1;display:flex;flex-direction:column;gap:3px}
.bl-opt-title{color:var(--text);font-size:16px;font-weight:500}
.bl-opt-sub{color:var(--text3);font-size:13px}
.bl-opt-arrow{color:var(--text4);font-size:20px}
.bl-option-item.disabled{opacity:.32;pointer-events:none}
.bl-unavailable-badge{margin-left:auto;font-size:10px;color:var(--text4);background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;white-space:nowrap;flex-shrink:0}
.bl-login-section{padding:0 20px}
.bl-login-title{color:var(--text);font-size:16px;font-weight:700;text-align:center;padding:22px 0 18px;border-bottom:1px solid var(--border)}
.bl-field{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding:14px 0 8px}
.bl-field-label{color:var(--text3);font-size:13px;margin-bottom:6px}
.bl-field-input{background:transparent;border:none;outline:none;color:var(--text);font-size:16px;width:100%}
.bl-server-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:14px 0 10px;cursor:pointer}
.bl-server-left{color:var(--text3);font-size:16px}
.bl-server-right{display:flex;align-items:center;gap:6px;color:var(--text);font-size:16px}
.bl-server-right .material-symbols-outlined{color:var(--text3);font-size:20px}
.bl-save-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:14px 0;cursor:pointer}
.bl-save-label{color:var(--text3);font-size:16px}
.bl-checkbox{width:22px;height:22px;border-radius:4px;border:2px solid var(--bg4);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s, border-color .2s}
.bl-checkbox .material-symbols-outlined{font-size:16px;color:transparent;font-variation-settings:'FILL' 1;transition:color .2s}
.bl-checkbox.checked{background:#3b82f6;border-color:#3b82f6}
.bl-checkbox.checked .material-symbols-outlined{color:#fff}
.bl-forgot{color:#3b82f6;font-size:15px;text-align:center;padding:18px 0 10px;cursor:pointer}
.bl-forgot:active{opacity:.7}
.bl-login-btn{background:#3b82f6;color:#fff;font-size:16px;font-weight:700;text-align:center;padding:18px;border-radius:50px;margin:10px 0 20px;cursor:pointer;letter-spacing:1px}
.bl-login-btn:active{background:#2563eb}

/* Settings */
.settings-scroll{flex:1;overflow-y:auto;padding-bottom:30px}
.settings-section-title{color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:22px 20px 9px}
.settings-group{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.settings-row{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border2);cursor:pointer;transition:background .15s;gap:14px}
.settings-row:last-child{border-bottom:none}
.settings-row:active{background:var(--bg3)}
.settings-row-body{flex:1;display:flex;flex-direction:column;gap:2px}
.settings-row-title{color:var(--text);font-size:15px;font-weight:500}
.settings-row-sub{color:var(--text3);font-size:12px;margin-top:3px}
/* تصميم المربعات الكلاسيكية MT5 */
.classic-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #6b7280;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    transition: all 0.15s;
}
.classic-checkbox.checked,
.classic-checkbox.on {
    background: #2f7bf0;
    border-color: #2f7bf0;
}
.classic-checkbox.checked::after,
.classic-checkbox.on::after {
    content: '';
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    margin-top: -3px;
}

.vib-mode-panel{display:none;flex-direction:column;padding:0 20px 14px;gap:8px;background:var(--bg2);border-bottom:1px solid var(--border)}
.vib-mode-panel.open{display:flex}
.vib-mode-label{color:var(--text4);font-size:12px;padding-top:6px}
.vib-mode-options{display:flex;gap:8px}
.vib-mode-btn{flex:1;padding:9px 0;border-radius:10px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;background:var(--bg3);color:var(--text3);border:1.5px solid transparent;transition:all .18s}
.vib-mode-btn.active{background:rgba(74,144,226,.15);color:#4a90e2;border-color:#4a90e2}


/* No Connection */
#no-connection-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:var(--z-modal);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#no-connection-overlay.show{display:flex}
.no-conn-icon{color:var(--bg4);font-size:70px;margin-bottom:6px}
.no-conn-title{color:var(--text);font-size:19px;font-weight:700}
.no-conn-sub{color:var(--text3);font-size:14px;text-align:center;padding:0 44px;line-height:1.6}
.no-conn-btn{margin-top:10px;background:var(--accent);color:#fff;padding:14px 40px;border-radius:30px;font-size:15px;font-weight:700;cursor:pointer}
.no-conn-btn:active{opacity:.75}

/* Quotes */


.quotes-list{display:flex;flex-direction:column;width:100%}
.quote-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:var(--quote-bg);position:relative;border-bottom:1px solid var(--border2);cursor:pointer}
.quote-item:active{background:var(--quote-hover)}
.quote-left{display:flex;flex-direction:column;justify-content:center;gap:3px}
.q-change{font-size:11px;font-weight:500;font-family:'Roboto Mono',monospace}
.q-symbol{font-size:17px;font-weight:700;color:var(--text);letter-spacing:.5px}
.q-details{font-size:11px;color:var(--text4);display:flex;align-items:center;font-family:'Roboto Mono',monospace}
.icon-spread{display:inline-flex;flex-direction:column;justify-content:space-between;width:8px;height:7px;margin:0 5px;vertical-align:middle}
.icon-spread::before{content:'';display:block;width:100%;height:1px;background:var(--text4)}
.icon-spread::after{content:'';display:block;width:100%;height:1px;background:var(--text4)}
.spread-label{color:#1abc9c;font-size:10px;font-weight:600;margin:0 4px}
.quote-right{display:flex;gap:15px;align-items:center}
.price-col{display:flex;flex-direction:column;align-items:flex-end;width:85px}
.price-main{font-size:20px;font-weight:700;font-family:'Roboto Mono',monospace;display:flex;align-items:baseline;transition:color .3s}
.pipette{font-size:13px;font-weight:700;margin-left:1px;position:relative;top:-6px}
.price-hl{font-size:11px;color:var(--text4);font-family:'Roboto Mono',monospace;margin-top:2px}
.txt-blue{color:var(--accent)}.txt-red{color:#ef5350}.txt-white{color:var(--text)}.txt-gray{color:var(--text4)}


/* Chart */
.chart-main{flex:1;position:relative;background:var(--bg);width:100%;overflow:hidden}


/* الحاوية الرئيسية */
.chart-info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-menu-panel);
    pointer-events: none; /* تسمح بلمس الشارت خلفها */
}


/* عندما يكون شريط BUY/SELL مفعّل في الشارت 1، ندفع اسم السوق تحته */
#main-chart-wrapper:has(#trade-bar.active) .chart-info {
    top: 50px;
}

/* نفس الشيء للشارت 2 */
#second-chart-wrapper:has(#trade-bar-2.active) #second-chart-title {
    top: 50px;
}


/* مساحة النقر لاسم الزوج - يمكنك تعديل الأرقام هنا */
#chart-title-trigger {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    display: inline-block;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 50px;  /* عرض مساحة النقر */
    padding-bottom: 30px; /* ارتفاع مساحة النقر */
}


.pair-title {
    font-size: 13px;
    font-weight: 500;
    pointer-events: none; /* لضمان أن النقر يذهب للـ trigger */
}


.pair-name{color:#4a90e2}.pair-arrow{font-size:10px;color:#4a90e2;margin-right:3px}.timeframe{color:var(--text)}
.pair-desc{color:var(--text3);font-size:12px;margin-top:2px}
#symbol-dropdown,
#second-sym-dropdown {
    position: absolute;
    top: 40px;
    left: 10px;
    background: var(--bg2);
    border-radius: 8px;
    min-width: 80px;
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-modal-top);
    display: none;
    flex-direction: column;
    border: 1px solid var(--border);
    padding: 5px 0;
    pointer-events: auto;
}

#symbol-dropdown.active{display:flex}

.symbol-dropdown-item{
    padding:12px 20px;
    color:var(--accent);
    font-size:15px;
    font-weight:700;
    font-family:'Roboto Mono',monospace;
    cursor:pointer;
    transition:background .1s;
    border-bottom: 1px solid var(--border);
}
.symbol-dropdown-item:last-child { border-bottom: none; }
.symbol-dropdown-item:active{background:var(--bg3)}
#tvchart, #tvchart-indicator, #main-chart-wrapper,
#second-tvchart, [id^="tvchart-"] {
  /* 🔧 CSS PHASE G PARITY FIX: extends Chart 1's own container rule (width/
     height/position/touch-action/overscroll-behavior/GPU translateZ) to
     Chart 2's inner container (#second-tvchart, previously untargeted by
     any rule in this file) and every generic chart's inner container
     ([id^="tvchart-"], matches tvchart-3..tvchart-16 per
     TSR_createChartDOM's `'tvchart-' + chartKey` id convention in app.js).
     Every original Chart-1-only selector above and every declaration below
     is unchanged — this only widens the selector list. */
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  touch-action: none !important;
  overscroll-behavior: none !important; /* يمنع المتصفح من محاولة سحب الصفحة بأكملها */
  -webkit-user-drag: none; /* يمنع السحب الافتراضي */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/* الكود الجديد المتفاعل مع الوضعين */
/* 🔧 LOADER PARITY FIX (Phase Loader Parity): extends Chart 1's own
   #chart-loader base rule to #chart-loader-2 and every generic chart's
   dynamic id ([id^="chart-loader-"], matches chart-loader-3..16 per the
   same 'chart-loader-' + chartKey convention already used for
   #chart-loader-2 in app.js). Purely a selector-list widening — every
   declaration below and the original #chart-loader selector are untouched. */
#chart-loader, #chart-loader-2, [id^="chart-loader-"] {
  position: absolute;
  inset: 0;
  background: var(--bg); /* يتغير تلقائياً مع الوضع */
  z-index: var(--z-chart-loader);
  display: none;
  flex-direction: column;
  align-items: center;
  transition: background 0.3s;
}


/* الشريط العلوي - تم نقله لأقصى اليمين */
.loader-top-bar {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: row-reverse; /* ليكون الترتيب: النص ثم الحلقة */
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-family: sans-serif;
  opacity: 0.9;
  z-index: var(--z-chart-loader-content);
}

/* حلقة الدوران (Spinner) بجانب النص */
.loader-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.2); /* اللون الافتراضي للوضع الداكن */
  border-top-color: #fff;
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
}

/* التعديل الخفيف للوضع الفاتح: حلقة زرقاء */
:root.light .loader-spinner {
  border: 2px solid rgba(74, 144, 226, 0.2) !important; /* حلقة زرقاء باهتة */
  border-top-color: var(--accent) !important;          /* رأس الدوران أزرق غامق */
}

/* تأكيد لون النص الأزرق في الوضع الفاتح */
:root.light .loader-top-bar {
  color: var(--accent) !important;
  font-weight: bold;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* لوغو الشموع في المنتصف */
.loader-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  opacity: 0.8;
}

.loader-center-logo svg {
  width: 100%;
  height: 100%;
}


.trade-btn { flex: 1 1 0; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.trade-btn.btn-buy { background: var(--accent); }


.trade-btn.btn-sell { background: #ef5350; }
.trade-btn:active { opacity: 0.8; }
/* تنسيق الكلماتSELL و BUY لتكون متساوية تماماً */
.btn-label {
    position: absolute;
    top: 4px;
    left: 7px; /* جعل الكلمتين تبدآن من اليسار بنفس المسافة */
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    opacity: 0.9;
    letter-spacing: 0.5px;
    text-align: left;
}

.btn-price { /* هذا الخط يضمن ظهور الأرقام بشكل احترافي وبدون شطب للصفر */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; /* لجعل الأرقام متساوية العرض مثل المنصات الاحترافية */ font-weight: 700; display: flex; align-items: baseline; pointer-events: none; }
.btn-price .base { font-size: 13px; }
.btn-price .large { font-size: 18px; }
.btn-price .pipette { font-size: 10px; position: relative; top: -4px; }


/* الوميض القديم المسترجع */
@keyframes flash-buy-up{0%{background:#42a5f5}25%{background:#90caf9}50%{background:#42a5f5}75%{background:#90caf9}100%{background:#42a5f5}}
@keyframes flash-sell-up{0%{background:#ef5350}25%{background:#ff8a80}50%{background:#ef5350}75%{background:#ff8a80}100%{background:#ef5350}}
@keyframes flash-buy-down{0%{background:#42a5f5}25%{background:#1565c0}50%{background:#42a5f5}75%{background:#1565c0}100%{background:#42a5f5}}
@keyframes flash-sell-down{0%{background:#ef5350}25%{background:#b71c1c}50%{background:#ef5350}75%{background:#b71c1c}100%{background:#ef5350}}
.trade-btn.btn-buy.flash-up{animation:flash-buy-up .35s ease}
.trade-btn.btn-buy.flash-down{animation:flash-buy-down .35s ease}
.trade-btn.btn-sell.flash-up{animation:flash-sell-up .35s ease}
.trade-btn.btn-sell.flash-down{animation:flash-sell-down .35s ease}
.trade-btn.btn-buy.tsr-tick-up{background:var(--accent)}
.trade-btn.btn-sell.tsr-tick-up{background:#ef5350}
.trade-btn.btn-buy.tsr-tick-down{background:#ef5350}
.trade-btn.btn-sell.tsr-tick-down{background:var(--accent)}

/* --- Radial Menu ELITE DESIGN (Geometry Update) --- */
.radial-menu {
  position: absolute; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, transparent 60px, var(--radial-menu-bg, rgba(40, 40, 40, 0.95)) 61px);
  transform: translate(-50%,-50%); opacity: 0; visibility: hidden;
  z-index: var(--z-critical) !important; pointer-events: none; transition: opacity 0.2s;
}
:root.light .radial-menu {
  background: radial-gradient(circle, transparent 60px, var(--accent) 61px) !important;
}


.radial-menu.active { opacity: 1; visibility: visible; pointer-events: auto; }

.rm-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin-top: -22px; margin-left: -22px;
  display: flex; justify-content: center; align-items: center;
  color: #fff; font-weight: 700;
  font-size: 13.5px; cursor: pointer;
  z-index: var(--z-base-2);
  /* توزيع العناصر على محيط الدائرة */
  transform: rotate(var(--angle)) translateY(-92px);
}

.rm-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* السر: تدوير النص بعكس زاوية الدائرة ليظل معتدلاً */
  transform: rotate(calc(var(--angle) * -1));
  width: 100%;
  height: 100%;
}


.rm-item.active { color: #4a90e2; }
:root.light .rm-item.active { color: #90caf9 !important; }
/* نافذة إدارة الشارتات الجديدة (تأخذ لون العجلة تماماً) */
.charts-mgr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: var(--z-critical-high);
  display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s;
}
.charts-mgr-overlay.show { display: flex; opacity: 1; }
.charts-mgr-card {
  background: var(--bg2); width: 85%; max-width: 320px;
  border-radius: 24px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  color: var(--text); transform: scale(0.9); transition: 0.2s;
  border: 1px solid var(--border);
}
/* في الوضع الفاتح تصبح زرقاء مثل العجلة */
:root.light .charts-mgr-card { background: rgba(74, 144, 226, 0.98); color: #fff; border: none; }
.charts-mgr-overlay.show .charts-mgr-card { transform: scale(1); }

.cm-title { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.cm-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 12px 0; }

.cm-action-row {
  display: flex; align-items: center; gap: 15px; padding: 14px 10px;
  cursor: pointer; transition: background 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cm-action-row:active { background: rgba(255,255,255,0.1); }
.cm-action-text { font-size: 15px; font-weight: 500; }

.cm-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
  width: 100%;
}
:root.light .cm-action-row,
:root.light .cm-item {
  border-bottom-color: rgba(255,255,255,0.28);
}
.cm-item-left { display: flex; align-items: center; gap: 15px; }
.cm-checkbox { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.6); border-radius: 3px; }
.cm-checkbox.checked {
  background: #4a90e2; border-color: #4a90e2;
  display: flex; align-items: center; justify-content: center;
}
.cm-checkbox.checked::after {
  content: ''; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.cm-item-name { font-size: 16px; font-weight: 500; }

.cm-remove-btn {
  margin-top: 25px; background: rgba(255, 255, 255, 0.15); border-radius: 30px;
  padding: 14px; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
  color: #fff;
}
.cm-remove-btn:active { background: rgba(255, 255, 255, 0.25); }
.cm-remove-btn.active {
  background: #e74c3c;
}
.cm-remove-btn.active:active { background: #c0392b; }
.cm-action-row.disabled { opacity: 0.35; pointer-events: none; }
.cm-action-row.cm-layout-active { color: #4a90e2; }
.cm-action-row.cm-layout-active .material-symbols-outlined { color: #4a90e2; }

.rm-center{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;cursor:pointer;z-index:var(--z-base)}

/* Dropdowns Fixes for Light Theme */
.hist-sym-option { padding:16px 20px; font-size:16px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); }
.hist-sym-option:hover { background:var(--bg3); }


/* Floating Actions */
.floating-action-container {
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    display: flex;
    align-items: center;
    z-index: var(--z-critical);
    pointer-events: none;
    background: rgba(40, 40, 40, 0.96);
    border-radius: 50px;
    padding: 6px 10px;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    touch-action: none;
}
.floating-action-container.active {
    transform: translateX(-50%) scale(1);
    pointer-events: auto !important;
}

/* زر X */
.fcap-close-x {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff; font-size: 18px;
    transition: background 0.2s;
}
.fcap-close-x:active { background: rgba(255,255,255,0.2); }

/* زر CLOSE */
.fcap-btn-close {
    height: 36px; padding: 0 14px;
    border-radius: 50px;
    border: 1.5px solid #e8a020;
    color: #e8a020; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent;
    transition: background 0.2s;
}
.fcap-btn-close:active { background: rgba(232,160,32,0.15); }

/* أزرار SL و TP */
.fcap-btn-sl {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e74c3c;
    color: #e74c3c; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent;
    transition: all 0.2s;
}
.fcap-btn-sl.active-line {
    background: #e74c3c;
    color: #fff;
}
.fcap-btn-sl:active { opacity: 0.7; }

.fcap-btn-tp {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #2ecc71;
    color: #2ecc71; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent;
    transition: all 0.2s;
}
.fcap-btn-tp.active-line {
    background: #2ecc71;
    color: #fff;
}
.fcap-btn-tp:active { opacity: 0.7; }

/* زر السهم */
.fcap-btn-arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff; font-size: 20px;
    transition: background 0.2s;
}
.fcap-btn-arrow:active { background: rgba(255,255,255,0.2); }

/* Trade View */
.trade-title{font-size:16px;color:var(--text);font-weight:500}
.trade-subtitle{font-size:14px;color:var(--text3);margin-top:2px}
.trade-profit{font-size:15px;color:#4a90e2;font-weight:500;margin-top:2px}
.trade-profit.loss{color:#e74c3c}
.account-summary{padding:15px 15px 5px;background:var(--bg)}
.summary-row{display:flex;align-items:baseline;margin-bottom:12px;font-size:15px;font-weight:700}
.summary-row span:first-child{color:var(--text);white-space:nowrap}
.summary-row .dots{flex:1;border-bottom:2px dotted var(--bg4);margin:0 10px;position:relative;top:-4px;opacity:.6}
.summary-row .val{color:var(--text)}.summary-row .val.blue{color:#4a90e2}
.section-header{background:var(--bg3);color:var(--text3);padding:5px 15px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500}
:root.light .section-header{background:var(--bg3);}
/* تنسيق سطر التاريخ المطور - مطابق لـ MT5 */
.position-item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.2s;
}
.position-item:active { background: var(--bg3); }

.hist-main-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* تنسيق التفاصيل ليكون مطابقاً للصورة (عمودين متقابلين) */
.hist-details-box {
    display: none;
    margin-top: 5px;
    padding-top: 5px;
}
.position-item.expanded .hist-details-box {
    display: block;
}

.hist-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* تقسيم الشاشة لنصفين */
    gap: 2px 20px;
    font-size: 11.5px;
    color: #888; /* لون التسميات رمادي */
    font-family: 'Roboto', sans-serif;
}

.hist-entry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
}

.hist-val-content {
    color: var(--text); /* القيم باللون الأبيض أو الأسود حسب الثيم */
    text-align: right;
}

.initial-deposit-text {
    color: #4a90e2;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
:root.light .initial-deposit-text { color: #2563eb; }


.pos-top{margin-bottom:4px}.sym{color:var(--text);font-weight:700;font-size:15px}
.pos-bottom{color:var(--text3);font-size:14px;font-family:'Roboto Mono',monospace;letter-spacing:-.5px}
.pos-right{font-size:17px;font-weight:700;font-family:'Roboto Mono',monospace}
.profit{color:#4a90e2}.loss{color:#e74c3c}

/* Trade Cards */
.trade-card{background:var(--bg);border-bottom:1px solid var(--border);padding:12px 15px;display:flex;flex-direction:column;transition:background .2s}
.trade-card:active{background:var(--bg3)}
.tc-header{display:flex;justify-content:space-between;align-items:flex-start}
.tc-sym{color:var(--text);font-weight:700;font-size:15px}
.tc-type{font-size:13px;font-weight:500;margin-left:5px}
.tc-type.buy{color:#4a90e2}.tc-type.sell{color:#e74c3c}.tc-type.limit{color:#a0a0a0}
.tc-prices{color:var(--text3);font-size:13px;font-family:'Roboto Mono',monospace;margin-top:4px}
.tc-pl{font-size:16px;font-weight:700;font-family:'Roboto Mono',monospace}
.tc-pl.profit{color:#4a90e2}.tc-pl.loss{color:#e74c3c}
.tc-details{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);font-size:12px;color:var(--text3);font-family:'Roboto Mono',monospace}
.trade-card.expanded .tc-details{display:block}
.tc-row{display:flex;justify-content:space-between;margin-bottom:6px}
.tc-col{display:flex;flex-direction:column;gap:6px;width:48%}
.tc-val{color:var(--text);float:right}

/* History */
.history-tabs{display:flex;background:var(--bg);border-bottom:1px solid var(--border)}
.history-tabs .tab{flex:1;text-align:center;padding:12px 0;color:var(--text3);font-size:13px;font-weight:500;cursor:pointer}
.history-tabs .tab.active{color:var(--text);border-bottom:2px solid var(--accent)}
.calendar-icon-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}
.calendar-number{position:absolute;top:9px;font-size:10px;font-weight:bold;color:var(--text2)}
.hist-right-info{display:flex;flex-direction:column;align-items:flex-end}
.hist-date{color:var(--text3);font-size:11px;margin-bottom:5px;font-family:'Roboto Mono',monospace}
.hist-val{font-size:15px;font-weight:700;font-family:'Roboto Mono',monospace;color:#4a90e2}

/* Messages */
.msg-list{display:flex;flex-direction:column}
.msg-item{display:flex;padding:15px;border-bottom:1px solid var(--border);cursor:pointer;background:var(--bg);transition:background .2s}
.msg-item:active{background:var(--bg3)}
.msg-item.unread .msg-title{font-weight:700;color:var(--text)}
.msg-item.unread .msg-time{color:#4a90e2;font-weight:700}
.msg-item.unread .msg-preview{color:var(--text2)}
.msg-avatar{width:45px;height:45px;background:var(--bg3);border-radius:50%;display:flex;justify-content:center;align-items:center;margin-right:15px;flex-shrink:0;color:var(--text);font-size:20px;font-weight:bold;overflow:hidden}
.msg-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.msg-avatar.system{background:#0b112c;color:#3b82f6}
.msg-content{flex:1;display:flex;flex-direction:column;overflow:hidden;justify-content:center}
.msg-header-row{display:flex;justify-content:space-between;margin-bottom:5px;align-items:center}
.msg-title{color:var(--text2);font-size:16px;font-weight:500}
.msg-time{color:var(--text4);font-size:12px}
.msg-preview{color:var(--text3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Message Detail */
.msg-detail-scroll{flex:1;overflow-y:auto;padding-bottom:30px}
.msg-detail-header-card{display:flex;flex-direction:column;align-items:center;padding:28px 20px 22px;border-bottom:1px solid var(--border);background:var(--bg2)}
.msg-detail-logo{width:60px;height:60px;border-radius:14px;overflow:hidden;margin-bottom:12px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.msg-detail-logo img{width:100%;height:100%;object-fit:cover}
.msg-detail-sender{color:var(--text);font-size:18px;font-weight:700;margin-bottom:3px}
.msg-detail-date{color:var(--text4);font-size:13px}
.msg-detail-subject{color:var(--text);font-size:16px;font-weight:700;padding:18px 20px 8px}
.msg-detail-body{color:var(--text2);font-size:14px;line-height:1.75;padding:0 20px 24px}
.msg-detail-body h3{color:var(--text);font-size:15px;font-weight:700;margin:20px 0 8px}
.msg-detail-body p{margin-bottom:12px}
.msg-detail-body ul{margin:8px 0 12px;padding-left:0;list-style:none}
.msg-detail-body ul li{padding:5px 0 5px 18px;position:relative;color:var(--text3);font-size:14px;line-height:1.6}
.msg-detail-body ul li::before{content:'•';position:absolute;left:0;color:var(--accent);font-size:16px;line-height:1.4}
.msg-detail-divider{height:1px;background:var(--border);margin:4px 20px}

/* Timeframe Modal */
.tf-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:var(--z-overlay);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.tf-modal-overlay.active{opacity:1;visibility:visible}
.tf-modal{background:var(--bg3);width:85%;max-width:340px;border-radius:12px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.5);transform:scale(.95);transition:.2s}
.tf-modal-overlay.active .tf-modal{transform:scale(1)}
.tf-category{color:var(--text);font-size:14px;font-weight:700;text-align:center;margin:15px 0 10px}
.tf-category:first-child{margin-top:0}
.tf-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tf-btn{background:var(--bg4);color:var(--text3);border:1px solid transparent;border-radius:6px;padding:10px 0;width:calc(20% - 7px);text-align:center;font-size:14px;font-weight:500;cursor:pointer;transition:.1s}
.tf-btn:active{background:var(--bg3)}
.tf-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tf-btn.pinned{border-color:var(--accent);color:var(--accent)}
.tf-btn.active.pinned{background:var(--accent);color:#fff}


.tf-footer-note{display:flex;align-items:center;gap:10px;background:var(--bg2);padding:12px;border-radius:8px;margin-top:20px}
.tf-footer-note .material-symbols-outlined{color:var(--text2);font-size:20px}
.tf-footer-note span{color:var(--text3);font-size:11px;line-height:1.4}


.tf-limit-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: var(--z-dialog-critical); display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.tf-limit-overlay.show { display: flex; opacity: 1; }
.tf-limit-modal {
  background: var(--bg2); width: 85%; max-width: 320px;
  border-radius: 20px; padding: 24px 24px 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  transform: scale(0.95); transition: transform 0.2s;
}
.tf-limit-overlay.show .tf-limit-modal { transform: scale(1); }
.tf-limit-title { font-size: 19px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.tf-limit-text { font-size: 15px; color: var(--text2); line-height: 1.5; margin-bottom: 24px; }
.tf-limit-actions { display: flex; justify-content: flex-end; }
.tf-limit-ok { color: var(--accent); font-size: 15px; font-weight: 700; padding: 8px 12px; cursor: pointer; transition: opacity 0.2s; }
.tf-limit-ok:active { opacity: 0.6; }


/* Trade Indicator */
.quote-item .trade-indicator{position:absolute;top:0;left:0;width:4px;height:100%;border-radius:0 2px 2px 0;transition:background-color .4s}
.quote-item .trade-indicator.profit{background:#4a90e2}
.quote-item .trade-indicator.loss{background:#e74c3c}

/* Bulk & Context Sheets */
.bulk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-sheet-overlay);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.bulk-overlay.show{opacity:1;visibility:visible}
.bulk-sheet{position:fixed;bottom:0;left:0;width:100%;background:var(--bg2);border-radius:20px 20px 0 0;z-index:var(--z-sheet);transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.1,.64,1);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.bulk-overlay.show .bulk-sheet{transform:translateY(0)}
.bulk-header{padding:18px 20px;font-size:16px;font-weight:700;color:var(--text);text-align:center;border-bottom:1px solid var(--border);background:var(--bg3);border-radius:20px 20px 0 0}
.bulk-list{display:flex;flex-direction:column;max-height:60vh;overflow-y:auto}
.bulk-item{padding:16px 20px;font-size:15px;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}
.bulk-item:active{background:var(--bg3)}
.bulk-item:last-child{border-bottom:none}
.trade-ctx-header{padding:15px 20px;border-bottom:1px solid var(--border);background:var(--bg3);border-radius:20px 20px 0 0}
.trade-ctx-title{color:var(--text);font-size:16px;font-weight:700;margin-bottom:4px}
.trade-ctx-sub{color:var(--text3);font-size:13px;font-family:'Roboto Mono',monospace}

/* Modify Modal */
.modify-modal{position:fixed;inset:0;background:var(--bg);z-index:var(--z-modal);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.1,.64,1)}
.modify-modal.show{transform:translateY(0)}
.mod-header{display:flex;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top)) 20px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.mod-header .material-symbols-outlined{color:var(--accent);font-size:26px;cursor:pointer}
.mod-title{color:var(--text);font-size:16px;font-weight:700;margin-bottom:4px}
.mod-sub{color:var(--text3);font-size:13px;font-family:'Roboto Mono',monospace}
.mod-inputs{flex:1;display:flex;gap:12px;padding:20px}
.mod-input-group{flex:1;display:flex;flex-direction:column;gap:8px}
.mod-input-wrapper{display:flex;align-items:center;border-radius:12px;overflow:hidden;border:2px solid var(--border)}
.mod-input-wrapper.sl{border-color:#e74c3c}
.mod-input-wrapper.tp{border-color:#00c853}
.mod-btn{width:44px;height:54px;display:flex;align-items:center;justify-content:center;background:var(--bg3);color:var(--text);font-size:22px;cursor:pointer;flex-shrink:0}
.mod-btn:active{background:var(--bg4)}
.mod-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:18px;font-weight:700;text-align:center;font-family:'Roboto Mono',monospace;padding:14px 0;width:100%}
.mod-submit{margin:0 20px 20px;background:var(--bg3);color:var(--text4);font-size:16px;font-weight:700;letter-spacing:2px;text-align:center;padding:18px;border-radius:50px;cursor:pointer;transition:background .2s,color .2s;border:1px solid var(--border)}
.mod-submit.active{background:#3b82f6;color:#fff;border-color:#3b82f6}

/* Pin / Lock */
#lock-screen{position:fixed;inset:0;background:#000;z-index:var(--z-dialog-lock);display:none;flex-direction:column;align-items:center;justify-content:center}
#lock-screen.show{display:flex}
.lock-logo{width:72px;height:72px;border-radius:18px;overflow:hidden;margin-bottom:28px}
.lock-logo img{width:100%;height:100%;object-fit:contain}
.lock-title{color:#fff;font-size:18px;font-weight:700;margin-bottom:6px}
.lock-sub{color:#555;font-size:13px;margin-bottom:36px}
.lock-dots{display:flex;gap:18px;margin-bottom:48px}
.lock-dot{width:14px;height:14px;border-radius:50%;border:2px solid #444;background:transparent;transition:background .2s,border-color .2s}
.lock-dot.filled{background:#4a90e2;border-color:#4a90e2}
.lock-dot.error{background:#e74c3c;border-color:#e74c3c}
.pin-pad{display:grid;grid-template-columns:repeat(3,80px);gap:14px}
.pin-key{width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111;cursor:pointer;transition:background .15s;gap:2px}
.pin-key:active{background:#222}
.pin-key.empty{background:transparent;cursor:default}
.pin-key.del{background:transparent}
.pin-key-num{color:#fff;font-size:26px;font-weight:300;line-height:1}
.pin-key-sub{color:#555;font-size:9px;letter-spacing:1.5px;font-weight:700}
#pin-setup-overlay{position:fixed;inset:0;background:#000;z-index:var(--z-dialog-pin);display:none;flex-direction:column;align-items:center;justify-content:center}
#pin-setup-overlay.show{display:flex}
.pin-setup-back{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;cursor:pointer;color:#fff;z-index:var(--z-dialog-top);}
.pin-setup-back .material-symbols-outlined {font-size:30px;}
.pin-setup-step{color:#555;font-size:13px;margin-bottom:8px}

/* Ringtone */
#ringtone-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:var(--z-modal-high);display:none;align-items:flex-end;justify-content:center}
#ringtone-overlay.show{display:flex}
.ringtone-box{background:var(--bg2);width:100%;border-radius:20px 20px 0 0;max-height:75vh;display:flex;flex-direction:column;transform:translateY(50px);transition:transform .3s cubic-bezier(.34,1.1,.64,1)}
#ringtone-overlay.show .ringtone-box{transform:translateY(0)}
.ringtone-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.ringtone-title{color:var(--text);font-size:17px;font-weight:700}
.ringtone-list{overflow-y:auto;flex:1}
.ringtone-item{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border2);cursor:pointer;gap:16px;transition:background .15s}
.ringtone-item:active{background:var(--bg3)}
.ringtone-item-name{flex:1;color:var(--text);font-size:15px}
.ringtone-item-check{color:#4a90e2;font-size:22px;display:none}
.ringtone-item.selected .ringtone-item-check{display:block}
.ringtone-item.selected .ringtone-item-name{color:#4a90e2;font-weight:700}
.ringtone-upload-btn{margin:16px 20px;padding:15px;border-radius:12px;border:2px dashed var(--border);text-align:center;color:#4a90e2;font-size:14px;font-weight:700;cursor:pointer}
.ringtone-upload-btn:active{background:var(--bg3)}


/* Demo Modal */
.demo-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:var(--z-overlay-medium);display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.demo-modal-overlay.show{opacity:1;visibility:visible}
.demo-modal{background:var(--bg2);width:100%;max-height:92vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;transform:translateY(60px);transition:transform .32s cubic-bezier(.34,1.1,.64,1);overflow:hidden}
.demo-modal-overlay.show .demo-modal{transform:translateY(0)}
.demo-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0;flex-shrink:0}
.demo-modal-title{color:var(--text);font-size:17px;font-weight:700}
.demo-modal-close{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.demo-broker-strip{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.demo-broker-strip img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.demo-broker-strip-name{color:var(--text);font-size:15px;font-weight:700}
.demo-broker-strip-sub{color:var(--text3);font-size:12px}
.demo-modal-scroll{flex:1;overflow-y:auto;padding-bottom:24px}
.demo-section-label{color:var(--text4);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:18px 20px 8px}
.demo-group{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.demo-field{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border2);min-height:54px}
.demo-field:last-child{border-bottom:none}
.demo-field-label{color:var(--text3);font-size:15px;flex:1}
.demo-field-hint{color:var(--text4);font-size:12px;margin-left:4px}
.demo-field-input{background:transparent;border:none;outline:none;color:var(--text);font-size:15px;text-align:right;flex:1.2;min-width:0}
.demo-field-error{color:#e74c3c;font-size:12px;padding:0 20px 8px}
.demo-select-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);cursor:pointer}
.demo-select-row:active{background:var(--bg3)}
.demo-select-label{color:var(--text3);font-size:15px}
.demo-select-right{display:flex;align-items:center;gap:6px}
.demo-select-val{color:var(--text);font-size:15px;font-weight:500}
.demo-select-arrow{color:var(--text4);font-size:20px}
.demo-check-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);cursor:pointer}
.demo-check-label{color:var(--text3);font-size:15px}
.demo-checkbox{width:22px;height:22px;border-radius:4px;border:2px solid var(--bg4);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,border-color .2s}
.demo-checkbox.checked{background:#3b82f6;border-color:#3b82f6}
.demo-checkbox .material-symbols-outlined{font-size:16px;color:transparent;font-variation-settings:'FILL' 1}
.demo-checkbox.checked .material-symbols-outlined{color:#fff}
.demo-agree-note{color:var(--text4);font-size:12px;padding:10px 20px 0;line-height:1.5}
.demo-register-btn{margin:18px 20px 10px;background:#3b82f6;color:#fff;font-size:16px;font-weight:700;letter-spacing:1px;text-align:center;padding:18px;border-radius:50px;cursor:pointer}
.demo-register-btn:active{background:#2563eb}

/* Bottom Nav */
.bottom-nav{display:flex;justify-content:space-around;align-items:center;background:var(--header-bg);padding:8px 0 calc(12px + env(safe-area-inset-bottom));z-index:var(--z-header);flex-shrink:0}
.nav-item{display:flex;flex-direction:column;align-items:center;color:var(--text3);font-size:11px;font-weight:500;gap:4px;cursor:pointer;width:20%}
.nav-icon-wrapper{position:relative;padding:4px 15px;border-radius:20px;transition:background .2s}
.nav-item.active{color:var(--accent)}
.nav-item.active .nav-icon-wrapper{background:rgba(74,144,226,.2)}
/* تنسيق الأيقونات مع حماية ضد النصوص */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden; /* يقطع النص الزائد */
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';

  /* منع ظهور النص بذكاء دون كسر الألوان */
  font-variant-ligatures: common-ligatures;
  letter-spacing: -24px; /* يجمع أحرف الكلمة فوق بعضها لتختفي داخل الـ 1em */
  color: inherit; /* يسمح للأنيميشن بالتحكم في اللون */
}

/* عندما يتم تحميل الخط بنجاح، نعيد المسافات طبيعية */
@font-face {
  font-family: 'Material Symbols Outlined';
}

.material-symbols-outlined {
  letter-spacing: normal; /* يعيد الأيقونة لشكلها الطبيعي */
}


.nav-item .material-symbols-outlined {
    font-size: 24px;
    color: var(--text2);
}

.nav-item.active .material-symbols-outlined {
    color: var(--accent);
}


.blue-dot-badge{position:absolute;top:3px;right:10px;width:9px;height:9px;background:#4a90e2;border-radius:50%;display:none;border:1px solid #000;animation:pulse-blue 1.5s infinite}
@keyframes pulse-blue{0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.9);opacity:.7}}


/* New Order View  */
#view-new-order { position:fixed; inset:0; background:var(--bg); z-index:var(--z-dialog-top); display:none; flex-direction:column; }
.no-lot-row { display:flex; justify-content:space-between; align-items:center; padding:15px; background:var(--bg); border-bottom:1px solid var(--border);}
.no-lot-btn { color:#4a90e2; cursor:pointer; font-weight:500; font-size:15px; padding:5px; }
.no-lot-val { font-size:18px; font-weight:700; color:var(--text); font-family:'Roboto Mono',monospace; }
.no-prices { display:flex; justify-content:space-around; padding:15px 0 5px; font-size:26px; font-weight:700; font-family:'Roboto Mono',monospace; }
.no-bid { color:#4a90e2; } .no-ask { color:#e74c3c; }
.no-sltp-row { display:flex; gap:15px; padding:15px; }
.no-input-group { flex:1; border-bottom:2px solid var(--border); display:flex; justify-content:space-between; align-items:center; padding-bottom:5px; }
.no-input-group.sl { border-color:#e74c3c; } .no-input-group.tp { border-color:#00c853; }
.no-inp-btn { font-size:24px; color:#4a90e2; cursor:pointer; padding:0 10px; font-weight:bold; }
.no-input { background:transparent; border:none; color:var(--text); text-align:center; font-size:16px; width:100%; outline:none; font-family:'Roboto Mono',monospace; }
.no-chart-container { flex:1; background:var(--bg); position:relative; margin-top:5px; border-top:1px dashed var(--border); border-bottom:1px dashed var(--border); }
.no-bottom { display:flex; border-top:1px solid var(--border); background:var(--bg); padding-bottom:env(safe-area-inset-bottom); }
.no-btn { flex:1; padding:15px; text-align:center; font-weight:700; font-size:16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; transition:0.2s; color:var(--text);}
.no-btn:active { opacity:0.7; }
.no-btn span { font-size:10px; color:var(--text4); font-weight:normal; margin-top:3px; letter-spacing:0.5px; }
.no-type-container { position:relative; z-index:var(--z-base-10); }
.no-type { text-align:center; padding:15px; font-size:16px; border-bottom:1px solid var(--border); color:var(--text); cursor:pointer; background:var(--bg2); }
.no-ot-dropdown { display:none; position:absolute; top:100%; left:5%; width:90%; background:var(--bg2); border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,0.3); text-align:center; overflow:hidden; border:1px solid var(--border); }
.no-ot-item { padding:18px; font-size:15px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.2s; }
.no-ot-item:last-child { border-bottom:none; }
.no-ot-item:active { background:var(--bg3); }

/* Make timeframe text blue in light mode */
:root.light #timeframe-btn { color: var(--accent) !important; }


/* Toast */
#login-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:13px 22px;border-radius:12px;font-size:14px;font-weight:500;z-index:var(--z-modal-top);pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,.3);white-space:nowrap}
#login-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#login-toast .toast-icon{font-size:18px}
#login-toast.success .toast-icon{color:#00c853}
#login-toast.error .toast-icon{color:#e74c3c}
@keyframes smooth-blink{0%,100%{color:#5b86e5}50%{color:#ff6b6b}}
.icon-blink{animation:smooth-blink 3s infinite ease-in-out;cursor:pointer}
.icon-blink.delay{animation-delay:1.5s}
/* 🔧 UI PARITY FIX (Charts 1-16 visual unification): was scoped to the
   #lot-size-display id only, so Chart 1's lot-size input had its native
   number-spinner arrows hidden while Chart 2's identical `.lot-size` input
   (js/app.js, tradeBar2 markup) did not — same shared class on both
   elements already existed, this only widens the selector from the id to
   the class both inputs carry, so the native spinner is hidden the same
   way for every chart's lot-size field. No functional/behavioral change. */
.lot-size{-moz-appearance:textfield}
.lot-size::-webkit-inner-spin-button,.lot-size::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}


/* Objects View */
.obj-header-actions { display: flex; gap: 24px; align-items: center; color: var(--text); }
.obj-header-actions .material-symbols-outlined { font-size: 24px; cursor: pointer; transition: opacity 0.2s; }
.obj-header-actions .material-symbols-outlined:active { opacity: 0.6; }


.obj-section-title { font-size: 14px; font-weight: 500; color: #4a90e2; padding: 20px 20px 15px; }

/* توسيط الأيقونات في المنتصف */
.obj-favorites-grid {
  display: flex;
  justify-content: center; /* هذا السطر هو المسؤول عن التوسيط */
  align-items: center;
  gap: 30px; /* المسافة بين الأيقونات */
  padding: 10px 20px;
}

/* توحيد حجم الأيقونات بدقة */
.obj-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4a90e2; /* لون الأيقونات الأزرق */
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.obj-icon-wrapper:active { transform: scale(0.85); opacity: 0.7; }
.obj-icon-wrapper svg { width: 100%; height: 100%; display: block; }


/* Add Object View */
.add-obj-category {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 25px 20px 8px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.add-obj-list { display: flex; flex-direction: column; }
.add-obj-item {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px; cursor: pointer; transition: background 0.2s;
}
.add-obj-item:active { background: var(--bg3); }
.add-obj-icon {
  width: 24px; height: 24px; color: #4a90e2; /* لون الأيقونات الأزرق */
  display: flex; justify-content: center; align-items: center; flex-shrink: 0;
}
.add-obj-icon svg { width: 100%; height: 100%; display: block; }
.add-obj-text { font-size: 16px; color: var(--text); font-weight: 400; }


/* Colors View */
.colors-list { padding: 0 20px; }
.color-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.color-row:active { background: var(--bg3); }
.color-row:last-child { border-bottom: none; }
.color-label { font-size: 15px; color: var(--text); }
.color-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.scheme-dropdown { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text); width: 150px; outline: none; font-size: 14px; }
.color-save-btn { color: #4a90e2; font-weight: bold; cursor: pointer; padding: 5px 10px; font-size: 15px; }

#scheme-select-row {
    background: var(--bg3);
    border: none;
    border-radius: 20px;
    padding: 7px 12px 7px 16px;
    gap: 6px;
}
#scheme-select-row .demo-select-val {
    color: var(--text);
    font-weight: 500;
}
#scheme-select-row .demo-select-arrow {
    color: #ffffff !important;
}

/* Custom Color Picker Modal */
.cp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: var(--z-dialog-critical); display: none; align-items: center; justify-content: center; }
.cp-overlay.show { display: flex; }
.cp-modal { background: #1e1e1e; width: 90%; max-width: 350px; border-radius: 12px; padding: 20px; box-shadow: 0 10px 50px rgba(0,0,0,0.8); border: 1px solid #333; }
.cp-preview-box { height: 120px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #111; position: relative; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.cp-native-input { position: absolute; inset: 0; width: 100%; height: 200%; opacity: 0; cursor: pointer; }
.cp-hex-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.cp-hex-circle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #333; }
.cp-hex-input { flex: 1; background: #111; border: 1px solid #333; color: #fff; padding: 12px; border-radius: 8px; /* هذا الخط يضمن ظهور الأرقام بشكل احترافي وبدون شطب للصفر */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums; /* لجعل الأرقام متساوية العرض مثل المنصات الاحترافية */ outline: none; text-transform: uppercase; font-size: 15px; }
.cp-presets-title { font-size: 14px; color: #fff; margin-bottom: 12px; font-weight: bold; }
.cp-presets-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 25px; }
.cp-preset-item { aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 1px solid #333; transition: transform 0.1s; }
.cp-preset-item:active { transform: scale(0.8); }
.cp-actions { display: flex; justify-content: flex-end; gap: 25px; }
.cp-btn { color: #4a90e2; font-weight: bold; cursor: pointer; font-size: 15px; padding: 5px; }


/* تأثير دوران زر التحديث */
@keyframes spinSync { 100% { transform: rotate(-360deg); } }
.spin-sync { animation: spinSync 1s linear infinite; pointer-events: none; opacity: 0.7; }


/* زر (+) بجانب ملصق السعر الأصلي للكروس-هير (السعر نفسه يرسمه LightweightCharts).
   .custom-crosshair-label = الهيكل/جسر العجلة (display + الموضع)، right يُضبط من JS = عرض محور السعر.
   .tsr-crosshair-plus = الشكل المرئي فقط: مربع صغير بارتفاع ملصق السعر الأصلي (~23px)،
   أيقونة دائرة+زائد رفيعة (~15px)، نفس لون ملصق الكروس-هير الأصلي في الثيمين */
.custom-crosshair-label {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-tooltip);
  cursor: pointer;
  transition: none !important; /* تم إلغاء الأنيميشن */
}
.tsr-crosshair-plus {
  box-sizing: border-box;
  width: 22px;
  height: 22px; /* = altura del ملصق السعر الأصلي (12px font → 22px، مقاس بالـ canvas) */
  padding: 0;
  background: #2A2E39; /* نفس TSR_getCrosshairLabelBg() في JS */
  color: #ffffff;
  border-radius: 3px 0 0 3px; /* الجانب الأيمن مربع ليلتصق بالملصق الأصلي */
}
:root.light .tsr-crosshair-plus {
  background: #131722;
}
.tsr-crosshair-plus:hover {
  filter: brightness(1.25) !important; /* .custom-crosshair-label يمنع filter:none، لذلك !important */
}
.tsr-crosshair-plus:active {
  background: #4a90e2 !important;
}
.tsr-crosshair-plus .plus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.tsr-crosshair-plus .plus-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* كبسولة الإجراءات للخطوط (محدثة لتكون ثابتة فوق شريط التاريخ) */
.line-action-capsule {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 24px;
  border-radius: 30px;
  background: rgba(38,43,52,0.95);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  z-index: var(--z-dialog-top); /* رفعناها لتكون فوق المؤشر السفلي دائماً */
  bottom: 40px; /* الارتفاع الدقيق عن شريط التاريخ السفلي */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.2s;
}
:root.light .line-action-capsule {
  background: #4a90e2;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.lac-btn {
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.1s;
}
.lac-btn:active {
  opacity: 0.5;
  transform: scale(0.85);
}
.lac-btn.lac-delete { color: #ff5252; }
:root.light .lac-btn.lac-delete { color: #ffdde0; }


/* 🚀🚀 حزمة التسريع القصوى (GPU & Rendering) 🚀🚀 */
/* 1. إجبار المتصفح على استخدام كارت الشاشة (GPU) للشارت والواجهات الأساسية */
.view-active, #main-chart-wrapper, #tvchart, #tvchart-indicator,
#second-tvchart, [id^="tvchart-"] {
    /* 🔧 CSS PHASE G PARITY FIX: same extension as the touch-action rule
       above (line ~983) — #second-tvchart and every generic tvchart-N
       inner container get the exact same GPU hints Chart 1 already has.
       Nothing removed, nothing changed for the existing selectors. */
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 1.1 تسريع القوائم الجانبية والمنبثقة (دون إفساد كود إخفائها الأصلي) */
.side-drawer, .modal, .acc-ctx-menu, .bulk-sheet, .floating-action-container, .pwd-modal, .demo-modal, .ringtone-box {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 1.2 تسريع النوافذ التي تحرك opacity فقط (بدون transform على نفس العنصر) */
.drawer-overlay, .charts-mgr-overlay, .tf-modal-overlay, .bulk-overlay {
    will-change: opacity;
    backface-visibility: hidden;
}

/* 1.3 تسريع اللوحة التي تحرك transform فقط (بدون opacity) */
.quote-ctx-menu {
    will-change: transform;
    backface-visibility: hidden;
}


/* Welcome Modal Style - TsrTrader */
#tsr-welcome-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    z-index: var(--z-critical); display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.tsr-welcome-box {
    background: var(--bg2); /* يتغير تلقائياً حسب الثيم */
    border-radius: 12px; width: 100%; max-width: 380px;
    padding: 24px; border: 1px solid var(--border);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}
.tsr-welcome-header {
    font-size: 18px; font-weight: 700; text-align: center; color: var(--text);
    margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.tsr-welcome-body {
    font-size: 12.5px; color: var(--text2); line-height: 1.5;
    max-height: 320px; overflow-y: auto; margin-bottom: 20px;
}
.tsr-welcome-body p { margin-bottom: 12px; }
.tsr-welcome-body b { color: var(--accent); cursor: pointer; }
.tsr-welcome-actions { display: flex; gap: 10px; margin-bottom: 15px; }
.tsr-btn-accept {
    flex: 1; background: #2962ff; color: #fff; padding: 12px; border-radius: 25px;
    text-align: center; font-weight: 700; cursor: pointer; font-size: 14px;
}
.tsr-btn-refuse {
    flex: 1; border: 1px solid #444; color: #4a90e2; padding: 12px; border-radius: 25px;
    text-align: center; font-weight: 500; cursor: pointer; font-size: 14px;
}
.tsr-welcome-footer {
    font-size: 11px; color: var(--text4); text-align: left; line-height: 1.4;
    padding-top: 10px; border-top: 1px solid var(--border);
}

/* تنسيق قائمة الخيارات للزوج - متوافق مع الوضعين */
.quote-ctx-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg2);
    border-radius: 15px 15px 0 0;
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1);
    border-top: 1px solid var(--border);
}

#quote-ctx-overlay.show .quote-ctx-menu {
    transform: translateY(0);
}

.qc-header {
    padding: 18px 20px;
    font-size: 13px;
    color: var(--text3);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}

.qc-item {
    padding: 16px 20px;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s;
}

.qc-item:active {
    background: var(--bg3);
}



.radial-menu,
.rm-item,
.tf-modal,
.tsr-dialog-card,
.tsr-picker-card,
.charts-mgr-card,
.bnf-modal,
.bulk-sheet,
.acc-ctx-menu,
.price-popup-menu,
.j-dropdown-menu,
.floating-action-container {
  animation: none !important;
  transition: none !important;
}
/* Script Editor Styling */
#tsr-script-overlay {
    z-index: var(--z-critical-max) !important; /* ليكون فوق كل شيء */
}

#tsr-editor-area::placeholder {
    color: #555;
}

:root.light #tsr-script-overlay .tsr-dialog-card {
    background-color: var(--bg2) !important;
}

/* تنسيق شريط التمرير داخل المحرر */
#tsr-editor-area::-webkit-scrollbar {
    width: 6px;
}
#tsr-editor-area::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}


/* ============================================================
   TSR UNIFIED TRADE BAR — Normalized for Chart 1 & Chart 2
   يحل تعارض CSS ويوحد حجم أزرار اللوت في الشارتين
   ============================================================ */

.quick-trade-bar {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 38px !important;
    background: var(--bg);
    align-items: stretch;
    border-bottom: 1px solid var(--border);
    z-index: var(--z-menu);
    box-sizing: border-box;
}
.quick-trade-bar.active { display: flex !important; }

.lot-control {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--header-bg) !important;
    width: 40% !important;
    flex-shrink: 0 !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* إلغاء كل التعريفات السابقة المتعارضة بتعريف واحد نهائي */
.lot-control .material-symbols-outlined {
    font-size: 20px !important;
    color: var(--text3) !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.lot-control .material-symbols-outlined:active {
    color: var(--text) !important;
}

.lot-control .lot-size {
    flex: 1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text) !important;
    min-width: 0 !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}
.lot-control .lot-size::-webkit-inner-spin-button,
.lot-control .lot-size::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
/* إبعاد الأسهم عن BUY/SELL */
.lot-control {
    padding: 0 10px !important;
}

#hist-sym-dropdown:not(:has(#hist-sym-options-list > div)) #hsopt-all {
    border-bottom: none !important;
}
#hist-sym-options-list > div:last-child {
    border-bottom: none !important;
}


.theme-switch-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-dialog-theme);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.theme-switch-overlay.show{display:flex;opacity:1}
.theme-switch-card{background:var(--bg2);width:85%;max-width:340px;border-radius:14px;padding:24px;box-shadow:0 15px 50px rgba(0,0,0,.5)}
.ts-title{font-size:20px;font-weight:600;color:var(--text);margin-bottom:22px}
.ts-radio-row{display:flex;align-items:center;gap:16px;padding:12px 0;cursor:pointer}
.ts-radio-circle{width:22px;height:22px;border-radius:50%;border:2px solid var(--text4);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}
.ts-radio-row.active .ts-radio-circle{border-color:#4a90e2}
.ts-radio-inner{width:11px;height:11px;background:#4a90e2;border-radius:50%;display:none}
.ts-radio-row.active .ts-radio-inner{display:block}
.ts-radio-label{font-size:16px;color:var(--text2)}
.ts-radio-row.active .ts-radio-label{color:var(--text)}
.ts-mode-title{font-size:15px;font-weight:600;color:var(--text);margin:20px 0 12px}
.ts-mode-pill{display:flex;background:var(--bg3);border-radius:30px;overflow:hidden;border:1px solid var(--border)}
.ts-mode-btn{flex:1;text-align:center;padding:12px 0;font-size:15px;font-weight:600;color:var(--text3);cursor:pointer;transition:.15s}
.ts-mode-btn.active{background:rgba(74,144,226,.22);color:#4a90e2}
.ts-actions{display:flex;justify-content:flex-end;gap:24px;margin-top:24px}
.ts-btn{font-size:15px;font-weight:700;cursor:pointer;padding:6px;color:#4a90e2}
.ts-btn:active{opacity:.6}

/* تكبير نافذة اختيار الفريمات الزمنية */
.tf-modal {
  max-width: 400px !important;
  width: 92% !important;
  padding: 26px !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
}
.tf-btn {
  padding: 13px 0 !important;
  font-size: 15px !important;
}
.tf-category {
  font-size: 15px !important;
  margin: 18px 0 12px !important;
}


/* ============================================================
   TSR UNIFIED DIVIDER RENDERING ENGINE (V-FINAL-2)
   حل جذري: نلغيو كل الـ border-bottom المتضاربة (بنفس مستوى
   specificity ديال القواعد القديمة ID+class) ونستبدلوها بـ
   box-shadow موحد لكل عناصر القوائم المنسدلة في التطبيق كامل.
   ============================================================ */
#symbol-dropdown .symbol-dropdown-item,
#second-sym-dropdown .symbol-dropdown-item,
.symbol-dropdown-item,
.acc-ctx-item,
.no-ot-item,
.j-dropdown-item,
.ind-item,
.bulk-item,
.hist-sym-option,
.demo-field,
.demo-select-row,
.demo-check-row,
.settings-row,
.ringtone-item,
.tsr-picker-item,
.qc-item,
.add-obj-item,
.b-item,
.bi-item,
.tsr-custom-scheme-item {
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 0 var(--border) !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* إلغاء الخط عن آخر عنصر في كل قائمة (بنفس مستوى الـ specificity) */
#symbol-dropdown .symbol-dropdown-item:last-child,
#second-sym-dropdown .symbol-dropdown-item:last-child,
.symbol-dropdown-item:last-child,
.acc-ctx-item:last-child,
.no-ot-item:last-child,
.j-dropdown-item:last-child,
.ind-item:last-child,
.bulk-item:last-child,
.hist-sym-option:last-child,
.ringtone-item:last-child,
.tsr-picker-item:last-child,
.qc-item:last-child,
.add-obj-item:last-child,
.tsr-custom-scheme-item:last-child {
    box-shadow: none !important;
}

/* داخل النوافذ الزرقاء (Light mode popups) نستعمل خط أبيض شفاف موحد بدل rgba متفرقة */
:root.light #symbol-dropdown .symbol-dropdown-item,
:root.light #second-sym-dropdown .symbol-dropdown-item,
:root.light .acc-ctx-item,
:root.light .no-ot-item,
:root.light .j-dropdown-item,
:root.light .tsr-picker-item,
:root.light .qc-item {
    box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.28) !important;
}
:root.light #symbol-dropdown .symbol-dropdown-item:last-child,
:root.light #second-sym-dropdown .symbol-dropdown-item:last-child,
:root.light .acc-ctx-item:last-child,
:root.light .no-ot-item:last-child,
:root.light .j-dropdown-item:last-child,
:root.light .tsr-picker-item:last-child,
:root.light .qc-item:last-child {
    box-shadow: none !important;
}
#main-chart-wrapper, #second-chart-wrapper, [id^="chart-wrapper-"] {
    margin: 0 !important;
}

/* 🛠️ FIX V2: نفس المعاملة (GPU layer) للشارت 1 والشارت 2 معاً —
   كل صندوق كيتصفط على شبكة البكسل الحقيقية للجهاز فيبان البوردر حاد
   فالأربع جوانب، بدل ما كان كيبان مضبب فوق/تحت */
/* 🔧 CSS PHASE G PARITY FIX: [id^="chart-wrapper-"] (Chart 3-16's own
   wrapper id convention, per app.js's TSR_createChartDOM) added to the
   three selector lists below — same GPU pixel-snapping treatment and same
   2px transparent border reservation Chart 1/2 already had, extended
   additively. The original "FIX V2" comment above and its two selectors
   are untouched. */
#main-chart-wrapper,
#second-chart-wrapper,
[id^="chart-wrapper-"] {
    box-sizing: border-box !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}


#main-chart-wrapper, #second-chart-wrapper, [id^="chart-wrapper-"] {
    box-sizing: border-box !important;
    border-width: 2px !important;
    border-style: solid !important;
    /* 🔧 UNWANTED THEME-LINE FIX: كانت هنا var(--border) — بورDER ظاهر
       دائماً بلون الثيم حول كل شارت (Chart 1/Chart 2) حتى ولو ماشي هو
       الشارت النشيط، وكيبدّل لونو مع كل تبديل ثيم (هوما "الخطوط الرفيعة"
       المشتكى منها). حطيناها transparent باش الخط يختفي بصرياً، وحافظنا

       على border-width/border-style باش الحيز (box model) وGPU pixel
       snapping trick اللي فوق مايتبدلوش — الفوكس الأزرق ديال active-win
       تحت باقي خدام بلا ما يتمس. */
    border-color: transparent !important;
}
#main-chart-wrapper.chart-window-box.active-win, #second-chart-wrapper.chart-window-box.active-win,
[id^="chart-wrapper-"].chart-window-box.active-win {
    /* 🔧 PHASE UI-2: زدنا هاد selector الثالث باش Chart 3-16 (اللي
       IDs ديالهم ديناميكية chart-wrapper-N، عكس Chart 1/2 اللي IDs
       ديالهم ثابتة) يشاركو فنفس البوردر الأزرق. .active-win كيتزاد
       عليهم فعلاً من TSR_setActiveGenericChart() فـapp.js، غير كانت
       CSS ماكاتغطيهومش. نفس اللون/العرض/النمط، ماشي نظام جديد. */
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #2d80f6 !important;
}

/* ============================================================
   🆕 PHASE UI-3A — Generic Chart Header (Chart 3-16)
   بنيان فقط: عرض الرمز/الفريم الحاليين، بلا أي وظيفة (symbol
   picker / settings / close كيجيو فمراحل جايين). كيعاود نفس
   لغة العنوان ديال Chart 1/2 (.pair-title/.pair-name/.timeframe:
   font-size 13px, weight 500, لون var(--accent) للرمز، var(--text)
   للفريم)، ونفس نمط overlay بلا ما يبدل حجم الشارت (position:
   absolute فوق wrapper، بلا padding/margin على container). z-index
   من الجدول الموجود (--z-base-10) — ماشي رقم مخترع. بلا ألوان ولا
   بوردر جداد — .active-win ديال UI-2 خدام بحالو تحت هاد الهيدر.
   ============================================================ */
.generic-chart-header {
    position: absolute;
    top: 0;
    left: 0;
    /* 🐛 FIX (Settings/Close overlap Price Scale): كانت right:0 —
       الهيدر كيوصل لآخر الشارت، والـspacer كيدفع settings/close لأقصى
       اليمين، فين كاين right price scale ديال LightweightCharts
       (الأرقام 140000/120000...). 50px هي نفس القيمة اللي الكود
       الأصلي كيستعملها فنفس البقعة (titleDiv عند Chart 1 و Chart 2:
       padding-right:50px) — استرجاع نفس الاتفاقية، ماشي رقم مخترع. */
    right: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 8px 8px 0 10px;
    pointer-events: none; /* الهيدر ماكيحجبش التفاعل مع الشارت */
    z-index: var(--z-base-10);
}
.generic-symbol-btn, .generic-tf-btn {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
}
.generic-symbol-btn {
    color: var(--accent);
    max-width: 42%;
    margin-right: 6px;
}
.generic-tf-btn {
    color: var(--text);
    flex-shrink: 0;
}
.generic-header-spacer {
    flex: 1 1 auto;
    min-width: 4px;
    pointer-events: none;
}
.generic-settings-btn, .generic-close-btn {
    /* FIX (Problem 4): بلا click handler حقيقي فapp.js — Chart 1 ماعندوش
       هاد الأيقونات فوق الشارت أصلا، الإغلاق/التكبير ديال 3-16 كيدوز من
       pa-lock-capsule (long-press). خبيناها حتى تولي functional فمرحلة جاية. */
    display: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text3);
    pointer-events: auto;
    cursor: pointer;
}
.generic-close-btn { margin-left: 2px; }

/* ============================================================
   TSR — KILL ALL POPUP BORDERS & PIXELATED SHADOWS (ONE BLOCK)
   حطها قبل </head> أو فآخر آخر <style> بلوك ديال TsrTrader
   ============================================================ */
.radial-menu,
.tf-modal,
.tf-modal-overlay,
.tsr-dialog-card,
.tsr-dialog-overlay,
.tsr-picker-card,
.tsr-picker-overlay,
.charts-mgr-card,
.charts-mgr-overlay,
.bnf-modal,
.broker-not-found-overlay,
.bulk-sheet,
.bulk-overlay,
.acc-ctx-menu,
.acc-ctx-overlay,
.j-dropdown-menu,
.floating-action-container,
.quote-ctx-menu,
#quote-ctx-overlay,
.demo-modal,
.demo-modal-overlay,
.pwd-modal,
.pwd-modal-overlay,
.ringtone-box,
#ringtone-overlay,
.modify-modal,
.cp-modal,
.cp-overlay,
.theme-switch-card,
.theme-switch-overlay,
.tf-limit-modal,
.tf-limit-overlay,
.lp-group,
.tsr-welcome-box,
#tsr-welcome-overlay,
.trade-ctx-header,
#trade-ctx-overlay .bulk-sheet,
#no-sym-dropdown,
#no-order-type-dropdown,
#symbol-dropdown,
#second-sym-dropdown,
.generic-sym-dropdown,
.no-ot-dropdown,
#hist-period-dropdown,
#hist-sort-dropdown,
#hist-sym-dropdown,
#trade-sort-dropdown,
#tsr-custom-scheme-dropdown,
.tsr-custom-scheme-dd,
.ind-list,
.ind-header-bar,
#tsr-script-overlay .tsr-dialog-card,
#pa-lock-capsule,
#tsr-nav-capsule,
.line-action-capsule,
.custom-crosshair-label,
.price-popup-menu,
#price-popup-menu-2 {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    outline: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* حذف كل الحدود الفرعية داخل هاد النوافذ (borders مركّبة كتزيد بكسلة) */
.radial-menu *,
.tf-modal *,
.tsr-dialog-card *,
.tsr-picker-card *,
.charts-mgr-card *,
.bnf-modal *,
.bulk-sheet *,
.acc-ctx-menu *,
.j-dropdown-menu *,
.quote-ctx-menu *,
.demo-modal *,
.pwd-modal *,
.ringtone-box *,
.modify-modal *,
.cp-modal *,
.theme-switch-card *,
.tf-limit-modal *,
.tsr-welcome-box *,
#no-sym-dropdown *,
#no-order-type-dropdown *,
#symbol-dropdown *,
#second-sym-dropdown *,
.generic-sym-dropdown *,
#hist-period-dropdown *,
#hist-sort-dropdown *,
#hist-sym-dropdown *,
#trade-sort-dropdown *,
.tsr-custom-scheme-dd * {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
}

/* إزالة أي بلور/backdrop-filter كيسبب aliasing على حواف النوافذ */
.tsr-welcome-overlay,
#tsr-welcome-overlay,
.cp-overlay,
.demo-modal-overlay,
.pwd-modal-overlay,
#ringtone-overlay,
.bulk-overlay,
.acc-ctx-overlay,
#quote-ctx-overlay,
.tf-modal-overlay,
.tf-limit-overlay,
.tsr-dialog-overlay,
.tsr-picker-overlay,
.charts-mgr-overlay,
.broker-not-found-overlay,
.theme-switch-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* القسم 3: أنماط نافذة المؤشرات (كانت داخل <style> وسط body) */
    .ind-header-bar { display:flex; align-items:center; padding:calc(15px + env(safe-area-inset-top)) 15px 15px; border-bottom:1px solid var(--border); background:var(--header-bg); z-index:var(--z-header); }
    .ind-title { flex:1; margin-left:15px; font-size:16px; font-weight:500; color:var(--text); }
    .ind-header-actions { display:flex; gap:20px; align-items:center; color:var(--text2); }
    .ind-header-actions .material-symbols-outlined { cursor:pointer; font-size:24px; transition:color 0.2s; }
    .ind-header-actions .material-symbols-outlined:active { color:var(--text); }
    .ind-section-head { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; background:var(--bg); border-bottom:1px solid var(--border); }
    .ind-section-title { font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px; }
    .ind-add-btn { color:var(--accent); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .ind-list { display:flex; flex-direction:column; background:var(--bg2); }
    .ind-item { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border2); transition:background 0.2s; cursor:pointer; }
    .ind-item:active { background:var(--bg3); }
    .ind-item-name { font-size:15px; color:var(--text); flex:1; }
    .ind-item-actions { display:flex; gap:18px; align-items:center; color:var(--text3); }
    .ind-checkbox { width:22px; height:22px; border:2px solid var(--text4); border-radius:4px; display:flex; align-items:center; justify-content:center; display:none; }
    .ind-checkbox.checked { background:var(--accent); border-color:var(--accent); }
    .ind-checkbox .material-symbols-outlined { font-size:16px; color:#fff; display:none; }
    .ind-checkbox.checked .material-symbols-outlined { display:block; }
    .edit-mode .ind-checkbox { display:flex; }
    .edit-mode .ind-visibility-btn { display:none; }