/* FoxChat sound reactions — isolated dashboard page */
.sound-panel-section {
  --sound-accent: #f59e0b;
  --sound-accent-2: #fb7185;
  --sound-green: #45ddb0;
  --sound-surface: #100e16;
  --sound-line: #ffffff12;
}

.sound-studio {
  display: grid;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
}

.sound-hero {
  position: relative;
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #ffffff16;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 16%, #f59e0b29, transparent 25%),
    radial-gradient(circle at 9% 0%, #8b5cf622, transparent 30%),
    linear-gradient(145deg, #181321, #0d0b12 58%, #11120d);
  box-shadow: 0 24px 70px #00000042, inset 0 1px 0 #ffffff0d;
}

.sound-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 45%, #ffffff08 50%, transparent 55%);
}

.sound-hero > div,
.sound-hero-orb {
  position: relative;
  z-index: 1;
}

.sound-hero h2 {
  margin: 8px 0 9px;
  color: #faf8fd;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -1.6px;
}

.sound-hero p {
  max-width: 760px;
  margin: 0;
  color: #aaa2b3;
  font-size: 14px;
  line-height: 1.65;
}

.sound-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.sound-trust-row span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #ffffff10;
  border-radius: 999px;
  color: #bcb5c6;
  background: #ffffff05;
  font-size: 10px;
  font-weight: 800;
}

.sound-trust-row .line-icon {
  width: 14px;
  height: 14px;
  color: #f6af36;
}

.sound-hero-orb {
  display: grid;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #ffffff24;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #f97316 52%, #ec4899);
  box-shadow: 0 24px 54px #f59e0b31, inset 0 1px 0 #ffffff52;
  transform: rotate(4deg);
}

.sound-hero-orb .line-icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.6;
}

.sound-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 18px;
}

.sound-source-card,
.sound-master-card,
.sound-library {
  border: 1px solid var(--sound-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff07, transparent 34%), linear-gradient(145deg, #15121c, #0c0b11 72%, #0b1110);
  box-shadow: 0 20px 58px #00000036, inset 0 1px 0 #ffffff09;
}

.sound-source-card,
.sound-master-card {
  padding: 20px;
}

.sound-source-title {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.sound-source-title > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #f5a62338;
  border-radius: 15px;
  color: #ffc05b;
  background: #f59e0b12;
}

.sound-source-title .line-icon {
  width: 23px;
  height: 23px;
}

.sound-source-title small,
.sound-master-card header small {
  color: #8c8494;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.sound-source-title h3,
.sound-master-card h3,
.sound-library h3 {
  margin: 3px 0 0;
  color: #f1edf6;
  font-size: 20px;
  letter-spacing: -.35px;
}

.sound-source-title > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sound-green);
  box-shadow: 0 0 14px #45ddb0a3;
}

.sound-source-card > p {
  margin: 15px 0;
  color: #9d96a5;
  font-size: 12px;
  line-height: 1.58;
}

.sound-source-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
  border: 1px solid #ffffff11;
  border-radius: 13px;
  background: #08070dba;
}

.sound-source-link code {
  align-self: center;
  overflow: hidden;
  padding: 0 6px;
  color: #b4abbc;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sound-source-link button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #f59e0b30;
  border-radius: 10px;
  color: #ffd08a;
  background: #f59e0b10;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.sound-source-link .line-icon {
  width: 15px;
  height: 15px;
}

.sound-source-card ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.sound-source-card li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #8f8897;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
}

.sound-source-card li b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #f6b34a;
  background: #f59e0b10;
  font-size: 9px;
}

.sound-master-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.sound-master-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sound-master-switch,
.sound-rule-switch {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: #9c95a5;
  font-size: 10px;
  cursor: pointer;
}

.sound-master-switch input,
.sound-rule-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sound-master-switch span,
.sound-rule-switch span {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid #ffffff17;
  border-radius: 999px;
  background: #24212b;
  transition: .2s ease;
}

.sound-master-switch span::after,
.sound-rule-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #817989;
  transition: .2s cubic-bezier(.16, 1, .3, 1);
}

