/* Shared enterprise interaction patterns. Prefix: ds-pattern-* */
.ds-pattern-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ds-pattern { min-width:0; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.ds-pattern--wide { grid-column:1/-1; }
.ds-pattern__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ds-pattern__head h3 { margin:0; font-size:15px; }
.ds-pattern__head code { color:var(--text-muted); font-size:11px; }

.ds-pattern-tabs__list {
  --ds-tab-x: 4px;
  --ds-tab-w: 0px;
  position: relative;
  display: flex;
  gap: 6px;
  padding: 4px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--pastel-mint));
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .035);
}
.ds-pattern-tabs__list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: var(--ds-tab-x);
  width: var(--ds-tab-w);
  border: 1px solid color-mix(in srgb, var(--brand-500) 13%, var(--border));
  border-radius: 10px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--pastel-mint) 24%, var(--surface)));
  box-shadow: 0 7px 18px -9px rgba(15, 23, 42, .28), 0 2px 6px rgba(44, 120, 115, .07);
  transition: left .32s cubic-bezier(.22,.8,.2,1), width .32s cubic-bezier(.22,.8,.2,1);
  pointer-events: none;
}
.ds-pattern-tabs__tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 0;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: color .22s ease, transform .22s ease;
}
.ds-pattern-tabs__tab:hover {
  color: var(--brand-600);
  transform: translateY(-1px);
}
.ds-pattern-tabs__tab:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}
.ds-pattern-tabs__tab[aria-selected="true"] {
  color: var(--brand-700);
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}
.ds-pattern-tabs__panel {
  padding: 17px 6px 2px;
  color: var(--text-muted);
  line-height: 1.8;
}
.ds-pattern-tabs__panel.is-entering {
  animation: dsTabPanelIn .3s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes dsTabPanelIn {
  from { opacity: 0; transform: translateY(7px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-pattern-tabs__list::before,
  .ds-pattern-tabs__tab { transition: none; }
  .ds-pattern-tabs__panel.is-entering { animation: none; }
}

.ds-pattern-accordion { display:grid; gap:9px; }
.ds-pattern-accordion__item {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  transition:border-color .22s ease, box-shadow .22s ease;
}
.ds-pattern-accordion__item:has(.ds-pattern-accordion__trigger[aria-expanded="true"]) {
  border-color:color-mix(in srgb,var(--brand-500) 28%,var(--border));
  box-shadow:0 9px 24px -16px rgba(15,23,42,.3);
}
.ds-pattern-accordion__trigger {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:0;
  color:var(--text);
  background:var(--surface-2);
  cursor:pointer;
  font:inherit;
  font-weight:750;
  text-align:start;
  transition:color .22s ease,background .22s ease;
}
.ds-pattern-accordion__trigger:hover {
  color:var(--brand-700);
  background:color-mix(in srgb,var(--pastel-mint) 38%,var(--surface));
}
.ds-pattern-accordion__trigger[aria-expanded="true"] {
  color:var(--brand-700);
  background:color-mix(in srgb,var(--pastel-mint) 58%,var(--surface));
}
.ds-pattern-accordion__trigger::after {
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  margin:0 4px;
  border-inline-end:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .28s cubic-bezier(.22,.8,.2,1);
}
.ds-pattern-accordion__trigger[aria-expanded="true"]::after {
  transform:translateY(2px) rotate(225deg);
}
.ds-pattern-accordion__trigger:focus-visible {
  outline:2px solid var(--brand-500);
  outline-offset:-3px;
  border-radius:10px;
}
.ds-pattern-accordion__summary {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 10px 5.25rem;
  align-items:baseline;
  width:15rem;
  max-width:100%;
  color:var(--text-muted);
  font-size:.78rem;
  font-weight:700;
  line-height:1.6;
  white-space:nowrap;
}
.ds-pattern-accordion__summary-label {
  min-width:0;
  overflow:hidden;
  text-align:start;
  text-overflow:ellipsis;
}
.ds-pattern-accordion__summary-separator { text-align:center; }
.ds-pattern-accordion__summary-value {
  direction:rtl;
  text-align:start;
  font-variant-numeric:tabular-nums;
}
.ds-pattern-accordion__trigger--team {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 8rem 10px 5.25rem 8px;
  column-gap:12px;
}
.ds-pattern-accordion__trigger--team > span:first-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ds-pattern-accordion__trigger--team .ds-pattern-accordion__summary {
  display:contents;
}
.ds-pattern-accordion__panel {
  padding:13px 15px 15px;
  border-top:1px solid color-mix(in srgb,var(--brand-500) 12%,var(--border));
  color:var(--text-muted);
  background:color-mix(in srgb,var(--pastel-mint) 10%,var(--surface));
  line-height:1.9;
}
.ds-pattern-accordion__panel.is-entering {
  animation:dsAccordionPanelIn .28s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes dsAccordionPanelIn {
  from { opacity:0; transform:translateY(-7px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .ds-pattern-accordion__item,
  .ds-pattern-accordion__trigger,
  .ds-pattern-accordion__trigger::after { transition:none; }
  .ds-pattern-accordion__panel.is-entering { animation:none; }
}
@media (max-width:640px) {
  .ds-pattern-accordion__summary {
    width:12.5rem;
    grid-template-columns:minmax(0, 1fr) 10px 4.75rem;
  }
  .ds-pattern-accordion__trigger--team {
    grid-template-columns:minmax(0, 1fr) 5rem 8px 4.5rem 8px;
    column-gap:6px;
  }
}

.ds-pattern-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--text-muted); font-size:12px; }
.ds-pattern-breadcrumb a { color:var(--brand-600); text-decoration:none; }
.ds-pattern-breadcrumb span[aria-current="page"] { color:var(--text); font-weight:700; }

.ds-pattern-tree, .ds-pattern-tree ul { margin:0; padding-inline-start:18px; list-style:none; }
.ds-pattern-tree > li { padding-inline-start:0; }
.ds-pattern-tree ul {
  overflow:hidden;
  transform-origin:top;
  transition:height .32s cubic-bezier(.22,.8,.2,1),opacity .24s ease,transform .32s cubic-bezier(.22,.8,.2,1);
  will-change:height,opacity,transform;
}
.ds-pattern-tree ul.is-tree-collapsing,
.ds-pattern-tree ul[hidden] {
  opacity:0;
  transform:translateY(-5px) scaleY(.97);
}
.ds-pattern-tree__toggle {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:8px 5px;
  border:0;
  border-radius:9px;
  color:var(--text);
  background:transparent;
  cursor:pointer;
  font:inherit;
  font-weight:650;
  text-align:start;
  transition:color .2s ease,background .2s ease;
}
.ds-pattern-tree__toggle:hover {
  color:var(--brand-700);
  background:color-mix(in srgb,var(--pastel-mint) 28%,transparent);
}
.ds-pattern-tree__toggle::before {
  content:"";
  width:7px;
  height:7px;
  border-inline-end:2px solid currentColor;
  border-bottom:2px solid currentColor;
  color:var(--text-muted);
  transform:rotate(45deg);
  transition:transform .3s cubic-bezier(.22,.8,.2,1),color .2s ease;
}
.ds-pattern-tree__toggle[aria-expanded="true"]::before {
  color:var(--brand-500);
  transform:rotate(225deg);
}
@media (prefers-reduced-motion:reduce) {
  .ds-pattern-tree ul,
  .ds-pattern-tree__toggle,
  .ds-pattern-tree__toggle::before { transition:none; }
}

.ds-pattern-kanban { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:12px; overflow:auto; }
.ds-pattern-kanban__column { min-width:180px; padding:10px; border-radius:12px; background:var(--surface-2); }
.ds-pattern-kanban__head { display:flex; justify-content:space-between; gap:8px; margin-bottom:9px; font-size:12px; font-weight:800; }
.ds-pattern-kanban__column[style*="--stage-c"] .ds-pattern-kanban__head,
.ds-pattern-kanban__column[data-stage-c] .ds-pattern-kanban__head {
  margin: -10px -10px 9px;
  padding: 10px 12px;
  border-radius: 12px 12px 0 0;
  border-top: 3px solid var(--stage-c, var(--brand-500));
  border-bottom: 1px solid color-mix(in srgb, var(--stage-c, var(--brand-500)) 28%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--stage-c, var(--brand-500)) 18%, transparent), transparent 90%),
    color-mix(in srgb, var(--surface) 88%, var(--stage-c, var(--brand-500)) 12%);
}
.ds-pattern-kanban__column[style*="--stage-c"] .ds-pattern-kanban__count,
.ds-pattern-kanban__column[data-stage-c] .ds-pattern-kanban__count {
  background: var(--stage-c, var(--brand-500));
  color: #fff;
}
.ds-pattern-kanban__count {
  display:inline-grid;
  min-width:25px;
  height:25px;
  place-items:center;
  padding-inline:6px;
  border-radius:999px;
  color:var(--brand-700);
  background:color-mix(in srgb,var(--pastel-mint) 68%,var(--surface));
  border:1px solid color-mix(in srgb,var(--brand-500) 16%,var(--border));
  font-variant-numeric:tabular-nums;
}
.ds-pattern-kanban__count.is-count-updated {
  animation:dsKanbanCountPop .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dsKanbanCountPop {
  50% { transform:scale(1.18); box-shadow:0 0 0 5px color-mix(in srgb,var(--pastel-mint) 36%,transparent); }
}
.ds-pattern-kanban__card { padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-xs); cursor:grab; }
.ds-pattern-kanban__card + .ds-pattern-kanban__card { margin-top:8px; }
.ds-pattern-kanban__card.is-dragging { opacity:.5; }
.ds-pattern-kanban__column.is-drop-target { outline:2px dashed var(--brand-300); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce) {
  .ds-pattern-kanban__count.is-count-updated { animation:none; }
}

/* DsKanban mount API — modifiers on top of the base pattern (TRFC-0068 §5) */
.ds-pattern-kanban--cozy { gap:9px; }
.ds-pattern-kanban--cozy .ds-pattern-kanban__column { padding:7px; }
.ds-pattern-kanban--cozy .ds-pattern-kanban__card { padding:7px; font-size:12.5px; }
.ds-pattern-kanban--cozy .ds-pattern-kanban__card + .ds-pattern-kanban__card { margin-top:6px; }
.ds-pattern-kanban--compact { gap:7px; }
.ds-pattern-kanban--compact .ds-pattern-kanban__column { padding:5px; }
.ds-pattern-kanban--compact .ds-pattern-kanban__card { padding:5px 7px; font-size:11.5px; }
.ds-pattern-kanban--compact .ds-pattern-kanban__card + .ds-pattern-kanban__card { margin-top:4px; }

.ds-pattern-kanban__card[tabindex] { cursor:grab; }
.ds-pattern-kanban__card.is-kbd-grabbed {
  outline:2px solid var(--brand-500);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500) 18%,transparent);
}
.ds-pattern-kanban__column.is-kbd-target { outline:2px dashed var(--brand-500); outline-offset:-3px; background:color-mix(in srgb,var(--pastel-mint) 22%,var(--surface-2)); }
.ds-pattern-kanban__card[aria-disabled="true"] { cursor:not-allowed; opacity:.55; }
.ds-pattern-kanban__card.is-move-pending { opacity:.72; }

.ds-pattern-kanban__column--empty { display:flex; align-items:center; justify-content:center; min-height:64px; }
.ds-pattern-kanban__empty { color:var(--text-muted); font-size:12px; text-align:center; padding:8px; }
.ds-pattern-kanban__sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.ds-pattern-timeline { position:relative; margin:0; padding:0 24px 0 0; list-style:none; }
.ds-pattern-timeline::before { content:""; position:absolute; inset-block:7px; inset-inline-start:7px; width:2px; background:var(--border); }
.ds-pattern-timeline__item { position:relative; padding:0 0 16px; }
.ds-pattern-timeline__item::before { content:""; position:absolute; inset-inline-start:-21px; inset-block-start:5px; width:10px; height:10px; border:3px solid var(--surface); border-radius:50%; background:var(--brand-500); box-shadow:0 0 0 1px var(--border); }
.ds-pattern-timeline__item time { display:block; color:var(--text-muted); font-size:11px; }

