:root{
  --primary:#0b6b86; --primary-dark:#084d62; --primary-soft:#dff1f6;
  --ok:#136b3a; --ok-soft:#e0f6e8; --ok-btn:#16803f;
  --bad:#b42318; --bad-soft:#fde8e6;
  --warm:#b45309; --warm-soft:#fff1dc;
  --morning:#b45309; --morning-bg:#fff0d6;
  --noon:#c2410c;   --noon-bg:#ffe6d5;
  --evening:#be185d; --evening-bg:#ffe4ee;
  --night:#4338ca;  --night-bg:#e6e8ff;
  --ink:#14232d; --ink-soft:#43545f; --line:#e3d9cc;
  --bg:#fdf8f1; --card:#fff;
  --r:28px; --r-sm:18px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --shadow:0 6px 22px rgba(11,107,134,.13);
  --t:200ms;
}
*{box-sizing:border-box;margin:0}
body{font-family:'Rubik',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:20px;line-height:1.5;
  padding-block-end:calc(104px + env(safe-area-inset-bottom))}
body.wizard{padding-block-end:var(--s3)}
.app{max-width:480px;margin-inline:auto;padding:var(--s2)}
svg{display:block}
button{font-family:inherit}
:focus-visible{outline:4px solid #f59e0b;outline-offset:3px}
[hidden]{display:none!important}

header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-block-end:var(--s2)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:48px;height:48px}
.brand b{white-space:nowrap;font-size:22px;font-weight:700;color:var(--primary-dark)}
.size-btn{white-space:nowrap;min-height:48px;padding-inline:18px;border:2px solid var(--primary);background:#fff;color:var(--primary-dark);
  border-radius:999px;font:700 18px 'Rubik',sans-serif;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background var(--t)}
.size-btn:hover{background:var(--primary-soft)}
.size-btn svg{width:22px;height:22px}

