/* ── VECTOR MIRROR · עיצוב ─────────────────────────────────────────────
   הפלטה היא של PurplEdge: סגול-כהה + ציאן על רקע פחם. המראה צריכה
   להיראות כמו המשך של וקטור, לא כמו כלי אחר.                        */

:root{
  --bg:#0c0a11; --panel:#141019; --panel2:#1b1624; --line:#2a2237;
  --ink:#ece9f3; --dim:#9a92b0; --faint:#857d9e;   /* QA 30.09: was #655d7d = 2.88:1 on panel2; now 4.57:1 (≥4.5 for 9.5–11.5px hints) */
  --purple:#8b5cf6; --purple-dim:#5b3fa8; --cyan:#22d3ee;
  --buy:#34d399; --sell:#f4485f;
  --amber:#f0a848;
  --up:#26a37b; --down:#d6425a;
  --r:9px;
  --bar:46px; --rail:330px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow:hidden;
  font:14px/1.5 "Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
.hidden{display:none !important}
.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* ══ סרגל ══════════════════════════════════════════════════════════ */
#bar{
  height:var(--bar);display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-weight:800;letter-spacing:.5px;font-size:15px;white-space:nowrap}
.brand span{color:var(--purple);margin-right:5px}
.spacer{flex:1}

.srcchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim);background:rgba(0,0,0,.25)}
.srcchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.srcchip.live{color:var(--buy);border-color:rgba(46,226,127,.45)}
.srcchip.live::before{background:var(--buy);box-shadow:0 0 6px var(--buy);animation:srcpulse 1.4s ease-in-out infinite}
.srcchip.poll{color:var(--amber);border-color:rgba(243,183,74,.4)}
.srcchip.poll::before{background:var(--amber)}
@keyframes srcpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ── תוספים ─────────────────────────────────────────────────────── */
#mods-top:empty,#mods-rail:empty{display:none}
/*  ⚠ כרטיסי-התוספים חסומים בגובה ונגללים בעצמם. בלי זה (נמדד 17.09 עם
    7 כרטיסים) הם דוחפים את כרטיס-העסקה ל-top:1463 בחלון של 900 — כלומר
    כפתור «שלח» יורד מתחת לקצה המסך. מסך-מסחר שבו אי-אפשר להגיע לכפתור
    הוא לא «צפוף», הוא שבור.  */
/*  ⚠ ‏flex:0 0 auto ולא 0 1 auto — עם shrink המסילה דחסה את הכרטיסים
    לגובה **אפס** (נמדד 17.09: mods_h=0 עם 7 כרטיסים). התקרה היא
    max-height, לא הכיווץ.  */
#mods-rail{display:flex;flex-direction:column;flex:0 0 auto;
  max-height:40vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#mods-rail::-webkit-scrollbar{width:8px}
#mods-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/*  רשת-ביטחון: גם אם משהו יגלוש בכל זאת, המסילה עצמה נגללת.  */
#rail{overflow-y:auto}

/*  ── סדר המסילה: כרטיס-העסקה ראשון, תמיד ─────────────────────────
    ⚠ ב-DOM ‎#mods-rail‎ יושב **לפני** הטיקט, כי שם התוספים מוסיפים
    כרטיסים. עם תשעה תוספים (נמדד 17.09, חלון 900): מודים 360px +
    טיקט 585px ⇒ ‎#tk-send‎ נוחת ב-946, כלומר מתחת לקצה המסך.
    מסך-מסחר שבו הכפתור דורש גלילה הוא שבור, ולכן הסדר נקבע כאן
    ולא ב-HTML: קודם מה שפועלים איתו, אחר-כך מה שמסתכלים עליו.
    ‎order‎ ולא שינוי-DOM — כך אף תוסף לא צריך לדעת על זה.  */
