/* ========================================================================== 
   RoDecomp UI shell
   A focused visual/responsive layer. Feature-specific Explorer, Inspector,
   Workbench and 3D rules remain in decompiler.css.
   ========================================================================== */

body.dc-body-shell {
    background: #080b10;
}

.dc {
    --ui-bg: #080b10;
    --ui-panel: #0e131b;
    --ui-panel-raised: #121923;
    --ui-panel-soft: #171f2b;
    --ui-border: rgba(153, 180, 209, 0.13);
    --ui-border-strong: rgba(153, 180, 209, 0.22);
    --ui-text: #edf4fb;
    --ui-muted: #91a0b2;
    --ui-faint: #5e6b7b;
    --ui-blue: #74c7f3;
    --ui-blue-soft: rgba(116, 199, 243, 0.12);
    --ui-green: #59d48a;
    --ui-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
    --ui-radius: 12px;
    --ui-header: 62px;
    background: var(--ui-bg);
    color: var(--ui-text);
}

.dc button,
.dc input,
.dc select,
.dc textarea {
    font: inherit;
}

.dc button:focus-visible,
.dc a:focus-visible,
.dc input:focus-visible,
.dc select:focus-visible,
.dc textarea:focus-visible {
    outline: 2px solid var(--ui-blue);
    outline-offset: 2px;
}

/* Monaco mounts completion widgets in document.body. Keep this selector on
   the page shell (not inside #dc-body) so fixed overflow widgets are styled. */
body.dc-body-shell .suggest-widget {
    z-index: 199900 !important;
    min-width: min(360px, calc(100vw - 24px)) !important;
    border: 1px solid #4f9fca !important;
    border-radius: 9px !important;
    background: #111923 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(116, 199, 243, 0.13) !important;
    overflow: hidden !important;
}

body.dc-body-shell .suggest-widget .tree,
body.dc-body-shell .suggest-widget .monaco-list,
body.dc-body-shell .suggest-widget .monaco-list-rows,
body.dc-body-shell .suggest-widget .suggest-status-bar {
    background: #111923 !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row {
    display: flex !important;
    align-items: center !important;
    color: #dce8f3 !important;
    border-radius: 5px;
}

/* portal.css owns a generic `.main` layout. Monaco also calls the inner part
   of every completion row `.main`; without this scoped reset its 64px padding
   pushes all labels below the 20px row where overflow clips them away. */
body.dc-body-shell .suggest-widget .monaco-list-row > .icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row > .contents {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 20px !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row > .contents > .main {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    gap: 12px !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row .left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row .right {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    padding-right: 8px !important;
    color: #8fa5b9 !important;
}

body.dc-body-shell .suggest-widget .monaco-list-row.focused,
body.dc-body-shell .suggest-widget .monaco-list-row:hover {
    color: #ffffff !important;
    background: #214762 !important;
}

body.dc-body-shell .suggest-widget .monaco-highlighted-label .highlight {
    color: #82d3ff !important;
    font-weight: 700 !important;
}

body.dc-body-shell .suggest-widget .details {
    color: #8fa5b9 !important;
}

body.dc-body-shell .suggest-widget .suggest-status-bar {
    border-top: 1px solid rgba(153, 180, 209, 0.15) !important;
}

/* Hover documentation is also mounted in Monaco's fixed overflow host. Give
   signatures and decompiled symbol help a real panel instead of floating text. */
body.dc-body-shell .monaco-hover {
    z-index: 199910 !important;
    max-width: min(620px, calc(100vw - 24px)) !important;
    border: 1px solid #4f9fca !important;
    border-radius: 9px !important;
    color: #dce8f3 !important;
    background: #111923 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(116, 199, 243, 0.13) !important;
    overflow: hidden !important;
}

body.dc-body-shell .monaco-hover .monaco-hover-content,
body.dc-body-shell .monaco-hover .hover-row,
body.dc-body-shell .monaco-hover .markdown-hover,
body.dc-body-shell .monaco-hover .hover-contents {
    color: #dce8f3 !important;
    background: #111923 !important;
}

body.dc-body-shell .monaco-hover .hover-row:not(:last-child) {
    border-bottom: 1px solid rgba(153, 180, 209, 0.15) !important;
}

body.dc-body-shell .monaco-hover code {
    color: #9edbff !important;
    background: rgba(64, 126, 163, 0.16) !important;
    border-radius: 4px;
}

/* Top command bar --------------------------------------------------------- */
.dc-toolbar {
    height: var(--ui-header);
    min-height: var(--ui-header);
    background: rgba(8, 11, 16, 0.94);
    border-bottom: 1px solid var(--ui-border);
}

.dc-toolbar-shell {
    min-height: var(--ui-header);
    height: var(--ui-header);
    padding: 8px 14px;
    gap: 12px;
    flex-wrap: nowrap;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--ui-panel);
    border-bottom: 0;
}

.dc-brand {
    min-width: max-content;
    gap: 10px;
    margin: 0;
}

.dc .plogo-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(116, 199, 243, 0.16), rgba(116, 199, 243, 0.03));
    border: 1px solid rgba(116, 199, 243, 0.22);
}

