:root{
  --bg:#f3f4ef;
  --surface:#ffffff;
  --surface-soft:#f8f9f5;
  --ink:#11130f;
  --muted:#73786f;
  --line:#e3e5dc;
  --acid:#c8ff32;
  --acid-deep:#a8e900;
  --dark:#10120e;
  --danger:#e34c5e;
  --ok:#16885e;
  --shadow:0 18px 50px rgba(17,19,15,.07);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 4%,rgba(200,255,50,.20),transparent 28%),radial-gradient(circle at 8% 82%,rgba(200,255,50,.11),transparent 25%);z-index:-1}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:30px;min-height:78px;padding:13px 30px;background:rgba(243,244,239,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(17,19,15,.08)}
.brand{display:flex;align-items:center;gap:11px;font-weight:950;font-size:20px;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--dark);color:var(--acid);font-size:14px;letter-spacing:-.08em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.brand-copy{line-height:1}.brand-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.topbar nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.topbar nav a{padding:11px 13px;text-decoration:none;border-radius:999px;color:#565b53;font-size:14px;font-weight:700;transition:.2s ease}
.topbar nav a:hover,.topbar nav a.active{background:var(--dark);color:#fff}
.userbox{margin-left:auto;display:flex;align-items:center;gap:10px;color:#555a52;font-size:13px;white-space:nowrap}
.user-pill{padding:9px 12px;border:1px solid var(--line);background:rgba(255,255,255,.68);border-radius:999px}
.logout{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--acid);text-decoration:none;font-weight:900;transition:.2s}.logout:hover{transform:translateY(-2px);background:var(--acid-deep)}
.container{max-width:1540px;margin:0 auto;padding:42px 30px 70px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;color:#61665e;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.14em}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acid-deep);box-shadow:0 0 0 5px rgba(200,255,50,.22)}
h1{margin:0 0 8px;font-size:clamp(34px,4vw,58px);line-height:.98;letter-spacing:-.055em;font-weight:900}
h2{margin:34px 0 16px;font-size:27px;letter-spacing:-.035em}h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}.muted{color:var(--muted)}
.hero-note{max-width:600px;margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.card{background:rgba(255,255,255,.92);border:1px solid rgba(17,19,15,.09);border-radius:var(--radius);box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.stat{position:relative;overflow:hidden;min-height:186px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.stat:first-child{background:var(--acid);border-color:transparent}.stat:nth-child(2){background:var(--dark);color:white;border-color:transparent}.stat:nth-child(2) span{color:#aeb3aa}
.stat:after{content:"";position:absolute;right:-23px;bottom:-38px;width:126px;height:126px;border-radius:42px;background:rgba(255,255,255,.22);transform:rotate(18deg)}
.stat span{display:block;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.stat strong{display:block;margin-top:35px;font-size:56px;line-height:1;letter-spacing:-.06em}.stat small{display:block;margin-top:11px;color:inherit;opacity:.65}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.action-card{position:relative;min-height:230px;padding:30px;text-decoration:none;overflow:hidden;transition:.22s ease}.action-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(17,19,15,.11)}.action-card p{max-width:450px;color:var(--muted);font-size:15px;line-height:1.55}.action-card:after{content:"↗";position:absolute;right:24px;top:24px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acid);font-size:22px;font-weight:900}.action-card.dark{background:var(--dark);color:#fff}.action-card.dark p{color:#aeb3aa}.action-card.dark:after{color:var(--dark)}
.inline-form{display:flex;gap:12px;align-items:end;padding:18px;margin-bottom:18px;flex-wrap:wrap}
input,select,button{font:inherit}input,select{height:48px;border:1px solid #d7dacf;border-radius:14px;padding:0 15px;background:#fff;color:var(--ink);min-width:150px;outline:none;transition:.2s}input:focus,select:focus{border-color:#a8e900;box-shadow:0 0 0 4px rgba(200,255,50,.2)}button{height:48px;border:0;border-radius:14px;padding:0 19px;cursor:pointer;font-weight:850;transition:.2s}.primary{background:var(--dark);color:#fff}.primary:hover{background:#2a2d26;transform:translateY(-1px)}.secondary{background:var(--acid);color:var(--dark)}.secondary:hover{background:var(--acid-deep);transform:translateY(-1px)}
.readonly{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;border-radius:999px;background:#fff4c9;color:#675411;font-weight:800}.readonly:before{content:"◉"}
.table-card{overflow:hidden}.table-card table{width:100%;border-collapse:collapse}.table-card th,.table-card td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left}.table-card tr:last-child td{border-bottom:0}.table-card th{background:var(--surface-soft);color:#6c7168;font-size:11px;text-transform:uppercase;letter-spacing:.11em}.table-card tbody tr{transition:.15s}.table-card tbody tr:hover{background:#fbfcf8}
.flash{padding:14px 16px;border-radius:15px;margin-bottom:16px;font-weight:700}.flash.error{background:#ffe9ed;color:#9d2439}.flash.success{background:#e5f8ef;color:#126a49}
.login-wrap{min-height:calc(100vh - 112px);display:grid;place-items:center;padding:30px 0}.login-card{position:relative;overflow:hidden;width:min(470px,100%);padding:42px}.login-card:after{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-80px;border-radius:55px;background:var(--acid);transform:rotate(20deg);z-index:0}.login-card>*{position:relative;z-index:1}.login-card label{display:block;margin:18px 0 8px;font-weight:800}.login-card input{width:100%;margin-top:8px}.login-card button{width:100%;margin-top:14px}.logo-mark{display:grid;place-items:center;width:66px;height:66px;border-radius:20px;background:var(--dark);color:var(--acid);font-weight:950;font-size:21px;letter-spacing:-.08em}.login-card h1{margin-top:28px;font-size:42px}
.schedule-scroll{overflow:auto}.schedule-table{min-width:1100px}.schedule-table .sticky{position:sticky;left:0;z-index:2;background:#fff}.schedule-table thead .sticky{z-index:3;background:var(--surface-soft)}.name-cell{font-weight:800;min-width:210px}.shift-form select{min-width:68px;width:68px}.shift-badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--acid);font-weight:900}.pending{display:inline-flex;padding:6px 9px;border-radius:999px;background:#fff1c8;color:#8a6300;font-weight:800;font-size:12px}
.page-head form{display:flex;gap:10px;align-items:center}
@media(max-width:1050px){.topbar{align-items:flex-start;flex-wrap:wrap}.userbox{margin-left:0}.topbar nav{order:3;width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:2px}.stats{grid-template-columns:1fr 1fr}.stats .stat:last-child{grid-column:1/-1}.grid2{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{padding:12px 16px}.container{padding:28px 16px 50px}.page-head{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr}.stats .stat:last-child{grid-column:auto}.user-pill{display:none}.grid2{grid-template-columns:1fr}.action-card{min-height:190px}.inline-form>*{width:100%}input,select{min-width:0}.login-card{padding:30px 24px}.table-card{overflow:auto}h1{font-size:38px}}
.sync-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}.sync-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#111;color:#fff}.sync-card .muted{color:#bcbcbc}.sync-button{white-space:nowrap}.eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.16em;color:#8cab19;margin-bottom:8px}.small{font-size:13px}.manual-panel{margin-bottom:18px}.manual-panel summary{cursor:pointer;font-weight:800}.manual-panel .inline-form{margin-top:16px;padding:0;box-shadow:none}.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.status.success{background:#e8ffc0;color:#264000}.status.error{background:#ffe2e2;color:#7d0000}.status.running{background:#fff2c7;color:#6f4c00}@media(max-width:850px){.sync-grid{grid-template-columns:1fr}.sync-card{align-items:flex-start;flex-direction:column}}

/* v2.1 — income page layout fixes */
.sync-grid{align-items:stretch;grid-template-columns:minmax(0,1.7fr) minmax(300px,.83fr);gap:20px}
.sync-grid>.card{padding:30px 32px;min-height:235px}
.sync-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:normal;gap:32px;border-radius:32px}
.sync-card h2{margin:10px 0 18px;font-size:clamp(28px,2.4vw,40px);line-height:1.04}
.sync-card p{max-width:760px;line-height:1.42}
.sync-card form{margin:0;align-self:center}
.sync-button{min-width:235px;height:58px;padding:0 24px;background:var(--acid);color:var(--dark);border-radius:18px}
.sync-button:hover{background:var(--acid-deep)}
.sync-grid>.card:not(.sync-card) h3{margin-top:4px;font-size:30px}
.manual-panel{padding:22px 26px}
.table-card{margin-top:18px}
.table-card>h2{margin:0;padding:26px 28px 14px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.eyebrow:before{position:static;flex:0 0 auto}
@media(max-width:980px){.sync-grid{grid-template-columns:1fr}.sync-card{grid-template-columns:1fr}.sync-card form{width:100%}.sync-button{width:100%}}
@media(max-width:700px){.sync-grid>.card{padding:24px 20px;min-height:0}.sync-card h2{font-size:30px}.table-card>h2{padding:22px 18px 12px}}

.negative-income { color: #b4233a; font-weight: 800; }

/* v3.1 — удобный табель: даты и сотрудники остаются видимыми при прокрутке */
.schedule-scroll{
  overflow-x:auto;
  overflow-y:visible;
  position:relative;
}
.schedule-table{
  border-collapse:separate;
  border-spacing:0;
}
.schedule-table thead th{
  position:sticky;
  top:78px;
  z-index:8;
  background:var(--surface-soft);
  box-shadow:0 1px 0 var(--line),0 8px 16px rgba(17,19,15,.05);
}
.schedule-table .sticky{
  position:sticky;
  left:0;
  z-index:7;
  background:#fff;
  box-shadow:1px 0 0 var(--line);
}
.schedule-table thead .sticky{
  top:78px;
  z-index:10;
  background:var(--surface-soft);
  box-shadow:1px 1px 0 var(--line),0 8px 16px rgba(17,19,15,.05);
}
.schedule-table thead th:not(.sticky){
  min-width:104px;
  text-align:center;
}
.schedule-table tbody td:not(.sticky){text-align:center}
.schedule-table thead th:nth-child(7){background:#fff3dc}
.schedule-table thead th:nth-child(8){background:#ffe9e7}

@media(max-width:700px){
  .schedule-table thead th,.schedule-table thead .sticky{top:70px}
}

button.danger, .danger {
  background: #fff1f0;
  color: #b42318;
  border: 1px solid #f3b7b2;
}
button.danger:hover { background: #ffe4e1; }
button.small { padding: 8px 12px; font-size: 13px; }

/* v3.7 — исправление видимости личного табеля и корректная прокрутка */
.schedule-scroll{
  max-height:calc(100vh - 250px);
  min-height:220px;
  overflow:auto;
  position:relative;
}
.schedule-table thead th,
.schedule-table thead .sticky{top:0}

.operator-schedule-card{padding:28px;margin-top:24px;overflow:hidden}
.operator-schedule-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.operator-schedule-head h2{margin:6px 0 0;font-size:32px}
.operator-total{display:flex;flex-direction:column;align-items:flex-end;color:var(--muted)}
.operator-total strong{font-size:34px;color:var(--text);line-height:1}
.operator-days{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px}
.operator-day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 10px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}
.operator-day.saturday{background:#fff0ee}
.operator-day.sunday{background:#fff6e3}
.day-name{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--muted)}
.day-date{font-size:14px;font-weight:700;color:var(--muted)}
.operator-shift{display:grid;place-items:center;width:48px;height:48px;margin-top:8px;border-radius:15px;background:#fff;font-size:20px;font-weight:900}
.operator-shift.has-shift{background:var(--acid)}
.empty-state{padding:32px;margin-top:24px}
@media(max-width:900px){.operator-days{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.operator-days{grid-template-columns:repeat(2,1fr)}.operator-schedule-head{align-items:flex-start}.operator-total{align-items:flex-start}}
.positive{font-weight:800;color:#18794e}.negative{font-weight:800;color:#b42318}.calc-line{margin:.45rem 0;padding:.55rem .7rem;background:#f5f5f5;border-radius:8px;font-size:.88rem}details summary{cursor:pointer;font-weight:700}

/* v4.1 — закрытая статистика сервиса */
.service-head { align-items: flex-end; gap: 24px; }
.week-switcher { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.week-badge { padding:11px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); font-weight:800; white-space:nowrap; }
.service-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.service-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:20px; min-height:135px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow); }
.service-card span { color:var(--muted); font-size:13px; font-weight:700; }
.service-card strong { font-size:26px; letter-spacing:-.03em; }
.service-card small { color:var(--muted); }
.primary-card { border-color:rgba(200,255,50,.55); box-shadow:0 0 0 1px rgba(200,255,50,.08), var(--shadow); }
.xpay-report-card { background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); margin-top:18px; }
.report-total-row { display:grid; grid-template-columns:180px 1fr; border-bottom:2px solid var(--line-strong, #333); }
.report-total-label { display:flex; align-items:center; justify-content:center; text-align:center; font-size:20px; font-weight:900; line-height:1.05; padding:22px; border-right:2px solid var(--line-strong, #333); }
.report-total-metrics { display:grid; grid-template-rows:1fr 1fr; }
.report-total-metrics div { display:flex; justify-content:space-between; gap:20px; padding:10px 18px; align-items:center; }
.report-total-metrics div+div { border-top:1px dashed var(--line-strong, #555); }
.report-total-metrics em,.day-metrics em { font-style:italic; color:var(--muted); }
.report-total-metrics b { font-size:20px; }
.daily-report { border-bottom:2px solid var(--line-strong, #333); }
.daily-report:last-child { border-bottom:0; }
.daily-report summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:58px 138px 1fr 28px; min-height:66px; align-items:stretch; }
.daily-report summary::-webkit-details-marker { display:none; }
.day-short,.day-date { display:flex; align-items:center; justify-content:center; font-weight:900; border-right:1px solid var(--line-strong, #333); }
.day-short { font-size:19px; }
.day-date { font-size:16px; }
.day-metrics { display:grid; grid-template-rows:1fr 1fr; }
.day-metrics>span { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:7px 12px; }
.day-metrics>span+span { border-top:1px dashed var(--line-strong, #555); }
.expand-mark { display:flex; align-items:center; justify-content:center; font-size:20px; transition:transform .2s ease; }
details[open] .expand-mark { transform:rotate(180deg); }
.shift-breakdown { background:rgba(255,255,255,.025); padding:10px 14px 14px 210px; }
.shift-line { display:grid; grid-template-columns:120px 1fr 1fr; gap:18px; padding:10px 12px; border-top:1px dashed var(--line); }
.shift-line:first-child { border-top:0; }
.shift-line span { color:var(--muted); }
.shift-line b { color:var(--text); }
.shift-summary-card { padding:20px; overflow:visible; }
.section-title-row { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:16px; }
.section-title-row h2 { margin:3px 0 0; }
.service-shift-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; }
.service-shift-table th,.service-shift-table td { padding:14px 16px; text-align:right; border-bottom:1px dashed var(--line); }
.service-shift-table th:first-child,.service-shift-table td:first-child { text-align:left; }
.service-shift-table thead th { background:rgba(255,255,255,.045); font-weight:900; border-bottom:2px solid var(--line); }
.service-shift-table tbody tr:last-child td { border-bottom:0; }
.shift-pill { display:inline-flex; padding:7px 11px; border-radius:10px; background:rgba(200,255,50,.10); border:1px solid rgba(200,255,50,.28); font-weight:850; }
@media (max-width:1050px){ .service-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .service-head,.section-title-row{align-items:stretch;flex-direction:column}.week-switcher{justify-content:flex-start}.service-cards{grid-template-columns:1fr}
  .report-total-row{grid-template-columns:110px 1fr}.report-total-label{font-size:15px;padding:12px}.daily-report summary{grid-template-columns:46px 105px 1fr 24px}.day-date{font-size:13px}.day-metrics em{font-size:12px}.day-metrics b{font-size:13px}.shift-breakdown{padding-left:10px}.shift-line{grid-template-columns:1fr;gap:5px}.table-scroll{overflow-x:auto}.service-shift-table{min-width:760px}
}

/* v5.0 — безопасные обновления и резервные копии */
.backup-status-grid { margin-bottom: 22px; }
.danger-card { border-color: #ff7c7c !important; background: #fff2f2 !important; }
.restore-card { margin-top: 22px; }
.restore-form { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.restore-form input[type="file"] { flex: 1; min-width: 260px; padding: 13px; border: 2px solid #1a1a1a; border-radius: 12px; background: #fff; }
.danger-button { background: #191919; color: #fff; }
.small-button { padding: 8px 12px; font-size: 13px; }

/* v5.0.1 — единый верхний блок статистики сервиса */
.service-overview-grid { display:grid; grid-template-columns:minmax(300px, 2fr) minmax(0, 3fr); gap:18px; align-items:stretch; margin-top:18px; }
.service-overview-grid > .xpay-report-card { margin-top:0; height:100%; }
.weekly-total-card { display:flex; }
.compact-total-row { width:100%; border-bottom:0; grid-template-columns:145px 1fr; }
.compact-total-row .report-total-label { padding:18px 14px; font-size:18px; }
.compact-total-row .report-total-metrics div { padding:13px 16px; }
.overview-shift-card { padding:16px; }
.compact-section-title { margin-bottom:12px; align-items:center; }
.compact-section-title h2 { font-size:20px; }
.compact-section-title .muted { font-size:12px; white-space:nowrap; }
.compact-shift-table th,.compact-shift-table td { padding:11px 10px; font-size:13px; }
.compact-shift-table .shift-pill { padding:6px 8px; white-space:nowrap; }
.daily-statistics-card { margin-top:18px; }
@media (max-width:1200px){
  .service-overview-grid { grid-template-columns:1fr; }
  .weekly-total-card { min-height:150px; }
}
@media (max-width:720px){
  .compact-total-row { grid-template-columns:110px 1fr; }
  .compact-section-title .muted { white-space:normal; }
}

/* v5.1 — аналитика сервиса */
.analytics-head{align-items:flex-end}.month-input{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);font-weight:800}
.analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.analytics-chart-card{padding:20px;min-width:0}.wide-card{grid-column:1/-1}.bar-chart{display:grid;gap:8px;max-height:430px;overflow:auto;padding-right:6px}.bar-row{display:grid;grid-template-columns:28px minmax(80px,1fr) 92px;align-items:center;gap:10px;font-size:12px}.bar-row>b{text-align:right}.bar-track{height:13px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}.bar-track i{display:block;height:100%;min-width:2px;border-radius:inherit;background:var(--acid)}.bar-track.apps i{background:linear-gradient(90deg,var(--acid),#fff)}.compact-bars{max-height:360px}.weekday-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.weekday-card{padding:16px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft);text-align:center;display:flex;flex-direction:column;gap:6px}.weekday-card strong{font-size:17px}.weekday-card span{font-weight:900}.weekday-card small{color:var(--muted)}
@media(max-width:1050px){.analytics-kpis{grid-template-columns:repeat(2,1fr)}.weekday-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.analytics-head{align-items:stretch;flex-direction:column}.analytics-kpis,.analytics-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}.weekday-grid{grid-template-columns:repeat(2,1fr)}.bar-row{grid-template-columns:25px minmax(60px,1fr) 75px}.analytics-chart-card{padding:15px}}

/* v5.2 — мотивационная главная страница оператора */
.operator-dashboard-head{align-items:flex-end;gap:24px}.period-tabs{display:inline-flex;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}.period-tab{padding:10px 18px;border-radius:11px;color:var(--muted);font-weight:850;text-decoration:none}.period-tab.active{background:var(--acid);color:#151515}.operator-motivation-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;margin:18px 0}.operator-result-card,.leader-card{padding:28px;min-height:290px;display:flex;flex-direction:column;justify-content:center}.operator-income{display:block;margin:14px 0 24px;font-size:clamp(38px,5vw,66px);line-height:1;letter-spacing:-.055em}.operator-position-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px dashed var(--line);color:var(--muted)}.operator-position-line b{color:var(--text);font-size:18px}.bonus-line b{color:#18794e}.leader-card{position:relative;overflow:hidden;background:#171717;color:#fff}.leader-card .eyebrow,.leader-card p,.leader-card .motivation-progress span{color:#bcbcbc}.leader-card h2{font-size:clamp(30px,4vw,48px);margin:12px 0}.leader-card.you-lead{background:var(--acid);color:#151515}.leader-card.you-lead .eyebrow,.leader-card.you-lead p{color:#3e461f}.leader-crown{position:absolute;right:24px;top:18px;font-size:42px;opacity:.9}.motivation-progress{margin-top:22px;padding-top:17px;border-top:1px dashed rgba(255,255,255,.28);display:flex;flex-direction:column;gap:5px}.motivation-progress b{font-size:18px}.operator-message-card{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 28px;border-left:6px solid var(--acid)}.operator-message-card strong{font-size:19px}.operator-message-card span{color:var(--muted);text-align:right}.operator-quick-links{margin-top:18px}
@media(max-width:850px){.operator-dashboard-head{align-items:stretch;flex-direction:column}.period-tabs{align-self:flex-start}.operator-motivation-grid{grid-template-columns:1fr}.operator-message-card{align-items:flex-start;flex-direction:column;gap:8px}.operator-message-card span{text-align:left}}
@media(max-width:520px){.period-tabs{width:100%}.period-tab{flex:1;text-align:center}.operator-result-card,.leader-card{padding:22px;min-height:250px}.operator-position-line{align-items:flex-start;flex-direction:column;gap:4px}}

/* v6.0 admin workspace */
.app-shell-body{background:#f3f5f1}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:#101310;color:#fff;padding:24px 18px;display:flex;flex-direction:column;z-index:30}
.sidebar-brand{color:#fff;text-decoration:none;margin-bottom:30px}.side-nav{display:flex;flex-direction:column;gap:7px}.side-nav>a,.side-more summary{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;color:#bfc6bd;text-decoration:none;font-weight:700;cursor:pointer;list-style:none}.side-nav>a span,.side-more summary span{width:20px;text-align:center;color:#c8ff32}.side-nav>a:hover,.side-nav>a.active,.side-more summary:hover{background:#242a22;color:#fff}.side-more summary::-webkit-details-marker{display:none}.side-more>a{display:block;padding:9px 14px 9px 47px;color:#9ca59a;text-decoration:none;border-radius:10px;font-size:14px}.side-more>a.active,.side-more>a:hover{color:#fff;background:#1a1f19}.sidebar-foot{margin-top:auto;border-top:1px solid #2c322a;padding:18px 8px 0;display:flex;align-items:center;justify-content:space-between}.sidebar-foot div{display:flex;flex-direction:column}.sidebar-foot small{color:#8d968b;margin-top:3px}.sidebar-foot>a{color:#c8ff32;text-decoration:none;font-size:22px}.workspace{min-width:0}.workspace-top{height:66px;background:#fff;border-bottom:1px solid #e3e7e0;display:flex;align-items:center;gap:10px;padding:0 34px;position:sticky;top:0;z-index:20}.workspace-top span{color:#8b9388;font-size:13px}.workspace .container{max-width:1600px;padding:32px 36px 60px}
.control-head{align-items:flex-end}.dashboard-date{background:#161b16;color:#c8ff32;border-radius:12px;padding:10px 14px;font-weight:800}.control-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.admin-dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.admin-dashboard-grid>.card{margin:0}.quality-ring{width:70px;height:70px;border-radius:50%;background:#101310;color:#c8ff32;display:grid;place-items:center;font-size:25px;font-weight:900}.quality-ring small{font-size:12px}.attention-list{display:flex;flex-direction:column;gap:9px}.attention-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid #e4e8e1;border-radius:13px;text-decoration:none;color:inherit}.attention-item>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff1c7;color:#856100;font-weight:900}.attention-item.danger>span{background:#ffe0df;color:#a5201a}.attention-item.info>span{background:#e6efff;color:#2358a6}.attention-item div{display:flex;flex-direction:column}.attention-item small{color:#7d857a;margin-top:3px}.empty-good{padding:20px;border-radius:14px;background:#edf9e9;color:#307128;font-weight:800}.leader-list{display:flex;flex-direction:column}.leader-list>a{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #e8ebe6;text-decoration:none;color:inherit}.rank-medal{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eff2ec;font-weight:900}.leader-list>a:first-child .rank-medal{background:#c8ff32}.leader-list div{display:flex;flex-direction:column}.leader-list small{color:#838b80}.state-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #e7eae5}.state-row span{color:#7b8378}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid form{margin:0}.quick-button{width:100%;min-height:88px;border:1px solid #e1e6dd;border-radius:14px;background:#f8faf6;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:15px;text-decoration:none;color:#171b16;font-size:22px;cursor:pointer}.quick-button span{font-size:13px;font-weight:800}.quick-button:hover{border-color:#b7d95b;background:#f1fad9}
.employee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.employee-tile{padding:14px}.employee-main{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px;text-decoration:none;color:inherit;padding:7px}.employee-main h3{margin:0 0 6px}.employee-avatar,.profile-avatar{border-radius:16px;background:#c8ff32;color:#111;font-weight:900;display:grid;place-items:center}.employee-avatar{width:52px;height:52px;font-size:22px}.status-dot{font-size:13px;color:#6f786c}.status-dot.on:before{content:'•';color:#47a33d;margin-right:5px}.status-dot.off:before{content:'•';color:#b5b8b2;margin-right:5px}.full-button{width:100%}.profile-hero{background:#101310;color:#fff;border-radius:24px;padding:24px;margin-bottom:18px}.back-link{color:#c8ff32;text-decoration:none;font-weight:700}.profile-person{display:flex;align-items:center;gap:18px;margin-top:22px}.profile-avatar{width:78px;height:78px;font-size:34px}.profile-person h1{margin:4px 0}.profile-person p{color:#b4bcb1;margin:0}.profile-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.profile-layout{display:grid;grid-template-columns:1.5fr .7fr;gap:18px}.profile-layout>.card{margin:0}.notes-card textarea{width:100%;box-sizing:border-box;margin-bottom:10px}.notes-list article{padding:14px 0;border-bottom:1px solid #e4e8e1}.notes-list article small{display:block;color:#899185;margin-top:3px}.notes-list article p{margin-bottom:0}.premium-status-card{display:flex;align-items:center;justify-content:space-between;gap:20px}.premium-status-card h2{margin:4px 0}.premium-status-card form{display:flex;gap:10px;align-items:center}
@media(max-width:1100px){.app-shell{grid-template-columns:84px minmax(0,1fr)}.sidebar{padding:20px 12px}.sidebar .brand-copy,.side-nav>a:not(.active){font-size:0}.side-nav>a{justify-content:center}.side-nav>a span{font-size:18px}.side-more summary{font-size:0;justify-content:center}.side-more>a{display:none}.sidebar-foot div{display:none}.control-kpis{grid-template-columns:repeat(2,1fr)}.profile-kpis{grid-template-columns:repeat(2,1fr)}.employee-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:sticky;height:auto;top:0;flex-direction:row;align-items:center;padding:10px;overflow:auto}.sidebar-brand,.sidebar-foot,.side-more{display:none}.side-nav{flex-direction:row}.side-nav>a{white-space:nowrap;font-size:0}.workspace-top{display:none}.workspace .container{padding:20px 14px}.control-kpis,.admin-dashboard-grid,.employee-grid,.profile-layout,.profile-kpis{grid-template-columns:1fr}.premium-status-card{align-items:flex-start;flex-direction:column}.premium-status-card form{width:100%;flex-direction:column;align-items:stretch}}


/* v6.0.1 — dashboard overflow fixes and extended premium analytics */
.control-kpis .stat{min-width:0;overflow:hidden}.control-kpis .stat strong{display:block;max-width:100%;font-size:clamp(24px,2.2vw,40px);line-height:1.08;letter-spacing:-.035em;overflow-wrap:anywhere}.control-kpis .stat span,.control-kpis .stat small{overflow-wrap:anywhere}.admin-dashboard-grid>.card{min-width:0;overflow:hidden}.state-row{align-items:flex-start}.state-row span{flex:0 0 42%}.state-row b{min-width:0;max-width:58%;text-align:right;overflow-wrap:anywhere;font-size:clamp(13px,1.2vw,16px)}.leader-list>a b{min-width:0;text-align:right;overflow-wrap:anywhere}.quick-button{min-height:100px;padding:18px}.quick-button span{line-height:1.3}.quality-ring{flex:0 0 70px}.section-title-row{gap:16px}.premium-head form{display:flex;gap:10px;align-items:center}.premium-table-card{padding:0;overflow:hidden}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.premium-table{min-width:1180px}.premium-table th,.premium-table td{white-space:nowrap}.employee-name-button{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:850;text-decoration:underline;text-decoration-color:#c8ff32;text-decoration-thickness:3px;text-underline-offset:4px;cursor:pointer}.employee-report-row:focus{outline:3px solid rgba(143,185,35,.35);outline-offset:-3px}.kpi-badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:6px 9px;border-radius:999px;font-weight:900;background:#eef1eb}.kpi-badge.high{background:#e9f8d0;color:#426900}.kpi-badge.medium{background:#fff3c8;color:#765800}.kpi-badge.low{background:#ffe2df;color:#9b2a22}.table-hint{margin:0;padding:13px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.employee-modal[hidden]{display:none}.employee-modal{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(9,12,9,.55);cursor:pointer}.employee-modal-panel{position:relative;width:min(540px,92vw);height:100%;overflow:auto;background:#fff;padding:28px;box-shadow:-18px 0 50px rgba(0,0,0,.18)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.modal-head h2{margin:6px 0 0;font-size:30px}.modal-close{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#f4f6f2;font-size:28px;cursor:pointer}.modal-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-metrics>div{padding:15px;border:1px solid var(--line);border-radius:14px;background:#f8faf6;min-width:0}.modal-metrics span{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}.modal-metrics strong{display:block;overflow-wrap:anywhere;font-size:18px}.best-result{margin-top:18px;padding:20px;border-radius:16px;background:#101310;color:#fff}.best-result .eyebrow{color:#aeb7ab}.best-result>strong{display:block;font-size:26px;margin:8px 0}.best-result p{margin:0;color:#c6cec3}.modal-open{overflow:hidden}
@media(max-width:1200px){.control-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-dashboard-grid{grid-template-columns:1fr}.control-kpis .stat strong{font-size:clamp(25px,4vw,36px)}}
@media(max-width:760px){.control-kpis{grid-template-columns:1fr}.control-kpis .stat strong{font-size:32px}.state-row{flex-direction:column;gap:5px}.state-row span,.state-row b{max-width:100%;text-align:left}.premium-head{align-items:stretch;flex-direction:column}.premium-head form{align-items:stretch}.premium-head input,.premium-head button{width:100%}.modal-metrics{grid-template-columns:1fr}.employee-modal-panel{width:100%;padding:20px}.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.quick-grid{grid-template-columns:1fr}.quick-button{min-height:82px}}

/* v6.0.2 — increased inner spacing for main dashboard blocks */
.admin-dashboard-grid > .attention-card,
.admin-dashboard-grid > .leaders-card,
.admin-dashboard-grid > .system-state,
.admin-dashboard-grid > .quick-actions{
  padding:30px 32px 32px;
}

.attention-card .section-title-row{
  margin-bottom:22px;
}
.attention-card .attention-list{
  gap:11px;
}
.attention-card .attention-item{
  padding:15px 16px;
}

.leaders-card > .eyebrow,
.system-state > .eyebrow,
.quick-actions > .eyebrow{
  display:block;
  margin-bottom:8px;
}
.leaders-card > h2,
.system-state > h2,
.quick-actions > h2{
  margin:0 0 22px;
}
.leader-list > a{
  padding:17px 0;
  column-gap:14px;
}
.leader-list > a > b{
  padding-left:14px;
}

.system-state .state-row{
  padding:16px 0;
}
.system-state .state-row:first-of-type{
  border-top:1px solid #e7eae5;
}

.quick-actions .quick-grid{
  gap:12px;
}
.quick-actions .quick-button{
  min-height:108px;
  padding:20px 18px;
}

@media(max-width:760px){
  .admin-dashboard-grid > .attention-card,
  .admin-dashboard-grid > .leaders-card,
  .admin-dashboard-grid > .system-state,
  .admin-dashboard-grid > .quick-actions{
    padding:24px 20px 26px;
  }
}
.logout-button{background:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:.35rem}.sidebar-foot form{margin:0}

.brand-logo {
    width: 120px;
    height: auto;
    display: block;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 20px 16px;
}


/* X-PAY v5 sidebar */

.sidebar{
    width:250px !important;
    background:#090b09 !important;
    border-right:1px solid rgba(255,255,255,.06);
}

.sidebar-brand{
    padding:28px 24px !important;
}

.sidebar-brand .brand-mark{
    display:none !important;
}

.sidebar-brand:before{
    content:"";
    display:block;
    width:125px;
    height:42px;
    background:url('/static/brand/x-pay-logo.svg') center left / contain no-repeat;
}


.side-nav{
    padding:25px 14px !important;
}

.side-nav a{
    border-radius:14px !important;
    margin-bottom:8px;
    padding:14px 16px !important;
    font-weight:800 !important;
}


.side-nav a:hover,
.side-nav a.active{
    background:#20251d !important;
    color:#ffffff !important;
}


.side-nav a span{
    color:#c8ff32;
}


/* X-PAY v5 workspace */

.workspace{
    background:
    radial-gradient(circle at 90% 0%,rgba(200,255,50,.16),transparent 28%),
    #f5f6f2 !important;
}


.workspace-top{
    height:72px !important;
    background:rgba(255,255,255,.9) !important;
    border-bottom:1px solid #e5e8de !important;
    padding:0 40px !important;
}


.workspace-top b{
    font-size:18px;
    letter-spacing:-.03em;
}


.workspace-top span{
    color:#858b80;
}


.container{
    max-width:1700px !important;
    padding:45px !important;
}


.page-head{
    margin-bottom:35px !important;
}


.page-head h1{
    font-size:64px !important;
    letter-spacing:-.06em !important;
}


.hero-note{
    font-size:17px !important;
}


.card{
    border-radius:32px !important;
    border:1px solid #e5e8de !important;
    box-shadow:
    0 20px 60px rgba(15,20,10,.06) !important;
}


button,
.primary,
.secondary{
    border-radius:16px !important;
}


/* X-PAY Sidebar v5 */

.side-group{
  border:0;
  margin:8px 0;
}

.side-group summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  color:#6b7068;
  font-size:13px;
  font-weight:850;
  transition:.2s;
}

.side-group summary::-webkit-details-marker{
  display:none;
}

.side-group summary:hover{
  background:rgba(200,255,50,.18);
  color:var(--dark);
}

.side-group[open] summary{
  background:rgba(200,255,50,.12);
  color:var(--dark);
}

.side-group a{
  display:flex;
  align-items:center;
  margin:4px 0 4px 18px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:#555a52;
  font-size:14px;
  font-weight:700;
  transition:.2s;
}

.side-group a:hover,
.side-group a.active{
  background:var(--dark);
  color:#fff;
}
/* X-PAY Layout v5 */

.app-shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  background:#0b0d0b;
  border-right:1px solid rgba(255,255,255,.06);
}

.workspace{
  flex:1;
  min-width:0;
}

.workspace-top{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(17,19,15,.08);
  backdrop-filter:blur(18px);
}

.workspace-top b{
  font-size:18px;
  letter-spacing:-.03em;
}

.workspace-top span{
  color:#8a8f85;
  font-weight:700;
}

.container{
  max-width:1500px;
  padding:48px 42px 80px;
}

.sidebar-brand{
  padding:30px 26px;
}

.brand-logo{
  width:120px;
  height:auto;
}

.sidebar-foot{
  margin:20px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
}
/* X-PAY Dashboard v5 */

.xp-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:18px;
  margin-bottom:24px;
}


.xp-kpi{
  position:relative;
  overflow:hidden;
  min-height:170px;
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}


.xp-kpi span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}


.xp-kpi strong{
  display:block;
  margin-top:38px;
  font-size:42px;
  line-height:1;
  letter-spacing:-.06em;
}


.xp-kpi small{
  display:block;
  margin-top:12px;
  color:var(--muted);
}


.xp-kpi.acid{
  background:var(--acid);
  border-color:transparent;
}


.xp-kpi.dark{
  background:var(--dark);
  color:#fff;
  border-color:transparent;
}


.xp-kpi.dark span,
.xp-kpi.dark small{
  color:#aeb3aa;
}



.xp-dashboard-columns{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  margin-bottom:18px;
}


.xp-panel{
  padding:28px;
}


.xp-panel h2{
  margin-top:8px;
}
.xp-dashboard-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}


.xp-panel .state-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}


.xp-panel .state-row:last-child{
  border-bottom:0;
}


.xp-panel .state-row span{
  color:var(--muted);
  font-weight:700;
}


.status.success{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:#e8ffc0;
  color:#264000;
  font-size:12px;
}



.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:20px;
}


.quick-button{
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  border-radius:18px;
  background:#f6f7f2;
  text-decoration:none;
  color:var(--dark);
  font-weight:900;
  border:1px solid var(--line);
  cursor:pointer;
}


.quick-button:hover{
  background:var(--acid);
}



@media(max-width:1100px){

.xp-dashboard-grid{
  grid-template-columns:repeat(2,1fr);
}

.xp-dashboard-columns,
.xp-dashboard-bottom{
  grid-template-columns:1fr;
}

}


@media(max-width:700px){

.xp-dashboard-grid{
  grid-template-columns:1fr;
}

.xp-kpi strong{
  font-size:34px;
}

.quick-grid{
  grid-template-columns:1fr;
}

}
/* X-PAY Dashboard Redesign v1 */

.xp-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:30px;
}


.xp-hero h1{
  margin-top:8px;
}


.xp-version{
  background:#10120e;
  color:#c8ff32;
  padding:12px 18px;
  border-radius:16px;
  font-weight:900;
  white-space:nowrap;
}



.xp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:18px;
  margin-bottom:22px;
}



.xp-kpi-card{
  position:relative;
  min-height:170px;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}



.xp-kpi-card:after{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:130px;
  height:130px;
  background:rgba(200,255,50,.16);
  border-radius:40px;
  transform:rotate(25deg);
}



.xp-kpi-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}



.xp-kpi-card strong{
  display:block;
  margin-top:38px;
  font-size:46px;
  line-height:1;
  letter-spacing:-.06em;
}



.xp-kpi-card small{
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-weight:700;
}



.xp-kpi-card.xp-acid{
  background:var(--acid);
  border-color:transparent;
}



.xp-kpi-card.xp-dark{
  background:var(--dark);
  color:white;
  border-color:transparent;
}



.xp-kpi-card.xp-dark span,
.xp-kpi-card.xp-dark small{
  color:#aeb3aa;
}
.xp-main-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
  margin-bottom:20px;
}



.xp-bottom-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}



.xp-dashboard-panel{
  padding:30px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}



.xp-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}



.xp-dashboard-panel h2{
  margin-top:8px;
  margin-bottom:22px;
}



.xp-dashboard-panel .attention-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}



.xp-dashboard-panel .attention-item{
  background:#fafbf7;
  border-radius:16px;
  border:1px solid var(--line);
  padding:14px;
  transition:.2s;
}



.xp-dashboard-panel .attention-item:hover{
  transform:translateX(4px);
}



.xp-dashboard-panel .leader-list>a{
  border-radius:16px;
  padding:16px;
  transition:.2s;
}



.xp-dashboard-panel .leader-list>a:hover{
  background:#f7f9f2;
}



.xp-dashboard-panel .rank-medal{
  background:#f0f3eb;
}



.xp-dashboard-panel .leader-list>a:first-child .rank-medal{
  background:var(--acid);
}



.xp-dashboard-panel .quick-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}



.xp-dashboard-panel .quick-button{
  min-height:100px;
  border-radius:20px;
  background:#f7f8f4;
  border:1px solid var(--line);
  transition:.2s;
}



.xp-dashboard-panel .quick-button:hover{
  background:var(--acid);
  border-color:transparent;
  transform:translateY(-3px);
}



.xp-dashboard-panel .state-row{
  padding:16px 0;
}



@media(max-width:1200px){

.xp-kpi-grid{
  grid-template-columns:repeat(2,1fr);
}


.xp-main-grid,
.xp-bottom-grid{
  grid-template-columns:1fr;
}

}



@media(max-width:760px){

.xp-hero{
  flex-direction:column;
  align-items:flex-start;
}


.xp-kpi-grid{
  grid-template-columns:1fr;
}


.xp-kpi-card strong{
  font-size:34px;
}


.xp-dashboard-panel{
  padding:22px;
}


.xp-dashboard-panel .quick-grid{
  grid-template-columns:1fr;
}

}
/* =========================================
   X-PAY Dashboard Override v2
   Final visual layer
========================================= */


.workspace .container{
    max-width:1700px;
    padding:42px 54px 80px;
}



.xp-hero{
    margin-bottom:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}



.xp-hero h1{
    font-size:64px;
    letter-spacing:-.06em;
    margin:12px 0;
}



.xp-hero .hero-note{
    max-width:600px;
    font-size:16px;
}



.xp-version{
    background:#101310;
    color:#c8ff32;
    border-radius:18px;
    padding:14px 22px;
    font-size:18px;
}



/* KPI AREA */


.xp-kpi-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:30px;
}



.xp-kpi-card{
    min-height:190px;
    padding:30px;
    border-radius:32px;
    border:1px solid #e3e8df;
    background:#ffffff;
    box-shadow:0 18px 40px rgba(20,30,20,.06);
}



.xp-kpi-card span{
    font-size:13px;
    font-weight:900;
    letter-spacing:.15em;
    color:#7d8679;
}



.xp-kpi-card strong{
    font-size:52px;
    display:block;
    margin-top:45px;
    letter-spacing:-.06em;
}



.xp-kpi-card small{
    margin-top:10px;
    display:block;
    color:#8b9387;
}



.xp-kpi-card.xp-acid{
    background:#c8ff32;
    border:none;
}



.xp-kpi-card.xp-acid span,
.xp-kpi-card.xp-acid small{
    color:#334000;
}



.xp-kpi-card.xp-dark{
    background:#101310;
    color:white;
    border:none;
}



.xp-kpi-card.xp-dark span,
.xp-kpi-card.xp-dark small{
    color:#a8afa3;
}



/* MAIN GRID */


.xp-main-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:26px;
    margin-bottom:26px;
}



.xp-bottom-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
}



.xp-dashboard-panel{
    background:#fff;
    border-radius:32px;
    border:1px solid #e3e8df;
    padding:34px;
    box-shadow:0 18px 40px rgba(20,30,20,.05);
}



.xp-dashboard-panel h2{
    font-size:28px;
    letter-spacing:-.04em;
}



/* ATTENTION */


.attention-item{
    min-height:60px;
    border-radius:18px!important;
    background:#fafbf7!important;
}



.attention-item:hover{
    background:#f2f7e7!important;
}



/* LEADERS */


.leader-list>a{
    padding:18px!important;
    border-radius:18px;
}



.leader-list>a:first-child{
    background:#f5ffd9;
}



.rank-medal{
    font-size:16px;
}



/* QUICK ACTIONS */


.quick-button{
    border-radius:22px!important;
    min-height:120px!important;
    font-size:28px!important;
}



.quick-button span{
    font-size:14px!important;
}



/* MOBILE */


@media(max-width:1200px){

.xp-kpi-grid{
    grid-template-columns:repeat(2,1fr);
}


.xp-main-grid,
.xp-bottom-grid{
    grid-template-columns:1fr;
}


.xp-hero h1{
    font-size:46px;
}

}



@media(max-width:700px){

.xp-kpi-grid{
    grid-template-columns:1fr;
}


.xp-hero{
    flex-direction:column;
    align-items:flex-start;
}


.xp-hero h1{
    font-size:38px;
}

}
/* =========================================
   X-PAY Sidebar Redesign v2
========================================= */


.app-shell{
    grid-template-columns:270px minmax(0,1fr);
}



.sidebar{
    background:#0b0d0b;
    padding:28px 20px;
    border-right:1px solid rgba(255,255,255,.06);
}



.sidebar-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:38px;
}



.sidebar-brand img{
    width:150px;
    height:auto;
}



.side-nav{
    gap:10px;
}



.side-nav>a,
.side-group summary{
    min-height:48px;
    padding:0 16px;
    border-radius:16px;
    color:#b8beb5;
    background:transparent;
    font-size:15px;
    font-weight:800;
    transition:.2s ease;
}



.side-nav>a span,
.side-group summary span{
    color:#c8ff32;
    font-size:18px;
}



.side-nav>a:hover,
.side-group summary:hover{
    background:#171b16;
    color:white;
}



.side-nav>a.active{
    background:#c8ff32;
    color:#101310;
}



.side-nav>a.active span{
    color:#101310;
}



.side-group{
    margin:4px 0;
}



.side-group summary{
    cursor:pointer;
    list-style:none;
}



.side-group summary::-webkit-details-marker{
    display:none;
}



.side-group summary:after{
    content:"＋";
    margin-left:auto;
    color:#737b70;
    font-size:14px;
}



.side-group[open] summary:after{
    content:"−";
}



.side-group>a{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 16px 0 50px;
    margin-top:4px;
    border-radius:14px;
    color:#8e968a;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.2s;
}



.side-group>a:hover{
    background:#171b16;
    color:white;
}
.side-nav>a:hover,
.side-group summary:hover{
    background:#171b16;
    color:white;
}



.side-nav>a.active{
    background:#c8ff32;
    color:#101310;
}



.side-nav>a.active span{
    color:#101310;
}



.side-group{
    margin:4px 0;
}



.side-group summary{
    cursor:pointer;
    list-style:none;
}



.side-group summary::-webkit-details-marker{
    display:none;
}



.side-group summary:after{
    content:"＋";
    margin-left:auto;
    color:#737b70;
    font-size:14px;
}



.side-group[open] summary:after{
    content:"−";
}



.side-group>a{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 16px 0 50px;
    margin-top:4px;
    border-radius:14px;
    color:#8e968a;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}



.side-group>a:hover{
    background:#171b16;
    color:white;
}


/* SIDEBAR FOOTER */


.sidebar-foot{
    margin-top:auto;
    padding:18px 12px 0;
    border-top:1px solid rgba(255,255,255,.08);
}



.sidebar-foot strong{
    color:white;
    font-size:15px;
    font-weight:900;
}



.sidebar-foot small{
    margin-top:5px;
    color:#899287;
    font-size:12px;
}



.logout-button{
    width:42px;
    height:42px;
    border-radius:14px;
    border:0;
    background:#c8ff32;
    color:#101310;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
}
.workspace-top{
    height:74px;
    padding:0 40px;
    background:#ffffff;
    border-bottom:1px solid #e4e8df;
}



.workspace-top b{
    font-size:18px;
    font-weight:950;
    color:#101310;
}



.workspace-top span{
    color:#8a9287;
    font-size:13px;
}



@media(max-width:1100px){

.app-shell{
    grid-template-columns:90px minmax(0,1fr);
}


.sidebar{
    padding:20px 10px;
}


.sidebar-brand img{
    width:55px;
}


.side-nav>a,
.side-group summary{
    justify-content:center;
    padding:0;
}


.side-nav>a:not(.active),
.side-group summary{
    font-size:0;
}


.side-group>a{
    display:none;
}


.sidebar-foot strong,
.sidebar-foot small{
    display:none;
}

}



@media(max-width:760px){

.app-shell{
    display:block;
}


.sidebar{
    position:sticky;
    top:0;
    z-index:50;
}


.workspace-top{
    display:none;
}

}
/* =========================================
   X-PAY Header Redesign v3
========================================= */


.workspace-top{
    height:78px;
    padding:0 42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#ffffff;
    border-bottom:1px solid #e5e9e1;
}



.workspace-title{
    display:flex;
    flex-direction:column;
    gap:3px;
}



.workspace-title b{
    font-size:18px;
    font-weight:950;
    letter-spacing:-.03em;
    color:#101310;
}



.workspace-title span{
    font-size:12px;
    color:#8a9287;
    font-weight:700;
}



.workspace-status{
    display:flex;
    align-items:center;
    gap:12px;
}



.status-online{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:999px;
    background:#ecffd0;
    color:#527800;
    font-size:12px;
    font-weight:900;
}



.workspace-version{
    padding:8px 13px;
    border-radius:12px;
    background:#101310;
    color:#c8ff32;
    font-size:12px;
    font-weight:900;
}



@media(max-width:760px){

.workspace-top{
    padding:0 18px;
}


.workspace-title span{
    display:none;
}


.workspace-status{
    gap:6px;
}


.status-online{
    display:none;
}

}
/* =========================================
   X-PAY Dashboard Cards Redesign v3
========================================= */


/* KPI BLOCK */

.control-kpis{
    gap:18px;
}



.control-kpis .stat{
    position:relative;
    overflow:hidden;
    min-height:128px;
    padding:22px 22px;
    border-radius:22px;
    background:#ffffff;
    border:1px solid #e4e9df;
    box-shadow:0 12px 35px rgba(15,20,15,.04);
    transition:.25s ease;
}



.control-kpis .stat:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 45px rgba(15,20,15,.08);
}



.control-kpis .stat:after{
    content:"";
    position:absolute;
    right:-35px;
    bottom:-35px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:#f1ffd8;
}



.control-kpis .stat span{
    position:relative;
    z-index:2;
    display:block;
    color:#7e877b;
    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}



.control-kpis .stat strong{
    position:relative;
    z-index:2;
    display:block;
    margin-top:18px;
    font-size:38px;
    line-height:1;
    letter-spacing:-.05em;
    color:#101310;
}



.control-kpis .stat small{
    position:relative;
    z-index:2;
    display:block;
    margin-top:10px;
    color:#8d968b;
    font-size:13px;
    font-weight:700;
}



/* FIRST KPI */

.control-kpis .stat:first-child{
    background:#c8ff32;
    border-color:#c8ff32;
}



.control-kpis .stat:first-child span,
.control-kpis .stat:first-child small{
    color:#273000;
}



.control-kpis .stat:first-child:after{
    background:rgba(255,255,255,.25);
}



/* WEEK KPI */

.control-kpis .stat:nth-child(2){
    background:#101310;
    border-color:#101310;
}



.control-kpis .stat:nth-child(2) span,
.control-kpis .stat:nth-child(2) small,
.control-kpis .stat:nth-child(2) strong{
    color:#ffffff;
}



.control-kpis .stat:nth-child(2):after{
    background:rgba(200,255,50,.15);
}
/* =========================================
   DASHBOARD CONTENT PANELS
========================================= */


.admin-dashboard-grid{
    gap:22px;
}



.admin-dashboard-grid > .card{
    border-radius:24px;
    border:1px solid #e4e9df;
    background:#ffffff;
    box-shadow:0 12px 35px rgba(15,20,15,.035);
    transition:.25s ease;
}



.admin-dashboard-grid > .card:hover{
    box-shadow:0 18px 45px rgba(15,20,15,.07);
}



/* SECTION TITLES */


.section-title-row h2,
.admin-dashboard-grid h2{
    letter-spacing:-.04em;
    font-size:22px;
}



/* QUALITY */


.quality-ring{
    width:76px;
    height:76px;
    background:#101310;
    color:#c8ff32;
    font-size:28px;
    font-weight:950;
}



.attention-list{
    gap:12px;
}



.attention-item{
    min-height:58px;
    padding:14px 16px;
    border-radius:16px;
    background:#fbfcfa;
    border-color:#e5e9df;
    transition:.2s ease;
}



.attention-item:hover{
    background:#f5fbe9;
    border-color:#c8ff32;
}



.attention-item > span{
    width:34px;
    height:34px;
    border-radius:12px;
}



/* LEADERS */


.leaders-card{
    overflow:hidden;
}



.leader-list>a{
    padding:16px 14px;
    border-radius:16px;
    border-bottom:0;
    margin-bottom:8px;
    transition:.2s;
}



.leader-list>a:hover{
    background:#f6faee;
}



.leader-list>a:first-child{
    background:#f1ffd8;
}



.rank-medal{
    background:#101310;
    color:#ffffff;
}



.leader-list>a:first-child .rank-medal{
    background:#c8ff32;
    color:#101310;
}



/* SYSTEM CARD */


.system-state .state-row{
    padding:16px 0;
}



.state-row b{
    font-weight:900;
    color:#101310;
}



/* QUICK ACTIONS */


.quick-grid{
    gap:14px;
}



.quick-button{
    min-height:110px;
    border-radius:18px;
    background:#fafcf8;
    border-color:#e4e9df;
    transition:.25s ease;
}



.quick-button:hover{
    background:#c8ff32;
    border-color:#c8ff32;
    transform:translateY(-3px);
}
/* =========================================
   DASHBOARD FINAL POLISH
========================================= */


.control-head{
    margin-bottom:32px;
}



.control-head h1{
    letter-spacing:-.06em;
}



.dashboard-date{
    background:#101310;
    color:#c8ff32;
    border-radius:14px;
    padding:10px 16px;
    font-weight:950;
}



.control-kpis,
.admin-dashboard-grid{
    animation:dashboardFade .45s ease;
}



@keyframes dashboardFade{

from{
    opacity:0;
    transform:translateY(10px);
}

to{
    opacity:1;
    transform:none;
}

}



/* REMOVE EXCESS BORDER FEEL */


.card{
    background:#ffffff;
}



/* BETTER EMPTY SPACE */


.leaders-card{
    min-height:380px;
}



.attention-card{
    min-height:380px;
}



/* QUICK ACTION ACCENT */


.quick-button:first-child:hover,
.quick-button:nth-child(3):hover{
    color:#101310;
}



/* VERSION BADGE */


.workspace-version,
.dashboard-date{
    letter-spacing:.05em;
}



/* MOBILE FINAL */


@media(max-width:1100px){

.control-kpis{
    gap:14px;
}


.control-kpis .stat{
    min-height:110px;
}


.control-kpis .stat strong{
    font-size:32px;
}


}



@media(max-width:760px){

.control-head{
    margin-bottom:20px;
}


.control-kpis .stat strong{
    font-size:28px;
}


.admin-dashboard-grid > .card{
    border-radius:20px;
}

}
/* =========================================
   X-PAY Dashboard Density v1
   Part 1
========================================= */


/* tighter workspace */

.workspace .container{
    padding-top:26px;
}



/* header compact */

.control-head{
    margin-bottom:24px;
}


.control-head .hero-note{
    max-width:620px;
}



/* KPI more compact */

.control-kpis{
    gap:14px;
    margin-bottom:18px;
}



.control-kpis .stat{
    min-height:118px;
    padding:18px 20px;
    border-radius:20px;
}



.control-kpis .stat strong{
    margin-top:14px;
    font-size:34px;
}



.control-kpis .stat small{
    margin-top:8px;
}



/* main panels */


.admin-dashboard-grid{
    gap:18px;
}



.admin-dashboard-grid > .card{
    border-radius:20px;
}



/* attention panel */

.attention-card,
.leaders-card{
    min-height:330px;
}



.attention-list{
    gap:8px;
}



.attention-item{
    padding:10px 14px;
    min-height:52px;
}



/* leaders compact */


.leader-list>a{
    padding:12px;
}



.leaders-card{
    min-height:330px;
}
/* =========================================
   X-PAY Dashboard Density v1
   Part 2
========================================= */


/* ATTENTION CENTER */


.attention-card h2{
    margin-bottom:16px;
}



.attention-card .attention-item{
    display:grid;
    grid-template-columns:34px 1fr 24px;
    align-items:center;
}



.attention-item strong{
    font-size:14px;
    font-weight:850;
}



.attention-item small{
    font-size:12px;
}



/* add operational feeling */

.attention-card .section-title-row{
    align-items:center;
}



.attention-card .quality-ring{
    width:64px;
    height:64px;
    font-size:23px;
}



/* LEADER BOARD */


.leaders-card{
    position:relative;
}



.leaders-card:after{
    content:"ТОП";
    position:absolute;
    right:22px;
    top:22px;
    padding:5px 10px;
    border-radius:999px;
    background:#101310;
    color:#c8ff32;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}



.leader-list{
    margin-top:12px;
}



.leader-list>a{
    display:grid;
    grid-template-columns:38px 1fr auto;
    min-height:62px;
}



.leader-list strong{
    font-size:15px;
}



.leader-list small{
    font-size:12px;
}



.leader-list b{
    font-size:15px;
}



/* SYSTEM + ACTIONS */


.system-state,
.quick-actions{
    min-height:260px;
}



.system-state h2,
.quick-actions h2{
    margin-bottom:16px;
}



.state-row{
    padding:12px 0;
}



/* QUICK ACTIONS MORE COMPACT */


.quick-button{
    min-height:92px;
    border-radius:16px;
}



.quick-button span{
    font-size:12px;
}
/* =========================================
   X-PAY Dashboard Density v1
   Part 3 FINAL
========================================= */


/* STATUS FEEL */


.system-state .state-row:last-child{
    border-bottom:0;
}



.system-state .state-row b{
    display:flex;
    align-items:center;
    gap:8px;
}



.system-state .state-row:last-child b:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c8ff32;
    display:inline-block;
}



/* QUICK ACTIONS */


.quick-actions{
    position:relative;
    overflow:hidden;
}



.quick-actions:before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-50px;
    bottom:-50px;
    border-radius:50%;
    background:#f2ffd9;
}



.quick-grid{
    position:relative;
    z-index:2;
}



.quick-button{
    justify-content:center;
    align-items:center;
    text-align:center;
}



.quick-button:first-child{
    background:#101310;
    color:white;
    border-color:#101310;
}



.quick-button:first-child:hover{
    background:#c8ff32;
    color:#101310;
}



/* CARD SEPARATION */


.attention-card:before,
.leaders-card:before,
.system-state:before,
.quick-actions:before{
    pointer-events:none;
}



/* FINAL SPACING */


.admin-dashboard-grid{
}


/* =========================================
   X-PAY Sidebar Polish v3
========================================= */


/* Active submenu */

.side-group > a.active{

    background:#c8ff32;
    color:#101310;

    font-weight:900;

    border-radius:12px;

    position:relative;

}


.side-group > a.active::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    bottom:8px;

    width:4px;

    background:#101310;

    border-radius:4px;

}



/* Submenu indentation */

.side-group > a{

    margin-left:12px;

    padding-left:18px;

}



/* Summary arrow */

.side-group summary{

    position:relative;

    display:flex;

    justify-content:space-between;

}



.side-group summary::after{

    content:"›";

    font-size:18px;

    color:#8f978b;

    transition:.2s ease;

}



.side-group[open] summary::after{

    transform:rotate(90deg);

    color:#c8ff32;

}



/* Hover */

.side-group > a:hover{

    background:#20251f;

    color:#ffffff;

}



/* Active hover */

.side-group > a.active:hover{

    background:#c8ff32;

    color:#101310;

}




/* =========================================
   X-PAY Sidebar Marker Cleanup v4
========================================= */


/* remove browser details marker */

.side-group summary::-webkit-details-marker{
    display:none;
}

.side-group summary::marker{
    content:"";
}


/* universal active submenu */

.side-group a.active{

    background:#c8ff32;

    color:#101310;

    font-weight:900;

    border-radius:12px;

    position:relative;

}


.side-group a.active::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    bottom:8px;

    width:4px;

    background:#101310;

    border-radius:5px;

}




/* =========================================
   X-PAY Employee Cards v1
   Part 1
========================================= */


.employee-head{
    margin-bottom:24px;
}



.employee-add-form{
    margin-bottom:24px;
}



.employee-grid-v2{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));

    gap:18px;

}



.employee-card-v2{

    padding:0;

    overflow:hidden;

    border-radius:22px;

    transition:
    transform .2s ease,
    box-shadow .2s ease;

}



.employee-card-main{

    display:block;

    padding:22px;

    text-decoration:none;

    color:inherit;

}



.employee-card-top{

    display:flex;

    align-items:center;

    gap:15px;

}



.employee-info{

    min-width:0;

    flex:1;

}



.employee-info h3{

    margin:0 0 8px;

    font-size:20px;

    font-weight:900;

}



.employee-card-divider{

    height:1px;

    background:var(--line);

    margin:18px 0;

}



.employee-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-weight:800;

}



.employee-actions{

    padding:0 22px 22px;

}




/* =========================================
   X-PAY Employee Cards v1
   Part 2
========================================= */


/* Avatar */


.employee-avatar-v2{

    width:64px;

    height:64px;

    border-radius:20px;

    background:#101310;

    color:#c8ff32;

    display:grid;

    place-items:center;

    font-size:28px;

    font-weight:950;

    flex-shrink:0;

}



/* Status */


.employee-status{

    display:inline-flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    font-weight:800;

}



.employee-status span{

    width:8px;

    height:8px;

    border-radius:50%;

}



.employee-status.active{

    color:#347000;

}



.employee-status.active span{

    background:#c8ff32;

}



.employee-status.disabled{

    color:#8b9188;

}



.employee-status.disabled span{

    background:#b5b9b2;

}



/* Toggle button */


.employee-toggle{

    width:100%;

    border:1px solid var(--line);

    background:#f5f7f3;

    border-radius:14px;

    padding:13px;

    font-weight:900;

    cursor:pointer;

    transition:.2s ease;

}



.employee-toggle:hover{

    background:#101310;

    color:#ffffff;

    border-color:#101310;

}





/* =========================================
   X-PAY Employee Cards v1
   Part 3 FINAL
========================================= */


/* Card hover */


.employee-card-v2:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 45px rgba(0,0,0,.08);

}



/* clickable area */


.employee-card-main:hover{

    color:inherit;

}



/* Arrow */


.employee-card-footer b{

    font-size:20px;

    transition:.2s ease;

}



.employee-card-v2:hover 
.employee-card-footer b{

    transform:translateX(5px);

}



/* Empty state */


.employee-grid-v2 .empty-state{

    grid-column:1/-1;

}



/* Desktop balance */


@media(min-width:1400px){

.employee-grid-v2{

    grid-template-columns:
    repeat(4,minmax(260px,1fr));

}

}



/* Tablet */


@media(max-width:1100px){

.employee-grid-v2{

    grid-template-columns:
    repeat(2,minmax(260px,1fr));

}

}



/* Mobile */


@media(max-width:760px){

.employee-grid-v2{

    grid-template-columns:1fr;

}


.employee-card-main{

    padding:18px;

}


.employee-actions{

    padding:
    0 18px 18px;

}

}




/* =========================================
   X-PAY Employee System v2
   New Card Design
========================================= */


/* Container */

.employee-list-v2{

    display:grid;

    grid-template-columns:
    repeat(2,minmax(320px,1fr));

    gap:18px;

    margin-top:18px;

}



/* Add panel */

.employee-create-panel{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    border-radius:24px;

    margin-bottom:10px;

}



.employee-create-panel input{

    max-width:220px;

}



/* Card */

.employee-card-new{

    background:#ffffff;

    border:1px solid #e5e9e1;

    border-radius:24px;

    padding:20px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

    transition:.25s ease;

}



.employee-card-new:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 45px rgba(0,0,0,.10);

}



/* Top */


.employee-main-new{

    display:flex;

    align-items:center;

    gap:16px;

}



.employee-avatar-new{

    width:58px;

    height:58px;

    border-radius:18px;

    background:#101310;

    color:#c8ff32;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:950;

}



.employee-data-new h3{

    margin:0 0 8px;

    font-size:20px;

    font-weight:950;

    color:#101310;

}



/* Status */


.employee-status-new{

    display:flex;

    align-items:center;

    gap:7px;

    color:#687064;

    font-size:13px;

    font-weight:700;

}



.employee-status-new span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#c8ff32;

}



/* Divider */


.employee-divider-new{

    height:1px;

    background:#e8ece4;

    margin:20px 0;

}



/* Profile link */


.employee-profile-link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#101310;

    text-decoration:none;

    font-weight:850;

    padding:4px 0;

}



.employee-profile-link b{

    font-size:20px;

    transition:.2s;

}



.employee-profile-link:hover b{

    transform:translateX(5px);

}



/* Admin button */


.employee-admin-button{

    width:100%;

    margin-top:16px;

    height:42px;

    border-radius:14px;

    border:none;

    background:#c8ff32;

    color:#101310;

    font-weight:900;

    cursor:pointer;

    transition:.2s;

}



.employee-admin-button:hover{

    background:#101310;

    color:#ffffff;

}



/* Responsive */


@media(max-width:900px){

    .employee-list-v2{

        grid-template-columns:1fr;

    }

}



@media(max-width:600px){

    .employee-create-panel{

        flex-direction:column;

        align-items:stretch;

    }

    .employee-create-panel input{

        max-width:none;

    }

}




/* =========================================
   X-PAY EMPLOYEE CARDS FINAL OVERRIDE
========================================= */


.employee-list-v2{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(320px,1fr)) !important;
    gap:20px !important;
}


.employee-card-new{

    display:block !important;
    background:#ffffff !important;
    border:1px solid #e5e9e1 !important;
    border-radius:24px !important;
    padding:22px !important;
    min-height:170px !important;

}


.employee-main-new{

    display:flex !important;
    align-items:center !important;
    gap:16px !important;

}


.employee-avatar-new{

    width:58px !important;
    height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#c8ff32 !important;
    color:#101310 !important;

    border-radius:18px !important;

    font-size:28px !important;
    font-weight:900 !important;

}


.employee-data-new h3{

    margin:0 !important;

    font-size:20px !important;

    font-weight:900 !important;

}


.employee-status-new{

    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    margin-top:6px !important;

}


.employee-status-new span{

    display:block !important;

    width:8px !important;
    height:8px !important;

    border-radius:50% !important;

    background:#c8ff32 !important;

}


.employee-profile-link{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    margin-top:20px !important;

}


.employee-admin-button{

    display:block !important;

    width:100% !important;

    margin-top:16px !important;

    height:42px !important;

    background:#c8ff32 !important;

    color:#101310 !important;

    border-radius:14px !important;

}


@media(max-width:900px){

.employee-list-v2{

grid-template-columns:1fr !important;

}

}



/* Employee profile spacing fix */

.profile-layout > .card{
    padding:32px !important;
}

.profile-layout .eyebrow{
    margin-bottom:18px !important;
}

.profile-layout h2{
    margin-top:0 !important;
    margin-bottom:26px !important;
}

.profile-layout .table-card th,
.profile-layout .table-card td{
    padding:18px !important;
}

.notes-card textarea{
    min-height:120px !important;
    padding:16px !important;
    border-radius:16px !important;
}

.notes-card button{
    margin-top:12px !important;
    height:48px !important;
}



/* =========================================
   X-PAY UI COMPONENTS v1.0
   DESIGN TOKENS
========================================= */

:root{

    /* Brand */

    --xpay-green:#c8ff32;
    --xpay-black:#101310;
    --xpay-dark:#171b16;

    /* Background */

    --xpay-bg:#f5f7f2;
    --xpay-card:#ffffff;

    /* Text */

    --xpay-text:#171b16;
    --xpay-muted:#7d857a;

    /* Border */

    --xpay-border:#e4e8df;

    /* Radius */

    --xpay-radius-sm:12px;
    --xpay-radius-md:16px;
    --xpay-radius-lg:24px;

    /* Shadows */

    --xpay-shadow:
    0 10px 30px rgba(16,19,16,.06);


    /* Spacing */

    --xpay-space-1:8px;
    --xpay-space-2:16px;
    --xpay-space-3:24px;
    --xpay-space-4:32px;

}



/* =========================================
   X-PAY UI COMPONENTS v1.0
   CARD SYSTEM
========================================= */


/* Base card */

.x-card{

    background:var(--xpay-card);

    border:1px solid var(--xpay-border);

    border-radius:var(--xpay-radius-lg);

    box-shadow:var(--xpay-shadow);

    padding:var(--xpay-space-3);

    transition:.25s ease;

}


.x-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 18px 45px rgba(16,19,16,.09);

}



/* Dark card */

.x-card-dark{

    background:var(--xpay-black);

    color:#ffffff;

    border-radius:var(--xpay-radius-lg);

    padding:var(--xpay-space-3);

    box-shadow:
    0 15px 40px rgba(0,0,0,.18);

}



.x-card-dark .muted{

    color:#aeb5aa;

}



/* KPI card */

.x-kpi{

    position:relative;

    overflow:hidden;

    background:var(--xpay-card);

    border:1px solid var(--xpay-border);

    border-radius:var(--xpay-radius-lg);

    padding:28px;

    min-height:150px;

    box-shadow:var(--xpay-shadow);

}



.x-kpi::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    bottom:-40px;

    border-radius:50%;

    background:rgba(200,255,50,.18);

}



.x-kpi-title{

    position:relative;

    z-index:2;

    color:var(--xpay-muted);

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.12em;

}



.x-kpi-value{

    position:relative;

    z-index:2;

    display:block;

    margin-top:20px;

    font-size:42px;

    font-weight:950;

    letter-spacing:-.05em;

}



.x-kpi-note{

    position:relative;

    z-index:2;

    margin-top:10px;

    color:var(--xpay-muted);

    font-size:13px;

}



.x-kpi-green{

    background:var(--xpay-green);

    border-color:transparent;

}



.x-kpi-dark{

    background:var(--xpay-black);

    color:#fff;

    border-color:transparent;

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   BUTTON SYSTEM
========================================= */


/* Base button */

.x-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:46px;

    padding:0 20px;

    border-radius:16px;

    border:1px solid transparent;

    font-size:14px;

    font-weight:900;

    cursor:pointer;

    text-decoration:none;

    transition:.2s ease;

}


/* Primary */

.x-btn-primary{

    background:var(--xpay-green);

    color:var(--xpay-black);

}


.x-btn-primary:hover{

    background:#b8f000;

    transform:translateY(-2px);

}



/* Dark */

.x-btn-dark{

    background:var(--xpay-black);

    color:#ffffff;

}


.x-btn-dark:hover{

    background:#252b23;

    transform:translateY(-2px);

}



/* Secondary */

.x-btn-secondary{

    background:#f5f7f2;

    color:var(--xpay-text);

    border-color:var(--xpay-border);

}


.x-btn-secondary:hover{

    background:#ffffff;

    border-color:#cdd4c6;

}



/* Danger */

.x-btn-danger{

    background:#ffe5e5;

    color:#a52020;

    border-color:#f3b8b8;

}


.x-btn-danger:hover{

    background:#ffd2d2;

}



/* Small */

.x-btn-sm{

    height:36px;

    padding:0 14px;

    border-radius:12px;

    font-size:13px;

}



/* Full width */

.x-btn-full{

    width:100%;

}


EOFcd /opt/xpay-admin/app && cat >> static/style.css <<'EOF'


/* =========================================
   X-PAY UI COMPONENTS v1.0
   BUTTON SYSTEM
========================================= */


/* Base button */

.x-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:46px;

    padding:0 20px;

    border-radius:16px;

    border:1px solid transparent;

    font-size:14px;

    font-weight:900;

    cursor:pointer;

    text-decoration:none;

    transition:.2s ease;

}


