:root{
    --bg:#F4F7F6;
    --surface:#FFFFFF;
    --ink:#1E2B2A;
    --muted:#6B7C7A;
    --teal:#1F6F6B;
    --teal-dark:#154E4B;
    --line:#DCE6E3;
    --green:#2F8F5B;
    --green-bg:#E7F4EC;
    --amber:#A32D2D;
    --amber-bg:transparent;
    --red:#C1432B;
    --red-bg:#FBE8E3;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  header{
    background:var(--teal-dark);
    color:#fff;
    padding:18px 16px 14px;
  }
  header .brand{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:0.02em;
  }
  header .sub{
    font-size:12px;
    color:#BFE0DC;
    margin-top:2px;
  }
  nav{
    display:flex;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
    overflow-x:auto;
  }
  nav button{
    flex:1;
    border:none;
    background:none;
    padding:13px 4px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    border-bottom:3px solid transparent;
    cursor:pointer;
    white-space:nowrap;
  }
  nav button.active{
    color:var(--teal-dark);
    border-bottom-color:var(--teal);
  }
  main{
    padding:16px;
    max-width:520px;
    margin:0 auto;
    padding-bottom:60px;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    margin-bottom:14px;
  }
  .punch{
    text-align:center;
    padding:26px 16px;
  }
  .punch .greeting{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;
    font-weight:700;
    color:var(--teal-dark);
    margin-bottom:4px;
  }
  .punch .role{
    font-size:13px;
    color:var(--muted);
    margin-bottom:18px;
  }
  .punch .clock{
    font-family:'JetBrains Mono',monospace;
    font-size:42px;
    font-weight:700;
    letter-spacing:0.04em;
    color:var(--teal-dark);
  }
  .punch .date{
    font-size:13px;
    color:var(--muted);
    margin-top:2px;
    text-transform:capitalize;
  }
  label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  select, input{
    width:100%;
    padding:12px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    font-size:16px;
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    margin-bottom:14px;
  }
  .btnrow{ display:flex; gap:10px; }
  .btn{
    flex:1;
    border:none;
    border-radius:12px;
    padding:20px 10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:17px;
    color:#fff;
    cursor:pointer;
    transition:transform 0.05s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn:disabled{opacity:0.45;}
  .btn.in{background:var(--green);}
  .btn.out{background:var(--red);}
  .btn.secondary{background:var(--teal);}
  .btn.full{width:100%;}
  .call-overlay{
    position:fixed; top:10px; left:10px; right:10px; z-index:5000;
    background:var(--surface); border:2px solid var(--teal); border-radius:14px;
    padding:16px; box-shadow:0 8px 30px rgba(0,0,0,0.3);
    max-width:480px; margin:0 auto;
  }
  .call-overlay h2{margin:0 0 8px;font-size:16px;font-family:'Space Grotesk',sans-serif;}
  .call-overlay .co-row{padding:3px 0;font-size:14px;}
  .call-overlay .co-promise{background:var(--amber-bg);color:#A32D2D;border-radius:8px;padding:6px 10px;margin-top:6px;font-size:13px;}
  .status{
    margin-top:14px;
    padding:12px 14px;
    border-radius:10px;
    font-size:14px;
    background:var(--green-bg);
    color:#1F5C3D;
    display:none;
  }
  .status.show{display:block;}
  .today-log{ margin-top:16px; text-align:left; font-size:13px; color:var(--muted); }
  .today-log .row{
    display:flex; justify-content:space-between;
    padding:4px 0; border-bottom:1px solid var(--line);
  }
  .today-log .row:last-child{border-bottom:none;}
  .emp-row{ padding:12px; font-size:14px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--surface); transition:background 0.4s ease, border-color 0.4s ease; }
  .emp-row:last-child{margin-bottom:0;}
  .emp-row.editing{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
  .emp-row.deleted-row{ opacity:0.6; background:var(--bg); }
  @keyframes empSaveFlash{
    0%{ background:var(--green); border-color:var(--green); }
    100%{ background:var(--green-bg); border-color:var(--green); }
  }
  .emp-row.just-saved{ animation:empSaveFlash 1.1s ease-out forwards; }
  /* Add/edit form: slide-in panel docked to the right on desktop, full
     screen on mobile — never pushes page content around like the old
     inline-accordion version did. */
  #empFormBackdrop{
    position:fixed; inset:0; background:rgba(15,30,28,0.35);
    opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:199;
  }
  #empFormBackdrop.open{ opacity:1; pointer-events:auto; }
  #clientFormBackdrop{
    position:fixed; inset:0; background:rgba(15,30,28,0.35);
    opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:199;
  }
  #clientFormBackdrop.open{ opacity:1; pointer-events:auto; }
  .side-panel{
    position:fixed; top:0; right:0; height:100vh; width:420px; max-width:100vw;
    margin:0; border-radius:0; z-index:200; overflow-y:auto;
    box-shadow:-8px 0 28px rgba(15,30,28,0.18);
    transform:translateX(100%); transition:transform 0.28s ease;
  }
  .side-panel.open{ transform:translateX(0); }
  @media (max-width:720px){
    .side-panel{ width:100vw; }
  }
  .history-entry{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .history-entry:last-child{ border-bottom:none; }
  .history-entry .history-meta{ color:var(--muted); font-size:11.5px; margin-bottom:4px; }
  .history-entry ul{ margin:0; padding-left:18px; }
  .history-entry li{ margin-bottom:2px; }
  .emp-row .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .emp-row .meta{color:var(--muted);font-size:12px;margin-top:2px;}
  .emp-row button.del{ border:none;background:none;color:var(--red);font-size:13px;font-weight:600;cursor:pointer; }
  .confirm-btn{ border:none;border-radius:8px;padding:5px 12px;min-width:74px;font-size:13px;font-weight:600;cursor:pointer;color:#fff;text-align:center; }
  .confirm-btn.yes{ background:var(--green); }
  .confirm-btn.no{ background:var(--red); }
  /* 3x4 (portrait ID-photo proportions) reserved slot, not a round avatar */
  .emp-photo{ width:45px;height:60px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--bg);border:1px solid var(--line); }
  .emp-photo-placeholder{ width:45px;height:60px;border-radius:6px;flex-shrink:0;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted); }
  .emp-pos{ font-size:12.5px;color:var(--muted);margin-top:1px; }
  .emp-badges{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
  .emp-contact{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; padding:7px 10px; background:var(--bg); border-radius:8px; font-size:12.5px; color:var(--muted); }
  .emp-contact span{ display:inline-flex; align-items:center; gap:5px; }
  .emp-assignments{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
  .emp-assignments .assignment-line{ font-size:12.5px; color:var(--muted); padding-left:9px; border-left:2px solid var(--teal); }
  .group-card{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; overflow:hidden; }
  .group-card:last-child{ margin-bottom:0; }
  .group-header{ display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; background:var(--bg); user-select:none; }
  .group-header:hover{ background:var(--line); }
  .group-header .chevron{ color:var(--teal); font-size:11px; width:10px; flex-shrink:0; }
  .group-header .group-name{ flex:1; font-weight:600; font-size:14px; }
  .group-header .group-count{ font-size:12px; color:var(--muted); font-weight:500; flex-shrink:0; }
  .group-body{ padding:0 14px; }
  .group-body .emp-row{ padding-left:6px; }
  .group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); padding:10px 0 4px; }
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .daypicker{ display:flex; gap:6px; margin-bottom:14px; }
  .daypicker label{
    flex:1; text-align:center; padding:8px 0; border:1px solid var(--line); border-radius:8px;
    font-size:12px; font-weight:600; text-transform:none; color:var(--muted);
    background:var(--bg); cursor:pointer; margin-bottom:0;
  }
  .daypicker input{display:none;}
  .daypicker input:checked + label{ background:var(--teal); color:#fff; border-color:var(--teal); }
  .assignment-card{ border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; background:var(--bg); }
  .assignment-card .assignment-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .assignment-card .assignment-head span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  .assignment-card .remove-assignment{ border:none; background:none; color:var(--red); font-size:12px; font-weight:600; cursor:pointer; }
  .assignment-card .daypicker{ margin-bottom:10px; }
  .hide-salary .salary-field{ display:none; }
  table{width:100%;border-collapse:collapse;font-size:12.5px;}
  th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line);}
  th{font-size:10px;text-transform:uppercase;letter-spacing:0.03em;color:var(--muted);font-weight:600;}
  td.mono{font-family:'JetBrains Mono',monospace;}
  .pill{ display:inline-block;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600; }
  /* Счётчик неразобранных на вкладке «Отчёт» (заход 2 очереди, 11.09.2026). Без анимации — решение владельца. */
  .tab-badge{ display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:#C0392B;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:middle;box-sizing:border-box; }
  .tab-badge[hidden]{ display:none; }
  .pill.ok{background:var(--green-bg);color:#1F5C3D;}
  .pill.warn{background:var(--amber-bg);color:#A32D2D;}
  .pill.bad{background:var(--red-bg);color:#8E2E1B;}
  .pill.none{background:var(--bg);color:var(--muted);}
  .review-item{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--surface); overflow:hidden; }
  .review-item.filled{ border-color:var(--teal); }
  .review-item.skipped{ opacity:0.55; }
  .review-item .review-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; cursor:pointer; }
  .review-item .review-head .name{ font-weight:600; }
  .review-item .review-body{ display:none; padding:0 12px 14px; border-top:1px solid var(--line); }
  .review-item.open .review-body{ display:block; }
  .checklist-cat{ margin-top:10px; }
  .checklist-cat .cat-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin-bottom:6px; }
  .checklist-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px dashed var(--line); }
  .checklist-item .cl-choice{ display:flex; gap:10px; white-space:nowrap; }
  .checklist-item .cl-choice label{ font-size:12px; font-weight:400; display:inline-flex; align-items:center; gap:3px; }
  .review-score{ font-size:13px; font-weight:700; margin-top:8px; }
  .review-skip-link{ border:none;background:none;color:var(--muted);font-size:11px;cursor:pointer;text-decoration:underline; }
  .alert-box{ background:var(--red-bg); color:#8E2E1B; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:8px; }
  .quality-entry{ border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:8px; background:var(--surface); }
  .quality-entry .fail-item{ color:#8E2E1B; }
  h2{ font-family:'Space Grotesk',sans-serif; font-size:16px; margin:0 0 12px; color:var(--teal-dark); }
  .hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}
  .empty{ text-align:center;color:var(--muted);font-size:13px;padding:20px 10px; }
  textarea{
    width:100%;min-height:160px;border:1px solid var(--line);border-radius:10px;
    padding:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg);color:var(--ink);
    margin-top:10px;resize:vertical;
  }
  .qr-item{ display:flex;align-items:center;gap:12px; padding:12px 10px; margin-bottom:2px; border-radius:10px; border-left:4px solid transparent; border-bottom:1px solid var(--line); }
  .qr-item:last-child{border-bottom:none;}
  .qr-item.status-ok{ border-left-color:var(--green); background:var(--green-bg); }
  .qr-item.status-warn{ border-left-color:var(--amber); background:var(--amber-bg); }
  .qr-item.status-off{ border-left-color:var(--red); background:var(--red-bg); }
  .qr-item img, .qr-item svg{ width:84px;height:84px;border:1px solid var(--line);border-radius:8px;flex-shrink:0;background:#fff; }
  .qr-item .qr-cb{ width:18px;height:18px;flex-shrink:0; }
  /* Наклейка 60×80 мм (10.09.2026): QR 50 мм, под ним название — префикс мелко,
     участок крупно. Область на экране за кадром, при печати — только она. */
  #qrPrintArea{ position:absolute; left:-10000px; top:0; }
  .qr-label{ width:60mm; height:80mm; box-sizing:border-box; padding:3mm; background:#fff; color:#000; display:flex; flex-direction:column; align-items:center; page:qrlabel; }
  .qr-label svg{ width:50mm; height:50mm; display:block; flex-shrink:0; }
  .qr-label .qr-name{ width:54mm; height:22mm; margin-top:2mm; text-align:center; overflow:hidden; font-family:Arial,Helvetica,sans-serif; line-height:1.15; overflow-wrap:anywhere; }
  .qr-label .qr-prefix{ font-size:8pt; }
  .qr-label .qr-main{ font-size:13pt; font-weight:700; }
  @page qrlabel{ size:60mm 80mm; margin:0; }
  @media print{
    body.qr-printing > *:not(#qrPrintArea){ display:none !important; }
    body.qr-printing #qrPrintArea{ position:static; left:auto; }
    body.qr-printing .qr-label{ page-break-after:always; break-after:page; }
  }
  .qr-item .info{flex:1;min-width:0;}
  .qr-item .info .name{font-weight:600;font-size:14px;}
  .qr-item .copy{
    border:1px solid var(--teal);background:none;color:var(--teal-dark);
    border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;
  }
  .login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--teal-dark);
  }
  .login-box{
    background:var(--surface);
    border-radius:20px;
    padding:32px 28px;
    width:100%;
    max-width:360px;
    box-shadow:0 8px 40px rgba(0,0,0,0.25);
  }
  .login-box .brand{
    margin-bottom:4px;
  }
  .login-box .brand img{
    display:block;
    height:56px;
    width:auto;
  }
  .brand-logo{
    display:inline-block;
    line-height:0;
  }
  .brand-logo img{
    display:block;
    height:37px;
    width:auto;
  }
  .login-box .sub{
    font-size:12px;
    color:var(--muted);
    margin-bottom:24px;
  }
  .login-error{
    background:var(--red-bg);
    color:#8E2E1B;
    padding:10px 14px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:14px;
    display:none;
  }
  .role-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    background:var(--teal);
    color:#fff;
    margin-left:8px;
    vertical-align:middle;
  }
  .audit-row{
    padding:8px 0;
    border-bottom:1px solid var(--line);
    font-size:12px;
  }
  .audit-row:last-child{border-bottom:none;}
  .audit-ts{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;}