.dc .plogo-mark-img {
    width: 34px;
    height: 34px;
}

.dc .plogo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dc .plogo-authsy.brand-name {
    color: var(--ui-text);
    font-size: 15px;
    line-height: 1.05;
    font-weight: 750;
}

.dc .plogo .plogo-product {
    color: var(--ui-muted);
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: 0.025em;
}

.dc-place {
    min-width: 132px;
    max-width: 230px;
    padding: 3px 12px;
    margin: 0;
    border-left: 1px solid var(--ui-border);
}

.dc-place-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-faint);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.dc-place-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-faint);
    box-shadow: 0 0 0 3px rgba(94, 107, 123, 0.12);
}

.dc-file-name {
    color: #dce7f2;
    font: 500 11.5px/1.25 var(--font-mono);
}

.dc-toolbar-actions {
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
}

.dc-toolbar .btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 11.5px;
}

.dc-toolbar-actions .btn {
    border-color: transparent;
    background: transparent;
}

.dc-toolbar-actions .btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dc-toolbar-actions .dc-history-btn[aria-current="page"] {
    color: var(--ui-blue);
    background: var(--ui-blue-soft);
}

.dc-toolbar-actions .btn-primary,
.dc-toolbar-actions .btn-primary:hover {
    color: #061018;
    background: var(--ui-blue);
    box-shadow: none;
}

.dc-cap-btn-ico {
    color: #061018;
    font-size: 8px;
}

