/* Solar Hub v0.5 Visual System — works with existing app shell and module popups */
body.visual-live main{max-width:1860px;width:100%;padding:22px 27px 28px}
body.visual-live main>.hero,body.visual-live main>.metrics,body.visual-live main>.section-head,body.visual-live main>.tiles,body.visual-live main>#detail,body.visual-live main>footer{display:none!important}
body.visual-live main>header{margin-bottom:17px}
body.visual-live .sidebar{background:linear-gradient(175deg,#210d19,#250d18 55%,#411022);border-right:1px solid #411e2c}
body.visual-live .brand{padding-bottom:36px}
body.visual-live .nav-btn{margin-bottom:2px}
body.visual-live #pageTitle{font-size:clamp(21px,2.2vw,30px)}
body.visual-live .visual-editor-nav{color:#ffe0a2;border:1px solid #704b31}
.vx-visitor,.vx-admin{display:flex;flex-direction:column;gap:15px;color:#321b28;font-family:Inter,system-ui,sans-serif}
.vx-photohero,.vx-admin-hero{--vx-image:none;background-image:linear-gradient(90deg,rgba(45,9,24,.98) 0%,rgba(62,8,28,.92) 37%,rgba(62,8,28,.16) 100%),var(--vx-image);background-color:#380f21;background-size:cover;background-position:center center;min-height:310px;border-radius:20px;position:relative;overflow:hidden;display:flex;align-items:center;box-shadow:0 16px 40px #4a1a251c;color:#fff}
.vx-shade{width:100%;padding:28px clamp(22px,4vw,56px)}
.vx-kicker,.vx-admin-hero>span,.vx-label{color:#ad6673;font-size:10px;letter-spacing:1.9px;font-weight:850;text-transform:uppercase}
.vx-kicker,.vx-admin-hero>span{color:#ffd365}
.vx-photohero h2{font-size:clamp(32px,3.5vw,59px);letter-spacing:-.7px;line-height:1.19;margin:15px 0;max-width:570px;text-shadow:0 2px 12px #0004}
.vx-photohero p,.vx-admin-hero p{color:#f6dfe2;font-size:clamp(12px,1.08vw,16px);max-width:580px;line-height:1.7}
.vx-hero-buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}
.vx-hero-buttons button,.vx-promos button{font-family:inherit;font-weight:790;border-radius:10px;padding:12px 16px;font-size:12px;cursor:pointer;transition:transform .16s,filter .16s}
.vx-hero-buttons button:hover,.vx-promos button:hover{transform:translateY(-2px);filter:brightness(1.07)}
.vx-gold,.vx-promos button{background:#ffba09;color:#341627;border:1px solid #fbc24a}
.vx-outline{background:#34142070;border:1px solid #c3a0a7;color:#fff}
.vx-hero-stamp{display:block;font-size:10px;color:#ffd06d;letter-spacing:1.6px;margin-top:30px}
.vx-disclaimer{margin:-4px 0 0;background:#fff6df;border:1px solid #f6df9d;color:#77531c;border-radius:12px;padding:11px 15px;font-size:11px;line-height:1.6}
.vx-public-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.vx-public-facts article{border:1px solid #efe6e4;border-radius:14px;padding:16px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:5px 9px;background:#fff;align-items:center;min-width:0}
.vx-fact-icon{grid-row:span 2;display:grid;place-items:center;border-radius:11px;background:#fff0cd;width:40px;height:42px;font-size:21px;color:#8f1938}
.vx-public-facts small{color:#947b83;font-size:10px}.vx-public-facts b{font-size:11px;font-weight:750;line-height:1.45}
.vx-section-head,.vx-admin-heading,.vx-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vx-section-head{margin:18px 0 2px}.vx-section-head h2,.vx-admin-heading h2{font-size:clamp(19px,2vw,27px);margin:6px 0 3px;color:#321725}
.vx-section-head p{font-size:11px;color:#917986;margin:0}.vx-section-head button,.vx-panel-head button{border:0;background:none;font-weight:700;color:#a16c2a;font-size:11px;cursor:pointer}
.vx-featured{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.vx-card{position:relative;display:flex;flex-direction:column;align-items:stretch;background:#fff;border-radius:16px;border:1px solid #f0e6e6;text-align:left;cursor:pointer;overflow:hidden;padding:0 0 16px;transition:transform .17s,box-shadow .17s;color:#3a1c29;min-width:0}
.vx-card:hover,.vx-highlight:hover{transform:translateY(-3px);box-shadow:0 16px 27px #4a1b2b20}
.vx-card-picture{height:clamp(95px,10vw,170px);display:block;background:#40212e center/cover no-repeat;border-radius:15px 15px 0 0}
.vx-card-icon{position:relative;margin:-18px 0 5px 12px;display:grid;place-items:center;border:4px solid #fff;width:41px;height:41px;border-radius:13px;background:#ffe5a4;font-size:17px}
.vx-card strong{font-size:12px;padding:0 13px;min-height:18px;line-height:1.4}.vx-card small{font-size:10px;line-height:1.5;color:#907883;padding:5px 32px 0 13px}
.vx-go{position:absolute;right:12px;bottom:12px;color:#a47431;border-radius:100%;background:#f9f4ed;width:22px;height:22px;display:grid;place-items:center}
.vx-highlights{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.vx-highlight{position:relative;border:0;background:#270c19;overflow:hidden;border-radius:13px;padding:0;cursor:pointer;min-height:128px;text-align:left;transition:transform .17s;isolation:isolate}
.vx-highlight img{width:100%;height:147px;object-fit:cover;display:block;opacity:.86}
.vx-highlight:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#150711ef);z-index:0}
.vx-highlight span{position:absolute;bottom:12px;left:12px;right:7px;z-index:1;color:white;display:grid;gap:4px}.vx-highlight b{font-size:12px}.vx-highlight small{font-size:10px;color:#f1d5dd;line-height:1.4}
.vx-journey,.vx-announcements,.vx-board-panel{background:#fff;border:1px solid #efe5e6;border-radius:15px;padding:17px 19px}
.vx-journey .vx-section-head{margin:0 0 16px}
.vx-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;position:relative}.vx-steps div{text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px;position:relative}.vx-steps div:not(:last-child):after{content:'→';color:#cba98c;position:absolute;right:-7px;top:6px;font-size:13px}
.vx-steps b{display:grid;place-items:center;border-radius:100%;width:32px;height:32px;color:white;background:#810a35;font-size:12px}.vx-steps strong{font-size:11px}.vx-steps small{font-size:9px;color:#8b7380;line-height:1.35}
.vx-announcements .vx-section-head{margin:0 0 9px}.vx-announcement{display:flex;align-items:flex-start;gap:12px;padding:10px 2px;border-bottom:1px solid #f1e7e6}.vx-announcement:last-child{border:0}.vx-announcement b{font-size:12px}.vx-announcement p{margin:3px 0 0;font-size:11px;color:#89747f}
.vx-empty{font-size:12px;color:#957f8a}.vx-promos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vx-promos article{--pimg:none;position:relative;min-height:215px;border-radius:17px;overflow:hidden;background-image:linear-gradient(90deg,#2c0e1de9,#40142679 65%,#40142624),var(--pimg);background-size:cover;background-position:center;display:flex;align-items:center;color:white}
.vx-promos article>div{padding:26px;max-width:75%}.vx-promos span{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#ffce61}.vx-promos h3{font-size:clamp(20px,2vw,28px);line-height:1.25;margin:8px 0}.vx-promos p{font-size:11px;color:#f8e4e6;line-height:1.6}.vx-promos button{padding:10px 16px}
.vx-footnote{padding:14px 3px;color:#9b8790;font-size:11px}
/* Operational view uses real role-scoped backend data; 0 counts never replaced by invented numbers. */
.vx-admin-hero{padding:32px 30px;min-height:235px;display:block}.vx-admin-hero h2{font-size:clamp(24px,3vw,43px);margin:13px 0 6px;color:#fff}.vx-admin-hero p{margin:0}
.vx-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;white-space:nowrap;padding:0 0 3px}.vx-tabs button{font-size:11px;font-weight:770;color:#664151;border:1px solid #ecdcdf;background:#fff;border-radius:11px;padding:11px 13px;cursor:pointer}.vx-tabs button.active,.vx-tabs button:hover{background:#7c092e;color:white;border-color:#7c092e}
.vx-pilot{color:#866414;background:#fff0c7;border-radius:10px;padding:9px;font-size:10px;font-weight:800}
.vx-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.vx-kpi{border-radius:15px;border:1px solid #ece3e6;background:#fff;padding:14px;min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 8px}
.vx-kpi>span{grid-row:span 3;background:#fff0d3;display:grid;place-items:center;border-radius:11px;width:37px;height:37px;font-size:18px}
.vx-kpi small{font-size:10px;color:#917883}.vx-kpi strong{font-size:clamp(16px,1.5vw,25px);font-weight:800;color:#551c32;overflow-wrap:anywhere;line-height:1.2}.vx-kpi em{font-style:normal;font-size:9px;color:#9b8491}
.vx-admin-panels{display:grid;grid-template-columns:1.5fr 1fr;gap:13px}
.vx-panel-head{margin-bottom:9px}.vx-panel-head h3{margin:0;color:#401c2d;font-size:15px}
.vx-meter{height:9px;background:#f4e8eb;border-radius:50px;overflow:hidden;margin:14px 0 6px}.vx-meter>span{height:100%;background:linear-gradient(90deg,#790a33,#f5ac18);display:block;border-radius:50px}
.vx-board-panel>p{color:#967b85;font-size:11px;line-height:1.6}
.vx-eventsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:15px}.vx-eventsteps button{background:#fdf9f7;border:1px solid #ede4e4;border-radius:10px;padding:9px 8px;text-align:left;display:grid;gap:6px;cursor:pointer;min-width:0}.vx-eventsteps span{display:grid;place-items:center;background:#f1e8dd;color:#8b2346;border-radius:8px;width:28px;height:28px}.vx-eventsteps span.completed{background:#d7f3df;color:#087c35}.vx-eventsteps span.active{background:#ffedaf;color:#845400}.vx-eventsteps strong{font-size:10px;overflow-wrap:anywhere}.vx-eventsteps small{font-size:9px;color:#947880;text-transform:capitalize}
.vx-board-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-items:center;margin:20px 0 13px}
.vx-mini-donut{--a:0%;width:128px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#870c35 var(--a),#f1e5e6 var(--a));display:grid;place-content:center;text-align:center;position:relative;isolation:isolate;color:#491e31}
.vx-mini-donut.green{background:conic-gradient(#158b56 var(--a),#e5f0e9 var(--a))}.vx-mini-donut:before{content:"";position:absolute;inset:17px;border-radius:50%;background:#fff;z-index:-1}.vx-mini-donut strong{font-size:23px}.vx-mini-donut small{font-size:10px;color:#917987}
.vx-actioncenters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.vx-actioncenters button{background:#fffaf0;border:1px solid #f2e3ca;padding:14px;border-radius:12px;cursor:pointer;font-weight:750;color:#58263d;font-size:11px;text-align:left;display:flex;justify-content:space-between;gap:9px}.vx-actioncenters button:hover{background:#fff0d1}
.vx-admin-lower{grid-template-columns:1.2fr 1fr}.vx-feed{display:grid;gap:3px;border-bottom:1px solid #f4eded;padding:9px 0}.vx-feed:last-child{border-bottom:0}.vx-feed b{font-size:11px;color:#592f40}.vx-feed small{font-size:10px;color:#937b82;overflow-wrap:anywhere}
.vx-error{padding:20px;background:#fff1f1;color:#8b2039;border-radius:13px}
/* Editor deliberately uses forms + secured API, not contenteditable HTML. */
.vx-editor{font-size:13px;color:#51303e}.vx-editor .vx-edit-notice{background:#fff7d9;border:1px solid #ecd89d;padding:12px;border-radius:11px;color:#855c22;line-height:1.6}
.vx-editor-tabs{display:flex;overflow-x:auto;gap:8px;margin:13px 0 17px}.vx-editor-tabs button{border:1px solid #ecdddf;color:#7c2947;font-weight:700;background:white;border-radius:10px;padding:11px;cursor:pointer;white-space:nowrap}.vx-editor-tabs .selected{background:#810726;color:white}
.vx-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.vx-editor-panel{border:1px solid #eadfe2;padding:16px;border-radius:14px}.vx-editor-panel:last-child:nth-child(odd){grid-column:span 2}.vx-editor-panel h3{font-size:15px;margin-bottom:12px}
.vx-edit-form label,.vx-editor-panel label,.vx-editor form>label{display:flex;flex-direction:column;gap:5px;color:#74525f;font-size:11px;font-weight:700;margin-bottom:12px}
.vx-edit-form input,.vx-edit-form textarea,.vx-edit-form select,.vx-editor-panel input,.vx-editor-panel textarea,.vx-editor-panel select,.vx-editor form>label input,.vx-editor form>label textarea{width:100%;padding:11px;border-radius:10px;border:1px solid #e5d9de;background:white;color:#341b27;font-size:12px;font-family:inherit}
.vx-editor textarea{resize:vertical}.vx-editor .vx-inline-label,.vx-edit-form .vx-inline-label{flex-direction:row;align-items:center}.vx-editor .vx-inline-label input,.vx-edit-form .vx-inline-label input{width:auto;min-width:17px;min-height:17px}
.vx-editor-row{display:flex;align-items:center;gap:13px;width:100%;background:white;border:1px solid #efe3e6;border-radius:12px;padding:11px;margin:8px 0;text-align:left;color:#4b2234;cursor:pointer}.vx-editor-row img{width:90px;height:60px;object-fit:cover;border-radius:8px}.vx-editor-row span:nth-child(2){flex:1}.vx-editor-row b{font-size:12px;display:block}.vx-editor-row small{display:block;font-size:10px;color:#907a83;margin-top:5px}.vx-editor-row>span:last-child{margin-left:auto}
.vx-editor-footer{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:20px 0 0}.vx-editor-footer>button{border:1px solid #e6d8df;background:#fff;border-radius:10px;padding:12px 14px;cursor:pointer;font-size:11px;font-weight:750}.vx-editor-footer span{font-size:10px;color:#aa8d98}
.vx-upload-panel{border-radius:12px;background:#fffaf1;padding:15px;margin:9px 0}.vx-upload-panel input{max-width:100%}.vx-image-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.vx-image-library div{padding:7px;background:#fff;border:1px solid #e9dfe2;border-radius:10px;min-width:0}.vx-image-library img{width:100%;height:105px;object-fit:cover;border-radius:8px}.vx-image-library small{font-size:9px;color:#8e7d83;overflow-wrap:anywhere}
.vx-login-preview img{height:180px;width:100%;object-fit:cover;border-radius:10px}.vx-login-preview p{margin-top:12px}
@media(min-width:1600px){.vx-card-picture{height:185px}.vx-highlight img{height:185px}.vx-photohero{min-height:380px}}
@media(max-width:1200px){.vx-featured{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.vx-public-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-actioncenters{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.vx-featured{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-highlights{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.vx-admin-panels{grid-template-columns:1fr}.vx-photohero{min-height:285px}.vx-card-picture{height:155px}}
@media(max-width:760px){body.visual-live main{padding:15px}.vx-public-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-featured{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-actioncenters{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-photohero{min-height:370px}.vx-photohero h2{font-size:34px}.vx-shade{padding:22px}.vx-promos{grid-template-columns:1fr}.vx-steps{grid-template-columns:repeat(3,1fr);row-gap:20px}.vx-editor-grid{grid-template-columns:1fr}.vx-editor-panel:last-child:nth-child(odd){grid-column:span 1}.vx-image-library{grid-template-columns:repeat(2,minmax(0,1fr))}.vx-admin-hero{min-height:250px}}
@media(max-width:430px){.vx-featured{gap:8px}.vx-card-picture{height:100px}.vx-card strong{font-size:10px}.vx-card small{font-size:9px}.vx-public-facts{gap:7px}.vx-public-facts article{padding:10px;grid-template-columns:30px 1fr}.vx-fact-icon{width:30px;height:32px;font-size:15px}.vx-kpi{padding:9px;gap:4px}.vx-kpi>span{width:30px;height:31px;font-size:14px}.vx-kpi strong{font-size:15px}.vx-eventsteps{grid-template-columns:repeat(2,1fr)}.vx-actioncenters button{font-size:10px;padding:9px}.vx-mini-donut{width:96px}.vx-promos article>div{max-width:91%}}

.vx-preview-bar{display:flex;gap:10px;justify-content:space-between;align-items:center;background:#fff2d7;border:1px solid #efce82;border-radius:12px;padding:10px 12px;color:#74521e;font-size:11px;font-weight:700}.vx-preview-bar button{border:1px solid #d4ad67;background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;color:#742c43;font-weight:800}