.draft-preview{border:1px solid #ffffff16;border-radius:9px;padding:20px;background:#17181d80;min-width:0}.draft-preview h3{font-size:17px;overflow-wrap:anywhere;margin:18px 0}.draft-preview h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#a9aab8;margin:22px 0 8px}.draft-preview p{font-size:13px;color:#c6c8d3;overflow-wrap:anywhere;margin:9px 0}.draft-preview .hint{font-size:11px;margin-top:22px}.rightcol>#draftPreview{display:none}
/* Autosave and conflict messages are grid children too: keep them above both columns. */
body[data-view=design] .grid{grid-template-columns:minmax(0,1fr) 280px}
body[data-view=design] .grid>#autosaveStatus,body[data-view=design] .grid>.draft-conflict{grid-column:1/-1;margin:0}
body[data-view=design] .grid>#designer{grid-column:1;min-width:0;width:100%;max-width:none;margin:0}
body[data-view=design] .grid>.rightcol{grid-column:2;display:block!important;position:sticky;top:18px;align-self:start;max-height:calc(100dvh - 36px);overflow:auto}
body[data-view=design] .rightcol>:not(#draftPreview){display:none!important}body[data-view=design] .rightcol>#draftPreview{display:block}
body[data-view=design] .editor>.panel-head{flex-wrap:wrap;row-gap:14px}
.editor{min-width:0}body:not([data-view=design]):not([data-view=guided]):not([data-view=roles]) #autosaveStatus{display:none}
.draft-conflict{border:1px solid #e3bb6e;border-radius:8px;padding:18px;margin-bottom:20px}.draft-conflict[hidden]{display:none}.draft-conflict button{margin:6px}.review-group{padding:10px 0}.review-group h3{font-size:14px;color:#c1c6ff}.review-group .plan-item{display:block;white-space:normal;overflow-wrap:anywhere}.review-group .plan-item p{margin:6px 0}.draft-role-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #ffffff10}.draft-role-row span{flex:1;overflow-wrap:anywhere}.draft-role-row button{padding:5px 9px;flex:none}.draft-role-row button[draggable=true],.category-top button[draggable=true],.channel-controls button[draggable=true]{cursor:grab}.draft-role-row button:active[draggable=true]{cursor:grabbing}.polish-panel{padding:24px 30px}.polish-panel h2{font-size:24px}.polish-panel p{font-size:14px;line-height:1.65}.polish-panel a{display:inline-flex;margin:8px 10px 8px 0;text-decoration:none}.bot-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#5865f233;font-size:26px;color:#c5cbff}.style-choice{display:flex;align-items:center;gap:12px;padding:9px;border-bottom:1px solid #ffffff0b;font-size:14px}.style-choice input{accent-color:#5865f2}.polish-panel .row{flex-wrap:wrap}.polish-panel[hidden]{display:none}
body:not([data-view=bots]) #botsPanel,body:not([data-view=styles]) #stylesPanel{display:none!important}.workspace-nav{overflow-y:auto;min-height:0}.sidebar .nav{flex:none}
body[data-view=bots] .task-guide,body[data-view=styles] .task-guide{display:none}
body:not([data-view=design]) .legacy-recovery{display:none}
.tutorial-backdrop{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;background:#0b0c12c9;backdrop-filter:blur(7px);padding:24px;overflow:auto}.tutorial-dialog{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start;width:min(880px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:30px;background:radial-gradient(ellipse at top right,#35325b,#202024 75%);border:1px solid #565772;border-radius:16px;box-shadow:0 28px 90px #0008;outline:none}.guide-avatar{width:100%;height:auto;max-height:300px;object-fit:contain;position:sticky;top:0}.tutorial-content{min-width:0}.tutorial-content h2{font-size:25px;line-height:1.3;margin:16px 0}.tutorial-content p{font-size:14px;line-height:1.7;color:#c7c8d6}.tutorial-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.tutorial-actions button{min-height:40px}.practice-board{padding:18px;border:1px solid #55566b;background:#16171f80;border-radius:8px}.practice-highlight{outline:2px solid #a7aeff;outline-offset:3px}.tutorial-backdrop button:focus-visible,.polish-panel button:focus-visible,.draft-role-row button:focus-visible{outline:2px solid #b6bdff;outline-offset:3px}.tutorial-content .work-state{font-size:10px}
@media(max-width:1100px){body[data-view=design] .grid{grid-template-columns:minmax(0,1fr)}body[data-view=design] .grid>.rightcol{grid-column:1;position:static;max-height:none}.draft-preview{max-height:440px;overflow:auto}.tutorial-dialog{grid-template-columns:130px minmax(0,1fr);padding:22px;gap:18px}}
.drag-target{outline:1px solid #a8afff;outline-offset:2px}.pointer-dragging{opacity:.6}button[aria-label^="Drag "]{touch-action:none}
@media(max-width:600px){.tutorial-backdrop{padding:12px}.tutorial-dialog{display:block;padding:20px;max-height:calc(100dvh - 24px)}.guide-avatar{position:static;width:100px;height:100px;object-fit:contain;float:right;margin:0 0 8px 8px}.tutorial-content h2{font-size:21px}.tutorial-actions{clear:both}.polish-panel{padding:16px}.draft-role-row{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tutorial-backdrop *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.existing-server-shortcut{display:inline-flex;align-items:center;justify-content:center;min-height:40px;text-decoration:none;padding:10px 14px;border-radius:6px}.style-selection-tools{align-items:center;flex-wrap:wrap;margin:14px 0}.style-selection-tools .hint{margin:0}.permission-review{max-height:calc(100dvh - 110px);overflow:auto}.style-choice{overflow-wrap:anywhere}.polish-panel select{max-width:100%}.permission-review button:disabled{cursor:default}.modal-backdrop .modal p{overflow-wrap:anywhere}@media(max-width:1050px){.permission-review{max-height:none;overflow:visible}}