/* Native Destoon callbacks replace className; stable attributes keep the demo
   button treatment intact without modifying page.js or its request logic. */
.vieter-detail-actions { margin: 1.5rem 0; clear: both; }
.vieter-detail-actions .vieter-detail-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: .625rem;
  margin-bottom: 1rem; font-size: .875rem;
}
.vieter-detail-tags > span { color: var(--bs-secondary-color, #6e6e6e); }
.vieter-detail-actions .vieter-detail-tags > a {
  display: inline-block; padding: .5rem .75rem; border-radius: .375rem;
  background: var(--rgba-primary-1, #e6f0ff); color: var(--primary, #007bff);
  font-size: .8125rem; line-height: 1.3; font-weight: 500; text-decoration: none;
  white-space: normal; overflow-wrap: anywhere;
}
.vieter-detail-actions .tool {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem;
  width: auto; margin: 0; padding: 0; border: 0;
}
.vieter-detail-actions .tool [data-vieter-action] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  box-sizing: border-box; min-height: 42px; margin: 0; padding: .625rem 1rem;
  border: 1px solid var(--primary, #007bff); border-radius: .375rem;
  background: transparent; color: var(--primary, #007bff); cursor: pointer;
  font: inherit; font-size: .875rem; line-height: 1.5; text-decoration: none;
  box-shadow: none; background-image: none;
}
.vieter-detail-actions [data-vieter-action] svg {
  width: 18px; height: 18px; flex: 0 0 18px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.vieter-detail-actions [data-vieter-action] b { font-size: inherit; font-weight: 500; }
.vieter-detail-actions .tool [data-vieter-action]:hover,
.vieter-detail-actions .tool [data-vieter-action].liked,
.vieter-detail-actions .tool [data-vieter-action].hated,
.vieter-detail-actions .tool [data-vieter-action].favorited {
  background: var(--primary, #007bff); color: #fff;
}
.vieter-detail-actions [data-vieter-action]:focus-visible,
.vieter-detail-actions .vieter-detail-tags a:focus-visible {
  outline: 3px solid var(--primary, #007bff); outline-offset: 3px;
}
@media (max-width: 575px) {
  .vieter-detail-actions .tool { gap: .5rem; }
  .vieter-detail-actions .tool [data-vieter-action] { padding: .625rem .75rem; }
}
/* Dtoast appends outside the scoped legacy content stylesheet. */
body:has(.vieter-detail-actions) > .ui-toast {
  display: inline-block; position: fixed; z-index: 1100; top: 40%; left: 48%;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 6px;
  background: #1e293b; color: #fff; font-size: 16px; line-height: 24px;
}