/* Illustrative website previews drawn from Flutter's SmartHomeTheme. */
.gui-showcase.app-preview { min-height: 0; width: 100%; overflow: visible; }
.gui-screen-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
.gui-phone { min-width: 0; overflow: hidden; color: #edf4ff; background: #0b1220; border: 1px solid #2a374b; border-radius: 28px; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.4; text-align: start; }
.gui-screen-content { padding: 18px 14px; }
.gui-icon { width: 20px; height: 20px; flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gui-dashboard-header, .gui-editor-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 19px; }
.gui-dashboard-header > div { min-width: 0; }
.gui-dashboard-header strong { display: block; margin-top: 4px; font-size: 1.08rem; letter-spacing: -.025em; }
.gui-brand { color: #76b9ff; font-size: .63rem; font-weight: 600; }
.gui-dashboard-header > .gui-icon { width: 19px; height: 19px; }
.gui-hub-card { padding: 13px 11px; border: 1px solid #2a374b; border-radius: 20px; background: #151e2e; }
.gui-hub-heading { display: flex; align-items: center; gap: 9px; }
.gui-icon-box { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 11px; color: #76b9ff; background: rgba(118,185,255,.1); }
.gui-icon-box .gui-icon { width: 18px; height: 18px; }
.gui-hub-heading > div { min-width: 0; }
.gui-hub-heading strong, .gui-hub-heading small { display: block; }
.gui-hub-heading strong { font-size: .75rem; font-weight: 600; }
.gui-hub-heading small { margin-top: 3px; color: #9dabbd; font-size: .52rem; overflow-wrap: anywhere; }
.gui-hub-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.gui-status { color: #70dfb5; background: rgba(112,223,181,.1); padding: 5px 8px; border-radius: 99px; font-size: .57rem; }
.gui-outline-action { padding: 5px 8px; border: 1px solid #2a374b; border-radius: 99px; font-size: .53rem; }
.gui-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #2a374b; }
.gui-metrics strong, .gui-metrics small { display: block; }
.gui-metrics strong { font-size: 1.1rem; font-weight: 600; }
.gui-metrics small { margin-top: 3px; color: #9dabbd; font-size: .57rem; }
.gui-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; }
.gui-section-title strong { font-size: .8rem; font-weight: 600; }
.gui-section-title > small { color: #76b9ff; font-size: .57rem; }
.gui-section-title > .gui-icon { color: #9dabbd; width: 16px; height: 16px; }
.gui-hint { color: #9dabbd; font-size: .55rem; margin: 0 0 11px; }
.gui-device-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gui-device-tile { min-width: 0; padding: 11px 8px; border: 1px solid #2a374b; border-radius: 18px; background: #151e2e; }
.gui-device-tile.active { border-color: rgba(118,185,255,.4); background: rgba(118,185,255,.1); }
.gui-device-tile > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 15px; color: #9dabbd; }
.gui-device-tile.active > div { color: #76b9ff; }
.gui-device-tile > div > .gui-icon { width: 17px; height: 17px; }
.gui-device-tile > strong, .gui-device-tile > small { display: block; }
.gui-device-tile > strong { font-size: .63rem; font-weight: 600; overflow-wrap: anywhere; }
.gui-device-tile > small { color: #9dabbd; font-size: .51rem; margin-top: 4px; }
.gui-device-state { display: block; margin-top: 13px; color: #9dabbd; font-size: .55rem; }
.gui-device-tile.active .gui-device-state { color: #70dfb5; }
.gui-switch { position: relative; display: inline-block; flex: 0 0 26px; width: 26px; height: 16px; border: 1px solid #9dabbd; border-radius: 99px; background: #2a374b; }
.gui-switch::after { content: ''; position: absolute; inset-inline-start: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #edf4ff; }
.gui-switch.on { background: #76b9ff; border-color: #76b9ff; }
.gui-switch.on::after { inset-inline-start: auto; inset-inline-end: 2px; top: 2px; width: 10px; height: 10px; background: #0b1220; }
.gui-room-row { display: flex; align-items: center; gap: 8px; padding: 11px 9px; border: 1px solid #2a374b; border-radius: 18px; background: #151e2e; }
.gui-room-row > div { flex: 1; min-width: 0; }
.gui-room-row strong, .gui-room-row small { display: block; }
.gui-room-row strong { font-size: .65rem; font-weight: 600; }
.gui-room-row small { color: #9dabbd; font-size: .52rem; margin-top: 3px; }
.gui-room-active { color: #70dfb5; font-size: .45rem; }
.gui-chevron { color: #9dabbd; font-size: 1.1rem; }
html[dir="rtl"] .gui-chevron { transform: scaleX(-1); }
.gui-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 12px 5px; border-top: 1px solid #2a374b; background: #151e2e; gap: 3px; }
.gui-nav > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; color: #9dabbd; min-width: 0; text-align: center; }
.gui-nav .gui-icon { width: 23px; height: 23px; padding: 3px; }
.gui-nav .selected .gui-icon { box-sizing: content-box; width: 17px; height: 17px; padding: 3px 12px; border-radius: 99px; color: #76b9ff; background: rgba(118,185,255,.16); }
.gui-nav small { font-size: .49rem; overflow-wrap: anywhere; }
.gui-nav .selected small { color: #edf4ff; font-weight: 600; }
.gui-editor { border-radius: 28px 28px 20px 20px; }
.gui-editor-header { margin-bottom: 21px; }
.gui-editor-header strong { font-size: .94rem; }
.gui-editor-header .gui-icon { color: #9dabbd; width: 18px; height: 18px; }
.gui-field { padding: 11px; margin-top: 12px; border: 1px solid #2a374b; border-radius: 15px; background: #1d2a3d; }
.gui-field small { display: block; color: #9dabbd; font-size: .57rem; margin-bottom: 5px; }
.gui-field > span { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px; font-size: .72rem; }
.gui-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; font-size: .65rem; }
.gui-option:first-of-type { margin-top: 8px; }
.gui-icon-label { display: block; color: #9dabbd; font-size: .63rem; margin-top: 12px; }
.gui-icon-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.gui-icon-choices > span { display: grid; place-items: center; min-height: 35px; border-radius: 11px; color: #edf4ff; background: #1d2a3d; }
.gui-icon-choices > span .gui-icon { width: 17px; height: 17px; }
.gui-icon-choices > .selected { color: #0b1220; background: #76b9ff; }
.gui-save-action { display: grid; place-items: center; padding: 11px 8px; border-radius: 99px; margin-top: 20px; color: #0b1220; background: #76b9ff; font-size: .71rem; font-weight: 600; text-align: center; }
.gui-showcase figcaption { margin-top: 18px; color: var(--muted); font-size: .72rem; text-align: center; }
.family-preview-art { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 12px; padding: 0; min-height: 0; }
.family-app-screen { width: 100%; min-height: 0; margin: 0; padding: 20px 14px; color: #edf4ff; border-color: #2a374b; border-radius: 28px; background: #0b1220; box-shadow: none; }
.family-access-card { display: block; border: 1px solid #2a374b; border-radius: 20px; padding: 13px 11px; background: #151e2e; }
.family-home-heading { display: flex; align-items: flex-start; gap: 9px; }
.family-home-heading > div { min-width: 0; }
.family-home-heading strong { font-size: .75rem; }
.family-home-heading small { margin-top: 5px; color: #9dabbd; font-size: .55rem; }
.family-home-icon { color: #76b9ff; }
.family-home-icon .gui-icon { width: 23px; height: 23px; }
.family-access-role { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.family-access-role small { color: #9dabbd; font-size: .55rem; }
.family-invite-action, .family-send-action { background: #76b9ff; color: #0b1220; }
.family-member-row, .family-pending-card { border: 1px solid #2a374b; border-radius: 18px; background: #151e2e; }
.family-avatar { background: rgba(118,185,255,.18); color: #76b9ff; }
.family-role { color: #76b9ff; border-color: rgba(118,185,255,.5); background: rgba(118,185,255,.12); }
.family-role.owner-role { color: #f4c979; border-color: rgba(244,201,121,.5); background: rgba(244,201,121,.12); }
.family-role.admin-role { color: #70dfb5; border-color: rgba(112,223,181,.5); background: rgba(112,223,181,.12); }
.family-list-heading > span { color: #76b9ff; background: rgba(118,185,255,.18); }
.family-invite-dialog { position: static; width: 100%; padding: 21px 16px 16px; color: #edf4ff; border-color: #2a374b; border-radius: 28px; background: #151e2e; box-shadow: none; }
.family-dialog-field { border-color: #2a374b; border-radius: 16px; padding: 13px 11px 11px; background: #151e2e; }
.family-dialog-field small { position: static; display: block; padding: 0; margin-bottom: 5px; color: #9dabbd; background: transparent; font-size: .61rem; }
.family-invite-dialog p, .family-member-row small { color: #9dabbd; }
.family-invite-dialog .family-role-help { font-size: .6rem; margin-bottom: 16px; }
.gui-shared-panel { padding: 12px; border: 1px solid rgba(112,223,181,.2); border-radius: 18px; background: rgba(112,223,181,.08); }
.gui-shared-panel strong { display: block; color: #70dfb5; font-size: .7rem; }
.gui-shared-panel p { margin: 8px 0 0; font-size: .6rem; }
.gui-shared-panel small { display: block; color: #9dabbd; font-size: .55rem; margin-top: 5px; }
.family-dialog-actions, .family-pending-actions { color: #76b9ff; }
.family-pending-actions > span:last-child { color: #ff9a9a; }
.family-pending-card > div:first-child > span:first-child { color: #f4c979; }
.gui-gallery-preview { width: min(275px,100%); }
.gui-gallery-preview .gui-phone { border-radius: 25px; }
.gui-gallery-preview .gui-screen-content { padding: 18px 15px; }
.gui-compact .gui-hub-actions > .gui-outline-action, .gui-compact .gui-hint { display: none; }
.gui-compact .gui-hub-heading { display: none; }
.gui-compact .gui-hub-actions { margin-top: 0; }
.app-evidence { min-height: 570px; padding: 28px 24px 105px; background: #151e2e; }
.evidence-grid { grid-auto-rows: minmax(430px,auto); }
@media (max-width: 1000px) {
  .gui-showcase.app-preview { width: min(680px,100%); margin-inline: auto; }
  .gui-screen-pair { gap: 18px; }
  .gui-screen-content { padding: 23px 18px; }
  .family-preview { width: min(680px,100%); }
}
@media (max-width: 650px) {
  .gui-screen-pair, .family-preview-art { grid-template-columns: 1fr; gap: 22px; }
  .gui-phone, .family-app-screen, .family-invite-dialog { width: min(340px,100%); margin-inline: auto; }
  .gui-screen-content { padding: 22px 18px; }
  .gui-dashboard-header strong { font-size: 1.4rem; }
  .gui-section-title strong { font-size: 1rem; }
  .gui-hub-heading strong, .gui-field > span { font-size: .88rem; }
  .gui-hub-heading small, .gui-hint, .gui-device-tile > small, .gui-room-row small { font-size: .66rem; }
  .gui-device-tile > strong, .gui-room-row strong { font-size: .83rem; }
  .gui-metrics small, .gui-status, .gui-outline-action, .gui-device-state { font-size: .68rem; }
  .gui-device-tile { padding: 14px 12px; }
  .gui-field small, .gui-option { font-size: .8rem; }
  .gui-nav small { font-size: .63rem; }
  .family-invite-dialog { padding: 25px 22px 22px; }
  .family-home-heading strong, .family-dialog-title { font-size: 1rem; }
  .family-home-heading small, .family-member-row small, .family-invite-dialog p { font-size: .7rem; }
  .family-invite-dialog .family-role-help, .gui-shared-panel small { font-size: .67rem; }
  .gui-shared-panel strong { font-size: .82rem; }
  .gui-shared-panel p { font-size: .69rem; }
  .family-member-row strong { font-size: .8rem; }
  .family-role, .family-pending-actions, .family-dialog-actions { font-size: .65rem; }
  .gui-gallery-preview .gui-phone { width: 100%; }
  .gui-gallery-preview .gui-dashboard-header strong { font-size: 1.08rem; }
  .gui-gallery-preview .gui-metrics small, .gui-gallery-preview .gui-status { font-size: .57rem; }
  .gui-gallery-preview .gui-device-tile > strong { font-size: .7rem; }
  .gui-gallery-preview .gui-nav small { font-size: .52rem; }
}