.custom-editor-frame { --content-max:980px; }
.custom-editor-screen { gap:14px; padding-bottom:116px; }
.custom-editor-header { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; }
.custom-title-wrap { min-width:0; }.custom-title-wrap .eyebrow { margin-bottom:1px; }
.custom-title-input { width:min(100%,420px); height:36px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text); padding:0 7px; font:800 27px/1 var(--font-display,system-ui); letter-spacing:-.035em; }
.custom-title-input:hover { border-color:rgba(114,141,225,.3); background:rgba(10,22,58,.3); }.custom-title-input:focus { outline:none; border-color:#54d9ff; background:rgba(10,22,58,.74); box-shadow:0 0 0 2px rgba(84,217,255,.12); }
.editor-back-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:rgba(33,43,91,.72); font-size:30px; line-height:1; }
.bridge-state { align-self:start; margin-top:3px; border:1px solid rgba(251,113,133,.4); border-radius:999px; padding:6px 9px; color:#ffb4c0; font-size:10px; font-weight:700; white-space:nowrap; }
.bridge-state.connected { color:#78f0c8; border-color:rgba(52,211,153,.45); background:rgba(10,72,67,.28); }
.custom-property-grid input,.custom-property-grid select { min-height:40px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--text); padding:0 10px; }

.custom-workbench { display:grid; grid-template-columns:354px minmax(280px,1fr); align-items:start; gap:14px; }
.custom-canvas-column { min-width:0; }
.custom-quick-tools { display:flex; gap:6px; overflow-x:auto; padding:2px 1px 9px; scrollbar-width:thin; }
.custom-quick-tools button { flex:0 0 auto; min-height:36px; padding:0 10px; border:1px solid rgba(114,141,225,.38); border-radius:10px; background:rgba(13,28,72,.78); font-size:12px; font-weight:750; }
.custom-quick-tools button span { margin-left:3px; font-size:10px; font-weight:650; }
.custom-quick-tools .guide-toggle.active { border-color:#54d9ff; color:#7be6ff; background:rgba(26,68,111,.82); }
.custom-canvas-shell { width:100%; overflow-x:auto; padding:10px; border:1px solid rgba(111,197,255,.25); border-radius:18px; background:rgba(2,7,24,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 14px 36px rgba(0,0,0,.24); }
.custom-canvas { position:relative; width:320px; height:240px; margin:0 auto; overflow:hidden; background:#020718 center/100% 100% no-repeat; box-shadow:0 0 0 1px rgba(255,255,255,.15); touch-action:none; }
.custom-canvas.background-selected { box-shadow:0 0 0 2px #54d9ff,0 0 18px rgba(84,217,255,.28); cursor:move; }
.custom-canvas-widget { position:absolute; display:block; overflow:visible; padding:0; border:1px solid transparent; background:transparent; line-height:1.05; white-space:nowrap; touch-action:none; user-select:none; cursor:move; }
.custom-canvas-widget > span { display:block; width:100%; height:100%; overflow:hidden; line-height:inherit; pointer-events:none; }
.custom-canvas-widget.animation { background-position:center; background-repeat:no-repeat; background-size:100% 100%; }
.custom-canvas-widget.selected { border:1px solid #54d9ff; background-color:rgba(20,46,99,.16); box-shadow:0 0 0 1px rgba(2,7,24,.8),0 0 12px rgba(84,217,255,.45); }
.custom-canvas-widget.locked { cursor:default; }.custom-canvas-widget.locked.selected { border-style:dashed; }
.custom-canvas-widget [data-custom-resize] { position:absolute; right:-6px; bottom:-6px; width:13px; height:13px; border:2px solid #071126; border-radius:3px; background:#54d9ff; cursor:nwse-resize; }
.custom-button-guide { position:absolute; z-index:240; top:197px; height:35px; display:grid; place-items:center; border:1px dashed rgba(255,255,255,.84); border-radius:13px; background:rgba(0,9,28,.55); color:#fff; font:700 9px/1 system-ui; letter-spacing:.02em; pointer-events:none; }
.custom-button-guide.previous { left:10px; width:96px; }.custom-button-guide.center { left:106px; width:108px; border-color:rgba(255,205,92,.72); color:#ffe29a; }.custom-button-guide.next { left:214px; width:96px; }
.custom-canvas-meta { display:flex; justify-content:space-between; gap:8px; padding:8px 2px 0; color:var(--text-dim); font-size:11px; }

.custom-layer-panel,.custom-inspector,.custom-editor-section { border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(27,40,92,.65),rgba(12,18,49,.82)); }
.custom-layer-panel { margin-top:12px; padding:13px; }
.custom-inspector { position:sticky; top:10px; padding:15px; min-height:230px; }
.custom-inspector [hidden] { display:none !important; }
.custom-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:11px; }
.custom-section-heading h2 { margin:0 0 3px; font-size:16px; }.custom-section-heading p { margin:0; color:var(--text-dim); font-size:10px; }
.custom-layer-list { display:flex; flex-direction:column; gap:6px; }
.custom-layer-row { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px 34px; align-items:center; min-height:43px; border:1px solid rgba(114,141,225,.24); border-radius:11px; background:rgba(5,14,42,.5); overflow:hidden; }
.custom-layer-row.selected { border-color:#54d9ff; background:rgba(19,53,91,.74); box-shadow:0 0 0 1px rgba(84,217,255,.16); }
.custom-layer-main { min-width:0; display:flex; align-items:center; gap:8px; padding:0 9px; text-align:left; }
.custom-layer-main span { flex:0 0 25px; height:25px; display:grid; place-items:center; border-radius:7px; background:rgba(105,120,255,.2); color:#73deff; font-size:9px; font-weight:800; }
.custom-layer-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.custom-layer-eye,.custom-layer-lock,.custom-layer-remove { height:100%; color:#91e9ff; font-size:13px; }.custom-layer-eye:not(.on) { color:#69759f; }.custom-layer-lock { filter:grayscale(1); opacity:.62; font-size:14px; }.custom-layer-lock.on { filter:none; opacity:1; background:rgba(84,217,255,.08); }.custom-layer-remove { color:#ff91a4; font-size:19px; }

.inspector-heading { padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.08); }
.custom-check-row { display:flex; align-items:center; gap:9px; min-height:39px; margin-bottom:10px; padding:0 10px; border:1px solid rgba(114,141,225,.28); border-radius:10px; background:rgba(8,19,53,.55); color:var(--text-soft); font-size:11px; font-weight:700; }
.custom-check-row input { width:17px; height:17px; accent-color:#54d9ff; }
.custom-property-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.custom-property-grid label { min-width:0; display:flex; flex-direction:column; gap:5px; color:var(--text-soft); font-size:9px; font-weight:700; }
.custom-property-grid label.wide { grid-column:1/-1; }.custom-property-grid label.wide b { align-self:flex-end; margin-top:-23px; margin-right:7px; pointer-events:none; }
.custom-property-grid input[type="color"] { width:100%; padding:4px; }.custom-property-grid input[type="range"] { padding:0 44px 0 8px; }
.custom-range-field > span { display:flex; justify-content:space-between; gap:8px; }.custom-range-field > span b { color:#77e4ff; font-size:9px; }
.custom-style-toggles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.custom-style-toggles label { position:relative; display:block; }
.custom-style-toggles input { position:absolute; opacity:0; pointer-events:none; }
.custom-style-toggles span { min-height:38px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(114,141,225,.35); border-radius:10px; background:rgba(13,28,72,.72); color:var(--text-soft); font-size:9px; }
.custom-style-toggles input:checked + span { border-color:#54d9ff; color:#fff; background:rgba(32,83,135,.82); box-shadow:0 0 12px rgba(84,217,255,.2); }
.custom-style-toggles input:disabled + span { opacity:.42; }
.custom-delete,.custom-refresh { color:#ff9cad; font-size:11px; font-weight:700; }.custom-refresh { color:#7be6ff; margin-bottom:8px; }
.custom-inspector-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.custom-inspector-actions button { min-height:38px; border:1px solid rgba(114,141,225,.35); border-radius:10px; background:rgba(13,28,72,.72); font-size:10px; font-weight:700; }.custom-inspector-actions .danger { color:#ff9cad; }
.custom-empty-inspector { min-height:150px; display:grid; place-items:center; padding:20px; color:var(--text-dim); text-align:center; font-size:11px; line-height:1.5; }
.custom-inspector-assets { margin-top:14px; }
.custom-inspector-assets .custom-template-row { grid-template-columns:repeat(3,minmax(0,1fr)); }

.custom-editor-section { padding:0; overflow:hidden; }
.custom-editor-section > summary { min-height:57px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:0 15px; cursor:pointer; list-style:none; }
.custom-editor-section > summary::-webkit-details-marker { display:none; }.custom-editor-section > summary::after { content:"⌄"; color:#74deff; font-size:18px; }.custom-editor-section:not([open]) > summary::after { transform:rotate(-90deg); }
.custom-editor-section > summary strong { font-size:15px; }.custom-editor-section > summary span { color:var(--text-dim); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.custom-assets-body { padding:0 15px 15px; border-top:1px solid rgba(255,255,255,.07); }
.custom-template-row { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; padding-top:13px; }
.custom-template { min-height:62px; border:1px solid var(--line); border-radius:11px; background:rgba(8,18,52,.76); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:9px; overflow:hidden; }
.custom-template span { width:24px; height:24px; border-radius:50%; background:#5bd9ff; box-shadow:0 0 12px currentColor; }.custom-template-break span { background:#e38aff; }.custom-template-lunch span { background:#ffad45; }.custom-template-meeting span { background:#8e80ff; }.custom-template-away span { background:#55e2d2; }
.custom-template.active { border-color:#54d9ff; box-shadow:0 0 0 1px rgba(84,217,255,.32); }.custom-upload { cursor:pointer; }.custom-upload input { display:none; }.custom-upload span { display:grid; place-items:center; background:rgba(255,255,255,.06); box-shadow:none; font-size:20px; }
.custom-media-help { margin:9px 0 0; color:var(--text-dim); font-size:10px; line-height:1.45; }

.custom-budget { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.custom-budget div { min-height:60px; padding:10px; border:1px solid var(--line); border-radius:13px; background:rgba(15,28,70,.72); display:flex; flex-direction:column; justify-content:space-between; }.custom-budget span { color:var(--text-dim); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }.custom-budget strong { font-size:12px; }
.custom-library { display:flex; flex-direction:column; gap:8px; }.custom-library-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(5,14,42,.58); }.custom-library-item div { display:flex; flex-direction:column; gap:3px; }.custom-library-item strong { font-size:12px; }.custom-library-item span { color:var(--text-dim); font-size:10px; }.custom-library-item button { border:1px solid rgba(84,217,255,.4); border-radius:9px; padding:7px 10px; color:#72ddff; font-size:10px; font-weight:700; }
.custom-publish-bar { position:absolute; z-index:25; left:14px; right:14px; bottom:max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1.55fr; gap:10px; padding:10px; border:1px solid var(--line); border-radius:20px; background:rgba(8,16,48,.94); backdrop-filter:blur(20px); box-shadow:0 16px 45px rgba(0,0,0,.42); }.custom-publish-bar button { min-height:46px; }

@media (max-width:760px) {
  .custom-editor-frame { --content-max:520px; }.custom-workbench { grid-template-columns:1fr; }.custom-inspector { position:static; min-height:0; }.custom-template-row { grid-template-columns:repeat(3,1fr); }.custom-budget { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:370px) {
  .custom-editor-screen { padding-left:8px; padding-right:8px; }.custom-canvas-shell { padding:5px; }.custom-quick-tools button span { display:none; }.custom-template-row,.custom-inspector-assets .custom-template-row { grid-template-columns:repeat(2,1fr); }
}