.sound-master-switch input:checked + span,
.sound-rule-switch input:checked + span {
  border-color: #f59e0b66;
  background: #f59e0b24;
}

.sound-master-switch input:checked + span::after,
.sound-rule-switch input:checked + span::after {
  background: #ffbd4a;
  box-shadow: 0 0 12px #f59e0b80;
  transform: translateX(16px);
}

.sound-rule-switch input:disabled + span {
  opacity: .45;
}

.sound-master-range,
.sound-rule-controls label,
.sound-mode-field {
  display: grid;
  gap: 9px;
}

.sound-master-range > span,
.sound-rule-controls label > span,
.sound-mode-field > span {
  display: flex;
  justify-content: space-between;
  color: #bbb3c2;
  font-size: 11px;
  font-weight: 800;
}

.sound-master-range b,
.sound-rule-controls b {
  color: #ffc259;
  font-variant-numeric: tabular-nums;
}

.sound-master-range input,
.sound-rule-controls input {
  width: 100%;
  accent-color: var(--sound-accent);
  cursor: pointer;
}

.sound-mode-field small {
  color: #7e7786;
  font-size: 10px;
  line-height: 1.45;
}

.sound-master-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #ffffff0d;
}

.sound-master-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8f8898;
  font-size: 10px;
  font-weight: 800;
}

.sound-master-footer > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sound-green);
  box-shadow: 0 0 10px #45ddb080;
}

.sound-master-footer .button {
  min-height: 44px;
  border: 0;
  background: linear-gradient(135deg, #f59e0b, #f97316 58%, #ec4899);
  box-shadow: 0 12px 28px #f59e0b24;
}

.sound-library {
  padding: 22px;
}

.sound-library > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.sound-library > header p {
  max-width: 720px;
  margin: 7px 0 0;
  color: #8f8799;
  font-size: 12px;
  line-height: 1.55;
}

.sound-add-reward {
  min-height: 44px;
  border-color: #f59e0b42;
  color: #ffd28c;
  background: #f59e0b11;
}

.sound-rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 12px;
}

.sound-rule-card {
  position: relative;
  min-width: 0;
  padding: 15px;
  border: 1px solid #ffffff0e;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff05, transparent 42%), #0a090fbd;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sound-rule-card.has-sound {
  border-color: #f59e0b2d;
  box-shadow: inset 0 1px 0 #ffffff08;
}

.sound-rule-card.is-uploading::after {
  content: "Загружаем звук…";
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: #ffe4b8;
  background: #09070de8;
  font-size: 12px;
  font-weight: 900;
}

.sound-rule-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
}

.sound-rule-art {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ffffff10;
  border-radius: 13px;
  color: #ffc15c;
  background: linear-gradient(135deg, #f59e0b17, #8b5cf612);
}

.sound-rule-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sound-rule-art .line-icon {
  width: 20px;
  height: 20px;
}

.sound-rule-head h4 {
  margin: 0 0 3px;
  color: #ebe7f0;
  font-size: 13px;
}

.sound-rule-head p {
  margin: 0;
  color: #817a88;
  font-size: 10px;
  line-height: 1.4;
}

.sound-rule-switch b {
  display: none;
}

.sound-icon-button,
.sound-dialog-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #ffffff10;
  border-radius: 12px;
  color: #9a929f;
  background: #ffffff04;
  cursor: pointer;
  transition: .2s ease;
}

.sound-icon-button:hover,
.sound-dialog-close:hover {
  border-color: #ffffff24;
  color: #fff;
  background: #ffffff08;
}

.sound-icon-button.is-danger:hover {
  border-color: #ef617d55;
  color: #ff9bad;
  background: #ef617d10;
}

.sound-icon-button .line-icon,
.sound-dialog-close .line-icon {
  width: 17px;
  height: 17px;
}

.sound-upload-empty {
  display: flex;
  width: 100%;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #f59e0b42;
  border-radius: 13px;
  color: inherit;
  background: #f59e0b07;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.sound-upload-empty:hover {
  border-color: #f8b84e8a;
  background: #f59e0b0d;
}

