/* Área logada: topo, menu lateral fixo por empresa e carteira de clientes em cartões. Cores em --fin-* (tokens.css). */
.mAppShellmodu_shell {
  --mono: "Plex 4DO", ui-monospace, monospace;
  --shadow: 0 2px 6px rgb(5 8 35 / .06), 0 12px 32px rgb(5 8 35 / .10);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; background: var(--fin-surface-2); color: var(--fin-text);
  font: 400 15px/1.55 "Montserrat 4DO", Montserrat, Arial, sans-serif;
}
.mAppShellmodu_shell button, .mAppShellmodu_shell input, .mAppShellmodu_shell select, .mAppShellmodu_shell textarea { font: inherit; }
.mAppShellmodu_shell button { cursor: pointer; }
.mAppShellmodu_shell button:disabled { cursor: default; }
.mAppShellmodu_shell :is(button, select, input):focus-visible { outline: 3px solid var(--fin-primary); outline-offset: 3px; }
.mAppShellmodu_shell :is(h1, h2, h3, b, strong) { font-weight: 600; }
.mAppShellmodu_shell :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.mAppShellmodu_icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mAppShellmodu_top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 8px 24px; background: var(--fin-bg); border-bottom: 1px solid var(--fin-border); }
.mAppShellmodu_burger { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; color: var(--fin-text); border-radius: 10px; }
.mAppShellmodu_brand { display: flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--fin-text); padding: 0; min-height: 44px; flex: 0 0 auto; }
.mAppShellmodu_brand span { font: 11px var(--mono); letter-spacing: .14em; border-left: 1px solid var(--fin-line); padding-left: 14px; }
.mAppShellmodu_logo { width: 80px; height: 28px; }
.mAppShellmodu_company { flex: 0 1 240px; min-width: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--fin-line); border-radius: 10px; background: var(--fin-surface); color: var(--fin-text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; }
.mAppShellmodu_find { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; margin-left: auto; }
.mAppShellmodu_find input { width: 100%; min-height: 44px; padding: 8px 18px; border: 1px solid var(--fin-border); border-radius: 999px; background: var(--fin-surface-2); color: var(--fin-text); font-size: 14px; }
.mAppShellmodu_newWrap { position: relative; flex: 0 0 auto; }
.mAppShellmodu_pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; min-width: 240px; background: var(--fin-surface); border: 1px solid var(--fin-border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; max-height: 60vh; overflow-y: auto; }
.mAppShellmodu_pop[data-side="end"] { left: auto; right: 0; }
.mAppShellmodu_pop button { width: 100%; display: grid; gap: 1px; text-align: left; background: none; border: 0; border-radius: 9px; padding: 10px 12px; color: var(--fin-text); font-size: 14px; min-height: 44px; align-content: center; }
.mAppShellmodu_pop button:hover, .mAppShellmodu_pop button:focus-visible { background: var(--fin-surface-2); }
.mAppShellmodu_pop small { font-size: 12px; color: var(--fin-muted); }
.mAppShellmodu_popEmpty { padding: 12px; font-size: 13px; color: var(--fin-muted); }
.mAppShellmodu_veil { position: fixed; inset: 0; z-index: 20; }
.mAppShellmodu_user { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }

.mAppShellmodu_body { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; min-height: 0; }
.mAppShellmodu_side { position: sticky; top: 69px; height: calc(100vh - 69px); overflow-y: auto; padding: 18px 12px 28px; background: var(--fin-side); border-right: 1px solid var(--fin-border); display: grid; align-content: start; gap: 22px; }
.mAppShellmodu_sideClient { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; min-width: 0; }
.mAppShellmodu_sideClient .mAppShellmodu_bubble { width: 52px; height: 41px; }
.mAppShellmodu_sideClient div { display: grid; min-width: 0; }
.mAppShellmodu_sideClient b { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mAppShellmodu_sideClient small { font: 11px var(--mono); color: var(--fin-muted); }
.mAppShellmodu_sideTitle { font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fin-muted); padding: 0 12px 6px; }
.mAppShellmodu_side ul { display: grid; gap: 2px; }
.mAppShellmodu_side ul ul { margin: 2px 0 8px 22px; padding-left: 12px; border-left: 1px solid var(--fin-border); }
.mAppShellmodu_group, .mAppShellmodu_sub { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; border-radius: 10px; color: var(--fin-side-text); text-align: left; }
.mAppShellmodu_group { min-height: 44px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.mAppShellmodu_group .mAppShellmodu_icon { width: 20px; height: 20px; flex: 0 0 auto; }
.mAppShellmodu_group span { flex: 1 1 auto; min-width: 0; }
.mAppShellmodu_group i { font: 14px var(--mono); font-style: normal; color: var(--fin-muted); }
.mAppShellmodu_sub { min-height: 38px; padding: 6px 12px; font-size: 13.5px; }
.mAppShellmodu_group:hover, .mAppShellmodu_sub:hover { background: var(--fin-surface); color: var(--fin-text); }
.mAppShellmodu_group[data-here] { color: var(--fin-text); }
.mAppShellmodu_group[data-here] .mAppShellmodu_icon { color: var(--fin-primary); }
.mAppShellmodu_group[aria-current="page"], .mAppShellmodu_sub[aria-current="page"] { background: var(--fin-surface); color: var(--fin-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--fin-accent); }

.mAppShellmodu_content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 28px 32px 0; min-width: 0; min-height: calc(100vh - 69px); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 22px; }
.mAppShellmodu_content[data-wide] { max-width:none; }
.mAppShellmodu_pageHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.mAppShellmodu_pageHead h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
.mAppShellmodu_pageHead p { color: var(--fin-muted); margin-top: 4px; max-width: 70ch; font-size: 14px; }
.mAppShellmodu_crumb { display: block; font: 11px var(--mono); letter-spacing: .04em; color: var(--fin-muted); margin-bottom: 6px; }
.mAppShellmodu_headTools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mAppShellmodu_search { width: 280px; max-width: 100%; min-height: 48px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--fin-border); background: var(--fin-surface); color: var(--fin-text); }
.mAppShellmodu_layout { display: flex; gap: 4px; }
.mAppShellmodu_layout button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--fin-muted); }
.mAppShellmodu_layout button[aria-pressed="true"] { background: var(--fin-border); color: var(--fin-text); }

