/* Выбор «платформа → приложение → шаги» (shared/apps-guide.js). Цвета — переменные страницы, куда вставлен:
   у кабинета и у страницы подписки они называются одинаково (--accent, --line, --fg…). */
.ag { display: grid; gap: 14px; }

/* платформы: ровная полоса во всю ширину, лишнее листается вбок — как вкладки панели */
.ag-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
  margin: 0 -2px; padding: 0 2px;
}
.ag-tabs::-webkit-scrollbar { display: none; }
.ag-tab {
  flex: 1 0 auto; padding: 11px 10px 12px; border: 0; background: none; color: var(--fg-3); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.2s, box-shadow 0.2s;
}
.ag-tab:hover { color: var(--fg-2); }
.ag-tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

/* приложения: 2, 3 или 2×2 — сетка всегда ровная */
.ag-apps { display: grid; grid-template-columns: repeat(var(--ag-cols, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.ag-app {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 104px; padding: 16px 8px 12px;
  border-radius: 18px; border: 1px solid var(--line); background: rgba(127, 127, 127, 0.06); color: var(--fg); cursor: pointer;
  font: inherit; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.ag-app:hover { border-color: var(--accent); }
.ag-app:active { transform: scale(0.98); }
.ag-app[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ag-app__logo { display: grid; place-items: center; width: 40px; height: 40px; }
.ag-app__logo svg { width: 40px; height: 40px; }
.ag-app__name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; text-align: center; }
/* «Рекомендуем» — под названием, а не в углу: в узкой плитке угловая плашка наезжала на логотип */
.ag-app__tag {
  margin-top: -3px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.ag-note {
  margin: 0; padding: 11px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--fg-2);
  border: 1px solid color-mix(in srgb, #f5b301 40%, transparent); background: color-mix(in srgb, #f5b301 9%, transparent);
  overflow-wrap: anywhere;
}

/* шаги: номер в кружке, заголовок, кнопки в ряд во всю ширину */
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(127, 127, 127, 0.05); }
.ag-step__n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 13.5px;
  color: var(--accent); border: 1.5px solid var(--accent);
}
.ag-step__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ag-step__body > b { font-size: 15.5px; line-height: 30px; letter-spacing: -0.01em; }
.ag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-row > .btn { flex: 1 1 140px; min-height: 46px; text-decoration: none; }
.ag-hint { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.5; }