
/* V102.00 — compact 3D studio, center-first layout, 27 visual placement slots */
@media (min-width:1181px){
  html,body,.app{height:100%;overflow:hidden}
  .topbar{padding:7px 10px;gap:8px}
  .brand-mark{width:34px;height:34px;border-radius:10px}
  .brand h1{font-size:13px}.brand p{font-size:9px;margin-top:1px}
  .top-actions{gap:5px}.top-actions .btn,.studio-nav .btn{padding:6px 8px;font-size:10px;border-radius:8px}
  .workspace{
    height:calc(100vh - 50px);
    grid-template-columns:218px minmax(0,1fr) 226px;
    gap:7px;padding:7px;max-width:none;margin:0;
  }
  .panel{border-radius:11px}
  .panel-head{padding:7px 9px}.panel-head h2{font-size:11px}.panel-head .mini{padding:4px 6px;font-size:9px}
  .panel-body{padding:7px}
  .left-panel .panel-body,.right-panel .panel-body{max-height:calc(100vh - 93px);overflow:auto;scrollbar-width:thin}
  .section{padding-bottom:7px;margin-bottom:7px}.section-title{font-size:9px;margin-bottom:5px}
  .field{margin-bottom:5px}.field label{font-size:9px;margin-bottom:3px}
  .control{padding:6px 7px;border-radius:7px;font-size:10px;min-height:29px}
  .row2{gap:5px}.helper{font-size:8.5px;line-height:1.3;margin:4px 0}
  .component-add{gap:4px}.selected-list{gap:4px;max-height:170px}
  .selected-card{padding:5px;border-radius:7px}.selected-card strong{font-size:9px}.selected-card small{font-size:8px;margin-top:1px}
  .mini{padding:3px 5px;font-size:9px}
  .stage-toolbar{height:52px;padding:4px 6px;gap:5px;flex-wrap:nowrap}
  .stage-toolbar .group{gap:4px;flex-wrap:nowrap}
  .pill{padding:5px 7px;font-size:9px;white-space:nowrap}
  .view-tabs{padding:2px}.view-tab{padding:5px 7px;font-size:9px}
  .stage-wrap{min-height:0;height:calc(100vh - 129px)}
  .scene-shell{inset:40px 1.5% 44px}
  .scene{width:min(860px,94%);max-height:100%}
  .sunrise{left:7px;top:6px;padding:5px 7px;font-size:8px;border-radius:8px}
  .stage-bottom{bottom:5px;padding:4px;gap:4px;border-radius:9px}
  .stage-bottom .btn{font-size:9px;padding:5px 7px}
  .statusbar{padding:4px 8px;font-size:8px}
  .analysis-empty{padding:12px 5px;font-size:10px}
  .score-ring{width:76px;height:76px;margin:2px auto 7px}.score-ring:before{inset:6px}.score-ring strong{font-size:18px}
  .legend{gap:3px;margin:5px 0 7px}.legend-item{padding:4px 2px;font-size:8px}.legend-item b{font-size:12px}
  .result-list{gap:4px;max-height:190px}.result{padding:5px}.result strong{font-size:9px}.result small{font-size:8px}
  .selected-editor{gap:5px}.editor-actions{gap:3px}.editor-actions .btn{padding:5px 2px;font-size:8px}
  .seo-public-content{display:none!important}
}

/* Compass belongs to toolbar, not over the 3D house. */
.toolbar-compass{
  position:relative!important;right:auto!important;top:auto!important;z-index:8;
  width:44px!important;height:44px!important;min-width:44px!important;border-radius:50%;
  flex:0 0 44px;background:#080b0c!important;margin:0 2px;
}
.toolbar-compass:before{height:34px!important;left:21px!important;top:5px!important}
.toolbar-compass:after{width:34px!important;top:21px!important;left:5px!important}
.toolbar-compass .n{top:1px!important;left:19px!important;font-size:7px!important}
.toolbar-compass .s{bottom:1px!important;left:19px!important;font-size:7px!important}
.toolbar-compass .e{right:2px!important;top:18px!important;font-size:7px!important}
.toolbar-compass .w{left:2px!important;top:18px!important;font-size:7px!important}

/* 3 blocks inside every broad Vaastu direction/corner = 27 placement guides. */
.placement-slot{
  position:absolute;z-index:1;pointer-events:none;
  border:1px dashed rgba(242,212,141,.18);
  background:linear-gradient(180deg,rgba(215,170,82,.018),rgba(255,255,255,.008));
  border-radius:3px;
}
.placement-slot:nth-of-type(3n){border-right-color:rgba(242,212,141,.32)}
.zone-label{
  z-index:2;font-size:7px!important;opacity:.55;
  writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(45deg)!important;
  letter-spacing:.04em!important;
}

/* Narrow default component cards fit the three sub-slots. Names remain readable vertically. */
.component{padding:2px;z-index:3}
.component span{
  font-size:8px!important;line-height:1!important;
  writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(45deg)!important;
  max-height:92%;overflow:hidden;
}
.component span small{font-size:6.5px!important}
.resize-handle{width:9px;height:9px;right:-4px;bottom:-4px}
