.custom-content-view { min-height: calc(100vh - 72px); padding: 44px max(22px, calc((100vw - 1380px) / 2)) 76px; }
.custom-content-shell { display: grid; grid-template-columns: 240px minmax(0, 820px); justify-content: center; gap: 28px; align-items: start; }
.custom-content-navigation { position: sticky; top: 106px; max-height: calc(100vh - 128px); overflow-y: auto; padding: 20px 15px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.custom-directory-heading { padding: 0 5px 12px; }
.custom-directory-heading .eyebrow { margin-bottom: 6px; }
.custom-directory-heading h2 { margin: 0; font-size: 19px; }
.custom-content-navigation section { margin-top: 16px; }
.custom-content-navigation h3 { margin: 0 5px 7px; color: var(--muted); font-size: 11px; }
.custom-content-navigation button { width: 100%; display: block; padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: var(--surface); cursor: pointer; text-align: left; }
.custom-content-navigation button:hover { color: var(--text); box-shadow: var(--convex-small); }
.custom-content-navigation button.active { color: var(--violet); box-shadow: var(--concave); }
.custom-content-page { min-width: 0; padding: 36px 42px; border-radius: var(--radius); box-shadow: var(--convex); }
.custom-content-page > header { padding-bottom: 24px; margin-bottom: 28px; box-shadow: 0 8px 12px -13px var(--shadow-dark); }
.custom-content-page h1 { margin-bottom: 12px; font-size: 34px; }
.custom-page-summary, .custom-paragraph { color: var(--muted); line-height: 1.85; }
.custom-components { display: grid; gap: 20px; }
.custom-heading { margin: 14px 0 0; font-size: 22px; }
.custom-list { margin: 0; padding-left: 24px; color: var(--muted); line-height: 1.85; }
.custom-notice { padding: 17px 19px; border-left: 4px solid var(--violet); border-radius: 0 var(--radius-small) var(--radius-small) 0; box-shadow: var(--convex-small); }
.custom-notice strong { display: block; margin-bottom: 6px; }
.custom-notice p { margin: 0; color: var(--muted); line-height: 1.75; }
.custom-notice.tone-success { border-color: var(--success); }
.custom-notice.tone-warning { border-color: var(--amber); }
.custom-notice.tone-accent { border-color: var(--coral); }
.custom-image { margin: 0; }
.custom-image img { display: block; max-width: 100%; border-radius: var(--radius-small); box-shadow: var(--convex-small); }
.custom-image figcaption, .custom-code figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; }
.custom-button-row { margin: 0; }
.custom-code { margin: 0; }
.custom-code pre { overflow-x: auto; margin: 0; padding: 18px; border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--concave); }
.custom-code pre code { padding: 0; white-space: pre; box-shadow: none; }
.custom-quote { margin: 0; padding: 5px 0 5px 19px; border-left: 4px solid var(--teal); color: var(--muted); }
.custom-quote p { margin: 0; line-height: 1.85; }
.custom-quote cite { display: block; margin-top: 8px; color: var(--faint); font-size: 12px; }
.custom-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.custom-facts div { padding: 15px; border-radius: var(--radius-small); box-shadow: var(--concave); }
.custom-facts dt { color: var(--muted); font-size: 11px; }
.custom-facts dd { margin: 5px 0 0; font-weight: 700; }
.custom-divider { width: 100%; border: 0; border-top: 1px solid rgba(112, 121, 138, .22); }
.custom-content-empty { padding: 45px 0; color: var(--muted); text-align: center; }