.hero{background:linear-gradient(135deg,#0b6b86 0%,#0f8aa0 60%,#2bb3a3 100%);color:#fff;border-radius:var(--r);padding:var(--s3);
  display:flex;align-items:center;gap:var(--s2);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-text{flex:1;position:relative;z-index:1}
.hero h1{font-size:30px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:10px}
.hero h1 svg{width:36px;height:36px;flex:none}
.hero p{font-size:20px;opacity:.95;margin-block-start:6px}
.ring{position:relative;width:92px;height:92px;flex:none;z-index:1}
.ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.ring .tr{stroke:rgba(255,255,255,.28)}.ring .pg{stroke:#fff;transition:stroke-dashoffset 400ms}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:700}

.next{margin-block-start:var(--s3);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:2px solid var(--primary-soft)}
.next-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--s3);background:var(--warm-soft)}
.label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--warm)}
.label svg{width:28px;height:28px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:500;color:var(--warm);background:#fff;border-radius:999px;padding:4px 14px}
.chip svg{width:20px;height:20px}
.next-body{padding:var(--s3)}
.time{font-size:64px;font-weight:700;color:var(--primary-dark);line-height:1.1}
.med{display:flex;align-items:center;gap:16px;margin-block:var(--s2) var(--s3)}
.tile{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;flex:none}
.tile svg{width:40px;height:40px}
.med-name{font-size:30px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.med-note{font-size:20px;color:var(--ink-soft)}
.take{width:100%;min-height:84px;border:0;border-radius:var(--r-sm);background:linear-gradient(180deg,#1c9a4e,#16803f);color:#fff;
  font:700 34px 'Rubik',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;
  box-shadow:0 8px 18px rgba(22,128,63,.32);transition:transform var(--t),filter var(--t)}
.take:hover{filter:brightness(.95)}.take:active{transform:scale(.98)}
.take svg{width:40px;height:40px}
.done-card,.empty{margin-block-start:var(--s3);border-radius:var(--r);padding:var(--s4) var(--s3);text-align:center}
.done-card{background:var(--ok-soft);border:2px solid #b7e4c7}
.done-card svg{width:84px;height:84px;margin-inline:auto}
.done-card h2{font-size:30px;color:var(--ok);margin-block-start:var(--s2)}
.empty{background:var(--card);border:2px dashed var(--line)}
.empty .tile{margin-inline:auto;width:88px;height:88px;border-radius:26px;margin-block-end:var(--s2)}
.empty .tile svg{width:50px;height:50px}
.empty h2{font-size:28px}.empty p{color:var(--ink-soft);margin-block:8px var(--s3)}

.group-h{display:flex;align-items:center;gap:12px;margin-block:var(--s4) 12px}
.group-h .gi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none}
.group-h .gi svg{width:30px;height:30px}
.group-h h2{font-size:24px;font-weight:700}
.group-h span{margin-inline-start:auto;font-size:18px;font-weight:700;border-radius:999px;padding:4px 14px}
ul{list-style:none;padding:0;display:grid;gap:12px}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-sm);padding:14px 16px;min-height:92px;border:2px solid var(--line)}
.row .tile{width:60px;height:60px;border-radius:18px}.row .tile svg{width:34px;height:34px}
.row .info{flex:1;min-width:0}
.row .n{font-size:22px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.row .t{display:flex;align-items:center;gap:6px;font-size:19px;color:var(--ink-soft)}
.row .t svg{width:20px;height:20px}
.dot{width:52px;height:52px;border-radius:50%;border:3px solid #cbbfae;display:grid;place-items:center;flex:none;background:#fff;cursor:pointer;padding:0}
.dot svg{width:28px;height:28px;display:none}
.row.up-next{border-color:#f59e0b;background:#fffaf0}
.row.taken{background:var(--ok-soft);border-color:#b7e4c7}
.row.taken .dot{background:var(--ok-btn);border-color:var(--ok-btn)}
.row.taken .dot svg{display:block}
.tag{font-size:18px;font-weight:700;color:var(--ok)}

.help{margin-block-start:var(--s4);display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#0b6b86,#084d62);color:#fff;
  border-radius:var(--r);padding:var(--s3);text-decoration:none;box-shadow:var(--shadow);width:100%;border:0;text-align:start;font-size:inherit;cursor:pointer}
.help .hi{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.help .hi svg{width:34px;height:34px}
.help b{display:block;font-size:24px}.help small{font-size:19px;opacity:.92}

nav{position:fixed;inset-inline:0;bottom:0;background:#fff;border-top:2px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:5}
body.wizard nav{display:none}
nav ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:480px;margin-inline:auto}
nav button{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;border-radius:18px;color:var(--ink-soft);
  background:none;border:0;font-size:18px;font-weight:500;cursor:pointer;transition:background var(--t)}
nav button svg{width:30px;height:30px}
nav button[aria-current="page"]{background:var(--primary-soft);color:var(--primary-dark);font-weight:700}

/* מסכים נוספים */
.page-h{font-size:32px;font-weight:700;margin-block:var(--s2)}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;border-radius:var(--r-sm);border:0;
  font:700 24px 'Rubik',sans-serif;cursor:pointer;transition:filter var(--t),transform var(--t);padding-inline:var(--s3)}
.btn:active{transform:scale(.98)}
.btn svg{width:30px;height:30px}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(11,107,134,.28)}
.btn.primary:hover{filter:brightness(.94)}
.btn.primary:disabled{background:#b9c8cf;box-shadow:none;cursor:not-allowed}
.btn.green{background:var(--ok-btn);color:#fff}
.btn.soft{background:var(--primary-soft);color:var(--primary-dark)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn.small{min-height:52px;font-size:20px;width:auto;flex:1}
.stack{display:grid;gap:12px}
.mcard{background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:16px}
.mcard .top{display:flex;align-items:center;gap:14px}
.mcard .tile{width:60px;height:60px;border-radius:18px}.mcard .tile svg{width:34px;height:34px}
.mcard .info{flex:1;min-width:0}
.mcard .n{font-size:24px;font-weight:700;overflow-wrap:anywhere}
.mcard .d{font-size:19px;color:var(--ink-soft)}
.times{display:flex;flex-wrap:wrap;gap:8px;margin-block:12px}
.times span{background:var(--primary-soft);color:var(--primary-dark);font-weight:700;font-size:19px;border-radius:999px;padding:4px 14px}
.actions{display:flex;gap:12px}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:14px 8px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:16px;color:var(--ink-soft)}
.day b{font-weight:500}
.day .c{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px}
.day .c svg{width:22px;height:22px}
.c.full{background:var(--ok-btn);color:#fff}
.c.none{background:var(--bad-soft);color:var(--bad)}
.c.part{background:var(--warm-soft);color:var(--warm)}
.c.pend{background:#fff;border:3px solid var(--primary);color:var(--primary-dark)}
.c.off{border:2px dashed var(--line);color:#a79b8c}
.day.today b{color:var(--primary-dark);font-weight:700}
.legend{font-size:18px;color:var(--ink-soft);margin-block-start:10px}

/* אשף הוספה */
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:var(--s2)}
.step{font-size:20px;font-weight:700;color:var(--primary-dark)}
.xbtn{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.xbtn svg{width:26px;height:26px}
.bar{height:10px;border-radius:99px;background:var(--primary-soft);overflow:hidden;margin-block-end:var(--s3)}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width 300ms}
.wiz h2{font-size:30px;line-height:1.25;margin-block-end:var(--s2)}
.wiz h2:focus{outline:none}
.field{width:100%;min-height:68px;font:500 26px 'Rubik',sans-serif;padding:10px 18px;border:3px solid var(--primary);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.field::placeholder{color:#8a97a0}
.hint{color:var(--ink-soft);margin-block:10px var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-block:var(--s2)}
.pick{min-height:64px;padding:8px 22px;border-radius:var(--r-sm);border:3px solid var(--line);background:#fff;color:var(--ink);font:700 24px 'Rubik',sans-serif;cursor:pointer;
  display:flex;align-items:center;gap:10px;transition:background var(--t),border-color var(--t)}
.pick svg{width:26px;height:26px}
.pick small{display:block;font-size:16px;font-weight:500;color:var(--ink-soft)}
.pick[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-dark)}
.pick .ck{display:none}.pick[aria-pressed="true"] .ck{display:block}
.addtime{display:flex;gap:12px;align-items:stretch;margin-block-start:var(--s2)}
.addtime .field{font-size:26px;flex:1;min-width:0}
.addtime .btn{width:auto;flex:none}
.stepper{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-block:var(--s3)}
.stepper button{width:76px;height:76px;border-radius:50%;border:0;background:var(--primary);color:#fff;display:grid;place-items:center;cursor:pointer}
.stepper button:disabled{background:#b9c8cf}
.stepper button svg{width:36px;height:36px}
.stepper output{font-size:34px;font-weight:700;min-width:150px;text-align:center;white-space:nowrap}
.stepper{gap:var(--s2)}
.sub{font-size:22px;font-weight:700;margin-block:var(--s3) 8px}
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.shape{min-height:96px;border-radius:var(--r-sm);border:3px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font:500 17px 'Rubik',sans-serif;color:var(--ink);cursor:pointer;padding:6px 2px}
.shape svg{width:34px;height:34px}
.shape[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);font-weight:700}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sw{height:56px;border-radius:50%;border:3px solid transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.sw svg{width:28px;height:28px;display:none}
.sw[aria-pressed="true"]{border-color:var(--ink)}.sw[aria-pressed="true"] svg{display:block}
.wiz-nav{display:flex;gap:12px;margin-block-start:var(--s4)}
.wiz-nav .btn.soft{width:auto;flex:none}
.wiz-nav .btn.primary{flex:1}

.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:var(--s3)}
.card h2{font-size:24px;margin-block-end:8px}
.card .stack{margin-block-start:var(--s2)}
label.l{display:block;font-size:20px;font-weight:700;margin-block:12px 6px}
.note{font-size:18px;color:var(--ink-soft);margin-block-start:var(--s2)}
.err{color:var(--bad);font-weight:700;font-size:19px;margin-block-start:8px}

.low{display:flex;align-items:center;gap:12px;margin-block-start:var(--s2);background:var(--warm-soft);border:2px solid #f59e0b;color:#7a3a05;border-radius:var(--r-sm);padding:14px 18px;font-weight:700;font-size:20px}
.low svg{width:30px;height:30px;flex:none}
.modal .box .btn{font-size:20px;padding-inline:12px}
.modal .box .time{font-size:56px}.modal .box .label{font-size:24px}
.modal{position:fixed;inset:0;background:rgba(16,33,45,.55);display:grid;place-items:center;padding:var(--s2);z-index:20}
.modal .box{background:#fff;border-radius:var(--r);padding:var(--s3);width:100%;max-width:420px;box-shadow:var(--shadow)}
.modal h2{font-size:26px;margin-block-end:8px}.modal p{color:var(--ink-soft);margin-block-end:var(--s3)}
.toast{position:fixed;inset-inline:16px;bottom:calc(100px + env(safe-area-inset-bottom));max-width:440px;margin-inline:auto;background:var(--ink);color:#fff;
  border-radius:var(--r-sm);padding:14px 20px;font-size:20px;font-weight:700;text-align:center;z-index:30}

body.big{font-size:24px}
body.big .med-name{font-size:36px}body.big .time{font-size:76px}body.big .row .n{font-size:26px}
body.big .mcard .n{font-size:28px}body.big .day{font-size:18px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}