/* ═══════════════════════════════════════════════════════════════════
   מערכת עיצוב — "טרמינל"
   כיוון: Data-Dense Dashboard בשפה של טרמינל פיננסי. כהה, צפוף,
   קווי שיער, מספרים במונוספייס, סטטוס בירוק/אדום, ענבר לעיקר.
   מכוון לסריקה בשנייה תוך כדי שיחה — לא לקריאה בנחת.

   כלל הטיפוגרפיה: **מונוספייס למספרים ולתוויות לטיניות, סאנס לעברית.**
   מונוספייס מרנדר עברית גרוע, ולכן הוא לא נוגע בפרוזה.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --bg:     #0b0d10;   /* מסך */
    --panel:  #11151a;   /* חלונית */
    --raise:  #161b21;   /* שורה מודגשת */
    --line:   #1e242c;   /* קו שיער */
    --rule:   #2b333d;   /* מפריד */
    --fg:     #d6dae0;   /* פוספור */
    --dim:    #7d8791;   /* משני */

    /* ענבר — העיקר. צבע של מסך נתונים, לא של נאון. */
    --accent: #e8b339;
    --accent-soft: #2a2213;

    /* סטטוס — ירוק/אדום של טרמינל */
    --good: #4ea86b;
    --warn: #d99a3c;
    --bad:  #d76a63;

    --radius: 3px;       /* כמעט מרובע — טרמינל, לא בועה */
    --shadow: 0 0 0 1px rgba(232,179,57,.08), 0 10px 30px -14px rgba(0,0,0,.8);

    --sans: "Assistant", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --serif: var(--sans);   /* אין סריף בשפה הזו */
}

/* מצב יום — "טרמינל נייר". אותה צפיפות, רקע בהיר.
   ניגודיות נמדדה: fg/bg 14.9:1 · dim 4.9:1 · accent 4.6:1 */
@media (prefers-color-scheme: light) {
    :root {
        --bg:     #eef0f2;
        --panel:  #ffffff;
        --raise:  #f6f7f9;
        --line:   #dde1e6;
        --rule:   #b9c0c8;
        --fg:     #10151b;
        --dim:    #5a636d;

        --accent: #8a6410;
        --accent-soft: #f7eed8;

        --good: #2f7d4c;
        --warn: #8a5f16;
        --bad:  #a83a33;

        --shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 28px -16px rgba(16,21,27,.4);
    }
}

:root[data-theme="light"] {
    --bg: #eef0f2; --panel: #ffffff; --raise: #f6f7f9;
    --line: #dde1e6; --rule: #b9c0c8; --fg: #10151b; --dim: #5a636d;
    --accent: #8a6410; --accent-soft: #f7eed8;
    --good: #2f7d4c; --warn: #8a5f16; --bad: #a83a33;
    --shadow: 0 0 0 1px rgba(0,0,0,.04), 0 10px 28px -16px rgba(16,21,27,.4);
}
:root[data-theme="dark"] {
    --bg: #0b0d10; --panel: #11151a; --raise: #161b21;
    --line: #1e242c; --rule: #2b333d; --fg: #d6dae0; --dim: #7d8791;
    --accent: #e8b339; --accent-soft: #2a2213;
    --good: #4ea86b; --warn: #d99a3c; --bad: #d76a63;
    --shadow: 0 0 0 1px rgba(232,179,57,.08), 0 10px 30px -14px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

/* אנימציות מכובדות, ומכובדות מספיק כדי להיעלם כשמבקשים */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* מיקוד נראה — חובה לניווט במקלדת */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── מסך ────────────────────────────────────────────────────────── */
body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--fg);
    font-family: var(--sans);
    font-size: 14px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* כל מספר במסך הוא מונוספייס בעמודה — זה מה שמאפשר סריקה אנכית */
.mono, .val, .big-num, .num, td, .stat .val, .nums, .n { font-variant-numeric: tabular-nums; }
/* ההגבלה יושבת על main בלבד. כשהיא הייתה גם על body, מסך צר מ-1100
   דחף את התוכן אל מחוץ לקצה הימני — בRTL זו בדיוק תחילת השורה. */
