:root{
  --ground:#eceae6; --surface:#fff; --surface-2:#f6f5f2; --sunken:#e4e1db;
  --ink:#191b1d; --ink-2:#4d5257; --muted:#82878c;
  --edge:#d9d6d0; --hair:#e8e5df;
  --action:#1857c4; --action-ink:#fff;
  --ok:#0a7d34; --ok-bg:#e6f4ea;
  --miss:#c0322f; --miss-bg:#fbeaea;
  --late:#a86412; --late-bg:#fbf1e2;
  --off:#82878c; --off-bg:#eeece8;
  --paper:#fff; --shadow:0 1px 2px rgba(25,27,29,.07),0 8px 24px rgba(25,27,29,.07);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#141516; --surface:#1e2022; --surface-2:#26282b; --sunken:#0e0f10;
  --ink:#f0efec; --ink-2:#b6babd; --muted:#82878c;
  --edge:#33363a; --hair:#2a2d30;
  --action:#4f8bf0; --action-ink:#0e0f10;
  --ok:#3fbf63; --ok-bg:#16301f;
  --miss:#e87673; --miss-bg:#331a1a;
  --late:#d69a45; --late-bg:#302516;
  --off:#82878c; --off-bg:#26282b;
  --paper:#1e2022; --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
/* Шрифты системные: страница должна открываться на объекте без сети и ничего не тянуть со стороны. */
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; cursor:pointer; color:inherit}
input,select,textarea{font:inherit; color:var(--ink)}

/* ================= вход ================= */
.login{min-height:100%; display:flex; align-items:center; justify-content:center; padding:20px}
.lbox{background:var(--surface); border:1px solid var(--edge); border-radius:16px; box-shadow:var(--shadow);
  padding:26px 22px 20px; width:min(380px,100%); display:grid; gap:12px}
