/* Napi telefonos webapp – a Mac-panel v2.1 design-tokenjei (lap, fehér kártyák, pasztell ütem-színek, fekete akcent),
   telefonra: egy oszlop, 15 px alatt semmi, 44 px-es érintő-felületek. */
:root{
  --lap:#f3f2ee;--kartya:#fff;--kartya2:#f7f6f3;--ink:#141414;--ink2:#555;--ink3:#6f6f6a;
  --menta:#dcedd0;--menta-k:#9fc98a;--eg:#d6e6f6;--eg-k:#9fbfe0;--levendula:#e3ddf6;--levendula-k:#b9acdf;
  --vaj:#f6e9b8;--korall:#e85d4a;--kesz:#4cae7c;--fontos:#e9a23b;
  --niki1:#e9b3aa;--niki2:#b8746f;--david1:#4f93ad;--david2:#2b5f76;
  --r:16px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lap);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.app{max-width:600px;margin:0 auto;padding:calc(12px + var(--safe-t)) 16px calc(96px + var(--safe-b))}
.fo.tolt{opacity:.55;transition:opacity .2s}
.hibasav{display:flex;align-items:center;gap:12px;background:#fbe3df;color:#8c2a1e;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:600}
.hibasav button{margin-left:auto;background:#fff;border-radius:999px;padding:6px 14px;font-weight:700}

/* hős */
.hos{background:var(--kartya);border-radius:20px;padding:16px 18px;margin-bottom:12px}
.hos .nap{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.hos .sor{display:flex;align-items:center;gap:14px;margin-top:10px}
.hos .szam{font-size:30px;font-weight:700;line-height:1}
.hos .szam small{font-size:15px;color:var(--ink3);font-weight:500;margin-left:4px}
.hos .cimke{font-size:13px;color:var(--ink3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.sav{flex:1;height:10px;border-radius:999px;background:#ece9e2;overflow:hidden}
.sav i{display:block;height:100%;background:var(--kesz);border-radius:999px;transition:width .3s}
.hos .ki{margin-left:auto;font-size:13px;color:var(--ink3);font-weight:600}
.hos .mult{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--ink3)}

/* szűrő */
.szuro{display:flex;gap:8px;margin:0 0 12px}
.szuro button{flex:1;min-height:40px;border-radius:999px;background:var(--kartya);font-size:15px;font-weight:600;color:var(--ink2)}
.szuro button.aktiv{background:var(--ink);color:#fff}

/* Most fontos */
.fokusz{border-radius:18px;padding:14px 16px;margin-bottom:14px;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 55%),linear-gradient(135deg,#fbdad6 0%,#f0a79c 100%)}
.fokusz h3{margin:0 0 8px;font-size:15px;font-weight:700;letter-spacing:.02em}
.fokusz .t{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(0,0,0,.08);min-height:44px}
.fokusz .t:first-of-type{border-top:0}
.fokusz .t b{font-size:16px;font-weight:600;flex:1;min-width:0}
.fokusz .t span{font-size:13px;font-weight:700;white-space:nowrap;color:var(--ink2)}
.fokusz .t span.piros{color:#b2311f}

/* kártyák */
.szakasz{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.06em;margin:18px 6px 8px;text-transform:uppercase}
.kartya{background:var(--kartya);border-radius:var(--r);padding:12px 12px 12px 10px;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.kartya .kor{width:48px;height:48px;flex:none;display:grid;place-items:center;margin:-4px 0 -4px -2px}
.kor i{width:34px;height:34px;border-radius:50%;display:block;position:relative;border:2px solid #cfcec8;background:#fff}
.kor.napi i{background:var(--eg);border-color:var(--eg-k)}
.kor.heti i{background:var(--levendula);border-color:var(--levendula-k)}
.kor.havi i{background:var(--menta);border-color:var(--menta-k)}
.kor.kesz i{background:var(--ink);border-color:var(--ink)}
.kor.kesz i:after{content:"";position:absolute;left:11px;top:6px;width:6px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.kor.tilos i{opacity:.5}
.kartya .fo2{flex:1;min-width:0;padding-top:4px}
.kartya .cim{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.kartya.kesz .cim{color:var(--ink3);text-decoration:line-through;font-weight:500}
.kartya .mellek{font-size:15px;color:var(--ink3);margin-top:2px}
.kartya .mellek.korall{color:var(--korall);font-weight:700}
.kartya .kovetes{font-size:13px;color:var(--ink2);font-weight:600;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.chip{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1.2;background:var(--kartya2);color:var(--ink2)}
.chip.niki{background:linear-gradient(135deg,var(--niki1),var(--niki2));color:#fff}
.chip.david{background:linear-gradient(135deg,var(--david1),var(--david2));color:#fff}
.chip.fontos{background:var(--fontos);color:#fff}
.chip.surgos{background:var(--korall);color:#fff}
.chip.lejart{background:var(--korall);color:#fff}
.chip.jegyzet{color:var(--ink)}
.ures{background:var(--kartya);border-radius:var(--r);padding:18px 16px;color:var(--ink3);text-align:center;font-weight:600}

/* következő napok */
.csempe{border-radius:18px;padding:14px 16px;margin-top:14px}
.csempe.vaj{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 55%),linear-gradient(135deg,#f9efc8 0%,#f2dc98 100%)}
.csempe.eg{background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 55%),linear-gradient(135deg,#dfebf8 0%,#c3d7ef 100%)}
.csempe h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;color:rgba(0,0,0,.6);display:flex;align-items:baseline;gap:8px;cursor:pointer}
.csempe h4 b{font-size:17px;letter-spacing:0;color:var(--ink)}
.csempe h4 .nyil{margin-left:auto;font-size:18px;color:var(--ink2)}
.csempe ul{margin:0;padding:0;list-style:none}
.csempe li{font-size:15px;padding:7px 0;display:flex;gap:8px;align-items:center;border-top:1px solid rgba(0,0,0,.07);min-height:40px}
.csempe li:first-child{border-top:0}
.csempe li .n{flex:1;min-width:0;overflow-wrap:anywhere}
.csempe li .n.korall{color:#b2311f;font-weight:600}
.av{width:22px;height:22px;border-radius:50%;font-size:12.5px;font-weight:700;color:#fff;display:grid;place-items:center;flex:none}
.av.niki{background:linear-gradient(135deg,var(--niki1),var(--niki2))}
.av.david{background:linear-gradient(135deg,var(--david1),var(--david2))}
.csempe .semmi{color:var(--ink3);font-size:15px;padding:4px 0}

/* lábléc */
.lab{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + var(--safe-b));background:rgba(243,242,238,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(0,0,0,.06)}
.lab .fab{width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;flex:none}
.lapozo{flex:1;display:flex;align-items:center;justify-content:center;background:var(--kartya);border-radius:999px;padding:4px;min-height:44px;min-width:0}
.lapozo button{min-width:40px;min-height:36px;font-size:22px;font-weight:600;border-radius:999px;color:var(--ink2)}
.lapozo .datum{flex:1;font-size:15px;font-weight:700;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.lab .ikon{min-width:44px;height:44px;border-radius:50%;background:var(--kartya);font-size:15px;font-weight:700;color:var(--ink2);padding:0 10px;flex:none}
.lab .ikon#frissit{font-size:22px}
.lab .ikon.forog{animation:forog 1s linear infinite}
@keyframes forog{to{transform:rotate(360deg)}}

/* lap (alsó felugró) */
.lepel{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
.lap{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--kartya);border-radius:22px 22px 0 0;padding:14px 18px calc(18px + var(--safe-b));max-height:90vh;max-height:90dvh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.lap:focus{outline:none}   /* a lap a megnyitáskor a fókuszt kapja (képernyőolvasó, billentyű); a keret nélküli lapon nincs mit kijelölni */
.lap .fogo{width:40px;height:5px;border-radius:999px;background:#d9d7d0;margin:0 auto 12px}
.lap h2{margin:0 0 12px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.mezo{margin-bottom:14px}
.mezo label{display:block;font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.mezo input[type=text],.mezo input[type=date],.mezo textarea{width:100%;border:0;border-radius:12px;background:var(--kartya2);padding:12px 14px;font-size:17px;line-height:1.4;outline:none;-webkit-appearance:none;appearance:none;min-height:48px}
.mezo textarea{min-height:88px;resize:vertical}
.mezo input:focus,.mezo textarea:focus{box-shadow:0 0 0 2px var(--ink) inset}
.mezo .olvas{background:var(--kartya2);border-radius:12px;padding:12px 14px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.szegm{display:flex;gap:6px}
.szegm button{flex:1;min-height:42px;border-radius:999px;background:var(--kartya2);font-size:15px;font-weight:600;color:var(--ink2)}
.szegm button.aktiv{background:var(--ink);color:#fff}
.szegm button.aktiv.niki{background:linear-gradient(135deg,var(--niki1),var(--niki2))}
.szegm button.aktiv.david{background:linear-gradient(135deg,var(--david1),var(--david2))}
.szegm button.aktiv.fontos{background:var(--fontos)}
.szegm button.aktiv.surgos{background:var(--korall)}
.gombsor{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.gomb{min-height:46px;border-radius:999px;padding:0 18px;font-size:16px;font-weight:700;background:var(--kartya2);color:var(--ink);flex:1}
.gomb.fekete{background:var(--ink);color:#fff}
.gomb.veszely{color:#b2311f}
.gomb:disabled{opacity:.45}
.lap .info{font-size:15px;color:var(--ink3);margin:6px 0 14px}
.lap .hibaszov{color:#b2311f;font-weight:600;margin:8px 0}
.dat{display:flex;gap:8px;align-items:center}
.dat input{flex:1}
.dat .gomb{flex:0 0 auto;padding:0 14px;min-height:48px}

/* belépő */
.belep{background:var(--kartya);border-radius:20px;padding:24px 20px;margin-top:10vh;text-align:center}
.belep img{width:88px;height:88px;border-radius:22px;margin-bottom:10px}
.belep h1{margin:0 0 6px;font-size:28px}
.belep p{margin:0 0 18px;color:var(--ink2);font-size:16px}
.belep input{width:100%;border:0;border-radius:14px;background:var(--kartya2);padding:14px;font-size:24px;letter-spacing:.18em;text-align:center;text-transform:uppercase;font-weight:700;outline:none;margin-bottom:12px;-webkit-appearance:none}
.belep input:focus{box-shadow:0 0 0 2px var(--ink) inset}
.belep .gomb{width:100%}
.belep .hibaszov{color:#b2311f;font-weight:600;margin-top:12px}
.belep .kis{font-size:14px;color:var(--ink3);margin-top:16px}

.gombsor.negyes .gomb{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px}

/* Munka | Privát, telefon „E” (2026-10): csempék = fülek, Munka-lista */
.csempek{display:flex;gap:8px;margin-bottom:12px}
.cs{flex:1 1 0;min-width:0;min-height:78px;text-align:left;border-radius:18px;padding:10px 12px;border:2px solid transparent;display:flex;flex-direction:column;gap:2px}
.cs.munka{background:var(--ink);color:#fff}
.cs.privat{background:var(--kartya)}
.cs.munka.on{border-color:var(--korall)}
.cs.privat.on{border-color:var(--ink)}
.cs .l{font-size:11px;font-weight:700;letter-spacing:.08em;opacity:.65}
.cs .s{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs .s b{font-size:22px;font-weight:700}
.cs.munka .s b{color:var(--korall)}
.cs .x{font-size:12.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs .csav{display:block;height:5px;background:#ecebe6;border-radius:3px;margin-top:6px;overflow:hidden}
.cs .csav i{display:block;height:100%;background:var(--kesz)}
.claudesor{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border-radius:14px;padding:10px 14px;margin-bottom:10px;min-height:52px;font-size:15px;background:linear-gradient(135deg,#ece7fb,#d3caf1)}
.claudesor small{display:block;font-size:12.5px;font-weight:500;color:rgba(0,0,0,.6)}
.claudesor em{font-style:normal}
.claudesor em.korall{color:#b2311f;font-weight:700}
.claudesor .nyil{margin-left:auto;font-size:20px;color:var(--ink2)}
/* a két szűrő-menü tartalom szerinti szélességű (a legszélesebb opció, darabszámmal): ha nem fér egy sorba (320-389 px, háromjegyű darabszám), a második külön sorba tör, a darabszám sosem vágódik le */
.mszuro{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:10px}
.mszuro select{flex:1 1 auto;min-width:0;max-width:100%;min-height:40px;border:0;border-radius:999px;background:var(--kartya);padding:0 12px;font-size:16px;font-weight:600;color:var(--ink2);-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.mkartya{position:relative;display:flex;gap:4px;align-items:center;background:var(--kartya);border-radius:14px;padding:6px 10px 6px 4px;margin-bottom:6px;min-height:56px;overflow:hidden}
.mkartya.bep:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--korall)}
.mkor{width:44px;height:44px;flex:none;display:grid;place-items:center}
.mkor i{width:24px;height:24px;border-radius:50%;border:1.5px solid #cfcec8;background:#fff;display:block;position:relative}
.mkor.vedett i{border-style:dashed}
.mkor.kesz i{background:var(--ink);border-color:var(--ink)}
.mkor.kesz i:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.mtest{flex:1;min-width:0;padding:2px 0}
.mkartya .cim{font-size:15.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mkartya.kesz .cim{color:var(--ink3);text-decoration:line-through;font-weight:500}
.mkartya .meta{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mjobb{flex:none;max-width:34%;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.mdat{font-size:12.5px;font-weight:600;color:var(--ink3)}
.piros,.mdat.piros{color:#b2311f}
.mprio{font-size:12px;font-weight:700;white-space:nowrap}
.mprio.fontos{color:var(--fontos)}
.mprio.surgos{color:var(--korall)}
.vchip{font-size:12.5px;font-weight:600;margin-top:2px;color:var(--ink2)}
.vchip.ok{color:var(--kesz)}
.vchip.korall{color:#b2311f}
.rejtett{font-size:12.5px;color:var(--ink3);text-align:center;margin:14px 6px}
.mkartya .av{margin-left:2px}
.lab .zfr{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:999px;background:var(--kartya);font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab .zfr.korall{color:#b2311f}
.fokusz .tobb{display:block;width:100%;text-align:left;min-height:36px;padding-top:6px;font-size:14px;font-weight:700;color:var(--ink2)}

/* Munka sor-lap (alsó lap) */
.cimkek{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--kartya2);color:var(--ink2)}
.tag.bep{background:#fcefec;color:#c2412f}
.ketoszlop{display:flex;gap:8px}
.ketoszlop>*{flex:1 1 0;min-width:0}
.doboz{background:var(--kartya2);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.doboz .l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.doboz .v{font-size:15px;overflow-wrap:anywhere}
.lap .vchip{margin:0 0 10px;font-size:14px}
.nagygomb{display:block;width:100%;min-height:52px;margin:4px 0 14px;padding:10px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:17px;font-weight:700;text-align:center}
.nagygomb small{display:block;font-size:12.5px;font-weight:500;opacity:.75}
.nagygomb:disabled{opacity:.55}
.gomb.link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.gombsor.harmas .gomb,.gombsor.ketto .gomb{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;white-space:nowrap;font-size:15px}
.lap .info{overflow-wrap:anywhere}
/* prioritás: a csak jelző opció (a Zentrale-ben álló Fontos) kikapcsolt gomb, nem koppintható; a Normál hatásának megjegyzése a szegmens alatt */
.szegm button.csak-jel{cursor:default}
.szegm button.csak-jel:not(.aktiv){background:transparent;box-shadow:inset 0 0 0 1.5px var(--fontos);color:#9a6208}
.szegm-megj{font-size:13px;color:var(--ink3);margin-top:6px}

/* Claude-feladatok lap (6. feladat): teljes magasságú lap, rögzített fej (cím, keresőmező, hibaüzenet) és lábléc (Bezárás), soronként cím + „→ Enyém” + fekete „Indítás” */
.lap.teljes{height:90vh;height:90dvh;padding-top:0;padding-bottom:0}   /* a rögzített fej és lábléc a lap szélén áll: nincs térköz, amelyen át a lista kilátszana */
.lap.teljes .fogo{margin:14px auto 0}
.chead{position:sticky;top:0;z-index:2;background:var(--kartya);padding-top:12px}
.chead h2{margin-bottom:10px}
.chead .mezo{margin-bottom:6px}
.chiba{display:flex;align-items:center;gap:8px}
.chiba .hibaszov{flex:1;min-width:0;margin:2px 0 6px}
.chiba .gomb.kicsi{margin:0 0 6px}
.clab{position:sticky;bottom:0;z-index:2;background:var(--kartya);margin-top:6px;padding:10px 0 calc(14px + var(--safe-b));border-top:1px solid #ecebe6}
.mezo input[type=search]{width:100%;border:0;border-radius:12px;background:var(--kartya2);padding:12px 14px;font-size:17px;min-height:48px;outline:none;-webkit-appearance:none;appearance:none}
.mezo input[type=search]:focus{box-shadow:0 0 0 2px var(--ink) inset}
.csor{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #ecebe6}
.csor:first-child,.lap .info + .csor{border-top:0}
.csor .ct{flex:1;min-width:0}
.csor .cim{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.csor .meta{font-size:12.5px;color:var(--ink3)}
.gomb.kicsi{flex:0 0 auto;min-height:40px;padding:0 12px;font-size:14px}
.csor .gomb.kicsi{padding:0 9px}
.csor .gomb.kicsi[data-c="indit"]{min-width:7.8em}   /* az „Indítás” doboza a „Másolva ✓” és a (szélesebb) „Nem sikerült” feliratot is befogadja: egyik sem tolja odébb a „→ Enyém” gombot (375 px-en a cím oszlopa így is ≥ 130 px) */
@media (max-width:359px){   /* keskeny kijelző: a gombok a cím alá kerülnek, a cím teljes szélességű */
  .csor{flex-wrap:wrap}
  .csor .ct{flex:1 1 100%}
  .csor .gomb.kicsi{flex:1 1 0}
}

/* Új munka lap (7. feladat): a két legördülő (ügyfél, téma) a szövegmezők formájában, legalább 16 px (iOS nem nagyít fókuszkor) */
.mezo select{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--kartya2);padding:12px 34px 12px 14px;font-size:17px;outline:none;text-overflow:ellipsis;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.mezo select:focus{box-shadow:0 0 0 2px var(--ink) inset}