#rail > .rail-head:not(.sep){order:0}
#ticket{order:0;flex:none}
#mods-rail{order:1}
#rail > .rail-head.sep,#signals,#positions,#journal{order:2}
.mod-card{border-bottom:1px solid var(--line);padding:8px 10px}
.mod-card .mod-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.mod-card .mod-head h2{margin:0;font-size:11.5px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
.mod-card .mod-body{font-size:12.5px}
.mod-kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px}
.mod-kv b{font-weight:600;color:var(--txt)}
.mod-btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:4px 9px;font:inherit;font-size:12px;cursor:pointer}
.mod-btn:hover{border-color:var(--purple-dim)}
.mod-btn.primary{background:var(--purple-dim);border-color:transparent;color:#fff}
.mod-btn.danger{background:#3a1420;border-color:#7a2f3a;color:#ffb3bb}
.mod-wall{position:fixed;inset:0;background:rgba(6,5,12,.92);z-index:80;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px}
.mod-wall .box{max-width:520px}
.mod-wall h1{font-size:26px;margin:0 0 8px}
.mod-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;align-items:center;justify-content:center}
.mod-modal .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;width:min(560px,92vw);max-height:90vh;overflow:auto}
.chips{display:flex;gap:7px}
.chip{
  display:flex;align-items:center;gap:7px;padding:5px 11px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  font-size:12px;transition:border-color .15s;
}
.chip:hover{border-color:var(--purple-dim)}
.chip .lbl{color:var(--dim)}
.chip .val{font-weight:700;font-size:11.5px}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.chip.ok   .dot{background:var(--buy);box-shadow:0 0 7px var(--buy)}
.chip.warn .dot{background:var(--amber)}
.chip.bad  .dot{background:var(--sell)}

.fld{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.fld input,.fld select{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;width:74px;outline:none;
}
.fld.wide select{width:170px}
/*  ⚠ 23.09 — **רוחב לפי תוכן בשני בוררים שגלשו במסך האנגלי.** נמדד:
    ‎#risk‎ גלש ‎63px‎ («Balanced ($150-300)» מול ‎74px‎ שהוקצו) ו-‎#acct‎
    גלש ‎113px‎. בעברית הכיתוב קצר יותר ולכן זה לא נראה קודם — וזה בדיוק
    סוג הדבר שנשבר רק בשפה השנייה. ‎min-width‎ שומר על יישור הסרגל,
    ו-‎max-width‎ מונע מבורר ארוך לדחוף את שאר הפקדים מהמסך. */
/*  הרוחבים נקבעו לפי מדידת-קנבס של האפשרות הארוכה ביותר בכל בורר
    («Aggressive ($300-450)» · «Stocks · Technology»), לא לפי העין. */
.fld select#risk{width:auto;min-width:122px;max-width:150px}
.fld.wide select#acct{width:auto;min-width:104px;max-width:150px;
  text-overflow:ellipsis}
/*  התווית עצמה אינה מקבלת לדחוף את הסרגל: הבורר מתכווץ במקום לגלוש. */
.fld.wide{min-width:0}
.fld.wide select#acct{flex:0 1 auto;overflow:hidden;white-space:nowrap}
/*  ⚠ מסך צר (1366 ומטה): הבוררים מצטמצמים במקום לדחוף. נמדד בבדיקת
    תקציב-המסך שבורר-החשבון חפף את כפתורי-העזרה שמימינו ב-10px. */
@media(max-width:1400px){
  .fld.wide select#acct{min-width:92px;max-width:118px}
  .fld select#risk{min-width:116px;max-width:130px}
  /*  23.09: ב-1390px «Mid $150-300» נצמד ל-«Account» בלי רווח — הבורר והתווית נקראו כמילה אחת */
  .fld.wide{margin-inline-start:10px}
}
.fld input:focus,.fld select:focus{border-color:var(--purple)}

.modes{display:flex;background:var(--panel2);border:1px solid var(--line);
       border-radius:7px;overflow:hidden}
.modes button{
  background:none;border:none;padding:6px 12px;cursor:pointer;
  color:var(--dim);font-size:12px;white-space:nowrap;
  border-left:1px solid var(--line);
}
.modes button:last-child{border-left:none}
.modes button:hover{color:var(--ink)}
.modes button.on{background:var(--purple);color:#fff;font-weight:600}

.icon{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  width:32px;height:30px;cursor:pointer;color:var(--dim);font-size:15px;
}
.icon:hover{color:var(--ink);border-color:var(--purple-dim)}

/* ══ גוף ═══════════════════════════════════════════════════════════ */
main{display:flex;height:calc(100% - var(--bar))}
#chartwrap{flex:1;position:relative;min-width:0}
#chart{width:100%;height:100%;display:block;cursor:crosshair}

#readout{
  position:absolute;top:10px;right:12px;pointer-events:none;
  background:rgba(20,16,25,.9);border:1px solid var(--line);border-radius:7px;
  padding:7px 11px;font-size:11.5px;line-height:1.7;color:var(--dim);
  font-variant-numeric:tabular-nums;backdrop-filter:blur(6px);
}
#readout b{color:var(--ink);font-weight:600}
#readout .o{color:var(--faint)}

#chartmsg{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--faint);font-size:13px;text-align:center;padding:30px;
}

