:root{
  color-scheme: light;
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-raised: #fcfdfd;
  --surface-2: #eef3f2;
  --surface-tint: #f7fbfa;
  --ink: #192126;
  --text: #192126;
  --muted: #68757d;
  --muted-2: #8a969d;
  --line: #dde7e5;
  --line-strong: #c8d6d3;
  --green: #147760;
  --green-strong: #0d604e;
  --green-soft: #e6f4ef;
  --blue: #2d69bf;
  --blue-soft: #e8f0ff;
  --red: #b84d3d;
  --red-soft: #fdecea;
  --amber: #986515;
  --amber-soft: #fff3d8;
  --violet: #6f5aa8;
  --violet-soft: #f0ebff;
  --shadow: 0 14px 36px rgba(24, 33, 39, 0.07);
  --shadow-hover: 0 20px 48px rgba(24, 33, 39, 0.11);
  --shadow-soft: 0 6px 18px rgba(24, 33, 39, 0.06);
  --focus-ring: 0 0 0 4px rgba(20, 119, 96, 0.13);
  --motion-fast: 150ms ease;
  --motion-normal: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 8px;
}

/* Employee CRM funnel and order thread */
.funnel-page{
  min-width: 0;
  display: grid;
  gap: 22px;
  color: #163f36;
}

.funnel-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid #cde5dc;
  border-radius: 30px;
  background: linear-gradient(135deg, #f8fffc 0%, #eaf8f2 100%);
  box-shadow: 0 18px 44px rgba(21, 80, 65, 0.08);
}

.funnel-eyebrow,
.funnel-head > div:first-child > span{
  display: block;
  margin-bottom: 7px;
  color: #2b7a67;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.funnel-head h1{
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.funnel-head p{
  max-width: 720px;
  margin: 10px 0 0;
  color: #58746c;
  font-size: 16px;
  line-height: 1.55;
}

.funnel-head-controls{
  display: flex;
  align-items: end;
  gap: 12px;
  flex: 0 0 auto;
}

.funnel-employee-filter{
  display: grid;
  gap: 7px;
  min-width: 210px;
  color: #527269;
  font-size: 13px;
  font-weight: 750;
}

.funnel-board{
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(218px, 1fr));
  align-items: start;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 14px;
  scrollbar-width: thin;
}

.funnel-column{
  min-width: 218px;
  min-height: 420px;
  border: 1px solid #d9eae4;
  border-radius: 24px;
  background: #f4faf7;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.funnel-column.is-drop-target{
  border-color: #28a17f;
  background: #e4f6ef;
  transform: translateY(-2px);
}

.funnel-column > header{
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #dcece6;
  color: #244e43;
  font-size: 16px;
  font-weight: 850;
}

.funnel-column > header b{
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: #2c7562;
  font-size: 14px;
  box-shadow: 0 5px 14px rgba(25, 85, 68, 0.08);
}

.funnel-column-list{
  display: grid;
  gap: 12px;
  padding: 12px;
}

.funnel-card{
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 17px;
  border: 1px solid #d5e7e0;
  border-left: 5px solid #72b9a4;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 72, 58, 0.07);
  cursor: grab;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.funnel-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(20, 72, 58, 0.11);
}

.funnel-card.is-dragging{
  opacity: 0.5;
  cursor: grabbing;
}

.funnel-card.is-overdue{
  border-left-color: #d85f59;
}

