* { box-sizing: border-box; margin: 0; }
:root { --p:#4f46e5; --pl:#eef2ff; --bg:#f8fafc; --txt:#1e293b; --mut:#64748b; --ok:#16a34a; --bad:#dc2626; --br:#e2e8f0; }
body { font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--txt); direction:rtl; }
button { cursor:pointer; font-family:inherit; }
.btn { background:var(--p); color:#fff; border:0; border-radius:8px; padding:10px 20px; font-size:15px; }
.btn:hover { opacity:.9; }
.btn-sm { padding:5px 12px; font-size:13px; }
.btn-light { background:#fff; color:var(--p); border:1px solid var(--p); }
.btn-danger { background:var(--bad); }
input, select, textarea { width:100%; padding:9px 12px; border:1px solid var(--br); border-radius:8px; font-size:15px; font-family:inherit; direction:rtl; }
textarea { min-height:110px; resize:vertical; }
label { display:block; margin:12px 0 4px; font-weight:600; font-size:14px; }
.card { background:#fff; border:1px solid var(--br); border-radius:12px; padding:20px; }
/* login */
.login-wrap { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; }
.login-box { width:100%; max-width:360px; }
.login-box h1 { text-align:center; margin-bottom:20px; color:var(--p); }
.err { color:var(--bad); font-size:14px; margin-top:10px; text-align:center; }
/* layout */
header.top { background:#fff; border-bottom:1px solid var(--br); padding:12px 24px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:5; }
header.top h1 { font-size:18px; color:var(--p); }
.layout { display:flex; min-height:calc(100vh - 57px); min-height:calc(100dvh - 57px); }
aside.sidebar { width:270px; background:#fff; border-left:1px solid var(--br); padding:16px; overflow-y:auto; flex-shrink:0; }
main.content { flex:1; padding:28px; max-width:860px; }
.cat-name { font-weight:700; margin:14px 0 6px; color:var(--p); }
.task-link { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:8px; font-size:14px; color:var(--txt); text-decoration:none; cursor:pointer; }
.task-link:hover { background:var(--pl); }
.task-link.active { background:var(--pl); font-weight:700; }
.done-mark { color:var(--ok); font-weight:700; }
.opt { display:block; padding:12px; border:1px solid var(--br); border-radius:8px; margin:8px 0; cursor:pointer; }
.opt:hover { background:var(--pl); }
.opt.sel { border-color:var(--p); background:var(--pl); }
.opt.right { border-color:var(--ok); background:#f0fdf4; }
.opt.wrong { border-color:var(--bad); background:#fef2f2; }
.feedback { margin-top:14px; font-weight:700; }
.progressbar { background:var(--br); border-radius:99px; height:10px; overflow:hidden; }
.progressbar > div { background:var(--ok); height:100%; }
/* tables */
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { padding:10px 12px; border-bottom:1px solid var(--br); text-align:right; font-size:14px; }
th { background:var(--pl); }
.tabs { display:flex; gap:8px; margin-bottom:20px; }
.tab { padding:9px 18px; border-radius:8px; border:1px solid var(--br); background:#fff; }
.tab.active { background:var(--p); color:#fff; border-color:var(--p); }
.row { display:flex; gap:12px; } .row > * { flex:1; }
.badge { font-size:12px; padding:2px 8px; border-radius:99px; background:var(--pl); color:var(--p); }
.badge.draft { background:#fef3c7; color:#92400e; }
video, img.media, iframe.media { max-width:100%; border-radius:10px; margin:12px 0; }
.muted { color:var(--mut); font-size:13px; }
@media (max-width:760px){ .layout{flex-direction:column} aside.sidebar{width:100%;border-left:0;border-bottom:1px solid var(--br)} main.content{padding:16px} }

/* ===== התאמת מובייל — תשתית גלובלית (v11.34) ===== */
/* מניעת גלישה אופקית של תוכן ארוך */
body { overflow-wrap:break-word; }
img, video, iframe, table { max-width:100%; }

/* --- כללי מגע: לפי סוג הקלט, לא לפי רוחב.
   אצבע היא אותה אצבע גם בטלפון 360px וגם ב-iPad 834px. --- */
@media (pointer:coarse){
  .btn { min-height:44px; padding:11px 18px; }
  .btn-sm { min-height:38px; padding:8px 12px; font-size:13px; }
  /* 16px מונע זום אוטומטי של iOS Safari בכניסה לשדה */
  input, select, textarea { font-size:16px; }
}

/* --- כללי פריסה: לפי רוחב. 834px מכסה גם iPad Pro 11" אנכי --- */
@media (max-width:834px),(max-height:520px){
  header.top { padding:10px 14px; }
  .card { padding:16px; border-radius:10px; }
  /* טבלאות ארוכות — גלילה אופקית במקום גלישה */
  table { display:block; overflow-x:auto; white-space:nowrap; }
}

/* מסך אופקי נמוך בטלפון — אל תבזבז גובה על header דביק */
@media (orientation:landscape) and (max-height:520px){
  header.top { position:static; padding:6px 12px; }
  header.top h1 { font-size:15px; }
  main.content { padding:12px; }
}