:root {
  /*
   * ClipScout interface primitives
   *
   * Page styles own layout. This final cascade layer owns the visual contract
   * shared by every surface: sharp controls, violet interaction states,
   * recessed fields, compact badges, and consistent LDS line icons.
   */
  --clipscout-button-radius: 0px;
  --cs-control-height: 44px;
  --cs-control-border: rgba(203, 220, 228, 0.16);
  --cs-control-border-hover: rgba(190, 171, 255, 0.66);
  --cs-control-bg: rgba(15, 34, 45, 0.62);
  --cs-control-bg-hover: rgba(59, 45, 90, 0.68);
  --cs-control-text: #f4f7f9;
  --cs-control-muted: rgba(225, 235, 240, 0.58);
  --cs-accent: #aa8cff;
  --cs-accent-strong: #c5b6ff;
  --cs-focus-ring: rgba(197, 182, 255, 0.92);
  --cs-field-bg: rgba(3, 14, 21, 0.68);
  --cs-field-border: rgba(190, 214, 225, 0.18);
  --cs-danger: #ffb9bd;
  --cs-success: #aeeacc;
  --interface-icon-stroke: 1.5;
  --interface-icon-size: 20px;
  --interface-icon-size-compact: 16px;
  --interface-icon-size-identity: 28px;
}

/* Shared geometry and behavior for every action surface. Contextual page
 * styles may still choose size and color, but browser-native rendering never
 * leaks through an intentionally styled ClipScout control. */
:where(
  button,
  .button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) {
  border-radius: var(--clipscout-button-radius) !important;
  font-family: inherit;
  text-underline-offset: 0.18em;
  -webkit-tap-highlight-color: transparent;
}

:where(button, .button, [role="button"]):focus-visible,
:where(
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):focus-visible {
  outline: 2px solid var(--cs-focus-ring) !important;
  outline-offset: 3px !important;
}

:where(button, .button, [role="button"])[disabled],
:where(
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* Explicit action primitive. Use a modifier to communicate hierarchy rather
 * than introducing another one-off button implementation. */
.cs-button {
  min-height: var(--cs-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--cs-control-border);
  color: var(--cs-control-text);
  background:
    linear-gradient(145deg, rgba(74, 97, 109, 0.3), rgba(10, 25, 35, 0.2)),
    var(--cs-control-bg);
  box-shadow:
    0 8px 22px rgba(1, 8, 12, 0.24),
    inset 1px 1px 0 rgba(244, 250, 252, 0.055);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
  font: 750 13px/1 "DM Sans", "Inter", system-ui, sans-serif;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

/* Repeat the class intentionally so the shared primitive wins over legacy
 * page selectors such as `.panel-actions button` without using `!important`. */
.cs-button.cs-button {
  min-height: var(--cs-control-height);
  font: 750 13px/1 "DM Sans", "Inter", system-ui, sans-serif;
}

.cs-button:hover:not(:disabled),
.cs-button:focus-visible:not(:disabled) {
  border-color: var(--cs-control-border-hover);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(104, 79, 159, 0.44), rgba(28, 34, 57, 0.28)),
    var(--cs-control-bg-hover);
  box-shadow:
    0 10px 26px rgba(2, 8, 12, 0.3),
    0 0 22px rgba(140, 107, 255, 0.15),
    inset 1px 1px 0 rgba(244, 250, 252, 0.07);
}

.cs-button:active:not(:disabled) {
  transform: translateY(1px);
}

.cs-button.cs-button--primary,
.cs-button.cs-button--editorial {
  border-color: rgba(184, 160, 255, 0.5);
  color: #f7f3ff;
  background:
    linear-gradient(135deg, rgba(128, 92, 207, 0.62), rgba(73, 51, 124, 0.46)),
    rgba(56, 41, 86, 0.76);
  box-shadow:
    0 10px 26px rgba(7, 4, 15, 0.3),
    0 0 24px rgba(139, 103, 255, 0.13),
    inset 1px 1px 0 rgba(236, 229, 255, 0.11);
}

.cs-button.cs-button--editorial[aria-pressed="true"] {
  border-color: rgba(198, 182, 255, 0.28);
  color: #ddd5ff;
  background:
    linear-gradient(145deg, rgba(59, 72, 83, 0.32), rgba(26, 27, 43, 0.28)),
    rgba(21, 33, 42, 0.7);
}

.cs-button.cs-button--danger {
  border-color: rgba(255, 145, 151, 0.3);
  color: var(--cs-danger);
  background: rgba(92, 31, 40, 0.28);
}

.cs-button.cs-button--quiet {
  border-color: transparent;
  color: rgba(235, 241, 244, 0.72);
  background: transparent;
  box-shadow: none;
}

.cs-button.cs-button--danger:hover:not(:disabled),
.cs-button.cs-button--danger:focus-visible:not(:disabled) {
  border-color: rgba(255, 164, 169, 0.64);
  color: #ffe7e9;
  background: rgba(122, 39, 51, 0.48);
  box-shadow: 0 0 20px rgba(255, 99, 111, 0.12);
}

.cs-icon-button {
  width: var(--cs-control-height);
  min-width: var(--cs-control-height);
  padding: 0;
}

:where(.cs-button, .cs-icon-button) svg,
:where(button, .button, [role="button"]) > svg {
  width: var(--interface-icon-size);
  height: var(--interface-icon-size);
  flex: 0 0 auto;
  stroke-width: var(--interface-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Fields share one recessed channel, selection color, and focus treatment.
 * Search controls retain their specialized integrated-shell layout. */
:where(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="search"]),
  select,
  textarea
) {
  border-radius: 0 !important;
  color: var(--cs-control-text);
  border-color: var(--cs-field-border);
  background-color: var(--cs-field-bg);
  caret-color: var(--cs-accent-strong);
  font-family: inherit;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

:where(
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="search"]),
  select,
  textarea
):focus-visible {
  border-color: rgba(190, 171, 255, 0.66) !important;
  outline: 2px solid rgba(184, 165, 255, 0.42) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 20px rgba(130, 105, 244, 0.12) !important;
}

