#callout-builder-modal { z-index:11000; }
#callout-builder-modal [hidden] { display:none!important; }
#callout-builder-modal .cb-top input { width:190px; box-sizing:border-box; }
#callout-builder-modal .cb-toolbar select { width:150px; flex:0 1 150px; }
#callout-builder-modal .cb-footer select { width:auto; max-width:155px; margin:0; }
#callout-builder-modal input[type=range] { accent-color:#9164f5; }
.cb-window { display:flex; flex-direction:column; width:calc(100vw - 40px); max-width:1700px; height:calc(100vh - 40px); background:#202124; border:1px solid #41434a; border-radius:8px; overflow:hidden; box-shadow:0 24px 80px #0009; }
.cb-top, .cb-toolbar, .cb-footer { display:flex; align-items:center; gap:10px; padding:12px 16px; flex-shrink:0; border-bottom:1px solid #36383e; }
.cb-top { flex-wrap:wrap; } .cb-top h2 { margin:0 12px 0 0; font-size:16px; } .cb-top input { width:190px; } .cb-top select { width:160px; } .cb-top .cb-spacer { flex:1; }
.cb-top input,.cb-top select,.cb-toolbar select,.cb-samples input,.cb-samples select { margin:0; min-width:0; }
.cb-body { display:grid; grid-template-columns:200px minmax(0,1fr) 310px; min-height:0; flex:1; }
.cb-layers, .cb-inspector { min-width:0; min-height:0; overflow-y:auto; padding:16px; } .cb-layers { border-right:1px solid #36383e; } .cb-inspector { border-left:1px solid #36383e; }
.cb-layers h3,.cb-inspector h3 { margin:0 0 14px; font-size:12px; color:#ddd; } .cb-element { display:block; width:100%; padding:9px 10px; margin:0 0 5px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#292b30; border:1px solid transparent; }
.cb-element.selected { border-color:#966cf4; background:#713ae626; color:#e4d8ff; } .cb-layer-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:12px; } .cb-layer-actions button { padding:6px 8px; }
.cb-center { display:flex; flex-direction:column; min-width:0; min-height:0; background:#141519; } .cb-stage { position:relative; flex:1; min-height:0; min-width:0; overflow:hidden; display:grid; place-items:center; } .cb-stage canvas { display:block; touch-action:none; transform-origin:center; }
.cb-samples { position:absolute; top:12px; left:12px; z-index:8; width:min(440px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px; padding:10px; box-sizing:border-box; border:1px solid #555b675c; border-radius:6px; background:#202228ed; box-shadow:0 4px 16px #0004; backdrop-filter:blur(8px); }
.cb-samples label { display:grid; gap:4px; min-width:0; font-size:10px; color:#b3bac5; }
#callout-builder-modal .cb-samples input,#callout-builder-modal .cb-samples select { width:100%; min-width:0; height:28px; padding:4px 7px; font-size:11px; box-sizing:border-box; }
.cb-footer { border-top:1px solid #36383e; border-bottom:0; } .cb-footer input[type=range] { min-width:0; flex:1; margin:0; } .cb-footer label { display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:11px; }
.cb-inspector input,.cb-inspector select,.cb-inspector textarea { max-width:100%; box-sizing:border-box; } .cb-inspector textarea { width:100%; min-height:72px; padding:8px; resize:vertical; background:#151619; color:#ddd; border:1px solid #444; font:inherit; }
.cb-color-row { display:flex; gap:8px; align-items:center; min-width:0; } .cb-color-row select { flex:1; } .cb-inspector .callout-number-row input[type=number] { flex-basis:66px; width:66px; } .cb-inspector .settings-group { padding:14px 0; } .cb-inspector .settings-group:first-child { padding-top:0; border:0; }
#cb-status { margin:0; padding:0 16px; color:#e4ba75; font-size:12px; } #cb-status:empty { display:none; } #cb-discard-bar { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px; background:#3b2f24; }
@media(max-width:1100px) { .cb-body { grid-template-columns:150px minmax(0,1fr) 260px; } .cb-top { gap:6px; padding:9px; } .cb-top h2 { font-size:14px; } .cb-inspector,.cb-layers { padding:12px; } }
@media(max-width:760px) { .cb-window { width:100vw; height:100vh; border-radius:0; } .cb-body { grid-template-columns:130px minmax(0,1fr); grid-template-rows:minmax(180px,1fr) 230px; } .cb-inspector { grid-column:1/-1; border-top:1px solid #36383e; } .cb-toolbar { flex-wrap:wrap; } }

.cb-line-point-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cb-line-point-actions button { flex:1; padding:6px 8px; }
#cb-zoom-value { min-width:42px; font-size:11px; color:#bbb; text-align:right; }
#cb-preview { cursor:grab; outline:none; }
#cb-preview.cb-pan-ready { cursor:grab; }
#cb-preview.cb-panning { cursor:grabbing; }

.cb-footer { flex-wrap:wrap; row-gap:8px; }
.cb-footer input[type=range] { flex:1 1 110px; }

.cb-anchor-visual-controls { display:grid; gap:12px; margin:12px 0 16px; }
.cb-anchor-selectors { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cb-anchor-caption { display:block; margin-bottom:8px; font-size:11px; }
.cb-own-color { color:#ff8292; } .cb-target-color { color:#66d6ed; }
.cb-anchor-grid { display:grid; grid-template-columns:repeat(3,24px); gap:4px; width:max-content; }
#callout-builder-modal .cb-anchor-dot { display:grid; place-items:center; width:24px; height:24px; margin:0; padding:0; border:1px solid #4b4f59; border-radius:4px; background:#292c32; }
.cb-anchor-dot::after { content:''; width:4px; height:4px; border-radius:50%; background:#a2a8b3; }
#callout-builder-modal .cb-own-anchor-grid .cb-anchor-dot.selected { border-color:#ff8292; background:#5b2e38; }
#callout-builder-modal .cb-target-anchor-grid .cb-anchor-dot.selected { border-color:#66d6ed; background:#244852; }
.cb-anchor-dot.selected::after { background:currentColor; width:8px; height:8px; }
#cb-pick-anchor[aria-pressed="true"] { border-color:#66d6ed; color:#66d6ed; }
#cb-preview.cb-anchor-picking { cursor:crosshair; }
#cb-preview.cb-pan-ready { cursor:grab; } #cb-preview.cb-panning { cursor:grabbing; }
.cb-stage.cb-light-background { background:#edf0f4; }

.cb-anchor-selectors .settings-field { min-width:0; margin:0; }
.cb-own-anchor-grid, #cb-anchor-field > label { color:#ff8292; }
.cb-target-anchor-grid, #cb-target-anchor-field > label { color:#66d6ed; }

.cb-color-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cb-color-heading output { color:#a6acb8; font-size:10px; text-align:right; }
.cb-color-palette { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
#callout-builder-modal .cb-color-option { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; gap:5px; padding:7px 2px; margin:0; border:1px solid #424650; border-radius:5px; background:#26292f; color:#aeb4bf; font-size:10px; line-height:1.2; }
#callout-builder-modal .cb-color-option:hover { border-color:#848c9a; background:#30343c; }
#callout-builder-modal .cb-color-option.selected { border-color:#ac88ff; box-shadow:inset 0 0 0 1px #ac88ff; background:#40334f; color:#fff; }
.cb-color-sample { display:block; position:relative; width:28px; height:20px; border:1px solid #ffffff40; border-radius:3px; box-shadow:0 1px 2px #0004; }
.cb-color-none { background:repeating-conic-gradient(#e2e4e8 0 25%,#9ca2ad 0 50%) 0/8px 8px; }
.cb-color-none::after { content:''; position:absolute; left:-2px; right:-2px; top:9px; height:2px; background:#e23d4f; transform:rotate(-33deg); }
.cb-color-custom::after { content:'+'; position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:#f0f1f4; color:#16181d; font:12px/1 sans-serif; }
.cb-custom-color-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
#callout-builder-modal .cb-custom-color-row input[type=color] { width:38px; height:30px; padding:2px; margin:0; flex:0 0 38px; cursor:pointer; }
#callout-builder-modal .cb-custom-color-row input[type=text] { width:0; flex:1; min-width:0; margin:0; font:12px monospace; }
.cb-custom-color-row input[aria-invalid=true] { border-color:#ed6b75; }

.cb-toolbar { flex-wrap:wrap; }
.cb-element-tools { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:0 12px; border-left:1px solid #41454e; border-right:1px solid #41454e; }
#callout-builder-modal .cb-element-tool { display:grid; place-items:center; width:34px; height:34px; margin:0; padding:7px; border:1px solid transparent; border-radius:5px; background:transparent; color:#cbd0db; }
#callout-builder-modal .cb-element-tool:hover { background:#373b44; border-color:#606775; color:#fff; }
#callout-builder-modal .cb-element-tool:focus-visible { outline:2px solid #ac88ff; outline-offset:2px; }
#callout-builder-modal .cb-element-tool:active { background:#4b3c65; }
.cb-element-tool .ui-icon { width:20px; height:20px; }

.cb-canvas-settings { display:grid; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid #36383e; }
.cb-canvas-settings h3 { margin:0; }.cb-canvas-settings > label { display:grid; gap:6px; font-size:11px; color:#bfc4cd; }
.cb-canvas-settings select { width:100%; margin:0; }.cb-canvas-settings > .cb-canvas-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cb-canvas-row input { margin:0; width:auto; }.cb-canvas-zoom { display:flex; align-items:center; justify-content:space-between; font-size:11px; }.cb-canvas-settings input[type=range] { width:100%; margin:0; min-width:0; }
.cb-timeline { display:flex; flex-direction:column; flex:0 0 auto; height:345px; min-height:140px; max-height:55vh; background:#1b1d22; border-top:1px solid #45414d; overflow:hidden; outline:none; }
.cb-tl-resize { flex:0 0 7px; cursor:ns-resize; display:grid; place-items:center; background:#26282d; touch-action:none; }.cb-tl-resize::after { content:''; width:48px; height:2px; background:#6e737e; border-radius:2px; }
.cb-tl-toolbar { display:grid; grid-template-columns:minmax(100px,1fr) auto minmax(280px,1fr); align-items:center; gap:16px; padding:7px 14px; border-bottom:1px solid #363940; flex:0 0 auto; }
.cb-tl-title { font-size:11px; font-weight:600; color:#b7bcc7; }.cb-tl-transport { display:flex; align-items:center; gap:7px; white-space:nowrap; }
#callout-builder-modal .cb-tl-transport button { display:grid; place-items:center; width:28px; height:28px; padding:5px; margin:0; }
#callout-builder-modal .cb-tl-transport .cb-tl-play { width:33px; height:33px; border-radius:50%; background:#713ae6; color:white; border:0; }
.cb-tl-transport .ui-icon { width:16px; height:16px; }#cb-tl-timecode { font:600 12px ui-monospace,Consolas,monospace; color:#c3a7ff; margin-left:4px; }#cb-tl-fps { color:#808896; font-size:9px; }
.cb-tl-tools { display:flex; justify-content:flex-end; align-items:center; gap:7px; font-size:10px; white-space:nowrap; }.cb-tl-tools label,.cb-tl-fields label { display:flex; align-items:center; gap:6px; color:#aeb5c1; }
#callout-builder-modal .cb-tl-tools input[type=number],#callout-builder-modal .cb-tl-fields input { width:58px; margin:0; padding:4px 5px; min-width:0; font:11px ui-monospace,Consolas,monospace; }
#callout-builder-modal .cb-tl-tools input[type=range] { min-width:50px; width:70px; margin:0; }#callout-builder-modal .cb-tl-tools input[type=checkbox] { margin:0; width:auto; }.cb-tl-tools button { margin:0; padding:4px 7px; }
.cb-tl-scroll { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#555b66 #202228; outline:none; overscroll-behavior:contain; }
.cb-tl-scroll::-webkit-scrollbar { width:7px; height:7px; }.cb-tl-scroll::-webkit-scrollbar-track { background:#202228; }.cb-tl-scroll::-webkit-scrollbar-thumb { background:#555b66; border-radius:4px; }
.cb-tl-content { position:relative; min-width:100%; min-height:100%; }.cb-tl-ruler-row { display:flex; height:27px; position:sticky; top:0; z-index:7; background:#14161a; border-bottom:1px solid #45424d; }
.cb-tl-ruler-name { width:176px; flex:0 0 176px; position:sticky; left:0; z-index:9; box-sizing:border-box; padding:7px 10px; background:#17191e; color:#8b929e; font-size:10px; border-right:1px solid #3c3e45; }
.cb-tl-ruler { flex-shrink:0; position:relative; cursor:ew-resize; touch-action:none; overflow:hidden; }.cb-tl-tick { position:absolute; top:19px; bottom:0; border-left:1px solid #525762; pointer-events:none; font:11px ui-monospace,Consolas,monospace; white-space:nowrap; color:#b6bdca; padding-left:4px; }.cb-tl-tick.major { top:3px; padding-top:0; }.cb-tl-tick.last { transform:translateX(-100%); border-left:0; border-right:1px solid #525762; padding:0 4px 0 0; }
.cb-tl-row { height:30px; display:flex; border-bottom:1px solid #292c33; box-sizing:border-box; }.cb-tl-row.selected { background:#382e49; }
#callout-builder-modal .cb-tl-name { display:flex; align-items:center; gap:7px; flex:1; width:auto; min-width:0; z-index:5; margin:0; padding:5px 10px; border:0; border-right:1px solid #3c3e45; border-radius:0; background:#202229; text-align:left; color:#bac2cf; font-size:11px; }
.cb-tl-name > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.cb-tl-name .ui-icon { width:13px; height:13px; flex:0 0 13px; }.cb-tl-row.selected .cb-tl-name { background:#3b2e52!important; color:#ede3ff!important; }
.cb-tl-track { position:relative; height:100%; flex-shrink:0; background-image:linear-gradient(to right,#ffffff08 1px,transparent 1px); cursor:default; touch-action:none; }
.cb-tl-hold { position:absolute; top:9px; height:11px; background:#8b67ca0b; border-top:1px dashed #8b67ca35; box-sizing:border-box; }
#callout-builder-modal .cb-tl-block { position:absolute; top:4px; bottom:4px; min-width:3px; margin:0; padding:0 7px; display:block; box-sizing:border-box; overflow:hidden; border:1px solid #8e60dc; border-radius:3px; background:#65419480; color:#f2e9ff; cursor:grab; font-size:10px; touch-action:none; user-select:none; }
#callout-builder-modal .cb-tl-block[data-kind=line] { background:#78603988; border-color:#c79b55; }#callout-builder-modal .cb-tl-block[data-kind=image] { background:#335f7b88; border-color:#659fc6; }
#callout-builder-modal .cb-tl-block.selected { outline:1px solid #e4d3ff; outline-offset:0; box-shadow:inset 0 0 0 1px #d4b5ff; }.cb-tl-block-text { pointer-events:none; white-space:nowrap; }
.cb-tl-edge { position:absolute; top:0; bottom:0; width:7px; cursor:col-resize; z-index:2; }.cb-tl-edge.left { left:0; border-left:2px solid #ffffff55; }.cb-tl-edge.right { right:0; border-right:2px solid #ffffff55; }.cb-tl-edge:hover { background:#ffffff45; }
.cb-tl-playhead { position:absolute; top:27px; bottom:0; width:1px; background:#b48cff; pointer-events:none; z-index:4; }.cb-tl-ruler-cursor { position:absolute; top:0; bottom:0; border-left:1px solid #b48cff; pointer-events:none; z-index:2; }.cb-tl-ruler-cursor::before { content:''; position:absolute; top:0; left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #b48cff; }
.cb-tl-dragging,.cb-tl-dragging * { user-select:none!important; }.cb-tl-empty { padding:20px; color:#818b98; font-size:11px; }.cb-tl-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; flex:0 0 auto; padding:5px 12px; border-top:1px solid #33363d; color:#7f8998; font-size:10px; }.cb-tl-fields { display:flex; gap:12px; }
@media(max-width:1100px) { .cb-tl-toolbar { grid-template-columns:auto 1fr; gap:8px; }.cb-tl-title { display:none; }.cb-tl-tools { flex-wrap:wrap; }.cb-tl-transport { gap:4px; } }
@media(max-height:800px) { .cb-timeline { height:285px; }.cb-samples { padding:8px; gap:6px; } }

#cb-tl-zoom-value { min-width:35px; text-align:right; font:10px ui-monospace,Consolas,monospace; color:#afb7c4; }

#callout-builder-modal .cb-tl-name { justify-content:flex-start; }
#callout-builder-modal .cb-tl-block { display:flex; align-items:center; justify-content:center; }

.cb-tl-header { position:sticky; left:0; flex:0 0 176px; width:176px; min-width:0; display:flex; z-index:5; background:#202229; border-right:1px solid #3c3e45; box-sizing:border-box; }
#callout-builder-modal .cb-tl-name { cursor:grab; touch-action:none; user-select:none; border-right:0; padding-left:21px; }
.cb-tl-name::before { content:''; position:absolute; left:7px; top:10px; width:6px; height:10px; background:radial-gradient(circle,#858e9c 1px,transparent 1.3px) 0 0/3px 4px; opacity:.65; }
#callout-builder-modal .cb-tl-remove { flex:0 0 24px; width:24px; min-width:0; margin:0; padding:4px; border:0; border-radius:0; background:transparent; color:#929baa; opacity:0; }
.cb-tl-remove .ui-icon { width:13px; height:13px; }
#callout-builder-modal .cb-tl-row:hover .cb-tl-remove,#callout-builder-modal .cb-tl-row:focus-within .cb-tl-remove,#callout-builder-modal .cb-tl-row.selected .cb-tl-remove { opacity:1; }
#callout-builder-modal .cb-tl-remove:hover { color:#ff9595; background:#753b3b50; }
.cb-tl-row.selected .cb-tl-header { background:#3b2e52; }
.cb-tl-row.cb-tl-reorder-source { box-shadow:inset 0 2px #c6a4ff,inset 0 -2px #c6a4ff; }
#callout-builder-modal .cb-tl-reorder-source .cb-tl-name { cursor:grabbing; background:#493963; }

/* Builder properties: consistent groups and field rhythm. */
.cb-inspector { padding-top:0; overflow-x:hidden; }
.cb-inspector-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 -16px; padding:14px 16px; background:#202124; border-bottom:1px solid #36383e; }
.cb-inspector .cb-inspector-header h3 { margin:0; font-size:12px; line-height:1.4; }
.cb-kind-badge { padding:3px 6px; border:1px solid #45404f; border-radius:4px; color:#c5b2e5; background:#302a3b; font-size:10px; line-height:1.2; }
.cb-kind-badge:empty { display:none; }
#callout-builder-modal .cb-inspector .settings-group { gap:10px; padding:14px 0; }
#callout-builder-modal .cb-inspector .settings-field { gap:6px; margin:0; }
#callout-builder-modal .cb-inspector .settings-group h4 { font-size:10px; color:#9da5b3; letter-spacing:.9px; }
#callout-builder-modal .cb-inspector input[type=text],#callout-builder-modal .cb-inspector select { width:100%; min-width:0; height:32px; padding:5px 8px; margin:0; font-size:12px; }
#callout-builder-modal .cb-inspector .callout-number-row { gap:10px; margin:0; min-width:0; }
#callout-builder-modal .cb-inspector .callout-number-row input[type=number] { flex:0 0 68px; width:68px; height:26px; padding:3px 6px; font-size:12px; font-variant-numeric:tabular-nums; }
#callout-builder-modal .cb-inspector .callout-number-row input[type=range] { width:0; min-width:0; height:18px; }
.cb-inspector .cb-anchor-visual-controls { margin:0; gap:10px; }
.cb-inspector .cb-anchor-selectors { gap:12px; }
#callout-builder-modal .cb-inspector #cb-pick-anchor,#callout-builder-modal .cb-inspector #cb-line-pick-anchor { width:100%; min-height:30px; margin:0; padding:5px 8px; font-size:11px; }
.cb-image-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
#callout-builder-modal .cb-image-actions button { min-width:0; margin:0; padding:6px; min-height:30px; font-size:11px; }
.cb-inspector .cb-color-heading { margin:0 0 1px; min-width:0; }
#callout-builder-modal .cb-inspector .cb-color-option { gap:4px; padding:5px 2px; font-size:9px; }
.cb-inspector .cb-color-sample { width:26px; height:16px; }
.cb-inspector .cb-color-none::after { top:7px; }
#callout-builder-modal .cb-inspector .cb-custom-color-row input[type=text] { width:0; }
.cb-inspector #cb-properties-empty { margin:16px 0; }
.cb-timeline { cursor:default; }
#callout-builder-modal .cb-tl-block:active { cursor:grabbing; }
@media(max-width:1100px) { .cb-inspector { padding-top:0; }.cb-inspector-header { margin:0 -12px; padding:12px; } }

/* Property glyph masks are shared with the studio in settings-ui.css. */

#callout-builder-modal .cb-inspector .settings-field:has(> .callout-number-row) { gap:3px; }
.cb-inspector .cb-animation-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; min-width:0; }
#callout-builder-modal .cb-animation-choices button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-width:0; min-height:52px; padding:6px 3px; margin:0; background:#282b31; border:1px solid #454a54; border-radius:5px; color:#bfc7d2; font-size:10px; line-height:1.2; }
.cb-animation-choices button svg { width:36px; height:24px; flex-shrink:0; }
#callout-builder-modal .cb-animation-choices button:hover { background:#35343d; border-color:#82768e; color:#f0eaf8; }
#callout-builder-modal .cb-animation-choices button[aria-checked="true"] { border-color:#ad88ff; background:#41334f; color:#f0e7ff; box-shadow:inset 0 0 0 1px #ad88ff55; }
#callout-builder-modal .cb-animation-choices button:focus-visible { outline:2px solid #c6a4ff; outline-offset:2px; }
.cb-inspector .cb-easing-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
#callout-builder-modal .cb-easing-choices button { flex-direction:row; gap:6px; min-height:38px; }

.cb-inspector #cb-animation-label,.cb-inspector #cb-easing-label { font-size:12px; line-height:1.4; color:#c4c4c4; }

.cb-ease-preview { display:block; width:100%; height:56px; border:1px solid #363b44; border-radius:4px; background:#191b20; box-sizing:border-box; }
.cb-ease-grid { fill:none; stroke:#414651; stroke-width:.7; stroke-dasharray:2 3; }
.cb-ease-curve { fill:none; stroke:#c2a0ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.cb-inspector .cb-smooth-mode-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cb-inspector #cb-easeMode-label { font-size:12px; line-height:1.4; color:#c4c4c4; }