/* NiteFade Design Studio 8: professional workspace, keeps original editing engine intact */
:root{--nf8-edge:#e6e0ee;--nf8-purple:#7950e5;--nf8-dark:#302744}
.studio-topbar{box-shadow:0 2px 13px rgba(34,20,57,.045)}
.studio-shell{grid-template-columns:84px minmax(280px,316px) minmax(0,1fr) 272px}
.studio-rail{position:relative;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:9px 6px;gap:4px}
.nf8-rail-switch{position:sticky;top:-9px;z-index:5;display:grid;gap:3px;width:100%;background:#fff;padding:8px 0 10px;border-bottom:1px solid var(--nf8-edge);margin-bottom:5px}
.nf8-rail-switch button{background:#faf8fd;border:0;border-radius:8px;min-height:28px;padding:6px 2px;font-size:10px;font-weight:850;color:#756580}
.nf8-rail-switch button[aria-pressed=true]{color:#6840cc;background:#eee6ff}
.nf8-rail-switch button:hover{background:#efeaff}
.studio-rail>.rail-btn{width:68px;min-height:57px;flex:none;gap:3px}
.studio-rail>.rail-btn b{font-size:21px}
.studio-rail>.rail-btn[hidden]{display:none!important}
.studio-rail .rail-bottom{position:sticky;bottom:-9px;background:#fff;width:100%;margin-top:auto;padding-top:6px;border-top:1px solid #f1ebf7}
.nf8-tool-finder{position:sticky;top:0;z-index:8;background:#fff;padding:12px 0 11px;margin-bottom:2px;border-bottom:1px solid #efeaf5}
.nf8-tool-finder label{display:block;font-size:10px;font-weight:850;color:#665184;letter-spacing:.01em;margin-bottom:7px}
#nf8-tool-query{width:100%;border:1px solid #e4daed;border-radius:10px;background:#fcfaff;padding:10px 12px;font-size:12px;color:#332845}
#nf8-tool-query:focus{outline:2px solid #bca1f3}
.nf8-tool-results{display:grid;gap:3px;border:1px solid #e6ddf0;background:#fff;border-radius:10px;padding:5px;margin-top:7px;max-height:260px;overflow-y:auto;box-shadow:0 9px 22px #29163c1a}
.nf8-tool-results button{border:0;text-align:left;background:transparent;border-radius:8px;padding:9px 10px;color:#514268;font-size:11px;font-weight:750}
.nf8-tool-results button:hover{background:#f2edff;color:#6542d7}
.nf8-tool-results button small{display:block;font-size:10px;color:#9587a2;font-weight:500;margin-top:3px}
.panel-heading{margin-bottom:16px}
.panel-heading h2{font-size:19px;line-height:1.2}
.panel-heading h2 small{display:none}
.panel-heading p{line-height:1.55;margin-bottom:10px}
.panel-content>.section-title{font-size:12px;margin:20px 0 12px}
.studio-sidebar,.studio-inspector{scrollbar-width:thin;scrollbar-color:#d6cbeb transparent}
.studio-inspector{padding:18px 17px 24px}
.inspector-title{position:sticky;top:-18px;z-index:4;background:#fff;padding:10px 0 14px}
.inspector-title h2{font-size:16px}
.nf8-selection-summary{background:linear-gradient(120deg,#f4efff,#fcfaff);padding:11px 12px;border:1px solid #e7def3;border-radius:11px;margin:12px 0;display:flex;flex-direction:column;gap:5px}
.nf8-selection-summary strong{font-size:12px;color:#543780;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nf8-selection-summary span{font-size:10px;color:#867398}
.nf8-inspector-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:11px 0 17px}
.nf8-inspector-actions button{min-height:34px;border:1px solid #e6ddf1;border-radius:8px;background:white;font-size:10px;font-weight:760;color:#584677;padding:6px 4px}
.nf8-inspector-actions button:hover{background:#f3edff;color:#6b45d2}
.nf8-inspector-actions button.nf8-danger{background:#fff5f7;border-color:#f2dbe0;color:#bd4564}
.empty-properties{margin-top:28px}
.empty-properties strong{display:block;margin:7px 0;font-size:15px}
.empty-properties p{max-width:235px;margin:0 auto 15px}
.nf8-empty-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.nf8-empty-actions button{padding:10px 4px;border:1px solid #e6ddf2;background:#fff;border-radius:9px;font-size:10px;font-weight:780;color:#7050bb}
.nf8-empty-actions button:hover{background:#f3ecff}
.nf8-inspector-section{border:1px solid #e7e0f0;border-radius:11px;margin:9px 0;overflow:hidden}
.nf8-inspector-section>summary{cursor:pointer;list-style:none;padding:12px;font-size:11px;font-weight:850;color:#5b467b;background:#faf8fd}
.nf8-inspector-section>summary::-webkit-details-marker{display:none}
.nf8-inspector-section>summary:after{content:"⌄";float:right;color:#9672de}
.nf8-inspector-section:not([open])>summary:after{transform:rotate(-90deg)}
.nf8-inspector-section>.nf8-photo-section-body{padding:10px 12px}
.nf8-layer-filterbar{padding:7px 0}
#nf8-layer-count{font-size:11px;font-weight:800;color:#66537d}
.nf8-layer-filters{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
.nf8-layer-filters button{border:1px solid #e7dff0;background:#fff;border-radius:9px;padding:7px 8px;font-size:10px;font-weight:750;color:#69557c}
.nf8-layer-filters button[aria-pressed=true]{background:#f1eaff;border-color:#c8aff9;color:#6a43ca}
.layer-card[hidden]{display:none!important}
.nf8-view-controls{display:flex;align-items:center;gap:3px;border-left:1px solid #e6e0ef;padding-left:7px}
.nf8-view-controls button{border:1px solid transparent;border-radius:7px;background:#fff;color:#655976;font-size:10px;font-weight:780;min-height:28px;padding:5px 7px}
.nf8-view-controls button:hover,.nf8-view-controls button[aria-pressed=false]{background:#f0ebff;color:#6944c9}
body.nf8-compact .panel-content{padding-top:14px}
body.nf8-compact .panel-heading{margin-bottom:9px}
body.nf8-compact .section-title{margin-top:13px;margin-bottom:8px}
body.nf8-compact .studio-rail>.rail-btn{min-height:45px}
body.nf8-compact .preset-grid button{min-height:67px}
body.nf8-compact .nf8-inspector-section>summary{padding:9px}
body.nf8-hide-tools .studio-shell{grid-template-columns:84px minmax(0,1fr) 272px}
body.nf8-hide-tools .studio-sidebar{display:none!important}
body.nf8-hide-inspector .studio-shell{grid-template-columns:84px minmax(280px,316px) minmax(0,1fr)}
body.nf8-hide-inspector .studio-inspector{display:none!important}
body.nf8-hide-tools.nf8-hide-inspector .studio-shell{grid-template-columns:84px minmax(0,1fr)}
.canvas-toolbar{gap:8px}
.toolbar-actions{min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#nf8-empty-demo{background:#f4eefe;color:#6642c5;border:1px solid #e3d4fb;border-radius:9px;padding:9px}
@media(max-width:1400px){
 .studio-shell{grid-template-columns:78px minmax(260px,285px) minmax(0,1fr) 244px}
 .nf8-view-controls button{font-size:9px;padding:5px}
 body.nf8-hide-tools .studio-shell{grid-template-columns:78px minmax(0,1fr) 244px}
 body.nf8-hide-inspector .studio-shell{grid-template-columns:78px minmax(260px,285px) minmax(0,1fr)}
 body.nf8-hide-tools.nf8-hide-inspector .studio-shell{grid-template-columns:78px minmax(0,1fr)}
}
@media(max-width:1180px){
 .studio-shell{grid-template-columns:72px 268px minmax(0,1fr)}
 .nf8-view-controls #nf8-props-toggle{display:none}
 body.nf8-hide-tools .studio-shell,body.nf8-hide-tools.nf8-hide-inspector .studio-shell{grid-template-columns:72px minmax(0,1fr)}
 body.nf8-hide-inspector .studio-shell{grid-template-columns:72px 268px minmax(0,1fr)}
}
@media(max-width:850px){
 .studio-shell,body.nf8-hide-tools .studio-shell,body.nf8-hide-inspector .studio-shell,body.nf8-hide-tools.nf8-hide-inspector .studio-shell{grid-template-columns:64px minmax(0,1fr)}
 .studio-rail{padding:7px 2px}
 .studio-rail>.rail-btn{width:57px}
 .nf8-rail-switch{top:-7px}
 .nf8-rail-switch button{font-size:9px}
 .nf8-view-controls{margin-left:4px}
 .nf8-view-controls button{font-size:9px;padding:3px}
 .studio-sidebar{left:64px}
}
@media(max-width:600px){
 .studio-rail>.rail-btn{width:53px;min-height:48px}
 .nf8-rail-switch button{min-height:26px}
 .nf8-view-controls #nf8-density-toggle{display:none}
}