/* Primary */

.x-btn-primary{

    background:var(--xpay-green);

    color:var(--xpay-black);

}


.x-btn-primary:hover{

    background:#b8f000;

    transform:translateY(-2px);

}



/* Dark */

.x-btn-dark{

    background:var(--xpay-black);

    color:#ffffff;

}


.x-btn-dark:hover{

    background:#252b23;

    transform:translateY(-2px);

}



/* Secondary */

.x-btn-secondary{

    background:#f5f7f2;

    color:var(--xpay-text);

    border-color:var(--xpay-border);

}


.x-btn-secondary:hover{

    background:#ffffff;

    border-color:#cdd4c6;

}



/* Danger */

.x-btn-danger{

    background:#ffe5e5;

    color:#a52020;

    border-color:#f3b8b8;

}


.x-btn-danger:hover{

    background:#ffd2d2;

}



/* Small */

.x-btn-sm{

    height:36px;

    padding:0 14px;

    border-radius:12px;

    font-size:13px;

}



/* Full width */

.x-btn-full{

    width:100%;

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   FORMS SYSTEM
========================================= */


/* Form group */

.x-form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}


/* Label */

.x-label{

    font-size:13px;

    font-weight:900;

    color:var(--xpay-text);

}



/* Inputs */

.x-input,
.x-select,
.x-textarea{

    width:100%;

    background:#ffffff;

    border:1px solid var(--xpay-border);

    color:var(--xpay-text);

    border-radius:16px;

    font-size:15px;

    padding:0 16px;

    transition:.2s ease;

}