.funnel-column.is-status-new .funnel-card{ border-left-color: #4d8bd7; }
.funnel-column.is-status-work .funnel-card{ border-left-color: #2fa5a5; }
.funnel-column.is-status-ready .funnel-card{ border-left-color: #d59b35; }
.funnel-column:nth-child(4) .funnel-card{ border-left-color: #39a46f; }

.funnel-card-top,
.funnel-card-actions,
.funnel-card-client,
.funnel-card dl,
.funnel-card-thread button{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.funnel-card-top > span:first-child{
  color: #2b7864;
  font-size: 13px;
  font-weight: 850;
}

.funnel-assignee,
.funnel-nickname{
  min-width: 0;
  overflow: hidden;
  color: #607a73;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-card-client strong{
  min-width: 0;
  overflow-wrap: anywhere;
  color: #173f35;
  font-size: 18px;
  line-height: 1.2;
}

.funnel-card > p{
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #526c65;
  font-size: 14px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.funnel-card dl{
  margin: 0;
  padding: 11px 0;
  border-block: 1px solid #e4efeb;
}

.funnel-card dl > div{
  display: grid;
  gap: 3px;
}

.funnel-card dl > div:last-child{ text-align: right; }
.funnel-card dt{ color: #7b928c; font-size: 12px; font-weight: 700; }
.funnel-card dd{ margin: 0; color: #234d42; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }

.funnel-card-thread button{
  width: 100%;
  appearance: none;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #ebf7f2;
  color: #246d59;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.funnel-card-thread b{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel-card-thread button.is-unread,
.button.is-unread{
  border-color: #e5bd66;
  background: #fff4d6;
  color: #76530d;
  box-shadow: inset 0 0 0 1px rgba(181, 125, 15, 0.08);
}

.funnel-card-thread button.is-unread::before,
.button.is-unread::before{
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e49a15;
  content: "";
}

.funnel-move-actions{
  display: inline-flex;
  gap: 7px;
}

.funnel-move-actions button{
  width: 38px;
  height: 38px;
  appearance: none;
  border: 1px solid #cfe3dc;
  border-radius: 11px;
  background: #fff;
  color: #275f50;
  font-size: 18px;
  cursor: pointer;
}

.funnel-move-actions button:disabled{ opacity: 0.35; cursor: default; }
.funnel-empty{ padding: 28px 14px; color: #82958f; font-size: 14px; text-align: center; }

.funnel-archive{
  overflow: hidden;
  border: 1px solid #d8e8e2;
  border-radius: 24px;
  background: #fff;
}

.funnel-archive > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #e3ede9;
}

.funnel-archive > header span{ color: #71867f; font-size: 13px; font-weight: 750; }
.funnel-archive > header h2{ margin: 3px 0 0; font-size: 24px; }
.funnel-archive-list{ display: grid; }

.funnel-archive-card{
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid #edf2f0;
}

.funnel-archive-card:last-child{ border-bottom: 0; }
.funnel-archive-card > div{ min-width: 0; display: grid; gap: 4px; }
.funnel-archive-card > div strong{ overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.funnel-archive-card > div small{ color: #71867f; font-size: 13px; }
.funnel-archive-card > b{ font-size: 15px; white-space: nowrap; }

.thread-dialog{
  width: min(900px, calc(100vw - 28px));
  max-width: 900px;
  height: min(820px, calc(100dvh - 28px));
  max-height: 820px;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #f7fcfa;
  box-shadow: 0 30px 90px rgba(9, 42, 33, 0.28);
}

.thread-dialog::backdrop{ background: rgba(12, 34, 28, 0.62); backdrop-filter: blur(5px); }

.thread-shell{
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.thread-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid #dcebe5;
  background: #174f40;
  color: #fff;
}

.thread-head > div{ min-width: 0; }
.thread-head span{ color: #9ed6c4; font-size: 13px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.thread-head h2{ margin: 4px 0; font-size: 28px; line-height: 1.1; }
.thread-head p{ overflow: hidden; margin: 0; color: #d4e9e2; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.thread-head .icon-button{ flex: 0 0 auto; color: #fff; background: rgba(255,255,255,0.1); }

.thread-retention{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  border-bottom: 1px solid #deebe7;
  background: #edf7f3;
  color: #5f766f;
  font-size: 13px;
}

.thread-retention strong{ color: #2f6858; white-space: nowrap; }
.thread-retention.is-active{ background: #fff5db; color: #755c25; }
.thread-retention.is-active strong{ color: #8b6315; }

.thread-timeline{
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 28px;
  overscroll-behavior: contain;
}

.thread-item{
  width: min(76%, 620px);
  align-self: flex-start;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #d9e8e2;
  border-radius: 18px 18px 18px 5px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(24, 70, 57, 0.06);
}

.thread-item.is-mine{
  align-self: flex-end;
  border-color: #b9dfd1;
  border-radius: 18px 18px 5px 18px;
  background: #e7f6f0;
}

.thread-item-meta{ display: flex; justify-content: space-between; gap: 12px; }
.thread-item-meta strong{ color: #275f50; font-size: 13px; }
.thread-item-meta span{ color: #82948e; font-size: 12px; white-space: nowrap; }
.thread-item > p{ margin: 0; color: #223d36; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }

.thread-file-card{
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.thread-file-icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #d8eee6;
  color: #1d735c;
  font-size: 20px;
  font-weight: 900;
}

.thread-file-card > div{ min-width: 0; display: grid; gap: 4px; }
.thread-file-card > div strong{ overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.thread-file-card > div small{ color: #70857e; font-size: 12px; }
.thread-delete{ justify-self: start; appearance: none; padding: 0; border: 0; background: transparent; color: #a34e49; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.thread-tombstone{ display: grid; gap: 3px; color: #73847f; font-size: 14px; font-style: italic; }
.thread-tombstone small{ font-size: 12px; }
.thread-item.is-deleted{ background: #f2f5f4; box-shadow: none; }

.thread-empty,
.thread-loading{
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 32px;
  color: #667d75;
  text-align: center;
}

.thread-empty strong,
.thread-loading strong{ color: #285e50; font-size: 19px; }
.thread-loading.is-error strong{ color: #a74440; }

.thread-composer{
  display: grid;
  gap: 12px;
  padding: 16px 22px 20px;
  border-top: 1px solid #dceae5;
  background: #fff;
}

.thread-composer .textarea{ min-height: 62px; max-height: 140px; resize: vertical; font-size: 15px; }
.thread-composer-actions{ display: flex; justify-content: space-between; gap: 12px; }
.thread-file-picker{ position: relative; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; }
.thread-file-picker input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.thread-file-picker small{ color: inherit; opacity: 0.68; font-size: 11px; }

.thread-upload-progress{
  max-height: 130px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid #dfeae6;
  background: #f3f8f6;
}

.thread-upload-progress[hidden]{ display: none; }
.thread-upload-progress > div{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; color: #4e6860; font-size: 12px; }
.thread-upload-progress > div > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-upload-progress > div > strong{ white-space: nowrap; }
.thread-upload-progress i{ grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #d8e6e1; }
.thread-upload-progress i b{ display: block; width: 0; height: 100%; border-radius: inherit; background: #35a27f; transition: width 100ms linear; }
.thread-upload-progress .is-error strong{ color: #b74b45; }
.thread-upload-progress > div > .button{ grid-column: 2; justify-self: end; min-height: 32px; padding: 5px 10px; }

.employee-shell .funnel-page{ padding: 0; }
.employee-shell .funnel-head{ background: linear-gradient(135deg, #f8fffc, #e6f6ef); }
.employee-shell .funnel-head-controls{ align-self: center; }
.employee-order-card-foot{ gap: 9px; }

@media (max-width: 980px){
  .funnel-head{ align-items: stretch; flex-direction: column; }
  .funnel-head-controls{ width: 100%; align-items: stretch; }
  .funnel-employee-filter{ flex: 1 1 auto; }
  .funnel-board{ grid-template-columns: repeat(4, minmax(275px, 82vw)); }
  .thread-item{ width: min(88%, 620px); }
}

@media (max-width: 640px){
  .funnel-page{ gap: 15px; }
  .funnel-head{ padding: 22px 20px; border-radius: 22px; }
  .funnel-head h1{ font-size: 30px; }
  .funnel-head p{ font-size: 15px; }
  .funnel-head-controls{ flex-direction: column; }
  .funnel-employee-filter{ width: 100%; min-width: 0; }
  .funnel-board{ margin-inline: -4px; padding-inline: 4px; grid-template-columns: repeat(4, minmax(280px, 88vw)); }
  .funnel-column{ min-width: 280px; }
  .funnel-card{ cursor: default; }
  .funnel-archive-card{ grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
  .funnel-archive-card > b{ grid-column: 2; }
  .funnel-archive-card > .button{ grid-column: 3; grid-row: 1 / span 2; }
  .thread-dialog{ width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .thread-head{ padding: 20px 18px 17px; }
  .thread-head h2{ font-size: 25px; }
  .thread-retention{ align-items: flex-start; flex-direction: column; gap: 3px; padding: 11px 18px; line-height: 1.4; }
  .thread-timeline{ padding: 16px 14px; }
  .thread-item{ width: 92%; padding: 13px; }
  .thread-file-card{ grid-template-columns: auto minmax(0, 1fr); }
  .thread-file-card .button{ grid-column: 1 / -1; width: 100%; }
  .thread-composer{ padding: 13px 14px calc(14px + env(safe-area-inset-bottom)); }
  .thread-composer-actions{ align-items: stretch; flex-direction: column; }
  .thread-composer-actions > *{ width: 100%; justify-content: center; }
  .employee-mobile-nav{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .employee-order-card-foot{ align-items: stretch; flex-wrap: wrap; }
  .employee-order-card-foot > span{ width: 100%; }
  .employee-order-card-foot .button{ flex: 1 1 130px; }
}

@media (prefers-reduced-motion: reduce){
  .funnel-card,
.funnel-column,
.thread-upload-progress i b{ transition: none; }
}

*{
  box-sizing: border-box;
}

[hidden]{
  display: none !important;
}

body{
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea{
  font: inherit;
}

button{
  border: 0;
}

.shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.brand{
  display: grid;
  padding: 4px 4px 16px;
}

.brand-title{
  font-size: 18px;
  font-weight: 800;
}

.brand-subtitle{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.nav{
  display: grid;
  gap: 4px;
}

.nav-button{
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition:
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.nav-button:hover{
  background: var(--surface-2);
  transform: translateX(2px);
}

.nav-button.is-active{
  background: #ddebe7;
  color: #0e4f40;
  font-weight: 700;
}

.nav-icon{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.nav-icon svg{
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button.is-active .nav-icon{
  border-color: #9ac9bc;
  background: #f8fffc;
  color: #0e4f40;
}

.nav-button:hover .nav-icon{
  transform: scale(1.04);
}

.nav-count{
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.source-line{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.main{
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(220px, 640px) 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: blur(12px);
}

.search{
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    background var(--motion-fast);
}

.search input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.search-symbol{
  color: var(--muted);
  font-weight: 700;
}

.user-chip{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.content{
  min-width: 0;
  display: grid;
  gap: 22px;
  padding: 22px;
}

.content.is-view-entering > *{
  animation: view-enter var(--motion-normal) both;
}

.content.is-view-entering > *:nth-child(2){
  animation-delay: 35ms;
}

.content.is-view-entering > *:nth-child(3){
  animation-delay: 70ms;
}

.content.is-view-entering > *:nth-child(4){
  animation-delay: 105ms;
}

.page-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.page-title{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
}

.page-note{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.button,
.icon-button{
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

.button:hover,
.icon-button:hover{
  border-color: #aeb9c3;
  background: #f9fafb;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.08);
  transform: translateY(-1px);
}

.button:active,
.icon-button:active{
  transform: translateY(0);
}

.button.primary{
  border-color: #176a55;
  background: var(--green);
  color: #fff;
}

.button.primary:hover{
  background: #176a55;
}

.button.danger{
  border-color: #d7a59d;
  color: var(--red);
}

.button.compact{
  min-height: 32px;
  padding: 6px 9px;
  font-size: 13px;
}

.button.subtle{
  color: var(--muted);
}

.link-button{
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
  transition:
    color var(--motion-fast),
    opacity var(--motion-fast),
    transform var(--motion-fast);
}

.link-button:hover{
  color: #174fa5;
  text-decoration: underline;
}

.icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  color: currentColor;
}

.metric-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-card{
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-normal),
    background var(--motion-normal);
}

.metric-card:hover{
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.metric-label{
  color: var(--muted);
  font-size: 13px;
}

.metric-value{
  margin-top: 10px;
  font-size: 27px;
  line-height: 1;
  font-weight: 850;
}

.metric-foot{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.metric-card.good{
  border-color: #bddfd5;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf8 100%);
}

.metric-card.warn{
  border-color: #f1d398;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e7 100%);
}

.metric-card.bad{
  border-color: #efb9b0;
  background: linear-gradient(180deg, #ffffff 0%, #fff3f1 100%);
}

.work-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.panel{
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    border-color var(--motion-normal),
    box-shadow var(--motion-normal);
}

.panel:hover{
  border-color: #d4dee5;
  box-shadow: var(--shadow-hover);
}

.panel-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.panel-title{
  font-weight: 800;
}

.panel-subtitle{
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.panel-body{
  padding: 16px;
}

.panel-body.tight{
  padding: 0;
}

.toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.select,
.input,
.textarea{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  outline: 0;
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    background var(--motion-fast);
}

.select:focus,
.input:focus,
.textarea:focus,
.search:focus-within{
  border-color: #9ac9bc;
  box-shadow: 0 0 0 3px rgba(29, 123, 99, 0.12);
}

.select,
.input{
  padding: 8px 10px;
}

.select{
  overflow: hidden;
  text-overflow: ellipsis;
}

.input[readonly]{
  background: var(--surface-2);
  color: var(--muted);
}

.textarea{
  min-height: 88px;
  padding: 10px;
  resize: vertical;
}

.table-wrap{
  width: 100%;
  overflow: hidden;
}

table{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  overflow-wrap: anywhere;
  transition:
    background-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast);
}

th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafb;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  font-weight: 800;
  text-transform: uppercase;
}

tr:hover td{
  background: #f7fbf9;
}

tbody tr:hover td:first-child{
  box-shadow: inset 3px 0 0 rgba(29, 123, 99, 0.35);
}

tr.is-selected td{
  background: #f0f7f4;
}

tr.clickable-row{
  cursor: pointer;
}

.content.is-view-entering tbody tr,
.content.is-view-entering .mobile-card,
.content.is-view-entering .calendar-order-card,
.content.is-view-entering .transaction-card{
  animation: row-enter 180ms ease both;
}

.content.is-view-entering tbody tr:nth-child(1),
.content.is-view-entering .mobile-card:nth-child(1),
.content.is-view-entering .calendar-order-card:nth-child(1),
.content.is-view-entering .transaction-card:nth-child(1){
  animation-delay: 35ms;
}

.content.is-view-entering tbody tr:nth-child(2),
.content.is-view-entering .mobile-card:nth-child(2),
.content.is-view-entering .calendar-order-card:nth-child(2),
.content.is-view-entering .transaction-card:nth-child(2){
  animation-delay: 50ms;
}

.content.is-view-entering tbody tr:nth-child(3),
.content.is-view-entering .mobile-card:nth-child(3),
.content.is-view-entering .calendar-order-card:nth-child(3),
.content.is-view-entering .transaction-card:nth-child(3){
  animation-delay: 65ms;
}

.content.is-view-entering tbody tr:nth-child(4),
.content.is-view-entering .mobile-card:nth-child(4),
.content.is-view-entering .calendar-order-card:nth-child(4),
.content.is-view-entering .transaction-card:nth-child(4){
  animation-delay: 80ms;
}

.content.is-view-entering tbody tr:nth-child(5),
.content.is-view-entering .mobile-card:nth-child(5),
.content.is-view-entering .calendar-order-card:nth-child(5),
.content.is-view-entering .transaction-card:nth-child(5){
  animation-delay: 95ms;
}

.content.is-view-entering tbody tr:nth-child(n + 6),
.content.is-view-entering .mobile-card:nth-child(n + 6),
.content.is-view-entering .calendar-order-card:nth-child(n + 6),
.content.is-view-entering .transaction-card:nth-child(n + 6){
  animation-delay: 110ms;
}

.client-click-cell{
  cursor: pointer;
}

.client-click-cell:hover{
  background: #eef6ff !important;
}

.numeric{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.client-cell{
  min-width: 0;
}

.nickname-cell{
  min-width: 0;
}

.task-cell{
  min-width: 0;
  max-width: 520px;
}

.line-clamp{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.muted{
  color: var(--muted);
}

.small{
  font-size: 12px;
}

.status-pill,
.tag{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.status-pill:hover,
.tag:hover{
  transform: translateY(-1px);
}

.status-new{
  color: #2559b8;
  background: var(--blue-soft);
}

.status-work{
  color: #12624f;
  background: var(--green-soft);
}

.status-ready{
  color: #76500e;
  background: var(--amber-soft);
}

.status-done{
  color: #59626c;
  background: #edf0f2;
}

.status-cancel{
  color: #a23c2c;
  background: var(--red-soft);
}

.tag{
  color: #3f4b57;
  background: var(--surface-2);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.tag.green{
  color: #0f5949;
  background: var(--green-soft);
}

.tag.red{
  color: #a23c2c;
  background: var(--red-soft);
}

.tag.amber{
  color: #76500e;
  background: var(--amber-soft);
}

.stack{
  display: grid;
  gap: 12px;
}

.split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.three{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mini-list{
  display: grid;
  gap: 8px;
}

.mini-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

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

.mini-name{
  min-width: 0;
  font-weight: 700;
}

.transaction-list{
  display: grid;
  gap: 10px;
}

.transaction-card{
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast),
    filter var(--motion-fast),
    transform var(--motion-fast);
}

.transaction-card:hover{
  filter: brightness(0.985);
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.1);
  transform: translateY(-1px);
}

.transaction-card.income{
  border-color: #bddfd5;
  background: #f5fbf8;
}

.transaction-card.expense{
  border-color: #efb9b0;
  background: #fff3f1;
}

.transaction-card-main{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.transaction-card-head{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.transaction-type{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.transaction-type.income{
  color: #0f5949;
  background: #dcefe9;
}

.transaction-type.expense{
  color: #a23c2c;
  background: #f9dcd7;
}

.transaction-card-description{
  min-width: 0;
  color: #2862c4;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.transaction-card-meta{
  color: var(--muted);
  font-size: 12px;
}

.transaction-card-amount{
  align-self: start;
  white-space: nowrap;
}

.progress{
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.progress > span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transition: width 220ms ease, transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.category-row{
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 8px;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.category-row:hover{
  background: #f5fbf8;
  box-shadow: inset 3px 0 0 var(--green);
  transform: translateX(3px);
}

.category-row:hover .mini-name{
  color: #0f5949;
}

.category-row:hover .category-progress > span{
  transform: scaleX(1.025);
  box-shadow: 0 0 0 3px rgba(61, 128, 101, 0.12);
}

.bar-chart{
  min-height: 210px;
  display: grid;
  grid-template-columns: repeat(var(--bars, 6), minmax(42px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 18px 8px 6px;
}

.bar-group{
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-items: end;
  padding: 8px 7px 6px;
  border-radius: 8px;
  cursor: default;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.bar-group:hover{
  z-index: 2;
  background: #f5fbf8;
  box-shadow: 0 14px 30px rgba(35, 49, 64, 0.12);
  transform: translateY(-4px);
}

.bar-stack{
  height: 164px;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  gap: 3px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 180ms ease;
}

.bar-group:hover .bar-stack{
  border-color: #a8cfc3;
}

.bar{
  min-height: 4px;
  border-radius: 5px 5px 0 0;
  transform-origin: bottom center;
  animation: bar-pop 520ms cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
  animation-delay: calc(var(--bar-index, 0) * 70ms);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.bar-group:hover .bar{
  filter: saturate(1.12);
  transform: scaleY(1.08);
}

.bar.income{
  background: linear-gradient(180deg, #4c9a7f 0%, var(--green) 100%);
}

.bar.expense{
  background: linear-gradient(180deg, #de7665 0%, var(--red) 100%);
}

.bar.profit{
  background: linear-gradient(180deg, #668bdd 0%, var(--blue) 100%);
}

.bar-label{
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  transition: color 180ms ease, font-weight 180ms ease;
}

.bar-group:hover .bar-label{
  color: var(--ink);
  font-weight: 850;
}

.bar-tooltip{
  position: absolute;
  left: 50%;
  top: 12px;
  min-width: 190px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 18px 36px rgba(35, 49, 64, 0.18);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.96);
  transform-origin: top center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.bar-tooltip span{
  color: var(--muted);
}

.bar-group:hover .bar-tooltip{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.bar-group:first-child .bar-tooltip{
  left: 0;
  transform: translate(0, 8px) scale(0.96);
  transform-origin: top left;
}

.bar-group:first-child:hover .bar-tooltip{
  transform: translate(0, 0) scale(1);
}

.bar-group:last-child .bar-tooltip{
  right: 0;
  left: auto;
  transform: translate(0, 8px) scale(0.96);
  transform-origin: top right;
}

.bar-group:last-child:hover .bar-tooltip{
  transform: translate(0, 0) scale(1);
}

@keyframes bar-pop {
  from {
    transform: scaleY(0.12);
    opacity: 0.4;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes row-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  *,
*::before,
*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.pipeline{
  display: grid;
  gap: 12px;
}

.pipeline-row{
  display: grid;
  grid-template-columns: 150px 1fr 46px;
  gap: 10px;
  align-items: center;
}

.attention-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.attention-item{
  min-height: 84px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

.attention-item:hover{
  border-color: #bddfd5;
  background: #f7fffc;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.08);
  transform: translateY(-2px);
}

.attention-check{
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
}

.attention-check:hover{
  filter: brightness(0.98);
}

.attention-number{
  font-size: 22px;
  font-weight: 850;
}

.analytics-toolbar{
  align-items: end;
}

.analytics-toolbar .field{
  flex: 1 1 156px;
  min-width: 150px !important;
}

.analytics-toolbar .button{
  align-self: end;
}

.analytics-toolbar .analytics-mode-field{
  flex: 0 1 220px;
  min-width: 190px !important;
}

.analytics-filter-panel{
  width: min(100%, 1180px);
  margin-inline: auto;
}

.analytics-filter-panel .panel-body{
  padding: 18px 22px 20px;
}

.analytics-filter-title{
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.analytics-filter-grid{
  display: grid;
  grid-template-columns: minmax(145px, 0.8fr) minmax(286px, 1.1fr) minmax(420px, 1.7fr) minmax(110px, 0.45fr);
  gap: 14px;
  align-items: end;
}

.analytics-filter-group{
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: end;
}

.analytics-filter-group.dates{
  grid-template-columns: repeat(2, minmax(136px, 1fr));
}

.analytics-filter-group.filters{
  grid-template-columns: minmax(108px, 0.8fr) minmax(190px, 1.25fr) minmax(108px, 0.8fr);
}

.analytics-filter-actions{
  min-width: 0;
  display: grid;
  align-items: end;
}

.analytics-filter-grid .field{
  min-width: 0 !important;
}

.analytics-filter-grid .field span{
  white-space: nowrap;
}

.analytics-filter-grid .button{
  width: 100%;
  min-height: 38px;
  justify-content: center;
  white-space: nowrap;
}

.journal-filter-grid{
  width: min(100%, 1120px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(280px, 1.05fr) minmax(470px, 1.7fr) minmax(120px, 0.55fr);
  gap: 14px;
  align-items: end;
}

.journal-filter-group{
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: end;
}

.journal-filter-group.dates{
  grid-template-columns: repeat(2, minmax(132px, 1fr));
}

.journal-filter-group.filters{
  grid-template-columns: minmax(150px, 0.95fr) minmax(140px, 0.9fr) minmax(170px, 1fr);
}

.journal-filter-actions{
  min-width: 0;
  display: grid;
  align-items: end;
}

.journal-filter-grid .field{
  min-width: 0 !important;
}

.journal-filter-grid .field span{
  white-space: nowrap;
}

.journal-filter-grid .button{
  width: 100%;
  min-height: 38px;
  justify-content: center;
  white-space: nowrap;
}

.analytics-mode-switch{
  display: flex;
  gap: 6px;
  min-height: 38px;
  align-items: center;
  flex-wrap: wrap;
}

.analytics-mode-switch .quick-status-chip{
  flex: 1;
  justify-content: center;
  min-width: 92px;
  white-space: normal;
  text-align: center;
}

.filter-panel .panel-body{
  padding: 14px 16px;
}

.filter-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 12px;
  align-items: end;
}

.order-filter-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.order-filter-grid .filter-wide{
  grid-column: span 2;
}

.order-filter-dropdown{
  flex: 1 1 136px;
  min-width: 128px;
  max-width: 176px;
}

.order-filter-trigger{
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 34px 8px 10px;
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.order-filter-trigger::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}

.order-filter-dropdown.is-open .order-filter-trigger::after{
  transform: translateY(-30%) rotate(225deg);
}

.order-filter-trigger strong{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.2;
}

.order-filter-trigger:hover,
.order-filter-trigger.is-active,
.order-filter-dropdown.is-open .order-filter-trigger{
  border-color: #9ecdbf;
  background: #f7fbf9;
}

.order-filter-trigger.is-active,
.order-filter-dropdown.is-open .order-filter-trigger{
  box-shadow: 0 0 0 3px rgba(46, 125, 99, 0.08);
}

.order-filter-menu{
  margin-top: 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.order-filter-menu.is-scroll{
  max-height: 260px;
  overflow: auto;
}

.order-filter-menu-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.order-filter-menu-head strong{
  font-size: 13px;
  color: var(--muted);
}

.order-filter-options{
  min-height: 0;
}

.order-filter-reset{
  align-self: stretch;
  flex: 0 0 auto;
  width: auto !important;
  min-height: 44px;
  margin-left: auto;
  padding-inline: 16px;
}

.filter-grid .field{
  min-width: 0 !important;
}

.filter-grid .button{
  width: 100%;
}

.filter-button-field{
  align-self: stretch;
}

.filter-button-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  align-items: center;
}

.filter-scroll .filter-button-group{
  max-height: 92px;
  overflow: auto;
  align-content: flex-start;
  padding-right: 2px;
}

.filter-chip{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 38px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

.filter-chip:hover{
  border-color: #b9ccc5;
  background: #f7faf9;
}

.filter-chip.is-active{
  border-color: #9ecdbf;
  background: #e7f3ef;
  color: var(--green-strong);
  box-shadow: 0 0 0 3px rgba(46, 125, 99, 0.08);
}

.active-filter-line{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-table th,
.order-table td,
.client-table th,
.client-table td,
.payment-table th,
.payment-table td,
.expense-table th,
.expense-table td,
.cashflow-table th,
.cashflow-table td{
  padding: 10px 9px;
  font-size: 13px;
}

.client-table th{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.order-table th:nth-child(1),
.order-table td:nth-child(1){
  width: 64px;
}

.client-table th:nth-child(3),
.client-table td:nth-child(3){
  width: 78px;
}

.order-table th:nth-child(2),
.order-table td:nth-child(2),
.client-table th:nth-child(1),
.client-table td:nth-child(1){
  width: 20%;
}

.order-table th:nth-child(3),
.order-table td:nth-child(3){
  width: 13%;
}

.order-table th:nth-child(4),
.order-table td:nth-child(4){
  width: 34%;
}

.order-table th:nth-child(5),
.order-table td:nth-child(5){
  width: 16%;
}

.order-table th:nth-child(6),
.order-table td:nth-child(6){
  width: 17%;
}

.orders-grid:not(.is-detail-closed) .order-table th:nth-child(n + 5),
.orders-grid:not(.is-detail-closed) .order-table td:nth-child(n + 5),
.client-table th:nth-child(2),
.client-table td:nth-child(2),
.client-table th:nth-child(10),
.client-table td:nth-child(10),
.client-table th:nth-child(11),
.client-table td:nth-child(11),
.client-table th:nth-child(12),
.client-table td:nth-child(12){
  display: none;
}

.client-table th:nth-child(4),
.client-table td:nth-child(4),
.client-table th:nth-child(5),
.client-table td:nth-child(5),
.client-table th:nth-child(6),
.client-table td:nth-child(6),
.client-table th:nth-child(7),
.client-table td:nth-child(7),
.client-table th:nth-child(8),
.client-table td:nth-child(8),
.client-table th:nth-child(9),
.client-table td:nth-child(9){
  width: 11%;
}

.avito-form .field-grid{
  gap: 8px;
}

.avito-form .input{
  padding-inline: 8px;
}

.avito-workspace{
  align-items: start;
}

.avito-manual-grid,
.avito-input-grid,
.avito-summary-list{
  display: grid;
  gap: 12px;
}

.avito-manual-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.avito-input-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avito-form-summary{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.avito-form-summary span{
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef4f2;
}

.avito-summary-list{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.avito-summary-row{
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.avito-summary-row.is-selected{
  border-color: #9ac9bc;
  background: #f3fbf8;
}

.avito-summary-head{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.avito-summary-head strong,
.avito-summary-head span{
  min-width: 0;
  overflow-wrap: anywhere;
}

.avito-summary-head span{
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.avito-summary-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.avito-summary-stats span{
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f4f7f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.order-state-stack,
.order-money-stack{
  display: grid;
  gap: 6px;
}

.order-state-stack{
  justify-items: start;
}

.money-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.money-line span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.analytics-two{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.finance-dashboard-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  align-items: start;
}

.analytics-card-grid,
.analytics-row-grid,
.pnl-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.analytics-mini-grid,
.partner-grid,
.scenario-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-card,
.analytics-row-card,
.partner-card,
.pnl-card,
.scenario-card{
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.partner-card .analytics-line{
  grid-template-columns: minmax(0, 1fr) auto;
}

.partner-card .analytics-line strong{
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: right;
}

.analytics-subpanel,
.calculator-box{
  min-width: 0;
  display: grid;
  gap: 12px;
}

.analytics-card.good{
  border-color: #bddfd5;
  background: #f5fbf8;
}

.analytics-card.warn{
  border-color: #f1d398;
  background: #fff9ea;
}

.analytics-card.bad{
  border-color: #efb9b0;
  background: #fff3f1;
}

.analytics-label{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.analytics-value,
.partner-balance,
.forecast-value,
.calculator-price{
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.forecast-value,
.calculator-price{
  font-size: 30px;
}

.analytics-foot{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.analytics-lines{
  display: grid;
  gap: 2px;
  margin-top: 10px;
}

.analytics-line,
.analytics-list-row,
.analytics-row-head,
.partner-head,
.pnl-head{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.analytics-line{
  grid-template-columns: minmax(170px, 0.75fr) minmax(0, 1.25fr);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.analytics-line:last-child{
  border-bottom: 0;
}

.analytics-line span,
.analytics-list-row > div,
.analytics-row-head strong,
.partner-head > div,
.pnl-head strong{
  min-width: 0;
  overflow-wrap: anywhere;
}

.analytics-line span{
  color: var(--muted);
  font-size: 13px;
}

.analytics-line strong{
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.analytics-list-row{
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
}

.analytics-list-row:last-child{
  border-bottom: 0;
}

.analytics-list-row.as-button{
  cursor: pointer;
}

.analytics-list-row.as-button:hover{
  color: var(--blue);
}

.operation-row{
  align-items: start;
}

.operation-actions{
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.operation-actions span{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.forecast-box,
.calculator-main{
  padding: 14px;
  border: 1px solid #bddfd5;
  border-radius: var(--radius);
  background: #f5fbf8;
}

.finance-command{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.finance-command-main,
.finance-command-side,
.analytics-hero-main,
.analytics-hero-side{
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.finance-command-main{
  background: #f5fbf8;
  border-color: #bddfd5;
}

.finance-command-side{
  background: #fff9ea;
  border-color: #f1d398;
}

.finance-eyebrow{
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.finance-command-value,
.analytics-hero-value{
  margin-top: 8px;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.finance-command-note,
.analytics-hero-main p{
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.finance-owner-grid,
.analytics-proof-grid,
.finance-pulse-grid,
.finance-story-grid{
  display: grid;
  gap: 12px;
}

.finance-owner-grid{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 18px;
}

.finance-owner-tile,
.analytics-proof,
.finance-pulse-card,
.finance-story-card,
.finance-month-tile{
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.finance-owner-tile{
  display: grid;
  gap: 6px;
}

.finance-owner-tile span,
.analytics-proof span,
.finance-month-top span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.finance-owner-tile strong,
.finance-pulse-value,
.finance-story-value{
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.finance-owner-tile small,
.analytics-proof small,
.finance-queue-row small{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.finance-equation{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.finance-equation span{
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.finance-pulse-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.finance-pulse-card.good{
  border-color: #bddfd5;
  background: #f5fbf8;
}

.finance-pulse-card.warn{
  border-color: #f1d398;
  background: #fff9ea;
}

.finance-pulse-card.bad{
  border-color: #efb9b0;
  background: #fff3f1;
}

.finance-workspace,
.analytics-hero,
.finance-story-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.analytics-ledger{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: stretch;
}

.analytics-ledger-main,
.analytics-ledger-side{
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.analytics-ledger-main{
  background: #f5fbf8;
  border-color: #bddfd5;
}

.analytics-ledger-metrics{
  display: grid;
  gap: 34px;
}

.analytics-ledger-value{
  margin-top: 8px;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.analytics-ledger-title{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
}

.analytics-ledger-main p{
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.finance-plain-table{
  display: grid;
  gap: 0;
}

.finance-plain-row{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.finance-plain-row:last-child{
  border-bottom: 0;
}

.finance-plain-row > div{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.finance-plain-row strong,
.finance-plain-row span,
.finance-plain-row b{
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-plain-row span{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.finance-plain-row b{
  text-align: right;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.finance-plain-row.is-main{
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: var(--radius);
  background: #f5fbf8;
  border: 1px solid #bddfd5;
}

.finance-plain-row.good b{
  color: var(--green);
}

.finance-plain-row.warn b{
  color: #9a6a00;
}

.finance-plain-row.bad b{
  color: var(--red);
}

.analytics-hero{
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.analytics-hero.compact{
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
}

.analytics-hero-main{
  background: #f5fbf8;
  border-color: #bddfd5;
}

.analytics-hero-side{
  background: #fbfcfd;
}

.analytics-hero-title{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
}

.analytics-proof-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.analytics-proof{
  display: grid;
  gap: 5px;
}

.analytics-proof strong{
  font-size: 19px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.analytics-statement{
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.analytics-statement > div{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.analytics-statement > div:last-child{
  border-bottom: 0;
}

.analytics-statement span{
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.analytics-statement strong{
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.finance-story-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-story-card.good{
  border-color: #bddfd5;
  background: #f5fbf8;
}

.finance-story-card.warn{
  border-color: #f1d398;
  background: #fff9ea;
}

.finance-story-card.bad{
  border-color: #efb9b0;
  background: #fff3f1;
}

.finance-queue{
  display: grid;
  gap: 8px;
}

.finance-queue-row{
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.finance-queue-row.is-actionable{
  cursor: pointer;
}

.finance-queue-row.is-actionable:hover strong{
  color: var(--green);
}

.finance-queue-action{
  border: 0;
  cursor: pointer;
}

.finance-queue-row:last-child{
  border-bottom: 0;
}

.finance-queue-row div{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.finance-queue-row strong,
.finance-queue-row b{
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-month-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.finance-month-tile{
  display: grid;
  gap: 10px;
}

.finance-month-top{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.finance-month-top strong,
.finance-month-top span{
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-month-value{
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.finance-month-bars{
  display: grid;
  gap: 8px;
}

.finance-mini-bar{
  display: grid;
  gap: 5px;
}

.finance-mini-bar div,
.finance-month-meta{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.finance-mini-bar span,
.finance-month-meta span{
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.finance-mini-bar strong{
  min-width: 0;
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

.finance-mini-bar i{
  display: block;
  height: 7px;
  min-width: 0;
  border-radius: 999px;
  background: #bddfd5;
}

.finance-mini-bar i.amber{
  background: #f1d398;
}

.finance-mini-bar i.red{
  background: #efb9b0;
}

.finance-month-meta{
  grid-template-columns: 1fr;
  gap: 4px;
}

.money-good{
  color: var(--green);
}

.money-bad{
  color: var(--red);
}

.client-order-grid,
.avito-month-grid,
.avito-account-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.client-order-card,
.avito-form,
.avito-total-box{
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  color: inherit;
  text-align: left;
}

.client-order-card{
  cursor: pointer;
}

.client-order-card:hover{
  border-color: #9ac9bc;
  background: #f7fffc;
}

.client-order-head{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.avito-month-card .panel-body{
  display: grid;
  gap: 12px;
}

.empty{
  padding: 26px;
  color: var(--muted);
  text-align: center;
}

.detail-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
  gap: 16px;
}

.orders-grid.is-detail-closed{
  grid-template-columns: minmax(0, 1fr);
}

.order-detail-panel .panel-head .toolbar{
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-box{
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.task-list{
  display: grid;
  gap: 10px;
}

.task-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

.task-card:hover{
  border-color: #b9c5cf;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.08);
  transform: translateY(-1px);
}

.task-card.is-done{
  background: #f8faf9;
}

.task-card-main{
  min-width: 0;
  display: grid;
  gap: 8px;
}

.task-card-top,
.task-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.task-actions{
  justify-content: flex-end;
  max-width: 420px;
}

.task-title-button{
  width: fit-content;
  max-width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.task-comment{
  color: var(--muted);
  line-height: 1.45;
}

.quick-status-box{
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.quick-status-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-status-chip{
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast),
    box-shadow var(--motion-fast);
}

.quick-status-chip:hover{
  border-color: #9ac9bc;
  color: #0e4f40;
  box-shadow: 0 6px 14px rgba(31, 41, 55, 0.08);
  transform: translateY(-1px);
}

.quick-status-chip.is-active{
  border-color: #9ac9bc;
  background: var(--green-soft);
  color: #0e4f40;
  cursor: default;
}

.calendar-board{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.calendar-group.red{
  border-color: #efb9b0;
}

.calendar-group.amber{
  border-color: #f1d398;
}

.calendar-group.green{
  border-color: #bddfd5;
}

.calendar-list,
.mobile-card-list{
  display: grid;
  gap: 10px;
}

.calendar-order-card,
.mobile-card{
  min-width: 0;
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
  color: var(--ink);
  text-align: left;
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}

.calendar-order-card{
  cursor: pointer;
  font: inherit;
}

.calendar-order-card:hover,
.mobile-card:hover{
  border-color: #9ac9bc;
  background: #f7fffc;
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.08);
  transform: translateY(-2px);
}

.calendar-order-head,
.mobile-card-head{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.calendar-order-task{
  color: var(--ink);
}

.calendar-order-meta,
.mobile-card-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.calendar-order-money,
.mobile-money-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.calendar-order-money span,
.mobile-money-grid span{
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.mobile-money-grid > div{
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.mobile-card-list{
  display: none;
  padding: 12px;
}

.mobile-card.is-selected{
  border-color: #9ac9bc;
  background: #f0f7f4;
}

.client-strip{
  margin: -6px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background var(--motion-fast),
    transform var(--motion-fast);
}

.client-strip:hover{
  background: #eef6ff;
  transform: translateX(2px);
}

.strong-link{
  color: var(--ink);
}

.field-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field{
  display: grid;
  gap: 6px;
}

.field label,
.field span{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dialog{
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.2);
}

.dialog::backdrop{
  background: rgba(24, 34, 44, 0.42);
}

.dialog-head,
.dialog-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.dialog-foot{
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.dialog-title{
  margin: 0;
  font-size: 18px;
}

.dialog-body{
  padding: 18px;
  max-height: calc(100vh - 178px);
  overflow: auto;
}

.client-dialog{
  width: min(1080px, calc(100vw - 28px));
}

.login-panel .button{
  width: 100%;
}

.form-error{
  padding: 10px 12px;
  border: 1px solid #efb9b0;
  border-radius: var(--radius);
  background: var(--red-soft);
  color: #a23c2c;
  font-size: 13px;
  font-weight: 700;
}

.sheet-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-tab{
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.sheet-tab.is-active{
  border-color: #9ac9bc;
  background: var(--green-soft);
  color: #0e4f40;
  font-weight: 800;
}

.raw-table td,
.raw-table th{
  min-width: 120px;
  max-width: 360px;
}

.raw-table .row-index{
  min-width: 54px;
  color: var(--muted);
  background: #f8fafb;
  font-weight: 800;
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid #9ac9bc;
  border-radius: var(--radius);
  background: #f7fffc;
  color: #0e4f40;
  box-shadow: var(--shadow);
  font-weight: 700;
}

.boot-state{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.boot-panel{
  width: min(520px, 100%);
}

/* Premium CRM visual layer */
body{
  background:
    linear-gradient(180deg, #f9fbfb 0%, #f4f6f7 34%, #eef3f2 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell{
  background: transparent;
}

.brand{
  gap: 4px;
}

.brand-title{
  max-width: 170px;
  color: #10171b;
  line-height: 1.08;
  letter-spacing: 0;
}

.icon-button{
  background: rgba(255, 255, 255, 0.84);
}

.nav{
  gap: 6px;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar{
  display: none;
}

.nav-button{
  position: relative;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid transparent;
  color: #283238;
}

.nav-button:hover{
  border-color: rgba(200, 214, 211, 0.7);
  background: #f3f7f6;
  transform: translateX(3px);
}

.nav-button.is-active{
  border-color: #c8e4dc;
  background: #e8f4f0;
  color: var(--green-strong);
  box-shadow: inset 3px 0 0 var(--green);
}

.nav-icon{
  border-color: #d4dfdc;
  background: #ffffff;
}

.nav-button.is-active .nav-icon{
  border-color: #a8d4c8;
  background: #f7fffc;
  color: var(--green-strong);
  box-shadow: 0 6px 14px rgba(20, 119, 96, 0.1);
}

.nav-count{
  background: rgba(255, 255, 255, 0.86);
  color: #5f6b72;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(200, 214, 211, 0.5);
}

.topbar{
  border-bottom-color: rgba(210, 221, 218, 0.82);
  background: rgba(248, 250, 250, 0.9);
  box-shadow: 0 10px 30px rgba(24, 33, 39, 0.045);
}

.search{
  min-height: 46px;
  border-color: #d4dfdc;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.search:hover,
.search:focus-within{
  border-color: #9fd2c4;
  background: #ffffff;
  box-shadow: var(--focus-ring), var(--shadow-soft);
}

.search-symbol{
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: #edf5f2;
  color: var(--green-strong);
}

.user-chip{
  color: #5b6770;
  font-weight: 750;
}

.content{
  gap: 24px;
  padding: 26px;
}

.content.is-view-entering > *{
  animation: view-enter var(--motion-slow) both;
}

.page-head{
  min-height: 54px;
  align-items: center;
}

.page-title{
  color: #131a1f;
  font-size: 28px;
  font-weight: 900;
}

.page-note{
  color: #66747c;
  line-height: 1.5;
}

.button,
.icon-button,
.sheet-tab{
  border-color: #cfdcda;
  background: #ffffff;
  color: #202b31;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.button:hover,
.icon-button:hover,
.sheet-tab:hover{
  border-color: #a9c4bd;
  background: #f7fbfa;
  box-shadow: 0 10px 22px rgba(24, 33, 39, 0.08);
}

.button:focus-visible,
.icon-button:focus-visible,
.link-button:focus-visible,
.sheet-tab:focus-visible,
.order-filter-trigger:focus-visible,
.filter-chip:focus-visible,
.quick-status-chip:focus-visible,
.calendar-order-card:focus-visible,
.mobile-card:focus-visible,
.task-card:focus-visible{
  outline: 0;
  box-shadow: var(--focus-ring);
}

.button.primary{
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 12px 24px rgba(20, 119, 96, 0.18);
}

.button.primary:hover{
  background: var(--green-strong);
  box-shadow: 0 14px 30px rgba(20, 119, 96, 0.22);
}

.button.danger{
  border-color: #e8beb7;
  background: #fff8f7;
  color: var(--red);
}

.button.subtle{
  background: rgba(255, 255, 255, 0.72);
}

.select,
.input,
.textarea{
  min-height: 42px;
  border-color: #cfdcda;
  background: #ffffff;
}

.select:hover,
.input:hover,
.textarea:hover{
  border-color: #b5c9c4;
}

.select:focus,
.input:focus,
.textarea:focus,
.search:focus-within{
  border-color: #91cabc;
  box-shadow: var(--focus-ring);
}

.panel,
.metric-card,
.analytics-card,
.analytics-row-card,
.partner-card,
.pnl-card,
.scenario-card,
.finance-command-main,
.finance-command-side,
.analytics-hero-main,
.analytics-hero-side,
.analytics-ledger-main,
.analytics-ledger-side,
.finance-owner-tile,
.analytics-proof,
.finance-pulse-card,
.finance-story-card,
.finance-month-tile,
.detail-box,
.client-order-card,
.avito-form,
.avito-total-box,
.task-card,
.calendar-order-card,
.mobile-card,
.transaction-card,
.avito-summary-row{
  border-color: #dce7e4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.panel{
  border-radius: 8px;
  transition:
    border-color var(--motion-normal),
    background var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-normal);
}

.panel:hover,
.metric-card:hover,
.analytics-card:hover,
.analytics-row-card:hover,
.partner-card:hover,
.pnl-card:hover,
.scenario-card:hover,
.finance-pulse-card:hover,
.finance-story-card:hover,
.finance-month-tile:hover,
.client-order-card:hover,
.avito-summary-row:hover{
  border-color: #bdd7d0;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.panel-head{
  min-height: 58px;
  border-bottom-color: #e3ece9;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.panel-title{
  color: #172024;
  font-weight: 900;
}

.panel-subtitle{
  color: #718087;
  line-height: 1.4;
}

.table-wrap{
  border-radius: 0 0 var(--radius) var(--radius);
}

th{
  background: #f4f8f7;
  color: #68757d;
  letter-spacing: 0;
}

td{
  color: #20292f;
}

tbody tr{
  transition:
    background var(--motion-fast),
    transform var(--motion-fast);
}

tr:hover td{
  background: #f5fbf9;
}

tbody tr:hover td:first-child{
  box-shadow: inset 3px 0 0 rgba(20, 119, 96, 0.46);
}

tr.is-selected td{
  background: #edf7f3;
}

.status-pill,
.tag,
.quick-status-chip,
.filter-chip{
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
}

.status-new{
  color: #2358a8;
  background: #e9f1ff;
}

.status-work{
  color: var(--green-strong);
  background: #e5f4ee;
}

.status-ready{
  color: #876012;
  background: #fff2d2;
}

.status-done{
  color: #53616a;
  background: #edf2f3;
}

.status-cancel{
  color: #a83e30;
  background: #fde9e6;
}

.money-good{
  color: var(--green-strong);
}

.money-bad{
  color: var(--red);
}

.filter-panel .panel-body{
  padding: 16px;
}

.order-filter-grid{
  gap: 10px;
}

.order-filter-dropdown{
  flex-basis: 148px;
  max-width: 190px;
}

.order-filter-trigger{
  min-height: 48px;
  border-color: #d2dfdc;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(24, 33, 39, 0.035);
}

.order-filter-trigger span{
  color: #718087;
  letter-spacing: 0;
}

.order-filter-trigger:hover,
.order-filter-trigger.is-active,
.order-filter-dropdown.is-open .order-filter-trigger{
  border-color: #95cfc0;
  background: #f5fbf9;
}

.order-filter-trigger.is-active,
.order-filter-dropdown.is-open .order-filter-trigger{
  box-shadow: var(--focus-ring);
}

.order-filter-menu{
  padding: 12px;
  border-color: #cae0da;
  background: #f7fbfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 24px rgba(24, 33, 39, 0.06);
  animation: filter-menu-enter var(--motion-normal) both;
}

.order-filter-menu-head{
  margin-bottom: 12px;
}

.filter-chip{
  border-color: #cfddda;
  background: #ffffff;
  color: #253038;
}

.filter-chip:hover{
  border-color: #9fcfc3;
  background: #f5fbf9;
  transform: translateY(-1px);
}

.filter-chip.is-active{
  border-color: #92cdbd;
  background: #e5f4ef;
  color: var(--green-strong);
}

.active-filter-line .tag{
  background: #f2f7f5;
  color: #53636b;
}

.finance-command{
  gap: 18px;
}

.finance-command-main,
.analytics-ledger-main,
.analytics-hero-main{
  border-color: #bee0d7;
  background: linear-gradient(180deg, #f8fffc 0%, #eff9f5 100%);
}

.finance-command-side{
  border-color: #efd8a6;
  background: linear-gradient(180deg, #fffdf7 0%, #fff7e3 100%);
}

.finance-eyebrow,
.analytics-label{
  color: #69787f;
}

.finance-command-value,
.analytics-hero-value,
.analytics-ledger-value,
.metric-value,
.analytics-value,
.partner-balance,
.forecast-value,
.calculator-price,
.finance-pulse-value,
.finance-story-value,
.finance-month-value{
  color: #151d22;
  font-variant-numeric: tabular-nums;
}

.finance-owner-tile,
.finance-pulse-card,
.finance-story-card,
.finance-month-tile{
  transition:
    border-color var(--motion-normal),
    background var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-normal);
}

.finance-owner-tile{
  background: rgba(255, 255, 255, 0.76);
}

.finance-pulse-card.good,
.analytics-card.good,
.finance-story-card.good,
.metric-card.good,
.transaction-card.income{
  border-color: #bee0d7;
  background: #f4fbf8;
}

.finance-pulse-card.warn,
.analytics-card.warn,
.finance-story-card.warn,
.metric-card.warn{
  border-color: #efd9a9;
  background: #fff8e8;
}

.finance-pulse-card.bad,
.analytics-card.bad,
.finance-story-card.bad,
.metric-card.bad,
.transaction-card.expense{
  border-color: #efc1ba;
  background: #fff3f1;
}

.finance-equation{
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(239, 216, 166, 0.55);
}

.finance-queue-row,
.analytics-list-row,
.analytics-statement > div,
.finance-plain-row,
.mini-row{
  border-bottom-color: #e3ece9;
}

.finance-queue-row.is-actionable{
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: 8px;
  transition:
    background var(--motion-fast),
    transform var(--motion-fast);
}

.finance-queue-row.is-actionable:hover{
  background: #f4fbf8;
  transform: translateX(3px);
}

.analytics-filter-panel{
  box-shadow: var(--shadow);
}

.analytics-filter-grid{
  grid-template-columns: minmax(130px, 0.7fr) minmax(250px, 1fr) minmax(360px, 1.35fr) minmax(96px, 0.45fr);
}

.analytics-filter-group.filters{
  grid-template-columns: minmax(92px, 0.8fr) minmax(140px, 1.15fr) minmax(92px, 0.8fr);
}

.analytics-filter-title{
  color: #172024;
}

.analytics-card,
.analytics-row-card,
.analytics-proof{
  transition:
    border-color var(--motion-normal),
    box-shadow var(--motion-normal),
    transform var(--motion-normal);
}

.analytics-ledger-side,
.analytics-hero-side{
  background: #ffffff;
}

.finance-plain-row.is-main{
  border-color: #bee0d7;
  background: #f3fbf7;
}

.analytics-list-row.as-button{
  border-radius: 8px;
  transition:
    background var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

.analytics-list-row.as-button:hover{
  background: #f5fbf9;
  color: var(--green-strong);
  transform: translateX(3px);
}

.mobile-money-grid > div,
.quick-status-box{
  border-color: #dce7e4;
  background: #ffffff;
}

.quick-status-chip.is-active{
  border-color: #94cfc0;
  background: #e5f4ef;
}

.calendar-group.red{
  border-color: #efc1ba;
}

.calendar-group.amber{
  border-color: #efd9a9;
}

.calendar-group.green{
  border-color: #bee0d7;
}

.client-strip:hover,
.client-click-cell:hover{
  background: #eff7ff !important;
}

.dialog{
  border-color: #d7e3e0;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(13, 25, 31, 0.24);
}

.dialog[open]{
  animation: dialog-enter var(--motion-slow) both;
}

.dialog::backdrop{
  background: rgba(16, 26, 31, 0.42);
  backdrop-filter: blur(4px);
}

.dialog-head,
.dialog-foot{
  border-color: #e3ece9;
  background: #fbfdfc;
}

.dialog-title{
  color: #131a1f;
  font-weight: 900;
}

.empty{
  border-radius: var(--radius);
  background: #f8fbfa;
  color: #718087;
}

.toast{
  border-color: #9fd2c4;
  background: #f5fffb;
  color: var(--green-strong);
  box-shadow: 0 18px 40px rgba(24, 33, 39, 0.14);
  animation: toast-enter var(--motion-slow) both;
}

.boot-state{
  background:
    linear-gradient(180deg, #f9fbfb 0%, #eef5f3 100%);
}

.boot-panel{
  animation: view-enter var(--motion-slow) both;
}

@keyframes filter-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px){
  .shell{
    grid-template-columns: 1fr;
  }

  .nav{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .work-grid,
.detail-grid,
.analytics-two,
.finance-dashboard-grid,
.finance-command,
.finance-workspace,
.analytics-ledger,
.analytics-hero,
.analytics-hero.compact,
.finance-story-grid,
.calendar-board{
    grid-template-columns: 1fr;
  }

  .metric-grid,
.analytics-card-grid,
.finance-pulse-grid,
.analytics-proof-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-filter-panel{
    width: 100%;
  }

  .analytics-filter-grid{
    grid-template-columns: 1fr;
  }

  .analytics-filter-group.filters{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journal-filter-grid{
    grid-template-columns: 1fr;
  }

  .journal-filter-group.filters{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .topbar,
.split,
.three,
.field-grid,
.attention-grid,
.analytics-mini-grid,
.partner-grid,
.scenario-grid,
.finance-owner-grid,
.finance-pulse-grid,
.analytics-proof-grid{
    grid-template-columns: 1fr;
  }

  .topbar{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .search{
    grid-column: auto;
  }

  .user-chip{
    justify-self: stretch;
    justify-content: space-between;
  }

  .brand{
    padding-bottom: 6px;
  }

  .brand-title{
    font-size: 17px;
  }

  .nav{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .nav-button{
    width: max-content;
    min-width: 136px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    padding: 9px;
  }

  .nav-button > span:nth-child(2){
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .page-head{
    display: grid;
    gap: 6px;
  }

  .page-title{
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .page-note{
    font-size: 13px;
  }

  .toolbar{
    justify-content: stretch;
  }

  .button,
.select,
.input{
    width: 100%;
  }

  .content{
    padding: 16px;
    gap: 16px;
  }

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

  .order-filter-grid .filter-wide{
    grid-column: auto;
  }

  .order-filter-dropdown{
    flex: 1 1 calc(50% - 8px);
    min-width: 136px;
  }

  .order-filter-menu{
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }

  .order-filter-reset{
    flex: 1 1 100%;
    margin-left: 0;
    width: 100% !important;
  }

  .analytics-filter-grid{
    grid-template-columns: 1fr;
  }

  .analytics-filter-panel .panel-body{
    padding: 14px;
  }

  .analytics-filter-group.dates,
.analytics-filter-group.filters{
    grid-template-columns: 1fr;
  }

  .journal-filter-group.dates,
.journal-filter-group.filters{
    grid-template-columns: 1fr;
  }

  .desktop-table{
    display: none;
  }

  .mobile-card-list{
    display: grid;
  }

  .calendar-order-head,
.mobile-card-head{
    display: grid;
    gap: 6px;
  }

  .calendar-order-money,
.mobile-money-grid{
    grid-template-columns: 1fr;
  }

  .task-card{
    grid-template-columns: 1fr;
  }

  .task-actions{
    justify-content: flex-start;
    max-width: none;
  }

  .dialog{
    width: min(920px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
  }

  .dialog-head,
.dialog-foot{
    flex-wrap: wrap;
    padding: 14px;
  }

  .dialog-body{
    padding: 14px;
    max-height: calc(100vh - 164px);
  }

  .dialog-foot .button{
    flex: 1 1 160px;
  }

  .metric-grid,
.analytics-card-grid,
.analytics-row-grid,
.pnl-grid,
.finance-month-strip{
    grid-template-columns: 1fr;
  }

  .analytics-line,
.analytics-statement > div,
.finance-plain-row,
.finance-queue-row,
.finance-equation{
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .analytics-line strong,
.analytics-statement strong,
.finance-plain-row b,
.finance-equation span{
    text-align: left;
  }

  .finance-command-value,
.analytics-hero-value,
.analytics-ledger-value{
    font-size: 30px;
  }
}

/* Reimbursement ledger: personal business expenses are settled separately from P&L. */
.expense-funding-note,
.reimbursement-panel,
.reimbursement-empty{
  grid-column: 1 / -1;
}

.expense-funding-note{
  line-height: 1.45;
}

.reimbursement-panel{
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dce3ea;
  border-radius: 12px;
  background: #f8fafc;
}

.reimbursement-summary,
.reimbursement-dialog-summary{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.reimbursement-dialog-summary{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.reimbursement-summary > div,
.reimbursement-dialog-summary > div{
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #e1e7ed;
  border-radius: 9px;
  background: #fff;
}

.reimbursement-summary span,
.reimbursement-dialog-summary span{
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.reimbursement-summary strong,
.reimbursement-dialog-summary strong{
  min-width: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.reimbursement-summary .is-due,
.reimbursement-dialog-summary .is-due{
  border-color: #edc984;
  background: #fff8e8;
  color: #8a5512;
}

.reimbursement-summary .is-settled{
  border-color: #b9ddcf;
  background: #effaf5;
  color: #176c53;
}

.reimbursement-policy,
.reimbursement-empty,
.reimbursement-settled{
  padding: 11px 12px;
  border-radius: 9px;
  background: #edf2f7;
  color: #5d6b78;
  font-size: 12px;
  line-height: 1.45;
}

.reimbursement-empty{
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce3ea;
}

.reimbursement-settled{
  background: #eaf7f1;
  color: #176c53;
  font-weight: 750;
}

.reimbursement-history{
  display: grid;
  gap: 8px;
}

.reimbursement-row{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid #e1e7ed;
  border-radius: 9px;
  background: #fff;
}

.reimbursement-row > div{
  min-width: 0;
  display: grid;
  gap: 2px;
}

.reimbursement-row span,
.reimbursement-row small{
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.reimbursement-delete{
  width: 30px;
  height: 30px;
  min-height: 30px;
  color: #a43c3c;
}

.reimbursement-dialog{
  width: min(720px, calc(100vw - 32px));
  max-width: min(720px, calc(100vw - 32px));
}

.reimbursement-form-grid{
  margin-top: 14px;
}

.finance-equation{
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 5px;
  font-size: 12px;
}

.finance-equation span{
  overflow-wrap: normal;
  white-space: nowrap;
}

@media (max-width: 900px){

  .reimbursement-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px){
  .reimbursement-summary,
.reimbursement-dialog-summary{
    grid-template-columns: minmax(0, 1fr);
  }

  .reimbursement-row{
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .reimbursement-row > :last-child{
    grid-column: 2;
  }

  .reimbursement-dialog{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px;
  }
}

/* Visual safety pass: keep numeric and money values readable while text still wraps. */
.numeric,
.metric-value,
.finance-command-value,
.finance-pulse-value,
.finance-story-value,
.finance-month-value,
.finance-owner-tile strong,
.partner-balance,
.forecast-value,
.analytics-value,
.analytics-hero-value,
.analytics-ledger-value,
.calculator-price,
.transaction-card-amount,
.money-line strong,
.detail-box > strong{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}

.safe-money{
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}

.million-controls{
  display: grid;
  gap: 14px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.million-control-title,
.million-hero,
.million-hero-grid,
.million-grid,
.million-scenario-grid,
.million-forecast-grid,
.million-model-list{
  min-width: 0;
}

.million-control-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.million-control-title > div:first-child{
  display: grid;
  gap: 4px;
}

.million-control-title span{
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.million-control-title small{
  color: var(--muted);
  line-height: 1.35;
}

.million-control-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.million-control-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.million-input-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.million-input-wrap b{
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.million-page{
  display: grid;
  gap: 18px;
}

.million-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
  gap: 14px;
  align-items: stretch;
}

.million-hero-main{
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.million-hero-main strong{
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.million-hero-main span{
  max-width: 620px;
  color: var(--muted);
  line-height: 1.45;
}

.million-hero-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.million-kpi,
.million-model-card,
.million-scenario-card,
.million-forecast-card{
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.million-kpi{
  display: grid;
  gap: 8px;
  padding: 16px;
}

.million-kpi span,
.million-scenario-card span,
.million-forecast-card span,
.million-model-card > div span{
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.million-kpi strong,
.million-scenario-card strong,
.million-forecast-card strong,
.million-model-card > div strong{
  min-width: 0;
  white-space: nowrap;
  font-size: 22px;
}

.million-kpi small,
.million-scenario-card small{
  min-width: 0;
  color: var(--muted);
  overflow-wrap: break-word;
}

.million-kpi.green,
.million-scenario-card.green,
.million-model-card.green{
  border-color: rgba(20, 119, 96, 0.28);
  background: var(--green-soft);
}

.million-kpi.amber{
  border-color: rgba(152, 101, 21, 0.28);
  background: var(--amber-soft);
}

.million-kpi.red,
.million-scenario-card.red,
.million-model-card.red{
  border-color: rgba(184, 77, 61, 0.28);
  background: var(--red-soft);
}

.million-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.million-card{
  display: grid;
  min-width: 0;
  gap: 12px;
}

.million-model-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.million-model-card{
  display: grid;
  gap: 10px;
  padding: 14px;
}

.million-model-card > div,
.million-forecast-card > div{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.million-model-card > div strong,
.million-forecast-card > div strong{
  flex: 0 0 auto;
  text-align: right;
}

.million-scenario-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.million-scenario-card{
  display: grid;
  gap: 8px;
  padding: 16px;
}

.million-forecast-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.million-forecast-card{
  display: grid;
  gap: 10px;
  padding: 14px;
}

.million-card .scenario-statement-line strong,
.million-forecast-card .scenario-statement-line strong{
  white-space: nowrap;
}

.million-model-card > div{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 8px;
}

.million-model-card > div strong{
  text-align: left;
}

.million-model-card .scenario-statement-line,
.million-forecast-card .scenario-statement-line{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 6px;
}

.million-model-card .scenario-statement-line span,
.million-forecast-card .scenario-statement-line span,
.million-model-card > div span,
.million-forecast-card > div span,
.million-scenario-card span,
.million-kpi span{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.million-model-card .scenario-statement-line strong,
.million-forecast-card .scenario-statement-line strong{
  text-align: left;
}

.million-flow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  min-width: 0;
}

.million-step-card{
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(189, 203, 197, 0.84);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.million-step-card.green{
  border-color: rgba(20, 119, 96, 0.28);
  background: #f0faf6;
}

.million-step-card.amber{
  border-color: rgba(152, 101, 21, 0.28);
  background: #fff8e8;
}

.million-step-card.red{
  border-color: rgba(184, 77, 61, 0.28);
  background: #fff0ee;
}

.million-step-card.main{
  border-color: rgba(20, 119, 96, 0.44);
  box-shadow: 0 20px 44px rgba(20, 119, 96, 0.14);
}

.million-step-head{
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.million-step-head span{
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(20, 119, 96, 0.12);
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.million-step-head b{
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.million-step-card > strong{
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.05;
  white-space: nowrap;
}

.million-step-card > p,
.million-card-note,
.million-model-card > p,
.million-model-card > small{
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.million-step-facts{
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(217, 226, 221, 0.85);
}

.million-step-facts div{
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.million-step-facts span{
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.million-step-facts strong{
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.million-advanced{
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(217, 226, 221, 0.8);
}

.million-advanced summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.million-advanced summary::-webkit-details-marker{
  display: none;
}

.million-advanced summary::after{
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(20, 119, 96, 0.22);
  border-radius: 999px;
  color: var(--green);
  font-weight: 950;
}

.million-advanced[open] summary::after{
  content: "-";
}

.million-advanced summary span{
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.million-advanced summary small{
  margin-left: auto;
  color: var(--muted);
}

.million-advanced .million-control-grid{
  margin-top: 2px;
}

.million-readable-card{
  padding: 18px;
  border: 1px solid rgba(189, 203, 197, 0.84);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.million-section-card{
  align-content: start;
}

.million-card .scenario-section-head{
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 2px;
}

.million-card .scenario-section-head span{
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.million-card .scenario-section-head strong{
  flex: 0 0 auto;
  color: var(--text);
  white-space: nowrap;
}

.million-card .scenario-statement-line{
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(217, 226, 221, 0.8);
}

.million-card .scenario-statement-line span{
  min-width: 0;
  color: var(--muted);
}

.million-card .scenario-statement-line strong{
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.million-card .scenario-statement-line.green strong,
.million-card .money-good{
  color: var(--green);
}

.million-card .scenario-statement-line.amber strong{
  color: var(--amber);
}

.million-card .scenario-statement-line.red strong,
.million-card .money-bad{
  color: var(--red);
}

.million-model-card .scenario-statement-line,
.million-forecast-card .scenario-statement-line{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: initial;
  justify-items: start;
  gap: 5px;
}

.million-model-card .scenario-statement-line strong,
.million-forecast-card .scenario-statement-line strong{
  text-align: left;
}

.million-model-card{
  align-content: start;
}

.million-model-card.primary{
  border-color: rgba(20, 119, 96, 0.42);
  box-shadow: 0 18px 38px rgba(20, 119, 96, 0.13);
}

.million-model-card > .million-model-title{
  display: flex;
  grid-template-columns: none;
  justify-items: initial;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.million-model-title span,
.million-scenario-card span,
.million-forecast-card span{
  text-transform: none;
  font-size: 13px;
  line-height: 1.25;
}

.million-model-title b{
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(20, 119, 96, 0.12);
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
}

.million-model-card > strong{
  min-width: 0;
  max-width: 100%;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.05;
  white-space: nowrap;
}

.million-scenario-card strong{
  font-size: clamp(24px, 2.4vw, 34px);
}

.million-scenario-card small{
  line-height: 1.35;
}

.million-forecast-card > .million-forecast-title{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 6px;
}

.million-forecast-card > .million-forecast-title strong{
  text-align: left;
  white-space: nowrap;
}

@media (max-width: 1180px){

  .million-hero,
.million-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .million-model-list,
.million-scenario-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px){

  .million-controls{
    padding: 14px;
  }

  .million-control-title,
.million-control-actions{
    align-items: stretch;
  }

  .million-control-actions{
    width: 100%;
  }

  .million-control-actions .button{
    flex: 1 1 140px;
  }

  .million-control-grid,
.million-hero-grid,
.million-model-list,
.million-scenario-grid,
.million-forecast-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .million-hero-main{
    padding: 18px;
  }

  .million-hero-main strong{
    font-size: clamp(30px, 13vw, 42px);
  }

  .million-step-card > strong,
.million-model-card > strong,
.million-scenario-card strong,
.million-forecast-title strong{
    font-size: clamp(25px, 10vw, 36px);
  }

  .million-step-facts div,
.million-card .scenario-statement-line{
    display: grid;
    justify-content: initial;
    gap: 5px;
  }

  .million-step-facts strong,
.million-card .scenario-statement-line strong{
    text-align: left;
  }

  .million-advanced summary{
    align-items: flex-start;
  }

  .million-advanced summary small{
    display: none;
  }

  .million-model-card > div,
.million-forecast-card > div{
    display: grid;
    gap: 6px;
  }

  .million-model-card > div strong,
.million-forecast-card > div strong{
    text-align: left;
  }
}


.payroll-owner-section,
.payroll-profile-panel,
.payroll-dashboard-panel,
.employee-payroll-card{
  min-width: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.payroll-owner-section{
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #cfe0da;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(30, 74, 60, 0.07);
}

.payroll-section-head,
.payroll-profile-head,
.payroll-dashboard-head{
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.payroll-section-head{
  margin-bottom: 16px;
}

.payroll-section-head h2,
.payroll-profile-head h2,
.payroll-dashboard-head h2{
  margin: 4px 0 5px;
  color: #14251f;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.payroll-section-head p,
.payroll-profile-head p,
.payroll-dashboard-head p{
  max-width: 820px;
  margin: 0;
  color: #64746e;
  font-size: 13px;
  line-height: 1.55;
}

.payroll-month-control{
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  color: #61716b;
  font-size: 12px;
  font-weight: 750;
}

.payroll-month-control .input{
  width: 176px;
  min-height: 42px;
  border-color: #cbdcd6;
  background: #f8fbfa;
  color: #173029;
  font-size: 13px;
}

.payroll-summary-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 9px;
}

.payroll-summary-card{
  min-width: 0;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d8e5e0;
  border-radius: 16px;
  background: #f8fbfa;
}

.payroll-summary-card > span,
.payroll-money-cell > span,
.payroll-profile-grid span,
.payroll-dashboard-metrics span,
.employee-payroll-facts span{
  color: #66756f;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.payroll-summary-card > strong{
  color: #18352c;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.payroll-summary-card > small,
.payroll-money-cell > small,
.payroll-profile-grid small,
.payroll-dashboard-metrics small,
.employee-payroll-facts small{
  color: #77857f;
  font-size: 12px;
  line-height: 1.35;
}

.payroll-summary-card.is-income{ border-color: #bcdaca; background: #eef8f4; }
.payroll-summary-card.is-bonus{ border-color: #e7d6a6; background: #fffaf0; }
.payroll-summary-card.is-salary{ border-color: #cdd9eb; background: #f4f8fc; }
.payroll-summary-card.is-paid{ border-color: #c3dfd2; background: #f2faf6; }
.payroll-summary-card.is-due{ border-color: #ebd6ae; background: #fff9eb; }
.payroll-summary-card.is-profit{ border-color: #9dcebc; background: linear-gradient(145deg, #eef9f4, #dff2ea); }
.payroll-summary-card.is-loss{ border-color: #e6c1bd; background: #fff3f1; }
.payroll-summary-card:is(.is-income, .is-paid, .is-profit) > strong{ color: #206d57; }
.payroll-summary-card:is(.is-bonus, .is-due) > strong{ color: #94651a; }
.payroll-summary-card.is-loss > strong{ color: #a84843; }

.payroll-notice,
.payroll-rule-note,
.payroll-dashboard-foot{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid #e6d6ad;
  border-radius: 13px;
  background: #fff9e9;
  color: #6d5a2a;
  font-size: 12px;
  line-height: 1.45;
}

.payroll-notice strong,
.payroll-rule-note strong,
.payroll-dashboard-foot strong{
  flex: 0 0 auto;
  color: #735518;
  font-size: 12px;
}

.payroll-employee-list{
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.payroll-employee-row{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(210px, 1.55fr) repeat(4, minmax(105px, 0.8fr)) minmax(165px, auto);
  align-items: stretch;
  border: 1px solid #d9e5e1;
  border-radius: 15px;
  background: #fbfdfc;
  overflow: hidden;
}

.payroll-employee-row.is-inactive{ opacity: 0.68; }

.payroll-person,
.payroll-plan-cell,
.payroll-money-cell,
.payroll-row-actions{
  min-width: 0;
  padding: 14px;
  border-right: 1px solid #e3ebe8;
}

.payroll-person{
  display: flex;
  align-items: center;
  gap: 11px;
  background: transparent;
  color: #173029;
  text-align: left;
  cursor: pointer;
}

.payroll-person:hover{ background: #eef7f3; }

.payroll-avatar{
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #dff1ea;
  color: #246a57;
  font-size: 17px;
  font-weight: 850;
}

.payroll-person > span:last-child,
.payroll-plan-cell{
  display: grid;
  align-content: center;
  gap: 4px;
}

.payroll-person strong,
.payroll-plan-cell strong,
.payroll-plan-cell > div > span{
  min-width: 0;
  color: #173029;
  font-size: 13px;
  line-height: 1.3;
}

.payroll-person small,
.payroll-plan-cell small{
  color: #718079;
  font-size: 12px;
  line-height: 1.3;
}

.payroll-plan-cell > div{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.payroll-progress,
.payroll-profile-progress > span,
.employee-payroll-progress > span,
.payroll-dashboard-person-progress{
  height: 7px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ece9;
}

.payroll-progress i,
.payroll-profile-progress i,
.employee-payroll-progress i,
.payroll-dashboard-person-progress i{
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e7d67, #58a78f);
}

.payroll-money-cell{
  display: grid;
  align-content: center;
  gap: 4px;
}

.payroll-money-cell > strong{
  color: #1c382f;
  font-size: 17px;
  line-height: 1.15;
}

.payroll-money-cell.is-bonus > strong,
.payroll-money-cell.is-due > strong{ color: #986515; }
.payroll-money-cell.is-settled > strong{ color: #23715b; }

.payroll-row-actions{
  display: grid;
  align-content: center;
  gap: 7px;
  border-right: 0;
}

.payroll-row-actions .button{
  min-height: 36px;
  padding-inline: 11px;
  font-size: 12px;
}

.payroll-row-actions .button:disabled,
.payroll-profile-actions .button:disabled{
  opacity: 0.52;
  cursor: default;
}

.team-person-payroll{
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #315f51;
  font-size: 12px;
}

.team-person-payroll small{ color: var(--team-muted); font-size: 12px; }

.payroll-profile-panel{
  margin-bottom: 12px;
  padding: 20px;
  border: 1px solid #cbded7;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff, #edf7f3);
  box-shadow: 0 13px 32px rgba(33, 78, 63, 0.06);
}

.payroll-profile-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.payroll-profile-grid > div{
  min-width: 0;
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 14px;
  border: 1px solid #d8e5e0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.payroll-profile-grid strong{
  color: #18372d;
  font-size: 20px;
  line-height: 1.1;
}

.payroll-profile-grid .is-due strong{ color: #956317; }
.payroll-profile-grid .is-profit strong{ color: #226f59; }
.payroll-profile-grid .is-loss strong{ color: #aa4c45; }

.payroll-profile-progress{
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.payroll-profile-progress small{ color: #63746d; font-size: 12px; }

.payroll-profile-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.team-profile-salary-history{ grid-column: 1 / -1; }

/* Владелец: отдельный зарплатный блок на дашборде. */
.payroll-dashboard-panel{
  margin: 18px 0;
  padding: 22px;
  border: 1px solid #cfe0da;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(29, 69, 56, 0.07);
}

.payroll-dashboard-head > div > span{
  color: #2f7c68;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payroll-dashboard-metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.payroll-dashboard-metrics > article{
  min-width: 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 15px;
  border: 1px solid #d9e5e1;
  border-radius: 15px;
  background: #f8fbfa;
}

.payroll-dashboard-metrics strong{
  color: #17372d;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.payroll-dashboard-metrics .is-income,
.payroll-dashboard-metrics .is-paid,
.payroll-dashboard-metrics .is-profit{ border-color: #bcdaca; background: #eff8f4; }
.payroll-dashboard-metrics .is-salary{ border-color: #cfdaea; background: #f4f8fc; }
.payroll-dashboard-metrics .is-cost,
.payroll-dashboard-metrics .is-due{ border-color: #ead8b6; background: #fff9ed; }
.payroll-dashboard-metrics .is-loss{ border-color: #e6c3bf; background: #fff3f1; }
.payroll-dashboard-metrics .is-dividend{ border-color: #acd2c3; background: linear-gradient(145deg, #e9f7f1, #d9eee6); }
.payroll-dashboard-metrics :is(.is-income, .is-paid, .is-profit, .is-dividend) strong{ color: #216d57; }
.payroll-dashboard-metrics :is(.is-cost, .is-due) strong{ color: #966419; }
.payroll-dashboard-metrics .is-loss strong{ color: #a94842; }

.payroll-dashboard-people{
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.payroll-dashboard-person{
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(150px, 1fr) minmax(150px, 1.4fr) repeat(3, minmax(120px, 0.7fr));
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dce6e2;
  border-radius: 14px;
  background: #fbfdfc;
  color: #18352c;
  text-align: left;
  cursor: pointer;
}

.payroll-dashboard-person:hover{ border-color: #9fcbbb; background: #f2f9f6; }

.payroll-dashboard-person-name,
.payroll-dashboard-person > span:not(.payroll-avatar):not(.payroll-dashboard-person-progress){
  min-width: 0;
  display: grid;
  gap: 3px;
}

.payroll-dashboard-person strong{ font-size: 14px; line-height: 1.25; }
.payroll-dashboard-person small{ color: #6d7d76; font-size: 12px; line-height: 1.25; }
.payroll-dashboard-person .is-profit strong{ color: #216d57; }
.payroll-dashboard-person .is-loss strong{ color: #aa4c45; }
.payroll-dashboard-foot{ justify-content: space-between; border-color: #cadfd7; background: #f1f8f5; color: #547067; }
.payroll-dashboard-foot strong{ color: #245f4e; }

/* Личный кабинет сотрудника: согласованный мятный стиль без раскрытия расходов. */
.employee-payroll-card{
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid #bad6cc;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff 0%, #e5f3ed 100%);
  box-shadow: 0 18px 40px rgba(31, 90, 71, 0.11);
}

.employee-payroll-hero{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.employee-payroll-hero > div{
  display: grid;
  gap: 5px;
}

.employee-payroll-hero > div > span{
  color: #2a745f;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employee-payroll-hero > div > strong{
  color: #153d31;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.employee-payroll-hero > div > small{
  color: #61736c;
  font-size: 14px;
}

.employee-payroll-status{
  min-width: 205px;
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid #d8c79a;
  border-radius: 16px;
  background: #fff8e7;
}

.employee-payroll-status.is-paid{ border-color: #acd2c3; background: #eef9f4; }
.employee-payroll-status small{ color: #7b6a38; font-size: 12px; font-weight: 750; }
.employee-payroll-status strong{ color: #8b611a; font-size: 25px; }
.employee-payroll-status.is-paid strong{ color: #236d58; }

.employee-payroll-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.employee-payroll-facts > div{
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 15px;
  border: 1px solid #d0e1db;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
}

.employee-payroll-facts strong{ color: #173c31; font-size: 23px; line-height: 1.1; }

.employee-payroll-progress{
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.employee-payroll-progress > div{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #335e50;
  font-size: 13px;
  font-weight: 750;
}

.employee-payroll-progress > span{ height: 10px; background: #d4e5df; }
.employee-payroll-progress small{ color: #65766f; font-size: 12px; line-height: 1.45; }

.payroll-dialog-form .field > span,
.payroll-expense-editor .field > span{ display: block; margin-bottom: 7px; color: #586a63; font-size: 12px; font-weight: 750; }
.payroll-dialog-form .textarea,
.payroll-expense-editor .textarea{ min-height: 90px; }
.payroll-dialog-summary{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.payroll-dialog-summary > div{ min-width: 0; display: grid; gap: 5px; padding: 13px; border: 1px solid #d8e4e0; border-radius: 13px; background: #f7faf9; }
.payroll-dialog-summary span{ color: #6a7973; font-size: 12px; }
.payroll-dialog-summary strong{ color: #18382e; font-size: 20px; }
.payroll-dialog-summary .is-due strong{ color: #946419; }

@media (max-width: 1420px){
  .payroll-summary-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .payroll-employee-row{ grid-template-columns: minmax(175px, 1fr) minmax(210px, 1.35fr) repeat(2, minmax(105px, 0.7fr)) minmax(165px, auto); }
  .payroll-employee-row .payroll-money-cell:nth-of-type(3),
.payroll-employee-row .payroll-money-cell:nth-of-type(4){ display: none; }
}

@media (max-width: 1100px){
  .payroll-summary-grid,
.payroll-profile-grid,
.payroll-dashboard-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-employee-row{ grid-template-columns: minmax(180px, 1fr) minmax(210px, 1.25fr) minmax(120px, 0.7fr) minmax(165px, auto); }
  .payroll-employee-row .payroll-money-cell:nth-of-type(1){ display: none; }
  .payroll-dashboard-person{ grid-template-columns: 42px minmax(140px, 1fr) minmax(140px, 1.2fr) repeat(2, minmax(105px, 0.65fr)); }
  .payroll-dashboard-person > span:last-child{ display: none; }
  .employee-payroll-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .payroll-section-head,
.payroll-profile-head,
.payroll-dashboard-head,
.employee-payroll-hero{ align-items: stretch; flex-direction: column; }
  .payroll-month-control .input{ width: 100%; }
  .payroll-employee-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .payroll-person,
.payroll-plan-cell{ grid-column: span 1; border-bottom: 1px solid #e3ebe8; }
  .payroll-employee-row .payroll-money-cell{ display: grid !important; }
  .payroll-row-actions{ grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-dashboard-person{ grid-template-columns: 42px minmax(0, 1fr) minmax(120px, 0.8fr); }
  .payroll-dashboard-person-progress{ grid-column: 2 / -1; grid-row: 2; }
  .payroll-dashboard-person > span:nth-last-child(-n + 3){ display: none; }
  .payroll-dashboard-foot{ align-items: flex-start; flex-direction: column; }
  .team-person-payroll{ width: 100%; margin-right: 0; justify-content: space-between; }
}

@media (max-width: 600px){
  .payroll-owner-section,
.payroll-profile-panel,
.payroll-dashboard-panel,
.employee-payroll-card{ padding: 16px; border-radius: 17px; }
  .payroll-summary-grid,
.payroll-profile-grid,
.payroll-dashboard-metrics,
.employee-payroll-facts{ grid-template-columns: minmax(0, 1fr); }
  .payroll-summary-card,
.payroll-dashboard-metrics > article,
.payroll-profile-grid > div,
.employee-payroll-facts > div{ min-height: 96px; }
  .payroll-employee-row{ grid-template-columns: minmax(0, 1fr); }
  .payroll-person,
.payroll-plan-cell,
.payroll-money-cell,
.payroll-row-actions{ grid-column: 1; border-right: 0; border-bottom: 1px solid #e3ebe8; }
  .payroll-row-actions{ grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .payroll-profile-actions{ display: grid; grid-template-columns: minmax(0, 1fr); }
  .payroll-dashboard-person{ grid-template-columns: 42px minmax(0, 1fr); }
  .payroll-dashboard-person-progress{ grid-column: 1 / -1; }
  .employee-payroll-status{ min-width: 0; }
  .employee-payroll-hero > div > strong{ font-size: 38px; }
  .payroll-notice,
.payroll-rule-note{ align-items: flex-start; flex-direction: column; }
  .payroll-dialog-summary{ grid-template-columns: minmax(0, 1fr); }
}

/* Личный кабинет сотрудника */
body[data-crm-role="employee"]{
  --employee-ink: #172033;
  --employee-muted: #6c778d;
  --employee-line: #e4e8f0;
  --employee-surface: #ffffff;
  --employee-bg: #f5f7fb;
  --employee-accent: #6457d9;
  --employee-accent-dark: #4f43be;
  --employee-accent-soft: #efedff;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--employee-bg);
  color: var(--employee-ink);
}

body[data-crm-role="employee"] #app{
  min-height: 100vh;
}

.employee-shell{
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(108, 92, 231, 0.09), transparent 26rem),
    var(--employee-bg);
}

.employee-header{
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 12px clamp(20px, 4vw, 60px);
  border-bottom: 1px solid rgba(218, 223, 234, 0.86);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 30px rgba(32, 39, 58, 0.04);
  backdrop-filter: blur(18px);
}

.employee-brand,
.employee-user,
.employee-nav,
.employee-brand > div,
.employee-user > span{
  min-width: 0;
  display: flex;
  align-items: center;
}

.employee-brand{
  gap: 11px;
}

.employee-brand-mark{
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #786ce6, #5548c6);
  box-shadow: 0 10px 22px rgba(85, 72, 198, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.employee-brand > div,
.employee-user > span{
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.employee-brand strong,
.employee-user strong{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-ink);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-brand small,
.employee-user small{
  color: var(--employee-muted);
  font-size: 11px;
}

.employee-nav{
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--employee-line);
  border-radius: 14px;
  background: #f7f8fb;
}

.employee-nav-button{
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--employee-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  transition: 160ms ease;
}

.employee-nav-button:hover,
.employee-nav-button.is-active{
  background: #fff;
  box-shadow: 0 4px 14px rgba(34, 42, 67, 0.08);
  color: var(--employee-accent-dark);
}

.employee-nav-button .nav-icon,
.employee-mobile-nav .nav-icon{
  width: 18px;
  height: 18px;
}

.employee-nav-button .nav-icon svg,
.employee-mobile-nav .nav-icon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.employee-nav-button b{
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
  font-size: 10px;
  text-align: center;
}

.employee-user{
  justify-content: flex-end;
  gap: 12px;
}

.employee-user .button{
  min-height: 38px;
  border-color: var(--employee-line);
  background: #fff;
  color: var(--employee-ink);
}

.employee-main{
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 34px clamp(20px, 4vw, 60px) 60px;
}

.employee-page{
  min-width: 0;
}

.employee-page-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.employee-page-head > div:first-child{
  min-width: 0;
}

.employee-eyebrow{
  display: block;
  margin-bottom: 7px;
  color: var(--employee-accent-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.employee-page-head h1{
  margin: 0;
  color: var(--employee-ink);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.employee-page-head p{
  margin: 8px 0 0;
  color: var(--employee-muted);
  font-size: 14px;
  line-height: 1.5;
}

.employee-period-controls{
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 9px;
}

.employee-segmented{
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--employee-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(35, 42, 62, 0.04);
}

.employee-segmented button{
  padding: 8px 11px;
  border-radius: 9px;
  background: transparent;
  color: var(--employee-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.employee-segmented button:hover,
.employee-segmented button.is-active{
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
}

.employee-custom-range{
  display: flex;
  gap: 8px;
}

.employee-custom-range label{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--employee-muted);
  font-size: 11px;
  font-weight: 750;
}

.employee-custom-range .input{
  width: 138px;
  min-height: 36px;
  border-color: var(--employee-line);
  background: #fff;
  font-size: 12px;
}

.employee-kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.employee-kpi{
  position: relative;
  min-width: 0;
  min-height: 128px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--employee-line);
  border-radius: 17px;
  background: var(--employee-surface);
  box-shadow: 0 9px 28px rgba(35, 43, 65, 0.045);
  color: var(--employee-ink);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.employee-kpi::after{
  position: absolute;
  top: -22px;
  right: -22px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.07;
}

.employee-kpi:hover{
  transform: translateY(-2px);
  border-color: #cfd4e4;
  box-shadow: 0 15px 36px rgba(35, 43, 65, 0.09);
}

.employee-kpi > span{
  color: var(--employee-muted);
  font-size: 12px;
  font-weight: 750;
}

.employee-kpi > strong{
  max-width: 100%;
  margin-top: auto;
  overflow: hidden;
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-kpi > small{
  color: var(--employee-muted);
  font-size: 11px;
}

.employee-kpi.is-violet{ color: #6557d9; }
.employee-kpi.is-blue{ color: #376fc4; }
.employee-kpi.is-green{ color: #168467; }
.employee-kpi.is-amber{ color: #ad7319; }
.employee-kpi.is-red{ color: #c15050; }
.employee-kpi.is-slate{ color: #5d6b80; }
.employee-kpi > span,
.employee-kpi > small{ color: var(--employee-muted); }

.employee-dashboard-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.employee-panel{
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--employee-line);
  border-radius: 18px;
  background: var(--employee-surface);
  box-shadow: 0 10px 30px rgba(35, 43, 65, 0.045);
}

.employee-panel-head{
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--employee-line);
}

.employee-panel-head > div{
  min-width: 0;
}

.employee-panel-head span,
.employee-panel-head > small{
  color: var(--employee-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-panel-head h2{
  margin: 4px 0 0;
  color: var(--employee-ink);
  font-size: 17px;
  letter-spacing: -0.015em;
}

.employee-panel-head > button{
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-status-list{
  display: grid;
  padding: 8px 18px 16px;
}

.employee-status-list > button{
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(56px, 1fr) 25px 95px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f5;
  background: transparent;
  color: var(--employee-ink);
  cursor: pointer;
  text-align: left;
}

.employee-status-list > button:last-child{
  border-bottom: 0;
}

.employee-status-list .status-pill{
  justify-self: start;
  white-space: nowrap;
}

.employee-status-track{
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f5;
}

.employee-status-track i{
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #786ce6, #9e95ee);
}

.employee-status-list > button > strong{
  font-size: 13px;
  text-align: right;
}

.employee-status-list > button > small{
  color: var(--employee-muted);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.employee-deadline-row,
.employee-recent-row{
  width: calc(100% - 36px);
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 12px;
  margin: 0 18px;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f5;
  background: transparent;
  color: var(--employee-ink);
  cursor: pointer;
  text-align: left;
}

.employee-deadline-row{
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.employee-deadline-row:last-child,
.employee-recent-row:last-child{
  border-bottom: 0;
}

.employee-order-id{
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 8px;
  background: #f0f2f7;
  color: #58657b;
  font-size: 11px;
  font-weight: 850;
}

.employee-deadline-client,
.employee-deadline-date,
.employee-recent-row > span{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.employee-deadline-client strong,
.employee-recent-row strong{
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-deadline-client small,
.employee-deadline-date small,
.employee-recent-row small{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-deadline-date{
  align-items: flex-end;
  text-align: right;
}

.employee-deadline-date strong,
.employee-order-facts strong.is-neutral,
.employee-editor-context .is-neutral{ color: var(--employee-ink); }
.employee-deadline-date.is-red strong,
.employee-order-facts strong.is-red,
.employee-editor-context .is-red{ color: #c34e4e; }
.employee-deadline-date.is-amber strong,
.employee-order-facts strong.is-amber,
.employee-editor-context .is-amber{ color: #a66c12; }
.employee-deadline-date.is-green strong,
.employee-order-facts strong.is-green,
.employee-editor-context .is-green{ color: #168467; }

.employee-recent-row{
  grid-template-columns: minmax(0, 1fr) auto;
}

.employee-recent-row > span:last-child{
  align-items: flex-end;
}

.employee-recent-row .status-pill{
  padding: 3px 7px;
  font-size: 9px;
}

.employee-empty{
  min-height: 200px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--employee-muted);
  text-align: center;
}

.employee-empty > span{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f6f1;
  color: #168467;
  font-weight: 900;
}

.employee-empty p{
  margin: 0;
  font-size: 13px;
}

.employee-month-chart{
  height: 240px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 9px;
  padding: 20px 18px 16px;
}

.employee-month-column{
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 30px minmax(60px, 1fr) auto auto;
  justify-items: center;
  gap: 5px;
}

.employee-month-value{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-month-bar{
  width: min(26px, 70%);
  height: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 8px 8px 3px 3px;
  background: #f0f1f7;
}

.employee-month-bar i{
  width: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(180deg, #8d82eb, #5e51cf);
}

.employee-month-column strong{
  font-size: 11px;
}

.employee-month-column small{
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.employee-orders-head{
  align-items: center;
}

.employee-search{
  width: min(390px, 40vw);
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--employee-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(35, 42, 62, 0.04);
  color: var(--employee-muted);
}

.employee-search input{
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--employee-ink);
  font-size: 13px;
}

.employee-order-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.employee-filter-chips{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 5px;
  scrollbar-width: thin;
}

.employee-filter-chips button{
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--employee-line);
  border-radius: 999px;
  background: #fff;
  color: var(--employee-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.employee-filter-chips button:hover,
.employee-filter-chips button.is-active{
  border-color: #c9c3f3;
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
}

.employee-filter-chips b{
  margin-left: 3px;
  font-size: 10px;
}

.employee-order-sort{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.employee-order-sort > span{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--employee-accent-soft);
  color: var(--employee-accent-dark);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.employee-order-sort > span button{
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
}

.employee-order-sort label{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--employee-muted);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.employee-order-sort .select{
  min-height: 36px;
  border-color: var(--employee-line);
  background-color: #fff;
  font-size: 11px;
}

.employee-order-result{
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 10px;
  color: var(--employee-muted);
  font-size: 11px;
}

.employee-order-result strong{
  color: var(--employee-ink);
  font-size: 16px;
}

.employee-order-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.employee-order-card{
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--employee-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(35, 43, 65, 0.045);
}

.employee-order-card.is-overdue{
  border-color: #e9c5c5;
  box-shadow: inset 3px 0 #c95858, 0 9px 28px rgba(35, 43, 65, 0.045);
}

.employee-order-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.employee-order-card-head > button{
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 0;
  background: transparent;
  color: var(--employee-ink);
  cursor: pointer;
  text-align: left;
}

.employee-order-card-head > button > span{
  color: var(--employee-accent-dark);
  font-size: 10px;
  font-weight: 850;
}

.employee-order-card-head > button > strong{
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-order-card-head > button > small{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-status-select{
  max-width: 150px;
  min-height: 34px;
  padding: 6px 26px 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  outline: 0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.employee-order-task{
  width: 100%;
  min-height: 54px;
  display: -webkit-box;
  margin: 15px 0 13px;
  padding: 12px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f8fb;
  color: #465168;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.employee-order-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #eceff4;
  border-radius: 11px;
}

.employee-order-facts > span{
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-right: 1px solid #eceff4;
}

.employee-order-facts > span:last-child{
  border-right: 0;
}

.employee-order-facts small,
.employee-order-facts em{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-order-facts strong{
  max-width: 100%;
  overflow: hidden;
  color: var(--employee-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-order-card-foot{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}

.employee-order-card-foot > span{
  min-width: 0;
  overflow: hidden;
  color: var(--employee-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-order-card-foot .button{
  flex: 0 0 auto;
  min-height: 34px;
  background: var(--employee-accent);
}

.employee-mobile-nav{
  display: none;
}

body[data-crm-role="employee"] #orderDialog.dialog{
  width: min(760px, calc(100vw - 28px));
  max-width: min(760px, calc(100vw - 28px));
  border: 1px solid var(--employee-line);
  border-radius: 18px;
  background: #fff;
  color: var(--employee-ink);
}

body[data-crm-role="employee"] #orderDialog::backdrop,
.employees-dialog::backdrop{
  background: rgba(27, 32, 48, 0.5);
  backdrop-filter: blur(3px);
}

.employee-order-editor-head,
.employees-manager-head{
  align-items: flex-start;
  padding: 19px 21px;
}

.employee-order-editor-head > div,
.employees-manager-head > div{
  min-width: 0;
}

.employee-order-editor-head > div > span,
.employee-order-editor-head p,
.employees-manager-head p{
  color: var(--employee-muted, var(--muted));
  font-size: 11px;
}

.employee-order-editor-head > div > span{
  color: var(--employee-accent-dark);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.employee-order-editor-head h2,
.employees-manager-head h2{
  margin-top: 5px;
}

.employee-order-editor-head p,
.employees-manager-head p{
  margin: 5px 0 0;
  line-height: 1.45;
}

body[data-crm-role="employee"] .employee-order-editor-body{
  max-height: calc(100dvh - 180px);
  padding: 20px;
}

.employee-editor-money{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--employee-line);
  border-radius: 13px;
  background: #f8f9fc;
}

.employee-editor-money > div{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-right: 1px solid var(--employee-line);
}

.employee-editor-money > div:last-child{ border-right: 0; }
.employee-editor-money span{ color: var(--employee-muted); font-size: 10px; font-weight: 750; }
.employee-editor-money strong{ overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.employee-editor-money .is-amber{ color: #a66c12; }
.employee-editor-money .is-green{ color: #168467; }

.employee-editor-fields{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-crm-role="employee"] .employee-editor-fields :is(.input, .select){
  border-color: var(--employee-line);
  background-color: #fff;
}

.employee-editor-context{
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 13px;
  background: #f7f8fb;
}

.employee-editor-context > div > span,
.employee-editor-context dt{
  color: var(--employee-muted);
  font-size: 10px;
  font-weight: 750;
}

.employee-editor-context p{
  margin: 6px 0 0;
  color: #414c63;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.employee-editor-context dl{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.employee-editor-context dl > div{
  min-width: 0;
}

.employee-editor-context dd{
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-crm-role="employee"] .employee-order-editor-foot .button.primary{
  background: var(--employee-accent);
}

/* Управление сотрудниками для владельцев */
.employees-dialog.dialog{
  width: min(900px, calc(100vw - 28px));
  max-width: min(900px, calc(100vw - 28px));
  border-radius: 18px;
}

.employees-manager-head .employee-eyebrow{
  margin-bottom: 4px;
}

.employees-manager-body,
.employees-editor-body{
  max-height: min(650px, calc(100dvh - 185px));
  padding: 18px 20px;
}

.employees-summary{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.employees-summary > div{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  border-right: 1px solid var(--line);
}

.employees-summary > div:last-child{ border-right: 0; }
.employees-summary span{ color: var(--muted); font-size: 10px; font-weight: 750; }
.employees-summary strong{ font-size: 21px; }

.employees-list{
  display: grid;
  gap: 8px;
}

.employees-list-row{
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(130px, 1fr) auto 100px auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.employees-list-row.is-inactive{
  background: var(--surface-2);
  opacity: 0.78;
}

.employees-avatar{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--violet-soft);
  color: var(--violet);
  font-weight: 900;
}

.employees-person{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.employees-person strong,
.employees-person small{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employees-person strong{ font-size: 13px; }
.employees-person small{ color: var(--muted); font-size: 10px; }

.employees-access{
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.employees-access.is-active{
  background: var(--green-soft);
  color: var(--green);
}

.employees-orders-count{
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.employees-orders-count strong{ font-size: 14px; }
.employees-orders-count span{ color: var(--muted); font-size: 9px; }
.employees-orders-count small{ grid-column: 1 / -1; color: var(--muted); font-size: 9px; }

.employees-empty{
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 52px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  text-align: center;
}

.employees-empty span{ font-weight: 850; }
.employees-empty p{ max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.employees-editor-body .field-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employees-editor-body .field:last-child{
  grid-column: 1 / -1;
}

.employees-security-note,
.employees-access-toggle{
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}

.employees-security-note strong,
.employees-access-toggle strong{
  font-size: 12px;
}

.employees-security-note p{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.employees-access-toggle{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.employees-access-toggle input{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--green);
}

.employees-access-toggle span{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.employees-access-toggle small{
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1080px){
  .employee-header{
    grid-template-columns: minmax(190px, 1fr) auto minmax(170px, 1fr);
    gap: 14px;
    padding-inline: 20px;
  }

  .employee-main{ padding-inline: 20px; }
  .employee-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-order-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-order-facts > span:nth-child(2){ border-right: 0; }
  .employee-order-facts > span:nth-child(-n + 2){ border-bottom: 1px solid #eceff4; }
}

@media (max-width: 820px){
  .employee-header{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .employee-header .employee-nav{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: center;
  }

  .employee-page-head,
.employee-order-toolbar{
    align-items: stretch;
    flex-direction: column;
  }

  .employee-period-controls{ justify-items: stretch; }
  .employee-segmented{ overflow-x: auto; }
  .employee-segmented button{ flex: 1 0 auto; }
  .employee-custom-range{ justify-content: flex-end; }
  .employee-dashboard-grid,
.employee-order-grid{ grid-template-columns: minmax(0, 1fr); }
  .employee-search{ width: 100%; }
  .employee-order-sort{ justify-content: space-between; }

  .employees-list-row{
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .employees-access{ grid-column: 2; justify-self: start; }
  .employees-orders-count{ grid-column: 3; grid-row: 1 / span 2; }
  .employees-list-row > .button{ grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 600px){
  body[data-crm-role="employee"]{ padding-bottom: 70px; }

  .employee-header{
    position: static;
    min-height: 64px;
    padding: 10px 14px;
  }

  .employee-brand-mark{ width: 38px; height: 38px; border-radius: 11px; }
  .employee-brand small,
.employee-user > span{ display: none; }
  .employee-user .button{ min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .employee-header .employee-nav{ display: none; }

  .employee-main{
    padding: 22px 12px 30px;
  }

  .employee-page-head{ gap: 17px; margin-bottom: 18px; }
  .employee-page-head h1{ font-size: 27px; }
  .employee-page-head p{ font-size: 12px; }
  .employee-segmented{ width: calc(100vw - 24px); }
  .employee-custom-range{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-custom-range label{ min-width: 0; }
  .employee-custom-range .input{ width: 100%; min-width: 0; }

  .employee-kpi-grid{ gap: 8px; }
  .employee-kpi{ min-height: 112px; padding: 14px; border-radius: 14px; }
  .employee-kpi > strong{ font-size: 21px; }
  .employee-kpi > span{ font-size: 10px; }
  .employee-kpi > small{ font-size: 9px; }

  .employee-dashboard-grid{ gap: 12px; }
  .employee-panel{ min-height: 0; border-radius: 15px; }
  .employee-panel-head{ min-height: 68px; padding: 13px 14px; }
  .employee-status-list{ padding-inline: 14px; }
  .employee-status-list > button{ grid-template-columns: minmax(84px, auto) minmax(35px, 1fr) 22px; gap: 7px; }
  .employee-status-list > button > small{ display: none; }
  .employee-deadline-row,
.employee-recent-row{ width: calc(100% - 28px); margin-inline: 14px; }
  .employee-month-chart{ padding-inline: 10px; gap: 5px; }
  .employee-month-value{ display: none; }
  .employee-month-column{ grid-template-rows: minmax(70px, 1fr) auto auto; }

  .employee-orders-head{ align-items: stretch; }
  .employee-order-toolbar{ gap: 7px; }
  .employee-filter-chips{ width: calc(100vw - 24px); }
  .employee-order-sort{ align-items: stretch; flex-direction: column; }
  .employee-order-sort label{ justify-content: space-between; }
  .employee-order-sort .select{ flex: 1; }
  .employee-order-card{ padding: 14px; border-radius: 14px; }
  .employee-status-select{ max-width: 132px; }
  .employee-order-card-head > button > strong{ font-size: 15px; }
  .employee-order-card-foot{ align-items: stretch; flex-direction: column; }
  .employee-order-card-foot .button{ width: 100%; }

  .employee-mobile-nav{
    position: fixed;
    z-index: 50;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(220, 224, 234, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 45px rgba(28, 35, 55, 0.2);
    backdrop-filter: blur(16px);
  }

  .employee-mobile-nav button{
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 11px;
    background: transparent;
    color: var(--employee-muted);
    font-size: 11px;
    font-weight: 800;
  }

  .employee-mobile-nav button.is-active{
    background: var(--employee-accent-soft);
    color: var(--employee-accent-dark);
  }

  body[data-crm-role="employee"] #orderDialog.dialog,
.employees-dialog.dialog{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px;
    border-radius: 14px;
  }

  .employee-order-editor-head,
.employees-manager-head{ padding: 14px; }
  body[data-crm-role="employee"] .employee-order-editor-body,
.employees-manager-body,
.employees-editor-body{ max-height: calc(100dvh - 158px); padding: 14px; }
  .employee-editor-money{ grid-template-columns: minmax(0, 1fr); }
  .employee-editor-money > div{ border-right: 0; border-bottom: 1px solid var(--employee-line); }
  .employee-editor-money > div:last-child{ border-bottom: 0; }
  .employee-editor-fields,
.employee-editor-context dl,
.employees-editor-body .field-grid{ grid-template-columns: minmax(0, 1fr); }
  .employees-editor-body .field:last-child{ grid-column: 1; }

  .employees-summary{ grid-template-columns: minmax(0, 1fr); }
  .employees-summary > div{ border-right: 0; border-bottom: 1px solid var(--line); }
  .employees-summary > div:last-child{ border-bottom: 0; }
  .employees-list-row{ grid-template-columns: 38px minmax(0, 1fr); gap: 9px; }
  .employees-avatar{ width: 36px; height: 36px; }
  .employees-access{ grid-column: 2; }
  .employees-orders-count{ grid-column: 1 / -1; grid-row: auto; }
  .employees-manager-foot{ flex-wrap: wrap; }
  .employees-manager-foot .button{ flex: 1 1 130px; }
}

@media (max-width: 390px){
  .employee-main{ padding-inline: 10px; }
  .employee-segmented,
.employee-filter-chips{ width: calc(100vw - 20px); }
  .employee-kpi{ min-height: 104px; padding: 12px; }
  .employee-kpi > strong{ font-size: 19px; }
  .employee-order-card-head{ align-items: stretch; flex-direction: column; }
  .employee-status-select{ width: 100%; max-width: none; }
  .employee-order-facts{ grid-template-columns: minmax(0, 1fr); }
  .employee-order-facts > span{ border-right: 0; border-bottom: 1px solid #eceff4; }
  .employee-order-facts > span:last-child{ border-bottom: 0; }
  .employee-deadline-row{ grid-template-columns: 38px minmax(0, 1fr); }
  .employee-deadline-date{ grid-column: 2; align-items: flex-start; text-align: left; }
  .employee-recent-row{ grid-template-columns: minmax(0, 1fr); }
  .employee-recent-row > span:last-child{ align-items: flex-start; }
}

/* Вкладка владельцев: прозрачная экономика команды */
.team-page{
  --team-ink: #182039;
  --team-muted: #72798d;
  --team-line: #e4e7ef;
  --team-bg: #f5f6f9;
  --team-violet: #7457d6;
  --team-violet-dark: #5940b3;
  --team-violet-soft: #f0ecff;
  --team-green: #17866c;
  --team-green-soft: #e9f7f2;
  --team-red: #bf4e5f;
  --team-red-soft: #fff0f2;
  --team-amber: #a66b13;
  --team-amber-soft: #fff6df;
  max-width: 1540px;
  min-width: 0;
  margin: 0 auto;
  color: var(--team-ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.team-page-head{
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 15px;
}

.team-page-title{
  min-width: 0;
}

.team-eyebrow,
.team-section-head > div > span,
.team-panel-head > div > span{
  color: var(--team-violet);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.team-page-title h1{
  margin: 5px 0 3px;
  color: var(--team-ink);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.team-page-title p{
  max-width: 760px;
  margin: 0;
  color: var(--team-muted);
  font-size: 12px;
  line-height: 1.5;
}

.team-page-actions{
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.team-page .button.primary{
  border-color: var(--team-violet);
  background: var(--team-violet);
}

.team-page .button.primary:hover{
  border-color: var(--team-violet-dark);
  background: var(--team-violet-dark);
}

.team-controls{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid var(--team-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(28, 34, 55, 0.04);
}

.team-period-tabs{
  min-width: 0;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--team-bg);
}

.team-period-tabs button{
  min-height: 32px;
  padding: 6px 13px;
  border-radius: 8px;
  color: var(--team-muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.team-period-tabs button:hover{
  color: var(--team-ink);
}

.team-period-tabs button.is-active{
  background: #fff;
  color: var(--team-violet-dark);
  box-shadow: 0 2px 9px rgba(48, 39, 92, 0.09);
}

.team-custom-range{
  display: flex;
  gap: 8px;
}

.team-custom-range label{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--team-muted);
  font-size: 9px;
  font-weight: 800;
}

.team-custom-range .input{
  width: 138px;
  min-height: 34px;
  color: var(--team-ink);
  background: #fff;
}

.team-summary-grid{
  min-width: 0;
  display: grid;
  grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 11px;
}

.team-summary-card{
  min-width: 0;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--team-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(31, 36, 58, 0.035);
}

.team-summary-card > span,
.team-profile-kpi > span{
  color: var(--team-muted);
  font-size: 10px;
  font-weight: 800;
}

.team-summary-card > strong{
  overflow: hidden;
  color: var(--team-ink);
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-summary-card > small,
.team-profile-kpi > small{
  min-height: 26px;
  color: var(--team-muted);
  font-size: 9px;
  line-height: 1.4;
}

.team-summary-card.is-primary{
  border-color: #d9d0fb;
  background: linear-gradient(145deg, #f7f4ff, #eee8ff);
}

.team-summary-card.is-primary > strong{ color: var(--team-violet-dark); }
.team-summary-card.is-positive > strong{ color: var(--team-green); }
.team-summary-card.is-danger > strong{ color: var(--team-red); }

.team-sync-alert{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  padding: 11px 14px;
  border: 1px solid #f0d7a1;
  border-radius: 13px;
  background: var(--team-amber-soft);
}

.team-sync-alert.is-clear{
  border-color: #cde8df;
  background: var(--team-green-soft);
}

.team-sync-icon{
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(166, 107, 19, 0.12);
  color: var(--team-amber);
  font-weight: 900;
}

.team-sync-alert.is-clear .team-sync-icon{
  background: rgba(23, 134, 108, 0.12);
  color: var(--team-green);
}

.team-sync-alert > div{ min-width: 0; }
.team-sync-alert strong{ font-size: 11px; }
.team-sync-alert p{ margin: 2px 0 0; color: var(--team-muted); font-size: 10px; line-height: 1.45; }

.team-roster-shell,
.team-profile-panel,
.team-profile-hero,
.team-formula-note{
  min-width: 0;
  border: 1px solid var(--team-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(31, 36, 58, 0.04);
}

.team-roster-shell{
  padding: 15px;
}

.team-section-head,
.team-panel-head{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.team-section-head{
  margin-bottom: 13px;
}

.team-section-head h2,
.team-panel-head h3{
  margin: 3px 0 0;
  color: var(--team-ink);
  letter-spacing: -0.02em;
}

.team-section-head h2{ font-size: 20px; }
.team-panel-head h3{ font-size: 15px; }
.team-section-head p{ margin: 3px 0 0; color: var(--team-muted); font-size: 10px; }

.team-sort-field{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--team-muted);
  font-size: 9px;
  font-weight: 800;
}

.team-sort-field .select{
  min-width: 210px;
  min-height: 36px;
  color: var(--team-ink);
  background-color: #fff;
}

.team-roster-grid{
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: 10px;
}

.team-person-card{
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--team-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.team-person-card:hover{
  border-color: #cbc1f3;
  box-shadow: 0 13px 30px rgba(61, 48, 113, 0.08);
  transform: translateY(-1px);
}

.team-person-card.is-inactive{ background: #fafafd; }
.team-person-card.is-inactive .team-person-avatar{ filter: grayscale(1); opacity: 0.75; }

.team-person-main{
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 45px minmax(100px, 1fr) minmax(128px, auto) 20px;
  align-items: center;
  gap: 11px;
  padding: 14px;
  color: var(--team-ink);
  text-align: left;
}

.team-person-avatar,
.team-profile-avatar{
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--team-violet-soft);
  color: var(--team-violet-dark);
  font-weight: 900;
}

.team-person-avatar{ width: 45px; height: 45px; font-size: 16px; }
.team-person-identity{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-person-identity strong,
.team-person-identity small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-person-identity strong{ font-size: 13px; }
.team-person-identity small{ color: var(--team-muted); font-size: 9px; }

.team-person-contribution{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.team-person-contribution small{ color: var(--team-muted); font-size: 8px; font-weight: 800; }
.team-person-contribution strong{ max-width: 100%; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.team-person-contribution.is-positive strong{ color: var(--team-green); }
.team-person-contribution.is-negative strong{ color: var(--team-red); }
.team-person-arrow,
.team-row-arrow{ color: #a0a5b4; font-size: 17px; }

.team-person-metrics{
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #eceef3;
  border-radius: 11px;
  background: var(--team-bg);
}

.team-person-metrics > span{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-right: 1px solid #e6e8ef;
}

.team-person-metrics > span:last-child{ border-right: 0; }
.team-person-metrics small{ color: var(--team-muted); font-size: 8px; font-weight: 800; }
.team-person-metrics strong{ overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.team-person-metrics em{ overflow: hidden; color: var(--team-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.team-person-actions{
  min-width: 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--team-line);
}

.team-person-actions button{
  flex: 1 1 50%;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--team-muted);
  font-size: 9px;
  font-weight: 800;
}

.team-person-actions button + button{ border-left: 1px solid var(--team-line); }
.team-person-actions button:hover{ background: var(--team-violet-soft); color: var(--team-violet-dark); }

.team-empty{
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 60px 20px;
  border: 1px dashed #d7d9e3;
  border-radius: 13px;
  text-align: center;
}

.team-empty > span{ font-size: 14px; font-weight: 850; }
.team-empty p{ margin: 0 0 5px; color: var(--team-muted); font-size: 11px; }

.team-profile-back{
  margin: 0 0 9px;
}

.team-profile-back button,
.team-panel-head button{
  color: var(--team-violet-dark);
  font-size: 10px;
  font-weight: 800;
}

.team-profile-hero{
  display: grid;
  grid-template-columns: 62px minmax(170px, 1fr) minmax(220px, auto) auto;
  align-items: center;
  gap: 17px;
  margin-bottom: 10px;
  padding: 18px;
  background: linear-gradient(145deg, #fff, #f8f6ff);
}

.team-profile-avatar{ width: 62px; height: 62px; font-size: 23px; }
.team-profile-person{ min-width: 0; }
.team-profile-person h2{ margin: 6px 0 2px; font-size: 22px; letter-spacing: -0.03em; }
.team-profile-person p{ margin: 0; color: var(--team-muted); font-size: 10px; }

.team-access-badge{
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--team-red-soft);
  color: var(--team-red);
  font-size: 8px;
  font-weight: 850;
}

.team-access-badge.is-active{ background: var(--team-green-soft); color: var(--team-green); }

.team-profile-result{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-right: 17px;
  border-right: 1px solid var(--team-line);
}

.team-profile-result > span{ color: var(--team-muted); font-size: 9px; font-weight: 800; }
.team-profile-result > strong{ max-width: 100%; overflow: hidden; font-size: clamp(22px, 2.3vw, 31px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.team-profile-result > small{ color: var(--team-muted); font-size: 8px; }
.team-profile-result.is-positive > strong{ color: var(--team-green); }
.team-profile-result.is-negative > strong{ color: var(--team-red); }

.team-profile-actions{ display: flex; flex-direction: column; gap: 7px; }
.team-profile-actions .button{ min-width: 140px; }

.team-profile-kpis{
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.team-profile-kpi{
  min-width: 0;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--team-line);
  border-top: 3px solid #b5bac8;
  border-radius: 13px;
  background: #fff;
}

.team-profile-kpi > strong{ overflow: hidden; color: var(--team-ink); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.team-profile-kpi.is-violet{ border-top-color: var(--team-violet); }
.team-profile-kpi.is-green{ border-top-color: var(--team-green); }
.team-profile-kpi.is-green > strong{ color: var(--team-green); }
.team-profile-kpi.is-red{ border-top-color: var(--team-red); }
.team-profile-kpi.is-red > strong{ color: var(--team-red); }
.team-profile-kpi.is-blue{ border-top-color: #4e7bc7; }
.team-profile-kpi.is-amber{ border-top-color: var(--team-amber); }
.team-profile-kpi.is-amber > strong{ color: var(--team-amber); }

.team-profile-grid{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.team-profile-panel{
  min-width: 0;
  overflow: hidden;
}

.team-panel-head{
  min-height: 66px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--team-line);
}

.team-panel-head > small,
.team-panel-head > strong{ color: var(--team-muted); font-size: 9px; }
.team-panel-head > strong{ color: var(--team-ink); font-size: 14px; }

.team-status-list{
  display: grid;
  padding: 4px 15px 13px;
}

.team-status-list > div{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(30px, 1fr) 24px minmax(75px, auto);
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-bottom: 1px solid #eff0f4;
}

.team-status-list > div:last-child{ border-bottom: 0; }
.team-status-track{ height: 5px; overflow: hidden; border-radius: 999px; background: #eceef3; }
.team-status-track i{ height: 100%; display: block; border-radius: inherit; background: var(--team-violet); }
.team-status-list > div > strong{ text-align: right; font-size: 11px; }
.team-status-list > div > small{ color: var(--team-muted); font-size: 9px; text-align: right; white-space: nowrap; }

.team-chart-legend{ display: flex; gap: 9px; color: var(--team-muted); font-size: 8px; font-weight: 750; }
.team-chart-legend span::before{ width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 2px; content: ""; }
.team-chart-legend .is-paid::before{ background: var(--team-green); }
.team-chart-legend .is-cost::before{ background: var(--team-red); }

.team-month-chart{
  height: 218px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 16px 15px 13px;
}

.team-month-column{
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(105px, 1fr) auto auto;
  justify-items: center;
  gap: 5px;
}

.team-month-bars{
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  border-bottom: 1px solid #e7e9ef;
}

.team-month-bars i{ width: min(17px, 33%); min-height: 2px; border-radius: 5px 5px 1px 1px; }
.team-month-bars i.is-paid{ background: var(--team-green); }
.team-month-bars i.is-cost{ background: var(--team-red); }
.team-month-column > strong{ font-size: 9px; }
.team-month-column > small{ max-width: 100%; overflow: hidden; color: var(--team-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.team-profile-orders,
.team-profile-expenses{ grid-column: 1 / -1; }

.team-order-list,
.team-expense-list{ display: grid; }

.team-order-row{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(92px, auto) 105px 145px 16px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 9px 15px;
  border-bottom: 1px solid #eceef3;
  color: var(--team-ink);
  text-align: left;
}

.team-order-row:last-child{ border-bottom: 0; }
.team-order-row:hover,
.team-expense-row:hover{ background: #faf9ff; }
.team-order-row.is-overdue{ box-shadow: inset 3px 0 0 var(--team-red); }
.team-order-copy{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team-order-copy strong,
.team-order-copy small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-order-copy strong{ font-size: 11px; }
.team-order-copy small{ color: var(--team-muted); font-size: 9px; }
.team-order-date,
.team-order-money{ min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: right; }
.team-order-date strong,
.team-order-money strong{ overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.team-order-date small,
.team-order-money small{ overflow: hidden; color: var(--team-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.team-order-date.is-red strong{ color: var(--team-red); }
.team-order-date.is-amber strong{ color: var(--team-amber); }

.team-expense-breakdown{
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--team-line);
}

.team-expense-breakdown > div{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(105px, 0.45fr) minmax(30px, 1fr) minmax(75px, auto);
  align-items: center;
  gap: 10px;
}

.team-expense-breakdown span{ overflow: hidden; color: var(--team-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.team-expense-breakdown i{ height: 5px; border-radius: 999px; background: var(--team-red); opacity: 0.7; }
.team-expense-breakdown strong{ font-size: 10px; text-align: right; white-space: nowrap; }

.team-expense-row{
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(125px, auto) 16px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 15px;
  border-bottom: 1px solid #eceef3;
  color: var(--team-ink);
  text-align: left;
}

.team-expense-row:last-child{ border-bottom: 0; }
.team-expense-row > span{ min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team-expense-row > span:nth-child(2){ align-items: flex-end; text-align: right; }
.team-expense-row strong,
.team-expense-row small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-expense-row strong{ font-size: 10px; }
.team-expense-row small{ color: var(--team-muted); font-size: 8px; }

.team-panel-empty{
  display: grid;
  min-height: 130px;
  place-items: center;
  padding: 20px;
  color: var(--team-muted);
  font-size: 10px;
  text-align: center;
}

.team-formula-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: #f9f8fd;
}

.team-formula-note strong{ flex: 0 0 auto; color: var(--team-violet-dark); font-size: 10px; }
.team-formula-note span{ color: var(--team-muted); font-size: 9px; line-height: 1.5; }

@media (max-width: 1260px){
  .team-summary-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-summary-card.is-primary{ grid-column: span 1; }
  .team-profile-kpis{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-profile-hero{ grid-template-columns: 62px minmax(150px, 1fr) minmax(190px, auto); }
  .team-profile-actions{ grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}

@media (max-width: 980px){
  .team-roster-grid{ grid-template-columns: minmax(0, 1fr); }
  .team-profile-grid{ grid-template-columns: minmax(0, 1fr); }
  .team-profile-orders,
.team-profile-expenses{ grid-column: 1; }
  .team-order-row{ grid-template-columns: minmax(160px, 1fr) minmax(88px, auto) 95px 125px 14px; gap: 8px; }
}

@media (max-width: 760px){
  .team-page-head{ align-items: stretch; flex-direction: column; gap: 14px; }
  .team-page-actions{ width: 100%; }
  .team-page-actions .button{ flex: 1 1 50%; }
  .team-controls{ align-items: stretch; flex-direction: column; }
  .team-period-tabs{ overflow-x: auto; }
  .team-period-tabs button{ flex: 1 0 auto; }
  .team-custom-range{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-custom-range label{ min-width: 0; }
  .team-custom-range .input{ width: 100%; min-width: 0; }
  .team-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-section-head{ align-items: stretch; flex-direction: column; }
  .team-sort-field{ justify-content: space-between; }
  .team-sort-field .select{ min-width: 0; flex: 1; }
  .team-person-main{ grid-template-columns: 43px minmax(0, 1fr) minmax(112px, auto) 16px; }
  .team-person-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-person-metrics > span:nth-child(2){ border-right: 0; }
  .team-person-metrics > span:nth-child(-n + 2){ border-bottom: 1px solid #e6e8ef; }
  .team-profile-hero{ grid-template-columns: 55px minmax(0, 1fr); }
  .team-profile-avatar{ width: 55px; height: 55px; }
  .team-profile-result{ grid-column: 1 / -1; align-items: flex-start; padding: 12px 0 0; border-top: 1px solid var(--team-line); border-right: 0; }
  .team-profile-actions{ justify-content: stretch; }
  .team-profile-actions .button{ flex: 1 1 50%; min-width: 0; }
  .team-profile-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-order-row{ grid-template-columns: minmax(0, 1fr) auto 14px; gap: 9px; padding: 11px 13px; }
  .team-order-row > .status-pill{ grid-column: 1; justify-self: start; }
  .team-order-date{ grid-column: 2; grid-row: 1; }
  .team-order-money{ grid-column: 2; grid-row: 2; }
  .team-order-row > .team-row-arrow{ grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 520px){
  .team-page{ width: 100%; }
  .team-page-title h1{ font-size: 29px; }
  .team-page-actions{ display: grid; grid-template-columns: minmax(0, 1fr); }
  .team-summary-grid{ gap: 7px; }
  .team-summary-card{ min-height: 105px; padding: 12px; border-radius: 13px; }
  .team-summary-card > strong{ font-size: 18px; }
  .team-sync-alert{ align-items: flex-start; padding: 10px; }
  .team-roster-shell{ padding: 10px; }
  .team-person-main{ grid-template-columns: 41px minmax(0, 1fr) 15px; padding: 11px; }
  .team-person-avatar{ width: 41px; height: 41px; }
  .team-person-contribution{ grid-column: 1 / -1; align-items: flex-start; padding-top: 8px; border-top: 1px solid #eceef3; }
  .team-person-arrow{ grid-column: 3; grid-row: 1; }
  .team-person-metrics > span{ padding: 9px; }
  .team-person-actions{ flex-direction: column; }
  .team-person-actions button + button{ border-top: 1px solid var(--team-line); border-left: 0; }
  .team-profile-kpi{ min-height: 88px; padding: 11px; }
  .team-profile-kpi > strong{ font-size: 15px; }
  .team-panel-head{ min-height: 61px; padding: 11px 12px; }
  .team-status-list{ padding-inline: 12px; }
  .team-status-list > div{ grid-template-columns: minmax(82px, auto) minmax(25px, 1fr) 22px; gap: 6px; }
  .team-status-list > div > small{ display: none; }
  .team-month-chart{ height: 190px; gap: 4px; padding-inline: 8px; }
  .team-month-column > small{ display: none; }
  .team-month-column{ grid-template-rows: minmax(95px, 1fr) auto; }
  .team-expense-breakdown > div{ grid-template-columns: minmax(90px, 0.65fr) minmax(20px, 1fr) minmax(67px, auto); gap: 6px; }
  .team-expense-row{ grid-template-columns: minmax(0, 1fr) auto 12px; padding-inline: 12px; }
  .team-formula-note{ flex-direction: column; }
}

@media (max-width: 390px){
  .team-summary-grid{ grid-template-columns: minmax(0, 1fr); }
  .team-summary-card{ min-height: 91px; }
  .team-profile-kpis{ gap: 6px; }
  .team-profile-kpi{ min-height: 82px; padding: 9px; }
  .team-profile-actions{ flex-direction: column; }
  .team-profile-result > small{ white-space: normal; }
  .team-order-date small,
.team-order-money small{ display: none; }
}


/* V1 — мягкий карточный CRM: мята, тёплые акценты и воздушные поверхности. */
.team-page{
  --team-ink: #172621;
  --team-muted: #6c7772;
  --team-line: #d9e3df;
  --team-bg: #f1f6f4;
  --team-violet: #2f7c68;
  --team-violet-dark: #236552;
  --team-violet-soft: #e8f4ef;
  --team-green: #23745e;
  --team-green-soft: #e8f5ef;
  --team-red: #a95157;
  --team-red-soft: #fff0ef;
  --team-amber: #8c671b;
  --team-amber-soft: #fff7df;
}

.team-page-head{
  margin-bottom: 20px;
}

.team-eyebrow,
.team-section-head > div > span,
.team-panel-head > div > span{
  color: #2f7c68;
  letter-spacing: 0.08em;
}

.team-page-title h1{
  color: #101c18;
  font-size: clamp(34px, 3.4vw, 46px);
}

.team-page-title p{
  font-size: 13px;
}

.team-page .button.primary{
  border-color: #2f7c68;
  background: #2f7c68;
  box-shadow: 0 9px 18px rgba(47, 124, 104, 0.16);
}

.team-page .button.primary:hover{
  border-color: #236552;
  background: #236552;
}

.team-controls{
  padding: 9px;
  border-color: #d5e2dd;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(35, 67, 57, 0.055);
}

.team-period-tabs{
  background: #edf4f1;
}

.team-period-tabs button,
.team-person-main{
  background: transparent;
}

.team-period-tabs button.is-active{
  color: #236552;
  box-shadow: 0 3px 10px rgba(35, 101, 82, 0.11);
}

.team-summary-grid{
  gap: 12px;
}

.team-summary-card{
  min-height: 126px;
  padding: 17px;
  border-color: #d8e3df;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(33, 61, 52, 0.045);
}

.team-summary-card.is-primary{
  border-color: #bad7cd;
  background: linear-gradient(145deg, #f7fcfa 0%, #e4f3ed 100%);
}

.team-summary-card.is-primary > strong{
  color: #236552;
}

.team-summary-card:nth-child(2){
  border-color: #d7e2eb;
  background: #f7fbfe;
}

.team-summary-card:nth-child(3){
  border-color: #cae2d8;
  background: #f3faf7;
}

.team-summary-card:nth-child(4){
  border-color: #ead3d2;
  background: #fff7f6;
}

.team-summary-card:nth-child(5){
  border-color: #eadfbd;
  background: #fffbef;
}

.team-sync-alert{
  border-radius: 15px;
}

:is(
  .team-roster-shell,
  .team-profile-panel,
  .team-profile-hero,
  .team-formula-note
){
  border-color: #d8e3df;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(33, 61, 52, 0.05);
}

.team-roster-shell{
  padding: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.team-person-card{
  border-color: #d8e3df;
  border-radius: 16px;
  background: #fbfefd;
}

.team-person-card:nth-child(3n + 2){
  border-color: #dddcef;
  background: #fcfbff;
}

.team-person-card:nth-child(3n){
  border-color: #e7dfc7;
  background: #fffdf7;
}

.team-person-card:hover{
  border-color: #9fcbbb;
  box-shadow: 0 15px 34px rgba(38, 91, 73, 0.1);
}

:is(.team-person-avatar, .team-profile-avatar){
  border-radius: 15px;
  background: #e3f2ec;
  color: #236552;
}

.team-person-metrics{
  border-color: #dfe8e4;
  background: rgba(255, 255, 255, 0.75);
}

.team-person-actions button:hover{
  background: #e8f4ef;
  color: #236552;
}

.team-profile-hero{
  border-color: #bfd9d0;
  background: linear-gradient(135deg, #ffffff 0%, #e9f5f0 100%);
}

.team-profile-kpi{
  border-top-width: 1px;
  border-radius: 15px;
  box-shadow: 0 9px 22px rgba(33, 61, 52, 0.035);
}

.team-profile-kpi.is-violet{ border-color: #c9ddd5; background: #f0f8f5; }
.team-profile-kpi.is-green{ border-color: #c9e2d8; background: #f3faf7; }
.team-profile-kpi.is-red{ border-color: #ead3d2; background: #fff7f6; }
.team-profile-kpi.is-blue{ border-color: #d7e2eb; background: #f7fbfe; }
.team-profile-kpi.is-amber{ border-color: #eadfbd; background: #fffbef; }

.team-status-track i{
  background: #2f7c68;
}

.team-formula-note{
  background: #f1f7f4;
}

.team-formula-note strong{
  color: #236552;
}

@media (max-width: 1260px){
  .team-summary-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-profile-kpis{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .team-roster-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px){
  .team-summary-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px){
  .team-summary-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Сотрудники 2.0: читаемая типографика и цельные фирменные системы. */

.team-page button,
.employees-dialog button,
body[data-crm-role="employee"] button{
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}

.team-eyebrow,
.team-section-head > div > span,
.team-panel-head > div > span{
  font-size: 12px;
}

.team-page-title p{
  font-size: 15px;
  line-height: 1.55;
}

.team-page-actions .button{
  min-height: 44px;
  padding-inline: 17px;
  font-size: 14px;
}

.team-controls{
  min-height: 58px;
  padding: 9px;
}

.team-period-tabs button{
  min-height: 40px;
  padding: 8px 15px;
  font-size: 13px;
}

.team-custom-range label,
.team-sort-field{
  font-size: 12px;
}

.team-custom-range .input,
.team-sort-field .select{
  min-height: 42px;
  font-size: 13px;
}

.team-summary-card{
  min-height: 140px;
  padding: 20px;
}

.team-summary-card > span,
.team-profile-kpi > span{
  font-size: 12px;
}

.team-summary-card > strong{
  font-size: clamp(25px, 2.2vw, 34px);
}

.team-summary-card > small,
.team-profile-kpi > small{
  min-height: 34px;
  font-size: 12px;
  line-height: 1.45;
}

.team-sync-alert{
  min-height: 62px;
  padding: 13px 16px;
}

.team-sync-icon{
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.team-sync-alert strong{
  font-size: 14px;
}

.team-sync-alert p{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

.team-section-head h2{
  font-size: 24px;
}

.team-section-head p{
  font-size: 12px;
}

.team-person-main{
  grid-template-columns: 54px minmax(140px, 1fr) minmax(150px, auto) 22px;
  gap: 14px;
  padding: 18px;
  background: transparent;
}

.team-person-avatar{
  width: 54px;
  height: 54px;
  font-size: 19px;
}

.team-person-identity{
  gap: 6px;
}

.team-person-identity strong{
  font-size: 16px;
}

.team-person-identity small{
  font-size: 12px;
}

.team-person-contribution small{
  font-size: 12px;
}

.team-person-contribution strong{
  font-size: 23px;
}

.team-person-metrics > span{
  min-height: 74px;
  gap: 5px;
  padding: 13px;
}

.team-person-metrics small{
  font-size: 12px;
}

.team-person-metrics strong{
  font-size: 16px;
}

.team-person-metrics em{
  font-size: 12px;
}

.team-person-actions button{
  min-height: 42px;
  padding: 9px 14px;
  background: transparent;
  font-size: 12px;
}

.team-empty > span{
  font-size: 18px;
}

.team-empty p{
  max-width: 540px;
  font-size: 14px;
  line-height: 1.55;
}

.team-profile-back{
  margin: 2px 0 12px;
}

.team-profile-back .team-back-button{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--team-violet-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.team-profile-back .team-back-button:hover{
  background: transparent;
  color: var(--team-ink);
}

.team-profile-back .team-back-button:focus-visible{
  border-radius: 10px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-violet) 18%, transparent);
}

.team-back-icon{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--team-line);
  border-radius: 50%;
  background: var(--team-violet-soft);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--motion-fast), background var(--motion-fast);
}

.team-back-button:hover .team-back-icon{
  transform: translateX(-2px);
}

.team-profile-hero{
  grid-template-columns: 72px minmax(190px, 1fr) minmax(250px, auto) auto;
  gap: 20px;
  padding: 22px;
}

.team-profile-avatar{
  width: 72px;
  height: 72px;
  font-size: 27px;
}

.team-access-badge{
  padding: 5px 9px;
  font-size: 11px;
}

.team-profile-person h2{
  margin-top: 8px;
  font-size: 28px;
}

.team-profile-person p{
  font-size: 13px;
}

.team-profile-result > span{
  font-size: 12px;
}

.team-profile-result > strong{
  font-size: clamp(28px, 2.8vw, 40px);
}

.team-profile-result > small{
  font-size: 12px;
}

.team-profile-actions .button{
  min-width: 155px;
  min-height: 42px;
  font-size: 13px;
}

.team-profile-kpi{
  min-height: 118px;
  gap: 7px;
  padding: 17px;
}

.team-profile-kpi > strong{
  font-size: 22px;
}

.team-panel-head{
  min-height: 78px;
  padding: 15px 18px;
}

.team-panel-head h3{
  font-size: 19px;
}

.team-panel-head > small,
.team-panel-head > strong,
.team-chart-legend{
  font-size: 11px;
}

.team-panel-head > strong{
  font-size: 17px;
}

.team-panel-head button{
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--team-violet-soft);
  font-size: 12px;
}

.team-status-list > div{
  min-height: 54px;
}

.team-status-list > div > strong{
  font-size: 14px;
}

.team-status-list > div > small{
  font-size: 11px;
}

.team-month-column > strong{
  font-size: 12px;
}

.team-month-column > small{
  font-size: 11px;
}

.team-order-row{
  min-height: 76px;
  padding: 12px 18px;
}

.team-order-copy strong,
.team-order-date strong,
.team-order-money strong{
  font-size: 14px;
}

.team-order-copy small,
.team-order-date small,
.team-order-money small{
  font-size: 11px;
}

.team-expense-breakdown span,
.team-expense-breakdown strong{
  font-size: 12px;
}

.team-expense-row{
  min-height: 64px;
  padding: 10px 18px;
}

.team-expense-row strong{
  font-size: 13px;
}

.team-expense-row small{
  font-size: 11px;
}

.team-panel-empty{
  min-height: 160px;
  font-size: 13px;
}

.team-formula-note{
  gap: 13px;
  padding: 16px 18px;
}

.team-formula-note strong{
  font-size: 13px;
}

.team-formula-note span{
  font-size: 12px;
  line-height: 1.55;
}

/* V1: мягкий мятный CRM, без микротипографики. */
.team-back-icon{
  border-color: #c7ddd5;
  background: #e5f2ed;
  color: #236552;
}

.team-section-head h2,
.team-panel-head h3{
  color: #172621;
}

/* Личный кабинет: самостоятельная мятная дизайн-система CRM. */
body[data-crm-role="employee"]{
  --employee-ink: #14251f;
  --employee-muted: #62716b;
  --employee-line: #d4e2dd;
  --employee-surface: #ffffff;
  --employee-bg: #eef5f2;
  --employee-accent: #2f7c68;
  --employee-accent-dark: #1f6250;
  --employee-accent-soft: #e3f2ec;
  background: var(--employee-bg);
}

body[data-crm-role="employee"] ::selection{
  background: #bfe1d4;
  color: #10241d;
}

.employee-shell{
  background:
    radial-gradient(circle at 9% 0%, rgba(62, 143, 119, 0.16), transparent 31rem),
    linear-gradient(180deg, #f6faf8 0%, #edf4f1 100%);
}

.employee-header{
  min-height: 84px;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  padding-block: 14px;
  border-bottom-color: rgba(196, 215, 208, 0.9);
  background: rgba(250, 253, 252, 0.92);
  box-shadow: 0 10px 32px rgba(25, 63, 51, 0.055);
}

.employee-brand{
  gap: 13px;
}

.employee-brand-mark{
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(145deg, #3c8d75, #205f4e);
  box-shadow: 0 12px 25px rgba(32, 95, 78, 0.22);
  font-size: 27px;
  font-weight: 800;
}

.employee-brand strong,
.employee-user strong{
  font-size: 15px;
}

.employee-brand small,
.employee-user small{
  font-size: 12px;
}

.employee-nav{
  gap: 6px;
  padding: 5px;
  border-color: #cfddd8;
  border-radius: 16px;
  background: #edf4f1;
}

.employee-nav-button{
  min-height: 46px;
  gap: 9px;
  padding: 10px 17px;
  border-radius: 12px;
  font-size: 14px;
}

.employee-nav-button:hover,
.employee-nav-button.is-active{
  box-shadow: 0 6px 17px rgba(31, 98, 80, 0.1);
  color: var(--employee-accent-dark);
}

.employee-nav-button b{
  min-width: 25px;
  padding: 3px 7px;
  font-size: 11px;
}

.employee-user .button{
  min-height: 42px;
  padding-inline: 15px;
  font-size: 13px;
}

.employee-main{
  width: min(1500px, 100%);
  padding-top: 40px;
}

.employee-page-head{
  gap: 28px;
  margin-bottom: 26px;
}

.employee-eyebrow{
  margin-bottom: 9px;
  font-size: 12px;
}

.employee-page-head h1{
  font-size: clamp(36px, 3.6vw, 50px);
}

.employee-page-head p{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
}

.employee-dashboard .employee-page-head{
  align-items: center;
  padding: 28px 30px;
  border: 1px solid #214f41;
  border-radius: 22px;
  background: linear-gradient(135deg, #132c24 0%, #245e4d 62%, #347d68 100%);
  box-shadow: 0 20px 44px rgba(20, 65, 51, 0.18);
}

.employee-dashboard .employee-eyebrow{
  color: #91d9bf;
}

.employee-dashboard .employee-page-head h1{
  color: #ffffff;
}

.employee-dashboard .employee-page-head p{
  color: rgba(245, 255, 251, 0.72);
}

.employee-dashboard .employee-segmented{
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.employee-dashboard .employee-segmented button{
  color: rgba(247, 255, 252, 0.72);
}

.employee-dashboard .employee-segmented button:hover,
.employee-dashboard .employee-segmented button.is-active{
  background: #e6f5ef;
  color: #1e604e;
}

.employee-dashboard .employee-custom-range label{
  color: rgba(247, 255, 252, 0.72);
}

.employee-dashboard .employee-custom-range .input{
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.employee-segmented{
  border-color: var(--employee-line);
  border-radius: 15px;
}

.employee-segmented button{
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13px;
}

.employee-custom-range label{
  font-size: 12px;
}

.employee-custom-range .input{
  min-height: 40px;
  font-size: 13px;
}

.employee-kpi-grid{
  gap: 16px;
  margin-bottom: 22px;
}

.employee-kpi{
  min-height: 150px;
  gap: 8px;
  padding: 22px;
  border-color: var(--employee-line);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(30, 72, 58, 0.065);
}

.employee-kpi::after{
  top: -32px;
  right: -30px;
  width: 108px;
  height: 108px;
}

.employee-kpi > span{
  font-size: 13px;
}

.employee-kpi > strong{
  font-size: clamp(29px, 2.7vw, 38px);
}

.employee-kpi > small{
  font-size: 12px;
  line-height: 1.4;
}

.employee-kpi.is-violet{ color: #2f7c68; }
.employee-kpi.is-blue{ color: #356fa7; }
.employee-kpi.is-green{ color: #1b7b5f; }
.employee-kpi.is-amber{ color: #9b6a18; }
.employee-kpi.is-red{ color: #b34f4d; }
.employee-kpi.is-slate{ color: #51685f; }

.employee-kpi:first-child{
  border-color: #183e32;
  background: linear-gradient(145deg, #17372d, #245e4d);
  color: #9ce1c8;
}

.employee-kpi:first-child > span,
.employee-kpi:first-child > small{
  color: rgba(248, 255, 252, 0.68);
}

.employee-kpi:nth-child(2){ background: #f4f9fc; }
.employee-kpi:nth-child(3){ background: #f2faf6; }
.employee-kpi:nth-child(4){ background: #fff9eb; }
.employee-kpi:nth-child(7){ background: #fff5f4; }

.employee-dashboard-grid{
  gap: 20px;
}

.employee-panel{
  min-height: 350px;
  border-color: var(--employee-line);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(30, 72, 58, 0.06);
}

.employee-panel-head{
  min-height: 88px;
  padding: 18px 21px;
}

.employee-panel-head span,
.employee-panel-head > small{
  font-size: 12px;
}

.employee-panel-head h2{
  margin-top: 6px;
  font-size: 21px;
}

.employee-panel-head > button{
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
}

.employee-status-list{
  padding: 9px 21px 17px;
}

.employee-status-list > button{
  min-height: 56px;
  padding: 10px 0;
}

.employee-status-track i{
  background: linear-gradient(90deg, #2f7c68, #65ad96);
}

.employee-status-list > button > strong{
  font-size: 15px;
}

.employee-status-list > button > small{
  font-size: 12px;
}

.employee-deadline-row,
.employee-recent-row{
  width: calc(100% - 42px);
  gap: 14px;
  margin-inline: 21px;
  padding: 15px 0;
}

.employee-order-id{
  min-height: 34px;
  background: #e8f2ee;
  color: #356b5b;
  font-size: 12px;
}

.employee-deadline-client strong,
.employee-recent-row strong{
  font-size: 15px;
}

.employee-deadline-client small,
.employee-deadline-date small,
.employee-recent-row small{
  font-size: 12px;
}

.employee-deadline-date strong{
  font-size: 15px;
}

.employee-recent-row .status-pill{
  padding: 4px 8px;
  font-size: 12px;
}

.employee-empty p{
  font-size: 14px;
}

.employee-month-value{
  font-size: 12px;
}

.employee-month-bar i{
  background: linear-gradient(180deg, #65ad96, #286f5c);
}

.employee-month-column strong{
  font-size: 12px;
}

.employee-month-column small{
  font-size: 12px;
}

.employee-search{
  min-height: 50px;
  border-color: var(--employee-line);
  border-radius: 15px;
}

.employee-search input{
  font-size: 14px;
}

.employee-filter-chips button{
  min-height: 38px;
  padding: 9px 13px;
  border-color: var(--employee-line);
  font-size: 13px;
}

.employee-filter-chips button:hover,
.employee-filter-chips button.is-active{
  border-color: #add3c6;
}

.employee-filter-chips b{
  font-size: 11px;
}

.employee-order-sort > span,
.employee-order-sort label{
  font-size: 12px;
}

.employee-order-sort .select{
  min-height: 40px;
  border-color: var(--employee-line);
  font-size: 13px;
}

.employee-order-result{
  margin-bottom: 13px;
  font-size: 13px;
}

.employee-order-result strong{
  font-size: 20px;
}

.employee-order-grid{
  gap: 17px;
}

.employee-order-card{
  padding: 20px;
  border-color: var(--employee-line);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(30, 72, 58, 0.06);
}

.employee-order-card-head > button > span{
  font-size: 12px;
}

.employee-order-card-head > button > strong{
  font-size: 20px;
}

.employee-order-card-head > button > small{
  font-size: 13px;
}

.employee-status-select{
  min-height: 38px;
  font-size: 12px;
}

.employee-order-task{
  min-height: 64px;
  margin-block: 17px 15px;
  padding: 14px;
  background: #f1f6f4;
  color: #384f47;
  font-size: 14px;
}

.employee-order-facts small,
.employee-order-facts em{
  font-size: 11px;
}

.employee-order-facts strong{
  font-size: 15px;
}

.employee-order-facts > span{
  min-height: 72px;
  padding: 13px;
}

.employee-order-card-foot > span{
  font-size: 12px;
}

.employee-order-card-foot .button{
  min-height: 40px;
  padding-inline: 16px;
  background: var(--employee-accent);
  font-size: 13px;
}

body[data-crm-role="employee"] #orderDialog.dialog{
  border-color: var(--employee-line);
  border-radius: 20px;
}

.employee-order-editor-head > div > span,
.employee-order-editor-head p,
.employees-manager-head p{
  font-size: 13px;
}

.employee-order-editor-head h2,
.employees-manager-head h2{
  font-size: 24px;
}

.employee-editor-money span,
.employee-editor-context > div > span,
.employee-editor-context dt{
  font-size: 12px;
}

.employee-editor-money strong{
  font-size: 23px;
}

.employee-editor-context p{
  font-size: 14px;
}

.employee-editor-context dd{
  font-size: 13px;
}

/* Управление доступом: те же размеры и язык, что у раздела команды. */
.employees-dialog.dialog{
  width: min(980px, calc(100vw - 28px));
  max-width: min(980px, calc(100vw - 28px));
  border: 1px solid var(--line);
}

.employees-summary{
  margin-bottom: 17px;
}

.employees-summary > div{
  gap: 6px;
  padding: 17px 19px;
}

.employees-summary span{
  font-size: 12px;
}

.employees-summary strong{
  font-size: 28px;
}

.employees-list{
  gap: 11px;
}

.employees-list-row{
  grid-template-columns: 50px minmax(150px, 1fr) auto 120px auto;
  gap: 14px;
  padding: 15px;
}

.employees-avatar{
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.employees-person strong{
  font-size: 15px;
}

.employees-person small{
  font-size: 12px;
}

.employees-access{
  padding: 6px 9px;
  font-size: 11px;
}

.employees-orders-count{
  min-height: 48px;
  padding: 8px 10px;
}

.employees-orders-count strong{
  font-size: 18px;
}

.employees-orders-count span,
.employees-orders-count small{
  font-size: 11px;
}

.employees-list-row > .button{
  min-height: 40px;
  font-size: 13px;
}

.employees-empty span{
  font-size: 18px;
}

.employees-empty p{
  font-size: 14px;
}

.employees-security-note,
.employees-access-toggle{
  padding: 17px;
}

.employees-security-note strong,
.employees-access-toggle strong{
  font-size: 14px;
}

.employees-security-note p,
.employees-access-toggle small{
  font-size: 13px;
}

.employees-dialog{
  border-color: #cbded7;
  border-radius: 20px;
}

.employees-avatar{
  background: #e3f2ec;
  color: #236552;
}

@media (max-width: 1260px){
  .team-profile-hero{
    grid-template-columns: 72px minmax(170px, 1fr) minmax(220px, auto);
  }

  .employees-list-row{
    grid-template-columns: 48px minmax(140px, 1fr) auto 110px auto;
  }
}

@media (max-width: 1080px){
  .employee-header{
    grid-template-columns: minmax(200px, 1fr) auto minmax(185px, 1fr);
  }

  .employee-main{
    padding-top: 30px;
  }
}

@media (max-width: 820px){
  .employee-header{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .employee-dashboard .employee-page-head{
    align-items: stretch;
  }

  .employee-page-head h1{
    font-size: 38px;
  }

  .employee-order-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .employees-list-row{
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }
}

@media (max-width: 760px){
  .team-page-title p{
    font-size: 14px;
  }

  .team-summary-card{
    min-height: 132px;
  }

  .team-person-main{
    grid-template-columns: 50px minmax(0, 1fr) minmax(125px, auto) 18px;
  }

  .team-profile-hero{
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .team-profile-avatar{
    width: 64px;
    height: 64px;
  }

  .team-profile-result{
    padding-top: 15px;
  }
}

@media (max-width: 600px){
  .employee-header{
    min-height: 70px;
    gap: 12px;
    padding: 11px 14px;
    overflow: hidden;
  }

  .employee-brand,
.employee-brand > div{
    overflow: hidden;
  }

  .employee-brand-mark{
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 24px;
  }

  .employee-brand strong{
    font-size: 15px;
  }

  .employee-user .button{
    min-height: 38px;
    font-size: 12px;
  }

  .employee-main{
    padding: 24px 14px 34px;
  }

  .employee-dashboard .employee-page-head{
    gap: 20px;
    margin-bottom: 20px;
    padding: 21px;
    border-radius: 18px;
  }

  .employee-dashboard .employee-period-controls{
    width: 100%;
    min-width: 0;
  }

  .employee-dashboard .employee-segmented{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .employee-page-head h1{
    font-size: 31px;
    line-height: 1.08;
  }

  .employee-page-head p{
    font-size: 14px;
  }

  .employee-segmented button{
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .employee-kpi-grid{
    gap: 10px;
  }

  .employee-kpi{
    min-height: 132px;
    padding: 17px;
    border-radius: 16px;
  }

  .employee-kpi > span{
    font-size: 12px;
  }

  .employee-kpi > strong{
    font-size: 25px;
  }

  .employee-kpi > small{
    font-size: 12px;
  }

  .employee-panel{
    border-radius: 17px;
  }

  .employee-panel-head{
    min-height: 78px;
    padding: 15px 16px;
  }

  .employee-panel-head h2{
    font-size: 19px;
  }

  .employee-panel-head span,
.employee-panel-head > small{
    font-size: 12px;
  }

  .employee-status-list > button > strong,
.employee-deadline-client strong,
.employee-recent-row strong{
    font-size: 14px;
  }

  .employee-deadline-client small,
.employee-deadline-date small,
.employee-recent-row small{
    font-size: 12px;
  }

  .employee-mobile-nav button{
    font-size: 13px;
  }

  .employee-order-card{
    padding: 17px;
    border-radius: 17px;
  }

  .employee-order-card-head > button > strong{
    font-size: 18px;
  }

  .employee-order-task{
    font-size: 13px;
  }

  .employees-summary span,
.employees-person small,
.employees-security-note p,
.employees-access-toggle small{
    font-size: 12px;
  }
}

@media (max-width: 520px){
  .team-period-tabs{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .team-period-tabs button{
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .team-summary-card{
    min-height: 122px;
    padding: 16px;
  }

  .team-summary-card > span,
.team-profile-kpi > span{
    font-size: 11px;
  }

  .team-summary-card > strong{
    font-size: 24px;
  }

  .team-summary-card > small,
.team-profile-kpi > small{
    font-size: 11px;
  }

  .team-person-main{
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    padding: 15px;
  }

  .team-person-avatar{
    width: 48px;
    height: 48px;
  }

  .team-person-contribution{
    padding-top: 11px;
  }

  .team-person-metrics small,
.team-person-metrics em{
    font-size: 12px;
  }

  .team-person-metrics strong{
    font-size: 14px;
  }

  .team-profile-person h2{
    font-size: 23px;
  }

  .team-profile-result > strong{
    font-size: 30px;
  }

  .team-profile-kpi{
    min-height: 105px;
    padding: 13px;
  }

  .team-profile-kpi > strong{
    font-size: 18px;
  }

  .team-panel-head h3{
    font-size: 17px;
  }

  .team-order-copy strong,
.team-order-date strong,
.team-order-money strong{
    font-size: 13px;
  }

  .team-order-copy small,
.team-order-date small,
.team-order-money small,
.team-expense-row small{
    font-size: 11px;
  }
}

@media (max-width: 390px){
  .employee-main{
    padding-inline: 12px;
  }

  .employee-dashboard .employee-page-head{
    padding: 18px;
  }

  .employee-page-head h1{
    font-size: 28px;
  }

  .employee-kpi{
    min-height: 126px;
    padding: 15px;
  }

  .employee-kpi > strong{
    font-size: 23px;
  }

  .employee-order-facts strong{
    font-size: 15px;
  }

  .team-profile-kpi > strong{
    font-size: 20px;
  }

  .team-profile-back .team-back-button{
    font-size: 13px;
  }
}

/* Keep the order workspace above legacy dialog/mobile rules. */
.dialog.thread-dialog{
  width: min(900px, calc(100vw - 28px));
  max-width: 900px;
  height: min(820px, calc(100dvh - 28px));
  max-height: 820px;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
}

@media (max-width: 640px){
  .dialog.thread-dialog{
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .employee-mobile-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Responsibility, draft uploads and the approved 2026-08 visual audit. */
.funnel-responsibility{
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.funnel-responsibility strong,
.funnel-responsibility span{
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-responsibility strong{
  color: #245f50;
  font-size: 13px;
  font-weight: 850;
}

.funnel-responsibility span{
  color: #6c817a;
  font-size: 12px;
  font-weight: 750;
}

.funnel-nickname{
  display: inline-flex;
  justify-content: flex-end;
}

.funnel-nickname .link-button,
.funnel-archive-nickname .link-button,
.thread-head-nickname .link-button{
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 7px;
  line-height: 1.2;
  text-decoration: none;
}

.funnel-archive-nickname{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.funnel-card dd,
.funnel-archive-card > b,
.employee-order-facts strong,
.employee-editor-money strong,
.payroll-dashboard-panel strong,
.team-page strong,
.v1-economy-statement strong{
  white-space: nowrap;
}

.thread-head-nickname{
  display: inline-flex;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.thread-head-nickname .link-button{
  color: inherit;
}

.thread-upload-progress > div{
  grid-template-columns: minmax(0, 1fr) auto;
}

.thread-upload-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.thread-upload-progress .is-waiting > strong{
  color: #60736d;
}

.thread-upload-progress .is-done > strong{
  color: var(--green);
}

:is(.input, .select, .button, .icon-button){
  min-height: 40px;
}

:is(.main, .dialog-body){
  font-size: 15px;
  line-height: 1.45;
}

:is(.field label, .metric-foot, .panel-subtitle, .muted.small){
  font-size: max(12px, 0.75rem);
}

.main :is(small, dt),
.mobile-money-grid span,
.million-model-title b{
  font-size: 12px;
}

.team-person-payroll{
  flex-wrap: wrap;
}

.team-person-payroll :is(b, small){
  white-space: nowrap;
}

:is(.team-summary-card > span, .team-profile-kpi > span){
  font-size: 12px;
}

.metric-card{
  min-width: 0;
  overflow: hidden;
}

.metric-value{
  min-width: 0;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.v1-economy-statement{
  overflow: hidden;
  border: 1px solid #c9ddd7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(24, 63, 53, 0.07);
}

.v1-economy-statement > header{
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 36px 14px;
}

.v1-economy-statement > header h2{
  margin: 0;
  color: #68766f;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.15;
}

.v1-economy-statement > header strong{
  color: #111a17;
  font-size: clamp(25px, 2.7vw, 34px);
  font-variant-numeric: tabular-nums;
}

.v1-economy-lines{
  padding: 0 36px 28px;
}

.v1-economy-line{
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #dbe4e1;
}

.v1-economy-line > span{
  min-width: 0;
  color: #6d7a75;
  font-size: clamp(17px, 1.75vw, 23px);
  line-height: 1.25;
}

.v1-economy-line > strong{
  color: #131c19;
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.v1-economy-line > strong.is-green{ color: #137e68; }
.v1-economy-line > strong.is-amber{ color: #9a6714; }
.v1-economy-line > strong.is-red{ color: #bb4d40; }

@media (max-width: 720px){
  .v1-economy-statement > header{ padding: 18px 20px 12px; }
  .v1-economy-lines{ padding: 0 20px 22px; }
  .v1-economy-line{ min-height: 62px; gap: 14px; }
  .funnel-head-controls{ flex-wrap: wrap; }
}

@media (max-width: 480px){
  .v1-economy-statement > header{ align-items: flex-start; flex-direction: column; gap: 8px; }
  .v1-economy-line{ grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 13px 0; }
  .v1-economy-line > strong{ justify-self: end; max-width: 100%; font-size: 17px; }
  .funnel-responsibility :is(strong, span){ max-width: 120px; }
}

/* Owner workspace: full-width top navigation (2026-08-11). */
.owner-shell{
  min-width: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.shell.owner-shell{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.owner-shell .app-header{
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 120;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 253, 252, 0.96);
  box-shadow: 0 7px 24px rgba(23, 45, 38, 0.055);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.owner-shell .owner-topbar{
  position: relative;
  top: auto;
  z-index: auto;
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(280px, 1.45fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 22px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.owner-shell .owner-topbar .brand{
  min-width: 0;
  display: block;
  padding: 0;
}

.owner-shell .owner-topbar .brand-title{
  max-width: none;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-shell .owner-topbar .search,
.owner-shell .owner-topbar .user-chip{
  grid-column: auto;
}

.owner-shell .owner-topbar .search{
  min-width: 0;
  min-height: 42px;
  padding-block: 8px;
}

.owner-shell .owner-topbar .user-chip{
  min-width: 0;
}

.owner-shell .app-header > .nav{
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 5px;
  padding: 5px 18px 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(70, 105, 95, 0.34) transparent;
}

.owner-shell .app-header > .nav::-webkit-scrollbar{
  display: block;
  height: 4px;
}

.owner-shell .app-header > .nav::-webkit-scrollbar-track{
  background: transparent;
}

.owner-shell .app-header > .nav::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(70, 105, 95, 0.3);
}

.owner-shell .app-header .nav-button{
  width: auto;
  min-width: max-content;
  min-height: 40px;
  flex: 0 0 auto;
  grid-template-columns: 22px auto;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  scroll-snap-align: start;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.owner-shell .app-header .nav-button:hover{
  transform: translateY(-1px);
}

.owner-shell .app-header .nav-button > span:not(.nav-icon):not(.nav-count){
  min-width: 0;
  overflow: visible;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.owner-shell .app-header .nav-icon{
  width: 21px;
  height: 21px;
}

.owner-shell .app-header .nav-count{
  display: none;
}

.owner-shell .main{
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.owner-shell .app-header > .nav{
  border-top: 1px solid #e1ebe8;
  background: linear-gradient(180deg, #f7fbfa, #f1f7f5);
}

.owner-shell .app-header .nav-button{
  color: #34433e;
}

.owner-shell .app-header .nav-button:hover{
  border-color: #cbded8;
  background: #ffffff;
}

.owner-shell .app-header .nav-button.is-active{
  border-color: #b9d9cf;
  background: #e6f3ef;
  color: #155d4b;
  box-shadow: inset 0 -3px 0 #2e826b;
}

@media (max-width: 900px){
  .owner-shell .owner-topbar{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 9px 14px 8px;
  }

  .owner-shell .owner-topbar .brand{
    grid-column: 1;
    grid-row: 1;
  }

  .owner-shell .owner-topbar .user-chip{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .owner-shell .owner-topbar .search{
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .owner-shell .app-header > .nav{
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }
}

@media (max-width: 600px){
  .owner-shell .owner-topbar{
    gap: 7px 8px;
    padding: 8px 10px 7px;
  }

  .owner-shell .owner-topbar .brand-title{
    font-size: 14px;
  }

  .owner-shell .owner-topbar .user-chip{
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .owner-shell .owner-topbar .user-chip > span{
    display: none;
  }

  .owner-shell .owner-topbar .button{
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .owner-shell .owner-topbar .search{
    min-height: 40px;
    padding: 7px 10px;
  }

  .owner-shell .app-header > .nav{
    min-height: 46px;
    gap: 4px;
    padding: 4px 8px 6px;
    scroll-padding-inline: 8px;
  }

  .owner-shell .app-header .nav-button{
    min-width: max-content;
    min-height: 36px;
    grid-template-columns: 20px auto;
    gap: 6px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .owner-shell .app-header .nav-icon{
    width: 20px;
    height: 20px;
  }
}