main { padding: 2rem 1.5rem 5rem; max-width: 1180px; margin-inline: auto; }

/* ── שורת מצב עליונה ──────────────────────────────────────────── */
.topnav {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: .45rem 1.1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
    font-size: .78rem;
}
.topnav .brand {
    font-family: var(--mono); font-weight: 700; font-size: .82rem;
    letter-spacing: .22em; color: var(--accent);
}
.topnav a { color: var(--dim); font-size: .82rem; letter-spacing: .04em; padding: .2rem 0; }
.topnav a:hover { color: var(--fg); }
.topnav a.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.topnav .live-dot { margin-inline-start: auto; color: var(--good); font-size: .8rem; letter-spacing: .04em; }
.topnav .live-dot::before { content: "● "; }
.topnav .theme-btn {
    margin-inline-start: auto; background: transparent; border: 1px solid var(--line);
    color: var(--dim); padding: .35rem .5rem; min-height: 0; display: inline-flex; align-items: center;
}
.topnav .live-dot ~ .theme-btn { margin-inline-start: 0; }
.topnav .theme-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

/* ── טיפוגרפיה ─────────────────────────────────────────────────── */
h1 {
    font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
    line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .25rem;
}
/* כותרת מקטע = תווית טרמינל: מונוספייס, ריווח רחב, קו שיער */
h2 {
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    margin: 1.9rem 0 .7rem; color: var(--dim);
    text-transform: uppercase; letter-spacing: .18em;
    padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
h2 .note { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--accent); }
h2 .note { text-transform: none; letter-spacing: 0; }
h3 { font-family: var(--sans); }

code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--raise); padding: .12em .45em; border-radius: 3px; }
.sub, .note { color: var(--dim); font-size: .88rem; }

/* קישורים: ברירת המחדל של הדפדפן היא כחול רוויה על רקע כהה — קשה לקריאה.
   כאן הם טקסט רגיל עם קו דק, ונצבעים בפליז רק בריחוף. */
a { color: inherit; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
a:hover { color: var(--accent); }
a:visited { color: inherit; }
td a { border-bottom: 1px solid var(--line); }
td a:hover { border-bottom-color: var(--accent); }

button.end { margin-inline-start: auto; background: var(--raise); border: 1px solid var(--line); color: var(--fg); }
td.good { color: var(--good); } td.bad { color: var(--bad); }

textarea {
    width: 100%; padding: .9rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--panel); color: var(--fg);
    font: 13px/1.6 ui-monospace, Consolas, monospace; resize: vertical;
}

.row { display: flex; gap: .75rem; align-items: center; margin: .9rem 0; flex-wrap: wrap; }

/* כפתור טרמינל: מסגרת חדה. סאנס ולא מונוספייס —
   JetBrains Mono נופל לפונט גיבוי בעברית והתוצאה מכוערת.
   מונוספייס שמור לתוויות לטיניות ולמספרים בלבד. */
button {
    padding: .45rem 1.1rem; border-radius: var(--radius);
    border: 1px solid var(--accent); background: var(--accent);
    color: var(--bg); font-family: var(--sans); font-weight: 600; font-size: .84rem;
    letter-spacing: .01em; cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    min-height: 34px;
}
button:hover:not(:disabled) { background: transparent; color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost, .setup button, button.end {
    background: transparent; color: var(--fg); border-color: var(--line);
}
button.ghost:hover:not(:disabled), .setup button:hover, button.end:hover:not(:disabled) {
    border-color: var(--accent); color: var(--accent); background: transparent;
}

/* ── לוח מחוונים: מספר גדול בסריף, תווית קטנה בסאנס ─────────────── */
.cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.stat {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .8rem .95rem;
    display: flex; flex-direction: column; gap: .1rem;
    position: relative; overflow: hidden;
}
/* פס הסטטוס יושב על הקצה כמו סימון שוליים בעיתון */
.stat::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 3px; background: var(--rule);
}
.stat.good::before { background: var(--good); }
.stat.bad::before  { background: var(--bad); }
.stat .label  { font-family: var(--mono); font-size: .64rem; color: var(--dim);
                text-transform: uppercase; letter-spacing: .14em; }