/* Input height */

.x-input,
.x-select{

    height:48px;

}



/* Textarea */

.x-textarea{

    min-height:120px;

    padding:16px;

    resize:vertical;

}



/* Focus */

.x-input:focus,
.x-select:focus,
.x-textarea:focus{

    outline:none;

    border-color:var(--xpay-green);

    box-shadow:
    0 0 0 4px rgba(200,255,50,.18);

}



/* Disabled */

.x-input:disabled,
.x-select:disabled,
.x-textarea:disabled{

    background:#f1f3ee;

    color:#9aa195;

}



/* Form row */

.x-form-row{

    display:flex;

    gap:16px;

}


@media(max-width:700px){

    .x-form-row{

        flex-direction:column;

    }

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   TABLE SYSTEM
========================================= */


/* Table wrapper */

.x-table-card{

    background:var(--xpay-card);

    border:1px solid var(--xpay-border);

    border-radius:var(--xpay-radius-lg);

    overflow:hidden;

    box-shadow:var(--xpay-shadow);

}



/* Table */

.x-table{

    width:100%;

    border-collapse:collapse;

}



/* Header */

.x-table thead th{

    background:#f8faf6;

    color:var(--xpay-muted);

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.1em;

    padding:16px 20px;

    text-align:left;

    border-bottom:1px solid var(--xpay-border);

}



/* Rows */

.x-table tbody td{

    padding:18px 20px;

    border-bottom:1px solid var(--xpay-border);

    font-size:14px;

    color:var(--xpay-text);

}



/* Last row */

.x-table tbody tr:last-child td{

    border-bottom:none;

}



/* Hover */

.x-table tbody tr{

    transition:.2s ease;

}


.x-table tbody tr:hover{

    background:#f8fbf1;

}



/* Compact */

.x-table-compact td,
.x-table-compact th{

    padding:12px 16px;

}



/* Responsive */

.x-table-scroll{

    overflow-x:auto;

    width:100%;

}


@media(max-width:700px){

    .x-table{

        min-width:700px;

    }

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   BADGE & STATUS SYSTEM
========================================= */


/* Badge base */

.x-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:900;

    line-height:1;

}


/* Success */

.x-badge-success{

    background:#e9ffd0;

    color:#426900;

}



/* Warning */

.x-badge-warning{

    background:#fff2c7;

    color:#856000;

}



/* Danger */

.x-badge-danger{

    background:#ffe4e4;

    color:#a52020;

}



/* Info */

.x-badge-info{

    background:#e7f0ff;

    color:#285aa8;

}



/* Dark */

.x-badge-dark{

    background:var(--xpay-black);

    color:var(--xpay-green);

}



/* Status dot */

.x-status-dot{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:800;

}


.x-status-dot::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#b8beb5;

}



