/* ============================================================
   optimalizált – Tartalomnaptár  |  közös stíluslap
   ============================================================ */

:root{
  --forest:#1A3B2E;
  --forest-2:#214836;
  --forest-3:#2B5843;
  --green:#1EBC43;
  --green-600:#17A33A;
  --green-50:#E8F9EE;
  --green-100:#CFF2DA;

  --bg:#F5F6F3;
  --surface:#FFFFFF;
  --surface-2:#FAFBF9;
  --surface-3:#F1F3EF;
  --border:#E4E8E3;
  --border-strong:#D3D9D2;
  --text:#14261D;
  --text-2:#3D4F45;
  --muted:#6F7C74;
  --faint:#A3AEA7;

  /* státusz-fázisok */
  --plan:#64748B;      --plan-bg:#F1F4F8;
  --client:#D97706;    --client-bg:#FEF4E6;
  --ok:#17A33A;        --ok-bg:#E8F9EE;
  --live:#1A3B2E;      --live-bg:#E3ECE7;
  --danger:#DC2626;    --danger-bg:#FDECEC;

  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(20,38,29,.06);
  --shadow:0 1px 2px rgba(20,38,29,.05),0 4px 14px rgba(20,38,29,.06);
  --shadow-lg:0 12px 40px rgba(20,38,29,.16),0 2px 6px rgba(20,38,29,.06);
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1512; --surface:#151F1A; --surface-2:#18231D; --surface-3:#1D2A23;
    --border:#25342C; --border-strong:#31443A;
    --text:#E6EEE9; --text-2:#C3D0C8; --muted:#8B9C92; --faint:#5F7067;
    --plan:#94A3B8; --plan-bg:#1E2833;
    --client:#F59E0B; --client-bg:#2E2413;
    --ok:#34D058; --ok-bg:#15301D;
    --live:#A7E3BC; --live-bg:#1B3327;
    --danger:#F87171; --danger-bg:#361A1A;
    --green-50:#15301D; --green-100:#1C4128;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --shadow-lg:0 12px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1512; --surface:#151F1A; --surface-2:#18231D; --surface-3:#1D2A23;
  --border:#25342C; --border-strong:#31443A;
  --text:#E6EEE9; --text-2:#C3D0C8; --muted:#8B9C92; --faint:#5F7067;
  --plan:#94A3B8; --plan-bg:#1E2833;
  --client:#F59E0B; --client-bg:#2E2413;
  --ok:#34D058; --ok-bg:#15301D;
  --live:#A7E3BC; --live-bg:#1B3327;
  --danger:#F87171; --danger-bg:#361A1A;
  --green-50:#15301D; --green-100:#1C4128;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

/* ── GOMBOK ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;font-weight:600;font-size:13.5px;white-space:nowrap;transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn i{font-size:13px}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--green-600)}
.btn-dark{background:var(--forest);color:#fff}
.btn-dark:hover{background:var(--forest-2)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text-2)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btn-subtle{color:var(--muted)}
.btn-subtle:hover{background:var(--surface-3);color:var(--text)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{filter:brightness(.97)}
.btn-sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn-lg{height:48px;padding:0 20px;font-size:15px;border-radius:12px}
.btn-icon{width:34px;padding:0}
.btn-sm.btn-icon{width:30px}
.btn[disabled]{opacity:.55;pointer-events:none}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.18);color:inherit;opacity:.85}
.btn-ghost .kbd,.search .kbd{background:var(--surface-3);color:var(--muted)}

/* ── MEZŐK ─────────────────────────────────────────────── */
.input{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.input:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
select.input{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F7C74' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.label small{font-weight:500;color:var(--faint)}
.field{margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--text-2);transition:all .12s}
.chip-toggle:hover{border-color:var(--border-strong)}
.chip-toggle.on{background:var(--green-50);border-color:var(--green);color:var(--text)}

/* ── STÁTUSZ-PILL ──────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--plan-bg);color:var(--plan)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill[data-phase="client"]{background:var(--client-bg);color:var(--client)}
.pill[data-phase="ok"]{background:var(--ok-bg);color:var(--ok)}
.pill[data-phase="live"]{background:var(--live-bg);color:var(--live)}
button.pill{cursor:pointer;transition:filter .12s}
button.pill:hover{filter:brightness(.96)}
button.pill::after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.6;margin-left:1px}
.pill .steps{display:inline-flex;gap:2px;margin-left:2px}
.pill .steps i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.25}
.pill .steps i.on{opacity:1}

.flag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:700}
.flag-late{background:var(--danger-bg);color:var(--danger)}
.flag-wait{background:var(--client-bg);color:var(--client)}
.flag-muted{background:var(--surface-3);color:var(--muted)}

/* ── PLATFORM-IKONOK ───────────────────────────────────── */
.plats{display:inline-flex;gap:3px}
.plat{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.plat-sm{width:16px;height:16px;font-size:9px;border-radius:4px}
.plat-lg{width:30px;height:30px;font-size:15px;border-radius:8px}

/* ── APP-KERET ─────────────────────────────────────────── */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
.sb{background:var(--forest);color:#fff;display:flex;flex-direction:column;overflow:hidden}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.sb-brand img{width:30px;height:30px}
.sb-brand b{font-size:15.5px;font-weight:700;letter-spacing:-.2px;display:block;line-height:1.1}
.sb-brand span{font-size:10.5px;color:rgba(255,255,255,.5);letter-spacing:.7px;text-transform:uppercase;font-weight:600}
.sb-scroll{flex:1;overflow-y:auto;padding:4px 10px 10px}
.sb-label{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.38);padding:14px 10px 6px;display:flex;justify-content:space-between;align-items:center}
.sb-label button{color:rgba(255,255,255,.5);font-size:12px;width:20px;height:20px;border-radius:5px}
.sb-label button:hover{background:rgba(255,255,255,.1);color:#fff}
.sb-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:9px;color:rgba(255,255,255,.72);font-size:13.5px;font-weight:500;text-align:left;transition:background .12s,color .12s}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.on{background:rgba(255,255,255,.12);color:#fff}
.sb-item .ico{width:18px;text-align:center;font-size:13px;opacity:.85}
.sb-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item .count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--client);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.avatar{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.2px}
.avatar-lg{width:40px;height:40px;border-radius:11px;font-size:15px}
.sb-foot{padding:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:4px}
.sb-foot .sb-item{flex:1}
.sb-foot .sb-icon{width:36px;height:36px;border-radius:9px;color:rgba(255,255,255,.65)}
.sb-foot .sb-icon:hover{background:rgba(255,255,255,.08);color:#fff}

.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.top{display:flex;align-items:center;gap:14px;padding:16px 28px 14px;background:var(--bg)}
.top-title{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.top-title h1{font-size:21px;font-weight:700;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-title .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.top-actions{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:3px;gap:2px}
.seg button{height:30px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.search{position:relative;width:240px}
.search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:12.5px}
.search .input{padding-left:32px;padding-right:34px;height:36px;background:var(--surface)}
.search .kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
.page{flex:1;overflow-y:auto;padding:4px 28px 40px}
.page-inner{max-width:1320px;margin:0 auto}

.banner{display:flex;align-items:center;gap:10px;margin:0 28px 10px;padding:9px 14px;border-radius:10px;background:var(--forest);color:#fff;font-size:13px;font-weight:500;animation:drop .25s ease}
.banner .btn{margin-left:auto}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* ── PIPELINE ──────────────────────────────────────────── */
.pipe{display:grid;grid-template-columns:4fr 1fr 3fr;gap:10px;margin-bottom:18px}
.pipe-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 10px 8px;box-shadow:var(--shadow-sm)}
.pipe-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.pipe-head b{font-size:13px;color:var(--text);letter-spacing:0}
.pipe-steps{display:flex;gap:4px}
.pipe-step{flex:1;min-width:0;text-align:left;padding:7px 8px 8px;border-radius:8px;transition:background .12s;position:relative}
.pipe-step:hover{background:var(--surface-3)}
.pipe-step.on{background:var(--surface-3);box-shadow:inset 0 0 0 1.5px var(--text)}
.pipe-step .n{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.pipe-step .n.zero{color:var(--faint)}
.pipe-step .t{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe-step .bar{height:3px;border-radius:2px;margin-top:7px;background:var(--plan);opacity:.9}
.pipe-group[data-phase="client"] .bar{background:var(--client)}
.pipe-group[data-phase="done"] .pipe-step:nth-child(1) .bar{background:var(--ok)}
.pipe-group[data-phase="done"] .pipe-step:nth-child(2) .bar{background:var(--ok)}
.pipe-group[data-phase="done"] .pipe-step:nth-child(3) .bar{background:var(--live)}
.pipe-step .bar.zero{opacity:.15}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.toolbar h2{font-size:16px;font-weight:700;letter-spacing:-.2px;min-width:150px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:999px;background:var(--forest);color:#fff;font-size:12px;font-weight:600}
.filter-chip button{width:18px;height:18px;border-radius:50%;color:#fff;opacity:.7;font-size:10px}
.filter-chip button:hover{opacity:1;background:rgba(255,255,255,.15)}

/* ── LISTA ─────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.week-head{display:flex;align-items:center;gap:10px;padding:12px 16px 8px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.week-head .line{flex:1;height:1px;background:var(--border)}
.week-head.now{color:var(--green-600)}
.rows{padding:0 6px 6px}
.row{display:grid;grid-template-columns:22px 54px minmax(0,1fr) 120px 180px 150px 40px;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .1s}
.row:hover{background:var(--surface-2)}
.row.sel{background:var(--green-50)}
.row.active{background:var(--surface-3)}
.row input[type=checkbox]{width:15px;height:15px;accent-color:var(--green);cursor:pointer}
.datebox{width:46px;height:46px;border-radius:10px;background:var(--surface-3);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.datebox b{font-size:17px;font-weight:700;letter-spacing:-.3px}
.datebox span{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted);margin-top:3px;letter-spacing:.3px}
.datebox.today{background:var(--green);color:#fff}
.datebox.today span{color:rgba(255,255,255,.85)}
.datebox.none{background:transparent;border:1.5px dashed var(--border-strong)}
.datebox.none b{font-size:13px;color:var(--faint)}
.row-title{min-width:0}
.row-title .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-title .m{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden}
.row-title .m .dot{width:3px;height:3px;border-radius:50%;background:var(--faint);flex-shrink:0}
.row .fmt{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .who{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);min-width:0}
.row .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .cm{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.bulk{position:sticky;bottom:16px;margin:14px auto 0;width:max-content;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;background:var(--forest);color:#fff;border-radius:14px;box-shadow:var(--shadow-lg);animation:drop .2s ease;z-index:5}
.bulk .input{height:32px;width:210px;background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.bulk .input option{color:#000}

/* ── NAPTÁR ────────────────────────────────────────────── */
.cal-wrap{display:grid;grid-template-columns:1fr 250px;gap:14px;align-items:start}
.cal{overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border)}
.cal-dow div{padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:118px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px;display:flex;flex-direction:column;gap:4px;transition:background .1s;min-width:0}
.cal-day:nth-child(7n){border-right:0}
.cal-day.out{background:var(--surface-2)}
.cal-day.out .dn{color:var(--faint)}
.cal-day.we{background:color-mix(in srgb,var(--surface-2) 60%,var(--surface))}
.cal-day.drop{background:var(--green-50);box-shadow:inset 0 0 0 2px var(--green)}
.cal-day .dh{display:flex;justify-content:space-between;align-items:center;padding:0 2px 2px}
.dn{font-size:12.5px;font-weight:600;color:var(--text-2);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.cal-day.today .dn{background:var(--green);color:#fff}
.cal-day .add{opacity:0;width:22px;height:22px;border-radius:6px;color:var(--muted);font-size:11px}
.cal-day:hover .add{opacity:1}
.cal-day .add:hover{background:var(--surface-3);color:var(--text)}
.ev{display:flex;align-items:center;gap:5px;padding:4px 6px 4px 5px;border-radius:7px;font-size:12px;font-weight:600;background:var(--plan-bg);color:var(--text);cursor:grab;border-left:3px solid var(--plan);min-width:0;transition:transform .08s,box-shadow .12s}
.ev:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.ev:active{cursor:grabbing}
.ev[data-phase="client"]{background:var(--client-bg);border-left-color:var(--client)}
.ev[data-phase="ok"]{background:var(--ok-bg);border-left-color:var(--ok)}
.ev[data-phase="live"]{background:var(--live-bg);border-left-color:var(--live)}
.ev .tm{font-size:10.5px;color:var(--muted);font-weight:600;flex-shrink:0}
.ev .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ev.dragging{opacity:.4}
.ev.late{box-shadow:inset 0 0 0 1px var(--danger)}
.more{font-size:11.5px;color:var(--muted);font-weight:600;padding:2px 6px;text-align:left}
.more:hover{color:var(--text)}
.tray{padding:14px;position:sticky;top:0}
.tray h3{font-size:13px;font-weight:700;margin-bottom:2px}
.tray p{font-size:12px;color:var(--muted);margin-bottom:10px}
.tray .ev{margin-bottom:5px}
.tray.drop{background:var(--green-50);box-shadow:inset 0 0 0 2px var(--green)}

/* heti nézet */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.wcol{min-height:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:8px;transition:background .1s}
.wcol.today{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.wcol.drop{background:var(--green-50)}
.wcol-h{display:flex;align-items:baseline;gap:6px;padding:2px 4px 4px}
.wcol-h b{font-size:20px;font-weight:700;letter-spacing:-.5px}
.wcol-h span{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.wcard{border-radius:10px;border:1px solid var(--border);background:var(--surface);overflow:hidden;cursor:grab;transition:box-shadow .12s,transform .08s}
.wcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.wcard .thumb{aspect-ratio:4/3;background:var(--surface-3)}
.wcard .b{padding:8px 9px 9px}
.wcard .tt{font-size:12.5px;font-weight:600;line-height:1.3;margin:5px 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard .top-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);font-weight:600}

/* ── ÁTTEKINTÉS ────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kpi{padding:16px 18px}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.kpi .l{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px}
.kpi .ico{float:right;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px}
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.cc{padding:16px;cursor:pointer;transition:box-shadow .15s,transform .1s,border-color .15s}
.cc:hover{box-shadow:var(--shadow);border-color:var(--border-strong);transform:translateY(-1px)}
.cc-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cc-h h3{font-size:15.5px;font-weight:700;letter-spacing:-.2px}
.cc-h p{font-size:12px;color:var(--muted)}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-3);gap:2px;margin-bottom:10px}
.stack span{display:block;height:100%}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.cc-stats div{font-size:11.5px;color:var(--muted);font-weight:500}
.cc-stats b{display:block;font-size:17px;color:var(--text);font-weight:700}
.cc-stats .warn b{color:var(--client)}
.cc-stats .bad b{color:var(--danger)}
.cc-next{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2);min-width:0}
.cc-next span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── FIÓK (DRAWER) ─────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(10,20,15,.28);z-index:40;animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--surface);z-index:41;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .22s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(30px);opacity:0}}
.dr-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border)}
.dr-head .sp{flex:1}
.dr-body{flex:1;overflow-y:auto;padding:20px 22px 28px}
.dr-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2)}
.dr-title{font-size:21px;font-weight:700;letter-spacing:-.4px;line-height:1.25;margin-bottom:8px}
.dr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px}
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sec-h .btn{text-transform:none;letter-spacing:0}
.prose{font-size:14px;line-height:1.6;white-space:pre-wrap;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.kv div{background:var(--surface);padding:9px 12px;min-width:0}
.kv span{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
.kv b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.links{display:flex;flex-direction:column;gap:6px}
.lnk{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;font-size:13px;transition:border-color .12s,background .12s;min-width:0}
.lnk:hover{border-color:var(--border-strong);background:var(--surface-2)}
.lnk i{width:18px;text-align:center;color:var(--muted)}
.lnk .u{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.lnk b{font-weight:600;flex-shrink:0}
.note-internal{background:repeating-linear-gradient(-45deg,var(--surface-2),var(--surface-2) 8px,var(--surface-3) 8px,var(--surface-3) 9px);border:1px dashed var(--border-strong)}
.stepper{display:flex;gap:3px;margin:4px 0 2px}
.stepper button{flex:1;height:6px;border-radius:3px;background:var(--surface-3);transition:background .15s}
.stepper button.done{background:var(--plan)}
.stepper button.done.p-client{background:var(--client)}
.stepper button.done.p-ok{background:var(--ok)}
.stepper button.done.p-live{background:var(--live)}
.stepper button:hover{filter:brightness(.9)}
.warn-box{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:var(--client-bg);color:var(--text);font-size:12.5px;margin-top:8px}
.warn-box i{color:var(--client);margin-top:2px}

/* visszajelzés-szál */
.thread{display:flex;flex-direction:column;gap:10px}
.msg{display:flex;gap:10px}
.msg .avatar{width:28px;height:28px;border-radius:50%;font-size:11px}
.msg .bub{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:4px 12px 12px 12px;padding:8px 12px}
.msg.client .bub{background:var(--client-bg);border-color:transparent}
.msg.approve .bub{background:var(--ok-bg);border-color:transparent}
.msg .who{font-size:12px;font-weight:700;display:flex;gap:6px;align-items:baseline}
.msg .who span{font-weight:500;color:var(--muted);font-size:11.5px}
.msg .txt{font-size:13.5px;line-height:1.5;white-space:pre-wrap;margin-top:2px}
.reply{display:flex;gap:8px;margin-top:10px}
.reply .input{height:38px}

/* ── MENÜ ──────────────────────────────────────────────── */
.menu{position:fixed;z-index:60;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;animation:pop .12s ease}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.menu-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);padding:8px 10px 4px}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;text-align:left}
.menu button:hover{background:var(--surface-3)}
.menu button.cur{font-weight:700}
.menu button.cur::after{content:"✓";margin-left:auto;color:var(--green)}
.menu button .dot{width:8px;height:8px;border-radius:50%}
.menu button.danger{color:var(--danger)}
.menu hr{border:0;border-top:1px solid var(--border);margin:5px 4px}

/* ── MODÁL ─────────────────────────────────────────────── */
.modal-wrap{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,20,15,.4);animation:fade .15s ease}
.modal{width:min(460px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;animation:pop .15s ease}
.modal h3{font-size:17px;font-weight:700;margin-bottom:6px}
.modal p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(5,10,8,.88);display:flex;align-items:center;justify-content:center;padding:40px;animation:fade .15s}
.lightbox iframe,.lightbox img{width:min(1000px,100%);height:min(80vh,760px);border:0;border-radius:12px;background:#000;object-fit:contain}
.lightbox .x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px}
.lightbox .open{position:absolute;bottom:18px;left:50%;transform:translateX(-50%)}

/* ── KREATÍV ELŐNÉZET ──────────────────────────────────── */
.media{position:relative;border-radius:12px;overflow:hidden;background:var(--surface-3);aspect-ratio:4/3}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.portrait{aspect-ratio:4/5}
.media.story{aspect-ratio:9/12}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:600;text-align:center;padding:16px}
.media .ph i{font-size:26px;opacity:.6}
.media .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.media .play span{width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(4px)}
.media button.hit{position:absolute;inset:0}
.media .count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px}
.media .nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:12px;box-shadow:var(--shadow);z-index:2}
.media .nav.l{left:10px}.media .nav.r{right:10px}
.media .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.media .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.media .dots i.on{background:#fff}
.gen{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;color:#fff;font-weight:700;font-size:20px;letter-spacing:-.4px;line-height:1.2}

/* ── ÜRES ÁLLAPOT / TÖLTÉS ─────────────────────────────── */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty .em{font-size:38px;margin-bottom:10px}
.empty h3{font-size:16px;color:var(--text);font-weight:700;margin-bottom:4px}
.empty p{font-size:13.5px;max-width:360px;margin:0 auto 16px}
.sk{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── TOAST ─────────────────────────────────────────────── */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:12px;background:#14261D;color:#fff;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);animation:up .2s ease}
.toast.err{background:var(--danger)}
.toast i{color:var(--green)}
.toast.err i{color:#fff}
.toast button{font-weight:700;color:var(--green);padding:4px 8px;border-radius:6px;font-size:13px}
.toast button:hover{background:rgba(255,255,255,.1)}
@keyframes up{from{opacity:0;transform:translateY(8px)}}

/* ── BEÁLLÍTÁSOK ───────────────────────────────────────── */
.set-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:880px}
.set-card{padding:20px}
.set-card h3{font-size:15px;font-weight:700;margin-bottom:3px}
.set-card > p{font-size:13px;color:var(--muted);margin-bottom:16px}
.crow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.crow .n{font-weight:600}
.crow .e{font-size:12.5px;color:var(--muted)}
.crow .acts{display:flex;gap:6px}
.linkbox{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:4px 4px 4px 10px;max-width:520px}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.demo-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);margin:0 18px 10px;width:max-content}

/* ── RESZPONZÍV ────────────────────────────────────────── */
.mob-only{display:none}
@media (max-width:1100px){
  .row{grid-template-columns:22px 54px minmax(0,1fr) 170px 40px}
  .row .fmt,.row .who{display:none}
  .cal-wrap{grid-template-columns:1fr}
  .tray{position:static}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;inset:0 auto 0 0;width:260px;z-index:50;transform:translateX(-100%);transition:transform .22s ease}
  .sb.open{transform:none;box-shadow:var(--shadow-lg)}
  .mob-only{display:inline-flex}
  .top{padding:12px 16px;flex-wrap:wrap}
  .top-title h1{font-size:18px}
  .search{width:100%;order:5}
  .page{padding:4px 16px 40px}
  .banner{margin:0 16px 10px}
  .pipe{grid-template-columns:1fr;gap:8px}
  .pipe-steps{overflow-x:auto}
  .pipe-step{min-width:74px}
  .row{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:8px 6px}
  .row > input,.row .plats-col,.row .cm{display:none}
  .row .st-col{grid-column:2}
  .cal-day{min-height:72px;padding:3px}
  .ev .tt,.ev .tm{display:none}
  .ev{justify-content:center;padding:3px}
  .week{grid-template-columns:1fr}
  .wcol{min-height:0}
  .kv{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .top-actions .btn .lbl{display:none}
}
@media (max-width:1100px){ .ov-cols{grid-template-columns:1fr!important} }

/* ── NAPTÁR-CHIP: két sorban, hogy a cím olvasható legyen ── */
.cal-day .ev{flex-direction:column;align-items:stretch;gap:2px;padding:5px 7px 6px 6px}
.cal-day .ev .evh{display:flex;align-items:center;gap:5px}
.cal-day .ev .tt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;font-size:12px}
@media (max-width:820px){ .cal-day .ev .tt,.cal-day .ev .tm{display:none} .cal-day .ev{align-items:center} }

/* ════════════════════════════════════════════════════════
   ÜGYFÉLPORTÁL
   ════════════════════════════════════════════════════════ */
body.portal{background:var(--bg)}
.p-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.p-head-in{max-width:620px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.p-head b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-head-in > div > span{font-size:12px;color:var(--muted)}
.p-main{max-width:620px;margin:0 auto;padding:16px 16px 40px}
.p-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 36px;font-size:12px;color:var(--faint);font-weight:600}
.p-foot img{width:14px;opacity:.7}
.p-tabs{display:flex;gap:4px;background:var(--surface-3);padding:4px;border-radius:12px;margin-bottom:18px}
.p-tabs button{flex:1;height:36px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.p-tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.p-tabs button span{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:11px;align-items:center;justify-content:center;margin-left:4px}
.p-hero{padding:4px 2px 18px}
.p-hero h1{font-size:24px;font-weight:700;letter-spacing:-.6px;line-height:1.2;margin-bottom:6px}
.p-hero p{color:var(--muted);font-size:14.5px;margin-bottom:14px;max-width:460px}
.p-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;animation:up .25s ease}
.p-meta{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);background:var(--surface-2)}
.p-meta .sp{flex:1}
.p-meta b{color:var(--text);font-weight:700}
.p-post{padding:14px 16px 4px}
.p-post-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.p-post-h .avatar{width:34px;height:34px;border-radius:50%;font-size:12px}
.p-post-h b{display:block;font-size:13.5px;font-weight:700;line-height:1.2}
.p-post-h > div > span{font-size:12px;color:var(--muted)}
.p-title{font-size:17px;font-weight:700;letter-spacing:-.3px;line-height:1.3;margin-bottom:12px}
.p-media{margin:0 -16px 12px}
.p-media .media{border-radius:0}
.p-text{font-size:14.5px;line-height:1.6;white-space:pre-wrap;color:var(--text)}
.p-text.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.p-more{font-weight:700;font-size:13.5px;color:var(--green-600);padding:4px 0}
.p-cta{display:flex;align-items:center;justify-content:space-between;margin:12px 0 4px;padding:10px 12px;border-radius:10px;background:var(--surface-3);font-weight:700;font-size:13.5px}
.p-links{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 2px}
.p-thread{margin:10px 16px 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.p-thread summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);list-style:none;display:flex;gap:8px;align-items:center}
.p-thread summary::-webkit-details-marker{display:none}
.p-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:16px}
.p-acts .btn{width:100%;min-width:0;padding:0 10px}
.p-form{padding:16px;border-top:1px solid var(--border);background:var(--surface-2);margin-top:14px}
.p-done{animation:pop .2s ease}
.p-done-in{display:flex;align-items:center;gap:12px;padding:14px 16px}
.p-done-in b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-done-in span{font-size:12.5px;color:var(--muted)}
.p-check{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
.p-check.chg{background:var(--client)}
.p-row{border-radius:12px}
.p-row + .p-row{border-top:1px solid var(--border)}
.p-row summary{display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;list-style:none;border-radius:12px}
.p-row summary::-webkit-details-marker{display:none}
.p-row summary:hover{background:var(--surface-2)}
.p-row .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row .m{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px}
.p-row-body{padding:4px 10px 14px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{top:105vh;transform:translateX(40px) rotate(720deg)}}
@media (max-width:480px){
  .p-hero h1{font-size:21px}
  .p-acts .btn-lg{height:50px;font-size:14.5px}
  .p-tabs button{font-size:12.5px}
}

.p-tabs button span.hot{background:var(--client);color:#fff}

/* ════════════════════════════════════════════════════════
   2–3. FÁZIS: csapat, határidők, változatok, sablonok, riport
   ════════════════════════════════════════════════════════ */
.sb-me{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sb-me b{display:block;font-size:13px;font-weight:600;color:#fff}
.sb-me span{font-size:11.5px;color:rgba(255,255,255,.5)}
.avatar.plat-sm{width:16px;height:16px;font-size:7.5px;border-radius:4px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.clogo{width:40px;height:40px;border-radius:11px;object-fit:contain;background:#fff;border:1px solid var(--border)}

/* kik dolgoznak rajta */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.people > div{min-width:0}
.person{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;min-width:0}
.person .avatar{width:28px;height:28px;border-radius:50%;font-size:11px}
.person span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.person b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin:4px 2px 0}
.people em.late{color:var(--danger);font-weight:700}

/* horgonyzott ügyfélkérések */
.notes{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:8px;counter-reset:n}
.notes li{font-size:13px;line-height:1.45;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--client) 25%,transparent)}
.notes q{display:block;font-style:italic;color:var(--text-2);background:color-mix(in srgb,var(--client) 16%,transparent);border-radius:4px;padding:1px 5px;margin-bottom:3px;width:max-content;max-width:100%}
.notes q::before{content:"„"}.notes q::after{content:"”"}
.pin-ref,.pin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--client);color:#fff;font-size:11px;font-weight:700;font-style:normal;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.3)}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3}
.pin-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:6px}
.pin-wrap{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--surface-3)}
.pin-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.req{background:var(--client-bg);border-radius:12px;padding:12px 14px}
.req .txt{font-size:13.5px}

/* változatok, szöveg-összehasonlítás */
.versions{display:flex;flex-direction:column;gap:6px}
.ver{border:1px solid var(--border);border-radius:10px;padding:0 12px}
.ver summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:9px 0;font-size:13px}
.ver summary::-webkit-details-marker{display:none}
.ver summary span{color:var(--muted);font-size:12px;flex:1}
.ver[open]{padding-bottom:12px}
.diff ins{text-decoration:none;background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--text);border-radius:3px;padding:0 1px}
.diff del{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border-radius:3px;padding:0 1px}