/* ══ מסילה ═════════════════════════════════════════════════════════ */
#rail{
  width:var(--rail);flex:none;background:var(--panel);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
}
.rail-head{
  display:flex;align-items:center;gap:8px;padding:9px 13px;
  border-bottom:1px solid var(--line);
}
.rail-head.sep{border-top:1px solid var(--line)}
.rail-head h2{margin:0;font-size:11.5px;letter-spacing:.13em;
              text-transform:uppercase;color:var(--dim);font-weight:800}
.rail-head .count{
  margin-right:auto;background:var(--purple);color:#fff;font-size:11px;
  font-weight:800;padding:1px 8px;border-radius:10px;min-width:22px;text-align:center;
}
.rail-head .count.zero{background:var(--panel2);color:var(--faint)}
.mini{background:none;border:none;color:var(--faint);cursor:pointer;
      margin-right:auto;font-size:14px}
.mini:hover{color:var(--ink)}

#signals{flex:1;padding:9px;display:flex;flex-direction:column;gap:8px}
#positions,#journal{padding:9px}
.short{max-height:150px;flex:none}

.empty{color:var(--faint);font-size:12px;text-align:center;padding:22px 10px}

/* ── כרטיס הצעה ─────────────────────────────────────────────────── */
.sig{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 12px;position:relative;overflow:hidden;
  animation:in .25s ease-out;
}
@keyframes in{from{opacity:0;transform:translateY(-6px)}}
.sig::before{content:"";position:absolute;inset:0 auto 0 0;width:3px}
.sig.BUY::before {background:var(--buy)}
.sig.SELL::before{background:var(--sell)}
.sig .top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sig .sd{font-weight:800;font-size:12px;padding:2px 8px;border-radius:5px}
.sig.BUY  .sd{background:rgba(52,211,153,.15);color:var(--buy)}
.sig.SELL .sd{background:rgba(244,72,95,.15);color:var(--sell)}
.sig .sm{font-weight:700;font-size:14px}
.sig .ago{margin-right:auto;color:var(--faint);font-size:11px;
          font-variant-numeric:tabular-nums}
.sig .lv{display:flex;gap:14px;font-size:12px;font-variant-numeric:tabular-nums;
         margin-bottom:9px}
