/* Dashboard entry theme transition: start dark, then brighten on light-pref browsers. */
body[data-transfer-view="dashboard"][data-dashboard-theme-phase="dark"] {
  --bg: #000000;
  --fg: #c9c7b3;
  --muted: #c9c7b3;
  --text-subtle: #c9c7b3;
  --text-faint: #c9c7b3;
  --pill-fg: #c9c7b3;
  --text-drag: #c9c7b3;
  --toast-fg: #c9c7b3;
  --border: #c9c7b3;
  --border2: rgba(201, 199, 179, 0.3);
  --hover: rgba(201, 199, 179, 0.08);
  --pill: #110e0e;
  --header-bg: #111111;
  --overlay-bg: #000000;
  --panel-bg: #110e0e;
  --card-bg: #110e0e;
  --panel-strong-bg: #110e0e;
  --log-bg: #110e0e;
  --toast-bg: #110e0e;
  --thumb-bg: #110e0e;
  --cover-btn-bg: #110e0e;
  --cover-indicator-bg: #110e0e;
  --drop-border: #c9c7b3;
  --drop-shadow: rgba(201, 199, 179, 0.2);
  --drop-outline: #c9c7b3;
  --drop-hint-bg: rgba(26, 24, 25, 0.8);
  --drop-marker-bg: #c9c7b3;
  --btn-bg: #c9c7b3;
  --btn-fg: #000000;
  --btn-border: #c9c7b3;
  --btn-disabled-bg: #191515;
  --btn-disabled-fg: #c9c7b3;
  --btn-disabled-border: #191515;
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: #c9c7b3;
  --btn-ghost-border: #c9c7b3;
  --footer-bg: #000000;
  --footer-fg: #ffffff;
  --footer-muted: rgba(255, 255, 255, 0.7);
  --footer-border: rgba(255, 255, 255, 0.2);
}

body[data-transfer-view="dashboard"].dashboard-theme-transition,
body[data-transfer-view="dashboard"].dashboard-theme-transition * {
  transition:
    background-color 1100ms ease,
    color 1100ms ease,
    border-color 1100ms ease,
    box-shadow 1100ms ease,
    fill 1100ms ease,
    stroke 1100ms ease;
}

body[data-header-surface="transfer"] header {
  padding: 16px 24px;
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  body[data-header-surface="transfer"] header {
    background: transparent;
  }
}

body[data-header-surface="transfer"] header h1 {
  font-size: var(--theme-text-size-lg, 13px);
  font-weight: 600;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-caps-xl, 0.06em);
  margin: 0;
}

body[data-header-surface="transfer"] header .brand-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

body[data-header-surface="transfer"] header a,
body[data-header-surface="transfer"] header button {
  font-size: var(--theme-text-size-md, 12px);
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label-wide, 0.03em);
  font-weight: 500;
  transition: opacity 0.3s ease;
  opacity: var(--header-link-opacity, 0.75);
}

body[data-header-surface="transfer"] header a:hover,
body[data-header-surface="transfer"] header button:hover {
  opacity: var(--header-link-opacity-hover, 1);
}

body[data-header-surface="transfer"] header a.header-account-avatar,
body[data-header-surface="transfer"] header a.header-account-avatar:hover {
  opacity: 1;
  text-transform: var(--theme-text-transform-none, none);
  letter-spacing: var(--theme-tracking-base, 0);
}

/* Main Layout */
main {
  padding: 24px;
  background: var(--bg);
}

@media (max-width: 1200px) {
  main {
    padding: 16px;
  }
}

.wrap.grid {
  display: grid;
  grid-template-columns: 0.75fr 2.25fr;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .wrap.grid {
    grid-template-columns: 1fr;
  }
}

/* Card Styling */
.card {
  background: var(--panel-bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .card:hover {
    box-shadow: 0 4px 16px rgba(201, 199, 179, 0.1);
  }
}

.card h2 {
  margin: 0 0 16px 0;
  font-size: var(--theme-text-size-4xl, 35px);
  font-weight: 500;
  letter-spacing: var(--theme-tracking-label, 0.02em);
}

.dashboard-panel-tabs {
  margin: 0 0 16px 0;
  padding: 0 0 12px 0;
  border-bottom: 0px solid var(--border2);
  display: flex;
  gap: 14px;
  align-items: center;
}

.dashboard-panel-tab {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  font-size: var(--theme-text-size-4xl, 20px);
  font-weight: 500;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label, 0.02em);
  text-decoration: none;
  cursor: pointer;
  opacity: 0.72;
}

.dashboard-panel-tab:hover,
.dashboard-panel-tab:focus-visible {
  opacity: 1;
  outline: none;
}

.dashboard-panel-tab.is-active {
  opacity: 1;
  color: var(--fg);
}

.dashboard-panel-view {
  display: none;
}

.dashboard-panel-view.is-active {
  display: grid;
  gap: 16px;
}

.card .body {
  display: grid;
  gap: 16px;
}

