:root {
  /* Brand colors from МШП brand book */
  --mshp-brand-primary: #00A0DF;
  --mshp-brand-light-blue: #8DC6E8;
  --mshp-brand-blue: #0082CA;
  --mshp-brand-deep-blue: #002D74;
  --mshp-brand-navy: #00204D;
  --mshp-brand-green: #00A987;
  --mshp-brand-orange: #FF8300;
  --mshp-brand-yellow: #FFC622;
  --mshp-brand-red: #E04130;
  --mshp-brand-violet: #592C82;
  --mshp-brand-black: #0A0A0A;
  --mshp-brand-white: #FFFFFF;

  /* Product semantic colors */
  --mshp-bg-page: #F5F7FA;
  --mshp-bg-surface: #FFFFFF;
  --mshp-bg-subtle: #F8FAFC;
  --mshp-bg-selected: #EAF7FC;

  --mshp-text-strong: #172033;
  --mshp-text-default: #2D3748;
  --mshp-text-muted: #667085;
  --mshp-text-disabled: #98A2B3;
  --mshp-border: #DFE5EC;
  --mshp-border-strong: #C9D2DE;

  --mshp-action-primary: #002D74;
  --mshp-action-primary-hover: #00204D;
  --mshp-action-secondary-bg: #EAF7FC;
  --mshp-action-secondary-text: #005E86;
  --mshp-link: #005E86;
  --mshp-focus: rgba(0, 160, 223, 0.28);

  --mshp-state-demonstrated-bg: #E7F7F3;
  --mshp-state-demonstrated-fg: #006B56;
  --mshp-state-demonstrated-border: #AEE5D7;

  --mshp-state-not-found-bg: #FFF3E6;
  --mshp-state-not-found-fg: #7A3A00;
  --mshp-state-not-found-border: #FFD2A8;

  --mshp-state-insufficient-bg: #F2F4F7;
  --mshp-state-insufficient-fg: #4D5968;
  --mshp-state-insufficient-border: #D7DCE3;

  --mshp-state-critical-bg: #FDECEA;
  --mshp-state-critical-fg: #8D2B21;
  --mshp-state-critical-border: #F2B8B1;

  --mshp-space-1: 4px;
  --mshp-space-2: 8px;
  --mshp-space-3: 12px;
  --mshp-space-4: 16px;
  --mshp-space-5: 20px;
  --mshp-space-6: 24px;
  --mshp-space-8: 32px;
  --mshp-space-10: 40px;
  --mshp-space-12: 48px;

  --mshp-radius-sm: 6px;
  --mshp-radius-md: 10px;
  --mshp-radius-lg: 14px;
  --mshp-radius-pill: 999px;

  --mshp-shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
  --mshp-shadow-md: 0 8px 24px rgba(23, 32, 51, 0.08);

  --mshp-font-sans: "DIN 2014 Rounded", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mshp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --mshp-container: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--mshp-text-default);
  background: var(--mshp-bg-page);
  font-family: var(--mshp-font-sans);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--mshp-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.mshp-app-shell { min-height: 100vh; }

.mshp-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  background: var(--mshp-bg-surface);
  border-bottom: 1px solid var(--mshp-border);
}

.mshp-topbar__inner,
.mshp-container {
  width: min(var(--mshp-container), calc(100% - 48px));
  margin: 0 auto;
}

.mshp-topbar__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mshp-space-6);
}

.mshp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mshp-space-3);
  color: var(--mshp-text-strong);
  text-decoration: none;
  font-weight: 700;
}

.mshp-brand img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mshp-brand__product { color: var(--mshp-text-muted); font-weight: 600; }

.mshp-page { padding: var(--mshp-space-8) 0 var(--mshp-space-12); }

.mshp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mshp-space-6);
  margin-bottom: var(--mshp-space-6);
}