/* Dot states */

.x-status-dot.success::before{

    background:var(--xpay-green);

}


.x-status-dot.warning::before{

    background:#f5b400;

}


.x-status-dot.danger::before{

    background:#e34c5e;

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   MODAL SYSTEM
========================================= */


/* Overlay */

.x-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(10,12,10,.55);

    backdrop-filter:blur(8px);

    z-index:1000;

}



/* Hidden */

.x-modal.hidden{

    display:none;

}



/* Box */

.x-modal-box{

    width:min(560px,100%);

    background:#ffffff;

    border-radius:28px;

    border:1px solid var(--xpay-border);

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);

    overflow:hidden;

}



/* Header */

.x-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid var(--xpay-border);

}



.x-modal-header h2{

    margin:0;

    font-size:24px;

}



/* Body */

.x-modal-body{

    padding:24px;

}



/* Footer */

.x-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    background:#fafbf8;

    border-top:1px solid var(--xpay-border);

}



/* Close */

.x-modal-close{

    width:38px;

    height:38px;

    border-radius:12px;

    border:0;

    background:#f1f3ee;

    cursor:pointer;

    font-size:20px;

}




/* =========================================
   X-PAY UI COMPONENTS v1.0
   LAYOUT HELPERS
========================================= */


/* Container */

