@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

    /* ══════════════════════════════════════════
   ערכת צבעים — מצב כהה (ברירת מחדל)
══════════════════════════════════════════ */
    :root {
      --bg: #0d1117;
      --bg2: #161b22;
      --bg3: #1c2333;
      --border: rgba(255, 255, 255, 0.07);
      --border2: rgba(255, 255, 255, 0.13);
      --text: #e6edf3;
      --text2: #8b949e;
      --text3: #6e7681;
      --card-bg: rgba(22, 27, 34, 0.97);
      --card-border: #30363d;
      --header-bg: rgba(13, 17, 23, 0.9);
      --thead-bg: rgba(0, 0, 0, 0.35);
      --row-even: rgba(255, 255, 255, 0.018);
      --row-hover: rgba(255, 255, 255, 0.03);
      --input-bg: rgba(255, 255, 255, 0.04);
      --pagination-bg: rgba(0, 0, 0, 0.2);
      --scrollbar: #30363d;
      --scrollbar-h: #484f58;
      --accent: #58a6ff;
      --accent-dim: rgba(88, 166, 255, 0.12);
      --accent-border: rgba(88, 166, 255, 0.25);
      --accent2: #7c3aed;
      --green: #3fb950;
      --green-dim: rgba(63, 185, 80, 0.12);
      --green-border: rgba(63, 185, 80, 0.25);
      --yellow: #d29922;
      --orange: #db6d28;
      --red: #f85149;
      --red-dim: rgba(248, 81, 73, 0.1);
      --red-border: rgba(248, 81, 73, 0.25);
      --purple: #bc8cff;
      --purple-dim: rgba(188, 140, 255, 0.12);
      --purple-border: rgba(188, 140, 255, 0.25);

      --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
      --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.6);
      --glow: 0 0 24px rgba(88, 166, 255, 0.12);

      --chart-grid: rgba(255, 255, 255, 0.05);
      --chart-tick: #6e7681;
      --chart-tooltip-bg: rgba(22, 27, 34, 0.98);
      --chart-tooltip-border: rgba(48, 54, 61, 0.9);
      --chart-tooltip-text: #e6edf3;
      --chart-tooltip-body: #8b949e;
      --chart-legend: #8b949e;

      --radius: 14px;
      --radius-sm: 9px;
      --radius-xs: 6px;

      /* אנימציית מעבר ערכת צבעים */
      --transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
    }

    /* ══════════════════════════════════════════
   ערכת צבעים — מצב בהיר
══════════════════════════════════════════ */
    html[data-theme="light"] {
      --bg: #f0f4f8;
      --bg2: #ffffff;
      --bg3: #f8fafc;
      --border: rgba(0, 0, 0, 0.07);
      --border2: rgba(0, 0, 0, 0.13);
      --text: #1e293b;
      --text2: #475569;
      --text3: #94a3b8;
      --card-bg: #ffffff;
      --card-border: #e2e8f0;
      --header-bg: rgba(255, 255, 255, 0.92);
      --thead-bg: #f8fafc;
      --row-even: rgba(0, 0, 0, 0.018);
      --row-hover: rgba(37, 99, 235, 0.04);
      --input-bg: rgba(0, 0, 0, 0.03);
      --pagination-bg: #f8fafc;
      --scrollbar: #cbd5e1;
      --scrollbar-h: #94a3b8;
      --accent: #2563eb;
      --accent-dim: rgba(37, 99, 235, 0.09);
      --accent-border: rgba(37, 99, 235, 0.22);
      --accent2: #7c3aed;
      --green: #16a34a;
      --green-dim: rgba(22, 163, 74, 0.09);
      --green-border: rgba(22, 163, 74, 0.22);
      --yellow: #b45309;
      --orange: #c2410c;
      --red: #dc2626;
      --red-dim: rgba(220, 38, 38, 0.08);
      --red-border: rgba(220, 38, 38, 0.22);
      --purple: #7c3aed;
      --purple-dim: rgba(124, 58, 237, 0.09);
      --purple-border: rgba(124, 58, 237, 0.22);

      --shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px #e2e8f0;
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px #e2e8f0;
      --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px #e2e8f0;
      --glow: 0 0 24px rgba(37, 99, 235, 0.1);

      --chart-grid: rgba(0, 0, 0, 0.06);
      --chart-tick: #94a3b8;
      --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
      --chart-tooltip-border: #e2e8f0;
      --chart-tooltip-text: #1e293b;
      --chart-tooltip-body: #64748b;
      --chart-legend: #64748b;
    }

    /* ══════════════════════════════════════════ RESET */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--scrollbar);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-h);
    }

    /* ══════════════════════════════════════════ BODY */
    /* RTL לכל המסמך */
    html {
      direction: rtl;
    }

    body {
      font-family: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, var(--accent-dim) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 85% 80%, var(--purple-dim) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 20% -5%, rgba(88, 166, 255, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 105%, rgba(124, 58, 237, 0.06) 0%, transparent 55%);
      background-attachment: fixed;
      min-height: 100vh;
      color: var(--text);
      direction: rtl;
      transition: var(--transition);
    }

    html[data-theme="light"] body {
      background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, var(--accent-dim) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 85% 80%, var(--purple-dim) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 20% -5%, rgba(37, 99, 235, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 105%, rgba(124, 58, 237, 0.04) 0%, transparent 55%);
    }

    /* ══════════════════════════════════════════ HEADER */
    .header {
      background: var(--header-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border2);
      padding: 0 28px;
      height: 64px;
      display: flex;
      align-items: center;
      gap: 14px;
      position: sticky;
      top: 0;
      z-index: 200;
      transition: var(--transition);
    }

    /* קו accent עדין בראש ה-header */
    .header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 50%, transparent 100%);
      opacity: 0.55;
      pointer-events: none;
    }

    .header-logo {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(88, 166, 255, 0.32), 0 0 0 1px rgba(88, 166, 255, 0.18);
      transition: box-shadow 0.3s;
    }

    .header-logo:hover {
      box-shadow: 0 6px 22px rgba(88, 166, 255, 0.45), 0 0 0 1px rgba(88, 166, 255, 0.3);
    }

    .header-brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .header-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.4px;
      line-height: 1.1;
      transition: var(--transition);
    }

    .header-sub {
      font-size: 11px;
      color: var(--text3);
      font-weight: 500;
      letter-spacing: 0.01em;
      transition: var(--transition);
    }

    /* מפריד אנכי בין הבראנד לצ'יפ */
    .header-brand-sep {
      width: 1px;
      height: 28px;
      background: var(--border2);
      flex-shrink: 0;
      display: none;
    }

    .header-brand-sep.visible {
      display: block;
    }

    .header-spacer {
      flex: 1;
    }

    /* צ'יפ מידע על הדוח הנטען */
    .header-info-chip {
      display: none;
      align-items: center;
      gap: 9px;
      background: linear-gradient(135deg, var(--accent-dim), var(--card-bg) 80%);
      border: 1px solid var(--accent-border);
      border-radius: 12px;
      padding: 6px 16px 6px 10px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text2);
      transition: var(--transition);
      max-width: 320px;
      min-width: 0;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(88, 166, 255, 0.1);
    }

    .header-info-chip #headerInfoText {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .chip-label-short { display: none; }

    .header-info-chip.visible {
      display: flex;
    }

    .header-info-chip .chip-dot {
      width: 8px;
      height: 8px;
      background: var(--green);
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 6px var(--green);
      animation: blink 2.5s infinite;
    }

    .header-info-chip strong {
      color: var(--text);
      font-weight: 700;
      font-size: 14px;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

    .header-sep {
      width: 1px;
      height: 24px;
      background: var(--border2);
      margin: 0 2px;
      flex-shrink: 0;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* כפתורי כותרת — בסיס משותף */
    .hbtn {
      height: 34px;
      border: 1px solid var(--border2);
      border-radius: 9px;
      background: var(--input-bg);
      color: var(--text2);
      font-size: 13px;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 13px;
      transition: var(--transition), transform 0.15s;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .hbtn-icon {
      width: 34px;
      padding: 0;
      font-size: 15px;
    }

    .hbtn:hover {
      background: var(--accent-dim);
      border-color: var(--accent-border);
      color: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(88, 166, 255, 0.12);
    }

    .hbtn:active {
      transform: translateY(0);
    }

    /* ── Profile Menu ── */
    .profile-wrap {
      position: relative;
    }

    .profile-btn {
      width: auto;
      min-width: 34px;
      padding: 0 9px;
      gap: 5px;
    }

    .profile-initials {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      flex-shrink: 0;
    }

    .profile-initials.anon {
      background: var(--border2);
      color: var(--text3);
      font-size: 15px;
    }

    .profile-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      background: var(--card-bg);
      border: 1px solid var(--border2);
      border-radius: 14px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
      min-width: 210px;
      z-index: 9000;
      overflow: hidden;
    }

    .profile-dropdown.open {
      display: block;
      animation: pd-in 0.16s ease;
    }

    @keyframes pd-in {
      from { opacity: 0; transform: translateY(-6px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)   scale(1);    }
    }

    .profile-info {
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--border2);
    }

    .profile-info-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .profile-info-sys {
      font-size: 11px;
      color: var(--text3);
      direction: ltr;
      text-align: right;
    }

    .pdd-sep {
      height: 1px;
      background: var(--border2);
      margin: 4px 0;
    }

    .pdd-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      background: none;
      border: none;
      color: var(--text2);
      font-size: 13px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      text-align: right;
      transition: background 0.15s;
      white-space: nowrap;
    }

    .pdd-item:hover {
      background: var(--accent-dim);
      color: var(--text);
    }

    .pdd-item-exit {
      color: #e05c54;
    }

    .pdd-item-exit:hover {
      background: rgba(224, 92, 84, 0.1);
      color: #e05c54;
    }

    /* ══════════════════════════════════════════ HELP MODAL */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
      overflow-y: auto;
    }

    .modal-overlay.open {
      display: flex;
      animation: fadeIn 0.2s ease;
    }

    .modal-box {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      max-width: 680px;
      width: 92%;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      transition: var(--transition);
      position: relative;
    }

    .modal-head {
      padding: 22px 28px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 14px;
      background: linear-gradient(135deg, var(--accent-dim), var(--purple-dim));
    }

    .modal-head-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .modal-head h2 {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.3px;
      transition: var(--transition);
    }

    .modal-head p {
      font-size: 12px;
      color: var(--text2);
      margin-top: 2px;
      transition: var(--transition);
    }

    .modal-close {
      margin-right: auto;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      background: var(--input-bg);
      color: var(--text2);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }

    .modal-close:hover {
      background: var(--red-dim);
      border-color: var(--red-border);
      color: var(--red);
    }

    .modal-body {
      padding: 24px 28px 32px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      overflow-y: auto;
    }

    .help-section-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .help-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border2);
    }

    .help-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media(max-width:560px) {
      .help-grid {
        grid-template-columns: 1fr;
      }
    }

    /* מרווח בין פסקת מבוא יתומה (.help-item) לבין הגריד שלאחריה */
    .help-item + .help-grid {
      margin-top: 10px;
    }

    .help-item {
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      transition: var(--transition);
    }

    .help-item:hover {
      border-color: var(--border2);
    }

    .help-item-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 5px;
      transition: var(--transition);
    }

    .help-item-body {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
      transition: var(--transition);
    }

    .help-tag {
      display: inline-block;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
    }

    .help-warn {
      background: var(--red-dim);
      border: 1px solid var(--red-border);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .help-warn strong {
      color: var(--yellow);
    }

    .help-note {
      background: var(--green-dim);
      border: 1px solid var(--green-border);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    /* ── פידבק / דיווח תקלה ── */
    .help-feedback {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 13px 24px;
      margin: 18px -24px -24px;
      border-top: 1px solid var(--border);
      background: var(--bg3);
      border-radius: 0 0 16px 16px;
      font-size: 12.5px;
      color: var(--text3);
    }

    .help-feedback-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 13px;
      border-radius: 8px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      transition: var(--transition);
      white-space: nowrap;
    }

    .help-feedback-link:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .upload-feedback-link {
      color: var(--text3);
      text-decoration: none;
      transition: color .15s ease;
    }

    .upload-feedback-link:hover {
      color: var(--accent);
    }

    /* btn-reload מוסתר כברירת מחדל; הסגנון מגיע מ-.hbtn */
    .btn-reload {
      display: none;
    }

    /* ══════════════════════════════════════════ MAIN */
    .main {
      max-width: 1420px;
      margin: 0 auto;
      padding: 28px 20px 60px;
    }

    /* כשמסך ה-shell פעיל: הסר את הריווח כי ה-app-main מנהל בעצמו, וקבע body כלא-גליל
       (הגלילה עוברת ל-.app-main כדי שהסקרולבר יציית ל-direction:rtl ויישב בצד שמאל) */
    .main:has(#mainShell:not([style*="none"])) {
      max-width: none;
      padding: 0;
    }

    body:has(#mainShell:not([style*="none"])) {
      height: 100vh;
      overflow: hidden;
    }

    /* ══════════════════════════════════════════ APP SHELL — sidebar + content */
    .app-shell {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      height: 100vh;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    /* ── SIDEBAR (right side in RTL — first child in flex row) ── */
    .app-sidebar {
      width: 240px;
      flex-shrink: 0;
      background: var(--bg2);
      border-left: 1px solid var(--border2);
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 22px 14px 18px;
      position: sticky;
      top: 0;
      height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 100;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    [data-theme="light"] .app-sidebar {
      background: rgba(255, 255, 255, 0.86);
    }

    /* Brand */
    .app-sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 10px 18px;
      margin-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .app-sidebar-logo {
      width: 160px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 3px 10px rgba(88, 166, 255, 0.18));
      flex-shrink: 0;
      display: block;
      margin: 0 auto;
    }

    [data-theme="light"] .app-sidebar-logo {
      filter: drop-shadow(0 3px 10px rgba(37, 99, 235, 0.10));
    }

    .app-sidebar-brand-text {
      display: none;
      /* הלוגו הרשמי כבר כולל שם — אין צורך בטקסט נוסף */
    }

    /* Navigation */
    .app-sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .app-sidebar-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      border: none;
      background: transparent;
      border-radius: 11px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      letter-spacing: -0.1px;
      text-align: right;
      width: 100%;
      transition: background 0.16s, color 0.16s;
    }

    .app-sidebar .app-sidebar-item:hover {
      background: var(--accent-dim);
      color: var(--text);
      box-shadow: none;
      transform: none;
    }

    /* החוקים סקופים תחת .app-sidebar כדי לדרוס את ה-CSS הישן של .shell-tab.active */
    .app-sidebar .app-sidebar-item.active {
      background: var(--accent-dim);
      color: var(--accent);
      font-weight: 700;
      box-shadow: none;
      transform: none;
    }

    .app-sidebar .app-sidebar-item.active::before {
      content: '';
      position: absolute;
      right: -14px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 22px;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }

    .app-sidebar-item-icon {
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
      width: 22px;
      text-align: center;
    }

    .app-sidebar-item-label {
      flex: 1;
      pointer-events: none;
    }

    /* Spacer pushes footer to bottom */
    .app-sidebar-spacer {
      flex: 1;
      min-height: 16px;
    }

    /* Footer: unified profile card */
    .app-sidebar-footer {
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    /* Profile card — מאחד את הפרופיל עם פעולות מהירות */
    .app-sidebar-profile {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 12px 10px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .app-sidebar-profile-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .app-sidebar-profile-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(88, 166, 255, 0.22);
    }

    .app-sidebar-profile-avatar .profile-initials {
      color: #fff;
    }

    .app-sidebar-profile-avatar .profile-initials.anon {
      font-size: 16px;
    }

    .app-sidebar-profile-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .app-sidebar-profile-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: -0.1px;
    }

    .app-sidebar-profile-sys {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      direction: ltr;
      text-align: right;
      font-weight: 500;
    }

    /* שורת אייקוני פעולה — תחת הפרופיל, ללא טקסט */
    .app-sidebar-profile-actions {
      display: flex;
      gap: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .app-sidebar-icon-btn {
      flex: 1;
      height: 32px;
      border-radius: 8px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 14px;
      color: var(--text3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, transform 0.15s;
      font-family: inherit;
    }

    .app-sidebar-icon-btn:hover {
      background: var(--card-bg);
      color: var(--text);
      transform: translateY(-1px);
    }

    .app-sidebar-icon-btn-danger:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    /* Visually hidden — keeps the legacy ID without showing label */
    .visually-hidden {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }

    /* ── MAIN CONTENT AREA — רוחב מלא + scroll-container פנימי — בכך הסקרולבר יישב בצד שמאל (RTL) ── */
    .app-main {
      flex: 1;
      min-width: 0;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 28px 32px 60px;
    }

    /* Responsive: tablet — collapse sidebar to icon rail */
    @media(max-width:1024px) {
      .app-sidebar {
        width: 64px;
        padding: 16px 8px;
      }
      .app-sidebar-logo { display: none; }
      .app-sidebar-brand { padding: 4px 4px 14px; justify-content: center; }
      .app-sidebar-brand::before {
        content: '📞';
        font-size: 22px;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35);
      }
      .app-sidebar-item-label { display: none; }
      .app-sidebar-item {
        justify-content: center;
        padding: 11px 8px;
      }
      .app-sidebar-item.active::before { display: none; }
      .app-sidebar-profile {
        padding: 8px 4px;
        gap: 6px;
      }
      .app-sidebar-profile-info { display: none; }
      /* ב-rail הצר אין מקום ל-3 אייקונים בשורה — מסדרים אותם בעמודה */
      .app-sidebar-profile-actions { flex-direction: column; gap: 5px; padding-top: 8px; }
      .app-sidebar-icon-btn { flex: none; width: 100%; font-size: 14px; height: 30px; }
      .app-main { padding: 22px 18px 60px; }
    }

    /* Mobile: full-width content, sidebar becomes bottom nav */
    @media(max-width:640px) {
      .app-shell { flex-direction: column-reverse; }
      .app-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
        /* כיבוד safe-area (home-indicator) — האייקונים לא נחתכים מתחת לפס הבית */
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
        border-left: none;
        border-top: 1px solid var(--border2);
        z-index: 200;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .app-sidebar-brand,
      .app-sidebar-spacer { display: none; }

      /* הפרופיל והפעולות עוברים לגיליון "עוד" (navMoreBtn) — אין כפתורים צפים */
      .app-sidebar-footer { display: none; }

      .app-sidebar-nav {
        flex-direction: row;
        flex: 1;
        justify-content: space-around;
        gap: 4px;
      }
      /* פריט "עוד" — מוצג רק במובייל, בתוך סרגל הניווט (specificity גוברת על ברירת המחדל) */
      .app-sidebar-nav .app-nav-more { display: flex; }
      .app-sidebar-item {
        flex-direction: column;
        gap: 4px;
        padding: 6px 8px;
        font-size: 11px;
        text-align: center;
      }
      .app-sidebar-item-label { display: block; flex: none; width: 100%; text-align: center; }
      .app-sidebar-item.active::before { display: none; }
      .app-sidebar-item-icon { font-size: 20px; }
      /* מספיק מרווח תחתון כדי שה-bottom-nav (~71px) + safe-area לא יסתירו את סוף התוכן */
      .app-main { padding: 14px 12px calc(94px + env(safe-area-inset-bottom, 0px)); }
    }

    /* מסכים נמוכים (מובייל לרוחב / landscape) — ה-sidebar האנכי נדחס כך
       שהפרופיל וכפתורי הפעולה לא נחתכים בתחתית ולא דורשים גלילה.
       חל רק כשה-sidebar עדיין אנכי (>640px), לא במצב bottom-nav. */
    @media (max-height: 500px) and (min-width: 641px) {
      .app-sidebar { padding-top: 10px; padding-bottom: 10px; gap: 6px; }
      .app-sidebar-brand { display: none; }
      .app-sidebar-spacer { min-height: 0; }
      .app-sidebar-nav { gap: 4px; }
      .app-sidebar-item { padding: 7px 6px; }
      .app-sidebar-footer { padding-top: 6px; }
      .app-sidebar-profile { padding: 8px; gap: 6px; }
      .app-sidebar-profile-avatar { width: 30px; height: 30px; font-size: 13px; }
      .app-sidebar-profile-actions { padding-top: 6px; }
      .app-sidebar-icon-btn { height: 26px; font-size: 13px; }
    }

    /* ── Hide legacy shell-tabs (replaced by sidebar) ── */
    nav.shell-tabs { display: none; }

    /* ── Placeholder לטאב שטרם פותח ── */
    .tab-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 80px 24px;
      min-height: 60vh;
      text-align: center;
      background: var(--card-bg);
      border: 1px dashed var(--border2);
      border-radius: 22px;
    }

    .tab-placeholder-icon {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      background: linear-gradient(135deg, var(--accent-dim), var(--purple-dim));
      border: 1px solid var(--accent-border);
      border-radius: 22px;
      box-shadow: 0 10px 30px rgba(88, 166, 255, 0.18);
    }

    .tab-placeholder-title {
      font-size: 32px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.6px;
      background: linear-gradient(135deg, var(--text), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .tab-placeholder-sub {
      font-size: 14px;
      color: var(--text3);
      font-weight: 500;
      max-width: 380px;
    }

    .tab-placeholder-badge {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 999px;
      padding: 5px 14px;
      letter-spacing: 0.4px;
      margin-top: 4px;
    }

    .upload-version {
      text-align: center;
      color: var(--text3);
      font-size: 11px;
      opacity: 0.45;
      padding: 18px 0 20px;
      letter-spacing: .04em;
    }

    /* ══════════════════════════════════════════ UPLOAD PAGE — full-screen immersive */

    /* הסתר את ה-header העליון כשמסך ההתחברות פעיל — חוויה מלאת מסך נקייה */
    body:has(#uploadPage:not([style*="none"])) > .header {
      display: none;
    }

    /* Main pad reset כשמסך הכניסה פעיל */
    .main:has(#uploadPage:not([style*="none"])) {
      padding-bottom: 0;
      padding-top: 0;
    }

    .upload-page {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 60px 16px 0;
      animation: fadeUp 0.4s ease;
      min-height: 100vh;
      overflow: hidden;
    }

    /* רקע עדין עם gradients מנקדים — אסתטיקה נקייה */
    .upload-page::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(88, 166, 255, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(124, 58, 237, 0.07) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    [data-theme="light"] .upload-page::before {
      background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(124, 58, 237, 0.05) 0%, transparent 60%);
    }

    .upload-page > * {
      position: relative;
      z-index: 1;
    }

    /* ══ BRAND LOCKUP — לוגו + שם מערכת ══ */
    .upload-brand {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin-bottom: 36px;
      text-align: center;
    }

    .upload-brand-glow {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(88, 166, 255, 0.35), transparent 65%);
      filter: blur(28px);
      pointer-events: none;
      z-index: -1;
    }

    [data-theme="light"] .upload-brand-glow {
      background: radial-gradient(ellipse, rgba(37, 99, 235, 0.22), transparent 65%);
    }

    /* לוגו ימות המשיח — banner רחב (אספקט 3.36:1) — מוצג ברוחבו הטבעי */
    .upload-brand-logo {
      width: 220px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 6px 20px rgba(88, 166, 255, 0.20));
      margin-bottom: 18px;
      animation: brand-float 4.5s ease-in-out infinite;
    }

    [data-theme="light"] .upload-brand-logo {
      filter: drop-shadow(0 6px 18px rgba(37, 99, 235, 0.14));
    }

    /* קו חיצוני עדין שמפריד בין הלוגו לכותרת המערכת */
    .upload-brand-divider {
      width: 56px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      border-radius: 2px;
      margin-bottom: 16px;
      opacity: 0.6;
    }

    @keyframes brand-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    .upload-brand-title {
      font-size: 36px;
      font-weight: 900;
      letter-spacing: -1px;
      color: var(--text);
      margin: 0 0 6px;
      line-height: 1.05;
      background: linear-gradient(135deg, var(--text) 0%, var(--accent) 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .upload-brand-sub {
      font-size: 15px;
      color: var(--text3);
      font-weight: 500;
      margin: 0;
      letter-spacing: -0.1px;
    }

    @media(max-width:600px) {
      .upload-page {
        padding: 36px 16px 0;
      }
      .upload-brand {
        margin-bottom: 28px;
      }
      .upload-brand-logo {
        width: 180px;
        margin-bottom: 14px;
      }
      .upload-brand-divider {
        width: 44px;
        margin-bottom: 12px;
      }
      .upload-brand-title {
        font-size: 26px;
      }
      .upload-brand-sub {
        font-size: 13px;
      }
    }

    /* ── MODE CARDS (שמות הכיתות mode-tab נשמרים ל-JS) ── */
    .mode-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      max-width: 560px;
      width: 100%;
      margin-bottom: 16px;
    }

    .mode-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 13px 16px 11px;
      border-radius: 18px;
      cursor: pointer;
      border: 2px solid var(--border2);
      background: var(--card-bg);
      color: var(--text2);
      font-family: inherit;
      transition: var(--transition), transform 0.2s;
      box-shadow: var(--shadow);
      text-align: center;
    }

    .mode-tab:hover {
      border-color: var(--accent);
      color: var(--text);
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg), 0 0 20px rgba(88, 166, 255, 0.12);
    }

    .mode-tab.active {
      border-color: var(--accent);
      background: linear-gradient(145deg, var(--accent-dim), var(--card-bg));
      color: var(--text);
      box-shadow: var(--shadow-lg), 0 0 24px rgba(88, 166, 255, 0.18);
    }

    .mode-tab .mc-icon {
      font-size: 24px;
      line-height: 1;
    }

    .mode-tab .mc-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.2px;
    }

    .mode-tab.active .mc-title {
      color: var(--accent);
    }

    .mode-tab .mc-sub {
      font-size: 12px;
      color: var(--text3);
      font-weight: 500;
      line-height: 1.4;
    }

    /* UPLOAD PANELS */
    .upload-panels {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .upload-panel {
      width: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      animation: fadeUp 0.25s ease;
    }

    .upload-panel.active {
      display: flex;
    }

    /* ══════════════════════════════════════════ LOGIN CARD — modern, dashboard-native */
    .login-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 22px;
      max-width: 460px;
      width: 100%;
      overflow: hidden;
      box-shadow: var(--shadow-lg), 0 8px 36px rgba(88, 166, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      padding: 28px 30px 26px;
      transition: var(--transition);
    }

    .login-card-greeting {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-bottom: 22px;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--border);
    }

    .login-greeting-emoji {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      background: linear-gradient(135deg, var(--accent-dim), var(--purple-dim));
      border: 1px solid var(--accent-border);
      border-radius: 14px;
      flex-shrink: 0;
      animation: login-wave 2.6s ease-in-out 0.4s infinite;
      transform-origin: 70% 70%;
    }

    @keyframes login-wave {
      0%, 60%, 100% { transform: rotate(0deg); }
      10%, 30% { transform: rotate(-12deg); }
      20% { transform: rotate(14deg); }
      40% { transform: rotate(-8deg); }
      50% { transform: rotate(0deg); }
    }

    .login-greeting-title {
      font-size: 21px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.5px;
      margin: 0 0 3px;
      line-height: 1.2;
    }

    .login-greeting-sub {
      font-size: 13px;
      color: var(--text3);
      margin: 0;
      font-weight: 500;
      line-height: 1.4;
    }

    .login-card-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    #apiLoginForm {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .login-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .login-field-label {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text2);
      letter-spacing: -0.1px;
    }

    .login-input-wrap {
      position: relative;
    }

    .login-input-icon {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
      pointer-events: none;
      opacity: 0.7;
      transition: opacity 0.18s;
    }

    .login-input {
      width: 100%;
      padding: 15px 46px 15px 16px;
      background: var(--bg3);
      border: 1.5px solid var(--border2);
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      font-family: inherit;
      direction: rtl;
      transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    }

    .login-input::placeholder {
      color: var(--text3);
      font-weight: 500;
      opacity: 0.7;
    }

    .login-input:focus {
      border-color: var(--accent);
      background: var(--card-bg);
      box-shadow: 0 0 0 4px var(--accent-dim);
    }

    .login-input-wrap:focus-within .login-input-icon {
      opacity: 1;
    }

    .login-submit-btn {
      position: relative;
      width: 100%;
      padding: 15px 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      border-radius: 14px;
      font-size: 15.5px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 8px 24px rgba(88, 166, 255, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
      letter-spacing: -0.2px;
      margin-top: 2px;
      overflow: hidden;
    }

    .login-submit-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
      pointer-events: none;
    }

    .login-submit-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(88, 166, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .login-submit-btn:hover .login-submit-arrow {
      transform: translateX(-4px);
    }

    .login-submit-btn:active:not(:disabled) {
      transform: translateY(0);
    }

    .login-submit-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
    }

    .login-submit-arrow {
      font-size: 18px;
      font-weight: 700;
      transition: transform 0.18s;
      margin-right: -3px;
    }

    @media(max-width:600px) {
      .login-card {
        padding: 24px 20px 22px;
        max-width: 100%;
        border-radius: 18px;
      }
      .login-greeting-emoji {
        width: 42px;
        height: 42px;
        font-size: 22px;
      }
      .login-greeting-title {
        font-size: 19px;
      }
    }

    /* ══════════════════════════════════════════ LEGACY API CARD CLASSES (kept for compat) */
    .api-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 22px;
      max-width: 460px;
      width: 100%;
      overflow: hidden;
      transition: var(--transition);
    }

    .api-card-body {
      padding: 18px 30px 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .api-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .api-field label {
      display: block;
      font-size: 11px;
      font-weight: 800;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 7px;
      transition: var(--transition);
    }

    .api-field .iw {
      position: relative;
    }

    .api-field .iw .ii {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
      pointer-events: none;
    }

    .api-field input,
    .api-field select {
      width: 100%;
      padding: 12px 40px 12px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      font-family: inherit;
      direction: rtl;
      transition: var(--transition);
    }

    .api-field input::placeholder {
      color: var(--text3);
      font-weight: 400;
    }

    .api-field input:focus,
    .api-field select:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .api-field select option {
      background: var(--card-bg);
      color: var(--text);
    }

    .api-sep {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .api-period-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* ── API MODE TOGGLE ── */
    .api-mode-toggle {
      display: flex;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: var(--radius-sm);
      padding: 4px;
      gap: 4px;
    }

    .api-mode-btn {
      flex: 1;
      padding: 8px 12px;
      border: none;
      background: transparent;
      border-radius: calc(var(--radius-sm) - 3px);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    }

    .api-mode-btn.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 10px rgba(88, 166, 255, 0.35);
    }

    html[data-theme="light"] .api-mode-btn.active {
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
    }

    /* ── API DATE RANGE ROW ── */
    .api-date-range-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: end;
    }

    .api-date-range-sep {
      font-size: 18px;
      color: var(--text3);
      padding-bottom: 12px;
      text-align: center;
    }

    /* date inputs inherit .api-field input styles, just fix direction */
    .api-field input[type="date"] {
      direction: ltr;
      text-align: left;
      color-scheme: dark;
    }

    html[data-theme="light"] .api-field input[type="date"] {
      color-scheme: light;
    }

    /* dashboard rcp date input */
    .rcp-group input[type="date"] {
      padding: 9px 12px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      font-family: inherit;
      direction: ltr;
      text-align: left;
      transition: var(--transition);
      cursor: pointer;
      min-width: 148px;
      color-scheme: dark;
    }

    html[data-theme="light"] .rcp-group input[type="date"] {
      color-scheme: light;
    }

    .rcp-group input[type="date"]:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .api-range-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-xs);
      font-size: 12.5px;
      color: var(--text2);
      transition: var(--transition);
      margin-top: 2px;
    }

    .api-range-hint.warn {
      background: var(--red-dim);
      border-color: var(--red-border);
      color: var(--red);
    }

    .api-range-hint strong {
      color: var(--accent);
    }

    .api-range-hint.warn strong {
      color: var(--red);
    }

    /* ── RANGE CHANGE PANEL (dashboard) ── */
    .range-panel-dash {
      background: var(--card-bg);
      border: 1.5px solid var(--accent-border);
      border-radius: var(--radius);
      padding: 20px 24px 22px;
      margin: 0 0 12px;
      animation: slideDown 0.22s ease;
      transition: var(--transition);
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .rcp-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 12px;
    }

    .rcp-mode-toggle {
      margin-bottom: 16px;
    }

    /* קיצורי דרך לטעינה מהירה בתוך פאנל "שנה תקופה" */
    .rcp-presets {
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--border);
    }

    /* קיצורי דרך לטעינה מהירה במסך הראשון (לפני טעינת דוח) */
    .api-presets {
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px dashed var(--border);
    }

    .rcp-body {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .rcp-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .rcp-group label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .rcp-group .iw {
      position: relative;
    }

    .rcp-group .iw .ii {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
    }

    .rcp-group select {
      padding: 9px 34px 9px 12px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      font-family: inherit;
      direction: rtl;
      transition: var(--transition);
      cursor: pointer;
      min-width: 110px;
    }

    .rcp-group select:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .rcp-group select option {
      background: var(--card-bg);
      color: var(--text);
    }

    .rcp-sep {
      font-size: 18px;
      color: var(--text3);
      padding-bottom: 10px;
      flex-shrink: 0;
      align-self: flex-end;
    }

    .rcp-hint {
      font-size: 12.5px;
      color: var(--text2);
      padding-bottom: 10px;
      flex-shrink: 0;
      align-self: flex-end;
    }

    .rcp-hint.warn {
      color: var(--red);
    }

    .rcp-btns {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      margin-right: auto;
    }

    .btn-rcp-load {
      padding: 9px 22px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.15s, box-shadow 0.15s;
      white-space: nowrap;
    }

    .btn-rcp-load:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35);
    }

    .btn-rcp-load:active {
      transform: translateY(0);
    }

    .btn-rcp-cancel {
      padding: 9px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 13px;
      color: var(--text2);
      cursor: pointer;
      font-family: inherit;
      transition: var(--transition);
    }

    .btn-rcp-cancel:hover {
      border-color: var(--red-border);
      color: var(--red);
      background: var(--red-dim);
    }

    /* ── CHANGE RANGE HEADER BUTTON ── */
    /* עדיין בשימוש בטאבים "קבלת נתונים" ו"נקודות" (כפתורי "שנה שלוחה"/"חזרה") */
    .btn-change-range {
      background: var(--green-dim);
      border-color: var(--green-border);
      color: var(--green);
    }

    .btn-change-range:hover {
      background: var(--green-dim);
      border-color: var(--green);
      color: var(--green);
      box-shadow: 0 2px 8px rgba(63, 185, 80, 0.18);
    }

    /* כותרת-התקופה: מציגה את החודש/הטווח הטעון, ובלחיצה פותחת את החלפת-התקופה */
    .period-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 34px;
      padding: 0 14px;
      background: var(--green-dim);
      border: 1px solid var(--green-border);
      border-radius: 9px;
      font-family: inherit;
      cursor: pointer;
      transition: var(--transition);
    }

    .period-chip:hover {
      border-color: var(--green);
      box-shadow: 0 2px 8px rgba(63, 185, 80, 0.18);
    }

    .period-chip-icon {
      font-size: 15px;
      line-height: 1;
    }

    .period-chip-label {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
    }

    .period-chip-change {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--green);
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .period-chip { height: 32px; padding: 0 11px; }
      .period-chip-label { font-size: 13px; }
    }

    /* דוח האזנות — צ'יפ מזהה הקובץ בסרגל הפעולות (שם + מטא, שתי שורות) */
    .pb-file-chip {
      height: auto; padding: 7px 14px; align-items: center; gap: 10px;
      max-width: 100%; text-align: start;
    }
    .pb-file-chip-text { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
    .pb-file-chip-name {
      font-size: 14px; font-weight: 800; color: var(--text);
      max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pb-file-chip-meta { font-size: 11px; font-weight: 600; color: var(--text3); }
    .pb-file-chip-edit { font-size: 11.5px; font-weight: 700; color: var(--green); flex-shrink: 0; margin-inline-start: 4px; }
    .pb-play-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
    .pb-play-btn:hover { background: var(--accent); color: #fff; filter: brightness(1.07); }
    .pb-play-btn.playing { background: var(--accent2); border-color: var(--accent2); }

    /* אייקון מצב שמירת האזנות (כותרת הבורר) + מודאל ההסבר */
    .pb-log-icon {
      margin-inline-start: auto; align-self: flex-start; flex-shrink: 0;
      width: 38px; height: 38px; border-radius: 11px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 17px; cursor: pointer; transition: .15s;
      background: var(--input-bg); border: 1.5px solid var(--border2); color: var(--text3);
    }
    .pb-log-icon:hover { border-color: var(--accent-border); color: var(--text); }
    .pb-log-icon.is-active { background: var(--green-dim); border-color: var(--green-border); color: var(--green); }
    .pb-log-icon.is-inactive { background: rgba(247,144,9,.12); border-color: rgba(247,144,9,.4); color: var(--orange); }

    .pb-log-modal-box {
      width: 430px; max-width: 100%; overflow: hidden;
      background: var(--bg2); border: 1px solid var(--card-border);
      border-radius: 16px; box-shadow: var(--shadow-lg);
    }
    .pb-log-modal-head {
      display: flex; align-items: center; gap: 11px; padding: 16px 18px;
      border-bottom: 1px solid var(--border);
    }
    .pb-log-modal-badge {
      width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; font-size: 17px;
      background: var(--input-bg); color: var(--text3);
    }
    .pb-log-modal-badge.active { background: var(--green-dim); color: var(--green); }
    .pb-log-modal-badge.inactive { background: rgba(247,144,9,.14); color: var(--orange); }
    .pb-log-modal-title { font-size: 15px; font-weight: 800; color: var(--text); flex: 1; }
    .pb-log-modal-close { background: none; border: none; color: var(--text3); font-size: 17px; cursor: pointer; padding: 2px; }
    .pb-log-modal-close:hover { color: var(--text); }
    .pb-log-modal-body { padding: 18px; }
    .pb-log-modal-body p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--text2); }
    .pb-log-modal-enable {
      display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
      border: none; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    }
    .pb-log-modal-enable:hover { filter: brightness(1.07); }
    .pb-log-modal-enable:disabled { opacity: .7; cursor: default; }

    .btn-api-load {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.2s, box-shadow 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 6px 20px rgba(88, 166, 255, 0.35);
      margin-top: 4px;
      letter-spacing: -0.2px;
    }

    .btn-api-load:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(88, 166, 255, 0.45);
    }

    .btn-api-load:active:not(:disabled) {
      transform: translateY(0);
    }

    .btn-api-load:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .api-remember {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--text3);
      cursor: pointer;
      transition: var(--transition);
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg3);
    }

    .api-remember input[type="checkbox"] {
      accent-color: var(--accent);
      width: 15px;
      height: 15px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .api-remember:hover {
      color: var(--text2);
      border-color: var(--border2);
    }

    .api-status {
      display: none;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      align-items: center;
      gap: 10px;
      transition: var(--transition);
    }

    .api-status.ok {
      background: var(--green-dim);
      border: 1px solid var(--green-border);
      color: var(--green);
      display: flex;
    }

    .api-status.err {
      background: var(--red-dim);
      border: 1px solid var(--red-border);
      color: var(--red);
      display: flex;
    }

    .api-status.info {
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      display: flex;
    }

    .api-note {
      font-size: 12px;
      color: var(--text3);
      text-align: center;
      line-height: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: var(--transition);
    }

    .api-note::before {
      content: '🔒';
      font-size: 13px;
    }

    /* (הוסר: סגנון DROP ZONE — העלאת קובץ ידנית הוסרה) */

    /* (הוסר: סגנון GUIDE SECTION + steps + warn-box — שייכים לפאנל ההעלאה הידנית שהוסר) */

    /* ══════════════════════════════════════════ LOADING */
    .loading {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px 20px 60px;
      position: relative;
    }

    /* רקע זוהר מאחורי הכרטיס */
    .loading::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-dim) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .loading-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 32px;
      box-shadow:
        var(--shadow-lg),
        0 0 60px rgba(88, 166, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
      padding: 56px 60px 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      max-width: 560px;
      width: 100%;
      min-height: 440px;
      animation: fadeUp 0.4s cubic-bezier(.22, .68, 0, 1.2);
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    /* קישוט רקע בתוך הכרטיס */
    .loading-card::before {
      content: '';
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      height: 160px;
      background: radial-gradient(ellipse, var(--accent-dim) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── אייקון מונפש ── */
    .loading-icon-wrap {
      position: relative;
      width: 120px;
      height: 120px;
      margin-bottom: 32px;
    }

    /* עיגול רקע זוהר מאחורי האייקון */
    .loading-icon-glow {
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
      animation: pulse-glow 2.5s ease-in-out infinite;
    }

    @keyframes pulse-glow {

      0%,
      100% {
        transform: scale(1);
        opacity: .6;
      }

      50% {
        transform: scale(1.15);
        opacity: 1;
      }
    }

    .loading-icon-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: var(--accent);
      border-right-color: var(--accent2);
      animation: spin 1.1s linear infinite;
    }

    .loading-icon-ring2 {
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      border: 2px solid transparent;
      border-bottom-color: var(--accent2);
      border-left-color: var(--accent);
      opacity: .55;
      animation: spin 1.7s linear infinite reverse;
    }


    .loading-icon-emoji {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      animation: pulse-icon 2.4s ease-in-out infinite;
    }

    @keyframes pulse-icon {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.07);
      }
    }

    /* ── כותרת ── */
    .loading-title {
      font-size: 22px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--text) 30%, var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
      letter-spacing: -0.4px;
      text-align: center;
      transition: var(--transition);
      min-height: 32px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .loading-sub {
      font-size: 14px;
      color: var(--text2);
      height: 22px;
      min-height: 22px;
      margin-bottom: 28px;
      text-align: center;
      transition: opacity 0.25s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    /* ── מונה שיחות — צ'יפ קומפקטי ── */
    .loading-counter-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      height: 46px;
      min-height: 46px;
      visibility: hidden;
    }

    .loading-counter-wrap.visible {
      visibility: visible;
    }

    .loading-counter-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--accent-dim);
      border: 1px solid rgba(88, 166, 255, 0.22);
      border-radius: 99px;
      padding: 9px 20px 9px 16px;
      box-shadow: 0 2px 10px rgba(88, 166, 255, 0.08);
    }

    .loading-counter-chip-icon {
      font-size: 15px;
      line-height: 1;
    }

    .loading-counter {
      font-size: 20px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      transition: var(--transition);
    }

    .loading-counter-label {
      font-size: 13px;
      color: var(--text2);
      font-weight: 600;
      letter-spacing: 0.1px;
    }

    /* ── שלבים (stepper) ── */
    .loading-steps {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-bottom: 32px;
      direction: rtl;
      width: 100%;
    }

    .lstep {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      position: relative;
    }

    .lstep:not(:last-child)::before {
      content: '';
      position: absolute;
      top: 11px;
      right: calc(50% + 11px);
      left: calc(-50% + 11px);
      height: 2px;
      background: var(--border2);
      transition: background 0.5s ease;
    }

    .lstep.done:not(:last-child)::before {
      background: linear-gradient(90deg, var(--accent2), var(--accent));
    }

    .lstep-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border2);
      background: var(--bg3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 900;
      transition: all 0.35s ease;
      z-index: 1;
      color: transparent;
    }

    .lstep.active .lstep-dot {
      border-color: var(--accent);
      background: var(--accent);
      box-shadow: 0 0 0 5px var(--accent-dim);
      animation: pulse-dot 1.5s ease-in-out infinite;
    }

    .lstep.done .lstep-dot {
      border-color: var(--accent);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 2px 8px rgba(88, 166, 255, 0.4);
    }

    @keyframes pulse-dot {

      0%,
      100% {
        box-shadow: 0 0 0 5px var(--accent-dim);
      }

      50% {
        box-shadow: 0 0 0 9px transparent;
      }
    }

    .lstep-label {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      transition: all 0.3s;
      font-weight: 500;
    }

    .lstep.active .lstep-label {
      color: var(--accent);
      font-weight: 800;
    }

    .lstep.done .lstep-label {
      color: var(--text2);
      font-weight: 600;
    }

    /* ── progress bar ── */
    .progress-wrap {
      width: 100%;
      height: 12px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
      background-size: 200% 100%;
      border-radius: 99px;
      transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      animation: bar-flow 2.4s linear infinite;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(88, 166, 255, 0.45), 0 2px 6px rgba(88, 166, 255, 0.2);
    }

    .progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      right: -60%;
      width: 45%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
      animation: shimmer-streak 2.2s ease-in-out infinite;
      border-radius: 99px;
    }

    @keyframes shimmer-streak {
      0% {
        right: -50%;
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      92% {
        opacity: 1;
      }

      100% {
        right: 120%;
        opacity: 0;
      }
    }

    @keyframes bar-flow {
      0% {
        background-position: 100% 0;
      }

      100% {
        background-position: -100% 0;
      }
    }

    .progress-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 12px;
      padding: 0 2px;
    }

    .progress-pct {
      font-size: 17px;
      font-weight: 900;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
    }

    .progress-timer {
      font-size: 13px;
      font-weight: 600;
      color: var(--text3);
      font-variant-numeric: tabular-nums;
      letter-spacing: 1.2px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px 8px;
    }

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

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ══════════════════════════════════════════ DASHBOARD */
    #dashboard {
      display: none;
      animation: fadeUp 0.4s ease;
    }

    /* SECTION LABEL */
    .sec-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text2);
      margin-bottom: 14px;
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition);
    }

    .sec-label::before {
      content: '';
      width: 3px;
      height: 14px;
      border-radius: 2px;
      background: linear-gradient(to bottom, var(--accent), var(--accent2));
      flex-shrink: 0;
    }

    .sec-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to left, transparent, var(--border2));
    }

    /* ══════════════════════════════════════════ STAT CARDS */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      margin-bottom: 26px;
    }

    @media(max-width:1100px) {
      .stats-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:600px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .stat-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 20px 20px 18px;
      position: relative;
      overflow: hidden;
      transition: var(--transition), transform 0.2s, box-shadow 0.2s;
      cursor: default;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(88, 166, 255, 0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--accent-border);
    }

    .stat-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 4px;
      border-radius: 18px 18px 0 0;
    }

    .sc-blue::after {
      background: linear-gradient(90deg, var(--accent), #4493d5);
    }

    .sc-green::after {
      background: linear-gradient(90deg, var(--green), #26a641);
    }

    .sc-purple::after {
      background: linear-gradient(90deg, var(--purple), var(--accent2));
    }

    .sc-orange::after {
      background: linear-gradient(90deg, var(--orange), var(--yellow));
    }

    .sc-red::after {
      background: linear-gradient(90deg, var(--red), #ff7070);
    }

    .sc-teal::after {
      background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    }

    /* ── סקשן "ניתוח כשרות": 3 כרטיסים בשורה */
    .stats-grid.kosher-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    @media(max-width:600px) {
      .stats-grid.kosher-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── סקשן ניקוד: 4 כרטיסים בשורה (2x2 בטאבלט, 2 בנייד) */
    .stats-grid.pt-stats-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    @media(max-width:1100px) {
      .stats-grid.pt-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:600px) {
      .stats-grid.pt-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .kosher-track-chip {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 700;
      padding: 2px 8px;
      margin-right: 6px;
      border-radius: 999px;
      vertical-align: 1px;
      letter-spacing: -0.1px;
    }

    .kosher-track-rabbis {
      background: var(--green-dim);
      color: var(--green);
      border: 1px solid var(--green-border);
    }

    .kosher-track-bnei-torah {
      background: rgba(0, 210, 255, 0.12);
      color: #00b8e6;
      border: 1px solid rgba(0, 210, 255, 0.28);
    }

    [data-theme="light"] .kosher-track-bnei-torah {
      color: #0891b2;
      background: rgba(8, 145, 178, 0.09);
      border-color: rgba(8, 145, 178, 0.22);
    }

    .kosher-track-none {
      background: var(--red-dim);
      color: var(--red);
      border: 1px solid var(--red-border);
    }

    /* טקסט-משנה דהוי בשורות פירוט הכשרות — קידומת ויחידת דקות */
    .kosher-meta-dim {
      opacity: .6;
      font-size: .85em;
      font-weight: 600;
    }

    /* שורת ממוצע משך שיחה לפי הכשר — מתחת לשתי עוגות הכשרות */
    .kosher-avg-row {
      margin: -10px 0 26px;
      padding: 12px 18px;
      border-radius: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      font-size: 13px;
      color: var(--text2);
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px 18px;
    }

    .kosher-avg-row .kosher-avg-label {
      color: var(--text3);
      font-weight: 600;
      margin-inline-end: 4px;
    }

    .kosher-avg-row .kosher-avg-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .kosher-avg-row .kosher-avg-item strong {
      color: var(--text);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .kosher-avg-row .kosher-avg-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }

    .kosher-avg-row .kosher-avg-sep {
      color: var(--text3);
      opacity: .5;
    }

    .stat-icon-chip {
      position: absolute;
      top: 16px;
      left: 16px;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--bg3);
      border: 1px solid var(--border2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      box-shadow: var(--shadow);
    }

    .stat-value {
      font-size: 30px;
      font-weight: 900;
      color: var(--text);
      line-height: 1;
      letter-spacing: -0.8px;
      margin-bottom: 6px;
      margin-top: 46px;
      transition: var(--transition);
    }

    .stat-label {
      font-size: 12px;
      color: var(--text3);
      font-weight: 600;
      transition: var(--transition);
    }

    /* ══════════════════════════════════════════ CHARTS */
    .charts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 26px;
    }

    @media(max-width:860px) {
      .charts-grid {
        grid-template-columns: 1fr;
      }
    }

    .chart-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 24px 26px 22px;
      transition: var(--transition), box-shadow 0.2s;
      min-width: 0;
    }

    .chart-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--card-border);
    }

    .chart-card.full {
      grid-column: 1 / -1;
    }

    .chart-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 22px;
      gap: 12px;
    }

    .chart-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.3px;
      transition: var(--transition);
    }

    .chart-sub {
      font-size: 12px;
      color: var(--text3);
      margin-top: 3px;
      transition: var(--transition);
    }

    .chart-pill {
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
      transition: var(--transition);
    }

    .chart-container {
      position: relative;
      width: 100%;
      height: 255px;
      overflow: hidden;
    }

    /* ══════════════════════════════════════════ TOP LISTS */
    .top-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 26px;
    }

    @media(max-width:860px) {
      .top-grid {
        grid-template-columns: 1fr;
      }
    }

    .top-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      overflow: hidden;
      transition: var(--transition), box-shadow 0.2s;
    }

    .top-card:hover {
      box-shadow: var(--shadow-md);
    }

    .top-card-head {
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, var(--bg3), var(--card-bg));
    }

    .top-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .tci-blue {
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
    }

    .tci-green {
      background: var(--green-dim);
      border: 1px solid var(--green-border);
    }

    .tci-purple {
      background: var(--purple-dim);
      border: 1px solid var(--purple-border);
    }

    .top-card-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
      transition: var(--transition);
    }

    .top-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      transition: background 0.15s;
      border-bottom: 1px solid transparent;
    }

    .top-item:hover {
      background: var(--row-hover);
    }

    .chart-day-back {
      padding: 5px 12px;
      background: var(--accent-dim);
      border: 1.5px solid var(--accent-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      margin-inline-start: auto;
      white-space: nowrap;
    }

    .chart-day-back:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ── בקרת רזולוציה לגרפי "לפי יום" (יום/שבוע/חודש) + כפתור זום-החוצה ── */
    .chart-head-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .trend-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .trend-gran-group {
      display: inline-flex;
      background: var(--input-bg);
      border: 1px solid var(--border2);
      border-radius: 9px;
      padding: 2px;
      gap: 2px;
    }

    .trend-gran-btn {
      padding: 3px 9px;
      border: none;
      background: transparent;
      border-radius: 7px;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--text3);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .trend-gran-btn:hover { color: var(--text); }

    .trend-gran-btn.active {
      background: var(--accent);
      color: #fff;
    }

    .trend-back-btn {
      padding: 4px 10px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }

    .trend-back-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    .top-show-more {
      display: block;
      width: 100%;
      padding: 10px 18px;
      background: transparent;
      border: none;
      border-top: 1px solid var(--border);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s;
    }

    .top-show-more:hover {
      background: var(--accent-dim);
    }

    .top-list-items {
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
    }

    .top-rank {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      background: var(--input-bg);
      color: var(--text3);
    }

    .top-rank.rk1 {
      background: rgba(210, 153, 34, 0.2);
      color: #d29922;
    }

    .top-rank.rk2 {
      background: rgba(139, 148, 158, 0.2);
      color: var(--text2);
    }

    .top-rank.rk3 {
      background: rgba(219, 106, 40, 0.2);
      color: var(--orange);
    }

    .top-info {
      flex: 1;
      min-width: 0;
    }

    .top-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      font-family: 'Courier New', monospace;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: var(--transition);
    }

    .top-bar-track {
      height: 4px;
      background: var(--border2);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 5px;
    }

    .top-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.6s ease;
    }

    .top-count {
      font-size: 13px;
      font-weight: 900;
      color: var(--accent);
      flex-shrink: 0;
      transition: var(--transition);
    }

    /* ══════════════════════════════════════════ FILTERS */
    /* ══ FILTERS ══════════════════════════════════════════════ */
    .filters-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 0;
      margin-bottom: 16px;
      transition: var(--transition);
      overflow: visible;
      box-shadow: var(--shadow);
    }

    @media(max-width:600px) {
      .filters-card {
        top: 54px;
      }
    }

    @media(max-width:420px) {
      .filters-card {
        top: 50px;
      }
    }

    /* always-visible bar */
    .fbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      flex-wrap: wrap;
    }

    .fbar-search {
      flex: 1;
      min-width: 200px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 50px;
      padding: 0 16px;
      height: 42px;
      position: relative;
      transition: var(--transition);
    }

    .fbar-search:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      background: var(--accent-dim);
    }

    .fbar-search .ii {
      font-size: 15px;
      flex-shrink: 0;
      opacity: .55;
    }

    .fbar-search input {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      min-width: 80px;
    }

    .fbar-search input::placeholder {
      color: var(--text3);
    }

    .search-spinner {
      width: 14px;
      height: 14px;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      position: absolute;
      right: 16px;
      top: calc(50% - 7px);
      opacity: 0;
      pointer-events: none;
    }

    .fbar-search.searching .search-spinner {
      opacity: 1;
      animation: spin .7s linear infinite;
    }

    .fbar-search.searching .search-icon {
      opacity: 0;
    }

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

    @keyframes spin-centered {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* toggle button */
    .btn-fadv {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 42px;
      padding: 0 18px;
      border: 1.5px solid var(--border2);
      border-radius: 50px;
      background: var(--input-bg);
      color: var(--text2);
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
    }

    .btn-fadv:hover {
      border-color: var(--accent-border);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .filters-card.fopen .btn-fadv {
      border-color: var(--accent-border);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .fadv-arrow {
      font-size: 11px;
      transition: transform 0.25s ease;
      display: inline-block;
    }

    .filters-card.fopen .fadv-arrow {
      transform: rotate(90deg);
    }

    .fadv-badge {
      background: var(--accent);
      color: #fff;
      border-radius: 20px;
      padding: 1px 7px;
      font-size: 11px;
      font-weight: 800;
    }

    .btn-fadv.has-filters {
      border-color: var(--accent-border);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* collapsible body — grid trick for smooth animation */
    .fadv-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.28s ease;
    }

    .fadv-body-inner {
      overflow: hidden;
    }

    .filters-card.fopen .fadv-body {
      grid-template-rows: 1fr;
    }

    .fadv-content {
      padding: 12px 16px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* קיצורי תאריך מעל גריד הפילטרים */
    .date-presets {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .date-presets-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      margin-inline-end: 4px;
    }

    .date-preset-chip {
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text2);
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      font-family: inherit;
    }

    .date-preset-chip:hover {
      background: var(--accent-dim);
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .date-preset-chip.active {
      background: var(--accent-dim);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 700;
    }

    .date-preset-chip-reset {
      margin-inline-start: auto;
      opacity: .75;
    }

    /* פריט מוביל — מסגרת לחיצה */
    .top-item-clickable {
      cursor: pointer;
    }

    .top-item-clickable:hover .top-filter-icon {
      opacity: 1;
      transform: translateX(0);
    }

    .top-filter-icon {
      font-size: 14px;
      opacity: 0;
      transform: translateX(4px);
      transition: opacity .15s, transform .15s;
      color: var(--accent);
      pointer-events: none;
    }

    @media(max-width:600px) {
      .date-presets {
        gap: 4px;
      }
      .date-preset-chip {
        padding: 4px 9px;
        font-size: 11.5px;
      }
      .date-presets-label {
        flex-basis: 100%;
        margin-bottom: 2px;
      }
    }


    /* ── FILTER CHIPS — פילטרים פעילים כ-tags ── */
    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 18px 14px;
    }

    .filter-chips:empty {
      display: none;
    }

    .fchip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 20px;
      padding: 4px 6px 4px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      animation: fadeIn 0.18s ease;
    }

    .fchip-x {
      width: 17px;
      height: 17px;
      border: none;
      background: rgba(88, 166, 255, 0.18);
      color: var(--accent);
      border-radius: 50%;
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }

    .fchip-x:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ── HIGHLIGHT — הדגשת מונח החיפוש ── */
    mark.hl {
      background: rgba(250, 204, 21, 0.42);
      color: inherit;
      border-radius: 2px;
      padding: 0 1px;
      font-weight: inherit;
    }

    html[data-theme="light"] mark.hl {
      background: rgba(250, 204, 21, 0.55);
    }

    .filter-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 0 18px;
      height: 42px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: var(--transition);
      font-family: inherit;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-ghost {
      background: var(--input-bg);
      color: var(--text2);
      border: 1.5px solid var(--border2);
    }

    .btn-ghost:hover {
      background: var(--accent-dim);
      color: var(--accent);
      border-color: var(--accent-border);
    }

    /* ── Export dropdown ── */
    .export-dropdown {
      position: relative;
    }

    .export-split {
      display: flex;
      align-items: stretch;
      border: 1.5px solid var(--green-border);
      border-radius: 10px;
      overflow: hidden;
      transition: var(--transition);
    }

    .export-split:has(button:hover),
    .export-split:focus-within {
      border-color: var(--green);
    }

    .export-main-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      height: 36px;
      background: var(--green-dim);
      color: var(--green);
      border: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
    }

    .export-main-btn:hover {
      background: var(--green);
      color: #fff;
    }

    .export-arrow-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      background: var(--green-dim);
      color: var(--green);
      border: none;
      border-right: 1px solid var(--green-border);
      cursor: pointer;
      font-size: 11px;
      transition: var(--transition);
    }

    .export-arrow-btn:hover {
      background: var(--green);
      color: #fff;
      border-color: var(--green);
    }

    .export-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: auto;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 10px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
      min-width: 160px;
      z-index: 9999;
      overflow: hidden;
      animation: fadeIn .12s ease;
    }

    .export-menu.open {
      display: block;
    }

    .export-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      color: var(--text);
      background: none;
      border: none;
      width: 100%;
      text-align: right;
      transition: background .12s;
    }

    .export-menu-item:hover {
      background: var(--accent-dim);
      color: var(--accent);
    }

    .export-menu-icon {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .export-menu-icon.xlsx {
      background: rgba(63, 185, 80, .14);
    }

    .export-menu-icon.csv {
      background: rgba(88, 166, 255, .12);
    }

    .export-menu-icon.txt {
      background: rgba(210, 153, 34, .13);
    }

    .export-menu-label {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .export-menu-ext {
      font-size: 11px;
      color: var(--text3);
      font-weight: 700;
    }

    .export-menu-sub {
      font-size: 10.5px;
      color: var(--text3);
      font-weight: 400;
    }

    /* מצב מסונן — כפתור הייצוא מקבל גוון accent */
    .export-filtered .export-split {
      border-color: var(--accent) !important;
    }

    .export-filtered .export-main-btn {
      background: var(--accent-dim);
      color: var(--accent);
    }

    .export-filtered .export-arrow-btn {
      background: var(--accent-dim);
      color: var(--accent);
      border-color: var(--accent-dim);
    }

    .export-filtered .export-main-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    .export-filtered .export-arrow-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .export-filtered .export-menu-sub {
      color: var(--accent);
      font-weight: 600;
    }

    /* badge מספר שורות בכפתור */
    .export-count-badge {
      display: none;
      background: var(--accent);
      color: #fff;
      border-radius: 100px;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 7px;
      margin-right: 2px;
      letter-spacing: 0;
    }

    .export-count-badge.visible {
      display: inline-flex;
      align-items: center;
    }

    /* ── שיחות גולשות מחודש קודם ── */
    .overflow-notice {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      background: rgba(255, 193, 7, 0.09);
      border: 1px solid rgba(255, 193, 7, 0.28);
      border-radius: 10px;
      font-size: 12.5px;
      color: var(--text2);
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .overflow-notice-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    .overflow-notice strong {
      color: #b87a00;
    }

    html[data-theme="dark"] .overflow-notice strong {
      color: #ffc107;
    }

    .overflow-notice .btn-link {
      margin-right: auto;
      background: none;
      border: none;
      color: var(--accent);
      font-size: 12px;
      cursor: pointer;
      font-family: inherit;
      text-decoration: underline;
      padding: 0;
    }

    /* שורת טבלה גולשת */
    .overflow-row>td {
      background: rgba(255, 193, 7, 0.07) !important;
    }

    html[data-theme="dark"] .overflow-row>td {
      background: rgba(255, 193, 7, 0.05) !important;
    }

    .overflow-badge {
      display: inline-block;
      background: rgba(255, 193, 7, 0.22);
      color: #8a6000;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      margin-right: 5px;
      vertical-align: middle;
      white-space: nowrap;
      line-height: 1.6;
    }

    html[data-theme="dark"] .overflow-badge {
      color: #ffc107;
      background: rgba(255, 193, 7, 0.15);
    }

    /* checkbox סגנון בפילטרים */
    .overflow-toggle-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 8px;
      background: rgba(255, 193, 7, 0.07);
      border: 1px solid rgba(255, 193, 7, 0.22);
      cursor: pointer;
      font-size: 12.5px;
      color: var(--text2);
      user-select: none;
      transition: background .15s;
    }

    .overflow-toggle-wrap:hover {
      background: rgba(255, 193, 7, 0.14);
    }

    .overflow-toggle-wrap input {
      cursor: pointer;
      accent-color: #e6a817;
    }

    .filters-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 12px;
      align-items: end;
    }

    .fg label {
      display: block;
      font-size: 10px;
      font-weight: 800;
      color: var(--text3);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .07em;
      transition: var(--transition);
    }

    .fg .iw {
      position: relative;
    }

    .fg .iw .ii {
      position: absolute;
      right: 11px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
    }

    .fg input,
    .fg select {
      width: 100%;
      padding: 9px 34px 9px 10px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 13px;
      color: var(--text);
      outline: none;
      transition: var(--transition);
      font-family: inherit;
      direction: rtl;
    }

    .fg input::placeholder {
      color: var(--text3);
    }

    .fg input:focus,
    .fg select:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .fg select option {
      background: var(--card-bg);
      color: var(--text);
    }

    /* ══════════════════════════════════════════ TABLE */
    .table-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      overflow: hidden;
      transition: var(--transition);
      box-shadow: var(--shadow);
    }

    .table-head {
      padding: 16px 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      background: linear-gradient(135deg, var(--bg3), var(--card-bg));
    }

    .table-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      transition: var(--transition);
    }

    .table-badge {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      transition: var(--transition);
    }

    /* טוגל תצוגת שיחות/פעולות בכותרת טבלת דוח שיחות */
    .calls-view-toggle {
      margin-inline-start: auto;
      display: inline-flex;
      background: var(--input-bg);
      border: 1px solid var(--border2);
      border-radius: 9px;
      padding: 2px;
      gap: 2px;
      flex-shrink: 0;
    }

    .calls-view-toggle .cv-btn {
      padding: 4px 12px;
      border: none;
      background: transparent;
      border-radius: 7px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--text3);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .calls-view-toggle .cv-btn:hover { color: var(--text); }

    .calls-view-toggle .cv-btn.active {
      background: var(--accent);
      color: #fff;
    }

    /* תג מספר הכניסות בשורת שיחה */
    .badge-hops {
      display: inline-block;
      min-width: 22px;
      padding: 2px 7px;
      background: var(--purple-dim);
      border: 1px solid var(--purple-border);
      color: var(--purple);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .tbl-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-height: calc(100vh - 230px);
      position: relative;
    }

    .tbl-wrap.filtering::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg3);
      opacity: .55;
      border-radius: 6px;
      z-index: 5;
    }

    .tbl-wrap.filtering::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 32px;
      height: 32px;
      border: 3px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin-centered .7s linear infinite;
      z-index: 6;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    thead {
      background: var(--thead-bg);
      transition: var(--transition);
    }

    /* כותרת טבלה דביקה בראש הגלילה הפנימית */
    thead th {
      position: sticky;
      top: 0;
      background: var(--thead-bg);
      z-index: 10;
      box-shadow: 0 1px 0 var(--border);
    }

    th {
      padding: 11px 14px;
      text-align: right;
      font-weight: 700;
      color: var(--text3);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .07em;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: var(--transition);
    }

    th:hover {
      color: var(--accent);
    }

    th.sorted {
      color: var(--accent);
    }

    th .si {
      opacity: .35;
      font-size: 10px;
      margin-right: 2px;
    }

    th.sorted .si {
      opacity: 1;
    }

    td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      vertical-align: middle;
      transition: var(--transition);
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover td {
      background: var(--row-hover);
    }

    tr:nth-child(even) td {
      background: var(--row-even);
    }

    tr:nth-child(even):hover td {
      background: var(--row-hover);
    }

    /* ── שורות לחיצות ── */
    tr.data-row {
      cursor: pointer;
    }

    tr.data-row.expanded td {
      background: var(--accent-dim);
      border-bottom: none;
    }

    .row-expand-icon {
      opacity: 0;
      font-size: 10px;
      color: var(--text3);
      transition: opacity 0.15s, transform 0.22s;
      display: inline-block;
      margin-right: 3px;
    }

    tr.data-row:hover .row-expand-icon {
      opacity: 0.45;
    }

    tr.data-row.expanded .row-expand-icon {
      opacity: 1;
      color: var(--accent);
      transform: rotate(90deg);
    }

    /* ── drawer פרטי שיחה ── */
    .row-detail-tr td {
      padding: 0;
      border-bottom: 2px solid var(--accent-border);
    }

    .rd-panel {
      padding: 18px 24px 22px;
      background: linear-gradient(160deg, var(--accent-dim) 0%, var(--card-bg) 65%);
      animation: fadeDown 0.22s ease;
    }

    @keyframes fadeDown {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .rd-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .rd-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .rd-close {
      width: 24px;
      height: 24px;
      border: none;
      background: var(--border2);
      color: var(--text3);
      border-radius: 50%;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.15s, color 0.15s;
    }

    .rd-close:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    .rd-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 12px 20px;
    }

    .rd-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .rd-key {
      font-size: 10px;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .rd-val {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      word-break: break-all;
    }

    .rd-val.mono {
      font-family: 'Courier New', monospace;
      color: var(--accent);
      font-size: 12px;
    }

    /* ══════════════════════════════════════════════════════════
       CALL JOURNEY MODAL — מהלך שיחה
    ══════════════════════════════════════════════════════════ */

    .cj-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
      animation: fadeIn .18s ease;
    }

    .cj-overlay.open {
      display: flex;
    }

    .cj-modal {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      width: 100%;
      max-width: 720px;
      height: 85vh;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
      animation: cjSlideIn .22s cubic-bezier(.34, 1.4, .64, 1);
      overflow: hidden;
    }

    @keyframes cjSlideIn {
      from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ── Header ── */
    .cj-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, var(--accent-dim), var(--card-bg));
      flex-shrink: 0;
    }

    .cj-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cj-header-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--accent-dim), rgba(88, 166, 255, .2));
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
    }

    .cj-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.3px;
    }

    .cj-subtitle {
      font-size: 11.5px;
      color: var(--text3);
      font-weight: 500;
      margin-top: 2px;
      min-height: 16px;
    }

    /* ── header right: nav + close ── */
    .cj-header-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .cj-nav {
      display: flex;
      align-items: center;
      gap: 0;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 12px;
      padding: 3px;
      overflow: hidden;
      direction: ltr;
    }

    .cj-nav-sep {
      width: 1px;
      height: 18px;
      background: var(--border2);
      flex-shrink: 0;
    }

    .cj-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
      line-height: 1;
    }

    .cj-nav-btn:hover:not(:disabled) {
      background: var(--accent-dim);
      color: var(--accent);
    }

    .cj-nav-btn:active:not(:disabled) {
      background: rgba(88, 166, 255, .22);
    }

    .cj-nav-btn:disabled {
      opacity: 0.25;
      cursor: default;
    }

    .cj-nav-counter {
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      min-width: 42px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.3px;
      padding: 0 2px;
    }

    .cj-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border2);
      background: var(--input-bg);
      color: var(--text3);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .cj-close-btn:hover {
      background: var(--red-dim);
      color: var(--red);
      border-color: var(--red);
    }

    /* ── Summary bar ── */
    .cj-summary {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .cj-sum-item {
      flex: 1;
      min-width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      gap: 3px;
      border-left: 1px solid var(--border);
      text-align: center;
    }

    .cj-sum-item:last-child {
      border-left: none;
    }

    .cj-sum-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .cj-sum-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .cj-sum-val.mono {
      font-family: 'Courier New', monospace;
      font-size: 13px;
      color: var(--accent);
      direction: ltr;
    }

    /* ── Body ── */
    .cj-body {
      overflow-y: auto;
      flex: 1;
      padding: 22px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      transition: opacity 0.15s ease;
    }

    .cj-body.cj-fading {
      opacity: 0;
    }


    /* ── Timeline ── */
    .cj-tl-title {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 14px;
    }

    .cj-timeline {
      display: flex;
      flex-direction: column;
    }

    .cj-tl-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      position: relative;
    }

    .cj-tl-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 32px;
    }

    .cj-tl-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-dim);
      border: 2px solid var(--accent);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      z-index: 1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .cj-tl-dot.first {
      background: linear-gradient(135deg, var(--accent), #8ec5ff);
      border-color: var(--accent);
      color: #fff;
    }

    .cj-tl-dot.last {
      background: linear-gradient(135deg, var(--green), #6fd97e);
      border-color: var(--green);
      color: #fff;
    }

    .cj-tl-line {
      width: 2px;
      flex: 1;
      min-height: 18px;
      background: linear-gradient(to bottom, var(--accent-border), var(--border));
      margin: 3px 0;
    }

    .cj-tl-content {
      flex: 1;
      padding-bottom: 14px;
    }

    .cj-tl-step:last-child .cj-tl-content {
      padding-bottom: 0;
    }

    .cj-tl-card {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 11px 13px;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .cj-tl-card:hover {
      border-color: var(--accent-border);
      box-shadow: 0 5px 16px rgba(0, 0, 0, 0.13);
      transform: translateY(-1px);
    }

    .cj-tl-folder {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }

    .cj-tl-folder-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cj-tl-badge {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .03em;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .cj-tl-badge.start {
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
    }

    .cj-tl-badge.end {
      color: var(--green);
      background: var(--green-dim);
      border: 1px solid var(--green-border);
    }

    .cj-tl-path {
      font-size: 12px;
      color: var(--text3);
      margin-top: 3px;
    }

    .cj-tl-meta {
      display: flex;
      gap: 8px;
      margin-top: 9px;
      flex-wrap: wrap;
    }

    .cj-tl-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
    }

    .cj-tl-tag.dur {
      border-color: var(--accent-border);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .cj-tl-tag.time {
      font-family: 'Courier New', monospace;
      font-size: 11px;
      letter-spacing: -.02em;
    }

    .cj-table-wrap {
      overflow-x: auto;
      border-radius: 10px;
      border: 1px solid var(--border);
    }

    .cj-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .cj-table th {
      background: var(--bg3);
      color: var(--text3);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 8px 12px;
      text-align: right;
      white-space: nowrap;
      border-bottom: 1px solid var(--border);
    }

    .cj-table td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      color: var(--text2);
      white-space: nowrap;
    }

    .cj-table tr:last-child td {
      border-bottom: none;
    }

    .cj-table tr:hover td {
      background: var(--accent-dim);
    }

    /* ── Responsive ── */
    @media(max-width:600px) {
      .cj-modal {
        border-radius: 16px;
        max-height: 95vh;
      }

      .cj-header {
        padding: 16px 18px 14px;
      }

      .cj-header-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .cj-title {
        font-size: 14px;
      }

      .cj-body {
        padding: 16px 16px 18px;
        gap: 16px;
      }

      .cj-sum-item {
        padding: 10px 10px;
      }

      .cj-sum-val {
        font-size: 13px;
      }
    }

    /* ── כפתור "מהלך שיחה" בתוך ה-drawer ── */
    .rd-journey-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding: 7px 14px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: var(--transition);
    }

    .rd-journey-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    /* ── כפתורי ייצוא ── */

    .nc {
      color: var(--text3);
      font-size: 11px;
      width: 36px;
    }

    .dc {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .tc {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--text2);
    }

    .pc {
      font-size: 11px;
      color: var(--text3);
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .badge-phone {
      display: inline-flex;
      align-items: center;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      font-family: 'Courier New', monospace;
      transition: var(--transition);
      direction: ltr;
      unicode-bidi: embed;
    }

    .badge-did {
      display: inline-flex;
      align-items: center;
      background: var(--green-dim);
      border: 1px solid var(--green-border);
      color: var(--green);
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      font-family: 'Courier New', monospace;
      transition: var(--transition);
      direction: ltr;
      unicode-bidi: embed;
    }

    .badge-folder {
      display: inline-flex;
      align-items: center;
      background: var(--purple-dim);
      border: 1px solid var(--purple-border);
      color: var(--purple);
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      max-width: 145px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: var(--transition);
    }

    .dur-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 100px;
    }

    .dur-track {
      flex: 1;
      height: 4px;
      background: var(--border2);
      border-radius: 2px;
      overflow: hidden;
      max-width: 55px;
    }

    .dur-fill {
      height: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--green), #26a641);
    }

    .dur-text {
      font-size: 12px;
      color: var(--text2);
      white-space: nowrap;
      font-weight: 700;
    }

    /* Pagination */
    .pagination {
      padding: 14px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 10px;
      background: linear-gradient(135deg, var(--bg3), var(--card-bg));
      transition: var(--transition);
    }

    .pag-info {
      font-size: 13px;
      color: var(--text3);
    }

    .pag-btns {
      display: flex;
      gap: 5px;
    }

    .pg-btn {
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      background: transparent;
      color: var(--text2);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }

    .pg-btn:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .pg-btn.active {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
    }

    html[data-theme="light"] .pg-btn.active {
      color: #fff;
    }

    .pg-btn:disabled {
      opacity: .25;
      cursor: not-allowed;
    }

    /* Empty state */
    .empty-st {
      text-align: center;
      padding: 70px 20px;
      color: var(--text3);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .empty-st .ei {
      font-size: 52px;
      opacity: .3;
      display: block;
      animation: float-badge 4s ease-in-out infinite;
      margin-bottom: 6px;
    }

    .empty-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text2);
    }

    .empty-sub {
      font-size: 13px;
      color: var(--text3);
      max-width: 340px;
      line-height: 1.6;
    }

    .empty-clear-btn {
      margin-top: 6px;
      padding: 8px 20px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 20px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: var(--transition);
    }

    .empty-clear-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    /* כפתור X לניקוי חיפוש */
    .search-clear {
      width: 18px;
      height: 18px;
      border: none;
      background: var(--border2);
      color: var(--text3);
      border-radius: 50%;
      font-size: 10px;
      line-height: 1;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
      padding: 0;
    }

    .search-clear:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    .fbar-search.has-value .search-clear {
      display: flex;
    }

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 32px;
      left: 28px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      font-size: 20px;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(88, 166, 255, 0.38);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(14px) scale(0.9);
      transition: opacity 0.28s, transform 0.28s;
      z-index: 150;
      pointer-events: none;
    }

    .back-to-top.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .back-to-top:hover {
      transform: translateY(-3px) scale(1.06);
      box-shadow: 0 8px 24px rgba(88, 166, 255, 0.48);
    }

    /* Toast */
    /* ══════════════════════════════════════════ TIP BUTTON */
    .tip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid currentColor;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      background: transparent;
      color: var(--text3);
      opacity: 0.55;
      transition: var(--transition);
      vertical-align: middle;
      margin-inline-start: 5px;
      flex-shrink: 0;
      user-select: none;
    }

    .tip-btn:hover,
    .tip-btn:focus {
      opacity: 1;
      color: var(--accent);
      border-color: var(--accent);
      outline: none;
    }

    th .tip-btn {
      font-size: 9px;
      width: 14px;
      height: 14px;
      margin-inline-start: 4px;
    }

    /* ══════════════════════════════════════════ FLOATING TOOLTIP */
    #floatTip {
      position: fixed;
      z-index: 400;
      width: 270px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
      padding: 14px 16px 13px;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.94) translateY(4px);
      transform-origin: top right;
      transition: opacity 0.16s ease, transform 0.16s ease;
      direction: rtl;
      text-align: right;
    }

    #floatTip.ft-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    #floatTip .ft-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: var(--transition);
    }

    #floatTip .ft-title::before {
      content: 'ℹ';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      font-size: 11px;
      flex-shrink: 0;
    }

    #floatTip .ft-body {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.65;
      transition: var(--transition);
    }

    .toast {
      position: fixed;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: var(--card-bg);
      border: 1px solid var(--border2);
      color: var(--text);
      padding: 11px 22px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      z-index: 9999;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), var(--transition);
      backdrop-filter: blur(20px);
      white-space: nowrap;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
    }

    @media(max-width:600px) {
      .main {
        padding: 14px 12px 40px;
      }

      .header {
        padding: 0 14px;
      }

      .header-title {
        font-size: 14px;
      }
    }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — Tablet & Mobile
    ══════════════════════════════════════════════════════════ */

    /* ── 960px: Tablet landscape / Small desktop ── */
    @media(max-width:960px) {
      .main {
        padding: 20px 16px 60px;
      }

      .sec-label {
        font-size: 10px;
        margin-bottom: 10px;
      }

      .stat-card {
        padding: 16px 16px 14px;
      }

      .filters-grid {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      }
    }

    /* ── 768px: Tablet portrait ── */
    @media(max-width:768px) {
      .header {
        padding: 0 18px;
        height: 58px;
        gap: 10px;
      }

      .header-logo {
        width: 36px;
        height: 36px;
        font-size: 17px;
      }

      .header-sub {
        display: none;
      }

      .header-brand-sep {
        display: none;
      }

      .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .stat-card {
        padding: 14px 14px 12px;
        border-radius: 14px;
      }

      .stat-value {
        font-size: 24px;
      }

      .chart-container {
        height: 210px;
      }

      .chart-card {
        padding: 18px 18px 16px;
      }

      /* טבלה: הסתר שעת יציאה (4) + תאריך עברי (9) */
      .tbl-wrap th:nth-child(4),
      .tbl-wrap td:nth-child(4),
      .tbl-wrap th:nth-child(9),
      .tbl-wrap td:nth-child(9) {
        display: none;
      }

      .filters-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      }

      .top-card-head {
        padding: 14px 16px 12px;
      }
    }

    /* ── 600px: Mobile ── */
    @media(max-width:600px) {

      /* Header */
      .header {
        padding: 0 12px;
        height: 54px;
        gap: 6px;
      }

      .header-brand {
        display: none;
      }

      .header-info-chip {
        max-width: calc(100vw - 130px);
        font-size: 12px;
      }

      .chip-count { display: none; }
      .chip-label-full { display: none; }
      .chip-label-short { display: inline; }

      .header-actions {
        gap: 4px;
      }

      .hbtn {
        height: 32px;
        padding: 0 9px;
        font-size: 12px;
        border-radius: 8px;
      }

      .hbtn .btn-text {
        display: none;
      }

      /* icon בלבד בנייד */
      .hbtn-icon {
        width: 32px;
        padding: 0;
      }

      /* Main */
      .main {
        padding: 12px 10px 56px;
      }

      .sec-label {
        font-size: 9.5px;
        margin-bottom: 8px;
        margin-top: 20px;
      }

      /* Filter bar */
      .fbar {
        padding: 10px 12px;
        gap: 7px;
      }

      .fbar-search {
        flex: 1 1 100%;
        height: 40px;
      }

      /* שורה שלמה */
      .btn-fadv,
      .btn.btn-ghost {
        height: 36px;
        font-size: 12px;
        padding: 0 10px;
      }

      .export-split {
        height: 36px;
      }

      .export-main-btn {
        height: 36px;
        font-size: 12px;
        padding: 0 10px;
      }

      .export-arrow-btn {
        width: 26px;
      }

      .filter-chips {
        padding: 0 12px 8px;
        gap: 6px;
      }

      /* Stats */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .stat-card {
        padding: 12px 12px 10px;
        border-radius: 12px;
      }

      .stat-value {
        font-size: 20px;
      }

      .stat-label {
        font-size: 11px;
      }

      .stat-icon-chip {
        width: 28px;
        height: 28px;
        font-size: 13px;
        border-radius: 7px;
        margin-bottom: 8px;
      }

      .stat-card:hover {
        transform: none;
      }

      /* ביטול hover-transform בנייד (לא רלוונטי) */

      /* Charts */
      .chart-container {
        height: 180px;
      }

      .chart-card {
        padding: 14px 14px 12px;
        border-radius: 12px;
      }

      .chart-title {
        font-size: 13px;
      }

      /* Top lists */
      .top-card {
        border-radius: 12px;
      }

      .top-card-head {
        padding: 12px 14px 10px;
      }

      /* Table */
      .table-card {
        border-radius: 12px;
      }

      .table-head {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 6px;
      }

      .table-title {
        font-size: 13px;
      }

      .tbl-wrap table {
        font-size: 12px;
      }

      .tbl-wrap th,
      .tbl-wrap td {
        padding: 8px 10px;
      }

      /* הסתר: שעת יציאה (4), מחוייג (7), תאריך עברי (9), תיאור שלוחה (10) */
      .tbl-wrap th:nth-child(4),
      .tbl-wrap td:nth-child(4),
      .tbl-wrap th:nth-child(7),
      .tbl-wrap td:nth-child(7),
      .tbl-wrap th:nth-child(9),
      .tbl-wrap td:nth-child(9),
      .tbl-wrap th:nth-child(10),
      .tbl-wrap td:nth-child(10) {
        display: none;
      }

      /* Pagination */
      .pagination {
        padding: 10px 12px;
      }

      .pag-info {
        font-size: 11.5px;
      }

      .pg-btn {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 7px;
      }

      /* Overflow notice */
      .overflow-notice {
        padding: 7px 12px;
        font-size: 11.5px;
        border-radius: 8px;
      }

      /* Minutes */
      .min-card-header {
        padding: 12px 14px;
      }

      .min-hdr-title {
        font-size: 13px;
      }

      .min-card-body {
        padding: 14px 14px 16px;
      }

      .min-total-num {
        font-size: 26px;
      }

    }

    /* ── 420px: Small mobile ── */
    @media(max-width:420px) {
      .header {
        height: 50px;
      }

      .header-info-chip {
        max-width: calc(100vw - 110px);
      }

      .stats-grid {
        gap: 6px;
      }

      .stat-card {
        padding: 10px 10px 8px;
        border-radius: 10px;
      }

      .stat-value {
        font-size: 18px;
      }

      /* Chart אפילו קומפקטי יותר */
      .chart-container {
        height: 160px;
      }

      /* טבלה: הצג רק # + תאריך + משך + מחייג (4 עמודות) */
      .tbl-wrap th:nth-child(3),
      .tbl-wrap td:nth-child(3),
      /* שעת כניסה */
      .tbl-wrap th:nth-child(4),
      .tbl-wrap td:nth-child(4),
      /* שעת יציאה */
      .tbl-wrap th:nth-child(7),
      .tbl-wrap td:nth-child(7),
      /* מחוייג */
      .tbl-wrap th:nth-child(8),
      .tbl-wrap td:nth-child(8),
      /* שלוחה */
      .tbl-wrap th:nth-child(9),
      .tbl-wrap td:nth-child(9),
      /* תאריך עברי */
      .tbl-wrap th:nth-child(10),
      .tbl-wrap td:nth-child(10)

      /* תיאור שלוחה */
        {
        display: none;
      }

      .fbar {
        padding: 8px 10px;
      }

      .main {
        padding: 10px 8px 56px;
      }
    }

    /* ── דקות נכנסות ── */
    .minutes-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 26px;
      box-shadow: var(--shadow);
      transition: var(--transition), box-shadow 0.2s;
    }

    .minutes-card:hover { box-shadow: var(--shadow-md); }

    .min-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 22px 24px 0;
    }

    .min-hdr-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .min-hdr-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      flex-shrink: 0;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .min-hdr-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .min-hdr-sub {
      font-size: 12px;
      color: var(--text3);
      margin-top: 2px;
    }

    .min-hdr-note {
      font-size: 10.5px;
      color: var(--text3);
      opacity: 0.6;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .min-card-body {
      padding: 18px 24px 22px;
    }

    /* פריסת סטטיסטיקות: סה"כ בולט + 3 פירוטים */
    .min-stats-layout {
      display: flex;
      gap: 14px;
      align-items: stretch;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .min-total-panel {
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 12px;
      padding: 16px 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 130px;
      text-align: center;
      flex-shrink: 0;
    }

    .min-total-num {
      font-size: 32px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 5px;
    }

    .min-total-lbl {
      font-size: 12px;
      color: var(--text3);
    }

    .min-breakdown {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
    }

    .min-item {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .min-item-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .min-item-icon.icn-blue {
      background: rgba(88, 166, 255, .14);
    }

    .min-item-icon.icn-green {
      background: rgba(63, 185, 80, .14);
    }

    .min-item-icon.icn-orange {
      background: rgba(247, 144, 9, .14);
    }

    .min-item-val {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }

    .min-item-lbl {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px;
    }

    .min-chart-wrap {
      height: 240px;
      position: relative;
    }


    .min-drill-back {
      display: flex;
      margin-bottom: 8px;
    }

    .min-drill-back button {
      padding: 6px 14px;
      background: var(--accent-dim);
      border: 1.5px solid var(--accent-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .min-drill-back button:hover {
      background: var(--accent);
      color: #fff;
    }

    .min-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 30px 20px;
      color: var(--text3);
      font-size: 14px;
    }

    .min-loading-spinner {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    .min-error {
      padding: 12px 16px;
      border-radius: 10px;
      background: rgba(248, 81, 73, .08);
      color: var(--red);
      font-size: 13px;
    }

    /* ══ ADVANCED EXPORT MODAL ══ */
    .adv-export-overlay {
      position: fixed;
      inset: 0;
      z-index: 2100;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
    }

    .adv-export-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .adv-export-modal {
      background: var(--card-bg);
      border: 1px solid var(--border2);
      border-radius: 22px;
      width: 550px;
      max-width: calc(100vw - 32px);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
      overflow: hidden;
      transform: scale(0.94) translateY(16px);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .adv-export-overlay.open .adv-export-modal {
      transform: scale(1) translateY(0);
    }

    .adv-export-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 24px 18px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(88, 166, 255, .07) 0%, transparent 60%);
      flex-shrink: 0;
    }

    .adv-export-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .adv-export-header-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(88, 166, 255, .18), rgba(124, 58, 237, .15));
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      box-shadow: 0 2px 8px rgba(88, 166, 255, .15);
    }

    .adv-export-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px;
    }

    .adv-export-subtitle {
      font-size: 12px;
      color: var(--text3);
      font-weight: 500;
      margin-top: 3px;
    }

    .adv-export-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border2);
      background: var(--input-bg);
      color: var(--text2);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }

    .adv-export-close:hover {
      background: rgba(248, 81, 73, .12);
      color: var(--red);
      border-color: var(--red);
    }

    .adv-export-body {
      padding: 16px 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 11px;
      overflow-y: auto;
    }

    .adv-export-filter-banner {
      padding: 10px 13px;
      border-radius: 11px;
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.45;
      color: var(--text2);
      background: var(--bg2);
      border: 1px solid var(--border);
    }

    .adv-export-filter-banner strong {
      color: var(--text);
      font-weight: 800;
    }

    .adv-export-filter-banner.is-filtered {
      color: var(--accent);
      background: rgba(88, 166, 255, .09);
      border-color: var(--accent-border);
    }

    .adv-export-filter-banner.is-filtered strong {
      color: var(--accent);
    }

    .adv-export-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px 17px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 16px;
      transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
      cursor: default;
    }

    .adv-export-card:hover {
      background: rgba(88, 166, 255, .05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
      transform: translateY(-1px);
    }

    .adv-export-card[data-color="green"]:hover {
      border-color: rgba(63, 185, 80, .45);
      background: rgba(63, 185, 80, .05);
    }

    .adv-export-card[data-color="purple"]:hover {
      border-color: rgba(188, 140, 255, .45);
      background: rgba(188, 140, 255, .05);
    }

    .adv-export-card[data-color="amber"]:hover {
      border-color: rgba(210, 153, 34, .45);
      background: rgba(210, 153, 34, .05);
    }

    .adv-export-card[data-color="gold"]:hover {
      border-color: rgba(219, 109, 40, .45);
      background: rgba(219, 109, 40, .05);
    }

    .adv-export-card[data-color="blue"]:hover {
      border-color: rgba(88, 166, 255, .45);
      background: rgba(88, 166, 255, .05);
    }

    .adv-export-card[data-color="red"]:hover {
      border-color: rgba(248, 81, 73, .45);
      background: rgba(248, 81, 73, .05);
    }

    .adv-export-card-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      border: 1px solid transparent;
      transition: transform 0.2s;
    }

    .adv-export-card:hover .adv-export-card-icon {
      transform: scale(1.08);
    }

    .adv-export-card[data-color="green"] .adv-export-card-icon {
      background: rgba(63, 185, 80, .13);
      border-color: rgba(63, 185, 80, .25);
    }

    .adv-export-card[data-color="purple"] .adv-export-card-icon {
      background: rgba(188, 140, 255, .13);
      border-color: rgba(188, 140, 255, .25);
    }

    .adv-export-card[data-color="amber"] .adv-export-card-icon {
      background: rgba(210, 153, 34, .13);
      border-color: rgba(210, 153, 34, .25);
    }

    .adv-export-card[data-color="gold"] .adv-export-card-icon {
      background: rgba(219, 109, 40, .13);
      border-color: rgba(219, 109, 40, .25);
    }

    .adv-export-card[data-color="blue"] .adv-export-card-icon {
      background: rgba(88, 166, 255, .13);
      border-color: rgba(88, 166, 255, .25);
    }

    .adv-export-card[data-color="red"] .adv-export-card-icon {
      background: rgba(248, 81, 73, .13);
      border-color: rgba(248, 81, 73, .25);
    }

    .adv-export-card-content {
      flex: 1;
      min-width: 0;
    }

    .adv-export-card-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
    }

    .adv-export-card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    .adv-export-card-desc {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.55;
    }

    .adv-export-ext-badge {
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .6px;
      padding: 2px 7px;
      border-radius: 20px;
      border: 1px solid currentColor;
      flex-shrink: 0;
    }

    .adv-export-ext-badge.txt {
      color: #5cb84a;
      background: rgba(92, 184, 74, .1);
    }

    .adv-export-ext-badge.xlsx {
      color: var(--accent);
      background: var(--accent-dim);
    }

    .adv-export-btn {
      height: 34px;
      padding: 0 16px;
      border-radius: 9px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
      box-shadow: 0 2px 8px rgba(88, 166, 255, .25);
    }

    .adv-export-btn:hover {
      background: var(--accent2);
      box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
    }

    .adv-export-btn:active {
      transform: scale(0.96);
    }

    /* ══ MFA MODAL ══ */
    .mfa-overlay {
      position: fixed;
      inset: 0;
      z-index: 2300;
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
    }

    .mfa-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .mfa-modal {
      background: var(--card-bg);
      border: 1px solid var(--border2);
      border-radius: 22px;
      width: 460px;
      max-width: calc(100vw - 32px);
      box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
      overflow: hidden;
      transform: scale(0.94) translateY(16px);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mfa-overlay.open .mfa-modal {
      transform: scale(1) translateY(0);
    }

    .mfa-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px 24px 18px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(124, 58, 237, .1) 0%, transparent 60%);
    }

    .mfa-header-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(88, 166, 255, .15));
      border: 1px solid rgba(124, 58, 237, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
    }

    .mfa-header-text {
      flex: 1;
    }

    .mfa-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
    }

    .mfa-subtitle {
      font-size: 12px;
      color: var(--text3);
      margin-top: 3px;
    }

    .mfa-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1px solid var(--border2);
      background: var(--input-bg);
      color: var(--text2);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }

    .mfa-close:hover {
      background: rgba(248, 81, 73, .12);
      color: var(--red);
      border-color: var(--red);
    }

    .mfa-body {
      padding: 18px 20px 22px;
    }

    .mfa-methods-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .mfa-method-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 13px 15px;
      display: flex;
      align-items: center;
      gap: 13px;
      transition: border-color 0.15s, background 0.15s;
    }

    .mfa-method-card:hover {
      border-color: var(--accent-border);
      background: rgba(88, 166, 255, .04);
    }

    .mfa-method-icon {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      background: var(--purple-dim);
      border: 1px solid var(--purple-border);
    }

    .mfa-method-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mfa-method-val {
      font-size: 12px;
      color: var(--text3);
      direction: ltr;
      text-align: right;
    }

    .mfa-method-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .mfa-method-btns {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .mfa-send-btn {
      padding: 6px 11px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      border: 1.5px solid var(--border2);
      background: var(--bg3);
      color: var(--text2);
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .mfa-send-btn:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
    }

    .mfa-send-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .mfa-sent-banner {
      background: var(--green-dim);
      border: 1px solid var(--green-border);
      border-radius: 12px;
      padding: 11px 14px;
      font-size: 13px;
      color: var(--green);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .mfa-code-input {
      width: 100%;
      padding: 14px 16px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 8px;
      text-align: center;
      direction: ltr;
      box-sizing: border-box;
      background: var(--input-bg);
      border: 2px solid var(--border2);
      border-radius: 14px;
      color: var(--text);
      outline: none;
      font-family: monospace;
      transition: border-color 0.15s, background 0.15s;
      margin-bottom: 8px;
    }

    .mfa-code-input:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .mfa-code-input.err {
      border-color: var(--red);
      background: var(--red-dim);
    }

    .mfa-code-error {
      font-size: 12px;
      color: var(--red);
      text-align: center;
      min-height: 18px;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .mfa-remember-row {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg3);
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 14px;
    }

    .mfa-remember-row input {
      accent-color: var(--accent);
      cursor: pointer;
      flex-shrink: 0;
    }

    .mfa-step-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }

    .mfa-btn-primary {
      flex: 1;
      padding: 12px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 14px rgba(88, 166, 255, .3);
    }

    .mfa-btn-primary:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(88, 166, 255, .4);
    }

    .mfa-btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .mfa-btn-secondary {
      padding: 12px 18px;
      border-radius: 12px;
      font-family: inherit;
      border: 1.5px solid var(--border2);
      background: var(--input-bg);
      color: var(--text2);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .mfa-btn-secondary:hover { color: var(--text); border-color: var(--accent-border); }
    .mfa-cancel-row { text-align: center; }
    .mfa-cancel-row .mfa-btn-secondary { width: 100%; }
    .mfa-resend-row {
      text-align: center; font-size: 13px; color: var(--text3);
      padding: 10px 0 2px;
    }
    .mfa-resend-row .btn-link {
      background: none; border: none; cursor: pointer; font-family: inherit;
      font-size: 13px; font-weight: 700; color: var(--accent);
      padding: 2px 6px; border-radius: 6px;
      transition: color 0.15s, background 0.15s;
      text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted;
    }
    .mfa-resend-row .btn-link:hover:not(:disabled) {
      color: var(--accent2); background: var(--accent-dim);
      text-decoration-style: solid;
    }
    .mfa-resend-row .btn-link:disabled { opacity: 0.4; cursor: not-allowed; }
    .mfa-no-methods { text-align: center; color: var(--text3); padding: 20px 0; font-size: 13px; line-height: 1.6; }

    /* ════════════════════════════════════════
       SHELL TABS — ניווט ראשי
    ════════════════════════════════════════ */
    .shell-tabs {
      display: flex;
      background: var(--card-bg);
      border: 1.5px solid var(--card-border);
      border-radius: var(--radius);
      padding: 5px;
      gap: 4px;
      margin-bottom: 24px;
      position: sticky;
      top: 64px;
      z-index: 140;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: var(--shadow);
    }

    .shell-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 16px;
      border: none;
      background: transparent;
      border-radius: calc(var(--radius) - 4px);
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      color: var(--text2);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
      letter-spacing: -0.2px;
    }

    .shell-tab:hover {
      background: var(--accent-dim);
      color: var(--text);
      transform: translateY(-1px);
    }

    .shell-tab.active {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 4px 16px rgba(88, 166, 255, 0.35);
    }

    html[data-theme="light"] .shell-tab.active {
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
    }

    .shell-tab-icon {
      font-size: 18px;
      line-height: 1;
    }

    .shell-tab-label {
      pointer-events: none;
    }

    /* ── Overview ── */
    /* ── Overview Hero — נקי, מותאם ל-tab-welcome ── */
    .ov-hero {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 22px 26px;
      background: var(--card-bg, var(--card));
      border: 1px solid var(--card-border, var(--border));
      border-radius: 20px;
      box-shadow: var(--shadow);
      margin-bottom: 18px;
    }

    .ov-hero-icon {
      font-size: 36px;
      flex-shrink: 0;
      line-height: 1;
    }

    .ov-hero-content {
      flex: 1;
      min-width: 0;
    }

    .ov-hero-greeting {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.3px;
      line-height: 1.2;
    }

    .ov-hero-meta {
      margin-top: 6px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text2);
    }

    .ov-hero-meta-sep {
      color: var(--text3);
      opacity: 0.5;
    }

    .ov-hero-clock {
      font-variant-numeric: tabular-nums;
      color: var(--text2);
    }

    @media (max-width: 600px) {
      .ov-hero { padding: 16px 18px; gap: 14px; }
      .ov-hero-icon { font-size: 28px; }
      .ov-hero-greeting { font-size: 18px; }
      .ov-hero-meta { font-size: 12px; }
    }

    /* ── Overview Grid ── */
    .overview-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 24px;
    }

    .overview-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
      box-shadow: var(--shadow);
    }

    .overview-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 16px 16px 0 0;
    }

    .overview-card.ov-blue::before  { background: linear-gradient(90deg, var(--accent), rgba(88,166,255,0.3)); }
    .overview-card.ov-green::before { background: linear-gradient(90deg, var(--green), rgba(63,185,80,0.3)); }
    .overview-card.ov-purple::before { background: linear-gradient(90deg, var(--purple), rgba(188,140,255,0.3)); }
    .overview-card.ov-orange::before { background: linear-gradient(90deg, var(--orange), rgba(247,144,9,0.3)); }

    .overview-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .ov-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .ov-chip {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--input-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .ov-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: 0.2px;
    }

    .ov-value {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.5px;
      direction: ltr;
      text-align: right;
    }

    .ov-sub {
      font-size: 11px;
      color: var(--text3);
      font-weight: 500;
      margin-top: 2px;
    }

    .ov-minutes-detail {
      display: flex;
      gap: 10px;
      margin-top: 6px;
      font-size: 11px;
      color: var(--text2);
      font-weight: 600;
    }

    /* ── שורת מידע מערכת קומפקטית ── */
    .ov-sysbar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      padding: 12px 18px;
      margin-bottom: 16px;
      border-radius: 12px;
      background: var(--card);
      border: 1px solid var(--border);
    }

    .ov-sysbar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .ov-sysbar-icon {
      font-size: 16px;
      opacity: 0.85;
      flex-shrink: 0;
    }

    .ov-sysbar-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .ov-sysbar-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .ov-sysbar-value {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }

    .ov-sysbar-sep {
      width: 1px;
      height: 24px;
      background: var(--border);
      flex-shrink: 0;
    }

    .ov-sysbar-status {
      margin-inline-start: auto;
    }

    .ov-sysbar-status-text {
      font-size: 12px;
      font-weight: 700;
      color: var(--green);
    }

    /* ── grid יחיד עבור כרטיס feature ── */
    .overview-grid-single {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-bottom: 16px;
    }

    .overview-card.ov-card-feature {
      padding: 22px 24px;
    }

    .ov-card-feature .ov-value {
      font-size: 32px;
    }

    .ov-card-feature .ov-spark-wrap {
      height: 56px;
      margin-top: 14px;
    }

    @media (max-width: 600px) {
      .ov-sysbar { padding: 10px 12px; gap: 10px; }
      .ov-sysbar-sep { display: none; }
      .ov-sysbar-status { margin-inline-start: 0; }
      .ov-sysbar-value { font-size: 12px; max-width: 140px; }
      .ov-card-feature { padding: 16px 18px; }
      .ov-card-feature .ov-value { font-size: 26px; }
    }

    /* ── שורת ערך + טרנד ── */
    .ov-value-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }

    .ov-trend {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.2px;
      cursor: help;
      transition: transform 0.15s ease;
    }

    .ov-trend:hover { transform: translateY(-1px); }

    .ov-trend-arrow {
      font-size: 12px;
      line-height: 1;
    }

    .ov-trend-up {
      background: rgba(63, 185, 80, 0.14);
      color: #2ea043;
      border: 1px solid rgba(63, 185, 80, 0.25);
    }

    .ov-trend-down {
      background: rgba(248, 81, 73, 0.14);
      color: #f85149;
      border: 1px solid rgba(248, 81, 73, 0.25);
    }

    .ov-trend-flat {
      background: rgba(139, 148, 158, 0.14);
      color: var(--text2);
      border: 1px solid rgba(139, 148, 158, 0.25);
    }

    [data-theme="light"] .ov-trend-up { color: #15803d; }
    [data-theme="light"] .ov-trend-down { color: #dc2626; }

    /* ── Sparkline בתוך כרטיס ── */
    .ov-card-with-spark { position: relative; padding-bottom: 8px; }

    .ov-spark-wrap {
      margin-top: 10px;
      height: 44px;
      position: relative;
      animation: ov-fade-in 0.6s ease-out;
    }

    .ov-spark-wrap canvas { width: 100% !important; height: 100% !important; }

    @keyframes ov-fade-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── פס תובנות — כרטיס מקצועי ובולט ── */
    .ov-insights {
      position: relative;
      margin: 18px 0 24px;
      padding: 22px 24px 20px;
      border-radius: 16px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: ov-fade-in 0.5s ease-out;
    }

    /* רצועת accent בראש הכרטיס — ייחודיות עיצובית עדינה */
    .ov-insights::before {
      content: '';
      position: absolute;
      top: 0;
      inset-inline: 0;
      height: 3px;
      background: linear-gradient(90deg,
        rgba(88, 166, 255, 0.9) 0%,
        rgba(188, 140, 255, 0.9) 50%,
        rgba(63, 185, 80, 0.9) 100%);
    }

    .ov-insights-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      font-size: 15px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.2px;
    }

    .ov-insights-icon { font-size: 22px; line-height: 1; }

    .ov-insights-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .ov-insight-chip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--input-bg, rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
      transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    }

    [data-theme="light"] .ov-insight-chip {
      background: rgba(0,0,0,0.015);
    }

    .ov-insight-chip:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .ov-insight-icon {
      font-size: 20px;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-dim);
      border-radius: 10px;
      flex-shrink: 0;
      line-height: 1;
    }

    .ov-insight-text {
      color: var(--text);
      flex: 1;
      min-width: 0;
    }

    @media (max-width: 600px) {
      .ov-insights { padding: 16px 16px 14px; margin: 14px 0 20px; }
      .ov-insights-head { font-size: 14px; margin-bottom: 12px; }
      .ov-insights-list { grid-template-columns: 1fr; gap: 8px; }
      .ov-insight-chip { padding: 12px 14px; font-size: 12.5px; }
      .ov-insight-icon { width: 34px; height: 34px; font-size: 18px; }
    }

    .ov-status-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
    }

    .ov-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      animation: ov-pulse 2s ease-in-out infinite;
    }

    @keyframes ov-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .ov-status-text {
      font-size: 11px;
      font-weight: 600;
      color: var(--green);
    }

    /* ── Quick Actions ── */
    .ov-actions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .ov-actions-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    @media(max-width:900px) {
      .ov-actions-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:600px) {
      .ov-actions-grid-3 {
        grid-template-columns: 1fr;
      }
    }

    .ov-action-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 22px;
      background: var(--card-bg);
      border: 1.5px solid var(--border2);
      border-radius: 16px;
      cursor: pointer;
      transition: border-color 0.18s, transform 0.15s, box-shadow 0.15s;
      font-family: inherit;
      text-align: right;
    }

    .ov-action-card:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(88, 166, 255, 0.15);
    }

    .ov-action-icon {
      font-size: 28px;
      flex-shrink: 0;
    }

    .ov-action-info {
      flex: 1;
    }

    .ov-action-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .ov-action-desc {
      font-size: 12px;
      color: var(--text3);
      margin-top: 2px;
    }

    .ov-action-arrow {
      font-size: 18px;
      font-weight: 700;
      color: var(--accent);
      flex-shrink: 0;
      transition: transform 0.15s;
    }

    .ov-action-card:hover .ov-action-arrow {
      transform: translateX(-4px);
    }

    /* ── Tab Welcome (shared for reports + data) ── */
    .tab-welcome {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
      transition: var(--transition);
    }

    .tab-welcome-hero {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 28px 28px 0;
    }

    .tab-welcome-icon {
      font-size: 38px;
      flex-shrink: 0;
    }

    .tab-welcome-title {
      font-size: 20px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.3px;
    }

    .tab-welcome-sub {
      font-size: 13px;
      color: var(--text2);
      margin-top: 3px;
      line-height: 1.5;
    }

    .tab-welcome-features {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 16px 28px 0;
    }

    .tab-welcome-chip {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      background: var(--input-bg);
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--border2);
    }

    /* ── Reports Selector ── */
    .reports-selector {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
      transition: var(--transition);
    }

    .reports-selector-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 24px 12px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, var(--accent-dim) 0%, var(--purple-dim) 100%);
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .reports-selector-icon {
      font-size: 20px;
    }

    .reports-selector-body {
      padding: 18px 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-load-report {
      max-width: 280px;
    }

    /* ── Report Actions (בתוך tabReports, מעל dashboard) ── */
    .report-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      justify-content: center;   /* כותרת-התקופה ממורכזת */
      flex-wrap: wrap;
      position: relative;
    }

    /* "רענן" נצמד לקצה כדי שהכותרת תישאר ממורכזת לרוחב מלא */
    .report-actions .btn-reload {
      position: absolute;
      inset-inline-end: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    /* במובייל — חזרה לזרימה רגילה כדי שלא יחפוף */
    @media (max-width: 600px) {
      .report-actions {
        justify-content: flex-start;
      }
      .report-actions .btn-reload {
        position: static;
        transform: none;
      }
    }

    /* ── Placeholder ── */
    .placeholder-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 24px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 24px;
      box-shadow: var(--shadow);
      margin-top: 4px;
    }

    .placeholder-icon {
      font-size: 56px;
      line-height: 1;
      margin-bottom: 16px;
      opacity: 0.7;
      animation: float-icon 3s ease-in-out infinite;
    }

    .placeholder-title {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 8px;
      letter-spacing: -0.3px;
    }

    .placeholder-sub {
      font-size: 14px;
      color: var(--text3);
      max-width: 360px;
      line-height: 1.6;
    }

    /* ── DATA TAB ── */
    .dt-selector {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 24px;
      transition: var(--transition);
    }

    .dt-manual-input {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .dt-load-btn {
      max-width: none;
      width: 100%;
    }

    /* scan */
    .dt-scan-btn {
      width: 100%;
      padding: 14px 20px;
      background: linear-gradient(135deg, var(--accent-dim), rgba(124, 58, 237, 0.08));
      border: 1.5px dashed var(--accent-border);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
      margin-bottom: 16px;
    }

    .dt-scan-btn:hover {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border-style: solid;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(88, 166, 255, 0.3);
    }

    .dt-scan-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .dt-scan-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px;
      color: var(--text2);
      font-size: 14px;
      margin-bottom: 16px;
    }

    .dt-scan-empty {
      text-align: center;
      padding: 18px;
      color: var(--text3);
      font-size: 14px;
    }

    .dt-scan-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .dt-scan-label {
      font-size: 13px;
      font-weight: 800;
      color: var(--text2);
    }

    .dt-scan-sort {
      margin-inline-start: auto;
    }

    .dt-scan-sort select {
      padding: 4px 10px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      direction: rtl;
      outline: none;
      transition: border-color 0.15s;
    }

    .dt-scan-sort select:focus {
      border-color: var(--accent);
    }

    .dt-scan-sort select option {
      background: var(--card-bg);
      color: var(--text);
    }

    .dt-scan-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-dim);
      padding: 2px 9px;
      border-radius: 20px;
      border: 1px solid var(--accent-border);
    }

    .dt-folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .dt-folder-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px 16px 14px;
      background: var(--card-bg);
      border: 1.5px solid var(--border2);
      border-radius: 16px;
      cursor: pointer;
      transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
      font-family: inherit;
      text-align: right;
    }

    .dt-folder-card:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(88, 166, 255, 0.18);
    }

    .dt-folder-card-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dt-folder-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dt-folder-card-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }

    .dt-folder-path {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    .dt-folder-title {
      font-size: 12px;
      color: var(--text3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dt-folder-card-action {
      display: flex;
      justify-content: center;
    }

    .dt-folder-load-btn {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--accent);
      padding: 6px 18px;
      background: var(--accent-dim);
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
      width: 100%;
      text-align: center;
    }

    .dt-folder-card:hover .dt-folder-load-btn {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
    }

    .dt-separator {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 8px 0 16px;
      color: var(--text3);
      font-size: 12px;
      font-weight: 600;
    }

    .dt-separator::before,
    .dt-separator::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border2);
    }

    .dt-checkbox-field {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 34px 9px 12px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s;
    }

    .dt-checkbox-field:hover {
      border-color: var(--accent);
    }

    .dt-checkbox-field input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--accent);
      flex-shrink: 0;
    }

    .dt-checkbox-field span {
      white-space: nowrap;
    }

    .dt-repeat-row {
      margin-top: 10px;
    }

    .dt-repeat-row .iw {
      position: relative;
    }

    .dt-repeat-row .ii {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
    }

    .dt-pxx-filter {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .dt-pxx-filter-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--text3);
      margin-bottom: 8px;
    }

    .dt-pxx-filter-row {
      display: flex;
      gap: 10px;
    }

    .dt-pxx-filter-row .iw {
      flex: 1;
      position: relative;
    }

    .dt-pxx-filter-row select {
      width: 100%;
      padding: 9px 34px 9px 12px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      font-family: inherit;
      direction: rtl;
      outline: none;
      cursor: pointer;
      transition: border-color 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }

    .dt-pxx-filter-row select:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .dt-pxx-filter-row select option {
      background: var(--card-bg);
      color: var(--text);
    }

    .dt-pxx-filter-row .ii {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
    }

    /* completion card */
    .dt-completion-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 22px 28px;
      margin-bottom: 20px;
      box-shadow: var(--shadow);
    }

    .dt-completion-prompt {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .dt-completion-prompt-icon {
      font-size: 32px;
      flex-shrink: 0;
    }

    .dt-completion-prompt-info {
      flex: 1;
    }

    .dt-completion-load-btn {
      padding: 10px 22px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none;
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .dt-completion-load-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35);
    }

    .dt-completion-hint {
      font-size: 12px;
      color: var(--text3);
      margin-top: 3px;
    }

    .dt-completion-loading {
      overflow: hidden;
      border-radius: 18px;
      margin: -22px -28px;
    }

    .dt-completion-loading-body {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 28px;
    }

    /* ספינר דו-טבעתי לכרטיס שיעור השלמה (גרסה קטנה של ספינר הטעינה הראשי) */
    .dt-completion-spinner {
      position: relative;
      width: 46px;
      height: 46px;
      flex-shrink: 0;
    }

    .dt-completion-spinner-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: var(--accent);
      border-right-color: var(--accent2);
      animation: spin 1.1s linear infinite;
    }

    .dt-completion-spinner-ring2 {
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      border: 2px solid transparent;
      border-bottom-color: var(--accent2);
      border-left-color: var(--accent);
      opacity: .55;
      animation: spin 1.7s linear infinite reverse;
    }

    .dt-completion-spinner-emoji {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      animation: pulse-icon 2.4s ease-in-out infinite;
    }

    /* שלוש נקודות קופצות אחרי כותרת "מחשב…" — מבהירות שהתהליך פעיל */
    .dt-loading-dots {
      display: inline-flex;
      gap: 3px;
      margin-inline-start: 5px;
      vertical-align: middle;
    }

    .dt-loading-dots i {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      animation: dt-dot-bounce 1.2s ease-in-out infinite;
    }

    .dt-loading-dots i:nth-child(2) { animation-delay: .15s; }
    .dt-loading-dots i:nth-child(3) { animation-delay: .3s; }

    @keyframes dt-dot-bounce {
      0%, 75%, 100% { opacity: .25; transform: translateY(0); }
      35% { opacity: 1; transform: translateY(-3px); }
    }

    .dt-completion-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .dt-completion-icon {
      font-size: 28px;
    }

    .dt-completion-info {
      flex: 1;
    }

    .dt-completion-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .dt-completion-sub {
      font-size: 12px;
      color: var(--text3);
      margin-top: 2px;
    }

    .dt-completion-pct {
      font-size: 32px;
      font-weight: 900;
      letter-spacing: -1px;
    }

    .dt-completion-bar-track {
      height: 8px;
      background: var(--border2);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .dt-completion-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s ease;
    }

    .dt-completion-details {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 10px 0;
    }

    .dt-completion-detail {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text2);
    }

    .dt-completion-detail.ok { color: var(--green); }
    .dt-completion-detail.fail { color: var(--red); }
    .dt-completion-detail.phones { color: var(--orange); }

    .dt-dropped-btn {
      padding: 7px 16px;
      background: var(--accent-dim);
      border: 1.5px solid var(--accent-border);
      border-radius: 10px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .dt-dropped-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    .dt-dropped-real {
      background: rgba(248, 81, 73, 0.08);
      border-color: rgba(248, 81, 73, 0.25);
      color: var(--red);
    }

    .dt-dropped-real:hover {
      background: var(--red);
      color: #fff;
    }

    .dt-dropped-returned {
      background: rgba(88, 166, 255, 0.08);
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .dt-completion-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .dt-completion-detail.returned {
      color: var(--accent);
    }

    .top-modal-box {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      width: 90%;
      max-width: 480px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      animation: slideDown 0.22s ease;
    }

    .top-modal-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 22px 14px;
      border-bottom: 1px solid var(--border);
    }

    .top-modal-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
    }

    .top-modal-count {
      font-size: 12px;
      font-weight: 600;
      color: var(--text3);
      background: var(--input-bg);
      padding: 3px 10px;
      border-radius: 20px;
    }

    .top-modal-close {
      margin-inline-start: auto;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      width: 32px;
      height: 32px;
      font-size: 14px;
      color: var(--text2);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .top-modal-close:hover {
      background: var(--red-dim);
      color: var(--red);
      border-color: var(--red-border);
    }

    .top-modal-body {
      overflow-y: auto;
      padding: 4px 0;
    }

    .top-modal-actions {
      padding: 10px 20px;
      border-bottom: 1px solid var(--border);
    }

    .dt-dropped-export-btn {
      padding: 6px 14px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .dt-dropped-export-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    .dt-dropped-modal {
      max-width: 600px;
    }

    .dt-dropped-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .dt-dropped-table th {
      padding: 8px 12px;
      text-align: right;
      font-weight: 700;
      color: var(--text2);
      border-bottom: 2px solid var(--border);
      font-size: 12px;
      white-space: nowrap;
    }

    .dt-dropped-table td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }

    .dt-dropped-table tbody tr:hover {
      background: var(--row-hover);
    }

    .dt-drop-num {
      color: var(--text3);
      font-weight: 700;
      width: 30px;
    }

    .dt-drop-phone {
      font-weight: 700;
      direction: ltr;
      text-align: right;
    }

    .dt-drop-attempts {
      font-weight: 700;
      color: var(--orange);
    }

    .export-menu-sep {
      height: 1px;
      background: var(--border);
      margin: 4px 8px;
    }

    /* data tab loading — styled like a dashboard card */
    .dt-loading-overlay {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 40px 20px;
    }

    .dt-loading-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      max-width: 460px;
      width: 100%;
      animation: slideDown 0.22s ease;
    }

    .dt-loading-bar-top {
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
      background-size: 200% 100%;
      animation: dt-bar-slide 1.5s ease-in-out infinite;
    }

    @keyframes dt-bar-slide {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }

    .dt-loading-body {
      padding: 24px 28px 22px;
    }

    .dt-loading-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .dt-loading-icon-chip {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--accent-dim), rgba(124, 58, 237, 0.08));
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .dt-loading-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.2px;
    }

    .dt-loading-sub {
      font-size: 12.5px;
      color: var(--text3);
      margin-top: 2px;
      min-height: 16px;
    }

    .dt-loading-progress {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .dt-loading-bar-wrap {
      flex: 1;
      height: 6px;
      background: var(--border2);
      border-radius: 3px;
      overflow: hidden;
    }

    .dt-loading-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 3px;
      width: 0%;
      transition: width 0.3s ease;
    }

    .dt-loading-pct {
      font-size: 13px;
      font-weight: 800;
      color: var(--accent);
      font-variant-numeric: tabular-nums;
      min-width: 36px;
      text-align: left;
    }

    .dt-loading-counter-row {
      display: flex;
      justify-content: center;
    }

    .dt-loading-counter-chip {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      background: var(--input-bg);
      padding: 4px 14px;
      border-radius: 20px;
      border: 1px solid var(--border2);
    }

    .dt-loading-footer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .dt-loading-timer {
      font-size: 12px;
      font-weight: 600;
      color: var(--text3);
      font-variant-numeric: tabular-nums;
    }

    .dt-loading-cancel-btn {
      display: block;
      width: 100%;
      margin-top: 14px;
      padding: 8px;
      background: transparent;
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

    .dt-loading-cancel-btn:hover {
      border-color: var(--red-border);
      color: var(--red);
      background: var(--red-dim);
    }

    #dtDistSection {
      margin-bottom: 24px;
    }

    /* registration modal */
    .dt-reg-modal-box {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      width: 92%;
      max-width: 540px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      animation: slideDown 0.22s ease;
    }

    .dt-reg-modal-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 20px 12px;
      border-bottom: 1px solid var(--border);
    }

    .dt-reg-nav-arrow {
      padding: 6px 12px;
      border-radius: 8px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.15s, color 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }

    .dt-reg-nav-arrow:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
    }

    .dt-reg-nav-arrow:disabled {
      opacity: 0.25;
      cursor: not-allowed;
    }

    .dt-reg-modal-title-wrap {
      flex: 1;
      text-align: center;
    }

    .dt-reg-modal-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
    }

    .dt-reg-modal-counter {
      font-size: 12px;
      font-weight: 600;
      color: var(--text3);
      margin-inline-start: 6px;
    }

    .dt-reg-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      font-size: 14px;
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-inline-start: 4px;
      transition: background 0.15s, color 0.15s;
    }

    .dt-reg-modal-close:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    .dt-reg-phone-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 20px;
      background: var(--accent-dim);
      border-bottom: 1px solid var(--accent-border);
    }

    .dt-reg-phone-info {
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
    }

    .dt-nav-btn {
      padding: 5px 12px;
      background: var(--card-bg);
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--text2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }

    .dt-nav-btn:hover:not(:disabled) {
      border-color: var(--accent);
      color: var(--accent);
    }

    .dt-nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* Points drill modal — prev/next navigation bar (mirrors .dt-reg-phone-nav) */
    .pt-drill-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 20px;
      background: var(--accent-dim);
      border-bottom: 1px solid var(--accent-border);
    }

    .pt-drill-nav-info {
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      min-width: 64px;
      text-align: center;
    }

    .dt-reg-modal-body {
      overflow-y: auto;
      padding: 16px 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
    }

    .dt-reg-field {
      padding: 8px 10px;
      border-radius: 8px;
      transition: background 0.12s;
    }

    .dt-reg-field:hover {
      background: var(--row-hover);
    }

    .dt-reg-field-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--text3);
      margin-bottom: 2px;
    }

    .dt-reg-field-value {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      word-break: break-word;
    }

    .dt-reg-modal-footer {
      padding: 12px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: center;
    }

    .dt-reg-play-btn {
      padding: 8px 20px;
      background: var(--accent-dim);
      border: 1.5px solid var(--accent-border);
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .dt-reg-play-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    @media (max-width: 500px) {
      .dt-reg-modal-body {
        grid-template-columns: 1fr;
      }
    }

    .dt-dist-selector {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .dt-dist-selector label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text2);
    }

    .dt-dist-selector select {
      padding: 7px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      direction: rtl;
      cursor: pointer;
      outline: none;
      transition: border-color 0.15s;
    }

    .dt-dist-selector select:focus {
      border-color: var(--accent);
    }

    .dt-dist-container {
      height: 300px;
    }

    /* recordings — table button */
    .dt-rec-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 50%;
      font-size: 10px;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      vertical-align: middle;
      margin-inline-start: 4px;
      flex-shrink: 0;
    }

    .dt-rec-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    .dt-rec-btn.playing {
      background: var(--accent);
      color: #fff;
      animation: dt-pulse 1.2s ease-in-out infinite;
    }

    @keyframes dt-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.4); }
      50% { box-shadow: 0 0 0 5px rgba(88, 166, 255, 0); }
    }

    .dt-rec-dur {
      font-size: 10px;
      color: var(--text3);
      margin-inline-start: 2px;
    }

    /* floating player */
    .dt-player {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 18px;
      background: var(--card-bg);
      border: 1.5px solid var(--accent-border);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      z-index: 9000;
      min-width: 320px;
      max-width: 460px;
      animation: slideUp 0.2s ease;
      direction: ltr;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .dt-player-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.15s;
    }

    .dt-player-btn:hover {
      transform: scale(1.08);
    }

    .dt-player-progress-wrap {
      flex: 1;
      height: 6px;
      background: var(--border2);
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .dt-player-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 3px;
      width: 0%;
      transition: width 0.15s linear;
    }

    .dt-player-time {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      white-space: nowrap;
      min-width: 80px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .dt-player-dl {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
    }

    .dt-player-dl:hover {
      background: var(--accent);
      color: #fff;
    }

    .dt-player-close {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--input-bg);
      border: 1px solid var(--border2);
      color: var(--text3);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, color 0.15s;
    }

    .dt-player-close:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    /* repeat badge */
    .dt-repeat-badge {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--orange);
      background: rgba(210, 153, 34, 0.12);
      border: 1px solid rgba(210, 153, 34, 0.25);
      padding: 1px 5px;
      border-radius: 6px;
      margin-inline-start: 4px;
      cursor: help;
      vertical-align: middle;
    }

    /* column toggle button */
    .dt-col-toggle-btn {
      margin-inline-start: auto;
      padding: 5px 12px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }

    .dt-col-toggle-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* column modal */
    .dt-col-modal-box {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      width: 90%;
      max-width: 380px;
      max-height: 70vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      animation: slideDown 0.22s ease;
    }

    .dt-col-modal-header {
      display: flex;
      align-items: center;
      padding: 16px 20px 12px;
      border-bottom: 1px solid var(--border);
    }

    .dt-col-modal-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }

    .dt-col-modal-close {
      margin-inline-start: auto;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      width: 30px;
      height: 30px;
      font-size: 13px;
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }

    .dt-col-modal-close:hover {
      background: var(--red-dim);
      color: var(--red);
    }

    .dt-col-modal-body {
      overflow-y: auto;
      padding: 12px 20px 16px;
    }

    .dt-col-group-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 10px 0 6px;
    }

    .dt-col-group-label:first-child {
      margin-top: 0;
    }

    .dt-col-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 2px;
      border-bottom: 1px solid var(--border);
    }

    .dt-col-row:last-child {
      border-bottom: none;
    }

    .dt-col-row.dt-col-changed {
      background: rgba(88, 166, 255, 0.06);
    }

    .dt-col-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--accent);
      flex-shrink: 0;
    }

    .dt-col-name-input {
      flex: 1;
      padding: 4px 8px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      transition: border-color 0.15s, background 0.15s;
      min-width: 0;
    }

    .dt-col-name-input:hover {
      border-color: var(--border2);
    }

    .dt-col-name-input:focus {
      border-color: var(--accent);
      background: var(--input-bg);
    }

    .dt-col-title-input {
      font-size: 15px;
      font-weight: 700;
      padding: 6px 10px;
    }

    .dt-col-key {
      font-size: 10px;
      font-weight: 600;
      color: var(--text3);
      background: var(--input-bg);
      padding: 2px 6px;
      border-radius: 4px;
      flex-shrink: 0;
      direction: ltr;
      font-family: monospace;
    }

    .dt-col-modal-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 20px;
      border-top: 2px solid rgba(210, 153, 34, 0.35);
      background: rgba(210, 153, 34, 0.06);
    }

    .dt-col-save-warning {
      font-size: 12px;
      font-weight: 600;
      color: var(--orange);
      line-height: 1.5;
    }

    .dt-col-save-btns {
      display: flex;
      gap: 8px;
    }

    .dt-col-save-btn {
      padding: 8px 18px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .dt-col-save-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(88, 166, 255, 0.35);
    }

    .dt-col-cancel-btn {
      padding: 8px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      transition: border-color 0.15s;
    }

    .dt-col-cancel-btn:hover {
      border-color: var(--red);
      color: var(--red);
    }

    .dt-col-quick-btns {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .dt-col-quick-btns button {
      padding: 4px 10px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 6px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .dt-col-quick-btns button:hover {
      background: var(--accent);
      color: #fff;
    }

    .dt-tbl-wrap {
      overflow-x: auto;
    }

    .dt-tbl-wrap table {
      min-width: 100%;
      white-space: nowrap;
    }

    .dt-th {
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .shell-tabs { top: 58px; }
      .shell-tab { padding: 10px 10px; font-size: 13px; gap: 6px; }
      .shell-tab-icon { font-size: 16px; }
      .overview-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .overview-card { padding: 18px; }
      .ov-value { font-size: 20px; }
      .ov-hero { padding: 22px 24px; }
      .ov-hero-greeting { font-size: 20px; }
      .ov-actions-grid { grid-template-columns: 1fr; }
      .tab-welcome-hero { padding: 22px 22px 0; }
      .tab-welcome-features { padding: 14px 22px 0; }
      .tab-welcome-title { font-size: 18px; }
      .tab-welcome-icon { font-size: 32px; }
      .reports-selector-body { padding: 14px 18px 16px; }
    }

    @media (max-width: 600px) {
      .shell-tabs { top: 54px; }
      .shell-tab { padding: 10px 6px; font-size: 12px; gap: 4px; flex-direction: column; }
      .shell-tab-icon { font-size: 20px; }
      .shell-tab-label { font-size: 11px; }
      .overview-grid { grid-template-columns: 1fr 1fr; }
      .overview-card { padding: 16px; }
      .ov-hero { flex-direction: column; gap: 12px; text-align: center; }
      .ov-hero-right { align-items: center; }
      .ov-hero-clock { font-size: 22px; }
    }

    @media (max-width: 420px) {
      .shell-tabs { top: 50px; padding: 3px; }
      .shell-tab { padding: 8px 4px; }
    }

    /* ══════════════════════════════════════════
       POINTS TAB (נקודות)
    ══════════════════════════════════════════ */

    .pt-info-card {
      margin-top: 18px;
      padding: 18px 22px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text2);
      font-size: 13.5px;
      line-height: 1.7;
    }

    .pt-info-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    .pt-info-list {
      margin: 0;
      padding-inline-start: 20px;
      list-style: disc;
    }

    .pt-info-list li {
      margin-bottom: 6px;
    }

    .pt-info-list strong {
      color: var(--text);
    }

    .pt-info-note {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--border);
      font-size: 12.5px;
      color: var(--text3);
    }

    .pt-info-note code {
      background: var(--accent-dim);
      color: var(--accent);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
    }

    /* Sub-tabs */
    .pt-subtabs {
      display: flex;
      gap: 6px;
      margin-bottom: 22px;
      padding: 5px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      width: fit-content;
      box-shadow: var(--shadow);
    }

    .pt-subtab {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 20px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 10px;
      transition: var(--transition);
    }

    .pt-subtab:hover {
      color: var(--text);
      background: var(--row-hover);
    }

    .pt-subtab.active {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 3px 10px rgba(88, 166, 255, 0.32);
    }

    .pt-subtab-icon {
      font-size: 17px;
    }

    .pt-subtab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 22px;
      padding: 0 8px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 11px;
      font-size: 11.5px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.95);
    }

    .pt-subtab:not(.active) .pt-subtab-count {
      background: var(--input-bg);
      color: var(--text3);
    }

    /* ─── Podium (Top 3 leaders) ─── */
    .pt-podium {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 28px;
    }

    @media (max-width: 860px) {
      .pt-podium { grid-template-columns: 1fr; }
    }

    .pt-podium-card {
      position: relative;
      overflow: visible;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .pt-podium-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }

    /* Medal accents — top-edge color bar + accent border */
    .pt-podium-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      border-radius: 18px 18px 0 0;
      pointer-events: none;
    }

    .pt-podium-gold::before {
      background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
    }
    .pt-podium-silver::before {
      background: linear-gradient(90deg, #cbd5e1, #94a3b8, #64748b);
    }
    .pt-podium-bronze::before {
      background: linear-gradient(90deg, #f59e0b, #c2410c, #92400e);
    }

    .pt-podium-gold {
      border-color: rgba(245, 158, 11, 0.35);
      box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.10), 0 4px 16px rgba(245, 158, 11, 0.08);
    }
    .pt-podium-silver {
      border-color: rgba(148, 163, 184, 0.35);
      box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 4px 16px rgba(148, 163, 184, 0.06);
    }
    .pt-podium-bronze {
      border-color: rgba(194, 65, 12, 0.32);
      box-shadow: 0 0 0 1px rgba(194, 65, 12, 0.08), 0 4px 16px rgba(194, 65, 12, 0.06);
    }

    /* Medal icon backgrounds */
    .top-card-icon.tci-gold {
      background: rgba(245, 158, 11, 0.18);
      border: 1px solid rgba(245, 158, 11, 0.4);
      font-size: 20px;
    }
    .top-card-icon.tci-silver {
      background: rgba(148, 163, 184, 0.18);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 20px;
    }
    .top-card-icon.tci-bronze {
      background: rgba(194, 65, 12, 0.18);
      border: 1px solid rgba(194, 65, 12, 0.4);
      font-size: 20px;
    }

    .pt-podium-rank {
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
    }

    .pt-podium-sub {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text3);
      margin-top: 2px;
    }

    .pt-podium-body {
      padding: 18px 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pt-podium-name {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .pt-podium-id {
      font-size: 12.5px;
      color: var(--text3);
      font-family: 'Courier New', monospace;
      margin-top: -4px;
    }

    .pt-podium-pts-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 4px;
    }

    .pt-podium-pts {
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
      background: linear-gradient(135deg, var(--green), #2ea043);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pt-podium-gold .pt-podium-pts {
      background: linear-gradient(135deg, #fbbf24, #d97706);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .pt-podium-silver .pt-podium-pts {
      background: linear-gradient(135deg, #cbd5e1, #64748b);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .pt-podium-bronze .pt-podium-pts {
      background: linear-gradient(135deg, #f59e0b, #92400e);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pt-podium-pts-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text2);
    }

    .pt-podium-bar-wrap {
      width: 100%;
      height: 6px;
      background: var(--input-bg);
      border-radius: 6px;
      overflow: hidden;
      margin-top: 2px;
    }

    .pt-podium-bar {
      height: 100%;
      border-radius: 6px;
      transition: width 0.5s ease;
    }

    .pt-podium-gold .pt-podium-bar {
      background: linear-gradient(90deg, #fbbf24, #d97706);
    }
    .pt-podium-silver .pt-podium-bar {
      background: linear-gradient(90deg, #cbd5e1, #64748b);
    }
    .pt-podium-bronze .pt-podium-bar {
      background: linear-gradient(90deg, #f59e0b, #92400e);
    }

    .pt-podium-pct {
      font-size: 11.5px;
      color: var(--text3);
      font-weight: 600;
    }

    .pt-podium-drill {
      margin-top: 6px;
      padding: 9px 14px;
      border: 1px solid var(--border2);
      background: transparent;
      color: var(--text2);
      border-radius: 9px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: var(--transition);
    }

    .pt-podium-drill:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* Search bar in points tab */
    .pt-search-bar {
      margin-bottom: 12px;
    }

    /* Table cells */
    .pt-rank-col {
      width: 70px;
    }

    .pt-rank-cell {
      font-weight: 700;
      color: var(--text2);
      white-space: nowrap;
    }

    .pt-medal {
      display: inline-block;
      margin-inline-end: 4px;
      font-size: 16px;
    }

    .pt-name {
      font-weight: 600;
      color: var(--text);
    }

    .pt-id-sub {
      font-size: 12px;
      color: var(--text3);
      margin-top: 2px;
    }

    .pt-type-chip {
      display: inline-block;
      padding: 3px 10px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .pt-pts-cell {
      font-weight: 700;
      color: var(--green);
      font-size: 15px;
      white-space: nowrap;
    }

    .pt-pts-pos {
      color: var(--green);
      font-weight: 700;
    }

    .pt-pts-neg {
      color: var(--red);
      font-weight: 700;
    }

    .pt-drill-btn {
      padding: 6px 12px;
      border: 1px solid var(--border2);
      background: transparent;
      color: var(--text2);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      white-space: nowrap;
    }

    .pt-drill-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* Drill-down modal */
    .modal-box.pt-drill-modal {
      max-width: 1100px;
      width: 95vw;
      max-height: 90vh;
    }

    .pt-drill-modal .modal-body {
      padding: 20px 24px;
    }

    @media (max-width: 768px) {
      .pt-subtabs { width: 100%; }
      .pt-subtab { flex: 1; justify-content: center; padding: 9px 8px; }
      .pt-rank-col { width: 50px; }
      .pt-podium-pts { font-size: 26px; }
      .pt-podium-name { font-size: 16px; }
    }

    /* ── Type filter chips ── */
    .pt-type-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .pt-type-chip-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      background: var(--bg3);
      border: 1px solid var(--border2);
      border-radius: 20px;
      color: var(--text2);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .pt-type-chip-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .pt-type-chip-btn.active {
      background: var(--accent-dim);
      border-color: var(--accent-border);
      color: var(--accent);
    }

    .pt-type-chip-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 20px;
      padding: 0 7px;
      background: var(--input-bg);
      border-radius: 10px;
      font-size: 11px;
      font-weight: 800;
      color: var(--text3);
    }

    .pt-type-chip-btn.active .pt-type-chip-count {
      background: var(--accent);
      color: #fff;
    }

    /* ── Type chip in table cells (column "סוג") ── */
    .pt-type-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .pt-type-icon {
      font-size: 13px;
      line-height: 1;
    }

    /* ── ID cell — formatted (LTR) ── */
    .pt-id-cell {
      font-family: 'Courier New', monospace;
      font-size: 12.5px;
      color: var(--text2);
      white-space: nowrap;
    }

    .pt-id-invalid {
      color: var(--orange);
      font-weight: 700;
      cursor: help;
    }

    .pt-not-authorized {
      color: var(--orange) !important;
      font-weight: 700;
    }

    /* ── Aux columns (from ListAllInformation) ── */
    .pt-aux-cell {
      font-size: 13px;
      color: var(--text2);
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Group derived metric cells (member count, avg per member) ── */
    .pt-member-cell {
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
    }

    .pt-avg-cell {
      font-weight: 700;
      color: var(--accent);
      white-space: nowrap;
    }

    .pt-avg-cell strong {
      font-size: 14px;
    }

    /* ── Podium meta (school/city beneath name) ── */
    .pt-podium-meta {
      font-size: 12px;
      color: var(--text3);
      font-weight: 600;
      margin-top: -4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── Column picker — extra fields beyond what data-tab.js styles ── */
    .pt-col-row-key {
      font-size: 11px;
      color: var(--text3);
      font-weight: 600;
      margin-inline-start: auto;
      white-space: nowrap;
    }

    .pt-col-modal-note {
      padding: 12px 14px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: 10px;
      color: var(--text2);
      font-size: 12.5px;
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .pt-col-modal-note strong {
      color: var(--accent);
    }

    /* ══════════════════════════════════════════
       LICENSE — באנר ניסיון + מודאל רכישה
    ══════════════════════════════════════════ */

    :root { --lic-banner-h: 48px; }

    .lic-trial-banner {
      position: fixed;
      top: 0;
      inset-inline: 0;
      z-index: 9000;
      height: var(--lic-banner-h);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 0 16px;
      background: linear-gradient(90deg, rgba(210, 153, 34, 0.18), rgba(219, 109, 40, 0.18));
      border-bottom: 1px solid rgba(210, 153, 34, 0.4);
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* התאמת ה-shell כשבאנר הניסיון מוצג — קיצור הגובה לפי --lic-banner-h */
    body.has-lic-banner #mainShell.app-shell {
      margin-top: var(--lic-banner-h);
      height: calc(100vh - var(--lic-banner-h));
    }

    /* desktop בלבד — sidebar הוא sticky 100vh, צריך לקצר כדי לא לגלוש */
    @media(min-width:641px) {
      body.has-lic-banner #mainShell.app-shell .app-sidebar {
        height: calc(100vh - var(--lic-banner-h));
        max-height: calc(100vh - var(--lic-banner-h));
      }
    }

    /* main content area משתמש ב-height:100vh — צריך לקצר גם כן כדי שהתחתית לא תיחתך */
    body.has-lic-banner #mainShell.app-shell .app-main {
      height: calc(100vh - var(--lic-banner-h));
    }

    /* mobile — האייקון הצף של logout (top:12) מוסתר ע"י הבאנר; להזיז אותו מתחת */
    @media(max-width:640px) {
      body.has-lic-banner .app-sidebar-footer {
        top: calc(12px + var(--lic-banner-h));
      }
    }

    .lic-trial-icon {
      font-size: 18px;
    }

    .lic-trial-text strong {
      color: var(--yellow);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      margin: 0 4px;
    }

    .lic-trial-cta {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.15s ease;
    }

    .lic-trial-cta:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }

    /* ── Modal overlay ── */
    .lic-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: licFadeIn 0.2s ease;
    }

    @keyframes licFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .lic-modal-blocking {
      /* מודאל חוסם — אי אפשר לסגור או ללחוץ מחוץ */
    }

    .lic-modal {
      position: relative;
      width: 100%;
      max-width: 520px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      max-height: 90vh;
      overflow-y: auto;
      animation: licSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* מודאל choose מורחב — שתי סקציות (ניסיון + רכישה) צריכות יותר מקום */
    .lic-modal-overlay.lic-modal-choose .lic-modal {
      max-width: 580px;
    }

    /* במודאל choose ה-x מוצב משמאל (ב-RTL: end), במקום מימין */
    .lic-modal-overlay.lic-modal-choose .lic-modal-close {
      inset-inline-start: auto;
      inset-inline-end: 12px;
    }

    @keyframes licSlideIn {
      from { opacity: 0; transform: translateY(20px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .lic-modal-close {
      position: absolute;
      top: 12px;
      inset-inline-start: 12px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--input-bg);
      border: 1px solid var(--border);
      color: var(--text2);
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }

    .lic-modal-close:hover {
      background: var(--row-hover);
      color: var(--text);
    }

    .lic-modal-header {
      padding: 32px 28px 20px;
      text-align: center;
      border-bottom: 1px solid var(--border);
    }

    .lic-modal-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .lic-modal-title {
      margin: 0 0 8px;
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
    }

    .lic-modal-sub {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text2);
    }

    .lic-modal-body {
      padding: 24px 28px 28px;
    }

    .lic-contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    @media (min-width: 480px) {
      .lic-contact-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .lic-contact-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    .lic-contact-card:hover {
      background: var(--accent-dim);
      border-color: var(--accent-border);
      transform: translateY(-1px);
    }

    .lic-contact-icon {
      font-size: 22px;
      flex-shrink: 0;
    }

    .lic-contact-meta {
      flex: 1;
      min-width: 0;
    }

    .lic-contact-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 2px;
    }

    .lic-contact-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .lic-modal-meta-block {
      margin-top: 18px;
      padding: 14px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .lic-modal-meta {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text2);
    }

    .lic-meta-label {
      color: var(--text);
      font-weight: 600;
    }

    /* ── סקציות במודאל (ניסיון / רכישה) ── */
    .lic-section + .lic-section {
      margin-top: 18px;
    }

    .lic-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .lic-section-icon {
      font-size: 20px;
      line-height: 1;
    }

    .lic-section-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .lic-section-desc {
      margin: 0 0 14px;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--text2);
    }

    /* — סקציית ניסיון: רקע ירקרק עדין כדי להבדיל ויזואלית — */
    .lic-section-trial {
      padding: 18px;
      background: linear-gradient(135deg, var(--green-dim), rgba(63, 185, 80, 0.04));
      border: 1px solid var(--green-border);
      border-radius: var(--radius-sm);
    }

    .lic-section-trial .lic-section-title {
      color: var(--green);
    }

    /* — סקציית רכישה: כותרת בלי קופסה, השאר זורם — */
    .lic-section-purchase .lic-section-title {
      color: var(--accent);
    }

    /* — מפריד "או" בין הסקציות — */
    .lic-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0 18px;
      color: var(--text3);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .lic-divider::before,
    .lic-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border2);
    }

    .lic-divider span {
      padding: 0 4px;
    }

    /* ── כפתור "התחל ניסיון חינם" ── */
    .lic-trial-start-btn {
      width: 100%;
      background: linear-gradient(135deg, var(--green), #2d8e3d);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 12px rgba(63, 185, 80, 0.25);
    }

    .lic-trial-start-btn:hover:not(:disabled) {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(63, 185, 80, 0.35);
    }

    .lic-trial-start-btn:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .lic-cta-note {
      margin-top: 8px;
      text-align: center;
      font-size: 12px;
      color: var(--text3);
    }

    .lic-cta-error {
      margin-top: 6px;
      text-align: center;
      font-size: 13px;
      color: var(--red);
      font-weight: 600;
    }

    /* ════════════════════════════════════════════════════════════
       HOME / OVERVIEW — עיצוב מודרני לטאב הסקירה
       ════════════════════════════════════════════════════════════ */

    /* ── HERO — קלין, משתלב עם שאר הממשק ── */
    .home-hero {
      position: relative;
      margin: 4px 0 24px;
      border-radius: 18px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      color: var(--text);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    /* רצועת accent עליונה 4px — זהה לכרטיסי ה-stat-card בשאר הטאבים */
    .home-hero::before {
      content: '';
      position: absolute;
      top: 0;
      inset-inline: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--purple, #bc8cff));
      z-index: 2;
    }

    /* רקע פנימי עדין — נגיעה של צבע, לא מציף */
    .home-hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, var(--accent-dim), transparent 70%),
        radial-gradient(ellipse 40% 60% at 0% 100%, rgba(124, 58, 237, 0.06), transparent 70%);
      pointer-events: none;
    }
    [data-theme="light"] .home-hero-bg {
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(37, 99, 235, 0.06), transparent 70%),
        radial-gradient(ellipse 40% 60% at 0% 100%, rgba(124, 58, 237, 0.04), transparent 70%);
    }

    .home-hero-inner {
      position: relative;
      z-index: 1;
      padding: 24px 28px 22px;
    }

    .home-hero-row {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 18px;
    }

    .home-hero-emoji {
      font-size: 44px;
      line-height: 1;
      flex-shrink: 0;
      animation: heroFloat 5s ease-in-out infinite;
    }

    @keyframes heroFloat {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50%      { transform: translateY(-3px) rotate(2deg); }
    }

    .home-hero-greet {
      flex: 1;
      min-width: 0;
    }

    .home-hero-greeting {
      margin: 0 0 4px;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.4px;
      line-height: 1.2;
      color: var(--text);
    }

    .home-hero-date {
      font-size: 13px;
      color: var(--text2);
      font-weight: 500;
    }

    .home-hero-clock {
      font-size: 18px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.3px;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      padding: 7px 14px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .home-hero-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .home-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      background: var(--input-bg, rgba(255, 255, 255, 0.04));
      border: 1px solid var(--border2);
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text);
      transition: var(--transition);
    }

    .home-pill:hover {
      border-color: var(--border3, var(--accent-border));
      background: var(--hover-bg, var(--bg3));
    }

    .home-pill-icon {
      font-size: 13px;
      opacity: 0.85;
    }

    .home-pill-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
      gap: 1px;
    }

    .home-pill-label {
      font-size: 9px;
      color: var(--text3);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .home-pill-value {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text);
    }

    /* ── MAIN METRIC ── */
    .home-metric-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 26px 28px 22px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }

    .home-metric-card::before {
      content: '';
      position: absolute;
      top: -40px;
      inset-inline-end: -40px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);
      pointer-events: none;
    }

    .home-metric-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      position: relative;
    }

    .home-metric-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, var(--accent-dim), rgba(88, 166, 255, 0.22));
      border: 1px solid var(--accent-border);
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }

    .home-metric-label {
      flex: 1;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
    }

    .home-metric-trend {
      /* re-uses .ov-trend styling defined below if applicable; otherwise minimal */
    }

    .home-metric-value {
      font-size: 44px;
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1;
      color: var(--text);
      margin-bottom: 8px;
      position: relative;
      font-variant-numeric: tabular-nums;
    }

    .home-metric-sub {
      font-size: 13.5px;
      color: var(--text2);
      font-weight: 500;
      position: relative;
    }

    .home-metric-detail {
      font-size: 12.5px;
      color: var(--text3);
      margin-top: 8px;
      line-height: 1.5;
      position: relative;
    }

    .home-metric-spark {
      margin-top: 18px;
      height: 76px;
      position: relative;
    }

    /* ── SECTION ── */
    .home-section {
      margin-bottom: 28px;
    }

    /* ── גישה מהירה במסך הבית — אחרונים + קיצורים, כלל-ממשקי ──
       הצ'יפים משתמשים בעיצוב הגישה המהירה (.qa-chip וכו'); כאן רק הפריסה
       והאייקון של הטאב בכל צ'יפ + מצב ריק עם כניסה לעולמות. */
    /* כרטיס עוטף — תואם לשאר כרטיסי הסקירה (hero / תובנות) כדי שלא ייראה "מרחף" */
    .ov-home-card {
      position: relative; overflow: hidden;
      background: var(--card-bg); border: 1px solid var(--card-border);
      border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow-md);
    }
    /* רצועת accent עליונה 4px — זהה לכרטיס התובנות */
    .ov-home-card::before {
      content: '';
      position: absolute; top: 0; inset-inline: 0; height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--purple, #bc8cff));
      z-index: 2;
    }
    .ov-home-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
    .ov-home-card-ico {
      width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
      background: var(--accent-dim); border: 1px solid var(--accent-border);
    }
    .ov-home-card-title { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }

    .ov-home { display: flex; flex-direction: column; gap: 16px; }
    .qa-home-ico { font-size: 14px; opacity: .8; flex-shrink: 0; }
    .ov-home .qa-chip-main { align-items: center; }

    .ov-home-empty-title { font-size: 13px; color: var(--text2); margin-bottom: 12px; }
    .ov-home-tiles {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
    }
    /* אריחי הכניסה יושבים בתוך הכרטיס — מראה משוקע (input-bg), לא כרטיס-בתוך-כרטיס */
    .ov-home-tile {
      display: flex; align-items: flex-start; gap: 11px; text-align: start;
      background: var(--input-bg); border: 1px solid var(--border2); border-radius: 12px;
      padding: 13px 14px; cursor: pointer; font-family: inherit; color: var(--text);
      transition: border-color .15s, background .15s, transform .15s;
    }
    .ov-home-tile:hover { border-color: var(--accent-border); background: var(--accent-dim); transform: translateY(-2px); }
    .ov-home-tile-ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
    .ov-home-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ov-home-tile-name { font-size: 14px; font-weight: 800; }
    .ov-home-tile-sub { font-size: 12px; color: var(--text3); line-height: 1.4; }

    /* ── INSIGHTS — קלין, רק נגיעת צבע באייקון + bar ── */
    .home-insights {
      position: relative;
      overflow: hidden;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 24px 26px 20px;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
    }

    /* רצועת accent עליונה 4px — זהה לכרטיסי ה-stat-card בשאר הטאבים */
    .home-insights::before {
      content: '';
      position: absolute;
      top: 0;
      inset-inline: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--purple, #bc8cff));
      z-index: 2;
    }

    .home-insights-head {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    .home-insights-icon {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: rgba(210, 153, 34, 0.12);
      border: 1px solid rgba(210, 153, 34, 0.25);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    .home-insights-title {
      color: var(--text);
    }

    .home-insights-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    /* ── KPI גיבור בראש הכרטיס המאוחד ── */
    .ov-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    .ov-hero-info { min-width: 0; }

    .ov-hero-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }

    .ov-hero-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, var(--accent-dim), rgba(88, 166, 255, 0.22));
      border: 1px solid var(--accent-border);
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .ov-hero-value {
      font-size: 42px;
      font-weight: 900;
      letter-spacing: -1.5px;
      line-height: 1;
      color: var(--text);
      margin-bottom: 7px;
      font-variant-numeric: tabular-nums;
    }

    .ov-hero-sub {
      font-size: 13px;
      color: var(--text2);
      font-weight: 500;
    }

    /* כותרת התובנות (צ'יפים) — מעל רשת הצ'יפים */
    .ov-chips-head {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin: 4px 0 12px;
    }

    /* ── בנטו — KPI + ויזואלים ── */
    .ov-bento {
      display: grid;
      gap: 14px;
      margin-bottom: 16px;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      grid-template-areas:
        "kpi   donut"
        "week  trend";
    }

    .ov-bento-kpi {
      grid-area: kpi;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--input-bg, rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 20px 16px;
    }

    [data-theme="light"] .ov-bento-kpi { background: rgba(0,0,0,0.015); }
    .ov-bento-donut { grid-area: donut; }
    .ov-bento-week  { grid-area: week; }
    .ov-bento-trend { grid-area: trend; }

    /* כניסה מדורגת — כל אריח נכנס מעט אחרי קודמו */
    .ov-bento > * { animation: ov-fade-in 0.5s ease-out both; }
    .ov-bento-donut { animation-delay: 0.06s; }
    .ov-bento-week  { animation-delay: 0.12s; }
    .ov-bento-trend { animation-delay: 0.18s; }

    @media (max-width: 760px) {
      .ov-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kpi" "donut" "week" "trend";
      }
    }

    /* ── התאמות מובייל לכרטיס המרכזי — פחות padding/אוויר, תוכן צמוד למעלה ── */
    @media (max-width: 600px) {
      .home-insights { padding: 18px 14px 16px; }
      .ov-bento { gap: 12px; }
      /* במובייל אין עוגה לצד ה-KPI, אז אין צורך למרכז אנכית — צמוד למעלה */
      .ov-bento-kpi { justify-content: flex-start; padding: 16px; }
      .ov-hero { margin-bottom: 12px; }
      .ov-hero-value { font-size: 36px; }
      .ov-kpi-meta { margin-top: 12px; padding-top: 12px; }
      .ov-viz-card { padding: 14px 14px 12px; }
      .ov-donut-wrap { height: 160px; }
    }

    .ov-viz-card {
      background: var(--input-bg, rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px 12px;
      display: flex;
      flex-direction: column;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    /* hover מעודן — הרמה קלה + הדגשת מסגרת (זהה ל-chart-card/stat-card) */
    .ov-viz-card:hover {
      transform: translateY(-2px);
      border-color: var(--accent-border, var(--accent));
      box-shadow: var(--shadow-md);
    }

    /* כרטיסי שבוע/מגמה — הקנבס ממלא את הגובה הזמין כך שהעמודות
       יורדות עד תחתית הכרטיס (במקום לצוף גבוה ליד כרטיס העוגה הגבוה) */
    .ov-viz-card:not(#ovDonutCard) .ov-viz-canvas-wrap { flex: 1; }

    [data-theme="light"] .ov-viz-card { background: rgba(0,0,0,0.015); }

    /* ── מדדים משניים — שורת מטא עדינה (inline), נקייה בלי קופסאות ── */
    .ov-kpi-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 20px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .ov-kpi-meta-item {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      font-size: 13px;
      line-height: 1.4;
      cursor: help;
    }

    .ov-kpi-meta-icon { font-size: 13px; align-self: center; }

    .ov-kpi-meta-label {
      font-weight: 600;
      color: var(--text2);
    }

    .ov-kpi-meta-value {
      font-weight: 800;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .ov-viz-title {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text2);
      margin-bottom: 12px;
      text-align: center;
    }

    .ov-viz-canvas-wrap {
      position: relative;
      min-height: 130px;
    }

    /* עוגה — גובה קבוע (בלי flex, שגרם ללולאת-משוב עם Chart.js ולתפיחה).
       הכרטיס נשאר בגובה טבעי נמוך, כך שלא נוצר רווח גדול מול בלוק ה-KPI. */
    .ov-donut-wrap {
      position: relative;
      height: 150px;
      width: 100%;
    }

    .ov-donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      line-height: 1.1;
    }

    /* מרכז העוגה — אחוז המקור הדומיננטי (לא סך הדקות) */
    .ov-donut-pct {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.5px;
      line-height: 1;
    }

    .ov-donut-pct-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
      margin-top: 3px;
      text-align: center;
      max-width: 80px;
    }

    .ov-viz-legend {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ov-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text);
    }

    .ov-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ov-legend-label { font-weight: 600; }

    .ov-legend-val {
      margin-inline-start: auto;
      color: var(--text2);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    /* ── MOBILE ── */
    @media (max-width: 720px) {
      .home-hero-inner { padding: 20px 18px 18px; }
      .home-hero-row { gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
      .home-hero-emoji { font-size: 36px; }
      .home-hero-greeting { font-size: 18px; }
      .home-hero-date { font-size: 12px; }
      .home-hero-clock { font-size: 16px; padding: 6px 11px; }
      .home-hero-pills { gap: 6px; }
      .home-pill { padding: 5px 10px; gap: 6px; }
      .home-pill-label { font-size: 8.5px; }
      .home-pill-value { font-size: 11.5px; }

      .home-metric-card { padding: 22px 20px 18px; border-radius: 14px; }
      .home-metric-value { font-size: 36px; }

      .ov-home-tiles { grid-template-columns: 1fr; }
    }

    /* ── Beta tag — לציון תכונות ניסיוניות ── */
    .beta-tag {
      display: inline-flex;
      align-items: center;
      padding: 1px 7px;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.4px;
      background: var(--orange-dim, rgba(255, 155, 84, 0.18));
      color: var(--orange, #ff9b54);
      border: 1px solid var(--orange-border, rgba(255, 155, 84, 0.35));
      border-radius: 999px;
      vertical-align: middle;
      margin-inline-start: 6px;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════
       ONBOARDING — מנגנון הדרכה / סיורים
    ══════════════════════════════════════════ */

    /* ── מנוע סיורים מעוגן (spotlight + popover) ── */
    .tour-root {
      position: fixed;
      inset: 0;
      z-index: 9000;
      /* תופס קליקים — חוסם אינטראקציה עם הדף מתחת בזמן הסיור */
    }

    /* ארבעה פאנלים מעמעמים סביב החור — זול ל-raster (במקום box-shadow ענק) */
    .tour-dim {
      position: fixed;
      background: rgba(0, 0, 0, 0.62);
      pointer-events: auto;
      transition: left .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1),
                  width .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1);
    }
    html[data-theme="light"] .tour-dim { background: rgba(15, 23, 42, 0.42); }

    .tour-spotlight {
      position: fixed;
      border-radius: 12px;
      border: 2px solid var(--accent);
      box-shadow: 0 0 22px 4px rgba(88, 166, 255, 0.45);
      pointer-events: none;
      transition: left .28s cubic-bezier(.4, 0, .2, 1), top .28s cubic-bezier(.4, 0, .2, 1),
                  width .28s cubic-bezier(.4, 0, .2, 1), height .28s cubic-bezier(.4, 0, .2, 1);
    }
    html[data-theme="light"] .tour-spotlight { box-shadow: 0 0 22px 4px rgba(37, 99, 235, 0.3); }
    .tour-root.tour-floating .tour-spotlight { display: none; }

    .tour-popover {
      position: fixed;
      width: 332px;
      max-width: calc(100vw - 24px);
      background: var(--bg2);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      padding: 20px 18px 16px;
      color: var(--text);
      pointer-events: auto;
      /* ללא transition על מיקום — המעבר בין שלבים נעשה ב-fade: ה-popover מתפוגג,
         קופץ למיקום החדש בזמן שהוא שקוף, ומופיע מחדש (מונע "טקסט במיקום הישן"). */
      transition: opacity .16s ease, transform .16s ease;
    }
    .tour-popover.te-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }

    .tour-pop-close {
      position: absolute;
      top: 10px;
      left: 12px;
      background: none;
      border: none;
      color: var(--text3);
      font-size: 16px;
      line-height: 1;
      padding: 4px;
      cursor: pointer;
    }
    .tour-pop-close:hover { color: var(--text); }
    .tour-pop-illustration { font-size: 30px; line-height: 1; margin-bottom: 8px; }
    .tour-pop-step { font-size: 11.5px; font-weight: 700; color: var(--text3); letter-spacing: .3px; }
    .tour-pop-title { font-size: 17px; font-weight: 800; margin: 3px 0 8px; line-height: 1.35; }
    .tour-pop-body { font-size: 13.5px; line-height: 1.65; color: var(--text2); }
    .tour-pop-body ul { margin: 7px 0 0; padding-inline-start: 18px; }
    .tour-pop-body li { margin-bottom: 4px; }
    .tour-pop-body code {
      background: var(--input-bg); border-radius: 4px; padding: 1px 5px;
      font-family: monospace; font-size: 12px; color: var(--accent);
    }

    .tour-pop-dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0 14px; }
    .tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); transition: .2s; }
    .tour-dot.done { background: var(--accent-border); }
    .tour-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }

    .tour-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .tour-pop-nav { display: flex; gap: 8px; }
    .tour-pop-btn {
      border-radius: 8px; padding: 8px 15px; font-size: 13px; font-weight: 600;
      font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: .15s;
    }
    .tour-pop-skip { background: none; color: var(--text3); padding: 8px 4px; }
    .tour-pop-skip:hover { color: var(--text2); }
    .tour-pop-prev { background: var(--input-bg); border-color: var(--border2); color: var(--text2); }
    .tour-pop-prev:hover { color: var(--text); }
    .tour-pop-next { background: var(--accent); color: #fff; }
    .tour-pop-next:hover { filter: brightness(1.07); }

    /* חצים — מצביעים מה-popover אל ה-spotlight */
    .tour-pop-arrow { position: absolute; width: 0; height: 0; }
    .tour-pop-arrow.arrow-bottom {
      top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent;
      border-bottom: 8px solid var(--bg2); transform: translateX(-50%);
    }
    .tour-pop-arrow.arrow-top {
      bottom: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent;
      border-top: 8px solid var(--bg2); transform: translateX(-50%);
    }
    /* החצים מחושבים במיקום פיזי במנוע — לכן left/right פיזיים (לא לוגיים) */
    .tour-pop-arrow.arrow-start { /* popover מימין לאלמנט → חץ בקצה שמאל, מצביע שמאלה */
      left: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
      border-right: 8px solid var(--bg2); transform: translateY(-50%);
    }
    .tour-pop-arrow.arrow-end { /* popover משמאל לאלמנט → חץ בקצה ימין, מצביע ימינה */
      right: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
      border-left: 8px solid var(--bg2); transform: translateY(-50%);
    }

    /* ── מודאל פתיחה צף ── */
    .welcome-tour-overlay {
      position: fixed; inset: 0; z-index: 9100;
      display: flex; align-items: center; justify-content: center; padding: 16px;
      background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity .25s;
    }
    .welcome-tour-overlay.open { opacity: 1; }
    .welcome-tour-card {
      width: 450px; max-width: 100%; position: relative; text-align: center;
      background: var(--bg2); border: 1px solid var(--card-border); border-radius: 20px;
      box-shadow: var(--shadow-lg); padding: 32px 28px 22px;
      transform: translateY(14px) scale(.97); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }
    .welcome-tour-overlay.open .welcome-tour-card { transform: none; }
    .welcome-tour-x {
      position: absolute; top: 14px; left: 16px;
      background: none; border: none; color: var(--text3); font-size: 17px; cursor: pointer; padding: 4px;
    }
    .welcome-tour-x:hover { color: var(--text); }
    .welcome-tour-illus { font-size: 50px; line-height: 1; }
    .welcome-tour-title { font-size: 22px; font-weight: 800; margin: 12px 0 12px; }
    .welcome-tour-text { font-size: 14.5px; line-height: 1.7; color: var(--text2); text-align: start; }
    .welcome-tour-text .wt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
    .welcome-tour-text .wt-list li { background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; }
    .welcome-tour-stage.wt-anim { animation: wtSlide .3s ease; }
    @keyframes wtSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

    .welcome-tour-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 18px; }
    .welcome-tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: .2s; }
    .welcome-tour-dot.active { background: var(--accent); width: 22px; border-radius: 4px; }

    .welcome-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .welcome-tour-never { background: none; border: none; color: var(--text3); font-size: 12.5px; cursor: pointer; font-family: inherit; }
    .welcome-tour-never:hover { color: var(--text2); }
    .welcome-tour-nav { display: flex; gap: 8px; }
    .welcome-tour-btn {
      border-radius: 9px; padding: 10px 17px; font-size: 13.5px; font-weight: 600;
      font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: .15s;
    }
    .welcome-tour-btn.ghost { background: var(--input-bg); border-color: var(--border2); color: var(--text2); }
    .welcome-tour-btn.ghost:hover { color: var(--text); }
    .welcome-tour-btn.primary { background: var(--accent); color: #fff; }
    .welcome-tour-btn.primary:hover { filter: brightness(1.07); }

    /* ── כרטיס פתיחה קצר לטאב (לפני הסיור המודרך) ── */
    .tab-intro-card { width: 400px; padding: 30px 26px 22px; }
    .tab-intro-text {
      font-size: 14.5px; line-height: 1.7; color: var(--text2);
      text-align: center; margin-top: 6px;
    }
    .tab-intro-foot {
      display: flex; gap: 10px; justify-content: center; margin-top: 24px;
    }
    .tab-intro-foot .welcome-tour-btn { padding: 10px 20px; }

    /* ════════════════════════════════════════
       QUICK ACCESS — טעינות אחרונות + קיצורי דרך
    ════════════════════════════════════════ */
    /* שכבה אחת שקטה מתחת לכפתור הטעינה — בלי קופסאות מקוננות, צ'יפים שטוחים */
    .qa-area {
      display: flex; flex-direction: column; gap: 15px;
      margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
    }
    .qa-row { display: flex; flex-direction: column; gap: 9px; }
    .qa-row-head { display: flex; align-items: center; gap: 10px; min-height: 20px; }
    .qa-row-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 700; color: var(--text2);
    }
    .qa-row-label .qa-ico { font-size: 12px; opacity: .85; }
    .qa-save {
      margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px;
      background: none; border: none; color: var(--text3); font-family: inherit;
      font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 7px; border-radius: 7px; transition: .15s;
    }
    .qa-save:hover { color: var(--accent); background: var(--accent-dim); }
    .qa-empty { font-size: 12px; color: var(--text3); }
    .qa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .qa-chip { display: inline-flex; align-items: center; border-radius: 9px; transition: background .15s, border-color .15s; }
    .qa-shortcut { background: var(--input-bg); }
    .qa-recent { border: 1px solid var(--border2); }
    .qa-chip-main {
      display: inline-flex; align-items: baseline; gap: 7px; max-width: 240px;
      padding: 6px 11px; background: none; border: none; font-family: inherit;
      font-size: 13px; color: var(--text); cursor: pointer; transition: color .15s;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .qa-chip-main:hover { color: var(--accent); }
    .qa-chip-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
    .qa-chip-path { font-size: 11px; font-weight: 600; color: var(--text3); direction: ltr; }
    .qa-chip-lead { overflow: hidden; text-overflow: ellipsis; }
    .qa-chip-ago { font-size: 11px; color: var(--text3); white-space: nowrap; }
    /* פעולות משניות — דהויות, מתבהרות ב-hover (זמינות גם במגע) */
    .qa-chip-act {
      background: none; border: none; color: var(--text3); cursor: pointer;
      font-size: 11px; padding: 4px 7px; border-radius: 7px; opacity: .5; transition: .15s;
    }
    .qa-chip:hover .qa-chip-act { opacity: .85; }
    .qa-chip-act:hover { opacity: 1; color: var(--accent); background: var(--accent-dim); }
    .qa-chip-del:hover { color: var(--red); background: var(--red-dim); }

    /* מודאל מתן שם לקיצור */
    .qa-name-box {
      width: 390px; max-width: 100%; background: var(--bg2); border: 1px solid var(--card-border);
      border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
    }
    .qa-name-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px; border-bottom: 1px solid var(--border);
    }
    .qa-name-title { font-size: 15px; font-weight: 800; color: var(--text); }
    .qa-name-close { background: none; border: none; color: var(--text3); font-size: 17px; cursor: pointer; padding: 2px; }
    .qa-name-close:hover { color: var(--text); }
    .qa-name-body { padding: 18px; }
    .qa-name-path {
      display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 10px 13px;
      background: var(--input-bg); border: 1px solid var(--border2); border-radius: 10px;
    }
    .qa-name-path-label { font-size: 11px; font-weight: 700; color: var(--text3); }
    .qa-name-path-val { font-size: 14px; font-weight: 800; color: var(--accent); }
    .qa-name-lbl { display: block; font-size: 11px; font-weight: 800; color: var(--text3); margin-bottom: 7px; }
    .qa-name-input {
      width: 100%; padding: 11px 13px; background: var(--input-bg); border: 1.5px solid var(--border2);
      border-radius: 11px; font-size: 15px; font-weight: 600; color: var(--text); font-family: inherit; outline: none;
    }
    .qa-name-input:focus { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-dim); }
    .qa-name-hint { font-size: 11.5px; color: var(--text3); margin-top: 8px; line-height: 1.5; }
    .qa-name-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 0 18px 18px; }
    .qa-name-btn {
      padding: 9px 18px; border-radius: 10px; font-family: inherit; font-size: 13.5px;
      font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: .15s;
    }
    .qa-name-btn.ghost { background: var(--input-bg); border-color: var(--border2); color: var(--text2); }
    .qa-name-btn.ghost:hover { color: var(--text); }
    .qa-name-btn.primary { background: var(--accent); color: #fff; }
    .qa-name-btn.primary:hover { filter: brightness(1.07); }
    .qa-save {
      align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 15px; background: var(--input-bg); border: 1.5px dashed var(--border2);
      border-radius: 11px; font-family: inherit; font-size: 12.5px; font-weight: 700;
      color: var(--text2); cursor: pointer; transition: .15s;
    }
    .qa-save:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }

    /* ════════════════════════════════════════
       EXT BROWSER — דפדפן שלוחות ("עיון")
    ════════════════════════════════════════ */
    /* שורת נתיב: שדה הקלט + כפתור העיון זה לצד זה (מתחת ללייבל) */
    .dt-path-row { display: flex; gap: 10px; align-items: stretch; }
    .dt-path-row .iw { flex: 1; min-width: 0; }

    .btn-ext-browse {
      display: inline-flex; align-items: center; gap: 7px; align-self: stretch;
      padding: 0 18px; flex-shrink: 0; white-space: nowrap;
      background: var(--input-bg); border: 1.5px solid var(--border2);
      border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 700;
      color: var(--text2); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    }
    .btn-ext-browse:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }

    .eb-box {
      width: 540px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column;
      background: var(--bg2); border: 1px solid var(--card-border); border-radius: 18px;
      box-shadow: var(--shadow-lg); overflow: hidden;
    }
    .eb-header {
      display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
    }
    .eb-header-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .eb-header-icon {
      width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; font-size: 22px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--accent-dim), rgba(124, 58, 237, 0.08));
      border: 1px solid var(--accent-border);
    }
    .eb-title { font-size: 16px; font-weight: 800; color: var(--text); }
    .eb-sub { font-size: 12.5px; color: var(--text3); margin-top: 2px; }
    .eb-close {
      background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer;
      padding: 4px; flex-shrink: 0; line-height: 1;
    }
    .eb-close:hover { color: var(--text); }

    .eb-crumbs {
      display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
      padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg3);
      font-size: 13px;
    }
    .eb-crumb {
      background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 700;
      color: var(--accent); cursor: pointer; padding: 3px 7px; border-radius: 7px;
    }
    .eb-crumb:hover { background: var(--accent-dim); }
    .eb-crumb.current { color: var(--text); cursor: default; }
    .eb-crumb.current:hover { background: none; }
    .eb-crumb-sep { color: var(--text3); font-size: 12px; }

    .eb-body { padding: 14px 18px 18px; overflow-y: auto; }

    .eb-up {
      width: 100%; text-align: start; padding: 9px 12px; margin-bottom: 10px;
      background: var(--input-bg); border: 1px solid var(--border2); border-radius: 10px;
      font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text2); cursor: pointer;
    }
    .eb-up:hover { color: var(--text); border-color: var(--accent-border); }

    .eb-current {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
      background: var(--input-bg); border: 1px solid var(--border2);
    }
    .eb-current.match { background: var(--accent-dim); border-color: var(--accent-border); }
    .eb-current-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .eb-current-label { font-size: 11px; font-weight: 700; color: var(--text3); }
    .eb-current-name { font-size: 14px; font-weight: 800; color: var(--text); }
    .eb-current-note { font-size: 11.5px; color: var(--text3); flex-shrink: 0; text-align: end; }

    .eb-list { display: flex; flex-direction: column; gap: 7px; }
    .eb-row {
      display: flex; align-items: center; gap: 11px; padding: 11px 13px;
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
      cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
    }
    .eb-row:hover { border-color: var(--accent-border); background: var(--bg3); }
    .eb-row:active { transform: scale(.995); }
    .eb-row.match { background: var(--accent-dim); border-color: var(--accent-border); }
    .eb-row-icon { font-size: 19px; flex-shrink: 0; width: 24px; text-align: center; }
    .eb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .eb-row-name { font-size: 14px; font-weight: 800; color: var(--text); }
    .eb-row-title { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .eb-row-go { font-size: 12.5px; font-weight: 700; color: var(--text3); flex-shrink: 0; }
    .eb-row:hover .eb-row-go { color: var(--accent); }

    .eb-type-badge {
      flex-shrink: 0; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
      background: var(--input-bg); border: 1px solid var(--border2); color: var(--text3);
    }
    .eb-type-badge.match { background: var(--accent); border-color: var(--accent); color: #fff; }

    .eb-load {
      flex-shrink: 0; padding: 7px 15px; border-radius: 9px; font-family: inherit;
      font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border2);
      background: var(--input-bg); color: var(--text2); transition: .15s;
    }
    .eb-load:hover { color: var(--text); }
    .eb-load.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
    .eb-load.primary:hover { filter: brightness(1.07); }

    .eb-empty { padding: 28px 12px; text-align: center; color: var(--text3); font-size: 13.5px; }

    .eb-state {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      padding: 42px 16px; color: var(--text2); font-size: 14px; text-align: center;
    }
    .eb-state-icon { font-size: 34px; }
    .eb-state-err { color: var(--text2); }
    .eb-spinner {
      width: 38px; height: 38px; border-radius: 50%;
      border: 3px solid var(--border2); border-top-color: var(--accent);
      animation: spin 0.9s linear infinite;
    }
    .eb-retry {
      padding: 8px 18px; border-radius: 9px; border: 1px solid var(--accent-border);
      background: var(--accent-dim); color: var(--accent); font-family: inherit;
      font-size: 13px; font-weight: 700; cursor: pointer;
    }
    .eb-retry:hover { background: var(--accent); color: #fff; }

    @media (max-width: 640px) {
      .btn-ext-browse { padding: 0 14px; }
      .btn-ext-browse .btn-text { display: none; }   /* אייקון בלבד כשצר */
      .eb-box { width: 100%; max-height: 88vh; }
    }

    /* ── תפריט "?" ── */
    .tour-menu-overlay {
      position: fixed; inset: 0; z-index: 9100;
      display: flex; align-items: center; justify-content: center; padding: 16px;
      background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .2s;
    }
    .tour-menu-overlay.open { opacity: 1; }
    .tour-menu-panel {
      width: 440px; max-width: 100%; max-height: 86vh; overflow: auto;
      background: var(--bg2); border: 1px solid var(--card-border); border-radius: 18px;
      box-shadow: var(--shadow-lg); transform: scale(.97); transition: transform .2s;
    }
    .tour-menu-overlay.open .tour-menu-panel { transform: none; }
    .tour-menu-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 20px 22px 14px; border-bottom: 1px solid var(--border);
    }
    .tour-menu-title { font-size: 18px; font-weight: 800; }
    .tour-menu-sub { font-size: 12.5px; color: var(--text3); margin-top: 3px; }
    .tour-menu-close { background: none; border: none; color: var(--text3); font-size: 17px; cursor: pointer; padding: 4px; }
    .tour-menu-close:hover { color: var(--text); }
    .tour-menu-list { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
    .tour-menu-sep { font-size: 11.5px; font-weight: 700; color: var(--text3); margin: 8px 6px 2px; }
    .tour-menu-item {
      display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
      background: var(--input-bg); border: 1px solid var(--border2); border-radius: 12px;
      padding: 12px 14px; cursor: pointer; color: var(--text); font-family: inherit; transition: .15s;
    }
    .tour-menu-item:hover { border-color: var(--accent-border); background: var(--accent-dim); }
    .tour-menu-item.featured { background: var(--accent-dim); border-color: var(--accent-border); }
    .tour-menu-item-icon { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
    .tour-menu-item-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .tour-menu-item-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .tour-menu-seen { font-size: 11px; color: var(--green); font-weight: 600; }
    .tour-menu-item-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .tour-menu-item-go { color: var(--accent); font-weight: 700; font-size: 13px; flex-shrink: 0; }
    .tour-menu-foot { padding: 4px 16px 16px; }
    .tour-menu-report {
      display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
      background: var(--input-bg); border: 1px solid var(--border2); border-radius: 12px;
      padding: 12px 14px; cursor: pointer; color: var(--text); transition: .15s;
    }
    .tour-menu-report:hover { border-color: var(--accent-border); background: var(--accent-dim); }
    .tour-menu-report-icon { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
    .tour-menu-report-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .tour-menu-report-title { font-size: 14px; font-weight: 700; }
    .tour-menu-report-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .tour-menu-report-go { color: var(--accent); font-weight: 700; font-size: 15px; flex-shrink: 0; }

    @media (max-width: 560px) {
      .tour-popover { width: calc(100vw - 24px); max-height: 78vh; overflow-y: auto; }
      .tour-pop-title { font-size: 16px; }
      .tour-pop-body { font-size: 13px; }
      .welcome-tour-card { padding: 26px 20px 18px; }
      .welcome-tour-illus { font-size: 42px; }
      .welcome-tour-title { font-size: 19px; }
      .tour-menu-panel { max-height: 80vh; }
    }

    /* ── באנר "מצב הדגמה" — מעל שכבת הסיור כדי שיישאר גלוי ── */
    .demo-banner {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      padding: 8px 16px; font-size: 13px; font-weight: 700; text-align: center;
      color: #5a3a00; background: linear-gradient(90deg, #ffd36b, #ffb938);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }
    .demo-banner-dot {
      width: 9px; height: 9px; border-radius: 50%; background: #d6361f;
      box-shadow: 0 0 0 0 rgba(214, 54, 31, 0.6); animation: demoPulse 1.4s infinite;
      flex-shrink: 0;
    }
    @keyframes demoPulse {
      0%   { box-shadow: 0 0 0 0 rgba(214, 54, 31, 0.6); }
      70%  { box-shadow: 0 0 0 7px rgba(214, 54, 31, 0); }
      100% { box-shadow: 0 0 0 0 rgba(214, 54, 31, 0); }
    }

    /* ── פריט "עוד" בסרגל הניווט (מובייל בלבד) + גיליון פעולות תחתון ── */
    .app-nav-more { display: none; }   /* במחשב מוסתר — הפעולות בכרטיס הצד */

    .m-sheet-overlay {
      position: fixed; inset: 0; z-index: 9200;
      display: flex; align-items: flex-end;
      background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .2s;
    }
    .m-sheet-overlay.open { opacity: 1; }
    .m-sheet {
      width: 100%;
      background: var(--bg2);
      border-top: 1px solid var(--card-border);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
      padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }
    .m-sheet-overlay.open .m-sheet { transform: none; }
    .m-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border2); margin: 4px auto 12px; }
    .m-sheet-profile {
      display: flex; align-items: center; gap: 12px;
      padding: 4px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
    }
    .m-sheet-avatar {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800; background: var(--accent-dim); color: var(--accent);
    }
    .m-sheet-name { font-size: 15px; font-weight: 700; color: var(--text); }
    .m-sheet-sys { font-size: 12.5px; color: var(--text3); }
    .m-sheet-item {
      display: flex; align-items: center; gap: 14px; width: 100%; text-align: start;
      background: none; border: none; border-radius: 12px;
      padding: 14px 10px; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--text);
    }
    .m-sheet-item:active { background: var(--input-bg); }
    .m-sheet-item-icon { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
    .m-sheet-item.danger { color: var(--red); }

/* ════════ דוח האזנות (playback tab) — מוזג מ-playback-listeners-tab ════════ */
    /* דוח האזנות — גריד הסיכום ממלא את השורה יפה בכל מספר כרטיסים (4 או 5) */
    #pbStatsGrid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

    /* דוח האזנות — שורת הסינון עולה לראש הדשבורד (מתחת לכרטיס הקובץ) ומשפיעה על כל התצוגה */
    #pbDashboard { display: flex; flex-direction: column; }
    #pbDashboard > * { order: 2; }
    #pbDashboard > .pb-summary-card { order: 0; }
    #pbDashboard > #pbFiltersCard { order: 1; }

    }

    /* ══════════════════════════════════════════
       PLAYBACK TAB — דוח האזנות לקובץ
       רוב הקומפוננטות נשענות על אותם dialect של עיצוב (.api-field/.iw/.ii/.fchip/.dt-scan-btn)
       שמשמשים בטאבי דוח שיחות וקבלת נתונים. ה-overrides כאן נוגעים רק במה שייחודי
       לטאב — file picker עם dropdown, summary card לקובץ, וקטעי כיסוי.
    ══════════════════════════════════════════ */

    /* ── בחירת קובץ — רשת כרטיסים (במקום רשימה נפתחת) ── */
    .pb-files-section {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* בחירת קובץ במודאל (דוח האזנות) */
    .pb-files-modal-box {
      width: 720px; max-width: 100%; max-height: 85vh;
      display: flex; flex-direction: column; overflow: hidden;
      background: var(--bg2); border: 1px solid var(--card-border);
      border-radius: 18px; box-shadow: var(--shadow-lg);
    }
    .pb-files-modal-box .pb-files-section { gap: 0; overflow-y: auto; min-height: 0; }
    .pb-files-modal-box .pb-files-head {
      position: sticky; top: 0; z-index: 2;
      padding: 16px 20px; margin: 0; background: var(--bg2);
      border-bottom: 1px solid var(--border);
    }
    .pb-files-modal-box .pb-files-grid { margin: 0; padding: 16px 20px 0; }
    .pb-files-modal-box .pb-files-empty { padding: 28px 20px; text-align: center; color: var(--text3); }
    .pb-files-modal-box .pb-grid-player { margin: 14px 20px 4px; }
    .pb-files-modal-close {
      background: none; border: none; color: var(--text3); font-size: 17px;
      cursor: pointer; padding: 4px; line-height: 1; flex-shrink: 0;
    }
    .pb-files-modal-close:hover { color: var(--text); }

    .pb-files-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pb-files-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.2px;
    }

    .pb-files-title-icon { font-size: 17px; }

    .pb-field-count {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      padding: 2px 9px;
      border-radius: 20px;
    }

    .pb-files-search {
      position: relative;
      flex: 1 1 200px;
      min-width: 140px;
    }

    .pb-files-search .ii {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      pointer-events: none;
      opacity: 0.65;
    }

    .pb-files-search input {
      width: 100%;
      padding: 10px 38px 10px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 11px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      font-family: inherit;
      direction: rtl;
      transition: var(--transition);
    }

    .pb-files-search input::placeholder { color: var(--text3); font-weight: 400; }

    .pb-files-search input:focus {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .pb-files-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .pb-files-sort-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }

    .pb-files-sort-ico {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      pointer-events: none;
      opacity: 0.65;
    }

    .pb-files-sort {
      appearance: none;
      -webkit-appearance: none;
      padding: 10px 34px 10px 14px;
      background: var(--input-bg);
      border: 1.5px solid var(--border2);
      border-radius: 11px;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      min-width: 168px;
    }

    .pb-files-sort:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .pb-files-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .pb-file-card {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 14px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 14px;
      cursor: pointer;
      text-align: start;
      font-family: inherit;
      position: relative;
      transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .pb-file-card:hover {
      transform: translateY(-2px);
      border-color: var(--accent-border, var(--accent));
      box-shadow: var(--shadow-md);
    }

    .pb-file-card-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 11px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .pb-file-card-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .pb-file-card-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      direction: ltr;
      text-align: start;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pb-file-card-dur {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text3);
      font-variant-numeric: tabular-nums;
    }

    .pb-file-card-tag {
      align-self: flex-start;
      font-size: 10px;
      font-weight: 700;
      color: var(--purple, #bc8cff);
      background: rgba(188, 140, 255, 0.14);
      padding: 1px 7px;
      border-radius: 20px;
    }

    .pb-file-card-check {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .pb-file-card-active {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .pb-file-card-active .pb-file-card-check {
      opacity: 1;
      transform: scale(1);
    }

    .pb-files-empty {
      padding: 28px 20px;
      text-align: center;
      color: var(--text3);
      font-size: 13.5px;
      background: var(--card-bg);
      border: 1px dashed var(--border2);
      border-radius: 14px;
    }

    /* כפתור נגן/טקסט בכרטיס */
    .pb-file-card-play {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid var(--accent-border);
      background: var(--accent-dim);
      color: var(--accent);
      cursor: pointer;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    }

    .pb-file-card-play:hover {
      background: var(--accent);
      color: #fff;
      transform: scale(1.08);
    }

    /* כרטיס שמתנגן כרגע */
    .pb-file-card-playing {
      border-color: var(--green);
      background: rgba(63, 185, 80, 0.08);
    }

    .pb-file-card-playing .pb-file-card-play {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    /* נגן/טקסט משותף — צף בתחתית המסך (לא דוחף את התוכן) */
    .pb-grid-player {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 240px;            /* רוחב ה-sidebar בדסקטופ — הנגן לא מכסה אותו */
      z-index: 150;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-bottom: none;
      border-radius: 16px 16px 0 0;
      padding: 14px 18px 16px;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
      animation: pb-player-fade 0.22s ease-out;
    }

    /* פס accent עליון — זהה לשפה הכללית של הכרטיסים */
    .pb-grid-player::before {
      content: '';
      position: absolute;
      top: 0;
      inset-inline: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--purple, #bc8cff));
      border-radius: 16px 16px 0 0;
    }

    @keyframes pb-player-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* מרווח תחתון כשהנגן הצף פעיל — כדי שסוף התוכן לא יוסתר מאחוריו */
    body.pb-player-open .app-main { padding-bottom: 180px; }

    @media (max-width: 1024px) { .pb-grid-player { right: 64px; } }
    @media (max-width: 640px) {
      .pb-grid-player {
        right: 0;
        bottom: calc(71px + env(safe-area-inset-bottom, 0px));  /* מעל ה-bottom-nav */
      }
      body.pb-player-open .app-main { padding-bottom: 0; }       /* במובייל הנגן מעל ה-nav, אין צורך */
    }

    .pb-grid-player-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
    }

    .pb-grid-player-icon {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border-radius: 10px;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .pb-grid-player-name {
      flex: 1;
      min-width: 0;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: start;
    }

    .pb-grid-player-close {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text3);
      cursor: pointer;
      font-size: 14px;
      transition: background 0.15s, color 0.15s;
    }
    .pb-grid-player-close:hover { background: var(--red-dim); color: var(--red); }

    .pb-grid-audio {
      width: 100%;
      height: 40px;
      display: block;
      border-radius: 10px;
    }
    .pb-grid-audio::-webkit-media-controls-panel {
      background: var(--input-bg);
    }

    .pb-grid-tts {
      margin: 0;
      max-height: 260px;
      overflow: auto;
      background: var(--input-bg, rgba(255, 255, 255, 0.02));
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
      direction: rtl;
      font-family: inherit;
    }

    /* ── Options + run — laid out like .dt-manual-input ── */
    .pb-options {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 4px;
      padding: 10px 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .pb-options-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text2);
      cursor: pointer;
      user-select: none;
      font-weight: 500;
    }

    .pb-options-check input {
      width: 16px;
      height: 16px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .pb-run-btn {
      margin-inline-start: auto;
      max-width: 280px;
    }

    /* מפת האזנות לאורך הקובץ — קריאה חיה מעל הגרף */
    #pbPosMapSection { margin-bottom: 26px; }
    .pb-posmap-card .chart-container { cursor: pointer; }

    /* נגן משולב — פס פקדים דק צמוד לתחתית הגרף.
       פריסת LTR כמקובל בנגני מדיה: נגן/השהיה משמאל, הורדה מימין. */
    .pb-transport {
      display: flex;
      align-items: center;
      gap: 12px;
      direction: ltr;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    /* טקסט עברי בתוך הפס נשאר RTL לקריאוּת */
    .pb-transport-status,
    .pb-transport .pb-audio-dl { direction: rtl; }
    /* קבוצת הווליום + ההורדה נדחפת לימין; הנגן נשאר משמאל */
    .pb-volume {
      margin-inline-start: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .pb-volume-icon {
      background: none; border: none; padding: 0;
      cursor: pointer; line-height: 1; font-size: 1rem;
      color: var(--text2);
    }
    .pb-volume-range { width: 84px; accent-color: var(--accent); cursor: pointer; }
    .pb-transport-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      display: grid; place-items: center;
      font-size: 1rem; line-height: 1;
      color: #fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.5);
      transition: transform 0.12s ease;
    }
    .pb-transport-btn:hover { transform: scale(1.06); }
    .pb-transport-btn:active { transform: scale(0.96); }
    .pb-transport-time {
      font-variant-numeric: tabular-nums;
      color: var(--text2);
      font-size: 13px;
      font-weight: 600;
    }
    .pb-transport-status { font-size: 12px; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
    .pb-transport-status:empty { display: none; }
    .pb-transport .pb-audio-dl { margin-inline-start: 0; }
    .pb-spinner {
      display: inline-block;
      width: 13px; height: 13px;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: pbSpin 0.7s linear infinite;
    }
    @keyframes pbSpin { to { transform: rotate(360deg); } }
    .pb-seek-cancel {
      border: 1px solid var(--border2);
      background: var(--bg2);
      color: var(--text2);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 9px;
      border-radius: 999px;
      cursor: pointer;
      margin-inline-start: 2px;
    }
    .pb-seek-cancel:hover { color: var(--red); border-color: var(--red); }

    /* ── מודל פירוט מאזין ── */
    .pb-row-click { cursor: pointer; }
    .pb-row-click:hover { background: var(--row-hover); }
    .pb-detail-modal { max-width: 640px; width: 100%; }
    .pb-detail-chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .pb-detail-chip {
      flex: 1 1 120px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 13px;
      display: flex; flex-direction: column; gap: 3px;
    }
    .pb-detail-chip-label { font-size: 11px; color: var(--text3); }
    .pb-detail-chip-val { font-size: 1.05rem; font-weight: 800; color: var(--text); }
    .pb-detail-section { margin-top: 20px; }
    .pb-detail-section-title { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 10px; }
    .pb-ls-transport { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; direction: ltr; }
    .pb-ls-track {
      position: relative;
      height: 46px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      cursor: pointer;
    }
    /* כל מעבר = שכבה שקופה-למחצה; חפיפות (האזנה חוזרת) מצטברות וכהות יותר */
    .pb-ls-seg {
      position: absolute; top: 0; bottom: 0;
      background: rgba(124, 58, 237, 0.32);
    }
    html[data-theme="light"] .pb-ls-seg {
      background: rgba(124, 58, 237, 0.3);
    }
    .pb-ls-legend { font-size: 11px; color: var(--text3); margin-top: 7px; }
    /* אזור שלא נשמע — פסים אלכסוניים (בהירים, אלכסון לצד השני) */
    .pb-ls-gap {
      position: absolute; top: 0; bottom: 0;
      background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, var(--border) 6px, var(--border) 7px);
    }
    .pb-ls-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); }
    .pb-ls-head::after {
      content: ''; position: absolute; bottom: -3px; left: 50%;
      transform: translateX(-50%);
      width: 9px; height: 9px; border-radius: 50%; background: var(--red);
    }
    .pb-ls-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-top: 5px; direction: ltr; }
    .pb-detail-sessions { width: 100%; border-collapse: collapse; font-size: 13px; }
    .pb-detail-sessions th { text-align: right; color: var(--text3); font-weight: 600; padding: 7px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .pb-detail-sessions td { padding: 8px 9px; border-bottom: 1px solid var(--border); }
    .pb-sess-row { cursor: pointer; }
    .pb-sess-row:hover { background: var(--row-hover); }
    .pb-sess-row.pb-sess-open { background: var(--accent-dim); }
    .pb-sess-idx { white-space: nowrap; }
    .pb-sess-chev { display: inline-block; width: 12px; color: var(--text3); font-size: 10px; transition: transform 0.15s; }
    .pb-sess-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pb-act-arrow { color: var(--text3); margin: 0 4px; }

    /* פאנל פעולות הסשן (נפתח) */
    .pb-sess-actions > td { background: var(--bg3); padding: 0; }
    .pb-act-panel { padding: 12px 14px; }
    .pb-act-head { font-size: 11px; color: var(--text3); margin-bottom: 9px; }
    .pb-act-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
    .pb-act {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 11px;
      cursor: pointer;
      font-family: inherit; color: var(--text); text-align: right;
    }
    .pb-act:hover { border-color: var(--accent); background: var(--accent-dim); }
    .pb-act-play {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      display: grid; place-items: center; font-size: 10px; color: #fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
    }
    .pb-act-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .pb-act-range { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
    .pb-act-sub { font-size: 11px; color: var(--text3); }
    .pb-act-badge {
      margin-inline-start: auto; flex-shrink: 0;
      font-size: 10px; color: var(--text2);
      border: 1px solid var(--border2); border-radius: 999px;
      padding: 1px 7px; white-space: nowrap;
    }
    .pb-act-empty { color: var(--text3); font-size: 12px; }
    .pb-transport-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
    .pb-posmap-live {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 13px;
      font-weight: 700;
    }
    .pb-posmap-live:empty { display: none; }
    .pb-posmap-time { color: var(--text2); }
    .pb-posmap-metric {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid var(--border2);
    }
    .pb-pm-plays { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
    .pb-pm-uniq  { color: var(--purple); background: var(--purple-dim); border-color: var(--purple-border); }

    /* ── Enable-logging card (כפתור הפעלה אוטומטית) ── */
    .pb-enable-card {
      margin-top: 14px;
      padding: 16px 18px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
    }
    .pb-enable-icon {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      font-size: 22px;
      background: var(--bg2);
      border-radius: 12px;
    }
    .pb-enable-body { flex: 1; min-width: 0; }
    .pb-enable-title {
      font-size: 14.5px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 4px;
    }
    .pb-enable-sub {
      font-size: 12.5px;
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .pb-enable-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: filter .15s, opacity .15s;
    }
    .pb-enable-btn:hover:not(:disabled) { filter: brightness(1.08); }
    .pb-enable-btn:disabled { cursor: default; }

    /* מצב "כבר פעיל" — ירוק רך, כפתור מנוטרל */
    .pb-enable-card.is-active {
      background: rgba(34, 197, 94, 0.10);
      border-color: rgba(34, 197, 94, 0.35);
    }
    .pb-enable-card.is-active .pb-enable-icon { color: #16a34a; }
    .pb-enable-card.is-active .pb-enable-btn {
      background: transparent;
      color: #16a34a;
      border: 1px solid rgba(34, 197, 94, 0.5);
      font-weight: 700;
    }
    @media (max-width: 600px) {
      .pb-enable-btn { width: 100%; justify-content: center; }
    }

    /* ── Summary card (re-uses .tab-welcome + overrides for inline file info) ── */
    .pb-summary-card {
      margin-bottom: 22px;
    }

    .pb-summary-card .tab-welcome-hero {
      padding: 22px 28px;
      align-items: flex-start;
    }

    .pb-summary-card .tab-welcome-icon {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--accent-dim), var(--purple-dim));
      border: 1px solid var(--accent-border);
      border-radius: 16px;
      font-size: 30px;
      box-shadow: 0 6px 18px rgba(88, 166, 255, 0.18);
    }

    .pb-summary-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pb-summary-info .tab-welcome-title {
      direction: ltr;
      text-align: start;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 22px;
    }

    .pb-summary-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pb-summary-pills .home-pill-value {
      font-variant-numeric: tabular-nums;
    }

    /* Big "Play" CTA — distinct from generic .btn-api-load so it reads as a media control */
    .pb-play-cta {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
      border-radius: 999px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(88, 166, 255, 0.35);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
      letter-spacing: 0.2px;
    }

    .pb-play-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(88, 166, 255, 0.42);
    }

    .pb-play-cta:active {
      transform: translateY(0);
    }

    .pb-play-cta-icon {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      font-size: 11px;
      flex-shrink: 0;
    }

    .pb-play-cta.playing .pb-play-cta-icon {
      background: rgba(255, 255, 255, 0.32);
    }

    /* legacy compat — old .pb-summary-play-btn references */
    .pb-summary-play-btn { display: none; }

    /* Audio player — full-width media bar at the bottom of the summary card */
    .pb-audio-wrap {
      margin: 0;
      padding: 16px 28px 22px;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, var(--bg3) 0%, transparent 80%);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pb-audio-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .pb-audio-bar-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-dim);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      border-radius: 50%;
      font-size: 16px;
      flex-shrink: 0;
    }

    .pb-audio-wrap audio {
      flex: 1;
      min-width: 240px;
      max-width: 100%;
      height: 40px;
    }

    /* native audio controls — match dark/light surface */
    html[data-theme="dark"] .pb-audio-wrap audio { filter: invert(0.85) hue-rotate(180deg); }

    .pb-audio-dl {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      font-size: 13px;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .pb-audio-dl:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .pb-tts-text {
      width: 100%;
      padding: 14px 16px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 13.5px;
      line-height: 1.65;
      white-space: pre-wrap;
      max-height: 280px;
      overflow-y: auto;
      font-family: 'Heebo', sans-serif;
    }

    @media (max-width: 680px) {
      .pb-audio-wrap { padding: 14px 16px 18px; }
      .pb-audio-bar { gap: 10px; }
      .pb-audio-bar-icon { width: 34px; height: 34px; font-size: 14px; }
    }

    /* ── Chart empty state ── */
    .pb-chart-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 200px;
      color: var(--text3);
      font-size: 13px;
      font-style: italic;
    }

    /* ── Table row toggles ── */
    .pb-row-toggle {
      background: transparent;
      border: none;
      color: var(--text3);
      cursor: pointer;
      font-size: 10px;
      padding: 0 6px;
      margin-inline-end: 6px;
      transition: color 0.12s ease, transform 0.18s ease;
    }

    .pb-row-toggle:hover {
      color: var(--accent);
    }

    .pb-row-toggle.open {
      color: var(--accent);
    }

    .pb-row-toggle-spacer {
      display: inline-block;
      width: 16px;
      margin-inline-end: 6px;
    }

    .pb-row-expandable {
      cursor: pointer;
    }

    .pb-cell-phone {
      font-family: 'Courier New', monospace;
      font-variant-numeric: tabular-nums;
      direction: ltr;
      text-align: start;
      font-weight: 600;
    }

    .pb-cell-dur {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--accent);
    }

    .pb-cell-count {
      font-variant-numeric: tabular-nums;
    }

    .pb-count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 22px;
      padding: 0 8px;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      border-radius: 11px;
      font-size: 12px;
      font-weight: 800;
    }

    .pb-subrow {
      background: var(--row-even);
    }

    .pb-subrow td {
      padding: 6px 14px !important;
      font-size: 12.5px;
      color: var(--text2);
      border-top: none !important;
    }

    .pb-subrow-label {
      font-weight: 600;
      color: var(--text3);
    }

    .pb-sortable {
      cursor: pointer;
      user-select: none;
    }

    .pb-sortable:hover {
      color: var(--accent);
    }

    /* ── Coverage bar (table cell) ── */
    .pb-cell-cov {
      min-width: 130px;
    }

    .pb-cov-bar {
      display: inline-block;
      vertical-align: middle;
      width: 80px;
      height: 8px;
      background: var(--input-bg);
      border-radius: 4px;
      overflow: hidden;
      margin-inline-end: 8px;
      border: 1px solid var(--border);
    }

    .pb-cov-bar-fill {
      height: 100%;
      transition: width 0.3s ease;
    }

    .pb-cov-bar-fill.pb-cov-high { background: var(--green); }
    .pb-cov-bar-fill.pb-cov-mid  { background: var(--yellow); }
    .pb-cov-bar-fill.pb-cov-low  { background: var(--red); }

    .pb-cov-pct {
      display: inline-block;
      vertical-align: middle;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      font-size: 12.5px;
      color: var(--text);
      min-width: 36px;
    }

    /* ── Mobile tweaks ── */
    @media (max-width: 680px) {
      .pb-summary-card .tab-welcome-hero { flex-wrap: wrap; padding: 18px 18px 18px; gap: 12px; }
      .pb-summary-card .tab-welcome-icon { width: 52px; height: 52px; font-size: 24px; }
      .pb-summary-info .tab-welcome-title { font-size: 18px; }
      .pb-summary-pills { gap: 6px; }
      .pb-summary-pills .home-pill { padding: 5px 10px; gap: 6px; }
      .pb-summary-pills .home-pill-label { font-size: 8.5px; }
      .pb-summary-pills .home-pill-value { font-size: 11.5px; }
      .pb-play-cta { width: 100%; justify-content: center; }
      .pb-options { flex-direction: column; align-items: stretch; }
      .pb-run-btn { margin-inline-start: 0; max-width: none; }
      .pb-cov-bar { width: 50px; }
    }

    /* ════════════════════════════════════════
       SETTINGS MODAL — הגדרות ממשק
    ════════════════════════════════════════ */
    .settings-modal { max-width: 560px; width: 100%; }
    #settingsBody { padding: 4px 20px 8px; }
    .set-section { padding: 16px 0; border-top: 1px solid var(--border); }
    .set-section:first-child { border-top: none; padding-top: 6px; }
    .set-section-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
    .set-hint { font-size: 12px; color: var(--text3); margin-top: 8px; line-height: 1.5; }
    .set-warn { font-size: 12px; color: var(--red); margin-top: 8px; font-weight: 600; }

    .set-seg { display: flex; gap: 8px; flex-wrap: wrap; }
    .set-seg-btn {
      flex: 1 1 0; min-width: 92px;
      padding: 10px 12px; border-radius: var(--radius-sm);
      border: 1px solid var(--border2); background: var(--bg3);
      color: var(--text2); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .set-seg-btn:hover { color: var(--text); }
    .set-seg-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

    .set-tab-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
    .set-tab-row {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 8px 10px;
    }
    .set-tab-row.is-hidden { opacity: 0.55; }
    .set-tab-row.set-tab-dragging { opacity: 0.4; }
    .set-tab-row.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
    .set-tab-row.drop-after  { box-shadow: inset 0 -2px 0 0 var(--accent); }
    .set-tab-grip {
      flex-shrink: 0; cursor: grab; color: var(--text3);
      font-size: 15px; line-height: 1; padding: 0 2px; user-select: none;
    }
    .set-tab-grip:active { cursor: grabbing; }
    .set-tab-reorder { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
    .set-mini-btn {
      width: 22px; height: 16px; line-height: 1; font-size: 9px; padding: 0;
      border: 1px solid var(--border2); background: var(--bg2); color: var(--text2);
      border-radius: 4px; cursor: pointer;
    }
    .set-mini-btn:disabled { opacity: 0.35; cursor: default; }
    .set-mini-btn:not(:disabled):hover { color: var(--accent); border-color: var(--accent); }
    .set-tab-name { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; }
    .set-tab-ico { font-size: 16px; }
    .set-tab-default {
      flex-shrink: 0; font-family: inherit; font-size: 11px; font-weight: 600;
      padding: 4px 9px; border-radius: 999px; cursor: pointer;
      border: 1px solid var(--border2); background: var(--bg2); color: var(--text3);
    }
    .set-tab-default.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
    .set-tab-default:hover { color: var(--text); }
    .set-tab-eye {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm);
      border: 1px solid var(--border2); background: var(--bg2); cursor: pointer; font-size: 14px;
      display: grid; place-items: center;
    }
    .set-tab-eye:hover { border-color: var(--accent); }

    .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
    .set-row-label { font-size: 14px; color: var(--text); }
    .set-select {
      font-family: inherit; font-size: 13px; padding: 8px 12px;
      border-radius: var(--radius-sm); border: 1px solid var(--border2);
      background: var(--bg2); color: var(--text); cursor: pointer; min-width: 150px;
    }

    .set-reset-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .set-btn-ghost {
      flex: 1 1 auto; font-family: inherit; font-size: 13px; font-weight: 600;
      padding: 10px 14px; border-radius: var(--radius-sm);
      border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); cursor: pointer;
    }
    .set-btn-ghost:hover { color: var(--text); border-color: var(--accent); }
    .set-btn-ghost.set-danger:hover { color: var(--red); border-color: var(--red); }

    .set-foot {
      display: flex; justify-content: flex-end; gap: 10px;
      padding: 14px 20px; border-top: 1px solid var(--border);
    }
    .set-foot-btn {
      font-family: inherit; font-size: 14px; font-weight: 700;
      padding: 10px 22px; border-radius: var(--radius-sm); cursor: pointer;
      border: 1px solid var(--border2); background: var(--bg3); color: var(--text2);
    }
    .set-foot-btn:hover { color: var(--text); }
    .set-foot-save { background: var(--accent); color: #fff; border: none; }
    .set-foot-save:hover { filter: brightness(1.08); }

    @media (max-width: 600px) {
      .set-tab-default { font-size: 10px; padding: 3px 7px; }
      .set-tab-name { font-size: 13px; }
      .set-row { flex-direction: column; align-items: stretch; gap: 6px; }
      .set-select { min-width: 0; width: 100%; }
      .set-reset-row { flex-direction: column; }
    }