.oj-problem-detail-shell,
.oj-problem-user-panels {
  align-items: flex-start;
}

[data-problem-results] {
  transition: opacity 120ms ease;
}

[data-problem-results][aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-problem-results] {
    transition: none;
  }
}

.oj-problem-title {
  color: var(--oj-heading);
  font-weight: 700 !important;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.oj-problem-tabs {
  border-bottom-color: var(--oj-border);
  gap: 18px;
}

.oj-problem-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--oj-muted);
  font-weight: 500;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.oj-problem-tabs .nav-link:hover,
.oj-problem-tabs .nav-link:focus {
  background: transparent;
  border-bottom-color: var(--oj-border-strong);
  color: var(--oj-heading);
}

.oj-problem-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--oj-primary);
  color: var(--oj-link);
  font-weight: 600;
}

.oj-rich-content {
  color: var(--oj-text);
  line-height: 1.82;
}

.oj-discussion-post {
  border-bottom: 1px solid var(--oj-border-faint);
}

.oj-discussion-post:last-of-type {
  border-bottom: 0;
}

.oj-discussion-comment {
  border-left: 2px solid var(--oj-border);
}

.oj-performance-progress {
  background: var(--oj-primary-soft);
  height: 6px;
}

.oj-performance-progress .progress-bar {
  background: var(--oj-primary);
}

.oj-submission-source textarea {
  background: var(--oj-code-bg);
  border-color: var(--oj-code-border);
  color: var(--oj-code-text);
  overflow-x: auto;
  white-space: pre;
}

.oj-submission-source .CodeMirror {
  border: 1px solid var(--oj-input-border);
  border-radius: var(--oj-control-radius);
  font-family: var(--oj-font-mono);
  font-size: 15px;
  height: var(--oj-editor-height, 300px);
  line-height: 1.55;
}

.oj-submission-source .CodeMirror-scroll {
  min-height: 0;
}

.oj-submission-source .CodeMirror-focused {
  border-color: var(--oj-primary);
  box-shadow: var(--oj-focus);
}

.oj-submission-link:hover {
  color: var(--oj-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
  .oj-problem-tabs {
    overflow-x: auto;
  }
}

/* Text tags and responsive problem browsing. */
.oj-problem-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) auto;
  gap: 16px;
  align-items: end;
}
.oj-problem-filter-grid > * { min-width: 0; }
.oj-problem-filter-grid .oj-filter-actions { display: flex; gap: 8px; }
.oj-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 16px; }
.oj-active-filters a { padding-block: 8px; overflow-wrap: anywhere; max-width: 100%; text-underline-offset: 4px; }
.oj-problem-table tbody td { vertical-align: top; }
.oj-problem-table .oj-text-tags { font-size: 13px; }
.oj-frontend .oj-problem-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.oj-problem-column {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
}
.oj-problem-submit { scroll-margin-top: 88px; }
.oj-frontend .oj-problem-user-panels { display: grid; gap: 16px; margin-top: 0 !important; }
.oj-problem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.oj-problem-identity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oj-problem-meta .oj-text-tags { flex: 0 1 auto; }
.oj-jump-submit { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; text-underline-offset: 4px; }

@media (min-width: 1200px) {
  .oj-frontend .oj-problem-detail-shell.is-columns {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--oj-layout-gap);
  }
  .oj-problem-detail-shell.is-columns .oj-jump-submit { display: none; }
}

