/* Демо-окно приложения.
   Токены повторяют Lexora/Sources/UI/DesignSystem.swift:
   Spacing 4/8/12/16/24/32, Radii.card 12, Radii.chip 8,
   карточка - Color.primary.opacity(0.045) с рамкой 0.08,
   акцент - системный синий macOS, выделение в сайдбаре - оранжевый #FF9F0A. */
:root, .ev{
  --ev-bg: #252525;
  --ev-panel: #2b2b2b;
  --ev-fill-1: rgba(255, 255, 255, .045);
  --ev-fill-2: rgba(255, 255, 255, .07);
  --ev-fill-3: rgba(255, 255, 255, .035);
  --ev-stroke: rgba(255, 255, 255, .08);
  --ev-stroke-strong: rgba(255, 255, 255, .16);
  --ev-text: #f2f2f2;
  --ev-text-2: rgba(255, 255, 255, .56);
  --ev-text-3: rgba(255, 255, 255, .3);
  --ev-oncolor: #1c1c1c;
  --ev-accent: #0a84ff;
  --ev-orange: #ff9f0a;
  --ev-green: #30d158;
  --ev-indigo: #5e5ce6;
  --ev-teal: #40c8e0;
  --ev-cyan: #64d2ff;
  --ev-mint: #63e6e2;
  --ev-pink: #ff375f;
  --ev-purple: #bf5af2;
  --ev-red: #ff453a;
  --ev-yellow: #ffd60a;
  --ev-r-card: 12px;
  --ev-r-chip: 8px;
}

/* --- иконки --- */
.ev-ic{ flex: none; display: inline-block; vertical-align: middle; }
.ev-ic-glyph{
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
}

/* --- корпус окна --- */
.product-window{
  width: 100%; height: 660px; overflow: hidden;
  background: var(--ev-bg); color: var(--ev-text);
  border: 1px solid #3c3c3c; border-radius: 13px;
  box-shadow: 0 20px 44px #00000040;
  font-size: 13px; line-height: 1.35;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
.window-bar{ position: relative; height: 38px; }
.window-dots{ position: absolute; top: 12px; left: 13px; display: flex; gap: 8px; }
.window-dots i{ width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.window-dots i:nth-child(2){ background: #febc2e; }
.window-dots i:nth-child(3){ background: #28c840; }

.product-layout{ display: flex; height: 622px; }

/* --- боковое меню --- */
.product-sidebar{
  width: 210px; flex: none; display: flex; flex-direction: column;
  padding: 4px 16px 12px; background: var(--ev-bg);
}
.product-brand{ display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 8px; }
.product-brand .ev-ic{ color: var(--ev-accent); }
.product-brand strong{ font-size: 14px; font-weight: 600; }
.product-brand .brand-collapse{
  margin-left: auto; width: 36px; height: 36px; border-radius: var(--ev-r-chip);
  display: grid; place-items: center; color: var(--ev-text-2);
}
.product-nav{ display: grid; align-content: start; gap: 2px; }
.product-nav-row{
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 28px; padding: 2px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ev-text); text-align: left;
  font-size: 13px; font-weight: 400; font-family: inherit;
}
.product-nav-row:hover{ background: rgba(255, 255, 255, .06); }
.product-nav-row .product-nav-icon{
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--ev-text-2); flex: none;
}
.product-nav-row.active{ background: var(--ev-accent); color: #fff; font-weight: 600; }
.product-nav-row.active .product-nav-icon{ color: var(--ev-orange); }

.product-profile{
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding: 8px; min-height: 46px; cursor: pointer;
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke);
  border-radius: var(--ev-r-chip);
}
.product-profile.active{ border-color: rgba(10, 132, 255, .5); }
.mini-avatar{
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: #3f5f80; color: #fff; border: 1px solid rgba(255, 255, 255, .12);
}
.product-profile .who{ flex: 1; min-width: 0; display: grid; gap: 5px; }
.product-profile .who strong{
  font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar-limit{ height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sidebar-limit i{ display: block; height: 100%; width: 12%; border-radius: 999px; background: var(--ev-accent); }

/* --- рабочая область --- */
.product-content{
  flex: 1; min-width: 0; height: 100%; overflow: auto;
  padding: 24px 24px 32px; background: var(--ev-bg);
  scrollbar-width: none;
}
.product-content::-webkit-scrollbar{ width: 0; height: 0; }
.product-content > * + *{ margin-top: 24px; }
.product-content .stack-m > * + *{ margin-top: 12px; }
.product-content .stack-s > * + *{ margin-top: 8px; }

/* --- базовые примитивы приложения --- */
.ev-card{
  padding: 16px; border-radius: var(--ev-r-card);
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke);
}
.ev-sect{
  font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ev-text-2);
}
.ev-row{ display: flex; align-items: center; gap: 12px; }
.ev-row-top{ display: flex; align-items: flex-start; gap: 12px; }
.ev-spacer{ flex: 1; min-width: 0; }
.ev-divider{ height: 1px; background: rgba(255, 255, 255, .08); }
.ev-muted{ color: var(--ev-text-2); }

.ev-head h4{ margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.ev-head p{ margin: 8px 0 0; font-size: 13px; color: var(--ev-text-2); }

.ev-badge{
  display: inline-grid; place-items: center; flex: none;
  border-radius: 10px; color: var(--ev-accent);
  background: rgba(10, 132, 255, .15);
}
.ev-badge.green{ color: var(--ev-green); background: rgba(48, 209, 88, .16); }
.ev-badge.orange{ color: var(--ev-orange); background: rgba(255, 159, 10, .16); }
.ev-badge.indigo{ color: var(--ev-indigo); background: rgba(94, 92, 230, .2); }
.ev-badge.teal{ color: var(--ev-teal); background: rgba(64, 200, 224, .16); }
.ev-badge.cyan{ color: var(--ev-cyan); background: rgba(100, 210, 255, .16); }
.ev-badge.mint{ color: var(--ev-mint); background: rgba(99, 230, 226, .16); }
.ev-badge.pink{ color: var(--ev-pink); background: rgba(255, 55, 95, .16); }
.ev-badge.purple{ color: var(--ev-purple); background: rgba(191, 90, 242, .16); }
.ev-badge.quiet{ color: var(--ev-text-2); background: rgba(255, 255, 255, .06); }

.ev-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 1px solid var(--ev-stroke);
  border-radius: var(--ev-r-chip); background: rgba(255, 255, 255, .07);
  color: var(--ev-text); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ev-btn.primary{ background: var(--ev-accent); border-color: rgba(255, 255, 255, .14); color: #fff; }
.ev-btn.large{ height: 38px; padding: 0 16px; font-size: 13px; }
.ev-icon-btn{
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: var(--ev-r-chip); color: var(--ev-text-2);
}
.ev-icon-btn.red{ color: var(--ev-red); }
.ev-icon-btn:hover{ background: rgba(255, 255, 255, .09); }

.ev-field{
  display: flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 0 10px; border-radius: 7px; font-size: 13px;
  background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06);
}
.ev-field.placeholder{ color: var(--ev-text-2); }

.ev-pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, .055); color: var(--ev-text-2);
}
.ev-pill.green{ color: var(--ev-green); background: rgba(48, 209, 88, .12); }

.ev-meta{
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px; font-size: 10px; color: var(--ev-text-2);
  background: rgba(255, 255, 255, .06); border: .5px solid var(--ev-stroke);
  white-space: nowrap;
}

.ev-progress{ height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ev-progress i{ display: block; height: 100%; border-radius: 999px; background: var(--ev-accent); }
.ev-progress.green i{ background: var(--ev-green); }
.ev-progress.orange i{ background: var(--ev-orange); }
.ev-progress.indigo i{ background: var(--ev-indigo); }
.ev-progress.blue i{ background: var(--ev-accent); }

.ev-dots{ display: inline-flex; gap: 3px; align-items: center; }
.ev-dots i{ width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ev-dots.teal i.on{ background: var(--ev-teal); }
.ev-dots.green i.on{ background: var(--ev-green); }

.ev-switch{
  display: flex; gap: 4px; padding: 4px; border-radius: 9px;
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke);
}
.ev-switch > span{
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ev-text-2);
}
.ev-switch > span.on{ background: rgba(10, 132, 255, .14); color: var(--ev-accent); }

.ev-toggle{
  width: 34px; height: 20px; flex: none; border-radius: 999px;
  background: rgba(255, 255, 255, .16); position: relative;
}
.ev-toggle::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #f5f5f5;
}
.ev-toggle.on{ background: var(--ev-accent); }
.ev-toggle.on::after{ left: auto; right: 2px; }

