.payroll-section{--payroll-accent:#7dd3fc;--payroll-green:#67e8a5}
.payroll-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.payroll-head h3{margin:7px 0 6px;font-size:24px;letter-spacing:-.02em}
.payroll-head .muted{max-width:820px}
.payroll-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.payroll-actions label{display:flex;align-items:center;gap:8px;font-size:11px;color:#a6b3c5}
.payroll-actions input{width:158px;min-width:0;padding:8px 10px;border-radius:9px;color-scheme:dark}
.payroll-actions .btn{padding:8px 12px;font-size:12px;border-radius:9px}
.payroll-tabs{display:flex;gap:4px;margin:0;padding:4px;border:1px solid #273247;border-radius:11px;background:#0e141e}
.payroll-tabs button{border:1px solid transparent;background:transparent;color:#9faec2;border-radius:8px;padding:8px 13px;cursor:pointer;font-size:12px;font-weight:600;transition:background .18s ease,color .18s ease}
.payroll-tabs button:hover{background:#182235;color:#e8effa}
.payroll-tabs button.active{background:#203756;color:#eff6ff;border-color:#355375;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.payroll-tabs button:focus-visible{outline:2px solid #81b6ff;outline-offset:2px}
.payroll-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 16px}
.payroll-kpi{position:relative;overflow:hidden;background:linear-gradient(180deg,#121820,#0f151c);border:1px solid var(--line,#27303a);border-radius:13px;padding:13px 15px;min-height:96px}
.payroll-kpi:after{content:"";position:absolute;right:-26px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:rgba(125,211,252,.04)}
.payroll-kpi span{font-size:11px;color:#8ba3c7}
.payroll-kpi strong{display:block;margin-top:7px;font-size:23px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.payroll-kpi small{display:block;margin-top:5px;color:var(--muted,#7d8796);font-size:10px}
.payroll-kpi.accent{border-color:rgba(103,232,165,.2);box-shadow:inset 0 0 0 1px rgba(103,232,165,.025)}
.payroll-kpi.accent strong{color:#b9f7d4}
.sale-entry-card{margin-bottom:16px;padding:19px 20px 20px}
.payroll-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.payroll-panel-head h3{margin:5px 0 4px}
.salary-preview{min-width:210px;padding:11px 13px;border:1px solid rgba(103,232,165,.17);background:rgba(103,232,165,.055);border-radius:13px;text-align:right}
.salary-preview span,.salary-preview small{display:block;color:#84a494;font-size:10px}
.salary-preview strong{display:block;margin:2px 0;font-size:19px;color:#b9f7d4;font-variant-numeric:tabular-nums}
.sale-register-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.sale-register-form label{display:grid;gap:6px;font-size:10px;color:#8d99aa;text-transform:uppercase;letter-spacing:.045em}
.sale-register-form input,.sale-register-form select{width:100%;min-width:0;text-transform:none;letter-spacing:normal}
.sale-register-form .span-2{grid-column:span 2}.sale-register-form .span-3{grid-column:span 3}.sale-register-form .span-4{grid-column:1/-1}
.sale-form-actions{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line,#27303a);padding-top:14px;margin-top:2px}
.payroll-register-card{overflow:hidden;border-color:#2a3b53;border-radius:16px;background:#0e141d;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.payroll-register-card>.panel-head{padding:14px 16px;margin:0;align-items:center;background:linear-gradient(115deg,#152236,#101722 70%)}
.payroll-register-title{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.payroll-register-title h3{margin:0;font-size:17px;letter-spacing:-.02em;color:#edf4ff}
.payroll-register-period{font-size:12px;color:#acbcd2;text-transform:capitalize}
.payroll-register-count{padding:3px 8px;border:1px solid #354760;border-radius:7px;background:#1a2a40;color:#c5d9f2;font-size:10px;font-variant-numeric:tabular-nums}
.payroll-legend{display:flex;gap:12px;color:#a3b1c4;font-size:10px;white-space:nowrap}
.payroll-legend span{display:flex;align-items:center;gap:6px}
.dot,.source-dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:#727b87}
.dot.crm,.source-dot.crm{background:#53d891;box-shadow:0 0 0 3px rgba(83,216,145,.08)}
.dot.manual,.source-dot.manual{background:#9aa4b0}
.payroll-register-wrap{overflow:auto;max-height:clamp(280px,calc(100dvh - 265px),760px);border-top:1px solid #2b3b50;scrollbar-width:thin;scrollbar-color:#3d516e #101722}
.payroll-register-wrap:focus-visible{outline:2px solid #81b6ff;outline-offset:-2px}
.payroll-register-table{min-width:1040px;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}
.payroll-register-table .register-col-no{width:3%}.payroll-register-table .register-col-date{width:8%}
.payroll-register-table .register-col-customer{width:14%}.payroll-register-table .register-col-product{width:19%}
.payroll-register-table .register-col-factory{width:7%}.payroll-register-table .register-col-channel{width:7%}
.payroll-register-table .register-col-seller{width:9%}.payroll-register-table .register-col-payment{width:7%}
.payroll-register-table .register-col-amount{width:10%}.payroll-register-table .register-col-discount{width:5%}.payroll-register-table .register-col-salary{width:11%}
.payroll-table th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#6f91c6;font-weight:500;white-space:nowrap}
.payroll-table td{vertical-align:middle;border-top:1px solid rgba(45,55,68,.72);font-size:12px}
.payroll-register-table th,.payroll-register-table td{padding:12px 9px;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.payroll-register-table th{position:sticky;top:0;z-index:2;padding-top:10px;padding-bottom:10px;background:#172234;border-top:0;border-bottom:1px solid #34475f;color:#b9cbe2;font-size:10px;font-weight:600;letter-spacing:.045em}
.payroll-register-table td{border-top:0;border-bottom:1px solid #202d3e;color:#bac7d9;font-size:12px}
.payroll-register-table tbody tr{background:#0e151f;transition:background .15s ease}
.payroll-register-table tbody tr:nth-child(even){background:#111a26}
.payroll-register-table tbody tr:hover{background:#19283c}
.payroll-register-table tbody tr:last-child td{border-bottom:0}
.payroll-register-table .row-no{padding-right:4px;padding-left:4px;color:#7e90a9;text-align:center;font-size:10px;font-variant-numeric:tabular-nums}
.payroll-register-table th:first-child{text-align:center}
.payroll-register-table th.right,.payroll-register-table td.right{text-align:right}
.payroll-register-table .money-cell,.payroll-register-table .sale-date{white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.payroll-register-table .sale-date{color:#aabbcf;font-size:11px}
.payroll-register-table .sale-customer{font-weight:600;color:#e4edfa;font-size:13px}
.payroll-register-table .sale-reference{display:block;margin-top:4px;color:#91a6c3;font-size:10px}
.payroll-register-table .sale-source-badge{display:inline-flex;align-items:center;margin-top:5px;padding:2px 5px;border:1px solid #354254;border-radius:5px;background:#1b2634;color:#b3c0d1;font-size:9px}
.payroll-register-table .sale-source-badge.crm{border-color:#2e574b;background:#122b25;color:#96dbc0}
.payroll-register-table .sale-product{color:#d1deee;font-size:12px}
.payroll-register-table .sale-note{display:block;margin-top:4px;color:#91a1b7;font-size:10px}
.payroll-register-table .sale-seller{color:#cdd9ea;font-weight:500}
.payroll-register-table .sale-channel,.payroll-register-table .sale-payment{display:inline-block;max-width:100%;padding:3px 6px;border:1px solid #344154;border-radius:6px;background:#182232;color:#bfd0e5;font-size:10px;line-height:1.4}
.payroll-register-table .sale-channel.ozon{border-color:#2e528d;background:#142c50;color:#a8c7ff}
.payroll-register-table .sale-channel.vk{border-color:#335f9b;background:#183351;color:#a3cbff}
.payroll-register-table .sale-channel.wb{border-color:#693771;background:#321c3c;color:#e4b6ee}
.payroll-register-table .sale-channel.avito{border-color:#3c5a4f;background:#172c25;color:#b6deca}
.payroll-register-table .sale-channel.shop{border-color:#625539;background:#2c271c;color:#deccab}
.payroll-register-table .sale-payment{background:#17212c;color:#b6c4d6}
.payroll-register-table .sale-amount{color:#ecf3ff;font-size:14px;font-weight:600;letter-spacing:-.02em}
.payroll-register-table .sale-discount{display:inline-block;padding:3px 5px;border-radius:6px;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.payroll-register-table .sale-discount.zero{color:#94a3b7;background:#1a2533}
.payroll-register-table .sale-discount.applied{color:#e8cb8e;background:#322a1c}
.payroll-register-table .salary-cell{background:rgba(74,155,117,.06)}
.payroll-register-table .salary-cell strong{font-size:13px;font-weight:600;color:#b4e9ce}
.payroll-register-table .sale-rate{margin-top:3px;font-size:10px;color:#8bb69f}
.payroll-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cell-main{font-weight:600;color:#e6ecf4}.cell-sub{display:flex;align-items:center;gap:6px;margin-top:3px;color:#6f7c8d;font-size:9px}
.nowrap{white-space:nowrap}.right{text-align:right}.money-cell{white-space:nowrap;font-variant-numeric:tabular-nums}
.salary-col{background:rgba(103,232,165,.025)}
.salary-cell strong{color:#aef1ca}.salary-cell small{display:block;margin-top:2px;color:#68927a;font-size:9px}
.table-empty{text-align:center;color:var(--muted,#7d8796);padding:32px!important}
.payroll-formula-card{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:16px;padding:18px 20px}
.payroll-formula-card h3{margin:5px 0 5px}
.formula-chips{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;max-width:640px}
.formula-chips span{border:1px solid rgba(125,211,252,.12);background:rgba(125,211,252,.04);border-radius:999px;padding:7px 10px;color:#8f9baa;font-size:10px}
.formula-chips b{color:#dfeaf7}
.payroll-salary-wrap{overflow:hidden}.payroll-salary-wrap .table-wrap{overflow:auto}
.payroll-salary-table{min-width:1180px}.payroll-salary-table th,.payroll-salary-table td{padding:12px 13px}
.extra-pay-grid{display:grid;grid-template-columns:95px 110px auto;gap:7px;align-items:end;min-width:330px}
.extra-pay-grid label{display:grid;gap:3px;font-size:9px;color:#718092}
.extra-pay-grid input{width:100%;min-width:0}
.extra-pay-grid small{grid-column:1/-1;color:#687585;font-size:9px}
.payroll-rule-save{height:37px}.payroll-total strong{font-size:14px;color:#dff9ea}
@media(max-width:1200px){.payroll-kpis{grid-template-columns:repeat(2,1fr)}.sale-register-form{grid-template-columns:repeat(2,minmax(0,1fr))}.sale-register-form .span-3{grid-column:span 2}.sale-register-form .span-4{grid-column:1/-1}}
@media(max-width:760px){.payroll-head{align-items:stretch;flex-direction:column}.payroll-actions{width:100%;justify-content:space-between}.payroll-actions label{flex:1}.payroll-actions input{max-width:200px;width:100%}.payroll-tabs{width:max-content;max-width:100%}.payroll-kpis{grid-template-columns:1fr 1fr}.payroll-panel-head,.payroll-formula-card{flex-direction:column}.payroll-register-card>.panel-head{align-items:flex-start;gap:8px;padding:12px}.payroll-register-title{gap:7px}.payroll-register-title h3{font-size:16px}.payroll-register-wrap{max-height:62dvh}.salary-preview{width:100%;text-align:left}.sale-register-form{grid-template-columns:1fr}.sale-register-form .span-2,.sale-register-form .span-3,.sale-register-form .span-4{grid-column:1}.sale-form-actions{align-items:flex-start;flex-direction:column}.formula-chips{justify-content:flex-start}.extra-pay-grid{min-width:280px;grid-template-columns:1fr 1fr}.payroll-rule-save{grid-column:1/-1}}
@media(max-width:460px){.payroll-kpis{grid-template-columns:1fr 1fr}.payroll-kpi{padding:11px 12px;min-height:90px}.payroll-kpi strong{font-size:20px}.payroll-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.payroll-tabs button{padding:8px}}
@media(max-width:760px){.payroll-tabs button,.payroll-actions .btn,.payroll-actions input{min-height:44px}}
@media(prefers-reduced-motion:reduce){.payroll-tabs button,.payroll-register-table tbody tr{transition:none}}


/* === SELLER ANALYTICS CHARTS 2026-10-11 === */
.seller-chart-section{margin:4px 0 16px}
.seller-chart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 2px 10px}
.seller-chart-heading h3{margin:4px 0 2px;font-size:19px;letter-spacing:-.02em;color:#eef5ff}
.seller-chart-heading p{margin:0;font-size:11px}
.seller-chart-period{flex:0 0 auto;padding:5px 9px;border:1px solid #30425c;border-radius:999px;background:#111b29;color:#a9bad0;font-size:11px;text-transform:capitalize}
.seller-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seller-chart-grid:has(.seller-chart-card.earnings.hidden){grid-template-columns:repeat(2,minmax(0,1fr))}
.seller-chart-card{overflow:hidden;min-width:0;padding:15px 15px 14px;border:1px solid #2a3b53;border-radius:16px;background:linear-gradient(155deg,#121d2b 0%,#0e151f 66%,#0c121a 100%);box-shadow:0 9px 28px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025)}
.seller-chart-card.earnings{border-color:rgba(103,232,165,.24);background:linear-gradient(155deg,#13231f 0%,#0e1918 58%,#0c1415 100%)}
.seller-chart-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.seller-chart-card-head>div{min-width:0}
.seller-chart-card-head span{display:block;color:#edf4ff;font-size:13px;font-weight:700}
.seller-chart-card-head small{display:block;margin-top:3px;color:#7f91aa;font-size:9px;line-height:1.35}
.seller-chart-card-head>b{flex:0 0 auto;color:#cfe0f6;font-size:13px;font-variant-numeric:tabular-nums}
.seller-chart-card.earnings .seller-chart-card-head>b{color:#b9f7d4}
.seller-chart-body{display:grid;grid-template-columns:148px minmax(0,1fr);gap:15px;align-items:center;min-height:158px}
.seller-donut-wrap{display:grid;place-items:center}
.seller-donut{position:relative;width:142px;height:142px;border-radius:50%;background:#1b2738;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 10px 25px rgba(0,0,0,.12)}
.seller-donut::before{content:"";position:absolute;inset:24px;border-radius:50%;background:linear-gradient(145deg,#101924,#0c131c);box-shadow:0 0 0 1px rgba(132,164,206,.12),inset 0 4px 15px rgba(0,0,0,.28)}
.seller-chart-card.earnings .seller-donut::before{background:linear-gradient(145deg,#10201b,#0c1715)}
.seller-donut-center{position:absolute;z-index:1;inset:31px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.seller-donut-center strong{max-width:82px;color:#f4f8fd;font-size:14px;line-height:1.12;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.seller-donut-center span{margin-top:4px;color:#7f91a8;font-size:9px;text-transform:uppercase;letter-spacing:.055em}
.seller-chart-legend{display:grid;align-content:center;gap:5px;min-width:0;max-height:164px;overflow:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#304561 transparent}
.seller-legend-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:7px;align-items:center;min-height:35px;padding:5px 6px;border-radius:9px;transition:background .15s ease}
.seller-legend-row:hover{background:rgba(38,58,84,.45)}
.seller-legend-dot{width:8px;height:8px;border-radius:999px;background:var(--seller-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--seller-color) 12%,transparent)}
.seller-legend-copy{min-width:0}
.seller-legend-copy b{display:block;overflow:hidden;color:#dce7f6;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.seller-legend-copy small{display:block;margin-top:2px;overflow:hidden;color:#788ba4;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
.seller-legend-value{text-align:right;min-width:58px}
.seller-legend-value strong{display:block;color:#edf4ff;font-size:10px;font-variant-numeric:tabular-nums}
.seller-legend-value small{display:block;margin-top:2px;color:#7e93af;font-size:8.5px;font-variant-numeric:tabular-nums}
.seller-chart-empty{padding:16px 4px;color:#77869a;font-size:10px;line-height:1.5}
@media(max-width:1280px){
  .seller-chart-grid{grid-template-columns:1fr 1fr}
  .seller-chart-card.earnings{grid-column:1/-1}
  .seller-chart-grid:has(.seller-chart-card.earnings.hidden){grid-template-columns:1fr 1fr}
  .seller-chart-card.earnings .seller-chart-body{grid-template-columns:148px minmax(0,1fr)}
}
@media(max-width:820px){
  .seller-chart-heading{align-items:flex-start;flex-direction:column;gap:7px}
  .seller-chart-grid,.seller-chart-grid:has(.seller-chart-card.earnings.hidden){grid-template-columns:1fr}
  .seller-chart-card.earnings{grid-column:auto}
}
@media(max-width:520px){
  .seller-chart-card{padding:13px}
  .seller-chart-body,.seller-chart-card.earnings .seller-chart-body{grid-template-columns:116px minmax(0,1fr);gap:10px}
  .seller-donut{width:112px;height:112px}
  .seller-donut::before{inset:19px}
  .seller-donut-center{inset:25px}
  .seller-donut-center strong{font-size:12px}
}