.sound-upload-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: #ffc25e;
  background: #f59e0b12;
}

.sound-upload-empty strong,
.sound-file-ready strong {
  display: block;
  color: #dcd7e2;
  font-size: 11px;
}

.sound-upload-empty small,
.sound-file-ready small {
  display: block;
  margin-top: 3px;
  color: #77717e;
  font-size: 9px;
}

.sound-file-ready {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid #ffffff0e;
  border-radius: 13px;
  background: #08070db8;
}

.sound-file-ready > div {
  grid-column: 1 / -1;
}

.sound-preview-button,
.sound-text-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #ffffff10;
  border-radius: 11px;
  color: #bfb7c8;
  background: #ffffff05;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.sound-preview-button {
  padding: 0 12px;
  color: #ffd18a;
  background: #f59e0b0d;
}

.sound-preview-button.is-playing {
  border-color: #45ddb05c;
  color: #7de5c2;
  background: #45ddb00d;
}

.sound-preview-button .line-icon,
.sound-text-button .line-icon {
  width: 15px;
  height: 15px;
}

.sound-text-button {
  padding: 0 11px;
}

.sound-rule-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #ffffff0b;
}

.sound-rule-controls[hidden] {
  display: none;
}

.sound-rule-controls .button {
  min-height: 44px;
}

.sound-empty-rewards {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 110px;
  padding: 18px;
  border: 1px dashed #ffffff14;
  border-radius: 16px;
  background: #ffffff02;
}

.sound-empty-rewards > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  color: #f7b84d;
  background: #f59e0b0d;
}

.sound-empty-rewards strong {
  color: #ddd8e5;
  font-size: 13px;
}

.sound-empty-rewards p {
  margin: 5px 0 0;
  color: #817a88;
  font-size: 10px;
}

.sound-reward-dialog {
  width: min(660px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #f4f0f8;
  background: transparent;
  box-shadow: 0 34px 100px #000000b5;
}

.sound-reward-dialog::backdrop {
  background: #05040bd9;
  backdrop-filter: blur(10px);
}

.sound-reward-dialog-shell {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 1px solid #ffffff19;
  border-radius: 22px;
  background: radial-gradient(circle at 92% 0%, #f59e0b1e, transparent 28%), linear-gradient(150deg, #17131f, #0b0a11 62%, #0b100e);
}

.sound-reward-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid #ffffff0d;
}

.sound-reward-dialog h3 {
  margin: 6px 0 5px;
  font-size: 25px;
  letter-spacing: -.7px;
}

.sound-reward-dialog header p {
  margin: 0;
  color: #8e8796;
  font-size: 11px;
  line-height: 1.45;
}

.sound-picker-content {
  max-height: min(600px, calc(100dvh - 170px));
  overflow: auto;
  padding: 16px 22px 22px;
}

.sound-picker-search {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid #ffffff12;
  border-radius: 13px;
  background: #09080e;
}

.sound-picker-search > span {
  display: grid;
  place-items: center;
  color: #81798a;
}

.sound-picker-search .line-icon {
  width: 15px;
  height: 15px;
}

.sound-picker-search .input {
  border: 0;
  background: transparent;
}

.sound-reward-catalog {
  display: grid;
  gap: 8px;
}

.sound-reward-catalog > button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  padding: 9px 11px;
  border: 1px solid #ffffff0e;
  border-radius: 13px;
  color: inherit;
  background: #ffffff03;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.sound-reward-catalog > button:hover {
  border-color: #f59e0b4d;
  background: #f59e0b0a;
}

.sound-reward-catalog > button > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  color: #ffc45e;
  background: #f59e0b0e;
}

.sound-reward-catalog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sound-reward-catalog strong,
.sound-reward-catalog small {
  display: block;
}

.sound-reward-catalog strong {
  color: #ddd8e4;
  font-size: 12px;
}

.sound-reward-catalog small {
  margin-top: 4px;
  color: #817a88;
  font-size: 9px;
}

.sound-reward-catalog > button > .line-icon {
  width: 17px;
  height: 17px;
  color: #d7a846;
}