/* Admin Panel */
.admin-panel {
  position: sticky;
  top: 80px;
  height: fit-content;
}

/* Quota Meter */
.quota-meter {
  display: grid;
  gap: 8px;
}

.quota-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--theme-text-size-sm, 11px);
  font-weight: 500;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label, 0.02em);
}

.quota-bar {
  height: 8px;
  background: var(--border2);
  border-radius: 4px;
  overflow: hidden;
}

.quota-fill {
  height: 100%;
  background: linear-gradient(to right, #000000, #333333);
  transition: width 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .quota-fill {
    background: linear-gradient(to right, #c9c7b3, #a8a59f);
  }

  .auto-drop {
    background-image: radial-gradient(
        farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        hsla(0, 0%, 60%, var(--hl, 0)) 8%,
        hsla(0, 0%, 50%, var(--hl, 0)) 22%,
        hsla(0, 0%, 40%, 0) 66%
      ),
      radial-gradient(40% 51% at 7% 32%, rgba(150, 150, 150, 0.05) 0%, rgba(0, 0, 0, 0) 100%),
      radial-gradient(40% 52% at 85% 67%, rgba(130, 130, 130, 0.05) 0%, rgba(0, 0, 0, 0) 100%),
      radial-gradient(80% 80% at 50% 50%, rgba(140, 140, 140, 0.06) 27%, rgba(0, 0, 0, 0) 58%),
      conic-gradient(
        from var(--bgrotate-auto) at 50% 50%,
        rgba(140, 140, 140, 0.05) 5%,
        rgba(0, 0, 0, 0) 17%,
        rgba(0, 0, 0, 0) 40%,
        rgba(130, 130, 130, 0.05) 48%,
        rgba(130, 130, 130, 0.05) 51%,
        rgba(0, 0, 0, 0) 59%,
        rgba(0, 0, 0, 0) 83%,
        rgba(140, 140, 140, 0.05) 95%
      ),
      conic-gradient(
        from var(--bgrotate2-auto) at 50% 50%,
        rgba(140, 140, 140, 0.05) 0%,
        rgba(135, 135, 135, 0.05) 34%,
        rgba(135, 135, 135, 0.05) 64%,
        rgba(140, 140, 140, 0.05) 100%
      );
  }

  .auto-drop:hover {
    --hl: 0.2;
  }

  .auto-drop:hover::before {
    animation: pulse-border-hover-dark 1s ease-in-out infinite;
  }

  @keyframes pulse-border-hover-dark {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(201, 199, 179, 0.1);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(201, 199, 179, 0.05);
    }
  }
}

/* Playlists Panel */
.playlists-panel {
  display: grid;
  gap: 16px;
}

.remote-section {
  border-top: 1px solid var(--border2);
  padding-top: 12px;
  margin-top: 12px;
}

.remote-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.playlists-panel .body > #playlists + .remote-section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.playlists-panel .body .dashboard-panel-view > #playlists + .remote-section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.remote-section h3 {
  margin: 0 0 12px 0;
  font-size: var(--theme-text-size-md, 12px);
  font-weight: 500;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label, 0.02em);
}

/* Actions */
.dashboard-primary-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.primary-btn,
.publish-btn {
  padding: 6px 12px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  font-size: var(--theme-text-size-sm, 11px);
  font-weight: 500;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label, 0.02em);
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn:hover,
.publish-btn:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  .primary-btn:hover,
  .publish-btn:hover {
    box-shadow: 0 2px 8px rgba(201, 199, 179, 0.15);
  }
}

.publish-btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
}

@property --bgrotate-auto {
  initial-value: 120deg;
  inherits: false;
  syntax: "<angle>";
}

@property --bgrotate2-auto {
  initial-value: 255deg;
  inherits: false;
  syntax: "<angle>";
}

