/* Dark Remix IDE inspired studies. Only palette, borders and elevation change. */
html[data-remix-look] .network-indicator { display: none; }

/* Keep both loading layers in the same palette as the selected study. */
html[data-remix-look] #bp-splash,
html[data-remix-look] .startup-splash {
  background: linear-gradient(130deg,
    var(--demo-rail) 0%,
    var(--demo-sidebar) 54%,
    var(--demo-head) 100%) !important;
}
html[data-remix-look] #bp-splash .bp-splash-spinner,
html[data-remix-look] .startup-splash-spinner {
  border: 3.5px solid #ffffff !important;
  border-right-color: transparent !important;
}

html[data-remix-look="dark"] body {
  --bg-primary: #292b40 !important;
  --bg-secondary: #2c2e43 !important;
  --bg-panel: #24263a !important;
  --bg-elevated: #3a3d55 !important;
  --bg-contrast: #202235 !important;
  --bg-gradient-start: #282a40 !important;
  --bg-gradient-mid: #30334c !important;
  --bg-gradient-end: #3a3e59 !important;
  --border-color: #484b65 !important;
  --input-border: #656c88 !important;
  --control-bg: #383b52 !important;
  --hover-bg: #414660 !important;
  --text-primary: #f2f2f7 !important;
  --text-secondary: #d6d8e2 !important;
  --text-muted: #a8adbc !important;
  --accent-color: #91c9f7 !important;
  --accent-color-strong: #6aaee9 !important;
  --accent-color-soft: #c0e0fb !important;
  --accent-color-deep: #4279ab !important;
  --accent-color-rgb: 145, 201, 247 !important;
  --accent-color-soft-rgb: 192, 224, 251 !important;
  --panel-grad-strong-rgb: 111, 151, 192 !important;
  --panel-grad-soft-rgb: 77, 112, 154 !important;
  --nav-surface-rgb: 43, 45, 64 !important;
  --scrollbar-thumb: #555a76 !important;
  --scrollbar-thumb-hover: #6b7291 !important;
  --demo-line: #484b65;
  --demo-line-soft: #3d4057;
  --demo-highlight: rgba(255,255,255,.055);
  --demo-shadow: rgba(5,6,15,.24);
  --demo-panel-shadow: 0 8px 20px rgba(5,6,15,.18);
  --demo-head: #2b2d43;
  --demo-rail: #26283d;
  --demo-sidebar: #24263a;
  --demo-editor: #0c1019;
  color-scheme: dark;
}

html[data-remix-look="black"] body,
html[data-remix-look="black-matte"] body,
html[data-remix-look="black-ide"] body,
html[data-remix-look="black-ide-soft"] body,
html[data-remix-look="black-ide-clear"] body {
  --bg-primary: #11151e !important;
  --bg-secondary: #1a1f2b !important;
  --bg-panel: #151a25 !important;
  --bg-elevated: #293140 !important;
  --bg-contrast: #0c1017 !important;
  --bg-gradient-start: #151a27 !important;
  --bg-gradient-mid: #202a3a !important;
  --bg-gradient-end: #2c3b50 !important;
  --border-color: #404c5e !important;
  --input-border: #5b6b80 !important;
  --control-bg: #222b39 !important;
  --hover-bg: #2d394a !important;
  --text-primary: #f7f7fa !important;
  --text-secondary: #d3d5df !important;
  --text-muted: #979dad !important;
  --accent-color: #8dc6f5 !important;
  --accent-color-strong: #599bd8 !important;
  --accent-color-soft: #b9dcfa !important;
  --accent-color-deep: #3b6e9c !important;
  --accent-color-rgb: 141, 198, 245 !important;
  --accent-color-soft-rgb: 185, 220, 250 !important;
  --panel-grad-strong-rgb: 82, 127, 172 !important;
  --panel-grad-soft-rgb: 55, 91, 132 !important;
  --nav-surface-rgb: 24, 31, 42 !important;
  --scrollbar-thumb: #465567 !important;
  --scrollbar-thumb-hover: #5b6d81 !important;
  --demo-line: #404c5e;
  --demo-line-soft: #303c4e;
  --demo-highlight: rgba(255,255,255,.075);
  --demo-shadow: rgba(0,0,0,.45);
  --demo-panel-shadow: 0 13px 28px rgba(0,0,0,.32);
  --demo-head: #1b202c;
  --demo-rail: #131824;
  --demo-sidebar: #1b202b;
  --demo-editor: #080b11;
  color-scheme: dark;
}

html[data-remix-look="slate"] body {
  --bg-primary: #343a50 !important;
  --bg-secondary: #3b4259 !important;
  --bg-panel: #30364b !important;
  --bg-elevated: #4a526b !important;
  --bg-contrast: #292f43 !important;
  --bg-gradient-start: #353c53 !important;
  --bg-gradient-mid: #414b64 !important;
  --bg-gradient-end: #4e5d79 !important;
  --border-color: #626d88 !important;
  --input-border: #7b89a6 !important;
  --control-bg: #454d65 !important;
  --hover-bg: #505a75 !important;
  --text-primary: #f7f9fd !important;
  --text-secondary: #e3e8f3 !important;
  --text-muted: #b8c2d3 !important;
  --accent-color: #a5d5fb !important;
  --accent-color-strong: #75b6ee !important;
  --accent-color-soft: #cdeaff !important;
  --accent-color-deep: #4f8dbd !important;
  --accent-color-rgb: 165, 213, 251 !important;
  --accent-color-soft-rgb: 205, 234, 255 !important;
  --panel-grad-strong-rgb: 127, 173, 210 !important;
  --panel-grad-soft-rgb: 88, 130, 173 !important;
  --nav-surface-rgb: 55, 63, 84 !important;
  --scrollbar-thumb: #75819a !important;
  --scrollbar-thumb-hover: #8997b0 !important;
  --demo-line: #626d88;
  --demo-line-soft: #535e78;
  --demo-highlight: rgba(255,255,255,.085);
  --demo-shadow: rgba(8,15,30,.19);
  --demo-panel-shadow: 0 5px 14px rgba(8,15,30,.13);
  --demo-head: #383f56;
  --demo-rail: #30374c;
  --demo-sidebar: #3b4259;
  --demo-editor: #10131b;
  color-scheme: dark;
}

html[data-remix-look="ocean"] body {
  --bg-primary: #14263d !important;
  --bg-secondary: #1b3049 !important;
  --bg-panel: #162a43 !important;
  --bg-elevated: #294461 !important;
  --bg-contrast: #0e1e33 !important;
  --bg-gradient-start: #13283f !important;
  --bg-gradient-mid: #214464 !important;
  --bg-gradient-end: #2b5879 !important;
  --border-color: #41617b !important;
  --input-border: #5c80a0 !important;
  --control-bg: #23405d !important;
  --hover-bg: #2d4d6b !important;
  --text-primary: #f1f8ff !important;
  --text-secondary: #d5e6f5 !important;
  --text-muted: #9eb8cf !important;
  --accent-color: #8acbfa !important;
  --accent-color-strong: #59a8e4 !important;
  --accent-color-soft: #bee5ff !important;
  --accent-color-deep: #3b80b8 !important;
  --accent-color-rgb: 138, 203, 250 !important;
  --accent-color-soft-rgb: 190, 229, 255 !important;
  --panel-grad-strong-rgb: 78, 151, 207 !important;
  --panel-grad-soft-rgb: 47, 105, 155 !important;
  --nav-surface-rgb: 23, 45, 70 !important;
  --scrollbar-thumb: #426987 !important;
  --scrollbar-thumb-hover: #5883a2 !important;
  --demo-line: #41617b;
  --demo-line-soft: #34516a;
  --demo-highlight: rgba(173,224,255,.085);
  --demo-shadow: rgba(3,12,25,.36);
  --demo-panel-shadow: 0 10px 24px rgba(3,12,25,.25);
  --demo-head: #19314b;
  --demo-rail: #132940;
  --demo-sidebar: #1b3049;
  --demo-editor: #09121d;
  color-scheme: dark;
}

html[data-remix-look="graphite"] body,
html[data-remix-look="graphite-soft"] body,
html[data-remix-look="graphite-steel"] body {
  --bg-primary: #292e35 !important;
  --bg-secondary: #30363e !important;
  --bg-panel: #252b32 !important;
  --bg-elevated: #3d454f !important;
  --bg-contrast: #20252b !important;
  --bg-gradient-start: #2a3037 !important;
  --bg-gradient-mid: #353e47 !important;
  --bg-gradient-end: #444f59 !important;
  --border-color: #596570 !important;
  --input-border: #74828e !important;
  --control-bg: #39424b !important;
  --hover-bg: #45515d !important;
  --text-primary: #f4f7fa !important;
  --text-secondary: #d9e0e6 !important;
  --text-muted: #aab6bf !important;
  --accent-color: #a0cce9 !important;
  --accent-color-strong: #73a9d1 !important;
  --accent-color-soft: #cae5f5 !important;
  --accent-color-deep: #507f9f !important;
  --accent-color-rgb: 160, 204, 233 !important;
  --accent-color-soft-rgb: 202, 229, 245 !important;
  --panel-grad-strong-rgb: 121, 160, 184 !important;
  --panel-grad-soft-rgb: 79, 113, 133 !important;
  --nav-surface-rgb: 42, 48, 55 !important;
  --scrollbar-thumb: #62717c !important;
  --scrollbar-thumb-hover: #788995 !important;
  --demo-line: #596570;
  --demo-line-soft: #4b5661;
  --demo-highlight: rgba(255,255,255,.075);
  --demo-shadow: rgba(0,0,0,.28);
  --demo-panel-shadow: 0 7px 18px rgba(0,0,0,.18);
  --demo-head: #2d333b;
  --demo-rail: #262c33;
  --demo-sidebar: #30363e;
  --demo-editor: #0d1116;
  color-scheme: dark;
}

html[data-remix-look="graphite-soft"] body {
  --bg-primary: #30363d !important;
  --bg-secondary: #363d45 !important;
  --bg-panel: #2c333a !important;
  --bg-elevated: #444e57 !important;
  --bg-gradient-start: #30373f !important;
  --bg-gradient-mid: #3b4650 !important;
  --bg-gradient-end: #48555f !important;
  --border-color: #56616b !important;
  --input-border: #73818d !important;
  --control-bg: #3d4750 !important;
  --hover-bg: #48545f !important;
  --accent-color: #abcde5 !important;
  --accent-color-strong: #80aac9 !important;
  --accent-color-soft: #d2e8f5 !important;
  --accent-color-rgb: 171, 205, 229 !important;
  --accent-color-soft-rgb: 210, 232, 245 !important;
  --demo-line: #56616b;
  --demo-line-soft: #4b565f;
  --demo-highlight: rgba(255,255,255,.06);
  --demo-shadow: rgba(0,0,0,.18);
  --demo-panel-shadow: 0 4px 11px rgba(0,0,0,.12);
  --demo-head: #343b42;
  --demo-rail: #2c333a;
  --demo-sidebar: #363d45;
  --demo-editor: #0e1115;
}

