:root {
  --studio-night: #102b3a;
  --studio-night-soft: #1a3b49;
  --studio-paper: #f4f7f2;
  --studio-paper-deep: #e4ece6;
  --studio-ink: #13272f;
  --studio-muted: #4f6569;
  --studio-line: #b5c6be;
  --studio-teal: #006b73;
  --studio-teal-dark: #00545b;
  --studio-coral: #d85f45;
  --studio-amber: #ffca4b;
}

* { box-sizing: border-box; }

.studio-body {
  margin: 0;
  min-width: 0;
  color: var(--studio-ink);
  background: var(--studio-night);
  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.studio-body :focus-visible { outline: 3px solid var(--studio-amber); outline-offset: 2px; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 12px;
  padding: 9px 12px;
  color: var(--studio-night);
  background: var(--studio-amber);
  border-radius: 8px;
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.studio-header {
  min-height: 78px;
  padding: 14px 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.studio-brand { color: white; font: 500 24px/1 Onest, system-ui, sans-serif; text-decoration: none; }
.studio-brand span { color: #c3e7e1; }
.studio-header p, .studio-current span, .studio-current small { margin: 5px 0 0; color: #b8cad0; }
.studio-current { text-align: right; display: grid; gap: 2px; }
.studio-current strong { font: 500 16px/1.2 Onest, system-ui, sans-serif; }
.studio-mode-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; }
.studio-mode-switch a { min-height: 44px; display: grid; place-items: center; padding: 7px 12px; color: #b8cad0; border-radius: 8px; text-decoration: none; }
.studio-mode-switch a[aria-current="page"] { color: var(--studio-night); background: #c3e7e1; }
.studio-mode-switch form { margin: 0; display: flex; }
.studio-mode-switch button { min-height: 44px; padding: 7px 12px; color: #b8cad0; background: transparent; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.studio-mode-switch button:hover { color: white; background: rgba(255,255,255,.07); }

.studio-login-body { min-height: 100vh; }
.studio-login-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: linear-gradient(145deg, var(--studio-night) 0 54%, var(--studio-night-soft) 54% 100%); }
.studio-login-panel { width: min(100%, 460px); padding: clamp(28px, 6vw, 48px); color: var(--studio-ink); background: var(--studio-paper); border-radius: 16px; box-shadow: 0 24px 64px rgba(3, 20, 29, .32); }
.studio-login-panel .studio-brand { display: inline-block; color: var(--studio-night); }
.studio-login-panel .studio-brand span { color: var(--studio-teal-dark); }
.studio-login-copy { margin: 52px 0 28px; }
.studio-login-copy h1 { margin: 0; font: 500 clamp(32px, 7vw, 46px)/1.04 Onest, system-ui, sans-serif; letter-spacing: -.03em; }
.studio-login-copy p, .studio-login-note { max-width: 58ch; color: var(--studio-muted); }
.studio-login-form { display: grid; gap: 9px; }
.studio-login-form label { font-weight: 600; }
.studio-login-form input { width: 100%; min-height: 48px; padding: 11px 12px; color: var(--studio-ink); background: white; border: 1px solid var(--studio-line); border-radius: 10px; font: inherit; }
.studio-login-form .studio-button { margin-top: 5px; }
.studio-login-error { margin-bottom: 16px; padding: 11px 12px; color: #6d2113; background: #f7d8d0; border-radius: 10px; }
.studio-login-note { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--studio-line); font-size: 12px; }

.studio-grid {
  height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: minmax(500px, 1.45fr) minmax(235px, .62fr) minmax(380px, 1fr);
  background: var(--studio-paper);
}

.studio-preview-panel, .studio-navigator, .studio-editor-panel { min-width: 0; overflow: auto; }
.studio-preview-panel { padding: 22px; background: var(--studio-paper); }
.studio-navigator { padding: 18px 14px; color: white; background: var(--studio-night-soft); border-left: 1px solid var(--studio-night); }
.studio-editor-panel { padding: 18px; background: var(--studio-paper-deep); border-left: 1px solid var(--studio-line); }

.studio-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.studio-panel-heading--compact { margin-bottom: 14px; }
.studio-panel-heading h1, .studio-panel-heading h2, .studio-readonly-editor h2 {
  margin: 2px 0 0;
  font: 500 28px/1.08 Onest, system-ui, sans-serif;
  letter-spacing: -.025em;
}
.studio-navigator .studio-panel-heading h2 { color: white; }
.studio-eyebrow { color: var(--studio-teal-dark); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.studio-navigator .studio-eyebrow { color: #c3e7e1; }

.studio-preview {
  min-height: calc(100% - 54px);
  padding: clamp(24px, 3.6vw, 54px);
  background: white;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(16, 43, 58, .1);
}
.studio-rendered-content { margin: 0 auto; max-width: 760px; }
.studio-rendered-header { margin-bottom: 34px; }
.studio-rendered-header span { color: var(--studio-teal-dark); font-weight: 600; }
.studio-rendered-header h2 { margin: 6px 0 0; font: 500 clamp(34px, 4vw, 58px)/1.02 Onest, system-ui, sans-serif; letter-spacing: -.03em; }

.studio-tree-module + .studio-tree-module { margin-top: 26px; }
.studio-tree-module h3 { margin: 0 4px 12px; font: 500 16px/1.25 Onest, system-ui, sans-serif; }
.studio-tree-block { margin-top: 14px; }
.studio-tree-block-title { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 7px; color: #b8cad0; font-size: 12px; }
.studio-tree-block-title a { color: #c3e7e1; text-decoration: none; font-size: 16px; }
.studio-tree-block ol { list-style: none; padding: 0; margin: 0; }
.studio-tree-link { min-height: 44px; padding: 7px 8px; display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; color: white; text-decoration: none; border-left: 2px solid transparent; }
.studio-tree-link:hover { background: rgba(255,255,255,.07); }
.studio-tree-link.is-current { color: white; background: rgba(195, 231, 225, .13); border-left-color: #c3e7e1; }
.studio-tree-link--readonly { color: #b8cad0; }
.studio-tree-link > span { color: #90aab2; font-size: 11px; }
.studio-tree-link small { color: #90aab2; font-size: 10px; }
.studio-export-link { display: inline-block; margin: 14px 4px 0; color: #c3e7e1; }

.studio-editor-panel label { display: block; margin: 14px 0 6px; color: var(--studio-muted); font-size: 12px; font-weight: 600; }
.studio-editor-panel input, .studio-editor-panel textarea {
  width: 100%;
  min-height: 44px;
  color: var(--studio-ink);
  background: white;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
}
.studio-editor-panel textarea[name="markup"] {
  height: min(46vh, 620px);
  resize: vertical;
  tab-size: 2;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.studio-actions { display: flex; gap: 8px; margin-top: 12px; }
.studio-button {
  min-height: 44px;
  padding: 9px 14px;
  color: white;
  background: var(--studio-teal-dark);
  border: 1px solid var(--studio-teal-dark);
  border-radius: 10px;
  font: 500 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.studio-button:hover { background: var(--studio-night); border-color: var(--studio-night); }
.studio-button--secondary { color: var(--studio-ink); background: transparent; border-color: var(--studio-line); }
.studio-button--secondary:hover { color: white; }

.studio-section { margin-top: 18px; border-top: 1px solid var(--studio-line); padding-top: 14px; }
.studio-section > summary { cursor: pointer; font: 500 16px/1.3 Onest, system-ui, sans-serif; }
.studio-history { list-style: none; margin: 12px 0 0; padding: 0; }
.studio-history li { padding: 11px 0; border-top: 1px solid rgba(79,101,105,.2); }
.studio-history li.is-current { padding-left: 9px; background: rgba(0, 107, 115, .08); }
.studio-history li > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.studio-history span, .studio-history small { color: var(--studio-muted); font-size: 11px; }
.studio-history p { margin: 5px 0; }
.studio-history-actions { display: flex; gap: 10px; align-items: center; }
.studio-history-actions form { margin: 0; }
.studio-history-actions button, .studio-history-actions a { padding: 0; color: var(--studio-teal-dark); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.studio-bundle-source { height: 180px; font: 12px/1.45 ui-monospace, monospace !important; }
.studio-action-result { display: block; margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--studio-teal-dark); }
.studio-action-result a { color: var(--studio-teal-dark); font-weight: 600; }
.studio-action-result img { display: block; width: min(100%, 260px); margin-top: 9px; border: 1px solid var(--studio-line); border-radius: 8px; }

.studio-notice, .studio-error { margin: 0; padding: 11px 24px; }
.studio-notice { color: #083f43; background: #c3e7e1; }
.studio-error { color: #6d2113; background: #f7d8d0; }
.studio-preview .studio-error { border-radius: 10px; }
.studio-lock { color: var(--studio-coral); font-weight: 700; }
.studio-readonly-card h2 { font: 500 36px/1.05 Onest, system-ui, sans-serif; }
.studio-readonly-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; border-top: 1px solid var(--studio-line); padding-top: 14px; }
.studio-readonly-card dt { color: var(--studio-muted); }
.studio-readonly-card dd { margin: 0; text-align: right; font-weight: 600; }
.studio-muted { color: var(--studio-muted); }

@media (max-width: 1350px) {
  .studio-grid { grid-template-columns: minmax(500px, 1.25fr) 230px 390px; }
}

.studio-structure { min-height: calc(100vh - 78px); padding: clamp(20px, 3vw, 44px); background: var(--studio-paper); }
.studio-structure-heading { max-width: 1480px; margin: 0 auto 26px; display: flex; justify-content: space-between; gap: 28px; align-items: end; }
.studio-structure-heading h1 { margin: 0; font: 500 clamp(32px, 4vw, 54px)/1.02 Onest, system-ui, sans-serif; letter-spacing: -.03em; }
.studio-structure-heading p { max-width: 66ch; margin: 8px 0 0; color: var(--studio-muted); }
.studio-bulk-import, .studio-structure-module { max-width: 1480px; margin: 0 auto 24px; background: white; border: 1px solid var(--studio-line); border-radius: 16px; overflow: hidden; }
.studio-bulk-import { padding: clamp(18px, 2.5vw, 30px); display: grid; grid-template-columns: minmax(240px, .65fr) minmax(420px, 1.35fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.studio-bulk-import h2 { margin: 4px 0 8px; font: 500 clamp(24px, 2.5vw, 36px)/1.08 Onest, system-ui, sans-serif; letter-spacing: -.025em; }
.studio-bulk-import p { max-width: 48ch; margin: 0; color: var(--studio-muted); }
.studio-bulk-import label, .studio-snapshot-panel label { display: grid; gap: 6px; margin: 10px 0; color: var(--studio-muted); font-weight: 600; }
.studio-bulk-import input, .studio-bulk-import textarea, .studio-snapshot-panel input { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--studio-line); border-radius: 8px; font: inherit; }
.studio-bulk-import textarea { min-height: 240px; font: 12px/1.45 ui-monospace, monospace; }
.studio-structure-module.is-archived, .studio-structure-block.is-archived { opacity: .68; }
.studio-structure-row { min-height: 62px; padding: 12px 16px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-bottom: 1px solid var(--studio-line); }
.studio-structure-row--module { color: white; background: var(--studio-night-soft); border-bottom-color: rgba(255,255,255,.14); }
.studio-structure-row > div:first-child { display: grid; gap: 2px; }
.studio-structure-row small, .studio-structure-steps small { color: var(--studio-muted); }
.studio-structure-row--module small { color: #b8cad0; }
.studio-structure-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.studio-structure-actions form { display: flex; margin: 0; }
.studio-structure-actions button, .studio-structure-actions a, .studio-snapshot-history button { min-width: 44px; min-height: 44px; padding: 7px 10px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; cursor: pointer; text-decoration: none; }
.studio-structure-actions .studio-danger { color: var(--reasoning-coral-dark, #963d2a); }
.studio-title-form input { min-width: 190px; padding: 8px 9px; border: 1px solid var(--studio-line); border-radius: 8px 0 0 8px; }
.studio-title-form button { border-radius: 0 8px 8px 0; }
.studio-structure-blocks { padding: 12px; display: grid; gap: 12px; }
.studio-structure-block { border: 1px solid var(--studio-line); border-radius: 12px; overflow: hidden; }
.studio-structure-steps { margin: 0; padding: 0; list-style: none; }
.studio-structure-steps li { min-height: 54px; padding: 8px 14px; display: grid; grid-template-columns: 28px minmax(180px, 1fr) auto; gap: 10px; align-items: center; border-top: 1px solid rgba(79,101,105,.18); }
.studio-structure-steps li.is-readonly { color: var(--studio-muted); background: var(--studio-paper); }
.studio-structure-steps li.is-archived { color: var(--studio-muted); background: #eef2ed; }
.studio-structure-steps li > div:nth-child(2) { display: grid; }
.studio-step-position { color: var(--studio-muted); font-variant-numeric: tabular-nums; }
.studio-readonly-label { justify-self: end; color: var(--studio-coral); font-weight: 600; }
.studio-archived-label { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 10px; color: var(--studio-muted); border: 1px dashed var(--studio-line); border-radius: 8px; font-weight: 600; }
.studio-inline-create { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; }
.studio-inline-create label { display: grid; gap: 5px; color: var(--studio-muted); font-size: 12px; }
.studio-inline-create input { min-height: 44px; padding: 9px 10px; border: 1px solid var(--studio-line); border-radius: 8px; font: inherit; }
.studio-structure-block > .studio-inline-create { padding: 12px 14px; background: var(--studio-paper); }
.studio-create-block { padding: 4px 14px 16px; }
.studio-structure-tools { border-top: 1px solid var(--studio-line); padding: 16px; }
.studio-structure-tools > summary { cursor: pointer; font: 500 18px/1.3 Onest, system-ui, sans-serif; }
.studio-tool-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 24px; }
.studio-snapshot-panel { margin-top: 16px; }
.studio-tool-grid label { display: grid; gap: 6px; margin: 10px 0; color: var(--studio-muted); font-weight: 600; }
.studio-tool-grid input, .studio-tool-grid textarea { width: 100%; padding: 10px; border: 1px solid var(--studio-line); border-radius: 8px; font: inherit; }
.studio-tool-grid textarea { min-height: 220px; font: 12px/1.45 ui-monospace, monospace; }
.studio-confirm-line { grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.studio-confirm-line input { width: auto; }
.studio-snapshot-history { margin: 14px 0 0; padding: 0; list-style: none; }
.studio-snapshot-history li { padding: 12px 0; border-top: 1px solid var(--studio-line); }
.studio-snapshot-history li > div { display: flex; justify-content: space-between; gap: 12px; }
.studio-snapshot-history p { margin: 4px 0 9px; }
.studio-snapshot-history form { display: grid; grid-template-columns: 1fr 130px auto; gap: 6px; }
.studio-body input::placeholder, .studio-body textarea::placeholder { color: #64787b; }
.studio-body ::selection { color: white; background: var(--studio-teal); }

@media (max-width: 1080px) {
  .studio-grid { height: auto; grid-template-columns: minmax(0, 1fr) 290px; }
  .studio-editor-panel { grid-column: 1 / -1; }
  .studio-structure-heading, .studio-bulk-import, .studio-tool-grid { grid-template-columns: 1fr; display: grid; align-items: start; }
}

@media (max-width: 720px) {
  .studio-header { align-items: flex-start; flex-wrap: wrap; }
  .studio-current { order: 3; width: 100%; text-align: left; }
  .studio-grid { display: flex; flex-direction: column; }
  .studio-navigator { order: -1; max-height: 48vh; }
  .studio-preview-panel, .studio-editor-panel, .studio-structure { padding: 16px; }
  .studio-structure-row, .studio-structure-steps li { align-items: stretch; grid-template-columns: 24px 1fr; display: grid; }
  .studio-structure-row > .studio-structure-actions, .studio-structure-steps .studio-structure-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .studio-structure-steps .studio-readonly-label { grid-column: 1 / -1; justify-self: start; }
  .studio-title-form { width: 100%; }
  .studio-title-form input { min-width: 0; flex: 1; }
  .studio-snapshot-history form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}