:root{
  --bg:#f4f6fa; --card:#fff; --ink:#16202e; --muted:#6b7a90; --line:#e3e8ef;
  --brand:#1f6feb; --brand-d:#1550b3; --ok:#12855a; --ok-bg:#e7f7ef;
  --warn:#a8630a; --warn-bg:#fdf2e0; --bad:#c0392b; --bad-bg:#fdecea;
  --shadow:0 1px 2px rgba(16,32,60,.06), 0 8px 24px rgba(16,32,60,.06);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  direction:rtl; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI","Assistant","Rubik",Arial,sans-serif; font-size:15px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- שלד ---- */
header.top{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.top-in{max-width:1240px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{font-weight:700; font-size:18px; display:flex; align-items:center; gap:9px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--brand)}
.brand small{font-weight:400; color:var(--muted); font-size:12px}
nav.tabs{display:flex; gap:4px; margin-inline-start:auto; flex-wrap:wrap}
nav.tabs a{
  padding:7px 14px; border-radius:9px; color:var(--muted); font-weight:600; font-size:14px;
}
nav.tabs a:hover{background:#eef2f8; text-decoration:none}
nav.tabs a.on{background:var(--brand); color:#fff}
main{max-width:1240px; margin:0 auto; padding:22px 20px 60px}

h1{font-size:23px; margin:0 0 4px}
h2{font-size:17px; margin:0 0 12px}
.sub{color:var(--muted); font-size:13.5px; margin:0 0 20px}

/* ---- כרטיסים ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card.pad{padding:18px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-bottom:20px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.stat .k{color:var(--muted); font-size:12.5px; font-weight:600}
.stat .v{font-size:24px; font-weight:700; margin-top:3px; letter-spacing:-.3px}
.stat .v small{font-size:13px; color:var(--muted); font-weight:600}

/* ---- טבלאות ---- */
.tbl-wrap{overflow-x:auto; border-radius:var(--r)}
table{width:100%; border-collapse:collapse; background:#fff; font-size:14px}
th,td{padding:9px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:#f7f9fc; color:var(--muted); font-size:12.5px; font-weight:700; position:sticky; top:0}
td.name,th.name{white-space:normal; min-width:280px}
tbody tr:hover{background:#f9fbfe}
tr.special td{background:#fffaf0; color:var(--warn)}
.num{font-variant-numeric:tabular-nums}
.empty{padding:44px; text-align:center; color:var(--muted); background:#fff; border-radius:var(--r); border:1px dashed var(--line)}

/* ---- כפתורים ---- */
.btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#fff; color:var(--ink); padding:8px 15px; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn:hover{background:#f3f6fb; text-decoration:none}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-d)}
.btn.danger{color:var(--bad); border-color:#f2c9c4}
.btn.danger:hover{background:var(--bad-bg)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.sm{padding:5px 11px; font-size:13px}

input[type=text],input[type=password],input[type=date],input[type=search],textarea,select{
  font-family:inherit; font-size:14px; padding:8px 11px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); width:100%;
}
input:focus,textarea:focus,select:focus{outline:2px solid #cfe0ff; outline-offset:0; border-color:var(--brand)}
.filters{display:flex; gap:9px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.filters input{width:auto; min-width:150px}
.filters label{color:var(--muted); font-size:13px; font-weight:600}

/* ---- תגיות ---- */
.tag{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700}
.tag.ok{background:var(--ok-bg); color:var(--ok)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}
.tag.bad{background:var(--bad-bg); color:var(--bad)}
.tag.mute{background:#eef1f6; color:var(--muted)}

/* ---- העלאה ---- */
.drop{
  border:2px dashed #c3d1e4; border-radius:18px; background:#fff; padding:46px 20px;
  text-align:center; cursor:pointer; transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--brand); background:#f4f8ff}
.drop .big{font-size:17px; font-weight:700; margin-bottom:5px}
.drop .small{color:var(--muted); font-size:13.5px}
.drop .icon{font-size:38px; line-height:1; margin-bottom:10px}

.prev{margin-top:22px}
.prev-item{margin-bottom:16px; overflow:hidden}
.prev-head{
  display:flex; align-items:center; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:#fafcff; flex-wrap:wrap;
}
.prev-head .t{font-weight:700}
.prev-head .sp{margin-inline-start:auto; display:flex; gap:8px; align-items:center}
.checks{display:flex; flex-wrap:wrap; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line)}
.chk{font-size:12.5px; padding:4px 10px; border-radius:8px; background:#f2f5fa; color:var(--muted)}
.chk.ok{background:var(--ok-bg); color:var(--ok)}
.chk.bad{background:var(--bad-bg); color:var(--bad)}
.chk b{font-weight:700}
.lines-box{max-height:340px; overflow:auto}
.note-row{padding:11px 16px; display:flex; gap:9px; align-items:center; background:#fafcff}
.note-row label{font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap}

.bar{
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:12px 16px; display:flex; gap:11px; align-items:center; z-index:20;
  border-radius:var(--r); box-shadow:var(--shadow); margin-top:18px;
}
.bar[hidden]{display:none}
.bar .info{color:var(--muted); font-size:13.5px}
.bar .sp{margin-inline-start:auto; display:flex; gap:9px}

/* ---- מודאל (במקום confirm של הדפדפן) ---- */
.mask{position:fixed; inset:0; background:rgba(16,32,60,.42); display:flex;
  align-items:center; justify-content:center; z-index:100; padding:20px}
.mask[hidden]{display:none}
.modal{background:#fff; border-radius:16px; padding:22px; max-width:430px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{margin:0 0 8px; font-size:17px}
.modal p{margin:0 0 18px; color:var(--muted); font-size:14px}
.modal .acts{display:flex; gap:9px; justify-content:flex-start}

/* ---- הודעות ---- */
.toast{
  position:fixed; bottom:22px; inset-inline-start:22px; background:#16202e; color:#fff;
  padding:11px 17px; border-radius:11px; font-size:14px; z-index:200;
  box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(8px);
  transition:.18s; pointer-events:none;
}
.toast.show{opacity:1; transform:none}
.toast.bad{background:var(--bad)}

/* ---- כניסה ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login{width:100%; max-width:360px; background:#fff; padding:30px; border-radius:18px; box-shadow:var(--shadow); text-align:center}
.login h1{font-size:21px; margin-bottom:4px}
.login p{color:var(--muted); font-size:13.5px; margin:0 0 20px}
.login input{margin-bottom:12px; text-align:center}
.login .btn{width:100%; justify-content:center}
.err{background:var(--bad-bg); color:var(--bad); padding:9px; border-radius:9px; font-size:13.5px; margin-bottom:12px}

.ver{color:#a9b4c4; font-size:11.5px; text-align:center; margin-top:26px}

@media (max-width:640px){
  main{padding:16px 12px 50px}
  .top-in{padding:9px 12px}
  th,td{padding:8px 9px}
}