html[data-remix-look="graphite-steel"] body {
  --bg-primary: #222b34 !important;
  --bg-secondary: #29343e !important;
  --bg-panel: #202a33 !important;
  --bg-elevated: #354553 !important;
  --bg-gradient-start: #25323e !important;
  --bg-gradient-mid: #354b5e !important;
  --bg-gradient-end: #4a6276 !important;
  --border-color: #587085 !important;
  --input-border: #7391a8 !important;
  --control-bg: #30404e !important;
  --hover-bg: #3b5062 !important;
  --accent-color: #9bcdf1 !important;
  --accent-color-strong: #6baddb !important;
  --accent-color-soft: #cae7fa !important;
  --accent-color-rgb: 155, 205, 241 !important;
  --accent-color-soft-rgb: 202, 231, 250 !important;
  --demo-line: #587085;
  --demo-line-soft: #465e73;
  --demo-highlight: rgba(191,226,249,.09);
  --demo-shadow: rgba(0,0,0,.34);
  --demo-panel-shadow: 0 11px 23px rgba(0,0,0,.23);
  --demo-head: #28343e;
  --demo-rail: #202b35;
  --demo-sidebar: #29343e;
  --demo-editor: #0a1118;
}

html[data-remix-look="black-matte"] body {
  --bg-primary: #0d1016 !important;
  --bg-secondary: #161a22 !important;
  --bg-panel: #12161e !important;
  --bg-elevated: #232934 !important;
  --bg-gradient-start: #10141c !important;
  --bg-gradient-mid: #1b2430 !important;
  --bg-gradient-end: #293440 !important;
  --border-color: #353d49 !important;
  --input-border: #4d5c6c !important;
  --control-bg: #1e2630 !important;
  --hover-bg: #293440 !important;
  --accent-color: #96bddc !important;
  --accent-color-strong: #6a9bc0 !important;
  --accent-color-soft: #bdd8eb !important;
  --accent-color-rgb: 150, 189, 220 !important;
  --accent-color-soft-rgb: 189, 216, 235 !important;
  --demo-line: #353d49;
  --demo-line-soft: #2b323d;
  --demo-highlight: rgba(255,255,255,.045);
  --demo-shadow: rgba(0,0,0,.14);
  --demo-panel-shadow: 0 3px 9px rgba(0,0,0,.12);
  --demo-head: #151920;
  --demo-rail: #10141b;
  --demo-sidebar: #171b23;
  --demo-editor: #07090d;
}

html[data-remix-look="black-ide"] body,
html[data-remix-look="black-ide-soft"] body,
html[data-remix-look="black-ide-clear"] body {
  --bg-primary: #0c1019 !important;
  --bg-secondary: #151d2b !important;
  --bg-panel: #101826 !important;
  --bg-elevated: #24364b !important;
  --bg-gradient-start: #101724 !important;
  --bg-gradient-mid: #1d3148 !important;
  --bg-gradient-end: #2a4966 !important;
  --border-color: #3e5972 !important;
  --input-border: #5c7f9c !important;
  --control-bg: #1c2d40 !important;
  --hover-bg: #2a4157 !important;
  --accent-color: #95d2ff !important;
  --accent-color-strong: #60afe9 !important;
  --accent-color-soft: #c5e7ff !important;
  --accent-color-rgb: 149, 210, 255 !important;
  --accent-color-soft-rgb: 197, 231, 255 !important;
  --demo-line: #3e5972;
  --demo-line-soft: #30475d;
  --demo-highlight: rgba(172,221,255,.09);
  --demo-shadow: rgba(0,0,0,.55);
  --demo-panel-shadow: 0 15px 31px rgba(0,0,0,.36);
  --demo-head: #172233;
  --demo-rail: #101927;
  --demo-sidebar: #152033;
  --demo-editor: #070d16;
}

html[data-remix-look] body {
  background: linear-gradient(125deg, var(--bg-gradient-start), var(--bg-gradient-end)) !important;
}
html[data-remix-look] :is(.remix-header, .editor-header) {
  background: var(--demo-head) !important;
  border-bottom: 1px solid var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 3px 8px color-mix(in srgb, var(--demo-shadow) 55%, transparent) !important;
}
html[data-remix-look] .remix-icon-panel {
  background: var(--demo-rail) !important;
  border-right-color: var(--demo-line) !important;
  box-shadow: inset -1px 0 0 var(--demo-highlight), 3px 0 12px var(--demo-shadow) !important;
}
html[data-remix-look] .remix-sidebar {
  background: var(--demo-sidebar) !important;
  border-right-color: var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight), 4px 0 18px var(--demo-shadow) !important;
}
html[data-remix-look] .remix-editor,
html[data-remix-look] .remix-terminal {
  background: var(--demo-editor) !important;
}
html[data-remix-look] .editor-textarea-wrap,
html[data-remix-look] .editor-code-wrap,
html[data-remix-look] .terminal-content {
  background: var(--demo-editor) !important;
}
html[data-remix-look] .editor-line-numbers {
  background: color-mix(in srgb, var(--demo-sidebar) 78%, var(--demo-editor) 22%) !important;
  border-right-color: var(--demo-line) !important;
}
html[data-remix-look] .editor-minimap-column,
html[data-remix-look] .editor-minimap {
  background: color-mix(in srgb, var(--demo-editor) 86%, var(--demo-sidebar) 14%) !important;
}
html[data-remix-look] .plugin-header,
html[data-remix-look] .editor-header,
html[data-remix-look] .terminal-header {
  background: var(--demo-head) !important;
  border-color: var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 3px 9px var(--demo-shadow) !important;
}
html[data-remix-look] .site-footer {
  background: var(--demo-head) !important;
  border-top-color: var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight) !important;
}
html[data-remix-look] .icon-item {
  border-color: var(--demo-line-soft) !important;
  border-right: 0 !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight) !important;
}
html[data-remix-look] .icon-item.active {
  background: color-mix(in srgb, var(--accent-color) 17%, var(--demo-rail)) !important;
  border-color: color-mix(in srgb, var(--accent-color) 63%, var(--demo-line)) !important;
  border-right: 0 !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 5px 12px var(--demo-shadow) !important;
}
html[data-remix-look] .tree-frame,
html[data-remix-look] .file-explorer-frame,
html[data-remix-look] .compilation-output,
html[data-remix-look] .deployed-contract {
  border-color: var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight), var(--demo-panel-shadow) !important;
}
html[data-remix-look] .editor-tab,
html[data-remix-look] .settings-tab,
html[data-remix-look] .debug-tab,
html[data-remix-look] .search-tab {
  border-color: var(--demo-line) !important;
  box-shadow: inset 0 1px 0 var(--demo-highlight) !important;
}
html[data-remix-look] .editor-tab.active,
html[data-remix-look] .settings-tab.active,
html[data-remix-look] .debug-tab.active,
html[data-remix-look] .search-tab.active {
  border-color: color-mix(in srgb, var(--accent-color) 60%, var(--demo-line)) !important;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent-color) 75%, white), 0 4px 12px var(--demo-shadow) !important;
}
html[data-remix-look] .remix-btn,
html[data-remix-look] .workspace-action-btn,
html[data-remix-look] .function-button,
html[data-remix-look] .function-button-small,
html[data-remix-look] .search-button,
html[data-remix-look] .terminal-btn {
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 4px 10px var(--demo-shadow) !important;
}
html[data-remix-look] .form-control,
html[data-remix-look] .deployment-id-input,
html[data-remix-look] .workspace-dropdown,
html[data-remix-look] .param-input,
html[data-remix-look] .search-input {
  border-color: var(--input-border) !important;
  box-shadow: inset 0 2px 5px var(--demo-shadow), inset 0 1px 0 var(--demo-highlight) !important;
}
html[data-remix-look] .compile-button.remix-btn-primary,
html[data-remix-look] .search-button,
html[data-remix-look] .clear-terminal-settings-btn,
html[data-remix-look] .workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn),
html[data-remix-look] .copy-address-btn {
  background: var(--accent-color-strong) !important;
  border-color: var(--accent-color-strong) !important;
  color: #fff !important;
}
html[data-remix-look] .compile-button.remix-btn-primary:hover:not(:disabled),
html[data-remix-look] .search-button:hover:not(:disabled),
html[data-remix-look] .clear-terminal-settings-btn:hover:not(:disabled),
html[data-remix-look] .workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn):hover:not(:disabled),
html[data-remix-look] .copy-address-btn:hover:not(:disabled) {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}
html[data-remix-look] #create-folder-main-btn {
  background: color-mix(in srgb, var(--accent-color) 28%, var(--demo-sidebar) 72%) !important;
  border-color: color-mix(in srgb, var(--accent-color) 48%, var(--demo-line) 52%) !important;
  color: var(--text-primary) !important;
}
html[data-remix-look] #create-folder-main-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 39%, var(--demo-sidebar) 61%) !important;
}
html[data-remix-look] #import-github-repo-btn {
  background: var(--demo-head) !important;
  border-color: var(--demo-line) !important;
  color: var(--text-primary) !important;
}
html[data-remix-look] .site-updates-popup,
html[data-remix-look] .app-modal-content,
html[data-remix-look] .modal-content {
  border-color: var(--demo-line) !important;
  box-shadow: 0 18px 38px var(--demo-shadow), inset 0 1px 0 var(--demo-highlight) !important;
}

/* Each study changes the intensity of depth without moving a control. */
html[data-remix-look="dark"] .remix-editor,
html[data-remix-look="dark"] .remix-terminal {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.13) !important;
}
html[data-remix-look="black"] .remix-editor,
html[data-remix-look="black"] .remix-terminal {
  box-shadow: inset 0 5px 18px rgba(0,0,0,.35) !important;
}
html[data-remix-look="black"] .tree-frame,
html[data-remix-look="black"] .file-explorer-frame {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 25px rgba(0,0,0,.34) !important;
}
html[data-remix-look="slate"] .remix-editor,
html[data-remix-look="slate"] .remix-terminal {
  box-shadow: inset 0 1px 5px rgba(8,15,30,.12) !important;
}
html[data-remix-look="ocean"] .remix-editor,
html[data-remix-look="ocean"] .remix-terminal {
  box-shadow: inset 0 4px 15px rgba(3,12,25,.27) !important;
}
html[data-remix-look="graphite"] .remix-editor,
html[data-remix-look="graphite"] .remix-terminal {
  box-shadow: inset 0 3px 10px rgba(0,0,0,.17) !important;
}
html[data-remix-look="graphite-soft"] .remix-editor,
html[data-remix-look="graphite-soft"] .remix-terminal,
html[data-remix-look="black-matte"] .remix-editor,
html[data-remix-look="black-matte"] .remix-terminal {
  box-shadow: inset 0 1px 4px rgba(0,0,0,.12) !important;
}
html[data-remix-look="graphite-steel"] .remix-editor,
html[data-remix-look="graphite-steel"] .remix-terminal,
html[data-remix-look="black-ide"] .remix-editor,
html[data-remix-look="black-ide"] .remix-terminal {
  box-shadow: inset 0 4px 14px rgba(0,0,0,.3) !important;
}
html[data-remix-look="black-ide-soft"] .remix-editor,
html[data-remix-look="black-ide-soft"] .remix-terminal {
  box-shadow: inset 0 3px 11px rgba(0,0,0,.25) !important;
}
html[data-remix-look="black-ide-clear"] .remix-editor,
html[data-remix-look="black-ide-clear"] .remix-terminal {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.2) !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) :is(.remix-header, .editor-header) {
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 3px 8px rgba(0,0,0,.18) !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .icon-item.active {
  box-shadow: inset 0 1px 0 var(--demo-highlight), 0 0 12px rgba(95,174,233,.2) !important;
}

/* Theme color supplies the hue; each study keeps its own darkness and elevation. */
html:is([data-remix-look="graphite"], [data-remix-look="graphite-soft"], [data-remix-look="graphite-steel"], [data-remix-look="black"], [data-remix-look="black-matte"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) body {
  --demo-head: color-mix(in srgb, var(--bg-gradient-base) var(--look-tint), var(--look-head));
  --demo-rail: color-mix(in srgb, var(--bg-gradient-base) var(--look-tint), var(--look-rail));
  --demo-sidebar: color-mix(in srgb, var(--bg-gradient-base) var(--look-tint), var(--look-sidebar));
  --demo-line: color-mix(in srgb, var(--bg-gradient-base) 13%, var(--look-line));
  --demo-line-soft: color-mix(in srgb, var(--bg-gradient-base) 9%, var(--look-line-soft));
  --bg-primary: var(--demo-rail) !important;
  --bg-secondary: var(--demo-sidebar) !important;
  --bg-panel: var(--demo-rail) !important;
  --bg-elevated: color-mix(in srgb, var(--bg-gradient-base) 11%, var(--look-elevated)) !important;
  --bg-contrast: color-mix(in srgb, var(--bg-gradient-base) 4%, #080b0f) !important;
  --bg-gradient-start: var(--demo-rail) !important;
  --bg-gradient-mid: var(--demo-sidebar) !important;
  --bg-gradient-end: var(--demo-head) !important;
  --border-color: var(--demo-line) !important;
  --input-border: color-mix(in srgb, var(--bg-gradient-base) 18%, var(--look-input-line)) !important;
  --control-bg: color-mix(in srgb, var(--bg-gradient-base) 9%, var(--look-control)) !important;
  --hover-bg: color-mix(in srgb, var(--bg-gradient-base) 14%, var(--look-control)) !important;
  --accent-color: color-mix(in srgb, var(--bg-gradient-base) 78%, white) !important;
  --accent-color-strong: color-mix(in srgb, var(--bg-gradient-base) 82%, black) !important;
  --accent-color-soft: color-mix(in srgb, var(--bg-gradient-base) 55%, white) !important;
  --accent-color-deep: color-mix(in srgb, var(--bg-gradient-base) 58%, black) !important;
}

html[data-remix-look="graphite"] body {
  --look-tint: 7%;
  --look-head: #252a2e;
  --look-rail: #202428;
  --look-sidebar: #292e32;
  --look-line: #4d545a;
  --look-line-soft: #41494f;
  --look-elevated: #363d43;
  --look-input-line: #68737b;
  --look-control: #343b41;
}
html[data-remix-look="graphite-soft"] body {
  --look-tint: 6%;
  --look-head: #2d3337;
  --look-rail: #272d31;
  --look-sidebar: #30363a;
  --look-line: #4a5258;
  --look-line-soft: #41494e;
  --look-elevated: #3d454a;
  --look-input-line: #68737b;
  --look-control: #383f44;
}
html[data-remix-look="graphite-steel"] body {
  --look-tint: 10%;
  --look-head: #1e272d;
  --look-rail: #192229;
  --look-sidebar: #222c33;
  --look-line: #495862;
  --look-line-soft: #394a55;
  --look-elevated: #2c3a43;
  --look-input-line: #667d8a;
  --look-control: #293740;
}
html[data-remix-look="black"] body {
  --look-tint: 5%;
  --look-head: #15191e;
  --look-rail: #0f1318;
  --look-sidebar: #161b20;
  --look-line: #333d46;
  --look-line-soft: #29343d;
  --look-elevated: #222a31;
  --look-input-line: #52616d;
  --look-control: #1d252d;
}
html[data-remix-look="black-matte"] body {
  --look-tint: 3%;
  --look-head: #111419;
  --look-rail: #0d1014;
  --look-sidebar: #14181d;
  --look-line: #2e353c;
  --look-line-soft: #252c33;
  --look-elevated: #1d232a;
  --look-input-line: #46525e;
  --look-control: #1a2027;
}
html[data-remix-look="black-ide"] body {
  --look-tint: 12%;
  --look-head: #182430;
  --look-rail: #0e151d;
  --look-sidebar: #1c2b39;
  --look-line: #344a5a;
  --look-line-soft: #293d4b;
  --look-elevated: #23313e;
  --look-input-line: #526b7f;
  --look-control: #1a2936;
  --demo-editor: #0b1017;
  --text-primary: #e8edf3 !important;
  --text-secondary: #c5d0db !important;
  --text-muted: #aebbc9 !important;
}

/* Two controlled lifts of Black Halo: panels brighten, work areas stay near black. */
html[data-remix-look="black-ide-soft"] body {
  --look-tint: 12%;
  --look-head: #18212a;
  --look-rail: #121b23;
  --look-sidebar: #1a2630;
  --look-line: #3b5062;
  --look-line-soft: #304658;
  --look-elevated: #27394a;
  --look-input-line: #5b7387;
  --look-control: #213242;
  --demo-editor: #080e17;
  --demo-shadow: rgba(0,0,0,.46);
  --demo-panel-shadow: 0 11px 25px rgba(0,0,0,.29);
}
html[data-remix-look="black-ide-clear"] body {
  --look-tint: 12%;
  --look-head: #202b35;
  --look-rail: #1a242e;
  --look-sidebar: #23313d;
  --look-line: #4a6073;
  --look-line-soft: #3d5365;
  --look-elevated: #324758;
  --look-input-line: #6a8296;
  --look-control: #2b3f50;
  --demo-editor: #0a111a;
  --demo-shadow: rgba(0,0,0,.38);
  --demo-panel-shadow: 0 9px 21px rgba(0,0,0,.24);
}
/* Compact controls use their border and fill instead of tiny inset/drop shadows. */
html:is([data-remix-look="black"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) body :is(
  .form-control,
  .deployment-id-input,
  .param-input,
  .function-param-input,
  .search-input,
  .workspace-dropdown,
  .gradient-row input[type="color"],
  .range-input,
  .range-value,
  .accent-preview,
  .function-inputs-horizontal,
  .advanced-toggle-row,
  .liquidity-display,
  .icon-item,
  .icon-item.active,
  .icon-item:hover,
  .editor-tab,
  .editor-tab.active,
  .settings-tab,
  .settings-tab.active,
  .debug-tab,
  .debug-tab.active,
  .search-tab,
  .search-tab.active,
  .remix-btn,
  .workspace-action-btn,
  .function-button,
  .function-button-small,
  .terminal-btn,
  .search-button,
  .clear-terminal-settings-btn,
  .copy-address-btn
) {
  box-shadow: none !important;
}
html:is([data-remix-look="black"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) :is(input, select, textarea, button):focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Thicker tab-button edges, with the right side open against the adjacent panel. */
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .icon-item {
  border-style: solid !important;
  border-width: 2px 0 2px 2px !important;
}

/* Large primary actions keep their raised treatment; compact fields stay flat. */
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) body :is(
  #create-file-main-btn:not(#create-folder-main-btn):not(#import-github-repo-btn),
  #create-folder-main-btn,
  #import-github-repo-btn
) {
  border-color: transparent !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) body :is(
  #create-file-main-btn,
  #create-folder-main-btn,
  #import-github-repo-btn,
  #compile-btn,
  .deploy-button
) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11),
    0 1px 0 color-mix(in srgb, var(--demo-rail) 72%, black),
    0 4px 7px rgba(0,0,0,.16) !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) body :is(
  #create-file-main-btn,
  #create-folder-main-btn,
  #import-github-repo-btn,
  #compile-btn,
  .deploy-button
):hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 0 color-mix(in srgb, var(--demo-rail) 72%, black),
    0 5px 9px rgba(0,0,0,.19) !important;
}

/* Match dialogs and update notes to the quieter Black surfaces. */
html:is([data-remix-look="black"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) :is(.site-updates-popup, .app-modal-content, .modal-content, .wallet-selection-modal) {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--demo-sidebar) 78%, var(--demo-head) 22%),
    var(--demo-sidebar)) !important;
  border: 1px solid color-mix(in srgb, var(--demo-line) 84%, var(--accent-color) 16%) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* A broader, theme-colored wash links the update card and the site header. */
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .site-updates-popup {
  border: 2px solid var(--theme-field-border) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.38) !important;
  background:
    radial-gradient(190% 150% at 0% -28%,
      rgba(var(--accent-color-soft-rgb), .30) 0%,
      rgba(var(--accent-color-rgb), .14) 48%,
      transparent 88%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--demo-head) 48%, var(--demo-sidebar) 52%),
      var(--demo-sidebar) 72%) !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) :is(.remix-header, .editor-header, .terminal-header) {
  background:
    radial-gradient(185% 210% at 0% -65%,
      rgba(var(--accent-color-soft-rgb), .30) 0%,
      rgba(var(--accent-color-rgb), .14) 48%,
      transparent 88%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--demo-head) 58%, var(--demo-sidebar) 42%),
      var(--demo-head) 72%) !important;
}
html:is([data-remix-look="black"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .site-updates-header::after {
  background: var(--demo-line) !important;
}
html:is([data-remix-look="black"], [data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .app-modal-footer {
  border-top-color: var(--demo-line) !important;
}

html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .app-modal-footer .remix-btn.remix-btn-primary {
  background: var(--accent-color-strong) !important;
  border-color: var(--accent-color-deep) !important;
  color: #fff !important;
}
html:is([data-remix-look="black-ide"], [data-remix-look="black-ide-soft"], [data-remix-look="black-ide-clear"]) .app-modal-footer .remix-btn.remix-btn-primary:hover:not(:disabled) {
  background: var(--accent-color) !important;
  border-color: var(--accent-color-strong) !important;
}

/* Black Studio: layered charcoal surfaces with a restrained blue accent. */
html[data-remix-look="black-ide"] body {
  --look-tint: 16%;
  --look-head: #252628;
  --look-rail: #111214;
  --look-sidebar: #1d1f21;
  --look-line: #414345;
  --look-line-soft: #333537;
  --look-elevated: #2b2d2f;
  --look-input-line: #606367;
  --look-control: #252729;
  /* Structural chrome follows Theme color with the same restrained treatment as
     the toolbar: the hue is visible, while charcoal remains the dominant surface. */
  --theme-structure-head: color-mix(in srgb, var(--bg-gradient-base) 24%, var(--look-head));
  --theme-structure-panel: color-mix(in srgb, var(--bg-gradient-base) 16%, var(--look-sidebar));
  --theme-structure-panel-deep: color-mix(in srgb, var(--bg-gradient-base) 14%, #17191c);
  --theme-structure-panel-raised: color-mix(in srgb, var(--bg-gradient-base) 21%, #272a2e);
  --theme-structure-border: color-mix(in srgb, var(--bg-gradient-base) 27%, var(--look-line));
  --theme-structure-border-soft: color-mix(in srgb, var(--bg-gradient-base) 19%, var(--look-line-soft));
  --theme-structure-control: color-mix(in srgb, var(--bg-gradient-base) 14%, #292b2e);
  --theme-structure-control-hover: color-mix(in srgb, var(--bg-gradient-base) 18%, #323539);
  --theme-structure-resizer: color-mix(in srgb, var(--bg-gradient-base) 29%, #4b4d50);
  --theme-toolbar-tone: color-mix(in srgb, var(--bg-gradient-base) 10%, #15171a);
  --theme-section-header-background: linear-gradient(180deg,
    color-mix(in srgb, var(--theme-structure-head) 96%, white 4%),
    color-mix(in srgb, var(--theme-structure-head) 91%, var(--theme-structure-panel) 9%));
  --site-header-tone: color-mix(in srgb, var(--bg-gradient-base) 18%, #151618);
  --site-header-background:
    radial-gradient(145% 210% at 20% -78%,
      rgba(255, 255, 255, .065) 0%,
      rgba(255, 255, 255, .025) 38%,
      transparent 76%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--site-header-tone) 96%, white 4%),
      var(--site-header-tone));
  --demo-line: var(--theme-structure-border);
  --demo-line-soft: var(--theme-structure-border-soft);
  --bg-primary: var(--theme-structure-panel-deep) !important;
  --bg-secondary: var(--theme-structure-panel) !important;
  --bg-panel: var(--theme-structure-panel-deep) !important;
  --bg-elevated: var(--theme-structure-panel-raised) !important;
  --input-border: color-mix(in srgb, var(--bg-gradient-base) 16%, var(--look-input-line)) !important;
  --control-bg: var(--theme-structure-control) !important;
  --hover-bg: var(--theme-structure-control-hover) !important;
  --draft-soft-border: var(--theme-structure-border-soft);
  --draft-strong-border: var(--theme-structure-border);
  --demo-editor: color-mix(in srgb, var(--bg-gradient-base) 3%, #111316);
  --surface-recess: color-mix(in srgb, var(--demo-sidebar) 58%, var(--demo-editor) 42%);
  --demo-shadow: rgba(0, 0, 0, .44);
  --demo-panel-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

html[data-remix-look="black-ide"] :is(.remix-editor, .remix-terminal, .editor-textarea-wrap, .editor-code-wrap, .terminal-content) {
  background: var(--demo-editor) !important;
}

html[data-remix-look="black-ide"] :is(.remix-header, .editor-header, .terminal-header) {
  background: var(--site-header-background) !important;
  background-size: 100vw 50px !important;
  background-position: right top !important;
}

html[data-remix-look="black-ide"] :is(.remix-header, .editor-header) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075),
    0 3px 9px rgba(0, 0, 0, .2) !important;
}

html[data-remix-look="black-ide"] .remix-icon-panel {
  background: var(--theme-toolbar-tone) !important;
  border-right-color: var(--theme-structure-resizer) !important;
}
@media (min-width: 961px) {
  html[data-remix-look="black-ide"] .remix-icon-panel::after {
    background: var(--theme-structure-resizer) !important;
  }
}
html[data-remix-look="black-ide"] .remix-sidebar {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--demo-sidebar) 95%, white 5%) 0%,
    var(--demo-sidebar) 30%,
    color-mix(in srgb, var(--demo-sidebar) 91%, black 9%) 100%) !important;
}
html[data-remix-look="black-ide"] .plugin-header {
  background: var(--theme-section-header-background) !important;
  box-shadow: none !important;
}
html[data-remix-look="black-ide"] .editor-header {
  background: var(--theme-section-header-background) !important;
  box-shadow: none !important;
}
html[data-remix-look="black-ide"] :is(.tree-frame, .file-explorer-frame, .compilation-output, .deployed-contract) {
  background: linear-gradient(180deg,
    var(--surface-recess),
    color-mix(in srgb, var(--surface-recess) 95%, black 5%)) !important;
}
html[data-remix-look="black-ide"] .editor-line-numbers {
  background: color-mix(in srgb, var(--demo-sidebar) 67%, var(--demo-editor) 33%) !important;
}
html[data-remix-look="black-ide"] .site-footer {
  background: var(--site-header-background) !important;
  background-size: 100vw 50px !important;
  background-position: right top !important;
}

html[data-remix-look="black-ide"] .header-right {
  flex: 0 0 auto;
  position: relative;
}
html[data-remix-look="black-ide"] .github-signin-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--theme-structure-border);
  border-radius: 6px;
  background: var(--theme-structure-control);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: #f1f2f4;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  white-space: nowrap;
  cursor: pointer;
}
html[data-remix-look="black-ide"] .github-signin-demo img {
  width: 16px;
  height: 16px;
  filter: invert(1);
}
html[data-remix-look="black-ide"] .github-signin-demo:hover {
  background: var(--theme-structure-control-hover);
  border-color: color-mix(in srgb, var(--bg-gradient-base) 30%, #74787e);
}
html[data-remix-look="black-ide"] .github-signin-widget[hidden] {
  display: none !important;
}
html[data-remix-look="black-ide"] .github-signin-widget {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 210;
  width: 330px;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--theme-structure-border);
  border-radius: 12px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--bg-gradient-base) 10%, #292c30) 0%,
    color-mix(in srgb, var(--bg-gradient-base) 7%, #202225) 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035);
  color: #eef0f2;
}
html[data-remix-look="black-ide"] .github-signin-widget:focus {
  outline: none;
}
html[data-remix-look="black-ide"] .github-signin-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #bfc3c9;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
html[data-remix-look="black-ide"] .github-signin-close:hover,
html[data-remix-look="black-ide"] .github-signin-close:focus-visible {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
  outline: none;
}
html[data-remix-look="black-ide"] .github-signin-widget-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 700;
}
html[data-remix-look="black-ide"] .github-signin-widget-title img {
  width: 20px;
  height: 20px;
  filter: invert(1);
}
html[data-remix-look="black-ide"] .github-signin-widget p {
  margin: 0;
  color: #c5c8cd;
  font-size: 13px;
  line-height: 1.55;
}
html[data-remix-look="black-ide"] .github-signin-continue {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
html[data-remix-look="black-ide"] .github-signin-continue img {
  width: 17px;
  height: 17px;
  filter: invert(1);
  opacity: .94;
}
html[data-remix-look="black-ide"] .github-signin-external {
  margin-left: auto;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1;
}
html[data-remix-look="black-ide"] .github-signin-continue:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-1px);
}
@media (min-width: 961px) and (max-width: 1240px) {
  html[data-remix-look="black-ide"] .header-right {
    display: flex;
  }
}
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
  html[data-remix-look="black-ide"] .github-signin-demo,
  html[data-remix-look="black-ide"] .github-signin-widget {
    display: none !important;
  }
}

html[data-remix-look="black-ide"] .site-updates-popup {
  background:
    radial-gradient(145% 145% at 6% -35%,
      rgba(255, 255, 255, .045) 0%,
      rgba(255, 255, 255, .015) 39%,
      transparent 80%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--demo-head) 94%, black 6%),
      color-mix(in srgb, var(--demo-sidebar) 90%, black 10%) 75%) !important;
}

