/* ===== Тема: змініть ці змінні, щоб перефарбувати весь додаток ===== */
:root{
  --bg:#232427;        /* темний графіт — фон */
  --bg2:#1a1b1d;       /* шапка */
  --panel:#2c2e32;     /* картки */
  --panel2:#36383d;    /* вкладені блоки */
  --line:#45484e;
  --text:#ffffff;      /* білі букви на графіті */
  --muted:#a4a7ae;
  --yolk:#f6b81a;      /* жовтково-жовті плашки */
  --yolk-hi:#ffc93a;
  --ink:#111111;       /* чорні букви на жовтому */
  --red:#ff6b5b; --green:#5fd38d; --blue:#86b8ff;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:Unbounded,Manrope,sans-serif;font-weight:700;margin:0;letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:17px} h3{font-size:14px}
small,.muted{color:var(--muted)}
a{color:var(--yolk)}
.hidden,[hidden]{display:none!important}

/* Header */
.top{position:sticky;top:0;z-index:20;background:var(--bg2);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:6px;font-family:Unbounded;font-weight:700;font-size:16px;letter-spacing:.02em;white-space:nowrap}
.logo b{background:var(--yolk);color:var(--ink);padding:2px 7px;border-radius:6px;font-weight:700}
.nav{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
.nav button{background:none;border:0;padding:8px 13px;border-radius:9px;cursor:pointer;color:var(--muted);font-weight:700;white-space:nowrap;position:relative}
.nav button:hover{color:var(--text);background:var(--panel)}
.nav button.on{background:var(--yolk);color:var(--ink)}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:5px}
.nav button.on .badge{background:var(--ink);color:var(--yolk)}
.me{display:flex;align-items:center;gap:10px;font-size:13px}
@media(max-width:760px){.top-in{gap:8px 10px;padding:8px 12px}.nav{order:3;flex-basis:100%}.me{margin-left:auto}.me .who,.me .btn.yolk{display:none}main{padding:16px 12px 60px}.kpi .v{font-size:17px}}
.me .who{text-align:right;line-height:1.2}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-weight:800;font-size:12px;border:1px solid var(--line);flex:none}
.avatar.y{background:var(--yolk);color:var(--ink);border-color:var(--yolk)}