.stat .val    { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; line-height: 1.25;
                font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat.good .val { color: var(--good); }
.stat.bad  .val { color: var(--bad); }
.stat .target { font-family: var(--mono); font-size: .64rem; color: var(--dim); letter-spacing: .06em; }

.gates { list-style: none; padding: 0; margin: 0; }
.gates li {
    padding: .5rem .8rem; margin-bottom: .35rem; background: var(--raise);
    border: 1px solid var(--line); border-radius: var(--radius);
    border-inline-start: 3px solid var(--rule);
}
.gates li.open { border-inline-start-color: var(--good); }
.gates li.shut { border-inline-start-color: var(--bad); }
.gates li.open strong { color: var(--good); }
.gates li.shut strong { color: var(--bad); }
.gates li span { color: var(--dim); font-size: .88rem; }

.value { font-size: 1.05rem; }
.value strong { font-family: var(--serif); font-size: 1.3em; font-variant-numeric: tabular-nums; }
.flag-ירוק { color: var(--good); } .flag-צהוב { color: var(--warn); } .flag-אדום { color: var(--bad); }

/* ── קוקפיט חי ── */
.cockpit-head { display: flex; align-items: baseline; gap: 1rem; }
.setup { background: var(--panel); border: 1px solid var(--warn); border-radius: 10px;
         padding: .9rem; margin: 1rem 0; }
.setup.done { border-color: var(--line); }
.setup button { background: var(--bg); border: 1px solid var(--line); color: var(--fg);
                font-size: .88rem; padding: .4rem .8rem; }
.setup button.us { border-color: var(--good); color: var(--good); font-weight: 600; }
.setup button.clear { color: var(--dim); }
.setup button .n { color: var(--dim); font-size: .75rem; margin-inline-start: .3rem; }
/* השאלה הפתוחה — הטקסט הגדול ביותר במסך. זה מה שקוראים בקול. */
.suggest.big {
    font-size: clamp(1.1rem, .9rem + .7vw, 1.4rem);
    font-weight: 400; line-height: 1.45; padding: 1rem 1.2rem; margin: .4rem 0 1rem;
    background: var(--accent-soft); border-color: var(--line);
    border-inline-start: 3px solid var(--accent);
}
.gate-banner {
    border-radius: var(--radius); padding: .85rem 1.1rem; margin: 1rem 0; font-size: 1.02rem;
    border: 1px solid var(--line); border-inline-start-width: 4px;
}
.gate-banner.open { background: var(--raise); border-inline-start-color: var(--good); }
.gate-banner.shut { background: var(--raise); border-inline-start-color: var(--bad); }
.gate-banner span { color: var(--dim); margin-inline-start: .6rem; font-size: .92rem; }
.live-flags { list-style: none; padding: 0; margin: 0; }
.live-flags li { padding: .6rem .9rem; border-radius: 8px; margin-bottom: .45rem;
                 background: var(--panel); border-inline-start: 3px solid var(--warn); }
.live-flags li.k-SelfPraise, .live-flags li.k-InventedRoi,
.live-flags li.k-LongMonologue, .live-flags li.k-FreeRiskReversal { border-inline-start-color: var(--bad); }
.live-flags li.k-PivotQuestion { border-inline-start-color: var(--good); }
.live-flags strong { display: block; }
.live-flags span { color: var(--dim); font-size: .85rem; }

/* ── ניתוק מהשרת ──
   Blazor מוסיף למכל את המחלקות components-reconnect-show / -failed / -rejected.
   בלי הכלל הזה הוא מוסתר, והמשתמש רואה דף מת בלי הסבר. */
#components-reconnect-modal { display: none; }
/* !important כי blazor.web.js מזריק סגנונות משלו עם עדיפות גבוהה יותר,
   ובלעדיו הבאנר נוחת בתחתית הדף בלי רקע — כלומר לא נראה. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important; position: fixed !important; inset: 0 !important;
    z-index: 9999 !important; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55) !important;
}
#components-reconnect-modal .rc-box {
    background: var(--panel); border: 1px solid var(--warn); border-radius: 12px;
    padding: 1.4rem 1.8rem; display: flex; flex-direction: column; gap: .9rem;
    align-items: center; font-size: 1.05rem; color: var(--fg); direction: rtl;
}
#components-reconnect-modal.components-reconnect-failed .rc-msg::after,
#components-reconnect-modal.components-reconnect-rejected .rc-msg::after {
    content: " ההתחברות נכשלה. טען מחדש כדי להמשיך.";
    color: var(--bad);
}

/* ── קנבס: אריחים על כל רוחב המסך, ניתנים לגרירה ולשינוי גודל ──
   הדף הזה יוצא מהמכל הצר. main מוגבל ל-1100px כי הוא מיועד לקריאה;
   לוח מידע צריך את כל הרוחב. */
.canvas-page { max-width: none; padding-inline: 1.2rem; }

.canvas {
    display: grid; gap: .8rem; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    grid-auto-flow: dense;   /* אריח רחב לא משאיר חור אחריו */
}
.tile {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1.05rem; position: relative; cursor: grab;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tile:hover { box-shadow: var(--shadow); border-color: var(--rule); }
.tile.dragging { opacity: .4; cursor: grabbing; }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
@media (max-width: 700px) { .tile.wide { grid-column: span 1; } }

.tile > h3 {
    font-family: var(--mono); font-size: .64rem; color: var(--dim);
    text-transform: uppercase; letter-spacing: .17em; font-weight: 500;
    margin: 0 0 .65rem; padding-inline-end: 1.6rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.tile > h3 .n { color: var(--accent); letter-spacing: .04em; }
.tile-size {
    position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem;
    background: transparent; border: 0; color: var(--dim); cursor: pointer;
    font-size: .95rem; padding: .1rem .3rem; line-height: 1; opacity: 0;
}
.tile:hover .tile-size { opacity: 1; }
.tile-size:hover { color: var(--fg); }

/* אריחים מודגשים לפי תפקיד */
.tile.hero { border-color: var(--accent); }
.tile.money { border-color: var(--good); }
.tile.gap   { border-color: var(--warn); }

.tile .big-num {
    font-family: var(--mono); font-size: 2.2rem; font-weight: 500; color: var(--accent);
    line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.tile .big-num .sub-num {
    display: block; font-family: var(--mono); font-size: .62rem; font-weight: 400;
    color: var(--dim); letter-spacing: .18em; text-transform: uppercase; margin-top: .35rem;
}
.tile .sub-num { color: var(--dim); font-size: .82rem; }
.tile .scroll { max-height: 21rem; overflow: auto; }

.canvas-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.canvas-bar .hint { color: var(--dim); font-size: .8rem; }
.canvas-bar button.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim);
                           font-size: .82rem; padding: .3rem .8rem; }

/* בורר התהליך — מה שמניע את החישוב */
.proc { display: flex; gap: .5rem; flex-wrap: wrap; }
.proc button {
    background: var(--bg); border: 1px solid var(--line); color: var(--fg);
    border-radius: 8px; padding: .5rem .8rem; text-align: start; font-size: .85rem;
    display: flex; flex-direction: column; gap: .15rem; min-width: 10rem;
}
.proc button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.proc button .nums { font-family: var(--mono); color: var(--dim); font-size: .7rem; letter-spacing: .02em; }
.proc button.on .nums { color: var(--accent); }
.proc button.bare .nums { color: var(--bad); }

/* ── מסגרת AGENT בעמודות ── */
.agent-cols { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.acol { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
        border-radius: 10px; padding: .8rem .9rem; }
.acol.empty { border-top-color: var(--bad); opacity: .75; }
.acol h3 { font-size: .9rem; margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .5rem; }
.acol .letter { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.acol.empty .letter { color: var(--bad); }
.acol .gist { color: var(--dim); font-size: .78rem; margin: 0 0 .7rem; }
.acol .arow { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .4rem;
              padding: .35rem 0; border-top: 1px solid var(--line); font-size: .87rem; }
.acol .arow .lbl { color: var(--dim); }
.acol .arow.miss .val { color: var(--bad); }
.acol .arow .mark { color: var(--good); }

.qa-full { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .9rem; }
.qa-full .qa-row:first-child { border-top: 0; }
.qa-row.open .a { color: var(--warn); }
.qa-full .qa-row .q em { color: var(--accent); font-style: normal; font-size: .78rem; }

/* ── השאלה הפתוחה והנושא ── */
.ask { margin: 1rem 0; }
.ask-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.ask-head .skip {
    margin-inline-start: auto; min-height: 0; padding: .25rem .7rem;
    font-size: .74rem; border-color: var(--line); color: var(--dim);
}
.ask-head .skip:hover { border-color: var(--accent); color: var(--accent); }
.qa-row.skipped .a { color: var(--dim); font-style: italic; }
.ask .topic {
    display: inline-block; font-size: .72rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--accent);
    border: 1px solid var(--accent); border-radius: 20px;
    padding: .1rem .7rem; margin-bottom: .4rem;
}
.ask .suggest.big { margin: 0; }

/* ── מיקוד לפי שער — צמוד לשאלה, כי זה מה שהוא משנה ── */
.focus-gates {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin: 0 0 1rem;
}
.focus-gates .note { margin-inline-end: .3rem; }
.focus-gates .chip {
    min-height: 0; padding: .28rem .8rem; font-size: .78rem;
    border-radius: 20px; border: 1px solid var(--line); color: var(--dim);
    background: transparent;
}
.focus-gates .chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.focus-gates .chip.on {
    border-color: var(--accent); color: var(--bg); background: var(--accent);
    font-weight: 600;
}
/* שער פתוח: אין מה למקד בו. מוצג כדי שהמצב יהיה שלם, לא כדי שיילחץ. */
.focus-gates .chip.done:disabled {
    border-color: var(--good); color: var(--good); opacity: .45; cursor: default;
}
.focus-gates .chip.clear { border-style: dashed; }

.summary .redo {
    min-height: 0; padding: .25rem .8rem; font-size: .74rem;
    border-color: var(--line); color: var(--dim); margin-top: .8rem;
}
.summary .redo:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.qa { margin: 0 0 1rem; }
.qa > summary { color: var(--dim); font-size: .85rem; cursor: pointer; padding: .3rem 0; }
.qa > summary .n { color: var(--good); }
.qa-row {
    display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: .8rem;
    padding: .45rem .7rem; border-top: 1px solid var(--line); font-size: .88rem;
}
.qa-row .q { color: var(--dim); }
.qa-row .a { color: var(--fg); }
.qa-row.skipped .a { color: var(--warn); font-size: .82rem; }

.title-in { padding: .5rem .8rem; border-radius: 8px; border: 1px solid var(--line);
            background: var(--panel); color: var(--fg); font-size: .93rem; min-width: 16rem; }

/* ── סיכום שיחה ── */
/* הסיכום — חלונית הראש. פס ענבר למעלה. */
.summary {
    background: var(--panel); border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1rem 0 1.5rem;
}
.summary .headline {
    font-size: clamp(1.15rem, .95rem + .9vw, 1.5rem);
    font-weight: 600; line-height: 1.32; margin: 0 0 .65rem; letter-spacing: -.015em;
}
.summary .what { color: var(--dim); margin: 0 0 1.2rem; max-width: 82ch; font-size: .9rem; }
.summary .col h3 { font-family: var(--mono); letter-spacing: .16em; }
.summary .verdict { font-size: .93rem; }
.summary .cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.summary .col h3 {
    font-size: .78rem; color: var(--dim); text-transform: uppercase;
    letter-spacing: .06em; margin: 0 0 .5rem;
}
.summary .item {
    padding: .4rem .7rem; margin-bottom: .35rem; border-radius: 6px;
    background: var(--bg); border-inline-start: 2px solid var(--line); font-size: .92rem;
}
.summary .learned .item { border-inline-start-color: var(--good); }
.summary .missing .item { border-inline-start-color: var(--warn); }
.summary .actions .item { border-inline-start-color: var(--accent); }
.summary .verdict { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }

/* תובנות בעמודות, עמודה לקטגוריה */
.insight-cols { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.icol { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--dim);
        border-radius: 10px; padding: .8rem .9rem; }
.icol h3 { font-size: .88rem; margin: 0 0 .3rem; }
.icol h3 .n { color: var(--dim); font-size: .75rem; margin-inline-start: .3rem; }
.icol .gist { color: var(--dim); font-size: .8rem; margin: 0 0 .7rem; }
.icol .ins { padding: .45rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.icol .ins strong { font-weight: 500; display: block; }
.icol .ins .q { color: var(--dim); font-size: .8rem; }
.icol.i-pain        { border-top-color: var(--bad); }
.icol.i-risk        { border-top-color: var(--warn); }
.icol.i-opportunity { border-top-color: var(--good); }
.icol.i-number      { border-top-color: var(--accent); }

.has-sum { color: var(--accent); margin-inline-start: .35rem; }
pre.transcript { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line);
                 border-radius: 8px; padding: 1rem; max-height: 60vh; overflow: auto; font-size: .85rem; }

/* ── תובנות והחישוב ── */
.calc {
    background: var(--panel); border: 1px solid var(--good); border-radius: 10px;
    padding: .9rem 1.1rem; margin: 1rem 0;
}
.calc .hd { font-size: .75rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.calc .line { font-size: 1.1rem; font-variant-numeric: tabular-nums; margin-top: .35rem; }
.calc .line:last-child { color: var(--good); font-weight: 600; }

.insights { list-style: none; padding: 0; margin: 0; }
.insights li {
    background: var(--panel); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--dim);
    border-radius: 8px; padding: .55rem .85rem; margin-bottom: .4rem;
}
.insights strong { font-weight: 500; }
.insights .tag {
    font-size: .68rem; color: var(--dim); border: 1px solid var(--line);
    border-radius: 4px; padding: .05rem .4rem; margin-inline-end: .5rem;
}
.insights .q { display: block; color: var(--dim); font-size: .82rem; margin-top: .2rem; }
.insights li.i-pain        { border-inline-start-color: var(--bad); }
.insights li.i-risk        { border-inline-start-color: var(--warn); }
.insights li.i-opportunity { border-inline-start-color: var(--good); }
.insights li.i-number      { border-inline-start-color: var(--accent); }

.stat.num.est { border-inline-start-color: var(--warn); }
.stat.num .q { color: var(--dim); font-size: .75rem; margin-top: .3rem; }

table.state th { width: 12rem; color: var(--dim); }
table.state td { font-size: .92rem; }
table.state tr.empty td, table.state tr.empty th { opacity: .42; }
table.state td.conf { width: 7rem; color: var(--good); font-size: .78rem; }
.suggest { background: var(--panel); border: 1px solid var(--line);
           border-inline-start: 3px solid var(--accent); border-radius: 8px; padding: .7rem .9rem; }

/* טבלת נתונים: שורות צפופות, כותרת במונוספייס, הדגשה בריחוף */
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th { text-align: start; color: var(--dim); font-family: var(--mono); font-weight: 500;
     font-size: .64rem; text-transform: uppercase; letter-spacing: .16em;
     padding: .4rem .55rem; border-bottom: 1px solid var(--rule); }
td { padding: .42rem .55rem; border-top: 1px solid var(--line); vertical-align: top;
     font-variant-numeric: tabular-nums; }
tbody tr { transition: background .1s ease; }
tbody tr:hover td { background: var(--raise); }
td.quote { color: var(--dim); max-width: 34ch; }
td.advice { max-width: 34ch; }

tr.k-SelfPraise td, tr.k-InventedRoi td, tr.k-DemoBeforeNumbers td,
tr.k-LongMonologue td, tr.k-FreeRiskReversal td { background: color-mix(in srgb, var(--bad) 9%, transparent); }
tr.k-PainStatement td, tr.k-Hesitation td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
tr.k-PivotQuestion td { background: color-mix(in srgb, var(--good) 9%, transparent); }

/* ── מסך המודלים ─────────────────────────────────────────────────── */
.keys { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1rem 0; }
.key { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
       background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.key .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.key.on  .dot { background: var(--good); }
.key.off .dot { background: var(--bad); }
.key.off strong { color: var(--dim); }

.bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }

.msg { background: var(--raise); border: 1px solid var(--line);
       border-inline-start: 3px solid var(--accent); border-radius: var(--radius);
       padding: .55rem .8rem; margin: .7rem 0; font-size: .86rem; }

.warn { background: color-mix(in srgb, var(--warn) 12%, transparent);
        border: 1px solid var(--warn); border-radius: var(--radius);
        padding: .6rem .85rem; margin: .8rem 0; font-size: .85rem; }

.engines { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.engine { background: var(--panel); border: 1px solid var(--line);
          border-radius: var(--radius); padding: .8rem .9rem; }
.engine .head { margin-bottom: .5rem; }
.engine .head strong { display: block; }
.engine select { width: 100%; }

/* טבלה רחבה לא תדחוף את הדף — היא גוללת בתוך עצמה */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll table { min-width: 520px; }
.mono { font-family: var(--mono); font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════════════
   כניסה
   ═══════════════════════════════════════════════════════════════════ */

main.bare { display: grid; place-items: center; min-height: 100dvh; padding: 1.5rem; }

.login {
    width: min(24rem, 100%);
    display: flex; flex-direction: column; gap: .9rem;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 10px; padding: 1.8rem 1.6rem;
}
.login h1 {
    margin: 0 0 .4rem; font-size: 1.1rem; letter-spacing: .22em;
    color: var(--accent); text-align: center;
}
.login label {
    display: flex; flex-direction: column; gap: .35rem;
    font-size: .78rem; letter-spacing: .04em; color: var(--dim);
}
.login input {
    background: var(--raise); border: 1px solid var(--line); border-radius: 6px;
    color: var(--fg); font: inherit; padding: .55rem .7rem;
    /* אימייל וסיסמה הם תמיד לטיניים — מונוספייס, ומכריחים כיוון LTR
       כדי שסימנים כמו @ ו-. לא יקפצו לצד הלא נכון בדף RTL. */
    font-family: "JetBrains Mono", ui-monospace, monospace;
    direction: ltr; text-align: start;
}
.login input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button {
    margin-top: .5rem; padding: .6rem;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent); border-radius: 6px;
    font: inherit; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
.login button:hover { background: var(--accent); color: var(--bg); }
.login-err {
    margin: 0; padding: .5rem .7rem; border-radius: 6px;
    background: color-mix(in srgb, var(--bad) 14%, transparent);
    color: var(--bad); font-size: .82rem;
}

/* יציאה — צמוד לקצה הסרגל, אחרי מתג הנושא */
.topnav .logout { display: flex; align-items: center; gap: .5rem; margin: 0; }
.topnav .whoami {
    color: var(--dim); font-size: .76rem; letter-spacing: .03em;
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topnav .logout button {
    background: transparent; border: 1px solid var(--line); border-radius: 6px;
    color: var(--dim); font: inherit; font-size: .76rem; padding: .25rem .6rem; cursor: pointer;
}
.topnav .logout button:hover { color: var(--fg); border-color: var(--rule); }