/* Keep the portal's normal panels, layout, controls and car rendering. */
body.ti-feature-demo { margin:0; }
/* Collapse the upper panels before first paint, and whenever Tint is closed. */
body.ti-feature-demo:not(.ti-tint-mode) .ti-header,
body.ti-feature-demo:not(.ti-tint-mode) #selectedVehicleRow,
body.ti-feature-demo:not(.ti-tint-mode) #selectedFilmPanel,
body.ti-feature-demo:not(.ti-tint-mode) #vehicleUpdateWidget,
body.ti-feature-demo:not(.ti-tint-mode) #tintControlsPanel,
body.ti-feature-demo:not(.ti-tint-mode) #filmBrandRow,
body.ti-feature-demo:not(.ti-tint-mode) #filmTypeRow { display:none!important; }
body.ti-feature-demo .ti-header-subtitle { display:block!important; }
body.ti-feature-demo .demo-library-total {
  display:block; width:100%; padding-top:5px;
  border-top:1px solid rgba(73,194,232,.22);
  color:#dff8ff; font:600 11px/1.4 Arial,Helvetica,sans-serif;
  letter-spacing:0; text-transform:none;
}
body.ti-feature-demo .demo-library-total[hidden] { display:none; }
body.ti-feature-demo #filmPanelBrandLogo { display:none!important; }
body.ti-feature-demo [data-film-brand="your-brand"] .ti-brand-button-text {
  display:block!important; position:static!important;
  width:auto!important; height:auto!important;
  opacity:1!important; visibility:visible!important;
  font:800 20px/1.2 "Segoe UI",Arial,sans-serif!important;
  color:#f3f9fc!important;
}
/* Keep every native control reachable in an embedded monitor or on a phone. */
body.ti-feature-demo #tiHardDock { overflow-x:auto!important; }
body.ti-feature-demo #tiHardDock button { flex-shrink:0!important; }
body.ti-feature-demo #tiHardDock [data-action="toggle-fullscreen"],
body.ti-feature-demo .ti-fullscreen-tool {
  color:#d4ff5c!important; font-weight:800!important;
}
/* Body-level placement keeps Expand above the vehicle/film summary's stacking context. */
body.ti-feature-demo #demoExpand {
  position:fixed!important; top:12px!important; right:14px!important;
  bottom:auto!important; left:auto!important; z-index:2147483647!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  gap:8px!important; min-height:44px!important; padding:8px 14px!important;
  border:2px solid #d4ff5c!important; border-radius:9px!important;
  background:#1b2b1c!important; color:#d4ff5c!important;
  box-shadow:0 0 0 2px rgba(212,255,92,.12),0 0 14px rgba(212,255,92,.3)!important;
  font:800 14px/1.2 "Segoe UI",Arial,sans-serif!important;
  cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation;
}
body.ti-feature-demo [data-demo-expand-label] { color:inherit!important; }
/* Full screen exposes the complete panel; its normal dock provides Exit full screen. */
:root:fullscreen body.ti-feature-demo #demoExpand { display:none!important; }
body.ti-feature-demo #demoExpand:hover { filter:brightness(1.18); }
body.ti-feature-demo #demoExpand:focus-visible { outline:2px solid #d4ff5c; outline-offset:2px; }
.demo-status {
  position:fixed; z-index:2147483647; top:45%; left:50%;
  transform:translate(-50%,-50%); max-width:80%;
  padding:14px 18px; border:1px solid #526672; border-radius:10px;
  background:#101b25; color:#f4f7fa;
  font:14px/1.5 "Segoe UI",Arial,sans-serif; text-align:center;
}
.demo-status[hidden] { display:none; }
.demo-status button, .demo-quote button {
  min-height:42px; padding:8px 14px; border:1px solid #d4ff5c;
  border-radius:8px; background:#1b2b1c; color:#d4ff5c;
  font:700 14px/1.3 "Segoe UI",Arial,sans-serif; cursor:pointer;
}
.demo-quote {
  box-sizing:border-box; width:min(460px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px); overflow:auto;
  margin:auto; padding:24px; border:1px solid #536b7e; border-radius:16px;
  background:#101b25; color:#f4f7fa; font:15px/1.5 "Segoe UI",Arial,sans-serif;
}
.demo-quote::backdrop { background:rgba(0,0,0,.7); }
.demo-quote h2 { margin:0 0 12px; font-size:22px; }
.demo-quote p { color:#bdcbd4; }
.demo-quote pre { padding:14px; border-radius:8px; background:#07121b; white-space:pre-wrap; font:inherit; }
.demo-quote button:focus-visible, .demo-status button:focus-visible { outline:2px solid #d4ff5c; outline-offset:3px; }