.ev-empty{
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 16px; min-height: 116px; align-content: center;
  border-radius: 10px; background: var(--ev-fill-3);
}
.ev-empty .ev-ic{ color: var(--ev-text-2); }
.ev-empty strong{ font-size: 13px; font-weight: 600; }
.ev-empty span{ font-size: 12px; color: var(--ev-text-2); }

/* --- главная --- */
.stat-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric{
  display: flex; align-items: center; gap: 12px; min-height: 54px; min-width: 0;
  padding: 10px 12px; border-radius: var(--ev-r-card);
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke);
}
.metric > .ev-badge{ width: 28px; height: 28px; border-radius: 8px; }
.metric .num{ display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.metric .num em{ font-style: normal; font-size: 11px; font-weight: 500; color: var(--ev-text-2); margin-left: 3px; }
.metric small{ display: block; font-size: 11px; color: var(--ev-text-2); white-space: nowrap; }

.saved-card{
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--ev-r-card);
  background: rgba(10, 132, 255, .07); border: 1px solid rgba(10, 132, 255, .16);
}
.saved-card > .ev-badge{ width: 32px; height: 32px; border-radius: 9px; background: rgba(10, 132, 255, .14); }
.saved-card strong{ display: block; font-size: 13px; font-weight: 600; }
.saved-card small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.saved-card b{ margin-left: auto; font-size: 20px; font-weight: 600; color: var(--ev-accent); }

.heat-legend{ display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ev-text-2); }
.heat-legend i{ width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.heat-wrap{ display: flex; gap: 8px; align-items: flex-start; }
.heat-days{ display: grid; gap: 3px; width: 22px; text-align: right; font-size: 9px; color: var(--ev-text-2); }
.heat-days span{ height: 14px; line-height: 14px; }
.heatmap{ flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.heatmap div{ display: grid; gap: 3px; }
.heatmap i{ height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.heatmap i.l1{ background: rgba(48, 209, 88, .25); }
.heatmap i.l2{ background: rgba(48, 209, 88, .45); }
.heatmap i.l3{ background: rgba(48, 209, 88, .65); }
.heatmap i.l4{ background: rgba(48, 209, 88, .85); }
.heat-foot{ display: flex; gap: 16px; font-size: 12px; color: var(--ev-text-2); }
.heat-foot strong{ color: var(--ev-text); font-weight: 600; }

.how-row{ display: flex; align-items: center; gap: 12px; padding: 2px 0; }
.how-row > .ev-badge{ width: 26px; height: 26px; border-radius: 7px; }
.how-row strong{ display: block; font-size: 13px; font-weight: 600; }
.how-row small{ display: block; margin-top: 1px; font-size: 11px; color: var(--ev-text-2); line-height: 1.35; }

/* --- чат --- */
.screen-chat{ display: flex; gap: 12px; height: 100%; padding-bottom: 0; }
.screen-chat > * + *{ margin-top: 0; }
.chat-list, .chat-dialog{
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke); border-radius: var(--ev-r-card);
}
.chat-list{ width: 230px; flex: none; }
.chat-dialog{ flex: 1; min-width: 0; }
.chat-list-head{ display: flex; align-items: center; gap: 4px; padding: 12px; }
.chat-list-head strong{ font-size: 13px; font-weight: 600; }
.chat-list-head .ev-icon-btn{ width: 28px; height: 28px; }
.chat-list-body{ flex: 1; overflow: hidden; padding: 8px; display: grid; align-content: start; gap: 4px; }
.chat-item{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--ev-r-chip); }
.chat-item.on{ background: rgba(10, 132, 255, .14); }
.chat-item .ev-ic{ color: var(--ev-accent); }
.chat-item strong{ display: block; font-size: 12px; font-weight: 600; }
.chat-item small{ display: block; margin-top: 2px; font-size: 10px; color: var(--ev-text-2); }
.chat-toolbar{ display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 12px; }
.chat-toolbar strong{ display: block; font-size: 14px; font-weight: 600; }
.chat-toolbar small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.chat-model{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.chat-body{ flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 16px; }
.chat-body .ev-ic{ color: var(--ev-text-2); }
.chat-body strong{ font-size: 15px; font-weight: 600; }
.chat-body p{ margin: 0; max-width: 260px; font-size: 12px; color: var(--ev-text-2); line-height: 1.45; }
.chat-composer{ margin: 12px; padding: 6px; display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--ev-stroke); border-radius: 12px; }
.chat-composer > span:first-child{ flex: 1; padding: 0 6px; font-size: 13px; color: var(--ev-text-2); }
.chat-send{ width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: rgba(255, 255, 255, .085); color: var(--ev-text-2); }

/* --- история --- */
.history-search{
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; min-height: 34px;
  border-radius: var(--ev-r-chip); background: rgba(255, 255, 255, .05); border: 1px solid var(--ev-stroke);
  color: var(--ev-text-2); font-size: 13px;
}
.history-record{ padding: 12px; }
.history-record > * + *{ margin-top: 8px; }
.history-record .body{ margin: 0; font-size: 13px; line-height: 1.45; }
.record-audio{
  display: flex; align-items: center; gap: 8px; padding: 8px;
  border-radius: var(--ev-r-chip); background: var(--ev-fill-3); border: 1px solid var(--ev-stroke);
}
.record-play{ width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: var(--ev-r-chip); background: rgba(10, 132, 255, .18); color: var(--ev-accent); }
.waveform{ flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 1.5px; overflow: hidden; }
.waveform i{ flex: 1 1 0; min-width: 1px; border-radius: 2px; background: rgba(255, 255, 255, .32); }
.record-meta{ display: flex; align-items: center; gap: 6px; min-height: 36px; }
.app-chip{ width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); font-size: 11px; }
.record-actions{ margin-left: auto; display: flex; align-items: center; gap: 2px; }
.record-model{ display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 28px;
  border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--ev-text-2); }
.record-model:hover{ background: rgba(255, 255, 255, .07); }

/* --- словарь, фразы --- */
.entry-row{ display: flex; align-items: center; gap: 8px; padding: 12px; }
.entry-row .ev-field{ flex: 1; min-width: 0; }
.entry-row .arrow{ color: var(--ev-text-2); flex: none; }
.entry-row .actions{ display: flex; gap: 2px; flex: none; }
.phrase-key{ width: 170px; flex: none; }