.lbox h1{margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em}
.lsub{margin:-8px 0 4px; color:var(--muted); font-size:13.5px}
.lbox label,.field{display:grid; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.lbox input,.field input,.field select{font-size:16px; padding:11px 12px; border:1px solid var(--edge);
  border-radius:10px; background:var(--surface-2); width:100%; min-width:0}
.lbox input:focus,.field input:focus,.field select:focus{outline:2px solid var(--action); outline-offset:-1px; background:var(--surface)}
.lerr{margin:0; color:var(--miss); background:var(--miss-bg); border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600}
.lmsg{margin:0; color:var(--late); background:var(--late-bg); border-radius:9px; padding:9px 12px; font-size:13px}
.lbox .bigbtn{margin-top:4px}

/* ================= каркас ================= */
.shell{min-height:100%; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 22px; border-bottom:1px solid var(--edge); background:var(--surface)}
.brand{font-weight:800; letter-spacing:-.02em; font-size:16px}
.brand span{color:var(--muted); font-weight:500}
.ctx{font-size:13px; color:var(--ink-2); display:flex; gap:6px 16px; flex-wrap:wrap}
.ctx b{font-weight:600}

.stage{flex:1; display:grid; grid-template-columns:minmax(360px,400px) minmax(0,1fr); gap:26px;
  padding:26px 22px 34px; align-items:start; max-width:1400px; margin:0 auto; width:100%}
.stage>*{min-width:0}

/* ================= приложение ================= */
.phone{background:var(--surface); border:1px solid var(--edge); border-radius:22px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  height:min(84vh,780px); position:sticky; top:22px}
.app{flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--surface)}
.app-head{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--hair)}
.headmain{flex:1; min-width:0; background:none; border:0; padding:2px 0; text-align:left}
.app-head .obj{display:block; font-weight:700; font-size:15px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-head .obj.unset{color:var(--action)}
.app-head .date{display:block; font-size:12.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* статус синхронизации виден всегда */
.sync{flex:none; border:0; border-radius:999px; padding:6px 11px; font-size:12px; font-weight:700; line-height:1.2;
  background:var(--ok-bg); color:var(--ok); text-align:center; max-width:52%}
.sync.pending{background:var(--late-bg); color:var(--late)}
.sync.busy{opacity:.7}
.sync small{display:block; font-weight:600; font-size:10.5px; opacity:.85}

.screen{flex:1; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.tabs{display:flex; border-top:1px solid var(--hair); background:var(--surface)}
.tab{flex:1; background:none; border:0; padding:10px 4px 12px; color:var(--muted);
  font-size:11.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px}
.tab .ic{font-size:17px; line-height:1}
.tab[aria-selected="true"]{color:var(--action)}
.tab:focus-visible{outline:2px solid var(--action); outline-offset:-3px}

/* --- дата смены --- */
.datenav{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--hair)}
.datenav button{width:38px; height:38px; flex:none; border-radius:10px; border:1px solid var(--edge); background:var(--surface);
  font-size:20px; font-weight:700; line-height:1}
.datenav button:disabled{opacity:.35; cursor:default}
.dlabel{flex:1; position:relative; text-align:center; font-weight:700; font-size:14.5px; padding:8px 6px;
  border-radius:10px; background:var(--surface-2)}
.dlabel small{display:block; font-weight:500; font-size:12px; color:var(--muted)}
.dlabel input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.backnote{padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--late); background:var(--late-bg); display:flex; gap:10px; align-items:center}
.backnote button{margin-left:auto; border:0; background:none; color:var(--action); font-weight:700; font-size:12.5px; padding:2px 0; white-space:nowrap}

/* --- список бригады --- */
.crew{display:flex; flex-direction:column}
.person{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
  padding:11px 14px; border:0; border-bottom:1px solid var(--hair); background:none;
  width:100%; text-align:left; color:var(--ink)}
.person:active{background:var(--surface-2)}
.person .nm{display:block; font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.person .rl{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.person .warn{display:block; font-size:11.5px; color:var(--late); font-weight:600; margin-top:3px}
.person .note{display:block; font-size:11.5px; color:var(--ink-2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw}
.chip{font-size:12px; font-weight:700; padding:4px 9px; border-radius:7px; white-space:nowrap}
.c-none{background:var(--sunken); color:var(--muted)}
.c-ok{background:var(--ok-bg); color:var(--ok)}
.c-late{background:var(--late-bg); color:var(--late)}
.c-miss{background:var(--miss-bg); color:var(--miss)}
.c-off{background:var(--off-bg); color:var(--off)}
.more{color:var(--muted); font-size:19px; line-height:1; padding:4px 2px 4px 6px}
.empty{font-size:13px; color:var(--muted); padding:2px 0 4px}
.emptybig{padding:26px 18px 8px; text-align:center; color:var(--ink-2); font-size:14px}
.emptybig b{display:block; font-size:16px; color:var(--ink); margin-bottom:4px}
.addrow{padding:12px 14px}
.addbtn{width:100%; border:1px dashed var(--edge); background:var(--surface-2); color:var(--action);
  border-radius:11px; padding:13px; font-size:14.5px; font-weight:700}
.shiftnote{padding:0 14px 14px}
.shiftnote label,.notefield label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:5px}
.shiftnote textarea,.notefield textarea{width:100%; resize:vertical; min-height:60px; padding:10px 12px; font-size:16px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:10px}
.shiftnote textarea:focus,.notefield textarea:focus{outline:0; border-color:var(--action); background:var(--surface)}

.sumbar{padding:12px 14px; background:var(--surface-2); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:12.5px}
.sumbar b{font-size:16px; font-weight:700; display:block; letter-spacing:-.01em}
.sumbar span{color:var(--muted)}
.sumbar .wide{grid-column:1/-1}
.sumbar .wide b{font-size:13.5px; font-weight:600}

/* --- фильтры по статусу и выбор списком --- */
.fbar{display:flex; gap:6px; padding:9px 12px; overflow-x:auto; border-bottom:1px solid var(--hair); scrollbar-width:none}
.fbar::-webkit-scrollbar{display:none}
.fchip{flex:none; border:1px solid var(--edge); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; white-space:nowrap}
.fchip b{font-weight:700; margin-left:5px; color:var(--muted)}
.fchip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.fchip[aria-pressed="true"] b{color:inherit; opacity:.7}
.selbar{display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--hair)}
.selbar .lnk{border:0; background:none; color:var(--action); font-weight:700; font-size:13px; padding:4px 0}
.selbar .lnk:last-child{margin-left:auto}
.person .box{width:22px; height:22px; border-radius:6px; border:2px solid var(--edge);
  display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--action-ink)}
.person[aria-pressed="true"]{background:var(--surface-2)}
.person[aria-pressed="true"] .box{background:var(--action); border-color:var(--action)}
.massbar{position:sticky; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--edge);
  box-shadow:0 -4px 16px rgba(0,0,0,.08); padding:10px 12px 12px; display:grid; gap:8px}