.mshp-page-title {
  margin: 0;
  color: var(--mshp-text-strong);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.mshp-page-description {
  max-width: 760px;
  margin: var(--mshp-space-2) 0 0;
  color: var(--mshp-text-muted);
}

.mshp-eyebrow {
  margin: 0 0 var(--mshp-space-1);
  color: var(--mshp-brand-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mshp-section { margin-top: var(--mshp-space-8); }
.mshp-section-title {
  margin: 0 0 var(--mshp-space-4);
  color: var(--mshp-text-strong);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.mshp-card {
  background: var(--mshp-bg-surface);
  border: 1px solid var(--mshp-border);
  border-radius: var(--mshp-radius-lg);
  box-shadow: var(--mshp-shadow-sm);
}

.mshp-card__body { padding: var(--mshp-space-6); }
.mshp-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mshp-space-4);
  padding: var(--mshp-space-5) var(--mshp-space-6);
  border-bottom: 1px solid var(--mshp-border);
}

.mshp-card__title {
  margin: 0;
  color: var(--mshp-text-strong);
  font-size: 18px;
  font-weight: 700;
}

.mshp-grid { display: grid; gap: var(--mshp-space-4); }
.mshp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mshp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mshp-stat {
  min-height: 116px;
  padding: var(--mshp-space-5);
  background: var(--mshp-bg-surface);
  border: 1px solid var(--mshp-border);
  border-radius: var(--mshp-radius-md);
}
.mshp-stat__value {
  display: block;
  margin-bottom: var(--mshp-space-1);
  color: var(--mshp-text-strong);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
}
.mshp-stat__label { color: var(--mshp-text-muted); font-size: 14px; }

.mshp-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mshp-space-2);
  padding: 0 var(--mshp-space-4);
  border: 1px solid transparent;
  border-radius: var(--mshp-radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mshp-button:focus-visible,
.mshp-field:focus-visible,
.mshp-select:focus-visible,
.mshp-textarea:focus-visible,
.mshp-accordion summary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--mshp-focus);
}
.mshp-button--primary {
  color: var(--mshp-brand-white);
  background: var(--mshp-action-primary);
  border-color: var(--mshp-action-primary);
}
.mshp-button--primary:hover { background: var(--mshp-action-primary-hover); border-color: var(--mshp-action-primary-hover); }
.mshp-button--secondary {
  color: var(--mshp-action-secondary-text);
  background: var(--mshp-action-secondary-bg);
  border-color: #BEE5F3;
}
.mshp-button--secondary:hover { background: #DDF1F8; }
.mshp-button--ghost {
  color: var(--mshp-action-primary);
  background: transparent;
  border-color: var(--mshp-border-strong);
}
.mshp-button--ghost:hover { background: var(--mshp-bg-subtle); }
.mshp-button--danger {
  color: #FFFFFF;
  background: var(--mshp-brand-red);
  border-color: var(--mshp-brand-red);
}
.mshp-button:disabled,
.mshp-button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }

.mshp-field-group { display: grid; gap: var(--mshp-space-2); }
.mshp-label { color: var(--mshp-text-strong); font-size: 14px; font-weight: 700; }
.mshp-help { color: var(--mshp-text-muted); font-size: 13px; }
.mshp-field,
.mshp-select,
.mshp-textarea {
  width: 100%;
  color: var(--mshp-text-strong);
  background: var(--mshp-bg-surface);
  border: 1px solid var(--mshp-border-strong);
  border-radius: var(--mshp-radius-sm);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mshp-field,
.mshp-select { min-height: 42px; padding: 0 var(--mshp-space-3); }
.mshp-textarea { min-height: 104px; padding: var(--mshp-space-3); resize: vertical; }
.mshp-field:hover,
.mshp-select:hover,
.mshp-textarea:hover { border-color: #AEBACA; }
.mshp-field:focus,
.mshp-select:focus,
.mshp-textarea:focus { border-color: var(--mshp-brand-primary); outline: 0; }
.mshp-field[aria-invalid="true"] { border-color: var(--mshp-brand-red); }
.mshp-error-text { color: var(--mshp-state-critical-fg); font-size: 13px; }

.mshp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--mshp-radius-pill);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.mshp-badge--demonstrated { color: var(--mshp-state-demonstrated-fg); background: var(--mshp-state-demonstrated-bg); border-color: var(--mshp-state-demonstrated-border); }
.mshp-badge--not-found { color: var(--mshp-state-not-found-fg); background: var(--mshp-state-not-found-bg); border-color: var(--mshp-state-not-found-border); }
.mshp-badge--insufficient { color: var(--mshp-state-insufficient-fg); background: var(--mshp-state-insufficient-bg); border-color: var(--mshp-state-insufficient-border); }
.mshp-badge--critical { color: var(--mshp-state-critical-fg); background: var(--mshp-state-critical-bg); border-color: var(--mshp-state-critical-border); }
.mshp-badge--new { color: #005E86; background: #EAF7FC; border-color: #BEE5F3; }
.mshp-badge--supporting { color: #4C2A72; background: #F4F0F8; border-color: #DCCFEA; }

.mshp-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mshp-space-3);
  padding: var(--mshp-space-4);
  border: 1px solid;
  border-radius: var(--mshp-radius-md);
}
.mshp-alert__icon { font-size: 18px; line-height: 1.4; }
.mshp-alert__title { margin: 0 0 2px; color: var(--mshp-text-strong); font-size: 15px; font-weight: 700; }
.mshp-alert__text { margin: 0; font-size: 14px; }
.mshp-alert--info { color: #005E86; background: #EAF7FC; border-color: #BEE5F3; }
.mshp-alert--warning { color: var(--mshp-state-not-found-fg); background: var(--mshp-state-not-found-bg); border-color: var(--mshp-state-not-found-border); }
.mshp-alert--error { color: var(--mshp-state-critical-fg); background: var(--mshp-state-critical-bg); border-color: var(--mshp-state-critical-border); }

.mshp-table-wrap {
  overflow-x: auto;
  background: var(--mshp-bg-surface);
  border: 1px solid var(--mshp-border);
  border-radius: var(--mshp-radius-lg);
}
.mshp-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}
.mshp-table th,
.mshp-table td { padding: 14px 16px; border-bottom: 1px solid var(--mshp-border); vertical-align: top; }
.mshp-table th {
  color: var(--mshp-text-muted);
  background: var(--mshp-bg-subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mshp-table tbody tr:last-child td { border-bottom: 0; }
.mshp-table tbody tr:hover { background: #FBFDFF; }
.mshp-table__primary { color: var(--mshp-text-strong); font-weight: 700; }
.mshp-table__meta { margin-top: 3px; color: var(--mshp-text-muted); font-size: 13px; }
.mshp-table__row--critical { box-shadow: inset 4px 0 0 var(--mshp-brand-red); }
.mshp-table__row--watch { box-shadow: inset 4px 0 0 var(--mshp-brand-orange); }
.mshp-table__row--insufficient { box-shadow: inset 4px 0 0 #98A2B3; }

.mshp-accordion {
  background: var(--mshp-bg-surface);
  border: 1px solid var(--mshp-border);
  border-radius: var(--mshp-radius-md);
}
.mshp-accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mshp-space-4);
  padding: var(--mshp-space-4) var(--mshp-space-5);
  color: var(--mshp-text-strong);
  font-weight: 700;
  cursor: pointer;
}
.mshp-accordion summary::-webkit-details-marker { display: none; }
.mshp-accordion summary::after { content: "⌄"; color: var(--mshp-text-muted); font-size: 18px; }
.mshp-accordion[open] summary::after { transform: rotate(180deg); }
.mshp-accordion__body { padding: 0 var(--mshp-space-5) var(--mshp-space-5); }

.mshp-context-line {
  display: inline-flex;
  align-items: center;
  gap: var(--mshp-space-2);
  margin-top: var(--mshp-space-3);
  padding: 8px 12px;
  color: #005E86;
  background: #EAF7FC;
  border-radius: var(--mshp-radius-sm);
  font-size: 13px;
  font-weight: 600;
}

.mshp-code {
  padding: 2px 6px;
  color: #334155;
  background: #EEF2F6;
  border-radius: 4px;
  font-family: var(--mshp-font-mono);
  font-size: .92em;
}

.mshp-empty {
  padding: var(--mshp-space-10) var(--mshp-space-6);
  text-align: center;
  background: var(--mshp-bg-surface);
  border: 1px dashed var(--mshp-border-strong);
  border-radius: var(--mshp-radius-lg);
}
.mshp-empty__title { margin: 0 0 var(--mshp-space-2); color: var(--mshp-text-strong); font-size: 18px; font-weight: 700; }
.mshp-empty__text { max-width: 520px; margin: 0 auto; color: var(--mshp-text-muted); }

.mshp-skeleton {
  overflow: hidden;
  min-height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EEF2F6 25%, #F8FAFC 50%, #EEF2F6 75%);
  background-size: 200% 100%;
  animation: mshp-skeleton 1.3s ease-in-out infinite;
}
@keyframes mshp-skeleton { to { background-position: -200% 0; } }

.mshp-color-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: var(--mshp-space-3); }
.mshp-swatch { overflow: hidden; background: var(--mshp-bg-surface); border: 1px solid var(--mshp-border); border-radius: var(--mshp-radius-md); }
.mshp-swatch__color { height: 72px; }
.mshp-swatch__meta { padding: 10px 12px; font-size: 12px; }
.mshp-swatch__name { display: block; color: var(--mshp-text-strong); font-weight: 700; }
.mshp-swatch__hex { color: var(--mshp-text-muted); font-family: var(--mshp-font-mono); }

.mshp-stack { display: flex; flex-wrap: wrap; gap: var(--mshp-space-3); align-items: center; }
.mshp-stack--vertical { display: grid; align-items: stretch; }

@media (max-width: 900px) {
  .mshp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mshp-grid--2 { grid-template-columns: 1fr; }
  .mshp-color-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .mshp-page-header { flex-direction: column; }
}

@media (max-width: 640px) {
  .mshp-topbar__inner,
  .mshp-container { width: min(100% - 32px, var(--mshp-container)); }
  .mshp-topbar__inner { min-height: 56px; }
  .mshp-brand__product { display: none; }
  .mshp-page { padding-top: var(--mshp-space-6); }
  .mshp-grid--4 { grid-template-columns: 1fr; }
  .mshp-color-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .mshp-card__body,
  .mshp-card__header { padding-left: var(--mshp-space-4); padding-right: var(--mshp-space-4); }
}

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