@media (max-width: 1199.98px) {
  .oj-problem-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oj-filter-search { grid-column: 1 / -1; }
  .oj-problem-filter-grid .oj-filter-actions { align-self: end; }
  .oj-problem-filter-grid .oj-filter-actions > * { flex: 1; }
  .oj-frontend .oj-problem-table { display: block; min-width: 0; }
  .oj-frontend .oj-problem-table thead { display: none; }
  .oj-frontend .oj-problem-table tbody { display: block; }
  .oj-frontend .oj-problem-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--oj-border);
  }
  .oj-frontend .oj-problem-table td {
    display: block; width: auto; min-width: 0; border: 0; padding: 0;
    text-align: left; overflow-wrap: anywhere;
  }
  .oj-frontend .oj-problem-table td[data-label]::before { display: none; }
  .oj-frontend .oj-problem-table td[data-label="題號"] { grid-row: 1; grid-column: 1; align-self: center; }
  .oj-frontend .oj-problem-table .oj-completion-cell { grid-row: 1; grid-column: 2; align-self: center; }
  .oj-frontend .oj-problem-table .oj-completion-cell:not(.is-complete) { display: none; }
  .oj-frontend .oj-problem-table td[data-label="難度"] { grid-row: 1; grid-column: 3; }
  .oj-frontend .oj-problem-table td[data-label="標題"] { grid-row: 2; grid-column: 1 / -1; padding-block: 4px; font-size: 17px; }
  .oj-frontend .oj-problem-table td[data-label="來源"] { grid-row: 3; grid-column: 1 / -1; }
  .oj-frontend .oj-problem-table td[data-label="標籤"] { grid-row: 4; grid-column: 1 / -1; }
  .oj-frontend .oj-problem-table td[colspan] { grid-column: 1 / -1; }
  .oj-frontend .oj-problem-table .oj-line-clamp-2 { display: block !important; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
}
@media (max-width: 767.98px) {
  .oj-problem-meta .oj-text-tags { flex-basis: 100%; }
  .oj-problem-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .oj-problem-filter-grid .oj-filter-actions { display: flex; }
  .oj-active-filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
}

.oj-problem-filter-grid .oj-filter-actions > .btn { flex: 1 1 0 !important; width: auto; }

/* Reserve the same space before and after the editor is enhanced. */
.oj-frontend .oj-submission-source {
  --oj-editor-height: clamp(300px, 50svh, 640px);
  min-width: 0;
}
.oj-frontend .oj-submission-source textarea {
  height: var(--oj-editor-height, 300px);
  min-height: var(--oj-editor-height, 300px);
  font-size: 16px;
}
.oj-frontend .oj-submission-source .CodeMirror { max-width: 100%; font-size: 16px; }
.oj-frontend .oj-problem-column { gap: var(--oj-layout-gap); }
.oj-frontend .oj-problem-title { font-size: clamp(26px, 1.6vw + 16px, 38px); line-height: 1.3; }
@media (max-width: 1199.98px) {
  .oj-frontend .oj-submission-source { --oj-editor-height: clamp(300px, 50svh, 480px); }
}

/* Workbench: fixed chrome, three independent scroll surfaces, no layout animation. */
.oj-problem-page [hidden] { display: none !important; }
.oj-problem-page .oj-main { padding-block: 12px; }
.oj-problem-page .oj-navbar { backdrop-filter: none; }
.oj-problem-page .oj-navbar > .oj-page { max-width: none; }
.oj-problem-page .oj-user-menu-caption { display: none; }
.oj-problem-page .oj-problem-content, .oj-problem-page .oj-problem-submit { padding: 0; min-width: 0; border-radius: 8px; box-shadow: none; }
.oj-problem-page .oj-problem-submit { background: transparent; border: 0; }
.oj-problem-submit > p, .oj-problem-submit > a { margin: 20px; }
.oj-problem-content { display: flex; flex-direction: column; }
.oj-workspace-heading { padding-bottom: 20px; border-bottom: 1px solid var(--oj-border); margin-bottom: 22px; }
.oj-workspace-title { color: var(--oj-heading); font-size: 24px; line-height: 1.4; overflow-wrap: anywhere; margin: 16px 0 8px; }
.oj-problem-meta { font-size: 12px; }
.oj-problem-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; flex-shrink: 0; padding: 0 16px; background: var(--oj-panel-muted); border-bottom: 1px solid var(--oj-border); border-radius: 8px 8px 0 0; }
.oj-problem-page .oj-problem-tabs { flex-shrink: 0; min-height: 44px; padding: 0; margin: 0 !important; gap: 24px; background: transparent; border: 0; }
.oj-problem-list-return { display: inline-flex; align-items: center; gap: 6px; padding: 12px 2px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--oj-muted); text-decoration: none; white-space: nowrap; }
.oj-problem-list-return svg { width: 18px; height: 18px; flex-shrink: 0; }
.oj-problem-list-return:hover, .oj-problem-list-return:focus-visible { color: var(--oj-text); }
.oj-problem-page .oj-problem-tabs .nav-link { font-size: 13px; line-height: 1.5; padding-block: 12px !important; margin-bottom: 0; }
.oj-statement-scroll { padding: 22px; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.oj-statement-scroll .oj-section-title { font-size: 15px; margin-top: 24px; }
.oj-statement-scroll .tab-pane { transition: none; }
.oj-problem-page .oj-jump-submit { display: none; }
.oj-problem-page #solution-submit-form { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.oj-editor-body { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 180px; border: 1px solid var(--oj-border); border-radius: 8px; background: var(--oj-panel); container-type: inline-size; }
.oj-editor-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 46px; flex-shrink: 0; border-bottom: 1px solid var(--oj-border); border-radius: 8px 8px 0 0; background: var(--oj-panel-muted); }
.oj-code-label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--oj-muted); white-space: nowrap; margin-right: 6px; }
.oj-code-label svg { width: 16px; height: 16px; }
.oj-editor-language { min-width: 0; margin-right: auto; }
.oj-editor-language select { font-size: 12px; width: 100px; max-width: 100%; padding: 5px 24px 5px 8px; min-height: 32px; color: var(--oj-text); background-color: var(--oj-panel); }
.oj-editor-toolbar, .oj-run-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.oj-run-actions { padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--oj-border); }
.oj-icon-button { border: 0; border-radius: 5px; color: var(--oj-muted); background: transparent; padding: 7px; width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; }
.oj-icon-button svg { width: 18px; height: 18px; pointer-events: none; }
.oj-icon-button:hover, .oj-icon-button[aria-expanded="true"], .oj-icon-button[aria-pressed="true"] { background: var(--oj-primary-soft); color: var(--oj-text); }
.oj-icon-button:focus-visible, .oj-editor-tool-menu > summary:focus-visible { outline: 2px solid var(--oj-primary); outline-offset: 2px; }
.oj-icon-button:disabled { opacity: .5; cursor: default; }
.oj-run-button { border: 1px solid var(--oj-border-strong); color: var(--oj-success); }
.oj-submit-button, .oj-submit-button:hover { background: var(--oj-primary); color: var(--oj-primary-contrast, #fff); }
.oj-icon-button[aria-busy="true"] { opacity: .6; }
.oj-tooltip { position: fixed; z-index: 2000; pointer-events: none; max-width: min(280px, calc(100vw - 16px)); padding: 6px 9px; border: 1px solid var(--oj-border-strong); border-radius: 5px; font-size: 12px; color: var(--oj-text); background: var(--oj-panel); box-shadow: 0 3px 10px #0002; }
.oj-editor-tool-menu > summary { list-style: none; }
.oj-editor-tool-menu > summary::-webkit-details-marker { display: none; }
.oj-editor-tool-options { position: absolute; z-index: 12; right: 8px; top: 48px; width: min(310px, calc(100% - 16px)); max-height: min(540px, calc(100vh - 170px)); overflow: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid var(--oj-border-strong); border-radius: 9px; color: var(--oj-text); background: var(--oj-panel); box-shadow: 0 8px 24px #0003; }
.oj-editor-tool-options h3 { font-size: 16px; margin: 0 0 20px; }
.oj-editor-tool-options fieldset { border: 0; border-bottom: 1px solid var(--oj-border); margin: 0 0 16px; padding: 0 0 16px; }
.oj-editor-tool-options legend { float: none; font-size: 12px; color: var(--oj-muted); margin-bottom: 10px; }
.oj-editor-tool-options label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.oj-editor-tool-options select { margin-left: auto; }
.oj-editor-tool-options p { line-height: 1.8; margin-top: 8px; }
.oj-editor-tool-options > details { font-size: 13px; }
.oj-editor-tool-options button, .oj-editor-tool-options select, .oj-editor-search button, .oj-editor-search input[type="text"] { border: 1px solid var(--oj-border); border-radius: 5px; background: var(--oj-panel); color: var(--oj-text); padding: 5px 8px; font: inherit; }
.oj-editor-search { position: absolute; z-index: 11; top: 48px; right: 8px; width: min(430px, calc(100% - 16px)); padding: 12px; background: var(--oj-panel); border: 1px solid var(--oj-border-strong); border-radius: 8px; box-shadow: 0 5px 20px #0002; font-size: 13px; }
.oj-editor-search-row, .oj-editor-search-options { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oj-editor-search-row input { min-width: 80px; flex: 1 1 100px; width: 0; }
.oj-editor-search-options { margin-block: 8px; }
.oj-editor-search-options label { display: inline-flex; gap: 4px; align-items: center; }
.oj-editor-search [data-search-replace-panel] > div { margin-top: 8px; }
.oj-editor-search button:disabled { opacity: .5; }
.oj-problem-page .oj-submission-source { flex: 1; min-width: 0; min-height: 0; }
.oj-problem-page .oj-submission-source textarea { width: 100%; border: 0; border-radius: 0; }
.oj-problem-page .oj-submission-source .CodeMirror { border: 0; border-radius: 0; box-shadow: none; }
.oj-problem-page .cm-s-material-darker.CodeMirror, .oj-problem-page .cm-s-material-darker .CodeMirror-gutters { background: #151d2c; }
.oj-editor-status { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 5px 10px; min-height: 27px; font-size: 10px; color: var(--oj-muted); border-top: 1px solid var(--oj-border); border-radius: 0 0 8px 8px; background: var(--oj-panel-muted); }
.oj-editor-status [data-draft-status] { margin-left: auto; overflow-wrap: anywhere; }
.oj-editor-status .text-danger { flex-basis: 100%; font-size: 12px; }
.oj-editor-body > .text-danger, .oj-editor-body > .errorlist { margin: 0; padding: 6px 10px; }
[data-editor-notice] { position: absolute; z-index: 13; bottom: 32px; left: 8px; right: 8px; padding: 8px 10px; border: 1px solid var(--oj-border); background: var(--oj-panel); border-radius: 6px; font-size: 12px; }
.oj-selection-toolbar { position: absolute; display: flex; z-index: 10; gap: 2px; padding: 4px; border: 1px solid var(--oj-border-strong); border-radius: 7px; background: var(--oj-panel); box-shadow: 0 4px 14px #0003; }
.oj-submission-source .cm-oj-search-match { background: #ffe08a; color: #1b1b1b; }
/* Override bracket decorations even when the editor theme is loaded later. */
.oj-submission-source .CodeMirror span.CodeMirror-matchingbracket,
.oj-submission-source .CodeMirror span.CodeMirror-nonmatchingbracket { background: transparent; outline: none; text-decoration: none; }
.oj-submission-source .CodeMirror span.CodeMirror-matchingbracket { color: var(--oj-text) !important; }
.oj-submission-source .CodeMirror span.CodeMirror-nonmatchingbracket { color: var(--oj-danger) !important; }
.oj-workspace-tabs, .oj-result-tabs { display: flex; gap: 4px; }
.oj-workspace-tabs { margin-bottom: 12px; }
.oj-workspace-tabs button { flex: 1; border: 1px solid var(--oj-border); border-radius: 6px; background: var(--oj-panel); color: var(--oj-text); padding: 8px; }
.oj-workspace-tabs [aria-selected="true"] { border-color: var(--oj-primary); color: var(--oj-primary); }
.oj-workspace-splitter, .oj-editor-splitter { display: flex; align-items: center; justify-content: center; touch-action: none; position: relative; }
.oj-workspace-splitter { cursor: col-resize; align-self: stretch; }
.oj-editor-splitter { cursor: row-resize; height: 12px; }
.oj-workspace-splitter span { width: 3px; height: 34px; background: var(--oj-border-strong); border-radius: 4px; }
.oj-editor-splitter span { width: 42px; height: 3px; background: var(--oj-primary); border-radius: 4px; }
.oj-workspace-splitter:hover span, .oj-workspace-splitter:focus-visible span { background: var(--oj-primary); }
/* Keep the focus indicator on the grip, not the full panel divider. */
.oj-frontend :is(.oj-workspace-splitter, .oj-editor-splitter):focus { outline: none; }
.oj-workspace-splitter:focus-visible span, .oj-editor-splitter:focus-visible span { outline: 2px solid var(--oj-primary); outline-offset: 2px; }
.oj-problem-detail-shell.is-dragging :is(.oj-workspace-splitter, .oj-editor-splitter) span { outline: none; }
.oj-problem-detail-shell.is-dragging { user-select: none; }
.oj-problem-detail-shell.is-dragging .oj-selection-toolbar { visibility: hidden; }
.oj-execution-results { display: flex; flex-direction: column; min-width: 0; min-height: 160px; background: var(--oj-panel); border: 1px solid var(--oj-border); border-radius: 8px; container-type: inline-size; }
.oj-result-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; background: var(--oj-panel-muted); border-bottom: 1px solid var(--oj-border); border-radius: 8px 8px 0 0; flex-shrink: 0; }
.oj-result-tabs { gap: 22px; }
.oj-result-tabs button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--oj-muted); font-size: 12px; }
.oj-result-tabs [aria-selected="true"] { color: var(--oj-text); border-bottom-color: var(--oj-primary); }
.oj-results-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.oj-results-scroll p { margin-bottom: 8px; overflow-wrap: anywhere; }
.oj-result-status { font-weight: 600; font-size: 16px; }
.oj-execution-results [data-tone="success"] { color: var(--oj-success); }
.oj-execution-results [data-tone="warning"] { color: var(--oj-warning); }
.oj-execution-results [data-tone="danger"] { color: var(--oj-danger); }
.oj-execution-results [data-tone="neutral"] { color: var(--oj-muted); }
.oj-case-toolbar { display: flex; flex-direction: column; gap: 10px; margin-block: 10px; }
.oj-case-tabs { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
.oj-case-tabs button { flex-shrink: 0; border: 1px solid var(--oj-border); border-radius: 5px; background: var(--oj-panel-muted); color: var(--oj-text); font-size: 12px; padding: 5px 9px; }
.oj-case-tabs [aria-selected="true"] { border-color: currentColor; background: var(--oj-primary-soft); }
.oj-result-metrics { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; font-size: 12px; }
.oj-case-toolbar .oj-result-metrics { margin: 0; }
.oj-result-metrics > div { display: flex; gap: 6px; }
.oj-result-metrics dt { color: var(--oj-muted); font-weight: 400; }
.oj-result-metrics dd { margin: 0; font-variant-numeric: tabular-nums; }
.oj-output-tools { display: flex; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.oj-whitespace-toggle { display: flex; align-items: center; gap: 6px; }
.oj-output-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oj-output-grid > * { min-width: 0; }
.oj-output-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--oj-muted); margin-bottom: 5px; }
.oj-results-scroll pre { font-size: 13px; margin: 0 0 8px; white-space: pre; padding: 10px; border-radius: 5px; max-width: 100%; max-height: 320px; overflow: auto; tab-size: 4; }
.oj-output-difference { padding: 0; color: var(--oj-danger); background: var(--oj-danger-soft); }
.oj-output-expected-difference { padding: 0; color: var(--oj-success); background: var(--oj-success-soft); }
.oj-execution-help { display: flex; flex-wrap: wrap; gap: 2px 12px; overflow-wrap: anywhere; font-size: 10px; color: var(--oj-muted); margin: 0; padding: 5px 14px 9px; flex-shrink: 0; }
.oj-execution-error { padding: 6px 14px; }
.oj-records-pane .oj-panel { box-shadow: none; border: 0; padding: 0 !important; margin-bottom: 24px; }
@container (max-width: 560px) { .oj-output-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 490px) { .oj-code-label { display: none; } .oj-editor-status { gap: 4px 8px; } }
@media (min-width: 1200px) {
  .oj-problem-page .oj-navbar { padding-block: 4px; min-height: 54px; }
  .oj-problem-page .oj-footer { display: none; }
  .oj-frontend .oj-problem-detail-shell.is-workspace.is-columns { grid-template-columns: minmax(360px, var(--oj-left-track, 50fr)) 12px minmax(360px, var(--oj-right-track, 50fr)); gap: 0; align-items: stretch; height: max(352px, calc(100svh - 90px)); }
  /* Reserve splitter tracks before JS reveals handles; native input also keeps its place. */
  .is-workspace > .oj-problem-submit { grid-column: 3; }
  .is-workspace .oj-problem-content, .is-workspace .oj-problem-submit { min-height: 0; }
  .is-workspace #solution-submit-form { display: grid; grid-template-rows: minmax(180px, var(--oj-editor-track, 60fr)) 12px minmax(160px, var(--oj-result-track, 40fr)); gap: 0; height: 100%; }
  .is-workspace #solution-submit-form > .oj-execution-results { grid-row: 3; }
  .is-workspace .oj-editor-body { min-height: 0; }
  .oj-problem-page .is-workspace .oj-submission-source { --oj-editor-height: 100%; }
  .oj-problem-page .is-workspace .oj-submission-source textarea { min-height: 0; height: 100%; resize: none; }
  .oj-problem-page .is-workspace .oj-submission-source .CodeMirror { height: 100%; }
}
/* Maximize keeps DOM/editor instances and scroll positions intact. */
.oj-problem-detail-shell[data-maximized] { display: block !important; }
.oj-problem-detail-shell[data-maximized] > .oj-problem-content, .oj-problem-detail-shell[data-maximized] > .oj-workspace-splitter { display: none !important; }
.oj-problem-detail-shell[data-maximized] .oj-problem-submit { height: 100%; }
.oj-problem-detail-shell[data-maximized] #solution-submit-form { display: flex; height: 100%; }
.oj-problem-detail-shell[data-maximized] .oj-editor-splitter { display: none !important; }
.oj-problem-detail-shell[data-maximized="editor"] .oj-execution-results, .oj-problem-detail-shell[data-maximized="results"] .oj-editor-body { display: none; }
.oj-problem-detail-shell[data-maximized="editor"] .oj-editor-body, .oj-problem-detail-shell[data-maximized="results"] .oj-execution-results { flex: 1; }
@media (max-width: 1199.98px) {
  .oj-statement-scroll { padding: 16px; }
  .oj-editor-bar { padding-inline: 6px; gap: 3px; flex-wrap: wrap; }
  .oj-code-label { display: none; }
  .oj-editor-language select { width: 88px; }
  .oj-run-actions { padding-left: 5px; }
  .oj-results-scroll { max-height: 420px; }
  .oj-problem-detail-shell[data-maximized] { height: max(500px, calc(100svh - 190px)); }
  .oj-problem-detail-shell[data-maximized] .oj-results-scroll { max-height: none; }
}
@media (pointer: coarse) { .oj-icon-button { min-width: 36px; min-height: 40px; } }
.oj-problem-page .oj-problem-tabs .nav-link.active { color: var(--oj-text); border-bottom-color: var(--oj-primary); }

/* Preview reuses the workbench geometry; its status controls wrap on phones. */
[data-preview-reading] { display: contents; }
.oj-preview-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; }
.oj-preview-status [data-preview-sync] { flex: 1 1 12rem; }