:root{
  /* הצהרה שהדף בהיר. בלעדיה, כשמערכת ההפעלה במצב כהה, כרום במחשב מצייר את
     החלון הנפתח של <select> בצבעי הערכה הכהה — טקסט לבן — על הרקע הלבן
     שאנחנו כופים ב-CSS, והרשימה נראית ריקה. */
  color-scheme: light;

  --cream:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F7EE;
  --primary:#6BCB2A; --primary-d:#4A9A10; --primary-soft:#E0F2CC;
  --teal:#3A8A10; --teal-soft:#D4EEC4;
  --banner1:#1a3d06; --banner2:#0d2b04; --banner3:#1e4a08; /* גווני הבאנר — נדרסים ע"י applyThemeColor */
  --ink:#333333; --muted:#777777; --line:#E0EDD6;
  --b1:#E76F51; --b2:#F4A261; --b3:#E9C46A; --b4:#8AB17D; --b5:#2A9D8F;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --shadow-sm:0 4px 16px rgba(0,0,0,.07);
  --radius:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;direction:ltr}
body{
  font-family:'Heebo','Segoe UI',system-ui,-apple-system,sans-serif;
  background-color:#F4F7F5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='200'%3E%3Cpath d='M0,100 Q200,40 400,100 Q600,160 800,100' fill='none' stroke='%23C8D4C8' stroke-width='60' opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 800px 200px;
  color:var(--ink);
  display:flex; justify-content:center; min-height:100vh;
}
/* full-screen app — centered column on wide screens, full-width on phone */
.device{position:relative; width:100%; max-width:480px; background:transparent; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; direction:rtl;}
/* ===== top bar ===== */
.topbar{position:sticky; top:0; z-index:40; background:linear-gradient(135deg,var(--banner1) 0%,var(--banner2) 50%,var(--banner3) 100%); padding:calc(env(safe-area-inset-top) + 18px) 20px 12px; display:flex; align-items:center; gap:12px; min-height:60px; box-shadow:0 2px 12px rgba(0,0,0,.3);}
.topbar h1{color:#fff;}
.topbar .brand{color:#fff;}
.topbar .back{background:rgba(255,255,255,.15);color:#fff;border:none;}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px}
.topbar .brand .logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-d));display:grid;place-items:center;font-size:18px;box-shadow:0 4px 10px rgba(224,106,32,.35)}
.demo-pill{font-size:10px;font-weight:700;color:var(--primary-d);background:var(--primary-soft);padding:3px 8px;border-radius:20px}
.topbar h1{font-size:19px;font-weight:800;margin:0}
.topbar .back{width:38px;height:38px;border:none;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-sm);font-size:20px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.sub{font-size:12.5px;color:var(--muted);font-weight:500}
/* ===== scroll area ===== */
.content{flex:1;overflow-y:auto;padding:78px 16px 24px;scrollbar-width:none;background:transparent}
.mobile-back-btn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--primary-d);font-size:14px;font-weight:700;cursor:pointer;padding:4px 0 12px;font-family:inherit}
@media(max-width:767px){.tabbar.sub-screen{display:none!important}}
.content::-webkit-scrollbar{display:none}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
#screen-map.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== cards & bits ===== */
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:0 6px 28px rgba(0,0,0,.07);margin-bottom:14px;border:1.5px solid #C8E6B0}
.section-t{font-size:14px;font-weight:800;margin:18px 4px 10px;display:flex;align-items:center;gap:7px}
.section-t .all{margin-inline-start:auto;font-size:12px;color:var(--primary-d);font-weight:700;cursor:pointer}
.row{display:flex;align-items:center;gap:12px}
.tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.tag.train{background:var(--teal-soft);color:var(--teal)}
.tag.stay{background:#E5EEF8;color:#3B7DC4}
.tag.med{background:#FCE4E4;color:#D7544F}
.tag.diet{background:#FFF1CF;color:#C79008}
.tag.allergy{background:#F1E6FB;color:#9457C7}
.tag.rescue{background:#E8F5E9;color:#2E7D32;font-weight:800}
.btn{border:none;border-radius:14px;padding:14px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;width:100%;background:linear-gradient(135deg,var(--primary),#3A8A10);color:#fff;box-shadow:0 6px 16px rgba(58,138,16,.30)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--surface);color:var(--primary-d);box-shadow:var(--shadow-sm)}
.btn.teal{background:linear-gradient(135deg,var(--primary),var(--teal));box-shadow:0 6px 16px rgba(58,138,16,.3)}
.avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex-shrink:0}
/* ===== dashboard ===== */
.hero-greet{font-size:23px;font-weight:900;margin:6px 4px 2px}
.occ{background:var(--surface);color:var(--ink);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px;position:relative;overflow:hidden;border:1.5px solid #C8E6B0}
.occ .paw{position:absolute;font-size:120px;opacity:.06;left:-14px;bottom:-34px;transform:rotate(-18deg)}
.occ .lbl{font-size:13px;font-weight:600;color:var(--muted)}
.occ .big{font-size:40px;font-weight:900;line-height:1.05;margin:2px 0 8px;color:var(--primary-d)}
.occ .big small{font-size:18px;font-weight:700;color:var(--muted)}
.occ .bar{height:9px;border-radius:10px;background:var(--line);overflow:hidden}
.occ .bar i{display:block;height:100%;background:var(--primary);border-radius:10px}
.edit-dog-btn{display:block;width:100%;margin-top:10px;padding:9px;background:#fff;color:var(--primary);border:2px solid var(--primary);border-radius:12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .15s}
.edit-dog-btn:hover{background:var(--primary);color:#fff}
.map-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:9px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .15s}
.map-btn:hover{background:var(--primary-d)}
.home-task-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EEF5E8;cursor:pointer}
.home-task-row:last-child{border-bottom:none}
.home-task-row.done{opacity:0.6}
.done-divider{font-size:11px;color:#aaa;text-align:center;padding:6px 0;border-top:1px solid #eee;margin-top:4px}
.home-task-time{font-size:15px;font-weight:900;min-width:42px;text-align:center}
.home-task-info{flex:1}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px}
.stat{background:var(--surface);border-radius:14px;padding:8px 4px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-size:18px;font-weight:900}
.stat .t{font-size:9px;color:var(--muted);font-weight:600;margin-top:2px}
.stat .ic{font-size:14px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick a{background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;cursor:pointer}
.quick a .qi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.task{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.task .when{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:4px 9px;border-radius:10px}
/* ===== dog list ===== */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow-sm);margin:6px 0 12px}
.search input{border:none;outline:none;font-family:inherit;font-size:14px;width:100%;background:transparent;color:var(--ink)}
.filters{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.fchip{border:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:20px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--ink);color:#fff}
.dog-card{display:flex;align-items:center;gap:13px;cursor:pointer}
.dog-card .meta{flex:1;min-width:0}
.dog-card .nm{font-weight:800;font-size:16px;display:flex;align-items:center;gap:7px}
.dog-card .br{font-size:12.5px;color:var(--muted);margin-top:1px}
.dog-card .tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.dog-card .chev{color:var(--muted);font-size:22px}
/* ===== profile ===== */
.prof-head{background:linear-gradient(135deg,var(--surface),var(--surface-2));border-radius:24px;padding:20px;text-align:center;box-shadow:var(--shadow-sm);margin-bottom:14px}
.prof-head .avatar{width:84px;height:84px;font-size:44px;margin:0 auto 10px;box-shadow:var(--shadow)}
.prof-head .nm{font-size:23px;font-weight:900}
.prof-head .sub{margin-top:3px}
.prof-head .badges{display:flex;gap:7px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{font-weight:700;text-align:left}
.owner-card{display:flex;align-items:center;gap:12px}
.owner-card .call{width:44px;height:44px;border-radius:14px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:20px;text-decoration:none;flex-shrink:0}
.trait{background:var(--primary-soft);border-radius:14px;padding:13px;font-size:13.5px;font-weight:600;line-height:1.5;display:flex;gap:9px}
/* ===== form ===== */
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
select option{background:#FFFFFF;color:#333333}
/* ===== בורר מותאם (מחשב בלבד) ===== */
.cs-wrap{position:relative}
.cs-btn{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);text-align:start;
  cursor:pointer;display:flex;align-items:center;gap:8px}
.cs-btn:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cs-btn .cs-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn .cs-arr{color:var(--muted);font-size:12px}
.cs-panel{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 4px);background:#fff;
  border:1.5px solid var(--line);border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.16);
  max-height:320px;display:flex;flex-direction:column;overflow:hidden}
.cs-search{border:none;border-bottom:1px solid var(--line);padding:11px 13px;font-family:inherit;
  font-size:14px;color:#333;background:#fff;outline:none;width:100%}
.cs-list{overflow-y:auto}
.cs-opt{padding:10px 13px;font-size:14px;color:#333;background:#fff;cursor:pointer;
  border-bottom:1px solid #F2F5EF}
.cs-opt:last-child{border-bottom:none}
.cs-opt:hover,.cs-opt.cs-hi{background:var(--primary-soft)}
.cs-opt.cs-sel{background:var(--primary-soft);font-weight:800}
.cs-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.field input.invalid{border-color:var(--b1);box-shadow:0 0 0 3px #FCE4E4}
.err-hint{display:none;font-size:11.5px;font-weight:700;color:var(--b1);margin:6px 2px 0}
.field input.invalid ~ .err-hint{display:block}
.field textarea{resize:none;min-height:70px}
.frow{display:flex;gap:11px}.frow .field{flex:1}
.type-toggle{display:flex;gap:10px;margin-bottom:16px}
.type-toggle button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px}
.type-toggle button .e{font-size:22px}
.type-toggle button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.type-toggle button.on.t{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.pick-mode{display:flex;gap:10px;margin-bottom:12px}
.pick-mode button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;padding:12px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px}
.pick-mode button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.pick-hint{font-size:12px;color:var(--muted);font-weight:600;margin:-4px 2px 12px}
.photo-up{border:2px dashed var(--line);border-radius:18px;padding:24px;text-align:center;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer}
.photo-up .e{font-size:34px;display:block;margin-bottom:6px}
.form-sec{font-size:13px;font-weight:800;color:var(--primary-d);margin:20px 2px 11px;display:flex;align-items:center;gap:7px}
/* ===== questionnaire (yes/no + consent) ===== */
.q-card{background:#fff;border-radius:var(--radius);padding:2px 14px;box-shadow:0 4px 18px rgba(0,0,0,.06);margin-bottom:13px;border:1.5px solid #C8E6B0}
.q-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:none}
.q-label{flex:1;font-size:13.5px;font-weight:600;line-height:1.35}
.yn{display:flex;gap:6px;flex-shrink:0}
.yn button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 15px;font-family:inherit;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer}
.yn button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.yn button.on.yes{background:var(--teal);border-color:var(--teal)}
.yn button.on.no{background:var(--b1);border-color:var(--b1)}
.check{display:flex;gap:11px;align-items:flex-start;padding:13px 0;font-size:13px;font-weight:600;line-height:1.45;cursor:pointer;color:var(--ink)}
.check + .check{border-top:1px solid var(--line)}
.check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary);margin-top:1px}
.reveal{display:none}
/* ===== training form ===== */
.scale-legend{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-radius:14px;padding:13px;margin-bottom:14px}
.scale-legend .sl{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;line-height:1.4}
.scale-legend .num{width:24px;height:24px;border-radius:8px;color:#fff;font-weight:900;display:grid;place-items:center;flex-shrink:0;font-size:13px}
.cmd{background:var(--surface);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow-sm);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.cmd .cname{font-weight:800;font-size:15.5px;flex:1}
.cmd input.cname{border:none;background:transparent;outline:none;font-family:inherit;width:100%;min-width:0;padding:0;color:var(--ink)}
.cmd input.cname::placeholder{color:var(--muted);font-weight:700}
.cmd-note-btn{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:5px 11px;font-family:inherit;font-weight:700;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.cmd-note-btn.active{background:var(--primary-soft);color:var(--primary-d);border-color:var(--primary)}
.cmd-note-wrap{display:none;padding:0 4px 10px}
.cmd-note-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13px;outline:none;box-sizing:border-box}
.seg{display:flex;gap:5px}
.seg button{width:36px;height:38px;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;font-family:inherit;font-weight:900;font-size:14px;cursor:pointer;color:var(--muted);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.seg button.snil{width:auto;padding:0 10px;font-size:12px;color:#888;min-width:44px}
.seg button.snil.on{background:#E0E0E0;border-color:#999;color:#333;font-weight:800}
.seg button.s1.on{background:var(--b1);border-color:var(--b1);color:#fff}
.seg button.s2.on{background:var(--b2);border-color:var(--b2);color:#fff}
.seg button.s3.on{background:var(--b3);border-color:var(--b3);color:#fff}
.seg button.s4.on{background:var(--b4);border-color:var(--b4);color:#fff}
.seg button.s5.on{background:var(--b5);border-color:var(--b5);color:#fff}
.score-box{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 4px 18px rgba(0,0,0,.06);margin:6px 0 4px;border:1.5px solid #C8E6B0}
.score-title{font-size:12px;font-weight:800;color:var(--primary-d);margin-bottom:10px}
.score-box .top{display:flex;align-items:baseline;gap:8px}
.score-box .total{font-size:36px;font-weight:900}
.score-box .max{font-size:16px;color:var(--muted);font-weight:700}
.score-box .band{margin-inline-start:auto;font-weight:800;font-size:14px;padding:6px 13px;border-radius:20px;color:#fff}
.score-bar{height:10px;border-radius:10px;background:var(--line);overflow:hidden;margin:11px 0}
.score-bar i{display:block;height:100%;border-radius:10px;transition:.3s}
.band-scale{display:flex;gap:3px;margin-top:4px}
.band-scale div{flex:1;text-align:center;font-size:8.5px;font-weight:700;color:var(--muted);padding:5px 1px;border-radius:7px;line-height:1.2;opacity:.45;transition:.2s}
.band-scale div.on{opacity:1;color:#fff}
/* ===== charts ===== */
.range-tabs{display:flex;gap:7px;margin-bottom:14px}
.range-tabs button{flex:1;border:none;font-family:inherit;font-weight:700;font-size:13px;padding:9px;border-radius:12px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer}
.range-tabs button.on{background:var(--teal);color:#fff}
.chart-card{background:var(--surface);border-radius:20px;padding:16px 12px 10px;box-shadow:var(--shadow-sm)}
.chart-summary{display:flex;gap:10px;margin-bottom:14px}
.chart-summary .s{flex:1;background:var(--surface);border-radius:16px;padding:13px;box-shadow:var(--shadow-sm);text-align:center}
.chart-summary .s .n{font-size:22px;font-weight:900}
.chart-summary .s .t{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.up{color:var(--b5)} .dn{color:var(--b1)}
.dog-select{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.dog-select::-webkit-scrollbar{display:none}
.dog-pick{border:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:20px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.dog-pick.on{background:var(--ink);color:#fff}
/* ===== calendar ===== */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:800}
.cal-nav-btn{background:var(--surface-2);border:1.5px solid var(--line);border-radius:8px;width:28px;height:28px;font-size:16px;font-weight:800;cursor:pointer;color:var(--ink);font-family:inherit;line-height:1}
.cal-nav-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.cal-cell.selected{outline:2.5px solid var(--primary);outline-offset:-2.5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .dn{font-size:11px;color:var(--muted);font-weight:700;text-align:center;padding:4px 0}
.cal-cell{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--surface);box-shadow:var(--shadow-sm);position:relative;gap:2px}
.cal-cell.empty{background:transparent;box-shadow:none}
.cal-cell.today{background:var(--primary);color:#fff;font-weight:900}
.cal-cell .dots{display:flex;gap:2px}
.cal-cell .dots i{width:5px;height:5px;border-radius:50%}
.demo-badge{display:inline-block;margin-right:8px;font-size:11px;font-weight:700;color:#888;background:#F0F0F0;border:1px solid #DDD;border-radius:8px;padding:2px 8px;vertical-align:middle}
.prof-sec-wrap{border:1.5px solid #C8E6B0;border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.prof-sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:800;font-size:15px;cursor:pointer;background:var(--surface);user-select:none}
.prof-sec-hdr:hover{background:#F0F9EA}
.prof-sec-arr{font-size:18px;color:var(--muted);transition:transform .2s;display:inline-block}
.prof-sec-hdr.open .prof-sec-arr{transform:rotate(90deg)}
.prof-sec-body .card,.prof-sec-body .trait{margin:0;border:none;border-radius:0}
#rep-dog-select{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
#rep-dog-select .fchip{font-size:14px;padding:8px 16px}
.rep-arrow{transition:transform .2s;display:inline-block}
.cal-tip{display:none;position:absolute;bottom:calc(100% + 6px);right:50%;transform:translateX(50%);background:#fff;border:1.5px solid #C8E6B0;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:100;line-height:1.8;text-align:right}
.cal-cell:hover .cal-tip{display:block}
.booking{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.booking:last-child{border-bottom:none}
.booking .dt{width:46px;text-align:center;flex-shrink:0}
.booking .dt .d{font-size:19px;font-weight:900;line-height:1}
.booking .dt .m{font-size:10px;color:var(--muted);font-weight:700}
.booking .info{flex:1}
.booking .info .nm{font-weight:800;font-size:14.5px}
.booking .info .ty{font-size:12px;color:var(--muted)}
/* ===== rooms ===== */
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.room{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:0 4px 18px rgba(0,0,0,.06);border:1.5px solid #C8E6B0}
.room .rt{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;margin-bottom:8px}
.room .rt .st{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.room .occu{display:flex;align-items:center;gap:8px}
.room .occu .av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.room .occu + .occu{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.room.free{border:2px dashed var(--line);box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:13px;min-height:84px}
/* ===== yards — daily schedule ===== */
.yard-date-label{font-size:19px;font-weight:900;color:var(--ink);margin:8px 4px 0;display:flex;align-items:center;gap:9px}
.yard-today-pill{font-size:10px;font-weight:800;color:var(--primary-d);background:var(--primary-soft);padding:3px 9px;border-radius:20px}
.datestrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 2px 4px}
.datestrip::-webkit-scrollbar{display:none}
.daypill{flex-shrink:0;width:50px;text-align:center;background:var(--surface);border-radius:16px;padding:9px 0;box-shadow:var(--shadow-sm);cursor:pointer;border:2px solid transparent}
.daypill .dn{font-size:11px;color:var(--muted);font-weight:700}
.daypill .dd{font-size:18px;font-weight:900;color:var(--ink);margin-top:1px}
.daypill.on{background:linear-gradient(135deg,var(--primary),var(--primary-d));border-color:transparent}
.daypill.on .dn,.daypill.on .dd{color:#fff}
.daypill.today{border-color:var(--primary)}
.daypill.today.on{border-color:transparent}
.yard-summary{font-size:12.5px;color:var(--muted);font-weight:600;margin:8px 4px 12px}
.yvt{border:none;background:transparent;padding:7px 13px;font-size:13px;font-weight:700;color:#666;cursor:pointer;font-family:inherit}
.yvt.on{background:var(--primary);color:#fff}
.yard-card{background:#fff;border-radius:14px;border:1.5px solid #C8E6B0;margin-bottom:12px;overflow:hidden}
.yard-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:900;font-size:15px}
.yard-card-body{padding:4px 14px 12px}
.yard-card-stat{font-size:12px;font-weight:700;margin-inline-start:auto;opacity:.75}
.yard-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1.5px dashed var(--primary);background:var(--primary-soft);color:var(--primary-d);border-radius:14px;padding:13px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;margin-bottom:14px}
.yard-add:active{transform:scale(.99)}
.yslot{display:flex;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.yslot:last-child{border-bottom:none}
.yslot.done{opacity:.5}
.ytime{flex-shrink:0;text-align:center;width:48px}
.ytime .t{font-size:16px;font-weight:900;color:var(--ink);line-height:1.05}
.ytime .e{font-size:11px;color:var(--muted)}
.ybar{width:4px;border-radius:4px;flex-shrink:0}
.ybody{flex:1;min-width:0}
.ytag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.ydogs{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.ydogs .yd{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface-2);padding:3px 11px 3px 5px;border-radius:20px}
.ydogs .yd .av{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.ynote{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600}
.yard-empty{text-align:center;padding:34px 20px;color:var(--muted);font-weight:600}
/* ===== bottom sheet ===== */
.sheet-overlay{position:absolute;inset:0;background:rgba(40,30,20,.45);z-index:90;display:none;align-items:flex-end}
.sheet-overlay.show{display:flex}
.sheet{background:var(--cream);width:100%;border-radius:26px 26px 0 0;padding:14px 18px calc(env(safe-area-inset-bottom) + 18px);animation:slideup .26s ease;max-height:88%;overflow-y:auto}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:42px;height:4px;border-radius:4px;background:var(--line);margin:2px auto 14px}
.sheet h3{font-size:18px;font-weight:900;margin:0 0 4px}
.sheet .sh-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:14px}
/* ===== recurring slots ===== */
.recur-toggle{display:flex;align-items:center;gap:9px;margin:10px 0 6px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;user-select:none}
.recur-toggle input{display:none}
.recur-box{width:20px;height:20px;border-radius:6px;border:2px solid #C8E6B0;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.recur-toggle input:checked~.recur-box{background:var(--primary);border-color:var(--primary)}
.recur-toggle input:checked~.recur-box::after{content:'✓';color:#fff;font-size:13px;font-weight:900}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;background:#fff;border-bottom:1px solid #E8F5E0;font-size:12px;font-weight:700;color:#444}
.ml-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ml-box{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid #ccc;flex-shrink:0}
.daychk-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.daychk{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#555;cursor:pointer}
.daychk input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.reg-yard-slot{background:#F0FAF0;border-radius:12px;border:1.5px solid #C8E6B0;padding:10px 12px;margin-bottom:10px}
.rys-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rys-row select{flex:1;min-width:140px}
.rys-row input[type=time]{width:90px}
.rys-remove{background:none;border:none;color:#e53935;font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.add-yard-slot-btn{width:100%;padding:9px;border-radius:10px;border:2px dashed var(--primary);background:#F8FFF2;color:var(--primary-d);font-size:14px;font-weight:800;cursor:pointer;margin-bottom:12px}
.add-yard-slot-btn:hover{background:#E8F5E0}
.recur-section{background:#F0FAF0;border-radius:14px;border:1.5px solid #C8E6B0;padding:12px 14px;margin-bottom:14px}
.recur-section-hdr{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:900;color:var(--primary-d);margin-bottom:10px}
.recur-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #D9EFD0;font-size:13px}
.recur-row:last-child{border-bottom:none}
.recur-del{background:none;border:none;color:#C0392B;font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px;flex-shrink:0}
.recur-del:hover{background:#FDECEA}
.recur-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.recur-days{font-size:11px;color:#888;font-weight:700}
/* ===== work-log placeholder ===== */
.soon-hero{text-align:center;padding:34px 20px 8px}
.soon-hero .ic{font-size:46px}
.soon-hero h2{font-size:21px;font-weight:900;color:var(--ink);margin:14px 0 6px}
.soon-hero p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
.mock{opacity:.55}
.mock .ml{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.mock .ml:last-child{border-bottom:none}
.mock .ml .h{margin-inline-start:auto;font-weight:900;color:var(--ink)}
/* ===== top nav ===== */
.tabbar{position:absolute;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;justify-content:space-around}
.tabbar button{border:none;background:none;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-weight:700;font-size:10.5px;cursor:pointer;padding:5px 12px;border-radius:14px}
.tabbar button .ti{font-size:21px;line-height:1}
.tabbar button.on{color:var(--primary-d)}
.tabbar button.on .ti{transform:translateY(-1px)}
.fab{position:absolute;bottom:24px;left:18px;z-index:55;width:56px;height:56px;border-radius:18px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;font-size:28px;font-weight:300;box-shadow:0 10px 24px rgba(224,106,32,.45);cursor:pointer}
.fab:active{transform:scale(.94)}
/* ===== toast ===== */
.toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:16px;font-weight:700;font-size:14px;box-shadow:var(--shadow);z-index:95;opacity:0;pointer-events:none;transition:.3s;display:flex;align-items:center;gap:9px;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== desktop layout (768px+) ===== */
@media (min-width: 768px) {
  body { justify-content: flex-start; }

  .device {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: 90px 1fr;
    grid-template-areas:
      "topbar  sidebar"
      "content sidebar";
    overflow: visible;
    min-height: 100vh;
  }

  .topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    padding: 0 36px;
    border-bottom: none;
    z-index: 40;
    background:
      radial-gradient(ellipse at 20% 80%, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--banner1) 55%, transparent) 0%, transparent 50%),
      radial-gradient(ellipse at 60% 60%, color-mix(in srgb, var(--banner2) 65%, transparent) 0%, transparent 60%),
      linear-gradient(135deg, var(--banner1) 0%, var(--banner2) 40%, var(--banner3) 70%, var(--banner2) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }

  .content {
    grid-area: content;
    padding: 28px 40px 60px;
    overflow-y: scroll;
    height: calc(100vh - 64px);
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    direction: ltr;
  }
  .content > * { direction: rtl; }
  .content::-webkit-scrollbar { width: 8px; display: block; }
  .content::-webkit-scrollbar-track { background: transparent; }
  .content::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; }

  .tabbar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 24px 12px;
    border-top: none;
    border-inline-start: 1px solid var(--line);
    background: #F0F7EA;
    backdrop-filter: none;
  }

  .tabbar button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 14px;
    width: 100%;
  }

  .tabbar button .ti { font-size: 20px; }

  .tabbar button.on {
    background: var(--primary-soft);
    color: var(--primary-d);
  }

  .fab {
    position: fixed;
    bottom: 28px;
    left: 28px;
    border-radius: 18px;
    z-index: 55;
  }

  .sheet-overlay { position: fixed; }
  .toast { position: fixed; }
}

/* ===== סרגל שלבי אילוף — ציון = שלב (1–8) ===== */
.cmd .cname-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cmd .cname-col .cname{flex:0 1 auto}
/* מחוון "שלב אחרון" ליד שם הפקודה (צבע נקבע inline לפי השלב) */
.stage-badge{align-self:flex-start;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;white-space:nowrap;line-height:1.5;color:#fff}

/* סרגל 8 השלבים — שורה אחת (נגלל אופקית אם צר) */
.stage-legend-box{margin:0 0 14px}
.stage-legend-head{font-size:12.5px;font-weight:800;color:var(--primary-d);margin:0 2px 8px}
.stage-legend-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.sl-cell{flex:1 0 74px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px 5px;text-align:center}
.sl-cell-n{width:24px;height:24px;border-radius:7px;color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center}
.sl-cell-t{font-size:9.5px;color:var(--muted);font-weight:700;line-height:1.2}

/* תפריט נפתח לבחירת השלב (1–8) לכל פקודה — נפרד מהציון (1–5) */
.stage-select{border:1.5px solid var(--line);background:var(--surface);border-radius:11px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);padding:6px 8px;cursor:pointer;max-width:132px;flex-shrink:0}
.stage-select:focus{outline:none;border-color:var(--primary)}
/* שורת פקודה באימון: שם+תג שלב קודם | בחירת שלב | ציון 1–5 | הערות — נשבר לשורה חדשה במסכים צרים */
.cmd-train-row{flex-wrap:wrap;row-gap:8px}
@media (max-width:420px){
  .cmd-train-row .cname-col{flex:1 1 100%;order:1}
  .cmd-train-row .stage-select{order:2}
  .cmd-train-row .seg{order:3}
  .cmd-train-row .cmd-note-btn{order:4}
}

/* שורת פקודה/מיומנות בתוך חלון עריכת דוח (צר, עד 420px) — נשברת לשורות במקום לגלוש אופקית */
.cmd-edit-row{flex-wrap:wrap;row-gap:8px}
.cmd-edit-row .cname{flex:1 1 100%;order:1}
.cmd-edit-row .stage-select{order:2}
.cmd-edit-row .seg{order:3}
.cmd-edit-row .cmd-note-btn{order:4}

/* צ'קבוקס "נדרש" למיומנות + שורת שלב ממוצע קטנה מתחת לציון הפקודות */
.req-check{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--muted);cursor:pointer;flex-shrink:0;user-select:none;white-space:nowrap}
.req-check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;margin:0}
.score-sub{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}

/* כפתורי ציון פקודות 1–8 (ראמפ צבעים לפי שלב) */
.seg.cmd8{flex-wrap:wrap}
.seg.cmd8 button.s1.on{background:#E76F51;border-color:#E76F51;color:#fff}
.seg.cmd8 button.s2.on{background:#EE8A5E;border-color:#EE8A5E;color:#fff}
.seg.cmd8 button.s3.on{background:#F2A65E;border-color:#F2A65E;color:#fff}
.seg.cmd8 button.s4.on{background:#E9C46A;border-color:#E9C46A;color:#fff}
.seg.cmd8 button.s5.on{background:#C7BE6E;border-color:#C7BE6E;color:#fff}
.seg.cmd8 button.s6.on{background:#9DB86F;border-color:#9DB86F;color:#fff}
.seg.cmd8 button.s7.on{background:#5EA98A;border-color:#5EA98A;color:#fff}
.seg.cmd8 button.s8.on{background:#2A9D8F;border-color:#2A9D8F;color:#fff}

/* ===== מוצר המאלפים (product:"trainer" בהגדרות) — body.mode-trainer ===== */
.trainer-only{display:none!important}
body.mode-trainer .trainer-only{display:revert!important}
body.mode-trainer #trainer-home{display:block!important}
body.mode-trainer .tabbar button.trainer-only{display:flex!important}
body.mode-trainer .pension-only{display:none!important}
.trainer-stats{grid-template-columns:repeat(3,1fr)}