:root {
  --rd-gold: #d6b777;
  --rd-cream: #eee9df;
  --rd-muted: #928f88;
  --rd-line: rgba(255,255,255,.11);
  --rd-panel: rgba(13,14,14,.94);
}

#externalView.rd-detail-ready,
#appsView.rd-detail-ready {
  display: block !important;
  bottom: 112px !important;
}

#externalView.rd-detail-ready > .external-stage,
#externalView.rd-detail-ready > .external-side,
#appsView.rd-detail-ready > .atelier-stage,
#appsView.rd-detail-ready > .apps-shelf {
  display: none !important;
}

.rd-detail-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--rd-cream);
}

/* IPTV · external input */
.rd-external-detail {
  display: grid;
  grid-template-rows: minmax(0,1fr) 104px;
  gap: 12px;
}

.rd-external-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #07090a;
  isolation: isolate;
  box-shadow: 0 26px 74px rgba(0,0,0,.34);
}

.rd-external-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: opacity .25s ease, transform .55s ease;
}

.rd-external-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgba(4,6,7,.88),rgba(4,6,7,.36) 50%,rgba(4,6,7,.06)), linear-gradient(0deg,rgba(3,4,5,.75),transparent 42%);
}

.rd-external-stage[data-source="iptv"]::before { background-image: url('./assets/iptv_city_night_v3.png'); }
.rd-external-stage[data-source="cast"]::before { background-image: url('./assets/cast_livingroom_v5.png'); }
.rd-external-stage[data-source="hdmi1"]::before { background-image: radial-gradient(circle at 72% 43%,rgba(85,127,255,.48),transparent 19%), radial-gradient(circle at 72% 43%,rgba(49,84,201,.32),transparent 34%), linear-gradient(135deg,#07111f,#130a1c 58%,#061015); }
.rd-external-stage[data-source="hdmi2"]::before { background-image: radial-gradient(circle at 72% 24%,rgba(214,183,119,.18),transparent 28%), linear-gradient(145deg,#172022,#080a0b 64%,#050606); }

.rd-external-head {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.rd-external-brand,
.rd-external-statuses { display: flex; align-items: center; gap: 9px; }
.rd-external-brand b { font-size: 12px; font-weight: 650; letter-spacing: .24em; }
.rd-external-brand span { color: #b7b2aa; font-size: 8px; letter-spacing: .12em; }
.rd-external-statuses span { min-height: 27px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(4,6,7,.42); color: #d2cec5; font-size: 7px; letter-spacing: .09em; backdrop-filter: blur(12px); }
.rd-external-statuses .is-safe { border-color: rgba(140,191,155,.33); color: #a8d2b2; }
.rd-external-statuses .is-live { border-color: rgba(214,183,119,.44); color: #ecd4a2; }

.rd-external-copy {
  position: absolute;
  left: 34px;
  bottom: 42px;
  width: min(580px,58%);
}

.rd-external-copy small { color: var(--rd-gold); font-size: 8px; letter-spacing: .18em; }
.rd-external-copy h1 { margin: 10px 0 9px; font: 400 clamp(34px,3.4vw,55px)/.98 Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
.rd-external-copy p { margin: 0; color: #cbc7bf; font-size: 10px; line-height: 1.7; }
.rd-external-notice { margin-top: 17px; display: inline-flex; align-items: center; gap: 10px; color: #aaa69e; font-size: 8px; }
.rd-external-notice i { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-gold); box-shadow: 0 0 11px rgba(214,183,119,.48); }

.rd-external-bar {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 12px;
}

.rd-source-list,
.rd-external-quick {
  border: 1px solid var(--rd-line);
  border-radius: 19px;
  background: var(--rd-panel);
}

.rd-source-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; padding: 7px; }
.rd-source-button { position: relative; min-width: 0; padding: 0 13px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #aaa69e; text-align: left; cursor: pointer; }
.rd-source-button small { color: #77746f; font-size: 7px; letter-spacing: .1em; }
.rd-source-button b { display: block; margin-top: 6px; color: #ddd8cf; font-size: 12px; font-weight: 560; }
.rd-source-button i { position: absolute; top: 13px; right: 13px; width: 6px; height: 6px; border-radius: 50%; background: #5c5f5d; }
.rd-source-button.active { border-color: rgba(214,183,119,.50); background: rgba(214,183,119,.08); }
.rd-source-button.active small { color: #c7a865; }
.rd-source-button.active b { color: #f1dfb7; }
.rd-source-button.active i { background: #91c59f; box-shadow: 0 0 10px rgba(145,197,159,.55); }

.rd-external-quick { display: grid; grid-template-columns: minmax(0,1fr) 50px; gap: 8px; align-items: center; padding: 10px; }
.rd-volume { min-width: 0; }
.rd-volume-head { display: flex; justify-content: space-between; color: #96928b; font-size: 8px; }
.rd-volume-head b { color: #dcd7ce; font-size: 9px; font-weight: 560; }
.rd-volume input { width: 100%; margin-top: 10px; accent-color: #c5a35f; }
.rd-external-full { width: 50px; height: 50px; border: 1px solid rgba(214,183,119,.37); border-radius: 14px; background: rgba(214,183,119,.08); color: #e7ca90; cursor: pointer; font-size: 16px; }

/* apps */
.rd-apps-detail {
  display: grid;
  grid-template-rows: 62px minmax(0,1fr) 104px;
  gap: 11px;
}

.rd-apps-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rd-apps-title small { color: var(--rd-gold); font-size: 8px; letter-spacing: .18em; }
.rd-apps-title h1 { display: inline; margin: 0 0 0 14px; font: 400 30px/1 Georgia,"Times New Roman",serif; }
.rd-apps-meta { display: flex; gap: 8px; }
.rd-apps-meta span { min-height: 27px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--rd-line); border-radius: 999px; background: rgba(255,255,255,.025); color: #99958e; font-size: 7px; letter-spacing: .08em; }
.rd-apps-meta .is-ready { color: #9ecaaa; border-color: rgba(140,191,155,.25); }

.rd-apps-main { min-height: 0; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 11px; }
.rd-recent-panel,
.rd-atelier-panel,
.rd-other-apps { border: 1px solid var(--rd-line); border-radius: 21px; background: var(--rd-panel); }
.rd-recent-panel { min-width: 0; display: grid; grid-template-rows: 48px minmax(0,1fr); padding: 13px; }
.rd-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rd-section-head b { font-size: 11px; font-weight: 560; }
.rd-section-head span { color: #77746f; font-size: 7px; letter-spacing: .09em; }
.rd-recent-grid { min-height: 0; display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 9px; }
.rd-app-feature { position: relative; min-width: 0; overflow: hidden; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; color: #fff; text-align: left; cursor: pointer; isolation: isolate; }
.rd-app-feature::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--rd-app-bg); transition: transform .35s ease; }
.rd-app-feature::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,rgba(4,5,6,.86),rgba(4,5,6,.05) 72%); }
.rd-app-feature:hover::before,.rd-app-feature:focus-visible::before { transform: scale(1.04); }
.rd-app-feature:hover,.rd-app-feature:focus-visible { outline: none; border-color: rgba(214,183,119,.55); }
.rd-app-feature.youtube { --rd-app-bg: radial-gradient(circle at 70% 34%,rgba(255,255,255,.18),transparent 19%),linear-gradient(145deg,#d51b1b,#6e0608); }
.rd-app-feature.netflix { --rd-app-bg: linear-gradient(145deg,#1b1b1b,#060606); }
.rd-app-feature.tving { --rd-app-bg: radial-gradient(circle at 76% 20%,rgba(255,62,116,.34),transparent 30%),linear-gradient(145deg,#2a1827,#100d14); }
.rd-app-feature strong { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: rgba(5,6,7,.38); font-size: 17px; backdrop-filter: blur(10px); }
.rd-app-feature.youtube strong { background: #f31313; }
.rd-app-feature.netflix strong { color: #e50914; font-size: 25px; font-family: Arial,sans-serif; }
.rd-app-feature.tving strong { color: #ff4c7c; font-size: 9px; }
.rd-app-feature span { position: absolute; right: 15px; bottom: 15px; left: 15px; }
.rd-app-feature b { display: block; font-size: 13px; font-weight: 570; }
.rd-app-feature small { display: block; margin-top: 5px; color: rgba(255,255,255,.62); font-size: 7px; }

.rd-atelier-panel { position: relative; overflow: hidden; padding: 18px; text-align: left; color: #f1ede5; cursor: pointer; isolation: isolate; }
.rd-atelier-panel::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 68% 46%,rgba(235,218,185,.88) 0 10%,rgba(196,139,73,.52) 11% 19%,transparent 20%), linear-gradient(30deg,transparent 0 58%,rgba(67,104,137,.30) 59% 63%,transparent 64%), linear-gradient(145deg,#d8c9b7,#8f765f); }
.rd-atelier-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(7,8,8,.86),rgba(7,8,8,.27)); }
.rd-atelier-panel small { color: #dfc081; font-size: 7px; letter-spacing: .15em; }
.rd-atelier-panel h2 { margin: 10px 0 8px; font: 400 28px/1 Georgia,"Times New Roman",serif; }
.rd-atelier-panel p { max-width: 220px; margin: 0; color: #d0cbc3; font-size: 8px; line-height: 1.65; }
.rd-atelier-panel span { position: absolute; left: 18px; bottom: 18px; color: #f1dfb7; font-size: 8px; }

.rd-other-apps { min-height: 0; display: grid; grid-template-columns: 120px repeat(3,minmax(0,1fr)); gap: 8px; padding: 8px; }
.rd-other-label { display: flex; flex-direction: column; justify-content: center; padding-left: 10px; }
.rd-other-label b { font-size: 10px; font-weight: 560; }
.rd-other-label small { margin-top: 5px; color: #77746f; font-size: 7px; }
.rd-app-small { min-width: 0; display: grid; grid-template-columns: 39px minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid transparent; border-radius: 13px; background: rgba(255,255,255,.025); color: #ddd8cf; text-align: left; cursor: pointer; }
.rd-app-small:hover,.rd-app-small:focus-visible { outline: none; border-color: rgba(214,183,119,.42); background: rgba(214,183,119,.055); }
.rd-app-small i { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--rd-app-color); font-style: normal; font-size: 17px; }
.rd-app-small b { display: block; font-size: 10px; font-weight: 550; }
.rd-app-small small { display: block; margin-top: 4px; color: #77746f; font-size: 7px; }
.rd-app-small em { color: #8d8982; font: normal 13px/1 Arial,sans-serif; }
.rd-app-small.music { --rd-app-color: linear-gradient(145deg,#8c61ff,#4642c7); }
.rd-app-small.workout { --rd-app-color: linear-gradient(145deg,#eea23f,#dd5437); }
.rd-app-small.drawing { --rd-app-color: linear-gradient(145deg,#47a9d9,#4d58c7); }

html[data-theme="light"] .rd-apps-detail { color: #1e3431; }
html[data-theme="light"] .rd-recent-panel,
html[data-theme="light"] .rd-atelier-panel,
html[data-theme="light"] .rd-other-apps { border-color: rgba(38,77,71,.12); background: rgba(255,255,255,.76); box-shadow: 0 14px 34px rgba(52,74,68,.07); }
html[data-theme="light"] .rd-apps-meta span { border-color: rgba(38,77,71,.12); background: rgba(255,255,255,.60); color: #6f7d79; }
html[data-theme="light"] .rd-section-head span,
html[data-theme="light"] .rd-other-label small,
html[data-theme="light"] .rd-app-small small { color: #71807c; }
html[data-theme="light"] .rd-app-small { background: rgba(246,249,247,.88); color: #243a36; }
html[data-theme="light"] .rd-app-small em { color: #71807c; }

@media (max-width: 1180px), (max-height: 680px) {
  #externalView.rd-detail-ready,#appsView.rd-detail-ready { bottom: 102px !important; }
  .rd-external-detail { grid-template-rows:minmax(0,1fr) 88px; gap:8px; }
  .rd-external-bar { grid-template-columns:minmax(0,1fr) 230px; gap:8px; }
  .rd-external-copy { bottom:26px; }
  .rd-source-list { gap:4px; padding:5px; }
  .rd-source-button { padding:0 9px; }
  .rd-source-button b { font-size:10px; }
  .rd-apps-detail { grid-template-rows:50px minmax(0,1fr) 88px; gap:8px; }
  .rd-apps-main { gap:8px; }
  .rd-recent-panel { grid-template-rows:38px minmax(0,1fr); padding:9px; }
  .rd-recent-grid { gap:6px; }
  .rd-app-feature { padding:11px; }
  .rd-app-feature strong { width:34px;height:34px; }
  .rd-atelier-panel { padding:14px; }
  .rd-atelier-panel span { left:14px;bottom:14px; }
  .rd-other-apps { grid-template-columns:100px repeat(3,minmax(0,1fr)); gap:5px; padding:5px; }
  .rd-app-small { padding:0 8px; gap:7px; }
  .rd-app-small i { width:34px;height:34px; }
}

/* ROUND v2 detail system -------------------------------------------------- */
:root {
  --rd-surface: rgba(12,14,14,.92);
  --rd-surface-soft: rgba(255,255,255,.035);
  --rd-radius-lg: 24px;
  --rd-radius-md: 17px;
}

#lifeView,
#mapView,
#conciergeView,
#galleryView,
#settingsView,
#workspaceView,
#connectView {
  bottom: 112px !important;
  gap: 12px !important;
}

#lifeView > *,
#mapView > *,
#conciergeView > *,
#galleryView > *,
#settingsView > *,
#workspaceView > *,
#connectView > * {
  min-width: 0;
}

/* Life Scene: one visual, one decision, four presets */
#lifeView {
  grid-template-columns: minmax(0,1fr) 318px !important;
  grid-template-rows: minmax(0,1fr) 120px !important;
}

#lifeView > .hero {
  grid-column: 1 !important;
  grid-row: 1 !important;
  overflow: hidden;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius-lg) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

#lifeView > .hero::after {
  background: linear-gradient(90deg,rgba(5,6,6,.82),rgba(5,6,6,.22) 63%,rgba(5,6,6,.06)),linear-gradient(0deg,rgba(5,6,6,.62),transparent 48%) !important;
}

#lifeView .hero-copy { left: 32px !important; bottom: 32px !important; width: min(520px,62%) !important; }
#lifeView .hero-description { color: #c7c2b9 !important; font-size: 11px !important; line-height: 1.7 !important; }
#lifeView .scene-summary {
  right: 25px !important;
  bottom: 24px !important;
  min-width: 220px;
  padding: 16px 18px !important;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(8,9,9,.60);
  backdrop-filter: blur(18px);
}
#lifeView .scene-name { font: 400 25px/1.1 Georgia,"Times New Roman",serif !important; }
#lifeView .scene-meta { margin-top: 9px; color: #b4afa7 !important; font-size: 8px !important; line-height: 1.6 !important; }

#lifeView > .side-panel {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  grid-template-rows: minmax(0,1fr) auto !important;
  gap: 10px !important;
}
#lifeView .side-panel > .climate {
  display: grid;
  align-content: start;
  border-radius: var(--rd-radius-lg) !important;
  background: var(--rd-surface) !important;
}
#lifeView .climate-main { margin-top: 8px !important; }
#lifeView .temp-ring { width: 116px !important; height: 116px !important; }
#lifeView .metric-grid { gap: 6px !important; }
#lifeView .metric { min-height: 50px; border-radius: 12px !important; background: var(--rd-surface-soft) !important; }
#lifeView .sliders { margin-top: 8px !important; gap: 5px !important; }
#lifeView .side-panel > .scene-detail {
  padding: 15px !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg,rgba(214,183,119,.10),rgba(255,255,255,.025)) !important;
}
#lifeView .scene-detail h2 { margin: 6px 0 3px !important; font-size: 20px !important; }
#lifeView .scene-detail p { display: none; }
#lifeView .scene-detail button { height: 40px !important; margin-top: 8px !important; border-radius: 12px !important; }
#lifeView .life-actions { display: none !important; }

#lifeView > .scene-strip {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 20px !important;
  background: var(--rd-surface) !important;
}
#lifeView .scene-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  text-align: left !important;
}
#lifeView .scene-card .scene-symbol { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.05); font-size: 16px !important; }
#lifeView .scene-card small { display: none !important; }
#lifeView .scene-card strong { align-self: end; font-size: 12px !important; }
#lifeView .scene-card > span:last-child { align-self: start; overflow: hidden; color: #77746f !important; font-size: 7px !important; white-space: nowrap; text-overflow: ellipsis; }
#lifeView .scene-card.active { border-color: rgba(214,183,119,.50) !important; background: rgba(214,183,119,.08) !important; }
#lifeView .scene-card.active .scene-symbol { color: #edcf91; background: rgba(214,183,119,.14); }

/* MapView: spatial overview with clearly exposed specialist modes */
#mapView { grid-template-columns: minmax(0,1fr) 280px !important; }
#mapView .map-stage { border: 1px solid var(--rd-line) !important; border-radius: var(--rd-radius-lg) !important; background: #0b0d0d !important; box-shadow: 0 24px 70px rgba(0,0,0,.26); }
#mapView .map-heading { padding-right: 300px !important; }
#mapView .map-summary { display: none !important; }
#mapView .plan-wrap { bottom: 72px !important; }
#mapView .map-legend { bottom: 47px !important; }
#mapView .room-panel { gap: 10px !important; }
#mapView .room-panel > .panel { border: 1px solid var(--rd-line) !important; background: var(--rd-surface) !important; }
#mapView .rx-map-launchers {
  z-index: 20;
  right: 18px;
  bottom: 15px;
  left: 18px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(8,9,9,.88);
  box-shadow: 0 16px 44px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
#mapView .rx-map-launchers button {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  color: #d9d4cb;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
#mapView .rx-map-launchers button > i { color: #706d67; font: normal 8px/1 Arial,sans-serif; }
#mapView .rx-map-launchers button > span { min-width: 0; display: grid; gap: 3px; }
#mapView .rx-map-launchers button b { color: #ded9d0; font-size: 9px; font-weight: 600; letter-spacing: .03em; }
#mapView .rx-map-launchers button small { overflow: hidden; color: #77736d; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
#mapView .rx-map-launchers button.active { border-color: rgba(214,183,119,.42); background: rgba(214,183,119,.10); box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 0 18px rgba(214,183,119,.035); }
#mapView .rx-map-launchers button.active > i,
#mapView .rx-map-launchers button.active b { color: #ecd5a2; }
#mapView .rx-map-launchers button::after { display: none; }
#mapView .rx-fit-layer.show { grid-template-rows: 72px 50px minmax(0,1fr); }
#mapView .rx-fit-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 7px 18px; border-top: 1px solid rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.018); }
#mapView .rx-fit-steps span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; border-radius: 10px; color: #716e68; }
#mapView .rx-fit-steps i { font: normal 8px/1 Arial,sans-serif; }
#mapView .rx-fit-steps b { font-size: 9px; font-weight: 500; }
#mapView .rx-fit-steps span.active { background: rgba(214,183,119,.10); color: #e4cc98; }
#mapView .rx-fit-steps span.done { color: #9eb6a5; }
#mapView .rx-fit-products h3,
#mapView .rx-fit-report h3 { margin: 7px 0 0; font: 400 18px/1.1 Georgia,"Times New Roman",serif; }
#mapView .rx-fit-products > p { margin: 8px 0 0; color: #77736d; font-size: 8px; line-height: 1.55; }
#mapView .rx-product { min-height: 57px; padding: 12px 13px; }
#mapView .rx-fit-plan-guide { position: absolute; z-index: 3; top: 13px; left: 50%; display: grid; gap: 4px; width: max-content; transform: translateX(-50%); text-align: center; pointer-events: none; }
#mapView .rx-fit-plan-guide b { color: #c8c1b5; font-size: 9px; font-weight: 500; }
#mapView .rx-fit-plan-guide span { color: #6d6963; font-size: 7px; }
#mapView .map-actions .test-btn { font-size: 0 !important; }
#mapView .map-actions .test-btn::after { content: "비상 제어"; font-size: 9px; }

/* Concierge: notice first, everyday actions second */
#conciergeView { grid-template-columns: minmax(0,1fr) 292px !important; }
#conciergeView > .concierge-stage { padding: 18px !important; border: 1px solid var(--rd-line) !important; border-radius: var(--rd-radius-lg) !important; background: #0c0e0e !important; }
#conciergeView .concierge-head { min-height: 48px !important; }
#conciergeView .concierge-head p { margin-top: 4px !important; font-size: 9px !important; }
#conciergeView .concierge-grid { grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr) !important; gap: 10px !important; }
#conciergeView .concierge-column { gap: 9px !important; }
#conciergeView .notice-feature { min-height: 0 !important; border-radius: 19px !important; }
#conciergeView .notice-feature h2 { max-width: 560px; font-size: 24px !important; }
#conciergeView .notice-list { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 7px !important; }
#conciergeView .notice-item { min-height: 74px !important; padding: 11px !important; border-radius: 13px !important; }
#conciergeView .booking-panel,
#conciergeView .quick-service-panel { padding: 13px !important; border-radius: 18px !important; }
#conciergeView .facility-list { gap: 6px !important; }
#conciergeView .facility-card { min-height: 56px !important; padding: 9px !important; border-radius: 12px !important; }
#conciergeView .quick-services { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
#conciergeView .service-btn { min-height: 66px !important; padding: 10px !important; border-radius: 12px !important; }
#conciergeView .service-btn.elevator-service { grid-column: 1 / -1 !important; min-height: 72px !important; border-color: rgba(214,183,119,.38) !important; background: rgba(214,183,119,.065) !important; }
#conciergeView .quick-services > .service-btn:nth-child(4),
#conciergeView .quick-services > .service-btn:nth-child(5) { display: none !important; }
#conciergeView .concierge-foot { min-height: 24px !important; font-size: 7px !important; }
#conciergeView > .concierge-side { gap: 9px !important; }
#conciergeView .concierge-side > .panel { border: 1px solid var(--rd-line) !important; border-radius: 19px !important; background: var(--rd-surface) !important; }
#conciergeView .booking-detail { flex: 1; min-height: 0; }
#conciergeView .request-panel { padding-bottom: 12px !important; }
#conciergeView .concierge-actions { min-height: 58px !important; }

/* Concierge v2: reveal one task at a time */
#conciergeView.rd-concierge-ready > .concierge-stage {
  display: grid !important;
  grid-template-rows: auto 49px minmax(0,1fr) auto !important;
  gap: 10px !important;
}
#conciergeView.rd-concierge-ready .concierge-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  min-height: 0;
}
.rd-concierge-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--rd-line);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
.rd-concierge-tabs button {
  min-width: 0;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #aaa69f;
  text-align: left;
  cursor: pointer;
}
.rd-concierge-tabs button i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255,255,255,.045); color: #77746e; font: normal 7px/1 Arial,sans-serif; }
.rd-concierge-tabs button span { min-width: 0; }
.rd-concierge-tabs button b { display: block; color: #d8d3ca; font-size: 9px; font-weight: 570; }
.rd-concierge-tabs button small { display: block; margin-top: 3px; overflow: hidden; color: #716e69; font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }
.rd-concierge-tabs button.active { border-color: rgba(214,183,119,.43); background: rgba(214,183,119,.085); }
.rd-concierge-tabs button.active i { color: #e5c98f; background: rgba(214,183,119,.13); }
.rd-concierge-tabs button.active b { color: #f0dfb8; }

#conciergeView.rd-concierge-mode-notices .concierge-column.booking,
#conciergeView.rd-concierge-mode-facilities .concierge-column.notices,
#conciergeView.rd-concierge-mode-services .concierge-column.notices { display: none !important; }
#conciergeView.rd-concierge-mode-notices .concierge-column.notices { display: grid !important; grid-template-rows: minmax(0,1fr) 82px !important; gap: 8px !important; }
#conciergeView.rd-concierge-mode-notices .notice-list { min-height: 0; }

#conciergeView.rd-concierge-mode-facilities .concierge-column.booking,
#conciergeView.rd-concierge-mode-services .concierge-column.booking { display: grid !important; grid-template-rows: minmax(0,1fr) !important; }
#conciergeView.rd-concierge-mode-facilities .quick-service-panel,
#conciergeView.rd-concierge-mode-services .booking-panel { display: none !important; }
#conciergeView.rd-concierge-mode-facilities .booking-panel,
#conciergeView.rd-concierge-mode-services .quick-service-panel { display: grid !important; min-height: 0; }

#conciergeView.rd-concierge-mode-facilities .booking-panel { grid-template-rows: auto minmax(0,1fr); }
#conciergeView.rd-concierge-mode-facilities .facility-list { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; align-items: stretch; }
#conciergeView.rd-concierge-mode-facilities .facility-card {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 9px !important;
  padding: 18px !important;
  border-radius: 17px !important;
  background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
}
#conciergeView.rd-concierge-mode-facilities .facility-icon { width: 43px !important; height: 43px !important; font-size: 19px !important; }
#conciergeView.rd-concierge-mode-facilities .facility-card > span:nth-child(2) b { font-size: 13px !important; }
#conciergeView.rd-concierge-mode-facilities .facility-card > span:nth-child(2) span { margin-top: 6px !important; font-size: 8px !important; }
#conciergeView.rd-concierge-mode-facilities .facility-state { margin-top: auto; padding-top: 11px; color: #b6d2bc !important; font-size: 8px !important; }

#conciergeView.rd-concierge-mode-services .quick-services {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: 1.1fr 1fr 1fr !important;
  gap: 8px !important;
  min-height: 0;
}
#conciergeView.rd-concierge-mode-services .quick-services > .service-btn { display: grid !important; min-height: 0 !important; border-radius: 16px !important; }
#conciergeView.rd-concierge-mode-services .quick-services > .elevator-service { grid-column: 1 / -1 !important; min-height: 0 !important; }

#conciergeView.rd-concierge-ready > .concierge-side {
  display: grid !important;
  grid-template-rows: minmax(0,1fr) !important;
  min-height: 0;
}
#conciergeView.rd-concierge-ready .concierge-actions { display: none !important; }
#conciergeView.rd-concierge-mode-notices .booking-detail,
#conciergeView.rd-concierge-mode-notices .request-panel,
#conciergeView.rd-concierge-mode-facilities .rd-concierge-summary,
#conciergeView.rd-concierge-mode-facilities .request-panel,
#conciergeView.rd-concierge-mode-services .rd-concierge-summary,
#conciergeView.rd-concierge-mode-services .booking-detail { display: none !important; }
#conciergeView.rd-concierge-mode-notices .rd-concierge-summary,
#conciergeView.rd-concierge-mode-facilities .booking-detail,
#conciergeView.rd-concierge-mode-services .request-panel { display: block !important; }

#conciergeView .rd-concierge-summary { padding: 20px !important; overflow: hidden; }
.rd-concierge-summary-head { display: flex; align-items: center; justify-content: space-between; }
.rd-concierge-summary-head small { color: var(--rd-gold); font-size: 7px; letter-spacing: .15em; }
.rd-concierge-summary-head span { padding: 6px 8px; border: 1px solid rgba(140,191,155,.24); border-radius: 999px; color: #9bc7a6; font-size: 7px; }
.rd-concierge-summary h2 { margin: 22px 0 18px; font: 400 27px/1.18 Georgia,"Times New Roman",serif; }
.rd-concierge-today { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rd-concierge-today div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.035); }
.rd-concierge-today span { display: block; color: #77746e; font-size: 7px; }
.rd-concierge-today b { display: block; margin-top: 6px; font-size: 14px; font-weight: 520; }
.rd-elevator-quick { width: 100%; min-height: 78px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; margin-top: 10px; padding: 12px; border: 1px solid rgba(214,183,119,.39); border-radius: 15px; background: rgba(214,183,119,.075); color: #ddd8ce; text-align: left; cursor: pointer; }
.rd-elevator-quick > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(214,183,119,.13); color: #e4c78d; font: normal 18px/1 Arial,sans-serif; }
.rd-elevator-quick b { display: block; font-size: 11px; }
.rd-elevator-quick small { display: block; margin-top: 5px; color: #85817a; font-size: 7px; }
.rd-elevator-quick em { color: #e0c58e; font: normal 8px/1 Arial,sans-serif; }
.rd-concierge-summary > p { margin: 15px 0 0; color: #716e68; font-size: 7px; line-height: 1.55; }

#conciergeView.rd-concierge-ready .booking-detail,
#conciergeView.rd-concierge-ready .request-panel { padding: 17px !important; overflow: auto; }
#conciergeView.rd-concierge-ready .booking-body { padding-top: 8px !important; }
#conciergeView.rd-concierge-ready .booking-body h2 { margin: 10px 0 6px !important; font-size: 25px !important; }
#conciergeView.rd-concierge-ready .booking-body p { margin: 0 0 18px !important; font-size: 8px !important; }
#conciergeView.rd-concierge-ready .choice-label { margin-top: 13px !important; }
#conciergeView.rd-concierge-ready .choice-row { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 5px !important; }
#conciergeView.rd-concierge-ready .choice-chip { min-width: 0 !important; height: 38px !important; border-radius: 10px !important; }
#conciergeView.rd-concierge-ready .booking-confirm,
#conciergeView.rd-concierge-ready .request-send { width: 100%; min-height: 44px; margin-top: 16px !important; border-radius: 12px !important; }
#conciergeView.rd-concierge-ready .request-body { padding-top: 12px !important; }
#conciergeView.rd-concierge-ready .request-title { display: grid !important; gap: 7px; }
#conciergeView.rd-concierge-ready .request-title b { font-size: 21px !important; }
#conciergeView.rd-concierge-ready .request-description { margin-top: 12px !important; }

#conciergeView .concierge-overlay { background: rgba(4,5,5,.73) !important; backdrop-filter: blur(14px); }
#conciergeView .concierge-dialog { border: 1px solid rgba(255,255,255,.12) !important; border-radius: 24px !important; background: #101212 !important; box-shadow: 0 28px 90px rgba(0,0,0,.52) !important; }
#conciergeView .dialog-head { padding: 17px 19px !important; }
#conciergeView .activity-column { border-radius: 16px !important; background: rgba(255,255,255,.025) !important; }
#conciergeView .request-form { gap: 12px !important; padding: 20px !important; }
#conciergeView .request-form label { gap: 7px !important; color: #918d85 !important; font-size: 8px !important; }
#conciergeView .request-form input,
#conciergeView .request-form select,
#conciergeView .request-form textarea { min-height: 42px; border-radius: 11px !important; background: rgba(255,255,255,.04) !important; }
#conciergeView .request-form textarea { min-height: 92px; }
#conciergeView .request-form-submit { min-height: 45px; border-radius: 12px !important; }

html[data-theme="light"] .rd-concierge-tabs { border-color: rgba(38,77,71,.12); background: rgba(255,255,255,.58); }
html[data-theme="light"] .rd-concierge-tabs button b { color: #30443f; }
html[data-theme="light"] .rd-concierge-tabs button small { color: #7b8985; }
html[data-theme="light"] .rd-concierge-tabs button.active { border-color: rgba(47,104,99,.35); background: rgba(47,104,99,.07); }
html[data-theme="light"] .rd-concierge-tabs button.active b { color: #26423d; }
html[data-theme="light"] #conciergeView .rd-concierge-summary { background: rgba(251,249,244,.92) !important; }
html[data-theme="light"] .rd-concierge-today div { background: rgba(47,104,99,.055); }
html[data-theme="light"] .rd-elevator-quick { border-color: rgba(47,104,99,.27); background: rgba(47,104,99,.065); color: #28423d; }
html[data-theme="light"] #conciergeView .concierge-dialog { border-color: rgba(38,77,71,.14) !important; background: #f8f6f0 !important; }

/* Gallery: the photograph is the interface */
#galleryView { grid-template-columns: minmax(0,1fr) 250px !important; }
#galleryView .gallery-stage { border: 1px solid var(--rd-line) !important; border-radius: var(--rd-radius-lg) !important; box-shadow: 0 26px 78px rgba(0,0,0,.30); }
#galleryView .gallery-stage::after { background: linear-gradient(90deg,rgba(5,6,6,.62),transparent 64%),linear-gradient(0deg,rgba(4,5,5,.78),transparent 52%) !important; }
#galleryView .gallery-copy { left: 30px !important; bottom: 28px !important; max-width: 490px !important; }
#galleryView .gallery-copy h1 { margin: 9px 0 8px !important; font-size: clamp(34px,3.3vw,53px) !important; }
#galleryView .gallery-copy p { max-width: 450px; color: #cbc5bc !important; font-size: 9px !important; line-height: 1.65 !important; }
#galleryView .gallery-side { display: grid !important; grid-template-rows: auto minmax(0,1fr) auto !important; gap: 9px !important; }
#galleryView .gallery-summary,
#galleryView .gallery-sync { padding: 14px !important; border: 1px solid var(--rd-line) !important; border-radius: 18px !important; background: var(--rd-surface) !important; }
#galleryView .gallery-summary p { display: none !important; }
#galleryView .gallery-thumb-list { display: grid !important; grid-template-rows: repeat(3,minmax(0,1fr)) !important; gap: 7px !important; }
#galleryView .gallery-thumb { min-height: 0 !important; border-radius: 16px !important; }
#galleryView .gallery-thumb span { padding: 12px !important; }

/* Settings: editing surface, not another dashboard */
#settingsView { grid-template-columns: minmax(0,1fr) !important; }
#settingsView > .life-editor {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 96px minmax(0,1fr);
  gap: 10px;
  padding: 16px !important;
  overflow: hidden;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-lg);
  background: #0c0e0e;
}
#settingsView > .life-side { display: none !important; }
#settingsView .life-editor-head { min-height: 58px !important; padding: 0 3px !important; }
#settingsView .life-editor-head h1 { margin: 5px 0 0 !important; font-size: 25px !important; }
#settingsView .life-editor-head p { display: none !important; }
#settingsView .life-current { min-width: 240px !important; padding: 10px 14px !important; border-radius: 14px !important; }
#settingsView .life-mode-grid { gap: 7px !important; }
#settingsView .life-mode-grid .scene-card { min-height: 0 !important; padding: 12px !important; border-radius: 14px !important; }
#settingsView .life-mode-grid .scene-symbol { font-size: 18px !important; }
#settingsView .life-mode-grid .scene-card > span:last-child { display: none !important; }
#settingsView .life-config-grid { min-height: 0; grid-template-columns: .76fr 1.3fr .94fr !important; gap: 9px !important; }
#settingsView .life-config-grid > * { min-height: 0; border-radius: 18px !important; }
#settingsView .trigger-panel,
#settingsView .room-config,
#settingsView .result-panel,
#settingsView .theme-schedule-card { padding: 13px !important; }
#settingsView .room-config { overflow: auto; }

/* Idea Wall and Connect share the same calm work surface */
#workspaceView { grid-template-rows: 64px 46px minmax(0,1fr) !important; gap: 9px !important; }
#workspaceView .rx-work-head,
#workspaceView .rx-work-toolbar,
#workspaceView .rx-board,
#connectView .rx-presence-stage,
#connectView .rx-connect-panel {
  border-color: var(--rd-line) !important;
  background-color: var(--rd-surface) !important;
  box-shadow: 0 20px 58px rgba(0,0,0,.20);
}
#workspaceView .rx-work-head { border-radius: 19px !important; padding: 0 16px !important; }
#workspaceView .rx-work-title h1 { margin-top: 4px !important; font-size: 22px !important; }
#workspaceView .rx-work-toolbar { border-radius: 15px !important; padding: 0 8px !important; }
#workspaceView .rx-board { border-radius: var(--rd-radius-lg) !important; }
#workspaceView .rx-card { border-radius: 16px !important; }
#connectView { grid-template-columns: minmax(0,1fr) 290px !important; }
#connectView .rx-presence-stage { border-radius: var(--rd-radius-lg) !important; }
#connectView .rx-connect-side { gap: 9px !important; }
#connectView .rx-connect-panel { border-radius: 18px !important; }
#connectView .rx-call-card { border-radius: var(--rd-radius-lg) !important; }

/* MapView lighting follows real relay capability: on/off only. */
.rd-map-light-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.rd-map-light-switch button {
  height:31px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#77746e;
  font-size:8px;
  cursor:pointer;
}
.rd-map-light-switch button.active {
  border-color:rgba(214,183,119,.48);
  background:rgba(214,183,119,.11);
  color:#ead09a;
}
html[data-theme="light"] .rd-map-light-switch button {
  border-color:rgba(38,77,71,.12);
  background:rgba(255,255,255,.58);
  color:#71807c;
}
html[data-theme="light"] .rd-map-light-switch button.active {
  border-color:rgba(47,104,99,.38);
  background:rgba(47,104,99,.08);
  color:#25423d;
}

/* Light mode keeps the same hierarchy without turning into a white dashboard */
html[data-theme="light"] #lifeView > .scene-strip,
html[data-theme="light"] #lifeView .side-panel > .climate,
html[data-theme="light"] #mapView .room-panel > .panel,
html[data-theme="light"] #conciergeView .concierge-side > .panel,
html[data-theme="light"] #galleryView .gallery-summary,
html[data-theme="light"] #galleryView .gallery-sync,
html[data-theme="light"] #settingsView > .life-editor,
html[data-theme="light"] #workspaceView .rx-work-head,
html[data-theme="light"] #workspaceView .rx-work-toolbar,
html[data-theme="light"] #workspaceView .rx-board,
html[data-theme="light"] #connectView .rx-connect-panel {
  border-color: rgba(38,77,71,.13) !important;
  background: rgba(251,249,244,.90) !important;
  color: #263a36;
  box-shadow: 0 16px 38px rgba(52,74,68,.08);
}

@media (max-width: 1180px), (max-height: 680px) {
  #lifeView,#mapView,#conciergeView,#galleryView,#settingsView,#workspaceView,#connectView { bottom: 102px !important; }
  #lifeView { grid-template-columns:minmax(0,1fr) 280px !important; grid-template-rows:minmax(0,1fr) 104px !important; }
  #lifeView .scene-summary { display:none; }
  #lifeView .temp-ring { width:92px !important;height:92px !important; }
  #lifeView .metric { min-height:42px; }
  #mapView { grid-template-columns:minmax(0,1fr) 245px !important; }
  #conciergeView { grid-template-columns:minmax(0,1fr) 260px !important; }
  #galleryView { grid-template-columns:minmax(0,1fr) 220px !important; }
  #settingsView > .life-editor { grid-template-rows:auto 82px minmax(0,1fr); padding:11px !important; }
  #settingsView .life-config-grid { gap:6px !important; }
  #connectView { grid-template-columns:minmax(0,1fr) 250px !important; }
}