/* napló */
.log{display:flex;flex-direction:column}
.log-line{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start}
.log-line:last-child{border-bottom:0}
.log-line a{color:var(--green-600);font-weight:600;text-decoration:none}
.log-ico{width:26px;height:26px;border-radius:8px;background:var(--surface-3);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

/* szerződéskeret */
.quota{display:flex;align-items:stretch;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.quota-h{display:flex;flex-direction:column;justify-content:center;padding-right:6px}
.quota-h b{font-size:13px;font-weight:700}
.quota-h span{font-size:11.5px;color:var(--muted)}
.quota-item{flex:1;min-width:130px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.quota-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);font-weight:600}
.quota-top b{font-size:16px;color:var(--text)}
.quota-top small{font-size:12px;color:var(--muted);font-weight:600}
.quota-bar{height:5px;border-radius:3px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.quota-bar i{display:block;height:100%;background:var(--plan);border-radius:3px}
.quota-item.full .quota-bar i{background:var(--ok)}
.quota-item.over .quota-bar i{background:var(--client)}
.quota-item.over .quota-top b{color:var(--client)}

/* saját feladataim */
.task-row{grid-template-columns:34px minmax(0,1fr) auto auto auto!important}
.task-ico{width:34px;height:34px;border-radius:10px;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center}
.task-ico.chg{background:var(--client-bg);color:var(--client)}
.week-head.late-h{color:var(--danger)}

/* sablonok */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.tpl{padding:16px}
.tpl-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tpl-h h3{font-size:15px;font-weight:700}
.tpl-h p{font-size:12.5px;color:var(--muted)}
.tpl-ico{width:38px;height:38px;border-radius:11px;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center}
.tpl-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px;min-width:0}
.tpl-meta b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.tpl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:12px}

