/* =============================================================================
   olander · Componentes
   Blocos reutilizáveis. Todo valor vem de tokens.css.
   Anatomia derivada do redesign Weibo 2020 (MONK.REN).
   ========================================================================== */

/* ---------------------------------------------------------------- Ícone --- */
.ds-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: currentColor;
  vertical-align: middle;
}
.ds-icon svg { width: 100%; height: 100%; display: block; }
.ds-icon--sm { width: 1rem;    height: 1rem; }
.ds-icon--md { width: 1.5rem;  height: 1.5rem; }   /* 24 */
.ds-icon--lg { width: 1.75rem; height: 1.75rem; }  /* 28 — ações do post / nav */
.ds-icon--xl { width: 2.5rem;  height: 2.5rem; }

/* --------------------------------------------------------------- Botão --- */
.ds-btn {
  --_bg: var(--color-primary);
  --_fg: var(--color-primary-contrast);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  min-height: 40px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.ds-btn:hover { text-decoration: none; background: var(--color-primary-hover); }
.ds-btn:active { background: var(--color-primary-active); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.ds-btn--secondary {
  --_bg: var(--color-surface);
  --_fg: var(--color-primary);
  --_bd: var(--color-border-strong);
}
.ds-btn--secondary:hover  { background: var(--color-primary-tint); }
.ds-btn--secondary:active  { background: var(--color-primary-tint-strong); }

.ds-btn--ghost {
  --_bg: transparent;
  --_fg: var(--color-text-secondary);
}
.ds-btn--ghost:hover  { background: var(--color-surface-hover); }
.ds-btn--ghost:active { background: var(--color-border); }

.ds-btn--danger { --_bg: transparent; --_fg: var(--color-danger); --_bd: transparent; }
.ds-btn--danger:hover { background: var(--color-danger-tint); }
.ds-btn--danger:active { background: var(--color-danger-tint); }

.ds-btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ds-btn--lg { min-height: 48px; padding: 0 var(--space-6); font-size: var(--text-lg); }
.ds-btn--block { display: flex; width: 100%; }

/* Botão só-ícone (top bar, ações compactas) */
.ds-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-btn-icon:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.ds-btn-icon[aria-current="page"], .ds-btn-icon.is-active { color: var(--color-primary); }
.ds-btn-icon--sm { width: 32px; height: 32px; }

/* Botão "+ Подписаться" do trilho (pink, estilo Weibo) */
.ds-btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.ds-btn-follow:hover { background: var(--color-primary-tint-strong); text-decoration: none; }
.ds-btn-follow .ds-icon { width: 0.9rem; height: 0.9rem; }

/* Busca do trilho direito */
.ds-rail-search input {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Chip / hashtag */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-tint);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ds-chip:hover { text-decoration: none; background: var(--color-primary-tint-strong); }

/* -------------------------------------------------------------- Campo --- */
.ds-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold);
                   color: var(--color-text-strong); }
.ds-field__control,
.ds-input, .ds-textarea, .ds-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--color-text-muted); }
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint-strong);
}
.ds-textarea { min-height: 96px; line-height: var(--leading-normal); }
.ds-field__hint  { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-field__error { font-size: var(--text-sm); color: var(--color-danger); }
.ds-field--invalid .ds-input,
.ds-field--invalid .ds-textarea { border-color: var(--color-danger); }

/* Campo de chips com autocomplete (token_input_controller.js) — segmentação
   do grupo de anúncios. Caixa com a mesma cara do .ds-input; chips no azul
   primário; menu flutuante abaixo da caixa. */
.ds-tokens { position: relative; }
.ds-tokens__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-tokens__box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint-strong);
}
.ds-tokens__list { display: contents; list-style: none; margin: 0; padding: 0; }
.ds-tokens__chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 100%;
  padding: 2px var(--space-1) 2px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint-strong);
  color: var(--color-primary);
  font-size: var(--text-sm);
}
.ds-tokens__chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tokens__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: inherit; cursor: pointer;
}
.ds-tokens__remove:hover, .ds-tokens__remove:focus-visible { background: var(--color-primary-tint-strong); color: var(--color-text-strong); }
.ds-tokens__input {
  flex: 1 1 120px; min-width: 120px;
  padding: var(--space-1) 0;
  border: 0; outline: 0; background: transparent;
  font-size: var(--text-base); color: var(--color-text);
}
.ds-tokens__input::placeholder { color: var(--color-text-muted); }
.ds-tokens__input:disabled { display: none; }
.ds-tokens__menu {
  position: absolute; z-index: var(--z-dropdown); inset-inline: 0; top: calc(100% + var(--space-1));
  max-height: 280px; overflow-y: auto;
  margin: 0; padding: var(--space-1); list-style: none;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}