.dc-system-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dc-usage,
.dc-engine,
.dc-access {
    min-height: 28px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.dc-usage {
    padding: 3px 8px;
    gap: 6px;
}

.dc-usage-label {
    color: var(--ui-faint);
}

.dc-usage-bar {
    width: 38px;
    height: 4px;
    border: 0;
    background: rgba(255, 255, 255, 0.07);
}

.dc-engine,
.dc-access {
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: var(--ui-muted);
}

.dc-engine::before,
.dc-access::before {
    content: '';
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.dc-engine.ready,
.dc-access.pro {
    color: var(--ui-blue);
}

.dc-access.ok {
    color: var(--ui-green);
}

.dc-launcher-link {
    color: var(--ui-muted) !important;
}

/* Workspace shell -------------------------------------------------------- */
.dc-body {
    grid-template-columns: var(--dc-left, 292px) 4px minmax(360px, 1fr) 4px var(--dc-right, 320px);
    background: var(--ui-bg);
}

.dc-pane {
    background: var(--ui-panel);
}

.dc-explorer,
.dc-inspector {
    border-color: var(--ui-border);
    background: var(--ui-panel);
}

.dc-viewer {
    background: #090d13 !important;
}

.dc-resizer {
    position: relative;
    background: transparent;
}

.dc-resizer::after {
    content: '';
    position: absolute;
    inset: 0 1px;
    background: rgba(153, 180, 209, 0.08);
    transition: background 0.16s ease;
}

.dc-resizer:hover::after,
.dc-resizer.dragging::after {
    background: var(--ui-blue);
}

.dc-pane-head {
    min-height: 64px;
    padding: 10px 12px 9px;
    color: var(--ui-text);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-panel);
}

.dc-pane-title {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}

.dc-pane-kicker {
    grid-column: 1 / -1;
    color: var(--ui-faint);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dc-pane-title strong {
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dc-stats,
.dc-pane-head-hint {
    min-width: 0;
    color: var(--ui-faint);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-pane-tools {
    align-items: center;
}

.dc-icon-btn,
.dc-panel-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--ui-muted);
    font-size: 13px;
    cursor: pointer;
}

.dc-icon-btn:hover,
.dc-panel-trigger:hover {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: rgba(255, 255, 255, 0.055);
}

.dc-panel-close {
    display: none;
}

/* Explorer --------------------------------------------------------------- */
.dc-filter-bar {
    min-height: 49px;
    padding: 8px 10px;
    gap: 7px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-panel);
}

.dc-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.dc-search-wrap svg {
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 50%;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--ui-faint);
    stroke-width: 1.8;
    stroke-linecap: round;
    transform: translateY(-50%);
    pointer-events: none;
}

.dc-search {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 31px;
    border-color: var(--ui-border);
    border-radius: 8px;
    background: #090d13;
    color: var(--ui-text);
    font: 500 11.5px/1 var(--font-ui);
}

.dc-search:focus {
    border-color: rgba(116, 199, 243, 0.58);
    box-shadow: 0 0 0 3px rgba(116, 199, 243, 0.1);
}

.dc-filter-chk {
    height: 32px;
    padding: 0 9px;
    gap: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    color: var(--ui-muted);
    background: rgba(255, 255, 255, 0.025);
}

.dc-filter-chk input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.dc-tree {
    padding: 6px 5px 24px;
    background: var(--ui-panel);
}

.dc-row {
    height: 24px;
    line-height: 24px;
    padding-right: 7px;
    border-radius: 6px;
    color: #a4b1c0;
    font-size: 11.5px;
}

.dc-row:hover {
    color: #e4edf6;
    background: rgba(255, 255, 255, 0.045);
}

.dc-row.selected {
    color: #f4f9fd;
    background: rgba(116, 199, 243, 0.12);
    box-shadow: inset 2px 0 0 var(--ui-blue);
}

.dc-breadcrumb {
    min-height: 30px;
    padding: 7px 10px;
    border-top-color: var(--ui-border);
    background: #0a0f16;
}

/* Editor / Workbench ----------------------------------------------------- */
.dc-editor-head {
    min-height: 64px;
    padding: 0 10px 0 12px;
    align-items: center;
    gap: 10px;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-border);
}