/* riport */
.report-sec{padding:16px 18px;margin-bottom:14px}
.report-sec h3{font-size:14px;font-weight:700;margin-bottom:12px}
.report-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rbar{display:grid;grid-template-columns:130px 1fr 30px;gap:10px;align-items:center;font-size:12.5px;margin-bottom:7px}
.rbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar > div{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:5px}
.rbar b{text-align:right}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border)}
.tbl td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.print-only{display:none}
.report-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.report-head img{width:36px}
.report-head b{display:block;font-size:18px}
.report-head span{font-size:12.5px;color:var(--muted)}
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .sb,#top,#banner,.no-print,#drawer,.toasts{display:none!important}
  .app{display:block;height:auto;overflow:visible}
  .main,.page{overflow:visible;padding:0}
  .print-only{display:flex}
  .card{box-shadow:none;break-inside:avoid}
  :root{--bg:#fff}
}

@media (max-width:1100px){ .report-cols{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .people{grid-template-columns:1fr}
  .task-row{grid-template-columns:34px minmax(0,1fr)!important}
  .task-row > :nth-child(n+3){grid-column:2}
  .tpl-grid{grid-template-columns:1fr}
}

/* ── ÜGYFÉLPORTÁL: változatok, megjegyzések, márka ─────── */
.logo-img{object-fit:contain;background:#fff;border:1px solid var(--border)}
.p-round{margin:12px 16px 0;padding:12px 14px;border-radius:12px;background:var(--green-50);border:1px solid color-mix(in srgb,var(--green) 25%,transparent)}
.p-round-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.p-round-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:700}
.p-round-h .seg{margin-left:auto}
.seg-sm{padding:2px}.seg-sm button{height:26px;padding:0 10px;font-size:12px}
.p-round-req{font-size:13px;margin-top:8px;color:var(--text-2)}
.p-round-req .notes{margin-top:6px}
.p-media{position:relative}
.p-newimg{position:absolute;top:10px;left:10px;z-index:3;background:var(--green);color:#fff;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px}
.p-text.diff{white-space:pre-wrap}
.annotating .p-media{cursor:crosshair}
.annotating .p-media .hit{pointer-events:none}
.annotating .p-text{user-select:text;-webkit-user-select:text;cursor:text;background:color-mix(in srgb,var(--client) 6%,transparent);border-radius:8px;padding:6px 8px;margin:0 -8px}
.annotating .p-text::selection,.annotating .p-text *::selection{background:color-mix(in srgb,var(--client) 35%,transparent)}
.p-hint{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2);background:var(--surface);border:1px dashed var(--border-strong);border-radius:10px;padding:10px 12px}
.p-hint i{color:var(--client);margin-top:2px}
.p-notes{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.p-notes li{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px}
.p-note-h{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;font-weight:600;min-width:0}
.p-note-h q{flex:1;min-width:0;font-style:italic;font-weight:500;color:var(--text-2);background:color-mix(in srgb,var(--client) 16%,transparent);border-radius:4px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-note-h q::before{content:"„"}.p-note-h q::after{content:"”"}
.p-note-h button{margin-left:auto}
.sel-btn{position:absolute;z-index:60;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:#14261D;color:#fff;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-lg);animation:pop .12s ease;width:170px;justify-content:center}

/* ── PROFILKÉP ─────────────────────────────────────────── */
img.avatar{object-fit:cover;background:var(--surface-3)}
.sb-me{cursor:pointer;transition:background .12s}
.sb-me:hover{background:rgba(255,255,255,.06)}
.upload{display:flex;align-items:center;gap:14px}
.upload .avatar,.upload img.avatar{width:64px;height:64px;border-radius:50%;font-size:22px}
.upload .logo-prev{width:64px;height:64px;border-radius:14px;object-fit:contain;background:#fff;border:1px solid var(--border)}
.upload-acts{display:flex;gap:6px;flex-wrap:wrap}

/* fejléc: az ügyfél neve ne nyomódjon össze kisebb képernyőn */
.top-title > div{min-width:0}
.top-title .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1440px){ .top .seg .lbl{display:none} .top .seg button{padding:0 10px} .search{width:200px} }
@media (max-width:820px){ .task-row > :nth-child(n+3){justify-self:start} }
.report-head.print-only{display:none}
@media print{ .report-head.print-only{display:flex} }

/* ════════════════════════════════════════════════════════
   4. KÖR: harang, kereső, adatlap, kampány, jeles nap, ellenőrzés
   ════════════════════════════════════════════════════════ */
.sb-brand{padding-right:12px}
.bell{position:relative;width:32px;height:32px;border-radius:9px;color:rgba(255,255,255,.75);font-size:15px;flex-shrink:0}
.bell:hover{background:rgba(255,255,255,.1);color:#fff}
.bell span{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--client);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--forest)}
.sb-search{display:flex;align-items:center;gap:9px;margin:0 12px 6px;padding:0 10px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);font-size:13px;width:calc(100% - 24px)}
.sb-search:hover{background:rgba(255,255,255,.12);color:#fff}
.sb-search .kbd{margin-left:auto;background:rgba(255,255,255,.12)}

/* értesítések */
.notif-menu{width:min(380px,calc(100vw - 20px));max-height:70vh;overflow-y:auto;padding:6px}
.notif-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px}
.notif-h b{font-size:14px}
.menu button.notif{align-items:flex-start;gap:10px;padding:9px 10px}
.menu button.notif.new{background:color-mix(in srgb,var(--client) 8%,transparent)}
.notif-ico{width:28px;height:28px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.notif-t{font-size:13px;line-height:1.4;font-weight:400;white-space:normal}
.notif-t small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}

/* globális kereső */
.palette{width:min(640px,100%);align-self:flex-start;margin-top:10vh;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .12s ease}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--muted)}
.pal-in input{flex:1;border:0;outline:0;background:transparent;font-size:16px;color:var(--text)}
.pal-in .kbd{background:var(--surface-3);color:var(--muted)}
.pal-res{max-height:60vh;overflow-y:auto;padding:6px}
.pal-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left}
.pal-row.on{background:var(--surface-3)}
.pal-t{flex:1;min-width:0}
.pal-t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-t small{display:block;font-size:11.5px;color:var(--muted)}
.pal-ico{width:24px;height:24px;border-radius:7px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}

