/* Демонстрация: Минимализм. Все селекторы ограничены .dm-minimalism */

.dm-minimalism {
  --bg: #fafaf7;
  --bg2: #f0efea;
  --ink: #1e1e1c;
  --muted: #6b6a65;
  --line: #dad8d0;
  --accent: #b4552d;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
}

.dm-minimalism .mn-logo { font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.dm-minimalism .mn-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dm-minimalism .mn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 4px;
  background: var(--ink); color: #fff; font-weight: 500; font-size: 15px;
}
.dm-minimalism .mn-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dm-minimalism .mn-link { font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.dm-minimalism .mn-actions { display: flex; align-items: center; gap: 28px; }

/* ----- Сайт ----- */
.dm-minimalism.dm--site { padding: 0 96px; }
.dm-minimalism .mn-nav { display: flex; align-items: center; height: 96px; gap: 48px; }
.dm-minimalism .mn-links { display: flex; gap: 32px; font-size: 15px; color: var(--muted); margin-left: auto; }
.dm-minimalism .mn-links .is-active { color: var(--ink); }
.dm-minimalism .mn-cart { font-size: 15px; }
.dm-minimalism .mn-hero { display: grid; grid-template-columns: 1fr 440px; gap: 96px; align-items: end; padding-top: 56px; }
.dm-minimalism .mn-hero h1 { font-size: 60px; line-height: 1.06; font-weight: 400; letter-spacing: -.03em; margin: 20px 0 24px; max-width: 560px; }
.dm-minimalism .mn-lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 440px; margin-bottom: 40px; }
.dm-minimalism .mn-hero__image { background: var(--bg2); height: 440px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.dm-minimalism .mn-hero__image svg { width: 300px; height: auto; margin-bottom: 8px; }
.dm-minimalism .mn-hero__image figcaption { width: 100%; display: flex; justify-content: space-between; padding: 16px 20px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.dm-minimalism .mn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.dm-minimalism .mn-num { font-size: 12px; color: var(--accent); font-weight: 600; }
.dm-minimalism .mn-row h2 { font-size: 18px; font-weight: 600; margin: 10px 0 6px; }
.dm-minimalism .mn-row p { font-size: 14px; color: var(--muted); }

/* ----- Приложение ----- */
.dm-minimalism.dm--app { display: flex; flex-direction: column; }
.dm-minimalism .mn-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 600; }
.dm-minimalism .mn-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-minimalism .mn-status__icons i { width: 16px; height: 10px; border-radius: 2px; background: var(--ink); }
.dm-minimalism .mn-appbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: 20px; }
.dm-minimalism .mn-appbar__title { font-size: 15px; font-weight: 500; }
.dm-minimalism .mn-photo { position: relative; margin: 0 24px; height: 280px; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.dm-minimalism .mn-dots { position: absolute; bottom: 14px; display: flex; gap: 6px; }
.dm-minimalism .mn-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dm-minimalism .mn-dots i.is-on { background: var(--ink); }
.dm-minimalism .mn-sheet { padding: 28px 24px 0; flex: 1; }
.dm-minimalism .mn-title-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.dm-minimalism .mn-sheet h1 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.dm-minimalism .mn-price { font-size: 17px; font-weight: 600; }
.dm-minimalism .mn-desc { font-size: 15px; color: var(--muted); margin: 10px 0 22px; }
.dm-minimalism .mn-field-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.dm-minimalism .mn-field-label b { color: var(--ink); font-weight: 600; }
.dm-minimalism .mn-swatches { display: flex; gap: 12px; margin-bottom: 22px; }
.dm-minimalism .mn-swatches i { width: 32px; height: 32px; border-radius: 50%; }
.dm-minimalism .mn-swatches i.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.dm-minimalism .mn-stepper { display: inline-flex; align-items: center; gap: 22px; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 24px; font-size: 17px; }
.dm-minimalism .mn-btn--block { display: flex; width: 100%; height: 54px; }
.dm-minimalism .mn-tabbar { display: flex; justify-content: space-around; padding: 14px 0 26px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.dm-minimalism .mn-tabbar .is-active { color: var(--ink); font-weight: 600; }

/* ----- Веб-платформа ----- */
.dm-minimalism.dm--platform { display: grid; grid-template-columns: 220px 1fr; }
.dm-minimalism .mn-side { display: flex; flex-direction: column; padding: 32px 28px; border-right: 1px solid var(--line); }
.dm-minimalism .mn-side__nav { display: grid; gap: 4px; margin-top: 48px; font-size: 15px; color: var(--muted); }
.dm-minimalism .mn-side__nav li { padding: 8px 0; }
.dm-minimalism .mn-side__nav .is-active { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); padding-left: 12px; }
.dm-minimalism .mn-side__nav--bottom { margin-top: auto; }
.dm-minimalism .mn-work { padding: 40px 56px; }
.dm-minimalism .mn-work__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-minimalism .mn-work__head h1 { font-size: 36px; font-weight: 500; letter-spacing: -.02em; margin-top: 6px; }
.dm-minimalism .mn-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dm-minimalism .mn-kpis div { padding: 22px 0; }
.dm-minimalism .mn-kpis div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.dm-minimalism .mn-kpis p { font-size: 13px; color: var(--muted); }
.dm-minimalism .mn-kpis b { display: block; font-size: 28px; font-weight: 500; margin-top: 4px; letter-spacing: -.02em; }
.dm-minimalism .mn-filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dm-minimalism .mn-tabs { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
.dm-minimalism .mn-tabs li { padding: 10px 0; }
.dm-minimalism .mn-tabs .is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.dm-minimalism .mn-search { width: 300px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.dm-minimalism .mn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-minimalism .mn-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 16px 0; border-bottom: 1px solid var(--line); }
.dm-minimalism .mn-table td { padding: 17px 0; border-bottom: 1px solid var(--line); }
.dm-minimalism .mn-table .r { text-align: right; }
.dm-minimalism .mn-st { display: inline-flex; align-items: center; gap: 8px; }
.dm-minimalism .mn-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.dm-minimalism .mn-st--new::before { background: var(--accent); }
.dm-minimalism .mn-st--work::before { background: #c9a227; }
.dm-minimalism .mn-st--done::before { background: #4f7a5a; }