.dc-editor-heading {
    align-self: stretch;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.dc-editor-heading > .dc-pane-kicker {
    padding-left: 3px;
}

.dc-tabs {
    min-height: 29px;
    padding: 0;
    gap: 4px;
    align-items: flex-end;
    background: transparent !important;
}

.dc-tabs:empty::before {
    content: 'Editor';
    padding: 0 3px 5px;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 700;
}

.dc-tab {
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--ui-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.dc-tab:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dc-tab.active {
    color: var(--ui-text);
    border-color: var(--ui-border);
    background: var(--ui-panel-soft);
    box-shadow: none;
}

.dc-editor-modes,
.dc-code-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dc-workbench-open {
    align-self: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid rgba(116, 199, 243, 0.28);
    border-radius: 8px;
    color: #bfeaff;
    background: rgba(116, 199, 243, 0.1);
    font-size: 11.5px;
    font-weight: 650;
}

.dc-workbench-open:hover,
.dc-workbench-open.is-active {
    color: #061018;
    border-color: var(--ui-blue);
    background: var(--ui-blue);
    box-shadow: none;
}

.dc-panel-trigger {
    display: none;
    min-width: auto;
    font-size: 11px;
}

.dc-code-toolbar {
    min-height: 42px;
    padding: 5px 10px 5px 12px;
    border-bottom-color: var(--ui-border);
    background: #0c1118;
}

.dc-code-toolbar .btn {
    height: 29px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 10.5px;
}

.dc-code-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-code-wrap,
.dc-code .monaco-editor,
.dc-code .monaco-editor-background,
.dc-code .margin {
    background: #090d13 !important;
}

.dc-center-3d {
    padding: 14px;
    background: #090d13;
}

.dc-workbench-output-head {
    min-height: 40px;
    border-bottom-color: var(--ui-border);
    background: var(--ui-panel-raised);
}

/* Empty states ----------------------------------------------------------- */
.dc-soft-card {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--ui-panel-raised);
    box-shadow: none;
}

.dc-empty-hero {
    width: auto;
    margin: 14px 8px;
    padding: 22px 18px;
    text-align: left;
    align-items: flex-start;
}

.dc-empty-hero p {
    margin: 0 0 9px;
    color: var(--ui-muted);
    font-size: 12px;
    line-height: 1.55;
}

.dc-empty-hero p strong {
    color: var(--ui-text);
    font-size: 14px;
}

.dc-empty-hero .btn {
    margin-top: 5px;
    border-radius: 8px;
}

.dc-empty-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 15px;
    border: 1px solid rgba(116, 199, 243, 0.24);
    border-radius: 10px;
    color: var(--ui-blue);
    background: var(--ui-blue-soft);
    font: 700 17px/1 var(--font-mono);
}

.dc-empty-foot {
    display: block;
    margin-top: 16px;
    color: var(--ui-faint);
    font-size: 10.5px;
    line-height: 1.4;
}

.dc-viewer-empty {
    width: min(520px, calc(100% - 40px));
    min-height: 250px;
    padding: 34px;
    border-color: var(--ui-border);
    background: linear-gradient(145deg, rgba(116, 199, 243, 0.035), transparent 58%), var(--ui-panel);
}

.dc-viewer-empty .dc-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    font-size: 15px;
}

.dc-viewer-empty-title {
    margin-bottom: 8px;
    color: var(--ui-text);
    font-size: 17px;
}

.dc-viewer-empty .dc-empty-hint {
    max-width: 390px;
    margin: 0 auto;
    color: var(--ui-muted);
    line-height: 1.55;
}

.dc-empty-shortcuts {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    color: var(--ui-faint);
    font-size: 10.5px;
}

.dc-empty-shortcuts span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dc-empty-shortcuts kbd {
    min-width: 22px;
    padding: 3px 5px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 5px;
    color: var(--ui-muted);
    background: rgba(255, 255, 255, 0.035);
    font: 500 9px/1 var(--font-mono);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Inspector -------------------------------------------------------------- */
.dc-inspect {
    padding: 10px 9px 22px;
}

.dc-insp-stack {
    gap: 8px;
}

.dc-insp-card,
.dc-insp-empty.dc-soft-card {
    border-color: var(--ui-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.022);
    box-shadow: none;
}

.dc-insp-empty.dc-soft-card {
    margin: 4px 0;
    padding: 26px 18px;
}

.dc-insp-card-h {
    color: var(--ui-muted);
    font-size: 10px;
}

.dc-inspector input,
.dc-inspector select,
.dc-inspector textarea {
    border-color: var(--ui-border);
    background: #090d13;
}

/* History, dialogs and status ------------------------------------------- */
.dc-history-view {
    background: var(--ui-bg);
}

.dc-history-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 26px 24px 34px;
}