/* jeles napok */
.day-tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted);min-width:0;flex:1;overflow:hidden;white-space:nowrap;margin:0 2px}
.day-tag span{overflow:hidden;text-overflow:ellipsis}
.day-tag.off{color:var(--danger)}
.day-tag.client{color:var(--green-600)}
.wday-tag{font-size:11.5px;font-weight:600;color:var(--muted);padding:3px 6px;border-radius:6px;background:var(--surface-2)}
.wday-tag.off{color:var(--danger)}
.wday-tag.client{color:var(--green-600)}

/* kampányok */
.camp{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.camp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.camp-sm{padding:0;width:8px;height:8px;background:var(--c)}
.camp-sm::before{display:none}
.row-title .m .camp{flex-shrink:0}
.ev.has-camp{box-shadow:inset 0 -3px 0 var(--c)}
.camp-pick{width:auto;height:30px;font-size:12.5px;padding-left:10px}
.camp-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.camp-color{width:38px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:3px;flex-shrink:0}

/* belső ellenőrzés */
.wf{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;font-size:13px}
.wf i{margin-top:2px}
.wf b{display:block;font-size:13.5px}
.wf span{color:var(--muted)}
.wf-wait{background:var(--plan-bg);color:var(--text)}
.wf-review{flex-direction:column;align-items:stretch;background:color-mix(in srgb,var(--forest-3) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--forest-3) 35%,transparent)}
.wf-h{display:flex;gap:10px}
.wf-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.internal-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-top:8px;cursor:pointer}
.internal-toggle input{accent-color:var(--green)}
.msg.internal .bub{background:repeating-linear-gradient(-45deg,var(--surface-2),var(--surface-2) 8px,var(--surface-3) 8px,var(--surface-3) 9px);border-style:dashed}