.ds-tokens__option {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ds-tokens__option small { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.ds-tokens__option[aria-selected="true"] { background: var(--color-primary-tint-strong); color: var(--color-primary); }
.ds-tokens__option--custom { color: var(--color-text-muted); font-style: italic; }
.ds-tokens__empty { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Busca com ícone (top bar / trilho) */
.ds-search { position: relative; display: flex; align-items: center; }
.ds-search .ds-icon {
  position: absolute; left: var(--space-3); color: var(--color-text-muted); pointer-events: none;
}
.ds-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
}
.ds-search input:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint-strong);
}

/* ------------------------------------------------------------- Avatar --- */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: none;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
}
.ds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar--sm { width: 40px; height: 40px; font-size: var(--text-sm); }
.ds-avatar--md { width: 48px; height: 48px; font-size: var(--text-md); }
.ds-avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg); }   /* post / card de perfil */
.ds-avatar--xl { width: 96px; height: 96px; font-size: var(--text-3xl); }  /* header de perfil */

/* -------------------------------------------------------------- Badge --- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-fill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ds-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.ds-badge--neutral { background: var(--color-border-strong); color: var(--color-text-strong); }
/* O contador de notificações (badge_id em _notification_badge) fica sempre no
   DOM, mesmo zerado, para poder ser trocado via Turbo Stream quando chega uma
   notificação nova (ver DeliverNotificationsService). [hidden] sozinho perde
   para `display: inline-flex` acima (mesma especificidade, ordem de cascata),
   por isso a regra explícita aqui. */
.ds-badge[hidden] { display: none; }
/* Selo de verificação (genérico por enquanto — cor/estilo final a refinar no
   Figma). Ícone puro, sem o fundo/tamanho fixo do .ds-badge normal (que é um
   contador numérico) — o tamanho vem de .ds-icon--{size} normalmente. */
.ds-badge--verify { color: var(--color-primary); margin-inline-start: 2px; }

/* ------------------------------------------------- Superfície base --- */
/* Fase 66: base compartilhada (fundo + borda + raio) por 8 componentes que
   redeclaravam as 3 mesmas linhas (.ds-card, .ds-panel, .ds-composer,
   .ds-navrail, .ds-hotpanel, .ds-activity, .ds-control-row aqui,
   .ds-profilecard em patterns.css) — agrupados num só seletor em vez de
   uma classe utilitária nova no markup (evita tocar ~30 arquivos .erb só
   pra adicionar uma classe; cada componente já é sempre um destes
   seletores, nunca composto dinamicamente). */
.ds-card, .ds-panel, .ds-composer, .ds-navrail, .ds-hotpanel, .ds-activity,
.ds-control-row, .ds-profilecard {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------- Card --- */
.ds-card {
  padding: var(--space-5);
}
.ds-card--flush { padding: 0; overflow: hidden; }

/* -------------------------------------------------------------- Painel --- */
/* Seção do trilho direito: barra de título + corpo + rodapé opcional. */
.ds-panel {
  overflow: hidden;
}
.ds-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
}
.ds-panel__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold);
                   color: var(--color-text-strong); }
.ds-panel__action { font-size: var(--text-sm); color: var(--color-text-secondary); }
.ds-panel__action:hover { color: var(--color-primary); }
.ds-panel__body { padding: var(--space-2) 0; }
.ds-panel__foot {
  border-top: var(--border);
  padding: var(--space-3) var(--space-5);
  text-align: center;
}
.ds-panel__foot a { font-size: var(--text-sm); color: var(--color-text-secondary); }
.ds-panel__foot a:hover { color: var(--color-primary); }

/* ---------------------------------------------------------- Lista/linha --- */
.ds-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  transition: background var(--dur-fast) var(--ease);
}
a.ds-list-row:hover { text-decoration: none; background: var(--color-surface-hover); }
/* Fase 66: as variantes [data-tier] foram removidas daqui — nenhuma view
   jamais aplica data-tier a este elemento (confirmado por busca em
   app/views); o sistema de rank por cor realmente em uso é
   .ds-hotrow__rank (--color-rank-top/mid/low), abaixo. */
