/* SHAIN room panels (phones, iPads, laptops). Soft glass cards, muted green, one calm color per room.
   Everything is scoped to .room-mode so the PC command deck keeps its own look. */
.room-mode{
  --p-bg:#0d1411;--p-bg-2:#121b17;--p-card:rgba(26,36,31,.74);--p-card-solid:#18221d;--p-raised:rgba(38,51,44,.72);
  --p-line:rgba(170,210,185,.09);--p-line-strong:rgba(170,210,185,.2);--p-ink:#e8eee9;--p-muted:#93a398;--p-faint:#66766c;
  --p-green:#6dbb8c;--p-green-deep:#2d5e43;--p-shadow:0 18px 40px rgba(0,0,0,.35);--room-accent:var(--p-green);
  --p-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-family:var(--p-font);color:var(--p-ink);
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(84,140,108,.13),transparent 70%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(60,90,75,.12),transparent 70%),var(--p-bg);
}
.room-mode button:hover{border-color:var(--p-line-strong)!important}
.room-mode :focus-visible{outline:2px solid var(--room-accent);outline-offset:3px}

/* Top bar */
.room-mode .topbar{background:transparent;border-bottom:1px solid var(--p-line);backdrop-filter:blur(14px)}
.room-mode .brand{color:var(--p-ink);letter-spacing:4px;font-weight:600}.room-mode .brand small{color:var(--p-faint);font-family:var(--p-font)}
.room-mode .brand-mark{filter:saturate(.55)}
.room-mode .room-client{background:none;max-width:1400px;padding-top:16px}
.room-mode .room-client-top{margin-bottom:14px}
.room-mode .eyebrow,.room-mode .panel-label,.room-mode .room-mode-label,.room-mode .local-badge,.room-mode .model-label,.room-mode .quick-command>span{font-family:var(--p-font);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)}
.room-mode .local-badge{border:1px solid var(--p-line);background:var(--p-card);border-radius:99px;padding:6px 11px}
.room-mode .status-dot{background:var(--p-green);box-shadow:0 0 0 3px rgba(109,187,140,.15)}