/* ügyfél-adatlap */
.profile-card{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:14px;background:var(--surface-2)}
.profile-card summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--text-2);display:flex;gap:8px;align-items:center;list-style:none}
.profile-card summary::-webkit-details-marker{display:none}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:10px}
.pc-grid .wide{grid-column:1/-1}
.pc-grid span{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.pc-grid b{font-size:13px;font-weight:500;white-space:pre-wrap}
.pc-grid .banned{color:var(--danger);font-weight:600}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.profile-grid .set-card{margin-bottom:16px}
.profile-save{position:sticky;bottom:12px;display:flex;justify-content:flex-end;margin-top:6px}
.profile-save .btn{box-shadow:var(--shadow-lg)}
.contact{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.contact b{display:block;font-size:13.5px}
.contact span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.contact-row{display:grid;grid-template-columns:1fr 1fr 1.3fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.contact-row label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);cursor:pointer}

@media (max-width:1100px){ .profile-grid{grid-template-columns:1fr} }

/* ── TELEFON: csapatfelület csiszolása ─────────────────── */
.sb-scrim{display:none}
@media (max-width:820px){
  .sb-scrim{display:block;position:fixed;inset:0;background:rgba(10,20,15,.35);z-index:49;animation:fade .15s}
  .top{gap:10px}
  .top-title{order:1;flex:1 1 calc(100% - 60px)}
  .top .seg{order:3;width:100%;overflow-x:auto;justify-content:space-between}
  .top .seg button{flex:1;justify-content:center}
  .top-actions{order:2}
  .top-actions .btn-primary{width:42px;padding:0}
  .top-actions .btn-primary .kbd{display:none}
  .search{order:4}
  .toolbar{gap:8px}
  .toolbar h2{min-width:0;font-size:15px}
  .quota{gap:6px}.quota-h{width:100%}
  .quota-item{min-width:calc(50% - 3px)}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px 14px}.kpi .v{font-size:24px}
  .clients{grid-template-columns:1fr}
  .drawer{width:100vw;border-radius:0}
  .dr-head{padding:10px 12px;flex-wrap:wrap}
  .dr-body{padding:16px 14px 90px}
  .dr-title{font-size:19px}
  .dr-foot{position:sticky;bottom:0}
  .wf-acts .btn,.wf-acts select{flex:1}
  .bulk{left:12px;right:12px;width:auto;flex-wrap:wrap;bottom:12px}
  .bulk .input{flex:1;width:auto}
  .cal-dow div{padding:8px 4px;text-align:center}
  .cal-day .dh{flex-direction:column;align-items:center}
  .day-tag span{display:none}
  .day-tag{flex:0;margin:0}
  .cal-day .add{display:none}
  .tray{margin-top:4px}
  .contact-row{grid-template-columns:1fr 1fr}
  .contact-row .k-email{grid-column:1/-1}
  .rbar{grid-template-columns:90px 1fr 26px}
  .tbl{font-size:12px}.tbl th,.tbl td{padding:6px 4px}
  .palette{margin-top:0;border-radius:0 0 16px 16px}
  .modal{max-height:92vh;overflow-y:auto}
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){ .top-title{flex:1 1 0} }