.ds-list-row__rank {
  width: 22px; flex: none; text-align: center;
  font-size: var(--text-md); font-weight: var(--weight-bold);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.ds-list-row__hashmark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--color-primary-tint); color: var(--color-primary);
  font-weight: var(--weight-bold); font-size: var(--text-lg);
}
.ds-list-row__main  { min-width: 0; flex: 1; overflow: hidden; }
.ds-list-row__actions { display: flex; gap: var(--space-2); flex: none; margin-left: auto; }
.ds-list-row__title { font-size: var(--text-base); color: var(--color-text-strong);
                      font-weight: var(--weight-medium); }
.ds-list-row__sub   { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-list-row__meta  { font-size: var(--text-sm); color: var(--color-text-muted);
                      flex: none; font-variant-numeric: tabular-nums; }
.ds-notification + .ds-notification { border-top: var(--border); }
.ds-notification.is-unread { background: var(--color-primary-tint); }
.ds-notification.is-unread .ds-list-row__title { font-weight: var(--weight-semibold); }

/* Linha de notificação (página /notifications) */
.ds-notif {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border);
}
.ds-notif:last-child { border-bottom: 0; }
.ds-notif--unread { background: var(--color-primary-tint); }
.ds-notif__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--color-surface-sunken); color: var(--color-text-muted);
}
.ds-notif__icon--like { color: var(--color-accent-text); }
.ds-notif__icon--follow,
.ds-notif__icon--follow_request,
.ds-notif__icon--follow_accepted { color: var(--color-primary); }
.ds-notif__icon--repost { color: var(--color-success); }
.ds-notif .ds-avatar { flex: none; }
.ds-notif__body { flex: 1; min-width: 0; }
.ds-notif__line { font-size: var(--text-base); color: var(--color-text); }
.ds-notif__line strong { color: var(--color-text-strong); }
.ds-notif__snippet { display: block; margin-top: 2px; font-size: var(--text-sm);
                     color: var(--color-text-muted); }
.ds-notif__snippet:hover { color: var(--color-text-secondary); }
.ds-notif__time { flex: none; font-size: var(--text-sm); color: var(--color-text-muted);
                  font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Abas --- */
/* Abas do feed (0:55 Weibo) — 18px semibold, sublinhado curto arredondado */
.ds-tabs {
  display: flex;
  gap: var(--space-10);
  padding: 0 var(--space-6);
  background: var(--color-surface);
  /* min-width:0 deixa o flex item encolher dentro do pai (ex.: ao lado do
     contador "Всего записей" no cabeçalho do perfil) em vez de estourar a
     largura e ser cortado sem aviso pelo overflow:hidden do card — achado
     de revisão de UX: as abas "Ответы/Медиа/..." somem sem nenhuma forma
     de alcançar o que passou da borda. Agora rolam horizontalmente. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Achado de auditoria pré-lançamento (24/10): faltava o prefixo -webkit-
     (mesmo achado de .ds-settings__nav em patterns.css) — sem ele o
     degradê não renderiza no Chromium/Safari, a aba corta sem aviso. */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tabs__tab {
  position: relative;
  padding: var(--space-4) 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-post);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ds-tabs__tab:hover { text-decoration: none; color: var(--color-primary); }
.ds-tabs__tab[aria-current="page"], .ds-tabs__tab.is-active {
  color: var(--color-primary);
}
.ds-tabs__tab[aria-current="page"]::after, .ds-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  height: 3px;
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* ------------------------------------------------------------- Menu --- */
.ds-menu { position: relative; display: inline-flex; }
.ds-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  z-index: var(--z-dropdown);
}
.ds-menu__panel[hidden] { display: none; }
.ds-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: start;
}
.ds-menu__item:hover { text-decoration: none; background: var(--color-surface-hover); }
.ds-menu__item--danger { color: var(--color-danger); }
.ds-menu__item--danger:hover { background: var(--color-danger-tint); }
.ds-menu__item--disabled { color: var(--color-text-muted); cursor: default; align-items: flex-start; }
.ds-menu__item--disabled:hover { background: none; }
.ds-menu__item-hint { display: block; font-size: var(--text-sm); }
.ds-menu__sep { margin: var(--space-2) 0; border: 0; border-top: var(--border); }
.ds-menu form { display: contents; }

/* Menu de compartilhar: abre para cima (fica na última linha do card). */
.ds-menu__panel--share { top: auto; bottom: calc(100% + var(--space-2)); }

/* Elemento só aparece quando o navegador suporta Web Share API —
   ver app/javascript/controllers/story_share_controller.js#connect. */
.ds-native-share-only { display: none; }
html.has-native-share .ds-native-share-only { display: inline-flex; }