.mAppShellmodu_primary { background: var(--fin-accent); color: var(--fin-accent-ink); border: 0; border-radius: 999px; min-height: 46px; padding: 10px 28px; font-weight: 600; transition: box-shadow .2s, transform .2s; }
.mAppShellmodu_primary:hover { box-shadow: 0 0 0 4px var(--fin-border); }
.mAppShellmodu_ghost { background: none; color: var(--fin-text); border: 1.5px solid var(--fin-line); border-radius: 999px; min-height: 44px; padding: 8px 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mAppShellmodu_ghost:hover { border-color: var(--fin-text); }

.mAppShellmodu_clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.mAppShellmodu_client { background: var(--fin-surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; transition: transform .2s; }
.mAppShellmodu_client:hover { transform: translateY(-3px); }
.mAppShellmodu_clientTop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px 16px 0; background: var(--fin-surface-2); font-size: 13px; }
.mAppShellmodu_clientTop b { border-left: 5px solid var(--fin-ok); padding-left: 16px; color: var(--fin-ok); font-size: 15px; }
.mAppShellmodu_clientTop[data-state="ONBOARDING"] b { border-color: var(--fin-primary); color: var(--fin-primary); }
.mAppShellmodu_clientTop[data-state="SUSPENDED"] b, .mAppShellmodu_clientTop[data-state="OFFBOARDED"] b { border-color: var(--fin-danger); color: var(--fin-danger); }
.mAppShellmodu_clientTop span { font-weight: 600; }
.mAppShellmodu_clientBody { display: flex; align-items: center; gap: 16px; padding: 28px 22px 20px; min-width: 0; }
.mAppShellmodu_clientBody h2 { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.mAppShellmodu_clientBody small { font: 11px var(--mono); color: var(--fin-muted); }
.mAppShellmodu_clientFoot { display: flex; justify-content: flex-end; padding: 0 22px 22px; }
.mAppShellmodu_clientFoot .mAppShellmodu_primary { min-width: 55%; }
/* Balão do cliente (formato das campanhas do Synthetic): escuro no tema claro, claro no escuro, pelos tokens. */
.mAppShellmodu_bubble { flex: 0 0 auto; width: 78px; height: 62px; }
.mAppShellmodu_bubble svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mAppShellmodu_bubbleShape { fill: var(--fin-text); transform-box: view-box; transform-origin: center; animation: bubble 4.8s cubic-bezier(.2,.8,.2,1) infinite; }
.mAppShellmodu_bubbleLetter { fill: var(--fin-bg); font-family: Arial, sans-serif; font-weight: 800; transform-box: fill-box; transform-origin: center; animation: bubbleLetter 2.8s ease-in-out infinite; }
.mAppShellmodu_bubbleBrand { fill: var(--fin-accent); }
@keyframes bubble { 0%, 100% { transform: scale(.94) } 12%, 82% { transform: scale(1) } }
@keyframes bubbleLetter { 0%, 70%, 100% { transform: translateY(0) } 78% { transform: translateY(-3px) rotate(-4deg) } 86% { transform: translateY(1px) rotate(2deg) } }
@media (prefers-reduced-motion: reduce) { .mAppShellmodu_bubble * { animation: none !important; } }
.mAppShellmodu_clients[data-layout="list"] { grid-template-columns: 1fr; gap: 12px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_bubble { width: 58px; height: 46px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_client { grid-template-columns: 150px 1fr auto; grid-template-rows: auto; align-items: center; border-radius: 16px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientTop { align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; padding-right: 12px; gap: 2px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientTop span { padding-left: 21px; font-size: 11px; font-weight: 400; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientBody { padding: 14px 22px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientFoot { padding: 0 22px; }
.mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientFoot .mAppShellmodu_primary { min-width: 0; }
.mAppShellmodu_empty { background: var(--fin-surface); border-radius: 22px; box-shadow: var(--shadow); padding: 40px; max-width: 640px; }
.mAppShellmodu_empty p { color: var(--fin-muted); margin-top: 8px; }

.mAppShellmodu_foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding: 16px 0 20px; border-top: 1px solid var(--fin-border); font: 11px var(--mono); color: var(--fin-muted); }
.mAppShellmodu_hint { color: var(--fin-muted); }
.mAppShellmodu_error { color: var(--fin-danger); }
.mAppShellmodu_primary:disabled { opacity: .5; box-shadow: none; }
.mAppShellmodu_clientBody > div { display: grid; gap: 2px; min-width: 0; }

.mAppShellmodu_routine { display: grid; gap: 16px; }
.mAppShellmodu_routine header { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.mAppShellmodu_routine h2 { font-size: 20px; line-height: 1.25; }
.mAppShellmodu_routine header p { color: var(--fin-muted); font-size: 13px; max-width: 42ch; }
.mAppShellmodu_routineCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mAppShellmodu_routineCards li { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 8px; min-width: 0; padding: 20px; background: var(--fin-surface); border: 1px solid var(--fin-border); border-radius: 18px; }
.mAppShellmodu_routineNumber { font: 12px var(--mono); color: var(--fin-muted); }
.mAppShellmodu_routineHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mAppShellmodu_routineIcon { display: grid; place-items: center; width: 72px; height: 60px; border-radius: 16px; background: var(--fin-surface-2); color: var(--fin-primary); }
.mAppShellmodu_routineIcon svg { width: 54px; height: 45px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Arte da Rotina: sem animação, cada classe já é o desenho final. Ciclo de 3,6 s como as artes do Synthetic. */
.mAppShellmodu_routineIcon .mAppShellmodu_artGuide { stroke: var(--fin-line); stroke-width: 1.6; }
.mAppShellmodu_artDrop { animation: artDrop 3.6s cubic-bezier(.3,.7,.3,1) infinite; }
.mAppShellmodu_artCheck { stroke-dasharray: 1; stroke-dashoffset: 0; animation: artCheck 3.6s ease-in-out infinite; }
.mAppShellmodu_artRoof { transform-box: fill-box; transform-origin: center bottom; animation: artRoof 3.6s ease-in-out infinite; }
.mAppShellmodu_artColumn { animation: artColumn 3.6s ease-in-out infinite; }
.mAppShellmodu_artWave { stroke-width: 1.4; opacity: .35; transform-box: fill-box; transform-origin: center; animation: artWave 3.6s cubic-bezier(.2,.7,.3,1) infinite; }
.mAppShellmodu_artBlink { animation: artBlink 1.8s ease-in-out infinite; }
.mAppShellmodu_artShackle { animation: artShackle 3.6s cubic-bezier(.3,.7,.3,1) infinite; }
.mAppShellmodu_artCenter { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: artPulse 3.6s ease-in-out infinite; }
@keyframes artDrop { 0% { transform: translateY(-6px); opacity: 0 } 15% { opacity: 1 } 45%, 70% { transform: translateY(8px); opacity: 1 } 90%, 100% { transform: translateY(8px); opacity: 0 } }
@keyframes artCheck { 0%, 8% { stroke-dashoffset: 1 } 30%, 100% { stroke-dashoffset: 0 } }
@keyframes artRoof { 0%, 100% { transform: translateY(0) } 12% { transform: translateY(-2px) } 24% { transform: translateY(0) } }
@keyframes artColumn { 0%, 100% { stroke: var(--fin-line) } 20%, 45% { stroke: currentColor } }
@keyframes artWave { 0% { transform: scale(.2); opacity: .9 } 80% { opacity: .1 } 100% { transform: scale(1); opacity: 0 } }
@keyframes artBlink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes artShackle { 0%, 20% { transform: translateY(-5px) } 45%, 100% { transform: translateY(0) } }
@keyframes artPulse { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.4) } 30% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .mAppShellmodu_routineIcon * { animation: none !important; } }
.mAppShellmodu_routineCards .mAppShellmodu_routineTime { font: 11px var(--mono); }
/* Valor do mês e mini gráfico de 6 meses no meio do card (ordem do dono, 04/11/2026). */
.mAppShellmodu_routineMetric { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 12px; background: var(--fin-surface-2); min-width: 0; }
.mAppShellmodu_routineMetric[data-state="nao-medido"] b { font-size: 20px; color: var(--fin-muted); }
.mAppShellmodu_routineValue { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mAppShellmodu_routineValue b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fin-text); overflow-wrap: anywhere; }
.mAppShellmodu_routineTrend { font: 12px var(--mono); white-space: nowrap; color: var(--fin-muted); }
.mAppShellmodu_routineTrend[data-tone="good"] { color: var(--fin-ok); }
.mAppShellmodu_routineTrend[data-tone="bad"] { color: var(--fin-danger); }
.mAppShellmodu_routineSpark { width: 100%; height: 32px; overflow: visible; }
.mAppShellmodu_routineSpark polyline { fill: none; stroke: var(--fin-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mAppShellmodu_routineSpark circle { fill: var(--fin-primary); }
.mAppShellmodu_routineCards .mAppShellmodu_routineMetric small { font: 11px var(--mono); }
.mAppShellmodu_routineTime time { color: var(--fin-text); }
.mAppShellmodu_spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid var(--fin-border); border-top-color: var(--fin-accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mAppShellmodu_spinner { animation: none; } }
.mAppShellmodu_responsible { flex: 0 1 220px; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--fin-line); border-radius: 999px; background: var(--fin-surface-2); color: var(--fin-text); font-size: 13px; }
.mAppShellmodu_responsible small { flex: 0 0 auto; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fin-muted); }
.mAppShellmodu_responsible b, .mAppShellmodu_responsible select { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mAppShellmodu_responsible select { flex: 1 1 auto; border: 0; background: transparent; color: inherit; font-size: 13px; padding: 0; min-height: 28px; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.mAppShellmodu_responsible:has(select) { position: relative; padding-right: 30px; }
.mAppShellmodu_responsible:has(select)::after { content: ''; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
/* O foco do .mAppShellmodu_shell (contorno de 3px) perde aqui: o select clicado casa :focus-visible no Chrome e desenhava o retângulo. */
.mAppShellmodu_shell .mAppShellmodu_responsible select:focus, .mAppShellmodu_shell .mAppShellmodu_responsible select:focus-visible { outline: none; box-shadow: none; }
.mAppShellmodu_responsible:focus-within { border-color: var(--fin-primary); }
.mAppShellmodu_responsible[data-state="error"] { border-color: var(--fin-danger); }
.mAppShellmodu_routineCards h3 { font-size: 15px; line-height: 1.3; }
.mAppShellmodu_routineCards p, .mAppShellmodu_routineCards small { color: var(--fin-muted); font-size: 13px; }
.mAppShellmodu_routineAction { display: flex; align-items: center; gap: 14px; min-height: 64px; margin-top: 6px; padding: 10px 16px 10px 10px; border: 1px solid var(--fin-border); border-radius: 14px; background: var(--fin-surface-2); box-shadow: 0 3px 0 var(--fin-border); color: var(--fin-text); text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.mAppShellmodu_routineAction:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--fin-border); }
.mAppShellmodu_routineAction:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--fin-border); }
.mAppShellmodu_routineAction:focus-visible { outline: 2px solid var(--fin-primary); outline-offset: 2px; }
.mAppShellmodu_routineActionIcon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--fin-surface); color: var(--fin-primary); }
.mAppShellmodu_routineActionIcon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mAppShellmodu_routineActionText { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mAppShellmodu_routineCards .mAppShellmodu_routineActionText small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fin-muted); }
.mAppShellmodu_routineActionText b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .mAppShellmodu_routineAction, .mAppShellmodu_routineAction:hover, .mAppShellmodu_routineAction:active { transition: none; transform: none; } }
@media (max-width: 760px) { .mAppShellmodu_routineCards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mAppShellmodu_routineCards { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1100px) {
  .mAppShellmodu_top { position: static; flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; }
  .mAppShellmodu_burger { display: grid; }
  .mAppShellmodu_brand span { display: none; }
  .mAppShellmodu_company { flex: 1 1 140px; }
  .mAppShellmodu_responsible { flex: 1 1 160px; }
  .mAppShellmodu_user { order: 6; flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
  .mAppShellmodu_find { order: 4; flex: 1 1 160px; max-width: none; margin-left: 0; }
  .mAppShellmodu_newWrap { order: 5; }
  .mAppShellmodu_body { grid-template-columns: minmax(0, 1fr); }
  .mAppShellmodu_side { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw); padding-top: 24px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .mAppShellmodu_side[data-open] { transform: none; }
  .mAppShellmodu_veil[data-kind="menu"] { z-index: 35; background: rgb(5 8 35 / .45); }
  .mAppShellmodu_content { padding: 20px 16px 0; }
  .mAppShellmodu_clients { grid-template-columns: 1fr; gap: 18px; }
  .mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_client { grid-template-columns: 1fr; }
  .mAppShellmodu_clients[data-layout="list"] .mAppShellmodu_clientFoot { padding: 0 22px 18px; }
  .mAppShellmodu_search { width: 100%; }
  .mAppShellmodu_headTools { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mAppShellmodu_client, .mAppShellmodu_primary, .mAppShellmodu_side { transition: none; } .mAppShellmodu_client:hover { transform: none; } }