:root{
    --navy:#101c30; --green:#17b978; --green-dark:#0e9a63; --ink:#101c30; --sub:#697487;
    --line:#e6e9ef; --bg:#f4f6f9; --card:#ffffff; --amber:#e6a53c; --red:#e5534b;
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html{background:#101c30; scroll-padding-top: env(safe-area-inset-top, 0px); touch-action:manipulation; overscroll-behavior-y:none;}
  *{box-sizing:inherit;}
  html,body{
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-touch-callout:none; /* stops the copy/select popup on long-press */
    overscroll-behavior-y:none;
  }
  input,select,textarea{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default;}
  body{margin:0; font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; touch-action:manipulation;}
  h1,h2,.brand{font-family:'Manrope',sans-serif;}
  #app{max-width:460px; margin:0 auto; min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; background:var(--bg);}

  /* start / login */
  .full{position:relative; background:var(--navy); color:#fff; min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 28px; gap:18px; overflow:hidden;}
  .full .mark{width:64px; height:64px; border-radius:16px; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:34.5px;}
  .full h1{font-size:25px; margin:0;}
  .full h1 .accent{color:var(--green);}
  .full p{color:#c3cbdd; margin:2px 0 0; font-size:15.5px; text-align:center;}
  .full > *{position:relative; z-index:1;}
  .hero-icon{position:relative; width:118px; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
  .hero-icon .glow-blob{position:absolute; width:98px; height:98px; border-radius:38% 62% 55% 45%/45% 40% 60% 55%; background:radial-gradient(circle at 35% 30%, #1f4a3c, #0f2e28 70%); filter:blur(1px); opacity:.9;}
  .hero-icon .hero-mark{position:relative; width:74px; height:74px; border-radius:20px; background:linear-gradient(155deg,#3be0a0,#0e9a63 75%); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 24px rgba(14,154,99,.45), 0 0 30px rgba(45,220,150,.35);}
  .hero-icon .hero-mark svg{width:36px; height:36px; color:#eafff5; stroke-width:2.1;}
  .hero-icon .sparkle{position:absolute; top:2px; right:2px; width:34px; height:34px; color:var(--green); opacity:.9;}
  .role-cards{width:100%; max-width:320px; display:flex; flex-direction:column; gap:12px;}
  .role-card{display:flex; align-items:center; gap:13px; width:100%; padding:14px 14px; border-radius:16px; border:1px solid #263a58; background:#16213a; color:#fff; text-align:left;}
  .role-card.primary{background:linear-gradient(135deg,rgba(23,185,120,.22),rgba(14,60,45,.5)); border-color:rgba(52,214,150,.55);}
  .role-card .rc-icon{width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08);}
  .role-card.primary .rc-icon{background:rgba(52,214,150,.22); color:var(--green);}
  .role-card:not(.primary) .rc-icon{color:#a9b6cf;}
  .role-card .rc-icon svg{width:24px; height:24px; stroke-width:1.9;}
  .role-card .rc-text{flex:1; min-width:0;}
  .role-card .rc-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:16.5px; line-height:1.25;}
  .role-card .rc-sub{font-size:13px; color:#aab6cc; margin-top:2px; line-height:1.3;}
  .role-card .rc-arrow{width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#242f47; color:#fff;}
  .role-card.primary .rc-arrow{background:var(--green); color:#08301f;}
  .role-card .rc-arrow svg{width:18px; height:18px; stroke-width:2.4;}
  .hill-deco{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:0; pointer-events:none;}
  .pin-dots{display:flex; gap:14px; margin:6px 0;}
  .pin-dots span{width:14px; height:14px; border-radius:50%; border:2px solid #3a4a67;}
  .pin-dots span.filled{background:var(--green); border-color:var(--green);}
  .keypad{display:grid; grid-template-columns:repeat(3,74px); gap:14px;}
  .keypad button{width:74px; height:74px; border-radius:50%; border:1px solid #2a3a56; background:#182848; color:#fff; font-size:26px; font-family:'Manrope',sans-serif; font-weight:600;}
  .keypad button.ghost{background:#182848; border:1.5px solid #5c76a8; color:#e6ebf5; font-size:13.5px; border-radius:50%;}
  .login-error{color:#ff8a80; font-size:14px; min-height:16px;}
  .back-fab{position:absolute; top:calc(20px + env(safe-area-inset-top,0px)); left:18px; display:flex; align-items:center; gap:6px; padding:9px 16px 9px 13px; border-radius:22px; border:1.5px solid #5c76a8; background:#22335a; color:#fff; font-size:14px; font-family:'Manrope',sans-serif; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .back-fab .arrow{font-size:17.5px; line-height:1;}
  .back-fab:active{background:#2c4270;}

  /* shell */
  /* The page's own :root already reserves env(safe-area-inset-top) as padding on
     <html>, so header content already starts below the notch/status bar — adding
     the inset again here on top of that just pushed the navy bar's content down
     by a second, redundant helping of blank space. */
  header{background:var(--navy); color:#fff; padding:18px 20px 16px; display:flex; justify-content:space-between; align-items:flex-start;}
  header .hi{font-size:16px; font-weight:700; font-family:'Manrope',sans-serif;}
  header .role{font-size:15px; color:#c3cbdd; margin-top:2px;}
  header .store-line{display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-width:0; font-size:15px; font-weight:700; color:var(--green); margin-top:4px; font-family:'Manrope',sans-serif;}
  header .store-line .store-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .edit-name-btn{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:rgba(23,185,120,.18); color:var(--green); flex-shrink:0;}
  .edit-name-btn svg{width:13px; height:13px;}
  header button{background:none; border:none; color:#9aa6bb; font-size:13px; font-family:'Inter',sans-serif;}
  .hdr-actions{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;}
  .hdr-btn{border:1px solid #2a3a56; border-radius:8px; padding:6px 11px !important; font-size:12.5px !important;}
  .hdr-btn.pin{color:#cfd8e8;}
  .hdr-btn.logout{color:#ff9a90; border-color:#5b2a2a;}
  main{flex:1; padding:16px 16px 90px;}
  /* A faint silvery-gray fill (not stark white, not a bold color) with a soft metallic
     gradient, so the bar reads as its own surface without competing with the page. */
  nav.tabbar{position:fixed; bottom:0; left:0; right:0; background:linear-gradient(180deg,#eef0f4,#cfd3dc); border-top:1px solid #c3c8d3; border-radius:18px 18px 0 0; box-shadow:0 -6px 18px rgba(16,28,48,.14); display:flex; max-width:460px; margin:0 auto; padding-bottom: env(safe-area-inset-bottom, 0px);}
  nav.tabbar button{flex:1; border:none; background:none; padding:11px 0 10px; font-size:13px; color:#4b566b; font-family:'Inter',sans-serif; font-weight:600;}
  nav.tabbar button.on{color:var(--green-dark); font-weight:700;}
  nav.tabbar .ic{display:flex; align-items:center; justify-content:center; width:40px; height:28px; margin:0 auto 3px; border-radius:10px; color:#8993a8; transition:background-color .15s;}
  nav.tabbar .ic svg{width:23px; height:23px; display:block;}
  /* Each tab gets its own resting icon color instead of flat gray, so the bar reads
     as a set of distinct sections at a glance — the active tab still overrides this
     with the green highlight below. */
  nav.tabbar button[data-tab="dash"] .ic, nav.tabbar button[data-tab="home"] .ic{color:#17b978;}
  nav.tabbar button[data-tab="staff"] .ic{color:#4c7bf0;}
  nav.tabbar button[data-tab="sched"] .ic, nav.tabbar button[data-tab="schedule"] .ic{color:#f2994a;}
  nav.tabbar button[data-tab="fines"] .ic{color:#eb5757;}
  nav.tabbar button[data-tab="pay"] .ic{color:#9b6dff;}
  nav.tabbar button[data-tab="history"] .ic{color:#14b8a6;}
  nav.tabbar button.on .ic{color:var(--green-dark); background:#e4f9ef;}

  /* shared bits */
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
  .stat{background:var(--card); border-radius:14px; padding:14px; box-shadow:0 1px 2px rgba(16,28,48,.05);}
  .stat .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:20.5px;}
  .stat .l{font-size:13px; color:var(--sub); margin-top:2px;}
  .stat.on .n{color:var(--green-dark);} .stat.pay .n{color:var(--green-dark);}
  /* Dashboard "Сегодня" stats: a colored icon bubble per tile instead of plain
     numbers, plus a small heading with today's date above the grid. */
  .dash-hdr{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .dash-hdr .title{display:flex; align-items:baseline; gap:8px; font-size:18px; font-weight:800; font-family:'Manrope',sans-serif; color:#000;}
  .dash-hdr .date{font-size:18px; color:#000; font-weight:800;}
  .dash-geo-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--green-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .dash-geo-btn svg{width:24px; height:24px;}
  .dash-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
  .dash-stat{background:var(--card); border-radius:14px; padding:14px; box-shadow:0 1px 2px rgba(16,28,48,.05); display:flex; align-items:center; gap:11px;}
  /* A faint tint per tile — a different, low-saturation wash of each icon's own
     color — so the four cards read apart from one glance without shouting. */
  .dash-stat.st-on{background:#eafbf1;}
  .dash-stat.st-total{background:#eaf2fd;}
  .dash-stat.st-fine{background:#fdecec;}
  .dash-stat.st-shifts{background:#f1ecfc;}
  .dash-stat.st-noshow{background:#fdeeea;}
  .dash-stat .icon.i-noshow{background:#f8cec6;}
  .dash-stat.clickable{cursor:pointer; user-select:none;}
  .dash-stat.clickable:active{opacity:.85;}
  .dash-stat .icon{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
  .dash-stat .icon.i-on{background:#d2f2e0;}
  .dash-stat .icon.i-total{background:#d5e4fb;}
  .dash-stat .icon.i-fine{background:#f9d5d1;}
  .dash-stat .icon.i-shifts{background:#ddd0f6;}
  .dash-stat .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:19px;}
  .dash-stat .l{font-size:13.5px; color:var(--ink); font-weight:600; margin-top:1px;}
  /* Pill-style status badges for completed shifts, matching a green "done" and a
     red "closed manually" look instead of plain colored text. */
  .status-pill{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap;}
  .status-pill.ok{background:#e4f9ef; color:var(--green-dark);}
  .status-pill.manual{background:#fbe4e2; color:#c0392b;}
  section.block{margin-top:20px;}
  section.block h2{font-size:15px; margin:0 0 10px 2px;}
  .empwrap{background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(16,28,48,.05);}
  .emp{display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .emp:last-child{border-bottom:none;}
  .avatar{width:34px; height:34px; border-radius:50%; background:#eef1f6; display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; color:var(--navy); flex-shrink:0; overflow:hidden;}
  .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
  .av-content{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
  .avatar-big{width:56px; height:56px; font-size:19.5px; position:relative; cursor:pointer; flex-shrink:0;}
  .avatar-big .cam{position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:11px; border:2px solid var(--navy);}
  .hdr-top{display:flex; align-items:center; gap:12px; min-width:0; flex:1;}
  .hdr-top-text{min-width:0;}
  .emp .info{flex:1; min-width:0;} .emp .nm{font-size:14.5px; font-weight:600;} .emp .rl{font-size:14px; color:#4b566b; margin-top:2px;}
  .emp .rl.big{font-size:15px; color:var(--ink); font-weight:600; margin-top:2px;}
  .emp .right{text-align:right; flex-shrink:0;} .emp .dur,.emp .pay{font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;}
  .emp .pay{color:var(--green-dark);}
  .emp .pay.neg{color:#8c231d;}
  .advance-summary{margin-top:8px; padding:12px 16px; background:#fff8ec; border-radius:12px; font-size:14.5px; line-height:1.5; font-weight:600; color:#8a6414; text-align:right;}
  .advance-summary b{color:var(--green-dark); font-family:'Manrope',sans-serif;}
  .settle-badge{display:inline-block; margin-top:6px; padding:5px 14px; border-radius:20px; border:1.5px solid #d8b45a; background:#fff; font-weight:800; color:#8a6414; font-size:12.5px;}
  .settle-badge.done{border-color:var(--green-dark); background:#eef8f1; color:var(--green-dark);}
  .advance-summary b.neg{color:#8c231d;}
  .pay-breakdown{border-top:1px dashed var(--line); margin-top:10px; padding-top:10px;}
  .pb-row{display:flex; justify-content:space-between; align-items:center; font-size:15px; color:var(--sub); padding:5px 0;}
  /* Give each breakdown line its own outlined box so "Начислено"/"Аванс"/"Штраф" stand
     out clearly from one another instead of blending into a plain list — a darker,
     thicker border and bolder, higher-contrast text make the boxes easy to spot. */
  .pb-row:not(.total){border:2px solid #aab2c2; border-radius:9px; padding:9px 10px; margin-bottom:6px; background:#fbfcfe; color:var(--ink); font-weight:600;}
  .pb-row.adv:not(.total){border-color:#c76960;}
  .pb-row.adv b{font-weight:800;}
  .pb-row.earn{border-color:var(--green-dark);}
  .pb-row.earn b{color:var(--ink); font-weight:800;}
  /* Штрафы: sized up a bit from the shared .emp/.pb-row defaults so the row and the
     fine's date/reason/amount line are easier to read at a glance. */
  #finesMain .nm{font-size:16px;}
  #finesMain .rl{font-size:15.5px;}
  #finesMain .pay{font-size:17px;}
  #finesMain .pb-row{font-size:15px;}
  /* Employee's own Штрафы tab and the Смены-screen breakdown: sized up further so
     the fine/advance rows and the summary line are easy to read at a glance. */
  .emp-fines-block .pb-row{font-size:16.5px; padding:11px 12px;}
  .emp-fines-block .advance-summary{font-size:16.5px;}
  .emp-history-block .advance-summary{font-size:16.5px;}
  .pb-row b{color:var(--ink); font-weight:600;}
  .pb-row.adv b{color:#8c231d; display:flex; align-items:center; gap:6px;}
  .pb-row.total{border-top:1px solid var(--line); margin-top:4px; padding-top:8px;}
  .pb-row.total span{font-weight:600; color:var(--ink); font-size:14px;}
  .pb-row.total b{font-size:16px; color:var(--green-dark); font-family:'Manrope',sans-serif;}
  .pb-row.total b.neg{color:#8c231d;}
  .adv-del{border:none; background:none; color:#8c231d; font-size:13.5px; cursor:pointer; padding:0 2px;}
  .advance-form{display:flex; gap:8px; margin-top:12px;}
  .advance-form input{flex:1; min-width:0; padding:9px 10px; border-radius:9px; border:1px solid var(--line); font-size:16px;}
  .advance-form button{padding:9px 14px; border-radius:9px; border:none; background:var(--navy); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; flex-shrink:0;}
  .payout-btn{width:100%; margin-top:12px; padding:12px; border-radius:10px; border:none; background:var(--green); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;}
  .payout-status{margin-top:12px; padding:10px 12px; background:#eef8f1; border-radius:10px; font-size:15.5px; color:var(--green-dark); font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .payout-undo{border:none; background:none; color:#8c231d; font-size:13.5px; font-weight:700; cursor:pointer; padding:0 2px; flex-shrink:0;}
  .payout-other-btn{width:100%; margin-top:8px; padding:9px; border-radius:9px; border:1px dashed #c7cfdc; background:transparent; color:var(--sub); font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px;}
  .st.active{color:var(--green-dark);} .st.done{color:var(--sub);} .st.stale{color:var(--amber); display:inline;}
  .st.overdue{color:#8c231d; font-weight:700; line-height:1.25; margin-top:2px;}
  .st.done.ok{color:var(--green-dark); font-weight:600;} .st.done.manual{color:#8c231d; font-weight:600;}
  .empty{color:var(--sub); font-size:14px; text-align:center; padding:24px 0;}
  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:200;}
  .toast.show{opacity:1;}
  .avatar.has-photo{cursor:pointer;}
  .lightbox{position:fixed; inset:0; background:rgba(16,28,48,.92); display:none; align-items:center; justify-content:center; flex-direction:column; z-index:100; padding:24px;}
  .lightbox.show{display:flex;}
  .lightbox img{max-width:88vw; max-height:70vh; border-radius:16px; object-fit:cover; box-shadow:0 8px 30px rgba(0,0,0,.4);}
  .lightbox .lb-name{color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; margin-top:14px;}
  .lightbox .lb-close{position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:17.5px;}
  .confirm-modal{position:fixed; inset:0; background:rgba(16,28,48,.55); display:none; align-items:center; justify-content:center; z-index:110; padding:24px;}
  .confirm-modal.show{display:flex;}
  .confirm-box{background:#fff; border-radius:16px; padding:20px; max-width:320px; width:100%; box-shadow:0 10px 40px rgba(0,0,0,.25);}
  .confirm-msg{font-size:15px; color:var(--ink); line-height:1.5; margin-bottom:16px;}
  .confirm-actions{display:flex; gap:10px;}
  .confirm-actions button{flex:1; padding:11px; border-radius:10px; border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;}
  .confirm-no{background:#eef1f6; color:var(--sub);}
  .confirm-no.solo{background:#8c231d; color:#fff;}
  .confirm-yes{background:var(--red); color:#fff;}
  .loc-modal{position:fixed; inset:0; background:rgba(16,28,48,.6); display:none; align-items:center; justify-content:center; z-index:120; padding:20px;}
  .loc-modal.show{display:flex;}
  .loc-box{background:#fff; border-radius:20px; padding:20px; max-width:360px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,.3);}
  .loc-hdr{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .loc-hdr h2{font-size:17px; margin:0; font-family:'Manrope',sans-serif; font-weight:800; color:var(--ink);}
  .loc-close{width:30px; height:30px; border-radius:50%; border:none; background:#eef1f6; color:var(--sub); font-size:15px; flex-shrink:0;}
  .loc-map{position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; background:linear-gradient(#eef2f7,#e4e9f1); overflow:hidden; margin-bottom:12px; border:1px solid var(--line);}
  .loc-grid{position:absolute; inset:0; background-image:linear-gradient(#d7dee8 1px, transparent 1px), linear-gradient(90deg, #d7dee8 1px, transparent 1px); background-size:24px 24px;}
  .loc-ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(23,185,120,.15); border:2px dashed var(--green-dark); transition:width .2s, height .2s; width:20%; height:20%;}
  .loc-pin{position:absolute; top:50%; left:50%; transform:translate(-50%,-92%); color:#c0392b; width:32px; height:32px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));}
  .loc-pin svg{width:100%; height:100%;}
  .loc-info{font-size:13px; color:var(--sub); margin-bottom:14px; text-align:center; line-height:1.4;}
  .loc-radius-label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px;}
  .loc-radius-label b{color:var(--green-dark);}
  input#locRadiusSlider{width:100%; margin-bottom:16px; accent-color:var(--green-dark);}
  .loc-btn{width:100%; padding:13px; border-radius:12px; border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; margin-bottom:10px;}
  .loc-btn.primary{background:var(--green); color:#fff;}
  .loc-btn.save{background:var(--navy); color:#fff;}
  .loc-hint{font-size:12.5px; color:var(--sub); text-align:center; line-height:1.4; margin-top:2px;}
  .loc-manual-toggle{width:100%; background:none; border:none; color:var(--green-dark); font-size:13px; font-weight:700; text-decoration:underline; padding:12px 0 2px; font-family:'Inter',sans-serif;}
  .loc-manual-form{display:none; margin-top:10px; padding-top:12px; border-top:1px solid var(--line);}
  .loc-manual-form.open{display:block;}
  .loc-manual-form .loc-manual-hint{font-size:12.5px; color:var(--sub); line-height:1.4; margin-bottom:10px;}
  .loc-manual-form .row2{display:flex; gap:8px;}
  .loc-manual-form input{flex:1; min-width:0; padding:11px; border-radius:10px; border:1px solid var(--line); font-size:14px; font-family:'Inter',sans-serif;}
  .close-btn{margin-left:auto; padding:7px 12px; border-radius:9px; border:1px solid #7a1f1a; background:#8c231d; color:#fff; font-size:13px; font-weight:600; flex-shrink:0;}
  .close-btn.warn{border-color:#f3dfb1; color:#b07a1f;}
  .stale-wrap{background:#fff8ec; border:1px solid #f3dfb1; border-radius:14px; overflow:hidden;}
  .stale-wrap .emp{border-bottom-color:#f3dfb1;}
  .close-form{display:none; width:100%; padding:12px 0 2px; border-top:1px dashed #f3dfb1; margin-top:8px;}
  .close-form.open{display:block;}
  .close-form .row2{display:flex; gap:8px;}
  .close-form input{flex:1; padding:9px 10px; border-radius:9px; border:1px solid var(--line); font-size:16px;}
  .close-form .actions{display:flex; gap:8px; margin-top:9px;}
  .close-form button{flex:1; padding:10px; border-radius:9px; border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;}
  .close-form .save{background:var(--green); color:#fff;} .close-form .cancel{background:#eef1f6; color:var(--sub);}

  /* employee status card */
  .sched-note{background:var(--card); border-radius:14px; padding:13px 16px; margin-bottom:12px; font-size:15px; color:#4b566b; box-shadow:0 1px 2px rgba(16,28,48,.05);}
  .sched-note b{color:var(--ink);}
  .sched-note.off{background:#fff8ec; color:#8a6414;} .sched-note.off b{color:#8a6414;}
  .status-card{background:var(--card); border-radius:18px; padding:24px 20px; text-align:center; box-shadow:0 1px 2px rgba(16,28,48,.06);}
  .status-card .badge{display:inline-block; font-size:13px; font-weight:600; padding:5px 12px; border-radius:20px; margin-bottom:14px;}
  .badge.idle{background:#eef1f6; color:var(--sub);} .badge.active{background:#e4f9ef; color:var(--green-dark);}
  .badge.overdue{background:#f6dcd9; color:#8c231d;}
  .badge.fired{background:#f6dcd9; color:#8c231d;}
  .timer{font-family:'Manrope',sans-serif; font-size:41px; font-weight:800;}
  .timer-label{color:var(--sub); font-size:14px; margin-top:4px;}
  .action-btn{width:100%; margin-top:20px; padding:16px; border:none; border-radius:14px; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:#fff;}
  .action-btn.start{background:var(--green);} .action-btn.end{background:var(--navy);} .action-btn:disabled{opacity:.55;}
  .geo-note{font-size:14px; color:#4b566b; margin-top:10px;}
  .row{background:var(--card); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .row .day{font-size:16px; font-weight:700;} .row .day.today{color:var(--green-dark);} .row .times{font-size:13px; color:var(--sub); margin-top:2px;} .row .dur{font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;}
  .row .times.big{font-size:16.5px; color:var(--ink); font-weight:600; margin-top:4px;}
  .row .times.sub{font-size:14.5px; color:var(--ink); font-weight:600; margin-top:3px;}
  .rate-tag{color:var(--green-dark); font-weight:700;}
  .total-row.pay .n{color:var(--green);}
  .total-row.pay.neg .n{color:#e5807a;}
  .dur-status{font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; text-align:right; flex-shrink:0; margin-left:10px;}
  .st-ongoing{color:var(--green-dark);}
  .st-done{color:var(--green-dark);}
  .st-early{color:#8c231d;}

  /* employees/roles/schedule/payroll forms */
  .fot{background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center;}
  .fot .l{font-size:13px; color:var(--sub);} .fot .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:19.5px; margin-top:2px;}
  .row-click{cursor:pointer;}
  .editForm{display:none; width:100%; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .editForm.open{display:block;}
  .field{margin-bottom:10px; width:100%;}
  .field label{display:block; font-size:12.5px; color:var(--sub); margin-bottom:4px;}
  .field input,.field select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); font-size:16px; background:#fbfcfe;}
  .role-new{display:none; margin-top:8px;} .role-new.show{display:block;}
  .form-actions{display:flex; gap:8px; margin-top:12px; width:100%;}
  .form-actions button{flex:1; padding:11px; border-radius:10px; border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;}
  .btn-save{background:var(--green); color:#fff;} .btn-delete{background:#fdeceb; color:var(--red);}
  .add-btn{width:100%; margin-top:14px; padding:14px; border-radius:14px; border:1.5px dashed #c7cfdc; background:transparent; color:var(--sub); font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;}
  .addForm{display:none; background:var(--card); border-radius:14px; padding:16px; margin-top:14px;}
  .addForm.open{display:block;}
  .week{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .week button{width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:16px;}
  .week button:disabled{opacity:.35;}
  .week .label{font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;}
  .tabs{display:flex; gap:6px; overflow-x:auto; margin-bottom:12px;}
  .tabs button{flex-shrink:0; padding:7px 13px; border-radius:20px; border:1px solid var(--line); background:var(--card); font-size:13.5px; color:var(--sub);}
  .tabs button.on{background:var(--navy); color:#fff; border-color:var(--navy);}
  .week-dots{display:flex; gap:9px; background:#f2f4f8; border-radius:14px; padding:7px 10px 6px;}
  .week-dots .wd{display:flex; flex-direction:column; align-items:center; gap:5px;}
  .week-dots .wd-label{font-size:13px; line-height:1; color:var(--ink); font-family:'Manrope',sans-serif; font-weight:800;}
  .week-dots .wd-label.today{color:#e8630c;}
  .week-dots span:not(.wd-label){width:11px; height:11px; border-radius:50%; background:#d8dfe9; display:block;}
  .week-dots span.work{background:var(--green);}
  .week-dots span.off{background:var(--red);}
  .days{display:none; width:100%; border-top:1px solid var(--line); padding-top:6px; margin-top:8px;}
  .days.open{display:block;}
  .day-row{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #f0f2f6;}
  .day-row .dname{width:46px; font-size:13.5px; font-weight:600; flex-shrink:0;}
  .day-row .dname.today{color:var(--green-dark);}
  .day-row input[type=time]{width:84px; padding:6px 5px; border-radius:8px; border:1px solid var(--line); font-size:16px;}
  .day-row .dash{color:var(--sub); font-size:13px;}
  .day-row label.off{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--sub); margin-left:auto; flex-shrink:0;}
  .save-row{margin-top:10px; text-align:right; width:100%;}
  .save-row button{padding:9px 16px; border-radius:9px; border:none; background:var(--green); color:#fff; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;}
  .chev{color:var(--sub); font-size:12px; margin-left:4px;}
  .total-row{display:flex; justify-content:space-between; align-items:center; padding:15px 16px; background:var(--navy); border-radius:14px; margin-top:14px; color:#fff;}
  .total-row .l{font-size:14px; color:#9aa6bb;} .total-row .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:19.5px;}

/* ---- режим «Администратор»: только просмотр ---- */
.role-card.viewer .rc-icon{color:#9db4d6;}
body.ro [data-close],body.ro [data-open-close],body.ro [data-void],body.ro [data-start-for],body.ro [data-start-shift],
body.ro [data-save],body.ro [data-save-close],body.ro [data-del],body.ro [data-restore],body.ro [data-purge],
body.ro #addToggle,body.ro #addForm,body.ro .advance-form,body.ro [data-fine-add],body.ro [data-fine-del2],
body.ro [data-adv-del],body.ro [data-fine-del],body.ro [data-shift-del],body.ro [data-payout],body.ro [data-payout-other],
body.ro [data-payout-undo],body.ro .save-row,body.ro #dashLocBtn,body.ro #list .editForm,body.ro #archivedList .editForm,
body.ro .cam,body.ro #payList .editForm .form-actions{display:none !important;}
body.ro .days input{pointer-events:none;}

/* крупнее списки «Штрафы сегодня» и «Опоздавшие» на главной */
#finesList .emp,#lateList .emp{padding:15px 14px;}
#finesList .emp .nm,#lateList .emp .nm{font-size:18px; font-weight:700;}
#finesList .emp .rl,#lateList .emp .rl{font-size:16px;}
#finesList .status-pill,#lateList .status-pill{font-size:15.5px; padding:6px 12px;}
#lateList .emp .info{flex:1 1 calc(100% - 60px);}
#lateList .emp .right{flex:1 1 100%; text-align:left; padding-left:56px; margin-top:-2px;}

/* ---- режим ярлыка на главном экране (iPhone/Android standalone) ----
   В этом режиме отступы под вырез и часы задаём самим элементам, а не html,
   чтобы не было двойного отступа и светлых полос внизу. */
@media (display-mode: standalone){
  :root, html{padding-top:0; padding-bottom:0;}
  #app, .full{min-height:100dvh;}
  .full{padding-top:calc(env(safe-area-inset-top,0px) + 32px); padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px);}
  header{padding-top:calc(max(env(safe-area-inset-top,0px), 48px) + 10px);}
}

/* стартовый экран: фон страницы тёмный, чтобы снизу не было светлой полосы */
body:has(.full){background:var(--navy);}
html:has(.full){background:var(--navy);}

/* ярлык: светлая полоса под панелью вкладок (вне области страницы) — красим в цвет низа панели */
@media (display-mode: standalone){
  html{background:#cfd3dc;}
  html:has(.full){background:var(--navy);}
}

/* ярлык: опускаем иконки и подписи панели вкладок ближе к низу экрана */
@media (display-mode: standalone){
  nav.tabbar button{padding:20px 0 8px;}
}

/* ярлык (iPhone): панель вкладок сплошного цвета, без градиента, и продлена вниз,
   чтобы под ней не просвечивала светлая полоса (зона безопасности снизу) */
@media (display-mode: standalone){
  nav.tabbar{background:#dfe2e9; box-shadow:0 -6px 18px rgba(16,28,48,.14), 0 80px 0 0 #dfe2e9; margin-bottom:-80px; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 80px);}
  html{background:#dfe2e9;}
  html:has(.full){background:var(--navy);}
}

/* крупнее стрелки раскрытия (▾) и кнопки удаления (✕), больше область нажатия */
.chev{font-size:20px; line-height:1; padding:6px 8px; min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center;}
.adv-del{font-size:20px; line-height:1; padding:8px 12px; min-width:40px; min-height:40px;}

/* «Сейчас на смене» (управляющий): на Android строки наезжали друг на друга.
   Сетка: аватар | имя и роль | время и статус, кнопка «Завершить» — на всю ширину снизу. */
#activeList .emp{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 12px; flex-wrap:nowrap;}
#activeList .emp .info{min-width:0; overflow-wrap:anywhere;}
#activeList .emp .right{text-align:right; white-space:nowrap;}
#activeList .emp .close-btn{grid-column:1 / -1; margin-left:0; width:100%; padding:11px 12px; font-size:15px;}

/* Главная управляющего на Android: правая колонка плиток уходила за край экрана.
   Колонки сжимаются до ширины экрана, а текст переносится внутри плитки. */
.dash-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.dash-stat{min-width:0; padding:12px;}
.dash-stat > div:last-child{min-width:0;}
.dash-stat .l{overflow-wrap:anywhere; line-height:1.25;}
.dash-stat .icon{flex-shrink:0;}

/* iPhone: иконки и подписи панели вкладок ниже (свободное место под подписями остаётся внизу) */
@supports (-webkit-touch-callout: none){
  nav.tabbar button{padding:30px 0 4px;}
}

/* Зарплата (управляющий): имя и ставка крупнее, ставка зелёная */
#payList .emp .info .nm{font-size:18px; font-weight:700;}
#payList .emp .info .rl{font-size:16px; margin-top:4px;}
#payList .emp .info .rl .rate-tag{color:var(--green-dark); font-weight:700; font-size:16px;}

/* Смены в истории: «Закрыто вручную» и «Удалить смену» одного размера */
.dur-status .st-early, .dur-status .st-done{font-size:15px; font-weight:700;}
.dur-status .adv-del{font-size:15px; line-height:1.2; padding:0; min-width:0; min-height:0; font-weight:700;}
.dur-status .st-early{color:#8c231d;}

/* Смены в зарплате: время начала и конца — тёмное и крупнее, «Отработано» ниже, «Удалить смену» в рамке */
.editForm .row .times:not(.sub){color:var(--ink); font-size:16.5px; font-weight:600;}
.editForm .row .times.sub{margin-top:10px;}
.editForm .row .dur-val{display:block; margin-top:6px; font-size:16.5px; color:var(--ink); font-weight:700;}
.dur-status .adv-del{border:1.5px solid #8c231d; border-radius:9px; padding:5px 10px; margin-top:8px;}