:root{--bg:#1B1D22;--side:#17191D;--card:#212328;--card2:#292B30;--line:rgba(243,234,214,.12);--ink:#F3EAD6;--dim:#9C9B98;--gold:#C9BC93;--green:#8FBF9F;--amber:#D9B76C;--red:#D98C8C;--blue:#9CAED1}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font:14px/1.45 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
a{color:var(--gold)}
/* каркас */
.shell{display:flex;min-height:100vh}
.side{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px;gap:10px}
.top h1{font-size:22px}
.top .sub{margin-top:2px}
.who-me{font-size:11px;color:var(--dim);text-align:right}
.page{padding:6px 14px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;width:100%;max-width:1400px}
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#23252A;border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:5}
.tabbar button{flex:1;background:none;border:0;color:var(--dim);font-size:10.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;min-width:0}
.tabbar button b{font-size:18px;font-weight:400;line-height:1}.tabbar button.on{color:var(--gold)}
@media(min-width:900px){
  .side{display:flex;flex-direction:column;width:232px;flex:0 0 232px;background:var(--side);border-right:1px solid var(--line);padding:20px 12px;gap:4px;position:sticky;top:0;height:100vh}
  .side .logo{font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;padding:2px 10px 16px;line-height:1.1}
  .side .logo small{display:block;font-family:Inter,sans-serif;font-size:10.5px;color:var(--dim);letter-spacing:.08em;margin-top:4px}
  .side button.nav{display:flex;align-items:center;gap:11px;background:none;border:0;border-radius:11px;color:var(--dim);padding:10px 12px;font-weight:600;font-size:13.5px;text-align:left}
  .side button.nav b{width:20px;text-align:center;font-weight:400;font-size:16px}
  .side button.nav:hover{background:rgba(255,255,255,.04);color:var(--ink)}
  .side button.nav.on{background:rgba(201,188,147,.13);color:var(--gold)}
  .side .me{margin-top:auto;border-top:1px solid var(--line);padding:12px 10px 0;font-size:12px;color:var(--dim)}
  .side .me b{display:block;color:var(--ink);font-size:13px}
  .tabbar{display:none}
  .main{padding-bottom:30px}
  .top{padding:22px 28px 8px}.top h1{font-size:28px}
  .page{padding:8px 28px 28px}
  .who-me.mob{display:none}
}
/* карточки и текст */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.card.tap{cursor:pointer}.card.tap:hover,.card.tap:active{border-color:rgba(201,188,147,.5)}
.row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:4px;min-width:0}
.name{font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.sub{font-size:12px;color:var(--dim);overflow-wrap:anywhere}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.07);color:var(--dim);border:0}
.badge.progress{background:rgba(156,174,209,.15);color:var(--blue)}.badge.review{background:rgba(217,183,108,.15);color:var(--amber)}
.badge.approved,.badge.done,.badge.ok{background:rgba(143,191,159,.15);color:var(--green)}.badge.late,.badge.critical,.badge.over{background:rgba(217,140,140,.16);color:var(--red)}
.badge.attention,.badge.high{background:rgba(217,183,108,.15);color:var(--amber)}
.badge.waiting_client{background:rgba(201,188,147,.15);color:var(--gold)}.badge.paused{background:rgba(255,255,255,.1);color:var(--ink)}
.badge.blocked{background:rgba(217,140,140,.16);color:var(--red)}
.bar{height:6px;border-radius:6px;background:var(--card2);overflow:hidden}.bar i{display:block;height:100%;background:var(--gold)}
.bar i.ok{background:var(--green)}.bar i.warn{background:var(--amber)}.bar i.bad{background:var(--red)}
.red{color:var(--red)}.green{color:var(--green)}.amber{color:var(--amber)}.gold{color:var(--gold)}.blue{color:var(--blue)}
.sec{font-family:Anton,Impact,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);margin:6px 0 0}
.empty{text-align:center;color:var(--dim);font-size:13px;padding:22px 0}
.notice{background:rgba(201,188,147,.09);border:1px solid rgba(201,188,147,.25);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--dim)}
.notice b{color:var(--gold)}
/* контролы */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--dim);font-size:12.5px;font-weight:700}
.chip.on{background:var(--gold);color:#1B1D22;border-color:var(--gold)}
.sel,.inp,textarea.inp{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
textarea.inp{resize:vertical;min-height:70px}
.sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.sel:disabled{opacity:.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{background:var(--gold);color:#1B1D22;border:0;border-radius:12px;padding:11px 14px;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:transparent;color:var(--red);border:1px solid rgba(217,140,140,.4)}
.btn.sm{padding:7px 10px;font-size:11px}.btn:disabled{opacity:.5}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar .inp,.toolbar .sel{width:auto;min-width:130px;flex:1 1 130px;max-width:260px;padding:9px 12px;font-size:13px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.seg button{background:none;border:0;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--dim)}
.seg button.on{background:var(--gold);color:#1B1D22}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim);font-weight:600}
label.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px}
label.chk input{margin-top:3px}
.back{background:none;border:0;color:var(--gold);font-weight:700;padding:0;text-align:left;font-size:13px}
.center{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 20px;max-width:480px;margin:0 auto}
/* диалог */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-end;justify-content:center;z-index:20}
.sheet-bg.on{display:flex}
.sheet{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:#25272C;border:1px solid var(--line);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.sheet>*{flex-shrink:0}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.top{flex-wrap:wrap}
.top>.col{flex:1 1 220px;min-width:0}
.sheet h3{font-size:19px;overflow-wrap:anywhere}
@media(min-width:900px){.sheet-bg{align-items:center}.sheet{border-radius:20px;max-height:86vh;max-width:640px}.sheet.wide{max-width:760px}}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--gold);color:#1B1D22;padding:11px 16px;border-radius:12px;font-weight:700;font-size:13px;z-index:30;display:none;max-width:90%;text-align:center}
.toast.err{background:var(--red)}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.kpis{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.kpis.k7{grid-template-columns:repeat(7,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;cursor:pointer}
.kpi b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;line-height:1.1}
.kpi span{font-size:11.5px;color:var(--dim)}
.cols2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1000px){.cols2{grid-template-columns:3fr 2fr}}
/* health */
.hs{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:28px;padding:0 8px;border-radius:9px;font-weight:800;font-size:13px;font-family:"IBM Plex Mono",monospace;flex:0 0 auto}
.hs.ok{background:rgba(143,191,159,.16);color:var(--green)}.hs.attention{background:rgba(217,183,108,.16);color:var(--amber)}.hs.critical{background:rgba(217,140,140,.18);color:var(--red)}.hs.nodata,.hs.done,.hs.paused{background:rgba(255,255,255,.07);color:var(--dim)}
/* проекты */
.plist{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:1000px){.plist{grid-template-columns:1fr 1fr}}
@media(min-width:1500px){.plist{grid-template-columns:1fr 1fr 1fr}}
.task{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.task:first-child{border-top:0}
.task .col{flex:1;cursor:pointer}
.tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--dim);white-space:nowrap}
.tag.red{background:rgba(217,140,140,.16);color:var(--red)}.tag.amber{background:rgba(217,183,108,.15);color:var(--amber)}
/* канбан */
.kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;align-items:flex-start;-webkit-overflow-scrolling:touch}
.kcol{flex:0 0 250px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kcol.over{border-color:var(--gold)}
.kcol h4{font-size:12px;color:var(--dim);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.04em}
.kcard{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:9px 10px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.kcard.late{border-color:rgba(217,140,140,.5)}.kcard.drag{opacity:.4}
.kcard .name{font-size:13px;font-weight:600}
/* гант */
.gantt{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);max-height:70vh}
.gantt-in{position:relative}
.g-head{position:sticky;top:0;z-index:3;background:var(--card);display:flex;height:34px;border-bottom:1px solid var(--line)}
.g-label{position:sticky;left:0;z-index:2;background:var(--card);flex:0 0 190px;width:190px;padding:6px 10px;font-size:12px;border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.g-row{display:flex;height:32px;border-bottom:1px solid rgba(243,234,214,.05);position:relative}
.g-track{position:relative;flex:1}
.g-bar{position:absolute;top:8px;height:16px;border-radius:5px;background:#6e7f9c;cursor:pointer;min-width:6px}
.g-bar.todo{background:#5b5f69}.g-bar.progress{background:#6e86b5}.g-bar.review,.g-bar.waiting_client{background:#b79a4e}.g-bar.approved,.g-bar.done{background:#5f9774}.g-bar.late{background:#b96a6a}
.g-bar.blocked{outline:2px solid var(--red)}
.g-day{position:absolute;top:0;bottom:0;border-left:1px solid rgba(243,234,214,.05);font-size:10px;color:var(--dim);padding:10px 0 0 2px}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);opacity:.7;z-index:1}
.g-svg{position:absolute;left:190px;top:34px;pointer-events:none;z-index:1}
@media(max-width:600px){.g-label{flex-basis:120px;width:120px}.g-svg{left:120px}}
/* загрузка */
.tbl{width:100%;border-collapse:separate;border-spacing:0 6px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl th{font-size:11px;color:var(--dim);font-weight:700;text-align:center;padding:2px 4px;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:0 3px}
.tbl td.who{min-width:150px;padding-right:10px}
.cell{border-radius:9px;padding:7px 4px;text-align:center;font-weight:800;font-size:12.5px;font-family:"IBM Plex Mono",monospace;min-width:56px;cursor:pointer;border:1px solid transparent}
.cell small{display:block;font-size:10px;font-weight:500;opacity:.8}
.cell.ok{background:rgba(143,191,159,.16);color:var(--green)}.cell.high{background:rgba(217,183,108,.18);color:var(--amber)}.cell.over{background:rgba(217,140,140,.2);color:var(--red)}.cell.away{background:rgba(255,255,255,.07);color:var(--dim)}.cell.empty0{background:rgba(255,255,255,.03);color:var(--dim)}
.cell:hover{border-color:var(--gold)}
.dtl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px}
.dtl dt{color:var(--dim)}
.ev{font-size:12px;padding:6px 0;border-top:1px solid var(--line)}.ev:first-child{border-top:0}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left}
.opt.on{border-color:var(--gold)}
@media(min-width:900px){.kcol{flex:1 0 175px}}