/* הפנקס – כחול וזהב כמו מערכת הפניות. טלפון קודם, עמודה אחת. */
:root{
  --bg:#f3f4f7; --surface:#fff; --ink:#18202e; --muted:#5a6475; --line:#dde1e8; --hover:#eef2f8;
  --accent:#1f3d6e; --accent-soft:#e6ecf6; --gold:#a07a2c; --gold-soft:#f6efe0;
  --red:#c62f2f; --red-soft:#fbeceb; --orange:#c96a12; --orange-soft:#fdf0e2; --green:#1d6b3a; --green-soft:#e5f3ea;
  --pink:#b0237a; --pink-soft:#fbe9f4;
  --f-display:"Frank Ruhl Libre",Georgia,serif; --f-body:"Assistant","Segoe UI",Arial,sans-serif;
  --nav-h:62px; --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f141c; --surface:#171e29; --ink:#e7ebf2; --muted:#9aa4b5; --line:#2b3546; --hover:#1d2634;
  --accent:#8fb0e6; --accent-soft:#1e2b40; --gold:#d3ad5f; --gold-soft:#2e2717;
  --red:#ff8a80; --red-soft:#3a1f1f; --orange:#f5a65b; --orange-soft:#3a2a18; --green:#7fd19a; --green-soft:#173023;
  --pink:#f08ccd; --pink-soft:#3a1d30; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--f-body);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
#app{max-width:680px;margin:0 auto;min-height:100%;padding-bottom:calc(var(--nav-h) + var(--safe-b) + 20px)}

/* כותרת */
.top{position:sticky;top:0;z-index:5;background:var(--accent);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (prefers-color-scheme:dark){.top{background:#16294a}}
.top h1{margin:0;font:700 26px/1.1 var(--f-display);letter-spacing:.3px}
.top h1::after{content:"";display:block;width:34px;height:3px;background:#d3ad5f;border-radius:2px;margin-top:5px}
.dates{font-size:13px;opacity:.85;margin-top:4px}
.demo-badge{background:#d3ad5f;color:#1f2a3c;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px}

main{padding:14px 14px 0}
h2.sec{font:700 15px var(--f-body);color:var(--muted);margin:20px 4px 8px;display:flex;align-items:center;gap:8px}
h2.sec:first-child{margin-top:4px}
h2.sec .count{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:0 8px;font-size:13px}
h2.sec.red{color:var(--red)} h2.sec.red .count{background:var(--red-soft);color:var(--red)}
.muted{color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:28px 12px;background:var(--surface);border:1px dashed var(--line);border-radius:14px}

/* רשימות */
.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer}
.row:first-child{border-top:0}
.row:active{background:var(--hover)}
.row .main{flex:1;min-width:0}
.row .title{font-weight:600}
.row.done .title{text-decoration:line-through;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;color:var(--muted);margin-top:3px}
.meta .late{color:var(--red);font-weight:700}
.check{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:none;margin-top:1px;display:grid;place-items:center;cursor:pointer;padding:0}
.check.on{background:var(--green);border-color:var(--green);color:#fff}
.check.on::after{content:"✓";font-size:15px;font-weight:700}
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pill.urgent{background:var(--orange-soft);color:var(--orange)}
.pill.critical{background:var(--red-soft);color:var(--red)}
.pill.waiting{background:var(--pink-soft);color:var(--pink)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.grey{background:var(--hover);color:var(--muted)}
.when-box{flex:none;text-align:center;min-width:54px;border-inline-start:3px solid var(--gold);padding-inline-start:10px}
.when-box b{display:block;font:700 18px var(--f-display);color:var(--accent)}
.when-box span{font-size:12.5px;color:var(--muted)}

/* צ'יפים וסגמנטים */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:600;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.chip.on{color:#0f141c}}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.search{flex:1;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--surface)}
.toggle{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.seg{display:flex;background:var(--hover);border-radius:12px;padding:3px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;padding:8px;border-radius:10px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* כרטיס סיכום ביום */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer}
.stat b{display:block;font:700 24px var(--f-display);color:var(--accent)}
.stat.red b{color:var(--red)} .stat.pink b{color:var(--pink)}
.stat span{font-size:13px;color:var(--muted)}

/* ניווט תחתון */
.tabs{position:fixed;bottom:0;inset-inline:0;z-index:6;display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs button{flex:1;max-width:170px;height:var(--nav-h);border:0;background:none;font-size:13px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.tabs .ico{font-size:19px;line-height:1}
.tabs button.on{color:var(--accent)}
.tabs button.on .ico{color:var(--gold)}
.tabs .fab{flex:none;width:58px;height:58px;max-width:none;border-radius:50%;background:var(--gold);color:#fff;font-size:32px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.25);margin:-18px 4px 0;align-self:flex-start}
.tabs button{padding:0 2px}

/* גיליון תחתון */
.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:680px;max-height:92vh;border-radius:20px 20px 0 0;background:var(--surface);color:var(--ink)}
.sheet::backdrop{background:rgba(10,15,25,.45)}
@media (min-width:700px){.sheet{margin:auto;border-radius:20px}}
.sheet-body{padding:8px 18px calc(18px + var(--safe-b));overflow:auto;max-height:92vh}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);padding:10px 0;z-index:1}
.sheet-head h3{margin:0;font:700 20px var(--f-display)}
.x{border:0;background:var(--hover);width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer}

/* טפסים */
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-weight:600;font-size:14px;color:var(--muted)}
.form input,.form select,.form textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);color:var(--ink);font-weight:400;font-size:16px;width:100%}
.form textarea{min-height:70px;resize:vertical}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:13px;color:var(--muted);font-weight:400}
.hint.ok{color:var(--green)}
.opts{display:flex;gap:6px;flex-wrap:wrap}
.opts button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 12px;font-weight:600;cursor:pointer}
.opts button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.btn.primary{color:#0f141c}}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.danger{color:var(--red)}
.btn.small{padding:6px 12px;font-size:14px}
.btn:disabled{opacity:.5}
.grow{flex:1}

/* תיק פגישה */
.file h3.subject{font:700 22px/1.25 var(--f-display);margin:4px 0 6px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:15px;margin:10px 0}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.block{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.block h4{margin:0 0 8px;font-size:15px;display:flex;align-items:center;justify-content:space-between}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.doc{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.doc:first-of-type{border-top:0}
.doc a{flex:1;color:var(--accent);font-weight:600;text-decoration:none;word-break:break-word;cursor:pointer}
.doc small{color:var(--muted)}
pre.prompt{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13.5px;direction:rtl}
.note{background:var(--gold-soft);border-radius:12px;padding:10px 12px;font-size:14px}

/* כניסה */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--accent);padding:20px}
.login-card{background:var(--surface);border-radius:20px;padding:24px;width:100%;max-width:380px}
.login-card h1{margin:0;font:700 30px var(--f-display);color:var(--accent)}
.login-card form{display:grid;gap:12px;margin-top:14px}
.login-card label{display:grid;gap:5px;font-weight:600}
.login-card input{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);font-size:16px}
.msg{min-height:1.2em;margin:0;color:var(--red);font-size:14px}

.toast{position:fixed;z-index:20;bottom:calc(var(--nav-h) + var(--safe-b) + 90px);left:50%;transform:translateX(-50%) translateY(20px);background:#18202e;color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--red)}

/* גרסה 2 */
.top-btns{display:flex;align-items:center;gap:8px}
.icon-btn{border:0;background:rgba(255,255,255,.14);color:#fff;width:38px;height:38px;border-radius:50%;font-size:17px;cursor:pointer}
.quick-bar{width:100%;display:flex;align-items:center;gap:10px;border:1px dashed var(--gold);background:var(--gold-soft);color:var(--ink);border-radius:14px;padding:12px 14px;font-weight:700;cursor:pointer;text-align:start}
.quick-bar span{font-size:20px}
.banner{margin-top:10px;background:var(--accent);color:#fff;border-radius:14px;padding:12px 14px;font-weight:600;cursor:pointer}
@media (prefers-color-scheme:dark){.banner{background:#16294a}}
.banner b{font:700 20px var(--f-display);margin-inline-end:4px}
h2.sec.day{font-size:14px;color:var(--accent)}
.row .k{font-size:15px}
.meta .kind{color:var(--accent);font-weight:600}
.row.static{cursor:default}
.row.special,.file.special{background:linear-gradient(180deg,var(--gold-soft),transparent 80%)}
.row.special .title{font-family:var(--f-display);color:var(--gold);font-size:17px}
.row.special .when-box{border-color:var(--accent)}
.pill.marash{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold)}
.travel{display:inline-block;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:none}
.outcome{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
@media (prefers-color-scheme:dark){.btn.green{color:#0f141c}}
.btn.danger.outline{border-color:var(--red)}
.seg.scroll{overflow-x:auto;scrollbar-width:none}
.seg.scroll button{flex:none;padding:8px 12px;white-space:nowrap}
.cards .stat.green b{color:var(--green)}
.list.pad{padding:10px 14px}
.bar-row{display:grid;grid-template-columns:minmax(90px,auto) 1fr auto;gap:4px 10px;align-items:center;padding:6px 0;font-size:14px}
.bar-row small{grid-column:1/-1;color:var(--muted);margin-top:-4px}
.bar{height:10px;background:var(--hover);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{color:var(--muted);font-weight:600;font-size:12.5px;text-align:center}
.tbl td{padding:6px 2px;text-align:center;border-top:1px solid var(--line)}
.tbl td:first-child{text-align:start;font-weight:600}
.tbl .late{color:var(--red);font-weight:700}
.form .check-line{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.form .check-line input{width:auto}
.form .mini-l{font-size:12.5px}
.form fieldset.contact{border:1px solid var(--line);border-radius:12px;padding:8px 10px 10px;display:grid;gap:8px;margin:0}
.form fieldset.contact legend{font-weight:600;font-size:14px;color:var(--muted);padding:0 4px}
.closed-box{border-radius:12px;padding:10px 12px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;font-weight:600}
.closed-box.done{background:var(--green-soft);color:var(--green)}
.closed-box.canceled{background:var(--red-soft);color:var(--red)}
.actions.top{margin:0 0 12px}
.rem-list{display:flex;flex-wrap:wrap;gap:6px}
.pill.rem button{border:0;background:none;color:inherit;cursor:pointer;padding:0 2px}
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plus-grid button{border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:12px 4px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px}
.plus-grid button span{font-size:24px}
.plus-grid button.special{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);font-family:var(--f-display)}
.confirm-row{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:6px}
.fld{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);font-size:16px;color:var(--ink)}
.lbl{display:block;font-size:13px;color:var(--muted);margin:8px 0 4px}
.file details summary{cursor:pointer;color:var(--accent);font-weight:600;margin:8px 0}
.pre{white-space:pre-wrap;margin:0}
.up-btns{display:flex;gap:4px;flex-wrap:wrap}
.dial{color:var(--green);font-weight:700;text-decoration:none}
dialog.mini{border:0;border-radius:18px;padding:16px;width:min(420px,92vw);background:var(--surface);color:var(--ink)}
dialog.mini::backdrop{background:rgba(10,15,25,.5)}
dialog.mini h3{margin:0;font:700 19px var(--f-display)}
.banner.gold{background:var(--gold);margin:0 0 10px}
.row.gcal .when-box{border-color:var(--line)}
.row.gcal .title{color:var(--muted)}
p.note[data-act]{cursor:pointer}