/* --- блокнот --- */
.notes-columns{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.notebook-item{ padding: 10px; border-radius: var(--ev-r-chip); border: 1px solid transparent; }
.notebook-item.on{ background: rgba(10, 132, 255, .13); border-color: rgba(10, 132, 255, .42); }
.notebook-item strong{ display: block; font-size: 13px; font-weight: 600; }
.notebook-item small{ display: block; margin-top: 3px; font-size: 11px; color: var(--ev-text-2); }
.note-area{ min-height: 96px; padding: 10px; border-radius: 7px; font-size: 12px; line-height: 1.45;
  background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06); color: var(--ev-text-2); }
.presets-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preset{
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px;
  border-radius: 8px; background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .07);
}
.preset.on{ background: rgba(10, 132, 255, .13); border-color: rgba(10, 132, 255, .42); }
.preset .name{ flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset > .ev-ic:first-child{ color: var(--ev-text-2); }
.preset.on > .ev-ic:first-child{ color: var(--ev-accent); }
.preset .ev-icon-btn{ width: 26px; height: 26px; }

/* --- конвертация --- */
.dropzone{
  position: relative; display: grid; justify-items: center; align-content: center; gap: 12px;
  min-height: 240px; padding: 16px; text-align: center;
  border-radius: 10px; background: rgba(255, 255, 255, .025);
  border: 1.3px dashed rgba(255, 255, 255, .18);
}
.dropzone > .ev-ic{ color: var(--ev-accent); }
.dropzone strong{ font-size: 15px; font-weight: 600; }
.dropzone .formats{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dropzone .formats span{
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--ev-stroke);
}
.dropzone .model-line{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ev-text-2); }
.dropzone .corner-menu{ position: absolute; top: 12px; right: 12px; }

