body { background:#f3f5fa; }
.editor-topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 22px; border-bottom:1px solid #dbe2ef; background:#fff; }
.editor-brand,.editor-top-actions { display:flex; align-items:center; gap:12px; }
.editor-brand > a { padding-right:12px; border-right:1px solid #dbe2ef; white-space:nowrap; font-size:13px; }
.editor-topbar h1 { margin:0; font-size:17px; }.editor-topbar p { margin:3px 0 0; color:#66738b; font-size:11px; }
.editor-top-actions { flex-wrap:wrap; justify-content:flex-end; }
.editor-top-actions button,.editor-pane button { padding:8px 10px; border:1px solid #d4dceb; border-radius:8px; background:#fff; color:#344365; font-size:12px; }
.editor-top-actions button.is-primary { border-color:#4d61db; background:#4d61db; color:white; }
.editor-top-actions button:disabled { opacity:.45; cursor:not-allowed; }
.editor-app.is-read-only #mode-notice { padding:10px; border:1px solid #d4dceb; border-radius:8px; background:#f4f6fb; color:#344365; }
.editor-app.is-read-only #preview { opacity:.7; }
#identity,.editor-status { color:#526079; font-size:11px; white-space:nowrap; }
.editor-app { display:grid; grid-template-columns:300px minmax(0,1fr) 286px; height:calc(100dvh - 76px); min-height:550px; }
.editor-app[hidden] { display:none; }
.editor-pane { min-width:0; overflow:auto; padding:20px 18px 32px; background:white; }
.content-pane { border-right:1px solid #dbe2ef; }.interaction-pane { border-left:1px solid #dbe2ef; }
.pane-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; }
.pane-heading h2 { margin:3px 0 0; font-size:19px; }.pane-eyebrow { color:#6277b4; font-size:10px; font-weight:750; letter-spacing:.14em; }
.pane-count { color:#7a879c; font-size:11px; }
.editor-pane label { display:block; margin:11px 0 6px; color:#495874; font-size:12px; font-weight:650; }
.editor-pane input,.editor-pane select,.editor-pane textarea { width:100%; min-width:0; padding:9px; border:1px solid #cad4e8; border-radius:8px; background:white; color:#1d2538; font-size:12px; }
.editor-pane textarea { resize:vertical; }
.editor-pane hr { width:100%; height:1px; margin:22px 0; border:0; background:#dfe5f1; }
.editor-hint { margin:7px 0 0; color:#68768d; font-size:11px; line-height:1.5; }
.course-meta { margin:12px 0 18px; padding:11px; border:1px solid #dfe5f1; border-radius:9px; background:#fafbff; }
.course-meta summary { cursor:pointer; color:#3f5071; font-size:12px; font-weight:650; }
.course-meta button { width:100%; margin-top:12px; }
.editor-section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:18px 0 10px; color:#35435d; font-size:12px; }
.editor-section-title button { padding:5px 8px; }
.editor-item-list,.content-list { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.editor-item-list li { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #dce3f0; border-radius:8px; }
.editor-item-list li.is-active { border-color:#6177df; background:#eef2ff; }
.editor-item-list li button { padding:6px; border:0; background:transparent; }
.editor-item-list li button:first-child { flex:1; min-width:0; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.editor-item-list li button:last-child { color:#b04747; }
.step-settings { padding:8px 0; }
.content-list li { padding:10px; border:1px solid #dce3f0; border-radius:9px; background:#fff; cursor:grab; }
.content-list li.is-selected { border-color:#6177df; background:#eef2ff; }
.content-list li strong { display:block; font-size:12px; color:#344365; }
.content-list li p { margin:5px 0 0; overflow:hidden; color:#748098; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.content-list li .item-actions { display:flex; gap:3px; justify-content:flex-end; margin-top:5px; }
.content-list li button { padding:3px 6px; border:0; background:transparent; }
.material-palette { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.palette-group-title { grid-column:1/-1; margin-top:8px; color:#5f6d88; font-size:11px; }
.material-palette button { text-align:left; cursor:grab; }
.material-palette button:hover { border-color:#6681e8; background:#f1f4ff; }
.content-fields { margin-top:22px; padding-top:8px; border-top:1px solid #dfe5f1; }
.content-fields h3 { margin:8px 0; font-size:14px; }
.content-fields label { margin-top:12px; }
.nested-item-editor { margin:12px 0; padding:12px; border:1px solid #dce4f1; border-radius:9px; background:#f8faff; }
.nested-item-toolbar,.nested-actions { display:flex; align-items:center; gap:4px; }
.nested-item-toolbar strong { flex:1; font-size:11px; color:#344365; }
.nested-item-toolbar button,.nested-actions button { padding:4px 6px; }
.nested-item-toolbar button:nth-last-child(1) { color:#a43a3a; }
.nested-actions { margin:10px 0; }
.preview-pane { min-width:0; display:flex; flex-direction:column; overflow:hidden; background:#e9edf5; }
.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:53px; padding:8px 16px; border-bottom:1px solid #dbe2ef; background:#fff; color:#66738b; font-size:11px; }
.preview-toolbar div { display:flex; align-items:center; gap:10px; }.preview-toolbar strong { color:#293a5d; font-size:13px; }
.preview-devices button { padding:5px 8px; border:1px solid #d4dceb; border-radius:6px; background:#fff; color:#50617f; font-size:11px; }
.preview-devices button.is-active { border-color:#5268dc; background:#eef2ff; color:#314ba9; }
.preview-scroll { flex:1; overflow:auto; }
.preview-stage { width:1236px; min-height:100%; margin:0 auto; background:#f6f8fd; box-shadow:0 12px 40px rgba(32,50,93,.08); }
.course-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid #dfe5f1; background:white; font-size:13px; }
.course-bar strong { color:#1c315f; }.course-status { color:#67758e; font-size:13px; }
.preview-stage .lesson-shell { width:930px; margin:48px auto; }
.preview-stage .lesson-content { padding:34px; }
.preview-stage .lesson-blocks.layout-two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.preview-stage .lesson-match-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.preview-stage [data-editor-block] { position:relative; cursor:pointer; outline:2px solid transparent; outline-offset:4px; }
.preview-stage .lesson-blocks.layout-free > [data-editor-block] { position:absolute; }
.preview-stage:not(.mobile) .lesson-blocks.layout-free { min-height:var(--canvas-desktop-height,800px); }
.preview-stage:not(.mobile) .lesson-blocks.layout-free > * { left:var(--free-desktop-x,0); top:var(--free-desktop-y,0); width:var(--free-desktop-w,100%); z-index:var(--free-desktop-z,0); }
.preview-stage .lesson-blocks.layout-free { background-image:linear-gradient(#dfe6f359 1px,transparent 1px),linear-gradient(90deg,#dfe6f359 1px,transparent 1px); background-size:20px 20px; outline:1px dashed #c4d1e9; }
.preview-stage [data-editor-block] { cursor:grab; }
.preview-stage [data-editor-block] .lesson-inline-content { cursor:text; }
.preview-stage [data-editor-block]:active { cursor:grabbing; }
.preview-stage [data-editor-block]:hover { outline-color:#a6b6f4; }
.preview-stage [data-editor-block].is-editor-selected { outline-color:#5268dc; }
.preview-stage [data-editor-block].is-drop-before { box-shadow:0 -5px 0 #5268dc; }
.preview-stage [data-editor-block].is-drop-after { box-shadow:0 5px 0 #5268dc; }
.preview-stage [data-editor-block].is-drop-left { box-shadow:-5px 0 0 #5268dc; }
.preview-stage [data-editor-block].is-drop-right { box-shadow:5px 0 0 #5268dc; }
.preview-stage .lesson-blocks.is-drop-empty { min-height:90px; border:2px dashed #5268dc; border-radius:10px; }
.preview-stage .editor-block-tools { position:absolute; z-index:5; top:-13px; right:4px; display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #cbd7f1; border-radius:7px; background:#fff; box-shadow:0 3px 12px rgba(25,45,90,.12); opacity:0; transition:opacity .15s; }
.preview-stage [data-editor-block]:hover > .editor-block-tools,.preview-stage [data-editor-block].is-editor-selected > .editor-block-tools,.preview-stage [data-editor-block]:focus-within > .editor-block-tools { opacity:1; }
.editor-block-grip { padding:3px 5px; color:#4f6190; font:600 11px/1.2 system-ui,sans-serif; white-space:nowrap; cursor:grab; }
.editor-block-grip { user-select:none; }
.editor-block-resize { position:absolute; z-index:6; right:-9px; bottom:-9px; display:grid; place-items:center; width:24px; height:24px; border:2px solid #fff; border-radius:7px; background:#5268dc; color:#fff; box-shadow:0 2px 8px rgba(27,43,94,.3); font:700 16px/1 system-ui,sans-serif; cursor:ew-resize; touch-action:none; user-select:none; opacity:0; pointer-events:none; }
.preview-stage [data-editor-block]:hover > .editor-block-resize,.preview-stage [data-editor-block].is-editor-selected > .editor-block-resize,.preview-stage [data-editor-block]:focus-within > .editor-block-resize { opacity:1; pointer-events:auto; }
.editor-block-resize:focus-visible { outline:3px solid #1e347b; outline-offset:3px; }
.editor-text-selection { margin:16px 0; padding:12px; border:1px solid #b9c9ed; border-radius:9px; background:#f1f5ff; }
.editor-text-selection strong { display:block; font-size:12px; color:#354b8b; }
.editor-text-selection p { margin:8px 0; color:#394b72; font-size:12px; overflow-wrap:anywhere; }
.editor-text-effect-row { margin:7px 0; padding:9px; border:1px solid #dce4f1; border-radius:8px; background:#fff; }
.editor-text-effect-row.is-selected { border-color:#6b80db; background:#f4f6ff; }
.editor-text-effect-row button { width:100%; text-align:left; }
.editor-block-delete { padding:3px 6px; border:0; border-radius:5px; background:#fff0f0; color:#a63838; font:600 11px/1.2 system-ui,sans-serif; }
.editor-empty-drop { grid-column:1/-1; padding:36px 20px; border:2px dashed #b9c7e5; border-radius:12px; color:#62718d; text-align:center; font-size:13px; }
.preview-stage .lesson-block-comparison { grid-template-columns:repeat(2,minmax(0,1fr)); }
.preview-stage.mobile { width:390px; }
.preview-stage.mobile .lesson-shell { width:calc(100% - 36px); margin:18px auto; }
.preview-stage.mobile .lesson-content { padding:22px; }
.preview-stage.mobile .lesson-blocks.layout-two-column,.preview-stage.mobile .lesson-match-row,.preview-stage.mobile .lesson-block-comparison { grid-template-columns:1fr; }
.preview-stage.mobile .lesson-blocks.layout-free { min-height:var(--canvas-mobile-height,1100px); }
.preview-stage.mobile .lesson-blocks.layout-free > * { left:var(--free-mobile-x,0); top:var(--free-mobile-y,0); width:var(--free-mobile-w,100%); z-index:var(--free-mobile-z,0); }
.interaction-pane .selected-summary { margin:18px 0; padding:12px; border:1px solid #dce4f1; border-radius:10px; background:#f7f9ff; }
.interaction-pane .selected-summary strong { display:block; margin-bottom:4px; font-size:13px; }.interaction-pane .selected-summary span { color:#65738d; font-size:11px; }
.interaction-pane .inspector-group-title { margin:22px 0 4px; padding-top:12px; border-top:1px solid #e2e8f3; color:#344567; font-size:13px; }
.editor-position-actions,.editor-layer-actions,.editor-nudge-actions { display:grid; gap:6px; margin:10px 0; }
.editor-layout-history { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:14px 0 4px; }
.editor-layout-history button { min-width:0; }
.editor-layout-history button:disabled { opacity:.45; cursor:not-allowed; }
.editor-color-field > div { display:flex; gap:8px; align-items:center; }
.editor-color-field input[type=color] { width:56px; height:36px; padding:3px; cursor:pointer; }
.editor-color-field button { flex:1; }
.editor-color-field button:disabled { opacity:.45; cursor:not-allowed; }
.editor-contrast-check,.editor-inline-contrast-check { display:grid; gap:6px; padding:10px; border:1px solid #b9ddca; border-radius:8px; background:#f0f9f3; color:#28563c; font-size:11px; line-height:1.45; }
.editor-contrast-check { margin:14px 0 4px; }
.editor-inline-contrast-check { margin:11px 0 16px; }
.editor-contrast-check.is-warning,.editor-inline-contrast-check.is-warning { border-color:#e7c29b; background:#fff7ed; color:#814a17; }
.editor-contrast-check strong,.editor-inline-contrast-check strong { font-size:12px; }
.editor-contrast-check span,.editor-inline-contrast-check span { overflow-wrap:anywhere; }
.editor-contrast-check button,.editor-inline-contrast-check button { justify-self:start; margin-top:3px; border-color:#ad7040; color:#713b12; }
.editor-position-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.editor-layer-actions,.editor-nudge-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.editor-position-actions button,.editor-layer-actions button,.editor-nudge-actions button { min-width:0; white-space:normal; }
.interaction-pane .toggle-field { display:flex; align-items:center; gap:8px; margin:14px 0; }
.interaction-pane .toggle-field input { width:auto; margin:0; accent-color:#4d61db; }
.interaction-pane .toggle-field span { font-size:12px; }
.editor-history { display:flex; gap:7px; }.editor-history select { flex:1; }
#editor-message { min-height:2em; margin:16px 0 0; color:#3252aa; font-size:12px; line-height:1.5; }
@media(max-width:1050px) { .editor-app { grid-template-columns:250px minmax(0,1fr) 250px; }.editor-topbar { align-items:flex-start; }.editor-top-actions { max-width:55%; } }
@media(max-width:700px) { .editor-app { height:auto; display:flex; flex-direction:column; }.editor-pane { max-height:none; overflow:visible; }.preview-pane { min-height:620px; }.preview-scroll { min-height:570px; }.editor-topbar { flex-wrap:wrap; }.editor-top-actions { max-width:none; } }