.x-container{

    width:100%;

    max-width:1700px;

    margin:0 auto;

    padding:42px 48px;

}



/* Page Header */

.x-page-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:24px;

    margin-bottom:32px;

}



.x-page-title{

    margin:0;

    font-size:42px;

    font-weight:950;

    letter-spacing:-.06em;

}



.x-page-subtitle{

    margin-top:8px;

    color:var(--xpay-muted);

    font-size:15px;

}



/* Sections */

.x-section{

    margin-bottom:24px;

}



/* Grids */

.x-grid-2{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

}



.x-grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px;

}



.x-grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

}



/* Divider */

.x-divider{

    height:1px;

    width:100%;

    background:var(--xpay-border);

    margin:24px 0;

}



/* Empty State */

.x-empty{

    padding:48px 24px;

    text-align:center;

    background:#ffffff;

    border:1px dashed var(--xpay-border);

    border-radius:24px;

}



.x-empty h3{

    margin:0 0 8px;

    font-size:22px;

}



.x-empty p{

    margin:0;

    color:var(--xpay-muted);

}



/* Responsive */

@media(max-width:1100px){

    .x-grid-4{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }


}


@media(max-width:760px){

    .x-container{

        padding:28px 18px;

    }


    .x-page-head{

        flex-direction:column;

        align-items:flex-start;

    }


    .x-grid-2,
    .x-grid-3,
    .x-grid-4{

        grid-template-columns:1fr;

    }


    .x-page-title{

        font-size:34px;

    }

}




