:root{
  --bg:#e9ebef; --panel:#f7f7f8; --card:#fff; --ink:#0e1013; --mut:#8b9099; --line:#ececef;
  --green:#4ade80; --green2:#16a34a;
  --obvolat:#3b82f6; --druhy:#f59e0b; --rozprac:#8b5cf6; --hotovo:#22c55e; --archiv:#94a3b8;
  --r:22px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.45 Inter,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
.shell{max-width:1480px;margin:22px auto;background:var(--panel);border-radius:34px;padding:26px 30px 40px;min-height:calc(100vh - 44px)}

/* horní lišta */
.top{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:500;display:flex;align-items:center;gap:10px;letter-spacing:-.3px;white-space:nowrap}
.brand b{font-weight:800}
.logo{width:30px;height:22px;border-radius:4px 14px 14px 14px;background:linear-gradient(135deg,var(--green2),var(--green));box-shadow:6px 6px 0 -1px #bbf7d0}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav button{padding:10px 16px;border-radius:14px;color:#4b5058;display:flex;align-items:center;gap:8px;white-space:nowrap}
nav button:hover{background:#ececef}
nav button.on{background:var(--ink);color:#fff;font-weight:600}
nav .dot,.dot{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block;flex:none}
nav .n{font-size:12px;opacity:.6}
.tools{display:flex;gap:10px;align-items:center}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 14px;height:44px;width:290px}
.search input{border:0;outline:0;flex:1;background:none;min-width:0}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon{width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;position:relative}
.icon i{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;font:700 11px/18px Inter,sans-serif;min-width:18px;height:18px;border-radius:9px;padding:0 4px;font-style:normal}
.icon i:empty{display:none}

/* přehled */
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:34px 0 22px;flex-wrap:wrap}
.hero small{color:var(--mut);font-size:15px}
.hero h1{font-size:54px;letter-spacing:-2px;margin:2px 0 4px;line-height:1.05}
.hero p{margin:0;color:var(--mut);font-size:18px}
.stats{display:flex;gap:10px;align-items:flex-end}
.stat{border-radius:var(--r);padding:20px 22px;min-width:190px;background:linear-gradient(135deg,#bbf7d0,#86efac 55%,#dcfce7);text-align:left;transition:transform .15s}
.stat:hover{transform:translateY(-3px)}
.stat:first-child{min-width:230px;padding-bottom:30px}
.stat.warn{background:linear-gradient(135deg,#fecaca,#fca5a5 55%,#fee2e2)}
.stat.blue{background:linear-gradient(135deg,#bfdbfe,#93c5fd 55%,#dbeafe)}
.stat span{font-weight:600;font-size:14px}
.stat b{display:block;font-size:46px;letter-spacing:-2px;line-height:1.1;margin-top:8px}
.stat em{font-style:normal;font-size:13px;opacity:.75}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:var(--card);border-radius:var(--r);padding:22px;min-width:0}
.card h3{margin:0 0 16px;font-size:16px;font-weight:650;display:flex;align-items:center;gap:9px}
.donut{display:flex;align-items:center;gap:26px}
.donut svg{width:150px;height:150px;stroke-width:14}
.donut .big{font:700 30px Inter,sans-serif;fill:var(--ink);stroke:none}
.donut .sm{font:13px Inter,sans-serif;fill:var(--mut);stroke:none}
.legend b{display:block;font-size:20px}
.legend span{color:var(--mut);font-size:13px;display:block;margin-bottom:8px}
.bar{display:grid;grid-template-columns:150px 1fr 34px;align-items:center;gap:12px;padding:8px 6px;width:100%;text-align:left;border-radius:10px}
.bar:hover{background:#f5f5f7}
.bar .tr{height:7px;border-radius:4px;background:#eee;overflow:hidden}
.bar .tr i{display:block;height:100%;background:var(--c);border-radius:4px}
.bar b{text-align:right}
.li{display:flex;align-items:center;gap:12px;padding:9px 6px;width:100%;text-align:left;border-radius:10px;border-bottom:1px solid var(--line)}
.li:last-child{border:0}
.li:hover{background:#f5f5f7}
.li .t{flex:1;min-width:0}
.li .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t span{color:var(--mut);font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .w{font-size:13px;color:var(--mut);white-space:nowrap}
.li .w.late{color:#dc2626;font-weight:600}
.li .w.now{color:var(--green2);font-weight:600}
.empty{color:var(--mut);padding:14px 6px;font-size:14px}

/* sekce */
.sechead{display:flex;align-items:center;gap:16px;margin:30px 0 16px;flex-wrap:wrap}
.sechead h2{font-size:34px;letter-spacing:-1px;margin:0;display:flex;align-items:center;gap:14px}
.sechead h2 .dot{width:16px;height:16px}
.sechead .cnt{color:var(--mut)}
.chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{padding:7px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px}
.chip.on{background:var(--c);border-color:var(--c);color:#fff;font-weight:600}
.btn{padding:11px 18px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;white-space:nowrap}
.btn.light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.green{background:var(--green);color:#052e16}
.btn.sm{padding:8px 13px;border-radius:11px;font-size:13px}
.table{background:#fff;border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:6px minmax(200px,2.2fr) 130px 190px 150px 44px 120px minmax(120px,2fr);gap:14px;align-items:center;padding:13px 18px 13px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row:last-child{border:0}
.row:hover{background:#fafafb}
.row.head{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding-top:12px;padding-bottom:12px;cursor:default}
.row.head:hover{background:none}
.row .stripe{align-self:stretch;background:var(--c);border-radius:0 4px 4px 0;margin:-13px 0}
.row b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .note{color:var(--mut);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-block;padding:4px 10px;border-radius:9px;font-size:12.5px;font-weight:600;background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 75%,#000);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.prio{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;background:#f1f1f3}
.prio.A{background:#fee2e2;color:#b91c1c}.prio.B{background:#ffedd5;color:#c2410c}.prio.C{background:#fef9c3;color:#a16207}.prio.D{background:#f1f5f9;color:#64748b}
.late{color:#dc2626;font-weight:600}.now{color:var(--green2);font-weight:600}

/* panel kontaktu */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100vw);background:#fff;box-shadow:-20px 0 60px rgba(15,17,21,.18);transform:translateX(105%);transition:transform .22s;display:flex;flex-direction:column;z-index:20;border-radius:28px 0 0 28px;overflow:hidden}
.drawer.open{transform:none}
.dhead{padding:22px 26px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#fff))}
.dhead .x{float:right;width:36px;height:36px;border-radius:12px;background:#fff;font-size:18px}
.dhead h2{margin:4px 0 2px;font-size:25px;letter-spacing:-.5px;line-height:1.2}
.dhead p{margin:0 0 14px;color:#4b5058;font-size:14px}
.dhead .sel{display:flex;gap:8px;flex-wrap:wrap}
select,input[type=text],input[type=date],input[type=datetime-local],input[type=email],input[type=url],textarea{border:1px solid #e3e4e8;border-radius:12px;padding:9px 12px;background:#fff;outline:0;width:100%}
select:focus,input:focus,textarea:focus{border-color:var(--ink)}
.dhead select{width:auto;font-weight:600}
.quick{display:flex;gap:8px;flex-wrap:wrap;padding:14px 26px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:2px;padding:12px 22px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{padding:10px 13px;border-radius:12px 12px 0 0;display:flex;gap:8px;align-items:center;color:#5b6069;white-space:nowrap;border-bottom:3px solid transparent;font-size:14px}
.tabs button.on{color:var(--ink);font-weight:650;border-bottom-color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff)}
.tabs .n{font-size:12px;color:var(--mut)}
.dbody{padding:22px 26px 40px;overflow:auto;flex:1}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{font-size:12.5px;color:var(--mut);display:block}
.form label.w{grid-column:1/-1}
.form label>*{margin-top:4px;color:var(--ink);font-size:15px}
textarea{resize:vertical;min-height:80px}
.info{background:color-mix(in srgb,var(--c) 8%,#fff);border-left:4px solid var(--c);border-radius:0 14px 14px 0;padding:12px 16px;margin-bottom:16px;font-size:14px}
.info b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:color-mix(in srgb,var(--c) 70%,#000);margin-bottom:3px}
.add{display:flex;gap:8px;margin-bottom:18px}
.add input[type=date]{width:150px;flex:none}
.tl{position:relative;padding-left:22px;border-left:2px solid color-mix(in srgb,var(--c) 30%,#fff);margin-left:6px}
.tl .it{position:relative;padding:0 0 18px}
.tl .it::before{content:"";position:absolute;left:-29px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--c);border:3px solid #fff}
.tl time{font-size:12.5px;color:var(--mut);display:block}
.del{color:#c0c4cc;float:right;padding:0 4px;font-size:16px}
.del:hover{color:#dc2626}
.task{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.task input[type=checkbox]{width:20px;height:20px;accent-color:var(--green2);margin-top:1px;flex:none}
.task .tx{flex:1;word-break:break-word}
.task.done .tx{text-decoration:line-through;color:var(--mut)}
.task input[type=date]{width:140px;flex:none;padding:5px 8px;font-size:13px}
.next{background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:16px;padding:16px;margin-bottom:20px}
.next h4{margin:0 0 10px;font-size:14px}
.next .r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.next input{width:230px}
h4.sub{margin:22px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
pre.brief{white-space:pre-wrap;background:#f7f7f8;border-radius:14px;padding:16px;font:13.5px/1.55 ui-monospace,Consolas,monospace;margin:0 0 14px}
.danger{color:#dc2626;font-size:13px;margin-top:22px}

/* okna */
.modal{position:fixed;inset:0;background:rgba(15,17,21,.4);display:none;place-items:center;z-index:30;padding:20px}
.modal.open{display:grid}
.box{background:#fff;border-radius:26px;padding:28px;width:min(620px,100%);max-height:92vh;overflow:auto}
.box h3{margin:0 0 6px;font-size:22px}
.box p{color:var(--mut);margin:0 0 16px;font-size:14px}
.box .form{grid-template-columns:1fr}
.box .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.flash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:14px;transition:transform .2s;z-index:40;font-weight:600}
.flash.on{transform:translate(-50%,0)}

@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  .stats{flex-wrap:wrap}
  .row{grid-template-columns:6px 1fr 120px 150px}
  .row>:nth-child(n+6){display:none}
  .search{width:100%}.tools{width:100%}
  .shell{margin:0;border-radius:0;padding:18px 14px 40px}
}
@media (max-width:640px){
  .row.head{display:none}
  .row{grid-template-columns:6px minmax(0,1fr) auto;gap:4px 12px;padding-right:14px}
  .row>:nth-child(n){display:none}
  .row>:nth-child(1),.row>:nth-child(2),.row>:nth-child(4){display:block}
  .row>:nth-child(1){grid-row:1/3}
  .row>:nth-child(4){max-width:150px}
  .row>:nth-child(5){display:block;grid-column:2/-1;font-size:13px;color:var(--mut)}
  .row>:nth-child(5).late{color:#dc2626}.row>:nth-child(5).now{color:var(--green2)}
  .sechead h2{font-size:28px;flex:1}
  .sechead .chips{flex:1 1 100%;order:3}
  .hero h1{font-size:34px;letter-spacing:-1px}
  .stat,.stat:first-child{min-width:0;flex:1 1 100%;padding:16px 18px}
  .donut{gap:16px}.donut svg{width:120px;height:120px}
  .bar{grid-template-columns:120px 1fr 30px}
  .add{flex-wrap:wrap}.add input[type=text]{flex:1 1 100%}
  .task{flex-wrap:wrap}.task .tx{flex:1 1 70%}
  .next input{width:100%}
  .form{grid-template-columns:1fr}
  .drawer{border-radius:0}
}