/* ════════════════════════════════════════════════════════
   DESIGN-KÖR
   ════════════════════════════════════════════════════════ */

/* 6. sötét mód: olvashatóbb halvány szövegek */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --muted:#A1B3A8; --faint:#7C8F85; --text-2:#CFDAD3; }
}
:root[data-theme="dark"]{ --muted:#A1B3A8; --faint:#7C8F85; --text-2:#CFDAD3; }

/* 1. összesítő sáv: állapotok + szerződéskeret egy sorban */
.summary{padding:10px 14px;margin-bottom:14px}
.sum-top{display:flex;align-items:center;gap:12px}
.sum-bar{flex:1;display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-3);gap:2px}
.sum-bar span{display:block;height:100%}
.sum-total{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.sum-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;align-items:center}
.sum-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sum-gl{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-right:4px;white-space:nowrap}
.sum-gl b{color:var(--text);letter-spacing:0}
.sum-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--text-2);transition:background .12s}
.sum-chip:hover{background:var(--surface-3)}
.sum-chip i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sum-chip b{font-weight:700;color:var(--text)}
.sum-chip.zero{color:var(--faint)}
.sum-chip.zero b{color:var(--faint);font-weight:500}
.sum-chip.on{background:var(--text);color:var(--bg)}
.sum-chip.on b{color:var(--bg)}
.sum-quota{margin-left:auto;padding-left:14px;border-left:1px solid var(--border)}
.qchip{display:inline-flex;flex-direction:column;gap:3px;padding:3px 8px;font-size:12px;color:var(--text-2)}
.qchip b{font-weight:700;color:var(--text)}
.qchip i.fa-solid,.qchip i.fa-brands{font-size:10.5px;color:var(--muted)}
.qbar{display:block;height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--plan)}
.qchip.full .qbar i{background:var(--ok)}
.qchip.over .qbar i{background:var(--client)}
.qchip.over b{color:var(--client)}
.summary.closed{padding:8px 14px}