/* -------------------------------------------------------------- Stats --- */
.ds-stats { display: flex; gap: var(--space-6); }
.ds-stat { display: flex; flex-direction: column; gap: 2px; }
.ds-stat__value { font-size: var(--text-md); font-weight: var(--weight-bold);
                  color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.ds-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
a.ds-stat:hover { text-decoration: none; }
a.ds-stat:hover .ds-stat__value { color: var(--color-primary); }

/* ------------------------------------------------------------- Empty --- */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}
.ds-empty .ds-icon { color: var(--color-border-strong); }
.ds-empty__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold);
                   color: var(--color-text-secondary); }

/* -------------------------------------------------------------- Flash --- */
.ds-flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border);
  background: var(--color-surface);
  font-size: var(--text-base);
  box-shadow: var(--shadow-sm);
}
/* Aviso com botão (ex.: reenviar confirmação de e-mail): no celular o botão
   desce para a linha de baixo em vez de ser cortado. */
@media (max-width: 600px) {
  .ds-flash--with-action { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .ds-flash--with-action > form { grid-column: 2; justify-self: start; }
}

.ds-flash--notice { border-color: var(--color-primary); background: var(--color-primary-tint); }
.ds-flash--alert  { border-color: var(--color-danger);  background: var(--color-danger-tint); }
.ds-flash__close { margin-left: auto; color: var(--color-text-muted); display: inline-flex; }
.ds-flash__close:hover { color: var(--color-text-strong); }

/* ============================================== Post (0:70 Weibo) === */
.ds-post {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: var(--divider);
}
.ds-post:last-child { border-bottom: 0; }
.ds-post__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ds-post__context--why { color: var(--color-primary); }
.ds-post__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.ds-post__head .ds-avatar--lg { width: 52px; height: 52px; font-size: var(--text-md); }
.ds-post__ident { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); }
.ds-post__ident > .ds-post__meta { flex-basis: 100%; }
.ds-post__author {
  display: inline-block; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-post);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ds-post__author:hover { color: var(--color-primary); text-decoration: none; }
.ds-post__meta { font-size: var(--text-md); color: var(--color-text-post-meta); margin-top: 3px; }
.ds-post__meta a { color: inherit; }
.ds-post__meta a:hover { color: var(--color-primary); text-decoration: none; }
.ds-post__menu { margin-left: auto; flex: none; }
.ds-post__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.ds-post__more:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.ds-post__body {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-post);
  margin-top: var(--space-4);
}
.ds-post__body p { margin: 0 0 var(--space-2); white-space: pre-wrap; }
.ds-post__body p:last-child { margin-bottom: 0; }
.ds-post__body a { color: var(--color-primary); }
.ds-post__body a.hashtag { color: var(--color-primary); font-weight: var(--weight-medium); }

/* CW — aviso de conteúdo sensível escolhido pelo autor (Fase 21) */
.ds-post__cw { margin-top: var(--space-4); }
.ds-post__cw summary {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  font-size: var(--text-sm); color: var(--color-text-secondary);
  padding: var(--space-3); border: var(--border); border-radius: var(--radius-md);
  list-style: none;
}
.ds-post__cw summary::-webkit-details-marker { display: none; }
.ds-post__cw[open] summary { margin-bottom: var(--space-2); border-color: transparent; padding-inline: 0; }
.ds-post__cw .ds-post__body { margin-top: 0; }

/* Post em destaque na página de detalhe */
.ds-post--detail .ds-post { padding-block: var(--space-6); }
.ds-post--detail .ds-post__body { font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.ds-post--detail .ds-post__actions {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: var(--border);
}

/* Thread do autor (Fase 10) — linha conectando posts em sequência do mesmo
   autor (avatar 52px, padding-left do post = --space-5). Aproximação: a
   diferença de 4px introduzida pelo padding maior do post em destaque
   (--space-6) é pequena o bastante pra não precisar de uma segunda variante. */
.ds-thread-item, .ds-post--detail { position: relative; }
.ds-thread-connector::after {
  content: "";
  position: absolute;
  left: calc(var(--space-5) + 26px);
  top: 72px;
  bottom: -46px;
  width: 2px;
  background: var(--color-border-strong);
}

.ds-post--tombstone { display: flex; padding-block: var(--space-4); }
.ds-post--tombstone .ds-post__tombstone-icon {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-sunken); color: var(--color-text-muted);
}
.ds-post--tombstone .ds-post__ident { display: flex; align-items: center; }
.ds-post__tombstone-text { color: var(--color-text-muted); font-size: var(--text-md); }