html[data-remix-look="black-ide"] .icon-item:not(.active) {
  border-width: .75px .75px .75px .75px !important;
  border-right: 0 !important;
  border-color: var(--theme-toolbar-item-border) !important;
  background: var(--theme-toolbar-tone) !important;
}
html[data-remix-look="black-ide"] .icon-item.active {
  background: var(--theme-toolbar-active-bg) !important;
  border-color: currentColor !important;
  border-right: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 5px 12px rgba(0,0,0,.3) !important;
}
html[data-remix-look="black-ide"] .editor-tab.active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-gradient-base) 9%, #35373a),
    var(--theme-structure-control)) !important;
  border-color: var(--theme-structure-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 7px rgba(0,0,0,.22) !important;
}
html[data-remix-look="black-ide"] .editor-tab.active::after {
  background: var(--theme-structure-control) !important;
}
html[data-remix-look="black-ide"] :is(.vertical-resizer, .horizontal-resizer) {
  background: var(--theme-structure-resizer) !important;
}

/* Keep the original action colors within the new charcoal interface. */
html[data-remix-look="black-ide"] :is(
  #create-file-main-btn,
  .compile-button.remix-btn-primary,
  .search-button,
  .clear-terminal-settings-btn,
  .copy-address-btn
) {
  background: #1f6ecf !important;
  border-color: #1f6ecf !important;
  color: #fff !important;
}
html[data-remix-look="black-ide"] :is(
  #create-file-main-btn,
  .compile-button.remix-btn-primary,
  .search-button,
  .clear-terminal-settings-btn,
  .copy-address-btn
):hover:not(:disabled) {
  background: #2d8cff !important;
  border-color: #2d8cff !important;
}
html[data-remix-look="black-ide"] #create-folder-main-btn {
  background: #d2a64f !important;
  border-color: #d2a64f !important;
  color: #fff !important;
}
html[data-remix-look="black-ide"] #create-folder-main-btn:hover:not(:disabled) {
  background: #dcb86a !important;
  border-color: #dcb86a !important;
}
html[data-remix-look="black-ide"] #import-github-repo-btn {
  background: #2d333b !important;
  border-color: #2d333b !important;
  color: #fff !important;
}
html[data-remix-look="black-ide"] #import-github-repo-btn:hover:not(:disabled) {
  background: #3d444e !important;
  border-color: #3d444e !important;
}
html[data-remix-look="black-ide"] .deploy-button.remix-btn-primary {
  background: #f6851b !important;
  border-color: #f6851b !important;
  color: #fff !important;
}
html[data-remix-look="black-ide"] body #create-file-main-btn.workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn) {
  background: #1f6ecf !important;
  border-color: #1f6ecf !important;
}
html[data-remix-look="black-ide"] body #create-file-main-btn.workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn):hover:not(:disabled) {
  background: #2d8cff !important;
  border-color: #2d8cff !important;
}

