.drawer-user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: background .15s;
}
.drawer-user-card:hover { background: rgba(255,255,255,.04); }
.drawer-user-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 17px; font-weight: 700;
  background: rgba(255,107,0,.15);
  border: 2px solid rgba(255,107,0,.3);
  color: var(--orange);
}
.drawer-user-av.r-master { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #34d399; }
.drawer-user-av.r-sto    { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.3); color: #60a5fa; }
.drawer-user-av.r-admin  { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); color: #f59e0b; }
.drawer-user-body { flex: 1; min-width: 0; }
.drawer-user-name {
  font-size: 15px; font-weight: 700; color: var(--text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-user-role { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* ── Drawer divider улучшение ── */
.drawer-divider {
  height: 1px; background: var(--line);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST — улучшенный дизайн
═══════════════════════════════════════════════════════════════════ */
/* g-toast styles moved to additions.css */

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATES — единый стиль
═══════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  min-height: 280px;
}
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .7; }
.empty-t {
  font-family: 'Oswald', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--text1);
  margin-bottom: 8px;
}
.empty-d { font-size: 14px; color: var(--text2); line-height: 1.6; max-width: 280px; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — drawer и toast
═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .drawer-user-card { background: #fff; }
[data-theme="light"] .drawer-user-card:hover { background: #f5f5f7; }
[data-theme="light"] .g-toast {
  background: #fff; border-color: rgba(0,0,0,.1);
  color: #111; box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME — виджет активной заявки
═══════════════════════════════════════════════════════════════════ */
.home-active-order {
  display: flex; flex-direction: column; gap: 8px;
  margin: 16px 10px 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,107,0,.08), rgba(255,107,0,.03));
  border: 1.5px solid rgba(255,107,0,.3);
  border-radius: var(--r-xl, 18px);
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.home-active-order:hover { border-color: var(--orange); transform: translateY(-2px); }
.home-active-order__head {
  display: flex; align-items: center; gap: 8px;
}
.home-active-order__ico { font-size: 18px; flex-shrink: 0; }
.home-active-order__title {
  font-size: 12px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; flex: 1;
}
.home-active-order__status {
  font-size: 12px; font-weight: 700; color: var(--orange);
  background: rgba(255,107,0,.1); border: 1px solid rgba(255,107,0,.2);
  padding: 2px 10px; border-radius: 99px;
}
.home-active-order__body { padding: 0 4px; }
.home-active-order__service {
  font-size: 15px; font-weight: 700; color: var(--text1);
}
.home-active-order__master {
  font-size: 12px; color: var(--text2); margin-top: 2px;
}
.home-active-order__cta {
  font-size: 12px; font-weight: 700; color: var(--orange);
  align-self: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES — заменяют повторяющиеся инлайн-стили
═══════════════════════════════════════════════════════════════════ */

/* Текст */
.t-meta     { font-size: 11px; color: var(--text3); }
.t-sub      { font-size: 12px; color: var(--text3); }
.t-body-sm  { font-size: 13px; color: var(--text2); }
.t-desc     { font-size: 14px; color: var(--text2); line-height: 1.5; }
.fw7.t1     { font-weight: 700; color: var(--text1); }

/* Flex layouts */
.flex-ac-8  { display: flex; align-items: center; gap: 8px; }
.flex-ac-10 { display: flex; align-items: center; gap: 10px; }
.flex-ac-12 { display: flex; align-items: center; gap: 12px; }
.flex-sb    { display: flex; align-items: center; justify-content: space-between; }
.flex-sb-10 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flex-col-8 { display: flex; flex-direction: column; gap: 8px; }
.flex-wrap-8{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Button size utilities (заменяют инлайн-стили) ── */
.btn-xs  { font-size: 11px !important; padding: 5px  10px !important; }
.btn-sm  { font-size: 12px !important; padding: 7px  12px !important; }
.btn-md  { font-size: 13px !important; padding: 8px  16px !important; }
.btn-lg  { font-size: 14px !important; padding: 10px 20px !important; }

/* ── Gap utilities ── */
.gap-4  { gap: 4px  !important; }
.gap-6  { gap: 6px  !important; }
.gap-8  { gap: 8px  !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }

/* ── Text utilities ── */
.text-orange { color: var(--orange) !important; }
.text-error  { color: var(--red)    !important; }
.text-muted  { color: var(--text3)  !important; }
.fw-bold     { font-weight: 700 !important; }
.fw-800      { font-weight: 800 !important; }
.fs-11       { font-size: 11px !important; }
.fs-12       { font-size: 12px !important; }
.fs-13       { font-size: 13px !important; }
.fs-14       { font-size: 14px !important; }
.fs-15       { font-size: 15px !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODAL DESIGN SYSTEM v2 — r110
   Единый стиль для всех модалок и шитов
═══════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.modal-overlay-v2 {
  position: fixed; inset: 0;
  z-index: 8100;
  background: rgba(7,17,27,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .22s ease;
}
.modal-overlay-v2.open { opacity: 1; }

/* ── Панель-шит снизу ── */
.modal-panel-v2 {
  width: min(640px, 100%);
  max-height: 90dvh;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg,18px) var(--ui-radius-lg,18px) 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -12px 60px rgba(0,0,0,.4);
}
.modal-overlay-v2.open .modal-panel-v2 { transform: translateY(0); }

/* ── Центрированный диалог ── */
.modal-dialog-v2 {
  width: min(520px, calc(100% - 32px));
  max-height: 88dvh;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg,18px);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.94) translateY(12px);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.modal-overlay-v2.open .modal-dialog-v2 { transform: scale(1) translateY(0); }

/* ── Header ── */
.modal-header-v2 {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-header-v2__icon {
  font-size: 26px; line-height: 1; flex-shrink: 0;
  margin-top: 2px;
}
.modal-header-v2__body { flex: 1; min-width: 0; }
.modal-header-v2__title {
  font-family: 'Oswald', sans-serif;
  font-size: 19px; font-weight: 700; color: var(--text1);
  margin-bottom: 2px;
}
.modal-header-v2__sub {
  font-size: 12px; color: var(--text3); line-height: 1.5;
}
.modal-close-v2 {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  color: var(--text3); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background .15s, color .15s;
}
.modal-close-v2:hover { background: rgba(255,255,255,.12); color: var(--text1); }

/* ── Handle (drag indicator) ── */
.modal-handle {
  width: 40px; height: 4px;
  background: var(--line2, rgba(255,255,255,.15));
  border-radius: var(--ui-radius-sm,5px); margin: 10px auto 0;
  flex-shrink: 0;
}

/* ── Body ── */
.modal-body-v2 {
  flex: 1; overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.modal-body-v2::-webkit-scrollbar { width: 4px; }
.modal-body-v2::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--ui-radius-sm,5px); }

/* ── Footer ── */
.modal-footer-v2 {
  display: flex; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--bg2);
}
.modal-footer-v2 .btn { flex: 1; }

/* ── Секция внутри модалки ── */
.modal-section {
  margin-bottom: 20px;
}
.modal-section-title {
  font-size: 11px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ── Info-row внутри модалки ── */
.modal-info-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.modal-info-row:last-child { border-bottom: none; }
.modal-info-row__ico { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.modal-info-row__label { font-size: 12px; color: var(--text3); width: 90px; flex-shrink: 0; }
.modal-info-row__val { font-size: 14px; color: var(--text1); font-weight: 600; flex: 1; }

/* ── Status badge в модалке ── */
.modal-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px; font-weight: 700;
}
.modal-status--new     { background: rgba(96,165,250,.12);  color: #60a5fa; border: 1px solid rgba(96,165,250,.25); }
.modal-status--process { background: rgba(255,107,0,.12);   color: var(--orange); border: 1px solid rgba(255,107,0,.25); }
.modal-status--done    { background: rgba(34,197,94,.12);   color: #22c55e; border: 1px solid rgba(34,197,94,.25); }
.modal-status--wait    { background: rgba(245,158,11,.12);  color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.modal-status--error   { background: rgba(239,68,68,.12);   color: #ef4444; border: 1px solid rgba(239,68,68,.25); }

/* ── Light theme ── */
[data-theme="light"] .modal-panel-v2,
[data-theme="light"] .modal-dialog-v2 { background: #fff; box-shadow: 0 -8px 40px rgba(0,0,0,.12); }
[data-theme="light"] .modal-overlay-v2 { background: rgba(0,0,0,.45); }
[data-theme="light"] .modal-close-v2 { background: rgba(0,0,0,.05); }
[data-theme="light"] .modal-info-row { border-color: rgba(0,0,0,.06); }

/* ── Input error state ── */
.input-error,
input.input-error,
textarea.input-error,
select.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
  animation: shake-err .3s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake-err {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ── Form field улучшения ── */
.form-field { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--text3); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 6px;
}
.form-hint {
  font-size: 11px; color: var(--text3);
  margin-top: 4px; line-height: 1.5;
}
.form-required::after { content: ' *'; color: #ef4444; }

/* ── Char counter ── */
.char-counter {
  font-size: 10px; color: var(--text3);
  text-align: right; margin-top: 3px;
}
.char-counter.near-limit { color: #f59e0b; }
.char-counter.at-limit   { color: #ef4444; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY — часто используемые паттерны
═══════════════════════════════════════════════════════════════════ */

/* Карточка-ячейка */
.k-cell {
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-md,10px);
  background: var(--bg);
}
.k-cell-pad { padding: 10px; }
.k-cell-sm  { padding: 8px 12px; }

/* Поверхность */
.k-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-md,10px);
  padding: 14px;
}
.k-surface-lg { border-radius: var(--ui-radius-lg,18px); padding: 16px; }

/* Oswald заголовки */
.h-oswald-sm  { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700; }
.h-oswald-md  { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 700; color: var(--text); }
.h-oswald-lg  { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700; }
.h-oswald-xl  { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; }

/* Section label */
.sec-label {
  font-size: 11px; font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* Flex row с space-between */
.row-sb       { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.row-sb-nowrap{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Meta row */
.meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text3);
}

/* Badge inline */
.badge-inline {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 700;
  background: rgba(255,107,0,.1);
  color: var(--orange);
  border: 1px solid rgba(255,107,0,.2);
}

/* Separator */
.k-sep { height: 1px; background: var(--line); margin: 12px 0; }
.k-sep-sm { height: 1px; background: var(--line); margin: 8px 0; }

/* r237 — shared work-cycle chips */
.kareta-workflow-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,107,0,.09);border:1px solid rgba(255,107,0,.18);color:var(--orange);font-size:12px;font-weight:800}