.sound-picker-state {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #8f8798;
  text-align: center;
}

.sound-picker-state > .line-icon {
  width: 30px;
  height: 30px;
  color: #d5a94c;
}

.sound-picker-state strong {
  color: #ded8e5;
  font-size: 14px;
}

.sound-picker-state small {
  max-width: 380px;
  line-height: 1.5;
}

.sound-picker-state .button {
  margin-top: 8px;
}

.donation-reauth-notice {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid #e4ad3e45;
  border-radius: 17px;
  background: linear-gradient(90deg, #e4ad3e12, #8b5cf60a);
}

.donation-reauth-notice > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #ffd16f;
  background: #e4ad3e13;
}

.donation-reauth-notice strong {
  color: #f1e9d8;
  font-size: 13px;
}

.donation-reauth-notice p {
  margin: 4px 0 0;
  color: #a39888;
  font-size: 11px;
  line-height: 1.45;
}

.donation-alerts-card.needs-reauth {
  border-color: #e4ad3e42;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sound-panel-section button:focus-visible,
.sound-panel-section input:focus-visible,
.sound-panel-section select:focus-visible,
.sound-reward-dialog :focus-visible,
.donation-reauth-notice a:focus-visible {
  outline: 2px solid #f8b84e;
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .sound-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sound-hero {
    min-height: 0;
    padding: 24px 21px;
  }

  .sound-hero-orb {
    width: 70px;
    height: 70px;
    border-radius: 22px;
  }

  .sound-hero-orb .line-icon {
    width: 32px;
    height: 32px;
  }

  .sound-source-card ol {
    grid-template-columns: 1fr;
  }

  .sound-library > header {
    align-items: stretch;
    flex-direction: column;
  }

  .sound-add-reward {
    width: 100%;
  }

  .sound-rule-grid {
    grid-template-columns: 1fr;
  }

  .sound-rule-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .sound-rule-head > .sound-icon-button {
    grid-column: 3;
  }

  .sound-file-ready {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .sound-file-ready .sound-icon-button {
    grid-column: 3;
  }

  .sound-text-button {
    grid-column: 2;
  }

  .sound-empty-rewards,
  .donation-reauth-notice {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .sound-empty-rewards .button,
  .donation-reauth-notice .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sound-studio {
    gap: 12px;
  }

  .sound-hero {
    padding: 20px 17px;
    border-radius: 18px;
  }

  .sound-hero h2 {
    font-size: 30px;
  }

  .sound-hero-orb {
    display: none;
  }

  .sound-trust-row span {
    min-height: 40px;
  }

  .sound-source-card,
  .sound-master-card,
  .sound-library {
    padding: 16px;
    border-radius: 17px;
  }

  .sound-source-link {
    grid-template-columns: 1fr;
  }

  .sound-source-link code {
    min-height: 34px;
    padding-top: 10px;
  }

  .sound-source-link button {
    justify-content: center;
  }

  .sound-master-card > header,
  .sound-master-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sound-master-switch {
    width: 100%;
  }

  .sound-master-footer .button {
    width: 100%;
  }

  .sound-rule-head {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .sound-rule-art {
    width: 40px;
    height: 40px;
  }

  .sound-rule-switch {
    min-width: 44px;
  }

  .sound-rule-controls {
    grid-template-columns: 1fr;
  }

  .sound-rule-controls .button {
    width: 100%;
  }

  .sound-file-ready {
    grid-template-columns: 1fr auto;
  }

  .sound-file-ready > div {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .sound-preview-button {
    grid-column: 1;
    grid-row: 2;
  }

  .sound-file-ready .sound-icon-button {
    grid-column: 2;
    grid-row: 2;
  }

  .sound-text-button {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .sound-reward-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 17px;
  }

  .sound-reward-dialog-shell {
    max-height: calc(100dvh - 12px);
    border-radius: 17px;
  }

  .sound-reward-dialog header {
    padding: 18px;
  }

  .sound-picker-content {
    padding: 14px 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-panel-section *,
  .sound-reward-dialog * {
    animation: none !important;
    transition: none !important;
  }
}