/* Match the published site's solid action buttons and restrained bevel. */
html[data-remix-look="black-ide"] body :is(#create-file-main-btn, #compile-btn) {
  --action-face: #1f6ecf;
  --action-hover-face: #2d8cff;
}
html[data-remix-look="black-ide"] body #create-folder-main-btn {
  --action-face: #d2a64f;
  --action-hover-face: #dcb86a;
}
html[data-remix-look="black-ide"] body #import-github-repo-btn {
  --action-face: #2d333b;
  --action-hover-face: #3d444e;
}
html[data-remix-look="black-ide"] body .deploy-button {
  --action-face: #f6851b;
  --action-hover-face: #ff983a;
}
html[data-remix-look="black-ide"] body :is(
  #create-file-main-btn.workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn),
  #create-folder-main-btn,
  #import-github-repo-btn,
  #compile-btn,
  .deploy-button
) {
  background: var(--action-face) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
}
html[data-remix-look="black-ide"] body :is(
  #create-file-main-btn.workspace-action-btn:not(#create-folder-main-btn):not(#import-github-repo-btn),
  #create-folder-main-btn,
  #import-github-repo-btn,
  #compile-btn,
  .deploy-button
):hover:not(:disabled) {
  background: var(--action-hover-face) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.2) !important;
}
html[data-remix-look="black-ide"] body :is(#create-folder-main-btn, #import-github-repo-btn) {
  border-color: var(--action-face) !important;
}
html[data-remix-look="black-ide"] body :is(#create-folder-main-btn, #import-github-repo-btn):hover:not(:disabled) {
  border-color: var(--action-hover-face) !important;
}
html[data-remix-look="black-ide"] body .deploy-button {
  border-color: rgba(200,203,209,.28) !important;
}

/* Modal text fields use one quiet border when automatically focused. */
html[data-remix-look="black-ide"] .app-modal-content .app-modal-input:focus,
html[data-remix-look="black-ide"] .app-modal-content .app-modal-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
html[data-remix-look="black-ide"] .app-modal-content .app-modal-input:not(.input-error):focus,
html[data-remix-look="black-ide"] .app-modal-content .app-modal-input:not(.input-error):focus-visible {
  border-color: var(--input-border) !important;
}

/* The desktop rail opens toward its adjacent pane; compact tabs are separate cards. */
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
  html[data-remix-look] .remix-icon-panel .icon-item {
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-top-right-radius: 5.5px !important;
    border-bottom-right-radius: 5.5px !important;
  }

  html[data-remix-look] .remix-icon-panel .icon-item.active {
    border-right-width: 2px !important;
  }
}




/* ============================================================ */

/* Neutral control polish: the reviewed black/grey theme must never inherit a blue
   browser highlight. Debug and Settings keep their existing landmarks, but use one
   consistent field rhythm and the same raised action treatment as Compile & Build. */
html[data-remix-look="black-ide"] body :is(
    .form-control,
    .workspace-dropdown,
    select.form-control,
    .active-file-value,
    #smart-contract-access-input
) {
    background-color: var(--theme-field-bg) !important;
    border-color: var(--theme-field-border) !important;
    box-shadow: none !important;
}

html[data-remix-look="black-ide"] body :is(.debug-panel, .settings-panel) .form-control:is(:read-only, :disabled) {
    background: #292929 !important;
    border-color: #626262 !important;
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html[data-remix-look="black-ide"] body :is(
    .form-control,
    .workspace-dropdown,
    select.form-control,
    #smart-contract-access-input
):focus,
html[data-remix-look="black-ide"] body :is(
    .form-control,
    .workspace-dropdown,
    select.form-control,
    #smart-contract-access-input
):focus-visible {
    outline: none !important;
    background-color: var(--theme-field-hover-bg) !important;
    border-color: var(--theme-field-hover-border) !important;
    box-shadow: 0 0 0 2px rgba(160, 160, 160, .16) !important;
}

html[data-remix-look="black-ide"] body select.form-control {
    color-scheme: dark;
    accent-color: #676767;
}

html[data-remix-look="black-ide"] body select.form-control option {
    background: #292929 !important;
    color: #edf0f3 !important;
}

html[data-remix-look="black-ide"] body select.form-control option:checked {
    background: linear-gradient(#5c5c5c, #5c5c5c) !important;
    background-color: #5c5c5c !important;
    color: #ffffff !important;
}

body :is(.debugger-config, .settings-config) {
    padding: 16px !important;
}

body :is(.debug-tabs, .settings-tabs) {
    margin-bottom: 16px !important;
}

body :is(.debug-content, .settings-content, .debug-panel, .settings-panel, .simulation-debug-section, .simulation-debug-actions) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .simulation-debug-section {
    padding: 0 !important;
    gap: 14px !important;
}

body .simulation-debug-section > .form-group,
body .settings-panel .form-group {
    margin-bottom: 14px !important;
}

body .simulation-debug-actions {
    display: grid;
    gap: 14px;
    padding: 0 !important;
}

body .simulation-debug-contract-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body .simulation-debug-contract-row > label {
    margin: 0 !important;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 32px;
    white-space: nowrap;
}

body .simulation-debug-contract-row > .form-control {
    min-width: 0;
    height: 32px;
}

body :is(
    .debug-panel .remix-btn,
    .settings-panel .remix-btn,
    .compact-remove-btn
) {
    box-sizing: border-box;
    min-height: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5.5px !important;
    padding: 0 12px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .16),
        0 7px 16px rgba(0, 0, 0, .16) !important;
    transform: none;
}

body :is(
    .debug-panel .remix-btn-primary,
    .settings-panel .clear-terminal-settings-btn
) {
    background: #1f6ecf !important;
    border: 1px solid #1f6ecf !important;
    color: #ffffff !important;
}

body :is(
    .debug-panel .remix-btn-primary,
    .settings-panel .clear-terminal-settings-btn
):hover:not(:disabled) {
    background: #2d8cff !important;
    border-color: #2d8cff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 10px 20px rgba(0, 0, 0, .2) !important;
    transform: translateY(-1px);
}

body .settings-panel .reset-all-btn {
    width: 100%;
    background: #872131 !important;
    border: 1px solid #a43b4c !important;
    color: #ffffff !important;
}

body .settings-panel .reset-all-btn:hover:not(:disabled) {
    background: #a32a3d !important;
    border-color: #bd4356 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 10px 20px rgba(0, 0, 0, .2) !important;
    transform: translateY(-1px);
}

body .compact-remove-btn {
    background: #59646f !important;
    border: 1px solid #78838f !important;
    color: #ffffff !important;
}

body .compact-remove-btn:hover:not(:disabled) {
    background: #687582 !important;
    border-color: #8995a1 !important;
}

body :is(
    .debug-panel .remix-btn,
    .settings-panel .remix-btn,
    .compact-remove-btn
):disabled {
    opacity: .5 !important;
    filter: none !important;
    cursor: default !important;
}

/* Theme-derived accents — RECALIBRATED: the theme is a mid tone (#707070 era), so
   borders/backgrounds mix toward BLACK and text/accents take only a LITTLE white
   (max 35%). Previous ratios (40-78% white) produced near-white borders/glows.
   body-prefixed selectors: order-independent vs monolith.css. */
:root {
    --console-theme-light: color-mix(in srgb, var(--bg-gradient-base) 65%, black);
    --console-theme-lighter: color-mix(in srgb, var(--bg-gradient-base) 82%, black);
    --console-theme-faint: color-mix(in srgb, var(--bg-gradient-base) 90%, black);
    --console-theme-border: color-mix(in srgb, var(--bg-gradient-base) 82%, black);
    --console-theme-border-strong: color-mix(in srgb, var(--bg-gradient-base) 65%, black);
}

/* Field titles */
body .deploy-console-section-title,
body .deploy-console-input-section .deploy-console-section-title {
    color: color-mix(in srgb, var(--bg-gradient-base) 65%, black) !important;
    font-style: normal !important;
}

/* Inset boxes */
body .deploy-read-row:not(#contract-address-row):not(.deploy-console-value-row) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 78%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 88%, black) !important;
}
body .deploy-read-row.is-deployed:not(#contract-address-row):not(.deploy-console-value-row) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 70%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 84%, black) !important;
}

/* Copy buttons */

/* Interaction buttons */
body .deploy-interaction-btn {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 75%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 86%, black) !important;
    color: color-mix(in srgb, var(--bg-gradient-base) 60%, black) !important;
}
body .deploy-interaction-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bg-gradient-base) 78%, black) !important;
    border-color: color-mix(in srgb, var(--bg-gradient-base) 62%, black) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-gradient-base) 75%, black) !important;
}
/* PROCESSING (clicked → spinner): keep the orange action face, dim to 50% exactly like
   Deploy on Cloud Workspace / Compile & Build. The spinner is already injected by the
   JS (btn-spinner), so visually it matches the main action buttons perfectly. */
body .deploy-interaction-btn:disabled {
    background: #f6851b !important;
    color: #ffffff !important;
    border-color: #f6851b !important;
    opacity: 0.5 !important;
    filter: grayscale(0.3) brightness(0.85) !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* LOCKED (no contract / bot state prevents the action): genuinely muted — NOT orange.
   This is the only state where the button loses its action color entirely. */
body .deploy-interaction-btn.is-locked,
body .deploy-interaction-btn.is-locked:disabled {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 85%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 93%, black) !important;
    color: color-mix(in srgb, var(--bg-gradient-base) 75%, black) !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
}
body .deploy-interaction-btn.is-processing {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 78%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 88%, black) !important;
}

/* Deploy on Cloud Workspace: dimmed while deploying */
body .deploy-button.is-deploying {
    opacity: 0.5 !important;
    filter: grayscale(0.4) brightness(0.85) !important;
    cursor: default !important;
}

/* Global look variables — theme-derived (declared on body to beat the look blocks,
   which also declare on body with !important). */