/* =========================================
   X-PAY SCHEDULE v2.0
========================================= */


/* Employee card */


.schedule-employee-card{

    padding:24px;

}


.schedule-employee-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:24px;

}



.schedule-employee-head h3{

    margin:0 0 8px;

    font-size:22px;

}



.x-kpi-mini{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:70px;

    height:70px;

    border-radius:18px;

    background:var(--xpay-green);

    color:var(--xpay-black);

}


.x-kpi-mini span{

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

}


.x-kpi-mini strong{

    font-size:28px;

    line-height:1;

}



/* Days */


.schedule-days{

    display:grid;

    grid-template-columns:repeat(7,minmax(70px,1fr));

    gap:10px;

}



.schedule-day{

    padding:12px 8px;

    border-radius:18px;

    background:#f8faf6;

    border:1px solid var(--xpay-border);

    text-align:center;

}



.schedule-day-title{

    font-size:12px;

    font-weight:900;

    color:var(--xpay-muted);

    margin-bottom:8px;

}


.schedule-day-title small{

    font-size:11px;

}



/* Select */


.schedule-select{

    height:42px;

    padding:0 8px;

    text-align:center;

    font-weight:900;

}



/* Operator days */


.x-day-card{

    text-align:center;

    padding:20px;

}



.x-day-name{

    display:block;

    font-weight:900;

    font-size:18px;

}