/* Grade de imagens — 160px / gap 6 / raio 12 no contêiner (Weibo) */
.ds-post__images {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 520px;
}
.ds-post__images a { display: block; line-height: 0; background: var(--color-surface-sunken); }
.ds-post__images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-post__images--1 { grid-template-columns: 1fr; }
.ds-post__images--1 img { height: auto; max-height: 480px; object-fit: contain; background: #000; }
.ds-post__images--2 { grid-template-columns: 1fr 1fr; }
.ds-post__images--3 { grid-template-columns: 1fr 1fr; }
.ds-post__images--3 a:first-child { grid-row: span 2; }
.ds-post__images--4 { grid-template-columns: 1fr 1fr; }
.ds-post__images--2 a,
.ds-post__images--3 a,
.ds-post__images--4 a { aspect-ratio: 1; }

/* Enquete (Fase 14) */
.ds-poll { margin-top: var(--space-3); max-width: 480px; }
.ds-poll__form,
.ds-poll__results { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-poll__choice {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.ds-poll__choice:has(input:checked) { border-color: var(--color-primary); }
.ds-poll__submit { align-self: flex-start; margin-top: var(--space-1); }
.ds-poll__result {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-base);
}
.ds-poll__result.is-voted { border-color: var(--color-primary); font-weight: var(--weight-medium); }
.ds-poll__bar {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-primary-tint);
  border-radius: var(--radius-md);
  transition: width var(--dur-slow) var(--ease);
}
.ds-poll__result-text, .ds-poll__pct { position: relative; z-index: 1; }
.ds-poll__pct { flex-shrink: 0; }
.ds-poll__footer {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted);
}

.ds-post__quote {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  cursor: pointer; /* card_controller.js — não é mais <a> (ver _quote_preview) */
}
.ds-post__quote:hover { text-decoration: none; background: var(--color-surface-hover); }
.ds-post__quote:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Autor citado inacessível pro viewer atual (achado da Fase 92, corrigido —
   ver docs/architecture/phase-96.md) — não navega, não tem hover de link. */
.ds-post__quote--unavailable {
  cursor: default; color: var(--color-text-muted); font-style: italic; font-size: var(--text-sm);
}
.ds-post__quote--unavailable:hover { background: var(--color-surface-sunken); }
.ds-post__quote-author {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin-bottom: var(--space-1);
}
.ds-post__quote-author .ds-avatar { width: 20px; height: 20px; font-size: 9px; }
.ds-post__quote-handle { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.ds-post__quote-body {
  display: block;
  font-size: var(--text-base); color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
.ds-post__quote-body p { margin: 0 0 var(--space-1); white-space: pre-wrap; }
.ds-post__quote-body p:last-child { margin-bottom: 0; }
.ds-post__quote-body a { color: var(--color-primary); position: relative; z-index: 1; }
.ds-post__quote-body a.hashtag { font-weight: var(--weight-medium); }
.ds-post__quote-meta { font-size: var(--text-sm); color: var(--color-text-muted);
                       margin-bottom: var(--space-1); }

/* Preview de link (Fase 21) — mesmo cartão visual do quote, sem o clique
   interceptado por card_controller.js (é um <a> de verdade pro site externo). */
.ds-link-preview {
  display: block; margin-top: var(--space-3); border: var(--border);
  border-radius: var(--radius-md); overflow: hidden; text-decoration: none;
}
.ds-link-preview:hover { background: var(--color-surface-hover); text-decoration: none; }
.ds-link-preview:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ds-link-preview__image { aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--color-surface-sunken); }
.ds-link-preview__image img { width: 100%; height: 100%; object-fit: cover; }
.ds-link-preview__body { padding: var(--space-3) var(--space-4); }
.ds-link-preview__domain { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-1); }
.ds-link-preview__title { font-weight: var(--weight-semibold); color: var(--color-text-strong); margin: 0 0 var(--space-1); }
.ds-link-preview__description {
  font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Barra de ações — plana, ícone 24px + contador; compartilhar à direita (Figma) */
.ds-post__actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-4);
  color: var(--color-text-post-meta);
}
.ds-post__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-post-meta);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}
.ds-post__action:hover { text-decoration: none; color: var(--color-primary); }
.ds-post__action form { display: contents; }
.ds-post__action--like:hover     { color: var(--color-accent-text); }
.ds-post__action--like.is-on     { color: var(--color-accent-text); }
.ds-post__action--like.is-on .ds-icon svg { fill: currentColor; }
.ds-post__action--repost.is-on   { color: var(--color-success); }
.ds-post__action--bookmark.is-on { color: var(--color-primary); }
.ds-post__action--bookmark.is-on .ds-icon svg { fill: currentColor; }
.ds-post__action--flush { margin-left: auto; }

