/* minimalism.css */
/* Демонстрация: Минимализм. Все селекторы ограничены .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; }

/* swiss.css */
/* Демонстрация: Швейцарский стиль. Все селекторы ограничены .dm-swiss */

.dm-swiss {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --red: #d10011;
  --line: #e6e6e6;
  --bg2: #f2f2f2;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Tight", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ----- Общие элементы ----- */
.dm-swiss .sw-logo { font-weight: 900; font-size: 22px; line-height: .95; letter-spacing: -.03em; }
.dm-swiss .sw-logo--sm { font-size: 18px; }
.dm-swiss .sw-label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-swiss .sw-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 52px; padding: 0 18px;
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 700;
}
.dm-swiss .sw-btn i { font-style: normal; font-size: 20px; font-weight: 500; }
.dm-swiss .sw-btn--red { background: var(--red); }

/* ----- Сайт ----- */
.dm-swiss.dm--site {
  padding: 32px 40px 0;
  background-image: repeating-linear-gradient(90deg, rgba(209, 0, 17, .07) 0 1px, transparent 1px 75px, rgba(209, 0, 17, .07) 75px 76px, transparent 76px 95px);
  background-position: 40px 0;
  background-size: 1120px 100%;
  background-repeat: no-repeat;
}
.dm-swiss .sw-nav,
.dm-swiss .sw-hero,
.dm-swiss .sw-program { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; }
.dm-swiss .sw-nav { align-items: start; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.dm-swiss .sw-nav .sw-logo { grid-column: 1 / 3; }
.dm-swiss .sw-nav__meta { grid-column: 3 / 6; font-size: 13px; line-height: 1.35; font-weight: 500; }
.dm-swiss .sw-menu { grid-column: 7 / 12; display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.dm-swiss .sw-menu li { display: flex; align-items: center; gap: 8px; }
.dm-swiss .sw-menu .is-active::before { content: ""; width: 9px; height: 9px; background: var(--red); }
.dm-swiss .sw-nav__lang { grid-column: 12 / 13; font-size: 13px; color: var(--muted); }

.dm-swiss .sw-hero { grid-template-rows: auto auto; margin-top: 22px; }
.dm-swiss .sw-hero__index { grid-column: 1 / 2; grid-row: 1; font-size: 13px; font-weight: 700; padding-top: 22px; }
.dm-swiss .sw-hero__title {
  grid-column: 2 / 10; grid-row: 1;
  font-size: 182px; line-height: .86; font-weight: 900; letter-spacing: -.055em;
  margin-left: -10px;
}
.dm-swiss .sw-hero__block {
  grid-column: 10 / 13; grid-row: 1 / 3;
  display: flex; flex-direction: column;
  background: var(--red); color: #fff; padding: 20px 20px 22px;
}
.dm-swiss .sw-hero__dates { font-size: 76px; font-weight: 900; line-height: .9; letter-spacing: -.05em; }
.dm-swiss .sw-hero__month { font-size: 15px; font-weight: 700; margin-top: 12px; padding-top: 10px; border-top: 2px solid #fff; }
.dm-swiss .sw-hero__place { margin-top: auto; font-size: 14px; line-height: 1.35; font-weight: 500; }
.dm-swiss .sw-hero__facts { grid-column: 1 / 4; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.dm-swiss .sw-hero__facts div { border-top: 2px solid var(--ink); padding-top: 8px; }
.dm-swiss .sw-hero__facts dt { font-size: 12px; font-weight: 500; color: var(--muted); }
.dm-swiss .sw-hero__facts dd { font-size: 36px; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.dm-swiss .sw-hero__lead { grid-column: 4 / 7; grid-row: 2; margin-top: 36px; font-size: 16px; line-height: 1.45; font-weight: 500; }
.dm-swiss .sw-hero .sw-btn { grid-column: 7 / 10; grid-row: 2; margin-top: 36px; align-self: start; }

.dm-swiss .sw-program { margin-top: 44px; padding-top: 18px; border-top: 2px solid var(--ink); }
.dm-swiss .sw-program__index { grid-column: 1 / 2; font-size: 13px; font-weight: 700; }
.dm-swiss .sw-program__title { grid-column: 2 / 5; font-size: 40px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.dm-swiss .sw-day { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 16px; border-top: 1px solid var(--ink); }
.dm-swiss .sw-day b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.dm-swiss .sw-day span { font-size: 14px; line-height: 1.35; font-weight: 500; }
.dm-swiss .sw-day em { font-style: normal; font-size: 12px; color: var(--muted); }
.dm-swiss .sw-day.is-red { background: var(--red); color: #fff; border-top-color: var(--red); }
.dm-swiss .sw-day.is-red em { color: #fff; }

/* ----- Приложение ----- */
.dm-swiss.dm--app { display: flex; flex-direction: column; padding: 0 20px; }
.dm-swiss .sw-status { display: flex; justify-content: space-between; padding: 14px 8px 0; font-size: 14px; font-weight: 700; }
.dm-swiss .sw-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-swiss .sw-status__icons i { width: 16px; height: 10px; background: var(--ink); }
.dm-swiss .sw-apphead { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.dm-swiss .sw-apphead__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.dm-swiss .sw-apphead__meta::before { content: ""; width: 9px; height: 9px; background: var(--red); }
.dm-swiss .sw-today { display: grid; grid-template-columns: 210px 1fr; column-gap: 16px; align-items: end; margin-top: 14px; }
.dm-swiss .sw-today__num { font-size: 168px; font-weight: 900; line-height: .8; letter-spacing: -.07em; color: var(--red); margin-left: -8px; }
.dm-swiss .sw-today__text { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.dm-swiss .sw-today__text b { font-size: 24px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.dm-swiss .sw-today__text span:last-child { font-size: 13px; line-height: 1.35; color: var(--muted); margin-top: 6px; }
.dm-swiss .sw-days { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dm-swiss .sw-days li { height: 44px; display: flex; align-items: center; padding-left: 8px; font-size: 17px; font-weight: 700; }
.dm-swiss .sw-days .is-active { background: var(--ink); color: #fff; }
.dm-swiss .sw-agenda { flex: 1; margin-top: 4px; }
.dm-swiss .sw-agenda li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dm-swiss .sw-agenda b { font-size: 20px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.dm-swiss .sw-agenda span { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.dm-swiss .sw-agenda em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.dm-swiss .sw-agenda .is-now b,
.dm-swiss .sw-agenda .is-now em { color: var(--red); }
.dm-swiss .sw-agenda .is-now { box-shadow: inset 4px 0 0 var(--red); padding-left: 0; }
.dm-swiss .sw-agenda .is-now b { padding-left: 12px; }
.dm-swiss .sw-btn--block { margin: 12px 0 0; }
.dm-swiss .sw-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px -20px 0; padding: 12px 20px 26px; border-top: 2px solid var(--ink); font-size: 12px; font-weight: 500; }
.dm-swiss .sw-tabbar span { display: flex; flex-direction: column; gap: 6px; }
.dm-swiss .sw-tabbar span::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--ink); }
.dm-swiss .sw-tabbar .is-active { font-weight: 700; }
.dm-swiss .sw-tabbar .is-active::before { background: var(--red); border-color: var(--red); }

/* ----- Веб-платформа ----- */
.dm-swiss.dm--platform { display: grid; grid-template-columns: 220px 1fr; }
.dm-swiss .sw-side { display: flex; flex-direction: column; padding: 36px 24px 32px 32px; border-right: 2px solid var(--ink); }
.dm-swiss .sw-side__sub { margin-top: 12px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.dm-swiss .sw-side__nav { margin-top: 56px; border-top: 2px solid var(--ink); }
.dm-swiss .sw-side__nav li { display: grid; grid-template-columns: 32px 1fr; padding: 11px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
.dm-swiss .sw-side__nav i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 3px; }
.dm-swiss .sw-side__nav .is-active { font-weight: 900; color: var(--red); }
.dm-swiss .sw-side__nav .is-active i { color: var(--red); }
.dm-swiss .sw-side__user { margin-top: auto; font-size: 13px; line-height: 1.4; font-weight: 500; padding-top: 12px; border-top: 1px solid var(--ink); }

.dm-swiss .sw-main { display: flex; flex-direction: column; padding: 36px 40px 32px; }
.dm-swiss .sw-main__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; align-items: end; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.dm-swiss .sw-main__head .sw-label { grid-column: 1 / 7; grid-row: 1; }
.dm-swiss .sw-main__head h1 { grid-column: 1 / 7; grid-row: 2; font-size: 96px; font-weight: 900; line-height: .86; letter-spacing: -.055em; margin: 14px 0 0 -5px; }
.dm-swiss .sw-main__big { grid-column: 7 / 10; grid-row: 1 / 3; display: flex; flex-direction: column; }
.dm-swiss .sw-main__big b { font-size: 56px; font-weight: 900; letter-spacing: -.05em; line-height: .9; color: var(--red); }
.dm-swiss .sw-main__big span { font-size: 13px; line-height: 1.35; margin-top: 8px; font-weight: 500; }
.dm-swiss .sw-main__head .sw-btn { grid-column: 10 / 13; grid-row: 1 / 3; }

.dm-swiss .sw-kpis { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 20px; margin-top: 24px; }
.dm-swiss .sw-kpis div { border-top: 1px solid var(--ink); padding-top: 10px; }
.dm-swiss .sw-kpis b { display: block; font-size: 42px; font-weight: 900; letter-spacing: -.045em; line-height: 1.05; margin-top: 6px; }
.dm-swiss .sw-kpis em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }

.dm-swiss .sw-grid2 { flex: 1; display: grid; grid-template-columns: 5fr 7fr; column-gap: 20px; margin-top: 32px; min-height: 0; }
.dm-swiss .sw-grid2 h2 { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.dm-swiss .sw-chart { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 12px; }
.dm-swiss .sw-bars { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; margin-top: 20px; border-bottom: 2px solid var(--ink); }
.dm-swiss .sw-bars div { position: relative; background: var(--ink); }
.dm-swiss .sw-bars div.is-red { background: var(--red); }
.dm-swiss .sw-bars span { position: absolute; top: -20px; left: 0; font-size: 12px; font-weight: 700; }
.dm-swiss .sw-bars__axis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.dm-swiss .sw-orders { border-top: 2px solid var(--ink); padding-top: 12px; }
.dm-swiss .sw-orders__head { display: flex; justify-content: space-between; align-items: baseline; }
.dm-swiss .sw-tabs { display: flex; gap: 18px; font-size: 13px; font-weight: 500; color: var(--muted); }
.dm-swiss .sw-tabs .is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.dm-swiss .sw-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.dm-swiss .sw-table th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 0; border-bottom: 1px solid var(--ink); }
.dm-swiss .sw-table td { padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.dm-swiss .sw-table td:first-child { font-weight: 700; width: 64px; }
.dm-swiss .sw-table .r { text-align: right; }

/* editorial.css */
/* Демонстрация: Редакционный стиль. Все селекторы ограничены .dm-editorial */

.dm-editorial {
  --paper: #f6f1e7;
  --paper2: #ece4d4;
  --ink: #1c1a17;
  --muted: #5e574d;
  --accent: #8c1c13;
  --rule: #cfc6b4;
  --display: "Playfair Display", serif;
  --text: "Source Serif 4", serif;
  --sans: "IBM Plex Sans", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
}

/* ----- Общие элементы ----- */
.dm-editorial .ed-rubric { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.dm-editorial .ed-byline { font-family: var(--sans); font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.dm-editorial .ed-byline b { font-weight: 600; color: var(--ink); }
.dm-editorial .ed-figure svg { display: block; width: 100%; height: auto; }
.dm-editorial .ed-figure figcaption { margin-top: 8px; font-family: var(--text); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--muted); }
.dm-editorial .ed-drop::first-letter {
  float: left; font-family: var(--display); font-weight: 900; color: var(--accent);
  font-size: 64px; line-height: .82; margin: 6px 8px 0 0;
}
.dm-editorial .ed-btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.dm-editorial .ed-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ----- Сайт ----- */
.dm-editorial.dm--site { padding: 0 48px; }
.dm-editorial .ed-strip {
  display: flex; justify-content: space-between; height: 32px; align-items: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.dm-editorial .ed-mast {
  text-align: center; font-family: var(--display); font-weight: 900;
  font-size: 84px; line-height: 1; letter-spacing: -.01em; padding: 10px 0 6px;
}
.dm-editorial .ed-rubrics {
  display: flex; justify-content: center; gap: 34px; padding: 9px 0;
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.dm-editorial .ed-rubrics .is-active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.dm-editorial .ed-page { display: grid; grid-template-columns: 8fr 4fr; column-gap: 36px; margin-top: 22px; }
.dm-editorial .ed-lead__title { font-family: var(--display); font-weight: 700; font-size: 50px; line-height: 1.04; letter-spacing: -.01em; margin-top: 8px; }
.dm-editorial .ed-lead__title em { font-weight: 400; font-style: italic; color: var(--accent); }
.dm-editorial .ed-lead__dek { font-style: italic; font-size: 19px; line-height: 1.4; margin-top: 12px; max-width: 640px; }
.dm-editorial .ed-lead .ed-byline { margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-lead__body { display: grid; grid-template-columns: 300px 1fr; column-gap: 24px; margin-top: 16px; }
.dm-editorial .ed-columns { column-count: 2; column-gap: 22px; column-rule: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; text-align: justify; hyphens: auto; }
.dm-editorial .ed-columns p + p { text-indent: 1.5em; }
.dm-editorial .ed-side { border-left: 1px solid var(--rule); padding-left: 28px; }
.dm-editorial .ed-side__title { font-family: var(--display); font-style: italic; font-size: 26px; line-height: 1.1; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.dm-editorial .ed-toc li { display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-toc b { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 28px; line-height: 1; color: var(--accent); }
.dm-editorial .ed-toc p { font-weight: 600; font-size: 16px; line-height: 1.3; margin-top: 4px; }
.dm-editorial .ed-quote { margin-top: 18px; font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.3; padding-top: 14px; border-top: 3px double var(--ink); }
.dm-editorial .ed-quote cite { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dm-editorial .ed-next { display: grid; grid-template-columns: 3fr 3fr 3fr 3fr; column-gap: 28px; margin-top: 22px; padding-top: 14px; border-top: 3px double var(--ink); }
.dm-editorial .ed-next__label { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.dm-editorial .ed-next__label i { font-weight: 400; color: var(--accent); }
.dm-editorial .ed-next div { border-left: 1px solid var(--rule); padding-left: 16px; }
.dm-editorial .ed-next div p { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.2; margin-top: 4px; }
.dm-editorial .ed-next div em { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ----- Приложение ----- */
.dm-editorial.dm--app { display: flex; flex-direction: column; }
.dm-editorial .ed-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-family: var(--sans); font-size: 14px; font-weight: 600; }
.dm-editorial .ed-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-editorial .ed-status__icons i { width: 16px; height: 10px; border-radius: 2px; background: var(--ink); }
.dm-editorial .ed-appbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 10px; border-bottom: 3px double var(--ink); }
.dm-editorial .ed-appbar__icon { width: 32px; font-family: var(--sans); font-size: 18px; }
.dm-editorial .ed-appbar__aa { text-align: right; font-family: var(--display); font-size: 17px; }
.dm-editorial .ed-appbar__mast { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
.dm-editorial .ed-progress { height: 3px; background: var(--paper2); }
.dm-editorial .ed-progress i { display: block; width: 18%; height: 100%; background: var(--accent); }
.dm-editorial .ed-read { flex: 1; padding: 20px 22px 0; overflow: hidden; }
.dm-editorial .ed-read__title { font-family: var(--display); font-weight: 700; font-size: 33px; line-height: 1.06; margin-top: 8px; }
.dm-editorial .ed-read__title em { font-weight: 400; font-style: italic; color: var(--accent); }
.dm-editorial .ed-read__dek { font-style: italic; font-size: 17px; line-height: 1.4; margin-top: 12px; }
.dm-editorial .ed-read .ed-byline { margin-top: 12px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-figure--app { margin-top: 16px; }
.dm-editorial .ed-figure--app figcaption { font-size: 12px; }
.dm-editorial .ed-read__text { margin-top: 14px; font-size: 17px; line-height: 1.55; }
.dm-editorial .ed-readbar {
  display: flex; gap: 16px; align-items: center; padding: 14px 22px 28px;
  border-top: 1px solid var(--ink); background: var(--paper);
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.dm-editorial .ed-readbar__left { margin-left: auto; font-weight: 400; font-style: italic; font-family: var(--text); font-size: 13px; color: var(--muted); letter-spacing: 0; }

/* ----- Веб-платформа ----- */
.dm-editorial.dm--platform { display: grid; grid-template-columns: 236px 1fr; }
.dm-editorial .ed-side-nav { display: flex; flex-direction: column; padding: 32px 26px; background: var(--paper2); border-right: 1px solid var(--rule); }
.dm-editorial .ed-side-nav__mast { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.dm-editorial .ed-side-nav__sub { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; padding-bottom: 18px; border-bottom: 3px double var(--ink); }
.dm-editorial .ed-side-nav ul { margin-top: 18px; }
.dm-editorial .ed-side-nav li { padding: 9px 0; font-size: 17px; border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-side-nav .is-active { font-weight: 600; color: var(--accent); }
.dm-editorial .ed-side-nav .is-active::before { content: "§ "; font-family: var(--display); }
.dm-editorial .ed-side-nav__note { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ink); }
.dm-editorial .ed-side-nav__note b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.1; }
.dm-editorial .ed-side-nav__note span:last-child { font-size: 13px; color: var(--muted); }

.dm-editorial .ed-desk { display: flex; flex-direction: column; padding: 30px 40px 28px; }
.dm-editorial .ed-desk__head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.dm-editorial .ed-desk__head h1 { font-family: var(--display); font-weight: 700; font-size: 42px; line-height: 1.1; margin-top: 6px; }
.dm-editorial .ed-desk__head h1 em { font-weight: 400; color: var(--accent); }
.dm-editorial .ed-desk__meta { font-style: italic; font-size: 15px; color: var(--muted); margin-top: 4px; }
.dm-editorial .ed-desk__actions { display: flex; gap: 10px; }
.dm-editorial .ed-section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-section-head h2 { font-family: var(--display); font-weight: 700; font-size: 22px; }
.dm-editorial .ed-section-head > span { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.dm-editorial .ed-plan { margin-top: 22px; }
.dm-editorial .ed-spreads { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 16px; }
.dm-editorial .ed-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dm-editorial .ed-spread p { grid-column: 1 / 3; margin-top: 8px; font-size: 13px; line-height: 1.3; }
.dm-editorial .ed-spread p b { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.dm-editorial .ed-pg { height: 104px; padding: 8px 6px; background: #fffdf8; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.dm-editorial .ed-pg + .ed-pg { border-left: 0; }
.dm-editorial .ed-pg i { display: block; height: 3px; background: #c9bfae; }
.dm-editorial .ed-pg .ed-pg__h { height: 8px; width: 80%; background: var(--ink); }
.dm-editorial .ed-pg .ed-pg__img { height: 38px; background: #d6b48f; }
.dm-editorial .ed-pg .ed-pg__img--big { flex: 1; background: #b9825a; }
.dm-editorial .ed-pg .ed-pg__drop { width: 14px; height: 14px; background: var(--accent); }
.dm-editorial .ed-pg .ed-pg__quote { height: 16px; background: transparent; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.dm-editorial .ed-pg .ed-pg__mast { height: auto; background: none; font-family: var(--display); font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; color: var(--paper); text-align: center; }
.dm-editorial .ed-spread.is-cover .ed-pg { grid-column: 2; background: var(--accent); border-color: var(--accent); }
.dm-editorial .ed-spread.is-cover .ed-pg__img { flex: 1; background: #d6b48f; }
.dm-editorial .ed-spread.is-active .ed-pg { border: 2px solid var(--accent); }
.dm-editorial .ed-spread.is-active .ed-pg + .ed-pg { border-left: 0; }
.dm-editorial .ed-spread.is-active p { color: var(--accent); font-weight: 600; }
.dm-editorial .ed-spread.is-empty .ed-pg { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(94, 87, 77, .14) 6px 7px); border-style: dashed; }
.dm-editorial .ed-spread.is-empty p { font-style: italic; color: var(--muted); }

.dm-editorial .ed-mats { margin-top: 26px; }
.dm-editorial .ed-filter { display: flex; gap: 20px; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.dm-editorial .ed-filter .is-active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.dm-editorial .ed-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.dm-editorial .ed-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 10px 0; border-bottom: 1px solid var(--ink); }
.dm-editorial .ed-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); }
.dm-editorial .ed-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.dm-editorial .ed-t-rub { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); width: 120px; }
.dm-editorial .ed-t-title { font-family: var(--display); font-size: 17px; font-weight: 700; }
.dm-editorial .ed-st { display: inline-flex; align-items: center; gap: 7px; }
.dm-editorial .ed-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.dm-editorial .ed-st--ok::before { background: #4d5e33; border-color: #4d5e33; }
.dm-editorial .ed-st--proof::before { background: #b07a1e; border-color: #b07a1e; }
.dm-editorial .ed-st--work::before { background: transparent; border-color: var(--muted); }

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

.dm-brutalism {
  --bg: #ffffff;
  --ink: #000000;
  --muted: #5a5a5a;
  --link: #0000ee;
  --visited: #551a8b;
  --signal: #ffff00;
  --error: #cc0000;
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.4;
}

/* ----- Общие элементы ----- */
.dm-brutalism .br-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.dm-brutalism .br-link--visited { color: var(--visited); }
.dm-brutalism mark { background: var(--signal); color: var(--ink); padding: 0 4px; }
.dm-brutalism .br-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 34px; padding: 0 12px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.dm-brutalism .br-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 18px;
  background: var(--ink); color: #fff;
  border: 3px solid var(--ink);
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
.dm-brutalism .br-btn--signal { background: var(--signal); color: var(--ink); }
.dm-brutalism .br-sysbar {
  display: flex; justify-content: space-between; align-items: center;
  height: 28px; padding: 0 12px;
  background: var(--ink); color: #fff; font-size: 12px;
}
.dm-brutalism .br-sysbar__link { text-decoration: underline; }
.dm-brutalism .br-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-brutalism .br-table td { padding: 0 12px; height: 40px; border-bottom: 1px solid var(--ink); }
.dm-brutalism .br-table .r { text-align: right; }
@keyframes br-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes br-ticker { from { transform: translateX(0); } to { transform: translateX(-40%); } }

/* ----- Сайт ----- */
.dm-brutalism.dm--site { display: flex; flex-direction: column; }
.dm-brutalism .br-nav { display: grid; grid-template-columns: 260px 1fr auto; border-bottom: 3px solid var(--ink); }
.dm-brutalism .br-nav > * { display: flex; align-items: center; height: 52px; padding: 0 16px; }
.dm-brutalism .br-logo { font-size: 20px; font-weight: 800; letter-spacing: -.02em; border-right: 3px solid var(--ink); }
.dm-brutalism .br-nav__links { gap: 10px; font-size: 15px; white-space: pre; }
.dm-brutalism .br-nav__cart { background: var(--ink); color: #fff; font-weight: 700; }

.dm-brutalism .br-hero { display: grid; grid-template-columns: 1fr 380px; border-bottom: 3px solid var(--ink); }
.dm-brutalism .br-hero__main { padding: 22px 24px 24px; border-right: 3px solid var(--ink); }
.dm-brutalism .br-hero__title { font-size: 120px; font-weight: 800; line-height: .9; letter-spacing: -.06em; margin-left: -6px; }
.dm-brutalism .br-hero__lead { font-size: 20px; line-height: 1.4; max-width: 640px; margin-top: 18px; }
.dm-brutalism .br-actions { display: flex; align-items: center; gap: 24px; margin-top: 20px; font-size: 15px; }
.dm-brutalism .br-price { display: flex; flex-direction: column; }
.dm-brutalism .br-price dl { flex: 1; }
.dm-brutalism .br-price dl div { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--ink); font-size: 14px; }
.dm-brutalism .br-price dd { font-weight: 700; }
.dm-brutalism .br-note { padding: 10px 14px; font-size: 12px; color: var(--muted); }

.dm-brutalism .br-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 3px solid var(--ink); }
.dm-brutalism .br-facts div { padding: 10px 16px; display: flex; flex-direction: column; }
.dm-brutalism .br-facts div + div { border-left: 3px solid var(--ink); }
.dm-brutalism .br-facts span { font-size: 12px; color: var(--muted); }
.dm-brutalism .br-facts b { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.dm-brutalism .br-facts .is-signal { background: var(--signal); }
.dm-brutalism .br-facts .is-signal span { color: var(--ink); }

.dm-brutalism .br-ticker { height: 34px; overflow: hidden; border-bottom: 3px solid var(--ink); display: flex; align-items: center; }
.dm-brutalism .br-ticker span { white-space: nowrap; font-size: 14px; font-weight: 700; padding-left: 16px; animation: br-ticker 30s linear infinite; }
.dm-brutalism .br-zines { flex: 1; }
.dm-brutalism .br-bar--wide { height: 36px; padding: 0 16px; font-size: 14px; }
.dm-brutalism .br-bar--wide span:last-child { font-weight: 400; }
.dm-brutalism .br-zines .br-table td:first-child { width: 80px; color: var(--muted); padding-left: 16px; }
.dm-brutalism .br-zines .br-table td + td { border-left: 1px solid var(--ink); }

/* ----- Приложение ----- */
.dm-brutalism.dm--app { display: flex; flex-direction: column; }
.dm-brutalism .br-status { display: flex; justify-content: space-between; padding: 14px 24px 8px; font-size: 13px; font-weight: 700; }
.dm-brutalism .br-apphead { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 16px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); font-size: 15px; }
.dm-brutalism .br-apphead b { font-size: 19px; font-weight: 800; }
.dm-brutalism .br-state { display: flex; flex-direction: column; padding: 14px 16px 16px; background: var(--ink); color: #fff; }
.dm-brutalism .br-state__label { font-size: 12px; }
.dm-brutalism .br-state__value { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.05em; margin-top: 4px; }
.dm-brutalism .br-state__bar { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--signal); }
.dm-brutalism .br-spec { border-bottom: 3px solid var(--ink); }
.dm-brutalism .br-spec div { display: grid; grid-template-columns: 110px 1fr; border-bottom: 1px solid var(--ink); }
.dm-brutalism .br-spec div:last-child { border-bottom: 0; }
.dm-brutalism .br-spec dt { padding: 9px 12px 9px 16px; color: var(--muted); font-size: 14px; border-right: 1px solid var(--ink); }
.dm-brutalism .br-spec dd { padding: 9px 12px; font-size: 15px; font-weight: 700; }
.dm-brutalism .br-spec .is-signal { background: var(--signal); }
.dm-brutalism .br-spec .is-signal dt { color: var(--ink); }
.dm-brutalism .br-log { flex: 1; margin: 14px 16px 0; border: 3px solid var(--ink); }
.dm-brutalism .br-log ul { padding: 8px 12px; font-size: 13px; line-height: 1.75; }
.dm-brutalism .br-log i { font-style: normal; color: var(--muted); margin-right: 6px; }
.dm-brutalism .br-log b { font-weight: 800; }
.dm-brutalism .br-cursor { animation: br-blink 1s steps(1) infinite; }
.dm-brutalism .br-btn--block { display: flex; margin: 14px 16px 0; height: 54px; background: var(--ink); }
.dm-brutalism .br-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border-top: 3px solid var(--ink); padding-bottom: 22px; font-size: 13px; font-weight: 700; }
.dm-brutalism .br-tabbar span { display: flex; align-items: center; justify-content: center; height: 48px; }
.dm-brutalism .br-tabbar span + span { border-left: 3px solid var(--ink); }
.dm-brutalism .br-tabbar .is-active { background: var(--ink); color: #fff; }

/* ----- Веб-платформа ----- */
.dm-brutalism.dm--platform { display: flex; flex-direction: column; }
.dm-brutalism .br-shell { flex: 1; display: grid; grid-template-columns: 200px 1fr 280px; min-height: 0; }
.dm-brutalism .br-sidenav { display: flex; flex-direction: column; border-right: 3px solid var(--ink); }
.dm-brutalism .br-sidenav li { padding: 9px 14px; border-bottom: 1px solid var(--ink); font-size: 14px; color: var(--link); text-decoration: underline; }
.dm-brutalism .br-sidenav li.is-active { background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; }
.dm-brutalism .br-sidenav__sys { margin: auto 0 0; padding: 12px 14px; border-top: 3px solid var(--ink); font-family: inherit; font-size: 12px; line-height: 1.6; white-space: pre; }
.dm-brutalism .br-work { display: flex; flex-direction: column; padding: 20px 24px 16px; min-width: 0; }
.dm-brutalism .br-work__head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 16px; border-bottom: 3px solid var(--ink); }
.dm-brutalism .br-work__head h1 { font-size: 76px; font-weight: 800; line-height: .92; letter-spacing: -.06em; }
.dm-brutalism .br-counters { display: flex; border: 3px solid var(--ink); }
.dm-brutalism .br-counters div { display: flex; flex-direction: column; padding: 8px 14px; min-width: 100px; }
.dm-brutalism .br-counters div + div { border-left: 3px solid var(--ink); }
.dm-brutalism .br-counters span { font-size: 12px; color: var(--muted); }
.dm-brutalism .br-counters b { font-size: 34px; font-weight: 800; line-height: 1.05; }
.dm-brutalism .br-counters .is-error { color: var(--error); }
.dm-brutalism .br-counters .is-error span { color: var(--error); }
.dm-brutalism .br-toolbar { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 13px; }
.dm-brutalism .br-checks { white-space: nowrap; }
.dm-brutalism .br-field { flex: 1; display: flex; align-items: center; height: 46px; padding: 0 12px; border: 3px solid var(--ink); white-space: nowrap; }
.dm-brutalism .br-field i { font-style: normal; color: var(--muted); margin-left: 8px; }
.dm-brutalism .br-toolbar .br-btn { font-size: 13px; padding: 0 14px; }
.dm-brutalism .br-table--grid { border: 3px solid var(--ink); font-size: 13px; }
.dm-brutalism .br-table--grid th { text-align: left; height: 34px; padding: 0 10px; background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; border-left: 1px solid #fff; }
.dm-brutalism .br-table--grid th:first-child { border-left: 0; }
.dm-brutalism .br-table--grid td { height: 40px; padding: 0 10px; border: 1px solid var(--ink); white-space: nowrap; }
.dm-brutalism .br-table--grid tr.is-error td { color: var(--error); font-weight: 700; }
.dm-brutalism .br-st { font-weight: 700; }
.dm-brutalism .br-st::before { content: "["; }
.dm-brutalism .br-st::after { content: "]"; }
.dm-brutalism .br-st--run { background: var(--ink); color: #fff; padding: 2px 0; }
.dm-brutalism .br-st--err { color: var(--error); }
.dm-brutalism .br-st--done { color: var(--muted); }
.dm-brutalism .br-pager { margin-top: 10px; font-size: 13px; }
.dm-brutalism .br-logpanel { display: flex; flex-direction: column; border-left: 3px solid var(--ink); }
.dm-brutalism .br-logpanel ul { flex: 1; font-size: 12.5px; }
.dm-brutalism .br-logpanel li { padding: 8px 12px; border-bottom: 1px solid var(--ink); }
.dm-brutalism .br-logpanel li i { font-style: normal; color: var(--muted); margin-right: 8px; }
.dm-brutalism .br-logpanel li.is-warn { background: var(--signal); font-weight: 700; }
.dm-brutalism .br-logpanel li.is-warn i { color: var(--ink); }
.dm-brutalism .br-logpanel > .br-link { padding: 12px; font-size: 13px; border-top: 3px solid var(--ink); }
.dm-brutalism .br-logpanel li.is-sep { color: var(--muted); text-align: center; }
.dm-brutalism .br-logpanel ul { overflow: hidden; }
.dm-brutalism .br-logpanel ul { min-height: 0; }

/* neobrutalism.css */
/* Демонстрация: Необрутализм. Все селекторы ограничены .dm-neobrutalism, классы с префиксом nb- */

.dm-neobrutalism {
  --bg: #fff8e1;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #3d3d3d;
  --yellow: #ffd23f;
  --pink: #ff6b9d;
  --blue: #5cc8ff;
  --green: #3ddc97;
  --lilac: #c4b5fd;
  --bw: 3px;
  --sh: 4px 4px 0 0 var(--ink);
  --sh-big: 6px 6px 0 0 var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: "Golos Text", system-ui, sans-serif;
}

/* ----- Общие детали ----- */
.dm-neobrutalism .nb-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -.02em;
  background: var(--yellow); border: var(--bw) solid var(--ink); box-shadow: var(--sh);
  padding: 6px 14px 7px; border-radius: 8px;
}
.dm-neobrutalism .nb-logo__bee {
  width: 22px; height: 22px; border-radius: 50%; border: var(--bw) solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, var(--yellow) 4px 8px);
}
.dm-neobrutalism .nb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border: var(--bw) solid var(--ink); border-radius: 8px;
  box-shadow: var(--sh); font-weight: 700; font-size: 15px; white-space: nowrap;
}
.dm-neobrutalism .nb-btn--white { background: var(--paper); }
.dm-neobrutalism .nb-btn--pink { background: var(--pink); }
.dm-neobrutalism .nb-btn--yellow { background: var(--yellow); }
.dm-neobrutalism .nb-btn--big { height: 58px; padding: 0 30px; font-size: 17px; box-shadow: var(--sh-big); font-family: "Unbounded", sans-serif; font-weight: 700; }
.dm-neobrutalism .nb-btn--sm { height: 38px; padding: 0 16px; font-size: 13px; box-shadow: 3px 3px 0 0 var(--ink); }
.dm-neobrutalism .nb-faces { display: inline-flex; }
.dm-neobrutalism .nb-faces i {
  width: 36px; height: 36px; border-radius: 50%; border: var(--bw) solid var(--ink);
  display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px;
  margin-left: -10px;
}
.dm-neobrutalism .nb-faces i:first-child { margin-left: 0; }
.dm-neobrutalism .nb-check {
  flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border: var(--bw) solid var(--ink); border-radius: 5px; background: var(--paper);
  font-style: normal; font-weight: 800; font-size: 13px; line-height: 1;
}
.dm-neobrutalism .nb-check.is-on { background: var(--ink); color: var(--green); }

/* ----- Сайт ----- */
.dm-neobrutalism.dm--site {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(17,17,17,.13) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}
.dm-neobrutalism .nb-nav { display: flex; align-items: center; gap: 14px; padding: 22px 40px; }
.dm-neobrutalism .nb-menu { display: flex; gap: 8px; margin: 0 auto 0 28px; font-weight: 600; font-size: 15px; }
.dm-neobrutalism .nb-menu li { padding: 8px 14px; border: var(--bw) solid transparent; border-radius: 8px; }
.dm-neobrutalism .nb-menu .is-active { border-color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 0 var(--ink); }

.dm-neobrutalism .nb-hero { display: grid; grid-template-columns: 1fr 400px; gap: 40px; padding: 2px 40px 0; }
.dm-neobrutalism .nb-chip {
  display: inline-block; padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--green); font-weight: 700; font-size: 13px;
}
.dm-neobrutalism .nb-hero h1 {
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 56px; line-height: 1.06;
  letter-spacing: -.035em; margin: 14px 0 14px;
}
.dm-neobrutalism .nb-hero mark {
  display: inline-block; background: var(--pink); color: var(--ink);
  border: var(--bw) solid var(--ink); box-shadow: var(--sh); border-radius: 6px;
  padding: 0 10px 4px; transform: rotate(-2deg);
}
.dm-neobrutalism .nb-lead { font-size: 17px; line-height: 1.55; max-width: 560px; color: var(--muted); font-weight: 500; }
.dm-neobrutalism .nb-actions { display: flex; align-items: center; gap: 26px; margin-top: 20px; }
.dm-neobrutalism .nb-under { font-weight: 700; font-size: 15px; border-bottom: 3px solid var(--blue); padding-bottom: 2px; }
.dm-neobrutalism .nb-proof { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 14px; }

.dm-neobrutalism .nb-stack { position: relative; height: 430px; }
.dm-neobrutalism .nb-task {
  position: absolute; width: 290px; padding: 18px 20px; border: var(--bw) solid var(--ink); border-radius: 10px;
  box-shadow: var(--sh-big); display: grid; gap: 8px;
}
.dm-neobrutalism .nb-task b { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; }
.dm-neobrutalism .nb-task__tag {
  justify-self: start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper);
}
.dm-neobrutalism .nb-task__tag--pink { background: var(--pink); }
.dm-neobrutalism .nb-task__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.dm-neobrutalism .nb-task--blue { background: var(--blue); top: 10px; left: 0; transform: rotate(-4deg); }
.dm-neobrutalism .nb-task--white { background: var(--paper); top: 150px; left: 96px; transform: rotate(3deg); }
.dm-neobrutalism .nb-task--green { background: var(--green); top: 292px; left: 20px; transform: rotate(-1.5deg); }
.dm-neobrutalism .nb-star {
  position: absolute; right: -6px; top: -4px; width: 128px; height: 128px;
  display: grid; place-content: center; text-align: center; transform: rotate(12deg);
  filter: drop-shadow(4px 4px 0 var(--ink)); font-size: 13px; font-weight: 700; line-height: 1.15;
}
.dm-neobrutalism .nb-star::before,
.dm-neobrutalism .nb-star::after {
  content: ""; position: absolute;
  clip-path: polygon(50.0% 0.0%, 60.6% 10.4%, 75.0% 6.7%, 79.0% 21.0%, 93.3% 25.0%, 89.6% 39.4%, 100.0% 50.0%, 89.6% 60.6%, 93.3% 75.0%, 79.0% 79.0%, 75.0% 93.3%, 60.6% 89.6%, 50.0% 100.0%, 39.4% 89.6%, 25.0% 93.3%, 21.0% 79.0%, 6.7% 75.0%, 10.4% 60.6%, 0.0% 50.0%, 10.4% 39.4%, 6.7% 25.0%, 21.0% 21.0%, 25.0% 6.7%, 39.4% 10.4%);
}
.dm-neobrutalism .nb-star::before { inset: 0; background: var(--ink); }
.dm-neobrutalism .nb-star::after { inset: 5px; background: var(--yellow); }
.dm-neobrutalism .nb-star em { position: relative; z-index: 1; font-style: normal; }
.dm-neobrutalism .nb-star b { position: relative; z-index: 1; display: block; font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 26px; }

.dm-neobrutalism .nb-marquee {
  position: relative; margin: 14px -20px 0; padding: 11px 0;
  background: var(--ink); color: var(--yellow); transform: rotate(-1.2deg);
  border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink);
  white-space: nowrap; overflow: hidden;
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .02em;
}
.dm-neobrutalism .nb-marquee span { display: inline-block; animation: nb-run 30s linear infinite; }
@keyframes nb-run { from { transform: translateX(0); } to { transform: translateX(-30%); } }

.dm-neobrutalism .nb-steps { display: grid; grid-template-columns: 300px repeat(3, 1fr); gap: 20px; padding: 32px 40px 0; }
.dm-neobrutalism .nb-steps__title { padding: 4px 0; }
.dm-neobrutalism .nb-steps__title h2 { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 30px; line-height: 1.08; letter-spacing: -.03em; }
.dm-neobrutalism .nb-steps__title p { margin-top: 10px; font-size: 15px; color: var(--muted); }
.dm-neobrutalism .nb-step {
  position: relative; padding: 18px 20px 20px; border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: var(--sh);
}
.dm-neobrutalism .nb-step h3 { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; padding-right: 36px; }
.dm-neobrutalism .nb-step p { font-size: 14px; line-height: 1.45; }
.dm-neobrutalism .nb-step__n {
  position: absolute; top: -16px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 0 var(--ink);
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 18px;
}
.dm-neobrutalism .nb-step--pink { background: var(--pink); }
.dm-neobrutalism .nb-step--blue { background: var(--blue); }
.dm-neobrutalism .nb-step--green { background: var(--green); }

/* ----- Приложение ----- */
.dm-neobrutalism.dm--app { display: flex; flex-direction: column; }
.dm-neobrutalism .nb-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-weight: 700; font-size: 14px; }
.dm-neobrutalism .nb-status__icons { display: flex; gap: 5px; align-items: center; }
.dm-neobrutalism .nb-status__icons i { width: 14px; height: 10px; border: 2px solid var(--ink); border-radius: 2px; }
.dm-neobrutalism .nb-status__icons .nb-batt { width: 24px; background: linear-gradient(90deg, var(--ink) 70%, transparent 70%); }
.dm-neobrutalism .nb-apphead { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 0; }
.dm-neobrutalism .nb-apphead__hi { font-weight: 600; font-size: 14px; color: var(--muted); }
.dm-neobrutalism .nb-apphead h1 { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 30px; letter-spacing: -.03em; line-height: 1.15; }
.dm-neobrutalism .nb-ava {
  width: 48px; height: 48px; display: grid; place-items: center; border: var(--bw) solid var(--ink); border-radius: 10px;
  background: var(--blue); box-shadow: 3px 3px 0 0 var(--ink); font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 18px;
}
.dm-neobrutalism .nb-progress {
  position: relative; margin: 18px 20px 0; padding: 16px 16px 18px; background: var(--yellow);
  border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: var(--sh);
}
.dm-neobrutalism .nb-progress__top { display: flex; justify-content: space-between; align-items: baseline; }
.dm-neobrutalism .nb-progress__top b { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 17px; }
.dm-neobrutalism .nb-progress__pct { font-weight: 800; font-size: 15px; }
.dm-neobrutalism .nb-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.dm-neobrutalism .nb-bar i { height: 16px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); }
.dm-neobrutalism .nb-bar i.is-on { background: var(--ink); }
.dm-neobrutalism .nb-sticker {
  position: absolute; right: 12px; top: -16px; padding: 3px 10px; background: var(--pink);
  border: 2px solid var(--ink); border-radius: 4px; font-weight: 800; font-size: 12px; text-transform: uppercase;
  transform: rotate(5deg); box-shadow: 2px 2px 0 0 var(--ink);
}
.dm-neobrutalism .nb-chips { display: flex; gap: 8px; padding: 20px 20px 4px; font-weight: 700; font-size: 13px; }
.dm-neobrutalism .nb-chips li { padding: 7px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); white-space: nowrap; }
.dm-neobrutalism .nb-chips .is-active { background: var(--ink); color: var(--yellow); }
.dm-neobrutalism .nb-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 0; overflow: hidden; }
.dm-neobrutalism .nb-item {
  display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: var(--bw) solid var(--ink); border-radius: 10px;
  box-shadow: var(--sh); background: var(--paper);
}
.dm-neobrutalism .nb-item div { flex: 1; display: grid; gap: 2px; }
.dm-neobrutalism .nb-item b { font-weight: 700; font-size: 15px; line-height: 1.3; }
.dm-neobrutalism .nb-item span { font-size: 13px; font-weight: 500; }
.dm-neobrutalism .nb-item--pink { background: var(--pink); }
.dm-neobrutalism .nb-item--blue { background: var(--blue); }
.dm-neobrutalism .nb-item--yellow { background: var(--lilac); }
.dm-neobrutalism .nb-item--done { background: #ece6d3; box-shadow: none; }
.dm-neobrutalism .nb-item--done b { text-decoration: line-through; text-decoration-thickness: 2px; }
.dm-neobrutalism .nb-flag {
  width: 28px; height: 28px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink);
  border-radius: 50%; font-weight: 900; font-size: 15px !important;
}
.dm-neobrutalism .nb-later { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.dm-neobrutalism .nb-fab {
  position: absolute; right: 20px; bottom: 104px; width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--green); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--sh-big);
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 30px; line-height: 1;
}
.dm-neobrutalism .nb-tabbar {
  display: flex; justify-content: space-around; padding: 10px 8px 24px; background: var(--paper);
  border-top: var(--bw) solid var(--ink); font-size: 12px; font-weight: 700;
}
.dm-neobrutalism .nb-tabbar span { display: grid; justify-items: center; gap: 4px; }
.dm-neobrutalism .nb-ic { width: 40px; height: 34px; border: 2px solid transparent; border-radius: 8px; position: relative; }
.dm-neobrutalism .is-active .nb-ic { background: var(--yellow); border-color: var(--ink); box-shadow: 2px 2px 0 0 var(--ink); }
.dm-neobrutalism .nb-ic::before { content: ""; position: absolute; inset: 7px 10px; border: 2.5px solid var(--ink); border-radius: 3px; }
.dm-neobrutalism .nb-ic--home::before { border-radius: 3px 3px 3px 3px; border-top-width: 6px; }
.dm-neobrutalism .nb-ic--board::before { background: linear-gradient(90deg, transparent 45%, var(--ink) 45% 60%, transparent 60%); }
.dm-neobrutalism .nb-ic--cal::before { border-top-width: 5px; }
.dm-neobrutalism .nb-ic--me::before { inset: 6px 12px; border-radius: 50%; }

/* ----- Веб-платформа ----- */
.dm-neobrutalism.dm--platform { display: grid; grid-template-columns: 236px 1fr; }
.dm-neobrutalism .nb-side {
  display: flex; flex-direction: column; padding: 24px 20px; background: var(--paper);
  border-right: 4px solid var(--ink);
}
.dm-neobrutalism .nb-side__label { margin: 30px 0 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.dm-neobrutalism .nb-side__nav { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.dm-neobrutalism .nb-side__nav li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: var(--bw) solid transparent; border-radius: 8px; }
.dm-neobrutalism .nb-side__nav .is-active { background: var(--pink); border-color: var(--ink); box-shadow: var(--sh); font-weight: 800; }
.dm-neobrutalism .nb-side__nav em { font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); }
.dm-neobrutalism .nb-side__proj { display: grid; gap: 12px; font-size: 14px; font-weight: 500; padding-left: 4px; }
.dm-neobrutalism .nb-side__proj li { display: flex; align-items: center; gap: 10px; }
.dm-neobrutalism .nb-side__proj i { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; }
.dm-neobrutalism .nb-invite {
  margin-top: auto; padding: 16px; background: var(--blue); border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: var(--sh);
}
.dm-neobrutalism .nb-invite b { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px; }
.dm-neobrutalism .nb-invite p { font-size: 13px; margin: 4px 0 12px; }

.dm-neobrutalism .nb-work { display: flex; flex-direction: column; padding: 24px 32px 28px; min-width: 0; }
.dm-neobrutalism .nb-work__head { display: flex; align-items: flex-end; gap: 20px; }
.dm-neobrutalism .nb-crumbs { font-weight: 600; font-size: 13px; color: var(--muted); }
.dm-neobrutalism .nb-work__head h1 { font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 32px; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px; }
.dm-neobrutalism .nb-deadline {
  align-self: center; padding: 5px 12px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 4px;
  font-weight: 800; font-size: 13px; text-transform: uppercase; transform: rotate(-4deg); box-shadow: 3px 3px 0 0 var(--ink);
}
.dm-neobrutalism .nb-work__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dm-neobrutalism .nb-work__actions .nb-faces { margin-right: 6px; }
.dm-neobrutalism .nb-views {
  display: inline-flex; align-self: flex-start; margin: 22px 0 22px; border: var(--bw) solid var(--ink); border-radius: 8px;
  box-shadow: var(--sh); background: var(--paper); font-weight: 700; font-size: 14px; overflow: hidden;
}
.dm-neobrutalism .nb-views span { padding: 8px 18px; }
.dm-neobrutalism .nb-views span + span { border-left: var(--bw) solid var(--ink); }
.dm-neobrutalism .nb-views .is-active { background: var(--yellow); }

.dm-neobrutalism .nb-board { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; min-height: 0; }
.dm-neobrutalism .nb-col {
  display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; background: #f6efd6;
  border: var(--bw) solid var(--ink); border-radius: 10px; overflow: hidden;
}
.dm-neobrutalism .nb-col__head {
  display: flex; justify-content: space-between; align-items: center; margin: 0 -12px 2px; padding: 10px 14px;
  border-bottom: var(--bw) solid var(--ink); font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px;
}
.dm-neobrutalism .nb-col__head em { font-style: normal; font-family: "Golos Text", sans-serif; font-size: 13px; font-weight: 800; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 0 9px; }
.dm-neobrutalism .nb-col__head--blue { background: var(--blue); }
.dm-neobrutalism .nb-col__head--yellow { background: var(--yellow); }
.dm-neobrutalism .nb-col__head--pink { background: var(--pink); }
.dm-neobrutalism .nb-col__head--green { background: var(--green); }
.dm-neobrutalism .nb-card {
  display: grid; gap: 8px; padding: 12px 14px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 8px;
  box-shadow: var(--sh);
}
.dm-neobrutalism .nb-card b { font-weight: 700; font-size: 14px; line-height: 1.35; }
.dm-neobrutalism .nb-card--hot { box-shadow: var(--sh-big); }
.dm-neobrutalism .nb-card--ghost { box-shadow: none; border-style: dashed; background: transparent; font-weight: 700; font-size: 13px; text-align: center; }
.dm-neobrutalism .nb-card--done { background: #ece6d3; box-shadow: none; }
.dm-neobrutalism .nb-card--done b { text-decoration: line-through; text-decoration-thickness: 2px; }
.dm-neobrutalism .nb-tag { justify-self: start; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 4px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.dm-neobrutalism .nb-tag--blue { background: var(--blue); }
.dm-neobrutalism .nb-tag--green { background: var(--green); }
.dm-neobrutalism .nb-tag--pink { background: var(--pink); }
.dm-neobrutalism .nb-tag--yellow { background: var(--yellow); }
.dm-neobrutalism .nb-card__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dm-neobrutalism .nb-mini { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-style: normal; font-weight: 800; font-size: 11px; color: var(--ink); }
.dm-neobrutalism .nb-meter { height: 12px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); overflow: hidden; }
.dm-neobrutalism .nb-meter i { display: block; height: 100%; background: var(--green); border-right: 2px solid var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .dm-neobrutalism .nb-marquee span { animation: none; }
}

/* retro.css */
/* Демонстрация: Ретро. Все селекторы ограничены .dm-retro, классы с префиксом rt- */

.dm-retro {
  --paper: #f4e9d0;
  --paper2: #fbf5e6;
  --ink: #3a2a1e;
  --muted: #6b5442;
  --red: #c2412d;
  --red-d: #a6361f;
  --mustard: #d9a23a;
  --teal: #2e6b66;
  --sand: #e8cfa0;
  --mint: #8cc5b4;
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(58,42,30,.07) 1px, transparent 1.3px),
    radial-gradient(rgba(58,42,30,.05) 1px, transparent 1.3px),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(150,100,40,.14) 100%);
  background-size: 7px 7px, 13px 13px, 100% 100%;
  background-position: 0 0, 3px 5px, 0 0;
  color: var(--ink);
  font-family: "Old Standard TT", Georgia, serif;
}

/* ----- Общие детали ----- */
.dm-retro .rt-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; background: var(--red); color: var(--paper2); border-radius: 6px;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 3px 3px 0 0 var(--ink); white-space: nowrap;
}
.dm-retro .rt-btn::after {
  content: ""; position: absolute; inset: 4px; border: 1.5px solid rgba(251,245,230,.85); border-radius: 3px; pointer-events: none;
}
.dm-retro .rt-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.dm-retro .rt-btn--ghost::after { border-color: rgba(58,42,30,.35); }
.dm-retro .rt-btn--block { flex: none; display: flex; margin: 0 22px; height: 54px; }

/* ----- Сайт ----- */
.dm-retro .rt-awning {
  position: relative; z-index: 2; height: 34px;
  background: repeating-linear-gradient(90deg, var(--red) 0 40px, var(--paper2) 40px 80px);
}
.dm-retro .rt-awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 14px;
  background: radial-gradient(circle at 20px 0, var(--red) 19px, transparent 20px) 0 0 / 80px 14px repeat-x,
              radial-gradient(circle at 60px 0, var(--paper2) 19px, transparent 20px) 0 0 / 80px 14px repeat-x;
  filter: drop-shadow(0 2px 0 rgba(58,42,30,.25));
}
.dm-retro .rt-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 48px 0; }
.dm-retro .rt-nav__links {
  display: flex; gap: 26px; font-family: "Oswald", sans-serif; font-weight: 500; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; align-items: center;
}
.dm-retro .rt-nav__links li + li::before { content: "✦"; margin-right: 26px; color: var(--mustard); font-size: 12px; }
.dm-retro .rt-nav__links .is-active { box-shadow: inset 0 -2px 0 var(--red), inset 0 -6px 0 var(--paper), inset 0 -8px 0 var(--red); padding-bottom: 6px; }
.dm-retro .rt-nav__links--right { justify-content: flex-end; }
.dm-retro .rt-nav__links .rt-nav__cta::before { content: none; }
.dm-retro .rt-nav__cta { margin-left: 4px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; }
.dm-retro .rt-emblem {
  position: relative; z-index: 1; width: 150px; height: 150px; border-radius: 50%; margin-top: 6px;
  display: grid; place-content: center; text-align: center; gap: 0;
  background: var(--teal); color: var(--paper2);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--teal), 0 0 0 11px var(--paper), 0 0 0 13px var(--mustard), 5px 6px 0 13px rgba(58,42,30,.25);
}
.dm-retro .rt-emblem__top,
.dm-retro .rt-emblem__bottom { font-family: "Oswald", sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.dm-retro .rt-emblem__name { font-family: "Lobster", cursive; font-size: 36px; line-height: 1.05; color: var(--paper2); text-shadow: 2px 2px 0 var(--red); margin: 2px 0; }

.dm-retro .rt-hero { display: grid; grid-template-columns: 1fr 340px 1fr; gap: 32px; padding: 0 48px 0; align-items: center; }
.dm-retro .rt-ribbon {
  display: inline-block; padding: 6px 26px; background: var(--mustard); color: var(--ink);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.dm-retro .rt-hero h1 {
  font-family: "Lobster", cursive; font-weight: 400; font-size: 64px; line-height: 1.02; color: var(--red);
  text-shadow: 3px 3px 0 var(--mustard); margin: 14px 0 14px;
}
.dm-retro .rt-lead { font-size: 17px; line-height: 1.55; max-width: 380px; }
.dm-retro .rt-actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.dm-retro .rt-link { font-style: italic; font-size: 17px; border-bottom: 3px double var(--ink); }

.dm-retro .rt-sun {
  position: relative; width: 316px; height: 316px; border-radius: 50%; justify-self: center;
  display: grid; place-items: center;
  background: repeating-conic-gradient(from 0deg, var(--mustard) 0 7.5deg, #e9bf5d 7.5deg 15deg);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--red);
}
.dm-retro .rt-sun::before {
  content: ""; position: absolute; inset: 64px; border-radius: 50%; background: var(--paper2); opacity: .55;
}
.dm-retro .rt-bottle { position: relative; width: 104px; height: 260px; margin-top: 6px; filter: drop-shadow(4px 4px 0 rgba(58,42,30,.3)); }
.dm-retro .rt-sun__label {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 18px; background: var(--red); color: var(--paper2);
  font-family: "Oswald", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}

.dm-retro .rt-side { display: grid; justify-items: start; gap: 18px; padding-left: 8px; }
.dm-retro .rt-badge {
  width: 132px; height: 132px; display: grid; place-content: center; text-align: center; gap: 2px; transform: rotate(-10deg);
  background: var(--teal); color: var(--paper2);
  clip-path: polygon(50.0% 0.0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100.0% 50.0%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50.0% 100.0%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0.0% 50.0%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%);
  margin-left: 140px;
}
.dm-retro .rt-badge span { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dm-retro .rt-badge b { font-family: "Lobster", cursive; font-weight: 400; font-size: 22px; line-height: 1.05; padding: 0 14px; }
.dm-retro .rt-ticket {
  position: relative; display: grid; gap: 2px; padding: 14px 30px; background: var(--paper2);
  border: 2px dashed var(--ink); outline: 2px solid var(--paper2); margin-top: -40px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
}
.dm-retro .rt-ticket__label { font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.dm-retro .rt-ticket b { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 38px; line-height: 1.05; color: var(--red); }
.dm-retro .rt-ticket__note { font-style: italic; font-size: 14px; }
.dm-retro .rt-quote { font-style: italic; font-size: 17px; line-height: 1.4; max-width: 280px; }
.dm-retro .rt-quote span { display: block; margin-top: 4px; font-style: normal; font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.dm-retro .rt-band {
  margin-top: 30px; padding: 4px 0; background: var(--teal);
  box-shadow: inset 0 3px 0 var(--teal), inset 0 5px 0 var(--paper2), inset 0 -3px 0 var(--teal), inset 0 -5px 0 var(--paper2);
  text-align: center; white-space: nowrap; overflow: hidden;
}
.dm-retro .rt-band span {
  display: block; padding: 9px 0; color: var(--paper2);
  font-family: "Oswald", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .2em; text-transform: uppercase;
}
.dm-retro .rt-flavors { padding: 16px 48px 0; }
.dm-retro .rt-flavors__title { display: flex; align-items: center; gap: 18px; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .16em; text-transform: uppercase; }
.dm-retro .rt-flavors__title::before,
.dm-retro .rt-flavors__title::after { content: ""; flex: 1; height: 6px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dm-retro .rt-flavors__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 14px; }
.dm-retro .rt-flavor {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--paper2);
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--paper2), inset 0 0 0 5px rgba(58,42,30,.4);
}
.dm-retro .rt-flavor i { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: inset -6px -6px 0 rgba(0,0,0,.12); }
.dm-retro .rt-flavor div { flex: 1; display: grid; }
.dm-retro .rt-flavor b { font-family: "Lobster", cursive; font-weight: 400; font-size: 22px; line-height: 1.15; white-space: nowrap; }
.dm-retro .rt-flavor span { font-style: italic; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dm-retro .rt-flavor em { font-style: normal; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 18px; color: var(--red); }

/* ----- Приложение ----- */
.dm-retro.dm--app { display: flex; flex-direction: column; }
.dm-retro .rt-status { display: flex; justify-content: space-between; padding: 14px 26px 0; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 15px; }
.dm-retro .rt-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-retro .rt-status__icons i { width: 14px; height: 10px; border-radius: 2px; background: var(--ink); }
.dm-retro .rt-apphead { text-align: center; padding: 6px 22px 0; }
.dm-retro .rt-apphead__logo { font-family: "Lobster", cursive; font-size: 38px; line-height: 1.1; color: var(--red); text-shadow: 2px 2px 0 var(--mustard); }
.dm-retro .rt-apphead__sub {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
.dm-retro .rt-apphead__sub::before,
.dm-retro .rt-apphead__sub::after { content: ""; flex: 1; height: 5px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dm-retro .rt-card { flex: none; margin: 14px 22px 0; padding: 6px; background: var(--teal); border-radius: 12px; box-shadow: 4px 4px 0 rgba(58,42,30,.3); }
.dm-retro .rt-card__inner { padding: 14px 16px 14px; border: 2px solid var(--paper2); border-radius: 8px; color: var(--paper2); text-align: center; }
.dm-retro .rt-card__title { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.dm-retro .rt-card__owner { font-style: italic; font-size: 14px; margin-top: 2px; opacity: .92; }
.dm-retro .rt-stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; margin: 12px 8px 10px; justify-items: center; }
.dm-retro .rt-stamps i {
  width: 46px; height: 46px; border-radius: 50%; border: 2px dashed rgba(251,245,230,.75);
  display: grid; place-items: center; font-style: normal;
}
.dm-retro .rt-stamps i.is-on {
  border: 3px double var(--red); background: var(--paper2); color: var(--red); font-size: 24px; line-height: 1;
}
.dm-retro .rt-stamps i.is-on:nth-child(2n) { transform: rotate(-14deg); }
.dm-retro .rt-stamps i.is-on:nth-child(3n) { transform: rotate(11deg); }
.dm-retro .rt-stamps__gift { background: var(--mustard); color: var(--ink); border: 2px solid var(--paper2) !important; font-family: "Oswald", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dm-retro .rt-card__note { font-size: 15px; font-style: italic; }
.dm-retro .rt-menu { flex: none; margin: 16px 22px 16px; padding: 14px 18px 12px; background: var(--paper2); border: 2px solid var(--ink); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--paper2), inset 0 0 0 5px rgba(58,42,30,.4); }
.dm-retro .rt-menu__title { text-align: center; font-family: "Lobster", cursive; font-size: 26px; line-height: 1.2; color: var(--teal); padding-bottom: 6px; border-bottom: 3px double var(--ink); margin-bottom: 6px; }
.dm-retro .rt-menu li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-size: 16px; }
.dm-retro .rt-menu li i { flex: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); }
.dm-retro .rt-menu li b { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 17px; color: var(--red); }
.dm-retro .rt-menu__hint { margin-top: 6px; font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dm-retro .rt-tabbar {
  flex: none; display: flex; justify-content: space-around; margin-top: auto; padding: 10px 6px 22px; background: var(--paper2);
  border-top: 5px double var(--ink);
  font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.dm-retro .rt-tabbar span { display: grid; justify-items: center; gap: 4px; }
.dm-retro .rt-tabbar i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); }
.dm-retro .rt-tabbar .is-active { color: var(--red); font-weight: 600; }
.dm-retro .rt-tabbar .is-active i { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px var(--paper2); }

/* ----- Веб-платформа ----- */
.dm-retro.dm--platform { display: grid; grid-template-columns: 250px 1fr; }
.dm-retro .rt-folder {
  position: relative; display: flex; flex-direction: column; padding: 26px 0 24px 22px;
  background: #d8b98a;
  background-image: radial-gradient(rgba(58,42,30,.09) 1px, transparent 1.3px);
  background-size: 6px 6px;
  border-right: 3px solid var(--ink);
}
.dm-retro .rt-folder__brand { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
.dm-retro .rt-mini-emblem {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--paper2);
  font-family: "Lobster", cursive; font-size: 26px; box-shadow: 0 0 0 3px #d8b98a, 0 0 0 5px var(--teal);
}
.dm-retro .rt-folder__brand b { display: block; font-family: "Lobster", cursive; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--red); }
.dm-retro .rt-folder__brand span { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dm-retro .rt-tabs { display: grid; gap: 8px; margin-top: 36px; font-family: "Oswald", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.dm-retro .rt-tabs li {
  margin-right: 18px; padding: 10px 16px; background: var(--tab, var(--paper2)); border: 2px solid var(--ink); border-radius: 8px 0 0 8px; border-right: 0;
  box-shadow: 2px 2px 0 rgba(58,42,30,.25);
}
.dm-retro .rt-tabs .is-active { margin-right: -3px; background: var(--paper); font-weight: 700; color: var(--red); box-shadow: none; }
.dm-retro .rt-memo {
  margin: auto 22px 0 0; padding: 14px 16px; background: var(--paper2); transform: rotate(-2deg);
  background-image: repeating-linear-gradient(transparent 0 22px, rgba(46,107,102,.25) 22px 23px);
  box-shadow: 3px 4px 0 rgba(58,42,30,.25); font-size: 14px; line-height: 23px; font-style: italic;
}
.dm-retro .rt-memo__title { font-family: "Oswald", sans-serif; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }

.dm-retro .rt-ledger { padding: 28px 40px 24px; min-width: 0; }
.dm-retro .rt-ledger__head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 3px double var(--ink); }
.dm-retro .rt-kicker { font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dm-retro .rt-ledger__head h1 { font-family: "Lobster", cursive; font-weight: 400; font-size: 46px; line-height: 1.1; color: var(--red); text-shadow: 2px 2px 0 var(--mustard); }
.dm-retro .rt-ledger__actions { display: flex; gap: 14px; }
.dm-retro .rt-ledger__actions .rt-btn { height: 46px; font-size: 14px; }

.dm-retro .rt-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 22px 0 22px; }
.dm-retro .rt-tag {
  position: relative; padding: 12px 16px 12px 40px; background: var(--paper2); border: 2px solid var(--ink);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  display: grid;
}
.dm-retro .rt-tag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.dm-retro .rt-tag span { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.dm-retro .rt-tag b { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; }
.dm-retro .rt-tag--teal { background: #d6e7e1; }
.dm-retro .rt-tag--mustard { background: #f1dca8; }
.dm-retro .rt-tag--red { background: #f2d2c8; }
.dm-retro .rt-tag--red b { color: var(--red-d); }

.dm-retro .rt-table {
  width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper2);
  border: 2px solid var(--ink);
  background-image: linear-gradient(90deg, transparent 112px, rgba(194,65,45,.55) 112px 114px, transparent 114px);
}
.dm-retro .rt-table th {
  text-align: left; padding: 10px 14px; background: var(--teal); color: var(--paper2);
  font-family: "Oswald", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.dm-retro .rt-table td { padding: 10px 14px; border-bottom: 1px solid rgba(46,107,102,.35); }
.dm-retro .rt-table td:first-child { font-family: "Oswald", sans-serif; letter-spacing: .06em; color: var(--muted); }
.dm-retro .rt-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.dm-retro .rt-table tfoot td { border-top: 4px double var(--ink); border-bottom: 0; font-weight: 700; font-family: "Oswald", sans-serif; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.dm-retro .rt-stamp {
  display: inline-block; padding: 1px 10px; border: 2px solid currentColor; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--paper2), inset 0 0 0 3px currentColor;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-4deg);
}
.dm-retro .rt-stamp--paid { color: var(--teal); }
.dm-retro .rt-stamp--way { color: #8a5a12; transform: rotate(3deg); }
.dm-retro .rt-stamp--debt { color: var(--red-d); transform: rotate(-7deg); }
.dm-retro .rt-pages {
  display: flex; justify-content: space-between; align-items: center; margin-top: 18px;
  font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.dm-retro .rt-pages em { font-family: "Old Standard TT", serif; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.dm-retro .rt-pages ul { display: flex; gap: 8px; }
.dm-retro .rt-pages li { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: 14px; }
.dm-retro .rt-pages .is-active { background: var(--teal); color: var(--paper2); border-color: var(--teal); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--teal); }

/* retrofuturism.css */
/* Демонстрация: Ретрофутуризм. Все селекторы ограничены .dm-retrofuturism, классы с префиксом rf- */

.dm-retrofuturism {
  --night: #120b2e;
  --deep: #0b0720;
  --panel: #1e1446;
  --text: #f4eeff;
  --muted: #b7a8e0;
  --pink: #ff3ea5;
  --cyan: #2de2e6;
  --orange: #ff9e3d;
  --yellow: #ffd23f;
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background: var(--night);
  color: var(--text);
  font-family: "Exo 2", system-ui, sans-serif;
}

/* ----- Общие детали ----- */
.dm-retrofuturism .rf-sky {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 42%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 71%, rgba(183,168,224,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.6) 0 1.4px, transparent 2px),
    linear-gradient(180deg, #0b0720 0%, #1a0f45 28%, #3a1366 46%, #8a2276 59%, #120b2e 59.1%);
  background-size: 190px 150px, 230px 170px, 170px 210px, 260px 190px, 100% 100%;
}
.dm-retrofuturism .rf-logo { display: inline-flex; align-items: center; gap: 10px; }
.dm-retrofuturism .rf-logo b {
  font-family: "Russo One", sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .06em; font-style: italic;
  transform: skewX(-8deg); display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #d9e2ff 42%, #4b3a86 50%, #ffc2e6 54%, #ffffff 78%, #ff8ccc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,62,165,.55));
}
.dm-retrofuturism .rf-kicker {
  font-family: "Tektur", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
  text-shadow: 0 0 8px rgba(45,226,230,.6);
}
.dm-retrofuturism .rf-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; border-radius: 4px;
  font-family: "Tektur", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.dm-retrofuturism .rf-btn--neon {
  background: linear-gradient(90deg, var(--pink), var(--orange)); color: #1a0826;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 22px rgba(255,62,165,.65), 0 0 46px rgba(255,62,165,.25);
}
.dm-retrofuturism .rf-btn--ghost { color: var(--text); border: 1.5px solid var(--cyan); background: rgba(18,11,46,.6); box-shadow: 0 0 10px rgba(45,226,230,.25); }
.dm-retrofuturism .rf-st {
  display: inline-flex; align-items: center; gap: 8px; font-family: "Tektur", sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.dm-retrofuturism .rf-st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dm-retrofuturism .rf-st--ok { color: var(--cyan); }
.dm-retrofuturism .rf-st--go { color: #ff7cc4; }
.dm-retrofuturism .rf-st--warn { color: var(--orange); }

.dm-retrofuturism .rf-sun {
  position: absolute; left: 50%; top: 292px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--orange) 40%, var(--pink) 75%, #b0207f 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 28%, transparent 28% 30%, #000 30% 38%, transparent 38% 41%, #000 41% 48%, transparent 48% 52%, #000 52% 57%, transparent 57% 62%, #000 62%);
          mask: linear-gradient(180deg, #000 0 28%, transparent 28% 30%, #000 30% 38%, transparent 38% 41%, #000 41% 48%, transparent 48% 52%, #000 52% 57%, transparent 57% 62%, #000 62%);
  filter: drop-shadow(0 0 30px rgba(255,62,165,.55));
}
.dm-retrofuturism .rf-floor {
  position: absolute; left: 0; right: 0; top: 470px; bottom: 0; overflow: hidden; perspective: 260px;
  background: linear-gradient(180deg, #2a0f4f 0%, #120b2e 60%);
  border-top: 2px solid var(--pink); box-shadow: 0 -2px 18px rgba(255,62,165,.7);
}
.dm-retrofuturism .rf-grid {
  position: absolute; left: -60%; right: -60%; top: 0; height: 200%; transform-origin: 50% 0; transform: rotateX(62deg);
  background-image:
    linear-gradient(90deg, rgba(255,62,165,.85) 2px, transparent 2px),
    linear-gradient(180deg, rgba(255,62,165,.85) 2px, transparent 2px);
  background-size: 64px 64px;
  animation: rf-run 6s linear infinite;
}
@keyframes rf-run { from { background-position: 0 0; } to { background-position: 0 64px; } }

/* ----- Сайт ----- */
.dm-retrofuturism .rf-hills { position: absolute; left: 0; top: 381px; width: 100%; height: 90px; z-index: 1; }
.dm-retrofuturism .rf-floor { z-index: 1; }
.dm-retrofuturism.dm--site .rf-floor { perspective: 400px; }
.dm-retrofuturism.dm--site .rf-grid { height: 380px; }
.dm-retrofuturism .rf-nav {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; padding: 22px 48px 18px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(45,226,230,.8), transparent) 1;
}
.dm-retrofuturism .rf-menu {
  display: flex; gap: 34px; margin-left: auto;
  font-family: "Tektur", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.dm-retrofuturism .rf-menu .is-active { color: var(--cyan); text-shadow: 0 0 8px rgba(45,226,230,.8); box-shadow: 0 2px 0 var(--cyan), 0 6px 10px -4px var(--cyan); padding-bottom: 4px; }
.dm-retrofuturism .rf-nav .rf-btn { height: 40px; padding: 0 20px; font-size: 13px; }

.dm-retrofuturism .rf-hero { position: relative; z-index: 2; text-align: center; padding-top: 34px; }
.dm-retrofuturism .rf-hero h1 {
  margin: 12px 0 8px; font-family: "Russo One", sans-serif; font-weight: 400; font-size: 84px; line-height: 1.05;
  letter-spacing: .02em; text-transform: uppercase; font-style: italic;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 38%, #5b4a9a 49%, #2a1a5e 51%, #ffb3dd 58%, #ffffff 80%, #ff8ccc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.4)) drop-shadow(0 0 18px rgba(255,62,165,.55));
}
.dm-retrofuturism .rf-lead { max-width: 560px; margin: 0 auto; font-size: 17px; line-height: 1.55; color: var(--text); }
.dm-retrofuturism .rf-actions { display: flex; justify-content: center; gap: 18px; margin-top: 22px; }

.dm-retrofuturism .rf-board {
  position: absolute; z-index: 2; left: 80px; right: 80px; bottom: 22px; padding: 16px 24px 10px;
  background: rgba(11,7,32,.92);
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 4px);
  border: 1.5px solid rgba(45,226,230,.8); border-radius: 18px / 26px;
  box-shadow: 0 0 22px rgba(45,226,230,.35), inset 0 0 40px rgba(45,226,230,.12);
}
.dm-retrofuturism .rf-board__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px dashed rgba(45,226,230,.45); }
.dm-retrofuturism .rf-board__title { font-family: "Russo One", sans-serif; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 10px rgba(45,226,230,.7); }
.dm-retrofuturism .rf-board__clock { font-family: "Tektur", sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-board__clock b { color: var(--orange); font-size: 18px; margin-left: 6px; text-shadow: 0 0 8px rgba(255,158,61,.7); }
.dm-retrofuturism .rf-board__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dm-retrofuturism .rf-board__table th { text-align: left; padding: 9px 8px 5px; font-family: "Tektur", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-board__table td { padding: 8px; border-top: 1px solid rgba(183,168,224,.15); }
.dm-retrofuturism .rf-board__table td:first-child,
.dm-retrofuturism .rf-board__table td:nth-child(3),
.dm-retrofuturism .rf-board__table td:nth-child(4) { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .08em; color: var(--yellow); }

/* ----- Приложение ----- */
.dm-retrofuturism.dm--app { display: flex; flex-direction: column; }
.dm-retrofuturism.dm--app .rf-sky { background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 42%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 71%, rgba(183,168,224,.8) 0 1px, transparent 1.6px),
    linear-gradient(180deg, #0b0720 0%, #1a0f45 30%, #120b2e 60%);
  background-size: 150px 130px, 190px 170px, 130px 190px, 100% 100%; }
.dm-retrofuturism.dm--app > *:not(.rf-sky) { position: relative; }
.dm-retrofuturism .rf-status { display: flex; justify-content: space-between; padding: 14px 26px 0; font-family: "Tektur", sans-serif; font-weight: 500; font-size: 14px; }
.dm-retrofuturism .rf-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-retrofuturism .rf-status__icons i { width: 14px; height: 10px; border-radius: 2px; background: var(--text); }
.dm-retrofuturism .rf-appbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; }
.dm-retrofuturism .rf-appbar__icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid rgba(45,226,230,.6); border-radius: 50%; color: var(--cyan); font-size: 20px; line-height: 1; }
.dm-retrofuturism .rf-appbar__title { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.dm-retrofuturism .rf-scene { height: 112px; margin-top: 4px; overflow: hidden; }
.dm-retrofuturism .rf-sun--small { top: 14px; width: 150px; height: 150px; margin-left: -75px; }
.dm-retrofuturism .rf-floor--small { top: 82px; perspective: 120px; }
.dm-retrofuturism .rf-floor--small .rf-grid { height: 60px; background-size: 34px 34px; animation: none; }

.dm-retrofuturism .rf-pass {
  margin: 0 18px; padding: 18px 20px 16px; clip-path: var(--chamfer);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #26195a, #1a1142);
  box-shadow: inset 0 0 0 1.5px rgba(45,226,230,.55);
}
.dm-retrofuturism .rf-route { display: flex; align-items: center; justify-content: space-between; }
.dm-retrofuturism .rf-route div { display: grid; }
.dm-retrofuturism .rf-route b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: .04em; }
.dm-retrofuturism .rf-route span { font-size: 13px; color: var(--muted); }
.dm-retrofuturism .rf-route__to { text-align: right; }
.dm-retrofuturism .rf-times { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; font-family: "Tektur", sans-serif; font-weight: 700; font-size: 20px; color: var(--yellow); }
.dm-retrofuturism .rf-times i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--yellow), var(--pink)); box-shadow: 0 0 6px var(--pink); }
.dm-retrofuturism .rf-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 12px; border-top: 1px dashed rgba(45,226,230,.45); }
.dm-retrofuturism .rf-facts dt { font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-facts dd { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 17px; color: var(--cyan); }
.dm-retrofuturism .rf-pass__name { margin-top: 12px; font-size: 14px; color: var(--muted); }
.dm-retrofuturism .rf-pass__name b { color: var(--text); font-weight: 600; }

.dm-retrofuturism .rf-count { margin: 20px 18px 0; text-align: center; }
.dm-retrofuturism .rf-count__label { font-family: "Tektur", sans-serif; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-count__time {
  display: block; font-family: "Tektur", sans-serif; font-weight: 700; font-size: 50px; line-height: 1.1; letter-spacing: .06em;
  color: var(--cyan); text-shadow: 0 0 6px rgba(45,226,230,.8), 0 0 22px rgba(45,226,230,.45);
}
.dm-retrofuturism .rf-count__bar { height: 8px; margin-top: 8px; border: 1px solid rgba(45,226,230,.6); border-radius: 4px; overflow: hidden; }
.dm-retrofuturism .rf-count__bar i { display: block; width: 76%; height: 100%; background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 11px); box-shadow: 0 0 8px var(--cyan); }
.dm-retrofuturism .rf-btn--block { display: flex; margin: 20px 18px 0; height: 54px; }
.dm-retrofuturism .rf-tabbar {
  display: flex; justify-content: space-around; margin-top: auto; padding: 12px 8px 24px; background: rgba(11,7,32,.92);
  border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--pink), transparent) 1;
  font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.dm-retrofuturism .rf-tabbar span { display: grid; justify-items: center; gap: 4px; }
.dm-retrofuturism .rf-tabbar i { font-style: normal; font-size: 20px; line-height: 1; }
.dm-retrofuturism .rf-tabbar .is-active { color: var(--pink); text-shadow: 0 0 8px rgba(255,62,165,.8); }

/* ----- Веб-платформа ----- */
.dm-retrofuturism.dm--platform {
  display: grid; grid-template-columns: 232px 1fr;
  background: radial-gradient(ellipse at 70% -10%, #2a1660 0%, var(--deep) 60%);
}
.dm-retrofuturism .rf-side {
  display: flex; flex-direction: column; padding: 26px 0 24px; background: rgba(11,7,32,.85);
  border-right: 1px solid transparent; border-image: linear-gradient(180deg, transparent, var(--pink), transparent) 1;
}
.dm-retrofuturism .rf-side .rf-logo { padding: 0 24px; }
.dm-retrofuturism .rf-side__sub { padding: 4px 24px 0; font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-side__nav { display: grid; gap: 2px; margin-top: 34px; font-family: "Tektur", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-side__nav li { display: flex; align-items: center; gap: 12px; padding: 11px 24px; }
.dm-retrofuturism .rf-side__nav i { width: 8px; height: 8px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.dm-retrofuturism .rf-side__nav .is-active {
  color: var(--cyan); text-shadow: 0 0 8px rgba(45,226,230,.7);
  background: linear-gradient(90deg, rgba(45,226,230,.16), transparent); box-shadow: inset 3px 0 0 var(--cyan);
}
.dm-retrofuturism .rf-side__nav .is-active i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.dm-retrofuturism .rf-side__sys { margin: auto 18px 0; padding: 14px 16px; clip-path: var(--chamfer); background: rgba(45,226,230,.08); box-shadow: inset 0 0 0 1px rgba(45,226,230,.4); display: grid; gap: 4px; }
.dm-retrofuturism .rf-side__sys span { font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-side__sys b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.dm-retrofuturism .rf-side__sys b i { width: 9px; height: 9px; border-radius: 50%; background: #5dff9e; box-shadow: 0 0 8px #5dff9e; animation: rf-blink 2.4s ease-in-out infinite; }
@keyframes rf-blink { 50% { opacity: .45; } }

.dm-retrofuturism .rf-ops { padding: 24px 30px 24px; min-width: 0; display: flex; flex-direction: column; }
.dm-retrofuturism .rf-ops__head { display: flex; align-items: flex-end; gap: 24px; }
.dm-retrofuturism .rf-ops__head h1 {
  font-family: "Russo One", sans-serif; font-weight: 400; font-size: 36px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 44%, #6a5aa8 52%, #ffc2e6 58%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dm-retrofuturism .rf-clock { margin-left: auto; font-family: "Tektur", sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-clock b { display: block; font-size: 24px; letter-spacing: .08em; color: var(--orange); text-shadow: 0 0 10px rgba(255,158,61,.6); }
.dm-retrofuturism .rf-ops__head .rf-btn { height: 46px; font-size: 14px; }

.dm-retrofuturism .rf-grid-ops {
  flex: 1; display: grid; gap: 16px; margin-top: 20px; min-height: 0;
  grid-template-columns: 1fr 1fr 1fr 290px; grid-template-rows: 118px 176px 1fr;
}
.dm-retrofuturism .rf-panel {
  position: relative; padding: 30px 20px 14px; clip-path: var(--chamfer);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.2) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #22174f, #160f38);
  box-shadow: inset 0 0 0 1px rgba(183,168,224,.3);
}
.dm-retrofuturism .rf-panel__label { position: absolute; top: 10px; left: 20px; font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.dm-retrofuturism .rf-kpi p { font-size: 14px; color: var(--muted); }
.dm-retrofuturism .rf-kpi b { display: block; font-family: "Tektur", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--text); }
.dm-retrofuturism .rf-kpi__note { font-size: 12px; color: var(--cyan); }
.dm-retrofuturism .rf-fuel { height: 8px; margin-top: 4px; border: 1px solid rgba(255,158,61,.6); border-radius: 4px; overflow: hidden; }
.dm-retrofuturism .rf-fuel i { display: block; width: 78%; height: 100%; background: repeating-linear-gradient(90deg, var(--orange) 0 6px, transparent 6px 9px); }

.dm-retrofuturism .rf-radar { grid-column: 4; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; }
.dm-retrofuturism .rf-radar__scope {
  position: relative; width: 200px; height: 200px; margin-top: 6px; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(45,226,230,.55), rgba(45,226,230,0) 70deg, transparent 360deg),
    repeating-radial-gradient(circle, transparent 0 32px, rgba(45,226,230,.45) 32px 33px),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(45,226,230,.4) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(45,226,230,.4) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    #0a1630;
  box-shadow: 0 0 0 1.5px rgba(45,226,230,.7), 0 0 18px rgba(45,226,230,.35);
}
.dm-retrofuturism .rf-blip { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dm-retrofuturism .rf-blip--pink { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.dm-retrofuturism .rf-radar__legend { align-self: stretch; display: grid; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.dm-retrofuturism .rf-radar__legend li { display: flex; align-items: center; gap: 8px; }
.dm-retrofuturism .rf-radar__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.dm-retrofuturism .rf-radar__legend i.pink { background: var(--pink); box-shadow: 0 0 6px var(--pink); }

.dm-retrofuturism .rf-chart { grid-column: 1 / span 3; padding-bottom: 10px; }
.dm-retrofuturism .rf-chart svg {
  display: block; margin-top: 4px;
  background-image:
    linear-gradient(90deg, rgba(183,168,224,.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(183,168,224,.12) 1px, transparent 1px);
  background-size: 60px 30px;
  filter: drop-shadow(0 0 4px rgba(45,226,230,.6));
}
.dm-retrofuturism .rf-chart__axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: .1em; color: var(--muted); }

.dm-retrofuturism .rf-flights { grid-column: 1 / -1; padding: 8px 20px 6px; display: flex; flex-direction: column; }
.dm-retrofuturism .rf-flights__foot { margin-top: auto; padding: 8px 10px 6px; display: flex; justify-content: space-between; font-family: "Tektur", sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dm-retrofuturism .rf-flights__foot b { color: var(--cyan); font-weight: 500; }
.dm-retrofuturism .rf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-retrofuturism .rf-table th { text-align: left; padding: 10px 10px 8px; font-family: "Tektur", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(255,62,165,.5); }
.dm-retrofuturism .rf-table td { padding: 10px; border-bottom: 1px solid rgba(183,168,224,.14); }
.dm-retrofuturism .rf-table td:first-child { font-family: "Tektur", sans-serif; font-weight: 700; color: var(--yellow); letter-spacing: .06em; }
.dm-retrofuturism .rf-table .r { text-align: right; font-family: "Tektur", sans-serif; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .dm-retrofuturism .rf-grid,
  .dm-retrofuturism .rf-side__sys b i { animation: none; }
}

/* organic.css */
/* Демонстрация: Органический дизайн. Все селекторы ограничены .dm-organic */

.dm-organic {
  --bg: #f3eee3;
  --bg2: #e4dac4;
  --paper: #fbf8f1;
  --ink: #2f3a2c;
  --muted: #5e6656;
  --moss: #4f6b3e;
  --moss-dk: #3f5532;
  --clay: #b8643e;
  --sage: #a9b892;
  --ochre: #c9a66b;
  --line: #d8cdb6;
  /* бумажное зерно: две сетки мелких точек с разным шагом */
  background:
    radial-gradient(rgba(90, 70, 40, .07) 1px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(rgba(90, 70, 40, .05) 1px, transparent 1.4px) 3px 4px / 11px 13px,
    var(--bg);
  color: var(--ink);
  font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
  font-size: 16px;
}

.dm-organic h1, .dm-organic h2, .dm-organic h3 { font-family: "Alegreya", Georgia, serif; font-weight: 500; }
.dm-organic em { font-style: italic; color: var(--moss); }
.dm-organic .og-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.dm-organic .og-logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Alegreya", Georgia, serif; font-size: 26px; font-weight: 700; color: var(--ink); }
.dm-organic .og-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 30px;
  border-radius: 28px 20px 30px 18px;
  background: var(--moss); color: #f8f4ea;
  font-weight: 500; font-size: 17px;
  box-shadow: 0 8px 20px rgba(63, 85, 50, .22);
}
.dm-organic .og-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dm-organic .og-link { font-size: 17px; color: var(--moss); font-weight: 500; }
.dm-organic .og-actions { display: flex; align-items: center; gap: 24px; }
.dm-organic .og-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: 999px; background: var(--bg2); color: var(--ink); font-size: 14px; font-weight: 500;
}
.dm-organic .og-chip.is-on { background: var(--moss); color: #f8f4ea; }

/* ----- Сайт ----- */
.dm-organic.dm--site { display: flex; flex-direction: column; }
.dm-organic .og-nav { display: flex; align-items: center; gap: 40px; height: 88px; padding: 0 72px; flex: none; }
.dm-organic .og-links { display: flex; gap: 8px; margin-left: auto; font-size: 16px; color: var(--muted); }
.dm-organic .og-links li { padding: 8px 16px; border-radius: 20px 14px 18px 12px; }
.dm-organic .og-links .is-active { background: var(--bg2); color: var(--ink); font-weight: 500; }
.dm-organic .og-cart { padding: 10px 20px; border-radius: 22px 16px 20px 14px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 500; }

.dm-organic .og-hero { display: grid; grid-template-columns: 560px 1fr; gap: 36px; height: 440px; padding: 0 72px 0 36px; flex: none; }
.dm-organic .og-hero__art { position: relative; margin-top: -6px; }
.dm-organic .og-hero__art svg { width: 560px; height: 440px; }
.dm-organic .og-stamp {
  position: absolute; top: 34px; right: 22px;
  width: 104px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  background: #9a5232; color: #fbf3e8;
  font-family: "Alegreya", Georgia, serif; font-style: italic; font-size: 14px; line-height: 1.15; text-align: center;
  transform: rotate(-9deg);
  box-shadow: 0 0 0 5px var(--bg),  0 0 0 6.5px #9a5232;
}
.dm-organic .og-stamp b { font-style: normal; font-size: 18px; margin-top: 2px; }
.dm-organic .og-hero__text { padding-top: 36px; }
.dm-organic .og-hero h1 { font-size: 58px; line-height: 1.06; margin: 14px 0 20px; max-width: 520px; }
.dm-organic .og-lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 470px; margin-bottom: 30px; }
.dm-organic .og-facts { display: flex; gap: 14px; margin-top: 34px; }
.dm-organic .og-facts li { padding: 10px 18px; background: var(--paper); font-size: 15px; color: var(--muted); }
.dm-organic .og-facts li:nth-child(1) { border-radius: 26px 16px 22px 12px; }
.dm-organic .og-facts li:nth-child(2) { border-radius: 14px 26px 14px 24px; transform: translateY(8px); }
.dm-organic .og-facts li:nth-child(3) { border-radius: 22px 12px 28px 18px; }
.dm-organic .og-facts b { font-family: "Alegreya", Georgia, serif; font-size: 20px; color: var(--ink); margin-right: 4px; }

.dm-organic .og-wave { display: block; width: 100%; height: 50px; flex: none; }
.dm-organic .og-season {
  flex: 1; display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 4px 72px 0;
  background: var(--moss); color: #f3eee3;
}
.dm-organic .og-season h2 { font-size: 40px; line-height: 1.05; }
.dm-organic .og-season h2 em { color: #e8d7a8; }
.dm-organic .og-season__intro p { font-size: 16px; color: #dfe3d2; margin-top: 10px; }
.dm-organic .og-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.dm-organic .og-card {
  display: flex; gap: 16px; align-items: center; padding: 20px 22px;
  background: var(--bg); color: var(--ink);
  border-radius: 36px 22px 40px 20px;
  box-shadow: 0 10px 28px rgba(30, 40, 20, .25);
}
.dm-organic .og-card--down { transform: translateY(30px); border-radius: 20px 40px 24px 36px; }
.dm-organic .og-card--mid { transform: translateY(12px); border-radius: 30px 24px 18px 42px; }
.dm-organic .og-card__blob { flex: none; width: 64px; height: 64px; border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; }
.dm-organic .og-card__blob--a { background: radial-gradient(circle at 60% 40%, #f3eee3 0 8px, transparent 9px), var(--sage); }
.dm-organic .og-card__blob--b { background: radial-gradient(circle at 40% 55%, #9a5232 0 7px, transparent 8px), #d9a27f; border-radius: 42% 58% 54% 46% / 56% 44% 56% 44%; }
.dm-organic .og-card__blob--c { background: radial-gradient(circle at 55% 45%, #fbf8f1 0 6px, transparent 7px), #8fb0a8; border-radius: 50% 50% 38% 62% / 60% 42% 58% 40%; }
.dm-organic .og-card h3 { font-size: 22px; line-height: 1.1; }
.dm-organic .og-card p { font-size: 14px; color: var(--muted); margin: 4px 0 6px; }
.dm-organic .og-card b { font-size: 17px; color: #9a5232; font-weight: 700; }

/* ----- Приложение ----- */
.dm-organic.dm--app { display: flex; flex-direction: column; }
.dm-organic .og-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 700; }
.dm-organic .og-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-organic .og-status__icons i { width: 16px; height: 10px; border-radius: 4px 2px 4px 2px; background: var(--ink); }
.dm-organic .og-apphead { display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 24px 0; }
.dm-organic .og-apphead h1 { font-size: 30px; line-height: 1.1; margin-top: 4px; }
.dm-organic .og-avatar {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 58% 42% 50% 50% / 46% 56% 44% 54%;
  background: var(--clay); color: #fbf3e8; font-family: "Alegreya", Georgia, serif; font-size: 22px; font-weight: 700;
}
.dm-organic .og-tea { position: relative; height: 206px; margin: 20px 24px 0; }
.dm-organic .og-tea__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-organic .og-tea__art { position: absolute; right: 14px; bottom: 26px; }
.dm-organic .og-tea__text { position: relative; padding: 34px 0 0 26px; max-width: 210px; }
.dm-organic .og-tea__text h2 { font-size: 27px; line-height: 1.08; margin: 12px 0 6px; color: #23301f; }
.dm-organic .og-tea__text p { font-size: 15px; color: #2f3a2c; }
.dm-organic .og-chip--light { background: #f3eee3; height: 28px; font-size: 13px; }

.dm-organic .og-brew {
  display: flex; align-items: center; gap: 18px; margin: 18px 24px 0; padding: 16px 18px;
  background: var(--paper); border-radius: 30px 18px 34px 20px;
  box-shadow: 0 8px 22px rgba(90, 70, 40, .1);
}
.dm-organic .og-ring { position: relative; flex: none; width: 116px; height: 116px; }
.dm-organic .og-ring__val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dm-organic .og-ring__val b { font-family: "Alegreya", Georgia, serif; font-size: 28px; line-height: 1; }
.dm-organic .og-ring__val small { font-size: 12px; color: var(--muted); }
.dm-organic .og-steps { display: grid; gap: 10px; font-size: 15px; line-height: 1.25; }
.dm-organic .og-steps li { display: flex; gap: 10px; align-items: center; }
.dm-organic .og-steps i { flex: none; width: 14px; height: 14px; background: var(--sage); border-radius: 0 70% 0 70%; transform: rotate(-10deg); }
.dm-organic .og-steps li:first-child i { background: var(--moss); }

.dm-organic .og-mood { margin: 20px 24px 0; }
.dm-organic .og-mood__q { font-family: "Alegreya", Georgia, serif; font-size: 19px; font-style: italic; margin-bottom: 10px; }
.dm-organic .og-chips { display: flex; gap: 8px; }
.dm-organic .og-chips .og-chip:nth-child(2) { border-radius: 18px 12px 20px 10px; }
.dm-organic .og-chips .og-chip:nth-child(3) { border-radius: 12px 20px 12px 18px; }
.dm-organic .og-btn--block { display: flex; height: 56px; margin: 22px 24px 0; }

.dm-organic .og-tabbar {
  display: flex; justify-content: space-between; margin: auto 14px 18px; padding: 8px;
  background: var(--ink); color: #d9dccb; font-size: 13px; font-weight: 500;
  border-radius: 30px 24px 32px 22px;
  box-shadow: 0 10px 26px rgba(47, 58, 44, .3);
}
.dm-organic .og-tabbar span { padding: 12px 16px; border-radius: 20px 14px 22px 12px; }
.dm-organic .og-tabbar .is-active { background: var(--sage); color: #1f2a1c; }

/* ----- Веб-платформа ----- */
.dm-organic.dm--platform { display: grid; grid-template-columns: 232px 1fr; }
.dm-organic .og-side { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 32px 22px 28px 28px; background: var(--moss-dk); color: #e9e6d6; }
.dm-organic .og-side__edge { position: absolute; top: 0; right: -26px; width: 40px; height: 100%; }
.dm-organic .og-logo--light { color: #f3eee3; font-size: 24px; }
.dm-organic .og-side__sub { font-size: 13px; color: #c9cdb8; margin: 2px 0 0 36px; font-style: italic; }
.dm-organic .og-side__nav { display: grid; gap: 4px; margin-top: 36px; font-size: 16px; }
.dm-organic .og-side__nav li { padding: 10px 16px; border-radius: 22px 14px 20px 12px; }
.dm-organic .og-side__nav .is-active { background: var(--bg); color: var(--ink); font-weight: 700; }
.dm-organic .og-weather {
  margin-top: auto; padding: 20px 18px; background: #556f45; font-size: 14px; line-height: 1.4; color: #eef0e2;
  border-radius: 34px 20px 38px 24px;
}
.dm-organic .og-weather__t { font-family: "Alegreya", Georgia, serif; font-size: 30px; line-height: 1; margin-bottom: 6px; color: #f3eee3; }

.dm-organic .og-work { padding: 32px 40px 0 66px; }
.dm-organic .og-work__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-organic .og-work__head h1 { font-size: 42px; line-height: 1.05; margin-top: 6px; }
.dm-organic .og-work .og-btn { height: 46px; font-size: 16px; padding: 0 24px; }

.dm-organic .og-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 22px; }
.dm-organic .og-kpi { padding: 18px 22px; background: var(--paper); box-shadow: 0 8px 22px rgba(90, 70, 40, .08); }
.dm-organic .og-kpi p { font-size: 14px; color: var(--muted); }
.dm-organic .og-kpi b { display: block; font-family: "Alegreya", Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.15; margin: 4px 0 2px; }
.dm-organic .og-kpi span { font-size: 13px; color: var(--muted); }
.dm-organic .og-kpi--a { border-radius: 34px 20px 30px 16px; background: var(--sage); }
.dm-organic .og-kpi--a p, .dm-organic .og-kpi--a span { color: #2f3a2c; }
.dm-organic .og-kpi--b { border-radius: 18px 34px 20px 30px; }
.dm-organic .og-kpi--c { border-radius: 28px 18px 36px 22px; }
.dm-organic .og-kpi--d { border-radius: 20px 30px 16px 36px; background: #ecd9c6; }

.dm-organic .og-grid { display: grid; grid-template-columns: 1fr 336px; gap: 20px; align-items: start; }
.dm-organic .og-panel { padding: 20px 24px 12px; background: var(--paper); border-radius: 30px 22px 34px 24px; box-shadow: 0 8px 22px rgba(90, 70, 40, .08); }
.dm-organic .og-panel h2 { font-size: 24px; line-height: 1.2; }
.dm-organic .og-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dm-organic .og-tabs { display: flex; gap: 4px; font-size: 14px; color: var(--muted); }
.dm-organic .og-tabs li { padding: 6px 14px; border-radius: 16px 10px 14px 10px; }
.dm-organic .og-tabs .is-active { background: var(--bg2); color: var(--ink); font-weight: 500; }
.dm-organic .og-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dm-organic .og-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); }
.dm-organic .og-table td { padding: 12px 8px; border-bottom: 1px solid #ebe3d2; }
.dm-organic .og-table tr:last-child td { border-bottom: 0; }
.dm-organic .og-table .r { text-align: right; }
.dm-organic .og-bar { display: block; width: 96px; height: 8px; border-radius: 8px; background: var(--bg2); overflow: hidden; }
.dm-organic .og-bar i { display: block; height: 100%; border-radius: 8px; background: var(--moss); }
.dm-organic .og-st { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 14px 10px 14px 10px; font-size: 13px; font-weight: 500; }
.dm-organic .og-st--dry { background: #e9e4cf; color: #5a4b1f; }
.dm-organic .og-st--ok { background: #dbe4cf; color: #33502a; }
.dm-organic .og-st--warn { background: #f1dccd; color: #8a3f22; }

.dm-organic .og-panel--chart svg { width: 100%; height: 150px; margin: 14px 0 10px; }
.dm-organic .og-muted { font-size: 14px; color: var(--muted); }
.dm-organic .og-legend { display: grid; gap: 8px; font-size: 15px; padding-bottom: 8px; }
.dm-organic .og-legend li { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #ebe3d2; }
.dm-organic .og-legend li:last-child { border-bottom: 0; }

.dm-organic .og-tasks { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 16px; align-items: center; margin-top: 22px; }
.dm-organic .og-tasks h2 { font-size: 24px; line-height: 1.1; }
.dm-organic .og-task { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; background: var(--bg2); border-radius: 26px 16px 28px 14px; font-size: 15px; }
.dm-organic .og-task b { font-size: 13px; font-weight: 700; color: var(--moss); letter-spacing: .04em; }
.dm-organic .og-task--b { border-radius: 16px 28px 14px 26px; transform: translateY(6px); }
.dm-organic .og-task--c { border-radius: 24px 14px 18px 30px; }

/* playful.css */
/* Демонстрация: Игривый дизайн. Все селекторы ограничены .dm-playful */

.dm-playful {
  --bg: #fff7e8;
  --ink: #2b2350;
  --muted: #5b5480;
  --violet: #6c4cf1;
  --violet-dk: #4a2fc4;
  --coral: #ff6b6b;
  --coral-dk: #d64545;
  --sun: #ffc845;
  --sun-dk: #e0a01c;
  --mint: #2ec4a6;
  --mint-dk: #1d9a82;
  --pink: #ff8fb8;
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  font-weight: 600;
}

.dm-playful h1, .dm-playful h2, .dm-playful h3 { font-weight: 900; }
.dm-playful .pl-logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Comfortaa", "Nunito", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.dm-playful .pl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 58px; padding: 0 30px; border-radius: 999px;
  background: var(--violet); color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 5px 0 var(--violet-dk);
}
.dm-playful .pl-btn--sm { height: 46px; padding: 0 22px; font-size: 16px; box-shadow: 0 4px 0 var(--violet-dk); }
.dm-playful .pl-btn--white { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink), 0 5px 0 var(--ink); }
.dm-playful .pl-btn--white.pl-btn--sm { box-shadow: inset 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink); }
.dm-playful .pl-btn--mint { background: var(--mint); color: #10322b; box-shadow: 0 5px 0 var(--mint-dk); }
.dm-playful .pl-actions { display: flex; align-items: center; gap: 18px; }
.dm-playful .pl-sticker {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
  font-weight: 900; font-size: 15px;
  border: 2.5px solid var(--ink); background: #fff; color: var(--ink);
  transform: rotate(-5deg);
}
.dm-playful .pl-sticker--sun { background: var(--sun); }

/* ----- Сайт ----- */
.dm-playful.dm--site { display: flex; flex-direction: column; }
.dm-playful .pl-nav { display: flex; align-items: center; gap: 32px; height: 92px; padding: 0 64px; flex: none; }
.dm-playful .pl-links { display: flex; gap: 6px; margin-left: auto; font-size: 17px; font-weight: 700; }
.dm-playful .pl-links li { padding: 9px 18px; border-radius: 999px; }
.dm-playful .pl-links .is-active { background: var(--ink); color: #fff; }

.dm-playful .pl-hero { display: grid; grid-template-columns: 1fr 470px; gap: 24px; height: 462px; padding: 6px 64px 0; flex: none; }
.dm-playful .pl-hero__text { padding-top: 26px; }
.dm-playful .pl-hero h1 { font-size: 62px; line-height: 1.02; letter-spacing: -.02em; margin: 20px 0 16px; }
.dm-playful .pl-hero h1 mark {
  display: inline-block; background: var(--coral); color: var(--ink);
  padding: 0 16px 4px; border-radius: 22px; transform: rotate(-2.5deg); margin-top: 6px;
  box-shadow: 0 5px 0 var(--coral-dk);
}
.dm-playful .pl-lead { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 600px; margin-bottom: 28px; }
.dm-playful .pl-crowd { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 16px; color: var(--muted); }
.dm-playful .pl-crowd b { color: var(--ink); font-weight: 900; }
.dm-playful .pl-faces { display: flex; }
.dm-playful .pl-faces i {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 900; font-size: 15px; color: var(--ink);
  border: 3px solid var(--bg); margin-left: -10px;
}
.dm-playful .pl-faces i:first-child { margin-left: 0; }

.dm-playful .pl-hero__art { position: relative; }
.dm-playful .pl-blob { position: absolute; left: 50px; top: 40px; width: 390px; height: 380px; background: var(--sun); border-radius: 58% 42% 52% 48% / 48% 56% 44% 52%; }
.dm-playful .pl-mascot { position: absolute; left: 70px; top: 52px; width: 350px; height: 370px; transform: rotate(4deg); }
.dm-playful .pl-bubble {
  position: absolute; left: -6px; top: 34px; display: flex; flex-direction: column;
  padding: 12px 20px; background: #fff; border: 3px solid var(--ink); border-radius: 24px;
  font-size: 28px; font-weight: 900; line-height: 1.05; transform: rotate(-7deg);
  box-shadow: 0 5px 0 var(--ink);
}
.dm-playful .pl-bubble small { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.dm-playful .pl-bubble::after {
  content: ""; position: absolute; right: 26px; bottom: -16px; width: 22px; height: 22px;
  background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg) skew(10deg, 10deg);
}
.dm-playful .pl-star { position: absolute; }
.dm-playful .pl-star--1 { width: 44px; height: 44px; right: 6px; top: 18px; transform: rotate(14deg); animation: pl-wiggle 3.2s ease-in-out infinite; }
.dm-playful .pl-star--2 { width: 30px; height: 30px; left: 30px; bottom: 70px; transform: rotate(-12deg); }
.dm-playful .pl-squiggle { position: absolute; width: 80px; height: 24px; right: 0; bottom: 96px; transform: rotate(-18deg); }
.dm-playful .pl-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; }
.dm-playful .pl-dot--1 { background: var(--violet); right: 60px; top: 110px; }
.dm-playful .pl-dot--2 { background: var(--mint); left: 150px; top: 6px; width: 10px; height: 10px; }
.dm-playful .pl-dot--3 { background: var(--coral); left: 70px; bottom: 30px; width: 18px; height: 8px; border-radius: 6px; transform: rotate(30deg); }

@keyframes pl-wiggle { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-6deg); } }

.dm-playful .pl-how {
  flex: 1; margin: 0 24px; padding: 26px 40px 0; border-radius: 44px 44px 0 0;
  background: var(--violet); color: #fff;
  display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start;
}
.dm-playful .pl-how h2 { font-size: 40px; line-height: 1.05; }
.dm-playful .pl-how h2 span { display: inline-block; background: var(--sun); color: var(--ink); padding: 0 12px 4px; border-radius: 16px; transform: rotate(3deg); margin-top: 6px; }
.dm-playful .pl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 6px; }
.dm-playful .pl-step {
  display: flex; gap: 14px; align-items: center; padding: 20px; border-radius: 28px;
  color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
}
.dm-playful .pl-step b {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900;
}
.dm-playful .pl-step h3 { font-size: 21px; line-height: 1.1; }
.dm-playful .pl-step p { font-size: 15px; line-height: 1.3; margin-top: 4px; }
.dm-playful .pl-step--coral { background: var(--coral); transform: rotate(-2deg); }
.dm-playful .pl-step--sun { background: var(--sun); transform: translateY(14px) rotate(1.5deg); }
.dm-playful .pl-step--mint { background: var(--mint); transform: rotate(-1.5deg); }

/* ----- Приложение ----- */
.dm-playful.dm--app { display: flex; flex-direction: column; }
.dm-playful .pl-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 800; }
.dm-playful .pl-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-playful .pl-status__icons i { width: 16px; height: 10px; border-radius: 5px; background: var(--ink); }
.dm-playful .pl-lessonbar { display: flex; align-items: center; gap: 14px; padding: 20px 20px 0; }
.dm-playful .pl-close { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); font-size: 16px; font-weight: 900; }
.dm-playful .pl-progress { flex: 1; height: 20px; border-radius: 999px; background: #efe4cf; overflow: hidden; }
.dm-playful .pl-progress i {
  display: block; width: 62%; height: 100%; border-radius: 999px; background: var(--mint);
  box-shadow: inset 0 -4px 0 var(--mint-dk), inset 0 5px 0 -1px rgba(255, 255, 255, .45);
}
.dm-playful .pl-hearts { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--coral); color: var(--ink); font-weight: 900; font-size: 16px; }

.dm-playful .pl-task { padding: 24px 24px 0; }
.dm-playful .pl-task__label { font-weight: 800; font-size: 14px; color: var(--muted); }
.dm-playful .pl-task h1 { font-size: 32px; line-height: 1.08; margin-top: 8px; letter-spacing: -.01em; }
.dm-playful .pl-task h1 span { display: inline-block; background: var(--sun); padding: 0 10px 3px; border-radius: 14px; transform: rotate(-3deg); }

.dm-playful .pl-scene { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 156px; margin: 16px 20px 0; }
.dm-playful .pl-mini { flex: none; }
.dm-playful .pl-speech {
  position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 64px;
  padding: 12px 16px; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink);
  font-size: 19px; transform: rotate(-3deg);
}
.dm-playful .pl-speech b { font-weight: 900; }
.dm-playful .pl-speech::before {
  content: ""; position: absolute; left: -12px; bottom: 14px; width: 18px; height: 18px; background: #fff;
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}
.dm-playful .pl-sound { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--violet); }
.dm-playful .pl-sticker--streak { position: absolute; right: 4px; bottom: 6px; background: var(--coral); transform: rotate(6deg); font-size: 13px; height: 32px; }

.dm-playful .pl-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 20px 0; }
.dm-playful .pl-answer {
  display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 10px; text-align: center;
  border-radius: 22px; background: #fff; border: 2.5px solid #d9ccb3; box-shadow: 0 5px 0 #d9ccb3;
  font-size: 17px; font-weight: 800; line-height: 1.15;
}
.dm-playful .pl-answer.is-picked { background: #ece6ff; border-color: var(--violet); box-shadow: 0 5px 0 var(--violet); color: var(--violet-dk); }
.dm-playful .pl-hint { margin: 22px 20px 0; padding: 12px 18px; border-radius: 18px; background: #fff0c4; font-size: 15px; text-align: center; color: var(--ink); }
.dm-playful .pl-hint b { font-weight: 900; color: #8a5a00; }
.dm-playful .pl-btn--block { display: flex; height: 60px; margin: auto 20px 34px; font-size: 19px; }

/* ----- Веб-платформа ----- */
.dm-playful.dm--platform { display: grid; grid-template-columns: 232px 1fr; }
.dm-playful .pl-side { display: flex; flex-direction: column; padding: 28px 18px 24px; background: var(--ink); color: #fff; }
.dm-playful .pl-side .pl-logo { font-size: 24px; padding-left: 6px; }
.dm-playful .pl-side__tag { align-self: flex-start; margin: 8px 0 0 50px; padding: 3px 12px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 13px; font-weight: 800; transform: rotate(-4deg); }
.dm-playful .pl-side__nav { display: grid; gap: 6px; margin-top: 30px; font-size: 16px; font-weight: 700; }
.dm-playful .pl-side__nav li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: #e6e1ff; }
.dm-playful .pl-side__nav i { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.dm-playful .pl-side__nav .is-active { background: var(--violet); color: #fff; box-shadow: 0 4px 0 #1a1438; }
.dm-playful .pl-side__card {
  margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 24px;
  background: var(--mint); color: #10322b; font-size: 14px; line-height: 1.3; font-weight: 800; transform: rotate(-2deg);
}
.dm-playful .pl-side__card svg { flex: none; }

.dm-playful .pl-work { padding: 28px 36px 0; }
.dm-playful .pl-work__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-playful .pl-hello { font-size: 16px; color: var(--muted); font-weight: 700; }
.dm-playful .pl-work__head h1 { display: flex; align-items: center; gap: 16px; font-size: 40px; line-height: 1.1; margin-top: 2px; }
.dm-playful .pl-sticker--tilt { background: var(--pink); transform: rotate(6deg); font-size: 14px; height: 32px; }

.dm-playful .pl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 24px 0 26px; }
.dm-playful .pl-kpi { padding: 16px 20px; border-radius: 26px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
.dm-playful .pl-kpi p { font-size: 14px; font-weight: 800; }
.dm-playful .pl-kpi b { display: block; font-size: 34px; font-weight: 900; line-height: 1.1; margin: 2px 0; }
.dm-playful .pl-kpi span { font-size: 13px; font-weight: 700; }
.dm-playful .pl-kpi--coral { background: var(--coral); }
.dm-playful .pl-kpi--sun { background: var(--sun); transform: rotate(-1.5deg); }
.dm-playful .pl-kpi--mint { background: var(--mint); }
.dm-playful .pl-kpi--violet { background: var(--violet); color: #fff; }

.dm-playful .pl-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.dm-playful .pl-panel { padding: 18px 22px 10px; background: #fff; border-radius: 28px; border: 2.5px solid #eadfc8; }
.dm-playful .pl-panel h2 { font-size: 22px; }
.dm-playful .pl-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dm-playful .pl-tabs { display: flex; gap: 6px; font-size: 14px; font-weight: 800; color: var(--muted); }
.dm-playful .pl-tabs li { padding: 6px 14px; border-radius: 999px; background: #f6efe0; }
.dm-playful .pl-tabs .is-active { background: var(--ink); color: #fff; }
.dm-playful .pl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dm-playful .pl-table th { text-align: left; font-size: 13px; font-weight: 800; color: var(--muted); padding: 10px 6px; }
.dm-playful .pl-table td { padding: 8px 6px; border-top: 2px dashed #f0e6d2; font-weight: 700; }
.dm-playful .pl-table td:first-child { display: flex; align-items: center; gap: 10px; }
.dm-playful .pl-table .r { text-align: right; color: #8a5a00; font-weight: 900; }
.dm-playful .pl-ava { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: var(--ink); border: 2.5px solid var(--ink); }
.dm-playful .pl-prog { display: block; width: 170px; height: 14px; border-radius: 999px; background: #f2e9d8; overflow: hidden; }
.dm-playful .pl-prog i { display: block; height: 100%; border-radius: 999px; box-shadow: inset 0 4px 0 -1px rgba(255, 255, 255, .4); }
.dm-playful .pl-st { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.dm-playful .pl-st--top { background: #ffe9a8; color: #6b4300; }
.dm-playful .pl-st--ok { background: #d3f4ec; color: #0f5b4c; }
.dm-playful .pl-st--help { background: #ffe0e0; color: #a12a2a; }

.dm-playful .pl-panel--podium { padding-bottom: 18px; }
.dm-playful .pl-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 176px; margin-top: 10px; }
.dm-playful .pl-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dm-playful .pl-col i {
  display: flex; align-items: flex-start; justify-content: center; width: 70px; padding-top: 6px;
  border-radius: 18px 18px 6px 6px; border: 2.5px solid var(--ink);
  font-style: normal; font-size: 24px; font-weight: 900; color: var(--ink);
}
.dm-playful .pl-col--1 i { height: 96px; background: var(--sun); }
.dm-playful .pl-col--2 i { height: 66px; background: #b79cff; }
.dm-playful .pl-col--3 i { height: 48px; background: var(--pink); }
.dm-playful .pl-crown { position: absolute; top: -22px; font-size: 24px; color: var(--sun-dk); transform: rotate(-12deg); }
.dm-playful .pl-quest { margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: #f6efe0; font-size: 14px; }
.dm-playful .pl-quest b { font-weight: 900; }
.dm-playful .pl-prog--big { width: 100%; height: 16px; margin: 10px 0 6px; background: #fff; }
.dm-playful .pl-quest__meta { font-size: 13px; color: var(--muted); }

/* premium.css */
/* Демонстрация: Премиальное оформление. Все селекторы ограничены .dm-premium */

.dm-premium {
  --night: #0f0e0c;
  --night2: #1a1815;
  --ivory: #efe8da;
  --ash: #a39b8b;
  --hair: #3a352d;
  --brass: #c8a96a;
  --cream: #f5f0e6;
  --cream2: #eae2d3;
  --ink: #1c1a17;
  --stone: #6b6358;
  --line: #d6cbb8;
  --bronze: #7a5e2e;
  background: var(--night);
  color: var(--ivory);
  font-family: "Montserrat", "Helvetica Neue", sans-serif;
  font-weight: 400;
}

.dm-premium h1, .dm-premium h2, .dm-premium h3,
.dm-premium .pr-word, .dm-premium .pr-price, .dm-premium .pr-num {
  font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 300;
}
.dm-premium em { font-style: italic; }
.dm-premium .pr-label { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.dm-premium .pr-label--dark { color: var(--bronze); }
.dm-premium .pr-label--bronze { color: var(--bronze); }
.dm-premium .pr-mono {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid var(--brass); border-radius: 50%;
  font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 400; font-style: italic; color: var(--brass);
  box-shadow: 0 0 0 3px var(--night), 0 0 0 4px rgba(200, 169, 106, .4);
}
.dm-premium .pr-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 30px;
  font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; border-radius: 0;
}
.dm-premium .pr-btn--line { box-shadow: inset 0 0 0 1px var(--brass); color: var(--ivory); }
.dm-premium .pr-btn--fill { background: var(--bronze); color: #fbf6ec; }
.dm-premium .pr-btn--dark { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }

/* ювелирное изделие из CSS-форм */
.dm-premium .pr-glow { position: absolute; left: 50%; top: 46%; width: 340px; height: 300px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(200, 169, 106, .2), rgba(200, 169, 106, 0) 65%); }
.dm-premium .pr-jewel { position: absolute; left: 50%; top: 50%; width: 220px; height: 190px; transform: translate(-50%, -55%); }
.dm-premium .pr-ring {
  position: absolute; left: 0; bottom: 0; width: 220px; height: 96px; border-radius: 50%;
  background: conic-gradient(from 100deg, #6e5428, #e8d3a0, #a8864a, #f4e6c0, #8c6d3a, #d9bd80, #7a5e2e, #e2c88e, #6e5428);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
}
.dm-premium .pr-jewel::before {
  content: ""; position: absolute; left: 50%; bottom: 84px; width: 40px; height: 22px; transform: translateX(-50%);
  background: linear-gradient(90deg, #8c6d3a, #e8d3a0 50%, #8c6d3a);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}
.dm-premium .pr-gem {
  position: absolute; left: 50%; bottom: 100px; width: 74px; height: 62px; transform: translateX(-50%);
  background: conic-gradient(from 20deg at 50% 36%, #ffffff, #b9c6cc, #f4f7f8, #8ea1a8, #ffffff, #cbd6da, #e9eef0, #9fb1b8, #ffffff);
  clip-path: polygon(22% 0, 78% 0, 100% 34%, 50% 100%, 0 34%);
}
.dm-premium .pr-gem::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(200, 214, 220, .4));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.dm-premium .pr-shadow { position: absolute; left: 50%; bottom: 70px; width: 240px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%); }

/* ----- Сайт ----- */
.dm-premium.dm--site { display: flex; flex-direction: column; }
.dm-premium .pr-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 96px; padding: 0 64px; flex: none; border-bottom: 1px solid var(--hair); }
.dm-premium .pr-links { display: flex; gap: 40px; font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--ash); }
.dm-premium .pr-links .is-active { color: var(--ivory); box-shadow: inset 0 -1px 0 var(--brass); padding-bottom: 6px; }
.dm-premium .pr-links--right { justify-content: flex-end; }
.dm-premium .pr-brand { display: grid; justify-items: center; gap: 4px; }
.dm-premium .pr-brand .pr-mono { width: 34px; height: 34px; font-size: 20px; }
.dm-premium .pr-brand__name { font-family: "Cormorant Garamond", serif; font-size: 26px; letter-spacing: .5em; text-transform: uppercase; margin-right: -.5em; line-height: 1; margin-top: 4px; }
.dm-premium .pr-brand__sub { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); }

.dm-premium .pr-hero { display: grid; grid-template-columns: 1fr 360px 1fr; align-items: center; height: 528px; padding: 0 64px; flex: none; }
.dm-premium .pr-hero__side { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dm-premium .pr-hero__side--right { align-items: flex-start; text-align: left; }
.dm-premium .pr-word { font-size: 132px; line-height: .9; letter-spacing: -.01em; color: var(--ivory); }
.dm-premium .pr-word--l { margin: 26px -70px 30px 0; }
.dm-premium .pr-word--r { margin: 0 0 26px -70px; color: var(--brass); }
.dm-premium .pr-text { font-size: 15px; line-height: 1.75; color: var(--ash); max-width: 280px; font-weight: 300; }
.dm-premium .pr-price { font-size: 28px; line-height: 1.2; margin-bottom: 26px; }
.dm-premium .pr-more { margin-top: 22px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ash); display: flex; align-items: center; gap: 14px; }
.dm-premium .pr-more::before { content: ""; width: 36px; height: 1px; background: var(--brass); }

.dm-premium .pr-arch {
  position: relative; height: 456px; margin-top: 20px;
  border-radius: 180px 180px 0 0; border: 1px solid var(--hair);
  background: radial-gradient(ellipse at 50% 42%, #2b2721, #141210 72%);
  outline: 1px solid rgba(200, 169, 106, .35); outline-offset: -12px;
}
.dm-premium .pr-arch figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; text-align: center;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 17px; color: var(--ash);
}

.dm-premium .pr-collection { flex: 1; padding: 26px 64px 0; background: var(--cream); color: var(--ink); }
.dm-premium .pr-items { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.dm-premium .pr-items li { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 12px; padding: 4px 36px; border-left: 1px solid var(--line); }
.dm-premium .pr-items li:first-child { padding-left: 0; border-left: 0; }
.dm-premium .pr-items li:last-child { padding-right: 0; }
.dm-premium .pr-num { font-size: 26px; font-style: italic; color: var(--bronze); }
.dm-premium .pr-items h3 { font-size: 28px; line-height: 1.1; font-weight: 400; }
.dm-premium .pr-items p { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.dm-premium .pr-items b { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 19px; }

/* ----- Приложение ----- */
.dm-premium.dm--app { display: flex; flex-direction: column; background: var(--cream); color: var(--ink); }
.dm-premium .pr-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 500; }
.dm-premium .pr-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-premium .pr-status__icons i { width: 16px; height: 10px; background: var(--ink); }
.dm-premium .pr-appbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; font-size: 20px; }
.dm-premium .pr-appbar__brand { font-family: "Cormorant Garamond", serif; font-size: 20px; letter-spacing: .5em; text-transform: uppercase; margin-right: -.5em; }
.dm-premium .pr-photo { position: relative; height: 262px; margin: 0 24px; background: radial-gradient(ellipse at 50% 42%, #2b2721, #0f0e0c 75%); outline: 1px solid rgba(200, 169, 106, .35); outline-offset: -10px; }
.dm-premium .pr-jewel--sm { transform: translate(-50%, -52%) scale(.82); }
.dm-premium .pr-photo .pr-shadow { bottom: 56px; width: 200px; }
.dm-premium .pr-photo__count { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 11px; letter-spacing: .3em; color: var(--ash); }
.dm-premium .pr-detail { padding: 20px 24px 0; }
.dm-premium .pr-detail__title { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.dm-premium .pr-detail h1 { font-size: 38px; line-height: 1.05; font-weight: 400; }
.dm-premium .pr-mono--sm { width: 38px; height: 38px; font-size: 20px; color: var(--bronze); border-color: var(--bronze); box-shadow: none; }
.dm-premium .pr-specs { margin-top: 14px; border-top: 1px solid var(--line); }
.dm-premium .pr-specs div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dm-premium .pr-specs dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); align-self: center; }
.dm-premium .pr-specs dd span { color: var(--bronze); }
.dm-premium .pr-buy { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 16px; }
.dm-premium .pr-buy .pr-price { font-size: 28px; margin: 0; font-weight: 400; }
.dm-premium .pr-note { font-size: 12px; color: var(--stone); max-width: 140px; text-align: right; line-height: 1.4; }
.dm-premium .pr-btn--block { display: flex; height: 54px; }
.dm-premium .pr-tabbar { display: flex; justify-content: space-around; margin-top: auto; padding: 16px 8px 26px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.dm-premium .pr-tabbar span { position: relative; }
.dm-premium .pr-tabbar .is-active { color: var(--ink); }
.dm-premium .pr-tabbar .is-active::after { content: ""; position: absolute; left: 50%; top: -11px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--bronze); }

/* ----- Веб-платформа ----- */
.dm-premium.dm--platform { display: grid; grid-template-columns: 248px 1fr; background: var(--cream); color: var(--ink); }
.dm-premium .pr-side { display: flex; flex-direction: column; padding: 40px 36px 32px; background: var(--night); color: var(--ivory); }
.dm-premium .pr-brand--side { justify-items: start; }
.dm-premium .pr-brand--side .pr-mono { width: 44px; height: 44px; font-size: 26px; margin-bottom: 10px; }
.dm-premium .pr-brand--side .pr-brand__name { font-size: 20px; }
.dm-premium .pr-side__nav { display: grid; gap: 2px; margin-top: 56px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ash); }
.dm-premium .pr-side__nav li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.dm-premium .pr-side__nav .is-active { color: var(--ivory); }
.dm-premium .pr-side__nav .is-active::before { content: ""; width: 24px; height: 1px; background: var(--brass); }
.dm-premium .pr-side__user { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hair); }
.dm-premium .pr-side__name { font-family: "Cormorant Garamond", serif; font-size: 21px; margin-top: 6px; }

.dm-premium .pr-work { padding: 44px 56px 0; }
.dm-premium .pr-work__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-premium .pr-work__head h1 { font-size: 58px; line-height: 1; margin-top: 12px; }
.dm-premium .pr-work__head h1 em { color: var(--bronze); }
.dm-premium .pr-actions { display: flex; gap: 16px; }
.dm-premium .pr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dm-premium .pr-kpis div { padding: 20px 0 18px; }
.dm-premium .pr-kpis div + div { padding-left: 40px; border-left: 1px solid var(--line); }
.dm-premium .pr-kpis b { display: block; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 48px; line-height: 1; }
.dm-premium .pr-kpis small { font-size: 22px; color: var(--stone); }
.dm-premium .pr-kpis p { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--stone); margin-top: 10px; }

.dm-premium .pr-grid { display: grid; grid-template-columns: 1fr 240px; gap: 40px; align-items: start; }
.dm-premium .pr-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dm-premium .pr-section-head h2 { font-size: 28px; font-weight: 400; }
.dm-premium .pr-tabs { display: flex; gap: 24px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); }
.dm-premium .pr-tabs .is-active { color: var(--ink); box-shadow: inset 0 -1px 0 var(--bronze); padding-bottom: 4px; }
.dm-premium .pr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-premium .pr-table th, .dm-premium .pr-table td { padding-right: 16px; white-space: nowrap; }
.dm-premium .pr-table th:last-child, .dm-premium .pr-table td:last-child { padding-right: 0; }
.dm-premium .pr-table th.r { text-align: right; }
.dm-premium .pr-table th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dm-premium .pr-table td { padding-top: 17px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.dm-premium .pr-table td.r { text-align: right; font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 500; }
.dm-premium .pr-time { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 500; }
.dm-premium .pr-st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.dm-premium .pr-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.dm-premium .pr-st--ok::before { background: #2f5d4e; }
.dm-premium .pr-st--wait::before { background: var(--bronze); }
.dm-premium .pr-st--new::before { background: #7a2e2a; }

.dm-premium .pr-feature { padding: 22px 22px 24px; background: var(--night); color: var(--ivory); }
.dm-premium .pr-feature__img { position: relative; height: 196px; margin: 14px 0 16px; background: radial-gradient(ellipse at 50% 45%, #2b2721, #0f0e0c 75%); outline: 1px solid rgba(200, 169, 106, .3); outline-offset: -8px; overflow: hidden; }
.dm-premium .pr-feature__img .pr-glow { width: 220px; height: 200px; }
.dm-premium .pr-jewel--xs { transform: translate(-50%, -50%) scale(.6); }
.dm-premium .pr-feature h3 { font-size: 28px; font-weight: 400; line-height: 1.1; }
.dm-premium .pr-feature h3 em { color: var(--brass); }
.dm-premium .pr-feature__meta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin-top: 8px; }

/* tech.css */
/* Демонстрация: Технологичное оформление. Все селекторы ограничены .dm-tech */

.dm-tech {
  --bg: #07090d;
  --surface: #0e131b;
  --surface2: #121925;
  --line: #1d2733;
  --ink: #e6edf3;
  --muted: #8b98a9;
  --accent: #22d3ee;
  --ok: #a3e635;
  --warn: #fbbf24;
  --crit: #ff5c7a;
  --mono: "Fira Code", ui-monospace, monospace;
  background: var(--bg);
  color: var(--ink);
  font-family: "Exo 2", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Фоновая сетка и свечение */
.dm-tech .tc-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(600px 360px at 78% 34%, rgba(34, 211, 238, .10), transparent 70%),
    linear-gradient(rgba(29, 39, 51, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 39, 51, .55) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.dm-tech > *:not(.tc-bg), .dm-tech .tc-main > *:not(.tc-bg) { position: relative; }

/* Общие элементы */
.dm-tech .tc-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .12em; }
.dm-tech .tc-logo em { font-style: normal; font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--accent); }
.dm-tech .tc-logo__mark { width: 18px; height: 18px; border: 1.5px solid var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px rgba(34, 211, 238, .45), inset 0 0 0 4px var(--bg), inset 0 0 0 9px var(--accent); }
.dm-tech .tc-mlabel { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dm-tech .tc-code { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.dm-tech .tc-glow { color: var(--accent); text-shadow: 0 0 18px rgba(34, 211, 238, .45); }
.dm-tech .tc-ok { color: var(--ok); }
.dm-tech .tc-warn { color: var(--warn); }
.dm-tech .tc-c { color: var(--muted); }
.dm-tech kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px; opacity: .8; }

.dm-tech .tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: 3px;
  background: var(--accent); color: #041016; font-weight: 600; font-size: 15px;
  box-shadow: 0 0 18px rgba(34, 211, 238, .35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.dm-tech .tc-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #2c3a4b; clip-path: none; }
.dm-tech .tc-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.dm-tech .tc-btn--block { display: flex; width: 100%; }

.dm-tech .tc-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ok); }
.dm-tech .tc-status i, .dm-tech .tc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dm-tech .tc-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.dm-tech .tc-live i { animation: tc-pulse 2s ease-in-out infinite; }
@keyframes tc-pulse { 50% { opacity: .35; } }

/* Панель с угловыми метками */
.dm-tech .tc-panel {
  background: linear-gradient(var(--surface), var(--surface)) padding-box;
  border: 1px solid var(--line); border-radius: 4px;
}
.dm-tech .tc-hud, .dm-tech .tc-bigchart { position: relative; }
.dm-tech .tc-hud::before, .dm-tech .tc-hud::after, .dm-tech .tc-bigchart::before, .dm-tech .tc-bigchart::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--accent); border-style: solid;
}
.dm-tech .tc-hud::before, .dm-tech .tc-bigchart::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.dm-tech .tc-hud::after, .dm-tech .tc-bigchart::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.dm-tech .tc-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dm-tech .tc-chart__line { filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6)); }
.dm-tech .tc-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; }
.dm-tech .tc-legend { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dm-tech .tc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-tech .tc-sw { width: 16px; height: 2px; background: var(--accent); }
.dm-tech .tc-sw--dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); }
.dm-tech .tc-sw--b { background: repeating-linear-gradient(90deg, var(--ok) 0 5px, transparent 5px 9px); }

/* ----- Сайт ----- */
.dm-tech.dm--site { padding: 0 56px; }
.dm-tech .tc-nav { display: flex; align-items: center; gap: 36px; height: 72px; border-bottom: 1px solid var(--line); }
.dm-tech .tc-links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); margin-left: 24px; }
.dm-tech .tc-links li { display: flex; align-items: baseline; gap: 6px; padding: 24px 0 22px; }
.dm-tech .tc-links b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--muted); }
.dm-tech .tc-links .is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.dm-tech .tc-links .is-active b { color: var(--accent); }
.dm-tech .tc-nav .tc-status { margin-left: auto; }

.dm-tech .tc-hero { display: grid; grid-template-columns: 1fr 520px; gap: 56px; padding-top: 40px; }
.dm-tech .tc-hero h1 { font-size: 52px; line-height: 1.06; font-weight: 700; letter-spacing: -.015em; margin: 16px 0 20px; }
.dm-tech .tc-lead { font-size: 17px; line-height: 1.6; color: #aab6c5; max-width: 500px; margin-bottom: 28px; }
.dm-tech .tc-actions { display: flex; gap: 14px; margin-bottom: 28px; }
.dm-tech .tc-term { font-family: var(--mono); font-size: 13px; line-height: 1.8; padding: 12px 16px; background: #05070a; border: 1px solid var(--line); border-left: 2px solid var(--accent); max-width: 500px; }

.dm-tech .tc-hud { padding: 18px 20px 16px; background: rgba(14, 19, 27, .86); }
.dm-tech .tc-hud .tc-panel__head { margin-bottom: 14px; }
.dm-tech .tc-chart { width: 100%; height: 220px; }
.dm-tech .tc-tip { position: absolute; top: 58px; right: 108px; font-family: var(--mono); font-size: 11px; padding: 3px 8px; background: var(--bg); border: 1px solid var(--accent); color: var(--accent); }
.dm-tech .tc-hud .tc-legend { margin-top: 10px; }
.dm-tech .tc-readouts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 1px solid var(--line); }
.dm-tech .tc-readouts div { padding-top: 12px; }
.dm-tech .tc-readouts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.dm-tech .tc-readouts p { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dm-tech .tc-readouts b { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.dm-tech .tc-readouts small { font-size: 13px; color: var(--muted); }

.dm-tech .tc-metrics { display: grid; grid-template-columns: repeat(3, 1fr) 220px; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dm-tech .tc-metrics > div { padding: 18px 24px 18px 0; }
.dm-tech .tc-metrics > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.dm-tech .tc-metrics b { display: block; font-size: 38px; font-weight: 600; line-height: 1.1; margin: 8px 0 4px; }
.dm-tech .tc-metrics small { font-size: 16px; color: var(--muted); margin-left: 4px; font-weight: 500; }
.dm-tech .tc-metrics p { font-size: 13px; color: var(--muted); }
.dm-tech .tc-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.dm-tech .tc-bars i { flex: 1; background: linear-gradient(var(--accent), rgba(34, 211, 238, .15)); opacity: .85; }
.dm-tech .tc-bars i:last-child { box-shadow: 0 0 12px rgba(34, 211, 238, .55); opacity: 1; }

/* ----- Приложение ----- */
.dm-tech.dm--app { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 0; }
.dm-tech .tc-sbar { display: flex; justify-content: space-between; padding: 14px 12px 0; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.dm-tech .tc-sbar__icons { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.dm-tech .tc-sbar__icons i { width: 14px; height: 9px; border: 1px solid var(--ink); border-radius: 2px; }
.dm-tech .tc-sbar__icons i:last-child { width: 20px; background: linear-gradient(90deg, var(--ink) 70%, transparent 70%); }
.dm-tech .tc-apphead { display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 4px 2px; }
.dm-tech .tc-apphead h1 { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 2px; }

.dm-tech .tc-gauge { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 14px; }
.dm-tech .tc-gauge__arc { filter: drop-shadow(0 0 6px rgba(34, 211, 238, .7)); }
.dm-tech .tc-gauge__val { position: absolute; left: 14px; top: 14px; width: 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dm-tech .tc-gauge__val b { font-family: var(--mono); font-size: 30px; font-weight: 500; line-height: 1; }
.dm-tech .tc-gauge__val small { font-size: 14px; color: var(--muted); }
.dm-tech .tc-gauge__val span { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.dm-tech .tc-gauge__list { display: grid; gap: 0; }
.dm-tech .tc-gauge__list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.dm-tech .tc-gauge__list b { font-family: var(--mono); font-weight: 500; color: var(--ink); }

.dm-tech .tc-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-tech .tc-quad .tc-panel { padding: 12px 14px; }
.dm-tech .tc-quad b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 500; margin: 2px 0 4px; }
.dm-tech .tc-quad small { font-size: 12px; color: var(--muted); margin-left: 2px; }
.dm-tech .tc-quad svg { width: 100%; height: 22px; }
.dm-tech .tc-pips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; height: 22px; align-items: center; }
.dm-tech .tc-pips i { height: 8px; background: var(--ok); opacity: .85; }

.dm-tech .tc-log { padding: 12px 14px 6px; }
.dm-tech .tc-log ul { margin-top: 6px; }
.dm-tech .tc-log li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dm-tech .tc-log time, .dm-tech .tc-log em { font-family: var(--mono); font-size: 11px; font-style: normal; }
.dm-tech .tc-log time { color: var(--muted); }

.dm-tech .tc-tabbar { display: flex; justify-content: space-around; margin: auto -16px 0; padding: 10px 8px 22px; border-top: 1px solid var(--line); background: rgba(7, 9, 13, .92); font-size: 11px; color: var(--muted); }
.dm-tech .tc-tabbar span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 6px; min-width: 64px; }
.dm-tech .tc-tabbar .is-active { color: var(--accent); }
.dm-tech .tc-tabbar .is-active::before { content: ""; position: absolute; top: -11px; left: 14px; right: 14px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dm-tech .tc-ico { width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 3px; }
.dm-tech .tc-ico--grid { background: linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.dm-tech .tc-ico--wave { border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%) 0 0 / 10px 20px repeat-x; }
.dm-tech .tc-ico--bell { border-radius: 10px 10px 3px 3px; }
.dm-tech .tc-ico--term { background: linear-gradient(currentColor, currentColor) 10px 12px / 6px 1.5px no-repeat; }

/* ----- Веб-платформа ----- */
.dm-tech.dm--platform { display: grid; grid-template-columns: 224px 1fr; }
.dm-tech .tc-side { display: flex; flex-direction: column; padding: 22px 16px 18px; background: #0a0d13; border-right: 1px solid var(--line); }
.dm-tech .tc-side__group { margin: 34px 0 10px 10px; }
.dm-tech .tc-side__group + .tc-side__nav { margin-bottom: 0; }
.dm-tech .tc-side__nav { display: grid; gap: 2px; font-size: 14px; color: #aab6c5; }
.dm-tech .tc-side__nav li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 3px; }
.dm-tech .tc-side__nav b { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); }
.dm-tech .tc-side__nav em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; padding: 0 6px; border-radius: 3px; background: rgba(255, 92, 122, .16); color: var(--crit); }
.dm-tech .tc-side__nav .is-active { color: var(--ink); background: rgba(34, 211, 238, .08); box-shadow: inset 2px 0 0 var(--accent); }
.dm-tech .tc-side__nav .is-active b { color: var(--accent); }
.dm-tech .tc-side__foot { margin-top: auto; display: grid; gap: 6px; padding: 12px 10px 0; border-top: 1px solid var(--line); }

.dm-tech .tc-main { position: relative; padding: 0 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.dm-tech .tc-main .tc-bg { background-size: auto, 32px 32px, 32px 32px; background-image: radial-gradient(520px 300px at 40% 55%, rgba(34, 211, 238, .07), transparent 70%), linear-gradient(rgba(29, 39, 51, .45) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 39, 51, .45) 1px, transparent 1px); }
.dm-tech .tc-top { display: flex; align-items: center; gap: 20px; height: 56px; margin: 0 -24px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(7, 9, 13, .9); }
.dm-tech .tc-path { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.dm-tech .tc-path b { font-weight: 500; color: var(--ink); }
.dm-tech .tc-cmd { margin-left: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 340px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); font-size: 13px; color: var(--muted); }
.dm-tech .tc-avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--accent); }

.dm-tech .tc-titlebar { display: flex; align-items: flex-end; gap: 12px; padding-top: 4px; }
.dm-tech .tc-titlebar > div:first-child { margin-right: auto; }
.dm-tech .tc-titlebar h1 { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.dm-tech .tc-seg { display: flex; border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dm-tech .tc-seg span { padding: 8px 12px; }
.dm-tech .tc-seg span + span { border-left: 1px solid var(--line); }
.dm-tech .tc-seg .is-active { color: var(--accent); background: rgba(34, 211, 238, .1); box-shadow: inset 0 -2px 0 var(--accent); }

.dm-tech .tc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dm-tech .tc-kpis .tc-panel { padding: 12px 16px; }
.dm-tech .tc-kpis b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1.25; margin-top: 4px; }
.dm-tech .tc-kpis small { font-size: 13px; color: var(--muted); margin-left: 3px; }
.dm-tech .tc-kpis em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dm-tech .tc-kpis .tc-up { color: var(--ok); }
.dm-tech .tc-kpis .tc-down { color: var(--warn); }

.dm-tech .tc-row { display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
.dm-tech .tc-bigchart { padding: 14px 16px 12px; }
.dm-tech .tc-bigchart svg { width: 100%; height: 210px; margin-top: 14px; }
.dm-tech .tc-alerts { padding: 14px 16px; }
.dm-tech .tc-alerts ul { margin-top: 10px; display: grid; gap: 8px; }
.dm-tech .tc-alerts li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-left-width: 2px; border-radius: 3px; background: var(--surface2); }
.dm-tech .tc-alerts em { grid-row: span 2; align-self: start; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }
.dm-tech .tc-alerts p { font-size: 13px; }
.dm-tech .tc-alerts time { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dm-tech .tc-alerts .is-crit { border-left-color: var(--crit); }
.dm-tech .tc-alerts .is-crit em { color: var(--crit); background: rgba(255, 92, 122, .14); }
.dm-tech .tc-alerts .is-warn { border-left-color: var(--warn); }
.dm-tech .tc-alerts .is-warn em { color: var(--warn); background: rgba(251, 191, 36, .12); }

.dm-tech .tc-tablewrap { padding: 2px 16px 4px; }
.dm-tech .tc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dm-tech .tc-table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 0; border-bottom: 1px solid var(--line); }
.dm-tech .tc-table td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.dm-tech .tc-table tr:last-child td { border-bottom: 0; }
.dm-tech .tc-table td:first-child { font-family: var(--mono); color: var(--ink); }
.dm-tech .tc-table td:nth-child(2) { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.dm-tech .tc-table .r { text-align: right; padding-right: 28px; font-family: var(--mono); }
.dm-tech .tc-table .is-selected td { background: rgba(34, 211, 238, .06); }
.dm-tech .tc-table .is-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
.dm-tech .tc-st { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.dm-tech .tc-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dm-tech .tc-st--ok { color: var(--ok); }
.dm-tech .tc-st--warn { color: var(--warn); }
.dm-tech .tc-st--crit { color: var(--crit); }
.dm-tech .tc-st--crit::before { border-radius: 1px; transform: rotate(45deg); }
.dm-tech .tc-meter { display: block; width: 140px; height: 6px; background: var(--line); }
.dm-tech .tc-meter i { display: block; height: 100%; background: var(--accent); }
.dm-tech .tc-meter--warn i { background: var(--warn); }
.dm-tech .tc-meter--crit i { background: var(--crit); }

/* Приложение: компактная вертикальная раскладка без сжатия блоков */
.dm-tech.dm--app > * { flex-shrink: 0; }
.dm-tech.dm--app { gap: 10px; }
.dm-tech .tc-quad .tc-panel { padding: 10px 14px; }
.dm-tech .tc-log li { padding: 7px 0; }
.dm-tech .tc-gauge { padding: 12px 14px; }
.dm-tech .tc-gauge__val { top: 12px; }

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

.dm-glassmorphism {
  --bg: #f6eeff;
  --ink: #1b1530;
  --muted: #4a4360;
  --accent: #6d28d9;
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .72);
  --edge: rgba(255, 255, 255, .65);
  --shadow: 0 16px 48px rgba(76, 40, 140, .16);
  background: var(--bg);
  color: var(--ink);
  font-family: "Geologica", system-ui, sans-serif;
}
.dm-glassmorphism.dm--app {
  --bg: #0b1026;
  --ink: #f5f7ff;
  --muted: #c9d0ea;
  --accent: #00c2ff;
}
.dm-glassmorphism.dm--platform {
  --bg: #e9fbf5;
  --ink: #0f2a2a;
  --muted: #3f5f5c;
  --accent: #0f766e;
  --shadow: 0 16px 48px rgba(15, 80, 70, .14);
}

/* Сцена: цветные пятна под стеклом */
.dm-glassmorphism .gl-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dm-glassmorphism .gl-blob { position: absolute; border-radius: 50%; filter: blur(30px); }
.dm-glassmorphism .gl-blob--pink { width: 440px; height: 440px; right: -40px; top: 70px; background: radial-gradient(circle at 40% 40%, #ff6b9a, #ff6b9a 45%, rgba(255, 107, 154, 0) 72%); }
.dm-glassmorphism .gl-blob--peach { width: 340px; height: 340px; right: 330px; top: 360px; background: radial-gradient(circle, #ffb86b, #ffb86b 40%, rgba(255, 184, 107, 0) 72%); }
.dm-glassmorphism .gl-blob--violet { width: 420px; height: 420px; right: 120px; top: -150px; background: radial-gradient(circle, #7c5cff, #7c5cff 38%, rgba(124, 92, 255, 0) 72%); }
.dm-glassmorphism .gl-blob--small { width: 220px; height: 220px; left: -80px; bottom: -40px; background: radial-gradient(circle, #b9a6ff, rgba(185, 166, 255, 0) 70%); }
.dm-glassmorphism .gl-blob--cyan { width: 340px; height: 340px; left: -110px; top: 90px; background: radial-gradient(circle, #00c2ff, #00c2ff 35%, rgba(0, 194, 255, 0) 70%); }
.dm-glassmorphism .gl-blob--indigo { width: 380px; height: 380px; right: -150px; top: 300px; background: radial-gradient(circle, #6a3dff, #6a3dff 38%, rgba(106, 61, 255, 0) 70%); }
.dm-glassmorphism .gl-blob--magenta { width: 300px; height: 300px; left: 10px; bottom: 40px; background: radial-gradient(circle, #ff3d9a, #ff3d9a 30%, rgba(255, 61, 154, 0) 70%); }
.dm-glassmorphism .gl-blob--teal { width: 520px; height: 520px; left: 120px; top: -160px; background: radial-gradient(circle, #2dd4bf, #2dd4bf 35%, rgba(45, 212, 191, 0) 70%); }
.dm-glassmorphism .gl-blob--sky { width: 560px; height: 560px; right: -120px; top: 180px; background: radial-gradient(circle, #38bdf8, #38bdf8 32%, rgba(56, 189, 248, 0) 70%); }
.dm-glassmorphism .gl-blob--lime { width: 400px; height: 400px; left: 360px; bottom: -180px; background: radial-gradient(circle, #a3e635, #a3e635 30%, rgba(163, 230, 53, 0) 70%); }
.dm-glassmorphism > *:not(.gl-scene) { position: relative; }

@keyframes gl-drift { 50% { transform: translate(-16px, 12px); } }
.dm-glassmorphism .gl-blob--pink, .dm-glassmorphism .gl-blob--indigo, .dm-glassmorphism .gl-blob--sky { animation: gl-drift 24s ease-in-out infinite; }

/* Материал стекла */
.dm-glassmorphism .gl-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.dm-glassmorphism .gl-glass--dark {
  background: rgba(20, 26, 58, .55);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 16px 40px rgba(2, 6, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.dm-glassmorphism .gl-glass--dense { background: rgba(255, 255, 255, .84); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dm-glassmorphism .gl-glass { background: rgba(255, 255, 255, .9); }
  .dm-glassmorphism .gl-glass--dark { background: rgba(20, 26, 58, .92); }
}
@media (prefers-reduced-transparency: reduce) {
  .dm-glassmorphism .gl-glass { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dm-glassmorphism .gl-glass--dark { background: rgba(20, 26, 58, .94); }
}

/* Общие элементы */
.dm-glassmorphism .gl-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.dm-glassmorphism .gl-logo i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 200deg, #7c5cff, #ff6b9a, #ffb86b, #7c5cff); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .55); }
.dm-glassmorphism.dm--platform .gl-logo i { background: conic-gradient(from 200deg, #0f766e, #38bdf8, #a3e635, #0f766e); }
.dm-glassmorphism .gl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 500; font-size: 15px;
  box-shadow: 0 10px 24px rgba(109, 40, 217, .32);
}
.dm-glassmorphism .gl-btn--glass {
  background: rgba(255, 255, 255, .45); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.dm-glassmorphism .gl-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.dm-glassmorphism .gl-btn--block { display: flex; width: 100%; }
.dm-glassmorphism .gl-btn--cyan { background: #0369a1; box-shadow: 0 10px 28px rgba(0, 194, 255, .35); }
.dm-glassmorphism .gl-btn--teal { background: #0f766e; box-shadow: 0 10px 24px rgba(15, 118, 110, .3); }
.dm-glassmorphism .gl-chip { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 5px; border-radius: 999px; font-size: 13px; color: var(--ink); }
.dm-glassmorphism .gl-chip b { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 500; font-size: 12px; }
.dm-glassmorphism .gl-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 500; color: var(--ink); }
.dm-glassmorphism .gl-muted { color: var(--muted); font-size: 13px; }
.dm-glassmorphism .gl-card { border-radius: 24px; padding: 20px 22px; }
.dm-glassmorphism .gl-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dm-glassmorphism .gl-card__label { font-size: 13px; font-weight: 500; color: var(--muted); }
.dm-glassmorphism .gl-card__title { font-size: 15px; font-weight: 600; }
.dm-glassmorphism .gl-card__note { font-size: 13px; color: var(--muted); margin-top: 8px; }
.dm-glassmorphism .gl-toggle { position: relative; display: inline-block; width: 40px; height: 24px; border-radius: 999px; background: rgba(27, 21, 48, .18); border: 1px solid rgba(255, 255, 255, .6); flex: none; }
.dm-glassmorphism .gl-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.dm-glassmorphism .gl-toggle.is-on { background: var(--accent); }
.dm-glassmorphism .gl-toggle.is-on::after { left: 18px; }
.dm-glassmorphism .gl-ring { position: relative; display: grid; place-items: center; }
.dm-glassmorphism .gl-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dm-glassmorphism .gl-ring b { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.dm-glassmorphism .gl-ring span { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ----- Сайт ----- */
.dm-glassmorphism.dm--site { padding: 20px 40px; }
.dm-glassmorphism .gl-nav { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 11px 0 24px; border-radius: 999px; }
.dm-glassmorphism .gl-links { display: flex; gap: 6px; margin: 0 auto; font-size: 15px; color: var(--muted); }
.dm-glassmorphism .gl-links li { padding: 8px 16px; border-radius: 999px; }
.dm-glassmorphism .gl-links .is-active { color: var(--ink); font-weight: 500; background: rgba(255, 255, 255, .75); box-shadow: 0 2px 10px rgba(76, 40, 140, .12); }

.dm-glassmorphism .gl-hero { display: grid; grid-template-columns: 1fr 560px; gap: 36px; margin-top: 44px; }
.dm-glassmorphism .gl-hero__text { padding-top: 14px; }
.dm-glassmorphism .gl-hero h1 { font-size: 58px; line-height: 1.06; font-weight: 600; letter-spacing: -.025em; margin: 22px 0 20px; }
.dm-glassmorphism .gl-lead { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 470px; margin-bottom: 30px; }
.dm-glassmorphism .gl-actions { display: flex; gap: 12px; }
.dm-glassmorphism .gl-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 14px; color: var(--muted); }
.dm-glassmorphism .gl-proof b { color: var(--ink); font-weight: 600; }
.dm-glassmorphism .gl-faces { display: flex; }
.dm-glassmorphism .gl-faces i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; background: linear-gradient(135deg, #ffb86b, #ff6b9a); }
.dm-glassmorphism .gl-faces i:first-child { margin-left: 0; background: linear-gradient(135deg, #b9a6ff, #7c5cff); }
.dm-glassmorphism .gl-faces i:last-child { background: linear-gradient(135deg, #ffd8a8, #ffb86b); }

.dm-glassmorphism .gl-stage { position: relative; height: 470px; }
.dm-glassmorphism .gl-stage .gl-card { position: absolute; }
.dm-glassmorphism .gl-thermo { left: 0; top: 10px; width: 290px; z-index: 1; }
.dm-glassmorphism .gl-thermo .gl-card__head p { font-size: 16px; font-weight: 600; }
.dm-glassmorphism .gl-thermo .gl-ring { margin: 12px auto 14px; }
.dm-glassmorphism .gl-modes { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .45); font-size: 13px; }
.dm-glassmorphism .gl-modes span { flex: 1; text-align: center; padding: 7px 0; border-radius: 999px; color: var(--muted); }
.dm-glassmorphism .gl-modes .is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 2px 8px rgba(76, 40, 140, .15); }
.dm-glassmorphism .gl-scenecard { right: 0; top: 64px; width: 270px; background: rgba(255, 255, 255, .5); }
.dm-glassmorphism .gl-scenecard h3 { font-size: 20px; font-weight: 600; margin: 2px 0 12px; }
.dm-glassmorphism .gl-scenecard li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .7); font-size: 14px; }
.dm-glassmorphism .gl-energy { left: 230px; top: 318px; width: 300px; z-index: 2; background: rgba(255, 255, 255, .62); }
.dm-glassmorphism .gl-energy > b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.dm-glassmorphism .gl-energy small { font-size: 14px; font-weight: 400; color: var(--muted); }
.dm-glassmorphism .gl-bars { position: absolute; right: 22px; top: 22px; display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.dm-glassmorphism .gl-bars i { width: 9px; border-radius: 5px; background: rgba(124, 92, 255, .45); }
.dm-glassmorphism .gl-bars i:nth-child(6) { background: var(--accent); }

.dm-glassmorphism .gl-strip { display: grid; grid-template-columns: repeat(3, 1fr) 230px; gap: 28px; align-items: center; margin-top: 18px; padding: 22px 28px; border-radius: 28px; background: rgba(255, 255, 255, .6); }
.dm-glassmorphism .gl-strip h2 { font-size: 16px; font-weight: 600; margin: 10px 0 4px; }
.dm-glassmorphism .gl-strip p { font-size: 13px; line-height: 1.45; color: var(--muted); }
.dm-glassmorphism .gl-ico { display: block; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .8); }
.dm-glassmorphism .gl-ico--a { background: linear-gradient(135deg, #ff6b9a, #ffb86b); }
.dm-glassmorphism .gl-ico--b { background: linear-gradient(135deg, #7c5cff, #ff6b9a); }
.dm-glassmorphism .gl-ico--c { background: linear-gradient(135deg, #ffb86b, #7c5cff); }
.dm-glassmorphism .gl-strip__price { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .8); }
.dm-glassmorphism .gl-strip__price b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }

/* ----- Приложение ----- */
.dm-glassmorphism.dm--app { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; }
.dm-glassmorphism .gl-sbar { display: flex; justify-content: space-between; padding: 14px 10px 0; font-size: 14px; font-weight: 600; }
.dm-glassmorphism .gl-sbar__icons { display: flex; gap: 4px; align-items: center; }
.dm-glassmorphism .gl-sbar__icons i { width: 15px; height: 10px; border-radius: 2px; background: var(--ink); }
.dm-glassmorphism .gl-apphead { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; }
.dm-glassmorphism .gl-apphead p { font-size: 14px; color: var(--muted); }
.dm-glassmorphism .gl-apphead h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dm-glassmorphism .gl-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-weight: 600; font-size: 15px; }
.dm-glassmorphism.dm--app .gl-avatar { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.dm-glassmorphism .gl-appthermo { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding: 16px 18px; }
.dm-glassmorphism .gl-ring--sm b { font-size: 28px; }
.dm-glassmorphism .gl-ring--sm span { font-size: 12px; margin-top: 4px; }
.dm-glassmorphism .gl-appthermo__mode { font-size: 19px; font-weight: 600; margin: 2px 0 2px; }
.dm-glassmorphism .gl-stepper { display: inline-flex; align-items: center; gap: 16px; margin-top: 12px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: 18px; }
.dm-glassmorphism .gl-stepper b { font-size: 15px; font-weight: 600; }
.dm-glassmorphism .gl-rooms { display: flex; gap: 8px; font-size: 14px; }
.dm-glassmorphism .gl-rooms span { padding: 8px 14px; border-radius: 999px; background: rgba(20, 26, 58, .5); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--muted); }
.dm-glassmorphism .gl-rooms .is-on { background: #f5f7ff; color: #0b1026; font-weight: 500; border-color: #f5f7ff; }
.dm-glassmorphism .gl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-glassmorphism .gl-tile { position: relative; padding: 14px 16px; border-radius: 22px; }
.dm-glassmorphism .gl-tile p { font-size: 16px; font-weight: 600; margin-top: 12px; }
.dm-glassmorphism .gl-tile > span { font-size: 13px; color: var(--muted); }
.dm-glassmorphism .gl-tile .gl-toggle { position: absolute; right: 14px; top: 14px; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .25); }
.dm-glassmorphism .gl-tile .gl-toggle.is-on { background: #0369a1; }
.dm-glassmorphism .gl-tile.is-on { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .34); }
.dm-glassmorphism .gl-tico { display: block; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .14); position: relative; }
.dm-glassmorphism .gl-tico::after { content: ""; position: absolute; inset: 11px; border: 2px solid currentColor; border-radius: 50%; }
.dm-glassmorphism .is-on .gl-tico--lamp, .dm-glassmorphism .is-on .gl-tico--note { background: #f5f7ff; color: #0b1026; }
.dm-glassmorphism .gl-tico--blind::after, .dm-glassmorphism .gl-tico--lock::after { border-radius: 3px; }
.dm-glassmorphism .gl-tabbar { display: flex; justify-content: space-around; margin-top: auto; padding: 10px 8px; border-radius: 26px; font-size: 11px; color: var(--muted); }
.dm-glassmorphism .gl-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 18px; }
.dm-glassmorphism .gl-tabbar .gl-tico { width: 26px; height: 26px; background: none; }
.dm-glassmorphism .gl-tabbar .gl-tico::after { inset: 5px; }
.dm-glassmorphism .gl-tabbar .is-active { background: rgba(255, 255, 255, .2); color: var(--ink); font-weight: 500; }

/* ----- Веб-платформа ----- */
.dm-glassmorphism.dm--platform { display: grid; grid-template-columns: 236px 1fr; gap: 16px; padding: 16px; }
.dm-glassmorphism .gl-side { display: flex; flex-direction: column; padding: 22px 14px 14px; border-radius: 26px; }
.dm-glassmorphism .gl-side .gl-logo { padding-left: 8px; }
.dm-glassmorphism .gl-side__obj { font-size: 13px; color: var(--muted); padding: 6px 8px 0 44px; }
.dm-glassmorphism .gl-side__nav { display: grid; gap: 4px; margin-top: 28px; font-size: 15px; color: var(--muted); }
.dm-glassmorphism .gl-side__nav li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; }
.dm-glassmorphism .gl-side__nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #0f766e; color: #fff; }
.dm-glassmorphism .gl-sico { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid currentColor; }
.dm-glassmorphism .gl-side__nav .is-active { background: rgba(255, 255, 255, .85); color: var(--ink); font-weight: 600; box-shadow: 0 4px 14px rgba(15, 80, 70, .12); }
.dm-glassmorphism .gl-side__nav .is-active .gl-sico { background: #0f766e; border-color: #0f766e; }
.dm-glassmorphism .gl-side__card { margin-top: auto; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.45; }
.dm-glassmorphism .gl-side__card span { display: inline-block; margin-top: 10px; font-weight: 600; color: #0f766e; }

.dm-glassmorphism .gl-pmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dm-glassmorphism .gl-ptop { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 9px 0 9px; border-radius: 20px; }
.dm-glassmorphism .gl-search { flex: 1; max-width: 420px; height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); font-size: 14px; color: var(--muted); }
.dm-glassmorphism .gl-pill--date { margin-left: auto; height: 36px; font-size: 13px; }
.dm-glassmorphism.dm--platform .gl-avatar { width: 40px; height: 40px; background: #0f766e; color: #fff; font-size: 13px; }
.dm-glassmorphism .gl-ptitle { display: flex; align-items: flex-end; gap: 12px; padding: 2px 4px 0; }
.dm-glassmorphism .gl-ptitle > div:first-child { margin-right: auto; }
.dm-glassmorphism .gl-ptitle h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dm-glassmorphism .gl-seg { display: flex; padding: 4px; border-radius: 999px; font-size: 13px; }
.dm-glassmorphism .gl-seg span { padding: 7px 16px; border-radius: 999px; color: var(--muted); }
.dm-glassmorphism .gl-seg .is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(15, 80, 70, .14); }

.dm-glassmorphism .gl-pkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dm-glassmorphism .gl-pkpis .gl-card { padding: 16px 18px; border-radius: 20px; }
.dm-glassmorphism .gl-pkpis b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; }
.dm-glassmorphism .gl-pkpis small { font-size: 13px; font-weight: 400; color: var(--muted); }
.dm-glassmorphism .gl-delta { font-size: 12px; font-weight: 500; color: #0f766e; }
.dm-glassmorphism .gl-delta--warn { color: #9a5b00; }

.dm-glassmorphism .gl-prow { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.dm-glassmorphism .gl-chart { padding: 18px 20px 14px; }
.dm-glassmorphism .gl-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.dm-glassmorphism .gl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-glassmorphism .gl-legend i { width: 10px; height: 10px; border-radius: 3px; background: #0f766e; }
.dm-glassmorphism .gl-legend i.is-prev { background: rgba(15, 118, 110, .25); }
.dm-glassmorphism .gl-chart__plot { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; height: 170px; margin-top: 14px; padding-bottom: 22px; background: repeating-linear-gradient(to top, rgba(15, 42, 42, .1) 0 1px, transparent 1px 37px) 0 0 / 100% calc(100% - 22px) no-repeat; }
.dm-glassmorphism .gl-col { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; }
.dm-glassmorphism .gl-col i { width: 18px; border-radius: 6px 6px 2px 2px; background: #0f766e; }
.dm-glassmorphism .gl-col i.is-prev { background: rgba(15, 118, 110, .25); }
.dm-glassmorphism .gl-col span { position: absolute; bottom: -22px; font-size: 12px; color: var(--muted); }
.dm-glassmorphism .gl-floors ul { margin-top: 10px; }
.dm-glassmorphism .gl-floors li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .8); font-size: 14px; }
.dm-glassmorphism .gl-floors li:first-child { border-top: 0; }
.dm-glassmorphism .gl-floors b { font-weight: 600; }
.dm-glassmorphism .gl-floors i { grid-column: span 2; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #0f766e var(--v), rgba(15, 42, 42, .12) var(--v)); }
.dm-glassmorphism .gl-floors i.is-warm { background: linear-gradient(90deg, #b45309 var(--v), rgba(15, 42, 42, .12) var(--v)); }

.dm-glassmorphism .gl-ptable { padding: 6px 20px; border-radius: 20px; }
.dm-glassmorphism .gl-ptable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-glassmorphism .gl-ptable th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 0; border-bottom: 1px solid rgba(15, 42, 42, .12); }
.dm-glassmorphism .gl-ptable td { padding: 10px 0; border-bottom: 1px solid rgba(15, 42, 42, .08); }
.dm-glassmorphism .gl-ptable tr:last-child td { border-bottom: 0; }
.dm-glassmorphism .gl-ptable .r { text-align: right; }
.dm-glassmorphism .gl-st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.dm-glassmorphism .gl-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0f766e; }
.dm-glassmorphism .gl-st--warn { color: #9a5b00; }
.dm-glassmorphism .gl-st--warn::before { background: #d97706; }
.dm-glassmorphism .gl-st--off { color: var(--muted); }
.dm-glassmorphism .gl-st--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* Сайт: вертикальный ритм, чтобы полоса преимуществ помещалась в холст */
.dm-glassmorphism .gl-hero { margin-top: 30px; }
.dm-glassmorphism .gl-hero h1 { font-size: 54px; margin: 20px 0 18px; }
.dm-glassmorphism .gl-lead { margin-bottom: 26px; }
.dm-glassmorphism .gl-proof { margin-top: 24px; }
.dm-glassmorphism .gl-stage { height: 440px; }
.dm-glassmorphism .gl-energy { top: 300px; }
.dm-glassmorphism .gl-strip { margin-top: 16px; padding: 18px 28px; }
.dm-glassmorphism .gl-strip h2 { margin-top: 8px; }

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

.dm-neumorphism {
  --bg: #e4e9f0;
  --hi: #ffffff;
  --lo: #a3b1c6;
  --ink: #2b3445;
  --muted: #5b6577;
  --accent: #2f5bc4;
  --out: -8px -8px 16px var(--hi), 8px 8px 16px var(--lo);
  --out-sm: -4px -4px 9px var(--hi), 4px 4px 9px var(--lo);
  --out-lg: -14px -14px 28px var(--hi), 14px 14px 28px var(--lo);
  --in: inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi);
  --in-sm: inset 3px 3px 6px var(--lo), inset -3px -3px 6px var(--hi);
  background: var(--bg);
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", system-ui, sans-serif;
}

/* Общие элементы */
.dm-neumorphism .nu-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.dm-neumorphism .nu-logo i { width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--out-sm); background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.dm-neumorphism .nu-logo em { font-style: normal; font-weight: 500; font-size: 14px; color: var(--muted); margin-left: -4px; }
.dm-neumorphism .nu-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dm-neumorphism .nu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px; border-radius: 18px;
  background: var(--bg); box-shadow: var(--out); font-weight: 700; font-size: 15px; color: var(--ink);
}
.dm-neumorphism .nu-btn--accent { background: var(--accent); color: #fff; box-shadow: -6px -6px 14px var(--hi), 6px 6px 14px rgba(47, 91, 196, .45); }
.dm-neumorphism .nu-btn--sm { height: 46px; padding: 0 22px; border-radius: 15px; font-size: 14px; }
.dm-neumorphism .nu-round {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--bg); box-shadow: var(--out); color: var(--ink);
}
.dm-neumorphism .nu-round--sm { width: 46px; height: 46px; box-shadow: var(--out-sm); }
.dm-neumorphism .nu-round--big { width: 84px; height: 84px; }
.dm-neumorphism .nu-round.is-pressed { box-shadow: var(--in); color: var(--accent); }
.dm-neumorphism .nu-round--accent { color: var(--accent); }
.dm-neumorphism .nu-iconbtn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 23px; box-shadow: var(--out-sm); font-size: 14px; font-weight: 500; }

.dm-neumorphism .nu-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; box-shadow: var(--in); font-size: 14px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-seg span { padding: 9px 16px; border-radius: 12px; }
.dm-neumorphism .nu-seg .is-on { background: var(--bg); box-shadow: var(--out-sm); color: var(--accent); font-weight: 700; }
.dm-neumorphism .nu-seg--sm { font-size: 13px; padding: 4px; }
.dm-neumorphism .nu-seg--sm span { padding: 6px 12px; }

.dm-neumorphism .nu-switch { position: relative; display: inline-block; width: 50px; height: 28px; border-radius: 14px; box-shadow: var(--in-sm); vertical-align: middle; }
.dm-neumorphism .nu-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: -2px -2px 4px var(--hi), 2px 2px 5px var(--lo); }
.dm-neumorphism .nu-switch.is-on { background: var(--accent); box-shadow: inset 2px 2px 5px rgba(20, 40, 100, .45); }
.dm-neumorphism .nu-switch.is-on::after { left: 26px; background: #fff; box-shadow: 1px 1px 3px rgba(20, 40, 100, .4); }
.dm-neumorphism .nu-switch.is-disabled { box-shadow: none; border: 1px dashed var(--lo); }
.dm-neumorphism .nu-switch.is-disabled::after { box-shadow: none; background: #cfd7e2; }

.dm-neumorphism .nu-meter { display: block; height: 10px; border-radius: 5px; box-shadow: var(--in-sm); padding: 2px; }
.dm-neumorphism .nu-meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

/* Иконки из CSS */
.dm-neumorphism .nu-ico { position: relative; display: block; width: 20px; height: 20px; color: inherit; }
.dm-neumorphism .nu-ico--pause::before, .dm-neumorphism .nu-ico--pause::after { content: ""; position: absolute; top: 2px; width: 6px; height: 16px; border-radius: 2px; background: currentColor; }
.dm-neumorphism .nu-ico--pause::before { left: 3px; }
.dm-neumorphism .nu-ico--pause::after { right: 3px; }
.dm-neumorphism .nu-ico--play::before { content: ""; position: absolute; left: 5px; top: 2px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }
.dm-neumorphism .nu-ico--next::before, .dm-neumorphism .nu-ico--prev::before { content: ""; position: absolute; top: 3px; border-style: solid; border-color: transparent; }
.dm-neumorphism .nu-ico--next::before { left: 3px; border-width: 7px 0 7px 11px; border-left-color: currentColor; }
.dm-neumorphism .nu-ico--prev::before { right: 3px; border-width: 7px 11px 7px 0; border-right-color: currentColor; }
.dm-neumorphism .nu-ico--next::after, .dm-neumorphism .nu-ico--prev::after { content: ""; position: absolute; top: 3px; width: 3px; height: 14px; border-radius: 1px; background: currentColor; }
.dm-neumorphism .nu-ico--next::after { right: 3px; }
.dm-neumorphism .nu-ico--prev::after { left: 3px; }
.dm-neumorphism .nu-ico--back::before { content: ""; position: absolute; left: 6px; top: 5px; width: 9px; height: 9px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.dm-neumorphism .nu-ico--dots { background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / 7px 7px repeat-x; }
.dm-neumorphism .nu-ico--heart::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; background: currentColor; transform: rotate(45deg); border-radius: 6px 0 2px 0; box-shadow: -5px 0 0 0 currentColor, 0 -5px 0 0 currentColor; clip-path: none; }
.dm-neumorphism .nu-ico--heart { transform: scale(.8); }
.dm-neumorphism .nu-ico--shuffle::before, .dm-neumorphism .nu-ico--shuffle::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px; background: currentColor; transform: rotate(30deg); }
.dm-neumorphism .nu-ico--shuffle::after { transform: rotate(-30deg); }
.dm-neumorphism .nu-ico--repeat::before { content: ""; position: absolute; inset: 3px; border: 2px solid currentColor; border-radius: 6px; border-right-color: transparent; }
.dm-neumorphism .nu-ico--grid { background: linear-gradient(currentColor, currentColor) 2px 2px / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) 11px 2px / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) 2px 11px / 7px 7px no-repeat, linear-gradient(currentColor, currentColor) 11px 11px / 7px 7px no-repeat; border-radius: 2px; }
.dm-neumorphism .nu-ico--list { background: linear-gradient(currentColor, currentColor) 2px 4px / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) 2px 9px / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) 2px 14px / 10px 2px no-repeat; }
.dm-neumorphism .nu-ico--gear::before { content: ""; position: absolute; inset: 3px; border: 2.5px dotted currentColor; border-radius: 50%; }
.dm-neumorphism .nu-ico--gear::after { content: ""; position: absolute; inset: 7px; border: 2px solid currentColor; border-radius: 50%; }
.dm-neumorphism .nu-ico--speaker::before { content: ""; position: absolute; left: 4px; top: 1px; width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 4px; }
.dm-neumorphism .nu-ico--speaker::after { content: ""; position: absolute; left: 8px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.dm-neumorphism .nu-ico--clock::before { content: ""; position: absolute; inset: 2px; border: 2px solid currentColor; border-radius: 50%; }
.dm-neumorphism .nu-ico--clock::after { content: ""; position: absolute; left: 9px; top: 6px; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.dm-neumorphism .nu-ico--bell::before { content: ""; position: absolute; left: 4px; top: 2px; width: 12px; height: 13px; border: 2px solid currentColor; border-radius: 6px 6px 2px 2px; }
.dm-neumorphism .nu-ico--bell::after { content: ""; position: absolute; left: 8px; bottom: 1px; width: 4px; height: 3px; border-radius: 0 0 2px 2px; background: currentColor; }
.dm-neumorphism .nu-ico--bag::before { content: ""; position: absolute; left: 3px; top: 6px; width: 14px; height: 12px; border: 2px solid currentColor; border-radius: 3px; }
.dm-neumorphism .nu-ico--bag::after { content: ""; position: absolute; left: 7px; top: 1px; width: 6px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }

/* ----- Сайт ----- */
.dm-neumorphism.dm--site { padding: 28px 48px; }
.dm-neumorphism .nu-nav { display: flex; align-items: center; gap: 28px; height: 64px; }
.dm-neumorphism .nu-links { display: flex; gap: 6px; margin: 0 auto; padding: 6px; border-radius: 22px; box-shadow: var(--out-sm); font-size: 15px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-links li { padding: 10px 18px; border-radius: 16px; }
.dm-neumorphism .nu-links .is-active { box-shadow: var(--in-sm); color: var(--accent); font-weight: 700; }

.dm-neumorphism .nu-hero { display: grid; grid-template-columns: 350px 1fr 260px; gap: 40px; align-items: center; margin-top: 36px; }
.dm-neumorphism .nu-kicker { display: inline-block; padding: 8px 14px; border-radius: 12px; box-shadow: var(--in-sm); font-size: 13px; font-weight: 700; color: var(--accent); }
.dm-neumorphism .nu-hero h1 { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 20px 0 18px; }
.dm-neumorphism .nu-lead { font-size: 17px; line-height: 1.55; color: var(--muted); margin-bottom: 30px; }
.dm-neumorphism .nu-actions { display: flex; gap: 20px; }
.dm-neumorphism .nu-colors { display: flex; gap: 18px; margin-top: 30px; font-size: 13px; color: var(--muted); }
.dm-neumorphism .nu-colors li { display: flex; align-items: center; gap: 8px; }
.dm-neumorphism .nu-colors i { width: 22px; height: 22px; border-radius: 50%; box-shadow: var(--out-sm); }
.dm-neumorphism .nu-colors .is-on { color: var(--ink); font-weight: 700; }
.dm-neumorphism .nu-colors .is-on i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

.dm-neumorphism .nu-device { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.dm-neumorphism .nu-dial { position: relative; width: 330px; height: 330px; border-radius: 50%; box-shadow: var(--out-lg); display: grid; place-items: center; }
.dm-neumorphism .nu-dial__track { position: absolute; inset: 34px; border-radius: 50%; box-shadow: var(--in); background: conic-gradient(from 220deg, var(--accent) 0 118deg, transparent 118deg 280deg, transparent 280deg); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 16px), #000 calc(50% - 15px)); mask: radial-gradient(circle, transparent 0 calc(50% - 16px), #000 calc(50% - 15px)); }
.dm-neumorphism .nu-dial::before { content: ""; position: absolute; inset: 34px; border-radius: 50%; box-shadow: var(--in); }
.dm-neumorphism .nu-dial__knob { position: relative; width: 196px; height: 196px; border-radius: 50%; background: linear-gradient(145deg, #eef2f7, #d6dde7); box-shadow: var(--out); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dm-neumorphism .nu-dial__knob b { font-size: 56px; font-weight: 800; line-height: 1; }
.dm-neumorphism .nu-dial__knob span { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 6px; }
.dm-neumorphism .nu-dial__knob::before { content: ""; position: absolute; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dm-neumorphism .nu-transport { display: flex; align-items: center; gap: 28px; }

.dm-neumorphism .nu-specs { display: grid; gap: 22px; }
.dm-neumorphism .nu-spec { padding: 18px 22px; border-radius: 22px; box-shadow: var(--out); }
.dm-neumorphism .nu-spec p { font-size: 13px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-spec b { display: block; font-size: 28px; font-weight: 800; margin: 2px 0 10px; }

.dm-neumorphism .nu-strip { display: grid; grid-template-columns: auto auto 1fr; gap: 48px; align-items: center; margin-top: 40px; padding: 22px 32px; border-radius: 28px; box-shadow: var(--out); }
.dm-neumorphism .nu-strip__group { display: grid; gap: 10px; }
.dm-neumorphism .nu-switches { display: flex; gap: 28px; }
.dm-neumorphism .nu-switch-row { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; height: 48px; }
.dm-neumorphism .nu-strip__note { justify-self: end; text-align: right; font-size: 13px; color: var(--muted); }
.dm-neumorphism .nu-strip__note b { display: block; font-size: 17px; color: var(--ink); font-weight: 700; }

/* ----- Приложение ----- */
.dm-neumorphism.dm--app { display: flex; flex-direction: column; padding: 0 26px 22px; }
.dm-neumorphism .nu-sbar { display: flex; justify-content: space-between; padding: 14px 6px 0; font-size: 14px; font-weight: 700; }
.dm-neumorphism .nu-sbar__icons { display: flex; gap: 4px; align-items: center; }
.dm-neumorphism .nu-sbar__icons i { width: 15px; height: 10px; border-radius: 2px; background: var(--ink); }
.dm-neumorphism .nu-apptop { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; text-align: center; }
.dm-neumorphism .nu-apptop__src { font-size: 14px; font-weight: 500; margin-top: 2px; }
.dm-neumorphism .nu-disc { align-self: center; width: 236px; height: 236px; margin-top: 30px; border-radius: 50%; box-shadow: var(--out-lg); display: grid; place-items: center; }
.dm-neumorphism .nu-disc__groove { width: 192px; height: 192px; border-radius: 50%; box-shadow: var(--in); display: grid; place-items: center; background: repeating-radial-gradient(circle, transparent 0 7px, rgba(163, 177, 198, .28) 7px 8px); }
.dm-neumorphism .nu-disc__center { width: 74px; height: 74px; border-radius: 50%; box-shadow: var(--out-sm); background: radial-gradient(circle, var(--bg) 0 6px, var(--accent) 7px 22px, var(--bg) 23px); }
.dm-neumorphism .nu-track { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.dm-neumorphism .nu-track h1 { font-size: 24px; font-weight: 800; line-height: 1.2; }
.dm-neumorphism .nu-track p { font-size: 15px; color: var(--muted); }
.dm-neumorphism .nu-progress { margin-top: 22px; }
.dm-neumorphism .nu-slider { position: relative; height: 12px; border-radius: 6px; box-shadow: var(--in-sm); padding: 3px; }
.dm-neumorphism .nu-slider i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.dm-neumorphism .nu-slider b { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--bg); box-shadow: var(--out-sm); }
.dm-neumorphism .nu-slider b::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--accent); }
.dm-neumorphism .nu-times { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.dm-neumorphism .nu-tabbar { display: flex; justify-content: space-between; margin-top: auto; padding: 8px; border-radius: 26px; box-shadow: var(--out); font-size: 11px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; padding: 9px 0 7px; border-radius: 18px; }
.dm-neumorphism .nu-tabbar .is-active { box-shadow: var(--in-sm); color: var(--accent); font-weight: 700; }

/* ----- Веб-платформа ----- */
.dm-neumorphism.dm--platform { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 28px; }
.dm-neumorphism .nu-side { display: flex; flex-direction: column; padding: 26px 18px 18px; border-radius: 28px; box-shadow: var(--out); }
.dm-neumorphism .nu-side .nu-logo { padding-left: 6px; }
.dm-neumorphism .nu-side__nav { display: grid; gap: 10px; margin-top: 36px; font-size: 15px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-side__nav li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; }
.dm-neumorphism .nu-side__nav .is-active { box-shadow: var(--in-sm); color: var(--accent); font-weight: 700; }
.dm-neumorphism .nu-side__nav .is-active::after { content: ""; position: absolute; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dm-neumorphism .nu-side__status { margin-top: auto; display: flex; gap: 12px; padding: 16px; border-radius: 18px; box-shadow: var(--in-sm); }
.dm-neumorphism .nu-side__status i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #2f8a4f; }
.dm-neumorphism .nu-side__status b { display: block; font-size: 14px; }
.dm-neumorphism .nu-side__status span { font-size: 12px; color: var(--muted); }

.dm-neumorphism .nu-pmain { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.dm-neumorphism .nu-phead { display: flex; align-items: center; gap: 20px; }
.dm-neumorphism .nu-phead > div:first-child { margin-right: auto; }
.dm-neumorphism .nu-phead h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dm-neumorphism .nu-field { display: flex; align-items: center; width: 320px; height: 48px; padding: 0 18px; border-radius: 16px; box-shadow: var(--in-sm); border: 1px solid #b9c4d4; font-size: 14px; color: var(--muted); }

.dm-neumorphism .nu-card { border-radius: 26px; box-shadow: var(--out); padding: 22px 26px; }
.dm-neumorphism .nu-card__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dm-neumorphism .nu-card h2 { font-size: 17px; font-weight: 700; }
.dm-neumorphism .nu-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dm-neumorphism .nu-kpi { display: flex; align-items: center; gap: 20px; padding: 20px 24px; }
.dm-neumorphism .nu-kpi p { font-size: 13px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-kpi > div > b { display: block; font-size: 24px; font-weight: 800; line-height: 1.3; }
.dm-neumorphism .nu-kpi span { font-size: 12px; color: var(--muted); }
.dm-neumorphism .nu-ring { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; box-shadow: var(--in-sm); background: conic-gradient(var(--accent) 0 var(--v), transparent var(--v)); display: grid; place-items: center; }
.dm-neumorphism .nu-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg); box-shadow: var(--out-sm); }
.dm-neumorphism .nu-ring b { position: relative; font-size: 18px; font-weight: 800; }
.dm-neumorphism .nu-ring--time { background: conic-gradient(#7a5af0 0 var(--v), transparent var(--v)); }

.dm-neumorphism .nu-prow { display: grid; grid-template-columns: 360px 1fr; gap: 28px; flex: 1; min-height: 0; }
.dm-neumorphism .nu-eq__bands { display: flex; justify-content: space-between; margin-top: 26px; padding: 0 6px; }
.dm-neumorphism .nu-eq__bands > div { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dm-neumorphism .nu-eq__bands p { font-size: 12px; font-weight: 500; color: var(--muted); }
.dm-neumorphism .nu-vslider { position: relative; display: block; width: 14px; height: 250px; border-radius: 7px; box-shadow: var(--in-sm); }
.dm-neumorphism .nu-vslider i { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 5px; background: var(--accent); }
.dm-neumorphism .nu-vslider b { position: absolute; left: 50%; width: 30px; height: 30px; margin: 0 0 -15px -15px; border-radius: 50%; background: var(--bg); box-shadow: var(--out-sm); }
.dm-neumorphism .nu-vslider b::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--accent); }

.dm-neumorphism .nu-list table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.dm-neumorphism .nu-list th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 0; border-bottom: 1px solid #c7d0dc; }
.dm-neumorphism .nu-list td { padding: 11px 0; border-bottom: 1px solid #d3dae4; }
.dm-neumorphism .nu-list tr:last-child td { border-bottom: 0; }
.dm-neumorphism .nu-list td:first-child { font-weight: 700; }
.dm-neumorphism .nu-list .r { text-align: right; }
.dm-neumorphism .nu-st { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dm-neumorphism .nu-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.dm-neumorphism .nu-st--on { color: #23703f; font-weight: 500; }
.dm-neumorphism .nu-st--on::before { background: #2f8a4f; box-shadow: none; }
.dm-neumorphism .nu-st--err { color: #b3262d; font-weight: 500; }
.dm-neumorphism .nu-st--err::before { background: #c0262d; box-shadow: none; border-radius: 2px; }

/* Доработки раскладки */
.dm-neumorphism .nu-ico--heart { transform: none; }
.dm-neumorphism .nu-ico--heart::before, .dm-neumorphism .nu-ico--heart::after { content: ""; position: absolute; top: 3px; width: 10px; height: 15px; border-radius: 5px 5px 0 0; background: currentColor; box-shadow: none; }
.dm-neumorphism .nu-ico--heart::before { left: 5px; transform: rotate(-45deg); transform-origin: 0 100%; }
.dm-neumorphism .nu-ico--heart::after { left: -5px; transform: rotate(45deg); transform-origin: 100% 100%; }
.dm-neumorphism .nu-volume { display: grid; grid-template-columns: 20px 1fr 40px; gap: 16px; align-items: center; margin-top: 30px; padding: 16px 18px; border-radius: 20px; box-shadow: var(--out-sm); color: var(--muted); font-size: 13px; font-weight: 700; text-align: right; }
.dm-neumorphism .nu-volume .nu-slider { height: 10px; }
.dm-neumorphism .nu-volume .nu-slider b { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.dm-neumorphism .nu-volume .nu-slider b::after { inset: 7px; }
.dm-neumorphism .nu-card__head h2 { line-height: 1.3; }
.dm-neumorphism .nu-vslider { height: 300px; }
.dm-neumorphism .nu-list td { padding: 10px 0; }

/* flat.css */
/* Демонстрация: Плоский дизайн. Все селекторы ограничены .dm-flat.
   Правило стиля: ни одной тени, ни одного градиента — только однотонные плоскости. */

.dm-flat {
  --ft-bg: #ffffff;
  --ft-bg2: #ecf0f3;
  --ft-ink: #22313f;
  --ft-muted: #56636f;
  --ft-blue: #1e6fd9;
  --ft-blue-d: #185bb3;
  --ft-yellow: #ffc83d;
  --ft-red: #d63a2f;
  --ft-green: #11804d;
  background: var(--ft-bg);
  color: var(--ft-ink);
  font-family: "Rubik", system-ui, sans-serif;
}

/* ----- Общие элементы ----- */
.dm-flat .ft-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dm-flat .ft-logo--light { color: #fff; font-size: 20px; }
.dm-flat .ft-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 6px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.dm-flat .ft-btn--lg { height: 56px; padding: 0 30px; font-size: 17px; }
.dm-flat .ft-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.dm-flat .ft-btn--block { display: flex; width: 100%; height: 56px; font-size: 17px; }
.dm-flat .ft-btn--yellow { background: var(--ft-yellow); color: var(--ft-ink); }
.dm-flat .ft-btn--red { background: var(--ft-red); color: #fff; }
.dm-flat .ft-btn--green { background: var(--ft-green); color: #fff; }
.dm-flat .ft-btn--outline { border: 3px solid #fff; color: #fff; }
.dm-flat .ft-btn--line { border: 2px solid var(--ft-ink); color: var(--ft-ink); }
.dm-flat .ft-actions { display: flex; align-items: center; gap: 12px; }

/* ----- Сайт ----- */
.dm-flat.dm--site { display: flex; flex-direction: column; }
.dm-flat .ft-nav { display: flex; align-items: center; gap: 40px; height: 76px; padding: 0 48px; flex: none; }
.dm-flat .ft-links { display: flex; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 500; }
.dm-flat .ft-links li { padding: 8px 14px; border-radius: 6px; }
.dm-flat .ft-links .is-active { background: var(--ft-bg2); color: var(--ft-blue-d); font-weight: 600; }

.dm-flat .ft-hero { display: grid; grid-template-columns: 640px 1fr; height: 448px; flex: none; }
.dm-flat .ft-hero__text { background: var(--ft-blue); color: #fff; padding: 52px 56px 0 48px; }
.dm-flat .ft-chip { display: inline-block; padding: 6px 14px; border-radius: 6px; background: var(--ft-yellow); color: var(--ft-ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dm-flat .ft-hero h1 { font-size: 58px; line-height: 1.04; font-weight: 800; letter-spacing: -.025em; margin: 22px 0 18px; }
.dm-flat .ft-lead { font-size: 18px; line-height: 1.5; max-width: 500px; margin-bottom: 32px; }
.dm-flat .ft-hero__art { background: var(--ft-yellow); overflow: hidden; }
.dm-flat .ft-hero__art svg { width: 100%; height: 100%; }

.dm-flat .ft-stats { display: grid; grid-template-columns: repeat(4, 1fr); height: 164px; flex: none; }
.dm-flat .ft-stat { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-content: center; padding: 0 32px; }
.dm-flat .ft-stat svg { grid-row: span 2; align-self: center; }
.dm-flat .ft-stat b { font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.dm-flat .ft-stat span { font-size: 14px; line-height: 1.35; font-weight: 500; }
.dm-flat .ft-stat--red { background: var(--ft-red); color: #fff; }
.dm-flat .ft-stat--green { background: var(--ft-green); color: #fff; }
.dm-flat .ft-stat--navy { background: var(--ft-ink); color: #fff; }
.dm-flat .ft-stat--yellow { background: var(--ft-bg2); color: var(--ft-ink); }

.dm-flat .ft-how { flex: 1; display: flex; align-items: center; gap: 48px; padding: 0 48px; }
.dm-flat .ft-how h2 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dm-flat .ft-steps { display: flex; gap: 28px; flex: 1; }
.dm-flat .ft-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.3; }
.dm-flat .ft-n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-style: normal; font-size: 20px; font-weight: 800; color: #fff; }
.dm-flat .ft-n--blue { background: var(--ft-blue); }
.dm-flat .ft-n--red { background: var(--ft-red); }
.dm-flat .ft-n--green { background: var(--ft-green); }

/* ----- Приложение ----- */
.dm-flat.dm--app { display: flex; flex-direction: column; }
.dm-flat .ft-top { background: var(--ft-blue); color: #fff; padding: 0 20px 18px; flex: none; }
.dm-flat .ft-status { display: flex; justify-content: space-between; padding: 14px 8px 0; font-size: 14px; font-weight: 600; }
.dm-flat .ft-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-flat .ft-status__icons i { width: 16px; height: 10px; border-radius: 2px; background: #fff; }
.dm-flat .ft-apphead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 14px; }
.dm-flat .ft-apphead__sub { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dm-flat .ft-apphead h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dm-flat .ft-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ft-yellow); color: var(--ft-ink); font-weight: 700; font-size: 15px; }
.dm-flat .ft-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 6px; background: #fff; color: var(--ft-muted); font-size: 15px; }
.dm-flat .ft-chips { display: flex; gap: 8px; padding: 14px 16px; overflow: hidden; flex: none; }
.dm-flat .ft-chipf { flex: none; padding: 9px 14px; border-radius: 6px; background: var(--ft-bg2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.dm-flat .ft-chipf.is-on { background: var(--ft-ink); color: #fff; }
.dm-flat .ft-chipf--y { background: var(--ft-yellow); }
.dm-flat .ft-map { flex: 1; min-height: 0; overflow: hidden; }
.dm-flat .ft-map svg { width: 100%; height: 100%; }
.dm-flat .ft-sheet { background: #fff; padding: 18px 20px 16px; flex: none; }
.dm-flat .ft-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; }
.dm-flat .ft-sheet__sub { font-size: 13px; color: var(--ft-muted); font-weight: 500; }
.dm-flat .ft-sheet h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.dm-flat .ft-badge { padding: 5px 10px; border-radius: 6px; background: var(--ft-green); color: #fff; font-size: 13px; font-weight: 600; }
.dm-flat .ft-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.dm-flat .ft-mini__t { padding: 10px 12px; border-radius: 6px; }
.dm-flat .ft-mini__t b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.dm-flat .ft-mini__t span { font-size: 13px; font-weight: 500; }
.dm-flat .ft-mini__t--blue { background: var(--ft-blue); color: #fff; }
.dm-flat .ft-mini__t--yellow { background: var(--ft-yellow); color: var(--ft-ink); }
.dm-flat .ft-mini__t--gray { background: var(--ft-bg2); color: var(--ft-ink); }
.dm-flat .ft-tabbar { display: flex; justify-content: space-around; padding: 8px 8px 22px; background: var(--ft-ink); color: #b8c3cd; flex: none; }
.dm-flat .ft-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.dm-flat .ft-tabbar .is-active { background: var(--ft-yellow); color: var(--ft-ink); font-weight: 700; }

/* ----- Веб-платформа ----- */
.dm-flat.dm--platform { display: grid; grid-template-columns: 240px 1fr; background: var(--ft-bg2); }
.dm-flat .ft-side { display: flex; flex-direction: column; background: var(--ft-ink); color: #dfe5ea; padding: 28px 16px 20px; }
.dm-flat .ft-side .ft-logo { padding: 0 8px; }
.dm-flat .ft-sidenav { display: grid; gap: 4px; margin-top: 36px; font-size: 15px; font-weight: 500; }
.dm-flat .ft-sidenav li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 6px; }
.dm-flat .ft-sidenav .is-active { background: var(--ft-blue); color: #fff; font-weight: 600; }
.dm-flat .ft-ic { flex: none; width: 18px; height: 18px; background: var(--ft-yellow); }
.dm-flat .ft-ic--sq { border-radius: 3px; }
.dm-flat .ft-ic--ci { border-radius: 50%; }
.dm-flat .ft-ic--tr { background: none; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--ft-yellow); }
.dm-flat .ft-ic--g { background: #4fc386; }
.dm-flat .ft-ic--r { background: #ff8a80; }
.dm-flat .ft-ic--w { border-bottom-color: #fff; }
.dm-flat .is-active .ft-ic { background: #fff; }
.dm-flat .ft-promo { margin-top: auto; display: grid; gap: 6px; justify-items: start; padding: 18px; border-radius: 8px; background: var(--ft-red); color: #fff; }
.dm-flat .ft-promo b { font-size: 16px; font-weight: 700; line-height: 1.25; }
.dm-flat .ft-promo span { font-size: 13px; }
.dm-flat .ft-promo .ft-btn { margin-top: 8px; }

.dm-flat .ft-work { display: flex; flex-direction: column; padding: 28px 36px; min-width: 0; }
.dm-flat .ft-work__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-flat .ft-overline { font-size: 13px; font-weight: 600; color: var(--ft-muted); text-transform: uppercase; letter-spacing: .05em; }
.dm-flat .ft-work__head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dm-flat .ft-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.dm-flat .ft-kpi { display: grid; gap: 2px; padding: 18px 22px; border-radius: 8px; color: #fff; }
.dm-flat .ft-kpi span { font-size: 14px; font-weight: 600; }
.dm-flat .ft-kpi b { font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dm-flat .ft-kpi small { font-size: 13px; }
.dm-flat .ft-kpi--blue { background: var(--ft-blue); }
.dm-flat .ft-kpi--yellow { background: var(--ft-yellow); color: var(--ft-ink); }
.dm-flat .ft-kpi--red { background: var(--ft-red); }
.dm-flat .ft-kpi--green { background: var(--ft-green); }

.dm-flat .ft-panels { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.dm-flat .ft-panel { display: flex; flex-direction: column; padding: 22px 24px; border-radius: 8px; background: #fff; min-height: 0; }
.dm-flat .ft-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dm-flat .ft-panel h2 { font-size: 19px; font-weight: 700; }
.dm-flat .ft-seg { display: flex; gap: 4px; padding: 4px; border-radius: 6px; background: var(--ft-bg2); font-size: 13px; font-weight: 600; }
.dm-flat .ft-seg i { font-style: normal; padding: 5px 10px; border-radius: 4px; }
.dm-flat .ft-seg .is-on { background: var(--ft-ink); color: #fff; }
.dm-flat .ft-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding-bottom: 0; border-bottom: 3px solid var(--ft-ink); }
.dm-flat .ft-bars i { flex: 1; background: var(--ft-blue); border-radius: 4px 4px 0 0; }
.dm-flat .ft-bars .is-peak { background: var(--ft-yellow); }
.dm-flat .ft-axis { display: flex; justify-content: space-between; padding: 8px 2px 0; font-size: 12px; font-weight: 500; color: var(--ft-muted); }
.dm-flat .ft-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; }
.dm-flat .ft-note i { width: 14px; height: 14px; border-radius: 3px; background: var(--ft-yellow); }
.dm-flat .ft-count { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--ft-red); color: #fff; font-size: 14px; font-weight: 700; }
.dm-flat .ft-list { display: grid; gap: 6px; }
.dm-flat .ft-list li { display: grid; grid-template-columns: 1fr 110px 74px; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 6px; font-size: 15px; font-weight: 500; }
.dm-flat .ft-list li:nth-child(odd) { background: var(--ft-bg2); }
.dm-flat .ft-fill { height: 10px; border-radius: 5px; background: #d5dbe1; overflow: hidden; }
.dm-flat .ft-fill i { display: block; height: 100%; }
.dm-flat .ft-fill .r { background: var(--ft-red); }
.dm-flat .ft-fill .y { background: #e0a400; }
.dm-flat .ft-fill .b { background: var(--ft-blue); }
.dm-flat .ft-tag { justify-self: end; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.dm-flat .ft-tag--red { background: var(--ft-red); color: #fff; }
.dm-flat .ft-tag--yellow { background: var(--ft-yellow); color: var(--ft-ink); }
.dm-flat .ft-tag--blue { background: var(--ft-blue); color: #fff; }
.dm-flat .ft-crew { margin-top: auto; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 6px; background: var(--ft-yellow); }
.dm-flat .ft-crew b { font-size: 15px; font-weight: 700; }
.dm-flat .ft-crew span:not(.ft-btn) { grid-column: 1; font-size: 13px; }
.dm-flat .ft-crew .ft-btn { grid-column: 2; grid-row: 1 / span 2; }
.dm-flat .ft-btn--dark { background: var(--ft-ink); color: #fff; }

/* skeuomorphism.css */
/* Демонстрация: Скевоморфизм. Все селекторы ограничены .dm-skeuomorphism.
   Материалы: орех, кожа, латунь, шлифованный алюминий, бумага. Свет — сверху. */

.dm-skeuomorphism {
  --sk-ink: #2b2118;
  --sk-paper: #f3e9d2;
  --sk-cream: #f3e9d2;
  --sk-red: #b33a2b;
  --sk-amber: #f2a33a;
  --sk-wood:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(88deg, rgba(255, 220, 170, .05) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, .08) 0 6px, transparent 6px 61px),
    linear-gradient(180deg, #5c3b22 0%, #4a2f1b 55%, #3c2414 100%);
  --sk-brass: linear-gradient(180deg, #f6e19a 0%, #dcb860 42%, #bd9338 58%, #a07a2b 100%);
  --sk-alu:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(180deg, #eef0f2 0%, #d5d9dd 50%, #c2c7cc 100%);
  --sk-leather:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 5px 5px,
    radial-gradient(rgba(0, 0, 0, .18) 1px, transparent 1.6px) 2px 3px / 6px 6px,
    linear-gradient(180deg, #4d3529 0%, #3b2a20 60%, #2f2119 100%);
  background: var(--sk-wood);
  color: var(--sk-ink);
  font-family: "PT Sans", system-ui, sans-serif;
}

/* ----- Общие предметы ----- */
.dm-skeuomorphism .sk-screw {
  position: relative; display: inline-block; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #b9bfc5 45%, #6b7178 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 1px rgba(0, 0, 0, .3);
}
.dm-skeuomorphism .sk-screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 2px; background: rgba(40, 40, 40, .7); transform: rotate(35deg); }

.dm-skeuomorphism .sk-plate {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 6px;
  background: var(--sk-brass);
  font-family: "PT Serif", Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: .22em;
  color: #4a3510; text-shadow: 0 1px 0 rgba(255, 244, 205, .7);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(90, 60, 10, .4);
}
.dm-skeuomorphism .sk-plate--sm { font-size: 14px; padding: 6px 12px; gap: 10px; letter-spacing: .16em; }

.dm-skeuomorphism .sk-key {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px; border-radius: 10px;
  background: linear-gradient(180deg, #fdf9ef 0%, #ebe1c8 100%);
  color: var(--sk-ink); font-weight: 700; font-size: 16px; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .1), 0 3px 0 #8f7a55, 0 7px 12px rgba(0, 0, 0, .4);
}
.dm-skeuomorphism .sk-key--brass { background: var(--sk-brass); color: #2b1d08; text-shadow: 0 1px 0 rgba(255, 240, 190, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(90, 60, 10, .35), 0 3px 0 #6e521b, 0 7px 12px rgba(0, 0, 0, .45); }
.dm-skeuomorphism .sk-key--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.dm-skeuomorphism .sk-actions { display: flex; gap: 16px; align-items: center; }

.dm-skeuomorphism .sk-lamp {
  display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9a9fa4, #3d4146 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .6);
}
.dm-skeuomorphism .sk-lamp--green { background: radial-gradient(circle at 35% 30%, #d6ffdc, #3fb950 50%, #1d6e2b); box-shadow: 0 0 8px 2px rgba(63, 185, 80, .65), 0 1px 0 rgba(255, 255, 255, .5); }
.dm-skeuomorphism .sk-lamp--red { background: radial-gradient(circle at 35% 30%, #ffd2c8, #e0412f 50%, #8c1d12); box-shadow: 0 0 8px 2px rgba(224, 65, 47, .65), 0 1px 0 rgba(255, 255, 255, .3); }
.dm-skeuomorphism .sk-lamp--amber { background: radial-gradient(circle at 35% 30%, #fff0c8, #f2a33a 50%, #9a5a0c); box-shadow: 0 0 8px 2px rgba(242, 163, 58, .65), 0 1px 0 rgba(255, 255, 255, .5); }

/* Металлическая ручка с насечкой */
.dm-skeuomorphism .sk-knob {
  position: relative; flex: none; width: 124px; height: 124px; border-radius: 50%;
  background: repeating-conic-gradient(#858c93 0 4deg, #e6e9ec 4deg 8deg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .45), 0 2px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.dm-skeuomorphism .sk-knob i {
  position: absolute; inset: 12px; border-radius: 50%;
  background: conic-gradient(from 20deg, #f7f8f9, #9ea5ac 25%, #eef0f2 50%, #8f969d 75%, #f7f8f9);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .8), inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .25);
}
.dm-skeuomorphism .sk-knob::after {
  content: ""; position: absolute; left: 50%; top: 22px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff8a7a, var(--sk-red));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
  transform-origin: 5px 40px; transform: rotate(48deg);
}
.dm-skeuomorphism .sk-knob--s { width: 64px; height: 64px; }
.dm-skeuomorphism .sk-knob--s i { inset: 7px; }
.dm-skeuomorphism .sk-knob--s::after { top: 12px; width: 7px; height: 7px; margin-left: -3.5px; transform-origin: 3.5px 20px; transform: rotate(-40deg); }

/* Тумблер */
.dm-skeuomorphism .sk-toggle {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f8f9fa, #b0b6bc 55%, #6e747b);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4), inset 0 -1px 2px rgba(0, 0, 0, .3);
}
.dm-skeuomorphism .sk-toggle::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #1d2024; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8); }
.dm-skeuomorphism .sk-toggle i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 36px; margin-left: -6px; border-radius: 6px;
  background: linear-gradient(90deg, #858c93 0%, #f6f7f8 45%, #9aa1a8 100%);
  box-shadow: 2px 4px 5px rgba(0, 0, 0, .35);
}
.dm-skeuomorphism .sk-toggle i::after {
  content: ""; position: absolute; left: -3px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #b8bec4 55%, #7a8087);
  box-shadow: 1px 3px 4px rgba(0, 0, 0, .35);
}
.dm-skeuomorphism .sk-toggle.is-up i { top: auto; bottom: 50%; }
.dm-skeuomorphism .sk-toggle.is-up i::after { bottom: auto; top: -6px; }
.dm-skeuomorphism .sk-toggle--h i { width: 36px; height: 12px; margin: -6px 0 0; left: auto; right: 50%; }
.dm-skeuomorphism .sk-toggle--h i::after { left: -6px; top: -3px; bottom: auto; }
.dm-skeuomorphism .sk-toggle--h.is-up i { left: 50%; right: auto; top: 50%; bottom: auto; }
.dm-skeuomorphism .sk-toggle--h.is-up i::after { left: auto; right: -6px; top: -3px; }

/* ----- Сайт ----- */
.dm-skeuomorphism.dm--site { display: flex; flex-direction: column; }
.dm-skeuomorphism .sk-nav {
  position: relative; display: flex; align-items: center; gap: 40px; height: 76px; padding: 0 40px; flex: none;
  background: var(--sk-leather);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.dm-skeuomorphism .sk-nav::before { content: ""; position: absolute; inset: 7px 10px; border: 2px dashed rgba(243, 233, 210, .32); border-radius: 6px; pointer-events: none; }
.dm-skeuomorphism .sk-links { display: flex; gap: 34px; margin-left: auto; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-cream); text-shadow: 0 -1px 0 rgba(0, 0, 0, .7); }
.dm-skeuomorphism .sk-links li { position: relative; padding: 6px 0; }
.dm-skeuomorphism .sk-links .is-active { color: #f0cf74; }
.dm-skeuomorphism .sk-links .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: var(--sk-brass); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

.dm-skeuomorphism .sk-hero { display: grid; grid-template-columns: 500px 1fr; gap: 52px; padding: 40px 48px 0; height: 506px; flex: none; }
.dm-skeuomorphism .sk-paper {
  position: relative; align-self: center; padding: 42px 40px 40px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, #f8f0dc 0%, #efe3c6 100%);
  border-radius: 3px; transform: rotate(-1.2deg);
  box-shadow: 0 2px 0 #d9c9a3, 0 18px 34px rgba(0, 0, 0, .55), inset 0 0 40px rgba(160, 120, 60, .12);
}
.dm-skeuomorphism .sk-tape { position: absolute; top: -14px; width: 92px; height: 30px; background: rgba(255, 250, 225, .6); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.dm-skeuomorphism .sk-tape--l { left: 26px; transform: rotate(-6deg); }
.dm-skeuomorphism .sk-tape--r { right: 26px; transform: rotate(5deg); }
.dm-skeuomorphism .sk-hand { display: inline-block; font-family: "Caveat", cursive; font-weight: 700; font-size: 24px; line-height: 1; color: var(--sk-red); transform: rotate(-2deg); }
.dm-skeuomorphism .sk-paper h1 { font-family: "PT Serif", Georgia, serif; font-weight: 700; font-size: 46px; line-height: 1.08; letter-spacing: -.01em; margin: 14px 0 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.dm-skeuomorphism .sk-paper p { font-size: 17px; line-height: 1.55; color: #3d3127; margin-bottom: 30px; }

.dm-skeuomorphism .sk-deck {
  position: relative; align-self: center; height: 460px; border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(87deg, rgba(255, 230, 190, .06) 0 1px, transparent 1px 31px),
    linear-gradient(180deg, #a26a35 0%, #8b5a2b 50%, #744821 100%);
  box-shadow: 0 26px 44px rgba(0, 0, 0, .6), 0 6px 0 #4f3017, inset 0 2px 0 rgba(255, 220, 170, .35), inset 0 -3px 6px rgba(0, 0, 0, .35);
}
.dm-skeuomorphism .sk-deck__plate { position: absolute; left: 28px; bottom: 16px; padding: 4px 12px; border-radius: 4px; background: var(--sk-brass); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #3a2a0c; text-shadow: 0 1px 0 rgba(255, 244, 205, .7); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.dm-skeuomorphism .sk-platter {
  position: absolute; left: 30px; top: 40px; width: 370px; height: 370px; border-radius: 50%;
  background: conic-gradient(from 30deg, #f4f5f6, #8e959c 20%, #e8eaec 45%, #7f868d 70%, #f4f5f6);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.dm-skeuomorphism .sk-record {
  position: absolute; inset: 10px; border-radius: 50%; display: grid; place-items: center;
  background:
    conic-gradient(from 40deg, transparent 0 8%, rgba(255, 255, 255, .13) 12%, transparent 18% 50%, rgba(255, 255, 255, .1) 62%, transparent 68%),
    repeating-radial-gradient(circle, #151515 0 1.5px, #262626 1.5px 3px);
  box-shadow: inset 0 0 0 6px #121212;
}
.dm-skeuomorphism .sk-label {
  width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, #e8e8e8 0 5px, #2a2a2a 5px 7px, transparent 7px), radial-gradient(circle at 35% 30%, #d0533f, var(--sk-red) 60%, #7e2318);
  color: var(--sk-cream); line-height: 1.2;
}
.dm-skeuomorphism .sk-label b { font-family: "PT Serif", Georgia, serif; font-size: 13px; letter-spacing: .18em; margin-bottom: 26px; }
.dm-skeuomorphism .sk-label span { font-size: 11px; letter-spacing: .08em; }
.dm-skeuomorphism .sk-arm__base { position: absolute; left: 418px; top: 52px; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(from 0deg, #f6f7f8, #9aa1a8 25%, #eceff1 50%, #8b9299 75%, #f6f7f8); box-shadow: 0 8px 14px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(0, 0, 0, .12); }
.dm-skeuomorphism .sk-arm__bar { position: absolute; left: 446px; top: 86px; width: 12px; height: 250px; border-radius: 6px; background: linear-gradient(90deg, #7f868d, #f6f7f8 45%, #959ca3); transform-origin: 6px 0; transform: rotate(24deg); box-shadow: 6px 10px 10px rgba(0, 0, 0, .35); }
.dm-skeuomorphism .sk-arm__head { position: absolute; left: 330px; top: 300px; width: 34px; height: 46px; border-radius: 6px; background: linear-gradient(90deg, #2a2a2a, #555 50%, #2a2a2a); transform: rotate(24deg); box-shadow: 4px 8px 8px rgba(0, 0, 0, .45); }
.dm-skeuomorphism .sk-deck__ctrl { position: absolute; right: 30px; bottom: 32px; display: flex; align-items: center; gap: 22px; }
.dm-skeuomorphism .sk-switch { display: grid; justify-items: center; gap: 8px; }
.dm-skeuomorphism .sk-switch span { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--sk-cream); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }

.dm-skeuomorphism .sk-specs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr) 210px; gap: 22px; align-items: center; padding: 0 48px; }
.dm-skeuomorphism .sk-metal {
  position: relative; display: grid; gap: 4px; padding: 22px 28px; border-radius: 8px;
  background: var(--sk-alu);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.dm-skeuomorphism .sk-metal .sk-screw { position: absolute; }
.dm-skeuomorphism .sk-metal .sk-screw:nth-child(1) { left: 8px; top: 8px; }
.dm-skeuomorphism .sk-metal .sk-screw:nth-child(2) { right: 8px; top: 8px; }
.dm-skeuomorphism .sk-metal .sk-screw:nth-child(3) { left: 8px; bottom: 8px; }
.dm-skeuomorphism .sk-metal .sk-screw:nth-child(4) { right: 8px; bottom: 8px; }
.dm-skeuomorphism .sk-metal span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #464c53; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.dm-skeuomorphism .sk-metal b { font-family: "PT Serif", Georgia, serif; font-size: 19px; color: #22262b; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.dm-skeuomorphism .sk-tag {
  position: relative; display: grid; gap: 0; padding: 16px 18px 16px 44px;
  background: linear-gradient(180deg, #f8f0dc, #eadcbb); border-radius: 4px 14px 14px 4px;
  transform: rotate(3deg); box-shadow: 0 10px 18px rgba(0, 0, 0, .5);
}
.dm-skeuomorphism .sk-tag__hole { position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #4a2f1b; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 0 0 3px #c9a44c; }
.dm-skeuomorphism .sk-tag b { font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--sk-red); }
.dm-skeuomorphism .sk-tag span:last-child { font-family: "Caveat", cursive; font-weight: 500; font-size: 22px; line-height: 1.1; color: var(--sk-ink); }

/* ----- Приложение ----- */
.dm-skeuomorphism.dm--app { display: flex; flex-direction: column; background: var(--sk-alu); }
.dm-skeuomorphism .sk-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 700; color: #22262b; }
.dm-skeuomorphism .sk-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-skeuomorphism .sk-status__icons i { width: 16px; height: 10px; border-radius: 2px; background: #22262b; }
.dm-skeuomorphism .sk-apphead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 12px; }
.dm-skeuomorphism .sk-power { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #2f343a; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

.dm-skeuomorphism .sk-tuner { margin: 0 16px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, #9aa1a8, #eef0f2 70%); box-shadow: 0 6px 12px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; }
.dm-skeuomorphism .sk-scale {
  position: relative; height: 122px; border-radius: 11px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, rgba(242, 163, 58, .22), transparent 70%), #16191c;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .9);
}
.dm-skeuomorphism .sk-scale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 38%, transparent 40%); pointer-events: none; }
.dm-skeuomorphism .sk-scale__nums { display: flex; justify-content: space-between; padding: 16px 16px 0; font-size: 15px; font-weight: 700; color: var(--sk-amber); text-shadow: 0 0 6px rgba(242, 163, 58, .75); }
.dm-skeuomorphism .sk-scale__ticks {
  height: 26px; margin: 6px 22px 0;
  background:
    repeating-linear-gradient(90deg, rgba(242, 163, 58, .75) 0 2px, transparent 2px 12.4px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--sk-amber) 0 2px, transparent 2px 62px) 0 0 / 100% 26px no-repeat;
  filter: drop-shadow(0 0 3px rgba(242, 163, 58, .6));
}
.dm-skeuomorphism .sk-needle { position: absolute; left: 61%; top: 12px; bottom: 26px; width: 3px; border-radius: 2px; background: #ff4a33; box-shadow: 0 0 8px rgba(255, 74, 51, .9); }
.dm-skeuomorphism .sk-band { position: absolute; left: 18px; bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #d39445; }

.dm-skeuomorphism .sk-station {
  display: grid; gap: 2px; margin: 16px 20px 0; padding: 10px 16px;
  background: linear-gradient(180deg, #f8f0dc, #eee2c4); border-radius: 3px; transform: rotate(-.6deg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(120, 90, 40, .12);
}
.dm-skeuomorphism .sk-station b { font-family: "PT Serif", Georgia, serif; font-size: 19px; }
.dm-skeuomorphism .sk-station span { font-size: 13px; color: #554536; }

.dm-skeuomorphism .sk-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 22px 0; }
.dm-skeuomorphism .sk-vu {
  position: relative; padding: 8px 6px 4px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 110%, #fff6dc, #f0d9a2 80%);
  box-shadow: 0 0 0 5px #2b2f35, 0 0 0 6px #8a9097, 0 8px 14px 4px rgba(0, 0, 0, .3), inset 0 3px 8px rgba(0, 0, 0, .35);
}
.dm-skeuomorphism .sk-vu svg { width: 100%; height: auto; }
.dm-skeuomorphism .sk-vu span { position: absolute; left: 10px; bottom: 4px; font-family: "PT Serif", Georgia, serif; font-size: 13px; font-weight: 700; color: var(--sk-ink); }

.dm-skeuomorphism .sk-controls { display: flex; justify-content: space-between; align-items: center; margin: 24px 26px 0; }
.dm-skeuomorphism .sk-tgl-wrap { display: grid; justify-items: center; gap: 10px; width: 84px; }
.dm-skeuomorphism .sk-tgl-wrap span, .dm-skeuomorphism .sk-vol span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2f343a; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.dm-skeuomorphism .sk-vol { display: grid; justify-items: center; gap: 12px; }

.dm-skeuomorphism .sk-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 16px 0; }
.dm-skeuomorphism .sk-pkey {
  display: grid; justify-items: center; padding: 7px 0 8px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #fdfbf5, #e4ddcb); font-size: 12px; font-weight: 700; color: #3d3127;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #9b9179, 0 7px 9px rgba(0, 0, 0, .3);
}
.dm-skeuomorphism .sk-pkey b { font-family: "PT Serif", Georgia, serif; font-size: 17px; line-height: 1.2; }
.dm-skeuomorphism .sk-pkey.is-down { transform: translateY(3px); background: linear-gradient(180deg, #e2dbc8, #efe9da); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .28), 0 1px 0 #9b9179; color: var(--sk-red); }

.dm-skeuomorphism .sk-tabbar {
  display: flex; gap: 8px; margin-top: auto; padding: 12px 12px 26px;
  background: linear-gradient(180deg, #3a3f45, #24282d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 -4px 10px rgba(0, 0, 0, .25);
}
.dm-skeuomorphism .sk-tabbar span {
  flex: 1; display: grid; place-items: center; height: 46px; border-radius: 8px;
  background: linear-gradient(180deg, #5d636a, #3e4349); color: #eceef0; font-size: 13px; font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
  box-shadow: 0 3px 0 #131518, inset 0 1px 0 rgba(255, 255, 255, .22);
}
.dm-skeuomorphism .sk-tabbar .is-down { transform: translateY(2px); background: linear-gradient(180deg, #2c3035, #383d43); color: var(--sk-amber); text-shadow: 0 0 6px rgba(242, 163, 58, .6); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6), 0 1px 0 #131518; }

/* ----- Веб-платформа ----- */
.dm-skeuomorphism.dm--platform { display: grid; grid-template-columns: 250px 1fr; }
.dm-skeuomorphism .sk-side {
  position: relative; display: flex; flex-direction: column; padding: 30px 24px 28px;
  background: var(--sk-leather); color: var(--sk-cream);
  box-shadow: 8px 0 20px rgba(0, 0, 0, .55), inset -2px 0 0 rgba(255, 255, 255, .06);
}
.dm-skeuomorphism .sk-side::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(243, 233, 210, .3); border-radius: 10px; pointer-events: none; }
.dm-skeuomorphism .sk-side .sk-plate { align-self: flex-start; }
.dm-skeuomorphism .sk-side__cap { margin: 22px 0 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #d9c7a3; }
.dm-skeuomorphism .sk-sidenav { display: grid; gap: 6px; font-size: 16px; font-weight: 700; }
.dm-skeuomorphism .sk-sidenav li { padding: 11px 14px; border-radius: 8px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .7); }
.dm-skeuomorphism .sk-sidenav .is-active { background: var(--sk-brass); color: #2b1d08; text-shadow: 0 1px 0 rgba(255, 240, 190, .7); box-shadow: 0 3px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7); }
.dm-skeuomorphism .sk-sticky {
  position: relative; margin-top: auto; padding: 20px 18px 24px;
  background: linear-gradient(180deg, #fff5b0, #f4dc6a); transform: rotate(2.5deg);
  box-shadow: 0 12px 18px rgba(0, 0, 0, .5);
  font-family: "Caveat", cursive; font-weight: 700; font-size: 25px; line-height: 1.1; color: var(--sk-ink);
}
.dm-skeuomorphism .sk-sticky::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 22px 22px; border-color: transparent transparent #4a3428 #d8bd4e; }

.dm-skeuomorphism .sk-desk { display: flex; flex-direction: column; padding: 26px 32px 30px; min-width: 0; }
.dm-skeuomorphism .sk-desk__head { display: flex; justify-content: space-between; align-items: flex-end; }
.dm-skeuomorphism .sk-desk__sub { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e8d6b0; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.dm-skeuomorphism .sk-desk__head h1 { font-family: "PT Serif", Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--sk-cream); text-shadow: 0 2px 3px rgba(0, 0, 0, .7); }
.dm-skeuomorphism .sk-desk__tools { display: flex; align-items: center; gap: 24px; }
.dm-skeuomorphism .sk-tgl-inline { display: flex; align-items: center; gap: 40px; font-size: 15px; font-weight: 700; color: var(--sk-cream); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.dm-skeuomorphism .sk-desk__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 270px; gap: 26px; margin-top: 30px; }

.dm-skeuomorphism .sk-ledger {
  position: relative; padding: 48px 26px 0 0; border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 58px, rgba(194, 75, 58, .55) 58px 60px, transparent 60px),
    repeating-linear-gradient(180deg, transparent 0 47px, #ddd1b2 47px 48px),
    linear-gradient(180deg, #fdf9ee, #f7efdc);
  box-shadow: 3px 3px 0 #efe5cc, 6px 6px 0 #e0d3b4, 0 18px 34px rgba(0, 0, 0, .55);
}
.dm-skeuomorphism .sk-rings { position: absolute; left: 70px; right: 70px; top: -12px; display: flex; justify-content: space-between; }
.dm-skeuomorphism .sk-rings i { width: 14px; height: 32px; border-radius: 7px; background: linear-gradient(90deg, #7f868d, #f6f7f8 45%, #959ca3); box-shadow: 0 3px 4px rgba(0, 0, 0, .45); }
.dm-skeuomorphism .sk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.dm-skeuomorphism .sk-table th, .dm-skeuomorphism .sk-table td { height: 48px; padding: 0 8px; white-space: nowrap; text-align: left; vertical-align: middle; }
.dm-skeuomorphism .sk-table th:first-child, .dm-skeuomorphism .sk-table td:first-child { padding-left: 74px; width: 112px; }
.dm-skeuomorphism .sk-table th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b5a44; }
.dm-skeuomorphism .sk-table td:first-child { font-family: "PT Serif", Georgia, serif; font-weight: 700; color: #6b5a44; }
.dm-skeuomorphism .sk-table .r { text-align: right; font-weight: 700; }
.dm-skeuomorphism .sk-stamp { display: inline-block; padding: 1px 8px; border: 2px solid currentColor; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.dm-skeuomorphism .sk-stamp--blue { color: #1f4e8c; }
.dm-skeuomorphism .sk-stamp--green { color: #2e6b34; transform: rotate(2deg); }
.dm-skeuomorphism .sk-stamp--red { color: #b3261e; }
.dm-skeuomorphism .sk-ledger__sum { height: 48px; display: flex; align-items: center; padding-left: 74px; font-family: "Caveat", cursive; font-weight: 700; font-size: 27px; color: #1f4e8c; }

.dm-skeuomorphism .sk-panel {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 22px;
  border-radius: 14px; background: var(--sk-alu);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .2);
}
.dm-skeuomorphism .sk-panel > .sk-screw { position: absolute; }
.dm-skeuomorphism .sk-panel > .sk-screw:nth-child(1) { left: 10px; top: 10px; }
.dm-skeuomorphism .sk-panel > .sk-screw:nth-child(2) { right: 10px; top: 10px; }
.dm-skeuomorphism .sk-panel > .sk-screw:nth-child(3) { left: 10px; bottom: 10px; }
.dm-skeuomorphism .sk-panel > .sk-screw:nth-child(4) { right: 10px; bottom: 10px; }
.dm-skeuomorphism .sk-gauge { display: flex; align-items: center; gap: 16px; }
.dm-skeuomorphism .sk-gauge__face {
  flex: none; width: 124px; padding: 8px 4px 2px; border-radius: 62px 62px 10px 10px;
  background: radial-gradient(ellipse at 50% 110%, #fff6dc, #f0d9a2 80%);
  box-shadow: 0 0 0 5px #2b2f35, 0 0 0 6px #8a9097, 0 6px 12px 4px rgba(0, 0, 0, .3), inset 0 3px 8px rgba(0, 0, 0, .35);
}
.dm-skeuomorphism .sk-gauge__face svg { width: 100%; height: auto; }
.dm-skeuomorphism .sk-gauge p { display: grid; }
.dm-skeuomorphism .sk-gauge span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #464c53; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.dm-skeuomorphism .sk-gauge b { font-family: "PT Serif", Georgia, serif; font-size: 24px; white-space: nowrap; color: #22262b; }
.dm-skeuomorphism .sk-leds { display: grid; gap: 8px; margin-top: 6px; }
.dm-skeuomorphism .sk-leds li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: #22262b; background: rgba(0, 0, 0, .05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .8); }
.dm-skeuomorphism .sk-leds span { margin-left: auto; font-size: 13px; font-weight: 400; color: #464c53; }
.dm-skeuomorphism .sk-estop { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.dm-skeuomorphism .sk-estop__btn { flex: none; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 25px, #f2c230 25px 33px, #8a6a10 33px 35px), radial-gradient(circle at 38% 30%, #ff9a8a, #d6352a 45%, #7a160f 100%); box-shadow: 0 6px 10px rgba(0, 0, 0, .45), inset 0 -3px 5px rgba(0, 0, 0, .35); }
.dm-skeuomorphism .sk-estop p { display: grid; }
.dm-skeuomorphism .sk-estop b { font-size: 15px; font-weight: 700; color: #22262b; }
.dm-skeuomorphism .sk-estop span { font-size: 13px; color: #464c53; }

/* bento.css */
/* Демонстрация: Bento-компоновка. Все селекторы ограничены .dm-bento.
   Структура: фон-«коробка», ячейки разных размеров, единый промежуток 12 px и скругление 24 px. */

.dm-bento {
  --bn-box: #eceae4;
  --bn-cell: #ffffff;
  --bn-ink: #16161a;
  --bn-muted: #5e5e66;
  --bn-lime: #d4f25a;
  --bn-lav: #cfc8ff;
  --bn-peach: #ffd9c2;
  --bn-gap: 12px;
  --bn-r: 24px;
  background: var(--bn-box);
  color: var(--bn-ink);
  font-family: "Onest", system-ui, sans-serif;
}

/* ----- Общие элементы ----- */
.dm-bento .bn-grid { display: grid; gap: var(--bn-gap); }
.dm-bento .bn-cell { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 22px; border-radius: var(--bn-r); background: var(--bn-cell); overflow: hidden; }
.dm-bento .bn-cell--lime { background: var(--bn-lime); }
.dm-bento .bn-cell--lav { background: var(--bn-lav); }
.dm-bento .bn-cell--dark { background: var(--bn-ink); color: #f4f4f1; }
.dm-bento .bn-cell--dark .bn-label, .dm-bento .bn-cell--dark .bn-cap { color: #b4b4ba; }
.dm-bento .bn-cell h2 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.dm-bento .bn-cell h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dm-bento .bn-label { font-size: 13px; font-weight: 500; color: var(--bn-muted); }
.dm-bento .bn-cell--lime .bn-label, .dm-bento .bn-cell--lav .bn-label { color: #3c3c42; }
.dm-bento .bn-cap { font-size: 14px; line-height: 1.4; color: var(--bn-muted); }
.dm-bento .bn-cell--lime .bn-cap, .dm-bento .bn-cell--lav .bn-cap { color: #2f2f35; }
.dm-bento .bn-big { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 58px; line-height: 1; letter-spacing: -.04em; margin: auto 0 8px; }
.dm-bento .bn-big--m { font-size: 40px; }
.dm-bento .bn-big--s { font-size: 40px; margin: 6px 0 4px; }
.dm-bento .bn-mid { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.dm-bento .bn-arrow { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bn-ink); color: #fff; font-size: 17px; }
.dm-bento .bn-arrow--light { position: static; background: rgba(255, 255, 255, .14); }
.dm-bento .bn-pill { display: inline-flex; align-items: center; align-self: flex-start; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--bn-cell); font-size: 14px; font-weight: 500; }
.dm-bento .bn-pill--lav { background: var(--bn-lav); }
.dm-bento .bn-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--bn-ink); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.dm-bento .bn-btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
.dm-bento .bn-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; align-self: flex-start; }
.dm-bento .bn-btn--ghost { background: var(--bn-box); color: var(--bn-ink); }
.dm-bento .bn-actions { display: flex; gap: 10px; align-items: center; }
.dm-bento .bn-logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.dm-bento .bn-logo__mark { display: grid; grid-template-columns: 12px 12px; gap: 3px; }
.dm-bento .bn-logo__mark i { width: 12px; height: 12px; border-radius: 4px; background: var(--bn-ink); }
.dm-bento .bn-logo__mark i:nth-child(2) { background: var(--bn-lime); }
.dm-bento .bn-logo__mark i:nth-child(3) { background: var(--bn-lav); }
.dm-bento .bn-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bn-lav); font-style: normal; font-weight: 700; font-size: 16px; color: var(--bn-ink); }
.dm-bento .bn-avatar--s { width: 34px; height: 34px; font-size: 12px; }
.dm-bento .bn-ring text { font-family: "Unbounded", "Onest", sans-serif; }

/* ----- Сайт ----- */
.dm-bento.dm--site { display: flex; flex-direction: column; padding: 18px 24px 0; }
.dm-bento .bn-nav { display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--bn-cell); flex: none; }
.dm-bento .bn-links { display: flex; gap: 6px; margin-left: 24px; font-size: 15px; font-weight: 500; color: var(--bn-muted); }
.dm-bento .bn-links li { padding: 7px 14px; border-radius: 999px; }
.dm-bento .bn-links .is-active { background: var(--bn-box); color: var(--bn-ink); }
.dm-bento .bn-login { margin-left: auto; font-size: 15px; font-weight: 500; }
.dm-bento .bn-nav .bn-btn { height: 42px; }

.dm-bento .bn-grid--site { grid-template-columns: repeat(4, 1fr); grid-template-rows: 200px 200px 172px; margin-top: var(--bn-gap); flex: none; }
.dm-bento .bn-cell--hero { grid-area: 1 / 1 / 3 / 3; padding: 32px 34px 28px; }
.dm-bento .bn-cell--hero h1 { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -.035em; margin: 18px 0 12px; }
.dm-bento .bn-cell--hero p { font-size: 17px; line-height: 1.5; color: var(--bn-muted); max-width: 440px; }
.dm-bento .bn-cell--hero .bn-actions { margin-top: 24px; }
.dm-bento .bn-people { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; font-weight: 500; color: var(--bn-muted); }
.dm-bento .bn-avs { display: flex; }
.dm-bento .bn-avs i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; margin-right: -8px; }
.dm-bento .bn-avs i:last-child { margin-right: 0; }
.dm-bento .bn-grid--site .bn-cell--lime { grid-area: 1 / 3 / 2 / 4; }
.dm-bento .bn-cell--tall { grid-area: 1 / 4 / 3 / 5; }
.dm-bento .bn-cell--tall h2 { font-family: "Unbounded", "Onest", sans-serif; font-size: 22px; font-weight: 700; margin: 4px 0 18px; }
.dm-bento .bn-timeline { display: grid; gap: 10px; }
.dm-bento .bn-timeline li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: start; }
.dm-bento .bn-timeline time { font-size: 13px; font-weight: 500; color: #b4b4ba; padding-top: 10px; }
.dm-bento .bn-ev { display: grid; padding: 9px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--bn-ink); }
.dm-bento .bn-ev small { font-size: 12px; font-weight: 400; color: #3c3c42; }
.dm-bento .bn-ev--w { background: #f4f4f1; }
.dm-bento .bn-ev--lime { background: var(--bn-lime); padding: 16px 12px; }
.dm-bento .bn-ev--lav { background: var(--bn-lav); }
.dm-bento .bn-ev--peach { background: var(--bn-peach); }
.dm-bento .bn-grid--site .bn-cell--lav { grid-area: 2 / 3 / 3 / 4; flex-direction: row; align-items: center; gap: 14px; }
.dm-bento .bn-grid--site .bn-cell--lav .bn-ring { flex: none; width: 96px; height: 96px; }
.dm-bento .bn-grid--site .bn-cell--lav h3 { font-size: 16px; margin-top: 4px; }
.dm-bento .bn-cell--cal { grid-area: 3 / 1 / 4 / 2; padding: 18px 20px; }
.dm-bento .bn-cal__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-bottom: 8px; }
.dm-bento .bn-cal__head span { font-size: 13px; color: var(--bn-muted); }
.dm-bento .bn-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; text-align: center; font-size: 12px; font-weight: 500; }
.dm-bento .bn-cal i { font-style: normal; font-size: 11px; color: var(--bn-muted); }
.dm-bento .bn-cal span { display: grid; place-items: center; height: 24px; border-radius: 8px; }
.dm-bento .bn-cal .o { color: #8f8f96; }
.dm-bento .bn-cal .d { background: var(--bn-lav); }
.dm-bento .bn-cal .t { background: var(--bn-lime); }
.dm-bento .bn-cal .now { background: var(--bn-ink); color: #fff; border-radius: 50%; }
.dm-bento .bn-cell--quote { grid-area: 3 / 2 / 4 / 4; background: var(--bn-peach); justify-content: space-between; padding: 24px 28px; }
.dm-bento .bn-quote { font-family: "Unbounded", "Onest", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.35; letter-spacing: -.02em; }
.dm-bento .bn-author { display: flex; align-items: center; gap: 12px; }
.dm-bento .bn-author i { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #16161a 0 9px, transparent 10px), radial-gradient(circle at 50% 110%, #16161a 0 18px, transparent 19px), #fff; }
.dm-bento .bn-author span { display: grid; font-size: 13px; color: #3c3c42; line-height: 1.3; }
.dm-bento .bn-author b { font-size: 15px; color: var(--bn-ink); }
.dm-bento .bn-cell--apps { grid-area: 3 / 4 / 4 / 5; }
.dm-bento .bn-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: auto; }
.dm-bento .bn-icons i { aspect-ratio: 1; border-radius: 10px; background: var(--bn-box); position: relative; }
.dm-bento .bn-icons i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bn-ink); }
.dm-bento .bn-icons .c2::after { border-radius: 3px; background: #4f6bff; }
.dm-bento .bn-icons .c3::after { background: #e8553a; }
.dm-bento .bn-icons .c4::after { border-radius: 3px; background: #2e9e5b; }
.dm-bento .bn-icons .c5 { background: var(--bn-lime); }
.dm-bento .bn-icons .c6::after { border-radius: 2px; transform: rotate(45deg); background: #8a6cff; }
.dm-bento .bn-cell--apps .bn-cap { margin-top: 4px; }
.dm-bento .bn-grid--site .bn-cell--lime .bn-cap { max-width: 210px; }

.dm-bento .bn-next { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.dm-bento .bn-next h2 { font-family: "Unbounded", "Onest", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-right: 18px; }
.dm-bento .bn-next .bn-pill { align-self: center; }
.dm-bento .bn-next__more { margin-left: auto; font-size: 15px; font-weight: 600; }

/* ----- Приложение ----- */
.dm-bento.dm--app { display: flex; flex-direction: column; }
.dm-bento .bn-status { display: flex; justify-content: space-between; padding: 14px 28px 0; font-size: 14px; font-weight: 600; }
.dm-bento .bn-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-bento .bn-status__icons i { width: 16px; height: 10px; border-radius: 2px; background: var(--bn-ink); }
.dm-bento .bn-apphead { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 14px; }
.dm-bento .bn-apphead h1 { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.03em; line-height: 1.2; margin-top: 2px; }
.dm-bento .bn-grid--app { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 150px 150px 96px; gap: 10px; padding: 0 14px; --bn-r: 22px; }
.dm-bento .bn-grid--app .bn-cell { padding: 16px; }
.dm-bento .bn-a-now { grid-column: 1 / 3; }
.dm-bento .bn-now__top { display: flex; justify-content: space-between; align-items: center; }
.dm-bento .bn-a-now h2 { font-size: 19px; margin: 6px 0 auto; }
.dm-bento .bn-progress { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); margin-bottom: 8px; }
.dm-bento .bn-progress i { display: block; height: 100%; border-radius: 4px; background: var(--bn-lime); }
.dm-bento .bn-a-now .bn-cap { font-size: 13px; }
.dm-bento .bn-a-tasks .bn-ring { margin: 8px 0 auto; }
.dm-bento .bn-a-next { grid-row: 2 / 4; grid-column: 2; }
.dm-bento .bn-agenda { display: grid; gap: 14px; margin-top: 12px; }
.dm-bento .bn-agenda li { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.dm-bento .bn-agenda i { grid-row: span 2; width: 10px; border-radius: 5px; }
.dm-bento .bn-agenda time { font-size: 12px; font-weight: 500; color: var(--bn-muted); }
.dm-bento .bn-a-habit { grid-row: 3; grid-column: 1; }
.dm-bento .bn-a-habit .bn-cap { font-size: 13px; }
.dm-bento .bn-dots { display: flex; gap: 5px; margin-top: auto; }
.dm-bento .bn-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(22, 22, 26, .16); }
.dm-bento .bn-dots .on { background: var(--bn-ink); }
.dm-bento .bn-a-week { grid-column: 1 / 3; flex-direction: row; justify-content: space-between; align-items: flex-end; }
.dm-bento .bn-minibars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.dm-bento .bn-minibars i { width: 14px; border-radius: 5px; background: var(--bn-box); }
.dm-bento .bn-minibars .on { background: var(--bn-lime); box-shadow: inset 0 0 0 2px var(--bn-ink); }
.dm-bento .bn-grid--app .bn-a-tasks { grid-row: 2; grid-column: 1; }
.dm-bento .bn-tabbar { position: absolute; left: 14px; right: 14px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px; border-radius: 999px; background: var(--bn-ink); color: #b4b4ba; font-size: 12px; font-weight: 500; }
.dm-bento .bn-tabbar span { padding: 8px 10px; border-radius: 999px; }
.dm-bento .bn-tabbar .is-active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.dm-bento .bn-tabbar .bn-plus { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: var(--bn-lime); color: var(--bn-ink); font-size: 26px; font-weight: 500; }

/* ----- Веб-платформа ----- */
.dm-bento.dm--platform { display: grid; grid-template-columns: 220px 1fr; gap: var(--bn-gap); padding: var(--bn-gap); }
.dm-bento .bn-side { display: flex; flex-direction: column; padding: 24px 16px 18px; border-radius: var(--bn-r); background: var(--bn-cell); }
.dm-bento .bn-side .bn-logo { padding: 0 8px; }
.dm-bento .bn-side__cap { margin: 28px 8px 10px; }
.dm-bento .bn-sidenav { display: grid; gap: 4px; font-size: 15px; font-weight: 500; }
.dm-bento .bn-sidenav li { padding: 10px 14px; border-radius: 14px; }
.dm-bento .bn-sidenav .is-active { background: var(--bn-ink); color: #fff; }
.dm-bento .bn-side__user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px; border-radius: 16px; background: var(--bn-box); }
.dm-bento .bn-side__user span { display: grid; font-size: 12px; color: var(--bn-muted); line-height: 1.3; }
.dm-bento .bn-side__user b { font-size: 14px; color: var(--bn-ink); }
.dm-bento .bn-main { display: flex; flex-direction: column; min-width: 0; }
.dm-bento .bn-main__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px 14px; }
.dm-bento .bn-main__head h1 { font-family: "Unbounded", "Onest", sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.03em; line-height: 1.2; }
.dm-bento .bn-seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bn-cell); font-size: 14px; font-weight: 500; }
.dm-bento .bn-seg i { font-style: normal; padding: 8px 14px; border-radius: 999px; color: var(--bn-muted); }
.dm-bento .bn-seg .on { background: var(--bn-box); color: var(--bn-ink); }
.dm-bento .bn-grid--pl { flex: 1; min-height: 0; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); }
.dm-bento .bn-grid--pl .bn-cell { padding: 18px 20px; }
.dm-bento .bn-cell__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dm-bento .bn-cell__top h2 { font-size: 17px; margin-top: 2px; }
.dm-bento .bn-cell__top .bn-arrow { position: static; flex: none; }
.dm-bento .bn-p-chart { grid-area: 1 / 1 / 2 / 5; }
.dm-bento .bn-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bn-muted); }
.dm-bento .bn-legend i { width: 12px; height: 12px; border-radius: 4px; margin-left: 8px; }
.dm-bento .bn-legend .f, .dm-bento .bn-stack .f { background: var(--bn-lime); }
.dm-bento .bn-legend .m, .dm-bento .bn-stack .m { background: var(--bn-lav); }
.dm-bento .bn-stack { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.dm-bento .bn-stack > div { display: flex; flex-direction: column; gap: 6px; }
.dm-bento .bn-stack span { flex: 1; display: flex; flex-direction: column-reverse; gap: 3px; border-radius: 10px; background: #f4f3ef; overflow: hidden; }
.dm-bento .bn-stack span i { border-radius: 8px; }
.dm-bento .bn-stack em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--bn-muted); text-align: center; }
.dm-bento .bn-p-k1 { grid-area: 1 / 5 / 2 / 6; }
.dm-bento .bn-p-k2 { grid-area: 1 / 6 / 2 / 7; }
.dm-bento .bn-p-k1 .bn-cap, .dm-bento .bn-p-k2 .bn-cap { font-size: 13px; }
.dm-bento .bn-p-team { grid-area: 2 / 1 / 4 / 3; }
.dm-bento .bn-team { display: grid; gap: 4px; }
.dm-bento .bn-team li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; font-size: 14px; font-weight: 500; }
.dm-bento .bn-team li:nth-child(odd) { background: #f4f3ef; }
.dm-bento .bn-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--bn-muted); }
.dm-bento .bn-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9b9bf; }
.dm-bento .bn-st--focus { color: #3f5a00; }
.dm-bento .bn-st--focus::before { background: #7fa800; }
.dm-bento .bn-st--meet { color: #4b3cc4; }
.dm-bento .bn-st--meet::before { background: #6b5cf0; }
.dm-bento .bn-p-meet { grid-area: 2 / 3 / 3 / 5; }
.dm-bento .bn-count { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bn-lime); color: var(--bn-ink); font-weight: 700; font-size: 14px; }
.dm-bento .bn-meet { display: grid; gap: 6px; }
.dm-bento .bn-meet li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: 14px; font-weight: 500; }
.dm-bento .bn-meet time { font-size: 13px; color: var(--bn-lime); font-weight: 600; }
.dm-bento .bn-meet em { font-style: normal; font-size: 12px; color: #b4b4ba; }
.dm-bento .bn-p-heat { grid-area: 2 / 5 / 3 / 7; }
.dm-bento .bn-heat { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(5, 1fr); gap: 4px; }
.dm-bento .bn-heat i { border-radius: 6px; background: #f1efe9; }
.dm-bento .bn-heat .l1 { background: #e4e0ff; }
.dm-bento .bn-heat .l2 { background: #b5aaff; }
.dm-bento .bn-heat .l3 { background: #6b5cf0; }
.dm-bento .bn-p-tip { grid-area: 3 / 3 / 4 / 5; }
.dm-bento .bn-p-tip h3 { font-family: "Unbounded", "Onest", sans-serif; font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: -.02em; margin: 8px 0 auto; }
.dm-bento .bn-p-goals { grid-area: 3 / 5 / 4 / 7; }
.dm-bento .bn-goals { display: grid; gap: 10px; }
.dm-bento .bn-goals li { display: grid; grid-template-columns: 1fr auto; row-gap: 5px; font-size: 13px; font-weight: 500; }
.dm-bento .bn-goals b { font-size: 13px; }
.dm-bento .bn-goals i { grid-column: 1 / 3; height: 8px; border-radius: 4px; background: #f1efe9; overflow: hidden; }
.dm-bento .bn-goals em { display: block; height: 100%; border-radius: 4px; background: var(--bn-ink); }
.dm-bento .bn-goals em.late { background: #d6452f; }

/* y2k.css */
/* Демонстрация: Y2K. Все селекторы ограничены .dm-y2k, классы с префиксом yk-.
   Приёмы: перламутровый фон, хромовый текст, гелевые кнопки-пузыри с бликом,
   капсульные окна с глянцевой шапкой, пиксельные звёзды и бабочки. */

.dm-y2k {
  --yk-ink: #1b1f4a;
  --yk-muted: #4a5180;
  --yk-line: rgba(120, 132, 190, .45);
  --yk-blue: #2f6bff;
  --yk-blue-d: #1846c9;
  --yk-pink: #ff4fae;
  --yk-pink-d: #d61e86;
  --yk-aqua: #3fd8ff;
  --yk-lime: #b8f23a;
  --yk-lilac: #b9a6ff;
  --yk-chrome: linear-gradient(180deg, #ffffff 0%, #dfe6f3 22%, #8d99b8 46%, #3d4766 52%, #b9c4dc 62%, #f4f7fd 84%, #c7d0e4 100%);
  --yk-glass: linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,244,255,.72));
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 168, 222, .55), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(140, 220, 255, .6), transparent 34%),
    radial-gradient(circle at 70% 92%, rgba(196, 255, 170, .5), transparent 36%),
    linear-gradient(135deg, #eef2ff 0%, #f6e9ff 38%, #e4f7ff 68%, #f3ffe9 100%);
  color: var(--yk-ink);
  font-family: "Jura", "Trebuchet MS", sans-serif;
  font-weight: 600;
}

/* ----- Общие детали ----- */
.dm-y2k .yk-display { font-family: "Days One", "Arial Black", sans-serif; font-weight: 400; }
.dm-y2k .yk-pixel { font-family: "Pixelify Sans", "Courier New", monospace; }

.dm-y2k .yk-chrome-text {
  font-family: "Days One", "Arial Black", sans-serif;
  background: var(--yk-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(27, 31, 74, .55);
  filter: drop-shadow(0 3px 0 rgba(27, 31, 74, .18)) drop-shadow(0 8px 14px rgba(47, 107, 255, .25));
}

.dm-y2k .yk-logo { display: inline-flex; align-items: center; gap: 8px; font-family: "Days One", sans-serif; font-size: 26px; letter-spacing: .02em; }
.dm-y2k .yk-logo svg { flex: none; }

/* гелевая кнопка-пузырь */
.dm-y2k .yk-gel {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border-radius: 999px;
  font-family: "Days One", sans-serif; font-size: 15px; letter-spacing: .02em; color: #fff;
  background: linear-gradient(180deg, #6f9bff 0%, var(--yk-blue) 48%, var(--yk-blue-d) 100%);
  box-shadow: inset 0 -4px 8px rgba(10, 20, 90, .35), inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px rgba(47, 107, 255, .35);
  text-shadow: 0 1px 1px rgba(10, 20, 90, .45);
  overflow: hidden;
}
.dm-y2k .yk-gel::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 45%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.08));
}
.dm-y2k .yk-gel > * { position: relative; }
.dm-y2k .yk-gel--pink {
  background: linear-gradient(180deg, #ff9ad0 0%, var(--yk-pink) 46%, var(--yk-pink-d) 100%);
  box-shadow: inset 0 -4px 8px rgba(110, 0, 60, .3), inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px rgba(214, 30, 134, .35);
  text-shadow: 0 1px 1px rgba(110, 0, 60, .5);
}
.dm-y2k .yk-gel--silver {
  color: var(--yk-ink); text-shadow: 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(180deg, #ffffff 0%, #e3e8f4 50%, #b8c2da 100%);
  box-shadow: inset 0 -3px 6px rgba(60, 70, 120, .22), inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(110, 122, 170, .45), 0 6px 14px rgba(60, 70, 120, .18);
}
.dm-y2k .yk-gel--round { width: 48px; padding: 0; }

/* капсульное окно с глянцевой шапкой */
.dm-y2k .yk-window {
  border-radius: 22px;
  background: var(--yk-glass);
  box-shadow: 0 0 0 1px rgba(255,255,255,.95) inset, 0 0 0 1px rgba(120, 132, 190, .35), 0 14px 30px rgba(60, 60, 150, .16);
  overflow: hidden;
}
.dm-y2k .yk-window__bar {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf7 45%, #c9d2e8 55%, #eef2fb 100%);
  border-bottom: 1px solid rgba(120, 132, 190, .4);
  font-size: 12px; font-weight: 700; color: var(--yk-muted); letter-spacing: .08em; text-transform: uppercase;
}
.dm-y2k .yk-window__bar b { margin-right: auto; color: var(--yk-ink); font-weight: 600; }
.dm-y2k .yk-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.8); }
.dm-y2k .yk-dot--p { background: #ff6fbf; }
.dm-y2k .yk-dot--b { background: #59c8ff; }
.dm-y2k .yk-dot--l { background: #b8f23a; }

.dm-y2k .yk-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--yk-ink);
  background: linear-gradient(180deg, #ffffff, #e5eaf6);
  box-shadow: inset 0 0 0 1px rgba(120, 132, 190, .5), 0 2px 4px rgba(60, 70, 120, .1);
}
.dm-y2k .yk-chip--on { color: #fff; background: linear-gradient(180deg, #6f9bff, var(--yk-blue-d)); box-shadow: inset 0 -2px 4px rgba(10,20,90,.3), 0 3px 8px rgba(47,107,255,.3); }
.dm-y2k .yk-chip--pink { color: #fff; background: linear-gradient(180deg, #ff8fca, var(--yk-pink-d)); box-shadow: inset 0 -2px 4px rgba(110,0,60,.3); }
.dm-y2k .yk-chip--lime { background: linear-gradient(180deg, #e2ff9e, #a6e02a); box-shadow: inset 0 0 0 1px rgba(80, 120, 0, .35); color: #213400; }

.dm-y2k .yk-spark { position: absolute; pointer-events: none; }
.dm-y2k .yk-spark--tw { animation: yk-twinkle 2.6s ease-in-out infinite; }
@keyframes yk-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
@keyframes yk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes yk-spin { to { transform: rotate(360deg); } }

/* ===================== Сайт ===================== */
.dm-y2k.dm--site { padding: 22px 48px 0; }
.dm-y2k .yk-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 10px 0 26px; border-radius: 999px;
  background: var(--yk-glass);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(120,132,190,.35), 0 10px 24px rgba(60,60,150,.14);
}
.dm-y2k .yk-nav__links { display: flex; gap: 6px; margin-left: 28px; font-size: 15px; font-weight: 700; color: var(--yk-muted); }
.dm-y2k .yk-nav__links li { padding: 8px 16px; border-radius: 999px; }
.dm-y2k .yk-nav__links .is-active { color: var(--yk-ink); background: linear-gradient(180deg, #ffffff, #dfe5f3); box-shadow: inset 0 0 0 1px rgba(120,132,190,.45); }
.dm-y2k .yk-nav__online { margin-left: auto; font-size: 13px; color: var(--yk-muted); display: flex; align-items: center; gap: 8px; }
.dm-y2k .yk-nav__online i { width: 9px; height: 9px; border-radius: 50%; background: #3fdc6a; box-shadow: 0 0 0 3px rgba(63,220,106,.25); }

.dm-y2k .yk-hero { position: relative; display: grid; grid-template-columns: 560px 1fr; gap: 20px; height: 500px; padding-top: 26px; }
.dm-y2k .yk-hero__text { position: relative; z-index: 2; padding-left: 14px; }
.dm-y2k .yk-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #fff;
  background: linear-gradient(90deg, #ff4fae, #8b5cff 50%, #2f9bff);
  box-shadow: 0 4px 12px rgba(139, 92, 255, .35);
}
.dm-y2k .yk-hero h1 { font-size: 66px; line-height: 1; letter-spacing: -.01em; margin: 18px 0 18px; }
.dm-y2k .yk-hero h1 span { display: block; }
.dm-y2k .yk-lead { font-size: 17px; line-height: 1.5; color: var(--yk-muted); max-width: 480px; margin-bottom: 24px; }
.dm-y2k .yk-actions { display: flex; align-items: center; gap: 14px; }
.dm-y2k .yk-actions .yk-gel { height: 56px; padding: 0 34px; font-size: 16px; }
.dm-y2k .yk-hero__meta { display: flex; gap: 28px; margin-top: 18px; font-size: 13px; color: var(--yk-muted); }
.dm-y2k .yk-hero__meta b { display: block; font-family: "Pixelify Sans", monospace; font-size: 22px; color: var(--yk-ink); font-weight: 700; }

.dm-y2k .yk-stage { position: relative; }
.dm-y2k .yk-blob { position: absolute; left: 30px; top: 0; width: 520px; height: 440px; }
.dm-y2k .yk-player {
  position: absolute; left: 130px; top: 30px; width: 236px; height: 380px; border-radius: 48px;
  background:
    radial-gradient(ellipse at 30% 8%, rgba(255,255,255,.95), transparent 38%),
    linear-gradient(160deg, rgba(255, 170, 220, .95), rgba(190, 150, 255, .9) 55%, rgba(130, 210, 255, .95));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 -14px 26px rgba(90, 40, 160, .3), 0 24px 44px rgba(90, 60, 180, .35);
  transform: rotate(8deg);
  animation: yk-float 5s ease-in-out infinite;
  z-index: 2;
}
.dm-y2k .yk-player__screen {
  position: absolute; left: 22px; right: 22px; top: 28px; height: 150px; border-radius: 22px;
  background: linear-gradient(180deg, #16204f, #0d1436);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), inset 0 6px 14px rgba(0,0,0,.5);
  padding: 14px 16px; color: #bff3ff; font-family: "Pixelify Sans", monospace; font-size: 12px;
}
.dm-y2k .yk-player__screen b { display: block; font-size: 15px; color: #fff; margin: 4px 0 10px; }
.dm-y2k .yk-eq { display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.dm-y2k .yk-eq i { width: 10px; background: repeating-linear-gradient(0deg, #3fd8ff 0 4px, transparent 4px 6px); }
.dm-y2k .yk-eq i:nth-child(3n) { background: repeating-linear-gradient(0deg, #ff6fbf 0 4px, transparent 4px 6px); }
.dm-y2k .yk-eq i:nth-child(4n) { background: repeating-linear-gradient(0deg, #b8f23a 0 4px, transparent 4px 6px); }
.dm-y2k .yk-wheel {
  position: absolute; left: 50%; bottom: 34px; width: 148px; height: 148px; margin-left: -74px; border-radius: 50%;
  background: conic-gradient(from 200deg, #f8fbff, #b7c1d9, #ffffff, #8e9abb, #eef2fb, #aab5cf, #f8fbff);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 6px 14px rgba(60,40,120,.3);
}
.dm-y2k .yk-wheel::after {
  content: ""; position: absolute; inset: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ffffff, #d9e0f0 60%, #a8b3cd);
  box-shadow: inset 0 0 0 1px rgba(90,100,150,.4);
}
.dm-y2k .yk-wheel span { position: absolute; font-size: 12px; font-family: "Pixelify Sans", monospace; color: var(--yk-ink); font-weight: 700; }
.dm-y2k .yk-wheel span:nth-child(1) { top: 12px; left: 50%; transform: translateX(-50%); }
.dm-y2k .yk-wheel span:nth-child(2) { bottom: 12px; left: 50%; transform: translateX(-50%); }
.dm-y2k .yk-wheel span:nth-child(3) { left: 14px; top: 50%; transform: translateY(-50%); }
.dm-y2k .yk-wheel span:nth-child(4) { right: 14px; top: 50%; transform: translateY(-50%); }

.dm-y2k .yk-now { position: absolute; left: -30px; top: 290px; width: 250px; z-index: 3; transform: rotate(-4deg); }
.dm-y2k .yk-now__body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.dm-y2k .yk-cd { width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #fff 0 5px, rgba(120,132,190,.6) 5px 7px, transparent 7px), conic-gradient(#ffd1ec, #c8f1ff, #e8ffc4, #e1d0ff, #ffd1ec);
  box-shadow: inset 0 0 0 1px rgba(120,132,190,.5);
  animation: yk-spin 6s linear infinite;
}
.dm-y2k .yk-now__body b { display: block; font-size: 15px; font-family: "Days One", sans-serif; font-weight: 400; }
.dm-y2k .yk-now__body small { font-size: 12px; color: var(--yk-muted); }
.dm-y2k .yk-progress { height: 10px; margin: 0 14px 14px; border-radius: 999px; background: #dfe4f2; box-shadow: inset 0 1px 3px rgba(40,50,110,.25); overflow: hidden; }
.dm-y2k .yk-progress i { display: block; height: 100%; width: 62%; border-radius: 999px; background: linear-gradient(180deg, #a8f0ff, #24b8f0 60%, #1592d6); box-shadow: inset 0 2px 0 rgba(255,255,255,.7); }

.dm-y2k .yk-buddy { position: absolute; right: -10px; top: 70px; width: 214px; z-index: 3; transform: rotate(3deg); }
.dm-y2k .yk-buddy ul { padding: 8px 12px 12px; display: grid; gap: 6px; font-size: 13px; }
.dm-y2k .yk-buddy li { display: flex; align-items: center; gap: 8px; }
.dm-y2k .yk-buddy li i { width: 10px; height: 10px; border-radius: 50%; background: #3fdc6a; box-shadow: inset 0 -1px 2px rgba(0,0,0,.3); }
.dm-y2k .yk-buddy li.is-away i { background: #ffc23d; }
.dm-y2k .yk-buddy li small { margin-left: auto; color: var(--yk-muted); font-size: 11px; }

.dm-y2k .yk-features { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; margin-top: 18px; }
.dm-y2k .yk-feature { display: flex; gap: 16px; align-items: center; padding: 16px 20px; }
.dm-y2k .yk-feature__icon { width: 64px; height: 64px; border-radius: 22px; flex: none; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.7), 0 6px 12px rgba(60,60,150,.2); }
.dm-y2k .yk-feature__icon--p { background: linear-gradient(180deg, #ffb0da, #ff4fae); }
.dm-y2k .yk-feature__icon--b { background: linear-gradient(180deg, #a6e8ff, #2f9bff); }
.dm-y2k .yk-feature__icon--l { background: linear-gradient(180deg, #ecffb5, #9fdc22); }
.dm-y2k .yk-feature h2 { font-family: "Days One", sans-serif; font-size: 17px; margin-bottom: 4px; }
.dm-y2k .yk-feature p { font-size: 14px; line-height: 1.4; color: var(--yk-muted); }

/* ===================== Приложение ===================== */
.dm-y2k.dm--app { display: flex; flex-direction: column; padding: 0 20px; }
.dm-y2k .yk-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 0; font-size: 14px; font-weight: 700; }
.dm-y2k .yk-status__icons { display: flex; gap: 5px; align-items: center; }
.dm-y2k .yk-status__icons i { width: 16px; height: 10px; border-radius: 4px; background: linear-gradient(180deg, #6f7aa8, var(--yk-ink)); }
.dm-y2k .yk-appbar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.dm-y2k .yk-appbar .yk-gel { height: 42px; width: 42px; font-size: 18px; }
.dm-y2k .yk-appbar__title { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--yk-muted); text-align: center; }
.dm-y2k .yk-appbar__title b { display: block; font-family: "Days One", sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .02em; color: var(--yk-ink); }

.dm-y2k .yk-disc-wrap { position: relative; height: 292px; margin-top: 10px; }
.dm-y2k .yk-disc {
  position: absolute; left: 50%; top: 18px; width: 256px; height: 256px; margin-left: -128px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 22px, #ffffff 22px 26px, rgba(120,132,190,.55) 26px 30px, transparent 30px),
    radial-gradient(circle, transparent 0 60%, rgba(255,255,255,.35) 60.5% 61%, transparent 61.5% 74%, rgba(255,255,255,.35) 74.5% 75%, transparent 75.5%),
    conic-gradient(from 30deg, #ffd1ec, #c8f1ff, #f2ffd1, #e1d0ff, #ffe6c8, #c8f1ff, #ffd1ec);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(200, 208, 230, .7), 0 0 0 7px rgba(120,132,190,.5), 0 20px 40px rgba(90, 60, 180, .3);
  animation: yk-spin 14s linear infinite;
}
.dm-y2k .yk-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(130deg, rgba(255,255,255,.75) 0%, transparent 30%, transparent 65%, rgba(255,255,255,.4) 85%, transparent 100%);
}
.dm-y2k .yk-fly { position: absolute; }
.dm-y2k .yk-fly--a { left: 6px; top: 6px; transform: rotate(-14deg); }
.dm-y2k .yk-fly--b { right: 0; bottom: 18px; transform: rotate(16deg); }

.dm-y2k .yk-track { text-align: center; margin-top: 4px; }
.dm-y2k .yk-track h1 { font-family: "Days One", sans-serif; font-weight: 400; font-size: 26px; line-height: 1.15; }
.dm-y2k .yk-track p { font-size: 15px; color: var(--yk-muted); margin-top: 4px; }
.dm-y2k .yk-seek { margin-top: 18px; }
.dm-y2k .yk-seek__bar { position: relative; height: 14px; border-radius: 999px; background: #dfe4f2; box-shadow: inset 0 1px 3px rgba(40,50,110,.3); }
.dm-y2k .yk-seek__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 41%; border-radius: 999px; background: linear-gradient(180deg, #ffc1e3, #ff4fae 60%, #d61e86); box-shadow: inset 0 2px 0 rgba(255,255,255,.65); }
.dm-y2k .yk-seek__bar b { position: absolute; left: 41%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e2e7f4 55%, #a9b4ce); box-shadow: 0 0 0 1px rgba(110,122,170,.6), 0 3px 6px rgba(40,50,110,.3); }
.dm-y2k .yk-seek__time { display: flex; justify-content: space-between; margin-top: 8px; font-family: "Pixelify Sans", monospace; font-size: 13px; color: var(--yk-muted); }

.dm-y2k .yk-controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 12px; }
.dm-y2k .yk-controls .yk-gel--silver { width: 54px; height: 54px; padding: 0; font-size: 16px; }
.dm-y2k .yk-controls .yk-gel--pink { width: 84px; height: 84px; padding: 0; font-size: 28px; }

.dm-y2k .yk-presets { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.dm-y2k .yk-next { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px; border-radius: 20px; background: var(--yk-glass); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(120,132,190,.3); }
.dm-y2k .yk-next .yk-cd { width: 38px; height: 38px; animation: none; }
.dm-y2k .yk-next b { display: block; font-size: 14px; }
.dm-y2k .yk-next small { font-size: 12px; color: var(--yk-muted); }
.dm-y2k .yk-next span:last-child { margin-left: auto; font-family: "Pixelify Sans", monospace; font-size: 13px; color: var(--yk-muted); }

.dm-y2k .yk-tabbar {
  display: flex; justify-content: space-between; margin-top: auto; margin-bottom: 22px; padding: 8px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf7 50%, #cfd7ea 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(120,132,190,.4), 0 10px 22px rgba(60,60,150,.18);
  font-size: 12px; font-weight: 700; color: var(--yk-muted);
}
.dm-y2k .yk-tabbar span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 999px; }
.dm-y2k .yk-tabbar span i { font-style: normal; font-size: 16px; line-height: 1; }
.dm-y2k .yk-tabbar .is-active { color: #fff; background: linear-gradient(180deg, #6f9bff, var(--yk-blue-d)); box-shadow: inset 0 -2px 5px rgba(10,20,90,.35), inset 0 1px 0 rgba(255,255,255,.5); }

/* ===================== Платформа ===================== */
.dm-y2k.dm--platform { display: grid; grid-template-columns: 236px 1fr; gap: 22px; padding: 20px; }
.dm-y2k .yk-side {
  display: flex; flex-direction: column; padding: 22px 16px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(228, 234, 248, .85));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(120,132,190,.35), 0 16px 32px rgba(60,60,150,.16);
}
.dm-y2k .yk-side .yk-logo { padding-left: 8px; font-size: 24px; }
.dm-y2k .yk-side__label { margin: 26px 0 8px 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--yk-muted); }
.dm-y2k .yk-side__nav { display: grid; gap: 4px; font-size: 15px; font-weight: 700; color: var(--yk-muted); }
.dm-y2k .yk-side__nav li { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; }
.dm-y2k .yk-side__nav li i { font-style: normal; width: 18px; text-align: center; }
.dm-y2k .yk-side__nav li em { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--yk-pink-d); }
.dm-y2k .yk-side__nav .is-active { color: #fff; background: linear-gradient(180deg, #6f9bff, var(--yk-blue) 50%, var(--yk-blue-d)); box-shadow: inset 0 -3px 6px rgba(10,20,90,.3), inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px rgba(47,107,255,.3); text-shadow: 0 1px 1px rgba(10,20,90,.4); }
.dm-y2k .yk-storage { margin-top: auto; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #f6f0ff, #e5ecff); box-shadow: inset 0 0 0 1px rgba(120,132,190,.35); font-size: 13px; }
.dm-y2k .yk-storage b { font-family: "Days One", sans-serif; font-weight: 400; font-size: 15px; }
.dm-y2k .yk-storage .yk-progress { margin: 10px 0 6px; }
.dm-y2k .yk-storage .yk-progress i { width: 72%; background: linear-gradient(180deg, #e8ffb0, #a6e02a 60%, #7fb514); }
.dm-y2k .yk-storage small { color: var(--yk-muted); font-size: 12px; }

.dm-y2k .yk-main { display: flex; flex-direction: column; min-width: 0; }
.dm-y2k .yk-top { display: flex; align-items: center; gap: 14px; }
.dm-y2k .yk-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; color: var(--yk-muted);
  background: rgba(255,255,255,.9); box-shadow: inset 0 2px 4px rgba(40,50,110,.15), 0 0 0 1px rgba(120,132,190,.45); }
.dm-y2k .yk-search kbd { margin-left: auto; font-family: "Pixelify Sans", monospace; font-size: 12px; padding: 1px 8px; border-radius: 8px; background: #eef1fa; box-shadow: inset 0 0 0 1px rgba(120,132,190,.4); }
.dm-y2k .yk-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff, #ffb4dd 40%, #b48cff); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(120,132,190,.5); }

.dm-y2k .yk-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 22px 0 18px; }
.dm-y2k .yk-head p { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--yk-muted); }
.dm-y2k .yk-head h1 { font-size: 40px; line-height: 1.05; margin-top: 6px; }
.dm-y2k .yk-head__actions { display: flex; gap: 10px; }

.dm-y2k .yk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dm-y2k .yk-kpi { position: relative; padding: 16px 18px; border-radius: 26px; overflow: hidden;
  background: var(--yk-glass); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(120,132,190,.3), 0 10px 22px rgba(60,60,150,.12); }
.dm-y2k .yk-kpi::before { content: ""; position: absolute; right: -24px; top: -24px; width: 86px; height: 86px; border-radius: 50%; opacity: .9;
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.12), inset 6px 8px 12px rgba(255,255,255,.8); }
.dm-y2k .yk-kpi--p::before { background: radial-gradient(circle at 35% 30%, #fff, #ff9ad0 45%, #ff4fae); }
.dm-y2k .yk-kpi--b::before { background: radial-gradient(circle at 35% 30%, #fff, #9cdcff 45%, #2f9bff); }
.dm-y2k .yk-kpi--l::before { background: radial-gradient(circle at 35% 30%, #fff, #e2ff9e 45%, #9fdc22); }
.dm-y2k .yk-kpi--v::before { background: radial-gradient(circle at 35% 30%, #fff, #d6c8ff 45%, #8b5cff); }
.dm-y2k .yk-kpi span { position: relative; font-size: 13px; color: var(--yk-muted); }
.dm-y2k .yk-kpi b { position: relative; display: block; font-family: "Days One", sans-serif; font-weight: 400; font-size: 28px; margin: 6px 0 4px; }
.dm-y2k .yk-kpi small { position: relative; font-size: 13px; font-weight: 700; color: #187a3a; }
.dm-y2k .yk-kpi small.is-down { color: #b0185f; }

.dm-y2k .yk-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 18px; margin-top: 18px; flex: 1; min-height: 0; }
.dm-y2k .yk-chart { display: flex; flex-direction: column; }
.dm-y2k .yk-chart__body { flex: 1; display: flex; align-items: flex-end; gap: 14px; padding: 18px 20px 0; }
.dm-y2k .yk-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--yk-muted); }
.dm-y2k .yk-bar i { width: 100%; border-radius: 999px; background: linear-gradient(90deg, #6f9bff, #a8d8ff 40%, #2f6bff); box-shadow: inset 0 -4px 6px rgba(10,20,90,.25), 0 4px 10px rgba(47,107,255,.25); }
.dm-y2k .yk-bar.is-peak i { background: linear-gradient(90deg, #ff6fbf, #ffc1e3 40%, #d61e86); box-shadow: inset 0 -4px 6px rgba(110,0,60,.25), 0 4px 10px rgba(214,30,134,.3); }
.dm-y2k .yk-chart__foot { display: flex; justify-content: space-between; padding: 12px 20px 16px; font-size: 13px; color: var(--yk-muted); }
.dm-y2k .yk-chart__foot b { color: var(--yk-ink); }

.dm-y2k .yk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dm-y2k .yk-table th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--yk-muted); }
.dm-y2k .yk-table td { padding: 0 14px; height: 50px; border-top: 1px solid rgba(120,132,190,.25); }
.dm-y2k .yk-table td:first-child { font-family: "Days One", sans-serif; color: var(--yk-muted); width: 44px; }
.dm-y2k .yk-table td b { display: block; font-weight: 700; }
.dm-y2k .yk-table td small { font-size: 12px; color: var(--yk-muted); }
.dm-y2k .yk-table .yk-num { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; }
.dm-y2k .yk-table tr.is-sel td { background: rgba(185, 166, 255, .18); }
.dm-y2k .yk-table .yk-chip { height: 24px; font-size: 11px; }

.dm-y2k .yk-tools { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.dm-y2k .yk-tools span:last-child { margin-left: auto; font-size: 13px; color: var(--yk-muted); }

/* memphis.css */
/* Демонстрация: Мемфис. Все селекторы ограничены .dm-memphis, классы с префиксом mf-.
   Приёмы: геометрические фигуры (круги, треугольники, зигзаги, сквиглы),
   точечные и штриховые паттерны, «несочетаемые» плоские цвета, асимметрия,
   смещённые подложки из паттерна вместо теней. */

.dm-memphis {
  --mf-bg: #fffaf0;
  --mf-ink: #141414;
  --mf-muted: #45413a;
  --mf-pink: #ff6fb1;
  --mf-yellow: #ffdd3c;
  --mf-teal: #1fc8b4;
  --mf-blue: #2f55ff;
  --mf-red: #ff5a36;
  --mf-lilac: #b39dff;
  --mf-dots: radial-gradient(circle, var(--mf-ink) 1.6px, transparent 2.1px) 0 0 / 11px 11px;
  --mf-stripes: repeating-linear-gradient(-45deg, var(--mf-ink) 0 2.5px, transparent 2.5px 9px);
  --mf-grid: linear-gradient(var(--mf-ink) 1.5px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(90deg, var(--mf-ink) 1.5px, transparent 1.5px) 0 0 / 14px 14px;
  background: var(--mf-bg);
  color: var(--mf-ink);
  font-family: "Jost", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 500;
}

/* ----- Общие детали ----- */
.dm-memphis .mf-display { font-family: "Dela Gothic One", "Arial Black", sans-serif; font-weight: 400; }
.dm-memphis .mf-deco { position: absolute; pointer-events: none; }

.dm-memphis .mf-logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Dela Gothic One", sans-serif; font-size: 24px; letter-spacing: .02em; }
.dm-memphis .mf-logo__mark { position: relative; width: 34px; height: 34px; flex: none; }
.dm-memphis .mf-logo__mark::before { content: ""; position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--mf-teal); border: 2px solid var(--mf-ink); }
.dm-memphis .mf-logo__mark::after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 20px solid var(--mf-pink); }

/* кнопка: плоская заливка, линия 2 px и смещённая точечная подложка */
.dm-memphis .mf-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; white-space: nowrap;
  font-weight: 700; font-size: 16px; color: var(--mf-ink);
  --mf-fill: var(--mf-yellow);
}
/* заливка и линия — на ::before, смещённая паттерн-подложка — на ::after под ней */
.dm-memphis .mf-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--mf-fill); border: 2px solid var(--mf-ink); }
.dm-memphis .mf-btn::after { content: ""; position: absolute; z-index: -2; left: 7px; top: 7px; right: -9px; bottom: -9px; background: var(--mf-dots); }
.dm-memphis .mf-btn--pink { --mf-fill: var(--mf-pink); }
.dm-memphis .mf-btn--ink { --mf-fill: var(--mf-ink); color: #fff; }
.dm-memphis .mf-btn--ink::after { background: var(--mf-stripes); }
.dm-memphis .mf-btn--ghost { --mf-fill: #fff; }
.dm-memphis .mf-btn--ghost::after { display: none; }

.dm-memphis .mf-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 800; border: 2px solid var(--mf-ink); background: #fff; }
.dm-memphis .mf-shape { display: inline-block; flex: none; }
.dm-memphis .mf-shape--circle { width: 14px; height: 14px; border-radius: 50%; background: var(--mf-teal); border: 2px solid var(--mf-ink); }
.dm-memphis .mf-shape--square { width: 13px; height: 13px; background: var(--mf-yellow); border: 2px solid var(--mf-ink); transform: rotate(12deg); }
.dm-memphis .mf-shape--tri { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--mf-pink); }
.dm-memphis .mf-shape--half { width: 16px; height: 8px; border-radius: 16px 16px 0 0; background: var(--mf-blue); }

@keyframes mf-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes mf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ===================== Сайт ===================== */
.dm-memphis.dm--site { padding: 0 56px; }
.dm-memphis .mf-nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 34px; height: 92px; }
.dm-memphis .mf-nav__links { display: flex; gap: 28px; margin-left: 40px; font-size: 15px; font-weight: 700; }
.dm-memphis .mf-nav__links .is-active { position: relative; }
.dm-memphis .mf-nav__links .is-active::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 8px;
  background: linear-gradient(135deg, var(--mf-pink) 25%, transparent 25%) -4px 0 / 8px 8px, linear-gradient(225deg, var(--mf-pink) 25%, transparent 25%) -4px 0 / 8px 8px; }
.dm-memphis .mf-nav .mf-btn { margin-left: auto; height: 46px; }

.dm-memphis .mf-hero { position: relative; height: 482px; }
.dm-memphis .mf-hero__text { position: relative; z-index: 2; width: 640px; padding-top: 22px; }
.dm-memphis .mf-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dm-memphis .mf-hero h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 74px; line-height: 1; letter-spacing: -.01em; margin: 18px 0 30px; }
.dm-memphis .mf-hero h1 span { display: block; }
.dm-memphis .mf-hero h1 .mf-hl { display: inline-block; position: relative; isolation: isolate; padding: 4px 18px 10px; margin: 8px 0 0 48px; white-space: nowrap; transform: rotate(-3deg); }
.dm-memphis .mf-hero h1 .mf-hl::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--mf-pink); border: 2px solid var(--mf-ink); }
.dm-memphis .mf-hero h1 .mf-hl::after { content: ""; position: absolute; z-index: -2; inset: 12px -14px -14px 14px; background: var(--mf-stripes); }
.dm-memphis .mf-lead { font-size: 18px; line-height: 1.55; max-width: 470px; color: var(--mf-muted); font-weight: 600; }
.dm-memphis .mf-hero__row { display: flex; align-items: center; gap: 30px; margin-top: 28px; }
.dm-memphis .mf-place { font-size: 14px; font-weight: 700; line-height: 1.4; }
.dm-memphis .mf-place b { display: block; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 20px; }

.dm-memphis .mf-date { position: absolute; z-index: 3; left: 610px; top: 300px; width: 140px; height: 140px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--mf-teal); border: 2px solid var(--mf-ink); transform: rotate(-8deg); }
.dm-memphis .mf-date b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 34px; line-height: 1; }
.dm-memphis .mf-date span { font-size: 14px; font-weight: 800; letter-spacing: .1em; margin-top: 4px; }

.dm-memphis .mf-scene { position: absolute; right: -10px; top: 0; width: 470px; height: 482px; }
.dm-memphis .mf-sun { position: absolute; right: 30px; top: 14px; width: 300px; height: 300px; border-radius: 50%; background: var(--mf-blue); }
.dm-memphis .mf-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 1.8px, transparent 2.3px) 0 0 / 14px 14px; clip-path: inset(0 0 50% 0); }
.dm-memphis .mf-slab { position: absolute; left: 10px; bottom: 34px; width: 260px; height: 120px; background: var(--mf-grid); background-color: var(--mf-yellow); border: 2px solid var(--mf-ink); transform: skewX(-14deg); }

/* предмет-фигура: этажерка из геометрических блоков */
.dm-memphis .mf-totem { position: absolute; left: 150px; top: 60px; width: 250px; height: 400px; animation: mf-bob 6s ease-in-out infinite; }
.dm-memphis .mf-totem i { position: absolute; display: block; border: 2px solid var(--mf-ink); }
.dm-memphis .mf-totem .t-post { left: 116px; top: 70px; width: 18px; height: 300px; background: var(--mf-ink); }
.dm-memphis .mf-totem .t-arm-l { left: 6px; top: 150px; width: 128px; height: 20px; background: var(--mf-red); transform: rotate(-24deg); transform-origin: right center; }
.dm-memphis .mf-totem .t-arm-r { left: 116px; top: 150px; width: 128px; height: 20px; background: var(--mf-red); transform: rotate(24deg); transform-origin: left center; }
.dm-memphis .mf-totem .t-shelf { left: 30px; top: 240px; width: 190px; height: 22px; background: var(--mf-pink); }
.dm-memphis .mf-totem .t-shelf2 { left: 56px; top: 300px; width: 138px; height: 22px; background: var(--mf-stripes); background-color: #fff; }
.dm-memphis .mf-totem .t-ball { left: 85px; top: 0; width: 80px; height: 80px; border-radius: 50%; background: var(--mf-yellow); }
.dm-memphis .mf-totem .t-ball::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--mf-dots); }
.dm-memphis .mf-totem .t-cube { left: 50px; top: 196px; width: 44px; height: 44px; background: var(--mf-teal); }
.dm-memphis .mf-totem .t-cone { left: 160px; top: 196px; width: 0; height: 0; border: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 44px solid var(--mf-lilac); }
.dm-memphis .mf-totem .t-foot { left: 66px; top: 366px; width: 118px; height: 26px; border-radius: 60px 60px 0 0; background: var(--mf-blue); }
.dm-memphis .mf-caption { position: absolute; z-index: 3; right: 0; bottom: 30px; padding: 10px 14px; background: #fff; border: 2px solid var(--mf-ink); font-size: 13px; font-weight: 700; transform: rotate(3deg); }
.dm-memphis .mf-caption b { display: block; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 15px; }

.dm-memphis .mf-sections { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 22px; align-items: start; }
.dm-memphis .mf-sec { position: relative; border: 2px solid var(--mf-ink); background: #fff; }
.dm-memphis .mf-sec:nth-child(2) { margin-top: 24px; }
.dm-memphis .mf-sec:nth-child(3) { margin-top: 8px; }
.dm-memphis .mf-sec:nth-child(4) { margin-top: 30px; }
.dm-memphis .mf-sec__head { height: 52px; border-bottom: 2px solid var(--mf-ink); position: relative; overflow: hidden; }
.dm-memphis .mf-sec__head .mf-shape { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(1.8); }
.dm-memphis .mf-sec__body { padding: 12px 16px 14px; }
.dm-memphis .mf-sec h2 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 20px; }
.dm-memphis .mf-sec p { font-size: 13px; font-weight: 600; color: var(--mf-muted); margin-top: 2px; }
.dm-memphis .mf-pat--dots { background: var(--mf-dots); background-color: var(--mf-pink); }
.dm-memphis .mf-pat--stripes { background: var(--mf-stripes); background-color: var(--mf-teal); }
.dm-memphis .mf-pat--grid { background: var(--mf-grid); background-color: var(--mf-yellow); }
.dm-memphis .mf-pat--wave { background-color: var(--mf-lilac); background-image: radial-gradient(circle at 50% 120%, transparent 6px, var(--mf-ink) 6px 8px, transparent 8.5px), radial-gradient(circle at 50% -20%, transparent 6px, var(--mf-ink) 6px 8px, transparent 8.5px); background-size: 20px 12px, 20px 12px; background-position: 0 0, 10px 6px; }

/* ===================== Приложение ===================== */
.dm-memphis.dm--app { display: flex; flex-direction: column; }
.dm-memphis .mf-status { display: flex; justify-content: space-between; padding: 14px 26px 0; font-size: 14px; font-weight: 800; }
.dm-memphis .mf-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-memphis .mf-status__icons i { width: 15px; height: 10px; background: var(--mf-ink); }
.dm-memphis .mf-status__icons i:nth-child(2) { border-radius: 50%; width: 10px; }
.dm-memphis .mf-apphead { position: relative; padding: 18px 22px 0; }
.dm-memphis .mf-apphead p { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dm-memphis .mf-apphead h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.05; margin-top: 4px; }
.dm-memphis .mf-apphead svg { margin-top: 4px; }
.dm-memphis .mf-apphead .mf-deco--tri { right: 70px; top: 22px; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--mf-yellow); animation: mf-wiggle 5s ease-in-out infinite; }
.dm-memphis .mf-apphead .mf-deco--dot { right: 30px; top: 66px; width: 30px; height: 30px; border-radius: 50%; background: var(--mf-dots); background-color: var(--mf-teal); border: 2px solid var(--mf-ink); }

.dm-memphis .mf-days { display: flex; gap: 12px; padding: 14px 22px 0; }
.dm-memphis .mf-day { flex: 1; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--mf-ink); background: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; }
.dm-memphis .mf-day b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 22px; }
.dm-memphis .mf-day.is-on { position: relative; background: var(--mf-pink); border-radius: 50% 50% 8px 8px; }
.dm-memphis .mf-day.is-on::after { content: ""; position: absolute; z-index: -1; left: 6px; top: 6px; right: -8px; bottom: -8px; border-radius: 50% 50% 8px 8px; background: var(--mf-dots); }
.dm-memphis .mf-days { isolation: isolate; }
.dm-memphis .mf-day:nth-child(3) { border-radius: 8px 30px 8px 30px; }

.dm-memphis .mf-timeline { flex: 1; display: grid; gap: 9px; align-content: start; padding: 18px 22px 0; }
.dm-memphis .mf-ev { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: stretch; }
.dm-memphis .mf-ev__time { font-family: "Dela Gothic One", sans-serif; font-size: 16px; padding-top: 10px; }
.dm-memphis .mf-ev__time small { display: block; font-family: "Jost", sans-serif; font-size: 11px; font-weight: 700; color: var(--mf-muted); }
.dm-memphis .mf-ev__card { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 0; border: 2px solid var(--mf-ink); background: #fff; overflow: hidden; }
.dm-memphis .mf-ev__card > i { align-self: stretch; border-right: 2px solid var(--mf-ink); }
.dm-memphis .mf-ev__card b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.dm-memphis .mf-ev__card span { font-size: 12px; font-weight: 600; color: var(--mf-muted); }
.dm-memphis .mf-ev__card .mf-shape { transform: scale(1.3); }
.dm-memphis .mf-ev--hot .mf-ev__card { background: var(--mf-yellow); padding: 14px 12px 14px 0; }
.dm-memphis .mf-ev--hot .mf-ev__card b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 17px; }
.dm-memphis .mf-ev--hot .mf-ev__card span { color: var(--mf-ink); }
.dm-memphis .mf-ev--hot .mf-ev__card svg { position: absolute; right: -6px; bottom: -4px; }
.dm-memphis .mf-ev .mf-ev__card span.mf-ev__seat { white-space: nowrap; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; background: var(--mf-ink); color: #fff; }

.dm-memphis .mf-cta { padding: 12px 22px 12px; }
.dm-memphis .mf-cta .mf-btn { display: flex; width: calc(100% - 9px); height: 52px; }

.dm-memphis .mf-tabbar { display: flex; justify-content: space-around; align-items: flex-end; padding: 12px 8px 22px; background: var(--mf-ink); color: #fff; font-size: 11px; font-weight: 700; }
.dm-memphis .mf-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; }
.dm-memphis .mf-tabbar .mf-shape { border-color: #fff; }
.dm-memphis .mf-tabbar .is-active { color: var(--mf-yellow); }
.dm-memphis .mf-tabbar .is-active::after { content: ""; width: 26px; height: 4px; background: var(--mf-yellow); }

/* ===================== Платформа ===================== */
.dm-memphis.dm--platform { display: grid; grid-template-columns: 228px 1fr; grid-template-rows: 100%; }
.dm-memphis .mf-side { position: relative; display: flex; flex-direction: column; padding: 28px 18px 22px; background: var(--mf-ink); color: #fff; overflow: hidden; }
.dm-memphis .mf-side .mf-logo { color: #fff; }
.dm-memphis .mf-side .mf-logo__mark::before { border-color: #fff; }
.dm-memphis .mf-side__nav { display: grid; gap: 4px; margin-top: 36px; font-size: 15px; font-weight: 700; }
.dm-memphis .mf-side__nav li { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; }
.dm-memphis .mf-side__nav .mf-shape { border-color: #fff; }
.dm-memphis .mf-side__nav .is-active { background: var(--mf-yellow); color: var(--mf-ink); transform: rotate(-2deg); }
.dm-memphis .mf-side__nav .is-active .mf-shape { border-color: var(--mf-ink); }
.dm-memphis .mf-side__nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 7px; background: var(--mf-pink); color: var(--mf-ink); }
.dm-memphis .mf-side__deco { position: absolute; left: -30px; bottom: 90px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55) 1.6px, transparent 2.1px) 0 0 / 12px 12px; }
.dm-memphis .mf-side__card { position: relative; margin-top: auto; padding: 14px; background: var(--mf-teal); color: var(--mf-ink); border: 2px solid #fff; font-size: 13px; font-weight: 700; }
.dm-memphis .mf-side__card b { display: block; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 22px; }

.dm-memphis .mf-work { position: relative; padding: 26px 34px 0; min-width: 0; overflow: hidden; }
.dm-memphis .mf-work__head { display: flex; align-items: flex-end; gap: 16px; }
.dm-memphis .mf-work__head p { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dm-memphis .mf-work__head h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.05; margin-top: 4px; }
.dm-memphis .mf-work__head .mf-btn { height: 46px; }
.dm-memphis .mf-work__head .mf-btn:first-of-type { margin-left: auto; }
.dm-memphis .mf-work__head > div svg { margin-top: 2px; }

.dm-memphis .mf-filters { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.dm-memphis .mf-filters .mf-tag { height: 32px; padding: 0 14px; font-size: 13px; }
.dm-memphis .mf-filters .mf-tag.is-on { background: var(--mf-ink); color: #fff; }
.dm-memphis .mf-filters .mf-tag.is-on .mf-shape { border-color: #fff; }
.dm-memphis .mf-filters span:last-child { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--mf-muted); }

.dm-memphis .mf-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 16px; margin-top: 18px; }
.dm-memphis .mf-kpi { position: relative; padding: 14px 16px; border: 2px solid var(--mf-ink); overflow: hidden; }
.dm-memphis .mf-kpi span { position: relative; font-size: 13px; font-weight: 700; }
.dm-memphis .mf-kpi b { position: relative; display: block; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 30px; line-height: 1.15; margin-top: 6px; }
.dm-memphis .mf-kpi small { position: relative; font-size: 12px; font-weight: 800; }
.dm-memphis .mf-kpi::before { content: ""; position: absolute; right: -18px; top: -18px; width: 74px; height: 74px; }
.dm-memphis .mf-kpi--pink { background: var(--mf-pink); }
.dm-memphis .mf-kpi--pink::before { border-radius: 50%; background: var(--mf-dots); background-color: #fff; border: 2px solid var(--mf-ink); }
.dm-memphis .mf-kpi--teal { background: var(--mf-teal); }
.dm-memphis .mf-kpi--teal::before { background: var(--mf-stripes); background-color: var(--mf-yellow); border: 2px solid var(--mf-ink); transform: rotate(20deg); }
.dm-memphis .mf-kpi--yellow { background: var(--mf-yellow); }
.dm-memphis .mf-kpi--yellow::before { width: 0; height: 0; right: 10px; top: 10px; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--mf-blue); }
.dm-memphis .mf-kpi--lilac { background: var(--mf-lilac); }
.dm-memphis .mf-kpi--lilac::before { border-radius: 74px 74px 0 0; height: 37px; top: 8px; right: -10px; background: var(--mf-red); border: 2px solid var(--mf-ink); }

.dm-memphis .mf-grid { display: grid; grid-template-columns: 1fr 330px; gap: 20px; margin-top: 20px; }
.dm-memphis .mf-panel { position: relative; border: 2px solid var(--mf-ink); background: #fff; }
.dm-memphis .mf-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--mf-ink); }
.dm-memphis .mf-panel__head h2 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 17px; }
.dm-memphis .mf-panel__head span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mf-muted); }

.dm-memphis .mf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-memphis .mf-table th { text-align: left; padding: 9px 16px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--mf-dots); background-color: #fff; border-bottom: 2px solid var(--mf-ink); }
.dm-memphis .mf-table th span { background: #fff; padding: 0 4px; }
.dm-memphis .mf-table td { padding: 0 16px; height: 44px; white-space: nowrap; border-bottom: 1.5px dashed var(--mf-ink); font-weight: 600; }
.dm-memphis .mf-table tr:last-child td { border-bottom: 0; }
.dm-memphis .mf-table td b { font-weight: 800; }
.dm-memphis .mf-table .mf-cat { display: inline-flex; align-items: center; gap: 8px; }
.dm-memphis .mf-table .mf-num { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 14px; text-align: right; }
.dm-memphis .mf-status-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 800; border: 2px solid var(--mf-ink); }
.dm-memphis .mf-status-tag--ok { background: var(--mf-teal); border-radius: 13px; }
.dm-memphis .mf-status-tag--wait { background: var(--mf-yellow); transform: rotate(-2deg); }
.dm-memphis .mf-status-tag--new { background: var(--mf-pink); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); border: 0; padding: 0 16px; }

.dm-memphis .mf-side-col { display: grid; gap: 20px; align-content: start; }
.dm-memphis .mf-bars { display: flex; align-items: flex-end; gap: 12px; height: 132px; padding: 16px 16px 0; }
.dm-memphis .mf-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.dm-memphis .mf-bars i { width: 100%; border: 2px solid var(--mf-ink); }
.dm-memphis .mf-bars div:nth-child(1) i { background: var(--mf-dots); background-color: var(--mf-pink); }
.dm-memphis .mf-bars div:nth-child(2) i { background: var(--mf-stripes); background-color: var(--mf-teal); }
.dm-memphis .mf-bars div:nth-child(3) i { background: var(--mf-grid); background-color: var(--mf-yellow); }
.dm-memphis .mf-bars div:nth-child(4) i { background: var(--mf-lilac); border-radius: 40px 40px 0 0; }
.dm-memphis .mf-bars-foot { display: flex; justify-content: space-between; padding: 8px 16px 12px; font-size: 12px; font-weight: 700; color: var(--mf-muted); }
.dm-memphis .mf-bars-foot b { color: var(--mf-ink); }

.dm-memphis .mf-map { position: relative; height: 128px; margin: 12px 14px 14px; background: var(--mf-bg); border: 2px dashed var(--mf-ink); }
.dm-memphis .mf-map > span { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 2px solid var(--mf-ink); }
.dm-memphis .mf-map .m1 { left: 10px; top: 10px; width: 92px; height: 48px; background: var(--mf-pink); }
.dm-memphis .mf-map .m2 { left: 114px; top: 8px; width: 56px; height: 56px; border-radius: 50%; background: var(--mf-teal); }
.dm-memphis .mf-map .m3 { right: 10px; top: 10px; width: 96px; height: 62px; background: var(--mf-stripes); background-color: var(--mf-yellow); }
.dm-memphis .mf-map .m3 em { font-style: normal; background: #fff; padding: 1px 4px; }
.dm-memphis .mf-map .m4 { left: 16px; bottom: 10px; width: 140px; height: 42px; background: var(--mf-lilac); transform: skewX(-10deg); }
.dm-memphis .mf-map .m5 { right: 10px; bottom: 10px; width: 110px; height: 34px; background: #fff; }
.dm-memphis .mf-map .m6 { left: 172px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--mf-red); }

/* art-deco.css */
/* Демонстрация: Ар-деко. Все селекторы ограничены .dm-art-deco, классы с префиксом ad- */

.dm-art-deco {
  --emerald: #0f2a24;
  --emerald2: #163a32;
  --emerald3: #1d4a40;
  --black: #0b0b0a;
  --ivory: #f2ead8;
  --ivory2: #e8dcc6;
  --muted: #bfb39a;
  --gold: #c9a45c;
  --gold2: #e3c887;
  --bronze: #7a5c22;
  --ink: #1b1a17;
  --stone: #5e5543;
  --line: rgba(201, 164, 92, .5);
  --steps: polygon(0 36px, 18px 36px, 18px 18px, 36px 18px, 36px 0, calc(100% - 36px) 0, calc(100% - 36px) 18px, calc(100% - 18px) 18px, calc(100% - 18px) 36px, 100% 36px, 100% 100%, 0 100%);
  --octa: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-sizing: border-box;
  background: var(--emerald);
  color: var(--ivory);
  font-family: "Jost", "Futura", system-ui, sans-serif;
  font-weight: 400;
}

/* ----- Общие детали ----- */
.dm-art-deco .ad-display { font-family: "Poiret One", "Jost", sans-serif; font-weight: 400; }
.dm-art-deco .ad-serif { font-family: "Forum", "Times New Roman", serif; font-weight: 400; }
.dm-art-deco .ad-label {
  font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
}
.dm-art-deco .ad-rule { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.dm-art-deco .ad-rule i { flex: 1; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.dm-art-deco .ad-rule b { font-size: 11px; line-height: 1; }
.dm-art-deco .ad-diamond {
  display: inline-block; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none;
}
.dm-art-deco .ad-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 50px; padding: 0 34px;
  background: var(--gold); color: var(--black);
  font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.dm-art-deco .ad-btn--line {
  background: transparent; color: var(--gold2); clip-path: none;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--emerald), inset 0 0 0 5px var(--line);
}
.dm-art-deco .ad-chev { display: inline-flex; gap: 2px; }
.dm-art-deco .ad-chev i {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg);
}

/* Обводка ступенчатой формы: внешний слой — золото, внутренний — фон */
.dm-art-deco .ad-stepcard { background: var(--gold); clip-path: var(--steps); padding: 1px; }
.dm-art-deco .ad-stepcard__in { background: var(--emerald2); clip-path: var(--steps); height: 100%; }

/* ----- Сайт ----- */
.dm-art-deco.dm--site { padding: 28px 40px 0; }
.dm-art-deco.dm--site::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  border: 1px solid var(--line); box-shadow: inset 0 0 0 5px var(--emerald), inset 0 0 0 6px var(--line);
}
.dm-art-deco .ad-rays {
  position: absolute; left: 0; right: 0; top: 0; height: 500px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(201, 164, 92, .16) 0deg 1.2deg, transparent 1.2deg 7.5deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 100% at 50% 100%, #000 30%, transparent 78%);
}
.dm-art-deco .ad-nav {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 84px; padding: 0 36px; border-bottom: 1px solid var(--line);
}
.dm-art-deco .ad-nav__menu { display: flex; gap: 34px; font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-nav__menu--r { justify-content: flex-end; }
.dm-art-deco .ad-nav__menu .is-active { color: var(--gold2); box-shadow: 0 9px 0 -7px var(--gold); }
.dm-art-deco .ad-emblem { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dm-art-deco .ad-emblem b { font-family: "Poiret One", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .5em; margin-right: -.5em; color: var(--gold2); }

.dm-art-deco .ad-hero { position: relative; display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; height: 380px; padding: 0 22px 14px; }
.dm-art-deco .ad-pillar {
  height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 50px 0 24px; text-align: center;
  background: linear-gradient(90deg, transparent 0 46%, var(--line) 46% 47%, transparent 47% 53%, var(--line) 53% 54%, transparent 54%);
}
.dm-art-deco .ad-pillar__top { width: 74px; height: 38px; clip-path: polygon(0 100%, 0 66%, 16% 66%, 16% 33%, 32% 33%, 32% 0, 68% 0, 68% 33%, 84% 33%, 84% 66%, 100% 66%, 100% 100%); background: var(--gold); margin-top: -50px; }
.dm-art-deco .ad-pillar__date { background: var(--emerald); padding: 10px 0; }
.dm-art-deco .ad-pillar__date b { display: block; font-family: "Forum", serif; font-weight: 400; font-size: 44px; line-height: 1; color: var(--gold2); }
.dm-art-deco .ad-pillar__date span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-hero__center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.dm-art-deco .ad-hero__center .ad-label { margin-bottom: 22px; }
.dm-art-deco .ad-title {
  font-family: "Poiret One", sans-serif; font-weight: 400; font-size: 104px; line-height: 1; letter-spacing: .22em; margin-right: -.22em;
  color: var(--gold2); text-shadow: 0 1px 0 var(--bronze);
}
.dm-art-deco .ad-sub { margin-top: 14px; font-family: "Forum", serif; font-size: 23px; line-height: 1.35; color: var(--ivory); max-width: 640px; }
.dm-art-deco .ad-hero__center .ad-rule { width: 360px; margin: 24px 0 26px; }
.dm-art-deco .ad-actions { display: flex; gap: 22px; }

.dm-art-deco .ad-decks { position: relative; padding: 0 40px; }
.dm-art-deco .ad-h2 { display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 500; letter-spacing: .4em; text-transform: uppercase; color: var(--gold2); margin-bottom: 18px; }
.dm-art-deco .ad-h2 i { flex: 1; height: 1px; background: var(--line); }
.dm-art-deco .ad-cards { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 26px; align-items: end; }
.dm-art-deco .ad-cards .ad-stepcard { height: 222px; }
.dm-art-deco .ad-cards .ad-stepcard--main { height: 244px; }
.dm-art-deco .ad-cards .ad-stepcard--main .ad-stepcard__in { background: var(--ivory); color: var(--ink); }
.dm-art-deco .ad-deck { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px 0; }
.dm-art-deco .ad-deck svg { margin-bottom: 10px; }
.dm-art-deco .ad-deck h3 { font-family: "Forum", serif; font-size: 27px; line-height: 1.1; }
.dm-art-deco .ad-deck p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 260px; }
.dm-art-deco .ad-stepcard--main .ad-deck p { color: var(--stone); }
.dm-art-deco .ad-deck .ad-price { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.dm-art-deco .ad-stepcard--main .ad-deck .ad-price { color: var(--bronze); }

/* ----- Приложение ----- */
.dm-art-deco.dm--app { display: flex; flex-direction: column; background: var(--emerald); }
.dm-art-deco.dm--app .ad-rays { height: 330px; background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(201, 164, 92, .14) 0deg 1.5deg, transparent 1.5deg 9deg); }
.dm-art-deco.dm--app > *:not(.ad-rays) { position: relative; }
.dm-art-deco .ad-status { display: flex; justify-content: space-between; padding: 14px 26px 0; font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.dm-art-deco .ad-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-art-deco .ad-status__icons i { width: 15px; height: 9px; background: var(--ivory); }
.dm-art-deco .ad-appbar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 14px 20px 6px; }
.dm-art-deco .ad-appbar__icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid var(--line); transform: rotate(45deg) scale(.82); font-size: 15px; }
.dm-art-deco .ad-appbar__icon span { transform: rotate(-45deg); }
.dm-art-deco .ad-appbar__title { text-align: center; font-family: "Poiret One", sans-serif; font-size: 19px; letter-spacing: .44em; margin-right: -.44em; color: var(--gold2); }
.dm-art-deco .ad-ticket { margin: 14px 20px 0; height: 214px; }
.dm-art-deco .ad-ticket .ad-stepcard__in { display: flex; flex-direction: column; align-items: center; padding: 42px 20px 0; text-align: center; background: #0c211c; }
.dm-art-deco .ad-ticket h1 { font-family: "Forum", serif; font-size: 26px; line-height: 1.12; margin-top: 8px; }
.dm-art-deco .ad-ticket h1 em { font-style: normal; color: var(--gold); font-size: 18px; vertical-align: 3px; padding: 0 4px; }
.dm-art-deco .ad-dates { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; width: 100%; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.dm-art-deco .ad-dates div b { display: block; font-family: "Forum", serif; font-size: 28px; line-height: 1; color: var(--gold2); }
.dm-art-deco .ad-dates div span { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-dates .ad-fan { width: 64px; height: 32px; border-radius: 64px 64px 0 0; border: 1px solid var(--gold); border-bottom: 0;
  background: repeating-conic-gradient(from 270deg at 50% 100%, var(--gold) 0deg 1deg, transparent 1deg 15deg); }
.dm-art-deco .ad-section { padding: 22px 20px 0; }
.dm-art-deco .ad-section .ad-label { display: block; text-align: center; margin-bottom: 12px; }
.dm-art-deco .ad-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--gold); }
.dm-art-deco .ad-seg span { padding: 11px 0; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-seg span + span { border-left: 1px solid var(--line); }
.dm-art-deco .ad-seg .is-on { background: var(--gold); color: var(--black); font-weight: 600; }
.dm-art-deco .ad-cabins { margin-top: 14px; }
.dm-art-deco .ad-cabin { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(201, 164, 92, .28); }
.dm-art-deco .ad-cabin b { display: block; font-family: "Forum", serif; font-weight: 400; font-size: 19px; line-height: 1.2; }
.dm-art-deco .ad-cabin small { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.dm-art-deco .ad-cabin strong { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--gold2); }
.dm-art-deco .ad-cabin.is-on .ad-diamond { box-shadow: 0 0 0 3px var(--emerald), 0 0 0 4px var(--gold); }
.dm-art-deco .ad-cabin:not(.is-on) .ad-diamond { background: transparent; border: 1px solid var(--gold); }
.dm-art-deco .ad-cta { margin: 18px 20px 0; }
.dm-art-deco .ad-cta .ad-btn { display: flex; width: 100%; height: 54px; font-size: 12px; }
.dm-art-deco .ad-tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 8px 24px; border-top: 1px solid var(--line); background: var(--black); }
.dm-art-deco .ad-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-tabbar svg { color: var(--muted); }
.dm-art-deco .ad-tabbar .is-active { color: var(--gold2); }
.dm-art-deco .ad-tabbar .is-active svg { color: var(--gold); }

/* ----- Веб-платформа ----- */
.dm-art-deco.dm--platform { display: grid; grid-template-columns: 236px 1fr; background: var(--ivory); color: var(--ink); }
.dm-art-deco .ad-side { position: relative; display: flex; flex-direction: column; background: var(--black); color: var(--ivory); padding: 28px 0 24px; border-right: 4px double var(--gold); }
.dm-art-deco .ad-side__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px 22px; margin: 0 20px; border-bottom: 1px solid var(--line); }
.dm-art-deco .ad-side__brand b { font-family: "Poiret One", sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .42em; margin-right: -.42em; color: var(--gold2); }
.dm-art-deco .ad-side__brand span { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-side__nav { margin-top: 22px; display: grid; gap: 2px; }
.dm-art-deco .ad-side__nav li { display: flex; align-items: center; gap: 14px; padding: 11px 28px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.dm-art-deco .ad-side__nav li .ad-diamond { width: 6px; height: 6px; background: transparent; border: 1px solid var(--line); }
.dm-art-deco .ad-side__nav .is-active { color: var(--black); background: var(--gold); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); margin-right: 14px; font-weight: 600; }
.dm-art-deco .ad-side__nav .is-active .ad-diamond { background: var(--black); border-color: var(--black); }
.dm-art-deco .ad-captain { margin: auto 20px 0; padding: 14px; text-align: center; border: 1px solid var(--line); box-shadow: inset 0 0 0 3px var(--black), inset 0 0 0 4px rgba(201, 164, 92, .3); }
.dm-art-deco .ad-captain b { display: block; font-family: "Forum", serif; font-weight: 400; font-size: 18px; color: var(--ivory); }
.dm-art-deco .ad-captain span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.dm-art-deco .ad-work { padding: 26px 40px 0; }
.dm-art-deco .ad-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; }
.dm-art-deco .ad-head__l, .dm-art-deco .ad-head__r { display: flex; align-items: center; gap: 10px; }
.dm-art-deco .ad-head__r { justify-content: flex-end; }
.dm-art-deco .ad-head__title { text-align: center; }
.dm-art-deco .ad-head__title h1 { font-family: "Poiret One", sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: .24em; margin-right: -.24em; text-transform: uppercase; color: var(--ink); }
.dm-art-deco .ad-head__title p { margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--bronze); }
.dm-art-deco .ad-chip { padding: 7px 14px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); border: 1px solid #c9b994; }
.dm-art-deco .ad-chip.is-on { background: var(--ink); color: var(--gold2); border-color: var(--ink); }
.dm-art-deco.dm--platform .ad-btn { height: 40px; padding: 0 24px; font-size: 11px; background: var(--emerald); color: var(--gold2); }
.dm-art-deco.dm--platform .ad-rule { margin: 18px 0 20px; color: var(--bronze); }
.dm-art-deco.dm--platform .ad-rule i { border-color: #b89a5a; }

.dm-art-deco .ad-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dm-art-deco .ad-kpi { background: var(--bronze); clip-path: var(--octa); padding: 1px; }
.dm-art-deco .ad-kpi__in { clip-path: var(--octa); background: var(--ivory); padding: 16px 18px 14px; text-align: center; box-shadow: inset 0 0 0 4px var(--ivory), inset 0 0 0 5px #d9c9a6; }
.dm-art-deco .ad-kpi span { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--stone); }
.dm-art-deco .ad-kpi b { display: block; margin: 4px 0 2px; font-family: "Forum", serif; font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--ink); }
.dm-art-deco .ad-kpi small { font-size: 12px; color: var(--emerald3); font-weight: 500; }
.dm-art-deco .ad-kpi--dark { background: var(--gold); }
.dm-art-deco .ad-kpi--dark .ad-kpi__in { background: var(--emerald); box-shadow: inset 0 0 0 4px var(--emerald), inset 0 0 0 5px var(--line); }
.dm-art-deco .ad-kpi--dark span, .dm-art-deco .ad-kpi--dark small { color: var(--muted); }
.dm-art-deco .ad-kpi--dark b { color: var(--gold2); }

.dm-art-deco .ad-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-top: 22px; }
.dm-art-deco .ad-panel { border: 1px solid #c9b994; box-shadow: inset 0 0 0 4px var(--ivory), inset 0 0 0 5px #e1d4b7; padding: 16px 20px; background: var(--ivory); }
.dm-art-deco .ad-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dm-art-deco .ad-panel__head h2 { font-family: "Forum", serif; font-weight: 400; font-size: 22px; }
.dm-art-deco .ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dm-art-deco .ad-table th { padding: 8px 8px 8px 0; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); border-bottom: 3px double #b89a5a; }
.dm-art-deco .ad-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid #ddcfb1; color: var(--ink); white-space: nowrap; }
.dm-art-deco .ad-table td:first-child { font-family: "Forum", serif; font-size: 17px; }
.dm-art-deco .ad-table td small { color: var(--stone); font-size: 12px; }
.dm-art-deco .ad-bar { display: inline-block; width: 78px; height: 6px; background: #e1d4b7; vertical-align: middle; margin-right: 8px; }
.dm-art-deco .ad-bar i { display: block; height: 100%; background: var(--emerald); }
.dm-art-deco .ad-st { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dm-art-deco .ad-st::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; }
.dm-art-deco .ad-st--go { color: #1d5b48; }
.dm-art-deco .ad-st--wait { color: var(--bronze); }
.dm-art-deco .ad-st--full { color: #8e2a22; }

.dm-art-deco .ad-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dm-art-deco .ad-gauge__fan {
  position: relative; width: 236px; height: 118px; margin-top: 8px; border-radius: 118px 118px 0 0; overflow: hidden;
  background: conic-gradient(from 270deg at 50% 100%, var(--emerald) 0deg 166deg, #e1d4b7 166deg 180deg, transparent 180deg);
}
.dm-art-deco .ad-gauge__fan::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from 270deg at 50% 100%, transparent 0deg 10deg, var(--ivory) 10deg 12deg);
}
.dm-art-deco .ad-gauge__fan::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 112px; height: 56px; transform: translateX(-50%);
  border-radius: 56px 56px 0 0; background: var(--ivory); box-shadow: 0 0 0 1px var(--gold);
}
.dm-art-deco .ad-gauge b { font-family: "Forum", serif; font-weight: 400; font-size: 38px; line-height: 1; margin-top: -40px; position: relative; color: var(--ink); }
.dm-art-deco .ad-gauge > span { margin-top: 8px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--stone); }
.dm-art-deco .ad-legend { width: 100%; margin-top: 14px; display: grid; gap: 7px; font-size: 13px; }
.dm-art-deco .ad-legend li { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #ddcfb1; }
.dm-art-deco .ad-legend li b { font-family: "Forum", serif; font-size: 17px; font-weight: 400; margin: 0; }

.dm-art-deco .ad-frieze { display: flex; align-items: center; gap: 18px; margin-top: 18px; height: 42px; padding: 0 20px; background: var(--emerald); color: var(--gold2); }
.dm-art-deco .ad-frieze__pattern { flex: 1; height: 14px;
  background: linear-gradient(135deg, var(--emerald) 0 35%, transparent 35% 65%, var(--emerald) 65%) 0 0 / 14px 14px,
              linear-gradient(225deg, var(--emerald) 0 35%, transparent 35% 65%, var(--emerald) 65%) 0 0 / 14px 14px, var(--gold); }
.dm-art-deco .ad-frieze span { font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.dm-art-deco .ad-frieze b { font-family: "Forum", serif; font-weight: 400; font-size: 19px; letter-spacing: .04em; }

/* cyberpunk.css */
/* Демонстрация: Киберпанк. Все селекторы ограничены .dm-cyberpunk, классы с префиксом cp- */

.dm-cyberpunk {
  --void: #07070b;
  --panel: #101018;
  --panel2: #181822;
  --text: #ececf1;
  --muted: #9d9db5;
  --acid: #f3e600;
  --pink: #ff2a6d;
  --cyan: #05d9e8;
  --line: rgba(5, 217, 232, .32);
  --line2: rgba(236, 236, 241, .14);
  --cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --cut-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --hazard: repeating-linear-gradient(-45deg, var(--acid) 0 9px, #0b0b0b 9px 18px);
  box-sizing: border-box;
  background: var(--void);
  color: var(--text);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
}

/* ----- Общие детали ----- */
.dm-cyberpunk .cp-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }
.dm-cyberpunk .cp-scan {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}
.dm-cyberpunk .cp-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(5, 217, 232, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(5, 217, 232, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(ellipse 50% 60% at 85% 30%, rgba(255, 42, 109, .16), transparent 70%);
}
.dm-cyberpunk .cp-bar { position: absolute; z-index: 5; height: 3px; pointer-events: none; }
.dm-cyberpunk .cp-glitch { position: relative; display: inline-block; }
.dm-cyberpunk .cp-glitch::before, .dm-cyberpunk .cp-glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
}
.dm-cyberpunk .cp-glitch::before { color: var(--pink); transform: translateX(-4px); clip-path: inset(20% 0 66% 0); animation: cp-shift 4.2s steps(1) infinite; }
.dm-cyberpunk .cp-glitch::after { color: var(--cyan); transform: translateX(4px); clip-path: inset(72% 0 16% 0); }
@keyframes cp-shift {
  0%, 92% { transform: translateX(-4px); clip-path: inset(20% 0 66% 0); }
  94% { transform: translateX(6px); clip-path: inset(40% 0 38% 0); }
  97% { transform: translateX(-2px); clip-path: inset(70% 0 4% 0); }
}
@keyframes cp-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.dm-cyberpunk .cp-tag {
  display: inline-block; padding: 1px 6px; background: var(--acid); color: #0b0b0b;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.dm-cyberpunk .cp-tag--pink { background: var(--pink); color: #0b0b0b; }
.dm-cyberpunk .cp-tag--line { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.dm-cyberpunk .cp-kana { font-family: "Dela Gothic One", sans-serif; font-weight: 400; }
.dm-cyberpunk .cp-hazard { display: block; background: var(--hazard); }
.dm-cyberpunk .cp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 42px; padding: 0 22px; background: var(--acid); color: #0b0b0b;
  font-size: 17px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset -4px 0 0 var(--pink);
}
.dm-cyberpunk .cp-btn--ghost {
  background: transparent; color: var(--cyan); clip-path: none; box-shadow: inset 0 0 0 1px var(--cyan), inset 3px 0 0 var(--cyan);
}
.dm-cyberpunk .cp-barcode {
  display: block; height: 26px;
  background: linear-gradient(90deg, var(--text) 0 2px, transparent 2px 4px, var(--text) 4px 5px, transparent 5px 8px, var(--text) 8px 11px, transparent 11px 12px, var(--text) 12px 13px, transparent 13px 16px, var(--text) 16px 17px, transparent 17px 19px, var(--text) 19px 22px, transparent 22px 24px) 0 0 / 24px 100%;
}
.dm-cyberpunk .cp-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.dm-cyberpunk .cp-signal i { width: 4px; background: var(--cyan); }
.dm-cyberpunk .cp-signal i:nth-child(1) { height: 4px; }
.dm-cyberpunk .cp-signal i:nth-child(2) { height: 7px; }
.dm-cyberpunk .cp-signal i:nth-child(3) { height: 10px; }
.dm-cyberpunk .cp-signal i:nth-child(4) { height: 14px; }
.dm-cyberpunk .cp-signal i.is-off { background: var(--line2); }
.dm-cyberpunk .cp-signal--low i { background: var(--pink); }

/* ----- Сайт ----- */
.dm-cyberpunk .cp-ticker {
  position: relative; z-index: 2; display: flex; align-items: center; height: 30px; background: var(--acid); color: #0b0b0b;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.dm-cyberpunk .cp-ticker .cp-hazard { width: 90px; height: 100%; flex: none; background: repeating-linear-gradient(-45deg, #0b0b0b 0 9px, var(--acid) 9px 18px); }
.dm-cyberpunk .cp-ticker__txt { padding: 0 18px; flex: 1; overflow: hidden; }
.dm-cyberpunk .cp-ticker__id { flex: none; height: 100%; display: flex; align-items: center; padding: 0 16px; background: #0b0b0b; color: var(--acid); }

.dm-cyberpunk .cp-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 30px; height: 70px; padding: 0 36px; border-bottom: 1px solid var(--line); }
.dm-cyberpunk .cp-logo { display: flex; align-items: baseline; gap: 10px; }
.dm-cyberpunk .cp-logo b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 30px; line-height: 1; color: var(--text); letter-spacing: .02em; }
.dm-cyberpunk .cp-logo i { font-style: normal; font-family: "Dela Gothic One", sans-serif; font-size: 13px; color: var(--pink); }
.dm-cyberpunk .cp-menu { display: flex; gap: 26px; margin-left: 22px; font-size: 19px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dm-cyberpunk .cp-menu em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--cyan); margin-right: 5px; vertical-align: 6px; }
.dm-cyberpunk .cp-menu .is-active { color: var(--acid); box-shadow: 0 25px 0 -22px var(--acid); }
.dm-cyberpunk .cp-nav .cp-btn--ghost { margin-left: auto; }

.dm-cyberpunk .cp-hero { position: relative; z-index: 2; display: grid; grid-template-columns: 54px 1fr 340px; gap: 30px; height: 468px; padding: 26px 36px 0 0; }
.dm-cyberpunk .cp-kana-col {
  writing-mode: vertical-rl; display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 22px; background: var(--pink); color: #0b0b0b;
  font-family: "Dela Gothic One", sans-serif; font-size: 22px; letter-spacing: .12em;
}
.dm-cyberpunk .cp-kana-col small { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em; padding-top: 14px; }
.dm-cyberpunk .cp-kicker { display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; color: var(--cyan); }
.dm-cyberpunk .cp-h1 {
  margin-top: 14px; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 76px; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; color: var(--text);
}
.dm-cyberpunk .cp-h1 mark { background: var(--acid); color: #0b0b0b; padding: 0 10px; box-shadow: 6px 6px 0 var(--pink); }
.dm-cyberpunk .cp-lead { margin-top: 20px; max-width: 560px; font-size: 21px; font-weight: 500; line-height: 1.3; color: #c9c9d6; }
.dm-cyberpunk .cp-actions { display: flex; gap: 14px; margin-top: 22px; }
.dm-cyberpunk .cp-btn--big { height: 52px; padding: 0 28px; font-size: 20px; }
.dm-cyberpunk .cp-actions .cp-btn--ghost { height: 52px; font-size: 18px; }
.dm-cyberpunk .cp-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.dm-cyberpunk .cp-stats div { padding: 10px 28px 0 0; margin-right: 28px; border-right: 1px dashed var(--line2); }
.dm-cyberpunk .cp-stats div:last-child { border-right: 0; }
.dm-cyberpunk .cp-stats b { display: block; font-size: 38px; font-weight: 900; line-height: 1; color: var(--acid); }
.dm-cyberpunk .cp-stats span { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--muted); }

.dm-cyberpunk .cp-id { position: relative; align-self: start; background: var(--cyan); clip-path: var(--cut); padding: 1px; }
.dm-cyberpunk .cp-id__in { clip-path: var(--cut); background: var(--panel); padding: 0 0 14px; }
.dm-cyberpunk .cp-id__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--cyan); color: #0b0b0b; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 700; }
.dm-cyberpunk .cp-live { display: inline-flex; align-items: center; gap: 6px; }
.dm-cyberpunk .cp-live::before { content: ""; width: 8px; height: 8px; background: var(--pink); animation: cp-blink 1.6s steps(1) infinite; }
.dm-cyberpunk .cp-id__body { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
.dm-cyberpunk .cp-avatar { position: relative; height: 128px; background: #0b0b12; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.dm-cyberpunk .cp-avatar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(5, 217, 232, .14) 0 1px, transparent 1px 4px); }
.dm-cyberpunk .cp-avatar svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.dm-cyberpunk .cp-id__name { font-family: "Dela Gothic One", sans-serif; font-size: 24px; line-height: 1.05; color: var(--acid); }
.dm-cyberpunk .cp-id__name small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); margin-top: 4px; }
.dm-cyberpunk .cp-kv { margin-top: 8px; display: grid; gap: 3px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.dm-cyberpunk .cp-kv li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line2); padding-bottom: 2px; }
.dm-cyberpunk .cp-kv li span { color: var(--muted); }
.dm-cyberpunk .cp-id__foot { display: flex; gap: 12px; align-items: center; padding: 0 14px; }
.dm-cyberpunk .cp-id__foot .cp-barcode { flex: 1; }
.dm-cyberpunk .cp-id__strip { margin: 12px 14px 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--hazard); }
.dm-cyberpunk .cp-id__strip span { background: #0b0b0b; color: var(--acid); padding: 1px 8px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; }
.dm-cyberpunk .cp-id-meta { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); line-height: 1.6; }
.dm-cyberpunk .cp-id-meta b { color: var(--pink); font-weight: 700; }

.dm-cyberpunk .cp-sectors { position: relative; z-index: 2; padding: 0 36px; }
.dm-cyberpunk .cp-sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 22px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.dm-cyberpunk .cp-sec-head i { flex: 1; height: 1px; background: var(--line); }
.dm-cyberpunk .cp-sec-head span { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.dm-cyberpunk .cp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dm-cyberpunk .cp-card { background: var(--panel2); clip-path: var(--cut-sm); border-top: 3px solid var(--cyan); padding: 12px 14px 14px; }
.dm-cyberpunk .cp-card__top { display: flex; justify-content: space-between; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.dm-cyberpunk .cp-card h3 { margin-top: 6px; font-size: 26px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.dm-cyberpunk .cp-card h3 small { font-family: "Dela Gothic One", sans-serif; font-size: 14px; font-weight: 400; color: var(--pink); margin-left: 6px; vertical-align: 4px; }
.dm-cyberpunk .cp-card__eta { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.dm-cyberpunk .cp-card__eta b { font-family: "IBM Plex Mono", monospace; font-size: 30px; font-weight: 700; line-height: 1; color: var(--cyan); }
.dm-cyberpunk .cp-card__eta span { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.dm-cyberpunk .cp-meter { margin-top: 10px; height: 8px; background: repeating-linear-gradient(90deg, var(--line2) 0 6px, transparent 6px 8px); }
.dm-cyberpunk .cp-meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 8px); }
.dm-cyberpunk .cp-card--warn { border-top-color: var(--pink); }
.dm-cyberpunk .cp-card--warn .cp-card__eta b { color: var(--pink); }
.dm-cyberpunk .cp-card--warn .cp-meter i { background: repeating-linear-gradient(90deg, var(--pink) 0 6px, transparent 6px 8px); }
.dm-cyberpunk .cp-card--hot { border-top-color: var(--acid); }
.dm-cyberpunk .cp-card--hot .cp-card__eta b { color: var(--acid); }
.dm-cyberpunk .cp-card--hot .cp-meter i { background: repeating-linear-gradient(90deg, var(--acid) 0 6px, transparent 6px 8px); }
.dm-cyberpunk .cp-card__foot { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.dm-cyberpunk .cp-card__foot b { color: var(--text); font-weight: 700; }

/* ----- Приложение ----- */
.dm-cyberpunk.dm--app { display: flex; flex-direction: column; }
.dm-cyberpunk.dm--app > *:not(.cp-scan):not(.cp-grid-bg):not(.cp-bar) { position: relative; z-index: 2; }
.dm-cyberpunk .cp-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 700; }
.dm-cyberpunk .cp-status span:last-child { display: flex; gap: 8px; align-items: center; color: var(--cyan); }
.dm-cyberpunk .cp-appbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; }
.dm-cyberpunk .cp-appbar .cp-logo b { font-size: 24px; }
.dm-cyberpunk .cp-alert { display: flex; align-items: stretch; margin: 0 18px; background: #0b0b0b; box-shadow: inset 0 0 0 1px var(--acid); }
.dm-cyberpunk .cp-alert .cp-hazard { width: 34px; flex: none; }
.dm-cyberpunk .cp-alert p { padding: 7px 10px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--acid); }
.dm-cyberpunk .cp-map { position: relative; margin: 12px 18px 0; height: 240px; background: #0b0b12; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; clip-path: var(--cut); }
.dm-cyberpunk .cp-map svg { position: absolute; inset: 0; }
.dm-cyberpunk .cp-map__eta { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px 4px; background: var(--acid); color: #0b0b0b; }
.dm-cyberpunk .cp-map__eta span { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; }
.dm-cyberpunk .cp-map__eta b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 30px; line-height: 1; }
.dm-cyberpunk .cp-map__coord { position: absolute; right: 22px; top: 10px; text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--cyan); line-height: 1.4; }
.dm-cyberpunk .cp-courier { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; margin: 12px 18px 0; padding: 10px 12px; background: var(--panel2); border-left: 3px solid var(--pink); }
.dm-cyberpunk .cp-courier__ava { position: relative; width: 52px; height: 52px; background: #0b0b12; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.dm-cyberpunk .cp-courier__ava svg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.dm-cyberpunk .cp-courier b { display: block; font-size: 22px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.dm-cyberpunk .cp-courier small { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.dm-cyberpunk .cp-courier__act { display: flex; gap: 6px; }
.dm-cyberpunk .cp-courier__act span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; }
.dm-cyberpunk .cp-steps { margin: 12px 18px 0; display: grid; gap: 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.dm-cyberpunk .cp-steps li { display: grid; grid-template-columns: 44px 16px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dotted var(--line2); color: var(--muted); }
.dm-cyberpunk .cp-steps li i { width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--muted); }
.dm-cyberpunk .cp-steps li.is-done { color: var(--text); }
.dm-cyberpunk .cp-steps li.is-done i { background: var(--cyan); box-shadow: none; }
.dm-cyberpunk .cp-steps li.is-now { color: var(--acid); }
.dm-cyberpunk .cp-steps li.is-now i { background: var(--acid); box-shadow: 0 0 0 3px rgba(243, 230, 0, .25); }
.dm-cyberpunk .cp-steps li em { font-style: normal; font-size: 11px; }
.dm-cyberpunk .cp-app-cta { margin: 14px 18px 0; }
.dm-cyberpunk .cp-app-cta .cp-btn { display: flex; width: 100%; height: 52px; font-size: 20px; }
.dm-cyberpunk .cp-tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 12px 22px; background: #0b0b0b; border-top: 1px solid var(--line); }
.dm-cyberpunk .cp-tabbar span { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--muted); transform: skewX(-12deg); }
.dm-cyberpunk .cp-tabbar span i { font-style: normal; font-family: "Dela Gothic One", sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); }
.dm-cyberpunk .cp-tabbar .is-active { background: var(--acid); color: #0b0b0b; }
.dm-cyberpunk .cp-tabbar .is-active i { color: #0b0b0b; }

/* ----- Веб-платформа ----- */
.dm-cyberpunk.dm--platform { display: grid; grid-template-columns: 74px 1fr; }
.dm-cyberpunk .cp-rail { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; background: #0b0b0b; border-right: 1px solid var(--line); }
.dm-cyberpunk .cp-rail__logo { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Dela Gothic One", sans-serif; font-size: 22px; color: var(--acid); margin-bottom: 14px; }
.dm-cyberpunk .cp-rail li { width: 56px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; color: var(--muted); }
.dm-cyberpunk .cp-rail li span { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 14px; }
.dm-cyberpunk .cp-rail li.is-active { background: var(--acid); color: #0b0b0b; clip-path: var(--cut-sm); }
.dm-cyberpunk .cp-rail__foot { margin-top: auto; width: 40px; height: 120px; }

.dm-cyberpunk .cp-desk { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 0 22px 18px; min-width: 0; }
.dm-cyberpunk .cp-top { display: flex; align-items: center; gap: 18px; height: 62px; border-bottom: 1px solid var(--line); }
.dm-cyberpunk .cp-top h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; }
.dm-cyberpunk .cp-top h1 small { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--cyan); margin-left: 8px; vertical-align: 4px; }
.dm-cyberpunk .cp-top__alert { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 30px; background: rgba(255, 42, 109, .12); box-shadow: inset 0 0 0 1px var(--pink); font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #ff7fa4; }
.dm-cyberpunk .cp-top__user { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); text-align: right; line-height: 1.3; }
.dm-cyberpunk .cp-top__user b { color: var(--acid); }

.dm-cyberpunk .cp-kpis { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 10px; margin-top: 14px; }
.dm-cyberpunk .cp-kpi { position: relative; background: var(--panel); clip-path: var(--cut-sm); padding: 10px 14px 10px; border-left: 3px solid var(--cyan); }
.dm-cyberpunk .cp-kpi span { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }
.dm-cyberpunk .cp-kpi b { display: block; font-size: 46px; font-weight: 900; line-height: .95; margin-top: 2px; }
.dm-cyberpunk .cp-kpi small { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--cyan); }
.dm-cyberpunk .cp-kpi--acid b { color: var(--acid); }
.dm-cyberpunk .cp-kpi--alarm { border-left: 0; padding-left: 26px; background: linear-gradient(90deg, transparent 0 12px, var(--panel) 12px), var(--hazard); }
.dm-cyberpunk .cp-kpi--alarm b, .dm-cyberpunk .cp-kpi--alarm small { color: var(--pink); }
.dm-cyberpunk .cp-spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 6px; }
.dm-cyberpunk .cp-spark i { flex: 1; background: var(--cyan); opacity: .85; }
.dm-cyberpunk .cp-spark i.is-hot { background: var(--pink); opacity: 1; }

.dm-cyberpunk .cp-filters { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.dm-cyberpunk .cp-filters span { padding: 4px 12px; font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line2); }
.dm-cyberpunk .cp-filters span.is-on { background: var(--cyan); color: #0b0b0b; box-shadow: none; }
.dm-cyberpunk .cp-filters em { margin-left: auto; font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); }

.dm-cyberpunk .cp-main { flex: 1; display: grid; grid-template-columns: 1fr 340px; gap: 14px; margin-top: 10px; min-height: 0; }
.dm-cyberpunk .cp-panel { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line2); padding: 10px 14px; min-height: 0; overflow: hidden; }
.dm-cyberpunk .cp-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 19px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.dm-cyberpunk .cp-panel__head span { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; }
.dm-cyberpunk .cp-table { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.dm-cyberpunk .cp-table th { padding: 5px 8px 5px 0; text-align: left; font-size: 11px; font-weight: 500; color: var(--cyan); border-bottom: 1px solid var(--line); }
.dm-cyberpunk .cp-table td { padding: 6px 8px 6px 0; border-bottom: 1px dotted var(--line2); white-space: nowrap; }
.dm-cyberpunk .cp-table td:nth-child(2) { font-family: "Sofia Sans Extra Condensed", sans-serif; font-size: 17px; font-weight: 800; text-transform: uppercase; }
.dm-cyberpunk .cp-table tr.is-alarm td { background: rgba(255, 42, 109, .1); }
.dm-cyberpunk .cp-table tr.is-alarm td:first-child { box-shadow: inset 3px 0 0 var(--pink); padding-left: 6px; }
.dm-cyberpunk .cp-st { display: inline-block; padding: 0 6px; font-size: 11px; font-weight: 700; }
.dm-cyberpunk .cp-st--go { background: var(--cyan); color: #0b0b0b; }
.dm-cyberpunk .cp-st--idle { box-shadow: inset 0 0 0 1px var(--muted); color: var(--muted); }
.dm-cyberpunk .cp-st--alarm { background: var(--pink); color: #0b0b0b; }
.dm-cyberpunk .cp-st--load { background: var(--acid); color: #0b0b0b; }

.dm-cyberpunk .cp-side { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-height: 0; }
.dm-cyberpunk .cp-heat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.dm-cyberpunk .cp-heat i { height: 34px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; color: #0b0b0b; }
.dm-cyberpunk .cp-heat .h0 { background: #1d1d2a; color: var(--muted); }
.dm-cyberpunk .cp-heat .h1 { background: #0b5b63; color: var(--text); }
.dm-cyberpunk .cp-heat .h2 { background: var(--cyan); }
.dm-cyberpunk .cp-heat .h3 { background: var(--acid); }
.dm-cyberpunk .cp-heat .h4 { background: var(--pink); }
.dm-cyberpunk .cp-log { font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.75; color: var(--muted); }
.dm-cyberpunk .cp-log li b { color: var(--cyan); font-weight: 500; }
.dm-cyberpunk .cp-log li.is-warn { color: #ff7fa4; }
.dm-cyberpunk .cp-log li.is-ok { color: var(--text); }
.dm-cyberpunk .cp-log li.is-cursor::after { content: "_"; color: var(--acid); animation: cp-blink 1s steps(1) infinite; }

/* material.css */
/* Демонстрация: Material Design (Material You). Все селекторы ограничены .dm-material.
   Тональная схема построена из одного исходного цвета (зелёный #4C7F3E). */

.dm-material {
  --md-primary: #3b6939;
  --md-on-primary: #ffffff;
  --md-pc: #bcf0b4;
  --md-on-pc: #002105;
  --md-secondary: #52634f;
  --md-sec-c: #d5e8cf;
  --md-on-sec-c: #101f10;
  --md-tertiary: #38656a;
  --md-ter-c: #bcebf0;
  --md-on-ter-c: #002023;
  --md-error: #ba1a1a;
  --md-err-c: #ffdad6;
  --md-on-err-c: #410002;
  --md-surface: #f7fbf1;
  --md-sf-low: #f1f5eb;
  --md-sf: #ebefe5;
  --md-sf-high: #e5e9e0;
  --md-sf-highest: #e0e4da;
  --md-on-surface: #181d17;
  --md-osv: #42493f;
  --md-outline: #72796f;
  --md-ov: #c2c8bc;
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: "Roboto Flex", "Roboto", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .01em;
}
.dm-material svg { fill: currentColor; }

/* ---------- Типографическая шкала ---------- */
.dm-material .md-headline { font-size: 24px; line-height: 32px; font-weight: 400; }
.dm-material .md-headline-l { font-size: 32px; line-height: 40px; font-weight: 400; }
.dm-material .md-title-m { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .01em; }
.dm-material .md-title-s { font-size: 14px; line-height: 20px; font-weight: 500; }
.dm-material .md-label-m { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .04em; }
.dm-material .md-body-s { font-size: 12px; line-height: 16px; color: var(--md-osv); letter-spacing: .02em; }
.dm-material .md-overline { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--md-on-sec-c); opacity: .85; }
.dm-material .md-muted { color: var(--md-osv); }

/* ---------- Общие компоненты ---------- */
.dm-material .md-icobtn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: var(--md-osv);
}
.dm-material .md-badge { position: absolute; top: 12px; right: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--md-error); }
.dm-material .md-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--md-ter-c); color: var(--md-on-ter-c); font-weight: 500; font-size: 14px;
}
.dm-material .md-avatar--sm { width: 32px; height: 32px; font-size: 12px; margin: 0 8px; }

.dm-material .md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.dm-material .md-btn--filled { background: var(--md-primary); color: var(--md-on-primary); }
.dm-material .md-btn--tonal { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-btn--outlined-pc { color: var(--md-on-pc); box-shadow: inset 0 0 0 1px var(--md-outline); }
.dm-material .md-btn--text { padding: 0 12px; color: var(--md-primary); }
.dm-material .md-btn--sm { height: 36px; padding: 0 18px; }
.dm-material .md-btn--text.md-btn--sm { padding: 0 10px; }
.dm-material .md-actions { display: flex; gap: 12px; align-items: center; }

.dm-material .md-chips { display: flex; gap: 8px; flex-wrap: nowrap; }
.dm-material .md-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--md-osv);
  box-shadow: inset 0 0 0 1px var(--md-ov); white-space: nowrap;
}
.dm-material .md-chip svg { flex: none; }
.dm-material .md-chip--filter.is-on { background: var(--md-sec-c); color: var(--md-on-sec-c); box-shadow: none; padding-left: 8px; }
.dm-material .md-chip--filter svg:last-child:not(:first-child) { margin-right: -8px; }
.dm-material .md-chip--input { padding-right: 8px; background: var(--md-sec-c); color: var(--md-on-sec-c); box-shadow: none; }
.dm-material .md-chip--assist { padding-left: 8px; }
.dm-material .md-chip--onpc { color: var(--md-on-pc); box-shadow: inset 0 0 0 1px rgba(0, 33, 5, .32); background: rgba(255, 255, 255, .45); }

.dm-material .md-searchbar {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 16px; border-radius: 28px;
  background: var(--md-sf-high); color: var(--md-osv); font-size: 16px;
}
.dm-material .md-searchbar span { flex: 1; }

.dm-material .md-seg { display: inline-flex; height: 32px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--md-outline); overflow: hidden; }
.dm-material .md-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.dm-material .md-seg span + span { box-shadow: inset 1px 0 0 var(--md-outline); }
.dm-material .md-seg .is-on { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-seg--lg { height: 40px; border-radius: 20px; }
.dm-material .md-seg--lg span { padding: 0 18px; font-size: 14px; }

.dm-material .md-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; min-width: 56px; border-radius: 16px;
  background: var(--md-ter-c); color: var(--md-on-ter-c);
  box-shadow: var(--md-elev-3); font-size: 15px; font-weight: 500;
}
.dm-material .md-fab--extended { padding: 0 20px 0 16px; }

.dm-material .md-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px;
  background: var(--md-sec-c); color: var(--md-on-sec-c); font-size: 12px; font-weight: 500;
}
.dm-material .md-tag--warn { background: #ffdcc3; color: #2f1500; }
.dm-material .md-tag--err { background: var(--md-err-c); color: var(--md-on-err-c); }
.dm-material .md-tag--info { background: var(--md-ter-c); color: var(--md-on-ter-c); }

/* Круговой индикатор прогресса */
.dm-material .md-ring {
  --p: 50; flex: none; position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--md-primary) calc(var(--p) * 1%), var(--md-pc) 0);
  display: flex; align-items: center; justify-content: center;
}
.dm-material .md-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--md-sec-c); }
.dm-material .md-ring span { position: relative; font-size: 16px; font-weight: 600; color: var(--md-on-sec-c); }
.dm-material .md-ring--lg { width: 76px; height: 76px; }
.dm-material .md-ring--lg::before { background: var(--md-sf-low); }
.dm-material .md-ring--lg span { color: var(--md-on-surface); font-size: 18px; }

.dm-material .md-lead { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }
.dm-material .md-lead--a { background: var(--md-pc); color: var(--md-on-pc); }
.dm-material .md-lead--b { background: var(--md-err-c); color: #8c1d18; border-radius: 12px; }
.dm-material .md-lead--c { background: #ffdcc3; color: #6e3900; border-radius: 40% 60% 55% 45%; }

.dm-material .md-switch { display: inline-flex; align-items: center; width: 52px; height: 32px; border-radius: 16px; background: var(--md-sf-highest); box-shadow: inset 0 0 0 2px var(--md-outline); padding: 0 8px; }
.dm-material .md-switch i { width: 16px; height: 16px; border-radius: 50%; background: var(--md-outline); }
.dm-material .md-switch.is-on { background: var(--md-primary); box-shadow: none; justify-content: flex-end; padding: 0 4px; }
.dm-material .md-switch.is-on i { width: 24px; height: 24px; background: var(--md-on-primary); }

/* =================== Сайт =================== */
.dm-material.dm--site { box-sizing: border-box; padding: 0 24px; }
.dm-material .md-topbar { display: flex; align-items: center; gap: 12px; height: 80px; }
.dm-material .md-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; margin-right: 12px; }
.dm-material .md-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: var(--md-primary); color: var(--md-on-primary); }
.dm-material .md-topbar .md-searchbar { width: 380px; height: 48px; border-radius: 24px; font-size: 15px; }
.dm-material .md-toptabs { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.dm-material .md-toptabs li { height: 40px; padding: 0 16px; border-radius: 20px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--md-osv); }
.dm-material .md-toptabs .is-active { background: var(--md-sec-c); color: var(--md-on-sec-c); }

.dm-material .md-site { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; }
.dm-material .md-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  height: 392px; padding: 48px 0 48px 48px; border-radius: 28px;
  background: var(--md-pc); color: var(--md-on-pc);
}
.dm-material .md-hero h1 { font-size: 52px; line-height: 60px; font-weight: 400; letter-spacing: -.01em; margin: 24px 0 16px; }
.dm-material .md-hero__lead { font-size: 16px; line-height: 24px; max-width: 430px; margin-bottom: 32px; color: #12361a; }
.dm-material .md-hero__art { position: relative; }
.dm-material .md-shape { position: absolute; display: block; }
.dm-material .md-shape--circle { width: 250px; height: 250px; border-radius: 50%; background: var(--md-primary); opacity: .9; right: -40px; top: -20px; }
.dm-material .md-shape--cookie { right: 70px; bottom: -56px; fill: var(--md-ter-c); }
.dm-material .md-shape--pill { width: 64px; height: 140px; border-radius: 32px; background: #ffdcc3; right: 230px; top: 10px; transform: rotate(-30deg); }
.dm-material .md-plant { position: absolute; right: 60px; bottom: -40px; }
.dm-material .md-floatcard {
  position: absolute; left: -20px; bottom: 6px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px;
  background: var(--md-sf-low); color: var(--md-on-surface); box-shadow: var(--md-elev-1);
}
.dm-material .md-floatcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--md-ter-c); color: var(--md-on-ter-c); }
.dm-material .md-floatcard b { display: block; font-size: 14px; font-weight: 500; }
.dm-material .md-floatcard span { font-size: 12px; color: var(--md-osv); }

.dm-material .md-aside { display: grid; gap: 16px; align-content: start; }
.dm-material .md-card { border-radius: 24px; padding: 20px; }
.dm-material .md-card--filled-sec { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-card--outlined { box-shadow: inset 0 0 0 1px var(--md-ov); background: var(--md-surface); }
.dm-material .md-today { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dm-material .md-list li { display: flex; align-items: center; gap: 12px; height: 32px; font-size: 14px; }
.dm-material .md-list .is-done { color: #3f4e3c; text-decoration: line-through; }
.dm-material .md-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--md-osv); }
.dm-material .is-done .md-check { background: var(--md-primary); box-shadow: none; color: #fff; }
.dm-material .md-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dm-material .md-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; }
.dm-material .md-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--md-osv); }
.dm-material .md-week i { width: 100%; border-radius: 8px; background: var(--md-pc); }
.dm-material .md-week b { font-size: 13px; font-weight: 500; color: var(--md-on-surface); }
.dm-material .md-week .is-warn i { background: var(--md-err-c); }
.dm-material .md-week .is-warn b { color: var(--md-error); }
.dm-material .md-note { margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: var(--md-sf); font-size: 12px; color: var(--md-osv); }

.dm-material .md-collections { grid-column: 1 / -1; padding-top: 8px; }
.dm-material .md-collections__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dm-material .md-collections h2 { font-size: 22px; line-height: 28px; font-weight: 400; }
.dm-material .md-collections .md-chips { margin-bottom: 16px; }
.dm-material .md-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dm-material .md-ccard { border-radius: 16px; padding: 8px 8px 14px; }
.dm-material .md-ccard--elev { background: var(--md-sf-low); box-shadow: var(--md-elev-1); }
.dm-material .md-ccard--filled { background: var(--md-sf-highest); }
.dm-material .md-ccard--outlined { box-shadow: inset 0 0 0 1px var(--md-ov); }
.dm-material .md-ccard__media { position: relative; overflow: hidden; height: 96px; border-radius: 12px; margin-bottom: 12px; }
.dm-material .md-ccard__media i { position: absolute; display: block; }
.dm-material .md-ccard .md-title-s, .dm-material .md-ccard .md-body-s { padding: 0 8px; }
.dm-material .md-media--a { background: var(--md-pc); }
.dm-material .md-media--a i { width: 90px; height: 90px; border-radius: 50%; background: var(--md-primary); right: 24px; top: 30px; }
.dm-material .md-media--b { background: var(--md-err-c); }
.dm-material .md-media--b i { width: 70px; height: 70px; border-radius: 50%; background: #c0412f; left: 40px; top: 14px; box-shadow: 80px 22px 0 -12px #e97a5f; }
.dm-material .md-media--c { background: #ffdcc3; }
.dm-material .md-media--c i { width: 120px; height: 46px; border-radius: 23px; background: #8f4c00; left: 60px; top: 26px; transform: rotate(-20deg); }
.dm-material .md-media--d { background: var(--md-ter-c); }
.dm-material .md-media--d i { width: 80px; height: 80px; border-radius: 24px; background: var(--md-tertiary); right: 48px; top: 26px; transform: rotate(18deg); }

.dm-material .md-site > .md-fab { position: absolute; right: 8px; top: 650px; }

/* =================== Приложение =================== */
.dm-material.dm--app { display: flex; flex-direction: column; }
.dm-material .md-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 500; }
.dm-material .md-status__icons { display: flex; gap: 6px; align-items: center; }
.dm-material .md-status__icons i { display: block; width: 14px; height: 12px; background: var(--md-on-surface); }
.dm-material .md-status__icons .md-st-wifi { clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.dm-material .md-status__icons .md-st-sig { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dm-material .md-status__icons .md-st-bat { width: 8px; height: 14px; border-radius: 2px; }
.dm-material .md-appbar { display: flex; align-items: center; height: 64px; padding: 0 4px; }
.dm-material .md-appbar__title { flex: 1; font-size: 22px; line-height: 28px; padding-left: 4px; }
.dm-material .md-chips--app { padding: 4px 16px 16px; overflow: hidden; }

.dm-material .md-hcard { margin: 0 16px; padding: 16px; border-radius: 28px; background: var(--md-pc); color: var(--md-on-pc); }
.dm-material .md-hcard__top { display: flex; align-items: center; gap: 16px; }
.dm-material .md-hcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 16px; background: var(--md-primary); color: var(--md-on-primary); }
.dm-material .md-hcard .md-label-m { color: #12361a; }
.dm-material .md-progress { position: relative; display: flex; gap: 4px; height: 4px; margin: 20px 0 14px; }
.dm-material .md-progress i { display: block; height: 4px; border-radius: 2px; background: var(--md-primary); }
.dm-material .md-progress b { flex: 1; height: 4px; border-radius: 2px; background: rgba(59, 105, 57, .25); }
.dm-material .md-progress::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--md-primary); }
.dm-material .md-hcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-material .md-hcard__foot .md-body-s { color: #12361a; }

.dm-material .md-section { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 4px 16px; }
.dm-material .md-plants { margin: 0 8px; flex: 1; }
.dm-material .md-plants li { display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 12px; border-radius: 16px; }
.dm-material .md-plants li:first-child { background: var(--md-sf); }
.dm-material .md-plants li div { flex: 1; min-width: 0; }
.dm-material .md-plants b { display: block; font-size: 16px; font-weight: 400; line-height: 24px; }
.dm-material .md-plants li div span { font-size: 13px; color: var(--md-osv); }
.dm-material .md-fab--app { position: absolute; right: 16px; bottom: 96px; }

.dm-material .md-navbar { display: flex; height: 80px; padding-top: 12px; background: var(--md-sf); }
.dm-material .md-navbar > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--md-osv); }
.dm-material .md-navbar i { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: 16px; }
.dm-material .md-navbar .is-active { color: var(--md-on-surface); }
.dm-material .md-navbar .is-active i { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-navbar em, .dm-material .md-rail em {
  position: absolute; top: 0; left: 36px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--md-error); color: #fff; font-size: 11px; font-style: normal; line-height: 16px; text-align: center;
}

/* =================== Платформа =================== */
.dm-material.dm--platform { display: grid; grid-template-columns: 88px 1fr; background: var(--md-sf); }
.dm-material .md-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; }
.dm-material .md-fab--rail { margin: 4px 0 28px; background: var(--md-pc); color: var(--md-on-pc); box-shadow: none; }
.dm-material .md-rail__items { display: grid; gap: 12px; }
.dm-material .md-rail__items li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--md-osv); }
.dm-material .md-rail__items i { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; }
.dm-material .md-rail__items .is-active { color: var(--md-on-surface); }
.dm-material .md-rail__items .is-active i { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-rail em { left: 32px; }

.dm-material .md-pf { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px 24px 24px 8px; min-width: 0; }
.dm-material .md-pf__top { display: flex; align-items: center; gap: 8px; height: 64px; }
.dm-material .md-pf__top > div:first-child { flex: 1; }
.dm-material .md-searchbar--pf { width: 380px; height: 48px; border-radius: 24px; font-size: 15px; background: var(--md-sf-highest); margin-right: 8px; }

.dm-material .md-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dm-material .md-stat { padding: 16px 20px; border-radius: 20px; }
.dm-material .md-stat p { font-size: 13px; font-weight: 500; }
.dm-material .md-stat b { display: block; font-size: 28px; line-height: 36px; font-weight: 400; margin: 2px 0; }
.dm-material .md-stat span { font-size: 12px; opacity: .9; }
.dm-material .md-stat--pc { background: var(--md-pc); color: var(--md-on-pc); }
.dm-material .md-stat--sc { background: var(--md-sec-c); color: var(--md-on-sec-c); }
.dm-material .md-stat--tc { background: var(--md-ter-c); color: var(--md-on-ter-c); }
.dm-material .md-stat--ec { background: var(--md-err-c); color: var(--md-on-err-c); }

.dm-material .md-panes { flex: 1; display: grid; grid-template-columns: 1fr 312px; gap: 12px; min-height: 0; }
.dm-material .md-pane { border-radius: 28px; background: var(--md-surface); padding: 20px; }
.dm-material .md-pane__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dm-material .md-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-material .md-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--md-osv); padding: 12px; border-bottom: 1px solid var(--md-ov); letter-spacing: .03em; }
.dm-material .md-table td { padding: 0 12px; height: 52px; border-bottom: 1px solid var(--md-sf-high); }
.dm-material .md-table td b { font-weight: 500; }
.dm-material .md-table .r { text-align: right; }
.dm-material .md-table .is-selected td { background: var(--md-sf-low); }
.dm-material .md-table .is-selected td:first-child { box-shadow: inset 3px 0 0 var(--md-primary); }
.dm-material .md-table .md-err { color: var(--md-error); font-weight: 500; }
.dm-material .md-table .md-switch { transform: scale(.85); transform-origin: left center; }

.dm-material .md-pane--side { background: var(--md-sf-low); display: flex; flex-direction: column; gap: 14px; }
.dm-material .md-side__head { display: flex; align-items: center; gap: 12px; }
.dm-material .md-gauge { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 20px; background: var(--md-surface); }
.dm-material .md-slider { position: relative; height: 44px; margin: -6px 0 0; }
.dm-material .md-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 4px; background: var(--md-sec-c); }
.dm-material .md-slider i { position: absolute; left: 0; top: 18px; height: 8px; border-radius: 4px; background: var(--md-primary); }
.dm-material .md-slider b { position: absolute; top: 10px; width: 4px; height: 24px; margin-left: 4px; border-radius: 2px; background: var(--md-primary); }
.dm-material .md-slider em { position: absolute; right: 0; top: -8px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--md-on-surface); }
.dm-material .md-sensors { display: grid; gap: 2px; }
.dm-material .md-sensors li { display: flex; justify-content: space-between; height: 32px; align-items: center; font-size: 13px; color: var(--md-osv); }
.dm-material .md-sensors b { color: var(--md-on-surface); font-weight: 500; }
.dm-material .md-next { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--md-ter-c); color: var(--md-on-ter-c); }
.dm-material .md-next .md-floatcard__icon { background: var(--md-tertiary); color: #fff; }
.dm-material .md-next b { display: block; font-size: 14px; font-weight: 500; }
.dm-material .md-next span { font-size: 12px; }
.dm-material .md-pane--side .md-actions { margin-top: auto; justify-content: flex-end; }

.dm-material .md-snackbar {
  position: absolute; left: 24px; bottom: 32px;
  display: flex; align-items: center; gap: 24px;
  height: 48px; padding: 0 8px 0 16px; border-radius: 4px;
  background: #2d322b; color: #eef2e8; font-size: 14px; box-shadow: var(--md-elev-3);
}
.dm-material .md-snackbar b { padding: 0 12px; height: 36px; display: flex; align-items: center; color: #a0d49a; font-weight: 500; }

/* hand-drawn.css */
/* Демонстрация: Рисованный стиль (Hand-drawn). Все селекторы ограничены .dm-hand-drawn.
   Неровные обводки — SVG-пути с дрожанием (preserveAspectRatio="none" + non-scaling-stroke),
   штриховка — repeating-linear-gradient, бумага — сетка из linear-gradient. */

.dm-hand-drawn {
  --hd-paper: #fbf8ef;
  --hd-grid: #dbe6f1;
  --hd-ink: #1f2a44;
  --hd-pencil: #545b6b;
  --hd-red: #c8372d;
  --hd-blue: #2754b5;
  --hd-yellow: #ffe45c;
  --hd-pink: #ffc9d6;
  --hd-mint: #bdebd3;
  --hd-hatch: repeating-linear-gradient(-45deg, var(--hd-ink) 0 1.5px, transparent 1.5px 7px);
  --hd-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  background-color: var(--hd-paper);
  background-image:
    linear-gradient(var(--hd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hd-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--hd-ink);
  font-family: "Pangolin", "Comic Sans MS", cursive, sans-serif;
  font-size: 16px;
}

/* ---------- Общие приёмы ---------- */
.dm-hand-drawn .hd-hand { font-family: "Caveat", cursive; font-weight: 700; }
.dm-hand-drawn svg path { fill: none; stroke: var(--hd-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm-hand-drawn svg .hd-red { stroke: var(--hd-red); }
.dm-hand-drawn svg .hd-fill-yellow { fill: var(--hd-yellow); }
.dm-hand-drawn svg .hd-fill-paper { fill: #f3dcb4; }
.dm-hand-drawn svg .hd-fill-ink { fill: var(--hd-ink); }

/* Неровная рамка поверх элемента */
.dm-hand-drawn .hd-frame { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); overflow: visible; pointer-events: none; }
.dm-hand-drawn .hd-frame path { vector-effect: non-scaling-stroke; stroke-width: 2.2; }
.dm-hand-drawn .hd-frame path + path { stroke-width: 1.4; opacity: .75; }

/* Обводка «от руки» каракулей вокруг слова */
.dm-hand-drawn .hd-circle { position: absolute; left: -14px; top: -8px; width: calc(100% + 28px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.dm-hand-drawn .hd-circle path { vector-effect: non-scaling-stroke; stroke: var(--hd-red); stroke-width: 2.4; }

/* Маркерное выделение */
.dm-hand-drawn .hd-marker {
  color: inherit; padding: 0 .12em; margin: 0 -.06em;
  background: linear-gradient(100deg, transparent 1%, var(--hd-yellow) 3%, #ffe45cd9 50%, var(--hd-yellow) 95%, transparent 98%) 0 62% / 100% 58% no-repeat;
  border-radius: 6px 18px 8px 22px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Кнопка: неровная рамка + штрихованная «тень» */
.dm-hand-drawn .hd-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px; --hd-btn-bg: var(--hd-paper);
  font-size: 17px; white-space: nowrap; transform: rotate(-1deg); isolation: isolate;
}
.dm-hand-drawn .hd-btn::before {
  content: ""; position: absolute; inset: 0; transform: translate(7px, 7px); z-index: -2;
  background: var(--hd-hatch); border-radius: var(--hd-radius);
}
.dm-hand-drawn .hd-btn::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--hd-btn-bg); }
.dm-hand-drawn .hd-btn--lg { height: 58px; padding: 0 32px; font-size: 20px; --hd-btn-bg: var(--hd-yellow); }

/* Стикер на скотче */
.dm-hand-drawn .hd-sticky {
  position: absolute; display: flex; flex-direction: column; gap: 4px;
  padding: 22px 18px 18px; font-size: 15px; line-height: 1.3;
  box-shadow: 2px 6px 0 -2px rgba(31, 42, 68, .14);
  border-radius: 2px 2px 20px 2px / 2px 2px 8px 2px;
}
.dm-hand-drawn .hd-sticky b { font-size: 24px; line-height: 1; font-weight: 700; }
.dm-hand-drawn .hd-sticky--yellow { background: #fff1a6; }
.dm-hand-drawn .hd-sticky--pink { background: var(--hd-pink); }
.dm-hand-drawn .hd-sticky--mint { background: var(--hd-mint); }
.dm-hand-drawn .hd-tape {
  position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px;
  background: rgba(214, 222, 230, .72); transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 100%, 2% 96%, 0 60%, 4% 35%);
}

/* Чекбокс от руки */
.dm-hand-drawn .hd-box {
  position: relative; flex: none; display: inline-block; width: 22px; height: 22px;
  border: 2px solid var(--hd-ink); border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px; transform: rotate(-3deg);
}
.dm-hand-drawn .hd-box svg { position: absolute; left: 2px; top: -8px; overflow: visible; }
.dm-hand-drawn .hd-box svg path { stroke: var(--hd-red); stroke-width: 3; }

/* Штрихованная шкала прогресса */
.dm-hand-drawn .hd-hatchbar { position: relative; height: 18px; border: 2px solid var(--hd-ink); border-radius: var(--hd-radius); overflow: hidden; }
.dm-hand-drawn .hd-hatchbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hd-hatch), var(--hd-mint); border-right: 2px solid var(--hd-ink); }

/* =================== Сайт =================== */
.dm-hand-drawn.dm--site { box-sizing: border-box; padding: 0 64px; }
.dm-hand-drawn .hd-nav { display: flex; align-items: center; gap: 36px; height: 84px; }
.dm-hand-drawn .hd-logo { display: flex; align-items: center; gap: 10px; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 40px; line-height: 1; }
.dm-hand-drawn .hd-links { display: flex; gap: 36px; margin-left: 32px; font-size: 17px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-links li { position: relative; }
.dm-hand-drawn .hd-links .is-active { color: var(--hd-ink); }
.dm-hand-drawn .hd-login { margin-left: auto; font-size: 17px; text-decoration: underline wavy var(--hd-pencil) 1.5px; text-underline-offset: 6px; }

.dm-hand-drawn .hd-hero { display: grid; grid-template-columns: 540px 1fr; gap: 40px; padding-top: 12px; }
.dm-hand-drawn .hd-kicker { font-size: 26px; color: var(--hd-red); transform: rotate(-3deg); transform-origin: left; display: inline-block; }
.dm-hand-drawn .hd-hero h1 { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 106px; line-height: .95; margin: 4px 0 20px; }
.dm-hand-drawn .hd-lead { font-size: 18px; line-height: 1.55; max-width: 480px; margin-bottom: 30px; }
.dm-hand-drawn .hd-cta { display: flex; align-items: center; gap: 32px; }
.dm-hand-drawn .hd-ghost { font-size: 17px; color: var(--hd-blue); }
.dm-hand-drawn .hd-note { display: flex; align-items: flex-end; gap: 4px; margin: 2px 0 0 120px; }
.dm-hand-drawn .hd-note .hd-hand { font-size: 26px; color: var(--hd-blue); transform: rotate(-4deg); margin-bottom: 10px; }
.dm-hand-drawn .hd-arrow path { stroke: var(--hd-blue); stroke-width: 2.4; }

.dm-hand-drawn .hd-board { position: relative; height: 460px; }
.dm-hand-drawn .hd-page {
  position: absolute; left: 30px; top: 10px; width: 390px; padding: 26px 28px 24px 56px;
  background-color: #fffdf7;
  background-image: linear-gradient(90deg, transparent 40px, #e8a19b 40px, #e8a19b 42px, transparent 42px), repeating-linear-gradient(transparent 0 35px, #c9daea 35px 36px);
  border-radius: 4px 10px 6px 14px / 10px 4px 14px 6px;
  border: 2px solid var(--hd-ink);
  transform: rotate(-2deg);
  box-shadow: 8px 8px 0 -2px var(--hd-paper), 8px 8px 0 0 var(--hd-ink);
}
.dm-hand-drawn .hd-page__date { font-size: 26px; line-height: 36px; margin-bottom: 4px; }
.dm-hand-drawn .hd-todo li { display: flex; align-items: center; gap: 12px; height: 36px; font-size: 16px; }
.dm-hand-drawn .hd-todo .is-done span { color: var(--hd-pencil); text-decoration: line-through var(--hd-red) 2px; }
.dm-hand-drawn .hd-page .hd-hatchbar { margin: 16px 0 6px; }
.dm-hand-drawn .hd-page__foot { font-size: 22px; color: var(--hd-blue); }
.dm-hand-drawn .hd-star { position: absolute; right: 18px; bottom: 16px; transform: rotate(12deg); }
.dm-hand-drawn .hd-star path { fill: var(--hd-yellow); }
.dm-hand-drawn .hd-board .hd-sticky--yellow { right: -14px; top: 262px; width: 200px; transform: rotate(4deg); }
.dm-hand-drawn .hd-board .hd-sticky--pink { left: 0; top: 330px; width: 190px; transform: rotate(-5deg); }
.dm-hand-drawn .hd-pencil { position: absolute; left: 200px; top: 432px; transform: rotate(-8deg); }

.dm-hand-drawn .hd-steps { margin-top: 10px; padding-top: 20px; border-top: 2px dashed var(--hd-pencil); }
.dm-hand-drawn .hd-steps h2 { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 48px; line-height: 1; margin-bottom: 22px; }
.dm-hand-drawn .hd-steps h2 .hd-hand { font-size: 28px; color: var(--hd-pencil); font-weight: 500; }
.dm-hand-drawn .hd-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.dm-hand-drawn .hd-steps li { display: flex; gap: 22px; align-items: flex-start; }
.dm-hand-drawn .hd-num { position: relative; flex: none; width: 44px; text-align: center; font-family: "Caveat", cursive; font-weight: 700; font-size: 42px; line-height: 1; }
.dm-hand-drawn .hd-num .hd-circle { left: -6px; top: -4px; width: 56px; height: 52px; }
.dm-hand-drawn .hd-num .hd-circle path { stroke: var(--hd-ink); }
.dm-hand-drawn .hd-steps b { display: block; font-weight: 400; font-size: 18px; }
.dm-hand-drawn .hd-steps li span:not(.hd-num) { font-size: 15px; color: var(--hd-pencil); }

/* =================== Приложение =================== */
.dm-hand-drawn.dm--app {
  display: flex; flex-direction: column;
  background-image:
    linear-gradient(90deg, transparent 46px, #e8a19b 46px, #e8a19b 48px, transparent 48px),
    repeating-linear-gradient(transparent 0 31px, #c9daea 31px 32px);
  background-size: auto;
}
.dm-hand-drawn .hd-status { display: flex; justify-content: space-between; padding: 14px 26px 0; height: 44px; font-size: 15px; }
.dm-hand-drawn .hd-status__icons { display: flex; gap: 5px; align-items: center; }
.dm-hand-drawn .hd-status__icons i { width: 16px; height: 10px; border: 2px solid var(--hd-ink); border-radius: 3px 5px 2px 4px; }
.dm-hand-drawn .hd-apphead { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 22px 0 60px; }
.dm-hand-drawn .hd-apphead__date { font-size: 22px; color: var(--hd-red); line-height: 1.1; }
.dm-hand-drawn .hd-apphead h1 { position: relative; display: inline-block; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 56px; line-height: 1; }
.dm-hand-drawn .hd-underline { position: absolute; left: -4px; right: -10px; bottom: -8px; width: calc(100% + 14px); height: 14px; overflow: visible; }
.dm-hand-drawn .hd-underline path { vector-effect: non-scaling-stroke; stroke: var(--hd-blue); stroke-width: 2.6; }
.dm-hand-drawn .hd-underline path + path { stroke-width: 1.6; }
.dm-hand-drawn .hd-avatar { margin-top: 8px; }

.dm-hand-drawn .hd-days { display: flex; justify-content: space-between; padding: 20px 24px 10px 60px; }
.dm-hand-drawn .hd-days li { position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; line-height: 1.15; }
.dm-hand-drawn .hd-days span { font-size: 13px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-days b { font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; }
.dm-hand-drawn .hd-days .hd-circle { left: -2px; top: 14px; width: 44px; height: 38px; }
.dm-hand-drawn .hd-days .is-on { color: var(--hd-red); }
.dm-hand-drawn .hd-dot { position: absolute; bottom: -6px; width: 7px; height: 7px; border-radius: 50% 40% 55% 45%; background: var(--hd-red); }

.dm-hand-drawn .hd-sheet { position: relative; flex: 1; padding: 10px 20px 0 60px; }
.dm-hand-drawn .hd-hw li { position: relative; display: flex; align-items: center; gap: 14px; height: 56px; }
.dm-hand-drawn .hd-hw li > .hd-box { margin-left: -40px; margin-right: 6px; background: var(--hd-paper); }
.dm-hand-drawn .hd-subj { font-size: 19px; line-height: 1; color: var(--hd-blue); }
.dm-hand-drawn .hd-task { font-size: 17px; line-height: 1.35; }
.dm-hand-drawn .hd-hw .is-done .hd-task { color: var(--hd-pencil); text-decoration: line-through var(--hd-red) 2px; }
.dm-hand-drawn .hd-hw .is-done .hd-subj { color: var(--hd-pencil); }
.dm-hand-drawn .hd-flag { margin-left: auto; font-size: 20px; color: var(--hd-red); transform: rotate(-8deg); }

.dm-hand-drawn .hd-progress { margin: 14px 0 0; }
.dm-hand-drawn .hd-progress p { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 16px; }
.dm-hand-drawn .hd-progress .hd-hand { font-size: 22px; }
.dm-hand-drawn .hd-sticky--app { position: relative; width: 220px; margin: 26px 0 0 -18px; transform: rotate(-3deg); }
.dm-hand-drawn .hd-sticky--app b { font-size: 23px; }
.dm-hand-drawn .hd-arrow--app { position: absolute; left: 226px; bottom: 74px; }
.dm-hand-drawn .hd-arrow--app path { stroke: var(--hd-red); }

.dm-hand-drawn .hd-fab { position: absolute; right: 22px; bottom: 96px; display: block; width: 64px; height: 64px; }
.dm-hand-drawn .hd-fab::before { content: ""; position: absolute; inset: 6px; border-radius: 50% 46% 52% 48%; background: var(--hd-yellow); transform: translate(3px, 3px); }
.dm-hand-drawn .hd-fab svg { position: relative; }
.dm-hand-drawn .hd-fab path { stroke-width: 2.6; }

.dm-hand-drawn .hd-tabbar { display: flex; justify-content: space-around; height: 78px; padding: 10px 6px 0; border-top: 2px solid var(--hd-ink); background: var(--hd-paper); border-radius: 60% 40% 0 0 / 6px 4px 0 0; }
.dm-hand-drawn .hd-tabbar span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 76px; font-size: 13px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-tabbar svg path { stroke: var(--hd-pencil); stroke-width: 2; }
.dm-hand-drawn .hd-tabbar .is-active { color: var(--hd-ink); }
.dm-hand-drawn .hd-tabbar .is-active svg path { stroke: var(--hd-ink); stroke-width: 2.4; }
.dm-hand-drawn .hd-tabbar .is-active::before { content: ""; position: absolute; top: 2px; left: 16px; width: 44px; height: 28px; background: var(--hd-yellow); border-radius: 46% 54% 40% 60% / 60% 40% 58% 42%; transform: rotate(-6deg); z-index: 0; }
.dm-hand-drawn .hd-tabbar svg { position: relative; }

/* =================== Платформа =================== */
.dm-hand-drawn.dm--platform { display: grid; grid-template-columns: 236px 1fr; }
.dm-hand-drawn .hd-side {
  position: relative; display: flex; flex-direction: column; padding: 26px 22px 24px;
  background: #f4efe1; border-right: 2px solid var(--hd-ink);
  border-radius: 0 6px 4px 0 / 0 40% 60% 0;
}
.dm-hand-drawn .hd-logo--side { font-size: 34px; }
.dm-hand-drawn .hd-tabs { display: grid; gap: 6px; margin-top: 30px; font-size: 17px; }
.dm-hand-drawn .hd-tabs li { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-tabs .is-active { color: var(--hd-ink); background: linear-gradient(100deg, transparent 2%, var(--hd-yellow) 4%, var(--hd-yellow) 94%, transparent 97%); transform: rotate(-1.2deg); }
.dm-hand-drawn .hd-count { font-family: "Caveat", cursive; font-weight: 700; font-size: 20px; color: var(--hd-red); border: 2px solid var(--hd-red); border-radius: 50% 45% 55% 48%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.dm-hand-drawn .hd-sticky--side { position: relative; margin-top: 40px; transform: rotate(2.5deg); }
.dm-hand-drawn .hd-side__user { margin-top: auto; font-size: 13px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-side__user .hd-hand { display: block; font-size: 24px; color: var(--hd-ink); line-height: 1.1; }

.dm-hand-drawn .hd-main { display: flex; flex-direction: column; padding: 22px 36px 26px 40px; min-width: 0; }
.dm-hand-drawn .hd-mhead { display: flex; align-items: center; gap: 24px; }
.dm-hand-drawn .hd-mhead > div:first-child { flex: 1; }
.dm-hand-drawn .hd-mhead__kicker { font-size: 22px; color: var(--hd-red); }
.dm-hand-drawn .hd-mhead h1 { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 62px; line-height: 1; }
.dm-hand-drawn .hd-search { position: relative; display: flex; align-items: center; gap: 10px; width: 260px; height: 46px; padding: 0 14px; background: #fffdf7; color: var(--hd-pencil); font-size: 16px; }
.dm-hand-drawn .hd-search svg:first-child path { stroke: var(--hd-pencil); }

.dm-hand-drawn .hd-filters { display: flex; gap: 14px; margin: 20px 0 22px; }
.dm-hand-drawn .hd-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; font-size: 15px; border: 2px solid var(--hd-ink); border-radius: var(--hd-radius); background: #fffdf7; }
.dm-hand-drawn .hd-pill:nth-child(2n) { transform: rotate(1deg); }
.dm-hand-drawn .hd-pill:nth-child(3n) { transform: rotate(-1.4deg); }
.dm-hand-drawn .hd-pill.is-on { background: var(--hd-mint); }

.dm-hand-drawn .hd-work { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 36px; min-height: 0; }
.dm-hand-drawn .hd-journal { position: relative; }
.dm-hand-drawn .hd-table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fffdf7cc; }
.dm-hand-drawn .hd-table th { font-family: "Caveat", cursive; font-weight: 700; font-size: 20px; text-align: center; padding: 4px 8px 8px; border-bottom: 2.5px solid var(--hd-ink); }
.dm-hand-drawn .hd-table th:first-child, .dm-hand-drawn .hd-table td:first-child { text-align: left; }
.dm-hand-drawn .hd-table td { height: 48px; padding: 0 8px; text-align: center; font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; line-height: 1; border-bottom: 1.5px solid #9aa3b5; }
.dm-hand-drawn .hd-table td:first-child { font-family: "Pangolin", cursive; font-weight: 400; font-size: 16px; }
.dm-hand-drawn .hd-table td + td, .dm-hand-drawn .hd-table th + th { border-left: 1.5px dashed #9aa3b5; }
.dm-hand-drawn .hd-table td:last-child b { font-family: "Pangolin", cursive; font-weight: 400; font-size: 17px; }
.dm-hand-drawn .hd-table .is-hot td { background: linear-gradient(100deg, transparent 0, #ffc9d699 2%, #ffc9d699 98%, transparent 100%); }
.dm-hand-drawn .hd-g5 { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--hd-blue); border-radius: 52% 46% 50% 44% / 48% 54% 44% 52%; color: var(--hd-blue); }
.dm-hand-drawn .hd-g2 { color: var(--hd-red); text-decoration: underline var(--hd-red) 2px; text-underline-offset: 3px; }
.dm-hand-drawn .hd-gn { color: var(--hd-pencil); }
.dm-hand-drawn .hd-low { color: var(--hd-red); }
.dm-hand-drawn .hd-margin { display: flex; align-items: flex-end; gap: 8px; margin: -6px 0 0 30px; }
.dm-hand-drawn .hd-margin-note { font-size: 24px; color: var(--hd-red); transform: rotate(-2deg); margin-bottom: -4px; }
.dm-hand-drawn .hd-arrow--pf path { stroke: var(--hd-red); }

.dm-hand-drawn .hd-chartcard { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; background: #fffdf7; height: 470px; }
.dm-hand-drawn .hd-chartcard h2 { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 36px; line-height: 1; }
.dm-hand-drawn .hd-chart { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; padding: 0 6px 30px; }
.dm-hand-drawn .hd-bar { position: relative; flex: 1; border: 2px solid var(--hd-ink); border-bottom: 0; border-radius: 4px 7px 0 0 / 7px 4px 0 0; background: var(--hd-hatch); }
.dm-hand-drawn .hd-bar:nth-child(odd) { transform: rotate(-1deg); }
.dm-hand-drawn .hd-bar.is-now { background: repeating-linear-gradient(-45deg, var(--hd-ink) 0 1.5px, transparent 1.5px 7px), var(--hd-yellow); }
.dm-hand-drawn .hd-bar b { position: absolute; top: -28px; left: 0; right: 0; text-align: center; font-family: "Caveat", cursive; font-weight: 700; font-size: 20px; }
.dm-hand-drawn .hd-bar span { position: absolute; bottom: -28px; left: -6px; right: -6px; text-align: center; font-size: 12px; color: var(--hd-pencil); }
.dm-hand-drawn .hd-chart__base { position: absolute; left: -4px; right: -4px; bottom: 26px; width: calc(100% + 8px); height: 8px; overflow: visible; }
.dm-hand-drawn .hd-chart__base path { vector-effect: non-scaling-stroke; stroke-width: 2.6; }
.dm-hand-drawn .hd-chart__note { position: absolute; right: 26px; top: 64px; font-size: 26px; color: var(--hd-blue); transform: rotate(-8deg); }

/* claymorphism.css */
/* Демонстрация: Клеймоморфизм. Все селекторы ограничены .dm-claymorphism */

.dm-claymorphism {
  --bg: #f1ecfb;
  --ink: #2b2244;
  --muted: #5a5174;
  --violet: #6a4de0;
  --white: #fffdfb;
  /* «Пластилин»: светлая внутренняя тень сверху, тёмная снизу, мягкая внешняя тень */
  --clay: inset 0 -9px 16px rgba(43, 34, 68, .16), inset 0 9px 14px rgba(255, 255, 255, .85), 0 26px 40px -16px rgba(84, 58, 160, .42), 0 8px 14px -8px rgba(84, 58, 160, .22);
  --clay-sm: inset 0 -5px 9px rgba(43, 34, 68, .16), inset 0 5px 8px rgba(255, 255, 255, .85), 0 14px 22px -10px rgba(84, 58, 160, .42);
  --clay-in: inset 0 6px 10px rgba(43, 34, 68, .16), inset 0 -4px 8px rgba(255, 255, 255, .75);
  background:
    radial-gradient(520px 360px at 8% 12%, #fbe6f0 0, transparent 70%),
    radial-gradient(560px 420px at 96% 90%, #def0ff 0, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: "Mulish", system-ui, sans-serif;
}
.dm-claymorphism h1, .dm-claymorphism .cl-logo, .dm-claymorphism .cl-btn,
.dm-claymorphism .cl-float__big, .dm-claymorphism .cl-step__num, .dm-claymorphism .cl-total__sum,
.dm-claymorphism .cl-kpi b, .dm-claymorphism .cl-face, .dm-claymorphism .cl-coin {
  font-family: "Montserrat Alternates", "Mulish", system-ui, sans-serif;
}

/* ----- Общие «пластилиновые» поверхности ----- */
.dm-claymorphism .cl-clay { background: var(--c, var(--white)); border-radius: 32px; box-shadow: var(--clay); }
.dm-claymorphism .cl-clay-sm { background: var(--c, var(--white)); border-radius: 999px; box-shadow: var(--clay-sm); }
.dm-claymorphism .cl-clay-in { background: rgba(43, 34, 68, .05); border-radius: 24px; box-shadow: var(--clay-in); }
.dm-claymorphism .cl-muted { color: var(--muted); font-size: 13px; font-weight: 600; }
.dm-claymorphism .cl-link { color: var(--violet); font-weight: 800; font-size: 14px; }

.dm-claymorphism .cl-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.dm-claymorphism .cl-logo__mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe8f0 0 14%, #ffb3cb 48%, #ee82a8 100%);
  box-shadow: inset -4px -5px 8px rgba(170, 40, 90, .35), inset 3px 3px 6px rgba(255, 255, 255, .7), 0 8px 14px -6px rgba(170, 40, 90, .55);
  position: relative;
}
.dm-claymorphism .cl-logo__mark::after { content: ""; position: absolute; left: 11px; top: 6px; width: 14px; height: 4px; border-radius: 4px; background: #c9577f; box-shadow: inset 0 1px 2px rgba(80, 10, 40, .5); }

.dm-claymorphism .cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 58px; padding: 0 30px; border-radius: 999px;
  background: var(--violet); color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap;
  box-shadow: inset 0 -6px 12px rgba(30, 10, 90, .38), inset 0 6px 10px rgba(255, 255, 255, .42), 0 18px 28px -12px rgba(106, 77, 224, .75);
}
.dm-claymorphism .cl-btn--sm { height: 46px; padding: 0 22px; font-size: 14px; }
.dm-claymorphism .cl-btn--soft { background: var(--white); color: var(--ink); box-shadow: var(--clay-sm); }
.dm-claymorphism .cl-btn--block { display: flex; width: 100%; }

.dm-claymorphism .cl-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; font-size: 13px; font-weight: 700; }
.dm-claymorphism .cl-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8fff0, #3cc48e); box-shadow: 0 3px 6px -2px rgba(30, 140, 90, .6); }

.dm-claymorphism .cl-progress { display: block; height: 14px; border-radius: 999px; background: rgba(43, 34, 68, .08); box-shadow: var(--clay-in); padding: 3px; }
.dm-claymorphism .cl-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(#8f76ff, #6a4de0); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(30, 10, 90, .3); }

.dm-claymorphism .cl-face {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c, #ffd2bc) 55%);
  box-shadow: inset 0 -4px 7px rgba(43, 34, 68, .18), inset 0 4px 6px rgba(255, 255, 255, .8), 0 8px 14px -6px rgba(84, 58, 160, .45);
  font-weight: 800; font-size: 16px; color: var(--ink);
}
.dm-claymorphism .cl-face--lg { width: 52px; height: 52px; font-size: 20px; --c: #ffc9dc; }

/* Монеты */
.dm-claymorphism .cl-coin {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff6c8 0 12%, #ffd45c 46%, #e8a52a 100%);
  box-shadow: inset 0 -4px 6px rgba(150, 90, 0, .4), inset 0 3px 4px rgba(255, 255, 255, .75), 0 10px 16px -6px rgba(180, 110, 0, .55);
  color: #9a5f00; font-weight: 800; font-size: 20px;
}

/* 3D-иконки из CSS */
.dm-claymorphism .cl-ico-sun { position: relative; }
.dm-claymorphism .cl-ico-sun i { position: absolute; left: 6px; top: 4px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff7cf 0 12%, #ffd34d 50%, #f2a516 100%); box-shadow: inset -3px -4px 6px rgba(170, 90, 0, .35), 0 8px 12px -5px rgba(200, 120, 0, .5); }
.dm-claymorphism .cl-ico-sun::after { content: ""; position: absolute; right: 2px; bottom: 6px; width: 40px; height: 20px; border-radius: 999px; background: radial-gradient(circle at 40% 30%, #fff 0 30%, #e9edff 100%); box-shadow: inset 0 -3px 5px rgba(60, 70, 140, .2), 0 6px 10px -4px rgba(60, 70, 140, .35); }

.dm-claymorphism .cl-ico-bike { position: relative; }
.dm-claymorphism .cl-ico-bike i { position: absolute; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, transparent 0 7px, #2f9c73 8px 100%); box-shadow: inset 0 -3px 4px rgba(10, 60, 40, .35), inset 0 2px 3px rgba(255, 255, 255, .5), 0 6px 10px -4px rgba(10, 80, 50, .5); }
.dm-claymorphism .cl-ico-bike i:first-child { left: 2px; }
.dm-claymorphism .cl-ico-bike i:last-child { right: 2px; }
.dm-claymorphism .cl-ico-bike::after { content: ""; position: absolute; left: 14px; top: 14px; width: 30px; height: 12px; border-radius: 8px; background: linear-gradient(#ff9ab9, #ea6f98); box-shadow: inset 0 -2px 3px rgba(120, 20, 60, .35), 0 4px 6px -3px rgba(120, 20, 60, .5); transform: rotate(-12deg); }

.dm-claymorphism .cl-ico-laptop { position: relative; }
.dm-claymorphism .cl-ico-laptop i { position: absolute; left: 9px; top: 6px; width: 38px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, #a99bff, #6a4de0); box-shadow: inset 0 3px 3px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(30, 10, 90, .35); }
.dm-claymorphism .cl-ico-laptop::after { content: ""; position: absolute; left: 3px; top: 34px; width: 50px; height: 11px; border-radius: 6px 6px 10px 10px; background: linear-gradient(#f2f0ff, #c9c0f2); box-shadow: inset 0 -2px 3px rgba(43, 34, 68, .25), 0 6px 10px -4px rgba(84, 58, 160, .5); }

.dm-claymorphism .cl-ico-gift { position: relative; }
.dm-claymorphism .cl-ico-gift i { position: absolute; left: 9px; top: 12px; width: 38px; height: 34px; border-radius: 11px; background: linear-gradient(90deg, transparent 0 15px, #ffd34d 15px 23px, transparent 23px), linear-gradient(150deg, #ff9ab9, #e8618f); box-shadow: inset 0 3px 3px rgba(255, 255, 255, .5), inset 0 -4px 6px rgba(120, 20, 60, .35), 0 8px 12px -5px rgba(150, 30, 70, .5); }
.dm-claymorphism .cl-ico-gift::after { content: ""; position: absolute; left: 19px; top: 3px; width: 18px; height: 12px; border-radius: 50% 50% 4px 4px; background: radial-gradient(circle at 40% 30%, #fff1b8, #f2b316); box-shadow: inset 0 -2px 3px rgba(150, 90, 0, .4); }

/* Декоративные фигурки в фоне сайта */
.dm-claymorphism .cl-deco { position: absolute; display: block; pointer-events: none; }
.dm-claymorphism .cl-deco--ball { left: 64px; top: 420px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #e7fff4 0 10%, #9fe5c6 50%, #5fc49a 100%); box-shadow: inset -6px -8px 12px rgba(20, 100, 70, .3), 0 18px 26px -12px rgba(20, 100, 70, .45); }
.dm-claymorphism .cl-deco--ring { right: 70px; top: 120px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, transparent 0 18px, #c7dcff 19px 100%); box-shadow: inset -6px -8px 12px rgba(40, 70, 150, .28), inset 5px 6px 9px rgba(255, 255, 255, .8), 0 18px 26px -12px rgba(40, 70, 150, .45); transform: rotate(-20deg); }
.dm-claymorphism .cl-deco--pill { left: 150px; top: 136px; width: 92px; height: 36px; border-radius: 999px; background: linear-gradient(#ffe9b0, #ffcf5c); box-shadow: inset 0 -5px 8px rgba(160, 100, 0, .3), inset 0 4px 6px rgba(255, 255, 255, .8), 0 14px 20px -10px rgba(160, 100, 0, .5); transform: rotate(-24deg); }

@keyframes cl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ----- Сайт ----- */
.dm-claymorphism.dm--site { padding: 22px 64px 0; }
.dm-claymorphism .cl-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 36px; height: 72px; padding: 0 14px 0 26px; max-width: 900px; margin: 0 auto; border-radius: 999px; }
.dm-claymorphism .cl-links { display: flex; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 700; color: var(--muted); }
.dm-claymorphism .cl-links li { padding: 10px 16px; border-radius: 999px; }
.dm-claymorphism .cl-links .is-active { color: var(--ink); background: #ffe6a1; box-shadow: var(--clay-sm); }

.dm-claymorphism .cl-hero { position: relative; z-index: 1; text-align: center; padding-top: 30px; }
.dm-claymorphism .cl-hero h1 { font-size: 58px; line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin: 16px 0 12px; }
.dm-claymorphism .cl-lead { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 600px; margin: 0 auto 22px; font-weight: 500; }
.dm-claymorphism .cl-hero .cl-actions { display: flex; justify-content: center; gap: 16px; }

.dm-claymorphism .cl-stage { position: relative; height: 252px; margin-top: 6px; }
.dm-claymorphism .cl-pedestal { position: absolute; left: 50%; bottom: 6px; width: 460px; height: 74px; margin-left: -230px; border-radius: 50%; background: linear-gradient(#e6dcff, #cbbcf7); box-shadow: inset 0 -10px 16px rgba(60, 40, 140, .22), inset 0 10px 14px rgba(255, 255, 255, .85), 0 26px 36px -18px rgba(84, 58, 160, .55); }

.dm-claymorphism .cl-pig { position: absolute; left: 50%; bottom: 36px; width: 270px; height: 200px; margin-left: -135px; }
.dm-claymorphism .cl-pig i { position: absolute; display: block; }
.dm-claymorphism .cl-pig__body { left: 22px; top: 22px; width: 220px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffe6ee 0 9%, #ffb6cd 46%, #f08aad 100%); box-shadow: inset -14px -18px 26px rgba(170, 40, 90, .32), inset 12px 12px 20px rgba(255, 255, 255, .6), 0 24px 34px -18px rgba(170, 40, 90, .6); }
.dm-claymorphism .cl-pig__ear { left: 72px; top: 6px; width: 50px; height: 52px; border-radius: 70% 30% 50% 50%; background: linear-gradient(150deg, #ffc1d4, #ee86aa); box-shadow: inset -4px -6px 8px rgba(170, 40, 90, .3), inset 3px 4px 6px rgba(255, 255, 255, .6); transform: rotate(-14deg); }
.dm-claymorphism .cl-pig__ear--back { left: 120px; top: 2px; transform: rotate(18deg); background: #e9789f; }
.dm-claymorphism .cl-pig__slot { left: 118px; top: 38px; width: 54px; height: 10px; border-radius: 6px; background: #c24f79; box-shadow: inset 0 2px 3px rgba(80, 10, 40, .6), 0 1px 0 rgba(255, 255, 255, .6); }
.dm-claymorphism .cl-pig__eye { left: 182px; top: 76px; width: 13px; height: 15px; border-radius: 50%; background: var(--ink); box-shadow: inset 3px 3px 0 -1px #fff; }
.dm-claymorphism .cl-pig__cheek { left: 168px; top: 104px; width: 30px; height: 16px; border-radius: 50%; background: rgba(240, 90, 140, .45); }
.dm-claymorphism .cl-pig__snout { left: 206px; top: 82px; width: 58px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd3e0 0 12%, #f79ab9 60%, #e77ca2 100%); box-shadow: inset -5px -6px 10px rgba(170, 40, 90, .35), inset 3px 4px 6px rgba(255, 255, 255, .6), 0 10px 14px -8px rgba(170, 40, 90, .6); }
.dm-claymorphism .cl-pig__snout::before, .dm-claymorphism .cl-pig__snout::after { content: ""; position: absolute; top: 18px; width: 9px; height: 14px; border-radius: 50%; background: #b8456d; }
.dm-claymorphism .cl-pig__snout::before { left: 16px; }
.dm-claymorphism .cl-pig__snout::after { left: 32px; }
.dm-claymorphism .cl-pig__leg { bottom: 12px; width: 38px; height: 46px; border-radius: 12px 12px 20px 20px; background: linear-gradient(#f7a3c0, #e7799f); box-shadow: inset 0 -6px 8px rgba(170, 40, 90, .35), 0 8px 10px -6px rgba(170, 40, 90, .5); }
.dm-claymorphism .cl-pig__leg--1 { left: 50px; }
.dm-claymorphism .cl-pig__leg--2 { left: 92px; background: #e06f97; }
.dm-claymorphism .cl-pig__leg--3 { left: 160px; background: #e06f97; }
.dm-claymorphism .cl-pig__leg--4 { left: 198px; }
.dm-claymorphism .cl-pig__tail { left: 6px; top: 84px; width: 34px; height: 30px; border-radius: 50%; border: 7px solid #ee86aa; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-30deg); }

.dm-claymorphism .cl-stage .cl-coin { position: absolute; }
.dm-claymorphism .cl-coin--1 { left: 548px; top: -6px; transform: rotate(-14deg); animation: cl-bob 3.2s ease-in-out infinite; }
.dm-claymorphism .cl-coin--2 { left: 636px; top: 22px; width: 38px; height: 38px; font-size: 16px; transform: rotate(16deg); }
.dm-claymorphism .cl-coin--3 { left: 470px; top: 40px; width: 32px; height: 32px; font-size: 14px; }

.dm-claymorphism .cl-float { position: absolute; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 28px; }
.dm-claymorphism .cl-float--goal { left: 24px; top: 40px; width: 300px; transform: rotate(-3deg); --c: #c7dcff; }
.dm-claymorphism .cl-float--goal > div { flex: 1; }
.dm-claymorphism .cl-float__icon { flex: none; width: 54px; height: 50px; }
.dm-claymorphism .cl-float__title { font-weight: 800; font-size: 16px; }
.dm-claymorphism .cl-float__meta { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.dm-claymorphism .cl-float--round { right: 30px; top: 18px; display: block; width: 240px; transform: rotate(3deg); --c: #bfefd9; }
.dm-claymorphism .cl-float--round .cl-float__meta { margin: 0; }
.dm-claymorphism .cl-float__big { font-size: 30px; font-weight: 800; color: #17603f; line-height: 1.1; }
.dm-claymorphism .cl-float--note { right: 120px; top: 156px; width: 260px; --c: #fffdfb; font-size: 14px; line-height: 1.35; padding: 14px 18px; }
.dm-claymorphism .cl-float--note .cl-face { --c: #ffe6a1; }

.dm-claymorphism .cl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 16px; }
.dm-claymorphism .cl-step { position: relative; padding: 20px 18px 22px 76px; min-height: 124px; font-size: 13px; line-height: 1.4; color: #3d3458; }
.dm-claymorphism .cl-step__num { position: absolute; left: 18px; top: 20px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--white); box-shadow: var(--clay-sm); font-weight: 800; font-size: 20px; color: var(--violet); }
.dm-claymorphism .cl-step__title { font-weight: 800; font-size: 16px; color: var(--ink); margin-bottom: 4px; }

/* ----- Приложение ----- */
.dm-claymorphism.dm--app { display: flex; flex-direction: column; padding: 0 20px; }
.dm-claymorphism .cl-status { display: flex; justify-content: space-between; padding: 14px 10px 0; font-size: 14px; font-weight: 800; }
.dm-claymorphism .cl-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-claymorphism .cl-status__icons i { width: 16px; height: 10px; border-radius: 4px; background: var(--ink); }
.dm-claymorphism .cl-appbar { display: flex; align-items: center; gap: 12px; padding: 12px 0 14px; }
.dm-claymorphism .cl-appbar__hello { flex: 1; line-height: 1.25; }
.dm-claymorphism .cl-appbar__name { font-weight: 800; font-size: 19px; }
.dm-claymorphism .cl-round { position: relative; display: grid; place-items: center; width: 48px; height: 48px; }
.dm-claymorphism .cl-bell { width: 18px; height: 18px; border-radius: 9px 9px 3px 3px; background: linear-gradient(#ffd96b, #f0a91a); box-shadow: inset 0 -2px 3px rgba(150, 90, 0, .4); }
.dm-claymorphism .cl-badge { position: absolute; right: -2px; top: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e2456f; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 4px 8px -3px rgba(180, 30, 70, .7); }

.dm-claymorphism .cl-total { position: relative; padding: 18px 22px 20px; --c: #dcd0ff; border-radius: 34px; }
.dm-claymorphism .cl-total__label { font-size: 14px; font-weight: 700; color: #463c66; }
.dm-claymorphism .cl-total__sum { font-size: 31px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 12px; }
.dm-claymorphism .cl-pill { display: inline-flex; height: 30px; align-items: center; padding: 0 14px; border-radius: 999px; background: #bfefd9; color: #17603f; font-size: 13px; font-weight: 800; box-shadow: var(--clay-sm); }
.dm-claymorphism .cl-stack { position: absolute; right: 22px; bottom: 22px; width: 64px; height: 90px; }
.dm-claymorphism .cl-stack .cl-coin { position: absolute; left: 0; width: 64px; height: 64px; font-size: 24px; }
.dm-claymorphism .cl-stack .cl-coin--flat { height: 24px; border-radius: 50%; background: linear-gradient(#ffd45c, #d99318); }
.dm-claymorphism .cl-stack .cl-coin--flat:nth-child(1) { bottom: 0; }
.dm-claymorphism .cl-stack .cl-coin--flat:nth-child(2) { bottom: 10px; }
.dm-claymorphism .cl-stack .cl-coin--flat:nth-child(3) { bottom: 20px; }
.dm-claymorphism .cl-stack .cl-coin--top { bottom: 26px; transform: rotate(-10deg); }

.dm-claymorphism .cl-section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 4px 12px; }
.dm-claymorphism .cl-section-head p { font-weight: 800; font-size: 19px; }
.dm-claymorphism .cl-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-claymorphism .cl-goal { padding: 16px 16px 18px; border-radius: 26px; }
.dm-claymorphism .cl-ico { display: block; width: 56px; height: 48px; margin-bottom: 8px; }
.dm-claymorphism .cl-goal__title { font-weight: 800; font-size: 15px; line-height: 1.25; min-height: 38px; }
.dm-claymorphism .cl-goal__sum { font-size: 14px; font-weight: 800; margin: 2px 0 8px; }
.dm-claymorphism .cl-goal__sum span { font-weight: 600; color: #4a4164; font-size: 12px; }

.dm-claymorphism .cl-tabbar { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; align-items: center; justify-content: space-around; height: 70px; padding: 0 8px; border-radius: 30px; }
.dm-claymorphism .cl-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.dm-claymorphism .cl-tab.is-active { color: var(--violet); font-weight: 800; }
.dm-claymorphism .cl-tab__ico { width: 24px; height: 22px; border-radius: 8px; background: #ddd5f2; box-shadow: inset 0 -2px 3px rgba(43, 34, 68, .18); }
.dm-claymorphism .cl-tab.is-active .cl-tab__ico { background: linear-gradient(#a28dff, #6a4de0); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(30, 10, 90, .3), 0 5px 8px -3px rgba(106, 77, 224, .6); }
.dm-claymorphism .cl-tab__ico--chart { border-radius: 4px 4px 8px 8px; }
.dm-claymorphism .cl-tab__ico--team, .dm-claymorphism .cl-tab__ico--user { border-radius: 50%; width: 22px; }
.dm-claymorphism .cl-fab { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -34px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #b7a6ff 0 10%, #7a5cf0 55%, #5a3fd0 100%); color: #fff; box-shadow: inset 0 -6px 10px rgba(30, 10, 90, .4), inset 0 5px 8px rgba(255, 255, 255, .4), 0 18px 24px -10px rgba(106, 77, 224, .8), 0 0 0 6px var(--bg); }
.dm-claymorphism .cl-fab b { font-size: 32px; font-weight: 700; line-height: 1; margin-top: -3px; }

/* ----- Веб-платформа ----- */
.dm-claymorphism.dm--platform { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 24px 32px 24px 24px; }
.dm-claymorphism .cl-side { display: flex; flex-direction: column; padding: 26px 18px 18px; border-radius: 36px; }
.dm-claymorphism .cl-side .cl-logo { padding-left: 8px; }
.dm-claymorphism .cl-side__nav { display: grid; gap: 8px; margin-top: 34px; font-size: 15px; font-weight: 700; color: var(--muted); }
.dm-claymorphism .cl-side__nav li { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; border-radius: 20px; }
.dm-claymorphism .cl-side__nav .is-active { background: #ffc9dc; color: var(--ink); font-weight: 800; box-shadow: var(--clay-sm); }
.dm-claymorphism .cl-mini { flex: none; width: 26px; height: 26px; border-radius: 9px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c) 60%); box-shadow: inset 0 -3px 5px rgba(43, 34, 68, .2), inset 0 2px 3px rgba(255, 255, 255, .8), 0 5px 8px -4px rgba(84, 58, 160, .5); }
.dm-claymorphism .cl-mini--lg { width: 44px; height: 44px; border-radius: 16px; }
.dm-claymorphism .cl-family { margin-top: auto; padding: 16px; }
.dm-claymorphism .cl-faces { display: flex; margin: 10px 0 14px; }
.dm-claymorphism .cl-faces i { display: grid; place-items: center; width: 38px; height: 38px; margin-right: -8px; border-radius: 50%; background: var(--c); font-style: normal; font-weight: 800; font-size: 14px; box-shadow: inset 0 -3px 5px rgba(43, 34, 68, .18), inset 0 3px 4px rgba(255, 255, 255, .8), 0 0 0 3px var(--bg); }

.dm-claymorphism .cl-work { display: flex; flex-direction: column; min-width: 0; padding-top: 8px; }
.dm-claymorphism .cl-work__head { display: flex; align-items: center; gap: 20px; }
.dm-claymorphism .cl-work__head > div:first-child { flex: 1; }
.dm-claymorphism .cl-work__head h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dm-claymorphism .cl-seg { display: flex; gap: 4px; padding: 5px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); }
.dm-claymorphism .cl-seg span { padding: 10px 18px; border-radius: 999px; }
.dm-claymorphism .cl-seg .is-on { background: var(--white); color: var(--ink); font-weight: 800; box-shadow: var(--clay-sm); }

.dm-claymorphism .cl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 26px 0 24px; }
.dm-claymorphism .cl-kpi { position: relative; padding: 20px 22px; border-radius: 30px; }
.dm-claymorphism .cl-kpi p { font-size: 14px; font-weight: 700; color: #463c66; }
.dm-claymorphism .cl-kpi b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 6px; }
.dm-claymorphism .cl-kpi__delta { font-size: 12px; font-weight: 700; color: #463c66; }
.dm-claymorphism .cl-kpi__ico { position: absolute; right: 18px; top: 16px; width: 40px; height: 40px; }
.dm-claymorphism .cl-ico-coinball { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff6c8 0 12%, #ffd45c 46%, #e8a52a 100%); box-shadow: inset 0 -4px 6px rgba(150, 90, 0, .4), 0 8px 12px -5px rgba(180, 110, 0, .55); }
.dm-claymorphism .cl-ico-cube { border-radius: 13px; background: linear-gradient(145deg, #ffab85, #f0743f); box-shadow: inset 0 3px 3px rgba(255, 255, 255, .5), inset 0 -4px 6px rgba(140, 50, 10, .35), 0 8px 12px -5px rgba(180, 70, 20, .55); transform: rotate(12deg); }
.dm-claymorphism .cl-ico-donut { border-radius: 50%; background: radial-gradient(circle, transparent 0 8px, #8f76ff 9px 100%); box-shadow: inset 0 -4px 6px rgba(30, 10, 90, .35), inset 0 3px 4px rgba(255, 255, 255, .5), 0 8px 12px -5px rgba(106, 77, 224, .6); }
.dm-claymorphism .cl-kpi__ico.cl-ico-capsule { width: 48px; height: 24px; top: 24px; border-radius: 999px; background: linear-gradient(90deg, #5fc49a 0 50%, #fffdfb 50%); box-shadow: inset 0 -4px 6px rgba(20, 80, 60, .3), inset 0 3px 4px rgba(255, 255, 255, .7), 0 8px 12px -5px rgba(20, 100, 70, .5); transform: rotate(-28deg); }

.dm-claymorphism .cl-panels { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; min-height: 0; }
.dm-claymorphism .cl-card { display: flex; flex-direction: column; padding: 24px 26px; border-radius: 34px; min-height: 0; }
.dm-claymorphism .cl-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-claymorphism .cl-card__title { font-weight: 800; font-size: 18px; }
.dm-claymorphism .cl-card .cl-chip { height: 32px; --c: #f1ecfb; }
.dm-claymorphism .cl-bars { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 8px 6px 0; border-radius: 24px; }
.dm-claymorphism .cl-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dm-claymorphism .cl-bar i { display: block; width: 100%; max-width: 62px; border-radius: 22px 22px 16px 16px; background: var(--c); box-shadow: inset 0 -8px 12px rgba(43, 34, 68, .16), inset 0 8px 10px rgba(255, 255, 255, .85), 0 16px 22px -12px rgba(84, 58, 160, .5); }
.dm-claymorphism .cl-bar p { font-size: 12px; font-weight: 700; color: var(--muted); }
.dm-claymorphism .cl-bar__val { font-size: 13px; font-weight: 800; }
.dm-claymorphism .cl-card__foot { margin-top: 16px; padding: 12px 16px; border-radius: 20px; background: #fff4d1; font-size: 13px; font-weight: 600; color: #4a3d1a; box-shadow: var(--clay-in); }

.dm-claymorphism .cl-ops { display: grid; gap: 10px; }
.dm-claymorphism .cl-ops li { display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 22px; }
.dm-claymorphism .cl-ops li:nth-child(odd) { background: rgba(43, 34, 68, .035); }
.dm-claymorphism .cl-ops div { flex: 1; min-width: 0; }
.dm-claymorphism .cl-ops p { font-weight: 800; font-size: 15px; }
.dm-claymorphism .cl-ops span { font-size: 12px; font-weight: 600; color: var(--muted); }
.dm-claymorphism .cl-ops b { font-size: 15px; font-weight: 800; }
.dm-claymorphism .cl-ops .cl-plus { color: #17603f; }

/* aurora.css */
/* Демонстрация: Аврора-градиенты. Все селекторы ограничены .dm-aurora */

.dm-aurora {
  --bg: #0a0b1e;
  --surface: #121433;
  --ink: #f4f3ff;
  --muted: #b4b3d6;
  --line: rgba(244, 243, 255, .12);
  --teal: #19e3b1;
  --blue: #3d8bff;
  --violet: #8a5cff;
  --pink: #ff5fae;
  --aurora: linear-gradient(100deg, #19e3b1 0%, #3d8bff 38%, #8a5cff 68%, #ff5fae 100%);
  background: var(--bg);
  color: var(--ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
}
.dm-aurora h1, .dm-aurora .au-logo, .dm-aurora .au-stats dt, .dm-aurora .au-timer,
.dm-aurora .au-summary__big, .dm-aurora .au-btn {
  font-family: "Wix Madefor Display", "Wix Madefor Text", system-ui, sans-serif;
}

/* ----- Сияние: размытые перетекающие поля ----- */
.dm-aurora .au-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dm-aurora .au-field { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: 1; mix-blend-mode: screen; }
.dm-aurora .au-field--violet { left: 34%; top: -220px; width: 760px; height: 520px; background: radial-gradient(closest-side, #8a5cff, rgba(138, 92, 255, 0)); transform: rotate(-12deg); animation: au-drift 18s ease-in-out infinite alternate; }
.dm-aurora .au-field--teal { left: 58%; top: -40px; width: 620px; height: 300px; background: radial-gradient(closest-side, #19e3b1, rgba(25, 227, 177, 0)); transform: rotate(-24deg); animation: au-drift 22s ease-in-out infinite alternate-reverse; }
.dm-aurora .au-field--pink { left: 80%; top: 160px; width: 420px; height: 420px; background: radial-gradient(closest-side, #ff5fae, rgba(255, 95, 174, 0)); opacity: .7; }
.dm-aurora .au-field--blue { left: 12%; top: -160px; width: 520px; height: 300px; background: radial-gradient(closest-side, #3d8bff, rgba(61, 139, 255, 0)); opacity: .55; }
/* Вертикальные «лучи» занавеса сияния */
.dm-aurora .au-curtain { position: absolute; left: 48%; top: -60px; width: 680px; height: 460px; display: block; border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(150, 255, 220, .0) 0 26px, rgba(150, 255, 220, .32) 34px, rgba(150, 255, 220, 0) 46px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  filter: blur(10px); transform: rotate(-18deg) skewX(-14deg); mix-blend-mode: screen; opacity: .8; }

/* Затемнение под текстом: гарантирует контраст на любом участке градиента */
.dm-aurora .au-scrim { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(10, 11, 30, .82) 0%, rgba(10, 11, 30, .55) 42%, rgba(10, 11, 30, 0) 72%), linear-gradient(0deg, var(--bg) 0, rgba(10, 11, 30, 0) 46%); }

/* Зерно: CSS-шум из повторяющихся градиентов */
.dm-aurora .au-grain { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 1; opacity: .09; mix-blend-mode: overlay;
  background:
    repeating-radial-gradient(circle at 17% 29%, #000 0 .0001%, #fff 0 .0002%) 60% 60% / 3000px 3000px,
    repeating-conic-gradient(from 7deg at 63% 41%, #000 0 .0001%, #fff 0 .0002%) 40% 40% / 4000px 3000px;
  background-blend-mode: difference; }
.dm-aurora .au-grain--light { opacity: .14; mix-blend-mode: soft-light; }

@keyframes au-drift { from { translate: 0 0; } to { translate: -60px 24px; } }

/* ----- Общие элементы ----- */
.dm-aurora .au-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.dm-aurora .au-logo__mark { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(from 200deg, #19e3b1, #3d8bff, #8a5cff, #ff5fae, #19e3b1); -webkit-mask-image: radial-gradient(circle, transparent 0 7px, #000 8px); mask-image: radial-gradient(circle, transparent 0 7px, #000 8px); }
.dm-aurora .au-muted { color: var(--muted); font-size: 14px; }
.dm-aurora .au-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.dm-aurora .au-btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }
.dm-aurora .au-btn--light { background: #f4f3ff; color: #0a0b1e; }
.dm-aurora .au-btn--dark { background: #17132e; color: #fff; }
.dm-aurora .au-btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(244, 243, 255, .38); background: rgba(10, 11, 30, .55); }
.dm-aurora .au-btn--block { display: flex; width: 100%; }
.dm-aurora .au-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(25, 227, 177, .14); color: #7ff5d5; }
.dm-aurora .au-rec { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.dm-aurora .au-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff4f7b; box-shadow: 0 0 0 4px rgba(255, 79, 123, .25); }
.dm-aurora mark { color: inherit; background: linear-gradient(90deg, rgba(25, 227, 177, .28), rgba(138, 92, 255, .28)); border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -2px 0 rgba(25, 227, 177, .9); }

.dm-aurora .au-wave { display: flex; align-items: center; gap: 5px; height: 64px; }
.dm-aurora .au-wave i { flex: 1; display: block; min-width: 3px; border-radius: 4px; background: linear-gradient(180deg, #19e3b1, #3d8bff); }
.dm-aurora .au-wave i:nth-child(n+11) { background: linear-gradient(180deg, #3d8bff, #8a5cff); }
.dm-aurora .au-wave i:nth-child(n+21) { background: linear-gradient(180deg, #8a5cff, #c45cff); }
.dm-aurora .au-wave i:nth-child(n+31) { background: linear-gradient(180deg, #c45cff, #ff5fae); }

/* ----- Сайт ----- */
.dm-aurora.dm--site { padding: 0 64px; }
.dm-aurora .au-nav, .dm-aurora .au-hero, .dm-aurora .au-preview { position: relative; z-index: 2; }
.dm-aurora .au-nav { display: flex; align-items: center; gap: 28px; height: 84px; }
.dm-aurora .au-links { display: flex; gap: 30px; margin-left: 40px; font-size: 15px; color: var(--muted); }
.dm-aurora .au-links .is-active { color: var(--ink); }
.dm-aurora .au-navlink { margin-left: auto; font-size: 15px; font-weight: 500; }

.dm-aurora .au-hero { padding-top: 40px; }
.dm-aurora .au-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(10, 11, 30, .7); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.dm-aurora .au-eyebrow i { width: 14px; height: 14px; border-radius: 50%; background: var(--aurora); }
.dm-aurora .au-hero h1 { font-size: 92px; line-height: .98; font-weight: 700; letter-spacing: -.045em; margin: 22px 0 30px; max-width: 1060px; text-shadow: 0 2px 30px rgba(10, 11, 30, .45); }
.dm-aurora .au-hero__row { display: grid; grid-template-columns: 400px auto 1fr; gap: 40px; align-items: center; }
.dm-aurora .au-lead { font-size: 17px; line-height: 1.55; color: #d6d5ef; }
.dm-aurora .au-actions { display: flex; flex-direction: column; gap: 12px; }
.dm-aurora .au-stats { display: flex; justify-content: flex-end; gap: 36px; }
.dm-aurora .au-stats dt { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dm-aurora .au-stats dd { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 120px; line-height: 1.35; }

.dm-aurora .au-preview { margin-top: 48px; padding: 22px 28px 40px; border-radius: 28px 28px 0 0; background: var(--surface); box-shadow: inset 0 1px 0 rgba(244, 243, 255, .1); display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 40px; row-gap: 18px; }
.dm-aurora .au-preview__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; }
.dm-aurora .au-preview__head .au-tag { margin-left: auto; }
.dm-aurora .au-preview .au-wave { height: 120px; align-self: center; }
.dm-aurora .au-lines { display: grid; gap: 14px; font-size: 15px; line-height: 1.5; color: #dddcf2; }
.dm-aurora .au-lines b { color: var(--ink); font-weight: 600; margin-right: 10px; }
.dm-aurora .au-lines span { color: var(--muted); font-size: 12px; margin-right: 10px; font-variant-numeric: tabular-nums; }

/* ----- Приложение (светлая аврора) ----- */
.dm-aurora.dm--app { --ink: #17132e; --muted: #4f4a6b; background: #fbf8ff; color: var(--ink); display: flex; flex-direction: column; padding: 0 20px 22px; }
.dm-aurora .au-sky--light .au-field { mix-blend-mode: multiply; filter: blur(40px); opacity: 1; }
.dm-aurora .au-field--peach { left: -90px; top: 40px; width: 340px; height: 300px; background: radial-gradient(closest-side, #ff9f86, rgba(255, 159, 134, 0)); animation: au-drift 20s ease-in-out infinite alternate; }
.dm-aurora .au-field--lilac { left: 120px; top: -40px; width: 380px; height: 360px; background: radial-gradient(closest-side, #a98fff, rgba(169, 143, 255, 0)); }
.dm-aurora .au-field--mint { left: 150px; top: 250px; width: 320px; height: 260px; background: radial-gradient(closest-side, #6fe8c4, rgba(111, 232, 196, 0)); animation: au-drift 24s ease-in-out infinite alternate-reverse; }
.dm-aurora .au-field--sky { left: -60px; top: 330px; width: 260px; height: 220px; background: radial-gradient(closest-side, #9ccbff, rgba(156, 203, 255, 0)); }
.dm-aurora.dm--app > *:not(.au-sky):not(.au-grain) { position: relative; z-index: 2; }
.dm-aurora .au-status { display: flex; justify-content: space-between; padding: 14px 10px 0; font-size: 14px; font-weight: 700; }
.dm-aurora .au-status__icons { display: flex; gap: 4px; align-items: center; }
.dm-aurora .au-status__icons i { width: 16px; height: 10px; border-radius: 3px; background: var(--ink); }
.dm-aurora .au-appbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 0; font-size: 15px; font-weight: 600; }
.dm-aurora .au-appbar__title { font-weight: 700; }
.dm-aurora .au-appbar__more { font-size: 20px; letter-spacing: 1px; }

.dm-aurora .au-recorder { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 30px; }
.dm-aurora .au-rec--dark { height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .72); font-size: 13px; }
.dm-aurora .au-recorder__name { margin-top: 14px; font-size: 16px; font-weight: 600; max-width: 260px; line-height: 1.35; }
.dm-aurora .au-timer { font-size: 80px; font-weight: 600; letter-spacing: -.05em; line-height: 1; margin: 8px 0 14px; font-variant-numeric: tabular-nums; }
.dm-aurora .au-wave--dark { width: 100%; height: 54px; gap: 4px; }
.dm-aurora .au-wave.au-wave--dark i { background: #17132e; opacity: .85; }
.dm-aurora .au-wave--dark i:nth-child(n+17) { opacity: .25; }
.dm-aurora .au-controls { display: flex; align-items: center; gap: 28px; margin-top: 18px; }
.dm-aurora .au-ctl { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 8px 20px -10px rgba(23, 19, 46, .4); }
.dm-aurora .au-ctl--main { width: 78px; height: 78px; background: #17132e; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 16px 30px -12px rgba(23, 19, 46, .6); }
.dm-aurora .au-ctl__stop { width: 24px; height: 24px; border-radius: 6px; background: #ff4f7b; }
.dm-aurora .au-ctl__pause { width: 16px; height: 18px; border-left: 5px solid #17132e; border-right: 5px solid #17132e; }
.dm-aurora .au-ctl__flag { width: 14px; height: 18px; background: #17132e; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }

.dm-aurora .au-sheet { margin-top: auto; padding: 20px 20px 20px; border-radius: 28px; background: #ffffff; box-shadow: 0 -10px 40px -20px rgba(23, 19, 46, .35); }
.dm-aurora .au-sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dm-aurora .au-sheet__head p { font-weight: 700; font-size: 17px; }
.dm-aurora .au-tag--light { background: #efeafe; color: #4b3aa8; }
.dm-aurora .au-line { font-size: 14px; line-height: 1.5; color: #2c2748; padding: 8px 0; border-top: 1px solid #efedf6; }
.dm-aurora .au-line b { display: inline-block; min-width: 40px; color: #6a55d9; font-weight: 700; font-size: 13px; }
.dm-aurora.dm--app mark { background: linear-gradient(90deg, rgba(143, 240, 210, .6), rgba(185, 164, 255, .6)); box-shadow: none; }
.dm-aurora .au-line--live { color: var(--muted); }
.dm-aurora .au-caret { display: inline-block; width: 2px; height: 16px; margin-left: 3px; vertical-align: -3px; background: #6a55d9; animation: au-blink 1.1s steps(1) infinite; }
@keyframes au-blink { 50% { opacity: 0; } }
.dm-aurora .au-sheet .au-btn { margin-top: 10px; height: 54px; }

/* ----- Веб-платформа ----- */
.dm-aurora.dm--platform { display: grid; grid-template-columns: 248px 1fr; }
.dm-aurora .au-side { position: relative; z-index: 3; display: flex; flex-direction: column; padding: 26px 20px 22px; background: #0e1027; box-shadow: inset -1px 0 0 var(--line); }
.dm-aurora .au-side .au-btn { margin: 28px 0 22px; }
.dm-aurora .au-side__nav { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.dm-aurora .au-side__nav li { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; }
.dm-aurora .au-side__nav li span { margin-left: auto; font-size: 12px; color: #8f8eb3; }
.dm-aurora .au-side__nav .is-active { background: rgba(244, 243, 255, .08); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 #19e3b1; }
.dm-aurora .au-side__nav--spaces i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.dm-aurora .au-side__label { margin: 24px 12px 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8f8eb3; }
.dm-aurora .au-quota { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--surface); font-size: 13px; color: var(--muted); }
.dm-aurora .au-quota b { display: block; margin: 2px 0 10px; color: var(--ink); font-size: 15px; font-weight: 600; }
.dm-aurora .au-meter { display: block; height: 6px; border-radius: 999px; background: rgba(244, 243, 255, .1); overflow: hidden; }
.dm-aurora .au-meter i { display: block; height: 100%; border-radius: 999px; background: var(--aurora); }

.dm-aurora .au-work { position: relative; overflow: hidden; padding: 30px 36px 0; display: flex; flex-direction: column; }
.dm-aurora .au-work > header, .dm-aurora .au-grid { position: relative; z-index: 2; }
.dm-aurora .au-sky--band { bottom: auto; height: 300px; }
.dm-aurora .au-sky--band .au-field--violet { left: 20%; top: -300px; }
.dm-aurora .au-sky--band .au-field--teal { left: 52%; top: -170px; }
.dm-aurora .au-sky--band .au-field--pink { left: 78%; top: -200px; width: 380px; height: 300px; }
.dm-aurora .au-scrim--band { background: linear-gradient(90deg, rgba(10, 11, 30, .75) 0%, rgba(10, 11, 30, .1) 55%, rgba(10, 11, 30, .1) 100%), linear-gradient(0deg, var(--bg) 0, var(--bg) 40%, rgba(10, 11, 30, 0) 100%); }
.dm-aurora .au-work .au-grain { bottom: auto; height: 300px; }
.dm-aurora .au-work__head { display: flex; align-items: flex-end; gap: 16px; }
.dm-aurora .au-work__head > div { flex: 1; }
.dm-aurora .au-work__head h1 { font-size: 46px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin-top: 4px; }
.dm-aurora .au-search { display: flex; align-items: center; width: 300px; height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(10, 11, 30, .7); box-shadow: inset 0 0 0 1px rgba(244, 243, 255, .2); font-size: 14px; color: var(--muted); }

.dm-aurora .au-grid { flex: 1; display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin-top: 34px; min-height: 0; }
.dm-aurora .au-table-wrap { padding: 18px 22px 0; border-radius: 22px 22px 0 0; background: var(--surface); }
.dm-aurora .au-filters { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.dm-aurora .au-filters li { height: 32px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.dm-aurora .au-filters .is-on { color: #0a0b1e; background: #f4f3ff; box-shadow: none; font-weight: 600; }
.dm-aurora .au-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-aurora .au-table th { text-align: left; font-weight: 500; font-size: 12px; color: #8f8eb3; padding: 12px 8px 10px 0; border-bottom: 1px solid var(--line); }
.dm-aurora .au-table td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--line); color: #d6d5ef; vertical-align: middle; }
.dm-aurora .au-table td b { display: block; color: var(--ink); font-weight: 600; }
.dm-aurora .au-table td span:not(.au-st) { font-size: 12px; color: #8f8eb3; }
.dm-aurora .au-table .r { text-align: right; padding-right: 0; }
.dm-aurora .au-st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.dm-aurora .au-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.dm-aurora .au-st--done::before { background: #19e3b1; }
.dm-aurora .au-st--work::before { background: #3d8bff; box-shadow: 0 0 0 3px rgba(61, 139, 255, .25); }
.dm-aurora .au-st--check::before { background: #ffb547; }

.dm-aurora .au-aside { display: flex; flex-direction: column; gap: 20px; }
.dm-aurora .au-summary { position: relative; overflow: hidden; padding: 22px; border-radius: 24px; color: #0a0b1e;
  background:
    radial-gradient(260px 200px at 0% 0%, #7ff5d5, transparent 70%),
    radial-gradient(260px 220px at 100% 20%, #c3b2ff, transparent 70%),
    radial-gradient(280px 220px at 60% 110%, #ffb8dc, transparent 70%),
    #b9d6ff; }
.dm-aurora .au-summary > p, .dm-aurora .au-summary > div { position: relative; z-index: 2; }
.dm-aurora .au-summary__label { font-size: 13px; font-weight: 600; color: #262249; }
.dm-aurora .au-summary__big { font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 6px 0 6px; }
.dm-aurora .au-summary__text { font-size: 14px; line-height: 1.4; color: #262249; }
.dm-aurora .au-summary__row { display: flex; gap: 10px; margin-top: 14px; }
.dm-aurora .au-summary__row span { flex: 1; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .6); font-size: 13px; color: #262249; }
.dm-aurora .au-summary__row b { display: block; font-size: 20px; color: #0a0b1e; }
.dm-aurora .au-topics { flex: 1; padding: 20px 22px; border-radius: 22px 22px 0 0; background: var(--surface); }
.dm-aurora .au-topics__title { font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.dm-aurora .au-topics li { display: grid; grid-template-columns: 90px 1fr 24px; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; color: #d6d5ef; }
.dm-aurora .au-topics li b { text-align: right; color: var(--ink); font-weight: 600; }
.dm-aurora .au-topics__note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); }