.massbar .mhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; font-weight:700}
.massbar .mhead small{font-weight:500; color:var(--muted); font-size:12px}
.mtimes{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mtimes .timer{margin:0; padding:5px 8px; font-size:12.5px}
.mbtns{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mbtns button{border:0; border-radius:9px; padding:11px 4px; font-size:13px; font-weight:700}
.mbtns button:disabled{opacity:.45; cursor:default}
.mbtns .m-ok{background:var(--action); color:var(--action-ink)}
.mbtns .m-miss{background:var(--miss-bg); color:var(--miss)}
.mbtns .m-off{background:var(--sunken); color:var(--ink)}

.subtabs{display:flex; gap:2px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--hair)}
.stab{flex:1; border:0; background:none; border-radius:8px; padding:7px 6px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.stab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stab i{font-style:normal; margin-left:5px; font-size:11px; font-weight:700; color:var(--action)}

/* --- период --- */
.perbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--hair)}
.totals .perbar,.docpane .perbar{padding:0 0 12px; border-bottom:0}
.perbar .mon{display:flex; align-items:center; gap:4px; font-weight:700; font-size:13.5px}
.perbar .mon button{width:30px; height:30px; border-radius:8px; border:1px solid var(--edge); background:var(--surface); font-size:16px; font-weight:700; line-height:1}
.perbar .mon span{min-width:104px; text-align:center}
.seg{display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:9px; margin-left:auto}
.seg button{border:0; background:none; border-radius:7px; padding:5px 9px; font-size:12px; font-weight:600; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink)}

/* --- сетка табеля в приложении --- */
.gridwrap{overflow:auto; max-width:100%}
table.grid{border-collapse:collapse; font-size:11.5px; width:100%}
table.grid th,table.grid td{border:1px solid var(--hair); padding:5px 4px; text-align:center; white-space:nowrap; min-width:27px}
table.grid th.nm,table.grid td.nm{text-align:left; position:sticky; left:0; background:var(--surface); z-index:1; max-width:112px; overflow:hidden; text-overflow:ellipsis}
table.grid thead th{background:var(--surface-2); font-weight:600; color:var(--ink-2)}
table.grid th.we{color:var(--miss)}
table.grid td.tap{cursor:pointer}
table.grid td.out{background:var(--surface-2); color:var(--edge)}
table.grid td.today{box-shadow:inset 0 0 0 2px var(--action)}
td.m{font-weight:700}
td.m-Я{color:var(--ok)} td.m-НН{color:var(--miss)} td.m-В{color:var(--off)}
.late-mark{color:var(--late); font-weight:700}

/* --- итог --- */
.totals{padding:14px}
.tot{display:grid; grid-template-columns:1fr auto; gap:8px 12px; font-size:13.5px; margin:0; padding:9px 0; border-bottom:1px solid var(--hair)}
.tot dt{color:var(--ink-2)} .tot dd{margin:0; font-weight:700}
.bigbtn{width:100%; margin-top:16px; padding:14px; border:0; border-radius:11px;
  background:var(--action); color:var(--action-ink); font-size:15px; font-weight:700}