/* ========================================================= Compositor === */
/* Compositor (0:147 Weibo) — caixa cinza #f5f5f5 raio 8 + toolbar abaixo em branco */
.ds-composer {
  padding: var(--space-5);
}
.ds-composer__box {
  background: var(--color-surface-sunken);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ds-composer:focus-within .ds-composer__box {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.ds-composer__field {
  width: 100%;
  min-height: 76px;
  max-height: 40vh;
  background: transparent;
  border: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  resize: none;
  overflow-y: auto;
}
.ds-composer__field:focus-visible { box-shadow: none; }
.ds-composer__field::placeholder { color: var(--color-text-muted); }
.ds-composer__previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ds-composer__thumb {
  width: 80px; height: 80px; border-radius: var(--radius-md);
  object-fit: cover; border: var(--border);
}
.ds-composer__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}
.ds-composer__tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.ds-composer__tool:hover { color: var(--color-primary); opacity: 1; }
.ds-composer__tool .ds-icon { width: 24px; height: 24px; }
.ds-composer__tool input[type="file"] { display: none; }
.ds-composer__spacer { flex: 1; }
.ds-composer__visibility {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  opacity: 0.7;
}
/* Botão "Опубликовать" — pílula compacta (发布 do Figma) */
.ds-composer__toolbar .ds-btn {
  min-height: 34px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
}
.ds-composer__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  text-align: right;
}
.ds-composer__count.is-over { color: var(--color-danger); }
.ds-composer__hint { margin-top: var(--space-2); font-size: var(--text-sm);
                     color: var(--color-text-muted); }
.ds-composer__error {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-tint);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* Enquete no compositor (Fase 14) */
.ds-composer__poll {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-md);
}
.ds-composer__poll-options { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-composer__poll-option { display: flex; align-items: center; gap: var(--space-2); }
.ds-composer__poll-option input[type="text"] {
  flex: 1; min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.ds-composer__poll-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--color-text-muted);
}
.ds-composer__poll-remove:hover { color: var(--color-danger); }
.ds-composer__poll > .ds-btn { margin-top: var(--space-3); }
.ds-composer__poll-duration {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.ds-composer__poll-duration select { font-size: var(--text-sm); }
.ds-composer__tool.is-active { color: var(--color-primary); opacity: 1; }

/* CW — aviso de conteúdo sensível no compositor (Fase 21) */
.ds-composer__cw { margin-top: var(--space-3); }
.ds-composer__cw input { width: 100%; }

/* Rascunho/agendamento no compositor (Fase 21) */
.ds-composer__draft {
  margin-top: var(--space-3); padding: var(--space-4); border: var(--border);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3);
}
.ds-composer__draft label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.ds-composer__tool.is-disabled { opacity: 0.35; pointer-events: none; }

/* ============================================================ Top bar === */
/* Top bar — filete de 3px na marca, nav de ícones centrada com sublinhado ativo (Figma) */
.ds-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  height: var(--topbar-h);
  padding-inline: var(--space-5);
  background: var(--color-surface);
  border-bottom: var(--border);
  box-shadow: inset 0 3px 0 var(--color-primary);
}
.ds-topbar__side { display: flex; align-items: center; gap: var(--space-1); }
.ds-topbar__side--start { padding-left: var(--space-2); }   /* respiro da marca — não cola na borda */
.ds-topbar__side--end { justify-content: flex-end; }
.ds-topbar__nav { display: flex; align-items: stretch; gap: var(--space-6); }
.ds-topbar__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-2);
  color: var(--color-text-secondary);
}
.ds-topbar__nav-link:hover { color: var(--color-text-strong); }
.ds-topbar__nav-link[aria-current="page"] { color: var(--color-primary); }
.ds-topbar__nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.ds-topbar__nav-link .ds-icon { width: 1.625rem; height: 1.625rem; }
.ds-topbar__badge { position: absolute; top: 3px; right: -4px; }
.ds-topbar__divider {
  width: 1px; height: 20px; align-self: center;
  background: var(--color-border-strong); margin-inline: var(--space-2);
}
.ds-topbar__avatar { display: inline-flex; border-radius: var(--radius-pill); }

.ds-brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.ds-brand:hover { text-decoration: none; }
.ds-brand__mark { flex: none; }
.ds-brand__word { font-size: var(--text-lg); font-weight: var(--weight-bold);
                  color: var(--color-text-strong); letter-spacing: -0.01em; }
.ds-brand--lg .ds-brand__word { font-size: var(--text-xl); }

/* ===================================== Trilho de navegação (0:6 Weibo) === */
.ds-navrail {
  overflow: hidden;
  padding-block: var(--space-2);
}
.ds-navrail__section {
  padding: var(--space-5) var(--space-4) var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}
