/* ============================================================
   СМЕНА — стили. Срисованы с ПРОТОТИП.html один в один
   (тёмные градиенты + красные акценты, без сплошного красного).
   ============================================================ */
:root{
  /* палитра «Уголь и пламя» (утверждена 10.09.2026): угольные фоны + пламенный градиент */
  --red:#ff4d3d; --red-2:#ff6a4d; --red-deep:#8f0e06;
  --grad-red:linear-gradient(135deg,#ff4d3d 0%,#ff8a3d 50%,#ffb020 100%);
  --grad-card:linear-gradient(145deg,#1d1d25 0%,#16161c 60%,#101014 100%);
  --grad-deep:linear-gradient(145deg,#1d1d25 0%,#16161c 60%,#101014 100%);
  --grad-num:linear-gradient(135deg,#ffb020 0%,#ff4d3d 60%,#ff7a5c 100%);
  --black:#0b0b0e; --card:#16161c; --card-2:#1d1d25; --line:#26262e;
  --silver:#eceae6;
  --green:#2ee06a; --green-bg:#0d2b18; --green-d:#14532d;
  --amber:#ffb020; --amber-bg:#33230a;
  --gray:#9b9890; --sub:#9b9890;
  --alarm:#ff4d3d; --alarm-bg:#3a1210;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;} /* класс .phone задаёт display:flex и перебивал hidden — экраны входа висели рядом с приложением */
body{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:#000; color:#fff; display:flex; justify-content:center; min-height:100vh;}
.phone{width:100%; max-width:420px; background:var(--black); min-height:100vh; display:flex; flex-direction:column; position:relative; box-shadow:0 0 60px rgba(255,77,61,.12), 0 0 30px rgba(0,0,0,.85);}

/* --- шапка --- */
header{background:linear-gradient(135deg,#16161c 0%,#0b0b0e 100%); color:#fff; padding:8px 14px; position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px; box-shadow:0 6px 24px rgba(0,0,0,.6);}
header::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; background:var(--grad-red);}
header .logo{width:70px; height:70px; border-radius:50%; background:none; border:1.5px solid #34343e; box-shadow:0 3px 10px rgba(0,0,0,.45); flex:0 0 auto;}
header .tt{flex:1; min-width:0;}
header .h1{font-size:19px; font-weight:900; letter-spacing:1px; text-transform:uppercase; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; color:transparent;}
header .h2{font-size:10.5px; opacity:.92; margin-top:1px; font-weight:600; line-height:1.3;}
header .out{border:1px solid var(--line); background:var(--card-2); color:var(--gray); border-radius:10px; padding:6px 10px; font-size:11px; font-weight:800; cursor:pointer;}
#bell-badge{position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; border-radius:9px; min-width:17px; height:17px; line-height:17px; text-align:center; font-size:9.5px; font-weight:900; padding:0 3px;}
main{flex:1; padding:14px; padding-bottom:28px;}

/* нижние вкладки убраны 10.09.2026 — разделы теперь в боковом меню-гамбургере */

.screen{display:none;}
.screen.on{display:block;}

/* --- карточки --- */
.hero{position:relative; overflow:hidden; border-radius:18px; padding:16px; margin-bottom:12px; background:var(--grad-deep); color:#fff; border:1px solid #2e2e38; border-left:4px solid transparent; border-image:linear-gradient(#ff4d3d,#ffb020) 1; border-image-slice:1 0 0 0; border-left-width:4px; box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);}
.hero::before{content:""; position:absolute; top:-45%; right:-15%; width:75%; height:190%; background:radial-gradient(ellipse at center, rgba(255,77,61,.2) 0%, transparent 62%); pointer-events:none;}
.hero .kick{font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:1.2px; color:var(--red-2);}
.hero .big{font-size:24px; font-weight:900; line-height:1.15; margin-top:4px; text-transform:uppercase; letter-spacing:.3px;}
.hero .note{font-size:11px; opacity:.88; margin-top:7px; font-weight:600; line-height:1.5;}
.card{background:var(--grad-card); border:1px solid #2a2a33; border-radius:18px; padding:16px; margin-bottom:14px; box-shadow:0 6px 18px rgba(0,0,0,.28); position:relative; overflow:hidden;}
.card::before{content:""; position:absolute; top:-45%; right:-15%; width:75%; height:190%; background:radial-gradient(ellipse at center, rgba(255,77,61,.2) 0%, transparent 62%); pointer-events:none;}
.card h3{font-size:14px; margin-bottom:8px; font-weight:900; text-transform:uppercase; letter-spacing:.4px;}
.sub{font-size:12px; color:var(--gray); line-height:1.55;}

/* --- плитки-счётчики --- */
.tot{display:flex; gap:8px; margin-top:4px; margin-bottom:12px;}
.tot .t{flex:1; background:linear-gradient(160deg,#1d1d25,#16161c); border:1px solid var(--line); border-radius:12px; padding:9px 8px; text-align:center;}
.tot .t .v{font-size:22px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums;}
.tot .t .l{font-size:9.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.4px; font-weight:700; margin-top:1px;}
.gnum{background:var(--grad-num); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;}

/* --- список людей --- */
.search{width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:12px; color:#fff; font-size:14px; padding:10px 12px; margin-bottom:10px; font-family:inherit; font-weight:600;}
.search:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,77,61,.2);}
/* селект локации без выбора: подсказка «выбери локацию» серая, как у полей-плейсхолдеров */
select.locsel:invalid{color:var(--gray);}
/* поле «сколько человек»: взял больше, чем свободно в смене — краснеет */
input.lochead.over{border-color:var(--alarm); color:var(--alarm);}
.row{display:flex; align-items:center; gap:10px; padding:11px 10px; border-top:1px solid var(--line); cursor:pointer;}
.row:first-of-type{border-top:none;}
.row:active{background:rgba(255,77,61,.07);}
.who{flex:1; min-width:0;}
.who .nm{font-weight:800; font-size:14px; color:#fff;}
.who .rt{font-size:11px; color:var(--gray); margin-top:2px;}
.ava{width:38px; height:38px; border-radius:50%; background:var(--grad-num); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; flex:0 0 auto; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.ava.fm{background:linear-gradient(135deg,#ffb020,#ff7a00);}
.ava.pd{background:linear-gradient(135deg,#7db4ff,#3d6ecc);}

/* --- бейджи и кнопки --- */
.badge{display:inline-block; font-size:9.5px; font-weight:900; border-radius:7px; padding:2.5px 7px; margin-left:6px; vertical-align:1px; text-transform:uppercase; letter-spacing:.5px; background:var(--card-2); color:var(--silver); border:1px solid var(--line);}
.tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.tags .badge{margin-left:0;}
.badge.red{background:var(--alarm-bg); color:var(--alarm); border-color:#6b1712;}
.badge.green{background:var(--green-bg); color:var(--green); border-color:var(--green-d);}
.badge.amber{background:var(--amber-bg); color:var(--amber); border-color:#5c3d0a;}
.btn{border:none; border-radius:12px; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; letter-spacing:.3px; font-family:inherit;}
.b-blue{background:var(--grad-red); color:#fff; box-shadow:0 4px 16px rgba(255,110,60,.4);}
.b-ghost{background:var(--card-2); color:#e8e8ec; border:1px solid var(--line);}
.bigbtn{width:100%; border:none; border-radius:16px; padding:16px; font-size:15px; font-weight:900; cursor:pointer; text-transform:uppercase; letter-spacing:.6px; font-family:inherit;}
.bigbtn.blue{background:var(--grad-red); color:#fff; box-shadow:0 4px 16px rgba(255,110,60,.4);}
.bigbtn.b-bad{background:var(--alarm-bg); color:var(--alarm); border:1px solid #6b1712;}
.bigbtn:disabled{opacity:.5; cursor:default;}

/* --- поля ввода (вход / пароль) --- */
.field{margin-bottom:10px;}
.field label{display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--gray); margin-bottom:5px;}
.field input{width:100%; background:#16161c; border:1px solid var(--line); border-radius:12px; color:#fff; font-size:16px; padding:12px 14px; font-family:inherit;}
.field input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(255,77,61,.2);}
.hint{font-size:10px; color:#6f6f78; margin-top:12px; text-align:center; text-transform:uppercase; letter-spacing:.5px; font-weight:700; line-height:1.7;}

/* --- журнал --- */
.jrow{padding:9px 2px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.5;}
.jrow:first-of-type{border-top:none;}
.jrow .who-did{font-weight:800; color:#fff;}
.jrow .what{color:var(--silver);}
.jrow .when{font-size:10.5px; color:#6f6f78; font-weight:700; margin-top:1px;}

/* --- карточка человека (модал) --- */
#modal{position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:40; display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(3px);}
#modal.on{display:flex;}
.sheet{width:100%; max-width:420px; background:#16161c; border-radius:22px 22px 0 0; border-top:2px solid var(--red); padding:16px 14px 22px; max-height:86vh; overflow-y:auto; animation:sheetUp .32s cubic-bezier(.2,.8,.3,1) both;}
.opt{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:var(--card-2); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer;}
.opt.on{background:var(--grad-red); border-color:transparent; box-shadow:0 4px 14px rgba(255,110,60,.38);}
.opt .t1{font-size:13px; font-weight:800; color:#fff;}
.opt .t2{font-size:11px; color:var(--gray); margin-top:1px;}
.opt.on .t2{color:rgba(255,255,255,.85);}
.sw{width:44px; height:24px; border-radius:20px; background:var(--line); position:relative; flex:0 0 auto; transition:background .2s;}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s;}
.sw.on{background:var(--green);}
.sw.on::after{left:23px;}

/* --- брендовая шапка (экраны входа / пароля / телефона) — размер как на экране входа --- */
.brandhead{display:flex; flex-direction:column; align-items:center; margin-bottom:18px;}
.brandhead .blogo{width:88px; height:88px; border-radius:50%; background:none; border:3px solid rgba(255,255,255,.28); box-shadow:0 10px 40px rgba(255,110,60,.38); animation:logoIn .7s cubic-bezier(.2,.8,.3,1.15) both;}
.brandhead .ttl{font-size:30px; font-weight:900; letter-spacing:3px; margin-top:18px; text-transform:uppercase; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brandhead .sub2{font-size:11px; color:var(--gray); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:4px;}

/* --- экран входа --- */
#login{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:28px 22px; position:relative; overflow:hidden;}
#login::before{content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:130%; height:70%; background:radial-gradient(ellipse at center, rgba(255,90,50,.16) 0%, transparent 60%); pointer-events:none;}
#login .blogo{width:88px; height:88px; border-radius:50%; background:none; border:3px solid rgba(255,255,255,.28); box-shadow:0 10px 40px rgba(255,110,60,.38); animation:logoIn .7s cubic-bezier(.2,.8,.3,1.15) both;}
#login .ttl{font-size:30px; font-weight:900; letter-spacing:3px; margin-top:18px; text-transform:uppercase; background:var(--grad-num); -webkit-background-clip:text; background-clip:text; color:transparent;}
#login .sub2{font-size:11px; color:var(--gray); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:4px;}
#login form{width:100%; max-width:340px; margin-top:26px; background:var(--grad-card); border:1px solid #2a2a33; border-radius:18px; padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.5);}

/* --- тост --- */
#toast{position:fixed; left:50%; bottom:18px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:#1d1d25; color:#fff; border:1px solid var(--red); border-radius:14px; padding:11px 18px;
  font-size:13px; font-weight:800; z-index:50; max-width:88%; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 20px rgba(255,110,60,.38); transition:all .35s cubic-bezier(.2,.8,.3,1.2);}
#toast.show{opacity:1; transform:translate(-50%,0);}
#toast.ok{border-color:var(--green); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 20px rgba(46,224,106,.3);}
::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-thumb{background:var(--red-deep); border-radius:3px;}

/* --- сворачиваемые блоки (как плашки смен в прототипе) --- */
.fold .shift{display:flex; align-items:baseline; gap:6px; cursor:pointer; font-weight:900; font-size:15px; color:#fff; letter-spacing:.2px; padding:2px 0;}
.fold .shift .sm{margin-left:auto; white-space:nowrap; color:var(--red-2); font-weight:800; font-size:12px;}
.fold .caret{font-size:12px; color:var(--red-2); transition:transform .3s ease; align-self:center; flex:0 0 auto;}
.fold.open .caret{transform:rotate(180deg);}
.fold-body{display:none;}
.fold.open .fold-body{display:block; animation:fadeUp .35s ease both;}

/* --- журнал: заголовок дня --- */
.jhead .sm{font-weight:800;}
.jtime{font-size:10.5px; color:#6f6f78; font-weight:700; margin-right:6px;}

/* --- этап 1: смены --- */
.shift-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:2px 0 4px;}
.shift-head .time{font-weight:900; font-size:16px; color:#fff; letter-spacing:.3px;}
.shift-head .loc{font-size:11.5px; font-weight:800; color:var(--red-2); text-transform:uppercase; letter-spacing:.4px;}
.shift-head .fact{margin-left:auto; font-weight:900; font-size:16px; color:#fff; white-space:nowrap;}
.shift-note{font-size:11px; color:var(--gray); margin:2px 0 6px; line-height:1.4;}
.stb{display:inline-block; font-size:9px; font-weight:900; border-radius:8px; padding:3px 8px; text-transform:uppercase; letter-spacing:.5px; flex:0 0 auto;}
.stb.plan{background:var(--card-2); color:var(--gray); border:1px solid var(--line);}
.stb.ya{background:var(--green-bg); color:var(--green); border:1px solid var(--green-d);}
.stb.b{background:#0e2033; color:#7db4ff; border:1px solid #1e3a5c;}
.stb.pr,.stb.alko{background:var(--alarm-bg); color:var(--alarm); border:1px solid #6b1712;}
.stb.p{background:#1d1d25; color:var(--silver); border:1px solid var(--line);}
.stb.q{background:var(--amber-bg); color:var(--amber); border:1px solid #5c3d0a;}
.fact-edit{width:64px; font-size:14px; font-weight:800; color:#fff; background:#16161c; border:1px solid var(--line); border-radius:8px; padding:4px 6px; text-align:right; font-family:inherit;}
.fact-edit:focus{outline:none; border-color:var(--red);}
.repl-tag{font-size:10.5px; color:var(--green); font-weight:700;}
.picklist .row{cursor:pointer;}
.picklist .row.sel{background:rgba(255,77,61,.12);}
.bigops{display:flex; flex-wrap:wrap; gap:6px;}
.bigops .btn{flex:1; min-width:80px; text-align:center; padding:9px 6px;}
.empty-day{padding:26px 14px; text-align:center;}
.empty-day .e1{font-size:34px; margin-bottom:8px;}
.empty-day .e2{font-size:13px; color:var(--gray); line-height:1.6;}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px) scale(.985);} to{opacity:1; transform:none;}}
@keyframes logoIn{from{transform:scale(.3) rotate(-16deg); opacity:0;} to{transform:none; opacity:1;}}
@keyframes phoneIn{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
@keyframes popIn{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}
@keyframes sheetUp{from{transform:translateY(60px); opacity:0;} to{transform:none; opacity:1;}}
@keyframes shake{0%,100%{transform:none;} 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);}}
.phone{animation:phoneIn .45s ease both;}
.screen.on>*{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both;}
.screen.on>*:nth-child(1){animation-delay:.03s;} .screen.on>*:nth-child(2){animation-delay:.07s;}
.screen.on>*:nth-child(3){animation-delay:.11s;} .screen.on>*:nth-child(4){animation-delay:.15s;}
.screen.on>*:nth-child(5){animation-delay:.19s;} .screen.on>*:nth-child(6){animation-delay:.23s;}
.screen.on>*:nth-child(7){animation-delay:.27s;} .screen.on>*:nth-child(8){animation-delay:.31s;}
.screen.on>*:nth-child(9){animation-delay:.35s;} .screen.on>*:nth-child(10){animation-delay:.39s;}
.bigbtn, .btn, .row, .opt{transition:transform .12s ease;}
.bigbtn:active, .btn:active, .row:active, .opt:active{transform:scale(.97);}
.shake{animation:shake .3s ease;}

/* --- этап 1: автотабель за период --- */
.ttab-wrap{overflow-x:auto; margin-top:10px; -webkit-overflow-scrolling:touch;}
.ttab{border-collapse:collapse; font-size:10.5px; white-space:nowrap;}
.ttab th{font-size:9px; font-weight:800; color:var(--gray); padding:3px 3px; border:1px solid var(--line); text-align:center;}
.ttab td{padding:4px 3px; border:1px solid var(--line); text-align:center; color:#fff; font-weight:700;}
.ttab td.fio{text-align:left; position:sticky; left:0; background:var(--card-2); z-index:1; white-space:normal; max-width:104px; line-height:1.25;}
.ttab .post{display:none;} /* должность — только на печати; на телефоне ест ширину */
.ttab .mk{font-weight:900;}
.ttab td.mk2 .mkh{display:block; border-top:1px dashed var(--line); padding:2px 2px 1px; font-weight:900; color:#fff;} /* этаж часов под буквой — размер как у буквы */
.ttab td.mk2{padding:0; font-weight:900; line-height:1.05;}
.ttab td.mk2 .mk{display:block; padding:3px 2px;}
.ttab td.mk2 .mk + .mk{border-top:1px dashed var(--line);}
.ttab tr.fill{display:none;} /* пустые строки до 50 — только на печати, запас для ручных дописок */
.tbg{display:none;} /* лого-подложка — только на печати, фирменный бланк */
.mk.ya{color:var(--green);} .mk.pr{color:var(--alarm);} .mk.b{color:#7db4ff;}
.mk.p{color:var(--silver);} .mk.q{color:var(--amber);} .mk.off{color:var(--gray);}
.ttot{display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:12px; font-size:11px; font-weight:800;}
.ttot b{margin-left:8px; font-size:13px;}
.tsign{width:100%; border-collapse:collapse; margin-top:16px;}
.tsign td{border:none; padding:8px 6px 2px; vertical-align:bottom; font-size:11px; color:#fff;}
.tsign .role{font-weight:900; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--gray); white-space:nowrap;}
.tsign .val{display:block; border-bottom:1px solid var(--gray); text-align:center; font-weight:800; min-width:80px; padding-bottom:2px; font-size:11px;}
.tsign .cap{display:block; font-size:8px; color:var(--gray); text-align:center; margin-top:2px; font-weight:600;}
@media print{
  header,nav,#toast,.no-print,#login,#newpw,#getphone,.drawer,.veil,[hidden]{display:none !important;}
  html,body{height:auto !important;}
  body{background:#fff !important;}
  /* экранные минимальные высоты при печати недопустимы — именно они рождают пустой второй лист */
  .phone{max-width:none !important; width:100% !important; min-height:0 !important; box-shadow:none !important; background:#fff !important; color:#000 !important; animation:none !important;}
  main{padding:0 !important;}
  .screen > *{animation:none !important;}
  .card{background:#fff !important; border:none !important; box-shadow:none !important; color:#000 !important;}
  .card{overflow:visible !important;} /* иначе табель длиннее бланка обрезается без второй страницы */
  .card::before{display:none !important;}
  .ttab-wrap{overflow:visible !important;}
  .ttab{font-size:9px !important;}
  .ttab th{font-size:8px !important; padding:1.5px 2px !important;}
  .ttab td{padding:1px 2px !important; line-height:1;} /* компактнее: с двухэтажными клетками итоги и подписи должны влезть на лист */
  .ttab th,.ttab td{border:1px solid #000 !important; color:#000 !important;}
  .ttab td.fio{position:static; background:#fff !important; max-width:none; white-space:nowrap;}
  .ttab td.mk2 .mk + .mk{border-top:1px solid #000 !important;}
  .ttab td.mk2 .mkh{border-top:1px dashed #000 !important; color:#000 !important; padding:0.5px 2px !important;} /* печатные часы: размер как у буквы (наследуют), пунктир оставляем */
  .ttab .post{display:inline;}
  .ttot{margin-top:5px !important; gap:2px !important; font-size:9.5px !important;}
  .ttot b{font-size:10.5px !important;}
  .tsign{margin-top:7px !important;}
  .tsign td{padding:6px 4px 2px !important; font-size:10.5px !important;}
  .tsign .val{font-size:10.5px !important;}
  .tsign .cap{font-size:7.5px !important;}
  /* бланк ровно на один A4: 297 мм минус поля 12 мм и запас — в печатных миллиметрах,
     одинаково в любом браузере; таблица растягивается, подписи прижаты к низу листа */
  #tabel-body .card{display:flex !important; flex-direction:column !important; height:280mm; padding:4px 2px !important; box-sizing:border-box;}
  #tabel-body .card > .ttab-wrap{flex:1;}
  #tabel-body .card > .ttab-wrap > .ttab{width:100% !important; height:100%;}
  .ttab tr.fill{display:table-row !important;}
  .ttab thead tr:last-child th{width:4.6%;}
  /* лого-подложку с печати убрали по просьбе Игоря (мешает восприятию таблицы) */
  .tbg{display:none !important;}
  .mk.ya,.mk.pr,.mk.b,.mk.p,.mk.q,.mk.off{color:#000 !important;}
  .ttot,.ttot b{color:#000 !important;}
  .tsign td{color:#000 !important;}
  .tsign .val{border-color:#000 !important; color:#000 !important;}
  .tsign .role,.tsign .cap{color:#000 !important;}
  @page{size:A4 portrait; margin:6mm;}
}

/* --- документы для 3S (счёт на печать) --- */
.docpaper{background:#fff; color:#000; border-radius:12px; padding:16px; margin-bottom:12px;}
.docpaper h2{font-size:16px; font-weight:900; text-align:center; margin-bottom:14px; color:#000;}
.dtab{width:100%; border-collapse:collapse; margin-bottom:12px; font-size:11.5px; color:#000;}
.dtab td, .dtab th{border:1px solid #444; padding:5px 7px; vertical-align:top;}
.dtab th{background:#eee; font-weight:800; text-align:center;}
.dtab .cap{width:110px; font-weight:800; background:#f5f5f5;}
.dtab .left{text-align:left;}
.dtab .right{text-align:right;}
.dtab.goods td{text-align:center;}
.dtab.goods .tot td{font-weight:800; background:#fafafa;}
.dtab.sign, .dtab.sign td{border:none;}
.dtab.sign td{padding:14px 6px 2px; font-size:10.5px;}
.dtab.sign .line{border-bottom:1px solid #000; min-width:110px;}
.docpaper .small{font-size:10.5px; color:#000; line-height:1.5;}
@media print{
  body.docmode .phone{background:#fff !important;}
  body.docmode main{padding:0 !important;}
  body.docmode .screen{display:none !important;}
  body.docmode #scr-docs{display:block !important;}
  body.docmode #scr-docs .no-print{display:none !important;}
  body.docmode .docpaper{border-radius:0; padding:0; margin:0;}
}

/* --- боковое меню-гамбургер (10.09.2026, «Уголь и пламя») --- */
.burger{width:38px; height:38px; border-radius:11px; background:var(--card-2); border:1px solid var(--line); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; padding:0; transition:transform .12s ease;}
.burger:active{transform:scale(.94);}
.veil{position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:420px; background:rgba(5,5,8,.6); z-index:19; opacity:0; pointer-events:none; transition:opacity .22s ease; backdrop-filter:blur(2px);}
.veil.on{opacity:1; pointer-events:auto;}
/* fixed + left:max(...) — меню прилипает к экрану, а не к началу страницы:
   открывается перед глазами с любой глубины скролла; left совпадает с левым краем
   приложения и на телефоне (края окна), и на компе (центрированная колонка 420px) */
.drawer{position:fixed; top:0; bottom:0; left:max(0px, calc(50% - 210px)); width:80%; max-width:292px; background:#16161c; border-right:1px solid var(--line); z-index:20; padding:16px 12px 14px; display:flex; flex-direction:column; gap:14px; transform:translateX(-103%); visibility:hidden; transition:transform .27s cubic-bezier(.2,.8,.3,1), visibility 0s linear .27s; box-shadow:14px 0 40px rgba(0,0,0,.5); overflow-y:auto;}
.drawer.on{transform:none; visibility:visible; transition:transform .27s cubic-bezier(.2,.8,.3,1);}
.dprof{background:var(--grad-card); border:1px solid var(--line); border-radius:16px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;}
.dprof .ava{width:58px; height:58px; font-size:19px; margin-bottom:5px; box-shadow:0 6px 18px rgba(255,110,60,.35);}
.dw-name{font-weight:900; font-size:15px; line-height:1.25;}
.dw-role{font-size:10.5px; color:var(--gray); line-height:1.45; font-weight:700;}
.dw-meta{display:flex; gap:6px; width:100%; margin-top:11px;}
.dw-meta div{flex:1; background:var(--card-2); border:1px solid var(--line); border-radius:11px; padding:7px 2px;}
.dw-meta b{display:block; font-weight:900; font-size:12.5px; font-variant-numeric:tabular-nums;}
.dw-meta span{font-size:8.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.5px; font-weight:800;}
.dnav{display:flex; flex-direction:column; gap:2px;}
.dnav button{display:flex; align-items:center; gap:9px; padding:10px 12px; border:none; background:none; color:var(--gray); font-size:13.5px; font-weight:800; text-align:left; cursor:pointer; border-radius:11px; font-family:inherit; letter-spacing:.2px; transition:transform .12s ease;}
.dnav button::before{content:""; width:6px; height:6px; border-radius:50%; border:1.5px solid var(--gray); flex:0 0 auto;}
.dnav button:active{transform:scale(.97);}
.dnav button.on{background:var(--grad-red); color:#fff; box-shadow:0 4px 14px rgba(255,110,60,.35);}
.dnav button.on::before{background:#fff; border-color:#fff;}
@media (prefers-reduced-motion:reduce){.drawer,.veil{transition:none;}}

/* --- лента «Моя неделя» (полировка под макет, 10.09) --- */
.wkcard{padding:14px 12px 12px;}
.wk-h{font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:baseline;}
.wk-tip{font-size:9.5px; color:var(--gray); text-transform:none; letter-spacing:0; font-weight:700;}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;}
.wk{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 7px; border-radius:11px; background:var(--card-2); border:1px solid var(--line); color:var(--gray); font:inherit; cursor:pointer; transition:transform .12s ease;}
.wk:active{transform:scale(.93);}
.wk span{font-size:8.5px; font-weight:800; letter-spacing:.6px;}
.wk b{font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1;}
.wk.work{background:var(--grad-red); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(255,110,60,.35);}
.wk.plan{background:#3d2420; border-color:#5a332b; color:#ffb59e;}
.wk.off{opacity:.45;}
.wk.cur{outline:2px solid var(--red-2); outline-offset:2px;}

/* --- крупные суммы-плитки (полировка «Деньги»/«Табель», 10.09) --- */
.kpihero{background:var(--grad-red); border-radius:16px; padding:16px 18px; margin-bottom:10px; color:#fff; box-shadow:0 8px 22px rgba(255,110,60,.35); position:relative; overflow:hidden;}
.kpihero::before{content:""; position:absolute; top:-40%; right:-12%; width:60%; height:170%; background:radial-gradient(ellipse at center, rgba(255,255,255,.22) 0%, transparent 65%); pointer-events:none;}
.kpihero .kl{font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:1px; opacity:.92;}
.kpihero .kv{font-size:30px; font-weight:900; line-height:1.1; margin-top:3px; font-variant-numeric:tabular-nums; letter-spacing:.3px;}
.kpihero.bad{background:linear-gradient(135deg,#8f0e06,#d81f13); box-shadow:0 8px 22px rgba(216,31,19,.3);}

/* --- иконка журнала в плитке (полировка, 11.09) --- */
.jic{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--card-2); border:1px solid var(--line); margin-right:7px; vertical-align:-9px; font-size:13px;}

/* --- кнопка установки приложения (экран входа) --- */
.install-btn{width:100%; max-width:340px; margin:12px auto 0; display:flex; padding:13px; font-size:13.5px; border-radius:14px; justify-content:center;}
.install-tip{max-width:340px; margin:10px auto 0; font-size:11.5px; color:var(--gray); line-height:1.7; text-align:center; background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:10px 14px;}
.install-tip b{color:var(--silver);}

/* --- экран установки (первый для новичков в браузере) --- */
#install-screen, #open-app{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:28px 22px; position:relative; overflow:hidden;}
#open-app::before{content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:130%; height:70%; background:radial-gradient(ellipse at center, rgba(255,77,61,.16) 0%, transparent 60%); pointer-events:none;}
#install-screen::before{content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:130%; height:70%; background:radial-gradient(ellipse at center, rgba(255,77,61,.16) 0%, transparent 60%); pointer-events:none;}
.install-hero{width:100%; max-width:340px; margin-top:26px; text-align:center;}
.install-text{font-size:16px; font-weight:600; color:#fff; line-height:1.5; margin-bottom:18px;}
.install-hint{font-size:10px; color:var(--gray); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin-top:14px; line-height:1.7;}

/* лого на экране установки — компактнее (не вылезает за телефон) */
#install-screen .blogo, #open-app .blogo{width:220px; height:220px;}
#install-screen .ttl, #open-app .ttl{font-size:30px; margin-top:18px;}

/* большой лого на экране входа — как на экране установки */
#login .blogo{width:220px; height:220px;}

/* KOMAROV · SAKH 65 — крупная, жирная, с градиентом (экраны входа и установки) */
#login .sub2, #install-screen .sub2, #open-app .sub2, .brandhead .sub2{
  font-size:20px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  margin-top:8px;
  background:var(--grad-num); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- FAQ (Вопросы/Ответы) --- */
#scr-faq .card{padding:12px 14px;}
#scr-faq .shift{font-size:14px; font-weight:700; color:#fff;}
#scr-faq .sub{font-size:13px; padding:4px 0 2px;}
#scr-faq .sub b{color:var(--amber);}