/* Layout: одна колонка шириной телефона, как окно мини-приложения Telegram; над ней полоса прототипа с переключателем ролей.
   В рабочей версии цвета будут браться из темы Telegram (themeParams), здесь — свои токены. */
:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --surface-2:#F4F6F8; --fg:#121820; --muted:#667280; --line:#DDE2E8;
  --accent:#2A6FDB; --accent-fg:#FFFFFF; --accent-soft:#E2EBFA;
  --ok:#1B8752; --ok-soft:#DFF2E7; --warn:#A86400; --warn-soft:#FBEDD3; --bad:#CF372B; --bad-soft:#FBE2DF;
  --c1:#0B7A70; --c1-soft:#DCF0ED; --c2:#B0501A; --c2-soft:#F7E4D8; --c3:#6247D2; --c3-soft:#E9E4FA; --c4:#7F6210; --c4-soft:#F2EBD4;
  --scrim:rgba(8,12,18,.48); --toast:#18212B; --toast-fg:#F2F5F8;
  --brand-1:#2A6FDB; --brand-2:#123478; --brand-fg:#FFFFFF; --chat-bg:#D6E0EA;
  --f:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1217; --surface:#161D25; --surface-2:#1D2630; --fg:#E6EBF0; --muted:#8B97A5; --line:#27313C;
  --accent:#5592F2; --accent-fg:#FFFFFF; --accent-soft:#1B2B44;
  --ok:#43BC7E; --ok-soft:#132E1F; --warn:#E9A43E; --warn-soft:#352711; --bad:#F2695C; --bad-soft:#3A1B18;
  --c1:#3EC2B3; --c1-soft:#112F2C; --c2:#EF8C55; --c2-soft:#392315; --c3:#A08DFF; --c3-soft:#241E44; --c4:#D8B650; --c4-soft:#322911;
  --scrim:rgba(0,0,0,.6); --toast:#E6EBF0; --toast-fg:#0D1217; --chat-bg:#0A0F14;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0D1217; --surface:#161D25; --surface-2:#1D2630; --fg:#E6EBF0; --muted:#8B97A5; --line:#27313C;
  --accent:#5592F2; --accent-fg:#FFFFFF; --accent-soft:#1B2B44;
  --ok:#43BC7E; --ok-soft:#132E1F; --warn:#E9A43E; --warn-soft:#352711; --bad:#F2695C; --bad-soft:#3A1B18;
  --c1:#3EC2B3; --c1-soft:#112F2C; --c2:#EF8C55; --c2-soft:#392315; --c3:#A08DFF; --c3-soft:#241E44; --c4:#D8B650; --c4-soft:#322911;
  --scrim:rgba(0,0,0,.6); --toast:#E6EBF0; --toast-fg:#0D1217; --chat-bg:#0A0F14;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
