/* JoyJoy account theme hardening — 2026-08-30 r1
   Final cascade layer for account pages and developer console.
   Design/layout/network logic is intentionally untouched.
   Existing dark coverage is replayed here because several newer module styles
   are loaded after the old "final" theme layers. */
@import url("/assets/css/account-dark-b7de2a30f.css");
@import url("/assets/css/theme-complete-b4cda9e31.css");

/* Explicitly keep native controls in the selected theme. */
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* Semantic aliases used by older/newer modules with light fallbacks.
   Values follow the active account palette, including custom dark palettes. */
html[data-theme="dark"] body[data-account-page]{
  --account-card-bg:var(--account-surface,#111c2e);
  --account-card:var(--account-surface,#111c2e);
  --account-soft:var(--account-surface-soft,#162338);
  --gh-card:var(--account-surface,#111c2e);
  --gh-subtle:var(--account-surface-soft,#162338);
  --gh-hover:var(--account-surface-strong,#1c2c45);
  --gh-border:var(--account-border,#2c405b);
  --surface:var(--account-surface,#111c2e);
  --surface-subtle:var(--account-surface-soft,#162338);
  --panel:var(--account-surface,#111c2e);
  --panel-subtle:var(--account-surface-soft,#162338);
  --card-bg:var(--account-surface,#111c2e);
  --card-background:var(--account-surface,#111c2e);
  --card-muted:var(--account-surface-soft,#162338);
  --line:var(--account-border,#2c405b);
  --border:var(--account-border,#2c405b);
  --border-color:var(--account-border,#2c405b);
  --cm-surface:var(--account-surface,#111c2e);
  --cm-surface-soft:var(--account-surface-soft,#162338);
  --sh-auto-surface:var(--account-surface,#111c2e);
  --sh-auto-soft:var(--account-surface-soft,#162338);
  --shieldy-tools-surface:var(--account-surface,#111c2e);
}

/* Newer overlays/popovers created after the original theme pass. */
html[data-theme="dark"] body[data-account-page] :is(
  .joyjoy-security-login-toast,
  .ttcb-emoji-popover,
  .ttcb-server-menu,
  .gamey-custom-bot-server-menu,
  .promocode-server-menu-ba5c47c7b,
  .shieldy-city-dropdown
){
  background:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
}

/* Maintenance / staff surfaces that still had pale light-mode fills. */
html[data-theme="dark"] body[data-account-page] .cabinet-maintenance-staff-banner-b2055ece2{
  background:rgba(217,119,6,.11)!important;
  border-color:rgba(245,158,11,.38)!important;
  color:#f7cf83!important;
}
html[data-theme="dark"] body[data-account-page] [class*="admin-cabinet-maintenance-toggle-"]{
  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] [class*="admin-cabinet-maintenance-state-"]{
  background:var(--account-surface-soft,#162338)!important;
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page] [class*="admin-cabinet-maintenance-state-"].is-active{
  background:rgba(214,64,88,.16)!important;color:#ff9bad!important;
}
html[data-theme="dark"] body[data-account-page] [class*="admin-cabinet-maintenance-state-"].is-scheduled{
  background:rgba(224,157,24,.16)!important;color:#ffd077!important;
}
html[data-theme="dark"] body[data-account-page] [class*="admin-cabinet-maintenance-state-"].is-off{
  background:rgba(27,156,100,.18)!important;color:#79efb7!important;
}

/* Editor-role read-only/service strips: preserve the violet meaning, remove white glass. */
html[data-theme="dark"] body[data-account-page] :is(
  .staff-control-strip.is-editor-mode .staff-developer-mode,
  body[data-account-role="editor"] .staff-developer-mode
){
  background:linear-gradient(180deg,rgba(115,87,255,.10),rgba(115,87,255,.055))!important;
  border-color:rgba(147,124,255,.28)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-role="editor"] #panel-admin .admin-account-access-v29.is-editor-readonly-v31{
  background:linear-gradient(180deg,rgba(115,87,255,.08),rgba(17,28,46,.98))!important;
  border-color:rgba(147,124,255,.25)!important;
  color:var(--account-text,#eef6ff)!important;
}

/* ---------- "Как пользоваться" / rich editor ---------- */
html[data-theme="dark"] body[data-account-page="howto"]{
  --account-card-bg:var(--account-surface,#111c2e);
  --account-card:var(--account-surface,#111c2e);
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .howto-hero,.howto-bot-button,.howto-manual,.howto-details details,
  .howto-admin-panel,.howto-block-style-controls label
){
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-toolbar{
  background:
    radial-gradient(circle at 8% 0%,rgba(115,87,255,.10),transparent 30%),
    linear-gradient(180deg,var(--account-surface-soft,#162338),var(--account-surface,#111c2e))!important;
  border-color:var(--account-border,#2c405b)!important;
  box-shadow:inset 0 -1px 0 rgba(148,163,184,.10)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-group,
  .howto-link-button-grid label,
  .howto-block-style-controls label,
  .howto-block-presets button,
  .howto-block-controls,
  .howto-accordion-toggle-control,
  .howto-cell-controls
){
  background:color-mix(in srgb,var(--account-surface,#111c2e) 92%,#7357ff 8%)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-tool,.joyjoy-editor-select,.joyjoy-editor-color,
  .joyjoy-editor-popover button,
  .howto-link-button-grid input,.howto-link-button-grid select,
  .howto-block-style-controls select,
  .howto-block-control,.howto-cell-control,
  .howto-accordion-toggle-options button
){
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-popover,
  .joyjoy-editor-confirm-card,
  .howto-link-button-panel,
  .howto-block-style-panel
){
  background:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-confirm-icon{
  background:rgba(217,119,6,.13)!important;
  border-color:rgba(245,158,11,.34)!important;
  color:#f6bd65!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-confirm-card strong{
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-confirm-card p{
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-tool.is-active,.joyjoy-editor-tool[aria-pressed="true"],
  .joyjoy-editor-tool.is-accent,
  .howto-block-drag,
  .howto-cell-control:hover,
  .howto-accordion-toggle-options button:hover,
  .howto-accordion-toggle-options button.is-active,
  .howto-accordion-toggle-options button:focus-visible
){
  background:color-mix(in srgb,var(--account-surface-strong,#1c2c45) 82%,#7357ff 18%)!important;
  border-color:rgba(147,124,255,.45)!important;
  color:#c8bbff!important;
  -webkit-text-fill-color:#c8bbff!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .howto-block-control--delete:hover,.howto-block-control--delete:focus-visible,
  .howto-cell-control--delete:hover
){
  background:rgba(214,64,88,.14)!important;
  border-color:rgba(255,104,128,.34)!important;
  color:#ff9bad!important;
  -webkit-text-fill-color:#ff9bad!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .howto-editor-surface .howto-bottom-actions{
  background:linear-gradient(180deg,rgba(115,87,255,.08),rgba(17,28,46,.94))!important;
  border-color:rgba(147,124,255,.28)!important;
}

/* ---------- Subscriptions ---------- */
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-jump-nav-b99adaf3b{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-jump-nav-b99adaf3b a[data-subscription-section-tab]{
  background:transparent!important;
  border-color:transparent!important;
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="subscriptions"] .subscription-jump-nav-b99adaf3b a[data-subscription-section-tab]:is(:hover,:focus-visible,.is-active){
  background:var(--account-surface-strong,#1c2c45)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
  box-shadow:none!important;
}

/* ---------- Developer/admin console ---------- */
html[data-theme="dark"] body[data-account-page="console"] .admin-bot-control-section-b0d480013{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="console"] .admin-bot-control-card-b0d480013 .admin-availability-actions{
  background:linear-gradient(180deg,transparent,var(--account-surface,#111c2e) 30%)!important;
}
html[data-theme="dark"] body[data-account-page="console"] :is(
  .console-list-tool-search,.console-list-tool-select,.console-list-tool-count
){
  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="console"] .console-list-tool-count.is-empty{
  background:rgba(224,157,24,.12)!important;
  border-color:rgba(255,194,76,.28)!important;
  color:#ffd077!important;
}
html[data-theme="dark"] body[data-account-page="console"] .admin-table-wrap thead th{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="console"] .admin-table-wrap tbody tr:hover td{
  background:color-mix(in srgb,var(--account-accent,#4cc9ff) 8%,var(--account-surface,#111c2e))!important;
}

/* ---------- Gamey: controls missed by the module's own dark section ---------- */
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="gamey"] :is(
  .gamey-filterbutton-v812,
  .gamey-filterbutton-v812--reset
){
  background:#241922!important;
  border-color:#5a3b4b!important;
  color:#e7cbd8!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="gamey"] .gamey-filterbutton-v812--active{
  background:rgba(217,63,125,.14)!important;
  border-color:rgba(255,110,170,.42)!important;
  color:#ff9cc8!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="gamey"] .gamey-filterbutton-v812--apply{
  background:#d93f7d!important;border-color:#e65a91!important;color:#fff!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="gamey"] .gamey-filterempty-v812{
  background:rgba(217,63,125,.07)!important;
  border-color:rgba(255,147,199,.28)!important;
  color:#d8b8c7!important;
}

/* ---------- Shieldy: explicit white tiles / late 30-August modules ---------- */
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] .shieldy-security-tab-icon-bd2996b98,
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] .shieldy-security-tab-bd2996b98.is-active .shieldy-security-tab-icon-bd2996b98{
  background:rgba(45,164,78,.10)!important;
  color:#61db88!important;
  border-color:rgba(88,218,130,.30)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] .log-preview-embed{
  background:#111827!important;
  border-color:#34445b!important;
  color:#e6edf3!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] [data-custom-workspace-panel="messages"] .cm510-row-actions :is([data-cm-up],[data-cm-down]){
  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"] #panel-bot-control[data-active-bot="shieldy"] #shieldy-management-hub-ba89092b7 .shieldy-management-nav-ba89092b7>button{
  background:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] #shieldy-management-hub-ba89092b7 .shieldy-management-nav-ba89092b7>button:is(:hover,.is-active,[aria-selected="true"]){
  background:color-mix(in srgb,#2da44e 11%,var(--account-surface-strong,#1c2c45))!important;
  border-color:rgba(88,218,130,.34)!important;
  color:#8bf0aa!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] #shieldy-reminder-foundation #sh-reminder-banner-name-r9{
  background:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] :is(
  #sh-reminder-preview-toggle-r21.sh-reminder-preview-toggle-r21,
  .sh-reminder-final-snooze-r21 span
){
  color:#8bf0aa!important;
}

/* Keep intentional media/brand canvases intact. These can legitimately stay light
   (for example Google/provider logos or uploaded preview assets). */
html[data-theme="dark"] body[data-account-page] :is(
  img,video,canvas,input[type="color"],
  .welcome-banner-preview,.player-embed-preview,[data-player-embed-preview],
  [data-preview-banner],[data-preview-logo],.color-swatch
){color-scheme:normal}

/* 2026-08-30 r2 — legacy theme-hook + text-contrast hardening.
   theme.js now synchronizes body.dark-theme, so old body:not(.dark-theme)
   light rules no longer leak into dark mode. The class below is only attached
   by the runtime audit when a genuinely dark text color survives on a dark
   surface after the full cascade. */
html[data-theme="dark"] body[data-account-page] .joyjoy-dark-text-fix-b4cda9e31{
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}

/* Dynamic custom-message counter is created after initial HTML and had a
   stronger #344054 declaration than the generic dark strong{} rule. */
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="shieldy"] [data-custom-workspace-panel="messages"] .cm510-channel-limit-r17 strong{
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}

/* ========================================================================== 
   2026-08-30 r3 — systemic account dark-mode coverage
   User screenshots exposed two remaining classes of regressions:
   1) modules using undefined semantic variables with light/dark hard fallbacks;
   2) late/dynamic controls with literal neutral light surfaces.
   This layer changes paint/contrast only. It intentionally does not alter
   display, layout, sizing, spacing, positioning or application behaviour.
   ========================================================================== */

/* Complete the semantic palette expected by legacy and late-loaded modules. */
html[data-theme="dark"] body[data-account-page]{
  --account-heading:var(--account-text,#eef6ff);
  --account-text-secondary:var(--account-muted,#9eb0c4);
  --account-subtext:var(--account-muted,#9eb0c4);
  --text-color:var(--account-text,#eef6ff);
  --text:var(--account-text,#eef6ff);
  --text-primary:var(--account-text,#eef6ff);
  --text-secondary:var(--account-muted,#9eb0c4);
  --text-muted:var(--account-muted,#9eb0c4);
  --theme-text:var(--account-text,#eef6ff);
  --theme-muted:var(--account-muted,#9eb0c4);
  --muted:var(--account-muted,#9eb0c4);
  --muted-color:var(--account-muted,#9eb0c4);
  --gh-text:var(--account-text,#eef6ff);
  --gh-muted:var(--account-muted,#9eb0c4);
  --cm-text:var(--account-text,#eef6ff);
  --cm-muted:var(--account-muted,#9eb0c4);
  --sh-auto-text:var(--account-text,#eef6ff);
  --sh-auto-muted:var(--account-muted,#9eb0c4);
  --account-line:var(--account-border,#2c405b);
  --gh-border:var(--account-border,#2c405b);
  --cm-border:var(--account-border,#2c405b);
  --cm-border-strong:var(--account-border-strong,#3a5475);
  --sh-auto-border:var(--account-border,#2c405b);
  --muted-background:var(--account-surface-soft,#162338);
  --surface-2:var(--account-surface-soft,#162338);
  --card:var(--account-surface,#111c2e);
  --panel-soft:var(--account-surface-soft,#162338);
  --shieldy-tools-soft:var(--account-surface-soft,#162338);
  --shieldy-tools-input:var(--account-surface-soft,#162338);
}

/* Runtime audit marks only neutral light surfaces that survive the final
   cascade. R2 created this marker but had no paint rule for it. */
html[data-theme="dark"] body[data-account-page] .joyjoy-dark-surface-fix-b4cda9e31{
  background-color:var(--account-surface-soft,#162338)!important;
  background-image:none!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}

/* Native + custom form controls. These are the most visible mixed-theme
   surfaces in TuneTune/Shieldy/Gamey screenshots. Keep switches, color inputs,
   primary/action buttons and media previews out of this generic treatment. */
html[data-theme="dark"] body[data-account-page] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,textarea,
  [role="combobox"],
  .shieldy-select-trigger,.joyjoy-site-select-trigger,
  [class*="select-trigger"],[class*="picker-trigger"]
){
  background-color:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(input,textarea)::placeholder{
  color:var(--account-muted,#9eb0c4)!important;
  opacity:.82!important;
}
html[data-theme="dark"] body[data-account-page] select option{
  background:var(--account-surface,#111c2e)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(
  .shieldy-select-menu,.joyjoy-site-select-menu,
  [class*="select-menu"],[class*="picker-menu"],
  [role="listbox"]
):not([class*="preview"]):not([class*="banner"]){
  background-color:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(
  .shieldy-select-option,.joyjoy-site-select-option,
  [class*="select-option"],[class*="picker-option"],
  [role="option"]
):not([class*="preview"]):not([class*="banner"]){
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(
  .shieldy-select-option,.joyjoy-site-select-option,
  [class*="select-option"],[class*="picker-option"],
  [role="option"]
):is(:hover,:focus-visible,.is-active,.is-selected,[aria-selected="true"]){
  background-color:var(--account-surface-strong,#1c2c45)!important;
}

/* Common generated settings wrappers. This is deliberately semantic rather
   than a blanket div{} override, so preview canvases and branded blocks retain
   their intended appearance. */
html[data-theme="dark"] body[data-account-page] :is(
  [class*="setting-card"],[class*="settings-card"],
  [class*="setting-item"],[class*="settings-item"],
  [class*="setting-row"],[class*="settings-row"],
  [class*="option-card"],[class*="option-item"],[class*="option-row"],
  [class*="control-card"],[class*="control-item"],[class*="control-row"],
  [class*="field-card"],[class*="field-row"]
):not([class*="preview"]):not([class*="banner"]):not([class*="badge"]):not([class*="status"]){
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(
  .field,.toggle-row,
  [class*="setting-card"],[class*="settings-card"],
  [class*="setting-item"],[class*="settings-item"],
  [class*="setting-row"],[class*="settings-row"],
  [class*="option-card"],[class*="option-item"],[class*="option-row"],
  [class*="control-card"],[class*="control-item"],[class*="control-row"]
):not([class*="preview"]):not([class*="banner"]) :is(label,legend,summary,strong,b){
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page] :is(
  .field,.toggle-row,
  [class*="setting-card"],[class*="settings-card"],
  [class*="setting-item"],[class*="settings-item"],
  [class*="setting-row"],[class*="settings-row"],
  [class*="option-card"],[class*="option-item"],[class*="option-row"],
  [class*="control-card"],[class*="control-item"],[class*="control-row"]
):not([class*="preview"]):not([class*="banner"]) :is(small,.hint,.description,[class*="-hint"],[class*="-description"],[class*="-note"]){
  color:var(--account-muted,#9eb0c4)!important;
  -webkit-text-fill-color:var(--account-muted,#9eb0c4)!important;
}

/* TuneTune: settings can be injected by API/schema code and therefore are not
   all represented by the static HTML source. Scope this to the TuneTune panel
   and normalize semantic neutral controls without touching player previews. */
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="tunetune"] :is(
  .field,.toggle-row,.console-fields,
  [class*="setting-row"],[class*="settings-row"],
  [class*="setting-item"],[class*="settings-item"],
  [class*="option-row"],[class*="option-item"],
  [class*="routing-"],[class*="queue-"]
):not([class*="preview"]):not([class*="banner"]){
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #panel-bot-control[data-active-bot="tunetune"] :is(
  [class*="settings-card"],[class*="setting-card"],[class*="option-card"],
  [class*="routing-card"],[class*="queue-card"],[class*="search-card"]
):not([class*="preview"]):not([class*="banner"]){
  background-color:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
}

/* --------------------------------------------------------------------------
   HOW TO / EDITOR — full dark palette pass
   The editor stores stock palette values inline. Exact stock values are
   remapped only while dark mode is active; truly custom colours stay intact.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .howto-rich-editor-shell,.howto-editor-surface,
  .howto-link-button-panel,.howto-block-style-panel,
  .joyjoy-editor-popover,.howto-cell-controls,.howto-block-controls
){
  background-color:var(--account-surface,#111c2e)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .howto-editor-toolbar{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .howto-editor-surface{
  background:var(--account-surface,#111c2e)!important;
  color:var(--account-text,#eef6ff)!important;
  caret-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .howto-editor-surface:empty::before{
  color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-tool,.joyjoy-editor-select,.joyjoy-editor-color,
  .howto-block-style-controls label,.howto-block-presets button,
  .howto-block-control,.howto-cell-control
){
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border,#2c405b)!important;
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .joyjoy-editor-tool,.howto-block-control,.howto-cell-control
):is(:hover,:focus-visible){
  background:color-mix(in srgb,#7357ff 12%,var(--account-surface-strong,#1c2c45))!important;
  border-color:rgba(157,136,255,.45)!important;
  color:#c9bcff!important;
  -webkit-text-fill-color:#c9bcff!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-tool.is-accent{
  background:linear-gradient(135deg,rgba(115,87,255,.18),rgba(115,87,255,.08))!important;
  border-color:rgba(157,136,255,.42)!important;
  color:#c9bcff!important;
  -webkit-text-fill-color:#c9bcff!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .joyjoy-editor-popover button{
  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="howto"] .joyjoy-editor-popover button:hover{
  background:rgba(115,87,255,.15)!important;
  border-color:rgba(157,136,255,.42)!important;
  color:#c9bcff!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .howto-block-style-head strong,.howto-link-button-panel-head strong,
  .howto-editor-server-note strong,.joyjoy-editor-group-label
){
  color:var(--account-text,#eef6ff)!important;
  -webkit-text-fill-color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(
  .howto-block-style-head span,.howto-link-button-panel-head span,
  .howto-block-style-help,.howto-admin-status,.howto-editor-server-note,
  .joyjoy-editor-unit
){
  color:var(--account-muted,#9eb0c4)!important;
  -webkit-text-fill-color:var(--account-muted,#9eb0c4)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(.howto-editor-surface,.howto-manual-body) pre{
  background:#0b1320!important;
  color:#dce9f8!important;
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(.howto-editor-surface,.howto-manual-body) blockquote{
  background:var(--account-surface-soft,#162338)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
  color:var(--account-text,#eef6ff)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(.howto-editor-surface,.howto-manual-body) :is(table,th,td){
  border-color:var(--account-border,#2c405b)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] :is(.howto-editor-surface,.howto-manual-body) th{
  background:var(--account-surface-soft,#162338)!important;
  color:var(--account-text,#eef6ff)!important;
}

/* Stock rich-block surface palette -> dark counterparts. */
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#F5F3FF" i]{--howto-block-bg:#19162c!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#ECFDF5" i]{--howto-block-bg:#10271f!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#FFF1F7" i]{--howto-block-bg:#2b1321!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#EFF6FF" i]{--howto-block-bg:#10233a!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#FFFBEB" i]{--howto-block-bg:#2b2110!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#FEF2F2" i]{--howto-block-bg:#2b1519!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-bg="#F8FAFC" i]{--howto-block-bg:#17202d!important}

/* Stock rich-block text palette -> readable dark counterparts. */
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#1F2937" i]{--howto-block-text:#f1efff!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#16352C" i]{--howto-block-text:#e3fff4!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#482033" i]{--howto-block-text:#ffeaf4!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#1E3A5F" i]{--howto-block-text:#e4f2ff!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#78350F" i]{--howto-block-text:#ffe2a3!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#7F1D1D" i]{--howto-block-text:#ffdce0!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text="#334155" i]{--howto-block-text:#e4edf7!important}

/* Stock rich-block borders -> dark palette. */
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#D6CCFF" i]{--howto-block-border:#443a72!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#A7F3D0" i]{--howto-block-border:#2d6650!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#F9B9D3" i]{--howto-block-border:#71415a!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#BFDBFE" i]{--howto-block-border:#315b83!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#FDE68A" i]{--howto-block-border:#755621!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#FECACA" i]{--howto-block-border:#71323a!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-border="#CBD5E1" i]{--howto-block-border:#38495e!important}

/* Inline text styles written by the editor use literal colour on style="".
   Remap only known factory defaults; arbitrary admin-selected colours remain
   untouched. !important is required to beat the inline style property. */
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#1F2937" i]{color:#f1efff!important;-webkit-text-fill-color:#f1efff!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#16352C" i]{color:#e3fff4!important;-webkit-text-fill-color:#e3fff4!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#482033" i]{color:#ffeaf4!important;-webkit-text-fill-color:#ffeaf4!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#1E3A5F" i]{color:#e4f2ff!important;-webkit-text-fill-color:#e4f2ff!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#78350F" i]{color:#ffe2a3!important;-webkit-text-fill-color:#ffe2a3!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#7F1D1D" i]{color:#ffdce0!important;-webkit-text-fill-color:#ffdce0!important}
html[data-theme="dark"] body[data-account-page="howto"] [data-howto-text-color="#334155" i]{color:#e4edf7!important;-webkit-text-fill-color:#e4edf7!important}

/* Controls floating on top of a rich block must remain neutral-dark even when
   the block itself uses an intentionally coloured preset. */
html[data-theme="dark"] body[data-account-page="howto"] .howto-block-controls,
html[data-theme="dark"] body[data-account-page="howto"] .howto-cell-controls{
  background:color-mix(in srgb,var(--account-surface,#111c2e) 94%,transparent)!important;
  border-color:var(--account-border-strong,#3a5475)!important;
}
html[data-theme="dark"] body[data-account-page="howto"] .howto-block-control--delete:hover,
html[data-theme="dark"] body[data-account-page="howto"] .howto-cell-control--delete:hover{
  background:rgba(220,53,69,.15)!important;
  border-color:rgba(255,114,128,.42)!important;
  color:#ff98a3!important;
  -webkit-text-fill-color:#ff98a3!important;
}