.sig .lv div{display:flex;flex-direction:column;gap:1px}
.sig .lv span{color:var(--faint);font-size:10px}
.sig .lv b{font-weight:600}
.sig .lv .s b{color:var(--sell)}
.sig .lv .t b{color:var(--buy)}
.sig .acts{display:flex;gap:6px}
.sig .acts button{
  flex:1;padding:6px;border-radius:6px;cursor:pointer;font-size:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--dim);
}
.sig .acts button:hover{color:var(--ink);border-color:var(--purple-dim)}
.sig .acts button.take{background:var(--purple);border-color:var(--purple);
                       color:#fff;font-weight:600}
.sig .acts button.take:hover{filter:brightness(1.12)}
.sig.done{opacity:.5}
.sig .badge{font-size:11px;color:var(--faint);text-align:center;padding:5px}

/* ── שורות ─────────────────────────────────────────────────────── */
.row-item{
  display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:12px;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.row-item:last-child{border-bottom:none}
.row-item .s{font-weight:700}
.row-item .q{color:var(--dim)}
.row-item .p{margin-right:auto;color:var(--faint);font-size:11px}
.row-item .pl.up{color:var(--buy)} .row-item .pl.down{color:var(--sell)}
.row-item.BUY .s{color:var(--buy)} .row-item.SELL .s{color:var(--sell)}

/* ══ חלונות ════════════════════════════════════════════════════════ */
.modal{
  position:fixed;inset:0;background:rgba(8,6,12,.78);z-index:60;
  display:grid;place-items:center;backdrop-filter:blur(3px);
  animation:fade .15s;
}
@keyframes fade{from{opacity:0}}
.sheet{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(430px,92vw);padding:20px 22px;
  box-shadow:0 22px 70px rgba(0,0,0,.6);animation:pop .2s ease-out;
}
.sheet.wide{width:min(560px,94vw)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sheet-head h3{margin:0;font-size:17px;font-weight:750}
.sheet-head .side{font-weight:800;font-size:12px;padding:3px 10px;border-radius:6px}
.sheet-head .side.BUY {background:rgba(52,211,153,.15);color:var(--buy)}
.sheet-head .side.SELL{background:rgba(244,72,95,.15);color:var(--sell)}
.sheet-head .x{margin-right:auto;background:none;border:none;color:var(--faint);
               cursor:pointer;font-size:16px}
.sheet-head .x:hover{color:var(--ink)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:15px}
.cell{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
      padding:9px 11px;text-align:center}
.cell span{display:block;color:var(--faint);font-size:10.5px;margin-bottom:3px}
.cell b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cell.stop b{color:var(--sell)} .cell.tgt b{color:var(--buy)}

.sizer{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sizer label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.sizer input{background:var(--panel2);border:1px solid var(--line);border-radius:7px;
             padding:7px 10px;width:76px;text-align:center;font-weight:700;font-size:15px}
.sizer input:focus{border-color:var(--purple);outline:none}
.calc{font-size:11.5px;color:var(--faint);line-height:1.5}
.calc b{color:var(--dim)}

.note{font-size:11.5px;color:var(--faint);margin:0 0 14px;line-height:1.6}

.acts{display:flex;gap:9px}
.acts button{flex:1;padding:11px;border-radius:8px;cursor:pointer;
             font-size:13.5px;font-weight:600;border:1px solid var(--line)}
.acts .ghost{background:var(--panel2);color:var(--dim)}
.acts .ghost:hover{color:var(--ink)}
.acts .go{background:var(--purple);border-color:var(--purple);color:#fff;flex:1.7}
.acts .go:hover{filter:brightness(1.12)}
.acts .go:disabled{opacity:.45;cursor:not-allowed;filter:none}

.err{margin-top:11px;padding:9px 11px;border-radius:7px;font-size:12px;
     background:rgba(244,72,95,.1);border:1px solid rgba(244,72,95,.3);color:#ffa8b5}

/* ── לשוניות ────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:none;padding:8px 13px;cursor:pointer;
             color:var(--dim);font-size:12.5px;border-bottom:2px solid transparent}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--purple);font-weight:600}
.tab{display:none} .tab.on{display:block}

.hint{font-size:11.5px;color:var(--faint);line-height:1.65;margin:0 0 15px;
      padding:9px 11px;background:var(--panel2);border-radius:7px;
      border-right:2px solid var(--purple-dim)}
.row{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.row>span{width:110px;flex:none;color:var(--dim);font-size:12.5px}
.row input:not([type=checkbox]){flex:1;background:var(--panel2);
  border:1px solid var(--line);border-radius:7px;padding:8px 11px;outline:none}
.row input:focus{border-color:var(--purple)}
.row.check{gap:9px}
.row.check input{width:16px;height:16px;accent-color:var(--purple)}
.rowacts{display:flex;gap:9px;margin-top:15px}
.rowacts button{padding:9px 18px;border-radius:7px;cursor:pointer;
                font-size:13px;font-weight:600;border:1px solid var(--line)}
.rowacts .go{background:var(--purple);border-color:var(--purple);color:#fff}
.rowacts .ghost{background:var(--panel2);color:var(--dim)}
.msg{margin-top:12px;padding:9px 11px;border-radius:7px;font-size:12px}
.msg.ok {background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#7ee0bb}
.msg.bad{background:rgba(244,72,95,.1);border:1px solid rgba(244,72,95,.3);color:#ffa8b5}

.kv{font-size:12.5px}
.kv div{display:flex;padding:7px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:none}
.kv span{width:120px;color:var(--faint)}
.kv b{font-weight:600;font-family:Consolas,monospace;font-size:11.5px;
      word-break:break-all;direction:ltr;text-align:left}

/* ══ הודעות ════════════════════════════════════════════════════════ */
#toasts{position:fixed;bottom:18px;left:18px;z-index:90;
        display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--panel);border:1px solid var(--line);border-right:3px solid var(--purple);
  border-radius:8px;padding:10px 15px;font-size:12.5px;min-width:210px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);animation:slide .22s ease-out;
}
@keyframes slide{from{opacity:0;transform:translateX(-14px)}}
.toast.ok {border-right-color:var(--buy)}
.toast.bad{border-right-color:var(--sell)}

@media(max-width:1100px){
  #rail{width:280px}
  .fld.wide select{width:120px}
}

/* ══ אשף ההתקנה ═══════════════════════════════════════════════════ */
.wz{padding:24px 26px}
.wz h3{margin:0 0 8px;font-size:19px;font-weight:750}
.wz-p{font-size:12.5px;color:var(--dim);line-height:1.7;margin:0 0 18px}
.wz-p b{color:var(--ink)}
.wz-note{font-size:11.5px;color:var(--faint);line-height:1.6;margin:14px 0 0}

.wz-dots{display:flex;gap:4px;margin-bottom:22px}
.wz-dot{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
        font-size:10.5px;color:var(--faint);position:relative}
.wz-dot::before{content:"";position:absolute;top:11px;right:50%;left:-50%;
                height:1px;background:var(--line);z-index:0}
.wz-dot:first-child::before{display:none}
.wz-dot i{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
          background:var(--panel2);border:1px solid var(--line);font-style:normal;
          font-size:11px;font-weight:700;position:relative;z-index:1}
.wz-dot.on{color:var(--ink)}
.wz-dot.on i{background:var(--purple);border-color:var(--purple);color:#fff}
.wz-dot.done{color:var(--dim)}
.wz-dot.done i{background:var(--green-bg,#0f2620);border-color:var(--buy);color:var(--buy)}

.wz-body{min-height:196px}
.wz-accts{display:flex;flex-direction:column;gap:7px;max-height:200px;overflow-y:auto}
.wz-acct{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
         background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.wz-acct:hover{border-color:var(--purple-dim,#5b3fa8)}
.wz-acct input{accent-color:var(--purple);width:15px;height:15px}
.wz-acct div{display:flex;flex-direction:column;gap:2px}
.wz-acct b{font-size:13px}
.wz-acct span{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.wz-acct:has(input:checked){border-color:var(--purple);background:#1d1730}
.wz-empty{color:var(--faint);font-size:12px;text-align:center;padding:26px}

.wz-skip{display:block;margin:14px auto 0;background:none;border:none;
         color:var(--faint);font-size:11.5px;cursor:pointer;text-decoration:underline}
.wz-skip:hover{color:var(--dim)}

/* אזהרת חוזה-מלא מול מיקרו */
#sym.warn{border-color:var(--amber);box-shadow:0 0 0 1px rgba(240,168,72,.22)}

/* ══ פקדי הגרף ═════════════════════════════════════════════════════ */
#ctools{
  position:absolute;top:9px;left:12px;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;z-index:5;font-size:11.5px;
}
#ctools .grp{display:flex;background:rgba(20,16,25,.92);border:1px solid var(--line);
             border-radius:6px;overflow:hidden;backdrop-filter:blur(6px)}
#ctools .grp button{
  background:none;border:none;border-left:1px solid var(--line);
  padding:4px 9px;cursor:pointer;color:var(--dim);font-size:11.5px;line-height:1.5;
  min-width:26px;
}
#ctools .grp button:last-child{border-left:none}
#ctools .grp button:hover{color:var(--ink);background:rgba(139,92,246,.14)}
#ctools .grp button.on{background:var(--purple);color:#fff;font-weight:600}
#lvsrc button.on[data-src="tv"]    {background:#06b6d4;color:#04212a}
#lvsrc button.on[data-src="vector"]{background:#8b5cf6;color:#fff}

#ctools .tfmin{
  display:flex;align-items:center;gap:5px;color:var(--faint);
  background:rgba(20,16,25,.92);border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;backdrop-filter:blur(6px);
}
#ctools .tfmin select{
  background:none;border:none;color:var(--dim);font-size:11.5px;outline:none;cursor:pointer;
}
#ctools .tfmin select option{background:var(--panel)}

#ctools .lvkey{
  display:flex;gap:9px;color:var(--faint);font-size:10.5px;
  background:rgba(20,16,25,.85);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;backdrop-filter:blur(6px);
}
#ctools .lvkey span{display:flex;align-items:center;gap:4px}
#ctools .lvkey i{width:9px;height:2.5px;border-radius:2px;display:inline-block}

/* הקריאה יורדת כדי לא להתנגש בפקדים */
#readout{top:44px}

@media(max-width:1250px){
  #ctools .lvkey{display:none}
}

/* מקרא הטיים־פריימים — עולה בבהירות עם הטיים־פריים, כמו על הגרף */
#ctools .lvkey.tfk span{
  font-family:Consolas,monospace;font-size:10px;opacity:.42;
  padding:0 2px;letter-spacing:.02em;
}
#ctools .lvkey.tfk span:nth-child(2){opacity:.52}
#ctools .lvkey.tfk span:nth-child(3){opacity:.62}
#ctools .lvkey.tfk span:nth-child(4){opacity:.74}
#ctools .lvkey.tfk span:nth-child(5){opacity:.87}
#ctools .lvkey.tfk span.hi{opacity:1;color:var(--ink);font-weight:700}
#lvsrc button.on[data-src="pl"]{background:#06b6d4;color:#04212a}
#lvsrc button.on[data-src="vp"]{background:#8b5cf6;color:#fff}

/* ══ בורר סוג־רמה ══════════════════════════════════════════════════ */
#lvkind button{display:flex;align-items:center;gap:5px}
#lvkind button i{width:9px;height:2.5px;border-radius:2px;display:inline-block;
                 transition:height .12s}
#lvkind button:not(.on){opacity:.4}
#lvkind button:not(.on) i{height:1px}
#lvkind button.on i{height:3px}

/* ══ עורך העיצוב ═══════════════════════════════════════════════════ */
#stypop{
  position:absolute;z-index:20;width:380px;min-width:300px;max-width:min(640px,92vw);
  resize:horizontal;   /* ביקורת U04: העורך גדל עם התוכן — גרירה בפינה */
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 54px rgba(0,0,0,.62);
  font-size:12px;overflow:hidden;animation:pop .14s ease-out;
}
.sp-head{display:flex;align-items:center;border-bottom:1px solid var(--line);
         background:var(--panel2)}
.sp-tabs{display:flex;flex-wrap:wrap;flex:1;min-width:0}
.sp-tabs button{
  flex:1 0 auto;background:none;border:none;padding:8px 9px;cursor:pointer;white-space:nowrap;
  color:var(--dim);font-size:11.5px;border-bottom:2px solid transparent;
}
.sp-tabs button:hover{color:var(--ink)}
.sp-tabs button.on{color:var(--ink);border-bottom-color:var(--purple);font-weight:650}
.sp-tabs button:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.sp-pre{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:9px}
.sp-pre button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:7px 4px;
  color:var(--ink);font-size:11px;cursor:pointer;line-height:1.25}
.sp-pre button small{display:block;color:var(--faint);font-size:9.5px;margin-top:2px}
.sp-pre button:hover{border-color:var(--purple)}
.sp-pre button.on{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}
.sp-x{background:none;border:none;color:var(--faint);cursor:pointer;
      padding:8px 11px;font-size:12px}
.sp-x:hover{color:var(--ink)}

.sp-body{padding:11px 13px;max-height:min(62vh,470px);overflow-y:auto;
         scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sp-body::-webkit-scrollbar{width:7px}
.sp-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.sp-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;
        color:var(--dim);font-size:11.5px}
.sp-row>span{flex:1;min-width:0}
.sp-row input[type=color]{
  width:30px;height:20px;padding:0;border:1px solid var(--line);border-radius:4px;
  background:none;cursor:pointer;flex:none;
}
.sp-row input[type=range]{width:96px;flex:none;accent-color:var(--purple);height:16px}
.sp-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--purple);flex:none}
.sp-row select{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
               padding:3px 6px;font-size:11px;flex:none}
