/* CRM BBG — стили.
   Идея: «табель». Рабочий инструмент агентства, где всё крутится вокруг часов и сроков документов.
   Заголовки — Tektur (как надписи на спецовке и оборудовании), текст — Inter, цифры — Geist Mono.
   Главная деталь — кнопки-клавиши: у них есть бортик снизу, при нажатии кнопка уходит вниз.
   Всё остальное плоское и спокойное: тонкие линии, без свечения и градиентов. Цвет — только со смыслом. */

/* ---------- шрифты (лежат в проекте, никаких внешних сервисов) ---------- */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/inter-500.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/inter-600.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/inter-700.woff") format("woff")}
@font-face{font-family:"Tektur";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/tektur-500.woff") format("woff")}
@font-face{font-family:"Geist Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/geistmono-400.woff") format("woff")}

/* ---------- темы ---------- */
/* Тёмно-синяя (по умолчанию) */
:root,:root[data-theme="navy"]{
  color-scheme:dark;
  --bg:#0B1220;--panel:#111A2C;--raise:#18233A;--sunk:#0D1525;--line:#223049;--line-2:#2E3C59;
  --ink:#DDE5F2;--muted:#8E9DB6;--faint:#5F6E89;
  --accent:#7AA7F0;--accent-ink:#08142A;--accent-edge:#4673BE;--accent-soft:#1A2C4D;
  --red:#FF8F86;--on-red:#2A0D0B;--red-edge:#B9524A;--red-soft:#3A1E27;
  --amber:#EDB765;--amber-soft:#38301B;--green:#6FCF9F;--green-soft:#15332A;--violet:#A99BF5;
  --key-edge:#050A14;--backdrop:rgba(3,8,18,.64);--pop:0 18px 48px rgba(0,0,0,.55);
}
/* Чёрная: нейтральные серые, без оттенка */
:root[data-theme="black"]{
  color-scheme:dark;
  --bg:#000000;--panel:#121212;--raise:#1D1D1D;--sunk:#0A0A0A;--line:#262626;--line-2:#363636;
  --ink:#ECECEC;--muted:#9C9C9C;--faint:#6A6A6A;
  --accent:#EDEDED;--accent-ink:#0A0A0A;--accent-edge:#8F8F8F;--accent-soft:#262626;
  --red:#FF7B72;--on-red:#1A0605;--red-edge:#A9443D;--red-soft:#2C1513;
  --amber:#E3B341;--amber-soft:#2A220F;--green:#56D364;--green-soft:#0F2514;--violet:#B5A6FF;
  --key-edge:#3A3A3A;--backdrop:rgba(0,0,0,.72);--pop:0 18px 48px rgba(0,0,0,.8);
}
/* Белая: холодная, без кремового оттенка */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ECEFF3;--panel:#FFFFFF;--raise:#F7F8FA;--sunk:#F2F4F7;--line:#D8DDE4;--line-2:#C2C9D3;
  --ink:#14171C;--muted:#566070;--faint:#8D96A5;
  --accent:#2357C9;--accent-ink:#FFFFFF;--accent-edge:#173C8D;--accent-soft:#E2EAFA;
  --red:#C2362B;--on-red:#FFFFFF;--red-edge:#86221B;--red-soft:#FBE7E5;
  --amber:#9A6200;--amber-soft:#FBEFD6;--green:#1F7A4D;--green-soft:#E0F1E7;--violet:#6A4FD8;
  --key-edge:#B8C0CB;--backdrop:rgba(20,23,28,.42);--pop:0 18px 44px rgba(20,23,28,.18);
}
:root{
  --font:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:"Tektur","Inter",system-ui,sans-serif;
  --font-num:"Geist Mono",ui-monospace,Consolas,monospace;
  --r:10px;--r-sm:6px;
}

