/* Spotlight Studio 2.2 editor-only interface. Public site styles are unchanged. */
.studio-page {font-size:14px;}
.studio-page .studio-bar {gap:9px; padding:9px 14px; min-height:64px; flex-wrap:nowrap; background:#0f1220;}
.studio-bar .brand{font-size:1rem}.studio-bar .brand small{font-size:.6rem;letter-spacing:.02em;color:#abb2d2}
.studio-top-field{display:flex;flex-direction:column;gap:2px;color:#8f98b2;font-size:10px;line-height:1.1}
.studio-top-field input,.studio-top-field select{background:#1b2033;color:#f7f8ff;border:1px solid #323a53;border-radius:9px;min-height:34px;padding:6px 10px;font-size:12px;}
.studio-top-field input{width:140px!important}.studio-top-field select{width:140px!important}
.studio-tools{display:flex;gap:3px;padding:2px 6px;border-left:1px solid #31374b;border-right:1px solid #31374b}
.studio-tool-btn{border:1px solid #34394d;background:#202537;color:#dce2fd;border-radius:8px;min-width:33px;min-height:33px;padding:5px 8px;white-space:nowrap;font-size:12px}
.studio-tool-btn:hover,.studio-tool-btn:focus-visible{background:#343254;border-color:#7d6bff}
.studio-bar .btn{white-space:nowrap;padding:9px 13px;font-size:12px;min-height:35px}
.studio-bar .editor-nav-label{font-size:11px;color:#aeb6d0}
.studio-bar .editor-switch button{font-size:12px;padding:6px 8px}
.studio-bar .editor-view-switch button{padding:7px 10px;font-size:11px}
.studio-feedback{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:6px 14px;background:#171b2c;border-bottom:1px solid #2d3450;color:#a6b1d1;font-size:12px;min-height:31px}
#editor-message.good{color:#61e4b5}
.studio-feedback span:last-child{color:#737f9f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-page .editor-workspace{grid-template-columns:235px minmax(0,1fr) 350px}
.studio-page .editor-column{background:#131724;border-color:#313448}
.studio-page .studio-left,.studio-page .studio-right{min-width:0}
.studio-tab-bar{display:flex;position:sticky;top:0;z-index:10;background:#171a29;border-bottom:1px solid #363d50;padding:7px;gap:4px}
.studio-tab-bar button{flex:1;border:0;background:transparent;color:#98a6c4;border-radius:7px;font-size:12px;padding:10px 6px;cursor:pointer}
.studio-tab-bar button.active{background:#494080;color:white;font-weight:700}
.studio-right-tabs{flex-wrap:wrap;gap:3px}.studio-right-tabs button{flex-basis:29%;font-size:11px}
.studio-panel{padding:14px}.studio-panel[hidden],.studio-left section[hidden]{display:none!important}
.studio-sidebar-help{color:#96a1bb;font-size:12px;line-height:1.6;margin:10px 0 16px}
.studio-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#edf0fc;font-size:13px;margin-bottom:10px}
.studio-panel-heading button{background:#202743;border:1px solid #434a67;color:#bec8ee;padding:6px;border-radius:7px;font-size:11px;cursor:pointer}
.studio-breadcrumbs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:13px}
.studio-breadcrumbs button{background:#21253b;color:#a8c9fd;border:1px solid #333b54;border-radius:5px;padding:4px 7px;font-size:10px}
.studio-breadcrumbs button:last-child{background:#453b83;color:white}
.studio-field,.studio-field-label{display:flex;flex-direction:column;gap:6px;color:#dbe2f7;font-size:12px;font-weight:650;margin-bottom:13px}
.studio-field input,.studio-field textarea,.studio-field select,.studio-panel textarea,.studio-quick-style input,.studio-quick-style select{display:block;width:100%;box-sizing:border-box;min-height:36px;padding:9px 10px;border-radius:7px;border:1px solid #373e5b;background:#0d1120;color:#eef0fc;outline-offset:2px;font-size:12px}
.studio-field input[type=color]{padding:3px;height:40px}
.studio-field-label{margin:9px 0}
.studio-primary-small{display:block;background:#6d58d6;color:white;border:1px solid #8e74ff;padding:10px 12px;margin:10px 0;border-radius:9px;font-weight:750;font-size:12px;cursor:pointer;width:100%}
.studio-primary-small:hover{background:#806bf0}.studio-primary-small:disabled{opacity:.45;cursor:not-allowed}
.studio-ghost-small{display:block;background:transparent;border:1px solid #474761;color:#c7c8df;border-radius:8px;padding:10px 12px;width:100%;font-size:12px;cursor:pointer;margin:9px 0}
.studio-rich-toolbar{display:flex;gap:6px;border:1px solid #424865;background:#171b2e;border-radius:8px 8px 0 0;padding:6px}
.studio-rich-toolbar button{background:#242a46;color:white;border:1px solid #424962;border-radius:5px;min-width:33px;min-height:27px;font-size:12px}
.studio-rich-editor{color:#e9edfc;background:#0c1121;outline:none;border:1px solid #424865;border-top:0;border-radius:0 0 8px 8px;min-height:115px;max-height:280px;overflow:auto;padding:12px;white-space:normal;line-height:1.7;font-size:13px;overflow-wrap:anywhere}
.studio-rich-editor:focus{border-color:#8876f9;box-shadow:inset 0 0 0 1px #7962e8}
.studio-rich-editor a{color:#83bbff;text-decoration:underline}
.studio-rich-editor p{color:inherit}.studio-rich-editor h1,.studio-rich-editor h2,.studio-rich-editor h3{font-size:1.25rem}
.studio-targets{display:flex;flex-direction:column;gap:5px;max-height:320px;overflow-y:auto;padding:3px 0}
.studio-targets button{text-align:left;border:1px solid #383c54;background:#1a2036;color:#e0e8ff;border-radius:7px;padding:9px 10px;font-size:11px;line-height:1.4;word-break:break-word}
.studio-targets button:hover{border-color:#907aff;background:#262247}
.studio-details{border:1px solid #363950;border-radius:9px;padding:9px 12px;margin:17px 0;color:#d7dcf1}.studio-details summary{cursor:pointer;font-size:12px}
.studio-panel textarea{resize:vertical;line-height:1.5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.studio-element-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0}
.studio-element-actions button{background:#212740;color:#e0e5ff;border:1px solid #414967;border-radius:7px;padding:9px 6px;font-size:11px}
.studio-quick-style{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}
.studio-quick-style label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#bdc8e5}
.studio-quick-style input[type=color]{min-height:31px;padding:3px;width:100%}
.studio-quick-style .studio-full{grid-column:1/-1}
#styles{margin-top:14px;border-top:1px solid #2e334c}
.studio-left .studio-field{padding:0 12px}.studio-left .studio-primary-small{width:calc(100% - 24px);margin-left:12px}
.studio-left .studio-sidebar-help{padding:0 12px}
.studio-page .gjs-block{min-height:66px!important}
.studio-page .gjs-block-category .gjs-title{background:#20253c;color:#b8c5f5}
.studio-page .editor-live-preview.tablet-device iframe{width:768px;max-width:100%;flex:1;box-shadow:0 0 0 1px #45485e,0 0 45px #0008}
.studio-divider{border:0;border-top:1px solid #343a51;margin:22px 0}
.studio-page .gjs-editor{background:#080a12!important}
@media(max-width:1450px){.studio-page .studio-bar{flex-wrap:wrap}.studio-page .editor-workspace{grid-template-columns:190px minmax(0,1fr) 320px}}
@media(max-width:950px){.studio-page .editor-workspace{grid-template-columns:130px minmax(0,1fr) 290px}.studio-page .studio-top-field input{width:110px!important}.studio-page .studio-top-field select{width:110px!important}.studio-page .editor-view-switch button{padding:6px}}
@media(max-width:680px){.studio-page .editor-workspace{grid-template-columns:85px minmax(0,1fr)}.studio-page .studio-left .studio-tab-bar{flex-wrap:wrap}.studio-page .studio-left .studio-tab-bar button{font-size:10px;padding:6px 2px}.studio-page .studio-right{display:none}.studio-page .studio-feedback span:last-child{display:none}}

/* Studio 2.4 typography defaults and accurate viewport indicators. */
.studio-zoom-control{display:flex;align-items:center;gap:6px;font-size:11px;color:#afbbd7;white-space:nowrap}
.studio-zoom-control select{width:67px;min-height:33px;padding:4px 5px;background:#1b2033;color:#fff;border:1px solid #424a68;border-radius:8px;font-size:11px}
#studio-viewport{white-space:nowrap;color:#a9b6e5;border:1px solid #3c4364;border-radius:6px;padding:2px 9px}
.studio-design-defaults{font-size:11px;line-height:1.7;padding:12px;border:1px solid #4a4478;border-radius:10px;color:#cbd4ec;background:#22203a;margin:9px 0 15px;word-break:normal}
.studio-page .studio-quick-style{margin-top:8px}

/* Motion Designer · keyframe timeline */
.studio-right-tabs button{flex-basis:29%;font-size:11px}
.studio-motion-empty{padding:20px;border:1px dashed #625d8a;color:#c4c7e3;border-radius:12px;font-size:12px}
.studio-motion-two{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}
.studio-motion-two .studio-field{min-width:0;font-size:11px}
.studio-motion-two .studio-field input{min-width:0;padding:8px 6px}
.studio-motion-timeline-heading{display:flex;align-items:center;justify-content:space-between;margin:13px 0 20px;color:#eae6ff;font-size:12px}
.studio-motion-timeline-heading button{background:#292545;color:#dbd4ff;border:1px solid #7461c9;border-radius:7px;padding:6px 9px}
.studio-motion-timeline{padding:14px 15px 27px;background:#1b1c32;border:1px solid #43415d;border-radius:10px;margin:0 0 15px}
.studio-motion-track{position:relative;height:6px;border-radius:4px;background:linear-gradient(90deg,#7e61ef,#5ecaff);margin:14px 8px 20px}
.studio-motion-marker{position:absolute;top:50%;transform:translate(-50%,-50%);border:2px solid #8e74ff;background:#262148;color:#d9ddf9;border-radius:12px;min-width:43px;padding:5px 6px;cursor:pointer;font-size:10px;box-shadow:0 4px 10px #0006}
.studio-motion-marker.active{background:#8c6af7;color:white;border-color:white;z-index:2}
.studio-motion-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.studio-motion-actions button{margin:0;font-size:11px}
.studio-motion-actions #motion-preview{background:#227ebf;border-color:#4198ce}


/* Studio 2.6 text / element effects */
.studio-effect-grid .studio-field input[type=color]{min-height:40px;padding:3px;}
.sp-preview-outline{outline:1px dashed #8e74ff; outline-offset:4px;}

/* 2.7 · Global header & footer studio controls */
.studio-site-live-note{border:1px solid #4c5180;padding:12px;border-radius:10px;color:#bdc8ff;background:#202344;font-size:12px;line-height:1.6;margin:16px 0}
.studio-check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px}.studio-check input{width:auto!important;min-height:auto!important;accent-color:#8d74ff}
.studio-link-entry{border:1px solid #363e63;border-radius:10px;padding:9px;margin:7px 0;background:#1b2036}
.studio-link-fields{display:flex;flex-direction:column;gap:6px}.studio-link-fields input{display:block;width:100%;background:#0d1120;border:1px solid #464c6a;border-radius:6px;padding:9px;color:white;font-size:12px}
.studio-link-actions{display:flex;gap:5px;justify-content:flex-end;margin-top:7px}.studio-link-actions button{background:#303453;border:1px solid #555d80;border-radius:6px;color:white;padding:4px 10px}.studio-link-actions button:disabled{opacity:.38}
.studio-panel-heading button{background:#33375c;border:1px solid #57598a;color:#e9ebff;border-radius:7px;padding:5px 9px}

/* 2.8 — effects panel stays readable when an option label wraps. */
.studio-effect-grid .studio-field{min-width:0}
.studio-effect-grid select{max-width:100%}
.studio-effect-grid .studio-full{grid-column:1/-1}