.snap-control { position: relative; display: inline-flex; }
.snap-control #snapBtn { border-radius: 8px 0 0 8px; }
.snap-control .snap-menu-btn { min-width: 28px; padding-inline: 7px; border-left: 0; border-radius: 0 8px 8px 0; }
.snap-menu { position: absolute; z-index: 120; top: calc(100% + 8px); left: 0; width: 218px; padding: 10px; border: 1px solid #4b5770; border-radius: 11px; background: #202839; box-shadow: 0 18px 50px rgba(0,0,0,.42); color: #e8edf8; }
.snap-menu label { display: flex; align-items: center; gap: 9px; min-height: 31px; font-size: 12px; cursor: pointer; }
.snap-menu strong { display: block; margin: 6px 0 3px; color: #aab5ca; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.snap-menu input { accent-color: #9a83ff; }

.library-mode-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 0 14px 11px; }
.library-mode-tabs button { min-height: 30px; padding: 5px 7px; border: 1px solid #3d485f; border-radius: 8px; background: #1e2635; color: #aeb9cd; font-size: 10px; cursor: pointer; }
.library-mode-tabs button.active { border-color: #8c75df; background: #3a305a; color: #fff; }
.library-mode-tabs button:last-child { grid-column: span 2; }
.library-pane { display: none; }
.library-pane.active { display: block; }
.section-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 10px 13px 18px; }
.section-template { min-width: 0; padding: 7px; border: 1px solid #3a455b; border-radius: 10px; background: #1c2433; color: #e9edf8; text-align: left; cursor: grab; }
.section-template:hover { border-color: #9d88e8; background: #2a2942; transform: translateY(-1px); }
.section-template b { display: block; margin-top: 6px; font-size: 11px; }
.template-thumb { position: relative; display: block; height: 48px; overflow: hidden; border-radius: 6px; background: #30394b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.template-thumb::before, .template-thumb::after { content: ''; position: absolute; border-radius: 2px; background: #8f79dc; }
.nav-thumb::before { inset: 7px; height: 5px; }
.nav-thumb::after { top: 20px; left: 7px; right: 7px; height: 20px; background: #202737; }
.hero-thumb::before { left: 8px; top: 10px; width: 55%; height: 7px; box-shadow: 0 11px 0 #656f85, 0 22px 0 #8f79dc; }
.hero-thumb::after { right: 7px; top: 8px; width: 29%; height: 32px; background: #444e64; }
.text-thumb::before { inset: 9px 12px auto; height: 6px; box-shadow: 0 11px 0 #5f6b82, 0 19px 0 #5f6b82; }
.cards-thumb::before { inset: 9px; background: linear-gradient(90deg,#8f79dc 0 30%,transparent 30% 35%,#59647a 35% 65%,transparent 65% 70%,#59647a 70%); }
.gallery-thumb::before { inset: 7px; background: linear-gradient(135deg,#8f79dc,#4c566d); }
.cta-thumb::before { left: 8px; right: 8px; top: 10px; height: 7px; box-shadow: 0 13px 0 #8f79dc; }
.form-thumb::before { left: 8px; width: 45%; top: 8px; bottom: 8px; background: #5c667b; }
.form-thumb::after { right: 8px; width: 38%; top: 8px; bottom: 8px; background: #8f79dc; }
.footer-thumb::before { inset: 25px 7px 7px; background: #191f2b; }
.blank-thumb::before { inset: 7px; border: 1px dashed #78849a; background: transparent; }

.inspector-mode-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 9px 10px; border-bottom: 1px solid #333e53; background: #141b28; }
.inspector-mode-tabs button { min-width: 0; min-height: 31px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #9facbf; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.inspector-mode-tabs button.active { border-color: #7f69cf; background: #392e59; color: #fff; }
.inspector-mode-panel[hidden] { display: none !important; }
.simple-choice-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.simple-choice-row.four { grid-template-columns: repeat(4,1fr); }
.simple-choice { min-height: 34px; padding: 5px; border: 1px solid #445069; border-radius: 8px; background: #222b3c; color: #dce2ef; font-size: 10px; cursor: pointer; }
.simple-choice.active { border-color: #9c84ed; background: #433568; color: #fff; }
.simple-slider { width: 100%; accent-color: #9a83ff; }
.responsive-state { display: inline-flex; align-items: center; gap: 5px; color: #bcaeff; font-size: 10px; }

.panel-collapse-btn { position: absolute; z-index: 80; top: 9px; width: 24px; height: 30px; border: 1px solid #46516a; border-radius: 7px; background: #202839; color: #dce3ef; cursor: pointer; }
.panel-collapse-btn.left { right: 8px; }
.panel-collapse-btn.right { left: 8px; }
.right-panel .inspector-header { padding-left: 48px; }
body.left-panel-collapsed .workspace { grid-template-columns: 42px minmax(0,1fr) var(--right-panel-width,338px); }
body.left-panel-collapsed .left-panel { width: 42px; overflow: visible; }
body.left-panel-collapsed .left-panel > :not(.panel-collapse-btn) { display: none !important; }
body.left-panel-collapsed .panel-collapse-btn.left { right: 9px; transform: rotate(180deg); }
body.right-panel-collapsed .workspace, body.right-panel-empty .workspace { grid-template-columns: var(--left-panel-width,338px) minmax(0,1fr) 44px; }
body.right-panel-collapsed .right-panel, body.right-panel-empty .right-panel { width: 44px; overflow: visible; }
body.right-panel-collapsed .right-panel > :not(.panel-collapse-btn), body.right-panel-empty .right-panel > :not(.panel-collapse-btn) { display: none !important; }
body.right-panel-collapsed .panel-collapse-btn.right, body.right-panel-empty .panel-collapse-btn.right { left: 9px; transform: rotate(180deg); }
body.right-panel-collapsed .right-panel .inspector-header, body.right-panel-empty .right-panel .inspector-header { padding-left: 16px; }
body.left-panel-collapsed.right-panel-collapsed .workspace, body.left-panel-collapsed.right-panel-empty .workspace { grid-template-columns: 42px minmax(0,1fr) 44px; }

.wb-node.is-multi-selected { outline: 1px solid #cfbfff !important; outline-offset: 2px; }
.snap-guide-label { position: absolute; z-index: 72; pointer-events: none; padding: 4px 7px; border-radius: 6px; background: #7c5cc5; color: #fff; font-size: 10px; font-weight: 700; transform: translate(8px,8px); }
.snap-guide-label[hidden] { display: none !important; }

/* Beginner-first toolbar: precision controls stay available without crowding the editor. */
.more-tools-control { position: relative; }
.more-tools-btn { min-width: 102px; justify-content: center; gap: 7px; }
.more-tools-btn span { color: #9ba6ba; font-size: 10px; }
.more-tools-menu { position: absolute; z-index: 118; top: calc(100% + 9px); left: 0; width: 290px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid #4a566d; border-radius: 12px; background: #192130; box-shadow: 0 20px 55px rgba(0,0,0,.42); white-space: normal; }
.more-tools-menu[hidden] { display: none !important; }
.more-tools-heading { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; padding: 2px 2px 6px; }
.more-tools-heading strong { color: #f3f5fa; font-size: 12px; }
.more-tools-heading small { color: #98a5ba; font-size: 10px; line-height: 1.35; }
.more-tools-menu > .tool-pill, .more-tools-menu > .grid-size-control, .more-tools-menu > .snap-control { width: 100%; min-width: 0; }
.more-tools-menu > .grid-size-control { justify-content: center; background: #222b3c; border-color: #455168; color: #cbd3e2; }
.more-tools-menu > .snap-control { display: flex; }
.more-tools-menu > .snap-control #snapBtn { flex: 1; }
.more-tools-menu .snap-menu { top: calc(100% + 7px); left: 0; }

/* Built-in help lives directly below Media in the main rail. */
.help-view { padding-bottom: 22px; color: #dfe5f1; }
.help-hero { display: flex; flex-direction: column; gap: 5px; padding: 23px 16px 15px; border-bottom: 1px solid #313b50; }
.help-hero strong { color: #fff; font-size: 17px; letter-spacing: -.02em; }
.help-hero small { color: #9ca8bc; font-size: 11px; line-height: 1.45; }
.help-steps { display: grid; gap: 7px; padding: 13px; }
.help-step { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 1px solid #3b465c; border-radius: 10px; background: #1c2433; color: #eef2f9; text-align: left; cursor: pointer; }
.help-step:hover { border-color: #8872d5; background: #29253f; }
.help-step > b { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #514178; color: #fff; font-size: 11px; }
.help-step span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.help-step strong { font-size: 11px; }
.help-step small { color: #aab4c6; font-size: 10px; line-height: 1.4; }
.help-card { margin: 0 13px 10px; padding: 13px; border: 1px solid #354056; border-radius: 11px; background: #1a2230; }
.help-card h3 { margin: 0 0 9px; color: #f2f4fa; font-size: 12px; }
.help-card p, .help-card li, .help-card dd { color: #abb6c9; font-size: 10px; line-height: 1.55; }
.help-card p { margin: 0 0 10px; }
.help-card ol, .help-card ul { margin: 0; padding-left: 18px; }
.help-card li + li { margin-top: 4px; }
.help-card kbd { padding: 1px 5px; border: 1px solid #546078; border-radius: 4px; background: #252f40; color: #f2f4fa; font: inherit; }
.help-definitions { display: grid; gap: 7px; margin: 0; }
.help-definitions div { display: grid; grid-template-columns: 55px 1fr; gap: 6px; }
.help-definitions dt { color: #d9cdfd; font-size: 10px; font-weight: 750; }
.help-definitions dd { margin: 0; }
.help-action { width: 100%; margin-top: 10px; min-height: 32px; }

/* Canva-like element library and image frames. */
.canva-element-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.canva-element-grid .element-card { min-height: 72px; }
.element-card .element-preview { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: #8e76df; color: #fff; }
.element-card .text-large { width: 38px; background: transparent; color: #ece7ff; font-size: 20px; font-weight: 800; }
.element-card .text-small { background: transparent; color: #d8d0f7; font-family: Georgia,serif; font-size: 19px; }
.element-card .shape-square { border-radius: 2px; }
.element-card .shape-circle { border-radius: 50%; }
.element-card .shape-triangle { border-radius: 0; clip-path: polygon(50% 0,100% 100%,0 100%); }
.element-card .shape-star { background: transparent; color: #9d85ed; font-size: 32px; line-height: 1; }
.element-card .shape-line { width: 37px; height: 4px; border-radius: 999px; }
.element-card .shape-pill { width: 40px; height: 21px; border-radius: 999px; }
.element-card .frame-square, .element-card .frame-rounded, .element-card .frame-circle, .element-card .frame-portrait { border: 2px dashed #9e8be5; background: repeating-linear-gradient(135deg,#262f41 0 5px,#30394d 5px 10px); color: #d9d0fa; }
.element-card .frame-rounded { width: 38px; border-radius: 9px; }
.element-card .frame-circle { border-radius: 50%; }
.element-card .frame-portrait { width: 23px; height: 36px; border-radius: 5px; }
.library-help { display: block; padding: 9px 3px 0; color: #929fb3; font-size: 9px; line-height: 1.45; }
.wb-node[data-type="imageFrame"] { isolation: isolate; }
.wb-node[data-type="imageFrame"] > .frame-image { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: inherit; border-radius: inherit; }
.frame-placeholder { border: 2px dashed rgba(117,94,196,.55); background: repeating-linear-gradient(135deg,#eef0f5 0 12px,#e1e5ed 12px 24px); }
.frame-placeholder span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.85); color: #7359cb; }
.wb-node.asset-drop-target { outline: 4px solid #a98cff !important; outline-offset: 3px; box-shadow: 0 0 0 8px rgba(128,97,221,.2); }
.wb-node.asset-drop-target .frame-placeholder small { color: #6347c1; font-weight: 800; }
.asset-card[draggable="true"] { cursor: grab; }
.asset-card.asset-dragging { opacity: .55; transform: scale(.96); }
.asset-dropzone.is-file-over { border-color: #a98cff; background: rgba(119,88,211,.16); box-shadow: inset 0 0 0 2px rgba(169,140,255,.22); }

@media (max-width: 1250px) {
  .more-tools-menu { left: auto; right: 0; }
}