html[data-remix-look] body,
html[data-remix-look] {
    --input-border: color-mix(in srgb, var(--bg-gradient-base) 85%, black) !important;
    --control-bg: color-mix(in srgb, var(--bg-gradient-base) 72%, black) !important;
    --scrollbar-thumb: color-mix(in srgb, var(--bg-gradient-base) 62%, black) !important;
    --scrollbar-thumb-hover: color-mix(in srgb, var(--bg-gradient-base) 78%, black) !important;
    --accent-color: color-mix(in srgb, var(--bg-gradient-base) 60%, black) !important;
    --accent-color-strong: color-mix(in srgb, var(--bg-gradient-base) 50%, black) !important;
    --accent-color-soft: color-mix(in srgb, var(--bg-gradient-base) 72%, black) !important;
    --accent-color-deep: color-mix(in srgb, var(--bg-gradient-base) 85%, black) !important;
}

/* Non-clickable fields: muted, no glow */
body .form-control:read-only,
body .form-control:disabled,
body select:disabled {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 88%, black) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 80%, black) !important;
    color: color-mix(in srgb, var(--bg-gradient-base) 68%, black) !important;
    box-shadow: none !important;
}
/* ============================================================ */

/* Reviewed Black IDE controls. Existing control dimensions and Deploy spacing stay intact. */
html[data-remix-look="black-ide"] body .deploy-console {
    --console-line: #59646f;
    --console-surface: #252b31;
    --console-text: #f7f9fb;
    background: #1d1e20 !important;
    border-color: #4b5056 !important;
}
html[data-remix-look="black-ide"] body .deploy-console-header { border-bottom-color: #4b5056 !important; }
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .form-group > label { color: #d8dde3 !important; }
html[data-remix-look="black-ide"] body .deploy-console-section-title { color: #fff !important; }
html[data-remix-look="black-ide"] body .deployment-key-hint { color: #aeb6bf !important; }
html[data-remix-look="black-ide"] body :is(.settings-tab.active, .debug-tab.active) {
    color: #f4f6f8 !important;
    border-bottom-color: color-mix(in srgb, var(--bg-gradient-base) 40%, #b4c8da 60%) !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .form-control {
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) !important;
    color: #edf0f3 !important;
    -webkit-text-fill-color: #edf0f3 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
/* Active File uses the shared read-only control surface. */
html[data-remix-look="black-ide"] body .active-file-value {
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) !important;
    color: #edf0f3 !important;
    -webkit-text-fill-color: #edf0f3 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    font-style: normal !important;
    font-weight: 400 !important;
}
html[data-remix-look="black-ide"] body .active-file-value.is-empty {
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}
/* Keep the empty state muted even inside Deploy, whose generic form-control rule is more specific. */
html[data-remix-look="black-ide"] body .plugin-content .active-file-value.is-empty {
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    font-style: italic !important;
}
html[data-remix-look="black-ide"] body :is(#workspace-select, #compile-file-select, #deploy-folder-select, #solidity-version-select) {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 32px;
    padding-right: 36px !important;
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 5.5 5 5 5-5' stroke='%23F4F6F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 16px 16px no-repeat !important;
    color: #edf0f3 !important;
    -webkit-text-fill-color: #edf0f3 !important;
    color-scheme: dark;
    opacity: 1 !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body #solidity-version-select:disabled {
    color: #b4bcc5 !important;
    -webkit-text-fill-color: #b4bcc5 !important;
    opacity: 0.82 !important;
}
/* Search is a text field, but its surface must be visually identical to the
   Active Folder controls. It deliberately omits only the dropdown chevron. */
html[data-remix-look="black-ide"] body #search-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 32px;
    padding: 6px 8px !important;
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) !important;
    color: #edf0f3 !important;
    -webkit-text-fill-color: #edf0f3 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body :is(#workspace-select, #compile-file-select, #deploy-folder-select) option {
    background: #252b31;
    color: #edf0f3;
}
html[data-remix-look="black-ide"] body :is(#workspace-select, #compile-file-select, #deploy-folder-select):hover:not(:disabled),
html[data-remix-look="black-ide"] body :is(#workspace-select, #compile-file-select, #deploy-folder-select):focus-visible {
    border-color: var(--theme-field-hover-border) !important;
    background-color: var(--theme-field-hover-bg) !important;
}
html[data-remix-look="black-ide"] body #search-input:hover:not(:disabled),
html[data-remix-look="black-ide"] body #search-input:focus-visible {
    border-color: var(--theme-field-hover-border) !important;
    background-color: var(--theme-field-hover-bg) !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .container-toggle-btn {
    border: 1px solid #626c76 !important;
    background: #394149 !important;
    color: #f2f4f6 !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body .deploy-read-row,
html[data-remix-look="black-ide"] body .deploy-read-row.is-deployed {
    border-color: var(--console-line) !important;
    background: var(--console-surface) !important;
}
html[data-remix-look="black-ide"] body .deploy-read-value { color: #ffffff !important; }
html[data-remix-look="black-ide"] body .deploy-console-section .deploy-console-value-field,
html[data-remix-look="black-ide"] body .deploy-console-section .deploy-read-row.is-deployed .deploy-console-value-field {
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body .deploy-console-input-section #contract-address-input:focus {
    border-color: #aab4be !important;
    box-shadow: 0 0 0 2px rgba(170, 180, 190, .2) !important;
}
html[data-remix-look="black-ide"] body .deploy-interactions { gap: 6px; }
html[data-remix-look="black-ide"] body .deploy-interaction-btn,
html[data-remix-look="black-ide"] body .deploy-interaction-btn.is-processing {
    background: #1f6ecf !important;
    border-color: #1f6ecf !important;
    color: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
}
html[data-remix-look="black-ide"] body .deploy-interaction-btn:hover:not(:disabled):not(.is-locked) {
    background: #2d8cff !important;
    border-color: #2d8cff !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.2) !important;
}
html[data-remix-look="black-ide"] body .deploy-interaction-btn:disabled,
html[data-remix-look="black-ide"] body .deploy-interaction-btn.is-locked {
    background: #1f6ecf !important;
    border-color: #1f6ecf !important;
    color: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
    opacity: .5 !important;
}
html[data-remix-look="black-ide"] body .deploy-read-copy-btn {
    border-color: #78838f !important;
    background: #59646f !important;
    color: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
}
html[data-remix-look="black-ide"] body .deploy-read-copy-btn:hover:not(:disabled) {
    border-color: #8995a1 !important;
    background: #687582 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.2) !important;
}
html[data-remix-look="black-ide"] body .app-modal-footer #app-modal-confirm.remix-btn-primary {
    border-color: #1f6ecf !important;
    background: #1f6ecf !important;
    color: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
}
html[data-remix-look="black-ide"] body .app-modal-footer #app-modal-confirm.remix-btn-primary:hover:not(:disabled) {
    border-color: #2d8cff !important;
    background: #2d8cff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.2) !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deploy-button.remix-btn-orange {
    --action-face: #f6851b;
    --action-hover-face: #e2761b;
    background: #f6851b !important;
    border-color: #f6851b !important;
    color: #fff !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deploy-button.remix-btn-orange.is-deployed {
    --action-face: #b9783e;
    --action-hover-face: #b9783e;
    background: #b9783e !important;
    border-color: #c88a54 !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: default;
}

/* "Deployed on Cloud Workspace" (locked state): same dim level as Compile & Build when
   processing — 50% opacity (text included) + the action-face 3D shadow, colors unchanged. */
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deploy-button.remix-btn-orange.is-deployed,
body .deploy-button.is-deployed {
    opacity: 0.5 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), 0 7px 16px rgba(0, 0, 0, .16) !important;
    filter: none !important;
    cursor: default !important;
}

/* Popup text fields: EXACT same look as the Deploy-tab ID field
   (rule: .plugin-content[data-content="deploy"] .form-control). */
html[data-remix-look="black-ide"] body .app-modal-input,
html[data-remix-look="black-ide"] body .app-modal-content input[type="text"],
html[data-remix-look="black-ide"] body .app-modal-content input[type="password"],
html[data-remix-look="black-ide"] body .app-modal-content input[type="number"],
html[data-remix-look="black-ide"] body .app-modal-content textarea,
html[data-remix-look="black-ide"] body .modal-content input[type="text"],
html[data-remix-look="black-ide"] body .modal-content textarea,
html[data-remix-look="black-ide"] body .wallet-selection-modal input {
    border: 1px solid var(--theme-field-border) !important;
    background: var(--theme-field-bg) !important;
    color: #edf0f3 !important;
    -webkit-text-fill-color: #edf0f3 !important;
    box-shadow: none !important;
    border-radius: 5.5px !important;
    opacity: 1 !important;
}

/* ============================================================ */
/* MOBILE: keep only the active-file context and return navigation height to the workspace. */
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
    html[data-remix-look] body .site-footer {
        display: none !important;
    }

    .work-folder-group,
    .mobile-files-toggle {
        display: none !important;
    }

    /* Active File keeps its compact control height after Work Folder disappears. */
    .active-file-group .active-file-value {
        box-sizing: border-box !important;
        height: 29px !important;
        min-height: 29px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Unified Search and compact Debug/Simulation final contract. */
body .search-config {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
}
body .search-query-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body .search-input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
}
body #search-input,
body #search-btn {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
}
html[data-remix-look] body #search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    padding: 0 12px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), 0 7px 16px rgba(0, 0, 0, .16) !important;
}
html[data-remix-look] body #search-btn:hover:not(:disabled) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 20px rgba(0, 0, 0, .2) !important;
}
body .search-results-panel {
    display: flex !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body .search-results {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
body .debugger-config {
    padding: 12px !important;
}
body .simulation-debug-section {
    padding: 0 !important;
    gap: 10px !important;
}
body .simulation-debug-section > .form-group {
    margin: 0 !important;
}
body .simulation-debug-field-row {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}
body .simulation-debug-field-row > label {
    margin: 0 !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
}
body .simulation-debug-field-row > .form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
}
body .simulation-debug-actions {
    gap: 10px !important;
    padding: 0 !important;
}
@media (min-width: 641px) and (max-width: 768px), (min-width: 641px) and (max-width: 960px) and (hover: none) and (pointer: coarse) {
    body .remix-icon-panel {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    body .remix-icon-panel .icon-item[data-plugin="search"] {
        display: flex !important;
    }
}
@media (max-width: 640px) {
    body .remix-icon-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    body .remix-icon-panel .icon-item[data-plugin="search"] {
        display: none !important;
    }
}
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
    body #search-input,
    body #search-btn,
    body .simulation-debug-field-row > .form-control,
    body .simulation-debug-contract-row > .form-control,
    body .simulation-debug-contract-row > .compact-remove-btn,
    body .simulation-debug-section .remix-btn {
        height: 29px !important;
        min-height: 29px !important;
    }
}
/* ============================================================ */

/* ============================================================ */
/* Keep field hints softly grey and real values white. */
body .deploy-read-value {
    color: #ffffff !important;
}
body .deployment-id-input::placeholder {
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    font-style: normal !important;
    opacity: 1 !important;
}
body .deploy-console-input-section #contract-address-input::placeholder {
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    font-style: italic !important;
    opacity: 1 !important;
}
/* ============================================================ */