.dc-history-head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ui-border);
}

.dc-history-title {
    color: var(--ui-text);
}

.dc-history-sub {
    color: var(--ui-muted);
}

.dc dialog,
dialog.dc-cap-dialog,
dialog.modal {
    border: 1px solid var(--ui-border-strong);
    border-radius: 16px;
    background: var(--ui-panel);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow);
}

.dc-status {
    min-height: 28px;
    padding: 5px 12px;
    border-top-color: var(--ui-border);
    background: #080b10;
    color: var(--ui-faint);
    font-size: 10.5px;
}

.dc-status-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.dc-status-main i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ui-green);
    box-shadow: 0 0 0 3px rgba(89, 212, 138, 0.1);
}

.dc-mobile-dock,
.dc-panel-backdrop {
    display: none;
}

.dc-panel-backdrop[hidden] {
    display: none !important;
}

/* Workbench keeps the Explorer and gives the editor all remaining room. */
.dc-body.is-workbench-page {
    grid-template-columns: var(--dc-left, 292px) 4px minmax(360px, 1fr);
}

/* Tablet: Inspector becomes a deliberate overlay instead of disappearing. */
@media (max-width: 1180px) {
    .dc-body,
    .dc-body.is-workbench-page {
        grid-template-columns: var(--dc-left, 280px) 4px minmax(0, 1fr);
    }

    .dc-inspector {
        position: fixed;
        z-index: 92;
        top: var(--ui-header);
        right: 0;
        bottom: 28px;
        display: flex !important;
        width: min(360px, 88vw);
        border-left: 1px solid var(--ui-border-strong);
        box-shadow: var(--ui-shadow);
        transform: translateX(102%);
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dc-body.is-inspector-open .dc-inspector {
        transform: translateX(0);
    }

    .dc-resizer[data-resize="right"] {
        display: none;
    }

    .dc-panel-trigger,
    #dc-close-inspector {
        display: inline-flex;
    }

    .dc-system-strip .dc-usage-bar,
    .dc-system-strip .dc-usage-label {
        display: none;
    }

    .dc-panel-backdrop {
        position: fixed;
        z-index: 88;
        inset: var(--ui-header) 0 28px;
        border: 0;
        background: rgba(2, 5, 9, 0.62);
        backdrop-filter: blur(2px);
    }

    .dc-body.has-panel-open + .dc-panel-backdrop {
        display: block;
    }
}

@media (max-width: 1100px) {
    .dc-usage {
        display: none;
    }
}

@media (max-width: 900px) {
    .dc-place,
    .dc-launcher-link,
    .dc-usage {
        display: none;
    }

    .dc-toolbar-shell {
        flex-wrap: nowrap;
    }

    .dc-system-strip {
        margin-left: auto;
    }
}