.bigbtn:hover{filter:brightness(1.08)}
.bigbtn:disabled{opacity:.6}
.bigbtn.sec{margin-top:8px; background:var(--sunken); color:var(--ink)}
.bigbtn.danger{background:var(--miss-bg); color:var(--miss)}
.bigbtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.hint{font-size:12px; color:var(--muted); margin:9px 12px 0; text-align:center}
.jhead{margin:26px 0 8px; font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:2px}
.jhead small{font-weight:400; font-size:11.5px; color:var(--muted)}
.journal{list-style:none; margin:0; padding:0}
.journal li{display:grid; grid-template-columns:auto 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--hair); font-size:12.5px}
.journal time{color:var(--muted); font-weight:600; font-size:11.5px; line-height:1.35}
.journal b{font-weight:600} .journal span{color:var(--ink-2)}
.journal .flag{display:inline-block; font-size:10.5px; font-weight:700; color:var(--late);
  border:1px solid var(--late); border-radius:4px; padding:0 5px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em}

/* --- карточка работника и формы --- */
.veil{position:fixed; inset:0; background:rgba(15,16,17,.45); display:flex; align-items:flex-end; justify-content:center; z-index:40}
.sheet{background:var(--surface); width:min(460px,100%); border-radius:16px 16px 0 0; box-shadow:var(--shadow);
  height:92vh; height:92dvh; display:flex; flex-direction:column; padding:0; margin:0}
.fsheet{height:auto; max-height:92vh; max-height:92dvh}
.sh-head{display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px}
.sh-head h3{margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em}
.sheet .who{font-size:12.5px; color:var(--muted); margin-top:2px}
.sh-x{border:0; background:var(--sunken); color:var(--ink-2); width:32px; height:32px; border-radius:8px;
  font-size:14px; line-height:1; margin-left:auto; flex:none}
.sh-tabs{display:flex; gap:2px; margin:0 16px; background:var(--sunken); padding:3px; border-radius:9px}
.sh-tab{flex:1; border:0; background:none; border-radius:7px; padding:7px 4px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.sh-tab[aria-selected="true"]{background:var(--surface); color:var(--ink)}
.sh-body{overflow-y:auto; padding:14px 16px 4px; flex:1; min-height:0}
.fsheet .sh-body{display:grid; gap:12px; padding-top:2px}
.sheet .close{margin:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); padding:12px; border:0; border-radius:10px;
  background:var(--sunken); color:var(--ink); font-weight:600}
.fgo{margin:12px 16px calc(16px + env(safe-area-inset-bottom,0px)); width:auto}
.ferr{margin:10px 16px 0}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fnote{font-size:12.5px; color:var(--muted); margin:0}
.cdate{font-size:12.5px; font-weight:700; color:var(--ink-2); margin:0 2px 9px}
.cdate.back{color:var(--late)}
.restwarn{font-size:12.5px; font-weight:600; color:var(--late); background:var(--late-bg); border-radius:9px; padding:9px 12px; margin-bottom:9px}
.opt{display:flex; align-items:center; gap:11px; width:100%; padding:12px 13px; margin-bottom:7px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:10px; text-align:left; color:var(--ink); font-size:14px; font-weight:600}
.opt:hover{border-color:var(--action)}
.opt.on{border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action)}
.opt i{width:9px; height:9px; border-radius:50%; flex:none}
.opt small{margin-left:auto; font-weight:500; color:var(--muted); font-size:12px}
.timer{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:10px; margin-bottom:7px; font-size:14px}
.timer .st2{display:flex; gap:8px; align-items:center}
.timer .st2 button{width:36px; height:36px; border-radius:8px; border:1px solid var(--edge);
  background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; line-height:1}