/* 2. fülek: a kiválasztott mindig felirattal látszik */
@media (max-width:1440px){ .top .seg button.on .lbl{display:inline} }
@media (max-width:820px){ .top .seg button .lbl{display:none!important} }

/* 3. sűrűbb havi naptár, olvashatóbb címek */
.cal-wrap{grid-template-columns:1fr 230px}
.cal-day{min-height:100px;padding:5px;gap:3px}
.cal-day .ev{padding:4px 6px 5px 5px;border-radius:6px}
.cal-day .ev .tt{font-size:11.5px;-webkit-line-clamp:2}
.cal-day .ev .tm{font-size:10px}

/* 4. jeles napok: pötty + név, emoji helyett */
.day-tag{gap:4px}
.day-tag i,.wday-tag i{width:6px;height:6px;border-radius:50%;background:var(--faint);flex-shrink:0;display:inline-block}
.day-tag.off i,.wday-tag.off i{background:var(--danger)}
.day-tag.client i,.wday-tag.client i{background:var(--green)}
.day-tag.custom i,.wday-tag.custom i{background:var(--plan)}
.day-tag em{font-style:normal;color:var(--faint)}
.wday-tag{display:flex;align-items:center;gap:6px}

/* 5. jelvények: csak a sürgős narancs / piros */
.sb-item .count.soft{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.sb-item .count.urgent{background:var(--client);color:#fff}
.sb-item .count.late{background:var(--danger);color:#fff}

/* apróbb csiszolás */
.toolbar{margin-bottom:10px}
.row{padding:7px 10px}
.kpi .v{font-size:28px}
.cc{padding:14px 16px}
.week-head{padding:10px 16px 6px}
@media (max-width:820px){
  .sum-quota{margin-left:0;padding-left:0;border-left:0;width:100%}
  .sum-row{gap:6px 10px}
  .cal-wrap{grid-template-columns:1fr}
  .cal-day{min-height:64px}
}
.qtop{white-space:nowrap}
.qchip{min-width:64px}
.sum-row{gap:4px 14px}
.sum-chip{height:26px;padding:0 7px;font-size:12px;gap:5px}
.sum-gl{margin-right:2px}
@media (min-width:1500px){ .sum-chip{padding:0 9px;font-size:12.5px} }
@media (max-width:820px){ .search{width:100%} }

/* áttekintő: rövid sorok, több hely a címnek */
.mini-row{grid-template-columns:62px 24px minmax(0,1fr) auto auto!important;gap:10px}
.mini-row.compact{grid-template-columns:62px 24px minmax(0,1fr) auto!important}
.mini-when{font-size:12.5px;font-weight:700;line-height:1.25}
.mini-when span{display:block;color:var(--muted);font-weight:500}
.mini-st,.mini-flag{text-align:right;white-space:nowrap}
.mini-flag .flag{height:22px}
.more-btn{display:block;width:100%;padding:9px;margin-top:2px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.more-btn:hover{background:var(--surface-2);color:var(--text)}
@media (max-width:820px){ .mini-row{grid-template-columns:54px 24px minmax(0,1fr) auto!important} .mini-row .plats{display:none} }

/* C6: jóváhagyás mindig zöld — a márkaszín (pl. piros) ne tűnjön elutasításnak */
.btn.btn-approve{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 8px 20px -10px rgba(22,163,74,.7)}
.btn.btn-approve:hover{background:#15803d;border-color:#15803d}
/* C7: „Tovább olvasom” — olvasható szín (a márkaszín csak aláhúzásként) */
.p-more{color:var(--text);text-decoration:underline;text-decoration-color:var(--green-600);text-underline-offset:3px}
/* U1: kiemeljük, ha ki kell választani, mire vonatkozik a módosítás */
.p-cats.need{animation:needPulse 1.2s ease 2;border-radius:12px}
@keyframes needPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 3px rgba(239,68,68,.55)}}
.input.bad{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}