.ds-pattern-wizard {
  /* [crm-modular-system] diaco-ux-reviewer/diaco-qa fix (2026-07-31) —
     hardcoded to 4 columns; any wizard with >4 steps silently wrapped into
     multiple rows with the single ::before connector line below only ever
     spanning row 1 (confirmed live, Attach Mode's 8-step wizard). Callers
     with more steps than fit on one line should set
     `style="--ds-wizard-cols: <n>"` on this element so every step stays on
     one row (columns just narrow) instead of wrapping — the connector line
     spans the full row exactly as it did before for ≤4-step callers, which
     keep the default and are unaffected. */
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--ds-wizard-cols, 4), 1fr);
  gap:0;
  counter-reset:step;
  padding:8px 2px 2px;
}
.ds-pattern-wizard::before {
  content:"";
  position:absolute;
  z-index:0;
  inset-inline:12%;
  top:23px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(to left,
    var(--brand-400) 0 50%,
    var(--border) 50% 100%);
}
.ds-pattern-wizard__step {
  position:relative;
  z-index:1;
  min-width:0;
  padding:0 5px 4px;
  border:0;
  border-radius:0;
  color:var(--text-muted);
  background:transparent;
  box-shadow:none;
  text-align:center;
  font-size:11px;
  font-weight:650;
  transition:color .2s ease;
}
.ds-pattern-wizard__step:hover {
  color:var(--brand-700);
}
.ds-pattern-wizard__step::before {
  counter-increment:step;
  content:counter(step);
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  margin:0 auto 7px;
  border:3px solid var(--surface);
  border-radius:50%;
  color:var(--text-muted);
  background:var(--surface-3);
  box-shadow:0 0 0 1px var(--border);
  font-size:10px;
  font-weight:800;
}
.ds-pattern-wizard__step.is-complete {
  color:var(--brand-700);
  font-weight:800;
}
.ds-pattern-wizard__step.is-complete::before {
  content:"✓";
  color:white;
  background:var(--brand-500);
  box-shadow:0 0 0 1px var(--brand-500);
}
.ds-pattern-wizard__step[aria-current="step"] {
  color:var(--brand-700);
  font-weight:850;
}
.ds-pattern-wizard__step[aria-current="step"]::before {
  color:white;
  background:#8065c8;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pastel-lilac) 55%,transparent);
  animation:none;
}
@media (prefers-reduced-motion:reduce) {
  .ds-pattern-wizard__step { transition:none; }
}

