:root{--navy:#071923;--navy2:#0b2430;--cyan:#11bde9;--blue:#1685d1;--ink:#14242c;--muted:#6b7d86;--line:#dfe8ec;--surface:#fff;--bg:#f3f7f8;--green:#20b879;--amber:#f5a524;--red:#ef5b68;--shadow:0 18px 50px rgba(16,42,52,.08)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--ink);background:var(--bg);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}.ambient{position:fixed;border-radius:50%;filter:blur(80px);opacity:.15;pointer-events:none}.ambient-one{width:420px;height:420px;background:#28c6e9;right:-180px;top:-180px}.ambient-two{width:300px;height:300px;background:#6577ff;left:10%;bottom:-200px}.app{min-height:100vh;display:grid;grid-template-columns:244px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:34px 24px 24px;background:linear-gradient(180deg,#061923,#0a2531);display:flex;flex-direction:column;color:white;z-index:3}.brand{display:block;width:174px;height:70px}.brand img{width:100%;height:100%;object-fit:contain}.nav{display:grid;gap:8px;margin-top:50px}.nav-item{width:100%;height:48px;padding:0 16px;border:0;border-radius:12px;background:transparent;color:#8daab5;text-align:left;font-weight:700}.nav-item span{display:inline-grid;place-items:center;width:28px;margin-right:8px}.nav-item.active,.nav-item:hover{color:white;background:rgba(26,188,229,.13)}.sidebar-foot{margin-top:auto}.mini-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04)}.mini-card strong,.mini-card small{display:block}.mini-card strong{font-size:13px}.mini-card small{margin-top:2px;color:#7897a3;font-size:11px}.pulse{width:9px;height:9px;border-radius:50%;background:#20d58b;box-shadow:0 0 0 5px rgba(32,213,139,.1)}.mode-link{width:100%;margin-top:14px;padding:10px;border:0;background:transparent;color:#7ba6b5;font-weight:700;font-size:12px}.main{min-width:0;padding:48px clamp(28px,5vw,72px) 80px}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:1300px;margin:auto}.kicker{margin:0 0 8px;color:#169cc3;font-family:Manrope,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em}.hero h1{margin:0;font:800 clamp(29px,4vw,44px)/1.1 Manrope,sans-serif;letter-spacing:-.04em}.hero p:last-child{margin:9px 0 0;color:var(--muted)}.hero-actions{display:flex;gap:10px}.button{min-height:46px;padding:0 20px;border-radius:12px;border:1px solid var(--line);font-weight:800;font-size:13px}.button.primary{border-color:var(--cyan);background:linear-gradient(135deg,#10bde9,#1687d2);color:white;box-shadow:0 10px 24px rgba(17,189,233,.22)}.button.secondary{background:white;color:var(--ink)}.weekbar{max-width:1300px;margin:35px auto 0;min-height:70px;padding:12px 16px;display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.86);box-shadow:0 4px 24px rgba(18,47,59,.04)}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:11px;background:white;color:#38515d;font-size:18px}.week-label{display:flex;flex-direction:column}.week-label span{font-size:9px;font-weight:800;color:#99a8ae;letter-spacing:.14em}.week-label strong{margin-top:3px;font:700 14px Manrope}.save-state{display:flex;align-items:center;gap:8px;margin-left:auto;color:#7d8f97;font-size:12px;font-weight:600}.save-state>span:first-child{width:7px;height:7px;border-radius:50%;background:var(--green)}.save-state>span.busy{background:var(--amber);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}.stats{max-width:1300px;margin:20px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats article{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid var(--line);border-radius:15px;background:white}.stats strong,.stats small{display:block}.stats strong{font:800 22px Manrope}.stats small{margin-top:1px;color:var(--muted);font-size:11px;font-weight:600}.stat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;font-weight:800}.stat-icon.cyan{color:#079cc4;background:#e8f9fd}.stat-icon.violet{color:#7457e9;background:#f0edff}.stat-icon.pink{color:#d94c8d;background:#ffedf5}.stat-icon.orange{color:#e48b14;background:#fff4df}.content{max-width:1300px;margin:24px auto 0}.section-head,.staff-toolbar{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}.section-head h2{margin:0;font:800 21px Manrope}.section-head>span,.text-button{color:var(--muted);font-size:12px}.text-button,.back-button{border:0;background:transparent;font-weight:700;color:#168fb8}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.person-card{display:flex;align-items:center;gap:14px;min-height:98px;padding:18px;border:1px solid var(--line);border-radius:17px;background:white;text-align:left;box-shadow:0 2px 2px rgba(20,45,55,.01);transition:.18s}.person-card:hover{border-color:#89d9ec;transform:translateY(-2px);box-shadow:var(--shadow)}.person-card strong,.person-card small{display:block}.person-card strong{font:800 15px Manrope}.person-card small{margin-top:4px;color:var(--muted);font-size:11px}.person-card b{margin-left:auto;color:#a8b7bd}.avatar{display:grid;place-items:center;flex:0 0 auto;width:51px;height:51px;border-radius:15px;background:color-mix(in srgb,var(--avatar),white 84%);color:var(--avatar);font:800 18px Manrope}.help-card{display:flex;gap:14px;margin-top:20px;padding:17px 20px;border:1px solid #d7edf3;border-radius:15px;background:#eef9fc}.help-card>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#c9eff7;color:#168cac;font-weight:800}.help-card strong{font-size:12px}.help-card p{margin:3px 0 0;color:#66818c;font-size:11px}.days-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.day-card{border:1px solid var(--line);border-radius:17px;background:white;overflow:hidden}.day-top{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eaf0f2}.day-top strong,.day-top span{display:block}.day-top strong{font:800 15px Manrope}.day-top span{color:var(--muted);font-size:11px}.day-top em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;color:#9aabb2}.availability-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 18px}.availability-row+.availability-row{border-top:1px solid #edf2f4}.shift-info{display:flex;align-items:center;gap:10px;min-width:154px}.shift-info>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#edf9fc;color:#139dc3}.shift-info strong,.shift-info small{display:block}.shift-info strong{font-size:11px}.shift-info small{color:#91a0a6;font-size:9px}.status-control{display:flex;gap:5px}.status-control button{width:42px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fafcfc;color:#9aabb1}.status-control i{font-style:normal;font-weight:800}.status-control span{display:none}.status-control button[aria-pressed=true][data-status=available]{border-color:#78d7b2;background:#e9faf3;color:#159863}.status-control button[aria-pressed=true][data-status=maybe]{border-color:#f4ca76;background:#fff7e6;color:#d78b0d}.status-control button[aria-pressed=true][data-status=off]{border-color:#f2a1a8;background:#fff0f1;color:#df4855}.legend{display:flex;gap:13px;color:#788c95;font-size:10px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:50%}.green{background:var(--green)}.amber{background:var(--amber)}.red{background:var(--red)}.submit-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:18px 20px;border-radius:16px;background:var(--navy);color:white}.submit-bar strong,.submit-bar span{display:block}.submit-bar strong{font-size:13px}.submit-bar span{margin-top:2px;color:#75929d;font-size:10px}.closed-day{background:#f8fafb}.closed-message{min-height:85px;display:grid;place-content:center;text-align:center}.closed-message b,.closed-message span{display:block}.closed-message b{font-size:12px;color:#70858e}.closed-message span{font-size:10px;color:#9aabb1}.manager-days{display:grid;gap:11px}.manager-day{display:grid;grid-template-columns:82px 1fr 190px;gap:18px;align-items:center;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:white}.manager-date b,.manager-date span{display:block}.manager-date b{font:800 15px Manrope}.manager-date span{color:var(--muted);font-size:11px}.manager-shifts{display:grid;gap:10px}.manager-shift{display:grid;grid-template-columns:180px minmax(180px,1fr) auto;align-items:center;gap:12px}.manager-shift+.manager-shift{padding-top:10px;border-top:1px solid #edf2f4}.shift-title{display:flex;align-items:center;gap:9px}.shift-title>span{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#edf9fc;color:#149fc5}.shift-title b,.shift-title small{display:block}.shift-title b{font-size:11px}.shift-title small{color:#91a0a6;font-size:9px}.manager-shift select,.note-field input,.edit-block input{height:42px;border:1px solid var(--line);border-radius:10px;background:#fafcfc;color:var(--ink);padding:0 11px;font-size:11px;font-weight:600}.availability-dots{display:flex}.dot{display:grid;place-items:center;width:26px;height:26px;margin-left:-4px;border:2px solid white;border-radius:50%;font-size:9px;font-weight:800}.dot.available{background:#dff8ed;color:#168e60}.dot.maybe{background:#fff0ce;color:#c77c05}.dot.off{background:#ffe2e5;color:#ce4652}.note-field{display:grid;gap:5px}.note-field span,.field-title{font-size:8px;font-weight:800;letter-spacing:.13em;color:#9aabb1}.closed-manager{grid-template-columns:82px 1fr;color:#8799a0;background:#f8fafb}.closed-manager div:nth-child(2) strong,.closed-manager div:nth-child(2) span{display:block}.closed-manager div:nth-child(2) span{font-size:10px}.mobile-head{display:none}dialog{width:min(560px,calc(100vw - 28px));padding:0;border:0;border-radius:19px;box-shadow:0 30px 90px rgba(5,25,34,.28)}dialog::backdrop{background:rgba(4,19,26,.55);backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font:800 21px Manrope}.edit-block{display:grid;gap:13px;padding:20px 24px}.edit-block+.edit-block{border-top:1px solid var(--line)}.edit-block label{display:grid;gap:6px;color:#70838c;font-size:10px;font-weight:700}.edit-block input{width:100%}.edit-block small{color:#9aabb1}.person-edit{grid-template-columns:38px 1fr!important;align-items:center}.avatar.small{width:36px;height:36px;border-radius:10px;font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 24px}.toast{position:fixed;right:24px;bottom:24px;z-index:10;padding:14px 18px;border-radius:12px;background:#08232e;color:white;box-shadow:var(--shadow);font-size:12px;font-weight:700;transform:translateY(25px);opacity:0;transition:.2s;pointer-events:none}.toast.show{transform:none;opacity:1}.loader{display:grid;place-items:center;min-height:260px;color:var(--muted)}.loader span{width:28px;height:28px;border:3px solid #d9e9ee;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{padding:30px;border-radius:15px;background:#fff0f1;color:#c63c49}
body[data-mode=manager] .manager-only{display:flex}body:not([data-mode=manager]) .manager-only{display:none}
.login-card{width:min(430px,100%);display:grid;gap:16px;margin-top:8px;padding:24px;border:1px solid var(--line);border-radius:16px;background:white;box-shadow:var(--shadow)}
.login-card h2{margin:0;font:800 23px Manrope}
.login-card div>span{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.login-card label{display:grid;gap:6px;color:#71838b;font-size:10px;font-weight:800;letter-spacing:.12em}
.login-card input{height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#f8fbfc;color:var(--ink);font-weight:700;letter-spacing:0}
.login-card input:focus{outline:2px solid rgba(17,189,233,.2);border-color:#8dd9eb}
.login-card .masked-entry{-webkit-text-security:disc;text-security:disc}
@media(max-width:1050px){.app{grid-template-columns:210px 1fr}.sidebar{padding-left:18px;padding-right:18px}.main{padding-left:28px;padding-right:28px}.manager-day{grid-template-columns:64px 1fr}.note-field{grid-column:2}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app{display:block}.sidebar{display:none}.main{padding:0 14px 40px}.mobile-head{display:flex;height:78px;align-items:center;justify-content:space-between}.mobile-head img{width:125px;filter:drop-shadow(0 1px 0 #132)}.mobile-head button{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:white;color:#48606a;font-weight:700;font-size:11px}.hero{align-items:flex-start}.hero h1{font-size:29px}.hero p:last-child{font-size:13px}.hero-actions{display:none!important}.weekbar{margin-top:24px;padding:10px 12px;gap:8px}.weekbar .icon-button{width:34px;height:34px}.save-state{font-size:0}.save-state span:first-child{display:block}.stats{grid-template-columns:repeat(2,1fr);gap:8px;margin:12px auto}.stats article{padding:12px;gap:9px}.stats strong{font-size:17px}.stat-icon{width:31px;height:31px}.people-grid{grid-template-columns:1fr}.days-grid{grid-template-columns:1fr}.staff-toolbar{align-items:center}.legend{display:none}.availability-row{padding:15px 14px}.shift-info{min-width:0}.status-control button{width:39px}.submit-bar{position:sticky;bottom:10px;z-index:2}.manager-day{grid-template-columns:1fr;padding:15px}.manager-date{display:flex;justify-content:space-between}.manager-shift{grid-template-columns:1fr}.manager-shift select{width:100%}.availability-dots{padding-left:4px}.note-field{grid-column:auto}.section-head{align-items:center}.toast{left:14px;right:14px;bottom:14px;text-align:center}}
.submission-strip{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}.submission{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700}.submission.received{background:#dcfce7;color:#16733b}.submission.waiting{background:#f1f5f9;color:#64748b}.submission b{font-size:15px}
.notice-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-8px 0 24px;padding:15px 17px;border:1px solid #caeaf2;border-radius:14px;background:#effafd;color:#275765}.notice-card strong,.notice-card span{display:block}.notice-card strong{font:800 13px Manrope}.notice-card span{color:#5f7983;font-size:12px}
.manager-action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-10px 0 24px}.manager-action-row .text-button{min-height:40px;padding:0 6px}
.payroll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.payroll-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:white}.payroll-card.paid{border-color:#bfe7d0;background:#f8fffb}.pay-person{display:flex;align-items:center;gap:12px;margin-bottom:16px}.pay-person strong,.pay-person small{display:block}.pay-person strong{font:800 15px Manrope}.pay-person small{margin-top:3px;color:var(--muted);font-size:11px}.pay-person em{margin-left:auto;padding:6px 9px;border-radius:999px;background:#eef3f5;color:#667b84;font-style:normal;font-size:10px;font-weight:800}.paid .pay-person em{background:#dcfce7;color:#16733b}.pay-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pay-numbers span{padding:12px;border-radius:12px;background:#f7fafb;text-align:center}.pay-numbers b,.pay-numbers small{display:block}.pay-numbers b{font:800 18px Manrope}.pay-numbers small{margin-top:3px;color:#82939a;font-size:9px;font-weight:800;text-transform:uppercase}.pay-release{width:100%;margin-top:14px}.pay-release:disabled{cursor:not-allowed;opacity:.75}.month-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:white}.month-panel strong,.month-panel small{display:block}.month-panel strong{font:800 28px Manrope}.month-panel small{margin-top:3px;color:var(--muted);font-size:12px}.pay-edit{grid-template-columns:120px 1fr!important;align-items:center;margin-top:-8px;margin-left:50px}.pay-edit span{color:#8b9aa2;font-size:9px;font-weight:800;text-transform:uppercase}.expense-list{display:grid;gap:10px}.expense-row{display:grid;grid-template-columns:1fr 120px 120px;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:white}.expense-row strong,.expense-row small{display:block}.expense-row strong{font:800 14px Manrope}.expense-row small{margin-top:3px;color:var(--muted);font-size:11px}.expense-row span{font:800 18px Manrope;text-align:right}.expense-row em{color:#7e9097;font-style:normal;font-size:11px;font-weight:800;text-align:right}
@media(max-width:760px){.notice-card{display:grid}.manager-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-12px}.manager-action-row .button,.manager-action-row .text-button{width:100%;min-height:42px}.manager-action-row .text-button{border:1px solid var(--line);border-radius:10px;background:white}.payroll-grid{grid-template-columns:1fr}.pay-numbers{grid-template-columns:repeat(2,1fr)}.month-panel{align-items:flex-start;flex-direction:column}.pay-edit{grid-template-columns:1fr!important;margin-left:0}.expense-row{grid-template-columns:1fr}.expense-row span,.expense-row em{text-align:left}}

.nav{padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(255,255,255,.025)}
.nav-item{position:relative;height:50px;padding:0 14px;font-weight:800;transition:background .18s,color .18s}
.nav-item span{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.045);color:#8fc7d8}
.nav-item.active,.nav-item:hover{background:rgba(26,188,229,.15)}
.nav-item.active:before{content:"";position:absolute;left:-8px;top:14px;width:3px;height:22px;border-radius:99px;background:var(--cyan);box-shadow:0 0 18px rgba(17,189,233,.55)}
.weekbar.payroll-filter{align-items:stretch;gap:14px}
.range-fields{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:10px;min-width:min(470px,100%)}
.range-fields label{display:grid;gap:5px}
.range-fields span{font-size:9px;font-weight:800;color:#99a8ae;letter-spacing:.14em}
.range-fields input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#f9fcfd;color:var(--ink);font-weight:800}
.range-presets{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.range-presets button{height:36px;padding:0 12px;border:1px solid #d5e6eb;border-radius:10px;background:#f7fbfc;color:#42616d;font-size:11px;font-weight:800}
.range-presets button:hover{border-color:#93d8e9;color:#087fa0;background:#edf9fc}
.payroll-loader{grid-column:1/-1;border:1px solid var(--line);border-radius:16px;background:white}
.empty-payroll{grid-column:1/-1;padding:28px;border:1px dashed #cbdce1;border-radius:16px;background:#f8fbfc;text-align:center;color:#6c8189}
.empty-payroll strong,.empty-payroll span{display:block}
.empty-payroll span{margin-top:5px;font-size:12px}

@media(max-width:1050px){.weekbar.payroll-filter{flex-wrap:wrap}.range-fields{flex:1 1 100%}.range-presets{flex:1}.weekbar.payroll-filter .save-state{margin-left:0}}
@media(max-width:760px){.weekbar.payroll-filter{display:grid}.range-fields{grid-template-columns:1fr;min-width:0}.range-presets{display:grid;grid-template-columns:repeat(3,1fr)}.range-presets button{padding:0 6px}.nav{padding:0;border:0;background:transparent}}

body[data-mode=manager] {
  background:
    linear-gradient(180deg, #f8fbfc 0%, #eef5f7 100%);
}
body[data-mode=manager] .app {
  grid-template-columns: 300px minmax(0, 1fr);
}
body[data-mode=manager] .sidebar {
  padding: 28px 24px 22px;
  background:
    radial-gradient(circle at 50% -5%, rgba(27, 189, 229, .18), transparent 32%),
    linear-gradient(180deg, #071923 0%, #081d28 48%, #06151d 100%);
  border-right: 1px solid rgba(180, 224, 235, .1);
  box-shadow: 18px 0 55px rgba(5, 22, 30, .16);
}
body[data-mode=manager] .brand {
  width: 150px;
  height: 76px;
  margin: 0 auto 22px;
}
body[data-mode=manager] .nav {
  gap: 10px;
  margin-top: 18px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.nav-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  align-items: center;
  min-height: 64px;
  line-height: 1;
}
.nav-item span {
  grid-row: 1 / span 2;
  margin-right: 0;
  font-size: 15px;
}
.nav-item small {
  align-self: end;
  display: block;
  color: #6f8d99;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-item.active small, .nav-item:hover small {
  color: #a6dbea;
}
body[data-mode=manager] .nav-item.active {
  background: linear-gradient(135deg, rgba(23, 184, 224, .24), rgba(31, 93, 115, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 24px rgba(0, 0, 0, .16);
}
body[data-mode=manager] .main {
  padding-top: 42px;
}
body[data-mode=manager] .hero,
body[data-mode=manager] .weekbar,
body[data-mode=manager] .stats,
body[data-mode=manager] .content {
  max-width: 1180px;
}
.hero h1 {
  max-width: 840px;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: 0;
}
body[data-mode=manager] .hero h1 {
  font-size: 58px;
  line-height: .98;
}
body[data-mode=manager] .nav-item.manager-only,
body[data-mode=manager] .nav-item {
  display: grid;
}
body[data-mode=manager] .stats.manager-only {
  display: grid;
}
body[data-mode=manager] .hero-actions.manager-only {
  display: flex;
}
body[data-mode=manager] .hero p:last-child {
  max-width: 680px;
  color: #657982;
  font-size: 16px;
}
body[data-mode=manager] .button,
body[data-mode=manager] .icon-button,
body[data-mode=manager] .nav-item,
body[data-mode=manager] .weekbar,
body[data-mode=manager] .stats article,
body[data-mode=manager] .payroll-card,
body[data-mode=manager] .expense-row,
body[data-mode=manager] .empty-payroll,
body[data-mode=manager] .range-fields input,
body[data-mode=manager] .range-presets button {
  border-radius: 8px;
}
body[data-mode=manager] .weekbar {
  margin-top: 28px;
  padding: 16px;
  border-color: #dbe8ec;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 45px rgba(18, 47, 59, .07);
}
.weekbar.payroll-filter {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto auto;
  align-items: end;
}
.range-fields {
  min-width: 0;
}
.range-fields label {
  padding: 12px;
  border: 1px solid #e1edf0;
  border-radius: 8px;
  background: #fbfdfe;
}
.range-fields input {
  height: 48px;
  border-color: #dce9ed;
  background: white;
  font-size: 17px;
  box-shadow: inset 0 1px 0 rgba(20, 36, 44, .03);
}
.range-presets button {
  height: 42px;
  background: white;
}
body[data-mode=manager] .stats {
  margin-top: 18px;
  gap: 12px;
}
body[data-mode=manager] .stats article {
  min-height: 98px;
  padding: 19px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 252, 253, .98));
  box-shadow: 0 12px 35px rgba(18, 47, 59, .06);
}
body[data-mode=manager] .stats strong {
  font-size: 28px;
  letter-spacing: 0;
}
body[data-mode=manager] .stats small {
  font-size: 12px;
}
.stat-icon {
  border-radius: 8px;
}
.stat-icon.green {
  color: #13885c;
  background: #e6f8ef;
}
.finance-head {
  align-items: center;
  padding-top: 6px;
}
.finance-head h2 {
  margin-top: 2px;
  font-size: 28px;
}
body[data-mode=manager] .text-button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #cfe4ea;
  border-radius: 8px;
  background: white;
  color: #126f8c;
}
.payroll-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.payroll-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: #dce8ec;
  box-shadow: 0 14px 38px rgba(18, 47, 59, .07);
}
.payroll-card:before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #13bde8, #18a978);
}
.payroll-card:not(.paid):before {
  background: linear-gradient(90deg, #f5a524, #ef6b5f);
}
.pay-person {
  margin: 0;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #edf3f5;
}
.pay-person strong {
  font-size: 16px;
}
.pay-person em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff3df;
  color: #b76808;
  white-space: nowrap;
}
.paid .pay-person em {
  background: #ddf8ec;
  color: #137a52;
}
.pay-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}
.pay-total small {
  color: #7d8f97;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pay-total strong {
  font: 800 34px/1 Manrope, sans-serif;
  letter-spacing: 0;
}
.pay-numbers {
  grid-template-columns: repeat(3, 1fr);
  padding: 0 18px 18px;
}
.pay-numbers span {
  padding: 13px 8px;
  border: 1px solid #edf3f5;
  border-radius: 8px;
  background: #f8fbfc;
}
.pay-release {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}
.pay-release:disabled {
  background: #f7fafb;
  color: #677b84;
}
.expense-list {
  gap: 0;
}
.expense-table {
  display: grid;
  gap: 10px;
}
.expense-row {
  grid-template-columns: minmax(220px, 1fr) 150px 140px;
  padding: 18px 20px;
  border-color: #dce8ec;
  box-shadow: 0 10px 30px rgba(18, 47, 59, .05);
}
.expense-row strong {
  font-size: 15px;
}
.expense-row span {
  color: #102832;
  font-size: 22px;
}
.expense-row em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f2f7f8;
  color: #57707a;
}
.empty-payroll {
  padding: 44px 28px;
  border-color: #bfd9e0;
  background:
    linear-gradient(180deg, #ffffff, #f6fbfc);
  box-shadow: 0 14px 35px rgba(18, 47, 59, .05);
}
.empty-payroll strong {
  color: #18313b;
  font: 800 19px Manrope, sans-serif;
}
@media(max-width:1180px){
  .payroll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  body[data-mode=manager] .app{grid-template-columns:240px minmax(0,1fr)}
  .weekbar.payroll-filter{grid-template-columns:1fr}
}
@media(max-width:760px){
  body[data-mode=manager] .app{display:block}
  body[data-mode=manager] .main{padding-top:0}
  body[data-mode=manager] .hero h1{font-size:34px}
  .hero h1{font-size:29px}
  .payroll-grid{grid-template-columns:1fr}
  .pay-total strong{font-size:30px}
  .expense-row{grid-template-columns:1fr}
  .range-fields label{padding:10px}
}