.sp-v{width:42px;text-align:left;direction:ltr;color:var(--ink);
      font-family:Consolas,monospace;font-size:10.5px;flex:none}
.sp-row.ck{gap:10px}

.sp-grid2,.sp-grid3{display:grid;gap:7px;margin-bottom:8px}
.sp-grid2{grid-template-columns:1fr 1fr}
.sp-grid3{grid-template-columns:1fr 1fr 1fr}
.sp-grid2 .sp-row,.sp-grid3 .sp-row{flex-direction:column;align-items:stretch;
  gap:4px;margin:0;background:var(--panel2);border-radius:6px;padding:6px;text-align:center}
.sp-grid2 .sp-row>span,.sp-grid3 .sp-row>span{flex:none;font-size:10px}
.sp-grid2 input[type=color],.sp-grid3 input[type=color]{width:100%;height:17px}

.sp-sep{font-size:10px;letter-spacing:.11em;text-transform:uppercase;
        color:var(--faint);font-weight:800;margin:13px 0 7px;
        padding-top:9px;border-top:1px solid var(--line)}
.sp-note{font-size:10.5px;color:var(--faint);line-height:1.6;margin:2px 0 9px;
         padding:6px 8px;background:var(--panel2);border-radius:5px;
         border-right:2px solid var(--purple-dim)}