/* --- модели --- */
.models-head{ display: flex; align-items: center; gap: 12px; }
.models-head h4{ margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.models-head .ev-switch{ width: 224px; flex: none; }
.model-islands{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.model-island{ display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--ev-r-card); background: var(--ev-fill-1); border: 1px solid var(--ev-stroke); }
.model-island > .ev-badge{ width: 38px; height: 38px; }
.model-island .cap{ display: block; font-size: 10px; font-weight: 600; color: var(--ev-text-2); }
.model-island .val{ display: block; margin-top: 2px; font-size: 13px; font-weight: 600; }
.model-island .sub{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.models-split{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.model-row{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06); }
.model-row.on{ background: rgba(94, 92, 230, .1); border-color: rgba(94, 92, 230, .3); }
.model-logo{ width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; }
.model-row .title{ flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-row .meters{ display: grid; gap: 3px; width: 37px; flex: none; }
.model-row .ev-ic{ color: var(--ev-text-2); }
.model-detail .name{ display: flex; align-items: center; gap: 10px; }
.model-detail .name .ev-badge{ width: 34px; height: 34px; }
.model-detail .name strong{ display: block; font-size: 16px; font-weight: 600; }
.model-detail .name small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.metric-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.metric-row > span:first-child{ color: var(--ev-text-2); }
.metric-row b{ font-weight: 500; }
.model-chosen{ display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px;
  border-radius: var(--ev-r-chip); background: rgba(48, 209, 88, .12); color: var(--ev-green);
  font-size: 13px; font-weight: 600; }
.model-chosen span{ color: var(--ev-text); }

/* --- достижения --- */
.level-card{ display: flex; align-items: center; gap: 12px; }
.level-card strong{ font-size: 15px; font-weight: 600; white-space: nowrap; }
.level-card .ev-progress{ flex: 1; }
.level-card small{ font-size: 13px; font-weight: 600; color: var(--ev-text-2); white-space: nowrap; }
.ach-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ach-card > * + *{ margin-top: 12px; }
.ach-card .top{ display: flex; align-items: center; gap: 12px; }
.ach-card .top > .ev-badge{ width: 42px; height: 42px; border-radius: 12px; }
.ach-card h5{ margin: 0; font-size: 14px; font-weight: 600; }
.ach-card .sub{ margin: 3px 0 0; font-size: 12px; color: var(--ev-text-2); }
.ach-steps{ display: flex; gap: 5px; }
.ach-steps span{
  flex: 1; min-width: 34px; min-height: 20px; display: grid; place-items: center;
  border-radius: 6px; font-size: 9px; font-weight: 600;
  background: rgba(255, 255, 255, .045); color: var(--ev-text-2);
}
.ach-foot{ display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ev-text-2); }

/* --- поддержка --- */
.support-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.support-card{ padding: 16px; border-radius: var(--ev-r-card); min-height: 118px;
  background: var(--ev-fill-1); border: 1px solid var(--ev-stroke); }
.support-card > .ev-badge{ width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px; }
.support-card strong{ display: block; font-size: 14px; font-weight: 600; }
.support-card small{ display: block; margin-top: 3px; font-size: 12px; color: var(--ev-text-2); line-height: 1.4; }
.support-split{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.faq-row{ display: flex; align-items: flex-start; gap: 8px; }
.faq-row .ev-ic{ color: var(--ev-accent); margin-top: 2px; }
.faq-row strong{ display: block; font-size: 13px; font-weight: 600; }
.faq-row small{ display: block; margin-top: 2px; font-size: 12px; color: var(--ev-text-2); }
.contact-btn{ display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: var(--ev-r-chip); font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }

/* --- настройки --- */
.overlay-styles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overlay-style{ padding: 8px; border-radius: 10px; text-align: center;
  background: var(--ev-fill-3); border: 1px solid var(--ev-stroke); }
.overlay-style.on{ background: rgba(10, 132, 255, .12); border: 1.5px solid var(--ev-accent); }
.overlay-style .preview{ height: 58px; display: grid; place-items: center; border-radius: var(--ev-r-chip); background: var(--ev-bg); }
.overlay-style .chip{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; background: #313131; border: 1px solid rgba(255, 255, 255, .14); }
.overlay-style .chip i{ width: 7px; height: 7px; border-radius: 50%; background: var(--ev-red); }
.overlay-style .bars{ display: flex; align-items: center; gap: 2px; height: 12px; }
.overlay-style .bars b{ width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.overlay-style > span{ display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--ev-text-2); }
.overlay-style.on > span{ color: var(--ev-accent); }
.setting-row{ display: flex; align-items: center; gap: 12px; }
.setting-row strong{ display: block; font-size: 13px; font-weight: 500; }
.setting-row small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.menu-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-item{ display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px;
  border-radius: 10px; background: rgba(10, 132, 255, .09); border: 1px solid rgba(10, 132, 255, .34); }
.menu-item > .ev-badge{ width: 28px; height: 28px; border-radius: 8px; }
.menu-item .name{ flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item > .ev-ic:last-child{ color: var(--ev-accent); }

/* --- профиль --- */
.profile-head{ display: flex; align-items: center; gap: 12px; }
.big-avatar{ width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; font-weight: 600; background: #3f5f80; color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.profile-head h4{ margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.profile-head h4 .ev-ic{ color: var(--ev-text-2); }
.profile-head .sync{ display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--ev-accent); }
.plan-badge{ display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--ev-fill-3); border: 1px solid var(--ev-stroke); }
.plan-badge .ev-ic{ color: var(--ev-accent); }
.plan-badge small{ display: block; font-size: 10px; color: var(--ev-text-2); }
.plan-badge strong{ display: block; margin-top: 2px; font-size: 13px; font-weight: 600; }
.limit-row > * + *{ margin-top: 6px; }
.limit-head{ display: flex; justify-content: space-between; font-size: 13px; }
.limit-head span:first-child{ font-weight: 500; }
.limit-head span:last-child{ color: var(--ev-text-2); font-weight: 500; }
.invite-row{ display: flex; align-items: center; gap: 8px; }
.invite-url{ flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; padding: 0 14px;
  border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.friends-split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.danger-btn{ background: var(--ev-red); border-color: rgba(255, 255, 255, .14); color: #fff; }

/* --- адаптив демо-окна --- */
@media (max-width: 1180px){
  .product-content { padding: 20px 18px 28px; }
  .product-sidebar { width: 186px; padding-inline: 12px; }
  .stat-grid { gap: 8px; }
  .metric { padding: 9px 10px; gap: 8px; }
  .metric .num { font-size: 16px; }
}

/* --- подписки: палитра повторяет SubscriptionContent из приложения --- */
.price-card.start{ --plan: #0a84ff; --plan-bg: rgba(10, 132, 255, .14); border-color: rgba(10, 132, 255, .3); }
.price-card.pro{ --plan: #8582ff; --plan-bg: rgba(94, 92, 230, .18); border-color: rgba(94, 92, 230, .55); }
.price-card.studio{ --plan: #30d158; --plan-bg: rgba(48, 209, 88, .14); border-color: rgba(48, 209, 88, .3); }
.plan-badge-best{
  position: absolute; top: 18px; right: 16px;
  padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600;
  color: var(--plan); background: var(--plan-bg);
}
.price-card .plan-limits{
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 10px; font-weight: 500; color: #9a9a9a; line-height: 1.5; height: auto;
}

/* --- иконки в маркетинговых блоках --- */
.benefit-icon .ev-ic{ display: block; }
.connected-list > div > span .ev-ic{ display: block; }

/* ==========================================================================
   Правки второй итерации
   ========================================================================== */

/* --- иконка приложения: squircle macOS вместо круглой обрезки --- */
.brand img, .download-symbol img, .hero-icon, .product-brand .brand-mark{
  border-radius: 22.5%;
  background: transparent;
}
.hero-icon{
  width: 104px; height: 104px; margin: 0 auto 26px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}
.brand img{ width: 30px; height: 30px; }
.product-brand .brand-mark{ width: 24px; height: 24px; flex: none; }
.download-symbol img{ width: 68px; height: 68px; }

/* --- Чат: реальная переписка --- */
.chat-item{ width: 100%; border: 0; background: transparent; color: inherit; text-align: left;
  font-family: inherit; cursor: pointer; }
.chat-item:hover{ background: rgba(255, 255, 255, .05); }
.chat-item.on, .chat-item.on:hover{ background: rgba(10, 132, 255, .14); }
.chat-item span{ min-width: 0; }
.chat-messages{ flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 4px; }
.msg{ max-width: 80%; padding: 9px 12px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.msg strong{ display: block; margin-bottom: 4px; }
.msg p{ margin: 0; }
.msg.me{ align-self: flex-end; background: rgba(10, 132, 255, .18); }
.msg.ai{ align-self: flex-start; display: flex; gap: 8px; background: transparent; padding: 0; max-width: 88%; }
.msg.ai > div{ background: rgba(255, 255, 255, .055); border-radius: 11px; padding: 9px 12px; }
.msg-avatar{ width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 132, 255, .14); color: var(--ev-accent); }

/* --- Словарь: тип записи, черновик и подсказки --- */
.entry-row.draft{ border-color: rgba(10, 132, 255, .4); background: rgba(10, 132, 255, .05); }
.ev-field.focus{ background: rgba(0, 0, 0, .35); border-color: rgba(10, 132, 255, .45); color: var(--ev-text); }
.entry-kind{ flex: none; font-size: 11px; color: var(--ev-text-2); white-space: nowrap; }
.ev-icon-btn.green{ color: var(--ev-green); }
.dict-tips{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tip-title{ display: block; font-size: 13px; font-weight: 600; }
.tip-text{ font-size: 12px; line-height: 1.45; margin-top: 3px; }
.dict-tips small.tip-text{ display: block; color: var(--ev-text-2); }

/* --- Блокнот: кликабельные блокноты и пресеты в две колонки --- */
.notebook-item, .preset{ width: 100%; border: 1px solid transparent; background: transparent;
  color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.notebook-item:hover{ background: rgba(255, 255, 255, .05); }
.notebook-item.on:hover{ background: rgba(10, 132, 255, .16); }
.presets-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset{ cursor: pointer; }
.preset:hover{ background: rgba(255, 255, 255, .06); }
.preset.on:hover{ background: rgba(10, 132, 255, .16); }

/* --- Короткие фразы: строка тянется под двухстрочный текст --- */
.entry-row.phrase-row{ align-items: stretch; }
.phrase-row .ev-field{ min-height: 46px; }
.phrase-row .phrase-value{ flex: 1; min-width: 0; align-items: center; padding: 8px 10px;
  line-height: 1.45; white-space: normal; }
.phrase-row .arrow, .phrase-row .actions{ align-self: center; }

/* --- Модели: фильтры, premium и лёгкий режим --- */
.ev-switch > span{ cursor: pointer; }
.model-row{ width: 100%; border: 1px solid rgba(255, 255, 255, .06); text-align: left;
  font-family: inherit; color: inherit; cursor: pointer; }
.model-row:hover{ background: rgba(255, 255, 255, .06); }
.model-row.on{ background: rgba(94, 92, 230, .12); border-color: rgba(94, 92, 230, .34); }
.model-row.on > .ev-ic:last-child{ color: var(--ev-indigo); }
.model-row.premium{ background: rgba(10, 132, 255, .07); border-color: rgba(10, 132, 255, .24); }
.model-row.premium.on{ background: rgba(10, 132, 255, .12); border-color: rgba(10, 132, 255, .42); }
.model-row.premium.on > .ev-ic:last-child{ color: var(--ev-accent); }
.premium-tag{ flex: none; padding: 2px 6px; border-radius: 999px; font-size: 8px; font-weight: 700;
  letter-spacing: .04em; color: var(--ev-accent); background: rgba(10, 132, 255, .16); }
.premium-banner{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ev-r-card);
  background: linear-gradient(90deg, rgba(10, 132, 255, .16), rgba(10, 132, 255, .05));
  border: 1px solid rgba(10, 132, 255, .34); }
.premium-banner strong{ display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.premium-banner small{ display: block; margin-top: 3px; font-size: 12px; color: var(--ev-text-2); }
.premium-meters{ display: grid; gap: 3px; flex: none; }
.premium-crown{ color: var(--ev-yellow); flex: none; }
.priority-row{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px;
  border-radius: 10px; background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06);
  color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.priority-row:hover{ background: rgba(255, 255, 255, .06); }
.priority-row.on{ background: rgba(10, 132, 255, .11); border-color: rgba(10, 132, 255, .36); }
.priority-row > span:not(.ev-badge){ flex: 1; min-width: 0; }
.picked-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.priority-row strong{ display: block; font-size: 13px; font-weight: 600; }
.priority-row small{ display: block; margin-top: 3px; font-size: 11px; color: var(--ev-text-2); }
.priority-row > .ev-ic:last-child{ color: var(--ev-text-2); }
.priority-row.on > .ev-ic:last-child{ color: var(--ev-accent); }
.simple-title{ font-size: 18px; font-weight: 600; }
.simple-sub{ margin: 6px 0 0; font-size: 12px; color: var(--ev-text-2); line-height: 1.45; }
.simple-note{ margin: 0; font-size: 11px; color: var(--ev-text-2); line-height: 1.45; }
.picked-for{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--ev-accent); }
.model-detail .ev-badge{ border-radius: 14px; }

/* --- Достижения: ступени в цвет направления --- */
.ach-steps span.on{ color: #fff; }
.ach-steps span.on.green{ background: rgba(48, 209, 88, .55); }
.ach-steps span.on.indigo{ background: rgba(94, 92, 230, .6); }
.ach-steps span.on.blue{ background: rgba(10, 132, 255, .55); }
.ach-steps span.on.orange{ background: rgba(255, 159, 10, .6); }
.ach-steps span.on.mint{ background: rgba(99, 230, 226, .5); }
.ach-steps span.on.teal{ background: rgba(64, 200, 224, .5); }
.ach-steps span.on.pink{ background: rgba(255, 55, 95, .55); }
.ach-steps span.on.purple{ background: rgba(191, 90, 242, .55); }
.ev-progress.mint i{ background: var(--ev-mint); }
.ev-progress.teal i{ background: var(--ev-teal); }
.ev-progress.pink i{ background: var(--ev-pink); }
.ev-progress.purple i{ background: var(--ev-purple); }
.live-dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* --- Настройки: клавиши, выпадающие списки, выбор, память --- */
.overlay-style, .choice-row{ font-family: inherit; color: inherit; cursor: pointer; }
.overlay-style{ border: 1px solid var(--ev-stroke); width: 100%; }
.overlay-style .preview{ display: grid; place-items: center; }
.overlay-style .chip.dot{ padding: 8px; }
.overlay-style .preview.theme-1{ background: #f2f2f2; color: #1c1c1e; }
.overlay-style .preview.theme-2{ background: #1a1a1a; color: #f2f2f2; }
.ev-key{ display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); }
.keycaps{ display: flex; gap: 4px; flex: none; }
.ev-select{ display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--ev-r-chip); font-size: 13px; font-weight: 500; flex: none;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--ev-stroke-strong); }
.choice-row{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px;
  border-radius: 10px; background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06);
  text-align: left; }
.choice-row.on{ background: rgba(10, 132, 255, .1); border-color: rgba(10, 132, 255, .34); }
.choice-row > .ev-ic{ color: var(--ev-text-2); }
.choice-row.on > .ev-ic{ color: var(--ev-accent); }
.choice-row strong{ display: block; font-size: 13px; font-weight: 500; }
.choice-row small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.ev-pill.accent{ color: var(--ev-accent); background: rgba(10, 132, 255, .1); }
.voice-steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.voice-step{ display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px;
  font-size: 12px; font-weight: 500; background: var(--ev-fill-3); border: 1px solid rgba(255, 255, 255, .06); }
.voice-step .ev-ic{ color: var(--ev-accent); }
.step-num{ width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 10px; font-weight: 700; background: rgba(10, 132, 255, .16); color: var(--ev-accent); }
.voice-examples{ display: flex; flex-wrap: wrap; gap: 6px; }
.voice-examples span{ display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border-radius: 999px; font-size: 11px; color: var(--ev-text-2);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ev-stroke); }
.voice-examples .ev-ic{ color: var(--ev-accent); }
.memory-bar{ display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .08); }
.memory-bar i.used{ background: rgba(255, 255, 255, .28); }
.memory-bar i.audio{ background: var(--ev-indigo); }
.memory-bar i.text{ background: var(--ev-green); }
.memory-legend{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--ev-text-2); }
.memory-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.memory-legend i{ width: 8px; height: 8px; border-radius: 2px; }
.memory-legend i.used{ background: rgba(255, 255, 255, .28); }
.memory-legend i.audio{ background: var(--ev-indigo); }
.memory-legend i.text{ background: var(--ev-green); }
.danger-card{ border-color: rgba(255, 69, 58, .24); }

/* --- Боковое меню и профиль: кнопки --- */
.product-profile{ width: 100%; text-align: left; font-family: inherit; color: inherit; }
.product-nav-row{ cursor: pointer; }

/* --- Блок загрузки по центру --- */
.download-card{ flex-direction: column; text-align: center; gap: 0; padding: 40px 32px; }
.download-card .eyebrow{ margin: 20px 0 9px; }
.download-card h2{ font-size: 34px; }
.download-card p:not(.eyebrow){ max-width: 460px; margin: 10px auto 0; }
.download-action{ margin: 24px 0 0; display: grid; justify-items: center; gap: 10px; }
.download-action small{ max-width: none; margin: 0; }
@media (max-width: 640px) {
  .hero-icon{ width: 84px; height: 84px; margin-bottom: 20px; }

  .download-card{ padding: 28px 18px; }
}

/* 43% + 57% + gap выходили за контейнер и давали горизонтальную прокрутку */
.models-section{ grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); }
.connected-layout{ grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }

/* ==========================================================================
   Финальная итерация
   ========================================================================== */

/* --- сайдбар по присланному примеру --- */
.product-sidebar{ padding: 8px 12px 12px; position: relative; }
/* Тихая скруглённая рамка вокруг всей навигации, как в приложении */
.product-sidebar::before{
  content: ""; position: absolute; inset: 6px 6px 6px 8px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07); pointer-events: none;
}
.product-brand{ gap: 10px; height: 40px; margin-bottom: 10px; padding-left: 4px; }
.product-brand .brand-mark{
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 0; background: none; color: var(--ev-accent);
}
.product-brand strong{ font-size: 15px; font-weight: 700; }
.product-brand .brand-collapse{
  width: 24px; height: 24px; margin-left: auto; border-radius: 0;
  background: none; color: var(--ev-text-2);
}
.product-nav{ gap: 1px; }
.product-nav-row{ min-height: 32px; padding: 4px 10px; border-radius: 8px; gap: 10px; font-size: 13px; }
.product-nav-row .product-nav-icon{ width: 18px; height: 18px; }
.product-nav-row.active{ font-weight: 600; }
.product-profile{ padding: 7px; gap: 10px; }
.product-profile .who{ gap: 6px; }
.product-profile .who strong{ font-size: 13px; }
.sidebar-limit{ height: 4px; }
.sidebar-limit i{ width: 4px; }

/* --- окно записи по макету --- */
.overlay-style .preview{ height: 66px; background: #1d1d1f; border-radius: 10px; }
.rec-pill{
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: #121214; border: 1px solid rgba(255, 255, 255, .08);
}
.rec-pill.wide{ min-width: 116px; justify-content: center; }
.rec-pill.bare{ background: none; border: 0; padding: 0; height: auto; }
.rec-dot{ width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff453a; }
.rec-pill.bare .rec-dot{ width: 13px; height: 13px; }
.rec-pill .bars{ display: flex; align-items: center; gap: 2px; height: 16px; }
.rec-pill .bars b{ width: 2px; border-radius: 2px; background: var(--ev-accent); }
.overlay-style{ padding: 10px; }
.overlay-style > span{ margin-top: 10px; font-size: 13px; font-weight: 500; }

/* --- голосовое редактирование --- */
.voice-steps{ grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); align-items: stretch; }
.voice-step{ align-items: flex-start; }
.voice-step > span:last-child{ display: grid; gap: 2px; min-width: 0; }
.voice-step small{ font-size: 11px; font-weight: 400; color: var(--ev-text-2); }
.voice-step-link{ display: grid; place-items: center; color: var(--ev-text-3); }
.voice-demo{ display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 4px; }
.voice-demo-side{ padding: 12px; border-radius: 10px; background: var(--ev-fill-3);
  border: 1px solid rgba(255, 255, 255, .06); min-height: 86px; }
.voice-demo-side.result{ background: rgba(10, 132, 255, .08); border-color: rgba(10, 132, 255, .26); }
.voice-demo-cap{ display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ev-text-2); }
.voice-demo-cap.accent{ color: var(--ev-accent); text-transform: none; letter-spacing: 0; font-size: 11px; }
.voice-demo-side p{ margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.voice-demo-arrow{ display: grid; place-items: center; color: var(--ev-text-3); }

/* --- профиль: друзья --- */
.friends-split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.friends-list, .friend-detail{ padding: 12px; border-radius: var(--ev-r-card);
  background: var(--ev-fill-3); border: 1px solid var(--ev-stroke); }
.friend-row{ display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
.friend-row.on{ background: rgba(10, 132, 255, .11); border-color: rgba(10, 132, 255, .32); }
.friend-row strong{ display: block; font-size: 13px; font-weight: 600; }
.friend-row small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.friend-row > .ev-ic{ color: var(--ev-text-2); }
.mini-avatar.big{ width: 42px; height: 42px; font-size: 16px; }
.friend-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.friend-stats > div{ padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ev-stroke); }
.friend-stats strong{ display: block; font-size: 16px; font-weight: 600; }
.friend-stats small{ display: block; margin-top: 2px; font-size: 10px; color: var(--ev-text-2); }
.friend-badges{ display: flex; flex-wrap: wrap; gap: 8px; }

/* --- единый размер иконок в маркетинговых блоках --- */
.benefit-icon, .connected-list > div > span{
  display: grid; place-items: center; flex: none;
}
.benefit-icon{ width: 32px; height: 32px; border-radius: 9px; }

.connected-list > div > span{ width: 32px; height: 32px; border-radius: 9px; }

/* ==========================================================================
   Главный экран: живая демонстрация вместо копии окна приложения
   ========================================================================== */
.hero-stage{ max-width: 760px; margin: 44px auto 0; text-align: left; }
.hero-task{ text-align: center; font-size: 15px; color: #a9a9a9; margin-bottom: 18px; }
.hero-task b{ color: #fff; font-weight: 650; }
.hero-key{ display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px;
  margin: 0 3px; border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #eee; background: #3a3a3a; border: 1px solid #4d4d4d;
  box-shadow: 0 2px 0 #2a2a2a; vertical-align: -3px; }
.hero-window{ background: #2d2d2d; border: 1px solid #414141; border-radius: 14px; overflow: hidden;
  box-shadow: 0 26px 52px rgba(0, 0, 0, .42); }
.hero-window-bar{ display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px;
  background: #323232; border-bottom: 1px solid #3e3e3e; }
.hero-window-bar .window-dots{ position: static; }
.hero-window-bar .window-dots i{ width: 11px; height: 11px; }
.hero-app{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.hero-window-body{ padding: 18px; min-height: 172px; }
.hero-field{ display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px;
  font-size: 12px; color: #9c9c9c; background: #363636; border: 1px solid #454545; }
.hero-text{ margin: 14px 0 0; font-size: 16px; line-height: 1.62; color: #ededed; }
.hero-caret{ display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px;
  background: var(--ev-accent); animation: hero-blink 1s steps(2, start) infinite; }
@keyframes hero-blink { to { opacity: 0; } }
.hero-rec{ display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-top: 1px solid #3e3e3e; background: #2a2a2a; }
.hero-rec-note{ font-size: 11px; color: #8f8f8f; }
.hero-rec .rec-pill .bars b{ height: 6px; animation: hero-bar .9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 60ms); }
@keyframes hero-bar { to { height: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-caret, .hero-rec .rec-pill .bars b{ animation: none; }
  .hero-rec .rec-pill .bars b{ height: 10px; }
}
.hero-speed{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  max-width: 760px; margin: 22px auto 40px; }
.speed-card{ padding: 16px; border-radius: 12px; text-align: left;
  background: #2e2e2e; border: 1px solid #404040; }
.speed-card.win{ background: rgba(10, 132, 255, .09); border-color: rgba(10, 132, 255, .3); }
.speed-cap{ display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650;
  color: #9b9b9b; }
.speed-card.win .speed-cap{ color: #63b0ff; }
.speed-card strong{ display: flex; align-items: baseline; gap: 6px; margin: 8px 0 4px;
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.speed-card strong em{ font-style: normal; font-size: 12px; font-weight: 500; color: #9b9b9b; }
.speed-note{ display: block; font-size: 11px; color: #8d8d8d; }

/* ==========================================================================
   Примеры использования: макеты приложений
   ========================================================================== */

/* --- загрузка: снова две колонки --- */
.download-card{ flex-direction: row; align-items: center; text-align: left; gap: 24px; padding: 32px; }
.download-copy{ flex: 1; min-width: 0; }
.download-card .eyebrow{ margin: 0 0 9px; }
.download-card h2{ font-size: 33px; }
.download-card p:not(.eyebrow){ max-width: 460px; margin: 8px 0 0; }
.download-action{ margin: 0 0 0 auto; display: grid; justify-items: center; gap: 10px; flex: none; }
.download-action small{ max-width: none; margin: 0; }

/* --- вход --- */
.header-login{ padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 650;
  color: #ddd; border: 1px solid #4b4b4b; background: #333; white-space: nowrap; }
.header-login:hover{ background: #3d3d3d; color: #fff; }
.account-main{ display: grid; place-items: center; min-height: 72vh; padding-block: 72px; }
.account-card{ max-width: 620px; text-align: center; background: #2e2e2e; border: 1px solid #414141;
  border-radius: 16px; padding: 40px 32px; }
.account-card h1{ font-size: 36px; letter-spacing: -.045em; margin: 0; }
.account-lead{ color: #a9a9a9; font-size: 14px; line-height: 1.65; margin: 14px auto 0; max-width: 460px; }
.account-steps{ display: grid; gap: 8px; margin: 26px 0; text-align: left; }
.account-step{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px;
  background: #343434; border: 1px solid #444; }
.account-step strong{ display: block; font-size: 13px; }
.account-step small{ display: block; margin-top: 3px; font-size: 11px; color: #9b9b9b; }
.account-actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 900px) {
  
  .hero-speed{ grid-template-columns: 1fr; }
  .voice-steps{ grid-template-columns: 1fr; }
  .voice-step-link{ transform: rotate(90deg); }
  .voice-demo{ grid-template-columns: 1fr; }
  .voice-demo-arrow{ transform: rotate(90deg); padding: 4px 0; }
  .friends-split{ grid-template-columns: 1fr; }
  .download-card{ flex-direction: column; text-align: center; }
  .download-card p:not(.eyebrow){ margin-inline: auto; }
  .download-action{ margin: 4px auto 0; }
}
@media (max-width: 640px) {
  .hero-stage{ margin-top: 32px; }
  .hero-task{ font-size: 13px; }
  .hero-text{ font-size: 14px; }

  .account-card{ padding: 28px 18px; }
  .account-card h1{ font-size: 28px; }
}

/* --- боковая панель тура: больше информации --- */
.tour-facts{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tour-facts span{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600; color: #c2c2c2;
  background: #333; border: 1px solid #444; }
.tour-facts .ev-ic{ color: #63b0ff; }
.tour-hint-inline{ margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: #8d8d8d;
  padding-top: 14px; border-top: 1px solid #3f3f3f; }
.tour-controls{ display: flex; align-items: center; gap: 10px; }
.tour-controls-label{ font-size: 11px; color: #8d8d8d; }

/* Одинаковая плашка под иконку во всех маркетинговых блоках */
.benefit-icon,
.connected-list > div > span{ width: 34px; height: 34px; border-radius: 9px; }

/* ==========================================================================
   Итерация 4
   ========================================================================== */

/* --- переносы: не оставляем одно слово на последней строке --- */
h1, h2, h3, .place-copy h3, .hero-task, .section-heading > p:last-child,
.download-card p:not(.eyebrow),
.place-copy > p, .models-copy p, .connected-copy p, .account-lead, .places-foot{
  text-wrap: pretty;
}
h1, h2, .download-card h2, .place-copy h3, .account-card h1{ text-wrap: balance; }

/* --- клавиша в подзаголовке: выровнять по строке --- */
.hero-key{ vertical-align: middle; position: relative; top: -1px; height: 24px; min-width: 28px; }

/* --- шапка: вход как ссылка, одно заметное действие --- */
.header-actions{ display: flex; align-items: center; gap: 6px; }
.header-login{ padding: 9px 12px; border: 0; background: none; border-radius: 8px;
  color: #bcbcbc; font-size: 13px; font-weight: 600; }
.header-login:hover{ background: rgba(255, 255, 255, .07); color: #fff; }
.header-cta{ padding: 9px 16px; border-radius: 8px; font-weight: 600; }
.header-cta span{ display: none; }

/* --- лента преимуществ: равные карточки по центру --- */
.benefit-strip{ background: #292929; border-block: 1px solid #3a3a3a; }
.benefit-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  padding-block: 22px; }
.benefit-grid > .benefit-card{ display: grid; justify-items: center; align-content: start; gap: 8px;
  text-align: center; min-height: 0; padding: 18px 14px; border: 1px solid #3d3d3d;
  border-right: 1px solid #3d3d3d; border-radius: 12px; background: #2e2e2e; }
.benefit-grid > .benefit-card strong{ font-size: 13px; font-weight: 650; line-height: 1.35; }
.benefit-grid > .benefit-card small{ font-size: 11px; line-height: 1.45; color: #9b9b9b; }

/* --- примеры: шире, прямоугольнее{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 11px;
  border-radius: 10px; background: linear-gradient(90deg, rgba(10, 132, 255, .2), rgba(10, 132, 255, .06));
  border: 1px solid rgba(10, 132, 255, .5); }

/* --- блокнот: обводки строк как в NotebookListRow --- */
.notebook-item{ display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 8px;
  border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.notebook-item.on{ background: rgba(10, 132, 255, .12); border-color: rgba(10, 132, 255, .38); }
.notebook-item small{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; }
.note-title{ min-height: 38px; font-weight: 600; }
.note-area{ border-color: rgba(255, 255, 255, .1); color: var(--ev-text); }

/* --- окно записи: палитра приложения --- */
.overlay-style .preview{ background: var(--ev-bg); }
.rec-island{ display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 12px; background: #1b1c21; border: 1px solid rgba(255, 255, 255, .14); }
.rec-island.classic{ width: 104px; height: 38px; padding: 0 11px; }
.rec-island.mini{ width: 72px; height: 32px; padding: 0 11px; }
.rec-island.bare{ background: none; border: 0; }
.rec-island .bars{ display: flex; align-items: center; gap: 2px; }
.rec-island .bars b{ width: 2px; border-radius: 999px; background: var(--ev-accent); }
.rec-dot{ width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ev-red);
  box-shadow: 0 0 6px rgba(255, 69, 58, .65); }
.rec-dot.big{ width: 12px; height: 12px; }

/* --- тема приложения: превью как ThemePreview --- */
.overlay-style .preview.plain{ background: none; }
.theme-swatch{ display: grid; align-items: center; width: 100%; max-width: 128px; height: 46px;
  padding: 0 12px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
.theme-swatch.light{ background: #fff; }
.theme-swatch.dark{ background: #1b1c21; }
.theme-swatch.split{ background: linear-gradient(90deg, #fff 0 50%, #1b1c21 50% 100%); }
.theme-lines{ display: grid; gap: 5px; }
.theme-lines i{ display: block; border-radius: 999px; background: #fff; }
.theme-lines i:first-child{ width: 31px; height: 5px; opacity: .82; }
.theme-lines i:last-child{ width: 48px; height: 4px; opacity: .45; }
.theme-swatch.light .theme-lines i{ background: #1c1c1e; }
.theme-swatch.split .theme-lines i{ background: #1c1c1e; }

/* --- память: сегменты и легенда как в MemoryBar --- */
.memory-bar{ height: 14px; border-radius: 6px; }
.memory-bar i.sys{ background: rgba(255, 69, 58, .75); }
.memory-bar i.app{ background: var(--ev-yellow); }
.memory-bar i.audio{ background: var(--ev-accent); }
.memory-bar i.text{ background: rgba(48, 209, 88, .65); }
.memory-bar i.free{ background: rgba(235, 235, 245, .3); }
.memory-legend{ align-items: center; gap: 12px; }
.memory-legend b{ font-weight: 600; color: var(--ev-text); }
.memory-legend i.sys{ background: rgba(255, 69, 58, .75); }
.memory-legend i.app{ background: var(--ev-yellow); }
.memory-legend i.audio{ background: var(--ev-accent); }
.memory-legend i.text{ background: rgba(48, 209, 88, .65); }
.memory-legend i.free{ background: rgba(235, 235, 245, .3); }

/* --- голосовое редактирование как в VoiceEditingFeaturesCard --- */
.product-content .stack-l > * + *{ margin-top: 16px; }
.voice-steps{ display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 0; align-items: stretch; }
.voice-step{ display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px;
  border-radius: 9px; background: rgba(255, 255, 255, .04); border: 0; }
.voice-step > span:last-child{ font-size: 11px; font-weight: 600; }
.voice-step .ev-ic{ color: var(--ev-text-2); }
.voice-step .step-num{ width: 24px; height: 24px; font-size: 10px; font-weight: 700;
  background: var(--ev-accent); color: #fff; }
.voice-step-link{ display: grid; place-items: center; width: 28px; color: var(--ev-text-3); }
.voice-examples{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.voice-example{ display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .055); }
.voice-example .ev-badge{ border-radius: 7px; }
.voice-example strong{ display: block; font-size: 12px; font-weight: 600; }
.voice-example small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.voice-combo{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(10, 132, 255, .055); }
.voice-combo > .ev-ic{ color: var(--ev-accent); flex: none; }
.voice-combo strong{ display: block; font-size: 11px; font-weight: 600; }
.voice-combo small{ display: block; margin-top: 2px; font-size: 11px; color: var(--ev-text-2); }
.voice-combo-model{ display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 10px; font-weight: 500; color: var(--ev-text-2); }

/* Единый первый экран и ровные примеры приложений. */
.header-actions{ margin-left: 0; gap: 12px; flex: none; }
.header-login{ min-height: 38px; display: inline-flex; align-items: center; }
.header-cta{ min-height: 38px; display: inline-flex; align-items: center; }
.hero{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px 52px;
  align-items: center; padding-top: clamp(38px, 6vh, 72px); padding-bottom: 38px; min-height: min(760px, calc(100svh - 74px)); }
.hero-intro{ max-width: 620px; margin: 0; text-align: left; }
.hero h1{ font-size: clamp(52px, 5.2vw, 82px); margin-top: 0; }
.hero-intro > p{ max-width: 580px; margin: 22px 0 0; }
.hero-actions, .hero-meta{ justify-content: flex-start; }
.hero-meta{ flex-wrap: wrap; gap: 9px 18px; }
.hero-stage{ width: 100%; max-width: none; margin: 0; }
.hero-speed{ grid-column: 1 / -1; width: 100%; max-width: none; margin: 8px 0 0; }
.speed-card{ padding: 13px 16px; }
.speed-card strong{ font-size: 25px; margin: 5px 0 2px; }

@media (max-width: 1100px) {
  .header-nav{ display: none; }
  .header-actions{ margin-left: auto; }
  .menu-button{ display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; margin-left: 0; background: #353535;
    border: 1px solid #4b4b4b; border-radius: 8px; padding: 0 9px; flex: none; }
  .menu-button span{ height: 2px; width: 18px; background: #e7e7e7; }
}
@media (max-width: 999px) {
  .hero{ display: flex; flex-direction: column; min-height: 0; gap: 0; text-align: center; padding-top: 54px; }
  .hero-intro{ margin-inline: auto; text-align: center; }
  .hero-intro > p{ margin-inline: auto; }
  .hero-actions, .hero-meta{ justify-content: center; }
  .hero-stage{ max-width: 760px; margin-top: 34px; }
  .hero-speed{ max-width: 760px; margin-top: 18px; }
}
@media (max-width: 640px) {
  .hero{ padding-top: 42px; padding-bottom: 28px; }
  .hero h1{ font-size: clamp(44px, 10.8vw, 60px); }
  .hero-actions{ width: 100%; }
  .hero-stage{ margin-top: 27px; }
  .hero-speed{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .speed-card{ padding: 10px; }
  .speed-card strong{ font-size: 18px; }
  .speed-card strong em, .speed-note{ font-size: 9px; }

  

  .header-login{ display: none; }
  .header-cta{ font-size: 11px; padding-inline: 11px; }
}
@media (max-width: 370px) { .header-cta{ display: none; } }

/* --- блок загрузки: описание без висячего слова --- */
.download-card p:not(.eyebrow){ max-width: 520px; }

@media (max-width: 900px) {
  .benefit-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice-steps{ grid-template-columns: 1fr; gap: 8px; }
  .voice-step-link{ width: auto; transform: rotate(90deg); }

}
@media (max-width: 560px) {
  .benefit-grid{ grid-template-columns: 1fr; }
}

/* Эти правила идут после общих настроек макетов, чтобы узкие экраны не получали две колонки. */
@media (min-width: 760px) and (max-width: 999px){
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px;
    min-height: min(690px, calc(100svh - 74px)); padding-top: 32px; }
  .hero-intro { text-align: left; margin: 0; }
  .hero h1 { font-size: clamp(39px, 5vw, 50px); }
  .hero-intro > p { text-align: left; font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; }
  .hero-actions .button { width: min(100%, 270px); }
  .hero-meta { justify-content: flex-start; }
  .hero-stage { margin: 0; }
  .hero-speed { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}

@media (max-width: 850px) {
  .models-section, .connected-layout{ grid-template-columns: minmax(0, 1fr); }
  .models-demo{ min-width: 0; }
}
@media (min-width: 371px) and (max-width: 640px) {
  .header-cta{ display: inline-flex; }
}

/* Сквозное выравнивание и состояния навигации. */
.header-nav{ gap: clamp(14px, 1.65vw, 28px); }
.header-actions{ gap: 8px; }
.header-login, .header-cta{ min-height: 38px; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.header-login{ padding-inline: 14px; color: #d2d2d2; border: 1px solid transparent; }
.header-login:hover, .header-login:focus-visible{ color: #fff; background: #353535; border-color: #4b4b4b; }
.header-login:active{ background: #404040; transform: translateY(1px); }
.header-cta{ background: #147fee; border: 1px solid #368df1; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; }
.header-cta:hover, .header-cta:focus-visible{ background: #2990ff; border-color: #62a9ff; }
.header-cta:active{ background: #096bcf; border-color: #096bcf; transform: translateY(1px); }

/* Кружки занимают точно середину промежутка{ --workflow-gap: 24px; gap: var(--workflow-gap); }

/* Единые контейнеры для подлинных значков приложений. */

/* Волна заполняет ширину облачка; высоты записаны в фиксированном несимметричном ритме. */

/* В каждом макете мессенджера есть ветка из нескольких сообщений. */

/* Пресеты и карточка голосового редактирования повторяют SwiftUI-обводки. */
.preset, .preset:hover{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.preset.on, .preset.on:hover{ background: rgba(10,132,255,.13); border: 1px solid rgba(10,132,255,.42); }
.presets-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voice-step-link .ev-ic{ width: 11px; height: 11px; }
.voice-step{ background: rgba(255,255,255,.04); border: 0; }
.voice-step .ev-ic{ width: 18px; height: 18px; }
.voice-example{ background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); }
.voice-examples .voice-example > .ev-badge{ display: grid; place-items: center; width: 25px; height: 25px;
  flex: none; padding: 0; border: 0; border-radius: 7px; background: rgba(10,132,255,.12); color: var(--ev-accent); }
.voice-examples .voice-example > span:last-child{ display: block; min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--ev-text); }
.voice-example strong, .voice-example small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hotkey-button{ display: inline-flex; align-items: center; min-height: 28px; padding: 2px 5px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ev-text);
  font-size: 11px; white-space: nowrap; }
.hotkey-button:hover, .hotkey-button:focus-visible{ background: rgba(255,255,255,.07); border-color: var(--ev-stroke); }
.hotkey-button.capturing{ color: var(--ev-accent); border-color: rgba(10,132,255,.45); background: rgba(10,132,255,.12); }
.hotkey-clear{ display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ev-text-2); }
.hotkey-clear:hover{ background: rgba(255,255,255,.07); color: var(--ev-text); }

/* ThemePreview в macOS использует чёрную обводку для светлой и системной темы. */
.theme-swatch{ position: relative; border-color: rgba(255,255,255,.12); }
.theme-swatch.light, .theme-swatch.split{ border-color: rgba(0,0,0,.12); }
.theme-swatch.split{ background: #1b1c21; }
.theme-swatch.split::before{ content: ""; position: absolute; inset: 0 50% 0 0; background: #fff; }

.chat-messages{ overflow: auto; }
.msg.me{ display: flex; flex-direction: row-reverse; gap: 8px; padding: 0; background: transparent; }
.msg.me .msg-content{ padding: 9px 12px; background: rgba(10,132,255,.18); border-radius: 11px; }
.msg.ai > .msg-content{ min-width: 0; }
.msg-meta{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.msg-meta strong{ display: inline; margin: 0; font-size: 11px; }
.msg-meta time{ color: var(--ev-text-2); font-size: 10px; }
.msg-avatar.human{ background: #4b7599; color: #fff; font-size: 11px; font-weight: 700; }
@media (max-width: 640px) {
  .site-footer nav{ flex-wrap: wrap; }
}

/* App artwork sits in the same bordered square at every placement. */

.download-action .button:disabled{ cursor: default; opacity: .68; }
.download-action .button:disabled:hover{ background: var(--blue); }

/* Same outlined control language as the other secondary buttons. */
.header-login{
  border: 1px solid #555;
  background: #2d2d2d;
  color: #f0f0f0;
}
.header-login:hover, .header-login:focus-visible{
  border-color: #7b7b7b;
  background: #3c3c3c;
}