main{max-width:1180px;margin:0 auto;padding:22px 18px 70px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-h p{margin:4px 0 0;color:var(--muted)}
.back{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;margin-bottom:8px;font-weight:700}
.back:hover{color:var(--yolk)}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card,.sec+.sec{margin-top:16px}
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-family:Unbounded;font-size:19px;margin-top:5px;white-space:nowrap}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.y{background:var(--yolk);color:var(--ink);border-color:var(--yolk)}
.kpi.y .l,.kpi.y .s{color:#3b3005}

.pcard{cursor:pointer;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--yolk);transform:translateY(-1px)}
.pcard .t{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard .meta{font-size:13px;color:var(--muted);margin-top:3px}
.pcard .fee{margin-top:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.pcard .fee .big{font-family:Unbounded;font-size:18px}

.bar{height:7px;border-radius:5px;background:var(--panel2);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--yolk);border-radius:5px}
.bar.warn i{background:var(--red)}
.kpi.y .bar{background:rgba(0,0,0,.18)}
.kpi.y .bar i{background:var(--ink)}
.kpi.y .bar.warn i{background:#b3261e}

.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;background:var(--panel2);color:var(--muted);white-space:nowrap;border:1px solid transparent}
.chip.y{background:var(--yolk);color:var(--ink)}
.chip.ok{color:var(--green);border-color:rgba(95,211,141,.35);background:rgba(95,211,141,.08)}
.chip.bad{color:var(--red);border-color:rgba(255,107,91,.4);background:rgba(255,107,91,.08)}
.chip.info{color:var(--blue);border-color:rgba(134,184,255,.35);background:rgba(134,184,255,.08)}
.chip.line{border-color:var(--line)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.filter button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:6px 13px;cursor:pointer;font-weight:700;font-size:13px}
.filter button.on{background:var(--yolk);border-color:var(--yolk);color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 15px;font-weight:800;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.yolk{background:var(--yolk);color:var(--ink);border-color:var(--yolk)}
.btn.yolk:hover{background:var(--yolk-hi)}
.btn.ghost{background:none}
.btn.danger{color:var(--red);border-color:rgba(255,107,91,.5);background:none}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.xs{padding:3px 8px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}
tr.click:hover td{background:rgba(246,184,26,.05)}
tr.sub td{background:var(--bg);padding:0}
tfoot td{font-weight:800;background:var(--panel2)}
.nowrap{white-space:nowrap}
.desc{max-width:420px}
.plan-list{margin:0;padding-left:16px;font-size:13px;color:var(--muted)}
.ot{color:var(--yolk);font-weight:800}
.otr{margin-top:6px;font-size:13px;border-left:3px solid var(--yolk);padding-left:8px;color:#e8d9a8}
.hist{margin-top:6px;font-size:12px;color:var(--muted);border-left:2px solid var(--line);padding-left:8px}

/* Days inside expanded row */
.days{padding:12px 14px 14px 30px}
.day{display:grid;grid-template-columns:110px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.day:last-child{border-bottom:0}
.day .d{font-weight:800}
.day .d small{display:block;font-weight:600}
@media(max-width:700px){.day{grid-template-columns:1fr}.days{padding-left:14px}}

/* Gantt */
.gantt{position:relative}
.g-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;padding:6px 0}
.g-name{font-weight:700;font-size:14px;line-height:1.2}
.g-name small{display:block;font-weight:600;font-size:12px}
.g-track{position:relative;height:22px;background:var(--panel2);border-radius:6px}
.g-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;background:#5b5e65}
.g-bar.now{background:var(--yolk)}
.g-bar.future{background:transparent;border:2px solid var(--yolk);top:3px;bottom:3px}
.g-today{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--red)}
.g-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.g-legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
@media(max-width:600px){.g-row{grid-template-columns:1fr}}

/* Tasks */
.task{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task .tb{flex:1;min-width:0}
.task .tt{font-weight:700}
.task.done .tt{text-decoration:line-through;color:var(--muted)}
.task .tm{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.check{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);background:none;cursor:pointer;flex:none;display:grid;place-items:center;color:var(--ink);font-weight:900;font-size:13px;padding:0}
.check.on{background:var(--yolk);border-color:var(--yolk)}
.check:disabled{cursor:default}
.delay-note{margin-top:6px;font-size:13px;color:#ffc2ba;border-left:3px solid var(--red);padding-left:8px}

/* Notices */
.notice{display:flex;gap:12px;padding:13px;border-radius:10px;background:var(--panel2);border-left:4px solid var(--red)}
.notice+.notice{margin-top:10px}
.notice.info{border-left-color:var(--blue)}
.notice.y{border-left-color:var(--yolk)}
.notice .nb{flex:1}
.notice .nt{font-weight:700}
.notice .nm{font-size:13px;color:var(--muted);margin-top:3px}
.affect{margin-top:8px;font-size:13px;background:rgba(246,184,26,.08);border-radius:8px;padding:8px 10px;color:#f1dfa6}

/* Load calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .wd{font-size:11px;color:var(--muted);text-align:center;font-weight:800;text-transform:uppercase}
.cal .c{min-height:54px;border-radius:8px;background:var(--panel2);padding:5px 6px;font-size:11px;position:relative;overflow:hidden}
.cal .c .n{font-weight:800;color:var(--muted)}
.cal .c.today{outline:2px solid var(--red)}
.cal .c .pj{display:block;margin-top:3px;border-radius:4px;padding:1px 4px;color:var(--ink);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .c.out{opacity:.35}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:10px}
.legend span i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* Forms */
.form label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:12px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:5px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:var(--text);font-weight:500}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--yolk)}
.form input.bad,.form textarea.bad,.form select.bad,.fs.bad{border-color:var(--red)!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.req{color:var(--yolk)}
.fs{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px}
.fs-h{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px}
.pl-item{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;cursor:pointer}
.pl-item input{width:18px;height:18px;margin:0;accent-color:var(--yolk);flex:none}
.pl-item .pm{font-size:12px;color:var(--muted)}
.row{display:flex;gap:8px;margin-top:8px}
.row input{margin:0!important;flex:1}
.calc{background:var(--panel2);border-radius:9px;padding:10px 12px;font-size:13px;margin:-2px 0 12px}
.calc b{color:var(--text)}
.ot-box{background:rgba(246,184,26,.08);border:1px solid rgba(246,184,26,.45);border-radius:10px;padding:12px 12px 2px;margin-bottom:12px}
.ot-box label{color:var(--yolk)}
.err{color:var(--red);font-size:13px;font-weight:700;margin-bottom:10px}
.err:empty{display:none}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:14px;background:none;border:0;padding:0}
.switch .tr{width:40px;height:22px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);position:relative;flex:none;transition:.15s}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:.15s}
.switch.on .tr{background:var(--yolk);border-color:var(--yolk)}
.switch.on .tr::after{left:20px;background:var(--ink)}
.switch:disabled{cursor:default;opacity:.7}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 14px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:600px;padding:20px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px}
.x{background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;padding:0 4px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--yolk);color:var(--ink);padding:11px 18px;border-radius:10px;font-weight:800;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:30px 16px}
.login-box{width:100%;max-width:420px}
.login .logo{font-size:26px;justify-content:center;margin-bottom:6px}
.login .tag{text-align:center;color:var(--muted);margin-bottom:24px}
.demo{margin-top:22px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #fff;border-radius:10px;padding:11px 15px;font-weight:800;cursor:pointer;font-size:15px}
.gbtn:hover{background:#f1f1f1}
.gbtn .gi{width:22px;height:22px;border-radius:50%;border:2px solid #1f1f1f;display:grid;place-items:center;font-size:12px;font-weight:900}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.demo-h{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.demo-u{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left;margin-bottom:6px}
.demo-u:hover{border-color:var(--yolk)}
.demo-u .nm{flex:1;font-weight:700;font-size:14px}
.demo-u .nm small{display:block;font-weight:600}
.empty{color:var(--muted);text-align:center;padding:22px;font-size:14px}
.foot{max-width:1180px;margin:0 auto;padding:0 18px 30px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.foot button{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:12px;padding:0}
.lock{font-size:11px}