:root {
  --bg: #0A0D13; --side: #0D1118; --card: #121722; --inner: #0F141E; --border: #1E2533; --border-2: #1A2130;
  --text: #E6E9EF; --text-2: #AEB6C6; --muted: #8B95A8;
  --accent: #3A5FD9; --accent-2: #6B8DFF; --accent-3: #8AA8FF;
  --pos: #34D399; --pos-bg: #0F2E24; --pos-bd: #17493A;
  --neg: #F87171; --neg-bg: #331A1F; --neg-bd: #4E242B;
  --warn: #FBBF5A; --warn-bg: #3A2A12; --warn-bd: #4A3614;
  --obs: #9DB6FF; --obs-bg: #16233F; --ref: #C4B1FF; --ref-bg: #251B3D;
  --crit: #F87171; --crit-bg: #3A1A1F;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; font-size: 14px; }
a { color: var(--accent-3); }
a:hover { color: #B4C6FF; }
button { font: inherit; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--muted); }

.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 0 0 248px; background: var(--side); border-left: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.brand b { display: block; font-size: 16px; }
.brand span { font-size: 11px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a, .nav span.soon { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.nav a:hover { background: #151B27; color: #fff; }
.nav a.on { background: #1A2131; color: #fff; }
.nav span.soon { color: #5D6678; cursor: default; }
.nav span.soon em { font-style: normal; font-size: 10px; margin-inline-start: auto; background: #1A2131; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.side-status { margin-top: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.head h1 { margin: 0; font-size: 24px; }
.head .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; min-width: 0; }
.card h2 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.grow-2 { flex: 2 1 520px; } .grow-1 { flex: 1 1 320px; }
.lbl { font-size: 12px; color: var(--muted); font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi .v { font-size: 24px; font-weight: 700; text-align: right; }
.kpi .s { font-size: 12px; color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.b-observation { background: var(--obs-bg); color: var(--obs); }
.b-reflection { background: var(--ref-bg); color: var(--ref); }
.b-warning { background: var(--warn-bg); color: var(--warn); }
.b-critical { background: var(--crit-bg); color: var(--crit); }
.b-ok { background: var(--pos-bg); color: var(--pos); }
.b-off { background: #1C2230; color: var(--text-2); }
.b-bad { background: var(--neg-bg); color: var(--neg); }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #1A2131; border: 1px solid #273042; color: #D5DBE6; font-size: 13px; font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; padding: 9px 14px; cursor: pointer; min-height: 38px; background: #1A2131; color: #D5DBE6; border: 1px solid #273042; text-decoration: none; }
.btn:hover { background: #212A3D; color: #fff; }

.alert { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--inner); border: 1px solid var(--border-2); }
.alert + .alert { margin-top: 10px; }
.alert .msg { font-size: 14px; line-height: 1.7; }
.alert .ev { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 0; padding-inline-start: 16px; }

.empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .wd { font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.day { border-radius: 8px; padding: 6px 7px; min-height: 54px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #1C2230; background: #151A25; }
.day.blank { background: transparent; border-color: transparent; }
.day.p { background: var(--pos-bg); border-color: var(--pos-bd); }
.day.l { background: var(--neg-bg); border-color: var(--neg-bd); }
.day .n { font-size: 11px; color: var(--muted); }
.day .x { font-size: 11px; font-weight: 600; text-align: left; }
.day .c { font-size: 10px; color: var(--muted); text-align: left; }

.posc { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 12px; background: var(--inner); border: 1px solid var(--border-2); }
.posc + .posc { margin-top: 10px; }
.side-tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.side-tag.buy { color: var(--pos); background: var(--pos-bg); } .side-tag.sell { color: var(--neg); background: var(--neg-bg); }
.bar { position: relative; height: 8px; border-radius: 8px; background: #1E2533; }
.bar .knob { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid var(--inner); }
.bar-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini { background: #0D1118; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.mini b { font-weight: 600; text-align: right; }

.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { font-weight: 500; color: var(--muted); text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid #171D29; white-space: nowrap; }
tr.click { cursor: pointer; } tr.click:hover td { background: #141A26; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--inner); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 14px; font-weight: 600; text-align: right; }

.chart-box { background: #0B0F16; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.chart-box svg { display: block; width: 100%; height: auto; direction: ltr; }

.timeline { border-inline-start: 2px solid var(--border); margin-inline-start: 6px; }
.tl { position: relative; display: flex; gap: 12px; padding: 7px 14px 7px 0; padding-inline-start: 16px; }
.tl::before { content: ""; position: absolute; inset-inline-start: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--tl, #6B8DFF); border: 2px solid var(--card); }
.tl .t { font-size: 12px; color: var(--muted); min-width: 120px; padding-top: 2px; }
.tl .d { font-size: 14px; line-height: 1.7; }

.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--obs-bg); border: 1px solid #22345C; font-size: 13px; line-height: 1.7; color: #C9D6FF; }
.banner { display: none; padding: 10px 14px; border-radius: 10px; background: var(--neg-bg); border: 1px solid var(--neg-bd); color: #FBC4C4; font-size: 13px; }
.banner.show { display: block; }
.seg { display: flex; gap: 4px; background: #0D1118; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.seg button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.seg button.on { background: #1A2131; color: #fff; }

.banner.ok { background: var(--pos-bg); border-color: var(--pos-bd); color: #BDF3DB; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.conv { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: right; background: var(--inner); border: 1px solid var(--border-2); color: var(--text); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.conv.on, .conv:hover { border-color: var(--accent); background: #141D33; }
.thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-height: 480px; padding: 4px; }
.msg-b { max-width: 85%; padding: 12px 14px; border-radius: 14px; line-height: 1.8; font-size: 14px; }
.msg-b p { margin: 0 0 8px; } .msg-b p:last-child { margin: 0; } .msg-b ul { margin: 4px 0; padding-inline-start: 18px; }
.msg-b.user { align-self: flex-start; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg-b.assistant { align-self: flex-end; background: var(--inner); border: 1px solid var(--border-2); border-bottom-left-radius: 4px; }
.msg-b.pending { color: var(--muted); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #273042; background: #1A2131; color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.chip:hover { color: #fff; border-color: var(--accent); }
.ask { display: flex; gap: 8px; align-items: flex-end; }
.ask textarea, .field input, .field select { font: inherit; font-size: 14px; color: var(--text); background: #0D1118; border: 1px solid #273042; border-radius: 10px; padding: 10px 12px; width: 100%; }
.ask textarea { resize: vertical; min-height: 46px; }
.ask textarea:focus, .field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-p { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-p:hover { background: #4A6FE6; }
.btn:disabled { opacity: 0.5; cursor: default; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--inner); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--accent); }

@media (max-width: 800px) {
  .side { flex: 1 1 100%; border-left: 0; border-bottom: 1px solid var(--border); padding: 16px; gap: 14px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-status { display: none; }
  main { padding: 20px 16px 40px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; } .kpi .v { font-size: 19px; }
  .stats { grid-template-columns: 1fr; }
}

/* شخصيات صوت المدرب */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.persona { background: var(--inner); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; }
.persona:hover { border-color: #2C3750; }
.persona:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.persona.on { border-color: var(--accent); background: #131B2E; }
.persona-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.persona-top b { font-size: 14px; }
.persona.on .persona-top b::after { content: " ✓"; color: var(--accent-3); }
.persona-sample { margin: 2px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-2); min-height: 3.6em; }
.persona .btn { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.persona.playing .btn { background: var(--accent); border-color: var(--accent); color: #fff; }

/* صفحة تنصيب الـ EA */
.setup-step { display: flex; gap: 16px; align-items: flex-start; }
.setup-num { flex: 0 0 36px; height: 36px; border-radius: 50%; background: #1B2647; border: 1px solid var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.setup-body p { margin: 0 0 10px; line-height: 1.9; font-size: 14px; }
.setup-body p.muted { font-size: 13px; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row code { background: var(--inner); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; overflow-wrap: anywhere; }
@keyframes tm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.dot.pulse { animation: tm-pulse 1.4s ease-in-out infinite; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.btn-google { background: #fff; color: #1F1F1F; border-color: #DADCE0; min-height: 46px; font-size: 15px; }
.btn-google:hover { background: #F1F3F4; color: #1F1F1F; }

/* فيديو شرح التنصيب (setup-video.js) */
.sv-player { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); margin-bottom: 16px; }
.sv-frame { position: relative; width: 100%; overflow: hidden; background: #0F3A63; }
.sv-scaled { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; }
.sv-stage { position: absolute; inset: 0; font-family: 'Segoe UI', system-ui, sans-serif; color: #1B1B1B; font-size: 14px; }
.sv-win { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.45); overflow: hidden; }
.sv-title { height: 32px; background: #F3F3F3; border-bottom: 1px solid #DDD; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; }
.sv-title i { width: 11px; height: 11px; border: 1.5px solid #888; border-radius: 2px; }
.sv-title i:first-of-type { margin-left: auto; }
.sv-url { height: 34px; display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: #555; border-bottom: 1px solid #EEE; }
.sv-page { padding-top: 50px; text-align: center; font-family: 'IBM Plex Sans Arabic', sans-serif; direction: rtl; background: #0A0D13; color: #E6E9EF; height: 100%; }
.sv-page h3 { margin: 0; font-size: 26px; line-height: 36px; }
.sv-page p { margin: 10px 0 24px; color: #AEB6C6; }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 600; transition: transform .15s; }
.sv-page .sv-btn { height: 44px; width: 260px; font-size: 15px; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.sv-primary { background: #3A5FD9; color: #fff; }
.sv-light { background: #fff; color: #1B1B1B; border: 1px solid #BBB; }
.sv-explorer { padding: 30px 14px 10px; }
.sv-row { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 4px; }
.sv-row small { color: #888; margin-left: auto; }
.sv-row:first-child { background: #CCE4F7; }
.sv-row.dim { color: #777; }
.sv-smart { position: absolute; left: 180px; top: 90px; width: 600px; height: 360px; box-sizing: border-box; padding: 32px; background: #0067C0; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sv-smart h4 { margin: 0 0 14px; font-size: 26px; font-weight: 400; }
.sv-smart p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.sv-smart u { font-size: 14px; }
.sv-more { margin-top: 14px; font-size: 13px; line-height: 1.7; }
.sv-smart-btns { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; flex-direction: row; }
.sv-smart-btns .sv-btn { width: 110px; padding: 0; background: transparent; color: #fff; border: 1px solid #fff; }
.sv-console { position: absolute; left: 260px; top: 150px; width: 560px; height: 220px; box-sizing: border-box; padding: 16px; background: #0C0C0C; color: #DDD; font: 13px/1.9 Consolas, monospace; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.sv-console #c1 { color: #4ADE80; }
.sv-menu { height: 26px; display: flex; align-items: center; padding-left: 8px; border-bottom: 1px solid #DDD; background: #FAFAFA; font-size: 13px; }
.sv-menu span { width: 64px; }
.sv-menu span.on, #m-tools.on { background: #CCE4F7; }
.sv-mt5body { position: absolute; top: 58px; left: 0; right: 0; bottom: 0; }
.sv-chart { position: absolute; inset: 0; background: #fff; background-image: linear-gradient(#F0F0F0 1px, transparent 1px), linear-gradient(90deg, #F0F0F0 1px, transparent 1px); background-size: 52px 40px; overflow: hidden; }
.sv-chart-r { left: 220px; border-left: 1px solid #DDD; }
.sv-candle { position: absolute; width: 12px; border-radius: 1px; }
.sv-candle.up { background: #26A69A; } .sv-candle.dn { background: #EF5350; }
.sv-drop { position: absolute; left: 304px; top: 88px; width: 230px; background: #fff; border: 1px solid #BBB; box-shadow: 0 8px 20px rgba(0,0,0,.2); padding: 4px 0; font-size: 13px; }
.sv-drop div { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.sv-drop div:first-child { background: #CCE4F7; }
.sv-drop small { color: #777; }
.sv-stage .dim { color: #888; }
.sv-dialog { position: absolute; left: 200px; top: 120px; width: 560px; height: 330px; background: #fff; border: 1px solid #AAA; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.sv-dialog.sv-small { left: 280px; top: 160px; width: 400px; height: 210px; }
.sv-tabs { display: flex; padding: 0 10px; border-bottom: 1px solid #DDD; height: 32px; align-items: flex-end; font-size: 13px; }
.sv-tabs span { width: 105px; text-align: center; padding: 6px 0; }
.sv-tabs span.on { background: #fff; border: 1px solid #DDD; border-bottom-color: #fff; margin-bottom: -1px; font-weight: 600; }
.sv-tabbody { padding: 16px; font-size: 13px; }
.sv-check { display: flex; align-items: center; gap: 8px; height: 24px; margin-bottom: 4px; }
.sv-check b { width: 14px; height: 14px; border: 1.5px solid #777; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.sv-check.on b { background: #0067C0; border-color: #0067C0; }
.sv-check.on b::after { content: "✓"; }
.sv-list { margin: 6px 0 0 22px; height: 62px; border: 1px solid #BBB; padding: 4px 8px; color: #777; }
.sv-list .typing { color: #1B1B1B; border-right: 2px solid #1B1B1B; display: inline-block; }
.sv-dlg-btns { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.sv-dlg-btns .sv-btn { width: 100px; padding: 0; }
.sv-note { margin: 16px; font-size: 13px; color: #444; }
.sv-nav { position: absolute; left: 0; top: 0; bottom: 0; width: 220px; padding: 10px; box-sizing: border-box; background: #FAFAFA; font-size: 13px; }
.sv-nav b { display: block; height: 22px; } .sv-nav div { height: 24px; display: flex; align-items: center; }
.sv-sub { padding-left: 18px; } .sv-sub2 { padding-left: 36px; background: #CCE4F7; }
.sv-eaon { position: absolute; top: 8px; right: 10px; font-size: 12px; background: #fff; border: 1px solid #DDD; padding: 2px 8px; }
.sv-ghost { position: absolute; padding: 4px 10px; background: rgba(204,228,247,.9); border: 1px dashed #0067C0; font-size: 13px; }
.sv-done { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); background: #0F2E24; color: #34D399; border: 1px solid #17493A; padding: 10px 22px; border-radius: 24px; font: 600 17px 'IBM Plex Sans Arabic', sans-serif; direction: rtl; white-space: nowrap; }
.sv-stage #dlpop { position: absolute; top: 74px; right: 16px; width: 300px; background: #fff; border: 1px solid #DDD; border-radius: 8px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.sv-file { margin-top: 8px; font-size: 13px; } .sv-file small { display: block; color: #777; margin-top: 2px; }
/* العناصر اللي تطلع بالتدريج */
.sv-stage #dlpop, .sv-stage #smart, .sv-stage #moreinfo, .sv-stage #runany, .sv-stage #cons, .sv-stage #c1, .sv-stage #c2,
.sv-stage #drop, .sv-stage #opts, .sv-stage #eabody, .sv-stage #tm-dir, .sv-stage #tm-ea, .sv-stage #ghost, .sv-stage #eadlg,
.sv-stage #eaon, .sv-stage #done { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.sv-stage .show { opacity: 1 !important; visibility: visible !important; }
.sv-cursor { position: absolute; left: 800px; top: 470px; width: 24px; height: 24px; z-index: 5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 19 2.5-7.5L20 11z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.sv-cursor.clk::after { content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #FBBF24; animation: sv-ripple .45s ease-out forwards; }
@keyframes sv-ripple { from { transform: scale(.3); opacity: 1 } to { transform: scale(1.5); opacity: 0 } }
.sv-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 90%; background: rgba(6,8,13,.86); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 15px; line-height: 1.7; text-align: center; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.sv-caption.in { animation: sv-cap .35s ease-out; }
@keyframes sv-cap { from { opacity: 0; transform: translate(-50%, 8px) } to { opacity: 1; transform: translate(-50%, 0) } }
.sv-big { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: #3A5FD9; color: #fff; font-size: 30px; cursor: pointer; box-shadow: 0 0 0 10px rgba(58,95,217,.25); display: none; }
.sv-big.show { display: block; }
.sv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.sv-play { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #1A2131; color: #fff; cursor: pointer; }
.sv-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.sv-chips button { min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font: 600 13px 'IBM Plex Sans Arabic', sans-serif; padding: 0 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sv-chips button span { width: 22px; height: 22px; border-radius: 50%; background: #1B2647; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.sv-chips button.on { border-color: var(--accent); color: #fff; background: #131B2E; }
.sv-progress { height: 3px; background: var(--border); } .sv-progress i { display: block; height: 100%; width: 0; background: var(--accent-2); }
.pay-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 16px; align-items: center; }
@media (max-width: 520px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- سجل الصفقات */
.jt { display: inline-flex; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.jt-setup { background: #13203A; color: #AFC2FF; border-color: #2B4380; }
.jt-mistake { background: #2A1519; color: #FCA5A5; border-color: #4E242B; }
.jt-emotion { background: #2A2212; color: #FCD38D; border-color: #4A3614; }
.jt-emotion.good { background: var(--pos-bg); color: #86EFAC; border-color: var(--pos-bd); }
.jtags { display: flex; gap: 4px; flex-wrap: wrap; max-width: 300px; white-space: normal; }
.jviews { display: flex; gap: 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.jviews button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 600; font-size: 13px; padding: 0 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.jviews button.on { color: #fff; border-bottom-color: #22D3EE; }
.jviews em { font-style: normal; font-size: 11px; background: #161D2B; border-radius: 10px; padding: 1px 7px; color: var(--text-2); }
.jbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.jbar input, .jbar select { font: inherit; font-size: 13px; color: var(--text); background: #0D1118; border: 1px solid #273042; border-radius: 10px; padding: 0 12px; min-height: 40px; }
.jbar input { flex: 1 1 240px; min-width: 180px; }
.jbar select.on { border-color: #2B4380; color: #C9D6FF; background: #111B31; }
.jbar input:focus, .jbar select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
tr.jday td { background: #0D121B; font-size: 12px; padding: 10px 12px; border-top: 1px solid var(--border); }
.jstars { color: #FBBF5A; letter-spacing: 1px; font-size: 12px; }
.jpick { display: flex; gap: 6px; flex-wrap: wrap; }
.jpick button { border: 1px solid #263045; background: #121722; color: var(--text-2); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; min-height: 32px; }
.jpick button:hover { border-color: #3A4660; color: #fff; }
.jpick button.on.jp-setup { background: #13203A; color: #AFC2FF; border-color: #3A5FD9; }
.jpick button.on.jp-mistake { background: #2A1519; color: #FCA5A5; border-color: #B4414D; }
.jpick button.on.jp-emotion { background: #2A2212; color: #FCD38D; border-color: #A87A22; }
.jpick input { font: inherit; font-size: 12px; color: var(--text); background: #0D1118; border: 1px dashed #2B4380; border-radius: 999px; padding: 4px 12px; min-height: 32px; width: 130px; }
.jrate { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid #263045; }
.jrate button { flex: 1; min-height: 40px; border: 0; border-inline-start: 1px solid #263045; background: #121722; color: var(--muted); font-weight: 700; cursor: pointer; }
.jrate button:first-child { border-inline-start: 0; }
.jrate button.on { background: #1B2647; color: #fff; }
.jnote { font: inherit; font-size: 14px; line-height: 1.9; color: var(--text); background: var(--inner); border: 1px solid var(--border-2); border-radius: 12px; padding: 12px; width: 100%; min-height: 150px; resize: vertical; }
.jnote:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.heat { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); gap: 6px; }
.heat .c { min-height: 54px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 700; }
.heat .c small { font-size: 10px; font-weight: 500; opacity: .75; }
.heat .h { font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.mbar { height: 10px; background: var(--inner); border-radius: 5px; overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(270deg, #F87171, #B4414D); }
.insight { font-size: 13px; line-height: 1.8; background: #10192B; border: 1px solid #22345E; border-radius: 12px; padding: 10px 12px; color: #C9D6FF; }