:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0b0f14;
  --surface: #10151c;
  --surface-2: #151b23;
  --line: #29313b;
  --text: #e8edf4;
  --muted: #8995a4;
  --blue: #6ea8ff;
  --green: #39d353;
  --red: #ff4038;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { display: grid; grid-template-rows: auto minmax(0, 1fr); }
button, input, select { font: inherit; }
button { min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 750; }
button:disabled { cursor: default; opacity: .45; }

.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; padding: 12px 24px; border-bottom: 1px solid #252d36; background: #0d1218; }
.topbar-left, .topbar-center, .topbar-right { min-width: 0; }
.topbar-center { display: flex; align-items: center; justify-content: flex-end; }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.brand-block { min-width: 0; }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand h1 { margin: 0; color: var(--text); font-size: 22px; line-height: 1.05; letter-spacing: 0; }
.brand span { color: var(--muted); font-size: 12px; }
.brand-subtitle { margin-top: 6px; color: #a8b3c2; font-size: 13px; font-weight: 650; }
.primary-action { min-height: 42px; padding: 0 20px; border-color: #6ea8ff; background: var(--blue); color: #08111f; font-size: 15px; }

.picker-bar { display: flex; align-items: center; gap: 18px; min-width: 0; }
.utility-bar { justify-content: flex-end; }
.picker-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.picker-label { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.picker-select { min-width: 180px; height: 34px; padding: 0 30px 0 10px; border: 1px solid #303c49; border-radius: 7px; outline: none; background: #131a22; color: #dbe2eb; cursor: pointer; font-size: 12px; }
.compact-select { min-width: 112px; }
.picker-select:focus { border-color: #5d94e8; box-shadow: 0 0 0 2px rgb(110 168 255 / 15%); }

main { position: relative; min-height: 0; padding: 20px 24px 16px; overflow: hidden; background: radial-gradient(circle at 50% 10%, #131a23 0, var(--bg) 46%); }
.desktop-stage { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.tenant, .viewer-grid { width: 100%; height: 100%; min-height: 0; }
.viewer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 56px); align-items: stretch; }
.app-slot { display: grid; grid-template-rows: 44px minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; min-height: 44px; padding: 0 4px 10px; }
.pane-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pane-title > span:last-child { display: grid; gap: 2px; min-width: 0; }
.pane-label { overflow: hidden; color: var(--text); font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pane-description { display: block; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.pane-meta { color: var(--muted); font-size: 11px; }
.pane-model-select { flex: 0 0 auto; width: min(210px, 38%); height: 30px; padding: 0 28px 0 10px; border: 1px solid #303c49; border-radius: 7px; outline: none; background: #101720; color: #dbe2eb; cursor: pointer; font-size: 12px; }
.pane-model-select:focus { border-color: #5d94e8; box-shadow: 0 0 0 2px rgb(110 168 255 / 15%); }
.live-dot { display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #485463; box-shadow: 0 0 0 4px rgb(72 84 99 / 12%); }
.app-slot:not(.is-pending) .live-dot { background: var(--green); box-shadow: 0 0 0 4px rgb(57 211 83 / 12%); }
.slot-frame { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; border: 1px solid #202934; border-radius: 22px; background: #020406; box-shadow: 0 16px 44px rgb(0 0 0 / 34%), inset 0 0 0 1px rgb(255 255 255 / 2%); contain: layout paint size; }
.slot-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; transform: translateZ(0); backface-visibility: hidden; }
/* Web apps render inside the template's fixed 1680x1050 desktop canvas. */
.web-slot { grid-template-rows: 44px auto; align-self: start; height: auto; }
.web-frame { height: auto; aspect-ratio: 8 / 5; }
.web-frame iframe { position: absolute; left: 50%; top: 50%; width: 1680px; height: 1050px; max-width: none; transform: translate(-50%, -50%) scale(var(--sandbox-scale, 1)); transform-origin: center; }
.placeholder, .empty-state { height: 100%; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.empty-state { border: 1px dashed #35414e; border-radius: 22px; background: var(--surface); }
.slot-status { position: absolute; left: 16px; top: 16px; z-index: 2; max-width: calc(100% - 32px); padding: 7px 10px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 7px; background: rgb(12 17 23 / 86%); color: var(--text); font-size: 12px; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.app-slot.is-pending .slot-status { opacity: 1; }
.switch-mask { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; border-radius: 22px; background: rgb(0 0 0 / 94%); color: var(--text); font-size: 16px; font-weight: 750; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.app-slot.is-switching .switch-mask { opacity: 1; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 12px; padding: 12px 16px; }
  .topbar-right { gap: 10px; }
  .picker-bar { gap: 8px; }
  .picker-group { gap: 5px; }
  .picker-select { min-width: 120px; max-width: 22vw; }
  main { padding: 14px 16px 12px; }
  .viewer-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  .slot-frame { border-radius: 16px; }
  .switch-mask { border-radius: 16px; }
}

@media (max-width: 560px) {
  .brand h1 { font-size: 18px; }
  .brand span, .brand-subtitle, .pane-meta { display: none; }
}

.landing-page {
  overflow: auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #081018;
}

.landing-topbar,
.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  border-color: #202a35;
  background: #091019;
}

.landing-topbar { border-bottom: 1px solid #202a35; }
.landing-footer { border-top: 1px solid #202a35; color: #96a3b4; font-size: 14px; }

.landing-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.landing-brand strong {
  color: #f3f6fb;
  font-size: 24px;
  line-height: 1;
}

.landing-brand span {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid #3a4654;
  color: #b3becb;
  font-size: 15px;
  white-space: nowrap;
}

.landing-nav,
.landing-footer nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.landing-nav a,
.landing-footer a,
.reserved-back {
  color: #d7dee8;
  text-decoration: none;
}

.landing-nav a:hover,
.landing-footer a:hover,
.reserved-back:hover {
  color: var(--blue);
}

.landing-main {
  min-height: 0;
  padding: 44px 32px 28px;
  overflow: visible;
  background: radial-gradient(circle at 44% 0, #132033 0, #09111a 44%, #070c12 100%);
}

.landing-hero {
  max-width: 1000px;
  margin-bottom: 24px;
}

.landing-hero h1 {
  margin: 0;
  color: #f4f7fb;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .96;
  letter-spacing: 0;
}

.landing-hero p {
  margin: 16px 0 0;
  color: #aab8cc;
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.35;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 20px;
  margin: 22px 0 24px;
}

.platform-card {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 220px;
  padding: 24px 18px;
  border: 1px solid #344050;
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(20 29 40 / 78%), rgb(12 18 26 / 88%));
  color: #edf3fb;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.platform-card:hover,
.platform-card.is-active {
  border-color: #5d9cff;
  background: linear-gradient(180deg, rgb(24 36 52 / 90%), rgb(12 19 29 / 92%));
  transform: translateY(-1px);
}

.platform-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  border: 1px solid rgb(110 168 255 / 36%);
  background: rgb(70 135 245 / 10%);
  color: #6ea8ff;
  font-size: 24px;
  font-weight: 850;
}

.platform-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgb(57 211 83 / 28%);
  border-radius: 7px;
  background: rgb(57 211 83 / 9%);
  color: #85e06f;
  font-size: 14px;
  font-weight: 700;
}

.availability i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #73dd62;
  box-shadow: 0 0 0 4px rgb(57 211 83 / 10%);
}

.platform-arrow {
  color: #b6c2d1;
  font-size: 24px;
}

.landing-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 18px 44px 26px;
  border: 1px solid #293542;
  border-radius: 9px;
  background: rgb(11 18 27 / 76%);
}

.landing-preview p {
  grid-column: 1 / -1;
  margin: 0;
  color: #9facbe;
  font-size: 16px;
  text-align: center;
}

.preview-pane h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 750;
  text-align: center;
}

.preview-pane.original h2 { color: #ff615d; }
.preview-pane.recreation h2 { color: #6ea8ff; }

.preview-window {
  min-height: 210px;
  padding: 22px;
  border: 1px solid #384656;
  border-radius: 9px;
  background: #111923;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
}

.preview-pane.original .preview-window { border-color: #ff4d49; }
.preview-pane.recreation .preview-window { border-color: #4f95ff; }

.window-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.window-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.window-dots i:nth-child(1) { background: #ff625f; }
.window-dots i:nth-child(2) { background: #f8c44d; }
.window-dots i:nth-child(3) { background: #66d466; }

.preview-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
}

.preview-layout span {
  height: 16px;
  border-radius: 4px;
  background: #4c5968;
}

.preview-layout span:nth-child(2n) {
  background: linear-gradient(90deg, #485666, #27313c);
}

.preview-layout span:nth-child(3),
.preview-layout span:nth-child(7) {
  height: 48px;
}

.preview-vs {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #445163;
  border-radius: 50%;
  color: #e5ebf3;
  font-weight: 850;
}

@media (max-width: 1100px) {
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .landing-preview { grid-template-columns: 1fr; }
  .preview-vs { margin: -10px auto; }
}

@media (max-width: 720px) {
  .landing-topbar,
  .landing-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 20px;
  }

  .landing-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .landing-brand span {
    padding-left: 0;
    border-left: 0;
    white-space: normal;
  }

  .landing-main { padding: 32px 20px 24px; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 168px; }
  .landing-preview { padding: 18px; }
}