/* Файл хранит общие токены и компоненты дизайн-системы MTS для лендинга ANSA (перенесено из макета ANSA). */
/* MTS visual system v1. Reference measurements and adaptations: docs/design/04-design-system.md */
:root {
  color-scheme: dark;
  --mts-bg: #101112;
  --mts-surface: #181a1c;
  --mts-surface-raised: #222427;
  --mts-glass: rgba(16, 17, 18, .78);
  --mts-text: #eaebec;
  --mts-muted: #a7a9b1;
  --mts-subtle: #898c96;
  --mts-line: rgba(255, 255, 255, .10);
  --mts-line-strong: rgba(255, 255, 255, .20);
  --mts-violet: #b8a4ff;
  --mts-blue: #9abfff;
  --mts-warm: #eec6a3;
  --mts-success: #a4dfb3;
  --mts-warning: #f1cd8d;
  --mts-danger: #ffa6b4;
  --mts-font: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mts-text-gradient: linear-gradient(180deg, #fff 0%, #e0dedb 100%);
  --mts-glass-gradient: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  --mts-radius-sm: 8px;
  --mts-radius-md: 12px;
  --mts-radius-button: 14px;
  --mts-radius-panel: 16px;
  --mts-radius-window: 24px;
  --mts-space-1: 4px;
  --mts-space-2: 8px;
  --mts-space-3: 12px;
  --mts-space-4: 16px;
  --mts-space-5: 24px;
  --mts-space-6: 32px;
  --mts-space-7: 48px;
  --mts-space-8: 64px;
  --mts-space-9: 96px;
  --mts-shadow-glass: 0 0 0 1px rgba(0,0,0,.55), 0 8px 40px rgba(0,0,0,.42), inset 0 0 3px 1px rgba(255,255,255,.12), inset 0 1px rgba(255,255,255,.12);
  --mts-shadow-button: 0 1px 3px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.20), inset 0 1px 1px rgba(255,255,255,.20), inset 0 0 10px 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 1px rgba(255,255,255,.07);
  --mts-motion: 180ms;
  --mts-ease: cubic-bezier(.2,.8,.2,1);
}
.mts-ui { margin: 0; background: var(--mts-bg); color: var(--mts-text); font: 400 16px/1.5 var(--mts-font); -webkit-font-smoothing: antialiased; }
.mts-ui *, .mts-ui *::before, .mts-ui *::after { box-sizing: border-box; }
.mts-ui button, .mts-ui input, .mts-ui select, .mts-ui textarea { font: inherit; }
.mts-ui a { color: inherit; }
.mts-ui button, .mts-ui a, .mts-ui input, .mts-ui textarea, .mts-ui select { -webkit-tap-highlight-color: transparent; }
.mts-ui :focus-visible { outline: 2px solid var(--mts-violet); outline-offset: 4px; }
.mts-ui ::selection { background: #514275; color: #fff; }
.mts-ui h1, .mts-ui h2, .mts-ui h3, .mts-ui p { margin: 0; }
.mts-display { font-size: clamp(44px, 6.25vw, 80px); font-weight: 590; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.mts-heading { font-size: clamp(32px, 4vw, 48px); line-height: 1; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.mts-title { font-size: 32px; line-height: 1.25; font-weight: 500; letter-spacing: -.025em; }
.mts-card-title { font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -.01em; }
.mts-gradient-text { background: var(--mts-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mts-muted { color: var(--mts-muted); }
.mts-caption { font-size: 13px; line-height: 1.5; color: var(--mts-muted); }
.mts-eyebrow { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mts-muted); }
.mts-panel { background: var(--mts-surface); border: 1px solid var(--mts-line); border-radius: var(--mts-radius-panel); }
.mts-glass { background: var(--mts-glass); border: 1px solid transparent; border-radius: var(--mts-radius-panel); box-shadow: var(--mts-shadow-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mts-window { border-radius: var(--mts-radius-window); }
.mts-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--mts-line); border-radius: var(--mts-radius-button); background: transparent; color: var(--mts-text); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--mts-motion), border-color var(--mts-motion), transform var(--mts-motion) var(--mts-ease); white-space: nowrap; }
.mts-button:hover { background-color: rgba(255,255,255,.07); border-color: var(--mts-line-strong); }
.mts-button:active { transform: translateY(1px); }
.mts-button--primary { background: var(--mts-glass-gradient); border-color: transparent; box-shadow: var(--mts-shadow-button); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mts-button--primary:hover { background-color: rgba(255,255,255,.08); border-color: transparent; }
.mts-button--quiet { border-color: transparent; color: var(--mts-muted); }
.mts-button--quiet:hover { color: var(--mts-text); border-color: transparent; }
.mts-button--small { min-height: 44px; padding: 10px 14px; border-radius: var(--mts-radius-sm); }
.mts-button--danger { color: var(--mts-danger); border-color: rgba(255,166,180,.24); }
.mts-button:disabled, .mts-button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.mts-button:disabled:hover { background-color: transparent; border-color: var(--mts-line); }
.mts-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mts-icon-button { width: 44px; padding: 0; }
.mts-field { display: grid; gap: 8px; min-width: 0; }
.mts-label { font-size: 13px; line-height: 20px; font-weight: 500; }
.mts-input { width: 100%; min-height: 48px; padding: 12px 14px; background: rgba(0,0,0,.22); color: var(--mts-text); border: 1px solid var(--mts-line-strong); border-radius: var(--mts-radius-md); transition: border-color var(--mts-motion), box-shadow var(--mts-motion); }
.mts-input::placeholder { color: var(--mts-subtle); opacity: 1; }
.mts-input:hover { border-color: rgba(255,255,255,.3); }
.mts-input:focus { border-color: var(--mts-violet); box-shadow: 0 0 0 3px rgba(184,164,255,.10); outline: none; }
.mts-input:focus-visible { outline: 2px solid var(--mts-violet); outline-offset: 3px; }
.mts-input[aria-invalid="true"] { border-color: var(--mts-danger); }
.mts-input:disabled { opacity: .45; cursor: not-allowed; }
.mts-field-error { color: var(--mts-danger); font-size: 13px; }
.mts-textarea { min-height: 112px; resize: vertical; }
.mts-checkbox { appearance: none; width: 20px; height: 20px; flex: 0 0 auto; margin: 0; border: 1px solid var(--mts-line-strong); border-radius: 6px; background: rgba(0,0,0,.2); cursor: pointer; }
.mts-checkbox:checked { background: var(--mts-violet); border-color: var(--mts-violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='%23101112' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mts-check-label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.mts-switch { display: inline-flex; align-items: center; gap: 12px; position: relative; min-height: 44px; font-size: 14px; cursor: pointer; }
.mts-switch input { position: absolute; width: 44px; height: 24px; opacity: 0; margin: 0; cursor: pointer; }
.mts-switch-track { display: block; width: 44px; height: 24px; border-radius: 99px; background: #42444d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background var(--mts-motion); }
.mts-switch-track::after { content: ""; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #eaebec; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform var(--mts-motion) var(--mts-ease); }
.mts-switch input:checked + .mts-switch-track { background: #a18ce6; }
.mts-switch input:checked + .mts-switch-track::after { transform: translateX(20px); }
.mts-switch input:focus-visible + .mts-switch-track { outline: 2px solid var(--mts-violet); outline-offset: 4px; }
.mts-switch input:disabled ~ * { opacity: .4; cursor: not-allowed; }
.mts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--mts-muted); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.mts-badge--success { background: rgba(164,223,179,.09); color: var(--mts-success); }
.mts-badge--warning { background: rgba(241,205,141,.09); color: var(--mts-warning); }
.mts-badge--danger { background: rgba(255,166,180,.09); color: var(--mts-danger); }
.mts-badge--violet { background: rgba(184,164,255,.10); color: var(--mts-violet); }
.mts-dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.mts-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; color: var(--mts-violet); background: rgba(184,164,255,.10); font-size: 13px; font-weight: 500; }
.mts-segmented { display: inline-flex; max-width: 100%; padding: 4px; gap: 2px; background: rgba(0,0,0,.25); border: 1px solid var(--mts-line); border-radius: 12px; }
.mts-segmented button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--mts-muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.mts-segmented button[aria-pressed="true"] { color: var(--mts-text); background: rgba(255,255,255,.09); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.12); }
.mts-segmented button:hover { color: var(--mts-text); }
.mts-call-row { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 18px 20px; border-bottom: 1px solid var(--mts-line); color: inherit; text-decoration: none; transition: background var(--mts-motion); }
.mts-call-row:last-child { border-bottom: 0; }
a.mts-call-row:hover, button.mts-call-row:hover { background: rgba(255,255,255,.035); }
.mts-call-content { flex: 1; min-width: 0; }
.mts-call-name { font-size: 14px; font-weight: 500; }
.mts-call-summary { margin-top: 3px !important; color: var(--mts-muted); font-size: 12px; line-height: 18px; }
.mts-call-time { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--mts-muted); }
.mts-divider { height: 1px; border: 0; background: var(--mts-line); margin: 0; }
.mts-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--mts-line); border-radius: 12px; background: rgba(255,255,255,.025); font-size: 13px; }
.mts-alert--warning { border-color: rgba(241,205,141,.16); background: rgba(241,205,141,.04); }
.mts-alert--warning > .mts-icon { color: var(--mts-warning); margin-top: 2px; }
.mts-skeleton { border-radius: 6px; background: linear-gradient(90deg,#282a2e,#33353a,#282a2e); background-size: 200% 100%; animation: mts-shimmer 2s ease-in-out infinite; }
.mts-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes mts-shimmer { to { background-position: -200% 0; } }
@supports not (backdrop-filter: blur(20px)) { .mts-glass { background: #181a1c; } .mts-button--primary { background-color: #292b2f; } }
@media (max-width: 600px) { .mts-title { font-size: 26px; } .mts-call-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; padding: 16px; gap: 8px 12px; } .mts-call-row > .mts-avatar { grid-column: 1; grid-row: 1 / span 2; } .mts-call-row > .mts-call-content { grid-column: 2; grid-row: 1; } .mts-call-row > .mts-badge { grid-column: 2; grid-row: 2; justify-self: start; } .mts-call-time { grid-column: 3; grid-row: 1 / span 2; align-self: start; } .mts-segmented { flex-wrap: wrap; } .mts-segmented button { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .mts-ui *, .mts-ui *::before, .mts-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }