:root{
    --bg:#f8fafc; --card:#ffffff; --border:#e2e8f0; --muted:#eef2f7; --muted-h:#e3e9f1;
    --ink:#020617; --text:#0f172a; --sub:#475569; --faint:#94a3b8;
    --primary:#0f172a; --accent:#0369a1; --accent-d:#075985; --accent-soft:#e0f2fe;
    --accent-ring:rgba(3,105,161,.35);
    --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7;
    --danger:#dc2626; --danger-soft:#fef2f2;
    --sh-sm:0 1px 2px rgba(2,6,23,.06), 0 1px 3px rgba(2,6,23,.08);
    --sh-md:0 4px 10px -2px rgba(2,6,23,.08), 0 2px 6px -2px rgba(2,6,23,.06);
    --sh-lg:0 16px 32px -12px rgba(2,6,23,.22);
    --r:16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0; height:100%}
  body{
    direction:rtl;
  }
  body{
    font-family:'Heebo','Segoe UI',system-ui,Arial,sans-serif; color:var(--text);
    background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .mt-ic{display:block; flex:0 0 auto}

  /* Text fields auto-detect their OWN writing direction (Hebrew → RTL, latin → LTR),
     exactly like dir="auto". unicode-bidi:plaintext is the CSS equivalent — ONE global
     rule, so every input/textarea in every tool behaves without a per-field attribute. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([dir]),
  textarea:not([dir]){
    unicode-bidi:plaintext;
    text-align:start;
  }

  /* ── Top bar ── */
  .mt-top{
    height:60px; background:#fff; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.5rem; position:sticky; top:0; z-index:30;
  }
  .mt-logo{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
  .mt-logo__mark{
    width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
    background:linear-gradient(150deg,#1e293b,#020617); color:#fff;
    font-weight:800; font-size:.92rem; box-shadow:var(--sh-sm);
  }
  .mt-logo__txt{font-weight:800; letter-spacing:.2px; font-size:1.02rem}
  .mt-logo__sub{color:var(--faint); font-weight:600; font-size:.9rem}
  .mt-top__nav{display:flex; align-items:center; gap:.3rem}
  .mt-tlink{
    display:inline-flex; align-items:center; gap:.45rem; min-height:40px;
    padding:.5rem .8rem; border-radius:10px; text-decoration:none;
    color:var(--sub); font-size:.9rem; font-weight:500; transition:background .15s, color .15s;
  }
  .mt-tlink:hover{background:var(--muted); color:var(--text)}
  .mt-tlink:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-ring)}
  .mt-tlink .mt-ic{width:18px; height:18px}
  .mt-sep{width:1px; height:24px; background:var(--border); margin:0 .25rem}
  .mt-tlink--out{color:var(--sub)}
  .mt-tlink--out:hover{background:var(--danger-soft); color:var(--danger)}

  /* ── Top-bar group dropdowns (printed from the scheme) ── */
  .mt-top__start{display:flex; align-items:center; gap:1.1rem; min-width:0}
  .mt-menus{display:flex; align-items:center; gap:.15rem}
  .mt-menu{position:relative}
  .mt-menu__btn{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:10px; cursor:pointer; color:var(--sub); font-size:.9rem; font-weight:600; list-style:none; user-select:none; min-height:40px; white-space:nowrap}
  .mt-menu__btn::-webkit-details-marker{display:none}
  .mt-menu__btn .mt-ic{width:18px; height:18px}
  .mt-menu__btn:hover, .mt-menu[open] .mt-menu__btn{background:var(--muted); color:var(--text)}
  .mt-menu__chev{display:inline-flex; color:var(--faint); transition:transform .15s}
  .mt-menu__chev .mt-ic{width:15px; height:15px}
  .mt-menu[open] .mt-menu__chev{transform:rotate(180deg)}
  .mt-menu__panel{position:absolute; top:calc(100% + 6px); inset-inline-start:0; min-width:225px; z-index:40; background:#fff; border:1px solid var(--border); border-radius:13px; box-shadow:var(--sh-lg); padding:.4rem; display:flex; flex-direction:column; gap:.12rem; animation:mt-rise .16s ease both}
  .mt-menu__item{display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:9px; text-decoration:none; color:var(--text); font-size:.92rem; white-space:nowrap}
  .mt-menu__item .mt-ic{width:18px; height:18px; color:var(--accent)}
  .mt-menu__item:hover{background:var(--muted)}
  .mt-menu__item.is-active{background:var(--accent-soft); color:var(--accent-d); font-weight:600}
  @media (max-width:767px){ .mt-menus{display:none} }

  /* ── Shell ── */
  .mt-wrap{max-width:1080px; margin:0 auto; padding:1.75rem 1.5rem 3.5rem}
  .mt-hero{margin:.25rem 0 1.9rem}
  .mt-hero h1{margin:0 0 .3rem; font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.01em}
  .mt-hero p{margin:0; color:var(--sub)}

  /* ── Group section ── */
  .mt-section{margin-bottom:2rem}
  .mt-section__head{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
  .mt-section__icon{
    width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent);
  }
  .mt-section__icon .mt-ic{width:18px; height:18px}
  .mt-section__title{font-size:1.05rem; font-weight:700; color:var(--ink)}
  .mt-section__rule{flex:1; height:1px; background:var(--border); margin-inline-start:.4rem}

  /* ── App blocks (icon + title only) ── */
  .mt-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .mt-app{
    display:flex; flex-direction:column; gap:.95rem; padding:1.25rem;
    background:var(--card); border:1px solid var(--border); border-radius:var(--r);
    text-decoration:none; color:var(--text); box-shadow:var(--sh-sm);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation:mt-rise .4s ease both;
  }
  .mt-app:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#cbd5e1}
  .mt-app:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-ring), var(--sh-md)}
  .mt-app__icon{
    width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent); transition:transform .18s ease;
  }
  .mt-app__icon .mt-ic{width:27px; height:27px}
  .mt-app:hover .mt-app__icon{transform:scale(1.07)}
  .mt-app__title{font-weight:600; font-size:1.02rem; color:var(--text)}
  .mt-grid .mt-app:nth-child(1){animation-delay:.02s}
  .mt-grid .mt-app:nth-child(2){animation-delay:.06s}
  .mt-grid .mt-app:nth-child(3){animation-delay:.10s}
  .mt-grid .mt-app:nth-child(4){animation-delay:.14s}
  .mt-grid .mt-app:nth-child(n+5){animation-delay:.18s}
  @keyframes mt-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

  /* ── Module page header ── */
  .mt-back{
    display:inline-flex; align-items:center; gap:.4rem; color:var(--sub);
    text-decoration:none; font-size:.9rem; font-weight:500; padding:.4rem .65rem;
    border-radius:9px; margin-bottom:1rem; transition:.15s;
  }
  .mt-back:hover{background:var(--muted); color:var(--text)}
  .mt-back:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-ring)}
  .mt-back .mt-ic{width:18px; height:18px}
  .mt-page-head{display:flex; align-items:center; gap:.7rem; margin:.2rem 0 1.3rem}
  .mt-page-head__icon{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent);
  }
  .mt-page-head__icon .mt-ic{width:22px; height:22px}
  .mt-h1{margin:0; font-size:1.45rem; font-weight:800; color:var(--ink)}

  /* ── Shared module UI ── */
  .mt-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.35rem 1.5rem; margin-bottom:1.25rem; box-shadow:var(--sh-sm)}
  .mt-card h2{margin:.1rem 0 .85rem; font-size:1.1rem; font-weight:700; color:var(--ink)}
  .mt-hint{color:var(--sub); font-size:.9rem; margin:.25rem 0 1rem}
  .mt-drop{
    border:2px dashed #cbd5e1; border-radius:13px; background:#fbfdff; padding:1.5rem 1rem;
    text-align:center; color:var(--sub); cursor:pointer; transition:.15s; margin-bottom:1rem;
  }
  .mt-drop:hover{border-color:var(--accent); background:#f5fbff}
  .mt-drop.is-over{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-d)}
  .mt-drop b{color:var(--text)}
  .mt-drop__ic{width:34px; height:34px; margin:0 auto .5rem; color:var(--accent)}
  .mt-drop__ic .mt-ic{width:34px; height:34px}
  .mt-drop__sub{font-size:.82rem; margin-top:.35rem; color:var(--faint)}
  .mt-textarea{
    width:100%; min-height:220px; resize:vertical; font-size:.9rem; padding:.8rem;
    border-radius:11px; border:1px solid var(--border); background:#fff; color:var(--text);
    font-family:ui-monospace,'Consolas',monospace; text-align:start; transition:.15s;
  }
  .mt-textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
  .mt-row{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:.9rem 0}
  .mt-check{display:flex; align-items:center; gap:.5rem; color:var(--sub); font-size:.9rem; cursor:pointer}
  .mt-btn{
    display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:#fff;
    border:0; padding:.65rem 1.5rem; border-radius:11px; font:inherit; font-size:.95rem;
    font-weight:700; cursor:pointer; min-height:44px; transition:background .15s, transform .12s;
  }
  .mt-btn:hover{background:var(--accent-d)}
  .mt-btn:active{transform:scale(.98)}
  .mt-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-ring)}
  .mt-stats{display:flex; gap:.75rem; flex-wrap:wrap; margin:.25rem 0 1rem}
  .mt-stat{background:var(--muted); border:1px solid var(--border); border-radius:12px; padding:.65rem 1.1rem; min-width:118px}
  .mt-stat b{display:block; font-size:1.55rem; font-weight:800; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums}
  .mt-stat span{color:var(--sub); font-size:.8rem}
  .mt-stat--ok b{color:var(--ok)} .mt-stat--upd b{color:var(--accent)} .mt-stat--skip b{color:var(--warn)}
  .mt-alert{padding:.75rem 1rem; border-radius:11px; margin-bottom:1rem; font-size:.9rem}
  .mt-alert--bad{background:var(--danger-soft); border:1px solid #fecaca; color:#991b1b}
  /* --good / --warn were being USED by layouts (sync-erp, hsv-reports) with no
     definition here, so those alerts rendered as unstyled bare text — the
     success and warning cases looked identical to plain copy. Defined from the
     same --ok/--warn vars the stat pills already use, so the palette stays in
     one place. customers/list.php still carries a local `--ok` variant; it can
     move onto --good whenever that file is next touched. */
  .mt-alert--good{background:var(--ok-soft); border:1px solid #bbf7d0; color:#166534}
  .mt-alert--warn{background:var(--warn-soft); border:1px solid #fde68a; color:#92400e}
  table.mt-table{width:100%; border-collapse:collapse; font-size:.88rem}
  table.mt-table th,table.mt-table td{padding:.5rem .65rem; border-bottom:1px solid var(--border); text-align:start}
  table.mt-table th{color:var(--sub); font-weight:600}
  table.mt-table td{font-variant-numeric:tabular-nums}
  .mt-badge{font-size:.72rem; font-weight:600; padding:.12rem .55rem; border-radius:999px}
  .mt-badge--new{background:var(--ok-soft); color:var(--ok)}
  .mt-badge--upd{background:var(--accent-soft); color:var(--accent-d)}

  /* ── Live preview (Vue island) ── */
  .mt-preview{margin:.95rem 0 .25rem; border:1px solid var(--border); border-radius:12px; overflow:hidden}
  .mt-preview__bar{padding:.6rem .9rem; background:var(--muted); font-size:.88rem; color:var(--text); display:flex; align-items:center; gap:.5rem}
  .mt-preview__bar b{color:var(--accent-d); font-variant-numeric:tabular-nums}
  .mt-preview__wrap{max-height:260px; overflow:auto}
  .mt-preview table{margin:0}
  .mt-preview td.is-skip{color:var(--faint)}
  .mt-preview .is-skip-row{background:#fff7ed}
  .mt-btn:disabled{opacity:.5; cursor:not-allowed}
  .mt-btn:disabled:hover{background:var(--accent)}
  [v-cloak]{display:none}
  /* ── Direction toggle + chunk size + progress ── */
  .mt-dirbar{display:flex; align-items:center; gap:.4rem; margin:.1rem 0 .55rem}
  .mt-dirbar__lbl{color:var(--faint); font-size:.82rem}
  .mt-dirbtn{display:inline-grid; place-items:center; width:36px; height:32px; border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; color:var(--sub)}
  .mt-dirbtn:hover{background:var(--muted); color:var(--text)}
  .mt-dirbtn.is-on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-d)}
  .mt-dirbtn .mt-ic{width:16px; height:16px}
  .mt-chunk{display:inline-flex; align-items:center; gap:.45rem; color:var(--sub); font-size:.88rem}
  .mt-chunk select{padding:.4rem .55rem; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:.88rem; min-height:38px; cursor:pointer}
  .mt-progress__txt{font-weight:600; color:var(--text); margin-bottom:.55rem}
  .mt-progress__track{height:8px; background:var(--muted); border-radius:999px; overflow:hidden}
  .mt-progress__bar{height:100%; background:var(--accent); border-radius:999px; transition:width .2s ease}

  @media (max-width:640px){
    .mt-top{padding:0 1rem} .mt-logo__sub{display:none} .mt-tlink span{display:none}
    .mt-wrap{padding:1.1rem 1rem 2.5rem} .mt-hero h1{font-size:1.4rem}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
  }

  /* ── Bulk image drop folder (/suppliers/upload-images) ──────────────────
     The row TINT is the whole point of the screen: the operator should be
     able to scroll and see instantly which photos the matcher was sure about
     and which still need a human, without reading a word. */
  .mt-ok{color:#0a7d34; font-weight:600}
  .mt-bad{color:#b0202b; font-weight:600}
  .mt-btn--bad{border-color:#e6b8bc; color:#b0202b}
  /* Solid RED call-to-action. --bad is an outline for destructive links; AUTO
     is a long-running job the operator starts deliberately and must be able to
     spot instantly, including while it pulses mid-run. */
  .mt-btn--auto{background:var(--danger); border-color:var(--danger); color:#fff; font-weight:700}
  .mt-btn--auto:hover{background:#b91c1c; border-color:#b91c1c; color:#fff}
  .mt-btn--auto[data-running="1"]{animation:mt-auto-pulse 1.1s ease-in-out infinite}
  @keyframes mt-auto-pulse{0%,100%{opacity:1}50%{opacity:.55}}
  .mt-btn--bad:hover{background:#fdf2f3}

  .mt-bi-filters{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1rem}
  .mt-bi-filters label{display:inline-flex; align-items:center; gap:.4rem; color:var(--sub); font-size:.9rem}

  .mt-bi td{vertical-align:top}
  .mt-bi-row{border-inline-start:4px solid transparent}
  .mt-bi--exact{border-inline-start-color:#2f9e4f; background:#f6fbf7}
  .mt-bi--maybe{border-inline-start-color:#d99a2b; background:#fffaf2}
  .mt-bi--none {border-inline-start-color:#c2c7cf}
  .mt-bi--done {opacity:.45}

  .mt-bi-thumb{width:110px}
  .mt-bi-thumb img{width:100px; height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#fff}
  .mt-bi-name{font-weight:600; word-break:break-all}
  .mt-bi-rule{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.75rem; opacity:.7}

  .mt-bi-pick{min-width:260px}
  .mt-bi-pick select,.mt-bi-pick input{width:100%; margin-top:.35rem; padding:.4rem .55rem;
    border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:.88rem}

  .mt-bi-actions{white-space:nowrap}
  .mt-bi-msg{margin-top:.4rem; font-size:.82rem}
  .mt-bi-errs{margin-top:.6rem; color:#b0202b; font-size:.82rem; word-break:break-all}
  .mt-bi-new{margin-top:.5rem; font-size:.85rem}
  .mt-bi-new summary{cursor:pointer; color:var(--accent); user-select:none}
  .mt-bi-new input{width:100%; margin-top:.35rem; padding:.4rem .55rem;
    border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:.88rem}
  .mt-bi-new .mt-btn{margin-top:.45rem}

  @media (max-width:860px){
    /* The table stops being a table — each photo becomes a card, so the
       decision controls stay reachable on a phone in the warehouse. */
    .mt-bi thead{display:none}
    .mt-bi,.mt-bi tbody,.mt-bi tr,.mt-bi td{display:block; width:auto}
    .mt-bi-row{margin-bottom:1rem; border:1px solid var(--border); border-inline-start-width:4px; border-radius:10px; padding:.6rem}
    .mt-bi-thumb{width:auto}
  }