/* внутри Telegram прокрутка не «утягивает» окно за край */
html.in-tg,html.in-tg body{overscroll-behavior:none}
body{color:var(--fg);font-family:var(--f);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3,p{margin:0}
h1{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h2.h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:0 4px}
.t1{font-weight:500}
.t2{font-size:13px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* окно мини-приложения */
.app{max-width:480px;margin:0 auto;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.tgbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;height:52px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.tgbar .tg-t{text-align:left;line-height:1.15;min-width:0;overflow:hidden}
.tgbar .tg-t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgbar .tg-t b{display:block;font-size:15px}
.tgbar .tg-t span{font-size:12px;color:var(--muted)}
.tgbar .tg-more{justify-self:end;border:0;background:none;color:var(--accent);font-size:20px;cursor:pointer;width:40px;height:40px;border-radius:50%}
.screen{display:flex;flex-direction:column;gap:14px;padding-block:18px 24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.head{display:flex;flex-direction:column;gap:4px;padding:0 4px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 4px}

/* списки */
.group{background:var(--surface);border-radius:var(--r);overflow:hidden}
.row{display:flex;gap:12px;align-items:center;padding:11px 14px;min-height:54px;width:100%}
.row + .row{border-top:1px solid var(--line)}
.row .main{flex:1;min-width:0}
.row .main .t1,.row .main .t2{overflow:hidden;text-overflow:ellipsis}
button.row{border:0;background:transparent;text-align:left;cursor:pointer}
button.row:active{background:var(--surface-2)}
.row .end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chev{color:var(--muted);font-size:18px}
.daylbl{width:86px;flex-shrink:0;font-size:14px}
.daylbl b{display:block;font-weight:600}
.daylbl.is-today b{color:var(--accent)}

/* код пункта: цвет = город */
.code{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 8px;border-radius:8px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;background:var(--cx-soft);color:var(--cx);flex-shrink:0}
.code.big{min-width:64px;height:44px;font-size:20px;border-radius:12px}
.code.sm{min-width:34px;height:22px;font-size:12px;padding:0 6px;border-radius:6px}
.cx1{--cx:var(--c1);--cx-soft:var(--c1-soft)} .cx2{--cx:var(--c2);--cx-soft:var(--c2-soft)}
.cx3{--cx:var(--c3);--cx-soft:var(--c3-soft)} .cx4{--cx:var(--c4);--cx-soft:var(--c4-soft)}
.codes{display:flex;flex-wrap:wrap;gap:6px}

.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)} .p-acc{background:var(--accent-soft);color:var(--accent)}
.pills{display:flex;flex-wrap:wrap;gap:6px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 18px;border-radius:12px;border:0;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-fg);white-space:nowrap}
.btn:active{filter:brightness(.94)}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.btn.plain{background:var(--surface);color:var(--fg)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.block{width:100%}
.btn.big{height:54px;font-size:17px;border-radius:14px}
.btn:disabled{opacity:.45;cursor:default}
.linkbtn{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;padding:6px 4px;font-size:14px}

/* карточки */
.card{background:var(--surface);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.card-top{display:flex;gap:12px;align-items:center}
.card-top .main{flex:1;min-width:0}
.card .kv{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.card .kv b{color:var(--fg);font-weight:600}
.card .acts{display:flex;gap:8px;justify-content:flex-end}
.todaycard{background:var(--surface);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.todaycard .code{grid-row:span 2}
.todaycard .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;grid-column:1/-1;margin-bottom:6px}
.alert{border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:center;background:var(--warn-soft);color:var(--warn)}
.alert .main{flex:1;min-width:0;color:var(--fg)}
.alert .main b{color:var(--warn)}
.alert.bad{background:var(--bad-soft)} .alert.bad .main b{color:var(--bad)}
.note{font-size:13px;color:var(--muted);padding:0 4px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--surface);border-radius:12px;padding:10px 12px}
.tile b{display:block;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}
.tile span{font-size:12px;color:var(--muted)}
.empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:14px}

/* чипы-фильтры */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;cursor:pointer;color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:transparent}

/* доска плана */
.navrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.navrow .rng{font-weight:600;font-size:14px;text-align:center}
.scroll{overflow-x:auto;background:var(--surface);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table.grid{border-collapse:separate;border-spacing:0;font-size:12px;font-variant-numeric:tabular-nums}
.grid th,.grid td{padding:0;border-bottom:1px solid var(--line)}
.grid thead th{position:sticky;top:0;background:var(--surface);font-weight:500;color:var(--muted);height:42px;min-width:64px;text-align:center;line-height:1.1;z-index:1}
.grid thead th b{display:block;font-size:14px;color:var(--fg);font-weight:600}
.grid thead th.today b,.grid thead th.today{color:var(--accent)}
.grid thead th.we b{color:var(--muted)}
.grid th.rowh{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;padding:0 8px 0 10px;border-right:1px solid var(--line);white-space:nowrap}
.grid thead th.rowh{z-index:3}
.grid tr.cityrow th{height:28px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--surface-2)}
.grid tr.cityrow td{background:var(--surface-2)}
.rowh .rh{display:flex;align-items:center;gap:6px}
.rowh .rh small{color:var(--muted);font-size:11px}
.cell{display:block;width:64px;height:46px;border:0;border-left:1px solid var(--line);background:transparent;font-size:11px;cursor:pointer;color:var(--fg);padding:4px 5px;text-align:left;overflow:hidden;line-height:1.3}
.cell .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .nm i{font-style:normal;color:var(--muted)}
.s-gap{background:var(--bad-soft);color:var(--bad);font-weight:700;text-align:center;font-size:12px}
.s-part{background:var(--warn-soft)}
.s-over{background:var(--bad-soft)}
.s-off{background:repeating-linear-gradient(135deg,var(--surface-2) 0 5px,transparent 5px 10px);color:var(--muted);text-align:center;cursor:default}
.cf{box-shadow:inset 3px 0 0 var(--bad)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);padding:0 4px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px;border:1px solid var(--line)}
.lg-gap{background:var(--bad-soft)} .lg-part{background:var(--warn-soft)} .lg-ok{background:var(--surface)} .lg-cf{background:var(--surface);box-shadow:inset 3px 0 0 var(--bad)}
.lg-off{background:repeating-linear-gradient(135deg,var(--surface-2) 0 3px,var(--surface) 3px 6px)}
/* табель месяца */
.tcell{display:block;width:44px;height:38px;border:0;border-left:1px solid var(--line);background:transparent;font-size:11px;font-weight:600;cursor:pointer;color:var(--fg);padding:0;text-align:center;line-height:1.15}
.tcell sup{color:var(--ok);font-size:9px}
.tcell.t-pend{background:var(--warn-soft)}
.tcell.t-rej{color:var(--bad);text-decoration:line-through}
.tcell.t-fut{background:var(--surface-2);cursor:default}
.tcell:disabled{cursor:default}
.grid.mt thead th{min-width:44px}
.grid td.tot{padding:0 10px;font-weight:700;text-align:right;border-left:1px solid var(--line)}