/* Shared surfaces */
.room-mode .panel-card,.room-mode .device-card,.room-mode .room-hero,.room-mode .console-box,.room-mode .scene-card,.room-mode .room-hardware-note,.room-mode .quick-command{
  background:var(--p-card);border:1px solid var(--p-line);border-radius:20px;box-shadow:var(--p-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.room-mode .button,.room-mode .room-action,.room-mode #change-room{border-radius:99px;border:1px solid var(--p-line-strong);background:var(--p-raised);color:var(--p-ink);font-family:var(--p-font);font-weight:550;letter-spacing:0;text-transform:none}
.room-mode .primary-button{background:var(--room-accent);border-color:transparent;color:#0d1411}
.room-mode input,.room-mode select{border-radius:12px;border:1px solid var(--p-line-strong);background:rgba(10,16,13,.55);color:var(--p-ink);font-family:var(--p-font)}
.room-mode input[type=range]{accent-color:var(--room-accent);border:0;background:none}
.room-mode .pill-icon,.room-mode .room-dot{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:16px;line-height:1}

/* Overview layout: stacked on phones, 3D on top on portrait tablets, three columns on landscape tablets and laptops */
.room-mode #room-picker.overview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "stage" "rooms" "chips";gap:14px;align-content:start;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.overview-side{grid-area:side;display:flex;flex-direction:column;gap:10px}
.overview-stage{grid-area:stage;min-width:0}
.overview-rooms{grid-area:rooms;display:flex;flex-direction:column;gap:10px}
.overview-chips{grid-area:chips;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.room-mode .panel-label{margin:6px 4px 0}
.greeting-card{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.greeting-card h1{font-size:clamp(22px,2.3vw,27px);font-weight:600;letter-spacing:-.02em;margin:2px 0 0}
.greeting-card p{font-size:15px;color:var(--p-ink)}.greeting-card small{color:var(--p-muted);font-size:13px}
.overview-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.scene-pill{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:18px;border:1px solid var(--p-line);background:var(--p-card);min-height:64px}
.scene-pill .pill-icon{grid-row:1/3}.scene-pill strong{font-size:14px;font-weight:600}.scene-pill small{color:var(--p-muted);font-size:12px}
.scene-pill.day .pill-icon{background:rgba(226,180,94,.18);color:#e8c27a}.scene-pill.night .pill-icon{background:rgba(120,140,220,.18);color:#a7b4ef}
.room-mode .room-grid{display:flex;flex-direction:column;gap:8px;margin:0}
.room-row{--tone:var(--p-green);display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:99px;background:var(--p-card);border:1px solid var(--p-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.room-open{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;background:none;border:0;padding:4px;border-radius:99px}
.room-open .room-dot{grid-row:1/3;background:color-mix(in srgb,var(--tone) 22%,transparent);color:var(--tone)}
.room-open strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-open small{color:var(--p-muted);font-size:12.5px}
.light-toggle{flex:none;width:50px;height:30px;border-radius:99px;border:0;background:rgba(150,170,160,.22);position:relative;padding:0;transition:background .2s}
.light-toggle:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#e8eee9;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.light-toggle[aria-checked=true]{background:var(--tone)}.light-toggle[aria-checked=true]:after{transform:translateX(20px)}
.light-toggle:disabled,.light-toggle.is-idle,.scene-pill.is-idle{opacity:.4}
.status-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 14px 10px 10px;border-radius:18px;background:var(--p-card);border:1px solid var(--p-line)}
.status-chip .pill-icon{grid-row:1/3;width:32px;height:32px;font-size:14px;background:rgba(109,187,140,.14);color:var(--p-green)}
.status-chip strong{font-size:13px;font-weight:600}.status-chip small{font-size:12px;color:var(--p-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 3D house: frameless, rounded, softly lit */
.room-mode .model-card{border-radius:24px;border:1px solid var(--p-line);background:radial-gradient(ellipse at 50% 40%,#1d2d25,#111a16 70%);box-shadow:var(--p-shadow)}
.room-mode .model-card:before,.room-mode .model-card:after{display:none}
.room-mode .model-caption{top:16px;left:18px}.room-mode .model-view-name{font-family:var(--p-font);font-weight:600}
.room-mode .model-footer{font-family:var(--p-font);color:var(--p-muted)}.room-mode .model-live-dot{background:var(--p-green)}
.room-mode .icon-button{border-radius:50%;background:rgba(13,20,17,.6);border:1px solid var(--p-line-strong);backdrop-filter:blur(10px)}
.room-mode .spatial-label{font-family:var(--p-font);font-size:11px;font-weight:600;letter-spacing:0;border-radius:99px;padding:6px 11px;background:rgba(13,20,17,.72);border:1px solid var(--p-line-strong);color:var(--p-ink);backdrop-filter:blur(8px)}
.room-mode .spatial-label.active{background:var(--room-accent);color:#0d1411;border-color:transparent}
.room-mode .overview-stage .model-card{height:clamp(260px,46dvh,520px);margin:0}

/* Inside a room */
.room-mode .room-title-row h1{font-weight:600;letter-spacing:-.02em}
.room-mode .room-hero{background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--room-accent) 22%,transparent),transparent 65%),var(--p-card)}
.room-mode .room-hero .room-mode-label{color:var(--room-accent)}.room-mode .room-hero h2{font-weight:600;letter-spacing:-.02em}
.room-mode .room-hero p{color:var(--p-muted)}.room-mode .room-art{stroke:var(--room-accent);opacity:.75}
.room-mode .room-stats span{font-family:var(--p-font);color:var(--p-ink);background:var(--p-raised);border-radius:99px;padding:5px 10px}
.room-mode .room-section-nav{background:var(--p-card);border:1px solid var(--p-line);border-radius:99px;padding:4px;box-shadow:var(--p-shadow)}
.room-mode .room-section-nav button{border-radius:99px;font-family:var(--p-font);font-weight:550;letter-spacing:0;text-transform:none;color:var(--p-muted)}
.room-mode .room-section-nav button.active{background:var(--room-accent);color:#0d1411}
.room-mode .device-card{padding:18px}.room-mode .device-info h3{font-weight:600}.room-mode .device-subtitle,.room-mode .state-line{color:var(--p-muted);font-family:var(--p-font)}
.room-mode .device-symbol{border-radius:50%;background:color-mix(in srgb,var(--room-accent) 20%,transparent);color:var(--room-accent);border:0}
.room-mode .device-card button:not(.color-swatch):not(.icon-button){border-radius:14px}
.room-mode .room-client-footer{color:var(--p-faint);font-family:var(--p-font)}

@media (min-width:700px){
  .room-mode #room-picker.overview{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage stage" "side rooms" "chips chips"}
  .overview-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .room-mode .overview-stage .model-card{height:clamp(320px,44dvh,560px)}
}
@media (min-width:1000px) and (min-height:600px){
  .room-mode #room-picker.overview{height:100%;overflow:hidden;grid-template-columns:minmax(230px,270px) minmax(0,1fr) minmax(260px,310px);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"side stage rooms" "chips chips chips";padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .overview-side,.overview-rooms,.overview-stage{min-height:0}.overview-side,.overview-rooms{overflow:auto;scrollbar-width:none}
  .overview-scenes{grid-template-columns:minmax(0,1fr)}
  .room-mode .overview-stage .model-card{height:100%}
}