.ds-navrail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  padding-inline: var(--space-4);
  font-size: var(--text-md);
  color: var(--color-text-strong);
}
.ds-navrail__item:hover { text-decoration: none; background: var(--color-surface-hover); }
.ds-navrail__item .ds-icon { width: 1.625rem; height: 1.625rem; color: var(--color-text-secondary); flex: none; }
.ds-navrail__item[aria-current="page"] {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.ds-navrail__item[aria-current="page"] .ds-icon { color: var(--color-primary); }
.ds-navrail__label { flex: 1; min-width: 0; overflow: hidden;
                     text-overflow: ellipsis; white-space: nowrap; }
.ds-navrail__item .ds-badge { flex: none; }
/* Itens de "Мои темы" — estilo lista com marcador (≈ 我的分组 do Figma) */
.ds-navrail__item--topic { gap: var(--space-3); font-size: var(--text-base); height: 44px; }
.ds-navrail__item--topic::before {
  content: ""; flex: none; width: 4px; height: 4px; margin-left: 4px;
  border-radius: 50%; background: var(--color-text-muted);
}
.ds-navrail__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-3) var(--space-5) var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.ds-navrail__more:hover { text-decoration: none; background: var(--color-surface-hover); }

/* ===================================== Painel "Актуальное" (0:172 Weibo) === */
.ds-hotpanel {
  overflow: hidden;
}
.ds-hotpanel__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  margin: var(--space-4) var(--space-4) var(--space-4);
  padding-inline: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}
.ds-hotpanel__search .ds-icon { color: var(--color-text-muted); flex: none;
                                width: 1.25rem; height: 1.25rem; }
.ds-hotpanel__search input {
  width: 100%; border: 0; background: transparent;
  font-size: var(--text-md); color: var(--color-text);
}
.ds-hotpanel__search input::placeholder { color: var(--color-text-muted); }
.ds-hotpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding-inline: var(--space-5);
  border-top: var(--border);
}
.ds-hotpanel__title { font-size: var(--text-md); font-weight: var(--weight-medium);
                      color: var(--color-text-strong); }