.hrs{font-size:12.5px; color:var(--ink-2); margin:0 2px 9px}
.hrs b{color:var(--ink)}
.notefield{margin:2px 0 9px}

.issueform{display:grid; gap:8px}
.issueform select,.issueform input{font-size:16px; background:var(--surface-2);
  border:1px solid var(--hair); border-radius:9px; padding:10px 11px; width:100%; min-width:0}
.issueform select:focus,.issueform input:focus{outline:2px solid var(--action); outline-offset:-1px}
.qty{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:9px; padding:7px 11px}
.qty button{width:36px; height:36px; border-radius:8px; border:1px solid var(--edge);
  background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; line-height:1}
.qty b{font-size:15px}
.issuebtn{border:0; border-radius:9px; padding:12px; font-size:14px; font-weight:700;
  background:var(--action); color:var(--action-ink)}
.issuebtn.sec{background:var(--sunken); color:var(--ink)}
.ilist{display:grid; margin-top:12px}
.irow{display:grid; grid-template-columns:1fr auto auto; gap:9px; align-items:center; font-size:13px;
  padding:9px 0; border-top:1px solid var(--hair)}
.irow .nm{font-weight:600}
.irow .sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.irow .sum{font-weight:700; white-space:nowrap}
.irow .ret{border:1px solid var(--edge); background:var(--surface); color:var(--ink-2);
  border-radius:7px; padding:6px 10px; font-size:12px; font-weight:600}
.irow.back .sum,.irow.back .nm{color:var(--muted); text-decoration:line-through}
.owed{margin-top:12px; padding:10px 12px; background:var(--late-bg); border-radius:9px;
  font-size:12.5px; color:var(--late); font-weight:600}