.x-shift-number{

    margin-top:16px;

    display:grid;

    place-items:center;

    width:52px;

    height:52px;

    margin-left:auto;

    margin-right:auto;

    border-radius:16px;

    background:#f0f2ec;

    font-size:24px;

    font-weight:950;

}



/* Shift colors */


.shift-1{

    background:#e8ffd0;

    color:#426900;

}



.shift-2{

    background:#eee5ff;

    color:#6840a8;

}



.shift-3{

    background:#dff2ff;

    color:#125b8c;

}



.shift-4{

    background:#ffe8cf;

    color:#9a5100;

}



@media(max-width:1000px){

    .schedule-days{

        grid-template-columns:repeat(4,1fr);

    }

}



@media(max-width:700px){

    .schedule-days{

        grid-template-columns:repeat(2,1fr);

    }


    .schedule-employee-head{

        align-items:flex-start;

        flex-direction:column;

    }

}



/* =========================================
   Schedule Shift Picker v1.1
========================================= */


.schedule-day{

    background:#ffffff;

    border:1px solid var(--xpay-border);

    border-radius:18px;

    padding:14px;

    min-height:92px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:10px;

}


.schedule-day-title{

    text-align:center;

    color:var(--xpay-muted);

    font-size:13px;

    font-weight:900;

}