.ds-hotpanel__hint {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-md); color: var(--color-text-muted);
}
.ds-hotpanel__hint .ds-icon { opacity: 0.6; }
.ds-hotrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  padding-inline: var(--space-5);
}
a.ds-hotrow:hover { text-decoration: none; background: var(--color-surface-hover); }
.ds-hotrow__rank {
  width: 22px; flex: none; text-align: center;
  font-size: 20px; font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-rank-low);
}
.ds-hotrow__rank[data-tier="top"] { color: var(--color-rank-top); }
.ds-hotrow__rank[data-tier="mid"] { color: var(--color-rank-mid); }
.ds-hotrow__topic {
  flex: 1; min-width: 0;
  font-size: var(--text-md);
  color: var(--color-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-hotrow__count {
  flex: none; font-size: var(--text-sm);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.ds-hotrow__badge {
  flex: none;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: var(--weight-bold);
  background: var(--color-accent); color: var(--color-text-on-fill);
}
.ds-hotrow--pinned { background: var(--color-accent-wash); }
.ds-pillbtn {
  display: block;
  margin: var(--space-3) auto var(--space-4);
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  width: fit-content;
}
.ds-pillbtn:hover { text-decoration: none; background: var(--color-surface-hover); }

/* ============================ Painel de atividade / notificações (0:454 Weibo) === */
.ds-activity {
  overflow: hidden;
}
.ds-activity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding-inline: var(--space-5);
}
.ds-activity__title { font-size: var(--text-md); font-weight: var(--weight-semibold);
                      color: var(--color-text-strong); }
.ds-activity__manage { font-size: var(--text-sm); color: var(--color-text-secondary); }
.ds-activity__manage:hover { color: var(--color-primary); }
.ds-activity__item { padding: var(--space-3) var(--space-5); }
.ds-activity__item + .ds-activity__item { border-top: var(--border); }
.ds-activity__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.ds-activity__row .ds-avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.ds-activity__line {
  flex: 1; min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-activity__line strong { color: var(--color-primary); font-weight: var(--weight-medium); }
.ds-activity__time { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-activity__snippet {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: block;
}
.ds-activity__snippet:hover { text-decoration: none; color: var(--color-text); }
.ds-activity__empty { padding: var(--space-6) var(--space-5); font-size: var(--text-sm);
                      color: var(--color-text-muted); text-align: center; }

/* "微博管理中心" — linha de acesso ao centro de controle */
.ds-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-inline: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.ds-control-row:hover { text-decoration: none; background: var(--color-surface-hover); }
.ds-control-row .ds-icon { color: var(--color-text-muted); }

/* Linhas de "Кого читать" (0:486 Weibo) */
.ds-suggest__head { border-top: 0; }
.ds-suggest__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
}
.ds-suggest__row + .ds-suggest__row { border-top: var(--border); }
/* Achado de auditoria: era `flex-direction: column` — nome, selo e @handle
   são 3 filhos diretos, e cada um virava sua própria linha (o selo caía
   sozinho entre o nome e o handle, "flutuando" fora de posição). Mesmo
   mecanismo já usado certo em .ds-post__ident: flex-wrap (nome+selo na
   mesma linha) + flex-basis:100% só no elemento que precisa ir pra linha 2. */
.ds-suggest__ident { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.ds-suggest__ident > .ds-suggest__handle { flex-basis: 100%; }
/* Achado de auditoria (15/10): faltava min-width:0 aqui — sem isso o
   truncamento de .ds-truncate não entra em ação dentro do flex (o nome
   renderiza na largura natural), sobra pouco espaço num card estreito
   (ex.: "Кого читать" na sidebar) e o selo acaba sendo empurrado pra sua
   própria linha. flex-shrink:0 no selo garante que ele nunca "encolhe"/
   quebra, só o nome. */
.ds-suggest__name { font-size: var(--text-base); font-weight: var(--weight-medium);
                    color: var(--color-text-strong); min-width: 0; flex-shrink: 1; }
.ds-suggest__ident > .ds-badge--verify { flex-shrink: 0; }
.ds-suggest__handle { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Fase 66: bloco ".ds-nav"/".ds-nav__item"/".ds-nav-rail" removido — órfão
   (nenhuma view usa essas classes; confirmado por busca em app/views). O
   trilho de navegação real do app é .ds-navrail (sem hífen no meio, mais
   acima neste arquivo), que já cobre o comportamento rail-só-ícone via
   media query em patterns.css. Os outros dois "item de nav vertical" do
   produto (.ds-adm-sidebar__item no admin, .adsw-sidebar__item no Ads
   Manager) servem contextos de chrome genuinamente diferentes — cada um
   já redesenhado recentemente (ver CLAUDE.md) — e não entram nesta
   consolidação. */

/* Nav inferior (mobile) */
.ds-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  display: none;
  justify-content: space-around;
  align-items: center;
  height: 52px;
  background: var(--color-surface);
  border-top: var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.ds-bottom-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 44px; height: 44px; color: var(--color-text-secondary);
}
.ds-bottom-nav a[aria-current="page"] { color: var(--color-primary); }
.ds-bottom-nav .ds-badge { position: absolute; top: 4px; right: 4px; }

/* ---------------------------------------------------------------- Tag --- */
/* Selo textual (severidade, status) — distinto do .ds-badge (contador). */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}
.ds-tag--warning  { background: var(--color-warning-tint); color: var(--color-warning); }
.ds-tag--danger   { background: var(--color-danger-tint);  color: var(--color-danger); }
.ds-tag--success  { background: var(--color-success-tint); color: var(--color-success); }
/* Severidade (TrustSafety::Severity) */
.ds-tag--low      { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.ds-tag--medium   { background: var(--color-warning-tint); color: var(--color-warning); }
.ds-tag--high     { background: var(--color-danger-tint); color: var(--color-danger); }
.ds-tag--critical { background: var(--color-danger); color: var(--color-text-on-fill); }

/* --------------------------------------------------------------- Table --- */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ds-table th, .ds-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border);
  vertical-align: top;
}
.ds-table th { color: var(--color-text-muted); font-weight: var(--weight-semibold); }
.ds-table tbody tr:hover { background: var(--color-surface-hover); }
.ds-table code { font-size: 12px; word-break: break-all; color: var(--color-text-muted); }

/* --------------------------------------------------------- Detail list --- */
.ds-detail-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.ds-detail-list dt { color: var(--color-text-muted); }
.ds-detail-list dd { margin: 0; color: var(--color-text-strong); }

/* ---------------------------------------------------------- Paginação --- */
/* Fase 70 — equivalente de .ds-adm-pager (admin.css) / .adsw-pager
   (ads-workspace.css) pras páginas de usuário; mesmo shape, prefixo próprio
   pra não misturar com os shells de admin/ads. */
.ds-pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding: var(--space-4) 0; font-size: var(--text-sm);
}
.ds-pager__info { color: var(--color-text-muted); }