/* ============================================================ */
/* Keep the deployment ID action aligned with its field; its relief stays inside its box. */
body .container-toggle-btn.remix-btn {
    background: color-mix(in srgb, var(--bg-gradient-base) 88%, black) !important;
    color: color-mix(in srgb, var(--bg-gradient-base) 62%, black) !important;
    border: 1px solid color-mix(in srgb, var(--bg-gradient-base) 75%, black) !important;
    border-radius: 5.5px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 4px rgba(0, 0, 0, .18) !important;
}
body .container-toggle-btn.remix-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bg-gradient-base) 80%, black) !important;
    border-color: color-mix(in srgb, var(--bg-gradient-base) 60%, black) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 4px rgba(0, 0, 0, .2) !important;
    transform: none !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .container-toggle-btn.remix-btn {
    background: #59646f !important;
    border-color: #78838f !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 4px rgba(0, 0, 0, .18) !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .container-toggle-btn.remix-btn:hover:not(:disabled) {
    background: #687582 !important;
    border-color: #8995a1 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 4px rgba(0, 0, 0, .2) !important;
}
html[data-remix-look] body .plugin-content[data-content="deploy"] .container-toggle-btn.remix-btn:active:not(:disabled) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transform: none !important;
}
html[data-remix-look] body .plugin-content[data-content="deploy"] .container-toggle-btn.remix-btn:disabled {
    opacity: 0.5 !important;
    filter: none !important;
    cursor: default !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 4px rgba(0, 0, 0, .18) !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deployment-id-row .deployment-id-input:placeholder-shown:not(:focus) {
    background: var(--theme-field-bg) !important;
    border-color: var(--theme-field-border) !important;
    box-shadow: none !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deployment-id-row .deployment-id-input:placeholder-shown:not(:focus)::placeholder {
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    font-style: normal !important;
}
html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deployment-id-row .deployment-id-input:read-only {
    background: var(--theme-field-bg) !important;
    border: 1px solid var(--theme-field-border) !important;
    color: #aebbc9 !important;
    -webkit-text-fill-color: #aebbc9 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html[data-remix-look="black-ide"] body .plugin-content[data-content="deploy"] .deploy-console-input-section .deploy-read-row.is-deployed #contract-address-input:read-only {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* The Smart Contract row is only a layout wrapper; never render a second panel behind
   its address field and Copy action. Copy deliberately mirrors Reload/Remove Deployment. */
html[data-remix-look="black-ide"] body #contract-address-row {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body :is(.container-toggle-btn.remix-btn, .deploy-read-copy-btn) {
    background: color-mix(in srgb, var(--bg-gradient-base) 88%, black) !important;
    color: color-mix(in srgb, var(--bg-gradient-base) 62%, black) !important;
    border: 1px solid color-mix(in srgb, var(--bg-gradient-base) 75%, black) !important;
    border-radius: 5.5px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 16px !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -2px 4px rgba(0, 0, 0, .18) !important;
}
body .container-toggle-btn.remix-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bg-gradient-base) 80%, black) !important;
    border-color: color-mix(in srgb, var(--bg-gradient-base) 60%, black) !important;
    color: #ffffff !important;
    transform: none !important;
}
html[data-remix-look="black-ide"] body .container-toggle-btn.remix-btn {
    background: #636f7b !important;
    border-color: #828e9a !important;
    color: #ffffff !important;
}
html[data-remix-look="black-ide"] body .container-toggle-btn.remix-btn:hover:not(:disabled) {
    background: #717e8b !important;
    border-color: #929eaa !important;
}

/* Copy button: same blue language as the Contract Functions buttons (black-ide). */
html[data-remix-look="black-ide"] body .deploy-read-copy-btn {
    background: #1f6ecf !important;
    border-color: #1f6ecf !important;
    color: #fff !important;
}

html[data-remix-look="black-ide"] body .deploy-read-copy-btn:hover:not(:disabled) {
    background: #2d8cff !important;
    border-color: #2d8cff !important;
    color: #fff !important;
}
@media (max-width: 360px) {
    body .deployment-id-row .container-toggle-btn.remix-btn {
        flex-basis: 29px;
    }
}
/* ============================================================ */

/* Final action relief: keep Settings actions as dimensional as Compile & Build. */
html[data-remix-look] body .settings-panel :is(#clear-terminal-settings-btn, #reset-all-btn) {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .16),
        0 7px 16px rgba(0, 0, 0, .16) !important;
}
html[data-remix-look] body .settings-panel :is(#clear-terminal-settings-btn, #reset-all-btn):hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 10px 20px rgba(0, 0, 0, .2) !important;
}

html[data-remix-look] body .site-updates-popup {
    border-width: 2px !important;
    border-radius: 8px !important;
}

body .plugin-content[data-content="deploy"] .deployment-id-row {
    align-items: center !important;
}

body .plugin-content[data-content="deploy"] .smart-contract-access-group #reload-deployment-btn {
    align-self: center !important;
}

/* The address field and Copy action share layout only: none of their three wrapper
   layers may paint a panel. The controls themselves retain their own surfaces. */
body .deploy-console-input-section,
body .deploy-console-input-section > .deploy-read-values,
body .deploy-console-value-row {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* The liquidity field is itself the visible frame. Its value-row wrapper must never
   paint square corners behind the rounded control, including after runtime re-renders. */
body .deploy-console-section .deploy-console-value-row,
body .deploy-console-section .deploy-read-row-valueonly {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body .deploy-console-section .deploy-console-value-field {
    background-clip: padding-box !important;
}

html[data-remix-look="black-ide"] body .deploy-console-section .deploy-console-value-row,
html[data-remix-look="black-ide"] body .deploy-console-section .deploy-read-row-valueonly {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Console value controls follow the same control-height contract as Work Folder and
   Active File: 32 px on desktop and the shared 29 px compact baseline. */
@media (min-width: 961px) {
    body .deploy-console-section .deploy-console-value-field,
    body .deploy-read-row-valueonly {
        box-sizing: border-box !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
    body .container-toggle-btn.remix-btn,
    body .deploy-console-section .deploy-console-value-field,
    body .deploy-console-input-section .deploy-read-copy-btn,
    body .deploy-interaction-btn,
    body .deploy-read-row-valueonly,
    body .simulation-debug-contract-row > .compact-remove-btn {
        box-sizing: border-box !important;
        height: 29px !important;
        min-height: 29px !important;
    }
}

/* Simulation actions stay darker than Copy/Remove Contract while retaining the same 3D relief. */
html[data-remix-look] body .simulation-debug-section :is(.remix-btn, .compact-remove-btn) {
    box-sizing: border-box !important;
    height: 29px !important;
    min-height: 29px !important;
    border: 1px solid #454c54 !important;
    background: #252a30 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important;
}
html[data-remix-look] body .simulation-debug-section :is(.remix-btn, .compact-remove-btn):hover:not(:disabled) {
    border-color: #59616a !important;
    background: #30363d !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.2) !important;
    transform: translateY(-1px) !important;
}

/* Copy and Reload/Remove Contract remain compact at every viewport. */
html[data-remix-look] body :is(
    .container-toggle-btn.remix-btn,
    .deploy-console-input-section .deploy-read-copy-btn
) {
    box-sizing: border-box !important;
    height: 29px !important;
    min-height: 29px !important;
}

/* Desktop Compile, Deploy and Callable Functions use the canonical 32px action height. */
@media (min-width: 961px) {
    html[data-remix-look] body :is(
        .compile-button,
        .deploy-button,
        .deploy-interaction-btn
    ) {
        box-sizing: border-box !important;
        height: 32px !important;
        min-height: 32px !important;
    }
}

/* Keep this final override last: legacy preview rules above must not re-expand Search or Simulation. */
body .search-config { height: 100% !important; min-height: 0 !important; padding: 12px !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: 10px !important; overflow: hidden !important; }
body .search-query-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body .search-input-group { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: stretch !important; gap: 8px !important; margin: 0 0 10px !important; }
body #search-input, body #search-btn { box-sizing: border-box !important; height: 32px !important; min-height: 32px !important; }
html[data-remix-look] body #search-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 72px !important; padding: 0 12px !important; font: 700 12px Arial, sans-serif !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 7px 16px rgba(0,0,0,.16) !important; }
body .search-results-panel { display: flex !important; min-height: 0 !important; overflow: hidden !important; }
body .search-results { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; }
body .debugger-config { padding: 12px !important; }
body .simulation-debug-section { padding: 0 !important; gap: 10px !important; }
body .simulation-debug-section > .form-group { margin: 0 !important; }
body .simulation-debug-field-row { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; margin: 0 !important; }
body .simulation-debug-field-row > label { margin: 0 !important; min-width: 0 !important; line-height: 1.25 !important; }
body .simulation-debug-field-row > .form-control { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; }
body .simulation-debug-actions {
    gap: 10px !important;
    margin-top: 4px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--draft-soft-border) !important;
}
@media (min-width: 641px) and (max-width: 768px), (min-width: 641px) and (max-width: 960px) and (hover: none) and (pointer: coarse) { body .remix-icon-panel { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body .remix-icon-panel .icon-item[data-plugin="search"] { display: flex !important; } }
@media (max-width: 640px) { body .remix-icon-panel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body .remix-icon-panel .icon-item[data-plugin="search"] { display: none !important; } }
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) { body #search-input, body #search-btn, body .compile-button, body .deploy-button, body .deploy-interaction-btn, body .simulation-debug-field-row > .form-control, body .simulation-debug-contract-row > .form-control, body .simulation-debug-contract-row > .compact-remove-btn, body .simulation-debug-section .remix-btn { height: 29px !important; min-height: 29px !important; } }
html[data-remix-look] {
    --scrollbar-thumb: color-mix(in srgb, var(--bg-gradient-base) 24%, #3b3f44 76%) !important;
    --scrollbar-thumb-hover: color-mix(in srgb, var(--bg-gradient-base) 30%, #50555b 70%) !important;
}
html[data-remix-look] body .deploy-console-status {
    font-style: normal !important;
}
html[data-remix-look] body .deploy-console-section-title {
    font-style: normal !important;
}

/* Final Theme-color coverage for Black IDE.
   Structural chrome, panels and separators share the selected hue. The source editor
   and terminal log canvas deliberately keep their dedicated near-black surfaces. */
html[data-remix-look="black-ide"] body :is(
    .remix-main,
    .main-content,
    .right-section
) {
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body .remix-sidebar {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--theme-structure-panel) 94%, white 6%) 0%,
        var(--theme-structure-panel) 34%,
        color-mix(in srgb, var(--theme-structure-panel) 91%, black 9%) 100%) !important;
    border-color: var(--theme-structure-border) !important;
}

html[data-remix-look="black-ide"] body .plugin-content {
    background:
        radial-gradient(145% 105% at 8% -10%,
            color-mix(in srgb, var(--bg-gradient-base) 20%, transparent) 0%,
            transparent 57%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--theme-structure-panel) 96%, white 4%) 0%,
            var(--theme-structure-panel) 38%,
            color-mix(in srgb, var(--theme-structure-panel) 94%, black 6%) 100%) !important;
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body :is(
    .workspace-section,
    .compiler-config,
    .deploy-config,
    .search-config,
    .debugger-config,
    .settings-config,
    .debug-content,
    .settings-content,
    .debug-panel,
    .settings-panel,
    .deploy-form-section,
    .search-query-card
) {
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body :is(
    .tree-frame,
    .file-explorer-frame,
    .compilation-output,
    .deployed-contract,
    .search-results-panel,
    .reset-panel,
    .advanced-toggle-row
) {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--theme-structure-panel-deep) 96%, white 4%),
        color-mix(in srgb, var(--theme-structure-panel-deep) 95%, black 5%)) !important;
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body :is(
    .tree-frame-header,
    .editor-tabs,
    .deploy-console-header,
    .app-modal-header,
    .modal-header,
    .app-modal-footer,
    .modal-footer
) {
    background: var(--theme-section-header-background) !important;
    border-color: var(--theme-structure-border) !important;
    box-shadow: none !important;
}

html[data-remix-look="black-ide"] body .deploy-console {
    --console-line: var(--theme-structure-border);
    --console-surface: var(--theme-structure-panel-raised);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--theme-structure-panel-deep) 94%, white 6%),
        var(--theme-structure-panel-deep)) !important;
    border-color: var(--theme-structure-border) !important;
}

