/* JoyJoy account dark-theme deep audit — Stage 1, 2026-09-06.
   Scope: subscriptions + TuneTune music runtime surfaces.
   Visual-only; no API/network/persistence behavior is changed. */

/* Subscription pages must follow the selected bot identity rather than a
   generic/custom cabinet accent leaking into bot-specific controls. */
body[data-account-page="subscriptions"] #panel-premium{
  --subscription-context-accent:#1597ff;
  --subscription-context-accent-strong:#087fe5;
  --account-accent:var(--subscription-context-accent);
  --account-accent-strong:var(--subscription-context-accent-strong);
  --account-accent-soft:color-mix(in srgb,var(--subscription-context-accent) 13%,transparent);
}
body[data-account-page="subscriptions"] #panel-premium:has(.subscription-bot-option-b560c7ed7[data-subscription-bot="shieldy"].is-active){
  --subscription-context-accent:#2da44e;
  --subscription-context-accent-strong:#1a7f37;
}
body[data-account-page="subscriptions"] #panel-premium:has(.subscription-bot-option-b560c7ed7[data-subscription-bot="gamey"].is-active){
  --subscription-context-accent:#ef5b98;
  --subscription-context-accent-strong:#d93f7d;
}
body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7[data-subscription-bot="tunetune"]{--subscription-option-accent:#1597ff}
body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7[data-subscription-bot="shieldy"]{--subscription-option-accent:#2da44e}
body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7[data-subscription-bot="gamey"]{--subscription-option-accent:#ef5b98}
body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7:hover:not([aria-disabled="true"]){
  border-color:color-mix(in srgb,var(--subscription-option-accent,var(--account-accent,#2f81f7)) 55%,var(--account-border,#d0d7de));
}
body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7.is-active{
  border-color:var(--subscription-option-accent,var(--account-accent,#2f81f7));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--subscription-option-accent,var(--account-accent,#2f81f7)) 14%,transparent);
}

/* Active subscription badges previously kept the light #dafbe1 surface in
   dark mode. Keep their semantic green status but remove the bright tile. */
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7>b.is-active{
  background:rgba(46,160,67,.16)!important;
  border-color:#238636!important;
  color:#7ee787!important;
  -webkit-text-fill-color:#7ee787!important;
  box-shadow:none!important;
}

/* Operation-history status icons had only light-mode success/warn/error fills. */
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-history-item.is-success .subscription-history-icon{
  background:rgba(46,160,67,.16)!important;border-color:#238636!important;color:#7ee787!important;
}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-history-item.is-pending .subscription-history-icon{
  background:rgba(210,153,34,.14)!important;border-color:#9e6a03!important;color:#f2cc60!important;
}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-history-item.is-danger .subscription-history-icon{
  background:rgba(248,81,73,.13)!important;border-color:#da3633!important;color:#ff9b9b!important;
}

/* Disabled controls must stay visibly disabled without turning into a pale
   light-mode surface when a module supplies a fallback colour. */
html[data-theme="dark"] body[data-account-page="subscriptions"] :is(
  .subscription-bot-option-b560c7ed7,
  .subscription-plan-b560c7ed7,
  .subscription-periods-b560c7ed7 button,
  .subscription-dialog-close-bfb423603
):disabled,
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-bot-option-b560c7ed7[aria-disabled="true"]{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-muted,#9eb0c4)!important;
  box-shadow:none!important;
}


/* Inline async status text used by purchase/cancel flows also carried the
   light-theme green/red text colours into dark mode. */
html[data-theme="dark"] body[data-account-page="subscriptions"] :is(
  .subscription-action-message-b560c7ed7.is-success,
  .subscription-checkout-message-b560c7ed7.is-success
){color:#7ee787!important;-webkit-text-fill-color:#7ee787!important}
html[data-theme="dark"] body[data-account-page="subscriptions"] :is(
  .subscription-action-message-b560c7ed7.is-error,
  .subscription-checkout-message-b560c7ed7.is-error
){color:#ff9b9b!important;-webkit-text-fill-color:#ff9b9b!important}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-history-action-b8be37afc.is-danger{
  color:#ff9b9b!important;border-color:rgba(248,81,73,.48)!important;
}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-history-action-b8be37afc.is-danger:hover:not(:disabled){
  color:#ffc0c0!important;border-color:#f85149!important;background:rgba(248,81,73,.12)!important;
}

/* The provider mark is intentionally presented on a neutral logo tile, but
   use a softer off-white instead of a glowing pure-white patch in dark mode. */
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-payment-brand-b560c7ed7>img{
  background:#e9eef5!important;
  border-color:#526178!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06)!important;
}

/* TuneTune runtime rows are created by JS. These selectors are a final safety
   net for stale/cached runtime CSS while the JS source now uses theme tokens. */
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel :is(.queue-track-b40c621d5,.tt-search-result){
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .queue-track-b40c621d5{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .queue-track-b40c621d5 :is(strong,.tt-queue-main strong){
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .queue-track-b40c621d5 small,
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .tt-search-result-meta{
  color:var(--account-muted,#9eb0c4)!important;
  -webkit-text-fill-color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .tt-queue-action-btn{
  background:color-mix(in srgb,var(--account-accent,#1597ff) 7%,var(--account-surface,#111c2e))!important;
  border-color:color-mix(in srgb,var(--account-accent,#1597ff) 30%,var(--account-border,#2c405b))!important;
  color:var(--account-accent-strong,#55c8ff)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .tt-queue-action-btn:hover:not(:disabled){
  background:color-mix(in srgb,var(--account-accent,#1597ff) 13%,var(--account-surface-strong,#1c2c45))!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .tt-queue-action-btn:disabled{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #tunetune-music-panel .tt-queue-action-btn--remove{
  background:rgba(223,78,109,.09)!important;
  border-color:rgba(223,78,109,.32)!important;
  color:#ff91a5!important;
}

/* Native controls inside the two audited pages should use the chosen scheme
   even when rendered by the browser rather than by custom select widgets. */
html[data-theme="dark"] body:is([data-account-page="subscriptions"],[data-account-page="bots"]) :is(select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])){
  color-scheme:dark;
}