/* таббар */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar-in{max-width:480px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.tabbar .tab{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 10px;font-size:11px;color:var(--muted);cursor:pointer}
.tabbar .tab svg{width:24px;height:24px}
.tabbar .tab[aria-current="page"]{color:var(--accent);font-weight:600}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:var(--accent-fg);font-size:11px;font-weight:700;line-height:18px;text-align:center}
svg.i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* шторка */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:480px;max-height:92%;border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.sheet-h h2{font-size:18px;font-weight:700}
.sheet-h .x{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.sheet-b{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;padding-block:4px 18px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet-f{background:var(--surface);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;padding-block:10px calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* формы */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.flabel{font-size:13px;color:var(--muted);font-weight:500}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;height:44px;padding:0 12px;width:100%;min-width:0}
textarea{height:70px;padding:10px 12px;resize:vertical}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{background:var(--surface);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:14px}
.seg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.seg-h .t2 b{color:var(--fg)}
.line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:42px;height:40px;border:0;background:transparent;color:var(--accent);font-size:20px;cursor:pointer}
.stepper button:disabled{color:var(--line);cursor:default}
.stepper output{min-width:58px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.seg .stepper{background:var(--surface-2)}
.err{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.info{background:var(--accent-soft);color:var(--fg);border-radius:12px;padding:10px 12px;font-size:14px}
.warnbox{background:var(--warn-soft);color:var(--fg);border-radius:12px;padding:10px 12px;font-size:14px}
.sw{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:14px;background:var(--line);position:relative;cursor:pointer;border:0;padding:0;flex-shrink:0;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .15s}
.sw:checked{background:var(--ok)}
.sw:checked::after{transform:translateX(20px)}
.sw:disabled{opacity:.5;cursor:default}
.sched{display:flex;flex-direction:column;gap:12px}
.sday{display:flex;flex-direction:column;gap:8px}
.sday + .sday{border-top:1px solid var(--line);padding-top:12px}
.sday-h{display:flex;align-items:center;gap:10px}
.sday-h .t1{flex:1;min-width:0;font-weight:500}
.sday-h .len{color:var(--muted)}
.sday-t{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.sched .len{font-variant-numeric:tabular-nums;white-space:nowrap}
.sched select{height:40px;padding:0 10px;font-variant-numeric:tabular-nums}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--surface-2);border-radius:10px;padding:6px 6px 6px 12px}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;user-select:all}

/* вход и ПИН */
.auth{display:flex;flex-direction:column;align-items:stretch;gap:16px;max-width:360px;width:100%;margin:8px auto 0}
.brand{width:88px;height:88px;border-radius:24px;margin:0 auto;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:var(--brand-fg);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:2px;position:relative}
.brand b{font-weight:800;font-size:19px;letter-spacing:.02em}
.brand b+b{font-size:23px}
.brand i{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--brand-fg) 0 5px,transparent 5px 8px)}
.authform{display:flex;flex-direction:column;gap:14px}
.pwrow{display:flex;gap:8px;align-items:center}
.pwrow input{flex:1}
.demo{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--muted)}
.demo b{color:var(--fg)}
.dots{display:flex;gap:18px;justify-content:center;padding:6px 0}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);transition:background .1s}
.dots i.on{background:var(--fg);border-color:var(--fg)}
.dots.shake{animation:shake .35s}
.dots.shake i{border-color:var(--bad)}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:290px;width:100%;margin:0 auto}
.keypad button{height:62px;border-radius:16px;border:0;background:var(--surface);font-size:26px;font-weight:500;cursor:pointer;font-variant-numeric:tabular-nums}
.keypad button:active{background:var(--surface-2)}
.keypad button:disabled{opacity:.4;cursor:default}
/* сообщения бота */
.tgchat{background:var(--chat-bg);border-radius:var(--r);padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.tgmsg{background:var(--surface);border-radius:14px 14px 14px 4px;padding:8px 12px 6px;max-width:92%;font-size:14px;line-height:1.4;position:relative}
.tgfrom{font-weight:600;font-size:13px;color:var(--accent);margin-bottom:2px}
.tgfrom span{font-weight:400;color:var(--muted);font-size:12px}
.tgtext p{margin:0 0 4px}
.tgtime{font-size:11px;color:var(--muted);text-align:right}
.tgbtns{display:flex;flex-wrap:wrap;gap:6px;margin:6px -6px 2px}
.tgbtns span{flex:1;text-align:center;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;border-radius:10px;padding:8px 10px;white-space:nowrap}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.hist{font-size:12px;color:var(--muted)}
.hist summary{cursor:pointer;width:max-content;padding:2px 0;font-weight:500}
.hist ol{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.hist ol b{color:var(--fg);font-weight:600}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(60px + env(safe-area-inset-top,0px));background:var(--toast);color:var(--toast-fg);padding:11px 16px;border-radius:12px;font-size:14px;z-index:40;width:max-content;max-width:min(440px,calc(100% - 32px));box-shadow:0 6px 24px rgba(0,0,0,.18);pointer-events:none}
@media (max-width:380px){.tiles{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.sw,.sw::after{transition:none}.dots.shake{animation:none}}

/* пока идёт запрос к серверу */
body.busy .btn,body.busy .keypad button{opacity:.6;pointer-events:none}
body.busy{cursor:progress}

/* часы в шапке: Якутск и Москва */
.clocks{display:flex;flex-direction:column;align-items:flex-end;font-size:11px;line-height:1.25;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.clocks b{color:var(--fg);font-weight:600}

/* блоки в прокручиваемых колонках не сжимаются по высоте (иначе .group обрезает текст) */
.sheet-b>*,.screen>*,.card>*,.seg>*{flex-shrink:0}
.row .main .t2{overflow-wrap:anywhere}
[hidden]{display:none!important}
.fstack{display:flex;flex-direction:column;gap:14px}

/* таблица плана: узкий первый столбец, номера пунктов по центру, город — строкой на всю ширину */
.grid.board th.rowh.pv{width:58px;min-width:58px;max-width:58px;padding:0 6px;text-align:center}
.grid.board thead th.rowh.pv{font-size:11px}
.grid.board tr.cityrow th.cityh{height:28px;padding:0;text-align:left;background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.grid.board tr.cityrow th.cityh span{position:sticky;left:0;display:inline-block;padding:0 10px}
/* шапка: три часовых пояса, подпись и время в две колонки */
.clocks{display:grid;grid-template-columns:auto auto;column-gap:5px;row-gap:0;align-items:baseline;font-size:10.5px;line-height:1.22}
.clocks span{text-align:right}
.clocks b{text-align:left}
/* сводка */
.tile b small{font-size:13px;color:var(--muted);font-weight:500}
.tile.t-bad b{color:var(--bad)} .tile.t-warn b{color:var(--warn)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}
.dot.bad{background:var(--bad)} .dot.warn{background:var(--warn)}
.row .main .t1.wrap{white-space:normal;overflow-wrap:anywhere}
.info.demonote{line-height:1.4}
.segbar .chip{flex:1;text-align:center}
/* вопросы и ответы */
.alert.q{background:var(--accent-soft);color:var(--accent);align-items:flex-start}
.alert.q .main b{color:var(--accent)}
.alert.q .btn{align-self:center}
.qtext{margin-top:4px;font-size:14px;color:var(--fg)}
.qa{background:var(--accent-soft);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.qa-l{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600;margin-bottom:1px}
.card .acts{flex-wrap:wrap}
/* логины и пароли */
.row.cred{align-items:flex-start;flex-wrap:wrap}
.row.cred .main{flex:1 1 180px}
.row.cred code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--fg);user-select:all;overflow-wrap:anywhere}
.row.cred code.pw{background:var(--surface-2);padding:1px 5px;border-radius:5px}
.cred-b{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;align-self:center}

/* клетки плана: фамилия и инициалы видны всегда, чтобы отличать однофамильцев */
.grid.board thead th{min-width:84px}
.grid.board thead th.rowh.pv{min-width:58px}
.board .cell{width:84px;padding:4px 6px}
.board .cell .nm1{display:flex;flex-direction:column;line-height:1.25}
.board .cell .nm1 .sn{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .cell .nm1 .ini{font-size:11px;color:var(--muted);white-space:nowrap}
.board .cell .nm{display:flex;align-items:baseline;gap:3px;white-space:nowrap;line-height:1.3}
.board .cell .nm .sn{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.board .cell .nm .ini{flex-shrink:0;color:var(--muted);font-size:10px}
.board .cell .nm i{flex-shrink:0;margin-left:auto;font-size:10px}
.board .cell .ini i{font-style:normal}

/* плитки: число сверху, подпись под ним, все одной высоты */
.tile{display:flex;flex-direction:column;gap:3px;min-height:72px;padding:11px 12px}
.tile b{display:flex;align-items:baseline;gap:4px;font-size:22px;line-height:1.1;font-weight:700}
.tile b small{font-size:13px;color:var(--muted);font-weight:500}
.tile span{font-size:12px;line-height:1.3;color:var(--muted)}

/* журнал: переключатель и строки действий */
.seg2{flex-wrap:nowrap}
.row .when{flex-shrink:0;text-align:right;white-space:nowrap}
.act-row{align-items:flex-start}
.act-row .when{padding-top:2px}
.row.more{justify-content:center;color:var(--accent);font-weight:600}
/* о приложении */
.about-h{display:flex;align-items:center;gap:14px}
.about-h .brand{width:56px;height:56px;border-radius:16px;margin:0;font-size:11px}
.about-h .brand i{display:none}
.about-l{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}
.sheet-b p{margin:0;line-height:1.45}
a.btn{text-decoration:none;display:flex;align-items:center;justify-content:center}

.row.btnrow{justify-content:flex-end;flex-wrap:wrap;gap:8px}
.row.stack{flex-direction:column;align-items:stretch;gap:8px}
.row.btnrow .btn{flex:1 1 auto}

/* повтор недели */
.copyrow{display:flex;gap:8px}
.copyrow .btn:first-child{flex:1;min-width:0}
.btn.icon{width:48px;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.btn.icon .i{width:20px;height:20px}
.cb{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent);margin:0}
.row.cw.off .main,.row.cw.off .num{opacity:.45}
.row.cw .main select{margin-top:6px;height:38px}
.cwsum{text-align:center}
.row.cw{align-items:flex-start}
.row.cw .cb{margin-top:1px}
.line.cwh{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}

/* плитки: две строки подписи одинаковой высоты, ничего не переносится */
.tile{gap:6px;min-height:0}
.tile .tl{display:flex;flex-direction:column;font-size:12.5px;line-height:1.3;color:var(--muted)}
.tile .tl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tl span:first-child{color:var(--fg);font-weight:500}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.danger-row .t1{color:var(--bad)}
.row.danger-row:active{background:var(--bad-soft)}

/* выход: красная строка в меню и красная кнопка подтверждения */
.row.danger-row .t1{color:var(--bad);font-weight:600}
.btn.danger-solid{background:var(--bad);color:#fff}
.logout-q{display:flex;flex-direction:column;gap:8px}

/* iPhone увеличивает страницу при нажатии на поле со шрифтом меньше 16 px — поля всегда 16 px */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:16px}

/* строка-ссылка внутри строки с кнопкой */
.rowlink{display:flex;align-items:center;gap:12px;flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.rowlink .main{flex:1;min-width:0}

/* Страница не прокручивается и не «пружинит» на iPhone: прокручивается только содержимое.
   Шапка с часами стоит на месте, у таблиц нет оттягивания за края. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.scroller.locked{overflow:hidden}
.app{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.screen{padding-bottom:20px}
.sheet-b{overscroll-behavior:none}
#journal{scroll-margin-top:64px}
html,body{margin:0;padding:0}

.card.sub{gap:8px}
.group.inset{background:var(--surface-2);border-radius:12px}
.group.inset .row{padding:9px 10px;min-height:0}
.nw{white-space:nowrap}

/* Таблицы плана и табеля: своя прокрутка в обе стороны, высота по экрану.
   Дни сверху и пункты/люди слева закреплены. Колёсико и тачпад: вверх-вниз листают таблицу,
   у края прокрутка переходит на страницу; вбок — без «пружины» на iPhone. */
.scroll{overflow-x:auto;overscroll-behavior-x:none;overscroll-behavior-y:auto;position:relative}
.scroll.dragging{cursor:grabbing;user-select:none}
.scroll.dragging *{cursor:grabbing}
@media (hover:hover) and (pointer:fine){
  /* компьютер: у таблицы своя высота (её подгоняет fitTables), оба ползунка видны сразу */
  .scroll{overflow:auto;max-height:calc(100vh - 150px);cursor:grab}
  .scroll button{cursor:pointer}
  .scroll::-webkit-scrollbar{width:12px;height:12px}
  .scroll::-webkit-scrollbar-track{background:var(--surface-2);border-radius:6px}
  .scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:6px;border:3px solid var(--surface-2)}
  .scroll::-webkit-scrollbar-thumb:hover{background:var(--fg)}
  .scroll::-webkit-scrollbar-corner{background:var(--surface-2)}
  .scroll{scrollbar-width:auto;scrollbar-color:var(--muted) var(--surface-2)}
}
.scrollhint{display:none}
@media (hover:hover) and (pointer:fine){.scrollhint{display:block}}

/* табель: пункт в центре, премия справа сверху, неполные часы справа снизу, стажировка слева снизу */
.grid.mt thead th{min-width:56px}
.tcell{width:56px;height:42px;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.tcell.multi{height:56px}
.tseg{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.tcell.multi .tseg+.tseg{border-top:1px dashed var(--line)}
.tseg i{position:absolute;font-style:normal;font-size:9px;line-height:1;font-weight:700}
.tseg .tp{top:2px;right:3px;color:var(--ok)}
.tseg .th{bottom:2px;right:3px;color:var(--accent);background:var(--accent-soft);border-radius:3px;padding:1px 2px}
.tseg .tst{bottom:2px;left:3px;color:var(--muted)}
.tcell.multi .tseg .tp{top:1px}.tcell.multi .tseg .th,.tcell.multi .tseg .tst{bottom:1px}
.tseg.rej{color:var(--bad);text-decoration:line-through}
.tcell.t-rej{text-decoration:none}
.tlegend{display:flex;gap:12px;align-items:center}
.tlegend .tcell.demo{flex-shrink:0;border:1px solid var(--line);border-radius:8px;cursor:default;background:var(--surface)}
.tlegend .lp{color:var(--ok)}.tlegend .lh{color:var(--accent)}
/* имя в табеле: фамилия и итоги месяца под ней */
.tname{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;background:none;padding:4px 10px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.tname .tn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.tname .ts{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}
.segsum{text-align:center;margin:0;font-size:14px;color:var(--muted)}
.row .end b{font-size:15px}
.grid.mt th.rowh{padding:0;min-width:136px}
.tlegend .tcell.demo{width:66px;height:48px;display:flex}.tlegend .tcell.demo .tseg{font-size:13px}.tlegend .tcell.demo .tseg i{font-size:10px}
.tlegend .tcell.demo{position:relative}.tlegend .tcell.demo .tseg{position:absolute;inset:0}
/* план на неделю */
.wkbtn{margin-bottom:4px;height:auto;min-height:46px;padding:10px 14px;white-space:normal;text-align:left;justify-content:flex-start}
.wkbtn .i{flex-shrink:0}
.wkhead{display:flex;align-items:center;gap:10px;margin:18px 4px 8px}
.wkhead .main{flex:1;min-width:0;font-size:15px;line-height:1.3}
.wkhead .btn{flex-shrink:0}
.wkweeks .chip{height:auto;min-height:44px;padding:5px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.wkweeks .chip small{font-size:12px;opacity:.75}
.wkhint{margin:8px 2px 0;font-size:13px;line-height:1.4}
.wkcyc{display:flex;flex-direction:column;gap:10px;background:var(--surface);border-radius:var(--r);padding:12px;margin-bottom:14px}
.wkshift{display:flex;align-items:center;gap:8px}
.wkshift .t2{flex:1;text-align:center;font-size:14px}
.wkshift .btn{width:40px;padding:0;font-size:20px}
.wkdays{margin-top:4px}
.wkday{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.wkday+.wkday{border-top:1px solid var(--line)}
.wkdh{display:flex;align-items:center;gap:10px;min-height:32px}
.wkdh .daylbl{width:60px}
.wkdh .main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wkday.past{opacity:.55}
.wkday.off .daylbl b{color:var(--muted)}
.wkseg{display:flex;align-items:center;gap:8px;padding-left:70px}
.wkseg select{flex:1;min-width:0;height:40px}
.wkseg .stepper{flex-shrink:0}
.wkx{border:0;background:var(--surface-2);width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:17px;line-height:1;flex-shrink:0}
.wkwarn{padding-left:70px;color:var(--bad)!important;margin-top:-4px}
.wkadd{align-self:flex-start;margin-left:70px}
.wkch .sign{width:18px;font-weight:700;font-size:18px;text-align:center;flex-shrink:0}
.wkch.add .sign{color:var(--ok)} .wkch.chg .sign{color:var(--accent)} .wkch.del .sign{color:var(--bad)}
.wkch.del .main .t1{text-decoration:line-through;text-decoration-color:var(--bad)}
@media (max-width:360px){.wkseg,.wkwarn{padding-left:0}.wkadd{margin-left:0}.wkseg .stepper button{width:34px}}
.wkbtn .i{width:22px;height:22px}
.wkmode .chip{padding:0 6px;white-space:nowrap;font-size:14px}
.wkseg{padding-left:0}.wkwarn{padding-left:0}.wkadd{margin-left:0}
.wkhead .main b{display:block}
.wkhead .main .t2{display:block;font-size:13px}
/* предложения и просьбы смен */
.offer{background:var(--surface);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 2px var(--accent)}
.offer .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:700}
.ofmain{display:flex;gap:14px;align-items:center}
.ofmain .main{flex:1;min-width:0}
.ofwarn{color:var(--warn)!important}
.ofbtns{display:flex;gap:8px}
.ofbtns .btn{flex:1}
.ofbtns.sm{margin-top:8px}.ofbtns.sm .btn{flex:0 0 auto}
.row.ofreq{align-items:flex-start}
.row.ofreq .code{margin-top:2px}
.row.ofreq.inl{background:var(--accent-soft);border-radius:12px;padding:10px 12px}
.row.ofreq .qtext{font-size:13px}
b.bad{color:var(--bad);font-weight:600}
.group .btn.plain,.offer .btn.plain,.card .btn.plain{box-shadow:inset 0 0 0 1px var(--line)}
.ofwait{color:var(--accent)!important;font-weight:600}
/* моя неделя на главной */
.wstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.ws{border:0;border-radius:12px;background:var(--surface);padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--fg);min-width:0;font:inherit}
.ws .wd{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ws b{font-size:17px;font-weight:600;line-height:1.2}
.ws .wc{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ws.is-today{box-shadow:inset 0 0 0 2px var(--accent)}
.ws-ok{background:var(--ok-soft)} .ws-ok .wc{color:var(--ok)}
.ws-pend{background:var(--warn-soft)} .ws-pend .wc{color:var(--warn)}
.ws-rej,.ws-miss{background:var(--bad-soft)} .ws-rej .wc,.ws-miss .wc{color:var(--bad)}
.ws-plan .wc{color:var(--accent)}
.ws-off b{color:var(--muted)}
.wkseg{flex-wrap:wrap}
.wkseg select{flex:1 1 200px}
.wkseg .stepper{margin-left:auto}
.wkday.multi .wkseg select{flex-basis:100%}
/* окна снизу листаются только вверх-вниз: на iPhone не «ездят» вбок, даже если что-то шире на пару пикселей */
.sheet-b{overflow-x:hidden;overflow-y:auto;overscroll-behavior-x:none;touch-action:pan-y}
.sheet-b>*{max-width:100%}
.sheet-b select,.sheet-b input,.sheet-b textarea{max-width:100%}
.sheet-b textarea{resize:none}
.sheet-b .line>*,.sheet-b .row>*{min-width:0}
.sheet-b .line .stepper,.sheet-b .row .stepper{flex-shrink:0}
.pename{margin:-4px 2px 2px;font-size:13px;line-height:1.45}
.pename b{color:var(--fg)}
.ent{font-weight:600;color:var(--fg)}
/* клетка табеля v2: С слева сверху, П справа сверху, пункт и часы «14ч» в центре; два пункта — две половины */
.tcell{width:70px;height:46px}
.tcell.multi{height:74px}
.grid.mt thead th{min-width:70px}
.tseg{display:block;position:relative;flex:1;min-height:0}
.tseg .tmid{position:absolute;left:0;right:0;bottom:5px;display:flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}
.tseg .tmid b{font-size:12px;font-weight:700}
.tseg i{position:absolute;font-style:normal;line-height:1;font-weight:700}
.tseg .tst{top:3px;left:4px;bottom:auto;color:var(--bad);font-size:10px}
.tseg .tp{top:3px;right:4px;color:var(--ok);font-size:10px}
.tseg .tmid .th{position:static;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 3px;font-size:10px;font-weight:700}
.tcell.multi .tseg .tp,.tcell.multi .tseg .tst{top:2px}
.tcell.multi .tseg .tmid{bottom:3px}
.tcell.multi .tseg+.tseg{border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.tlegend .tcell.demo{width:80px;height:auto;display:flex;flex-direction:column}
.tlegend .tcell.demo .tseg{position:relative;inset:auto;height:38px;flex:none;font-size:13px}
.tlegend .tcell.demo .tseg .tmid b{font-size:13px}
.grid.mt td{height:47px}
.grid.mt .tcell{height:100%;min-height:46px}
.grid.mt .tcell.multi{min-height:74px}
.tseg .tmid{bottom:8px}
.tcell.multi .tseg .tmid{bottom:5px}
.tseg .tmid,.tcell.multi .tseg .tmid{top:calc(50% + 4px);bottom:auto;transform:translateY(-50%)}
.tcell.multi .tseg .tmid{top:calc(50% + 3px)}
/* фильтр табеля */
.tfilter{display:flex;flex-direction:column;gap:8px}
.tfilter .chips{gap:6px}
.tfilter .chip{height:34px;padding:0 12px;font-size:14px}
.tfsel{display:flex;gap:10px;flex-wrap:wrap}
.tfsel:empty{display:none}
.tfsel label{display:flex;align-items:center;gap:6px;flex:1 1 150px;min-width:0}
.tfsel select{flex:1;min-width:0;height:36px}
.tfnote{margin:0}
/* «Я на смене» */
.onbtn{background:var(--ok);color:#fff;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--ok) 70%,transparent)}
.onbtn .i{width:22px;height:22px;stroke:#fff}
.onnote{margin-top:-6px;text-align:center}
.onshift{display:flex;align-items:center;gap:12px;background:var(--ok-soft);border-radius:var(--r);padding:12px 14px}
.onshift .main{flex:1;min-width:0}
.onshift .t1{color:var(--ok);font-weight:700}
.onshift .t2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.onshift .code{font-size:12px;padding:2px 6px}
.ondot{width:12px;height:12px;border-radius:50%;background:var(--ok);flex-shrink:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent);animation:onp 2s ease-in-out infinite}
@keyframes onp{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 8%,transparent)}}
@media (prefers-reduced-motion:reduce){.ondot{animation:none}}
.ckout{align-self:center}
.arrive{background:var(--surface);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.arr-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.arr-top>b{font-size:28px;font-weight:700;line-height:1}
.arr-top>b small{font-size:15px;color:var(--muted);font-weight:600}
.arrive .bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.arrive .bar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.arrlist summary{cursor:pointer;color:var(--accent);font-weight:600;padding:6px 4px;list-style:none}
.arrlist summary::-webkit-details-marker{display:none}
.arrlist[open] summary{margin-bottom:8px}
.tfsel label{flex:1 1 140px}
.tfsel label:first-child{flex:2 1 220px}
.tlegwrap summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:14px;padding:4px 2px;list-style:none}
.tlegwrap summary::-webkit-details-marker{display:none}
.tlegwrap summary::before{content:'ⓘ ';}
.tlegwrap[open] summary{margin-bottom:8px}
.onwait{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:var(--r);padding:12px 14px;border:1px dashed var(--line)}
.onwait .i{width:24px;height:24px;flex-shrink:0;stroke:var(--muted)}
.onwait .main{flex:1;min-width:0}