.ds-pattern-access { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ds-pattern-access__state { padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.ds-pattern-access__state strong { display:block; margin-bottom:5px; }
.ds-pattern-access__state span { color:var(--text-muted); font-size:11px; line-height:1.7; }

/* Canonical one-line settings strip: title, persisted switch and row action. */
.ds-settings-strip { display:flex; flex-wrap:nowrap; gap:12px; width:100%; overflow-x:auto; padding:2px 2px 8px; scrollbar-gutter:stable; }
/* Wrapping variant for a long list of cards: three equal columns that flow down, never a horizontal scroll. */
.ds-settings-strip--grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow-x:visible; padding:2px; scrollbar-gutter:auto; }
@media (max-width:1100px) { .ds-settings-strip--grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .ds-settings-strip--grid { grid-template-columns:minmax(0,1fr); } }
.ds-settings-card { --ds-settings-tone:var(--brand-500); --ds-settings-soft:var(--pastel-mint); display:grid; flex:1 0 min(360px,100%); min-width:0; grid-template-columns:auto minmax(110px,1fr) auto; align-items:center; gap:12px; min-height:82px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--ds-settings-tone) 28%,var(--border)); border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--ds-settings-soft) 72%,var(--surface)),var(--surface)); box-shadow:0 10px 26px -22px color-mix(in srgb,var(--ds-settings-tone) 68%,transparent); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ds-settings-card:hover { border-color:color-mix(in srgb,var(--ds-settings-tone) 48%,var(--border)); box-shadow:0 14px 30px -20px color-mix(in srgb,var(--ds-settings-tone) 72%,transparent); transform:translateY(-1px); }
.ds-settings-card[data-tone="sky"] { --ds-settings-tone:var(--sky-600,#347cac); --ds-settings-soft:var(--pastel-sky); }
.ds-settings-card[data-tone="lilac"] { --ds-settings-tone:var(--lilac-600,#8065c8); --ds-settings-soft:var(--pastel-lilac); }
.ds-settings-card[data-tone="amber"] { --ds-settings-tone:var(--amber-600,#b7791f); --ds-settings-soft:var(--pastel-lemon); }
.ds-settings-card[data-tone="rose"] { --ds-settings-tone:var(--rose-600,#c45168); --ds-settings-soft:var(--pastel-rose); }
.ds-settings-card__icon { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:var(--ds-settings-tone); background:color-mix(in srgb,var(--ds-settings-soft) 78%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-settings-tone) 16%,transparent); }
.ds-settings-card__title { min-width:0; overflow:hidden; color:var(--text); font-size:14px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.ds-settings-card__actions { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.ds-settings-card .ds-switch { min-height:40px; margin:0; border-color:color-mix(in srgb,var(--ds-settings-tone) 18%,var(--border)); background:color-mix(in srgb,var(--surface) 90%,transparent); }
.ds-settings-card .ds-switch input:checked+.ds-switch__track { border-color:var(--ds-settings-tone); background:var(--ds-settings-tone); }
.ds-settings-card .ds-grid__row-btn { border-color:color-mix(in srgb,var(--ds-settings-tone) 24%,var(--border)); color:var(--ds-settings-tone); background:color-mix(in srgb,var(--surface) 88%,transparent); }
@media (prefers-reduced-motion:reduce) { .ds-settings-card { transition:none; } }
/* Phones: the title gives way (it already ellipsizes) so the switch label and row action stay whole. */
@media (max-width:520px) { .ds-settings-card { grid-template-columns:auto minmax(0,1fr) auto; } }

.ds-command-backdrop { position:fixed; inset:0; z-index:1100; display:grid; place-items:start center; padding-top:min(18vh,150px); background:rgba(2,28,30,.35); backdrop-filter:blur(5px); }
.ds-command-backdrop[hidden] { display:none; }
.ds-command { width:min(620px,calc(100vw - 32px)); overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-lg); }
.ds-command__search { width:100%; padding:16px 18px; border:0; border-bottom:1px solid var(--border); color:var(--text); background:transparent; outline:0; font:inherit; }
.ds-command__list { max-height:300px; margin:0; padding:8px; overflow:auto; list-style:none; }
.ds-command__item { display:flex; justify-content:space-between; gap:12px; padding:10px; border-radius:9px; cursor:pointer; }
.ds-command__item:hover, .ds-command__item.is-active { background:var(--brand-50); color:var(--brand-600); }

/* Operational patterns: list/detail, expandable rows, upload, approval, import and jobs. */
.ds-pattern__head p { margin:5px 0 0; color:var(--text-muted); font-size:11px; line-height:1.7; }
.ds-pattern-avatar { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:12px; color:var(--brand-700); background:var(--pastel-mint); font-size:11px; font-weight:850; }
.ds-pattern-avatar--sky { color:#285b80; background:var(--pastel-sky); }
.ds-pattern-avatar--rose { color:#9c3f50; background:var(--pastel-rose); }
.ds-pattern-avatar--lg { width:48px; height:48px; border-radius:15px; font-size:13px; }
.ds-pattern-status { display:inline-flex; width:max-content; align-items:center; justify-content:center; padding:5px 9px; border-radius:999px; font-size:10px; font-style:normal; font-weight:800; white-space:nowrap; }
.ds-pattern-status--amber { color:#9a5a10; background:var(--pastel-peach); }
.ds-pattern-status--mint { color:#187457; background:var(--pastel-mint); }
.ds-pattern-status--rose { color:#a64052; background:var(--pastel-rose); }
.ds-pattern-status--sky { color:#296484; background:var(--pastel-sky); }

.ds-pattern-master-detail { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(340px,1.1fr); min-height:330px; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); }
.ds-pattern-master-detail__list { display:grid; align-content:start; gap:6px; padding:9px; border-inline-end:1px solid var(--border); }
.ds-pattern-master-detail__item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:11px; border:1px solid transparent; border-radius:12px; color:var(--text); background:transparent; cursor:pointer; font:inherit; text-align:start; transition:.22s ease; }
.ds-pattern-master-detail__item:hover { background:var(--surface); transform:translateX(-2px); }
.ds-pattern-master-detail__item.is-active { border-color:color-mix(in srgb,var(--brand-500) 25%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-mint) 48%,var(--surface)),var(--surface)); box-shadow:0 10px 25px -20px rgba(15,23,42,.45); }
.ds-pattern-master-detail__item strong,.ds-pattern-master-detail__item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-master-detail__item strong { font-size:12px; }
.ds-pattern-master-detail__item small { margin-top:4px; color:var(--text-muted); font-size:10px; }
.ds-pattern-master-detail__detail { padding:22px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--pastel-sky) 20%,var(--surface))); }
.ds-pattern-master-detail__detail.is-changing { animation:dsDetailChange .3s cubic-bezier(.22,.8,.2,1); }
@keyframes dsDetailChange { from { opacity:.35; transform:translateY(7px); } }
.ds-pattern-master-detail__hero { display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.ds-pattern-master-detail__hero div { flex:1; min-width:0; }
.ds-pattern-master-detail__hero small { color:var(--text-muted); font-size:10px; }
.ds-pattern-master-detail__hero h4 { margin:3px 0 0; font-size:16px; }
.ds-pattern-detail-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.ds-pattern-detail-facts div { padding:11px; border:1px solid color-mix(in srgb,var(--border) 75%,transparent); border-radius:11px; background:color-mix(in srgb,var(--surface) 80%,transparent); }
.ds-pattern-detail-facts dt { color:var(--text-muted); font-size:9px; }
.ds-pattern-detail-facts dd { margin:5px 0 0; font-size:11px; font-weight:800; }
.ds-pattern-detail-note { display:flex; flex-direction:column; gap:5px; padding:13px; border:1px solid color-mix(in srgb,var(--brand-500) 15%,var(--border)); border-radius:12px; color:var(--brand-700); background:color-mix(in srgb,var(--pastel-mint) 35%,var(--surface)); font-size:11px; }

.ds-pattern-expandable { overflow:hidden; border:1px solid var(--border); border-radius:13px; }
.ds-pattern-expandable__row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:68px; padding:10px 13px; border:0; border-bottom:1px solid var(--border); color:var(--text); background:var(--surface); cursor:pointer; font:inherit; text-align:start; }
.ds-pattern-expandable__row:hover,.ds-pattern-expandable__row[aria-expanded="true"] { background:color-mix(in srgb,var(--pastel-sky) 28%,var(--surface)); }
.ds-pattern-expandable__row strong,.ds-pattern-expandable__row small { display:block; }
.ds-pattern-expandable__row strong { font-size:11px; }
.ds-pattern-expandable__row small { margin-top:4px; color:var(--text-muted); font-size:9px; }
.ds-pattern-expandable__row b { font-size:10px; white-space:nowrap; }
.ds-pattern-expandable__chevron {
  display:block;
  width:18px;
  height:22px;
  color:var(--text-muted);
  line-height:1;
  transform-origin:center;
  transition:color .2s ease,transform .3s cubic-bezier(.22,.8,.2,1);
}
.ds-pattern-expandable__chevron::before {
  content:"›";
  display:block;
  font-family:Arial,sans-serif;
  font-size:25px;
  font-weight:700;
  line-height:20px;
}
[aria-expanded="true"] > .ds-pattern-expandable__chevron {
  color:var(--brand-700);
  transform:rotate(-90deg);
}
[aria-expanded="true"] > .ds-pattern-expandable__chevron::before {
  content:"›";
}
.ds-pattern-expandable__panel {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  height:auto;
  padding:11px 30px 13px;
  overflow:hidden;
  opacity:1;
  background:var(--surface-2);
  transform:translateY(0);
  transform-origin:top;
  transition:height .32s cubic-bezier(.22,.8,.2,1),padding .32s cubic-bezier(.22,.8,.2,1),opacity .22s ease,transform .32s cubic-bezier(.22,.8,.2,1);
}
.ds-pattern-expandable__panel[hidden] { display:none; }
.ds-pattern-expandable__panel.is-collapsing {
  padding-block:0;
  opacity:0;
  transform:translateY(-6px);
}
.ds-pattern-expandable__panel div { min-width:0; }
.ds-pattern-expandable__panel small,.ds-pattern-expandable__panel strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-expandable__panel small { color:var(--text-muted); font-size:9px; }
.ds-pattern-expandable__panel strong { margin-top:3px; font-size:10px; }

.ds-pattern-upload__drop { display:grid; width:100%; place-items:center; padding:19px 12px; border:1.5px dashed color-mix(in srgb,var(--brand-500) 40%,var(--border)); border-radius:14px; color:var(--text); background:linear-gradient(145deg,color-mix(in srgb,var(--pastel-mint) 30%,var(--surface)),color-mix(in srgb,var(--pastel-sky) 22%,var(--surface))); cursor:pointer; font:inherit; transition:.22s ease; }
.ds-pattern-upload__drop:hover,.ds-pattern-upload__drop.is-dragover { border-color:var(--brand-500); transform:translateY(-2px); box-shadow:0 13px 28px -22px var(--brand-600); }
.ds-pattern-upload__drop small { margin-top:5px; color:var(--text-muted); font-size:9px; }
.ds-pattern-upload__icon { display:grid; width:34px; height:34px; place-items:center; margin-bottom:8px; border-radius:11px; color:white; background:linear-gradient(145deg,var(--brand-400),var(--brand-600)); font-size:18px; font-weight:800; }
.ds-pattern-upload__files { display:grid; gap:7px; margin-top:9px; }
.ds-pattern-upload__file { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px; border:1px solid var(--border); border-radius:11px; background:var(--surface); animation:dsUploadIn .25s ease both; }
@keyframes dsUploadIn { from { opacity:0; transform:scale(.97); } }
.ds-pattern-upload__file strong,.ds-pattern-upload__file small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-upload__file strong { font-size:10px; }
.ds-pattern-upload__file small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.ds-pattern-upload__file button { border:0; color:var(--text-muted); background:transparent; cursor:pointer; font-size:18px; }
.ds-pattern-file-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; color:#a64052; background:var(--pastel-rose); font-size:8px; font-weight:900; }

.ds-pattern-approval { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); }
.ds-pattern-approval__track { display:grid; grid-template-columns:1fr 45px 1fr 45px 1fr; align-items:center; padding:17px; background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-mint) 30%,var(--surface)),color-mix(in srgb,var(--pastel-lilac) 22%,var(--surface))); }
.ds-pattern-approval__step { display:grid; justify-items:center; color:var(--text-muted); text-align:center; }
.ds-pattern-approval__step > span { display:grid; width:30px; height:30px; place-items:center; margin-bottom:6px; border:3px solid var(--surface); border-radius:50%; background:var(--surface-3); box-shadow:0 0 0 1px var(--border); font-size:10px; font-weight:850; }
.ds-pattern-approval__step strong { font-size:10px; }
.ds-pattern-approval__step small { margin-top:3px; font-size:8px; }
.ds-pattern-approval__step.is-done > span { color:white; background:var(--brand-500); }
.ds-pattern-approval__step.is-current { color:var(--brand-700); }
.ds-pattern-approval__step.is-current > span { color:white; background:#8065c8; box-shadow:0 0 0 5px color-mix(in srgb,var(--pastel-lilac) 55%,transparent); }
.ds-pattern-approval__line { height:3px; border-radius:9px; background:var(--border); }
.ds-pattern-approval__line.is-done { background:var(--brand-400); }
.ds-pattern-approval__body { display:grid; grid-template-columns:minmax(190px,1fr) minmax(220px,1fr) auto; align-items:end; gap:13px; padding:15px; }
.ds-pattern-approval__summary { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ds-pattern-approval__summary strong { font-size:11px; }
.ds-pattern-approval__summary small { color:var(--text-muted); font-size:9px; }
.ds-pattern-approval__body label span { display:block; margin-bottom:5px; color:var(--text-muted); font-size:9px; font-weight:750; }
.ds-pattern-approval__body textarea { width:100%; resize:vertical; border:1px solid var(--border); border-radius:10px; padding:9px; color:var(--text); background:var(--surface); font:inherit; font-size:10px; }
.ds-pattern-approval__actions { display:flex; gap:7px; }
.ds-pattern-approval__audit { display:flex; justify-content:space-between; gap:15px; padding:10px 15px; border-top:1px solid var(--border); color:var(--text-muted); background:var(--surface); font-size:9px; }
.ds-pattern-approval__audit.is-updated { animation:dsAuditFlash .55s ease; }
@keyframes dsAuditFlash { 50% { background:var(--pastel-mint); } }

.ds-pattern-import { overflow:hidden; border:1px solid var(--border); border-radius:15px; }
.ds-pattern-import__steps { display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface-2); }
.ds-pattern-import__steps span { padding:11px; color:var(--text-muted); border-bottom:3px solid transparent; text-align:center; font-size:10px; font-weight:750; }
.ds-pattern-import__steps .is-done { color:var(--brand-600); background:color-mix(in srgb,var(--pastel-mint) 30%,transparent); }
.ds-pattern-import__steps .is-active { color:#6a4bb1; border-color:#8065c8; background:color-mix(in srgb,var(--pastel-lilac) 38%,transparent); }
.ds-pattern-import__mapping { display:grid; }
.ds-pattern-import__head,.ds-pattern-import__row { display:grid; grid-template-columns:1fr 1.2fr 1fr 45px; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--border); font-size:10px; }
.ds-pattern-import__head { color:var(--text-muted); background:var(--surface-2); font-size:9px; font-weight:800; }
.ds-pattern-import__row > span { overflow:hidden; color:var(--text-muted); text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-import__row button { padding:7px 9px; border:1px solid var(--border); border-radius:9px; color:var(--brand-700); background:var(--surface); cursor:pointer; font:inherit; font-size:9px; direction:ltr; }
.ds-pattern-import__row i { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; font-style:normal; }
.ds-pattern-import__row i.is-ok { color:#187457; background:var(--pastel-mint); }
.ds-pattern-import__row i.is-warn { color:#a64052; background:var(--pastel-rose); }
.ds-pattern-import__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; color:var(--text-muted); background:var(--surface-2); font-size:10px; }

.ds-pattern-job { --job-progress:68; --job-progress-percent:68%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; padding:16px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--pastel-sky) 28%,var(--surface)),var(--surface)); }
.ds-pattern-job__visual { position:relative; display:grid; width:88px; height:88px; place-items:center; }
.ds-pattern-job__visual span { position:absolute; z-index:1; font-size:15px; font-weight:900; }
.ds-pattern-job__visual svg { width:88px; height:88px; transform:rotate(-90deg); }
.ds-pattern-job__visual circle { fill:none; stroke:var(--surface-3); stroke-width:4; }
.ds-pattern-job__visual .ds-pattern-job__meter { stroke:var(--brand-500); stroke-linecap:round; stroke-dasharray:var(--job-progress) 100; transition:stroke-dasharray .5s ease; }
.ds-pattern-job__content { min-width:0; }
.ds-pattern-job__content > div:first-child { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 9px; }
.ds-pattern-job__content strong { font-size:12px; }
.ds-pattern-job__content small { grid-column:1/-1; color:var(--text-muted); font-size:9px; }
.ds-pattern-job__bar { height:8px; margin-top:12px; overflow:hidden; border-radius:999px; background:var(--surface-3); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 70%,transparent); }
.ds-pattern-job__bar span {
  position:relative;
  display:block;
  width:68%;
  min-width:7px;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-300),var(--brand-500),var(--brand-600));
  box-shadow:0 0 10px color-mix(in srgb,var(--brand-500) 35%,transparent);
  transition:width .5s ease,background .3s ease;
}
.ds-pattern-job__bar span::after {
  content:"";
  position:absolute;
  inset-block:0;
  width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:dsJobShimmer 1.35s ease-in-out infinite;
}
@keyframes dsJobShimmer {
  from { inset-inline-start:-40%; }
  to { inset-inline-start:110%; }
}
.ds-pattern-job.is-paused .ds-pattern-job__bar span::after,
.ds-pattern-job.is-complete .ds-pattern-job__bar span::after { animation-play-state:paused; opacity:0; }
.ds-pattern-job.is-complete .ds-pattern-job__bar span { background:linear-gradient(90deg,#55b98a,var(--brand-500)); }
.ds-pattern-job__content p { margin:8px 0 0; color:var(--text-muted); font-size:9px; }

.ds-pattern-lines { overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.ds-pattern-lines__meta { display:grid; grid-template-columns:150px 150px 1fr; gap:10px; padding:12px; background:var(--surface-2); }
.ds-pattern-lines__meta label span { display:block; margin-bottom:4px; color:var(--text-muted); font-size:9px; }
.ds-pattern-lines__meta input { width:100%; padding:8px 9px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface); font:inherit; font-size:10px; }
.ds-pattern-lines__table { min-width:720px; overflow:auto; }
.ds-pattern-lines__head,.ds-pattern-lines__row { display:grid; grid-template-columns:35px 1.1fr 1.4fr 1fr 1fr 35px; align-items:center; gap:7px; padding:8px 11px; border-bottom:1px solid var(--border); }
.ds-pattern-lines__head { color:var(--text-muted); background:var(--surface-2); font-size:9px; font-weight:800; }
.ds-pattern-lines__row > input,.ds-pattern-lines__row > button[data-ds-account] { min-width:0; padding:8px; border:1px solid transparent; border-radius:8px; color:var(--text); background:transparent; font:inherit; font-size:10px; text-align:start; }
.ds-pattern-lines__row > input:hover,.ds-pattern-lines__row > input:focus,.ds-pattern-lines__row > button[data-ds-account]:hover { border-color:var(--border); background:var(--surface-2); outline:0; }
.ds-pattern-lines__account { width:100%; min-width:0; }
.ds-pattern-lines__account .cbx-input { width:100%; min-width:0; box-sizing:border-box; padding:9px 10px; padding-inline-end:30px; overflow:hidden; border:1px solid transparent; border-radius:8px; color:var(--text); background:transparent; outline:0; text-overflow:ellipsis; font:inherit; font-size:9px; }
.ds-pattern-lines__account .cbx-input:hover,.ds-pattern-lines__account .cbx-input:focus { border-color:var(--border); background:var(--surface-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 45%,transparent); }
.ds-pattern-lines__account .ds-dropdown__trigger { width:100%; min-width:0; justify-content:space-between; border-color:transparent; background:transparent; box-shadow:none; }
.ds-pattern-lines__account .ds-dropdown__trigger:hover,.ds-pattern-lines__account.is-open .ds-dropdown__trigger { border-color:var(--border); background:var(--surface-2); }
.ds-pattern-lines__account .ds-dropdown__value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.ds-pattern-lines__row > input[inputmode="numeric"] { direction:ltr; text-align:end; font-variant-numeric:tabular-nums; }
.ds-pattern-lines__row > button[data-ds-line-remove] { border:0; color:var(--text-muted); background:transparent; cursor:pointer; font-size:17px; }
.ds-pattern-lines__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px; background:var(--surface-2); }
.ds-pattern-lines__totals { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--text-muted); font-size:9px; }
.ds-pattern-lines__totals b { margin-inline-start:4px; color:var(--text); font-size:10px; }
.ds-pattern-lines__totals [data-ds-balance] { padding:5px 8px; border-radius:999px; font-weight:800; }
.ds-pattern-lines__totals .is-balanced { color:#187457; background:var(--pastel-mint); }
.ds-pattern-lines__totals .is-unbalanced { color:#a64052; background:var(--pastel-rose); }

.ds-pattern-report { display:grid; grid-template-columns:165px minmax(300px,1fr) 170px; min-height:310px; overflow:hidden; border:1px solid var(--border); border-radius:15px; }
.ds-pattern-report__fields,.ds-pattern-report__config { display:flex; flex-direction:column; gap:7px; padding:13px; background:var(--surface-2); }
.ds-pattern-report__fields { border-inline-end:1px solid var(--border); }
.ds-pattern-report__config { border-inline-start:1px solid var(--border); }
.ds-pattern-report__fields > strong,.ds-pattern-report__config > strong { margin-bottom:5px; font-size:10px; }
.ds-pattern-report__fields label { display:flex; align-items:center; gap:7px; padding:7px; border-radius:8px; color:var(--text-muted); font-size:9px; cursor:pointer; }
.ds-pattern-report__fields label:has(input:checked) { color:var(--brand-700); background:color-mix(in srgb,var(--pastel-mint) 45%,var(--surface)); font-weight:750; }
.ds-pattern-report__fields input { accent-color:var(--brand-500); }
.ds-pattern-report__canvas { min-width:0; padding:13px; }
.ds-pattern-report__toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.ds-pattern-report__toolbar small,.ds-pattern-report__toolbar strong { display:block; }
.ds-pattern-report__toolbar small { color:var(--text-muted); font-size:8px; }
.ds-pattern-report__toolbar strong { margin-top:3px; font-size:11px; }
.ds-pattern-report__chips { display:flex; flex-wrap:wrap; gap:5px; min-height:36px; padding-block:9px; }
.ds-pattern-report__chips span { padding:5px 8px; border-radius:999px; color:var(--brand-700); background:var(--pastel-mint); font-size:8px; font-weight:750; animation:dsUploadIn .2s ease; }
.ds-pattern-report__preview { display:grid; gap:10px; }
.ds-pattern-report__preview div { display:grid; grid-template-columns:1fr auto; gap:5px 10px; }
.ds-pattern-report__preview small { color:var(--text-muted); font-size:9px; }
.ds-pattern-report__preview strong { font-size:10px; }
.ds-pattern-report__preview span { grid-column:1/-1; width:var(--report-w); height:7px; border-radius:999px; background:linear-gradient(90deg,var(--brand-300),var(--brand-500)); transform-origin:right; animation:dsReportBar .45s ease both; }
@keyframes dsReportBar { from { transform:scaleX(0); } }
.ds-pattern-report__config label { display:grid; gap:4px; margin-top:3px; }
.ds-pattern-report__config label span { color:var(--text-muted); font-size:8px; }
.ds-pattern-report__config .ds-dropdown { width:100%; min-width:0; }
.ds-pattern-report__config .ds-dropdown__trigger { width:100%; min-width:0; justify-content:space-between; padding:8px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface); box-shadow:none; font-size:9px; text-align:start; }
.ds-pattern-report__config .ds-dropdown__value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ds-pattern-inbox { display:grid; grid-template-columns:240px minmax(320px,1fr); min-height:390px; overflow:hidden; border:1px solid color-mix(in srgb,var(--brand-500) 12%,var(--border)); border-radius:18px; background:var(--surface); box-shadow:0 18px 44px color-mix(in srgb,var(--pastel-lilac) 24%,transparent); }
.ds-pattern-inbox__list { padding:9px; border-inline-end:1px solid var(--border); background:linear-gradient(165deg,color-mix(in srgb,var(--pastel-lilac) 25%,var(--surface-2)),color-mix(in srgb,var(--pastel-sky) 16%,var(--surface-2))); }
.ds-pattern-inbox__search { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; margin-bottom:7px; padding:0 10px; border:1px solid var(--border); border-radius:12px; color:var(--text-muted); background:var(--surface); box-shadow:0 5px 14px color-mix(in srgb,var(--pastel-lilac) 18%,transparent); transition:border-color .18s ease,box-shadow .18s ease; }
.ds-pattern-inbox__search:focus-within { border-color:color-mix(in srgb,var(--brand-500) 55%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 42%,transparent); }
.ds-pattern-inbox__search svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ds-pattern-inbox__search input { width:100%; min-width:0; height:42px; padding:0; border:0; color:var(--text); background:transparent; outline:0; font:inherit; font-size:9px; }
.ds-pattern-inbox__search button { width:24px; height:24px; padding:0; border:0; border-radius:7px; color:var(--text-muted); background:var(--surface-2); cursor:pointer; font:inherit; line-height:1; }
.ds-pattern-inbox__empty { margin:14px 5px; padding:16px 8px; border:1px dashed var(--border); border-radius:11px; color:var(--text-muted); background:color-mix(in srgb,var(--surface) 78%,var(--pastel-lilac)); font-size:8px; text-align:center; }
.ds-pattern-inbox__list > button { display:grid; grid-template-columns:auto minmax(0,1fr) 34px; align-items:center; gap:8px; width:100%; padding:9px; border:1px solid transparent; border-radius:11px; color:var(--text); background:transparent; cursor:pointer; font:inherit; text-align:start; }
.ds-pattern-inbox__list > button { transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.ds-pattern-inbox__list > button:hover,.ds-pattern-inbox__list > button.is-active { border-color:color-mix(in srgb,var(--brand-500) 20%,var(--border)); background:var(--surface); box-shadow:0 8px 20px color-mix(in srgb,var(--pastel-sky) 32%,transparent); transform:translateY(-1px); }
.ds-pattern-inbox__list strong,.ds-pattern-inbox__list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-inbox__list strong { font-size:10px; }
.ds-pattern-inbox__list small,.ds-pattern-inbox__list time { margin-top:3px; color:var(--text-muted); font-size:8px; }
.ds-pattern-inbox__thread-meta { display:grid; justify-items:center; align-self:stretch; gap:2px; padding-inline-start:7px; border-inline-start:1px solid color-mix(in srgb,var(--border) 75%,transparent); }
.ds-pattern-inbox__thread-meta time { align-self:end; margin:0; font-size:7px; line-height:1; white-space:nowrap; }
.ds-pattern-inbox__conversation { display:grid; grid-template-rows:auto 1fr auto; min-width:0; }
.ds-pattern-inbox__conversation > header { position:relative; z-index:2; display:flex; min-height:70px; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid color-mix(in srgb,var(--inbox-channel-accent,var(--brand-500)) 18%,var(--border)); background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--inbox-channel-pastel,var(--pastel-mint)) 42%,var(--surface))); box-shadow:0 8px 22px color-mix(in srgb,var(--inbox-channel-pastel,var(--pastel-sky)) 32%,transparent); transition:background .28s ease,border-color .28s ease,box-shadow .28s ease; }
.ds-pattern-inbox__conversation > header > div:not(.ds-dropdown) { flex:1; }
.ds-pattern-inbox__conversation > header strong,.ds-pattern-inbox__conversation > header small { display:block; }
.ds-pattern-inbox__conversation > header strong { font-size:11px; line-height:1.4; }
.ds-pattern-inbox__identity { min-width:0; }
.ds-pattern-inbox__conversation > header small { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:5px; margin-top:5px; padding:3px 7px 3px 4px; border:1px solid color-mix(in srgb,var(--inbox-channel-accent,var(--brand-500)) 16%,var(--border)); border-radius:999px; color:var(--text-muted); background:color-mix(in srgb,var(--surface) 70%,var(--inbox-channel-pastel,var(--pastel-mint))); font-size:8px; line-height:1; transition:background .28s ease,border-color .28s ease; }
.ds-pattern-inbox__conversation > header small span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-pattern-channel { display:inline-grid; flex:0 0 auto; width:20px; height:20px; place-items:center; border-radius:7px; color:#fff; font-style:normal; box-shadow:0 4px 9px color-mix(in srgb,currentColor 22%,transparent); vertical-align:middle; }
.ds-pattern-channel svg { width:13px; height:13px; fill:none; stroke:#fff !important; color:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.15; }
.ds-pattern-channel svg [fill="currentColor"] { fill:#fff !important; stroke:none !important; }
.ds-pattern-inbox__conversation > header .ds-pattern-channel { width:19px; height:19px; border-radius:6px; box-shadow:none; }
.ds-pattern-inbox__conversation > header .ds-pattern-channel svg { width:12px; height:12px; }
.ds-pattern-channel--whatsapp { background:#45b987; }
.ds-pattern-channel--email { background:#6fa9e8; }
.ds-pattern-channel--instagram { background:linear-gradient(135deg,#d889d8,#f39b9b); }
.ds-pattern-inbox[data-channel-theme="whatsapp"] { --inbox-channel-accent:#45b987; --inbox-channel-pastel:var(--pastel-mint); }
.ds-pattern-inbox[data-channel-theme="email"] { --inbox-channel-accent:#6fa9e8; --inbox-channel-pastel:var(--pastel-sky); }
.ds-pattern-inbox[data-channel-theme="instagram"] { --inbox-channel-accent:#d889d8; --inbox-channel-pastel:var(--pastel-rose); }
.ds-pattern-inbox__messages { display:flex; flex-direction:column; gap:12px; padding:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--pastel-sky) 25%,var(--surface)),color-mix(in srgb,var(--pastel-lilac) 13%,var(--surface))); }
.ds-pattern-inbox__messages p { position:relative; max-width:72%; margin:0; padding:24px 13px 10px; border:1px solid color-mix(in srgb,var(--border) 76%,transparent); border-radius:14px; font-size:var(--ds-inbox-message-size,10px); line-height:1.7; box-shadow:0 9px 22px color-mix(in srgb,var(--text) 7%,transparent); animation:dsUploadIn .24s ease both; transition:font-size .18s ease,max-width .18s ease; }
.ds-pattern-inbox__messages p::before { position:absolute; inset-block-start:7px; inset-inline-start:12px; content:attr(data-author); color:var(--text-muted); font-size:7px; font-weight:800; }
.ds-pattern-inbox__messages .is-incoming { align-self:flex-end; border-end-start-radius:4px; background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--pastel-lilac) 18%,var(--surface))); }
.ds-pattern-inbox__messages .is-outgoing { align-self:flex-start; border-end-end-radius:4px; border-color:color-mix(in srgb,var(--brand-500) 18%,var(--border)); color:var(--brand-700); background:linear-gradient(135deg,var(--pastel-mint),color-mix(in srgb,var(--pastel-sky) 28%,var(--pastel-mint))); }
.ds-pattern-inbox__messages time { display:block; margin-top:4px; color:var(--text-muted); font-size:7px; }
.ds-pattern-inbox__composer { display:grid; grid-template-columns:auto 1fr auto; gap:7px; padding:10px; border-top:1px solid var(--border); background:var(--surface); box-shadow:0 -7px 20px color-mix(in srgb,var(--pastel-sky) 14%,transparent); }
.ds-pattern-inbox__composer input { min-width:0; border:0; color:var(--text); background:transparent; outline:0; font:inherit; font-size:10px; }
.ds-pattern-inbox__composer > button { padding:7px 13px; border:0; border-radius:10px; color:var(--brand-700); background:var(--pastel-mint); cursor:pointer; font:inherit; font-size:9px; font-weight:800; box-shadow:0 6px 14px color-mix(in srgb,var(--pastel-mint) 58%,transparent); }
.ds-pattern-inbox .ds-pattern-inbox__more,.ds-pattern-inbox .ds-pattern-inbox__attach { flex:0 0 38px !important; width:38px; min-width:38px; max-width:38px; }
.ds-pattern-inbox .ds-pattern-inbox__more { align-self:center; justify-self:center; margin-inline-start:auto; }
.ds-pattern-inbox__composer .ds-pattern-inbox__attach { align-self:center; justify-self:center; margin:auto; }
.ds-pattern-inbox__text-size { display:flex !important; flex:0 0 auto !important; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 88%,var(--pastel-sky)); }
.ds-pattern-inbox__text-size button { display:grid; width:27px; height:27px; padding:0; place-items:center; border:0; border-radius:7px; color:var(--brand-700); background:transparent; cursor:pointer; font:inherit; font-size:15px; font-weight:800; transition:background-color .16s ease,color .16s ease; }
.ds-pattern-inbox__text-size button:hover:not(:disabled) { background:var(--pastel-mint); }
.ds-pattern-inbox__text-size button:disabled { color:var(--text-muted); cursor:not-allowed; opacity:.38; }
.ds-pattern-inbox__text-size output { min-width:32px; color:var(--text-muted); font-size:7px; font-weight:800; text-align:center; }
.ds-pattern-inbox__more .ds-dropdown__trigger,.ds-pattern-inbox__attach .ds-dropdown__trigger { display:grid; width:38px; min-width:38px; height:38px; padding:0; place-items:center; justify-content:center; border:1px solid var(--border); border-radius:11px; color:var(--brand-700); background:color-mix(in srgb,var(--inbox-channel-pastel,var(--pastel-mint)) 55%,var(--surface)); box-shadow:0 5px 13px color-mix(in srgb,var(--inbox-channel-pastel,var(--pastel-mint)) 40%,transparent); transition:transform .18s ease,box-shadow .18s ease,background .28s ease; }
.ds-pattern-inbox__more .ds-dropdown__trigger:hover,.ds-pattern-inbox__attach .ds-dropdown__trigger:hover { transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb,var(--pastel-mint) 58%,transparent); }
.ds-pattern-inbox__more .ds-dropdown__value,.ds-pattern-inbox__attach .ds-dropdown__value { display:grid; width:20px; height:20px; margin:0; padding:0; place-items:center; justify-self:center; line-height:0; text-align:center; }
.ds-pattern-inbox__more .ds-dropdown__value svg,.ds-pattern-inbox__attach .ds-dropdown__value svg { display:block; width:18px; height:18px; margin:auto; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.ds-pattern-inbox__attach-menu .ds-action-menu__copy small { display:none; }
.ds-pattern-inbox__attach-menu.ds-dropdown__menu--action .ds-dropdown__option { min-height:42px; }
.ds-pattern-inbox__action-status { padding:5px 8px; border-radius:999px; color:var(--brand-700); background:var(--pastel-lemon); font-size:7px; font-weight:800; animation:dsUploadIn .2s ease both; }

.ds-async-demo { margin-top:18px; overflow:hidden; padding:0; }
.ds-async-demo__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--border); }
.ds-async-demo__head h3,.ds-async-demo__head p { margin:0; }
.ds-async-demo__head h3 { font-size:14px; }
.ds-async-demo__head p { margin-top:5px; color:var(--text-muted); font-size:10px; }
.ds-async-demo__head code { color:var(--text-muted); font-size:9px; direction:ltr; }
.ds-async-demo__scenarios { display:flex; flex-wrap:wrap; gap:7px; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.ds-async-demo__scenarios button { padding:7px 11px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); background:var(--surface); cursor:pointer; font:inherit; font-size:9px; font-weight:700; transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease; }
.ds-async-demo__scenarios button:hover,.ds-async-demo__scenarios button.is-active { border-color:color-mix(in srgb,var(--brand-500) 42%,var(--border)); color:var(--brand-700); background:var(--pastel-mint); transform:translateY(-1px); }
.ds-async-state { min-height:250px; padding:22px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--pastel-sky) 15%,var(--surface))); }
.ds-async-state__center { display:grid; min-height:205px; place-items:center; text-align:center; }
.ds-async-state__content { max-width:460px; }
.ds-async-state__icon { display:grid; width:58px; height:58px; margin:0 auto 12px; place-items:center; border-radius:18px; color:var(--brand-700); background:var(--async-tone,var(--pastel-mint)); box-shadow:0 12px 28px color-mix(in srgb,var(--async-tone,var(--pastel-mint)) 70%,transparent); font-size:25px; }
.ds-async-state__content h4,.ds-async-state__content p { margin:0; }
.ds-async-state__content h4 { font-size:15px; }
.ds-async-state__content p { margin-top:7px; color:var(--text-muted); font-size:10px; line-height:1.8; }
.ds-async-state__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.ds-async-state__actions button { min-height:38px; padding:8px 15px; border:1px solid color-mix(in srgb,var(--brand-500) 35%,var(--border)); border-radius:10px; color:var(--brand-700); background:color-mix(in srgb,var(--async-tone,var(--pastel-mint)) 72%,var(--surface)); cursor:pointer; font:inherit; font-size:9px; font-weight:800; }
.ds-async-state__skeleton { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-async-state__skeleton article { min-height:170px; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.ds-async-state__shimmer { position:relative; overflow:hidden; border-radius:7px; background:var(--surface-2); }
.ds-async-state__shimmer::after { position:absolute; inset:0; content:""; background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.85) 50%,transparent 75%); transform:translateX(-100%); animation:dsAsyncShimmer 1.25s infinite; }
.ds-async-state__shimmer.is-title { width:56%; height:14px; }
.ds-async-state__shimmer.is-line { height:9px; margin-top:12px; }
.ds-async-state__shimmer.is-line:last-child { width:72%; }
.ds-loading-skeleton { display:grid; gap:18px; min-height:460px; }
.ds-loading-skeleton--report { align-content:start; padding-block:8px; }
.ds-loading-skeleton__hero { display:grid; align-content:center; gap:13px; min-height:165px; padding:28px 32px; border:1px solid var(--border); border-radius:24px; background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-mint) 26%,var(--surface)),color-mix(in srgb,var(--pastel-sky) 25%,var(--surface))); }
.ds-loading-skeleton__hero .is-kicker { width:18%; min-width:92px; height:11px; }
.ds-loading-skeleton__hero .is-heading { width:min(430px,72%); height:28px; }
.ds-loading-skeleton__hero .is-copy { width:min(650px,88%); height:12px; }
.ds-loading-skeleton__kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ds-loading-skeleton__kpis article { min-height:132px; }
.ds-loading-skeleton__panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ds-loading-skeleton__panels article { min-height:220px; }
.ds-loading-skeleton__kpis article,.ds-loading-skeleton__panels article { padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.ds-loading-skeleton--kanban { align-content:start; min-width:0; }
.ds-loading-skeleton__kanban { display:grid; grid-template-columns:repeat(4,minmax(230px,1fr)); gap:14px; overflow:hidden; }
.ds-loading-skeleton__kanban-column { display:grid; align-content:start; gap:12px; min-height:390px; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface-2); }
.ds-loading-skeleton__kanban-column > .is-title { width:48%; margin-block:4px 6px; }
.ds-loading-skeleton__kanban-column > article { min-height:92px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.ds-loading-skeleton--table { align-content:start; }
.ds-loading-skeleton__toolbar { display:grid; grid-template-columns:minmax(220px,1fr) repeat(3,minmax(86px,130px)); gap:10px; align-items:center; padding:14px 16px; border:1px solid var(--border); border-radius:16px 16px 0 0; background:var(--surface); }
.ds-loading-skeleton__toolbar>.is-line { width:100%; height:38px; border-radius:10px; }
.ds-loading-skeleton__table { display:grid; overflow:hidden; border:1px solid var(--border); border-top:0; border-radius:0 0 16px 16px; background:var(--surface); }
.ds-loading-skeleton__table-row { display:grid; grid-template-columns:70px 1.35fr 1fr 1fr .9fr 110px; gap:16px; align-items:center; min-height:58px; padding:10px 16px; border-top:1px solid var(--border-soft,var(--border)); }
.ds-loading-skeleton__table-row>.is-line { width:100%; height:11px; margin:0; }
@media (max-width:960px) { .ds-loading-skeleton__kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) { .ds-loading-skeleton__kanban { grid-template-columns:repeat(2,minmax(230px,1fr)); } }
@media (max-width:640px) { .ds-loading-skeleton__hero { min-height:140px; padding:22px; } .ds-loading-skeleton__kpis,.ds-loading-skeleton__panels,.ds-loading-skeleton__kanban { grid-template-columns:1fr; } }
@media (max-width:760px) { .ds-loading-skeleton__toolbar { grid-template-columns:1fr 90px; } .ds-loading-skeleton__toolbar>:nth-child(n+3) { display:none; } .ds-loading-skeleton__table-row { grid-template-columns:52px 1.4fr 1fr; } .ds-loading-skeleton__table-row>:nth-child(n+4) { display:none; } }
@media (prefers-reduced-motion:reduce) { .ds-async-state__shimmer::after { animation:none; } }
.ds-async-state__partial { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-async-state__partial article { padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 8px 20px color-mix(in srgb,var(--pastel-sky) 18%,transparent); }
.ds-async-state__partial strong,.ds-async-state__partial small { display:block; }
.ds-async-state__partial strong { margin-top:8px; font-size:18px; }
.ds-async-state__partial small { color:var(--text-muted); font-size:9px; }
.ds-async-state__notice { grid-column:1/-1; padding:10px 12px; border:1px solid color-mix(in srgb,#d8a33a 35%,var(--border)); border-radius:10px; color:#7b5b18; background:var(--pastel-lemon); font-size:9px; }
.ds-async-state__notice button { margin-inline-start:8px; border:0; color:inherit; background:transparent; cursor:pointer; font:inherit; font-weight:900; text-decoration:underline; }
@keyframes dsAsyncShimmer { to { transform:translateX(100%); } }

.ds-smart-form { position:relative; padding:18px; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--pastel-mint) 12%,var(--surface))); }
.ds-smart-form__notice { display:flex; align-items:center; gap:9px; margin:15px 0 0; padding:11px 13px; border:1px solid color-mix(in srgb,var(--brand-500) 22%,var(--border)); border-radius:11px; color:var(--brand-700); background:var(--pastel-mint); box-shadow:0 8px 24px color-mix(in srgb,var(--brand-500) 10%,transparent); font-size:13px; line-height:1.7; font-weight:800; animation:dsFormNoticeIn .2s ease-out; }
.ds-smart-form__notice[hidden] { display:none; }
.ds-smart-form__notice::before { display:grid; flex:0 0 24px; width:24px; height:24px; place-items:center; border-radius:50%; color:#fff; background:var(--brand-500); content:"✓"; font-size:13px; line-height:1; }
.ds-smart-form__notice.is-error { color:#96384b; background:var(--pastel-rose); }
.ds-smart-form__notice.is-error::before { background:#c64d65; content:"!"; }
.ds-smart-form__notice.is-warning { color:#745412; background:var(--pastel-lemon); }
.ds-smart-form__notice.is-warning::before { color:#694c0e; background:#f0c35d; content:"!"; }
.ds-smart-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px; }
.ds-smart-field { display:grid; align-content:start; gap:7px; color:var(--text-muted); font-size:13px; line-height:1.6; font-weight:700; }
.ds-smart-field--wide { grid-column:1/-1; }
.ds-smart-field > span { display:flex; align-items:center; gap:7px; }
.ds-smart-field b,.ds-smart-field i { padding:3px 7px; border-radius:999px; font-size:11px; line-height:1.4; font-style:normal; }
.ds-smart-field b { color:#96384b; background:var(--pastel-rose); }
.ds-smart-field i { color:var(--text-muted); background:var(--surface-2); }
.ds-smart-field input,.ds-smart-field textarea { width:100%; min-height:48px; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:11px; color:var(--text); background:var(--surface); outline:0; resize:vertical; font-family:inherit; font-size:14px; font-weight:500; line-height:1.7; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.ds-smart-field textarea { min-height:76px; line-height:1.8; }
.ds-smart-field input:focus,.ds-smart-field textarea:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 62%,transparent); }
.ds-smart-field input[readonly] { color:var(--text-muted); background:color-mix(in srgb,var(--pastel-sky) 18%,var(--surface-2)); cursor:default; }
.ds-smart-field input:disabled { color:var(--text-muted); background:var(--surface-2); cursor:not-allowed; opacity:.65; }
.ds-smart-field.is-invalid input,.ds-smart-field.is-invalid textarea { border-color:#df7585; background:color-mix(in srgb,var(--pastel-rose) 24%,var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-rose) 42%,transparent); }
.ds-smart-field [data-ds-field-error] { min-height:18px; color:#a33c50; font-size:12px; line-height:1.6; }
.ds-smart-field > small:not([data-ds-field-error]) { color:var(--text-muted); font-size:12px; line-height:1.6; font-weight:500; }
.ds-smart-form__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid var(--border); }
.ds-smart-form__footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.ds-smart-form__footer .btn { min-height:42px; font-size:13px; }
.ds-smart-form__dirty { color:#8a6318; font-size:12px; font-weight:900; white-space:nowrap; }
.ds-smart-form.is-submitting { pointer-events:none; opacity:.78; }
.ds-smart-form.is-submitting [data-ds-form-submit="success"]::before { display:inline-block; width:11px; height:11px; margin-inline-end:6px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; content:""; vertical-align:-2px; animation:dsFormSpin .7s linear infinite; }
.ds-smart-form__confirm { width:min(440px,calc(100vw - 32px)); padding:20px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px color-mix(in srgb,var(--text) 25%,transparent); text-align:start; }
.ds-smart-form__confirm::backdrop { background:rgba(24,31,43,.32); backdrop-filter:blur(3px); }
.ds-smart-form__confirm strong { font-size:14px; }
.ds-smart-form__confirm p { margin:8px 0 16px; color:var(--text-muted); font-size:13px; line-height:1.8; }
.ds-smart-form__confirm div { display:flex; justify-content:flex-end; gap:8px; }
.ds-sensitive-action { display:grid; gap:14px; padding:18px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb,var(--pastel-rose) 8%,var(--surface)); }
.ds-sensitive-action__record { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.ds-sensitive-action__record span:nth-child(2) { display:grid; gap:3px; }
.ds-sensitive-action__record strong { color:var(--text); font-size:14px; }
.ds-sensitive-action__record small { color:var(--text-muted); font-size:12px; }
.ds-sensitive-action__guidance { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:10px; color:#705416; background:var(--pastel-lemon); font-size:12px; line-height:1.7; }
.ds-sensitive-action__guidance strong { white-space:nowrap; }
.ds-sensitive-action__buttons { display:flex; flex-wrap:wrap; gap:8px; }
.ds-sensitive-action__buttons [hidden] { display:none; }
.ds-sensitive-action__api-error { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid #f3b7bd; border-radius:16px; color:#8f3340; background:#fff1f2; }
.ds-sensitive-action__api-error[hidden] { display:none; }
.ds-sensitive-action__api-error > span { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; color:#fff; background:#d85f70; font-weight:800; }
.ds-sensitive-action__api-error div { display:grid; gap:3px; }
.ds-sensitive-action__api-error small { color:#8c5d64; }
.ds-sensitive-action__audit { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.ds-sensitive-action__audit > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.ds-sensitive-action__audit > header small { color:var(--text-muted); }
.ds-sensitive-action__audit ol { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.ds-sensitive-action__audit li { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); }
.ds-sensitive-action__audit li:last-child { border-bottom:0; }
.ds-sensitive-action__audit li div { display:grid; gap:2px; }
.ds-sensitive-action__audit li small { color:var(--text-muted); }
.ds-sensitive-action__audit-icon { display:grid; width:28px; height:28px; place-items:center; flex:0 0 auto; border-radius:50%; color:#176b62; background:var(--pastel-mint); font-weight:800; }
.ds-page-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:20px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-sky) 22%,var(--surface)),color-mix(in srgb,var(--pastel-mint) 16%,var(--surface))); box-shadow:0 16px 38px -30px rgba(15,23,42,.35); }
.ds-page-header__main { display:grid; gap:14px; min-width:0; }
.ds-page-header__breadcrumb { display:flex; flex-wrap:wrap; gap:7px; align-items:center; color:var(--text-muted); font-size:12px; }
.ds-page-header__breadcrumb a { color:var(--brand-600); text-decoration:none; }
.ds-page-header__title { display:flex; align-items:center; gap:12px; min-width:0; }
.ds-page-header__title > div { display:grid; gap:4px; min-width:0; }
.ds-page-header__title > div > div { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.ds-page-header__title h4 { margin:0; color:var(--text); font-size:21px; line-height:1.4; }
.ds-page-header__title p { margin:0; color:var(--text-muted); font-size:12px; }
.ds-page-header__meta { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0; }
.ds-page-header__meta div { display:grid; gap:2px; }
.ds-page-header__meta dt { color:var(--text-muted); font-size:11px; }
.ds-page-header__meta dd { margin:0; color:var(--text); font-size:12px; font-weight:700; }
.ds-page-header__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ds-page-header__actions .ds-dropdown { min-width:150px; }
.ds-sensitive-action.is-removed .ds-sensitive-action__record { opacity:.55; filter:grayscale(.25); }
.ds-sensitive-modal { display:grid; gap:14px; }
.ds-sensitive-modal__warning { display:flex; gap:10px; padding:12px; border:1px solid color-mix(in srgb,#d4576d 28%,var(--border)); border-radius:11px; color:#873548; background:color-mix(in srgb,var(--pastel-rose) 45%,var(--surface)); font-size:12px; line-height:1.8; }
.ds-sensitive-modal__warning b { font-size:18px; }
.ds-sensitive-modal label { display:grid; gap:7px; color:var(--text-muted); font-size:12px; font-weight:800; }
.ds-sensitive-modal textarea { min-height:86px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; color:var(--text); background:var(--surface); font:inherit; font-size:13px; resize:vertical; outline:0; }
.ds-sensitive-modal textarea:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 55%,transparent); }
.ds-sensitive-modal__check { display:flex !important; grid-template-columns:none; align-items:center; gap:8px !important; color:var(--text) !important; cursor:pointer; }
.ds-sensitive-modal__check input { width:18px; height:18px; cursor:pointer; accent-color:var(--brand-500); }
.ds-sensitive-modal__error { color:#a33c50; font-size:12px; font-weight:800; }
.ds-sensitive-modal__error[hidden] { display:none; }

@media (max-width:620px) {
  .ds-smart-form__grid { grid-template-columns:1fr; }
  .ds-smart-field--wide { grid-column:auto; }
  .ds-smart-form__footer { align-items:stretch; flex-direction:column; }
  .ds-smart-form__footer > div { justify-content:stretch; }
  .ds-smart-form__footer .btn { flex:1; }
  .ds-sensitive-action__record { grid-template-columns:auto minmax(0,1fr); }
  .ds-sensitive-action__record > :last-child { grid-column:2; justify-self:start; }
  .ds-sensitive-action__guidance { align-items:flex-start; flex-direction:column; }
  .ds-sensitive-action__api-error { grid-template-columns:auto minmax(0,1fr); }
  .ds-sensitive-action__api-error .btn { grid-column:1 / -1; }
  .ds-page-header { grid-template-columns:1fr; align-items:stretch; }
  .ds-page-header__actions { justify-content:stretch; }
  .ds-page-header__actions > * { flex:1 1 150px; }
}

@media (prefers-reduced-motion:reduce) {
  .ds-smart-form__notice { animation:none; }
  .ds-smart-form.is-submitting [data-ds-form-submit="success"]::before { animation:none; }
}
@keyframes dsFormSpin { to { transform:rotate(360deg); } }
@keyframes dsFormNoticeIn { from { opacity:0; transform:translateY(5px); } }

.ds-pattern-schedule { overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:0 14px 35px color-mix(in srgb,var(--pastel-sky) 20%,transparent); }
.ds-pattern-schedule > header { display:flex; align-items:center; justify-content:center; gap:16px; padding:11px; border-bottom:1px solid var(--border); background:var(--surface-2); text-align:center; }
.ds-pattern-schedule > header button { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface); cursor:pointer; font-size:18px; }
.ds-pattern-schedule > header strong,.ds-pattern-schedule > header small { display:block; }
.ds-pattern-schedule > header strong { font-size:11px; }
.ds-pattern-schedule > header small { margin-top:3px; color:var(--text-muted); font-size:8px; }
.ds-pattern-schedule__grid { display:grid; grid-template-columns:64px repeat(7,minmax(120px,1fr)); min-width:960px; height:620px; overflow:auto; scrollbar-gutter:stable; }
.ds-pattern-schedule__time { position:sticky; inset-inline-start:0; z-index:4; display:grid; grid-template-rows:44px repeat(19,46px); min-height:918px; color:var(--text-muted); background:color-mix(in srgb,var(--pastel-sky) 18%,var(--surface-2)); font-size:9px; text-align:center; box-shadow:-5px 0 12px color-mix(in srgb,var(--text) 5%,transparent); }
.ds-pattern-schedule__time strong,.ds-pattern-schedule__time span { display:flex; align-items:flex-start; justify-content:center; padding-top:6px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); }
.ds-pattern-schedule__time strong { align-items:center; padding-top:0; color:var(--text); font-size:8px; }
.ds-pattern-schedule__day { position:relative; min-height:918px; border-inline-start:1px solid var(--border); background:repeating-linear-gradient(to bottom,var(--surface) 0,var(--surface) 45px,color-mix(in srgb,var(--border) 82%,transparent) 46px); background-position:0 44px; }
.ds-pattern-schedule__day > strong { position:sticky; inset-block-start:0; z-index:3; display:flex; height:44px; align-items:center; justify-content:center; gap:5px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--pastel-lilac) 14%,var(--surface-2)); font-size:10px; box-shadow:0 5px 12px color-mix(in srgb,var(--text) 4%,transparent); }
.ds-pattern-schedule__day > strong i { color:var(--text-muted); font-style:normal; }
.ds-pattern-schedule__day > button { position:absolute; z-index:1; inset-inline:7px; top:calc(44px + var(--event-top,0px)); min-height:34px; height:var(--event-height,46px); overflow:hidden; padding:8px 9px; border:1px solid transparent; border-inline-start-width:4px; border-radius:10px; color:var(--text); cursor:pointer; font:inherit; font-size:9px; font-weight:900; line-height:1.45; text-align:start; box-shadow:0 7px 16px color-mix(in srgb,var(--text) 7%,transparent); transition:transform .18s ease,box-shadow .18s ease; }
.ds-pattern-schedule__day > button:hover { z-index:5; overflow:visible; transform:translateY(-2px); box-shadow:0 12px 24px color-mix(in srgb,var(--text) 12%,transparent); }
.ds-pattern-schedule__day > button small,.ds-pattern-schedule__day > button em { display:block; margin-top:2px; font-size:7px; font-style:normal; font-weight:600; }
.ds-pattern-schedule__day > button em { opacity:.72; }
/* Day variant (approved 1405/07/10): the same grid with one day column, for a single-day view. */
.ds-pattern-schedule--day .ds-pattern-schedule__grid { grid-template-columns:64px minmax(0,1fr); min-width:0; }
/* Drag to move and resize (approved 1405/07/10, DsScheduleDrag). Only blocks marked
   data-ds-schedule-drag are movable; the bottom handle changes the duration. */
.ds-pattern-schedule__day > button[data-ds-schedule-drag] { cursor:grab; touch-action:none; }
.ds-pattern-schedule__day > button[data-ds-schedule-drag]:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }
.ds-pattern-schedule__day > button.is-dragging { z-index:6; cursor:grabbing; opacity:.92; transform:none; box-shadow:0 14px 28px color-mix(in srgb,var(--text) 18%,transparent); }
.ds-pattern-schedule__day > button.is-saving { opacity:.6; pointer-events:none; }
.ds-pattern-schedule__resize { position:absolute; inset-inline:8px; inset-block-end:0; height:8px; border-radius:0 0 8px 8px; cursor:ns-resize; touch-action:none; }
.ds-pattern-schedule__resize::after { content:''; position:absolute; inset-inline:35%; inset-block-end:2px; height:3px; border-radius:999px; background:color-mix(in srgb,var(--text) 28%,transparent); }
.ds-pattern-schedule__day.is-drop-target { background-color:color-mix(in srgb,var(--pastel-mint) 22%,var(--surface)); }
.ds-pattern-schedule__drag-label { position:absolute; inset-inline-end:6px; inset-block-start:-22px; padding:2px 7px; border-radius:7px; color:var(--surface); background:var(--text); font-size:9px; font-weight:800; white-space:nowrap; pointer-events:none; }
.ds-pattern-schedule__day > button.is-mint { background:var(--pastel-mint); }
.ds-pattern-schedule__day > button.is-sky { background:var(--pastel-sky); }
.ds-pattern-schedule__day > button.is-rose { background:var(--pastel-rose); }
.ds-pattern-schedule__day > button.is-lilac { background:var(--pastel-lilac); }
.ds-pattern-schedule__day > button.is-conflict { z-index:2; inset-inline-start:34%; border-color:#e87888; color:#96384b; background:color-mix(in srgb,var(--pastel-rose) 88%,var(--surface)); box-shadow:0 7px 15px -10px #a64052; }
.ds-pattern-schedule__empty { position:absolute; inset-block-start:62px; inset-inline:10px; padding:14px 8px; border:1px dashed var(--border); border-radius:10px; color:var(--text-muted); background:color-mix(in srgb,var(--surface-2) 70%,transparent); font-size:8px; text-align:center; }
.ds-pattern-schedule > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-top:1px solid var(--border); color:var(--text-muted); background:var(--surface-2); font-size:9px; }
.ds-pattern-schedule__legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px; }
.ds-pattern-schedule__legend span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ds-pattern-schedule__legend i { width:9px; height:9px; border-radius:3px; }
.ds-pattern-schedule__legend i.is-mint { background:var(--pastel-mint); }
.ds-pattern-schedule__legend i.is-sky { background:var(--pastel-sky); }
.ds-pattern-schedule__legend i.is-lilac { background:var(--pastel-lilac); }
.ds-pattern-schedule__legend i.is-rose { background:var(--pastel-rose); }
.is-conflict-dot { display:inline-block; width:7px; height:7px; margin-inline-end:4px; border-radius:50%; background:#e87888; }
.ds-pattern-schedule__dialog { width:min(920px,calc(100vw - 40px)); max-width:none; padding:0; overflow:visible; border:1px solid var(--border); border-radius:20px; color:var(--text); background:var(--surface); box-shadow:0 28px 75px color-mix(in srgb,var(--text) 22%,transparent); }
.ds-pattern-schedule__dialog::backdrop { background:color-mix(in srgb,#172033 38%,transparent); backdrop-filter:blur(3px); }
.ds-pattern-schedule__dialog form { padding:20px 22px; overflow:visible; border-radius:inherit; }
.ds-pattern-schedule__dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ds-pattern-schedule__dialog header strong,.ds-pattern-schedule__dialog header small { display:block; }
.ds-pattern-schedule__dialog header strong { font-size:15px; }
.ds-pattern-schedule__dialog header small { margin-top:4px; color:var(--text-muted); font-size:9px; }
.ds-pattern-schedule__dialog header button { display:grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; font-size:20px; }
.ds-pattern-schedule__dialog label { display:grid; gap:6px; color:var(--text-muted); font-size:9px; font-weight:700; }
.ds-pattern-schedule__dialog [hidden] { display:none !important; }
.ds-pattern-schedule__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.ds-pattern-schedule__dialog input,.ds-pattern-schedule__dialog textarea { width:100%; min-height:44px; box-sizing:border-box; padding:9px 11px; border:1px solid var(--border); border-radius:11px; color:var(--text); background:var(--surface-2); outline:0; resize:vertical; font:inherit; }
.ds-pattern-schedule__dialog input[name="date"] { padding-left:42px; font-variant-numeric:tabular-nums; }
.ds-pattern-schedule__dialog textarea { min-height:76px; line-height:1.8; }
.ds-pattern-schedule__dialog input:focus,.ds-pattern-schedule__dialog textarea:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 65%,transparent); }
.ds-pattern-schedule__time-select .ds-dropdown__trigger { min-height:44px; padding:9px 11px; border-radius:11px; background:var(--surface-2); font-size:11px; font-variant-numeric:tabular-nums; }
.ds-pattern-schedule__time-select .ds-dropdown__value { display:flex; align-items:center; gap:7px; direction:ltr; font-weight:800; }
.ds-pattern-schedule__time-select .ds-dropdown__value::before { content:"◷"; color:var(--brand-500); font-size:17px; font-weight:400; }
.ds-pattern-schedule__time-select .ds-dropdown__option { justify-content:center; direction:ltr; font-variant-numeric:tabular-nums; }
.ds-pattern-schedule__form-row { display:grid; grid-column:1/-1; grid-template-columns:1.5fr 1fr 1fr; gap:10px; }
.ds-pattern-schedule__form-row--meta { grid-template-columns:1fr 1.5fr; }
.ds-pattern-schedule__form-row--meta .ds-dropdown__trigger { min-height:44px; border-radius:11px; background:var(--surface-2); }
.ds-pattern-schedule__attendees .ds-dropdown__value { max-width:230px; }
.ds-pattern-people { position:relative; }
.ds-pattern-people__control { display:flex; min-height:44px; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); transition:border-color .18s ease,box-shadow .18s ease; }
.ds-pattern-people__control:focus-within { border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 65%,transparent); }
.ds-pattern-people__chips { display:flex; flex-wrap:wrap; gap:4px; }
.ds-pattern-people__chip { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:0; border-radius:999px; color:var(--brand-700); background:var(--pastel-mint); cursor:pointer; font:inherit; font-size:8px; font-weight:800; }
.ds-pattern-people__chip::after { content:"×"; color:var(--text-muted); font-size:11px; }
.ds-pattern-schedule__dialog .ds-pattern-people__search { flex:1; min-width:100px; min-height:30px; padding:2px 4px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.ds-pattern-people__menu { position:absolute; z-index:10070; inset:calc(100% + 6px) 0 auto; display:grid; gap:4px; padding:7px; border:1px solid color-mix(in srgb,var(--brand-500) 45%,var(--border)); border-radius:12px; background:var(--surface); box-shadow:0 18px 42px color-mix(in srgb,var(--text) 18%,transparent); }
.ds-pattern-people__option { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:0; border-radius:9px; color:var(--text); background:transparent; cursor:pointer; font:inherit; font-size:9px; font-weight:700; text-align:start; }
.ds-pattern-people__option:hover,.ds-pattern-people__option.is-selected { color:var(--brand-700); background:var(--pastel-mint); }
.ds-pattern-people__option i { display:grid; width:20px; height:20px; place-items:center; border-radius:6px; color:var(--surface); background:var(--brand-500); font-style:normal; font-size:8px; }
.ds-pattern-people__empty { padding:12px; color:var(--text-muted); font-size:8px; text-align:center; }
.ds-pattern-schedule__mode { display:flex; align-items:center; gap:7px; margin:0; padding:0; border:0; }
.ds-pattern-schedule__mode legend { margin-inline-end:5px; color:var(--text-muted); font-size:9px; font-weight:800; }
.ds-pattern-schedule__mode label { position:relative; display:block; cursor:pointer; }
.ds-pattern-schedule__mode input { position:absolute; width:1px; min-height:1px; opacity:0; }
.ds-pattern-schedule__mode span { display:block; min-width:78px; padding:9px 14px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); background:var(--surface-2); text-align:center; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; }
.ds-pattern-schedule__mode input:checked + span { border-color:color-mix(in srgb,var(--brand-500) 55%,var(--border)); color:var(--brand-700); background:color-mix(in srgb,var(--pastel-mint) 72%,var(--surface)); transform:translateY(-1px); }
.ds-pattern-schedule__mode input:focus-visible + span { box-shadow:0 0 0 3px color-mix(in srgb,var(--pastel-mint) 65%,transparent); }
.ds-pattern-schedule__error { margin:10px 0 0; padding:8px 10px; border-radius:9px; color:#96384b; background:var(--pastel-rose); font-size:9px; }
.ds-pattern-schedule__dialog form > footer { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

@media (max-height:680px) and (min-width:721px) {
  .ds-pattern-schedule__dialog form { max-height:calc(100vh - 36px); overflow:auto; }
}

@media (max-width:900px) {
  /* minmax(0,…) like the desktop columns: a wide child (a settings strip, a
     long line) must not stretch the column past the screen. */
  .ds-pattern-grid { grid-template-columns:minmax(0,1fr); }
  .ds-pattern--wide { grid-column:auto; }
  .ds-pattern-access { grid-template-columns:1fr; }
  .ds-pattern-master-detail { grid-template-columns:1fr; }
  .ds-pattern-master-detail__list { border-inline-end:0; border-bottom:1px solid var(--border); }
  .ds-pattern-approval__body { grid-template-columns:1fr; }
  .ds-pattern-approval__actions { justify-content:flex-end; }
  .ds-pattern-job { grid-template-columns:auto 1fr; }
  .ds-pattern-job > .btn { grid-column:1/-1; }
  .ds-pattern-report { grid-template-columns:145px minmax(300px,1fr); overflow:auto; }
  .ds-pattern-report__config { grid-column:1/-1; flex-direction:row; border-top:1px solid var(--border); border-inline-start:0; }
  .ds-pattern-report__config > strong { display:none; }
  .ds-pattern-report__config label { flex:1; }
  .ds-pattern-inbox { grid-template-columns:210px minmax(320px,1fr); overflow:auto; }
}
@media (max-width:620px) {
  .ds-async-demo__head { display:block; }
  .ds-async-demo__head code { display:block; margin-top:8px; }
  .ds-async-state__skeleton,.ds-async-state__partial { grid-template-columns:1fr; }
  .ds-pattern-master-detail__detail { padding:15px; }
  .ds-pattern-detail-facts { grid-template-columns:1fr; }
  .ds-pattern-approval__track { grid-template-columns:1fr; gap:7px; }
  .ds-pattern-approval__line { width:3px; height:16px; margin:auto; }
  .ds-pattern-import { overflow:auto; }
  .ds-pattern-import__steps,.ds-pattern-import__mapping,.ds-pattern-import__foot { min-width:560px; }
  .ds-pattern-job { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .ds-pattern-job__content > div:first-child { justify-content:center; }
  .ds-pattern-lines { overflow:auto; }
  .ds-pattern-lines__meta { grid-template-columns:1fr; min-width:560px; }
  .ds-pattern-lines__foot { min-width:700px; }
  .ds-pattern-report,.ds-pattern-inbox { min-width:680px; }
  .ds-pattern-schedule__dialog { width:min(560px,calc(100vw - 18px)); }
  .ds-pattern-schedule__dialog form { max-height:calc(100vh - 24px); padding:15px; overflow:auto; }
  .ds-pattern-schedule__fields { grid-template-columns:1fr; }
  .ds-pattern-schedule__form-row,.ds-pattern-schedule__form-row--meta { grid-column:auto; grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .ds-async-state__shimmer::after { animation:none; }
  .ds-pattern-master-detail__item,.ds-pattern-expandable__chevron,.ds-pattern-expandable__panel,.ds-pattern-upload__drop,.ds-pattern-job__visual .ds-pattern-job__meter,.ds-pattern-job__bar span { transition:none; }
  .ds-pattern-job__bar span::after { animation:none; }
  .ds-pattern-report__preview span { animation:none; }
  .ds-pattern-master-detail__detail.is-changing,.ds-pattern-upload__file,.ds-pattern-approval__audit.is-updated { animation:none; }
}
.rich-page > [hidden],
.crp-page > [hidden],
.crm-report-page > [hidden],
.crm-data-quality-page > [hidden],
[data-behavior-report] > [hidden],
[data-section][hidden] {
  display: none !important;
}
.ds-pattern-inbox{grid-template-columns:minmax(280px,330px) minmax(420px,1fr);min-height:520px}
.ds-pattern-inbox__search input{height:46px;font-size:15px}
.ds-pattern-inbox__empty{padding:18px 10px;font-size:14px;line-height:1.7}
.ds-pattern-inbox__list strong{font-size:15px;line-height:1.55}
.ds-pattern-inbox__list small,.ds-pattern-inbox__list time{font-size:13px;line-height:1.55}
.ds-pattern-inbox__thread-meta time{font-size:11px;line-height:1.35}
.ds-pattern-inbox__conversation>header strong{font-size:16px;line-height:1.5}
.ds-pattern-inbox__conversation>header small{padding:4px 8px;font-size:12px;line-height:1.2}
.ds-pattern-inbox__messages{gap:14px;padding:22px}
.ds-pattern-inbox__messages p{box-sizing:border-box;width:fit-content;min-width:min(320px,calc(100% - 16px));max-width:min(76%,760px);padding:34px 20px 15px;font-size:var(--ds-inbox-message-size,16px);line-height:1.9}
.ds-pattern-inbox__messages p::before{inset-block-start:10px;inset-inline-start:18px;font-size:12px}
.ds-pattern-inbox__messages time{margin-top:7px;font-size:11px}
.ds-pattern-inbox__composer input{font-size:16px}
.ds-pattern-inbox__composer>button{padding:9px 16px;font-size:15px}
.ds-pattern-inbox__text-size output{min-width:44px;font-size:11px}
@media(max-width:800px){.ds-pattern-inbox{grid-template-columns:1fr;min-height:0}.ds-pattern-inbox__messages p{max-width:88%}}
@media(max-width:520px){.ds-pattern-inbox__messages{padding:14px}.ds-pattern-inbox__messages p{min-width:min(240px,calc(100% - 8px));max-width:94%;padding:32px 16px 13px}}
.ds-pattern-inbox__send-feedback{position:relative;display:inline-grid!important;grid-template-areas:"state";min-width:72px;width:72px;height:52px;padding:0!important;place-items:center;overflow:hidden;border-radius:12px!important;transition:width .28s ease,min-width .28s ease,border-radius .28s ease,background-color .28s ease,color .28s ease,transform .2s ease,box-shadow .28s ease!important}
.ds-pattern-inbox__send-feedback>[data-send-label],.ds-pattern-inbox__send-feedback>[data-send-spinner],.ds-pattern-inbox__send-feedback>[data-send-success],.ds-pattern-inbox__send-feedback>[data-send-error]{grid-area:state;transition:opacity .18s ease,transform .24s ease}
.ds-pattern-inbox__send-feedback>[data-send-spinner],.ds-pattern-inbox__send-feedback>[data-send-success],.ds-pattern-inbox__send-feedback>[data-send-error]{opacity:0;transform:scale(.55);pointer-events:none}
.ds-pattern-inbox__send-feedback>[data-send-success],.ds-pattern-inbox__send-feedback>[data-send-error]{display:grid;place-items:center}
.ds-pattern-inbox__send-feedback>[data-send-success] [data-ds-icon],.ds-pattern-inbox__send-feedback>[data-send-error] [data-ds-icon]{width:24px;height:24px;color:#fff;stroke:#fff}
.ds-pattern-inbox__send-feedback.is-sending,.ds-pattern-inbox__send-feedback.is-success,.ds-pattern-inbox__send-feedback.is-error{width:52px;min-width:52px;color:#fff!important;opacity:1!important}
.ds-pattern-inbox__send-feedback.is-sending{border-radius:50%!important;cursor:wait!important}
.ds-pattern-inbox__send-feedback:is(.is-success,.is-error){border-radius:12px!important}
.ds-pattern-inbox__send-feedback.is-sending{background:var(--stage-solid-blue,#3b82f6)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--stage-solid-blue,#3b82f6) 38%,transparent)!important}
.ds-pattern-inbox__send-feedback.is-success{background:var(--stage-solid-green,#22c55e)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--stage-solid-green,#22c55e) 38%,transparent)!important}
.ds-pattern-inbox__send-feedback.is-error{background:var(--stage-solid-red,#ef4444)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--stage-solid-red,#ef4444) 34%,transparent)!important}
.ds-pattern-inbox__send-feedback.is-sending>[data-send-label],.ds-pattern-inbox__send-feedback.is-success>[data-send-label],.ds-pattern-inbox__send-feedback.is-error>[data-send-label]{opacity:0;transform:scale(.55)}
.ds-pattern-inbox__send-feedback.is-sending>[data-send-spinner],.ds-pattern-inbox__send-feedback.is-success>[data-send-success],.ds-pattern-inbox__send-feedback.is-error>[data-send-error]{opacity:1;transform:scale(1)}
.ds-pattern-inbox__send-feedback.is-sending>[data-send-spinner]{width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:dsInboxSendSpin .75s linear infinite;will-change:transform}
.ds-pattern-inbox__send-feedback>[data-send-success] svg,.ds-pattern-inbox__send-feedback>[data-send-error] svg{width:24px;height:24px;color:#fff!important;stroke:#fff!important}
@keyframes dsInboxSendSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ds-pattern-inbox__send-feedback,.ds-pattern-inbox__send-feedback>*{transition:none!important}.ds-pattern-inbox__send-feedback.is-sending>[data-send-spinner]{animation-duration:1.5s}}
.ds-pattern-inbox__media{display:block;width:min(260px,100%);margin:0 0 10px;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand-500) 18%,var(--border));border-radius:14px;background:var(--surface-2);cursor:pointer}.ds-pattern-inbox__media img{display:block;width:100%;height:150px;object-fit:cover}.ds-pattern-inbox__media-fallback{display:none;min-height:110px;place-items:center;gap:8px;color:var(--text-muted)}.ds-pattern-inbox__media.is-missing img{display:none}.ds-pattern-inbox__media.is-missing .ds-pattern-inbox__media-fallback{display:grid}.ds-pattern-inbox__media-fallback [data-ds-icon]{width:30px;height:30px}.ds-pattern-inbox__media-modal{display:grid;min-height:240px;place-items:center}.ds-pattern-inbox__media-modal img{display:block;max-width:100%;max-height:70vh;object-fit:contain}.ds-pattern-inbox__media-modal.is-missing img{display:none}.ds-pattern-inbox__media-modal.is-missing .ds-pattern-inbox__media-fallback{display:grid;min-height:240px}

/* Inbox / Conversation v2 — compact Persian messenger experience. */
.ds-pattern-inbox{grid-template-columns:minmax(292px,340px) minmax(0,1fr);min-height:560px;border-radius:22px;box-shadow:0 22px 54px color-mix(in srgb,var(--text) 9%,transparent)}
.ds-pattern-inbox__list{min-width:0;padding:12px;border-inline-end:1px solid var(--border);background:var(--surface)}
.ds-pattern-inbox__search{margin-bottom:10px;border-color:transparent;border-radius:15px;background:var(--surface-2);box-shadow:none}
.ds-pattern-inbox__search input{height:44px;font-size:14px}
.ds-pattern-inbox__thread{position:relative;grid-template-columns:50px minmax(0,1fr) auto!important;min-height:72px;padding:10px!important;border:0!important;border-radius:14px!important}
.ds-pattern-inbox__thread:hover{background:color-mix(in srgb,var(--pastel-sky) 32%,var(--surface-2))!important;box-shadow:none!important;transform:none!important}
.ds-pattern-inbox__thread.is-active{color:var(--text);background:color-mix(in srgb,var(--inbox-channel-pastel,var(--pastel-mint)) 72%,var(--surface))!important;box-shadow:none!important;transform:none!important}
.ds-pattern-inbox__thread .ds-pattern-avatar{width:50px;height:50px;border-radius:50%;font-size:16px;box-shadow:none}
.ds-pattern-inbox__thread-copy{min-width:0}.ds-pattern-inbox__thread-copy strong{font-size:14px;line-height:1.55}.ds-pattern-inbox__thread-copy small{font-size:12px;line-height:1.55}
.ds-pattern-inbox__thread-meta{align-self:center;gap:6px;padding:0;border:0}.ds-pattern-inbox__thread-meta time{font-size:10px}
.ds-pattern-inbox__conversation{background:var(--surface-2)}
.ds-pattern-inbox__conversation>header{min-height:64px;padding:8px 14px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,var(--inbox-channel-pastel,var(--pastel-mint)));box-shadow:0 4px 16px color-mix(in srgb,var(--text) 5%,transparent)}
.ds-pattern-inbox__conversation>header strong{font-size:15px}.ds-pattern-inbox__conversation>header small{margin-top:2px;padding:0;border:0;background:transparent;font-size:11px}
.ds-pattern-inbox__messages{gap:5px;padding:22px 7%;overflow:auto;background:radial-gradient(circle at 18px 18px,color-mix(in srgb,var(--brand-500) 7%,transparent) 1.5px,transparent 1.6px) 0 0/36px 36px,color-mix(in srgb,var(--pastel-sky) 20%,var(--surface-2))}
.ds-pattern-inbox__messages p{min-width:min(180px,calc(100% - 24px));max-width:min(72%,640px);padding:9px 12px 7px;border:0;border-radius:16px;color:var(--text);font-size:var(--ds-inbox-message-size,15px);line-height:1.75;box-shadow:0 1px 2px color-mix(in srgb,var(--text) 12%,transparent);animation:dsUploadIn .18s ease both}
.ds-pattern-inbox__messages p[data-author]{padding-block-start:25px}.ds-pattern-inbox__messages p::before{inset-block-start:7px;inset-inline-start:12px;color:var(--brand-700);font-size:11px}
.ds-pattern-inbox__messages .is-incoming{align-self:flex-end;border-end-start-radius:5px;background:var(--surface)}
.ds-pattern-inbox__messages .is-outgoing{align-self:flex-start;border-end-end-radius:5px;background:color-mix(in srgb,var(--pastel-mint) 82%,var(--surface))}
.ds-pattern-inbox__messages time{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px;color:var(--text-muted);font-size:10px;line-height:1.3}
.ds-pattern-inbox__receipt{display:inline-grid;flex:0 0 16px;width:16px;height:16px;place-items:center;color:currentColor;line-height:0}.ds-pattern-inbox__receipt [data-ds-icon],.ds-pattern-inbox__receipt svg{display:block;width:16px;height:16px}
.ds-pattern-inbox__day{position:sticky;z-index:3;inset-block-start:8px;align-self:center!important;margin:10px 0!important;padding:5px 12px!important;border:1px solid color-mix(in srgb,var(--border) 70%,transparent)!important;border-radius:999px!important;color:var(--text-muted)!important;background:color-mix(in srgb,var(--surface) 92%,transparent)!important;box-shadow:0 2px 8px color-mix(in srgb,var(--text) 8%,transparent)!important;backdrop-filter:blur(8px);font-size:11px!important;font-weight:800!important}
.ds-pattern-inbox__history-hint{align-self:center;margin:2px 0 6px;color:var(--text-muted);font-size:11px}
.ds-pattern-inbox__file{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:min(300px,100%);margin-bottom:6px;padding:8px;border-radius:13px;color:inherit;background:color-mix(in srgb,var(--surface) 54%,transparent);text-decoration:none}
.ds-pattern-inbox__file-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;color:var(--brand-700);background:var(--surface)}.ds-pattern-inbox__file-icon [data-ds-icon]{width:22px;height:22px}
.ds-pattern-inbox__file-copy{display:grid;min-width:0}.ds-pattern-inbox__file-copy strong,.ds-pattern-inbox__file-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-pattern-inbox__file-copy strong{font-size:12px}.ds-pattern-inbox__file-copy small{color:var(--text-muted);font-size:10px}
.ds-pattern-inbox__file>[data-ds-icon]{width:18px;height:18px;color:var(--text-muted)}
.ds-pattern-inbox__media{width:min(320px,100%);margin:-3px -6px 6px;border:0;border-radius:13px}.ds-pattern-inbox__media img{height:auto;max-height:280px;aspect-ratio:4/3}
.ds-pattern-inbox__composer{position:relative;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px;padding:9px 12px;border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -4px 16px color-mix(in srgb,var(--text) 5%,transparent)}
.ds-pattern-inbox__composer textarea{box-sizing:border-box;width:100%;min-height:44px;max-height:92px;padding:10px 12px;resize:none;overflow-y:hidden;border:0!important;border-radius:12px!important;outline:0;color:var(--text);background:var(--surface)!important;box-shadow:none!important;font:inherit;font-size:16px;line-height:1.5}
.ds-pattern-inbox__composer>button[type="submit"]{width:48px;min-width:48px;height:48px;padding:0;border-radius:12px;color:var(--surface);background:var(--brand-500);box-shadow:0 8px 20px color-mix(in srgb,var(--brand-500) 30%,transparent)}
.ds-pattern-inbox__composer .ds-pattern-inbox__attach{width:48px!important;min-width:48px!important;max-width:48px!important}.ds-pattern-inbox__composer .ds-pattern-inbox__attach .ds-dropdown__trigger{width:48px;min-width:48px;height:48px;border:0;border-radius:12px;background:transparent;box-shadow:none}
.ds-pattern-inbox__composer>.ds-pattern-inbox__send-feedback.is-sending{border-radius:50%!important}
.ds-pattern-inbox__composer>.ds-pattern-inbox__send-feedback:is(.is-success,.is-error){border-radius:12px!important}
.ds-pattern-inbox__mobile-back{display:none;width:38px;height:38px;padding:0;place-items:center;border:0;border-radius:50%;color:var(--brand-700);background:transparent}.ds-pattern-inbox__mobile-back [data-ds-icon]{width:22px;height:22px}
@media(max-width:800px){.ds-pattern-inbox{display:block;min-height:520px}.ds-pattern-inbox__list{border:0}.ds-pattern-inbox__conversation{display:none;min-height:520px}.ds-pattern-inbox.is-chat-open>.ds-pattern-inbox__list{display:none}.ds-pattern-inbox.is-chat-open>.ds-pattern-inbox__conversation{display:grid}.ds-pattern-inbox__mobile-back{display:grid}.ds-pattern-inbox__messages{padding-inline:14px}.ds-pattern-inbox__messages p{max-width:86%}}
@media(max-width:520px){.ds-pattern-inbox{border:0;border-radius:0;box-shadow:none}.ds-pattern-inbox__conversation>header{padding-inline:8px}.ds-pattern-inbox__text-size{display:none!important}.ds-pattern-inbox__messages p{max-width:92%;font-size:var(--ds-inbox-message-size,14px)}.ds-pattern-inbox__file{min-width:min(240px,100%)}}

/* ds-workload-row — person capacity row (avatar | name + state | pressure meter | stats).
   Tones: --high (over capacity) · --medium (near capacity) · --low (free capacity).
   Catalog: design-system/index.html «ds-workload-row — ردیف ظرفیت کاری افراد». */
.ds-workload-row { display:grid; grid-template-columns:36px minmax(110px,.9fr) minmax(120px,1fr) minmax(170px,1.3fr); align-items:center; gap:12px; min-width:0; padding:10px 12px; border:1px solid var(--border); border-inline-start:3px solid var(--green-500); border-radius:12px; background:var(--surface); color:var(--text); }
.ds-workload-row--low { border-inline-start-color:var(--green-500); }
.ds-workload-row--medium { border-inline-start-color:var(--amber-500); }
.ds-workload-row--high { border-inline-start-color:var(--red-500); }
.ds-workload-row__avatar { display:inline-grid; place-items:center; inline-size:34px; block-size:34px; border-radius:11px; background:var(--pastel-mint); color:var(--brand-600); font-size:12px; font-weight:800; }
.ds-workload-row--medium .ds-workload-row__avatar { background:var(--pastel-peach); }
.ds-workload-row--high .ds-workload-row__avatar { background:var(--pastel-rose); }
.ds-workload-row__person { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-workload-row__person strong { overflow:hidden; font-size:13px; line-height:1.6; text-overflow:ellipsis; white-space:nowrap; }
.ds-workload-row__person small { color:var(--text-muted); font-size:11px; }
.ds-workload-row__meter { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; }
.ds-workload-row__meter > span { block-size:8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--border) 72%,transparent); }
.ds-workload-row__meter i { display:block; block-size:100%; max-inline-size:100%; border-radius:inherit; background:var(--green-500); }
.ds-workload-row--medium .ds-workload-row__meter i { background:var(--amber-500); }
.ds-workload-row--high .ds-workload-row__meter i { background:var(--red-500); }
.ds-workload-row__meter b { font-size:12px; font-variant-numeric:tabular-nums; text-align:end; }
.ds-workload-row__stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); gap:4px; min-width:0; }
.ds-workload-row__stats em { display:flex; align-items:baseline; justify-content:center; gap:3px; min-width:0; padding:4px; border-radius:8px; background:var(--surface-2); color:var(--text-muted); font-size:11px; font-style:normal; white-space:nowrap; }
.ds-workload-row__stats em b { color:var(--text); font-size:12px; }
@media (max-width:760px) {
  .ds-workload-row { grid-template-columns:36px minmax(0,1fr) minmax(100px,.9fr); }
  .ds-workload-row__stats { grid-column:2 / -1; }
}

/* ds-form-page — multi-section page form (catalog #form-page). Each
   ds-form-section is a card with a tinted head; the footer stays in view.
   `section`/`div` in the selectors outrank design-system.css's
   `.ds-form-section:first-of-type`, which is loaded after this file. */
.ds-form-page { display:grid; gap:16px; min-width:0; }
.ds-form-page > section.ds-form-section,
.ds-form-page > div.ds-form-section { min-width:0; padding:0; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:0 8px 20px color-mix(in srgb,var(--pastel-sky) 18%,transparent); }
.ds-form-page .ds-form-section__head { display:flex; align-items:center; gap:10px; min-width:0; padding:12px 18px; border-bottom:1px solid var(--border); border-radius:15px 15px 0 0; background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-sky) 22%,var(--surface)),color-mix(in srgb,var(--pastel-mint) 16%,var(--surface))); }
.ds-form-page .ds-form-section__icon { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; border-radius:10px; color:var(--brand-700); background:var(--pastel-mint); }
.ds-form-page .ds-form-section__title { min-width:0; padding:0; color:var(--text); font-size:14px; line-height:1.6; font-weight:800; letter-spacing:0; text-transform:none; }
.ds-form-page .ds-form-section__body { min-width:0; padding:16px 18px; }
.ds-form-page-footer { position:sticky; bottom:12px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 8px 20px color-mix(in srgb,var(--pastel-sky) 18%,transparent); backdrop-filter:blur(8px); }
.ds-form-page-footer__right { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.ds-group-hint { display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--brand-500) 22%,var(--border)); border-radius:11px; color:var(--brand-700); background:var(--pastel-mint); font-size:12px; line-height:1.7; font-weight:700; animation:dsGroupHintIn .2s ease-out; }
.ds-group-hint__icon { display:grid; flex:0 0 auto; place-items:center; }
@keyframes dsGroupHintIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .ds-group-hint { animation:none; } }
@media (max-width:620px) {
  .ds-form-page { gap:12px; }
  .ds-form-page .ds-form-section__head { padding:11px 14px; }
  .ds-form-page .ds-form-section__body { padding:14px; }
  .ds-form-page-footer { padding:11px 14px; }
  .ds-form-page-footer__right { justify-content:stretch; }
}
/* Group editor («ساخت گروه کاربری»): one list of people. The tick makes a
   person a member, the star makes them the leader. One scroll area only. */
.att-team-form{display:grid;gap:18px}
.att-team-form__basics{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.att-people{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid var(--border,#e2e8f0);border-radius:var(--radius-lg,16px);background:var(--surface,#fff)}
.att-people--invalid{border-color:var(--danger-500,#e5484d)}
.att-people__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.att-people__head b{font-size:13.5px;font-weight:800;color:var(--text,#0f172a)}
.att-people__head>span{font-size:12px;color:var(--text-muted,#64748b)}
.att-people__selected{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;min-block-size:44px;padding:8px 12px;border-radius:var(--radius-md,12px);background:var(--surface-2,#f8fafc)}
.att-people__leader{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.att-people__leader b{font-weight:800}
.att-people__leader.is-empty{color:var(--text-muted,#64748b)}
.att-people__members{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.att-people__hint{font-size:12px;color:var(--text-muted,#64748b)}
.att-people__count{font-size:12px;font-weight:800;color:var(--text-muted,#64748b);white-space:nowrap}
.att-people__tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,220px) auto;align-items:center;gap:10px}
.att-people__tools .ds-field{margin:0}
.att-people__only{white-space:nowrap}
.att-people__list{display:grid;gap:4px;max-block-size:min(34vh,330px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:6px;border:1px solid var(--border,#e2e8f0);border-radius:var(--radius-md,12px)}
.att-people__group{position:sticky;top:-6px;z-index:1;padding:6px 8px 4px;font-size:11.5px;font-weight:800;color:var(--text-muted,#64748b);background:var(--surface,#fff)}
.att-person{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding-inline-end:4px;border-radius:var(--radius-md,12px)}
.att-person[hidden],.att-people__group[hidden],.att-people__list[hidden]{display:none}
.att-person:hover{background:var(--surface-2,#f8fafc)}
.att-person--leader{background:color-mix(in srgb,var(--pastel-lemon,#fef3c7) 55%,transparent)}
.att-person--leader .att-person__pick{opacity:1}
.att-people .att-person__pick{width:100%;box-sizing:border-box;min-block-size:0;padding:5px 10px}
.att-choice__text{display:grid;gap:1px;min-width:0}
.att-choice__text b{font-weight:700}
.att-choice__text small{color:var(--text-muted,#64748b);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-choice__tag{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;color:#9a5a10;background:var(--pastel-peach,#ffedd5);white-space:nowrap}
.att-people__empty{display:grid;justify-items:center;gap:8px;padding:28px 12px;border:1px dashed var(--border,#e2e8f0);border-radius:var(--radius-md,12px);color:var(--text-muted,#64748b);font-size:12.5px;text-align:center}
.att-people__empty[hidden]{display:none}
.att-people__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--text-muted,#64748b)}
.att-people__bulk{display:inline-flex;flex-wrap:wrap;gap:6px}
.att-chip{display:inline-flex;align-items:center;gap:4px}
.att-chip__remove{border:0;background:transparent;color:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
@media(max-width:760px){.att-team-form__basics{grid-template-columns:1fr}.att-people{padding:10px}.att-people__selected{grid-template-columns:1fr}.att-people__tools{grid-template-columns:1fr}.att-people__only{justify-self:start}.att-people__list{max-block-size:300px}}