/* Phone: side panes are drawers; editor never collapses below usable width. */
@media (max-width: 760px) {
    .dc {
        --ui-header: 58px;
    }

    .dc-toolbar-shell {
        padding: 7px 9px;
        gap: 8px;
    }

    .dc .plogo-mark {
        width: 34px;
        height: 34px;
    }

    .dc .plogo-mark-img {
        width: 30px;
        height: 30px;
    }

    .dc .plogo .plogo-product,
    .dc-system-strip {
        display: none;
    }

    .dc-toolbar-actions {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .dc-toolbar-actions .btn-primary {
        height: 34px;
        padding: 0 11px;
    }

    .dc-body,
    .dc-body.is-workbench-page {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .dc-viewer {
        grid-column: 1;
        min-width: 0;
    }

    .dc-resizer {
        display: none !important;
    }

    .dc-explorer,
    .dc-inspector,
    .dc-body.is-workbench-page > .dc-explorer,
    .dc-body.is-workbench-page > .dc-inspector {
        position: fixed;
        z-index: 92;
        top: var(--ui-header);
        bottom: 82px;
        display: flex !important;
        width: min(340px, 90vw);
        max-width: none;
        border: 1px solid var(--ui-border-strong);
        background: var(--ui-panel);
        box-shadow: var(--ui-shadow);
        transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #dc-close-explorer {
        display: inline-flex;
    }

    .dc-explorer {
        left: 0;
        border-left: 0;
        border-radius: 0 14px 14px 0;
        transform: translateX(-102%);
    }

    .dc-inspector {
        right: 0;
        border-right: 0;
        border-radius: 14px 0 0 14px;
        transform: translateX(102%);
    }

    .dc-body.is-explorer-open .dc-explorer {
        transform: translateX(0);
    }

    .dc-body.is-inspector-open .dc-inspector {
        transform: translateX(0);
    }

    .dc-panel-backdrop,
    .dc-body.has-panel-open + .dc-panel-backdrop {
        inset: var(--ui-header) 0 82px;
    }

    .dc-editor-head {
        min-height: 54px;
        padding: 0 8px 0 10px;
    }

    .dc-editor-heading > .dc-pane-kicker {
        display: none;
    }

    .dc-editor-heading {
        gap: 0;
    }

    .dc-tabs {
        min-height: 34px;
        align-items: center;
    }

    .dc-editor-modes {
        gap: 4px;
    }

    .dc-panel-trigger {
        display: none;
    }

    .dc-workbench-open {
        width: 36px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        color: transparent;
        gap: 0;
    }

    .dc-workbench-open span {
        color: #bfeaff;
        font-size: 14px;
    }

    .dc-workbench-open::before {
        content: '{ }';
        color: #bfeaff;
        font: 700 11px/1 var(--font-mono);
    }

    .dc-workbench-open span {
        display: none;
    }

    .dc-workbench-open:hover::before,
    .dc-workbench-open.is-active::before {
        color: #061018;
    }

    .dc-code-toolbar {
        min-height: 46px;
        padding: 5px 7px 5px 9px;
    }

    .dc-code-meta {
        max-width: 40vw;
    }

    .dc-code-actions {
        gap: 4px;
    }

    .dc-code-toolbar .btn {
        padding: 0 8px;
    }

    .dc-center-3d {
        padding: 8px;
    }

    .dc-viewer-empty {
        width: calc(100% - 24px);
        min-height: 230px;
        padding: 26px 18px;
    }

    .dc-viewer-empty-title {
        font-size: 15px;
    }

    .dc-empty-shortcuts {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .dc-mobile-dock {
        flex: none;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        min-height: 54px;
        padding: 5px 7px;
        gap: 4px;
        border-top: 1px solid var(--ui-border);
        background: var(--ui-panel);
    }

    .dc-mobile-dock button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 8px;
        color: var(--ui-faint);
        background: transparent;
        font-size: 10.5px;
        font-weight: 650;
        cursor: pointer;
    }

    .dc-mobile-dock button span {
        font-family: var(--font-mono);
        font-size: 12px;
    }

    .dc-mobile-dock button.is-active {
        color: var(--ui-blue);
        background: var(--ui-blue-soft);
    }

    .dc-status {
        min-height: 24px;
        padding: 4px 9px;
    }

    .dc-status-right {
        display: none;
    }

    .dc.history-open .dc-mobile-dock {
        display: none;
    }

    .dc-history-inner {
        padding: 18px 14px 26px;
    }

    .dc-history-head {
        align-items: flex-start;
        gap: 12px;
    }

    .dc-history-title {
        font-size: 20px;
    }

    .dc-history-sub {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .dc .plogo-text {
        display: none;
    }

    .dc-toolbar-actions .btn-primary {
        font-size: 11px;
    }

    .dc-code-toolbar .dc-source-action:first-child,
    .dc-code-toolbar .dc-workbench-action#dc-generate-setup {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-explorer,
    .dc-inspector,
    .dc * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}