.schedule-day-title small{

    font-size:12px;

}


.schedule-select{

    height:38px !important;

    padding:0 10px !important;

    text-align:center;

    font-weight:900;

    cursor:pointer;

    background:#f8faf6;

}



/* Active shifts */


.schedule-select:has(option[value="1"]:checked){

    background:var(--xpay-green);

    border-color:var(--xpay-green);

    color:var(--xpay-black);

}


.schedule-select:has(option[value="2"]:checked){

    background:#e7f0ff;

    border-color:#b7d0ff;

    color:#285aa8;

}


.schedule-select:has(option[value="3"]:checked){

    background:var(--xpay-black);

    border-color:var(--xpay-black);

    color:white;

}


.schedule-select:has(option[value="4"]:checked){

    background:#fff1d6;

    border-color:#ffd18a;

    color:#9a6200;

}




/* =========================================
   Schedule v1.1.1 Polish
========================================= */


/* Employee cards */

.schedule-employee-card{

    padding:28px !important;

    min-height:230px;

}


.schedule-employee-head{

    margin-bottom:22px;

}


.x-kpi-mini{

    min-width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:var(--xpay-green);

    color:var(--xpay-black);

}


.x-kpi-mini span{

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

}


.x-kpi-mini strong{

    font-size:24px;

    line-height:1;

}



/* Days */

.schedule-days{

    gap:12px !important;

}


.schedule-day{

    transition:.2s ease;

}


.schedule-day:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(16,19,16,.08);

}



.schedule-day-title{

    line-height:1.2;

}


.schedule-day-title small{

    display:block;

    margin-top:4px;

}



/* Select clean */

.schedule-select{

    appearance:none !important;

    -webkit-appearance:none !important;

    text-align:center;

    font-size:15px !important;

}



/* Empty shift */

.schedule-select option[value=""]{

    color:#9aa195;

}



/* Responsive */

@media(max-width:900px){

    .schedule-employee-card{

        padding:20px !important;

    }

}




/* =========================================
   Schedule v1.3 Employee Stats
========================================= */


.schedule-week-stats{

    margin:20px 0;

    padding:18px;

    background:#f8faf6;

    border:1px solid var(--xpay-border);

    border-radius:20px;

}


.schedule-stats-title{

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--xpay-muted);

    margin-bottom:10px;

}


.schedule-stats-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    font-weight:800;

    margin-bottom:14px;

}


.schedule-stats-total strong{

    font-size:24px;

    color:var(--xpay-black);

}


.schedule-shift-list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

}


.shift-stat{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 6px;

    border-radius:12px;

    font-size:12px;

    font-weight:900;

    background:#ffffff;

    border:1px solid var(--xpay-border);

}


.shift-stat.shift-1{

    background:#e9ffd0;

    color:#426900;

}


.shift-stat.shift-2{

    background:#e7f0ff;

    color:#285aa8;

}


.shift-stat.shift-3{

    background:#101310;

    color:#ffffff;

}


.shift-stat.shift-4{

    background:#fff1d6;

    color:#9a6200;

}


@media(max-width:900px){

    .schedule-shift-list{

        grid-template-columns:repeat(2,1fr);

    }

}