.sp-note b{color:var(--dim)}

.sp-themes{display:flex;gap:6px;margin-bottom:4px}
.sp-theme{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
          padding:7px 4px;cursor:pointer;color:var(--dim);font-size:10.5px;
          display:flex;flex-direction:column;align-items:center;gap:5px}
.sp-theme:hover{border-color:var(--purple-dim);color:var(--ink)}
.sp-theme.on{border-color:var(--purple);color:var(--ink);background:#1d1730}
.sp-theme i{width:100%;height:20px;border-radius:4px;border:1px solid;
            display:flex;align-items:center;justify-content:center;gap:3px}
.sp-theme u{width:4px;height:11px;border-radius:1px;display:inline-block}

.sp-presets{display:flex;gap:5px;flex-wrap:wrap}
.sp-preset{background:var(--panel2);border:1px solid var(--line);border-radius:6px;
           padding:5px 11px;cursor:pointer;color:var(--dim);font-size:11.5px}
.sp-preset:hover{border-color:var(--purple-dim);color:var(--ink)}
.sp-preset.on{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}

.sp-reset{width:100%;background:var(--panel2);border:1px solid var(--line);
          border-radius:6px;padding:8px;cursor:pointer;color:var(--dim);font-size:11.5px}
.sp-reset:hover{color:var(--sell);border-color:var(--sell)}

/* קופסת המסלול בלשונית הסיכון */
.tierbox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;
         padding:10px 12px;margin-bottom:13px;border-right:3px solid var(--purple)}