.sech{margin:18px 0 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.sech:first-child{margin-top:0}
.wrow{display:grid; grid-template-columns:1fr auto; gap:7px 12px; font-size:13.5px; margin:0; padding:10px 0; border-bottom:1px solid var(--hair)}
.wrow dt{color:var(--ink-2)} .wrow dd{margin:0; font-weight:700; text-align:right}
.wrow dd.warnv{color:var(--late)}
.wbtns{display:grid; gap:7px; margin-top:13px}
.wbtn{border:0; border-radius:10px; padding:12px; font-size:14px; font-weight:700;
  background:var(--action); color:var(--action-ink)}
.wbtn.sec{background:var(--sunken); color:var(--ink)}
.wbtn.done{background:var(--ok-bg); color:var(--ok)}

/* --- подтверждение действия --- */
.confirm{position:fixed; inset:0; z-index:60; background:rgba(15,16,17,.5);
  display:flex; align-items:center; justify-content:center; padding:20px}
.cbox{background:var(--surface); border-radius:14px; padding:20px; width:min(380px,100%); box-shadow:var(--shadow)}
.cbox h4{margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.01em}
.cbox p{margin:0 0 16px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.cbtns{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.cbtns button{border:0; border-radius:9px; padding:12px; font-size:14px; font-weight:700}
.cno{background:var(--sunken); color:var(--ink)}
.cyes{background:var(--action); color:var(--action-ink)}
.cbtns button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ================= документы ================= */
.docpane{min-width:0; background:var(--paper); border:1px solid var(--edge); border-radius:12px; box-shadow:var(--shadow); padding:22px}
.docsw{display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:9px; width:max-content; max-width:100%; margin-bottom:14px; flex-wrap:wrap}
.dtab{border:0; background:none; padding:6px 13px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink-2)}
.dtab[aria-selected="true"]{background:var(--surface); color:var(--ink)}
.dprint{border:0; background:var(--action); color:var(--action-ink); padding:6px 13px; border-radius:7px; font-size:13px; font-weight:700; margin-left:8px}
.docpane .phead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.docpane h2{margin:0; font-size:15px; font-weight:700}
.docpane .sub{font-size:12.5px; color:var(--muted)}
.docpane .dochead{color:var(--ink-2); margin-top:5px}
.t13wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
table.t13{border-collapse:collapse; font-size:10.5px; width:100%; min-width:940px}
table.t13 th,table.t13 td{border:1px solid var(--ink-2); padding:2px 3px; text-align:center; vertical-align:middle}
table.t13 thead th{background:var(--surface-2); font-weight:600; font-size:9.5px; line-height:1.2}
table.t13 td.l{text-align:left; max-width:190px}
/* у каждого работника две строки, как в форме: сверху код, снизу часы */
table.t13 td.cd{font-weight:700; height:18px}
table.t13 tr.rh td{color:var(--ink-2); height:18px; border-top-style:dotted}
table.t13 tr.rc td.cd{border-bottom-style:dotted}
table.t13 th.we{background:var(--sunken)}
table.t13 tfoot td{font-weight:700; background:var(--surface-2)}
table.ppedoc{min-width:760px}
table.ppedoc td{height:24px; padding:3px 5px}
table.ppedoc td.it{text-align:left}
table.ppedoc td.sgn{min-width:86px}
table.ppedoc td.r{text-align:right; white-space:nowrap}
.notes{margin-top:16px; padding-top:13px; border-top:1px solid var(--hair)}
.notes h3{margin:0 0 7px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.notes ul{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.notes li{font-size:11.5px; color:var(--ink-2)}
.notes li b{color:var(--ink); font-weight:600}
.sig{display:flex; gap:34px; flex-wrap:wrap; margin-top:18px; font-size:11px; color:var(--ink-2)}
.sig div{flex:1; min-width:190px}
.sig u{display:block; border-bottom:1px solid var(--ink-2); height:17px; text-decoration:none; margin-bottom:3px}
.codes{margin-top:14px; font-size:11px; color:var(--muted); display:flex; gap:6px 18px; flex-wrap:wrap}

/* ================= телефон ================= */
@media (max-width:900px){
  .topbar{display:none}
  .stage{grid-template-columns:minmax(0,1fr); gap:0; padding:0; max-width:none}
  .phone{border:0; border-radius:0; box-shadow:none; height:auto; position:static; min-height:0}
  .app-head{position:sticky; top:0; z-index:20; background:var(--surface); padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .docpane{display:none; border:0; border-radius:0; box-shadow:none; padding:14px; overflow-x:hidden}
  body.tab-doc .docpane{display:block}
  body.tab-doc .screen{display:none}
  /* панель вкладок закреплена у нижнего края */
  .shell{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .tabs{position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding-bottom:env(safe-area-inset-bottom,0px); border-top:1px solid var(--edge);
    box-shadow:0 -2px 14px rgba(0,0,0,.07)}
  .person{padding:14px}
  .person .nm{font-size:15.5px}
  /* страница прокручивается целиком — панель массовой отметки липнет над вкладками */
  .phone,.screen{overflow:visible}
  .massbar{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:901px){ .tab.only-mobile{display:none} .person .note{max-width:210px} }

/* ================= печать: на лист идёт только выбранный документ ================= */
@media print{
  @page{size:A4 landscape; margin:9mm}
  :root{--paper:#fff; --surface:#fff; --surface-2:#f4f4f2; --sunken:#e9e8e5;
    --ink:#111; --ink-2:#333; --muted:#666; --edge:#999; --hair:#ccc;
    --ok:#0a7d34; --miss:#c0322f; --late:#a86412; --off:#666; color-scheme:light}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  body{background:#fff}
  .topbar,.phone,.tabs,.veil,.confirm,.docsw,.perbar,.login{display:none !important}
  .shell{padding:0}
  .stage{display:block; padding:0; max-width:none}
  .docpane{display:block !important; border:0; box-shadow:none; padding:0; border-radius:0}
  .t13wrap{overflow:visible}
  table.t13{min-width:0; font-size:9px; width:100%}
  tr{break-inside:avoid}
}