:where(input, textarea)::placeholder {
  color: rgba(222, 232, 237, 0.42);
  opacity: 1;
}

:where(input, textarea)::selection {
  color: #fff;
  background: rgba(126, 91, 205, 0.68);
}

/* Compact semantic label primitive. Existing product badges inherit the same
 * typography and geometry while retaining their contextual meaning colors. */
.cs-badge,
:where(
  .clipscout-badge,
  .member-role-badge,
  .comment-identity-badge,
  .comment-author-badge,
  .admin-account-state,
  .admin-member-table td > em,
  .result-badges span
) {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  padding: 0 10px;
  border-radius: 0 !important;
  font-family: "DM Sans", "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cs-badge svg {
  width: var(--interface-icon-size-compact);
  height: var(--interface-icon-size-compact);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--interface-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Platform-wide LDS sizing contract. Page styles may size the surrounding
 * action target, but the glyph inside every action uses one visual box. Named
 * identity and empty-state illustrations are intentionally excluded below. */
:where(
  button:not(.member-avatar-choice),
  .button,
  [role="button"],
  .channel-page-back,
  .member-channel-open
) svg:not(.icon-sprite) {
  width: var(--interface-icon-size) !important;
  height: var(--interface-icon-size) !important;
  flex: 0 0 var(--interface-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--interface-icon-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.inline-lds-icon {
  width: var(--interface-icon-size) !important;
  height: var(--interface-icon-size) !important;
  flex: 0 0 var(--interface-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--interface-icon-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

:where(
  .cs-badge,
  .account-verified-mark,
  .playlist-choice-mark,
  .comment-avatar
) svg {
  width: var(--interface-icon-size-compact) !important;
  height: var(--interface-icon-size-compact) !important;
  flex-basis: var(--interface-icon-size-compact);
  stroke-width: var(--interface-icon-stroke) !important;
}

/* Identity selections and illustration-only placeholders are the only larger
 * glyphs. They use a single documented size instead of page-relative ratios. */
:where(.member-avatar-choice, .member-header-avatar) svg {
  width: var(--interface-icon-size-identity) !important;
  height: var(--interface-icon-size-identity) !important;
  stroke-width: var(--interface-icon-stroke) !important;
}

:where(.member-video-placeholder, .channel-page-icon) svg {
  width: var(--interface-icon-size-identity) !important;
  height: var(--interface-icon-size-identity) !important;
  stroke-width: var(--interface-icon-stroke) !important;
}

.cs-badge--editorial {
  position: relative;
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 12px 13px;
  overflow: hidden;
  border: 1px solid rgba(190, 173, 255, 0.28) !important;
  color: #e6dfff !important;
  background:
    linear-gradient(120deg, rgba(132, 94, 214, 0.3), rgba(34, 42, 58, 0.26)),
    rgba(13, 28, 38, 0.7) !important;
  box-shadow:
    0 8px 20px rgba(2, 8, 12, 0.24),
    inset 1px 1px 0 rgba(243, 239, 255, 0.08) !important;
  letter-spacing: 0.055em;
  text-transform: none;
}

.clipscout-select-toggle.cs-button {
  flex: 0 0 auto;
}

.cs-badge--editorial::before {
  content: "";
  align-self: stretch;
  width: 3px;
  margin: -1px 2px -1px -12px;
  background: linear-gradient(180deg, #d3c6ff, #8b67e6);
  box-shadow: 0 0 14px rgba(170, 140, 255, 0.58);
}

/* Status copy uses the same semantic palette everywhere without assuming a
 * particular page layout. */
:where(.cs-status, .member-status, .admin-status, .admin-member-status, .glass-dialog-status)[data-type="success"] {
  color: var(--cs-success);
}

:where(.cs-status, .member-status, .admin-status, .admin-member-status, .glass-dialog-status)[data-type="error"] {
  color: var(--cs-danger);
}

/* Switches are state controls rather than button silhouettes. */
.playlist-playback-mode,
.playlist-playback-mode span {
  border-radius: 999px !important;
}

/* Video-card actions are the intentional compact-control exception to the
 * platform's otherwise sharp action geometry. The softened 10px silhouette
 * separates artwork-attached actions from page-level buttons without making
 * their selected state compete with the thumbnail. */
.unified-results-grid .card-action {
  border-radius: 10px !important;
}

/* Avatars and dialog dismiss controls retain their recognized circular form. */
.profile-button,
.glass-dialog-close,
.member-header-avatar {
  border-radius: 50% !important;
}

@media (prefers-reduced-motion: reduce) {
  .cs-button,
  :where(input, select, textarea) {
    transition: none;
  }
}

@media (max-width: 700px) {
  /* The late shared layer restores wrapping after the desktop player rail so
   * the complete editorial label and action remain visible without sideways
   * scrolling or flex compression. */
  .summary-action-rail .channel-row {
    width: 100%;
    flex-wrap: wrap;
  }

  .clipscout-select-toggle.cs-button {
    max-width: 100%;
  }
}