/* Mózg - panel v0.1. Kolory i typografia 1:1 z makiet (identyfikacja Emerald Media). */
:root{
  --grafit:#15171A; --grafit2:#2A2D31; --papier:#F6F4EC; --papier2:#FBFAF4; --bialy:#FFFFFF;
  --limonka:#C4F019; --limonka2:#B5DE17; --linia:#E2E1DA; --linia2:#CFCDC4;
  --tekst2:#4A4E54; --szary:#8A8F96; --czerwony:#D64545; --pomaranczowy:#E6A23C; --zielony:#3E9B5F;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--papier);color:var(--grafit);font-family:Montserrat,system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--grafit)}
button{font-family:inherit}
.ov{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lbl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst2)}
.btn{font-family:Montserrat,sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-lemon{background:var(--limonka);color:var(--grafit)}.btn-lemon:hover{background:var(--limonka2)}
.btn-ghost{background:transparent;color:var(--grafit);border:1.5px solid var(--grafit)}.btn-ghost:hover{background:var(--grafit);color:var(--papier)}
.btn-dark{background:var(--grafit);color:var(--papier2)}
.btn-sm{height:32px;padding:0 12px;font-size:11px}
.btn:disabled{opacity:.45;cursor:default}
.inp{height:48px;width:100%;border:1px solid var(--linia2);border-radius:4px;background:#fff;padding:0 14px;font-family:Montserrat,sans-serif;font-size:15px;color:var(--grafit)}
.inp:focus,textarea:focus{outline:2px solid var(--limonka);outline-offset:0;border-color:var(--grafit)}
textarea.inp{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}

/* --- logowanie --- */
.log{min-height:100vh;display:flex}
.log-l{width:50%;background:var(--grafit);color:var(--papier2);padding:56px 72px;display:flex;flex-direction:column;gap:40px}
.log-l img{width:180px}
.log-l h1{font-size:56px;line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:auto 0 0}
.log-l h1 span{color:var(--limonka)}
.log-l p{color:#C9CBCF;font-size:16px;line-height:1.6;max-width:460px;margin:0}
.log-r{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.log-f{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}
.log-f h2{margin:0;font-size:32px;font-weight:900;text-transform:uppercase}
.blad{background:#FBE9E9;border-left:4px solid var(--czerwony);padding:12px 14px;font-size:14px}

/* --- układ --- */
.uk{display:flex;height:100vh;overflow:hidden}
.side{width:256px;flex-shrink:0;background:var(--grafit);color:var(--papier2);display:flex;flex-direction:column;padding:28px 0 16px;overflow-y:auto}
.side-top{padding:0 24px 24px;display:flex;flex-direction:column;gap:10px}
.side-top img{width:132px}
.nav{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;color:#E2E1DA;text-decoration:none;font-size:14px;font-weight:500;border:0;background:none;width:100%;cursor:pointer;text-align:left}
.nav:hover{background:#1F2226}
.nav-on{background:var(--grafit2);color:#fff;font-weight:700}
.nav-on svg{stroke:var(--limonka)}
.nav small{display:block;font-size:11px;color:var(--szary);font-weight:500}
.navs{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.cl{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 24px;color:#E2E1DA;text-decoration:none;font-size:13px;line-height:1.3}
.cl:hover{background:#1F2226}
.cl-on{background:var(--limonka);color:var(--grafit);font-weight:700}
.cl span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.side-user{margin-top:auto;padding:16px 24px 0;border-top:1px solid var(--grafit2);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.av{width:36px;height:36px;background:var(--papier2);color:var(--grafit);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.side-user .kto{display:flex;flex-direction:column;gap:2px;font-size:13px;flex:1;min-width:0}
.side-user .kto span:last-child{color:var(--szary)}
.side-user .zuz{flex-basis:100%;font-size:11px;line-height:1.35;color:var(--szary);cursor:help}
.side-user button{background:none;border:0;color:var(--szary);cursor:pointer;font-size:12px;text-decoration:underline}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.hdr{height:72px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 32px;border-bottom:1px solid var(--linia);background:var(--papier2)}
.hdr h1{margin:0;font-size:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .sp{flex:1}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.tresc{flex:1;overflow-y:auto;padding:28px 40px 40px}
.wrap{max-width:1180px}
.chp{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 4px;border:1px solid var(--linia);background:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.ch{min-width:24px;padding:0 4px;white-space:nowrap;height:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--grafit);color:var(--papier);font-size:9px;font-weight:800}
.tagi{display:flex;gap:6px;flex-wrap:wrap}
h2.sek{font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 6px}
.pod{color:var(--tekst2);margin:0 0 24px;line-height:1.6;max-width:760px}
.karta{background:#fff;border:1px solid var(--linia);padding:20px 24px}
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.kpi{background:#fff;border:1px solid var(--linia);padding:18px 22px;display:flex;flex-direction:column;gap:6px}
.kv{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst2);padding:12px 14px;border-bottom:1.5px solid var(--grafit);background:var(--papier2)}
td{padding:12px 14px;border-bottom:1px solid var(--linia);vertical-align:top}
tr.klik{cursor:pointer}tr.klik:hover td{background:var(--papier2)}
.st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;white-space:nowrap}
.filtry{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtr{height:34px;padding:0 14px;border:1px solid var(--linia2);background:#fff;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;color:var(--grafit)}
.filtr-on{background:var(--grafit);color:var(--papier2);border-color:var(--grafit)}
.szuk{height:34px;border:1px solid var(--linia2);padding:0 12px;font-family:inherit;font-size:13px;min-width:220px}
.zrodlo{font-size:12px;color:var(--tekst2)}
.pusto{padding:40px;text-align:center;color:var(--tekst2);background:#fff;border:1px dashed var(--linia2)}
.wkrotce{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--papier);border:1px solid var(--linia2);padding:2px 6px}
.ok{color:var(--zielony)}

/* --- rozmowa --- */
.rz{display:flex;flex:1;min-height:0;position:relative}
.rz-lista{width:260px;flex-shrink:0;border-right:1px solid var(--linia);background:var(--papier2);overflow-y:auto;padding:16px 0}
.rz-lista a{display:block;padding:10px 20px;text-decoration:none;font-size:13px;line-height:1.35;color:var(--grafit);overflow-wrap:anywhere}
.rz-lista a:hover{background:var(--papier)}
.rz-lista a.on{background:#fff;font-weight:700;border-left:3px solid var(--limonka);padding-left:17px}
.rz-poz{display:flex;align-items:stretch}
.rz-poz a{flex:1;min-width:0;padding-right:4px}
.rz-poz.on{background:#fff}
.rz-poz.on a{font-weight:700;border-left:3px solid var(--limonka);padding-left:17px}
.rz-usun{background:none;border:0;color:var(--szary);cursor:pointer;padding:0 14px 0 6px;font-size:12px;opacity:0}
.rz-poz:hover .rz-usun,.rz-usun:focus-visible,.rz-poz.on .rz-usun{opacity:1}
.rz-usun:hover{color:var(--czerwony)}
.rz-pusto{margin:6px 20px;font-size:12px;color:var(--szary);line-height:1.45}
.rz-koszt{margin-left:auto;color:var(--szary);font-size:11px;white-space:nowrap;cursor:help}
.b-lista{display:none}
.rz-lista small{display:block;color:var(--szary);font-size:11px;margin-top:2px}
.rz-glowna{flex:1;display:flex;flex-direction:column;min-width:0}
.rz-wiad{flex:1;overflow-y:auto;padding:28px 40px 16px;display:flex;flex-direction:column;gap:18px}
.w-ja{align-self:flex-end;max-width:640px;background:var(--grafit);color:var(--papier2);padding:14px 18px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.w-mozg{background:#fff;border:1px solid var(--linia);padding:18px 24px;max-width:900px;line-height:1.6;overflow-x:auto}
.w-mozg .ov{color:var(--tekst2);display:block;margin-bottom:8px}
.w-mozg p{margin:0 0 10px}.w-mozg p:last-child{margin-bottom:0}
.w-mozg table{font-size:13px;margin:10px 0}
.w-mozg th,.w-mozg td{padding:8px 10px}
.w-mozg code{background:var(--papier);padding:1px 5px;font-size:13px}
.w-mozg pre{background:var(--papier);padding:12px;overflow-x:auto;font-size:12px}
.w-mozg h1,.w-mozg h2,.w-mozg h3{font-size:16px;font-weight:800;margin:14px 0 8px}
.narz{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.narz div{font-size:12px;color:var(--tekst2);display:flex;gap:8px;align-items:center}
.narz div::before{content:"";width:6px;height:6px;background:var(--limonka);flex-shrink:0}
.pisze{display:inline-flex;gap:4px}
.pisze i{width:6px;height:6px;background:var(--grafit);animation:mig 1s infinite}
.pisze i:nth-child(2){animation-delay:.2s}.pisze i:nth-child(3){animation-delay:.4s}
@keyframes mig{0%,100%{opacity:.2}50%{opacity:1}}
.zatw{max-width:900px;background:var(--papier);border:1.5px solid var(--grafit);display:flex;flex-direction:column}
.zatw::before{content:"";height:8px;background:var(--limonka)}
.zatw-w{padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.zatw h3{margin:0;font-size:22px;font-weight:900;text-transform:uppercase}
.zatw .przyc{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--linia)}
.zatw .jest{background:var(--limonka);padding:2px 6px;font-weight:800}
.zatw-stan{font-size:13px;font-weight:700}
.odm{max-width:900px;background:#FFF8E8;border:1px solid var(--pomaranczowy);padding:16px 20px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.odm code{font-size:12px;background:#fff;padding:4px 6px;display:block;white-space:pre-wrap;word-break:break-all}
.rz-pole{border-top:1px solid var(--linia);background:var(--papier2);padding:16px 40px 20px}
.rz-pole form{display:flex;gap:10px;align-items:flex-end;max-width:900px}
.rz-pole textarea{flex:1;min-height:52px;max-height:220px;border:1px solid var(--linia2);padding:14px 16px;font-family:inherit;font-size:15px;resize:none;background:#fff}
.sugestie{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;max-width:900px}
.sug{font-family:inherit;min-height:34px;padding:6px 14px;border:1px solid var(--linia2);background:#fff;font-size:13px;font-weight:500;cursor:pointer;text-align:left}
.sug:hover{border-color:var(--grafit)}
.kontekst{font-size:12px;color:var(--tekst2);margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:900px}
.powitanie{max-width:760px;margin:auto 0}
.powitanie h2{font-size:40px;font-weight:900;text-transform:uppercase;line-height:1.05;margin:0 0 12px}
.powitanie h2 span{background:var(--limonka);padding:0 6px}

/* --- klient --- */
.kl-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.syg{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.syg li{padding:10px 12px;background:#FDF3F3;border-left:3px solid var(--czerwony);font-size:14px;line-height:1.45}
.syg.neutral li{background:var(--papier2);border-left-color:var(--linia2)}
.zad{display:flex;flex-direction:column;gap:6px}
.zad label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.zad label.done span{text-decoration:line-through;color:var(--szary)}
.zad input[type=checkbox]{width:18px;height:18px;accent-color:var(--grafit);margin:1px 0 0;flex-shrink:0}
.zad .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--szary)}
.dodaj{display:flex;gap:8px;margin-top:8px}
.dodaj input{flex:1;min-width:0;height:36px;border:1px solid var(--linia2);padding:0 10px;font-family:inherit;font-size:14px}
.strat{max-height:360px;overflow-y:auto;font-size:14px;line-height:1.55}

/* --- konektory --- */
.kon{background:#fff;border:1px solid var(--linia);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.kon-ik{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--linia)}
.kon-ik svg{width:26px;height:26px}
.kon h4{margin:0 0 4px;font-size:15px}
.kon p{margin:0;font-size:13px;color:var(--tekst2);line-height:1.45}
.kon-g{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.kon .kon-stan{margin-top:8px;font-size:12px;color:var(--szary)}
.kon .kon-zle{color:var(--czerwony);font-weight:600}
.kon-b{margin-top:10px;height:34px;padding:0 14px;font-size:13px}
.kon-podsum{margin:-8px 0 20px;font-size:13px;font-weight:600;color:var(--zielony)}

/* --- okno (zgłoszenie) --- */
.okno-tlo{position:fixed;inset:0;background:rgba(21,23,26,.62);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.okno{width:100%;max-width:560px;background:var(--papier);display:flex;flex-direction:column}
.okno::before{content:"";height:8px;background:var(--limonka)}
.okno-w{padding:28px 32px;display:flex;flex-direction:column;gap:16px}
.okno h3{margin:0;font-size:24px;font-weight:900;text-transform:uppercase}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--grafit);color:var(--papier2);padding:12px 20px;font-size:14px;z-index:60}

/* --- tablet i telefon --- */
@media (max-width:1100px){
  .rz-lista{display:none}
  .b-lista{display:inline-flex}
  .rz.lista-on .rz-lista{display:block;position:absolute;inset:0 auto 0 0;width:min(320px,88%);z-index:5;box-shadow:0 0 0 100vmax rgba(21,23,26,.35)}
  .rz-usun{opacity:1}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kl-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .log{flex-direction:column}
  .log-l{width:100%;padding:32px 24px;gap:20px}
  .log-l h1{font-size:34px;margin-top:8px}
  .side{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .uk.menu .side{transform:none;box-shadow:0 0 0 100vmax rgba(21,23,26,.5)}
  .burger{display:flex;align-items:center;justify-content:center}
  .hdr{padding:0 12px 0 8px;height:60px;gap:8px}
  .hdr .tagi,.hdr .ukryj-m{display:none}
  .tresc{padding:20px 16px 32px}
  .rz-wiad{padding:20px 16px 12px}
  .rz-pole{padding:12px 16px 16px}
  .w-mozg{padding:14px 16px}
  h2.sek{font-size:22px}
  .powitanie h2{font-size:28px}
  .kpis{gap:10px}
  .kv{font-size:24px}
  .tab-m thead{display:none}
  .tab-m tr{display:block;border-bottom:1px solid var(--linia);padding:10px 0}
  .tab-m td{display:block;border:0;padding:4px 14px}
  .karta{padding:16px}
  .szuk{min-width:0;flex:1}
  .zatw-w{padding:16px}
  .zatw h3{font-size:19px}
  .zatw thead{display:none}
  .zatw tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--linia)}
  .zatw td{border:0;padding:8px 12px;text-align:left!important}
  .zatw td:first-child,.zatw td[data-l="Ustawienie"]{grid-column:1/-1}
  .zatw td[data-l]::before{content:attr(data-l);display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst2);margin-bottom:2px}
  .zatw .przyc .btn{flex:1}
}