: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}

  /* ── 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; direction:ltr; text-align:left; 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}
  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}
  }