/* ---------- основа ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);font-variant-numeric:tabular-nums;
  padding-top:env(safe-area-inset-top,0px)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
a{color:var(--accent)}
h1{font:500 28px/1.1 var(--font-head);letter-spacing:.005em;margin:0}
h2{font-size:17px;font-weight:600;line-height:1.3;margin:0}
h3{font-size:15px;font-weight:600;margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--font-num);letter-spacing:0}
.bad{color:var(--red)}
.warn{color:var(--amber)}
.sp{flex:1}
.hint,.lhint{color:var(--muted);font-size:14px;margin:8px 0;line-height:1.45}
.lead{color:var(--muted);margin:6px 0 0;max-width:70ch}
.empty{color:var(--muted);padding:14px 16px;margin:0}
.err{background:var(--red-soft);color:var(--red);padding:9px 12px;border-radius:var(--r-sm);margin-top:12px;font-size:14px}

/* ---------- кнопки-клавиши ---------- */
.btn{--edge:var(--key-edge);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:600 14px/1.2 var(--font);padding:9px 14px;border-radius:7px;cursor:pointer;white-space:nowrap;
  background:var(--raise);color:var(--ink);border:1px solid var(--line-2);
  box-shadow:0 3px 0 0 var(--edge);transform:translateY(0);
  transition:transform .07s ease-out,box-shadow .07s ease-out,background-color .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 0 var(--edge)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--edge)}