html[data-remix-look="black-ide"] body :is(
    .app-modal-content,
    .modal-content,
    .wallet-selection-modal,
    .site-updates-popup,
    .github-signin-widget
) {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--theme-structure-panel-raised) 96%, white 4%) 0%,
        var(--theme-structure-panel) 48%,
        var(--theme-structure-panel-deep) 100%) !important;
    border-color: var(--theme-structure-border) !important;
}

html[data-remix-look="black-ide"] body .github-signin-demo {
    background: color-mix(in srgb, var(--bg-gradient-base) 12%, #292b2e) !important;
    border-color: var(--theme-structure-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .16) !important;
}

html[data-remix-look="black-ide"] body .github-signin-demo:hover {
    background: color-mix(in srgb, var(--bg-gradient-base) 17%, #2d3034) !important;
    border-color: color-mix(in srgb, var(--bg-gradient-base) 30%, #74787e) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .18) !important;
    transform: none !important;
}

html[data-remix-look="black-ide"] body :is(
    .form-control,
    .workspace-dropdown,
    .active-file-value,
    .search-input,
    .deployment-id-input,
    .param-input,
    .function-param-input,
    .range-value
) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 12%, var(--theme-field-border)) !important;
    background-color: var(--theme-field-hover-bg) !important;
}

html[data-remix-look="black-ide"] body :is(
    .form-control,
    .workspace-dropdown,
    .search-input,
    .deployment-id-input,
    .param-input,
    .function-param-input
):is(:hover, :focus, :focus-visible):not(:disabled):not(:read-only) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 48%, #8b9198) !important;
    background-color: color-mix(in srgb, var(--bg-gradient-base) 8%, var(--theme-field-hover-bg)) !important;
}

html[data-remix-look="black-ide"] body :is(
    #workspace-select,
    #compile-file-select,
    #deploy-folder-select,
    #solidity-version-select,
    #search-input,
    #smart-contract-access-input
):is(:focus, :focus-visible):not(:disabled) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 52%, #8b9198) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-gradient-base) 18%, transparent) !important;
}

html[data-remix-look="black-ide"] body :is(
    .debug-panel .form-control,
    .settings-panel .form-control,
    .form-control,
    .active-file-value
):is(:read-only, :disabled) {
    border-color: color-mix(in srgb, var(--bg-gradient-base) 9%, #626262) !important;
    background: color-mix(in srgb, var(--bg-gradient-base) 4%, #292929) !important;
}

html[data-remix-look="black-ide"] body :is(
    .debug-tabs,
    .settings-tabs,
    .search-options,
    .terminal-tabs
) {
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body :is(
    .vertical-resizer,
    .horizontal-resizer
) {
    background: var(--theme-structure-resizer) !important;
    border-color: var(--theme-structure-border) !important;
}

/* Working canvases stay near-black with only a barely visible trace of Theme color. */
html[data-remix-look="black-ide"] body :is(
    .remix-editor,
    .editor-content,
    .editor-textarea-wrap,
    .editor-code-wrap,
    .terminal-content,
    .terminal-content-wrap,
    .remix-terminal
) {
    background: var(--demo-editor) !important;
}

/* The owner-approved idle field surface is the former focused surface. Override the
   runtime inline variable once so every select, editable input and read-only field uses
   the same slightly lighter resting tone without chasing selector-specific shorthands. */
html[data-remix-look="black-ide"] {
    --theme-field-bg: var(--theme-field-hover-bg) !important;
}

/* Compile results use the exact same subtly themed near-black canvas as the source editor.
   The terminal selectors above already share this surface; keeping them together here
   makes the working-canvas contract explicit. */
html[data-remix-look="black-ide"] body :is(
    #compilation-result,
    .remix-terminal,
    .terminal-content-wrap,
    .terminal-content
) {
    background: var(--demo-editor) !important;
}

/* The compiled artifact is the inner tier of the Compile result: keep it visibly
   darker than the shared editor/Compile canvas without turning it pure black. */
html[data-remix-look="black-ide"] body #compilation-result .artifact-preview {
    background: color-mix(in srgb, var(--demo-editor) 88%, black 12%) !important;
    border-color: var(--theme-structure-border-soft) !important;
}

html[data-remix-look="black-ide"] body .deploy-console {
    box-shadow: none !important;
}

/* Prompt-style dialogs use one continuous surface. Their header and action strip must
   not look like nested framed panels sitting above and below the input. Keep this final
   so the shared structural-header rule above cannot reintroduce the framed strips. */
html[data-remix-look="black-ide"] body :is(
    .app-modal-content > .app-modal-header,
    .app-modal-content > .app-modal-footer,
    .modal-content > .modal-header,
    .modal-content > .modal-footer
) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-remix-look="black-ide"] body :is(.app-modal-header h2, .modal-header h2) {
    font-style: italic !important;
}

/* Balanced panel hierarchy: the left plugin area retains a restrained Theme tint while
   the nested Workspace, Compile and Console surfaces stay dark without collapsing into
   the editor's near-black canvas. */
html[data-remix-look="black-ide"],
html[data-remix-look="black-ide"] body {
    --scrollbar-thumb: rgba(104, 108, 114, .20) !important;
    --scrollbar-thumb-hover: rgba(132, 137, 144, .34) !important;
    --theme-working-surface: color-mix(in srgb, var(--bg-gradient-base) 6%, #1b1e23);
}

html[data-remix-look="black-ide"] body :is(
    .plugin-content,
    .workspace-section,
    .compiler-config,
    .deploy-config,
    .search-config,
    .debugger-config,
    .settings-config,
    .debug-content,
    .settings-content
) {
    background: var(--theme-structure-panel) !important;
}

html[data-remix-look="black-ide"] body :is(
    .tree-frame,
    .file-explorer-frame,
    .compilation-output,
    #compilation-result,
    .deploy-console,
    .deploy-console-body
) {
    background: var(--theme-working-surface) !important;
}

html[data-remix-look="black-ide"] body :is(
    .remix-editor,
    .editor-content,
    .editor-textarea-wrap,
    .editor-code-wrap,
    .remix-terminal,
    .terminal-content-wrap,
    .terminal-content
) {
    background: var(--demo-editor) !important;
}

html[data-remix-look="black-ide"] body .deploy-console {
    --console-surface: var(--theme-working-surface);
}

html[data-remix-look="black-ide"] body * {
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

html[data-remix-look="black-ide"] body *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html[data-remix-look="black-ide"] body *::-webkit-scrollbar-track {
    background: transparent !important;
}

html[data-remix-look="black-ide"] body *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
    border: 1px solid transparent;
    background-clip: padding-box;
}

html[data-remix-look="black-ide"] body *::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover) !important;
    background-clip: padding-box;
}

html[data-remix-look="black-ide"] body :is(
    #create-file-main-btn,
    #create-folder-main-btn,
    #import-github-repo-btn
) {
    font-size: 12px !important;
    font-style: normal !important;
}

html[data-remix-look="black-ide"] body .app-modal-input-group > label {
    font-style: italic !important;
}

/* The active file tab is a compact version of the Workspace header. Its slightly
   thicker border echoes the Update Notes frame while preserving the tab geometry. */
html[data-remix-look="black-ide"] body .editor-tab.active {
    background: var(--theme-section-header-background) !important;
    border: 2px solid var(--theme-structure-border) !important;
    border-bottom: 0 !important;
    box-sizing: border-box;
}


/* File tabs stay close to the editor chrome. The active tab deliberately exposes the
   tab-strip surface beneath it instead of adding another Theme Color surface. */
html[data-remix-look="black-ide"] body .remix-editor .editor-tab {
    background: color-mix(in srgb, var(--accent-color) 16%, #171a20 84%) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--border-color) 88%, #ffffff 12%) !important;
    color: #fff !important;
}

html[data-remix-look="black-ide"] body .remix-editor .editor-tab.active {
    background: transparent !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--border-color) 82%, #ffffff 18%) !important;
    box-shadow: none !important;
    color: #fff !important;
}

html[data-remix-look="black-ide"] body .remix-editor .editor-tab.active::after {
    background: transparent !important;
}

html[data-remix-look="black-ide"] body .remix-editor .editor-tab:not(.active):hover {
    background: color-mix(in srgb, var(--accent-color) 20%, #171a20 80%) !important;
    background-image: none !important;
}

/* Requested compact labels: both text states share the same button element. */
html[data-remix-look] body :is(
    .compile-button,
    .deploy-button,
    .container-toggle-btn.remix-btn,
    .deploy-read-copy-btn
) {
    font-size: 11px !important;
}