/* ===================================================
   ROOM SUITABILITY — PAGE STYLE
   Only page scope styles
=================================================== */

.heroGoal{
font-size:28px;
font-weight:900;
letter-spacing:-.5px;
margin-bottom:24px;
color:#111;
text-align:center;
}

.panel{
width:100%;
max-width:1250px;
background:#F7F4EF;
border-radius:22px;
border:1px solid rgba(80,70,55,.22);
padding:40px;
margin:0 auto;
box-shadow:
0 32px 70px rgba(70,50,30,.08),
0 1px 0 rgba(255,255,255,.7) inset;
}

.layout{
display:flex;
gap:40px;
}

.left{
flex:1;
display:flex;
flex-direction:column;
gap:18px;
}

.headRow{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding:18px;
border-radius:16px;
border:1px solid rgba(80,70,55,.18);
background:rgba(236,231,223,.55);
}

.kicker{
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#7b746a;
}

.frame{
font-size:13px;
color:#6e675e;
}

.lead{
font-size:18px;
font-weight:900;
color:#111;
}

.sub{
font-size:13px;
color:#6e675e;
}

.miniMeta{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}

.pill{
font-size:12px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(80,70,55,.18);
background:rgba(247,244,239,.7);
color:#6e675e;
}

/* ================= GRID ================= */

.scale{
font-size:13px;
color:#6e675e;
background:rgba(247,244,239,.75);
padding:6px 12px;
border-radius:999px;
border:1px solid rgba(80,70,55,.18);
align-self:flex-start;
margin-top:6px;
}

.gridWrap{
flex:1;
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:520px;
}

.grid{
position:relative;
border:1px solid rgba(0,0,0,.25);
border-radius:12px;
background:
linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px),
linear-gradient(90deg,rgba(0,0,0,.08) 1px, transparent 1px);
background-size:90px 90px;
}

.hintRow{
display:flex;
gap:10px;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-radius:16px;
border:1px solid rgba(80,70,55,.18);
background:rgba(236,231,223,.55);
}

.hint{
font-size:13px;
color:#6e675e;
}

.ghostBtn{
border:none;
background:transparent;
font-weight:900;
cursor:pointer;
color:#111;
padding:8px 10px;
border-radius:10px;
}

.boundary{
font-size:12px;
color:#6e675e;
margin-top:10px;
padding:12px 14px;
border-radius:14px;
border:1px dashed rgba(80,70,55,.25);
background:rgba(247,244,239,.55);
}

/* ================= RIGHT PANEL ================= */

.rightPanel{
width:340px;
display:flex;
flex-direction:column;
gap:20px;
}

.listPanel,
.editPanel,
.summaryPanel{
background:#ECE7DF;
border-radius:14px;
padding:20px;
border:1px solid rgba(0,0,0,.15);
}

.sectionBtn{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:#E6E0D6;
font-weight:900;
cursor:pointer;
margin-bottom:10px;
text-align:left;
}

.sectionBtn.active{
background:#111;
color:#fff;
}

input{
width:100%;
padding:10px;
margin-bottom:12px;
border-radius:8px;
border:1px solid rgba(0,0,0,.2);
}

.apply{
width:100%;
padding:12px;
border:none;
border-radius:10px;
background:#111;
color:#fff;
font-weight:900;
cursor:pointer;
}

.block{
position:absolute;
border:2px solid rgba(0,0,0,.5);
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:900;
cursor:pointer;
position:absolute;
user-select:none;
}

.block::after{
content:"↻";
position:absolute;
top:6px;
right:8px;
font-size:14px;
line-height:1;
color:rgba(17,17,17,.45);
opacity:.55;
transition:opacity .2s ease,color .2s ease,transform .2s ease;
pointer-events:none;
}

.block:hover::after{
opacity:.95;
color:rgba(17,17,17,.88);
transform:rotate(20deg);
}

.block.dragging{
cursor:grabbing;
}

.block.rotating{
transition:width .2s ease,height .2s ease;
}

.block.shake{
animation:blockShake .3s ease;
}

.bed{background:rgba(255,120,120,.30);}
.desk{background:rgba(120,160,255,.30);}
.wardrobe{background:rgba(255,200,120,.30);}
.chair{background:rgba(180,120,255,.30);}
.sofa{background:rgba(120,220,160,.30);}

.title{
font-weight:900;
margin-bottom:12px;
}

.summaryItem{
font-size:13px;
margin-bottom:6px;
display:flex;
justify-content:space-between;
}

@keyframes blockShake{
0%,100%{transform:translateX(0);}
20%{transform:translateX(-4px);}
40%{transform:translateX(4px);}
60%{transform:translateX(-3px);}
80%{transform:translateX(3px);}
}
/* ===================================================
   📱 MOBILE PATCH — ROOM SUITABILITY
=================================================== */

@media (max-width: 900px){

.heroGoal{
font-size:22px;
padding:0 10px;
}

.panel{
padding:22px;
border-radius:18px;
}

/* ⭐ 横排改竖排 */
.layout{
flex-direction:column;
gap:24px;
}

/* ⭐ 右侧面板全宽 */
.rightPanel{
width:100%;
}

/* ⭐ 头部改竖排 */
.headRow{
flex-direction:column;
align-items:flex-start;
}

/* ⭐ GRID 不撑爆 */
.gridWrap{
min-height:420px;
overflow:auto;
}

/* ⭐ 按钮更紧凑 */
.sectionBtn{
font-size:14px;
padding:10px;
}

}