.btn.primary{--edge:var(--accent-edge);background:var(--accent);border-color:var(--accent-edge);color:var(--accent-ink)}
.btn.danger{color:var(--red)}
.btn.danger-fill{--edge:var(--red-edge);background:var(--red);border-color:var(--red-edge);color:var(--on-red)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted);padding-inline:8px}
.btn.ghost:hover{transform:none;box-shadow:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.btn.ghost:active{transform:none}
.btn.ghost.danger{color:var(--red)}
.btn.sm{padding:4px 10px;font-size:13px;box-shadow:0 2px 0 0 var(--edge)}
.btn.sm:hover{box-shadow:0 3px 0 0 var(--edge)}
.btn.sm:active{transform:translateY(2px);box-shadow:0 0 0 0 var(--edge)}
.btn.ghost.sm{box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 1px 0 0 var(--edge)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:inherit}

/* ---------- поля ---------- */
input,select,textarea{background:var(--sunk);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;min-width:0;color:var(--ink);
  transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;padding:0}
input::placeholder{color:var(--faint)}

/* ---------- каркас ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;padding:22px 12px;background:var(--panel);border-right:1px solid var(--line)}
.brand{font:500 22px/1 var(--font-head);letter-spacing:.06em;padding:4px 12px 26px;color:var(--ink)}
#nav{display:flex;flex-direction:column;gap:2px}
.navbtn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:40px;
  background:none;border:0;padding:9px 12px 9px 15px;border-radius:var(--r-sm);text-align:left;cursor:pointer;color:var(--muted);font-weight:500}
.navbtn:hover{color:var(--ink);background:var(--raise)}
.navbtn.on{color:var(--ink);background:var(--raise);font-weight:600}
.navbtn.on::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)}
.badge{font:600 12px/1 var(--font-num);padding:4px 6px;border-radius:5px;background:var(--red);color:var(--on-red);min-width:20px;text-align:center}
.badge.new-badge{background:var(--accent);color:var(--accent-ink)}
.badge.warn-badge{background:var(--amber);color:var(--bg)}

.main{padding:0 clamp(16px,3vw,40px) 64px;min-width:0}
.top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:12px;
  margin:0 calc(-1 * clamp(16px,3vw,40px)) 26px;padding:10px clamp(16px,3vw,40px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mbrand{display:none;font:500 18px/1 var(--font-head);letter-spacing:.06em}

/* переключатель темы: квадратики с цветами каждой темы */
.themes{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.sw{width:26px;height:26px;border-radius:5px;border:1px solid var(--line-2);cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--sw-bg) 0 55%,var(--sw-ac) 55% 100%)}
.sw[data-theme-set="navy"]{--sw-bg:#0B1220;--sw-ac:#7AA7F0}
.sw[data-theme-set="black"]{--sw-bg:#000000;--sw-ac:#EDEDED}
.sw[data-theme-set="light"]{--sw-bg:#FFFFFF;--sw-ac:#2357C9}
.sw[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}

/* пользователь в шапке */
.user{position:relative}
.userbtn{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:8px;padding:4px 8px 4px 4px;cursor:pointer;color:var(--ink)}
.userbtn:hover,.userbtn[aria-expanded="true"]{background:var(--raise);border-color:var(--line)}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.ava svg{width:18px;height:18px}
.uname{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.uname b{font-weight:600;font-size:14px}
.uname small{color:var(--muted);font-size:12px}
.caret{width:14px;height:14px;color:var(--muted)}
.umenu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:6px;box-shadow:var(--pop);z-index:30}
.umenu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:5px;background:none;border:0;color:var(--ink);cursor:pointer}
.umenu button:hover,.umenu button:focus-visible{background:var(--raise)}
.umenu hr{border:0;border-top:1px solid var(--line);margin:6px 2px}
.umenu .danger{color:var(--red)}

/* ---------- заголовки страниц ---------- */
.head{margin-bottom:20px}
.head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head .acts{display:flex;gap:8px;flex-wrap:wrap}
.count{font:400 16px/1 var(--font-num);color:var(--muted);margin-left:10px;letter-spacing:0;vertical-align:4px}

/* ---------- таблицы ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#q{flex:1 1 240px}
.scroll{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse}
.tbl.wide{min-width:1000px}
.tbl th{text-align:left;font-weight:500;font-size:13px;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sunk);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr[data-worker],.tbl tr[data-user]{cursor:pointer}
.tbl tr[data-worker]:hover td,.tbl tr[data-user]:hover td{background:var(--raise)}
.tbl td.wrap{white-space:normal;max-width:380px}
.tbl td.nw{white-space:nowrap}
.tbl.wide td:first-child{min-width:210px}
td small,.dl small{display:block;color:var(--muted);font-size:13px}
td.red{color:var(--red);font-weight:600}
td.amber{color:var(--amber);font-weight:600}
td.acc{white-space:nowrap}
td.acc .mono{font-size:14px}

/* статусы: точка + текст */
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:5px;font-size:13px;font-weight:600;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-on{background:var(--green-soft);color:var(--green)}
.st-wip{background:var(--amber-soft);color:var(--amber)}
.st-off{background:var(--sunk);color:var(--muted)}
.pill{display:inline-block;padding:1px 8px;border-radius:5px;background:var(--sunk);font-size:12px;color:var(--muted);font-weight:600}
.tag{font-size:12px;padding:1px 8px;border-radius:5px;font-weight:600}
.tag.red{background:var(--red-soft);color:var(--red)}
.tag.amber{background:var(--amber-soft);color:var(--amber)}

/* ---------- сроки ---------- */
.summary-line{margin:10px 0 0;font-size:16px}
.summary-line b.r{color:var(--red)} .summary-line b.a{color:var(--amber)}
.grp{margin-top:26px}
.grp h2{margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.grp h2 span{font:400 14px/1 var(--font-num);color:var(--muted)}
.rows{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dl{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(120px,1fr) minmax(100px,1.2fr) 150px;align-items:center;gap:18px;width:100%;
  padding:12px 18px;background:var(--panel);border:0;border-bottom:1px solid var(--line);border-left:4px solid var(--c);text-align:left;cursor:pointer;color:var(--ink)}
.dl:last-child{border-bottom:0}
.dl:hover{background:var(--cs)}
.dl.red{--c:var(--red);--cs:var(--red-soft)}
.dl.amber{--c:var(--amber);--cs:var(--amber-soft)}
.dl.green{--c:var(--green);--cs:var(--green-soft)}
.dl-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.dl-bar i{display:block;height:100%;background:var(--c)}
.dl-left{font-weight:600;color:var(--c);text-align:right}

/* ---------- часы ---------- */
.hbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 12px}
.hbar b{font-weight:600}
.hcell{white-space:nowrap}
.hrs{width:92px;text-align:right;font-family:var(--font-num)}
.inv{width:96px}
.okbox{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;cursor:pointer}
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sum>div{background:var(--panel);padding:14px 16px}
.sum .k{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}
.sum b{font:500 26px/1.1 var(--font-head)}
.miss,.allok{padding:10px 14px;border-radius:var(--r-sm);margin:12px 0 0;font-size:14px}
.miss{background:var(--red-soft);color:var(--red)}
.allok{background:var(--green-soft);color:var(--green)}
.daysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.day{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.day.we span{color:var(--red)}
.day input{width:100%;text-align:right;font-family:var(--font-num)}
.daysum{font-size:16px;margin:14px 0 0}

/* ---------- клиенты, квартира, фирмы ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.card dt{color:var(--muted);font-size:13px}
.card dd{margin:2px 0 0;font:500 30px/1 var(--font-head)}
.beds{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.bed{width:34px;height:20px;border-radius:4px;border:2px solid var(--accent)}
.bed.full{background:var(--accent)}
.bed.over{background:var(--red);border-color:var(--red)}
.occ{list-style:none;padding:0;margin:8px 0 0}
.occ li{border-top:1px solid var(--line)}
.occ button{background:none;border:0;padding:8px 0;width:100%;text-align:left;cursor:pointer;color:var(--ink)}
.occ button:hover{color:var(--accent)}

/* ---------- окна ---------- */
dialog{border:1px solid var(--line-2);border-radius:12px;padding:0;width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 32px);
  background:var(--panel);color:var(--ink);overflow:auto;box-shadow:var(--pop)}
dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
dialog[open]{animation:pop .12s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
dialog form,dialog .pad{padding:22px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.dlg-head h2{font-size:19px}
.x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 9px;border-radius:6px}
.x:hover{background:var(--raise);color:var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.grid label input,.grid label select,.grid label textarea{font-size:15px}
.grid .wide{grid-column:1/-1}
.grid .check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:15px}
.grid label input[readonly]{background:transparent;border-style:dashed;color:var(--muted);cursor:not-allowed}
.fhint{font-size:12px;color:var(--muted)}
.sect{grid-column:1/-1;margin:10px 0 0;font-weight:600;font-size:14px;border-top:1px solid var(--line);padding-top:14px}
.dlg-foot{display:flex;gap:8px;align-items:center;margin-top:20px;flex-wrap:wrap}
#cdlg{width:min(480px,calc(100vw - 24px))}
#cdlg .cmsg p{margin:0 0 10px;font-size:16px;line-height:1.45}
#cdlg input{width:100%}
.files{list-style:none;padding:0;margin:8px 0 0}
.files li{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.files li a{flex:1;min-width:120px;color:var(--accent);cursor:pointer;text-decoration:underline;word-break:break-all}
.locked{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-sm);color:var(--muted);font-size:14px;margin-top:8px}
.locked svg{width:16px;height:16px;flex:none}
.docrow{display:grid;grid-template-columns:1.1fr 1.2fr 1fr 1fr 1.2fr auto;gap:8px;align-items:end;padding:10px 0;border-top:1px solid var(--line);position:relative}
.docrow label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);min-width:0}
.docrow input,.docrow select{font-size:14px;width:100%}
.docrow.old{opacity:.6}
.oldtag{position:absolute;right:44px;top:2px;font-size:11px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:6px 0 12px}
.facts dt{color:var(--muted);font-size:13px}.facts dd{margin:0}
.notes{background:var(--sunk);padding:10px 12px;border-radius:var(--r-sm);margin:0 0 12px}

/* ---------- особые права: как выдача ролей в Discord ---------- */
.permbox{grid-column:1/-1;position:relative}
.rolebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;background:var(--sunk);border:1px solid var(--line-2);border-radius:8px;min-height:46px}
.rchip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 6px;border-radius:5px;background:var(--raise);border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.rdot{width:12px;height:12px;border-radius:50%;background:var(--rc);flex:none;display:inline-block}
button.rdot{border:0;padding:0;cursor:pointer;position:relative}
button.rdot:hover,button.rdot:focus-visible{background:var(--line-2)}
button.rdot:hover::after,button.rdot:focus-visible::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;line-height:1;color:var(--ink);font-weight:700}
.radd{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:var(--raise);color:var(--muted);font-size:18px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0}
.radd:hover,.radd[aria-expanded="true"]{color:var(--ink);border-color:var(--faint)}
.rnone{font-size:13px;color:var(--muted);padding:0 4px}
.rpop{position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:min(380px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:var(--pop);padding:6px}
.ropt{display:grid;grid-template-columns:12px minmax(0,1fr) 20px;gap:10px;align-items:center;width:100%;padding:8px 10px;border-radius:5px;
  background:none;border:0;text-align:left;color:var(--ink);cursor:pointer;font-weight:600;font-size:14px}
.ropt:hover,.ropt:focus-visible{background:var(--raise)}
.ropt small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:1px}
.rbox{width:20px;height:20px;border-radius:5px;border:2px solid var(--line-2);display:grid;place-items:center}
.ropt[aria-checked="true"] .rbox{background:var(--accent);border-color:var(--accent)}
.ropt[aria-checked="true"] .rbox::after{content:"";width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.permbox.is-owner .rolebar>*{display:none}
.permbox.is-owner .rolebar::before{content:"У владельца есть все права";font-size:13px;color:var(--muted);padding:0 4px}
.permbox.is-owner .rpop{display:none}
.rchips{display:flex;flex-wrap:wrap;gap:4px}

/* ---------- журнал ---------- */
.jtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.jtools #jq{flex:1 1 260px}
.jcats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.jcat{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:5px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.jcat i{width:8px;height:8px;border-radius:50%;background:var(--cc)}
.jcat:hover{color:var(--ink)}
.jcat[aria-pressed="true"]{color:var(--ink);background:var(--raise);border-color:var(--cc)}
.jday{margin:0 0 22px}
.jday h2{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.jday h2 b{color:var(--ink);font-weight:600}
.jlist{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.jrow{display:grid;grid-template-columns:52px 30px minmax(0,1fr);gap:12px;align-items:start;padding:10px 14px;border-top:1px solid var(--line)}
.jrow:first-child{border-top:0}
.jrow time{font:13px/30px var(--font-num);color:var(--muted)}
.jic{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--cc) 15%,transparent);color:var(--cc)}
.jic svg{width:16px;height:16px}
.jtxt{min-width:0;padding-top:4px;line-height:1.4}
.jtxt b{font-weight:600}
.jtxt small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere;margin-top:2px}
.jx{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;background:var(--sunk);color:var(--muted);font:12px/1.6 var(--font-num)}
.c-login{--cc:var(--muted)}.c-fail{--cc:var(--red)}.c-view{--cc:var(--faint)}.c-data{--cc:var(--accent)}
.c-money{--cc:var(--amber)}.c-access{--cc:var(--violet)}.c-files{--cc:var(--green)}

/* ---------- календарь и задачи ---------- */
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 16px;overflow-x:auto}
.tabs2 button{background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:600}
.tabs2 button:hover{color:var(--ink)}
.tabs2 button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs2 .badge{margin-left:6px}
.calbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.calbar .grp{display:flex;gap:6px;margin:0}
.ctitle{font:500 21px/1.1 var(--font-head);min-width:11ch}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;background:var(--sunk);padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;cursor:pointer;border-radius:5px;color:var(--muted);font-weight:600}
.seg button.on{background:var(--raise);color:var(--ink);box-shadow:0 1px 0 var(--key-edge)}
.people{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;align-items:center}
.pchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--panel);border-radius:5px;padding:4px 10px;cursor:pointer;font-size:14px;font-weight:600}
.pchip i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.pchip.off{color:var(--muted);text-decoration:line-through}
.pchip.off i{background:var(--line-2)}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(110px,auto);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line);gap:1px}
.mh{background:var(--sunk);padding:8px;text-align:center;font-size:13px;color:var(--muted);font-weight:600}
.mh.we{color:var(--red)}
.mcell{background:var(--panel);padding:4px 5px 6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.mcell:hover{background:var(--raise)}
.mcell.other{background:var(--sunk)}
.mcell.other .mnum{color:var(--faint)}
.mcell.we{background:color-mix(in srgb,var(--panel) var(--we-mix,93%),var(--red))}
.mcell.we.other{background:color-mix(in srgb,var(--sunk) var(--we-mix,93%),var(--red))}
:root[data-theme="light"]{--we-mix:97%}
.mnum{align-self:flex-start;border:0;background:none;cursor:pointer;width:26px;height:26px;border-radius:50%;font:500 13px/1 var(--font-num);color:var(--ink)}
.mnum:hover{background:var(--accent-soft)}
.mcell.today .mnum{background:var(--accent);color:var(--accent-ink)}
.chips{display:flex;flex-direction:column;gap:3px;min-width:0}
/* записи в днях: текст виден полностью, переносится на новые строки */
.chip{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--c,var(--accent));border-radius:4px;padding:3px 6px;font-size:13px;line-height:1.3;cursor:pointer;
  background:color-mix(in srgb,var(--c,var(--accent)) 15%,var(--panel));color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.chip:hover{background:color-mix(in srgb,var(--c,var(--accent)) 26%,var(--panel))}
.chip i{font-style:normal;font-weight:600;font-family:var(--font-num);opacity:.85}
.chip.task{border-left-width:4px;border-left-style:double}
.chip.soon{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,var(--panel))}
.chip.urgent,.chip.late{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 15%,var(--panel));color:var(--red)}
.chip.done{opacity:.55;text-decoration:line-through}
.chip.masked{opacity:.75;font-style:italic}
.more{border:0;background:none;color:var(--accent);cursor:pointer;font-size:12px;text-align:left;padding:1px 6px;font-weight:600}
.dots{display:none;gap:3px;flex-wrap:wrap}
.dots i{width:7px;height:7px;border-radius:50%}
.wkwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.wk{min-width:780px}
.wkhead,.wkallrow,.wkgrid{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr))}
.wkhead{border-bottom:1px solid var(--line);background:var(--sunk)}
.wkh{padding:8px 4px;text-align:center;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:13px}
.wkh b{font:500 17px/1 var(--font-num);color:var(--ink);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.wkh.today b{background:var(--accent);color:var(--accent-ink)}
.gut{font:11px/1.2 var(--font-num);color:var(--muted);text-align:right;padding:4px 6px 0 0}
.wkallrow{border-bottom:1px solid var(--line);min-height:30px}
.wka{border-left:1px solid var(--line);padding:3px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.wka:hover{background:var(--raise)}
.wkbody{max-height:calc(100vh - 360px);min-height:380px;overflow-y:auto;position:relative}
.hr{border-top:1px solid var(--line);position:relative}
.hr span{position:absolute;top:-8px;right:6px;font:11px/1 var(--font-num);color:var(--muted);background:var(--panel);padding:0 2px}
.wkcol{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:100% 48px;cursor:pointer}
.wkcol.today{background-color:color-mix(in srgb,var(--accent-soft) 45%,var(--panel))}
.blk{position:absolute;white-space:normal;padding:3px 6px;height:auto;overflow:hidden}
.blk small{display:block;opacity:.75}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:3;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:12px 0 0}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg.ev{background:var(--accent)}.lg.tk{background:var(--accent);outline:2px double var(--panel);outline-offset:-3px}
.lg.sn{background:var(--amber)}.lg.ur{background:var(--red)}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;align-items:start}
.tcol{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:140px}
.tcol h3{margin:2px 4px 4px;font-size:14px;display:flex;justify-content:space-between;color:var(--muted)}
.tcol h3 span{font-family:var(--font-num);font-weight:400}
.tcard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.tcard:hover{border-color:var(--line-2);border-left-color:var(--accent)}
.tcard.soon,.tcard.soon:hover{border-left-color:var(--amber)}
.tcard.urgent,.tcard.urgent:hover,.tcard.late,.tcard.late:hover{border-left-color:var(--red)}
.tcard.done{opacity:.6}.tcard.done b{text-decoration:line-through}
.tcard .tn{margin:0;font-size:14px}
.ttop{display:flex;gap:6px}
.ttop:empty{display:none}
.newdot{font-size:12px;padding:1px 8px;border-radius:5px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.tmeta{display:flex;justify-content:space-between;gap:8px;font-size:13px;flex-wrap:wrap}
.tmeta .hot{color:var(--amber);font-weight:600}
.tact{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stseg{margin:4px 0 8px}
.daylist{display:flex;flex-direction:column;gap:5px;margin:4px 0 6px}
.daylist .chip{font-size:15px;padding:7px 10px}

/* ---------- вход ---------- */
.login{max-width:400px;margin:12vh auto 40px;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.login h1{margin-bottom:18px}
.login label{display:flex;flex-direction:column;gap:5px;margin-top:12px;color:var(--muted);font-size:14px}
.login label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.login input{font-size:16px}
.steps{margin:10px 0 0;padding-left:20px;color:var(--ink);font-size:15px;line-height:1.45}
.steps li{margin:6px 0}
#setupQr{display:block;margin:12px auto;background:#fff;padding:6px;border-radius:8px;width:220px;height:220px;image-rendering:pixelated}
.keybox{display:inline-block;margin-top:6px;padding:6px 10px;background:var(--sunk);border:1px solid var(--line);border-radius:6px;color:var(--ink);
  font-family:var(--font-num);font-size:15px;word-spacing:.2em}

/* ---------- подсказка-всплывашка ---------- */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:8px;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40;max-width:calc(100vw - 32px);font-weight:500}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- телефон ---------- */
.tabbar{display:none}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:0 14px 104px}
  .top{margin:0 -14px 18px;padding:8px 14px}
  .mbrand{display:block}
  .uname,.caret{display:none}
  .userbtn{padding:2px}
  h1{font-size:24px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--panel);border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;overflow-x:auto}
  .tabbar .navbtn{width:auto;flex:1 0 auto;min-width:76px;flex-direction:column;justify-content:center;text-align:center;font-size:12px;padding:8px 4px;gap:3px;line-height:1.2}
  .tabbar .navbtn.on::before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:3px}
  #toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .dl{grid-template-columns:1fr auto;gap:6px 12px}
  .dl-bar{grid-column:1/-1;order:3}
  .dl-doc{text-align:right}
  .dl-left{grid-column:1/-1;text-align:left;order:4}
  .grid{grid-template-columns:1fr}
  .board{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .docrow{grid-template-columns:1fr 1fr}.docrow .x{grid-column:2;justify-self:end}
  .jrow{grid-template-columns:44px 28px minmax(0,1fr);gap:8px;padding:10px}
}
@media (max-width:700px){
  .mcell{min-height:64px;padding:3px}
  .mgrid{grid-auto-rows:minmax(64px,auto)}
  .mcell .chips{display:none}.mcell .dots{display:flex}
  .mnum{width:24px;height:24px}
  .ctitle{font-size:18px;min-width:0;flex:1 1 100%;order:3}
  .facts{grid-template-columns:1fr}
  .tabs2 button{padding:10px 9px}
}

/* ---------- удобство ---------- */
@media (pointer:coarse){
  .btn,.seg button,.tabs2 button,.more,.occ button,.pchip,.jcat{min-height:44px}
  .btn.sm{min-height:36px}
  .x{min-width:44px;min-height:44px}
  .navbtn{min-height:44px}
  .sw{width:32px;height:32px}
}
@media (prefers-contrast:more){
  :root{--line:var(--line-2)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:hover,.btn:active,.btn.sm:active{transform:none}
}