.content-manager-heading { align-items: flex-end; }
.content-manager-actions { display: flex; gap: 10px; }
.content-editor-status { min-height: 21px; margin: -10px 0 18px; color: var(--success); font-size: 12px; }
.content-studio { display: grid; grid-template-columns: 210px 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.studio-panel, .studio-editor, .studio-welcome { min-width: 0; padding: 18px; border-radius: var(--radius); box-shadow: var(--convex-small); }
.studio-panel > header, .studio-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.studio-panel h3, .studio-editor h3, .studio-welcome h3 { margin: 0; font-size: 16px; }
.studio-icon-button { width: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 9px; color: var(--violet); background: var(--surface); box-shadow: var(--convex-small); cursor: pointer; }
.studio-list, .studio-groups, .component-list { display: grid; gap: 9px; }
.studio-list-row, .studio-page-row { display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 9px; }
.studio-list-row.active, .studio-page-row.active, .studio-group.active { box-shadow: var(--concave); }
.studio-select, .studio-page-row > button { min-width: 0; flex: 1; padding: 6px; border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.studio-select strong, .studio-select small { display: block; overflow-wrap: anywhere; }
.studio-select small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.studio-row-actions, .studio-page-row > span, .studio-group-heading > span { display: flex; gap: 3px; }
.studio-row-actions button, .studio-page-row > span button, .studio-group-heading > span button, .component-editor header button { width: 25px; min-height: 25px; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; }
.studio-row-actions button:hover, .studio-page-row > span button:hover, .studio-group-heading > span button:hover, .component-editor header button:hover { color: var(--violet); box-shadow: var(--convex-small); }
.studio-settings, .studio-page-fields, .component-fields { display: grid; gap: 12px; }
.studio-settings { margin-bottom: 16px; }
.studio-settings small { color: var(--faint); font: 10px Consolas, monospace; overflow-wrap: anywhere; }
.studio-check { display: flex; grid-template-columns: none; align-items: center; gap: 8px; }
.studio-check input { width: 16px; min-height: 16px; box-shadow: none; }
.studio-check span { color: var(--muted); font-size: 11px; }
.studio-group { padding: 10px; border-radius: 10px; }
.studio-group-heading { display: flex; align-items: center; gap: 7px; }
.studio-group-heading input { min-height: 34px; padding: 7px 9px; font-size: 11px; }
.studio-pages { display: grid; gap: 4px; margin: 7px 0; padding-left: 8px; }
.studio-page-row > button { color: var(--muted); font-size: 11px; }
.studio-page-row > button span, .studio-page-row > button small { display: block; }
.studio-page-row > button small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.studio-page-row.active > button { color: var(--violet); }
.studio-add-page { width: 100%; padding: 7px; border: 0; border-radius: 7px; color: var(--violet); background: transparent; cursor: pointer; font-size: 11px; text-align: left; }
.studio-add-page:hover { box-shadow: var(--convex-small); }
.draft-state { color: var(--amber); font-size: 11px; }
.component-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0; }
.component-toolbar strong { width: 100%; color: var(--muted); font-size: 11px; }
.component-toolbar button { padding: 7px 9px; border: 0; border-radius: 8px; color: var(--muted); background: var(--surface); box-shadow: var(--convex-small); cursor: pointer; font-size: 11px; }
.component-toolbar button:active { box-shadow: var(--concave); }
.component-editor { padding: 13px; border-radius: 10px; box-shadow: var(--concave); }
.component-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.component-editor > header strong { font-size: 12px; }
.component-editor .wide { grid-column: 1 / -1; }
.studio-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.studio-welcome { grid-column: 1 / -1; color: var(--muted); }
.studio-welcome p { margin: 8px 0 0; line-height: 1.7; }

@media (max-width: 1120px) {
  .custom-content-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .content-studio { grid-template-columns: 190px 270px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .custom-content-shell { grid-template-columns: 1fr; }
  .custom-content-navigation { position: static; max-height: none; }
  .content-studio { grid-template-columns: 1fr 1fr; }
  .studio-editor { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .custom-content-view { padding-inline: 15px; }
  .custom-content-page { padding: 27px 21px; }
  .custom-content-page h1 { font-size: 29px; }
  .custom-facts, .content-studio { grid-template-columns: 1fr; }
  .studio-editor { grid-column: auto; }
  .content-manager-heading { align-items: stretch; }
  .content-manager-actions { justify-content: flex-start; }
}