/* Auto Drop Area */
.auto-drop {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  isolation: isolate;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 50% 50%, 0px 0px, 0px 0px;
  background-image: radial-gradient(
      farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(0, 0%, 50%, var(--hl, 0)) 8%,
      hsla(0, 0%, 60%, var(--hl, 0)) 22%,
      hsla(0, 0%, 70%, 0) 66%
    ),
    radial-gradient(40% 51% at 7% 32%, rgba(100, 100, 100, 0.06) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(40% 52% at 85% 67%, rgba(80, 80, 80, 0.06) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(80% 80% at 50% 50%, rgba(100, 100, 100, 0.08) 27%, rgba(0, 0, 0, 0) 58%),
    conic-gradient(
      from var(--bgrotate-auto) at 50% 50%,
      rgba(120, 120, 120, 0.06) 5%,
      rgba(0, 0, 0, 0) 17%,
      rgba(0, 0, 0, 0) 40%,
      rgba(100, 100, 100, 0.06) 48%,
      rgba(100, 100, 100, 0.06) 51%,
      rgba(0, 0, 0, 0) 59%,
      rgba(0, 0, 0, 0) 83%,
      rgba(120, 120, 120, 0.06) 95%
    ),
    conic-gradient(
      from var(--bgrotate2-auto) at 50% 50%,
      rgba(100, 100, 100, 0.06) 0%,
      rgba(110, 110, 110, 0.06) 34%,
      rgba(110, 110, 110, 0.06) 64%,
      rgba(100, 100, 100, 0.06) 100%
    );
  background-blend-mode: color-dodge, normal, normal, normal, normal;
  animation: glow-auto 44s linear infinite;
  transform: translate3d(0, 0, 0.1px);
  transition: all 0.3s ease;
  z-index: 1;
}

.auto-drop:hover {
  --hl: 0.25;
}

.auto-drop::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px dashed;
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}

.auto-drop.is-dragover {
  border-color: transparent;
}

.auto-drop.is-dragover::before {
  border-image: none;
  border-color: var(--fg);
}

.auto-drop > * {
  position: relative;
  z-index: 1;
}

.auto-drop::_highlight {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    hsl(248, 25%, 80%, 0.15) 12%,
    hsla(207, 40%, 30%, 0.08) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(1) contrast(1.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

@keyframes glow-auto {
  0% {
    --bgrotate-auto: 0deg;
    --bgrotate2-auto: 0deg;
  }
  25% {
    --bgrotate2-auto: 360deg;
  }
  50% {
    --bgrotate2-auto: 720deg;
  }
  100% {
    --bgrotate-auto: 720deg;
    --bgrotate2-auto: 0deg;
  }
}


.auto-drop:hover {
  border-color: var(--border);
  transform: scale(1.02);
}

.auto-drop:hover::before {
  animation: pulse-border-hover 1s ease-in-out infinite;
}

@keyframes pulse-border-hover {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05);
  }
}

.auto-drop span {
  display: block;
  margin-bottom: 12px;
  font-size: var(--theme-text-size-md, 12px);
  opacity: 0.8;
}

.editor-action-gate {
  --popup-z-index: 85;
}

.editor-action-gate__card {
  --popup-card-width: min(560px, 92vw);
  --popup-card-max-height: min(78vh, 620px);
  --popup-card-gap: 12px;
}

.editor-action-gate__desc {
  margin: 0;
  max-width: 48ch;
  font-size: var(--theme-text-size-md, 12px);
  line-height: var(--theme-line-height-body, 1.35);
}

.editor-action-gate__field {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.editor-action-gate__field-label {
  display: block;
}

.editor-action-gate__card input,
.editor-action-gate__card textarea {
  width: 100%;
  margin-bottom: 0;
  max-width: 100%;
}

.editor-action-gate__card textarea {
  min-height: 132px;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--theme-text-size-sm, 11px);
  line-height: var(--theme-line-height-body, 1.35);
  resize: vertical;
  transition: border-color 0.3s ease;
}

.editor-action-gate__card textarea:focus {
  border-color: var(--border);
  outline: none;
}

.editor-action-gate__actions {
  margin-top: 0;
}

/* Typography */
.muted {
  opacity: 0.7;
  color: var(--muted);
}

hr.hr {
  border: none;
  border-top: 1px solid var(--border2);
  margin: 16px 0;
}

/* Responsive */
@media (max-width: 768px) {
  header > .wrap {
    flex-direction: column;
    gap: 12px;
  }

  header > .wrap > div:last-child {
    justify-content: flex-start !important;
  }

  .admin-panel {
    position: relative;
    top: auto;
  }

  main {
    padding: 12px;
  }

  .wrap.grid {
    gap: 16px;
  }

  .card {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  main {
    padding: 8px;
  }

  .card {
    padding: 12px;
  }

  .card h2 {
    font-size: var(--theme-text-size-2xl, 16px);
    margin-bottom: 12px;
  }

  .dashboard-panel-tab {
    font-size: var(--theme-text-size-2xl, 16px);
  }

  .inline-actions {
    gap: 6px;
  }

  .primary-btn,
  .publish-btn {
    padding: 5px 10px;
    font-size: var(--theme-text-size-xs, 10px);
  }
}

/* ─────────────────────────────────────────────
   Create Transfer — type-picker popover
   ───────────────────────────────────────────── */

.create-transfer-anchor {
  position: relative;
  display: inline-block;
}

.create-transfer-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
  padding: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.create-transfer-popover__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  color: var(--fg);
  font-family: inherit;
  transition: background 100ms ease, border-color 100ms ease;
}

.create-transfer-popover__card:hover,
.create-transfer-popover__card:focus-visible {
  background: var(--hover, rgba(128, 128, 128, 0.1));
  border-color: var(--border2);
  outline: none;
}

.create-transfer-popover__card-label {
  font-size: var(--theme-text-size-sm, 11px);
  font-weight: 600;
  text-transform: var(--theme-text-transform-uppercase, uppercase);
  letter-spacing: var(--theme-tracking-label, 0.04em);
}

.create-transfer-popover__card-desc {
  font-size: var(--theme-text-size-xs, 10px);
  color: var(--text-subtle);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}