.tierbox .t{font-size:12.5px}
.tierbox .t b{font-weight:750}
.tierbox .t span{color:var(--faint);font-size:11.5px}
.tierbox .s{font-size:11.5px;color:var(--dim);margin-top:3px}
.tierbox .s b{color:var(--ink);font-variant-numeric:tabular-nums}
.sub{font-size:11px;color:var(--amber);margin:-4px 0 10px;line-height:1.5}
#risk.warn{border-color:var(--amber)}
#lvtf button{min-width:30px;font-family:Consolas,monospace;font-size:10.5px}

/* ══ כרטיס העסקה ═══════════════════════════════════════════════════ */
#ticket{padding:9px 10px;border-bottom:1px solid var(--line)}
.tk-side{display:flex;gap:6px;margin-bottom:8px}
.tk-side button{
  flex:1;padding:7px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:650;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);
}
.tk-side button[data-side="BUY"]:hover{border-color:var(--buy);color:var(--buy)}
.tk-side button[data-side="SELL"]:hover{border-color:var(--sell);color:var(--sell)}
.tk-side button[data-side="BUY"].on{background:var(--buy);border-color:var(--buy);color:#04231a}
.tk-side button[data-side="SELL"].on{background:var(--sell);border-color:var(--sell);color:#fff}

.tk-px{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:7px}
.tk-px label{display:flex;flex-direction:column;gap:2px}
.tk-px span{font-size:9.5px;color:var(--faint);text-align:center}
.tk-px input{
  background:var(--panel2);border:1px solid var(--line);border-radius:5px;
  padding:5px 4px;font-size:12px;text-align:center;outline:none;width:100%;
  font-variant-numeric:tabular-nums;
}
.tk-px input:focus{border-color:var(--purple)}
.tk-px .s input{border-color:rgba(244,72,95,.35)}
.tk-px .t input{border-color:rgba(52,211,153,.35)}
.tk-px input::-webkit-outer-spin-button,
.tk-px input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.tk-row{display:flex;gap:5px;align-items:flex-end;margin-bottom:8px}
.tk-row select{flex:1;background:var(--panel2);border:1px solid var(--line);
               border-radius:5px;padding:5px 6px;font-size:11.5px;outline:none}
.tk-row .qty{display:flex;flex-direction:column;gap:2px;width:66px}
.tk-row .qty span{font-size:9.5px;color:var(--faint);text-align:center}
.tk-row .qty input{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
                   padding:5px 4px;font-size:12px;text-align:center;width:100%;outline:none}
.tk-row #tk-flip{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
                 width:30px;height:28px;cursor:pointer;color:var(--dim);font-size:14px}
.tk-row #tk-flip:hover{color:var(--ink);border-color:var(--purple)}

.tk-calc{font-size:11.5px;color:var(--faint);background:var(--panel2);
         border-radius:6px;padding:8px 10px;margin-bottom:8px;line-height:1.6;
         min-height:34px;border-right:2px solid var(--line)}
.tk-calc.ok{border-right-color:var(--buy);color:var(--dim)}
.tk-calc.bad{border-right-color:var(--sell);color:#ffa8b5}
.tk-calc b{color:var(--ink);font-variant-numeric:tabular-nums}
.tk-calc .d{color:var(--faint);font-size:10.5px}

.tk-acts{display:flex;margin-bottom:5px}
.tk-acts .go{flex:1;padding:10px;border-radius:7px;cursor:pointer;font-size:13px;
             font-weight:650;background:var(--purple);border:1px solid var(--purple);color:#fff}
.tk-acts .go:hover:not(:disabled){filter:brightness(1.12)}
.tk-acts .go:disabled{opacity:.4;cursor:not-allowed}
.tk-acts2{display:flex;gap:5px;flex-wrap:wrap}
/* r3 (01.10, parity G1): the account-wide cancel is red — it removes the stops of open positions too */
.tk-acts2 button#tk-cancel-all{color:#ffb3bb;border-color:#7a2f3a}
/* r3 (parity B4): «↓ Update» glows amber, as NinjaTrader's header and the extensions' .updb */
#app-ver.upd-glow{animation:vxUpdGlow 1.6s ease-in-out infinite}
@keyframes vxUpdGlow{0%,100%{text-shadow:0 0 0 rgba(245,181,68,0)}50%{text-shadow:0 0 8px rgba(245,181,68,.95),0 0 2px rgba(245,181,68,.9)}}
.tk-acts2 button{flex:1;padding:6px;border-radius:6px;cursor:pointer;font-size:11px;
                 background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.tk-acts2 button:hover{color:var(--ink);border-color:var(--sell)}
#tk-err{margin-top:7px}
#signals{min-height:80px}

/* בקרת צפיפות */
#lvdens button{min-width:38px}
#lvdens button.on{background:var(--cyan);color:#04212a;font-weight:700}

/* ── QA 30.09 · 1024 wide: the chart bar wrapped to a 2nd row that sat on the «VECTOR SIGNALS»
   card title (the card is drawn 40px under the plot top, right-aligned; at 1024 its left edge is
   ~340px and the 2nd row reached 429px). Tighter chips/gaps let the first row take the zoom group,
   so the 2nd row holds only «Levels · View · symbol · Ladder» and ends left of the card.  */
@media (max-width:1180px){
  /*  two ids: theme.js injects «#ctools .grp button{padding-inline:9px·d}» after this file  */
  #chartwrap #ctools{gap:4px;left:8px}
  #chartwrap #ctools .grp button{padding-inline:calc(6px * var(--d, 1));min-width:22px}
  #chartwrap #ctools .tb-chip{padding-inline:calc(7px * var(--d, 1))}
}
/*  Hebrew (RTL): both the card and the wrapped 2nd row sit on the RIGHT, so at 1024–1440 the row
    covered the card title whatever its width. The «Levels · View · symbol · Ladder» group goes to the
    far (left) end of its line instead; on a single-row bar there is no free space, so nothing moves.  */
html[dir="rtl"] #chartwrap #ctools > #tb-bar{margin-inline-start:auto}

/* ══ 01.10 (parity M13 · GROUPING_SPEC §1-2): one cluster = one box with a notched label ══════════════════════
   The tokens are the spec's (dark; light.css redefines them). The boxes are <fieldset class="vx-grp"><legend>:
   the #ticket wrappers in index.html, plus the position chips that layout.js groups at run time. They stay
   compact on purpose, because the rail must still show PLACE, the journal row and «More ▴» at 1024×640 (rail.css).
   Rule 3: a box never holds another box, so the plugin rows inside a box (entry bar, calculator) lose their own frame.  */
:root{ --vx-bg-panel:#0e1319; --vx-bg-group:#161d26; --vx-bg-control:#1f2833; --vx-frame:#8a96a3;
  --vx-border-group:#64707f; --vx-divider:#64707f; --vx-border-control:#7a8594;
  --vx-sel-bg:#7c3aed; --vx-sel-border:#a78bfa; --vx-group-label:#b4bec9; --vx-focus:#c4b5fd;
  --vx-bw:1px; --vx-r-frame:10px; --vx-r-group:8px; --vx-r-control:6px;
  --vx-group-pad:8px 10px 10px; --vx-group-gap:8px; --vx-section-gap:10px;
  --vx-danger-border:#c4505f; --vx-danger-label:#ff8b9b; }
fieldset.vx-grp{margin:0 0 var(--vx-group-gap);min-width:0;padding:var(--vx-group-pad);background:var(--vx-bg-group);
  border:var(--vx-bw) solid var(--vx-border-group);border-radius:var(--vx-r-group)}
fieldset.vx-grp > legend{padding:0 5px;margin-inline-start:-2px;font:600 12px/1 "Segoe UI",system-ui,sans-serif;
  color:var(--vx-group-label);letter-spacing:.02em}
.vx-divider{height:0;border-top:var(--vx-bw) solid var(--vx-divider);margin:var(--vx-section-gap) 0}
/*  rule 5: danger (close position · cancel orders · flatten) has its own «Close» box, edged in red  */
fieldset.vx-grp.vx-danger,#ticket fieldset#tkg-close{border-color:var(--vx-danger-border)}
fieldset.vx-grp.vx-danger > legend,#ticket fieldset#tkg-close > legend{color:var(--vx-danger-label)}
